第三章站點的建立與管理

第三章

站點的建立與管理本章要點站點結構規(guī)劃本地站點的建立與管理網(wǎng)頁文件基本操作2.1站點結構規(guī)劃網(wǎng)站開發(fā)流程：規(guī)劃階段設計階段開發(fā)階段發(fā)布和維護階段整體規(guī)劃進行網(wǎng)站的整體規(guī)劃也就是組織網(wǎng)站的內容和設計其結構。網(wǎng)頁制作者在明確網(wǎng)頁制作的目的及要包括的內容之后，接下來就應該對網(wǎng)站進行規(guī)劃，以確保文件內容條理清楚、結構合理，這樣不僅可以很好地體現(xiàn)設計者的意圖，也將使網(wǎng)站可維護性與可擴展性增強。一、題材的選擇在選擇題材時，可從下面幾個方面進行考慮：

1．主題要小而精

定位要小，內容要精。

2．題材最好是自己擅長或者喜愛的內容。

3．題材不要太濫或者目標太高。定位網(wǎng)站的主題和名稱二、網(wǎng)站名稱的選擇1．名稱要正氣。“主題站”比“萬全站”更受人們喜愛。2．名稱要易記。3．名稱要有特色。名稱平實可以接受，但如果能體現(xiàn)一定的內涵，給瀏覽者更多的視覺沖擊和空間想象力，則為上品。在體現(xiàn)網(wǎng)站主題的同時，要有這畫龍點睛之筆。定位網(wǎng)站的CI形象CI（CorporateIdentity）是借用廣告詞語，意思是通過視覺來統(tǒng)一企業(yè)的形象。1.設計網(wǎng)站的標志（logo）2.設計網(wǎng)站的標準色彩3.設計網(wǎng)站的標準字體（中文宋體9磅）4.設計網(wǎng)站的宣傳標語網(wǎng)站標志Logo典型Logo案例中國現(xiàn)車交易網(wǎng)（）形象手法就是采用與logo對象直接關聯(lián)而具典型特征的形象。這種手法直接、明確、一目了然，易于迅速理解和記憶。最大的特點就是將網(wǎng)站的產品，形象化和“車”字融合為一體，有效傳遞網(wǎng)站定位和核心產品。在用色上對比鮮明，圖形格外醒目鮮艷，能給人以很強的視覺沖擊效果且保持視覺平衡、線條流暢，整體美觀、大方。確定網(wǎng)站的欄目和版塊欄目實質是一個網(wǎng)站的大綱索引，索引應該將網(wǎng)站的主題明確顯示出來。劃分欄目需要注意的是：（1）盡可能將網(wǎng)站最有價值的內容列在欄目上。（2）盡可能方便訪問者的瀏覽和查詢。（3）盡可能刪除與主題無關的欄目。確定網(wǎng)站的目錄結構和鏈接結構一、網(wǎng)站的目錄結構建立目錄結構的一些建議：1．不要將所有文件都存放在根目錄下2．按欄目內容建立子目錄。3.不要使用中文名字的目錄名。4.不要使用過長的目錄名。5.盡量使用意義明確的目錄名，盡量做到“見名知意”。6.目錄的層次不要太多，建議不要超過3層。二、網(wǎng)站的鏈接結構①層狀結構

層狀結構類似于目錄系統(tǒng)的樹型結構，由網(wǎng)站文件的主頁開始，依次劃分為一級標題、二級標題等等，逐級細化，直至提供給瀏覽者具體信息。②線性結構線性結構類似于數(shù)據(jù)結構中的線性表，用于組織本身的線性順序形式存在的信息，可以引導瀏覽者按部就班地瀏覽整個網(wǎng)站文件。這種結構一般都用在意義是平行的頁面上。

通常情況下，網(wǎng)站文件的結構是層狀結構和線性結構相結合的。

③Web結構

Web結構類似于Internet的組成結構，各網(wǎng)頁之間形成網(wǎng)狀連接，允許用戶隨意瀏覽。

2.2站點的建立與管理在Dreamweaver中，“站點”一詞既表示W(wǎng)eb站點，又表示屬于Web站點的文檔的本地存儲位置。在開始構建Web站點之前，你需要建立站點文檔的本地存儲位置。在Dreamweaver8中提供了3類站點，即本地站點、遠程站點和測試服務器文件夾。本地站點：本地站點是你的工作目錄，也就是存放網(wǎng)頁的本地文件夾。Dreamweaver將該文件夾作為Web站點的“本地站點”，它可以放在本地計算機上，也可以放在網(wǎng)絡服務器上。在制作一般網(wǎng)頁時只建立本地站點即可。遠程站點：遠程站點是存儲用于測試、生產、協(xié)作等文件的地方，具體是哪些文件取決于開發(fā)環(huán)境。Dreamweaver在“文件”面板中將該文件夾稱為“遠程站點”。一般遠程文件夾位于運行Web服務器的計算機上。測試服務器文件夾：測試服務器文件夾是Dreamweaver處理動態(tài)頁面的文件夾。Dreamweaver使用此文件夾生成動態(tài)內容并在工作時連接到數(shù)據(jù)庫。主要在對動態(tài)頁面進行測試時使用。此文件夾與遠程文件夾通常是同一文件夾。除非你在開發(fā)Web應用程序，否則無需考慮此文件夾。

通常，在制作站點時首先應在本地硬盤上創(chuàng)建一個站點文件夾，然后可將任何現(xiàn)有資源（圖像或其它內容）放在該站點的根文件夾（站點的主文件夾）下。當你準備向頁面中添加內容時，可隨時使用這些資源。接下來在制作站點的過程中，將所有創(chuàng)建和編輯的文檔都保存在該文件夾中。當準備發(fā)布站點時，將這些文件上傳到Web服務器上即可。如果在本地對站點作了修改，還要將其上傳到Web站點上更新自己的站點。不熟悉Dreamweaver的用戶使用“站點定義向導”；有經驗的Dreamweaver用戶可使用“高級”設置。創(chuàng)建本地站點

新建站點通過[站點][新建站點]菜單命令或“文件”面板新建站點。新建文件夾

建立好站點后就可以在站點中新建文件夾，該文件夾主要用來存儲這個網(wǎng)站中用到的網(wǎng)頁元素，如圖片、音樂等。

新建網(wǎng)頁文件新建網(wǎng)頁文件的方法與新建文件夾的方法相同。創(chuàng)建遠程站點

創(chuàng)建遠程站點的方法與創(chuàng)建本地站點的方法類似，只是無需在站點文件夾下再新建文件夾或網(wǎng)頁文件。

管理本地站點

編輯本地站點選擇本地站點刪除站點中的文件和文件夾更改站點信息

刪除本地站點如果不需要某個站點時，可以將其從站點列表中刪除。2.3網(wǎng)頁文件基本操作

1、創(chuàng)建、打開和保存網(wǎng)頁文件2、設置頭信息插入關鍵字插入刷新3、設置頁面屬性設置外觀頁面字體、大小、文本顏色、背景顏色、背景圖像、設置鏈接鏈接字體、大小、鏈接顏色、變換圖像鏈接、已訪問鏈接、活動鏈接、下劃線樣式設置標題設置跟蹤圖像4、使用輔助工具使用標尺和網(wǎng)格使用歷史記錄面板一、編輯文本

文本是網(wǎng)頁中運用最廣泛的元素之一，一個內容詳實的網(wǎng)頁必然會使用大量的文本。在Dreamweaver8中輸入文本和在Word等字處理軟件中輸入文本一樣方便，另外，Dreamweaver8還允許從其他文檔中復制文本。網(wǎng)頁文檔編輯1、插入普通文本

普通文本是指一般的漢字或英文文本，它的插入方法十分簡單，將光標直接定位到編輯窗口中要輸入文字的地方，然后直接輸入文字即可。在Dreamweaver8中輸入文本時換行需按【Shift+Enter】鍵，如果要分段則需按【Enter】鍵。2、插入特殊符號在Dreamweaver8中，可以在文檔中插入多種特殊符號。3、插入不換行空格

Dreamweaver8的HTML代碼只允許字符之間包含一個空格，若要在文檔中添加其他空格，必須插入不換行空格。插入不換行空格的方法有如下幾種：在插入欄中的“文本”選項卡中，單擊【字符】按鈕，在打開的菜單中單擊（不換行空格）按鈕。按【Ctrl+Shift+空格】鍵輸入。將輸入法切換到全角狀態(tài)再按空格鍵。

在網(wǎng)頁中可以使用一條或多條水平線分隔文本和對象，以使段落區(qū)分更明顯。在編輯窗口中，將插入點定位到要插入水平線的位置。執(zhí)行以下操作之一即可創(chuàng)建一條水平線：選擇[插入]}[HTML]}[水平線]菜單命令。在插入欄的“HTML”選項卡中單擊（水平線）按鈕。二、插入水平線

Dreamweaver8中的文本格式設置與使用標準字處理程序類似?？梢詫ξ谋镜淖煮w、大小、顏色和對齊方式等進行設置。要格式化文本，應先選中要格式化的文本，然后在屬性面板中進行設置。三、格式化文本網(wǎng)頁圖像編輯一、網(wǎng)頁圖像的格式受網(wǎng)絡速度的影響，用于網(wǎng)頁的圖像一般有GIF、JPEG（也稱為JPG）或PNG這3種格式。目前大多數(shù)的瀏覽器都支持GIF和JPEG格式，但只有IE4.0及更高版本和NE4.0及更高版本支持PNG格式。

GIF格式

GIF全稱為“GraphicsInterchangeFormat”，意為可交換圖像格式，它是第一個支持網(wǎng)頁的圖像格式，在PC機和蘋果機上都能被正確識別。它最多支持256種顏色，可以使圖像變得容量相當小。GIF圖像可以在網(wǎng)頁中以透明方式顯示，還可以包含動態(tài)信息，即GIF動畫。GIF在網(wǎng)頁中大量用于站點圖標Logo、廣告條Banner及網(wǎng)頁背景圖像，但由于GIF受顏色數(shù)目的限制，GIF不適合用作照片級的網(wǎng)頁圖像。

JPEG格式

JPEG全稱為“JointPhotographicExpertsGroup”，意為聯(lián)合圖像專家組，它可以高效地壓縮圖片，丟失人眼不易察覺的部分圖像，使文件容量在變小的同時基本不失真，通常用來顯示顏色豐富的精美圖像。PNG格式

PNG全稱為“PortableNetworkGraphics”，意為便攜網(wǎng)絡圖像，它是逐漸流行的網(wǎng)絡圖像格式。PNG格式既融合了GIF能透明顯示的特點，又具有JPEG處理精美圖像的優(yōu)勢，且可以包含圖層等信息，常常用于制作網(wǎng)頁效果圖。二、網(wǎng)頁圖像素材的獲取

網(wǎng)頁圖像素材的來源很多，可以利用圖形處理軟件（如Photoshop、Fireworks和FreeHand等軟件）制作，也可以到網(wǎng)上下載或購買一些網(wǎng)頁素材光盤，進行加工后用到自己的網(wǎng)頁中。三、插入圖像

一個漂亮的網(wǎng)頁通常是圖文并茂的，精美的圖像和漂亮的按鈕，不但使網(wǎng)頁更加美觀、形象和生動，而且使網(wǎng)頁中的內容更加豐富多彩。圖像既可用于網(wǎng)頁內容，也可作為網(wǎng)頁的背景，下面介紹在網(wǎng)頁中插入圖像的方法。在Dreamweaver8中插入圖像的方法主要有直接插入和占位符插入兩種。

有三種類型的鏈接路徑：絕對路徑（例如/support/dreamweaver/contents.html）文檔相對路徑（例如dreamweaver/contents.html）站點根目錄相對路徑（例如/support/dreamweaver/contents.html）用占位符插入圖像制作網(wǎng)頁時還未選定需插入的圖像，但確定了圖像大小的時候，可以使用占位符來代替圖像的方式插入到文檔中。將圖像確定后雙擊占位符，在打開的對話框中設置后插入即可。四、設置圖像屬性插入圖像后可根據(jù)網(wǎng)頁頁面的需要在屬性面板中編輯圖像的屬性，如圖像的大小、對齊方式等。要設置圖像的屬性應首先選取該圖像（選取圖像后，圖像四周會出現(xiàn)控制柄），然后打開屬性面板，在屬性面板中進行具體的設置。圖像命名

為了在使用Dreamweaver行為（如交換圖像）或腳本撰寫語言（如JavaScript或VBScript）時可以引用該圖像，可在屬性面板的“圖像”文本框中為圖像命名。圖像大小在Dreamweaver8中插入圖像后系統(tǒng)會自動將圖像的原始大小顯示在“寬”和“高”文本框（以像素為單位）中。編輯圖片

在網(wǎng)頁中選擇圖像之后，單擊屬性面板中的按鈕，打開圖像處理軟件，對圖像進行處理。如果安裝了Fireworks，那么Fireworks將被默認為圖像處理軟件。如果沒有安裝，用戶也可自己設置使用其他軟件中處理圖像。

源文件設置在屬性面板的“源文件”文本框中顯示了圖像的保存路徑，如果要重新插入一幅新圖像，可以在選取圖像后的屬性面板中的“源文件”文本框中重新輸入要插入圖像的地址，或單擊右側后的按鈕，在打開的“選擇圖像源文件”對話框中重新選擇需要的圖像。文本說明

在選取圖像后的屬性面板的“替換”下拉列表框中可以輸入圖像的文本說明。圖像與文本的對齊

選取圖像后，在屬性面板的“對齊”下拉列表框中可設置處于同一行上的圖像與文本的對齊方式。圖像邊距

選取圖像在屬性面板的“垂直邊距”和“水平邊距”文本框中可以設置圖像與頁面上方和左側之間的距離，也可以設置圖像與其他網(wǎng)頁元素之間的距離。圖像邊框

選取圖像后，在屬性面板的“邊框”文本框中可以設置圖像邊框的寬度，單位為像素，“0”表示無邊框。五、圖像