| 海納百川 服務永久
當前位置:HOME > 新聞資訊 > 網站建設 > 分享下網頁設計基礎知識

分享下網頁設計基礎知識

日期:2019-05-20      瀏覽次數:

網頁設計基礎知識
 
1.1 網站
 
網站(Web Site)是一個存放網絡服務器上的完整信息的集合體。它包含一個或是多個網頁,這些網頁以此一定的方式鏈接于一起,成為一個整體,用來描述一組完整的信息或是達到某種期望的宣傳效果。有的網站內容眾多,如新浪、搜狐等門戶網站;有的網站僅有幾個頁面,如個人網站。
 
1.2 網頁
 
網頁(Web Page)事實上是一個文件,網頁里面可以有文字、圖像、聲音以及視頻信息等。網頁可以看成是一個單一體,是網站的一個元素。
 
平常我們所聽說的“新浪”、“搜狐”、“網易”等,乃是俗稱的“網站”。因而如果我們訪問這些網站的時候,最為直接訪問的便是“網頁”了。這許許多多的網頁亦組成了整個站點,亦便是網站。
 
1.3 首頁
 
首頁(Home page),它是一個單獨的網頁,與一般網頁一樣,可以存放各種信息,除此之外亦是一個特殊的網頁,作為整個網站的起始點與匯總點。例如,如果瀏覽者輸入搜狐網站地址“www.sohu.com”之后出現于第一個頁面,即sohu網站的首頁。
 
問題:首頁與主頁有區別嗎?
 
一般網站作為方便瀏覽者查找與分類瀏覽網站的信息,會把信息分類,并且建立一個網頁以此放置網站信息的目錄,即網站的主頁。
 
并非所有的網站均把主頁設置作為首頁,有的網站喜歡于首頁放置一段進入動畫,并且把主頁的鏈接放置于首頁之上,瀏覽者需要單擊首頁的鏈接進入主頁。
 
1.4網頁的表現形式
 
1.靜態網頁:客戶端和服務器端絕不發生相互作用
 
訪問者只能被動地瀏覽網站建設者提供的網頁內容。其特點:
 
網頁內容絕不會發生變化,如果網頁設計者修改了網頁的內容。絕不能實現與瀏覽網頁的用戶間的交互。信息流向是單向的。
 
2.動態網頁:客戶端和服務器端要發生相互作用
 
動態網頁是指瀏覽器可以與服務器數據庫進行實時數據交流的交互網頁,因而絕不是加上了動畫等效果的動感網頁。動態網頁技術的網站可以實現越來越多的功能,如用戶注冊、用戶登錄、搜索查詢、用戶管理、訂單管理等。信息流向是雙向的。
 
2.1 網站LOGO
 
1.通常網站為體現其特色和內涵,涉及并且制作一個LOGO圖如同放置于網站的左上角或是其他醒目的位置。
 
2.企業網站經常使用企業的標志或是注冊商標。
 
3.一個設計優秀的LOGO可以予瀏覽者留下深刻的印象,作為網站與企業形象宣傳起到十分重要的作用。
 
2.2 導航條
 
導航條是網頁的重要組成元素。設計的目的是把站點之內的信息分類處理,接著放在網頁之中以此幫助瀏覽者快速查找站之內信息。
 
導航條的形式多種多樣,包括文本導航條、圖像導航條及動畫導航條等。
 
有些使用特殊技術(例如Flash、JavaScript、CSS)制作的導航條也可以具有下拉菜單的功能。
 
2.3 Banner
 
Banner的中文意思是橫幅。Banner的內容一般作為網頁之中的廣告。
 
于網頁布局之中,大部分網頁把Banner放置于和導航條相鄰處,或是其他醒目的位置以此吸引瀏覽者瀏覽。
 
2.4 內容版塊
 
網頁的內容版塊是整個頁面的組成部分。
 
設計人員可以透過該頁面的欄目要求來設計不同版塊,每個版塊可以有一個標題內容,并每個內容版塊重要來顯示不同文本信息。
 
2.5 版尾或是版權版塊
 
版尾,即頁面最低端的版塊。
 
這部分位置一般放置網頁的版權信息,及網頁所有者、設計者的聯系方式等。
 
有的網站亦把網站的友情鏈接及一些附屬的導航條放置于這里。
 
3.1 文本
 
網頁之中的信息以此文本為主。和圖片相比,文字盡管絕不如圖片那樣能夠不久引起瀏覽者的注意,但是反而能準確地表達信息的內容與含義。
 
3.2 圖片
 
用戶于網頁之中使用的圖片格式重要包括GIF、JPEG與PNG等,其中使用最為廣泛的是GIF與JPEG兩種格式。
 
3.3 超鏈接
 
超鏈接于本質之上屬于一個網頁的一部分,是一種允許用戶同一其他網頁或是站點間進行連接的元素。
 
超鏈接是指自一個網頁指向一個目標的連接關系,這個目標可以是另一個網頁,亦可以是相同網頁之上的不同位置,也可以是一個圖片、一個電子郵件地址、一個文件,而且是一個應用程序。
 
3.4 動畫
 
于網頁之中借以越來越有效地吸引瀏覽者的注意,許多網站的廣告均做成了動畫形式。
 
網頁之中的動畫重要有兩種:GIF動畫與Flash動畫。其中GIF動畫只能有256種顏色,重要用于簡單動畫與圖標。
 
3.5 聲音與視頻
 
聲音是多媒體網頁的一個重要組成部分。用于網絡的聲音文件的格式十分多,常用的有MIDI、WAV、MP3與AIF等。
 
很多瀏覽器你們插件亦可以支持MIDI、WAV與AIF格式的文件,因而MP3與RM格式的聲音文件亦需要專門的瀏覽器播放。
 
3.6 表格
 
于網頁之中表格用來控制網頁之中信息的布局方式。
 
包括兩個方面:一是使用行與列的形式來布局文本與圖像及其他的列表化數據;二是可以使用表格來精確控制各種網頁元素于網頁之中出現的位置。
 
3.7 表單
 
網頁之中的表單一般用來接受用戶于瀏覽器端的輸入,接著把這些信息發送到網頁設計者設置的目標端。這個目標可以是文本文件、Web頁、電子郵件,亦可以是服務器端的應用程序。
 
表單一般用來收集聯系信息、接受用戶要求、獲得反饋意見、設置來賓簽名簿、讓瀏覽者注冊為會員并且以此會員的身份登錄站點等。
 
3.8 其他常見元素
 
包括懸停按鈕、Java特效、ActiveX等各種特效。它們不但能點綴網頁,使網頁越來越活潑有趣,所以于網上娛樂、電子商務等方面亦有著不可忽視的作用。
 
4.1 文本編輯器
 
不但于記事本之中可以編寫HTML代碼,任何文本編輯器均可以編寫HTML。比如寫字板、word等,但是保存的時候必需保存為。html或是。htm格式。
 
有一些文本編輯器專門提供網頁制作以及程序設計等許多有用的功能,支持HTML、CSS、PHP、ASP、Perl、C/C++、Java、JavaScript、VBScript等多種語法的著色顯示。
 
例如:Sublime text3、EmEditor、EditPlus、UltraEdit
 
4.2 Dreamweaver網頁設計軟件
 
這是現在使用最為廣泛的網頁編輯工具之一。
 
Dreamweaver是Macromedia公司推出的網頁編輯工具。
 
它是一個所見即所得網頁編輯器,支持最新的DHTML(Dynamic HTML,動態HTML)與CSS標準。采用了多種先進技術,能夠迅速高效地創建較具表現力與動感效果的網頁,使網頁創作過程變得非常簡單。
 
另外還有Microsoft公司開發的FrontPage亦是設計網頁與管理網站的軟件。除所見即所得的編輯功能以外,亦可以直接編輯HTML標記,讓設計者可以輕松的編輯網頁。
 
4.3 Photoshop圖像處理軟件
 
Photoshop是Adobe公司推出的功能強大的平面圖像處理軟件,Photoshop于圖像編輯、視窗出版、網頁圖像編輯、廣告設計、婚紗攝影等各行各業的廣泛應用,它已經成為許多涉及圖像處理的行業的事實標準。
 
4.4 Flash動畫設計軟件
 
Flash是Macromedia公司開發的一款優秀的網頁動畫開發軟件,自簡單的動畫到復雜的交互式Web應用程序,它使用戶可以創建任何作品。透過添加圖片、聲音與視頻,可以使Flash應用程序媒體豐富多彩。
 
Flash遭稱為“最為靈活的前臺”,其獨特的編譯方式與跨平臺的能力,廣泛的應用(軟件、游戲、Web應用程序、多媒體娛樂等多方面),使之愈來愈成為一種重要的工具。
 
4.5 Fireworks網頁圖像處理軟件
 
Fireworks是Macromedia公司發布的一款專門作為網絡圖形設計的圖形編輯軟件,使用Fireworks均不但可以輕松地制作出尺寸比較小的圖形、GIF動畫。
 
假如把Photoshop比作全能的圖像處理大師的話,Fireworks便是精于網頁圖像處理的專家。它于矢量圖形的處理方面有其獨特之處。
 
于Web應用方面,Fireworks是最為早提供切片功能的圖像處理軟件。Fireworks支持于圖像中繪制熱區并且直接生成網頁文檔,并具備簡單的GIF動畫制作能力,除此之外支持把動畫轉換為Flash文件并且嵌入到網絡中播放。
 
5.1 CSS
 
CSS即層疊樣式表(CascadingStyle Sheet)。于主頁制作時采用CSS技術,可以有效地對于頁面的布局、字體、顏色、背景與其它效果實現更為精確的控制。
 
HTML=內容
 
CSS=表現
 
CSS帶來的好處:
 
CSS使頁面載入越來越快;
 
CSS可以降低網站的流量費用;
 
CSS使設計師于修改設計時越來越有效率,因而代價越來越低;
 
CSS使整個站點保持視覺的一致性;
 
5.2 JavaScript
 
JavaScript是改由 Netscape公司開發的一種腳本語言,可以遭嵌入HTML文件之中,它是一種基于對象與事件驅動,并且具有安全性能的腳本語言。
 
于HTML基礎之上,使用JavaScript可以開發交互式Web網頁,可以回應使用者的需求事件因而絕不需要透過網絡來回傳輸資料。
 
簡單地說,如果用戶輸入一項信息時,絕不需要先行把信息傳給服務器處理,再次傳回來,或者可以直接遭客戶端的程序處理。
 
6.1 網頁布局
 
網頁布局是網頁設計的基礎,目前網頁的布局重要可歸為三大類型:
 
1.分欄式結構
 
2.區域分布式結構
 
3.無框架局限式結構
 
分欄式布局
 
區域分布式布局
 
無框架局限式布局
 
6.2 導航設計
 
1.導航是網頁設計之中不可或缺的基礎元素之一。導航便如同一個網站的路標,有了它便絕不會于瀏覽網站時“迷路”。導航鏈接著各個頁面,如果單擊導航之中的超級鏈接便能進入相應的頁面。
 
2.導航設計的好壞,決定著用戶是否能非常方便地使用網站。導航設計應直觀明確,最為大限度地作為用戶使用考慮,盡量使網頁切換越來越便捷。導航的設計要符合整個網站的風格與要求,不同的網站會采用不同的導航方式。
 
3.一般來說,于網頁的上端或是右側設置導航欄是較普遍的方式。網站采用上端文字當作一級導航,右側樹狀結構菜單作為二級導航。
 
讓用戶了解當前所處的位置;
 
4.讓用戶能依據走過的路徑,確定之下一步的前進方向與路徑;
 
5.絕不需要瀏覽甚多的頁面便能找到需要的信息,讓用戶能迅速因而簡捷地找到所需的信息,并且以此最佳的路徑到達這些信息;
 
6.讓用戶使用網站遇到困難時,能尋求到解決困難的方法,找到最佳路徑;
 
7.讓用戶清楚地了解整個網站的結構概況,產生整體性感知;
 
8.對于使用頻率不同的信息作有序處理。
 
7.1 頁面配色
 
設計精美的網站均有其色調構成的總體傾向。以此一種或是幾種臨近顏色為主導,使網頁全局呈現某種和諧、統一的色彩傾向。
 
運用色系。先行依據網頁主題,選定一種主色,接著調整透明度或是飽和度,亦便是把色彩變淺或是加深,調配出新的色彩。這樣的頁面看起來色彩一致,有層次感;一般來說,適合在網頁標準色的顏色有3大系:藍色、黃/橙色與黑/灰/白色。
 
使用對比色??梢猿浞掷脤τ诒壬M行設計,除此之外注意使用灰色調進行調和。這樣的作品頁面色彩豐富。
 
7.2 文字藝術
 
文字于版面之中一般占有絕大部分空間,是網頁信息的主要載體。處理好文字關系到網頁設計的成敗。字體的選擇、字號的大小、文字的顏色、行和行的距離、段落和段落的安排,均需要認真考慮。好的文字設計會予網頁增色不少。
 
7.3 實例分析
 
1.網站描述
 
這是一家航空公司的網站首頁。界面設計給人現代、驛動的感覺,這和公司的風格相互一致。導航設計簡潔利落,非常值得學習借鑒。
 
2.布局
 
網頁布局采用的是較常見的分欄式結構。A作為網站的Logo所在的區域;B作為網站主菜雙所在的區域;C作為搜索和其他公共功能所在的區域;D作為網站的內容區域,重要改由文字與圖片組成;E為版權信息所在的區域。
 
3.配色
 
網頁選用藍色系,象征天空,和網站主題一致。網頁重要運用了兩種藍色,依次是“#14397D”與“1E95BD”。除此之外,網頁文字的配色重要以此白色與藍色為主。

上一篇:分析下2019年網頁設計趨勢

下一篇:分享網站設計之圖文排版小技巧

返回列表

更多 +聯系我們

業務電話:0573 / 8221698018257330123

業務 QQ:  935003069

客服電話:0573 /82216980

客服 QQ569963278 E-mail:  service@seatec.cn

關于海納網絡

嘉興市海納網絡科技有限公司14年專注于網站定制及互聯網產品開發。始終秉承以客戶為中心的服務理念,"海納百川,服務永久"的服務宗旨。致力于為客戶建設一個全方位的互聯網營銷體系,幫助傳統企業實現“互聯網+”轉型升級。

多年來海納網絡專注于創意設計和品牌傳播,為企業提供全方位的網絡支持。包含網站建設、網絡應用軟件開發、微信開發、APP、企業郵箱,從策劃、設計、開發、實施維護等各階段,不斷探索視覺與體驗的完美結合,以網站建設為切入點,為客戶提供專業化的整體解決方案。

我們珍視與客戶的每次合作,始終把與客戶的共同發展作為己任,與眾多客戶在蓬勃發展的市場環境中互促共生。

爱情视频大全美国