網(wǎng)頁制作與網(wǎng)站建設實戰(zhàn)教程

第1章 初識網(wǎng)絡、網(wǎng)頁和網(wǎng)站 .............1
1.1　網(wǎng)絡基本概念 ..............................1
1.1.1　認識網(wǎng)絡 .............................1
1.1.2 網(wǎng)絡的分類 .........................2
1.2 網(wǎng)絡相關(guān)術(shù)語 ..............................3
1.3 認識網(wǎng)頁和網(wǎng)站 ..........................4
1.3.1 網(wǎng)頁和網(wǎng)站基本概念 .........5
1.3.2 網(wǎng)頁基本構(gòu)成要素 .............6
1.3.3 網(wǎng)站頁面構(gòu)成 .....................8
1.3.4 網(wǎng)站類型 ...........................10
1.4 瀏覽器概述 ................................12
習題 .....................................................15
第2章 網(wǎng)頁設計基礎 .........................17
2.1 網(wǎng)頁設計原則 ............................17
2.2 網(wǎng)頁配色基礎 ............................20
2.2.1 認識色彩 ...........................20
2.2.2 色彩三屬性 .......................22
2.2.3 色彩象征意義 ...................22
2.2.4 網(wǎng)頁配色原則 ...................26
2.3 網(wǎng)頁設計流程 ............................29
2.3.1 確定網(wǎng)站主題 ...................29
2.3.2 網(wǎng)站整體規(guī)劃 ...................29
2.3.3 收集素材 ...........................30
2.3.4 設計網(wǎng)頁效果圖 ...............31
2.4 網(wǎng)頁布局設計 ............................32
2.4.1 什么是網(wǎng)頁布局 ...............32
2.4.2 基本結(jié)構(gòu)分析 ...................33
2.4.3 網(wǎng)頁布局分類 ...................33
2.4.4 網(wǎng)頁布局原則 ...................36
2.5 網(wǎng)頁內(nèi)容元素設計 ....................38
2.5.1 文字編排設計 ...................39
2.5.2 圖像設計 ...........................39
2.5.3 超鏈接設計 .......................41
2.6 常用的網(wǎng)頁設計軟件 ................42
2.6.1 Photoshop ...........................42
2.6.2 Illustrator ...........................42
2.6.3 Flash ..................................43
2.6.4 Fireworks ...........................43
習題 .....................................................44
第3章 網(wǎng)站建設基礎 .......................45
3.1 網(wǎng)站建設流程 ............................45
3.1.1 頁面觀察和搭建 ...............45
3.1.2 開發(fā)動態(tài)網(wǎng)站模塊 ...........46
3.1.3 網(wǎng)站建設后期事宜 ...........47
3.2 常用的網(wǎng)站建設工具 ................47
3.3 域名和服務器空間 ....................50
3.3.1 域名概述 ...........................50
3.3.2 域名的級別 .......................51
3.3.3 域名的意義 .......................53
3.3.4 選取域名 ...........................53
3.3.5 注冊域名 ...........................54
3.3.6 認識服務器空間 ...............55
目　錄
網(wǎng)頁設計與網(wǎng)站制作1-2章_1校.indd 1 2018-10-26 10:37:06
2 網(wǎng)頁制作與網(wǎng)站建設實戰(zhàn)教程
3.3.7 購買服務器空間的
注意事項 ...........................56
3.4 網(wǎng)站的上傳 ................................57
習題 .....................................................59
第4 章 Dreamweaver 工具基本操作 .... 61
4.1 界面介紹 ....................................61
4.2 軟件初始化設置 ........................67
4.3 Dreamweaver 工具的
基本操作 ....................................70
4.3.1 文檔的操作 .......................70
4.3.2 添加文本 ...........................73
4.3.3 添加圖像 ...........................75
4.3.4 添加鏈接 ...........................76
習題 .....................................................78
第5 章 站點、模板和庫 .................... 79
5.1 站點 ............................................79
5.1.1 認識站點 ...........................79
5.1.2 建立站點 ...........................80
5.1.3 管理站點 ...........................81
5.2 模板 ............................................84
5.2.1 認識模板 ...........................84
5.2.2 創(chuàng)建模板 ...........................85
5.2.3 編輯模板 ...........................86
5.2.4 管理模板 ...........................87
5.3 庫 ...............................................89
5.3.1 認識庫和庫項目 ...............89
5.3.2 創(chuàng)建庫項目 .......................90
5.3.3 管理庫項目 .......................90
習題 .....................................................92
第6 章 網(wǎng)頁制作入門——HTML ...... 94
6.1 HTML 概述 ................................94
6.1.1 什么是HTML ...................94
6.1.2 認識HTML 標記 ..............95
6.1.3 HTML 文檔基本格式 .......95
6.1.4 HTML 標記屬性 ...............96
6.1.5 HTML文檔頭部相關(guān)
標記 ...................................97
6.2 文本控制標記 ............................99
6.2.1 標題和段落標記 ...............99
6.2.2 文本樣式標記 .................101
6.2.3 文本格式化標記 .............101
6.2.4 特殊字符標記 .................102
6.3 HTML 圖像標記 ......................102
6.3.1 常用圖像格式 .................102
6.3.2 圖像標記 ............103
6.3.3 路徑和相對路徑 .....105
6.4 認識HTML5 ............................106
6.4.1 HTML5 概述 ...................106
6.4.2 HTML5文檔格式的
變化 .................................107
6.4.3 HTML5 新增標記 ..........108
習題 ...................................................109
第7 章 網(wǎng)頁制作入門——CSS ........110
7.1 CSS 簡介 ..................................110
7.1.1 什么是CSS .....................110
7.1.2 CSS 發(fā)展史 .....................110
7.2 CSS 核心基礎 ..........................111
7.2.1 CSS 樣式規(guī)則 .................111
7.2.2 引入CSS 樣式表 ............112
7.2.3 CSS 基礎選擇器 .............114
7.3 CSS 文本樣式 ..........................116
7.3.1 字體樣式屬性 .................116
7.3.2 文本外觀屬性 .................119
7.4 CSS 高級屬性 ..........................123
7.4.1 CSS 層疊性和繼承性 .....123
網(wǎng)頁設計與網(wǎng)站制作1-2章_1校.indd 2 2018-10-26 10:37:06
目錄 3
7.4.2 CSS 優(yōu)先級 .....................124
7.5 CSS3 新增選擇器 ....................127
習題 ...................................................129
第8章 盒子模型 .............................. 131
8.1 盒子模型概述 ..........................131
8.1.1 認識盒子模型 .................131
8.1.2 標記 .......................132 8.1.3 盒子的寬與高 .................132
8.2 盒子模型相關(guān)屬性 ..................133
8.2.1 邊框?qū)傩?.........................133
8.2.2 內(nèi)邊距屬性 .....................137
8.2.3 外邊距屬性 .....................137
8.2.4 box-shadow 屬性 .............138
8.2.5 box-sizing 屬性 ................139
8.2.6 背景屬性 .........................139
8.3 元素類型與轉(zhuǎn)換 ......................144
8.3.1 元素的類型 .....................144
8.3.2 標記 ....................145 8.3.3 元素的轉(zhuǎn)換 .....................145
8.4 塊元素垂直外邊距的合并 ......146
8.4.1 相鄰塊元素垂直外
邊距的合并 .....................146
8.4.2 嵌套塊元素垂直外
邊距的合并 .....................146
習題 ...................................................146
第9 章 列表和超鏈接 ..................... 148
9.1 列表標記 ..................................148
9.1.1 無序列表 ..................148 9.1.2 有序列表 ..................149 9.1.3 定義列表 ..................150 9.2 CSS控制列表樣式 ...................150
9.2.1 list-style-type屬性 ..........150
9.2.2 list-style-image屬性 .......151
9.2.3 list-style-position屬性 ...151
9.2.4 list-style屬性 ...................152
9.3 超鏈接標記 ..............................152
9.3.1 創(chuàng)建超鏈接 .....................152
9.3.2 錨點鏈接 .........................153
9.4 鏈接偽類控制超鏈接 ..............154
習題 ...................................................154
第10 章 表格和表單 ....................... 156
10.1 表格標記 ................................156
10.1.1 創(chuàng)建表格 .......................156
10.1.2 標記的屬性 ......157 10.1.3 標記的屬性 ...........161 10.1.4 標記的屬性 ...........162 10.1.5 標記 .......................163 10.2 CSS 控制表格樣式 ................163
10.2.1 CSS 控制表格邊框 .......164
10.2.2 CSS 控制單元格邊距 ...164
10.2.3 CSS 控制單元格寬高 ...164
10.3 認識表單 ................................165
10.3.1 表單的構(gòu)成 ...................165
10.3.2 表單的創(chuàng)建 ...................165
10.3.3 表單的屬性 ...................166
10.4 表單控件 ................................167
10.4.1 input 控件 ......................167
10.4.2 標記的type
屬性 ...............................169
10.4.3 標記的其他
屬性 ...............................172
10.4.4 textarea 控件..................174
10.4.5 select 控件 .....................175
10.4.6 datalist 控件 ...................177
10.5 CSS 控制表單樣式 ................177
習題 ...................................................178
網(wǎng)頁設計與網(wǎng)站制作1-2章_1校.indd 3 2018-10-26 10:37:06
4 網(wǎng)頁制作與網(wǎng)站建設實戰(zhàn)教程
第11 章 div css 布局 ..................... 180
11.1 布局概述.................................180
11.2 布局常用屬性.........................182
11.2.1 標記的浮動屬性 ...........182
11.2.2 標記的定位屬性 ...........184
11.3 布局其他屬性.........................187
11.3.1 overflow 屬性 ................187
11.3.2 Z-index 標記層疊 ..........188
11.4 布局類型.................................188
11.4.1 單列布局 .......................188
11.4.2 兩列布局 ........................189
11.4.3 三列布局 .......................190
11.5 網(wǎng)頁模塊命名規(guī)范.................191
習題 ...................................................192
第12 章 CSS 應用技巧 .................. 194
12.1 CSS 精靈技術(shù) ........................194
12.1.1 認識CSS 精靈 ..............194
12.1.2 應用CSS 精靈 ..............195
12.2 CSS 滑動門技術(shù) ....................196
12.2.1 認識滑動門 ...................196
12.2.2 使用滑動門制作導
航條 ...............................197
12.3 margin 設置負值技巧 ............198
12.3.1 margin 負值基本應用 ...198
12.3.2 利用margin 負值制作
壓線效果 .......................199
習題 ...................................................199
第13 章 視頻和音頻嵌入技術(shù) ......... 201
13.1 視頻和音頻嵌入技術(shù)概述 ....201
13.2 視頻文件和音頻文件的
格式 ........................................203
13.3 嵌入視頻和音頻 ....................203
13.3.1 在HTML5 中嵌入
視頻 ...............................204
13.3.2 在HTML5 中嵌入
音頻 ...............................204
13.3.3 視頻和音頻文件的兼容
性問題 ...........................205
13.3.4 調(diào)用網(wǎng)絡視頻和音頻
文件 ...............................206
13.3.5 CSS 控制視頻的寬高 ...207
習題 ...................................................207
第14 章 JavaScript 基礎知識 ......... 209
14.1 初識JavaScript .......................209
14.1.1 JavaScript 簡介..............209
14.1.2 JavaScript 語法規(guī)則......213
14.1.3 JavaScript 引入方式......214
14.1.4 JavaScript 常用輸出
語句 ...............................216
14.1.5 簡單的JavaScript頁面 ....218
14.2 認識標識符、關(guān)鍵字、
保留字 ....................................218
14.3 認識基本數(shù)據(jù)類型 ................219
14.3.1 數(shù)值型 ...........................220
14.3.2 字符串型 .......................220
14.3.3 布爾型 ...........................221
14.3.4 空型 ...............................221
14.3.5 未定義型 .......................222
14.4 常量與變量 ............................222
14.4.1 常量 ...............................222
14.4.2 變量 ...............................222
14.4.3 變量的賦值 ...................223
14.5 數(shù)據(jù)類型的檢測與轉(zhuǎn)換 ........223
14.5.1 檢測數(shù)據(jù)類型 ...............224
14.