網設計綜合實訓實訓指導方案范文

1、網頁設計綜合實訓實訓指導方案一、實訓目的與要求網頁設計綜合實訓主要目的是讓學生通過這門實踐課程的學 習了解和掌握網頁設計的基本方法， 通過不斷上機實習訓練達到解決 實際的問題。因此，在本學期特設置此課程設計，集中一段時間使學 生綜合運用所學習的網頁制作知識及以前所學習的計算機方面的知 識，按照網站制作的流程，完成一個相對具體、綜合的網站，全面鞏 固學生的知識， 培養(yǎng)學生解決實際問題的能力， 從而達到學以致用的 目的。二、實訓內容1. 實例實訓 以一個電子商務靜態(tài)網站設計的實例指導學生如何獨立完成 電子商務靜態(tài)站點的設計和制作。 讓學生在機房實際操作， 按 照給定的實例完成實例中站點的創(chuàng)建和設計

2、制作。2. 自建站點實訓讓學生自行選擇站點的主題， 從規(guī)劃站點到上傳文件一步一步 完成整個站點的創(chuàng)建、調試和上傳工作。3. 總結對學生的全部作品進行考核， 并選擇典型的案例對實訓的結果 進行考核。三、參考課時標題實訓內容實訓課時預備實訓動員1實訓一基本知識回顧1實訓四實訓作品的站點規(guī)劃2實訓五整體布局設計3實訓六搜集和創(chuàng)建資源3實訓七頁面素材設計3實訓八樣式設計3實訓九首頁模板設計2實訓十二級頁面模板設計2實訓十一各頁面的細化、測試和上傳作品4實訓十二總結1總計24四、實訓材料準備1. 軟件準備Dreamweaver 8 中文版、PhotoShop7.0 以上版本、Flash 中文版（本實訓對

3、FLASH技術不做要求）。2. 硬件準備網絡條件：與因特網連接的局域網。教師用機：Windows2000 Server及以上版本。學生用機：Windows2000 Professional及以上版本五、綜合實訓考核辦法：1) 系統(tǒng)文檔2) 編寫代碼3) 程序調試4) 實訓出勤5) 技術含量20 分30 分10 分20 分10 分10 分6) 美工設計目錄實訓一基本知識回顧錯誤！未定義書簽 實訓二 實例一講解 錯誤！未定義書簽 實訓三實例一操作錯誤！未定義書簽 實訓四 實訓作品的站點規(guī)劃 錯誤！未定義書簽 實訓五整體布局設計錯誤！未定義書簽 實訓六搜集和創(chuàng)建資源錯誤！未定義書簽 實訓七頁面素材設

4、計錯誤！未定義書簽 實訓八樣式設計錯誤！未定義書簽 實訓九首頁模板設計錯誤！未定義書簽 實訓十二級頁面模板設計錯誤！未定義書簽 實訓十一 各頁面的細化、測試和上傳作品 錯誤！未定義書簽 實訓十二總結錯誤！未定義書簽 附錄一網站規(guī)劃書書寫格式 錯誤！未定義書簽附錄二 CUTEFTP 使用說明錯誤！未定義書簽實訓一 基本知識回顧一、實訓目的和要求溫習網頁制作的課程重點難點，使學生對 Dreamweaver 8 各方面 的操作知識系統(tǒng)的由“片”的認識轉向“面”的認識。二、實訓內容Dreamweaver 8的基本操作：站點、表格、圖像、鏈接、框架等。三、實訓準備Dreamweaver 8中文版。四、實

5、訓步驟各實訓指導教師按照所代學生的情況不同選擇性地按下列步驟溫習 Dreamweaver 8 的重點難點知識。（ 一 ） 站點創(chuàng)建和規(guī)劃1. 本地站點的創(chuàng)建管理2. 站點視圖的使用方法（ 二 ） 鏈接的處理方式1. 相對路徑2. 鏈接到命名錨3. 管理鏈接（ 三 ） 圖像的處理方法1. 插入圖像的相關操作2. 使用導航條3. 客戶端圖像映象（四）布局視圖、表格和層的應用1. 使用布局視圖的相關操作2. 自動伸展類型的版面寬度3. 草稿圖的使用4. 關于插入表格的相關操作5. 創(chuàng)建分層、使用分層時的操作6. 使用分層面板7. 利用分層排版時的注意事項（五）框架1. 框架和框架集的一些標識性概念2

6、. 創(chuàng)建框架3. 框架文件的存儲4. 框架和框架集屬性的設置5. 在框架中使用鏈接（六）CSS樣式1. 創(chuàng)建三種類型的CSS樣式2. 創(chuàng)建外部鏈接的CSS樣式單。五、實訓方法使用投影進行講解演示，并抽樣進行檢查。六、考核辦法 此部分實訓內容采用抽樣考察的方法，考核以操作的熟練程度和 正確性為評分標準，以 A （優(yōu)秀）、B （良好）、C （及格）、D （不及格）為成績標準。七、思考和練習1. 創(chuàng)建一個表格，預覽效果為各邊框格式是虛線、顏色是紅色、 各邊框的寬度為 1 像素（ px）。2. 在制作站點時，會遇到CSS羊式的處理，而CSS羊式有兩種處 理方法：一是應用于單一文檔的 CSS樣式；二是外

7、部連接的 CSS樣式單。請問建立站點時如何選擇為最優(yōu)。3. 怎樣解決因為瀏覽分辨率的不同所造成的網頁布局錯位的現象。4. 怎樣利用層 （Layer） 來制作下拉式菜單。實訓二 實例一講解一、實訓目的和要求通過對一個具體的靜態(tài)電子商務網站的解析，使學生了解制作電 子商務靜態(tài)站點的步驟， 讓同學們對靜態(tài)電子商務網站的粗略和宏觀 認識得到細化，使其懂得如何獨立面對靜態(tài)電子商務網站的設計。由實訓指導教師自行選擇站點作為實例。實例要求如下：1. 站點系電子商務相關站點。2. 站點模塊功能清晰， 雖然是靜態(tài)站點， 但也能反映各模塊的基 本功能。3. 為了便于教學，站點應該具有布局（表格 /布局視圖 /層/

8、框架）、圖像、鏈接、css樣式等網頁設計制作中常用的知識點和操作。二、實訓內容講解和演示整個站點的制作過程和設計方法。三、實訓準備Dreamweaver 8中文版。四、實訓步驟1. 由實訓指導教師詳細講解靜態(tài)電子商務站點（靜態(tài)公司站點） 的設計方法和組成模塊。2. 由實訓指導教師詳細演示首頁和一個以上的二級頁面的整個 制作過程（從站點創(chuàng)建開始） 。3. 抽樣檢查學生的聽課效果， 在時間允許的條件下， 讓學生上教 師機獨立完成頁面制作。4. 對學生的抽樣檢查進行分析，重點講解其失誤或錯誤的地方。五、實訓方法使用投影講解演示，并抽樣進行檢查。六、考核辦法此部分實訓內容采用抽樣考察的方法，考核以操作

9、的熟練程度和 正確性為評分標準，以 A （優(yōu)秀）、B （良好）、C （及格）、D （不及 格）為成績標準。七、思考和練習1. 怎樣優(yōu)化公司站點創(chuàng)建規(guī)劃階段的公共資源和獨有資源的存 儲方法？2. 靜態(tài)電子商務站點的創(chuàng)建應該遵循那些基本要素？實訓三 實例一操作一、實訓目的和要求將實訓二的內容在機房進行操作，讓學生切實地對靜態(tài)電子商務 站點的設計進行操作。二、實訓內容對給定的實例站點進行分析，并進行制作，最后由實訓指導教師 為每一位學生的制作成品進行考核。三、實訓準備Dreamweaver 8 中文版、 PhotoShop 7.0 以上版本、制作站點時不 能在機房完成的或以學生能力不能制作的素材。四

10、、實訓步驟1. 準備工作：1) 站點的創(chuàng)建和規(guī)劃。2) 設計素材和內容素材的準備。3) CSS 樣式的準備。2. 設計工作：1) 草稿圖的制作。2) 映射草稿圖，按照草稿圖的設計利用布局視圖進行版面布 局。3) 布局完畢后，進行內容素材和設計素材等相關素材對象的 插入工作。3. 細化工作：1）對內容、表格、鏈接、圖片等進行 CSS 樣式的應用2）細化整個版面。4. 測試整個站點并交由實訓指導教師進行考核。五、實訓方法在機房進行實訓，由實訓指導教師親臨指導。六、考核辦法此部分實訓內容采用全體考察的方法，考核以操作的熟練程度和 正確性為評分標準，以 A （優(yōu)秀）、B （良好）、C （及格）、D （

11、不及 格）為成績標準。七、思考和練習 通過此部分實訓，你是否熟練掌握建立靜態(tài)電子商務站點所需要 各知識點的操作技能？由那些需要進一步的由教師在今后的課堂 中進行講解和演示。實訓四 實訓作品的站點規(guī)劃一、實訓目的和要求 使學生在創(chuàng)建站點之前對站點有總體的規(guī)劃，讓學生對自己即將 設計和制作的站點進行規(guī)劃并完成站點規(guī)劃書的撰寫。實訓作品的選題范圍：1、班級網站2、個人網站3、電子商務消費網站（為一種消費品制作電子商務站點）4、電子商務公司網站（為某個企業(yè)制作電子商務站點） 因為是建立靜態(tài)的電子商務站點，所以在講解和分析站點規(guī) 劃書時應該著重于站點的設計， 而不是其他方面， 靜態(tài)的電子商 務站點沒有交

12、互式的訪問模式和系統(tǒng)， 所以只能是發(fā)布信息的工 具，這點請實訓指導教師在授課和指導時予以關切。正式站點規(guī)劃書見附錄。二、實訓內容 讓學生在因特網上申請免費的個人主頁空間，向學生講解站點規(guī) 劃的重要性以及站點規(guī)劃書的撰寫方法， 并由學生自行思考并完成實 訓指導書的撰寫。三、實訓準備Dreamweaver 8中文版 7、 WORD2000 以上版本。四、實訓步驟1. 進行實訓作品的選題并申請個人主頁空間。2. 站點規(guī)劃書的書寫格式和方法的講解。3. 詳細講解靜態(tài)電子商務站點創(chuàng)建和制作的步驟， 并分析制作站 點規(guī)劃書的重要性和必要性，使學生規(guī)范網站設計的流程。4. 學生思考并撰寫自行創(chuàng)建站點的站點規(guī)

13、劃書。五、實訓方法首先由實訓指導教師在機房講解站點規(guī)劃書的書寫方法和基本格 式，其次由學生針對所選的主題進行站點規(guī)劃。六、考核辦法此部分實訓內容采用全體考察的方法，考核以站點規(guī)劃書的完整性、實用性和創(chuàng)造性為評分標準，以 A （優(yōu)秀）、B （良好）、C （及格）、 D （不及格）為成績標準。七、思考和練習作為電子商務專業(yè)，你覺得在撰寫電子商務站點規(guī)劃書應該著重 突出哪幾個方面，為什么？實訓五 整體布局設計一、實訓目的和要求在站點規(guī)劃完成的基礎上，按照站點規(guī)劃書進行網站整體的布局 設計。要求:1. 設計作品中的各種文件夾和文件名均使用英文名（小寫） ；2. 設計作品首頁文件名為 index.htm

14、 、 default.htm 等；3. 設計作品中中文字體設定為簡體字；4. 網頁應有較好的瀏覽兼容性，同時應考慮顯示分辨率（以800*600 為顯示標準），瀏覽器為 IE 7.0 以上；5. 主題鮮明，具有實用性，清晰表達設計意圖；6. 結構清楚合理，便于瀏覽查找；7. 色彩搭配協(xié)調，頁面美觀，具有藝術品位；8. 注意下載速度、語言代碼、導航效果、實用性、時效性；二、實訓內容1. 站點的創(chuàng)建。2. 繪制草稿圖。3. 利用草稿圖對網站各頁面進行布局設計。三、實訓準備Dreamweaver 8中文版/英文版、PhotoShop7.0以上版本。四、實訓步驟1. 指導學生完成站點的創(chuàng)建。要求如下：1

15、) 站點文件夾以自己的班級和自己的學號的組合命名。2) 在站點文件夾中建立相關頁面，以確保連接和圖像處理操 作中路徑的正確性。3) 所有的資源都保存在assets資源文件夾中，assets文件夾可 以細分為 pic、animation、sound 等子文件夾。4) 如果需要CSS樣式單文件，則CSS樣式單文件單獨放置于 css文件夾中。2. 指導學生完成草稿圖的繪制， 包括首頁和二級頁面。 要求如下：1) 為了便于布局視圖的繪制， 草稿圖的寬度統(tǒng)一為 777 像素， 高度根據站點內容進行設置。2) 草稿圖統(tǒng)一用photoshop進行繪制。3) 草稿圖上必須表明每板塊的內容名稱。3. 指導學生利

16、用草稿圖進行網頁各個頁面的布局設計 (使用布局 視圖)。方法簡述如下：1) 進入布局視圖。2) 載入草稿圖。3) 繪制一個布局表格覆蓋整個草稿圖， 即繪制一個寬度為 777 的表格。保證在分辨率變化的情況下，網頁不會出現異常 現象。4) 分別對個板塊繪制布局表格。5) 進行保存。五、實訓方法機房操作。六、考核辦法此部分實訓內容采用全體考察的方法，以百分制為滿分，具體評 分標準如下：1. 站點創(chuàng)建的規(guī)范性和熟練程度（ 25 分）2. 草稿圖的繪制（ 20 分）3. 草稿圖的載入（ 5 分）布局視圖的相關操作（ 50 分）七、思考和練習布局視圖和表格視圖在版面布局中各有優(yōu)勢和劣勢？對怎樣的版 面布

17、局應該用布局視圖，又對怎樣的版面布局應該用表格視圖？實訓六 搜集和創(chuàng)建資源一、實訓目的和要求1. 按照實訓四所完成的站點規(guī)劃書的要求完成站點設計和制作 中資源的搜集和創(chuàng)建工作。要求如下：a) 為了維護機房秩序，與因特網互聯期間，由老師監(jiān)督，不 可利用實訓時間進行任何與實訓無關的活動。b) 實訓指導教師推薦資源站點供學生參考。c) 實訓指導教師嚴格把關，保證資源創(chuàng)建和搜集的完整性。二、實訓內容在因特網上搜索資源或在本機上創(chuàng)建所需資源。三、實訓準備Dreamweaver 8 中文版、WORD2000 以上版本、Photoshop7.0以 上版本、 與因特網連接的局域網。四、實訓步驟 根據網站規(guī)劃書

18、的內容和網站建設的需要，在因特網上搜索素 材，素材包括網頁的信息內容和網頁的主題設計內容。五、實訓方法機房上網并利用本機軟件完成。六、考核辦法 此部分是學生在因特網和本機上進行資源的搜集和創(chuàng)建，故無 需進行考核，但需要指導學生按照站點規(guī)劃書的要求完成站點資源的 搜集和創(chuàng)建工作。七、思考與練習此部分是學生在因特網和本機上進行資源的搜集和創(chuàng)建，故無練習。實訓七 頁面素材設計一、實訓目的和要求按照實訓四所完成的站點規(guī)劃書的要求完成站點設計和制作中的 頁面素材的設計工作。要求如下：1. 嚴格按照站點規(guī)劃書的內容進行頁面素材設計。2. 實訓指導教師給予頁面主題的相關指導。二、實訓內容在本機上進行頁面素材

19、設計。三、實訓準備Dreamweaver 8 中文版、WORD2000 以上版本、Photoshop7.0以 上版本 。與因特網連接的局域網。四、實訓步驟1. 公共頁面素材的設計。2. 首頁獨有頁面素材的設計。3. 各二級頁面獨有頁面素材的設計。4. 將設計好的素材文件存放在資源文件夾中。五、實訓方法機房利用本機軟件完成。六、考核辦法 此部分是學生在本機上進行頁面素材的搜集和創(chuàng)建，故無需進 行考核，但需要指導學生按照站點規(guī)劃書的要求完成頁面素材的創(chuàng)建 工作。七、思考與練習此部分是學生在本機上進行頁面素材的創(chuàng)建，故無練習實訓八 樣式設計一、實訓目的和要求按照實訓四所完成的站點規(guī)劃書的要求完成站點

20、設計和制作中的HTML樣式和CSS樣式的創(chuàng)建。二、 實訓內容1. HTML 樣式的創(chuàng)建。1）創(chuàng)建字符型的 HTML 樣式。2）創(chuàng)建段落型的 HTML 樣式。2. CSS樣式的創(chuàng)建。1）創(chuàng)建自定義的CSS樣式。2）創(chuàng)建HTMI標記的的CSS樣式。3）創(chuàng)建CSS選擇器的CSS樣式。（用于創(chuàng)建偽錨名）。三、實訓準備Dreamweaver 8中文版 。四、實訓步驟1. HTML 樣式的創(chuàng)建。2. CSS樣式的創(chuàng)建1）內部CSS樣式創(chuàng)建。2）外部鏈接CSS樣式單文件的創(chuàng)建。五、實訓方法機房利用本機軟件完成。六、考核辦法此部分實訓內容采用全體考察的方法，以百分制為滿分，具體評分標準如下：1. HTML 、

21、CSS 樣式（內部、外部）創(chuàng)建的熟練程度（ 30分）2. HTML、CSS樣式（內部、外部）創(chuàng)建的操作正確性（40分）HTML、CSS樣式（內部、外部）創(chuàng)建的結果正確性（30分）七、思考與練習1、導入外部鏈接的CSS樣式單文件和鏈接外部的 CSS樣式單文 件有什么區(qū)別？2、CSS 樣式中自定義的 CSS 樣式、 HTML 標記的 CSS 樣式和CSS選擇器樣式各有什么獨特的作用？實訓九 首頁模板設計一、 實訓目的和要求按照實訓四所完成的站點規(guī)劃書的要求以及實訓五的整體布局設 計中的首頁布局設計完成首頁模板的整體設計和填充。二、 實訓內容首頁模板的制作和內容的填充。三、實訓準備Dreamweav

22、er 8中文版 。四、實訓步驟1. 根據實訓五 整體布局設計中的首頁布局設計制作首頁模板。2. 在模板中插入實訓六、 七、八所設計好的資源和素材進行模板內容的填充，形成站點的首頁。五、實訓方法機房利用本機軟件完成。六、考核辦法此部分實訓內容采用全體考察的方法，以百分制為滿分，具體評分標準如下：1. 關于模板操作的熟練程度（ 50 分）2. 關于模板操作的正確性（ 50 分）七、思考與練習實訓十 二級頁面模板設計一、 實訓目的和要求按照實訓四所完成的站點規(guī)劃書的要求以及實訓五的整體布局設 計中的首頁布局設計完成二級模板的整體設計和填充。二、 實訓內容二級頁面模板的設計和填充。三、實訓準備Drea

23、mweaver 8中文版 。四、實訓步驟1. 根據實訓五 整體布局設計中的各二級頁面布局設計制作二級頁面模板。2. 在模板中插入實訓六、 七、八所設計好的資源和素材進行模板內容的填充，形成站點的各個二級頁面。五、實訓方法機房利用本機軟件完成。六、考核辦法此部分實訓內容采用全體考察的方法，以百分制為滿分，具體評分標準如下：1. 關于模板操作的熟練程度（ 50 分）2. 關于模板操作的正確性（ 50 分）七、思考與練習無實訓十一 各頁面的細化、測試和上傳作品一、 實訓目的和要求按照實訓四所完成的站點規(guī)劃書的要求細化頁面，使其達到最優(yōu) 的效果并進行測試和上傳作品。二、 實訓內容1. CSS 樣式的應

24、用和調整。2. 頁面布局的調整。3. 頁面文本、圖片以及媒體內容的進一步細化。4. 鏈接的測試。5. 作品的上傳。三、實訓準備Dreamweaver 8中文版、PhotoShop7.0以上中文版本 。連接因特網的局域網。四、實訓步驟1. 按照站點規(guī)劃書的內容要求對各個頁面進行CSS樣式的應用2. 細化各個頁面，對各個頁面的圖像、表格、鏈接進行適當的調整，使站點更加美觀。3. 測試所有鏈接。4. 在本地站點中測試整個站點的運作情況，并進行相應的調整。5. 利用 CuteFtp 工具進行作品上傳。 。五、實訓方法機房利用本機軟件完成。六、考核辦法此部分實訓內容采用全體考察的方法，以百分制為滿分，具

25、體評 分標準如下：1. CSS應用操作的熟練程度（20分）。102. 頁面布局的微操作（表格、布局視圖、層等）熟練程度（分）。3. 圖片、鏈接調整的為操作熟練程度（ 10分）。4. CuteFtp的使用熟練程度。（50分）。七、思考與練習完成整個站點后，對自己的站點的建設進行總結。實訓十二 總結一、 實訓目的和要求將學生制作的作品進行綜合的考核，并進行總結。二、 實訓內容1. 對學生作品進行考核。2. 選擇典型的(優(yōu)秀的和劣質的)作品分別進行總結。三、實訓準備Dreamweaver 8中文版、PhotoShop7.0以上中文版本。 連接因特網的局域網。四、實訓步驟1. 對學生的作品依次進行綜合

26、考核。2. 抽取典型(優(yōu)秀和劣質)的作品進行全面的解析。五、實訓方法機房利用本機軟件完成。六、考核辦法 此部分實訓以考核為主，對學生組品進行整體的考核。采用全體 考察的方法，以百分制為滿分，具體評分標準如下：a) 系統(tǒng)文檔 20 分b) 編寫代碼 30 分c) 程序調試 10 分d) 實訓出勤 20 分e) 技術含量 10 分f) 美工設計 10 分七、思考與練習無。附錄一 網站規(guī)劃書書寫格式一、 建設網站前的市場分析1、相關行業(yè)的市場是怎樣的 , 市場有什么樣的特點，是否能夠在 互聯網上開展公司業(yè)務。2、市場主要競爭者分析，競爭對手上網情況及其網站規(guī)劃、功能 作用。3、公司自身條件分析、公司概況、市場優(yōu)勢，可以利用網站提升 哪些競爭力，建設網站的能力（費用、技術、人力等） 。二、網站內容規(guī)劃1. 根據網站的目的和功能規(guī)劃網站內容，一般企業(yè)網站應包括： 公司簡介、產品介紹、服務內容、價格信息、聯系方式、網上 定單等基本內容。2. 電子商務類網站要提供會員注冊、 詳細的商品服務信息、 信息 搜索查詢、定單確認、 付款、個人信息保密措施、 相關幫助等。3. 如果網站欄目比較多，則考慮采用網站編程專人負責相關內 容。 注意：網站