內 容 簡 介本書是一本專門針對網頁設計的書籍,涵蓋色彩理論、圖像設計、動畫設計、字體設計及總體版式設計等內容。其中,第1章講述網站Logo、導航欄、Banner、內容欄、版尾五個方面的內容及相關軟件知識,并以案例的形式闡述不同按鈕的制作方式;第2章講述網頁版式設計方法,將網頁版式設計原則、版式結構、版式設計方法逐一呈現給讀者,并以靜態(tài)網頁界面設計案例作為補充;第3章講述網頁創(chuàng)意與規(guī)劃設計,從發(fā)展的角度闡述網站的項目規(guī)劃、內容組織及網站建設的必要性,并以實際案例為主線,從策劃、文案、草圖、設計等方面逐一展開,以靜態(tài)的形式展現網頁的設計理念;第4章講述網頁配色的知識,從藝術的角度闡述色彩、色彩搭配的原則及界面設計配色技巧,并將色彩知識融入實際案例的設計制作中;第5章以案例的形式講述網頁的制作過程,包括前期策劃書、網站建站目標及功能定位、網站整體風格、網站的結構和內容,并綜合運用Photoshop、Flash、Dreamweaver等軟件作為開發(fā)基礎。本書適合從事網頁設計的人員及相關專業(yè)學生使用。
網頁設計是現代藝術設計中具廣泛性和前沿性的新媒體藝術形式之一,它伴隨媒體技術與藝術的發(fā)展而發(fā)展。作為一個優(yōu)秀的網站,在結構設計、導航設計、色彩設計、內容設計等各個方面都應該是非常嚴謹的。一個優(yōu)秀的企業(yè)網站看上去可能很簡單,但卻給人一種吸引力,使瀏覽者在觀賞網站的同時,不知不覺地記住企業(yè)的相關信息,感受到企業(yè)的文化。從一定意義上來講,企業(yè)網站代表一個企業(yè)的精神面貌,是企業(yè)在網絡媒體上的形象。如果一個企業(yè)的網站不能反映企業(yè)的形象,且因粗糙的文字、粗劣的圖片及千篇一律的布局而影響企業(yè)在瀏覽者心目中的形象,反而會對企業(yè)形象的傳播起到副作用。
本書是一本專門針對網頁設計的書籍,從網頁的藝術設計到功能設計全面體現作者的良苦用心。其中,第1章講述網站Logo、導航欄、Banner、內容欄、版尾五個方面的內容及相關軟件知識,并以案例的形式闡述不同按鈕的設計制作方式。第2章講述網頁版式設計方法,將網頁版式設計原則、版式結構、版式設計方法逐一呈現給讀者,并以靜態(tài)網頁界面設計案例作為補充,緊緊圍繞第1章的五個方面展開,內容簡潔,層次分明。第3章講述網頁創(chuàng)意與規(guī)劃設計,從發(fā)展的角度闡述網站的項目規(guī)劃、內容組織及網站建設的必要性,并以小福屋案例為主線,從策劃、文案、草圖、設計等方面逐一展開,以靜態(tài)的形式展現網頁的設計理念。因為有了VI部分作為基礎,所以小福屋的定位非常明確一個商業(yè)網站。小福屋的網頁設計也是對VI的補充。第4章講述網頁配色的知識,從藝術的角度闡述色彩、色彩搭配的原則及界面設計配色技巧,并將色彩知識融入兒童線上教育網站案例的設計制作中。第5章以案例的形式講述網頁的制作過程,包括前期策劃書、網站建站目標及功能定位、網站整體風格、網站的結構和內容,并綜合運用Photoshop、Flash、Dreamweaver等軟件作為開發(fā)基礎。其中,銀時代是一個商業(yè)網站,是一個實際存在的品牌,其品牌歷史、品牌文化等資料都是完善的,所以銀時代的網頁設計是根據銀時代品牌定位策劃完成的,頁面版式、頁面色彩、圖片處理效果、Flash動畫等都根據銀時代的品牌重新定位并設定。在銀時代案例部分,設計方面主要側重整體風格的體現,技術方面使用Photoshop制作頁面效果及處理圖片效果,利用Flash制作Banner動畫。本書為小5班案例設計了兩個版本,兩種不同的版式制造出不同的網頁風格。小5班網站是為藝術設計專業(yè)的班集體設計的,這個班集體具有典型大學生群體的個性特征。他們重視自我、勇于展現自己,迫切地希望個人與社會并重,追求個人能力和社會大環(huán)境的共同進步,存在自我實現的強烈愿望。小5班網站存在的目的是伴隨這個集體一起成長、成熟,一起走上社會,面對工作,面對各種專業(yè)問題。相對來說,小5班更側重展示個性。
總之,全書不僅介紹設計網站時必須掌握的色彩理論、圖像設計、動畫設計、字體設計、創(chuàng)意設計及頁面版式設計等內容,而且以案例的形式完整介紹在實際制作網站過程中應做到的方方面面。
特別聲明:本書引用的圖片及相關作品僅供教學分析使用,版權歸原作者所有;由于獲得渠道的問題,因此未能與作者逐一聯系;在此對本書引用圖片及相關作品的作者表示衷心感謝!
本書由青島科技大學崔建成著。感謝盧杰、周圍等人員的大力支持。由于時間緊迫,書中不妥之處在所難免,懇請各位讀者批評指正。
編 者
崔建成,男,1965年生于文登市,畢業(yè)于山東師范大學。1987年進入山東省青島工藝美術 學校CAD中心從事計算機輔助設計工作,現為青島科技大學文學與藝術學院副教授,實訓中心 副主任。
第1章 網頁設計概述1
1.1 網頁的界面構成1
1.1.1 網站Logo1
1.1.2 導航欄2
1.1.3 Banner4
1.1.4 內容欄5
1.1.5 版尾5
1.2 網頁藝術設計的相關軟件9
1.3 按鈕案例設計與制作12
1.3.1 開始按鈕制作12
1.3.2 透明效果按鈕設計15
1.3.3 圓形提示按鈕制作18
1.3.4 圓形播放按鈕制作22
實踐與提高25
第2章 網頁版式設計27
2.1 網頁版式設計應遵循的原則28
2.2 網頁版式設計的基本內容31
2.2.1 網頁的標題設計31
2.2.2 文字的編排32
2.2.3 圖文的結合34
2.2.4 頁面的節(jié)奏韻律35
2.3 網頁版式構成分類35
2.4 網頁界面設計案例制作39
2.4.1 布局部分制作39
2.4.2 Logo部分制作41
2.4.3 導航欄制作41
2.4.4 頁中部分制作45
2.4.5 頁腳部分制作49
實踐與提高50
第3章 網頁創(chuàng)意與規(guī)劃設計51
3.1 為網站制定目標51
3.1.1 對市場的預測和分析51
3.1.2 網站的項目規(guī)劃與組織51
3.1.3 網站建設56
3.1.4 改版案例制作58
3.2 網頁設計的創(chuàng)意方法71
3.2.1 創(chuàng)意是網頁的靈魂71
3.2.2 網頁創(chuàng)意方法72
3.3 小福屋網頁案例制作78
3.3.1 建立小福屋網頁的模板79
3.3.2 小福屋首頁84
3.3.3 小福屋關于HH頁面90
3.3.4 小福屋加盟HH頁面91
3.3.5 小福屋產品信息頁面93
3.3.6 小福屋全國門店頁面94
3.3.7 小福屋聯系我們頁面95
實踐與提高95
第4章 網頁配色96
4.1 認識色彩96
4.1.1 何為色彩96
4.1.2 色彩三要素97
4.1.3 色彩對比97
4.1.4 色調的變化99
4.2 網頁配色常見問題102
4.3 網頁配色原則105
4.3.1 三色搭配原則106
4.3.2 色彩搭配應注意的問題108
4.4 頁面設計配色技巧109
4.5 兒童線上教育網站案例制作113
4.5.1 主頁設計113
4.5.2 登錄/注冊界面制作120
4.5.3 視頻學習頁面126
實踐與提高131
第5章 綜合案例制作132
5.1 銀時代網頁設計132
5.1.1 銀時代首頁界面設計133
5.1.2 銀時代品牌故事頁面149
5.1.3 銀時代產品展示頁面154
5.1.4 頁面分割切片159
5.1.5 頁面制作164
5.1.6 優(yōu)化和鏈接174
5.1.7 銀時代Flash動畫制作178
5.2 小5班網頁設計188
5.2.1 軟件布局190
5.2.2 制作首頁191
5.2.3 團隊成員頁面制作206
5.2.4 作品展示頁面設計211
5.2.5 小5班Flash動畫制作217
5.2.6 新小5班創(chuàng)作244