網(wǎng)頁設(shè)計綜合實訓(xùn)實訓(xùn)指導(dǎo)方案

1 網(wǎng)頁設(shè)計綜合實訓(xùn)網(wǎng)頁設(shè)計綜合實訓(xùn)實訓(xùn)指導(dǎo)方案實訓(xùn)指導(dǎo)方案 一、一、 實訓(xùn)目的與要求實訓(xùn)目的與要求 網(wǎng)頁設(shè)計綜合實訓(xùn)主要目的是讓學(xué)生通過這門實踐課程的 學(xué)習(xí)了解和掌握網(wǎng)頁設(shè)計的基本方法，通過不斷上機(jī)實習(xí)訓(xùn)練達(dá)到 解決實際的問題。因此，在本學(xué)期特設(shè)置此課程設(shè)計，集中一段時 間使學(xué)生綜合運用所學(xué)習(xí)的網(wǎng)頁制作知識及以前所學(xué)習(xí)的計算機(jī)方 面的知識，按照網(wǎng)站制作的流程，完成一個相對具體、綜合的網(wǎng)站， 全面鞏固學(xué)生的知識，培養(yǎng)學(xué)生解決實際問題的能力，從而達(dá)到學(xué) 以致用的目的。 二、二、 實訓(xùn)內(nèi)容實訓(xùn)內(nèi)容 1. 實例實訓(xùn) 以一個電子商務(wù)靜態(tài)網(wǎng)站設(shè)計的實例指導(dǎo)學(xué)生如何獨立完成 電子商務(wù)靜態(tài)站點的設(shè)計和制作。讓學(xué)生在機(jī)房實際操作， 按照給定的實例完成實例中站點的創(chuàng)建和設(shè)計制作。 2. 自建站點實訓(xùn) 讓學(xué)生自行選擇站點的主題，從規(guī)劃站點到上傳文件一步一 步完成整個站點的創(chuàng)建、調(diào)試和上傳工作。 3. 總結(jié) 對學(xué)生的全部作品進(jìn)行考核，并選擇典型的案例對實訓(xùn)的結(jié) 果進(jìn)行考核。 2 三、三、 參考課時參考課時 標(biāo)題標(biāo)題實訓(xùn)內(nèi)容實訓(xùn)內(nèi)容實訓(xùn)課時實訓(xùn)課時 預(yù)備實訓(xùn)動員 1 實訓(xùn)一基本知識回顧 1 實訓(xùn)四實訓(xùn)作品的站點規(guī)劃 2 實訓(xùn)五整體布局設(shè)計 3 實訓(xùn)六搜集和創(chuàng)建資源 3 實訓(xùn)七頁面素材設(shè)計 3 實訓(xùn)八樣式設(shè)計 3 實訓(xùn)九首頁模板設(shè)計 2 實訓(xùn)十二級頁面模板設(shè)計 2 實訓(xùn)十一各頁面的細(xì)化、測試和上傳作品 4 實訓(xùn)十二總結(jié) 1 總計 24 四、四、 實訓(xùn)材料準(zhǔn)備實訓(xùn)材料準(zhǔn)備 1.軟件準(zhǔn)備 Dreamweaver 8 中文版 、PhotoShop7.0 以上版本、Flash 中文 版（本實訓(xùn)對 FLASH 技術(shù)不做要求） 。 2.硬件準(zhǔn)備 網(wǎng)絡(luò)條件：與因特網(wǎng)連接的局域網(wǎng)。 教師用機(jī)：Windows2000 Server 及以上版本。 學(xué)生用機(jī)：Windows2000 Professional 及以上版本。 3 五、五、 綜合實訓(xùn)考核辦法：綜合實訓(xùn)考核辦法： 1) 系統(tǒng)文檔 20 分 2) 編寫代碼 30 分 3) 程序調(diào)試 10 分 4) 實訓(xùn)出勤 20 分 5) 技術(shù)含量 10 分 6) 美工設(shè)計 10 分 4 目目 錄錄 實訓(xùn)一 基本知識回顧1 實訓(xùn)二 實例一講解4 實訓(xùn)三 實例一操作6 實訓(xùn)四 實訓(xùn)作品的站點規(guī)劃8 實訓(xùn)五 整體布局設(shè)計10 實訓(xùn)六 搜集和創(chuàng)建資源13 實訓(xùn)七 頁面素材設(shè)計15 實訓(xùn)八 樣式設(shè)計17 實訓(xùn)九 首頁模板設(shè)計19 實訓(xùn)十 二級頁面模板設(shè)計20 實訓(xùn)十一 各頁面的細(xì)化、測試和上傳作品21 實訓(xùn)十二 總結(jié)23 附錄一 網(wǎng)站規(guī)劃書書寫格式25 附錄二 CUTEFTP 使用說明27 1 實訓(xùn)一實訓(xùn)一 基本知識回顧基本知識回顧 一、一、 實訓(xùn)目的和要求實訓(xùn)目的和要求 溫習(xí)網(wǎng)頁制作的課程重點難點，使學(xué)生對 Dreamweaver 8 各方 面的操作知識系統(tǒng)的由“片”的認(rèn)識轉(zhuǎn)向“面”的認(rèn)識。 二、二、 實訓(xùn)內(nèi)容實訓(xùn)內(nèi)容 Dreamweaver 8 的基本操作：站點、表格、圖像、鏈接、框架等。 三、三、 實訓(xùn)準(zhǔn)備實訓(xùn)準(zhǔn)備 Dreamweaver 8 中文版。 四、四、 實訓(xùn)步驟實訓(xùn)步驟 各實訓(xùn)指導(dǎo)教師按照所代學(xué)生的情況不同選擇性地按下列步驟 溫習(xí) Dreamweaver 8 的重點難點知識。 (一) 站點創(chuàng)建和規(guī)劃 1. 本地站點的創(chuàng)建管理 2. 站點視圖的使用方法 (二) 鏈接的處理方式 1. 相對路徑 2. 鏈接到命名錨 3. 管理鏈接 (三) 圖像的處理方法 1. 插入圖像的相關(guān)操作 2. 使用導(dǎo)航條 2 3. 客戶端圖像映象 (四) 布局視圖、表格和層的應(yīng)用 1. 使用布局視圖的相關(guān)操作 2. 自動伸展類型的版面寬度 3. 草稿圖的使用 4. 關(guān)于插入表格的相關(guān)操作 5. 創(chuàng)建分層、使用分層時的操作 6. 使用分層面板 7. 利用分層排版時的注意事項 (五) 框架 1. 框架和框架集的一些標(biāo)識性概念 2. 創(chuàng)建框架 3. 框架文件的存儲 4. 框架和框架集屬性的設(shè)置 5. 在框架中使用鏈接 (六) CSS 樣式 1. 創(chuàng)建三種類型的 CSS 樣式 2. 創(chuàng)建外部鏈接的 CSS 樣式單。 五、五、 實訓(xùn)方法實訓(xùn)方法 使用投影進(jìn)行講解演示，并抽樣進(jìn)行檢查。 六、六、 考核辦法考核辦法 此部分實訓(xùn)內(nèi)容采用抽樣考察的方法，考核以操作的熟練程度 3 和正確性為評分標(biāo)準(zhǔn)，以 A（優(yōu)秀） 、B（良好） 、C（及格） 、D（不 及格）為成績標(biāo)準(zhǔn)。 七、七、 思考和練習(xí)思考和練習(xí) 1. 創(chuàng)建一個表格，預(yù)覽效果為各邊框格式是虛線、顏色是紅色、 各邊框的寬度為 1 像素（px） 。 2. 在制作站點時，會遇到 CSS 樣式的處理，而 CSS 樣式有兩種 處理方法：一是應(yīng)用于單一文檔的 CSS 樣式；二是外部連接 的 CSS 樣式單。請問建立站點時如何選擇為最優(yōu)。 3. 怎樣解決因為瀏覽分辨率的不同所造成的網(wǎng)頁布局錯位的現(xiàn) 象。 4. 怎樣利用層(Layer)來制作下拉式菜單。 4 實訓(xùn)二實訓(xùn)二 實例一講解實例一講解 一、一、 實訓(xùn)目的和要求實訓(xùn)目的和要求 通過對一個具體的靜態(tài)電子商務(wù)網(wǎng)站的解析，使學(xué)生了解制作 電子商務(wù)靜態(tài)站點的步驟，讓同學(xué)們對靜態(tài)電子商務(wù)網(wǎng)站的粗略和 宏觀認(rèn)識得到細(xì)化，使其懂得如何獨立面對靜態(tài)電子商務(wù)網(wǎng)站的設(shè) 計。 由實訓(xùn)指導(dǎo)教師自行選擇站點作為實例。實例要求如下： 1. 站點系電子商務(wù)相關(guān)站點。 2. 站點模塊功能清晰，雖然是靜態(tài)站點，但也能反映各模塊的 基本功能。 3. 為了便于教學(xué)，站點應(yīng)該具有布局（表格/布局視圖/層/框架） 、 圖像、鏈接、CSS 樣式等網(wǎng)頁設(shè)計制作中常用的知識點和操 作。 二、二、 實訓(xùn)內(nèi)容實訓(xùn)內(nèi)容 講解和演示整個站點的制作過程和設(shè)計方法。 三、三、 實訓(xùn)準(zhǔn)備實訓(xùn)準(zhǔn)備 Dreamweaver 8 中文版。 四、四、 實訓(xùn)步驟實訓(xùn)步驟 1. 由實訓(xùn)指導(dǎo)教師詳細(xì)講解靜態(tài)電子商務(wù)站點（靜態(tài)公司站點） 的設(shè)計方法和組成模塊。 2. 由實訓(xùn)指導(dǎo)教師詳細(xì)演示首頁和一個以上的二級頁面的整個 制作過程（從站點創(chuàng)建開始） 。 5 3. 抽樣檢查學(xué)生的聽課效果，在時間允許的條件下，讓學(xué)生上 教師機(jī)獨立完成頁面制作。 4. 對學(xué)生的抽樣檢查進(jìn)行分析，重點講解其失誤或錯誤的地方。 五、五、 實訓(xùn)方法實訓(xùn)方法 使用投影講解演示，并抽樣進(jìn)行檢查。 六、六、 考核辦法考核辦法 此部分實訓(xùn)內(nèi)容采用抽樣考察的方法，考核以操作的熟練程度 和正確性為評分標(biāo)準(zhǔn)，以 A（優(yōu)秀） 、B（良好） 、C（及格） 、D（不 及格）為成績標(biāo)準(zhǔn)。 七、七、 思考和練習(xí)思考和練習(xí) 1. 怎樣優(yōu)化公司站點創(chuàng)建規(guī)劃階段的公共資源和獨有資源的存 儲方法？ 2. 靜態(tài)電子商務(wù)站點的創(chuàng)建應(yīng)該遵循那些基本要素？ 6 實訓(xùn)三實訓(xùn)三 實例一操作實例一操作 一、一、 實訓(xùn)目的和要求實訓(xùn)目的和要求 將實訓(xùn)二的內(nèi)容在機(jī)房進(jìn)行操作，讓學(xué)生切實地對靜態(tài)電子商 務(wù)站點的設(shè)計進(jìn)行操作。 二、二、 實訓(xùn)內(nèi)容實訓(xùn)內(nèi)容 對給定的實例站點進(jìn)行分析，并進(jìn)行制作，最后由實訓(xùn)指導(dǎo)教 師為每一位學(xué)生的制作成品進(jìn)行考核。 三、三、 實訓(xùn)準(zhǔn)備實訓(xùn)準(zhǔn)備 Dreamweaver 8 中文版、PhotoShop 7.0 以上版本、制作站點時 不能在機(jī)房完成的或以學(xué)生能力不能制作的素材。 四、四、 實訓(xùn)步驟實訓(xùn)步驟 1. 準(zhǔn)備工作： 1) 站點的創(chuàng)建和規(guī)劃。 2) 設(shè)計素材和內(nèi)容素材的準(zhǔn)備。 3) CSS 樣式的準(zhǔn)備。 2. 設(shè)計工作： 1) 草稿圖的制作。 2) 映射草稿圖，按照草稿圖的設(shè)計利用布局視圖進(jìn)行版面布 局。 3) 布局完畢后，進(jìn)行內(nèi)容素材和設(shè)計素材等相關(guān)素材對象的 插入工作。 3. 細(xì)化工作： 7 1) 對內(nèi)容、表格、鏈接、圖片等進(jìn)行 CSS 樣式的應(yīng)用。 2) 細(xì)化整個版面。 4. 測試整個站點并交由實訓(xùn)指導(dǎo)教師進(jìn)行考核。 五、五、 實訓(xùn)方法實訓(xùn)方法 在機(jī)房進(jìn)行實訓(xùn)，由實訓(xùn)指導(dǎo)教師親臨指導(dǎo)。 六、六、 考核辦法考核辦法 此部分實訓(xùn)內(nèi)容采用全體考察的方法，考核以操作的熟練程度 和正確性為評分標(biāo)準(zhǔn)，以 A（優(yōu)秀） 、B（良好） 、C（及格） 、D（不 及格）為成績標(biāo)準(zhǔn)。 七、七、 思考和練習(xí)思考和練習(xí) 通過此部分實訓(xùn)，你是否熟練掌握建立靜態(tài)電子商務(wù)站點所需要 各知識點的操作技能？由那些需要進(jìn)一步的由教師在今后的課堂 中進(jìn)行講解和演示。 8 實訓(xùn)四實訓(xùn)四 實訓(xùn)作品的站點規(guī)劃實訓(xùn)作品的站點規(guī)劃 一、一、 實訓(xùn)目的和要求實訓(xùn)目的和要求 使學(xué)生在創(chuàng)建站點之前對站點有總體的規(guī)劃，讓學(xué)生對自己即 將設(shè)計和制作的站點進(jìn)行規(guī)劃并完成站點規(guī)劃書的撰寫。 實訓(xùn)作品的選題范圍： 1、班級網(wǎng)站 2、個人網(wǎng)站 3、電子商務(wù)消費網(wǎng)站（為一種消費品制作電子商務(wù)站點） 4、電子商務(wù)公司網(wǎng)站（為某個企業(yè)制作電子商務(wù)站點） 因為是建立靜態(tài)的電子商務(wù)站點，所以在講解和分析站點 規(guī)劃書時應(yīng)該著重于站點的設(shè)計，而不是其他方面，靜態(tài)的電 子商務(wù)站點沒有交互式的訪問模式和系統(tǒng)，所以只能是發(fā)布信 息的工具，這點請實訓(xùn)指導(dǎo)教師在授課和指導(dǎo)時予以關(guān)切。 正式站點規(guī)劃書見附錄。 二、二、 實訓(xùn)內(nèi)容實訓(xùn)內(nèi)容 讓學(xué)生在因特網(wǎng)上申請免費的個人主頁空間，向?qū)W生講解站點 規(guī)劃的重要性以及站點規(guī)劃書的撰寫方法，并由學(xué)生自行思考并完 成實訓(xùn)指導(dǎo)書的撰寫。 三、三、 實訓(xùn)準(zhǔn)備實訓(xùn)準(zhǔn)備 Dreamweaver 8 中文版 7、WORD2000 以上版本。 四、四、 實訓(xùn)步驟實訓(xùn)步驟 1. 進(jìn)行實訓(xùn)作品的選題并申請個人主頁空間。 9 2. 站點規(guī)劃書的書寫格式和方法的講解。 3. 詳細(xì)講解靜態(tài)電子商務(wù)站點創(chuàng)建和制作的步驟，并分析制作 站點規(guī)劃書的重要性和必要性，使學(xué)生規(guī)范網(wǎng)站設(shè)計的流程。 4. 學(xué)生思考并撰寫自行創(chuàng)建站點的站點規(guī)劃書。 五、五、 實訓(xùn)方法實訓(xùn)方法 首先由實訓(xùn)指導(dǎo)教師在機(jī)房講解站點規(guī)劃書的書寫方法和基本 格式，其次由學(xué)生針對所選的主題進(jìn)行站點規(guī)劃。 六、六、 考核辦法考核辦法 此部分實訓(xùn)內(nèi)容采用全體考察的方法，考核以站點規(guī)劃書的完 整性、實用性和創(chuàng)造性為評分標(biāo)準(zhǔn)，以 A（優(yōu)秀） 、B（良好） 、 C（及格） 、D（不及格）為成績標(biāo)準(zhǔn)。 七、七、 思考和練習(xí)思考和練習(xí) 作為電子商務(wù)專業(yè)，你覺得在撰寫電子商務(wù)站點規(guī)劃書應(yīng)該著 重突出哪幾個方面，為什么？ 10 實訓(xùn)五實訓(xùn)五 整體布局設(shè)計整體布局設(shè)計 一、一、實訓(xùn)目的和要求實訓(xùn)目的和要求 在站點規(guī)劃完成的基礎(chǔ)上，按照站點規(guī)劃書進(jìn)行網(wǎng)站整體的布局 設(shè)計。 要求: 1. 設(shè)計作品中的各種文件夾和文件名均使用英文名（小寫） ； 2. 設(shè)計作品首頁文件名為 index.htm、default.htm 等； 3. 設(shè)計作品中中文字體設(shè)定為簡體字； 4. 網(wǎng)頁應(yīng)有較好的瀏覽兼容性，同時應(yīng)考慮顯示分辨率（以 800*600 為顯示標(biāo)準(zhǔn)） ，瀏覽器為 IE 7.0 以上； 5. 主題鮮明，具有實用性，清晰表達(dá)設(shè)計意圖； 6. 結(jié)構(gòu)清楚合理，便于瀏覽查找； 7. 色彩搭配協(xié)調(diào)，頁面美觀，具有藝術(shù)品位； 8. 注意下載速度、語言代碼、導(dǎo)航效果、實用性、時效性； 二、二、 實訓(xùn)內(nèi)容實訓(xùn)內(nèi)容 1. 站點的創(chuàng)建。 2. 繪制草稿圖。 3. 利用草稿圖對網(wǎng)站各頁面進(jìn)行布局設(shè)計。 三、三、 實訓(xùn)準(zhǔn)備實訓(xùn)準(zhǔn)備 Dreamweaver 8 中文版/英文版、PhotoShop7.0 以上版本。 四、四、 實訓(xùn)步驟實訓(xùn)步驟 1. 指導(dǎo)學(xué)生完成站點的創(chuàng)建。要求如下： 11 1) 站點文件夾以自己的班級和自己的學(xué)號的組合命名。 2) 在站點文件夾中建立相關(guān)頁面，以確保連接和圖像處理操 作中路徑的正確性。 3) 所有的資源都保存在 assets 資源文件夾中，assets 文件夾 可以細(xì)分為 pic、animation、sound 等子文件夾。 4) 如果需要 CSS 樣式單文件，則 CSS 樣式單文件單獨放置 于 css 文件夾中。 2. 指導(dǎo)學(xué)生完成草稿圖的繪制，包括首頁和二級頁面。要求如 下： 1) 為了便于布局視圖的繪制，草稿圖的寬度統(tǒng)一為 777 像素， 高度根據(jù)站點內(nèi)容進(jìn)行設(shè)置。 2) 草稿圖統(tǒng)一用 photoshop 進(jìn)行繪制。 3) 草稿圖上必須表明每板塊的內(nèi)容名稱。 3. 指導(dǎo)學(xué)生利用草稿圖進(jìn)行網(wǎng)頁各個頁面的布局設(shè)計（使用布 局視圖） 。方法簡述如下： 1) 進(jìn)入布局視圖。 2) 載入草稿圖。 3) 繪制一個布局表格覆蓋整個草稿圖，即繪制一個寬度為 777 的表格。保證在分辨率變化的情況下，網(wǎng)頁不會出現(xiàn) 異?，F(xiàn)象。 4) 分別對個板塊繪制布局表格。 5) 進(jìn)行保存。 12 五、五、 實訓(xùn)方法實訓(xùn)方法 機(jī)房操作。 六、六、 考核辦法考核辦法 此部分實訓(xùn)內(nèi)容采用全體考察的方法，以百分制為滿分，具體 評分標(biāo)準(zhǔn)如下： 1. 站點創(chuàng)建的規(guī)范性和熟練程度（25 分） 2. 草稿圖的繪制（20 分） 3. 草稿圖的載入（5 分） 布局視圖的相關(guān)操作（50 分） 七、七、 思考和練習(xí)思考和練習(xí) 布局視圖和表格視圖在版面布局中各有優(yōu)勢和劣勢？對怎樣的 版面布局應(yīng)該用布局視圖，又對怎樣的版面布局應(yīng)該用表格視圖？ 13 實訓(xùn)六實訓(xùn)六 搜集和創(chuàng)建資源搜集和創(chuàng)建資源 一、一、 實訓(xùn)目的和要求實訓(xùn)目的和要求 1. 按照實訓(xùn)四所完成的站點規(guī)劃書的要求完成站點設(shè)計和制作 中資源的搜集和創(chuàng)建工作。要求如下： a) 為了維護(hù)機(jī)房秩序，與因特網(wǎng)互聯(lián)期間，由老師監(jiān)督， 不可利用實訓(xùn)時間進(jìn)行任何與實訓(xùn)無關(guān)的活動。 b) 實訓(xùn)指導(dǎo)教師推薦資源站點供學(xué)生參考。 c) 實訓(xùn)指導(dǎo)教師嚴(yán)格把關(guān)，保證資源創(chuàng)建和搜集的完整性。 二、二、 實訓(xùn)內(nèi)容實訓(xùn)內(nèi)容 在因特網(wǎng)上搜索資源或在本機(jī)上創(chuàng)建所需資源。 三、三、 實訓(xùn)準(zhǔn)備實訓(xùn)準(zhǔn)備 Dreamweaver 8 中文版 、WORD2000 以上版本、Photoshop7.0 以上版本、 與因特網(wǎng)連接的局域網(wǎng)。 四、四、 實訓(xùn)步驟實訓(xùn)步驟 根據(jù)網(wǎng)站規(guī)劃書的內(nèi)容和網(wǎng)站建設(shè)的需要，在因特網(wǎng)上搜索素 材，素材包括網(wǎng)頁的信息內(nèi)容和網(wǎng)頁的主題設(shè)計內(nèi)容。 五、五、 實訓(xùn)方法實訓(xùn)方法 機(jī)房上網(wǎng)并利用本機(jī)軟件完成。 六、六、 考核辦法考核辦法 此部分是學(xué)生在因特網(wǎng)和本機(jī)上進(jìn)行資源的搜集和創(chuàng)建，故無 需進(jìn)行考核，但需要指導(dǎo)學(xué)生按照站點規(guī)劃書的要求完成站點資源 14 的搜集和創(chuàng)建工作。 七、七、 思考與練習(xí)思考與練習(xí) 此部分是學(xué)生在因特網(wǎng)和本機(jī)上進(jìn)行資源的搜集和創(chuàng)建，故無 練習(xí)。 15 實訓(xùn)七實訓(xùn)七 頁面素材設(shè)計頁面素材設(shè)計 一、一、 實訓(xùn)目的和要求實訓(xùn)目的和要求 按照實訓(xùn)四所完成的站點規(guī)劃書的要求完成站點設(shè)計和制作中 的頁面素材的設(shè)計工作。要求如下： 1. 嚴(yán)格按照站點規(guī)劃書的內(nèi)容進(jìn)行頁面素材設(shè)計。 2. 實訓(xùn)指導(dǎo)教師給予頁面主題的相關(guān)指導(dǎo)。 二、二、 實訓(xùn)內(nèi)容實訓(xùn)內(nèi)容 在本機(jī)上進(jìn)行頁面素材設(shè)計。 三、三、 實訓(xùn)準(zhǔn)備實訓(xùn)準(zhǔn)備 Dreamweaver 8 中文版 、WORD2000 以上版本、Photoshop7.0 以上版本 。與因特網(wǎng)連接的局域網(wǎng)。 四、四、 實訓(xùn)步驟實訓(xùn)步驟 1. 公共頁面素材的設(shè)計。 2. 首頁獨有頁面素材的設(shè)計。 3. 各二級頁面獨有頁面素材的設(shè)計。 4. 將設(shè)計好的素材文件存放在資源文件夾中。 五、五、 實訓(xùn)方法實訓(xùn)方法 機(jī)房利用本機(jī)軟件完成。 六、六、 考核辦法考核辦法 此部分是學(xué)生在本機(jī)上進(jìn)行頁面素材的搜集和創(chuàng)建，故無需進(jìn) 行考核，但需要指導(dǎo)學(xué)生按照站點規(guī)劃書的要求完成頁面素材的創(chuàng) 建工作。 16 七、七、 思考與練習(xí)思考與練習(xí) 此部分是學(xué)生在本機(jī)上進(jìn)行頁面素材的創(chuàng)建，故無練習(xí)。 17 實訓(xùn)八實訓(xùn)八 樣式設(shè)計樣式設(shè)計 一、一、 實訓(xùn)目的和要求實訓(xùn)目的和要求 按照實訓(xùn)四所完成的站點規(guī)劃書的要求完成站點設(shè)計和制作中 的 HTML 樣式和 CSS 樣式的創(chuàng)建。 二、實訓(xùn)內(nèi)容實訓(xùn)內(nèi)容 1. HTML 樣式的創(chuàng)建。 1) 創(chuàng)建字符型的 HTML 樣式。 2) 創(chuàng)建段落型的 HTML 樣式。 2. CSS 樣式的創(chuàng)建。 1) 創(chuàng)建自定義的 CSS 樣式。 2) 創(chuàng)建 HTML 標(biāo)記的的 CSS 樣式。 3) 創(chuàng)建 CSS 選擇器的 CSS 樣式。 （用于創(chuàng)建偽錨名） 。 三、三、 實訓(xùn)準(zhǔn)備實訓(xùn)準(zhǔn)備 Dreamweaver 8 中文版 。 四、四、 實訓(xùn)步驟實訓(xùn)步驟 1. HTML 樣式的創(chuàng)建。 2. CSS 樣式的創(chuàng)建 1)內(nèi)部 CSS 樣式創(chuàng)建。 2)外部鏈接 CSS 樣式單文件的創(chuàng)建。 五、五、 實訓(xùn)方法實訓(xùn)方法 機(jī)房利用本機(jī)軟件完成。 六、六、 考核辦法考核辦法 18 此部分實訓(xùn)內(nèi)容采用全體考察的方法，以百分制為滿分，具體 評分標(biāo)準(zhǔn)如下： 1. HTML、CSS 樣式（內(nèi)部、外部）創(chuàng)建的熟練程度（30 分） 2. HTML、CSS 樣式（內(nèi)部、外部）創(chuàng)建的操作正確性（40 分） HTML、CSS 樣式（內(nèi)部、外部）創(chuàng)建的結(jié)果正確性（30 分） 七、七、 思考與練習(xí)思考與練習(xí) 1、 導(dǎo)入外部鏈接的 CSS 樣式單文件和鏈接外部的 CSS 樣式單 文件有什么區(qū)別？ 2、 CSS 樣式中自定義的 CSS 樣式、HTML 標(biāo)記的 CSS 樣式和 CSS 選擇器樣式各有什么獨特的作用 ？ 19 實訓(xùn)九實訓(xùn)九 首頁模板設(shè)計首頁模板設(shè)計 一、一、 實訓(xùn)目的和要求實訓(xùn)目的和要求 按照實訓(xùn)四所完成的站點規(guī)劃書的要求以及實訓(xùn)五的整體布局 設(shè)計中的首頁布局設(shè)計完成首頁模板的整體設(shè)計和填充。 二、實訓(xùn)內(nèi)容實訓(xùn)內(nèi)容 首頁模板的制作和內(nèi)容的填充。 三、三、 實訓(xùn)準(zhǔn)備實訓(xùn)準(zhǔn)備 Dreamweaver 8 中文版 。 四、四、 實訓(xùn)步驟實訓(xùn)步驟 1. 根據(jù)實訓(xùn)五 整體布局設(shè)計中的首頁布局設(shè)計制作首頁模 板。 2. 在模板中插入實訓(xùn)六、七、八所設(shè)計好的資源和素材進(jìn)行模 板內(nèi)容的填充，形成站點的首頁。 五、五、 實訓(xùn)方法實訓(xùn)方法 機(jī)房利用本機(jī)軟件完成。 六、六、 考核辦法考核辦法 此部分實訓(xùn)內(nèi)容采用全體考察的方法，以百分制為滿分，具體 評分標(biāo)準(zhǔn)如下： 1. 關(guān)于模板操作的熟練程度（50 分） 2. 關(guān)于模板操作的正確性（50 分） 七、七、 思考與練習(xí)思考與練習(xí) 無 20 實訓(xùn)十實訓(xùn)十 二級頁面模板設(shè)計二級頁面模板設(shè)計 一、一、 實訓(xùn)目的和要求實訓(xùn)目的和要求 按照實訓(xùn)四所完成的站點規(guī)劃書的要求以及實訓(xùn)五的整體布局 設(shè)計中的首頁布局設(shè)計完成二級模板的整體設(shè)計和填充。 二、實訓(xùn)內(nèi)容實訓(xùn)內(nèi)容 二級頁面模板的設(shè)計和填充。 三、三、 實訓(xùn)準(zhǔn)備實訓(xùn)準(zhǔn)備 Dreamweaver 8 中文版 。 四、四、 實訓(xùn)步驟實訓(xùn)步驟 1. 根據(jù)實訓(xùn)五 整體布局設(shè)計中的各二級頁面布局設(shè)計制作 二級頁面模板。 2. 在模板中插入實訓(xùn)六、七、八所設(shè)計好的資源和素材進(jìn)行模 板內(nèi)容的填充，形成站點的各個二級頁面。 五、五、 實訓(xùn)方法實訓(xùn)方法 機(jī)房利用本機(jī)軟件完成。 六、六、 考核辦法考核辦法 此部分實訓(xùn)內(nèi)容采用全體考察的方法，以百分制為滿分，具體 評分標(biāo)準(zhǔn)如下： 1. 關(guān)于模板操作的熟練程度（50 分） 2. 關(guān)于模板操作的正確性（50 分） 七、七、 思考與練習(xí)思考與練習(xí) 無 21 實訓(xùn)十一實訓(xùn)十一 各頁面的細(xì)化、測試和上傳作品各頁面的細(xì)化、測試和上傳作品 一、一、 實訓(xùn)目的和要求實訓(xùn)目的和要求 按照實訓(xùn)四所完成的站點規(guī)劃書的要求細(xì)化頁面，使其達(dá)到最 優(yōu)的效果并進(jìn)行測試和上傳作品。 二、實訓(xùn)內(nèi)容實訓(xùn)內(nèi)容 1. CSS 樣式的應(yīng)用和調(diào)整。 2. 頁面布局的調(diào)整。 3. 頁面文本、圖片以及媒體內(nèi)容的進(jìn)一步細(xì)化。 4. 鏈接的測試。 5. 作品的上傳。 三、三、 實訓(xùn)準(zhǔn)備實訓(xùn)準(zhǔn)備 Dreamweaver 8 中文版 、PhotoShop7.0 以上中文版本 。 連接因特網(wǎng)的局域網(wǎng)。 四、四、 實訓(xùn)步驟實訓(xùn)步驟 1. 按照站點規(guī)劃書的內(nèi)容要求對各個頁面進(jìn)行 CSS 樣式的應(yīng)用。 2. 細(xì)化各個頁面，對各個頁面的圖像、表格、鏈接進(jìn)行適當(dāng)?shù)?調(diào)整，使站點更加美觀。 3. 測試所有鏈接。 4. 在本地站點中測試整個站點的運作情況，并進(jìn)行相應(yīng)的調(diào)整。 5. 利用 CuteFtp 工具進(jìn)行作品上傳。 。 22 五、五、 實訓(xùn)方法實訓(xùn)方法 機(jī)房利用本機(jī)軟件完成。 六、六、 考核辦法考核辦法 此部分實訓(xùn)內(nèi)容采用全體考察的方法，以百分制為滿分，具體 評分標(biāo)準(zhǔn)如下： 1. CSS 應(yīng)用操作的熟練程度（20 分） 。 2. 頁面布局的微操作（表格、布局視圖、層等）熟練程度（10 分） 。 3. 圖片、鏈接調(diào)整的為操作熟練程度（10 分） 。 4. CuteFtp 的使用熟練程度。 （50 分） 。 七、七、 思考與練習(xí)思考與練習(xí) 完成整個站點后，對自己的站點的建設(shè)進(jìn)行總結(jié)。 23 實訓(xùn)十二實訓(xùn)十二 總結(jié)總結(jié) 一、一、 實訓(xùn)目的和要求實訓(xùn)目的和要求 將學(xué)生制作的作品進(jìn)行綜合的考核，并進(jìn)行總結(jié)。 二、實訓(xùn)內(nèi)容實訓(xùn)內(nèi)容 1. 對學(xué)生作品進(jìn)行考核。 2. 選擇典型的（優(yōu)秀的和劣質(zhì)的）作品分別進(jìn)行總結(jié)。 三、三、 實訓(xùn)準(zhǔn)備實訓(xùn)準(zhǔn)備 Dreamweaver 8 中文版、PhotoShop7.0 以上中文版本。 連接因特網(wǎng)的局域網(wǎng)。 四、四、 實訓(xùn)步驟實訓(xùn)步驟 1. 對學(xué)生的作品依次進(jìn)行綜合考核。 2. 抽取典型（優(yōu)秀和劣質(zhì)）的作品進(jìn)行全面的解析。 五、五、 實訓(xùn)方法實訓(xùn)方法 機(jī)房利用本機(jī)軟件完成。 六、六、 考核辦法考核辦法 此