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