1、Evaluation Warning: The document was created with Spire.Doc for .NET.網頁設計與制作綜合實訓指導書網站開發的參考案例1.1規劃網站1策劃網網站主題題我們們網站是是德陽嘉嘉興別墅墅設計公公司公司遵遵循“奉奉獻精湛湛技藝、鑄鑄造溫馨馨家園、煉煉就英雄雄團隊、創創建百年年老店”的的發展理理念，堅堅持“客客戶至上上、重信信守約、質質優價平平、熱忱忱服務”的的經營宗宗旨，追追求“簡簡約明快快、美觀觀時尚、突突出個性性、實用用環保”的的裝飾風風格，以以新穎時時尚的設設計、規規范精致致的施工工和熱情情人性的的服務，為為業主構構筑溫馨馨、舒適

2、適、精美美、典雅雅的家園園。2確定網網站風格格確定好站點點主題后后，根據據該主題題選擇站站點的風風格。所所以本案案例所建建立的網網站是別別墅設計計類網站。本本網站的的主要特特點如下下：（1）設計計風格要要大眾化化，為了了提高瀏瀏覽速度度，盡量量減少圖圖片的使使用，更更多地使使用表格格或層實現現效果。（2）背景景顏色以以淡綠色色為主、白白色為輔輔，文字字顏色以以綠色為主主、黑色和淡綠綠色為輔輔。（3）文字字內容豐豐富、知知識性強強，標題題簡潔明明了，字字體一般般采用宋宋體，大大小一般般為122像素。3構思網網站欄目目結構先在紙上繪繪制網站站的欄目目結構草草圖，經經過反復復推敲，最最后確定定完整的

3、的欄目和和內容的的層次結結構。本本案例的的“別墅墅設計網網”的欄欄目結構構如表117-11所示。表17-11“別墅設設計網”的欄目目結構一級欄目二級欄目三級欄目及及內容頁頁面首頁indexx.httml設計風格：sjffg.hhtmllwyjchh_xxx_xxx.httml經典案例：jdaal.hhtmllwyjq_xx_xx.htmml作品展示：zpzzs.hhtmllwytx_xx_xx.htmml公司簡介：gsjjj.hhtmllwysc_xx_xx.htmml為了簡化對對網站的的瀏覽過過程，大大部分網網頁通過過二級欄欄目就能能瀏覽內內容頁面面，首頁頁的主菜菜單包括括4個菜單單項：設設

4、計風格格，經典典案例，作作品展示示，公司司簡介。4規劃網網站目錄錄結構和和鏈接結結構根據網站策策劃確定定的欄目目結構，創創建站點點目錄，一一個網站站的目錄錄結構要要求層次次清晰、井井然有序序，首頁頁、欄目目頁、內內容頁區區分明確確，有利利于日后后的修改改。“別別墅設計計網”的的目錄結結構，各各文件夾夾的所存存放文件件類型如如表177-3所所示。表17-33網網站的目目錄結構構及其存存放的文文件類型型文件夾名稱稱存放的文件件類型cssCSS樣式式文件。flashh 動畫文件、視視頻文件件。imagee圖像文件、照照片。text文字素材。webpaage_1一級頁面文文件，該該文件夾夾又有多多個子

5、文文件夾，例例如weebpaage_1_001。webpaage_2二級頁面文文件，該該文件夾夾又有多多個子文文件夾，例例如weebpaage_2_001。indexx.httml主頁網站的鏈接接結構與與目錄結結構不同同，網站站的目錄錄結構指指站點的的文件存存放結構構，一般般只有設設計人員員可以直直接看到到，而網網站的鏈鏈接結構構指網站站通過頁頁面之間間的聯系系表現的的結構，瀏瀏覽者瀏瀏覽網站站能夠觀觀察到這這種結構構。本網網站的鏈鏈接結構構采用“網網狀”鏈鏈接結構構，結構構圖如圖圖17-2所示示。圖17-22“網頁教教學網”中的鏈鏈接結構構5主要頁頁面布局局設計使用表格對對首頁與與其他幾幾個

6、主面面導航頁頁面的布布局結構構草圖進進行設計計，主頁頁布局結結構草圖圖如圖117-33所示，兩兩種形式式的導航航頁面布布局結構構草圖如如圖177-4和和圖177-5所所示。由于本網站站中許多多頁面都都采用圖圖17-5所示示的布局局結構，所所以可以以將該網網頁制作作成模板板。圖17-33主主頁的布布局結構構草圖圖17-44利利用“框架”制作的的導航頁頁面圖17-55利利用“表格、層層、浮動動框架”制作的的導航頁頁面1.2準準備素材材根據網站的的欄目、內內容設計計，鏈接接結構設設計，首首頁的布布局結構構，幾個個主要導導航頁面面的布局局結構，準準備所需需素材1準備文文本準備大量網網頁中所所需的文文字

7、資料料，可以以從各類類網站、各各種書籍籍中搜集集文字資資料，然然后制作作成woord文文檔或文文本文件件，注意意各種文文字資料料的文件件名命名名要科學學合理，避避免日后后找不到到所需的的文本內內容。2準備LLogoo利用Firrewoorkss或Phhotooshoop量身身定做本本網站的的Loggo標志志，Loogo標標志要與與本網站站的主題題相符，要要有新意意。3準備圖圖片及按按鈕根據需要到到網上或或素材光光盤中搜搜集所需需的圖片片和按鈕鈕、有些些圖片、按按鈕需要要自己利利用圖像像處理軟軟件制作作。注意意圖片文文件要盡盡可能小小。4準備動動畫網站中的動動畫最好好能突出出主題，起起到畫龍龍點

8、睛之之功效。動動畫一般般利用fflassh軟件件制作，本本網站主主頁和導導航頁的的標題動動畫就是是利用fflassh軟件件量身定定做。5建立庫庫項目網頁中經常常用到的的項目，例例如版權權區，可可以事先先定義為為庫項目目，以備備制作網網頁時重重復使用用，提高高工作效效率。1.3創創建網站站1創建本本地站點點在開始著手手設計網網頁之前前，首先先要定義義站點。因因為網頁頁只是網網站的一一個組成成部分，所所有設計計的網頁頁和相關關文件都都要放置置于站點點之中。定定義站點點的好處處是：定定義站點點以后的的所有操操作都是是在站點點統一監監控之下下進行。如如果使用用了外部部文件，DDreaamweeavee

9、r就會會自動檢檢測并予予以提示示和詢問問是否將將外部文文件復制制到站點點內，以以保持站站點的完完整性。如如果某個個文件夾夾或文件件重新命命名了，系系統會自自動更新新所有的的鏈接，以以保證原原有的鏈鏈接關系系的正確確性。創建站點之之前，要要求先建建立一個個文件夾夾，以便便創建站站點時為為站點指指定存儲儲位置。在在Winndowws操作作系統中中，打開開“資源源管理器器”，創創建一個個名為“網網頁教學學網”的的文件夾夾。創建站點在在第3章章已有詳詳細介紹紹，在此此只作簡簡要說明明，與第第3章中中的步驟驟有所區區別，這這里假設設事先已已申請了了主頁空空間，所所申址的的網址為為：zzzwebb.266

10、3000.coom.ccn，用用戶名和和密碼也也已經知知道。定義站點的的操作步步驟如下下：（1）在DDreaamweeaveer 88主窗口口中，單單擊菜單單【站點點】【新新建站點點】，將將彈出如如圖177-6所所示站點點定義對對話框。在在該對話話框中先先輸入站站點的名名稱，然然后輸入入網址，如如圖177-6所所示。接接著單擊擊【下一一步】按按鈕，進進入到下下一步操操作。（2）選擇擇“否，我我不想使使用服務務器技術術”單選選按鈕，然然后單擊擊【下一一步】按按鈕，進進入到下下一步操操作。（3）選擇擇“編輯輯我的計計算機上上的本地地副本，完完成后再再上傳到到服務器器（推薦薦）”單單選按鈕鈕，接著著

11、在下面面的文本本框中輸輸入站點點文件在在本地計計算機上上的存放放位置，也也可以選選擇存儲儲位置，然然后單擊擊【下一一步】按按鈕，進進入到下下一步操操作。（4）選擇擇連接到到遠程服服務器的的方式為為“FTTP”,然后分分別輸入入Webb服務器器的主機機名、在在服務器器上文件件的存儲儲位置、FFTP用用戶名、FFTP密密碼等參參數，如如圖177-7所所示。然然后單擊擊【下一一步】按按鈕。（5）選擇擇“否，不不啟用存存回和取取出”單單選按鈕鈕，如圖圖17-8所示示。接著著單擊【下下一步】按按鈕，此此時會顯顯示所定定義的站站點信息息。如果果發現有有誤可以以單擊【上上一步】按按鈕，返返回到上上一步操操作

12、的對對話框中中重新修修改。如如果站點點定義信信息符合合要求，可可以單擊擊【完成成】按鈕鈕，完成成站點的的定義。此時會自動動顯示“文文件”面面板，并并且會自自動切換換到新創創建的網網站。圖17-66輸輸入站點點名稱及及網址圖17-77設設置連接接遠程服服務器的的參數2網站目目錄結構構的搭建建創建站點后后，在“文文件”面面板中切切換到新新創建的的站點，然然后利用用快捷菜菜單創建建文件夾夾及子文文件夾，本本網站的的目錄結結構如圖圖17-9所示示。圖17-88選選擇是否否啟用存存回和取取出圖17-99“網頁教教學網站站”的目錄錄結構1.8查查看與設設置站點點地圖站點地圖使使用直觀觀的樹狀狀結構顯顯示網

13、站站中文件件的鏈接接關系，在在站點視視圖中可可以將文文件加入入到站點點中，或或者加入入、修改改、刪除除鏈接。1查看站站點地圖圖在“文件”面面板中，單單擊視圖圖列表中中的“地地圖視圖圖”，如如圖177-277所示，這這時，在在文件列列表中將將以站點點地圖的的方式顯顯示網站站的文件件，展現現出站點點中文件件之間的的鏈接關關系。單擊【展開開以顯示示本地和和遠端站站點】按按鈕 ，將將把以地地圖視圖圖顯示的的“文件件”面板板展開，如如圖177-288所示。在在圖177-288中單擊擊工具欄欄的【站站點地圖圖】按鈕鈕 ，從從其下拉拉菜單中中選擇“地地圖和文文件”，如如圖177-299所示，也也可以選選擇“

14、僅僅地圖”。在站點地圖圖視圖中中，首頁頁文檔iindeex.hhtmll顯示在在最上方方，在iindeex.hhtmll文件名名下方的的頁面都都是由首首頁所鏈鏈向的頁頁面。在在站點地地圖視圖圖中，不不僅能顯顯示出內內部鏈接接，還能能顯示出出外部鏈鏈接、電電子郵件件鏈接、外外部樣式式文件、圖圖像文件件等。圖17-227選擇“地圖視視圖”圖17-228站點文文件以“地圖”形式顯顯示2站點地地圖中的的操作（1）隱藏藏文件在站點地圖圖中選定定一個或或幾個要要隱藏的的文件，然然后單擊擊鼠標右右鍵，在在彈出的的快捷菜菜單單擊擊【顯示示/隱藏藏】命令令，被選選中的文文件就會會在站點點地圖中中消失。圖17-2

15、29“站點地地圖”下拉菜菜單注意如果菜單【查查看】【站點點地圖選選項】中中的級聯聯菜單項項【顯示示標記為為隱藏的的文件】已已經被選選中，則則設置隱隱藏文件件時，文文件就不不會從站站點地圖圖中消失失了。（2）顯示示文件如果要顯示示隱藏的的文件，可可以單擊擊菜單【查查看】【站點點地圖選選項】【顯示示標記為為隱藏的的文件】。在站點地圖圖可進行行的操作作較多，例例如可以以完成“鏈鏈接到新新文件”、“鏈鏈接到已已有文件件”、“改改變鏈接接”、“移移除鏈接接”、“打打開鏈接接源”、“顯顯示網頁頁標題”等等操作。3保存站站點地圖圖站點地圖可可以作為為圖形文文件保存存，操作作很簡單單，單擊擊菜單【文文件】【保

16、存存站點地地圖】，在在彈出的的“保存存站點地地圖”對對話框，輸輸入文件件名，單單擊【保保存】按按鈕即可可。如圖圖17-30所所示即為為所保存存的站點點地圖。圖17-330所保存存的站點點地圖1.9測測試網站站一個網站包包含很多多鏈接，可可能會出出現鏈接接錯誤或或斷鏈現現象，在在發布站站點前有有必要檢檢查整個個站點的的鏈接，以以避免站站點發布布之后出出現無效效鏈接情情形。利利用Drreammweaaverr 8提提供的“檢檢查鏈接接”可以以檢查網網站中存存在斷鏈鏈、孤立立文件等等。鏈接檢查無無誤后，可可以在瀏瀏覽器中中瀏覽各各個網頁頁，檢查查文字、圖圖片、鏈鏈接是否否有誤、是是否會出出現亂碼碼，

17、網網頁元素素定位是是否準確確，瀏覽覽速度和和視覺效效果是否否滿意。經經過測試試、修改改、再測測試、再再修改，反反復多次次循環，直直到各方方面都合合格方可可發布網網站。1.10發布網網站發布網站就就是把網網頁文件件上傳到到Webb服務器器，發布布網站之之前先必必須申請請一個主主頁空間間，擁有有網頁空空間的訪訪問域名名、FTTP用戶戶名和密密碼。如如果主頁頁空間已已成功申申請，可可以先與與遠程WWeb服服務器進進行連接接，連接接成功后后，再通通過單擊擊“文件”面板上上的【上上傳文件件】按鈕鈕，往遠遠程Weeb服務務器中上上傳本地地站點，上上傳成功功后，就就可以在在瀏覽器器中輸入入正確的的網址訪訪問

18、網站站了。分工：艾燕燕萍負責責首頁iindeex.hhtmll，子頁頁gsjjj.hhtmll，收集素素材，報報告書書書寫 張娟娟負責子子頁shhejiifg.htmml，收收集素材材，報告告書書寫寫 謝明明吉負責責子頁jjdall.httml，收收集素材材，報告告書書寫寫子頁頁zpzzs.hhtmll由張娟娟和謝明明吉合伙伙完成素材材是大家家一起收收集，然然后篩選選出好的的，報告告書是大大家一起起討論著著寫的，總之，差不多每項每個人都有參與，只是專攻方向不同。 遇到的問問題有：首頁HEAAD圖太太大，無無法調小小，HEEAD層層無法正正確插入入FLAASH，不不知道要要怎么樣樣調整。用有些瀏覽覽器預覽覽要錯位位，不能能確定是是瀏覽器器的問題題還是自自己代碼碼沒有處處理好，因因為