網(wǎng)設(shè)計(jì)與制作案例教程

網(wǎng)設(shè)計(jì)與制作案例教程第1頁(yè)/共287頁(yè)1.1 學(xué)習(xí)任務(wù)：認(rèn)識(shí)網(wǎng)頁(yè)互聯(lián)網(wǎng)是一個(gè)蘊(yùn)藏著無(wú)窮資源的寶庫(kù)，在資源共享和信息交換方面具有得天獨(dú)厚的優(yōu)勢(shì)，網(wǎng)頁(yè)則正是這些資源和信息重要的傳遞載體。網(wǎng)頁(yè)不但可以提供文字、圖片、多媒體信息的瀏覽，并且網(wǎng)絡(luò)在娛樂、商務(wù)及各種領(lǐng)域的應(yīng)用例如電子郵件、聊天室、搜索引擎、網(wǎng)上交易、電子政務(wù)等都離不開網(wǎng)頁(yè)。第2頁(yè)/共287頁(yè)1.1.1什么是網(wǎng)頁(yè)網(wǎng)頁(yè)是一種可以在互聯(lián)網(wǎng)上傳輸，能被瀏覽器認(rèn)識(shí)和翻譯成頁(yè)面并顯示出來(lái)的文件，網(wǎng)頁(yè)是網(wǎng)站的基本構(gòu)成元素。網(wǎng)頁(yè)實(shí)際上就是一個(gè)文件。一般網(wǎng)頁(yè)上都會(huì)有文本和圖片等信息，而復(fù)雜一些的網(wǎng)頁(yè)上還會(huì)有聲音、視頻、動(dòng)畫等多媒體內(nèi)容。網(wǎng)頁(yè)比報(bào)紙、廣播、電視等傳統(tǒng)媒介在信息傳遞上更加迅速、多樣化，交互能力更強(qiáng)。第3頁(yè)/共287頁(yè)1.1.2網(wǎng)頁(yè)類型網(wǎng)頁(yè)分為靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)兩種類型。靜態(tài)網(wǎng)頁(yè)就是設(shè)計(jì)者做什么樣，在客戶端瀏覽時(shí)就顯示什么樣，而動(dòng)態(tài)網(wǎng)頁(yè)可以根據(jù)不同的用戶顯示不同的頁(yè)面。第4頁(yè)/共287頁(yè)1．靜態(tài)網(wǎng)頁(yè)靜態(tài)網(wǎng)頁(yè)的基本特點(diǎn)歸納如下：靜態(tài)網(wǎng)頁(yè)每個(gè)網(wǎng)頁(yè)都有一個(gè)固定的URL，且網(wǎng)頁(yè)URL以.htm、.html、.shtml等常見形式為后綴，而不含有“？”。網(wǎng)頁(yè)內(nèi)容一經(jīng)發(fā)布到網(wǎng)站服務(wù)器上，無(wú)論是否有用戶訪問，每個(gè)靜態(tài)網(wǎng)頁(yè)的內(nèi)容都是保存在網(wǎng)站服務(wù)器上的。靜態(tài)網(wǎng)頁(yè)的內(nèi)容相對(duì)穩(wěn)定，因此容易被搜索引擎檢索。靜態(tài)網(wǎng)頁(yè)沒有數(shù)據(jù)庫(kù)的支持。靜態(tài)網(wǎng)頁(yè)的交互性較差，在功能方面有較大的限制。第5頁(yè)/共287頁(yè)2．動(dòng)態(tài)網(wǎng)頁(yè)動(dòng)態(tài)網(wǎng)頁(yè)的基本特點(diǎn)歸納如下：動(dòng)態(tài)網(wǎng)頁(yè)以數(shù)據(jù)庫(kù)技術(shù)為基礎(chǔ)，可以大大降低網(wǎng)站維護(hù)的工作量。采用動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)的網(wǎng)站可以實(shí)現(xiàn)更多的功能。動(dòng)態(tài)網(wǎng)頁(yè)實(shí)際上并不是獨(dú)立存在于服務(wù)器上的網(wǎng)頁(yè)文件，只有當(dāng)用戶請(qǐng)求時(shí)服務(wù)器才返回一個(gè)完整的網(wǎng)頁(yè)。動(dòng)態(tài)網(wǎng)頁(yè)中的“？”對(duì)搜索引擎檢索存在一定的問題。第6頁(yè)/共287頁(yè)1.2 學(xué)習(xí)任務(wù)：認(rèn)識(shí)網(wǎng)站根據(jù)提供服務(wù)的不同，通常把提供網(wǎng)頁(yè)服務(wù)的服務(wù)器稱為web服務(wù)器，相關(guān)網(wǎng)站稱為web站點(diǎn)。網(wǎng)站是提供各種信息和服務(wù)的基地，如用戶熟悉的搜狐、新浪、雅虎等都是網(wǎng)站。網(wǎng)站是由很多網(wǎng)頁(yè)鏈接在一起組成的。用戶瀏覽到一個(gè)網(wǎng)站時(shí)看到的第一個(gè)頁(yè)面叫做主頁(yè)。第7頁(yè)/共287頁(yè)1.2.2網(wǎng)址與域名１．網(wǎng)址瀏覽網(wǎng)頁(yè)時(shí)，在瀏覽器地址欄中輸入的諸如就是一個(gè)網(wǎng)址，瀏覽器訪問網(wǎng)頁(yè)是由URL（UniformResourceLocator)統(tǒng)一資源定位器的方式來(lái)實(shí)現(xiàn)的。2．域名域名就是網(wǎng)站的名稱，企業(yè)在注冊(cè)域名時(shí)一般都會(huì)申請(qǐng)一個(gè)符合網(wǎng)站特點(diǎn)的域名，甚至?xí)延蛎醋髌髽I(yè)的網(wǎng)上商標(biāo)。第8頁(yè)/共287頁(yè)1.2.3網(wǎng)頁(yè)的基本構(gòu)成元素文本元素圖像元素動(dòng)畫元素超鏈接第9頁(yè)/共287頁(yè)1.2.4網(wǎng)頁(yè)制作常用軟件和技術(shù)網(wǎng)頁(yè)編輯排版軟件Dreamweaver網(wǎng)頁(yè)圖像制作軟件Photoshop和Fireworks網(wǎng)頁(yè)動(dòng)畫制作軟件Flash網(wǎng)頁(yè)標(biāo)簽語(yǔ)言HTML網(wǎng)頁(yè)腳本語(yǔ)言JavaScript動(dòng)態(tài)交互式網(wǎng)頁(yè)編程語(yǔ)言第10頁(yè)/共287頁(yè)1.3學(xué)習(xí)任務(wù)：網(wǎng)站建設(shè)基本流程什么是網(wǎng)站網(wǎng)址與域名網(wǎng)頁(yè)的基本構(gòu)成元素網(wǎng)頁(yè)制作常用軟件和技術(shù)第11頁(yè)/共287頁(yè)1.3學(xué)習(xí)任務(wù)：網(wǎng)站建設(shè)基本流程網(wǎng)站的需求分析規(guī)劃站點(diǎn)結(jié)構(gòu)收集素材設(shè)計(jì)與制作網(wǎng)站網(wǎng)站的發(fā)布第12頁(yè)/共287頁(yè)1.4學(xué)習(xí)任務(wù)：HTML語(yǔ)言基礎(chǔ)知識(shí)HTML是超文本標(biāo)簽語(yǔ)言（HypertextMarkupLanguage）的縮寫，它是當(dāng)今多種標(biāo)簽語(yǔ)言中的一種，是為Internet文檔設(shè)計(jì)的標(biāo)簽語(yǔ)言。HTML雖然非常簡(jiǎn)單，容易掌握，但它也是重要的，因?yàn)樗蔷W(wǎng)頁(yè)設(shè)計(jì)與Web應(yīng)用程序開發(fā)的基礎(chǔ)。第13頁(yè)/共287頁(yè)1.4.1HTML簡(jiǎn)介1．認(rèn)識(shí)HTMLHTML是在標(biāo)準(zhǔn)通用標(biāo)簽語(yǔ)言SGML（StandardGeneralizedMarkupLanguage）定義下的一個(gè)描述性語(yǔ)言，是SGML的一個(gè)子集。2．HTML制作工具及顯示原理制作HTML文檔需要兩個(gè)基本工具，一個(gè)是HTML編輯器，一個(gè)是Web瀏覽器。HTML文檔顯示原理可概括為：HTML使用一組約定的標(biāo)簽符號(hào)，對(duì)Web上的各種信息進(jìn)行標(biāo)記，瀏覽器會(huì)解釋這些標(biāo)記符號(hào)并以它們指定的格式把相應(yīng)的內(nèi)容顯示在屏幕上，而標(biāo)記符號(hào)本身不會(huì)在屏幕上顯示出來(lái)3．HTML的基本語(yǔ)法（1）一般標(biāo)簽（２）空標(biāo)簽4．HTML的文檔結(jié)構(gòu)第14頁(yè)/共287頁(yè)1.4.2常用文本標(biāo)簽為了對(duì)網(wǎng)頁(yè)中的文本元素進(jìn)行修飾、排版，使網(wǎng)頁(yè)豐富多彩，往往需要使用大量的標(biāo)簽符，文本標(biāo)簽分為文本的基本設(shè)置與文本的修飾設(shè)置。第15頁(yè)/共287頁(yè)1．段標(biāo)簽<p>…</p>瀏覽器是以無(wú)格式的方式顯示HTML文檔的，也就意味著HTML文檔中的空格和Enter鍵是被瀏覽器所忽略的。要將文本劃分段落就必須使用分段標(biāo)簽<p>。<p>標(biāo)簽是非空元素標(biāo)簽，所標(biāo)識(shí)的文本，代表同一個(gè)段落，必須成對(duì)使用。兩個(gè)段落間的間距等于兩次換行的距離。語(yǔ)法格式舉例：<palign="center">段落內(nèi)容</p>屬性說(shuō)明：align（對(duì)齊）屬性的屬性值有3個(gè)參數(shù)：left（默認(rèn)）、center和right，這3個(gè)參數(shù)分別代表設(shè)置段落文字的左、中、右的3種對(duì)齊方式。第16頁(yè)/共287頁(yè)2．換行標(biāo)簽<br><br>是換行標(biāo)簽，在網(wǎng)頁(yè)設(shè)計(jì)中比較常用。使用<br>標(biāo)簽?zāi)軌蚴刮臋n在該標(biāo)簽處強(qiáng)制換行，這一點(diǎn)與<p>相同。但與<p>不同的是換行后行之間不留空白行，頁(yè)面看起來(lái)比較緊湊。<br>屬于空標(biāo)簽，沒有結(jié)束標(biāo)簽。第17頁(yè)/共287頁(yè)3．預(yù)格式化標(biāo)簽<pre>…</pre><pre>稱為預(yù)格式化標(biāo)簽，它的作用是按原始代碼的排列方式顯示內(nèi)容。通常情況下，瀏覽器顯示時(shí)會(huì)忽略內(nèi)容中的空白及換行，而<pre>與</pre>之間的空白及換行會(huì)被保留。第18頁(yè)/共287頁(yè)4．水平線標(biāo)簽<hr><hr>標(biāo)簽是水平線標(biāo)簽，可以在頁(yè)面中產(chǎn)生一條水平線，用于分隔文檔和修飾網(wǎng)頁(yè)。<hr>屬于空元素標(biāo)簽，沒有結(jié)束標(biāo)簽。語(yǔ)法格式舉例：<hralign="left"size="4"width="80%"color="red"noshade="noshade">常用屬性說(shuō)明：hr標(biāo)簽的常用屬性如右表所示。屬性名功能size設(shè)置水平線的粗細(xì)，屬性值為整數(shù)，單位為像素width設(shè)置水平線的寬度，屬性值單位為像素或%，如width="300"align設(shè)置水平線的對(duì)齊方式，取值left、center、rightcolor設(shè)置水平線的顏色，默認(rèn)值blacknoshade水平線默認(rèn)為立體顯示，具有陰影，加上此屬性可刪除水平線陰影第19頁(yè)/共287頁(yè)5．文字格式控制標(biāo)簽<font>…</font><font>標(biāo)簽用來(lái)設(shè)定網(wǎng)頁(yè)中特定文字的字體、大小和顏色。必須成對(duì)使用。語(yǔ)法格式舉例：<fontface="楷體"size="4"color="blue">文字</font>屬性說(shuō)明：<font>標(biāo)簽的屬性如右屬性名功能face設(shè)置文本的字體，中文默認(rèn)值是宋體，英文默認(rèn)值是TimesNewRomansize設(shè)置文本的大小，屬性值可以是絕對(duì)的，也可以是相對(duì)的color設(shè)置文本的顏色表所示。屬性名功能face設(shè)置文本的字體，中文默認(rèn)值是宋體，英文默認(rèn)值是TimesNewRomansize設(shè)置文本的大小，屬性值可以是絕對(duì)的，也可以是相對(duì)的color設(shè)置文本的顏色第20頁(yè)/共287頁(yè)6．特定文字樣式標(biāo)簽特定文字樣式標(biāo)簽用來(lái)設(shè)置特殊的文字樣式，以實(shí)現(xiàn)文字的特殊效果。這類標(biāo)簽是成對(duì)使用的，沒有屬性。例如，a²+b²表示a2+b2。標(biāo)簽名功能b定義粗體標(biāo)簽，<b>與</b>之間的文本產(chǎn)生加粗效果i定義斜體文字，<i>與</i>之間的文本產(chǎn)生斜體效果u加下劃線標(biāo)簽，<u>與</u>之間的文本顯示時(shí)會(huì)加下劃線s加刪除線標(biāo)簽，<s>與</s>之間的文本顯示時(shí)會(huì)加刪除線big定義大號(hào)文字，<big>與</big>之間的文本顯示時(shí)會(huì)加大small定義小號(hào)文字，<small>與</small>之間的文本顯示時(shí)會(huì)縮小strong用于特別強(qiáng)調(diào)的文本，顯示為粗體字sup定義上標(biāo)文字，^與之間的文本以上標(biāo)字顯示sub定義下標(biāo)文字，_與之間的文本以下標(biāo)字顯示第21頁(yè)/共287頁(yè)7．區(qū)塊標(biāo)簽<div>…</div><div>標(biāo)簽在DIV+CSS的web標(biāo)準(zhǔn)網(wǎng)頁(yè)設(shè)計(jì)中是可以取代表格，實(shí)現(xiàn)網(wǎng)頁(yè)布局的主要標(biāo)簽。<div>…</div>標(biāo)簽是為HTML文檔內(nèi)大塊內(nèi)容提供結(jié)構(gòu)的容器。在div中可以包含各種網(wǎng)頁(yè)元素，如文字、圖片、動(dòng)畫、表格、表單等等。用戶不僅僅能夠通過定義標(biāo)簽屬性來(lái)控制整塊文本的位置，將文本放置入div區(qū)塊，語(yǔ)法格式如<divalign="center">文本內(nèi)容</div>。而使用CSS樣式表來(lái)控制div標(biāo)簽更可以實(shí)現(xiàn)各種網(wǎng)頁(yè)布局的形式，為網(wǎng)頁(yè)設(shè)計(jì)者提供表現(xiàn)與結(jié)構(gòu)分離的網(wǎng)站構(gòu)建。第22頁(yè)/共287頁(yè)8．特殊字符實(shí)體由于HTML文檔是ASCII文本，只支持ASCII字符。但是，還有一些有特殊用途的字符在HTML中無(wú)法直接顯示成原來(lái)的樣式，想要在瀏覽器中顯示這些字符就必須輸入特殊字符實(shí)體來(lái)代替。屏幕顯示符號(hào)字符實(shí)體代碼屏幕顯示符號(hào)字符實(shí)體代碼<<"">>’'&&空格

第23頁(yè)/共287頁(yè)9．標(biāo)題標(biāo)簽<hn>…</hn><hn>標(biāo)簽用于設(shè)置網(wǎng)頁(yè)中各個(gè)層次的標(biāo)題文字，被設(shè)置的文字將以黑體顯示，并自成段落。hn標(biāo)簽是成對(duì)出現(xiàn)的，共分為六級(jí)。n取1-6之間的正整數(shù)。其中<h1>…</h1>表示最大的標(biāo)題，<h6>…</h6>表示最小的標(biāo)題。語(yǔ)法格式舉例：<h3align="center">標(biāo)題部分</h3>屬性說(shuō)明：align屬性用于設(shè)置標(biāo)題的對(duì)齊方式，其參數(shù)為left、center、right。第24頁(yè)/共287頁(yè)1.4.3列表標(biāo)簽列表標(biāo)簽可以將網(wǎng)頁(yè)中相關(guān)的信息有條不紊地組織起來(lái)。作為塊級(jí)元素，在DIV+CSS的網(wǎng)頁(yè)設(shè)計(jì)中列表標(biāo)簽的使用是非常普遍的。HTML中列表標(biāo)簽可分為：無(wú)序列表、有序列表、嵌套列表和自定義列表。第25頁(yè)/共287頁(yè)1．無(wú)序列表標(biāo)簽<ul>…</ul><ul>稱為無(wú)序列表標(biāo)簽或項(xiàng)目列表標(biāo)簽，用來(lái)在頁(yè)面中顯示項(xiàng)目形式的列表，列表中每一項(xiàng)的前面會(huì)加上○、●或■等符號(hào)，每一項(xiàng)需用<li>標(biāo)簽，所以需要同<li>結(jié)合使用。語(yǔ)法格式舉例：<ul><litype="circle">列表項(xiàng)1</li><litype="square">列表項(xiàng)2</li>

…

</ul>屬性說(shuō)明：<ul>的常用屬性只有一個(gè)type，用來(lái)設(shè)定列表項(xiàng)前面出現(xiàn)的符號(hào)，可取屬性值有：disc：列表項(xiàng)前面加上符號(hào)●。circle：列表項(xiàng)前面加上符號(hào)○。square：列表項(xiàng)前面加上符號(hào)■。第26頁(yè)/共287頁(yè)２．有序列表標(biāo)簽<ol>…</ol><ol>稱為有序列表標(biāo)簽或編號(hào)列表標(biāo)簽，用來(lái)在頁(yè)面中顯示編號(hào)形式的列表，列表中每一項(xiàng)的前面會(huì)加上如A、a、i或I等形式的編號(hào)，編號(hào)會(huì)根據(jù)列表項(xiàng)的增刪自動(dòng)調(diào)整。每一項(xiàng)需要用<li>標(biāo)簽，所以需要同<li>結(jié)合使用。語(yǔ)法格式舉例：<oltype="A"start="2"><li>列表項(xiàng)1</li><li>列表項(xiàng)2</li>…</ol>屬性說(shuō)明：<ol>標(biāo)簽的兩個(gè)屬性type和start用來(lái)控制順序編號(hào)。第27頁(yè)/共287頁(yè)3．<li>…</li><li>用來(lái)標(biāo)簽列表的一項(xiàng)，需同<ul>或<ol>一起使用，它的屬性有：(1)type：用來(lái)設(shè)定列表項(xiàng)的符號(hào)，如果<li>用在<ul>里，屬性取值為disc、circle或square，如果<li>用在<ol>里，則屬性取值為1、a、A、i或I。(2)value：此屬性僅當(dāng)<li>用在<ol>里有效，屬性值為一整數(shù)，用來(lái)設(shè)定當(dāng)前項(xiàng)的編號(hào)，其后的項(xiàng)目將以此值為起始數(shù)目遞增，前面各項(xiàng)不受影響。第28頁(yè)/共287頁(yè)1.4.4超鏈接標(biāo)簽超級(jí)鏈接是網(wǎng)頁(yè)的靈魂，web上的網(wǎng)頁(yè)正是依靠點(diǎn)擊設(shè)置在文本、圖像、flash等元素上的超級(jí)鏈接才能實(shí)現(xiàn)相互間的訪問。建立超鏈接的標(biāo)簽是一對(duì)<a>…</a>，它是網(wǎng)頁(yè)中最為常用的標(biāo)簽。由于定義超鏈接時(shí)常常需要設(shè)置文件的路徑，所以本小節(jié)先介紹文件路徑的寫法，然后再介紹鏈接標(biāo)簽的用法。第29頁(yè)/共287頁(yè)1．文件路徑網(wǎng)頁(yè)設(shè)計(jì)中，經(jīng)常需要設(shè)置文件路徑，文件的路徑可分為絕對(duì)路徑和相對(duì)路徑。(1)絕對(duì)路徑：文件的絕對(duì)路徑提供文檔完整的URL，而且包括所使用的協(xié)議（如對(duì)于Web頁(yè)，通常使用http://）。(2)相對(duì)路徑：相對(duì)路徑又分為根相對(duì)路徑和文檔相對(duì)路徑，根相對(duì)路徑總是以站點(diǎn)根目錄“/”為起始目錄，寫起來(lái)比較簡(jiǎn)單；文檔相對(duì)路徑是以當(dāng)前文件所在路徑為起始目錄，進(jìn)行相對(duì)的文件查找第30頁(yè)/共287頁(yè)2．鏈接標(biāo)簽 鏈接是用標(biāo)簽<a>來(lái)定義的，定義的語(yǔ)法為：<ahref="/"

target="_blank"title="sohu">搜狐網(wǎng)站</a>屬性說(shuō)明：<a>標(biāo)簽的屬性如下表所示。屬性名功能href鏈接所指的url地址，即目標(biāo)地址，屬性值可以使用絕對(duì)路徑和相對(duì)路徑target指定打開鏈接的目標(biāo)窗口，取值_parent（在父窗口中打開）、_blank（在新窗口打開）、_self（在原窗口中打開，默認(rèn)值）、_top（在瀏覽器的整個(gè)窗口中打開）name用來(lái)設(shè)定錨點(diǎn)的名字，屬性值為自定義字符串title指定指向鏈接時(shí)所提示的文字第31頁(yè)/共287頁(yè)3．超級(jí)鏈接的種類四種鏈接的格式如下：本地鏈接：用鏈接標(biāo)簽鏈接本地網(wǎng)頁(yè)，應(yīng)設(shè)置href屬性為所鏈接網(wǎng)頁(yè)文件的相對(duì)路徑或絕對(duì)路徑，例如，<ahref="root/index.html">我的主頁(yè)</a>URL鏈接：用鏈接標(biāo)簽鏈接外部網(wǎng)頁(yè)，這時(shí)應(yīng)設(shè)置href屬性為所鏈接網(wǎng)頁(yè)文件的相對(duì)路徑或絕對(duì)路徑，例如，<ahref="/index.html"

>網(wǎng)易163</a>錨記鏈接：命名錨點(diǎn)是在文檔中設(shè)置的有名字的標(biāo)簽，這些標(biāo)簽通常放在文檔的特定主題處或頂部，通過到這些命名錨點(diǎn)的鏈接，可快速將訪問者帶到文檔中指定位置。電子郵件鏈接：把<a>的href屬性設(shè)置為“mailto:”加上電子郵件地址就可以創(chuàng)建電子郵件鏈接?？真溄樱嚎真溄右卜Q假鏈接，是未指派的鏈接，用于向頁(yè)面上的對(duì)象或文本附加行為。第32頁(yè)/共287頁(yè)1.4.5圖像標(biāo)簽Web上常用的圖像格式有三種：JPEG、GIF、PNG。使用<img>在網(wǎng)頁(yè)上加入圖像的語(yǔ)法舉例為：<imgsrc="image/tu.jpg"width="100%"height="100"border="1"align="top"alt="圖片"/><img>不需要結(jié)束標(biāo)簽，只需在開始標(biāo)簽里設(shè)置屬性即可。第33頁(yè)/共287頁(yè)1.4.6表格標(biāo)簽使用表格是網(wǎng)頁(yè)中用來(lái)定位元素的重要方法，同時(shí)表格也是網(wǎng)頁(yè)布局結(jié)構(gòu)里不可或缺的一部分。表格由一行或多行組成，每行又由一個(gè)或多個(gè)單元格組成。HTML中一個(gè)表格通常是由<table>、<tr>、<td>三個(gè)標(biāo)簽來(lái)定義的，這三個(gè)標(biāo)簽分別表示表格、表格行、單元格。在對(duì)表格進(jìn)行設(shè)置時(shí)，可以設(shè)置整個(gè)表格(<table>)或表格中的行(<tr>)或單元格(<td>)的屬性，它們優(yōu)先順序?yàn)椋簡(jiǎn)卧?<td>)優(yōu)先于行(<tr>)，行(<tr>)優(yōu)先于表格(<table>)。例如，如果將某個(gè)單元格的背景色屬性設(shè)置為紅色，然后將整個(gè)表格的背景色屬性設(shè)置為藍(lán)色，則紅色單元格不會(huì)變?yōu)樗{(lán)色。在html文檔中，表格是由table、th、tr、td等標(biāo)簽構(gòu)成的。第34頁(yè)/共287頁(yè)1．<table>標(biāo)簽<table>稱為表格標(biāo)簽，整個(gè)表格始于<table>而終于</table>，它是一個(gè)容器標(biāo)簽，用于聲明一個(gè)表格，<tr>、<td>等只能在它的范圍內(nèi)使用。<table>常用的屬性有：width：用來(lái)設(shè)定表格的寬度，屬性值可以是相對(duì)的或絕對(duì)的，如width="50%"。align：用來(lái)設(shè)定表格水平對(duì)齊方式，屬性值可以是left、center、right三者中之一。border：用來(lái)設(shè)定表格邊框的厚度，屬性值為整數(shù)，單位為像素。cellpadding：用來(lái)設(shè)定邊距的大小，也就是單元格中內(nèi)容與單元格邊框之間留的空白大小，屬性值為整數(shù)，單位為像素。cellspacing：用來(lái)設(shè)定單元格與單元格之間的距離，屬性值為整數(shù)，單位為像素。bgcolor：用來(lái)設(shè)定整個(gè)表格的背景顏色。background：用來(lái)設(shè)定表格的背景圖像，屬性值為圖像文件的相對(duì)路徑或絕對(duì)路徑。第35頁(yè)/共287頁(yè)2．<tr>標(biāo)簽<tr>用來(lái)標(biāo)簽表格行，是單元格（<td>或<th>）的容器，使用時(shí)要放在<table>容器里，結(jié)束標(biāo)簽可以省略。<tr>常用的屬性有：align：用來(lái)設(shè)定這一行單元格中內(nèi)容的水平對(duì)齊方式，屬性值為left、center或right。bgcolor：用來(lái)設(shè)定這一行的背景顏色。valign：用來(lái)設(shè)定這一行單元格中內(nèi)容的垂直對(duì)齊方式，可取屬性值有：“top”頂端對(duì)齊?！癿iddle”中間對(duì)齊，“bottom”底端對(duì)齊。第36頁(yè)/共287頁(yè)3．<td>標(biāo)簽<td>在表格中表示一個(gè)單元格，是表格中具體內(nèi)容的容器，使用時(shí)要放在<tr>與</tr>之間。<td>的常用屬性有：align：用來(lái)設(shè)定單元格中內(nèi)容的水平對(duì)齊方式，屬性值為left、center或right。background：用來(lái)設(shè)定單元格的背景圖像。bgcolor：用來(lái)設(shè)定單格的背景顏色。colspan：用來(lái)在水平方向向右合并單元格，屬性值為跨列的數(shù)目。height：用來(lái)設(shè)定單元格的高度，屬性值可以是像素?cái)?shù)，也可以是占整個(gè)表格高度的百分比。nowrap：加入nowrap一詞可以防止單元格中內(nèi)容寬度大于單元格寬度時(shí)自動(dòng)換行。rowspan：用來(lái)在垂直方向向下合并單元格，屬性值為跨行的數(shù)目。valign：用來(lái)設(shè)定單元格中內(nèi)容的垂直對(duì)齊方式，屬性值為top、middle或bottom。width：用來(lái)設(shè)定單元格的寬度，屬性值可以是像素?cái)?shù)，也可以是占整個(gè)表格寬度的百分比。第37頁(yè)/共287頁(yè)4．<th>標(biāo)簽<th>在表格中也表示一個(gè)單元格，用法與<td>相同，不同的是，<th>所標(biāo)簽的單元格中文本內(nèi)容默認(rèn)以粗體顯示，且居中對(duì)齊。第38頁(yè)/共287頁(yè)1.4.7表單標(biāo)簽表單的作用是從訪問Web站點(diǎn)的用戶那里獲取信息。訪問者可以使用諸如文本框、列表框、復(fù)選框以及單選按鈕之類的表單對(duì)象輸入信息，然后單擊某個(gè)按鈕提交這些信息。表單在動(dòng)態(tài)網(wǎng)站建設(shè)與Web應(yīng)用程序開發(fā)中非常重要，它提供了用戶與網(wǎng)站交互的接口。表單相關(guān)的標(biāo)簽雖然不多，但同一個(gè)標(biāo)簽設(shè)置不同的屬性值會(huì)呈現(xiàn)出不同的表單對(duì)象。第39頁(yè)/共287頁(yè)1.<form>標(biāo)簽<form>用來(lái)定義一個(gè)表單區(qū)域，它是一個(gè)容器標(biāo)簽，其它表單標(biāo)簽需要放在<form>與</form>之間。<form>標(biāo)簽的常用屬性如下表所示。屬性名功能action用來(lái)設(shè)定處理表單數(shù)據(jù)的頁(yè)面或腳本，屬性值通常為動(dòng)態(tài)網(wǎng)頁(yè)文件的路徑，如果屬性值為空則表示提交到頁(yè)面本身method用來(lái)設(shè)定將表單數(shù)據(jù)傳輸?shù)椒?wù)器所使用的方法，可取屬性值有g(shù)et和post。get是將表單數(shù)據(jù)附加到所請(qǐng)求頁(yè)的URL中，此種方法不能傳送大量數(shù)據(jù)，且不安全，所以不常使用。post是將表單數(shù)據(jù)嵌入HTTP請(qǐng)求中，此種方法容許傳送大量資料，較為常用第40頁(yè)/共287頁(yè)2.文本框<inputtype="text">文本框除了type屬性外，其它常用屬性有：name：用來(lái)設(shè)定文本框的名稱，所選名稱必須在表單內(nèi)唯一標(biāo)識(shí)該文本框，名稱字符串中不能包含空格或特殊字符，可以使用字母數(shù)字字符和下劃線(_)的任意組合。表單提交到服務(wù)器后需要使用指定的名稱來(lái)獲取文本框的值。value：用來(lái)設(shè)定文本框的默認(rèn)值，也就是用戶輸入前文本框里顯示的文本。size：用來(lái)設(shè)定文本框最多可顯示的字符數(shù)，也就是文本框的長(zhǎng)度。maxlength：用來(lái)設(shè)定文本框中最多可輸入的字符數(shù)。通過此屬性可以將郵政編碼限制為6位數(shù)，將密碼限制為10個(gè)字符，等等。第41頁(yè)/共287頁(yè)3.密碼框密碼框用來(lái)讓用戶輸入密碼，當(dāng)用戶在密碼框中鍵入時(shí)，輸入內(nèi)容顯示為項(xiàng)目符號(hào)或星號(hào)，以保護(hù)它不被其他人看到。定義密碼框的語(yǔ)法為：<inputtype="password">密碼框的其它屬性設(shè)置與文本框相同。第42頁(yè)/共287頁(yè)4.單選按鈕單選按鈕用來(lái)讓用戶只能從一組選項(xiàng)中選擇一個(gè)選項(xiàng)，例如，性別的選擇。單選按鈕通常成組地使用，在同一個(gè)組中的所有單選按鈕必須具有相同的名稱。定義單選按鈕的語(yǔ)法為：<inputtype="radio">單選按鈕除type外其它常用屬性有：name：用來(lái)設(shè)定單選按鈕的名稱，作用同文本框的name。同一組中所有單選按鈕的此屬性必須設(shè)置相同的值，否則，各選項(xiàng)不會(huì)相互排斥。value：用來(lái)設(shè)定在單選按鈕被選中時(shí)發(fā)送給服務(wù)器的值。checked：用來(lái)確定在瀏覽器中載入表單時(shí)，該單選按鈕是否被選中。如果開始標(biāo)簽里加入checked一詞，則初始被選中。第43頁(yè)/共287頁(yè)5.復(fù)選框復(fù)選框用來(lái)讓用戶可以從一組選項(xiàng)中選擇多個(gè)選項(xiàng)。定義復(fù)選框的語(yǔ)法為：<inputtype="checkbox">復(fù)選框除type外其它常用屬性有：name：用來(lái)設(shè)定復(fù)選框的名稱，作用同文本框的name。value：用來(lái)設(shè)定在復(fù)選框被選中時(shí)發(fā)送給服務(wù)器的值。checked：用來(lái)確定在瀏覽器中載入表單時(shí)，該復(fù)選框是否被選中。如果開始標(biāo)簽里加入checked一詞，則初始被選中。第44頁(yè)/共287頁(yè)6.下拉菜單下拉菜單，也稱下拉列表，用來(lái)讓訪問者從一個(gè)列表中選擇一個(gè)項(xiàng)目。當(dāng)頁(yè)面空間有限，但需要顯示許多菜單項(xiàng)時(shí)，下拉菜單非常有用。定義一個(gè)下拉菜單的語(yǔ)法為：<selectname="from"><optionvalue="henan">山東省</option><optionselected>濟(jì)南市</option></select>一個(gè)下拉菜單由<select>和<option>來(lái)定義，<select>提供容器，它的name屬性意義同文本框的相同。<option>用來(lái)定義一個(gè)菜單項(xiàng)，<option>與</option>之間的文本是呈現(xiàn)給訪問者的，而選中一項(xiàng)后傳送的值是由value屬性指定的，如果省略value屬性，則value的值與文本相同，加入selected屬性可以使菜單項(xiàng)初始為選中狀態(tài)。第45頁(yè)/共287頁(yè)7.列表列表的作用與下拉列表相似，但顯示的外觀不同，列表在瀏覽器中顯示時(shí)列出部分或全部選項(xiàng)，另外列表允許訪問者選擇一個(gè)或多個(gè)項(xiàng)目。定義列表的語(yǔ)法如下：<selectname="from"size="3"multiple><optionvalue="henan">山東省</option><optionselected>濟(jì)南市</option></select>跟下拉列表相比，<select>多了兩個(gè)屬性：size和multiple。size用來(lái)設(shè)定列表中顯示的選項(xiàng)個(gè)數(shù)；加入multiple屬性允許用戶從列表中選擇多項(xiàng)。第46頁(yè)/共287頁(yè)8.文件域文件域使用戶可以選擇其計(jì)算機(jī)上的文件，如字處理文檔或圖形文件，并將該文件上傳到服務(wù)器。文件域的外觀與其它文本框類似，只是文件域還包含一個(gè)“瀏覽”按鈕。用戶可以手動(dòng)輸入要上傳的文件的路徑，也可以使用“瀏覽”按鈕定位并選擇文件。如果要上傳文件，需要注意的是，<form>的method屬性必須設(shè)置為post，另外，<form>必須加上屬性enctype="multipart/form-data"。定義文件域的語(yǔ)法為：<inputtype="file">文件域除type外其它屬性與文本框的相同。第47頁(yè)/共287頁(yè)9.隱藏域隱藏域用來(lái)存儲(chǔ)并提交非用戶輸入信息，該信息對(duì)用戶而言是隱藏的。隱藏域不在瀏覽器窗口中顯示任何外觀。定義隱藏域的語(yǔ)法為：<inputtype="hidden"name="xingming"value="曉聞">隱藏域中，name屬性用來(lái)指定名稱，value屬性用來(lái)指定傳輸?shù)闹?。?8頁(yè)/共287頁(yè)10.文本區(qū)域文本區(qū)域使用戶可以輸入多行信息，例如，輸入留言、自我介紹等。定義文本區(qū)域的語(yǔ)法為：<textarea>春潮帶雨晚來(lái)急，野渡無(wú)人舟自橫。</textarea>開始標(biāo)簽與結(jié)束標(biāo)簽之間的文本為初始值，可以為空，但結(jié)束標(biāo)簽一定要有且正確。第49頁(yè)/共287頁(yè)11.提交、重置、普通按鈕提交按鈕用來(lái)將表單數(shù)據(jù)提交到服務(wù)器。定義提交按鈕的語(yǔ)法為：<inputtype="submit">；重置按鈕用來(lái)還原表單為初始狀態(tài)。定義重置安鈕的語(yǔ)法為：<inputtype="reset">；普通按鈕在不添加腳本的情況下，只呈現(xiàn)一個(gè)按鈕的外觀，單擊后沒有任何動(dòng)作。普通按鈕常用來(lái)跟JavaScript腳本相結(jié)合產(chǎn)生特定的動(dòng)作。定義普通按鈕的語(yǔ)法為：<inputtype="button">。三種按鈕的屬性除type外，其它常用屬性有：value：用來(lái)指定按鈕上顯示的文本。name：用來(lái)指定按鈕的名稱。第50頁(yè)/共287頁(yè)12.圖像按鈕圖像按鈕就是用圖像作為按鈕圖標(biāo)，來(lái)實(shí)現(xiàn)按鈕的功能。定義圖像按鈕的語(yǔ)法為：<inputtype="image">圖像按鈕除type外其它常用的屬性有：name：用來(lái)指定圖像按鈕的名稱。src：用來(lái)指定要為該按鈕使用的圖像，屬性值為圖像文件的相對(duì)路徑或絕對(duì)路徑。alt：用于輸入描述性文本，一旦圖像在瀏覽器中載入失敗，將顯示這些文本。width：用來(lái)設(shè)定圖像的寬度。height：用來(lái)設(shè)定圖像的高度。第51頁(yè)/共287頁(yè)1.4.8框架標(biāo)簽框架提供將一個(gè)瀏覽器窗口劃分為多個(gè)區(qū)域、每個(gè)區(qū)域都可以顯示不同HTML文檔的方法?？蚣苁怯脕?lái)增強(qiáng)網(wǎng)頁(yè)導(dǎo)航性能的一種有效方式，但是這種方式存在一定的爭(zhēng)議?？蚣艹３Ｓ脕?lái)控制站點(diǎn)布局、進(jìn)行頁(yè)面導(dǎo)航，使用框架的最常見的情況就是，一個(gè)框架顯示包含導(dǎo)航控件的文檔，而另一個(gè)框架顯示含有內(nèi)容的文檔，像網(wǎng)上大多數(shù)的論壇、聊天室等都使用了框架。第52頁(yè)/共287頁(yè)1.主框架文檔如果一個(gè)站點(diǎn)在瀏覽器中顯示為包含3個(gè)框架的單個(gè)頁(yè)面，則它實(shí)際上至少由4個(gè)單獨(dú)的HTML文檔組成：主框架文檔（即框架集文檔，通常將其命名為index.html）以及3個(gè)普通HTML文檔（即框架文檔），這3個(gè)普通HTML文檔包含這些框架內(nèi)初始顯示的內(nèi)容。如果要在瀏覽器中查看一組框架，地址欄里應(yīng)輸入主框架文檔的URL。主框架文檔也是HTML文檔，用來(lái)定義一組框架的布局和屬性，不含有<body>部分，但含有<frameset>標(biāo)簽等。主框架文檔的結(jié)構(gòu)如下：<html><head><title>標(biāo)題</title></head><frameset><frame><frame><frame></frameset></html>第53頁(yè)/共287頁(yè)2．<noframes>標(biāo)簽<noframes>標(biāo)簽位于最外層的<frameset>與</frameset>之間，并且在定義完其它<frameset>和<frame>之后。<noframes>定義的內(nèi)容將在訪問者的瀏覽器不支持框架時(shí)顯示。<noframes>用法如下：<frameset><frame><frame><noframes><body>本機(jī)瀏覽器不支持框架！</body></noframes></frameset>第54頁(yè)/共287頁(yè)3．<iframe>標(biāo)簽<iframe>標(biāo)簽是浮動(dòng)框架標(biāo)簽。浮動(dòng)框架是將一個(gè)HTML文件嵌入在另一個(gè)HTML中顯示。它不同于<Frame>標(biāo)簽的最大特征是，這個(gè)標(biāo)簽所引用的HTML文件不是與另外的HTML文件相互獨(dú)立顯示，而是可以直接嵌入在一個(gè)HTML文件中，與這個(gè)HTML文件內(nèi)容相互融合，成為一個(gè)整體。浮動(dòng)框架還可以在空白頁(yè)面中創(chuàng)建，也可以在表格中創(chuàng)建。第55頁(yè)/共287頁(yè)1.4.9其它標(biāo)簽1.<meta>標(biāo)簽<meta>屬于頭部標(biāo)簽，應(yīng)放在<head>與</head>之間，它的用法比較多，但最常用的是它的刷新功能。實(shí)現(xiàn)刷新功能的語(yǔ)法：<metahttp-equiv="refresh"content="5;url=">該語(yǔ)句表示：頁(yè)面打開5秒鐘后自動(dòng)轉(zhuǎn)到百度主頁(yè)。如果把url部分省略，則表示頁(yè)面每5秒鐘就自動(dòng)刷新一次。第56頁(yè)/共287頁(yè)2．<bgsound>標(biāo)簽<bgsound>用于給網(wǎng)頁(yè)添加背景音樂，不需要結(jié)束標(biāo)簽，一般放在<head>與</head>之間。此標(biāo)簽只適用于IE瀏覽器，常用屬性有：src：用來(lái)設(shè)定音樂文件的路徑，可以是相對(duì)路徑或絕對(duì)路徑。autostart：用來(lái)設(shè)定背景音樂是否自動(dòng)播放，屬性值可以取true或false。loop：用來(lái)設(shè)定背景音樂重復(fù)播放的次數(shù)，屬性值infinite表示無(wú)限次。第57頁(yè)/共287頁(yè)3．<marquee>標(biāo)簽<marquee>可以使其標(biāo)簽的內(nèi)容產(chǎn)生滾動(dòng)效果，網(wǎng)上常見的滾動(dòng)信息公告板就是用它來(lái)實(shí)現(xiàn)的，此標(biāo)簽只適用于IE瀏覽器。<marquee>標(biāo)簽的使用語(yǔ)法：<marquee>內(nèi)容產(chǎn)生滾動(dòng)效果</marquee>第58頁(yè)/共287頁(yè)謝謝！第59頁(yè)/共287頁(yè)

第二章網(wǎng)頁(yè)版式設(shè)計(jì)

與色彩搭配第60頁(yè)/共287頁(yè)第二章網(wǎng)頁(yè)版式設(shè)計(jì)與色彩搭配本章主要內(nèi)容：網(wǎng)頁(yè)版式設(shè)計(jì)色彩基本理論及色彩的視覺效果網(wǎng)頁(yè)色彩及搭配技巧第61頁(yè)/共287頁(yè)2.1案例分析：不同風(fēng)格網(wǎng)頁(yè)作品欣賞與解析1．網(wǎng)頁(yè)作品欣賞之一：可口可樂公司主頁(yè)該網(wǎng)頁(yè)版面設(shè)計(jì)采用四角對(duì)稱型，主色調(diào)采用紅色。四角對(duì)稱的版式設(shè)計(jì)穩(wěn)重、權(quán)威、大方，符合公司類網(wǎng)站的形象需求；第62頁(yè)/共287頁(yè)2．網(wǎng)頁(yè)作品欣賞之二：某飾品網(wǎng)上商城主頁(yè)網(wǎng)站的主要瀏覽者是年輕人，為此，采用曲線型版式設(shè)計(jì)，主要內(nèi)容、圖片和導(dǎo)航都依照曲線進(jìn)行排列，設(shè)計(jì)簡(jiǎn)潔，過渡自然，美觀大方，符合所銷售商品的特點(diǎn)，同時(shí)給瀏覽者美妙的視覺享受。第63頁(yè)/共287頁(yè)3．網(wǎng)頁(yè)作品欣賞之三：某房地產(chǎn)公司售樓主頁(yè)該網(wǎng)頁(yè)采用中軸型版式設(shè)計(jì)。通常銷售類網(wǎng)站都采用暖色系或者中性色系，采用極端的黑色背景鑲嵌金黃色內(nèi)容并不多見，但這不失為一個(gè)優(yōu)秀的網(wǎng)頁(yè)。第64頁(yè)/共287頁(yè)4．網(wǎng)頁(yè)作品欣賞之四：某學(xué)院管理與應(yīng)用外語(yǔ)系主頁(yè)網(wǎng)頁(yè)采用三縱二橫的骨骼式設(shè)計(jì)，整體色彩采用藍(lán)色和綠色。第65頁(yè)/共287頁(yè)2.2學(xué)習(xí)任務(wù)：網(wǎng)頁(yè)版式設(shè)計(jì)瀏覽網(wǎng)頁(yè)時(shí)，通常的順序是：網(wǎng)頁(yè)版式→網(wǎng)頁(yè)導(dǎo)航→網(wǎng)頁(yè)內(nèi)容。由此可見，網(wǎng)頁(yè)設(shè)計(jì)有三個(gè)關(guān)鍵因素，依次決定網(wǎng)頁(yè)的藝術(shù)性、技術(shù)性和實(shí)用性。網(wǎng)頁(yè)版式是吸引瀏覽者的重要因素。第66頁(yè)/共287頁(yè)2.2.1版式設(shè)計(jì)概述所謂網(wǎng)頁(yè)的版式設(shè)計(jì)，是指將網(wǎng)頁(yè)的各種構(gòu)成要素根據(jù)主題需求予以有機(jī)組合，進(jìn)行必要的關(guān)系設(shè)計(jì)，進(jìn)行一種視覺關(guān)聯(lián)和合理配置。一個(gè)成功的網(wǎng)頁(yè)版式設(shè)計(jì)不僅能提高網(wǎng)頁(yè)的注意力價(jià)值，而且有利于該網(wǎng)頁(yè)主題的信息傳達(dá)，并能增強(qiáng)瀏覽者的視覺留存，從而達(dá)到良好的預(yù)期效果。第67頁(yè)/共287頁(yè)2.3學(xué)習(xí)任務(wù)：色彩的基本理論及其視覺效果色彩在藝術(shù)設(shè)計(jì)中具有重要的地位。作為藝術(shù)設(shè)計(jì)，不管是數(shù)萬(wàn)年前的原始壁畫創(chuàng)作，還是現(xiàn)代的產(chǎn)品設(shè)計(jì)、平面設(shè)計(jì)、室內(nèi)裝潢都離不開色彩，網(wǎng)頁(yè)設(shè)計(jì)也是這樣。網(wǎng)頁(yè)中的背景、文字、LOGO、導(dǎo)航、圖片等元素應(yīng)該采用什么樣的色彩，如何進(jìn)行搭配才能更好的表達(dá)出設(shè)計(jì)的預(yù)想對(duì)于網(wǎng)頁(yè)設(shè)計(jì)者來(lái)說(shuō)尤其重要。第68頁(yè)/共287頁(yè)2.2.2網(wǎng)頁(yè)版式的尺寸和構(gòu)成要素網(wǎng)頁(yè)標(biāo)志網(wǎng)頁(yè)標(biāo)題導(dǎo)航條圖片多媒體色彩字體第69頁(yè)/共287頁(yè)2.2.3網(wǎng)頁(yè)版式設(shè)計(jì)原則網(wǎng)頁(yè)版式設(shè)計(jì)是網(wǎng)頁(yè)中的各種頁(yè)面元素進(jìn)行有機(jī)組合。所謂有機(jī)組合，通常指網(wǎng)頁(yè)版式形式與內(nèi)容的統(tǒng)一。采用哪種版式并不是設(shè)計(jì)者隨意決定的，不同的網(wǎng)站主題對(duì)網(wǎng)頁(yè)構(gòu)成元素編排方式的要求是不同的。設(shè)計(jì)網(wǎng)頁(yè)版式時(shí)，應(yīng)避免只追求花哨的表現(xiàn)形式，或者過于強(qiáng)調(diào)獨(dú)特的設(shè)計(jì)形式而脫離內(nèi)容。第70頁(yè)/共287頁(yè)2.2.4網(wǎng)頁(yè)的版式設(shè)計(jì)風(fēng)格骨骼型滿版型分割型中軸型曲線型傾斜型對(duì)稱型焦點(diǎn)型三角型自由型第71頁(yè)/共287頁(yè)2.3學(xué)習(xí)任務(wù)：色彩的基本理論及其視覺效果色彩在藝術(shù)設(shè)計(jì)中具有重要的地位。作為藝術(shù)設(shè)計(jì)，不管是數(shù)萬(wàn)年前的原始壁畫創(chuàng)作，還是現(xiàn)代的產(chǎn)品設(shè)計(jì)、平面設(shè)計(jì)、室內(nèi)裝潢都離不開色彩，網(wǎng)頁(yè)設(shè)計(jì)也是這樣。網(wǎng)頁(yè)中的背景、文字、LOGO、導(dǎo)航、圖片等元素應(yīng)該采用什么樣的色彩，如何進(jìn)行搭配才能更好的表達(dá)出設(shè)計(jì)的預(yù)想對(duì)于網(wǎng)頁(yè)設(shè)計(jì)者來(lái)說(shuō)尤其重要。第72頁(yè)/共287頁(yè)2.3.1色彩的基本理論光譜中的大部分顏色是由三種基本色光按不同的比例混合而成的，這三種基本色光的顏色是紅（Red）、綠（Green）、藍(lán)（Blue）三原色光。這三種光以相同的比例混合、且達(dá)到一定的強(qiáng)度，就呈現(xiàn)白色（白光）；若三種光的強(qiáng)度均為零，就是黑色，這就是加色法原理。色彩可分為有彩色和無(wú)彩色兩大類。第73頁(yè)/共287頁(yè)2.3.2色彩的視覺效果色彩的心理感覺色彩的冷暖色彩的軟硬色彩的進(jìn)退色彩的大小第74頁(yè)/共287頁(yè)2.4學(xué)習(xí)任務(wù)：網(wǎng)頁(yè)中的色彩及配色在藝術(shù)設(shè)計(jì)中，色彩的視覺沖擊效力是最強(qiáng)的，一個(gè)網(wǎng)頁(yè)首先呈現(xiàn)給瀏覽者的是網(wǎng)頁(yè)的色彩。正是由于網(wǎng)頁(yè)色彩的重要性，設(shè)計(jì)網(wǎng)頁(yè)時(shí)，網(wǎng)頁(yè)的配色顯得尤為重要。第75頁(yè)/共287頁(yè)2.4.1網(wǎng)頁(yè)色彩在網(wǎng)頁(yè)設(shè)計(jì)中，常用到的色彩模式是RGB模式。是通過對(duì)紅（Red）、綠（Green）、藍(lán)（Blue）三個(gè)顏色通道的變化以及它們相互之間的疊加來(lái)得到各式各樣的顏色，RGB即是代表紅、綠、藍(lán)三個(gè)通道的顏色，這個(gè)標(biāo)準(zhǔn)幾乎包括了人類視力所能感知的所有顏色。第76頁(yè)/共287頁(yè)2.4.2網(wǎng)頁(yè)配色原理

網(wǎng)頁(yè)色彩搭配設(shè)計(jì)時(shí)，首先要考慮網(wǎng)站本身特點(diǎn)，然后結(jié)合一定的藝術(shù)規(guī)律，這樣才能設(shè)計(jì)出特色鮮明的網(wǎng)頁(yè)。色彩的適合性色彩的鮮明性色彩的獨(dú)特性第77頁(yè)/共287頁(yè)2.4.3網(wǎng)頁(yè)配色技巧

彩色的記憶效果是黑白的3.5倍。也就是說(shuō)，在一般情況下，彩色頁(yè)面較黑白頁(yè)面更加吸引人。通常的做法是：主要內(nèi)容文字用非彩色(黑色)，邊框、背景、圖片用彩色。彩色搭配的技巧非彩色搭配第78頁(yè)/共287頁(yè)2.5實(shí)訓(xùn)——瀏覽著名網(wǎng)站并歸納版式設(shè)計(jì)與色彩搭配技巧1．實(shí)訓(xùn)目的掌握網(wǎng)頁(yè)風(fēng)格確定方法熟悉網(wǎng)站色彩搭配技巧掌握網(wǎng)頁(yè)版式設(shè)計(jì)及網(wǎng)頁(yè)基本元素搭配技巧2．實(shí)訓(xùn)要求登陸優(yōu)秀設(shè)計(jì)網(wǎng)的酷站欣賞欄目（/coolsite.asp），瀏覽優(yōu)秀網(wǎng)站，分析網(wǎng)頁(yè)的版式設(shè)計(jì)和色彩搭配技巧，總結(jié)在設(shè)計(jì)網(wǎng)頁(yè)時(shí)應(yīng)該如何突出網(wǎng)站主題。第79頁(yè)/共287頁(yè)謝謝！第80頁(yè)/共287頁(yè)第三章DreamweaverCS3入門

第81頁(yè)/共287頁(yè)第三章DreamweaverCS3入門

本章學(xué)習(xí)要點(diǎn)：DreamweaverCS3的主要功能和特點(diǎn)DreamweaverCS3的操作環(huán)境利用DreamweaverCS3制作網(wǎng)頁(yè)利用DreamweaverCS3創(chuàng)建并管理站點(diǎn)第82頁(yè)/共287頁(yè)3.1學(xué)習(xí)任務(wù)：全面認(rèn)識(shí)DreamweaverCS3AdobeDreamweaverCS3是網(wǎng)頁(yè)設(shè)計(jì)與制作領(lǐng)域中用戶最多、應(yīng)用最廣、功能最強(qiáng)的軟件。它將可視布局工具、應(yīng)用程序開發(fā)功能和代碼編輯支持組合在一起，其功能強(qiáng)大，使得各個(gè)層次的開發(fā)人員和設(shè)計(jì)人員都能夠快速創(chuàng)建吸引人的、基于標(biāo)準(zhǔn)的網(wǎng)站和應(yīng)用程序。Dreamweaver與用于制作網(wǎng)頁(yè)矢量動(dòng)畫的Flash、制作網(wǎng)頁(yè)圖像的Fireworks并稱為“網(wǎng)頁(yè)制作三劍客”。第83頁(yè)/共287頁(yè)3.1.1DreamweaverCS3的主要功能支持最新的Web技術(shù)供兩個(gè)選擇：既可以在直觀的可視布局界面中工作，又可以在簡(jiǎn)化的編碼環(huán)境中工作借助AdobeDreamweaverCS3軟件，用戶可以快速、輕松地完成設(shè)計(jì)、開發(fā)與維護(hù)網(wǎng)站和Web應(yīng)用程序的全過程新增功能：Ajax的Spry框架、Spry構(gòu)件、Spry效果、高級(jí)PhotoshopCS3集成、瀏覽器兼容性檢查、AdobeCSSAdvisor、CSS布局、管理SS、AdobeDeviceCentral、AdobeBridgeCS3第84頁(yè)/共287頁(yè)3.2學(xué)習(xí)任務(wù)：DreamweaverCS3操作環(huán)境介紹

DreamweaverCS3工作第85頁(yè)/共287頁(yè)3.3案例1創(chuàng)建并保存簡(jiǎn)單HTML文檔〖學(xué)習(xí)目標(biāo)〗在DreamweaverCS3中創(chuàng)建一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)并保存?！贾R(shí)要點(diǎn)〗創(chuàng)建、保存、預(yù)覽網(wǎng)頁(yè)文件的方法；頁(yè)面的屬性設(shè)置。效果如圖所示。第86頁(yè)/共287頁(yè)3.4學(xué)習(xí)任務(wù)：本地站點(diǎn)的規(guī)劃與創(chuàng)建利用Dreamweaver制作網(wǎng)頁(yè)步驟：規(guī)劃站點(diǎn)創(chuàng)建站點(diǎn)利用站點(diǎn)對(duì)文件進(jìn)行管理第87頁(yè)/共287頁(yè)3.4.1站點(diǎn)的概念所謂站點(diǎn)，可以看作是一系列文檔的組合，這些文檔通過各種鏈接建立邏輯關(guān)聯(lián)。用戶在建立網(wǎng)站前必須要建立站點(diǎn)，修改某網(wǎng)頁(yè)內(nèi)容時(shí)，也必須打開站點(diǎn)，然后修改站點(diǎn)內(nèi)的網(wǎng)頁(yè)。第88頁(yè)/共287頁(yè)3.4.2規(guī)劃站點(diǎn)

站點(diǎn)的規(guī)劃：包括站點(diǎn)的目錄結(jié)構(gòu)、鏈接結(jié)構(gòu)、模板和庫(kù)的使用。網(wǎng)站的目錄結(jié)構(gòu)是網(wǎng)站組織和存放站內(nèi)所有文檔的目錄設(shè)置情況。網(wǎng)站的鏈接結(jié)構(gòu)是指頁(yè)面之間的相互鏈接關(guān)系模板和庫(kù)，可以在不同的文檔中重用頁(yè)面布局和頁(yè)面元素，給網(wǎng)頁(yè)的維護(hù)帶來(lái)很大的方便。第89頁(yè)/共287頁(yè)3.4.3創(chuàng)建本地站點(diǎn)本地站點(diǎn)實(shí)際上是位于本地計(jì)算機(jī)中指定目錄下的一組頁(yè)面文件及相關(guān)支持文件。每個(gè)網(wǎng)站都需要有自己的本地站點(diǎn)。DreamweaverCS3提供了創(chuàng)建站點(diǎn)的向?qū)?，使得初學(xué)者能快速正確地完成站點(diǎn)的創(chuàng)建。第90頁(yè)/共287頁(yè)3.4.3管理站點(diǎn)編輯站點(diǎn)復(fù)制站點(diǎn)刪除站點(diǎn)導(dǎo)出與導(dǎo)入站點(diǎn)第91頁(yè)/共287頁(yè)謝謝！第92頁(yè)/共287頁(yè)第四章網(wǎng)頁(yè)文本和圖像

第93頁(yè)/共287頁(yè)第四章網(wǎng)頁(yè)文本和圖像本章學(xué)習(xí)要點(diǎn)：添加普通文本、特殊文本的方法文本格式的設(shè)置插入圖像的方法圖像的屬性設(shè)置及優(yōu)化圖文混排的設(shè)置方第94頁(yè)/共287頁(yè)4.1案例1制作文本網(wǎng)頁(yè)〖學(xué)習(xí)目標(biāo)〗利用DreamweaverCS3，創(chuàng)建并保存一個(gè)簡(jiǎn)單的文本網(wǎng)頁(yè)文件?！贾R(shí)要點(diǎn)〗在網(wǎng)頁(yè)中添加文本的三種方法；對(duì)網(wǎng)頁(yè)文本的一般編輯操作。效果如圖所示：第95頁(yè)/共287頁(yè)操作步驟：在新建文檔中直接輸入文本復(fù)制添加其它文檔中的文本導(dǎo)入其它文檔中的文本設(shè)置文本屬性第96頁(yè)/共287頁(yè)4.2案例2修飾文本網(wǎng)頁(yè)〖學(xué)習(xí)目標(biāo)〗掌握在DreamweaverCS3中打開網(wǎng)頁(yè)文檔的方法，掌握在網(wǎng)頁(yè)中使用列表和插入其他文本對(duì)象的方法?！贾R(shí)要點(diǎn)〗設(shè)置列表；添加特殊符號(hào)；添加水平線；添加日期等。案例效果所示。第97頁(yè)/共287頁(yè)操作步驟：打開文檔設(shè)置項(xiàng)目符號(hào)或編號(hào)插入特殊符號(hào)、水平線和日期第98頁(yè)/共287頁(yè)4.3學(xué)習(xí)任務(wù)：文本標(biāo)簽要對(duì)選定的文本進(jìn)行格式化，不僅可以利用“屬性”面板進(jìn)行設(shè)置，在“代碼”視圖下利用HTML標(biāo)簽也可以方便地對(duì)其進(jìn)行設(shè)置。第99頁(yè)/共287頁(yè)4.3.1文本標(biāo)簽及源代碼分析標(biāo)簽類屬作用<p>分段標(biāo)簽將標(biāo)識(shí)的內(nèi)容設(shè)為一個(gè)段落<br>換行標(biāo)簽強(qiáng)制換行，但不換段落<pre>預(yù)格式化標(biāo)簽保留文本的原始排版格式<hr>水平線標(biāo)簽水平線<hn>標(biāo)題標(biāo)簽將標(biāo)識(shí)的文本設(shè)為標(biāo)題，共分六級(jí)，文本逐級(jí)變小<font>文字格式控制標(biāo)簽設(shè)置標(biāo)識(shí)的文本的字體、大小、顏色等<b>特定文字樣式標(biāo)簽定義黑體文字<strong>用于特別強(qiáng)調(diào)的文本，顯示為粗體字<i>定義斜體文字<em>用于強(qiáng)調(diào)的文本，一般顯示為斜體字<u>定義文字下劃線<big>定義大號(hào)文字<small>定義小號(hào)文字<sup>定義上標(biāo)文字<sub>定義下標(biāo)文字<ul>列表標(biāo)簽無(wú)序列表，每個(gè)列表項(xiàng)前有前導(dǎo)符號(hào)，如圓形<ol>有序列表，每個(gè)列表項(xiàng)前有序號(hào)，如阿拉伯?dāng)?shù)字<li>將標(biāo)識(shí)的文本設(shè)為一個(gè)列表項(xiàng)文本標(biāo)簽名稱及功能第100頁(yè)/共287頁(yè)設(shè)置標(biāo)簽的相關(guān)屬性參數(shù)，除了可以在“代碼”窗口中直接鍵入以外，還可以通過“標(biāo)簽檢查器”面板設(shè)置。4.3.2在標(biāo)簽選擇器中設(shè)置文本標(biāo)簽的屬性選擇“窗口→標(biāo)簽檢查器”命令，打開“標(biāo)簽”面板，并且切換到“屬性”選項(xiàng)卡中，列出了選定列表項(xiàng)可以設(shè)置的所有屬性，用戶根據(jù)情況設(shè)置或修改相應(yīng)的標(biāo)簽屬性。第101頁(yè)/共287頁(yè)4.4學(xué)習(xí)任務(wù)：網(wǎng)頁(yè)圖像與網(wǎng)頁(yè)圖像處理工具在網(wǎng)頁(yè)中使用圖像可以使網(wǎng)頁(yè)生動(dòng)、美觀、更具視覺沖擊力。了解圖像的格式及相應(yīng)的設(shè)計(jì)工具有助于在網(wǎng)頁(yè)中恰到好處的使用圖像。第102頁(yè)/共287頁(yè)4.4.1網(wǎng)頁(yè)中常見的圖像格式GIF（圖形交換格式）：GIF文件最多使用256種顏色，最適合顯示色調(diào)不連續(xù)或具有大面積單一顏色的圖像。JPEG（聯(lián)合圖像專家組）：JPEG文件格式是用于攝影或連續(xù)色調(diào)圖像的較好格式。PNG（可移植網(wǎng)絡(luò)圖形）：PNG文件格式是一種替代GIF格式的無(wú)專利權(quán)限制的格式，它包括對(duì)索引色、灰度、真彩色圖像以及alpha通道透明度的支持。第103頁(yè)/共287頁(yè)4.4.2常用網(wǎng)頁(yè)圖像制作軟件1．Photoshop支持大量圖像格式處理圖像尺寸和分辨率圖層功能繪畫功能選取功能色調(diào)和色彩功能旋轉(zhuǎn)和變形支持多種顏色模式開放式結(jié)構(gòu)第104頁(yè)/共287頁(yè)4.4.2常用網(wǎng)頁(yè)圖像制作軟件2．Fireworks同時(shí)編輯位圖和矢量圖形的功能大圖切割功能制作具有動(dòng)態(tài)效果的切圖功能制作動(dòng)畫功能文字工具及文字特效功能第105頁(yè)/共287頁(yè)4.5案例3制作圖像網(wǎng)頁(yè)〖學(xué)習(xí)目標(biāo)〗掌握在網(wǎng)頁(yè)中插入圖像、設(shè)置圖像屬性及編輯圖像等方法?！贾R(shí)要點(diǎn)〗在網(wǎng)頁(yè)中插入圖像；圖像的屬性設(shè)置；圖像的編輯；圖像占位符的使用；插入鼠標(biāo)經(jīng)過圖像等。插入圖像的網(wǎng)頁(yè)效果如圖所示。第106頁(yè)/共287頁(yè)操作步驟：插入圖像設(shè)置圖像屬性編輯圖像裁剪圖像重新取樣圖像調(diào)整圖像亮度和對(duì)比度銳化圖像優(yōu)化圖像插入圖像占位符插入鼠標(biāo)經(jīng)過圖像第107頁(yè)/共287頁(yè)4.6案例4制作圖文混排網(wǎng)頁(yè)〖學(xué)習(xí)目標(biāo)〗掌握制作圖文混排網(wǎng)頁(yè)的方法和技能。〖知識(shí)要點(diǎn)〗調(diào)整圖像和文本的相當(dāng)位置。效果如圖所示。當(dāng)網(wǎng)頁(yè)中既包含文本，又包含圖像時(shí)，設(shè)置好文本和圖像的排版格式對(duì)網(wǎng)頁(yè)的整體效果至關(guān)重要

第108頁(yè)/共287頁(yè)謝謝！第109頁(yè)/共287頁(yè)第五章網(wǎng)頁(yè)超鏈接

第110頁(yè)/共287頁(yè)第五章網(wǎng)頁(yè)超鏈接本章學(xué)習(xí)要點(diǎn)：超鏈接的種類和路徑各類超鏈接的創(chuàng)建圖像地圖的創(chuàng)建第111頁(yè)/共287頁(yè)5.1案例1為網(wǎng)頁(yè)創(chuàng)建超鏈接〖學(xué)習(xí)目標(biāo)〗認(rèn)識(shí)超鏈接，掌握創(chuàng)建超鏈接的方法。〖知識(shí)要點(diǎn)〗超鏈接的分類；路徑的設(shè)置；創(chuàng)建超鏈接的方法。案例效果如圖所示。第112頁(yè)/共287頁(yè)5.1.1超鏈接概述超鏈接是網(wǎng)頁(yè)最重要、最根本的元素之一。超鏈接把各個(gè)網(wǎng)頁(yè)鏈接在一起后，才能真正構(gòu)成一個(gè)網(wǎng)站。通過點(diǎn)擊網(wǎng)頁(yè)上的超鏈接，瀏覽者可以輕松地實(shí)現(xiàn)網(wǎng)頁(yè)之間的轉(zhuǎn)換、下載文件或收發(fā)郵件等。第113頁(yè)/共287頁(yè)1．認(rèn)識(shí)超鏈接所謂超鏈接是指從某個(gè)網(wǎng)頁(yè)元素指向一個(gè)目標(biāo)的連接關(guān)系，這個(gè)目標(biāo)可以是另一個(gè)網(wǎng)頁(yè)，也可以是相同網(wǎng)頁(yè)上的不同位置，還可以是一個(gè)圖片、電子郵件地址或文件，甚至是一個(gè)應(yīng)用程序。超鏈接有以下不同的分類方式：按照鏈接路徑的不同，網(wǎng)頁(yè)中超鏈接主要分為內(nèi)部鏈接、局部鏈接和外部超鏈接。按照目標(biāo)對(duì)象的不同，網(wǎng)頁(yè)中的鏈接可以分為錨點(diǎn)鏈接、電子郵件鏈接、腳本超鏈接、空鏈接等。第114頁(yè)/共287頁(yè)2．超鏈接路徑建超鏈接時(shí)，超鏈接路徑的設(shè)置非常重要，如果設(shè)置不正確，將不能正確完成跳轉(zhuǎn)功能。路徑分為絕對(duì)路徑和相對(duì)路徑兩大類：絕對(duì)路徑:完整地描述文件存儲(chǔ)位置的路徑就是絕對(duì)路徑,如：D:\tu\Rose.jpg。相對(duì)路徑,是指其他文檔相對(duì)于某文檔的存儲(chǔ)路徑。在同一個(gè)站點(diǎn)內(nèi)建立鏈接通常采用相對(duì)路徑。如文檔結(jié)構(gòu)圖。第115頁(yè)/共287頁(yè)5.1.2創(chuàng)建超鏈接在DreamweaverCS3中可以通過菜單命令、工具欄按鈕甚至直接拖曳創(chuàng)建超鏈接，方法簡(jiǎn)單、方便。創(chuàng)建超鏈接的目標(biāo)文件不僅可以是網(wǎng)頁(yè)文件，還可以是其他類型文件，如圖像文件，音頻視頻文件，文本文件等，如果目標(biāo)文件可以用默認(rèn)瀏覽器打開，則點(diǎn)擊超鏈接文本后會(huì)在瀏覽器中打開相應(yīng)的目標(biāo)文件。如果目標(biāo)文件需要其他應(yīng)用程序打開，則點(diǎn)擊超鏈接文本后會(huì)彈出“下載文件”對(duì)話框，要求用戶下載后再用相應(yīng)程序打開。第116頁(yè)/共287頁(yè)5.2案例2創(chuàng)建各類超鏈接〖學(xué)習(xí)目標(biāo)〗掌握創(chuàng)建錨點(diǎn)超鏈接、E-mail鏈接、空超鏈接和腳本超鏈接的方法?！贾R(shí)要點(diǎn)〗錨點(diǎn)超鏈接；E-mail鏈接；空超鏈接和腳本超鏈接的功能和創(chuàng)建方法。案例效果如圖所示。第117頁(yè)/共287頁(yè)創(chuàng)建超鏈接的種類：創(chuàng)建錨點(diǎn)鏈接創(chuàng)建E-mail鏈接創(chuàng)建空鏈接創(chuàng)建腳本鏈接第118頁(yè)/共287頁(yè)5.3案例3創(chuàng)建圖像地圖學(xué)習(xí)目標(biāo)〗掌握創(chuàng)建圖像地圖的方法?！贾R(shí)要點(diǎn)〗圖像地圖的功能；圖像地圖的創(chuàng)建等。案例效果如圖5-17所示。在Dreamweaver中不僅可以方便地為一幅圖像添加超鏈接，還可以為圖像中不同的區(qū)域創(chuàng)建不同的超鏈接，即圖像地圖。所謂圖像地圖是指已被分為多個(gè)區(qū)域（稱為熱點(diǎn)）的圖像。當(dāng)用戶單擊某個(gè)熱點(diǎn)時(shí)，會(huì)顯示其鏈接的目標(biāo)文件。第119頁(yè)/共287頁(yè)謝謝！第120頁(yè)/共287頁(yè)第六章表格第121頁(yè)/共287頁(yè)第六章表格本章學(xué)習(xí)要點(diǎn)：表格的插入表格的編輯表格屬性的設(shè)置整理表格和單元格內(nèi)容的方法表格的HTML標(biāo)簽表格的布局模式第122頁(yè)/共287頁(yè)6.1案例1使用表格制作學(xué)生成績(jī)單〖學(xué)習(xí)目標(biāo)〗通過案例學(xué)習(xí)，掌握表格的插入、表格的屬性設(shè)置及對(duì)表格的編輯?！贾R(shí)要點(diǎn)〗插入表格；表格的屬性設(shè)置；表格的拆分和合并等。案例效果如圖所示。第123頁(yè)/共287頁(yè)操作步驟：

在頁(yè)面中插入表格設(shè)置表格屬性編輯表格選擇表格合并或拆分單元格添加或刪除行和列第124頁(yè)/共287頁(yè)6.2學(xué)習(xí)任務(wù)：表格標(biāo)簽掌握表格標(biāo)簽的功能和應(yīng)用，能使用標(biāo)簽選擇器設(shè)置表格的屬性。表格標(biāo)簽主要有<table>、<caption>、<tr>、<td>和<th>。第125頁(yè)/共287頁(yè)6.2.1使用表格標(biāo)簽制作網(wǎng)頁(yè)表格<

html><head><title>無(wú)標(biāo)題文檔</title></head><body><tablewidth="364"height="140"border="1"cellpadding="0"bordercolor="#6600FF"bgcolor="#FFFF66"><tr><tdwidth="113"><divalign="center"class="STYLE3">設(shè)計(jì)人員</div></td><tdwidth="119"><divalign="center"class="STYLE3">工齡</div></td><tdwidth="118"><divalign="center"class="STYLE3">聯(lián)系電話</div></td></tr><tr><td><divalign="center"class="STYLE2">張玉華</div></td><td><divalign="center"class="STYLE2">10</div></td><td><divalign="center"class="STYLE2">lt;/div></td></tr><tr><td><divalign="center"class="STYLE2">李秋月</div></td><td><divalign="center"class="STYLE2">12</div></td><td><divalign="center"class="STYLE2">lt;/div></td></tr></table></body></html>代碼解析：上面的HTML代碼確定了插入的表格是3行3列的表格，表格“邊框”為1，“背景顏色”為#FFFF66，“邊框顏色”為#6600FF，單元格中輸入的文本居中對(duì)齊。第126頁(yè)/共287頁(yè)6.2.2在標(biāo)簽選擇器中設(shè)置表格的屬性屬性含義align表格的對(duì)齊方式，分為center（居中）、left（左對(duì)齊）、right（右對(duì)齊）bgcolor設(shè)置表格的背景顏色border設(shè)置表格的邊框粗細(xì)cellpadding設(shè)置表格的填充cellspacing設(shè)置表格的間距frameabove，只顯示上邊框below，只顯示下邊框border，時(shí)顯示上下左右邊框box，顯示上下左右邊框hsides，顯示上下邊框lhs，只顯示左邊框rhs，只顯示右邊框void，不顯示邊框vsides，只顯示左右邊框rulesnone，表格內(nèi)部所有線框不顯示groups，表格內(nèi)部橫向和縱向線框不顯示rows，只顯示表格內(nèi)部橫向線框cols，只顯示表格內(nèi)部縱向線框all，顯示表格所有內(nèi)部線框width設(shè)置表格的寬度表格的屬性及含義

第127頁(yè)/共287頁(yè)6.3案例2利用表格布局網(wǎng)站頁(yè)面〖學(xué)習(xí)目標(biāo)〗掌握使用表格進(jìn)行網(wǎng)頁(yè)布局的方法，根據(jù)網(wǎng)頁(yè)內(nèi)容所需，能夠熟練地在頁(yè)面中導(dǎo)入表格數(shù)據(jù)，并能對(duì)表格數(shù)據(jù)進(jìn)行排序，熟悉導(dǎo)出表格數(shù)據(jù)的方法?！贾R(shí)要點(diǎn)〗用表格布局網(wǎng)頁(yè)；導(dǎo)入、導(dǎo)出表格數(shù)據(jù)；排序表格等。效果如圖所示。第128頁(yè)/共287頁(yè)操作步驟：使用表格進(jìn)行網(wǎng)頁(yè)布局導(dǎo)入和導(dǎo)出表格數(shù)據(jù)1．導(dǎo)入MicrosoftExcel表格2．導(dǎo)出表格導(dǎo)入和導(dǎo)出表格式數(shù)據(jù)排序表格第129頁(yè)/共287頁(yè)6.4案例3利用表格的布局模式實(shí)現(xiàn)復(fù)雜的頁(yè)面布局〖學(xué)習(xí)目標(biāo)〗掌握利用表格布局模式進(jìn)行頁(yè)面布局的技能和方法。〖知識(shí)要點(diǎn)〗布局模式下的布局表格和布局單元格等。案例效果如圖所示。第130頁(yè)/共287頁(yè)操作步驟：在表格布局模式下繪制表格或單元格1．表格布局模式2．繪制布局表格3．繪制布局單元格4．退出表格布局模式利用布局表格布局網(wǎng)頁(yè)1．布局網(wǎng)頁(yè)頂部2．布局網(wǎng)頁(yè)主體部分3．布局網(wǎng)頁(yè)底部4．美化網(wǎng)頁(yè)布局第131頁(yè)/共287頁(yè)謝謝！第132頁(yè)/共287頁(yè)第七章框架第133頁(yè)/共287頁(yè)第七章框架本章學(xué)習(xí)要點(diǎn)：框架和框架集框架與框架集的屬性設(shè)置用框架布局網(wǎng)頁(yè)的方法框架標(biāo)簽框架的嵌套使用浮動(dòng)框架的使用第134頁(yè)/共287頁(yè)7.1案例1利用框架布局網(wǎng)頁(yè)〖學(xué)習(xí)目標(biāo)〗認(rèn)識(shí)框架和框架集，掌握創(chuàng)建、保存框架和框架集，用框架布局頁(yè)面。〖知識(shí)要點(diǎn)〗創(chuàng)建框架和框架集；保存框架和框架集；用框架布局網(wǎng)頁(yè)；向框架中插入網(wǎng)頁(yè)內(nèi)容等。案例效果如圖所示。第135頁(yè)/共287頁(yè)7.1.1認(rèn)識(shí)框架與框架集框架是進(jìn)行網(wǎng)頁(yè)布局的工具之一。一個(gè)網(wǎng)站往往是由多個(gè)網(wǎng)頁(yè)組成的，如果網(wǎng)站中的所有網(wǎng)頁(yè)是同一個(gè)布局，并且在相同的位置有相同的網(wǎng)頁(yè)元素，通過導(dǎo)航條的鏈接只更改網(wǎng)頁(yè)中主要區(qū)域中的內(nèi)容，這時(shí)就要使用框架來(lái)布局網(wǎng)頁(yè)了?？蚣芫W(wǎng)頁(yè)由框架集和框架兩部分組成?？蚣芗窃谝粋€(gè)文檔內(nèi)定義一組框架結(jié)構(gòu)的HTML網(wǎng)頁(yè)?？蚣芸梢院?jiǎn)單地理解為是對(duì)瀏覽器窗口進(jìn)行劃分后的子窗口，每一個(gè)子窗口是一個(gè)框架，可以在框架中插入圖片、輸入文本或者在框架中打開一個(gè)獨(dú)立的網(wǎng)頁(yè)文檔內(nèi)容。第136頁(yè)/共287頁(yè)框架與框架集之間的關(guān)系框架框架框架框架集第137頁(yè)/共287頁(yè)操作步驟：創(chuàng)建框架和框架集保存框架和框架集保存框架集和全部框架單獨(dú)保存框架集或框架向框架中添加內(nèi)容第138頁(yè)/共287頁(yè)7.2案例2制作復(fù)雜的框架網(wǎng)頁(yè)〖學(xué)習(xí)目標(biāo)〗通過學(xué)習(xí)利用框架來(lái)布局較復(fù)雜的網(wǎng)頁(yè)，掌握框架和框架集的編輯、設(shè)置框架和框架集的屬性、在框架中插入表格、鏈接框架等操作?！贾R(shí)要點(diǎn)〗編輯框架和框架集；設(shè)置框架和框架集屬性；鏈接框架；在框架中插入表格等。案例效果如圖所示。第139頁(yè)/共287頁(yè)操作步驟：選擇框架在“框架”面板中選擇在“設(shè)計(jì)”視圖中選擇單個(gè)框架拆分框架設(shè)置框架和框架集屬性鏈接框架第140頁(yè)/共287頁(yè)7.3學(xué)習(xí)任務(wù)：框架標(biāo)簽進(jìn)一步理解和掌握框架標(biāo)簽的功能和屬性設(shè)置，通過框架頁(yè)面的“代碼”窗口，進(jìn)一步掌握框架標(biāo)簽的使用。制作的框架頁(yè)面第141頁(yè)/共287頁(yè)拆分窗口“拆分”視圖中，被選中的HTML代碼即為<frameset>框架集標(biāo)簽?？梢?，<frameset>標(biāo)簽是成對(duì)出現(xiàn)的，以<frameset>開始，以</frameset>結(jié)束。<frameset>標(biāo)簽代替了<body>標(biāo)簽，因此，框架標(biāo)簽不能包含在<body>標(biāo)簽中。第142頁(yè)/共287頁(yè)7.4案例3創(chuàng)建浮動(dòng)框架網(wǎng)頁(yè)〖學(xué)習(xí)目標(biāo)〗通過本案例的學(xué)習(xí)，掌握浮動(dòng)框架的插入，掌握通過浮動(dòng)框架顯示其他網(wǎng)頁(yè)內(nèi)容的操作方法?！贾R(shí)要點(diǎn)〗浮動(dòng)框架；通過浮動(dòng)框架顯示其他網(wǎng)頁(yè)內(nèi)容等。案例效果如圖所示。浮動(dòng)框架（iframe）是指在網(wǎng)頁(yè)文檔中，以框架形式顯示其他網(wǎng)頁(yè)文檔、主頁(yè)、公告板或記事本的功能，利用這一功能，可以在指定的位置以指定的大小顯示其他網(wǎng)頁(yè)文檔或站點(diǎn)，例如滾動(dòng)新聞等。使用“標(biāo)簽選擇器”可以將DreamweaverCS3標(biāo)簽庫(kù)中的標(biāo)簽插入到頁(yè)面中。

第143頁(yè)/共287頁(yè)謝謝！第144頁(yè)/共287頁(yè)第八章使用APDiv布局網(wǎng)頁(yè)

第145頁(yè)/共287頁(yè)第八章使用APDiv布局網(wǎng)頁(yè)

本章學(xué)習(xí)要點(diǎn)：APDiv的基本概念A(yù)PDiv的創(chuàng)建和基本操作APDiv與表格的相互轉(zhuǎn)換APDiv綜合應(yīng)用第146頁(yè)/共287頁(yè)8.1學(xué)習(xí)任務(wù)：APDiv基礎(chǔ)知識(shí)所謂APDiv，是指存放用DIV標(biāo)記描述的HTML內(nèi)容的容器，用來(lái)控制瀏覽器窗口中元素的位置、層次。在DreamweaverCS3環(huán)境下，可以利用APDiv靈活方便的進(jìn)行頁(yè)面布局。APDiv最主要的特性就是它是浮動(dòng)在網(wǎng)頁(yè)內(nèi)容之上的。也就是說(shuō)，可以在網(wǎng)頁(yè)上任意改變其位置，實(shí)現(xiàn)對(duì)APDiv的準(zhǔn)確定位。APDiv可以相互堆疊，通過定義APDiv的層次關(guān)系，可以方便實(shí)現(xiàn)文字陰影等效果；第147頁(yè)/共287頁(yè)8.1.2創(chuàng)建APDiv元素工具欄在Dreamweaver中可以通過“布局”工具欄方便的創(chuàng)建APDiv元素在菜單欄中，選擇“插入→布局”命令，可以展開“布局”工具欄。在“標(biāo)準(zhǔn)”模式下，和APDiv創(chuàng)建有關(guān)的是“插入Div標(biāo)簽”按鈕和“繪制APDiv”按鈕?！安迦隓iv標(biāo)簽”按鈕：?jiǎn)螕舸税粹o，在文檔中自動(dòng)插入一個(gè)APDiv元素。“繪制APDiv”按鈕：?jiǎn)螕舸税粹o，將鼠標(biāo)指針移到文檔窗口中，鼠標(biāo)指針變?yōu)槭譅睿聪率髽?biāo)并拖動(dòng)，可以繪制一個(gè)APDiv元素。第148頁(yè)/共287頁(yè)8.1.3APDiv元素的“屬性”面板APDiv“屬性”面板中各項(xiàng)含義如下：CSS-P元素：為選中的APDiv元素設(shè)置名稱。名稱由數(shù)字或字母組成，不能用特殊字符。每個(gè)APDiv元素的名稱是唯一的。左、上：分別設(shè)置APDiv元素左邊界和上邊界相對(duì)于頁(yè)面左邊界和上邊界的距離，默認(rèn)單位為像素（px）。也可以指定為pc（pica）、pt（點(diǎn)）、in（英寸）、mm（毫米）、厘米（cm）或%（百分比）。寬、高：分別設(shè)置APDiv元素高度和寬度，單位設(shè)置同“左”、“上”屬性。Z軸：設(shè)置APDiv元素的堆疊次序，該值越大，則表示其在越前端顯示。可見性：設(shè)置APDiv元素的顯示狀態(tài)。“可見性”右側(cè)下拉列表框包括四個(gè)可選項(xiàng)：default（缺?。哼x中該項(xiàng)，則不明確指定其可見性屬性，在大多數(shù)瀏覽器中，該APDiv會(huì)繼承其父級(jí)APDiv的可見性。inherit（繼承）：選擇該項(xiàng)，則繼承其父級(jí)APDiv的可見性。visible（可見）：選擇該項(xiàng)，則顯示APDiv及其中內(nèi)容，而不管其父級(jí)APDiv是否可見。hidden（隱藏）：選擇該項(xiàng)，則隱藏APDiv及其中內(nèi)容，而不管其父級(jí)APDiv是否可見。背景圖像：設(shè)置APDiv元素的背景圖像?？梢酝ㄟ^單擊“文件夾”按鈕選擇本地文件，也可以在文本框中直接輸入背景圖像文件的路徑確定其位置。背景顏色：設(shè)置APDiv的背景顏色，值為空表示背景為透明。類：可以將CSS樣式表應(yīng)用于APDiv。溢出：設(shè)置APDiv中的內(nèi)容超過其大小時(shí)的處理方法?！耙绯觥庇覀?cè)下拉列表框中包括四個(gè)可選項(xiàng)：visible（可見）：選擇該項(xiàng)，當(dāng)APDiv中內(nèi)容超過其大小時(shí)，APDiv會(huì)自動(dòng)向右或者向下擴(kuò)展。hidden（隱藏）：選擇該項(xiàng)，當(dāng)APDiv中內(nèi)容超過其大小時(shí)，APDiv的大小不變，也不會(huì)出現(xiàn)滾動(dòng)條，超出APDiv內(nèi)容不被顯示。scroll（滾動(dòng)）：選擇該項(xiàng)，無(wú)論APDiv中的內(nèi)容是否超出APDiv的大小，APDiv右端和下端都會(huì)顯示滾動(dòng)條。auto（自動(dòng)）：選擇該項(xiàng)，當(dāng)APDiv內(nèi)容超過其大小時(shí)，APDiv保持不變，在APDiv右端和下端都出現(xiàn)滾動(dòng)條，以使其中的內(nèi)容能通過拖動(dòng)滾動(dòng)條顯示。剪輯：設(shè)置APDiv可見區(qū)域大小。在“上”、“下”、“左”、“右”文本框中，可以指定APDiv可見區(qū)域上、下、左、右端相對(duì)于APDiv邊界距離。APDiv經(jīng)過剪輯后，只有指定的矩形區(qū)域才是可見的。第149頁(yè)/共287頁(yè)8.1.4AP元素面板“AP元素”面板各選項(xiàng)含義如下：防止重疊：選中此選項(xiàng)，可以