HTML基礎(chǔ)與層疊樣式單CSS

1、第2章 HTML基礎(chǔ)與層疊樣式單CSS學(xué)習(xí)要點(diǎn)： 1.了解HTML文檔的基本結(jié)構(gòu)。2.掌握HTML文檔的各種常用標(biāo)記。3.熟練使用各種HTML控件標(biāo)記以及幀標(biāo)記、浮動(dòng)幀標(biāo)記。4了解CSS的特點(diǎn)。5掌握CSS中各種選擇符的定義及使用方法。HTML基礎(chǔ)與層疊樣式單CSS 學(xué)習(xí)Web開(kāi)發(fā)技術(shù)，必須首先熟悉HTML的常用標(biāo)記，熟悉其含義和作用。另外每一個(gè)HTML標(biāo)記或者稱為HTML元素（有時(shí)也稱HTML標(biāo)簽）都可看成一個(gè)在瀏覽器中顯示的對(duì)象。層疊樣式單CSS的作用就是為網(wǎng)頁(yè)上的HTML元素精確地定位，控制HTML元素的外觀顯示，可以把網(wǎng)頁(yè)上的顯示內(nèi)容和顯示外觀相分離。 第2章 HTML基礎(chǔ)與層疊樣式單

2、CSS 2.1 HTML基礎(chǔ)2.2 層疊樣式單CSS案例名稱：HTML網(wǎng)頁(yè)框架案例名稱：HTML網(wǎng)頁(yè)框架程序名稱：這是一段最基本的HTML標(biāo)識(shí)，任何HTML文檔都是由一個(gè)和標(biāo)記包含的，然后分為和兩大部分，頁(yè)面的標(biāo)識(shí)一般都是在標(biāo)識(shí)中定義的。HTML文件不區(qū)別大小寫(xiě)，瀏覽器認(rèn)為和是一樣的，在使用的時(shí)候需要保持風(fēng)格的完整性。HTML文件的擴(kuò)展名可以是.htm或者.html都可以，現(xiàn)在已經(jīng)沒(méi)有區(qū)別了。原來(lái)在Linux操作系統(tǒng)上用html作為文件的擴(kuò)展名，而在Windows操作系統(tǒng)上用.htm，因?yàn)樵缙诘腤indows操作系統(tǒng)不支持三個(gè)以上字母的文件擴(kuò)展名。標(biāo)記類型 說(shuō) 明 頭元素標(biāo)記 每個(gè)HTML文檔

3、都包含一個(gè)頭元素(head)。頭元素中的內(nèi)容一般不會(huì)在顯示窗口中顯示出來(lái)。HTML文檔的頭元素是以開(kāi)頭，而以結(jié)束。網(wǎng)頁(yè)標(biāo)題標(biāo)記 標(biāo)題是頭元素的一部分，因此，必須包含在之內(nèi)。標(biāo)題會(huì)出現(xiàn)在瀏覽器窗口標(biāo)題欄上。用戶將該網(wǎng)頁(yè)添加到收藏夾或書(shū)簽時(shí)，其名稱默認(rèn)為網(wǎng)頁(yè)標(biāo)題；另外搜索引擎在進(jìn)行分類搜索時(shí)也會(huì)按網(wǎng)頁(yè)標(biāo)題搜索。 主體元素標(biāo)記 HTML文檔的主體部分是一個(gè)區(qū)域，用來(lái)放置文檔的內(nèi)容，例如文本、圖像等等。主體以開(kāi)始，以結(jié)束。頁(yè)面背景顏色與圖像在該標(biāo)記中設(shè)置方法是：（1）用圖像填充背景其中background表示背景圖像文件所在的URL地址。例如：（2）用某種顏色填充背景 其中Bgcolor表示背景顏色。

4、例如：顏色可用顏色名稱如green、16進(jìn)制表示#RRGGBB如#00FFEE、函數(shù)rgb(r,g,b)如rgb(20,20,50)、函數(shù)rgb(r%,g%,b%)如 rgb(20%,20%,50%)來(lái)表示。紅綠藍(lán)顏色分量取值為0255。顏色分量百分?jǐn)?shù)是相對(duì)255而言。例如:HEAD頭元素 HEAD頭元素主要包括該頁(yè)面的一些基本描述語(yǔ)句。META的屬性包括：Description，網(wǎng)頁(yè)的描述信息；Keywords，關(guān)鍵字，當(dāng)搜索引擎查找時(shí)，按此關(guān)鍵字查找；Content-type，用來(lái)設(shè)置該網(wǎng)頁(yè)的編碼；Author，用來(lái)設(shè)置該網(wǎng)頁(yè)的作者姓名；Refresh，用來(lái)設(shè)置網(wǎng)頁(yè)的自動(dòng)更新。當(dāng)CONTE

5、NT =3; URL= :/ 時(shí)，該網(wǎng)頁(yè)打開(kāi)3秒鐘后，就自動(dòng)的轉(zhuǎn)到網(wǎng)站 HTML的常用標(biāo)記 HTML的常用標(biāo)記有一些共同特點(diǎn)：都放在BODY標(biāo)記里面。常用的標(biāo)記有字體標(biāo)記、圖片標(biāo)記、超級(jí)鏈接、列表、表格和表單等。字體標(biāo)記 處理文字時(shí)通常利用如“ xx”的標(biāo)記定義字符xx的字體顯示為隸書(shū)，字號(hào)是40，顏色是紅色。程序說(shuō)明如何使用文字格式。 序號(hào) 標(biāo)記 說(shuō) 明 1字體加粗、斜體和下劃線標(biāo)記用來(lái)使文本以黑體字的形式輸出，也可用標(biāo)記。用來(lái)使文本以斜體字的形式輸出；用來(lái)使文本以下加一劃線的形式輸出。2字體大小和顏色設(shè)置標(biāo)記 可以對(duì)輸出文本的字體大小、顏色進(jìn)行隨意地改變，這些改變主要是通過(guò)對(duì)它的兩個(gè)屬性s

6、ize和color的控制來(lái)實(shí)現(xiàn)的。size屬性用來(lái)改變字體的大小，其取值可以為1至7（從小到大）；而color屬性則用來(lái)改變文本的顏色，顏色的取值是RGB顏色碼或HTML語(yǔ)言給定的顏色常量名。RGB顏色碼可用#RRGGBB的16進(jìn)制來(lái)表示，RR、GG、BB分別表示紅、綠、藍(lán)顏色分量，將0255之間的數(shù)字以16進(jìn)制表示。 3標(biāo)題字體大小標(biāo)記 用于描繪網(wǎng)頁(yè)的新的小節(jié)和子小節(jié)有7個(gè)標(biāo)題，依次為到。這些標(biāo)題的字體大小依次從大到小。 序號(hào) 標(biāo)記 說(shuō) 明 4段落標(biāo)記 段落標(biāo)記的作用是將標(biāo)記之間的文本內(nèi)容自動(dòng)組成一個(gè)完整的段落。一個(gè)段落是有格式的，因此段落標(biāo)記往往與align(對(duì)齊方式)屬性共同使用。使用的

7、語(yǔ)法是,其中，屬性align的值可以取“l(fā)eft”(左對(duì)齊)、“center”(居中)和“right”(右對(duì)齊)。5文本換行標(biāo)記 用來(lái)創(chuàng)建一個(gè)軟回車(chē)換行,沒(méi)有結(jié)束標(biāo)記。在標(biāo)記后鍵入,則會(huì)在該段落與下一個(gè)段落會(huì)創(chuàng)建一個(gè)大的回車(chē)換行，造成行距較大；如果在段落標(biāo)記之間鍵入,則會(huì)導(dǎo)致行距較小。標(biāo)記可將其中的文本段自動(dòng)換行顯示。 6文本縮進(jìn)標(biāo)記 在文本縮進(jìn)標(biāo)記()之間加入的文本將會(huì)在瀏覽器中按兩邊縮進(jìn)的方式顯示出來(lái)。7文本居中標(biāo)記可將其中的文本居中顯示。 8特殊符號(hào)的表示 標(biāo)記在網(wǎng)頁(yè)中可劃一條指定粗細(xì)和長(zhǎng)短的水平線。例如 表示劃一條右對(duì)齊的粗紅線。、 、 、&、&123;等顯示在瀏覽器中分別表示為空格、

8、&、符號(hào)。序號(hào)標(biāo)記 說(shuō) 明 9列表標(biāo)記 (1)、和用來(lái)創(chuàng)建一個(gè)普通的列表，用來(lái)創(chuàng)建列表中的上層項(xiàng)目，用來(lái)創(chuàng)建列表中最下層項(xiàng)目，和都必須放在標(biāo)記對(duì)之間。(2)、和標(biāo)記對(duì)用來(lái)創(chuàng)建一個(gè)標(biāo)有順序的列表；標(biāo)記對(duì)用來(lái)創(chuàng)建無(wú)順序的列表；(li是list item的縮寫(xiě)，即列表項(xiàng)目)標(biāo)記對(duì)只能在或標(biāo)記對(duì)之間使用，此標(biāo)記對(duì)用來(lái)創(chuàng)建一個(gè)列表項(xiàng)，若放在之間則每個(gè)列表項(xiàng)加上一個(gè)數(shù)字，若在之間則每個(gè)列表項(xiàng)加上一個(gè)圓點(diǎn)。無(wú)序列表和有序列表分別與Microsoft Word中項(xiàng)目符號(hào)和編號(hào)相對(duì)應(yīng)。它們的含義是一樣的。 10文本塊標(biāo)記 標(biāo)記對(duì)用來(lái)排版大塊段落，此標(biāo)記的用法與標(biāo)記非常相似，同樣可以使用align屬性。此處也是文

9、本塊標(biāo)記，用法和div標(biāo)記類似，但該文本塊起始和結(jié)束不換行。div和span標(biāo)記除可用作文本編輯塊功能外還可用作容器標(biāo)記，也即按鈕、文本框等各種標(biāo)記放在div或span里面將作為它的子對(duì)象元素處理。標(biāo)記與標(biāo)記作用相同，就是顯示一塊文本，但里面的字體只能是斜體，主要用來(lái)在網(wǎng)頁(yè)上放置署名信息。 圖片標(biāo)記 利用“”格式可以插入一張圖片，文件必須和該HTML文件放在同一個(gè)目錄下。IMG是HTML的一個(gè)標(biāo)記，是IMAGE的縮寫(xiě)；SRC屬性給出要連接的圖片的路徑和文件名 序號(hào)標(biāo)記說(shuō) 明 1圖像標(biāo)記 標(biāo)記格式為：其中SRC表示圖像來(lái)源(Source)文件所在的URL地址，alt表示將鼠標(biāo)移到該圖像上出現(xiàn)的文

10、字提示text_1，border表示圖像對(duì)象的邊界厚度為n_1，height和width分別表示圖像的高度和寬度分別為n_2和n_3，hspace和vspace表示圖像橫向和縱向的空白邊幅分別為n_3和n_4.。align表示圖像的放置方式，mode= ABSBOTTOM | ABSMIDDLE | BASELINE | BOTTOM | LEFT | MIDDLE | RIGHT | TEXTTOP | TOP。2視頻與動(dòng)畫(huà)標(biāo)記 標(biāo)記格式為：其中dynsrc表示視頻與動(dòng)畫(huà)來(lái)源文件所在的URL地址，其他標(biāo)記內(nèi)容同圖像顯示標(biāo)記。start=fileopen表示W(wǎng)eb頁(yè)面一被裝入便播放；Start

11、= onmouseover表示當(dāng)鼠標(biāo)從該區(qū)域滑過(guò)時(shí)才播放。Loop表示視頻或動(dòng)畫(huà)播放的重復(fù)次數(shù)，為infinite或?yàn)樨?fù)數(shù)時(shí)表示無(wú)限循環(huán)。 3聲音處理標(biāo)記格式為：超級(jí)鏈接 使用超級(jí)鏈接的基本的語(yǔ)法是：XX。XX是一個(gè)超級(jí)鏈接，連接到文件；是單詞Anchor的縮寫(xiě)，中文的意思是“錨”，功能是從一個(gè)頁(yè)面鏈接到另一個(gè)頁(yè)面；屬性HREF定義的是鏈接到哪一頁(yè)。 書(shū)簽鏈接 如果某個(gè)頁(yè)面很大，為了加強(qiáng)層次感，需要引入書(shū)簽鏈接。使用的方法和超級(jí)鏈接類似。 電子郵件鏈接 電子郵件鏈接提供了當(dāng)點(diǎn)擊頁(yè)面上的鏈接時(shí)，將自動(dòng)打開(kāi)默認(rèn)的郵件發(fā)送程序發(fā)郵件。 列表 列表有兩種方式，一種是有序列表，另一種是無(wú)序列表。無(wú)序列表

12、是所有的行之前都有一個(gè)小圓圈，而有序列表是自動(dòng)排序的，前面有序號(hào)。 有序列表標(biāo)記有序列表使用編號(hào)，而不是項(xiàng)目符號(hào)來(lái)編排項(xiàng)目。列表中的項(xiàng)目采用數(shù)字或英文字母開(kāi)頭，通常各項(xiàng)目間有先后的順序性。在有序列表中，主要使用和兩個(gè)標(biāo)記?；菊Z(yǔ)法 項(xiàng)目一 項(xiàng)目二 項(xiàng)目三 語(yǔ)法解釋在有序列表中，使用作為有序的聲明，使用作為每一個(gè)項(xiàng)目的起始。無(wú)序列表標(biāo)記在無(wú)序列表中，各個(gè)列表項(xiàng)之間沒(méi)有順序級(jí)別之分，它通常使用一個(gè)項(xiàng)目符號(hào)作為每個(gè)列表項(xiàng)的前綴。無(wú)序列表主要使用、幾個(gè)標(biāo)記和type屬性?；菊Z(yǔ)法 項(xiàng)目一 項(xiàng)目二 項(xiàng)目三 語(yǔ)法解釋在無(wú)序列表中，使用作為無(wú)序的聲明，使用作為每一個(gè)項(xiàng)目的起始?；颈砀?是表格的基本標(biāo)記。代

13、表表格的行，代表表格的列。定義一個(gè)三行兩列的表格如程序所示。表格的靈活應(yīng)用 （1）ROWSPAN和COLSPAN屬性的使用方法。利用ROWSPAN屬性設(shè)置該單元格占用多行，利用COLSPAN屬性設(shè)置該單元格是占用多列。 Cellpadding和Cellspacing（2）Cellpadding和Cellspacing屬性的使用方法。Cellpading的意思是單元格的邊距，指的是字與單元格邊框的距離。Cellspacing的意思是單元格間距，指的是單元格之間的距離。 表格的樣式 BORDERCOLOR屬性設(shè)置表格邊框的顏色，BGCOLOR屬性設(shè)置背景顏色，ALIGN屬性設(shè)置表格的對(duì)齊方式，標(biāo)記

14、是將內(nèi)部的文字加粗顯示。顯示的結(jié)果 表單 表單的功能是收集用戶信息實(shí)現(xiàn)系統(tǒng)與用戶交互。比如E-mail信箱的注冊(cè)頁(yè)面就是一個(gè)十分典型的表單頁(yè)面。表單信息的處理過(guò)程為：當(dāng)單擊表單中的提交按鈕時(shí)，表單中的信息就會(huì)上傳到服務(wù)器中，然后由服務(wù)器端的應(yīng)用程序（例如CGI，ASP，PHP或JSP等）進(jìn)行處理，處理后將用戶提交的信息存儲(chǔ)在服務(wù)器端的數(shù)據(jù)庫(kù)中，或者將有關(guān)信息返回到客戶端瀏覽器上。（1）表單頭及其屬性表單的通用格式是：XX 。表單元素包含在標(biāo)記中，有兩個(gè)重要的屬性：METHOD=“Post”或“Get”，Post和Get方式的區(qū)別在于Post是一種郵寄的方式，在瀏覽器的地址欄中不顯示提交的信息，

15、這種方式傳送的數(shù)據(jù)量的大小沒(méi)有限制；Get方式將信息傳遞到瀏覽器的地址欄上，最大傳輸?shù)男畔⒘渴? KB。當(dāng)不指明是哪種方式時(shí)，默認(rèn)為Get方式。Action屬性是設(shè)置利用哪個(gè)文件來(lái)處理所提交的數(shù)據(jù)。 （2）表單中常用控件在常用的表單制作過(guò)程中，經(jīng)常遇到的是按鈕制作、輸入元素的制作等。常見(jiàn)的表單控件包括文本框、文本域、密碼框、多選框、單選框和下拉列表框，等等。除了文本域和下拉列表，其他只要修改TYPE屬性就可以了，使用方法如程序所示。序號(hào)標(biāo)記 說(shuō) 明1表單 表單（Form）用于從用戶（站點(diǎn)訪問(wèn)者）收集信息，然后將這些信息提交給服務(wù)器進(jìn)行處理。表單中可以包含允許用戶進(jìn)行交互的各種控件，例如：文本框

16、、列表框、復(fù)選框和單選按鈕等。用戶在表單中輸入或選擇數(shù)據(jù)之后將其提交，該數(shù)據(jù)就會(huì)送交給表單處理程序進(jìn)行處理。表單的使用包括兩個(gè)部分內(nèi)容：一部分是用戶界面，提供用戶輸入數(shù)據(jù)的元件；另一部分是處理程序，可以是客戶端程序，在瀏覽器中執(zhí)行，也可以是服務(wù)器處理程序，處理用戶提交的數(shù)據(jù)，返回結(jié)果。表單通過(guò)FORM標(biāo)記來(lái)定義: 2普通按鈕 提交按鈕復(fù)位按鈕 使用Input標(biāo)記可以在表單中添加3種類型的按鈕：提交按鈕、重置按鈕和自定義按鈕。創(chuàng)建按鈕的方法如下： 序號(hào)標(biāo)記說(shuō) 明3文本框 在表單中添加文本框可以獲取站點(diǎn)訪問(wèn)者提供的一行信息。創(chuàng)建文本框方法如下：4文本區(qū)域 在表單中添加文本區(qū)域可以接受站點(diǎn)訪問(wèn)者輸入

17、多于一行的文本。創(chuàng)建文本區(qū)域方法如下：初始值 5復(fù)選框 在表單中添加復(fù)選框可以讓站點(diǎn)訪問(wèn)者去選擇一個(gè)或多個(gè)選項(xiàng)或不選項(xiàng)。創(chuàng)建復(fù)選框的方法如下： 選項(xiàng)文本 6選項(xiàng)按鈕在表單中添加選項(xiàng)按鈕可以讓站點(diǎn)訪問(wèn)者從一組選項(xiàng)中選擇其中之一。在一組單選按鈕中，一次只能選擇一個(gè)。創(chuàng)建選項(xiàng)按鈕方法如下： 選項(xiàng)文本7選項(xiàng)菜單 表單中的選項(xiàng)菜單讓站點(diǎn)訪問(wèn)者從列表或菜單中選擇選項(xiàng)。菜單中可以選擇一個(gè)選項(xiàng)，也可以設(shè)置為允許作多重選擇。創(chuàng)建選項(xiàng)菜單方法如下：選項(xiàng)1選項(xiàng)2序號(hào)標(biāo)記說(shuō) 明8文件域 文件域由一個(gè)文本框和一個(gè)“瀏覽”按鈕組成，用戶既可以在文本框中輸入文件的路徑和文件名，也可以通過(guò)單擊“瀏覽”按鈕從磁盤(pán)上查找和選擇所

18、需文件。文件域一般用于選擇文件上載到服務(wù)器。創(chuàng)建文件域方法如下： 9分組框可以使用FieldSet標(biāo)記對(duì)表單控件進(jìn)行分組，從而將表單細(xì)分為更小、更易于管理的部分。FieldSet標(biāo)記必須以Legend標(biāo)記開(kāi)頭，以指定控件組的標(biāo)題，在Legend標(biāo)記之后可以跟其他表單控件，也可以嵌套FieldSet。創(chuàng)建表單控件分組的方法如下：控件組標(biāo)題組內(nèi)表單控件 塊級(jí)元素 塊級(jí)元素包括DIV和SPAN兩種標(biāo)記。DIV稱為層標(biāo)記，有時(shí)也稱為塊標(biāo)記。利用DIV標(biāo)記和CSS的定位技術(shù)可以做出相當(dāng)出色的效果。SPAN標(biāo)記和DIV標(biāo)記的基本語(yǔ)法是一樣的，但SPAN標(biāo)記和DIV標(biāo)記的區(qū)別還是很大的。使用方法如程序所示。

19、預(yù)排版標(biāo)記 包含在預(yù)排版標(biāo)記中的字符會(huì)按照HTML原碼的格式輸出到瀏覽器上。HTML文件中的英文空格一般不起作用，但是在預(yù)排版標(biāo)記中空格可以顯示出來(lái)。語(yǔ)法如程序文件所示 設(shè)計(jì)網(wǎng)頁(yè)框架 設(shè)計(jì)網(wǎng)頁(yè)時(shí)，經(jīng)常用到的一種格式是框架。基本網(wǎng)頁(yè)框架分成兩種，左右框架和上下框架。語(yǔ)法如程序文件所示。幀技術(shù)又叫框架技術(shù)。迄今為止，我們所提到的所有網(wǎng)頁(yè)都能鏈接到其他網(wǎng)頁(yè)，但是每次只能顯示一個(gè)網(wǎng)頁(yè)，為了能夠在同一瀏覽器中顯示多個(gè)頁(yè)面，則必須使用幀技術(shù)。分幀式網(wǎng)頁(yè)起始于開(kāi)始標(biāo)記。幀集有兩個(gè)重要屬性，即cols屬性(列屬性)和rows屬性(行屬性)，其中cols屬性給出了幀集頁(yè)面的縱向布局，而rows屬性則給出了幀集頁(yè)

20、面的橫向布局。這兩個(gè)屬性會(huì)指定每個(gè)幀的寬度，或像素值，或所占屏幕的百分比。例如告訴瀏覽器該網(wǎng)頁(yè)有兩個(gè)幀，第一個(gè)從屏幕左側(cè)擴(kuò)展了110個(gè)像素點(diǎn)，第二個(gè)幀填充了屏幕的剩余部分。幀集標(biāo)記只說(shuō)明在一個(gè)瀏覽器中可以有多少個(gè)頁(yè)面，但是每個(gè)頁(yè)面該如何表達(dá)，是標(biāo)記無(wú)法實(shí)現(xiàn)的，因此在內(nèi)必須將每個(gè)幀的內(nèi)容表達(dá)出來(lái)。HTML是通過(guò)在內(nèi)嵌套來(lái)實(shí)現(xiàn)的。幀標(biāo)記常用的格式為：name屬性是標(biāo)識(shí)幀，而src則表示在該幀中建立一個(gè)超鏈接。幀標(biāo)記往往與下面的格式一起使用：其作用是在name屬性為“main”的幀中加載頁(yè)面。而標(biāo)記對(duì)也是放在標(biāo)記對(duì)之間，用來(lái)在那些不支持幀的瀏覽器中顯示文本或圖像信息。Iframe標(biāo)記(浮動(dòng)幀標(biāo)記)可

21、用它將一個(gè)HTML文檔嵌入在一個(gè)HTML中顯示。它不同于Frame標(biāo)記，IFRAME最大的特征是所引用的HTML文件不是與另外的HTML文件相互獨(dú)立顯示，而是可以直接嵌入在一個(gè)HTML文件中，與這個(gè)HTML文件內(nèi)容相互融合，成為一個(gè)整體，另外，還可以多次在一個(gè)頁(yè)面內(nèi)顯示同一內(nèi)容，而不必重復(fù)寫(xiě)內(nèi)容，一個(gè)形象的比喻即“畫(huà)中畫(huà)“電視。Iframe標(biāo)記的使用格式是： 在腳本語(yǔ)言與對(duì)象層次中，包含Iframe的窗口我們稱之為父窗體，而浮動(dòng)幀則稱為子窗體，弄清這兩者的關(guān)系很重要，因?yàn)橐诟复绑w中訪問(wèn)子窗體或相反都必須清楚對(duì)象層次，才能通過(guò)程序來(lái)訪問(wèn)并控制窗體。 Iframe雖然內(nèi)嵌在另一個(gè)HTML文件中，

22、但它保持相對(duì)的獨(dú)立，是一個(gè)“獨(dú)立王國(guó)“，在單一HTML中的特性同樣適用于浮動(dòng)幀中。 通過(guò)Iframe標(biāo)記，可將那些不變的內(nèi)容以Iframe來(lái)表示，這樣，不必重復(fù)寫(xiě)相同的內(nèi)容，這有點(diǎn)象程序設(shè)計(jì)中的過(guò)程或函數(shù)，節(jié)省了很多繁瑣的操作。它使頁(yè)面的修改更為方便，不必因?yàn)榘媸降恼{(diào)整而修改每個(gè)頁(yè)面，只需修改一個(gè)父窗體的版式即可了。 有一點(diǎn)要注意，Nestscape瀏覽器不支持Iframe標(biāo)記。例如： 案例2-2 使用框架一般情況下工程的主頁(yè)面都采用這種框架格式，在上面的頁(yè)面放置網(wǎng)站的圖片，右邊放置主頁(yè)面，左邊放一個(gè)下拉菜單?？梢韵駥?duì)普通Windows窗口一樣操作網(wǎng)頁(yè)框架，可以最大化窗口頁(yè)可以最小化窗口，修改

23、案例2-2右框架的代碼，如案例2-3所示。 MARQUEE標(biāo)記 使用的基本語(yǔ)法是：xx，顯示的效果是xx就會(huì)從屏幕一邊跑到另外一邊。 啦啦啦，我從右向左移！ 啦啦啦，我從左向右移！ 啦啦啦，我一圈一圈繞著走！ 啦啦啦，我只走一次就歇了！ 啦啦啦，我來(lái)回走！ 啦啦啦，我走一步，停一停！作業(yè)1制作網(wǎng)站相冊(cè)制作網(wǎng)站相冊(cè)，有很多種形式，包括個(gè)人網(wǎng)站相冊(cè)、公司產(chǎn)品展示、網(wǎng)站圖庫(kù)。公司產(chǎn)品展示，主要是產(chǎn)品展示系統(tǒng)的制作，提供產(chǎn)品圖片及產(chǎn)品說(shuō)明。網(wǎng)站圖庫(kù)提供了很多精美圖片素材，供愛(ài)好者欣賞及下載。而本課堂練習(xí)講述的則是個(gè)人網(wǎng)站相冊(cè)的制作。有許多個(gè)人網(wǎng)站都有自己的相冊(cè)欄目，其實(shí)將幾十個(gè)甚至幾百個(gè)相片制作成網(wǎng)頁(yè)

24、格式的相冊(cè)非常簡(jiǎn)單，可以通過(guò)Dreamweaver 8自帶的【創(chuàng)建網(wǎng)站相冊(cè)】命令來(lái)制作自己的網(wǎng)站相冊(cè)。通過(guò)該命令創(chuàng)建的相冊(cè)以普通的HTML網(wǎng)頁(yè)格式出現(xiàn)，并且具有導(dǎo)航功能，可以方便地瀏覽查看照片。可以自動(dòng)生成一個(gè)Web站點(diǎn)，該站點(diǎn)展示位于給定文件夾中圖像的“相冊(cè)”。Dreamweaver 8使用Fireworks來(lái)為該文件夾中的每個(gè)圖像創(chuàng)建一個(gè)縮略圖和一個(gè)較大尺寸的圖像。然后，Dreamweaver 8創(chuàng)建一個(gè)Web頁(yè)，它包含所有縮略圖以及指向較大圖像的鏈接。作業(yè)2制作友情鏈接頁(yè)面友情鏈接包括文字鏈接和圖片鏈接，文字鏈接一般是網(wǎng)站的名稱；圖片鏈接包括LOGO鏈接和BANNER鏈接，也就是通常所說(shuō)

25、的廣告條。 CSS概述 1998年5月12日，CSS level 2才成為W3C 的標(biāo)準(zhǔn)，它是一組樣式，樣式中的屬性在HTML元素中依次出現(xiàn)，并顯示在瀏覽器中。樣式可以定義在HTML文檔的標(biāo)志里，也可以在外部附加文檔作為外加文檔。CSS的功能無(wú)比強(qiáng)大，W3C也極力向世界推廣這一先進(jìn)技術(shù)。HTML是一種標(biāo)記語(yǔ)言，而CSS是這種標(biāo)記的一種重要擴(kuò)展，可以進(jìn)一步美化頁(yè)面。換句話說(shuō)，CSS是一種用來(lái)裝飾HTML的標(biāo)記集合。為什么要使用CSS呢？原因主要有如下四點(diǎn)：（1）彌補(bǔ)HTML對(duì)網(wǎng)頁(yè)格式化功能的不足，比如段落間距，行距等。（2）字體變化和大小。（3）頁(yè)面格式的動(dòng)態(tài)更新。（4）排版定位等。例如：HTM

26、L標(biāo)記選擇符直接用HTML標(biāo)記或HTML元素名稱作為CSS選擇符，例如：td,input,select,body font-family:Verdana;font-size:12px;form,body margin:0;padding:0;select,body,textarea background:#fff;font-size:12px;select font-size:13px;textarea width:540px;border:1px solid #718da6;img border:nonea text-decoration:underline;cursor:pointer;h

27、1 color: #ff0000 例如：用戶定義的類選擇符 使用類選擇符能夠把相同的標(biāo)記分類定義成不同的樣式，定義類選擇符時(shí)，在自定義類的名稱前面加一個(gè)點(diǎn)號(hào)。假如你想要兩個(gè)不同的段落，一段落向右對(duì)齊，一個(gè)段落居中，你可以先定義兩個(gè)類： text-align: right text-align: center 如果要用在不同的段落里，只要在HTML標(biāo)記里加入前面定義的類：這個(gè)段落向右對(duì)齊的這個(gè)段落是居中排列的 用戶定義的類選擇符的一般格式是： property: value; 定義超級(jí)鏈接樣式 可以指定A標(biāo)記以不同的方式顯示。一個(gè)超級(jí)鏈接有幾種不同的狀態(tài)：未被訪問(wèn)鏈接（Link）、已訪問(wèn)鏈接（V

28、isited）和鼠標(biāo)移動(dòng)過(guò)（Hover）?？梢远x超級(jí)鏈接文字的顏色，可以定義字體的大小，一般超級(jí)鏈接都有下劃線，可以利用“TEXT-DECORATION:NONE”將超級(jí)鏈接的下劃線去掉。 加載CSS樣式的三種方式 使用CSS來(lái)格式化網(wǎng)頁(yè)，共有三種方式：在HEAD中引用方法A:標(biāo)簽在BODY中引用方法B:行內(nèi)樣式作為文件來(lái)引用方法C:外部樣式表,鏈接或?qū)?鏈入外部樣式表 鏈入外部樣式表是把樣式表保存為一個(gè)CSS文件，在HTML的頭信息標(biāo)識(shí)符里添加標(biāo)記鏈接到這個(gè)CSS文件即可使用。外部樣式表不能含有任何像或這樣的HTML標(biāo)記，僅僅由樣式規(guī)則或聲明組成，并且只能以.CSS為擴(kuò)展名。標(biāo)記放置在HTML文檔頭部，屬性主要有rel，href，type，media。導(dǎo)入外部樣式表 導(dǎo)入外部樣式表是指在HTML文