tp6-網(wǎng)站設(shè)計(jì)和網(wǎng)頁布局技術(shù)(一)

《tp6-網(wǎng)站設(shè)計(jì)和網(wǎng)頁布局技術(shù)(一)》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。

1、第六章網(wǎng)站設(shè)計(jì)和頁面布局技術(shù)（一）一、網(wǎng)站的開發(fā)流程需求分析――>網(wǎng)站制作――>測試網(wǎng)頁――>發(fā)布網(wǎng)站1、需求分析：需求分析之所以重要，是因?yàn)樗哂心康男?、方向性、決策性。他的任務(wù)就是解決“做什么”，就是要全面地理解客戶的各項(xiàng)需求，并且能夠準(zhǔn)確、清晰地表達(dá)給參與項(xiàng)目開發(fā)的所有成員，保證開發(fā)過程按照客戶的需求去做，而不是為技術(shù)而遷就需求?？蛻粜枨髽I(yè)務(wù)背景(網(wǎng)站功能)網(wǎng)上求職類選擇原則：*主體要小而精煉*題材最好是自己熟悉的*題材不要太濫注意：*建設(shè)的網(wǎng)站不要“面面俱到”*建設(shè)專業(yè)性要強(qiáng)*主體要鮮明網(wǎng)上聊天/即時(shí)信息/

2、ICQ類網(wǎng)上社區(qū)/討論/郵件列表類信息技術(shù)類網(wǎng)頁/網(wǎng)站開發(fā)類娛樂類旅行類參考/資訊類家庭/教育類生活/時(shí)尚類設(shè)計(jì)風(fēng)格合理的網(wǎng)頁布局，讓網(wǎng)站logo盡可能地出現(xiàn)在每個(gè)頁面的頁眉中。將文字、鏈接、圖片、背景、邊框等盡量與主色調(diào)一致突出字體特色：在關(guān)鍵的標(biāo)題、菜單、圖片里使用統(tǒng)一字體和顏色。使用特效，讓網(wǎng)頁看起來生動(dòng)活潑。網(wǎng)站主體鮮明，整體實(shí)用性強(qiáng)、內(nèi)容切合度好等。網(wǎng)站內(nèi)容(例：淘寶網(wǎng)）公司簡介、商品分類、商品展示、價(jià)格信息、商品搜索、網(wǎng)上訂單、會(huì)員注冊(cè)、客戶服務(wù)等。確認(rèn)需求制作網(wǎng)站之前，最好讓美工人員或UI（useri

3、nterface用戶界面）設(shè)計(jì)人員將需求捕獲活動(dòng)結(jié)果加以適當(dāng)?shù)姆治?，然后設(shè)計(jì)一個(gè)用戶可以直接感知的靜態(tài)的網(wǎng)站樣板，也就是要做網(wǎng)站的靜態(tài)圖片版。方便用戶與開發(fā)人員就網(wǎng)站系統(tǒng)的業(yè)務(wù)背景、設(shè)計(jì)風(fēng)格、網(wǎng)站內(nèi)容達(dá)成共識(shí)，并建立需求變更制度與流程，方便后期的制作與完善。2、網(wǎng)站制作：主要包括創(chuàng)建站點(diǎn)、制作首頁、制作模板、制作樣式。3、測試網(wǎng)頁：第一，頁面的效果是否美觀：整體視覺效果、美工設(shè)計(jì)、頁面布局、內(nèi)容實(shí)力、親和力；第二，頁面中的鏈接（Dreamweaver中的“檢查鏈接”命令）是否完好；第三，是否兼容不同的瀏覽器。4、發(fā)

4、布網(wǎng)站：本地發(fā)布通過IIS來構(gòu)建本地web發(fā)布平臺(tái)，這種發(fā)布只能讓局域網(wǎng)中的用戶訪問站點(diǎn)。遠(yuǎn)程發(fā)布即登錄到Internet上，然后利用有些Internet服務(wù)商提供的個(gè)人網(wǎng)站控件來真是地發(fā)布網(wǎng)站：首先要申請(qǐng)一個(gè)域名和虛擬主機(jī)，申請(qǐng)成功后Internet服務(wù)商就會(huì)給你一個(gè)IP地址、用戶名和密碼，使用此IP地址、用戶名和密碼就可以把網(wǎng)站上傳到Internet上，Internet上的用戶才能訪問到你的站點(diǎn)。3二、創(chuàng)建站點(diǎn)1、步驟：本地站點(diǎn)（靜態(tài)網(wǎng)站）：第一步：在本地磁盤創(chuàng)建一個(gè)文件文件夾：用于存放站點(diǎn)，可以空，也可以非空

5、。第二步：站點(diǎn)——>管理站點(diǎn)——>新建——>站點(diǎn)——>輸入站點(diǎn)名稱（就上上一步在磁盤中創(chuàng)建的文件夾的名稱）——>下一步——>選擇“否，我不想使用服務(wù)器技術(shù)”——>下一步——>選擇“編輯我的計(jì)算機(jī)上的本地副本，完成后在上傳到服務(wù)器（推薦）”單選按鈕——>單擊“您把文件存放在計(jì)算機(jī)的什么位置？”右邊的文件夾圖標(biāo)——>選擇第一步創(chuàng)建的文件夾——>下一步——>在“您如何鏈接到遠(yuǎn)程服務(wù)器？”下拉列表框中選擇“無”——>完成——>確定（窗體右邊就會(huì)出現(xiàn)一個(gè)“文件”視圖）第三步：在站點(diǎn)中創(chuàng)建文件夾：右擊上一步創(chuàng)建的站點(diǎn)——>新建

6、文件夾（用來保存素材和各種網(wǎng)頁）2、關(guān)于站點(diǎn)本地站點(diǎn)本地站點(diǎn)是指存儲(chǔ)web文件夾和文檔的文件夾。定義站點(diǎn)是設(shè)計(jì)網(wǎng)站的第一步，包含的文件存儲(chǔ)在本地磁盤中。當(dāng)需要更新網(wǎng)站的文件時(shí)，就可以編輯本地站點(diǎn)中相應(yīng)的頁面，然后上傳到遠(yuǎn)程服務(wù)器進(jìn)行更新。*必須為每個(gè)網(wǎng)站定義一個(gè)本地站點(diǎn)。遠(yuǎn)程站點(diǎn)也就是常說的網(wǎng)站（Web）服務(wù)器。在建立遠(yuǎn)程站點(diǎn)之前，必須先創(chuàng)建一個(gè)本地站點(diǎn)（該本地站點(diǎn)將與遠(yuǎn)程站點(diǎn)關(guān)聯(lián)）。建立遠(yuǎn)程站點(diǎn)之后，即可上傳文件或下載文件到本地站點(diǎn)中。根文件夾是指存儲(chǔ)所有網(wǎng)站文件愛你的本地文件夾，站點(diǎn)的本地根文件夾應(yīng)該是專門為該

7、站點(diǎn)創(chuàng)建的。三、頁面布局技術(shù)3框架布局、表格布局、DIV層布局、最佳布局框架布局優(yōu)點(diǎn)*在框架窗口中支持滾動(dòng)條，從而能顯示更多內(nèi)容。*能有效的實(shí)現(xiàn)頁面導(dǎo)航，方便用戶瀏覽網(wǎng)頁。*由于框架集中相同的內(nèi)容只用下載一次，不同的內(nèi)容才需要重新下載，所以框架布局的網(wǎng)頁能減少頁面下載時(shí)間。缺點(diǎn)*瀏覽器兼容性差*保存框架集網(wǎng)頁麻煩（不但要保存框架集本身頁面，還要半寸每個(gè)框架窗口中的網(wǎng)頁文件適用論壇、小型商業(yè)網(wǎng)站、各種網(wǎng)頁形式的教學(xué)課程表格布局優(yōu)點(diǎn)*規(guī)劃頁面：可以很方便的排列有規(guī)律、結(jié)構(gòu)均勻的內(nèi)容和數(shù)據(jù)。缺點(diǎn)*表格過多，會(huì)產(chǎn)生很多垃圾

8、代碼，影響下載速度。*靈活性差，不易修改和擴(kuò)展：當(dāng)頁面布局需要調(diào)整時(shí)，往往都要重新制作表格。適用適合用來布局很規(guī)整的內(nèi)容或數(shù)據(jù)DIV層布局優(yōu)點(diǎn)*減少頁面代碼，提高頁面顯示速度和下載速度。*結(jié)構(gòu)清晰，容易被搜索引擎搜索到。*改版方便，而且縮短改版時(shí)間。*強(qiáng)大的字體控制和排版能力。*表現(xiàn)和內(nèi)容向分離，方便美工與程序員分工協(xié)作。*更能體現(xiàn)樣式和結(jié)構(gòu)向分離，結(jié)構(gòu)的重