HTML5+CSS3+Bootstrap響應式Web前端設(shè)計（慕課版）（第2版） 課件 第07章網(wǎng)站建設(shè)流程

第7章網(wǎng)站建設(shè)流程《HTML5+CSS3+Bootstrap響應式Web前端設(shè)計（第2版）》目錄/Contents020301確定網(wǎng)站主題網(wǎng)站結(jié)構(gòu)規(guī)劃明確網(wǎng)站定位0506網(wǎng)站設(shè)計原則網(wǎng)站測試發(fā)布04收集網(wǎng)站內(nèi)容在開始制作網(wǎng)頁之前，建議應用少量時間對自己要制作的主頁進行總體設(shè)計，例如希望主頁是怎樣的風格，應該放一些什么信息，其他網(wǎng)頁如何設(shè)計，分幾層來處理等等。一個好的網(wǎng)站首先是內(nèi)容豐富，其次就是網(wǎng)頁設(shè)計美觀。網(wǎng)站建設(shè)流程網(wǎng)頁＝技術(shù)＋藝術(shù)如何一步步來構(gòu)造技術(shù)與創(chuàng)意兼得的網(wǎng)站？網(wǎng)站建設(shè)流程明確網(wǎng)站定位7.1如果我們要對網(wǎng)站進行界面設(shè)計，就必須先明確建設(shè)網(wǎng)站的原因。如：建立網(wǎng)站是為了銷售產(chǎn)品，還是進行商業(yè)服務。你的目標用戶是誰，他們能從你的網(wǎng)站上得到什么。你想從網(wǎng)站中獲得怎樣的回報。即使目標相似，具體的設(shè)計方案也會根據(jù)客戶的不同情況而有所差別，這些差別反映出網(wǎng)站的特殊性。明確網(wǎng)站定位明確網(wǎng)站定位的過程，就是找出客戶的優(yōu)勢、特色和行銷方式的過程。如果客戶對自己所建立的網(wǎng)站還沒有清晰的認識，設(shè)計師可以通過以下幾個問題來引導客戶。明確網(wǎng)站定位問題1：你要建設(shè)網(wǎng)站的目的是什么？問題2：你設(shè)想中的網(wǎng)站規(guī)模是多大？問題3：目標用戶的統(tǒng)一特征是什么？

或者說，網(wǎng)站所針對的人群、區(qū)域、國家是什么？通俗點就是“誰在看？”問題4：網(wǎng)站的收入來源是哪幾個部分？問題5：關(guān)于網(wǎng)站實現(xiàn)的技術(shù)，你的想法是怎樣的？問題6：網(wǎng)站的設(shè)計風格上，你有什么要求？2明確網(wǎng)站定位明確網(wǎng)站定位確定網(wǎng)站主題7.2理解站點功能在理解站點基礎(chǔ)上，形成鮮明的主題網(wǎng)站的特色要突出3確定網(wǎng)站主題確定網(wǎng)站主題第1類：網(wǎng)上求職第2類：網(wǎng)上聊天／即時信息/ICQ第3類：網(wǎng)上社區(qū)／討論/郵件列表第4類：計算機技術(shù)第5類：網(wǎng)頁/網(wǎng)站開發(fā)第6類：娛樂網(wǎng)站第7類：旅行第8類：參考/資訊第9類：家庭/教育第10類：生活/時尚

所謂主題也就是你的網(wǎng)站的題材。網(wǎng)絡(luò)上的網(wǎng)站題材千奇百怪,琳瑯滿目。只要你想的到，就可以把它制作出來。3確定網(wǎng)站主題確定網(wǎng)站主題古典音樂免費軟件紅樓夢古今佳句名言科幻小說金庸客棧美容美發(fā)游戲排行榜國畫畫廊象棋世家能吃是福GIF動畫庫陶藝園地漫畫天地中國足球攝影俱樂部中華佛義幽默輕松體育博覽中國古典詩詞流行情報電子賀卡旅游天地Windows技巧電影世界軟件寶庫國旗大展網(wǎng)頁研習室影視偶像天文星空愛情占星電腦雜志Midi金曲少年園地寵物貓武器博物館游戲天堂兒歌專集熱帶魚硬件開講PS王國健康資訊女性主義媒體大師集郵天天花店破解資源影像合成駭客資訊免費大全Java小屋病毒字典網(wǎng)上教室超頻天堂股市信息超級圖書館3確定網(wǎng)站主題確定網(wǎng)站主題主題要小而精定位要小，內(nèi)容要精。題材最好是你自己擅長或者喜愛的內(nèi)容興趣是制作網(wǎng)站的動力，沒有熱情，很難設(shè)計制作出杰出的作品。題材不要太濫或者目標太高“太濫”是指到處可見，人人都有的題材；“目標太高”是指在這一題材上已經(jīng)有非常優(yōu)秀，知名度很高的站點，你要超過它是很困難的。3確定網(wǎng)站主題確定網(wǎng)站主題網(wǎng)站結(jié)構(gòu)規(guī)劃7.3規(guī)劃網(wǎng)站時，首先應把網(wǎng)站的內(nèi)容列舉出來，根據(jù)內(nèi)容列出一個結(jié)構(gòu)化的藍圖，據(jù)實際情況設(shè)計各個頁面之間的鏈接。規(guī)劃網(wǎng)站的內(nèi)容應包括欄目的設(shè)置、目錄結(jié)構(gòu)、網(wǎng)站的風格等。4網(wǎng)站結(jié)構(gòu)規(guī)劃網(wǎng)站結(jié)構(gòu)規(guī)劃目錄結(jié)構(gòu)設(shè)計一是要按欄目內(nèi)容建立子目錄；二是每個目錄下分別為圖像文件創(chuàng)建一個子目錄images（圖像較少時可不創(chuàng)建）；三是目錄的層次不要太深；四是盡量使用意義明確的非中文目錄。4網(wǎng)站結(jié)構(gòu)規(guī)劃網(wǎng)站結(jié)構(gòu)規(guī)劃將主要內(nèi)容信息按一定的方法分類，并為它們設(shè)立專門的欄目。主題欄目個數(shù)在總欄目中占絕對優(yōu)勢，這樣的網(wǎng)站專業(yè)主題突出，容易給人留下深刻印象，并且過目不忘。4網(wǎng)站結(jié)構(gòu)規(guī)劃-欄目版塊網(wǎng)站結(jié)構(gòu)規(guī)劃有些站點的內(nèi)容龐大，分類很細，往往有三、四級甚至更多級數(shù)的目錄頁面，為幫助瀏覽者明確自己所處的位置，網(wǎng)站設(shè)計師往往在頁面里顯示導航條。4網(wǎng)站結(jié)構(gòu)規(guī)劃-欄目版塊網(wǎng)站結(jié)構(gòu)規(guī)劃布局是一個設(shè)計的概念,指的是在一個限定的面積范圍內(nèi)合理安排布置圖形圖像和文字的位置，在把文章信息按照輕重緩急的秩序陳列出來的同時，將頁面裝飾美化起來。簡而言之，就是以最適合瀏覽的方式將圖片和文字排放在頁面的不同位置。4網(wǎng)站結(jié)構(gòu)規(guī)劃-版面布局網(wǎng)站結(jié)構(gòu)規(guī)劃構(gòu)思構(gòu)圖（草案）。目的是將腦海里朦朧的想法具體化，變成可視可見的輪廓。設(shè)計方案（粗略布局）。除了文本文字可以不必認真，以字符象征性地代替以外，其它所有的內(nèi)容都要接近將來的網(wǎng)頁效果。量化描述（定案）。即把網(wǎng)頁設(shè)計方案中的視覺元素的各項參數(shù)確定下來。4網(wǎng)站結(jié)構(gòu)規(guī)劃-版面布局網(wǎng)站結(jié)構(gòu)規(guī)劃用筆勾畫網(wǎng)頁的輪廓草圖及布局安排。上圖為北京希望電子出版社BHP網(wǎng)站網(wǎng)頁設(shè)計草圖之一4網(wǎng)站結(jié)構(gòu)規(guī)劃-版面布局網(wǎng)站結(jié)構(gòu)規(guī)劃4網(wǎng)站結(jié)構(gòu)規(guī)劃-版面布局網(wǎng)站結(jié)構(gòu)規(guī)劃4網(wǎng)站結(jié)構(gòu)規(guī)劃-版面布局網(wǎng)站結(jié)構(gòu)規(guī)劃版面布局——分欄式結(jié)構(gòu)

在紙上勾畫一下，用內(nèi)容名稱填充一下，粗略地進行規(guī)劃。在標準的構(gòu)架上加一些變化，就會有很多新的編排形式出現(xiàn)。所謂“T”字型結(jié)構(gòu)，就是指頁面頂部為主菜單，下方左側(cè)為二級欄目條，右側(cè)顯示具體內(nèi)容的布局?！癟”字型結(jié)構(gòu)布局“T”字型結(jié)構(gòu)布局“T”字型結(jié)構(gòu)布局在“T”字型結(jié)構(gòu)的基礎(chǔ)上，將右側(cè)設(shè)為鏈接欄目條，屏幕中間顯示具體內(nèi)容的局?！巴弊中徒Y(jié)構(gòu)布局“同”字型結(jié)構(gòu)布局國字型布局是在同字型布局基礎(chǔ)上演化而來的，在保留同字型的同時，在頁面的下方增加一橫條狀的菜單或廣告?！皣?口)”字型結(jié)構(gòu)布局4網(wǎng)站的整體規(guī)劃-網(wǎng)站logo網(wǎng)站的整體規(guī)劃-網(wǎng)站logoLOGO的位置通常在頁面的左上角。根據(jù)具體設(shè)計，它不是一成不變的，所謂個性的設(shè)計，不論商業(yè)或個人，都要去大膽嘗試。網(wǎng)站的LOGO，雖然有動態(tài)的，但是絕對不適宜過分的動感，且不是所有的網(wǎng)站標志都適合選用動態(tài)。4網(wǎng)站的整體規(guī)劃-網(wǎng)站logo網(wǎng)站的整體規(guī)劃-網(wǎng)站logo紅——血、夕陽、火、熱情、危險橙——晚霞、秋葉、溫情、積極

黃——黃金、黃菊、注意、光明

綠——草木、安全、和平、理想、希望藍——海洋、藍天、沉靜、憂郁、理性紫——高貴、神秘、優(yōu)雅白——純潔、素、神圣黑——夜、邪惡、嚴肅

4網(wǎng)站的整體規(guī)劃-網(wǎng)站色彩網(wǎng)站的整體規(guī)劃-網(wǎng)頁色彩藍色、灰色常常用于工業(yè)高科技企業(yè)，以顯得穩(wěn)重高貴4網(wǎng)站的整體規(guī)劃-網(wǎng)站色彩網(wǎng)站的整體規(guī)劃-網(wǎng)頁色彩4網(wǎng)站的整體規(guī)劃-網(wǎng)站色彩網(wǎng)站的整體規(guī)劃-網(wǎng)頁色彩4網(wǎng)站的整體規(guī)劃-網(wǎng)站色彩網(wǎng)站的整體規(guī)劃-網(wǎng)頁色彩4網(wǎng)站的整體規(guī)劃-網(wǎng)站色彩網(wǎng)站的整體規(guī)劃-網(wǎng)頁色彩4網(wǎng)站的整體規(guī)劃-網(wǎng)站色彩網(wǎng)站的整體規(guī)劃-網(wǎng)頁色彩4網(wǎng)站的整體規(guī)劃-網(wǎng)站色彩網(wǎng)站的整體規(guī)劃-網(wǎng)頁色彩4網(wǎng)站的整體規(guī)劃-網(wǎng)站色彩網(wǎng)站的整體規(guī)劃-網(wǎng)頁色彩4網(wǎng)站的整體規(guī)劃-網(wǎng)站色彩網(wǎng)站的整體規(guī)劃-網(wǎng)頁色彩4網(wǎng)站的整體規(guī)劃-網(wǎng)站色彩網(wǎng)站的整體規(guī)劃-網(wǎng)頁色彩4網(wǎng)站的整體規(guī)劃-網(wǎng)站色彩網(wǎng)站的整體規(guī)劃-網(wǎng)頁色彩收集網(wǎng)站內(nèi)容7.4在明確建站目的和網(wǎng)站定位以后，要結(jié)合各方面的實際情況，圍繞主題全面收集相關(guān)的材料。5收集網(wǎng)站內(nèi)容收集網(wǎng)站內(nèi)容網(wǎng)站設(shè)計原則7.5網(wǎng)頁的設(shè)計要講究頁面構(gòu)圖、色彩搭配、平面布局、版式設(shè)計、空間表現(xiàn)等方面的內(nèi)容。頁面內(nèi)容：標題、網(wǎng)站標志、主體內(nèi)容、頁眉頁腳、導航欄、廣告欄等。6網(wǎng)頁設(shè)計原則網(wǎng)站設(shè)計原則網(wǎng)站測試發(fā)布7.6測試評估與網(wǎng)站發(fā)布是不可分割的兩部分。制作完畢的網(wǎng)頁必須進行測試。測試評估主要包括上傳前的兼容性測試、鏈接測試和上傳后的實地測試。網(wǎng)站上傳后，繼續(xù)通過瀏覽器進行實地測試，發(fā)現(xiàn)問題后及時修改，然后再上傳測試。網(wǎng)站測試發(fā)布（1）不要先決定網(wǎng)頁的外觀，然后迫使自己去適應它，應該根據(jù)網(wǎng)站的訪問者對象、要提供的信息以及制作目標得出一個最適合的網(wǎng)頁架構(gòu)。（2）每頁排版不要太松散或用太大的字，盡量避免訪問者瀏覽網(wǎng)頁時要作大幅度的滾動，對于篇幅太長的一頁可以使用內(nèi)部鏈接解決。須知，在一頁的上部是顯眼而寶貴的地方，不要只放幾個粗大的字或圖片。（3）盡量使用普遍采用的分辨率設(shè)計網(wǎng)頁。（4）不應在每頁中插入太多的廣告。相信任何訪問者都不會喜歡瀏覽盡是些廣告的網(wǎng)頁，要考慮該頁內(nèi)容與廣告的比例，廣告太多，只會令人煩厭。（5）不要每頁都采用不同的墻紙，以免每次轉(zhuǎn)頁時都要花費過多的時間去下載，采用相同的底色或墻紙還可以增強網(wǎng)頁一致性，以樹立自己的風格。總

結(jié)（6）底色或墻紙必須與文字對比強烈，以易于閱讀。這并不是要求永遠使用鮮亮的背景搭配深色的文字，但深色背景常要求與主題配合，有較