課程簡介
Course Introduction
本課程是計算機網(wǎng)絡技術專業(yè)的一門專業(yè)必修課程，是“網(wǎng)頁設計師”崗位的核心課程?！熬W(wǎng)頁設計師”崗位主要對應兩門課程，一是《網(wǎng)頁美工》，二是《網(wǎng)頁設計與制作》，該門課程是《網(wǎng)頁美工》的后續(xù)課程，在具備網(wǎng)頁動畫、圖片、頁面設計的基礎上，通過學習“DIV+CSS”、JavaScript，對網(wǎng)頁進行樣式設計與布局，獨立完成網(wǎng)站的設計與制作。其目的在于培養(yǎng)學生具備UI設計師的基本職業(yè)能力，使學生達到工信部相應的“網(wǎng)頁設計師”的基本要求。
教學大綱
Teaching Syllabus
《網(wǎng)頁布局規(guī)劃》課程標準
一、課程基本信息
課程代碼: 0403103 適用專業(yè): 計算機網(wǎng)絡技術
學 時 數(shù): 72 學 分:4
先修課程:網(wǎng)頁美工、計算機基礎 后續(xù)課程:《WEB 動態(tài)網(wǎng)站設計》
所屬崗位:網(wǎng)頁設計師 曾用課程名:無
修訂版本:2013年6月第1版 課標執(zhí)筆人:劉進軍
二、課程性質
本課程是計算機網(wǎng)絡技術專業(yè)的一門專業(yè)必修課程，是“網(wǎng)頁設計師”崗位的核心課程?！熬W(wǎng)頁設計師”崗位主要對應兩門課程，一是《網(wǎng)頁美工》，二是《網(wǎng)頁設計與制作》，該門課程是《網(wǎng)頁美工》的后續(xù)課程，在具備網(wǎng)頁動畫、圖片、頁面設計的基礎上，通過學習“DIV+CSS”、JavaScript，對網(wǎng)頁進行樣式設計與布局，獨立完成網(wǎng)站的設計與制作。其目的在于培養(yǎng)學生具備UI設計師的基本職業(yè)能力，使學生達到工信部相應的“網(wǎng)頁設計師”的基本要求。
三、課程教學目標
通過任務引領和項目實踐，使學生能熟練創(chuàng)建本地站點并能對網(wǎng)頁進行各種超鏈接，能運用DIV+CSS對網(wǎng)頁元素進行合理布局以及樣式的設計。通過大量實例對CSS進行深入淺出的分析，使學生掌握如何用CSS+DIV進行網(wǎng)頁布局，具備UI設計師的基本職業(yè)能力，能勝任UI設計師的工作，為學生發(fā)展成為網(wǎng)站設計師的職業(yè)能力奠定基礎。
（一）知識目標
1、了解Dreamweaver軟件的基本操作方法，熟悉常用的菜單；
2、了解WWW、HTTP、HTML、CSS的定義、概念和作用；
3、理解服務器、客戶端、瀏覽器的概念和作用；
4、了解CSS的基本語法；
5、會用CSS設置豐富的文字效果；
6、會用CSS設置圖片效果；
7、會用CSS設置網(wǎng)頁中的背景；
8、會用CSS設置表格與表單的樣式；
9、會用CSS設置頁面和瀏覽器的元素；
10、會用CSS制作實用的菜單；
11、掌握CSS濾鏡的應用；
12、理解CSS定位與DIV布局，掌握常用的CSS+DIV布局的方法；
13、能用CSS+DIV對進行頁面美化與布局；
14、理解JavaScrip中對象的定義及含義，掌握常用的頁面特殊效果的制作。
（二）職業(yè)能力目標
1.能合理的規(guī)劃商業(yè)網(wǎng)站；
2.能合理設計網(wǎng)頁的布局方案和美術設計方案；
3.能規(guī)范的編寫網(wǎng)頁策劃書；
4.能對網(wǎng)頁進行具有創(chuàng)意的美化；
5.能制作有創(chuàng)意的網(wǎng)頁特效；
6.能運用DIV+CSS對網(wǎng)頁進行優(yōu)化與布局；
7.能跟蹤和學習網(wǎng)頁設計與制作的新知識和新技術；
8.能應用互聯(lián)網(wǎng)資源發(fā)布網(wǎng)站；
9.能應用Dreamweaver維護網(wǎng)頁。
（二）職業(yè)素養(yǎng)目標
1.具有較強的網(wǎng)頁設計創(chuàng)意思維、藝術設計素質；
2.具有良好的工作態(tài)度、責任心，遵守職業(yè)道德；
3.具有團隊合作精神，有一定的抗壓能力；
4.具有較強的學習能力、吃苦耐勞精神；
5.具有較強的語言文字表達和溝通能力。
四、課程設計思路
本課程標準的設計以網(wǎng)絡技術專業(yè)學生的就業(yè)為導向，邀請行業(yè)專家與專業(yè)指導委員會的成員對網(wǎng)絡技術專業(yè)所涵蓋的職業(yè)群進行市場的調研與匯總，確定本專業(yè)的其中一個關鍵崗位為:網(wǎng)站設計師。本課程為該關鍵崗位下的崗位分支“網(wǎng)頁設計師”。
按照“以能力為本位、以實踐為主線、以項目為主體”的總體設計要求，該門課程徹底打破學科課程的設計思路，緊緊圍繞工作任務完成的需要來選擇和組織課程內容，突出工作任務與知識的聯(lián)系，讓學生在職業(yè)實踐活動的基礎上掌握知識，增強課程內容與職業(yè)能力要求的相關性，提高學生的就業(yè)能力。
學習程度用語主要使用“了解”、“理解”、“能”或“會”等用語來表述?！傲私狻庇糜诒硎鍪聦嵭灾R的學習程度，“理解”用于表述原理性知識的學習程度，“能”或“會”用于表述技能的學習程度。
五、教學實施建議與教學方法創(chuàng)新
該課程以真實項目為依據(jù)，對項目進行功能分解、歸納、提取工作任務，分析工作任務所涉及的相關知識，設計一系列能力要求不斷提升進階式學習任務，以學習任務為教學單元組織課程教學，將網(wǎng)頁各類語言的應用融入到各學習懷境中，模擬網(wǎng)站開發(fā)流程，設計以訓練學生為主、教師指導為輔的基于工作過程教學活動，培養(yǎng)學生崗位職業(yè)技能應用及自主學習能力，從而構建該課程的教學內容。
（一）教學實訓條件要求
要求所有電腦要安裝有Photoshop，Dreamweaver、Flash(或swishMax）軟件。并有用于查閱資料用的連接外網(wǎng)的網(wǎng)絡接口。
（二）教學方法與教學模式
整個教學都是圍繞網(wǎng)頁設計師崗位的職業(yè)能力與職業(yè)素養(yǎng)進行項目實施。整個課程采取從易到難的循序漸進方式，先是從簡單項目來掌握各個重要知識點，再通過5個綜合的完整網(wǎng)站項目，綜合運用所掌握的各種技巧、方法和技巧，達到鞏固的目的。
整個過程以工作過程為導向，以典型工作任務為基點，以綜合理論知識、職業(yè)操作技能和職業(yè)素養(yǎng)為一體的教學單元獲得。
以任務驅動教學的各個環(huán)節(jié)，邊做邊學，使學生通過完成工作任務教學單元的學習，來滿足網(wǎng)頁設計師崗位的職業(yè)技能和職業(yè)素養(yǎng)，為將來勝任該崗位打下良好的基礎。
在課程的實施上，采取“分段式”的教學模式。課程集中在連續(xù)的4周內完成，前三周以簡單項目為主，將知識點融入到項目中，后一周綜合項目實訓，模擬真實項目的整個過程，必須完成項目實施的6大步驟，需求分析、網(wǎng)站規(guī)劃、設計、實施、測試和評價。
六、教學內容與教學要求
表1教學實施情況表
任務名稱 | 子任務 | 學時 | 教學重點 | 教學目標 |
課程導入 | 課程介紹、網(wǎng)站賞析 | 2 | 1.介紹該課程的基本情況 2.介紹本課程的教學和學習方法 3.介紹學習本學程的學習目的，相應工作崗位，目前市場的需求情況，薪金待遇，職業(yè)能力考證情況等 4.介紹該課程的考核方式與方法 5、欣賞各類優(yōu)秀網(wǎng)站以及往屆學生優(yōu)秀作品 | 1、讓學生對該課程有個全方位的整體了解 如:為什么要學習該課程，知道該怎么學習該課程，學了以后有什么用途等 2.告訴學生本課程的學習方式，讓學生對網(wǎng)絡工程項目有初步了解 3、欣賞優(yōu)秀作品，提高學習興趣 |
任務1根據(jù)項目編寫網(wǎng)站策劃書 | 1-1通過與客戶的溝通，了解客戶的需求 1-2在需求的基礎上進行項目規(guī)劃 1-3編寫網(wǎng)站策劃書 | 4 | 知識: 1.了解網(wǎng)站開發(fā)的各類技術 2.能將客戶的需求轉化為項目規(guī)則 3.了解網(wǎng)頁布局中的基本要素 4.能設計網(wǎng)站框架草圖 技能: 1.會申請網(wǎng)站空間與注冊域名 2.會上傳網(wǎng)站
| 知識目標: 1.了解網(wǎng)站的種類與特點 2.了解網(wǎng)站開發(fā)的各類技術 3.了解網(wǎng)站空間申請的方法 技能目標: 1.與客戶溝通的時候能抓住客戶的需求 2.會編寫規(guī)劃的網(wǎng)站策劃書 素質目標: 1. 具備良好的溝通能力，遵守職業(yè)道德 2. 具有較強的學習能力、創(chuàng)新能力 |
任務2根據(jù)項目需求對網(wǎng)頁中的元素進行CSS的基本美化處理 | 2-1 CSS的基本語法 2-2 用CSS設置豐富的文字效果 2-3 用CSS設置圖片效果 2-4 用CSS設置網(wǎng)頁中的背景 | 12 | 知識: 1.CSS基本語法 2.CSS文字效果 3.CSS圖片效果 4.CSS背景 技能: 1.CSS的應用場合 2.CSS對文字的設置 3.圖片的邊框與對齊 4.網(wǎng)頁的背景色與背景圖片,以及多個背景圖片的應用 | 知識目標: 1.了解CSS的作用與基本語法 2.了解CSS的文字效果 3.了解CSS的圖片效果 4.理解CSS對背脊的處理 技能目標: 1.能在網(wǎng)頁中應用CSS 2.會利用CSS對網(wǎng)頁中的文字進行效果的設置 3.會用圖片樣式實現(xiàn)圖文混排 4.會實現(xiàn)網(wǎng)頁顏色與背景圖片的協(xié)調 素質目標: 1.扎實的專業(yè)英語功底 2.不怕困難，敢于嘗試，膽大心細 |
任務3 根據(jù)項目需求對網(wǎng)頁中的元素進行CSS的高級美化處理 | 3-1設置表格與表單的樣式 3-2用CSS設置頁面和瀏覽器的元素 3-3用CSS制作實用的菜單 3-4 CSS濾鏡的應用
| 12 | 知識: 1.CSS表格與表單的樣式 2.CSS的項目列表 3.超鏈接與鼠標特效 4.濾鏡樣式 技能: 1.CSS對表格與表單的改變 2.CSS對項目列表的修飾與應用 3. 動態(tài)超鏈接、按扭式超鏈接與浮雕式超鏈接 4.鼠標的特效
| 知識目標: 1.了解CSS的表格與表單的樣式 2.理解CSS的項目列表的變化與應用 3.了解CSS的表格與表單的樣式 4.理解CSS的項目列表的變化與應用 技能目標: 1.了解超鏈接與鼠標的效果 2.了解濾鏡的設置方法 3.能做各種超鏈接效果 5.能實現(xiàn)鼠標特效 素質目標: 1.考慮全面 2.仔細認真 |
任務4 根據(jù)項目續(xù)期對網(wǎng)頁進行CSS+DIV美化和布局 | 4-1 CSS+DIV布局解析 4-2 CSS+DIV布局方法 | 12 | 知識: 1、DIV與span標記的理解 2、盒子模型的概念和理解 3、元素的定位 4、CSS+DIV常用布局方法 技能: 1、會利用float、position實現(xiàn)元素的定位 2、會固定寬度且居中版式的布局方法 3、會左中右版式的布局 | 知識目標: 1、理解DIV與span標記 2、理解盒子模型的border、padding、magin 3、掌握元素定位的多種方法 4、熟練固定寬度且居中版式、左中右版式的布局方法 技能目標: 1、能用float、position進行元素的定位 2、能做固定寬度且居中、左中右版式的布局設計 素質目標: 1、考慮全面，敢于嘗試，膽大心細 2、仔細認真 |
任務5用DIV+CSS設計綜合信息類網(wǎng)站 | 5-1 藍色經(jīng)典 5-2 清明上河圖 5-3 交河故城 | 12 | 知識: 1、網(wǎng)站框架搭建 2、使用CSS+DIV設置網(wǎng)站頁面 3、一個HTML文檔隨機調用CSS文件 技能: 1、會搭建網(wǎng)站的框架 2、會使用DIV+CSS進行頁面的布局和制作 3、會使用隨機調用CSS文件的方法 | 知識目標: 1、掌握繪制網(wǎng)站框架圖的方法 2、掌握DIV+CSS頁面布局的方法 技能目標: 1、會繪制網(wǎng)站框架圖 2、能使用DIV+CSS進行頁面的布局與制作 目素質標: 1、有一定的綜合能力，考慮全面 2、良好的工作態(tài)度和責任心，耐心，且細心
|
任務6應用JavaScript與行為為各類網(wǎng)站添加網(wǎng)頁特效 | 6-1制作隨頁面上下滾動的廣告圖像 6-2彈出瀏覽器窗口的制作 6-3幻燈片廣告圖像的制作 6-4可翻轉圖像的制作 6-5日期與時間的制作 6-6制作網(wǎng)頁中可放大的圖像 6-7制作可隨意拖動的廣告圖像 | 12 | 知識: 1.JavaScript的基本語法 2.JavaScript調用的方式 3.JavaScript中對象的改變與引用 4.行為的添加與應用 5.代碼的重寫 技能: 1.JavaScript的調用方式 2.JavaScript的基本語法 3.JavaScript的修改 4.行為的添加與應用 | 知識目標: 1.了解JavaScript的基本語法與基本結構 2.熟悉JavaScript的調用方式 3.熟悉JavaScript中對象的改變與應用 4.理解行為的添加與應用 技能目標: 1.會調用JavaScript腳本 2.會改寫JavaScript腳本的調用 3.會調用行為實現(xiàn)特效 素質目標: 1.考慮問題周到全面 2.具備良好的工作態(tài)度、責任心和安全意識，遵守職業(yè)道德 |
任務7項目考核 | 過程考核總結 | 6 | 見文后考核要求 | 見文后考核要求 |
| 總學時 | 72 |
|
|
六、該課程的發(fā)展趨勢
本課程現(xiàn)有階段采用Dreamweaver CS4與Photoshop CS4兩個軟件學習網(wǎng)頁設計與制作，主要通過DIV+CSS來進行頁面的美化與布局，對于網(wǎng)頁的特效制作采用了JavaScript腳本，。隨著網(wǎng)絡技術的不步進步，本課程的內容要向XML與Ajax的方向進行改進。
七、教學耗材預算清單
教學所用的道具、耗材、小小獎品等，請例表指出，授課老師可向系申請，由教務員統(tǒng)一購買。請大家自行控制總費用，在可行的范圍內提出。
表3 教學耗材預算清單
編號 | 用于項目（任務） | 耗材 | 預算 |
1 | 隨機分組 | 撲克牌4副 | 10元 |
2 | 用于項目教學的小禮物 | 口香糖、棒棒糖等 | 150元 |
|
| 總計 | 160元 |
八、考核方式與評分標準
（1）作品選題:網(wǎng)頁設計與制作的選題
l 學校網(wǎng)站
l 系部網(wǎng)站（如計算機系、外語系、中文系、藝設系、生科系、體育部、教育部、思政部）
l 協(xié)會網(wǎng)站（如計算機協(xié)會）
l 公司網(wǎng)站（具體公司自選）
l 主題網(wǎng)站（如信息技術類、資料查詢類）
l 陽江特產(chǎn)網(wǎng)站
l 陽江五金特色網(wǎng)站
l 陽江旅游網(wǎng)站（結合陽江的所有旅游景點）
l 公司招聘網(wǎng)站（如陽江市人才招聘中心）
l 賓館網(wǎng)站（陽江的某個賓館比如:藍波灣酒店）
（2）作品設計與制作要求:開發(fā)的網(wǎng)站必須具有完整性，要有自己的特色。不可以抄襲和照搬某個站點，以及他人代做，一經(jīng)發(fā)現(xiàn)按零分處理；網(wǎng)站功能和內容要具體、充實、豐富，頁面數(shù)至少6個；網(wǎng)站中元素要包括:文字、圖像、聲音、動畫；
（3）網(wǎng)站開發(fā)中所使用的主要技術包括:
1）運用Div+CSS技術進行網(wǎng)頁美化與布局；
2）超級鏈接（一般鏈接、電子郵件、錨點等）的使用；
3）行為的運用、時間軸動畫、JavaScript特效等；
4）其他:按自己的喜好，添加的其他技術效果（鼓勵！
（4）、網(wǎng)站主題確定后，先填寫《課程設計報告》前半部分，對網(wǎng)頁整體布局和內容有一個初步的計劃，之后才能進行網(wǎng)站開發(fā)；
（5）網(wǎng)站開發(fā)完成后，填寫《課程設計報告》后半部分，與網(wǎng)站所有內容（站點）一
起提交。
（6）所有同學把所有作品交給學習委員，以班為單位刻一張光盤17周交給我。所有的課程設計報告以小組為單位打印。
（7）在15、16周用兩周的時間進行課程考核，在17周提交《課程設計報告》網(wǎng)站、并演示和演講你開發(fā)設計的網(wǎng)站，同時接受老師同學的提問；
（8）演示和講解網(wǎng)頁，每組不超過5分鐘；
（9）學生評委（由大家推選）按評分標準進行評分。
表4 評分標準
序號 | 評價點 | 參考要求 | 評價方式 | 評價標準 | 評價分值 | ||
優(yōu) | 良 | 及格 | |||||
１ | 策劃能力 | 網(wǎng)站策劃方案充爭滿足客戶的建站目的和內容要求。網(wǎng)站欄目規(guī)劃合理。方案表達清晰、直觀、詳實。方案具有可操作性 | 總結性評價 |
|
|
| 15% |
2 | 美工設計能力 | 美工風格設計符合網(wǎng)站策劃的主題定位、美術效果佳、整體感強、細節(jié)豐富、具有專業(yè)感。效果圖繪制技術運用得當，表現(xiàn)力強，具有質感 | 總結性評價 |
|
|
| 25% |
3 | 制作技術能力 | 網(wǎng)站站點管理得當，文件命名和存放路徑規(guī)范；排版技術運用得當，能完好的再現(xiàn)網(wǎng)頁美術設計效果；CSS應用技術運用得當，排版布局合理；網(wǎng)頁腳本交互功能運用得當；網(wǎng)站鏈接結構正確、合理、有效； | 總結性評價 |
|
|
| 20% |
5 | 網(wǎng)站優(yōu)化處理 | 網(wǎng)站的運行速度要適中；網(wǎng)站中DIV+CSS的應用 | 總結性評價 |
|
|
| 25% |
6 | 是否按計劃完成 | 具有計劃組織能力和團隊協(xié)作能力，有一定的抗壓能力；具有較強的學習能力、吃苦耐勞精神、創(chuàng)新能力；具有較強的語言文字表達和溝通能力 | 形成性評價 |
|
|
| 15% |
十、參考教材與參考資料
《精通CSS+DIV網(wǎng)頁樣式與布局》 曾順編 人民郵電出版社
《DIV+CSS網(wǎng)頁布局案例精粹》 王大遠 電子工業(yè)出版社
《網(wǎng)頁美工實例教程》 鄭耀濤編 高等教育出版社
《基于工作過程的網(wǎng)頁設計與制作教程》 張洪斌等 機械工業(yè)出版社
《精彩網(wǎng)頁設計:Dreamweaver商業(yè)網(wǎng)站篇》 劉陳辰編 電子工業(yè)出版社
專業(yè)負責人: 系主任:
審核時間: 年 月 日
