網站開發公司制作流程為了加快網站建設的速度和減少失誤，應該采用一定的制作流程來策劃、設計、制作和發布網站。通過使用制作流程確定制作步驟，以確保每一步順利完成。好的制作流程能幫助設計者解決策劃網站的繁瑣性，減小項目失敗的風險。制作流程的第一階段是規劃項目和采集信息，接著是網站規劃和設計網頁，最后是上傳和維護網站階段。每個階段都有獨特的步驟，但相連的各階段之間的邊界并不明顯。每一階段并不總是有一個固定的目標，有時候，某一階段可能會因為項目中未曾預料的改變而更改。步驟的實際數目和名稱因人而異，但是總體制作流程如圖1-1雙向個性化的客房需求溝通和需求理解1、客戶需求說明2、合作意向1、互聯網業務顧問2、網站業務和市場定位3、確定網站的風格和功能4、網站群配套的廣告方案網站市場定位、風格、功能和營銷顧問與策劃網站策劃技術路線確定、網站設計1、確定技術路線和平臺整體設計2、網站欄目等各環節的設計（欄目、美工、網頁、程序、數據庫）網頁編程網站制作網站制作和設計實現數據庫（欄目、美工、網頁、程序、數據庫）同步進行1、網站測試上傳網站測試、系統集成網站推廣2、數據庫托管方案系統性能優化、網站托管、管理服務3、管理服務方案1、網站內容維護網站內容維護、系統運行維護2、網站運行維護網站維護3、管理服務實施圖1-1網站制作流程圖1.1.1目標需求分析提出目標是非常簡單的事情，更重要的是如何使目標陳述得簡明并可以實現。在很多Web網站項目中，有包容一切的傾向。實際上一個網站不可能滿足所有人的需求，對設計者來說，網站一定要有特定的用戶和特定的任務。為了確定目標，開發小組必須要集體討論，討論的目的是讓每一個成員都盡可能提出對網站的想法和建議。通常，集體討論可以集中大家一致感興趣的問題，通過討論可以確定網站的設計方案。應該讓參與討論者意識到其最終目標是網站不能太慢或難以使用。在對某個網站進行升級或全面重新現的問題，防止項目偏離的方法是讓網站原來的設計者談自己的設計思想和對問題的考慮點。在集體會議中，要點是挖掘各種各樣的被稱為“期望清單”的想法。“期望清單”就是描述各種不考慮格、可行性、可應用性的有關網站的想法。例如，討論某個公司網站的建設方案時，會包括產品信設計時，一定要注意不要召開集體會議來討論已有網站中出價息、投資者信息、公司新聞、人才引進、員工招聘以及技術支持等部分。每一個負責相關部分的設計者都會認為他們的那部分是最重要的，每個人都希望把他們那部分的鏈接放在主頁上。通過集體討論的設計方案，能夠兼顧到各方的實際需求和設計開發的技術問題，能夠為成功開發Web網站打下良好的基礎。1.1.2網頁制作網頁制作包括網站的選題、內容采集整理、圖片的處理、頁面的排版設置、背景及其整套網頁的色調等。1．網站定位在網頁設計前，首先要給網站一個準確的定位，是屬于宣傳自己產品的一個窗口，還是用來提供商務服務或者提供資訊服務性質的網站，從而確定主題與設計風格，名稱要切題，題材要專而精，并且要兼顧商家和客戶的利益。在主頁中標題起著很重要的作用，它在很大程度上決定了整個網站的定位。一個好的標題必須有概括性、簡短、有特色且容易記，還要符合自己主頁的主題和風格。2．網站規劃在設計之前，需先畫出網站結構圖，其中包括網站欄目、結構層次、連接內容。首頁中的各功能按鈕、內容要點、友情連接等都要體現出來，一定要切題，并突出重點，同時在首頁上應把大段的文字換成標題性的、吸引人的文字，將單項內容交給分支頁面去表達，這樣才顯得頁面精煉。也就是說，首先要讓訪問者一眼就能了解這個網站都能提供什么信息，使訪問者有一個基本的認識，并且有繼續看下去的興趣。并且要細心周全，不要遺漏內容，還要為擴容留出空間。分支頁面內容要相對獨立，切忌重復，導航功能要好。網頁文件命名開頭不能使用運算符、中文字等，分支頁面的文件存放于自己單獨的文件夾中，圖形文件存放于單獨的圖形文件夾中，漢語拼音、英文縮寫、英文原義均可用來命名網頁文件。在使用英文字母時，同時要區分文件的大小寫，建議在構建的站點中，全部使用小寫的文件名稱。3．內容的采集采集內容必須與標題相符，在采集內容的過程中，應注重特色。主頁中的特色應該突出自己的個性，并把內容按類別進行分類，設置欄目，讓人一目了然，欄目不要設置太多，最好不要超過10個，層次上最好少于5層，而重點欄目最好能直接從首頁到達，保證用各種瀏覽器都能看到主頁最好的效果。4．主頁設計主頁設計包括創意設計-結構設計-色彩調配和布局設計。創意設計來自設計者的靈感和平時經驗的積累。結構設計源自網站結構圖。在主頁設計時應考慮到：“標題”要有概括性和特色，符合自己設計時的主題和風格；“文字”的組織應有自己的特色，努力把自己的思想體現出來；“圖片”適當地插入網頁中可以起到畫龍點睛的作用；“文字”與“背景”的合理搭配，可以使文字更加醒目和突出，使瀏覽者更加樂于閱讀和瀏覽，而不適當的搭配，會使文字淹沒于背景之中，使網頁顯得單調，給人乏味的感覺。整個頁面的色彩在選擇上一定要統一，特別是在背景色調的搭配上一定不能有強烈的對比，背景的作用主要在于統一整個頁面的風格，對視覺的主體起一定的襯托和協調作用。5．圖片主頁不能只用文字，必須在主頁上適當地添加一些圖片，增加可看性，當然處理得不好的以及

無關緊要的圖片最好不要放上去，否則讓人覺得是累贅，同時也影響網頁的傳輸速度。圖片不僅要好看，還要在保證圖片質量的情況下盡量縮小圖片的大小（即字節數），在目前網絡傳輸速度不是很快的情況下，圖片的大小在很大程度上影響了網頁的傳輸速度。小圖片（10040）一般可以控制在6KB以內，動畫控制在15KB以內，較大的圖片可以及顏色在256色以內的最好把它處理成gif圖像格式，把它處理成jpg圖像格式，因為gif和jpg圖像格式各有各的壓縮優勢，對圖片添加注解，當圖片的下載速度較慢，在的圖片，是否需要等待，是否可以單擊，特有必要為圖片個注解。這是一個小地方，卻能體現一“分割”成小圖片。一般來說，圖片顏色較少、色調平板均勻以如果是一些色彩比較豐富的圖片，如掃描的照片，最好應根據具體的圖片來選擇壓縮比。另外，網頁中最好沒有顯示出來時注解有助于讓瀏覽者知道這是關于什么別考慮到純文本瀏覽者瀏覽的方便，很添加一個網頁的制作水準。6．網頁排版要靈活運用表格、層、幀、CSS樣式表來設置網頁的版面。網頁頁面整體的排版設計是不可略的，它很重要的一個原則是合理地運用空間，讓自己的網頁疏密有致，井井有條，留下必要的白，讓人覺得很輕松。不要把整個網頁都填得密密實實，沒有一點空隙，這樣會給人一種壓抑感。持網站的整體風格，開始制作時千萬不要許多頁面一起制作。許多新手會及不可待地將收集到的各種資料填入各個頁面。轉眼間首頁制作完成，可等想要修改一些頁面元素時，卻發現一頁一頁改得好辛苦。建議先制作有代表性的一頁，將頁面的結構、圖片的位置、鏈接的方式統統設計周全，例如：返回首頁的鏈接、E-mail地址、版權信息等，然后復制出許多相同的頁面，再將相應的內進行填寫。這樣制作的主頁，不但速度快，而且整體性強。7．背景網頁的背景并不一非常關鍵的，根據心理學家的研究，色彩最能引起人們奇特的想象，最能撥動感情的琴弦。比如說做的主頁是感情類的，那最好選用一些玫瑰色、紫色之類的比較淡雅的色彩，而不要用黑色、深藍色這類比較灰暗的色彩。黑色是所有色彩的集合體，黑色比較深沉，它能壓抑其他色彩，在圖忽空為保容定要用白色，選用的背景應該和整套頁面的色調相協調。合理地應用色彩是屬于案設計中黑色經常用來勾邊或點綴最深沉的部位，黑色在運用時必須小心，否則會使圖案因“黑色太重”而顯得沉悶陰暗。8．其他如果想讓網頁等，當然這些小技巧最好不要運用太多，它會影響網頁的下載速度。穩定性，不妨考慮建立一兩個鏡像站點，這樣不僅能照顧到不同地區網友對速度的要備份，以防萬一。等主頁做得差不多了，可在上面個留言板、一個計數器。前者能讓你及時獲得瀏覽者的意見和建議，及時得到網友反饋的信息，最好能做到有問必答，用行動去贏得更多的能讓你知道主頁瀏覽者的統計數據，你可以及時調整你的設計，適應不同的器和瀏覽者的要求。更有特色，可適當地運用一些網頁制作的技巧，諸如聲音、動主頁站點的速度和求，還能作好態網頁、Java、Applet另外可考慮瀏覽者；后者瀏覽1.1.3上傳發布當完成了網站的設計、調試、測試和網頁制作等工作后，需要把設計好的站點上傳到服務器來完成整個網站的發布。Dreamweaver內置了強大的FTP功能，可以幫助用戶實現對站點文檔的上傳

和下載。（1）在【文件】控制面板中單擊【管理站點】，打開【管理站點】對話框。在【管理站點】對話框中單擊【新建】按鈕，在彈出的菜單中選擇【選項服務器】選項，如圖1-2所示。（2）在打開的【配置服務器】對話框中，將“FTP主機”、“登錄”、“密碼”這3個項目按圖1-3所示進行設置。單擊【管理站點】圖1-2準備鏈接站點圖1-3配置服務器信息（3）在下拉菜單中選擇有的文件選中并將其復制，如圖1-4本地網站所在的目錄，將整個網站所所示。（4）最后鏈接服務器，按Ctrl+V鍵將本地網站的所有文件粘貼到服務器上，此時會彈出【狀態】對話框來顯示上傳信息，如圖1-5所示。圖1-4復制本地網站文件圖1-5完成網站的發布1.1.4宣傳推廣網站開通后，就像注冊了公司一樣，必須進行宣傳推廣，才能變得知名，并帶來經濟效益。網站的宣傳有多種方式。1．注冊到搜索引擎注冊到搜索引擎是極為方便的一種宣傳網站的方法。目前比較有名的搜索引擎主要有搜狐（）、新浪網（）、雅虎（）、網易（）、百度（）等。注冊時盡量詳盡地填寫網站中的一些主要信息，特別是一些關鍵詞，盡量寫得普遍化、大眾化一些。注冊分類的時候盡量分得細一些。2．交換廣告條廣告條交換是宣傳網站的一種較為有效的方法。登錄到廣告交換網，填寫一些主要的信息，比如廣告圖片、網站網址等。然后它會要求你將一段HTML代碼加入到網站中。這樣，你的廣告條就可以在其他網站上出現。當然，你的網站上也會出現別的網站的廣告條，雙方得益。我國的廣告交換網主要有：太極鏈（）、火炬廣告交換網（）、網盟廣告交換網（）。另外也可以跟一些兄弟網站或者朋友的網站交換友情鏈接，當然網站最好是點擊率比較高的。友情鏈接包括文字鏈接和圖片鏈接。文字鏈接一般就是網站的名字。圖片鏈接包括Logo的鏈接和Banner的鏈接。標題廣告的大小通常為46860點擊時，即被3．標簽的使用Meta使用Meta標簽是簡單而且搜索到你的網站。將下面這段代碼加入到網頁標簽中。12060的動（靜）態gif圖片或Flash動畫。當訪問者被廣告標題所吸引并像素或像素鏈接到廣告發布者的網站上，達到網站推廣的目的。有效地宣傳網站的一種方法。不需要去搜索引擎注冊就可以讓客戶<metaname="keyworks"content="網站名稱,產品名稱……">在content里邊填寫關鍵詞。關鍵詞最好要大眾化，跟企業文化、公司產品等緊密相關，并且盡量多寫一些，可以將一些相關關鍵的詞重復，這樣可以提高網站的排行。4．直接跟客戶宣傳一個稍具規模的公司一般都有業務部、市場部或者客戶服務部。可以在跟客戶打交道的時候直接將公司網站的網址告訴給客戶，或者直接給客戶發E-mail等，宣傳途徑很多，可以根據自身的特點選擇一些較為便捷有效的方法。5．網下推廣（1）傳統媒體硬廣告眾所周知，通過傳統媒體硬廣告的宣傳曝光，是目前最為行之有效且最有影響力的推廣方式，但是價格一般較高。（2）傳統媒體軟廣告只要設計巧妙，軟廣告的價值有時比硬廣告要來得更好，更深入人心。媒體可以通過你的要求和想法，設計出各種你希望的軟廣告方式。（3）網下活動推網上和網下結合的重要性毋庸置疑。通過網下的離線活動可以帶動度的推廣。在做網下活動推廣時，應注意精心策劃并與網站緊密結合。如果不熟悉活動流程，不具備組織能力，則會導致策劃出來的活動，無論在吸引力還是在實用折扣。廣網站的宣傳，達到最大程了解業內行情，不方面均大打

1.2網頁組成元素設計網頁時要組織好頁面的基本元素，同時再配合一些特效，構成一個絢麗多彩的網頁。網頁的組成對象包括文本、圖像和超級鏈接。內容是網站的靈魂，而文本則是構成網站靈魂的物質基礎。文本與圖像在網站上的運用是最廣泛的，一個內容充實的網站必然會用大量的文本與圖像，然后把超級鏈接應用到文本和圖像上，才能使這些文本和圖像“活”起來。1.2.1網頁組成元素概述平常看到的報紙、雜志和漫畫書的版面都是由兩種對象構成的，即文字和圖像。這風格卻千變萬化。每本雜志都因為不同的版面排編而擁有自己的特色。許多門戶網站的網頁，在編輯時也是基于同樣的版面設計原理，所以性質和書報雜志差不多。大部分用戶一定覺得網頁設計比平面設計復雜得多，那是因為通過瀏覽器展現出來的網頁，除了文字和圖像，還有聲音和動畫等多媒體對象，或者是Java、ActiveX控件等特殊效果及交互功能。要把這些內容添加到網頁，就必須考慮更多的因素。然而考慮更多的則是用么樣的文字充實網頁內容，用的圖像來點綴網頁，最后就是怎樣把這些文字和圖像穿插起來。圖1-6所示就是一個包含各種網頁對象的頁面。兩種簡單的對象再用一些線條進行修飾，經過排版設計后所產生的什什么樣圖1-6包含各種網頁對象的頁面1.2.2文本元素文字是網頁的主體。雖然利用Flash、圖形文字也可以達到同樣的效果，甚至超出純文本效果，但是網頁文字的優勢還是無法被取代的。因為純文本所占用的存儲空間非常小。然而在頁面上用同樣的字體顯示，會使頁面過于呆板。在頁面中適當調整文字的大小、顏色也可以改善頁面效果。等，1．標題在一個網站的網頁或一篇獨立的文章中，通常都會有一個醒目的標題。告訴瀏覽者這個網站的名字或該文章的主題，如圖1-7所示。而現在很多網頁設計者用圖像或者Flash動畫來代替文字標題。2．文字大小適當地調整文字大小，可以使文字編排得更生動活潑，達到更好的效果，如圖1-8所示。欄目標題字體變大圖1-7文字標題圖1-8調整文字大小3．段落文章段落分明，有層次感，才能讓瀏覽者更好的閱讀，也使得頁面看起來整潔、美觀大方，如圖1-9所示。4．樣式粗體、斜體和下劃線是最基本的文字樣式，然而在網頁中不可過多地應用下劃線，那樣會使瀏覽者誤以為是超級鏈接。在頁面的適當位置添加一些字體樣式，會使頁面更具有觀賞，性如圖1-10所示。段落分明下劃線粗體圖1-9段落層次圖1-10字體樣式應用字體樣式在一般的刊物上很常見，但是應用到網頁中卻有些問題，例如在網頁中應用了華文彩云字體，可是在瀏覽者的計算機上并不一定也安裝了這種字體，如果未安裝，那么在瀏覽者的計算機上所看到的字體就會是系統默認的字體，這時就不能顯示出網頁的效果。5．字體顏色點，使頁面也變得絢麗起來。但是一定要注意顏色的搭配，如圖1-11所示。在頁面上也不能過多地應用顏色，太過華視覺效果要比文字強烈得多。靈活應用圖像，在網頁中可以起到點綴的效果。但是運用不當，會使網頁變得凌亂不堪。Web頁上的圖像文件大部分都是使用JPG和GIF格式。因為它們除了具有壓縮比例高外，還具操作系統，都能圖1-11與背景顏色相統一的文本顏色有跨平臺特性。無論瀏覽者使用什么樣的夠顯示這兩種圖片。圖像在網頁中的應用主要有以下幾種形式。1．圖像標題一般在網頁中都要有標，題用以像標可題以使更加美觀，如圖1-12所示。2．背景提示瀏覽者這個網站是做什么的，起到了導航的作用，應用圖網頁圖像的另一個重要應用是作為網頁的背景。網頁背景千變萬化，特別是一些個人網站，應用圖片背景比較多，如圖1-13所示。圖像標題圖1-12圖像標題圖1-13網頁背景3．網頁主圖網頁上除了用小圖像美化網頁外，通常還會在網頁上用一些較大的圖片來突出網頁主，題占滿網頁的整個空間。特別是主頁中用主圖的比較多，或者直接用圖片取代文字作為超級鏈接按鈕，可以使網頁更加美觀，如圖1-14所示。1.2.4超級鏈接超級鏈接是Internet中最為有趣的網頁面之間的跳轉，或者站上，還可以下載文件和發送E-mail。而網對象，在網頁中單擊鏈接對象，即可實現在不同頁連接到其他網進站鏈接頁是否能夠實現如此多的功能，取決于超級鏈接的規劃。無論是文字還是圖像都可以加上超級鏈接標記。在一個完整的網站中，至少要包括站內鏈接和站外鏈接。1．站內鏈接如果網站規劃了多個主題版塊，則必須在網站的首頁加入超級鏈接，讓瀏覽者可以快速地轉到感興趣的頁面，圖1-14網頁主圖而各個子頁面也要有超級鏈接，還要有能夠回到主頁的鏈接。超級鏈接除了起到導航的作用外，使頁面效果也有了一致。性通過超級鏈接，瀏覽者可以迅速找到自己需2．站外鏈接Internet是遍布世界任何角落的無形的網絡。如果制作了一個者進得來出不去，下次瀏覽者就不會再度光臨你的網站。在網站上放置一些與網站主題有關的對外鏈接，如果網站沒有特殊主題，可以把好的網站介紹給瀏覽者。如果對外鏈接信息很多，可以進行要的信息，如圖1-15所示。封閉的網站，沒有對外鏈接，瀏覽分類，就像搜索站點一樣，如圖1-16所示。圖1-15站內鏈接圖1-16站外鏈接1.3網頁的類型靜態網頁和動態網頁是網頁的兩種類型。靜態網頁就是設計者做什么樣，在客戶端瀏覽時就是什么樣。而動態網站可以根據不同的用戶顯示不同的頁面。1.3.1靜態頁面“靜態”就是指網站的網頁內容“固定不變”，當用戶瀏覽器通過互聯網的HTTP（HypertextTransportProtocol）協議向Web服務器請求提供網頁HTML文檔傳送給用戶僅僅是標準的HTML代碼，最多再加上流行的GIF格式的動態圖片或Flash動畫等，比如幾只蝴蝶飛來飛去的動內容時，服務器僅僅是將原已設計好的靜態瀏覽器。其頁面的內容使用的畫效果。“靜態”網站的致命弱點就是不易維護，若網站維護者要更新網頁的內容，就要通過FTP軟件內容，設計者必須不斷重復地制作HTML文檔，隨網著站內容和信息量的日益擴增，設計者就會感到工作量大得出乎想象。但是靜態頁面的優點是下載速度快，因為它不須要程序運算和數據庫連接。靜態頁面綴一般都是html或htm，如圖1-17所示。但現在網站技術也提升了，即使是動態頁面也可以在發布時生成后綴為htm的文件，可以讓訪問者都看不出來這個網站是用什么語言開發的。把文件下載下來，必須手動來更新其所有的HTML文檔。為了不斷更新網頁文件的后圖1-17靜態頁面1.3.2動態頁面動態頁面是最常用的網站面，根據用戶的不同請求從而返回其相應的數據，可以用和節省服務器上的物理資源。如果今后需要改變站點的風格，只需要重新制作前臺所訪問的頁面即可。只要數據庫結構不變，可以很快地進行改版工作。動態頁面的優點是效率高、更新快、移植性強，從而快速地達到即見即所得的目的。但是它的優點同樣也是它的缺點。因為它的效率是要通過頻繁地和數據庫進行通信才能實現的，頻繁地讀取數據庫會導致服務器要花大量的時間來計算，當訪問量一定的后，會導致效率成倍或幾倍建設的一種表達形式。它的優點在于可以根據先前所制定好的程序頁說是一對多的關系，從而達到資源的最大利達到數量地下降。如果有人惡意地對程序進行攻擊，激發了隱藏BUG，將會造成一定的安全隱患，從而導致整個網站的癱瘓。動態頁面文件的后綴一般都是asp、aspx、php和jsp等，如圖1-18所示。動態頁面是需要語言環境支持的，這就大大地影響了網站的跨平臺性。比如Microsoft的ASP或.net雖然說可以跨平臺，但目前還不能在所有平臺上運行，Sun的語言在Microsoft的平臺上配置相對來說也比較麻煩。圖1-18動態頁面1.4Dreamweaver8工作環境初步了解了網站的制作流程以及網站中所包含的元素后，就可以使用網頁制作軟件來創建網站中的網頁了。Dreamweaver是一種可視化的網頁設計和網站管理工具，它支持態靜與動態技術，并且支持可視化操作。下面以最新版本的Dreamweaver8來介紹其工作環境。1.4.1工作區布局首次啟用Dreamweaver時，會彈出圖1-19所示的【工作區設置】對話框。在該對話框中提供了兩種布局風格：一種是“設計器”布局，該布局是一個使用MDI（多文檔界面）的集成工作區，其中全部“文檔”窗口和面板被集成在一個更大的應用程序窗口中，面板組停靠在右側，建議初學者使用此布局；另外一種是“編碼器”布局，該布局也是一個集成工作區，但是面板組停靠在左側，布局類似于HomeSite所用的布局，而且“文檔”窗口在默認情況下顯示“代碼”視圖，建議HomeSite用戶以及手工編碼人員使用圖1-19【工作區設置】對話框這種布局。如果要切換為其他布局，可以通過執行【窗口】|【工作區布局】|【編碼器】（【設計器】）命令重新選擇布局即可。1.4.2文檔窗口在【工作區設置】對話框啟用“設計器”工作模式，單擊【確定】按鈕，即可打開Dreamweaver，在打開的文檔窗口中，其中最醒目的是一個居于窗口中央的【起始頁】對話框，如圖1-20所示。單擊此處可以鏈接到在線的幫助資源選中此復選框則下次不再顯示該對話框圖1-20【起始頁】對話框【起始頁】對話框的中間有3個欄目，分別是“打開最近項目”、“創建新項目”和“從范例創建”。在這3個欄目中單擊任意一個欄目中的文字和圖標，即可打開相應的窗口。在該對話框的下方有3行文字，它們是Dreamweaver的在線幫助鏈接。如果在下次啟動Dreamweaver時不希望顯示此對話框，則可以選中該對話框最下面的【不再顯示此對話框】復選框。要設置是否在啟動Dreamweaver時顯示此對話框，還可以執行【編輯】|【首選參數】命令，并打開【常規】選項卡，在【文檔選項】后取消選中【顯示起始頁】復選框。在【起始頁】對話框Dreamweaver窗口如圖1-21所示，其中各部分的含義如下。1．【常用】工具欄的“創建新項目”欄中，單擊“打開”選項，選擇一個網頁文件，此時的包含用于將各種類型的對象（圖像、表格和層）插到入文檔中的按鈕。每個對象都是一段HTML代碼，允許用戶在插時入設置不同的屬性。2．【文檔】工具欄包含按鈕和彈出式菜單，提供各種【文檔】窗口視圖、各種查看選項和一些常用操作。3．【文檔】窗口用于顯示當前創建和編輯的文檔，可以在此設置和編排頁面內的所有對象，如文字、圖像、表格等。4．面板組組合在一個標題下面的相關面板的集合，在【窗口】菜單中，可以執行相應的命令顯示或隱藏面板。5．【文件】面板幫助用戶管理自己的文件和文件夾，包括Dreamweaver站點的一部分和遠程服務器，同時還可以訪問本地磁盤上的全部文件，類似于Windows中的資源管理器。6．【屬性】面板用于查看和更改所選對象或文本的各種屬性，每種對象都具有不同的屬性。在“編碼器”工作區布局中，【屬性】面板默認是折疊的。7．標簽選擇器位于【文檔】窗口底部的狀態欄中，用于顯示環繞當前選定內容的標簽的層次結構。單擊該層次結構中的任何標簽，可以選擇該標簽及其全部內容。【標準】【樣式呈現】工具欄工具欄面板組【插入】工具欄標簽選擇器【文檔】工具欄【文件】面板【文檔】窗口【屬性】面板圖1-21文檔窗口1.4.3工具欄面板Dreamweaver中包含了4種工具欄：插入、樣式呈現、文檔和標準。其中的【樣式呈現】工具欄為Dreamweaver8所新增的。如果要將這些工具欄顯示在文檔窗口中，可以執行【查看】|【工具欄】后面的子命令。1．【標準】工具欄在默認工作區布局中不顯示，主要包含【文件】和【編輯】菜單中的一般操作按鈕，如圖1-21所示，其中各按鈕的名稱及功能見表1-1所示，其中的是Dreamweaver8的新增功能。【打印代碼】表1-1【標準】工具欄中各按鈕的名稱及功能圖標名稱功能新建創建一個新文檔打開打開已有的文檔保存保存當前編輯的文檔全部保存保存當前打開的所有文檔打印代碼將代碼打印出來剪切復制粘貼撤銷重做將內容剪切到剪切板上，原內容刪除將內容復制到剪切板上，原內容不變將剪切板上的內容粘貼到當前位置撤銷上一次操作對撤銷操作進行恢復2．【文檔】工具欄在圖1-21所示的【文檔】工具欄中，各按鈕的名稱及功能見表1-2所示置網頁的。使用該工具欄可以設標題以及預覽網頁效果等。表1-2【文檔】工具欄中各按鈕的名稱及功能圖標名稱功能顯示代碼視圖在【文檔】窗口中顯示代碼視圖顯示代碼視圖和設計視圖在【文檔】窗口中分別顯示代碼視圖和設計視圖顯示設計視圖在【文檔】窗口中顯示設計視圖標題設置文件的標題，它將顯示在瀏覽器的標題欄中可以檢查跨瀏覽器的兼容性沒有瀏覽器檢查錯誤驗證標記驗證文檔中的標記文件管理單擊彈出【文件管理】菜單在瀏覽器中預覽/調試在瀏覽器中預覽或調試文檔刷新設計視圖視圖選項在代碼視圖中進行更改后刷新文檔的設計視圖為代碼視圖和設計視圖設置選項可視化助理進行是否顯示可視元素的設置3．【樣式呈現】工具欄只有在文檔使用依賴于媒體的樣式表時，此工具欄才有用，所以在一般情況下不顯示該工具欄。在圖1-21所示的【樣式呈現】工具欄中，各按鈕的名稱及功能見表1-3所示。4．【插入】工具欄【插入】工具欄有制表符和菜單兩種顯示方式。單擊圖1-21所示的【插入】工具欄右上角的按鈕，在彈出的下拉菜單中，執行【顯示為菜單】命令，可以切換至菜單顯示方式。表1-3【樣式呈現】工具欄中各按鈕的名稱及功能圖標名稱功能呈現屏幕媒體類型呈現打印媒體類型顯示頁面在計算機屏幕上的顯示方式顯示頁面在打印紙張上的顯示方式呈現手持型媒體類型呈現投影媒體類型呈現TTY媒體類型呈現TV媒體類型顯示頁面在手持設備上的顯示方式顯示頁面在投影設備上的顯示方式顯示頁面在電傳打字機上的顯示方式顯示頁面在電視屏幕上的顯示方式切換CSS樣式的顯示允許啟用或禁用CSS樣式，此按鈕可獨立于其他媒體按鈕之外工作在菜單顯示方式下，單擊其中的【常用】按鈕，在彈出的下拉菜單中執行【顯示為制表符】命令，可以切換至制表符顯示方式。【插入】工具欄是最常用的工具欄之一，其按鈕與【插入】菜單中的命令相對應。使用上面的按鈕，可以方便、快捷地在網頁中插入圖像、表格、字符、動畫等。【插入】下面介紹其中工具欄包含了8個選項卡，4個主要并且選項較多的選項卡。（1）【常用】選項卡。這是【插入】工具欄中最常用的選項卡，如圖1-22所示，能見表1-4所示。（2）【即可打開圖1-22所示的【該選項卡中各按鈕的名稱及功布局】選項卡。在【插入】工具欄中單擊【布局】按鈕，布局】選項卡，在該圖1-22【常用】、【布局】、【表單】與【文本】選項卡選項卡中除了可以創建表格外，還可以創建布局表格、層以及框架等。其中各按鈕的名稱及功能見表1-5所示。表1-4【常用】選項卡中各按鈕的名稱及功能圖標名稱作用在網頁中插入超級鏈接超級鏈接插入電子郵件鏈接電子郵件鏈接命名錨記表格插入錨點，實現頁內定位插入表格插入Div標簽到文檔插入Div標簽圖像單擊將彈出下拉菜單，可以插入圖像、圖像占位符、導航條、熱點等對象媒體日期單擊將彈出下拉菜單，可以插入Flash動畫、文本、按鈕、視頻插件等對插入當前日期，可以選擇格式單擊打開【選擇文件】對話框，可以象選擇一個網頁文件打開，將其加入到當前的站點中服務器端包括注釋插入HTML注釋單擊將彈出下拉菜單，可以創建模板、編輯區域、重復區域等在代碼中插入各種標簽語言的標簽，方便編輯代碼模板標簽選擇器表1-5【布局】選項卡中各按鈕的名稱及功能圖標名稱作用表格在【標準】模式下插入表格在【標準】模式下插入Div標簽在【標準】模式中插入層插入Div標簽描繪層模式用于在3種模式之間進行轉換布局表格繪制布局單元格在上面插入行在下面插入行在左邊插入列在右邊插入列框架在【布局】模式下才能使用在布局表格中插入單元格在布局單元格上面插入行在布局單元格下面插入行在布局單元格左邊插入列在布局單元格右邊插入列單擊下三角按鈕，可以在下拉菜單中插入不同類型的框架導入表格式數據表格數據（3）【文本】選項卡即可打開圖1-22所示的【文本】。在【插入】工具欄中單擊【文本】按鈕，選項卡。其中各按鈕的名稱及功能見表1-6所示。表1-6【文本】選項卡中各按鈕的名稱及功能圖標名稱字體標簽編輯器粗體作用單擊可以打開標簽編輯器，編輯字體列表斜體使用設置選定內容相應的HTML文本格式標簽加強強調段落塊引用已編排格式標題1使用環繞選定內容相應的HTML塊標簽標題2使用相應的HTML標題標簽環繞選定內容標題3項目列表編號列表列表項定義列表定義術語使用相應的HTML列表標簽環繞選定內容使用環繞選定內容相應的HTML定義列表標簽（4）【表單】選項卡。該選項卡中的選項主要用于網頁中的信息反饋程序中，也可以在靜態網頁中應用。在【插入】工具欄中單擊【表單】按鈕，即可打開圖1-22所示的【表單】選項卡。其中各按鈕的名稱及功能見表1-7所示。表1-7【表單】選項卡中各按鈕的名稱及功能圖標名稱作用表單在指針所在處插入一個表單。表單是容納表單元素的簡單容器文本字段在光標所在位置插入文本字段隱藏域在光標所在處插入隱藏域，例如用于發送至JavaScript中的不可見區域文本區域在光標所在處添加文本區域復選框在光標所在位置插入復選框單選按鈕在光標所在位置插入單選按鈕單選按鈕組在光標所在位置插入成組的單選按鈕列表/菜單在光標所在位置插入列表和彈出菜單跳轉菜單在光標所在位置插入一個跳轉菜單，用于引導頁面瀏覽圖像域文件域按鈕在光標所在位置插入圖像域，包括可以用于按鈕的圖像在光標所在處插入文件域，包括一個文本輸入框和一個瀏覽按鈕在光標所在處插入一個按鈕，默認的名稱和值為Submit在光標所在處插入一個標簽，在【代碼】視圖中可以添加標簽名稱在光標所在位置插入字段集標簽字段集1.4.4面板基本操作Dreamweaver是一種可視化的網頁設計和網站管理工具，在Dreamweaver中幾乎所有的操作都可以在工具欄或者面板中完成。在【設計器】布局的狀態下，文檔窗口右側的界面中包含了所有常用的面板，如【文件】面板、【標簽檢查器】面板、【結果】面板、【資】源面板等。它的實際運用將在以后的章節中講到，現在介紹面板的基本操作。面板組是分布在某個標題下面的相關面板的集合，這些面板果要展開一個面板組，可以單擊組名稱左側的展開箭頭，如圖1-23所示。如果要使【文檔】窗口擴大，可以將面板組隱藏起來，單擊【文檔】窗口與面板組之間的箭頭即可，如圖1-24所示。功能強大，而且能夠任意組合。如按鈕單擊此處將把面板組隱藏起來再次單擊該處的箭頭按鈕，隱藏起來的面板組會顯示顯示的為折疊后的面板組圖1-23面板組圖1-24隱藏面板組如果要將某個面板分離成浮動面板，首先應將鼠標置于面板組的左上角，當指針變成圖1-25所示的形狀時，按下左鍵拖動即可得到浮動的面板。然后將鼠標移到面板的邊緣，當指針變成雙向箭頭的形狀后，按下左鍵進行拖動，可以改變面板的大小，如圖1-25所示。單擊面板組標題欄右側的按鈕，在彈出的下拉菜單中，可以對該面板進行重新組合、重新命名以及關閉該面板等操作，如圖1-26所示。鼠標變為此形狀按下并拖移可調整面板大小單擊此處彈出快捷菜單當鼠標變為此形狀時按下并拖動可分離面板組圖1-25分離面板組和改變面板大小圖1-26執行命令1.5Dreamweaver8新增功能作為業界領先的網頁制作軟件，Dreamweaver8這次除了增加許多精巧的改進和工作流程更加先進之外，在新功能中還加入了經過重新設計的CSS工具和后臺FTP，以及用于將XML文件轉換為設計完美且更友好地支持瀏覽器的文檔的工具。1.5.1輔助工具在Dreamweaver8的新增功能中，最明顯的就是其輔助功能，比如輔助線】和【選工取具】等。這些工具在制作網頁的過程中，可以更加精確地確定的位置。與圖像處理軟件或者按Ctrl+Alt+R快捷鍵顯示標尺。要改變標尺的單位，可以執行【查看】|【標尺】|【像素】（【英寸】/【厘米】）命令，默認情況下單位為像素。這樣就可以在文檔中創建輔助線了，如圖1-27所示。、【縮放工具】、【手形工具網頁的元素相同，輔助線是在顯示標尺的情況下創建的。執行【查看】|【標尺】|【顯示】命令，創建輔助線只須單擊標尺不放向文檔內部拖動即可，將鼠標停留在輔助線上，會以黃色文本框顯示輔助線與標尺的距離。按Ctrl鍵不放將鼠標停留在輔助線創建的方格內，會以白色文本框顯示出該方格的寬和高。圖1-27標尺顯示與輔助線創建要想刪除一條輔助線，用拖動的方法將相應的輔助線拖回標尺上即可，另外，可以執行【查看】|【輔助線】|【清除輔助線】命令來清除所有的輔助線。如果不想清除輔助線，只是暫時不想顯示，|【顯示輔助線】命令，按Ctrl+；快捷鍵。還可以執行【查看】可以執行【查看】|【輔助線】把【顯示輔助線】前面的對勾去掉。要想顯示輔助線，再次執行此命令即可，也可以|【輔助線】|【鎖定輔助線】命令把輔助線鎖定，處于鎖定狀態的輔助線，將不能拖動。用戶也可以對輔助線進行編輯，執行【查看】|【輔助線】|【編輯輔助線】命令，可以打開【輔助線】對話框，在【輔助線顏色】后面，單擊顏色樣表圖標按鈕圖1-28【輔助線】對話框，打開【顏色】拾色器，在其中可以為輔助線設置另一種顏色，也可以在其后面的文本框中直接輸入設定顏色的數值。也可以修改【距離顏色】的設置，距離顏色是指將鼠標指針保持在輔助線之間時，作為距離指示器出現的線條的顏色。在該對話框的下面，還有4個復選項，可以根據需要選中或者清除復選框，如圖1-28所示。在一般情況下，希望用戶不要對輔助線或其他功能的顏色進行更改，因為這些顏色都是經過專業人員設計的，以高亮顯示方便用戶觀察。在Dreamweaver中，布局表格與層是可以在網頁中的任何位置創建的，而輔助線可以確定其位置。要想將兩個以上的布局表格和層對齊，除了使用輔助線外，還可以使用【縮放工具】將頁面放大，結合【手形工具】移動頁面，選擇【選取工具】使其對齊，而這些工具在文檔窗口的狀態欄中，如圖1-29所示。1.5.2擴展的CSS支持在DreamweaverMX2004中，CSS功能已經非常強大。在此基礎上，Dreamweaver8在CSS方面提供了更強的支持。Dreamweaver8增強了復雜樣式表信息的顯示，減少了必須跳轉到網頁瀏覽器來檢查代碼設計的次數。圖1-29使用狀態欄中的輔助工具有幾個可視化設置提供了非常有用的查看方式，從而解決了查看復雜CSS布局這一難題。CSS面板現在完全重新設計為一個統一的面板，將DreamweaverMX2004中的眾多CSS面板集中到了一個位置。這樣CSS面板就變成了一個更富有可用性的控制面板，使用CSS面板可以快速確認樣式、編輯樣式、查看應用于頁面元素的樣式（就像查看段落、圖像和鏈接一樣）。確認應用于當前選定元素的CSSDreamweaver8在CSS面板中加入了一個摘要視圖，用于快速屬性。一個簡單的列表可供方便地查看哪種樣式中的哪種屬性被應用到當前選中的元素。執行【窗口】|【CSS樣式】命令，可以打開【CSS樣式】面板，單擊【添加屬性】，就會出現一個空白文本框，在該框的右邊單擊向下箭頭，在彈出的下拉列比如選中“Color”，就會在屬性列中添加一個Color屬性行，然后在該屬性行選擇一種顏色就可以了，