前 言
一、學(xué)習(xí)網(wǎng)站制作的意義
隨著互聯(lián)網(wǎng)的發(fā)展，人們的生活、學(xué)習(xí)、娛樂、購物都越來越多地離不開網(wǎng)絡(luò)，而網(wǎng)站是互聯(lián)網(wǎng)上一個(gè)重要的“溝通工具”，人們可以通過網(wǎng)站來發(fā)布自己想要的信息，或者利用網(wǎng)站來獲得相關(guān)的服務(wù)等。其中最常用的功能有如下幾個(gè)。
1. 企業(yè)宣傳
企業(yè)宣傳可幫助企業(yè)介紹自己、展示產(chǎn)品種類、整合相關(guān)案例等，產(chǎn)品規(guī)格和型號(hào)方便潛在客戶隨時(shí)查看產(chǎn)品信息。
2. 發(fā)布信息
個(gè)人和企事業(yè)單位發(fā)布某個(gè)行業(yè)的專業(yè)信息，專一性、專業(yè)性較強(qiáng)，以某個(gè)行業(yè)的企業(yè)為中心，整合行業(yè)資源，可形成一個(gè)行業(yè)信息專屬平臺(tái)。
3. 在線服務(wù)
例如，中國移動(dòng)官網(wǎng)，是一個(gè)可以實(shí)現(xiàn)在線選擇業(yè)務(wù)、提交訂單、在線支付的互動(dòng)平臺(tái)，并且它提供一個(gè)意見反饋窗口(在線留言或電子郵件)，用來解答問題和處理用戶意見，從而形成一個(gè)友好、便捷的在線服務(wù)中心。
4. 論壇社區(qū)
論壇社區(qū)是為業(yè)內(nèi)人士、專家、學(xué)者和普通大眾提供討論和發(fā)表看法的場所，如知乎、天涯等。
為適應(yīng)社會(huì)的需求，目前，網(wǎng)頁設(shè)計(jì)與制作已經(jīng)成為眾多高校計(jì)算機(jī)專業(yè)及越來越多的非計(jì)算機(jī)專業(yè)學(xué)生必須掌握的基本技能之一，因此各高校紛紛開設(shè)了網(wǎng)頁設(shè)計(jì)及網(wǎng)站制作的相關(guān)課程。
二、本書結(jié)構(gòu)
《網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè)實(shí)例教程（微課版）》是專門為一線教師、師范院校的學(xué)生和專業(yè)從事網(wǎng)頁設(shè)計(jì)與制作的人員編寫的教材，為便于學(xué)習(xí)，特設(shè)計(jì)了如下欄目。
● 跟我學(xué)：每個(gè)實(shí)例都通過“跟我學(xué)”輕松學(xué)習(xí)掌握，其中包括多個(gè)“階段框”，將任務(wù)進(jìn)一步細(xì)分成若干個(gè)更小的任務(wù)，以降低閱讀難度。
● 創(chuàng)新園：對所學(xué)知識(shí)進(jìn)行多層次的鞏固和強(qiáng)化。
● 知識(shí)庫：介紹涉及的基本概念和理論知識(shí)，以便深入理解相關(guān)知識(shí)。
● 小結(jié)與習(xí)題：對全章內(nèi)容進(jìn)行歸納、總結(jié)，同時(shí)用習(xí)題來檢測學(xué)習(xí)效果。
三、《網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè)實(shí)例教程（微課版）》特色
《網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè)實(shí)例教程（微課版）》打破傳統(tǒng)寫法，各章節(jié)均以實(shí)例入手，逐步深入介紹網(wǎng)頁設(shè)計(jì)與制作、網(wǎng)站建設(shè)與制作方法和技巧。《網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè)實(shí)例教程（微課版）》有以下幾個(gè)特點(diǎn)。
● 內(nèi)容實(shí)用：《網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè)實(shí)例教程（微課版）》所有實(shí)例均選自網(wǎng)頁主要應(yīng)用領(lǐng)域，內(nèi)容編排結(jié)構(gòu)合理。
● 圖文并茂：在介紹具體操作步驟過程中，語言簡潔，基本上每一個(gè)步驟都配有對應(yīng)的插圖，用圖文來分解復(fù)雜的步驟。路徑式圖示引導(dǎo)，便于讀者一邊翻閱圖書，一邊上機(jī)操作。
● 提示技巧：《網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè)實(shí)例教程（微課版）》對讀者在學(xué)習(xí)過程中可能會(huì)遇到的問題以“小貼士”和“知識(shí)庫”的形式進(jìn)行了說明，以免讀者在學(xué)習(xí)過程中走彎路。
● 便于上手：《網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè)實(shí)例教程（微課版）》以實(shí)例為線索，利用實(shí)例將網(wǎng)頁設(shè)計(jì)與制作技術(shù)及網(wǎng)站建設(shè)技術(shù)串聯(lián)起來，書中的實(shí)例都非常典型、實(shí)用。
四、《網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè)實(shí)例教程（微課版）》資源
為了便于高等院校教師使用，更為了便于高校學(xué)生使用，《網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè)實(shí)例教程（微課版）》配套相關(guān)資源，希望能借助這些資源采用項(xiàng)目學(xué)習(xí)的方式完成《網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè)實(shí)例教程（微課版）》的教學(xué)。
● 《網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè)實(shí)例教程（微課版）》實(shí)例：完整收錄了《網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè)實(shí)例教程（微課版）》中每個(gè)實(shí)例所用到的各種素材，以及初始作品和最終作品。
● 教學(xué)課件：為節(jié)省教師的寶貴備課時(shí)間，我們制作了教學(xué)課件，教師可以適當(dāng)對其進(jìn)行修改、完善，以應(yīng)用到教學(xué)中。
● 自學(xué)微課：對于相關(guān)知識(shí)我們制作了微課，讀者在自主學(xué)習(xí)《網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè)實(shí)例教程（微課版）》時(shí)，可以掃描對應(yīng)的二維碼進(jìn)行自學(xué)。
《網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè)實(shí)例教程（微課版）》的全部資源可通過掃描下方二維碼下載。
PPT課件+實(shí)例文件 自學(xué)微課
五、《網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè)實(shí)例教程（微課版）》作者
參與《網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè)實(shí)例教程（微課版）》修訂編寫的作者有省級(jí)教研人員、一線信息技術(shù)教師，他們不僅長期從事信息技術(shù)教學(xué)，而且都有較為豐富的計(jì)算機(jī)圖書編寫經(jīng)驗(yàn)。
《網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè)實(shí)例教程（微課版）》由方其桂著，參與編寫的人員還有趙青松、殷小慶、李東亞、周逸、王斌、唐小華、黃金華等。隨書資料由方其桂整理制作。
雖然我們有著十多年撰寫計(jì)算機(jī)圖書(累計(jì)已編寫、出版一百余本)編寫方面的經(jīng)驗(yàn)，并盡力認(rèn)真構(gòu)思驗(yàn)證和反復(fù)審核修改，但仍難免有一些瑕疵。我們深知一本圖書的好壞，需要廣大讀者去檢驗(yàn)評(píng)說，在這里，我們衷心希望您對《網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè)實(shí)例教程（微課版）》提出寶貴的意見和建議。讀者在學(xué)習(xí)使用過程中，對同樣實(shí)例的制作，可能會(huì)有更好的制作方法，也可能對書中某些實(shí)例的制作方法的科學(xué)性和實(shí)用性提出質(zhì)疑，敬請讀者批評(píng)指正。
服務(wù)電子郵箱：476371891@qq.com。
方其桂
2020年8月
目 錄
第1章 網(wǎng)頁與網(wǎng)站基礎(chǔ) 1
1.1 了解網(wǎng)站 2
1.1.1 網(wǎng)站的概念 2
1.1.2 網(wǎng)站的訪問方式 3
1.1.3 網(wǎng)站的工作過程 4
1.1.4 網(wǎng)站的分類 6
1.1.5 網(wǎng)站的架構(gòu) 10
1.2 認(rèn)識(shí)網(wǎng)頁 11
1.2.1 網(wǎng)頁的頁面結(jié)構(gòu) 11
1.2.2 網(wǎng)頁中的主要元素 14
1.2.3 網(wǎng)頁的結(jié)構(gòu)類型 17
1.3 初識(shí)網(wǎng)頁設(shè)計(jì)語言與制作工具 19
1.3.1 網(wǎng)頁設(shè)計(jì)語言 19
1.3.2 網(wǎng)頁制作工具 22
1.3.3 網(wǎng)頁美化工具 23
1.3.4 網(wǎng)頁調(diào)試工具 24
1.4 小結(jié)和習(xí)題 26
1.4.1 本章小結(jié) 26
1.4.2 本章練習(xí) 26
第2章 網(wǎng)站規(guī)劃設(shè)計(jì) 29
2.1 網(wǎng)站初步規(guī)劃 30
2.1.1 網(wǎng)站的建設(shè)流程 30
2.1.2 網(wǎng)站的設(shè)計(jì)原則 32
2.1.3 網(wǎng)站的設(shè)計(jì)技術(shù) 33
2.2 網(wǎng)站配色與布局 34
2.2.1 網(wǎng)站配色 34
2.2.2 網(wǎng)站布局 37
2.3 網(wǎng)站內(nèi)容設(shè)計(jì) 39
2.3.1 網(wǎng)站主題的定位 39
2.3.2 網(wǎng)站風(fēng)格的確定 39
2.3.3 網(wǎng)站結(jié)構(gòu)設(shè)計(jì) 41
2.3.4 網(wǎng)站形象設(shè)計(jì) 41
2.3.5 網(wǎng)站導(dǎo)航設(shè)計(jì) 42
2.4 小結(jié)和習(xí)題 43
2.4.1 本章小結(jié) 43
2.4.2 本章練習(xí) 44
第3章 初識(shí)網(wǎng)頁制作軟件 45
3.1 Dreamweaver工作環(huán)境 46
3.1.1 使用界面 46
3.1.2 浮動(dòng)面板 47
3.1.3 視圖模式 49
3.2 站點(diǎn)的創(chuàng)建與管理 50
3.2.1 站點(diǎn)的規(guī)劃 50
3.2.2 站點(diǎn)的創(chuàng)建 51
3.2.3 站點(diǎn)的管理 53
3.3 Dreamweaver基本操作 58
3.3.1 新建網(wǎng)頁 58
3.3.2 預(yù)覽網(wǎng)頁 59
3.3.3 設(shè)置網(wǎng)頁屬性 61
3.4 小結(jié)和習(xí)題 63
3.4.1 本章小結(jié) 63
3.4.2 本章練習(xí) 63
第4章 制作網(wǎng)頁內(nèi)容 65
4.1 輸入文本 66
4.1.1 添加文本 66
4.1.2 美化網(wǎng)頁文本 69
4.1.3 插入列表 72
4.1.4 插入特殊元素 74
4.1.5 插入表格 76
4.2 插入圖像 79
4.2.1 添加圖像 80
4.2.2 設(shè)置圖像對齊方式 82
4.2.3 制作鼠標(biāo)經(jīng)過圖像 84
4.2.4 添加背景圖像 85
4.3 插入多媒體 87
4.3.1 插入動(dòng)畫 87
4.3.2 插入視頻 89
4.3.3 插入音頻 90
4.4 使用超鏈接 93
4.4.1 創(chuàng)建超鏈接 93
4.4.2 添加錨鏈接 95
4.5 使用模板快速制作網(wǎng)頁 97
4.5.1 創(chuàng)建模板文件 97
4.5.2 使用模板文件 101
4.5.3 管理模板文件 102
4.6 小結(jié)和習(xí)題 105
4.6.1 本章小結(jié) 105
4.6.2 本章練習(xí) 105
第5章 使用CSS樣式美化網(wǎng)頁 107
5.1 了解CSS基礎(chǔ)知識(shí) 108
5.1.1 初識(shí)CSS樣式 108
5.1.2 編寫CSS樣式 110
5.1.3 引用外部CSS 114
5.2 編寫CSS樣式代碼 117
5.2.1 CSS常用選擇器 117
5.2.2 CSS常用屬性 123
5.3 使用CSS樣式美化文本 127
5.3.1 設(shè)置字體屬性 127
5.3.2 設(shè)置段落屬性 132
5.4 使用CSS樣式修飾頁面 139
5.4.1 設(shè)置圖片樣式 139
5.4.2 設(shè)置背景與邊框 144
5.5 小結(jié)和習(xí)題 148
5.5.1 本章小結(jié) 148
5.5.2 本章練習(xí) 149
第6章 制作網(wǎng)頁表單 151
6.1 初識(shí)表單 152
6.1.1 認(rèn)識(shí)表單對象 152
6.1.2 創(chuàng)建表單 153
6.2 添加表單對象 156
6.2.1 文本域和密碼域 156
6.2.2 文本區(qū)域 158
6.2.3 選擇(列表/菜單) 160
6.2.4 單選按鈕 162
6.2.5 復(fù)選框和復(fù)選框組 163
6.2.6 按鈕 165
6.2.7 HTML5表單對象 169
6.3 小結(jié)和習(xí)題 172
6.3.1 本章小結(jié) 172
6.3.2 本章練習(xí) 172
第7章 規(guī)劃布局網(wǎng)頁 173
7.1 網(wǎng)頁布局基礎(chǔ)知識(shí) 174
7.1.1 網(wǎng)頁布局結(jié)構(gòu) 174
7.1.2 網(wǎng)頁布局方法 178
7.1.3 網(wǎng)頁布局技術(shù) 179
7.2 使用表格布局網(wǎng)頁 180
7.2.1 插入編輯表格 180
7.2.2 美化設(shè)置表格 183
7.2.3 表格布局網(wǎng)頁 188
7.3 使用框架布局網(wǎng)頁 195
7.3.1 了解框架元素及其關(guān)系 195
7.3.2 使用iframe元素創(chuàng)建框架頁面 196
7.4 使用DIV+CSS布局 198
7.4.1 兩列結(jié)構(gòu)布局 199
7.4.2 多列結(jié)構(gòu)布局 201
7.5 小結(jié)和習(xí)題 207
7.5.1 本章小結(jié) 207
7.5.2 本章練習(xí) 207
第8章 添加網(wǎng)頁特效 211
8.1 使用CSS設(shè)計(jì)動(dòng)畫特效 212
8.1.1 設(shè)計(jì)變換動(dòng)畫特效 212
8.1.2 設(shè)計(jì)關(guān)鍵幀動(dòng)畫特效 214
8.1.3 設(shè)計(jì)過渡動(dòng)畫特效 217
8.2 使用行為添加網(wǎng)頁特效 219
8.2.1 交換圖像 219
8.2.2 彈出信息 221
8.2.3 打開窗口 222
8.2.4 其他效果 223
8.3 使用框架設(shè)置網(wǎng)頁特效 225
8.3.1 設(shè)計(jì)選項(xiàng)卡特效 225
8.3.2 設(shè)計(jì)手風(fēng)琴特效 228
8.4 小結(jié)和習(xí)題 230
8.4.1 本章小結(jié) 230
8.4.2 本章練習(xí) 231
第9章 制作動(dòng)態(tài)網(wǎng)站 233
9.1 安裝和配置IIS 234
9.1.1 安裝IIS 234
9.1.2 配置IIS站點(diǎn) 235
9.2 建立網(wǎng)站數(shù)據(jù)庫 241
9.2.1 設(shè)計(jì)Access網(wǎng)站數(shù)據(jù)庫 241
9.2.2 設(shè)計(jì)MySQL網(wǎng)站數(shù)據(jù)庫 244
9.3 制作動(dòng)態(tài)網(wǎng)頁 248
9.3.1 使用PHP連接數(shù)據(jù)庫 249
9.3.2 添加記錄 252
9.3.3 查詢記錄 256
9.3.4 修改記錄 260
9.3.5 刪除記錄 263
9.4 制作動(dòng)態(tài)網(wǎng)站案例 265
9.4.1 站點(diǎn)分析 265
9.4.2 設(shè)計(jì)數(shù)據(jù)庫 267
9.4.3 制作首頁 269
9.4.4 制作列表頁面 272
9.4.5 制作內(nèi)容頁面 275
9.4.6 制作管理頁面 276
9.5 小結(jié)和習(xí)題 279
9.5.1 本章小結(jié) 279
9.5.2 本章練習(xí) 280
第10章 網(wǎng)站建設(shè)與發(fā)布 281
10.1 申請空間和域名 282
10.1.1 申請網(wǎng)站空間 282
10.1.2 注冊域名 285
10.1.3 解析域名 289
10.2 建設(shè)網(wǎng)站軟件環(huán)境 291
10.2.1 安裝網(wǎng)絡(luò)操作系統(tǒng) 291
10.2.2 搭建網(wǎng)站系統(tǒng)平臺(tái) 294
10.2.3 安裝數(shù)據(jù)庫管理系統(tǒng) 297
10.3 測試和上傳站點(diǎn) 305
10.3.1 測試瀏覽器兼容性 305
10.3.2 測試鏈接 307
10.3.3 上傳站點(diǎn) 308
10.4 發(fā)布和維護(hù)網(wǎng)站 313
10.4.1 發(fā)布網(wǎng)站 313
10.4.2 維護(hù)網(wǎng)站 321
10.5 宣傳和推廣網(wǎng)站 321
10.5.1 宣傳網(wǎng)站 322
10.5.2 推廣網(wǎng)站 322
10.6 小結(jié)和習(xí)題 323
10.6.1 本章小結(jié) 323
10.6.2 本章練習(xí) 323
書單推薦
