本書根據(jù)教育部頒發(fā)的《中等職業(yè)學校專業(yè)教學標準(試行)信息技術類(第一輯)》中的相關教學內容和要求編寫。本書共5章,系統(tǒng)介紹了網站Logo、導航欄、Banner、內容欄、版尾,網頁版式設計原則、版式結構、版式設計方法,網頁創(chuàng)意與規(guī)劃設計,網頁配色,網頁設計與制作的全過程等內容。
為建立健全教育質量保障體系,提高職業(yè)教育質量,教育部于2014年頒布了中等職業(yè)學校專業(yè)教學標準(以下簡稱專業(yè)教學標準)。專業(yè)教學標準是指導和管理中等職業(yè)學校教學工作的主要依據(jù),是保證教育教學質量和人才培養(yǎng)規(guī)格的綱領性教學文件。在“教育部辦公廳關于公布首批《中等職業(yè)學校專業(yè)教學標準(試行)》目錄的通知”(教職成廳〔2014〕11號文)中,強調“專業(yè)教學標準是開展專業(yè)教學的基本文件,是明確培養(yǎng)目標和規(guī)格、組織實施教學、規(guī)范教學管理、加強專業(yè)建設、開發(fā)教材和學習資源的基本依據(jù),是評估教育教學質量的主要標尺,同時也是社會用人單位選用中等職業(yè)學校畢業(yè)生的重要參考。”
本書特色
本書根據(jù)教育部頒發(fā)的《中等職業(yè)學校專業(yè)教學標準(試行)信息技術類(第一輯)》中的相關教學內容和要求編寫。
網頁設計是現(xiàn)代藝術設計中具有廣泛性和前沿性的新媒體藝術形式之一,它伴隨著媒體技術與藝術的發(fā)展而發(fā)展。一個優(yōu)秀的網站,在結構設計、導航設計、色彩設計、內容設計等方面都非常嚴謹。一個網站看上去可能很簡單,但可以給人一種吸引力,讓瀏覽者在觀賞的同時,不知不覺地記住了企業(yè)的相關信息,感受到了企業(yè)的文化。從一定意義上來講,網站代表了一個企業(yè)的精神面貌,是企業(yè)在網絡媒體上的形象。如果網站不能反映企業(yè)的形象,反而因粗糙的文字、粗劣的圖片及千篇一律的布局而影響企業(yè)在讀者心目中的形象,則會對企業(yè)形象的傳播起到反作用。
本書是一本專門針對網頁設計的教材,第1章講述了網站Logo、導航欄、Banner、內容欄、版尾5個方面的內容及所涉及的軟件知識,并以案例的形式闡述了按鈕的制作方法;第2章講述了網頁版式的設計方法,將網頁版式設計原則、版式結構、版式設計方法一一呈現(xiàn)給讀者,以靜態(tài)網頁界面設計案例作為補充,其中Webpage Design網頁是一個三三式的網頁模板,緊緊圍繞第1章的5個方面展開,版式簡潔,層次分明;第3章講述了網頁創(chuàng)意與規(guī)劃設計,從發(fā)展的角度闡述了網站的項目規(guī)劃、內容組織及網站建設的必要性,并以“小福屋”案例為主線,從策劃、文案、草圖、設計等方面一一展開,以靜態(tài)的形式展現(xiàn)網頁的設計理念,因為有了VI部分作為基礎,所以“小福屋”的定位非常明確—一個商業(yè)網站。“小福屋”的網頁設計也是對VI部分的補充;第4章講述了網頁配色的知識,從藝術的角度闡述了色彩及色彩搭配的原則;第5章則以案例的形式講述網頁設計與制作的全過程,包括前期策劃書、網站建站目標及功能定位、網站整體風格、網站的結構和內容,涉及Photoshop、Flash、Dreamweaver等軟件的綜合應用。其中,“小5班”案例設計了兩個版本,兩種不同的版式體現(xiàn)出不同的網頁風格。“小5班”網站是為藝術設計專業(yè)的班集體設計的。這個班集體具有典型的職業(yè)院校學生群體的個性特征,他們重視自我、勇于展現(xiàn)自己,迫切地希望個人和社會并重,追求個人能力和社會大環(huán)境的共同進步,存在自我實現(xiàn)的強烈愿望!靶5班”網站的存在目的是伴隨著這個集體一起成長、成熟,一起走上社會,面對工作,面對各種專業(yè)問題。相對來說,“銀時代”是一個商業(yè)網站,是實際存在的一個品牌,其品牌歷史、品牌文化等資料都很完善,所以“銀時代”的網頁設計是根據(jù)“銀時代”品牌定位策劃完成的。頁面版式、頁面色彩、圖片處理效果、Flash動畫等都根據(jù)“銀時代”的品牌重新定位并設定。在“銀時代”案例部分,設計上主要側重整體風格的體現(xiàn),技術上使用Photoshop制作頁面效果及處理圖片效果。
總之,全書不僅介紹了網站設計所必須掌握的色彩理論、圖像設計、動畫設計、字體設計及總體版式設計等,而且以案例的形式完整地介紹了在實際制作過程中所應做到的方方面面。
特別聲明:書中引用的圖片及有關作品僅供教學分析使用,版權歸原作者所有,由于獲得渠道的問題,因此未能與作者一一聯(lián)系,在此表示衷心感謝!
作者是青島科技大學計算機專業(yè)的骨干教師,有豐富的教學及教研經驗。為了提高學習效率和教學效果,方便教師教學,作者為本書配備了教學指南、案例素材及結果文件、習題答案、授課PPT講義等豐富的教學輔助資源。
第1章 網頁設計概述 001
1.1 網頁界面的構成 002
1.2 網頁藝術設計的相關軟件 007
1.3 按鈕小制作 009
1.3.1 制作特殊形狀按鈕 009
1.3.2 制作圓角矩形按鈕 010
1.3.3 制作簡單的矩形按鈕 012
1.3.4 制作圓形按鈕 015
1.3.5 制作透明效果按鈕 018
實踐與提高1 021
第2章 網頁版式設計 023
2.1 網頁版式設計應遵循的原則 024
2.2 網頁版式設計的基本內容 026
2.2.1 網頁的標題設計 026
2.2.2 文字的編排 027
2.2.3 圖文的結合 029
2.2.4 頁面的節(jié)奏韻律 030
2.3 網頁版式的構成分類 031
2.4 網頁界面設計案例制作 035
實踐與提高2 045
第3章 網頁創(chuàng)意與規(guī)劃設計 047
3.1 為網站制定目標 048
3.1.1 對市場的預測和分析 048
3.1.2 網站的項目規(guī)劃與組織 048
3.1.3 網站建設 054
3.1.4 改版案例制作 056
3.2 網頁設計的創(chuàng)意方法 065
3.2.1 創(chuàng)意是網頁的靈魂 066
3.2.2 網頁創(chuàng)意方法 068
3.3 小福屋網頁案例制作 075
3.3.1 建立小福屋網頁的模板 076
3.3.2 小福屋―首頁 080
3.3.3 小福屋―“關于HH”頁 086
3.3.4 小福屋―“加盟HH”頁 086
3.3.5 小福屋―“產品信息”頁 088
3.3.6 小福屋―“全國門店”頁 089
3.3.7 小福屋―“聯(lián)系我們”頁 090
實踐與提高3 090
第4章 網頁配色 091
4.1 認識色彩 092
4.1.1 何為色彩 092
4.1.2 色彩三要素 092
4.1.3 色彩對比 093
4.1.4 色調的變化 094
4.2 網頁配色常見問題 096
4.3 網頁配色原則 101
4.4 網頁配色的幾種固定搭配 102
4.5 網站類型與色彩的關系 104
4.6 商業(yè)網站 109
實踐與提高4 113
第5章 綜合案例制作 114
5.1 “小5班”網頁設計 115
5.1.1 軟件布局 117
5.1.2 制作首頁 119
5.1.3 制作“團隊成員”頁面 132
5.1.4 “作品展示”頁面設計 137
5.1.5 “小5班” Flash動畫制作 141
5.2 “銀時代”網頁設計 162
5.2.1 銀時代首頁界面設計 162
5.2.2 銀時代―“品牌故事”頁 177
5.2.3 銀時代―“產品展示”頁 180
5.2.4 頁面分割―切片 184
5.2.5 制作頁面 187
5.2.6 優(yōu)化和鏈接 196
實踐與提高5 200