第1章Web概述

1.3web系統(tǒng)開發(fā)流程1.3web系統(tǒng)開發(fā)流程Web系統(tǒng)設(shè)計需要根據(jù)系統(tǒng)主題，進(jìn)行網(wǎng)頁布局、字體、顏色、交互效果等方面的設(shè)計，使網(wǎng)頁內(nèi)容明確、主次區(qū)分、風(fēng)格一致、用戶體驗良好?？梢越柚鶳hotoshop等圖像處理軟件，設(shè)計網(wǎng)頁效果圖，再參照效果圖借助前端設(shè)計技術(shù)實現(xiàn)網(wǎng)頁。1.3.1確定系統(tǒng)主題首先要確定web系統(tǒng)的主題，找準(zhǔn)系統(tǒng)的準(zhǔn)確定位。Web系統(tǒng)類型包括新聞資訊類、企業(yè)服務(wù)類、個人信息類、社交服務(wù)類、搜索引擎類等。要考慮web系統(tǒng)的功能、目標(biāo)、訪問用戶的需求等，確定web系統(tǒng)提供的內(nèi)容和風(fēng)格。1.3.1確定系統(tǒng)主題例如，對于新聞資訊類網(wǎng)站，主要向訪問者提供大量的政治、經(jīng)濟、人文、生活等各方面的信息，需要考慮系統(tǒng)提供信息的全面性、受眾的廣泛性和信息更新的及時性。對于企業(yè)服務(wù)類網(wǎng)站，則主要用于企業(yè)發(fā)布特定的服務(wù)內(nèi)容，是企業(yè)的宣傳窗口，除了內(nèi)容提供的全面準(zhǔn)確之外，還需要在設(shè)計風(fēng)格上突出企業(yè)文化特色。1.3.2系統(tǒng)結(jié)構(gòu)設(shè)計系統(tǒng)結(jié)構(gòu)設(shè)計，是將系統(tǒng)內(nèi)容劃分為清晰合理的層次結(jié)構(gòu)，確定系統(tǒng)中各頁面的內(nèi)容和建立頁面間的關(guān)聯(lián)。系統(tǒng)結(jié)構(gòu)設(shè)計包括欄目設(shè)置和目錄結(jié)構(gòu)規(guī)劃。1.3.2系統(tǒng)結(jié)構(gòu)設(shè)計欄目設(shè)置的任務(wù)是對信息進(jìn)行合理劃分，使訪問者可以方便快速地定位要訪問的信息位置。欄目設(shè)計要結(jié)構(gòu)清晰、重點突出、欄目層次級數(shù)合理。一般情況下，訪問者應(yīng)在單擊3-5次后便可定位到要訪問的信息。欄目層數(shù)要控制在最多三級。各頁面的鏈接也要清晰準(zhǔn)確。欄目設(shè)計要以用戶為中心，具有訪問容易、直觀、可預(yù)期的特點。1.3.2系統(tǒng)結(jié)構(gòu)設(shè)計目錄結(jié)構(gòu)規(guī)劃是指web服務(wù)器上信息資源的存儲結(jié)構(gòu)的規(guī)劃。目錄結(jié)構(gòu)對于系統(tǒng)維護(hù)、更新、移植、搜索引擎訪問等有重要影響。目錄結(jié)構(gòu)中，信息要按類型分子目錄存儲；目錄層次不要太深，主要欄目應(yīng)能從首頁直接到達(dá)；目錄和子目錄不要使用中文命名，命名盡量意義明確便于理解。1.3.3頁面布局設(shè)計web系統(tǒng)內(nèi)每個網(wǎng)頁布局是整個界面的核心，體現(xiàn)了網(wǎng)頁中各模塊不同的重要程度。網(wǎng)頁模塊一般包括標(biāo)題區(qū)、導(dǎo)航區(qū)、信息區(qū)、版權(quán)區(qū)。標(biāo)題區(qū)一般為網(wǎng)站LOGO圖片或動畫，代表了網(wǎng)站的形象。導(dǎo)航區(qū)實現(xiàn)網(wǎng)頁欄目的列舉引導(dǎo)，形式可以是橫條導(dǎo)航或者豎條導(dǎo)航，位置一般在LOGO下方，也可以在網(wǎng)頁底部。信息區(qū)的內(nèi)容較多，采用多行多列布局，主要信息區(qū)一般在中間突出顯示，次要信息區(qū)一般在左右兩側(cè)顯示。版權(quán)區(qū)一般在網(wǎng)頁底部，放置版權(quán)信息、聯(lián)系方式等。1.3.3頁面布局設(shè)計網(wǎng)頁布局的類型大致有“國”字型、“匡”字型、標(biāo)題正文型、框架型、封面型和變化型等。1.3.3頁面布局設(shè)計1.“國”字型網(wǎng)頁布局“國”字型網(wǎng)頁最上面是網(wǎng)站標(biāo)題及橫向?qū)Ш絽^(qū)，中間部分是信息區(qū)，最下面是版權(quán)區(qū)。主要信息區(qū)在網(wǎng)頁中間突出顯示，左右分別為次要信息區(qū)?！皣弊中途W(wǎng)頁布局如圖1.5所示。1.3.3頁面布局設(shè)計2.“匡”字型網(wǎng)頁布局“匡”字型網(wǎng)頁和“國”字型網(wǎng)頁類似。信息區(qū)一般包括主要信息區(qū)和一個次要信息區(qū)（在左側(cè)或在右側(cè)），主要信息區(qū)的空間更多更突出?！翱铩弊中途W(wǎng)頁布局如圖1.6所示。1.3.3頁面布局設(shè)計3.標(biāo)題正文型網(wǎng)頁布局標(biāo)題正文型網(wǎng)頁的信息區(qū)只有主要信息區(qū)，包括信息的標(biāo)題和正文。標(biāo)題正文型網(wǎng)頁布局如圖1.7所示。1.3.3頁面布局設(shè)計4.封面型網(wǎng)頁布局封面型網(wǎng)頁布局一般出現(xiàn)在有些網(wǎng)站的首頁上，大多采用精美的圖片或動畫，提供進(jìn)入網(wǎng)站的簡單鏈接或按鈕。5.變化型網(wǎng)頁布局變化型網(wǎng)頁布局靈活多變，沒有明確的格式區(qū)分。例如，響應(yīng)式網(wǎng)頁會根據(jù)瀏覽設(shè)備尺寸動態(tài)調(diào)整。1.3.3頁面布局設(shè)計不論采用哪種布局方式，一定要注意布局與內(nèi)容的結(jié)合，使得網(wǎng)站信息能夠被用戶準(zhǔn)確定位，提高信息共享的作用。網(wǎng)頁布局的技術(shù)有表格布局、圖層布局和響應(yīng)式布局幾種。1.3.3頁面布局設(shè)計表格布局技術(shù)是將網(wǎng)頁劃分為表格式的行和列，在表格中放置網(wǎng)頁元素。表格布局技術(shù)主要采用HTML中的表格標(biāo)記<table>實現(xiàn)。表格布局簡單易用、所見即所得，但是代碼繁復(fù)、維護(hù)性差，打開速度較慢。1.3.3頁面布局設(shè)計圖層布局技術(shù)采用圖層搭建網(wǎng)頁元素，采用CSS樣式對圖層進(jìn)行定位和效果呈現(xiàn)。圖層布局技術(shù)主要采用HTML中的<DIV>標(biāo)記和CSS的樣式設(shè)置實現(xiàn)。圖層布局網(wǎng)頁內(nèi)容和表現(xiàn)分離，便于開發(fā)和維護(hù)，瀏覽速度快。1.3.4素材收集和設(shè)計圍繞網(wǎng)頁主題全面收集相關(guān)素材，例如相關(guān)的文本、圖片、音頻、視頻、動畫等。有些材料需要自己制作，例如LOGO圖標(biāo)等。收集的材料要放在同一個目錄中，并按照目錄結(jié)構(gòu)進(jìn)行分類整理。材料命名要有明確意義，便于查找訪問。素材要注意質(zhì)量和大小，在保證質(zhì)量的前提下，盡量縮小大小，以免影響網(wǎng)絡(luò)訪問的速度。1.3.5頁面內(nèi)容設(shè)計網(wǎng)頁頁面設(shè)計要注重頁面元素的布局和呈現(xiàn)效果。頁面的整體效果要有藝術(shù)美感，對訪問者要有吸引力。文本的字體、字號、字間距、行距等，要適合文本內(nèi)容表現(xiàn)的信息。多媒體元素在頁面的寬度、高度要適當(dāng)，既要保證頁面訪問的速度，又要保證質(zhì)量的精美。1.3.5頁面內(nèi)容設(shè)計各種元素的色彩，對網(wǎng)頁的呈現(xiàn)效果非常重要，要根據(jù)網(wǎng)站主題、訪問者的文化審美、素材的風(fēng)格統(tǒng)一考慮。Web系統(tǒng)中各頁面的設(shè)計風(fēng)格要統(tǒng)一，最好采用統(tǒng)一的色彩配色方案、頁面布局方式?？梢韵仍O(shè)計模板，再基于模板設(shè)計各頁面。1.3.6測試和發(fā)布制作完畢的web系統(tǒng)要先進(jìn)行測試。測試包括本地測試、實地測試。本地測試是在開發(fā)環(huán)境下測試。實地測試是將web系統(tǒng)上傳到服務(wù)器后，通過網(wǎng)絡(luò)遠(yuǎn)程訪問測試。做實地測試前，需要申請購買服務(wù)器空間和web系統(tǒng)的域名，這樣才能把web系統(tǒng)上傳到服務(wù)器。1.3.6測試和發(fā)布測試內(nèi)容一般包括服務(wù)器穩(wěn)定和安全測試、系統(tǒng)程序和數(shù)據(jù)庫測試、網(wǎng)頁兼容性測試。要選擇不同的瀏覽器進(jìn)行測試，還要在不同分辨率的顯示設(shè)備上進(jìn)行測試。測試后，要根據(jù)發(fā)現(xiàn)的問題及時修改web系統(tǒng)，再重新上傳測試，直到解決問題為止。通過測試的系統(tǒng)便可以發(fā)布，開放給