網(wǎng)頁設(shè)計(jì)與前端開發(fā)實(shí)用教程(Dreamweaver+CSS+Photoshop+JavaScript+HTML)
定 價(jià):49 元
- 作者:張婷
- 出版時(shí)間:2020/10/1
- ISBN:9787115539908
- 出 版 社:人民郵電出版社
- 中圖法分類:TP393.092.2
- 頁碼:248
- 紙張:
- 版次:01
- 開本:16開
本書緊密圍繞網(wǎng)頁設(shè)計(jì)師在制作網(wǎng)頁過程中的實(shí)際需要和應(yīng)該掌握的技術(shù),全面介紹了使用Dreamweaver、CSS、Photoshop、JavaScript、HML進(jìn)行網(wǎng)站建設(shè)和網(wǎng)頁設(shè)計(jì)的各方面內(nèi)容和技巧。本書不僅將筆墨用在了基本工具和語法的講解上,更重要的是還通過一個(gè)個(gè)鮮活、典型的實(shí)例來幫助讀者達(dá)到學(xué)以致用的目的。
全書由不同行業(yè)中的實(shí)例組成,書中各實(shí)例均經(jīng)過精心設(shè)計(jì),操作步驟清晰簡(jiǎn)明,技術(shù)分析深入淺出,實(shí)例效果精美實(shí)用。
本書提供課堂案例、課堂練習(xí)、課后習(xí)題的源文件,以及典型案例在線教學(xué)視頻。同時(shí)還為老師提供PPT教學(xué)課件、教學(xué)規(guī)劃參考、教學(xué)大綱等資源,便于老師課堂教學(xué)。
本書語言簡(jiǎn)潔,內(nèi)容豐富,適合網(wǎng)頁設(shè)計(jì)與制作人員、網(wǎng)站建設(shè)與開發(fā)人員、大中專院校相關(guān)專業(yè)師生、網(wǎng)頁制作培訓(xùn)班學(xué)員和個(gè)人網(wǎng)站愛好者閱讀。
1.完善的知識(shí)結(jié)構(gòu),大量真實(shí)案例,配圖豐富,效果直觀。
2.習(xí)題強(qiáng)化,實(shí)用性強(qiáng)。
3.本書提供課堂案例、課堂練習(xí)、課后習(xí)題的源文件,以及典型案例在線教學(xué)視頻。
4.提供PPT教學(xué)課件、教學(xué)規(guī)劃參考、教學(xué)大綱等資源,便于老師課堂教學(xué)
張婷,東北林業(yè)大學(xué)碩士,現(xiàn)就職于菏澤職業(yè)學(xué)院信息工程系。從事相關(guān)專業(yè)和教學(xué)20年,參與編寫教材4本。精通計(jì)算機(jī)網(wǎng)絡(luò)開發(fā)技術(shù),對(duì)HTML5、JavaScript、CSS3、Dreamweaver等網(wǎng)絡(luò)開發(fā)技術(shù)有很深的研究和實(shí)踐經(jīng)驗(yàn)。
第 1部分 Dreamweaver CC網(wǎng)頁制作篇
第 1章 使用Dreamweaver CC創(chuàng)建基本
文本網(wǎng)頁 11
1.1 Dreamweaver CC工作界面 12
1.1.1 菜單欄 12
1.1.2 文檔窗口 13
1.1.3 “屬性”面板 13
1.1.4 面板組 13
1.1.5 “插入”欄 13
1.2 創(chuàng)建本地站點(diǎn) 14
1.2.1 創(chuàng)建站點(diǎn)的好處 14
1.2.2 課堂案例——使用向?qū)?chuàng)建站點(diǎn) 14
1.3 添加文本元素 15
1.3.1 課堂案例——添加文本 15
1.3.2 課堂案例——插入日期 16
1.3.3 課堂案例——插入特殊字符 17
1.3.4 課堂案例——插入水平線 18
1.4 編輯文本格式 20
1.4.1 課堂案例——設(shè)置文本字體 20
1.4.2 設(shè)置文本大小 21
1.4.3 設(shè)置文本顏色 21
1.5 課堂練習(xí)——?jiǎng)?chuàng)建基本文本網(wǎng)頁 21
1.6 課后習(xí)題 23
1.7 本章總結(jié) 23
第 2章 使用圖像和多媒體創(chuàng)建豐富多彩的
網(wǎng)頁 24
2.1 網(wǎng)頁中圖像的格式 25
2.2 在網(wǎng)頁中插入圖像 25
2.2.1 課堂案例——插入普通圖像 25
2.2.2 課堂案例——設(shè)置圖像的屬性 26
2.2.3 課堂案例——裁剪圖像 28
2.3 插入其他網(wǎng)頁圖像 28
2.3.1 課堂案例——插入背景圖像 29
2.3.2 課堂案例——插入鼠標(biāo)經(jīng)過圖像 29
2.4 在網(wǎng)頁中插入動(dòng)畫和音樂 32
2.4.1 課堂案例——插入Flash動(dòng)畫 32
2.4.2 使用代碼提示插入背景音樂 34
2.5 課堂練習(xí) 36
課堂練習(xí)1——?jiǎng)?chuàng)建翻轉(zhuǎn)圖像導(dǎo)航 36
課堂練習(xí)2——?jiǎng)?chuàng)建圖文混排網(wǎng)頁 38
2.6 課后習(xí)題 40
2.7 本章總結(jié) 40
第3章 使用表格布局排版網(wǎng)頁 41
3.1 插入表格 42
3.1.1 表格的基本概念 42
3.1.2 課堂案例——插入表格 42
3.2 設(shè)置表格的各項(xiàng)屬性 43
3.2.1 設(shè)置表格的屬性 43
3.2.2 設(shè)置單元格的屬性 44
3.3 選擇表格 45
3.3.1 選擇整個(gè)表格 45
3.3.2 選擇行或列 46
3.3.3 選擇單元格 46
3.4 表格的基本操作 47
3.4.1 調(diào)整表格的高度和寬度 47
3.4.2 添加、刪除行或列 47
3.4.3 拆分單元格 48
3.4.4 合并單元格 49
3.4.5 剪切、復(fù)制、粘貼表格 49
3.5 排序及整理表格內(nèi)容 50
3.5.1 課堂案例——導(dǎo)入表格式數(shù)據(jù) 50
3.5.2 排序表格 51
3.6 課堂練習(xí) 52
3.6.1 課堂練習(xí)1——?jiǎng)?chuàng)建細(xì)線表格 52
3.6.2 課堂練習(xí)2——?jiǎng)?chuàng)建圓角表格 55
3.7 課后習(xí)題 58
3.8 本章總結(jié) 58
第4章 使用行為創(chuàng)建特效網(wǎng)頁 59
4.1 行為的概述 60
4.1.1 常見的動(dòng)作 60
4.1.2 常見的事件 61
4.2 調(diào)用JavaScript 61
4.2.1 課堂案例——利用JavaScript實(shí)現(xiàn)打印功能 62
4.2.2 課堂案例——利用JavaScript實(shí)現(xiàn)關(guān)閉網(wǎng)頁 62
4.3 設(shè)置瀏覽器環(huán)境 64
4.3.1 課堂案例——檢查表單 64
4.3.2 檢查插件 65
4.4 對(duì)圖像設(shè)置動(dòng)作 65
4.4.1 課堂案例——制作預(yù)先載入圖像網(wǎng)頁 65
4.4.2 課堂案例——制作交換圖像網(wǎng)頁 67
4.5 課堂練習(xí) 68
4.5.1 課堂練習(xí)1——設(shè)置狀態(tài)欄文本 68
4.5.2 課堂練習(xí)2——轉(zhuǎn)到URL 69
4.5.3 課堂練習(xí)3——制作指定大小的彈出窗口 70
4.6 課后習(xí)題 72
4.7 本章總結(jié) 72
第5章 使用模板和庫(kù)批量制作風(fēng)格統(tǒng)一的網(wǎng)頁 73
5.1 創(chuàng)建模板 74
5.1.1 課堂案例——直接創(chuàng)建模板 74
5.1.2 課堂案例——從現(xiàn)有文檔創(chuàng)建模板 75
5.2 創(chuàng)建可編輯區(qū)域 76
5.2.1 課堂案例——插入可編輯區(qū)域 76
5.2.2 刪除可編輯區(qū)域 77
5.2.3 更改可編輯區(qū)域名稱 77
5.3 創(chuàng)建和管理站點(diǎn)中的模板 78
5.3.1 使用模板創(chuàng)建新網(wǎng)頁 78
5.3.2 課堂案例——將文檔從模板中分離出來 80
5.3.3 課堂案例——修改模板 80
5.4 創(chuàng)建與應(yīng)用庫(kù)項(xiàng)目 81
5.4.1 課堂案例——?jiǎng)?chuàng)建庫(kù)項(xiàng)目 81
5.4.2 課堂案例——應(yīng)用庫(kù)項(xiàng)目 82
5.4.3 課堂案例——修改庫(kù)項(xiàng)目 84
5.5 課堂練習(xí) 84
5.5.1 課堂練習(xí)1——?jiǎng)?chuàng)建模板 84
5.5.2 課堂練習(xí)2——利用模板創(chuàng)建網(wǎng)頁 87
5.6 課后習(xí)題 89
5.7 本章總結(jié) 89
第6章 使用jQuery Mobile和jQuery特效制作網(wǎng)頁 90
6.1 jQuery UI 91
6.1.1 課堂案例——?jiǎng)?chuàng)建Tabs選項(xiàng)卡 91
6.1.2 課堂案例——?jiǎng)?chuàng)建Accordion折疊面板 93
6.1.3 課堂案例——?jiǎng)?chuàng)建Dialog對(duì)話框 94
6.1.4 課堂案例——?jiǎng)?chuàng)建Shake震動(dòng)特效 96
6.2 使用按鈕組件 97
6.2.1 課堂案例——插入按鈕 98
6.2.2 按鈕組的排列 99
6.3 使用表單組件 100
6.3.1 認(rèn)識(shí)表單組件 100
6.3.2 課堂案例——插入文本框 100
6.3.3 課堂案例——插入滑塊 103
6.3.4 課堂案例——插入翻轉(zhuǎn)切換開關(guān) 104
6.3.5 課堂案例——插入單選按鈕 105
6.3.6 課堂案例——插入復(fù)選框 107
6.4 課堂練習(xí)——使用jQuery Mobile創(chuàng)建手機(jī)網(wǎng)頁列表 108
6.5 課后習(xí)題 111
6.6 本章總結(jié) 111
第 2部分 CSS美化布局網(wǎng)頁篇
第7章 使用CSS樣式表美化網(wǎng)頁 112
7.1 了解CSS樣式表 113
7.2 CSS的使用 113
7.2.1 CSS基本語法 113
7.2.2 添加CSS的方法 114
7.3 字體屬性 115
7.3.1 課堂案例——設(shè)置字體font-family 115
7.3.2 課堂案例——設(shè)置字號(hào)font-size 116
7.3.3 課堂案例——設(shè)置字體風(fēng)格font-style 117
7.3.4 課堂案例——設(shè)置字體加粗font-weight 118
7.3.5 課堂案例——設(shè)置字體變形font-variant 119
7.4 段落屬性 120
7.4.1 課堂案例——設(shè)置單詞間隔word-spacing 120
7.4.2 課堂案例——設(shè)置字符間隔letter-spacing 121
7.4.3 課堂案例——設(shè)置文字修飾text-decoration 122
7.4.4 課堂案例——設(shè)置垂直對(duì)齊方式vertical-align 123
7.4.5 課堂案例——設(shè)置文本轉(zhuǎn)換text-transform 124
7.4.6 課堂案例——設(shè)置水平對(duì)齊方式text-align 125
7.4.7 課堂案例——設(shè)置文本縮進(jìn)text-indent 126
7.4.8 課堂案例——設(shè)置文本行高line-height 127
7.5 圖片樣式設(shè)置 127
7.5.1 課堂案例——定義圖片邊框 128
7.5.2 課堂案例——設(shè)置文字環(huán)繞圖片 129
7.6 課堂練習(xí)——設(shè)置網(wǎng)頁背景顏色 130
7.7 課后習(xí)題 131
7.8 本章總結(jié) 131
第8章 使用CSS+DIV布局網(wǎng)頁 132
8.1 初識(shí)DIV 133
8.1.1 DIV概述 133
8.1.2 DIV與span的區(qū)別 133
8.1.3 DIV與CSS的布局優(yōu)勢(shì) 134
8.2 CSS定位 135
8.2.1 盒子模型的概念 135
8.2.2 float定位 135
8.2.3 position定位 137
8.3 CSS布局理念 137
8.3.1 將頁面用DIV分塊 137
8.3.2 設(shè)計(jì)各塊的位置 138
8.3.3 用CSS定位 138
8.4 課堂練習(xí) 139
課堂練習(xí)1——一列固定寬度布局 139
課堂練習(xí)2——一列自適應(yīng)布局 140
課堂練習(xí)3——兩列固定寬度布局 141
課堂練習(xí)4——兩列寬度自適應(yīng)布局 141
課堂練習(xí)5——兩列右列寬度自適應(yīng)布局 142
課堂練習(xí)6——三列浮動(dòng)中間寬度自適應(yīng)布局 143
8.5 課后習(xí)題 144
8.6 本章總結(jié) 144
第3部分 Photoshop CC圖像處理篇
第9章 初識(shí)Photoshop CC 145
9.1 Photoshop CC工作界面 146
9.1.1 菜單欄 146
9.1.2 工具箱及工具選項(xiàng)欄 147
9.1.3 文檔窗口及狀態(tài)欄 147
9.1.4 面板 147
9.2 調(diào)整圖像 148
9.2.1 課堂案例——調(diào)整圖像大小 148
9.2.2 課堂案例——使用色階命令美化圖像 149
9.2.3 課堂案例——使用曲線命令美化圖像 149
9.2.4 課堂案例——調(diào)整圖像亮度與對(duì)比度 150
9.2.5 課堂案例——使用色彩平衡命令調(diào)整圖像 151
9.2.6 課堂案例——調(diào)整圖像色相與飽和度 151
9.3 圖像的優(yōu)化與保存 152
9.3.1 課堂案例——圖像的優(yōu)化 152
9.3.2 課堂案例——保存圖像 153
9.3.3 保存為透明GIF圖像 153
9.4 課堂練習(xí)——制作電影圖片效果 155
9.5 課后習(xí)題 158
9.6 本章總結(jié) 158
第 10章 使用繪圖工具繪制圖像 159
10.1 創(chuàng)建選擇區(qū)域 160
10.1.1 選框工具 160
10.1.2 套索工具 161
10.1.3 魔棒工具 162
10.2 基本繪圖工具 162
10.2.1 課堂案例——使用畫筆工具 162
10.2.2 課堂案例——使用仿制圖章工具 163
10.2.3 課堂案例——使用圖案圖章工具 163
10.2.4 課堂案例——使用橡皮擦工具 164
10.2.5 課堂案例——使用油漆桶工具和漸變工具 165
10.3 形狀工具 166
10.3.1 課堂案例——繪制矩形 166
10.3.2 課堂案例——繪制圓角矩形 166
10.3.3 課堂案例——繪制橢圓 167
10.3.4 課堂案例——繪制多邊形 167
10.4 課堂練習(xí)——制作網(wǎng)站標(biāo)志 168
10.5 課后習(xí)題 170
10.6 本章總結(jié) 170
第 11章 文字、圖層與圖層樣式的使用 171
11.1 創(chuàng)建文字 172
11.1.1 課堂案例——輸入文字并設(shè)置屬性 172
11.1.2 課堂案例——制作立體文字 173
11.2 編輯圖層 175
11.2.1 新建圖層 175
11.2.2 刪除圖層 176
11.2.3 課堂案例——制作網(wǎng)站橫排導(dǎo)航條 176
11.3 使用圖層樣式 177
11.3.1 課堂案例——設(shè)置投影樣式 177
11.3.2 課堂案例——設(shè)置內(nèi)陰影樣式 178
11.3.3 課堂案例——設(shè)置外發(fā)光樣式 180
11.3.4 課堂案例——設(shè)置內(nèi)發(fā)光樣式 181
11.4 課堂練習(xí)——制作立體文字效果 182
11.5 課后習(xí)題 184
11.6 本章總結(jié) 184
第 12章 設(shè)計(jì)制作網(wǎng)頁中的圖像元素 185
12.1 網(wǎng)站Logo的制作 186
12.1.1 網(wǎng)站Logo設(shè)計(jì)指南 186
12.1.2 課堂練習(xí)——設(shè)計(jì)網(wǎng)站Logo 186
12.2 網(wǎng)絡(luò)廣告的制作 188
12.2.1 網(wǎng)絡(luò)廣告設(shè)計(jì)要素 188
12.2.2 課堂練習(xí)——制作網(wǎng)絡(luò)廣告 188
12.3 網(wǎng)頁切片輸出 192
12.3.1 創(chuàng)建切片 192
12.3.2 編輯切片 193
12.3.3 優(yōu)化和輸出切片 194
12.3.4 課堂練習(xí)——切割優(yōu)化首頁 194
12.4 課后習(xí)題 196
12.5 本章總結(jié) 196
第4部分 JavaScript網(wǎng)頁特效和HTML5篇
第 13章 JavaScript腳本基礎(chǔ) 197
13.1 JavaScript簡(jiǎn)介 198
13.2 JavaScript基本語法 198
13.2.1 常量和變量 198
13.2.2 表達(dá)式和運(yùn)算符 199
13.2.3 基本語句 200
13.2.4 函數(shù) 204
13.3 JavaScript的事件 204
13.3.1 課堂案例——利用onClick事件制作全屏網(wǎng)頁 204
13.3.2 課堂案例——利用onChange事件制作彈出警告提示對(duì)話框 205
13.3.3 課堂案例——利用onSelect事件制作下拉列表框 206
13.3.4 課堂案例——利用onFocus事件制作選擇提示對(duì)話框 207
13.3.5 課堂案例——利用onLoad事件制作歡迎提示信息 208
13.3.6 課堂案例——利用onBlur事件制作提示信息 209
13.3.7 課堂案例——利用onMouseOver事件顯示圖像 210
13.3.8 課堂案例——利用onMouseOut事件隱藏圖像 211
13.3.9 課堂案例——利用onDblClick事件雙擊打開網(wǎng)頁 212
13.4 瀏覽器的內(nèi)部對(duì)象 213
13.4.1 課堂案例——利用navigator對(duì)象獲取瀏覽器信息 213
13.4.2 課堂案例——利用document對(duì)象實(shí)現(xiàn)JavaScript的
輸出 214
13.4.3 課堂案例——利用windows對(duì)象制作彈出窗口 215
13.4.4 location對(duì)象 217
13.4.5 課堂案例——利用history對(duì)象制作前進(jìn)和后退按鈕 217
13.5 課堂練習(xí)——制作自動(dòng)關(guān)閉網(wǎng)頁 218
13.6 課后習(xí)題 219
13.7 本章總結(jié) 219
第 14章 HTML5基礎(chǔ) 220
14.1 HTML5簡(jiǎn)介 221
14.1.1 HTML5基礎(chǔ) 221
14.1.2 向后兼容 221
14.1.3 更加簡(jiǎn)化 222
14.1.4 HTML5語法中的3個(gè)要點(diǎn) 222
14.2 新增的主體結(jié)構(gòu)元素 223
14.2.1 課堂案例——article元素 223
14.2.2 課堂案例——section元素 224
14.2.3 課堂案例——nav元素 225
14.2.4 課堂案例——aside元素 226
14.3 canvas元素 227
14.3.1 課堂案例——canvas繪制矩形 227
14.3.2 課堂案例——繪制線條 228
14.4 課堂練習(xí)——使用HTML5制作3D愛心動(dòng)畫 229
14.5 課后習(xí)題 230
14.6 本章總結(jié) 230
第5部分 網(wǎng)站綜合案例篇
第 15章 創(chuàng)建企業(yè)展示型網(wǎng)站 231
15.1 網(wǎng)站前期策劃 232
15.1.1 企業(yè)網(wǎng)站分類 232
15.1.2 企業(yè)網(wǎng)站主要功能頁面 233
15.1.3 企業(yè)網(wǎng)站色彩搭配 234
15.2 設(shè)計(jì)網(wǎng)站首頁 235
15.2.1 首頁的設(shè)計(jì) 235
15.2.2 切割首頁 238
15.3 在Dreamweaver中進(jìn)行頁面排版制作 239
15.3.1 創(chuàng)建本地站點(diǎn) 240
15.3.2 創(chuàng)建二級(jí)模板頁面 240
15.3.3 利用模板制作其他網(wǎng)頁 244
15.4 給網(wǎng)頁添加彈出窗口頁面 246
15.5 本地測(cè)試及發(fā)布上傳 247
15.6 課后習(xí)題 248
15.7 本章總結(jié) 248