網(wǎng)站建設的總流程分析

張志一 耿秀春

Analysis of the General Process of Website Construction

ZHANG Zhi-yi GENG Xiu-chun

摘要：本文根據(jù)多年從事網(wǎng)絡程序設計工作和講授計算機專業(yè)相關課程的的教學實踐經(jīng)驗，從需求分析、整體規(guī)劃、搜集素材、網(wǎng)頁設計、申請空間、測試發(fā)布、維護推廣等七個方面進行詳細的網(wǎng)站建設總流程的闡述。

Abstract： This article expounds the general process of website construction from seven aspects， requirements analysis， overall planning， collecting materials， web design， application space， test release， maintenance promotion based on seven years of experience in network programming and teaching computer science related courses.

關鍵詞：網(wǎng)站;需求分析;規(guī)劃;素材;框架;超鏈接

Key words： website;demand analysis;planning;material;framework;hyperlink

中圖分類號：TP393? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 文獻標識碼：A? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 文章編號：1006-4311（2019）32-0249-03

0? 引言

Web的發(fā)展日新月異，擁有自己的網(wǎng)站已經(jīng)成為了一種潮流。隨著大數(shù)據(jù)、人工智能、虛擬現(xiàn)實等諸多高科技的出現(xiàn)，當今社會對復合型人才的需求會日益增多。伴隨著微信、支付寶、云閃付等便捷支付app的出現(xiàn)，對淘寶、京東等線上維護人才的要求越來越高，熟知網(wǎng)站建設的總流程十分重要。

1? 需求分析

建立網(wǎng)站時，根據(jù)企業(yè)客戶的需求，了解網(wǎng)站建設的目的、功能模塊、市場調(diào)研情況等信息。其中，網(wǎng)站建設的目的尤為重要。有些企業(yè)想樹立企業(yè)的形象，打響知名度，互聯(lián)網(wǎng)的時代推廣宣傳還是很有效果的。有些企業(yè)是為了提供更好的產(chǎn)品與服務，客戶可以不受時間地域的限制，方便快捷的獲取自己需要的信息，吸引更多的客戶群體。還有些企業(yè)是為了開拓更大的市場，方便發(fā)展電子商務，以獲利更多。

2? 整體規(guī)劃

2.1 風格

風格是抽象的，在這里是網(wǎng)站的整體形象給瀏覽者的綜合感受。包括標志、版面設計、瀏覽方式、交互性、內(nèi)容價值、存在意義等諸多因素。例如：瑞麗網(wǎng)站是時尚前衛(wèi)的，KFC訂餐網(wǎng)站是生動形象的，聯(lián)想集團的網(wǎng)站是專業(yè)嚴肅的。個人認為，logo一定要放在最顯眼的位置，網(wǎng)頁的色彩要用同一色系的，利用好網(wǎng)頁配色，以突出主題，更能吸引瀏覽者的眼球。

2.2 布局

網(wǎng)站的布局，根據(jù)企業(yè)用戶需要，構(gòu)思好網(wǎng)頁的數(shù)量，每個網(wǎng)頁顯示的內(nèi)容，以何種形式展示。

2.3 語言腳本

網(wǎng)頁中的編程語言很多，有PHP、ASP、JavaScript、VBScript等。ASP是微軟公司推出的取代CGI的新技術，基于開放設計環(huán)境的Active X技術，使用所有的開發(fā)工具來創(chuàng)建和運行交互式的動態(tài)網(wǎng)頁，例如物流庫存管理、圖書借閱系統(tǒng)、足球論壇、用戶登錄界面等。它簡單易學，還可以自己定義和制作組件，讓動態(tài)網(wǎng)頁無限擴充。還可以利用ADO訪問數(shù)據(jù)庫，對數(shù)據(jù)進行處理。鑒于以上優(yōu)點，個人建議優(yōu)先考慮ASP腳本語言。

2.4 數(shù)據(jù)庫平臺

數(shù)據(jù)庫的種類很多，如SQL Server、Access數(shù)據(jù)庫、FoxPro數(shù)據(jù)庫等。SQL功能強大、簡單易學。SQL數(shù)據(jù)庫的數(shù)據(jù)體系結(jié)構(gòu)基本上是三級結(jié)構(gòu)，還有數(shù)據(jù)加密的功能。SQL用戶可以作為獨立的用戶接口，做終端用戶。對于SQL數(shù)據(jù)中的操作，分為數(shù)據(jù)定義、數(shù)據(jù)查詢、數(shù)據(jù)更新和數(shù)據(jù)控制四個方面，其中數(shù)據(jù)安全性的方法是通過對數(shù)據(jù)庫存取權(quán)力的控制來防止非法使用數(shù)據(jù)中的數(shù)據(jù)，安全性比較高。個人建議采用SQL數(shù)據(jù)庫。

3? 搜集素材

3.1 文字資料

和客戶溝通好建設網(wǎng)站的目的后，自己撰寫相關的文字描述，也可網(wǎng)絡中搜索符合網(wǎng)站主題的文本資料，統(tǒng)一匯總到doc或wps文件中。網(wǎng)站中所有網(wǎng)頁需要的文字資料，統(tǒng)一格式，做好標記，以便快速檢索相關信息。

3.2 圖片

3.2.1 BMP格式

BMP采用位映射存儲模式，在Windows環(huán)境中運行的處理圖像的軟件均支持這種格式。它不支持文件壓縮，不適用于 Web 頁。

3.2.2 GIF格式

GIF文件是一種無損壓縮格式，其壓縮率大約50%，相關軟件都支持它。GIF最多支持256種色彩的圖像。

3.2.3 JPG格式

JPG是最常用的圖像文件格式，是一種有損壓縮格式，JPEG壓縮技術十分先進，它可以用最少的磁盤空間得到較好的圖像品質(zhì)。JPG是靈活的格式，支持多種壓縮級別，壓縮比率通常在10：1到40：1之間。它壓縮高頻信息，保留色彩較完整，較適用于網(wǎng)頁設計中，可把文件壓縮到最小，所有的瀏覽器都可以以最快速度打開它，但它不適合顏色少、大區(qū)域顏色接近簡單的圖片，適合色彩多的圖片。

3.2.4 AI格式

AI格式可以在CorelDRAW中打開并修改，是一種矢量圖形文件。它和PhotoShop中存儲的psd文件一樣，都是分層文件，每層都作為一個對象，具有各自的屬性。如文字作為對象，其屬性在外觀選項卡，可以設置字符的描邊、填色、不透明度等屬性值。該格式文件方便修改，可以自動匹配最高分辨率輸出，兼容性較好。

3.2.5 PNG格式

PNG格式可以在PhotoShop中打開，并進行編輯處理?？梢员菺IF格式的文件再縮小30%左右，也是一種新興的無損壓縮圖像格式，還可以兼容所有的瀏覽器，使用廣泛。

根據(jù)以上介紹，設計者可以自由選擇圖片格式，在PhotoShop、CorelDRAW軟件中進行圖片的修改，也可直接網(wǎng)絡中搜索合適的圖片，下載直接用。個人建議下載后的圖片，最好還是使用圖像處理軟件進行后期處理，修改為符合網(wǎng)站主題的圖片素材。

3.3 動畫

3.3.1 GIF格式

GIF格式是基于LZW算法的一種無損壓縮模式，相關軟件都支持它。最大的特點，可以在一個GIF文件中存儲多個彩色圖像，當用瀏覽器打開時，它會像是Flash中的逐幀動畫一樣顯示在頁面中。很多初學者，可以利用GIF小軟件，制作出小型的簡單的動畫。

3.3.2 SWF格式

SWF格式是Flash動畫軟件可以打開的，它是一種多媒體文件，可以是聲音、視頻、動畫等的綜合體。瀏覽器想要運行打開，必須安裝Adobe Flash Player IE插件，大部分電腦系統(tǒng)內(nèi)默認已經(jīng)安裝，定期進行更新即可。這種格式的文件，在游戲網(wǎng)頁中經(jīng)常用到。

關于動畫，個人建議采用swf格式，有能力者，可使用Flash軟件，進行符合網(wǎng)站主題的動畫創(chuàng)作。

3.4 視頻

3.4.1 MOV格式

MOV格式是在QuickTime Player軟件中編輯，結(jié)合音頻和視頻，用于存儲數(shù)字的流式視頻。它是多軌道存儲信息，還不限制數(shù)目。它還可以邊下載邊觀看，不必等全部下載完畢才可以觀看。

3.4.2 RM格式

RM格式是RealNetworks公司開發(fā)的視頻文件，可以根據(jù)網(wǎng)絡數(shù)據(jù)傳輸速率不同而修改不同的壓縮率比，來實現(xiàn)即時播放。目前，很多網(wǎng)站用來進行重要事件的實況轉(zhuǎn)播。

3.4.3 FLV格式

FLV是一種流媒體格式，具有文件容量小、下載速度快等優(yōu)點，適于網(wǎng)絡發(fā)展用。如美國的YouTube網(wǎng)站、國內(nèi)的土豆網(wǎng)、新浪視頻播客等都是使用FLV格式的視頻。

根據(jù)實際情況，選擇合適的視頻格式。

3.5 音樂

3.5.1 MP3格式

MP3是利用音頻壓縮技術，將聲音用1：10甚至1：12的壓縮率壓縮成容量較小的文件，可以保持較好的音質(zhì)。

3.5.2 MIDI格式

mid格式是由MIDI繼承而來。它記錄聲音的信息，然后告訴聲卡如何再現(xiàn)音樂的一組指令。mid文件重放的效果完全依賴聲卡的檔次。

4? 網(wǎng)頁設計

4.1 構(gòu)建網(wǎng)頁的框架

4.1.1 國字型

最上部分放置網(wǎng)站的標志和導航欄或Banner廣告，頁面中間防止網(wǎng)站的主要部分，下部分放置網(wǎng)站的版權(quán)信息和聯(lián)系方式等。

4.1.2 T型

頂部放置網(wǎng)站的標志或Banner廣告，頁面下方左側(cè)是導航欄菜單，頁面下方右側(cè)放置網(wǎng)頁正文等主要內(nèi)容。

4.1.3 內(nèi)頁型

一般是用來顯示文章頁面、新聞頁面和注冊頁面等。

4.1.4 左右框架型

左側(cè)一般是導航欄鏈接，右側(cè)放置網(wǎng)站的主要內(nèi)容。

4.1.5 上下框架型

上側(cè)一般是導航欄鏈接，下側(cè)放置網(wǎng)站的主要內(nèi)容。

4.1.6 綜合框架型

結(jié)合上下框架型和左右框架型。

除了以上六種類型，還有封面型、FLASH型等。不就是最適合用戶瀏覽的方式將文字等資源排列在網(wǎng)頁中不同的位置，為客戶提供舒適、友好、簡單的訪問體驗，因此良好的頁面布局的效果，應具備條理清晰、主次分明、色彩對比度適當、布局疏密適當?shù)忍攸c。

一般用表格（table）來布局，來制作網(wǎng)頁的框架，也可運用css+div來實現(xiàn)。

4.2 設置導航欄

每個頁面展示的內(nèi)容不同，導航欄內(nèi)容也不相同，位置和信息都是根據(jù)企業(yè)客戶需求制定即可。導航欄的命名最好是見名之意，可以體現(xiàn)企業(yè)的特色，讓用戶迅速搜索到想要了解的信息，讓用戶有很好的體驗。

4.3 頁面內(nèi)容

根據(jù)3收集素材的資料，分網(wǎng)頁編輯，設置對應的格式，添加到合適的位置。

4.4 超鏈接的設置

超鏈接是Web頁面區(qū)別于其他媒體的重要特征之一。它的載體可以是文本，也可以是圖片，也可以是圖片的一個或多個區(qū)域形成的熱點。它是網(wǎng)站中最重要的組成部分，可以從一個網(wǎng)頁跳轉(zhuǎn)到另一個網(wǎng)頁，多個網(wǎng)頁因為有了超鏈接才會形成一個網(wǎng)站。

根據(jù)企業(yè)客戶需求，利用 鏈接文字進行超鏈接的設置。

5? 申請空間

網(wǎng)站制作完成后，注冊一個自己的域名，租用服務器的空間來存儲網(wǎng)站的所有內(nèi)容。

6? 測試發(fā)布

網(wǎng)站發(fā)布之前，必須進行縝密的測試，以保證瀏覽正常，達到預期效果。測試的內(nèi)容大約是租用服務器的性能是否可靠、瀏覽器的兼容性、數(shù)據(jù)庫的檢索是否正常、超鏈接是否正確、文字資料是否有錯別字、網(wǎng)上下載的素材是否涉及到侵權(quán)問題等。

7? 維護推廣

當今社會發(fā)展迅速，企業(yè)為了適應時代的步伐，也會有所改變。定期對站點內(nèi)的信息進行更新與維護，做到線上線下信息統(tǒng)一。最重要的是對軟硬件以及數(shù)據(jù)庫的維護，以免導致信息外泄，造成不必要的損失。

8? 結(jié)束語

對于企業(yè)來說，網(wǎng)站建設的必要性大體分為三類：發(fā)展業(yè)務、爭取新客戶和服務老客戶。網(wǎng)站可以全年無休運轉(zhuǎn)，相當于企業(yè)聘請了一個不講報酬、從來不遲到早退、永不知疲倦的銷售員，還永遠開放的商場，讓顧客何時何地都可以了解企業(yè)信息。網(wǎng)上還可以留言答疑解惑，也可以在線實時交流，方便售后的服務。對于學校來說，網(wǎng)站的建設更為重要。提高知名度，方便報考的學生更好地了解學校的各方面的信息。對于個體戶來說，可以建立自己的網(wǎng)站，銷售農(nóng)產(chǎn)品、水果、當?shù)赝撂禺a(chǎn)等。了解網(wǎng)站建設的總流程，百益無一害。

參考文獻：

[1]商瑋.電子商務網(wǎng)頁設計與制作[M].北京：中國人民大學出版社，2016.

[2]聶斌，張明遙.HTML+CSS+DIV網(wǎng)頁設計與布局[M].北京：人民郵電出版社，2018.

[3]李曉斌.PHP+MySQL+Dreamweaver網(wǎng)站建設全程揭秘[M].北京：清華大學出版社，2018.

作者簡介：張志一（1980-），男，山東濟南人，中級講師，工學學士，研究方向為計算機科學與技術;耿秀春（1981-），女，山東濟南人，中級講師，理學學士，研究方向為計算機科學與技術。