《網(wǎng)頁設(shè)計與制作》實訓(xùn)項目大綱及實訓(xùn)方案

本實訓(xùn)項目的目的與任務(wù)是使學(xué)生根據(jù)問題的要求， 構(gòu)思一個主題，并運用網(wǎng)頁制作工具，制作和發(fā)布網(wǎng)頁，并對此進行更新和維護，掌握網(wǎng)站發(fā)布的工作流程，了解域名申請、空間申請的方法，能在校園網(wǎng)及英特網(wǎng)上發(fā)布網(wǎng)頁。實訓(xùn)學(xué)時數(shù)：125（5周）課外學(xué)時數(shù)：100適用方向：辦公自動化、 電子商務(wù)執(zhí)筆者：王平露編寫日期：2006年4月一、實訓(xùn)教學(xué)的目的與任務(wù)本實訓(xùn)項目的目的與任務(wù)是使學(xué)生根據(jù)問題的要求，構(gòu)思一個主題，并運用網(wǎng)頁制作工具，制作和發(fā)布網(wǎng)頁，并對此進行更新和維護，掌握網(wǎng)站發(fā)布的工作流程，了解域名申請、空間申請的方法，能在校園網(wǎng)及英特網(wǎng)上發(fā)布網(wǎng)頁。通過設(shè)計、編輯和發(fā)布網(wǎng)頁全過程的實際訓(xùn)練使學(xué)生對網(wǎng)頁整體設(shè)計流程有一個深刻的認(rèn)識，并且熟練掌握網(wǎng)頁制作工具（DreamweaverMX）的使用，初步掌握HTML、CSS語法格式，能借助手冊看懂代碼，能進行簡單的代碼改寫工作，了解客戶端腳本和服務(wù)端腳本區(qū)別， 了解在網(wǎng)頁上進行簡單代碼的嵌入與改寫，會與其他工具結(jié)合使用以便實現(xiàn)更高效高質(zhì)量的網(wǎng)頁效果， 進一步提高辦公自動化效率和水平。二、實訓(xùn)項目的基本要求及考核標(biāo)準(zhǔn)基本要求：（一）網(wǎng)頁內(nèi)容要求：1、主題內(nèi)容：創(chuàng)意突出，體現(xiàn)校園園區(qū)精神文明 建設(shè)體現(xiàn)本班級大學(xué)生風(fēng)貌，學(xué)習(xí)氣氛濃厚，作品內(nèi)容健康。嚴(yán)禁發(fā)布反對 政府、宣傳迷信、傳播色情、系統(tǒng)破壞、黑客教程等違法信息。2、具體內(nèi)容：標(biāo)徽、標(biāo)題、各鏈接頁具體內(nèi)容，站內(nèi)搜索、計數(shù)器、留言系統(tǒng)、電子郵件地址、彈出窗口、漂浮廣告、背景音樂、網(wǎng)頁特效、友情鏈接、版權(quán)信息等。（二）制作基本要求:I、至少有10個頁面，鏈接結(jié)構(gòu)應(yīng)有三層，下一層必須有返回上層的按鈕或鏈接。有整體框架結(jié)構(gòu)，導(dǎo)航欄，表格定位，布局合理，色彩搭配協(xié)調(diào)統(tǒng)一。2、主頁的文件名為：index,htm。文件名一般用英文小寫字母。3、網(wǎng)頁中要有文本、圖像、表格、交互與鏈接、層與動畫、表單。4、網(wǎng)頁主要建立站內(nèi)鏈接，盡量少建立外部鏈接，至少建立一個 E-mail鏈接至你的郵箱。5、要有flash控件、Frieworks圖像，至少各出現(xiàn)一處,使用CSS樣式；6、為頁面元素添加行為（調(diào)用DreamweaverMX內(nèi)置的腳本程序）.7、相關(guān)圖片清晰，單張圖片大小不超過 200K（三）、網(wǎng)頁性能要求：1、每一張網(wǎng)頁，顯示分辨率以800*600狀態(tài)為準(zhǔn)，網(wǎng)頁對不同瀏覽器兼容性較好；2、在不考慮兼容性問題時，不出現(xiàn)亂碼或錯誤的表格等內(nèi)容；3、結(jié)構(gòu)清楚，便于瀏覽、查找。沒有空鏈接或錯誤鏈接；4、界面鏈接方便；（四）測試和網(wǎng)頁發(fā)布要求：1、測試鏈接和兼容性；2、預(yù)覽網(wǎng)頁；3、申請免費二級域名和免費空間；4、申請計數(shù)器和留言版5、發(fā)布網(wǎng)頁6、推廣網(wǎng)站加入搜索引擎。評分標(biāo)準(zhǔn)：以下列出每項內(nèi)容的滿分，根據(jù)實際情況可酌情加、減分。(20)1、網(wǎng)頁內(nèi)容健康（有非法內(nèi)容責(zé)任自負(fù)），主題鮮明，且按前面各項要求不缺少。(20)2、網(wǎng)頁中有框架、導(dǎo)航、布局合理。（ 10）3、網(wǎng)頁中有三層，下一層有返回上層的按鈕或鏈接。 （5+5+5）4、采用了至少一幅Flash動畫，一處Fireworks圖像。（5+5）5、使用CSS樣式和內(nèi)置腳本程序。（5+5）6、內(nèi)外鏈接和E-mail鏈接正確無誤，且無空鏈接。（ 5）7、網(wǎng)頁性能測試兼容性和發(fā)布（5+5）8、主頁采用編碼語言如ASP,PHP,JSP等技術(shù)都給予適當(dāng)加分（10）o9、綜合分：（10'）內(nèi)容豐富、自己設(shè)計制作的素材較多；文件夾、文件名命名規(guī)范；文件存放位置合理；網(wǎng)站的功能較強，程序編制合理，功能強；色彩及布局合理美觀、用戶訪問方便；采用各種特效、并且運用合理?！毒W(wǎng)站設(shè)計與制作》實訓(xùn)方案

號J訓(xùn)項內(nèi)容提要訓(xùn)時要求同數(shù)1、簡介網(wǎng)站設(shè)計的流程和使用工具1、\解Dreamvever的起始頁界面的三個區(qū)域的2、啟動、退出Dreamvever作用；T3、了解起始頁的應(yīng)用2、掌握文檔編輯界面的元素組成：注意與其21W介紹)4、掌握Dreamvever軟件的界面組成它軟件界面的區(qū)別要掌握（1）對象面板下5、設(shè)計一個簡單的網(wǎng)頁拉列表的選擇及各個對象的功能；（2）屬和簡性面板的使用及上下文敏感性；（3）其它單使活動面板的功能和使用方法；（4）文檔三種用3、視圖的切換及用途；（5）文檔工具欄的使用。能熟練地調(diào)出各種面板和工具；課堂練習(xí)：編辨一個簡曲的網(wǎng)市像在斗田 TF拓監(jiān)1、在網(wǎng)上申請空間域名；4、能獨立地利用搜索引擎成功申請一個免費空2、站點的功能；間；3、站點管理器的使用方法；2、掌握利用DW中的站點管理器定義一個本地站4、利用站點管理落定義本地站點并將站點（明確定義站點過程中各信息的含點內(nèi)容上傳到遠(yuǎn)程服務(wù)器，發(fā)布網(wǎng)頁。2.義，會填寫各信息）的方法；3、熟練掌握使用站點管理器建立目錄結(jié)構(gòu)來規(guī)范管理不同內(nèi)容不同類型的文件并會建立和占管理及網(wǎng)頁發(fā)布古4、5、編輯各個網(wǎng)頁（明確網(wǎng)站首頁的文件名要求）。會使用站點地圖來宏觀控制站點內(nèi)各個網(wǎng)頁的鏈接關(guān)系；課堂作業(yè)：會使用站點管理器向網(wǎng)上發(fā)布網(wǎng)頁。 （將自己做好的一個網(wǎng)頁上傳（己申請的服務(wù)器）后，并能根據(jù)網(wǎng)址訪問到自己的網(wǎng)頁）（課堂檢查評分）1、頁面整體屬性的設(shè)置1、掌握下到頁面屬性：2、文本元素的輸入和屬性設(shè)置（1）外觀:文字大小、顏色、頁面背景色、3、特殊字符的輸入和屬性設(shè)置2背景圖片、元素的位置確定（2）鏈接：4、圖像元素的輸入和屬性設(shè)置4鏈接的文字、顏色、訪問過的顏色、下劃線去5、列表項的輸入和屬性設(shè)置留等（3）標(biāo)題：設(shè)置不同級別的標(biāo)題樣式16、7、8、水平線和豎直線及顏色滾動字幕的設(shè)置時間和日期的設(shè)置9、設(shè)計一個包含上述元素的網(wǎng)頁2、（4）文檔標(biāo)題和編碼（5）跟蹤圖像。掌握下面的頁面元素的輸入及屬性設(shè)置。（1）文本：輸入和格式（2）特殊字符的輸入（如空格、商標(biāo)、數(shù)學(xué)符號、單位符號等）（3）插入圖像（位置、大小、邊框，面和元素屬性瓦3、注意與背景圖像的區(qū)別）（4）有序列表和無序列表項的設(shè)置（5）水平線和豎直線高度和寬度的及顏色的設(shè)置（ 6）滾動字幕的標(biāo)簽〈marquee）（7）插入時間和時期，并能設(shè)置日期格式和字體字號及顏色。課堂作業(yè)設(shè)計出一個包含文本、特殊字符、圖片、列表項、滾動字幕、水平線和整個頁面有背景圖像的比較美觀的網(wǎng)頁（課堂檢查評分）樂鏈接的種類和功能2、明確鏈接的分類和各種鏈接的功能

號/訓(xùn)項日丁內(nèi)容提要訓(xùn)時數(shù)實要求種鏈接的設(shè)置，1文本鏈接錨點鏈接圖片鏈接圖片熱區(qū)鏈接6、站外鏈接7、信箱鏈接2、熟練掌握鏈接時的目的文件的地址(知道相對路徑和絕對路徑的使用區(qū)別和表示方法)；；2 明確被鏈接的內(nèi)容所出現(xiàn)的目標(biāo)(_blank,_parent,_top,_self)知道以上是什么含義；1 會設(shè)置錨點鏈接(先設(shè)置錨標(biāo)記，再對錨標(biāo)'、記進行的鏈接，注意錨鏈接源文件的標(biāo)記:URL#錨標(biāo)識)5、掌握整體圖片鏈接的方法6、掌握圖片上分區(qū)域鏈接的方法，特別是掌握不規(guī)則圖片區(qū)域的鏈接；7、掌握站外鏈接和E-mail鏈接的方法.注意地址：連同協(xié)議寫完整.8、課堂作業(yè)：制作一個具有上述各種鏈接的網(wǎng)頁.(課堂檢查評分)ITML基礎(chǔ)HTML語言簡介HTML語言的基本語法結(jié)構(gòu)HTML實例分析d4、明確HTML語言的功能、明確學(xué)習(xí)HTML語言的目的、學(xué)習(xí)HTML語言的方法；掌握HTML語言的語法結(jié)構(gòu)：(1)頁面整體結(jié)構(gòu)：(2)頁面元素的標(biāo)簽和屬性：文本、圖像、有序列表、無序列表、表格、行、單表格、框架、以及各自鏈接所使用的標(biāo)記和它們的屬性值：知道各種標(biāo)簽和屬性值在代碼中的語法規(guī)則；能看懂簡單的HTML弋碼；能夠通過查看網(wǎng)站源文件的方式使用已有的資源加入到自己的網(wǎng)頁中。會下載插件和使用插件；課堂作業(yè)：利用HTML編寫一個簡單的網(wǎng)頁實列。并且會利用一小段計算機系網(wǎng)站程序的源代碼插入，達到利用資源的目的。(課堂檢查評分)媒體制作與應(yīng)用1、利用Dreamwever自帶的Flash對象、聲音、電影等多媒體元素放入網(wǎng)頁中；利用Fireworks創(chuàng)建和處理圖片并且在Dreamwever中使用Fireworks；用Flash制作動畫并應(yīng)用于網(wǎng)頁中2、 會快速插入多媒體對象：(1)會插入FLASH按鈕和文本；4 (2)會插入翻轉(zhuǎn)圖像和導(dǎo)航條；4 (3)會插入FLASH電影；4 (4)會插入Shockwave電影；(5)會插入聲音文件及設(shè)置背景音樂；插入以上對象時明確文件格式。2、熟練掌握Fireworks軟件的功能和以下各種操作方法：(1)熟悉Fireworks軟件的界面、工具箱、屬性面板、層面板、混色器面板、樣式面板、幀面板等；(2)能熟練創(chuàng)建所需的圖片，會使用濾鏡、效果等；(3)能根據(jù)網(wǎng)絡(luò)傳輸?shù)男枨髢?yōu)化圖片、切割圖片和導(dǎo)出圖片；(4)熟練掌握Dreamwever中直接插入、編輯Fireworks圖片或簡單網(wǎng)頁動畫的方法；

號訓(xùn)項日內(nèi)容提要訓(xùn)時數(shù)要求3、熟練掌握Flash軟件的功能和以下各種操作方法：（1）熟練掌握Flash軟件的界面、工具箱、常用面板的功能；（2）理解和動畫相關(guān)的一些概念（幀和時間線、舞臺和工作區(qū)、符號和實例、矢量圖與位圖）；（3）理解動畫制作的原理和過程；能利用工具畫出所要的圖形和和修改己有的圖片并添加濾鏡效果等；熟練掌握制作動畫的方法；會在Dreamwever中加入Flash作品（明確使用文件的格式）。4、課堂作業(yè)：在網(wǎng)頁中加入背景音樂，和視頻文件、MP3歌曲點播;用Fireworks制作一個相框并應(yīng)用于網(wǎng)頁中；用Flash制作一個滾動球并用播放田心11鈕*il冰=A?Iff庫1、CSS樣式的功能、定義和使用2、模板的功能、創(chuàng)建和使用3、庫的功能、創(chuàng)建和使用、2、明確CSS樣式的含義和功能；2、熟練掌握用CSS面板來創(chuàng)建和應(yīng)用樣式來2美化網(wǎng)頁的方法；3、會創(chuàng)建和保存網(wǎng)頁模板，并會利用模板創(chuàng)建統(tǒng)一風(fēng)格的網(wǎng)頁；4、會創(chuàng)建、編輯庫項目并利用庫項目更新網(wǎng)頁。5、課堂作業(yè)：（1）設(shè)計一個模板并保存；將網(wǎng)頁微標(biāo)和動畫放入庫項目中以備使用。（2）倉U建一個CSS十件并退置一此樣式，1態(tài)交，互簡單設(shè)計十1、表單的功能2、表單對象的創(chuàng)建3、服務(wù)器的設(shè)置4、交互的腳本程序簡單應(yīng)用4、理解表單的功能；2、熟練掌握插入常用的表單對象的方法 （單2行文本框、密碼框、多行文本框、復(fù)選框、單選鈕、下拉菜單、文本域、圖像域、隱藏域）；3、 掌握設(shè)置各種對象的屬性；4、會利用本地機器作為服務(wù)器，安裝IIS并進行相應(yīng)的設(shè)置；H 涌討筒的的南主■廂再比抻德吞萬工力臺B0i合實1訓(xùn)1、設(shè)計并制作一個內(nèi)容健康的主題網(wǎng)站，嚴(yán)禁一切違法信息；寫出網(wǎng)站設(shè)計的詳盡文檔說明；整體網(wǎng)站風(fēng)格一致網(wǎng)站內(nèi)容豐富、素材精選、實用，有價值；網(wǎng)頁美觀、生動（多媒體效果）各種鏈接暢通；7、網(wǎng)站發(fā)布和瀏覽暢通，兼容性好，傳輸速度快。02、內(nèi)容要求：（任選下列之一）2 （1 ）大學(xué)生活4 （2 ）學(xué)習(xí)方法（3 ）畢業(yè)設(shè)計和專