網站的色系是瀏覽者整體的視覺觀感，若一個網站色系能有一致性，不僅會使網站看起來美觀，更能讓瀏覽者對內容不易混淆，增加了瀏覽的簡潔與方便。而網站的色系更能襯托出網站的主題，若色系能與主題合理搭配，將會增加瀏覽者的易讀性。網站的色系包含了網頁的底色、文字字型、圖片的色系、顏色等等，這不單只是將顏色搭配得當就算完美，還要配合每個內容，及網站主題。對於網站的色系，應該要在網站開始製作前，做好規劃及設計，才不會到著手製作網站時，難以搭配，甚至造成混亂的設計。
基本介紹
- 中文名：網頁素材
- 排版：表格、框架的套用等
- 程式：網頁互動程式
- 色系：網頁的底色、文字字型等
介紹,色系,排版,程式,特效,注意問題,
介紹
一個人擁有自己獨特的風格，是一般人所沒有的，就會讓人注意到那個人的特別，若那個人的風格是正面的，甚至就會引起別人的羨慕與注意，或是讚賞。就如同一個網站，擁有別的網站所沒有的風格，就會讓瀏覽者願意多停留些時間，細細品嘗該站的內容，甚至該站會得到多人的鼓勵與注目，粗略的說，網站風格可以從以下幾個方向來探討，而每一項都是有關聯性的：
2. 排版：表格、框架的套用、文字縮排、段落等等。
3. 視窗：視窗效果，例如：全螢幕幕視窗、特效視窗等。
4.程式：網頁互動程式，例如：ASP 、.NET、JSP、PHP 、CGI等等。
5. 特效：讓網頁看起來生動活潑的各種套用，如：Flash . Java script . Java applets . DHTML等等。
6. 架構：目錄規劃、層次淺顯易懂、選單套用等等。
7. 內容：網站主題、整體實用性、檔案關聯性、內容切合度、是否有不必要的檔案等等。
8. 走向：對於網站的未來規劃、網站整體內容走向等。
以上這些項目都與網頁風格有密切的關係，網頁的風格不是某一項相同，網站就是有整體感，而是要各項目的配合套用，才能達到完美的網站風格設計。接下來的段落，將會為每個項目做簡單的介紹。
色系
網頁的底色是整個網站風格的重要指針。舉例來說，以黑色作為背景顏色的網頁，因黑色本對人的視覺上會造成黯淡的感覺，若是拿來用作活潑的兒童網站，就是不適合了。因為小孩子是天真無邪的、活潑的、有朝氣的，與黑色的沉穩、黯淡，很難聯想在一起。再舉個例子，若是寫一個有關於環保的網站，若用暗紅色作為網頁底色，決計不會有人聯想到網頁的內容是與環保有關。當然，每個人的審美觀不同，可能也會對顏色的代表性看法不同，但既然網站不是只寫給自己看的，就應該要注意到大部分人可能會有的觀點，然後以眾人居多的觀點出發，來設計網頁。
選擇圖片該以何作為標準呢？舉例來說，若網站內容為科學探討，當然不能以卡通圖片來作為插圖，試想，當您正在瀏覽一個有關天文學的網站，卻滿是皮卡丘的可愛圖片，不是很不協調嗎？再舉個例子，如果一個教學網站，裡頭卻儘是明星圖片，看上去根本就不像是教學網站，而是大雜匯的明星相片網。很多人喜歡將自己欣賞的明星照放上自己的網頁中，如果僅是個人網站倒也還好，因為個人網站本就無主題居多，也就沒有所謂的符不符合主題的顧慮，但若是有主題的網站，豈不糟糕？
以圖片內容來說，能切合網站主題最好，若不能，也別差異太多。以顏色來說，若一個網頁是藍色的底色，但整個網頁的圖檔卻亂七八糟，各種顏色紛紛出籠，更糟的是，藍色是屬於冷色系的顏色，若以藍色為底的網頁，卻盡都是大紅色、橘色的圖片，那將會使整張網頁看起來就像垃圾堆，雜亂無章。所以，可以簡單的歸納出，網頁與圖檔的顏色，色系一致或是視覺效果一致，將會使網頁看起來更為美觀且有自己的風格。
網頁的顏色，並非單一就圖檔案、文字顏色、或是底色為主，而是以瀏覽者的角度來觀看，整體網頁看上去是偏向哪種色系。常常見到許多網站雖然色系搭配的很好，但卻是沒有自己的風格。以目前流行的柔色系、粉色系網站來說，就是失了自己獨到的風格。因為使用粉色系的網站，不外乎都有相同的特點，文字顏色淺，底色也以淺色係為主，這樣除了沒有自己的風格外，看起來既不大方也難登大雅之堂。以各大搜尋網站來說，根本不會做這樣的設計，因為文字顏色淡，加上底色淺，對瀏覽者來說，閱讀上非常吃力，所以這樣的設計風格也應儘量避免。
一個有自己風格，且閱讀起來舒適大方的網頁，並不可能一次就寫好，而是需要經過不厭其煩的修正、調色，才能達到最佳瀏覽效果的，所以製作網頁也一定要有相當大的耐心。
排版
網站的排版是讓網頁瀏覽者閱讀方便，且內容主題明確的重要指針，若網站的排版經過精心規劃，將會使瀏覽者更能迅速的找到所需的資料。就如同一本書，編排得當將會使讀者一目了然，且更能了解該書所要闡述的內容。而網站的排版，就如同書冊的排版一般重要。網站的排版包含了表格、框架的套用、文字縮排、段落等等，而排版並不是整齊就好，還要有明確的分類，以及主題的適當規劃。
表格的套用是一般大型網站最常見到的編排方式，表格能使多段文字統合整理，達到清楚易懂的效果。表格不見得是有形的表格，何位有形的表格？一般常見的有形表格，多為有框線，或是有底色。表格可多形式的運用，如圖形與文字間的排版，表格可將圖形與文字做最恰當的編排，充分結合於網頁上。
然而表格的底色或底圖，應避免與文字起衝突。常見表格中用的底圖或底色因顏色過重，而文字不清楚，表格的重點當然仍是在於文字，不是在作為配角的底圖或底色。當底圖只是襯飾的作用時，就應讓其中的文字清楚明了。而表格的整體配色更是重要，框線及底色都應與網頁整體配色為主，若是以表格作為同一網頁編排，應儘量使各表格間不致差異太大。當有需要特別彰顯內容的表格，才有其必要性作不同的配色。
框架的套用，對於架設於較慢的網站空間之網頁，較適合框架的套用，框架可避免相同網頁重複讀取，拖累下載速度。但框架因切割整個畫面，造成瀏覽的內頁空間大幅度減小，故再使用框架務必要注意到內容主頁的易看性。框架編排，最需要注意的是左右滾動條應儘量避免，若一個網頁在閱讀上，要不斷的移動滾動條往右又往左移，將會對瀏覽者造成很大的不便。
另，框架也需要注意到連結的正確性，常看到以框架為主體的網頁，竟然按下選單框架頁中的連結，不是顯示在內容框架頁中，而是另開視窗，這真是脫著褲子放屁－多此一舉！且框架過多的網頁，會造成瀏覽者不知如何找尋資料的窘境。舉個最常見的例子，很多小型的個人網站，常喜歡以多框架來架構網站，數一數甚至框架頁達五六個以上，有時按了左側的選單，以為內容會出現在內容框架頁，卻竟然是顯示在右上角的某個小角落，這不是特有風格，既不美觀也不實際，更難以找到資料！
框架與表格皆為網頁整體編排利器，該如何運用與走出自己風格，就是需要長時間的修飾版面、觀摩學習（但絕非模仿抄襲）與經驗了。
程式
網站要實現動態互動，自然離不開程式：ASP 、.NET、JSP、PHP 、CGI都是比較常見的用於網站設計的語言。
在過去的幾年中，ASP大行其道，因其簡單易學，容易上手，又比較適合於一些中小型企業的網站設計，所以使用比較廣泛，但隨著.net的發展，asp即將步入歷史的行列，但因其使用較廣，影響較大，目前我們仍然能看到較多的網站採用asp進行程式設計。
.NET 是 Microsoft XML Web services 平台。XML Web services 允許應用程式通過 Internet 進行通訊和共享數據，而不管所採用的是哪種作業系統、設備或程式語言。Microsoft .NET 平台提供創建 XML Web services 並將這些服務集成在一起之所需。對個人用戶的好處是無縫的、吸引人的體驗。.NET不管是在性能上還是在安全方面，都比asp有較大的提升，在開發方面，更是提供了大量的控制項，開發者只需將控制項拖至頁面上，即可完成布局，這不僅大大簡化了開發流程，也提高了工作效率。目前.NET的最新版本為.NET3.5。
JSP(Java Server Pages)是由Sun Microsystems公司倡導、許多公司參與一起建立的一種動態網頁技術標準。JSP技術有點類似ASP技術，它是在傳統的網頁HTML檔案(*.htm,*.html)中插入Java程式段(Scriptlet)和JSP標記(tag)，從而形成JSP檔案(*.jsp)。 用JSP開發的Web套用是跨平台的，既能在Linux下運行，也能在其他作業系統上運行。
PHP，是英文超級文本預處理語言Hypertext Preprocessor的縮寫。PHP 是一種 HTML 內嵌式的語言，是一種在伺服器端執行的嵌入HTML文檔的腳本語言，語言的風格有類似於C語言，被廣泛的運用。
CGI全稱是“公共網關接口”(Common Gateway Interface)，HTTP伺服器與你的或其它機器上的程式進行“交談”的一種工具，其程式須運行在網路伺服器上。絕大多數的CGI程式被用來解釋處理來自表單的輸入信息，並在伺服器產生相應的處理，或將相應的信息反饋給瀏覽器。CGI程式使網頁具有互動功能。
特效
不可否認，網頁特效給網頁增輝不少，使網頁內容豐富多彩，加入了網頁特效，不僅活躍了網頁的氣氛,而且它打破了網頁靜悄悄的感覺，有時候會起到一定的親切力，讓人們在瀏覽網頁的同時又有一種享受的快感。就仿佛是在超市購物又聆聽著動聽的音樂似的。
在平常的網站中，網頁特效以JavaScript編寫為最常見，因此了解一點JavaScript腳本對網站初學者來說是個不錯的選擇。
網頁特效一般分為：時間日期類 時間日期類 頁面背景類 頁面特效類 圖形圖象類 按鈕特效類 滑鼠事件類 Cookie腳本 文本特效類 狀態欄特效 代碼生成類 導航選單類 頁面搜尋類 線上測試類 密碼類 技巧類 綜合類 遊戲類 等等。一些廣告代碼除使用Flash製作外，也有相當一部分使用了JavaScript腳本編寫的網頁特效。為此，此處簡單介紹一下JavaScript:
JavaScript是一種基於對象(Object)和事件驅動(Event Driven)並具有安全性能的腳本語言。使用它的目的是與HTML超文本標記語言、Java 腳本語言（Java小程式）一起實現在一個Web頁面中連線多個對象，與Web客戶互動作用。從而可以開發客戶端的應用程式 等。它是通過嵌入或調入到標準的HTML語言中實現的。它的出現彌補了HTML語言的缺陷，它是Java與HTML折衷的選擇，具有以下幾個基本特點： 是一種腳本編寫語言、基於對象的語言 、簡單性 、安全性 、動態性的 、跨平台性。
可以說掌握好JavaScript對網站建設有著舉足輕重的作用。
網頁素材是指從現實生活中搜尋到的、未經加工提煉的用來建設網站的資料。具體到美術創作而言，素材是美術家積累的形象資料（如速寫、素描、照片、圖片等）和文字材料（如有關的歷史事件、神話故事、文學作品等等文字研究材料）等等素材的總和。
注意問題
網站效果圖缺乏說服力
企業客戶雖然可以尋求建站企業的幫助，讓建站企業‘代勞’在網上完成素材的查找、選取和加工，但是再高明的圖片美化也無法讓不真實的圖片產生‘存在感’，用戶需要看到的是企業真實的一面，用最真實的照片才能讓用戶真切體會到企業的用心和品牌的感染力。另外，網上尋找的照片容易產生著作權糾紛，最終損害的還是企業自身的利益。因此，企業應當在外包企業進行網頁設計時及時提供所需的圖片。如果沒有的話，找專業攝影團隊或自行拍攝，品牌源於真實的自我塑造。
素材圖片效果差影響品牌形象展示
即便企業客戶能夠提供素材，也常常會因圖片像素不高、拍攝場景不佳等因素影響了素材在網站設計當中的利用率。PS是一個粗糙和簡易的解決方法，但不是最佳方案。最好的解決方案是尋求專業攝影團隊的幫助，對於決心塑造一個優秀的品牌形象的企業而言，對於自身品牌塑造有利的投資都是應當而且值得的。
