123,123,123

內(nèi)容簡(jiǎn)介

　　本書(shū)緊密圍繞Web前端工程師在制作網(wǎng)頁(yè)過(guò)程中的實(shí)際需要和應(yīng)該掌握的技術(shù)，全面介紹如何使用HTML5、CSS3、JavaScript進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)和美化。本書(shū)著眼于實(shí)戰(zhàn)，講解的都是在開(kāi)發(fā)時(shí)經(jīng)常遇到的典型問(wèn)題和案例，主要內(nèi)容分為Web前端開(kāi)發(fā)先備知識(shí)、構(gòu)建HTML頁(yè)面、使用CSS美化頁(yè)面、使用JavaScript制作網(wǎng)頁(yè)特效、綜合實(shí)戰(zhàn)5個(gè)單元。本書(shū)優(yōu)選了20個(gè)任務(wù)，大部分任務(wù)從提出實(shí)際問(wèn)題開(kāi)始，通過(guò)【任務(wù)描述】和【知識(shí)預(yù)覽】，詳細(xì)講述解決問(wèn)題所需的知識(shí)點(diǎn)，并在【任務(wù)實(shí)現(xiàn)】過(guò)程中詳細(xì)講解實(shí)現(xiàn)步驟，同時(shí)展示代碼實(shí)例和相關(guān)截圖，最后通過(guò)【任務(wù)實(shí)訓(xùn)】強(qiáng)化讀者對(duì)技能的掌握，使讀者循序漸進(jìn)地體驗(yàn)網(wǎng)頁(yè)制作過(guò)程。本書(shū)既可以作為高等院校、高等職業(yè)院校相關(guān)專業(yè)的“網(wǎng)頁(yè)設(shè)計(jì)與制作”課程的配套教材，也可以作為“1+X證書(shū)”中有關(guān)Web前端開(kāi)發(fā)（初級(jí)）的技術(shù)參考用書(shū)。

作者簡(jiǎn)介

　　盛昀瑤，女，常州機(jī)電職業(yè)技術(shù)學(xué)院骨干教師。主講過(guò)Java程序設(shè)計(jì)、UI界面設(shè)計(jì)、B/S前端技術(shù)基礎(chǔ)、jQuery開(kāi)發(fā)技術(shù)、SEO等多門(mén)課程，具有較豐富的教學(xué)經(jīng)驗(yàn)。主講的前端課程獲江蘇省多媒體課件制作一等獎(jiǎng)、省信息化教學(xué)設(shè)計(jì)三等獎(jiǎng)、省高校微課比賽三等獎(jiǎng)、院精品課程一等獎(jiǎng)。

圖書(shū)目錄

單元1 Web前端開(kāi)發(fā)先備知識(shí) 1
【任務(wù)1．1】揭秘Web前端開(kāi)發(fā) 1
1．1．1 Web前端開(kāi)發(fā)概述 1
1．1．2 Web標(biāo)準(zhǔn) 3
【任務(wù)1．2】使用前端工具開(kāi)發(fā)第一個(gè)網(wǎng)頁(yè) 4
1．2．1 前端開(kāi)發(fā)工具介紹 5
1．2．2 使用Dreamweaver CS6 5
1．2．3 使用Sublime Text 8
1．2．4 使用Dreamweaver CC 11
1．2．5 瀏覽器簡(jiǎn)介 13
【任務(wù)1．3】建立正確的站點(diǎn)結(jié)構(gòu) 15
1．3．1 前端頁(yè)面相關(guān)知識(shí) 15
1．3．2 站點(diǎn)的建立 17
1．3．3 站點(diǎn)的管理和發(fā)布 20
單元測(cè)試1 22
單元2 構(gòu)建HTML頁(yè)面 23
【任務(wù)2．1】基本頁(yè)面構(gòu)建 23
2．1．1 HTML介紹 23
2．1．2 HTML5網(wǎng)頁(yè)的基本結(jié)構(gòu)和基本標(biāo)簽的作用 24
2．1．3 創(chuàng)建簡(jiǎn)單網(wǎng)頁(yè) 25
2．1．4 HTML頭部屬性設(shè)置 28
【任務(wù)2．2】新聞頁(yè)面構(gòu)建 30
2．2．1 HTML基本標(biāo)簽 30
2．2．2 新聞頁(yè)面制作 35
2．2．3 自閉合標(biāo)簽 36
2．2．4 相對(duì)路徑和絕對(duì)路徑 37
【任務(wù)2．3】讀書(shū)頁(yè)面構(gòu)建 39
2．3．1 超鏈接 41
2．3．2 讀書(shū)頁(yè)面制作 42
2．3．3 HTML中的命名規(guī)則 43
2．3．4 超鏈接中的一些屬性 44
【任務(wù)2．4】教育頁(yè)面構(gòu)建 45
2．4．1 列表 47
2．4．2 教育頁(yè)面制作 49
【任務(wù)2．5】浪浪網(wǎng)首頁(yè)構(gòu)建 52
2．5．1 表格 54
2．5．2 表格語(yǔ)義化 57
2．5．3 浪浪網(wǎng)首頁(yè)制作 59
【任務(wù)2．6】浪浪網(wǎng)注冊(cè)頁(yè)面構(gòu)建 64
2．6．1 表單標(biāo)簽 65
2．6．2 表單元素 67
2．6．3 表單分組 73
2．6．4 注冊(cè)頁(yè)面制作 74
2．6．5 HTML5新增的表單標(biāo)簽 77
【任務(wù)2．7】浪浪網(wǎng)多媒體頁(yè)面構(gòu)建 79
2．7．1 多媒體的使用 80
2．7．2 多媒體頁(yè)面制作 83
單元測(cè)試2 84
單元3 使用CSS美化頁(yè)面 86
【任務(wù)3．1】初識(shí)浪浪網(wǎng)頭部CSS 86
3．1．1 初識(shí)CSS 86
3．1．2 浪浪網(wǎng)頭部CSS設(shè)置 91
3．1．3 Google推薦的HTML和CSS格式規(guī)范 92
【任務(wù)3．2】新聞頁(yè)面的簡(jiǎn)單美化 96
3．2．1 文字樣式 97
3．2．2 文本樣式 100
3．2．3 超鏈接樣式 103
3．2．4 邊框樣式 105
3．2．5 背景樣式 108
3．2．6 新聞頁(yè)面的美化 112
3．2．7 字體設(shè)置 113
3．2．8 CSS3中新增的背景屬性和圓角邊框?qū)傩?115
【任務(wù)3．3】浪浪網(wǎng)首頁(yè)主體制作 119
3．3．1 CSS盒子模型和HTML元素 120
3．3．2 列表樣式 126
3．3．3 浮動(dòng)布局 128
3．3．4 首頁(yè)主體制作 133
3．3．5 清除浮動(dòng)的方法 143
【任務(wù)3．4】浪浪網(wǎng)導(dǎo)航欄制作 147
3．4．1 定位布局 147
3．4．2 z-index屬性 152
3．4．3 display屬性 154
3．4．4 導(dǎo)航欄制作 155
單元測(cè)試3 161
單元4 使用JavaScript制作網(wǎng)頁(yè)特效 163
【任務(wù)4．1】浪浪網(wǎng)下拉菜單特效制作 163
4．1．1 JavaScript簡(jiǎn)介 164
4．1．2 在網(wǎng)頁(yè)中引入JavaScript的方式 165
4．1．3 JavaScript的數(shù)據(jù)結(jié)構(gòu) 166
4．1．4 JavaScript流程控制語(yǔ)句 168
4．1．5 函數(shù) 169
4．1．6 JavaScript常用事件 172
4．1．7 下拉菜單特效 173
【任務(wù)4．2】浪浪網(wǎng)圖片輪換特效制作 176
4．2．1 DOM模型 177
4．2．2 數(shù)組 180
4．2．3 定時(shí) 181
4．2．4 計(jì)時(shí) 183
4．2．5 圖片輪換特效 183
4．2．6 Date對(duì)象 185
【任務(wù)4．3】浪浪網(wǎng)表單驗(yàn)證特效制作 187
4．3．1 獲取表單元素值 187
4．3．2 JavaScript內(nèi)置函數(shù) 189
4．3．3 正則表達(dá)式 190
4．3．4 表單驗(yàn)證特效 192
4．3．5 HTML5的表單驗(yàn)證 195
4．3．6 自定義驗(yàn)證信息 196
【任務(wù)4．4】浪浪網(wǎng)其他特效制作 198
4．4．1 CSS樣式特效 200
4．4．2 window對(duì)象 201
4．4．3 選項(xiàng)卡特效 204
4．4．4 彈出廣告特效 206
4．4．5 頁(yè)面返回、前進(jìn)、刷新特效 206
單元測(cè)試4 208
單元5 綜合實(shí)戰(zhàn) 209
【任務(wù)5．1】水源安檢企業(yè)網(wǎng)站首頁(yè)制作 209
5．1．1 頁(yè)面布局 210
5．1．2 代碼實(shí)現(xiàn) 213
【任務(wù)5．2】萬(wàn)維電商網(wǎng)站首頁(yè)制作 233
5．2．1 常見(jiàn)的網(wǎng)站類型 233
5．2．2 頁(yè)面布局 236
5．2．3 代碼實(shí)現(xiàn) 240
附錄A Dreamweaver CC使用技巧 257
附錄B 單元測(cè)試答案 260