家家富贵接财神刘珺儿

書名：網頁設計與制作項目教程（微課版）
作者名：湯智華
本章字數： 3395字
更新時間： 2019-09-12 15:05:31

1.6 Dreamweaver簡介

1.6.1 Dreamweaver界面介紹

一、工作區布局

雙擊桌面上的Dreamweaver軟件圖標，進入Dreamweaver軟件界面，為了統一，建議大家選擇菜單欄中的【窗口】→【工作區布局】→【經典】選項，如圖1-11所示。

圖1-11 Dreamweaver工作區布局

二、新建文檔

選擇菜單欄中的【文件】→【新建】選項，會出現“新建文檔”窗口。這時，在文檔類型下拉選項中選擇HTML，單擊【創建】按鈕，如圖1-12所示，即可創建一個空白的HTML文檔。

圖1-12 創建HTML文檔

三、軟件的操作界面

Dreamweaver的操作界面主要由六部分組成，包括菜單欄、插入欄、文檔工具欄、文檔窗口、屬性面板及其他常用面板，每個部分的具體位置如圖1-13所示。

圖1-13 Dreamweaver的操作界面

1.6.2 Dreamweaver初始化設置

一、工作區布局設置

打開Dreamweaver工具界面，選擇菜單欄里的【窗口】→【工作區布局】→【經典】選項。

二、必備面板

設置為“經典”模式后，需要把常用的3個面板調出來，也就是菜單欄【窗口】菜單項下的【插入】【屬性】【文件】3個選項。

三、新建默認文檔設置

單擊菜單欄中的【編輯】→【首選參數】選項，組合鍵為＜Ctrl+U＞，選中左側分類中的“新建文檔”菜單，右邊就會出現對應的設置，如圖1-14所示，選擇目前最常用的HTML文檔類型和編碼類型。

網頁能通過背景圖像給人留下第一印象，如節日題材的網站一般采用喜慶祥和的圖片來突出效果，所以在網頁設計中，控制背景顏色和背景圖像是一個很重要的步驟。

四、代碼提示

Dreamweaver有強大的代碼提示功能，可以提高書寫代碼的速度。在“首選參數”對話框中可設置代碼提示，選擇【代碼提示】菜單，然后選中【結束標簽】選項中的第2項，單擊【確定】按鈕即可，如圖1-15所示。

圖1-14 新建默認文檔設置

圖1-15 設置代碼提示

五、瀏覽器設置

對于初學者來說，計算機上必備的三大瀏覽器分別是火狐瀏覽器、IE 瀏覽器和谷歌瀏覽器。建議將Dreamweaver的默認預覽瀏覽器設置為“火狐瀏覽器”，也就是主瀏覽器，使用主瀏覽器預覽網頁的快捷鍵為<F12>，一般把IE瀏覽器或谷歌瀏覽器設為次瀏覽器，組合鍵為＜Ctrl+F12＞，如圖1-16所示。

圖1-16 設置默認瀏覽器

1.6.3 使用Dreamweaver創建網頁

一、編寫HTML代碼

（1）打開Dreamweaver，新建一個HTML默認文檔，組合鍵為＜Ctrl+Shift+N＞。切換到“代碼”視圖，這時在文檔窗口中會出現Dreamweaver自帶的代碼，如圖1-17所示。

圖1-17 編寫HTML代碼

（2）在代碼的第5行，<title>與</title>標記之間，輸入HTML文檔的標題，這里將“無標題文檔”修改為“我的第一個網頁”。

（3）在<body>與</body>標記之間添加網頁的主體內容，即輸入以下代碼：

……

　　　<body>

　　　　　<p>這是我的第一個網頁哦。</p>

　　　</body>

……

（4）在菜單欄中選擇【文件】→【保存】選項，組合鍵為＜Ctrl+S＞。接著，在彈出來的【另存為】對話框中選擇文件的保存地址并輸入文件名即可保存文件。這里將文件命名為example01.html。

（5）在瀏覽器中運行example01.html（即雙擊example01.html文件），效果如圖1-18所示。

圖1-18 在瀏覽器中運行example01.html的效果

這樣就使用HTML完成了一個簡單的網頁。

二、編寫CSS代碼

（1）在<head>與</head>標記中添加CSS樣式，CSS樣式需要寫在<style></style>標記內，具體代碼如下：

……

　　　p{font-size:36px;　　　　　　　　/ *設置字號為36像素* /

　　　　color:red;　　　　　　　　　　　/ *設置字體顏色為紅色* /

　　　　text-align:center;　　　　　　　/ *設置文本居中顯示* /

　　　　}

　</style>

……

這時Dreamweaver中的效果如圖1-19所示。

圖1-19 Dreamweaver中編寫CSS代碼

（2）在菜單欄中選擇【文件】→【保存】選項，或使用組合鍵＜Ctrl+S＞，即可完成文件的保存。這時，在火狐瀏覽器中刷新example01.html頁面，效果如圖1-20所示。

圖1-20 瀏覽器中example01.html頁面效果

HTML和CSS就是這么簡單，易學易用，在后面的內容中我們會陸續學習HTML和CSS的語法格式，以及常用的HTML標記和CSS樣式。

1.6.4 使用Dreamweaver創建站點

Dreamweaver可以用于創建單個網頁，但在大多數情況下，是將這些單獨的網頁組合起來成為站點。Dreamweaver 不僅提供了網頁編輯特性，而且帶有強大的站點管理功能。

有效地規劃和組織站點，對建立網站是非常必要的。合理的站點結構能夠加快對站點的設計，提高工作效率，節省時間。如果將所有的網頁都存儲在一個目錄下，當站點的規模越來越大時，管理起來就會變得很不容易。因此一般來說，應該充分利用文件夾來管理文件。

一、認識站點

Dreamweaver站點是一種管理網站中所有關聯文件的工具，通過站點可以實現將文件上傳到網絡服務器、自動跟蹤和維護、管理文件以及共享文件等功能。嚴格地說，站點也是一種文件的組織形式，由文件和文件所在的文件夾組成，不同的文件夾保存不同的網頁內容，如images文件夾用于存放圖片，這樣便于以后管理與更新。

Dreamweaver中的站點包括本地站點、遠程站點和測試站點3類。

（1）本地站點用于存放整個網站框架的本地文件夾，是用戶的工作目錄，一般制作網頁時只需建立本地站點。

（2）遠程站點是存儲于 Internet 服務器上的站點和相關文件。通常情況下，為了不連接 Internet 而對所建的站點進行測試，可以在本地計算機上創建遠程站點，來模擬真實的Web服務器進行測試。

（3）測試站點是Dreamweaver處理動態頁面的文件夾，使用此文件夾生成動態內容并在工作時連接到數據庫，用于對動態頁面進行測試。在制作靜態網頁時，不需要設置測試站點。

二、站點及目錄的作用

站點是用來存儲一個網站的所有文件的，這些文件包括網頁文件、圖片文件、服務器端處理程序和Flash動畫等。

在定義站點之前，首先要做好站點的規劃，包括站點的目錄結構和鏈接結構等。這里講的站點目錄結構是指本地站點的目錄結構，遠程站點的結構應該與本地站點相同，便于網頁的上傳與維護。鏈接結構是指站點內各文件之間的鏈接關系。

三、合理建立目錄

站點的目錄結構與站點的內容多少有關。如果站點的內容很多，就要創建多級目錄，以便分類存放文件；如果站點的內容不多，目錄結構可以簡單一些。創建目錄結構的基本原則是方便站點的管理和維護。目錄結構創建是否合理，對于網站的上傳、更新、維護、擴充和移植等工作有很大的影響。特別是大型網站，目錄結構設計不合理時，文件的存放就會混亂。甚至到了無法更新維護的地步。因此，在設計網站目錄結構時，應該注意以下幾點。

（1）無論站點的大小，都應該創建一定規模的目錄結構，不要把所有文件都存放在站點的根目錄中。如果把很多文件都放在根目錄中，很容易造成文件管理的混亂，影響工作效率，也容易發生錯誤。

（2）按模塊及其內容創建子目錄。

（3）目錄層次不要太深，一般控制在5級以內。

（4）不要使用中文目錄名，防止因此而引起的鏈接和瀏覽錯誤。

（5）為首頁建立文件夾，用于存放網站首頁中的各種文件，首頁使用率最高，為它單獨建一個文件夾很有必要。

（6）目錄名應能反映目錄中的內容，方便管理維護。但是這也容易導致一個安全問題，瀏覽者很容易猜測出網站的目錄結構，也就容易對網站實施攻擊。所以在設計目錄結構的時候，盡量避免目錄名和欄目名完全一致，可以采用數字、字母、下畫線等組合的方式來提高目錄名的猜測難度。

四、創建本地站點

在開始制作網頁之前，最好先定義一個新站點，這是為了更好地利用站點對文件進行管理，也可以盡可能減少錯誤，如鏈接出錯、路徑出錯等。

所謂本地站點，就是本地硬盤中存放遠程網站所有文檔的地方（文件夾）。簡單地說，就是一個文件夾。在這個文件夾里包含了網站中所有用到的文件。通過這個文件夾（站點）對網站進行管理，有次序，一目了然。

創建本地站點有以下兩種方法。

方法一使用Dreamweaver的向導創建本地站點。其具體操作步驟如下。

（1）打開Dreamweaver，在菜單欄中選擇【站點】→【新建站點】選項，接著，在彈出來的【站點設置對象】對話框中輸入站點的名稱，如圖1-21所示。