筆者也算是一個做網(wǎng)站的老手了,身邊一些朋友對此也感好好奇,隨手一弄,一個網(wǎng)站就做好了,而且每個網(wǎng)站都不一樣,還能搞出各種各樣的動畫來。于是問我,怎么做網(wǎng)站呢?做網(wǎng)站需要用到哪些軟件工具?怎么做網(wǎng)站動畫?做網(wǎng)站怎么上傳?說實話,這個問題還真不是三言兩語可以講清楚的,碰到這樣的提問已經(jīng)麻木了,于是才花了些時間整理并撰寫了本文。對于一個網(wǎng)頁設計師來講,做網(wǎng)站可能并不是一件太復雜的事情。但對于普通用戶或初學做網(wǎng)站的朋友,本文可以起到參考和引導的作用。
到底怎么做網(wǎng)站?首先要從網(wǎng)站的主要結構談起。我們能在網(wǎng)上看到各種各樣的網(wǎng)站,每個網(wǎng)站都有著不一樣的視覺設計風格,事實上,這是網(wǎng)頁設計師通過一些圖片處理軟件畫出來的。在有的網(wǎng)站里,還會顯示各種漂亮的動畫效果,而這些動畫效果是通過動畫設計軟件做出來的,還有一部分是通過CSS或JS腳本做出來的特效。我們可以看到網(wǎng)站里有很多很多的文字、圖片信息,這些信息是通過程序實現(xiàn)與數(shù)據(jù)庫存取,從而實現(xiàn)后臺管理、前臺顯示的功能。上述基本上是一個網(wǎng)站的主要構成元素,那么,這些網(wǎng)站構成元素是怎么做出來的呢?下面按做網(wǎng)站的步驟進行詳細分析。
第一步:界面視覺設計
每做一個網(wǎng)站的第一就是設計網(wǎng)站的界面視覺效果,簡單地講是把未來的網(wǎng)站用圖片處理軟件把它畫出來,也就是網(wǎng)站完成并且填滿內容后的最終效果。我們常用Photoshop圖像處理軟件,最終畫出來的效果如下圖所示:
第二步:切片與前端編碼
然而,我們畫出來的僅僅是一張圖片而已,它并不是一個網(wǎng)頁,因此,我們要對畫出來的這個圖進行切片處理,因為,在實際的網(wǎng)頁里,圖片和文字必須是分離的,把該寫文字的地方空出來,以便在空出來的地方添加各種程序,以顯示各種需要的文字、圖片等內容。
推薦您使用Dreamweaver網(wǎng)頁制作軟件,它在前端編碼以及后面的程序設計中都需要 到這個軟件。
所謂的前端編碼,實際上通過切片把框架和內容分離,采用DIV+CSS或其它編碼結構把做好的視覺設計圖變成html編碼格式,使之可以在瀏覽器中顯示。效果如下:
看上去比較亂,但它在瀏覽器中顯示是非常正常的。到現(xiàn)在,它已經(jīng)不僅僅是一張圖片了,它是由各種html代碼構成的。下圖就顯示了構成該網(wǎng)頁的html代碼。
第三步:動畫與特效設計
大多數(shù)網(wǎng)站中都有一些看起來會動的元素,這些元素可能是影片、FLASH,也可能是JS腳本特效。
FLASH動畫制作,通常使用Adobe公司提供的Flash軟件,請看下圖。
它能做出非常漂亮、絢麗的動畫效果,甚至還可以與某與數(shù)據(jù)庫進行連接,實現(xiàn)全FLASH網(wǎng)站。當然,我們今天不討論全FLASH動畫網(wǎng)站。
雖然FLASH可以做出非常好看的動畫效果,但是,在非常多可能的情況下,我們更愿意采用JS腳本程序和CSS來實現(xiàn)某些簡單的動畫。特別是CSS3的出現(xiàn),使實現(xiàn)各種更漂亮的動畫效果成為可能。比如下圖展示的效果。
第四步:程序與數(shù)據(jù)庫開發(fā)
到此,這個網(wǎng)頁雖然可以在瀏覽器里正常顯示,然而,網(wǎng)站里的內容(文字、圖片等)都是固定的。我們需要通過某個程序與數(shù)據(jù)庫的結合使用,建立一個網(wǎng)站信息管理系統(tǒng),對網(wǎng)站內容進行有效的管理。
比較常用的網(wǎng)頁程序腳本語言有PHP、ASP、JSP等,常用的數(shù)據(jù)庫有MYSQL、MSSQL、ACCESS等。主要看個人愛好和網(wǎng)站要求來進行選擇,筆者喜歡采用PHP+MYSQL、ASP+MSSQL或ASP+ACCESS的組合。下面以PHP+MYSQL為例。
一小段PHP代碼程序。
用于管理MYSQL的PHPMYADMIN
完成這四個步驟,網(wǎng)站就做好了。關于怎么做網(wǎng)站,我想你已經(jīng)有了一個基本的了解和認識了。但是,本文僅僅起到一個參考和引導的作用。怎么做網(wǎng)站的細節(jié),還需要自己在實踐的過程中進行摸索。若要把所有做網(wǎng)站的細節(jié)全部講清楚,至少需要5-10本關于Photoshop、FLASH、Javascript、Dreamweaver、MYSQL、PHP等等的書籍。藝瓊網(wǎng)絡歡迎與你進行探討、深入研究做網(wǎng)站的各種技巧和方法,共同進步、共同成長。