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

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

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

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

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

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

目前網(wǎng)頁的文檔類型基本使用XHTML1.0Transitional（XHTML過渡型）或者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>中放置的是頁面中所有的內(nèi)容，如圖片、文字、表格、表單、超鏈接等設(shè)置。<body>標(biāo)簽有自己的屬性，設(shè)置<body>標(biāo)簽內(nèi)的屬性，可控制整個頁面的顯示方式。屬性描述background設(shè)定頁面的背景圖片bgcolor設(shè)置頁面的背景顏色link設(shè)置頁面默認(rèn)連接文字的顏色text設(shè)置頁面文字的顏色<html><head><meta

http-equiv="Content-Type"

content="text/html;

charset=utf-8"

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

bgcolor="#00FFFF"

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

http-equiv="Content-Type"

content="text/html;

charset=utf-8"

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

bgcolor="#00FFFF"

text="#FF0000"><font

color="#000099"

size="5"

face="黑體"

>文字</font>

</body></html>名稱說明<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)識的文字，代表同一個段落的文字。它可以單獨(dú)使用，也可以成對使用。換行標(biāo)簽是個單標(biāo)簽，也叫空標(biāo)簽，不包含任和內(nèi)容，在html文件中的任何位置只要使用了<br>標(biāo)簽，當(dāng)文件顯示在瀏覽器中時，該標(biāo)簽之后的內(nèi)容將顯示下一行。

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

<p>山村詠懷</p>

<p>宋代邵康</p>

<p>一去二三里，

<p>煙村四五家。

<p>亭臺六七座，

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

<hr

/>

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

/>

山村詠懷<br

/>

宋代邵康<br

/>

一去二三里，<br

/>煙村四五家。<br

/>

亭臺六七座，<br

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

<p>這是一個絕對路徑的超鏈接：

<a

href=

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

<p>這是一個相對路徑的超鏈接：請打開

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

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

特殊符號符號的代碼空格

×ד“?©&&?®>

>?™<

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

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

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

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

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

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

復(fù)合內(nèi)容：是指兩種或以上的選擇器類型所構(gòu)成的樣式，例如在容器id=”aa”內(nèi)的li標(biāo)簽的文字大小的定義，兩種選擇器必須以空格分隔，名稱寫作#aali。③【規(guī)則定義】：用來設(shè)置CSS樣式存放的位置，可選擇為【僅限該文檔】、【新建樣式表文件】?！皟H限該文檔”是將樣式表嵌入到當(dāng)前的HTML文檔的頭部標(biāo)簽處。【新建樣式表文件】就是將樣式表內(nèi)容存放在一個文件擴(kuò)展名為.CSS的文檔中，并在當(dāng)前的HTML頭部標(biāo)簽處生成<link>標(biāo)簽。③在網(wǎng)頁中引入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">這是一個行內(nèi)樣式</p>在網(wǎng)頁中引入CSS的方法2.4.4在HTML中，引入CSS的方法主要有行內(nèi)式、內(nèi)嵌式、導(dǎo)入式和鏈接式4種。方法二內(nèi)嵌式：內(nèi)嵌式即在頁面中的頭部標(biāo)簽中的<styletype=”text/css”>樣式表內(nèi)容</style>標(biāo)簽入CSS樣式，這種CSS樣式適用于只單獨(dú)應(yīng)用于一頁的樣式。<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">這是一個行內(nèi)樣式</p><pclass="wenzi">這行是由內(nèi)嵌式的樣式控制的</p></body></html>在網(wǎng)頁中引入CSS的方法2.4.4在HTML中，引入CSS的方法主要有行內(nèi)式、內(nèi)嵌式、導(dǎo)入式和鏈接式4種。方法三鏈接式：鏈接式是將一個獨(dú)立的CSS文件通過link標(biāo)簽引入到HTML文件中，所以必須先有CSS文件。<linkhref="css/css1.css"rel="stylesheet"type="text/css"/>在網(wǎng)頁中引入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)頁的頭部標(biāo)簽<head></head>中加入導(dǎo)入CSS文檔的語句：<head><styletype="text/css">@importurl("css/css1.css");</style></head>CSS選擇器2.4.5CSS的選擇器從使用的角度上分，主要分為：標(biāo)簽選擇器、類別選擇器、ID選擇器和復(fù)合選擇器。標(biāo)簽選擇器一個網(wǎng)頁是由多種不同的HTML標(biāo)簽組成，CSS的標(biāo)簽選擇器是用來聲明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)頁中的所有的h1標(biāo)簽的文字是紅色，文字大小為12px。每一個選擇器都是由選擇器本身、屬性和值構(gòu)成，其中屬性和值可以設(shè)置多個，但是每個屬性在一個選擇器中只能設(shè)置一次，從而實(shí)現(xiàn)對同一個標(biāo)簽聲明多種樣多風(fēng)格。CSS選擇器2.4.5CSS的選擇器從使用的角度上分，主要分為：標(biāo)簽選擇器、類別選擇器、ID選擇器和復(fù)合選擇器。類別選擇器類別選擇器必須以.開始，名稱由用戶自定義命名，命名必須符合規(guī)則，是可以多次應(yīng)用或者應(yīng)用在多個標(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>無標(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">這是類選擇器，這里是一個H1標(biāo)簽</h1><p

class="wenzi">這里是一個P標(biāo)簽</p></body></html>CSS選擇器2.4.5CSS的選擇器從使用的角度上分，主要分為：標(biāo)簽選擇器、類別選擇器、ID選擇器和復(fù)合選擇器。偽類選擇器所謂偽類選擇器，是指并不是針對真正的元素使用的選擇器，而是針對css中已經(jīng)定義好的偽元素使用的選擇器，它的使用方法為：選擇器:偽元素{屬性:值}，最常用的是超鏈接狀態(tài)的偽類選擇器：a:link（鏈接的原始狀態(tài)）a:visited（被點(diǎn)擊或訪問過的狀態(tài)）a:hover（鼠標(biāo)經(jīng)過時的狀態(tài)）a:active（當(dāng)鼠標(biāo)點(diǎn)擊時的狀態(tài)）文字或圖像如果加了超鏈接，則在默認(rèn)狀態(tài)下顯示文字為藍(lán)色字和有下劃線，圖像則藍(lán)色邊框，當(dāng)文字或圖像被點(diǎn)擊過或訪問過，則顏色均改為紫色。因此，常常通過CSS的重新設(shè)置文字或圖像的超鏈接效果。CSS選擇器2.4.5偽類選擇器所謂偽類選擇器，是指并不是針對真正的元素使用的選擇器，而是針對css中已經(jīng)定義好的偽元素使用的選擇器，它的使用方法為：選擇器:偽元素{屬性:值}，最常用的是超鏈接狀態(tài)的偽類選擇器：a:link（鏈接的原始狀態(tài)）a:visited（被點(diǎn)擊或訪問過的狀態(tài)）a:hover（鼠標(biāo)經(jīng)過時的狀態(tài)）a:active（當(dāng)鼠標(biāo)點(diǎn)擊時的狀態(tài)）文字或圖像如果加了超鏈接，則在默認(rèn)狀態(tài)下顯示文字為藍(lán)色字和有下劃線，圖像則藍(lán)色邊框，當(dāng)文字或圖像被點(diǎn)擊過或訪問過，則顏色均改為紫色。因此，常常通過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è)置四種狀態(tài)時，要按linkvisitedhoveractive的順序設(shè)置，否則，偽類的設(shè)置將會沒有效果CSS選擇器2.4.5ID選擇器ID選擇器的使用方法與類別選擇器的方式基本相同，以#開始，自定義名稱，名稱的必須是字母或數(shù)字或下劃線，并且名稱不能以數(shù)字或下劃線開始，即ID選擇器的名稱以#開始后，第一個字行必須是字母。<!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ǔ)，通過組合，還可以產(chǎn)生更多種類的選擇器，實(shí)現(xiàn)更強(qiáng)、更方便的選擇功能，這種稱為復(fù)合選擇器，即將標(biāo)簽選擇器、類別選擇器和ID選擇器通過不同的連接方式組合而成的選擇器，一般是由兩個或以上的選擇器類型組成。標(biāo)簽選擇器與類別選擇器的組成的復(fù)合選擇器類型。標(biāo)簽a是超鏈接標(biāo)簽，.rose是類名，名稱需要符合類的命名規(guī)則，兩者合起來就是a.rose，是針對超鏈接標(biāo)簽設(shè)置的CSS樣式，所以要應(yīng)用在a標(biāo)簽中，由于是類，所以又可以多次使用，通過設(shè)置不同的類來設(shè)置多種的超鏈接的方式CSS選擇器2.4.5CSS復(fù)合選擇器標(biāo)簽選擇器與類別選擇器的組成的復(fù)合選擇器類型。例：在一個網(wǎng)頁中設(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是一個復(fù)合選擇器，應(yīng)用對象是超鏈接標(biāo)簽，類名為rose的位置*/a:hover.rose{color:#03C}/*a:hover是超鏈接標(biāo)簽的鼠標(biāo)over狀態(tài)，要對應(yīng)類別選擇器的名稱來設(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ǔ)，通過組合，還可以產(chǎn)生更多種類的選擇器，實(shí)現(xiàn)更強(qiáng)、更方便的選擇功能，這種稱為復(fù)合選擇器，即將標(biāo)簽選擇器、類別選擇器和ID選擇器通過不同的連接方式組合而成的選擇器，一般是由兩個或以上的選擇器類型組成。2.通過嵌套選擇器構(gòu)成的復(fù)合選擇器在CSS選擇器中，經(jīng)常會將多個選擇器通過嵌套的方式，對指定的位置的HTML標(biāo)簽進(jìn)行設(shè)置，例如，名稱為a3的<ul>里的<a>標(biāo)簽的樣式，就可以采用嵌套選擇器的方式實(shí)現(xiàn)，而且可以有多種嵌套方式，如：.a3a，.a3lia，ul.a3a，ul.a3lia均可以實(shí)現(xiàn)對同一個位置的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)頁元素的效果，例如文字的字體、顏色、大小，行間距，元素的邊框、背景，列表的符號，鼠標(biāo)的形狀等，隨著CSS的發(fā)展，CSS對網(wǎng)頁元素的影響越來越大，主要定義網(wǎng)頁元素的8大類，分別為：類型、背景、區(qū)塊、方框、邊框、列表、定位和擴(kuò)展、過渡，DreamweaverCS6的【CSS規(guī)則定義】8個CSS面板就是對應(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過渡課堂練習(xí)：CSS制作水平菜單2.4.7效果圖導(dǎo)航菜單是網(wǎng)頁中重要的組成之一，導(dǎo)航菜單的風(fēng)格往往也決定了整個網(wǎng)站的風(fēng)格，因此在制作網(wǎng)頁時會投入很多時間和精力來制作各式各樣的導(dǎo)航條，從而體現(xiàn)網(wǎng)站的整體構(gòu)架。用CSS與HTML的列表標(biāo)簽來制作導(dǎo)航菜單，實(shí)現(xiàn)起來簡單美觀，并且可以做水平菜單和垂直菜單。一般采用<ul>或<ol>和<li>結(jié)合對標(biāo)簽的CSS樣式定義來實(shí)現(xiàn)。步驟1定義一個站點(diǎn)，新建網(wǎng)頁文件cz.html，新建樣式表文件css.css，保存兩個文件在站點(diǎn)中，點(diǎn)擊【CSS樣式】工具欄中的【鏈接外部樣式表】按鈕，將css.css鏈接到cz.html文件中。步驟2定義一個無序列表<ul>，每對<li></li>里包含一個菜單項(xiàng)，并加入空的超鏈接。<ul><li><ahref="#">首頁</a></li><li><ahref="#">產(chǎn)品介紹</a></li><li><ahref="#">服務(wù)介紹</a></li><li><ahref="#">技術(shù)支持</a></li><li><ahref="#">立刻購買</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>的列表符號設(shè)置為無。步驟4在css.css文件里設(shè)置<ul>的樣式為:ul{padding:0;margin:0;list-style-type:none;}設(shè)置<li>標(biāo)簽的樣式為float的左對齊效果li{float:left;}，菜單變?yōu)樗讲藛巍?/p>