什么是網(wǎng)站制作呢?通俗的來(lái)說(shuō)就是網(wǎng)站通過(guò)頁(yè)面結構定位,合理布局,圖片文字處理,程序設計,數據庫設計等一系列工作的總和。也是將網(wǎng)站設計師的圖片用HTML方式展示出來(lái),屬于前臺工程師的一項任務(wù),前臺工程師任務(wù)包括: 網(wǎng)站設計、網(wǎng)站用戶(hù)體驗、網(wǎng)站JAVA效果、網(wǎng)站制作等工作。網(wǎng)站制作是網(wǎng)站策劃師、網(wǎng)絡(luò )程序員、網(wǎng)頁(yè)設計師等崗位,應用各種網(wǎng)絡(luò )程序開(kāi)發(fā)技術(shù)和網(wǎng)頁(yè)設計技術(shù),為企事業(yè)單位、公司或個(gè)人在全球互聯(lián)網(wǎng)上建設站點(diǎn),并包含域名注冊和主機托管等服務(wù)的總稱(chēng)。
網(wǎng)站制作流程:
第一步:確定網(wǎng)站主題
做網(wǎng)站,首先必須要解決的就是網(wǎng)站內容問(wèn)題,即確定網(wǎng)站的主題。美國《個(gè)人電腦》雜志(PC Magazine)評出了99年度排名前100位的全美知名網(wǎng)站的十類(lèi)題材:第1類(lèi):網(wǎng)上求職;第2類(lèi):網(wǎng)上聊天/即時(shí)信息/ICQ;第3類(lèi):網(wǎng)上社區/討論/郵件列表;第4類(lèi):計算機技術(shù),如第5類(lèi):網(wǎng)頁(yè)/網(wǎng)站開(kāi)發(fā);第6類(lèi):娛樂(lè )網(wǎng)站;第7類(lèi):旅行;第8類(lèi):參考/資訊;第9類(lèi):家庭/教育;第10類(lèi):生活/時(shí)尚。我們可以參看上面 的分類(lèi),繼續細分。如果自己在某些方面有興趣,或掌握的資料較多,也可以做一個(gè)自己感興趣的東西,一者,你可以有自己的見(jiàn)解,做出自己的特色;二者,在制作網(wǎng)站時(shí)不會(huì )覺(jué)得無(wú)聊或者力不從心。興趣是制作網(wǎng)站的動(dòng)力,沒(méi)有創(chuàng )作熱情,很難設計制作出優(yōu)秀的作品?!τ趦热葜黝}的選擇,要做到小而精,主題定位要小,內容要精。不要去試圖制作一個(gè)包羅萬(wàn)象的站點(diǎn),這往往會(huì )失去網(wǎng)站的特色,也會(huì )帶來(lái)高強度的勞動(dòng),給網(wǎng)站的及時(shí)更新帶來(lái)困難。記?。涸诨ヂ?lián)網(wǎng)上只有第一,沒(méi)有第二! 有些網(wǎng)站設計都在網(wǎng)站上加入許多不相關(guān)的內容,想以此吸引瀏覽者,但往往會(huì )適得其反。
第二步:做好網(wǎng)站規劃
規劃的內容應該主要包括但不局限于如下幾項:
1、域名和主機的選擇(域名需要依靠網(wǎng)站主題以及用戶(hù)范圍來(lái)選擇,主機則根據網(wǎng)站在大小、安全、穩定上的需求)知名的如 中國網(wǎng)絡(luò )服務(wù)
2、網(wǎng)站的定位(如定位于贏(yíng)利 性 網(wǎng)站,還是企業(yè)網(wǎng)站,或是公益性的……)
3、網(wǎng)站的用途(是用來(lái)贏(yíng)利的,還是做產(chǎn)品線(xiàn)上營(yíng)銷(xiāo)的,或是做品牌推廣和整合的)
4、網(wǎng)站的發(fā)展目標 (需要達到的目標,需要為這個(gè)目標而努力的)
5、網(wǎng)站的拓撲圖構畫(huà)(網(wǎng)站包括哪些欄目,采用什么樣的制作結構)
6、網(wǎng)站制作技術(shù)的采用(用哪種語(yǔ)言開(kāi)發(fā),在什么平臺上開(kāi)發(fā))
7、網(wǎng)站的推廣(需要做具體什么樣的工作去推廣網(wǎng)站,是否需要在前期開(kāi)發(fā)的時(shí)候就考慮到后期的推廣,如網(wǎng)站推廣專(zhuān)家的建議)
8、網(wǎng)站的維護(是自主維護,還是外包維護,維護的內容包括哪些,后期改版的時(shí)間間隔安排等)
9、網(wǎng)站安全 (網(wǎng)站定期進(jìn)行安全檢測及備份等安全操作)
10、網(wǎng)站的主題顏色(網(wǎng)站顏色可以直接反應出企業(yè)的行業(yè)所屬)
第三步:選擇好域名
域名
是網(wǎng)站在互聯(lián)網(wǎng)上的名字,是在互聯(lián)網(wǎng)上相互聯(lián)絡(luò )的網(wǎng)絡(luò )地址。一個(gè)非產(chǎn)品推銷(xiāo)的純信息服務(wù)網(wǎng)站,其所有建設的價(jià)值,都凝結在其網(wǎng)站域名之上。失去這個(gè)域名,就將前功盡廢。
目前,做個(gè)人網(wǎng)站的很多都依賴(lài)免費個(gè)人空間,其域名也是依賴(lài)免費域名指向,如網(wǎng)易的虛擬域名服務(wù),其實(shí)這對個(gè)人網(wǎng)站的推廣與發(fā)展很為不利,不光是它“適時(shí)”開(kāi)啟的窗口妨礙了瀏覽者的視線(xiàn)和好感,讓人一看就知道是個(gè)人網(wǎng)站,而且也妨礙了網(wǎng)頁(yè)的傳輸速度。所以,就我個(gè)人觀(guān)點(diǎn)來(lái)講,首先花點(diǎn)錢(qián)去注冊一個(gè)域名,獨立的域名就是個(gè)人網(wǎng)站的第一筆財富,要把域名起得形象、簡(jiǎn)單、易記。
第四步:掌握建網(wǎng)工具
網(wǎng)絡(luò )技術(shù)的發(fā)展帶動(dòng)了軟件業(yè)的發(fā)展,所以用于制作Web頁(yè)面的工具軟件也越來(lái)越豐富。從最基本的HTML編輯器到現在非常流行的Flash互動(dòng)網(wǎng)頁(yè)制作工具,各種各樣的Web頁(yè)面制作工具,下面是幾款具有代表性的網(wǎng)頁(yè)制作器:
1.HTML編輯器。雖然HTML代碼復雜,編輯和調試要花費大量的時(shí)間,但因HTML的穩定性、廣泛支持性及可創(chuàng )建復雜的頁(yè)面效果,仍受高級網(wǎng)頁(yè)制作人員的青睞。就目前來(lái)說(shuō),有眾多的編輯器供選擇,這些編輯器廣泛支持復雜頁(yè)面創(chuàng )建及高級HTML規范,使用較為普遍的有Hotdog等專(zhuān)業(yè)HTML編輯器。
2.所見(jiàn)即所得的網(wǎng)頁(yè)編輯器。其中以Microsoft Frontpage為代表,它具有如Word一樣的操作界面,熟知Word功能的操作者,只要稍加培訓就能輕松編制網(wǎng)頁(yè)。而且,Frontpage還能解析網(wǎng)頁(yè)的HTML源代碼,并提供了預覽支持。但Frontpage的一些特殊顯示功能并不能在其它非IE瀏覽器下實(shí)現。所以Frontpage是一款非常適合初、中級網(wǎng)頁(yè)制作人員使用的工具軟件。
3.現在非常流行的 Macromedia公司(已被Adobe公司收購)出品的Flash互動(dòng)網(wǎng)頁(yè)制作工具。這是一款功能非常強大的交互式矢量多媒體網(wǎng)頁(yè)制作工具。能夠輕松輸出各種各樣的動(dòng)畫(huà)網(wǎng)頁(yè),它不需要特別繁雜的操作,也比JAVA小巧精悍!但它的動(dòng)畫(huà)效果、互動(dòng)效果、多媒體效果十分出色。而且還可以在Flash動(dòng)畫(huà)中封裝Mp3音樂(lè )、填寫(xiě)表單等;并且由于Flash編制的網(wǎng)頁(yè)文件比普通網(wǎng)頁(yè)文件要小得多,所以大大加快了瀏覽速度。這是一款十分適合動(dòng)態(tài)Web制作的工具。
4.Dreamweaver: Dreamweaver是美國MACROMEDIA公司開(kāi)發(fā)的集網(wǎng)頁(yè)制作和管理網(wǎng)站于一身的所見(jiàn)即所得網(wǎng)頁(yè)編輯器,它是第一套針對專(zhuān)業(yè)網(wǎng)頁(yè)設計師特別發(fā)展的視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具,利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿(mǎn)動(dòng)感的網(wǎng)頁(yè)。
另外,個(gè)人網(wǎng)站制作者還需了解W3C的HTML4.0規范、CSS層疊樣式表的基本知識、javascript、VBScript的基本知識。對于常用的一些腳本程序如ASP、CGI、PHP也要有適當了解,還要熟練使用圖形處理工具和動(dòng)畫(huà)制作工具以及矢量繪圖工具,并能部分了解多種圖形圖像動(dòng)畫(huà)工具的基本用法,熟練使用FTP工具以及擁有相應的軟硬件和網(wǎng)絡(luò )知識也是必備的。
當然,互聯(lián)網(wǎng)還是一個(gè)免費的資料庫。編制網(wǎng)頁(yè)需要多種多樣的按鈕、背景還有各種各樣圖形、圖片。如果這些都要靠自己完成,既浪費時(shí)間又浪費金錢(qián),而且還需要強大的圖形、圖片制作技術(shù)。所以,為了省卻這些麻煩,網(wǎng)站制作者完全可以從網(wǎng)上下載各種精美實(shí)用的圖片、按鈕、背景等網(wǎng)頁(yè)素材。
第五步:確定網(wǎng)站界面
界面就是網(wǎng)站給瀏覽者的第一印象,往往決定著(zhù)網(wǎng)站的可看性,在確定網(wǎng)站的界面時(shí)要注意以下三點(diǎn):
1.欄目與板塊編排
構建一個(gè)網(wǎng)站就好比寫(xiě)一篇論文,首先要列出提綱,才能主題明確、層次清晰。網(wǎng)站建設初學(xué)者,最容易犯的錯誤就是:確定題材后立刻開(kāi)始制作,沒(méi)有進(jìn)行合理規劃。從而導致網(wǎng)站結構不清晰,目錄龐雜混亂,板塊編排混亂等。結果不但瀏覽者看得糊里糊涂,制作者自己在擴充和維護網(wǎng)站也相當困難。所以,我們在動(dòng)手制作網(wǎng)頁(yè)前,一定要考慮好欄目和板塊的編排問(wèn)題。
網(wǎng)站的題材確定后,就要將收集到的資料內容作一個(gè)合理的編排。比如,將一些最吸引人的內容放在最突出的位置或者在版面分布上占優(yōu)勢地位。欄目的實(shí)質(zhì)為一個(gè)網(wǎng)站的大綱索引,索引應該將網(wǎng)站的主體明確顯示出來(lái)。在制定欄目的時(shí)候,要仔細考慮,合理安排。在欄目編排時(shí)需要注意的是:
●盡可能刪除那些與主題無(wú)關(guān)的欄目;
●盡可能將網(wǎng)站內最有價(jià)值的內容列在欄目上;
●盡可能從訪(fǎng)問(wèn)者角度來(lái)編排欄目以方便訪(fǎng)問(wèn)者的瀏覽和查詢(xún);輔助內容,如站點(diǎn)簡(jiǎn)介、版權信息、個(gè)人信息等大可不必放在主欄目里,以免沖淡主題。
另外,板塊的編排設置也要合理安排與劃分。板塊比欄目的概念要大一些,每個(gè)板塊都有自己的欄目。舉個(gè)例子:ENET硅谷動(dòng)力的站點(diǎn)分新聞、產(chǎn)品、游戲、學(xué)院等板塊,每個(gè)板塊下面又各有自己的主欄目。一般來(lái)說(shuō),個(gè)人站點(diǎn)內容較少,只要分個(gè)欄目也就夠了,不需要設置板塊。如果有必要設置板塊的,應該注意:
●各板塊要有相對獨立性;
●各板塊要有相互關(guān)聯(lián);
●各板塊的內容要圍繞站點(diǎn)主題;
2.目錄結構與鏈接結構
網(wǎng)站的目錄是指建立網(wǎng)站時(shí)創(chuàng )建的目錄。例如:在用Frontpage建立網(wǎng)站時(shí)都默認建立了根目錄和Images子目錄。目錄的結構是一個(gè)容易忽略的問(wèn)題,大多數站長(cháng)都是未經(jīng)規劃,隨意創(chuàng )建子目錄。目錄結構的好壞,對瀏覽者來(lái)說(shuō)并沒(méi)有什么太大的感覺(jué),但是對于站點(diǎn)本身的維護,以后內容的擴充和移植有著(zhù)重要的影響。所以建立目錄結構時(shí)也要仔細安排,比如:
●不要將所有文件都存放在根目錄下。有網(wǎng)站制作者為了方便,將所有文件都放在根目錄下。這樣就很容易造成:文件管理混亂,搞不清哪些文件需要編輯和更新,哪些無(wú)用的文件可以刪除,哪些是相關(guān)聯(lián)的文件,影響工作效率;上傳速度變慢,服務(wù)器一般都會(huì )為根目錄建立一個(gè)文件索引,如果將所有文件都放在根目錄下,那么即使只上傳更新一個(gè)文件,服務(wù)器也需要將所有文件再檢索一遍,建立新的索引文件,很明顯,文件量越大,等待的時(shí)間也將越長(cháng)。
●按欄目?jì)热萁⒆幽夸?。子目錄的建立,首先按主欄目建立。友情連接內容較多,需要經(jīng)常更新的可以建立獨立的子目錄。而一些相關(guān)性強,不需要經(jīng)常更新的欄目,例如:網(wǎng)站簡(jiǎn)介、站長(cháng)情況等可以合并放在一個(gè)統一目錄下。所有程序一般都存放在特定目錄,例如:CGI程序放在cgi-bin目錄,所有提供下載的內容也最好放在一個(gè)目錄下,便于維護管理。
●在每個(gè)主目錄下都建立獨立的Images目錄。一般來(lái)說(shuō),一個(gè)站點(diǎn)根目錄下都有一個(gè)默認地Images目錄。將所有圖片都存放在這個(gè)目錄里很是不方便,比如在欄目刪除時(shí),圖片的管理相當麻煩。所以為每個(gè)主欄目建立一個(gè)獨立的Images目錄是方便管理的。原因很簡(jiǎn)單,就是方便維護與管理。
其它需要注意的還有:目錄的層次不要太深,不要超過(guò)3層;不要使用中文目錄,使用中文目錄可能對網(wǎng)址的正確顯示造成困難;不要使用過(guò)長(cháng)的目錄,太長(cháng)的目錄名不便于記憶;盡量使用意義明確的目錄,以便于記憶和管理。
網(wǎng)站的鏈接結構是指頁(yè)面之間相互鏈接的拓撲結構。它建立在目錄結構基礎之上,但可以跨越目錄。形象的說(shuō):每個(gè)頁(yè)面都是一個(gè)固定點(diǎn),鏈接則是在兩個(gè)固定點(diǎn)之間的連線(xiàn)。一個(gè)點(diǎn)可以和一個(gè)點(diǎn)連接,也可以和多個(gè)點(diǎn)連接。更重要的是,這些點(diǎn)并不是分布在一個(gè)平面上,而是存在于一個(gè)立體的空間中。一般的,建立網(wǎng)站的鏈接結構有兩種基本方式:
●樹(shù)狀鏈接結構(一對一),這類(lèi)似DOS的目錄結構,首頁(yè)鏈接指向一級頁(yè)面,一級頁(yè)面鏈接指向二級頁(yè)面。這樣的鏈接結構瀏覽時(shí),一級級進(jìn)入,一級級退出,條理比較清晰,訪(fǎng)問(wèn)者明確知道自己在什么位置,不會(huì )“不知身在何處”,但是瀏覽效率低,一個(gè)欄目下的子頁(yè)面到另一個(gè)欄目下的子頁(yè)面,必須回到首頁(yè)再進(jìn)行。
●星狀鏈接結構(一對多),類(lèi)似網(wǎng)絡(luò )服務(wù)器的鏈接,每個(gè)頁(yè)面相互之間都建立有鏈接。這樣瀏覽比較方便,隨時(shí)可以到達自己喜歡的頁(yè)面。但是由于鏈接太多,容易使瀏覽者迷路,搞不清自己在什么位置,看了多少內容。
因此,在實(shí)際的網(wǎng)站設計中,總是將這兩種結構混合起來(lái)使用。網(wǎng)站希望瀏覽者既可以方便快速地達到自己需要的頁(yè)面,又可以清晰地知道自己的位置。所以,最好的辦法是:首頁(yè)和一級頁(yè)面之間用星狀鏈接結構,一級和二級頁(yè)面之間用樹(shù)狀鏈接結構。關(guān)于鏈接結構的設計,在實(shí)際的網(wǎng)頁(yè)制作中是非常重要一環(huán),采用什么樣的鏈接結構直接影響到版面的布局。
3.進(jìn)行形象設計
網(wǎng)站的設計可以從以下幾點(diǎn)出發(fā):
●設計網(wǎng)站標志(LOGO)。LOGO是指網(wǎng)站的標志,標志可以是中文、英文字母,也可以是符號、圖案等。標志的設計創(chuàng )意應當來(lái)自網(wǎng)站的名稱(chēng)和內容。比如:網(wǎng)站內有代表性的人物、動(dòng)物、植物,可以用它們作為設計的藍本,加以卡通化或者藝術(shù)化;專(zhuān)業(yè)網(wǎng)站可以以本專(zhuān)業(yè)有代表的物品作為標志。最常用和最簡(jiǎn)單的方式是用自己網(wǎng)站的英文名稱(chēng)作標志,采用不同的字體、字母的變形、字母的組合可以很容易制作好自己的標志。
●設計網(wǎng)站色彩。網(wǎng)站給人的第一印象來(lái)自視覺(jué)沖擊,不同的色彩搭配產(chǎn)生不同的效果,并可能影響到訪(fǎng)問(wèn)者的情緒?!皹藴噬省笔侵改荏w現網(wǎng)站型象和延伸內涵的色彩,要用于網(wǎng)站的標志,標題,主菜單和主色塊。給人以整體統一的感覺(jué)。至于其它色彩也可以使用,但應當只是作為點(diǎn)綴和襯托,絕不能喧賓奪主。一般來(lái)說(shuō),一個(gè)網(wǎng)站的標準色彩不超過(guò)3種,太多則讓人眼花繚亂。適合于網(wǎng)頁(yè)標準色的顏色有:藍色,黃/橙色,黑/灰/白色三大系列色。
●設計網(wǎng)站字體。和標準色彩一樣,標準字體是指用于標志,標題,主菜單的特有字體。一般網(wǎng)頁(yè)默認的字體是宋體。為了體現站點(diǎn)的“與眾不同”和特有風(fēng)格,可以根據需要選擇一些特別字體。制作者可以根據自己網(wǎng)站所表達的內涵,選擇更貼切的字體。需要說(shuō)明的是:使用非默認字體只能用圖片的形式,因為很可能瀏覽者的計算機里沒(méi)有安裝特別字體,那么辛苦設計制作便可能付之東流了。
●設計網(wǎng)站宣傳語(yǔ)。也可以說(shuō)是網(wǎng)站的精神、主題與中心,或者是網(wǎng)站的目標,用一句話(huà)或者一個(gè)詞來(lái)高度概括。用富有氣勢的話(huà)或詞語(yǔ)來(lái)概括網(wǎng)站,進(jìn)行對外宣傳,可以收到比較好的結果。
第六步:確定網(wǎng)站風(fēng)格
“風(fēng)格”是抽象的,是指站點(diǎn)的整體形象給瀏覽者的綜合感受。這個(gè)“整體形象”包括站點(diǎn)的CI(標志,色彩,字體,標語(yǔ))、版面布局、瀏覽方式、交互性、文字、語(yǔ)氣、內容價(jià)值等等諸多因素,網(wǎng)站可以是平易近人的、生動(dòng)活潑的也可以是專(zhuān)業(yè)嚴肅的。不管是色彩、技術(shù)、文字、布局,還是交互方式,只要你能由此讓瀏覽者明確分辨出這是你網(wǎng)站獨有的,這就形成了網(wǎng)站的“風(fēng)格”。
風(fēng)格是有人性的,通過(guò)網(wǎng)站的色彩、技術(shù)、文字、布局、交互方式可以概括出一個(gè)站點(diǎn)的個(gè)性:是粗獷豪放的,還是清新秀麗的;是溫文儒雅的,還是執著(zhù)熱情的;是活潑易變的,還是墨守成規的。
總之,有風(fēng)格的網(wǎng)站與普通網(wǎng)站的區別在于:在普通網(wǎng)站上你看到的只是堆砌在一起的信息,你只能用理性的感受來(lái)描述,比如信息量多少,瀏覽速度快慢等;在有風(fēng)格的網(wǎng)站上你可以獲得除內容之外的更感性的認識,比如站點(diǎn)的品位,對瀏覽者的態(tài)度等。
在明確自己想給人以怎樣的印象后,要找出網(wǎng)站中最有特色的東西,就是最能體現網(wǎng)站風(fēng)格的東西。并以它作為網(wǎng)站的特色加以重點(diǎn)強化、宣傳??傊?,風(fēng)格的形成不是一次定位的,你可以在實(shí)踐中不斷強化、調整、改進(jìn)。
第七步:有創(chuàng )意的內容選擇
好的內容選擇需要有好的創(chuàng )意,作為網(wǎng)頁(yè)設計制作者,最苦惱的就是沒(méi)有好的內容創(chuàng )意。網(wǎng)絡(luò )上的最多的創(chuàng )意即是來(lái)自于虛擬同現實(shí)的結合。創(chuàng )意的目的是為了更好的宣傳與推廣網(wǎng)站,如果創(chuàng )意很好,卻對網(wǎng)站發(fā)展毫無(wú)意義,那么,網(wǎng)站設計制作者也應當放棄這個(gè)創(chuàng )意。另外,主頁(yè)內容是網(wǎng)站的根本之所在,如果內容空洞,即使頁(yè)面制作地再怎樣精美,仍然不會(huì )有多少用戶(hù)。從根本上說(shuō),網(wǎng)站內容仍然左右著(zhù)網(wǎng)站流量,內容為王(Content Is King)依然是個(gè)人網(wǎng)站成功的關(guān)鍵。
第八步:選購網(wǎng)站空間
這個(gè)一步應該是和選好域名的時(shí)候已經(jīng)確定網(wǎng)站空間放在那里。如知名的中國網(wǎng)絡(luò )服務(wù)。在網(wǎng)絡(luò )服務(wù)器上開(kāi)辟出一定配額的磁盤(pán)空間供用戶(hù)放置網(wǎng)站、文件等內容,最基本的虛擬主機功能包含web訪(fǎng)問(wèn)和文件傳輸功能。