第1章 网页设计轻松入门
案例精讲创建我的第一个站点 2
案 / 例 / 描 / 述......................................................................................2
案 / 例 / 详 / 解......................................................................................2
边用边学 6
1.1 网页与网站 ..............................................................................6
1.1.1 认识网页 .........................................................................6
1.1.2 认识网站 .........................................................................8
1.2 网页设计理念 ..........................................................................9
1.2.1 网页配色艺术 ..................................................................9
1.2.2 网页布局艺术 ................................................................15
1.3 初识Dreamweaver设计工具 .............................................18
1.4 文档的基本操作 ....................................................................20
1.4.1 创建空白文档网页 .........................................................20
1.4.2 设置页面属性 ................................................................21
1.5 站点的创建 ............................................................................23
1.6 站点的管理 ............................................................................25
1.7 站点的上传 ............................................................................29
经验之谈测试站点 32
上手实操 33
实操一：网站赏析 ..............................................................................33
实操二：上传站点 ..............................................................................33
第2章 编辑网页的构成元素
案例精讲制作图文混排网页 35
案 / 例 / 描 / 述....................................................................................35
案 / 例 / 详 / 解....................................................................................35
边用边学 38
2.1 创建文本内容 ........................................................................38
2.1.1 输入文本 .......................................................................38
2.1.2 设置文本属性 ................................................................39
2.1.3 添加字体 .......................................................................40
2.2 插入其他元素 ........................................................................41
2.2.1 插入特殊字符 ................................................................41
2.2.2 插入水平线 ....................................................................41
2.3 创建项目列表和编号列表 ...................................................42
2.3.1 项目列表 .......................................................................42
2.3.2 编号列表 .......................................................................42
2.3.3 设置列表属性 ................................................................43
2.4 插入图像 ................................................................................43
2.4.1 网页中常用的图像格式 ..................................................43
2.4.2 插入图像 .......................................................................44
2.4.3 设置图像属性 ................................................................44
2.4.4 插入鼠标经过图像 .........................................................45
2.5 编辑图像 ................................................................................46
2.5.1 裁剪图像 .......................................................................46
2.5.2 重新取样图像 ................................................................47
2.5.3 调整图像亮度和对比度 ..................................................48
2.5.4 锐化图像 .......................................................................49
2.6 插入多媒体 ............................................................................49
2.6.1 插入SWF动画 ...............................................................49
2.6.2 插入FLV视频 .................................................................50
2.6.3 插入背景音乐 ................................................................52
经验之谈 “页面属性”的作用 53
上手实操 57
实操一：制作按钮变化效果 ................................................................57
实操二：制作鸟类繁育网站 ................................................................57
第3章 网页中超链接的创建
案例精讲制作银杏农场网页 59
案 / 例 / 描 / 述....................................................................................59
案 / 例 / 详 / 解....................................................................................59
边用边学 62
3.1 超级链接的概念 ....................................................................62
3.1.1 相对路径 .......................................................................62
3.1.2 绝对路径 .......................................................................62
3.1.3 外部链接和内部链接 ......................................................62
3.2 管理网页超级链接 ................................................................63
3.2.1 自动更新链接 ................................................................63
3.2.2 在站点范围内更改链接 ..................................................64
3.2.3 检查站点中的链接错误 ..................................................65
3.3 在图像中应用链接 ................................................................66
3.3.1 图像链接 .......................................................................66
3.3.2 图像热点链接 ................................................................67
3.3.3 创建图像热点链接 .........................................................67
经验之谈以新窗口打开超链接 69
上手实操 71
实操一：制作风景介绍网页 ................................................................71
实操二：创建下载链接 .......................................................................71
第4章 利用表格布局网页
案例精讲制作公司网站页面 73
案 / 例 / 描 / 述....................................................................................73
案 / 例 / 详 / 解....................................................................................73
边用边学 85
4.1 插入表格 ................................................................................85
4.1.1 与表格有关的术语 .........................................................85
4.1.2 插入表格 .......................................................................85
4.1.3 表格的基本代码 .............................................................86
4.2 表格属性 ................................................................................87
4.2.1 设置表格属性 ................................................................87
4.2.2 设置单元格属性 .............................................................87
4.2.3 改变背景颜色 ................................................................88
4.2.4 表格的属性代码 .............................................................89
4.3 选择表格 ................................................................................90
4.3.1 选择整个表格 ................................................................90
4.3.2 选择一个单元格 .............................................................92
4.4 编辑表格 ................................................................................93
4.4.1 复制和粘贴表格 .............................................................93
4.4.2 添加行或列 ....................................................................95
4.4.3 删除行或列 ....................................................................96
经验之谈合并单元格 97
上手实操 99
实操一：设置表格背景 .......................................................................99
实操二：制作网站首页 .......................................................................99
第5章 HTML基础知识
案例精讲制作网页结构 101
案 / 例 / 描 / 述..................................................................................101
案 / 例 / 详 / 解..................................................................................101
边用边学 103
5.1 认识HTML.........................................................................103
5.2 HTML5的优势 ..................................................................103
5.2.1 强大的交互性 ..............................................................103
5.2.2 使用HTML5的优势 ......................................................104
5.3 HTML5语法 ......................................................................106
5.3.1 文档类型声明 ..............................................................106
5.3.2 字符编码 .....................................................................106
5.3.3 省略引号 .....................................................................107
5.4 HTML5的元素分类 ..........................................................107
5.4.1 结构性元素 ..................................................................107
5.4.2 级块性元素 ..................................................................107
5.4.3 行内语义性元素 ...........................................................108
5.4.4 交互性元素 ..................................................................108
5.5 HTML5中新增的元素 ......................................................108
5.5.1 section元素 .................................................................108
5.5.2 article元素 ................................................................... 110
5.5.3 aside元素 .................................................................... 110
5.5.4 header元素 ................................................................. 111
5.5.5 fhgroup元素 ................................................................ 111
5.5.6 footer元素 ................................................................... 111
5.5.7 nav元素 ....................................................................... 112
5.5.8 figure元素 ................................................................... 112
5.5.9 video元素 .................................................................... 112
5.5.10 audio元素 .................................................................. 113
5.5.11 embed元素 ................................................................ 113
5.5.12 mark元素 .................................................................. 113
5.5.13 progress元素............................................................. 114
5.5.14 meter元素 ................................................................. 114
5.5.15 time元素 .................................................................... 114
5.5.16 wbr元素 ..................................................................... 114
5.5.17 canvas元素 ............................................................... 115
5.5.18 command元素 ........................................................... 115
5.5.19 datalist元素 ............................................................... 115
5.5.20 details元素 ................................................................ 115
5.5.21 datagrid元素 ............................................................. 116
5.5.22 keygen元素 ............................................................... 116
5.5.23 output元素 ................................................................ 116
5.5.24 source元素 ................................................................ 116
5.5.25 menu元素 ................................................................. 116
经验之谈使用记事本制作HTML文件 117
上手实操 119
实操一：使用HTML制作列表 ............................................................ 119
实操二：使用Dreamweaver软件生成HTML代码 ...............................120
第6章 利用CSS美化网页
案例精讲美化家居网页 122
案 / 例 / 描 / 述..................................................................................122
案 / 例 / 详 / 解..................................................................................122
边用边学 128
6.1 了解CSS ..............................................................................128
6.1.1 CSS的定义..................................................................128
6.1.2 CSS的设置..................................................................131
6.2 使用CSS ..............................................................................137
6.2.1 外联样式表 ..................................................................137
6.2.2 内嵌样式表 ..................................................................139
6.3 常用网页样式 ......................................................................140
6.3.1 字体样式 .....................................................................140
6.3.2 段落样式 .....................................................................142
6.3.3 边框样式 .....................................................................144
6.3.4 外轮廓 .........................................................................148
6.3.5 列表相关属性 ..............................................................150
经验之谈使用CSS缩写 152
上手实操 153
实操一：排版网页 ............................................................................153
实操二：替换网页背景 .....................................................................153
第7章 利用Div+CSS布局网页
案例精讲制作美味西餐厅网页 155
案 / 例 / 描 / 述..................................................................................155
案 / 例 / 详 / 解..................................................................................155
边用边学 163
7.1 CSS与Div布局基础 ...........................................................163
7.1.1 什么是Web标准 ...........................................................163
7.1.2 Div概述 .......................................................................163
7.1.3 创建Div .......................................................................164
7.2 CSS布局方法 ......................................................................165
7.2.1 盒模型 .........................................................................166
7.2.2 使用Div布局 ................................................................167
经验之谈制作首字下沉效果 172
上手实操 174
实操一：制作个人主页 .....................................................................174
实操二：制作公司网站 .....................................................................174
第8章 利用canvas绘制图形
案例精讲使用canvas绘制简单图形 176
案 / 例 / 描 / 述..................................................................................176
案 / 例 / 详 / 解..................................................................................176
边用边学 180
8.1 canvas入门 .........................................................................180
8.1.1 canvas含义 .................................................................180
8.1.2 canvas坐标 .................................................................180
8.2 使用canvas .........................................................................181
8.2.1 在页面中加入canvas ...................................................181
8.2.2 绘制矩形和五角形 .......................................................183
8.2.3 检测浏览器是否支持 ....................................................186
8.3 绘制曲线路径 ......................................................................187
8.3.1 绘制路径的方法 ...........................................................187
8.3.2 描边的样式使用 ...........................................................189
8.3.3 填充和曲线的绘制方法 ................................................190
8.4 绘制图像 ..............................................................................192
8.4.1 使用canvas插入图片 ...................................................192
8.4.2 渐变颜色的使用 ...........................................................194
8.4.3 变形图形的设置方法 ....................................................196
8.4.4 组合图形的绘制方法 ....................................................197
8.4.5 使用canvas绘制文字 ...................................................198
经验之谈清除绘图 200
上手实操 202
实操一：绘制矩形旋转对象 ..............................................................202
实操二：制作镂空文字 .....................................................................202
第9章 利用表单创建动态网页
案例精讲制作社区人员信息采集表 205
案 / 例 / 描 / 述..................................................................................205
案 / 例 / 详 / 解..................................................................................205
边用边学 214
9.1 使用表单 ..............................................................................214
9.1.1 认识表单 .....................................................................214
9.1.2 常见表单 .....................................................................214
9.2 基本表单元素 ......................................................................215
9.2.1 文本 ............................................................................215
9.2.2 文本区域 .....................................................................216
9.2.3 密码 ............................................................................216
9.2.4 单选按钮和单选按钮组 ................................................217
9.2.5 复选框和复选框组 .......................................................217
9.2.6 选择 ............................................................................218
9.2.7 “ 提交”按钮和“重置”按钮 .......................................218
经验之谈自动完成输入属性 219
上手实操 221
实操一：制作注册页面 .....................................................................221
实操二：制作登录界面 .....................................................................221
第10章 网页行为的应用
案例精讲优化花卉市场网页 223
案 / 例 / 描 / 述..................................................................................223
案 / 例 / 详 / 解..................................................................................223
边用边学 226
10.1 什么是行为 ........................................................................226
10.1.1 行为 ........................................................................226
10.1.2 事件 ........................................................................227
10.1.3 常见事件的使用 ......................................................227
10.2 利用行为调节浏览器窗口 ...............................................230
10.2.1 打开浏览器窗口 ......................................................230
10.2.2 调用脚本 .................................................................231
10.2.3 转到URL .................................................................232
10.3 利用行为制作图像特效 ...................................................232
10.3.1 交换图像与恢复交换图像 ........................................232
10.3.2 预先载入图像 ..........................................................234
10.3.3 拖动AP元素 ............................................................234
10.4 利用行为显示文本 ...........................................................235
10.4.1 弹出信息 .................................................................235
10.4.2 设置状态栏文本 ......................................................236
10.4.3 设置容器的文本 ......................................................236
10.4.4 设置文本域文字 ......................................................237
10.5 利用行为控制表单 ...........................................................237
10.5.1 “ 跳转菜单”行为 .....................................................237
10.5.2 “ 检查表单”行为 .....................................................238
经验之谈“跳转菜单开始”行为 239
上手实操 240
实操一：制作网页弹出信息 ..............................................................240
实操二：制作交换图像效果 ..............................................................240
第11章 网页模板和库的应用
案例精讲制作室内设计网页 242
案 / 例 / 描 / 述..................................................................................242
案 / 例 / 详 / 解..................................................................................242
边用边学 250
11.1 创建模板 ............................................................................250
11.1.1 创建空模板 ..............................................................250
11.1.2 从现有网页创建模板 ................................................251
11.1.3 创建和取消可编辑区域 ............................................252
11.2 管理和使用模板 ................................................................253
11.2.1 应用模板 .................................................................253
11.2.2 从模板中分离 ..........................................................254
11.2.3 更新模板文件 ..........................................................255
11.2.4 创建可选区域 ..........................................................256
11.3 创建和使用库 ....................................................................256
11.3.1 创建库项目 ..............................................................256
11.3.2 插入库项目 ..............................................................257
11.3.3 编辑和更新库项目 ...................................................258
经验之谈巧用“资源”面板 259
上手实操 260
实操一：创建网页模板 .....................................................................260
实操二：创建库项目 .........................................................................260