全套電子課件：網(wǎng)頁(yè)設(shè)計(jì)與制作-第四套

網(wǎng)頁(yè)設(shè)計(jì)與制作第一章網(wǎng)頁(yè)與網(wǎng)站的基礎(chǔ)知識(shí)網(wǎng)頁(yè)設(shè)計(jì)是一門綜合技術(shù)，在制作網(wǎng)頁(yè)之前應(yīng)該了解網(wǎng)頁(yè)的基礎(chǔ)知識(shí)，同時(shí)還應(yīng)掌握DreamweaverCS5.5設(shè)計(jì)平臺(tái)的工作界面結(jié)構(gòu)以及各個(gè)部分所能完成的基本功能。1.1網(wǎng)頁(yè)制作與網(wǎng)站建設(shè)基礎(chǔ)1.1.1靜態(tài)網(wǎng)頁(yè)介紹靜態(tài)網(wǎng)頁(yè)是標(biāo)準(zhǔn)的HTML文件，其文件的擴(kuò)展名一般為htm、html、shtml、xml等。靜態(tài)網(wǎng)頁(yè)工作原理圖1.1網(wǎng)頁(yè)制作與網(wǎng)站建設(shè)基礎(chǔ)1.1.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è)內(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ù)的支持，在網(wǎng)站制作和維護(hù)方面工作量較大；靜態(tài)網(wǎng)頁(yè)的交互性較差，在功能方面有較大的限制；靜態(tài)網(wǎng)頁(yè)頁(yè)面瀏覽速度迅速，過程無(wú)需連接數(shù)據(jù)庫(kù)。1.1網(wǎng)頁(yè)制作與網(wǎng)站建設(shè)基礎(chǔ)1.1.2動(dòng)態(tài)網(wǎng)頁(yè)介紹動(dòng)態(tài)網(wǎng)頁(yè)是指跟靜態(tài)網(wǎng)頁(yè)相對(duì)的一種網(wǎng)頁(yè)編程技術(shù)，是指網(wǎng)頁(yè)文件里包含了程序代碼，通過后臺(tái)數(shù)據(jù)庫(kù)與Web服務(wù)器的信息交互，由后臺(tái)數(shù)據(jù)庫(kù)提供實(shí)時(shí)數(shù)據(jù)更新和數(shù)據(jù)查詢服務(wù)。動(dòng)態(tài)網(wǎng)頁(yè)工作原理圖1.1網(wǎng)頁(yè)制作與網(wǎng)站建設(shè)基礎(chǔ)1.1.2動(dòng)態(tài)網(wǎng)頁(yè)介紹動(dòng)態(tài)網(wǎng)頁(yè)的特點(diǎn)動(dòng)態(tài)Web具有交互性，頁(yè)面消息可以根據(jù)需求或用戶的

瀏覽狀況，實(shí)現(xiàn)與用戶的交流和頁(yè)面信息的自動(dòng)更新。動(dòng)態(tài)Web具有Web數(shù)據(jù)庫(kù)支持和遠(yuǎn)程動(dòng)態(tài)維護(hù)功能。動(dòng)態(tài)Web的創(chuàng)建技術(shù)比較復(fù)雜，且對(duì)服務(wù)器的處理能力要求也比較高。動(dòng)態(tài)Web一般使用數(shù)據(jù)庫(kù)來存儲(chǔ)信息，它擔(dān)負(fù)著一個(gè)文件服務(wù)器角色。1.1網(wǎng)頁(yè)制作與網(wǎng)站建設(shè)基礎(chǔ)1.1.3常見網(wǎng)站類型1.個(gè)人網(wǎng)站個(gè)人網(wǎng)站是以個(gè)人名義開發(fā)創(chuàng)建的具有較強(qiáng)個(gè)性化的網(wǎng)站，一般是個(gè)人為了興趣愛好或展開個(gè)人目的而創(chuàng)建的，具有較強(qiáng)的個(gè)性化特色，帶有很明顯的個(gè)人色彩，無(wú)論從內(nèi)容、風(fēng)格、樣式上都形色各異。1.1網(wǎng)頁(yè)制作與網(wǎng)站建設(shè)基礎(chǔ)1.1.3常見網(wǎng)站類型2.企業(yè)類網(wǎng)站企業(yè)網(wǎng)站，就是企業(yè)在互聯(lián)網(wǎng)上進(jìn)行網(wǎng)絡(luò)建設(shè)和形象宣傳的平臺(tái)。1.1網(wǎng)頁(yè)制作與網(wǎng)站建設(shè)基礎(chǔ)1.1.3常見網(wǎng)站類型3.機(jī)構(gòu)類網(wǎng)站機(jī)構(gòu)網(wǎng)站通常指機(jī)關(guān)、非營(yíng)利性機(jī)構(gòu)或相關(guān)社團(tuán)組織建立的網(wǎng)站，網(wǎng)站的內(nèi)容多以機(jī)構(gòu)或社團(tuán)的形象宣傳和服務(wù)為主。1.1網(wǎng)頁(yè)制作與網(wǎng)站建設(shè)基礎(chǔ)1.1.3常見網(wǎng)站類型4.娛樂休閑類網(wǎng)站隨著互聯(lián)網(wǎng)的飛速發(fā)展，不僅涌現(xiàn)出了很多個(gè)人網(wǎng)站和商業(yè)網(wǎng)站，同時(shí)也產(chǎn)生了很多娛樂休閑類網(wǎng)站。這些網(wǎng)站為廣大網(wǎng)民提供了娛樂休閑的場(chǎng)所。1.1網(wǎng)頁(yè)制作與網(wǎng)站建設(shè)基礎(chǔ)1.1.3常見網(wǎng)站類型5.行業(yè)信息類網(wǎng)站能夠滿足某一特定領(lǐng)域上網(wǎng)人群及其特定需要的網(wǎng)站叫做行業(yè)信息類網(wǎng)站。1.1網(wǎng)頁(yè)制作與網(wǎng)站建設(shè)基礎(chǔ)1.1.3常見網(wǎng)站類型6.購(gòu)物類網(wǎng)站隨著網(wǎng)絡(luò)的普及和人們生活水平的提高，網(wǎng)上購(gòu)物已成為一種時(shí)尚，豐富多彩的網(wǎng)上資源，價(jià)格實(shí)惠的打折商品、服務(wù)優(yōu)良送貨上門的購(gòu)物方式，其已成為人們休閑、購(gòu)物兩不誤的首選方式。1.1網(wǎng)頁(yè)制作與網(wǎng)站建設(shè)基礎(chǔ)1.1.3常見網(wǎng)站類型7.門戶類網(wǎng)站門戶類網(wǎng)站將無(wú)數(shù)信息整合、分類，為上網(wǎng)者打開方便之門，絕大多數(shù)網(wǎng)民通過門戶類網(wǎng)站尋找自己感興趣的信息資源。1.2網(wǎng)頁(yè)布局設(shè)計(jì)與色彩搭配1.2.1網(wǎng)頁(yè)版面布局的原則和方法1.網(wǎng)頁(yè)版面布局的原則（1）重點(diǎn)突出（2）平衡協(xié)調(diào)（3）圖文并茂（4）簡(jiǎn)潔清晰1.2網(wǎng)頁(yè)布局設(shè)計(jì)與色彩搭配1.2.1網(wǎng)頁(yè)版面布局的原則和方法2.網(wǎng)頁(yè)版面布局的方法（1）手繪布局（2）軟件繪圖布局1.2網(wǎng)頁(yè)布局設(shè)計(jì)與色彩搭配1.2.2網(wǎng)頁(yè)布局的結(jié)構(gòu)形式1.傳統(tǒng)“T”型布局1.2網(wǎng)頁(yè)布局設(shè)計(jì)與色彩搭配1.2.2網(wǎng)頁(yè)布局的結(jié)構(gòu)形式2.上下對(duì)照式布局1.2網(wǎng)頁(yè)布局設(shè)計(jì)與色彩搭配1.2.2網(wǎng)頁(yè)布局的結(jié)構(gòu)形式3.“上中下”“三”字布局1.2網(wǎng)頁(yè)布局設(shè)計(jì)與色彩搭配1.2.2網(wǎng)頁(yè)布局的結(jié)構(gòu)形式4.左右對(duì)稱型布局1.2網(wǎng)頁(yè)布局設(shè)計(jì)與色彩搭配1.2.2網(wǎng)頁(yè)布局的結(jié)構(gòu)形式5．“同”字型布局1.2網(wǎng)頁(yè)布局設(shè)計(jì)與色彩搭配1.2.2網(wǎng)頁(yè)布局的結(jié)構(gòu)形式6．“回”字型結(jié)構(gòu)布局1.2網(wǎng)頁(yè)布局設(shè)計(jì)與色彩搭配1.2.2網(wǎng)頁(yè)布局的結(jié)構(gòu)形式7．“匡”字型結(jié)構(gòu)布局1.2網(wǎng)頁(yè)布局設(shè)計(jì)與色彩搭配1.2.2網(wǎng)頁(yè)布局的結(jié)構(gòu)形式8.自由式結(jié)構(gòu)布局1.2網(wǎng)頁(yè)布局設(shè)計(jì)與色彩搭配1.2.3網(wǎng)頁(yè)配色基礎(chǔ)1.紅色1.2網(wǎng)頁(yè)布局設(shè)計(jì)與色彩搭配1.2.3網(wǎng)頁(yè)配色基礎(chǔ)1.紅色1.2網(wǎng)頁(yè)布局設(shè)計(jì)與色彩搭配1.2.3網(wǎng)頁(yè)配色基礎(chǔ)2.橙色1.2網(wǎng)頁(yè)布局設(shè)計(jì)與色彩搭配1.2.3網(wǎng)頁(yè)配色基礎(chǔ)2.橙色1.2網(wǎng)頁(yè)布局設(shè)計(jì)與色彩搭配1.2.3網(wǎng)頁(yè)配色基礎(chǔ)3.黃色1.2網(wǎng)頁(yè)布局設(shè)計(jì)與色彩搭配1.2.3網(wǎng)頁(yè)配色基礎(chǔ)3.黃色1.2網(wǎng)頁(yè)布局設(shè)計(jì)與色彩搭配1.2.3網(wǎng)頁(yè)配色基礎(chǔ)4.綠色1.2網(wǎng)頁(yè)布局設(shè)計(jì)與色彩搭配1.2.3網(wǎng)頁(yè)配色基礎(chǔ)4.綠色1.2網(wǎng)頁(yè)布局設(shè)計(jì)與色彩搭配1.2.3網(wǎng)頁(yè)配色基礎(chǔ)5.藍(lán)色1.2網(wǎng)頁(yè)布局設(shè)計(jì)與色彩搭配1.2.3網(wǎng)頁(yè)配色基礎(chǔ)5.藍(lán)色1.2網(wǎng)頁(yè)布局設(shè)計(jì)與色彩搭配1.2.3網(wǎng)頁(yè)配色基礎(chǔ)6.紫色1.2網(wǎng)頁(yè)布局設(shè)計(jì)與色彩搭配1.2.3網(wǎng)頁(yè)配色基礎(chǔ)6.紫色1.2網(wǎng)頁(yè)布局設(shè)計(jì)與色彩搭配1.2.3網(wǎng)頁(yè)配色基礎(chǔ)7.黑色與白色1.2網(wǎng)頁(yè)布局設(shè)計(jì)與色彩搭配1.2.3網(wǎng)頁(yè)配色基礎(chǔ)7.黑色與白色1.2網(wǎng)頁(yè)布局設(shè)計(jì)與色彩搭配1.2.4網(wǎng)站布局特點(diǎn)1.資訊類網(wǎng)站1.2網(wǎng)頁(yè)布局設(shè)計(jì)與色彩搭配1.2.4網(wǎng)站布局特點(diǎn)2.電子商務(wù)類網(wǎng)站1.2網(wǎng)頁(yè)布局設(shè)計(jì)與色彩搭配1.2.4網(wǎng)站布局特點(diǎn)3.互動(dòng)游戲類網(wǎng)站1.2網(wǎng)頁(yè)布局設(shè)計(jì)與色彩搭配1.2.4網(wǎng)站布局特點(diǎn)4.教育類網(wǎng)站1.2網(wǎng)頁(yè)布局設(shè)計(jì)與色彩搭配1.2.4網(wǎng)站布局特點(diǎn)5.功能性網(wǎng)站1.2網(wǎng)頁(yè)布局設(shè)計(jì)與色彩搭配1.2.4網(wǎng)站布局特點(diǎn)6.綜合性網(wǎng)站1.2網(wǎng)頁(yè)布局設(shè)計(jì)與色彩搭配1.2.5經(jīng)典網(wǎng)頁(yè)欣賞1.2網(wǎng)頁(yè)布局設(shè)計(jì)與色彩搭配1.2.5經(jīng)典網(wǎng)頁(yè)欣賞1.2網(wǎng)頁(yè)布局設(shè)計(jì)與色彩搭配1.2.5經(jīng)典網(wǎng)頁(yè)欣賞1.2網(wǎng)頁(yè)布局設(shè)計(jì)與色彩搭配1.2.5經(jīng)典網(wǎng)頁(yè)欣賞1.2網(wǎng)頁(yè)布局設(shè)計(jì)與色彩搭配1.2.5經(jīng)典網(wǎng)頁(yè)欣賞1.2網(wǎng)頁(yè)布局設(shè)計(jì)與色彩搭配1.2.5經(jīng)典網(wǎng)頁(yè)欣賞1.3Dreamweaver認(rèn)知1.3.1DreamweaverCS5.5的新功能1.CSS3/HTML5支持2.jQuery集成3.借助PhoneGap構(gòu)建本機(jī)Android和IOS應(yīng)用程序4.FTPS、FTPeS支持5.移動(dòng)UI構(gòu)件1.3Dreamweaver認(rèn)知1.3.2DreamweaverCS5.5的工作界面1.3Dreamweaver認(rèn)知1.3.2DreamweaverCS5.5的工作界面1.標(biāo)題欄在AdobeDreamweaverCS5.5的窗口標(biāo)題欄上整合了網(wǎng)頁(yè)制作中最常用的布局、DW擴(kuò)展、站點(diǎn)管理器和設(shè)計(jì)器按鈕，這些常用的命令按鈕可以從菜單欄或者工具欄中找到與之相應(yīng)的選項(xiàng)。1.3Dreamweaver認(rèn)知1.3.2DreamweaverCS5.5的工作界面2.菜單欄DreamweaverCS5.5的主菜單共分10種，即文件、編輯、查看、插入、修改、格式、命令、站點(diǎn)、窗口和幫助。1.3Dreamweaver認(rèn)知1.3.2DreamweaverCS5.5的工作界面3.插入工具欄在“設(shè)計(jì)器”布局模式下，DreamweaverCS5.5將原先的插入欄默認(rèn)呈現(xiàn)為插入面板形式。該面板包含成行的對(duì)象圖標(biāo)，用于創(chuàng)建和插入網(wǎng)頁(yè)元素。1.3Dreamweaver認(rèn)知1.3.2DreamweaverCS5.5的工作界面4.文檔工具欄文檔工具欄包含一系列按鈕，主要用于切換編輯區(qū)視圖模式、設(shè)置網(wǎng)頁(yè)標(biāo)題、在瀏覽器中瀏覽網(wǎng)頁(yè)以及檢查瀏覽器兼容性等。1.3Dreamweaver認(rèn)知1.3.2DreamweaverCS5.5的工作界面5.文檔窗口文檔窗口用來顯示當(dāng)前所創(chuàng)建和編輯的HTML文檔內(nèi)容。該窗口有代碼、拆分和設(shè)計(jì)3種視圖模式。1.3Dreamweaver認(rèn)知1.3.2DreamweaverCS5.5的工作界面5.文檔窗口文檔窗口用來顯示當(dāng)前所創(chuàng)建和編輯的HTML文檔內(nèi)容。該窗口有代碼、拆分和設(shè)計(jì)3種視圖模式。1.3Dreamweaver認(rèn)知1.3.2DreamweaverCS5.5的工作界面5.文檔窗口文檔窗口用來顯示當(dāng)前所創(chuàng)建和編輯的HTML文檔內(nèi)容。該窗口有代碼、拆分和設(shè)計(jì)3種視圖模式。1.3Dreamweaver認(rèn)知1.3.2DreamweaverCS5.5的工作界面6.標(biāo)簽選擇器標(biāo)簽選擇器位于文檔窗口底部的狀態(tài)欄中，它顯示環(huán)繞當(dāng)前選定內(nèi)容的標(biāo)簽的層次結(jié)構(gòu)。1.3Dreamweaver認(rèn)知1.3.2DreamweaverCS5.5的工作界面7.屬性面板通過屬性面板可以檢查和編輯當(dāng)前選定的頁(yè)面對(duì)象的屬性。1.3Dreamweaver認(rèn)知1.3.2DreamweaverCS5.5的工作界面8.浮動(dòng)面板組DreamweaverCS5.5通過一套面板和面板組系統(tǒng)來輕松處理不同的復(fù)雜界面。1.4HTML基礎(chǔ)1.4.1HTML基本標(biāo)記1.<html>……</html>2.<head>……</head>3.<body>……</body>4.<title>……</title>1.4HTML基礎(chǔ)1.4.2格式標(biāo)記1.<p>……</p>2.<br>3.<blockquote>……</blockquote>4.<ol>……</ol>、<ul>……</ul>、<li>……</li>5.<div>……</div>1.4HTML基礎(chǔ)1.4.3文本標(biāo)記1.<pre>……</pre>2.<h1></h1>……<h6></h6>3.<b>……</b>、<i>……</i>、<u>……</u>4.<tt>……</tt>、<cite>……</cite>、

<em>……</em>、<strong>……</strong>5.<font>……</font>1.4HTML基礎(chǔ)1.4.4圖像標(biāo)記1.<img>2.<hr>1.4HTML基礎(chǔ)1.4.5表格標(biāo)記1.<table>……</table>2.<tr>……</tr>、<td>……</td>3.<th>……</th>1.4HTML基礎(chǔ)1.4.6鏈接標(biāo)記1.<ahref="……">……</a>2.<aname="……">……</a>小結(jié)本章從網(wǎng)頁(yè)的基礎(chǔ)知識(shí)入手，根據(jù)不同網(wǎng)站的特點(diǎn)，從顏色、布局結(jié)構(gòu)等方面進(jìn)行了一一闡述，同時(shí)全面展示和介紹了DreamweaverCS5.5的工作界面及其功能含義以及后臺(tái)HTML代碼的核心標(biāo)記。ThankYou!網(wǎng)頁(yè)設(shè)計(jì)與制作第三章網(wǎng)頁(yè)中的基本元素通常情況下，構(gòu)成網(wǎng)頁(yè)的元素有文本、圖像、多媒體等，這些基本元素可以通過表格的方式布局到網(wǎng)頁(yè)上。網(wǎng)頁(yè)的各構(gòu)成要素在網(wǎng)頁(yè)中擔(dān)當(dāng)著各自的角色，共同保證信息的有效傳達(dá)，是網(wǎng)頁(yè)發(fā)揮整體作用不可缺少的部分。3.1文本及其常用格式設(shè)置 3.1.1復(fù)制和粘貼文本

1.在文件面板中，找到要插入的文本所在的文件，在Dreamweaver中打開。 2.選擇要復(fù)制的內(nèi)容，在網(wǎng)頁(yè)中進(jìn)行粘貼。

提示：建議事先準(zhǔn)備好文字素材，這樣有利于團(tuán)隊(duì)合作，能夠做到分工明確。3.1文本及其常用格式設(shè)置 3.1.2分段和換行

段落標(biāo)簽<p></p>

換行標(biāo)簽<br/>

分段直接按<Enter>鍵即可，而換行要按<Shift>+<Enter>組合鍵。3.1文本及其常用格式設(shè)置 3.1.3插入空格及文本縮進(jìn)方法 1.插入空格 Dreamweaver在默認(rèn)的狀態(tài)下是不能連續(xù)輸入空格的，可以通過下面的設(shè)置使頁(yè)面可以輸入連續(xù)空格：打開【編輯】菜單下的【首選參數(shù)】，在“常規(guī)”選項(xiàng)卡中把“允許多個(gè)連續(xù)空格”的復(fù)選框選中。 2.文本縮進(jìn)方式：可以使用文本凸出和文本縮進(jìn)按鈕

來縮進(jìn)和調(diào)整段落和文本塊的首行縮進(jìn)。3.2圖形圖像及其常用設(shè)置網(wǎng)頁(yè)圖像的格式主要有以下三種： 1.GIF 2.JPEG 3.PNG3.2圖形圖像及其常用設(shè)置

3.2.1插入圖像 1.將插入點(diǎn)放置在要顯示圖像的地方。 2.單擊【常用】工具欄的【圖像】按鈕

，打開【選擇圖像源文件】對(duì)話框，從圖像文件夾中選擇圖像文件，單擊【確定】按鈕。

注意：插入的圖像必須位于當(dāng)前站點(diǎn)內(nèi)，同時(shí)引用文件路徑的文件夾層數(shù)最好不要超過三層，如果文件不在站點(diǎn)內(nèi)或文件夾層數(shù)過多，會(huì)造成圖像無(wú)法顯示。3.2圖形圖像及其常用設(shè)置

3.2.2設(shè)置圖像屬性

圖像屬性面板包括以下部分

1.【圖像標(biāo)記名稱】：在這個(gè)文本框中輸入圖像標(biāo)記的名稱。 2.【寬】、【高】：設(shè)置圖像的寬度和高度，單位為px（像素）。注意：這里只是網(wǎng)頁(yè)中顯示效果的大小的改變，圖像文件并不發(fā)生變化，改變圖像大小時(shí)，應(yīng)當(dāng)使用圖像處理軟件Photoshop或Fireworks來處理。 3.【源文件】：指定圖像的URL路徑。當(dāng)需要替換圖片時(shí)，單擊右側(cè)的【瀏覽】按鈕，打開對(duì)話框，從磁盤上選擇文件來實(shí)現(xiàn)，也可拖動(dòng)【指向文件】按鈕指向站點(diǎn)中要插入的圖片。

3.2圖形圖像及其常用設(shè)置 3.2.2設(shè)置圖像屬性4.【鏈接】：用來輸入超鏈接的URL地址。5.使用圖像編輯軟件裁剪及美化圖像6.【替換】：當(dāng)鼠標(biāo)停留在圖像上時(shí)，會(huì)顯示替換文本框中輸入的說明文字。7.【類】：為圖像設(shè)置CSS樣式。8.【熱點(diǎn)地圖】：用于在一幅圖像上創(chuàng)建多個(gè)鏈接熱區(qū)。9.【垂直】、【水平】邊距：設(shè)置圖像垂直方向和水平方向上的空白間距。10.【低解析度源】：指定在載入主圖像之前應(yīng)該載入的圖像。11.【邊框】：設(shè)置圖像邊框的寬度，單位為px（像素），默認(rèn)無(wú)邊框。12.【對(duì)齊】按鈕：設(shè)置圖像水平方向顯示位置。13.【對(duì)齊】下拉列表：對(duì)齊同一行上的圖像和文本。14.【折疊】按鈕：可以展開和折疊屬性面板。3.2圖形圖像及其常用設(shè)置

3.2.3插入圖像占位符

網(wǎng)站能夠讓用戶免費(fèi)訪問，很大程度上依賴于廣告來支撐成本。網(wǎng)頁(yè)設(shè)計(jì)人員有時(shí)并不需要?jiǎng)邮衷O(shè)計(jì)廣告，只需給廣告留下位置，等到專業(yè)設(shè)計(jì)師把廣告設(shè)計(jì)完成，直接插入即可，這樣可以很大程度上提高網(wǎng)站的開發(fā)效率。這個(gè)位置可以通過圖像占位符來實(shí)現(xiàn)。3.2圖形圖像及其常用設(shè)置

3.2.4插入鼠標(biāo)經(jīng)過圖像

鼠標(biāo)經(jīng)過圖像也稱“翻轉(zhuǎn)圖像”是當(dāng)用戶的鼠標(biāo)指針經(jīng)過時(shí)產(chǎn)生某種變化的圖像，同時(shí)還可以在圖像內(nèi)加入鏈接，常用于點(diǎn)擊時(shí)打開另一個(gè)網(wǎng)頁(yè)的按鈕。3.3動(dòng)畫及聲音及其常用設(shè)置

3.3.1插入SWF動(dòng)畫 3.3.2插入Flash按鈕 3.3.3插入Flash文本3.3動(dòng)畫及聲音及其常用設(shè)置 3.3.4插入圖片查看器

可以使用插入圖片查看器的方法實(shí)現(xiàn)多張圖片的循環(huán)播放，具體方法如下： 1.雙擊打開文件，光標(biāo)在頁(yè)面行首定位，選擇【插入記錄】—【媒體】—【圖像查看器】命令，打開【保存flash元素】對(duì)話框 2.設(shè)置flash保存的路徑和文件名，單擊【保存】按鈕，此時(shí)會(huì)自動(dòng)在頁(yè)面中生成一個(gè)swf文件。對(duì)應(yīng)該文件，在右側(cè)打開一個(gè)FLASH元素面板，如右圖所示進(jìn)行設(shè)置：3.3動(dòng)畫及聲音及其常用設(shè)置3.3.5插入視頻及音頻網(wǎng)絡(luò)中常見的視頻格式有MPEG、AVI、WMV、RM和MOV等。網(wǎng)絡(luò)中常用的音頻格式有MIDI、MP3和RA等。設(shè)置視頻或音頻文件的屬性如右圖：3.4表格及其設(shè)置

頁(yè)面布局是進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)的最基本最重要的工作之一，網(wǎng)頁(yè)布局設(shè)計(jì)的常用控制工具是表格。Dreamweaver中的表格功能非常強(qiáng)大，所見即所得的表格控制、拖放調(diào)整大小、輕松組織行列以及快速的表格重新格式化，大大縮短網(wǎng)頁(yè)開發(fā)的周期。盡管目前網(wǎng)頁(yè)設(shè)計(jì)的趨勢(shì)是基于CSS的布局（Div+CSS），但表格仍然是顯示結(jié)構(gòu)化信息的最佳方法。表格由行、列組成，單元格是表格的最小單位，是輸入信息的地方。3.4表格及其設(shè)置 3.4.1插入及選擇表格 1.插入表格3.4表格及其設(shè)置

3.4.1插入及選擇表格 2.選中表格

（1）光標(biāo)置于表格的任一單元格中，單擊編輯窗口左下角【標(biāo)簽選擇器】中的<table>標(biāo)簽

（2）選中行

（3）選定整列 3.選定單元格

（1）選定一個(gè)單元格：光標(biāo)在單元中定位，單擊編輯窗口左下角【標(biāo)簽選擇器】中的<td>標(biāo)簽。

（2）選定多個(gè)連續(xù)單元格

（3）選定不連續(xù)多個(gè)單元格3.4表格及其設(shè)置 3.4.2調(diào)整表格和單元格的大小

在DreamweaverCS3中編輯表格的內(nèi)容時(shí)，如果沒有設(shè)定單元格的寬度，當(dāng)開始在單元格內(nèi)輸入內(nèi)容時(shí)，表格的邊界會(huì)自動(dòng)擴(kuò)展以適應(yīng)數(shù)據(jù)的大小，與此同時(shí)其他單元格縮小，但在這些單元格內(nèi)輸入內(nèi)容或圖片時(shí)，它們也會(huì)自動(dòng)適應(yīng)內(nèi)容大小。3.4表格及其設(shè)置 3.4.3添加和刪除表格、行與列 1.插入表格、行和列 2.刪除表格，行和列

選中表格、行或列，按【Delete】鍵刪除，如果是進(jìn)行了合并單元格操作，則刪除該單元格行列，選擇【編輯】→【剪切】或【Ctrl】+【x】鍵，注意選中表格，行或列與其中填充的內(nèi)容是不同的對(duì)象，最后，利用表格【屬性】面板，通過修改＜table＞標(biāo)記的行、列屬性來插入或刪除行與列。3.4表格及其設(shè)置 3.4.4拆分和合并單元格合并單元格指將兩個(gè)以上或多個(gè)相鄰單元格合并成一個(gè)單元格，拆分單元格指將一個(gè)單元格拆分或多個(gè)單元格。光標(biāo)定位到要拆分的單元格中，單擊【屬性】面板中的【拆分單元格為行或列】按鈕

，打開【拆分單元格】對(duì)話框，如下圖設(shè)置：

選中需要合并的多個(gè)單元格，單擊【屬性】面板中的【合并單元格為行或列】按鈕

，將多個(gè)單元格合并為一個(gè)單元格，3.4表格及其設(shè)置

3.4.5設(shè)置表格屬性

選中表格后，利用表格屬性面板來設(shè)置或修改表格的屬性，屬性面板如下圖所示。3.4表格及其設(shè)置 3.4.6設(shè)置單元格的屬性

將光標(biāo)放置在單元格中，在【屬性】面板中設(shè)置單元格的屬性，如圖3-23所示，上半部分設(shè)置單元格內(nèi)文本屬性，下半部分設(shè)置單元格屬性。單擊【屬性】面板右下角的

或

按鈕可以折疊或展開面板。3.4表格及其設(shè)置 3.4.7表格實(shí)例

使用表格設(shè)計(jì)如下圖所示網(wǎng)頁(yè)3.5本章小結(jié)

本章分別介紹了網(wǎng)頁(yè)中的文本、圖像、動(dòng)畫、視頻和音頻等元素的插入方法及各元素屬性的設(shè)置，并介紹網(wǎng)頁(yè)布局的主要方法——表格的操作。通過本章的學(xué)習(xí)，使讀者可以掌握使用表格來布局網(wǎng)頁(yè)，并能在網(wǎng)頁(yè)中插入各種網(wǎng)頁(yè)元素，達(dá)到制作一個(gè)簡(jiǎn)單靜態(tài)網(wǎng)頁(yè)的目的。第四章超鏈接及表單

網(wǎng)絡(luò)的靈魂是超級(jí)鏈接，沒有超級(jí)鏈接，就沒有萬(wàn)維網(wǎng)。超級(jí)鏈接能把Internet上眾多的網(wǎng)站和網(wǎng)頁(yè)聯(lián)系起來，為暢游網(wǎng)絡(luò)提供了方便，真正實(shí)現(xiàn)了網(wǎng)絡(luò)無(wú)國(guó)界，是網(wǎng)頁(yè)制作中使用得比較多的一種技術(shù)。

表單是用戶和服務(wù)器交互的一個(gè)重要方式，利用表單，服務(wù)器可以收集用戶信息，比如可以采集訪問者的名字和E-mail地址、調(diào)查表、留言薄、搜索界面等等。4.1超級(jí)鏈接

絕對(duì)URL的超鏈接

從一個(gè)網(wǎng)站的網(wǎng)頁(yè)鏈接到另一個(gè)網(wǎng)站的網(wǎng)頁(yè)必須使用絕對(duì)路徑，包括所使用的傳輸協(xié)議，如

相對(duì)路徑的超鏈接將自己網(wǎng)頁(yè)上的某一段文字或某標(biāo)題鏈接到同一網(wǎng)站的其他網(wǎng)頁(yè)上面去，本書中的素材網(wǎng)頁(yè)基本都是此類鏈接；最后，還可以利用錨記導(dǎo)航，在同一網(wǎng)頁(yè)中創(chuàng)建超鏈接。

內(nèi)部鏈接

內(nèi)部鏈接是指鏈接的目標(biāo)端點(diǎn)是本地站點(diǎn)中的文件

外部鏈接

外部鏈接則指鏈接的目標(biāo)端點(diǎn)是本站點(diǎn)之外的URL4.1超級(jí)鏈接 4.1.1文本及圖像超鏈接

1.選擇希望建立為鏈接的文本或圖像。 2.在【屬性】面板中如下圖所示單擊【鏈接】文本框右側(cè)的【瀏覽文件】圖標(biāo)，打開【選擇】文件對(duì)話框，選擇目標(biāo)件,單擊【確定】按鈕。 3、選擇被鏈接的文件顯示的目標(biāo)窗口，如圖所示4.1超級(jí)鏈接4.1.2錨記鏈接錨記鏈接又叫錨點(diǎn)鏈接。當(dāng)一全頁(yè)面的內(nèi)容較多且內(nèi)容較長(zhǎng)時(shí)，為了方便用戶瀏覽網(wǎng)頁(yè)，可以使用錨點(diǎn)鏈接快速跳轉(zhuǎn)到想要看的位置。錨點(diǎn)鏈接指在同一頁(yè)面的不同位置的鏈接。1、單擊【常用】工具欄中的【命令錨記】按鈕或者選擇【插入】-【命名錨記】命令，打開【命名錨記】對(duì)話框，命名。2、選擇超鏈接的目標(biāo)在【屬性】面板的【鏈接】文本框中輸入“#1中所命名的錨記名稱”用同樣方法，讀者可以在頁(yè)面中設(shè)置多個(gè)錨點(diǎn)和鏈接，實(shí)現(xiàn)在頁(yè)面的跳轉(zhuǎn)。4.1超級(jí)鏈接

4.1.3其他超鏈接1.e-mail鏈接為了方便網(wǎng)站維護(hù)人員獲取用戶的反饋意見Dreamweaver提供了電子郵件鏈接，當(dāng)瀏覽者單擊電子郵件時(shí)，系統(tǒng)會(huì)自動(dòng)啟用瀏覽器默認(rèn)的電子郵件處理程序，其中的收件人的地址會(huì)自動(dòng)更新為鏈接地址。2.文件下載鏈接文件下載鏈接與普通鏈接的使用方法一樣。當(dāng)被鏈接的文件不被瀏覽器支持時(shí)，被瀏覽器直接下載，用戶可以選擇是不是保存到本地計(jì)算機(jī)中。3.空鏈接空鏈接就是沒有目標(biāo)端點(diǎn)的鏈接，它具有鏈接的屬性，但不會(huì)鏈接轉(zhuǎn)到任何位置。4.2表單應(yīng)用 4.2.1表單及表單對(duì)象簡(jiǎn)介

表單（Form）技術(shù)可以實(shí)現(xiàn)瀏覽者同Internet服務(wù)器之間信息的交互傳送，它是網(wǎng)絡(luò)信息收集處理的一種重要的方式。通過表單可以從網(wǎng)絡(luò)的用戶端收集信息，然后將收集來的信息經(jīng)過服務(wù)器處理后再反饋給用戶。無(wú)論是電子商務(wù)、網(wǎng)上調(diào)查、還是留言板、聊天室，都要求網(wǎng)頁(yè)能夠接收瀏覽者輸入的信息而表單就是網(wǎng)站獲取用戶信息最重要的手段之一。

表單域中可以插入任何HTLM對(duì)象，如文本、表格和圖像。表單對(duì)象特指表單域中專門處理用戶輸入數(shù)據(jù)的元素，包括文本域、隱藏域、按鈕、圖像域、文件域，單選按鈕及單選按鈕組、復(fù)選框、列表、菜單、跳轉(zhuǎn)菜單、標(biāo)簽和字段集以及Spry驗(yàn)證系列。4.2表單應(yīng)用 4.2.2插入表單域 1.單擊【插入】菜單中的【表單】——【表單】或者在表單工具欄中單擊按鈕

此時(shí)在編輯窗口中顯示紅色虛線框，該區(qū)域即為插入的表單域，也稱“表單”。 2.在表單域的【屬性】面板中設(shè)置屬性，如圖4.2表單應(yīng)用 4.2.3插入表單對(duì)象 1.插入文本域

文本域是表單用來收集由用戶輸入文本信息的表單對(duì)象。

插入文本域如下圖：4.2表單應(yīng)用

4.2.3插入表單對(duì)象 1.插入文本域

文本域?qū)傩栽O(shè)置如下圖：4.2表單應(yīng)用 4.2.3插入表單對(duì)象 2.插入復(fù)選框

復(fù)選框是讓用戶可以選擇的控件，可以從復(fù)選框組中選擇多項(xiàng)。復(fù)選框的響應(yīng)都可以進(jìn)行“關(guān)閉”和“打開”狀態(tài)切換。屬性設(shè)置如下圖：4.2表單應(yīng)用 4.2.3插入表單對(duì)象 3

插入單選按鈕

單選按鈕在一組中只能選擇一個(gè)選項(xiàng)。選中一組中某個(gè)單選按鈕，則原來選中該組中的其他單選按鈕會(huì)被取消選擇。屬性設(shè)置如下圖：4.2表單應(yīng)用

4.2.3插入表單對(duì)象

4.插入單選按鈕組

單選按鈕組相當(dāng)于多個(gè)名稱相同的單選按鈕，屬性設(shè)置如下圖：4.2表單應(yīng)用 4.2.3插入表單對(duì)象 5.列表

列表的屬性設(shè)置如下圖：

列表值的設(shè)置如下圖：4.2表單應(yīng)用 4.2.3插入表單對(duì)象 6.菜單

菜單的屬性設(shè)置如下圖：列表值的設(shè)置和列表一樣，兩者預(yù)覽的結(jié)果不同：（左列表，右菜單）4.2表單應(yīng)用

4.2.3插入表單對(duì)象

7.插入文件域

文件域主要用于從磁盤上傳文件的路徑名稱，在服務(wù)器上傳文件時(shí)使用，如上傳郵件、照片、程序等。屬性設(shè)置如下圖：4.2表單應(yīng)用 4.2.3插入表單對(duì)象 8.插入按鈕

按鈕常用作命令執(zhí)行。在Dreamweaver網(wǎng)頁(yè)中常見的按鈕為【提交】和【重置】按鈕。一般網(wǎng)頁(yè)上的表單數(shù)據(jù)都是通過按鈕提交給服務(wù)器的。屬性設(shè)置如下圖：4.2表單應(yīng)用 4.2.3插入表單對(duì)象 9.插入圖像域

圖像域?qū)嵸|(zhì)上就是一個(gè)按鈕，使用圖像域可以達(dá)到美化網(wǎng)頁(yè)的目的。屬性設(shè)置如下圖：4.2表單應(yīng)用 4.2.3插入表單對(duì)象

10.插入/隱藏域

隱藏域主要用于存儲(chǔ)并提交瀏覽者輸入的信息，它不會(huì)在瀏覽器中顯示。只有在配置了動(dòng)態(tài)網(wǎng)站后，才可以按【F12】鍵預(yù)覽網(wǎng)頁(yè)。屬性設(shè)置如下圖：4.2表單應(yīng)用 4.2.3插入表單對(duì)象

11.插入跳轉(zhuǎn)菜單

跳轉(zhuǎn)菜單是一個(gè)下拉菜單，其中每個(gè)選項(xiàng)具有超鏈接的性質(zhì)，但是它比超鏈接要節(jié)省很多空間。屬性設(shè)置如下圖：4.2表單應(yīng)用 4.2.4和提交表單相關(guān)的服務(wù)器端腳本處理知識(shí)

表單有兩個(gè)重要的組成部分。一是由Dreamweaver生成的表單的HTML頁(yè)面。二是用于處理表單域中輸入的信息的服務(wù)器端應(yīng)用程序或客戶端腳本。

網(wǎng)頁(yè)通常是使用表單來實(shí)現(xiàn)用戶數(shù)據(jù)提交的，F(xiàn)orm集合和QueryString集合可以用來獲取用戶提交的表單數(shù)據(jù)。使用表單提交數(shù)據(jù)的提交方式有Get和Post兩種。

若用Get方式提交表單數(shù)據(jù)，用戶要提交的數(shù)據(jù)信息將附加在URL的后面，作為查詢字符串返回服務(wù)器端，此時(shí)要用QueryString數(shù)據(jù)集合來獲取提交的數(shù)據(jù)信息；

用Post方式提交表單數(shù)據(jù)，表單數(shù)據(jù)將以放在HTTP標(biāo)頭的方式返回服務(wù)器端，此時(shí)要用Form集合獲取提交的數(shù)據(jù)信息。4.2表單應(yīng)用 4.2.4和提交表單相關(guān)的服務(wù)器端腳本處理知識(shí)

1.Form集合用Form集合獲取用戶以Post方式提交的表單數(shù)據(jù)，語(yǔ)法如下：Request.Form(“表單元素名稱”) 2.QueryString集合用QueryString集合獲取用Get方式提交的表單數(shù)據(jù)，語(yǔ)法如下：Request.QueryString(“表單元素名稱”)4.3本章小結(jié)

本章介紹創(chuàng)建各種超鏈接的方法，如站點(diǎn)內(nèi)部鏈接、站點(diǎn)外部鏈接、錨記鏈接、電子郵件鏈接等。通過本章的學(xué)習(xí)，讀者可以通過超鏈接將分散的網(wǎng)站或網(wǎng)頁(yè)聯(lián)系起來，構(gòu)成一個(gè)機(jī)的整體；另外本章還介紹了如何在頁(yè)面中插入表單和表單對(duì)象；各表單對(duì)象的屬性設(shè)置以及如何用服務(wù)器腳本進(jìn)行簡(jiǎn)單的表單提交處理。網(wǎng)頁(yè)設(shè)計(jì)與制作第五章DIV簡(jiǎn)介在網(wǎng)頁(yè)設(shè)計(jì)中，Div和表格一樣，主要應(yīng)用在網(wǎng)頁(yè)的布局設(shè)計(jì)中。利用本章所介紹的Div標(biāo)簽和APDiv，可以對(duì)文字和圖像等進(jìn)行精確定位，使頁(yè)面保持一定的版式，頁(yè)面風(fēng)格更加豐富多彩。5.1div基本語(yǔ)法及用法5.1.1關(guān)于DIV標(biāo)簽Div的全稱是

division(區(qū)分)，在HTML語(yǔ)言中，Div標(biāo)簽被稱為區(qū)隔標(biāo)記，用來在頁(yè)面中設(shè)置文字、圖像和表格等的擺放位置。Div標(biāo)簽的使用方法和其他很多標(biāo)簽一樣，需要成對(duì)出現(xiàn)，例如：<div>Div標(biāo)簽</div>。如果單獨(dú)使用Div標(biāo)簽而不為其設(shè)置CSS規(guī)則，那么它在網(wǎng)頁(yè)中的效果和<p></p>標(biāo)簽是一樣的，因此，我們通常需要為Div標(biāo)簽設(shè)置id屬性，以便通過CSS規(guī)則和JavaScript語(yǔ)句來控制它，例如，<divid=”sidebar”>Div標(biāo)簽</div>。5.1div基本語(yǔ)法及用法5.1.2插入DIV標(biāo)簽在DreamweaverCS5中有兩種插入Div標(biāo)簽的方法：執(zhí)行【插入】→【布局對(duì)象】→【Div標(biāo)簽】菜單命令。在【插入】面板的【布局】選項(xiàng)卡中單擊【插入Div標(biāo)簽】命令。

Div標(biāo)簽以一個(gè)框的形式出現(xiàn)在文檔中，并帶有占位符文本。將指針移到該框的邊緣上時(shí)，Dreamweaver會(huì)將該框顯示為紅色。如果邊框沒有顯示，可執(zhí)行【查看】→【可視化助理】→【CSS布局外框】菜單命令。5.1div基本語(yǔ)法及用法5.1.3編輯DIV標(biāo)簽單擊Div標(biāo)簽的邊框，可以在其【屬性】檢查器中編輯Div標(biāo)簽的【ID】和【類】等屬性。Div標(biāo)簽的【屬性】檢查器用戶也可以向Div標(biāo)簽中添加內(nèi)容，將插入點(diǎn)放在Div標(biāo)簽中，然后就像往頁(yè)面中添加內(nèi)容一樣添加內(nèi)容即可。5.1div基本語(yǔ)法及用法5.1.4關(guān)于APDiv使用了CSS樣式表中的絕對(duì)定位屬性的<div>標(biāo)簽就叫做APDiv。DreamweaverCS5.5中的“APDiv”就是Dreamweaver舊版本中的“層”。APDiv可以理解為浮動(dòng)在網(wǎng)頁(yè)上的一個(gè)頁(yè)面，可以放置在頁(yè)面中的任何位置，可以隨意移動(dòng)這些位置，而且它們的位置可以相互重疊，也可以任意控制APDiv的前后位置、顯示與隱藏，因此大大加強(qiáng)了網(wǎng)頁(yè)設(shè)計(jì)的靈活性。在網(wǎng)頁(yè)設(shè)計(jì)中，將網(wǎng)頁(yè)元素放到APDiv中，然后在頁(yè)面中精確定位APDiv的位置，可以實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)容的精確定位，使網(wǎng)頁(yè)內(nèi)容在頁(yè)面上排列得整齊、美觀、井井有條。5.1div基本語(yǔ)法及用法5.1.5插入APDiv插入APDiv時(shí)，Dreamweaver默認(rèn)情況下將在設(shè)計(jì)視圖中顯示APDiv的外框，并且，當(dāng)指針移到塊上面時(shí)還會(huì)高亮顯示該塊。在DreamweaverCS5中插入APDiv的方法有兩種：執(zhí)行【插入】→【布局對(duì)象】→【APDiv】菜單命令。在【插入】面板的【布局】選項(xiàng)卡中單擊【繪制APDiv】命令。在頁(yè)面中插入一個(gè)APDiv后，在APDiv邊框的左上角會(huì)顯示它的標(biāo)志圖標(biāo)。5.1div基本語(yǔ)法及用法5.1.5插入APDiv創(chuàng)建APDiv后，只需將插入點(diǎn)放置于該APDiv中，然后就可以像在頁(yè)面中添加內(nèi)容一樣，將內(nèi)容添加到APDiv中。在繪制APDiv時(shí)，按住【Ctrl】鍵不放，可以繪制出多個(gè)APDiv。插入多個(gè)APDiv后，為了不使各個(gè)APDiv之間出現(xiàn)重疊，可以在【AP元素】面板中選中【防止重疊】復(fù)選框。5.1div基本語(yǔ)法及用法5.1.6嵌套APDiv嵌套APDiv是指APDiv本身被包含在另一個(gè)APDiv中。嵌套通常用于要將APDiv組合在一起的情況。嵌套APDiv隨其父級(jí)APDiv一起移動(dòng)，并且可以設(shè)置為繼承父級(jí)的可見性。創(chuàng)建嵌套APDiv的方法有以下2種：

1.直接插入在【AP元素】面板中取消選中【防止重疊】復(fù)選框，在文檔窗口中將插入點(diǎn)放置在一個(gè)現(xiàn)有的APDiv的內(nèi)部，然后執(zhí)行【插入】→【布局對(duì)象】→【APDiv】菜單命令即可。5.1div基本語(yǔ)法及用法5.1.6嵌套APDiv2.直接繪制在繪制嵌套APDiv之前，首先執(zhí)行【編輯】→【首選參數(shù)】菜單命令，在打開的【首選參數(shù)】對(duì)話框的【分類】列表框中選擇【AP元素】選項(xiàng)，在右側(cè)選中【在APDiv中創(chuàng)建以后嵌套】復(fù)選框，然后在【AP元素】面板中取消選中【防止重疊】復(fù)選框，在【插入】面板的【布局】選項(xiàng)卡中單擊【繪制APDiv】命令，在文檔窗口中現(xiàn)有的APDiv中再繪制一個(gè)APDiv，即可完成嵌套。提示：如果AP元素首選參數(shù)中的嵌套功能被禁用了，可能通過按住【Alt】鍵并拖動(dòng)鼠標(biāo)，在現(xiàn)有APDiv內(nèi)部嵌套一個(gè)APDiv。5.1div基本語(yǔ)法及用法5.1.7設(shè)置APDiv的屬性在APDiv的【屬性】檢查器中可以設(shè)置單個(gè)APDiv的屬性，也可以設(shè)置多個(gè)APDiv的屬性。1．設(shè)置單個(gè)APDiv的屬性當(dāng)選擇一個(gè)APDiv時(shí)，【屬性】檢查器將顯示APDiv的屬性，可以對(duì)【屬性】檢查器中各參數(shù)進(jìn)行設(shè)置。2．設(shè)置多個(gè)APDiv的屬性

按住【Shift】鍵選擇要設(shè)置相同屬性的多個(gè)APDiv，可以對(duì)【屬性】檢查器中各參數(shù)進(jìn)行設(shè)置。5.1div基本語(yǔ)法及用法5.1.8編輯APDiv編輯APDiv包括移動(dòng)APDiv、調(diào)整APDiv的大小和對(duì)齊APDiv，以及顯示或隱藏APDiv等操作。1.選擇單個(gè)APDiv選擇單個(gè)APDiv的方法有以下兩種：將鼠標(biāo)移動(dòng)到APDiv的邊框上，當(dāng)顯示紅色線框時(shí)，單擊鼠標(biāo)左鍵即可，選中的APDiv以粗線邊框顯示。在【AP元素】面板中直接單擊要選擇的APDiv的名稱即可。2.選擇多個(gè)APDiv選擇多個(gè)APDiv的方法有以下兩種：5.1div基本語(yǔ)法及用法5.1.8編輯APDiv按住【Shift】鍵，在要選擇的APDiv中或APDiv邊框上單擊。按住【Shift】鍵，在【AP元素】面板中單擊要選擇的多個(gè)APDiv的名稱即可。

3．移動(dòng)APDiv要移動(dòng)APDiv的位置，只需將鼠標(biāo)移動(dòng)到一個(gè)或多個(gè)APDiv邊框上，當(dāng)鼠標(biāo)變?yōu)樗南蚣^時(shí)，按住鼠標(biāo)左鍵拖動(dòng)鼠標(biāo)到合適的位置即可。5.1div基本語(yǔ)法及用法5.1.8編輯APDiv4．對(duì)齊APDiv在網(wǎng)頁(yè)制作中，還可以對(duì)APDiv進(jìn)行對(duì)齊操作。在進(jìn)行APDiv的對(duì)齊操作中，所有子級(jí)APDiv的位置都會(huì)隨著父級(jí)APDiv相應(yīng)地變動(dòng)。選擇要對(duì)齊的APDiv，執(zhí)行【修改】→【排列順序】菜單命令，在打開的子菜單中選擇對(duì)齊方式。用戶還可以在APDiv的【屬性】檢查器中設(shè)置【左】和【上】的值，來確定左對(duì)齊和上部對(duì)齊。5.1div基本語(yǔ)法及用法5.1.8編輯APDiv5．調(diào)整APDiv的大小調(diào)整APDiv大小的方法有以下3種：選中要調(diào)整的APDiv后，在【屬性】檢查器中的【寬】和【高】文本框中直接輸入數(shù)值即可。直接用鼠標(biāo)拖動(dòng)APDiv的任何一個(gè)大小調(diào)整柄來改變APDiv的大小。選中多個(gè)APDiv，在【修改】→【排列順序】子菜單中單擊【設(shè)成寬度相同】或【設(shè)成高度相同】命令，這樣就可以將多個(gè)APDiv的寬度和高度都設(shè)置成相同值。5.1div基本語(yǔ)法及用法5.1.8編輯APDiv6．顯示或隱藏APDiv當(dāng)處理文檔時(shí)，可以使用【AP元素】面板手動(dòng)顯示或隱藏APDiv，以查看頁(yè)面在不同條件下的顯示。在【AP元素】面板的眼睛圖標(biāo)上單擊可以更改APDiv的可見性。如果沒有眼睛圖標(biāo)，APDiv通常會(huì)繼承其父級(jí)的可見性。如果APDiv沒有嵌套，父級(jí)就是文檔正文，而文檔正文始終是可見的。另外，如果未指定可見性，則不會(huì)顯示眼睛圖標(biāo)，（在【屬性】檢查器中表示為默認(rèn)可見性）。5.1div基本語(yǔ)法及用法5.1.9APDiv與表格的轉(zhuǎn)換在DreamweaverCS5.5中，用戶可以使用APDiv來創(chuàng)建自己的布局，然后將它們轉(zhuǎn)換為表格。不過，建議不要將APDiv轉(zhuǎn)換為表格，因?yàn)檫@樣做會(huì)產(chǎn)生帶有大量空白單元格的表格。如果需要一個(gè)使用表格的頁(yè)面布局，最好使用Dreamweaver中可用的標(biāo)準(zhǔn)表格布局工具來創(chuàng)建頁(yè)面布局。用戶可以在APDiv和表格之間來回轉(zhuǎn)換，以調(diào)整布局并優(yōu)化網(wǎng)頁(yè)設(shè)計(jì)。需要注意，有能轉(zhuǎn)換頁(yè)面上的特定表格或APDiv，只能將整個(gè)頁(yè)面上的APDiv轉(zhuǎn)換為表格，或?qū)⒈砀褶D(zhuǎn)換為APDiv。5.1div基本語(yǔ)法及用法5.1.9APDiv與表格的轉(zhuǎn)換

1．將APDiv轉(zhuǎn)換為表格在將APDiv轉(zhuǎn)換為表格之前，應(yīng)確保APDiv沒有重疊。打開一個(gè)需要將APDiv轉(zhuǎn)換為表格的頁(yè)面，執(zhí)行【修改】【轉(zhuǎn)換】【將APDiv轉(zhuǎn)換為表格】菜單命令，彈出【將APDiv轉(zhuǎn)換為表格】對(duì)話框，在該對(duì)話框中保持默認(rèn)設(shè)置，單擊【確定】按鈕，完成轉(zhuǎn)換操作。

2．將表格轉(zhuǎn)換為APDiv打開一個(gè)需要將表格轉(zhuǎn)換為APDiv的頁(yè)面，執(zhí)行【修改】→【轉(zhuǎn)換】→【將表格轉(zhuǎn)換為APDiv】菜單命令，彈出【將表格轉(zhuǎn)換為APDiv】對(duì)話框，保持默認(rèn)值，單擊【確定】按鈕即可。5.2div在不同瀏覽器中的兼容性5.2.1為什么會(huì)出現(xiàn)兼容性問題對(duì)IE的兼容問題一直是DIV+CSS的一個(gè)大問題，因?yàn)椴煌瑸g覽器識(shí)別代碼產(chǎn)生的效果是不同的，所以造成了很多瀏覽器對(duì)相同的CSS，產(chǎn)生不同的效果，這樣就產(chǎn)生了網(wǎng)站的錯(cuò)位，導(dǎo)致了不同瀏覽器之間的不兼容。所以，兼容性對(duì)于網(wǎng)頁(yè)設(shè)計(jì)師來說非常重要。5.2div在不同瀏覽器中的兼容性5.2.2瀏覽器兼容性問題當(dāng)網(wǎng)頁(yè)在不同瀏覽器之間顯示時(shí)，由于不同瀏覽器支持的CSS標(biāo)準(zhǔn)不同，可能會(huì)遇到以下問題：（1）網(wǎng)頁(yè)布局不整齊；（2）文本或圖像重疊；（3）JavaScript功能有問題或錯(cuò)誤；5.2div在不同瀏覽器中的兼容性5.2.3瀏覽器兼容性解決方案在各大主流瀏覽器之間，解決瀏覽器兼容性的方案有以下兩種：（1）IE文件兼容方案（2）CSSHACK方案小結(jié)本章主要介紹了Div標(biāo)簽和APDiv的基礎(chǔ)知識(shí)和基本操作，并通過實(shí)例和練習(xí)，讓讀者進(jìn)一步了解了Div標(biāo)簽和APDiv的應(yīng)用。ThankYou!網(wǎng)頁(yè)設(shè)計(jì)與制作第六章CSS樣式表樣式表的應(yīng)用非常廣泛，通過定義樣式表，可以對(duì)頁(yè)面中的元素進(jìn)行美化，是美化網(wǎng)頁(yè)的重要手段之一。DreamweaverCS5.5支持強(qiáng)大的樣式表定義，通過樣式表的編輯功能，可以方便快捷地為網(wǎng)頁(yè)定義各種各樣的樣式。6.1CSS基礎(chǔ)6.1.1CSS簡(jiǎn)介CSS的全稱是“CascadingStylesSheets”，中文稱層疊樣式表，簡(jiǎn)稱樣式表。用于控制網(wǎng)頁(yè)樣式并允許將樣式與網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)記性語(yǔ)言。CSS是1996年由W3C審核通過，并推薦使用的。CSS可將網(wǎng)頁(yè)的內(nèi)容與表現(xiàn)形式分開，使網(wǎng)頁(yè)的外觀設(shè)計(jì)從網(wǎng)頁(yè)內(nèi)容中獨(dú)立開來。若要改變網(wǎng)頁(yè)的外觀，只需更改CSS樣式。6.1CSS基礎(chǔ)6.1.1CSS簡(jiǎn)介CSS可謂是網(wǎng)頁(yè)設(shè)計(jì)的一個(gè)突破，它解決了網(wǎng)頁(yè)界面排版的難題。CSS作為當(dāng)前網(wǎng)頁(yè)設(shè)計(jì)中的熱門技術(shù)，具有以下優(yōu)勢(shì)：將格式和內(nèi)容分離；增強(qiáng)控制頁(yè)面布局的能力；精簡(jiǎn)網(wǎng)頁(yè)，提高下載速度；維護(hù)和更新網(wǎng)頁(yè)更加容易；代碼兼容性好；更有利于搜索引擎的搜索。6.1CSS基礎(chǔ)6.1.2在HTML頁(yè)面中引入CSS的方法CSS提供了四種在HTML頁(yè)面中插入樣式表的方法：鏈入外部樣式表、內(nèi)部樣式表、導(dǎo)入外表樣式表和內(nèi)嵌樣式。1．鏈入外部樣式表鏈入外部樣式表是把樣式表保存為一個(gè)樣式表文件，然后在頁(yè)面中用<link>標(biāo)簽鏈接到這個(gè)樣式表文件，這個(gè)<link>標(biāo)簽必須放到頁(yè)面的<head>區(qū)內(nèi):<head>……<linkrel="stylesheet“type="text/css“href="mystyle.css">……</head>

6.1CSS基礎(chǔ)6.1.2在HTML頁(yè)面中引入CSS的方法

上面這段代碼表示瀏覽器從mystyle.css文件中以文檔格式讀出定義的樣式表。rel=“stylesheet”是指在頁(yè)面中使用這個(gè)外部的樣式表。type=“text/css”是指文件的類型是樣式表文本。href=“mystyle.css”是文件所在的位置，一般使用相對(duì)路徑來引用外部CSS文件。

6.1CSS基礎(chǔ)6.1.2在HTML頁(yè)面中引入CSS的方法一個(gè)外部樣式表文件可以應(yīng)用于多個(gè)頁(yè)面。當(dāng)改變這個(gè)樣式表文件時(shí)，所有引用該樣式表的HTML頁(yè)面都將受到影響。在制作大量相同樣式頁(yè)面的網(wǎng)站時(shí)，使用鏈入外部樣式表的方式控制多個(gè)頁(yè)面非常有用，不僅減少了重復(fù)的工作量，而且有利于以后的修改、編輯，瀏覽這些網(wǎng)頁(yè)時(shí)也減少了重復(fù)代碼的下載。

6.1CSS基礎(chǔ)6.1.2在HTML頁(yè)面中引入CSS的方法樣式表文件可以用任何文本編輯器（如記事本）打開并編輯，一般樣式表文件的擴(kuò)展名為“.css”。樣式表文件中不包含HTML標(biāo)記，mystyle.css這個(gè)文件的內(nèi)容如下：hr{color:red}p{margin-left:20px}body{background-image:url("images/bg_01.jpg")}（定義水平線的顏色為紅色；段落左邊的空白邊距為20象素；頁(yè)面的背景圖片為images目錄下的bg_01.jpg文件。）

6.1CSS基礎(chǔ)6.1.2在HTML頁(yè)面中引入CSS的方法2．內(nèi)部樣式表內(nèi)部樣式表是把樣式表放到頁(yè)面的<head>區(qū)里，這些定義的樣式就應(yīng)用到頁(yè)面中了，樣式表是用<style>標(biāo)記插入的:<head>……<styletype="text/css">hr{color:red}p{margin-left:20px}body{background-image:url("images/bg_01.jpg")}</style>……</head>

6.1CSS基礎(chǔ)6.1.2在HTML頁(yè)面中引入CSS的方法3．導(dǎo)入外部樣式表導(dǎo)入外部樣式表是指在內(nèi)部樣式表的<style>里試用@import導(dǎo)入一個(gè)外部樣式表:

<head>……<styletype=”text/css”><!--@import“mystyle.css”其他樣式表的聲明--></style>……</head>

6.1CSS基礎(chǔ)6.1.2在HTML頁(yè)面中引入CSS的方法3．導(dǎo)入外部樣式表其中@import“mystyle.css”表示導(dǎo)入mystyle.css樣式表，注意外部樣式表的路徑。方法和鏈入樣式表的方法很相似，但導(dǎo)入外部樣式表方式更有優(yōu)勢(shì)。實(shí)質(zhì)上它相當(dāng)于存在內(nèi)部樣式表中的。6.1CSS基礎(chǔ)6.1.2在HTML頁(yè)面中引入CSS的方法4．內(nèi)嵌樣式內(nèi)嵌樣式是混合在HTML標(biāo)記里使用的，用這種方法，可以很簡(jiǎn)單的對(duì)某個(gè)元素單獨(dú)定義樣式。內(nèi)嵌樣式是直接在HTML標(biāo)記里加入style參數(shù)。而style參數(shù)的內(nèi)容就是CSS的屬性和值，如：<pstyle=”color:red;margin-left:20px”>這是一個(gè)段落</p>（這個(gè)段落顏色為紅色，左邊距為20像素。Style參數(shù)后面引號(hào)里的內(nèi)容相當(dāng)于樣式表大括號(hào)里的內(nèi)容。）6.2CSS選擇器樣式表的定義由兩個(gè)主要的部分構(gòu)成：選擇器，以及一條或多條聲明。Selector{declaration1;declaration2;…eclaration}選擇器，英文稱為selector，是CSS中很重要的概念。所有HTML語(yǔ)言中的標(biāo)記樣式都是通過選擇器來進(jìn)行控制的。每條聲明由一個(gè)屬性和一個(gè)值組成。每個(gè)屬性有一個(gè)值。屬性和值之間用冒號(hào)分開。如果要定義不止一個(gè)聲明，則需要用分號(hào)將每個(gè)聲明分開。6.2CSS選擇器6.2.1標(biāo)記選擇器：整體控制標(biāo)記選擇器是最常見的CSS選擇器。一個(gè)HTML頁(yè)面有很多不同的標(biāo)記組成，而標(biāo)記選擇器，則是決定哪些標(biāo)記采用相應(yīng)的CSS樣式。因此，每一種HTML標(biāo)記的名稱都可以作為相應(yīng)的標(biāo)記選擇器的名稱，如圖所示。

CSS標(biāo)記選擇器6.2CSS選擇器6.2.1標(biāo)記選擇器：整體控制上圖中的CSS代碼聲明了HTML頁(yè)面中的所有的<h1>標(biāo)記，文字的顏色為紅色，字體大小為14px。在后期維護(hù)中，如果想改變整個(gè)網(wǎng)站中h1標(biāo)記文字的顏色，只需要修改color屬性就可以了。6.2CSS選擇器6.2.2類選擇器：精確控制定義類選擇器時(shí)，在自定義類的名稱前面加一個(gè)“.”號(hào)，類選擇器的名稱可以是任意英文單詞或者英文開頭與數(shù)字的組合，一般根據(jù)其功能和效果命名。與標(biāo)記選擇器一樣，屬性和值必須要符合CSS規(guī)范，如圖所示。類選擇器6.2CSS選擇器6.2.3id選擇器：控制特殊的網(wǎng)頁(yè)元素id選擇器可以為標(biāo)有特定

id的

HTML元素指定特定的樣式。定義id選擇器時(shí)在id名稱前加“#”，id選擇器是用來對(duì)單一元素定義單獨(dú)的樣式。Id選擇器的使用方法與class選擇器基本相同，如圖所示。

id選擇器6.2CSS選擇器6.2.4群選擇器當(dāng)幾個(gè)選擇器樣式屬性一樣時(shí)，可以共同調(diào)用一個(gè)聲明，選擇器之間用逗號(hào)分隔，這樣可以精簡(jiǎn)代碼?？梢园讶哼x擇器看成是幾個(gè)選擇器的并集。只要選擇器屬于并集都可以運(yùn)用該樣式。6.2CSS選擇器6.2.5交集選擇器交集選擇器是由兩個(gè)選擇器直接連接構(gòu)成。其結(jié)果是選中兩者各自元素范圍的交集。其中，第一個(gè)選擇器必須是標(biāo)記選擇器，第二個(gè)必須是類選擇器或id選擇器，而且必須連續(xù)書寫。6.2CSS選擇器6.2.6偽類選擇器偽類選擇器可以看做是一種特殊的類選擇器，偽類用于向某些選擇器添加特殊的效果。它可以對(duì)鏈接在不同狀態(tài)下定義不同的樣式效果。偽類的語(yǔ)法是在原有的語(yǔ)法里加上一個(gè)偽類（pseudo-class），如圖所示：偽類選擇器6.2CSS選擇器6.2.6偽類選擇器偽類選擇器主要用來定義鏈接在不同的狀態(tài)下顯示不同的效果。這些狀態(tài)包括：活動(dòng)狀態(tài)，已被訪問狀態(tài)，未被訪問狀態(tài)，和鼠標(biāo)懸停狀態(tài)。將偽類和類組合起來用，就可以在同一個(gè)頁(yè)面中做幾組不同的鏈接效果了。6.2CSS選擇器6.2.7CSS繼承CSS繼承是指父元素的樣式同樣適合于子元素。善于利用CSS繼承能夠使代碼更加簡(jiǎn)潔。例如定義p{color:red;}，則段落內(nèi)所有的文字都變成紅色。繼承也有其局限性，并非所有的CSS屬性都可以繼承。文本相關(guān)屬性、列表相關(guān)屬性、顏色相關(guān)屬性是可以繼承的。但是，border屬性是用來設(shè)置元素邊框的，不能被繼承。邊框類屬性如border，margin，padding之類都是不能被繼承的。6.2CSS選擇器6.2.7CSS繼承繼承有時(shí)也會(huì)引起錯(cuò)誤。例如定義body{color:red;}，有些瀏覽器會(huì)使表格之外的顏色變成紅色，表格卻不會(huì)改變，這時(shí)，可以定義為body,table,th,td{color:red;}使表格內(nèi)的文字都會(huì)變成紅色。6.2CSS選擇器6.2.8層疊CSS全稱叫做“層疊樣式表”，層疊是CSS中很重要的性質(zhì)。層疊和繼承有本質(zhì)的區(qū)別，不能將兩者混淆。可以將層疊理解為遇到樣式“沖突”時(shí)采用何種樣式。6.3創(chuàng)建CSS樣式6.3.1新建CSS樣式的方法在DreamweaverCS5.5中有以下幾種新建CSS樣式的方法：執(zhí)行【格式】→【CSS樣式】→【新建】菜單命令。在【CSS樣式】面板中，單擊鼠標(biāo)右鍵，從彈出的快捷菜單中單擊【新建】命令。在【CSS樣式】面板中，單擊面板右下側(cè)的【新建CSS規(guī)則】按鈕。在文檔窗口中選擇文本，從CSS【屬性】檢查器的【目標(biāo)規(guī)則】下拉列表中選擇【新建CSS規(guī)則】選項(xiàng)，然后單擊【編輯規(guī)則】按鈕，或者在右側(cè)單擊一個(gè)屬性按鈕（如單擊【斜體】按鈕）以新建規(guī)則。6.3創(chuàng)建CSS樣式6.3.2【CSS樣式】面板在DreamweaverCS5中，可以使用【CSS樣式】面板查看、創(chuàng)建、編輯和刪除CSS樣式，并且可以將外部樣式表附加到文檔中。1.打開【CSS樣式】面板打開【CSS樣式】面板的方法有以下3種：(1)執(zhí)行【窗口】→【CSS樣式】菜單命令。(2)按【Shift+F11】組合鍵。(3)在文檔窗口中選擇文本，在CSS【屬性】檢查器中單擊【CSS面板】按鈕。6.3創(chuàng)建CSS樣式6.3.2【CSS樣式】面板2.【當(dāng)前】模式下的【CSS樣式】面板使用【CSS樣式】面板可以跟蹤影響當(dāng)前所選頁(yè)面元素的CSS規(guī)則和屬性，即【當(dāng)前】模式下的【CSS樣式】面板。3.【全部】模式下的【CSS樣式】面板使用【CSS樣式】面板也可以跟蹤文檔可用的所有規(guī)則和屬性，即【全部】模式下的【CSS樣式】面板。4.

【CSS樣式】面板的按鈕在【全部】和【當(dāng)前】模式下，【CSS樣式】面板底部都包含有視圖按鈕和功能按鈕。6.3創(chuàng)建CSS樣式6.3.3創(chuàng)建樣式在DreamweaverCS5.5中可以創(chuàng)建類樣式、標(biāo)簽樣式和高級(jí)樣式，下面我們以創(chuàng)建標(biāo)簽樣式為例介紹創(chuàng)建樣式表的基本操作方法。執(zhí)行【格式】→【CSS樣式】→【新建】菜單命令，打開【新建CSS規(guī)則】對(duì)話框。在該對(duì)話框的【選擇器類型】下拉列表中選擇【標(biāo)簽】選項(xiàng)，然后在【選擇器名稱】下拉列表中選擇【td】選項(xiàng)，在【規(guī)則定義】下拉列表中選擇【（僅限該文檔）】選項(xiàng)。單擊【確定】按鈕，打開CSS規(guī)則定義對(duì)話框，在【分類】列表框中選擇【類型】選項(xiàng)，然后在右側(cè)設(shè)置屬性。6.3創(chuàng)建CSS樣式6.3.3創(chuàng)建樣式設(shè)置完成后，單擊【確定】按鈕，此時(shí)定義的樣式將顯示在【CSS樣式】面板中。在文檔窗口中將光標(biāo)定位在單元格中，在CSS【屬性】檢查器的【目標(biāo)規(guī)則】下拉列表中可以看到設(shè)置的樣式。6.4管理CSS樣式6.4.1編輯CSS樣式編輯CSS樣式即指對(duì)已存在的樣式進(jìn)行修改，可以采用以下兩種編輯方法進(jìn)行。1．在CSS規(guī)則定義對(duì)話框中編輯在【CSS樣式】面板中選取要編輯的樣式，單擊面板底部的【編輯樣式】按鈕，打開CSS規(guī)則定義對(duì)話框，在該對(duì)話框中按照定義新樣式的方法設(shè)置需要的樣式。用戶也可以在【所有規(guī)則】（【全部】模式）列表框中雙擊某條規(guī)則，打開CSS規(guī)則定義對(duì)話框，然后進(jìn)行更改；或者在【所選內(nèi)容的摘要】和【規(guī)則】（【當(dāng)前】模式）列表框中雙擊某個(gè)選項(xiàng)，打開CSS規(guī)則定義對(duì)話框，時(shí)行修改。6.4管理CSS樣式6.4.1編輯CSS樣式2．在面板的屬性列表框中編輯無(wú)論是在【全部】模式中還是在【當(dāng)前】模式中，我們都可以使用【CSS樣式】面板的屬性列表框來編輯屬性。6.4管理CSS樣式6.4.2添加屬性在【CSS樣式】面板的【所有規(guī)則】列表框（【全部】模式）中選擇一條規(guī)則，或者在【所選內(nèi)容的摘要】列表框（【當(dāng)前】模式）中選擇一個(gè)屬性，然后單擊面板底部的【只顯示設(shè)置屬性】按鈕，在屬性列表框中單擊【添加屬性】超鏈接，在彈出的列表框中選擇要添加的屬性，如選擇【background-color】選項(xiàng)，設(shè)置背景色，單擊右側(cè)的色塊，設(shè)置一種顏色。修改樣式的同時(shí)，應(yīng)用了該樣式的對(duì)象會(huì)顯示為更改樣式后的效果。6.4管理CSS樣式6.4.3鏈接和導(dǎo)入樣式表在【CSS樣式】面板中單擊【附加樣式表】按鈕，打開【鏈接到外部CSS樣式】對(duì)話框，在該對(duì)話框中可以鏈接外部已經(jīng)制作好的CSS樣式文件，如圖所示?！炬溄油獠繕邮奖怼繉?duì)話框6.4管理CSS樣式6.4.4移動(dòng)CSS規(guī)則Dreamweaver中的CSS管理功能可以讓規(guī)則在文檔間移動(dòng)、從文檔頭移動(dòng)到外部樣式表，或在外部CSS文件間移動(dòng)。1.將CSS規(guī)則移動(dòng)到新的樣式表中在【CSS樣式】面板中，選擇要移動(dòng)的一個(gè)或多個(gè)規(guī)則，若要選擇多個(gè)規(guī)則，按住【Ctrl】鍵再單擊要選擇的規(guī)則。然后單擊鼠標(biāo)右鍵，從彈出的快捷菜單中單擊【移動(dòng)CSS規(guī)則】命令，在打開的【移至外部樣式表】對(duì)話框中選中【新樣式表】單選按鈕，如圖所示。

【移至外部樣式表】對(duì)話框6.4管理CSS樣式6.4.4移動(dòng)CSS規(guī)則單擊【確定】按鈕，在打開的對(duì)話框中設(shè)置樣式表的名稱和保存位置，然后單擊【保存】按鈕，此時(shí)DreamweaverCS5.5會(huì)將選擇的規(guī)則保存至新樣式表，并將其附加到當(dāng)前文檔。2.將CSS規(guī)則移動(dòng)到現(xiàn)有樣式表中在【CSS樣式】面板中，選擇要移動(dòng)的一個(gè)或多個(gè)規(guī)則，然后單擊鼠標(biāo)右鍵，從彈出的快捷菜單中單擊【移動(dòng)CSS規(guī)則】命令，在打開的【移至外部樣式表】對(duì)話框中選中【樣式表】單擊按鈕，在右側(cè)的下拉列表中選擇現(xiàn)有的樣式表，或者單擊【瀏覽】按鈕，找到現(xiàn)有樣式表，然后單擊【確定】按鈕即可。6.5設(shè)置CSS樣式屬性6.5.1設(shè)置CSS【類型】分類屬性使用【CSS規(guī)則定義】對(duì)話框中的【類型】分類，可以定義CSS樣式的基本字體和字號(hào)等。在【CSS樣式】面板中選取要編輯的樣式，單擊面板底部的【編輯樣式】按鈕，打開CSS【規(guī)則定義】對(duì)話框，在該對(duì)話框的【分類】列表框中選擇【類型】選項(xiàng)，然后在右側(cè)設(shè)置屬性參數(shù)值，設(shè)置完成后單擊【確定】按鈕即可。6.5設(shè)置CSS樣式屬性6.5.2設(shè)置CSS【背景】分類屬性在【CSS規(guī)則定義】對(duì)話框的【分類】列表框中選擇【背景】選項(xiàng)，然后在右側(cè)可以設(shè)置相關(guān)的屬性，設(shè)置完成后單擊確定按鈕即可。6.5設(shè)置CSS樣式屬性6.5.3設(shè)置CSS【區(qū)塊】分類屬性在【CSS規(guī)則定義】對(duì)話框的【分類】列表框中選擇【區(qū)塊】選項(xiàng)，然后在右側(cè)可以設(shè)置相關(guān)的屬性，設(shè)置完成后單擊確定按鈕即可。6.5設(shè)置CSS樣式屬性6.5.4設(shè)置CSS【方框】分類屬性在【CSS規(guī)則定義】對(duì)話框的【分類】列表框中選擇【方框】選項(xiàng)，然后在右側(cè)可以設(shè)置相關(guān)的屬性，設(shè)置完成后單擊確定按鈕即可。6.5設(shè)置CSS樣式屬性6.5.5設(shè)置CSS【邊框】分類屬性在【CSS規(guī)則定義】對(duì)話框的【分類】列表框中選擇【邊框】選項(xiàng)，然后在右側(cè)可以設(shè)置相關(guān)的屬性，設(shè)置完成后單擊確定按鈕即可。6.5設(shè)置CSS樣式屬性6.5.6設(shè)置CSS【列表】分類屬性在【CSS規(guī)則定義】對(duì)話框的【分類】列表框中選擇【列表】選項(xiàng)，然后在右側(cè)可以設(shè)置相關(guān)的屬性，設(shè)置完成后單擊確定按鈕即可。6.5設(shè)置CSS樣式屬性6.5.7設(shè)置CSS【定位】分類屬性在【CSS規(guī)則定義】對(duì)話框的【分類】列表框中選擇【定位】選項(xiàng)，然后在右側(cè)可以設(shè)置相關(guān)的屬性，設(shè)置完成后單擊確定按鈕即可。6.5設(shè)置CSS樣式屬性6.5.8設(shè)置CSS【擴(kuò)展】分類屬性在【CSS規(guī)則定義】對(duì)話框的【分類】列表框中選擇【擴(kuò)展】選項(xiàng)，然后在右側(cè)可以設(shè)置相關(guān)的屬性，設(shè)置完成后單擊確定按鈕即可。6.6使用CSS對(duì)頁(yè)面進(jìn)行布局在使用CSS布局頁(yè)面時(shí)，網(wǎng)頁(yè)內(nèi)容會(huì)被添加到<div>標(biāo)簽中，然后將<div>標(biāo)簽放在不同的位置上，它與表格單元格（被限制在表格行和列中的某個(gè)現(xiàn)有位置）不同，<div>標(biāo)簽可以出現(xiàn)在Web頁(yè)上的任何位置，并且可以用絕對(duì)方式（指定X和Y坐標(biāo)）或相對(duì)方式（指定與其他頁(yè)面元素的距離）來定位<div>標(biāo)簽。當(dāng)使用Dreamweaver創(chuàng)建新頁(yè)面時(shí)，可以創(chuàng)建一個(gè)已包含CSS布局的頁(yè)面。Dreamweaver向用戶提供了多種不同的CSS布局樣式。另個(gè)，用戶還可以創(chuàng)建自己的CSS布局，并將它們添加到配置文件中，以便使它們?cè)凇拘陆ㄎ臋n】對(duì)話框中顯示為布局選項(xiàng)。6.6使用CSS對(duì)頁(yè)面進(jìn)行布局使用CSS布局創(chuàng)建頁(yè)面的具體操作如下：①執(zhí)行【文件】→【新建】菜單命令，打開【新建文檔】對(duì)話框。②選擇【空白頁(yè)】選項(xiàng)卡（默認(rèn)選擇），在【頁(yè)面類型】列表框中選擇【HTML】選項(xiàng)。③在右側(cè)的布局列表框中選擇要?jiǎng)?chuàng)建的布局類型，用戶可以在最右側(cè)的預(yù)覽欄中看到該布局樣式和該布局的簡(jiǎn)單說明。④在【文檔類型】下拉列表中選擇文檔的類型，一般保持默認(rèn)設(shè)置。⑤在【布局CSS位置】下拉列表中選擇布局CSS的位置，如選擇【添加到文檔頭】選項(xiàng)。⑥完成設(shè)置后，單擊【創(chuàng)建】按鈕即可。6.6使用CSS對(duì)頁(yè)面進(jìn)行布局在DreamweaverCS5.5中，CSS布局提供了以下幾種類型的列：(1)固定(2)彈性(3)液態(tài)(4)混合6.7項(xiàng)目實(shí)戰(zhàn)一：圖文列表圖文列表在網(wǎng)頁(yè)中的使用十分廣泛，它是網(wǎng)頁(yè)的基本組成部分，也是對(duì)前面章節(jié)知識(shí)的綜合應(yīng)用，本節(jié)通過一個(gè)實(shí)例詳細(xì)介紹圖文列表的使用方法。步驟如下：（1）設(shè)置新聞標(biāo)題（2）設(shè)置左側(cè)的圖文部分（3）設(shè)置右側(cè)文字列表（4）設(shè)置下方文字列表6.8項(xiàng)目實(shí)戰(zhàn)二：豎排導(dǎo)航做一個(gè)簡(jiǎn)單的豎直導(dǎo)航菜單，步驟如下：（1）通過ul和li制作一個(gè)豎排列表（2）消除重合（3）增加特效6.9項(xiàng)目實(shí)戰(zhàn)三：水平導(dǎo)航做一個(gè)簡(jiǎn)單的水平導(dǎo)航菜單，步驟如下：（1）設(shè)置整個(gè)菜單的寬度與字體樣式（2）設(shè)置ul的樣式（3）設(shè)置li左浮動(dòng)，使菜單項(xiàng)水平平鋪（4）設(shè)置a為塊級(jí)元素，響應(yīng)整個(gè)矩形的單擊事件（5）設(shè)置鼠標(biāo)經(jīng)過事件小結(jié)本章主要介紹了CSS基本語(yǔ)法，詳細(xì)地演示了創(chuàng)建與編輯CSS樣式的方法及如何在網(wǎng)頁(yè)中應(yīng)用CSS樣式，并通過案例來加以具體應(yīng)用，使讀者進(jìn)一步鞏固和掌握CSS樣式在網(wǎng)頁(yè)中的應(yīng)用技巧。ThankYou!網(wǎng)頁(yè)設(shè)計(jì)與制作第七章站點(diǎn)的發(fā)布與推廣一個(gè)站點(diǎn)在本地設(shè)計(jì)并制作完成后，需要把這個(gè)站點(diǎn)上傳到具有WEB服務(wù)器功能的主機(jī)上才可以被瀏覽者瀏覽。我們把這一過程稱作站點(diǎn)的發(fā)布。網(wǎng)站推廣就是以國(guó)際互聯(lián)網(wǎng)為基礎(chǔ)，利用nnt流量的信息和網(wǎng)絡(luò)媒體的交互性來輔助營(yíng)銷目標(biāo)實(shí)現(xiàn)的一種新型的市場(chǎng)營(yíng)銷方式。7.1測(cè)試站點(diǎn)測(cè)試站點(diǎn)指的是當(dāng)一個(gè)網(wǎng)站制作完上傳到服務(wù)器之后針對(duì)網(wǎng)站的各項(xiàng)性能情況的一項(xiàng)檢測(cè)工作。它與軟件測(cè)試有一定的區(qū)別，其除了要求外觀的一致性以外，還要求其在各個(gè)瀏覽器下的兼容性，以及在不同環(huán)境下的顯示差異。通常包括本地測(cè)試和web測(cè)試兩個(gè)過程。7.1測(cè)試站點(diǎn)7.1.1瀏覽器的兼容性（1）檢查瀏覽器的兼容性設(shè)置要測(cè)試的目標(biāo)瀏覽器,按照路徑【窗口】|【結(jié)果】|【瀏覽器兼容性】調(diào)出瀏覽器