發表於2024-11-05
網頁設計基礎
隨著國內互聯網開發理論的發展,越來越多的網站開始更加注重網頁的界麵設計,通過優化和美化的界麵取得競爭的主動權,吸引更多的用戶。網頁界麵設計的作用在於,為網頁提供一個美觀且易於與用戶交互的圖形化接口,幫助用戶更方便地瀏覽網頁內容,使用網頁的各種功能。同時,優秀的界麵設計可以為用戶提供一種美的視覺享受。
本章主要介紹在設計網頁之前的一些基礎知識,以及設計網頁需要進行的各種準備工作。包括網站內容的策劃、網站闆塊的設計、網頁配色的理論,以及設計網頁所使用的一些基本技術和軟件。
1.1
網頁界麵構成
網頁是由瀏覽器打開的文檔,因此可以將其看作是瀏覽器的一個組成部分。網頁的界麵隻包含內置元素,而不包含窗體元素。以內容來劃分,一般的網頁界麵包括Logo、導航條、Banner、內容闆塊、版尾和版權等。
1.Logo
網站Logo是整個網站對外唯一的標識和標誌,是網站商標和品牌的圖形錶現。Logo的內容通常包括特定的圖形和文本,其中圖形往往與網站的具體內容或開發網站的企業文化緊密結閤,以體現網站的特色;文本主要起到加深用戶印象的作用,用戶可以通過這些文本介紹網站的名稱、服務,也可以體現網站的價值觀、宣傳口號。
一些簡單的Logo也可以隻包含文本,通過對文本進行各種變化來體現網站的特色。
在圖像中,包含瞭20個大型知名企業的商標,這些商標往往也與其官方網站的Logo一緻。
2.導航條
導航條是索引網站內容,幫助用戶快速訪問網站功能的輔助工具。根據網站內容,一個網頁可以設置多個導航條,還可以設置多級的導航條以顯示更多的導航內容。
3.Banner
Banner的中文直譯為旗幟、網幅或橫幅,意譯則為網頁中的廣告。多數Banner都以JavaScript技術或Flash技術製作,通過一些動畫效果,展示更多的內容,並吸引用戶觀看。
4.內容版塊
內容欄是網頁內容的主體。通常可以由一個或多個子欄組成,包含網頁提供的所有信息和服務項目。
內容欄的內容既可以是圖像,也可以是文本,或圖像和文本結閤的各種內容。
在設計內容欄時,用戶可以先獨立地設計多個子欄,然後再將這些子欄拼接在一起,形成整體的效果。同時,還可以對子欄進行優化排列,提高用戶的體驗。如網頁的內容較少,則可以使用單獨的內容欄,通過大量的圖像使網頁更加美觀。
5.版尾版塊
版尾是整個網頁的收尾部分。在這部分內容中,可以聲明網頁的版權、法律依據以及為用戶提供的各種提示信息等。
除此之外,在版尾部分還可以提供獨立的導航條,以為將頁麵滾動到底部的用戶提供一個導航的替代方式等。
版權的書寫應該符閤網站所在國傢的法律規範,同時遵循一般的習慣。正確的版權書寫格式如下所示。
Copyright (?) [Dates] (by) [Author/Owner] (All rights reserved.)
在上麵的文本中,小括號“()”中的內容是可省略的內容,中括號“[]”中的內容是根據用戶具體信息而可更改的內容。
“All rights reserved.”文本中,最後的英文句號是不可省略的。隻要使用“All rights reserved.”,就必須在其後添加英文句號。
版權符號“?”有時可以替代“Copyright”的文本,但是用戶不能以帶有括號的大寫字母C替代版權符號“?”。
在一些國傢的法律中,“All rights reserved.”是不可省略的。但在我國法律中並沒有對此進行嚴格規範,因此在實際操作中可以省略。
1.2
網頁版塊結構
在網頁的界麵設計工作中,界麵元素的設計固然重要,但這些界麵元素在網頁中分布的位置同樣也直接影響到用戶的體驗。網頁的版塊布局主要包括5種,即“國”字框架、拐角框架、左右框架、上下框架和封麵框架等5種。
1.“國”字框架
“國”字框架網頁布局又稱“同”字型框架網頁布局,其最上方為網站的Logo、Banner或導航條和內容版塊。
在內容版塊左右兩側通常會分列兩小條內容,可以是廣告、友情鏈接等,也可以是網站的子導航條。最下麵則是網站的版尾或版權版塊。
2.拐角框架
拐角框架型布局也是一種常見的網頁結構布局。其與“國”字框架型布局隻是在形式上有所區彆,實際差異不大。其區彆在於其內容版塊隻有一側有側欄,也就是導航條和側欄組成一個90°的直角。
在拐角框架型布局的網頁中,側欄同樣可以放置立式的Banner廣告(例如“摩天大樓”型),也可以放置輔助的側導航欄,為用戶訪問網頁提供幫助。
拐角框架型布局的網頁比“國”字型布局的網頁更加個性化一些,也更具備實用性。在具體的網頁設計中,拐角框架布局通常與大幅的網頁留白相結閤。一些娛樂型網頁比較喜歡使用拐角型框架布局。
3.左右框架
左右框架型網頁是一種被垂直劃分為兩個或多個框架的網頁布局結構,其樣式仿照瞭傳統的雜誌風格,可以在各框架中插入文本、圖像與動畫等媒體。左右框架型網頁布局通常會被應用到一些個性化的網頁或大型論壇網頁等,具有結構清晰、一目瞭然的優點。
4.上下框架
上下框架型網頁與左右框架類似,是一種被水平劃分為兩個或多個框架的網頁布局結構。在上下框架布局網頁中,主題部分並非如“國”字框架型或拐角框架型一樣由主欄和側欄組成,而是一個整體或復雜的組閤結構。
5.封麵框架
這種類型的網頁,通常作為一些個性化網站的首頁,以精美的動畫,加上幾個鏈接或“進入”按鈕,甚至隻在圖片或動畫上做超鏈接。
1.3
網站整體策劃
網站的整體策劃是一個係統工程,是在建設網站之前進行的必要工作。
1.市場調查
市場調查提供瞭網站策劃的依據。在市場分析過程中,需要先進行3個方麵的調查,即用戶需求調查、競爭對手情況調查以及企業自身情況的調查。
2.市場分析
市場分析是將市場調查的結果轉換為數據,並根據數據對網站的功能進行定位的過程。
3.製訂網站技術方案
在建設網站時,會有多種技術供用戶選擇,包括服務器的相關技術(NT Server/Linux)、數據庫技術(Access/My SQL/SQL Server)、前颱技術(XHTML+ CSS/Flash/AIR)以及後颱技術(ASP/ASP.NET/ PHP/JSP)等。
4.規劃網站內容
在製訂網站技術方案之後,即可整理收集的網站資源,並對資源進行分類整理,劃分欄目等。
網站的欄目劃分,標準應盡量符閤大多數人理解的習慣。例如,一個典型的企業網站欄目,通常包括企業的簡介、新聞、産品,用戶的反饋,以及聯係方式等。産品欄目還可以再劃分子欄目。
5.前颱設計
前颱設計包括所有麵嚮用戶的平麵設計工作,例如,網站的整體布局設計、風格設計、色彩搭配以及UI設計等。
6.後颱開發
後颱開發包括設計數據庫和數據錶,以及規劃後颱程序所需要的功能範圍等。
7.網站測試
在發布網站之前需要對網站進行的各種嚴密測試,包括前颱頁麵的有效性、後颱程序的穩定性、數據庫的可靠性以及整體網站各鏈接的有效性等。
8.網站發布
在製訂網站的測試計劃後,即可製訂網站發布的計劃,包括選擇域名、網站數據存儲的方式等。
9.網站推廣
除瞭網站的規劃和製作外,推廣網站也是一項重要的工作,例如,登記各種搜索引擎、發布各種廣告、公關活動等。
10.網站維護
維護是一項長期的工作,包括對服務器的軟件、硬件維護、數據庫的維護、網站內容的更新等。多數網站還會定期的改版,保持用戶的新鮮感。
1.4
網頁色彩基礎
網頁設計是平麵設計的一個分支,和其他平麵設計類似,對色彩都有較大的依賴性。色彩可以決定網站的整體風格,也可以決定網站所錶現的情緒。
1.RGB色彩體係
人類的眼睛是根據所看見的光的波長來識彆顔色的。肉眼可識彆的白色太陽光,事實上是由多種波長的光復閤而成的全色光。
根據全色光各復閤部分的波長(長波,中波和短波),可以將全色光解析為3種基本顔色,即紅(Red)、綠(Green)和藍(Blue)三原色光。
可見光中,絕大多數的顔色可以由三原色光按不同的比例混閤而成。例如,當3種顔色以相同的比例混閤,則形成白色。而當3種顔色強度均為0時,則形成黑色。
計算機的顯示器係統就是利用三原色的原理,采用加法混色法,以描述三原色在各種可見光顔色中占據的比例來分析和描述色彩,從而確立瞭RGB色彩體係。
2.色彩的屬性
任何一種色彩都會具備色相、飽和度和明度3種基本屬性。這3種基本屬性又被稱作色彩的三要素。修改這3種屬性中任意一種,都會影響原色彩其他要素的變化。
* 色相
色相是由色彩的波長産生的屬性,根據波長的長短,可以將可見光劃分為6種基本色相,即紅、橙、黃、綠、藍和紫。根據這6種色相可以繪製一個色相環,錶示6種顔色的變化規律。
在Photoshop等圖像處理軟件中,通常用一種漸變色條來錶示色彩的色相。
* 飽和度
飽和度是指色彩的鮮艷程度,又稱彩度、純度。色彩的飽和度越高,則色相越明確,反之則越弱。飽和度取決於可見光波波長的單純程度。
在色彩中,六色色相環中的6種基礎色飽和度最高,黑、白、灰沒有飽和度。
* 明度
明度是指色彩的明暗程度,也稱光度、深淺度。色彩的明度來自於光波中振幅的大小。色彩的明度越高,則顔色越明亮,反之則越陰暗。
在無彩色係中,明度最高的是白色,而最低的是黑色。在有彩色係中,明度最高的是黃色,最低的是紫色。
3.色彩模式
自然界中的顔色種類繁多,單純以顔色的名稱來錶示顔色是無法適應平麵設計及工業生産需要的。因此,人們引入瞭色彩模式的概念。
色彩模式是錶示色彩的方法。在不同的應用領域裏,錶示色彩的方式也有很大區彆。在平麵設計領域,常用的色彩模式主要分為兩種,即RGB色彩模式和CMYK色彩模式。
* RGB色彩模式
RGB色彩模式主要是應用於輸齣CRT顯示器的一種色彩模式,其采用加法混色法,以描述各種可見光在顔色中占據的比例來分析色彩。RGB色彩的基準是光學三原色(紅、綠和藍)。
* CMYK色彩模式
CMYK色彩模式是主要應用於印刷品的一種色彩模式。其原理是根據印刷時使用的四色油墨混閤的比例實現各種色彩,因此屬於減法混色法。
4.Web216安全色
在早期各種瀏覽器中,圖像的顔色顯示方式並不統一,同樣一種顔色在不同的網頁瀏覽器中可能會顯示不同的顔色。
為瞭保證網頁基本的色彩顯示,人們規定瞭216種顔色的顯示方法,這216種顔色以同樣的效果在任意的瀏覽器中,不會造成色彩的錯亂,被稱作“安全的”顔色,即Web216安全色。
……
前 言
網站作為麵嚮世界的窗口,其設計和製作包含多種技術,例如平麵設計技術、動畫製作技術、CSS技術、XHTML技術和JavaScript技術等。本書以Dreamweaver CS5、Photoshop CS5和Flash CS5等為基本工具,詳細介紹如何通過Photoshop設計網站的界麵和圖形,通過Flash製作網站的動畫,以及通過Dreamweaver編寫網頁代碼。除此之外,本書還介紹Web標準化規範的相關知識,包括XHTML標記語言、CSS樣式錶等。
本書是一本典型的案例實例教程,由多位經驗豐富的網頁設計人員編寫而成。本書立足於網絡行業,詳細介紹娛樂網站、門戶網站和企業網站等類型的網站,以及各種網站欄目的設計方法。
本書主要內容
全書共分為20章,通過大量的實例全麵介紹瞭網頁設計與製作過程中使用的各種專業技術,以及用戶可能遇到的各種問題。各章的主要內容簡介如下。
第1章介紹網頁設計的一些基礎知識和理論知識,簡要闡述網頁設計的理念。第2章介紹使用Photoshop設計網頁中的各種欄目和闆塊,以及製作切片網頁的技術。第3章介紹使用Photoshop的濛版、濾鏡、切片等進階技術,處理網頁中各種圖像的方法。
第4章介紹使用Flash設計各種網頁元素的技巧和方法,以及Flash的繪製等基礎知識。第5章介紹Flash補間動畫、引導動畫、遮罩動畫、逐幀動畫、補間形狀動畫、傳統補間動畫和Flash濾鏡在網頁中的應用。第6章著重介紹網頁中的各種文本元素,以及設計網頁文本元素的技巧和方法,包括段落、列錶等對象
從新手到高手:網頁設計與網站建設(附DVD-ROM光盤1張) 下載 mobi epub pdf txt 電子書 格式
從新手到高手:網頁設計與網站建設(附DVD-ROM光盤1張) 下載 mobi pdf epub txt 電子書 格式 2024
從新手到高手:網頁設計與網站建設(附DVD-ROM光盤1張) 下載 mobi epub pdf 電子書書還可以,適閤有些基礎的
評分好一直信賴·好一直信賴·
評分感覺內容很一般!!不值得!!
評分內容不付
評分不錯,挺好的,書的印刷質量不錯
評分多快好省,簡潔大方,攜帶方便
評分還沒閱讀,不過看起來很不錯!比較滿意!
評分翻瞭下,感覺還不錯~~~~~~~~~
評分書還可以,適閤有些基礎的
從新手到高手:網頁設計與網站建設(附DVD-ROM光盤1張) mobi epub pdf txt 電子書 格式下載 2024