邊做邊學(xué)-Dream-weaver-CS6網(wǎng)頁設(shè)計(jì)案例教程課件

1、邊做邊學(xué)-Dream-weaver-CS6網(wǎng)頁設(shè)計(jì)案例教程課件網(wǎng)頁是網(wǎng)站最基本的組成部分，網(wǎng)站之間并不是雜亂無章的，它們通過各種鏈接相互關(guān)聯(lián)，從而描述相關(guān)的主題或?qū)崿F(xiàn)相同的目的。本章講述Dreamweaver CS6的工作界面、創(chuàng)建網(wǎng)站框架、網(wǎng)頁文件設(shè)置、管理站點(diǎn)的方式等內(nèi)容。第1章初識(shí)Dreamweaver CS6本章簡介： 網(wǎng)頁是網(wǎng)站最基本的組成部分，網(wǎng)站之間并不是雜亂無章的，它們通課堂學(xué)習(xí)目標(biāo)操作界面 創(chuàng)建網(wǎng)站框架 管理站點(diǎn) 網(wǎng)頁文件頭設(shè)置 課堂學(xué)習(xí)目標(biāo)操作界面 1.1操作界面操作目的操作步驟相關(guān)工具1.1操作界面操作目的1.1.1操作目的 通過打開文件和彈出屬性面板命令，熟悉菜單欄的操

2、作。通過鏈接選項(xiàng)改變鏈接文字的狀態(tài)，熟悉CSS功能的應(yīng)用方法。1.1.1操作目的 通過打開文件和彈出屬性面板命令，熟悉菜1.1.2操作步驟1 23 41.1.2操作步驟1 1.1.3相關(guān)工具1.開始頁面啟動(dòng)Dreamweaver CS6后首先看到的畫面是開始頁面，供用戶選擇新建文件的類型，或打開已有的文檔等。對(duì)于老用戶，如果不想顯示開始頁面，可選擇“編輯 首選參數(shù)”命令，或按Ctrl+U組合鍵，在彈出的“首選參數(shù)”對(duì)話框中取消選擇“顯示歡迎屏幕”復(fù)選框。單擊“確定”按鈕完成設(shè)置。當(dāng)用戶再次啟動(dòng)Dreamweaver CS6后，將不再顯示開始頁面。開始頁面 “首選參數(shù)”對(duì)話框1.1.3相關(guān)工具1

3、.開始頁面開始頁面 2.不同風(fēng)格的界面Dreamweaver CS6的操作界面新穎淡雅，布局緊湊，為用戶提供了一個(gè)輕松、愉悅的開發(fā)環(huán)境。若用戶想修改操作界面的風(fēng)格，切換到自己熟悉的開發(fā)環(huán)境，可選擇“窗口 工作區(qū)布局”命令，彈出其子菜單，在子菜單中選擇其中的一種界面風(fēng)格，頁面會(huì)發(fā)生相應(yīng)的改變。2.不同風(fēng)格的界面3.伸縮自如的功能面板在浮動(dòng)面板的右上角單擊 按鈕，可以隱藏或展開面板。如果用戶覺得工作區(qū)不夠大，可以將鼠標(biāo)指針放在文檔編輯窗口右側(cè)與面板交界的框線處，當(dāng)鼠標(biāo)指針呈雙向箭頭時(shí)拖曳鼠標(biāo)，調(diào)整工作區(qū)的大小。若用戶需要更大的工作區(qū)，可以將面板隱藏。鼠標(biāo)指針呈現(xiàn)雙箭頭隱藏顯示面板 調(diào)整面板大小3.

4、伸縮自如的功能面板鼠標(biāo)指針呈現(xiàn)雙箭頭隱藏顯示面板 4.多文檔的編輯界面Dreamweaver CS6提供了多文檔的編輯界面，將多個(gè)文檔整合在一起，方便用戶在各個(gè)文檔之間切換。用戶可以單擊文檔編輯窗口上方的選項(xiàng)卡，切換到相應(yīng)的文檔。通過多文檔的編輯界面，用戶可以同時(shí)編輯多個(gè)文檔。多文檔的編輯界面4.多文檔的編輯界面多文檔的編輯界面5.插入面板 Dreamweaver CS6“插入”面板在菜單欄的下方?！安迦搿泵姘?.插入面板“插入”面板6.更完整CSS功能傳統(tǒng)的HTML所提供的樣式及排版功能非常有限，因此，現(xiàn)在復(fù)雜的網(wǎng)頁版面主要靠CSS樣式來實(shí)現(xiàn)。而CSS樣式表的功能較多，語法比較復(fù)雜，需要一個(gè)

5、很好的工具軟件有條不紊地整理復(fù)雜的CSS源代碼，并適時(shí)地提供輔助說明。Dreamweaver CS5就提供了這種方便有效的CSS功能?！皩傩浴泵姘逄峁┝薈SS功能。用戶可以通過“屬性”面板中“類”選項(xiàng)的下拉列表對(duì)所選的對(duì)象應(yīng)用樣式或創(chuàng)建和編輯樣式。若某些文字應(yīng)用了自定義樣式，當(dāng)用戶調(diào)整這些文字的屬性時(shí)，會(huì)自動(dòng)生成新的CSS樣式。6.更完整CSS功能1.2創(chuàng)建網(wǎng)站框架操作目的操作步驟相關(guān)工具1.2創(chuàng)建網(wǎng)站框架操作目的1.2.1操作目的 通過打開效果文件，熟練掌握打開命令。通過復(fù)制效果，熟練掌握新建命令。通過關(guān)閉新建文件，熟練掌握保存和關(guān)閉命令。1.2.1操作目的 通過打開效果文件，熟練掌握打開命

6、令。通1.2.2操作步驟1 23 41.2.2操作步驟1 1.2.3相關(guān)工具創(chuàng)建站點(diǎn)后，用戶需要?jiǎng)?chuàng)建網(wǎng)頁來組織要展示的內(nèi)容。合理的網(wǎng)頁名稱非常重要，一般網(wǎng)頁文件的名稱應(yīng)容易理解，能反映網(wǎng)頁的內(nèi)容。在網(wǎng)站中有一個(gè)特殊的網(wǎng)頁是首頁，每個(gè)網(wǎng)站必須有一個(gè)首頁。訪問者每當(dāng)在IE瀏覽器的地址欄中輸入網(wǎng)站地址，如在IE瀏覽器的地址欄中輸入“”時(shí)會(huì)自動(dòng)打開新浪網(wǎng)的首頁。一般情況下，首頁的文件名為“index.htm”“index.html”“index.asp”“default.asp” “default.htm”或“default.html” 。1.2.3相關(guān)工具創(chuàng)建站點(diǎn)后，用戶需要?jiǎng)?chuàng)建網(wǎng)頁來組織要展示1.

7、3管理站點(diǎn)操作目的操作步驟相關(guān)工具1.3管理站點(diǎn)操作目的1.3.1操作目的 通過站點(diǎn)管理命令，熟練掌握創(chuàng)建站點(diǎn)的方法。通過新建站點(diǎn)，熟練掌握創(chuàng)建站點(diǎn)根目錄的過程。1.3.1操作目的 通過站點(diǎn)管理命令，熟練掌握創(chuàng)建站點(diǎn)的方1 23 41.3.2操作步驟 1 1.3.3相關(guān)工具1.站點(diǎn)管理器站點(diǎn)管理器的主要功能包括新建站點(diǎn)、編輯站點(diǎn)、復(fù)制站點(diǎn)、刪除站點(diǎn)以及導(dǎo)入或?qū)С稣军c(diǎn)。若要管理站點(diǎn)，必須打開“管理站點(diǎn)”對(duì)話框。編輯站點(diǎn)復(fù)制站點(diǎn)刪除站點(diǎn)導(dǎo)出站點(diǎn)導(dǎo)入站點(diǎn)1.3.3相關(guān)工具1.站點(diǎn)管理器編輯站點(diǎn)2.創(chuàng)建文件夾建立站點(diǎn)前，要先在站點(diǎn)管理器中創(chuàng)建站點(diǎn)文件夾。（1）在本地磁盤中選擇要建立站點(diǎn)的位置。（2）通

8、過以下兩種方法新建文件夾。 選擇“文件 新建文件夾”命令。 用鼠標(biāo)右鍵單擊站點(diǎn)，在彈出的快捷菜單中選擇“新建文件夾”命令。（3）輸入新文件夾的名稱。2.創(chuàng)建文件夾（1）在本地磁盤中選擇要建立站點(diǎn)的位置。3.定義新站點(diǎn)建立好站點(diǎn)文件夾后用戶就可定義新站點(diǎn)了。在Dreamweaver CS6中，站點(diǎn)通常包含兩部分，即本地站點(diǎn)和遠(yuǎn)程站點(diǎn)。本地站點(diǎn)是本地計(jì)算機(jī)上的一組文件，遠(yuǎn)程站點(diǎn)是遠(yuǎn)程 Web 服務(wù)器上的一個(gè)位置。用戶將本地站點(diǎn)中的文件發(fā)布到網(wǎng)絡(luò)上的遠(yuǎn)程站點(diǎn)，使公眾可以訪問它們。在Dreamweaver CS5中創(chuàng)建 Web 站點(diǎn)，通常先在本地磁盤上創(chuàng)建本地站點(diǎn)，然后創(chuàng)建遠(yuǎn)程站點(diǎn)，再將這些網(wǎng)頁的副本

9、上傳到一個(gè)遠(yuǎn)程 Web 服務(wù)器上，使公眾可以訪問它們。創(chuàng)建本地站點(diǎn)的步驟 站點(diǎn)選項(xiàng)的作用3.定義新站點(diǎn)創(chuàng)建本地站點(diǎn)的步驟 1.4網(wǎng)頁文件頭設(shè)置操作目的操作步驟相關(guān)工具1.4網(wǎng)頁文件頭設(shè)置操作目的1.4.1操作目的 通過刷新命令，熟練掌握如何使用該命令制作網(wǎng)頁自動(dòng)刷新效果。1.4.1操作目的 通過刷新命令，熟練掌握如何使用該命令制1 23 41.4.2操作步驟 1 1.4.3相關(guān)工具1.插入搜索關(guān)鍵字在萬維網(wǎng)上通過搜索引擎查找資料時(shí)，搜索引擎自動(dòng)讀取網(wǎng)頁中標(biāo)簽的內(nèi)容，所以網(wǎng)頁中的搜索關(guān)鍵字非常重要，它可以間接地宣傳網(wǎng)站，提高訪問量。但搜索關(guān)鍵字并不是字?jǐn)?shù)越多越好，因?yàn)橛行┧阉饕嫦拗扑饕年P(guān)鍵字

10、或字符的數(shù)目，當(dāng)超過了限制的數(shù)目時(shí)，它將忽略所有的關(guān)鍵字，所以最好只使用幾個(gè)精選的關(guān)鍵字。一般情況下，關(guān)鍵字是對(duì)網(wǎng)頁的主題、內(nèi)容、風(fēng)格或作者等內(nèi)容的概括。1.4.3相關(guān)工具1.插入搜索關(guān)鍵字2.插入作者和版權(quán)信息要設(shè)置網(wǎng)頁中的作者和版權(quán)信息，可選擇“插入 HTML 文件頭標(biāo)簽 Meta”命令，彈出“Meta”對(duì)話框?！癕ETA”對(duì)話框2.插入作者和版權(quán)信息“META”對(duì)話框3.設(shè)置刷新時(shí)間要指定載入頁面刷新或者轉(zhuǎn)到其他頁面的時(shí)間，可設(shè)置文件頭部的刷新時(shí)間項(xiàng)，具體操作步驟如下。（1）選擇“插入 HTML 文件頭標(biāo)簽 刷新”命令，彈出“刷新”對(duì)話框。（2）在“刷新”對(duì)話框中設(shè)置刷新時(shí)間?！八⑿隆睂?duì)

11、話框 設(shè)置時(shí)間之后的“刷新”對(duì)話框3.設(shè)置刷新時(shí)間“刷新”對(duì)話框 4.設(shè)置描述信息搜索引擎也可通過讀取 標(biāo)簽的說明內(nèi)容來查找信息，但說明信息主要是設(shè)計(jì)者對(duì)網(wǎng)頁內(nèi)容的詳細(xì)說明，而關(guān)鍵字可以讓搜索引擎盡快搜索到網(wǎng)頁。設(shè)置網(wǎng)頁說明信息的具體操作步驟如下。（1）選擇“插入 HTML 文件頭標(biāo)簽 說明”命令，彈出“說明”對(duì)話框。（2）在“說明”對(duì)話框中設(shè)置說明信息?！罢f明”對(duì)話框 4.設(shè)置描述信息“說明”對(duì)話框 5.設(shè)置頁面中所有鏈接的基準(zhǔn)鏈接基準(zhǔn)鏈接類似于相對(duì)路徑，若要設(shè)置網(wǎng)頁文檔中所有鏈接都以某個(gè)鏈接為基準(zhǔn)，可添加一個(gè)基準(zhǔn)鏈接，但其他網(wǎng)頁的鏈接與此頁的基準(zhǔn)鏈接無關(guān)。設(shè)置基準(zhǔn)鏈接的具體操作步驟如下。（

12、1）選擇“插入 HTML 文件頭標(biāo)簽 基礎(chǔ)”命令，彈出“基礎(chǔ)”對(duì)話框。（2）在“基礎(chǔ)”對(duì)話框中設(shè)置“HREF”和“目標(biāo)”兩個(gè)選項(xiàng)?！盎A(chǔ)”對(duì)話框 5.設(shè)置頁面中所有鏈接的基準(zhǔn)鏈接“基礎(chǔ)”對(duì)話框 6.設(shè)置當(dāng)前文件與其他文件的關(guān)聯(lián)性 部分的標(biāo)簽可以定義當(dāng)前文檔與其他文件之間的關(guān)系，它與 部分中的文檔之間的 HTML鏈接是不一樣的，其具體操作步驟如下。（1）選擇“插入記錄 HTML 文件頭標(biāo)簽 鏈接”命令，彈出“鏈接”對(duì)話框。（2）在“鏈接”對(duì)話框中設(shè)置相應(yīng)的選項(xiàng)。“鏈接”對(duì)話框 6.設(shè)置當(dāng)前文件與其他文件的關(guān)聯(lián)性“鏈接”對(duì)話框 不管網(wǎng)頁內(nèi)容如何豐富，文本自始至終都是網(wǎng)頁中最基本的元素。由于文本產(chǎn)生

13、的信息量大，輸入、編輯起來方便，并且生成的文件小，容易被瀏覽器下載，不會(huì)占用太多的等待時(shí)間等優(yōu)點(diǎn)，因此，掌握好文本的使用，對(duì)于制作網(wǎng)頁來說是最基本的要求。第2章文本與文檔本章簡介： 不管網(wǎng)頁內(nèi)容如何豐富，文本自始至終都是網(wǎng)頁中最基本的元素。由課堂學(xué)習(xí)目標(biāo)文本與文檔 項(xiàng)目符號(hào)和編號(hào)列表 水平線、網(wǎng)格與標(biāo)尺課堂學(xué)習(xí)目標(biāo)文本與文檔 2.1軒宇門窗網(wǎng)頁案例分析設(shè)計(jì)理念操作步驟相關(guān)工具2.1軒宇門窗網(wǎng)頁案例分析2.1.1案例分析 門窗是我們居住房屋的必需用品，它們具有堅(jiān)固耐久，開啟靈活，關(guān)閉嚴(yán)密，便于維修、清潔等特色。本例將設(shè)計(jì)制作門窗網(wǎng)頁，在設(shè)計(jì)風(fēng)格上要表現(xiàn)出公司的特色。2.1.1案例分析 門窗是我們

14、居住房屋的必需用品，它們具有2.1.2設(shè)計(jì)理念 在網(wǎng)頁設(shè)計(jì)制作過程中，網(wǎng)頁使用大幅門窗攝影照片作為背景。使網(wǎng)頁視覺效果寬廣、清晰，下方的區(qū)域?yàn)閮?nèi)容顯示區(qū)域，使用黃色的橫條在背景上突出顯示，便于瀏覽。品牌標(biāo)志放置在網(wǎng)頁的右上角，上方大面積的空白區(qū)域使小標(biāo)志也能夠突出表現(xiàn)。 軒宇門窗網(wǎng)頁效果圖2.1.2設(shè)計(jì)理念 在網(wǎng)頁設(shè)計(jì)制作過程中，網(wǎng)頁使用大幅門窗2.1.3操作步驟1 23 42.1.3操作步驟1 2.1.4相關(guān)工具1.輸入文本應(yīng)用Dreamweaver CS6編輯網(wǎng)頁時(shí)，在文檔窗口中光標(biāo)為默認(rèn)顯示狀態(tài)。要添加文本，首先應(yīng)將光標(biāo)移動(dòng)到文檔窗口中的編輯區(qū)域，然后直接輸入文本，就像在其他文本編輯器中

15、一樣。打開一個(gè)文檔，在文檔中單擊鼠標(biāo)左鍵，將光標(biāo)置于其中，然后在光標(biāo)后面輸入文本。2.1.4相關(guān)工具1.輸入文本2.設(shè)置文本屬性利用文本屬性可以方便地修改選中文本的字體、字號(hào)、樣式、對(duì)齊方式等，以獲得預(yù)期的效果。選擇“窗口 屬性”命令，或按Ctrl+F3組合鍵，彈出“屬性”面板，在HTML和CSS屬性面板中都可以設(shè)置文本的屬性?！皩傩浴泵姘?.設(shè)置文本屬性“屬性”面板3.輸入連續(xù)的空格在默認(rèn)狀態(tài)下，Dreamweaver CS6只允許輸入一個(gè)空格，要輸入連續(xù)多個(gè)空格則需要進(jìn)行設(shè)置或通過特定操作才能實(shí)現(xiàn)。設(shè)置“首選參數(shù)”對(duì)話框選擇“編輯 首選參數(shù)”命令，彈出“首選參數(shù)”對(duì)話框，在“首選參數(shù)”對(duì)話

16、框左側(cè)的“分類”列表框中選擇“常規(guī)”選項(xiàng)，在右側(cè)的“編輯選項(xiàng)”選項(xiàng)組中選擇“允許多個(gè)連續(xù)的空格”復(fù)選框。直接插入多個(gè)連續(xù)空格在Dreamweaver CS6中插入多個(gè)連續(xù)空格，有以下幾種方法。(1) 選擇“插入”面板中的“文本”選項(xiàng)卡，單擊“字符”展開式按鈕 ，選擇“不換行空格”命令。(2) 選擇“插入 HTML 特殊字符 不換行空格”命令，或按Ctrl+Shift+Space組合鍵。(3)將輸入法轉(zhuǎn)換到中文的全角狀態(tài)下。3.輸入連續(xù)的空格在默認(rèn)狀態(tài)下，Dreamweaver C4.設(shè)置是否顯示不可見元素在網(wǎng)頁的“設(shè)計(jì)”視圖中，有一些元素僅用來標(biāo)志該元素的位置，而在瀏覽器中是不可見的。例如，腳

17、本圖標(biāo)是用來標(biāo)志文檔正文中的JavaScript或VbScript代碼的位置，換行符圖標(biāo)是用來標(biāo)志每個(gè)換行符 的位置等。在設(shè)計(jì)網(wǎng)頁時(shí)，為了快速找到這些不可見元素的位置，常常改變這些元素在設(shè)計(jì)視圖中的可見性。 4.設(shè)置是否顯示不可見元素5.設(shè)置頁邊距按照文章的書寫規(guī)則，正文與紙的四周需要留有一定的距離，這個(gè)距離叫做頁邊距。網(wǎng)頁設(shè)計(jì)也如此，在默認(rèn)狀態(tài)下文檔的上、下、左、右邊距不為零。修改頁邊距的具體操作步驟如下。（1）選擇“修改 頁面屬性”命令，彈出“頁面屬性”對(duì)話框。（2）根據(jù)需要在對(duì)話框的“左邊距”“右邊距”“上邊距”“下邊距”“邊距寬度”和“邊距高度”選項(xiàng)的數(shù)值框中輸入相應(yīng)的數(shù)值。5.設(shè)置頁

18、邊距6.設(shè)置網(wǎng)頁的標(biāo)題HTML頁面的標(biāo)題可以幫助站點(diǎn)瀏覽者理解所查看網(wǎng)頁的內(nèi)容，并在瀏覽者的歷史記錄和書簽列表中標(biāo)志頁面。文檔的文件名是通過保存文件命令保存的網(wǎng)頁文件名稱，而頁面標(biāo)題是瀏覽者在瀏覽網(wǎng)頁時(shí)瀏覽器標(biāo)題欄中顯示的信息。 6.設(shè)置網(wǎng)頁的標(biāo)題7.設(shè)置網(wǎng)頁的默認(rèn)格式用戶在制作新網(wǎng)頁時(shí)，頁面都有一些默認(rèn)的屬性，如網(wǎng)頁的標(biāo)題、網(wǎng)頁邊界、文字編碼、文字顏色、超鏈接的顏色等。若需要修改網(wǎng)頁的頁面屬性，可選擇“修改 頁面屬性”命令，彈出“頁面屬性”對(duì)話框。“頁面屬性”對(duì)話框7.設(shè)置網(wǎng)頁的默認(rèn)格式“頁面屬性”對(duì)話框2.1.5 實(shí)戰(zhàn)演練-青山別墅網(wǎng)頁使用“頁面屬性”命令設(shè)置頁面外觀、網(wǎng)頁標(biāo)題效果；使用“

19、首選參數(shù)”命令設(shè)置允許多個(gè)連續(xù)空格、顯示不可見元素效果。 效果圖2.1.5 實(shí)戰(zhàn)演練-青山別墅網(wǎng)頁使用“頁面屬性”命令設(shè)置2.2休閑旅游網(wǎng)頁案例分析設(shè)計(jì)理念操作步驟相關(guān)工具2.2休閑旅游網(wǎng)頁案例分析2.2.1案例分析 隨著生活水平的不斷提升，旅游也成為人們休閑娛樂的重要選擇，為人們?cè)诜敝氐墓ぷ魃钪鄮砜鞓?。適當(dāng)?shù)穆糜斡欣谏硇慕】岛吞嵘钯|(zhì)量，已成為人們生活不可或缺的一項(xiàng)。本例為某旅游網(wǎng)站進(jìn)行網(wǎng)頁設(shè)計(jì)，在網(wǎng)頁設(shè)計(jì)時(shí)要表現(xiàn)出旅游的休閑娛樂的特點(diǎn)。 2.2.1案例分析 隨著生活水平的不斷提升，旅游也成為人們2.2.2設(shè)計(jì)理念 在網(wǎng)頁設(shè)計(jì)制作過程中，網(wǎng)頁的背景使用清新淡雅的色彩搭配，使人感到舒

20、適明快。網(wǎng)頁使用美景攝影照片作為搭配，體現(xiàn)出網(wǎng)頁的主要內(nèi)容，使人感受到旅游的快樂。網(wǎng)頁右側(cè)詳細(xì)明確地說明了網(wǎng)站活動(dòng)的具體情況，使瀏覽者一目了然。整個(gè)網(wǎng)頁設(shè)計(jì)整潔大方，用色簡潔，氣氛活躍。 休閑旅游網(wǎng)頁效果圖2.2.2設(shè)計(jì)理念 在網(wǎng)頁設(shè)計(jì)制作過程中，網(wǎng)頁的背景使用清2.2.3操作步驟1 23 42.2.3操作步驟1 2.2.4相關(guān)工具1.改變文本的大小Dreamweaver CS6提供了兩種改變文本大小的方法，一種是設(shè)置文本的默認(rèn)大小，另一種是設(shè)置選中文本的大小。 設(shè)置文本的默認(rèn)大小 設(shè)置選中文本的大小2.2.4相關(guān)工具1.改變文本的大小 設(shè)置文本的默認(rèn)大2.改變文本的顏色豐富的視覺色彩可以吸引

21、用戶的注意，網(wǎng)頁中的文本不僅可以是黑色，還可以呈現(xiàn)為其他色彩，最多時(shí)可達(dá)到16 777 216種顏色。顏色的種類與用戶顯示器的分辨率和顏色值有關(guān)，通常在216種網(wǎng)頁色彩中選擇文字的顏色。在Dreamweaver CS6中提供了兩種改變文本顏色的方法。 設(shè)置文本的默認(rèn)顏色 設(shè)置選中文本的顏色2.改變文本的顏色在Dreamweaver CS6中提供了3.改變文本的字體Dreamweaver CS6提供了兩種改變文本字體的方法，一種是設(shè)置文本的默認(rèn)字體，另一種是設(shè)置選中文本的字體。 設(shè)置文本的默認(rèn)字體 設(shè)置選中文本的字體3.改變文本的字體 設(shè)置文本的默認(rèn)字體4.改變文本的對(duì)齊方式文本的對(duì)齊方式是指文

22、字相對(duì)于文檔窗口或?yàn)g覽器窗口在水平位置的對(duì)齊方式。對(duì)齊方式按鈕有以下4種。“左對(duì)齊”按鈕 ：使文本在瀏覽器窗口中左對(duì)齊?！熬又袑?duì)齊”按鈕 ：使文本在瀏覽器窗口中居中對(duì)齊?！坝覍?duì)齊”按鈕 ：使文本在瀏覽器窗口中右對(duì)齊?！皟啥藢?duì)齊”按鈕 ：使文本在瀏覽器窗口中兩端對(duì)齊。4.改變文本的對(duì)齊方式5.設(shè)置文本樣式文本樣式是指字符的外觀顯示方式，如加粗文本、傾斜文本為文本加下畫線等。 通過“樣式”命令設(shè)置文本樣式 通過“屬性”面板設(shè)置文本樣式 使用快捷鍵快速設(shè)置文本樣式5.設(shè)置文本樣式 通過“樣式”命令設(shè)置文本樣式6.段落文本段落是指描述一個(gè)主題并且格式統(tǒng)一的一段文字。在文檔窗口中，輸入一段文字后按Ent

23、er鍵，這段文字就顯示在標(biāo)簽中。 應(yīng)用段落格式 指定預(yù)格式6.段落文本 應(yīng)用段落格式7.插入換行符為段落添加換行符有以下幾種方法。（1）選擇“插入”面板的“文本”選項(xiàng)卡，單擊“字符”展開式工具按鈕 ，選擇“換行符”按鈕 。（2）按Shift+Enter組合鍵。（3）選擇“插入 HTML 特殊字符 換行符”命令。7.插入換行符8.設(shè)置項(xiàng)目符號(hào)或編號(hào)通過項(xiàng)目列表或編號(hào)列表按鈕設(shè)置項(xiàng)目符號(hào)或編號(hào)，步驟如下。（1）選擇段落。（2）在“屬性”面板中，單擊“項(xiàng)目列表”按鈕 或“編號(hào)列表”按鈕 ，為文本添加項(xiàng)目符號(hào)或編號(hào)。通過列表設(shè)置項(xiàng)目符號(hào)或編號(hào)，步驟如下。（1）選擇段落。（2）選擇“文本 列表”命令，彈

24、出其子菜單，選擇“項(xiàng)目列表”或“編號(hào)列表”命令。8.設(shè)置項(xiàng)目符號(hào)或編號(hào)9.修改項(xiàng)目符號(hào)或編號(hào)（1）將插入點(diǎn)放在設(shè)置項(xiàng)目符號(hào)或編號(hào)的文本中。（2）通過以下3種方法打開“列表屬性”對(duì)話框。單擊“屬性”面板中的“列表項(xiàng)目”按鈕 。選擇“格式 列表 屬性”命令。在對(duì)話框中，先選擇“列表類型”選項(xiàng)，確認(rèn)是要修改項(xiàng)目符號(hào)還是編號(hào)。然后在“樣式”下拉列表中選擇相應(yīng)的列表或編號(hào)的樣式。單擊“確定”按鈕完成設(shè)置9.修改項(xiàng)目符號(hào)或編號(hào)（1）將插入點(diǎn)放在設(shè)置項(xiàng)目符號(hào)或編號(hào)10.設(shè)置文本縮進(jìn)格式設(shè)置文本縮進(jìn)格式有以下幾種方法。（1）在“屬性”面板中單擊“文本縮進(jìn)”按鈕 或“文本凸出”按鈕 ，使段落向右移動(dòng)或向左移動(dòng)。

25、（2）選擇“格式 縮進(jìn)”命令或“文本 凸出”命令，使段落向右移動(dòng)或向左移動(dòng)。（3）按Ctrl+Alt+ 組合鍵或按Ctrl+Alt+ 組合鍵，使段落向右移動(dòng)或向左移動(dòng)。 10.設(shè)置文本縮進(jìn)格式11.插入日期（1）在文檔窗口中，將插入點(diǎn)放置在想要插入對(duì)象的位置。（2）通過以下幾種方法打開“插入日期”對(duì)話框。選擇“插入”面板的“常用”選項(xiàng)卡，單擊“日期”工具 按鈕 。選擇“插入 日期”命令。（3）選擇相應(yīng)的日期和時(shí)間的格式，單擊“確定”按鈕完成設(shè)置。11.插入日期12.特殊符號(hào)在網(wǎng)頁中插入特殊字符，有以下4種方法。（1）單擊“字符”展開式工具按鈕 。（2）選擇“插入”面板的“文本”選項(xiàng)卡，單擊“字

26、符”展開式工具按鈕 ，彈出13個(gè)特殊字符按鈕。在其中選擇需要的特殊字符的工具按鈕，即可插入特殊字符。（3）選擇“插入 HTML 特殊字符”命令。（4）選擇“插入 HTML 特殊字符”命令，在彈出的子菜單中選擇需要的特殊字符。12.特殊符號(hào)（1）單擊“字符”展開式工具按鈕 2.2.5實(shí)戰(zhàn)演練-電器城網(wǎng)店使用“項(xiàng)目列表”按鈕，創(chuàng)建列表；使用“CSS樣式”命令，修改文字的樣式。 效果圖2.2.5實(shí)戰(zhàn)演練-電器城網(wǎng)店使用“項(xiàng)目列表”按鈕，創(chuàng)建列2.3休閑度假村網(wǎng)頁案例分析設(shè)計(jì)理念操作步驟相關(guān)工具2.3休閑度假村網(wǎng)頁案例分析2.3.1案例分析 度假村能夠?yàn)榇蠹姨峁┮粋€(gè)親近大自然的機(jī)會(huì)，并享受一系列貼身服

27、務(wù)和現(xiàn)代化的休閑和運(yùn)動(dòng)設(shè)施，能夠使人徹底放松身心。在設(shè)計(jì)本例網(wǎng)頁時(shí)要注意表現(xiàn)出度假的休閑樂趣，要能夠吸引消費(fèi)者的注意。2.3.1案例分析 度假村能夠?yàn)榇蠹姨峁┮粋€(gè)親近大自然的機(jī)2.3.2設(shè)計(jì)理念 在網(wǎng)頁設(shè)計(jì)制作過程中，將田野作為網(wǎng)頁背景，網(wǎng)頁設(shè)計(jì)簡單大氣，簡單的文字介紹和攝影圖片的排列，為瀏覽者提供最簡單、直觀的信息介紹。沒有多余的修飾，反而更顯其專業(yè)性。 休閑度假村網(wǎng)頁效果圖2.3.2設(shè)計(jì)理念 在網(wǎng)頁設(shè)計(jì)制作過程中，將田野作為網(wǎng)頁背1 23 42.3.3操作步驟 1 2.3.4相關(guān)工具1.水平線分割線又叫做水平線，可以將文字、圖像、表格等對(duì)象在視覺上分割開。一篇內(nèi)容繁雜的文檔，如果合理地放置

28、幾條水平線，就會(huì)變得層次分明，便于閱讀。創(chuàng)建水平線修改水平線2.3.4相關(guān)工具1.水平線創(chuàng)建水平線2.顯示和隱藏網(wǎng)格 使用網(wǎng)格可以更加方便地定位網(wǎng)頁元素，在網(wǎng)頁布局時(shí)網(wǎng)格也具有至關(guān)重要的作用。 顯示和隱藏網(wǎng)格 設(shè)置網(wǎng)頁元素與網(wǎng)格對(duì)齊 修改網(wǎng)格的疏密 修改網(wǎng)格線的形狀和顏色2.顯示和隱藏網(wǎng)格 顯示和隱藏網(wǎng)格3.標(biāo)尺標(biāo)尺顯示在文檔窗口的頁面上方和左側(cè)，用以標(biāo)志網(wǎng)頁元素的位置。標(biāo)尺的單位分為像素、英寸和厘米。 在文檔窗口中顯示標(biāo)尺 改變標(biāo)尺的計(jì)量單位 改變坐標(biāo)原點(diǎn) 重置標(biāo)尺的坐標(biāo)原點(diǎn)3.標(biāo)尺 在文檔窗口中顯示標(biāo)尺2.3.5實(shí)戰(zhàn)演練-攝影藝術(shù)網(wǎng)頁使用“水平線”命令，在文檔中插入水平線；使用“屬性”面板

29、，改變水平線的高度。使用代碼改變水平線的顏色。 效果圖2.3.5實(shí)戰(zhàn)演練-攝影藝術(shù)網(wǎng)頁使用“水平線”命令，在文檔2.4綜合演練-電商網(wǎng)頁案例分析設(shè)計(jì)理念知識(shí)要點(diǎn)2.4綜合演練-電商網(wǎng)頁案例分析由于互聯(lián)網(wǎng)的發(fā)展，更多的電商網(wǎng)站出現(xiàn)在人們的生活中。所以需要專業(yè)的團(tuán)隊(duì)來對(duì)電商網(wǎng)頁進(jìn)行設(shè)計(jì)、管理和營銷。網(wǎng)頁設(shè)計(jì)要求簡潔明了，實(shí)用性和美觀度兼?zhèn)洹?.4.1案例分析由于互聯(lián)網(wǎng)的發(fā)展，更多的電商網(wǎng)站出現(xiàn)在人們的生活中。所以需要在網(wǎng)頁設(shè)計(jì)制作過程中，整體布局簡潔的分成了四個(gè)區(qū)域，使人第一眼就能看到白色背景區(qū)域的主體內(nèi)容，與上方黑色背景的導(dǎo)航欄有著強(qiáng)烈的對(duì)比，更方便瀏覽者查閱。整體設(shè)計(jì)風(fēng)格具有電商網(wǎng)頁的特色，大

30、氣明了。 2.4.2設(shè)計(jì)理念在網(wǎng)頁設(shè)計(jì)制作過程中，整體布局簡潔的分成了四個(gè)區(qū)域，使人第一使用“頁面屬性”命令，設(shè)置頁面的邊距、網(wǎng)頁標(biāo)題效果；使用“首選參數(shù)”命令，設(shè)置允許多個(gè)連續(xù)空格；使用“CSS樣式”命令，設(shè)置文字的顏色。效果圖2.4.3知識(shí)要點(diǎn)使用“頁面屬性”命令，設(shè)置頁面的邊距、網(wǎng)頁標(biāo)題效果；使用“首2.5綜合演練-有機(jī)果蔬網(wǎng)頁案例分析設(shè)計(jì)理念知識(shí)要點(diǎn)2.5綜合演練-有機(jī)果蔬網(wǎng)頁案例分析現(xiàn)代人對(duì)生活質(zhì)量的要求同時(shí)表現(xiàn)在對(duì)食物的追求，有機(jī)果蔬是指在生產(chǎn)過程中嚴(yán)格按照有機(jī)生產(chǎn)規(guī)程，并含有綠色食品標(biāo)，且經(jīng)過有機(jī)食品認(rèn)證機(jī)構(gòu)鑒定并頒發(fā)有機(jī)食品證書的果蔬產(chǎn)品。網(wǎng)頁設(shè)計(jì)要求突出果蔬健康無污染等特色。

31、2.5.1案例分析現(xiàn)代人對(duì)生活質(zhì)量的要求同時(shí)表現(xiàn)在對(duì)食物的追求，有機(jī)果蔬是指在在網(wǎng)頁設(shè)計(jì)制作過程中，背景采用了綠色蔬菜的圖片，它給消費(fèi)者一種健康的感覺；畫面整體色彩搭配舒適親切，白色的文字與圖片搭配相得益彰，導(dǎo)航條設(shè)計(jì)簡潔并具有特色，網(wǎng)頁設(shè)計(jì)與宣傳主題相呼應(yīng)；畫面清爽舒適，符合有機(jī)食物的風(fēng)格特點(diǎn)。2.5.2設(shè)計(jì)理念在網(wǎng)頁設(shè)計(jì)制作過程中，背景采用了綠色蔬菜的圖片，它給消費(fèi)者一使用“頁面屬性”命令，設(shè)置頁面邊距和標(biāo)題；使用“首選參數(shù)”命令，設(shè)置允許多個(gè)空格。效果圖2.5.3知識(shí)要點(diǎn)使用“頁面屬性”命令，設(shè)置頁面邊距和標(biāo)題；使用“首選參數(shù)”命圖像和多媒體的運(yùn)用在網(wǎng)頁設(shè)計(jì)中的作用是非常重要的，圖像、按

32、鈕、標(biāo)記和多媒體元素的合理使用可以使網(wǎng)頁外觀更加美觀大方，內(nèi)容更加豐富多彩。在Dreamweaver CS6中，用戶可以方便快捷地向Web站點(diǎn)添加聲音和影片媒體，并可以導(dǎo)入和編輯多個(gè)媒體文件和對(duì)象。第3章圖像和多媒體本章簡介： 圖像和多媒體的運(yùn)用在網(wǎng)頁設(shè)計(jì)中的作用是非常重要的，圖像、按鈕課堂學(xué)習(xí)目標(biāo)插入圖像 多媒體在網(wǎng)頁中的應(yīng)用 課堂學(xué)習(xí)目標(biāo)插入圖像 3.1紙杯蛋糕網(wǎng)頁案例分析設(shè)計(jì)理念操作步驟相關(guān)工具3.1紙杯蛋糕網(wǎng)頁案例分析3.1.1案例分析 甜品店是現(xiàn)代女性非常鐘愛的用于聚會(huì)休閑、消磨時(shí)光的場(chǎng)所；而紙杯蛋糕更是眾多甜品里的招牌產(chǎn)品，小巧可愛的樣子是它最吸引人的地方。網(wǎng)頁設(shè)計(jì)要求體現(xiàn)紙杯蛋糕

33、的甜美風(fēng)格。3.1.1案例分析 甜品店是現(xiàn)代女性非常鐘愛的用于聚會(huì)休閑3.1.2設(shè)計(jì)理念 在網(wǎng)頁設(shè)計(jì)制作過程中，使用精美的產(chǎn)品圖片，使人產(chǎn)生食欲。粉紅色的背景滿足了女性消費(fèi)者的喜好，使人更加有購買的欲望。右側(cè)的詳細(xì)簡介可以更清楚的了解產(chǎn)品特性，下方單獨(dú)的產(chǎn)品圖片可以讓人選購不同的口味，滿足更多人的需求。網(wǎng)頁整體設(shè)計(jì)主題突出，讓人印象深刻。 紙杯蛋糕網(wǎng)頁效果圖3.1.2設(shè)計(jì)理念 在網(wǎng)頁設(shè)計(jì)制作過程中，使用精美的產(chǎn)品圖3.1.3操作步驟1 23 43.1.3操作步驟1 3.1.4相關(guān)工具1.網(wǎng)頁中的圖像格式Web頁中通常使用的圖像文件有JPEG、GIF、PNG 三種格式，但大多數(shù)瀏覽器只支持JPE

34、G、GIF兩種圖像格式。因?yàn)橐ＷC瀏覽者下載網(wǎng)頁的速度，所以網(wǎng)站設(shè)計(jì)者也常使用JPEG和GIF這兩種壓縮格式的圖像。 GIF文件 JPEG文件 PNG文件3.1.4相關(guān)工具1.網(wǎng)頁中的圖像格式 GIF文件2.插入圖像要在Dreamweaver CS6文檔中插入的圖像必須位于當(dāng)前站點(diǎn)文件夾內(nèi)或遠(yuǎn)程站點(diǎn)文件夾內(nèi)，否則圖像不能正確顯示。因此在建立站點(diǎn)時(shí)，要先創(chuàng)建一個(gè)名叫“image”的文件夾，并將需要的圖像復(fù)制到其中。2.插入圖像3.設(shè)置圖像屬性插入圖像后，在“屬性”面板中顯示該圖像的屬性?！皩傩浴泵姘?.設(shè)置圖像屬性插入圖像后，在“屬性”面板中顯示該圖像的屬4.插入圖像占位符在網(wǎng)頁布局時(shí)，網(wǎng)站設(shè)計(jì)

35、者需要先設(shè)計(jì)圖像在網(wǎng)頁中的位置，等設(shè)計(jì)方案通過后，再將這個(gè)位置變成具體圖像。Dreamweaver CS6提供的“圖像占位符”功能，可滿足上述需求。在文檔窗口中，將插入點(diǎn)放置在要插入占位符圖形的位置。通過以下兩種方法選擇“圖像占位符”命令，打開“圖像占位符”對(duì)話框。（1）選擇“插入”面板中的“常用”選項(xiàng)卡，單擊“圖像”展開式工具按鈕 ，選擇“圖像占位符”選項(xiàng) 。（2）選擇“插入 圖像對(duì)象 圖像占位符”命令。（3）在“圖像占位符”對(duì)話框中，按需要設(shè)置圖像占位符的大小和顏色，并為圖像占位符提供文本標(biāo)簽，單擊“確定”按鈕完成設(shè)置。4.插入圖像占位符5.跟蹤位圖 在工程設(shè)計(jì)過程中，一般先在圖像處理軟件

36、中勾畫出工程藍(lán)圖，然后在此基礎(chǔ)上反復(fù)修改，最終得到一幅完美的設(shè)計(jì)圖。制作網(wǎng)頁時(shí)也應(yīng)采用工程設(shè)計(jì)的方法，先在圖像處理軟件中繪制網(wǎng)頁的藍(lán)圖，將其添加到網(wǎng)頁的背景中，按設(shè)計(jì)方案對(duì)號(hào)入座，等網(wǎng)頁制作完畢后，再將藍(lán)圖刪除。Dreamweaver CS6利用“跟蹤圖像”功能來實(shí)現(xiàn)上述網(wǎng)頁設(shè)計(jì)的方式。 5.跟蹤位圖3.1.5 實(shí)戰(zhàn)演練-環(huán)球旅游網(wǎng)頁使用“圖像”按鈕，插入圖像；使用“CSS樣式”命令，控制圖像的水平邊距。 效果圖3.1.5 實(shí)戰(zhàn)演練-環(huán)球旅游網(wǎng)頁使用“圖像”按鈕，插入圖3.2物流運(yùn)輸網(wǎng)頁案例分析設(shè)計(jì)理念操作步驟相關(guān)工具3.2物流運(yùn)輸網(wǎng)頁案例分析3.2.1案例分析 物流是指物品從供應(yīng)地向接收地的

37、實(shí)體流動(dòng)過程中，根據(jù)實(shí)際需要，將一系列功能有機(jī)結(jié)合起來實(shí)現(xiàn)用戶要求的過程。在網(wǎng)頁設(shè)計(jì)和制作上要表現(xiàn)出物流的特色。 3.2.1案例分析 物流是指物品從供應(yīng)地向接收地的實(shí)體流動(dòng)3.2.2設(shè)計(jì)理念 在網(wǎng)頁設(shè)計(jì)和制作過程中，網(wǎng)頁使用流暢的線條、穩(wěn)定的圖形表現(xiàn)出物流行業(yè)的特色，藍(lán)白的背景突出前方的宣傳主體，展示出對(duì)行業(yè)的介紹和宣傳，整體網(wǎng)頁設(shè)計(jì)簡潔明快，符合物流行業(yè)的特色。 物流運(yùn)輸網(wǎng)頁效果圖3.2.2設(shè)計(jì)理念 在網(wǎng)頁設(shè)計(jì)和制作過程中，網(wǎng)頁使用流暢的1 23 43.2.3操作步驟 1 3.2.4相關(guān)工具1.插入Flash動(dòng)畫 Dreamweaver CS6提供了使用Flash對(duì)象的功能，雖然Flash中

38、使用的文件類型有Flash源文件（.fla）、Flash SWF文件（.swf）和Flash模板文件（.swt），但Dreamweaver CS5只支持Flash SWF文件，因?yàn)樗荈lash文件的壓縮版本，已進(jìn)行了優(yōu)化，便于在Web上查看。3.2.4相關(guān)工具1.插入Flash動(dòng)畫 2.插入FLV在網(wǎng)頁中可以輕松的添加FLV視頻，而無須使用Flash創(chuàng)作工具。但在操作之前必須有一個(gè)經(jīng)過編碼的FLV文件。使用Dreamweaver插入一個(gè)顯示FLV文件的SWF組件，當(dāng)在瀏覽器中查看時(shí)，此組件顯示所選的FLV文件以及一組播放控件。2.插入FLV3.插入Shockwave影片 Shockwave是

39、Web上用于交互式多媒體的Macromedia標(biāo)準(zhǔn)，是一種經(jīng)壓縮的格式，它使得在Macromedia Director中創(chuàng)建的多媒體文件能夠被快速下載，而且可以在大多數(shù)常用瀏覽器中進(jìn)行播放。3.插入Shockwave影片 4.影片插入Applet程序 Applet 是用Java編程語言開發(fā)的、可嵌入Web頁中的小型應(yīng)用程序。Dreamweaver CS4提供了將Java Applet 插入 HTML 文檔中的功能。 4.影片插入Applet程序 5.插入ActiveX控件 ActiveX 控件也稱OLE控件。它是可以充當(dāng)瀏覽器插件的可重復(fù)使用的組件，有些像微型的應(yīng)用程序。ActiveX控件只在

40、Windows系統(tǒng)上的Internet Explorer中運(yùn)行。Dreamweaver CS5中的ActiveX對(duì)象可為用戶的瀏覽器中的ActiveX控件提供屬性和參數(shù)。 5.插入ActiveX控件 3.2.5實(shí)戰(zhàn)演練-準(zhǔn)媽媽課堂網(wǎng)頁使用“SWF”按鈕為網(wǎng)頁文檔插入Flash動(dòng)畫效果；使用“播放”按鈕在文檔窗口中預(yù)覽效果。 效果圖3.2.5實(shí)戰(zhàn)演練-準(zhǔn)媽媽課堂網(wǎng)頁使用“SWF”按鈕為網(wǎng)頁3.3綜合演練-咖啡館網(wǎng)頁案例分析設(shè)計(jì)理念知識(shí)要點(diǎn)3.3綜合演練-咖啡館網(wǎng)頁案例分析咖啡館是現(xiàn)代人們用于聚會(huì)休閑、商務(wù)交流的場(chǎng)所，盛行于每個(gè)大中小城市。隨著時(shí)代的發(fā)展，咖啡的種類和品牌也逐漸增多。網(wǎng)頁設(shè)計(jì)要求體

41、現(xiàn)咖啡館的優(yōu)雅氣質(zhì)。3.3.1案例分析咖啡館是現(xiàn)代人們用于聚會(huì)休閑、商務(wù)交流的場(chǎng)所，盛行于每個(gè)大中在網(wǎng)頁設(shè)計(jì)制作過程中，使用放大的咖啡圖片，展現(xiàn)出網(wǎng)頁設(shè)計(jì)的主體。左側(cè)的文字信息，簡潔進(jìn)行搭配介紹，使人一目了然。上方的導(dǎo)航設(shè)計(jì)簡潔清晰，給人干凈利落的印象。下方的圖標(biāo)與文字搭配適宜，使人感受到咖啡的魅力；網(wǎng)頁整體設(shè)計(jì)主題簡潔明了，讓人印象深刻。3.3.2設(shè)計(jì)理念在網(wǎng)頁設(shè)計(jì)制作過程中，使用放大的咖啡圖片，展現(xiàn)出網(wǎng)頁設(shè)計(jì)的主使用“圖像”按鈕，插入介紹性圖片。效果圖3.3.3知識(shí)要點(diǎn)使用“圖像”按鈕，插入介紹性圖片。效果圖3.3.3知識(shí)要點(diǎn)3.4綜合演練-綠色農(nóng)場(chǎng)網(wǎng)頁案例分析設(shè)計(jì)理念知識(shí)要點(diǎn)3.4綜合演

42、練-綠色農(nóng)場(chǎng)網(wǎng)頁案例分析現(xiàn)代的綠色農(nóng)場(chǎng)，不再是單單用來種農(nóng)作物的場(chǎng)地，更是一種種植+養(yǎng)殖+休閑+娛樂的混合型場(chǎng)地。因此要求網(wǎng)頁風(fēng)格簡潔，并且著重內(nèi)容的宣傳。3.4.1案例分析現(xiàn)代的綠色農(nóng)場(chǎng)，不再是單單用來種農(nóng)作物的場(chǎng)地，更是一種種植+在網(wǎng)頁設(shè)計(jì)制作過程中，大氣的圖文搭配使人明確主題。簡潔清晰的導(dǎo)航設(shè)計(jì)更便于人們的瀏覽，下方添加的綠色元素，使人有清新自然的感覺。整體風(fēng)格具有生態(tài)氣息，讓人耳目一新。3.4.2設(shè)計(jì)理念在網(wǎng)頁設(shè)計(jì)制作過程中，大氣的圖文搭配使人明確主題。簡潔清晰的使用“Flash SWF”按鈕，為網(wǎng)頁文檔插入Flash動(dòng)畫效果；使用“屬性”面板，設(shè)置動(dòng)畫為透明；使用“播放”按鈕在文檔窗

43、口中預(yù)覽效果。效果圖3.4.3知識(shí)要點(diǎn)使用“Flash SWF”按鈕，為網(wǎng)頁文檔插入Flash動(dòng)畫網(wǎng)絡(luò)中的每個(gè)網(wǎng)頁都是通過超鏈接的形式關(guān)聯(lián)在一起的，超鏈接是網(wǎng)頁中最重要、最根本的元素之一。瀏覽者可以通過鼠標(biāo)單擊網(wǎng)頁中的某個(gè)元素，輕松地實(shí)現(xiàn)網(wǎng)頁之間的轉(zhuǎn)換或下載文件、收發(fā)郵件等。要實(shí)現(xiàn)超鏈接，還要了解鏈接路徑的知識(shí)。第4章超鏈接本章簡介： 網(wǎng)絡(luò)中的每個(gè)網(wǎng)頁都是通過超鏈接的形式關(guān)聯(lián)在一起的，超鏈接是網(wǎng)課堂學(xué)習(xí)目標(biāo)超鏈接的概念與路徑知識(shí) 文本超鏈接 圖像超鏈接 命名錨記超鏈接 熱點(diǎn)鏈接 課堂學(xué)習(xí)目標(biāo)超鏈接的概念與路徑知識(shí) 4.1建筑模型網(wǎng)頁案例分析設(shè)計(jì)理念操作步驟相關(guān)工具4.1建筑模型網(wǎng)頁案例分析4.

44、1.1案例分析 建筑模型有助于設(shè)計(jì)創(chuàng)作的推敲，可以直觀地體現(xiàn)設(shè)計(jì)意圖，彌補(bǔ)圖紙?jiān)诒憩F(xiàn)上的局限性。它既是設(shè)計(jì)師設(shè)計(jì)過程的一部分，同時(shí)也屬于設(shè)計(jì)的一種表現(xiàn)形式，被廣泛應(yīng)用于城市建設(shè)、房地產(chǎn)開發(fā)、商品房銷售、設(shè)計(jì)投標(biāo)與招商合作等方面。網(wǎng)頁設(shè)計(jì)要求具有現(xiàn)代感與技術(shù)感。4.1.1案例分析 建筑模型有助于設(shè)計(jì)創(chuàng)作的推敲，可以直觀4.1.2設(shè)計(jì)理念 在網(wǎng)頁設(shè)計(jì)和制作過程中，使用純白色作為網(wǎng)站背景，能夠更加突出網(wǎng)頁宣傳的主體；建筑模型在畫面中占有重要位置，使瀏覽者一目了然，色彩搭配柔和時(shí)尚；整體設(shè)計(jì)獨(dú)特前衛(wèi)，符合建筑模型的行業(yè)特色。 建筑模型網(wǎng)頁效果圖4.1.2設(shè)計(jì)理念 在網(wǎng)頁設(shè)計(jì)和制作過程中，使用純白色作為

45、4.1.3操作步驟1 23 44.1.3操作步驟1 4.1.4相關(guān)工具1. 超鏈接的概念與路徑知識(shí)超鏈接的主要作用是將物理上無序的內(nèi)容組成一個(gè)有機(jī)的統(tǒng)一體。超鏈接對(duì)象上存放某個(gè)網(wǎng)頁文件的地址，以便用戶打開相應(yīng)的網(wǎng)頁文件。在瀏覽網(wǎng)頁時(shí)，當(dāng)用戶將鼠標(biāo)指針移到文字或圖像上時(shí)，鼠標(biāo)指針會(huì)改變形狀或顏色，這就是在提示用戶：此對(duì)象為鏈接對(duì)象。單擊這些鏈接對(duì)象，就可完成打開鏈接的網(wǎng)頁下載文件、打開郵件工具收發(fā)郵件等操作。4.1.4相關(guān)工具1. 超鏈接的概念與路徑知識(shí)2.創(chuàng)建文本鏈接 創(chuàng)建文本鏈接的方法非常簡單，主要是在鏈接文本的“屬性”面板中指定鏈接文件。指定鏈接文件的方法有3種。 直接輸入要鏈接文件的路徑

46、和文件名 使用“瀏覽文件”按鈕 使用指向文件圖標(biāo)2.創(chuàng)建文本鏈接 直接輸入要鏈接文件的路徑和文件名3.文本鏈接的狀態(tài) 一個(gè)未被訪問過的鏈接文字與一個(gè)被訪問過的鏈接文字在形式上是有所區(qū)別的，以提示用戶鏈接文字所指示的網(wǎng)頁是否被看過。設(shè)置文本鏈接狀態(tài)的具體操作步驟如下。 （1）選擇“修改 頁面屬性”命令，彈出“頁面屬性”對(duì)話框。（2）在對(duì)話框中設(shè)置文本的鏈接狀態(tài)。選擇“分類”列表框中的“鏈接”選項(xiàng)，單擊“鏈接顏色”選項(xiàng)右側(cè)的圖標(biāo) ，打開調(diào)色板，選擇一種顏色來設(shè)置鏈接文字的顏色。 3.文本鏈接的狀態(tài) 一個(gè)未被訪問過的鏈接文字與一個(gè)被訪問過4.下載文件鏈接瀏覽網(wǎng)站的目的往往是查找并下載文件，下載文件可

47、利用下載文件鏈接來實(shí)現(xiàn)。建立下載文件鏈接的步驟如同創(chuàng)建文字鏈接，區(qū)別在于所鏈接的文件不是網(wǎng)頁文件而是其他文件，如.exe、.zip等文件。建立下載文件鏈接的具體操作步驟如下。（1）在文檔窗口中選擇需添加下載文件鏈接的網(wǎng)頁對(duì)象。（2）在“鏈接”選項(xiàng)的文本框中指定鏈接文件。（3）按F12鍵預(yù)覽網(wǎng)頁。4.下載文件鏈接5.電子郵件鏈接網(wǎng)頁只能作為單向傳播的工具，將網(wǎng)站的信息傳給瀏覽者，但網(wǎng)站建立者需要接收使用者的反饋信息，一種有效的方式是讓瀏覽者給網(wǎng)站發(fā)送E-mail。在網(wǎng)頁制作中使用電子郵件超鏈接就可以實(shí)現(xiàn)。每當(dāng)瀏覽者單擊包含電子郵件超鏈接的網(wǎng)頁對(duì)象時(shí)，就會(huì)打開郵件處理工具（如Outlook Exp

48、ress），并且自動(dòng)將收信人地址設(shè)為網(wǎng)站建設(shè)者的郵箱地址，方便瀏覽者給網(wǎng)站發(fā)送反饋信息。 利用“屬性”面板建立電子郵件超鏈接 利用“電子郵件鏈接”對(duì)話框建立電子郵件超鏈接5.電子郵件鏈接 利用“屬性”面板建立電子郵件超鏈接4.1.5 實(shí)戰(zhàn)演練-創(chuàng)意設(shè)計(jì)網(wǎng)頁使用“電子郵件鏈接”命令，制作電子郵件鏈接效果；使用“瀏覽文件”按鈕，為文字制作下載文件鏈接效果。 效果圖4.1.5 實(shí)戰(zhàn)演練-創(chuàng)意設(shè)計(jì)網(wǎng)頁使用“電子郵件鏈接”命令4.2溫泉度假網(wǎng)頁案例分析設(shè)計(jì)理念操作步驟相關(guān)工具4.2溫泉度假網(wǎng)頁案例分析4.2.1案例分析 溫泉度假是以優(yōu)美的自然環(huán)境、豐富的人文風(fēng)情、特色的歷史傳統(tǒng)文化、沐浴文化，以及優(yōu)質(zhì)的

49、服務(wù)為支撐吸引廣大的消費(fèi)者。網(wǎng)頁設(shè)計(jì)要體現(xiàn)出溫泉度假的特色。4.2.1案例分析 溫泉度假是以優(yōu)美的自然環(huán)境、豐富的人文4.2.2設(shè)計(jì)理念 在網(wǎng)頁設(shè)計(jì)和制作過程中，網(wǎng)頁的背景采用溫泉的攝影照片，能夠達(dá)到吸引人眼球的效果；導(dǎo)航欄放在頁面的上方，直觀醒目，方便用戶瀏覽；網(wǎng)頁的整體設(shè)計(jì)給人干凈清爽的感覺，沒有多余的修飾，能夠讓瀏覽者直觀、快速地接收到溫泉度假的信息，達(dá)到商家的最終目的。 溫泉度假網(wǎng)頁效果圖4.2.2設(shè)計(jì)理念 在網(wǎng)頁設(shè)計(jì)和制作過程中，網(wǎng)頁的背景采用4.2.3操作步驟1 23 44.2.3操作步驟1 4.2.4相關(guān)工具1.圖像超鏈接建立圖像超鏈接的操作步驟如下。（1）在文檔窗口中選擇圖像。

50、（2）在“屬性”面板中，單擊“鏈接”選項(xiàng)右側(cè)的“瀏覽文件”按鈕 ，為圖像添加文檔相對(duì)路徑的鏈接。（3）在“替代”文本框中可輸入替代文字。設(shè)置替代文字后，當(dāng)圖片不能下載時(shí)，會(huì)在圖片的位置上顯示替代文字；當(dāng)瀏覽者將鼠標(biāo)指針指向圖像時(shí)也會(huì)顯示替代文字。（4）按F12鍵預(yù)覽網(wǎng)頁的效果。4.2.4相關(guān)工具1.圖像超鏈接2.鼠標(biāo)經(jīng)過圖像鏈接“鼠標(biāo)經(jīng)過圖像”是一種常用的互動(dòng)技術(shù)，當(dāng)鼠標(biāo)指針經(jīng)過圖像時(shí)，圖像會(huì)隨之發(fā)生變化。一般，“鼠標(biāo)經(jīng)過圖像”效果由兩張大小相等的圖像組成，一張稱為主圖像，另一張稱為次圖像。主圖像是首次載入網(wǎng)頁時(shí)顯示的圖像，次圖像是當(dāng)鼠標(biāo)指針經(jīng)過時(shí)更換的另一張圖像?！笆髽?biāo)經(jīng)過圖像”經(jīng)常應(yīng)用于網(wǎng)

51、頁中的按鈕上。2.鼠標(biāo)經(jīng)過圖像鏈接3.命名錨記鏈接若網(wǎng)頁的內(nèi)容很長，為了尋找一個(gè)主題，用戶往往需要拖曳滾動(dòng)條進(jìn)行查看，非常不方便。Dreamweaver CS6提供了錨點(diǎn)鏈接功能可快速定位到網(wǎng)頁的不同位置。 創(chuàng)建錨點(diǎn) 建立錨點(diǎn)鏈接3.命名錨記鏈接 創(chuàng)建錨點(diǎn)4.創(chuàng)建熱區(qū)鏈接創(chuàng)建熱區(qū)鏈接的具體操作步驟如下。（1）選取一張圖片，在“屬性”面板的“地圖”選項(xiàng)下方選擇熱區(qū)創(chuàng)建工具。（2）利用“矩形熱點(diǎn)工具”“圓形熱點(diǎn)工具”“多邊形熱點(diǎn)工具”和“指針熱點(diǎn)工具”在圖片上建立或選擇相應(yīng)形狀的熱區(qū)。（3）在“屬性”面板中進(jìn)行設(shè)置。（4）按F12鍵預(yù)覽網(wǎng)頁的效果。4.創(chuàng)建熱區(qū)鏈接4.2.5實(shí)戰(zhàn)演練-金融投資網(wǎng)頁使

52、用“命名錨記”按鈕插入錨點(diǎn)，制作文檔從底部移動(dòng)到頂部的效果；使用“命名錨記”按鈕插入錨點(diǎn)，制作跳轉(zhuǎn)到另一頁面指定點(diǎn)位置的效果。 效果圖4.2.5實(shí)戰(zhàn)演練-金融投資網(wǎng)頁使用“命名錨記”按鈕插入錨4.3綜合演練-世界景觀網(wǎng)頁案例分析設(shè)計(jì)理念知識(shí)要點(diǎn)4.3綜合演練-世界景觀網(wǎng)頁案例分析每個(gè)國家、民族都有自己的文化特色以及景觀建筑，這些景觀建筑不僅是國家的標(biāo)志也是民族的驕傲。網(wǎng)頁設(shè)計(jì)要求突出對(duì)“世界景觀”這一主題的介紹。4.3.1案例分析每個(gè)國家、民族都有自己的文化特色以及景觀建筑，這些景觀建筑不在網(wǎng)頁設(shè)計(jì)和制作過程中，灰綠色的背景使網(wǎng)頁看上去更具質(zhì)感；整齊排列的世界景觀的照片及文字使網(wǎng)頁看上去更加整

53、潔清晰；網(wǎng)頁設(shè)計(jì)留有大量空白，使網(wǎng)頁設(shè)計(jì)更具特色，畫面更加開闊，整體風(fēng)格大氣時(shí)尚。4.3.2設(shè)計(jì)理念在網(wǎng)頁設(shè)計(jì)和制作過程中，灰綠色的背景使網(wǎng)頁看上去更具質(zhì)感；整使用“矩形熱點(diǎn)”工具，制作指定的鏈接網(wǎng)頁文檔。效果圖4.3.3知識(shí)要點(diǎn)使用“矩形熱點(diǎn)”工具，制作指定的鏈接網(wǎng)頁文檔。效果圖4.3.4.4綜合演練-獅立地板網(wǎng)頁案例分析設(shè)計(jì)理念知識(shí)要點(diǎn)4.4綜合演練-獅立地板網(wǎng)頁案例分析地板是房屋裝修中必不可缺的一部分，分類有很多，基本由木料或其他材料做成。網(wǎng)站設(shè)計(jì)要求大氣簡約，整體風(fēng)格既能夠體現(xiàn)出材料的環(huán)保，又讓人感受到舒適、放松的氛圍。4.4.1案例分析地板是房屋裝修中必不可缺的一部分，分類有很多，基

54、本由木料或其在網(wǎng)頁設(shè)計(jì)制作過程中，網(wǎng)頁的色彩搭配清爽舒適，使人能夠直觀地接收到網(wǎng)頁信息，導(dǎo)航欄設(shè)計(jì)簡潔，網(wǎng)頁分類明確，方便瀏覽。整體風(fēng)格設(shè)計(jì)直觀明了，畫面豐富自然，使瀏覽者觀看起來賞心悅目。4.4.2設(shè)計(jì)理念在網(wǎng)頁設(shè)計(jì)制作過程中，網(wǎng)頁的色彩搭配清爽舒適，使人能夠直觀地使用“鼠標(biāo)經(jīng)過圖像”按鈕，為網(wǎng)頁添加導(dǎo)航效果；使用“鏈接”選項(xiàng)，制作超鏈接效果。效果圖4.4.3知識(shí)要點(diǎn)使用“鼠標(biāo)經(jīng)過圖像”按鈕，為網(wǎng)頁添加導(dǎo)航效果；使用“鏈接”選 表格是網(wǎng)頁設(shè)計(jì)中一個(gè)非常有用的工具，它不僅可以將相關(guān)數(shù)據(jù)有序地排列在一起，還可以精確地定位文字、圖像等網(wǎng)頁元素在頁面中的位置，使得頁面在形式上既豐富多彩又條理清楚，在

55、組織上井然有序而不顯單調(diào)。使用表格進(jìn)行頁面布局的最大好處是，即使瀏覽者改變計(jì)算機(jī)的分辨率也不會(huì)影響網(wǎng)頁的瀏覽效果。因此，表格是網(wǎng)站設(shè)計(jì)人員必須掌握的工具。表格運(yùn)用得是否熟練，是劃分專業(yè)制作人士和業(yè)余愛好者的一個(gè)重要標(biāo)準(zhǔn)。第5章使用表格本章簡介： 表格是網(wǎng)頁設(shè)計(jì)中一個(gè)非常有用的工具，它不僅可以將相關(guān)數(shù)據(jù)有課堂學(xué)習(xí)目標(biāo)表格的簡單操作 網(wǎng)頁中的數(shù)據(jù)表格 利用表格進(jìn)行頁面布局 課堂學(xué)習(xí)目標(biāo)表格的簡單操作 5.1營養(yǎng)美食網(wǎng)頁案例分析設(shè)計(jì)理念操作步驟相關(guān)工具5.1營養(yǎng)美食網(wǎng)頁案例分析5.1.1案例分析 美食不僅僅是簡單的味覺感受，更是一種精神享受，所以美食對(duì)于大多數(shù)人來說就更具有意義。本例是設(shè)計(jì)一個(gè)美食網(wǎng)

56、，重點(diǎn)介紹美食的制作方法及飲食健康等。 5.1.1案例分析 美食不僅僅是簡單的味覺感受，更是一種精5.1.2設(shè)計(jì)理念 在網(wǎng)頁設(shè)計(jì)和制作過程中，使用淡黃色作為網(wǎng)頁的背景圖，整體畫面色彩豐富，能夠讓人感受到美食給人帶來的好心情，更體現(xiàn)出美食的多樣和豐富；豐富的色彩和可愛的小圖形搭配使人瀏覽網(wǎng)頁時(shí)能夠感受到快樂。 營養(yǎng)美食網(wǎng)頁效果圖5.1.2設(shè)計(jì)理念 在網(wǎng)頁設(shè)計(jì)和制作過程中，使用淡黃色作為5.1.3操作步驟1 23 45.1.3操作步驟1 5.1.4相關(guān)工具表格的組成表格中包含行、列、單元格、表格標(biāo)題等元素。效果圖名稱表格的標(biāo)題5.1.4相關(guān)工具表格的組成表格中包含行、列、單元格、2.插入表格 要將

57、相關(guān)數(shù)據(jù)有序地組織在一起，必須先插入表格，然后才能有效地組織數(shù)據(jù)。 插入表格的具體操作步驟如下：（1）在“文檔”窗口中，將插入點(diǎn)放到合適的位置。（2）通過以下幾種方法啟用“表格”對(duì)話框。選擇“插入 表格”命令或按Ctrl+Alt+T組合鍵。單擊“插入”面板中“常用”選項(xiàng)卡中的“表格”按鈕 。單擊“插入”布局“布局”選項(xiàng)卡面板中的“表格”按鈕 。（3）根據(jù)需要選擇新建表格的大小、行列數(shù)值等，單擊“確定”按鈕完成新建表格的設(shè)置。2.插入表格 插入表格的具體操作步驟如下：3.表格各元素的屬性 插入表格后，通過選擇不同的表格對(duì)象，可以在“屬性”面板中看到它們的各項(xiàng)參數(shù)，修改這些參數(shù)可以得到不同風(fēng)格的表

58、格。 表格的屬性單元格和行或列的屬性3.表格各元素的屬性 插入表格后，通過選擇不同的表格對(duì)象，4.在表格中插入內(nèi)容建立表格后，可以在表格中添加各種網(wǎng)頁元素，如文本、圖像、表格等。在表格中添加元素的操作非常簡單，只需根據(jù)設(shè)計(jì)要求選定單元格，然后插入網(wǎng)頁元素即可。一般當(dāng)表格中插入內(nèi)容后，表格的尺寸會(huì)隨內(nèi)容的尺寸自動(dòng)調(diào)整。當(dāng)然，還可以利用單元格的屬性來調(diào)整其內(nèi)部元素的對(duì)齊方式、單元格的大小等。 輸入文字 插入其他網(wǎng)頁元素4.在表格中插入內(nèi)容 輸入文字5.選擇表格元素先選擇表格元素，然后對(duì)其進(jìn)行操作。用戶一次可以選擇整個(gè)表格、多行或多列，也可以選擇一個(gè)或多個(gè)單元格。 選擇整個(gè)表格 選擇行或列 選擇單元

59、格 選擇一個(gè)矩形塊區(qū)域 選擇不相鄰的單元格5.選擇表格元素 選擇整個(gè)表格6.復(fù)制、粘貼表格在Dreamweaver CS5中復(fù)制表格的操作如同在Word中一樣，可以對(duì)表格中的多個(gè)單元格進(jìn)行復(fù)制、剪切、粘貼操作，并保留原單元格的格式，也可以僅對(duì)單元格的內(nèi)容進(jìn)行操作。 復(fù)制單元格 剪切單元格 粘貼單元格 粘貼操作的幾點(diǎn)說明6.復(fù)制、粘貼表格 復(fù)制單元格7.縮放表格創(chuàng)建表格后，可根據(jù)需要調(diào)整表格、行和列的大小。 縮放表格 修改行或列的大小7.縮放表格 縮放表格8.刪除表格和表格內(nèi)容刪除表格的操作包括刪除行或列，清除表格內(nèi)容。 清除表格內(nèi)容 刪除行或列8.刪除表格和表格內(nèi)容 清除表格內(nèi)容9.合并和拆分

60、單元格有的表格項(xiàng)需要幾行或幾列來說明，這時(shí)需要將多個(gè)單元格合并，生成一個(gè)跨多個(gè)列或行的單元格。 合并單元格 拆分單元格9.合并和拆分單元格 合并單元格10.增加和刪除表格的行和列在實(shí)際工作中，隨著客觀環(huán)境的變化，表格中的項(xiàng)目也需要做相應(yīng)的調(diào)整，通過選擇“修改 表格”中的相應(yīng)子菜單命令，可添加、刪除行或列。 插入單行或單列 插入多行或多列10.增加和刪除表格的行和列 插入單行或單列5.1.5 實(shí)戰(zhàn)演練-火鍋餐廳網(wǎng)頁使用“表格”按鈕，插入表格效果；使用“圖像”按鈕，插入圖像；使用“CSS”命令，為單元格添加背景圖像及控制文字大小和字體。 效果圖5.1.5 實(shí)戰(zhàn)演練-火鍋餐廳網(wǎng)頁使用“表格”按鈕，插