DreamweaverCS6+HTML+CSS+DIV+JavaScript網(wǎng)站開(kāi)發(fā)案例PPT完整全套教學(xué)課件

第一章網(wǎng)頁(yè)基礎(chǔ)知識(shí)第1章網(wǎng)頁(yè)基礎(chǔ)知識(shí).pptx第2章（X)HTML和CSS.pptx第3章圖文混排和超鏈接.pptx第4章網(wǎng)頁(yè)布局方式-表格和DIV+CSS.pptx第5章模板和庫(kù).pptx第6章表單.pptx第7章框架和浮動(dòng)框架.pptx第8章網(wǎng)頁(yè)特效.pptx第9章網(wǎng)站測(cè)試、發(fā)布與推廣.pptx全套PPT課件課堂案例：企業(yè)網(wǎng)站的規(guī)劃和站點(diǎn)管理1.1本章通過(guò)學(xué)習(xí)網(wǎng)頁(yè)的基礎(chǔ)知識(shí)和DreamweaverCS6工具的基本使用，完成網(wǎng)站的需求分析、站點(diǎn)規(guī)劃和站點(diǎn)管理。DreamweaverCS6工具介紹和基本操作1.2網(wǎng)頁(yè)的類型常用的術(shù)語(yǔ)常用的網(wǎng)頁(yè)制作工具軟件網(wǎng)站的開(kāi)發(fā)流程網(wǎng)頁(yè)的構(gòu)成元素1.2.11.2.21.2.31.2.41.2.5網(wǎng)頁(yè)的構(gòu)成元素1.2.1網(wǎng)頁(yè)?網(wǎng)頁(yè)是網(wǎng)站中的任何一頁(yè)面，通常是HTML（是標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用）格式（文件擴(kuò)展名為html、或htm、或asp、或aspx、或php、或jsp等）。構(gòu)成網(wǎng)頁(yè)的元素，主要包括文字、圖像、音頻、視頻、動(dòng)畫(huà)、樣式、各類腳本等。網(wǎng)頁(yè)的構(gòu)成元素1.2.1文字圖像視頻動(dòng)畫(huà)HTMLCSSJavaScript文字是網(wǎng)頁(yè)最基本的組成元素之一。文字在網(wǎng)頁(yè)中的表現(xiàn)形式主要涉及到字體、字號(hào)和編碼;常見(jiàn)的中文字體有“宋體”、“楷體”、“仿宋”等;常見(jiàn)的英文字體有“Arial”，“TimesNewRoman”等;字號(hào)是指文字的大小，在網(wǎng)頁(yè)中，常用的字號(hào)的單位是px和pt。圖像也是網(wǎng)頁(yè)中最常見(jiàn)的元素之一，比文字的效果形象、生動(dòng)。常見(jiàn)的用于網(wǎng)頁(yè)中的圖像的格式主要有jpg(jpeg)、gif、png等。主要采用MP3和MIDI格式的音頻文件。音頻在網(wǎng)頁(yè)中播放視頻文件需要視頻播放插件的支持，目前網(wǎng)頁(yè)上常用的視頻文件的格式為WMV、FLV、MPEG、RM等。網(wǎng)頁(yè)動(dòng)畫(huà)主要是指swf文件，swf是Flash的專用格式，是一種支持矢量和點(diǎn)陣圖形的動(dòng)畫(huà)文件格式，被廣泛應(yīng)用于網(wǎng)頁(yè)設(shè)計(jì)、動(dòng)畫(huà)制作等領(lǐng)域，swf文件通常也被稱為Flash文件。HTML是用來(lái)制作網(wǎng)頁(yè)的標(biāo)記語(yǔ)言，HTML是HypertextMarkupLanguage的英文縮寫(xiě)，即超文本標(biāo)記語(yǔ)言。CSS層疊樣式表，使用CSS對(duì)網(wǎng)頁(yè)中元素的位置進(jìn)行像素級(jí)的精確控制。是一種基于對(duì)象和事件驅(qū)動(dòng)并具有相對(duì)安全性的客戶端腳本語(yǔ)言。網(wǎng)頁(yè)的類型1.2.2靜態(tài)網(wǎng)頁(yè)動(dòng)態(tài)網(wǎng)頁(yè)通常指的是文件后綴名為.html、.htm和.shtml等形式呈現(xiàn)的網(wǎng)頁(yè)。這類網(wǎng)頁(yè)的特點(diǎn)是，瀏覽器端不與服務(wù)器端發(fā)生交互。在制作靜態(tài)網(wǎng)頁(yè)的時(shí)候，不需要安裝WEB服務(wù)器，不連接數(shù)據(jù)庫(kù)，本教材所涉及的網(wǎng)頁(yè)均為靜態(tài)網(wǎng)頁(yè)。是指網(wǎng)頁(yè)文件里包含了程序代碼，通過(guò)后臺(tái)數(shù)據(jù)庫(kù)與Web服務(wù)器的信息交互，由后臺(tái)數(shù)據(jù)庫(kù)提供實(shí)時(shí)數(shù)據(jù)更新和數(shù)據(jù)查詢服務(wù)。這種網(wǎng)頁(yè)的后綴名稱一般根據(jù)不同的程序設(shè)計(jì)語(yǔ)言而不同，如常見(jiàn)的有.asp、aspx、jsp、.php等形式為后綴。如留言本，用戶可以通過(guò)網(wǎng)頁(yè)實(shí)現(xiàn)注冊(cè)、登錄、留言、修改留言等操作，再如企業(yè)網(wǎng)站，可以實(shí)現(xiàn)企業(yè)管理員通過(guò)網(wǎng)頁(yè)就可發(fā)布新聞、上傳產(chǎn)品信息、發(fā)布最新動(dòng)態(tài)等操作，還可以對(duì)發(fā)布的信息進(jìn)行修改、刪除等。注意：動(dòng)態(tài)網(wǎng)頁(yè)不是網(wǎng)頁(yè)動(dòng)畫(huà)，與網(wǎng)頁(yè)上的各種Flash動(dòng)畫(huà)、滾動(dòng)字幕、JavaScript網(wǎng)頁(yè)特效的視覺(jué)上的動(dòng)態(tài)效果是不同的概念，動(dòng)態(tài)網(wǎng)頁(yè)是與服務(wù)器發(fā)生交互，如用戶注冊(cè)時(shí)，在客戶端將注冊(cè)的信息通過(guò)網(wǎng)絡(luò)寫(xiě)入遠(yuǎn)程的數(shù)據(jù)庫(kù)中，再返回信息到客戶端的過(guò)程。常用的術(shù)語(yǔ)(1）1.2.3WWW是環(huán)球信息網(wǎng)（WorldWideWeb）的縮寫(xiě)，中文名字為“萬(wàn)維網(wǎng)”，"環(huán)球網(wǎng)"等，常簡(jiǎn)稱為Web。主要功能是提供網(wǎng)上信息瀏覽服務(wù)，常見(jiàn)的WEB服務(wù)器有IIS（InternetInformationServices）、Apache、Tomcat等。WEB服務(wù)器URL統(tǒng)一資源定位符（UniformResourceLocator，縮寫(xiě)為URL）是對(duì)可以從互聯(lián)網(wǎng)上得到的資源的位置和訪問(wèn)方法的一種簡(jiǎn)潔的表示，是互聯(lián)網(wǎng)上標(biāo)準(zhǔn)資源的地址。俗稱“網(wǎng)址”，互聯(lián)網(wǎng)上的域名必須經(jīng)過(guò)注冊(cè)才能使用，而且域名唯一的，例如輸入,打開(kāi)的網(wǎng)址就是網(wǎng)易。域名常用的術(shù)語(yǔ)(2）1.2.3網(wǎng)站發(fā)布是指完成一個(gè)網(wǎng)站的制作后，將網(wǎng)站上傳到網(wǎng)絡(luò)中供用戶訪問(wèn)的過(guò)程。網(wǎng)站的站點(diǎn)可以看作是網(wǎng)站中所有文件的集合，使用瀏覽器工具，可以從一個(gè)文檔跳轉(zhuǎn)到另一個(gè)文檔，實(shí)現(xiàn)對(duì)整個(gè)網(wǎng)站的瀏覽。站點(diǎn)分為本地站點(diǎn)和遠(yuǎn)程站點(diǎn)，本地站點(diǎn)通常是指本地計(jì)算機(jī)的一個(gè)文件夾地址，如C:\web。遠(yuǎn)程站點(diǎn)是指通過(guò)Internet實(shí)現(xiàn)對(duì)網(wǎng)站文件的瀏覽，網(wǎng)站文件存儲(chǔ)在Internet服務(wù)器上的位置，將存儲(chǔ)于Internet服務(wù)器上的網(wǎng)站文檔的集合稱作遠(yuǎn)程站點(diǎn)。WEB本地站點(diǎn)和遠(yuǎn)程站點(diǎn)超鏈接是指網(wǎng)頁(yè)間、網(wǎng)頁(yè)元素間的連接關(guān)系，從一個(gè)網(wǎng)頁(yè)通過(guò)點(diǎn)擊文字、圖片或其他元素打開(kāi)另一個(gè)對(duì)象的關(guān)系，這個(gè)目標(biāo)可以是另一個(gè)網(wǎng)頁(yè)，也可以是相同網(wǎng)頁(yè)上的不同位置，還可以是一個(gè)圖片，一個(gè)電子郵件地址，一個(gè)文件，甚至是一個(gè)應(yīng)用程序。常用的網(wǎng)頁(yè)制作工具軟件(1)1.1.4Dreamweaver：AdobeDreamweaver，簡(jiǎn)稱“DW”，中文名稱“夢(mèng)想編織者”，是Adobe公司開(kāi)發(fā)的集網(wǎng)頁(yè)制作和管理網(wǎng)站于一身的“所見(jiàn)即所得”網(wǎng)頁(yè)編輯器，它是第一套針對(duì)專業(yè)網(wǎng)頁(yè)設(shè)計(jì)師特別發(fā)展的視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具，能產(chǎn)生所見(jiàn)即所得的網(wǎng)頁(yè)，是廣泛網(wǎng)頁(yè)設(shè)計(jì)師使用的網(wǎng)頁(yè)編輯工具，本書(shū)主要使用Dreamweaver工具實(shí)現(xiàn)網(wǎng)頁(yè)的制作和網(wǎng)站的開(kāi)發(fā)。Flash是由Adobe公司推出的交互式矢量圖和Web動(dòng)畫(huà)的標(biāo)準(zhǔn)。網(wǎng)頁(yè)設(shè)計(jì)者使用Flash創(chuàng)作出既漂亮又可改變尺寸的導(dǎo)航界面以及其他奇特的效果，是商用的二維矢量動(dòng)畫(huà)軟件，用于設(shè)計(jì)和編輯Flash文檔，在網(wǎng)頁(yè)中大量采用由Flash工具生成的swf文件。Photoshop：簡(jiǎn)稱“PS”，是由AdobeSystems開(kāi)發(fā)和發(fā)行的圖像處理軟件。Photoshop主要處理以像素所構(gòu)成的數(shù)字圖像。使用其眾多的編修與繪圖工具，可以有效地進(jìn)行圖片編輯工作。PS有很多功能，在圖像、圖形、文字、視頻、出版等各方面都有涉及。網(wǎng)頁(yè)中主要使用PS來(lái)實(shí)現(xiàn)圖片的處理。常用的網(wǎng)頁(yè)制作工具軟件(2)1.2.4記事本：記事本是Windows系統(tǒng)自帶的簡(jiǎn)單的文本編輯軟件，但由于大部分代碼都是純文本的，所以記事本可以編寫(xiě)任何網(wǎng)頁(yè)。不過(guò)對(duì)于制作稍大型的網(wǎng)頁(yè)，需要編輯大量代碼時(shí)，使用記事本就不適合了，但對(duì)于初學(xué)者來(lái)說(shuō)，記事本是較好的練習(xí)工具，在學(xué)習(xí)HTML標(biāo)記語(yǔ)言時(shí)，使用記事本來(lái)編寫(xiě)，可以提高代碼的編寫(xiě)能力瀏覽器：瀏覽器是指可以顯示網(wǎng)頁(yè)服務(wù)器或者文件系統(tǒng)的HTML文件內(nèi)容，并讓用戶與這些文件交互的一種軟件。IETest：是一個(gè)免費(fèi)的IE瀏覽器測(cè)試工具，測(cè)試網(wǎng)頁(yè)在不同IE版本下兼容性的效果，是網(wǎng)頁(yè)設(shè)計(jì)者常用的網(wǎng)頁(yè)測(cè)試工具。FTP上傳工具：網(wǎng)站制作完成后，當(dāng)需要將本地文件上傳到遠(yuǎn)程站點(diǎn)時(shí)，往往采用FTP工具實(shí)現(xiàn)文件上傳，常用的FTP上傳工具有CuteFTP、FlashFTP等。網(wǎng)站的開(kāi)發(fā)流程(1)1.2.5在制作網(wǎng)站之前需要進(jìn)行建站前的準(zhǔn)備工作，分別是網(wǎng)站的需求分析、網(wǎng)站資料收集、網(wǎng)站規(guī)劃等，網(wǎng)站制作完成后，進(jìn)行網(wǎng)站測(cè)試和發(fā)布工作，網(wǎng)站交付用戶使用后，還需對(duì)網(wǎng)站進(jìn)行定期的維護(hù)和更新。需求分析建站目標(biāo)、網(wǎng)站需求網(wǎng)站規(guī)劃網(wǎng)站風(fēng)格、網(wǎng)站布局、網(wǎng)站內(nèi)容資料收集網(wǎng)站制作資料收集，制作網(wǎng)頁(yè)、模板、CSS等網(wǎng)站測(cè)試本地測(cè)試、遠(yuǎn)程測(cè)試網(wǎng)站發(fā)布空間域名、網(wǎng)站上傳更新維護(hù)網(wǎng)站管理網(wǎng)站的開(kāi)發(fā)流程（2）1.2.5網(wǎng)站中的文件和文件夾的命名主要采用字母、數(shù)字和下劃線，不采用中文字符或韓文等字符，數(shù)字和字母也不采用中文全角下的字符。網(wǎng)站的首頁(yè)的名稱一般為index.html或index.htm，首頁(yè)存儲(chǔ)在站點(diǎn)的根目錄下，合理規(guī)劃網(wǎng)站中的文件儲(chǔ)存的位置，要整齊有條理。網(wǎng)頁(yè)的寬度需要不要定義得太大或太小，要根據(jù)當(dāng)前的主流顯示器的分辨率來(lái)定義，目前采用1000-1200像素的寬度比較適合，內(nèi)容設(shè)置為居中效果。網(wǎng)頁(yè)的字體不宜采用特殊字體，由于瀏覽網(wǎng)頁(yè)是在用戶的電腦中，如果瀏覽者的系統(tǒng)中缺乏這些特殊字體，將用系統(tǒng)的默認(rèn)字體，所有網(wǎng)頁(yè)字體要選擇大眾化的字體或直接采用默認(rèn)字體。除了制作音頻或視頻類的網(wǎng)站，一個(gè)網(wǎng)頁(yè)中不要過(guò)多的使用網(wǎng)頁(yè)特效、動(dòng)畫(huà)、視頻、音頻等效果。圖像文件大小要控制在100K以內(nèi)，不使用超過(guò)500K的圖像文件。網(wǎng)站中的網(wǎng)頁(yè)要有返回首頁(yè)或上一級(jí)網(wǎng)頁(yè)的設(shè)置，切忌一個(gè)網(wǎng)頁(yè)沒(méi)有任何的超鏈接效果。網(wǎng)頁(yè)制作的原則：DreamweaverCS6工具介紹和基本操作1.3Dreamweaver對(duì)網(wǎng)頁(yè)文檔的基本操作DreamweaverCS6工具介紹1.3.11.3.2DreamweaverCS6工具介紹1.3.11啟動(dòng)DreamweaverCS6方法一：安裝好DreamweaverCS6后，可以創(chuàng)建桌面的快捷啟動(dòng)圖標(biāo)，通過(guò)雙擊圖標(biāo)啟動(dòng)DreamweaverCS6；方法二：點(diǎn)擊操作系統(tǒng)中的【程序】【所有程序】起始頁(yè)DreamweaverCS6工具介紹1.3.1設(shè)置【起始頁(yè)】：勾選“起始頁(yè)”左下角的【不再顯示】的復(fù)選框，可設(shè)置關(guān)閉“起始頁(yè)”的效果，如需重新開(kāi)啟改功能，單擊菜單欄的【編輯】【首選參數(shù)】【常規(guī)】【文檔類型】【顯示歡迎屏幕】，勾選這個(gè)選項(xiàng)重新啟動(dòng)“起始頁(yè)”。起始頁(yè)的設(shè)置DreamweaverCS6工具介紹1.3.12認(rèn)識(shí)DreamweaverCS6工作面板Dreamweave的工作界面是一個(gè)集成布局界面，將全部的元素置于一個(gè)窗口內(nèi)，在集成的工作界面中，全部窗口和面板都被集成到一個(gè)更大的應(yīng)用程序窗中，多個(gè)工具欄被集合到一起，工具欄都可以通過(guò)拖動(dòng)的方式分開(kāi)，也可以重新組合，工具欄可以通過(guò)菜單欄中【窗口】菜單選擇顯示和隱藏

。DreamweaverCS6工具介紹1.3.12認(rèn)識(shí)DreamweaverCS6工作面板注意：工具面板可通過(guò)菜單欄中的【窗口】菜單來(lái)實(shí)現(xiàn)顯示和關(guān)閉，例如要打開(kāi)【插入】面板，則點(diǎn)擊菜單欄的【窗口】【插入】工具面板上就可找到【插入】工具面板。DreamweaverCS6工具介紹1.3.12認(rèn)識(shí)DreamweaverCS6工作面板DreamweaverCS6提供3種工作區(qū)的視圖效果，【代碼】、【拆分】和【設(shè)計(jì)】；【代碼】：工作區(qū)只顯示HTML、CS、JavaScript或其他的代碼內(nèi)容；【設(shè)計(jì)】：工作區(qū)只顯示設(shè)計(jì)效果，不顯示代碼；【拆分】：工作區(qū)分成兩部分，一邊為【代碼】區(qū)，另一邊為【設(shè)計(jì)】區(qū)，默認(rèn)為左右拆分效果，可通過(guò)取消菜單欄的【查看】【垂直拆分】改成上下拆分效果。【實(shí)時(shí)視圖】：可以在DW的工作區(qū)中實(shí)現(xiàn)在“瀏覽器中預(yù)覽”的效果，點(diǎn)擊【實(shí)時(shí)視圖】后，在右邊會(huì)出現(xiàn)【實(shí)時(shí)代碼】和【檢查】?jī)蓚€(gè)按鈕，【實(shí)時(shí)代碼】可顯示網(wǎng)頁(yè)的HTML源代碼，【檢查】的作用是能自動(dòng)檢查源碼中的錯(cuò)誤代碼。DreamweaverCS6工具介紹1.3.12認(rèn)識(shí)DreamweaverCS6工作面板DreamweaverCS6的屬性面板默認(rèn)在窗口的下部，會(huì)隨著鼠標(biāo)所在位置或所選對(duì)象的不同顯示相對(duì)應(yīng)的屬性面板內(nèi)容。DreamweaverCS6工具介紹1.3.12認(rèn)識(shí)DreamweaverCS6工作面板【當(dāng)前標(biāo)簽】：光標(biāo)所在位置的HTML標(biāo)簽名稱；【狀態(tài)欄】：狀態(tài)欄位于文檔窗口的底部，它的作用是顯示當(dāng)前正在編輯的文檔的相關(guān)信息，主要包含當(dāng)前窗口大小、文檔大小、當(dāng)前標(biāo)簽、估計(jì)下載時(shí)間、當(dāng)前頁(yè)面編碼類型等?！井?dāng)前文檔】：表示當(dāng)前編輯的文檔名稱，通過(guò)點(diǎn)文檔名稱可更改當(dāng)前編輯的文檔。DreamweaverCS6工具介紹1.3.13DreamweaverCS6常用工具面板介紹【插入】工具面板是可以從工具欄在通過(guò)拖拽的方式放置到窗口的其他位置，一種常用的方式是將【插入】面板放置到【菜單欄】的下方。【插入】面板包括9個(gè)項(xiàng)目，分別為【插入】、【布局】、【表單】、【數(shù)據(jù)】、【Spry】、【JQueryMobile】、【InContextEditing】、【文本】、【收藏夾】。DreamweaverCS6工具介紹1.3.13DreamweaverCS6常用工具面板介紹文檔工具欄主要包含一些對(duì)文檔進(jìn)行常用操作的功能按鈕，通過(guò)單擊這些按鈕，用戶可以在文檔的不同視圖模式間進(jìn)行快速切換?！径嗥聊弧浚?jiǎn)螕粼摪粹o，在彈出的菜單用戶可以選擇網(wǎng)頁(yè)顯示的屏幕分辨率，也可以選擇預(yù)覽的設(shè)備，例如功能手機(jī)、智能手機(jī)和平板電腦?！驹跒g覽器中預(yù)覽/調(diào)試】：該按鈕通過(guò)指定瀏覽器預(yù)覽網(wǎng)頁(yè)文檔，可以在文檔中存在JavaScript錯(cuò)誤時(shí)查找錯(cuò)誤?！疚募芾怼浚河糜诳焖賵?zhí)行【獲取】、【取出】、【上傳】、【存回】等文件管理命令。【W(wǎng)3C驗(yàn)證】：?jiǎn)螕粼摪粹o，可彈出W3C驗(yàn)證菜單?！究梢暬怼浚河糜谠谖臋n窗口中顯示各種可視化助理?！緳z查瀏覽器兼容性】：檢查所設(shè)計(jì)的頁(yè)面對(duì)不同類型的瀏覽器的兼容性，單擊該按鈕，在彈出的菜單中選擇相應(yīng)的命令檢查對(duì)應(yīng)的兼容性。【刷新設(shè)計(jì)視圖】：在代碼視圖中修改網(wǎng)頁(yè)內(nèi)容后，可以使用該按鈕刷新文檔窗口?！緲?biāo)題】文本框：可以輸入要在網(wǎng)頁(yè)瀏覽器上顯示的文檔標(biāo)題。DreamweaverCS6工具介紹1.3.13DreamweaverCS6常用工具面板介紹【文件】工具欄的功能主要是文件管理、轉(zhuǎn)換站點(diǎn)。點(diǎn)擊【本地視圖】選項(xiàng)，可以選擇【本地視圖】、【遠(yuǎn)程服務(wù)器】、【測(cè)試服務(wù)器】和【存儲(chǔ)庫(kù)視圖】（見(jiàn)圖1-2-12）。常用的是【本地視圖】選項(xiàng)，并選擇對(duì)應(yīng)的站點(diǎn)轉(zhuǎn)換文件信息。DreamweaverCS6工具介紹1.3.14創(chuàng)建和管理站點(diǎn)在定義站點(diǎn)前，必須先規(guī)劃好網(wǎng)站中的文件夾，定義好網(wǎng)站的制作過(guò)程中各種文件的存放的位置，定義D:\web文件夾為網(wǎng)站的站點(diǎn)文件夾，在web文件夾中分別創(chuàng)建image、file、css、js文件夾,image文件夾用來(lái)存放圖像文件，file文件夾用來(lái)存放除了首頁(yè)外的其他網(wǎng)頁(yè)文件，css文件夾用來(lái)存放站點(diǎn)中的CSS文件，js文件夾用來(lái)存放網(wǎng)頁(yè)特效文件。步驟1單擊Dreamweaver菜單欄的【站點(diǎn)】【新建站點(diǎn)(N)】命令，即可打開(kāi)【站點(diǎn)設(shè)置面板】對(duì)話框，修改【站點(diǎn)名稱】為”mysite”（名稱可以自定義），設(shè)置本地計(jì)算機(jī)站點(diǎn)文件位置為D:\WEB（位置可以自定義）后，若直接點(diǎn)擊【保存】則創(chuàng)建了最簡(jiǎn)單的站點(diǎn)，如果想設(shè)置的圖像文件夾，則點(diǎn)擊【高級(jí)設(shè)置】設(shè)置。步驟2DreamweaverCS6工具介紹1.3.14創(chuàng)建和管理站點(diǎn)點(diǎn)擊【高級(jí)設(shè)置】【本地信息】選項(xiàng)中的【默認(rèn)圖像文件夾】，設(shè)置站點(diǎn)中圖片存放的默認(rèn)位置，當(dāng)從站點(diǎn)外插入一張圖片時(shí)，圖片會(huì)自動(dòng)存放在該文件夾中。【站點(diǎn)范圍媒體查詢文件】是指站點(diǎn)的CSS文件，該選項(xiàng)需要CSS文件已創(chuàng)建好的情況下選擇，如果沒(méi)有CSS文件，就不設(shè)置。步驟3點(diǎn)擊【保存】按鈕完成站點(diǎn)的創(chuàng)建。步驟4DreamweaverCS6工具介紹1.3.14創(chuàng)建和管理站點(diǎn)管理站點(diǎn)。站點(diǎn)創(chuàng)建完成后，當(dāng)要修改站點(diǎn)信息時(shí)，在菜單欄中選擇【站點(diǎn)】【管理站點(diǎn)】，打開(kāi)【管理站點(diǎn)】面板，可雙擊站點(diǎn)的名稱“mysite”，或者選擇站點(diǎn)后，點(diǎn)擊【編輯當(dāng)前選定的站點(diǎn)】圖標(biāo)，打開(kāi)【站點(diǎn)設(shè)置對(duì)象】面板（見(jiàn)圖1-2-17），進(jìn)行修改。步驟5DreamweaverCS6工具介紹1.3.14創(chuàng)建和管理站點(diǎn)Dreamweaver還提供刪除站點(diǎn)、復(fù)制站點(diǎn)信息、導(dǎo)出站點(diǎn)、導(dǎo)入站點(diǎn)的功能。復(fù)制站點(diǎn)就是將當(dāng)前站點(diǎn)信息進(jìn)行復(fù)制，請(qǐng)注意，只是復(fù)制站點(diǎn)的信息，并不是復(fù)制站點(diǎn)的文件，與站點(diǎn)的文件無(wú)關(guān)。導(dǎo)出站點(diǎn)就是將站點(diǎn)信息導(dǎo)出存為mysite.ste文件，方便移動(dòng)到其他設(shè)備上導(dǎo)入站點(diǎn)信息，【導(dǎo)入站點(diǎn)】就是將導(dǎo)出的站點(diǎn)導(dǎo)入到Dreamweaver中，單擊【管理站點(diǎn)】中的【導(dǎo)入站點(diǎn)】，選擇mysite.ste文件，可以自動(dòng)將站點(diǎn)定義完成。Dreamweaver對(duì)網(wǎng)頁(yè)文檔的基本操作1.3.21創(chuàng)建一個(gè)新的網(wǎng)頁(yè)方法一：點(diǎn)擊【起始頁(yè)】【新建】【HTML】新建一個(gè)空白的網(wǎng)頁(yè)文檔；方法二：選擇菜單欄中的【文件】【新建】，在彈出的【新建文檔】對(duì)話框中，選擇【空白頁(yè)】【頁(yè)面類型-HTML】【布局-無(wú)】【創(chuàng)建】新建一個(gè)空白的網(wǎng)頁(yè)文檔Dreamweaver對(duì)網(wǎng)頁(yè)文檔的基本操作1.3.21創(chuàng)建一個(gè)新的網(wǎng)頁(yè)選擇工具面板的【文件】，在【本地文件】面板中，在空白位置單擊鼠標(biāo)右鍵，在彈出的菜單中選擇【新建文件（F）】,新建一個(gè)空白的網(wǎng)頁(yè)文檔。新建的文件名為Untited-X(X表示從1開(kāi)始的數(shù)字)，可采用三種方法中的任意一種方式創(chuàng)建新的網(wǎng)頁(yè)。Dreamweaver對(duì)網(wǎng)頁(yè)文檔的基本操作1.3.22保存網(wǎng)頁(yè)文檔單擊Dreamweaver的選擇菜單欄【文件】【保存】命令（或按Ctrl+S鍵），打開(kāi)【另存為】對(duì)話框,然后在該對(duì)話框中選擇文檔存放的位置并輸入保存的文件名稱，單擊【保存】按鈕，即可將當(dāng)前打開(kāi)的網(wǎng)頁(yè)保存。單擊菜單中的【文件】【保存全部】可實(shí)現(xiàn)保存正在Drewmweaver中打開(kāi)的所有文檔。Dreamweaver對(duì)網(wǎng)頁(yè)文檔的基本操作1.3.2方法一：選擇菜單欄的【文件】【打開(kāi)】，在【打開(kāi)】對(duì)話框中，在【查找路徑】中選擇對(duì)應(yīng)文件夾，點(diǎn)擊需打開(kāi)的文件名，點(diǎn)擊【打開(kāi)】按鈕打開(kāi)對(duì)應(yīng)文檔3打開(kāi)網(wǎng)頁(yè)文檔的方式方法二：在工具面板中，點(diǎn)擊【文件】，在打開(kāi)的文件面板中，在【本地試圖】的【本地文件】（見(jiàn)圖1-2-24）中，選擇需要打開(kāi)的文檔，雙擊鼠標(biāo)左鍵打開(kāi)文檔課堂案例：企業(yè)網(wǎng)站的規(guī)劃和站點(diǎn)的管理網(wǎng)站的需求分析階段1.4.1網(wǎng)站的規(guī)劃1.4.2站點(diǎn)管理1.4.31.4網(wǎng)站的需求分析階段1.4.1網(wǎng)站的需求分析主要分功能需求和非功能需求。功能性需求是指具體的完成內(nèi)容的需求。非功能性需求是指為滿足用戶業(yè)務(wù)需求而必須具有且除功能需求以外的特性，包括系統(tǒng)的性能、可靠性、可維護(hù)性、可擴(kuò)充性和對(duì)技術(shù)和對(duì)業(yè)務(wù)的適應(yīng)性等。企業(yè)展示宣傳，通過(guò)網(wǎng)站向消費(fèi)者展現(xiàn)企業(yè)的雄厚實(shí)力；發(fā)布信息，瀏覽者通過(guò)網(wǎng)站可以得知企業(yè)最新新聞資訊；加強(qiáng)與客戶的溝通，收集整理消費(fèi)者/代理經(jīng)銷商投訴、咨詢及建議，并及時(shí)反饋；產(chǎn)品展示，瀏覽者通過(guò)網(wǎng)站可得到有關(guān)企業(yè)產(chǎn)品詳細(xì)信息網(wǎng)絡(luò)招聘，應(yīng)聘者可通過(guò)網(wǎng)絡(luò)發(fā)送簡(jiǎn)歷。功能性需求網(wǎng)站實(shí)施環(huán)境，域名、空間的申請(qǐng)；網(wǎng)站的后期維護(hù)和更新；網(wǎng)站的擴(kuò)展接口的設(shè)計(jì)。非功能性需求網(wǎng)站的規(guī)劃1.4.2網(wǎng)站的規(guī)劃主要從網(wǎng)站的風(fēng)格，網(wǎng)站布局和網(wǎng)站內(nèi)容三個(gè)方面考慮。網(wǎng)站風(fēng)格大尚鞋業(yè)”的公司產(chǎn)品是以鞋類為主，分為女性的高跟鞋、坡跟鞋、靴子等和男性的皮鞋、板鞋，以大眾化產(chǎn)品為主，所以在色彩上，以白色為背景，淺藍(lán)色為主要色調(diào)，在產(chǎn)品的圖片上，結(jié)合其他顏色搭配。網(wǎng)站布局網(wǎng)頁(yè)的布局主要有三大類，“國(guó)”字型、框架型和封面型。網(wǎng)站內(nèi)容站點(diǎn)的內(nèi)容分為首頁(yè)、關(guān)于我們、新聞資訊、產(chǎn)品中心和聯(lián)系我們五個(gè)方面.“國(guó)”字型又稱為“同”字型，從上之下，網(wǎng)頁(yè)布局按照LogoBanner導(dǎo)航條主要內(nèi)容版權(quán)信息的順序進(jìn)行設(shè)計(jì)，外觀方正整潔，一般企業(yè)網(wǎng)站、門(mén)戶網(wǎng)站采用“國(guó)”字型結(jié)構(gòu)。框架型又可以分為上下框架和左右框架，一般用在論壇、網(wǎng)站后臺(tái)的布局設(shè)計(jì)；封面性的布局往往是由flash的動(dòng)畫(huà)加入幾個(gè)鏈接，或是一個(gè)圖片上進(jìn)行切割或加入局部超鏈接的頁(yè)面，是個(gè)性化的結(jié)構(gòu)，個(gè)人網(wǎng)站、娛樂(lè)網(wǎng)站、游戲網(wǎng)站教喜歡采用個(gè)性化的布局。由于大尚鞋業(yè)是企業(yè)網(wǎng)站，所以采用“國(guó)”字型的布局結(jié)構(gòu)。站點(diǎn)管理1.4.3在DreamweaverCS6中創(chuàng)建站點(diǎn)，命名為“dashang”，并創(chuàng)建站點(diǎn)的圖像文件夾為“images”，創(chuàng)建網(wǎng)站的首頁(yè)文檔“index.html”，在DreamweaverCS6的菜單欄單擊選擇【站點(diǎn)】【新建站點(diǎn)】，打開(kāi)【站點(diǎn)設(shè)置對(duì)象】對(duì)話框，在【站點(diǎn)】【站點(diǎn)名稱】的輸入框中輸入“dashang”，點(diǎn)擊【本地站點(diǎn)文件夾】輸入框后面的【瀏覽文件夾】按鈕，打開(kāi)【選擇根文件夾】對(duì)話框，在【選擇】中選擇好位置，在【名稱】中點(diǎn)擊將設(shè)置為站點(diǎn)的文件夾（如需要新建文件夾，則點(diǎn)擊鼠標(biāo)右鍵，在菜單中選擇【新建文件夾】，或點(diǎn)擊【選擇】輸入框旁的【創(chuàng)建新文件夾】按鈕），按【選擇】按鈕確定。步驟一站點(diǎn)管理1.4.3在DreamweaverCS6中創(chuàng)建站點(diǎn)，命名為“dashang”，并創(chuàng)建站點(diǎn)的圖像文件夾為“images”，創(chuàng)建網(wǎng)站的首頁(yè)文檔“index.html”，步驟二點(diǎn)擊左邊命令中的【高級(jí)設(shè)置】【本地信息】【默認(rèn)圖像文件夾】，點(diǎn)擊【瀏覽文件夾】按鈕，選擇站點(diǎn)dashang文件夾內(nèi)的images文件夾（圖像文件夾必須位于站點(diǎn)文件夾內(nèi)），點(diǎn)擊【打開(kāi)】，進(jìn)入images文件夾，再點(diǎn)擊【選擇】按鈕。站點(diǎn)管理1.4.3在DreamweaverCS6中創(chuàng)建站點(diǎn)，命名為“dashang”，并創(chuàng)建站點(diǎn)的圖像文件夾為“images”，創(chuàng)建網(wǎng)站的首頁(yè)文檔“index.html”，步驟三選中【文件】工具面板中的【本地文件】的站點(diǎn)名稱，點(diǎn)擊鼠標(biāo)右鍵，在彈出的菜單用選擇“新建文件”，并將網(wǎng)頁(yè)名稱改為“index.html”。站點(diǎn)管理1.4.3在DreamweaverCS6中創(chuàng)建站點(diǎn)，命名為“dashang”，并創(chuàng)建站點(diǎn)的圖像文件夾為“images”，創(chuàng)建網(wǎng)站的首頁(yè)文檔“index.html”，步驟四在DreamweaverCS6中打開(kāi)index.html文件，在設(shè)計(jì)視圖中輸入“一行文字這是網(wǎng)站的首頁(yè)”，并修改標(biāo)題的內(nèi)容為“首頁(yè)”，保存網(wǎng)頁(yè)，點(diǎn)擊

按鈕下的【預(yù)覽在IExplore】選項(xiàng)，在IExplore中預(yù)覽網(wǎng)頁(yè)的效果。站點(diǎn)管理1.4.3在DreamweaverCS6中創(chuàng)建站點(diǎn)，命名為“dashang”，并創(chuàng)建站點(diǎn)的圖像文件夾為“images”，創(chuàng)建網(wǎng)站的首頁(yè)文檔“index.html”，步驟五點(diǎn)擊彈出的對(duì)話框中的【是】，并打IE瀏覽器，顯示網(wǎng)頁(yè)index.html的預(yù)覽效果。

本章主要介紹了網(wǎng)頁(yè)的基礎(chǔ)知識(shí)、DreamweaverCS6的界面和基本操作。先從網(wǎng)頁(yè)的基礎(chǔ)知識(shí)開(kāi)始，介紹網(wǎng)頁(yè)、網(wǎng)站的定義，常用術(shù)語(yǔ)，網(wǎng)頁(yè)的組成元素，接著介紹網(wǎng)站的開(kāi)發(fā)流程，然后介紹DreamweaverCS6的工具界面的介紹和網(wǎng)頁(yè)的創(chuàng)建、保存，站點(diǎn)的創(chuàng)建、修改、導(dǎo)入導(dǎo)出的基本操作，重點(diǎn)是站點(diǎn)的創(chuàng)建和管理。最后通過(guò)一個(gè)簡(jiǎn)單的實(shí)例，讓讀者學(xué)習(xí)如何設(shè)計(jì)網(wǎng)站的內(nèi)容，如何對(duì)站點(diǎn)進(jìn)行創(chuàng)建和站點(diǎn)的目錄安排。第二章（X）HTML和CSS課堂案例：人物介紹網(wǎng)頁(yè)的制作2.1本章通過(guò)對(duì)HTML語(yǔ)言和CSS的學(xué)習(xí)，能制作簡(jiǎn)單的人物介紹網(wǎng)頁(yè)，并通過(guò)學(xué)習(xí)CSS樣式，增加網(wǎng)頁(yè)的美觀性。HTML語(yǔ)言和XHTML語(yǔ)言2.2HTML與XHTML概述2.2.1HTML文檔結(jié)構(gòu)2.2.2HTML標(biāo)簽和屬性2.2.3XHTML與HTML的區(qū)別2.2.4常用的HTML標(biāo)簽2.2.5DOCTYPE（文檔類型）的含義和選擇2.2.6HTML與XHTML概述（1）2.2.1HTML(HypertextMarkedLanguage)即超文本標(biāo)簽語(yǔ)言，是一種用來(lái)制作超文本文檔的簡(jiǎn)單標(biāo)簽語(yǔ)言,網(wǎng)頁(yè)的一種規(guī)范，通過(guò)特定的標(biāo)簽來(lái)定義網(wǎng)頁(yè)內(nèi)容的呈現(xiàn)方式。用HTML編寫(xiě)的超文本文檔稱為HTML文檔，HTML文檔有.html和.htm兩種格式，兩種格式文件都能被當(dāng)前的瀏覽器軟件解析，并有良好的跨平臺(tái)特性，能獨(dú)立于各種操作系統(tǒng)平臺(tái)，自1990年以來(lái)HTML就一直被用作WWW（是WorldWideWeb的縮寫(xiě)，也可簡(jiǎn)寫(xiě)WEB、中文叫做萬(wàn)維網(wǎng))的信息表示語(yǔ)言，使用HTML語(yǔ)言描述的文件，需要通過(guò)WEB瀏覽器顯示效果。所謂超文本，是因?yàn)樗梢约尤雸D片、聲音、動(dòng)畫(huà)、影視等內(nèi)容。HTML的普遍應(yīng)用就是帶來(lái)了超文本的技術(shù),通過(guò)單擊鼠標(biāo)從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面與世界各地主機(jī)的文件鏈接。頁(yè)面的組成元素由標(biāo)簽定義瀏覽器的輸出效果,這些標(biāo)簽每個(gè)都有“<”、“>”和由字符串組的標(biāo)簽名稱構(gòu)成，而瀏覽器的功能是對(duì)這些標(biāo)簽進(jìn)行解釋，顯示出文字、圖像、動(dòng)畫(huà)、播放聲音。這些標(biāo)簽符號(hào)用“<標(biāo)簽名字屬性>”來(lái)表示。HTML與XHTML概述（2）2.2.1XHTML(theeXtensibleHyperTextMarkuupLanguage)，即可擴(kuò)展的超文本標(biāo)記語(yǔ)言，是由HTML發(fā)展而來(lái)的網(wǎng)頁(yè)編寫(xiě)語(yǔ)言，XHTML與HTML4.01幾乎是相同的，也是目前網(wǎng)絡(luò)中常見(jiàn)的網(wǎng)頁(yè)編寫(xiě)語(yǔ)言。與HTML文檔相比，XHTML文檔的結(jié)構(gòu)更加規(guī)范與嚴(yán)謹(jǐn)，標(biāo)簽名字一定要用小寫(xiě)字母，所有的XHTML元素一定要關(guān)閉，XHTML文檔具有固定的結(jié)構(gòu)，其中包括定義文檔類型、根元素、頭部元素、主體元素4個(gè)部份。HTML文檔結(jié)構(gòu)2.2.2<html><head><title>這是一個(gè)HTML文檔</title></head><body>這是主體部份的內(nèi)容，這里可以放置文字、圖片、視頻等元素</body></html>①一個(gè)HTML文檔里的元素是以<html>為起始標(biāo)簽，以</html>為結(jié)束標(biāo)簽；②<head></head>是HTML文檔的頭部標(biāo)簽,在瀏覽器窗口中，頭部信息是不被顯示在正文中的。③<title>和</title>是嵌套在<head>頭部標(biāo)簽中的，標(biāo)簽之間的文本是文檔標(biāo)題，它被顯示在瀏覽器窗口的標(biāo)題欄。④<body></body>標(biāo)簽一般不省略，標(biāo)簽之間的文本是正文，是在瀏覽器要顯示的頁(yè)面內(nèi)容。HTML文檔是由一系列的元素和標(biāo)簽組成，元素名稱不區(qū)分大小寫(xiě)，HTML用標(biāo)簽來(lái)規(guī)定元素的屬性和它在文件中的位置，HTML超文本文檔分文檔頭部和文檔主體兩部分，在文檔頭部里，是設(shè)置文檔的基本信息，文檔主體是要顯示的各種文檔信息。HTML標(biāo)簽和屬性2.2.3HTML的標(biāo)簽分單標(biāo)簽和成對(duì)標(biāo)簽兩種。成對(duì)標(biāo)簽是由首標(biāo)簽<標(biāo)簽名>和尾標(biāo)簽</標(biāo)簽名>組成的，如<p></p>，成對(duì)標(biāo)簽的作用域只作用于這對(duì)標(biāo)簽中的文檔。單獨(dú)標(biāo)簽的格式<標(biāo)簽名/>，單獨(dú)標(biāo)簽在相應(yīng)的位置插入元素就可以了，如<br>大部分標(biāo)簽都有自己的一些屬性,屬性要寫(xiě)在始標(biāo)簽內(nèi)，屬性用于進(jìn)一步改變顯示的效果,各屬性之間無(wú)先后次序，屬性是可選的，屬性也可以省略而采用默認(rèn)值;其格式如下：

<標(biāo)簽名稱屬性1屬性2屬性3>內(nèi)容</標(biāo)簽名稱>屬性標(biāo)簽注意事項(xiàng)：輸入始標(biāo)簽時(shí)，一定不要在“<”與標(biāo)簽名之間輸入多余的空格，也不能在中文輸入法狀態(tài)下輸入這些標(biāo)簽及屬性，否則瀏覽器將不能正確的識(shí)別括號(hào)中的標(biāo)志命令，從而無(wú)法正確的顯示你的信息。XHTML與HTML的區(qū)別2.2.4XHTML是一個(gè)基于XML的置標(biāo)語(yǔ)言，與HTML相象，本質(zhì)上說(shuō)，XHTML是一個(gè)過(guò)渡技術(shù)，結(jié)合了XML的強(qiáng)大功能及HTML的簡(jiǎn)單特性，XHTML的語(yǔ)法較為嚴(yán)謹(jǐn)，與HTML的區(qū)別主要是下面幾點(diǎn)：所有的元素都必須有結(jié)束標(biāo)簽或者以特殊的方式書(shū)寫(xiě)，而且所有的標(biāo)簽必須合理地嵌套；元素名稱和屬性必須小寫(xiě)，例如：<br/>不能寫(xiě)為<BR/>;屬性值必須總是使用引號(hào)包裹，例如：必須使用<imgsrc="abc.jpg"alt=""/>而不能使用<imgsrc=abc.jpgalt="">;禁止屬性簡(jiǎn)化;單標(biāo)簽必須有一個(gè)結(jié)束標(biāo)簽，或者用/>來(lái)結(jié)束開(kāi)始標(biāo)簽，例如：<br>要寫(xiě)成<br/>.

目前網(wǎng)頁(yè)的文檔類型基本使用XHTML1.0Transitional（XHTML過(guò)渡型）或者HTML5。常用的HTML標(biāo)簽2.2.51主體標(biāo)簽body2文本文字標(biāo)簽3段落標(biāo)簽和換行標(biāo)簽4超鏈接標(biāo)簽5插入圖片標(biāo)簽<img>6列表標(biāo)簽7表格標(biāo)簽8特殊字符9插入水平線1主體標(biāo)簽body在<body>和</body>中放置的是頁(yè)面中所有的內(nèi)容，如圖片、文字、表格、表單、超鏈接等設(shè)置。<body>標(biāo)簽有自己的屬性，設(shè)置<body>標(biāo)簽內(nèi)的屬性，可控制整個(gè)頁(yè)面的顯示方式。屬性描述background設(shè)定頁(yè)面的背景圖片bgcolor設(shè)置頁(yè)面的背景顏色link設(shè)置頁(yè)面默認(rèn)連接文字的顏色text設(shè)置頁(yè)面文字的顏色<html><head><meta

http-equiv="Content-Type"

content="text/html;

charset=utf-8"

/><title>這是一個(gè)HTML網(wǎng)頁(yè)</title></head><body

bgcolor="#00FFFF"

text="#FF0000">這是網(wǎng)頁(yè)的主體</body></html>注意：要正確的顯示網(wǎng)頁(yè)的文字，必須先定義好網(wǎng)頁(yè)的編碼，<meta>標(biāo)簽中的charset的作用是定義當(dāng)前網(wǎng)頁(yè)的編碼格式，utf-8是國(guó)際編碼，一般網(wǎng)頁(yè)都采用該編碼，針對(duì)中文字符，也可以采用gb2312或gbk這兩種編碼。2文本文字標(biāo)簽文字標(biāo)簽<font>可以設(shè)置文字的大小、顏色、字體等效果名稱屬性默認(rèn)值color設(shè)置文字顏色黑色size設(shè)置文字字號(hào)大小3face設(shè)置文字的字體宋體（系統(tǒng)默認(rèn)字體）<html><head><meta

http-equiv="Content-Type"

content="text/html;

charset=utf-8"

/><title>這是一個(gè)HTML網(wǎng)頁(yè)</title></head><body

bgcolor="#00FFFF"

text="#FF0000"><font

color="#000099"

size="5"

face="黑體"

>文字</font>

</body></html>名稱說(shuō)明<b>加粗，文字以加粗方式顯示<i>斜體，文字以斜體方式顯示<u>下劃線，文字加下劃線顯示<strong>強(qiáng)調(diào)，文字加粗顯示<em>強(qiáng)調(diào)，文字斜體顯示cite引證標(biāo)簽，文字斜體顯示常用的文字標(biāo)簽<body

bgcolor="#00FFFF"

text="#FF0000">

<font

size="+2">

<b>這是一行文字</b><br>

<i>這是一行文字</i><br>

<b><i><u>這是一行文字/u></i></b><br>

<u>這是一行文字</u><br>

<em>這是一行文字</em><br>

<cute>這是一行文字</cute><br>

<strong>這是一行文字</strong>

</font>3段落標(biāo)簽和換行標(biāo)簽由<p>標(biāo)簽所標(biāo)識(shí)的文字，代表同一個(gè)段落的文字。它可以單獨(dú)使用，也可以成對(duì)使用。換行標(biāo)簽是個(gè)單標(biāo)簽，也叫空標(biāo)簽，不包含任和內(nèi)容，在html文件中的任何位置只要使用了<br>標(biāo)簽，當(dāng)文件顯示在瀏覽器中時(shí)，該標(biāo)簽之后的內(nèi)容將顯示下一行。

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

<p>山村詠懷</p>

<p>宋代邵康</p>

<p>一去二三里，

<p>煙村四五家。

<p>亭臺(tái)六七座，

<p>八九十枝花。</p>

<hr

/>

<p>這里是用換行標(biāo)簽<br/><br

/>

山村詠懷<br

/>

宋代邵康<br

/>

一去二三里，<br

/>煙村四五家。<br

/>

亭臺(tái)六七座，<br

/>八九十枝花。</p>4超鏈接標(biāo)簽所謂的超鏈接是指從一個(gè)網(wǎng)頁(yè)指向一個(gè)目標(biāo)的連接關(guān)系，這個(gè)目標(biāo)可以是另一個(gè)網(wǎng)頁(yè)，也可以是相同網(wǎng)頁(yè)上的不同位置，可以是一個(gè)圖片、一個(gè)電子郵件地址、一個(gè)文件、一個(gè)視頻、一個(gè)應(yīng)用程序等。建立超鏈接的標(biāo)簽為<a>和</a>。屬性說(shuō)明href設(shè)置鏈接指向的頁(yè)面的URLname設(shè)置鏈接文檔中的特定位置target設(shè)置在打開(kāi)鏈接文檔的方式

<p>這是一個(gè)絕對(duì)路徑的超鏈接：

<a

href=

target="_blank">網(wǎng)易</a></p>

<p>這是一個(gè)相對(duì)路徑的超鏈接：請(qǐng)打開(kāi)

<a

href="2-5.html">2.htm</a></p>

5插入圖片標(biāo)簽<img>屬性描述src圖像的所在位置的路徑alt提示文字width圖片寬度height圖片高度.align圖像和文字之間的排列屬性border邊框hspace水平間距vspace垂直間距<imgsrc="images/h3.jpg"width="200"height="200"vspace="10"hspace="10"border="3"alt="美麗的花朵“>網(wǎng)頁(yè)中插入圖片用單標(biāo)簽<img>，當(dāng)瀏覽器讀取到<img>標(biāo)簽時(shí)，就會(huì)顯示此標(biāo)簽所設(shè)定的圖像。如果要對(duì)插入的圖片進(jìn)行修飾時(shí)，僅僅用這一個(gè)屬性是不夠的，還要配合其它屬性來(lái)完成。6列表標(biāo)簽列表是一種非常有用的數(shù)據(jù)排列方式，并且經(jīng)常與CSS一起使用，用來(lái)對(duì)信息進(jìn)行合理的排列顯示。HTML中共有3種列表，分別為無(wú)序列表、有序列表和定義列表。無(wú)序列表用來(lái)表示沒(méi)有先后順序列表項(xiàng)目，有序列表用來(lái)表示有先后順序的列表項(xiàng)目，定義列表是一組帶有特殊含義的列表，包含條件和說(shuō)明兩部分。名稱說(shuō)明ul無(wú)序列表ol有序列表li列表項(xiàng)目dl定義列表dt定義列表中的項(xiàng)目dd描述列表中的項(xiàng)目<ul><li>這是一個(gè)無(wú)序列表</li><li>這是一個(gè)無(wú)序列表</li></ul><ul><litype="circle">這是一個(gè)無(wú)序列表</li><litype="square">這是一個(gè)無(wú)序列表</li></ul>無(wú)序列表實(shí)心圓點(diǎn)（type="disc"）空心的圓圈（type="circle"）實(shí)心正方形（type="square"）6列表標(biāo)簽列表是一種非常有用的數(shù)據(jù)排列方式，并且經(jīng)常與CSS一起使用，用來(lái)對(duì)信息進(jìn)行合理的排列顯示。HTML中共有3種列表，分別為無(wú)序列表、有序列表和定義列表。無(wú)序列表用來(lái)表示沒(méi)有先后順序列表項(xiàng)目，有序列表用來(lái)表示有先后順序的列表項(xiàng)目，定義列表是一組帶有特殊含義的列表，包含條件和說(shuō)明兩部分。<ol><li>這是一個(gè)有序列表</li><li>這是一個(gè)有序列表</li><li>這是一個(gè)有序列表</li></ol><oltype="a"><li>這是一個(gè)有序列表</li><li>這是一個(gè)有序列表</li><li>這是一個(gè)有序列表</li></ol><oltype="a"><litype="1">這是一個(gè)有序列表</li><litype="A">這是一個(gè)有序列表</li><li>這是一個(gè)有序列表</li></ol>有序列表名稱類型1數(shù)字1、2、3、4……a小寫(xiě)英文字母a、b、c、d……A大寫(xiě)英文字母A、B、C、D…..i小寫(xiě)羅馬數(shù)字i、ii、iii、iv……I大寫(xiě)羅馬數(shù)字I、II、III、IV……6列表標(biāo)簽定義列表是由定義條件和定義描述兩部份組成，定義列表的標(biāo)簽是一對(duì)<dl></dl>，定義條件的標(biāo)簽為<dt></dt>，定義描述的標(biāo)簽為<dd></dd>，一對(duì)定義列表中，可以有多個(gè)定義條件和定義描述<dl><dt>什么是定義列表</dt><dd>定義列表不僅僅是一列項(xiàng)目，而是項(xiàng)目及其注釋的組合</dd><dt>什么是有序列表</dt><dd>表示列表項(xiàng)目之間沒(méi)有向后的順序關(guān)系的列表</dd></dl>定義列表<dl><dt>定義條件</dt><dd>定義描述</dd>…</dl>7表格標(biāo)簽表格中網(wǎng)頁(yè)制作中使用率較高的標(biāo)簽之一，經(jīng)常采用表格進(jìn)行網(wǎng)頁(yè)布局，表格由行、列和單元格3部份組成，一般通過(guò)3個(gè)標(biāo)簽創(chuàng)建，分別為表格標(biāo)簽<table>，行標(biāo)簽<tr>和單元格標(biāo)簽<td>。表格的各種屬性都要在表格的開(kāi)始標(biāo)簽<table>和表格的結(jié)束標(biāo)簽之間才有效。名稱說(shuō)明table表格標(biāo)簽tr行標(biāo)簽，表示一行td單元格標(biāo)簽，表示單元格td表頭標(biāo)簽，表示單元格，內(nèi)部的文字為加粗效果<table><tr><td>第一行的單元格</td><td>第一行的單元格</td></tr><tr><td>第二行的單元格</td><td>第二行的單元格</td></tr></table>7表格標(biāo)簽表格中網(wǎng)頁(yè)制作中使用率較高的標(biāo)簽之一，經(jīng)常采用表格進(jìn)行網(wǎng)頁(yè)布局，表格由行、列和單元格3部份組成，一般通過(guò)3個(gè)標(biāo)簽創(chuàng)建，分別為表格標(biāo)簽<table>，行標(biāo)簽<tr>和單元格標(biāo)簽<td>。表格的各種屬性都要在表格的開(kāi)始標(biāo)簽<table>和表格的結(jié)束標(biāo)簽之間才有效。<tablebgcolor="#CCCCCC"width="300"height="150"border="1"bordercolor="#009999"cellpadding="5"cellspacing="5"><tr><td>第一行的單元格</td><td>第一行的單元格</td></tr><tr><td>第二行的單元格</td><td>第二行的單元格</td></tr></table>屬性說(shuō)明width寬度height高度background背景圖片bgcolor背景顏色border邊框大小bordercolor邊框顏色Cellpadding單元格的填充值

cellspacing單元格的間距值8特殊字符在HTML文檔中，有些字符沒(méi)辦法直接顯示出來(lái)，例如?,使用特殊字符可以將鍵盤(pán)上沒(méi)有的字符表達(dá)出來(lái)，而有些HTML文檔的特殊字符在鍵盤(pán)上雖然可以得到，但瀏覽器在解析HTML文當(dāng)時(shí)會(huì)報(bào)錯(cuò)，例如“<”等，為防止代碼混淆，必須用一些代碼來(lái)表示它們。特殊符號(hào)符號(hào)的代碼

特殊符號(hào)符號(hào)的代碼空格

×ד“?©&&?®>

>?™<

<——9插入水平線在HTML文檔中，可以采用水平線標(biāo)簽在頁(yè)中產(chǎn)生一條水平線，水平線的標(biāo)簽為<hr>，是一個(gè)單標(biāo)簽，水平線標(biāo)簽擁有多個(gè)屬性來(lái)設(shè)置水平線的效果。屬性說(shuō)明width寬度（長(zhǎng)度）size高度（厚度）noshade陰影color顏色align對(duì)齊方式，值可為：左、中、右<hrwidth="100"align="left"color="#0033FF"size="3"noshade="noshade"/>DOCTYPE（文檔類型）的含義和選擇2.2.6XHTML中的定義文檔類型采用了<!DOCTYPE>標(biāo)簽，該標(biāo)簽用來(lái)定義文檔的類型，是documenttype（文檔類型）的縮寫(xiě)，它設(shè)置XHTML文檔的版本，該標(biāo)簽的名稱屬性必須大寫(xiě)。在Dreamweaver中，可以直接創(chuàng)建包含XHTML結(jié)構(gòu)的網(wǎng)頁(yè)，點(diǎn)擊菜單欄的【文件】【新建】，打開(kāi)【新建文檔】對(duì)話框，執(zhí)行【空白頁(yè)】【HTML】【無(wú)】【文檔類型】，在【文檔類型】中選擇版本。案例實(shí)施過(guò)程：人物介紹網(wǎng)頁(yè)的制作（一）2.3步驟1步驟2步驟3步驟5步驟4步驟6步驟7步驟8創(chuàng)建一個(gè)新的站點(diǎn)，單擊菜單欄【站點(diǎn)】【新建站點(diǎn)】，打開(kāi)【站點(diǎn)設(shè)置對(duì)象】面板，在【站點(diǎn)名稱】中輸入“renwu”，并點(diǎn)擊【本地站點(diǎn)文件夾】瀏覽文件夾按鈕，選擇站點(diǎn)文件夾的位置，點(diǎn)擊【保存】按鈕，完成站點(diǎn)的創(chuàng)建

。步驟一單擊歡迎屏幕的【新建】【HTML】，創(chuàng)建一個(gè)HTML網(wǎng)頁(yè)文件，并保存為renwu.html。步驟二單擊【設(shè)計(jì)】視圖，將素材中的“齊白石簡(jiǎn)介”的文字信息，復(fù)制到網(wǎng)頁(yè)中，單擊【代碼】視圖，可看到復(fù)制的文字自動(dòng)增加了<p>、<br>標(biāo)簽，單擊【拆分】視圖，在右邊的【設(shè)計(jì)】視圖中，對(duì)文字信息進(jìn)行調(diào)整。步驟三在【代碼】視圖中，在第二行中“齊白石”的文字前，插入圖像標(biāo)簽<imgsrc=“q.jpg”width=“200”/>，當(dāng)設(shè)置了圖像的寬度值，沒(méi)有設(shè)置圖像的高度值時(shí)，圖像將按比例自動(dòng)調(diào)整大小。步驟

四在圖像標(biāo)簽中，增加一個(gè)屬性align=“l(fā)eft”，<imgsrc=“q.jpg”width=“200”align=“l(fā)eft”/>，修改文字信息與圖像的左對(duì)齊排列。步驟五在文字信息“1生平”后插入水平線<hr>標(biāo)簽，并設(shè)置水平線的屬性，顏色為藍(lán)色，寬度為3，<hrcolor=“#000099”size=“3”/>，<hr>標(biāo)簽在【設(shè)計(jì)】視圖中不顯示顏色的效果，可以單擊【實(shí)時(shí)視圖】，在Dreamweaver中查看網(wǎng)頁(yè)的預(yù)覽效果。步驟六注意：使用【實(shí)時(shí)視圖】在Dreamweaver中查看網(wǎng)頁(yè)的預(yù)覽效果后，再單擊【實(shí)時(shí)視圖】，才能取消預(yù)覽效果。在<body>標(biāo)簽中，設(shè)置網(wǎng)頁(yè)的背景圖像效果<bodybackground="b1.gif">步驟七點(diǎn)擊瀏覽按鈕，在瀏覽器中測(cè)試效果。步驟八CSS樣式表2.4CSS樣式表簡(jiǎn)介2.4.1CSS的語(yǔ)法規(guī)則2.4.2Dreamweaver的CSS工具2.4.3

CSS選擇器2.4.5在網(wǎng)頁(yè)中引入CSS的方法2.4.4DreamweaverCS6中的CSS規(guī)則定義面板2.4.6課堂練習(xí)：CSS制作水平菜單2.4.7CSS樣式表簡(jiǎn)介2.4.1CSS（CascadingStyleSheets）中文翻譯為“層疊樣式表”，簡(jiǎn)稱樣式表，是由W3C組織制定和發(fā)布的用來(lái)定義網(wǎng)頁(yè)內(nèi)容元素的表現(xiàn)形式的規(guī)范標(biāo)準(zhǔn)。1996年12月，發(fā)布了CSS1.0，現(xiàn)在用的版本是CSS3.0。CSS的應(yīng)用必須獲得瀏覽器的支持，目前并非所有瀏覽器版本都支持CSS3.0，目前主流的瀏覽器的新版本已基本支持CSS3.0。CSS可以美觀網(wǎng)頁(yè)，還可以通過(guò)定義外部的樣式表文件統(tǒng)一整個(gè)網(wǎng)站網(wǎng)頁(yè)的風(fēng)格，可以構(gòu)建公共樣式，便于引用和修改，減少重復(fù)操作，方便網(wǎng)頁(yè)設(shè)計(jì)人員的協(xié)同開(kāi)發(fā)。CSS實(shí)現(xiàn)了內(nèi)容與樣式的分離，簡(jiǎn)化網(wǎng)頁(yè)的代碼，以前很多采用圖片才能完成的效果，用簡(jiǎn)單的樣式就可以完成，大大提高網(wǎng)頁(yè)的訪問(wèn)速度，CSS是目前網(wǎng)頁(yè)中必不可少的元素。CSS的語(yǔ)法規(guī)則2.4.2在使用和設(shè)置CSS時(shí)，必須遵循CSS的規(guī)則，CSS規(guī)則由兩個(gè)主要的部分構(gòu)成：選擇器，以及一條或多條聲明：選擇器{聲明1；聲明2；……聲明N}。選擇器通常是需要改變樣式的HTML元素，每條聲明由一個(gè)屬性和一個(gè)值組成。selector{property:value;property:value;……}selector：選擇器，需要定義樣式的標(biāo)簽、ID值、類名；property：選擇器的屬性名稱；value：屬性的值。屬性和值用：(冒號(hào))分開(kāi)，值可以有不同的寫(xiě)法和單位，例如顏色可用十六進(jìn)制（#FF0000或簡(jiǎn)寫(xiě)方式#F00）或RGB值(rgb(255，0，0)或rgb(100%，0%，0%))的方式來(lái)表示。CSS對(duì)大小寫(xiě)不敏感，但是當(dāng)CSS與HTML文檔一起工作，class和id名稱區(qū)分大小寫(xiě)。`Dreamweaver的CSS工具2.4.3在Dreamweaver中提供CSS樣式面板，打開(kāi)CSS樣式面板的方式是點(diǎn)擊【窗口】【CSS樣式】，在右則的工具欄中，可找到CSS工具面板。①當(dāng)前：是當(dāng)前選定內(nèi)容所應(yīng)用的CSS樣式規(guī)則；②全部：當(dāng)前頁(yè)面中所應(yīng)用的CSS樣式規(guī)則；③附加樣式表文件按鈕，可以在HTML文檔中鏈接一個(gè)外部的CSS文件；④新建樣式表規(guī)則按鈕；⑤編輯樣式表規(guī)則，修改已有的樣式表規(guī)則；⑥刪除樣式表規(guī)則。Dreamweaver的CSS工具2.4.3在Dreamweaver中提供CSS樣式面板，打開(kāi)CSS樣式面板的方式是點(diǎn)擊【窗口】【CSS樣式】，在右則的工具欄中，可找到CSS工具面板。①【選擇器類型】：用來(lái)設(shè)置CSS樣式類型，可選的類型為：類、ID、標(biāo)簽、復(fù)合內(nèi)容。②類：是指可以通過(guò)自定義樣式后，可將樣式應(yīng)用在任何標(biāo)簽的類型。自定義的類樣式，必須以點(diǎn)為開(kāi)始，只能采用字母和數(shù)字組合來(lái)命名，并且第一個(gè)字符不能是數(shù)字。

標(biāo)簽：即對(duì)HTML的標(biāo)簽定義樣式，在【選擇器名稱】中選擇或輸入標(biāo)簽。

ID：即對(duì)頁(yè)面中的以id為屬性命名的對(duì)象設(shè)置樣式，樣式名稱為#ID的值，例如DIV容器的ID=”abc”，名稱寫(xiě)作#abc；

復(fù)合內(nèi)容：是指兩種或以上的選擇器類型所構(gòu)成的樣式，例如在容器id=”aa”內(nèi)的li標(biāo)簽的文字大小的定義，兩種選擇器必須以空格分隔，名稱寫(xiě)作#aali。③【規(guī)則定義】：用來(lái)設(shè)置CSS樣式存放的位置，可選擇為【僅限該文檔】、【新建樣式表文件】。“僅限該文檔”是將樣式表嵌入到當(dāng)前的HTML文檔的頭部標(biāo)簽處?！拘陆邮奖砦募烤褪菍邮奖韮?nèi)容存放在一個(gè)文件擴(kuò)展名為.CSS的文檔中，并在當(dāng)前的HTML頭部標(biāo)簽處生成<link>標(biāo)簽。③在網(wǎng)頁(yè)中引入CSS的方法2.4.4在HTML中，引入CSS的方法主要有行內(nèi)式、內(nèi)嵌式、導(dǎo)入式和鏈接式4種。方法一行內(nèi)式：即在HTML標(biāo)簽的style屬性中設(shè)置CSS樣式，這種樣式表只應(yīng)用在當(dāng)前標(biāo)簽中。<pstyle="font-size:12px;color:#066">這是一個(gè)行內(nèi)樣式</p>在網(wǎng)頁(yè)中引入CSS的方法2.4.4在HTML中，引入CSS的方法主要有行內(nèi)式、內(nèi)嵌式、導(dǎo)入式和鏈接式4種。方法二內(nèi)嵌式：內(nèi)嵌式即在頁(yè)面中的頭部標(biāo)簽中的<styletype=”text/css”>樣式表內(nèi)容</style>標(biāo)簽入CSS樣式，這種CSS樣式適用于只單獨(dú)應(yīng)用于一頁(yè)的樣式。<html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>CSS</title><!--這是內(nèi)嵌式樣式表--><styletype="text/css">.wenzi{border:1pxsolid#F00;}</style></head><body><pstyle="font-size:12px;color:#066">這是一個(gè)行內(nèi)樣式</p><pclass="wenzi">這行是由內(nèi)嵌式的樣式控制的</p></body></html>在網(wǎng)頁(yè)中引入CSS的方法2.4.4在HTML中，引入CSS的方法主要有行內(nèi)式、內(nèi)嵌式、導(dǎo)入式和鏈接式4種。方法三鏈接式：鏈接式是將一個(gè)獨(dú)立的CSS文件通過(guò)link標(biāo)簽引入到HTML文件中，所以必須先有CSS文件。<linkhref="css/css1.css"rel="stylesheet"type="text/css"/>在網(wǎng)頁(yè)中引入CSS的方法2.4.4在HTML中，引入CSS的方法主要有行內(nèi)式、內(nèi)嵌式、導(dǎo)入式和鏈接式4種。方法四導(dǎo)入式：導(dǎo)入式也是將CSS文件導(dǎo)入到HTML文檔中，但是與鏈入式不相同，是采用@import的方式導(dǎo)入CSS，例如：在網(wǎng)頁(yè)的頭部標(biāo)簽<head></head>中加入導(dǎo)入CSS文檔的語(yǔ)句：<head><styletype="text/css">@importurl("css/css1.css");</style></head>CSS選擇器2.4.5CSS的選擇器從使用的角度上分，主要分為：標(biāo)簽選擇器、類別選擇器、ID選擇器和復(fù)合選擇器。標(biāo)簽選擇器一個(gè)網(wǎng)頁(yè)是由多種不同的HTML標(biāo)簽組成，CSS的標(biāo)簽選擇器是用來(lái)聲明HTML指定標(biāo)簽的CSS樣式，每一種HTML標(biāo)簽都可以作為相應(yīng)的標(biāo)簽選擇器的名稱。<styletype="text/css">h1{color:#F00;font-size:12px;}</style>這段代碼定義了當(dāng)前網(wǎng)頁(yè)中的所有的h1標(biāo)簽的文字是紅色，文字大小為12px。每一個(gè)選擇器都是由選擇器本身、屬性和值構(gòu)成，其中屬性和值可以設(shè)置多個(gè)，但是每個(gè)屬性在一個(gè)選擇器中只能設(shè)置一次，從而實(shí)現(xiàn)對(duì)同一個(gè)標(biāo)簽聲明多種樣多風(fēng)格。CSS選擇器2.4.5CSS的選擇器從使用的角度上分，主要分為：標(biāo)簽選擇器、類別選擇器、ID選擇器和復(fù)合選擇器。類別選擇器類別選擇器必須以.開(kāi)始，名稱由用戶自定義命名，命名必須符合規(guī)則，是可以多次應(yīng)用或者應(yīng)用在多個(gè)標(biāo)簽中。<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>無(wú)標(biāo)題文檔</title><styletype="text/css">h1{color:#060;font-size:12px;}.wenzi{color:#069;font-size:30px;}</style></head><body><h1>這是標(biāo)題1</h1><h1class="wenzi">這是類選擇器，這里是一個(gè)H1標(biāo)簽</h1><p

class="wenzi">這里是一個(gè)P標(biāo)簽</p></body></html>CSS選擇器2.4.5CSS的選擇器從使用的角度上分，主要分為：標(biāo)簽選擇器、類別選擇器、ID選擇器和復(fù)合選擇器。偽類選擇器所謂偽類選擇器，是指并不是針對(duì)真正的元素使用的選擇器，而是針對(duì)css中已經(jīng)定義好的偽元素使用的選擇器，它的使用方法為：選擇器:偽元素{屬性:值}，最常用的是超鏈接狀態(tài)的偽類選擇器：a:link（鏈接的原始狀態(tài)）a:visited（被點(diǎn)擊或訪問(wèn)過(guò)的狀態(tài)）a:hover（鼠標(biāo)經(jīng)過(guò)時(shí)的狀態(tài)）a:active（當(dāng)鼠標(biāo)點(diǎn)擊時(shí)的狀態(tài)）文字或圖像如果加了超鏈接，則在默認(rèn)狀態(tài)下顯示文字為藍(lán)色字和有下劃線，圖像則藍(lán)色邊框，當(dāng)文字或圖像被點(diǎn)擊過(guò)或訪問(wèn)過(guò)，則顏色均改為紫色。因此，常常通過(guò)CSS的重新設(shè)置文字或圖像的超鏈接效果。CSS選擇器2.4.5偽類選擇器所謂偽類選擇器，是指并不是針對(duì)真正的元素使用的選擇器，而是針對(duì)css中已經(jīng)定義好的偽元素使用的選擇器，它的使用方法為：選擇器:偽元素{屬性:值}，最常用的是超鏈接狀態(tài)的偽類選擇器：a:link（鏈接的原始狀態(tài)）a:visited（被點(diǎn)擊或訪問(wèn)過(guò)的狀態(tài)）a:hover（鼠標(biāo)經(jīng)過(guò)時(shí)的狀態(tài)）a:active（當(dāng)鼠標(biāo)點(diǎn)擊時(shí)的狀態(tài)）文字或圖像如果加了超鏈接，則在默認(rèn)狀態(tài)下顯示文字為藍(lán)色字和有下劃線，圖像則藍(lán)色邊框，當(dāng)文字或圖像被點(diǎn)擊過(guò)或訪問(wèn)過(guò)，則顏色均改為紫色。因此，常常通過(guò)CSS的重新設(shè)置文字或圖像的超鏈接效果。<styletype="text/css">a:link{color:#666;font-size:16px;text-decoration:none;}a:visited{color:#06F;}a:hover{color:#F00;font-weight:bolder;font-style:italic;}a:active{color:#0F0;}</style>當(dāng)需要同時(shí)設(shè)置四種狀態(tài)時(shí)，要按linkvisitedhoveractive的順序設(shè)置，否則，偽類的設(shè)置將會(huì)沒(méi)有效果CSS選擇器2.4.5ID選擇器ID選擇器的使用方法與類別選擇器的方式基本相同，以#開(kāi)始，自定義名稱，名稱的必須是字母或數(shù)字或下劃線，并且名稱不能以數(shù)字或下劃線開(kāi)始，即ID選擇器的名稱以#開(kāi)始后，第一個(gè)字行必須是字母。<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>ID選擇器</title><styletype="text/css">#a1{color:#F00;font-size:20px;}#a2{color:#FFF;line-height:30px;background-color:#063;}</style></head><body><pid="a1">這里是應(yīng)用了a1的位置</p><pid="a2">這是是應(yīng)用了a2的位置</p></body></html></html>CSS選擇器2.4.5CSS復(fù)合選擇器以前面三種選擇器為基礎(chǔ)，通過(guò)組合，還可以產(chǎn)生更多種類的選擇器，實(shí)現(xiàn)更強(qiáng)、更方便的選擇功能，這種稱為復(fù)合選擇器，即將標(biāo)簽選擇器、類別選擇器和ID選擇器通過(guò)不同的連接方式組合而成的選擇器，一般是由兩個(gè)或以上的選擇器類型組成。標(biāo)簽選擇器與類別選擇器的組成的復(fù)合選擇器類型。標(biāo)簽a是超鏈接標(biāo)簽，.rose是類名，名稱需要符合類的命名規(guī)則，兩者合起來(lái)就是a.rose，是針對(duì)超鏈接標(biāo)簽設(shè)置的CSS樣式，所以要應(yīng)用在a標(biāo)簽中，由于是類，所以又可以多次使用，通過(guò)設(shè)置不同的類來(lái)設(shè)置多種的超鏈接的方式CSS選擇器2.4.5CSS復(fù)合選擇器標(biāo)簽選擇器與類別選擇器的組成的復(fù)合選擇器類型。例：在一個(gè)網(wǎng)頁(yè)中設(shè)置多種超鏈接的效果的CSS代碼<head><styletype=”text/css”>body{font-size:12px;text-align:center;margin-top:100px;}h1{text-align:center;font-size:36px;}a{font-size:14px;font-weight:bold;text-decoration:none}a.rose{color:#F00;font-size:26px}/*a是超鏈接標(biāo)簽，.rose是類別選擇器，兩者組合成a.rose是一個(gè)復(fù)合選擇器，應(yīng)用對(duì)象是超鏈接標(biāo)簽，類名為rose的位置*/a:hover.rose{color:#03C}/*a:hover是超鏈接標(biāo)簽的鼠標(biāo)over狀態(tài)，要對(duì)應(yīng)類別選擇器的名稱來(lái)設(shè)置*/a.rose1{color:#FC0;font-size:20px}a:hover.rose1{color:#3CF}a.black{color:#000;font-size:18px}a:hover.black{color:#999}a.blue{color:#06C;font-size:30px}a:hover.blue{color:#366}</stle></head>CSS選擇器2.4.5CSS復(fù)合選擇器以前面三種選擇器為基礎(chǔ)，通過(guò)組合，還可以產(chǎn)生更多種類的選擇器，實(shí)現(xiàn)更強(qiáng)、更方便的選擇功能，這種稱為復(fù)合選擇器，即將標(biāo)簽選擇器、類別選擇器和ID選擇器通過(guò)不同的連接方式組合而成的選擇器，一般是由兩個(gè)或以上的選擇器類型組成。2.通過(guò)嵌套選擇器構(gòu)成的復(fù)合選擇器在CSS選擇器中，經(jīng)常會(huì)將多個(gè)選擇器通過(guò)嵌套的方式，對(duì)指定的位置的HTML標(biāo)簽進(jìn)行設(shè)置，例如，名稱為a3的<ul>里的<a>標(biāo)簽的樣式，就可以采用嵌套選擇器的方式實(shí)現(xiàn)，而且可以有多種嵌套方式，如：.a3a，.a3lia，ul.a3a，ul.a3lia均可以實(shí)現(xiàn)對(duì)同一個(gè)位置的CSS樣式的設(shè)置，但是.a3a的應(yīng)用范圍最大，可以用于所有屬性class為.a3的位置，ul.a3lia只能用于class屬性為a3的ul標(biāo)簽中在<li>標(biāo)簽里的<a>標(biāo)簽。DreamweaverCS6中的CSS規(guī)則定義面板2.4.6利用CSS樣式可以定義網(wǎng)頁(yè)元素的效果，例如文字的字體、顏色、大小，行間距，元素的邊框、背景，列表的符號(hào)，鼠標(biāo)的形狀等，隨著CSS的發(fā)展，CSS對(duì)網(wǎng)頁(yè)元素的影響越來(lái)越大，主要定義網(wǎng)頁(yè)元素的8大類，分別為：類型、背景、區(qū)塊、方框、邊框、列表、定位和擴(kuò)展、過(guò)渡，DreamweaverCS6的【CSS規(guī)則定義】8個(gè)CSS面板就是對(duì)應(yīng)這些樣式類別。DreamweaverCS6中的CSS規(guī)則定義面板2.4.6類型DreamweaverCS6中的CSS規(guī)則定義面板2.4.6背景DreamweaverCS6中的CSS規(guī)則定義面板2.4.6區(qū)塊DreamweaverCS6中的CSS規(guī)則定義面板2.4.6方框DreamweaverCS6中的CSS規(guī)則定義面板2.4.6邊框DreamweaverCS6中的CSS規(guī)則定義面板2.4.6列表DreamweaverCS6中的CSS規(guī)則定義面板2.4.6定位DreamweaverCS6中的CSS規(guī)則定義面板2.4.6擴(kuò)展DreamweaverCS6中的CSS規(guī)則定義面板2.4.6過(guò)渡課堂練習(xí)：CSS制作水平菜單2.4.7效果圖導(dǎo)航菜單是網(wǎng)頁(yè)中重要的組成之一，導(dǎo)航菜單的風(fēng)格往往也決定了整個(gè)網(wǎng)站的風(fēng)格，因此在制作網(wǎng)頁(yè)時(shí)會(huì)投入很多時(shí)間和精力來(lái)制作各式各樣的導(dǎo)航條，從而體現(xiàn)網(wǎng)站的整體構(gòu)架。用CSS與HTML的列表標(biāo)簽來(lái)制作導(dǎo)航菜單，實(shí)現(xiàn)起來(lái)簡(jiǎn)單美觀，并且可以做水平菜單和垂直菜單。一般采用<ul>或<ol>和<li>結(jié)合對(duì)標(biāo)簽的CSS樣式定義來(lái)實(shí)現(xiàn)。步驟1定義一個(gè)站點(diǎn)，新建網(wǎng)頁(yè)文件cz.html，新建樣式表文件css.css，保存兩個(gè)文件在站點(diǎn)中，點(diǎn)擊【CSS樣式】工具欄中的【鏈接外部樣式表】按鈕，將css.css鏈接到cz.html文件中。步驟2定義一個(gè)無(wú)序列表<ul>，每對(duì)<li></li>里包含一個(gè)菜單項(xiàng)，并加入空的超鏈接。<ul><li><ahref="#">首頁(yè)</a></li><li><ahref="#">產(chǎn)品介紹</a></li><li><ahref="#">服務(wù)介紹</a></li><li><ahref="#">技術(shù)支持</a></li><li><ahref="#">立刻購(gòu)買(mǎi)</a></li><li><ahref="#">聯(lián)系我們</a></li></ul>步驟3在css.css文件里設(shè)置<ul>的樣式為:ul{padding:0;margin:0;list-style-type:none;}padding和margin：將<ul>標(biāo)簽產(chǎn)生的邊距和填充值改為0；list-style-typ的值設(shè)為none，就將<ul>的列表符號(hào)設(shè)置為無(wú)。步驟4在css.css文件里設(shè)置<ul>的樣式為:ul{padding:0;margin:0;list-style-type:none;}設(shè)置<li>標(biāo)簽的樣式為float的左對(duì)齊效果li{float:left;}，菜單變?yōu)樗讲藛巍?/p>