1、 網(wǎng)頁制作案例教程 毋建軍 鄭寶昆 郭銳 編著 清華大學(xué)出版社第2章 網(wǎng)站設(shè)計與開發(fā)流程本章學(xué)習(xí)目標(biāo)（知識要點）n網(wǎng)站開發(fā)的基本流程n網(wǎng)站建站目標(biāo)設(shè)計（定位網(wǎng)站主題和名稱、定位網(wǎng)站CI形象、定位網(wǎng)站CI形象）n網(wǎng)站站點內(nèi)容結(jié)構(gòu)組織（確定欄目和版塊、確定網(wǎng)站的目錄結(jié)構(gòu)和鏈接結(jié)構(gòu)、確定網(wǎng)站的整體風(fēng)格創(chuàng)意設(shè)計）n網(wǎng)站建站素材收集n網(wǎng)站功能結(jié)構(gòu)設(shè)計n網(wǎng)站頁面結(jié)構(gòu)設(shè)計n網(wǎng)站功能模塊頁面實現(xiàn)n網(wǎng)站功能模塊頁面測試n網(wǎng)站系統(tǒng)部署、推廣本章學(xué)習(xí)導(dǎo)航n網(wǎng)站設(shè)計與開發(fā)的基本流程和相關(guān)知識，是設(shè)計和開發(fā)一個網(wǎng)站的基本規(guī)范，也是初學(xué)者從宏觀整體上設(shè)計和開發(fā)一個網(wǎng)站基本框架。本章重點了網(wǎng)站設(shè)計與開發(fā)的四個階段流程，并對

2、每一個階段和流程都進行了詳細介紹，采用理論和實例結(jié)合的方式，以助初學(xué)者從整體角度掌握和理解網(wǎng)站設(shè)計、開發(fā)、部署及推廣的基本方法。n本章內(nèi)容在全書知識結(jié)構(gòu)中所處位置如圖所示 基礎(chǔ)篇HTML篇CSS篇JavaScript篇提高篇網(wǎng) 頁 設(shè) 計 與 開 發(fā) 流 程（AscentSys醫(yī)藥商務(wù)系統(tǒng)）網(wǎng)頁制作基礎(chǔ)HTML基礎(chǔ)網(wǎng)頁基本元素設(shè)計網(wǎng)頁布局規(guī)劃設(shè)計交互式網(wǎng)頁表單的設(shè)計與使用利用模板和庫創(chuàng)建網(wǎng)頁CSS樣式表使用CSS布局規(guī)劃網(wǎng)頁JavaScript網(wǎng)頁應(yīng)用Javascript概述網(wǎng)頁中常見Flash制作Web服務(wù)器創(chuàng)建網(wǎng)站發(fā)布、測試和維護2.1 網(wǎng)站開發(fā)流程2.1.1 2.1.1 網(wǎng)站的需求分析網(wǎng)

3、站的需求分析 本書AscentSys醫(yī)藥系統(tǒng)客戶的基本需求是：對于前端用戶，通過系統(tǒng)能夠登陸、了解到已公開發(fā)布的商品，對自己需要的商品進行采購，包括查詢商品，購買商品，下訂單等流程。對于后端系統(tǒng)管理員，通過系統(tǒng)能夠進行用戶管理:，商品管理，訂單管理，郵件管理等。艾斯醫(yī)藥系統(tǒng)是基于網(wǎng)上購物的應(yīng)用軟件,在該系統(tǒng)上能了解到已公開發(fā)布的商品，對自己需要的商品進行采購。包括查詢藥品，購買藥品，下訂單等流程，方便快捷實現(xiàn)購物過程。 2.1.2 2.1.2 網(wǎng)站系統(tǒng)規(guī)劃設(shè)計網(wǎng)站系統(tǒng)規(guī)劃設(shè)計 網(wǎng)站系統(tǒng)的規(guī)劃、設(shè)計主要包含兩個部分：n網(wǎng)站系統(tǒng)總體設(shè)計n網(wǎng)站系統(tǒng)功能設(shè)計。 網(wǎng)站系統(tǒng)總體設(shè)計包含網(wǎng)站建站目標(biāo)的設(shè)計確

4、定、網(wǎng)站站點內(nèi)容結(jié)構(gòu)組織、網(wǎng)站建站素材收集等內(nèi)容。網(wǎng)站功能設(shè)計包含網(wǎng)站功能模塊頁面設(shè)計等內(nèi)容。 n1、網(wǎng)站系統(tǒng)總體設(shè)計n1）網(wǎng)站建站目標(biāo)設(shè)計n定位網(wǎng)站主題和名稱n定位網(wǎng)站CI形象 n定位網(wǎng)站的類型n定位網(wǎng)站主題和名稱 遵循以下原則：n主題不能過于分散，主題要小而精。因為網(wǎng)頁主題越集中，一般情況下網(wǎng)頁所 有者在這方面投入的精力會更多，因此所提供信息的質(zhì)量也會越高。n主題要明確、突出，實現(xiàn)功能確定n主題應(yīng)涵蓋網(wǎng)頁的核心內(nèi)容n主題的設(shè)計要兼顧用戶的注意力及搜索引擎檢索的需要 n定位網(wǎng)站CI形象n網(wǎng)站的標(biāo)志(logo)設(shè)計 n網(wǎng)站的標(biāo)準(zhǔn)色彩設(shè)計 n 網(wǎng)站的標(biāo)準(zhǔn)字體設(shè)計 n網(wǎng)站的宣傳標(biāo)語設(shè)計 n2）網(wǎng)站

5、站點內(nèi)容結(jié)構(gòu)組織n網(wǎng)站站點內(nèi)容結(jié)構(gòu)組織包含三個方面 n確定欄目和版塊 n確定網(wǎng)站的目錄結(jié)構(gòu)和鏈接結(jié)構(gòu)n 確定網(wǎng)站的整體風(fēng)格創(chuàng)意設(shè)計 n確定欄目和版塊 n設(shè)置網(wǎng)站欄目的基本原則：n各版塊要有相對獨立性。n各版塊要有相互關(guān)聯(lián)。n版塊的內(nèi)容要圍繞站點主題。 n設(shè)置網(wǎng)站一般的網(wǎng)站欄目安排要注意的方面：n 版塊內(nèi)容緊扣網(wǎng)站的主題 n設(shè)一個最近更新或網(wǎng)站指南欄目n建議您設(shè)置“本站指南”欄目 n設(shè)定一個可以雙向交流的欄目 n設(shè)一個下載或常見問題回答欄目 n確定網(wǎng)站的目錄結(jié)構(gòu)和鏈接結(jié)構(gòu) n網(wǎng)站的目錄結(jié)構(gòu) n網(wǎng)站的鏈接結(jié)構(gòu) 網(wǎng)站的鏈接結(jié)構(gòu)主要作用在于：用最少的鏈接，使得瀏覽最有效率。 n3）網(wǎng)站建站素材收集n素

6、材的來源有多種，主要有網(wǎng)絡(luò)搜集和自己制作兩種方式 n2、網(wǎng)站系統(tǒng)功能設(shè)計n本書案例Ascentsys醫(yī)藥商務(wù)系統(tǒng)網(wǎng)站功能結(jié)構(gòu)設(shè)計模塊如下圖所示Ascentsys醫(yī)藥商務(wù)系統(tǒng)商品管理郵件管理用戶管理訂單管理商品查詢商品瀏覽后臺管理注冊登錄游客登錄購物注冊2.1.3 網(wǎng)站的開發(fā)網(wǎng)站的開發(fā) n1、網(wǎng)站功能模塊頁面實現(xiàn)nAscentSys醫(yī)藥系統(tǒng)網(wǎng)站系統(tǒng)功能模塊結(jié)構(gòu)設(shè)計，從系統(tǒng)管理、用戶管理、游客功能、其他頁面四個部分來實現(xiàn)頁面功能。 n2、網(wǎng)站功能模塊頁面測試 n網(wǎng)站功能測試就是對產(chǎn)品的各功能進行驗證，根據(jù)功能測試用例，逐項測試，檢查產(chǎn)品是否達到用戶要求的功能。常用的測試方法有：頁面鏈接檢查、相關(guān)性

7、檢查、字符類型檢查、中文字符處理等許多方面。2.1.4 網(wǎng)站系統(tǒng)部署、推廣網(wǎng)站系統(tǒng)部署、推廣n網(wǎng)站系統(tǒng)的部署、推廣工作，通常包含：網(wǎng)站域名和空間申請、網(wǎng)站上傳和訪問測試、網(wǎng)站推廣、維護、更新三大部分。 2.2 創(chuàng)建創(chuàng)建AscentSys醫(yī)藥系統(tǒng)站點醫(yī)藥系統(tǒng)站點 使用Dreamweaver CS3工具創(chuàng)建AscentSys醫(yī)藥系統(tǒng)站點。 n1、創(chuàng)建AscentSys醫(yī)藥系統(tǒng)本地站點 n1）打開Dreamweaver CS3，選擇“站點”“新建站點”，彈出對話框，并輸入站點名稱“AscentSys”，如圖2-2-1所示 圖2-2-1 AscentSys站點定義 n2）單擊“下一步”，選擇默認(rèn)設(shè)置（

8、否），繼續(xù)“下一步”，在彈出的對話框中，可以選擇修改網(wǎng)站的存儲目錄路徑，如圖2-2-2所示 圖2-2-2 網(wǎng)站系統(tǒng)存儲路徑n3）單擊“下一步”，在彈出的對話框中，修改文件在服務(wù)器上的存儲位置。如圖2-2-3所示 圖2-2-3 文件服務(wù)器存儲路徑n4）單擊“下一步”，選擇默認(rèn)選擇，如圖2-2-4所示圖2-2-4 不啟用存儲和取出n5）單擊“下一步”，彈出如圖2-2-5所示對話框，上面顯示剛才所定義配置的站點信息，單擊“完成”，完成站點創(chuàng)建設(shè)置。 圖 2-2-5 站點設(shè)置信息n6）創(chuàng)建成功的站點，在“文件”面板中顯示，如圖2-2-6所示 圖2-2-6 完成站點設(shè)置n2、創(chuàng)建AscentSys醫(yī)藥系統(tǒng)站點目錄 在上述站點創(chuàng)建成功的基礎(chǔ)上，創(chuàng)建AscentSys站點目錄。n1）選中“站點”，點擊右鍵，菜單選擇“新建文件夾”，在新建的文件夾中輸入目錄名稱“images”，依次同樣建立目錄“css”、“flas