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