網(wǎng)站建設(shè)第4章-Dreamweaver8課件

1、*第4章 Dreamweaver 網(wǎng)頁設(shè)計基礎(chǔ) 【知識與技能要點】掌握站點構(gòu)建的方法掌握使用Dreamweaver創(chuàng)建基本網(wǎng)頁的方法掌握使用Dreamweaver創(chuàng)建表格的方法掌握使用Dreamweaver創(chuàng)建超鏈接的方法掌握使用Dreamweaver創(chuàng)建框架的方法掌握使用Dreamweaver創(chuàng)建表單的方法掌握使用Dreamweaver創(chuàng)建動感網(wǎng)頁的方法*4.1 構(gòu)建站點 網(wǎng)站中包含大量的各類文件：以.html和.htm為擴展名的靜態(tài)網(wǎng)頁頁面文件；以.asp為擴展名的動態(tài)網(wǎng)頁頁面文件，這些文件是整個網(wǎng)站的主體；其他資源文件；各級目錄等。*4.1 構(gòu)建站點 為了有效地組織和管理，網(wǎng)站開發(fā)者可以

2、構(gòu)建一個站點，將這些內(nèi)容全部放置在站點中。站點與WEB服務(wù)器上的站點相對應(yīng)。Dreamweaver 8.0中提供了非常方便的構(gòu)建站點和管理站點的方法。 *4.1.1 構(gòu)建本地站點 圖4-1 Dreamweaver 8.0的“起始頁對話框” *“站點定義”向?qū)Ь庉嬑募?部分*“站點定義”向?qū)Ь庉嬑募?部分*“站點定義”向?qū)Ь庉嬑募?部分*“站點定義”向?qū)y試文件*“站點定義”向?qū)Ч蚕砦募?部分*“站點定義”向?qū)Ч蚕砦募?部分*“站點定義”向?qū)Ч蚕砦募?部分*4.1.2 管理站點 站點建立完成后，用戶可以通過 “站點”菜單對站點進行管理。點擊“站點管理站點”，將打開 “管理站點”對話框

3、。*4.2 使用Dreamweaver創(chuàng)建基本網(wǎng)頁 網(wǎng)站的是由一系列相關(guān)的文件組成的，其中最基本的就是基本網(wǎng)頁。 *4.2.1 創(chuàng)建基本網(wǎng)頁 （1）使用菜單創(chuàng)建 點擊“文件新建”菜單項，將打開“新建文檔”對話框， *4.2.1 創(chuàng)建基本網(wǎng)頁 （2）在“文件”對話框中創(chuàng)建 *4.2.2 編輯窗口簡介 *（1）菜單欄菜單名稱功能文件包含“新建”、“打開”、“關(guān)閉”、“保存”和“打印”等對文檔進行控制或操作的項目。編輯包括對當前文檔中的內(nèi)容進行編輯或輔助編輯的項目，例如“剪切”、“復(fù)制”、“粘貼”和“查找和替換”等，除此之外，還包括對Dreamweaver 8.0“首選參數(shù)”的訪問。查看包括文檔的各

4、種視圖顯示，以及文檔顯示時的一些設(shè)置，例如“標尺”、“網(wǎng)格”和“工具欄”等。插入提供各種對象的插入選項。包含“表格”、“圖像”和“表單”等。修改提供修改頁面、表格、圖像、CSS和時間軸等各種對象的選項。文本用于修改和設(shè)置當前文檔的文本格式。命令提供對各種命令的訪問，包括可以根據(jù)開發(fā)者的格式首選參數(shù)設(shè)置代碼格式的命令和創(chuàng)建相冊的命令等選項。站點提供用于管理和維護站點以及上傳和下載文文檔的菜單選項。窗口提供對Dreamweaver 8.0中所有面板、檢查器和窗口的訪問選項。幫助提供對Dreamweaver 8.0幫助文檔的訪問，以及各種語言的參考材料。*（2）插入欄 在菜單欄的下面就是插入欄，其作

5、用如同快捷工具欄，包含用于創(chuàng)建和插入對象的各種按鈕，包括如表格、層和圖像等內(nèi)容。*（3）文檔編輯區(qū) 文檔編輯區(qū)是網(wǎng)頁文件的編輯區(qū)域.*三種視圖方式 視圖方式說明代碼使用代碼方式時，在編輯界面中只顯示網(wǎng)頁的源代碼（即HTML），這種方式不能直觀地看到網(wǎng)頁的顯示效果，而且還必須要非常了解HTML語言，因此對于初學者來說是不適合使用的。設(shè)計使用設(shè)計方式時，在界面中將以“所見即所得”的編輯方式顯示網(wǎng)頁內(nèi)容，這種方式與Word等常用軟件的使用方式非常相似，因此對于開發(fā)者來說，這種方式的使用很簡單，非常適合初學者應(yīng)用。拆分使用拆分方式時，則會將編輯界面拆分成兩個部分，上半部分顯示網(wǎng)頁的源代碼，下半部分以設(shè)

6、計方式顯示。*（4）屬性檢查器和面板組 屬性檢查器的功能是用于查看和編輯當前選定頁面元素的最常用屬性，其中的內(nèi)容根據(jù)選定的元素會有所不同。*（4）屬性檢查器和面板組 在Dreamweaver 8.0中，一些相似的選項被安排在同一個面板上，而功能相近的面板則被組織到一個面板組中。*4.2.3 編輯基本網(wǎng)頁（1）在網(wǎng)頁中插入文字*4.2.3 編輯基本網(wǎng)頁 設(shè)置一些特殊格式，比如：背景顏色、背景圖像或編碼等，開發(fā)者可以點擊“頁面屬性”按鈕，在打開的“頁面屬性”對話框中進行設(shè)置。*4.2.3 編輯基本網(wǎng)頁（2）在網(wǎng)頁中插入圖像 “插入”菜單中的“圖像”選項，點擊“插入欄”中的 圖標。 *4.3 使用D

7、reamweaver創(chuàng)建表格 表格是網(wǎng)頁設(shè)計制作時不可缺少的重要元素，它以簡潔明了和高效快捷的方式將圖像、文本和表單等元素有序的顯示在頁面上，讓開發(fā)者可以很容易地設(shè)計出漂亮的頁面。 除此之外，當在網(wǎng)頁中要顯示日歷、課程表等內(nèi)容時，也要使用表格。*4.3.1設(shè)計表格 在使用表格對頁面進行排版之前，要先設(shè)計好表格的樣式以及元素放置的位置，以及是否使用嵌套表格。 在設(shè)計版面較復(fù)雜的頁面時，會引入嵌套表格，由外層表格負責整體排版，而由嵌套的內(nèi)層表格負責各個子欄目的排版，并插入到外層表格的相應(yīng)位置中，使他們各司其職，互不沖突。 *4.3.2 創(chuàng)建表格（1）創(chuàng)建編輯外層表格 在Dreamweaver 8.

8、0中，除了使用“插入”菜單中的“表格”項創(chuàng)建表格外，也可以點擊插入欄中的 按鈕，然后在彈出的“表格”對話框中進行表格屬性設(shè)置。*4.3.2 創(chuàng)建表格*4.3.2 創(chuàng)建表格 設(shè)置完成后，點擊“確定”按鈕創(chuàng)建表格，然后根據(jù)設(shè)計要求將內(nèi)容元素放置在表格中，在編輯每一個單元格的時候，可以在“單元格屬性檢查器”對話框中設(shè)置相應(yīng)的選項。*4.3.2 創(chuàng)建表格 如果表格創(chuàng)建完成后，還需要對其進行修改，可以在設(shè)計視圖中選中表格，或是在狀態(tài)欄的標簽選擇器中選擇相應(yīng)的表格標簽，然后在表格屬性檢查器中修改選項。 *4.3.2 創(chuàng)建表格（2）創(chuàng)建編輯內(nèi)層表格 *4.4 使用Dreamweaver創(chuàng)建超鏈接 一個網(wǎng)站是

9、由很多頁面和其他相關(guān)文件組成的，如果他們之間彼此相互獨立，那么頁面就好比是一個個孤島，網(wǎng)站將無法正常運行。為了使網(wǎng)站中每個網(wǎng)頁之間可以建立起相互的聯(lián)系，必須使用一種可以將站內(nèi)網(wǎng)頁、外部網(wǎng)頁、圖片和郵件等鏈接在一起的技術(shù)，這稱為“超級鏈接”或“超鏈接”。 *4.4.1 創(chuàng)建頁間鏈接 頁間連接是指從一個頁面鏈接到另一個頁面上，被鏈接的目的頁面可以和源頁面在同一個站點上，也可以是其他站點中的某一個頁面。*（1）文字鏈接 文字鏈接是網(wǎng)頁鏈接中最常用也是最基本的形式。當在瀏覽器中顯示頁面時，可以超鏈接的文字通常都顯示為藍色的、帶有下劃線（如果使用了層疊樣式表修飾過的可能會顯示的不一樣），當用戶用鼠標指向

10、它時，鼠標指針會變?yōu)椤靶∈帧钡男螤睢?*（1）文字鏈接 “目標”選項，也可以稱它為目標區(qū)，它是指定超級鏈接指向的目的頁面出現(xiàn)在什么目標區(qū)域中，其共有五個選項：空：即什么都不選，這個是默認值，表示目的頁面與源頁面在同一個窗口中顯示。_blank：表示目的頁面將出現(xiàn)在一個新窗口中。_parent：表示目的頁面將替換其上一層的框架結(jié)構(gòu)。_self：表示將目的頁面顯示在當前框架中。_top：表示目的頁面將跳出所有框架，直接出現(xiàn)在瀏覽器中。*（1）文字鏈接*（1）文字鏈接 除了使用屬性檢查器外，還可以點擊“插入欄”中的 圖標，或是點擊菜單欄中的“插入超級鏈接”項，將會打開“超級鏈接”對話框。 *（2）圖

11、像鏈接 由于文字顯示的效果比較單調(diào)，因此可以使用圖像鏈接增加顯示效果。如果一個頁面中的圖像被增加了鏈接功能后，其在瀏覽器中顯示時會在圖像的外圍顯示一個藍色的邊框，并且當用鼠標指向它時，鼠標指針也會變?yōu)椤靶∈帧钡男螤睢?圖像鏈接的創(chuàng)建與文字鏈接非常相似，先選取中圖像，然后使用與創(chuàng)建文字鏈接一樣的方式創(chuàng)建鏈接。 *4.4.2 下載與郵件發(fā)送 在一些網(wǎng)頁中，經(jīng)?？梢钥吹揭恍┏溄?，點擊后并沒有顯示目的頁面，而是出現(xiàn)了下載界面，或是彈出聯(lián)系人地址已經(jīng)填好的郵件發(fā)送向?qū)?，其實這也是超鏈接的一種。 *（1）創(chuàng)建下載鏈接 先選中作為鏈接的元素，然后使用與創(chuàng)建頁間鏈接相似的方法選擇目的文件即可創(chuàng)建下載鏈接。

12、需要注意，被選擇的文件不能是以“.html”或“.htm”為的擴展名的網(wǎng)頁文件（以“.jpg”和“.gif”等為擴展名的圖像文件，或是以“.txt”為擴展名的文本文件也盡量不要使用），其他類型文件（如“.doc”的Word文檔文件、“.rar”或“.zip”的壓縮文件、“.exe”的可執(zhí)行文件）通常都可以。*（2）創(chuàng)建郵件發(fā)送鏈接 創(chuàng)建郵件發(fā)送鏈接的方式與其他鏈接稍有不同，先將編輯插入點放置在提定位置，然后點擊“插入欄”中的 圖標，或是點擊菜單欄中的“插入電子郵件鏈接”項，將會打開 “電子郵件鏈接”對話框。*（2）創(chuàng)建郵件發(fā)送鏈接*（2）創(chuàng)建郵件發(fā)送鏈接*4.4.3 創(chuàng)建錨點鏈接 使用超級鏈接

13、可以在不同頁面之間進行跳轉(zhuǎn)，同樣也可以在一個內(nèi)容比較多、需要翻屏顯示的頁面內(nèi)進行跳轉(zhuǎn)，這種稱為“頁內(nèi)鏈接”。 *4.4.3 創(chuàng)建錨點鏈接 為了可以在一個頁面內(nèi)部的不同位置進行跳轉(zhuǎn)，首先需要在這些位置上創(chuàng)建“錨點標記”。點擊“插入欄”中的 圖標，或是點擊菜單欄中的“插入命名錨記”項，將會打開“命名錨記 ”對話框。 *4.4.3 創(chuàng)建錨點鏈接 錨點創(chuàng)建好后，可以使用創(chuàng)建文字鏈接的方式創(chuàng)建到錨點的鏈接，但不同的是在屬性檢查器對話框的“鏈接”項中不能輸入文件名，而是要輸入一個以“#”開頭，后面跟目的錨點名稱的一個文本串，或是打開“超級鏈接”對話框，在“鏈接”項中選擇或輸入。*4.4.3 創(chuàng)建錨點鏈接*

14、4.4.3 創(chuàng)建錨點鏈接 使用錨點不但可以在一個頁面中進行跳轉(zhuǎn)，還可以從一個頁面跳轉(zhuǎn)到另一個頁面中的某個錨點位置上，要創(chuàng)建這種鏈接，只需要在“鏈接”項后輸入目的頁面的文件名，后面加一個“#”，再跟目的錨點名稱即可，例如：“index.asp#copyright”。 *4.4.4 創(chuàng)建熱點 普通的鏈接方式只能在一個元素上創(chuàng)建一個鏈接，但有時像地圖這樣的圖片上，可能包含有多個鏈接，當單擊不同的省時可以跳轉(zhuǎn)到不同的網(wǎng)頁上，這時就只能使用熱點技術(shù)了。 需要注意：熱點必須作用在圖片上。 *4.4.4 創(chuàng)建熱點 在對話框的左下角有三個熱點圖形選擇按鈕，分別是矩形、圓形和多邊形，對于復(fù)雜的熱區(qū)圖形可以選擇多

15、邊形工具來進行描畫。 *4.5 使用Dreamweaver 創(chuàng)建框架 為了能夠在一個瀏覽器窗口中顯示多個不同頁面，可以使用框架結(jié)構(gòu)，它是網(wǎng)頁中經(jīng)常使用的布局設(shè)計方式之一。 *4.5.1 創(chuàng)建與保存框架 框架的作用就是把網(wǎng)頁在一個瀏覽器窗口下分割成幾個不同的區(qū)域，實現(xiàn)在一個瀏覽器窗口中顯示多個獨立的頁面。另外還可以把網(wǎng)站中多個頁面相同的部分單獨制作成一個頁面，將其作為框架結(jié)構(gòu)的一個子框架的內(nèi)容提供給整個網(wǎng)站公用，這樣大大降低了網(wǎng)站的維護成本，減少了開發(fā)人員的工作量。 *4.5.1 創(chuàng)建與保存框架 一個框架結(jié)構(gòu)的頁面主要有兩部分構(gòu)成： 框架：框架是瀏覽器窗口中的一個區(qū)域，它可以顯示與瀏覽器窗口的其

16、余部分中所顯示內(nèi)容無關(guān)的網(wǎng)頁文件。 框架集：框架集是一個獨立的網(wǎng)頁文件，它定義了一組框架的布局和屬性，將一個窗口通過行和列的方式分割成多個子框架，而子框架的多少則根據(jù)具體有多少個網(wǎng)頁來決定，每個子框架中要顯示的就是不同的網(wǎng)頁內(nèi)容。*（1）使用新建文檔對話框創(chuàng)建 點擊菜單欄中的“文件新建”項，或是在起始頁對話框中點擊“框架集”，將會打開“新建文檔”對話框，在“類別”項中選擇“框架集”，再在框架集中選擇相應(yīng)的樣式，對話框的右側(cè)會顯示出所選樣式的預(yù)覽圖，最后點擊“創(chuàng)建”按鈕即可。*（1）使用新建文檔對話框創(chuàng)建*（1）使用新建文檔對話框創(chuàng)建 框架集創(chuàng)建成功后，馬上會顯示出“框架標簽輔助功能屬性”對話框

17、，在其中的“框架”項中給出了每個框架的內(nèi)部名稱，而在“標題”項中，對應(yīng)每個框架，用戶可以指定一個名稱，這個名稱是為了在頁面設(shè)計時由開發(fā)者使用的（比如在超鏈接中使用）。 *（1）使用新建文檔對話框創(chuàng)建*（2）使用插入欄創(chuàng)建 新建一個普通頁面，在“布局插入欄”中選擇“框架”按鈕，點擊其右側(cè)的下拉按鈕后，將會出現(xiàn)一個含有多個預(yù)制框架集的選擇列表，在其中選擇相應(yīng)的框架集樣式。*（3）保存框架 編輯完框架的每個部分后，就可以將其保存了，不過要注意，框架的保存不同于普通頁面的保存，框架保存時需要對框架集中的每一個部分（即子框架中包含的頁面）進行保存，然后再保存整個框架集，也就是說保存框架后，實際的文件個數(shù)

18、會比設(shè)計時見到的部分多一個。 *4.5.2 框架的編輯與修改（1）編輯框架內(nèi)容 在框架中編輯頁面內(nèi)容的方法與在普通頁面中相似，只需要選擇指定的子框架部分，或是使用“框架面板”對話框選擇相應(yīng)框架，就可以在其中進行內(nèi)容編輯。*4.5.2 框架的編輯與修改（2）修改框架結(jié)構(gòu) 框架創(chuàng)建好后，可以在設(shè)計視圖中對其進行有限的修改。也可以使用框架屬性檢查器進行修改。*4.6 使用Dreamweaver 創(chuàng)建表單 在網(wǎng)頁設(shè)計中經(jīng)常需要制作一些可以搜集到用戶信息的頁面，在這些頁面中用到的對象元素被稱為表單。 一個完整的表單由兩部分組成，一個是在網(wǎng)頁中進行描述的表單對象；另一個是指定接收信息的應(yīng)用程序，其可以是服

19、務(wù)器端的，也可以是客戶端的，主要用于對客戶信息進行分析處理。*4.6.1 表單對象簡介（1）表單（2）文本域（3）隱藏區(qū)域（4）復(fù)選框（5）單選按鈕（6）列表/菜單與跳轉(zhuǎn)菜單（7）圖像區(qū)域（8）文件域（9）按鈕 *4.6.2 插入表單對象 在建立表單頁面之前，先要設(shè)計好其布局結(jié)構(gòu)，并根據(jù)需要選擇要使用的表單對象。新建一個普通頁面，然后使用表格對其進行布局排版后，就可以插入表單對象了。*4.6.2 插入表單對象*4.7 創(chuàng)建動感網(wǎng)頁 為了增加頁面的動感顯示效果，或是實現(xiàn)用戶與頁面的簡單交互， Dreamweaver提供了非常方便、簡單的機制來實現(xiàn)創(chuàng)建動感網(wǎng)頁。*4.7.1 層與時間軸 層是CSS

20、中的一種定位技術(shù)，Dreamweaver對其進行了可視化處理。使用層以后，可以任意元素將放置在層內(nèi)，并且層可以放置在網(wǎng)頁中的任何一個位置上，這樣可以使元素重疊顯示，使其具有立體效果。 *（1）創(chuàng)建層 層的創(chuàng)建非常方便。在Dreamweaver中點擊菜單欄中的“插入布局對象層”選項，或是在“布局插入欄”中點擊 按鈕，然后在編輯區(qū)中按住鼠標左鍵，拖動出一個矩形，矩形的大小就是層的大小，釋放鼠標后層就會出現(xiàn)在頁面中。 *（1）創(chuàng)建層 層創(chuàng)建好后，可以通過“屬性檢查器”進行屬性值的修改。 *（2）時間軸 時間軸可以根據(jù)時間的流逝，移動圖層位置或改變圖層的樣式，從而顯示動畫效果的一種動畫編輯界面，在時間軸中包含了制作動畫時所必須的各種功能。*（2