網頁設計與制作實訓項目大綱及實訓方案

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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