張志一 耿秀春

Analysis of the General Process of Website Construction

ZHANG Zhi-yi GENG Xiu-chun

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

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.

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

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

中圖分類號(hào)：TP393? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 文章編號(hào)：1006-4311（2019）32-0249-03

0? 引言

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

1? 需求分析

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

2? 整體規(guī)劃

2.1 風(fēng)格

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

2.2 布局

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

2.3 語言腳本

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

2.4 數(shù)據(jù)庫平臺(tái)

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

3? 搜集素材

3.1 文字資料

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

3.2 圖片

3.2.1 BMP格式

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

3.2.2 GIF格式

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

3.2.3 JPG格式

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

3.2.4 AI格式

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

3.2.5 PNG格式

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

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

3.3 動(dòng)畫

3.3.1 GIF格式

GIF格式是基于LZW算法的一種無損壓縮模式，相關(guān)軟件都支持它。最大的特點(diǎn)，可以在一個(gè)GIF文件中存儲(chǔ)多個(gè)彩色圖像，當(dāng)用瀏覽器打開時(shí)，它會(huì)像是Flash中的逐幀動(dòng)畫一樣顯示在頁面中。很多初學(xué)者，可以利用GIF小軟件，制作出小型的簡(jiǎn)單的動(dòng)畫。

3.3.2 SWF格式

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

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

3.4 視頻

3.4.1 MOV格式

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

3.4.2 RM格式

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

3.4.3 FLV格式

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

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

3.5 音樂

3.5.1 MP3格式

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

3.5.2 MIDI格式

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

4? 網(wǎng)頁設(shè)計(jì)

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

4.1.1 國字型

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

4.1.2 T型

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

4.1.3 內(nèi)頁型

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

4.1.4 左右框架型

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

4.1.5 上下框架型

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

4.1.6 綜合框架型

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

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

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

4.2 設(shè)置導(dǎo)航欄

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

4.3 頁面內(nèi)容

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

4.4 超鏈接的設(shè)置

超鏈接是Web頁面區(qū)別于其他媒體的重要特征之一。它的載體可以是文本，也可以是圖片，也可以是圖片的一個(gè)或多個(gè)區(qū)域形成的熱點(diǎn)。它是網(wǎng)站中最重要的組成部分，可以從一個(gè)網(wǎng)頁跳轉(zhuǎn)到另一個(gè)網(wǎng)頁，多個(gè)網(wǎng)頁因?yàn)橛辛顺溄硬艜?huì)形成一個(gè)網(wǎng)站。

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

5? 申請(qǐng)空間

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

6? 測(cè)試發(fā)布

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

7? 維護(hù)推廣

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

8? 結(jié)束語

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

參考文獻(xiàn)：

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

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

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

作者簡(jiǎn)介：張志一（1980-），男，山東濟(jì)南人，中級(jí)講師，工學(xué)學(xué)士，研究方向?yàn)橛?jì)算機(jī)科學(xué)與技術(shù);耿秀春（1981-），女，山東濟(jì)南人，中級(jí)講師，理學(xué)學(xué)士，研究方向?yàn)橛?jì)算機(jī)科學(xué)與技術(shù)。