(中職)Dreamweaver-CC網(wǎng)頁(yè)設(shè)計(jì)與制作(3版)電子課件(完整版)

1、Dreamweaver CC網(wǎng)頁(yè)設(shè)計(jì)與制作（3版）模塊1 課件01模塊1 網(wǎng)頁(yè)基礎(chǔ)知識(shí)03模塊3 網(wǎng)頁(yè)布局05模塊5 網(wǎng)站的測(cè)試與發(fā)布02模塊2 初級(jí)應(yīng)用04模塊4 高級(jí)應(yīng)用06模塊6 綜合應(yīng)用任務(wù)描述 通過(guò)在記事本和Dreamweaver中使用HTML代碼制作網(wǎng)頁(yè)，介紹HTML代碼的常用標(biāo)記及如何使用HTML代碼制作簡(jiǎn)單網(wǎng)頁(yè)的方法。任務(wù)1 體驗(yàn)HTML文網(wǎng)頁(yè)基礎(chǔ)任務(wù)解析 在記事本中輸入HTML代碼制作簡(jiǎn)單網(wǎng)頁(yè)； 在Dreamweaver 中使用代碼視圖查看網(wǎng)頁(yè)代碼； 在Dreamweaver 的代碼視圖下編輯HTML代碼。具體操作：（1）選擇“開(kāi)始所有程序附件記事本”命令，在記事本窗口中中輸

2、入以下HTML代碼： 社會(huì)主義核心價(jià)值觀 富強(qiáng)、民主、文明、和諧、自由、平等、公正、法治、愛(ài)國(guó)、敬業(yè)、誠(chéng)信、友善 （2）輸入完畢，選擇“文件保存”命令，打開(kāi)“另存為”對(duì)話框，選擇保存位置為素材庫(kù)的chapter1文件夾，文件名為“myweb1.html”，保存類(lèi)型為“所有文件”，如圖1-1所示，單擊“保存”按鈕。（2）輸入完畢，選擇“文件保存”命令，打開(kāi)“另存為”對(duì)話框，選擇保存位置為素材庫(kù)的chapter1文件夾，文件名為“myweb1.html”，保存類(lèi)型為“所有文件”，如圖1-1所示，單擊“保存”按鈕。（3）在“計(jì)算機(jī)”中打開(kāi)chapter1文件夾，雙擊myweb1.html打開(kāi)瀏覽器瀏

3、覽該網(wǎng)頁(yè)，可以看到字幕“富強(qiáng)、民主、文明、和諧、自由、平等、公正、法治、愛(ài)國(guó)、敬業(yè)、誠(chéng)信、友善”從右向左滾動(dòng)，標(biāo)題“社會(huì)主義核心價(jià)值觀”出現(xiàn)在瀏覽器的標(biāo)題欄，如圖1-2所示。 圖1-1 “另存為”對(duì)話框 圖1-2 瀏覽myweb1.html（4）右單擊瀏覽器空白處，選擇“添加到收藏夾”命令，將該網(wǎng)頁(yè)添加到收藏夾中，如圖1-3所示。 圖1-3 添加到收藏夾（5）啟動(dòng)Dreamweaver CS6軟件，選擇“文件打開(kāi)”命令，打開(kāi)chapter1文件夾中的myweb2.html，如圖1-4所示。（6）按F4鍵隱藏所有面板，單擊“文檔”工具欄上的“代碼”按鈕，切換到Dreamweaver 的“代碼”視

4、圖，對(duì)代碼進(jìn)行如圖1-5所示的修改。 圖1-4 在Dreamweaver 中打開(kāi)myweb2.html 圖1-5 Dreamweave代碼視圖（7）單擊“設(shè)計(jì)”按鈕切換到設(shè)計(jì)視圖，按F12鍵保存并瀏覽網(wǎng)頁(yè)，如圖1-6所示。單擊“Adobe官方網(wǎng)站”，將在瀏覽器的新窗口中打開(kāi)Adobe官方網(wǎng)站。 圖1-6 預(yù)覽myweb2.html文件（8）在Dreameaver中打開(kāi)chapter1文件夾中的myweb3.html，切換到代碼視圖。（9）在和之間添加以下代碼： 網(wǎng)站首頁(yè) 梨花小鎮(zhèn) 與我聯(lián)系 用戶(hù)登錄用戶(hù)姓名 登錄密碼 （10）選擇“文件保存”命令，按F12瀏覽該網(wǎng)頁(yè)，效果如圖1-7所示。 圖1

5、-7 預(yù)覽myweb3.html文件 網(wǎng)頁(yè)基礎(chǔ)知識(shí)此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處 1Internet概述 Internet，中文名稱(chēng)為“因特網(wǎng)”或“國(guó)際互聯(lián)網(wǎng)”，是利用通信線路和通信設(shè)備將世界各地的計(jì)算機(jī)網(wǎng)絡(luò)、主機(jī)和個(gè)人計(jì)算機(jī)互相連接起來(lái)，在網(wǎng)絡(luò)協(xié)議控制下所構(gòu)成的全球互聯(lián)網(wǎng)系統(tǒng)。 Internet提供的服務(wù)主要包括萬(wàn)維網(wǎng)（WWW）、電子郵件（E-Mail）、文件傳輸（FTP）、遠(yuǎn)程登錄（Telnet）等。對(duì)于生活在現(xiàn)代社會(huì)的人，沒(méi)有Internet的生活簡(jiǎn)直無(wú)法想象，從每天的新聞報(bào)告、天氣資訊，到形形色色的在線音樂(lè)、網(wǎng)絡(luò)視頻、QQ、微博、微

6、信、支付寶，再到外出旅行的機(jī)票預(yù)訂、旅館安排、網(wǎng)上購(gòu)物、證券交易等活動(dòng)，網(wǎng)絡(luò)已經(jīng)滲透到我們生活的各個(gè)角落。網(wǎng)頁(yè)基礎(chǔ)知識(shí)此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處 2WWW服務(wù) WWW 是 World Wide Web的縮寫(xiě)，其含義是“全球網(wǎng)”，也稱(chēng)其為“萬(wàn)維網(wǎng)”。WWW是一種基于HTTP（超文本傳輸協(xié)議）的交互式多媒體信息檢索工具。使用WWW，只需單擊就可以在Internet上瀏覽各種信息資源。 WWW服務(wù)采用客戶(hù)機(jī)/服務(wù)器工作模式，由WWW瀏覽器、Web服務(wù)器和WWW協(xié)議組成。WWW的信息資源以網(wǎng)頁(yè)的形式存儲(chǔ)在Web服務(wù)器中，用戶(hù)通過(guò)客戶(hù)端的瀏覽器，

7、向Web服務(wù)器發(fā)出URL請(qǐng)求，Web服務(wù)器接收并處理用戶(hù)請(qǐng)求后，將網(wǎng)頁(yè)返回給客戶(hù)端，瀏覽器接收到網(wǎng)頁(yè)后對(duì)其進(jìn)行解釋?zhuān)罱K將文字、圖片、聲音、動(dòng)畫(huà)、影視并茂的畫(huà)面呈現(xiàn)給用戶(hù)。 WWW瀏覽器是專(zhuān)門(mén)來(lái)定位和訪問(wèn)Web信息的應(yīng)用程序。常用的瀏覽器軟件包括Microsoft公司的Internet Explorer和Netscape公司的Navigator。Web服務(wù)器是對(duì)瀏覽器的請(qǐng)求提供服務(wù)的計(jì)算機(jī)及其相應(yīng)的服務(wù)程序。網(wǎng)頁(yè)設(shè)計(jì)者將制作好的網(wǎng)站上傳到Web服務(wù)器上才能被用戶(hù)瀏覽。網(wǎng)頁(yè)基礎(chǔ)知識(shí)此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處3Web站點(diǎn)和網(wǎng)頁(yè) Web站點(diǎn)，

8、又稱(chēng)為網(wǎng)站，是指在因特網(wǎng)上，根據(jù)一定的規(guī)則，使用HTML等工具制作的用于展示特定內(nèi)容的相關(guān)網(wǎng)頁(yè)的集合。簡(jiǎn)單地說(shuō)，Web站點(diǎn)是一種通訊工具，人們可以通過(guò)網(wǎng)站來(lái)發(fā)布自己想要公開(kāi)的資訊，或者利用Web站點(diǎn)來(lái)提供相關(guān)的網(wǎng)絡(luò)服務(wù)，瀏覽者可以通過(guò)網(wǎng)頁(yè)瀏覽器來(lái)訪問(wèn)Web網(wǎng)站，獲取需要的資訊或者享受網(wǎng)絡(luò)服務(wù)，其運(yùn)作原理如圖1-10所示。 圖1-10 Web站點(diǎn)運(yùn)作原理 網(wǎng)頁(yè)是構(gòu)成網(wǎng)站的基本元素，一般又稱(chēng)作HTML文檔，是一種可以在互聯(lián)網(wǎng)上傳輸，能被瀏覽器識(shí)別和翻譯成頁(yè)面并顯示出來(lái)的文件。通常我們看到的網(wǎng)頁(yè)，都是以 htm 或 html 為擴(kuò)展名的文件，這些網(wǎng)頁(yè)稱(chēng)為靜態(tài)網(wǎng)頁(yè)。根據(jù)采用服務(wù)器技術(shù)的不同，網(wǎng)頁(yè)擴(kuò)展名

9、又有ASP、PHP、JSP等，這些網(wǎng)頁(yè)稱(chēng)為動(dòng)態(tài)網(wǎng)頁(yè)。在瀏覽器的地址欄中輸入網(wǎng)站的URL（統(tǒng)一資源定位符，也稱(chēng)為網(wǎng)址）后見(jiàn)到的第一個(gè)網(wǎng)頁(yè)稱(chēng)為網(wǎng)站的主頁(yè)，主頁(yè)是網(wǎng)站中所有網(wǎng)頁(yè)的索引頁(yè)，通過(guò)單擊主頁(yè)上的超鏈接可以打開(kāi)其他的網(wǎng)頁(yè)。網(wǎng)頁(yè)基礎(chǔ)知識(shí)此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處4HTTP和URLHTTP：超文本傳輸協(xié)議，是互聯(lián)網(wǎng)上應(yīng)用最為廣泛的一種網(wǎng)絡(luò)協(xié)議，它允許將HTML文檔從 Web 服務(wù)器傳送到 WWW瀏覽器。Internet中的Web服務(wù)器數(shù)量眾多，且每臺(tái)服務(wù)器都包含有多個(gè)網(wǎng)頁(yè)，用戶(hù)要想在眾多的網(wǎng)頁(yè)中指明要獲得的網(wǎng)頁(yè)，就必須借助于統(tǒng)一資源定位符（

10、URL, Uniform Resource Locators）進(jìn)行資源定位。URL由三個(gè)部分組成：協(xié)議、主機(jī)名、路徑及文件名，例如：某網(wǎng)頁(yè)的URL為： /news /wj1.html其中http:是采用的協(xié)議，是主機(jī)名，news指網(wǎng)頁(yè)的路徑（存儲(chǔ)網(wǎng)頁(yè)的文件夾），wj1.html是要訪問(wèn)的網(wǎng)頁(yè)文件名。用戶(hù)只要在瀏覽器的地址欄中輸入要瀏覽網(wǎng)頁(yè)的URL，便可以瀏覽到該網(wǎng)頁(yè)。網(wǎng)站配色方案此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處1色彩的基礎(chǔ)知識(shí)色彩是網(wǎng)站中最主要的組成部分，網(wǎng)站頁(yè)面的色彩處理得好，可以錦上添花，達(dá)到事半功倍的效果。色彩一般分為無(wú)彩色和有彩色兩大

11、類(lèi)。無(wú)彩色是指黑、灰、白等不帶顏色的色彩，有彩色是指紅、黃、藍(lán)等帶有顏色的色彩。（1）色彩的三要素色相：指色彩的相貌，也就是各種顏色之間的區(qū)別，是色彩最顯著的特征。明度：指色彩本身的明暗深淺程度，簡(jiǎn)單來(lái)說(shuō)就是指色彩的程度。純度：指色彩本身的鮮艷程序，又稱(chēng)為色彩的飽和度。（2）色彩的感覺(jué)紅色：是最引人注目的色彩，具有強(qiáng)烈的感染力，象征熱情、喜慶、幸福。在色彩配合中常起著主色和重要的調(diào)和對(duì)比作用，是使用得最多的色。綠色：是植物是色彩，象征著平靜、健康、健全、和諧和安全。藍(lán)色：使人聯(lián)想到天空、海洋，給人以爽朗、清涼的感覺(jué)，象征著平靜、穩(wěn)定性、和諧、統(tǒng)一、信任。黃色：給人明朗愉快的感覺(jué)，象征著光明、希

12、望、高貴、愉快。橙色：介于紅色與黃色之間，可以營(yíng)造一種溫馨的氛圍，象征著溫馨、時(shí)尚、輕快。紫色：是一種優(yōu)雅、高貴、充滿(mǎn)靈性并能激發(fā)創(chuàng)造力的顏色，象征著優(yōu)雅、高貴、神秘、憂郁。白色：給人以干凈整潔的感覺(jué)，象征著純潔、天真、干凈、輕松、神圣。黑色：是一種比較經(jīng)典的色彩，象征著嚴(yán)肅、神秘、威嚴(yán)、深沉、壓抑?；疑菏且环N可以襯托任何色彩的顏色，象征溫和、謙讓、平凡、考究。網(wǎng)站配色方案此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處2色彩的搭配原則（1）網(wǎng)頁(yè)色彩搭配時(shí)，要善用單色、對(duì)比色、鄰近色和同類(lèi)色。（2）網(wǎng)頁(yè)要用與眾不同的色彩，不同類(lèi)型的網(wǎng)站配以不同的色彩，從而

13、表達(dá)不同的情感訴求。（3）色彩要和網(wǎng)站的內(nèi)容、文化氛圍相符合，以便更好突出網(wǎng)站的特色。（4）網(wǎng)頁(yè)配色時(shí)，盡量把顏色控制在三種之內(nèi)，以免使頁(yè)面產(chǎn)生“亂”的效果。網(wǎng)站配色方案此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處3網(wǎng)站常見(jiàn)的配色方案（1）兒童類(lèi)網(wǎng)站：常運(yùn)用幸福感強(qiáng)烈、充滿(mǎn)溫情、智慧和希望的黃色；干凈、清澈的藍(lán)色；渲染朝氣、健康、自然的綠色；營(yíng)造溫馨氛圍，活潑、朝氣的橙色，如圖1-11所示。 （2）教育類(lèi)網(wǎng)站：常運(yùn)用平靜、清澈的藍(lán)色或充滿(mǎn)希望的綠色，如圖1-12所示。 （3）企業(yè)類(lèi)網(wǎng)站：常運(yùn)用沉穩(wěn)、冷靜、嚴(yán)謹(jǐn)、成熟的冷色調(diào)藍(lán)色，給人一種穩(wěn)定感，使訪問(wèn)者容

14、易建立對(duì)網(wǎng)站的信任，如圖1-13所示。 圖1-11營(yíng)造溫馨氛圍的兒童網(wǎng)站 圖1-12 平靜、清澈的藍(lán)色系教育網(wǎng) 圖1-13 沉穩(wěn)冷靜的藍(lán)色系企業(yè)網(wǎng)站網(wǎng)站配色方案此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處（4）購(gòu)物類(lèi)網(wǎng)站：常運(yùn)用紅色、黃色、橙色等暖色調(diào)渲染氛圍，讓瀏覽者感覺(jué)到輕松和愉快，如圖1-14所示。（5）旅游休閑類(lèi)網(wǎng)站：常運(yùn)用代表大自然、健康和希望的綠色，代表天空、海洋，干凈清澈的藍(lán)色，如圖1-15所示。 圖1-14 輕松愉快的暖色調(diào)購(gòu)物網(wǎng)站 圖1-15 干凈清澈的藍(lán)色系旅游網(wǎng)站網(wǎng)站設(shè)計(jì)常用軟件此處添加你的信息此處添加你的信息此處添加你的信息此處添

15、加你的信息此處添加你的信息此處1網(wǎng)站設(shè)計(jì)開(kāi)發(fā)軟件（1）文本編輯器制作網(wǎng)頁(yè)通常使用HTML語(yǔ)言，HTML文檔可以使用多種文本編輯器進(jìn)行編輯，如記事本、Word、寫(xiě)字板、UltraEdit等。其中，UltraEdit是一套功能最強(qiáng)大的文本編輯器，可以編輯文本、十六進(jìn)制、ASCII 碼，具有 HTML 標(biāo)簽顏色顯示、搜尋替換以及無(wú)限制的還原功能，但不具備所見(jiàn)即所得功能，適合編輯HTML文檔源代碼，也稱(chēng)為源代碼編輯器。（2）FrontpageFrontpage是微軟公司出品的一款網(wǎng)頁(yè)制作入門(mén)級(jí)軟件。FrontPage使用方便簡(jiǎn)單，會(huì)用Word就能做網(wǎng)頁(yè)，所見(jiàn)即所得是其特點(diǎn)，該軟件結(jié)合了設(shè)計(jì)、HTML、

16、預(yù)覽三種顯示模式，相對(duì)于其他專(zhuān)業(yè)設(shè)計(jì)軟件，其功能簡(jiǎn)單，不適合制作復(fù)雜的動(dòng)態(tài)網(wǎng)頁(yè)，適合于初學(xué)者。（3）DreamweaverDreamweaver是由Adobe公司推出一款優(yōu)秀的網(wǎng)站開(kāi)發(fā)工具，是網(wǎng)頁(yè)設(shè)計(jì)師在選擇開(kāi)發(fā)工具時(shí)一個(gè)不錯(cuò)的選擇，能更有效地設(shè)計(jì)、開(kāi)發(fā)和維護(hù)基于網(wǎng)站校準(zhǔn)化的網(wǎng)站，它集成了眾多網(wǎng)站開(kāi)發(fā)中涉及到的最新技術(shù)，擴(kuò)展了頁(yè)面設(shè)計(jì)與制作、多媒體開(kāi)發(fā)和動(dòng)畫(huà)設(shè)計(jì)等功能，是當(dāng)前最為流行的網(wǎng)站設(shè)計(jì)工具之一。網(wǎng)站設(shè)計(jì)常用軟件此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處2網(wǎng)頁(yè)美化工具（1）PhotoshopPhotoshop是由Adobe公司開(kāi)發(fā)的一種的圖形圖像

17、軟件，是目前最好的平面設(shè)計(jì)軟件之一，其功能完善、性能穩(wěn)定、使用方便，是美化網(wǎng)頁(yè)的常用工具。（2）FireworksFireworks是一款專(zhuān)為網(wǎng)絡(luò)圖形設(shè)計(jì)的圖形編輯軟件，它大大簡(jiǎn)化了網(wǎng)絡(luò)圖形設(shè)計(jì)的工作難度，無(wú)論是專(zhuān)業(yè)設(shè)計(jì)家還是業(yè)余愛(ài)好者，使用Fireworks都不僅可以輕松地制作出十分動(dòng)感的GIF動(dòng)畫(huà)，還可以輕易地完成大圖切割、動(dòng)態(tài)按鈕、動(dòng)態(tài)翻轉(zhuǎn)圖等。（3）FlashFlash是專(zhuān)業(yè)的矢量圖形編輯和動(dòng)畫(huà)創(chuàng)作軟件，是一種交互式動(dòng)畫(huà)設(shè)計(jì)工具，用它可以將音樂(lè)、聲效、動(dòng)畫(huà)以及富有新意的界面融合在一起，制作出高品質(zhì)的網(wǎng)頁(yè)動(dòng)態(tài)效果。HTML文檔入門(mén)此處添加你的信息此處添加你的信息此處添加你的信息此處添加你

18、的信息此處添加你的信息此處1HTML語(yǔ)言概述 HTML（Hypertext Marked Language，超文本標(biāo)記語(yǔ)言）是用于創(chuàng)建Web文檔的一種標(biāo)記語(yǔ)言。自1990年首次用于網(wǎng)頁(yè)編輯后，由于其編寫(xiě)制作的簡(jiǎn)易性，HTML迅速成為網(wǎng)頁(yè)編程的主流語(yǔ)言，幾乎所有的網(wǎng)頁(yè)都是由HTML或其他語(yǔ)言程序嵌套在HTML語(yǔ)言中編寫(xiě)的。 在IE瀏覽器任意打開(kāi)一個(gè)網(wǎng)頁(yè)，選擇“查看源文件”命令，系統(tǒng)會(huì)啟動(dòng)記事本程序，打開(kāi)該網(wǎng)頁(yè)的源程序，如圖1-16所示。 圖1-16 查看源程序 這些文本其實(shí)就是HTML源代碼，可使用任意文字編輯器來(lái)編寫(xiě)，保存為.htm或.html格式即可。要制作HTML文檔，一般有兩種方法，一是

19、使用記事本之類(lèi)的工具，直接輸入HTML的源代碼，然后保存為以html或htm為擴(kuò)展名的網(wǎng)頁(yè)文件，另一種方法是使用可視化的網(wǎng)頁(yè)制作工具，根據(jù)用戶(hù)的操作自動(dòng)生成HTML代碼，如Dreamweaver、Frontpage等軟件。HTML文檔入門(mén)此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處2HTML文檔基本結(jié)構(gòu)一個(gè)HTML文檔是由一系列的網(wǎng)頁(yè)元素和標(biāo)記組成的，HTML用標(biāo)記來(lái)規(guī)定元素的屬性和它在文件中的位置。HTML文檔的結(jié)構(gòu)包括頭部分（head）和主體部分（body）兩大部分，其中頭部分描述瀏覽器所需的信息，主體部分則包含了所要說(shuō)明的具體內(nèi)容，具體結(jié)構(gòu)如圖1-

20、17所示。 圖1-17 HTML文檔結(jié)構(gòu)由上面可以看出：（1）HTML文檔包括3個(gè)主要標(biāo)記，文檔標(biāo)記、頭部標(biāo)記 和主體標(biāo)記。（2）標(biāo)記不區(qū)分大小寫(xiě)。（3）所有的標(biāo)記都要用尖括號(hào)括起來(lái)。標(biāo)記用于HTML文檔的最前面，用來(lái)標(biāo)識(shí)HTML文檔的開(kāi)始，而標(biāo)記恰恰相反，它放在HTML文檔的最后面，用來(lái)標(biāo)識(shí)HTML文檔的結(jié)束，這兩個(gè)標(biāo)記必須成對(duì)使用。在內(nèi)，稱(chēng)為文件頭部，可以包含、等標(biāo)記，這部分信息不會(huì)在瀏覽器的窗口中顯示出來(lái)。在內(nèi)，稱(chēng)為正文主體，可包含、等標(biāo)記，其內(nèi)容將在瀏覽器窗口中顯示出來(lái)。HTML文檔入門(mén)此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處3HTML文檔常

21、用標(biāo)記（1）標(biāo)題標(biāo)記格式：網(wǎng)頁(yè)的標(biāo)題說(shuō)明：該標(biāo)記在標(biāo)記中，所包含的文字將出現(xiàn)在瀏覽器的標(biāo)題欄上。當(dāng)用戶(hù)將此頁(yè)面添加到收藏夾時(shí)，也會(huì)默認(rèn)以該標(biāo)題為名稱(chēng)收藏。（2）主體標(biāo)記格式：主體內(nèi)容說(shuō)明：包括所有主體內(nèi)容，可以設(shè)置頁(yè)面的背景顏色、背景圖像、文字顏色等屬性。背景顏色和文本顏色可以使用顏色名（如藍(lán)色：blue）或顏色代碼值（如藍(lán)色：#0000FF）來(lái)表示。例如：將圖像tx.jpg設(shè)置為網(wǎng)頁(yè)背景圖像，網(wǎng)頁(yè)文字顏色為藍(lán)色。主體內(nèi)容HTML文檔入門(mén)此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處（3）文字標(biāo)記格式：文本內(nèi)容說(shuō)明： 標(biāo)記用于設(shè)置網(wǎng)頁(yè)中文字的字號(hào)、字體、顏

22、色等屬性。設(shè)置字號(hào)時(shí)，（最?。?、（最大）、（比預(yù)設(shè)字大一級(jí)）、（比預(yù)設(shè)字小一級(jí)）。例如：將文本“最新通知” 設(shè)置為楷體_GB2312，大小為4。最新通知（4）段落標(biāo)記格式：段落文本說(shuō)明：由標(biāo)記所標(biāo)識(shí)的文字代表同一個(gè)段落的文字。其中align屬性有l(wèi)eft、center和right三個(gè)參數(shù)，這三個(gè)設(shè)置分別代表左對(duì)齊、居中對(duì)齊和右對(duì)齊。例如：將標(biāo)題“會(huì)議通知”居中顯示。會(huì)議通知（5）換行標(biāo)記格式：說(shuō)明：是個(gè)單標(biāo)記，HTML文件中任何位置只要使用了標(biāo)記，當(dāng)文件顯示在瀏覽器中時(shí)，該位置之后的文字將顯示于下一行。HTML文檔入門(mén)此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的

23、信息此處（6）水平線標(biāo)記格式：說(shuō)明：在網(wǎng)頁(yè)中插入一條水平分隔線，將不同的內(nèi)容信息分開(kāi)，使文字看起來(lái)清晰、明確。noshade用于設(shè)置水平為實(shí)心線（默認(rèn)情況下為陰影線）。例如：插入一條寬度800像素的紅色水平線，并居中顯示。（7）圖像標(biāo)記格式：說(shuō)明：在頁(yè)面中插入一幅圖像，圖像地址可以是本地計(jì)算機(jī)上的文件，也可以是一個(gè)URL地址，但圖像必須是GIF、JPG/JPEG或PNG格式的，其他格式的圖像不能被插入到網(wǎng)頁(yè)中。Alt參數(shù)用于設(shè)置圖像的說(shuō)明信息，當(dāng)瀏覽器不能顯示圖像時(shí)，則用該參數(shù)指定的文本替換特定的圖片。若圖片正常顯示，則當(dāng)鼠標(biāo)指該圖片時(shí)也會(huì)顯示該文字。例如：插入images文件夾中的圖像tx.

24、jpg，寬度和高度均為300像素，鼠標(biāo)指向圖像或圖像不能正常瀏覽時(shí)提示“風(fēng)景圖片”。 HTML文檔入門(mén)此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處（8）超鏈接標(biāo)記格式：文本或圖像說(shuō)明：為標(biāo)記中的文本或圖像添加超鏈接目標(biāo)，瀏覽網(wǎng)頁(yè)時(shí)單擊可打開(kāi)指定的目標(biāo)文件。target用于指定打開(kāi)目標(biāo)窗口的方式，默認(rèn)情況是在當(dāng)前窗口中打開(kāi)，如果要在新窗口中打開(kāi)目標(biāo)窗口，則可將target的屬性值設(shè)為_(kāi)blank。根據(jù)鏈接目標(biāo)的不同，可將超鏈接分為以下幾項(xiàng)：內(nèi)部鏈接，鏈接到本地計(jì)算機(jī)上的文件，例如：?jiǎn)螕舨榭?.html文件內(nèi)容外部鏈接，鏈接到本地站點(diǎn)以外其他任何一個(gè)站點(diǎn)上的

25、文件，例如：?jiǎn)螕舸蜷_(kāi)新浪網(wǎng)E-mail鏈接，鏈接到一個(gè)電子郵件地址，單擊將啟動(dòng)默認(rèn)E-mail程序發(fā)送信件，例如：請(qǐng)給我發(fā)信錨記鏈接，在某個(gè)Web頁(yè)面中創(chuàng)建一個(gè)被稱(chēng)為“錨點(diǎn)”的標(biāo)記，讓頁(yè)面上的另外一個(gè)位置引用，相當(dāng)于在某個(gè)文件中重要之處做上書(shū)簽，需要該部分時(shí)直接查找書(shū)簽就能找到此部分。例如，在某HTML文檔中定義一個(gè)abc的錨記。第五章然后在該文檔的另外一個(gè)位置創(chuàng)建一個(gè)錨記鏈接。單擊返回第五章HTML文檔入門(mén)此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處（8）超鏈接標(biāo)記格式：文本或圖像說(shuō)明：為標(biāo)記中的文本或圖像添加超鏈接目標(biāo)，瀏覽網(wǎng)頁(yè)時(shí)單擊可打開(kāi)指定的目標(biāo)

26、文件。target用于指定打開(kāi)目標(biāo)窗口的方式，默認(rèn)情況是在當(dāng)前窗口中打開(kāi)，如果要在新窗口中打開(kāi)目標(biāo)窗口，則可將target的屬性值設(shè)為_(kāi)blank。根據(jù)鏈接目標(biāo)的不同，可將超鏈接分為以下幾項(xiàng)：內(nèi)部鏈接，鏈接到本地計(jì)算機(jī)上的文件，例如：?jiǎn)螕舨榭?.html文件內(nèi)容外部鏈接，鏈接到本地站點(diǎn)以外其他任何一個(gè)站點(diǎn)上的文件，例如：?jiǎn)螕舸蜷_(kāi)新浪網(wǎng)E-mail鏈接，鏈接到一個(gè)電子郵件地址，單擊將啟動(dòng)默認(rèn)E-mail程序發(fā)送信件，例如：請(qǐng)給我發(fā)信錨記鏈接，在某個(gè)Web頁(yè)面中創(chuàng)建一個(gè)被稱(chēng)為“錨點(diǎn)”的標(biāo)記，讓頁(yè)面上的另外一個(gè)位置引用，相當(dāng)于在某個(gè)文件中重要之處做上書(shū)簽，需要該部分時(shí)直接查找書(shū)簽就能找到此部分。例如

27、，在某HTML文檔中定義一個(gè)abc的錨記。第五章然后在該文檔的另外一個(gè)位置創(chuàng)建一個(gè)錨記鏈接。單擊返回第五章HTML文檔入門(mén)此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處（9）表格標(biāo)記表格標(biāo)記由表格標(biāo)記、行標(biāo)記和單元格標(biāo)記3部分組成。表格標(biāo)記行標(biāo)記 單元格標(biāo)記 說(shuō)明：?jiǎn)卧襁吘嗍侵竼卧駜?nèi)容與單元邊框之間的像素?cái)?shù)，單元格間距是指相鄰單元格之間的距離。任務(wù)描述 通過(guò)編制一個(gè)JavaScript腳本程序，打印110之內(nèi)奇數(shù)之和，介紹JavaScript腳本程序在HTML語(yǔ)言中的應(yīng)用。任務(wù)2 一個(gè)簡(jiǎn)單的JavaScript加法程序 JavaScript腳本任務(wù)解析

28、 在記事本中輸入含有JavaScript腳本程序的HTML代碼制作簡(jiǎn)單網(wǎng)頁(yè)； 瀏覽該網(wǎng)頁(yè)，打印110之內(nèi)的奇數(shù)之和。具體操作：（1）選擇“開(kāi)始所有程序附件記事本”命令，打開(kāi)記事本窗口，在記事本中輸入以下代碼。打印1-10之內(nèi)的奇數(shù)之和var x,s;s=0;for(x=1;x=10;x+)if(x%2=0)continue;s=s+x;document.write(1-10 內(nèi)的奇數(shù)之和為:+s+);具體操作：（2）代碼輸入完畢，選擇“文件保存”命令，打開(kāi)“另存為”對(duì)話框，選擇保存位置為素材庫(kù)的chapter1文件夾，文件名為“myweb4.html”，保存類(lèi)型為“所有文件”，單擊“保存”按鈕

29、。（3）在“計(jì)算機(jī)”中打開(kāi)chapter1文件夾，雙擊myweb4.html打開(kāi)瀏覽器瀏覽該網(wǎng)頁(yè)，效果如圖1-20所示。 圖1-20 打印110之內(nèi)奇數(shù)之和JavaScript腳本此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處 JavaScript是一種基本于對(duì)象和事件驅(qū)動(dòng)并具有安全性能的腳本語(yǔ)言，使用目的是與HTML語(yǔ)言一起實(shí)現(xiàn)在一個(gè)Web頁(yè)面中與Web客戶(hù)交互作用。它是通過(guò)嵌入或調(diào)入到標(biāo)準(zhǔn)的HTML中實(shí)現(xiàn)的。當(dāng)瀏覽器打開(kāi)含有JavaScript腳本的頁(yè)面時(shí)，會(huì)讀出這個(gè)腳本并執(zhí)行其命令，因此JavaScript使用簡(jiǎn)單，運(yùn)行快，適用于較簡(jiǎn)單的應(yīng)用。 Ja

30、vaScript是一種腳本語(yǔ)言，下面就來(lái)介紹這種語(yǔ)言的基本語(yǔ)法。1.常量在JavaScript中，常量有以下6種基本類(lèi)型（1）整型常量：可以使用十六進(jìn)制、八進(jìn)制和十進(jìn)制表示。（2）實(shí)型常量：由整數(shù)部分加小數(shù)部分表示，如12.12、125.369等。（3）布爾值：布爾常量只有兩種狀態(tài)：true和false。（4）字符型常量：使用單引號(hào)或雙引號(hào)括起來(lái)的一個(gè)或幾個(gè)字符。（5）空值：JavaScript中有一個(gè)空值null，表示什么也沒(méi)有。（6）特殊字符：JavaScript有以反斜杠（）開(kāi)頭的不可顯示的特殊字符。JavaScript腳本此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息

31、此處添加你的信息此處2變量變量是存取數(shù)據(jù)、提供存放信息的容器。包括整數(shù)變量、字符型變量、布爾型變量和實(shí)數(shù)變量量，舉例如下所示：X=100Y=“123”Z= trueCj=12.12JavaScript腳本此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處3表達(dá)式和運(yùn)算符（1）算術(shù)運(yùn)算符通過(guò)算術(shù)運(yùn)算符可以進(jìn)行加、減、乘、除和其他數(shù)學(xué)運(yùn)算，如表1-1所示。（2）邏輯運(yùn)算符邏輯運(yùn)算符比較兩個(gè)布爾值（真或假），然后返回一個(gè)布爾值，如表1-2所示。（3）比較運(yùn)算符比較運(yùn)算符可以比較表達(dá)式的值，并返回一個(gè)布爾值，如表1-3所示。 表1-1 算術(shù)運(yùn)算符 表1-2 邏輯運(yùn)算符

32、 表1-3 比較運(yùn)算符JavaScript腳本此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處4基本程序語(yǔ)句（1）if語(yǔ)句if（條件）語(yǔ)句1else語(yǔ)句2如果其中的條件成立，則執(zhí)行語(yǔ)句1，否則執(zhí)行語(yǔ)句2。（2）for語(yǔ)句for(初始化部分;條件部分;更新部分)語(yǔ)句塊實(shí)現(xiàn)條件循環(huán)，當(dāng)條件成立時(shí)，執(zhí)行語(yǔ)句集，否則跳出循環(huán)體。（3）break語(yǔ)句break語(yǔ)句是結(jié)束當(dāng)前的循環(huán)，并把程序的控制權(quán)交給循環(huán)的下一條語(yǔ)句。（4）continue語(yǔ)句continue語(yǔ)句是結(jié)束當(dāng)前的某一次循環(huán)，但并沒(méi)有跳出整個(gè)循環(huán)。JavaScript腳本此處添加你的信息此處添加你的信息此處

33、添加你的信息此處添加你的信息此處添加你的信息此處5函數(shù)函數(shù)是一個(gè)擁有名字的一系列Javascript語(yǔ)句的有效組合，只要這個(gè)函數(shù)被調(diào)用，則該函數(shù)內(nèi)的一系列JavaScript語(yǔ)句被順序解釋執(zhí)行。定義一個(gè)函數(shù)和調(diào)用一個(gè)函數(shù)是兩個(gè)截然不同的概念，定義一個(gè)函數(shù)只是讓瀏覽器知道有這樣一個(gè)函數(shù)，而只有在函數(shù)被調(diào)用時(shí)，其代碼才真正被執(zhí)行。function 函數(shù)名稱(chēng)（參數(shù)表） 函數(shù)執(zhí)行部分;return 表達(dá)式;return語(yǔ)句指明由函數(shù)返回的值。模塊1結(jié)束Dreamweaver CC網(wǎng)頁(yè)設(shè)計(jì)與制作（3版）模塊2 課件01模塊1 網(wǎng)頁(yè)基礎(chǔ)知識(shí)03模塊3 網(wǎng)頁(yè)布局05模塊5 網(wǎng)站的測(cè)試與發(fā)布02模塊2 初級(jí)應(yīng)

34、用04模塊4 高級(jí)應(yīng)用06模塊6 綜合應(yīng)用任務(wù)描述 認(rèn)識(shí)Dreamweaver CC 2018工作界面，掌握在DW中創(chuàng)建、管理站點(diǎn)的基本流程及在DW中新建和設(shè)計(jì)頁(yè)面的基本過(guò)程。任務(wù)3 筑夢(mèng)青春創(chuàng)建與管理本地站點(diǎn)任務(wù)解析在本任務(wù)中，需要完成以下操作： 1. 學(xué)會(huì)本地站點(diǎn)的創(chuàng)建與編輯方法； 2. 學(xué)會(huì)網(wǎng)頁(yè)文件的新建、保存、預(yù)覽等基本操作。站點(diǎn)此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處 創(chuàng)建一個(gè)站點(diǎn)是建立網(wǎng)站的第一步。站點(diǎn)可以簡(jiǎn)單地理解為管理和存放網(wǎng)站中所有網(wǎng)頁(yè)及各種素材的文件夾。通過(guò)站點(diǎn)，可以方便地對(duì)站點(diǎn)文件進(jìn)行管理并能夠減少鏈接與路徑方面的錯(cuò)誤。 按地理

35、位置劃分，站點(diǎn)分為本地站點(diǎn)和遠(yuǎn)程站點(diǎn)。我們把在本地計(jì)算機(jī)硬盤(pán)中存放網(wǎng)頁(yè)的文件夾稱(chēng)為本地站點(diǎn)，把在Internet網(wǎng)絡(luò)服務(wù)器上存放網(wǎng)頁(yè)的文件夾稱(chēng)為遠(yuǎn)程站點(diǎn)。 按站點(diǎn)的交互性劃分，站點(diǎn)分為靜態(tài)站點(diǎn)和動(dòng)態(tài)站點(diǎn)。此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處 DW工作界面由菜單欄、工具欄、面板組、狀態(tài)欄、屬性面板、文檔窗口等組成，如圖2-9所示。 圖2-9 Dreamweaver的開(kāi)始界面DW工作界面此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處創(chuàng)建本地站點(diǎn) 在Dreamweaver中創(chuàng)建Web站點(diǎn)，通常先在本地磁盤(pán)上創(chuàng)建本地

36、站點(diǎn)，經(jīng)過(guò)一系列的測(cè)試后，再將這些網(wǎng)頁(yè)的副本上傳到一個(gè)遠(yuǎn)程Web服務(wù)器，成為真正的站點(diǎn)供他人在互聯(lián)網(wǎng)上瀏覽。創(chuàng)建本地站點(diǎn)的步驟如下。（1）運(yùn)行Dreamweaver，選擇菜單“站點(diǎn)新建站點(diǎn)”命令，彈出“站點(diǎn)設(shè)置對(duì)象”對(duì)話框。（2）選擇對(duì)話框中的“站點(diǎn)”選項(xiàng)，在“站點(diǎn)名稱(chēng)”文本框中輸入用戶(hù)自定的站點(diǎn)名稱(chēng)。在“本地站點(diǎn)文件夾”文本框中直接輸入站點(diǎn)文件夾的路徑，或單擊后面的“瀏覽文件夾” 按鈕，在打開(kāi)的“選擇根文件夾”對(duì)話框中進(jìn)行選擇。（3）如果要對(duì)站點(diǎn)屬性進(jìn)行詳細(xì)的設(shè)置和調(diào)整，可以選擇“高級(jí)設(shè)置”選項(xiàng)，在彈出的選項(xiàng)卡中進(jìn)行設(shè)置。 圖2-30 “管理站點(diǎn)”對(duì)話框此處添加你的信息此處（1）選擇菜單“站

37、點(diǎn)管理站點(diǎn)”命令，或在“文件”面板的下拉列表中選擇“管理站點(diǎn)”命令，如圖2-30所示。（2）選擇要編輯的站點(diǎn)，單擊“編輯”按鈕或直接雙擊站點(diǎn)名稱(chēng)，在彈出的“站點(diǎn)設(shè)置對(duì)象”對(duì)話框中可以對(duì)站點(diǎn)信息進(jìn)行修改。（3）編輯完成后，單擊“保存”按鈕，返回“管理站點(diǎn)”對(duì)話框，單擊“完成”按鈕。 編輯站點(diǎn) （1）選擇菜單“站點(diǎn)管理站點(diǎn)”命令，打開(kāi)“管理站點(diǎn)”對(duì)話框，在彈出的“管理站點(diǎn)”對(duì)話框中選擇要復(fù)制的站點(diǎn)，單擊“復(fù)制”按鈕，將會(huì)出現(xiàn)新站點(diǎn)。 （2）用鼠標(biāo)雙擊新復(fù)制出的站點(diǎn)，在彈出的“站點(diǎn)設(shè)置對(duì)象”對(duì)話框中進(jìn)行修改設(shè)置，單擊“保存”按鈕，返回“管理站點(diǎn)”對(duì)話框，單擊“完成”按鈕。復(fù)制站點(diǎn) 選擇菜單“站點(diǎn)管理

38、站點(diǎn)”命令，打開(kāi)“管理站點(diǎn)”對(duì)話框，選擇要?jiǎng)h除的站點(diǎn)，單擊“刪除”按鈕，即可將站點(diǎn)刪除。 刪除站點(diǎn)，只是刪除站點(diǎn)的定義信息，硬盤(pán)中相應(yīng)位置的文件和文件夾并不會(huì)被刪除。 刪除站點(diǎn) （1）選擇菜單“站點(diǎn)管理站點(diǎn)”命令，打開(kāi)“管理站點(diǎn)”對(duì)話框，選擇要導(dǎo)出的站點(diǎn)，單擊 按鈕。 （2）在彈出的“導(dǎo)出站點(diǎn)”對(duì)話框中，選擇站點(diǎn)定義文件的保存位置，輸入站點(diǎn)定義文件的文件名，單擊“保存”按鈕。導(dǎo)出站點(diǎn)（1）選擇菜單“站點(diǎn)管理站點(diǎn)”命令，打開(kāi)“管理站點(diǎn)”對(duì)話框，單擊導(dǎo)入站點(diǎn)按鈕，彈出“導(dǎo)入站點(diǎn)”對(duì)話框。（2）選擇導(dǎo)入站點(diǎn)定義文件,單擊“打開(kāi)”，選擇“管理站點(diǎn)”對(duì)話框中“完成”按鈕。 導(dǎo)入站點(diǎn) 1.創(chuàng)建文件夾 （1

39、） 通過(guò)“我的電腦”或“資源管理器”直接在站點(diǎn)文件夾中進(jìn)行創(chuàng)建。 （2） 在“文件”面板中選擇站點(diǎn)名稱(chēng)或文件夾，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“新建文件夾”命令，輸入文件夾的名稱(chēng)，按【Enter】鍵完成。 2.創(chuàng)建空白網(wǎng)頁(yè)文件 （1）啟動(dòng)DW后，窗口出現(xiàn)開(kāi)始頁(yè)面，單擊“新建”欄的“HTML”選項(xiàng)即可。 （2）選擇菜單“文件新建”命令，選擇“新建文檔”選項(xiàng)卡中的“HTML”文檔類(lèi)型，在“框架”列表中選擇“無(wú)”，文檔類(lèi)型默認(rèn)為“HTML5”，單擊“創(chuàng)建”按鈕。 （3）在“文件”面板中選擇站點(diǎn)，單擊鼠標(biāo)右鍵，從彈出的快捷菜單中選擇“新建文件”命令，輸入文件的名稱(chēng)，按【Enter】鍵完成。文檔基

40、本操作 3.保存網(wǎng)頁(yè)文件 選擇菜單“文件保存”命令或按【Ctrl+S】組合鍵可對(duì)當(dāng)前文檔進(jìn)行保存。如果對(duì)打開(kāi)的文檔進(jìn)行了修改，但尚未保存，文件名后將自動(dòng)顯示一個(gè)“*”，如圖2-31所示，保存后“*”將消失。 文檔基本操作圖2-31 修改后尚未保存的文檔添息此處 4.文檔的打開(kāi)和預(yù)覽 （1）打開(kāi)文檔 選擇菜單“文件打開(kāi)”命令，彈出“打開(kāi)”對(duì)話框，選擇要打開(kāi)的文件，單擊“打開(kāi)”按鈕。 在“文件”面板中，選擇要打開(kāi)的文檔，右鍵單擊鼠標(biāo)，在彈出的快捷菜單中選擇“打開(kāi)”命令，或直接雙擊鼠標(biāo)都可以打開(kāi)該文檔。 （2）預(yù)覽文檔 選擇菜單“文件實(shí)時(shí)預(yù)覽Internet Explore”或其他瀏覽器命令。 單擊

41、狀態(tài)欄最右側(cè)的“實(shí)時(shí)預(yù)覽”按鈕，從彈出的列表中選擇“Internet Explore”或其他瀏覽器。 按【F12】鍵。文檔基本操作 5移動(dòng)和復(fù)制文件（文件夾） （1）單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“編輯拷貝/剪切”命令，然后選擇目標(biāo)位置，從快捷菜單中選擇“編輯粘貼”命令，可完成文件或文件夾的復(fù)制/移動(dòng)操作。 （2）用鼠標(biāo)直接將文件或文件夾拖動(dòng)到新位置，可完成文件或文件夾的移動(dòng)操作。 6.刪除文件（文件夾） （1）在“文件”面板中，選擇要?jiǎng)h除的文件或文件夾。 （2）單擊鼠標(biāo)右鍵，從彈出的快捷菜單中選擇“編輯刪除”命令或直接按【Del】鍵。 （3）在彈出的提示對(duì)話框中單擊“是”按鈕，即可將文

42、件或文件夾從本地站點(diǎn)文檔基本操作（1）外觀“頁(yè)面屬性”對(duì)話框的“外觀”類(lèi)別包括CSS外觀和HTML外觀，分別如圖2-34和圖2-35所示，都可以對(duì)頁(yè)面的“外觀”進(jìn)行設(shè)置。頁(yè)面字體：指定網(wǎng)頁(yè)中使用的默認(rèn)字體，以及字體樣式和粗細(xì)。大?。褐付?yè)面中使用的默認(rèn)文本大小。 文本顏色：指定文本顯示的默認(rèn)顏色。 背景顏色：設(shè)置頁(yè)面的背景顏色。背景圖像：設(shè)置頁(yè)面的背景圖像。重復(fù)：指定背景圖像在頁(yè)面的顯示方式，左邊距和右邊距：指定頁(yè)面左邊距和右邊距的大小。 上邊距和下邊距：指定頁(yè)面上邊距和下邊距的大小。頁(yè)面屬性圖2-34 “外觀（CSS）”選項(xiàng)圖2-35 “外觀（HTML）”選項(xiàng)（2）鏈接在“鏈接”選項(xiàng)中可以設(shè)

43、置鏈接的屬性，如圖2-37所示。鏈接字體：指定頁(yè)面鏈接文本使用的默認(rèn)字體。 大?。褐付?yè)面鏈接文本使用的默認(rèn)文本大小。 鏈接顏色：指定頁(yè)面鏈接文本的顏色。 已訪問(wèn)鏈接：指定已訪問(wèn)鏈接文本的顏色。 變換圖像鏈接：指定當(dāng)鼠標(biāo)指針位于鏈接文本上時(shí)顯示的顏色。 活動(dòng)鏈接：指定用鼠標(biāo)指針單擊鏈接文本時(shí)顯示的顏色。 下劃線樣式：指定鏈接文本采用的下劃線樣式。列表中提供了4種樣式，如圖2-38所示，如果選擇“始終無(wú)下劃線”，則自動(dòng)取消網(wǎng)頁(yè)鏈接文本的下劃線。頁(yè)面屬性圖2-37 “頁(yè)面屬性”對(duì)話框圖2-38 “下劃線樣式”列表（3）標(biāo)題在“標(biāo)題”類(lèi)別中可以設(shè)置網(wǎng)頁(yè)中標(biāo)題的格式，即設(shè)置屬性面板“格式”列表框中各標(biāo)

44、題的默認(rèn)屬性，如圖2-39所示。標(biāo)題字體：指定網(wǎng)頁(yè)中標(biāo)題使用的默認(rèn)字體?！皹?biāo)題”選項(xiàng)組：分別為“標(biāo)題1”至“標(biāo)題6”指定文本的大小和顏色。（4）標(biāo)題/編碼在“標(biāo)題/編碼”選項(xiàng)中可以設(shè)置網(wǎng)頁(yè)標(biāo)題的內(nèi)容和編碼類(lèi)別，如圖2-40所示。標(biāo)題：指定在瀏覽器窗口的標(biāo)題欄上顯示的頁(yè)面標(biāo)題。系統(tǒng)默認(rèn)的網(wǎng)頁(yè)標(biāo)題是“無(wú)標(biāo)題文檔”。編碼：指定當(dāng)前網(wǎng)頁(yè)中文本采用的編碼類(lèi)別。頁(yè)面屬性圖2-39 “頁(yè)面屬性”對(duì)話框圖2-40 “頁(yè)面屬性”對(duì)話框（5）跟蹤圖像“跟蹤圖像”是Dreamweaver一個(gè)非常有效的功能，它允許用戶(hù)在網(wǎng)頁(yè)中將原來(lái)的平面設(shè)計(jì)稿作為輔助的背景。這樣用戶(hù)在編輯網(wǎng)頁(yè)時(shí)即可精確的定位頁(yè)面元素。提示：（1）如

45、果在“頁(yè)面屬性”對(duì)話框中同時(shí)設(shè)置了背景顏色和背景圖像，那么在網(wǎng)頁(yè)中優(yōu)先顯示背景圖像，沒(méi)有圖像的位置顯示背景顏色。（2）設(shè)置頁(yè)面標(biāo)題，還可以直接在頁(yè)面屬性面板的“文檔標(biāo)題” 框中輸入。或者在“代碼”視圖窗口中，修改標(biāo)題代碼和之間的內(nèi)容，如圖2-41所示。頁(yè)面屬性圖2-41 代碼視圖任務(wù)描述通過(guò)“筑夢(mèng)青春文本的設(shè)置”，學(xué)會(huì)并掌握文本對(duì)象的插入與編輯及設(shè)置文本格式。任務(wù)4 筑夢(mèng)青春 文本的設(shè)置任務(wù)解析掌握輸入文本、空格、特殊符號(hào)和實(shí)現(xiàn)文本換行的方法；學(xué)會(huì)在網(wǎng)頁(yè)中插入和編輯水平線；掌握文本HTML標(biāo)記并理解其相關(guān)屬性；學(xué)會(huì)設(shè)置文本格式。文本的設(shè)置此處添加你的信息此處添加你的信息此處添加你的信息此處添加

46、你的信息此處添加你的信息此處文本是網(wǎng)頁(yè)的主體和構(gòu)成網(wǎng)頁(yè)最基本的元素，用戶(hù)瀏覽網(wǎng)頁(yè)時(shí), 獲取信息的主要方式就是通過(guò)文本，并且它信息量大、易于瀏覽和下載，需要處理好文本內(nèi)容，達(dá)到準(zhǔn)確快捷傳遞信息的目的。此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處文本的輸入（1）添加普通文本，可以采用以下兩種方法。 直接通過(guò)鍵盤(pán)輸入文本。 在其他應(yīng)用程序中，選擇文本，按【Ctrl+C】鍵復(fù)制，在Dreamweaver的“文檔”窗口中，選擇菜單“編輯粘貼”命令（或按【Ctrl+V】鍵）粘貼文本。（2）插入空格默認(rèn)情況下，網(wǎng)頁(yè)文檔只允許在文本或字符之間輸入一個(gè)空格，若要在文檔中輸

47、入多個(gè)連續(xù)空格可執(zhí)行以下操作。選擇“插入”菜單“HTML” “不換行空格”命令。按【Ctrl+Shift+Space】組合鍵。在“代碼”視圖窗口中，輸入空格代碼“”。切換中文輸入法為全角狀態(tài)，按空格鍵可以輸入多個(gè)空格。選擇菜單“編輯首選項(xiàng)”命令，彈出對(duì)話框。在“分類(lèi)”列表中選擇“常規(guī)”選項(xiàng)，勾選“允許多個(gè)連續(xù)的空格” 復(fù)選框，單擊“確定”按鈕。此時(shí)，可以直接按空格鍵輸入空格。此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處文本的輸入（3）插入特殊字符 選擇菜單“插入HTML”中“字符”命令，在子菜單中選擇要插入的特殊字符。 用鼠標(biāo)右鍵單擊輸入法工具條上的軟鍵

48、盤(pán)，從打開(kāi)的列表中選擇相應(yīng)的符號(hào)組，如選擇“特殊符號(hào)”，軟鍵盤(pán)，單擊可插入特殊字符。 （4）插入日期 在“文檔”窗口中，將插入點(diǎn)定位到需要插入日期的位置。選擇菜單“插入HTML日期”命令或單擊“插入”面板“HTML”類(lèi)別中的“日期”按鈕，彈出“插入日期”對(duì)話框，設(shè)置完成后，單擊“確定”按鈕。此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處（1）段落換行若想生成新的的段落，在兩段之間出現(xiàn)一空行，可采用以下方法進(jìn)行換行。在需要換行的位置直接按【Enter】鍵。在代碼視圖窗口中輸入段落標(biāo)記和。（2）換行符換行若不想生成新的段落，兩行之間不出現(xiàn)空行，可采用以下方法進(jìn)

49、行換行。按【Shift+Enter】組合鍵。選擇“插入”菜單“HTML字符”中的“換行符”命令。選擇“插入”面板中的“文本”類(lèi)別，在“字符”下拉菜單中選擇“換行符” 。在“代碼”視圖窗口中，輸入換行標(biāo)記 。文本分段換行此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處文本屬性設(shè)置在“CSS”界面中設(shè)置文本格式（1）設(shè)置字體在“文本”屬性面板中單擊“CSS”按鈕，切換到文本的CSS設(shè)置界面。從“字體”列表中選擇合適的字體類(lèi)型，這時(shí)系統(tǒng)會(huì)自動(dòng)彈出“新建CSS規(guī)則”對(duì)話框，在“選擇器名稱(chēng)”中輸入一個(gè)名字，單擊“確定”按鈕。Dreamweaver默認(rèn)的是宋體字，“字體

50、”列表默認(rèn)顯示的是英文字體類(lèi)型。若設(shè)置其他中文字體，需先將中文字體類(lèi)型添加到字體列表中。單擊文本屬性面板中的“字體”列表按鈕，選擇“編輯字體”列表命令，彈出“管理字體”對(duì)話框。在“自定義字體堆?！边x項(xiàng)卡的“可用字體”列表中選擇要添加的字體，雙擊鼠標(biāo)或單擊添加按鈕，將其添加到“選擇的字體”列表中，可以同時(shí)添加多種字體。此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處文本屬性設(shè)置在“CSS”界面中設(shè)置文本格式（2）設(shè)置文字大小在“文本”屬性面板中單擊“CSS”按鈕，切換到文本的CSS設(shè)置界面。在“大小”列表框中選擇相應(yīng)的大小，如圖2-63所示，可以更改選擇文字的

51、大小。 無(wú)：以默認(rèn)字號(hào)顯示。9至36：8個(gè)字號(hào)級(jí)別，數(shù)值越大，字號(hào)越大。可以在“大小”框中直接輸入數(shù)字，設(shè)置字號(hào)大小。xx-small至larger：設(shè)置字符相對(duì)于默認(rèn)字符大小的增減量。圖2-63文字大小和單位此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處文本屬性設(shè)置在“CSS”界面中設(shè)置文本格式（3）設(shè)置文本顏色在“文本”屬性面板中單擊“CSS”按鈕，切換到文本的CSS設(shè)置界面。單擊屬性面板中的 按鈕，彈出顏色拾取器，如圖2-64所示?？梢赃x擇顏色，或直接在下面的文本框中輸入顏色的值，系統(tǒng)默認(rèn)文本顏色是黑色。 （4）設(shè)置文本的對(duì)齊方式：?jiǎn)螕魧傩悦姘逯械膶?duì)

52、齊按鈕。對(duì)齊按鈕包括：左對(duì)齊 、居中對(duì)齊 、右對(duì)齊 、兩端對(duì)齊 。 圖2-64顏色拾取器此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處文本屬性設(shè)置在“HTML”界面中設(shè)置段落格式（1）設(shè)置段落標(biāo)題的格式在“格式”下拉列表中選擇“標(biāo)題 1 - 標(biāo)題 6”即可設(shè)置段落的標(biāo)題格式。若想去除已有的格式，可將格式選項(xiàng)設(shè)為“無(wú)” （2）設(shè)置段落的縮進(jìn)方式單擊“內(nèi)縮區(qū)塊”按鈕 ，即可設(shè)置段落的縮進(jìn)，如果想取消，則單擊左側(cè)的“刪除內(nèi)縮區(qū)塊”按鈕 。 （3）創(chuàng)建項(xiàng)目列表和編號(hào)列表 單擊“項(xiàng)目列表”按鈕 ，可對(duì)段落添加項(xiàng)目列表符號(hào)。將光標(biāo)定位到需要更改項(xiàng)目列表的文字上，單擊“

53、列表項(xiàng)目.”按鈕，打開(kāi)“列表屬性”對(duì)話框，在“列表類(lèi)型”下拉框中選擇“項(xiàng)目列表”，在“樣式”下拉框中選擇樣式，單擊“確定”按鈕。 單擊“編號(hào)列表”按鈕 ，可對(duì)段落添加編號(hào)列表符號(hào)。將光標(biāo)定位到需要更改編號(hào)列表的文字上，單擊“列表項(xiàng)目.”按鈕，打開(kāi)“列表屬性”對(duì)話框，在“列表類(lèi)型”下拉框中選擇“編號(hào)列表”，在“樣式”下拉框中選擇樣式，單擊“確定”按鈕。此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處插入水平線（1）插入水平線將光標(biāo)定位到需要插入水平線的位置，執(zhí)行以下操作之一，即可插入水平線。選擇菜單“插入HTML水平線”命令。單擊“插入”面板“HTML”類(lèi)別中

54、的“水平線”按鈕 。（2）水平線的屬性設(shè)置選擇水平線，出現(xiàn)“水平線”屬性面板，寬和高：指定水平線的寬度和高度，單位可以是像素，也可以是頁(yè)面大小的百分比。對(duì)齊：指定水平線的對(duì)齊方式（默認(rèn)、左對(duì)齊、居中對(duì)齊或右對(duì)齊）。只有水平線的寬度小于瀏覽器窗口的寬度時(shí)，對(duì)齊設(shè)置才有效。 陰影：指定繪制的水平線是否具有陰影效果。（3）設(shè)置水平線的顏色 切換至代碼視圖，在水平線標(biāo)記中輸入“color= 顏色值”即可。提示：在“設(shè)計(jì)”視圖中，水平線的顏色不會(huì)改變，但可以在“實(shí)時(shí)”視圖或?yàn)g覽頁(yè)面時(shí)看到設(shè)置的顏色。若要插入豎直線，只需設(shè)置水平線的寬度為較小值，高度為較大值。此處添加你的信息此處添加你的信息此處添加你的信

55、息此處添加你的信息此處添加你的信息此處 默認(rèn)情況下，Dreamweaver使用CSS設(shè)置文本格式。使用“屬性”面板設(shè)置文本樣式時(shí)，將自動(dòng)創(chuàng)建CSS樣式，這些樣式被嵌入在當(dāng)前文檔的頭部，如圖2-69所示，對(duì)選中的文本進(jìn)行字體、大小和顏色屬性設(shè)置后，系統(tǒng)自動(dòng)打開(kāi)“新建CSS規(guī)則”對(duì)話框。 使用這種方式創(chuàng)建CSS樣式，操作簡(jiǎn)單，但創(chuàng)建的樣式只能嵌入到當(dāng)前文檔中，且功能有限。 CSS樣式圖2-69設(shè)置文本樣式此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處 “CSS設(shè)計(jì)器”面板是一個(gè)比屬性面板功能更為強(qiáng)大的編輯器，它顯示為當(dāng)前文檔定義的所有 CSS 樣式，而不管這些

56、樣式是嵌入在文檔中還是在外部樣式表中。 可以使用“CSS設(shè)計(jì)器”面板查看、創(chuàng)建、編輯和刪除 CSS 樣式，并且可以將外部樣式表附加到文檔。 執(zhí)行以下操作之一均可打開(kāi)”CSS設(shè)計(jì)器”面板，如圖2-70所示。 選擇“窗口CSS樣式”命令。 按Shift+F11快捷鍵。 單擊屬性面板上的“CSS設(shè)計(jì)器”按鈕。CSS設(shè)計(jì)器面板圖2-70 CSS設(shè)計(jì)器面板 “CSS設(shè)計(jì)器”面板包含源、媒體、選擇器、屬性4個(gè)窗口，各窗口按鈕的含義及作用如下：（1）源窗口“添加CSS源”按鈕 ：?jiǎn)螕粼摪粹o，彈出的列表中包括“創(chuàng)建新的CSS文件”、“附加現(xiàn)有的CSS文件”、“在頁(yè)面中定義”3個(gè)選項(xiàng)，用來(lái)創(chuàng)建或附加CSS文件，

57、如圖2-71所示?！皠h除CSS源”按鈕 ：?jiǎn)螕粼摪粹o可以將選中的CSS文件刪除。（2）媒體窗口“添加媒體查詢(xún)”按鈕 ：選擇一個(gè)CSS源并單擊該按鈕，打開(kāi)“定義媒體查詢(xún)”對(duì)話框，可以定義希望使用的媒體查詢(xún)。“刪除媒體查詢(xún)”按鈕 ：?jiǎn)螕粼摪粹o可以將選中的CSS文件刪除。CSS設(shè)計(jì)器面板 圖2-71“添加CSS源”按鈕列表（3）選擇器窗口“添加選擇器”按鈕 ：選擇一個(gè)CSS源并單擊該按鈕，輸入樣式名稱(chēng)，如圖2-73所示?！皠h除選擇器”按鈕 ：?jiǎn)螕粼摪粹o將選中的CSS樣式刪除。（4）屬性在選擇器窗口中選擇一個(gè)CSS樣式，可以在屬性窗口中進(jìn)行以下操作：“添加CSS屬性”按鈕 ：?jiǎn)螕粼摪粹o，定義屬性，如圖

58、2-74所示。選擇“布局”、“文本”、“邊框”、“背景”、“更多”選項(xiàng)按鈕，設(shè)置屬性值?！皠h除CSS屬性”按鈕 ：?jiǎn)螕粼摪粹o可將選中的屬性刪除。若勾選“顯示集”選項(xiàng)，則僅顯示已設(shè)置屬性。CSS設(shè)計(jì)器面板圖2-73“添加選擇器”窗口圖2-74“屬性”窗口添加屬性此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處（1）打開(kāi)“CSS設(shè)計(jì)器”面板，在源窗口中單擊“添加CSS源”按鈕 。（2）如果選擇的是“創(chuàng)建新的CSS文件”選項(xiàng)，則打開(kāi)“創(chuàng)建新的CSS文件”對(duì)話框，單擊右側(cè)的“瀏覽”按鈕，打開(kāi)“將樣式表文件另存為”對(duì)話框。選擇樣式表文件的保存位置，輸入樣式表文件名，單

59、擊“保存”按鈕，在“創(chuàng)建新的CSS文件”對(duì)話框中選擇“鏈接”或“導(dǎo)入”，單擊“確定”按鈕。 如果選擇“附加現(xiàn)有的CSS文件”，則打開(kāi)“使用現(xiàn)有的CSS文件”對(duì)話框，單擊“瀏覽”按鈕，彈出“選擇樣式表文件”對(duì)話框，選擇現(xiàn)有的CSS文件，單擊“確定”按鈕。在“使用現(xiàn)有的CSS文件”對(duì)話框中選擇“鏈接”或“導(dǎo)入”，單擊“確定”按鈕。 如果選擇的是“在頁(yè)面中定義”選項(xiàng)，則定義的樣式、屬性嵌入在文檔中。（3）在選擇器窗口單擊“添加選擇器”按鈕 ，輸入樣式名稱(chēng)，在屬性窗口定義屬性。創(chuàng)建CSS樣式此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處添加你的信息此處（1）定義CSS樣式“布局”

60、屬性在“CSS設(shè)計(jì)器”面板的“屬性”窗口選擇“布局”選項(xiàng)，可對(duì)控制元素在頁(yè)面上放置方式、定位屬性進(jìn)行設(shè)置，如圖2-78所示?！皐idth”和“height”：設(shè)置元素的寬度和高度。 “min-width”和“min-height”： 設(shè)置最小寬度和最小高度?！癿ax-width”和“max-height”： 設(shè)置最大寬度和最大高度?！癲isplay”：設(shè)置顯示。“box-sizing”：設(shè)置box-sizing。“margin”：邊距，指定一個(gè)元素的邊框與另一個(gè)元素之間的間距。取消選擇“全部相同”可設(shè)置元素各個(gè)邊的邊距。 “padding”：填充，指定元素內(nèi)容與元素邊框之間的間距。取消選擇“全