《網頁設計與制作》教案

網頁設計與制作教案

課程名稱網頁設計與制作

課程類型

教材名稱：網頁設計與制作實用教程主編：艷麗

使用教材

:高等教育日期：2011年5月

學時分配共64學時，其中理論36學時，實踐28學時。

課

程

教該課程是三年制高職高專電子商務專業(yè)的職能課程，目標是讓學

學生掌握網頁設計的基本概念，學會使用常用的網頁設計工具和相關網

目頁美工軟件，能夠設計制作常見的靜態(tài)網頁。它要以計算機基礎、計

的算機網絡技術課程的學習為基礎，也是進一步學習網絡編輯、建設與

與管理課程的基礎。

要

,求

主要參考喜清，海濤《網頁設計與制作》工業(yè)大學，2010.9

書目振業(yè)《網頁設計與制作》高等教育，2009.3

課程教案（Nfl：l）

授課容網頁制作基礎知識

課型13理論口實踐授課學時2

教學方法

講授法

與手段

本次課程將講授網頁制作的基本知識，使學生了解到什么是網頁，網頁制作涉

教學目的

及到哪些工具、網頁與有什么區(qū)別，網頁與普通的文檔有什么區(qū)別等。通過講

授也將使學生了解到網頁的組成，網頁語言的種類及各自特點；動態(tài)網頁與靜

與要求

態(tài)網頁的定義；Internet信息發(fā)布的原理等等容。

教學重點：

1?Internet信息訪問原理。

2,什么是網頁？

教學重點

（1）網頁容組成；

（2）網頁編寫語言種類及特點。

與難點

3,Dreamweaver8功能簡介。

教學難點：

Internet信息訪問原理；網頁編寫語言種類及特點。

—、基礎知識

1?網頁簡介（15分鐘左右）

網頁：是組成WW（WorldWideWeb：萬維網）的基本元素，也被稱為頁

面或Web頁。不同的網頁通過超聯(lián)系在一起，構成了WWW縱橫交織結構。

:就是一個相互的網頁的集合，它們可以共享。大的頁面數(shù)量多達幾十萬，

教學過程

甚至上百萬頁，小的個人也可以只包含數(shù)個頁面。

主頁：是中的一個特殊網頁，它是在WWW上進入的第一個網頁，其中包含指向

設計

其他網頁的超，通常主頁的名稱是固定的。

2-Internet簡介（5分鐘左右）

3?了解常用的網頁制作工具（10分鐘左右）

皮口：Dreamweaver和FrontPage

4?了解美化網頁的主要工具（10分鐘左右）

（1）圖像欠理軟件：Photoshop、Fireworks、CorelDRAW等

（2）動畫制作工具：Flash

5?了解網頁中的腳本語言（10分鐘左右）

如：VBScript'JavaScript

6?了解服務器端主要技術（10分鐘左右）

服務器端腳本語言：ASP、JSP、PHP、CGI等。它們的形式與HTML有些類似，

但功能更加強大，能夠實現(xiàn)許多功能。

二、了解建立的基本流程（10分鐘左右）

1?確定主題

2?搜集資料

3?規(guī)劃

4?選擇合適的制作工具

5?制作網頁

6?上傳測試

7?推廣宣傳

8?維護更新

三、DreamweaverCS3基礎（20分鐘左右）

11Dreamweaver的發(fā)展史

21DreamweaverCS3的新功能

31DreamweaverCS3工作區(qū)簡介

4?網頁文檔的基本操作

作業(yè)/思考題：

1?列舉你所了解的網頁設計的常用工具和美化網頁的主要工具

2?建立的基本流程有哪些步驟？請歸納總結。

3?利用網上資源，在百度中搜索“網頁配色方案”關鍵詞，下載相關的“網頁配色方案”

文■件,指導以后網頁設計中的配色問題。

教學后記：

第一節(jié)課，應首先介紹發(fā)展的前景）重點分解Dreamweaver和其他軟件的區(qū)別，提出利用網

絡傳播信息，并由此講述網絡發(fā)展給網頁帶來的市場。通過兩節(jié)課的講授，感覺到學生能對

本課程產生比較大的興趣！

課程教案（N0：2）

授課容站點的創(chuàng)建與管理

課型國理論口實踐授課學時2

教學方法

講授法

與手段

教學目的

本次課程將講授站點的創(chuàng)建與管理知識，使學生了解到什么是站點，站點的種

類，站點的作用，站點文件的管理。站點的發(fā)布及網頁的預覽。

與要求

教學重點：

1?站點的創(chuàng)建；

教學重點2?站點文件的管理；

3?站點文件的預覽；

與難點4?站點地圖的生成。

教學難點：

測試利用服務器技術的站點；站點地圖創(chuàng)建的條件；遠程站點的創(chuàng)建。

一、站點（10分鐘左右）

也稱“”，用來定位上的所有文件，是一系列通過超而相互聯(lián)系的網頁集合。

建立首先要在本地計算機上構建本地站點來管理站點中的文檔喇作網頁＞

測試完畢后1上傳到Internet服務器。

二、新建本地站點（20分鐘左右）

1?站點菜單-＞新建站點

2?站點菜單-＞管理站點-＞新建

教學過程3?建立站點注意問題：

（1）用文件夾進行分類存儲：如網頁文件存放在html文件夾中，圖像文

設計件存放在images文件夾中。嵌套文件夾的層數(shù)不要太多，最多不超過三層，

否則超時會出錯。

（2）文件命名要合理：建議全部使用小寫的文件名稱，不要用中文文件名。

文件夾的名稱最好用顧名思義的英文，方便以后修改維護。文件名也要符

合規(guī)，比如首頁一般命名為index,html或default,html。

三、文件的管理（20分鐘左右）

1?文件的創(chuàng)建（鼠標右擊站點-＞新建文件；文件菜單-＞新建；ctrl+N）；

2?文件的選擇（鼠標點擊單選；按Ctrl或shift鍵輔助多選）；

3?打開和編輯文件（雙擊）；

4?刪除文件；

5?重命名文件（右擊文件；F2）；

6?保存及另存為文件：ctrl+s/fl2；或通過文件菜單；

7?文件的復制，移動,關閉：ctrl+c.ctrl+x，ctrl+w；

8?消除文件只讀屬性：右擊文件選擇；

9?將文件設為首頁：和制作站點地圖有關；

10?給文件添加設計備注：備注文件的存放位置和文件的擴展名。

四、頁面預覽（F12鍵）（20分鐘左右）

1?文件菜單-＞在瀏覽器中預覽-＞選擇瀏覽器

2?工具欄-＞地球土標-＞選擇瀏覽器：此時可通過“添加瀏覽器”選項來增

加更多的瀏覽器

3?編輯菜單-＞首選參數(shù)-＞在瀏覽器中預覽-＞不選”使用臨時文件預覽”

五、站點的編輯和管理（20分鐘左右）

1?站點管理器：文件面板（窗口菜單或F8鍵）

2?打開現(xiàn)有本地站點

3,查看本地和遠程的文件和地圖

4?調整窗口視圖

5?保存站點地圖

6?重建站點緩存

7?站點編輯，復制，刪除，導人與導出：站點菜單-＞管理站點

作業(yè)/思考題：

1?在制作網頁前為什么要首先建立站點？

2?定義本地站點的含義是什么？

3?建立站點應該注意的問題？

教學后記：

的站點，好似一個班級，應該首先為班級起一個名稱，并配備一個班主任，然后再陸續(xù)的加

入一些學生。這其實就是我們站點創(chuàng)建時應該為站點起一個名字，并設置一個首頁，增加更

多的超。

課程教案(N0：3)

授課容了解Dreamweaver的界面及站點的建立

課型口理論因實踐授課學時2

教學方法

講授法、演示法

與手段

教學目的

利用DreamweaverCS3熟練創(chuàng)建本地.遠程站點。并掌握Dreamweaver的基本

操作。

與要求

教學重點：

1?站點的創(chuàng)建；

教學重點2?站點文件的管理；

3?站點文件的預覽；

與難點4?站點地圖的生成。

教學難點：

站點地圖創(chuàng)建的條件；遠程站點的創(chuàng)建。

1.本地站點的創(chuàng)建

(1)運行軟件

(2)站點菜單-＞新建站點

(3)遠程服務器連接選擇為無

2.遠程站點的創(chuàng)建

(1)運行軟件

(2)站點菜單-＞新建站點

教學過程(3)遠程服務器連接選擇為FTP

3.IIS的安裝

設計(1)我的電腦-＞控制面板-＞添加和刪除程序

(2)選擇添加windows組件

(3)勾選Intemet信息服務，更新安裝

4.創(chuàng)建利用服務器技術的站點

(1)運行軟件

(2)站點菜單-＞新建站點

(3)是否利用服務器技術設置為是

(4)允許IIS，將默認站點的主目錄設置為站點所對應的文件夾

(5)設置服務器站點的測試服務器為localhost

5.站點文件的管理

站點文件的創(chuàng)建.編輯及預覽

6.管理站點

(1)站點菜單->新建站點

(2)實現(xiàn)對站點創(chuàng)建.刪除.編輯

(3)導出并重新導入站點

\ib?\Br?aa.?”?r1X2004、心網jKift計\S.T*兩爰看東線\l"d?a?、.]

文件9堀倦⑴杳著9ftAH)［岑改尊)文本①命令?站點⑤)?□?)制物Q0

▼處入常用布局裝單文本m.2P應用程序”?小元案收族天后?css

0日息嚴目理?卷。司SQ|0?51

費現(xiàn)代礴片IU

二11本增視的二J

檢CI86a*10

?菇點-f?r?l0(\>b?)

oDr??.?kvtr?X2tXM動寄網貢設i+

由已51道藝本

F匕5J0人力資j5管理景統(tǒng)

ao5.2在校亞系戰(zhàn)

田匕5.4國書查逾弟統(tǒng)

王匕56在發(fā)論城

日二_57輒期t布系找

.OC?t>n?cti4&s

出已Dktkbas*

由Q

用已S??rc?

regTf1"”

浮已明即程

'Aid-dxi?v.cp

8'?44succ.5

JiNtx.tsp

￡12dty.c?

aJsbc?d?t4ilesp

X5.9T*Xft

熨字課件演示

0

口IMT22

囹

▼屬性

?]人機界面設計原IN.ppt

格式僑3作式伍Fcss|Bi/iKfiaia|啦|3噂

?]的字媒體設計ppt

種時字體5大小歷習「町

口gi閆好心|閨目標?二?認知心皆竽概論”>，

I二刁單元格水平|\”二JR不接行「一而=Q」

|口口朝西直畫二三］?±1________________I2J

酒it室即斗，|I眸口.匚廠.UI個車跑項目被遑中，總共2601個/.B卷I

作業(yè)/思考題：

1?在制作網頁前為什么要首先建立站點？

2?定義本地站點的含義是什么？

3?建立站點應該注意的問題？

教學后記：

通過本次實訓，讓學生系統(tǒng)的掌握站點的創(chuàng)建及管理，了解各類站點的創(chuàng)建過程，并能

正確的導出和導入站點文件。

課程教案（No：4）

授課容HTML語言簡介

課型國理論口實踐授課學時2

教學方法

講授法

與手段

教學目的1?了解HTML語言，重點掌握HTML文件的基本結構和語法格式；

2?掌握標記語言的用法；

與要求3,熟記<title>標記、〈marquee>標記及常用屬性代碼。

教學重點：

教學重點1-HTML文件的基本結構；

2?HTML語法格式；

與難點教學難點：

設置網頁標題；設置網頁關鍵字；制作滾動文字。

一'HTML簡介（5分鐘左右）

HTML：（HyperTextMarkupLanguage）是一種超文本標記語言，是網頁制作的基

本語言。即通過將特定的標記放置在文本或圖片或URL前后，來達到使該段文

本或圖片或URL以指定方式顯示的目的。

二、HTML文件的基本結構（10分鐘左右）

<HTML>

<head>

〈title〉網頁的標題《/title>

</head>

教學過程

<body>

網頁的主體容

設計

</body>

</HTML>

三、HTML語法格式（20分鐘左右）

1-HTML標記一般格式

〈標記屬性1="屬性值1"屬性2="屬性值2"??->

對象

</標記）

說明：標記除了上述格式，還有單標記，如下面的<img>標記；屬性書寫不

分先后順序；屬性值用英文雙撇號括住。

2-HTML語法規(guī)則

HTML文件以純文本格式形式存放，擴展名為html"或htm”。

HTML標記不區(qū)分大小寫。

多數(shù)HTML標記可以嵌套，但不可以交叉。

HTML源文件中的換行、回車符和多個連續(xù)空格在顯示效果中無效。只有在

設計視圖中才有用。在HTML源文件中，＜br＞為換行標記；＜pX/p＞為換段

標記；空格用 表示。

四、HTML標記舉例（55分鐘左右）

1?設置網頁標題：＜title＞標記

2?元信息標記:＜meta＞標記

＜meta＞標記的信息只顯示在源代碼中，瀏覽器中沒有顯示，通過設置＜meta＞

標記的不同屬性，可以定義頁面中各種元數(shù)據(jù)，如頁面的名稱、關鍵詞等

多種信息。

3,制作滾動文字：＜marquee＞標記

屬性：

①direction表示滾動的方向，值可以是left'right、up'down，默

認為left。

②behavior表示滾動的方式，值可以是scroll（連續(xù)滾動）、siide（滑

動一次）、alternate（來回滾動）。

③Loop表示循環(huán)的次數(shù)，值是正整數(shù)，默認為無線循環(huán)。

④Scrol1amount表示運動速度，值是正整數(shù)，默認為6。

⑤ScrolIdelay表示停頓時間，值是正整數(shù)，默認為0，單位是毫秒。

⑥Align表示元素的垂直對齊方式，值可以是top'bottom'middle°

⑦Height'width表示運動區(qū)域的高度和寬度，值是正整數(shù)或百分比，

默認width=100%，height為標簽元素的高度。

事件：

onMouseOver=this.stop（）和onMouseOut=this.startO,表示當鼠標浮到

以上區(qū)域的時候滾動停止和當鼠標移開的時候又繼續(xù)滾動。

作業(yè)/思考題：

1?關鍵字之間以英文逗號分隔。關鍵詞輸入不是越多越好，因為大多數(shù)搜索引擎限制關

鍵字的數(shù)量，所以設置關鍵字要精簡才會被搜中率高。

2?什么是HTML?HTML文件的基本結構是什么？

3?HTML標記的一般格式是什么？

教學后記：

雖然現(xiàn)在不懂HTML也能制作漂亮網頁，但是只有掌握HTML，才可以更方便、更全面地控制

網頁，同時又一些網頁設計離不開代碼。

課程教案（N0：5）

授課容網頁文本的使用

課型國理論口實踐授課學時2

教學方法

講授法

與手段

教學目的

本次課程將講授網頁制作過程中的文本使用，掌握各種特殊文本的輸入，文本

列表的使用。

與要求

教學重點：

1?特殊文本的輸入及使用狀態(tài)；

2?文本屬性；

教學重點

3?文本列表的使用；

4-在html中的文本代碼。

與難點

教學難點：

1?有序列表和無序列表的區(qū)別；

2?描述性列表的制作。

一、文本的輸入（10分鐘左右）

1?換行與換段的輸入

2?空白字符的輸入

3?特殊符號的輸入

4?日期與時間的插入

5?水平線的插入

二、文本的編輯（20分鐘左右）

教學過程1?文本的選擇：鼠標拖選，按住shift+光標鍵選擇

2?文本的刪除，復制，移動，選擇性粘貼

設計3?查找與替換:ctrl+f

?文本對文本的替換

?帶格式文本的替換

?源代碼的替換

?文本高級及指定標簽的替換

4?拼寫檢查:shift+F7

三、文本的屬性（15分鐘左右）

1?屬性工具欄：窗口菜單

2?設置文本的格式.大小.字體.顏色（注意樣式的變化）

3?設置文本對齊方式：注意html代碼中的變化

四、文本列表（30分鐘左右）

1?項目列表的創(chuàng)建

2?編號列表的創(chuàng)建

3?描述性列表的創(chuàng)建

五、HTML中的文本代碼（15分鐘左右）

1?段落和換行代碼

段落：<p></p>

換行：<br/>

2?保留源格式代碼：pre

3?水平線代碼：<hr7>

4?標題代碼:hl、h2、h3、h4、h5、h6

5?列表代碼：ulollidldtdd

作業(yè)/思考題：

1?設置網頁中文本的字體、顏色時要注意什么問題？

2?如何修改水平線的顏色？

教學后記：

本節(jié)課授課前，應更多的讓學生去回憶此前學習的word中的文本。從而感覺本知識的非常

容易，最后能比較發(fā)現(xiàn)網頁文本的特殊性。

課程教案（N0：6）

授課容建立簡單的網頁制作

課型口理論因實踐授課學時2

教學方法

講授法、演示法

與手段

教學目的

通過站點的創(chuàng)建，以及站點文件的管理，創(chuàng)建一個簡單的。

與要求

教學重點：

1?創(chuàng)建本地站點

2?創(chuàng)建首頁

教學重點

3?在首頁輸入文本容

4?制作文本列表

與難點

教學難點：

1?有序列表和無序列表的區(qū)別；

2?描述性列表的制作。

主要步躲

一、創(chuàng)建本地站點

1?運行軟件

2?站點菜單-＞新建站點

3?遠程服務器連接選擇為無

二、創(chuàng)建首頁

1?窗口-＞文件

2,右擊當前站點-＞新建文件-＞命名為1ndex.html

教學過程

三、在首頁輸入文本客

1?輸入常規(guī)文本，并在其中換行/換段

設計

2?輸入空白字符，設置首選參數(shù)中的常規(guī)設置

3?插入日期和水平線

四、制作文本列表

1?制作無序列表

文本屬性欄-＞項目列表

敲回車繼續(xù)新的項目

2?制作有序列表

文本屬性欄-＞編號列表

敲回車繼續(xù)新的項目

3,嵌套列表的制作

增加文本縮進

修改