本書共分為16章,主要包括網頁設計與制作基礎、Photoshop網頁圖像設計、Dreamweaver網頁制作以及綜合案例實戰(zhàn)4個部分。通過對本書的學習,不僅能讓讀者學會PhotoshopCS6和DreamweaverCS6的基本操作方法,而且還能通過本書中列舉的實戰(zhàn)案例幫助讀者掌握網頁設計與制作中更多的小技巧,使讀者更加得心應手地設計與制作網頁。
本書主要定位于希望快速進入網頁設計與制作領域的初、中級用戶,特別適合初學網頁設計與制作的人員、大中專學生及網頁設計制作愛好者。此外,本書也可作為網頁設計與制作培訓班的教材和自學者的自學讀物。
本書是“學以致用系列叢書”的全新升級版,其具有如下明顯的特色。
·講解上——實用為先,語言精練
·外觀上——單雙混排,全程圖解
·結構上——布局科學,學習+提升同步進行
·信息上——欄目豐富,延展學習
前言
關于本叢書
如今,學會使用電腦已不再是一種休閑娛樂的生活方式,在工作節(jié)奏如此之快的今天,電腦已成為各類人士工作中不可或缺的一種工具。
為了回饋廣大讀者,讓更多的人學會使用電腦這個必備工具和一些常用軟件的操作,時隔一年,我們對“學以致用系列叢書”進行了全新升級改版,不僅優(yōu)化了版式效果,更對內容進行了全面更新,讓全書更具深度,讓讀者能學到更多實用的技巧。
本叢書分別涉及了電腦基礎與入門、網上開店、Office辦公軟件、圖形圖像和網頁設計等方面,每本書的內容和講解方式都根據其特有的應用要求進行了量身打造,目的是讓讀者真正學得會,用得好。其具體包括的書目如下。
Excel高效辦公入門與實戰(zhàn)
Excel函數(shù)與圖表入門與實戰(zhàn)
Excel數(shù)據透視表入門與實戰(zhàn)
Access 數(shù)據庫基礎及應用(第2版)
PPT設計與制作(第2版)
新手學開網店(第2版)
網店裝修與推廣(第2版)
Office 2013入門與實戰(zhàn)(第2版)
新手學電腦(第2版)
中老年人學電腦(第2版)
電腦組裝、維護與故障排除(第2版)
電腦安全與黑客攻防(第2版)
網頁設計與制作入門與實戰(zhàn)
AutoCAD 2016中文版入門與實戰(zhàn)
Photoshop CS6平面設計入門與實戰(zhàn)
叢書兩大特色
本叢書主要體現(xiàn)了我們的“理論知識和操作學得會,實戰(zhàn)工作中能夠用得好”這兩個創(chuàng)作宗旨。
理論知識和操作學得會
講解上——實用為先,語言精練
本叢書在內容挑選方面注重3個“最”——內容最實用,操作最常見,案例最典型,并且精練講解理論部分的文字,用最通俗的語言將知識講解清楚,提高讀者的閱讀和學習效率。
外觀上——單雙混排,全程圖解
本叢書采用靈活的單雙混排方式,主打圖解式操作,并且每個操作步驟在內容和配圖上均采用編號進行逐一對應,讓整個操作更清晰,讓讀者能夠輕松和快速掌握。
結構上——布局科學,學習+提升同步進行
在每章知識的結構安排上,采取“主體知識+給你支招”的結構,其中“主體知識”是針對當前章節(jié)中涉及的所有理論知識進行講解;“給你支招”是對本章相關知識的延伸與提升,其實用性和技巧性更強。
信息上——欄目豐富,延展學習
本叢書在知識講解過程中,還穿插了各種欄目板塊,如“給你支招”“小絕招”和“長知識”等。通過這些欄目,有效增加了本書的知識量,擴展了讀者的學習寬度,從而幫助讀者掌握更多實用的技巧操作。
實戰(zhàn)工作中能夠用得好
在講解過程中采用“知識點+實例操作”的結構來講解的,為了讓讀者清楚這些知識在實戰(zhàn)工作中的具體應用,所有的案例均來源于實戰(zhàn)工作中的典型案例,比較有針對性。通過這種講解方式,讓讀者能在真實的環(huán)境中體會知識的應用,從而達到舉一反三,在工作中用得好的目的。
本書內容
本書共分為16章。主要包括網頁設計與制作基礎、Photoshop網頁圖像設計、Dreamweaver網頁制作以及綜合案例實戰(zhàn)4個部分,各部分的具體內容如下。
章節(jié)介紹 內容體系 作 用?
Chapter 01 這部分內容是學習網頁設計 通過對本部分的學習,
與制作的第一步,其內容 主要是為后面網頁設計與
包括:了解網頁的基本概念、 制作的各種操作打下基礎
HTML的基本概念及網頁的
色彩搭配,了解域名與網站
設計流程與網頁制作的
常用工具等
Chapter 02~06 這部分為Photoshop CS6 通過對本部分的學習,
設計網頁的內容專題, 讀者可熟練掌握Photoshop CS6
具體內容包括:Photoshop 的使用方法以及設計中
CS6網頁界面的設計基礎、 各種網頁用到的元素
圖像的基本處理、圖層和
文本的使用、網頁切片輸出
與動畫制作以及常用網頁
元素的設計等
Chapter 07~14 這部分為 Dreamweaver CS6 通過對本部分的學習,
制作網頁的內容專題, 讀者可以熟練掌握
具體內容包括:初識 Dreamweaver CS6
Dreamweaver CS6、 的操作方法,
在網頁中插入基礎的 從而制作出網頁
網頁元素、用圖像、
多媒體與超鏈接豐富網頁、
使用表格布局頁面、
使用CSS樣式表美化頁面、
用D iv+CSS布局網頁、
表單元素、模板和庫的
運用以及運用J avaScript
行為創(chuàng)建特效網頁
Chapter 15~16 這部分為綜合案例實戰(zhàn), 讀者可輕松掌握網頁設計
其具體內容包括: 制作的技巧和操作流程
在線出境游網站設計和
制作現(xiàn)代家居裝飾網站
本書特點
特 點 特點說明
系統(tǒng)全面 本書體系完善,由淺入深地對網頁
設計與制作的知識進行了全面講解,
其內容從網頁設計與制作和Photoshop
CS6網頁的界面設計等基礎到圖像的
處理、圖層和文本的使用、
網頁切片輸出與動畫制作、
初識Dreamweaver CS6、
在網頁中插入基礎網頁元素、
用圖像、多媒體與超鏈接豐富
網頁以及使用表格布局頁面等
升級操作,邏輯遞進,結構完整
案例實用 本書為了讓讀者更容易學會理論知識,
不僅給理論知識配備了大量的案例操作,
而且在案例選擇上也很注重實用性,
這些案例不單單是為了驗證知識操作,
更是我們實際工作和生活中常遇到的問題。
因此,通過這些案例可以讓我們在學會
知識的同時,解決工作和生活中的問題,
達到雙贏的目的
拓展知識豐富 在本書講解的過程中安排了上百個
“小絕招”和“長知識”板塊,
用于對相關知識進行提升和拓展。
另外,在每章的最后還專門增加了
“給你支招”板塊,讓讀者學會更多的
進階技巧,從而提高工作效率
語言輕松 本書語言通俗易懂、貼近生活,
讓讀者能充分享受閱讀的過程。
語言的邏輯感較強,前后呼應,
隨時激發(fā)讀者的記憶
讀者對象
本書主要定位于希望快速進入網頁設計與制作領域的初、中級用戶,特別適合初學網頁設計與制作的人員、大中專學生及網頁設計制作愛好者。此外,本書也可作為網頁設計與制作培訓班的教材或自學用書。
關于創(chuàng)作團隊
本書由智云科技編著,參與本書編寫的人員有邱超群、楊群、羅浩、林菊芳、馬英、邱銀春、羅丹丹、劉暢、林曉軍、周磊、蔣明熙、甘林圣、丁穎、蔣杰、何超等,在此對大家的辛勤工作表示衷心的感謝!
由于編者經驗有限,加之時間倉促,書中難免會有疏漏和不足,懇請專家和讀者不吝賜教。
智云科技,是國內一家專門從事計算機和辦公相關技術和資訊研究的團隊,該團隊由數(shù)位具有多年大學或培訓班計算機教育經驗的資深教師和作者組成,在計算機基礎應用、電腦安全與維護、Office軟件、圖形圖像軟件等方面有著豐富的教學經驗、使用經驗和寫作經驗。圖書出版經驗豐富,曾出版著作上百部,在市場上獲得了良好的口碑。
Chapter 01 網頁設計與制作基礎
1.1 了解網頁的基本概念 2
1.1.1 網頁設計基礎知識 2
1.1.2 網頁的基本組成元素 3
1.1.3 網站的分類 5
1.2 HTML的基本概念 7
1.2.1 HTML的含義與組成 8
1.2.2 認識HTML標簽 8
1.2.3 使用記事本編寫HTML代碼 9
1.2.4 使用瀏覽器查看頁面效果 10
1.3 網頁的色彩搭配 11
1.3.1 網頁的配色基礎 11
1.3.2 網頁色彩搭配方案 12
1.3.3 網頁配色的注意事項 14
1.4 了解域名與網站設計的流程 15
1.4.1 域名的常見分類 15
1.4.2 認識域名服務器(DNS) 17
1.4.3 網站的設計流程 18
1.5 網頁制作的常用工具 20
1.5.1 網頁美化工具Photoshop 20
1.5.2 網頁編輯工具Dreamweaver 20
給你支招
如何通過網頁查看HTML源代碼并保存
21
留白在網頁中有哪些好處 22
Chapter 02 Photoshop CS6網頁界面設計基礎
2.1 熟悉Photoshop CS6的操作界面
24
2.1.1 菜單欄和命令 24
2.1.2 工具選項欄 25
2.1.3 文檔窗口 25
2.1.4 工具箱 27
2.1.5 標題欄 28
2.1.6 浮動面板 28
2.1.7 狀態(tài)欄 28
2.2 Photoshop CS6的優(yōu)化設置 29
2.2.1 自定義工作界面 29
2.2.2 修改工作區(qū)的背景顏色 30
2.2.3 自定義工具的快捷鍵 31
2.3 圖像的類型和分辨率 32
2.3.1 圖像的類型 32
2.3.2 分辨率 33
2.4 常見的頁面布局輔助工具 34
2.4.1 使用標尺定位圖像 34
2.4.2 使用參考線準確編輯圖像 35
2.4.3 使用網格精準調整圖像 36
2.4.4 為圖像添加注釋 37
給你支招
如何刪除自定義的工作界面 38
如何開啟Photoshop CS6的對齊功能 39
Chapter 03 圖像的基本處理
3.1 調整圖像與畫布 42
3.1.1 調整圖像尺寸 42
3.1.2 裁剪圖像大小 42
3.1.3 調整畫布尺寸 43
3.2 圖像的變換與變形操作 45
3.2.1 移動圖像 45
3.2.2 旋轉與縮放圖像 47
3.2.3 斜切圖像 48
3.3 選擇繪圖區(qū)域 49
3.3.1 選取規(guī)則區(qū)域 50
3.3.2 選取不規(guī)則區(qū)域 51
3.4 使用繪圖工具 55
3.4.1 畫筆工具 55
3.4.2 鉛筆工具 56
3.4.3 仿制圖章工具 57
3.4.4 橡皮擦工具 58
3.5 繪制矢量圖像 60
3.5.1 鋼筆工具 60
3.5.2 繪制形狀 62
給你支招
如何使用鉛筆工具快速繪制國際象棋
棋盤 63
如何將人物的頭發(fā)調整為自己喜歡的
顏色 65
Chapter 04 圖層和文本的使用
4.1 Photoshop圖層概述 68
4.1.1 認識“圖層”面板 68
4.1.2 創(chuàng)建圖層 68
4.1.3 圖層的基本操作 69
4.1.4 圖層的合并和層組 71
4.2 應用圖層樣式效果 73
4.2.1 添加圖層樣式 73
4.2.2 多種圖層樣式效果介紹 74
4.3 創(chuàng)建文字 77
4.3.1 橫排文字工具 77
4.3.2 直排文字工具 78
4.3.3 橫排文字蒙版工具 79
4.4 編輯文字 81
4.4.1 創(chuàng)建變形文字 81
4.4.2 沿路徑排列文字 82
給你支招
如何將背景圖層轉換為普通圖層 84
如何修改圖層的名稱和顏色 85
如何創(chuàng)建段落文字 86
Chapter 05 網頁切片輸出與動畫制作
5.1 圖像的優(yōu)化與輸出 88
5.1.1 圖像的格式 88
5.1.2 優(yōu)化圖像 89
5.1.3 輸出Web圖像 91
5.2 創(chuàng)建和編輯切片 92
5.2.1 切片的類型 92
5.2.2 創(chuàng)建切片 92
5.2.3 編輯切片 93
5.3 管理切片 94
5.3.1 選擇、移動和調整切片 94
5.3.2 組合與鎖定切片 95
5.3.3 將切片輸出到網頁 96
5.4 創(chuàng)建GIF動畫 99
5.4.1 認識“時間軸”面板 99
5.4.2 創(chuàng)建動畫 99
5.4.3 保存動畫 102
給你支招
如何基于圖層創(chuàng)建切片 103
如何處理瀏覽器不顯示輸出的動畫的
情況 104
Chapter 06 常用網頁元素的設計
6.1 設計網頁主要元素 106
6.1.1 認識網頁主圖 106
6.1.2 設計標題文字 107
6.1.3 設計網頁按鈕 109
6.1.4 制作網頁背景圖像 112
6.2 設計網頁Logo 114
6.2.1 Logo的尺寸規(guī)格 114
6.2.2 Logo的表現(xiàn)形式 115
6.2.3 Logo的定位 115
6.2.4 Logo的設計方法 116
6.3 設計網頁Banner 119
6.3.1 網頁Banner的設計策劃 119
6.3.2 網頁Banner的設計技巧 121
給你支招
如何在網頁按鈕上添加放大鏡圖標 123
如何對多個圖層同時進行操作 124
Chapter 07 初識Dreamweaver CS6
7.1 Dreamweaver CS6的工作界面
126
7.1.1 菜單欄 126
7.1.2 文檔窗口 127
7.1.3 面板組 129
7.1.4 “插入”面板 129
7.2 網頁制作的基本操作 131
7.2.1 新建網頁 131
7.2.2 保存網頁 132
7.2.3 打開網頁 133
7.2.4 預覽網頁 134
7.2.5 關閉網頁 135
7.3 創(chuàng)建、配置與發(fā)布本地站點 136
7.3.1 創(chuàng)建本地站點 136
7.3.2 配置遠程服務器 137
7.3.3 發(fā)布站點 139
7.4 管理站點 139
7.4.1 刪除站點 140
7.4.2 編輯站點 140
7.4.3 導出站點 141
7.4.4 添加文件和文件夾 142
7.4.5 重命名與刪除文件/文件夾 142
給你支招
如何改變預覽網頁時的瀏覽器 143
如何導入站點文件 145
Chapter 08 在網頁中插入基礎網頁元素
8.1 在對話框中設置頁面屬性 148
8.1.1 設置外觀 148
8.1.2 設置外觀 149
8.1.3 設置鏈接 150
8.1.4 設置標題 152
8.1.5 設置標題/編碼 153
8.2 設置字體與頁面背景的效果 155
8.2.1 添加頁面標題 155
8.2.2 為文字添加加粗和傾斜樣式 156
8.2.3 設置文字的大小 157
8.2.4 設置文本的顏色 157
8.3 文本的簡單操作 158
8.3.1 在網頁中錄入文本 158
8.3.2 讓文本換行分段 158
8.3.3 設置文本的對齊方式 159
8.3.4 設置文本的字體格式 160
8.4 項目列表和編號列表的使用 161
8.4.1 插入項目列表 161
8.4.2 插入編號列表 162
8.5 插入特殊頁面元素 163
8.5.1 插入換行符 163
8.5.2 插入水平線 164
8.5.3 插入日期 164
給你支招
如何利用跟蹤圖像制作網頁 166
如何插入特殊符號 167
Chapter 09 用圖像、多媒體與超鏈接豐富網頁
9.1 在網頁中插入圖像 170
9.1.1 插入圖像 170
9.1.2 調整圖像大小 172
9.1.3 調整圖片的亮度和對比度 173
9.1.4 裁剪頁面中的圖像 174
9.2 在網頁中插入多媒體 175
9.2.1 插入背景音樂 175
9.2.2 插入Flash動畫 177
9.2.3 插入FLV視頻 178
9.3 超鏈接概述 180
9.3.1 認識超鏈接的類型 180
9.3.2 鏈接路徑有哪些分類 182
9.4 創(chuàng)建網頁常用的超鏈接 184
9.4.1 創(chuàng)建文本鏈接 184
9.4.2 創(chuàng)建圖像鏈接 186
9.4.3 創(chuàng)建熱點鏈接 187
9.4.4 創(chuàng)建空鏈接 188
9.4.5 創(chuàng)建腳本鏈接 189
給你支招
如何插入非FLV格式的視頻文件 190
如何在網頁中插入E-mail鏈接 192
Chapter 10 使用表格布局頁面
10.1 創(chuàng)建表格并輸入內容 194
10.1.1 精確插入指定行列的表格 194
10.1.2 在表格中輸入內容 195
10.2 格式化表格效果 196
10.2.1 表格與單元格的選擇 196
10.2.2 設置單元格大小和對齊方式 198
10.2.3 為表格添加邊框 199
10.2.4 單元格中文本格式和背景格式的
設置 200
10.3 編輯表格 201
10.3.1 插入行或列 201
10.3.2 刪除行或列 202
10.3.3 復制、剪切和粘貼單元格 203
10.3.4 合并單元格 205
10.4 表格的特殊處理 206
10.4.1 外部導入表格數(shù)據 206
10.4.2 對表格數(shù)據排序 207
給你支招
如何插入嵌入式表格 208
如何拆分合并后的單元格 209
Chapter 11 使用CSS樣式表美化頁面
11.1 認識CSS層疊樣式表 212
11.1.1 CSS層疊樣式表概述 212
11.1.2 CSS的3種類型 212
11.1.3 CSS的基本語法 213
11.2 網頁中應用CSS樣式的方法 215
11.2.1 嵌入式CSS 215
11.2.2 內聯(lián)式CSS 216
11.2.3 外聯(lián)式CSS 216
11.3 各種CSS樣式選擇器的創(chuàng)建 218
11.3.1 創(chuàng)建ID選擇器 218
11.3.2 創(chuàng)建標簽選擇器 220
11.3.3 創(chuàng)建類選擇器 221
11.3.4 創(chuàng)建復合選擇器 223
11.4 CSS中的常用樣式 225
11.4.1 字體樣式的設置 226
11.4.2 文本段落樣式的設置 228
11.4.3 背景樣式的設置 229
11.4.4 方框樣式的設置 231
11.4.5 邊框樣式的設置 231
11.4.6 列表樣式的設置 233
11.4.7 定位樣式的設置 233
給你支招
創(chuàng)建外部CSS樣式文件 234
如何將篩選結果保存到新工作表中 236
Chapter 12 利用Div+CSS布局網頁
12.1 初識Div標簽 238
12.1.1 Div標簽概述 238
12.1.2 插入Div標簽 238
12.1.3 為Div標簽添加CSS樣式表 240
12.1.4 Div+CSS的布局優(yōu)勢 241
12.2 Div標簽的定位方法 242
12.2.1 盒子模型的概念 242
12.2.2 通過float屬性定位Div標簽 243
12.2.3 通過position屬性定位Div
標簽 244
12.3 Div標簽的常見布局模式 245
12.3.1 單行單列固定寬度 245
12.3.2 一列自適應 246
12.3.3 一列固定寬度居中 246
12.3.4 兩列固定寬度 247
12.3.5 兩列寬度自適應 248
12.3.6 兩行右列寬度自適應 248
給你支招
如何創(chuàng)建嵌套Div標簽 249
如何設置Div標簽對象的行高 250
Chapter 13 表單元素、模板和庫的運用
13.1 插入表單元素 252
13.1.1 什么是表單 252
13.1.2 初步認識表單對象 252
13.1.3 插入表單域 256
13.1.4 插入文本域 257
13.1.5 插入密碼域 259
13.1.6 插入復選框 260
13.1.7 插入按鈕 261
13.2 使用模板 263
13.2.1 創(chuàng)建空白模板 263
13.2.2 定義模板中的可編輯區(qū)域 264
13.2.3 創(chuàng)建基于模板的網頁 265
13.2.4 從模板中分離網頁 266
13.3 創(chuàng)建和應用庫項目 267
13.3.1 創(chuàng)建庫項目 267
13.3.2 向頁面中插入庫項目 268
13.3.3 修改并更新庫項目 268
給你支招
如何自動選擇文本框中所有文本內容 270
如何將當前網頁創(chuàng)建為模板 271
如何在現(xiàn)有網頁文件上應用模板 272
Chapter 14 使用JavaScript行為創(chuàng)建特效網頁
14.1 認識JavaScript 274
14.1.1 JavaScript的含義 274
14.1.2 事件 274
14.1.3 熟悉動作類型 275
14.1.4 如何使用JavaScript 275
14.2 在網頁中添加行為 276
14.2.1 交換圖像 276
14.2.2 打開瀏覽器窗口 278
14.2.3 調用JavaScript 279
14.2.4 檢查表單 280
14.3 jQuery的應用 281
14.3.1 使用jQuery的核心函數(shù) 282
14.3.2 使用jQuery選擇器 282
14.3.3 使用jQuery操作對象的屬性 284
給你支招
如何恢復交換圖像 285
解決預覽頁面時腳本的執(zhí)行問題 286
Chapter 15 在線出境游網站設計
15.1 案例制作的效果和思路 288
15.2 網站的結構設計 289
15.2.1 制作網站布局結構 289
15.2.2 創(chuàng)建網站文檔 289
15.2.3 為頁面設置輔助線 290
15.2.4 制作頁面背景 291
15.3 設計頁面主體的內容 292
15.3.1 設計頁面的頭部 292
15.3.2 設計頁面的中部 295
15.3.3 設計頁面的底部 297
15.4 輸出網站頁面設計圖 298
15.4.1 將圖像保存為JPG格式 298
15.4.2 切割并輸出圖像 299
15.5 案例制作總結和答疑 301
給你支招
如何下載網站前臺的布局模板 301
如何避免導出的切片圖像呈現(xiàn)黑白色 302
Chapter 16 制作現(xiàn)代家居裝飾網站
16.1 案例制作效果和思路 304
16.2 創(chuàng)建網站的基礎框架 306
16.2.1 創(chuàng)建網站站點 306
16.2.2 創(chuàng)建網站模板 307
16.2.3 創(chuàng)建樣式文件 309
16.2.4 將樣式表鏈接到模板中 311
16.3 在模板中制作頭部和底部 312
16.3.1 制作頁面頭部 312
16.3.2 制作頁面底部 316
16.4 通過模板制作網頁 317
16.4.1 制作現(xiàn)代家居裝飾網首頁 317
16.4.2 制作現(xiàn)代家居裝飾網展示頁 320
16.4.3 修改模板頁中的導航菜單 322
16.5 案例制作總結和答疑 323
給你支招
如何在Dreamweaver中使用注釋
標簽 324
如何在Dreamweaver中添加外部
字體 325
Chapter 01 網頁設計與制作基礎
學習目標
在網站制作的整個過程中,網頁的設計與制作是最重要的環(huán)節(jié)。因此,我們在進行網頁設計與制作之前,首先需要對它的基礎知識進行學習,如網頁的基本概念、HTML的基本概念等。
本章要點
網頁設計基礎知識
網頁的基本組成元素
網站的分類
HTML的含義與組成
認識HTML標簽
使用記事本編寫HTML
使用瀏覽器查看頁面效果
網頁的配色基礎
網頁色彩搭配方案
網頁配色的注意事項
知識要點 學習時間 學習難度
了解網頁和HTML的基本概念 40分鐘 ★★
網頁色彩搭配與制作的常用工具 40分鐘 ★★
了解域名與網站設計流程 30分鐘 ★★
1.1 了解網頁的基本概念
阿智:小白,跟我說說你理解中的網頁是什么?
小白:網頁就是我們平時使用瀏覽器打開的頁面吧。
阿智:瀏覽器打開的頁面是網頁,但是它只是用來給瀏覽者瀏覽的。其實網頁的概念非常復雜,它的組成部分也相當多,想要設計和制作出網頁,首先需要對它的基本概念有所
了解。
當前,隨著網絡的高速發(fā)展,網站在我們的工作與生活中無處不在,學習網頁設計與制作的用戶也越來越多。不過用戶在學習之前,應該對網頁的基本知識有一定的了解,以便能更好地設計和制作網頁,如圖1-1所示為當當網首頁。
圖1-1 當當網首頁
1.1.1 網頁設計基礎知識
網頁是我們在瀏覽網站時,看到的一個個畫面,而網站則是一些相關網頁的集合,一個網站可以有幾個頁面,也可以包含數(shù)以千萬個網頁,下面我們就來認識一下網站和網頁。
網站
網站是發(fā)布在網絡服務器上的一系列網頁文件的集合,訪問者可以通過網站獲取需要的資訊或服務,也可發(fā)布自己想要公開的資訊。網站示例如圖1-2所示。
圖1-2 網易門戶網站
網頁
我們在通過瀏覽器瀏覽網站時,其實瀏覽的就是網頁。網頁不僅需要把各種信息簡單直白地表達出來,還需要通過各種制作技巧,讓用戶更有效地接收到這些信息。網頁示例如圖1-3所示。
圖1-3 精美的網頁
1.1.2 網頁的基本組成元素
想要順利地設計與制作出網頁,認識網頁的基本組成元素必不可少。在圖1-1中標識出了大部分的網頁組成元素,下面我們就來認識一下網頁的基本組成元素。
LOGO
在互聯(lián)網中,LOGO主要是各個網站用來與其他網站鏈接的圖形標志。在設計和制作的網頁時,通常使用圖像或動畫來制作LOGO,如圖1-4所示為展示京東商城的LOGO。
圖1-4 網頁中的LOGO
LOGO含義補充說明
LOGO是LOGOtype的縮寫,其具體含義是徽標或者商標,它起到對徽標擁有公司的識別和推廣的作用,通過形象的徽標可以讓消費者記住公司主題及其品牌文化。
文本
在網頁中,文本內容是最基礎、最重要的組成元素,也是網頁信息傳遞的主要載體。為了讓文本更有特色,用戶可以根據需要對其字體、大小、顏色、底紋、邊框等屬性進行設置,如圖1-5所示。
圖1-5 網頁中的文本
圖像
豐富多彩的圖像是美化網頁必不可少的元素,網頁中的圖像一般為JPG格式和GIF格式。圖像不僅可以美化網頁,還能讓瀏覽者更加直觀地了解信息,如圖1-6所示。
圖1-6 網頁中的圖像
超鏈接
超鏈接是網頁的主要特色,通過它可以快速跳轉到當前網站的另一個頁面或其他網站的頁面中。超鏈接可以是文本、按鈕或圖片,只有通過超鏈接將各個頁面鏈接在一起,才能真正構成一個網站,如圖1-7所示。
圖1-7 使用超鏈接實現(xiàn)頁面跳轉
超鏈接的識別方法
在網頁中,只要將鼠標指針移動到對象上,當鼠標指針變?yōu)槭中托螤睿涂梢哉f明該對象就是超鏈接。在默認情況下,文本超鏈接都會出現(xiàn)下劃線。
導航欄
導航欄是一組超鏈接,其作用就是鏈接到各個頁面中,方便瀏覽者快速找到需要的資源。導航欄一般由多個按鈕或者多個文本超鏈接組成,它可以是文字、圖片,還可以是SWF動畫。網頁中的導航欄如圖1-8所示。
圖1-8 網頁中的導航欄
表單
表單主要的作用就是采集數(shù)據,如用戶的注冊資料。然后將這些信息發(fā)送到用戶設置的目標端,實現(xiàn)瀏覽者與服務器之間的信息交互。網頁中的表單如圖1-9所示。
圖1-9 網頁中的表單
動畫
動畫實質上是動態(tài)的圖像,網頁中可以使用的動畫有GIF圖形動畫、Flash動畫等。制作精致的動畫更容易吸引到瀏覽者眼球。網頁中的動畫如圖1-10所示。
圖1-10 網頁中的動畫
1.1.3 網站的分類
網站是一種新型的媒體,種類繁多,涉及我們身邊的方方面面,如日常生活、娛樂游戲、商業(yè)活動以及新聞資訊等,下面就來認識幾種常見的網站。
個人網站
個人網站是指可以發(fā)布個人信息及相關內容的小型網站,即網站內容是介紹自己或是以自己的信息為中心的網站,如圖1-11
所示。
圖1-11 個人博客網站
企業(yè)網站
企業(yè)網站主要圍繞企業(yè)、產品及服務信息進行網絡宣傳,通過網站樹立企業(yè)的網絡形象,從而提高企業(yè)的影響力及知名度,如圖1-12所示。
圖1-12 企業(yè)網站
電子商務網站
電子商務網站就是為瀏覽者與賣家搭建的一個網絡平臺,將網絡信息、商品、物流與資金結合起來,從而實現(xiàn)商務活動,如
圖1-13所示。
圖1-13 電子商務網站
娛樂游戲網站
娛樂游戲網站大多是以提供娛樂信息、流行音樂以及各種游戲為主的網站,具有非常強的時效性。因此,頁面上具有豐富的信息,如圖1-14所示。
圖1-14 娛樂游戲網站
行業(yè)信息網站
行業(yè)信息網站是指能夠滿足某一特定領域上網的人群或特定需要的網站,這些網站的內容和服務都更為專業(yè),如圖1-15所示。
圖1-15 財經信息網站
綜合門戶網站
綜合門戶網站將互聯(lián)網上大量信息進行整合、分類,為瀏覽者打開方便之門,在該類網站上可以瀏覽到各方面的資訊,如圖1-16所示。
網站按主題性質分類
網站按照主題性質不同,可分為政府網站、企業(yè)網站、商業(yè)網站、教育科研機構網站、個人網站、其他非營利機構網站等。
圖1-16 新浪門戶網站
……