網(wǎng)頁(yè)制作基礎(chǔ)知識(shí) 教案
教學(xué)目標(biāo)：
了解網(wǎng)頁(yè)的組成元素及常用的網(wǎng)頁(yè)制作工具。了解網(wǎng)頁(yè)制作的一些基礎(chǔ)知識(shí)，如網(wǎng)站和網(wǎng)頁(yè)的區(qū)別、網(wǎng)頁(yè)的類(lèi)型、網(wǎng)頁(yè)的構(gòu)成元素等，然后在了解的基礎(chǔ)上再通過(guò)練習(xí)來(lái)鞏固。
教學(xué)重點(diǎn)難點(diǎn)：
在深刻了解概念的基礎(chǔ)上把理論轉(zhuǎn)化成實(shí)際的應(yīng)用。
教學(xué)過(guò)程：
在制作網(wǎng)頁(yè)之前，首先要了解一些關(guān)于web網(wǎng)頁(yè)的基本知識(shí)，了解一下構(gòu)成一個(gè)網(wǎng)站的基本元素等。
網(wǎng)頁(yè)的基本元素
文本 ：基本組成部分
圖像 ：更加直觀準(zhǔn)確地表達(dá)某些信息，并且可以起到美化網(wǎng)頁(yè)，吸引讀者注意力的作用
超鏈接 ：可以方便地轉(zhuǎn)入其他網(wǎng)頁(yè)進(jìn)行瀏覽。網(wǎng)頁(yè)的其他元素：音樂(lè) 表格 表單
美化網(wǎng)頁(yè)，豐富網(wǎng)頁(yè)的內(nèi)容，增強(qiáng)網(wǎng)頁(yè)的功能。
網(wǎng)頁(yè)的實(shí)質(zhì)
網(wǎng)頁(yè)相當(dāng)于刊物中所發(fā)表的一篇篇文章，但與紙上的文章相比，它增加了多媒體信息和網(wǎng)上交互的功能。
網(wǎng)頁(yè)的實(shí)質(zhì) = 表格+文本+圖片+動(dòng)畫(huà)+聲音+超級(jí)鏈接+…… ? 網(wǎng)站相當(dāng)于發(fā)行到全世界的期刊。? 網(wǎng)站的實(shí)質(zhì) = 服務(wù)器上的文件夾 ? 主頁(yè)相當(dāng)于期刊的封面。
? 主頁(yè)的實(shí)質(zhì) = 打開(kāi)網(wǎng)站的第一個(gè)網(wǎng)頁(yè)
網(wǎng)頁(yè)和網(wǎng)站的分類(lèi)
從網(wǎng)頁(yè)是否執(zhí)行程序來(lái)分，可分為靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)這兩種類(lèi)型。什么是靜態(tài)網(wǎng)頁(yè)、動(dòng)態(tài)網(wǎng)頁(yè)? ? 所謂靜態(tài)網(wǎng)頁(yè)，指的是網(wǎng)頁(yè)從服務(wù)器傳到客戶(hù)端時(shí)，網(wǎng)頁(yè)的內(nèi)容是“固定不變”的，也就是說(shuō)，服務(wù)器只是把所存儲(chǔ)的網(wǎng)頁(yè)的內(nèi)容原封不動(dòng)直接傳遞給客戶(hù)端瀏覽器，這種網(wǎng)頁(yè)一般是標(biāo)準(zhǔn)的HTML代碼。
靜態(tài)網(wǎng)頁(yè)一般以.htm或.html為后綴結(jié)尾的，俗稱(chēng)html文件。本課程就是制作靜態(tài)網(wǎng)頁(yè)的課程。
? 所謂動(dòng)態(tài)網(wǎng)頁(yè)，它在由服務(wù)器傳遞給客戶(hù)端的時(shí)候必須由服務(wù)器把它轉(zhuǎn)換成相應(yīng)的HTML格式，而且會(huì)根據(jù)用戶(hù)的要求和選擇在在服務(wù)器端做出相應(yīng)的改變和響應(yīng)。
動(dòng)態(tài)網(wǎng)頁(yè)一般要用專(zhuān)門(mén)的腳本語(yǔ)言編寫(xiě)，如ASP、ASP.NET、PHP、JSP等等 動(dòng)態(tài)網(wǎng)頁(yè)內(nèi)含有程序代碼，運(yùn)行于服務(wù)器端的程序、網(wǎng)頁(yè)和組件等都屬于動(dòng)態(tài)網(wǎng)頁(yè)，在網(wǎng)絡(luò)中看到的動(dòng)態(tài)網(wǎng)頁(yè)通常是以.asp、.jsp等后綴結(jié)尾的，但也有以.php結(jié)尾的，如我們學(xué)校的校園網(wǎng)首頁(yè)。
一個(gè)完整有價(jià)值的網(wǎng)站應(yīng)該是集靜態(tài)、動(dòng)態(tài)、動(dòng)畫(huà)于一身的。
制作靜態(tài)網(wǎng)頁(yè)的工具
用HTML語(yǔ)言直接編寫(xiě)(,用WORD編寫(xiě),用Dreamwaver編寫(xiě),用Frontpage編寫(xiě))? 圖片編輯工具：Photoshop、Firworks等； ? 動(dòng)畫(huà)制作工具：Flash、Swish、Cool 3d等；
? 還有網(wǎng)頁(yè)特效工具：有聲有色、網(wǎng)頁(yè)特效夢(mèng)工廠等。HTML語(yǔ)言
? 概念：是一種使用一組特定的標(biāo)記來(lái)描述文檔結(jié)構(gòu)的語(yǔ)言，HTML的源代碼由網(wǎng)絡(luò)瀏覽器解釋執(zhí)行。
? 結(jié)構(gòu)：HTML的結(jié)構(gòu)包括頭部（Head）、主體（Body）兩大部分，其中頭部描述瀏覽器所需的信息，而主體則包含所要說(shuō)明的具體內(nèi)容。
HTML語(yǔ)言的特點(diǎn):它們是成雙出現(xiàn)的 Dreamweaver ? 較為專(zhuān)業(yè)的網(wǎng)頁(yè)設(shè)計(jì)工具軟件。
? 可視化編輯、HTML代碼編輯的軟件包
? 支持ActiveX、JavaScript、Java、Flash、Shockwave等各種編程工具。? 支持動(dòng)態(tài)HTML的設(shè)計(jì) Frontpage ? “功能強(qiáng)大，簡(jiǎn)單易學(xué)”的特點(diǎn)，采用“所見(jiàn)即所得”的編輯模式，不必了解HTML的語(yǔ)法
? 基本使用方法與Word十分相似
網(wǎng)頁(yè)制作注意事項(xiàng)
? 要沉穩(wěn)，不要花里胡哨。自助網(wǎng)站制作的人往往喜歡獵奇，弄一些不必要的亂七八糟的東西，比如彈出窗口啦、腳本代碼啦、很大的圖片啦，等等。
? 要素凈、大氣，不要五彩繽紛。要注意在一個(gè)自助網(wǎng)站的頁(yè)面里不要用色太雜。要確定一個(gè)顏色主調(diào)，再搭配一兩種反差不太大的顏色即可。正文文字的大小要基本統(tǒng)一，文字的顏色也不要紅紅綠綠。不要認(rèn)為如何制作網(wǎng)頁(yè)的關(guān)鍵是以大文字和鮮艷的色彩來(lái)強(qiáng)調(diào)很多意思，實(shí)際上使人眼花繚亂，什么都強(qiáng)調(diào)不了，也很不大氣。
? 要有個(gè)性、有風(fēng)格，要突出行業(yè)的特點(diǎn)。比如娛樂(lè)業(yè)可以熱烈一些、活潑一些，政府網(wǎng)站則要莊重一些；收藏、書(shū)畫(huà)業(yè)要古樸典雅，策劃、時(shí)裝業(yè)則要前衛(wèi)一些。
? 一個(gè)網(wǎng)頁(yè)不要太長(zhǎng)，一般兩屏到三屏就可以了。在同一個(gè)網(wǎng)頁(yè)里，如果文字或圖片太多，既不美觀，也會(huì)影響你的網(wǎng)頁(yè)打開(kāi)的速度。如果內(nèi)容實(shí)在太多，應(yīng)該分作幾個(gè)頁(yè)面，或者分為幾個(gè)二級(jí)欄目。
? 其實(shí)，如何制作網(wǎng)頁(yè)，重點(diǎn)做好網(wǎng)站的首頁(yè)。網(wǎng)站的首頁(yè)就好比一個(gè)人的臉面，如果臟兮兮的，會(huì)把你的顧客嚇跑。網(wǎng)站的首頁(yè)做得好，里面的內(nèi)容一般也會(huì)不錯(cuò)。
網(wǎng)頁(yè)制作與設(shè)計(jì)教案
第一講 網(wǎng)頁(yè)設(shè)計(jì)概述....................................................................................................................3 1.1WWW和URL.....................................................................................................................3 1.2IE5的使用............................................................................................................................3 1.3 網(wǎng)頁(yè)中所使用的技術(shù)............................................................................................................4 1.4 制作網(wǎng)頁(yè)的基本方法............................................................................................................4 第二講 HTML的基本標(biāo)志與格式標(biāo)志.......................................................................................4 2.1 HTML文檔的基本結(jié)構(gòu).........................................................................................................5 第三講 HTML的文本、圖片與超級(jí)鏈接標(biāo)志...........................................................................5 2.2 插入文字................................................................................................................................6 2.3 插入圖片................................................................................................................................8 2.4 建立超級(jí)鏈接........................................................................................................................8 第四講 HTML表格、表單與框架標(biāo)志.......................................................................................9 2.5 插入表格................................................................................................................................9 2.6 表單的應(yīng)用..........................................................................................................................10 2.7 框架窗口..............................................................................................................................10 第五講 HTML標(biāo)志綜合運(yùn)用案例.............................................................................................11 第六講 DREAMWEAVER中簡(jiǎn)單WEB站點(diǎn)建立與管理.....................................................12 3.1 DREAMWEAVER概述............................................................................................................12 第七講 DREAMWEAVER中靜態(tài)網(wǎng)頁(yè)設(shè)計(jì).............................................................................13 3.2 在頁(yè)面中加入文字和圖像..................................................................................................14 3.3 超級(jí)鏈接的運(yùn)用..................................................................................................................14 3.4.表格的應(yīng)用.........................................................................................................................14 3.5.在網(wǎng)頁(yè)中創(chuàng)建表單.............................................................................................................15 第八講 DREAMWEAVER中動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì).............................................................................15 第九講 DREAMWEAVER綜合性網(wǎng)頁(yè)設(shè)計(jì)案例.....................................................................16 第十講 VBSCRIPT概述.............................................................................................................17 4.1 VBSCRIPT語(yǔ)言簡(jiǎn)介.............................................................................................................17 第十一講 VBSCRIPT的基本元素與輸入輸出.........................................................................18 4.2.基本數(shù)據(jù)類(lèi)型.......................................................................................................................18 4.2.表達(dá)式和運(yùn)算符.................................................................................................................19 第十二講 VBSCRIPT的條件語(yǔ)句、循環(huán)語(yǔ)句和過(guò)程.............................................................20 4.3 VBSCRIPT基本語(yǔ)句.............................................................................................................20
第一講 網(wǎng)頁(yè)設(shè)計(jì)概述
【教學(xué)內(nèi)容】
講解網(wǎng)頁(yè)設(shè)計(jì)的相關(guān)術(shù)語(yǔ)及網(wǎng)站制作的基本流程。【教學(xué)目的】
使學(xué)生對(duì)網(wǎng)站及網(wǎng)頁(yè)有一定的認(rèn)識(shí)，激發(fā)學(xué)生學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)的興趣。【教學(xué)重點(diǎn)】
網(wǎng)頁(yè)設(shè)計(jì)中的若干術(shù)語(yǔ)。【教學(xué)難點(diǎn)】
理解網(wǎng)頁(yè)設(shè)計(jì)中的若干術(shù)語(yǔ)。【教學(xué)方式】
講授式、討論式、案例分析式。【教學(xué)參考】
1、《網(wǎng)頁(yè)設(shè)計(jì)與制作》楊尚森 曲宏山 賈文峰等著 電子工業(yè)出版社。
2、《Internet 網(wǎng)頁(yè)工場(chǎng)》Wittime工作室 重慶出版社。
3、《WEB網(wǎng)站設(shè)計(jì)》Joel Sklar著 高等教育出版社。
4、《HTML網(wǎng)頁(yè)制作教程》材義語(yǔ)編著 鐵道出版社。【新課內(nèi)容】
1.1 WWW和URL 1.1.1 Web的起源
Web是World Wide Web的簡(jiǎn)稱(chēng)，一般也稱(chēng)之為WWW或3W 1.1.2 Web的特點(diǎn)和結(jié)構(gòu)
Web最大的特點(diǎn)是使用了超文本（Hypertext）WWW采用C/S（客戶(hù)機(jī)/服務(wù)器）工作模式
在瀏覽器和服務(wù)器之間應(yīng)用HTTP（Hyper Text Transfer Protocol，超文本傳輸協(xié)議）作為網(wǎng)絡(luò)應(yīng)用層通信協(xié)議 1.1.3 URL URL的完整格式
協(xié)議://主機(jī)名或IP地址：端口號(hào)/路徑名/文件名
1.2 IE5的使用
Web瀏覽器是瀏覽Internet資源的客戶(hù)端軟件
在Windows環(huán)境下使用的瀏覽器主要有Internet Explorer、Netscape Navigator、Mosaic等
1.2.1 IE5的界面 1.2.2 IE5的使用
列表標(biāo)志的使用。【教學(xué)方式】
討論式、案例分析式、練習(xí)式。【教學(xué)參考】
1、《網(wǎng)頁(yè)設(shè)計(jì)與制作》楊尚森 曲宏山 賈文峰等著 電子工業(yè)出版社。
2、《WEB網(wǎng)站設(shè)計(jì)》Joel Sklar著 高等教育出版社。
3、《HTML網(wǎng)頁(yè)制作教程》材義語(yǔ)編著 鐵道出版社。【新課內(nèi)容】
2.1 HTML文檔的基本結(jié)構(gòu)
2.1.1 HTML語(yǔ)法
1、雙標(biāo)記
語(yǔ)法：
<標(biāo)記>內(nèi)容
2、單標(biāo)記 語(yǔ)法：<標(biāo)記> 最常用的單標(biāo)記是
3、標(biāo)記屬性 語(yǔ)法
<標(biāo)記
屬性1 屬性2 屬性3 … > 例子
4、注釋語(yǔ)句 格式
例子
2.1.2 HTML文檔的基本結(jié)構(gòu) 【課后小結(jié)】
通過(guò)本次課的學(xué)習(xí),要求能熟練掌握網(wǎng)頁(yè)面的基本標(biāo)志與格式標(biāo)志,并能靈活運(yùn)用 列表,有序列表,無(wú)序列表標(biāo)志及屬性。
第三講 HTML的文本、圖片與超級(jí)鏈接標(biāo)志
【教學(xué)內(nèi)容】
講解HTML標(biāo)準(zhǔn)中的文本、圖片與超級(jí)鏈接標(biāo)志 【教學(xué)目的】
* 使學(xué)生了解標(biāo)題元素,掌握字體,上下標(biāo),及特殊字符的標(biāo)志。
< EM>......，強(qiáng)調(diào)文字，通常用斜體。
< STRONG>......，特別強(qiáng)調(diào)的文字，通常用黑體。
......，以等寬體顯示西文字符。
......，使文字大小相對(duì)于前面的文字增大一級(jí)。
......，使文字大小相對(duì)于前面的文字減小一級(jí)。......，使文字成為前一個(gè)字符的上標(biāo)。......，使文字成為前一個(gè)字符的下標(biāo)。......，使文字顯示為閃爍效果。2.2.6
文本修飾 2.2.7
預(yù)格式化文本 使用預(yù)格式化標(biāo)記
不再忽略在此之間的空格、制表符與回車(chē)符等元素 2.2.8 轉(zhuǎn)義字符與特殊字符
一般轉(zhuǎn)義符都是以“&”開(kāi)始，以“；”結(jié)束，一個(gè)轉(zhuǎn)義符之間不能有空格 2.2.9 文本強(qiáng)制換行和不換行 文本強(qiáng)制換行
不換行 2.2.10 插入水平線(xiàn) 使用
標(biāo)記
屬性：Width，Size，Align，Noshade，color 2.2.11 使用列表
1、無(wú)序列表
- 列表?xiàng)l目1
- 列表?xiàng)l目2......
2、有序列表
- 列表?xiàng)l目1
- 列表?xiàng)l目2......
3、定義列表
- 列表?xiàng)l目1
- 條目1的說(shuō)明
- 列表?xiàng)l目2
- 條目2的說(shuō)明 ……
...... 2.4.4 圖像地圖 【課后小結(jié)】
本節(jié)介紹了在網(wǎng)頁(yè)中加入文本、圖片和超級(jí)鏈接的標(biāo)志與相應(yīng)屬性，熟練運(yùn)用這些標(biāo)志是制作多媒體網(wǎng)頁(yè)的基礎(chǔ)。超級(jí)鏈接標(biāo)志中，書(shū)簽鏈接是一類(lèi)特殊的鏈接方式，理解和使用書(shū)簽鏈接學(xué)習(xí)HTML中超級(jí)鏈接標(biāo)志的難點(diǎn)。
第四講 HTML表格、表單與框架標(biāo)志
【教學(xué)內(nèi)容】
講解HTML中制作表格、表單與框架的標(biāo)志。【教學(xué)目的】
使學(xué)生掌握簡(jiǎn)單表格、表單與框架的制作。【教學(xué)重點(diǎn)】
* 表格中單元格的合并以及表格嵌套和疊加操作。* 框架的嵌套使用。* 表單元素標(biāo)志與屬性。【教學(xué)難點(diǎn)】
* 理解表格屬性rowspan與colspan的含義以及表格嵌套實(shí)現(xiàn)的基本思想。* 理解框架屬性name、target的意義。
* 理解表單中相應(yīng)元素對(duì)應(yīng)標(biāo)志及屬性的含義。【教學(xué)方式】
案例分析式、項(xiàng)目教學(xué) 【教學(xué)參考】
1、《網(wǎng)頁(yè)設(shè)計(jì)與制作》楊尚森 曲宏山 賈文峰等著 電子工業(yè)出版社。
2、《WEB網(wǎng)站設(shè)計(jì)》Joel Sklar著 高等教育出版社。
3、《HTML網(wǎng)頁(yè)制作教程》材義語(yǔ)編著 鐵道出版社。【新課內(nèi)容】
2.5 插入表格
2.5.1 在網(wǎng)頁(yè)中插入表格
表格的基本構(gòu)成元素：表頭，單元格，列，行
| 第一行第一列 | 第一行第二列 |
| 第二行第一列 | 第二行第二列 | FrameSpacing=“2“
BorderColor=”#008000“ >
2.7.3 子窗口屬性設(shè)置
2.7.4 常見(jiàn)的框架窗口劃分方法（1）標(biāo)題和正文，分為上下兩部分（2）層次結(jié)構(gòu)，分為上中下三部分
（3）目錄和標(biāo)題，分為左上、左下、右三部分
（4）標(biāo)題、目錄和正文，分為上、左下、右下三部分（5）嵌套目錄，分為左、右上、右下三部分 2.7.5 不支持框架的網(wǎng)頁(yè)
