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

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