《網頁視覺設計案例教程》源于視覺傳達專業與計算機專業教學一線教師們多年的隨堂講義和授課心得,全面系統地介紹了網頁視覺設計概述,網頁視覺設計要素及網頁應用要素的構成,CI網頁中企業形象識別,網頁美工設計制作,HTML網頁設計基礎,CSS層疊樣式表設計基礎,以及網頁美工設計全案解析,其中應用了大量的國內外知名企業網站典型案例。
全書由淺入深,層層深入地講解了視覺元素基礎知識到高級階段網站具體布局知識。《網頁視覺設計案例教程》面向高職高專院校視覺傳達專業和計算機等相關專業學生,以及網頁設計方面初、中級用戶。華信教育資源網上提供配套的電子課件、學習資料及源代碼等資源。
國家人力資源和社會保障部,國家工業和信息化部信息專業技術人才知識更新工程指定教材,全國軟件專業人才設計與開發大賽指定參考教材。 教育部高職高專計算機類專業教學指導委員會高職高專計算機類專業2010年度立項課題“校企合作下的計算機類專業人才培養方案研究”課題成果教材。 網絡課程、教學課件、電子教案、習題答案、練習素材等立體化教學資源支持,選用此教材的任課老師可獲贈考試系統一套(含題庫)。
隨著Internet的迅猛發展,網絡正在逐步替代傳統媒體,成為人們工作和生活中相互溝通的平臺,同時在世界范圍內對商業、廣告業、信息業和通信業產生了深遠的影響。通過利用網絡資源,企業可以宣傳產品,政府可以發布政策法規,學校可以為學生提供教學信息,各網絡公司大力開發門戶網站等。為了使網站能夠吸引越來越多的用戶,需要運用好網頁視覺設計的知識,這就要求網頁學習者和從業者補充更多藝術設計方面的知識,加強這方面的訓練。網頁視覺傳達與布局設計成為網頁視覺設計方面必備的理論學習課程。
網頁視覺傳達與布局設計是通過諸多領域的知識啟迪靈感,同時針對網站整體設計發展而產生的一門新藝術設計門類,是以信息網絡為媒介和載體的綜合性藝術,是與以往任何一種藝術形式都不同的互動媒體藝術。它具有與傳統媒體相同的美學規律,同時在網頁技術的支持下,互動性更強,更加人性化。
本書所要闡述的觀點是優秀的網站設計高手應該同時具有理性與感性思維模式。從前期的網站整體創意策劃到網站的構成要素;從對各個網頁中的色彩、圖形、文字、版式的風格控制,到后臺的網頁代碼的實現,都是整個網站設計的基石。
本教材內容分為7章,從相關基礎知識介紹開始,逐步遞進,最后以案例解析結束。
第l章網頁視覺設計概述,包括了課程性質與任務、課程內容和要求、教學建議、教學時間分配及網頁視覺設計一些特點與原則。
第2章網頁視覺設計要素,是本書的重點之一,主要介紹網頁視覺設計基本要素及網頁應用要素的構成。
第3章CI網頁中企業形象識別,是本書的重點之二,介紹網頁中企業形象識別的應用。根據市場狀況、企業自身情況的綜合分析,做出符合企業自身需求的網頁設計計劃。
第4章網頁美工設計制作,主要針對如何把理論貫穿于網頁視覺的制作過程中,達到一定的視覺美觀。網頁視覺設計的制作是理性和感性的結合,是現代媒體的發展趨勢。視覺信息的處理不再是單純地停留在靜態和動態兩個方面,而是升級為交互的方式,這就要求網頁設計師具有藝術設計專業的審美的同時也要具有計算機學科的嚴謹。
第5章HTML網頁設計基礎和第6章CSS層疊樣式表設計基礎,主要是介紹如何把具體的視覺元素通過網頁語言表現出來。
第7章美工設計全案解析,主要介紹美工前期的設計流程與后期網頁語言的整體的結合。
本書由天津交通運輸部管理干部學院王華、錢哨編著,黃少波參與了部分章節的編寫。本書在編寫過程中得到了電子工業出版社與社會各界朋友的大力支持和幫助,筆者在此由衷地感謝!
第1章 網頁視覺設計概述
1.1 網頁視覺設計教學
1.2 網頁視覺設計概述
1.2.1 互聯網的起源
1.2.2 網頁視覺設計定義
1.2.3 網頁視覺設計要點
1.2.4 網頁視覺設計特點
1.2.5 網頁視覺設計的原則
第2章 網頁視覺設計要素
2.1 網頁視覺設計基礎要素
2.1.1 網頁視覺創意方法
2.1.2 視覺基礎元素
2.2 文字篇
2.2.1 文字的演變和發展
2.2.2 網頁視覺設計中的基本字體
2.2.3 網頁中文字設計原則
2.2.4 文字的版式編排
2.2.5 網頁文字的色彩處理
2.2.6 網頁文字情感因素
2.3 圖形(圖像)篇
2.3.1 圖形(圖像)概述
2.3.2 網頁設計中的圖形(圖像)存在形式
2.3.3 網頁中圖形(圖像)文件格式
2.3.4 網頁圖形創意設計
2.4 色彩篇
2.4.1 色彩的基本原理
2.4.2 Web中色彩管理
2.4.3 網頁視覺設計中色彩的作用
2.4.4 色彩情感
2.5 版式設計篇
2.5.1 版式設計原理
2.5.2 版式設計法則
2.5.3 常用的版式
第3章 CI網頁中企業形象識別
3.1 CI概述
3.1.1 CI的形成與歷史沿革
3.1.2 CI的概念
3.1.3 CI的價值
3.2 CI系統構成與相互關系
3.2.1 CI系統構成要素
3.2.2 MI、BI、VI之間的相互關系
3.2.3 CI設計原則
3.2.4 CI功能
3.3 網絡CI策劃與設計
3.3.1 明確形象建設的目的與動因
3.3.2 設計調查
3.3.3 形象識別定位
3.3.4 標志設計
3.3.5 網頁形象視覺設計
第4章 網頁美工設計制作
4.1 網頁美工設計工具
4.1.1 選擇適合的設計軟件
4.1.2 網頁美工設計工具——Photoshop
4.1.3 Web圖像的生成
4.2 網頁視覺設計中元素制作
4.2.1 網頁圖標設計
4.2.2 網頁logo圖標
4.2.3 網頁banner制作
4.2.4 網頁導航菜單的制作
4.3 首頁設計制作
4.3.1 首頁設計的原則
4.3.2 首頁設計案例制作
第5章 HTML網頁設計基礎
5.1 HTML基礎知識
5.1.1 Dreamweaver軟件與網頁設計準備
5.1.2 HTML的頁面(PAGE)標記(TAGS)
5.1.3 字體(FONT)標記(T'AGS)
5.1.4 文字布局(TEXTSTYLE)標記(TAGS)
5.1.5 文字列表
5.1.6 圖像(IMAGE)標記(TAGS)
5.2 HTML的表格設計與布局
5.2.1 表格(TABLE)標記(TAGS)
5.2.2 表格設計進階
5.3 HTML的表單設計
5.3.1 表單基礎
5.3.2 表單進階
5.4 HTML的框架結構
5.4.1 框架結構基礎
5.4.2 框架結構進階
5.5 HTML的文字移動和背景音樂
5.5.1 文字移動(Marque)
5.5.2 背景音樂
第6章 CSS層疊樣式表設計基礎
6.1 Web標準歷史與發展
6.1.1 W3C技術架構
6.1.2 了解CSS的應用本質和優點
6.1.3 網頁的表現與分離
6.2 CSS基礎知識
6.2.1 XHTML基礎
6.2.2 XHTML頭部的meta標簽
6.2.3 第一個CSS樣式設計
6.2.4 CSS的語法結構
6.2.5 (SSS的類型
6.2.6 CSS的標簽
6.2.7 XHTML的書寫規范
6.2.8 如何將樣式表加入到網頁
6.2.9 CSS基本的書寫順序及規范
6.2.10 CSS的優先級
6.2.11 CSS的計量單位
6.3 CSS網頁布局(Inside CSS Layout)
6.4 網頁布局基礎
6.4.1 布局頁面的基本步驟
6.4.2 網頁布局基礎綜合實訓
6.5 CSS容器屬性
6.5.1 盒模型的概念
6.5.2 邊界屬性的概念
6.5.3 綜合實訓——網站首頁CSS實戰設計
第7章 美工設計全案解析
7.1 企業應用型網站規劃與設計
7.1.1 建設網站前的市場分析
7.1.2 建設網站的目的及功能定位
7.1.3 網站技術解決方案
7.1.4 網站內容規劃
7.1.5 網頁設計
7.1.6 網站維護
7.1.7 網站測試
7.1.8 網站發布與推廣
7.2 網頁的切割技巧分析
7.3 門戶類型網站全案分析
7.3.1 門戶類網站
7.3.2 AOL網站的美丁制作過程
7.3.3 AOL網站的切割實訓案例
7.3.4 AOL網站的CSS設計實例
7.4 企業類型網站全案分析
7.4.1 惠好公司網站
7.4.2 惠好公司(Weyerhaeuser)網站美工制作過程
7.5 功能類型網站全案分析
7.6 休閑類型網站全案分析
附錄A 習題參考答案
參考文獻
3.媒體綜合
媒體綜合是指在網頁視覺設計中綜合應用多種媒體視聽元素,主要有文字、圖像、聲音、視頻等。網頁視覺設計是一門新光的綜合媒體視覺藝術,它的綜合性體現在媒體的多樣化上。
隨著網絡帶寬的增加、芯片處理速度的提高以及跨平臺的多媒體文件格式的推廣,必將促使視覺設計者綜合運用多種媒體元素來設計網頁,以滿足和豐富瀏覽者對網絡信息傳輸質量的要求。目前國內網頁已經出現了模擬三維的操作界面,在數據壓縮技術的改進和流(Stream)技術的推動下,Internet網上出現實時的音頻和視頻服務,如在線音樂、在線廣播、網上電影、網上直播等。因此,多種媒體的綜合運用是網頁藝術設計的特點之一,是未來的發展方向。
4.終端可變
終端可變指的是網頁顯示效果會隨著顯示終端的變化而出現變化,這些變化網頁視覺設計者是不可控的。與傳統印刷、影視藝術的不同之處,就在于網頁視覺設計顯示的終端是不確定的。網頁視覺設計顯示終端包括軟件(瀏覽器)和硬件(顯示器)兩個部分,不同的用戶會使用不同的顯示終端。例如,同一個網頁,在Windows操作系統下的Internet Explorer瀏覽器與Mac操作系統下的Safari瀏覽器中的顯示效果可能是不一樣的。頁面的功能也可能出現兼容問題,就算是同一個瀏覽器軟件,由于不同的版本也同樣會出現顯示效果不一樣的情況。