WEB頁面制作基礎(chǔ)

1、第2章 Web頁面制作基礎(chǔ)2.1 HTML語言概述語言概述 2.2 文本的格式與風(fēng)格文本的格式與風(fēng)格 2.3 加入多媒體與超級鏈接加入多媒體與超級鏈接2.4 制作表格制作表格 2.5 制作表單制作表單 2.6 框架結(jié)構(gòu)框架結(jié)構(gòu) 2.7 CSS基礎(chǔ)基礎(chǔ)2.1 HTML語言概述語言概述 2.1.1 HTML2.1.1 HTML概述概述 HTMLHTML是（是（Hyper Text Markup LanguageHyper Text Markup Language，超文本標(biāo)，超文本標(biāo)記語言）的縮寫，用來表示網(wǎng)上信息的符號標(biāo)記語言。記語言）的縮寫，用來表示網(wǎng)上信息的符號標(biāo)記語言。 HTMLHTML最早

2、源于最早源于SGMLSGML語言語言 . .HTMLHTML語言內(nèi)容豐富，從功能上大體可分為：文本結(jié)語言內(nèi)容豐富，從功能上大體可分為：文本結(jié)構(gòu)設(shè)置、列表建立、文本屬性制定、超鏈接、圖片和構(gòu)設(shè)置、列表建立、文本屬性制定、超鏈接、圖片和多媒體插入、對象、表格以及窗體的操作。多媒體插入、對象、表格以及窗體的操作。 2.1 HTML語言概述語言概述2.1.2 HTML2.1.2 HTML文檔的結(jié)構(gòu)文檔的結(jié)構(gòu)包括包括HEADHEAD、TITLETITLE、BODYBODY三部分，下面是基本結(jié)構(gòu)：三部分，下面是基本結(jié)構(gòu)： 標(biāo)題部分標(biāo)題部分 正文部分正文部分 2.1 HTML語言概述語言概述2.1.3 HT

3、ML2.1.3 HTML標(biāo)記標(biāo)記 1 1HTMLHTML文檔標(biāo)記文檔標(biāo)記 格式：格式：標(biāo)志文件開始和結(jié)尾的標(biāo)標(biāo)志文件開始和結(jié)尾的標(biāo)記。記。 2 2HTMLHTML文件頭標(biāo)記文件頭標(biāo)記 格式：格式：用于包含文件的基本信息。用于包含文件的基本信息。 3 3HTMLHTML文件主體標(biāo)記文件主體標(biāo)記 格式：格式：文件主體標(biāo)記。文件主體標(biāo)記。 注意：注意：與與為獨(dú)立的兩個部分，不能為獨(dú)立的兩個部分，不能互相嵌套。互相嵌套。 2.1 HTML語言概述語言概述2.1.4 2.1.4 常用常用HTMLHTML編輯工具編輯工具 任何一個文檔編輯器都是任何一個文檔編輯器都是HTMLHTML編輯器。編輯器。為了減少

4、網(wǎng)頁設(shè)計師的工作設(shè)計了專用的網(wǎng)頁編輯為了減少網(wǎng)頁設(shè)計師的工作設(shè)計了專用的網(wǎng)頁編輯器，像器，像DreamweaverDreamweaver、FrontPageFrontPage、CutePageCutePage、QuickSiteQuickSite等，是專門用來制作網(wǎng)頁的，具有所見即等，是專門用來制作網(wǎng)頁的，具有所見即所得的功能。所得的功能。所見即所得的概念。所見即所得的概念。本書例題均在本書例題均在FrontPage 2000FrontPage 2000編輯環(huán)境中調(diào)試并通編輯環(huán)境中調(diào)試并通過。過。2.2 文本的格式與風(fēng)格文本的格式與風(fēng)格 2.2.1 2.2.1 設(shè)置設(shè)置的屬性的屬性 1 1屬性

5、概述屬性概述 backgroundbackground屬性屬性 bgcolor bgcolor 屬性屬性bgpropertiesbgproperties屬性屬性 link link ，vlinkvlink， alinkalink屬性屬性LeftmarginLeftmargin，topmargintopmargin屬性屬性MargingwidthMargingwidth，marginheightmarginheight屬性屬性2 2FrontPage 2000FrontPage 2000中的實現(xiàn)中的實現(xiàn) 2.2 文本的格式與風(fēng)格文本的格式與風(fēng)格2.2.2 2.2.2 段落格式化段落格式化 1 1

6、標(biāo)題標(biāo)記標(biāo)題標(biāo)記格式：格式：，設(shè)置各種大小不同標(biāo)題的標(biāo)記。設(shè)置各種大小不同標(biāo)題的標(biāo)記。2 2段落標(biāo)記段落標(biāo)記格式：格式：設(shè)置段落標(biāo)記。設(shè)置段落標(biāo)記。 3 3預(yù)定格式標(biāo)記預(yù)定格式標(biāo)記格式：格式：在瀏覽器中瀏覽時，按照文在瀏覽器中瀏覽時，按照文檔中預(yù)先排好的形式顯示內(nèi)容。檔中預(yù)先排好的形式顯示內(nèi)容。2.2 文本的格式與風(fēng)格文本的格式與風(fēng)格4 4分區(qū)顯示標(biāo)記分區(qū)顯示標(biāo)記格式：格式：分區(qū)顯示標(biāo)記。分區(qū)顯示標(biāo)記。5 5詞標(biāo)記詞標(biāo)記這種標(biāo)記有兩種：這種標(biāo)記有兩種：和和格式：格式：強(qiáng)制進(jìn)行換行標(biāo)記。強(qiáng)制進(jìn)行換行標(biāo)記。 格式：格式：插入水平線標(biāo)記。插入水平線標(biāo)記。 6 6注釋標(biāo)記注釋標(biāo)記格式：格式：!-注釋標(biāo)

7、記。注釋標(biāo)記。 2.2 文本的格式與風(fēng)格文本的格式與風(fēng)格2.2.4 2.2.4 建立列表建立列表 1 1有序列表有序列表格式：格式：OL type= LI type=” LI type=” 功能：建立有序列表。功能：建立有序列表。 2.2 文本的格式與風(fēng)格文本的格式與風(fēng)格2 2無序列表無序列表格式：格式：UL type=” LI type=” LI type=” 功能：建立無序列表。功能：建立無序列表。 2.2 文本的格式與風(fēng)格文本的格式與風(fēng)格3 3自定義列表自定義列表格式：格式： 注意：注意：根據(jù)文檔的具體要求，列表可以嵌套使用。根據(jù)文檔的具體要求，列表可以嵌套使用。在在FrontPage

8、2000FrontPage 2000中實現(xiàn)。中實現(xiàn)。 2.2 文本的格式與風(fēng)格文本的格式與風(fēng)格2.2.5 2.2.5 字符的格式化字符的格式化 1 1字體設(shè)置標(biāo)記字體設(shè)置標(biāo)記格式：格式：功能：設(shè)置字體格式標(biāo)記。功能：設(shè)置字體格式標(biāo)記。標(biāo)記提供了幾種屬性標(biāo)記提供了幾種屬性 ：sizesize：設(shè)置文字的大小。：設(shè)置文字的大小。faceface：設(shè)置字體。：設(shè)置字體。colorcolor：設(shè)置文字的顏色。：設(shè)置文字的顏色。2.2 文本的格式與風(fēng)格文本的格式與風(fēng)格其他標(biāo)記格式其他標(biāo)記格式功能功能給字符加下劃線給字符上加橫線，表示刪除給字符加粗將字符設(shè)置成斜體標(biāo)記使得其中的文字產(chǎn)生閃爍的效果2.3 2

9、.3 加入多媒體與超級鏈接加入多媒體與超級鏈接 2.3.1 2.3.1 加入圖像、視頻、動畫加入圖像、視頻、動畫 圖像在網(wǎng)頁設(shè)計中是必不可少的，所以用戶應(yīng)掌圖像在網(wǎng)頁設(shè)計中是必不可少的，所以用戶應(yīng)掌握在網(wǎng)頁中操作圖像的方法。握在網(wǎng)頁中操作圖像的方法。 格式：格式： 功能：在網(wǎng)頁中加入圖像、視頻、動畫等。功能：在網(wǎng)頁中加入圖像、視頻、動畫等。 2.3 2.3 加入多媒體與超級鏈接加入多媒體與超級鏈接標(biāo)記屬性功能src =URL通過URL給出圖像來源的位置，不可缺省width=size設(shè)置圖像寬度height =size設(shè)置圖像高度alt= txt設(shè)置在圖像未載入前圖片位置顯示的文字border=

10、 size設(shè)置圖像邊框，缺省為0align=alignstyle設(shè)置對齊方式。取值為：top，middle，bottom，aleft，righthspace=size設(shè)置圖片左右邊沿空白vspace=size設(shè)置圖片上下邊沿空白1插入圖像插入圖像 2.3 2.3 加入多媒體與超級鏈接加入多媒體與超級鏈接2插入視頻插入視頻 標(biāo)記屬性功能dynsrc=URL設(shè)置多媒體來源位置loop=size設(shè)置視頻播放的次數(shù)loopdelay=time設(shè)置兩次播放的間隔時間start=value指定何時開始播放視頻文件使用使用FrontPage 2000在網(wǎng)頁中插入多媒體在網(wǎng)頁中插入多媒體 2.3 2.3 加入

11、多媒體與超級鏈接加入多媒體與超級鏈接2.3.2 加入超級鏈接格式：加入超級鏈接格式： 標(biāo)記屬性功能href=URL給定鏈接目標(biāo)的位置target=frametarget設(shè)置顯示鏈接目標(biāo)的框架accesskey=character設(shè)置快捷鍵tabindex=num設(shè)置Tab鍵的順序rel=linktype設(shè)置到鏈接的關(guān)系2.4 制作表格制作表格 2.4.1 建立表格建立表格創(chuàng)建表格是規(guī)劃頁面最常用的方法。創(chuàng)建表格是規(guī)劃頁面最常用的方法。格式：格式：功能：創(chuàng)建表格進(jìn)行頁面設(shè)計。功能：創(chuàng)建表格進(jìn)行頁面設(shè)計。 在瀏覽器中顯示時，表格的整體外觀由在瀏覽器中顯示時，表格的整體外觀由標(biāo)記的屬性決定標(biāo)記的屬性

12、決定 。2.4 制作表格制作表格標(biāo)記屬性功能border=size設(shè)置表格邊框大小width= size設(shè)置表格的寬度height=size設(shè)置表格的高度cellspacing=size設(shè)置單元格間距cellpadding =size設(shè)置單元格的填充距background =URL設(shè)置表格背景圖片bgcolor =colorvalue設(shè)置表格背景色align=alignstyle設(shè)置對齊方式cols =size設(shè)置表格的列數(shù)2.4 制作表格制作表格2.4.2 定制表格定制表格使用使用只是定義空表格，還需要定只是定義空表格，還需要定義行和單元格。義行和單元格。格式：格式：功能：定義表格的一行。功

13、能：定義表格的一行。對于每一行，可以定義行屬性對于每一行，可以定義行屬性 2.4 制作表格制作表格標(biāo)記屬性功能bgcolor=colorvalue設(shè)置行背景顏色。align=alignstyle設(shè)置行對齊方式。valign=valignstyle設(shè)置單元格垂直對齊方式。行屬性：行屬性：2.4 制作表格制作表格單元格屬性：單元格屬性：標(biāo)記屬性功能bgcolor=colorvalue設(shè)置單元格背景顏色rowspan=num設(shè)置單元格所占的行數(shù)colspan =num設(shè)置單元格所占的列數(shù)align =alignstyle設(shè)置對齊方式valign =valignstyle設(shè)置單元格垂直對齊方式widt

14、h =size設(shè)置單元格寬度height=size設(shè)置單元格高度格式：格式：定義表格說明，通過屬定義表格說明，通過屬性性align設(shè)置標(biāo)題的對齊方式。設(shè)置標(biāo)題的對齊方式。 2.5 制作表單制作表單 2.5.1 表單的結(jié)構(gòu)表單的結(jié)構(gòu) 格式：格式：定義表單。定義表單。 標(biāo)記屬性功能action= URL設(shè)置處理表單的程序method=postmethod設(shè)置發(fā)送表單的HTTP方法enctype=contenttype設(shè)置發(fā)送表單的內(nèi)容屬性onsubmit= script設(shè)置被發(fā)送事件target=frametarget設(shè)置顯示表單內(nèi)容的窗口accept-charset=cdata設(shè)置可支持的字符列

15、表2.5 制作表單制作表單2.5.2 FORM中常用的標(biāo)記中常用的標(biāo)記 1輸入域（1）單行輸入域）單行輸入域 1）text類型類型 2）password類型類型 3）radio類型類型 4）checkbox類型類型5）submit類型類型 6）reset類型類型 7）hidden類型類型 2.5 制作表單制作表單（2 2）多行輸入域標(biāo)記）多行輸入域標(biāo)記標(biāo)記屬性功能name=cdata設(shè)置FORM提交的輸入信息的名稱rows=num設(shè)置文本域的行數(shù)cols= num設(shè)置文本域的列數(shù)tabindex=num設(shè)置tab鍵的次序2.5 制作表單制作表單2按鈕按鈕 標(biāo)記屬性功能name=cdata設(shè)置已

16、發(fā)送表單的關(guān)鍵字。value=cdata設(shè)置已發(fā)送表單的值。type= buttontype設(shè)置按鈕的類型。tabindex=num設(shè)置tab鍵的次序。2.5 制作表單制作表單3選擇域選擇域格式：格式： 選項一選項一 選項二選項二 功能：定義選擇欄。功能：定義選擇欄。 2.5 制作表單制作表單2.5.3 表單的處理表單的處理處理信息時，經(jīng)常配合表格標(biāo)記，使用循環(huán)處理信息時，經(jīng)常配合表格標(biāo)記，使用循環(huán)輸出的方法。輸出的方法。 2.6 框架結(jié)構(gòu)框架結(jié)構(gòu) 2.6.1 2.6.1 框架結(jié)構(gòu)的文件格式框架結(jié)構(gòu)的文件格式 注意：注意：在老版本的瀏覽器在老版本的瀏覽器 可能不支持框架結(jié)構(gòu)。可能不支持框架結(jié)構(gòu)

17、。 2.6 框架結(jié)構(gòu)框架結(jié)構(gòu)2.6.2 2.6.2 框架結(jié)構(gòu)標(biāo)記的使用框架結(jié)構(gòu)標(biāo)記的使用 格式：格式：標(biāo)記屬性功能rows=size設(shè)置多重框架的高度cols =size設(shè)置多重框架的寬度onload=script設(shè)置框架被載入的事件onunload=script 設(shè)置框架被卸載的事件2.6 框架結(jié)構(gòu)框架結(jié)構(gòu)2.6.3 FRAME2.6.3 FRAME標(biāo)記標(biāo)記 標(biāo)記屬性功能src=URL設(shè)置要鏈接到的HTML文件name=framename表示子窗口的名字marginwidth=size用來控制顯示內(nèi)容和窗口左右邊界的距離，默認(rèn)為1marginheight= size用來控制顯示內(nèi)容和窗口上下邊界的距離，默認(rèn)為1scrolling=scrollingstyle 指定子窗口是否使用滾動條，有YES/NO/AUTO三個值，默認(rèn)AUTO，即根據(jù)窗口內(nèi)容決定是否有滾動條noresize使用該屬性后，指定窗口不能調(diào)整窗口大小2.6 框架結(jié)構(gòu)框架結(jié)構(gòu)2.6.4 TARGET屬性的使用屬性的使用三種常見的用法：三種常見的用法：1 1用于用于A A標(biāo)記標(biāo)記 2 2用于用于BASEBASE標(biāo)記標(biāo)記 3 3用