1.4 案例實施過程：企業(yè)網(wǎng)站的規(guī)劃和站點的管理

1.4.1 網(wǎng)站的需求分析階段

首先是確定建站目標(biāo)和網(wǎng)站需求分析。“大尚鞋業(yè)有限公司”的建站目的是宣傳企業(yè)信息和產(chǎn)品信息，通過互聯(lián)網(wǎng)讓更多的用戶了解企業(yè)的情況，包括企業(yè)的規(guī)模、歷史、經(jīng)營理念、企業(yè)動態(tài)、主要產(chǎn)品、最新產(chǎn)品、相關(guān)產(chǎn)品的介紹等，語言采用簡體中文，以展現(xiàn)企業(yè)的良好形象。

網(wǎng)站的需求分析主要分功能性需求和非功能性需求。功能性需求是指具體的完成內(nèi)容的需求。非功能性需求是指除功能需求以外為滿足用戶業(yè)務(wù)需求而必須具有的特性，包括系統(tǒng)的性能、可靠性、可維護(hù)性、可擴(kuò)充性和對技術(shù)、業(yè)務(wù)的適應(yīng)性等。大尚鞋業(yè)網(wǎng)站的功能需求，主要包含以下幾條內(nèi)容：

? 企業(yè)展示宣傳，通過網(wǎng)站向消費者展現(xiàn)企業(yè)的雄厚實力；

? 發(fā)布信息，瀏覽者通過網(wǎng)站可以得知企業(yè)最新新聞資訊；

? 加強(qiáng)與客戶的溝通，收集整理消費者/代理經(jīng)銷商投訴、咨詢及建議，并及時反饋；

? 產(chǎn)品展示，瀏覽者通過網(wǎng)站可得到有關(guān)企業(yè)產(chǎn)品詳細(xì)信息；

? 網(wǎng)絡(luò)招聘，應(yīng)聘者可通過網(wǎng)絡(luò)發(fā)送簡歷。

非功能需求主要包含以下幾條內(nèi)容：

? 網(wǎng)站運行環(huán)境，域名、空間的申請；

? 網(wǎng)站的后期維護(hù)和更新；

? 網(wǎng)站的擴(kuò)展接口的設(shè)計。

完成網(wǎng)站需求分析后，進(jìn)入網(wǎng)站的規(guī)劃階段。

1.4.2 網(wǎng)站的規(guī)劃

網(wǎng)站的規(guī)劃主要從網(wǎng)站的風(fēng)格、網(wǎng)站布局和網(wǎng)站內(nèi)容3個方面考慮。

1.網(wǎng)站風(fēng)格

網(wǎng)站的風(fēng)格是指網(wǎng)頁的所有元素，包括網(wǎng)頁的布局模式、文字、顏色等組成后給用戶的視覺印象。風(fēng)格是抽象的，是用戶對網(wǎng)站的綜合感受，是向用戶展現(xiàn)網(wǎng)站的整體形象，如用戶對網(wǎng)站的感受是嚴(yán)肅的、專業(yè)的或活潑的。在網(wǎng)站的建設(shè)初期，確定網(wǎng)站面對的用戶群和網(wǎng)站的內(nèi)容，定義好網(wǎng)站的風(fēng)格，營造統(tǒng)一、獨特的風(fēng)格，協(xié)調(diào)網(wǎng)頁的色調(diào)，選擇適當(dāng)?shù)木€條和形狀，適當(dāng)美化以突出主題內(nèi)容，這就是網(wǎng)站風(fēng)格的主要內(nèi)容。本書案例“大尚鞋業(yè)”的網(wǎng)站是一個企業(yè)網(wǎng)站，公司產(chǎn)品是以鞋為主，并以女性的鞋為主要銷售類別，產(chǎn)品以大眾化產(chǎn)品為主，所以在色彩上采用白色背景，淺藍(lán)色為主要色調(diào)。

2.網(wǎng)站布局

網(wǎng)頁的布局主要有三大類，“國”字型、框架型和封面型。“國”字型又稱為“同”字型，是從上之下的布局模式，網(wǎng)頁布局按照“網(wǎng)站標(biāo)志→導(dǎo)航條（或Banner廣告）→主要內(nèi)容→版權(quán)信息”的順序進(jìn)行設(shè)計，外觀方正整潔。一般企業(yè)網(wǎng)站、門戶網(wǎng)站采用“國”字型結(jié)構(gòu)。框架型又可以分為上下框架和左右框架，常常使用在論壇、網(wǎng)站后臺、郵箱系統(tǒng)的布局設(shè)計。封面型的布局是首頁采用一般Flash的動畫或一幅主題圖像為主，是一種個性化的結(jié)構(gòu)，比較適合用在個人網(wǎng)站、娛樂網(wǎng)站、游戲網(wǎng)站或其他的主題網(wǎng)站。由于大尚鞋業(yè)為典型的企業(yè)網(wǎng)站，所以采用“國”字型的布局結(jié)構(gòu)，配合淺藍(lán)色的主色調(diào)。

3.網(wǎng)站內(nèi)容

站點的內(nèi)容除了首頁外，還劃分4個主題，分別是“關(guān)于我們”“新聞資訊”“產(chǎn)品中心”和“聯(lián)系我們”（見圖1-4-1）。

（1）首頁：網(wǎng)站首頁是一個網(wǎng)站的入口，首頁的內(nèi)容基本是網(wǎng)站信息的縮影，通過首頁，用戶可以了解到網(wǎng)站的內(nèi)容，引導(dǎo)用戶瀏覽網(wǎng)站其他網(wǎng)頁的內(nèi)容，首頁也相當(dāng)于是網(wǎng)站的目錄或?qū)Ш健?/p>

（2）關(guān)于我們：“關(guān)于我們”是對企業(yè)的情況進(jìn)行簡介，包括企業(yè)的規(guī)模，發(fā)展歷史，公司文化，經(jīng)營理念，證書資質(zhì)等，可以劃分為“公司簡介”“經(jīng)營理念”“證書資質(zhì)”3個子欄目。

（3）新聞資訊：企業(yè)網(wǎng)站的特色之一就是能通過新聞資訊展現(xiàn)企業(yè)的目前情況，新聞資訊分為“公司新聞”和“行業(yè)資訊”兩個子模塊。

（4）產(chǎn)品中心：產(chǎn)品中心的作用是通過網(wǎng)站來介紹和推薦產(chǎn)品，將不同類的產(chǎn)品分別展示出來。

（5）聯(lián)系我們：“聯(lián)系我們”可以分為“聯(lián)系我們”和“客戶留言”兩個部分，“聯(lián)系我們”的內(nèi)容為企業(yè)的地址、郵箱、電話、QQ 或其他即時通信工具的聯(lián)系方式；“客戶留言”方便用戶留下信息，也有利于企業(yè)發(fā)現(xiàn)問題和聯(lián)系有意向的客戶。

1.4.3 站點管理

完成網(wǎng)站內(nèi)容規(guī)劃后，進(jìn)行網(wǎng)站文件的規(guī)劃。網(wǎng)站文件的規(guī)劃是對網(wǎng)站中所有文件，即網(wǎng)頁文件、圖片、CSS文件、JS文件等內(nèi)容進(jìn)行合理的安排。

創(chuàng)建網(wǎng)站要從創(chuàng)建站點開始。站點又分為本地站點和遠(yuǎn)程站點。本地站點是指本地硬盤中存放網(wǎng)站所有文檔的文件夾，本書中所涉及的站點指的都是本地站點；網(wǎng)站中的遠(yuǎn)程站點常常指的是遠(yuǎn)程服務(wù)器，即是指將通過網(wǎng)絡(luò)連接的方式，將網(wǎng)站的文件上傳到在網(wǎng)絡(luò)中提供網(wǎng)站存儲的指定的位置。

創(chuàng)建本地站點就是在本地計算機(jī)上創(chuàng)建一個文件夾用來存放網(wǎng)站所有的文件和文件夾。在進(jìn)行網(wǎng)頁制作前必須先建好站點，并采用網(wǎng)頁編輯工具來實現(xiàn)站點的管理和網(wǎng)頁的制作。

在 Dreamweaver CS6中創(chuàng)建站點，命名為“dashang”，并創(chuàng)建站點的圖像文件夾為“images”，創(chuàng)建網(wǎng)站的首頁文檔“index.html”。其操作步驟如下：

打開Dreamweaver CS6，單擊菜單欄中的【站點】→【新建站點】，打開【站點設(shè)置對象】對話框，在【站點】→【站點名稱】的輸入框中輸入“dashang”，單擊【本地站點文件夾】輸入框后面的【瀏覽文件夾】按鈕，打開【選擇根文件夾】對話框，在【選擇】中選擇位置，在【名稱】中單擊將設(shè)置為站點的文件夾（如需要新建文件夾，則單擊鼠標(biāo)右鍵，在菜單中選擇【新建文件夾】，或單擊【選擇】輸入框旁的【創(chuàng)建新文件夾】按鈕），按【選擇】按鈕確定（見圖1-4-2）。

單擊左邊命令中的【高級設(shè)置】→【本地信息】→【默認(rèn)圖像文件夾】，單擊【瀏覽文件夾】按鈕，選擇站點“dashang”文件夾內(nèi)的“images”文件夾（圖像文件夾必須位于站點文件夾內(nèi)），單擊【打開】（見圖1-4-3），進(jìn)入“images”文件夾，再單擊【選擇】按鈕。

選中【文件】工具面板中的【本地文件】的站點名稱，單擊鼠標(biāo)右鍵，在彈出的菜單用選擇“新建文件”，并將網(wǎng)頁名稱改為“index.html”（見圖1-4-4），也可以采用其他新建HTML網(wǎng)頁的方式創(chuàng)建首頁。

在Dreamweaver CS6中打開“index.html”文件，在設(shè)計視圖中輸入一行文字：“這是網(wǎng)站的首頁”，并修改標(biāo)題的內(nèi)容為“首頁”，然后保存網(wǎng)頁單擊按鈕下的【預(yù)覽在IExplore】選項（見圖1-4-5），在IE瀏覽器中預(yù)覽網(wǎng)頁的效果。

單擊彈出的對話框中的【是】（見圖1-4-6），打開IE瀏覽器，顯示網(wǎng)頁“index.html”的預(yù)覽效果（見圖1-4-7）。