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

1、邊做邊學(xué)-Dream-weaver-CS6網(wǎng)頁設(shè)計案例教程課件網(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è)置、管理站點的方式等內(nèi)容。第1章初識Dreamweaver CS6本章簡介： 網(wǎng)頁是網(wǎng)站最基本的組成部分，網(wǎng)站之間并不是雜亂無章的，它們通課堂學(xué)習(xí)目標操作界面 創(chuàng)建網(wǎng)站框架 管理站點 網(wǎng)頁文件頭設(shè)置 課堂學(xué)習(xí)目標操作界面 1.1操作界面操作目的操作步驟相關(guān)工具1.1操作界面操作目的1.1.1操作目的 通過打開文件和彈出屬性面板命令，熟悉菜單欄的操

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

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

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

5、很好的工具軟件有條不紊地整理復(fù)雜的CSS源代碼，并適時地提供輔助說明。Dreamweaver CS5就提供了這種方便有效的CSS功能?！皩傩浴泵姘逄峁┝薈SS功能。用戶可以通過“屬性”面板中“類”選項的下拉列表對所選的對象應(yīng)用樣式或創(chuàng)建和編輯樣式。若某些文字應(yīng)用了自定義樣式，當用戶調(diào)整這些文字的屬性時，會自動生成新的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)建站點后，用戶需要創(chuàng)建網(wǎng)頁來組織要展示的內(nèi)容。合理的網(wǎng)頁名稱非常重要，一般網(wǎng)頁文件的名稱應(yīng)容易理解，能反映網(wǎng)頁的內(nèi)容。在網(wǎng)站中有一個特殊的網(wǎng)頁是首頁，每個網(wǎng)站必須有一個首頁。訪問者每當在IE瀏覽器的地址欄中輸入網(wǎng)站地址，如在IE瀏覽器的地址欄中輸入“”時會自動打開新浪網(wǎng)的首頁。一般情況下，首頁的文件名為“index.htm”“index.html”“index.asp”“default.asp” “default.htm”或“default.html” 。1.2.3相關(guān)工具創(chuàng)建站點后，用戶需要創(chuàng)建網(wǎng)頁來組織要展示1.

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

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

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

10、或字符的數(shù)目，當超過了限制的數(shù)目時，它將忽略所有的關(guān)鍵字，所以最好只使用幾個精選的關(guān)鍵字。一般情況下，關(guān)鍵字是對網(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 文件頭標簽 Meta”命令，彈出“Meta”對話框?！癕ETA”對話框2.插入作者和版權(quán)信息“META”對話框3.設(shè)置刷新時間要指定載入頁面刷新或者轉(zhuǎn)到其他頁面的時間，可設(shè)置文件頭部的刷新時間項，具體操作步驟如下。（1）選擇“插入 HTML 文件頭標簽 刷新”命令，彈出“刷新”對話框。（2）在“刷新”對話框中設(shè)置刷新時間。“刷新”對

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

33、的甜美風(fēng)格。3.1.1案例分析 甜品店是現(xiàn)代女性非常鐘愛的用于聚會休閑3.1.2設(shè)計理念 在網(wǎng)頁設(shè)計制作過程中，使用精美的產(chǎn)品圖片，使人產(chǎn)生食欲。粉紅色的背景滿足了女性消費者的喜好，使人更加有購買的欲望。右側(cè)的詳細簡介可以更清楚的了解產(chǎn)品特性，下方單獨的產(chǎn)品圖片可以讓人選購不同的口味，滿足更多人的需求。網(wǎng)頁整體設(shè)計主題突出，讓人印象深刻。 紙杯蛋糕網(wǎng)頁效果圖3.1.2設(shè)計理念 在網(wǎng)頁設(shè)計制作過程中，使用精美的產(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兩種圖像格式。因為要保證瀏覽者下載網(wǎng)頁的速度，所以網(wǎng)站設(shè)計者也常使用JPEG和GIF這兩種壓縮格式的圖像。 GIF文件 JPEG文件 PNG文件3.1.4相關(guān)工具1.網(wǎng)頁中的圖像格式 GIF文件2.插入圖像要在Dreamweaver CS6文檔中插入的圖像必須位于當前站點文件夾內(nèi)或遠程站點文件夾內(nèi)，否則圖像不能正確顯示。因此在建立站點時，要先創(chuàng)建一個名叫“image”的文件夾，并將需要的圖像復(fù)制到其中。2.插入圖像3.設(shè)置圖像屬性插入圖像后，在“屬性”面板中顯示該圖像的屬性。“屬性”面板3.設(shè)置圖像屬性插入圖像后，在“屬性”面板中顯示該圖像的屬4.插入圖像占位符在網(wǎng)頁布局時，網(wǎng)站設(shè)計

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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