網頁設計的實用
摘要：在internet飛速發展的今天，網際網路成為人們獲取資訊的重要方式。而吸引瀏覽使用者的則是視覺效果出色、資訊量豐富、使用起來便捷的網頁，所以網頁設計尤為重要。
本文從網頁設計的角度出發，介紹網頁版本的基本型別及一些設計中要素和技巧，例如框架、css樣式的使用等等。
關鍵詞：網頁設計、要素、框架、css、網頁版本、基本型別
網際網路成為人們快速獲取、發布和傳遞資訊的重要渠道，它在人們政治、經濟、生活等各個方面發揮著重要的作用。網頁設計伴隨著網路的快速發展而快速興起，作為上網的主要依託，由於人們使用網路的頻繁而變得非常的重要。網頁講究的是排版布局，其功能主要就是提供一種形式給每個上網者，讓他們能夠了解**提供的資訊。
1. 網頁版式的基本型別
網頁版式的基本型別主要有骨骼型、滿版型、分割型、中軸型、曲線型、傾斜型、對稱型、焦點型、三角型、自由型等十種。
骨骼型:網頁版式的骨骼型是一種規範的、理性的分割方法，類似於報刊的版式。常見的骨骼有豎向通欄、雙欄、三欄、四欄和橫向的通欄、雙欄、三欄和四欄等。
一般以豎向分欄為多。這種版式給人以和諧、理性的美。幾種分欄方式結合使用，既理性、條理，又活潑而富有彈性。
滿版型 :頁面以影象充滿整版。主要以影象為訴求點，也可將部分文字壓置於影象之上。
視覺傳達效果直觀而強烈。滿版型給人以舒展、大方的感覺。隨著寬頻的普及，這種版式在網頁設計中的運用越來越多。
分割型:把整個頁面分成上下或左右兩部分，分別安排**和文案。兩個部分形成對比：
有**的部分感性而具活力，文案部分則理性而平靜。可以調整**和文案所佔的面積，來調節對比的強弱。例如：
如果**所佔比例過大，文案使用的字型過於纖細，字距、行距、段落的安排又很疏落，則造成視覺心理的不平衡，顯得生硬。倘若通過文字或**將分割線虛化處理，就會產生自然和諧的效果。
中軸型:沿瀏覽器視窗的中軸將**或文字作水平或垂直方向的排列。水平排列的頁面給人穩定、平靜、含蓄的感覺。垂直排列的頁面給人以舒暢的感覺。
曲線型 :**、文字在頁面上作曲線的分割或編排構成，產生韻律與節奏。
傾斜型:頁面主題形象或多幅**、文字作傾斜編排，形成不穩定感或強烈的動感，引人注目。
對稱型 :對稱的頁面給人穩定、嚴謹、莊重、理性的感受。 對稱分為絕對對稱和相對對稱。
一般採用相對對稱的手法，以避免呆板。左右對稱的頁面版式比較常見。 四角型也是對稱型的一種，是在頁面四角安排相應的視覺元素。
四個角是頁面的邊界點，重要性不可低估。在四個角安排的任何內容都能產生安定感。控制好頁面的四個角，也就控制了頁面的空間。
越是凌亂的頁面，越要注意對四個角的控制。
焦點型:焦點型的網頁版式通過對視線的誘導，使頁面具有強烈的視覺效果。焦點型分三種情況。a.中心以對比強烈的**或文字置於頁面的視覺中心。
b.向心視覺元素引導瀏覽者視線向頁面中心聚攏，就形成了乙個向心的版式。向心版式是集中的、穩定的，是一種傳統的手法。
c.離心視覺元素引導瀏覽者視線向外輻射，則形成乙個離心的網頁版式。離心版式是外向的、活潑的，更具現代感，運用時應注意避免凌亂。
三角型:網頁各視覺元素呈三角形排列。正三角形（金字塔型）最具穩定性，倒三角形則產生動感。側三角形構成一種均衡版式，既安定又有動感。
自由型:自由型的頁面具有活潑、輕快的風格。
2. 網頁設計的要素
在乙個**中，最重要的頁面當屬主頁，所以在此以主頁為例，說明在網頁製作中版面設計的問題。從版面設計來講,乙個有特色的主頁,必須包含有四個要素：文字，**，排列方式和主色調，這四者相輔相成，缺一不可。
2.1**要素
要設計出漂亮的主頁，首先要成為計算機圖形高手，僅這一點就可以讓初學者花上一年半載的時間。**的要求與頁面的內容有關，一些較隨意的主頁像**、醫藥站點等，來訪者並不在乎你能否做出精彩的**，有些時候他們反而覺得放置圖象後影響了訪問速度，他們關心的只是頁面內容；相反像一些需要靠圖象來吸引訪客的主頁，如遊戲介紹、影視介紹、風光名勝等站點，圖象是乙個極為重要的要素，在這裡缺少了恰當的圖象，整個頁面就會黯然失色、就是乙個不完整的主頁。這需要去學習像photoshop這樣的圖形影象處理軟體，還要有一定的美術基礎，如審美觀、創意技巧等，
2.2排列方法要素
主頁的第二個要素是排列方法，即網頁布局。網頁作為一種版面，既有文字，又有**；文字有大有小，還有標題和正文之分；**頁有大小而且有橫豎之別。**和文字都需要同時展示給觀眾，不能簡單地將其羅列在乙個頁面上，否則會搞得雜亂無章。
關於具體的網頁布局，常見的有「國」字型、拐角型、標題正文型、左右框架型、上下框架型、綜合框架型、封面型、flash型、變化型等，關於它們，在網頁設計的相關書籍中或者在網路上都可以看到詳細的敘述。比如如果內容非常多，就要考慮用「國字型」或拐角型；而如果內容不算太多而一些說明性的東西比較多，則可以考慮標題正文型；而如果是乙個企業**想展示一下企業形象或個人主頁想展示個人風采，封面性是首選；flash型更靈活一些，好的flash大大豐富了網頁，但是它不能表達過多的文字資訊。還沒有提到的就是變化型了，只有不斷的變化才會提高，才會不斷豐富我們的網頁。
2.3色彩要素
色彩在網頁所佔比重很大。有了合理清新的色調，會彌補主頁上的其它不足。頁面的色彩搭配是與**的主題分不開的，乙個**必須有一種或兩種主題色。
不至於讓瀏覽者迷失方向，也不至於單調乏味。一般來說，頁面的主體文字應盡量使用黑色等較深的顏色，與背景對比明顯，按鈕、邊框等使用彩色。例如教育類**使用藍色為主題色，再用紅色和黑色作為配色，就能表達出嚴肅、穩重的效果。
3. 網頁設計技巧
一張完美的主頁設計需要積累豐富的知識以及掌握大量的技巧。在這裡筆者從框架和css樣式的運用兩方面來介紹網頁設計的技巧。
3.1框架的使用
frame（框架）是web上經常會看到的頁面結構。框架的最常見用途就是導航。一組框架通常包括乙個含有導航條的框架和另乙個要顯示主要內容頁面的框架。
使用框架具有以下優點：訪問者的瀏覽器不需要為每個頁面重新載入與導航相關的圖形；每個框架都具有自己的滾動條(如果內容太大，在視窗中顯示不下)，因此訪問者可以獨立滾動這些框架。例如，當框架中的內容頁面較長時，如果導航條位於不同的框架中，那麼向下滾動到頁面底部的訪問者就不需要再滾動回頂部來使用導航條。
使用框架具有以下缺點：可能難以實現不同框架中各元素的精確圖形對齊；對導航進行測試可能很耗時間。
許多專業 web 設計人員不喜歡使用框架，並且許多瀏覽 web 的人也不喜歡框架。在大多數情況下，這種反感是因為遇到了那些使用框架效果不佳或不必要地使用框架的站點(例如，每當訪問者單擊導航按鈕時就重新載入導航框架內容的框架集)。如果框架使用得法(例如，在允許其他框架的內容發生更改的同時，使乙個框架中的導航控制項保持靜態)，則這些框架對於某些站點可能非常有用。
3.2 css樣式的使用
css(層疊樣式表)是一種製作網頁的新技術,它的全稱是級聯樣式表,即cascading style sheets的縮寫，又稱之為風格樣式表單。css是在網頁製作過程中普遍用到的技術。採用了css技術控制的網頁，設計者會更輕鬆、有效地對頁面的整體布局、顏色、字型、鏈結、背景以及同一頁面的不同部分、不同頁面的外觀和格式等效果實現更加精確地控制。
4. 網頁設計經驗談
一般的來說，絕大多數普通受眾圖形，外掛程式，applets和其它有關的高階web瀏覽器特性。對我們來說，頁面的實用可能比漂亮更重要，對於使用者來說，沒有什麼比頁面能夠快速**更重要了，簡而言之，精簡你的站點，這是一條最佳的捷徑。
另外還要注意，不要依賴圖形。就站點設計而言，的確能夠通過成功的圖形設計招徠或者丟失訪問者。並非所有的訪問者可以完全看到**，某些人為了加快訪問網路的速度已經關閉了瀏覽器端的圖形。
簡而言之，圖形並不能正確的在客戶端載入。然而，圖形經常被用來作為導航按鈕。
第三要注意，僅僅在需要的時候使用幀(frame)。 使用幀可以把乙個瀏覽器分成幾個不同的視窗，對於站點的結構的把握是乙個不錯的方法。但是，你還是必須知道，還是有人在使用不支援幀的瀏覽器。
在你開始打算設計乙個幀的時候，你該仔細的考慮考慮你是否的確真的需要。經常，你這樣的需求可以通過**來組織站點的結構。
網頁設計涉及到對多種軟體、多種知識的學習和應用，以及個人的審美觀等等。所以要想製作出漂亮的網頁，需要乙個逐步學習和經驗積累的過程。網頁設計還有更多的技巧，有待於我們去挖掘和研究。
參考文獻：
[1] 石範鋒:css技術在網頁製作中的應用,福建電腦,2010-09-25;
[2] 肖君:網頁設計的一般規則,電腦技術,1999-04-15;
[3] 布吟:網頁設計小技巧電子與電腦 2001-05-15 ;
[4] 鬲波飛:網頁設計之視覺資訊傳達分析,湖南大學學報(社會科學版),2001-12-30;
[5] 趙暉:網頁設計學習法的主要問題和經驗,外國中小學教育,2004-04-15;
[6] 劉永翔,唐良瑞:網頁設計中的視覺構成分析,北京工商大學學報(自然科學版),2004-02-05.
電子商務分析與設計報告格式
設計題目 組長姓名 班級 學號 成員姓名 班級 學號 成員姓名 班級 學號 小組分工 1 需求分析 2 用例圖 3 類圖 4 順序圖 5 狀態圖 6 活 7 部署圖 目錄一 概述 1.1 系統簡介 圖書館圖書管理系統，是乙個由人 計算機等組成的能進行管理資訊的收集 傳遞 加工 儲存 維護和使用的系統...
電子商務系統設計與實現試題
中國礦業大學2009 2010學年第二學期 電子商務系統設計與實現 試卷 a 卷 考試時間 90 分鐘考試方式 筆試 學院班級姓名學號 1.visual studio 2008中，一般處理程式 的副檔名是 a.asmxb.ascxc.aspxd.ashx 2.c 中單行注釋以字元 開始。abcd.3...
電子商務課程設計
摘要本 利用internet網路電子商務新技術,採用網路資料庫解決方案，實現了基於b s模式的電子商務管理。憑藉web伺服器和客戶的瀏覽器，利用電子工具高效率 低成本的特點，為客戶提供交易平台，在internet上發布商業資訊，商品廣告，使使用者可以查閱商品 搜尋商品 訂購商品，為客戶提供全天候的 ...