【資料總結】html開發小實例

時間 2019-11-22

標籤資料總結 html 開發實例欄目 HTML 简体版

原文原文鏈接

目錄css

第1章 1html

HTML的基本標籤 1git

第2章 25程序員

表格基礎 25web

第3章 53編程

表單和框架 53api

第4章 77瀏覽器

CSS樣式表 77安全

第5章 104服務器

使用Dreamweaver製做網頁 104

第6章 134

網站設計和頁面佈局技術（一） 134

第7章 156

網站設計和頁面佈局技術（二） 156

Lab Guide 183

HTML的基本標籤 184

第1章

HTML的基本標籤

本章工做任務

制製做圖文並茂的「廣告「頁面

本章技能目標

會使用HTML的基本結構建立網頁

會使用文本相關標籤實現文字修飾和佈局

會使用圖像相關標籤實現圖文並茂的頁面

會使用超連接相關標籤實現頁面的跳轉

² 本章簡介

在當今社會中，網絡已成爲人們生活的一部分，網絡提供的服務主要是以網頁的形式展示出來。HTML是建立網頁的基礎語言。若是不瞭解HTML（超文本標記語言），就談不上網頁設計。HTML也是WEB用於建立和識別文檔的標準語言。這些標記都是經過使用標籤來完成的，標籤可指定網頁的瀏覽器中的顯示方式。本章就來介紹HTML的基本結構。文本相關標籤，圖像<IMG>標籤，頁面連接<A> 標籤，滾動<MARQUEE>標籤等，使你們對HTML的基本標籤有深刻的瞭解，爲後面的學習打下堅實的基礎，其中重點是文本，圖像，連接標籤的應用，難點是各類標籤的綜合應用。

² 本章單詞

請在預習前完成下列單詞：

已學單詞複習：

本章新單詞：

1.head: ________________ 2.title_______________________

3.body:_______________ 4.font: ______________________

5.align: ______________ 6.image: ______________________

7.marquee: _________________ 8.scrolldelay: ___________________

9.direction: ____________

1.1 HTML文件的基本結構

完整的HTML文件至少包括<HTML>標籤、<TITLE>標籤和<BODY>標籤，而且這些標籤都是成對出現的，而且這些標籤都是成對出現的，開頭標籤爲<>，結束標籤爲</>,在這兩個標籤之間添加內容。經過這些標籤中的相關屬性能夠設置頁面的背景色，背景圖像等。

1.1.1 爲何要使用表格

HTML文件主要由3部分組成。

Ø HTML部分：HTML部分以<HTML>標籤開始，以</HTML>標籤結束。

<HTML>

……

</HTML>

Ø 頭部：頭部以<HEAD>標籤開始，以</HEAD>標籤結束。這部分包括顯示在網頁標題欄中的標題和其餘在網頁中不顯示的信息。標題包含在<TITLE>和</TITLE>標籤之間。

<HEAD>

<HEAD>

Ø 主體部分：主體部分包含在網頁中顯示的文本，圖像和連接。主體部分以<BODY>標籤結束。

<BODY>

……

</BODY>

HTML文檔的結構：

1.1.2 使用記事本建立網頁

建立一個HTML文檔，須要兩個工具：一個是文本編輯器（如記事本、UE等），一個是用戶查看HTML文檔效果的WEB瀏覽器（如Internet Explorer）。下面咱們就使用Windows自帶的記事原本快速編寫第一個HTML文件效果。

（1）單擊「開始「→」程序「→」附件「→」記事本「→」菜單「

（2）在記事本中輸入如圖1.2所示的HTML代碼，輸入代碼後的記事本如圖1.2所示。

（3）單擊記事本菜單中的「文件→保存」菜單，彈出「另存爲」對話框，在對話框中選擇存盤的文件夾，而後在「保存類型」下拉列表框中選擇「全部文件」選項，在「編碼」下列框中選擇的「ANSI」選項，保存文件名爲my_firstPage.html,如圖1.3所示，最後單擊「保存」按鈕。

（4）回到存盤的文件夾，使用WEB瀏覽器打開my_firstPage.html文件，能夠看到最終的頁面效果，如圖1.4所示。

圖1.3 「另存爲」對話框圖1.4查看效果

1.1.3 使用記事本建立網頁

<META>標籤出如今網頁的標題部分。這是一個特殊的HTML標籤，提供相關網頁的信息，有時候在網上衝浪，發現有些網頁中的文字是亂碼，這是怎麼回事呢？其實就是<META>標籤中charset屬性沒有正確地設置編碼語系。若是咱們正確地設置了網頁語言編碼方式，瀏覽器就會正確地顯示網頁中的內容，而不會出現亂碼。要將gb2312指定爲，默認字符集類型，則使用如下<META>標籤：

<HEAD>

</HEAD>

其中charset用於設置網頁的編碼語序，簡體中文網頁使用charset=gb2312,繁體中文使用charset=big5,英文網頁建議使用iso-8859-1,或者不設置編碼也可。根據本身所在的國家或頁面主體使用的語言類型所對應的編碼語系來正確地設置charset,這樣能夠避免網頁中的亂碼。像在中國建議把charset設置爲」gb2312」。

1.1.4 頁面背景色或背景圖像

在默認狀況下，使用web瀏覽器瀏覽網頁時，其背景色爲白色，若是我想把背景色換成好看的顏色或圖片怎麼辦？其實很簡單，使用bgcolor屬性能夠改變網頁的背景色，使用backgroud屬性能夠把網頁的背景設計爲圖片。

語法

設置網頁的背景色或背景圖像：

<body bgcolor=」#FFCCFF」 background=」back_image.GIF」>///背景顏色

HELLO WORLD！

<body>

如示例1所示爲設置網頁背景的代碼。

示例1

<HTML>

<HEAD>

<TITLE>個人第一個網頁 </TITLE>

</HEAD>

<BODY>

Hello World!

</BODY>

</HTML>

示例1在瀏覽器中瀏覽效果如圖1.5所示。若把示例1中<BODY bgcolor=」#FFCCFF」>這一部分改成<BODY backgroud=」back_image.GIF」>以後，在瀏覽器中瀏覽效果如圖1.6所示。

圖1.5 設置網頁的背景色圖1.6 設置網頁的背景圖像

1.2 使用記事本建立網頁

文本是網頁不可缺乏的元素之一，是網頁發佈信息所使用的主要形式。爲了讓網頁中的文本看上去編排有序，整齊美觀，錯落有序，咱們就要設置文本的大小、顏色、字體類型以及換行換段等。

1.2 字體字號相關標題

一、標題標籤

標題能分爲分隔大段文字，歸納下文內容，根據邏輯結構安排信息。標題具備吸引讀者的提示做用，並且代表了文章的內容，讀者會根據標題據頂是否閱讀此文章。標題的重要性因而可知一斑。

HTML提供了六級標題，<H1>爲最大，<H6>爲最小。用戶只需定義從H1到H6中的一種大小，瀏覽器將負責顯示過程。

示例2顯示了指定各級標題的HTML文件。

示例2

<HTML>

<HEAD>

<TITLE>不一樣等級標題標籤對比</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

示例2在瀏覽器中預覽效果如圖1.7所示。

圖1.7 不一樣級別的標題輸出結果

2.<FONT>標籤

<FONT>標籤用於控制網頁上下文本的顯示外觀。文本大小，字體類型和顏色等屬性均可以使用<FONT>標籤指定。

語法

< FONT SIZE=’’+2」 COLOR=」RED FACE=」隸書」>

文本內容

</FONT>

其中,size屬性用來設置字體大小，能夠爲字體指定的大小範圍1~7.最大爲7，最小爲1.也能夠使用一個默認字體大小，而後相對於默認大小指定後續字體的大小例如：size默認大小爲3，則size=+4將使大小增長到7，size=-1將使大小減小到2。Color屬性用於指定字體的顏色，能夠指定顏色名稱或十六進制值。Face屬性用於指定字體的類型。

2.特殊符號

某些字符在HTML中具備特殊意義，如小於號（<）即定義HTML標籤的開始。要在瀏覽器中顯示這些特殊字符，就必須在HTML文檔中使用字符實體。

字符實體由3個部分組成：&號，實體名和分號；。

例如，要在HTML文檔中顯示小於號，則使用<；

表1-1顯示的字符實體用於顯示HTML文檔中的特殊字符。

表1-1用於顯示HTML文檔中的特殊字符

特殊字符	轉義碼	示例
空格		<p>移動 \| 100\| 聯通\| 50</p>
大於(>)	>	If A >B Then <Br> A=A+1
小於(<)	<	If A<；B Then <BR> A=A+1
引號(「」)	"	<P>"淘寶網"</ P >
版權號(© )	©	<P>Copyright;淘寶網©2007</ P >

示例3

<HTML>

<HEAD>

<TITLE>文本相關標記的應用</TITLE>

</HEAD>

<BODY>

手機充值、IP卡/電話卡 </FONT><BR />

移動 | 100 | 聯通 | 50</P>

</BODY>

</HTML>

示例3在瀏覽器中預覽效果如圖1.8所示。

圖1.8 FONT標籤和特殊字符應用效果

1.2.2 行的控制相關標籤

1．段落標籤<Br>

若是是在寫一篇文章，則要將這些內容分組成一系列段落。目的是要將這些邏輯思想組合一塊兒，並對其內容應用某些格式和佈局。在HTML文檔中，能夠將文本內容組合爲多個段落。段落標記</P>用於標記段落的開始，段落結束標記</P>是可選的，爲了養成良好的編程習慣，建議不要省略段落結束標記</P>.

你還能夠經過段落的align屬性，設置段落的對齊方式，如左對齊、居中、右對齊，如示例4所示，輸出結果如圖1.9所示。

2.換行標籤<BR>

<BR>標籤在用戶要結束一行但又不想開始一個新的段落時使用。只要在文本中放入<BR>標籤，就會強制換行。

示例4

<HTML>

<HEAD>

<TITLE>文本相關標記的應用</TITLE>

</HEAD>

<BODY>

手機充值、IP卡/電話卡 </FONT><BR>

移動 | 100 | 聯通 | 50</P>

<P align="center">淘寶集市歡迎您！</P>

<P align="left">淘寶網首屆翠友會！<BR>

想作最閃亮的mm嗎 <BR>

千餘中獎機會有你嗎 <BR>

淘寶入選平安網站

</P>

</BODY>

</HTML>

示例4在瀏覽器中預覽效果如圖1.9所示。

圖1.9 換行換段標籤應用效果

1.3 圖像標籤

文本使用網頁的內容獲得充實，那圖像使用網頁的內容更加豐富多彩。使用圖像不只可以使用網頁更加美觀、大方、整潔、形象和生動，並且能給網頁增添無限生機，從而吸引更多的瀏覽者。所以圖像在網頁中的做用是舉足輕重的。做爲一個網頁設計者，掌握好網頁中的圖像的應用尤其重要。下面咱們就開始介紹經常使用的圖片格式，以及如何在網頁中實現圖文並茂的頁面。

1.3.1常見的圖片格式

1.JPG

JPG(JPGE)格式圖像是在Internet上被普遍支持的圖像格式，它是聯合圖像專家組文本格式(Joint Photographic Experts Group)的英文縮寫。JPG格式採用的是有損壓縮，會形成圖像畫面的失真，不過壓縮以後的體積很小，並且比較清晰，因此比較適合在網頁中應用。

此格式最合適用於攝影或連續色調圖像的高級格式，這是由於JPG文件能夠包含數百萬中顏色。隨着JPG文件品質的提供，文件的大小和下載事件會隨之增長。一般能夠經過壓縮JPG文件在圖像品質和問價大小之間達到良好的平衡。

製做JPG文件的軟件不少，比較常見的有PHOTOSHOP、HYPERSNAP等。

2.GIF

GIF圖像是網頁中使用最普遍，最普通的一種格式，它是圖像交換格式(Graphics Interchange Format)的英文縮寫。GIF文件的衆多特色偏偏適應了Internet的須要，因而成了Internet上最流行的圖形格式，它的出現成爲了Internet注入了一股新鮮的活力。GIF格式圖像採用的是無損壓縮，因爲只支持256色，因此GIF格式圖像體積很小。支持透明色，使得GIF在網頁的背景和一些多層特效的顯示上用的很是多，還支持幀動畫，這是它最突出的一個特色。要設計GIF動畫，首先要用圖像處理軟件作好GIF動畫中的每一幅畫面，而後再用專門的GIF動畫軟件把這些靜止的畫面連在一塊兒，在定好幀與幀之間的時間間隔，最後保存成GIF格式就能夠了。

製做GIF文件的軟件也不少，比較常見的有PHOTOSHOP、GIF Contruts SET等。

3，SWF

SWF動畫是網頁中應用很是普遍的一種多媒體圖像動畫，這中格式的動畫圖像可以用比較小的體積來表現豐富的多媒體形式。在圖像的傳輸方面，能夠邊傳輸邊觀看，所以特別適合網絡存數，特別在傳輸速率不佳的狀況下，可以取得較好的效果。事實也證實了這一點，SWF現在已被大量應用於WEB網頁進行多媒體播放與交互設計。此外，SWF動畫是基於矢量技術製做的，所以無論將畫面放大多少倍，畫面不會所以而有任何失真。綜上所述，SWF格式做品成爲以高清晰的畫質和小巧的體積，受到了愈來愈多頁面設計者的青睞，也愈來愈成爲網頁動畫和網頁圖片設計製做的主流，目前已成爲網頁上動畫的事實標準。SWF文件的缺點就是製做起來很是耗時耗力。

製做SWF文件的軟件也不少，比較常見的有Flash、SWFText等。

4，BWP

BWP圖像是在WINDOWS操做系統中使用得比較多，它是「位圖」的英文縮寫。BWP圖像能夠用任何顏色深度（從黑白到24爲顏色）存儲單個光柵圖像。BWP圖像文件格式與其餘Microsoft Windows程序兼容。它不支持文件壓縮，也不適用於WEB頁。從整體上看，BMP圖像格式的缺點超過它的有點，爲了保證照片圖像的質量，請使用JPG文件。BMP文件使用於WINDOWS中的牆紙。BMP的優勢支持1位到24位顏色深度，而且與現有WINDOWS程序普遍兼容。BMP的缺點是不支持壓縮，這會形成文件很是大。

製做BMP文件的軟件不少，比較常見的有PHOTOSHOP、WINDOWS自帶的「圖畫」軟件等。

1.3.2圖像的基本語法

<IMG>標籤用於在HTML文檔中插入圖像，該標籤能夠放在要顯示圖像的位置。<IMG>標籤不包含任何內容，它使用src屬性指定圖像文件所在的路徑。

語法

其中，src參數用來設置圖像文件所在的位置，width和height屬性來指定圖像的寬度和高度,alt屬性有兩個做用：第一個是在網頁中，若是圖像沒有被下載，在圖像位置上出現指定文字；第二個是在網頁中，若是圖片下載完，將鼠標放在該圖像上，在鼠標旁邊提示的文字。

示例5

<HTML>

<HEAD>

<TITLE>爲圖像添加提示性文字</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

示例5在瀏覽器中預覽效果如圖1.10所示，把鼠標只想圖像上方，稍等片刻，稍等片刻就會提示文字「明星演唱會開幕」。

圖1.10 給圖像添加指示文字效果

1.3.3圖像的基本語法

<IMG>標籤的align屬性可用於調整圖像相對於周圍文字的對齊方式。Align屬性可取下面的值：top、bottom、left或right.

語法

其中，align=」top」表示圖片的頂部和當前行文字頂端對齊，align=」bottom」表示圖片的底部和當前行文字底部對齊，align=」middle」表示圖片的中部和當前文字中部對齊，align=」left」表示圖片左對齊，align=」right」表示圖片右對齊。

示例6

<HTML>

<HEAD>

<TITLE>圖像與文本的對齊方式</TITLE>

</HEAD>

<BODY>

<IMG align="middle" src="images/adv_2.jpg" width="180" height="95" border="0" />請點擊廣告進入明星專區<BR>

<IMG align="top" src="images/adv_2.jpg" width="180" height="95" border="0" />請點擊廣告進入明星專區

</BODY>

</HTML>

示例6在瀏覽器中預覽效果如圖1.11所示。

圖1.11 圖像與文本的對齊方式

1.4文字佈局

文字佈局就是使用網頁中的文字合理分隔，排列有序或按設計者想要的格式去佈局，對於這些要求，在HTML語言中，能夠使用<HR>標籤對文字內容進行分隔，使用列表對文本內容進行整齊排列，使用<PRE>標籤讓指定的文本內容以指定的格式在網頁中顯示。下面就分別介紹不一樣的標籤對文本內容進行佈局。

1.4.1圖像的基本語法

<HR>（水平線）標籤用於在網頁上繪製水平線的高度，以像素爲單位：color能夠來設置水平線的顏色width用於改變水平線的高度，能夠以像素爲單位，也能夠是窗口上的百分比。

示例7

<HTML>

<HEAD>

<TITLE>水平分隔線</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

示例7在瀏覽器中預覽效果如圖1.12所示。

圖1.12 水平線效果

1.4.2如何使用列表

在HTML文檔中可建立如下不一樣類型的列表：

Ø 無序列表

Ø 有序列表

1. 無序列表

有序列表就是「項目列表」。列表項前面帶有項目符號，包含在無序列表標籤<UL>…</UL>內。列表中每項都用標籤<LI>,其中LI表示列表項，結束標籤</LI>爲可選項。

語法

<LI></LI>……

</UL>

其中，type屬性決定了列表項開始的符號，它能夠取disc（默認值，表示實心圓點）、

Circle（空心圓環）、square(空心正方形)這3個值

2. 有序列表

有序列表包含在<OL>…</OL>標籤內。有序列表也顯示列表項，區別在於有序列表的列表項以自動生成的順序顯示。

語法

<LI>收電子郵件</LI>

……

</OL>

其中，type屬性決定有序列表的序號類型，它能夠取以下5個值：一、a、A、1。分別表示數字序列，大寫英文字母序列、寫英文字母序列、小寫羅馬數字序列。

示例8

<HTML>

<HEAD>

<TITLE>無序列表和編號</TITLE>

</HEAD>

<BODY>

<LI>收電子郵件</LI>

</OL>

新人上路指南

<LI>如何激活會員名？ </LI>

<LI>如何註冊淘寶會員？ </LI>

<LI>註冊時密碼設置有什麼要求？ </LI>

<LI>支付寶認證</LI>

</UL>

</BODY>

</HTML>

圖 1.13 有序列表和無序列表效果

1.4.3如何使用列表

<PRE>標籤用於顯示預先在HTML中已定義好格式的文本。文檔顯示在瀏覽器中時，會遵循已在HTML源文檔中定義的格式。

示例9

<HTML>

<HEAD>

<TITLE>顯示預先已定義好格式的文本</TITLE>

</HEAD>

<BODY>

騰訊-QQ幣/QQ幻想-30元卡

一口價：26.45元

運　費：賣家承擔運費

剩餘時間：5天

寶貝類型：全新

賣主聲明：貨到付款，可試用10天！

</PRE>

</BODY>

</HTML>

<PRE>標籤的效果如圖1.14所示。

圖1.14 <PRE>標籤的效果

1.5頁面連接<A>標籤

</A>標籤用於建立超級連接（簡稱爲超連接），它是到另外一個文檔或文件(圖形、音頻、視頻)甚至在同一個文檔的另外一部分的連接。當用戶單擊超級連接時，就會進入連接中指定的URL。超級連接可連接到；同一個文檔的特定部分，其餘文檔，其餘文件——圖像、音頻、視頻剪切，其餘站點等。

要建立超級連接，應指定如下兩個組件：

（1）要連接文件的完整地址或URL。

（2）將提供連接的熱點。熱點能夠是文本行，也能夠是圖像。當用戶單擊熱點時，瀏覽器將讀取URL中指定的地址並「跳」到新的位置。

錨記</A>標籤用於標識充當HTML文檔中文本或圖像的超級鏈接。Href（超文本引用）參數用於指定要鏈接文檔的地址或URL。

1.5.1頁面連接<A>標籤

連接到其餘頁面，就是單擊此超級連接，打開一個新的HTML文檔。

語法

其中，href屬性用來指定要連接的地址，「【免費註冊】」是熱點文本。

<HTML>

<HEAD>

<TITLE>連接到其餘頁面</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

示例10在瀏覽器中預覽效果如圖1.15所示，單擊「【免費註冊】」超級連接，用戶就打開如圖1.16所示的頁面，即register.html文檔，如圖1.16所示。

圖1.15 連接到其餘頁面圖1.16 單擊【免費註冊】打開的頁面

在示例10中，3個文件處在不一樣目錄下，所以href參數可提供連接到其餘目錄中的文件。應指定絕對或相對路徑名。

絕對路徑名：指定從根目錄到文件的完整路徑。例如，要指向文件register.html，絕對路徑名爲D:\register\register.html.

相對路徑，指定相對與當前文件夾的文件位置。假設doc1.html和doc2.html在同一文件夾下，則從doc1.html到doc2.html的相對路徑爲：<A href=」doc2.html」>文檔2的詳細資料</A>.

1.5.2連接到本頁面

若是一個頁面的內容過多，致使頁面過長，用戶須要不停地滾動條來查看文檔中的內容，爲了方便用戶閱讀過長的頁面內容，能夠使用錨點連接。

命名錨記也稱爲錨點，<A>標籤的name屬性用於建立，錨點。

爲了達到這種跳轉效果，請在href參數中使用以下標記。

超級連接名稱前面的符號「#」告訴瀏覽器當前連接是文檔的一個錨點。因爲在符號「#」前未指定任何文檔，瀏覽器由此知道該連接位於同一文檔內。示例11演示瞭如何連接到同一文檔的各個部分。

示例9

<HEAD>

<TITLE>淘寶網主頁</TITLE>

</HEAD>

<IMG src="images/logo.gif" width="240" height="31">[免費註冊]登陸]

<H1 align="center">您好，歡迎來淘寶！ </H1>

手機充值、IP卡/電話卡 </FONT><BR />

移動 | 50 | 100 | 聯通 | 50 | 100 </P>

<P>淘寶集市歡迎您！</P>

<P>淘寶網首屆翠友會！<BR />

想作最閃亮的mm嗎 <BR />

千餘中獎機會有你嗎 <BR />

淘寶入選平安網站

</P>

<P><IMG src="images/adv_2.jpg" width="360" height="190" border="0" align="middle" />請點擊廣告進入明星專區</P>

<OL >

<LI> 收電子郵件</LI>

</OL>

<A name="helpme">新人上路指南</A>

<LI>如何激活會員名？ </LI>

<LI>如何註冊淘寶會員？ </LI>

<LI>註冊時密碼設置有什麼要求？ </LI>

<LI>支付寶認證</LI>

</UL>

</BODY>

</HTML>

示例11在瀏覽器中預覽效果如圖1.17所示。

圖1.17 錨點連接

單擊「【新人上路】」超級連接，就會在同一頁面中出現如圖1.18所示的窗口。

圖1.18 錨點連接到的位置

1.5.3電子郵件連接

用戶能夠從網頁發送電子郵件。要作到這一點，能夠連接標籤中插入「mailto:郵箱地址」

例如：<A href=」mailto:taobaoWebMaster@taobao.com」>站點信箱</A>

示例12

<HTML>

<HEAD>

<TITLE>淘寶網主頁</TITLE>

</HEAD>

<IMG src="images/logo.gif" width="240" height="31">[免費註冊]登陸]

</BODY>

</HTML>

示例12在瀏覽器中預覽效果如圖1.19所示。

圖1.19 郵件連接

單擊「站點信箱」郵件連接，將打開用戶的電子郵件程序，而且「收件人：」文本中的電子郵件地址已經指定爲taobaoWebMaster@taobao.com,如圖1.20所示。

圖1.20 單擊「站長郵箱」鏈接後打開的界面

1.6滾動<MARQUEE>標籤

使用<MARQUEE>標籤不只能夠移動文字，還能夠移動圖片。

語法

滾動文字或圖像

</MARQUEE>

其中，scrolldelay，表示滾動延遲時間，默認值爲90ms。Direction：表示滾動的方向默認爲從左到右。能夠取如下4個值:up、down、left、right，使用direction屬性來設置文字或圖像的滾動方向。

示例13

<HTML>

<HEAD>

</HEAD>

<BODY>

<A href="#"><IMG src="images/scroll/1.gif" border="0" align="middle"> Avon化妝品</A><BR>

</MARQUEE>

</BODY>

</HTML>

示例13在瀏覽器中預覽效果如圖1.21所示。

圖1.21 文字和圖片滾動效果

² 本章總結

Ø HTML文檔是包含標記標籤的文本文件，這些標籤告訴瀏覽器如何顯示頁面。

Ø <HTML>標籤不區分大小寫。

Ø <META>標籤放置在網頁的標題處，以提供關於頁面的信息。如設置網頁編碼語系等。

Ø <FONT>標籤可改變字體大小、顏色和字體類型，<P>標籤和<BR>分別實現換行、換段。

Ø <IMG>標籤能夠實如今網頁中插入圖片，並可經過align屬性來調整圖像相對於周圍文本的對齊方式。

Ø 錨記<A>標籤用於標識充當HTML文檔中文本或圖像的超級連接。Href參數指定要連接的文本地址。

Ø <MARQUEE>標籤用於在網頁中實現文字、圖片、表格等對象的滾動效果。

1、選擇題

1.下列代碼片斷用於（）

...<BODY background=」back_image.GIF」>...

A.在頁面左邊的背景中顯示圖像」back_image.GIF」。

B.將「back_image.GIF」圖像平鋪填充到整個頁面的背景中。

C.在頁面頂部顯示圖像」back_iamge.GIF」

D.在頁面背景的中間顯示圖像」back_image.GIF」

2如下HTML代碼中，說法（）是正確的。

<HTML>

<HEAD>

</HEAD>

<BODY>

<P>

<PRE>

<FONT>

人來人往

男女老少

享受在時裝街購物的樂趣

</FONT>

</PRE>

</BODY>

</HTML>

A．<P>標籤沒有以</P>標籤結束。

B．<BR>標籤沒有以</BR>標籤結束。

C. <TITLE>元素沒有以</TITLE>標籤結束。

D．<FONT>標籤不能與<PRE>標籤一塊兒使用。

3.在網頁中最爲常見的兩種圖像格式是（）

A.JPG和GIF

B.JPG和PSD

C.GIF和BMP

D.BMP和SWF

4.關於下列代碼片斷的說法中，（）是正確性。

…<HR size=」5」 color=」#0000FF」 width=」50%」>…

A.size是水平線長度。

B.size是水平先的寬度。

C.width是水平線的寬度。

D.width是水平線的寬度。

二簡答題

1.HTML文檔的基本結構由那些部分組成？

2.使用記事本建立網頁有那幾個主要步驟。

3.請用HTML實現如圖1.22所示的頁面。

圖1.22 圖文排列

提示

使用到<pre>預格式化標籤，<IMG>標籤及相關屬性，還有<FONT>和<A>標籤。

3. 請用HTML實現如圖1.23所示頁面，而且頁面中的圖片是從左到右勻速移動。

圖1.23 圖片移動效果

提示

使用<MARQUEE>標籤移動多幅圖片，移動的方向默認方向，移動速度是經過scrolldelay屬性來設置的。

第2章

表格基礎

本章工做任務

製做「寶貝分類」頁面

製做「公告欄」頁面

本章技能目標

會使用表格的基本結構實現簡單表格

會使用表格相關標籤實現跨行、跨列的複雜表格

會使用表格相關設置進行美化修飾

² 本章簡介

上一章已經介紹了HTML基本標籤，既介紹瞭如何使用HTML文件的基本結構建立網頁，又介紹了文本相關標籤實現文字修飾和佈局，還講解了圖象相關標籤如何實現圖文並茂的頁面，超連接相關標籤如何實現頁面間的跳轉。

本章開始講解表格的基礎，其中重點是表格的基本結構，難點是如何建立跨多行跨多列的表格。爲了使咱們製做的頁面更精緻、表格更美觀，咱們還要研究表格佈局，以及如何對錶格進行美化修飾。

² 本章單詞

請在預習前完成下列單詞：

已學單詞複習：

1.html :_________________ 2.title: ________________________

3.body: _________________

本章新單詞：

1.table: ________________ 2.width _______________________

3.height :_______________ 4.border: ______________________

5.rowspan: ______________ 6.colspan: ______________________

7.align: _________________ 8.cellpadding: ___________________

9.cellspacing: ____________ 10.background: ___________________

2.1 表格基礎

表格是網頁製做中使用最多的技術之一，它一般用來顯示分類數據，在網頁中表格更多地用在網頁佈局和定位上。經過使用表格相關屬性，可實現對網頁中的文字和圖片進行合理的佈局和定位，使得網頁在形式上豐富多彩，在組織上井井有理。真是表格在手，一清二楚。

在HTML語言中，表格至少由<TABLE>標籤、<TR>標籤和<TD>標籤這3對標籤組成，不然，就不能成爲表格。<TABLE>…</TABLE>標籤中間將包括全部表格元素，表格元素主要有行、列、單元格等。瞭解表格的基本結構以後，咱們就能夠建立一個簡單的表格。

2.1.1 爲何要使用表格

當咱們在網上衝浪時，會看到論壇頁面（如圖2.1所示）、門戶網站網頁（如圖2.2所示）、購物網站頁面（如圖2.3所示）等。這些圖文並茂、絢麗多姿、整齊有序的頁面效果是如何實現的呢？其實很簡單，就是用表格來實現的，既然表格有如此普遍的應用和如此強大的功能，下面咱們就抓緊時間開始對錶格的學習吧。

圖2.1 論壇頁面

圖2.2 門戶網站頁面

圖2.3 購物網站頁面

2.1.2 表格的基本結構

看到這麼多使用表格進行佈局、定位的精美頁面，你是否是很想體驗一把呢？不用急，萬丈高樓平地起，先讓咱們來看一看錶格的最基本結構。表格是由指定數目的行和列組成，如圖2.4所示。文字或圖片按照相應的列或行進行分類和顯示。

表格列

表格行

圖2.4表格的佈局

能夠使用有行和列的表格格式來顯示數據。表格可在必定程度上控制文本和圖像在網頁中的位置，而不是徹底由瀏覽器對此進行控制。

在HTML中。用於建立表格的標籤以下：

1. <TABLE>

<TABLE>…</TABLE>標籤用於在HTML文檔中建立表格。它包含表名和表格自己內容的代碼。表格的基本單元是單元格，用<TD>…</TD>標籤訂義。

2. <TR>

表格行用<TR>標籤訂義，由單元格構成。多個行結合在一塊兒就構成一個表格，這反映在用於建立表格的HTML語法中。表格的每一行都用<TR>標籤表示，並用相應的</TR>標籤結束。

3. <TD>

表格的每一行又有若干表格單元，用<TD>…</TD>標籤來表示。TD是「表格數據(Table Data)」的英文縮寫。<TD>標籤訂義一個列，嵌套於<TR>標籤內。

Border屬性是最經常使用屬性，可用於定義表格的單元格和結構。該屬性指定邊框的厚度，若是其值設置爲零(0)，則不顯示邊框。

2.1.3 如何建立表格

全部表格都包括3個基本標籤，即表格標籤<TABLE>…</TABLE>、行標籤<TR>…</TR>和單元格標籤<TD>…</TD>。能夠說，在頁面中若是要建立一個完整的表格，至少要包含這3對標籤。

語法

建立表格的基本語法

<TABLE>

<TR>

<TD>單元格內容</TD>

</TR>

<TABLE>

建立表格時，通常狀況下分3步：

第一步：建立表格標籤<TABLE>…</TABLE>。

第二步：在表格標籤<TABLE>…</TABLE>裏建立行標籤<TR>…</TR>，能夠有多行。

第三步：在行標籤<TR>…</TR>裏建立單元格標籤<TD>…</TD>，能夠有多個單元格。

如示例1所示爲在頁面中添加一個2行3列的表格的代碼。

示例1

<HTML>

<HEAD>

</HEAD>

<BODY>

<TR>

</TR>

<TR>

</TR>

</TABLE>

</BODY>

</HTML>

運行示例1代碼，其效果如圖2.5所示。

圖2.5 基本表格

2.2 跨多行跨多列的表格

圖2.5所示的表格比較簡單，若是咱們要插入一張圖片，而且要佔4個單元的空間，那怎麼辦？這就是要用到跨多行跨多列的表格，本節就開始講解如何實現把多個單元格合併成一個單元格。

2.2.1 什麼是跨多行跨多列的表格

有時可能要將多行或多列合併成一個單元格，便可以建立跨多列的行，或建立跨多行的列。Colspan屬性用於建立跨多列的單元格，rowspan屬性用於建立跨多行的單元格。要實現如圖2.6所示的跨多行跨多列表格，怎麼辦？不急，咱們先來看看跨多列的表格是如何實現的。

圖2.6 跨多行多列表格

2.2.2 跨多列的表格

跨多列的表格是單元格在水平方向上跨多列。

語法

建立跨多列的表格基本語法：

<TABLE>

<TR>

<TD colspan=」所跨的列數」> 單元格內容 < /TD>

</TR>

</TABLE>

下面經過示例2來講明colspan這一屬性的用法。

示例2

<HTML>

<HEAD>

<TITLE>跨多列的表格</TITLE>

</HEAD>

<BODY>

<TR>

<TD colspan=」3」>學生成績表</TD>

</TR>

<TR>

</TR>

<TR>

</TR>

</TABLE>

</BODY>

</HTML>

這裏，將第一行單元格在水平方向上所跨的列數爲3，由於表格共包括3列，因此第一行只有一個單元格，運行效果如圖2.7所示。跨多列表格已經實現了，下面咱們想一想如何實現跨多行的表格？

圖2.7 跨多列表格

2.2.3 跨多行的表格

單元格除了能夠在水平方向上跨列，還能夠在垂直方向上跨行，跨多行的表格是單元格在垂直方向上跨多行。

語法

建立跨多行的表格基本語法：

<TABLE>

<TR>

<TD rowspan=」所跨的行數」 > 單元格的內容 < /TD >

</TR>

</TABLE>

下面經過示例3來講明rowspan這一屬性的用法。

示例3

<HTML>

<HEAD>

</HEAD>

<BODY>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

</TABLE>

</BODY>

</HTML>

這裏，因爲第一行第一個單元格垂直跨了3行，還剩2個單元格，所以在接下來的兩行都只有2個單元格，運行效果如圖2.8所示。

圖2.8 跨多行表格

2.2.4 如何建立跨行跨列的表格

建立了跨多列的表格，也建立了跨多行的表格，可是在有些狀況下要在一張表中既有跨多行又有跨多列的單元格，那將如何實現？這要說簡單真的很簡單，說難還真的不容易，下面咱們就以示例4和示例5來講明如何建立跨多行跨多列的表格。

示例4

<HTML>

<HEAD>

<TITLE>跨多行多列表格1</TITLE>

</HEAD>

<BODY>

<TR>

<TD>手機充值卡、IP卡</TD>

</TR>

<TR>

<TD rowspan=」2」>各類卡的總彙</TD>

</TR>

<TR>

</TR>

</TABLE>

</BODY>

</HTML>

示例4在瀏覽器中運行的結果如圖2.9所示。在建立如圖2.9所示的表格時，應先建立表格標籤<TABLE>…</TABLE>；而後在表格標籤裏建立行標籤<TR>…</TR>，這裏一共建立了3行；最後在每行裏建立列標籤<TD>…</TD>，並設置跨多行跨多列的屬性，便可實現跨多行跨多列的表格。

圖2.9 跨多行多列表格1

示例5

<HTML>

<HEAD>

<TITLE>跨多行多列表格2</TITLE>

</HEAD>

<BODY>

<TR>

</TR>

<TR>

<TD>彩音盒MP3</TD>

</TR>

<TR>

<TD colspan=」2」><P>歡迎光臨本購物網站</P> </TD>

</TR>

</TABLE>

</BODY>

</HTML>

示例5在瀏覽器中運行的結果如圖2.10所示。你們能夠試試修改rowspan和colspan屬性值的大小，若是把rowspan和colspan的值改得太小，表格中會出現空白區域，這樣會使表格的編輯變得困難，所以在設置表格時，要注意各行的單元格列數應相同。

圖2.10 跨多行多列表格

2.3 表格的美化修飾

不知道你們發現沒有？這以前建立的表格都很是醜陋、簡單

難看。如何建立一個佈局協調、色調統1、美觀、大方的表格？這就涉及到對錶格的美化修飾。

2.3.1 什麼是表格的美化修飾

表格的美化修飾就是從多方面對錶格進行美化修飾，使表格看上去更漂亮、更美觀、更合理。對錶格進行美化修飾時，主要從如下己方面進行：

Ø 表格的高度、寬度和邊框。

Ø 表格、行、列的背景。

Ø 表格、行、列的對齊方式。

Ø 表格的填充、間距屬性。

如圖2.11所示就是通過美化修飾以後的表格。

圖2.11 美化修飾後的表格

2.3.2 如何對錶格進行美化修飾

1.如何設置表格的尺寸和邊框

若是不指定表格的高度和寬度，瀏覽器就會根據表格內容的多少自動調整高度和寬度。若是不指定表格的邊框的寬度（border屬性），則瀏覽器將不顯示錶格邊框。若咱們既想設置表格的高度和寬度，又想設置表格邊框的寬度，那麼就得設置表格的高度、寬度和邊框屬性。

語法

設置表格的寬度、高度和邊框的基本語法：

……

</TABLE>

其中，表格的寬度和高度能夠用像素來表示，也能夠用百分比（與瀏覽器當前窗口相比的大小比列）來表示。表格邊框寬度只能用像素來表示。

例加：<TABLE width=」200」 height=」100」>表示一個寬爲200像素，高爲100像素的表格。<TABLE width=50% height=」100」>表示一個寬爲當前瀏覽窗口寬度的50%，高爲當前瀏覽器窗口高度的25%的表格。

示例6

<HTML>

<HEAD>

<TITLE>表格的高度、寬度和邊框</TITLE>

</HEAD>

<BODY>

<TR>

</TR>

<TR>

<TD colspan=」2」 >筆記本電腦</TD>

</TR>

<TR>

</TR>

</TABLE>

</BODY>

</HTML>

示例6運行效果如圖2.12所示。

圖2.12 表格的尺寸和邊框

經驗

表格中border屬性只能影響表格四周的邊框寬度，而不影響表格內單元格之間邊框尺寸。過席的邊框會影響表格的總體美觀，所以通常邊框寬度設置不該超過5像素。

2. 如何設置背景

（1）表格背景

表格背景包括表格的背景顏色和背景圖象的設置，表格的背景顏色屬性bgcolor是針對整個表格的，表格的背景圖像屬性background也是針對整個表格的，背景圖象會令表格更加美觀、更加活潑生動。

語法

設置表格背景基本語法：

……

</TABLE>

（2）行背景色

不只能夠對錶格總體設置背景，還能夠對單獨一行設置背景色，行的bgcolor顏色能夠覆蓋<TABLE>的bgcolor或background屬性。

語法

設置行的背景色基本語法

（3）單元格背景色

不只能夠對錶格中行設置背景色，還能夠對錶格中每個單元格設置背景色，單元格的bgcolor顏色能夠覆蓋行的bgcolor屬性。

語法

設置單元格的背景色基本語法

<TD bgcolor=「單元格的背景顏色」> 單元格內容</TD>

示例7

<HTML>

<HEAD>

<TITLE>表格的美化</TITLE>

</HEAD>

<BODY>

<TR>

</TR>

<TD colspan="3" >筆記本電腦</TD>

</TR>

</TR>

</TABLE>

</BODY>

</HTML>

示例7運行效果如圖2.13所示

圖2.13 背景色的設置

3．如何設置對齊方式

爲了美觀大方，表格中的數據通常須要設置對齊方式。

設置表格、行或列的對齊方式，修改align屬性爲right（右對齊）、center(居中)、left（左對齊）就能夠了，默認爲「左對齊」。

修改示例7，設置「筆記本電腦」列和「辦公設備、文具、耗材」列居中顯示，代碼如示例8所示。

<HTML>

<HEAD>

<TITLE>表格的對齊方式</TITLE>

</HEAD>

<BODY>

<TR>

</TR>

<TD colspan="2" align="center" >筆記本電腦</TD>

</TR>

</TR>

</TABLE>

</BODY>

</HTML>

示例8

<HTML>

<HEAD>

<TITLE>表格的對齊方式</TITLE>

</HEAD>

<BODY>

<TR>

</TR>

<TD colspan="2" align="center" >筆記本電腦</TD>

</TR>

</TR>

</TABLE>

</BODY>

</HTML>

示例8運行效果如圖2.14所示。

圖2.14 單元格對齊方式

4. 如何設置填充、間距屬性

如圖2.15所示，因爲這張表格既沒有設置高度，又沒有設置寬度，也沒有設置填充（cellpadding）和間距(cellspacing)屬性，因此很是難看。若是你既不想設置表格的高度，也不想設置表格的寬度，但還要使表格內框寬度(cellsapcing)變寬

使文字與邊框距離(cellpadding)拉大，該怎麼辦？其實很簡單，能夠經過cellspacing和cellpadding屬性進行調整實現。下面咱們就先了解一下cellspacing和cellpadding是何方神聖？請你參看圖2.16,圖2.16中的「內容」至關於圖2.15中的「筆記本電腦」，其餘部分類同。

圖2.15 沒有設置填充和間距屬性的表格

圖2.16 表格的填充和間距屬性

內框寬度(cellspacing)和文字與邊框的距離（cellpadding）均以像素這單位，下面示例9就演示了這兩個屬性的使用方法。

示例9

</HTML>

<HEAD>

<TITLE>表格的內框寬度和填充屬性</TITLE>

</HEAD>

<BODY>

<TR>

</TR>

<TR>

<TD colspan=」2」>筆記本電腦</TD>

</TR>

<TR>

</TR>

</TABLE>

</BODY>

</HTML>

示例9運行效果如圖2.17所示。

圖2.17 表格的填充和間距示例說明

圖2.15所示的表格如此難看、擁擠，相信你們還記憶猶新！下面咱們就運用剛纔所學的cellspacing和cellpadding屬性，對其進行改造和調整，使其達到美觀、大方的效果。

示例10

<HTML>

<HEAD>

<TITLE>表格的美化<TITLE>

< /HEAD>

<BODY>

示例10運行效果如圖2.18所示。

圖2.18 表格的填充和間距示例

2.4 表格用於佈局

網頁能夠說是構成網站的基本元素。當咱們在網絡中遨遊時，輕點鼠標，一幅幅精彩的網頁會呈如今咱們面前，那麼，網頁精彩與否的因素是什麼呢？色彩的搭配、文字的變化、圖片的處理等，這些固然是不可忽略的因素，除了這些，還有一個很是重要的因素——網頁的佈局。目前網頁佈局主要仍是採用表格進行佈局，表格佈局就是爲了精肯定位、合理安排網頁中的文字、圖片等元素，它就像網頁的臉面，是在一個限定的面積範圍內合理安排、佈置圖像、文字等元素的位置。

2.4.1 什麼是表格佈局

表格在網頁佈局方面起到了舉足輕重的做用，表格佈局好像已經成爲一個標準，隨便瀏覽一些站點，它們大可能是用表格佈局的。使用表格設計網頁佈局，能夠使網頁看上去更加整齊，適用於通常比較正規的網頁。網頁中的表格是由若干行和列組成，每一行（或者列）又由多個單元格組成，每一個單元格中又能夠反覆地插入表格，以知足網頁設計人員的佈局須要。表格佈局的優點在於它能對不一樣對象加以處理，而又不用擔憂不一樣對象之間的影響。如圖2.19所示，就是一幅徹底使用表格進行佈局的網頁。

圖2.19 使用表格佈局的頁面

2.4.2 如何使用表格進行佈局

下面咱們經過一個具體的示例,來講明如何使用表格進行佈局。假如咱們要用表格佈局出如圖2.20所示的頁面。

圖2.20 採用表格佈局的簡單頁面

（1）根據需求建立表格

你們仔細考察圖2.20所示的頁面，能看出此圖中頁面表格一共有7行2列，第一行佔2列，第二行左邊的單元格跨6行，其餘單元格都是沒有跨多行跨多列的單元格。因此咱們應該首先建立一個7行2列的表格，而後合併第一行2個單元格，設置第二行的第一個單元格跨6行，具體代碼以下：

<TABLE>

<TR>

</TR>

</TABLE>

（2）設置表格屬性

根據圖片的大上以及文字的多少和大小來設計表格、行、單元格的高度、寬度、對齊方式。根據圖2.20所示咱們來給表格設置相關屬性，具體代碼以下：

<TR>

</TR>

</TABLE>

（3）給表格填充內容

根據須要，在對應單元格里添加文字和圖片，添加完文字和圖片以後的頁面，所對應的完整代碼如示例11所示。

示例11

<HTML>

<HEAD>

</HEAD>

<BODY>

<TR>

</TR>

<TR>

</TD>

<TD><A href="#">超值變形金鋼2.5折!</A> </TD>

</TR>

<TR>

<TD><A href="#">人們爲啥對電視吼叫 </A></TD>

</TR>

<TR>

<TD><A href="#">淘寶網首屆翠友會！</A></TD>

</TR>

<TR>

<TD><A href="#">比基尼美女激情海灘 </A></TD>

</TR>

<TR>

<TD><A href="#">想作最閃亮的mm嗎 </A></TD>

</TR>

<TR>

<TD><A href="#">千餘中獎機會有你嗎</A></TD>

</TR>

</TABLE>

</BODY>

</HTML>

示例11運行效果如圖2.20所示。

² 本章總結

Ø 建立表格至少須要3對標籤,即表格標籤<TABLE>……</TABLE>,行標籤</TR>……</TR>和單元格標籤<TD>……</TD>。

Ø 建立跨多列的表格是在單元格里使用colspan屬性進行設置，建立跨多行的表格是在單元格里使用rowspan屬性進行設置。

Ø 表格的美化修飾主要從如下幾個方面進行。

l 表格的高度(height)、寬度(width)和邊框(border)。

l 表格的背景(becolor和background)、行的背景色(bgcolor)、列的背景色(bgcolor)。

l 表格、行、列的對齊方式(align)。

l 表格的填充(cellpadding)、間距(cellspacing)屬性。

Ø 表格可在必定程度上控制文本和圖像在網頁中的位置，而不是徹底由瀏覽器對此進行控制。

1、選擇題

一、運行下面建立表格的代碼，在瀏覽器裏會看到（）的表格。

<TR>

</TR>

<TR>

</TR>

</TABLE>

A．3行2列

B．2行3列

C．3行3列

D．2行2列

2．指出下面建立表格的HTML代碼中的錯誤，一共有（）錯誤。

<TD>

</TD>

<TR>

</TD> <TD>

</TR>

</TABLE>

A.5處 B. 4處 C. 3處 D. 2處

3.運行下面代碼,在瀏覽器裏會看到( )。

<TR>

</TR>

<TR>

</TR>

</TABLE>

A. 6個單元格

B. 5個單元格

C. 4個單元格

D. 3個單元格

4．運行下面代碼，在瀏覽器裏會看到（）。

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

</TABLE>

A． 6個單元格

B． 5個單元格

C． 4個單元格

D． 3個單元格

5．HTML語言中，設置表格中文字與邊框距離的標籤昌（）。

A．<TABLE border=#>

B．<TABLE cellspacing=#>

C．<TABLE cellpadding=#>

D．<TABLE width=# or %>

2、簡答題

1．請用HTML實現如圖2.21所示的表格。

圖2.21 跨列表格

提示

先建立3行3列的表格，而後把第一行合併成一個單元格，最後給單元格添加內容。

2．請用HTML實現如圖2.22所示的表格。

圖2.22 跨行表格

提示

先建立3行2列的表格，而後把第一列合併成一個單元格，並把它放在第一行裏，最後給單元格添加內容。

3．請用HTML實現如圖2.23所示的表格

圖2.23 詳細訂單表格

提示

先建立5行6列的表格，而後把第一行合併成一個單元格，併爲其設置背景色，最後一行左邊的單元格設爲跨5列，最後給全部的單元格添加內容

4．請用HTML實現如圖2.24所示的表格。

圖2.24 學生基本信息表格

提示

先建立4行3列的表格，而後把第一行合併成一個單元格，再把第三行第三列與第四行第三列合併成一個單元格，接着爲表格設置背景圖片、對齊方式、邊框顏色，還要爲表格設置填充和間距屬性，最後給全部的單元格添加內容。

第3章

表單和框架

本章工做任務

製做「註冊」頁面

製做「客戶中心」頁面

本章技能目標

會使用表格的基本結構製做表單頁面

會使用各類表單元素實現註冊頁面

能理解post和get兩種提交方式的區別

會使用框架結構實現多窗口展現頁面

² 本章簡介

上一章已介紹了表格的基本結構，既講解了如何建立一個簡單的表格，又講解了如何建立更加複雜的跨多行跨多列表格，咱們一開始建立的表格仍是比較醜陋，因此隨後咱們就對錶格從多方面進行了美化修飾，不過，爲了實現圖文並茂的頁面，咱們還學習了表格佈局。

本章開始講解表單和框架，其中重點是如何使用表單中的各類元素，如何使用框架製做多窗框頁面；難點是表單中的post方法和get方法的區別，窗口的target屬性。爲了能在一個頁面中顯示多個HTML文檔，咱們還介紹了框架。

² 本章單詞

請在預習前完成下列單詞。

已學單詞複習

1．colspan: ______________________ 2. rowspan: _________________

3. cellpadding: ____________________ 4. cellspacing: _______________

5. background: ____________________

本章新單詞

1. target: _________________________ 2. form: ____________________

3. method: ________________________ 4. action: ___________________

5. checkbox: ______________________ 6. radio: ____________________

7. textarea: _______________________ 8. frameset: __________________

9. frame: _________________________

3.1 表單

熱衷於上網的用戶常常會在網上看到一些會員註冊頁面、購買某個商品收集信息頁面、網上調查問卷頁面、搜索工具頁面等，這些頁面是什麼作的呢？我不敢說徹底是用表單作的，但我敢確定至少包含有表單，因此表單主要用來收集客戶端相關信息，使網頁具備交互功能。本節主要討論如何使用HTML來建立表單，而後向表單中添加表單元素。

網頁中的表單用途很廣，並且還在不斷髮展。下面咱們就列舉一些典型的表單應用：

在用戶註冊某種服務或事件時收集姓名、地址、電話號碼、電子郵件和其餘信息。

爲收集購買某個商品的訂單信息。例如，若是想經過Internet購買一本書，則必須填寫姓名、聯繫電話、郵寄地址、付款方式和其餘相關信息。

收集關於調查問卷信息。大部分提供服務性的網站都鼓勵用戶參與調查問卷，提供反饋信息。這些反饋信息除了維繫良好的客戶關係外，它還有助於改進和提升網站的服務質量，從而使網站的服務更具人性化，吸引更多的瀏覽者。

爲網站提供搜索工具。提供各類信息的站點一般會爲用戶提供一個搜索框，使用戶可以更快地找到想要的信息，如比較著名的搜索網站：谷歌(http://www.google.cn)、百度（http://www.baidu.com）等。

如圖3.1所示是網頁上的一個典型表單。

圖3.1 典型的表單

3.1.1 表單包含的控件

建立表單後，就能夠在表單中放置控件以接受用戶的輸入。這些控件一般放在<FORM></FORM>標籤對之間一塊兒使用，也能夠在表單以外用來建立用戶界面。在網上衝浪時，咱們常常會見到一些經常使用控件，例如：讓用戶輸入姓名的單行文本框，讓用戶輸入密碼的密碼框，讓用戶選擇性別的單選按鈕以及讓用戶提交信息的提交按鈕等。

不一樣的表單控件有不一樣的用途。若是要求用戶輸入的僅僅是一些文字信息，如「姓名」、「備註」、「留言」等，通常使用單行文本框或多行文本框：若是要求用戶在指定的範圍內作出選擇，通常使用單選按鈕、複選框和下拉列表框，如圖3.1中「性別」、「愛好」、「出生日期」中的月份選擇等常採用這些控件。若是要把填寫好的表單信息提交給服務器，通常使用「提交」按鈕，如圖3.1中的「贊成如下服務條款，提交註冊信息」按鈕。除此以外，還有一些不太經常使用的表單控件，在這裏就不一一列舉了。

3.1.2 表單頁面的基本結構

<FORM>標籤用於在網頁中建立建立表單區域，屬於一個容器標籤，表示其餘表單標籤須要在它的包圍中才有效，<INPUT>即是其中的一個。用以設定各類輸入資料的方法，其屬性見表3-1。

表3-1 <FORM>元素的屬性

屬性

說明

action

此屬性指示服務器到處理表單輸出的程序。通常來講，當用戶單擊表單上的「提交」按鈕後，信息發送到Web服務器上，由action屬性所指定的程序處理。語法爲：action=」URL」

method

此屬性告訴瀏覽器如何將數據發送給服務器發送數據方法（用postt方法仍是用get方法）。若是值爲get,瀏覽器將建立一個請求，該請求包含頁面URL，一個問號和表單的值。瀏覽器會將該請求返回給URL中指定的腳本，以進行處理。若是將值指定爲post，表單上的數據會做爲一個數據塊發送到腳本，而不使用請求字符串。語法爲：method=(get︱post)

使用post方法將表單提交給」processform」程序處理，代碼如示例1所示。

示例1

<p>

</p>

</FORM>

示例1中，若把method=」post」改成method=」get」就變成了使用get 方法將表單提交給「processform」程序處理。這兩種方法都是將表單數據提交給服務器上指定的程序進行處理，那有什麼區別呢？

先讓你們看看採用post和get方法提交表單信息後瀏覽器地址欄的變化，如圖3.2和圖3.3所示。在「名字」和「密碼」標籤後，分別輸入用戶名和密碼，而後單擊「提交」按鈕。採用post方法提交表單信息以後，瀏覽器地址欄先後沒變化，如圖3.2所示，而且在瀏覽器地址欄中能看到信息「 name=wzq&password=123」,這其實就是我剛纔輸入的用戶名和密碼信息，是否是很恐怖？密碼都能看得見。由此能夠看出，使用post方法提交表單信息更安全，相反，使用get方法提交表單信息極其不安全，建議你們在使用表單時儘量地使用post方法來傳送數據。

圖3.2 post方法提交表單信息後圖3.3 get方法提交表單信息後

3.1.3 表單元素原統一格式

網頁中的表單由許多不一樣的表單元素組成，這些表單元素各自都有不少屬性，要一一介紹，篇幅不容許，下面就把這些表單元素中的一些經常使用的屬性做一個統一的介紹。

下面給出了表單元素的統一格式：

……

</FORM>

<INPUT> 元素定義要在表單中顯示的控件類型和外觀。此元素包括的屬性見表3-2。

表3-2 <INPUT>元素屬性

屬性	說明
type	此屬性指定表單的類型。可用的選項有：text、password、checkbox、radio、submit、reset、file、hidden、image和button。默認選擇爲text
name	此屬性指定表單元素名稱。例如，若是表單上有幾個文本框，能夠按名稱來標識它們，如text1、text2等。名稱屬性的做用域爲FORM元素內
value	此屬性是可選屬性，它指定表單元素牟初始值。但若是type爲radio，則必須指定一個值
size	此屬性指定表單元素的初始寬度。若是type爲text或password，則表單元素的大小以字符爲單位。對於其餘輸入類型，寬度以像素爲單位
maxlength	此屬性用於指定可在text或password元素中輸入的最大字符數。默認值爲無限大。
checked	此屬性是Boolean屬性，指定按鈕是不是被選中的。當輸入類型爲radio或checkbox時，使用此屬性。

3.1.4 表單元素的逐一介紹

下面討論表單元素的類型及經常使用的屬性。

1. 文本框

在表單中最經常使用最多見的表單輸入元素就是文本框（text）,它提供給用戶輸入單行文本信息，例如用戶名的輸入框。若要在文檔的表單裏建立一個文本框，將圖3.4中的表單元素type屬性設爲text就能夠了。

示例2

<p>名字：

</p>

<p>姓氏：

<p>登陸名：

</p>

</FORM>

示例2在瀏覽器中預覽效果如圖3.4所不。

圖3.4 文本框的效果

2. 密碼框

將圖3.4中的表單元素的type屬性設爲password就能夠建立一個密碼框。密碼框的各屬性和文本框同樣，惟一不一樣的是，密碼框輸入的字符全都以「*」顯示。

示例3

<p>密碼：

</p>

</FORM>

示例3在瀏覽器中預覽效果如圖3.5所示。

圖3.5 密碼框的效果

問答

密碼框能保證輸入數據的安全嗎？

不能，密碼框僅僅使周圍的人看不見輸入的符號，它不能保證輸入的數據安全。爲了使數據安全，應該增強人爲管理，採用數據加密技術等。

3. 單選按鈕

將圖3.4中的表單元素的type屬性設爲radio就能夠建立一個單選按鈕。單選按鈕控件用於一組相互排斥的值，組中的每一個單選按鈕控件應該具備相同的名稱，用戶一次只能選擇一個選項。只有從組中選定的單選按鈕纔會提交的數據中生成name/value對，單選按鈕須要一個顯式的value屬性。

示例4

<BR>性別：

<INPUT name=」gen」 type=」radio’ class=」input」 value=」男」

checked=」checked」>

<IMG src=」images/Male.gif」 width=」23」 height=」21」>男

<IMG src=」images/Female.gif」 width=」23’ height=」21」>女

</FORM>

示例4在瀏覽器中預覽效果如圖3.6所示。

圖3.6 單選按鈕效果

4. 複選框

將圖3.4中的表單元素的type屬性設爲checkbox就能夠建立一個複選框。用戶能夠選擇多個複選框，選擇了複選框時，會將一個name/value對與FORM一塊兒提交。

示例5

愛好：
<INPUT type=」checkbox」 name=」cb1」 value=」sports」>運動

聊天

<INPUT type=」checkbox」 name=」cb3」 value=」play」>玩遊戲

</FORM>

示例5在瀏覽器中預覽效果如圖3.7所示。

圖3.7 複選框效果

對比

單選按鈕應具備相同的名字，便於互斥選擇；而複選框能夠有不一樣的名字，並不須要屬於一組。

5. 列表框

列表框主要是爲了用戶快速、方便、正確地選擇一些選項，並且還能節省頁面空間，它是經過<SELECT>和<OPTION>標籤來實現的。<SELECT>標籤用於顯示可供用戶選擇的下拉列表，每一個選項由一個<OPTION>標籤表示，<SELECT>標籤必須包含至少一個<OPTION>標籤。

語法

……

</SELECT>

其中，在有多種選項可供用戶滾動查看時，size肯定列表中可同時看到的行數不勝數；stlected表示該選項在默認狀況下是被選中的，並且一個列表框中只能有一個列表項默認被選中，如同單選按鈕組那樣。

示例6

出生日期：

<INPUT name=」byear」 value=」yyyy」 size=4 maxlength=4> 年

</SELECT> 月

<INPUT name=」bday」 value=」dd」 size=2 maxlength=2> 日

</FORM>

示例6在瀏覽器中預覽效果如圖3.8所示。

圖3.8 列表框效果

6. 按鈕

按鈕在表單中常常用到，在HTML中按鈕分爲3種，分別是普通按鈕(button)、提交按鈕(submit)和重置按鈕(reset)。普通按鈕主要用來響應onClick事件，提交按鈕用來提交表單信息，重置按鈕用來清除表單中已填信息。

語法

其中，若type=」button」表示是普通按鈕；若type=」submit」表示是提交按鈕；若 type=」reset」表示是重置按鈕。Name是用來給按鈕起名字，value用來設置顯示在按鈕上的文字。

示例7

</p>

<p>

</p>

<p>

</p>

</FORM>

示例7瀏覽器中預覽效果如圖3.9所示。

圖3.9 按鈕預覽效果

7. 多行文本框

當咱們要在網頁中輸入兩行或兩行以上的文本時，怎麼辦？顯然，前面學過的文本框及其餘表單元素都不能知足要求，這就應該使用多行文本框，它使用的標籤是<TEXTAREA>。

語法

示例8

<H4><IMG src=」images/read.gif」 width=」35」 height=」26」>閱讀淘寶網服務協議

</p>

歡迎閱讀服務條款協議…

</TEXTAREA>

</P>

</FORM>

示例8在瀏覽中預覽效果如圖3.10所示。

圖3.10 多行文本框效果

3.2 框架

在一個網頁中，並非全部的內容都須要改變，如網頁的導航欄、網頁頁腳等部分是不須要改變的，若是在每個網頁中都重複添加這些元素，不只會浪費時間，並且在瀏覽進也會帶來不便、耗費更多的時間，爲了解決這種問題，咱們能夠使用框架來對網頁進行佈局。

使用框架能夠把瀏覽器窗口劃分爲多個區域，每一個區域能夠顯示不一樣的網頁，每次瀏覽者在訪問框架頁面時，只下載框架頁面中變化的區域，對於不變的區域，不用從新下載，從而給瀏覽者帶來方便、節省下載頁面所需的時間。

一個框架結構是由如下兩部分組成的：

框架(FRAME)：是瀏覽器窗口中的一個區域，它能夠顯示與瀏覽器窗口其他部分中所顯示內容無關的網頁文件。

框架集(FRAMESET)；是一個網頁文件，它將一個窗口經過橫向或縱向的方式分割成多個框架，每一個框架中要顯示的都是不一樣的網頁文件。不一樣的網頁文件能夠經過超連接聯繫起來。

如圖3.11所示就是一個比較經典的框架頁面。此頁面一共有3個區域，每一個區域分別顯示一個HTML文檔，因爲框架集頁面也是一個HTML文檔，因此一共有4個HTML文件。爲了瀏覽方便，當瀏覽者單擊左側導航欄中的服務列表（如「註冊&認證」、「買家幫助」等）超連接時，右側窗口顯示相應的詳細幫助信息。

圖3.11 框架集頁面

3.2.1 爲什麼使用框架

一個網頁能夠有一個或多個框架。框架的一些用法以下：

在頁面的一個固定部分顯示Logo或靜態信息。

左側框架顯示目錄，右側框架顯示內容，用戶只須要單擊左側窗口的目錄，在右側窗口中就會顯示相應內容，如網上在線學習教程、論壇、後臺管理、產品介紹等。

框架能有機地把多個頁面組合在一塊兒，這多個頁面之間可互相獨立，卻又可相互聯繫。

3.2.2 框架的基本結構

框架集(FRAMESET)頁面的結構是經過屬性rows和cols來設置的，根據框架的分割方式可分爲：上下分割窗口(使用rows屬性來分割)，左右分割窗口（使用cols屬性來分割），嵌套分割窗口（同時使用rows和cols屬性來分割）。

語法

……

</FRAMESET>

說明：FRAMESET僅是一框架的集合。FRAME標籤能夠提供對單獨HTML文檔URL引用，其中每一個HTML文檔佔據一個框架。cols將頁面沿垂直方向分割爲幾個窗口，cols能夠取多個值，不一樣的值用逗號隔開，單位能夠是像素，也能夠是佔瀏覽器的百分比。rows將頁面沿水平方向分割爲幾個窗口，也能夠取多個值，是由逗號分割的像素或百分比。src指定框架窗口的源文件。

示例9

<HTML>

<HEAD>

<TITLE>rows框架</TITLE>

</HEAD>

</FRAMESET>

</HTML>

示例9在瀏覽器中預覽效果如圖3.12所示。

圖3.12 水平方向分割爲上中下3個窗口

示例10

<HTML>

<HEAD>

<TITLE>cols框架</TITLE>

</HEAD>

</FRAMESET>

</HTML>

示例10在瀏覽器中預覽效果如圖3.13所示。

圖3.13 垂直方向分割爲左右兩窗口

3.2.3 如何建立多個複雜的窗口

前面的示例9和示例10要麼是水平分割，要麼是垂直分割，若是要實現如圖3.14所示的框架集頁面，那怎麼實現？

圖3.14 框架集頁面

經分析，首先將頁面分割爲上下兩部分，上部分的高度佔瀏覽器高度的30%左右。而後將下面部分分割成左右兩部分，寬度大約分別佔窗口的20%和80%。注意對其中的一個框架窗口再次分割時，須要使用<FRAMESET>標籤代替<FRAME>標籤。下面咱們就一步一步地實現如圖3.14所示的框架集頁面。

第一步：建立或直接提供如圖3.14所示的top窗口中所顯示的頁面文檔top.html。

第二步：建立或直接提供如圖3.14所示的left窗口中所顯示的頁面文檔left.html。

第三步：建立或直接提供如圖3.14所示的right窗口中所顯示的頁面文檔right.html。

第四步：手寫如示例11中的代碼，而後保存爲frame_Sets.html文件。

示例11

<HTML>

<HEAD>

<TITLE>建立多框架頁面</TITLE>

</HEAD>

<FRAME src=」left.html」

Name=」leftrame」 scrolling=」no」>

<FRAME src=」right.html」

Name=」rightframe」>

</FRAMESET>

</HTML>

示例11在瀏覽器中預覽效果如圖3.14所示。

3.2.4 如何設置窗口連接的顯示位置

在圖3.14中，若是left窗口的導航列表超連接（如「註冊&認證」、「買家幫助」等），在right窗口中顯示連接的頁面內容，其實這就是典型的導航頁面，該如何實現？這就須要使用<FRAME>標籤中的name屬性和<A>標籤的target 屬性。

Target目標窗口屬性分爲兩類：一類是框架頁面之間的連接；另外一關是4個特殊窗口的超連接。

1. 框架頁面之間的連接

要設置框架之間的超連接，須要兩步：

第一步：設計好框架集頁面，併爲每一個框架窗口定義名稱。

如：<FRAME src=」right.html」 name=」rightframe」>

第二步：設置導航欄中的超連接的target目標窗口屬性，使其值爲框架窗口的名字。

如：<a hrer=」right.html」 target=」rightframe」>

下面咱們就在示例11的基礎上，來實現框架之間的超連接。

示例12

首先根據須要，建立好框架集頁面，而後爲每一個框架窗口定義名稱。設置框架集頁面（frame_Set.html）的代碼以下：

……

<FRAME src=」top.html」 name=」topframe」 scrolling=」no」

noresize=」noresize」>

<FRAME src=」left.html」 name=」leftframe」 scrolling=」no」

Noresize=」noresize」>

</FRAMESET>

下面設置導航頁中的超連接，也就是設置示例11中left.html中的超連接，最關鍵的是將導航頁中的各個連接圖片或文字的目標找開方式設置爲在框架中打開，即將target屬性值設爲框架窗口的名字。

因爲left.html文檔中有多個超連接，並且爲了說明框架之間的連接，因此咱們先準備幾個連接頁面，如：buy.html、sale.html、person_info.html。

設置了框架之間連接的left.html文檔代碼以下：

<HTML>

<HEAD>

<TITLE>左側導航頁面</TITLE>

</HTAD>

<BODY>

<P>

</P>

</P>

</P>

</P>

</BODY>

</HTML>

設置左側導航欄的超連接以後，使用瀏覽器打開frame_Sets.html文檔，運行效果如圖3.15所示。

單擊框架導航欄中的連接圖片「買家幫助」，將會打開如圖3.16所示的頁面效果。同理，單擊「賣家幫助」和「我的資料修改」超連接，在內容區都會打開相應的HTML文檔頁面。

圖3.15 框架頁面的默認顯示效果

圖3.16 在框架窗口中打開「買家幫助」介紹頁面

2．4個特殊的窗口

在製做網頁中的超連接時，默認狀況下超連接會在當前窗口中打開。經過使用target屬性，能夠將目標頁面在一個新的窗口中打開。

語法

其中，target屬性能夠取4個值，這些值的具體含義見表3-3。

表3-3 target目標窗口的打開方式

屬性值	說明
_blank	新啓一個窗口打開連接
_self	新啓一個窗口中打開，默認取值（指沒有設置target屬性值時的狀況）
_parent	在上一級窗口中打開（框架頁面中使用較多）
_top	在整個瀏覽器窗口中打開

示例13

咱們直接在示例12的基礎上進行相關的修改，僅僅修改left.html文檔代碼，其餘HTML文檔都保持不變，修改後的left.html文檔代碼以下：

<HTML>

<HEAD>

<TITLE>在左側導航頁面中演示4個特殊窗口</TITLE>

</HTAD>

<BODY>

<P>

</A></P>

<P>

</A></P>

<P>

</A></P>

<P>

</A></P>

</BODY>

</HTML>

設置左側導航欄的超連接目標頁面打開方式以後，使用瀏覽器打開frame_Sets.html文檔，單擊「註冊&認證」超連接以後，能夠看到打開一個新的窗口，如圖3.17所示。

圖3.17 設置目標頁面的打開方式

² 本章總結

Ø 表單主要用來製做動態網頁，方便和用戶進行交互，例如：會員註冊、購物訂單、調查問卷、搜索等頁面都會用到表單。

Ø 經常使用的表單元素有：文本框（text）、密碼框（password）、單選按鈕（radio）、複選框（checkbox）、列表框（<select>和<option>、按鈕（button、submit和reset）、多行文本框（<textarea>））。

Ø 一個框架結構是由兩部分組成的：框架集（FRAMESET）和框架（FRAME）。

Ø 框架集（FRAMESET）頁面被劃分的區域多少是經過屬性rows和cols來設置的。

Ø 網頁中超連接目標頁面的打開方式有5種，能夠經過target屬性來設置。

1、選擇題

1．（）標籤用於在網頁中建立表單。

A. <INPUT>

B. <SELECT>

C. <OPTGROUP>

D. <FORM>

2. （）元素用於定義表單中控件的類型和外觀。

A．ECT

B．FORM

C．INPUT

D．CAPTION

3．<frameset cols=#>是用來指定（）。

A．混合分割

B．縱向分割

C．橫向分割

D．任意分割

4．框架中「禁止改變框架窗口大小」的語法是（）。

A．<a href=」right.html」 target=」rightframe」>

B．<IMG src=」URL」 border=?>

C．<FRAMESET rows=」20%, *」 frameborder=」0」>

D．<FRAME noresize=」noresize」>

5．想要使用戶在單擊超連接時，彈出一個新的網頁窗口，下面（）選項符合要求。

A．<A href=」right.html target=」_blank」>新聞</A>

B．<A href=」right.html target=」_parent」>體育</A>

C．<A href=」right.html target=」_top」>財經</A>

D．<A href=」right.html target=」_self」>教育</A>

二．簡答題

1．請用HTML實現如圖3.18所示的申請表表單。相關要求以下：

教育程度：默認選中爲碩士。

國籍：有美國、澳大利亞、日本、新加坡，默認選中爲澳大利亞。

圖3.18 申請表表單

2．請用HTML實現如圖3.19所示的電子產品調查表表單。相關要求以下：

Ø 請輸入您的購買日期：月份下拉選項爲1月到12月，日下拉選項爲1~31。

Ø 您是否查看過咱們的在線產品目錄：默認選中爲「是」。

圖3.19 電子產品調查表表單

3．請用HTML實現如圖3.20所示的註冊表單。相關要求以下：

Ø 性別：男、女前分別有男性圖標和女性圖標，默認選中爲「男」。

Ø 出生日期：月份默認選中爲「[選擇月份]」，月份下拉選項爲1月到12月。

圖3.20 註冊表單

4．請用HTML實現如圖3.21所示的框架集頁面，要求：選擇左邊框架中的菜單項，在右邊的框架中打開相應的例題頁面文檔。

圖3.21 框架集頁面

提示

框架集頁面分紅左右兩個框架窗口，分別佔瀏覽器窗口的25%和75%，「[例3-1]」、「[例3-2]」和「[例3-3]」的超連接目標文檔分別爲圖3.1八、圖3.19和圖3.20所示對應的HTML文檔。

第4章

CSS樣式表

本章工做任務

製做「寶貝分類」頁面

製做並美化「登陸」頁面

本章技能目標

會建立統一外觀的字體文本

會建立無下劃線的超連接樣式

會建立個性化的表格

會建立個性化的表單

² 本章簡介

上一章的課程裏，咱們學習了表單以及表單中的各類元素，經常使用的表單元素有：文本框（text）、密碼框（password）、單選按鈕（radio）、複選框（checkbox）、列表框（<select>和<option>）、按鈕（button、sbumit和reset）、多行文本框（<textarea>）。

另外，還學習了框架，包括框架的基本結構、如何建立多個複雜的窗口、框架窗口之間的連接等。

從本章開始，咱們將學習CSS（Cascading Style Sheet,層疊式樣式表），其中重點是樣式的基本語法和如何建立常見的樣式規則（如建立無下劃線的超連接樣式，設置細邊框文本框樣式，建立常見的文字，顏色等樣式等）；難點是內嵌樣式、行內樣式、樣式表文件的使用場合。

² 本章單詞

請在預習前完成下列單詞

已學單詞複習

1. target: ________________________ 2. form: _________________________

3. textarea: ________________________ 4. frameset: ______________________

5. frame: __________________________

本章新單詞

1. style: ___________________________ 2. class: ________________________

3. padding: ________________________ 4. text-decoration: ________________

5. background-repeat: _______________ 6. import: ______________________

7. link: ___________________________

4.1 爲何須要CSS樣式表

經過定義CSS樣式表，能讓網頁具備美觀一致的界面，能夠將網頁製做得更加絢麗多彩。一個樣式文件能夠做用於多個頁面，具備更好的易用性和擴展性，經過修改樣式文件，能製做出內容相同，而外觀不一樣的多姿多彩的頁面。此外，使用樣式表能有效地分離網頁的內容與外觀控制，從而便於美工與程序員之間的分工協做，發揮各自的優點。

爲何須要CSS樣式表主要是基於如下幾點緣由：

（1） HTML標籤的外觀樣式比較單一。

你們在學習前面幾章時，不知發現沒有？前面幾章網頁中的文字的字體、顏色、大小、超連接、間距等樣式都比較單一，爲了彌補這個缺點，就須要使用CSS樣式表來對HTML標籤進行控制，從而實現更加豐富多彩的效果。

（2）樣式表的做用至關於華麗的衣服。

一樣的內容，採用不一樣的CSS樣式文件，能夠看到不一樣的佈局和效果。從美工的角度來看，能夠更容易地調整頁面外觀，調整頁面裏某個部分的文字或者圖片等，從而實現複雜多變的頁面效果，所以樣式表至關於一個頁面甚至一個網站的華麗的衣服。如圖4.1和圖4.2所示，就是內容相同，外觀不一樣的兩個頁面。

圖4.1 內容相一樣式不一樣頁面1

圖4.2 內容相一樣式不一樣頁面2

（3）樣式表能實現內容與樣式的分離，方便團隊開發。

因爲當今社會爭日趨激烈，分工愈來愈細，每一個人作的事愈來愈單一，咱們開發一個網站也不例外，每每須要美工和程序設計人員的配合，美工作樣式，程序員寫內容，爲了迎合這種須要，就出現了樣式表。樣式表能把內容結構和格式控制相分離，使網頁能夠僅由內容構成，而將全部的網頁格式經過CSS樣式表文件來控制，從而方便美工和程序員分工協做、各司其職、各盡其能，爲開發出優秀的網站提供了有力的保障。

4.2 樣式表的基本語法

樣式表由樣式規則組成，這些規則告訴瀏覽器如何顯示文檔。一個樣式（STYLE）的基本語法由3部分構成：selector（中文叫選擇器，有點怪怪的，就用英文吧！），屬性（property）和屬性值（value）。

4.2.1 樣式表的基本結構

<STYLE>和</STYLE>標籤之間的全部內容都是樣式規則，樣式規則的第一部分稱爲選擇器。每一個選擇器都有屬性以及對應的屬性值。下面讓咱們先來看一個樣式表的基本結構。使咱們對樣式表有個感性的認識。

樣式表的基本結構爲：

P {

color:red;

font-size:30px;

font-family:隸書;

}

……

</STYLE>

文檔樣式表通常位於HTML文件的頭部，即<HEAD>和</HEAD>標籤之間，定義的樣式規則就可應用到當前的頁面中。這些樣式規則表示什麼意思？下面咱們就來了解一下樣式規則的組成及其含義。

4.2.2 樣式規則

層疊樣式表是一組規則，用於定義文檔的樣式。例如，能夠建立一個樣式規則，來指定全部<p>標題的顏色均爲淺綠。能夠用來修飾網頁中全部<p>標籤的樣式。

樣式規則示例以下：

P {color:red; font-size:30px; font-family:隸書;}

其中，規則的第一部分稱爲選擇器。每一個選擇器都有屬性以及對應的屬性值。上面的示例p是規則選擇器。括在大括號內的部分稱爲聲明。聲明由兩部分組成：冒號前面的部分是屬性，冒號後面的部分是該屬性的值。一個選擇器能夠有多個屬性，它們能夠寫在一塊兒，用分號隔開。

例如：

P {color:red; font-family:」隸書」; font-size:24px;}

示例1使用文檔樣式定義了頁面中的全部<p>標籤的樣式。

示例1

<HTML>

<HEAD>

P { color:red; font-family:」隸書」; font-size:24px;}

</STYLE>

</HEAD>

<BODY>

<P>牀前明月光，</P>

<P>疑是地上霜。</P>

<P>我是郭德剛，</P>

<P>低頭思故鄉。</P>

</BODY>

</HTML>

示例1在瀏覽器中預覽效果，如圖4.3所示。

圖4.3 文檔樣式效果圖4.4 類樣式效果

4.2.3 類樣式（class）

在示例1中，若是咱們想<H2>標籤的樣式與<P>標籤的樣式如出一轍，那如何實現？有了！要爲它們定義一個共享樣式。這個共享樣式能夠使用類樣式來實現。

類選擇器的定義格式爲：

.red {

color:red; font-family:」隸書」; font-size:24px;

}

……

</STYLE>

注意類名前面有一「.」號，類名可隨意命名，最好根據元素的用途來定義一個有意義的名稱。某個標籤(如<H2>)但願採用該類選擇器的樣式。語法格式爲：

語法

<P CLASS=」類名」>牀前明月光，</P>

示例2

<HTML>

<HEAD>

.red { color:red; font-family:」隸書」; }

</STYLE>

</HEAD>

<BODY>

<P class=」red」>牀前明月光，</P>

<P class=」red」>疑是地上霜。</P>

<P >我是郭德剛，</P>

<P class=」red」>低頭思故鄉</P>

</BODY>

</HTML>

示例2在瀏覽器中預覽效果，如圖4.4所示。

<H2>、第一個段落<P>、第二個段落<P>和第四個段落<P>都採用了red類選擇器，因此字體都爲紅色，字體類型爲隸書。第三段沒采用任何樣式，按默認的樣式顯示。

今後例能夠看出，不一樣類別的標籤（如<H2>和<P>）能夠使用同一類選擇器，同一類的標籤（如<P>）能夠採用不一樣的類選擇器，類選擇器實現了樣式的靈活共享。

4.3 經常使用的樣式屬性

CSS的屬性很是龐大，龐大得好幾本書都寫不完，不過，不要緊，咱們能夠從網上搜索相關資料或者查閱相關專著。這裏只列出經常使用的且實用的CSS屬性。下面咱們就先來學習文本屬性。

4.3.1 文本屬性

文本屬性主要用來對網頁中的文字進行控制，如控制文字的大小、類型、樣式、顏色以及對齊方式等，從而使頁面中的文本達到咱們想要的外觀。表4-1列出了經常使用的文本屬性。

表4-1 經常使用的文本屬性

文本屬性	說明
font-size	設置文本的字體大小
font-family	設置文本字體類型
font-style	設置文本的字體樣式
color	設置文本的顏色
text-align	設置文本的對齊方式

下面示例3採用了文檔樣式和類樣式，其中的樣式規則使用了文本屬性，從而有效地控制了網頁中的文本效果。

示例3

<HTML>

<HEAD>

<TITLE>文本屬性樣式</TITLE>

{ font-size:12px;

font-family:」宋體」;

text-align:left;

}

.bigFont

{

Font-size:16px;

Color:red;

}

</STYLE>

</HEAD>

<BODY>

【新聞】[設搜狐爲首頁] 9月1日

<p class=」bigFont」>·世錦賽劉翔12秒95奪冠成就大滿貫</p>

<p>·我國實施不安全食品召回制度遏制非法出口</p>

<p>·中國表明向聯合國通報軍備透明制度舉措</p>

<p class=」bigFont」>·博客︳劉翔：最後勝利的感受真好！</p>

</BODY>

</HTML>

示例3在瀏覽器中預覽效果，如圖4.5所示。

在示例3中第一個段落<p>和第四個段落<p>都應用了標籤樣式<p>和類樣式bigFont,到底哪一個樣式起做用？有了，就近原則，當有不一樣的樣式規則應用在同一個標籤上時，根據這些樣式規則距離修飾的文本的遠近，來決定應用哪個樣式規則，如示例3對第一個段落<p>和第四個段落<p>起做用的應該是類樣式bigFont,而不是標籤樣式<p>。

圖4.5 文本屬性效果

4.3.2 背景屬性

恰當地使用背景，能夠使頁面既美觀顯示速度又快。背景包括背景顏色、背景圖象以及背景圖像以何種方式平鋪在指定的區域內。表4-2列出了經常使用的背景屬性。

表4-2 經常使用的背景屬性

背景屬性	說明
Background-color	設置背景顏色
Background-image	設置背景圖像
Background-repeat	設置一個指定的背景圖像如何被重複顯示。可取的值有：repeat（鋪滿整個區域，默認狀況）、no-repeat(不平鋪)、repeat-x（只在水平方向上平鋪）、repeat-y（只在垂直方向上平鋪）

下面示例4對一個表格設置了背景圖像，而且背景圖像不平鋪。

示例4

<HTML>

<HEAD>

/* 表格單元格小字體的樣式*/

{

font-size: 14px;

font-family: "宋體";

padding-left:10px;

}

/* 大字體的樣式*/

.bigFont

{

font-size: 16px;

color: #0000FF;

}

/* 表格虛線邊框的樣式*/

.tableBorder

{

border-right-width: 2px;

border-right-style: dashed;

}

/*設置無下劃線的超鏈接樣式*/

A {

color: blue;

text-decoration: none;

}

A:hover{ /*鼠標在超連接上懸停時變爲顏色*/

color: red;

}

/*設置表格的背景圖片樣式*/

table

{

background-image: url(images/type_back.jpg);

background-repeat:no-repeat;

}

</STYLE>

</HEAD>

<BODY>

<P><IMG src="images/logo.gif" width="250" height="40" />您好，歡迎來淘寶！</P>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

</TR>

</TABLE>

</BODY>

</HTML>

示例4在瀏覽器中預覽效果，如圖4.6所示。

圖4.6 表格背景圖像不平鋪效果

4.3.3 方框屬性

方框屬性其實就是對應CSS盒子模型，CSS盒子模型都具有方框屬性。經常使用的方框屬性有：邊界（margin）、邊框（border）、填充（padding）、內容。

這些屬性咱們能夠把它轉移到平常生活中的盒子上來理解，平常生活中所見的盒子也都具備這些屬性，因此叫它盒子模型。平常生活中的盒子的內容就是盒子裏裝的東西；填充就是怕盒子裏裝的貴重瓷器損壞而添加的抗震材料（瓷器周圍的軟布）；邊框就是盒子自己；至於邊界則說明盒子擺放的時候不能和別的盒子挨在一塊兒，盒子與盒子之間要留間隙，這間隙至關於邊界（相鄰紙箱之間的距離）。

下面咱們回過頭來看看網頁設計中的盒子模型，在網頁設計中，內容常指圖片（如圖4.8所示中的「我要投票」圖片）、文字等元素；填充就是盒子內容到盒子邊框之間的距離，能夠理解爲生活中盒子裏的抗震材料的厚度；而邊框有寬度、顏色和樣式之分，咱們又能夠理解爲生活中所見盒子的厚度以及這個盒子是用什麼顏色材料作成的以及什麼樣式；邊界就是該盒子與其餘網頁元素之間的距離，如圖4.8所示。

表4-3 網頁中的盒子模型

屬性	CSS名稱	說明
邊界屬性	margin-top	設置對象的上邊距
	margin-right	設置對象的右邊距
	margin-bottom	設置對象的下邊距
	margin-left	設置對象的左邊距
邊框屬性	border-style	設置邊框的樣式
	border-width	設置邊框的寬度
	border=color	設置邊框的顏色
填充屬性	padding-top	設置內容與上邊框之間的距離
	padding-right	設置內容與右邊框之間的距離
	padding-bottom	設置內容與下邊框之間的距離
	padding-left	設置內容與左邊框之間的距離

用方框屬性解決下面的問題。

問題

要用HTML實現如圖4.9所示的頁面效果，該如何編寫樣式規則？

這個問題其實就要用到方框屬性中的一些屬性，首先表格有背景色，所以要用到背景色屬性background；其次圖4.9中的虛線，是經過方框屬性中的邊框屬性來實現的，所以要用到邊框屬性；最後像「手機充值」等內容與表格的邊框之間有距離，所以要用到填充屬性。

圖4.9中的右邊框是虛線，虛線樣式是用「dashed」屬性值來表示的，所以圖4.9中的右邊框樣式能夠寫爲「border-right-style:dashed;」。其餘屬性表示方法類同，就不一一列舉了，完整的代碼如示例5所示。

示例5

<HTML>

<HEAD>

<TITLE>表格虛線框的樣式</TITLE>

.tableBorder {

Border-right-width:3px;

Border-right-color:red;

Border-right-style:dashed;

Padding-top:20px;

Padding-left:10px;

}

TR {

Background:yellow;

}

</STYLE>

</HEAD>

<BODY>

<TR>

</TR>

<TR>

</TR>

</TABLE>

</BODY>

</HTML>

示例5在瀏覽器中預覽效果，如圖4.9所示。

用方框屬性解決下面的問題。

問答

要用HTML實現如圖4.10所示的效果，該如何編寫樣式規則？

從圖4.10中能夠看出這裏只涉及到邊框屬性，所以這裏主要用到邊框的粗細和邊框的樣式。由於是細邊框，因此應該用「solid」屬性來表示，所以圖4.10中的邊框樣式能夠寫爲」border-style:solid」,完整的代碼如示例6所示。

示例6

<HTML>

<HEAD>

<TITLE>細邊框的文本框</TITLE>

.textBorder {

Border-width:lpx;

Border-style:solid;

}

</STYLE>

</HEAD>

<BODY>

<P>名字：

</P>

<P>密碼：

</P>

</FORM>

</BODY>

</HTML>

示例6在瀏覽器中預覽效果，如圖4.10所示。

圖4.9 虛線框樣式圖4.10 細邊框樣式

4.3.4 特殊樣式

除了以上一些經常使用的樣式以外，CSS樣式表中還提供了一種特殊的樣式，就是指定某個標籤的個別屬性的樣式。這類樣式中最經常使用的就是CSS控制超連接樣式。表4-4列出了超連接4種狀態的樣式。

表4-4 CSS控制超連接樣式

超連接樣式	說明
A:link {color:red}	未被訪問的連接樣式，紅色
A:visited {color:green}	已被訪問過的連接樣式，綠色
A:hover {color:yellow}	鼠標懸浮在連接上時的樣式，黃色
A:active {color:blue}	鼠標正在按下時連接文字的樣式，藍色

示例7

<HTML>

<HEAD>

<TITLE>超連接文本樣式<TITLE>

A {

Color: blue;

Text-decoration: none;

}

A:hover {

Color: red;

}

</STYLE>

</HEAD>

<BODY>

<TR>

</TR>

<TR>

</TR>

</TABLE>

</BODY>

</HTML>

示例7在瀏覽器中預覽效果，如圖4.11所示。

圖4.11 超連接樣式

對比

示例7中「A」樣式是指標籤<A>與</A>之間文本的樣式，而」A:hover」是指標籤<A>的屬性的樣式。

4.3.5 綜合例子：製做圖片按鈕

在Web 2.0網站的各類設計元素中，按鈕是不可或缺的。如何用最簡捷的方法制做出最漂亮的按鈕就成爲了一個問題，因爲按鈕原本的樣子是灰灰的，爲了使按鈕披上漂亮的外衣，通常是在按鈕上放置一個與按鈕等大的圖片。下面咱們就來一步一步地去製做圖片按鈕。

示例8

第一步：準備圖片

不但要準備有漂亮外觀的圖片，還要注意圖片的長寬與按鈕的長寬差很少，不能相差太大。查看圖片的大小能夠有多種方法，最簡單的方法是：用鼠標右擊「圖片」，選擇「屬性」→「摘要」→「高級」命令，就能夠看到圖片的高度和寬度。固然用Photoshop或Windows自帶的「畫圖」等軟件也能夠查看圖片的大小。

第二步：書寫CSS樣式

.picButton {

Background-image: url(images/back.jpg);

Margin: 0px;

Border: 0px;

Padding: 0px;

Height: 23px;

Width: 82px;

Font-size: 14px;

}

</STYLE>

第三步：給按鈕披上外衣

<HTML>

<HEAD>

<TITLE>淘寶網註冊頁</TITLE>

.picButton{

background-image: url(images/back.jpg);

margin: 0px;

border:0px;

padding: 0px;

height: 23px;

width: 82px;

font-size: 14px; }

</STYLE>

</HEAD>

<BODY >

<P>

</P>

</FORM>

</BODY>

</HTML>

示例8在瀏覽器中預覽效果，如圖4.12所示。

圖4.12 圖片按鈕效果

4.4 樣式表的3類應用方式

寫好樣式表以後，其實有3類應用方式，不一樣的應用方式只是應用範圍不一樣，應用效果相同。內嵌樣式表只對某張網頁起做用；若是但願某張網頁中部份內容「不同凡響」，那麼就得采用行內樣式；若是讓網站中全部的網頁都擁有一致性的風格，那就必須使用外部樣式表文件。能夠這麼說，行內樣式是寫在標籤裏面的，只對所在的標籤有效。內嵌樣式表是寫在標籤<HEAD>與</HEAD>裏面的，只對所在的網頁有效。外部樣式表文件是一個以.CSS爲後綴的CSS文件，這個樣式文件能夠被多個網頁引用，從而保證多個網頁具備統一風格。

4.4.1 內嵌樣式表

內嵌樣式表是寫在標籤<HEAD>與</HEAD>裏面的，若是但願本網頁內的全部同類標籤都採用統同樣式，這時應採用內嵌樣式。使用格式以下：

<HEAD>

選擇符 {樣式屬性：取值；樣式屬性：取值；…}

……

</STYLE>

</HEAD>

其中<STYLE>標籤表明樣式的開始，</STYLE>表明樣式的結束。Type=」text/css」表示CSS樣式，text文本類型。

示例9

<HTML>

<HEAD>

<TITLE>內嵌樣式表</TITLE>

font-family:"隸書";

font-size:18px;

color:#FF0000;

text-align:left;

}

H2 {

background-color: #CCFF33;

text-align:left;

}

</STYLE>

</HEAD>

<BODY>

<P>牀前明月光，</P>

<P>疑是地上霜。</P>

<P>我是郭德剛，</P>

<P>低頭思故鄉。</P>

</BODY>

</HTML>

示例9在瀏覽中預覽效果，如圖4.13所示。

圖4.13 內嵌樣式效果

若是但願某段文字和其餘段落文字顯示風格不同，該怎麼辦？例如示例9中，要想「我是郭德剛」這段文字與其餘段落顯示風格不同，怎麼解決？辦法是有的，只有想不到的，沒有作不到的，這裏能夠使用行內樣式表示來解決。

4.4.2 行內樣式表

行內樣式使用元素標籤的style屬性定義。例如：有兩段文本內容，其中有一段落內容須要強調突出顯示，如圖4.14所示，則可在該段標籤內加上」style」屬性，如示例10所示。

示例10

<HTML>

<HEAD>

</HEAD>

<BODY>

這個段落按默認樣式顯示

</P>

<P>

這個段落按默認樣式顯示

</P>

</BODY>

</HTML>

示例10在瀏覽器中預覽效果，如圖4.14所示。

圖4.14 行內樣式效果1

示例11

<HTML>

<HEAD>

<TITLE>行內樣式表達式</TITLE>

</HEAD>

<P>

</P>

<p style=」color:#FF0000; font-size:18px;

Font-family:隸書;border-bottom-style:dashed」>

牀前明月光，<BR>

疑是地上霜。<BR>

我是郭德剛，<BR>

低頭思故鄉。<BR>

</P>

<P>註釋：

靜夜思：寧靜的夜晚所引發的鄉思。

疑：懷疑，覺得。

舉：擡、抑。

</BODY>

</HTML>

示例11在瀏覽器中預覽效果，如圖4.15所示。

圖4.15 行內樣式效果2

從示例10和示例11能夠看出，行內樣式就是修飾某個標籤，規定的樣式只對所修飾的標籤有效，對其餘標籤不起任何做用。

4.4.3 外部樣式表文件

若是但願多個頁面甚至整個網站全部頁面都採用統一風格，就像軍人、醫生等專業人士都穿上統一的服裝，幹不一樣的活，起不一樣的做用同樣，這怎麼辦？有了！把這些樣式從標籤中提取出來，放在一個單獨的文件裏，而後和每張網頁關聯不就能夠了嗎？徹底正確，這就是立刻要講解的外部樣式表。

根據樣式文件與網頁的關聯方式，又分爲兩種：連接外部樣式表和導入樣式表，現逐一講解。

1．連接外部樣式表

連接外部樣式表是指經過HTML的LINK（連接）標籤，把樣式文件和網頁創建關聯，這是早期瀏覽器的用法，其格式以下：

<HEAD>

</HEAD>

其中，rel = 「stylesheet」表示在網頁中使用這個外部樣式表，type = 「text/css」表示文本類型的樣式，href = 「newsyle.css」指定樣式文件，樣式表文件規定後綴名爲*.css。具體的用法和連接方式如示例12所示。

示例12

（1）建立外部樣式表文件。您只需把之前寫在<HEAD>中的樣式規則，寫入到文件便可，假定取名爲newsyle.css。newsyle.css文件中的樣式規則代碼以下：

P {

/*設置段落<P>的樣式：字體和背景色*/

font-family: System;

font-size: 18px;

color: #FF00CC;

}

H2 {

/*設置<H2>的樣式：背景色和對齊方式*/

background-color: #CCFF33;

text-align: center;

}

A { /*設置超連接不帶下劃線，text-decoration 表示文本修飾*/

color: blue;

text-decoration: none;

}

A:hover { /*鼠標在超連接上懸停，帶下劃線*/

color: red;

text-decoration:underline;

}

（2）把樣式文件和網頁綁定。假定某個網站中的Link_Outcss1.html網頁和Link_Outcss1.html網頁都引用newstyle.css樣式表，引用方式以下：

<HTML>

<HEAD>

<TITLE>連接外部樣式</TITLE>

</HEAD>

<BODY>

<P>牀前明月光，<BR>

疑是地上霜。<BR>

我是郭德剛，<BR>

低頭思故鄉。</P>

<P>註釋：

靜夜思：寧靜的夜晚所引發的鄉思。

疑：懷疑，覺得。

舉：擡、仰。</P>

</BODY>

</HTML>

Link_Outcss2.html文件

<HTML>

<HEAD>

<TITLE>連接外部樣式</TITLE>

</HEAD>

<BODY>

<P>國破山河在，<BR>

城春草木深。<BR>

感時花濺淚，<BR>

恨別鳥驚心。</P>

<P>註釋：

詩的這四句，都統在「望」字中。詩人俯仰瞻視，視線由近而遠，又由遠而近，視野從城到山河，再由滿城到花鳥。</P>

</BODY>

</HTML>

（3）預覽連接了外部樣式表HTML文檔的效果。使用瀏覽器打開Link_Outcss1.html文件，效果如圖4.16所示，打開Link_Outcss2.html文件，效果如圖4.17所示。

圖4.16 連接同同樣式文件效果1 圖4.17 連接同同樣式文件效果2

從圖4.16和4.17能夠看出，引用同同樣式的兩個不一樣的HTML文檔，具備相同的頁面顯示風格，不一樣的頁面內容，所以，使用樣式文件能夠使多個頁面保持統一的風格。

2．導入樣式表

在網頁中，還能夠使用@import方法導入樣式表，其格式以下：

<HEAD>

@import 樣式表文件.css;

</style>

</HEAD>

其中，@import表明導入文件，前面規定有一「@」符號。

您能夠將示例12中的連接樣式表代碼改成相應的上述代碼，顯示效果徹底同樣。

經驗

若是有多個樣式規則做用於一個頁面時，樣式規則起做用的優先級是：和內樣式表（寫在標籤內的）>內嵌樣式表（寫在文檔頭部的）>外部樣式表（在外部文件中）。

² 本章總結

Ø 樣式表包括選擇器和樣式規則，樣式規則是由屬性和屬性值組成。

Ø 類樣式實現了樣式規則的靈活共享。

Ø CSS中經常使用的樣式屬性，包括如下內容。

l 文本屬性：用來控制文字的大小、類型、樣式、顏色以及對齊方式。

l 背景屬性：用來設置網頁中某些元素的背景色或背景圖像。

l 方框屬性：用來控制網頁中全部元素的邊界距離，邊框效果和填充間距。

l 特殊樣式：指定某個標籤的個別屬性的樣式，如錨記標籤的相關屬性樣式。

Ø 樣式分爲行內樣式、內嵌樣式、外部樣式。

1、選擇題

1．下面哪一項是類的樣式規則定義（）。

A． TD {color:red; font-family:」隸書」; font-size:24px;}

B． .H1 {color:red; font-family: 「隸書」;}

C． #Fire {color:red; font-family:」隸書」; font-size:24px;}

D． P {background-color:#CCFF33; text-align:left;}

2．有關下列方框屬性正確的是（）。

A．margin-left是設置對象的左填充

B．border-width是設置邊框的寬度

C．padding-left是設置內容與右邊框之間的距離

D．以上說法都不對

3．有關下面代碼片斷的說法，（）

A { color: blue; text-decoration: none; }

A:link{ color: blue; }

A:hover{ color: red; }

A:visited{ color: green; }

</STYLE>

A． A樣式與A:link樣式效果相同

B． A:hover是鼠標正在按下時連接文字的樣式

C． A:link是未被訪問的連接樣式

D． A:visited是鼠標正在按下時連接文字的樣式

4．（）樣式表通常應用於大網站。

A．內嵌

B．連接外部

C．行內

D．嵌入

5．若是網站比較小（也就是最多隻有3個頁面），則能夠使用（）樣式表。

A．內嵌

B．嵌入

C．導入

D．以上都不是

2、簡答題

1．使用CSS樣式表有什麼好處？

2．如何連接一個CSS文件？

3．請用HTML實現如圖4.18所示的頁面。

圖4.18 細邊框和圖片按鈕樣式

提示

（1）設置頁面的背景圖像爲login_back.gif，而且背景圖像垂直平鋪。

（2）使用類選擇器，設置文本框的邊框的細邊框樣式。

（3）使用類選擇器，設置按鈕的樣式，按鈕背景圖像login_submit.glf;字體顏色：#FFFFFF；字體大小：14px;字體粗細：bold;按鈕的邊界、邊框和填充均爲0px;最後設置按鈕的長度、寬度與按鈕背景圖像的長寬同樣。

4．請用HTML實現如圖4.19所示的頁面。

圖4.19 應用樣式效果的頁面

提示

（1）設計表格：3行4列。

（2）使用類選擇器設置第一行的字體大小：16px;顏色：#2A1FFF；加粗：font-weight:bold.同理設置第三行突出顯示的「翡翠手錶」爲紅色。

（3）使用HTML選擇器設置<TABLE>標籤的樣式，背景色：#FFCCFF。同理，設置<TD>標籤的樣式，字體顏色：#2A1FFF; 字體大小：14px;內容與邊框之間的距離：5px.

（4）使用超連接僞類：不帶下劃線；顏色：#333333；鼠標懸停在超連接上方時，顯示下劃線；顏色：#FF5500；其中，第一行的箭頭狀圖片爲icon.gif。

第5章

使用Dreamweaver製做網頁

本章工做任務

用Dreamweaver製做美觀的「點卡購買」頁面

用Dreamweaver製做美觀的「用戶註冊」頁面

用Dreamweaver製做美觀的「客戶中心」頁面

本章技能目標

會用Dreamweaver工具實現已學的圖像、文本、列表標籤

會用Dreamweaver工具實現已學的表格

會用Dreamweaver工具實現已學的表單

會用Dreamweaver工具實現已學的框架

會用Dreamweaver工具實現已學的樣式表

² 本章簡介

在上一章中已介紹了CSS樣式表,不只介紹了樣式表的基本語法,還講解了如何使用經常使用的樣式屬性對網頁的字體、背景、各類表單元素和超連接等進行美化，最後簡單地介紹了3種不一樣的樣式表應用場合。

本章開始講解使用Dreamweaver製做網頁，其中重點是使用Dreamweaver實現各種HTML標籤和CSS樣式，難點是如何製做樣式。爲了使咱們製做的頁面更規整，咱們還要研究使用Dreamweaver如何實現表格對圖文進行佈局，表格對錶單進行佈局和框架頁面。

² 本章單詞

請在預習前完成下列單詞

已學單詞複習

1. style: __________________________ 2. class: ________________________

3. font-family: _____________________ 4. text-decoration: ________________

5. padding: _______________________

本章新單詞

1. object: _________________________ 2. codebase: _____________________

3. circle: _________________________ 4. dashed: _______________________

5. param: ________________________ 6. flash: _________________________

7. noshade: _______________________

5.1 基本標籤

HTML基本標籤在此前咱們都學過，怎麼在這裏又提起？不知你們發現沒有，咱們在前面都是手寫HTML代碼，速度很慢，效率很低，並且容易出錯。那有沒有一種比較好的編寫HTML代碼的工具？它既能提升速度，又能提升效率，還不容易出錯。有！這個工具就是Dreamweaver，它不只提供了強大的設計功能，並且還提供了自動代碼提示功能。下面咱們就使用Dreamweaver經過可視化操做來實現HTML基本標籤，也就是在不寫一行代碼的狀況下，可以快速、高效地實現各種HTML標籤。

5.1.1 什麼是基本標籤

基本標籤就是咱們在製做網頁時，經常使用的一些標籤，如頁面背景、標題、圖片、換段、換行、超連接、顏色、字號大小、對齊、空格、列表，這些都是基本標籤，也是經常使用的標籤，如圖5.1和圖5.2所示。在前面已經學過這些標籤，那爲何還要學呢？緣由很簡章，就是咱們要用Dreamweaver經過可視化操做來實現這些標籤，而不是手寫代碼，這樣能大大提升開發效率，減輕網頁設計人員、開發人員的負擔。

圖5.1 基本標籤1

圖5.2 基本標籤2

5.1.2 如何使用基本標籤

在使用基本標籤前，咱們必須先建立一個HTML文檔，不然，咱們的HTML標籤就無處安身。

1．新建一個HTML頁面

在Dreamweaver中新建頁面，可採起如下3個步驟：

（1）選擇「文件」→「新建」命令或按快捷鍵Ctul+N，彈出「新建文檔」對話框。

（2）從「類別」列表框中選擇「基本頁」選項，而後從右側的列表中選擇「HTML」選項。

（3）再單擊「建立」按鈕。

新文檔在「文檔」窗口中打開，如圖5.3所示。

2. 設置頁面標題和背景

指定在瀏覽器窗口的標題欄中出現的網頁標題，可幫助網站訪問者瞭解網頁內容的主題，不少搜索引擎（如Google、百度等）也是根據網頁的標題進行搜索的。

每張頁面都應該設定一個標題。

要設定標題，請在「文檔」工具欄（如圖5.3所示）的「標題：」文本框中輸入標題，或者從菜單中選擇「修改」→「頁面屬性」命令。

要設定背景，請在圖5.3所示的「屬性」面板中選擇「頁面屬性」→「背景顏色」命令。

圖5.3 Dreamweaver 8 新建文檔界面

3. 插入圖片

要插入圖像，請執行如下步驟。

（1）將插入點放置在「文檔」窗口中要顯示圖像的位置。

（2）選擇「插入」→「圖像」命令。此時，彈出「選擇圖像源文件」對話框，您能夠在此對話框中瀏覽要插入到網頁的圖像。該對話框還包含「圖像預覽」選項。選擇該項能夠在插入圖像閉月羞花，先查看該圖像的縮略圖。

（3）選擇要插入的圖像，而後單擊「肯定」按鈕。圖像即被插入到「文檔」窗口中。

4．插入Flash

不管Flash文件是廣告條、按鈕，仍是交互式動畫，均可以轉換爲.swf格式。這種格式比標準GIF動畫有更多功能，包括高級動畫、下載速度更快和流功能。要插入Flash，請執行如下步驟。

（1）在「文檔」窗口中，將插入點放置在要插入Flash的地方。

（2）選擇「插入」→「媒體」→「Flash」命令。即會出現「選擇文件」對話框（如圖5.4所示）。

（3）選擇一個影片文件。

（4）單擊「肯定」按鈕。

在Flash文件即被插入「文檔」窗口中，並顯示爲灰色矩形，矩形中間是Flash徽標。在「屬性」檢查器中能夠設置影片的寬度的高度。

圖5.4 「選擇文件」對話框

5. 建立超連接

超連接（簡稱爲超連接）是指向到另外一文件（圖形、音頻、視頻）或同一文檔的另外一個部分的連接。當用戶單擊超級連接時，就會跳轉到連接中指定的網址（URL）。

第一種：使用Dreamweaver連接到其餘文檔

（1）在「文檔」窗口中選擇文件或某個圖像做爲連接。

（2）打開「屬性」檢查器（選擇「窗口」→「屬性」命令）。

（3）單擊「連接」字段右邊的文件夾（「瀏覽文件」）圖標進行瀏覽，而後選擇一個文件。

（4）此時將彈出「選擇文件」對話框。在此能夠瀏覽並選擇想要連接打開的文件。

（5）在「選擇文件」對話框中，到連接文檔的路徑顯示在URL字段中。從「相對於」下拉列表框中選擇路徑是否相對於文檔。

（6）單擊「肯定」按鈕應用該連接。

（7）在「屬性」檢查器中，從「目標」下拉列表框中選擇要打開文件的位置。要使連接不文檔顯示在除當前窗口或框架之外的其餘位置，請從「目標」下拉列表框中選擇一個選項。

第二種：使用Dreamweaver連接到同一文檔的特定位置

經過首先建立命名錨記（一般也簡稱錨），而後使用「屬性」檢查器連接到文檔的特定部分。

建立到命名錨記的連接的過程分爲兩步。首先，建立命名錨記，而後建立到該命名錨記的連接。

建立命名錨記，請執行如下操做。

（1）在「文檔」窗口的「設計」視圖中，將插入點放在須要命名錨記的地方。

（2）執行下列操做之一：

Ø 選擇菜單「插入」→「命名錨記」命名。

Ø 按下Ctrl+Alt+A組合鍵。

Ø 在插入欄的「經常使用」類別中，單擊「命名錨記」按鈕。

此時將顯示「命名錨記」對話框，如圖5.5所示。

圖5.5 「命名錨記」對話框

（3）爲錨記命名。在此示例中，錨記名稱設置爲「helpme」。

錨記標記將會顯示在插入點上。以相似方法在文檔中建立任意多個錨記，如圖5.6所示。

圖5.6 在文檔中建立的命名錨記

連接到命名錨記，請執行如下操做。

（1）在「文檔」窗口的「設計」視圖中，選擇要從其建立連接的文本或圖像。

（2）在「屬性」檢查器的「連接」文本框中，輸入一個數字符號（#）和錨記名稱。

例如：

要連接到當前文檔中名爲「helpme」的錨記，輸入#helpme。

經驗

因爲錨記名稱區分大小寫，請在連接選項中仔細輸入錨記名稱。還需記住，在「連接」文本框中輸入的名稱必須與錨記的名稱徹底一致。

6．換段、換行

要將段落格式應用於文本塊，請執行如下步驟。

（1）將插入點放置在文本塊的任一位置。

（2）而後執行如下步驟之一：

Ø 從「屬性」檢查器中的「格式」下拉列表框中選擇「段落」選項。

Ø 選擇「文本」→「段落格式」→「段落」命令。

要將換行格式應用於文本塊，請執行如下操做。

（1）將插入點放置在該文本塊的須要換行的位置。

（2）而後按下Shift+Enter組合鍵。

7．格式化文本

在文檔中輸入文本後，若對文本的格式不滿意，可在「屬性」面板中設置文本的相關屬性，如圖5.7所示。設置文本屬性具體操做步驟以下：

（1）選中要設置屬性的文本，選擇「窗口」→「屬性」命令，打開「屬性」面板如圖5.7所示。

（2）選中文本後，在「屬性」面板中單擊「大小」右邊的下拉列表框可改變字體的大小。

（3）選中文本後，而後執行如下步驟之一可改變文本對齊方式：

Ø 在「屬性」面板中，單擊「文本對齊」按鈕。

Ø 選擇「文本」→「對齊」命令，選擇對齊方式。

（4）要改變文本的顏色，單擊「屬性」面板中的文本顏色卡右下角的下三角按鈕，選擇您喜愛的顏色。

圖5.7 「屬性」面板

8．插入特殊字符

要在Dreamweaver中添加空格，請執行如下步驟。

（1）將插入點放置在要添加的空格的位置。

（2）選擇「插入」→「HTML」→「特殊字符」→「不換行空格」命令，如圖5.8所示。

圖5.8 插入空格

9．建立列表

列表可有效地將主題或數據與文檔的其餘部分分開。最經常使用的列表類型有兩種：項目列表和編號列表。項目列表也稱爲「無序列表」，編號列表也稱爲「有序列表」。

建立列表時，既能夠先輸入列表文本，再將其設置爲項目列表/編號列表，也能夠在輸入文本時將其設置爲項目列表/編號列表。經過「列表屬性」對話框，能夠應用不一樣的項目符號或編號樣式。項目列表共有兩種樣式：項目符號（圓圈）和正方形。編號列表則有多種編號樣式，如羅馬字母和字母等。

要建立列表，請執行如下步驟。

（1）在文檔中，將插入點放置在要顯示第一個列表項的位置。

（2）請執行如下步驟之一：

在「屬性」檢查器中，單擊「項目列表」或「編號列表」按鈕，即出現項目符號或編號。

選擇「文本」→「列表」→「項目列表」或「編號列表」命令。

（3）輸入項目名稱，而後按Enter鍵。

（4）輸入下一個項目，再按Enter鍵。重複以上操做，直到完成添加全部列表項。

要改變整個列表的樣式，請執行如下步驟。

（1）將插入點放置在列表中的任意位置。

（2）選擇「文本」→「列表」→「屬性」命令，或者單擊「屬性」檢查器上的「列表項目」按鈕，即出現「列表屬性」對話框。

（3）從「列表類型」下拉列表框中選擇一種列表類型。

（4）當「列表類型」爲「編號列表」時，在「開始計數」文本框中，輸入列表的起始編號。

（5）單擊「肯定」按鈕應用修改。

5.2表格

表格當初主要用於數據的格式化顯示，如今表格更多地用於排列網頁中的內容，今天咱們就一塊兒來看看在Dreamweaver 8 裏如何建立表格，以及如何使用表格對網頁中的圖文進行佈局。

5.2.1什麼是表格佈局

表格佈局就是爲了精肯定位、合理安排網頁中的文字、圖片等元素，它就像網頁的臉面，是在一個限定的面積範圍內合理安排、佈置圖像、文字等元素的位置，從而設計出版式漂亮的頁面。如圖5.9所示，就是一個使用表格佈局的頁面。

圖5.9 表格佈局文字和圖片

5.2.2 表格的使用

若是咱們要實現如圖5.9所示的表格佈局頁面，該怎麼辦？不急！下面就一步一步地實現如圖5.9所示的表格佈局頁面。請執行如下步驟：

（1）新建空白文檔，而後選擇「插入」→「表格」命令，以顯示「表格」對話框，如圖5.10所示。

（2）輸入所需的行數爲7和列數爲4，選擇「百分比」或「像素」爲單位的表格寬度。

（3）在「邊框粗細」後的文本框中輸入邊框寬度，若是不須要顯示邊框，請將值設爲「0」。

（4）設置「單元格邊框」和「單元格間距」。

（5）設置的相關值如圖5.10所示，而後單擊「肯定」按鈕。

圖5.10 「表格」對話框

（6）選中第1行全部單元格，而後右擊鼠標選擇「表格」→「合併單元格」命令，高度設爲34。同理，合併第3行全部單元格，合併第7行全部單元格，合併弟1列第4行、第1列第5行、第1列第6行這3個單元格，合併第2列第4行、第2列第5行、第2列第6行這個單元格，合併第4列第4行、第4列第5行、第4列第6行這3個單元格，合併後的效果如圖5.11所示。

（7）按圖5.9添加相關文字內容。

（8）光標定位到第4行第1個單元格里，而後依次選擇「插入」→「表單」→「複選框」命令。

（9）在第1行單元格里插入圖片「commodity_tablehead.gif」。同理，在相應位置插入圖片commodity_huaping.jpg、online_pic.gif和list_tool_fav1.gif。

（10）在第4行最後一個單元格輸入「一口價283.30」,而後在「屬性」面板裏設置此單元格背景顏色爲「#FF99FF」和居中對齊。

圖5.11 插入表格併合並相關單元格

（11）光標定位到第3行，而後切換到「代碼」視圖，如圖5.12所示，在光標位置插入以下代碼：

同理，在最後一行插入第2條虛線。

（12）按F12鍵就能夠看到如圖5.9所示的效果。

圖5.12 切換到「代碼」視圖

5.3 表單

表單是HTML的一個重要部分，主要用於採集和提交用戶輸入的信息，它也是實現動態網頁的一種主要表現形式。下面咱們就使用Dreamweaver 8 快速地建立經常使用的表單頁面。

5.3.1 什麼是表單

表單是網站管理者與訪問者之間溝通的橋樑，包含如按鈕、文本框、下拉列表框、單選按鈕、複選框等表單元素。表單元素用於接受用戶的輸入並提供一些交互式操做。用戶輸入的數據能夠經過客戶端腳原本驗證，而後提交給服務器做時進一步的處理。

表單在萬維網（www）上應用很是普遍，並且仍在不斷髮展。下面是一個「註冊」表單的典型例子，如圖5.13所示。

圖5.13 「註冊」表單界面

5.3.2 表單的使用

在Dreamweaver 8 中，如何實現如圖5.13所示的「註冊」表單頁面？一看圖5.13就知道這是一個表單，因此要插入表單，再仔細看看錶單域裏面的文字和表單元素是否是都很規整、井井有理？是的，這是什麼在起做用？表格，因此這裏還使用了表格對錶單中的元素進行佈局。通過這麼一分析，咱們基本上知道了圖5.13所示的「註冊」表單頁面是由表單、表格以及表單元素構成的。

下面咱們就一步一步地實現如圖5.13所示的表單頁面。

1. 插入表單

在Dreamweaver中插入表單時，表單以紅線顯示。用瀏覽器瀏覽時，這條線不會出如今網頁上，僅在Dreamweaver中編輯時可見。添加到表單的每一個項目都必須在表單內部，不然將視之爲另外一個表單，瞭解這一點是很是重要的。爲了佈局美觀，您能夠將表格和圖形等對象放置到表單標籤內。

要將表單插入網頁，請執行如下步驟。

（1）新建空白文檔，將插入放置在「文檔」窗口內要插入表單的地方。單擊「表單」工具欄中「表單」圖標，或在菜單中選擇「插入」→「表單」命令。

（2）此時Dreamweaver即插一個表單，如圖5.14所示。在「設計」視圖中，表單邊框線顯示爲紅色。若是未顯示紅色邊框紅，請選擇「查看」→「可視化助理」→「不可見元素」命令。

單擊表單邊框線或選擇「文檔」窗口左下角表單標籤（<form>）能夠選中整個表單。

圖5.14 「設計」視圖中顯示的表單

（3）將鼠標放到表單域內或選中表單域，此時在「屬性」面板中就能夠設置表單域的各項屬性，如圖5.14所示。

Ø 動做：此屬性指定表單提交到服務器，處理表單信息的動態頁或腳本文件的位置，通常是一個URL路徑，能夠單擊「瀏覽文件」圖標來選擇適當的頁面或腳本文件。這裏指定爲「www.regiser.com」。

Ø 方法：可指定用於將表單數據提交到服務器的方法。當用戶提交表單時，有GET和POST兩種方式可將瀏覽器的信息發送至服務器。選POST方式比較安全。

在設置好表單域的各個屬性後，一個表單就建立好了。

2．插入表單元素

（1）在表單域裏單擊，而後插入一個10行2列的表格，合併最後1行全部單元格，再合併倒數第2行全部單元格，其餘設置如圖5.15所示。

圖5.15 表格屬性

（2）在表格的第一、第二、第3和第4行的第1列分別輸入文本「登陸名：」、「密碼：」、「再次輸入密碼：」和「電子郵箱：」；先把光標定位到要插入表單元素的單元格，而後使用「表單」工具欄，在第2列中分別依次插入一個文本框、兩個密碼框和一個文本框，屬性設置如圖5.16和圖5.17所示。

圖5.16 登陸名文本框屬性設置

圖5.17 密碼框屬性設置

（3）在表格的第5行第1列中輸入文本：「性別：」；在第2列中插入一個單選按鈕組，並調整兩個單選按鈕的位置，使其處於同一行，而後在相應位置後插入男女圖標，其設置如圖5.18所示。

（4）在表格的第6行第1列中輸入文本：「愛好：」；在第2列中插入3個複選框，並在其後輸入相應的文本，以提示用戶的選擇。

（5）在表格的第7行第1列中輸入文本：「出生日期：」；在第2列中插入2個文本框和一個「列表/表單」。單擊「屬性」面板中的「列表值」按鈕，設置其列表值如圖5.19所示。

圖5.18 按鈕組屬性設置圖5.19 列表屬性設置

（6）在表格的第8行第1列和第2列分別插入一個按鈕，左邊的按鈕動做爲「重設表單」，右邊的按鈕動做爲「提交表單」，並修改右邊按鈕的值爲「贊成如下服務條款，提交註冊信息」。

（7）在表格的第9行，直接插入一個文件域便可。

（8）在表格的第10行，先插入一個圖標「read.gif」而後輸入相應文本，最後插入一個多行文本域，其設置如圖5.20所示。

圖5.20 多行文本域屬性設置

（9）把表格的第1列第1行到第9行單元格背景色設爲「E7FBFF」。

最後全部的內容填充完和全部的表單元素插入完的效果如圖5.21所示。

圖5.21 「註冊」表單元素在「設計」視圖裏的效果

5.4 框架

框架是將瀏覽器窗口劃分紅幾個部分，將一些不須要更新的元素放在一個框架內做爲單獨的頁面文檔，這個文檔是不變的，其餘常常更新的內容放在主框架內。框架一般是由框架集和框架兩部分組成，框架集其實是一個頁面。這個頁面裏包含了好多框架窗口，每一個框架窗口能夠單獨顯示一個HTML文檔，這些HTML文檔之間能夠經過超連接聯繫起來，下面咱們就使用Dreamweaver 8 快速地建立框架。

5.4.1 框架網頁

框架將一個瀏覽器窗口分爲多個獨立的區域，每一個區域（框架）顯示一個單獨的可滾動頁面，每一個框架都是瀏覽器窗口內的一個獨立窗口。典型的框架網頁如圖5.22所示，這是關於某個電子商務網站的「客戶中心」服務頁面。該網頁由3個框架組成，每一個框架單獨顯示一張網頁。頂部框架用於顯示橫幅廣告，對應於網頁top.html;左側框架放置客戶中心的一些服務列表，用於頁面導航，對應於頁面left.html；右側窗口用於顯示具體某項客戶中心服務的信息，對應於頁面right.html。爲了瀏覽方便。當瀏覽者單擊左側客戶中心服務列表的超連接時，右側窗口顯示相應的客戶中心服務信息。

圖5.22 網頁中的多個框架

5.4.2 製做框架網頁

Dreamweaver 8 提供了多種建立框架的方法，用戶能夠使用Dreamweaver 8 提供的預置框架集，也能夠本身經過手寫HTML代碼任意地創建框架集。使用Dreamweaver 8 如何實現如圖5.22所示的結構清晰、風格統一的框架集頁面？下面咱們就使用Dreamweaver 8 預置的框架集經過操做來實現如圖5.22所示的框架集頁面。製做過程以下。

1．新建框架網頁

要新建框架網頁，請事先規劃好網頁的設計佈局，而後執行以下步驟。

（1）選擇「文件」→「新建」命令。

（2）在「新建文檔「對話框中，選擇」框架集「類別。

（3）從「框架集「列表中選擇一個合適的框架集，如圖5.23所示。

圖5.23 選擇符合本身要求的框架集

（4）單擊「建立」按鈕，結果如圖5.24所示。

2．設置框架集屬性。

要設置框架的集的屬性，請執行以下步驟。

（1）選中框架集：將鼠標指針移至某個框架的邊框線上，而後單擊，這時將選中整個框架集，如圖5.24所示。

（2）設置框架集的邊框寬度：經過「框架集」屬性檢查器，可修改邊框設置爲「是」，邊框寬度設置爲「1」，這裏咱們不設邊框。

圖5.24 框架集

要調整某個框架的寬度或高度，請將鼠標移至框架的邊線上，左右或上下拖動。

3. 添加每一個框架的內容

若是事先沒有準備每一個框架的網頁內容，如今能夠直接在這些空白的框架中插入內容，而後在保存的時候，將提示逐個保存每一個框架的網頁。

若是事先準備好了每一個框架的網頁內容，如今能夠設置每一個框架所關聯的網頁。因爲咱們事先已準備好了網頁top.html、left.html和right.html。

下面咱們就爲每一個框架設置對應的網頁文件。

（1）選擇「窗口」→「框架」命令，打開「框架」面板，展示框架的縮略圖，如圖5.25所示。

圖5.25 框架面板

（2）單擊「框架「面板中的每一個框架，」屬性「檢查器中出現相應框架的屬性，如圖5.26所示。單擊「源文件」旁邊的文件夾圖標，選擇該框架對應的網頁。

圖5.26 設置框架對應的網頁文件

（3）按照一樣的方法設置其餘框架所對應的網頁。

（4）每一個框架Dreamweaver都有個默認的名稱，如頂部框架默認爲topFrame，左側框架默認爲leftFrame，右側框架默認爲mainFrame，如圖5.26所示。您也能夠單擊「框架名稱」文本框，修改其名稱，本例暫不修改。

（5）框架內容添加後的效果如圖5.27所示。

4. 設置超連接

左側窗口內容爲「客戶中心」服務項目，如今但願當用戶單擊這些服務項目超連接時，連接的網頁將會在右側主窗口中打開，右側窗口的名稱是「mainFrame」。

左側窗口中的「客戶中心」服務項目及其對應超連接如圖5.27所示。

圖5.27 添加網頁內容的框架集頁面

要達到上述效果，請執行以下步驟。

（1）選中要設置超連接的圖片或文本，如「註冊&認證」。

（2）選擇「窗口」→「屬性」命令，打開「屬性」面板，如圖5.28所示。

圖5.28 超連接「屬性」面板

（3）單擊「連接文件」圖標，選擇連接文件，如「right.html」。

（4）單擊「目標」下拉列表框，選擇超連接在哪一個框架中打開，這裏爲了在右側框架打開，因此選擇「mainFrame」。

（5）同理，設置另外兩個超連接。

5．預覽網頁

要預覽網頁，請按快捷鍵F12或單擊工具欄中的「預覽」圖標，將會看到網頁的顯示效果。單擊左側窗口中的「客戶中心」服務項目，連接內容將在右側窗口顯示。

5.5 樣式表

創建樣式表的意義在於實現了統一管理網頁的外觀，設計者不只能夠經過修改樣式表來改變單個網頁的外觀，並且還能夠改變多個網頁甚至整個網站的外觀，從而大大減輕工做量，提升效率。下面咱們就使用Dreamweaver 8 方便地、快速地編寫樣式文件。

5.5.1 什麼是樣式

讓咱們先看看圖5.29所示的效果，圖中的顏色、字體、字體大小、邊框、圖片等都很漂亮，其實這就是樣式的功勞。因此說，若是把網頁內容比喻爲一個女孩的話，樣式就比如這們女孩穿的衣服。女孩喜歡用漂亮的衣裝來打扮本身，一樣，咱們的網頁也須要華麗的樣式來包裝。

圖5.29 應用了樣式的註冊頁面

5.5.2 製做樣式表

既然圖5.29所示頁面樣式如此好看，那如何實現呢？其實，在Dreamweaver 8 中增添了新的標準「CSS樣式」面板，經過它能夠學習和使用以可視化方式應用於頁面的CSS樣式。下面咱們就使用Dreamweaver 8 以可視化方式來建立樣式表，接着應用建立好的樣式表。

1. 建立樣式表

建立如圖5.29所示的樣式表的具體操做步驟以下：

（1）選擇「窗口」→「CSS樣式」命令，打開「CSS樣式」面板，在面板中右擊鼠標，在彈出的菜單中選擇「新建」命令，如圖5.30所示。

（2）在彈出的「新建CSS規則」對話框中，設置內容如圖5.31所示。單擊「肯定」按鈕新建一個樣式文件，並取名爲」make_css1.css」，而後保存。

（3）單擊「保存」按鈕以後，就彈出定義「table的CSS規則定義」對話框，如圖5.32所示，在圖中設置方框的樣式爲」margin:4px; padding: 2px;」,邊框的樣式爲「border:thin solid #FF99FF;」。同理，定義標籤<BODY>的樣式規則爲「font-family: 宋體」；font-size: 12px;」,<A>的樣式規則爲「text-decoration: none; color:blue;」。

圖5.30 新建樣式圖5.31 新建標籤table的css規則

圖5.32 table的CSS規則定義

（4）在「CSS樣式」面板中右擊鼠標，在彈出的菜單中選擇「新建」命令，而後出現如圖5.33所示的「新建CSS規則」對話框。定義一個名稱爲.picButton的類樣式。而後定義其樣式規則爲「background-image:url(back.jpg); border:0 px; margin: 0px; padding; 0px; height: 23px; width: 82px; font-size: 14px;」。定義一個名稱爲.textBorder的類樣式，而後定義其樣式規則爲「border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: sold;」。注意類的樣式名前要加一個句點。

5.33 新建類picButton的CSS規則

2．應用樣式表

CSS樣式表建立完之後，就要對相關的頁面進行樣式的應用，起到美化頁面的效果，應用CSS樣式表的具體操做步驟以下：

（1）打開要應用樣式的網頁，如圖5.34所示。

（2）在「屬性」面板中單擊「樣式」下拉列表框，選擇「附加樣式表」選項，如圖5.34所示。

圖5.34 給打開的網頁指定樣式表

（3）選擇「附加樣式表」選項以後，會出現如圖5.35所示的對話框，單擊「瀏覽」按鈕指定要連接的外部樣式文件爲「make_css」。

圖5.35 設置打開的網頁和指定的樣式表綁定

（4）單擊「肯定」按鈕，就完成了網頁「use_css_form1.html」和樣式表文件「make_css1.css」之間的綁定，也就是網頁「use_css_form1.html」應用了樣式表文件「make_css1.css」。應用樣式以後的效果如圖5.29所示。

² 本章總結

Ø 在設計網頁時,能夠使用Dreamweaver在網頁中設置頁面標題和背景、插入圖片、Flash、文本、特殊字符等對象。

Ø 列表分爲兩類：有序列表和無序列表。

Ø 使用Dreamweaver能夠高效快速地插入表格、表單以及表單元素。

Ø 表格可在必定程度上控制文本、圖像和表單元素在網頁中的位置，而不是徹底由瀏覽器對此進行控制。

Ø 框架將Web 瀏覽器窗口分割爲多個獨立的區域，每一個區域顯示一個可獨立滾動的頁面。

Ø CSS樣式表能夠將網頁製做得更加美觀大方、絢麗多彩。

1、選擇題

1．「頁面屬性」對話框中的（）用於設置將顯示在Web瀏覽器的標題欄上的頁面名稱。

A．文本

B．標題/編碼

C．腳本

D．HTML

2．命名錨記（）。

A．不能連接兩個不一樣的網頁

B．能連接同一網頁的不一樣部分

C．不能連接同一網頁的不一樣部分

D．以上都不是

3．請先閱讀下面的代碼，而後選擇一個正確的答案（）。

</TD>

</TR>……

A．bgcolor修飾的是行的背景色，background修飾的是表格的背景圖片

B．bgcolor修飾的是表格的背景色，background修飾的是行的背景圖片

C．bgcolor修飾的是單元格的背景色，background修飾的是單元格的背景圖片

D．bgcolor修飾的是表格的背景色，background修飾的是單元格的背景圖片

4．請先閱讀下面的代碼，而後選擇一個符合要求的答案（）。

A．上面的代碼表示的表單元素類型分別是：文本框、單選按鈕、複選框、文件域

B．上面的代碼表示的表單元素類型分別是：文本框、複選框、單選按鈕、文件域

C．上面的代碼表示的表單元素類型分別是：密碼框、多選按鈕、複選框、文件域

D．上面的代碼表示的表單元素類型分別是：文本框、單選按鈕、下拉列表框、文件域

2．請先閱讀下面的代碼，根據代碼意思選擇一個正確的答案（）。

</FRAMESET>

A．將瀏覽器分割成2個窗口

B．將瀏覽器分割成3個窗口

C．將瀏覽器分割成4個窗口

D．以上都不是

3、簡答題

1．請用Dreamweaver實現如圖5.36所示的圖文並茂的頁面。

圖5.36 圖文並茂的頁面

2．請用Dreamweaver實現如圖5.37所示的表格佈局頁面。

圖5.37 表格佈局頁面

提示

先建立9行2列的表格，而後合併相關單元格，接着插入圖片和文字，最後設置一個超連接。

3．請用Dreamweaver實現如圖5.38所示的表格對錶單的佈局頁面。

圖5.38 表格對錶單的佈局頁面

提示

先插入表單，而後在表單域裏插入9行2列的表格，再合併第1行單元格，接看插入文字和表單元素，最後設置一些簡單的樣式。

4．請用Dreamweaver實現如圖5.39所示的應用了樣式的表格對錶單的佈局頁面。

圖5.39 應用了樣式的頁面

提示

應用了細邊框樣式、按鈕圖片樣式和表格樣式。

第6章

網站設計和頁面佈局技術（一）

本章工做任務

建立淘寶網站點

設計首頁的總體佈局

製做首頁的導航部分

製做首頁的淘寶集市部分

本章技能目標

能使用網站設計流程分析簡單網站的設計

能使用DIV層技術進行頁面總體佈局

能使用表格進行圖文內容的佈局

² 本章簡介

上一章中，主要介紹了使用Dreamweaver經過可視化操做來實現網頁中的各類元素，既學習瞭如何使用Dreamweaver在網頁中設置頁面標題，背景和插入各類對象，又學習了使用Dreamweaver來建立表格佈局和實現表單頁面，還研究了框架相關知識。另外，爲了製做出賞心悅目的網頁，咱們還學習了在Dreamweaver中如何快速地建立和應用樣式表。

從本章開始，咱們將學習網站設計和佈局技術，其中重點是熟悉網站的開發流程，DIV層和表格佈局各自的使用場合，以及網站開發的一些經驗、技巧；難點是如何進行網頁佈局。

² 本章單詞

請在預習前完成下列單詞

已學單詞複習

1. dashed: ________________________ 2. noshade: ______________________

3. param: ________________________ 4. codebase: ______________________

5. object: __________________________

本章新單詞

1. layer: ___________________________ 2. position: ______________________

3. z-index: ________________________ 4. scrolling: ________________

5. noresize: ________________________ 6. firefox: ______________________

7. explorer: ________________________

6.1 網站的開發流程介紹

建立一個商業網站，要作好商業網站開發的前期準備、中期製做和後期的測試發佈工做。前期準備包括瞭解網站的業務背景、明確網站的設計風格、肯定網站內容等；中期製做主要包括建立站點、製做首頁、製做模板和製做樣式；後期的測試發佈工做包括檢查頁面效果是否美觀、連接是否無缺、不一樣瀏覽器的兼容性以及如何發佈網站。本章和下一章將結合淘寶網案例逐一介紹這些內容。

6.1.1 需求分析

需求分析就是分析客戶的需求是什麼。若是投入大量的人力、物力、財力，開發出的網站卻沒人要，那全部的投入都是徒勞，所以，網站前期的需求分析是至關重要的。

需求分析之因此重要，就由於它具備目地性、方向性、決策性，它在網站開發的過程當中具備舉足輕重的地位，你們必定要對需求分析具備足夠的重視。在一個大型商業網站的開發中，它的做用要遠遠大於直接設計或編碼。簡言之，需求分析的任務就是解決「作什麼」的問題，就是要全面地理解客戶的各項要求，而且可以準確、清晰地表達給參與項目開發的全部成員，保證開發過程按照客戶販需求去作，而不是爲技術而遷就需求。

1．客戶需求

（1）業務背景

作任何事情以前，要明確的是爲何要作這件事情，網站建設也不例外，要分析、理解、領會客戶的需求，這就要求網站開發項目經理對網站的業務背景有較好的理解和把握。

不一樣的業務背景有不一樣的需求，不一樣的需求致使作出來的網站千差萬別。不過，根據網站的主題、題材、客戶需求和客戶企業的業務背景，能夠把網站大體上分爲不一樣的類別。下面就是美國《我的電腦》雜誌（PC Magazine）把網站分爲如下10類。

Ø 網上求職類。

Ø 網上聊天/即時信息/ICQ類。

Ø 網上社區/討論/郵件列表類。

Ø 信息技術類。

Ø 網頁/網站開發類。

Ø 娛樂類。

Ø 旅行類。

Ø 參考/資訊類。

Ø 家庭/教育類。

Ø 生活/時尚類。

這些分類僅供咱們參考，但同時也提醒咱們，建設網站不要建設「面面俱到」型的，可能致使「面面不到」，而是要建設專業性強的、主題鮮明的網站。

每一個大類均可以斷續細分，好比娛樂類再分爲體育/電影/音樂等小類，體育小類又能夠按運動形式分爲足球、籃球、排球、乒乓球等。同時，各個題材相聯繫和交叉結合能夠產生新的題材，例如足球加討論就是足球論壇、旅遊加社區就是旅遊社區等。這麼多種類，如何選擇？能夠遵循以下原則，第1、主題要小而精煉；第2、題材最好是本身熟悉的；第3、題材不要太濫。

下面咱們就以淘寶網案例爲例來分析商務網站的業務背景。

從大的方面講：中國如今上網的人愈來愈多，還有廣大人民的消費水平愈來愈高、消費能力愈來愈強；此外，網上交易是一種發展趨勢，而且在歐美一些國家獲得成功的應用。從小的方面說：若是阿里巴巴公司原來主要是經過店面、郵購等方式銷售產品或服務，或者公司有不少本地以外的潛在客戶能夠挖掘，出於這方面的業務背景，創建在線商務網站是很是合適的，所以，阿里巴巴就着手建立了淘寶網，這不只下降了運營成本，並且爲顧客帶來了實惠和便利，還能增長銷售量、吸引更多的潛在客戶。在線商務網站爲廣大客戶提供在線商品展現、在線商品購買、交互服務和管理的平臺，藉助電子商務軟件，客戶即可以不受時間、空間的限制使用銀行卡在線定貨和購買。從商業模式上看，「在線商務網站」不一樣於「網上商城」的概念，後者是爲商家出租或免費提供「網絡空間」的形式。從營銷模式上看，網站是一種有力的營銷媒介。網站的建設是一個不斷修改、不斷完善、按部就班的過程，若是您想從網絡中受益，那就趕快行動吧！

當初建立淘寶網的目標是創建全球最大最活躍的網上貿易市場，讓天下沒有難作的生意，並且淘寶網是一個目前比較火爆的網上在線商務網站，如圖6.1所示，能夠看出淘寶網具備在線商務網站的典型優勢。第1、體現了在線銷售的方便性；第2、體現了在線服務的及時性。總之，方便、及時是在線購物網站的主要特色。

圖6.1 淘寶網主頁

（2）設計風格

在掌握了網站的業務背景以後，就能夠明確網站的設計風格。

網站的風格是指站點給人留下的總體印象。這個「總體印象」包括站點的標誌、色彩、字體、標語和版面佈局、瀏覽方式、交互性、文字、語氣、內容價值、存在乎義、站點榮譽等諸多因素。如：搜狐網站看上去就是平易近人的，迪斯尼則是生動活潑的，IBM是專業嚴肅的，這些都是網站給人們留下的不一樣感覺。

風格是獨特的，是站點沒同於其餘網站的地方。或者色彩，或者技術，或者交互方式都能讓瀏覽者分辨出網站給人們留下的不一樣感受。

風格是獨特的，是站點不一樣於其餘網站的地方。或者色彩，或者技術，或者交互方式都能讓瀏覽者分辨出網站的獨有特點。例如黑客網站、遊戲網站通常都是黑色調，這種黑色調能反映出此類網站的神祕和誘人之處。

經過網站的外表、內容、文字、交流能夠歸納出一個站點的個性、情緒。是溫文儒雅仍是執著熱情？是活潑易變仍是聽任不羈的？是「豪放派」仍是「婉約派」？要樹立好的網站風格，請參照如下幾個方面：

Ø 合理的網頁佈局。

Ø 讓網站logo儘量地出如今每一個頁面的頁眉中。

Ø 將文字、連接、圖片、背景、邊框等儘可能與主色調一致。

Ø 突出字體特點。在關鍵的標題、菜單、圖片裏使用統一的字體和顏色。

Ø 使用特效，讓網頁看起來生動活潑。

Ø 網站主題鮮明、總體實用性強，內容切合度好等。

像淘寶網具備主題鮮明、色彩亮麗、簡潔明快、時尚生活的設計風格。

（3）網站內容

一個網站應該具有什麼樣的功能，採起什麼樣的表現形式，並無一個統一的模式。不一樣形式的網站其內容也千差萬別。所以，網站中的內容應該根據客戶的需求，企業的業務背景肯定。對於網站的表現形式，應根據網站的設計風格來肯定。下面咱們就以淘寶網爲例，來簡單地介紹一下淘寶網的主要內容，其主要內容以下：公司簡介、商品分類、商品展現、價格信息、商品搜索、網上訂單、會員註冊、客戶服務等。

2．確認需求

通過細緻的需求捕獲活動以後，咱們就能夠開始着手製做網站，不過，不要急！咱們在真正製做網站以前，最好讓美工或UI（User Interface，用戶界面）設計人員將需求捕獲活動的結果加以適當的分析，而後設計一個用戶能夠直接感知的靜態的網站樣板，也就是要作網站的靜態片版。方便客戶與開發人員就網站系統的業務背景、設計風格、網站內容達成共識，並創建需求變動制度與流程，方便後期的製做與完善。

6.1.2 網站製做

通過需求分析階段以後，咱們就能夠正式製做網站。網站的製做主要包括建立站點、製做首頁、製做模板和製做樣式。建立站點能很好地管理咱們的網頁文件和文件夾，因此在網站製做階段建立站點是咱們首先要考慮的問題。首頁是一個網站的門面，是一個網站的靈魂，所以，首頁製做的好壞是一個網站成功的關鍵所在。製做模板便於設計出具備統一風格的網站，而且模板的運用能爲網站的更新和維護帶來極大的方便，爲開發出優秀的網站奠基了基礎。樣式表是一個很神奇的東西，它能把網頁製做得更加絢麗多彩，使網頁呈現不一樣的外觀。當網站有多個頁面時，修改頁面連接的樣式表文件便可同時修改多個頁面的外觀，從而大大地提升工做效率，減小工做量。

6.1.3 測試網頁

測試網頁主要從3個方面着手，第1、頁面的效果是否美觀；第2、頁面中的連接是否無缺；第3、是最重要的也是最煩的一點，就是要兼容不一樣的瀏覽器（如Internet、Explorer、Mozilla Firefox等）。對於網頁是否美觀，仁者見仁，智者見智，那怎麼辦呢？不過有章可循，能夠從頁面總體視覺效果、美工設計、頁面佈局、內容實力、親和力等方面進行檢查。對於連接是否無缺，能夠使用Dreamweaver裏的「檢查連接」命令來檢查，詳細的檢查步驟請參照第7章。對於兼容不一樣瀏覽器，也能夠使用Dreamweaver來檢查，詳細內容請參看第7章。

6.1.4 發佈網站

網站設計好了，經測試以後，就能夠放在服務器上發佈，這樣，能讓更多的人知道您的網站。

發佈網站有兩種方式，一種是本地發佈，即經過本地計算機來完成，在Windows操做系統中，通常經過IIS來構建本地Web發佈平臺，這種發佈方式只能讓局域網中的用戶訪問您的站點；另外一種是遠程發佈，即登陸到Internet上，而後利用有些Internet服務商提供的我的網絡空間來真實的發佈本身所建的網站，不過，這種發佈方式要先申請一個域名和虛擬主機，申請成功後Internet服務商就會給您一個IP地址、用戶名和密碼，使用此IP地址、用戶名和密碼就能夠把您的網站上傳到Internet上，只有這樣，才能讓Internet上的用戶訪問您的站點。能夠根據本身的須要來選擇不一樣的發佈環境。

6.2 建立站點

Micromedia Dreamweaver 8 不只提供了強大的網頁編輯功能，並且不具備強大的網站管理功能。Dreamweaver 8 強大的網站管理功能，能夠管理和維護站點並將站點文件上傳至本地或遠程服務器。下面咱們就使用Dreamweaver 8來創建本地站點。

假設要創建淘寶網站點，取名TaobaoWeb，該站點將包含大量有關商品的信息。

要開始創建這個站點，請在計算機的硬盤驅動器中建立名稱爲「TaobaoWeb」的文件夾，而後把本地站點的根目錄建在這裏，一個本地根目錄對應一個網站。

建立一個站點的具體步驟以下：

（1）在本地硬盤上建立一個文件夾，用於存放站點，假如咱們在D盤驅動器下建立名爲「TaobaoWeb」的文件夾，這個文件夾能夠是空的，也能夠非空。

（2）選擇「站點」→「管理站點」命令，而後在彈出的「站點管理」對話框中選擇「新建」→「站點」命令，此時將彈出「站點定義」對話框。

（3）在「站點定義」對話框中，如圖6.2所示輸入站點名稱「TaobaoWeb」，而後單擊「下一步」按鈕。該站點名稱僅供參考，將不會顯示在Web上。

圖6.2 「站點定義」對話框

（4）在出現的「TaobaoWeb的站點定義爲「對話框中，選擇」否，我不想使用服務器技術「單選按鈕，而後單擊」下一步「按鈕。

此對話框的目的在於確認是否要在網站中使用任何服務器技術（ASP、ASP.NET等）。

若是要在頁面中使用任一服務器技術，則必須選擇「是，我想使用服務器技術」單選按鈕。因爲當前正在創建靜態網站，所以選擇了「否，我不想使用服務器技術」單選按鈕。

（5）選擇「編輯個人計算機上的本地副本，完成後再上傳到服務器（推薦）「單選按鈕，如圖6.3所示。這是推薦的編輯方法。若是在公司的Web服務器或直接在Internet上編輯網頁，則將選擇「使用本地網絡直接在服務器上進行編輯」單選按鈕。

圖6.3 選擇本地根文件夾

（6）單擊「您將把文件存儲在計算機上的什麼位置？」文本字段旁的文件夾圖標（如圖6.3所示）。文件夾圖標用來選擇存儲網頁的根文件夾。

（7）在「選擇站點TaobaoWeb的本地根文件夾：」對話框中，單擊「選擇」下拉列表框的下三角按鈕，而後選擇在D盤驅動器下已建立的文件夾「TaobaoWeb」（如圖6.4所示）。

若是是剛剛開始創建網站，則須要先建立文件夾，而後選擇它。

（8）單擊「選擇」按鈕以後返回，而後單擊「下一步」按鈕。

（9）在「您如何鏈接到遠程服務器？」選項中，從下拉列表框中選擇「無」選項，而後單擊「下一步」按鈕。單擊「下一步」按鈕時，將顯示一份總結，簡要描述了選定的選項。若是對選定的選項滿意，則斷續執行下一步驟，不然請單擊「上一步」按鈕進行修改。

圖6.4 選定的本地根文件夾

（10）單擊「完成」按鈕

（11）在「文件」面板中，選中「站點-TaobaoWeb」，而後右擊鼠標選擇「新建文件夾」命令，接着給新建立的文件夾取名爲「images」，這樣就能夠在根目錄下建立一個名爲「images」的文件夾，它能夠用來存放網頁中的圖片。

圖6.5 建立名爲「images」的文件夾

1．本地站點

本地站點是指存儲Web文件和文檔的文件夾。定義站點是在Dreamweaver中設計網站的第一步，此時設計人員將指定根文件夾的位置。

本地站點包含網站的文件，這些文件存儲在本地磁盤上。每當須要更新網站的文件時，就能夠編輯本地站點中的相應頁面，而後上傳到遠程服務器進行更新。

必須爲每一個網站都定義一個本地站點。

2．遠程站點

遠程站點也就是常說的網站（Web）服務器。

在創建遠程站點以前，必須先建立一個本地站點（該本地站點將與遠程站點關聯）。創建遠程站點以後，便可根據須要上傳文件和將文件下載到本地站點中。

3．根文件夾

存儲全部網站文件的本地文件夾。

站點的本地根文件夾應該是專門爲該站點建立的。

本地站點創建完畢，就好像咱們蓋好了一所房子，如同給咱們的網站安了家，不過這個家仍是空空四壁，擺放好傢俱用品以後才能叫作家，因此咱們就要添置傢俱、購買電器、粉刷牆壁等。這就像要給咱們建立好的站點須要添加內容同樣，所以，咱們也要給剛建立好的站點製做頁面、建立文件夾、收集圖片等來充實咱們的「家」。

6.3 製做淘寶網首頁

本地站點創建好以後，下面個人新「家」添置物品。首先來製做咱們「家」的門面（首頁）。首頁製做得好壞基本上決定了這個網站的成功與否，因此首頁的製做是很是重要的。下面咱們就從頁面內容和頁面佈局兩個方面來開始首頁的製做之旅。

6.3.1 頁面內容

網站內容，不只是大型ICP（Internet Communication Provider）網站的生命源泉，對於企業網站網絡營銷的效果一樣是相當重要的。爲了吸引更多的用戶，對於企業網站來講，更應在內容方面下大功夫。咱們就以淘寶網案例爲例，來了解一下淘寶網首頁有哪些內容。

1．導航部分

幾乎每一個網站裏，爲了方便用戶對網站的內容有個總體的瞭解，爲了方便用戶在一個複雜的網站中進行頁面之間的跳轉，而不至於「迷失方向」，就必需要設計導航部分，由於導航部分對整個網站內容有提綱做用，訪問者能夠根據頁面上的導航部分連接輕鬆進入其餘頁面，從而提升瀏覽效率，節省訪問時間。此外，導航部分還有搜索引擎，能幫助用戶快速找到本身想要的商品。如圖6.6所示，淘寶網頁面最上面部分就是導航部分，主要由商品類別、搜索引擎、幫助等組成，這些內容對你們製做購物網站有借鑑意義。

2．廣告部分

圖6.6所示的廣告部分，選定店慶日、開張日、節假日等適當時間，做促銷宣傳，吸引大量人潮前來參觀，加深消費者對咱們在線購物網站的特別印象，促進銷售達到高潮。

此外，還能夠爲一些商家商品做廣告，達到促銷的目的。這樣，不只給顧客帶來實惠，並且也給咱們帶來更多的收益，還提升了品牌製造商商品的知名度。

3．商品分類部分

圖6.6所示的中間部分，主要是商品的分門別類，方便不一樣年齡、不一樣愛好的用戶快速找到本身想要的商品。

圖6.6 淘寶網案例首頁內容

6.3.2 頁面佈局

在開始作網站以前，網站呈如今您面前的就好像一張白紙，它須要您任意揮灑您的設計才思。如何將6.3.1節中肯定的頁面內容按照設計圖的設計組裝成一個完美的HTML文檔？這就須要用頁面佈局技術，目前比較流行的佈局有3種，即框架佈局、表格佈局和DIV層佈局，每種佈局都有優勢和缺點，有沒有一種佈局能儘可能嚷括這些佈局的優勢，而儘量地摒棄這些佈局的缺點呢？固然有，那就是最佳佈局。

1．框架佈局

不知道什麼緣故，使用框架佈局的人愈來愈少，多是由於它在不一樣瀏覽器之間的兼容性很差；也有多是保存框架集網頁比較麻煩，保存時不但要保存框架集自己頁面，還要保存每一個框架窗口中的HTML文檔；更有多是應用範圍有限的緣由。除此以外，框架也有很多優勢，好比：它能在框架窗口中支持滾動條，從而能顯示更多的內容；還能有效的實現頁面導航工做，從而方便用戶瀏覽網頁；因爲框架集中相同的內容只用下載一次，不一樣的內容才須要從新下載，因此使用框架佈局能減小頁面下載時間。

從佈局上考慮，框架佈局有它存在的理由，支持框架結構不失爲一個好的選擇。其實，在因特網上使用框架佈局的網頁還很多，例如，如圖6.7所示的BBS論壇頁面，還有一些小型的商業網站以及各類網頁形式的學習教程，此外在一些網站的後臺管理頁面中也經常用到框架技術。

圖6.7 BBS論壇頁面

對於淘網寶首頁你們想一想用框架佈局合理嗎？根據框架佈局的優缺點，淘寶網首頁顯然不適合使用框架佈局，那咱們接着探討一下表格佈局，看錶格佈局是否適合用來佈局淘寶網首頁？

2．表格佈局

表格當初出現的初衷是用來存放內容，根本不是用來佈局的。因爲使用表格來佈局頁面的人多了，纔有表格佈局這一說法。表格佈局好像已經成爲一個標準，隨便瀏覽一個站點，它們必定存在表格佈局。表格佈局的優點在於能很方便地排列有規律、結構均勻的內容或數據（如圖6.8所示），並且表格在定位圖片和文本上比起用CSS更加方便，所以，表格適合用來佈局很規整的內容或數據。表格佈局的缺點是，當你用了過多表格時，會產生過多的垃圾代碼，還會影響頁面的下載時間。另外當頁

面佈局須要調整時，每每都要從新制做表格，所以表格佈局的靈活性不大、難於修改。

任何事物都有兩面性，表格佈局也不例外，所以，咱們應該儘可能少用其缺點，多多使用其優勢來爲咱們服務。雖然表格的缺點很多，可是在因特網上使用表格的網頁隨處可見。幾乎全部的網站都用過表格，沒用過表格的網站簡直就是百裏挑一。所以，表格佈局絕對不可拋棄。

對於淘寶首頁你們想一想用表格佈局合理嗎？根據表格佈局的優缺點，淘寶網首頁若是採用了表格佈局，那確定會產生較多的冗餘代碼，並且不便於修改、擴展，還會影響頁面的下載時間。那如何是好？不急！辦法是有的，下面咱們接着討論DIV層佈局，看DIV層佈局是否適合用來佈局淘寶網首頁？

圖6.8 表格佈局頁面

3．DIV層佈局

DIV層佈局離不開CSS的配合，業界愈來愈關注DIV+CSS的標準化設計，大到各大門戶網站，小到不可勝數的我的網站，在DIV+CSS標準化的影響下，網頁設計人員已經把這一要求做爲行業標準。那麼什麼是DIV+CSS標準？DIV+CSS的標準化設計到底有什麼好處？下面爲你們一一揭開謎底。

CSS+DIV是網站標準中經常使用的術語之一，一般爲了說明與HTML網頁設計語言中的表格定位方式的區別，所以XHTML網站設計標準中，再也不使用表格定位技術，而是採用CSS+DIV的方式實現各類定位。

CSS是英語層疊樣式表單（Cascading Style Sheets）的縮寫，它是一種用來表現HTML、XML等文件式樣的計算機語言。

DIV元素是用來爲HTML文檔內大塊的內容提供結構的背景的元素，就像一個容器同樣可大可小、可長可短、可寬可窄。DIV的起始標籤和結束標籤之間的全部內容都是用來構成這個塊的，其中所包含元素的特性由DIV標籤的屬性來控制，或者是經過使用樣式表格式化這個塊進行控制。

採用DIV+CSS標準的好處有：

Ø 減小頁面代碼，加快頁面下載，提升頁面顯示速度。

Ø 結構清晰，容易被搜索引擎搜索到。

Ø 改版方便，並且縮短改版時間。

Ø 強大的字體控制和排版能力。

Ø 表現和內容相分離，方便美工與程序員分工協做。

Ø 更能體現樣式和結構相分離，結構的重構性強。

Ø 在幾乎全部的瀏覽器上均可以使用。

Ø 你能夠輕鬆地控制頁面的佈局。

Ø 你能夠將許多網頁的樣式同時更新，不用再一頁一頁地更新了。

Ø 你能夠將站點上全部的網頁風格都使用一個CSS文件進行控制，中要修改這個CSS文件中相應的樣式規則，那麼整個站點的全部頁面都會隨之發生變更。

固然任何新事物的出現，並不都是完美的，而是一把雙刃劍。所以利用DIV+CSS來佈局網頁也不例外，因此DIV+CSS標準也存在缺點。其主要缺點是比較靈活、難於控制、對網頁設計人員要求比較高，這些就會帶來更高成本和耗費更長的時間。所以，DIV+CSS對於中小型網站來講，意義不大；比較適合用來製做複雜的不規則頁面、業務種類較多的大型商業網站。爲了加深對DIV層佈局的理解，下面就來體驗一把什麼是DIV層佈局。

使用Dreamweaver來繪製如圖6.9所示的層佈局的頁面，具體操做步驟以下：

圖6.9 DIV層佈局頁面

（1）打開Dreamweaver，新建一個空白文檔。

（2）在插入欄的「佈局」類別中單擊「繪製層」按鈕。

（3）在「文檔資料」窗口的「設計」視圖中，執行下列操做之一：

按下鼠標左鍵拖動以繪製一個層。

經過按住Ctrl鍵並按下鼠標左鍵進行拖動來連續繪製多個層（只要不鬆開Ctrl鍵，就能夠斷續繪製新的層）。

（4）繪製完如圖6.9所示的3層以後，選中第一個層，而後在「屬性」面板中設置層的背景色爲紅色，如圖6.10所示。同理，爲第二個和第三個層分別設置背景色爲黃色和綠色。最後的頁面效果如圖6.9所示。

圖6.10 設置層的背景色

圖6.9DIV層佈局頁面對應的HTML代碼以下：

示例1

<HTML>

<HEAD>

<TITLE>div建立步驟</TITLE>

</STYLE type=」text/css」>

#Layer1 {

position:absolute;

left:9px;

top:12px;

width:418px;

height:58px;

z-index:1;

background-color: #FF0000;

}

#Layer2 {

position:absolute;

left:9px;

top:72px;

width:419px;

height:55px;

z-index:2;

background-color: #FFFF00;

#Layer3 {

position:absolute;

left:9px;

top:128px;

width:419px;

height:58px;

z-index:3;

background-color: #009900;

</STYLE>

</HEAD>

<BODY>

</BODY>

</HTML>

示例1中的#Layer1是一個ID選擇器,ID選擇器使用HTML元素的ID屬性,其用法與類選擇器很相似。ID選擇器的定義格式爲：

#ID名{

樣式規則； }

注意ID名前面有「#」號，ID名也能夠隨意命名，但在整個網頁中必須惟一，不能重名。某個標籤（如<DIV>）但願採用該ID選擇器的樣式，語法格式爲：

4．最佳佈局

對於淘寶網首頁你們想一想用DIV層佈局合理嗎？根據DIV層佈局的優缺點，淘寶網首頁的確很是適合採用DIV層佈局，不過，還有一絲疑慮，就是淘寶網首頁中還有不少有規律、結構均勻的內容或數據，若是用DIV層來佈局將是一件很是痛苦的事，那怎麼辦？有了！對於複雜的不規則的區域，咱們採用DIV層佈局；對於有規律、結構均勻的內容或數據，咱們採用表格佈局。這樣就能很好地解決淘寶網頁面佈局問題，這也說明對於大型的商業網站，最佳佈局方式是DIV層佈局+表格佈局。

示例2

（1）打開HTML文檔，在<HEAD>與</HEAD>之間相應位置輸入如下代碼：

#head {

position:absolute;

left:10px;

top:6px;

width:950px;

height:100px;

z-index:1;

}

#content {

position:absolute;

left:10px;

top:110px;

width:950px;

height:139px;

z-index:2;

background-color: #009900;

}

#foot {

position:absolute;

left:10px;

top:252px;

width:950px;

height:131px;

z-index:3;

background-color: #FFFF00;

}

</STYLE>

（2）在網頁<BODY>與</BODY>之間相應的位置輸入以下代碼：

<TR>

</TR>

<TR>

<TD colspan=」6」 align=」right」>您好，歡迎來淘寶！

[<A herf=」register/register.html」 target=」_blank」>

免費註冊</A>] [<A href=」login/login.htm」 target=」_blank」>

登陸</A>] 阿里旺旺支付寶

</TD>

</TR>

</TABLE>

</DIV>

（3）保存文檔，在瀏覽器中預覽效果，如圖6.11所示。

圖6.11 DIV+Table佈局頁面效果

² 本章總結

Ø 需求分析是對業務的深刻分析，準確捕獲客戶想幹什麼。

Ø 網站製做主要包括建立站點、製做首頁、製做模板和製做樣式。

Ø 測試網頁主要從3個方面進行，即頁面是否美觀、是否有死連接和可否兼容不一樣瀏覽器。

Ø 首頁的製做能夠從頁面內容和頁面佈局進行着手。

Ø 框架佈局有存在的理由，表格佈局不可拋棄，DIV層佈局是發展趨勢。

1、選擇題

1．下面（）是ID的樣式規則定義。

A．TR { color:red; font-family:」隸書」; font-size:24px; }

B．.H2 { color:red; font-family:」隸書」; }

C．#grass { color:green; font-family:」隸書」; font-size:24px; }

D．P { bacdground-color: #CCFF33; text-align: left; }

2．採用DIV+CSS標準的好處有（）。

A．減小頁面冗餘代碼

B．更容易修改和維護

C．容易被搜索引擎搜索到

D．能夠輕鬆地控制頁面的佈局

3．有關下面片斷代碼的說法，（）是正確的。

#head {

position:absolute;

left: 9px

top: 12px;

width: 418px;

height: 58px;

background-color: #FF0000;

}

A．#head是類樣式選擇符

B．position:absolute;表示絕對定位，也就是被定位的元素位置固定不變

C．width:418px; height:58px; 表示被修飾的元素距離別的元素的左右和上下邊距

D．background-color: #FF0000; 表示被修飾的元素的背景圖像

4．通常網頁由（）組成。

A．導航部分

B．內容部分

D．新聞部分

5．在網頁設計中，涉及到的頁面佈局有（）。

A．框架佈局

B．表格佈局

C． DIV層佈局

D．混合佈局（框架佈局、表格佈局和DIV層佈局的組合）

2、簡答題

1．簡述建設一個網站的通常開發流程。

2．簡述3種頁面佈局的優勢及使用場合？

3．請用表格佈局實現如圖6.12所示的頁面效果。

圖6.12 使用表格佈局圖文並茂的頁面

提示

（1）建立一個8行4列的表格，而後合併相關單元格。

（2）在單元格里插入圖片，添加文字，並設置文字的字體大小、顏色和類型。

5．請用DIV層加表格佈局實現如圖6.13所示的頁面效果。

圖6.13 應用樣式效果的頁面

提示

（1）建立兩個DIV層，一個DIV層用於導航欄佈局，另外一個用於廣告部分。

（2）分別在每一個層裏插入表格，而後合併相關單元格，接着在單元格里插入圖片、Flash和添加文本內容。

（3）給<BODY>和<TD>標籤指定樣式。

第7章

網站設計和頁面佈局技術（二）

本章工做任務

製做網站的模板頁

用模板從新制做「裝備」的商品展現頁

用模板製做「裝備」商品的詳細介紹頁

用模板製做商品「購買頁面」

製做樣式表文件並和其餘頁面綁定

本章技能目標

會使用Dreamweaver製做模板並應用到其餘頁面

會使用Dreamweaver製做樣式表文件並綁定到各頁面

會使用網站開發流程製做併發佈網站

² 本章簡介

上一章中，首先介紹了通常網站的開發流程，其主要流程有需求分析，網站製做，測試網頁和發佈網站。隨後簡單講解了淘寶網首頁有哪些內容？最後着重研究了頁面佈局技術，其中框架佈局和表格佈局有存在的必要，不可拋棄，DIV層佈局是將來的發展趨勢。

從本章開始，咱們將繼續學習網站製做相關知識。全部的頁面製做好以後，咱們就要測試頁面內容，來審視咱們製做的頁面是否美觀，來檢查頁面中是否有死連接，來查看頁面是否能夠兼容不一樣的瀏覽器。測試完以後，爲了使更多的人知道您的網站，就必須把咱們製做，測試好的網站在網上進行發佈。這一章的內容都是重點，難點是如何調整頁面和其餘瀏覽器的兼容性。

² 本章單詞

請在預習前完成下列單詞

已學單詞複習

1. layer: _________________________ 2. position: _____________________

3. z-index: _______________________ 4. scrolling: ____________________

5. firefox: _________________________

本章新單詞

1. Templates: _______________________ 2. line-height: __________________

3. information: _____________________ 4. services: _____________________

5. server: ________________________ 6. enterprise: ___________________

7. edition: ________________________

7.1 製做模板並應用到其餘頁面

7.1.1 爲何須要模板

網站一般都遵循一個標準結構，例如全部頁面都有頁眉、導航欄和頁腳。模板有助於保持整個網站外觀和風格的一致性。假設您的網站有許多頁面，有些頁面含有相同的頁眉、導航欄和隱私條例說明、版權標題。如今要作一個小改動，好比說在版權文本中加一些內容。那麼就必須分別打開每一個頁面，並作必要的修改，這樣是否是很是耗時耗力，並且容易出錯，那怎麼辦？不急，設計HTML語言的人早就爲咱們想好了，多個頁面中相同部分能夠製做成一個文件，它就是模板。若是使用了模板，這項工做就變得輕鬆多了。您只需在模板中進行修改，應用了該模板的全部頁面都自動更新。

其實模板的功能就是將版式和內容的設計分離，先設計版式佈局並存爲模板，而後，對於相同佈局版式的網頁就能夠用前面定義的模板來建立，在新的頁面中只需修改部份內容就能夠快速製做成功，並且能夠保證頁面風格的致性。模板的好處的確很多，下面咱們就趕快來體驗一把模板給咱們帶來的方便之處。

7.1.2 製做模板

建立模板的方法有兩種，一種是將現有的HTML文檔保存爲模板，另外一種是在空白HTML文檔中從頭開始建立。

最簡單的方法是先打開一個建立好的網頁，而後將它用做模板。另外一個方法是從頭開始建立，而後在其中添加圖像、表格和文本。最後必須決定哪些區域是能夠修改的（內容），而後保存爲模板，這樣就能夠開始建立其餘頁面了。Dreamweaver使用標準的HTML註釋來肯定使用了哪一個模板和哪些區域能夠編輯。模板將自動保存在」Templates」文件夾中，該文件夾在站點的本地根文件夾下。

下面分別介紹用兩種不一樣的方式來建立模板。

1．將現有文檔保存爲模板

（1）選擇「文件」→「打開」命令，即會出現「打開」對話框。

（2）在「打開」對話框中選擇要建立爲模板的現有文檔。

（3）單擊「肯定」按鈕，該文檔將出如今「文檔」窗口中，如圖7.1所示。

（4）選擇「文件」→「另存爲模板」命令，將出現「另存爲模板」對話框。

圖7.1 另存爲模板頁面

（5）在此對話框中，從「站點」下拉列表框中選擇要保存模板的站點。在「另存爲」文本框中，輸入模板的名稱，如圖7.2所示。

（6）單擊「保存」按鈕。

此文檔將以.dwt爲擴展名保存在」Templates」文件夾下。

圖7.2 「另存爲模板」對話框

2．新建空白模板

（1）選擇「窗口」→「資源」命令或按F11鍵，即會出現「資源」面板。

（2）單擊「資源」面板上的「模板」圖標，將顯示「模板」面板，如圖7.3所示。

（3）單擊「模板」面板右下角的「新建模板」圖標。

（4）在「名稱」字段中輸入新模板名稱，而後按Enter鍵。

（5）單擊「模板」面板右下角的「編輯」圖標。

圖7.3 在「資源」面板上顯示模板

在「文檔」窗口中，將打開該空白模板。在此模板中，能夠添加DIV塊區域、表格、文本、圖像和其餘頁面元素。

經驗

在使用模板時需謹記，不能將模板從「Templates」文件夾中移出，也不能將非模板文件放在「Templates」文件夾下。並且，不能將「Templates」文件夾從站點的本地根文件夾中移出，不然將致使「Templates」文件夾的路徑出錯。

問題

在模板「文檔」窗口中添加內容以後，默認狀況下，應用模板的文檔都處於鎖定狀態，也就是不能編輯，那怎麼辦？

所以，建立模板後，需指定模板窗口中哪部分能夠編輯，以便在其中添加內容；哪部分不可編輯，以便保持全部頁面結構一致。

3．定義可編輯區域

1）定義可編輯區域

（1）在「模板」文檔中選擇要設置爲可編輯的區域。

（2）請執行如下步驟之一：

Ø 在插入欄的「經常使用」選項卡中，單擊「模板」圖標，在彈出的下拉菜單中選擇「可編輯區域」命令。

Ø 選擇「插入」→「模板對象」→「可編輯區域」命令。

Ø 右擊選中的區域，而後選擇「模板」→「新建可編輯區域」命令。

Ø 按Ctrl+Alt+V組合鍵。

（3）此時，將出現「新建可編輯區域」對話框，如圖7.4所示。在「名稱」文本框中，爲該區域輸入一個惟一的名稱。同一名稱不能使用兩次。

圖7.4 「新建可編輯區域」對話框

（4）單擊「肯定」按鈕。

該區域將高亮顯示在一個矩形內，能夠向其中添加內容，每一個文檔中的內容均可不一樣。該區域的名稱在對應可編輯區域頂部的矩形標籤中。

2）刪除可編輯區域

若是在模板中設置了可編輯區域並想鎖定它，即將其設爲不可編輯，則需使用「刪除模板標記」選項。

（1）選擇要編輯的區域。

（2）選擇「修改」→「模板」→「刪除模板標記」命令。

該區域即被鎖定，不可編輯。

4．編輯模板

要編輯模板，請執行如下步驟。

（1）選擇「窗口」→「資源」命令。

（2）在「資源」面板中，單擊「模板」圖標。

（3）從模板列表中，選擇要編輯的模板，而後雙擊。

該模板將出如今「文檔」窗口中。此時便可編輯該模板，並對其作必要的修改。

7.1.3 應用模板

在模板建立好以後，必須確保全部相關的頁面都使用該模板，以便在更新模板時，這些頁面會隨之自動更新。下面介紹將模板應用於頁面的步驟。

將模板應用於打開的文檔的步驟以下。

（1）新建要應用模板的空白文檔。

（2）在「資源」面板中單擊「模板」圖標，找到要應用的模板。

（3）將模板從面板拖到空白「文檔」窗口中。

（4）在可編輯區域添加或編輯數據。

結果如圖7.5所示。

經驗

在應用模板時需注意，未應用模板的HTML文檔必定是空白文檔，即不要添加任何內容，這樣在應用模板時不會出現問題，不然，會出現應用不成功的狀況。

圖7.5 模板應用於頁面並在可編輯區域添加了內容

用模板從新制做「裝備」的商品展現頁，步驟如示例1所示。

示例1

（1）新建要應用模板的空白文檔。

（2）應用如圖7.1所示的模板。

（3）在可編輯區域添加或編輯如圖7.6所示的頁面內容。

圖7.6 未應用模板的商品展現頁

應用模板以後的商品展現頁的頁面效果如圖7.7所示。

圖7.6 未應用模板的商品展現頁

用模板製做「裝備」商品的詳細介紹頁，步驟如示例2所示。

示例2

（1）新建要應用模板的空白文檔。

（2）應用如圖7.1所示的模板。

（3）在可編輯區域添加未應用模板的商品的詳細介紹頁內容。

應用模板以後的商品的詳細介紹頁的頁面效果如圖7.8所示。

圖7.8 應用了模板的商品的詳細介紹頁

用模板製做「購買頁面」（即單擊「馬上購買！」按鈕後的頁面），步驟如示例3所示。

示例3

（1）新建要應用模板的空白文檔。

（2）應用如圖7.1所示的模板。

（3）在可編輯區域添加未應用模板的購買頁面內容。

應用模板以後的購買頁面的頁面效果如圖7.9所示。

圖7.9 應用了模板的購買頁面

7.2 製做樣式表文件並和其餘頁面綁定

問題

你們發現前面應用模板的頁面中存在的問題了嗎？如圖7.七、圖7.8和圖7.9

所示，是否是頁面中有些字體過大、顏色搭配不合理、超連接樣式極其難看、文本排列不夠整齊等，那如何解決這些問題？

你們確定想到了使用樣式表，因爲有多個頁面甚至整個站點都要應用統一的樣式，因此應該建立樣式表文件，方便多個頁面同時引用。

7.2.1 製做樣式表

根據圖7.七、圖7.8和圖7.9所示的頁面效果，咱們應該設置哪些樣式？其實，這也不難，你只要看到頁面中哪裏不美觀，那麼那裏就得應用樣式。因此根據圖7.七、圖7.8和圖7.9所示的不美觀的地方，能夠得出應該應用以下樣式：字體樣式、超連接樣式、顏色背景樣式、文本樣式、方框樣式等。

下面咱們就爲圖7.七、圖7.8和圖7.9所示的頁面建立樣式文件。

（1）打開Dreamweaver，選擇「文件」→「新建」命令，彈出「新建文檔」對話框，在「類別」列表框選擇「基本頁」選擇，在「基本頁」列表框中選擇「CSS」選項，如圖7.10所示。

（2）單擊「建立」按鈕，打開CSS樣式編輯頁面。

（3）選擇「窗口」→「CSS樣式」命令，打開「CSS樣式」面板，在面板中右擊鼠標，在彈出的菜單中選擇「新建」命令。

（4）在彈出的「新建CSS規則」對話框中，就能夠新建標籤樣式（如body、a等）、ID樣式（如#head、#search_form等）和類樣式（如.fontcolor_white、.tableBorder等）。

圖7.10 「新建文檔」對話框

（5）建立完樣式規則以後，樣式文件裏所對應的完整代碼以下：

body {

margin-top: 7px;

font-family:」宋體」, sans-serif;

font-size:12px;

a:link {

color:#000000;

}

a:visited {

color:#999999;

}

a:hover {

color:#CC0000;

}

#head { !頭部樣式

float:left;

margin:0px auto 0px auto;

width:950px;

height:140px;

}

#search_form {

margin:0px auto 0px auto;

padding:1px 0px 1px 0xp;

eidth:950px;

height:55px;

}

.fontcolor_white {

color:#FFFFFF;

font-size:12px;

}

#content { !中間內容部分樣式

Float:left;

margin: 0px auto 0px auto;

width: 950px;

/*height: 720px; */

text-align: left;

background-color: #FFFFFF;

font-size:12px; }

#content a {

color: #0033FF;

text-decoration:none;

}

#foot a {

color: #0033FF;

}

#content a:hover, #foot a:hover {

color: #FF3300;

}

.fontcolor_blue {

color:blue;

font-size:12px;

}

.font_bold {

font-size: 16px;

font-weight: bold; }

.tableBorder {

border-right-width: 2px;

border-right-color: #FF9900;

border-right-style:dashed;

padding-top: 10px;

padding-left: 5px; }

.tablepad {

padding-left: 10px; }

#foot {

margin: 0px auto 0px auto;

width: 950px;

height: 93px;

text-alight:center; }

.login_success1 {

Font-size: 24px;

Font-weight: bold; }

.login_success2 {font-size: 36px}

.login_success3 {font-size: 24px}

.register_textBroader {

border-width: 1px;

border-style: solid; }

.register_table_line {

font-size: 14px;

line-height: 35px;

margin-right: 5px;

text-align: right; }

（6）選擇「文件」→「另存爲」命令，而後在彈出的「另存爲」對話框中將此CSS樣式文件保存爲mainpage.css,最後單擊「保存」按鈕，如圖7.11所示。這樣一個樣式文件就建立好了，隨後就能夠被多個頁面引用。

圖7.11 「另存爲」對話框

7.2.2 應用樣式文件

樣式文件建立好以後，其實仍是一個孤立的文件，若是不該用到頁面中，就不能顯示出其強大的威力。下面咱們就對未應用樣式的商品的詳細介紹頁綁定樣式文件，首先來了解一下應用CSS樣式表的具體操做步驟。

（1）打開要應用樣式的網頁，如圖7.12所示。

圖7.12 打開要應用樣式的網頁

（2）在「屬性」面板中單擊「樣式」下拉列表框，選擇「附加樣式表」選項。

（3）選擇「附加樣式表」選項以後，會出現如圖7.13所示的對話框，單擊「瀏覽」按鈕指定要連接的外部樣式文件爲「mainpage.css」(上一節中已建立好的樣式文件)。

圖7.13 設置打開的網頁和指定的樣式表綁定

（4）單擊「肯定」按鈕，就完成了商品詳細介紹頁和樣式表文件「mainpage.css」之間的綁定，應用樣式以後的頁面效果如圖7.14所示。

圖7.14 應用樣式以後的商品詳細介紹頁

把圖7.12和圖7.14進行比較，明顯能夠看出圖7.14所示的頁面漂亮多啦！這就是樣式文件給咱們帶來的美感。

7.3 設置頁面間的連接

若是咱們把淘寶網案例的主頁、登陸頁面、註冊頁面、商品展現頁、商品詳細介紹頁、購買頁等頁面都作好了，而且應用了模板和樣式，其實這些頁面還都是孤立的，沒有任何聯繫，那如何將這些頁面之間相互聯繫起來？從而造成一個有機的總體。

我想你們會異口同聲地回答使用超連接,沒錯！就是使用超連接。超連接能把同一網站中同一頁面不一樣部分，同一網站中不一樣的頁面、不一樣網站中不一樣頁面不一樣部分、不一樣網站中不一樣頁面連接起來，從而在不一樣網站、不一樣頁面、同一頁面部分之間創建起千絲萬縷的聯繫。

請你們按下面的要求把有關頁面經過超連接聯繫起來。

（1）將淘寶網案例首頁中的「免費註冊」、「登陸」分別和註冊頁面、登陸頁面連接起來。

（2）將首頁中寶貝分類欄目中的「裝備」和「裝備」商品展現頁連接起來。

（3）將商品展現頁中的「寶貝圖片」和「快樂幻想區神恩石1組」商品詳細信息介紹頁連接起來。

（4）將「快樂幻想區神恩石1組」商品詳細信息介紹頁中的「馬上購買」和「購買頁面」連接起來。

創建超連接的順序要求：先註冊，後登陸，接着從首頁中選擇某類商品（裝備），查看商品列表，再看詳細介紹，最後購買。

7.4 測試併發佈網站

網站的開發是一個系統工程，涉及到不少人共同完成，這麼多人同時完成一個網站，可能會出現許多問題，如整個網站在設計上是否統一和諧、連接地址是否有錯，不一樣的瀏覽器打開同一網頁是否能正常顯示等，這就須要咱們對網站進行測試。網站通過成功測試以後，就要把它發佈到Web服務器上，纔可以讓別人欣賞。

7.4.1 測試內容

1．頁面效果是否美觀

一個網站作的好壞很大程度上取決於頁面效果，尤爲是對那些不懂網站建設技術的人，他們就看你作的網站是否漂亮、美觀、大方，因此一個網站中的頁面效果對此網站的成功具備舉足輕重的做用。對於頁面效果是否美觀，不一樣的人有不一樣的見解，那怎麼辦？不要緊，一個網站不能保證全部的人都說美觀，可是隻要保證大部分人都說漂亮就行。

頁面效果是否美觀，實際上是有據可依的，能夠從「結構清晰，美觀大方，用戶界面良好，瀏覽方便快捷，實用性、創新性、交互性」等方面去判斷，而後來完善、美化咱們製做的頁面。

2．連接是否無缺

1）檢查單個頁面連接

若要檢查單個頁面連接，先打開此站點，接着將該文檔打開，而後選擇「文件」→「檢查頁」→「檢查連接」命令，系統自動打開「結果」面板顯示「連接檢查器」面板，並顯示連接報告，該報告爲臨時文件，用戶可經過單擊「保存報告」按鈕將報告保存起來。

「顯示」下拉列表框中共包含3種類型的連接報告：

Ø 「斷掉的連接」選項：顯示含有斷裂超連接的網頁名稱。

Ø 「外部連接選項」：顯示包含的外部超連接的網頁名稱（可今後網頁連接到其餘網站中的網頁）。

Ø 「孤立文件」選項：顯示網站中沒有被使用到的或未被連接到的文件，即孤立的文件。

若是爲單個文件或是選定文件及文件夾應用「孤立文件」選項，則會彈出提示對話框，提示用戶孤立文件報告是一個獨立的屬性，只能將其應用於整個網站，如圖7.16所示。

圖7.16 提示對話框

2）檢查整個站點中的連接

若要檢查整個站點中的連接，先從「文件」面板中選擇一個站點，而後單擊「連接檢查器」面板中的「檢查連接」按鈕，從彈出的菜單中選擇「檢查整個當前本地站點的連接」命令，在「連接檢查器」面板中的列表框中顯示連接報告，如圖7.17所示。

圖7.17 打開「檢查連接」菜單

3．測試不一樣瀏覽器的兼容性

1）設置但願檢查的瀏覽器及其版本

（1）在「文檔」工具欄中的「目標瀏覽器檢查」菜單中選擇「設置」命令，如圖7.18所示。出現「目標瀏覽器」對話框，如圖7.19所示。

（2）選擇每一個您要檢查的瀏覽器旁邊的複選框，在這裏咱們選擇Firefox和Microsoft IE（Mac）瀏覽器，如圖7.19所示。

圖7.18 「目標瀏覽器檢查」菜單界面圖7.19 「目標瀏覽器」對話框

（3）對於每一個選定的瀏覽器，在其同行右邊有個下拉列表框，從相應的彈出選項中選擇要檢查的瀏覽器的最低版本。

（4）最後單擊「目標瀏覽器」對話框中的「肯定」按鈕，即選定了但願檢查的瀏覽器及其版本。

2）檢查單個頁面或整個站點的兼容性

（1）在「文件」面板上的「本地」視圖中，選擇單個頁面或包含整個站點的文件夾。

（2）選擇「文件」→「檢查頁」→「檢查目標瀏覽器」命令。報告將顯示在「結果」面板中的「目標瀏覽器檢查」面板中，如圖7.20所示。

圖7.20 檢查單個頁面不兼容報告

（3）若是想了解不兼容的緣由，請您在圖7.12中的「目標瀏覽器檢查」面板中選中一個列表項，而後右擊鼠標，在彈出的菜單中選擇「在瀏覽器中打開結果」命令，就能夠打開一個頁面，在此頁面中能夠查看到被檢查網頁中的元素不兼容的詳細緣由。

圖7.21 查看不兼容的詳細緣由

7.4.2 發佈站點

當咱們把網站作好之後，就能夠經過兩種方式來發布：一種是經過本地計算機來完成；另一種是在線發佈，能夠根據本身的條件來選擇使用哪一種方式。本節主要介紹在本地計算機上安裝IIS以及使用IIS來發布Web站點的過程。

1．安裝IIS

因爲IIS是一個專門的Internet信息服務器系統，它包含的內容比較多，不但能夠提供Web服務，並且還能夠提供文件傳輸服務、新聞和郵件等服務，是建立功能強大、內容豐富的站點的首選服務器系統。IIS是系統的基本安裝組件，若是在安裝系統時選擇安裝了IIS，就再也不須要單獨進行安裝，可是若是在安裝時沒有選擇安裝，可像安裝其餘Windows組件同樣來安裝它。

在Windows 2003下安裝Internet信息服務（IIS）6.0的步驟以下：

（1）在Windows 2003桌面上單擊「開始」→「設置」→「控制面板」命令，將打開「控制面板「窗口，如圖7.22所示。

圖7.22 「控制面板」窗口

（2）雙擊「添加或刪除程序」圖標，將打開如圖7.23所示的窗口。

圖7.23 「添加或刪除程序」窗口

（3）單擊「添加/刪除Windows組件」按鈕，將彈出「Windows組件嚮導「對話框，如圖7.24所示，在「Windows組件嚮導」對話框中顯示了可供安裝的組件。

圖7.24 Windows組件嚮導

（4）選中「應用程序服務器」複選框並單擊「詳細信息」按鈕，在彈出的對話框中，選中「Internet信息服務（IIS）」複選框，再單擊「肯定」按鈕，如圖7.25所示。

（5）返回到「Windows組件嚮導」對話框，而後單擊「下一步」按鈕進行安裝。在安裝的過程當中，提示「插入磁盤」，請插入Windows Server 2003 Enterprise Edition光盤便可繼續安裝。

（6）最後出現完成安裝嚮導界面時，單擊「完成」按鈕便可完成IIS組件的安裝。

當咱們安裝完IIS以後，在默認狀況下，操做系統就自行啓動了IIS信息服務，可是咱們也能中止或暫停IIS信息服務。在中止或暫停IIS信息服務以後，咱們又能啓動IIS信息報務。

圖7.25 Internet信息服務

2．上傳網站

若是想把作好的網站上傳到IIS中的Web服務器上，請執行如下操做：

（1）選擇「站點」→「管理站點」命令，在彈出的對話框中的列表框中選擇要上傳的站點名稱，單擊「編輯按鈕」彈出「站點定義」對話框。

（2）在「分類」列表框中選擇「遠程信息」選項，在「訪問」下拉列表框中選擇「本地/網絡」選項，在「訪問」下拉列表框下面就會出現相關設置。

（3）在「遠端文件夾」文件框中，指定網站發佈的目錄爲「C:\Inetpub\wwwroot\」(本地IIS中的Web服務器默認目錄)，如圖7.26所示，而後單擊「肯定」按鈕，返回上一個界面單擊「完成」按鈕。

圖7.26 設置網站上傳到的本地Web服務器上的位置

（4）在「文件」面板中，單擊「上傳文件」圖標，如圖7.27所示。在彈出的如圖7.28所示的對話框中單擊「肯定」按鈕，就能夠把TaobaoWeb站點上傳到「C:\Inepub\wwwroot\」目錄下。完成網站上傳後，便可經過網址訪問網站。

圖7.27 上傳網站圖7.28 「確認」上傳對話框

3．訪問網站

網站上傳到指定的服務器上以後，該如何訪問呢？因爲咱們的網站是上傳到本地Web服務器上，因此有兩種訪問方式。一種是：在瀏覽器地址欄中輸入「http://本地服務器IP地址/index.html」便可訪問這個站點，這種訪問方式在同一局域網中不一樣的計算機上均可以訪問，如圖7.29所示。另外一種是：在瀏覽器地址欄中輸入「http://127.0.0.1/index.html「也可訪問，這種訪問方式只能在本地計算機上訪問，如圖7.29所示。

圖7.29 兩種不一樣方式訪問站點首頁

當咱們成功地發佈網站以後，還須要對站點作按期維護，以保證站點的正常運行和吸引更多的瀏覽者。若是你們對網站維護感趣，能夠查閱相關資料，在這裏我就再也不贅述了。

² 本章總結

Ø 運用模板便於設計出具備統一風格的網站，而且模板的運用爲網站的更新和維護提供了極大的方便，爲開發出優秀的網站奠基了基礎。

Ø 樣式表文件能被多個頁面共享，從而保證多個頁面的樣式和諧統一。

Ø 測試頁面內容，包括如下3個方面：

l 頁面效果是否美觀。

l 超連接是否無缺。

l 網頁是否兼容不一樣的瀏覽器。

Ø 網站製做，測試完畢，最後要發佈到Web服務器上，才能讓更多的朋友觀看。

1、選擇題

1．模板會自動保存在（）中，該文件夾在站點的本地根文件夾下。

A．Library文件夾

B．Custom文件夾

C．Assets文件夾

D．Templates文件夾

2．網頁製做技術不能夠實現由一個文件控制一大批網頁（）。

A． CSS文件

B．表格

C．模板

D． DIV層

3．下列關於模板的說法正確的是（）。

A． Dreamweaver模板是一段HTML源代碼

B． Dreamweaver模板能夠建立具備相同頁面佈局的一系列文件

C． Dreamweaver模板能夠由用戶本身建立

D． Dreamweaver模板是一種特殊類型的文檔，它能夠一次更新多個頁面

4．在CSS語言中（）是設置「上邊框」樣式的語法。

A． letter-spacing:<值>

B． border-top:<值>

C． border-top-width:<值>

D． text-transform:<值>

5．超級連接元素A有不少屬性，其中用來指明超連接所指向的URL的屬性是（）。

A． href

B． herf

C． target

D． link

2、簡答題

1．新建一個空白模板，起名爲「templates1」，自定義設計模板。而後新建一個空白頁面，將「templates1」應用到該網頁中，並在可編輯區域添加相關內容。

2．試簡述建立模板的大體步驟。

3．請使用Dreamweaver製做樣式文件，而後對圖7.30所示的頁面應用製做好的樣式，應用樣式以後的頁面效果如圖7.31所示。

提示

（1）設置超連接的樣式。

（2）設置頁面背景色：background-color: #949494;,文本對齊：text-align: center;和邊距：margin: 0px。

（3）設置頁面中表單元素的相關樣式。

（4）設置頁面中相關表格的樣式。

（5）設置中間內容部分字體大小：FONT-SIZE: 12px;,行高：LINE-HEIGHT: 150%

上機部分

Lab Guide

上機1

HTML的基本標籤

第一部分本次上機目標

本次上機完成的任務

創建一個模擬的拍拍網頁面，掌握HTML基本結構和標籤的使用。

訓練的技能點

（1）會使用HTML的基本標籤，建立簡單的HTML靜態頁面。

（2）會使用標題標籤<Hn>(n=1，2，…7)。

（3）會使用段落級標籤<P>、<BR>、<PRE>。

（4）會使用列表標籤<OL>、<UL>。

（5）會使用文字處理標籤<FONT>，圖像標籤<IMG>。

（6）會使用超級連接標籤<A>，滾動標籤<MARQUEE>。

（7）會使用水平線標籤<HR>。

第二部分上機任務

創建一個模擬的拍拍網頁面，熟悉HTML基本標籤的使用，此上機分爲如下6階段。

階段1：指導——經過記事本建立一個簡單的HTML頁面

訓練要點

(1) HTML文檔的基本結構，標籤配對出現。

(2) 圖片標籤<IMG>與文字關係。

(3) 標題標籤<Hn>(n=1，2，…7)，段落標籤<P>，換行標籤<BR>，字體標籤<FONT>。

(4) HTML中使用的特殊字符。

(5) 設置背景色bgcolor屬性。

需求說明

經過記事本手寫HTML代碼，製做簡單的拍拍網主頁，如圖1.1所示。

圖1.1 頁面效果展現1

實現思路及關鍵代碼

（1）HTML文檔的結構，由3個部分組成。

Ø HTML部分：<HTML>

…

</HTML>

Ø 頭部： <HEAD>

</HEAD>

Ø 主體部分： <BODY>

…

</BODY>

（2）HTML標籤的使用

Ø 插入圖片<IMG>：文字與圖片的對齊方式使用align屬性設置。

Ø 標題標籤<Hn>(n=1，2，…7)，段落標籤<P>、換行標籤<BR>，字體標籤<FONT>。

參考解決方案

<HTML>

<HEAD>

<TITLE>第一個HTML頁面</TITLE>

</HEAD>

<IMG src=」images/logo.JPG」 width=」290」 height=」60」 alt=」歡迎光臨拍拍網」

align=」middle」> 免費注冊 | 關於拍拍 | 拍拍助理 | 聯繫咱們

<P>參觀電玩達人</P>

<p>

炎炎夏日，冰涼傢俱兩折起<BR>

週末折扣，品牌三折熱賣<BR>

</P>

<P>

<FONT face=」新宋體」 size=」4」 color=」FF0000」>騰訊旗下購物網站</FONT>

http://www.paipai.com

</P>

Rights Reserved

</BODY>

</HTML>

階段2：練習——參考上一階段，創建拍拍網簡介頁，內容包括拍拍網的LOGO，以及拍拍簡介，版權信息。

需求說明

經過使用記事本，手寫代碼建立一個包含有拍拍網簡單信息的HTML靜態頁面，如圖1.2所示

圖1.2 頁面效果展現2

提示

(1) HTML結構的3個部分，標籤配對出現

(2) 插入圖片標籤<IMG>，控制文字與圖片的位置關係要使用<IMG>標籤中的align屬性。

(3) 對於字體的修飾使用<FONT>標籤。

階段3：指導——在第1階段頁面中，加入序列和水平線標籤，預格式化文本

訓練要點

列表的兩種方式，水平線標籤的使用，預格式化文本效果。

需求說明

（1）將商品介紹按照列表方式在頁面顯示出來。

（2）以水平線做爲分割標誌

（3）預先定義好格式的文本顯示。

頁面效果如圖1.3所示

圖1.3 頁面效果展現3

實現思路及關鍵代碼

（1）使用列表標籤<OL>。

（2）水平線標籤<HR>。

（3）預格式化標籤<PRE>。

參考解決方案

/*此處省略了第1階段編寫的HTML代碼……*/

<BODY>

/*此處省略了第一階段編寫的HTML代碼……*/

網遊專區

</OL>

MOTO E2 音樂手機

<PRE>

130W像素攝像頭 Linux 智能系統

Intel Xscale處理器

A2DP 藍牙立體聲市場價：1690

開學價：1045

</PRE>

</BODY>

</HTML>

階段4：練習——在階段3的頁面中，加入「戶外運動系列」和「關於拍拍的介紹」

需求說明

實現對商品描述的列表顯示和預格式化顯示，頁面效果如圖1.4所示。

圖1.4 頁面效果展現4

提示

在使用列表標籤時，有序和無序列表的編號皆經過type屬性設置。

階段5：指導——在拍拍網的主頁中，添加相關連接，如圖1.5所示。

訓練要點

（1）連接到其餘頁面。

（2）連接到同一文檔的其餘部分。

圖1.5 圖片效果展現5

（3）電子郵件連接。

（4）實現頁面信息滾動特效。

需求說明

（1）單擊超連接打開一個新的頁面，如圖1.6所示。

圖1.6 打開登陸頁面效果展現

（2）超連接指定連接到文檔中的某個部分，如圖1.7和圖1.8所示。

圖1.7 連接文檔某個部分

圖1.8 連接文檔某處的效果展現

（3）網頁信息頁面滾動，如圖1.9所示。

圖1.9 信息滾動效果展現

實現思路及關鍵代碼

(1) 超連接<A>標籤中href屬性定義了超級連接所指向的URL。

(2) <MARQUEE>標籤的scrolldelay屬性定義滾動速度。

參考解決方案

*此處省略了<HTML>起始代碼和<HEAD></HEAD>之間的這部分代碼

<P>

<A href=」login.html」<B>登陸</B></A> 關於拍拍拍拍助理

</P>

<P>

-索愛</FONT.

</P>

*此處省略了從<H1>導購資訊</H1>到第二條水平線之間的代碼

*此處省略了預格式化文本<PRE></PRE>之間的代碼

精品推薦：超酷PSP NIKE球星球鞋 ZIP珍藏限量版

</MARQUEE>

*此處省略了每三條水平線，版權信息代碼以及</BODY></HTML>結束標籤

階段6：練習——在上階段基礎上，實現打開註冊頁面，連接到本地文檔「關於拍拍」位置，實現電子郵件的功能，實現商品圖片的滾動顯示。

需求說明

（1）單擊「免費註冊」超連接打開新的界面，如圖1.10和圖1.11所示。

圖1.10 單擊「免費註冊」超連接

圖1.11 打開註冊頁面效果展現

（2）單擊「關於拍拍」超連接，網頁跳轉到本頁面的「關於拍拍」位置，如圖1.12所示。

圖1.12 連接文檔某處效果展現

（3）單擊「聯繫咱們」超連接，建立一封新的郵件。

（4）商品展現，圖片信息滾動特效，如圖1.13所示。

圖1.13 信息滾動效果展現

提示

(1) 圖片滾動方向，依據滾動標籤<MARQUEE>中direction屬性設置。

(2) 在圖片滾動中，鼠標移動產生的中止和滾動效果，會在後面的課程介紹。

(3) 其餘與前面練習重複部分，可直接複製粘貼使用。

第三部分做業

1. 利用記事本編寫製做一個簡單的NBA中國的首頁頁面，頁面內容包括：

(1) NBA中國的官方標誌圖片，鼠標放置到上面時會顯示信息：「歡迎登陸NBA中國。」

(2) 導航菜單：查看球員、主編信箱、NBA動態、NBA專題，每一項均設置超連接。

圖1.14 做業1效果

提示

(1) 鼠標放置在圖片上，顯示信息<IMG src=」… 」alt=」歡迎登陸NBA中國」>

(2) 設置標題欄，<TITLE>歡迎光臨NBA中國</TITLE>。

小技巧

#號的使用，在<herf=」＃」>查看球員</A>中，頁面會呈現一種超連接樣式，可是沒有具體的連接地址。

2. 在做業1中，增長「NBA動態」列表，單擊一條新聞會打開一個新的頁面，顯示新聞的具體內容，效果如圖1.15和圖1.16所示。

圖1.15 做業2效果1

圖1.16 做業2效果2

提示

(1) 新聞採用無序列表的方式顯示。

(2) 「NBA動態」字體效果，使用<FONT size=」+3」 color=」＃FF0000」>NBA動態</FONT>.

3. 在做業2的基礎上，在頁面中添加明星圖片和球員信息。

做業要求：

（1）設置錨點，單擊「查看球員」超連接後，頁面自動跳到球員信息位置，如圖1.17所示。

圖1.17 做業3效果

（2）單擊頁面最下端的「返回頂端」超連接後，頁面跳轉到頂部。

（3）明星圖片經過水平線與先後內容分割，圖片實現滾動效果。

提示

(1) 滾動標籤<MARQUEE>.

(2) 球員信息採用預格式化標籤<PRE>.

上機 2

表格基礎

第一部分本次上機目標

本次上機完成的任務

實現跨多行跨多列的表格，並能對錶格進行美化。

訓練的技能點

(1) 掌握表格的基本結構，熟悉表標籤的使用。

(2) 會使用表格標籤屬性修飾美化表格。

第二部分上機任務

利用表格模擬拍拍網的商品類目、公告欄、拍拍網首頁頂部logo部分

階段1：指導——經過記事本建立一個簡單的表格

訓練要點

（1）表格的基本結構。

（2）跨多行、跨多列的複雜表格。

需求說明

（1）在記事本中手寫建立一個簡單表格，效果如圖2.1所示。

圖2.1 簡單表格

（2）建立一個跨多行跨多列的複雜表格，效果如圖2.2所示。

圖2.2 跨多行跨多列的複雜表格

實現思路及關鍵代碼

（1）表格的基本結構。

Ø <TABLE></TABLE>：表格標籤。

Ø <TR></TR>

Ø <TD></TD>

（2）實現跨行跨列使用到的表格屬性。

rowspan：跨行屬性。

colspan：跨列屬性。

參考解決方案

（1）圖2.1的參考解決方案。

*此處省略了<HTML>起始代碼和<HEAD></HEAD>之間的這部分代碼

<BODY>

<TR>

</TR>

<TR>

</TR>

<TABLE>

</BODY>

</HTML>

（2）圖2.2的參考解決方案。

*此處省略了<HTML>起始代碼和<HEAD></HEAD>之間的這部分代碼

<BODY>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

</TABLE>

</BODY>

</HTML>

階段2：練習——在階段1上機練習基礎上，學員經過記事本創建一個簡單的拍拍網拍拍公告。

需求說明

經過利用記事本手寫HTML代碼完成拍拍公告，效果如圖2.3所示。

圖2.3 拍拍公告

提示

（1）<TD>列標籤中colspan控制跨列，rowspan控制跨行。

（2）align屬性控制元素的顯示位置，left靠左、center居中、right靠右。

階段3：指導——在前一階段基礎上，對錶格進行美化，美化效果參照拍拍網商品類目。

訓練要點

（1）表格的尺寸修飾。

（2）表格的邊框修飾。

（3）表格的背景修飾。

（4）表格填充。

需求說明

對簡單的商品類目進行美化，效果如圖2.4所示。

圖2.4 商品類目修飾效果圖

實現思路及關鍵代碼

（1）表格尺寸的控制width和height屬性。

（2）表格邊框border屬性。

（3）背景修飾bgcolor和background屬性。

（4）爲了不內容靠近表格邊框，使用cellpadding屬性進行修飾。

參考解決方案

*此處省略了<HTML>起始代碼和<HEAD></HEAD>之間的這部分代碼

<TABLE width=」550」 height=」134」 border=」0」 background=」images/

background.jpg」 cellpadding=」5」>

<TR>

</TR>

</TD>

</TD>

</TR>

<TD width=」132」 >跑跑卡丁車</TD>

</TR>

</TABLE>

</BODY>

</HTML>

階段4：聯繫——參照第3階段的上機聯繫，利用表格模擬拍拍網首頁頂部logo顯示部分。

需求說明

經過修飾，實現如圖2.5所示結果。

圖2.5 頁面頂端修飾效果圖

提示

（1）建立2行6列的表格，部分單元格涉及跨行、跨列。

（2）使用background屬性設置背景圖片。

（3）「我要買」、「我要賣」等均爲圖片。

第三部分做業

1. 利用記事本建立一個帶有簡單表格的頁面，如圖2.6所示。

圖2.6 做業1效果示例

提示

(1) 第一行：背景圖片bgground.gif，字體顏色＃FFFFFF。

(2) 第二行：背景色＃eaeaea。

(3) 第三行：背景色＃FFC8C8。

(4) 第四行：背景色＃C1E0FF。

2. 經過記事本實現如圖2.7所示籃球大篷車的佈局。

圖2.7 做業2頁面內容示例

提示

(1) 這個表格有4行4列。

(2) 圖片所在單元格存在跨行或跨列。

(3) clspan=value value表明跨列的列數，rowspan=value value表明跨行的行數。

3. 經過記事本實現如圖2.8所示頁面。

圖2.8 做業3圖示效果

提示

(1) Logo、訂購電話均爲圖片，最下方的導航條部分總體爲一幅圖片。

(2) 表格內容的水平位置由align屬性決定。

(3) 考慮應建幾行幾列的表格，哪些單元格涉及跨行或跨列。

上機3

表單與框架

第一部分本次上機目標

本次上機完成的任務

建立包含表單元素的頁面，實現基於框架基礎上的頁面跳轉。

訓練技能點

（1）瞭解表單的基本形式，掌握表單元素的使用方法。

（2）會使用框架集來建立網頁，掌握target屬性使用方法。

第二部分上機任務

以表單提交的方式模擬拍拍網用戶註冊，利用框架結構模擬拍拍社區。

階段1：指導——建立一個簡單的表單。

訓練要點

（1）表單的基本形式。

（2）表單元素及屬性。

需求說明

在記事本中手寫HTML代碼建立一個簡單表單，頁面效果如圖3.1所示。

圖3.1 簡單表單

實現思路及關鍵代碼

表單的基本結構以下：

Ø <FORM></FORM>:表單區域。

Ø 在表單區域內添加控件。

參考解決方案

<HTML>

<HEAD>

<TITLE>表單練習——註冊雅虎郵箱</TITLE>

</HEAD>

<BODY>

選擇您的雅虎郵箱：<INPUT type=」txtmail」 size=」20」 maxlength=」20」>

<OPTION value=」yahoo.cn」>yahoo.cn</OPTION>

<OPTION value=」yahoo.com.cn」>yahoo.com.cn</OPTIN>

</SELECT><BR>

密碼：

<BR>

再次輸入密碼： <INPUT type=」password」 name=」txtjcmm」

size=」10」 maxlength=」10」>

</FORM>

</BODY>

</HTML>

階段2：練習——學員依照第1階段的聯繫，建立拍拍用戶註冊頁面。

需求說明

經過記事本實現拍拍用戶註冊頁面效果如圖3.2所示。

圖3.2 拍拍用戶註冊

提示

(1) <FORM>是一個容器標記，在</FORM>結束標記以前劃分了表單區域。

(2) 使用<INPUT>標記在單元格內添加表單元素。

(3) 單選按鈕要用於同一個組中才能實現單選效果。

階段3：指導——在第1階段聯繫基礎上增長註冊信息內容。

訓練要點

(1) 表單控件的使用。

(2) 表單事件。

需求說明

一個相對完整的註冊頁面，如圖3.3所示。

圖3.3 通過完善的郵箱申請頁面

實現思路及關鍵代碼

（1）用<INPUT>標籤添加表單控件，type屬性指定控件類型。

（2）直接添加的表單控件<SELECT>、<TEXTAREA>。

參考解決方案

<HTML>

<HEAD>

<TITLE>表單練習—雅虎郵箱註冊</TITLE>

</HEAD>

<BODY>

選擇您的雅虎郵箱：

<OPTION value=」yahoo.cn」>yahoo.cn</OPTION>

<OPTION value=」yahoo.com.cn」>yahoo.com.cn</OPTION>

</SELECT><BR>

密碼：

再次輸入密碼：<INPUT type=」password」 name=」txtjcmm」 size=」10」

Maxlength=」10」><BR>

真實姓名：<INPUT type=」text」 name=」txtname」 size=」20」 maxlength=」20」><BR>

出生日期：<INPUT type=」text」 name=」txtsr」 maxlength=」10」 size=」20」 ><BR>

性別：<INPUT type=」radio」 name=」sex」 value=」M」> 男 <INPUT

Type=」radio」 name=」sex」 value=」F」>女<BR>

雜誌訂閱：<INPUT type=」checkbox」 name=」order」 value=」trl」/>旅遊

<INPUT type=」checkbox」 name=」order」 value=」fin」/> 財經

<BR>

<INPUT type=」checkbox」 name=」order」 value=」car」/> 汽車

<INPUT type=」checkbox」 name=」order」 value=」mus」/> 音樂

<BR>

雅虎服務條款<TEXTAREA name=」fwtk」 cols=」50」 rows=」5」>雅虎中國對於任何包含於、經由、或聯結、下載或從任何與本網站有關服務(如下簡稱『服務』)所得到之資訊、內容或廣告(如下簡稱『資料』)，您於此接受並認可信賴任何『資料』所生之風險應自行承擔。雅虎中國，有權但無此義務，改善或更正在『服務』或『資料』任何部分之錯誤或疏失。

</TEXTAREA><BR>

</FORM>

</BODY>

</HTML>

階段4：聯繫——在第2階段基礎上增長註冊內容。

需求說明

完善拍拍註冊信息，效果如圖3.4所示。

圖3.4 拍拍用戶註冊

提示

(1) RADIO單選按鈕，CHECKBOX複選框要分別定義在同一個組裏。

(2) 表單提交method的兩種方式。

(3) 單擊提交調用表單的submit事件。

階段5：指導——建立拍拍社區。

訓練要點

(1) 會使用<FRAMESET>建立框架。

(2) Target屬性如何在框架中實現頁面的跳轉。

需求說明

一個簡單的社區頁面，實現基於框架的頁面跳轉，效果如圖3.五、圖3.6和圖3.7所示。

圖3.5 拍拍社區-數碼情報站

圖3.6 拍拍社區-騰訊QQ專區

圖3.7 拍拍社區-流行集散地

實現思路及關鍵代碼

(1) 框架的類型。

(2) target用來設置指向跳轉到框架的名稱。

參考解決方案

（1）圖3.5框架代碼

此處省略了<HTML>起始代碼和<HEAD></HEAD>之間的這部分代碼

<BODY>

</FRAMESET>

</HTML>

（2）左側框架頁面代碼。

*此處省略了<HTML>起始代碼和<HEAD></HEAD>之間的這部分代碼

<BODY>

</BODY>

</HTML>

（3）頂部框架頁面代碼。

*此處省略了<HTML>起始代碼和<HEAD></HEAD>之間的這部分代碼

<BODY>

<TABLE>

</TABLE>

</BODY>

</HTML>

（4）右側顯示頁面——當單擊左側框架頁面的「數碼情報站」按鈕時顯示此頁面，其餘顯示頁面與此頁面的代碼相似，右側框架頁面效果如圖3.8所示。

圖3.8 右側框架頁面展現

*此處省略了<HTML>起始代碼和<HEAD></HEAD>之間的這部分代碼

<BODY>

</TABLE>

</BODY>

</HTML>

階段6：練習——實現拍拍網幫助中心

需求說明

拍拍網幫助中心效果如圖3.9和圖3.10所示

圖3.10 幫助中心圖示-註冊與認證

提示

(1) 框架結構分爲上下兩個部分，在下面部分中再分爲左右兩部分。

(2) Target=＃value爲頁面跳轉區域的框架名稱。

(3) 框架上部及跳轉頁面內容可採用截圖方式。

第三部分做業

1. 利用記事本建立一個帶有表單的頁面，效果如圖3.11所示。

圖3.11 做業1效果示例

提示

(1) <INPUT>標籤在表單區域中添加控件。

(2) 定義組來實現單選和多選事件。

(3) <FORM action=」提交跳轉的頁面」 method=」post/get表單提交的請求方式」>。

2. 經過記事本實現如圖3.12所示的頁面效果。

圖3.12 做業2頁面內容示例

3. 經過記事本實現如圖3.13和圖3.14所示的頁面效果。

圖3.13 做業3圖示效果-數碼/汽車

圖3.14 做業3圖示效果-手機

提示

(1) 一個分爲上下部分的框架

(2) target指向下部框架的名稱。

(3) 顯示內容可用圖片截圖代替。

上機 4

CSS樣式表

第一部分本次上機目標

本次上機完成的任務

瞭解CSS樣式表的語法，可以用樣式表美化頁面。

訓練的技能點

（1）會建立經常使用的CSS樣式。

（2）掌握CSS樣式表的3中應用方式。

（3）會用樣式表建立個性化的表格、表單。

第二部分上機任務

以表單提交的方式模擬拍拍網用戶註冊，利用框架結構模擬拍拍社區。

階段1：指導——創建一個頁面，經過CSS的行內樣式對頁面進行美化。

訓練要點

(1) 樣式的基本語法。

(2) 行內樣式的使用方法。

需求說明

在記事本中手寫建立一個簡單頁面，經過行內樣式對段落予以美化，頁面效果如圖4.1所示。

圖4.1 行內樣式表練習

實現思路及關鍵代碼

（1）樣式表的基本語法。

Ø 選擇器。

Ø 屬性。

Ø 屬性的值。

H2 {color: red; }

(1) 行內樣式表的使用方法。

參考解決方案

*此處省略了<HTML>起始代碼和<HEAD></HEAD> 之間的這部分代碼

<FONT color=」＃FF0000」 size=」+3」>騰訊拍拍網(www.paipai.com) </FONT>

是騰訊旗下電子商務交易平臺，<BR>

網站於2005年9月12日上線發佈，2006年3月13日宣佈正式運營。

</P>

拍拍網依託於騰訊QQ……

</P>

</BODY>

</HTML>

階段2：練習——學員依照第1階段的練習，用行內樣式表的方法修飾拍拍公告。

需求說明

在記事本中用CSS修飾拍拍公告，頁面效果如圖4.2所示

圖4.2 拍拍公告

提示

(1) 多個樣式對同一元素定義時，以最接近元素位置的樣式規則爲準。

(2) 一個樣式規則中多個屬性時，要以「；」分隔，屬性與屬性值之間用「：」分隔。

階段3：指導——用內嵌樣式表的方式對頁面進行修飾

訓練要點

(1) 內嵌樣式表的基本形式。

(2) 選擇器命名方式的區別。

需求說明

使用內嵌樣式表的方式修飾頁面，效果如圖4.3所示。

圖4.3 內嵌樣式表練習

實現思路及關鍵代碼

使用錨僞類實現超連接的單擊效果。

參考解決方案

<HTML>

<HEAD>

<TITLE>內嵌樣式表練習</TITLE>

TABLE {background-image:url(images/navBg.JPG)}

A {text-decoration:none; font-weight:bold}

A:hover {color: ＃FFCC00} /*鼠標懸浮在上方時的連接紅色*/

TD { color: ＃AA0000; font-family:」新宋體」；font-weight:bold;}

.tdl {text-align:right; font-size:14px}

.font {font-size:12px; color: ＃FF0000}

</STYLE>

</HEAD>

<BODY>

<TR>

<TD width=」529」 rowspan=」2」><IMG src=」images/logo.JPG」 width=」290」

height=」60」></TD>

幫助中心

</TD>

</TR>

<TR>

<TD height=」28」 colspan=」2」>歡迎來到拍拍網！ </TD>

<A href=」#」>[登陸]</A> <A href=」#」>[免費註冊]</A> <A href=」#」>[結算中

心] </A>

</TD>

</TR>

</TABLE>

</BODY>

階段4：練習——參照第3階段的上機練習，學員採用內嵌樣式表方式修飾拍拍商品類目

需求說明

內嵌樣式修飾商品類目,效果如圖4.4所示.

圖4.4 商品類目

提示

僞類選擇器名：hover {…} /*超連接鼠標懸停功能*/

階段5：指導——編寫CSS樣式並保存，在其餘頁面中引入這個CSS樣式表文件。

訓練要點

（1）掌握如何引入外部CSS文件的方法。

（2）表單文本框樣式修改，按鈕美化。

需求說明

個性化表單修飾，頁面效果如圖4.5所示。

圖4.5 外部樣式表修飾註冊頁面

實現思路用關鍵代碼

在樣式中設置邊框屬性 .textboder {border:1 soid#C9F98E}。

參考解決方案

（1）圖4.5頁面代碼可參照第3章第4階段的練習代碼，須要修改兩個文本框和按鈕處的代碼。

</TR>

</TR>

……

<TR>

<A href=」#」>點擊提交，即表示贊成接受下面《拍拍協議》</A>

</TD>

</TR>

（2）CSS文件代碼

TABLE {text-align: center; font-family: 「隸書」}

TH {

Font-size: 24px;

Color: #FF0000;

Text-align: center;

background-color: #B9DCFF

}

.text {

border-width:1px;

border-style:solid;

.picButton { background-image:url(images/btn.gif);

border: 0 px;

margin: 0px;

padding: 0px;

height: 26px;

width: 99px;

font-size: 14px;

}

.td {

background-color: #FFC1FF;

font-size: 14px;

text-align: center

A { font-size: 14px;

color: #0000FF;

}

A: hover {text-decoration:underline; color: #FF0000}

.font {

font-size: 18px;

color: #FF86C2;

font-style: italic;

background-color: #F5D378

}

階段6：練習——編寫一個CSS樣式表，在拍拍登陸頁面引入這個CSS文件。

需求說明

拍拍登陸頁面修飾效果，如圖4.6所示。

圖4.6 拍拍用戶登陸

提示

（1）引入外部樣式表的語法<LWK rel=」stylesheet」 type=」text/css」 href=」css.css」>。

（2）使用僞類實現無下劃線的超連接。

第三部分做業

1．建立一個簡單的CSS樣式表，效果如圖4.7所示。

圖4.7 做業1效果示例

提示

（1）這是幾行幾列的表格。

（2）如何在頁面中錄用內嵌樣式表方式。

（3）當多個樣式做用於同一對象時，以最近的樣式爲準。

2．經過記事本實現如圖4.8所示的頁面內容。

圖4.8 做業2頁面內容示例

提示

（1）按鈕樣式須要在樣式規則中設置background-image、margin、border、padding、height、width和font-size屬性。

（2）文本框樣式設置 border-width: 1px; border-style: sold;。

（3）無下劃線的超連接 text-decoration: none;。

3．生成外部樣式表實現如圖4.9所示的頁面內容。

圖4.9 做業3圖示效果

提示

（1）可參考本章第6階段的上機練習。

（2）按鈕背景圖片button-denglu.gif, button-mima.gif。

上機5

使用Dreamweaver製做網頁

第一部分本次上機目標

本次上機完成的任務

使用Dreamweaver網頁製做工具。

訓練技能點

會使用Dreamweaver製做網頁。

第二部分上機任務

階段1：指導——建立一個簡單的表單。

訓練要點

（1）表格的基本語法。

（2）圖像的基本語法。

需求說明

製做商品分類列表，頁面效果如圖5.1所示。

圖5.1 商品分類效果

說明

頁面採用了7*6的表格佈局，其中第一行和第二行又分別採用跨多列的形式。

實現思路及關鍵代碼

表格的基本語法。

參考步驟

1）建立網頁

（1）在Dreamweaver中新建一個HTML頁。

（2）在「文檔」工具欄的「標題」文本框中將標題更改成「商品展現」，如圖5.2所示。

圖5.2 修改頁面標題

（3）選擇「文件」 →「保存」命令，指定保存的路徑和命名文件名稱。保存後，HTML文件的名稱將變爲保存時命名的名稱，本例保存頁面的名稱爲DW1.html。

2）使用表格佈置頁面增長圖予以說明

（1）製做商品列表表格。選擇「插入」 →「表格」，指定表格寬度爲956，單元格間距和單元格邊距定爲0，指定表格爲7行6列，第一行用來插入商品類目圖像，第二行用來放置查詢條件和標題，從第三行開始用來顯示商品。

（2）將第一行所有選中，打開頁面屬性（如圖5.3所示），單擊合併單元格將第一行合併成跨6行的1列：將第二行前三列選中，而後合併單元格。合併後的效果如圖5.4所示。

圖5.3 頁面屬性合併和拆分單元格按鈕

圖5.4 合併後的單元格效果

3）插入圖片

在須要插入圖片的單元格內單擊，選擇「插入」 →「圖像」命令，在「選擇圖像源文件」對話框中指定插入圖像的路徑，如圖5.5所示。

4）圖片說明

本例中所使用到的圖片依次爲：

（1）第一行：listtop.jpg。

（2）第三行：ms1.jpg, leve12.gif, tenpay.gif; auto.gif。

（3）第四行：ms2.jpg, leve14.gif, tenpay.gif; auto.gif。

（4）第五行：dance1.jpg, leve11.gif, tenpay.gif, auto.gif。

（5）第六行：dance2.jpg。

（6）第七行：ball.jpg, leve13.gif。

圖5.5 選擇插入的圖片

5）表單控件的添加

（1）將光標定位到第二行第一列，選擇「插入」 →「表單」 →「列表/菜單」命令，如圖5.6所示。

圖5.6 菜單欄方式添加表單控件

（2）選擇表單佈局模式，單擊「列表/菜單」圖標，如圖5.7所示。

圖5.7 經過表單模式添加表單控件

2）使用表格佈置頁面增長圖予以說明

（1）製做商品列表表格。選擇「插入」 →「表格」命令，指定表格寬度爲956，單元格間距和單元格邊距指定爲0，指定表格爲7行6列，第一行用來插入商品類目圖像，第三行用來放置查詢條件和標題，從第三行開始用來顯示商品。

（2）將第一行所有選中，打開頁面屬性（如圖5.3所示），單擊合併單元格將第一行合併成跨6行的1列；將第三行前三列選中，而後合併單元格。合併後的效果如圖5.4所示。

圖5.3 頁面屬性合併和拆分單元格按鈕

圖5.4 合併後的單元格效果

3）插入圖片

在須要插入圖片的單元格內單擊，選擇「插入」 →「圖像」命令，在「選擇圖像源文件」對話框中指定插入圖像的路徑，如圖5.5所示。

4）圖片說明

本例中所使用到的圖片依次爲：

（1）第一行：listtop.jpg。

（2）第三行：ms1.jpg, leve12.gif, tenpay.gif; auto.gif。

（3）第四行：ms2.jpg, leve14.gif, tenpay.gif; auto.gif。

（4）第五行：dance1.jpg, leve11.gif, tenpay.gif, auto.gif。

（5）第六行：dance2.jpg。

（6）第七行：ball.jpg, leve13.gif。

6）CSS樣式

（1）爲頁面超連接設置CSS樣式，參照第4章關於超連接僞類的基本語法。

（2）整個頁面用CSS樣式設置了同一字體。

階段2：練習——製做商品類目。

需求說明

製做商品類目，頁面效果如圖5.8所示。

圖5.8 商品類目

提示

（1）使用Dreamweaver建立頁面。

（2）在頁面中添加表格。

（3）頁面採用了3*1的表格佈局；在第二行中嵌套了5*3的表格，第一行跨3列。

階段3：指導——製做登陸頁面。

訓練要點

表單練習。

需求說明

製做登陸頁面，實現表單提交，頁面效果如圖5.9所示。

圖5.9 登陸頁面

說明

頁面總體採用3*2的表格佈局。

實現思路及關鍵代碼

（1）表單如何提交。

（2）表單提交的方式。

參考步驟

（1）建立一個新頁面，修改標題爲「用戶登陸」，保存頁面。

（2）在頁面插入3行2列的表格tab1，表格寬度950。第一行和第三行分別合併成一列單元格。

（3）在第二行第一列嵌入一個8行2列的表格tab2，表格寬度380，將第一行合併單元格。在第二列中嵌入一個2行1列的表格tab3。

圖5.10 登陸頁面表格佈局

（4）插入圖片。

① 表tab1第一行：top.jpg。

② 表tab1第三行：bottom.jpg。

③ 表tab2第六行：code.jpg。

④ 表tab3第一行：right.jpg。

（5）添加文本框，複選框。

階段4：練習——製做註冊頁面。

需求說明

QQ註冊頁面，如圖5.11所示。

圖5.11 申請註冊

提示

（1）建立表單的語法。

（2）表單提交兩種方式的區別。

（3）在action中定義提交的轉向。

（4）頁面錄用10*1的表格佈局，分別在第四、六、八、10行內再嵌套表格。

階段5：指導——製做幫助中心頁面。

訓練要點

（1）框架的基本語法。

（2）框架之間的頁面跳轉。

需求說明

幫助中心頁面，如圖5.12所示。

圖5.12 幫助中心頁面

實現思路及關鍵代碼

（1）製做在各框架中顯示的頁面。

（2）設置組合框架集。

（3）設置左右框架間頁面的連接跳轉。

參考步驟

（1）首先製做好用於分別在3個框架中顯示內容的頁面。

（2）建立框架集。選擇「新建」 →「框架集」 →「上方固定、左側嵌套」命令，指定每一個框架的標題。

（3）爲框架分別指定頁面，光標定位到指定頁面的框架，選擇「窗口」 →「框架」命令，這時會打開框架屬性面板，瀏覽源文件引入先前製做好的頁面.

（1）實現框架頁面的連接跳轉。

給每一個框架頁面都引入頁面後，下一步要設置頁面的跳轉。例如咱們須要單擊左側框架中的某個頁面連接，而後在右側框架中顯示相應頁面內容。步驟以下：

① 選中超連接文本，如：「幫助首頁」。

② 打開「屬性」面板。

③ 單擊連接文件夾選擇要連接的文件。

④ 在「目標」下拉列表框中選擇要在右側框架中打開的新頁面，如圖5.14所示。

圖5.14 設置頁面間的跳轉

階段6：練習——製做拍拍社區。

需求說明

拍拍登陸頁面修飾效果，如圖5.15所示。

圖5.15 拍拍社區

提示

（1）框架結構分3個部分。

（2）提早製做好框架所需頁面。

（3）在Dreamweaver中分別引入製做好的頁面。

（4）參考階段5上機練習。

（5）右側顯示頁面內容以插入圖片方式顯示。

第三部分做業

1．使用表格佈局製做網頁，效果如圖5.16所示。

圖5.16 做業1效果示例

提示

（1）建立一個空白頁。

（2）添加2*1的表格。

（3）在第二行單元格中嵌套1*4的表格。

（4）而後分別在第二列添加3*1的表格，在第四列添加2*6的表格。

2．製做遊戲帳號註冊頁面，如圖5.17所示。

圖5.17 做業2頁面內容示例

提示

（1）建立表單頁面。

（2）繪製3*1表格，第一行插入圖片bg1.gif，第三行插入圖片bg3.gif。

（3）在第二行嵌套10*2的表格。

3．製做商品瀏覽框架頁面，如圖5.18所示。

圖5.18 做業3圖示效果

提示

（1）首先肯定這個頁面的框架集結構爲上方固定，下方改變。

（2）製做在下方框架中顯示的頁面，可直接在頁面插入圖片。

（3）設置框架並指定每一個框架的名稱。

（4）設置上下框架間頁面連接的跳轉連接。

上機 6

網站設計和頁面佈局技術（一）

第一部分本次上機目標

本次上機完成的任務

（1）發佈站點。

（2）製做拍拍網首頁。

訓練的技能點

（1）可以發佈站點。

（2）可以使用table表格佈局

（3）可以使用DIV層進行網頁佈局。

（4）可以使用DIV層+表格佈局製做頁面。

第二部分上機任務

階段1：指導——採用DIV佈局方式對首頁進行佈局。

訓練要點

（1）表格的基本語法。

（2）無下劃線的超連接。

需求說明

（1）發佈站點。

（2）製做首頁採用DIV佈局，實現首頁頂部菜單效果，如圖6.1所示。

圖6.1 DIV佈局的首頁

實現思路及關鍵代碼

（1）建立站點。

（2）DIV層劃分頁面區域。

（3）製做head層的內容。

參考步驟

（1）建立一個站點，在Dreamweaver菜單中選擇「站點」 →「新建站點」命令，彈出如圖6.2所示的對話框。

圖6.2 創建站點步驟1

站點名稱能夠任意命名，這裏咱們以MySite命名站點，站點命名確認後單擊「下一步」按鈕，進入下一操做界面，如圖6.3所示。

圖6.3 創建站點步驟2

在此界面中，咱們不使用服務器技術，因此直接採用默認選項，單擊「下一步」按鈕，進入如圖6.4所示的操做界面。

圖6.4 新建站點步驟3

在這一界面中，咱們只須要改變站點文件的保存路徑便可，單擊「下一步」按鈕，進入如圖6.5所示的操做界面。

圖6.5 新建站點步驟4

咱們只是在本地發佈，因此不鏈接遠程服務器，單擊「下一步」按鈕，進入如圖6.6所示的操做界面。

圖6.6 新建站點步驟5

這是創建站點的最後一步，顯示了先前所設置的站點信息，單擊「完成」按鈕，即創建好了一個站點。

（2）建立一個空白頁面。

（3）在頁面繪製3個DIV層分別用於頁面的head部分，content部分、foot部分，如圖6.7所示。本階段將製做head層的內容，centent層、foot層的內容咱們會在後面逐步實現。

（4）下面咱們將添加head層要顯示的內容。Head層的內容比較規則，採用層套表格的方式，添加3*6的表格tab1,如圖6.7所示。

圖6.7 首頁佈局效果展現

（5）在圖6.7中，將第1列的第1行和第2行兩個單元格合併；第2行的第2列和第3列兩個單元格合併；第2行的第四、五、6列3個單元格合併；第三行的6列合併成1列，合併單元格後的效果如圖6.8所示。

（6）設置tab1的背景圖片headBg.gif; 第一行第一列設置背景naviBg.jpg，單元格插入圖片logo.jpg，在餘下的單元格中依次插入buy.gif,sell.gif.mypp.gif,bbs.gif; 在第六個單元格中插入help.gif，並加入文字「幫助中心」，顏色爲#FF0000，字體爲12px。

（7）在第二行第一個單元格內加入文字「歡迎來到拍拍網！」，顏色爲#FF6262；在第二個單元格內加入「登陸」，「免費註冊」，「結算中心」的超連接樣式。

圖6.8 合併單元格後的效果

（8）在第三行插入圖片sarch.jpg，完成效果如圖6.9所示。

圖6.9 加入圖片和文字後的首頁效果

階段2：練習——在階段1的基礎上添加content層的廣告內容。

需求說明

用DIV層佈局實現頁面效果，如圖6.10所示。

圖6.10 在content層加入部分廣告的效果

提示

（1）在content層中添加2*4的表格。

（2）第一行的4列合併成1列。

（3）第二行分別插入daogou.jpg, flash.swf, 滾動商品展現代碼，right.jpg。

階段3：指導——在階段2的基礎上添加製做商品頻道列表一（數碼商品）。

訓練要點

（1）可以用DIV+表格佈局實現商品頻道列表。

（2）表格的嵌套使用。

需求說明

製做商品頻道列表，效果如圖6.11所示。

圖6.11 在content層斷續添加商品類目的效果

實現思路及關鍵代碼

（1）DIV層+表格的頁面佈局。

（2）表格的嵌套使用。

參考步驟

（1）使用階段2練習完成的頁面。

（2）在content層的table表格裏再添加2行；每行4列；將第一行前3列合併成一個單元格，而且在其中插入一個2*2的表格，而後將該表格第一行兩個單元格合併；將最後一列第1行和第2行兩個合併成一個單元格效果如圖6.12所示。

圖6.12 添加單元格後的效果

（3）在商品類目單元格插入圖片goods.jpg; 在點卡和社區圖片單元格插入right2.jpg，效果如圖6.13所示。

圖6.13 添加類目商品和點卡圖片的效果

（4）在商品頻道單元格再嵌套一個2行1列的表格，分別插入圖片digTitle.gif，digitpro.jpg，效果如圖6.14所示。

圖6.14 添加了商品頻道logo

（5）在頻道商品列表單元格也嵌套一個2*6的表格，並將第二行的第2列和第3列合併成一個單元格，將第五列和第六列合併成一個單元格，效果如圖6.15所示。

圖6.15 添加2*6的表格

（6）在頻道單元格的<TD>標籤內加入背景樣式.line {background: url(images/digiBg.gif) top repeat-x; text-align: center}，效果如圖6.16所示。

圖6.16 添加頻道商品頂部背景

（7）在第一行的每列單元格內順序插入 w500c.gif, box.gif, earphone.gif mp3.gif, wandian.gif, camera.gif 6張圖片並配以文字說明；在第二行第一列和第三列分別插入phone.gif, pc.gif, 在第二列和第四列中插入商品資訊以序列的方式排列，效果如圖6.17所示。

圖6.17 添加頻道商品後的頁面效果

（8）加入CSS樣式。

階段4：練習——製做商品頻道列表二（網遊頻道和體育頻道）。

需求說明

頻道列表，效果如圖6.18所示。

圖6.18 增長網遊頻道和體育頻道後的頁面效果

提示

（1）DIV層與表格的嵌套。

（2）可參照一階段的練習。

階段5：指導——製做版權頁面。

訓練要點

DIV+表格佈局。

需求說明

製做版權頁面，如圖6.19所示。

圖6.19 版權頁面效果

實現思路及關鍵代碼

版權區域處於foot層中，用3*2的表格便可實現。

參考步驟

（1）在foot層中添加一個3*2的表格。

（2）將第一行兩個單元格合併，而且將第二行兩個單元格也合併。

（3）在第一行添加水平線標籤；第二行順序加入超連接；第三行第一列插入圖片ploice1.gif, ploice2.gif; 在第二列加入版權信息文字和超連接。

（4）製做CSS樣式表文件，應用到頁面中。

第三部分做業

1．製做商品詳細信息頁面，效果如圖6.20所示。

圖6.20 做業1效果示例

提示

（1）紅色虛線框內爲截圖圖片。

（2）這個頁面是一個7*3的表格。

（3）在第六行的前2列中分別嵌套了表格，本例中分別順序嵌套了3*一、5*1的表格。

2．模擬Google搜索頁面，如圖6.21所示。

圖6.21 做業2頁面層佈局劃分效果示例

提示

頁面劃分3層。

3．實現遊戲介紹頁面，如圖6.22所示。

圖6.22 做業3圖示效果

提示

（1）DIV層佈局實現效果。

（2）對比DIV層佈局和表格佈局的區別。

上機7

網站設計和頁面佈局技術（二）

第一部分本次上機目標

本次上機完成的任務

（1）製做拍拍網模板頁。

（2）使用模板頁製做商品列表，商品詳細信息，購買頁。

（3）設置統同樣式。

（4）連接各個頁面爲完整網站。

訓練技能點

（1）製做模板頁。

（2）應用模板。

（3）頁面測試和站點訪問。

第二部分上機任務

階段1：指導——製做模板並用模板頁製做網頁。

訓練要點

（1）使用Dreamweaver製做模板。

（2）添加模板的可編輯區域。

（3）製做商品的購買套用模板。

需求說明

製做模板頁面，如圖7.1和圖7.2所示。

圖7.1 模板頁面

圖7.2 使用模板附加的頁面

實現思路及關鍵代碼

（1）肯定頁面公共部分

（2）指定可編輯區域和不可編輯區域。

參考步驟

（1）使用Dreamweaver建立模板，如圖7.3和圖7.4所示。

圖7.3 建立模板

圖7.4 新建的模版代碼示例

（2）咱們將網頁劃分爲3個層，將head層和foot層指定爲共有區域，是不可編輯區域；content層是變化區域，設置爲可編輯區域。所以咱們在模板頁上也添加3個層，將第6章首頁頁面中的head層和foot層的代碼複製粘貼到該頁面中，效果如圖7.5所示。

圖7.5 添加共有區域效果

（3）將content層所在區域設置爲可編輯區域，添加可編輯區域的方法：將光標定位到要添加可編輯區域的位置，選擇「插入」菜單→「模板對象」 →「可編輯區域」命令（如圖7.6所示），彈出如圖7.7所示的對話框，爲可編輯區域命名。代碼如圖7.8所示。

圖7.6 添加可編輯區域

圖7.7 指定可編輯區域的名稱

圖7.8 可編輯區域代碼標誌

（4）咱們會在頁面上使用CSS樣式表，所以在<HEAD></HEAD>之間Dreamweaver會自動將TITLE設置爲可編輯區域，同時還會有一塊以name=」head」命名的區域設置爲可編輯區域，咱們能夠在這個區域裏編輯修改CSS樣式表文件，代碼如圖7.9所示。

圖7.9 <HEAD>中默認的可編輯區域

（5）保存模板，保存模板時必定要將模板保存在你將要發佈的站點內，如圖7.10所示。

圖7.10 保存模板

（6）模板保存後，系統會自動在站點內創建一個名爲Templates的文件夾，模板都將保存在這個文件夾下，如圖7.11所示。

圖7.11 模板保存後的存放路徑

（7）將模板附加到頁面。

① 首先咱們須要建立一個空白的頁面，建立方法這裏再也不敘述。

② 附加模板頁，如圖7.12和圖7.13所示。

圖7.12 選擇套用模板頁

圖7.13 選擇套用的站點和模板

（8）當選定套用的模板後，咱們剛建立的HTML頁將會採用模板頁面的佈局，你會發現除了可編輯區域，其餘區域的文字都是灰色不可編輯，只有可編輯區域裏的內容能夠修改代碼，如圖7.14所示。

圖7.14 套用了模板的HTML頁

（9）在可編輯區域內加上咱們須要的顯示內容便可，如圖7.15所示。

圖7.15 在可編輯區域添加內容

紅色虛線框中代碼可參考第6章做業1的練習代碼。

階段2：練習——採用模板，製做登陸頁面。

需求說明

製做登陸頁面，如圖7.16所示。

圖7.16 套用模板的登陸頁面

提示

（1）新建空白頁面，而後套用模板。

（2）注意圖片，樣式的連接路徑。

（3）內容能夠從第5章上機第3階段中複製過來。

階段3：指導——應用模板製做類目商品列表。

訓練要點

模板的應用。

需求說明

製做類目商品列表，如圖7.17所示。

圖7.17;類目商品列表

實現思路及關鍵代碼：

參照階段1練習。

參考步驟：

（1）建立空白頁面

（2）套用已經制做好的模板

（3）在可編輯區域內容從第五章上機階段1中複製。

階段3：指導——應用模板製做類目商品列表。

需求說明

製做商品購買確認頁面，如圖7.18所示。

圖7.18 購買確認頁面

提示

（1）參照上一階段垢參考步驟。

（2）若是頁面套用了模板，那麼樣式表文件能夠直接綁定模板，這樣全部套用該模板的頁面都具備統同樣式。

階段5：指導——建立各頁面間的連接，發佈站點。

訓練要點

（1）經過超連接將頁面貫穿起來。

（2）製做統一風格的CSS樣式與頁面綁定。

（3）網頁測試和站點發布。

需求說明

將各個頁面之間相互連接，具備統一的風格和樣式。

實現思路及關鍵代碼

（1）使用超連接頁面相互貫穿。

（2）站點發布。

（3）網頁測試。

說明

（1）index.html首頁從第6章階段5直接複製過來。

（2）幫助中心頁面從第5章階段5直接複製過來使用。

（3）註冊頁面使用第5章階段4上機練習頁面。

參考步驟

（1）設置各個頁面的連接。

① 首頁index.html，在首頁須要實現幫助中心，登陸和註冊的頁面連接以及商品連接，如圖7.19所示。

圖7.19 首頁index.html

② 登陸頁面使用本章階段2的練習頁面，如圖7.20所示。

③ 幫助中心頁面，如圖7.21所示。

④ 註冊頁面，如圖7.22所示。

圖7.20 登陸頁面

圖7.21 幫助中心頁面

圖7.22 註冊頁面

⑤ 連接商品列表頁面goodslist.html，如圖7.23所示。

圖7.23 首頁連接商品列表

單擊圖7.23 的紅色虛線內容，頁面連接到商品列表頁面，如圖7.24所示。

圖7.24 商品列表goodslist.html

⑥ 商品詳細信息goodsinfo.html，本章第1階段的練習頁面，如圖7.25所示。

圖7.25 商品詳細信息goodsinfo.html

⑦ 購買確認頁面buy.html，本章第4階段的練習頁面，如圖7.26所示。

圖7.26 購買確認頁面buy.html

（2）設置統一的樣式表文件，添加到頁面中。

① 字體樣式：font-size: 12px; font-family: Verdana。

② 超連接樣式：無下劃線的超連接，鼠標滑過期顏色有改變。

③ 樣式表文件與頁面的綁定。

對比沒有添加統同樣式和添加統同樣式後的頁面效果。

（3）網頁測試。

① 單個網頁的測試：選擇「文件」→「檢查頁」命令，而後單擊須要檢查的項目，如圖7.27所示，檢查結果如圖7.28所示。

圖7.27 單個網頁測試

圖7.28 檢查結果顯示

② 整個站點的測試，如圖7.29所示。

圖7.29 檢查整個站點

③ 用Firefox火狐瀏覽器打開網頁，查看頁面顯示是否正常。若是頁面顯示與在IE瀏覽器中的顯示有不一樣，可根據須要和實際狀況進行修改。

④ 安裝IIS,用於發佈站點。

Ø 打開「控制面板」窗口。

Ø 雙擊「添加或刪除程序」圖標。

Ø 單擊「添加/刪除Windows組件」按鈕。

Ø 選中「應用程序服務器」複選框並單擊「詳細信息」按鈕。

Ø 選中」Internet信息服務（II）」，而後單擊「肯定」按鈕。

Ø 單擊「下一步」按鈕進行安裝，最後單擊「完成」按鈕。安裝過程當中可能會提示要求插入系統安裝盤。

⑤ 在Dreamweaver中將站點內的文件上傳到IIS。

Ø 在「管理站點」對話框中選擇要發佈的站點，單擊「編輯」按鈕，如圖7.30所示。

Ø 在打開的對話框中，單擊「高級」標籤，而後選擇「遠程信息」選項，設置訪問方式和文件夾路徑，如圖7.31所示。

圖7.30 選擇要發佈的站點

圖7.31 設置訪問方式和文件夾路徑

設置好訪問方式和站點上傳路徑後，咱們就能夠發佈站點了，如圖7.32所示。

圖7.32 上傳站點

⑥ 在本地瀏覽站點，如圖7.33所示。

圖7.33 訪問已發佈的站點

第三部分做業

1．製做一個NBA中國的網站模板，如圖7.34所示。

圖7.34 做業1效果示例

提示

（1）頁面用DIV劃分紅3部分，上下兩個層的內容爲不可編輯

（2）將中間的層設置爲可編輯區域

2．製做頁面套用模板，如圖7.35和圖7.36所示。

圖7.35 模板應用1

圖7.36 模板應用2

提示

（1）在新建的空白頁面中套用模板。

（2）綁定外部CSS樣式文件。

3．發佈站點，如圖7.37所示。

圖7.37 站點頁面示例

提示

（1）安裝IIS的步驟參考階段5的描述。

（2）在框架結構中，超連接的target屬性要指向顯示頁面的框架名稱。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。