第1章 网页设计基础 1
1.1 万维网概述 2
1.2 HTML 的概念 2
1.3 HTML 开发组织 2
1.4 网页设计相关概念 2
1.4.1 超链接 3
1.4.2 统一资源定位器 3
1.4.3 网站 3
1.4.4 网页 3
1.4.5 首页 3
1.5 网页的开发工具和浏览工具 3
1.5.1 网页开发工具 3
1.5.2 网页浏览工具 5
1.5.3 Dreamweaver 的使用 6
1.6 网页制作相关技术 7
1.6.1 客户端应用技术 7
1.6.2 服务器端应用技术 9
小结 10
习题 10
第2章 初识HTML 11
2.1 HTML 概述 12
2.1.1 HTML 发展历史 12
2.1.2 HTML 文件基本结构 12
2.1.3 使用Dreamweaver 创建一个HTML5 页面 13
实例:使用Dreamweaver 实现网页导航
2.2 文字标签 15
2.2.1 显示普通文字 15
2.2.2 输入特殊符号 15
2.2.3 标题字标签 15
2.2.4 修饰文字标签 15
2.2.5 修饰字体标签 16
实例:呈现网页中的商品详情信息
2.3 段落标签 17
2.3.1 段落标签 17
2.3.2 取消文字换行标签 17
2.3.3 修饰段落的对齐属性align 17
实例:显示一则网页中的打折促销广告
2.3.4 保留原始排版标签 18
实例:使用字母“o”组成“元旦快乐”四个字
2.4 图片标签与列表标签 19
2.4.1 插入图片标签 19
2.4.2 建立有序列表 19
实例:制作网页版心理测试问卷
2.4.3 建立无序列表 22
实例:实现51 购商场中的商品详情简介
2.4.4 建立定义列表 23
实例:应用定义列表展示商品内容
2.5 链接标签 25
2.5.1 建立文本链接 25
2.5.2 建立书签链接 26
实例:实现在网页中添加书签链接
小结 28
上机指导 28
习题 30
第3章 HTML 中的表格 31
3.1 绘制表格 32
3.1.1 设置表格的标题 32
3.1.2 设置表格的宽度和高度 32
3.1.3 设置表格的边框色 33
3.1.4 设置表格的对齐方式 33
3.1.5 设置表格的背景颜色 33
实例:实现商品页面
3.1.6 设置表格的背景图片 34
实例:利用表格实现商品列表并
设置背景图片
3.2 行标签的属性 35
3.2.1 设置行的高度 35
3.2.2 设置行的边框颜色 36
3.2.3 设置行的背景颜色 36
3.2.4 设置行的水平位置 36
3.2.5 设置行的垂直位置 36
实例:实现商城的商品布局
3.3 单元格标签的属性 38
3.3.1 设置单元格的大小 38
3.3.2 设置单元格的水平对齐属性 38
3.3.3 设置单元格的垂直对齐属性 39
3.3.4 设置单元格的水平跨度 39
3.3.5 设置单元格的垂直跨度 40
3.3.6 设置单元格的背景色 41
3.3.7 设置单元格的背景图片 41
3.3.8 单元格属性综合运用 41
实例:商场的手机商品页面
3.4 表头标签的属性 42
3.5 表格的结构标签 43
3.5.1 设置表首样式 43
3.5.2 设置表主体样式 44
3.5.3 设置表尾样式 45
小结 46
上机指导 46
习题 48
第1章 网页设计基础 1 1.1 万维网概述 2 1.2 HTML 的概念 2 1.3 HTML 开发组织 2 1.4 网页设计相关概念 2 1.4.1 超链接 3 1.4.2 统一资源定位器 3 1.4.3 网站 3 1.4.4 网页 3 1.4.5 首页 3 1.5 网页的开发工具和浏览工具 3 1.5.1 网页开发工具 3 1.5.2 网页浏览工具 5 1.5.3 Dreamweaver 的使用 6 1.6 网页制作相关技术 7 1.6.1 客户端应用技术 7 1.6.2 服务器端应用技术 9 小结 10 习题 10 第2章 初识HTML 11 2.1 HTML 概述 12 2.1.1 HTML 发展历史 12 2.1.2 HTML 文件基本结构 12 2.1.3 使用Dreamweaver 创建一个HTML5 页面 13 实例:使用Dreamweaver 实现网页导航 2.2 文字标签 15 2.2.1 显示普通文字 15 2.2.2 输入特殊符号 15 2.2.3 标题字标签 15 2.2.4 修饰文字标签 15 2.2.5 修饰字体标签 16 实例:呈现网页中的商品详情信息 2.3 段落标签 17 2.3.1 段落标签 17 2.3.2 取消文字换行标签 17 2.3.3 修饰段落的对齐属性align 17 实例:显示一则网页中的打折促销广告 2.3.4 保留原始排版标签 18 实例:使用字母“o”组成“元旦快乐”四个字 2.4 图片标签与列表标签 19 2.4.1 插入图片标签 19 2.4.2 建立有序列表 19 实例:制作网页版心理测试问卷 2.4.3 建立无序列表 22 实例:实现51 购商场中的商品详情简介 2.4.4 建立定义列表 23 实例:应用定义列表展示商品内容 2.5 链接标签 25 2.5.1 建立文本链接 25 2.5.2 建立书签链接 26 实例:实现在网页中添加书签链接 小结 28 上机指导 28 习题 30 第3章 HTML 中的表格 31 3.1 绘制表格 32 3.1.1 设置表格的标题 32 3.1.2 设置表格的宽度和高度 32 3.1.3 设置表格的边框色 33 3.1.4 设置表格的对齐方式 33 3.1.5 设置表格的背景颜色 33 实例:实现商品页面 3.1.6 设置表格的背景图片 34 实例:利用表格实现商品列表并 设置背景图片 3.2 行标签的属性 35 3.2.1 设置行的高度 35 3.2.2 设置行的边框颜色 36 3.2.3 设置行的背景颜色 36 3.2.4 设置行的水平位置 36 3.2.5 设置行的垂直位置 36 实例:实现商城的商品布局 3.3 单元格标签的属性 38 3.3.1 设置单元格的大小 38 3.3.2 设置单元格的水平对齐属性 38 3.3.3 设置单元格的垂直对齐属性 39 3.3.4 设置单元格的水平跨度 39 3.3.5 设置单元格的垂直跨度 40 3.3.6 设置单元格的背景色 41 3.3.7 设置单元格的背景图片 41 3.3.8 单元格属性综合运用 41 实例:商场的手机商品页面 3.4 表头标签的属性 42 3.5 表格的结构标签 43 3.5.1 设置表首样式 43 3.5.2 设置表主体样式 44 3.5.3 设置表尾样式 45 小结 46 上机指导 46 习题 48 第4章 使用HTML 创建表单 49 4.1 表单概述 50 4.2 表单标签 50 4.2.1 处理程序属性—action 50 4.2.2 表单名称属性—name 51 4.2.3 传送方法属性—method 51 4.2.4 编码方式属性—enctype 52 4.2.5 目标显示方式属性—target 53 4.3 输入标签 53 4.3.1 文本框—text 53 实例:实现51 购商城的登录界面账号文本框 4.3.2 密码域—password 54 实例:实现51 购商场的登录界面的密码域 4.3.3 “单SHOU*选”按钮—radio 56 实例:实现51 购商城的购买页面中SHOU*选择颜色的单SHOU*选按钮 4.3.4 复SHOU*选框—checkbox 57 实例:实现51 购商城的购物车界面SHOU*选择所要结算商品的复SHOU*选框 4.3.5 “普通”按钮—button 58 实例:实现51 购商城购买页面中加入购物车”和“立即购买”按钮 4.3.6 “提交”按钮—submit 59 实例:实现51 购商城的“提交”按钮 4.3.7 “重置”按钮—reset 60 实例:实现个人信息表重置 4.3.8 图像域—image 61 实例:实现商城的客服中心页面“和我联系”按钮 4.3.9 隐藏域—hidden 62 4.3.10 文件域—file 63 实例:实现商城的个人中心上传头像 4.4 文本域标签—textarea 64 实例:实现商城评价页面输入评价框 4.5 列表/菜单标签 65 实例:实现商城添加收货地址页面输入电话和地址的下拉菜单 4.6 HTML5 新增表单属性 66 小结 70 上机指导 70 习题 72 第5章 使用图像 73 5.1 图片的基本格式 74 5.2 添加图像—img 74 实例:通过 标签添加图像,实现51 购商城首页的一个版块 5.3 设置图像属性 75 5.3.1 图像高度—height 75 实例:通过图像高度属性,实现51购商品详情里同一张图片的不同高度 5.3.2 图像宽度—width 76 实例:通过图像宽度属性,实现51购商品详情里同一张图片的不同宽度 5.3.3 图像边框—border 77 实例:通过图像边框属性,为图像添加边框 5.3.4 图像水平间距—hspace 78 实例:通过图像水平间距属性,为图像设置水平间距 5.3.5 图像垂直间距—vspace 79 实例:通过图像垂直间距属性,为图像设置垂直间距 5.3.6 图像相对于文字基准线的对齐方式—align 80 实例:通过align 属性,实现玫瑰的生长过程 5.3.7 图像的提示文字—title 81 实例:通过图像提示文字属性,实现鼠标放到图片上时出现提示文字 5.3.8 图像的替换文字—alt 82 实例:通过图像替换文字属性,为图像添加替换文字 5.4 使用 标签插入avi 文件 83 5.4.1 avi 的源文件属性—dynsrc 83 实例:通过 标签的dynsrc属性向页面中插入一个avi格式的视频文件 5.4.2 设定avi 文件循环次数属性—loop 84 实例:通过 标签的dynsrc 属性向页面中插入一个avi 格式的视频文件,并通过loop 属性设置avi 文件的循环次数 5.4.3 设定avi 文件播放方式属性—start 84 实例:通过 标签的dynsrc属性向页面中插入一个avi 格式的视频文件,并通 过start 属性设置avi 文件的播放方式 5.5 图像的超链接 86 5.5.1 设置图像的超链接 86 实例:给图像添加超链接实现51购商城中的手机展示功能 5.5.2 设置图像热区链接 87 实例:在图片中添加热区链接 小结 89 上机指导 89 习题 91 第6章 走进HTML 的多媒体世界 92 6.1 设置滚动文字 93 6.1.1 滚动文字标签—marquee 93 6.1.2 滚动方向属性—direction 93 6.1.3 滚动方式属性—behavior 94 实例:实现从不同方向,以不同方式滚动的商城的促销信息展示 6.1.4 滚动速度属性—scrollamount 95 6.1.5 滚动延迟属性—scrolldelay 95 6.1.6 滚动循环属性——loop 96 实例:实现以不同的滚动速度,滚动延迟以及滚动循环次数展 示的商城的促销信息 6.1.7 滚动范围属性—width、height 97 6.1.8 滚动背景颜色属性—bgcolor 97 实例:实现以不同的滚动范围、滚动背景颜色的商城的促销信 息展示 6.1.9 滚动空间属性—hspace、vspace 98 6.2 标签和标签 99 6.3 多媒体标签的基本属性及使用 100 6.3.1 多媒体标签基本属性 100 6.3.2 使用标签播放音频 103 实例:实现51 购商城商品详情页面的音乐播放 6.3.3 使用标签播放视频 104 实例: 使用标签播放一段广告视频 6.3.4 设置背景音乐—bgsound 104 6.4 多媒体标签的方法 105 实例:实现通过多媒体标签提供的方法控制视频的播放 6.5 多媒体标签的事件 107 6.5.1 事件处理 107 6.5.2 事件介绍 107 小结 108 上机指导 108 习题 109 第7章 CSS 概述 110 7.1 CSS 的发展史 111 7.2 CSS3 新特性 111 7.3 主流浏览器对CSS 的支持 112 7.4 一个简单的CSS 示例 113 实例:实现背景切换和鼠标滑过展开图片的效果 小结 115 习题 115 第8章 CSS 中的SHOU*选择器 116 8.1 SHOU*选择器概述 117 8.2 基础SHOU*选择器 118 8.2.1 元素SHOU*选择器 118 8.2.2 类SHOU*选择器 118 8.2.3 ID SHOU*选择器 119 8.2.4 属性SHOU*选择器 119 实例:实现51 购商城首页的手机风暴版块 8.3 其他SHOU*选择器 123 8.3.1 后代SHOU*选择器 123 8.3.2 子代SHOU*选择器 123 8.3.3 相邻兄弟元素SHOU*选择器 124 8.3.4 通用兄弟元素SHOU*选择器 124 实例:实现一个商城首页的爆款特卖版块 8.4 伪类SHOU*选择器及伪元素 126 8.4.1 伪类SHOU*选择器 126 8.4.2 伪元素SHOU*选择器 127 实例:实现商城分类版块界面 小结 128 上机指导 129 习题 131 第9章 CSS 常用属性 132 9.1 文本相关属性 133 9.1.1 文字 133 实例:实现商城商品抢购页面 9.1.2 文本 137 实例:演示word-break 属性的功能 9.1.3 设置超链接样式 139 实例:实现为商品描述信息设置链接样式 9.2 背景相关属性 140 9.2.1 背景常规属性 140 实例:实现为51 购商城的登录页面添加背景图片 9.2.2 CSS3 新特性 142 实例:演示background-clip属性值间的区别 9.3 列表相关属性 147 实例:实现使用无序列表标签制作导航栏 9.4 框模型 149 9.4.1 概述 149 9.4.2 内外边距的相关属性 150 实例:实现在商品详情页面,设置标签的内外边距 9.4.3 边框 152 9.5 定位相关属性 153 9.5.1 概述 153 9.5.2 设置定位方式 153 实例:应用相对定位设置标签的定位方式,并随鼠标滑动呈现相应内容 9.5.3 浮动 155 实例:在商品详情页面,标签设置向左浮动 小结 156 上机指导 156 习题 158 第10章 CSS3 中的变形与动画 159 10.1 2D 变换—transform 160 10.1.1 transform 的基本属性值 160 10.1.2 应用transform 属性实现旋转 161 10.1.3 应用transform 属性实现缩放 161 10.1.4 应用transform 属性实现平移 162 10.1.5 应用transform 属性实现倾斜 163 实例:实现不同的商品图片旋转、缩放、平移、倾斜的效果 10.1.6 变形原点 166 10.2 过渡效果—transition 167 10.2.1 指定参与过渡的属性 167 10.2.2 指定过渡的持续时间 167 10.2.3 指定过渡的延迟时间 168 10.2.4 指定过渡的动画类型 168 实例:利用transition 属性实现4 种不同的动态效果 10.3 动画—Animation 173 10.3.1 关键帧 173 10.3.2 动画属性 174 实例:实现51 购商城中商品详情里滚动播出广告 小结 176 上机指导 176 习题 177 第11章 概述 178 11.1 概貌 179 11.1.1 的历史 179 11.1.2 的主要特点 179 11.1.3 成功案例 180 11.2 开发环境要求 182 11.2.1 硬件要求 182 11.2.2 软件要求 182 11.3 在HTML 中的使用 183 11.3.1 在页面中直接嵌入 183 11.3.2 链接外部 184 实例:使用 脚本显示DANG*当前的时间 小结 185 上机指导 185 习题 187 第12章 基础 188 12.1 数据结构 189 12.1.1 标识符 189 12.1.2 关键字 189 12.1.3 常量 190 12.1.4 变量 190 12.2 数据类型 191 12.2.1 数字型数据 192 12.2.2 字符串型数据 193 12.2.3 布尔型数据 193 12.2.4 特殊数据类型 194 12.2.5 数据类型的转换规则 195 实例:输出 常用数据类型 12.3 运算符与表达式 197 12.3.1 算术运算符 198 12.3.2 比较运算符 198 12.3.3 赋值运算符 198 12.3.4 字符串运算符 199 12.3.5 布尔运算符 199 12.3.6 条件运算符 200 12.3.7 运算符优先级 200 12.3.8 表达式 200 实例:使用 制作一个简单的计算器 12.4 流程控制语句 203 12.4.1 条件控制语句 203 实例:实现51 购商城登录界面九九乘法表 12.4.2 循环控制语句 209 实例:使用 语法实现九九乘法表 12.4.3 跳转语句 212 12.5 函数 213 12.5.1 函数的定义 213 12.5.2 函数的调用 214 实例:51 购商品详情页面调用 函数 12.5.3 几种特殊的函数 217 小结 219 上机指导 219 习题 220 第13章 对象编程 221 13.1 Window 窗口对象 222 13.1.1 Window 对象 222 13.1.2 对话框(Dialog) 223 实例:使用HTML 语法,在页面中显示Window 对象常用对话框 13.1.3 窗口对象常用操作 226 13.2 Document 文档对象 229 13.2.1 文档对象概述 229 13.2.2 文档对象的常用属性、方法与事件 230 13.2.3 Document 对象的应用 231 实例:使用HTML 语法,讲解Document 文档对象 13.3 与表单操作 237 13.3.1 在 中访问表单 237 13.3.2 在 中访问表单域 237 13.3.3 表单的验证 237 实例:实现51 购商城注册界面的验证 13.4 DOM 对象 239 13.4.1 DOM 概述 239 13.4.2 DOM 对象节点属性 241 13.4.3 节点的几种操作 242 13.4.4 获取文档中的指定元素 243 实例:实现51 购商城收货地址界面,收货地址的删除和复制 13.4.5 与DHTML 相对应的DOM 245 小结 246 上机指导 246 习题 248 第14章 中的事件处理 249 14.1 事件与事件处理概述 250 14.1.1 事件与事件名称 250 14.1.2 的常用事件 250 14.1.3 事件处理程序的调用 252 实例:使用键盘事件实现随机抽取电话号码 14.2 DOM 事件模型 254 14.2.1 事件流 254 14.2.2 主流浏览器的事件模型 254 14.2.3 事件对象 255 14.2.4 注册与移除事件监听器 255 14.3 鼠标和键盘事件 257 14.3.1 鼠标的单击事件 257 14.3.2 鼠标的按下和松开事件 257 14.3.3 鼠标的移入和移出事件 257 14.3.4 鼠标的移动事件 257 14.3.5 键盘事件的使用 257 实例:测试 中的鼠标和键盘事件 14.4 页面事件 260 14.4.1 加载与卸载事件 260 14.4.2 页面的大小事件 261 实例:使用 实现刮刮卡效果 14.5 表单事件 262 14.5.1 获得焦点与失去焦点事件 262 14.5.2 失去焦点修改事件 262 14.5.3 表单提交与重置事件 263 实例:实现51 购商城中登录时表单事件的处理 小结 265 上机指导 265 习题 266 第15章 综合项目—51 购商城 267 15.1 项目的设计思路 268 15.1.1 项目概述 268 15.1.2 界面预览 268 15.1.3 功能结构 270 15.1.4 文件夹组织结构 270 15.2 主页的设计与实现 271 15.2.1 主页的设计 271 15.2.2 顶部区和底部区功能的实现 272 15.2.3 商品分类导航功能的实现 274 15.2.4 轮播图功能的实现 276 15.2.5 商品推荐功能的实现 277 15.3 商品列表页面的设计与实现 279 15.3.1 商品列表页面的设计 279 15.3.2 分类SHOU*选项功能的实现 279 15.3.3 商品列表区的实现 281 15.4 商品详情页面的设计与实现 282 15.4.1 商品详情页面的设计 282 15.4.2 商品概要功能的实现 284 15.4.3 商品评价功能的实现 285 15.4.4 猜你喜欢功能的实现 286 15.5 购物车页面的设计与实现 288 15.5.1 购物车页面的设计 288 15.5.2 购物车页面的实现 289 15.6 付款页面的设计与实现 290 15.6.1 付款页面的设计 290 15.6.2 付款页面的实现 290 15.7 登录和注册页面的设计与实现 292 15.7.1 登录和注册页面的设计 292 15.7.2 登录页面的实现 293 15.7.3 注册页面的实现 294 小结 296 第16章 课程设计—游戏公园网站 297 16.1 课程设计目的 298 16.2 游戏公园网站概述 298 16.2.1 网站特点 298 16.2.2 功能结构 299 16.3 主页的设计与实现 300 16.3.1 主页的设计 300 16.3.2 顶部区和底部区功能的实现 301 16.3.3 推荐游戏功能的实现 303 16.3.4 *新游戏功能的实现 304 16.4 博客列表的设计与实现 305 16.4.1 博客列表的设计 305 16.4.2 博客列表的实现 306 16.5 博客详情的设计与实现 308 16.5.1 博客详情的设计 308 16.5.2 博客详情的实现 308 16.6 关于我们的设计与实现 309 16.6.1 关于我们的设计 309 16.6.2 关于我们的实现 310 小结 311 附录 实验 312 实验1 通过Dreamweaver 创建一个网页 312 实验2 实现网页中的买家评论信息 313 实验3 通过表格制作商城首页 315 实验4 通过表单实现酒店筛SHOU*选 317 实验5 设置网页中图片的属性 318 实验6 通过标签添加视频 320 实验7 实现鼠标滑过图片时的特效 321 实验8 实现51 购商城中鼠标划过的特效 323 实验9 通过列表实现商品排列 325 实验10 通过2D 变换实现动态照片墙 327 实验11 输出一张图片 329 实验12 通过循环语句输出年份和月份 329 实验13 实现商品详情中Tab 菜单 331 实验14 购物车常用操作 333 |