網頁設計與制作(微課版)Dreamweaver CC+HTML5+CSS3
姜勇
商品描述
全書結構編排合理,所選案例貼合實際需求,易教易學。全書共12章,內容包括Dreamweaver CC基礎入門、
站點的創建與管理、HTML5的基礎知識、創建 HTML5 網頁中的文本與圖像、創建 HTML5 網頁中的表格與表單、
創建 HTML5 中的超鏈接、在 HTML5 網頁中添加音頻與視頻、CSS3 基礎、CSS3 中的屬性設置、使用CSS3 設置
表格與表單樣式、使用CSS+Div布局網頁、綜合案例——制作餐飲美食網站。
本書不僅適合作為高等院校相關專業的教材,也適合作為社會各類網頁設計訓的參考用書。
作者簡介
本書可作為高等院校數字媒體技術、數字媒體藝術、計算機科學與技術等相關專業的教材或教學參考書,也可供各類培訓、網頁設計從業人員參考使用
目錄大綱
第1章
Dreamweaver CC基礎入門
001
1.1 了解網頁與網站....................... 002
1.1.1 網頁....................................................002
1.1.2 網頁與網站的關系............................003
1.2 網絡基本術語..........................003
1.2.1 域名....................................................003
1.2.2 HTTP................................................003
1.2.3 FTP....................................................003
1.2.4 超鏈接................................................003
1.2.5 站點....................................................004
1.3 常見的網站類型......................004
1.3.1 門戶網站............................................004
1.3.2 企業網站............................................004
1.3.3 個人網站............................................005
1.3.4 娛樂網站............................................005
1.3.5 機構網站............................................005
1.3.6 電子商務網站....................................005
1.4 Dreamweaver CC的啟動與退出......006
1.4.1 啟動Dreamweaver CC....................006
1.4.2 退出Dreamweaver CC....................007
1.5 Dreamweaver CC的工作界面.......007
1.5.1 菜單欄................................................007
1.5.2 工具欄................................................007
1.5.3 文檔窗口............................................008
1.5.4 “屬性”面板....................................008
1.5.5 面板組................................................008
1.6 設置首選參數..........................009
1.6.1 常規參數............................................009
1.6.2 代碼格式............................................010
1.6.3 代碼顏色............................................ 011
1.6.4 復制/粘貼.......................................... 012
1.6.5 在瀏覽器中預覽................................ 012
1.6.6 字體.................................................... 013
1.7 可視化輔助工具...................... 014
1.7.1 標尺工具............................................ 014
1.7.2 網格工具............................................ 015
1.7.3 輔助線工具........................................ 015
第2章
站點的創建與管理
017
2.1 站點的規劃............................. 018
2.2 站點面板............................... 018
2.2.1 課堂案例——創建我的第一個站點...... 0182.2.2 了解站點面板....................................020
2.3 導出和導入站點...................... 021
2.3.1 導出站點............................................ 021
2.3.2 導入站點............................................ 022
2.4 管理站點............................... 022
2.4.1 課堂案例——管理網頁文檔............ 023
2.4.2 編輯站點............................................ 024
2.4.3 復制站點............................................ 026
2.4.4 刪除站點............................................ 026
第3章
HTML5的基礎知識
028
3.1 HTML5概述.......................... 029
3.1.1 課堂案例——編寫HTML5.............. 029
3.1.2 HTML簡介........................................ 031
3.1.3 HTML的基本結構............................ 031
3.2 HTML的常用標簽.................. 033
3.2.1 課堂案例——輸入古詩.................... 033
3.2.2 ................................ 034
3.2.3
............................... 0343.2.4
............................... 0353.2.5
3.2.6
3.2.7
................................................... 036
3.2.8
...
......................................... 0363.2.9
3.3 練習案例...............................038
3.3.1 練習案例——網頁排版.................... 038
3.3.2 練習案例——網頁內容居中顯示.....040
第4章
創建HTML5網頁中的文本
與圖像
041
4.1 網頁中的文本......................... 042
4.1.1 課堂案例——輸入文本並設置顏色
............................................................ 042
4.1.2 設置文字字號.................................... 043
4.1.3 設置文字的字體與樣式.................... 043
4.1.4 設置字體的顏色................................ 045
4.1.5 文本的上標和下標............................ 046
4.1.6 插入特殊字符.................................... 047
4.1.7 列表.................................................... 048
4.2 水平線..................................050
4.2.1 課堂案例——在網頁中插入水平線
............................................................050
4.2.2 水平線標簽
............................... 051
4.3 網頁中的圖像......................... 053
4.3.1 課堂案例——在網頁中插入圖像
............................................................ 053
4.3.2 圖像的基本格式................................ 054
4.3.3 設置圖像屬性.................................... 055
4.3.4 設置圖像與網頁文字的對齊方式
............................................................ 056
4.3.5 設置圖像與文字之間的距離............ 058
4.3.6 圖形按鈕(圖像鏈接)...................... 059
4.4 練習案例...............................060
4.4.1 練習案例——將圖像設置為網頁背景
............................................................060
4.4.2 練習案例——金魚餵養問答網頁...... 061第5章
創建HTML5網頁中的表
格與表單
063
5.1 表格......................................064
5.1.1 課堂案例——創建網頁中的表格...... 064
5.1.2 表格的標題........................................ 065
5.1.3 表格的尺寸........................................ 067
5.1.4 表格的邊框尺寸................................ 067
5.1.5 表格的間距調整................................ 068
5.1.6 表格內容與邊框之間的填充寬度..... 069
5.1.7 表格中數據的對齊方式....................070
5.1.8 創建跨多行多列的單元格................ 071
5.2 表單..................................... 072
5.2.1 課堂案例——制作在線調查表........ 072
5.2.2 表單概述............................................ 076
5.2.3 文本域................................................ 077
5.2.4 密碼域................................................ 077
5.2.5 單選按鈕............................................ 077
5.2.6 復選框................................................ 078
5.2.7 表單按鈕............................................ 078
5.3 練習案例............................... 079
5.3.1 練習案例——制作導航欄................ 079
5.3.2 練習案例——制作註冊網頁............080
第6章
創建HTML5中的超鏈接
084
6.1 設置超鏈接.............................085
6.1.1 課堂案例——在新窗口中打開網頁..... 085
6.1.2 創建超鏈接........................................ 085
6.1.3 URL.................................................... 086
6.1.4 超鏈接路徑........................................ 086
6.2 圖像鏈接與下載鏈接................087
6.2.1 課堂案例——單擊小圖查看大圖
............................................................ 087
6.2.2 圖像鏈接............................................ 088
6.2.3 下載鏈接............................................ 088
6.3 錨點鏈接...............................089
6.4 電子郵件鏈接.........................089
6.5 練習案例...............................089
6.5.1 練習案例——返回網頁頂部............089
6.5.2 練習案例——精美壁紙下載............090
第7章
在HTML5網頁中添加音頻
與視頻
092
7.1 添加音頻................................093
7.1.1 課堂案例——插入音頻文件............ 093
7.1.2
7.1.3 添加自動播放的音頻文件................ 094
7.1.4 添加帶有控件的音頻文件................ 094
7.1.5 添加循環播放的音頻文件................ 094
7.2 添加視頻...............................095
7.2.1 課堂案例——插入視頻文件............ 095
7.2.2
7.2.3 添加自動播放的視頻文件................ 096
7.2.4 添加帶有控件的視頻文件................ 0967.2.5 添加循環播放的視頻文件................ 096
7.2.6 為視頻添加封面................................ 097
7.3 練習案例...............................098
7.3.1 練習案例——制作音樂網頁............098
7.3.2 練習案例——制作視頻網頁............ 101
第8章
CSS3基礎
103
8.1 CSS3概述............................. 104
8.1.1 課堂案例——編寫CSS..................... 104
8.1.2 CSS簡介............................................. 105
8.1.3 CSS的優越性..................................... 105
8.1.4 CSS3的基本語法............................... 105
8.1.5 CSS樣式的類型................................. 106
8.2 CSS的語法結構..................... 107
8.2.1 課堂案例——定義網頁的背景顏色與
字體.................................................... 107
8.2.2 CSS的語法結構概述......................... 109
8.2.3 常用的CSS選擇符............................. 110
8.3 添加CSS...............................114
8.3.1 課堂案例——調用外部CSS............. 114
8.3.2 添加CSS的方式................................. 115
8.3.3 常用的元素........................................ 116
8.4 練習案例................................117
8.4.1 練習案例——制作下拉菜單............ 117
8.4.2 練習案例——商品圖像的特殊效果
............................................................ 120
第9章
CSS3中的屬性設置
123
9.1 CSS中的字體以及文本控制...... 124
9.1.1 課堂案例——指定文字字體與添加下
畫線.................................................... 124
9.1.2 字體屬性............................................ 124
9.1.3 文本屬性............................................ 126
9.2 CSS中的顏色及背景控制..........127
9.2.1 課堂案例——設置網頁背景圖像.... 127
9.2.2 對顏色屬性的控制............................ 128
9.2.3 對背景顏色的控制............................ 128
9.2.4 對背景圖像的控制............................ 129
9.2.5 對背景圖像重復的控制.................... 129
9.2.6 對背景圖像固定的控制.................... 129
9.2.7 對背景定位的控制............................ 129
9.3 CSS中的方框控制屬性............ 130
9.3.1 外邊距................................................ 130
9.3.2 邊框.................................................... 131
9.3.3 內容.................................................... 131
9.4 CSS中的分類屬性...................132
9.4.1 課堂案例——設置網頁目錄............ 132
9.4.2 目錄樣式............................................ 133
9.4.3 display............................................... 133
9.4.4 white-space..................................... 134
9.4.5 list-style-type................................. 134
9.4.6 list-style-image.............................. 134
9.4.7 cursor................................................ 1359.5 練習案例............................... 136
9.5.1 練習案例——制作文字特效............ 136
9.5.2 練習案例——制作導航特效............ 138
第10章
使用CSS3設置表格與表單
樣式
141
10.1 設置表格樣式........................ 142
10.1.1 課堂案例——創建細線表格......... 142
10.1.2 設置表格顏色................................. 144
10.1.3 設置表格邊框................................. 148
10.1.4 設置表格的內邊距......................... 150
10.1.5 設置圓角邊框................................. 152
10.2 設置表單樣式........................ 153
10.2.1 課堂案例——制作登錄頁面......... 154
10.2.2 設置輸入框..................................... 155
10.2.3 設置表單按鈕................................. 157
10.3 練習案例.............................. 158
10.3.1 練習案例——制作隔行變色的表格
.......................................................... 159
10.3.2 練習案例——制作購物付款頁面
.......................................................... 162
第11章
使用CSS+Div布局網頁
167
11.1 CSS與Div布局基礎............... 168
11.1.1 Web標準......................................... 168
11.1.2 Web標準的構成............................. 168
11.1.3 Div概述........................................... 168
11.2 使用Div............................... 169
11.2.1 課堂案例——在Div中插入圖像.... 169
11.2.2 創建Div........................................... 170
11.2.3 選擇Div........................................... 171
11.3 Div+CSS盒模型....................172
11.3.1 盒模型的概念................................. 172
11.3.2 外邊距............................................. 172
11.3.3 邊框................................................. 175
11.3.4 課堂案例——文字虛線分割......... 176
11.3.5 內邊距............................................. 176
11.4 Div+CSS布局定位................ 177
11.4.1 相對定位......................................... 177
11.4.2 絕對定位......................................... 178
11.4.3 浮動定位......................................... 178
11.5 Div+CSS布局理念................ 182
11.5.1 使用Div對頁面進行分塊................ 182
11.5.2 設計各塊的位置.............................. 182
11.5.3 用CSS進行定位............................... 182
11.6 常用的布局方式..................... 183
11.6.1 居中布局方式.................................. 183
11.6.2 浮動布局方式.................................. 184
11.7 練習案例.............................. 187
11.7.1 練習案例——使用Div布局織品網頁
.......................................................... 188
11.7.2 練習案例——使用Div+CSS布局飲第12章
綜合案例——制作餐飲美食
網站
194
12.1 設計分析.............................. 195
12.2 創建站點.............................. 195
12.3 創建CSS文件....................... 196
12.4 制作頭部內容........................ 197
12.5 制作主體內容........................ 200
12.6 制作底部內容........................ 206
品公司網頁...................................... 190