1、2020/8/21,動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)（Dreamweaver CS3+ASP.NET）,1,第3章 HTML語(yǔ)言基礎(chǔ),3.4 任務(wù)實(shí)現(xiàn),3.3 靜態(tài)網(wǎng)頁(yè)基礎(chǔ),3.2 HTML語(yǔ)言,3.1 任務(wù)概述,3.5 任務(wù)實(shí)現(xiàn),2020/8/21,動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)（Dreamweaver CS3+ASP.NET）,2,本章要點(diǎn),HTML語(yǔ)言的基本概念 靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)的區(qū)別 HTML的文件結(jié)構(gòu) HTML中的主要標(biāo)記,2020/8/21,動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)（Dreamweaver CS3+ASP.NET）,3,3.1任務(wù)概述：設(shè)計(jì)乘法表靜態(tài)頁(yè)面和用戶(hù)注冊(cè)靜態(tài)頁(yè)面,HTML是網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)，本章將介紹HTML文件的結(jié)構(gòu)和

2、常用HTML標(biāo)簽的使用方法。 通過(guò)本章的學(xué)習(xí)，我們將完成兩個(gè)靜態(tài)頁(yè)面的設(shè)計(jì)：乘法表頁(yè)面和用戶(hù)注冊(cè)頁(yè)面。,2020/8/21,動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)（Dreamweaver CS3+ASP.NET）,4,3.2 HTML語(yǔ)言,3.2.1 靜態(tài)頁(yè)面和動(dòng)態(tài)頁(yè)面 1、靜態(tài)網(wǎng)頁(yè) （1）概況：純粹HTML格式的網(wǎng)頁(yè)，也就是以.htm、.html、.shtml、.xml等為后綴的。在HTML格式的網(wǎng)頁(yè)上，也可以出現(xiàn)各種動(dòng)態(tài)的效果，如.GIF格式的動(dòng)畫(huà)、FLASH、滾動(dòng)字幕等，這些“動(dòng)態(tài)效果”只是視覺(jué)上的，存在這些“動(dòng)態(tài)效果”的HTML頁(yè)面，仍然是靜態(tài)網(wǎng)頁(yè)。 （2）特點(diǎn)： 靜態(tài)網(wǎng)頁(yè)是事先編寫(xiě)好的。每個(gè)靜態(tài)網(wǎng)頁(yè)的內(nèi)容都是

3、保存在網(wǎng)站服務(wù)器上不變的； 靜態(tài)網(wǎng)頁(yè)的內(nèi)容相對(duì)穩(wěn)定，因此容易被搜索引擎檢索； 靜態(tài)網(wǎng)頁(yè)沒(méi)有數(shù)據(jù)庫(kù)的支持，在網(wǎng)站制作和維護(hù)方面工作量較大； 靜態(tài)網(wǎng)頁(yè)的交互性較差，在功能方面有較大的限制。,2020/8/21,動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)（Dreamweaver CS3+ASP.NET）,5,3.2 HTML語(yǔ)言,3.2.1 靜態(tài)頁(yè)面和動(dòng)態(tài)頁(yè)面 2、動(dòng)態(tài)網(wǎng)頁(yè) （1）概況：動(dòng)態(tài)網(wǎng)頁(yè)不僅具有HTML標(biāo)記，而且含有程序代碼，用數(shù)據(jù)庫(kù)連接的網(wǎng)頁(yè)。常見(jiàn)的動(dòng)態(tài)網(wǎng)頁(yè)是以.asp、.aspx、.jsp、.php等形式為后綴。 （2）特點(diǎn)： 動(dòng)態(tài)網(wǎng)頁(yè)的頁(yè)面內(nèi)容是在服務(wù)器上運(yùn)行后生成的，不是事先編寫(xiě)好的； 動(dòng)態(tài)網(wǎng)頁(yè)常常以數(shù)據(jù)庫(kù)技術(shù)為

4、基礎(chǔ)； 動(dòng)態(tài)網(wǎng)頁(yè)的交互性較好，采用動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)的網(wǎng)站可以實(shí)現(xiàn)更多的功能，如用戶(hù)注冊(cè)、用戶(hù)登錄。,2020/8/21,動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)（Dreamweaver CS3+ASP.NET）,6,3.2 HTML語(yǔ)言,3.2.2 標(biāo)記 1、標(biāo)記的概念 標(biāo)記是HTML中用于描述功能的符號(hào)。如“”、“”、“”等。 標(biāo)記常由起始標(biāo)記和結(jié)束標(biāo)記組成，如.。起始標(biāo)記一般必須和結(jié)束標(biāo)記配對(duì)使用。 有些標(biāo)記可以省略結(jié)束標(biāo)記如：、等 標(biāo)記可以嵌套。例： 這是不正確的代碼 標(biāo)記的大小寫(xiě)作用相同。 標(biāo)記在使用中必須用一對(duì)尖括號(hào)“”括起來(lái)，而且標(biāo)記名與小于號(hào)之間不能留有空白字符。,2020/8/21,動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)（Dreamw

5、eaver CS3+ASP.NET）,7,3.2 HTML語(yǔ)言,3.2.2 標(biāo)記 2、標(biāo)記的屬性 在開(kāi)始標(biāo)記中，往往用一些屬性進(jìn)一步描述標(biāo)記的功能。如：段落標(biāo)記，它的語(yǔ)法格式是： 上面的代碼說(shuō)明標(biāo)記有兩個(gè)屬性，即“align”和“class”，其中“align”用于定義段落的位置是靠左、靠右還是居中。默認(rèn)值是靠左。而“class ”則是定義所屬的類(lèi)型。在實(shí)際應(yīng)用時(shí)當(dāng)然可以沒(méi)有“align”和“class”參數(shù)，而是按照默認(rèn)情況顯示。 HTML中標(biāo)記的屬性值加或不加西文引號(hào)，瀏覽器都能接受。在Dreamweaver中自動(dòng)生成的HTML代碼中，屬性值都是有引號(hào)的。本書(shū)采用有引號(hào)的寫(xiě)法。如以下語(yǔ)句使

6、段落內(nèi)容居中： 段落內(nèi)容居中示例,2020/8/21,動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)（Dreamweaver CS3+ASP.NET）,8,3.2 HTML語(yǔ)言,3.2.2 標(biāo)記 3、常見(jiàn)的HTML標(biāo)記 （1）.標(biāo)記 一個(gè)HTML文件，無(wú)論是簡(jiǎn)單的還是復(fù)雜的，都是以開(kāi)頭，以結(jié)尾。,2020/8/21,動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)（Dreamweaver CS3+ASP.NET）,9,3.2 HTML語(yǔ)言,3.2.2 標(biāo)記 3、常見(jiàn)的HTML標(biāo)記 （2）.標(biāo)記 和構(gòu)成了HTML文件的開(kāi)頭部分，在此標(biāo)記對(duì)之間可以使用.、.等標(biāo)記對(duì)，描述網(wǎng)頁(yè)標(biāo)題或者其他不在網(wǎng)頁(yè)上顯示的某些信息。,2020/8/21,動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)（Dreamweav

7、er CS3+ASP.NET）,10,3.2 HTML語(yǔ)言,3.2.2 標(biāo)記 3、常見(jiàn)的HTML標(biāo)記 （3）.標(biāo)記 標(biāo)記用于設(shè)置瀏覽器窗口標(biāo)題欄中纖細(xì)的文本信息，這些信息一般是網(wǎng)頁(yè)主題。,2020/8/21,動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)（Dreamweaver CS3+ASP.NET）,11,3.2 HTML語(yǔ)言,3.2.2 標(biāo)記 3、常見(jiàn)的HTML標(biāo)記 （4）.標(biāo)記 是HTML文件的主題部分，之間可以定義多種標(biāo)記。,2020/8/21,動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)（Dreamweaver CS3+ASP.NET）,12,3.2 HTML語(yǔ)言,3.2.2 標(biāo)記 3、常見(jiàn)的HTML標(biāo)記 （5） 標(biāo)記表示注釋的結(jié)束。,2020/

8、8/21,動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)（Dreamweaver CS3+ASP.NET）,13,3.2 HTML語(yǔ)言,3.2.3 文件結(jié)構(gòu) 例3-1（3-1.html）HTML文件的基本結(jié)構(gòu)。,例3-1代碼窗口,2020/8/21,動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)（Dreamweaver CS3+ASP.NET）,14,3.3 靜態(tài)網(wǎng)頁(yè)基礎(chǔ),3.3.1 網(wǎng)頁(yè)中的字體 1、字型標(biāo)記 字型是指文本的加粗、傾斜、下劃線、上標(biāo)和下標(biāo)等風(fēng)格。 . 粗體標(biāo)記 . 斜體標(biāo)記 . 下劃線標(biāo)記 . 下標(biāo)標(biāo)記 . 上標(biāo)標(biāo)記,2020/8/21,動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)（Dreamweaver CS3+ASP.NET）,15,3.3 靜態(tài)網(wǎng)頁(yè)基礎(chǔ),3.3.1 網(wǎng)

9、頁(yè)中的字體 1、字型標(biāo)記 例3-2（3-2.html）HTML文件中的字型標(biāo)記。,例3-2代碼瀏覽器中預(yù)覽,例3-2的運(yùn)行結(jié)果,2020/8/21,動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)（Dreamweaver CS3+ASP.NET）,16,3.3 靜態(tài)網(wǎng)頁(yè)基礎(chǔ),3.3.1 網(wǎng)頁(yè)中的字體 2、標(biāo)題標(biāo)記 標(biāo)題標(biāo)記可以把文字作為標(biāo)題顯示在網(wǎng)頁(yè)上，文字以粗體顯示，文字前后各加一個(gè)空行。 共有6級(jí)標(biāo)題，由 至 ，對(duì)應(yīng)標(biāo)題文字逐漸變小。（一級(jí)標(biāo)題）顯示最大，（6級(jí)標(biāo)題）顯示最小。,2020/8/21,動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)（Dreamweaver CS3+ASP.NET）,17,3.3 靜態(tài)網(wǎng)頁(yè)基礎(chǔ),3.3.1 網(wǎng)頁(yè)中的字體 2、標(biāo)題標(biāo)

10、記 例3-3（3-3.html）HTML文件中的標(biāo)題標(biāo)記。,例3-3代碼瀏覽器中預(yù)覽,例3-3的運(yùn)行結(jié)果,2020/8/21,動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)（Dreamweaver CS3+ASP.NET）,18,3.3 靜態(tài)網(wǎng)頁(yè)基礎(chǔ),3.3.1 網(wǎng)頁(yè)中的字體 3、字體標(biāo)記 標(biāo)記是處理字體的主要標(biāo)記，用于設(shè)置文本的顏色、字體和字號(hào)。,2020/8/21,動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)（Dreamweaver CS3+ASP.NET）,19,3.3 靜態(tài)網(wǎng)頁(yè)基礎(chǔ),3.3.1 網(wǎng)頁(yè)中的字體 3、字體標(biāo)記 例3-4（3-4.html）HTML文件中的標(biāo)題標(biāo)記。,例3-4代碼瀏覽器中預(yù)覽,例3-4的運(yùn)行結(jié)果,2020/8/21,動(dòng)態(tài)網(wǎng)頁(yè)

11、設(shè)計(jì)（Dreamweaver CS3+ASP.NET）,20,3.3 靜態(tài)網(wǎng)頁(yè)基礎(chǔ),3.3.2 網(wǎng)頁(yè)的排版 1、段落標(biāo)記 用于分段，并且在前段與后段之間留一空白行。段落標(biāo)記可以不需要結(jié)束標(biāo)記。,2020/8/21,動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)（Dreamweaver CS3+ASP.NET）,21,3.3 靜態(tài)網(wǎng)頁(yè)基礎(chǔ),3.3.2 網(wǎng)頁(yè)的排版 2、換行標(biāo)記 用于換行。與段落標(biāo)記的區(qū)別在于，不會(huì)產(chǎn)生空行。段落標(biāo)記也可以不需要結(jié)束標(biāo)記。,2020/8/21,動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)（Dreamweaver CS3+ASP.NET）,22,3.3 靜態(tài)網(wǎng)頁(yè)基礎(chǔ),3.3.2 網(wǎng)頁(yè)的排版 3、水平線標(biāo)記 標(biāo)記在網(wǎng)頁(yè)上插入一條水平線

12、，同時(shí)產(chǎn)生了分段。水平線標(biāo)記可以不需要結(jié)束標(biāo)記。,2020/8/21,動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)（Dreamweaver CS3+ASP.NET）,23,3.3 靜態(tài)網(wǎng)頁(yè)基礎(chǔ),3.3.2 網(wǎng)頁(yè)的排版 4、居中標(biāo)記 標(biāo)記用于居中排版，與屬性ALIGN=CENTER的作用相當(dāng)。標(biāo)記需要配對(duì)使用。,2020/8/21,動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)（Dreamweaver CS3+ASP.NET）,24,3.3 靜態(tài)網(wǎng)頁(yè)基礎(chǔ),3.3.2 網(wǎng)頁(yè)的排版 例3-5（3-5.html）HTML網(wǎng)頁(yè)的排版。,例3-5代碼瀏覽器中預(yù)覽,例3-5的運(yùn)行結(jié)果,2020/8/21,動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)（Dreamweaver CS3+ASP.NET）,25

13、,3.3 靜態(tài)網(wǎng)頁(yè)基礎(chǔ),3.3.3 列表 1、無(wú)序列表 無(wú)序列表使用的一對(duì)標(biāo)記是，無(wú)序列表指沒(méi)有進(jìn)行編號(hào)的列表，每一個(gè)列表項(xiàng)前使用。的屬性type有三個(gè)選項(xiàng)，這三個(gè)選項(xiàng)都必須小寫(xiě)： disc實(shí)心園 circle空心園 square小方塊,2020/8/21,動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)（Dreamweaver CS3+ASP.NET）,26,3.3 靜態(tài)網(wǎng)頁(yè)基礎(chǔ),3.3.3 列表 2、有序列表 有序列表使用標(biāo)記，每一個(gè)列表項(xiàng)前使用。列表的結(jié)果是帶有前后順序之分的編號(hào)。如果插入和刪除一個(gè)列表項(xiàng)，編號(hào)會(huì)自動(dòng)調(diào)整。 順序編號(hào)的設(shè)置是由的兩個(gè)屬性type和start來(lái)完成的。,表3.1有序列表type的屬性,2020

14、/8/21,動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)（Dreamweaver CS3+ASP.NET）,27,3.3 靜態(tài)網(wǎng)頁(yè)基礎(chǔ),3.3.3 列表 2、有序列表 例3-6（3-6.html）HTML網(wǎng)頁(yè)中的列表。,例3-6代碼瀏覽器中預(yù)覽,例3-6的運(yùn)行結(jié)果,2020/8/21,動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)（Dreamweaver CS3+ASP.NET）,28,3.3 靜態(tài)網(wǎng)頁(yè)基礎(chǔ),3.3.4 表格 表格標(biāo)記,表3.2 表格標(biāo)記,2020/8/21,動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)（Dreamweaver CS3+ASP.NET）,29,3.3 靜態(tài)網(wǎng)頁(yè)基礎(chǔ),3.3.4 表格 例3-7（3-7.html）DW CS3中的表格制作。,表格及其屬性面板,2

15、020/8/21,動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)（Dreamweaver CS3+ASP.NET）,30,3.3 靜態(tài)網(wǎng)頁(yè)基礎(chǔ),3.3.5 表單 1、標(biāo)記 （1）Action和Method屬性 ACTION=url 設(shè)置一個(gè)接受和處理數(shù)據(jù)的程序，或URL METHOD=# 設(shè)置提交數(shù)據(jù)的方法get 或post。, ,2020/8/21,動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)（Dreamweaver CS3+ASP.NET）,31,3.3 靜態(tài)網(wǎng)頁(yè)基礎(chǔ),3.3.5 表單 2、文本框 HTML的表單輸入域中有兩類(lèi)文本框，一類(lèi)是用于單行文輸入的普通文本框，type屬性的值為text，如： 另一類(lèi)是密碼框，type屬性的值為password，如

16、： ,2020/8/21,動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)（Dreamweaver CS3+ASP.NET）,32,3.3 靜態(tài)網(wǎng)頁(yè)基礎(chǔ),3.3.5 表單 3、單選按鈕 單選按鈕用于在一組選項(xiàng)中只能選擇一項(xiàng)的場(chǎng)合，type屬性的值為radio。如：,性別:男 女,2020/8/21,動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)（Dreamweaver CS3+ASP.NET）,33,3.3 靜態(tài)網(wǎng)頁(yè)基礎(chǔ),3.3.5 表單 4、復(fù)選框 復(fù)選框用于在一組選項(xiàng)中可選擇一項(xiàng)或多項(xiàng)的場(chǎng)合，type屬性的值為checkBox，其余屬性值類(lèi)似radio。如：,請(qǐng)選擇你的愛(ài)好: 看電影 旅游 運(yùn)動(dòng),2020/8/21,動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)（Dreamweaver CS

17、3+ASP.NET）,34,3.3 靜態(tài)網(wǎng)頁(yè)基礎(chǔ),3.3.5 表單 5、提交按鈕（submit）和重置按鈕（reset）, ,2020/8/21,動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)（Dreamweaver CS3+ASP.NET）,35,3.3 靜態(tài)網(wǎng)頁(yè)基礎(chǔ),3.3.5 表單 6、下拉菜單 下拉菜單，或稱(chēng)下拉列表。標(biāo)記.定義一個(gè)下拉菜單。 name 設(shè)置下拉菜單的名字 multiple 布爾屬性，設(shè)定時(shí)下拉菜單可以多選，否則僅能選一條 size 設(shè)置帶滾動(dòng)條的下拉菜單選擇欄中一次可見(jiàn)的列表項(xiàng)條數(shù),2020/8/21,動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)（Dreamweaver CS3+ASP.NET）,36,3.3 靜態(tài)網(wǎng)頁(yè)基礎(chǔ),3.3.

18、5 表單 7、多行文本框 網(wǎng)頁(yè)上經(jīng)常需要收集或顯示大段的文字，如用戶(hù)的意見(jiàn)、建議，HTML中提供了多行文本框標(biāo)記，來(lái)實(shí)現(xiàn)多行文本內(nèi)容的處理。 如： 請(qǐng)?jiān)谶@里輸入你的意見(jiàn),2020/8/21,動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)（Dreamweaver CS3+ASP.NET）,37,3.3 靜態(tài)網(wǎng)頁(yè)基礎(chǔ),3.3.5 表單 例3-8（3-8.html）DW CS3中的表單制作。,學(xué)生學(xué)習(xí)情況調(diào)查表,2020/8/21,動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)（Dreamweaver CS3+ASP.NET）,38,3.3 靜態(tài)網(wǎng)頁(yè)基礎(chǔ),3.3.6 超文本鏈接 超文本鏈接標(biāo)記 超文本鏈接的標(biāo)記格式是： 鏈接文字,2020/8/21,動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)（Dreamweaver CS3+ASP.NET）,39,3.3 靜態(tài)