網(wǎng)頁(yè)設(shè)計(jì)與制作
定 價(jià):59 元
- 作者:李利正
- 出版時(shí)間:2022/7/1
- ISBN:9787121437632
- 出 版 社:電子工業(yè)出版社
- 中圖法分類:TP393.092.2
- 頁(yè)碼:
- 紙張:
- 版次:
- 開本:
Web前端工程師是互聯(lián)網(wǎng)時(shí)代Web產(chǎn)品研發(fā)中不可缺少的專業(yè)角色。本書從Web開發(fā)實(shí)際應(yīng)用的角度,以任務(wù)項(xiàng)目開發(fā)為主線,把HTML5、CSS3的Web前端開發(fā)理論知識(shí)、實(shí)戰(zhàn)技能融入8個(gè)任務(wù),引導(dǎo)讀者從HTML5設(shè)置網(wǎng)頁(yè)內(nèi)容、CSS定義樣式美化網(wǎng)頁(yè)布局等基礎(chǔ)任務(wù)開始,逐步掌握?qǐng)D文網(wǎng)頁(yè)、表單交互網(wǎng)頁(yè)、音視頻媒體網(wǎng)頁(yè)、動(dòng)畫特效網(wǎng)頁(yè)、瀑布流布局網(wǎng)頁(yè)等頁(yè)面開發(fā),并在熟練編程的基礎(chǔ)上,理解自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)和響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)關(guān)鍵技術(shù),掌握響應(yīng)式網(wǎng)頁(yè)的設(shè)計(jì)與開發(fā)。本書配以思維導(dǎo)圖幫助讀者梳理知識(shí)點(diǎn),將知識(shí)點(diǎn)融入到Web前端開發(fā)實(shí)際崗位案例中,有效掌握核心技巧,力求提高讀者的Web網(wǎng)頁(yè)開發(fā)水平。本書既可作為高等職業(yè)院校計(jì)算機(jī)及相關(guān)專業(yè)Web前端設(shè)計(jì)與開發(fā)課程的教材,也可供從事網(wǎng)頁(yè)設(shè)計(jì)與制作、網(wǎng)頁(yè)編程、Web應(yīng)用開發(fā)等行業(yè)人員參考閱讀。
李利正,畢業(yè)學(xué)校:浙江師范大學(xué),學(xué)歷:本科,學(xué)位:碩士,職稱:副教授,研究方向:計(jì)算機(jī)應(yīng)用
任務(wù)1 創(chuàng)建個(gè)網(wǎng)頁(yè)1
1.1 基本條件和概念3
1.1.1 學(xué)習(xí)工具3
1.1.2 基本概念3
1.1.3 任務(wù):建站點(diǎn)建網(wǎng)頁(yè)6
1.2 格式排版標(biāo)簽9
1.2.1 段落標(biāo)簽與換行標(biāo)簽9
1.2.2 標(biāo)題標(biāo)簽10
1.2.3 水平線標(biāo)簽10
1.2.4 無(wú)語(yǔ)義標(biāo)簽11
1.2.5 文本標(biāo)簽11
1.3 列表標(biāo)簽13
1.3.1 有序列表14
1.3.2 無(wú)序列表15
1.3.3 自定義列表17
1.3.4 嵌套列表18
1.4 圖像20
1.5 超鏈接24
1.5.1 超鏈接的屬性24
1.5.2 郵箱鏈接26
1.5.3 錨點(diǎn)鏈接27
1.6 表格28
1.7 任務(wù)實(shí)施32
任務(wù)2 用CSS美化你的網(wǎng)頁(yè)36
2.1 CSS概念37
2.2 CSS的使用方法37
2.3 CSS聲明與應(yīng)用39
2.3.1 CSS格式39
2.3.2 CSS注釋39
2.3.3 CSS單位39
2.3.4 CSS顏色39
2.3.5 選擇器40
2.4 CSS常見屬性48
2.4.1 CSS字體48
2.4.2 CSS文本56
2.4.3 CSS盒子模型66
2.4.4 CSS邊框72
2.4.5 CSS鏈接81
2.4.6 CSS列表83
2.4.7 CSS背景92
2.4.8 CSS浮動(dòng)112
2.4.9 CSS定位124
2.5 任務(wù)實(shí)施129
任務(wù)3 規(guī)整網(wǎng)頁(yè)布局134
3.1 布局方式135
3.2 固定布局136
3.3 單列布局136
3.3.1 等寬單列布局136
3.3.2 非等寬單列布局139
3.4 兩列布局141
3.4.1 浮動(dòng)方式實(shí)現(xiàn)兩列布局141
3.4.2 position實(shí)現(xiàn)兩列布局142
3.5 三列布局143
3.5.1 圣杯布局143
3.5.2 雙飛翼布局147
3.6 嵌套混合布局149
3.7 任務(wù)實(shí)施150
3.7.1 整體布局151
3.7.2 第二層布局153
3.7.3 第三層布局154
3.7.4 各模塊內(nèi)容設(shè)計(jì)155
任務(wù)4 通過(guò)表單與用戶交互164
4.1 認(rèn)識(shí)表單165
4.1.1 表單域166
4.1.2 表單元素168
4.1.3 HTML5新增表單類型與屬性172
4.1.4 表單驗(yàn)證177
4.2 任務(wù)實(shí)施179
任務(wù)5 應(yīng)用媒體標(biāo)簽制作個(gè)性化播放器189
5.1 HTML5音頻標(biāo)簽190
5.2 HTML5視頻標(biāo)簽192
5.3 HTML5音視頻標(biāo)簽使用中的“坑”193
5.4 音視頻標(biāo)簽的DOM操作194
5.5 任務(wù)實(shí)施198
任務(wù)6 制作活動(dòng)抽獎(jiǎng)大轉(zhuǎn)盤206
6.1 CSS坐標(biāo)系統(tǒng)與角度單位207
6.2 transform屬性209
6.3 transition屬性223
6.4 animation屬性228
6.5 @keyframes屬性230
6.6 任務(wù)實(shí)施233
任務(wù)7 純CSS實(shí)現(xiàn)瀑布流布局240
7.1 多列布局實(shí)現(xiàn)瀑布流網(wǎng)頁(yè)布局241
7.1.1 多列布局知識(shí)圖譜241
7.1.2 多列布局前導(dǎo)知識(shí)241
7.1.3 任務(wù)實(shí)施245
7.2 彈性布局實(shí)現(xiàn)瀑布流布局249
7.2.1 彈性布局知識(shí)圖譜249
7.2.2 彈性布局前導(dǎo)知識(shí)250
7.2.3 容器屬性251
7.2.4 項(xiàng)目屬性254
7.2.5 利用彈性布局設(shè)計(jì)微信底部導(dǎo)航欄257
7.2.6 任務(wù)實(shí)施264
7.3 網(wǎng)格布局實(shí)現(xiàn)瀑布流布局265
7.3.1 網(wǎng)格布局知識(shí)圖譜265
7.3.2 網(wǎng)格布局前導(dǎo)知識(shí)266
7.3.3 任務(wù)實(shí)施277
任務(wù)8 響應(yīng)式網(wǎng)頁(yè)開發(fā)280
8.1 前導(dǎo)知識(shí)281
8.1.1 設(shè)備屏幕281
8.1.2 關(guān)于視口284
8.1.3 媒體查詢技術(shù)287
8.1.4 響應(yīng)式圖片技術(shù)290
8.1.5 流式布局293
8.2 響應(yīng)式框架制作旅游網(wǎng)頁(yè)299
8.2.1 安裝Bootstrap300
8.2.2 組件302
8.2.3 布局308