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

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

3、不做要求）。2. 硬件準備網(wǎng)絡條件：與因特網(wǎng)連接的局域網(wǎng)。教師用機：WindowsXP及以上版本。學生用機：WindowsXP及以上版本。五、綜合實訓考核辦法：1) 系統(tǒng)文檔 20分2) 編寫代碼 30分3) 程序調(diào)試 10分4) 實訓出勤 20分5) 技術(shù)含量 10分6) 美工設(shè)計 10分專心-專注-專業(yè)目 錄實訓一 基本知識回顧一、 實訓目的和要求溫習網(wǎng)頁制作的課程重點難點，使學生對Dreamweaver cs4各方面的操作知識系統(tǒng)的由“片”的認識轉(zhuǎn)向“面”的認識。二、 實訓內(nèi)容Dreamweaver cs4的基本操作：站點、表格、圖像、鏈接、框架等。三、 實訓準備Dreamweaver

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

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

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

7、設(shè)計制作中常用的知識點和操作。二、 實訓內(nèi)容講解和演示整個站點的制作過程和設(shè)計方法。三、 實訓準備Dreamweaver cs4中文版。四、 實訓步驟1. 由實訓指導教師詳細講解靜態(tài)個人網(wǎng)站站點的設(shè)計方法和組成模塊。2. 由實訓指導教師詳細演示首頁和一個以上的二級頁面的整個制作過程（從站點創(chuàng)建開始）。3. 抽樣檢查學生的聽課效果，在時間允許的條件下，讓學生上教師機獨立完成頁面制作。4. 對學生的抽樣檢查進行分析，重點講解其失誤或錯誤的地方。五、 實訓方法使用投影講解演示，并抽樣進行檢查。六、 考核辦法此部分實訓內(nèi)容采用抽樣考察的方法，考核以操作的熟練程度和正確性為評分標準，以A（優(yōu)秀）、B（良

8、好）、C（及格）、D（不及格）為成績標準。七、 思考和練習1. 靜態(tài)個人網(wǎng)站站點的創(chuàng)建應該遵循那些基本要素？實訓三 實例一操作一、 實訓目的和要求將實訓二的內(nèi)容在機房進行操作，讓學生切實地對靜態(tài)個人網(wǎng)站站點的設(shè)計進行操作。二、 實訓內(nèi)容對給定的實例站點進行分析，并進行制作，最后由實訓指導教師為每一位學生的制作成品進行考核。三、 實訓準備Dreamweaver cs4中文版、PhotoShop 7.0以上版本、制作站點時不能在機房完成的或以學生能力不能制作的素材。四、 實訓步驟1. 準備工作：1) 站點的創(chuàng)建和規(guī)劃。2) 設(shè)計素材和內(nèi)容素材的準備。3) CSS樣式的準備。2. 設(shè)計工作：1) 草

9、稿圖的制作。2) 映射草稿圖，按照草稿圖的設(shè)計利用布局視圖進行版面布局。3) 布局完畢后，進行內(nèi)容素材和設(shè)計素材等相關(guān)素材對象的插入工作。3. 細化工作：1) 對內(nèi)容、表格、鏈接、圖片等進行CSS樣式的應用。2) 細化整個版面。4. 測試整個站點并交由實訓指導教師進行考核。五、 實訓方法在機房進行實訓，由實訓指導教師親臨指導。六、 考核辦法此部分實訓內(nèi)容采用全體考察的方法，考核以操作的熟練程度和正確性為評分標準，以A（優(yōu)秀）、B（良好）、C（及格）、D（不及格）為成績標準。七、 思考和練習通過此部分實訓，你是否熟練掌握建立靜態(tài)個人網(wǎng)站站點所需要各知識點的操作技能？由那些需要進一步的由教師在今后

10、的課堂中進行講解和演示。實訓四 實訓作品的站點規(guī)劃一、 實訓目的和要求使學生在創(chuàng)建站點之前對站點有總體的規(guī)劃，讓學生對自己即將設(shè)計和制作的站點進行規(guī)劃并完成站點規(guī)劃書的撰寫。實訓作品的選題范圍：1、 班級網(wǎng)站2、 個人網(wǎng)站3、 個人網(wǎng)站消費網(wǎng)站（為一種消費品制作個人網(wǎng)站站點）4、 個人網(wǎng)站公司網(wǎng)站（為某個企業(yè)制作個人網(wǎng)站站點）因為是建立靜態(tài)的個人網(wǎng)站站點，所以在講解和分析站點規(guī)劃書時應該著重于站點的設(shè)計，而不是其他方面，靜態(tài)的個人網(wǎng)站站點沒有交互式的訪問模式和系統(tǒng)，所以只能是發(fā)布信息的工具，這點請實訓指導教師在授課和指導時予以關(guān)切。正式站點規(guī)劃書見附錄。二、 實訓內(nèi)容讓學生在因特網(wǎng)上申請免費的

11、個人主頁空間，向?qū)W生講解站點規(guī)劃的重要性以及站點規(guī)劃書的撰寫方法，并由學生自行思考并完成實訓指導書的撰寫。三、 實訓準備Dreamweaver cs4中文版、WORD2003以上版本。四、 實訓步驟1. 進行實訓作品的選題并申請個人主頁空間。2. 站點規(guī)劃書的書寫格式和方法的講解。3. 詳細講解靜態(tài)個人網(wǎng)站站點創(chuàng)建和制作的步驟，并分析制作站點規(guī)劃書的重要性和必要性，使學生規(guī)范網(wǎng)站設(shè)計的流程。4. 學生思考并撰寫自行創(chuàng)建站點的站點規(guī)劃書。五、 實訓方法首先由實訓指導教師在機房講解站點規(guī)劃書的書寫方法和基本格式，其次由學生針對所選的主題進行站點規(guī)劃。六、 考核辦法此部分實訓內(nèi)容采用全體考察的方法，

12、考核以站點規(guī)劃書的完整性、實用性和創(chuàng)造性為評分標準，以A（優(yōu)秀）、B（良好）、C（及格）、D（不及格）為成績標準。七、 思考和練習作為個人網(wǎng)站專業(yè)，你覺得在撰寫個人網(wǎng)站站點規(guī)劃書應該著重突出哪幾個方面，為什么？實訓五 整體布局設(shè)計一、 實訓目的和要求在站點規(guī)劃完成的基礎(chǔ)上，按照站點規(guī)劃書進行網(wǎng)站整體的布局設(shè)計。要求: 1. 設(shè)計作品中的各種文件夾和文件名均使用英文名（小寫）；2. 設(shè)計作品首頁文件名為index.htm、default.htm等；3. 設(shè)計作品中中文字體設(shè)定為簡體字；4. 網(wǎng)頁應有較好的瀏覽兼容性，同時應考慮顯示分辨率（以800*600為顯示標準），瀏覽器為IE 7.0以上；5

13、. 主題鮮明，具有實用性，清晰表達設(shè)計意圖；6. 結(jié)構(gòu)清楚合理，便于瀏覽查找；7. 色彩搭配協(xié)調(diào)，頁面美觀，具有藝術(shù)品位；8. 注意下載速度、語言代碼、導航效果、實用性、時效性；二、 實訓內(nèi)容1. 站點的創(chuàng)建。2. 繪制草稿圖。3. 利用草稿圖對網(wǎng)站各頁面進行布局設(shè)計。三、 實訓準備Dreamweaver cs4中文版/英文版、PhotoShop7.0以上版本。四、 實訓步驟1. 指導學生完成站點的創(chuàng)建。要求如下：1) 站點文件夾以自己的班級和自己的學號的組合命名。2) 在站點文件夾中建立相關(guān)頁面，以確保連接和圖像處理操作中路徑的正確性。3) 所有的資源都保存在assets資源文件夾中，ass

14、ets文件夾可以細分為pic、animation、sound等子文件夾。4) 如果需要CSS樣式單文件，則CSS樣式單文件單獨放置于css文件夾中。2. 指導學生完成草稿圖的繪制，包括首頁和二級頁面。要求如下：1) 為了便于布局視圖的繪制，草稿圖的寬度統(tǒng)一為777像素，高度根據(jù)站點內(nèi)容進行設(shè)置。2) 草稿圖統(tǒng)一用photoshop進行繪制。3) 草稿圖上必須表明每板塊的內(nèi)容名稱。3. 指導學生利用草稿圖進行網(wǎng)頁各個頁面的布局設(shè)計（使用布局視圖）。方法簡述如下：1) 進入布局視圖。2) 載入草稿圖。3) 繪制一個布局表格覆蓋整個草稿圖，即繪制一個寬度為777的表格。保證在分辨率變化的情況下，網(wǎng)頁

15、不會出現(xiàn)異常現(xiàn)象。4) 分別對個板塊繪制布局表格。5) 進行保存。五、 實訓方法機房操作。六、 考核辦法此部分實訓內(nèi)容采用全體考察的方法，以百分制為滿分，具體評分標準如下：1. 站點創(chuàng)建的規(guī)范性和熟練程度（25分）2. 草稿圖的繪制（20分）3. 草稿圖的載入（5分）布局視圖的相關(guān)操作（50分）七、 思考和練習布局視圖和表格視圖在版面布局中各有優(yōu)勢和劣勢？對怎樣的版面布局應該用布局視圖，又對怎樣的版面布局應該用表格視圖？實訓六 搜集和創(chuàng)建資源一、 實訓目的和要求1. 按照實訓四所完成的站點規(guī)劃書的要求完成站點設(shè)計和制作中資源的搜集和創(chuàng)建工作。要求如下：a) 為了維護機房秩序，與因特網(wǎng)互聯(lián)期間，

16、由老師監(jiān)督，不可利用實訓時間進行任何與實訓無關(guān)的活動。b) 實訓指導教師推薦資源站點供學生參考。c) 實訓指導教師嚴格把關(guān)，保證資源創(chuàng)建和搜集的完整性。二、 實訓內(nèi)容在因特網(wǎng)上搜索資源或在本機上創(chuàng)建所需資源。三、 實訓準備Dreamweaver cs4中文版 、WORD2003以上版本、Photoshop7.0以上版本、 與因特網(wǎng)連接的局域網(wǎng)。四、 實訓步驟根據(jù)網(wǎng)站規(guī)劃書的內(nèi)容和網(wǎng)站建設(shè)的需要，在因特網(wǎng)上搜索素材，素材包括網(wǎng)頁的信息內(nèi)容和網(wǎng)頁的主題設(shè)計內(nèi)容。五、 實訓方法機房上網(wǎng)并利用本機軟件完成。六、 考核辦法 此部分是學生在因特網(wǎng)和本機上進行資源的搜集和創(chuàng)建，故無需進行考核，但需要指導學生

17、按照站點規(guī)劃書的要求完成站點資源的搜集和創(chuàng)建工作。七、 思考與練習此部分是學生在因特網(wǎng)和本機上進行資源的搜集和創(chuàng)建，故無練習。實訓七 頁面素材設(shè)計一、 實訓目的和要求按照實訓四所完成的站點規(guī)劃書的要求完成站點設(shè)計和制作中的頁面素材的設(shè)計工作。要求如下：1. 嚴格按照站點規(guī)劃書的內(nèi)容進行頁面素材設(shè)計。2. 實訓指導教師給予頁面主題的相關(guān)指導。二、 實訓內(nèi)容在本機上進行頁面素材設(shè)計。三、 實訓準備Dreamweaver cs4中文版 、WORD2003以上版本、Photoshop7.0以上版本 。與因特網(wǎng)連接的局域網(wǎng)。四、 實訓步驟1. 公共頁面素材的設(shè)計。2. 首頁獨有頁面素材的設(shè)計。3. 各二

18、級頁面獨有頁面素材的設(shè)計。4. 將設(shè)計好的素材文件存放在資源文件夾中。五、 實訓方法機房利用本機軟件完成。六、 考核辦法 此部分是學生在本機上進行頁面素材的搜集和創(chuàng)建，故無需進行考核，但需要指導學生按照站點規(guī)劃書的要求完成頁面素材的創(chuàng)建工作。七、 思考與練習此部分是學生在本機上進行頁面素材的創(chuàng)建，故無練習。實訓八 樣式設(shè)計一、 實訓目的和要求按照實訓四所完成的站點規(guī)劃書的要求完成站點設(shè)計和制作中的HTML樣式和CSS樣式的創(chuàng)建。二、 實訓內(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)建

19、HTML標記的的CSS樣式。3) 創(chuàng)建CSS選擇器的CSS樣式。（用于創(chuàng)建偽錨名）。三、 實訓準備Dreamweaver cs4中文版 。四、 實訓步驟1. HTML樣式的創(chuàng)建。 2. CSS樣式的創(chuàng)建 1) 內(nèi)部CSS樣式創(chuàng)建。2) 外部鏈接CSS樣式單文件的創(chuàng)建。五、 實訓方法機房利用本機軟件完成。六、 考核辦法此部分實訓內(nèi)容采用全體考察的方法，以百分制為滿分，具體評分標準如下：1. HTML、CSS樣式（內(nèi)部、外部）創(chuàng)建的熟練程度（30分）2. HTML、CSS樣式（內(nèi)部、外部）創(chuàng)建的操作正確性（40分）HTML、CSS樣式（內(nèi)部、外部）創(chuàng)建的結(jié)果正確性（30分）七、 思考與練習1、 導

20、入外部鏈接的CSS樣式單文件和鏈接外部的CSS樣式單文件有什么區(qū)別？2、 CSS樣式中自定義的CSS樣式、HTML標記的CSS樣式和CSS選擇器樣式各有什么獨特的作用 ？實訓九 首頁模板設(shè)計一、 實訓目的和要求按照實訓四所完成的站點規(guī)劃書的要求以及實訓五的整體布局設(shè)計中的首頁布局設(shè)計完成首頁模板的整體設(shè)計和填充。二、 實訓內(nèi)容首頁模板的制作和內(nèi)容的填充。三、 實訓準備Dreamweaver cs4中文版 。四、 實訓步驟1. 根據(jù)實訓五 整體布局設(shè)計中的首頁布局設(shè)計制作首頁模板。2. 在模板中插入實訓六、七、八所設(shè)計好的資源和素材進行模板內(nèi)容的填充，形成站點的首頁。五、 實訓方法機房利用本機軟

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

22、面。五、 實訓方法機房利用本機軟件完成。六、 考核辦法此部分實訓內(nèi)容采用全體考察的方法，以百分制為滿分，具體評分標準如下：1. 關(guān)于模板操作的熟練程度（50分）2. 關(guān)于模板操作的正確性（50分）七、 思考與練習無 實訓十一 各頁面的細化、測試和上傳作品一、 實訓目的和要求按照實訓四所完成的站點規(guī)劃書的要求細化頁面，使其達到最優(yōu)的效果并進行測試和上傳作品。二、 實訓內(nèi)容1. CSS樣式的應用和調(diào)整。2. 頁面布局的調(diào)整。3. 頁面文本、圖片以及媒體內(nèi)容的進一步細化。4. 鏈接的測試。5. 作品的上傳。三、 實訓準備Dreamweaver cs4中文版 、PhotoShop7.0以上中文版本 。連接因特網(wǎng)的局域網(wǎng)。四、 實訓步驟1. 按照站點規(guī)劃書的內(nèi)容要求對各個頁面進行CSS樣式的應用。 2. 細化各個頁面，對各個頁面的圖像、表格、鏈接進行適當?shù)恼{(diào)整，使站點更加美觀。3. 測試所有鏈接。4. 在本地站點中測試整個站點的運作情況，并進行相應的調(diào)整。5. 利用CuteFtp工具進行作品上傳。五、 實訓方法機房利