項(xiàng)目41網(wǎng)站前臺(tái)功能的實(shí)現(xiàn)指導(dǎo)書(shū)

1、單元四 單元四 網(wǎng)站的實(shí)現(xiàn) 網(wǎng)站的實(shí)現(xiàn)項(xiàng)目一 項(xiàng)目一 網(wǎng)站前臺(tái)功能的實(shí)現(xiàn) 網(wǎng)站前臺(tái)功能的實(shí)現(xiàn)教學(xué)目標(biāo) 教學(xué)目標(biāo)1．進(jìn)一步掌握網(wǎng)頁(yè)制作設(shè)計(jì)目標(biāo)規(guī)范、前臺(tái)面頁(yè)制作規(guī)范、前面頁(yè)面速度優(yōu)化標(biāo)準(zhǔn)；2. 掌握 JavaScript 處理及技巧，掌握代碼編寫(xiě)規(guī)范；3．完成網(wǎng)站前臺(tái)功能的實(shí)現(xiàn)；教學(xué)要求 教學(xué)要求1．認(rèn)真聽(tīng)講，專(zhuān)心操作, 認(rèn)真記錄實(shí)驗(yàn)過(guò)程，總結(jié)操作經(jīng)驗(yàn)和寫(xiě)好實(shí)驗(yàn)報(bào)告；2．操作規(guī)范，完成網(wǎng)站前臺(tái)功能的實(shí)現(xiàn)；3．遵守學(xué)校的實(shí)驗(yàn)室紀(jì)律，注意人身

2、和設(shè)備的安全操作，愛(ài)護(hù)實(shí)驗(yàn)設(shè)備、及時(shí)上繳作業(yè)。4．在實(shí)驗(yàn)中培養(yǎng)嚴(yán)謹(jǐn)科學(xué)的實(shí)踐操作習(xí)慣。知識(shí)要點(diǎn) 知識(shí)要點(diǎn)1．網(wǎng)頁(yè)制作設(shè)計(jì)目標(biāo)規(guī)范、前臺(tái)面頁(yè)制作規(guī)范、前面頁(yè)面速度優(yōu)化標(biāo)準(zhǔn)；2．JavaScript 處理及技巧；技術(shù)要點(diǎn) 技術(shù)要點(diǎn)1．JavaScript 處理及技巧；2．實(shí)現(xiàn)網(wǎng)站前臺(tái)功能的網(wǎng)頁(yè)制作技術(shù)及.NET 技術(shù)的運(yùn)用；技能訓(xùn)練 技能訓(xùn)練一．講授 一．講授正確啟動(dòng)計(jì)算機(jī)，在最后一個(gè)磁盤(pán)上建立以學(xué)號(hào)為名的文件夾，從指定的共享文件夾中將“實(shí)

3、習(xí)指導(dǎo)書(shū)”和其他內(nèi)容復(fù)制到該文件夾中。(一) 網(wǎng)頁(yè)制作設(shè)計(jì)目標(biāo)規(guī)范 網(wǎng)頁(yè)制作設(shè)計(jì)目標(biāo)規(guī)范 1．視覺(jué)規(guī)范 ．視覺(jué)規(guī)范即用戶(hù)在瀏覽自己網(wǎng)站的視覺(jué)的體驗(yàn)，包括：整體風(fēng)格、網(wǎng)站 LOGO、頁(yè)面布局、頁(yè)面色彩、頁(yè)面大小、動(dòng)畫(huà)效果、圖片展示、圖標(biāo)使用、廣告設(shè)置和聲音設(shè)置這 10 個(gè)方面；要讓用戶(hù)覺(jué)得你的網(wǎng)站制作的看起來(lái)很舒服。2．瀏覽規(guī)范 ．瀏覽規(guī)范即網(wǎng)站的欄目和內(nèi)容的體驗(yàn)，包括：頁(yè)面導(dǎo)航、頁(yè)面速度、頁(yè)面容量、頁(yè)面結(jié)構(gòu)、內(nèi)容安排、內(nèi)容更新、內(nèi)容形式

4、、內(nèi)容呈現(xiàn)方式和路徑記錄這 9 個(gè)方面；網(wǎng)站的內(nèi)容要充實(shí)，有可讀性，不能經(jīng)常抄襲別人的文章，這是一些網(wǎng)站制作設(shè)計(jì)者應(yīng)該學(xué)習(xí)的。3．信任規(guī)范 ．信任規(guī)范即通過(guò)細(xì)節(jié)提升用戶(hù)的信任體驗(yàn)，包括：友情鏈接、底部信息、關(guān)于我們、聯(lián)系方式、幫助中心、網(wǎng)站備案、內(nèi)容格式、內(nèi)容訂閱、網(wǎng)站地圖、加入收藏、用戶(hù)登錄和論壇人氣這 12 個(gè)細(xì)節(jié)；其中友情鏈接和底(4) 請(qǐng)不要在網(wǎng)頁(yè)中連續(xù)出現(xiàn)多于一個(gè) 的 也盡量少使用全角空格（英文字符集下,全角空格會(huì)變成亂碼）

5、 ，空白應(yīng)該盡量使用 text-indent，padding， margin， hspace，vspace 以及透明的 gif 圖片來(lái)實(shí)現(xiàn)。(5) 中英文混排時(shí),我們盡可能的將英文和數(shù)字定義為 verdana 和 arial 兩種字體。(6) 行距建議用百分比來(lái)定義，常用的兩個(gè)行距的值是 line-height:120%或 150% (7) 網(wǎng)站中的路徑全部采用相對(duì)路徑,一般鏈接到某一目錄下的缺省文件的鏈接路徑不必寫(xiě)全名,如我們不必這

6、樣： 而應(yīng)該這樣： 4．Web Web 標(biāo)準(zhǔn)設(shè)計(jì)規(guī)范 標(biāo)準(zhǔn)設(shè)計(jì)規(guī)范(1) (1) HTML HTML 編碼規(guī)范 編碼規(guī)范λ 設(shè)定名字空間（Namespace） λ 聲明編碼語(yǔ)言 λ 用小寫(xiě)字母書(shū)寫(xiě)所有的標(biāo)簽元素與屬性名字λ 給所有屬性值加引號(hào)“” ，輔助圖片一律用背景處理，為圖片添加 alt 屬性λ一個(gè)標(biāo)記必須占用一行，不得出現(xiàn)兩個(gè)標(biāo)記在同一行的情況(同一標(biāo)記的關(guān)閉標(biāo)記除外)λ 靜態(tài)文件內(nèi)容必須包含在λ標(biāo)記中間，標(biāo)記必須包含在標(biāo)記

7、中間 λ 對(duì)于需要關(guān)閉的標(biāo)記，必須同其關(guān)閉標(biāo)記同時(shí)出現(xiàn)，不得出現(xiàn)交叉包含的語(yǔ)句λ 最高一級(jí)的父標(biāo)記采用左對(duì)齊頂格方式書(shū)寫(xiě)，下一級(jí)標(biāo)記采用左對(duì)齊向右縮進(jìn)一個(gè) Tab 的方式書(shū)寫(xiě) 在下一級(jí)依此類(lèi)推，分別左對(duì)齊相對(duì)于父標(biāo)記向右縮進(jìn)一個(gè) Tab 的方式書(shū)寫(xiě) λ 同一級(jí)標(biāo)記的首字符上下必須對(duì)齊， 把所有<>和 λ 盡量多使用群選擇器、派生選擇器來(lái)書(shū)寫(xiě)具有層次結(jié)構(gòu)的 CSS 樣式 λ 合理使用類(lèi)別選擇器與 id 選擇器，同個(gè) ID

8、 只用一個(gè)地方，相同 CLASS 可用多個(gè)地方 λ 鏈接偽類(lèi)一定要按照 a:link、a:visited、a:hover、a: active 的順序書(shū)寫(xiě) λ 多使用具有良好風(fēng)格的注釋?zhuān)阌诮窈蟮木S護(hù)與重構(gòu) (3) 變量命名規(guī)范 變量命名規(guī)范 λ 常量以及全局變量名必須全部使用大寫(xiě)字母 變量名首字母必須小寫(xiě)λ 變量名必須使用其類(lèi)型的所寫(xiě)字符串開(kāi)始。各種類(lèi)型的所寫(xiě)字符串如下： 整型變量：int；長(zhǎng)整型變量：lng；浮點(diǎn)型變量：flt；雙