網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)訓(xùn)項(xiàng)目大綱及實(shí)訓(xùn)方案

1、本實(shí)訓(xùn)項(xiàng)目的目的與任務(wù)是使學(xué)生根據(jù)問(wèn)題的要求，構(gòu)思一個(gè)主題，并運(yùn)用網(wǎng)頁(yè) 制作工具，制作和發(fā)布網(wǎng)頁(yè)，并對(duì)此進(jìn)行更新和維護(hù)，掌握網(wǎng)站發(fā)布的工作流程，了解域名申請(qǐng)、空間申請(qǐng)的方法，能在校園網(wǎng)及英特網(wǎng)上發(fā)布網(wǎng)頁(yè)。實(shí)訓(xùn)學(xué)時(shí)數(shù)：125 （ 5周）課外學(xué)時(shí)數(shù)：100適用方向：辦公自動(dòng)化、電子商務(wù)執(zhí)筆者：王平露編寫(xiě)日期：2006年4月一、實(shí)訓(xùn)教學(xué)的目的與任務(wù)本實(shí)訓(xùn)項(xiàng)目的目的與任務(wù)是使學(xué)生根據(jù)問(wèn)題的要求，構(gòu)思一個(gè)主題，并運(yùn)用網(wǎng)頁(yè)制作工具，制作和發(fā)布網(wǎng)頁(yè)，并對(duì)此進(jìn)行更新和維護(hù)， 掌握網(wǎng)站發(fā)布的工作流程， 了解域名申請(qǐng)、 空間申請(qǐng)的方法，能在校園網(wǎng)及英特網(wǎng)上發(fā)布網(wǎng)頁(yè)。 通過(guò)設(shè)計(jì)、編輯和發(fā)布網(wǎng)頁(yè)全過(guò)程的實(shí) 際訓(xùn)練使學(xué)

2、生對(duì)網(wǎng)頁(yè)整體設(shè)計(jì)流程有一個(gè)深刻的 認(rèn)識(shí)，并且熟練掌握網(wǎng)頁(yè)制作工具（Dreamweaver MX ）的使用，初步掌握 HTML、CSS語(yǔ)法格式，能借助手冊(cè)看懂代碼， 能進(jìn)行簡(jiǎn)單的代碼改寫(xiě)工作，了解客戶端腳本和服務(wù)端腳本區(qū)別，了解在網(wǎng)頁(yè)上進(jìn)行簡(jiǎn)單代碼的嵌入與改寫(xiě)，會(huì)與其他工具結(jié)合使用以便實(shí)現(xiàn)更高效高質(zhì)量的網(wǎng)頁(yè)效果，進(jìn)一步提高辦公自動(dòng)化效率和水平。二、實(shí)訓(xùn)項(xiàng)目的基本要求及考核標(biāo)準(zhǔn)基本要求：（一）網(wǎng)頁(yè)內(nèi)容要求：1、主題內(nèi)容：創(chuàng)意突出，體現(xiàn)校園園區(qū)精神文明建設(shè)體現(xiàn)本班級(jí) 大學(xué)生風(fēng)貌，學(xué)習(xí)氣氛濃厚，作品內(nèi)容健康。嚴(yán)禁發(fā)布反對(duì)政府、宣傳迷信、傳播色情、 系統(tǒng)破壞、黑客教程等違法信息。2 、具體內(nèi)容：標(biāo)徽、標(biāo)

3、題、各鏈接頁(yè)具體內(nèi)容，站內(nèi)搜索、計(jì)數(shù)器、留言系統(tǒng)、電子 郵件地址、彈出窗口、漂浮廣告、背景音樂(lè)、網(wǎng)頁(yè)特效、友情鏈接、版權(quán)信息等。（二）制作基本要求：1 、至少有 10 個(gè)頁(yè)面，鏈接結(jié)構(gòu)應(yīng)有三層，下一層必須有返回上層的按鈕或鏈接。有 整體框架結(jié)構(gòu)，導(dǎo)航欄，表格定位，布局合理，色彩搭配協(xié)調(diào)統(tǒng)一。2 、主頁(yè)的文件名為： index.htm 。文件名一般用英文小寫(xiě)字母。3 、網(wǎng)頁(yè)中要有文本、圖像、表格、交互與鏈接、層與動(dòng)畫(huà)、表單。4 、網(wǎng)頁(yè)主要建立站內(nèi)鏈接，盡量少建立外部鏈接，至少建立一個(gè)E-mail 鏈接至你的郵箱。5、要有 flash 控件、 Frieworks 圖像，至少各出現(xiàn)一處 , 使用 C

4、SS 樣式；6 、為頁(yè)面元素添加行為 （ 調(diào)用 Dreamweaver MX 內(nèi)置的腳本程序 ）.7 、相關(guān)圖片清晰，單張圖片大小不超過(guò)200K（三）、網(wǎng)頁(yè)性能要求：1 、每一張網(wǎng)頁(yè)，顯示分辨率以 800*600 狀態(tài)為準(zhǔn)，網(wǎng)頁(yè)對(duì)不同瀏覽器兼容性較好；2 、在不考慮兼容性問(wèn)題時(shí)，不出現(xiàn)亂碼或錯(cuò)誤的表格等內(nèi)容；3 、結(jié)構(gòu)清楚，便于瀏覽、查找。沒(méi)有空鏈接或錯(cuò)誤鏈接；4 、界面鏈接方便；（四）測(cè)試和網(wǎng)頁(yè)發(fā)布要求：1 、測(cè)試鏈接和兼容性；2 、預(yù)覽網(wǎng)頁(yè)；3 、申請(qǐng)免費(fèi)二級(jí)域名和免費(fèi)空間；4、申請(qǐng)計(jì)數(shù)器和留言版5、發(fā)布網(wǎng)頁(yè)6、推廣網(wǎng)站加入搜索引擎。評(píng)分標(biāo)準(zhǔn)：以下列出每項(xiàng)內(nèi)容的滿分，根據(jù)實(shí)際情況可酌情加、

5、減分。(20)1、 網(wǎng)頁(yè)內(nèi)容健康（有非法內(nèi)容責(zé)任自負(fù)），主題鮮明，且按前面各項(xiàng)要求不缺少。2、網(wǎng)頁(yè)中有框架、導(dǎo)航、布局合理。（10）3、 網(wǎng)頁(yè)中有三層，下一層有返回上層的按鈕或鏈接。（5+5+5）4、采用了至少一幅 Flash動(dòng)畫(huà)，一處 Fireworks 圖像。（5+5）5、 使用CSS樣式和內(nèi)置腳本程序。（5+5）6、 內(nèi)外鏈接和E-mail鏈接正確無(wú)誤，且無(wú)空鏈接。（5）7、網(wǎng)頁(yè)性能測(cè)試兼容性和發(fā)布 （5+5）8、 主頁(yè)采用編碼語(yǔ)言如 ASP，PHP，JSP等技術(shù)都給予適當(dāng)加分（10 ）。9、綜合分：（10 ）內(nèi)容豐富、自己設(shè)計(jì)制作的素材較多；文件夾、文件名命名規(guī)范；文件存放位置合理；網(wǎng)

6、站的功能較強(qiáng)，程序編制合理，功能強(qiáng)；色彩及布局合理美觀、用戶訪問(wèn)方便；采用各種特效、并且運(yùn)用合理。網(wǎng)站設(shè)計(jì)與制作實(shí)訓(xùn)方案號(hào)實(shí)訓(xùn)項(xiàng) 目?jī)?nèi)容提要訓(xùn)時(shí) 數(shù)要求DW介紹 和簡(jiǎn) 單使 用1、簡(jiǎn)介網(wǎng)站設(shè)計(jì)的流程和使用工具2、啟動(dòng)、退出 Dreamvever3、了解起始頁(yè)的應(yīng)用）4、掌握 Dreamvever軟件的界面組成5、設(shè)計(jì)一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)1、了解Dreamvever的起始頁(yè)界面的三個(gè)區(qū) 域的作用；2、 掌握文檔編輯界面的元素組成：注意與其 2 它軟件界面的區(qū)別要掌握（1）對(duì)象面板下拉列表的選擇及各個(gè)對(duì)象的功能； （2）屬 性面板的使用及上下文敏感性； （3）其它 活動(dòng)面板的功能和使用方法；（4）文檔三

7、 種視圖的切換及用途；（5）文檔工具欄的 使用。能熟練地調(diào)岀各種面板和工具；3、課堂練習(xí)：編輯一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)保存并用IE預(yù)覽點(diǎn)管 理及 網(wǎng)頁(yè) 發(fā)布1、在網(wǎng)上申請(qǐng)空間域名；2、站點(diǎn)的功能；3、站點(diǎn)管理器的使用方法；4、利用站點(diǎn)管理器定義本地站點(diǎn)并將 站點(diǎn)內(nèi)容上傳到遠(yuǎn)程服務(wù)器，發(fā)布網(wǎng)頁(yè)。古4、能獨(dú)立地利用搜索引擎成功申請(qǐng)一個(gè)免費(fèi) 空間；2、掌握利用DW中的站點(diǎn)管理器定義一個(gè)本 地站點(diǎn)（明確定義站點(diǎn)過(guò)程中各信息的含2 義，會(huì)填寫(xiě)各信息）的方法；3、熟練掌握使用站點(diǎn)管理器建立目錄結(jié)構(gòu)來(lái) 規(guī)范管理不同內(nèi)容不同類型的文件并會(huì) 建立和編輯各個(gè)網(wǎng)頁(yè)（明確網(wǎng)站首頁(yè)的文 件名要求）。4、會(huì)使用站點(diǎn)地圖來(lái)宏觀控制站

8、點(diǎn)內(nèi)各個(gè)網(wǎng) 頁(yè)的鏈接關(guān)系；5、課堂作業(yè)：會(huì)使用站點(diǎn)管理器向網(wǎng)上發(fā)布網(wǎng)頁(yè)。（將自己做好的一個(gè)網(wǎng)頁(yè)上傳 （已申請(qǐng)的服務(wù) 器） 后,并能根據(jù)網(wǎng)址訪問(wèn)到自己的網(wǎng)頁(yè) ） （課堂檢查評(píng)分）1面和 元素 屬性1、頁(yè)面整體屬性的設(shè)置2、文本元素的輸入和屬性設(shè)置3、特殊字符的輸入和屬性設(shè)置4、圖像元素的輸入和屬性設(shè)置5、列表項(xiàng)的輸入和屬性設(shè)置6、水平線和豎直線及顏色7、滾動(dòng)字幕的設(shè)置8、時(shí)間和日期的設(shè)置9、設(shè)計(jì)一個(gè)包含上述元素的網(wǎng)頁(yè)瓦1、掌握下到頁(yè)面屬性：（1）外觀:文字大小、顏色、頁(yè)面背景色、2背景圖片、元素的位置確定（2）鏈接：4 鏈接的文字、顏色、訪問(wèn)過(guò)的顏色、下劃 線去留等（3）標(biāo)題：設(shè)置不同級(jí)別的標(biāo)

9、題樣式（4） 文檔標(biāo)題和編碼（5）跟蹤圖像。2、掌握下面的頁(yè)面元素的輸入及屬性設(shè)置。（1）文本：輸入和格式（2）特殊字符的 輸入（如空格、商標(biāo)、數(shù)學(xué)符號(hào)、單位符 號(hào)等）（3）插入圖像（位置、大小、邊 框，注意與背景圖像的區(qū)別）（4）有序 列表和無(wú)序列表項(xiàng)的設(shè)置（5 ）水平線和 豎直線高度和寬度的及顏色的設(shè)置（6）滾動(dòng)字幕的標(biāo)簽 （ 7）插入時(shí)間 和時(shí)期，并能設(shè)置日期格式和字體字號(hào)及 顏色。3、課堂作業(yè)設(shè)計(jì)岀一個(gè)包含文本、特殊字符、圖片、 列表項(xiàng)、滾動(dòng)字幕、水平線和整個(gè)頁(yè)面有 背景圖像的比較美觀的網(wǎng)頁(yè)（課堂檢查評(píng) 分）各樂(lè)鏈接的種類和功能2、明確鏈接的分類和各種鏈接的功能號(hào)實(shí)訓(xùn)項(xiàng) 目丁內(nèi)容提要訓(xùn)

10、時(shí) 數(shù)實(shí)要求種鏈2、文本鏈接2、熟練掌握鏈接時(shí)的目的文件的地址 (知道接的3、錨點(diǎn)鏈接相對(duì)路徑和絕對(duì)路徑的使用區(qū)別和表示設(shè)置，4、圖片鏈接方法)；5、圖片熱區(qū)鏈接2明確被鏈接的內(nèi)容所岀現(xiàn)的目標(biāo)16、站外鏈接(_blank,_parent,_top,_self)7、信箱鏈接4、知道以上是什么含義；會(huì)設(shè)置錨點(diǎn)鏈接(先設(shè)置錨標(biāo)記，再對(duì)錨 標(biāo)記進(jìn)行的鏈接，注意錨鏈接源文件的標(biāo) 記:URL#錨標(biāo)識(shí))5、掌握整體圖片鏈接的方法6、掌握?qǐng)D片上分區(qū)域鏈接的方法，特別是掌 握不規(guī)則圖片區(qū)域的鏈接；7、掌握站外鏈接和E-mail鏈接的方法.注意 地址：連同協(xié)議寫(xiě)完整.8、課堂作業(yè)：制作一個(gè)具有上述各種鏈接的網(wǎng)頁(yè)

11、.(課堂檢查評(píng)分)1、HTML語(yǔ)言簡(jiǎn)介4、明確HTML語(yǔ)言的功能、明確學(xué)習(xí) HTML2、HTML語(yǔ)言的基本語(yǔ)法結(jié)構(gòu)語(yǔ)言的目的、學(xué)習(xí)HTML語(yǔ)言的方法；3、HTML實(shí)例分析2、掌握HTML語(yǔ)言的語(yǔ)法結(jié)構(gòu)：(1 )頁(yè)面整體結(jié)構(gòu)：(2 )頁(yè)面元素的標(biāo)簽和屬性：HTML基礎(chǔ)d文本、圖像、有序列表、無(wú)序列表、表格、行、 單表格、框架、以及各自鏈接所使用的標(biāo)記和 它們的屬性值；知道各種標(biāo)簽和屬性值在代碼 中的語(yǔ)法規(guī)則；3、能看懂簡(jiǎn)單的HTML弋碼；4、能夠通過(guò)查看網(wǎng)站源文件的方式使用已有 的資源加入到自己的網(wǎng)頁(yè)中。5、會(huì)下載插件和使用插件；6、課堂作業(yè)：利用HTML編寫(xiě)一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)實(shí)列。并 且會(huì)利用一小

12、段計(jì)算機(jī)系網(wǎng)站程序的源 代碼插入，達(dá)到利用資源的目的。(課堂 檢查評(píng)分)1、利用Dreamwever自帶的Flash對(duì)象、聲2、會(huì)快速插入多媒體對(duì)象：音、電影等多媒體元素放入網(wǎng)頁(yè)中；(1)會(huì)插入FLASH按鈕和文本；2、利用Fireworks創(chuàng)建和處理圖片并且在4(2)會(huì)插入翻轉(zhuǎn)圖像和導(dǎo)航條；Dreamwever 中使用 Fireworks ；4(3)會(huì)插入FLASH電影；3、用Flash制作動(dòng)畫(huà)并應(yīng)用于網(wǎng)頁(yè)中4(4) 會(huì)插入 Shockwave電影；(5) 會(huì)插入聲音文件及設(shè)置背景音樂(lè)；插入以上對(duì)象時(shí)明確文件格式。多2、熟練掌握Fireworks軟件的功能和以下各媒體種操作方法：制作(1)熟

13、悉Fireworks軟件的界面、工具與應(yīng)箱、屬性面板、層面板、 混色器面板、樣用式面板、幀面板等；(2 )能熟練創(chuàng)建所需的圖片，會(huì)使用濾 鏡、效果等；(3) 能根據(jù)網(wǎng)絡(luò)傳輸?shù)男枨髢?yōu)化圖片、 切割圖片和導(dǎo)岀圖片；(4) 熟練掌握Dreamwever中直接插入、 編輯Fireworks圖片或簡(jiǎn)單網(wǎng)頁(yè)動(dòng)畫(huà)的方 法；號(hào)實(shí)訓(xùn)項(xiàng) 目?jī)?nèi)容提要訓(xùn)時(shí) 數(shù)要求3、熟練掌握Flash軟件的功能和以下各種操 作方法：（1 ）熟練掌握Flash軟件的界面、工具 箱、常用面板的功能；（2）理解和動(dòng)畫(huà)相關(guān)的一些概念（幀和時(shí) 間線、舞臺(tái)和工作區(qū)、符號(hào)和實(shí)例、矢量 圖與位圖）；（3 ）理解動(dòng)畫(huà)制作的原理和過(guò)程；（4）能利用工具

14、畫(huà)出所要的圖形和和修 改已有的圖片并添加濾鏡效果等；（5）熟練掌握制作動(dòng)畫(huà)的方法；（6）會(huì)在Dreamwever中加入Flash作品（明確使用文件的格式）。4、課堂作業(yè)：（1 ）在網(wǎng)頁(yè)中加入背景音樂(lè)，和視頻文件、MP3歌曲點(diǎn)播；（2）用Fireworks制作一個(gè)相框并應(yīng)用 于網(wǎng)頁(yè)中；（3）用Flash制作一個(gè)滾動(dòng)球并用播放 按鈕控制滾動(dòng)狀態(tài)。Iff庫(kù)1、CSS樣式的功能、定義和使用2、模板的功能、創(chuàng)建和使用3、庫(kù)的功能、創(chuàng)建和使用、2、 明確CSS樣式的含義和功能；2、熟練掌握用CSS面板來(lái)創(chuàng)建和應(yīng)用樣式來(lái)2 美化網(wǎng)頁(yè)的方法；3、會(huì)創(chuàng)建和保存網(wǎng)頁(yè)模板，并會(huì)利用模板創(chuàng) 建統(tǒng)一風(fēng)格的網(wǎng)頁(yè)；4、會(huì)創(chuàng)

15、建、編輯庫(kù)項(xiàng)目并利用庫(kù)項(xiàng)目更新網(wǎng) 頁(yè)。5、課堂作業(yè)：（1 ）設(shè)計(jì)一個(gè)模板并保存；將網(wǎng)頁(yè)微標(biāo) 和動(dòng)畫(huà)放入庫(kù)項(xiàng)目中以備使用。（2）倉(cāng)U 建一個(gè)CSS文件并設(shè)置一些樣式。動(dòng) 態(tài)交， 互簡(jiǎn) 單設(shè) 計(jì)十1、表單的功能2、表單對(duì)象的創(chuàng)建3、服務(wù)器的設(shè)置4、交互的腳本程序簡(jiǎn)單應(yīng)用4、 理解表單的功能；2、 熟練掌握插入常用的表單對(duì)象的方法（單2 行文本框、密碼框、多行文本框、復(fù)選框、 單選鈕、下拉菜單、文本域、圖像域、隱 藏域）；3、掌握設(shè)置各種對(duì)象的屬性；4、 會(huì)利用本地機(jī)器作為服務(wù)器，安裝IIS 并進(jìn)行相應(yīng)的設(shè)置；5、通過(guò)簡(jiǎn)單的留言板程序理解交互功能。0綜合實(shí)1訓(xùn)1、設(shè)計(jì)并制作一個(gè)內(nèi)容健康的主題網(wǎng)站， 嚴(yán)禁一切違法信息；2、寫(xiě)出網(wǎng)站設(shè)計(jì)的詳盡文檔說(shuō)明；3、整體網(wǎng)站風(fēng)格一致4、網(wǎng)站內(nèi)容豐富、素材精選、實(shí)用，有價(jià) 宀值；5、網(wǎng)頁(yè)美觀、生動(dòng)（多媒體效果）6、各種鏈接暢通；7、網(wǎng)站發(fā)布和瀏覽暢通，兼容性好，傳輸 速度快。02、 內(nèi)容要求：（任選下列之一）2（1 ）大學(xué)生活4（2 ）學(xué)習(xí)方法4（3 ）畢業(yè)設(shè)計(jì)和專