網(wǎng)頁設(shè)計理論與實(shí)務(wù)(微課版)
定 價:54 元
叢書名:信息技術(shù)應(yīng)用新形態(tài)系列教材
- 作者:田登山 孫峰
- 出版時間:2023/9/1
- ISBN:9787115617200
- 出 版 社:人民郵電出版社
- 中圖法分類:TP393.092.2
- 頁碼:212
- 紙張:
- 版次:01
- 開本:16開
本書根據(jù)網(wǎng)頁設(shè)計與制作的基礎(chǔ)語法邏輯進(jìn)行編寫,理論與實(shí)務(wù)相結(jié)合,力求幫助網(wǎng)頁設(shè)計與制作零基礎(chǔ)的讀者從入門走向精通。全書共8章,包括瀏覽器與網(wǎng)頁基礎(chǔ)、網(wǎng)頁文本處理、常用的網(wǎng)頁標(biāo)記、CSS基礎(chǔ)、CSS布局屬性、設(shè)計復(fù)雜的布局、JavaScript基礎(chǔ)、基于對象的JavaScript編程等內(nèi)容。
為了方便教師教學(xué),本書提供豐富的教學(xué)資源,包括PPT課件、電子教案、教學(xué)大綱、課后習(xí)題答案、上機(jī)實(shí)驗(yàn)源代碼、實(shí)訓(xùn)案例源代碼等。如有需要,用書教師請登錄人郵教育社區(qū)(www.ryjiaoyu.com)獲取相關(guān)教學(xué)資源。
本書可作為高等院校計算機(jī)、電子商務(wù)、網(wǎng)絡(luò)與新媒體等專業(yè)相關(guān)課程的教材,也可作為從事網(wǎng)頁設(shè)計、電子商務(wù)、前端開發(fā)等工作人員的參考書。
1.教學(xué)與零售市場的“雙層需要”,市場潛力大。
2.揚(yáng)棄傳統(tǒng)編寫思路,突出理論與基礎(chǔ)技能培養(yǎng)。
3.深度調(diào)研院校需求,合理創(chuàng)新層次架構(gòu)及體例。
4.內(nèi)容布局差異化呈現(xiàn),立足零基礎(chǔ)人群。
5.提供充足課后練習(xí)題,同類教材首屈一指。
田登山,北京林業(yè)大學(xué)副教授。 2003年畢業(yè)于中國石油大學(xué)(北京)計算機(jī)系,獲碩士學(xué)位;畢業(yè)后北京林業(yè)大學(xué)經(jīng)濟(jì)管理學(xué)院任教至今。 研究領(lǐng)域:基于面向?qū)ο蟮南到y(tǒng)分析與設(shè)計、分布式Web開發(fā)技術(shù)、極限編程、移動開發(fā)。 承擔(dān)課程:網(wǎng)頁設(shè)計理論與實(shí)務(wù)、數(shù)據(jù)庫原理、Java、JSP。 一、主持和參與的科研、教學(xué)研究課題: 2003.9--2004.7,北京林業(yè)大學(xué)科技創(chuàng)新計劃項(xiàng)目和北京林業(yè)大學(xué)211建設(shè)----林業(yè)經(jīng)濟(jì)信息系統(tǒng),主要完成人。 2016-2018,設(shè)計開發(fā)了“無誤”App,曾成功在蘋果應(yīng)用商店、華為應(yīng)用商店上線。 二、論文與專著: 1. A Test-Driven Web Application Model based on Layered Approach;2010 IEEE International Conference on Information Theory and Information Security(ICITIS2010);Ei和ISTP檢索,并進(jìn)入IEEE Xplore。(第一作者) 2. WEB分層框架模型研究;2010年信息技術(shù)與管理科學(xué)研討會(CITSM 2010);ISTP檢索。(第一作者) 3.基于依賴關(guān)系的課程體系自我調(diào)整模型研究;中國林業(yè)教育;2010 28 (5)(第一作者) 4.林業(yè)經(jīng)濟(jì)信息集成平臺的構(gòu)建;《國家林業(yè)局管理干部學(xué)院學(xué)報》;2005年01期(第二作者) 5.基于分布式計算的網(wǎng)絡(luò)管理平臺的設(shè)計與實(shí)現(xiàn);《計算機(jī)工程》;2005年23期(第三作者) 三、出版教材 《Java面向?qū)ο蟪绦蛟O(shè)計與應(yīng)用》中國鐵道出版社, 2011.12,主編,排名第一。 《網(wǎng)頁設(shè)計理論與實(shí)踐》中國鐵道出版社, 2015.2,主編,排名第一。 《JSP網(wǎng)絡(luò)程序設(shè)計》北京郵電大學(xué)出版,2011.8,主編,排名第二。 四、榮譽(yù)與獎勵 北京市教育教學(xué)成果(高等教育)二等獎北京林業(yè)大學(xué)“經(jīng)濟(jì)管理綜合實(shí)驗(yàn)系統(tǒng)建設(shè)項(xiàng)目”,排名第二。 北京林業(yè)大學(xué)2007年教學(xué)成果獎校級一等獎經(jīng)濟(jì)管理綜合實(shí)驗(yàn)系統(tǒng)建設(shè),排名第三。 北京林業(yè)大學(xué)2007年教學(xué)成果獎校級優(yōu)秀獎電子商務(wù)系列課程教學(xué)改革研究,排名第二。
第 1章 瀏覽器與網(wǎng)頁基礎(chǔ) 1
1.1 計算機(jī)網(wǎng)絡(luò)與瀏覽器 1
1.1.1 計算機(jī)網(wǎng)絡(luò) 1
1.1.2 TCP/IP 2
1.1.3 進(jìn)制與IP地址 2
1.1.4 域名與域名服務(wù)器 4
1.1.5 URL 5
1.1.6 常用的瀏覽器 5
1.1.7 瀏覽器的工作原理 6
1.1.8 瀏覽器應(yīng)用程序 7
1.2 網(wǎng)站與網(wǎng)頁 8
1.2.1 網(wǎng)頁的分類 9
1.2.2 網(wǎng)頁的組成元素 10
1.2.3 網(wǎng)站的制作流程與網(wǎng)站空間 10
1.2.4 測試網(wǎng)頁 12
1.2.5 發(fā)布網(wǎng)頁 12
1.3 網(wǎng)頁設(shè)計輔助軟件 12
1.3.1 網(wǎng)頁編輯軟件 12
1.3.2 網(wǎng)頁測試軟件 13
1.3.3 IDE 13
1.4 構(gòu)建第 一個網(wǎng)頁 14
1.4.1 創(chuàng)建網(wǎng)頁文件 14
1.4.2 網(wǎng)頁編碼與文件存儲 14
1.4.3 測試網(wǎng)頁效果 14
1.4.4 瀏覽器的渲染次序 15
1.4.5 瀏覽器與內(nèi)存 15
1.5 實(shí)訓(xùn)案例 15
1.5.1 安裝Firefox瀏覽器 15
1.5.2 安裝Sublime Text 2 16
思考與練習(xí) 16
上機(jī)實(shí)驗(yàn) 17
第 2章 網(wǎng)頁文本處理 18
2.1 結(jié)構(gòu)標(biāo)記 18
2.1.1 html標(biāo)記 18
2.1.2 head標(biāo)記 18
2.1.3 meta標(biāo)記 19
2.1.4 控制網(wǎng)頁編碼 20
2.1.5 注釋 21
2.1.6 body標(biāo)記 21
2.1.7 進(jìn)制與RGB顏色值 23
2.1.8 網(wǎng)頁模板文件 23
2.2 文本樣式標(biāo)記與轉(zhuǎn)義字符 24
2.2.1 font標(biāo)記 24
2.2.2 物理樣式標(biāo)記與邏輯樣式標(biāo)記 25
2.2.3 轉(zhuǎn)義字符 26
2.3 組織段落 27
2.3.1 p標(biāo)記 27
2.3.2 div標(biāo)記與span標(biāo)記 28
2.3.3 標(biāo)記間的包含關(guān)系 29
2.3.4 標(biāo)題標(biāo)記hn 29
2.3.5 br標(biāo)記與nobr標(biāo)記 30
2.3.6 hr標(biāo)記 30
2.3.7 像素、分辨率與進(jìn)制 30
2.3.8 align屬性 31
2.3.9 空標(biāo)記 31
2.3.10 W3C與HTML標(biāo)準(zhǔn) 31
2.4 列表 32
2.4.1 li標(biāo)記與ol標(biāo)記 32
2.4.2 ul標(biāo)記 32
2.4.3 dl、dt和dd標(biāo)記 33
2.5 其他標(biāo)記 33
2.5.1 abbr標(biāo)記 33
2.5.2 acronym標(biāo)記 34
2.5.3 del與ins標(biāo)記 34
2.5.4 標(biāo)記的分類 35
2.6 實(shí)訓(xùn)案例 35
2.6.1 創(chuàng)建網(wǎng)頁模板文件 35
2.6.2 使用網(wǎng)頁模板文件 36
思考與練習(xí) 36
上機(jī)實(shí)驗(yàn) 38
第3章 常用的網(wǎng)頁標(biāo)記 39
3.1 網(wǎng)頁文件路徑 39
3.1.1 絕對路徑 39
3.1.2 相對路徑 40
3.2 鏈接 40
3.2.1 a標(biāo)記 40
3.2.2 書簽 42
3.2.3 base標(biāo)記 42
3.3 圖片 43
3.3.1 圖片格式 43
3.3.2 img標(biāo)記 44
3.3.3 map標(biāo)記 44
3.3.4 map標(biāo)記內(nèi)的重疊區(qū)域處理 46
3.3.5 marquee標(biāo)記 46
3.4 設(shè)計表格 48
3.4.1 table標(biāo)記 48
3.4.2 行標(biāo)記 48
3.4.3 單元格標(biāo)記 49
3.4.4 基準(zhǔn)線對齊 50
3.4.5 表格標(biāo)題標(biāo)記 50
3.4.6 合并行與列 51
3.5 設(shè)計表單 52
3.5.1 表單 52
3.5.2 輸入控件 53
3.6 實(shí)訓(xùn)案例 56
3.6.1 調(diào)整圖片尺寸 56
3.6.2 管理網(wǎng)頁相關(guān)文件 57
思考與練習(xí) 57
上機(jī)實(shí)驗(yàn) 58
第4章 CSS基礎(chǔ) 59
4.1 CSS概述 59
4.1.1 CSS的作用 59
4.1.2 CSS語法 60
4.1.3 CSS選擇器 60
4.1.4 注釋與添加CSS代碼 62
4.1.5 在網(wǎng)頁模板文件中添加CSS 62
4.1.6 樣式的優(yōu)先級 63
4.1.7 模式匹配 64
4.1.8 CSS屬性的繼承 66
4.2 CSS基本單位 67
4.2.1 長度單位 67
4.2.2 顏色單位 68
4.3 設(shè)置字體相關(guān)樣式 68
4.3.1 設(shè)置字體 68
4.3.2 設(shè)置字號 69
4.3.3 設(shè)置字體樣式 69
4.3.4 設(shè)置筆畫粗細(xì) 70
4.3.5 設(shè)置小型的大寫字母 71
4.3.6 設(shè)置行高 71
4.3.7 設(shè)置字體復(fù)合屬性 71
4.4 設(shè)置文本樣式 72
4.4.1 設(shè)置文本顏色 72
4.4.2 設(shè)置文本顯示方向 72
4.4.3 設(shè)置字母間距 73
4.4.4 設(shè)置文本對齊方式 74
4.4.5 設(shè)置文本修飾方式 74
4.4.6 理解偽類定義次序 75
4.4.7 IE瀏覽器的工作模式 75
4.4.8 改進(jìn)網(wǎng)頁模板文件 76
4.4.9 設(shè)置文本縮進(jìn) 76
4.4.10 轉(zhuǎn)換字母大小寫 77
4.4.11 設(shè)置單詞間距 77
4.5 設(shè)置元素背景 78
4.5.1 設(shè)置背景圖像固定 78
4.5.2 設(shè)置元素背景色 78
4.5.3 設(shè)置表格背景 79
4.5.4 設(shè)置背景圖像的基本屬性與起始位置 79
4.5.5 設(shè)置背景圖像的重復(fù)方式 80
4.5.6 設(shè)置背景的復(fù)合屬性 80
4.6 設(shè)置列表樣式 80
4.6.1 設(shè)置列表項(xiàng)符號 81
4.6.2 設(shè)置列表項(xiàng)符號的位置 81
4.6.3 用圖像替換列表項(xiàng)符號 82
4.6.4 設(shè)置列表的復(fù)合屬性 82
4.7 實(shí)訓(xùn)案例 82
4.7.1 顯示不同字體 82
4.7.2 調(diào)整字號 83
思考與練習(xí) 83
上機(jī)實(shí)驗(yàn) 85
第5章 CSS布局屬性 86
5.1 標(biāo)記的分類 86
5.1.1 行內(nèi)元素與塊元素 86
5.1.2 塊元素與行內(nèi)元素的互換 87
5.1.3 特殊的元素類型 87
5.2 設(shè)置元素尺寸 87
5.2.1 設(shè)置元素高度 87
5.2.2 設(shè)置元素寬度 88
5.2.3 偽元素 88
5.2.4 設(shè)置文本等寬 88
5.3 分類屬性 90
5.3.1 設(shè)置元素類型 90
5.3.2 設(shè)置元素是否可見 90
5.3.3 設(shè)置元素浮動 91
5.3.4 清除浮動元素 92
5.3.5 設(shè)置鼠標(biāo)指針 93
5.4 盒子模型 93
5.4.1 設(shè)置外邊距 93
5.4.2 設(shè)置邊框 94
5.4.3 設(shè)置填充 96
5.4.4 盒子模型的概念 97
5.4.5 消除瀏覽器的顯示差異 97
5.5 設(shè)置表格樣式 98
5.5.1 表格樣式的5個屬性 98
5.5.2 表格隔行變色與當(dāng)前行提示 99
5.6 設(shè)置元素定位 101
5.6.1 設(shè)置外邊距 101
5.6.2 設(shè)置垂直方向的對齊方式 101
5.6.3 設(shè)置元素堆疊順序 102
5.6.4 設(shè)置元素定位類型 102
5.6.5 設(shè)置溢出處理 105
5.7 實(shí)訓(xùn)案例 105
5.7.1 模擬論壇頁面 106
5.7.2 制作個人簡歷頁面 106
思考與練習(xí) 106
上機(jī)實(shí)驗(yàn) 108
第6章 設(shè)計復(fù)雜的布局 109
6.1 設(shè)計桌面瀏覽器布局 109
6.1.1 迭代技術(shù) 109
6.1.2 引入占位div 110
6.1.3 設(shè)計三行一列桌面瀏覽器布局 111
6.1.4 設(shè)計一行三列桌面瀏覽器布局 112
6.1.5 第二次迭代一行三列桌面瀏覽器布局 113
6.1.6 第三次迭代一行三列桌面瀏覽器布局 115
6.1.7 設(shè)計三行三列桌面瀏覽器布局 116
6.1.8 完善上部橫向菜單 117
6.1.9 第二次迭代上部橫向菜單 118
6.1.10 迭代左側(cè)豎向菜單 119
6.1.11 迭代下方版權(quán)信息 120
6.1.12 迭代中間內(nèi)容 121
6.1.13 迭代右側(cè)友情鏈接 122
6.1.14 第二次迭代三行三列桌面瀏覽器布局 123
6.1.15 第三次迭代上部橫向菜單 124
6.1.16 選擇網(wǎng)站色調(diào) 125
6.2 HTML5與CSS3 126
6.2.1 瀏覽器內(nèi)核 126
6.2.2 初步了解HTML5 127
6.2.3 引入HTML5后的網(wǎng)頁模板 128
6.2.4 CSS1到CSS3 128
6.2.5 定義圓角矩形 129
6.2.6 淺談圓角矩形實(shí)現(xiàn)算法 129
6.2.7 CSS3盒子模型 130
6.2.8 HTML5新增的標(biāo)記 131
6.3 flex布局基礎(chǔ) 132
6.3.1 flex容器 133
6.3.2 flex項(xiàng)目 135
6.4 flex布局設(shè)計 136
6.4.1 設(shè)計三行一列flex布局 136
6.4.2 設(shè)計一行三列flex布局 137
6.4.3 設(shè)計三行三列flex布局 139
6.5 響應(yīng)式網(wǎng)頁布局 140
6.5.1 響應(yīng)式網(wǎng)頁 140
6.5.2 “@media”語法 140
6.5.3 制作響應(yīng)式網(wǎng)頁 141
6.6 實(shí)訓(xùn)案例 144
6.6.1 整體布局的對齊方式 144
6.6.2 響應(yīng)式網(wǎng)頁菜單項(xiàng)提示 144
思考與練習(xí) 145
上機(jī)實(shí)驗(yàn) 146
第7章 JavaScript基礎(chǔ) 147
7.1 JavaScript語法基礎(chǔ) 147
7.1.1 定義JavaScript代碼 148
7.1.2 數(shù)據(jù)類型 148
7.1.3 常量 149
7.1.4 變量 150
7.1.5 值傳遞 150
7.1.6 關(guān)鍵字 151
7.2 分隔符 151
7.2.1 注釋符 151
7.2.2 空白符 151
7.2.3 普通分隔符 151
7.3 表達(dá)式和運(yùn)算符 152
7.3.1 算術(shù)運(yùn)算符 152
7.3.2 關(guān)系運(yùn)算符 153
7.3.3 邏輯運(yùn)算符 153
7.3.4 位運(yùn)算符 153
7.3.5 賦值運(yùn)算符 155
7.3.6 運(yùn)算符的優(yōu)先級 156
7.4 流程控制 157
7.4.1 順序流程 157
7.4.2 條件流程 157
7.4.3 函數(shù) 163
7.4.4 迭代學(xué)習(xí)方法 167
7.4.5 JavaScript調(diào)試技巧 168
7.4.6 常用的全局函數(shù) 169
7.4.7 循環(huán)流程 169
7.5 實(shí)訓(xùn)案例 175
7.5.1 顯示基本數(shù)據(jù)類型 175
7.5.2 顯示斐波那契數(shù)列 175
思考與練習(xí) 176
上機(jī)實(shí)驗(yàn) 177
第8章 基于對象的JavaScript編程 178
8.1 對象基礎(chǔ) 178
8.1.1 類與對象 178
8.1.2 屬性與方法 179
8.2 JavaScript中的常用類 179
8.2.1 Date類 179
8.2.2 Array類 180
8.2.3 String類 181
8.2.4 Math類 183
8.2.5 函數(shù)與高等數(shù)學(xué) 184
8.3 瀏覽器內(nèi)置對象 184
8.3.1 窗口對象window 184
8.3.2 文檔對象document 185
8.3.3 瀏覽器對象navigator 186
8.3.4 歷史對象history 187
8.3.5 位置對象location 187
8.4 事件及其處理方法 187
8.4.1 onload 187
8.4.2 onunload 188
8.4.3 onmouseover 188
8.4.4 onmouseout 188
8.4.5 onfocus 188
8.4.6 onblur 189
8.4.7 onclick 189
8.4.8 onselect 189
8.4.9 onchange 189
8.5 操作DOM 190
8.5.1 操作DOM節(jié)點(diǎn) 191
8.5.2 制作實(shí)時數(shù)字時鐘 192
8.5.3 實(shí)時顯示在頁面停留的時間 193
8.5.4 修改DOM節(jié)點(diǎn)的樣式 194
8.5.5 校驗(yàn)表單 195
8.5.6 設(shè)計RGB顏色查看器 200
8.6 HTTP異步通信 201
8.6.1 XMLHttpRequest對象 201
8.6.2 JSON對象 203
8.6.3 獲取天氣信息 204
8.6.4 使用終端顯示日志信息 205
8.7 兼容性設(shè)計 206
8.7.1 IE瀏覽器的條件注釋 206
8.7.2 低版本IE瀏覽器兼容HTML5和CSS3 207
8.7.3 自動切換桌面瀏覽器布局與移動端瀏覽器布局 208
8.8 JavaScript框架簡介 208
8.8.1 jQuery框架 209
8.8.2 Vue.js框架 209
8.8.3 Node.js框架 210
8.9 實(shí)訓(xùn)案例 210
8.9.1 提示文檔加載完畢 210
8.9.2 提示文檔加載進(jìn)程 210
思考與練習(xí) 211
上機(jī)實(shí)驗(yàn) 212