網(wǎng)頁設(shè)計(jì)課程

網(wǎng)頁設(shè)計(jì)課程

1、課程定位和課程設(shè)計(jì)

《網(wǎng)頁設(shè)計(jì)與制作》課程是高職電子商務(wù)專業(yè)的一門專業(yè)必修課程。本課程以圖形圖像處理為前導(dǎo)課程，本課程將從職業(yè)技術(shù)教育的特點(diǎn)出發(fā)，以培養(yǎng)學(xué)生實(shí)際動(dòng)手能力為目標(biāo)，使學(xué)生具備網(wǎng)頁制作、網(wǎng)站規(guī)劃與網(wǎng)站維護(hù)的專業(yè)能力和方法能力，以及培養(yǎng)學(xué)生的團(tuán)隊(duì)協(xié)作、溝通表達(dá)、工作責(zé)任心、職業(yè)規(guī)范和職業(yè)道德等綜合素質(zhì)和能力。作為專業(yè)的核心主干課程，使學(xué)生掌握商業(yè)網(wǎng)站的開發(fā)和流程，并能獨(dú)立進(jìn)行操作，在就業(yè)時(shí)能夠成為一個(gè)合格的人才。學(xué)生畢業(yè)后可勝任網(wǎng)站管理員、網(wǎng)頁設(shè)計(jì)師、網(wǎng)頁美工師等工作崗位。

2、課程目標(biāo)

本課程以學(xué)生能夠網(wǎng)頁網(wǎng)站開發(fā)與維護(hù)的實(shí)際工作能力為學(xué)習(xí)目標(biāo)，使學(xué)生具備計(jì)算機(jī)及其它相關(guān)專業(yè)課學(xué)習(xí)和應(yīng)用中所必需的網(wǎng)頁制作與網(wǎng)站設(shè)計(jì)的基本知識(shí)和基本技能，形成解決實(shí)際應(yīng)用問題的方法能力，為以后的學(xué)習(xí)動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)課程打下基礎(chǔ)。

3、素質(zhì)目標(biāo)

(1) 培養(yǎng)具有較強(qiáng)的網(wǎng)頁設(shè)計(jì)創(chuàng)意思維、藝術(shù)設(shè)計(jì)素質(zhì);

(2) 培養(yǎng)學(xué)生在學(xué)習(xí)過程中解決困難的能力;

(3) 培養(yǎng)學(xué)生在學(xué)習(xí)過程中培養(yǎng)興趣的能力，提高工作、學(xué)習(xí)的主動(dòng)性;

(4) 培養(yǎng)學(xué)生理論聯(lián)系實(shí)際的工作和學(xué)生方法;

(5) 培養(yǎng)具有高度責(zé)任心和良好的團(tuán)隊(duì)合作精神;

(6) 具有社會(huì)責(zé)任感。

4、知識(shí)目標(biāo)

(1) 了解WEB站點(diǎn)的工作原理;

(2) 理解Internet、WWW、HTTP、HTML的定義，計(jì)算機(jī)網(wǎng)絡(luò)概念和作用;

(3) 了解服務(wù)器、客戶端、瀏覽器的概念和作用;

(4) 掌握常規(guī)網(wǎng)站的規(guī)劃及流程;

(5) 熟練掌握HTML語言中各種標(biāo)記符的運(yùn)用能力;

(6) 熟練掌握Dreamweaver應(yīng)用軟件的使用;

(7) 理解網(wǎng)頁中腳本語言的使用方法;

(8) 熟練開發(fā)常規(guī)靜態(tài)網(wǎng)站。

5、能力目標(biāo)

(1) 熟練掌握Dreamweaver應(yīng)用軟件制作網(wǎng)站及網(wǎng)頁;

(2) 熟練掌握使用絕對(duì)和相對(duì)URL，創(chuàng)建超鏈接，圖像鏈接;

(3) 掌握在網(wǎng)頁中添加CSS的方法;

(4) 培養(yǎng)學(xué)生設(shè)計(jì)、制作和維護(hù)動(dòng)態(tài)網(wǎng)站。

(5) 培養(yǎng)學(xué)生搜集資料、閱讀資料和利用資料的能力;

(6) 能獨(dú)立制定、實(shí)施工作計(jì)劃。

(7) 具備檢查、判斷能力;

(8) 具備簡(jiǎn)單的需求市場(chǎng)分析能力。

6、課程內(nèi)容與教學(xué)要求

第一章：個(gè)人網(wǎng)站的制作

【教學(xué)內(nèi)容】

網(wǎng)絡(luò)相關(guān)概念、網(wǎng)站需求分析、風(fēng)格定位與網(wǎng)站欣賞、草圖設(shè)計(jì)、圖像相關(guān)概念、Photoshop制作網(wǎng)頁平面效果圖、 HTML語言簡(jiǎn)介、HTML語言的基本結(jié)構(gòu)、HTML常用標(biāo)記、Css樣式表的應(yīng)用。

【教學(xué)重點(diǎn)】

項(xiàng)目基礎(chǔ)與流程設(shè)計(jì)，個(gè)人網(wǎng)站效果圖設(shè)計(jì)與切片，HTML編輯靜態(tài)頁面，個(gè)人網(wǎng)站CSS樣式表設(shè)計(jì)，網(wǎng)站測(cè)試。

【教學(xué)要求】

了解網(wǎng)站項(xiàng)目建設(shè)流程。

掌握個(gè)人網(wǎng)站效果圖設(shè)計(jì)。

熟練掌握HTML編寫靜態(tài)頁面的方法。

第二章：網(wǎng)頁設(shè)計(jì)與制作精品課程網(wǎng)站建設(shè)

【教學(xué)內(nèi)容】

Photoshop的綜合運(yùn)用， Dreamweaver的認(rèn)識(shí)與基本使用方法、Dreamweaver中站點(diǎn)的建立與管理，插入文本、圖像、表格、模板等資源，網(wǎng)絡(luò)空間的申請(qǐng)與與域名的申、網(wǎng)站文件的上傳。

【教學(xué)重點(diǎn)】

精品課程網(wǎng)站的策劃方案，主頁面的設(shè)計(jì)與制作，模板頁的制作，效果圖的切片與導(dǎo)出，網(wǎng)站后期編輯，網(wǎng)站的發(fā)布與測(cè)試。

【教學(xué)要求】

了解網(wǎng)站建設(shè)的流程、需求分析。

理解網(wǎng)站色彩搭配的原則。

掌握網(wǎng)站的建設(shè)流程及網(wǎng)頁效果圖的制作。

能夠利用Dreamweaver軟件設(shè)計(jì)精品課程網(wǎng)站。

第三章：企業(yè)類網(wǎng)站建設(shè)

【教學(xué)內(nèi)容】

Photoshop效果圖的制作， Flash動(dòng)畫的制作，Dreamweaver中框架、表單、圖層、行為、時(shí)間軸、簡(jiǎn)單腳本語言的制作、模板的使用，Dreamweaver的綜合使用。

【教學(xué)重點(diǎn)】

商務(wù)類網(wǎng)站的前期策劃，效果圖的設(shè)計(jì)、切片與動(dòng)畫的設(shè)計(jì)，網(wǎng)站編輯與動(dòng)畫設(shè)計(jì)，網(wǎng)頁的布局及后期制作。

【教學(xué)要求】

了解企業(yè)類網(wǎng)站的策劃過程。

進(jìn)一步理解Dreamweaver建立網(wǎng)站及網(wǎng)頁的流程。

掌握網(wǎng)站動(dòng)畫的設(shè)計(jì)與制作。

掌握網(wǎng)站的后期制作與編輯，并能夠調(diào)試。

第四章：自主選題進(jìn)行網(wǎng)站建設(shè)

【教學(xué)內(nèi)容】

Photoshop效果圖的制作， Flash動(dòng)畫的制作，HTML語言的綜合運(yùn)用，Dreamweaver的綜合運(yùn)用。

【教學(xué)重點(diǎn)】

網(wǎng)站的.前期規(guī)劃(文字、圖片等素材的收集與整理及使用)，網(wǎng)站效果圖的制作，網(wǎng)站的建立與網(wǎng)頁的制作與編輯，網(wǎng)站的發(fā)布五測(cè)試。

【教學(xué)要求】

了解整個(gè)網(wǎng)站的建設(shè)流程。

理解制作工具(dreamweaver)的使用方法

掌握網(wǎng)站的制作過程及綜合運(yùn)用方法。

能夠獨(dú)立并完美地完成一個(gè)完整網(wǎng)站的建設(shè)工作。

7.教學(xué)模式、教學(xué)方法與手段

1、注意教學(xué)方法的靈活性，可組織學(xué)生案例教學(xué)，進(jìn)行討論、問題教學(xué)、閱讀指導(dǎo)等。全部在實(shí)訓(xùn)室授課，提高學(xué)生的實(shí)踐操作能力。

2、充分發(fā)揮學(xué)生的學(xué)習(xí)主觀能動(dòng)性。在本課程的教學(xué)過程中，注意訓(xùn)練學(xué)生的操作動(dòng)手能力，引導(dǎo)學(xué)生理論聯(lián)系實(shí)際，應(yīng)用課本中的理論知識(shí)來解決實(shí)際操作問題。本課程的學(xué)習(xí)過程全部是基于生產(chǎn)過程中的教學(xué)過程。

8.課程實(shí)施課時(shí)安排

(一)課時(shí)安排與教學(xué)建議

一般情況下，每周四課時(shí)，約18周，合72課時(shí)。具體課時(shí)安排如下：

一、考核方式

本課程為考試科目，期末考試總分100分，包括以下三部分成績(jī)：

建立過程考核與結(jié)果考核相結(jié)合的方法，強(qiáng)調(diào)過程考核的重要性。過程考核占60分，結(jié)果考核占40分。

1、過程考核

(1)自評(píng)、小組評(píng)價(jià)和教師評(píng)價(jià)相結(jié)合;采用績(jī)效考核，首先學(xué)生進(jìn)行自評(píng)，然后再進(jìn)行小組評(píng)價(jià)和教師評(píng)價(jià)。

(2)考核點(diǎn)占分權(quán)重：個(gè)人作業(yè)完成情況(10%);實(shí)踐操作技能(30%);學(xué)習(xí)態(tài)度(10%);團(tuán)隊(duì)合作精神(10%)。

2、結(jié)果考核

(1)自評(píng)、小組評(píng)價(jià)和教師評(píng)價(jià)相結(jié)合：對(duì)項(xiàng)目完成進(jìn)行結(jié)果性考核，首先學(xué)生進(jìn)行自評(píng)，然后再進(jìn)行小組評(píng)價(jià)和教師評(píng)價(jià)。

(2)作品考核：項(xiàng)目結(jié)束要求每個(gè)小組提交全部作品及資料，根據(jù)完成情況進(jìn)行考核。

(3)小組答辯：小組答辯實(shí)際上是各個(gè)項(xiàng)目小組對(duì)本小組學(xué)習(xí)情況及成果的總結(jié)、匯總和展示。小組答辯的內(nèi)容包括小組組織過程、工作程序和步驟、學(xué)習(xí)成果與收獲、取得的經(jīng)驗(yàn)與教訓(xùn)、回答教師提問等。該項(xiàng)由老師給分。

(4)項(xiàng)目報(bào)告：報(bào)告包括項(xiàng)目描述、主要任務(wù)、設(shè)計(jì)流程、崗位技能及職責(zé)，每天的過程記錄，以及項(xiàng)目完成后的個(gè)人總結(jié)等，每人提交一份，字?jǐn)?shù)約2000字左右。該項(xiàng)由教師給分。

;

網(wǎng)頁設(shè)計(jì)與制作教程的人民郵電出版社教材

書　名　網(wǎng)頁設(shè)計(jì)與制作教程

叢 書 名　21世紀(jì)高等學(xué)校計(jì)算機(jī)規(guī)劃教材

標(biāo)準(zhǔn)書號(hào)　ISBN 978-7-115-24673-8

編目分類　TP393.092

作　者　楊帆 嚴(yán)耀偉 王方 編著

責(zé)任編輯　鄒文波

開　本　16 開

印　張　16.5

字　數(shù)　432 千字

頁　數(shù)　256 頁

裝　幀　平裝

版　次　第1版第1次

初版時(shí)間　2011年2月

本 印 次　2011年2月

首 印 數(shù)　-- 冊(cè)

定　價(jià)　29.60 元 本書是按照教育部高等學(xué)校計(jì)算機(jī)基礎(chǔ)課程教學(xué)指導(dǎo)委員會(huì)提出的《關(guān)于進(jìn)一步加強(qiáng)高校計(jì)算機(jī)基礎(chǔ)教學(xué)的意見》中有關(guān)“網(wǎng)頁設(shè)計(jì)基礎(chǔ)”課程的教學(xué)要求及人才培養(yǎng)的新要求，結(jié)合獨(dú)立院校學(xué)生特點(diǎn)組織編寫的。全書共分8章，書中系統(tǒng)地介紹網(wǎng)頁的構(gòu)思、規(guī)劃、制作和網(wǎng)站建設(shè)的全過程。主要內(nèi)容包括：網(wǎng)頁設(shè)計(jì)基礎(chǔ)知識(shí)、Dreamweaver基礎(chǔ)、網(wǎng)頁色彩和布局的控制、制作Web動(dòng)畫——Flash、網(wǎng)頁常見應(yīng)用功能設(shè)計(jì)、網(wǎng)站發(fā)布與維護(hù)基礎(chǔ)知識(shí)、網(wǎng)站設(shè)計(jì)案例和動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)介紹。

本書內(nèi)容全面，構(gòu)思清晰，結(jié)構(gòu)合理，注重實(shí)踐能力的培養(yǎng)，實(shí)用性和可操作性較強(qiáng)。各章附有適量的習(xí)題，引導(dǎo)讀者學(xué)習(xí)和掌握各章節(jié)的知識(shí)，便于自學(xué)。

本書可作為高等學(xué)校非計(jì)算機(jī)專業(yè)“網(wǎng)頁設(shè)計(jì)與制作”課程的教材，也可供網(wǎng)頁設(shè)計(jì)愛好者學(xué)習(xí)參考。 第1章　網(wǎng)頁設(shè)計(jì)基礎(chǔ)知識(shí)　1

1.1　網(wǎng)絡(luò)基礎(chǔ)知識(shí)　1

1.1.1　網(wǎng)絡(luò)知識(shí)簡(jiǎn)介　1

1.1.2　Internet　3

1.1.3　TCP/TP　5

1.1.4　IP地址　5

1.1.5　瀏覽器基本操作　7

1.2　網(wǎng)頁網(wǎng)站基礎(chǔ)知識(shí)　9

1.2.1　網(wǎng)頁　9

1.2.2　網(wǎng)頁中的常見元素　11

1.2.3　網(wǎng)站　12

1.2.4　HTML　12

1.2.5　網(wǎng)站服務(wù)器工作的基本原理　13

1.2.6　網(wǎng)頁設(shè)計(jì)制作常用的工具軟件　15

1.2.7　網(wǎng)頁設(shè)計(jì)制作流程　16

習(xí)題　19

第2章　Dreamweaver基礎(chǔ)　20

2.1　Dreamweaver基本操作　20

2.1.1　Dreamweaver的工作環(huán)境　20

2.1.2　Dreamweaver的簡(jiǎn)單操作　30

2.1.3　Dreamweaver的視圖模式　36

2.1.4　在網(wǎng)頁中添加內(nèi)容與超級(jí)鏈接　37

2.1.5　網(wǎng)頁設(shè)計(jì)結(jié)果測(cè)試　41

2.2　添加文本　43

2.2.1　在Dreamweaver中添加文本　43

2.2.2　文本格式設(shè)置　44

2.2.3　文本相關(guān)常用html標(biāo)記　44

2.3　添加圖像　46

2.3.1　在網(wǎng)頁中添加各種圖像　46

2.3.2　圖像格式設(shè)置　48

2.3.3　圖像標(biāo)記及其屬性　49

2.3.4　使用Dreamweaver制作網(wǎng)絡(luò)相冊(cè)　52

2.4　添加多媒體　53

2.4.1　在網(wǎng)頁中添加視頻媒體　54

2.4.2　在網(wǎng)頁中添加音頻媒體　55

2.4.3　在網(wǎng)頁中添加動(dòng)畫　58

2.4.4　媒體播放控制　59

2.4.5　多媒體標(biāo)記介紹　60

2.5　超級(jí)鏈接應(yīng)用　61

2.5.1　鏈接到各種對(duì)象　67

2.5.2　圖像熱區(qū)設(shè)置　78

2.5.3　鏈接的創(chuàng)建與管理　81

2.5.4　跳轉(zhuǎn)菜單　81

2.5.5　導(dǎo)航條　82

2.5.6　查找斷開的、外部的和孤立的鏈接　84

2.5.7　修復(fù)斷開的鏈接　85

2.5.8　將JavaScript腳本附加到鏈接上　86

2.6　表單應(yīng)用基礎(chǔ)　86

2.6.1　創(chuàng)建表單對(duì)象　86

2.6.2　創(chuàng)建文本域　87

2.6.3　創(chuàng)建復(fù)選框和單選按鈕　88

2.6.4　建立列表和菜單　88

2.6.5　創(chuàng)建跳轉(zhuǎn)菜單　89

2.6.6　創(chuàng)建文件域和圖像域　89

2.6.7　常見表單元素使用　90

2.6.8　表單標(biāo)記介紹　90

2.6.9　表單應(yīng)用舉例　92

習(xí)題　93

第3章　網(wǎng)頁色彩和布局的控制　94

3.1　表格應(yīng)用　94

3.1.1　表格基礎(chǔ)　95

3.1.2　修飾網(wǎng)頁各種元素　99

3.2　框架的規(guī)劃與建立　101

3.2.1　框架與表格　101

3.2.2　規(guī)劃框架　102

3.2.3　創(chuàng)建框架　102

3.2.4　框架的操作　104

3.2.5　Spry框架　105

3.3　層的運(yùn)用　106

3.3.1　創(chuàng)建層　107

3.3.2　層的操作　108

3.3.3　層與表格的關(guān)系　111

3.4　CSS樣式布局基礎(chǔ)和應(yīng)用　112

3.4.1　CSS樣式表概述　112

3.4.2　CSS樣式面板　114

3.4.3　CSS樣式的創(chuàng)建　116

3.4.4　應(yīng)用自定義的CSS樣式　123

3.4.5　附加外部CSS樣式表　124

3.4.6　導(dǎo)出外部CSS樣式表　124

3.4.7　編輯CSS樣式表　124

3.4.8　CSS樣式的優(yōu)先順序　125

3.4.9　Spry框架中的CSS設(shè)置　126

3.5　各種樣式表元素應(yīng)用　130

3.5.1　文字樣式　130

3.5.2　邊框樣式　131

3.5.3　顏色樣式　132

3.6　網(wǎng)頁色彩搭配基礎(chǔ)知識(shí)　132

3.6.1　色彩基礎(chǔ)知識(shí)　133

3.6.2　網(wǎng)頁色彩搭配的原則(配色方案)　137

3.6.3　網(wǎng)站中的色彩應(yīng)用　147

3.7　網(wǎng)頁布局控制　153

3.7.1　常見的網(wǎng)頁布局　153

3.7.2　網(wǎng)頁布局補(bǔ)遺　156

習(xí)題　156

第4章　制作Web動(dòng)畫——Flash　159

4.1　Flash概述　159

4.1.1　Flash的發(fā)展　159

4.1.2　Flash的功能　160

4.1.3　Flash的發(fā)展趨勢(shì)　161

4.1.4　Flash的工作界面　162

4.1.5　Flash“工具”面板　163

4.1.6　Flash常用對(duì)象面板　164

4.2　制作一個(gè)Flash　165

4.2.1　制作Flash文檔　165

4.2.2　發(fā)布Flash文檔　168

4.3　Flash基礎(chǔ)　168

4.3.1　使用Flash資源　168

4.3.2　元件的創(chuàng)建　169

4.3.3　庫面板中使用文件夾　170

4.3.4　實(shí)例的使用　170

4.3.5　Flash繪圖　170

4.3.6　顏色處理　173

4.4　Flash動(dòng)畫　177

4.4.1　幀和關(guān)鍵幀　177

4.4.2　時(shí)間軸的功能　178

4.4.3　圖層和文件夾　178

4.4.4　繪圖紙按鈕的功能　179

4.4.5　幀的操作　180

4.4.6　形狀補(bǔ)間和動(dòng)畫補(bǔ)間　180

4.4.7　引導(dǎo)層的使用　181

4.4.8　遮罩層的使用　182

4.4.9　多場(chǎng)景動(dòng)畫　182

習(xí)題　183

第5章　網(wǎng)頁常見應(yīng)用功能設(shè)計(jì)　184

5.1　菜單設(shè)計(jì)　184

5.1.1　菜單設(shè)計(jì)分析　184

5.1.2　使用Dreamweaver設(shè)計(jì)菜單　186

5.2　浮動(dòng)標(biāo)簽設(shè)計(jì)　188

5.2.1　浮動(dòng)標(biāo)簽應(yīng)用舉例　188

5.2.2　Dreamweaver浮動(dòng)標(biāo)簽設(shè)計(jì)　189

5.3　網(wǎng)站導(dǎo)航設(shè)計(jì)　190

5.3.1　導(dǎo)航案例分析　190

5.3.2　導(dǎo)航設(shè)計(jì)　190

5.4　網(wǎng)站模板設(shè)計(jì)　193

5.4.1　模板應(yīng)用舉例　193

5.4.2　Dreamweaver設(shè)計(jì)模板　194

5.5　其他效果設(shè)計(jì)　196

5.5.1　彈出窗口　196

5.5.2　狀態(tài)欄顯示文本　197

5.5.3　頁面自動(dòng)跳轉(zhuǎn)　198

5.5.4　彈出提示信息　200

5.5.5　圖片移動(dòng)效果　201

習(xí)題　203

第6章　網(wǎng)站發(fā)布與維護(hù)基礎(chǔ)知識(shí)　205

6.1　發(fā)布網(wǎng)站到IIS　205

6.1.1　發(fā)布網(wǎng)站內(nèi)容　205

6.1.2　測(cè)試網(wǎng)站　207

6.2　站點(diǎn)維護(hù)基礎(chǔ)知識(shí)　208

6.2.1　停止啟動(dòng)服務(wù)器　208

6.2.2　站點(diǎn)基本配置　208

習(xí)題　212

第7章　網(wǎng)站設(shè)計(jì)案例　213

7.1　網(wǎng)站系統(tǒng)設(shè)計(jì)　213

7.1.1　網(wǎng)站設(shè)計(jì)的基本過程　213

7.1.2　網(wǎng)站設(shè)計(jì)的基本原則　214

7.2　網(wǎng)站內(nèi)容設(shè)計(jì)　215

7.2.1　網(wǎng)頁外觀設(shè)計(jì)　216

7.2.2　網(wǎng)站制作流程簡(jiǎn)介　219

7.3　個(gè)人網(wǎng)站設(shè)計(jì)實(shí)例　224

7.3.1　首頁設(shè)計(jì)　224

7.3.2　其他頁設(shè)計(jì)　235

7.3.3　網(wǎng)站整合　239

7.4　發(fā)布站點(diǎn)　241

7.4.1　申請(qǐng)空間　242

7.4.2　發(fā)布內(nèi)容　242

7.5　網(wǎng)站的管理和維護(hù)　244

習(xí)題　244

第8章　動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)介紹　245

8.1　動(dòng)態(tài)網(wǎng)頁與靜態(tài)網(wǎng)頁　245

8.2　ASP基礎(chǔ)知識(shí)與應(yīng)用　246

8.2.1　ASP介紹　246

8.2.2　ASP基礎(chǔ)知識(shí)　247

8.2.3　設(shè)計(jì)一個(gè)簡(jiǎn)單的ASP網(wǎng)頁　249

8.3　常見其他動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)技術(shù)介紹　252

8.3.1　PHP　252

8.3.2　JSP　253

8.4　ASP.net網(wǎng)站設(shè)計(jì)　254

習(xí)題　256

網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè)

你想自學(xué)還是想找人幫忙設(shè)計(jì)，如果想自學(xué)建議你去51自學(xué)網(wǎng)里面看看。里面有軟件和視頻教程，非常不錯(cuò)、