- Dreamweaver 8中文版完全自學手冊
- 架構科技編著
- 586字
- 2018-12-29 14:42:52
PART 1 實例入門篇
Chapter 01 準備工作與創(chuàng)建站點
網(wǎng)頁是網(wǎng)站最基本的組成部分,網(wǎng)站之間并不是雜亂無章的,它們是通過各種鏈接相互關聯(lián),從而描述相關的主題或實現(xiàn)相同的目的。本章講述網(wǎng)站的建設基礎,包括lP地址與域名、動態(tài)數(shù)據(jù)庫開發(fā)以及Dreamweaver 8的工作界面,最后重點講述了管理站點的方式。
1.1 相關知識介紹
雖然Dreamweaver 8 這款專業(yè)的 HTML 編輯器為用戶提供了手工編寫 HTML 代碼和可視化編輯界面兩種創(chuàng)作Web頁的方式,使用戶不需要掌握復雜的源代碼語言就可開發(fā)出專業(yè)的網(wǎng)頁,但是,作為網(wǎng)頁制作者仍然需要了解相關的網(wǎng)絡知識,否則無法充分感受Dreamweaver 8所帶來的方便與快捷。
1.1.1 IP地址與域名
萬維網(wǎng)上連接著數(shù)百萬臺計算機,如果想同某臺計算機通信,就必須知道該機的地址。萬維網(wǎng)是通過IP地址來標識網(wǎng)上每臺計算機的,如同用房間號標識房間一樣。IP地址由4個字節(jié)的數(shù)字組成,可以標識232臺計算機。要讓萬維網(wǎng)用戶記住計算機的IP地址實屬不易,因此,人們給每臺計算機賦予一個由英文字母和數(shù)字組成的主機名,這就是域名。由于計算機只識別IP地址,因此當用戶使用域名時,萬維網(wǎng)上的域名服務器還要將其解析為IP地址。
域名是分層的。頂級域分為兩類,分別為地理和機構,如cn表示中國、jp表示日本、com表示商業(yè)機構、edu表示教育機構、net表示網(wǎng)絡機構、org表示非贏利組織等。得到頂級域的管理權后,可以將其管理依次向下分為二級域和三級域,一般在三級域下是主機名。比如,通過域名www.sina.com.cn可以知道,要訪問的計算機是sina.com.cn域下的www服務器。
1.1.2 本地計算機和Internet服務器
所謂Internet服務器是指提供Internet服務的計算機,它可提供WWW服務、FTP服務、E-mail服務等,我們現(xiàn)在談的主要是WWW服務器。WWW服務器通常是指安裝了Internet信息服務軟件的計算機,它以客戶機/服務器模式運行,主要用于存儲瀏覽者所瀏覽的Web站點的頁面及處理瀏覽者上傳信息的服務器程序。常見的Web服務器軟件包括Microsoft的IIS和PWS。
對于瀏覽網(wǎng)頁的瀏覽者來說,他們使用的計算機被稱為本地計算機。本地計算機和Internet服務器間通過撥號等多種方式進行連接,實現(xiàn)相互之間的通信。本地計算機的瀏覽者只需在瀏覽器軟件的地址欄中輸入WWW服務器的名稱,就可輕松實現(xiàn)對網(wǎng)頁的瀏覽。
1.1.3 瀏覽器
萬維網(wǎng)(Web)的用戶要想“閱讀”網(wǎng)頁中的信息,就必須安裝瀏覽器。瀏覽器安裝在客戶端,是用來查看萬維網(wǎng)中超文本的一種工具。常用的Web瀏覽器有Netscape 公司的Netscape Navigator和微軟公司的Microsoft Internet Explorer(IE)。
雖然Netscape Navigator和Microsoft Internet Explorer是不同公司的瀏覽器軟件,但界面和功能大致相同。Netscape瀏覽器界面如圖1-1、圖1-2所示,Microsoft瀏覽器界面如圖1-3、圖1-4所示。

圖1-1

圖1-2

圖1-3

圖1-4
下面介紹瀏覽器的界面。IE瀏覽器窗口包括標題欄、菜單欄、地址欄、常用工具欄和瀏覽區(qū)幾個部分,如圖1-5所示。其中,用戶經(jīng)常使用的是地址欄、常用工具欄和瀏覽區(qū)三個部分。

圖1-5
地址欄:通過在地址欄中輸入URL地址,用戶可以打開世界各地的網(wǎng)頁。
常用工具欄:將常用的菜單命令以按鈕的形式顯示。用戶通過單擊按鈕便可完成最基本的操作,如向前或向后翻頁、刷新網(wǎng)頁、打開默認主頁、停止下載網(wǎng)頁、打印網(wǎng)頁等。
瀏覽區(qū):顯示用戶正瀏覽的網(wǎng)頁內容。
1.1.4 上傳和下載
將資源從Internet服務器復制到本地計算機的過程稱為下載。而將資源從本地計算機復制到Internet服務器的過程稱為上傳。
在日常生活中進行上傳和下載的工作很多。比如,瀏覽網(wǎng)頁的過程就是一個下載過程。當瀏覽者在瀏覽器上輸入網(wǎng)址后,就將請求發(fā)送到WWW服務器。WWW服務器接到請求后,將網(wǎng)頁下載到瀏覽者的本地計算機,這樣,瀏覽者就可以看到要瀏覽的網(wǎng)頁了。
除了下載信息外,我們還常將本地計算機資源上傳到網(wǎng)上,讓大家共享。文件的上傳和下載可利用專用工具進行操作,如CUTEFTP等。Dreamweaver 8內置了強大的FTP功能,幫助用戶實現(xiàn)站點文件的上傳和下載。
1.1.5 超文本
超文本不同于普通文本,是一種使用戶與計算機之間進行密切交流的文本顯示技術。超文本技術是通過對有關詞匯做鏈接,使用戶輕松地在相關網(wǎng)頁中查看信息的一種技術。通常超級鏈接的文本帶有下劃線或與其他文字的顏色不同,當用戶將鼠標放到超文本上時,鼠標呈手形圖案,文字的顏色也發(fā)生改變。當用戶單擊超文本后,文本的顏色會改變。
1.1.6 HTML與HTTP
在Web服務中,信息一般是使用HTML格式以超文本和超媒體方式傳送的,所使用的Internet協(xié)議是HTTP協(xié)議。
HTML的全稱是Hypertext Markup Language,即超文本標記語言,是用于WWW上文檔的格式化語言。使用HTML語言可以創(chuàng)建超文本文檔,該文檔可以從一個平臺移植到另一個平臺。HTML文件是帶有嵌入代碼的ASCII文本文件,這種嵌入代碼由標記表示,它用來表示格式化和超文本鏈接。HTML文件的內容通過一個頁面展示出來,不同頁面通過超鏈接關聯(lián)起來。
HTTP的全稱是Hypertext Transfer Protocol,即超文本傳輸協(xié)議。HTTP協(xié)議是用于訪問WWW上信息的客戶機/服務器協(xié)議。HTTP協(xié)議建立在TCP/IP協(xié)議的應用層之上,其實現(xiàn)過程一般包括:客戶端與指定的服務器建立連接;由客戶端提出請求并發(fā)送到服務器;服務器收到客戶端的請求后,取得相關對象并發(fā)送到客戶端;在客戶端接受完對象后,關閉連接。
1.1.7 統(tǒng)一資源定位符
URL即統(tǒng)一資源定位符,是唯一一種能標識Internet上計算機、目錄和文件位置的命名規(guī)則。URL通常也稱為URL地址、網(wǎng)站地址或網(wǎng)址,其一般形式可以表示為:【方式】://【主機名】:【端口】/【目錄】/.../【文件名】。
【方式】:指定訪問該資源所使用的Internet協(xié)議,常用協(xié)議如下。
◎ http:超文本傳輸協(xié)議
◎ ftp:文件傳輸協(xié)議
◎ mailto:電子郵件地址
◎ news:網(wǎng)絡新聞組
◎ telnet:遠程登錄服務
◎ file:本地文件
【主機名】:指定Web服務器的IP地址或域名地址。IP地址是唯一標識網(wǎng)絡上某一主機的地址,它將計算機標識為一個32位地址,可以用帶句點的十進制數(shù)來表示。域名地址也稱為DNS地址,它由四個部分組成,常用形式為“機器名.單位名.單位類別.國別”。
【端口】:指定Web服務器在該主機上所使用的TCP端口,默認端口是80,通常不需要指定,只有當Web服務器不使用默認端口時才需要指定端口。
【目錄】:可以是Web服務器上信息資源所在的目錄。
【文件名】:由基本文件名和擴展名兩部分組成,如index.htm等。
1.1.8 Web頁與Web站點
Web頁就是World Wide Web文檔,通常稱為網(wǎng)頁。Web頁一般由相關的文本、圖像、聲音、動畫、視頻以及腳本命令等組成,位于特定計算機的特定目錄中,其位置可以根據(jù)URL確定。
一般的Web站點由一組相關的Web頁和其他文件組成,這些文件存儲在Web服務器上。當用戶訪問一個Web站點時,該站點中有一個頁面總是被首先打開,該頁面稱為首頁或主頁。用戶在瀏覽器中輸入要瀏覽網(wǎng)頁的URL地址,打開相應的Web頁。
Web頁的名稱由用戶任意命名,一般用表示網(wǎng)頁功能的英文單詞命名。每一個站點必須有一個主頁,主頁的名稱規(guī)定為 index.htm、index.html、index.asp、default.asp、default.htm或default.html。用戶在瀏覽器中瀏覽主頁時,URL地址可以只寫協(xié)議和Web服務器的名字,主頁名可以忽略。比如,瀏覽新浪網(wǎng)的主頁時,只要在瀏覽器的地址欄輸入http://www.sina.com.cn,即可自動打開新浪網(wǎng)的首頁。
1.1.9 靜態(tài)網(wǎng)頁與動態(tài)網(wǎng)頁
靜態(tài)網(wǎng)頁是標準的HTML文件,其文件擴展名是.htm或.html。它可以包含HTML標記、文本、Java小程序、客戶端腳本以及客戶端ActiveX控件,但這種網(wǎng)頁不包含任何服務器端腳本,該頁中的每一行HTML代碼都是在上傳到Web服務器前由網(wǎng)頁設計人員編寫的,在上傳到Web服務器后便不再發(fā)生任何更改,所以稱之為靜態(tài)網(wǎng)頁。
靜態(tài)網(wǎng)頁可以包含翻轉圖像、GIF動畫或FIash影片等,具有很強的動感效果。此處所說的靜態(tài)網(wǎng)頁是指在發(fā)送到瀏覽器時不再進行修改的Web頁,其最終內容是由設計人員事先確定的。
靜態(tài)網(wǎng)頁的處理流程如圖1-6所示。

圖1-6
(1)當用戶單擊Web頁上的某個鏈接時,瀏覽器向Web服務器發(fā)送請求。
(2)Web服務器收到該請求后,通過文件擴展名.htm或.html判斷出是HTML文件請求,并從磁盤或存儲器中獲取相關的HTML文件。
(3)Web服務器將HTML文件發(fā)送到瀏覽器,由瀏覽器對該HTML文件進行解讀,并將結果顯示在瀏覽器窗口中。
動態(tài)網(wǎng)頁不是指網(wǎng)頁上有動態(tài)的效果,而是指具有瀏覽者與后臺服務器進行信息交互的能力以及自動更新網(wǎng)頁中信息的能力。因此由網(wǎng)頁設計人員編寫,上傳到Web服務器后可以被修改的網(wǎng)頁,稱為動態(tài)網(wǎng)頁。動態(tài)網(wǎng)頁的執(zhí)行過程如圖1-7所示。

圖1-7
(1) 瀏覽器向Web服務器發(fā)送一個請求,要求服務器上的某個動態(tài)網(wǎng)頁對上傳的數(shù)據(jù)進行處理。
(2) Web服務器收到該請求,運行動態(tài)網(wǎng)頁中的應用程序。
(3) 若動態(tài)網(wǎng)頁的命令需要對后臺數(shù)據(jù)庫進行操作,還要通過數(shù)據(jù)庫驅動程序啟動數(shù)據(jù)庫。服務器通過數(shù)據(jù)庫操作指令處理數(shù)據(jù)庫。
(4) 服務器將處理結果以靜態(tài)網(wǎng)頁的方式下傳到用戶瀏覽器端。
(5) 用戶端的瀏覽器對該靜態(tài)網(wǎng)頁進行解釋,并將結果顯示在瀏覽器窗口中。
動態(tài)網(wǎng)頁與靜態(tài)網(wǎng)頁之間的區(qū)別在于:動態(tài)網(wǎng)頁中的某些腳本只能在Web服務器上運行,而靜態(tài)網(wǎng)頁中的任何腳本都不能在Web服務器上運行;動態(tài)網(wǎng)頁與靜態(tài)網(wǎng)頁文件擴展名不同,對于動態(tài)網(wǎng)頁來說,其文件擴展名不再是.htm或.html,而是與所使用的Web應用開發(fā)技術有關,例如,使用ASP技術時文件擴展名是.asp等。
當Web服務器接收到對靜態(tài)網(wǎng)頁的請求時,服務器將該頁發(fā)送到請求瀏覽器,而不進行進一步的處理;當Web服務器接收到對動態(tài)網(wǎng)頁的請求時,它將做出不同的反應,首先將該頁傳遞給一個稱為應用程序服務器的特殊軟件擴展,然后由這個特殊軟件負責完成頁。應用服務器軟件與Web服務器軟件通常在同一臺計算機上安裝、運行。使用不同的Web開發(fā)技術創(chuàng)建動態(tài)網(wǎng)頁時,所用的應用程序服務器軟件也是各不相同的。
1.2 網(wǎng)上安家
做網(wǎng)站的目的是希望其他用戶能通過萬維網(wǎng)查看自己發(fā)布的信息,因此,站點的所有網(wǎng)頁制作完成后,就需要將其上傳到Web服務器,即在萬維網(wǎng)上安個“家”。這項工作可通過三種方式實現(xiàn)。
◎ 自行購買和建設服務器主機,然后向網(wǎng)絡接入服務提供商申請連接Internet的專線和網(wǎng)址。但服務器主機和專線的租金很貴,一般的小公司和個人不使用此方法。
◎ 自行購買和建設服務器主機,但不租用專線,服務器放在網(wǎng)絡接入服務提供商處托管,通過撥號、寬帶等方式上網(wǎng)傳送網(wǎng)站。目前大多數(shù)企業(yè)采用這種方式。
◎ 租用網(wǎng)絡接入服務提供商提供的主機硬盤空間,由網(wǎng)絡接入服務提供商負責硬件和技術人員的費用,以及連接Internet的專線月租。這是最簡單的方式,一般小公司和個人用戶多采用此方法。
1.3 Dreamweaver 8 的概述
Dreamweaver 8 是一款專業(yè)的 HTML 編輯器,用于對 Web 站點、Web 頁和 Web 應用程序進行設計、編碼和開發(fā)。無論用戶喜歡手工編寫 HTML 代碼時的駕馭感,還是偏愛可視化的編輯環(huán)境, Dreamweaver 都會為用戶提供眾多功能強大的工具,使用戶擁有更加完美的 Web 創(chuàng)作體驗。特別是Dreamweaver 8無需用戶掌握復雜的源代碼語言,就可開發(fā)出專業(yè)的網(wǎng)絡應用程序。
Dreamweaver 8具有如下特點:
◎ 簡潔高效的設計和開發(fā)界面
◎ 增強的源代碼編輯功能
◎ 動態(tài)數(shù)據(jù)庫開發(fā)
1.3.1 簡潔高效的設計和開發(fā)界面
Dreamweaver 8的操作環(huán)境簡潔明快,可大大提高設計效率。
1.友善的開始頁面
啟動Dreamweaver 8后首先看到的畫面是開始頁面,如圖1-8所示。供用戶選擇新建文件的類型,或打開已有的文檔等。

圖1-8
對于老用戶可能不需要開始頁面,可執(zhí)行菜單【編輯】→【首選參數(shù)】命令,彈出【首選參數(shù)】對話框,取消勾選【顯示起始頁】復選框,如圖1-9所示。單擊【確定】按鈕完成設置。再次啟動Dreamweaver 8,將不再顯示開始頁面。

圖1-9
2.不同風格的界面
Dreamweaver 8的操作界面新穎淡雅,布局緊湊,為用戶提供了一個輕松、愉悅的開發(fā)環(huán)境。
第一次運行Dreamweaver 8,會彈出如圖1-10所示的對話框,讓用戶選擇操作界面的風格。用戶可選擇【設計器】單選項,選擇設計風格。以后再運行Dreamweaver 8,將使用此風格的界面。

圖1-10
若用戶想修改操作界面的風格,切換到自己熟悉的開發(fā)環(huán)境,可執(zhí)行菜單【窗口】→【工作區(qū)布局】命令,彈出其子菜單,如圖1-11所示。在子菜單中執(zhí)行【編碼器】或【設計器】命令,選擇一種界面風格,頁面會發(fā)生相應的改變。

圖1-11
3.伸縮自如的功能面板
在文檔編輯窗口的右側和下方與面板交界的框線中央各有一個箭頭,單擊箭頭便可隱藏或展開面板,如圖1-12所示。

圖1-12
如果用戶覺得工作區(qū)不夠大,可以將鼠標放在文檔編輯窗口右側與面板交界的框線處,當鼠標光標呈雙向箭頭時,拖動鼠標調整工作區(qū)的大小,如圖1-13所示。若用戶需要更大的工作區(qū),可以將面板隱藏。

圖1-13
4.多文檔的編輯界面
Dreamweaver 8提供了多文檔的編輯界面,將多個文檔整合在一起,方便用戶在各個文檔之間切換,如圖1-14所示。用戶可以單擊文檔編輯窗口上方的標簽,切換到相應的文檔中。通過多文檔的編輯界面,用戶可以同時編輯多個文檔。

圖1-14
5.新穎的插入控制面板
Dreamweaver 8的【插入】面板在菜單欄的下方,如圖1-15所示。

圖1-15
【插入】面板包括常用、布局、表單、文本、HTML、應用程序、FIash元素、收藏夾八個標簽,不同功能的按鈕分門別類地放在不同的標簽中。在Dreamweaver 8中,【插入】面板可按菜單和標簽兩種方式顯示。如果需要菜單樣式,可用鼠標右鍵單擊【插入】面板的標簽,在彈出的菜單中執(zhí)行【顯示為菜單】命令,如圖1-16所示,更改后效果如圖1-17所示。如果需要標簽樣式,可單擊【常用】按鈕上的黑色三角形,在下拉菜單中執(zhí)行【顯示為制表符】命令,如圖1-18所示,更改后效果如圖1-19所示。

圖1-16

圖1-17

圖1-18

圖1-19
【插入】面板中將一些相關的按鈕組合成菜單,當按鈕右側有黑色箭頭時,表示其為展開式菜單,如圖1-20所示。

圖1-20
用戶可將自己常用的按鈕定義在【插入】面板中的【收藏夾】分類中。定義【收藏夾】分類中按鈕的操作步驟如下。
(1)選擇【插入】面板中的【收藏夾】分類,用鼠標右鍵單擊面板,在彈出的菜單中執(zhí)行【自定義收藏夾】命令,如圖1-21所示。

圖1-21
(2)彈出【自定義收藏夾對象】對話框。在【可用對象】欄中選擇標簽類別,然后單擊【添加】按鈕 ,將所選的對象添加到【收藏夾對象】欄中。按照相同的方法可以添加多個對象到【收藏夾對象】欄中,如圖1-22所示。

圖1-22
(3)設置完成后單擊【確定】按鈕,返回【插入】面板。【收藏夾】分類的顯示效果如圖1-23所示。

圖1-23
6.更完整的CSS功能
傳統(tǒng)的HTML所提供的樣式及排版功能非常有限,因此,現(xiàn)在復雜的網(wǎng)頁版面主要靠CSS樣式來實現(xiàn)。而CSS樣式表的功能較多,語法比較復雜,需要一種工具軟件對復雜的CSS源代碼進行整理,并適時地提供輔助說明。Dreamweaver 8提供了方便有效的CSS功能。
【屬性】控制面板提供了CSS功能。通過【屬性】控制面板中【樣式】選項的下拉列表,對所選的對象應用樣式或創(chuàng)建和編輯樣式,如圖1-24所示。若某些文字應用了自定義樣式,當用戶調整這些文字的屬性時會自動生成新的CSS樣式。

圖1-24
【頁面屬性】按鈕也提供了CSS功能。單擊【頁面屬性】按鈕,彈出【頁面屬性】對話框,如圖1-25所示。可以在【下劃線樣式】選項的下拉列表中設置超鏈接的樣式,這個設置會自動轉化成CSS樣式,如圖1-26所示。

圖1-25

圖1-26
Dreamweaver 8除了提供如圖1-27所示的【CSS樣式】控制面板外,還提供如圖1-28所示的【CSS屬性】控制面板。【CSS屬性】控制面板可使用戶輕松查看規(guī)則的屬性設置,并可快速修改嵌入在當前文檔或通過附加的樣式表鏈接的CSS 樣式。可編輯的網(wǎng)格使用戶可以更改顯示的屬性值,對選擇所作的更改都將立即應用,用戶可以在操作的同時預覽效果。

圖1-27

圖1-28
1.3.2 增強的源代碼編輯功能
由于網(wǎng)絡的廣泛應用,Dreamweaver 8將數(shù)據(jù)庫技術和網(wǎng)站技術有機地整合在一起。如果用戶只是用于一般的網(wǎng)頁美術設計,代碼編輯功能不是很重要,但如果用戶是程序設計師,需要開發(fā)動態(tài)網(wǎng)站,那么源代碼和程序代碼的編輯就顯得非常重要。
1.源代碼的顯示與查找
在程序代碼視圖中,選擇一段源代碼后單擊鼠標右鍵,在彈出的菜單中執(zhí)行【所選區(qū)域】命令,在彈出的子菜單中可以看到新的菜單命令,包括代碼的縮進顯示、大小寫的轉換等,如圖1-29所示。

圖1-29
為了方便程序員修改代碼,Dreamweaver 8提供了查找與替換功能,讓用戶在代碼中輕松查找和替換要修改的字符串。例如,將代碼中所有名為“style”的CSS樣式替換成名為“style2”的CSS樣式,如圖1-30所示。

圖1-30
2.學習使用代碼
Dreamweaver 8的【參考】控制面板為用戶提供了標記語言、編程語言和 CSS 樣式的快速參考工具,如圖1-31所示。

圖1-31
3.查看和編輯代碼的工具
Dreamweaver 8提供【標簽選擇器】、【標簽編輯器】、【標簽檢查器】和【代碼片段】控制面板幫助用戶查看和編輯代碼。
在【代碼】視圖中單擊鼠標右鍵,在彈出的菜單中執(zhí)行【插入標簽】命令,彈出【標簽選擇器】控制面板,如圖1-32所示。

圖1-32
使用【標簽編輯器】控制面板,可以直接對代碼標簽進行編輯。在【代碼】視圖中單擊鼠標右鍵,在彈出的菜單中執(zhí)行【編輯標簽】命令,彈出【標簽編輯器】對話框。例如在代碼“meta”上單擊鼠標右鍵,即彈出如圖1-33所示的對話框。

圖1-33
利用【標簽檢查器】控制面板可以修改對象的屬性。執(zhí)行菜單【窗口】→【標簽檢查器】命令,啟用【標簽】控制面板,如圖1-34所示。

圖1-34
Dreamweaver 8提供了豐富的系統(tǒng)自帶代碼片斷,可直接應用于文檔中,提高代碼編輯的效率。執(zhí)行菜單【窗口】→【代碼片斷】命令,彈出【代碼片斷】控制面板,如圖1-35所示。

圖1-35
用戶可以將自己編寫的代碼打包,以備今后使用。單擊【文檔】工具欄的【代碼】按鈕 ,切換到【代碼】視圖。單擊【代碼片斷】控制面板下方的【新建代碼片斷文件夾】按鈕
,創(chuàng)建一個新的文件夾,用以保存新建的代碼片斷。然后選擇要打包的備用代碼,啟用【代碼片斷】對話框,輸入代碼的名稱和描述信息,選擇代碼片斷類型和預覽類型,單擊【確定】按鈕完成設置,效果如圖1-36所示。

圖1-36
【代碼片斷】對話框如圖1-37所示,啟用【代碼片斷】對話框有以下幾種方法。

圖1-37
◎ 用鼠標右鍵單擊選定的代碼,在彈出的菜單中執(zhí)行【創(chuàng)建新代碼片斷】命令。
◎ 單擊【代碼片斷】控制面板下方的【新建代碼片斷】按鈕 創(chuàng)建新的代碼片斷。
【名稱】選項:可以在文本框中輸入代碼片斷的名稱。代碼片斷名稱不能包含斜線(/ 或 \)、特殊字符或雙引號等無效的字符。
【描述】選項:為可選項,在文本框中輸入代碼片斷的描述性文字。描述性文字可以使其他小組成員更易于使用代碼片斷。
【代碼片斷類型】選項組:包含【環(huán)繞選定內容】和【插入塊】兩個單選項。如果選擇【環(huán)繞選定內容】單選項,則將代碼添加到【前插入】或【后插入】文本框中。【前插入】文本框表示在當前選定內容之前輸入或粘貼需要插入的代碼,【后插入】文本框表示在當前選定內容之后輸入或粘貼需要插入的代碼;如果選擇【插入塊】單選項,則通過輸入或粘貼用戶的代碼來插入。
【預覽類型】選項組:包含【設計】和【代碼】兩個單選項。
1.3.3 動態(tài)數(shù)據(jù)庫開發(fā)
Dreamweaver 8在開發(fā)動態(tài)數(shù)據(jù)庫網(wǎng)站方面并沒有太大的變化,它提供的服務器行為支持ColdFusion、ASP、ASP.NET、JSP 和 PHP 文檔類型,在ASP.NET和ColdFusion方面做了改進,重要的服務器行為方面并沒有變化。
1.在ASP.NET的支持方面加強的功能
◎ 支持最新的ASP.NET 1.1版本。
◎ 使用.NET的核心技術,加快了ASP.NET的DataSets、DataGrids、DataLists對象對復雜數(shù)據(jù)的顯示和處理速度。
◎ 支持自定義標簽。
2.在JSP的支持方面加強的功能
◎ 支持JSP標簽庫。
◎ 完整地整合JavaBean,在服務器行為控制面板可以顯示JavaBean所有的方法和屬性。
3.在ColdFusion的支持方面加強的功能
◎ 支持最新的ColdFusion 6.1版本。
◎ 支持實時服務器除錯。
◎ 內建ColdFusion MX Developer,支援ColdFusion Component。
◎ 最佳的ColdFusion工作流程,包括程序代碼片段的快捷鍵、無間斷的文檔編輯和自動檢查。
1.3.4 新增功能
Dreamweaver 8的新增功能如下:
◎ 縮放工具和輔助線
◎ 可視化 XML 數(shù)據(jù)綁定
◎ 新的 CSS 樣式面板
◎ CSS 布局的可視化
◎ 代碼折疊
◎ “編碼”工具欄
◎ 后臺文件傳輸
◎ “插入 FIash 視頻”命令
1.4 Dreamweaver 8的工作界面
Dreamweaver 8的工作區(qū)將多個文檔集中到一個窗口中,不僅降低了系統(tǒng)資源的占用,還可以更加方便地操作文檔。Dreamweaver 8的工作窗口由五部分組成,分別是【插入】控制面板、【文檔】工具欄、【文檔】窗口、控制面板組和【屬性】控制面板,如圖1-38所示。

圖1-38
1.4.1 插入面板
【插入】面板包含用于將各種類型的網(wǎng)頁元素插入到文檔中的按鈕,如圖像按鈕、表格按鈕和層按鈕等。每個按鈕都是一段 HTML 代碼,允許用戶在插入時設置不同的屬性。【插入】面板如圖1-39所示。

圖1-39
1.4.2 文檔工具欄
【文檔】工具欄包含提供各種文檔窗口視圖的按鈕,如【代碼】視圖按鈕 、【拆分】視圖按鈕
和【設計】視圖按鈕
。還包含各種查看按鈕和一些常用操作按鈕,如【在瀏覽器中預覽/調試】按鈕
等,如圖1-40所示。

圖1-40
1.4.3 文檔窗口
【文檔】窗口顯示用戶當前創(chuàng)建和編輯的文檔內容,如圖1-41所示。

圖1-41
1.4.4 控制面板組
控制面板組是分組在某個標題下面的相關控制面板的集合。若要展開一個控制面板組,可以單擊組名稱左側的展開箭頭 ,還可以從【窗口】菜單中選擇要展開的面板組或面板。若要取消停靠一個控制面板組,可以拖動該組標題條左側的手柄,如圖1-42所示。

圖1-42
1.4.5 屬性控制面板
【屬性】控制面板又稱為屬性檢查器,用于查看和更改所選網(wǎng)頁元素或文本的各種屬性,如圖1-43所示。每種網(wǎng)頁元素具有不同的屬性,因此【屬性】控制面板中顯示的內容會因所選對象的不同而變化。

圖1-43
1.5 創(chuàng)建網(wǎng)站框架
所謂站點,可以看作是一系列文檔的組合,這些文檔通過各種鏈接建立邏輯關聯(lián)。用戶在建立網(wǎng)站前必須要建立站點,修改某網(wǎng)頁內容時,也必須打開站點,然后修改站點內的網(wǎng)頁。在Dreamweaver 中,站點一詞是下列任意一項的簡稱。
◎ Web 站點:從訪問者的角度來看,Web 站點是一組位于服務器上的網(wǎng)頁,使用 Web 瀏覽器訪問該站點的訪問者可以對其進行瀏覽。
◎ 遠程站點:從創(chuàng)作者的角度來看,遠程站點服務器上組成 Web 站點的文件。
◎ 本地站點:與遠程站點上的文件對應的本地磁盤上的文件。通常,先在本地磁盤上編輯文件,然后將它們上傳到遠程站點服務器上。
◎ Dreamweaver 站點定義:本地站點的一組定義特性,以及有關本地站點和遠程站點對應方式的信息。
在做任何工作之前應該制定工作計劃并畫出工作流程,建立網(wǎng)站也是如此。在動手建立站點之前,需要先調查研究,記錄客戶所需的服務,然后以此規(guī)劃出網(wǎng)站的功能結構圖(即設計草圖)及其設計風格以體現(xiàn)站點的主題。另外,還要規(guī)劃站點導航系統(tǒng),避免瀏覽者在網(wǎng)頁上迷失方向,找不到要瀏覽的內容。
1.5.1 站點管理器
站點管理器的主要功能包括新建站點、編輯站點、復制站點、刪除站點以及導入或導出站點。若要管理站點,必須打開【管理站點】對話框。
啟用【管理站點】對話框有以下幾種方法。
◎ 執(zhí)行菜單【站點】→【管理站點】命令。
◎ 執(zhí)行菜單【窗口】→【文件】命令,啟用【文件】控制面板,選中【文件】選項卡,如圖1-44所示。單擊控制面板左側的下拉列表,執(zhí)行【管理站點】命令,如圖1-45所示。

圖1-44

圖1-45
在【管理站點】對話框中,通過【新建】、【編輯】、【復制】和【刪除】按鈕,可以新建一個站點、修改選擇的站點、復制選擇的站點、刪除選擇的站點。通過對話框的【導出】、【導入】按鈕,可以將站點導出為 XML 文件,然后再將其導入到 Dreamweaver。這樣,用戶就可以在不同的計算機和產品版本之間移動站點,或者與其他用戶共享,如圖1-46所示。

圖1-46
在【管理站點】對話框中,選擇一個具體的站點,然后單擊【完成】按鈕,就會在【文件】控制面板的【文件】選項卡中出現(xiàn)站點管理器的縮略圖。單擊面板右側的【展開以顯示本地和遠端站點】按鈕 ,展開站點管理器,如圖1-47所示。再單擊按鈕
,又回到站點管理器的縮略圖。

圖1-47
站點管理器由四部分組成,每部分的主要功能如下。
下拉菜單:包括對站點進行管理的所有命令。
工具欄:包括查看遠程站點、測試服務器站點、站點地圖,刷新站點,在本地機和遠程服務器間上傳或下載站點,在本地機和遠程服務器間存回或取出文件,連接到遠端的Web服務器主機,選擇和修改所有站點等功能。
左側窗口:顯示站點地圖或遠程站點與測試服務器站點的文件。
右側窗口:顯示本地機所定義的站點文件和文件夾。
1.5.2 創(chuàng)建文件夾
建立站點前,要先在站點管理器中規(guī)劃站點文件夾。
新建文件夾的具體操作步驟如下。
(1)在站點管理器的右側窗口中單擊選擇站點。
(2)通過以下幾種方法新建文件夾。
◎ 執(zhí)行菜單【文件】→【新建文件夾】命令。
◎ 用鼠標右鍵單擊站點,在彈出的菜單中執(zhí)行【新建文件夾】命令。
(3)輸入新文件夾的名稱。
一般情況下,若站點不復雜,可直接將網(wǎng)頁存放在站點的根目錄下,并在站點根目錄中,按照資源的種類建立不同的文件夾存放不同的資源。例如,image文件夾存放站點中的圖像文件,media文件夾存放站點的多媒體文件等。若站點復雜,需要根據(jù)實現(xiàn)不同功能的板塊,在站點根目錄中,按板塊創(chuàng)建子文件夾存放不同的網(wǎng)頁,這樣可以方便網(wǎng)站設計者修改網(wǎng)站。
1.5.3 定義新站點
建立好站點文件夾后就可定義新站點了。在Dreamweaver 8中,站點通常包含兩部分,本地站點和遠程站點。本地站點是本地計算機上的一組文件,遠程站點是遠程 Web 服務器上的一個位置。用戶將本地站點中的文件發(fā)布到網(wǎng)絡上的遠程站點,使公眾可以訪問它們。在Dreamweaver中創(chuàng)建 Web站點,通常先在本地磁盤上創(chuàng)建本地站點,然后創(chuàng)建遠程站點,再將這些網(wǎng)頁的副本上傳到一個遠程Web 服務器,使公眾可以訪問它們。本節(jié)只介紹如何創(chuàng)建本地站點。
1.創(chuàng)建本地站點的步驟
(1)執(zhí)行菜單【站點】→【管理站點】命令,啟用【管理站點】對話框,如圖1-48所示。

圖1-48
(2)在對話框中單擊【新建】按鈕,在彈出的菜單中執(zhí)行菜單【站點】命令,彈出【未命名站1的站點定義為】對話框。在對話框中,通過【基本】選項卡建立不同的站點。對于熟練的設計者而言,通常在對話框【高級】選項卡的【本地信息】分類中,根據(jù)需要設置站點。如圖1-49所示。

圖1-49
2.本地站點主要選項的作用
【本地信息】選項:表示定義或修改本地站點。
【站點名稱】選項:在文本框中輸入用戶自定的站點名稱。
【本地根文件夾】選項:在文本框中輸入本地磁盤中存儲站點文件、模板和庫項目的文件夾的名稱,或者單擊文件夾圖標 查找到該文件夾。
【自動刷新本地文件列表】選項:指定每次將文件復制到本地站點時,Dreamweaver 是否自動刷新本地文件列表。若沒有勾選此復選框,則將文件復制到本地站點時不會自動刷新本地文件列表,但可通過單擊【文檔】工具欄中的【刷新設計視圖】按鈕手動刷新面板。
【默認圖像文件夾】選項:在文本框中輸入此站點的默認圖像文件夾的路徑,或者單擊文件夾圖標 查找到該文件夾。例如,將非站點圖像添加到網(wǎng)頁中時,圖像會自動添加到當前站點的默認圖像文件夾中。
【區(qū)分大小寫的鏈接】選項:勾選此復選框,則使用區(qū)分大小寫的鏈接進行檢查。
【啟用緩存】選項:指定是否創(chuàng)建本地緩存以提高鏈接和站點管理任務的速度。若勾選此復選框,則創(chuàng)建本地緩存。
1.5.4 創(chuàng)建和保存網(wǎng)頁
創(chuàng)建站點后,需要創(chuàng)建網(wǎng)頁來組織要展示的內容。合理的網(wǎng)頁名稱非常重要,一般網(wǎng)頁文件名稱應容易理解,能反映網(wǎng)頁的內容。
在網(wǎng)站中有一個特殊的網(wǎng)頁是首頁,每個網(wǎng)站必須有一個首頁。每當在IE瀏覽器的地址欄中輸入網(wǎng)站地址,如在IE瀏覽器的地址欄中輸入www.sina.com.cn時會自動打開新浪網(wǎng)的首頁。一般情況下,首頁的文件名為index.htm、index.html、index.asp、default.asp、default.htm或default.html。
在標準的Dreamweaver環(huán)境下,建立和保存網(wǎng)頁的操作步驟如下。
(1)執(zhí)行菜單【文件】→【新建】命令,啟用【新建文檔】對話框。此時,【常規(guī)】選項卡已被選定,在【類別】選項框中選擇【基本頁】選項,在【基本頁】選項框中選擇【HTML】選項,創(chuàng)建空白網(wǎng)頁,設置如圖1-50所示。

圖1-50
(2)設置完成后,單擊【創(chuàng)建】按鈕,彈出【文檔】窗口,新文檔在該窗口中打開。根據(jù)需要在【文檔】窗口中選擇不同的視圖設計網(wǎng)頁,如圖1-51所示。

圖1-51
【文檔】窗口中有三種視圖方式,三種視圖方式的作用如下。
【代碼】視圖:對于有編程經(jīng)驗的網(wǎng)頁設計用戶,可在【代碼】視圖中查看、修改和編寫網(wǎng)頁代碼,以實現(xiàn)特殊的網(wǎng)頁效果,【代碼】視圖的效果如圖1-52所示。

圖1-52
【設計】視圖:以所見即所得的方式顯示所有網(wǎng)頁元素,【設計】視圖的效果如圖1-53所示。

圖1-53
【拆分】視圖:將文檔窗口分為上下兩部分,上部分是代碼部分,顯示代碼;下部分是設計部分,顯示網(wǎng)頁元素及其在頁面中的布局。在此視圖中,網(wǎng)頁設計用戶通過在設計部分單擊網(wǎng)頁元素的方式,快速地定位到要修改的網(wǎng)頁元素代碼的位置,進行代碼的修改,或在【屬性】面板中修改網(wǎng)頁元素的屬性。【拆分】視圖的效果如圖1-54所示。

圖1-54
(3)設計完成后,執(zhí)行菜單【文件】→【保存】命令,彈出【另存為】對話框。在【文件名】選項的文本框中輸入網(wǎng)頁的名稱,如圖1-55所示,單擊【保存】按鈕,將該文檔保存在站點文件夾中。

圖1-55
1.5.5 在站點地圖中創(chuàng)建網(wǎng)頁
在站點地圖中,各網(wǎng)頁文件間的鏈接關系以樹狀的形式顯示出來。站點地圖是理想的站點結構布局工具,利用它用戶可以快速地設置整個站點結構,然后創(chuàng)建站點地圖的圖形圖像。但是,站點地圖僅適用于本地站點。對于遠程站點,必須將其站點內容復制到本地磁盤上的一個文件夾中,并設置為本地站點后才能查看和使用站點地圖。站點地圖的界面如圖1-56所示。

圖1-56
在站點地圖中,可以選擇網(wǎng)頁、打開網(wǎng)頁進行編輯、向站點添加新頁、創(chuàng)建文件之間的鏈接以及更改網(wǎng)頁標題等操作。
在站點地圖中新建網(wǎng)頁的具體操作步驟如下。
(1)在站點地圖中用鼠標右鍵單擊主頁或主頁下的某個網(wǎng)頁文件,在彈出的菜單中執(zhí)行【鏈接到新文件】命令,如圖1-57所示。

圖1-57
(2)在打開的【鏈接到新文件】對話框中填寫新文件的名稱、新文件的標題以及原文件的鏈接文字信息,如圖1-58所示。

圖1-58
(3)單擊【確定】按鈕,關閉【鏈接到新文件】對話框。【站點管理器】文件列表窗口會自動添加一個鏈接到jieshao.html的空白網(wǎng)頁Iianxi.html,如圖1-59所示。

圖1-59
(4)打開網(wǎng)頁jieshao.html,會看到文件中有一個鏈接到Iianxi.html網(wǎng)頁的鏈接文字“聯(lián)系我們”,如圖1-60所示。

圖1-60
(5)如果想改變新文件Iianxi.html在站點中的位置,還可以在【站點管理器】文件列表窗口中,按住鼠標左鍵將Iianxi.html拖動到其他的文件夾中。如圖1-61所示,將Iianxi.html拖動到“tupian”文件夾中。

圖1-61
這時,系統(tǒng)會彈出【更新文件】對話框,詢問是否更新文件中的鏈接,如圖1-62所示。單擊【更新】按鈕,完成鏈接更新。

圖1-62
1.5.6 在文件列表中創(chuàng)建網(wǎng)頁
除了可以在站點地圖中新建網(wǎng)頁外,還可以在文件列表窗口中新建網(wǎng)頁,具體操作步驟如下。
(1)在文件列表窗口的“tupian”文件夾上單擊鼠標右鍵,在彈出的快捷菜單中執(zhí)行【新建文件】命令,在“tupian”文件夾內添加一個新網(wǎng)頁,將其命名為“fengjing.html”,如圖1-63所示。

圖1-63
(2)在站點地圖中,用鼠標右鍵單擊jieshao.html文件,在彈出的菜單中執(zhí)行【鏈接到已有文件】命令,如圖1-64所示。

圖1-64
(3)彈出【選定HTML文件】對話框,在對話框中選擇剛建立的fengjing.html文件,如圖1-65所示,單擊【確定】按鈕,將其與jieshao.html文件鏈接,效果如圖1-66所示。

圖1-65

圖1-66
完成操作后, jieshao.html文件中出現(xiàn)一個與fengjing.html文件鏈接的鏈接文本,如圖1-67所示。

圖1-67
步驟(2)中建立的鏈接還可以在站點地圖中實現(xiàn)。在站點地圖中,將鼠標放在jieshao.html文件的【鏈接】圖標 上,按住鼠標左鍵拖曳圖標到右側文件列表的fengjing.html文件中,如圖1-68所示。

圖1-68
完成操作后,將jieshao.html文件與fengjing.html文件建立鏈接。在jieshao.html文件中,同樣會出現(xiàn)如圖1-67所示的鏈接文本。
1.6 管理站點文件和文件夾
前面介紹了在站點文件夾列表中創(chuàng)建文件和文件夾的方法。當站點結構發(fā)生變化時,還需要對站點文件和文件夾進行移動和重命名等操作。下面介紹如何在【文件】控制面板中的站點文件夾列表中對站點文件和文件夾進行管理。
1.6.1 重命名文件和文件夾
修改文件或文件夾名稱的具體操作步驟如下。
(1)執(zhí)行菜單【窗口】→【文件】命令,啟用【文件】控制面板,在其中選擇要重命名的文件或文件夾。
(2)通過以下幾種方法激活文件或文件夾的名稱。
◎ 單擊文件名,稍停片刻,再次單擊文件名。
◎ 用鼠標右鍵單擊文件或文件夾圖標,在彈出的菜單中執(zhí)行【編輯】→【重命名】命令。
(3)輸入新名稱,按【Enter】鍵。
1.6.2 移動文件和文件夾
移動文件或文件夾的具體操作步驟如下。
(1)執(zhí)行菜單【窗口】→【文件】命令,啟用【文件】控制面板,在其中選擇要移動的文件或文件夾。
(2)通過以下幾種方法移動文件或文件夾。
◎ 復制該文件或文件夾,然后粘貼在新位置。
◎ 將該文件或文件夾直接拖曳到新位置。
(3)【文件】控制面板會自動刷新,可以看到該文件或文件夾在新位置上。
1.6.3 刪除文件和文件夾
刪除文件或文件夾有以下幾種方法。
◎ 執(zhí)行菜單【窗口】→【文件】命令,啟用【文件】控制面板,在其中選擇要刪除的文件或文件夾,按【Delete】鍵進行刪除。
◎ 用鼠標右鍵單擊要刪除的文件或文件夾,從彈出的菜單中執(zhí)行【編輯】→【刪除】命令。
1.7 管理站點
在建立站點后,可以對站點進行打開、修改、復制、刪除、導入、導出等操作。
1.7.1 打開站點
當要修改某個網(wǎng)站的內容時,首先要打開站點。打開站點就是在各站點間進行切換,打開站點的具體操作步驟如下。
(1)啟動Dreamweaver 8。
(2)執(zhí)行菜單【窗口】→【文件】命令,啟用【文件】控制面板。在其中選擇要打開的站點名,如圖1-69所示。打開后的站點,如圖1-70所示。

圖1-69

圖1-70
1.7.2 編輯站點
有時用戶需要修改站點的某些設置,就需要編輯站點。例如,修改站點默認的圖像文件夾路徑,其具體的操作步驟如下。
(1)執(zhí)行菜單【站點】→【管理站點】命令,啟用【管理站點】對話框。
(2)在對話框中,選擇要編輯的站點名,單擊【編輯】按鈕,彈出【站點定義為】對話框。根據(jù)需要進行修改,如圖1-71所示,設置完成,單擊【確定】按鈕回到【管理站點】對話框。

圖1-71
(3)如果不需要修改其他站點,可單擊【完成】按鈕關閉【管理站點】對話框。
1.7.3 復制站點
復制站點可省去重復建立多個結構相同站點的操作,從而提高工作效率。在【管理站點】對話框中可以復制站點,其具體操作步驟如下。
(1)在【管理站點】對話框左側的站點列表中選擇要復制的站點,單擊【復制】按鈕進行復制。
(2)用鼠標雙擊新復制的站點,彈出的【站點定義為】對話框中更改新站點的名稱。
1.7.4 刪除站點
刪除站點只是刪除Dreamweaver同本地站點間的關系,而本地站點包含的文件和文件夾仍然保存在磁盤原來的位置上。換句話說,刪除站點后,雖然站點文件夾保存在計算機中,但在Dreamweaver中已經(jīng)不存在此站點。例如,按下列步驟刪除站點后,該站點的名稱在【管理站點】對話框中就不存在了。
在【管理站點】對話框中刪除站點的具體操作步驟如下。
(1)在【管理站點】對話框左側的站點列表中選擇要刪除的站點。
(2)單擊【刪除】按鈕即可刪除選擇的站點。
1.7.5 導入和導出站點
如果在計算機之間移動站點,或者與其他用戶共同設計站點,可通過 Dreamweaver的導入和導出站點功能實現(xiàn)。導出站點功能是將站點導出為.ste文件,然后在其他計算機上將其導入到Dreamweaver中。
1.導出站點
(1)執(zhí)行菜單【站點】→【管理站點】命令,啟用【管理站點】對話框。在對話框中,選擇要導出的站點,單擊【導出】按鈕,彈出【導出站點】對話框。
(2)在該對話框中瀏覽并選擇保存該站點的路徑,如圖1-72所示。單擊【保存】按鈕,保存擴展名為.ste的文件。

圖1-72
(3)單擊【完成】按鈕,關閉【管理站點】對話框,完成導出站點的設置。
2.導入站點
(1)執(zhí)行菜單【站點】→【管理站點】命令,啟用【管理站點】對話框。
(2)在對話框中,單擊【導入】按鈕,彈出【導入站點】對話框,瀏覽并選定要導入的站點,如圖1-73所示。單擊【打開】按鈕,站點被導入,如圖1-74所示。

圖1-73

圖1-74
(3)單擊【完成】按鈕,關閉【管理站點】對話框,完成導入站點的設置。
1.8 設置頁面屬性
1.8.1設置網(wǎng)頁的標題
HTML 頁面的標題可以幫助站點瀏覽者理解所查看網(wǎng)頁的內容,并在瀏覽者的歷史記錄和書簽列表中標識頁面。文檔的文件名是通過保存文件命令保存的網(wǎng)頁文件,而頁面標題是瀏覽者瀏覽網(wǎng)頁時瀏覽器標題欄中顯示的信息。
更改頁面標題的具體操作步驟如下。
(1)執(zhí)行菜單【修改】→【頁面屬性】命令,啟用【頁面屬性】對話框。
(2)在對話框的【分類】選項框中,選中【標題/編碼】選項。在對話框右側【標題】選項的文本框中,輸入頁面標題,如圖1-75所示,單擊【確定】按鈕,完成設置。

圖1-75
1.8.2 設置網(wǎng)頁的默認格式
當制作新網(wǎng)頁時,頁面都有一些默認的屬性,比如網(wǎng)頁的標題、網(wǎng)頁邊界、文字編碼、文字顏色、超鏈接的顏色等。若修改網(wǎng)頁的頁面屬性,可執(zhí)行菜單【修改】→【頁面屬性】命令,啟用【頁面屬性】對話框,如圖1-76所示。對話框中各選項的作用如下。

圖1-76
【外觀】選項組:設置網(wǎng)頁背景色、背景圖像、網(wǎng)頁文字的字體、字號、顏色和網(wǎng)頁邊界。
【鏈接】選項組:設置鏈接文字的格式。
【標題】選項組:為標題1至標題6指定標題標簽的字號和顏色。
【標題/編碼】選項組:設置網(wǎng)頁的標題和網(wǎng)頁的文字編碼。一般情況下,將網(wǎng)頁的文字編碼設定為簡體中文(GB2312)編碼。
【跟蹤圖像】選項組:一般在復制網(wǎng)頁時,若想使原網(wǎng)頁的圖像作為復制網(wǎng)頁的參考圖像,可使用跟蹤圖像的方式實現(xiàn)。跟蹤圖像僅作為復制網(wǎng)頁的設計參考圖像,在瀏覽器中并不顯示出來。
1.9 網(wǎng)頁文件頭設置
網(wǎng)頁的所有元素都由HTML代碼標記表示,一個完整的HTML網(wǎng)頁文件包含head和body兩個部分,如圖1-77所示。其中head部分包含許多在網(wǎng)頁中不可見的頭信息,例如語言編碼、搜索關鍵字、版權聲明、作者信息、網(wǎng)頁描述等,均在meta標簽內。body部分包含的則是網(wǎng)頁中可見的內容。

圖1-77
在Dreamweaver 8中,網(wǎng)頁文件頭信息大部分都可在meta標簽中設置。執(zhí)行菜單【插入】→【HTML】→【文件頭標簽】→【Meta】命令,啟用【META】對話框,如圖1-78所示。

圖1-78
對話框中各選項的作用如下。
【屬性】選項:包括“名稱”和“HTTP-equivalent”兩個選項。設定關鍵字、描述信息時可選擇“名稱”選項;設定定時刷新網(wǎng)頁時,選擇“HTTP-equivalent”選項。
【值】選項:表示meta標簽的信息類型。有些值是已經(jīng)定義好的,如關鍵字的值為keywords,刷新的值為refresh等。
【內容】選項:表示meta標簽的實際信息。如設置關鍵字時輸入具體的關鍵字信息,設置網(wǎng)頁的刷新間隔時輸入具體的時間。
下面介紹如何設置網(wǎng)頁的文件頭信息,以及它們所起的作用。
1.9.1 插入搜索關鍵字
在WWW上通過搜索引擎查找資料時,搜索引擎自動讀取網(wǎng)頁中meta標簽的內容。所以網(wǎng)頁中的搜索關鍵字非常重要,它可以間接地宣傳網(wǎng)站,提高訪問量。但搜索關鍵字并不是字數(shù)越多越好,因為有些搜索引擎限制索引的關鍵字或字符的數(shù)目,當超過了限制的數(shù)目時,它將忽略所有的關鍵字,所以最好只使用幾個精選的關鍵字。一般情況下,關鍵字是對網(wǎng)頁的主題、內容、風格或作者等內容的概括。
設置網(wǎng)頁搜索關鍵字的具體操作步驟如下。
(1)選中文檔窗口中的【代碼】視圖,將鼠標光標放在<head>標簽中,執(zhí)行菜單【插入】→【HTML】→【文件頭標簽】→【關鍵字】命令,啟用【關鍵字】對話框,如圖1-79所示。

圖1-79
(2)在【關鍵字】對話框中輸入相應的中文或英文關鍵字,但注意關鍵字間要用半角的逗號分隔。例如,設定關鍵字為“瀏覽”時,【關鍵字】對話框的設置如圖1-80所示,單擊【確定】按鈕,完成設置。

圖1-80
(3)此時,觀察【代碼】視圖,發(fā)現(xiàn)<head>標簽內多了下述代碼。
<meta name="keywords" content="瀏覽" />
同樣,還可以通過meta標簽實現(xiàn)設置搜索關鍵字,具體操作步驟如下。
執(zhí)行菜單【插入】→【HTML】→【文件頭標簽】→【Meta】命令,啟用【META】對話框。在【屬性】選項的下拉列表中選擇“名稱”,在【值】選項的文本框中輸入“keywords”,在【內容】選項的文本框中輸入關鍵字信息,如圖1-81所示。設置完成后,單擊【確定】按鈕,在【代碼】視圖中可查看相應的html標記。

圖1-81
1.9.2 插入作者和版權信息
要設置網(wǎng)頁的作者和版權信息,可執(zhí)行菜單【插入】→【HTML】→【文件頭標簽】→【Meta】命令,啟用【META】對話框。在【值】選項的文本框中輸入“/x.Copyright”,在【內容】選項的文本框中輸入作者名稱和版權信息,如圖1-82所示,設置完成后單擊【確定】按鈕。

圖1-82
此時,在【代碼】視圖中的<head>標簽內可以查看相應的html標記。
<meta name="/x.Copyright" content="作者:汪慶洋 版權歸 齊市一中所有" />
1.9.3 設置刷新時間
要指定載入頁面刷新或者轉到其他頁面的時間,可設置文件頭部的刷新時間項,具體操作步驟如下。
(1)選中文檔窗口中的【代碼】視圖,將鼠標光標放在<head>標簽中,執(zhí)行菜單【插入】→【HTML】→【文件頭標簽】→【刷新】命令,啟用【刷新】對話框,如圖1-83所示。

圖1-83
【刷新】對話框中各選項的作用如下。
【延遲】選項:設置瀏覽器刷新頁面之前需要等待的時間,以秒為單位。若要瀏覽器在完成載入后立即刷新頁面,則在文本框中輸入“ 0”。
【操作】選項組:指定在規(guī)定的延遲時間后,瀏覽器是轉到另一個 URL 還是刷新當前頁面。若要打開另一個 URL 而不刷新當前頁面,應單擊【瀏覽】按鈕,選擇要載入的頁面。
如果想顯示在線人員列表或浮動框架中的動態(tài)文檔,那么可以指定瀏覽器定時刷新當前打開網(wǎng)頁。因為它可以實時地反映在線或離線用戶,以及動態(tài)文檔實時改變的信息。
(2)在【刷新】對話框中設置刷新時間。
例如,要將網(wǎng)頁設定為每隔1分鐘自動刷新,則【刷新】對話框的設置如圖1-84所示。

圖1-84
此時,在【代碼】視圖中的<head>標簽內可以查看相應的html標記。
<meta http-equiv="refresh" content="60" />
同樣,還可以通過meta標簽實現(xiàn)對刷新時間的設置,具體設置如圖1-85所示。

圖1-85
如果想設置瀏覽引導主頁10秒后,自動打開主頁,可在引導主頁的【刷新】對話框中進行如圖1-86所示的設置。

圖1-86
1.9.4 設置說明信息
搜索引擎也可通過讀取meta 標簽的說明內容來查找信息,說明信息主要是設計者對網(wǎng)頁內容的詳細說明,而關鍵字可以讓搜索引擎盡快搜索到網(wǎng)頁。設置網(wǎng)頁說明信息的具體操作步驟如下。
(1)選中文檔窗口中的【代碼】視圖,將鼠標光標放在<head>標簽中,執(zhí)行菜單【插入】→【HTML】→【文件頭標簽】→【說明】命令,啟用【說明】對話框。
(2)在【說明】對話框中設置說明信息。
例如,在網(wǎng)頁中設置為設計者提供“利用ASP腳本,按用戶需求進行查詢”的說明信息,對話框中的設置如圖1-87所示。

圖1-87
此時,在【代碼】視圖中的<head>標簽內可以查看相應的html標記。
<meta name="description" content="利用ASP腳本,按用戶需求進行查詢" />
同樣,還可以通過meta標簽實現(xiàn),具體設置如圖1-88所示。

圖1-88
1.9.5 設置某頁面中所有鏈接的基準鏈接
基準鏈接類似于相對路徑,若要設置網(wǎng)頁文檔中所有鏈接都以某個鏈接為基準,可添加一個基本鏈接,但其他網(wǎng)頁的鏈接與此頁的基準鏈接無關。設置基準鏈接的具體操作如下。
(1)選中文檔窗口中的【代碼】視圖,將鼠標光標放在<head>標簽中,執(zhí)行菜單【插入】→【HTML】→【文件頭標簽】→【基礎】命令,彈出【基礎】對話框。
(2)在【基礎】對話框中設置【Href】和【目標】兩個選項。這兩個選項的作用如下。
【Href】選項:設置頁面中所有鏈接的基準鏈接。
【目標】選項:指定所有鏈接的文檔應在哪個框架或窗口中打開。
例如,當前頁面中的所有鏈接都是以“http://www.sina.com”為基準鏈接,而不是本服務器的URL地址,則【基礎】對話框中的設置如圖1-89所示。

圖1-89
此時,在【代碼】視圖中的<head>標簽內可以查看相應的html標記。
<base target="空白(_B)" />
一般情況下,在網(wǎng)頁的頭部插入基準鏈接不帶有普遍性,只是針對個別網(wǎng)頁而言。當個別網(wǎng)頁需要臨時改變服務器域名和IP地址時,才在其文件頭部插入基準鏈接。當需要大量、長久地改變鏈接時,最好在站點管理器中完成。
1.9.6 設置當前文件與其他文件的關聯(lián)性
<head> 部分的<Iink >標簽可以定義當前文檔與其他文件之間的關系,它與 <body> 部分中文檔之間的 HTML 鏈接是不一樣的,其具體操作步驟如下。
(1)選中文檔窗口中的【代碼】視圖,將鼠標光標放在<head>標簽中,執(zhí)行菜單【插入】→【HTML】→【文件頭標簽】→【鏈接】命令,彈出【鏈接】對話框,如圖1-90所示。

圖1-90
(2)在【鏈接】對話框中設置相應的選項。對話框中各選項的作用如下。
【Href】選項:用于定義與當前文件相關聯(lián)文件的 URL。它并不表示通常HTML 意義上的鏈接文件,鏈接元素中指定的關系更復雜。
【ID】選項:為鏈接指定一個唯一的標識符。
【標題】選項:用于描述關系。該屬性與鏈接的樣式表有特別的關系。
【Rel】選項:指定當前文檔與【Href】選項中文檔之間的關系。其值包括替代、樣式表、開始、下一步、上一步、內容、索引、術語、版權、章、節(jié)、小節(jié)、附錄、幫助和書簽。若要指定多個關系,則用空格將各個值隔開。
【Rev】選項:指定當前文檔與 【Href】選項中文檔之間的相反關系,與【Rel】選項相對。其值與【Rel】選項的相同。
1.10 設置鏈接文字的顏色
案例效果:Ch01\效果\鏈接文字的顏色\ index.htm。
制作要點:使用CSS樣式為文字添加鏈接顏色。
01 按快捷鍵【Ctrl+O】,打開光盤中的“Ch01\素材\鏈接文字的顏色\ index.htm”文件,如圖1-91所示。

圖1-91
02 執(zhí)行菜單【窗口】→【CSS樣式】命令,彈出【CSS樣式】面板,如圖1-92所示。

圖1-92
03單擊【CSS樣式】面板下方的【新建CSS規(guī)則】按鈕 ,彈出【新建CSS規(guī)則】對話框,如圖1-93所示。在【選擇器類型】選項組中選擇【高級】單選項,在【選擇器】選項的下拉列表中選擇【a:Iink】,在【定義在】選項組中選擇【僅對該文檔】單選項,單擊【確定】按扭,彈出【a:Iink的CSS規(guī)則定義】對話框。

圖1-93
04在對話框中選擇【分類】選項框中的【類型】選項,如圖1-94所示。在【大小】選項的數(shù)值框中輸入“25”,將【顏色】選項設為“白色(#FFFFFF)”,在【修飾】選項組中勾選【無】復選框,單擊【確定】按鈕,完成CSS樣式的設置。

圖1-94
05單擊【CSS樣式】面板下方的【新建CSS規(guī)則】按鈕 ,彈出【新建CSS規(guī)則】對話框,如圖1-95所示。在【選擇器類型】選項組中選擇【高級】單選項,在【選擇器】選項的下拉列表中選擇【a:visited】,在【定義在】選項組中選擇【僅對該文檔】單選項,單擊【確定】按扭,彈出【a:visited 的CSS規(guī)則定義】對話框。參照步驟(4)的方法在對話框中進行設置,如圖1-96所示,單擊【確定】按鈕,完成CSS樣式的設置。

圖1-95

圖1-96
06 單擊【CSS樣式】面板下方的【新建CSS規(guī)則】按鈕 ,彈出【新建CSS規(guī)則】對話框,如圖1-97所示。在【選擇器類型】選項組中選擇【高級】單選項,在【選擇器】選項的下拉列表中選擇【a:hover】,在【定義在】選項組中選擇【僅對該文檔】單選項,單擊【確定】按扭,彈出【a:hover 的CSS規(guī)則定義】對話框。

圖1-97
07 在對話框中選擇【分類】選項框中的【類型】選項,如圖1-98所示。在【大小】選項的下拉列表中選擇“24”,在【樣式】選項的下拉列表中選擇【斜體】,將【顏色】選項設為“綠色(#CCFF00)”,在【修飾】選項組中勾選【下劃線】復選框,單擊【確定】按鈕,完成CSS樣式的設置。

圖1-98
08 單擊【CSS樣式】面板下方的【新建CSS規(guī)則】按鈕 ,彈出【新建CSS規(guī)則】對話框,如圖1-99所示。在【選擇器類型】選項組中選擇【高級】單選項,在【選擇器】選項的下拉列表中選擇【a:active】,在【定義在】選項中選擇【僅對該文檔】單選項,單擊【確定】按扭,彈出【a:active 的CSS規(guī)則定義】對話框。

圖1-99
09在對話框中將【顏色】選項設為“綠色(#BED5A9)”,在【修飾】選項組中勾選【下劃線】復選框,如圖1-100所示,單擊【確定】按鈕,完成CSS樣式的設置。

圖1-100
10 選中文字“藻類植物”,如圖1-101所示。執(zhí)行菜單【窗口】→【屬性】命令,彈出【屬性】面板,在【鏈接】選項的文本框中輸入“#”,如圖1-102所示,按【Enter】鍵,完成文字的鏈接。用相同的方式,為其他文字制作鏈接。

圖1-101

圖1-102
11 按快捷鍵【F12】預覽,效果如圖1-103所示。

圖1-103
1.11 改變頁面的標題
案例效果:Ch01\效果\改變頁面標題\index.htm。
制作要點:通過頁面屬性對話框改變頁面標題。
01 按快捷鍵【Ctrl+O】,打開光盤中的“Ch01\素材\改變頁面標題\index.htm”文件,如圖1-104所示。

圖1-104
02 執(zhí)行菜單【修改】→【頁面屬性】命令,彈出【頁面屬性】對話框,如圖1-105所示。

圖1-105
03 選擇【分類】選項框中的【標題/編碼】選項,在【標題】選項的文本框中輸入“=禮品專賣=”,其他選項為默認值,如圖1-106所示。單擊【確定】按鈕,效果如圖1-107所示。

圖1-106

圖1-107
04 按快捷鍵【F12】預覽,效果如圖1-108所示。

圖1-108
1.12 改變頁面的背景顏色
案例效果:Ch01\效果\改變頁面顏色\ index.htm。
制作要點:通過頁面屬性對話框改變頁面顏色。
01 按快捷鍵【Ctrl+O】,打開光盤中的“Ch01\素材\改變頁面顏色\ index.htm”文件,如圖1-109所示。

圖1-109
02 執(zhí)行菜單【修改】→【頁面屬性】命令,彈出【頁面屬性】對話框,如圖1-110所示。

圖1-110
03 將【背景顏色】選項設為“米色(#F4E5BC)”,如圖1-111所示。單擊【確定】按鈕,完成背景顏色的設置。

圖1-111
04 按快捷鍵【F12】保存并預覽網(wǎng)頁,效果如圖1-112所示。

圖1-112
- JavaScript交互式網(wǎng)頁設計(微課版)
- 技術創(chuàng)新方法
- 電腦上網(wǎng)技巧
- Dreamweaver 8中文版完全自學手冊
- 常用工具軟件教程
- Axure RP9原型設計實戰(zhàn)案例教材
- PowerPCB 2007常用功能與應用實例精講
- 中老年零基礎學智能手機:手機操作+微信應用+網(wǎng)上購物+娛樂與安全(大字大圖版)
- 云數(shù)據(jù)中心網(wǎng)絡架構與技術(第2版)
- VHDL開發(fā)精解與實例剖析
- 信號與系統(tǒng)分析
- 中老年人自己的電腦書
- C/C++函數(shù)與算法速查寶典
- Autodesk Ecotect Analysis應用教程
- Spring實戰(zhàn)(第6版)