本书根据网页设计与制作的基础语法逻辑进行编写,理论与实务相结合,力求帮助网页设计与制作零基础的读者从入门走向精通。全书共8章,包括浏览器与网页基础、网页文本处理、常用的网页标记、CSS基础、CSS布局属性、设计复杂的布局、JavaScript基础、基于对象的JavaScript编程等内容。
为了方便教师教学,本书提供丰富的教学资源,包括PPT课件、电子教案、教学大纲、课后习题答案、上机实验源代码、实训案例源代码等。如有需要,用书教师请登录人邮教育社区(www.ryjiaoyu.com)获取相关教学资源。
本书可作为高等院校计算机、电子商务、网络与新媒体等专业相关课程的教材,也可作为从事网页设计、电子商务、前端开发等工作人员的参考书。
1.教学与零售市场的“双层需要”,市场潜力大。
2.扬弃传统编写思路,突出理论与基础技能培养。
3.深度调研院校需求,合理创新层次架构及体例。
4.内容布局差异化呈现,立足零基础人群。
5.提供充足课后练习题,同类教材首屈一指。
田登山,北京林业大学副教授。 2003年毕业于中国石油大学(北京)计算机系,获硕士学位;毕业后北京林业大学经济管理学院任教至今。 研究领域:基于面向对象的系统分析与设计、分布式Web开发技术、极限编程、移动开发。 承担课程:网页设计理论与实务、数据库原理、Java、JSP。 一、主持和参与的科研、教学研究课题: 2003.9--2004.7,北京林业大学科技创新计划项目和北京林业大学211建设----林业经济信息系统,主要完成人。 2016-2018,设计开发了“无误”App,曾成功在苹果应用商店、华为应用商店上线。 二、论文与专著: 1. A Test-Driven Web Application Model based on Layered Approach;2010 IEEE International Conference on Information Theory and Information Security(ICITIS2010);Ei和ISTP检索,并进入IEEE Xplore。(第一作者) 2. WEB分层框架模型研究;2010年信息技术与管理科学研讨会(CITSM 2010);ISTP检索。(第一作者) 3.基于依赖关系的课程体系自我调整模型研究;中国林业教育;2010 28 (5)(第一作者) 4.林业经济信息集成平台的构建;《国家林业局管理干部学院学报》;2005年01期(第二作者) 5.基于分布式计算的网络管理平台的设计与实现;《计算机工程》;2005年23期(第三作者) 三、出版教材 《Java面向对象程序设计与应用》中国铁道出版社, 2011.12,主编,排名第一。 《网页设计理论与实践》中国铁道出版社, 2015.2,主编,排名第一。 《JSP网络程序设计》北京邮电大学出版,2011.8,主编,排名第二。 四、荣誉与奖励 北京市教育教学成果(高等教育)二等奖北京林业大学“经济管理综合实验系统建设项目”,排名第二。 北京林业大学2007年教学成果奖校级一等奖经济管理综合实验系统建设,排名第三。 北京林业大学2007年教学成果奖校级优秀奖电子商务系列课程教学改革研究,排名第二。
第 1章 浏览器与网页基础 1
1.1 计算机网络与浏览器 1
1.1.1 计算机网络 1
1.1.2 TCP/IP 2
1.1.3 进制与IP地址 2
1.1.4 域名与域名服务器 4
1.1.5 URL 5
1.1.6 常用的浏览器 5
1.1.7 浏览器的工作原理 6
1.1.8 浏览器应用程序 7
1.2 网站与网页 8
1.2.1 网页的分类 9
1.2.2 网页的组成元素 10
1.2.3 网站的制作流程与网站空间 10
1.2.4 测试网页 12
1.2.5 发布网页 12
1.3 网页设计辅助软件 12
1.3.1 网页编辑软件 12
1.3.2 网页测试软件 13
1.3.3 IDE 13
1.4 构建第 一个网页 14
1.4.1 创建网页文件 14
1.4.2 网页编码与文件存储 14
1.4.3 测试网页效果 14
1.4.4 浏览器的渲染次序 15
1.4.5 浏览器与内存 15
1.5 实训案例 15
1.5.1 安装Firefox浏览器 15
1.5.2 安装Sublime Text 2 16
思考与练习 16
上机实验 17
第 2章 网页文本处理 18
2.1 结构标记 18
2.1.1 html标记 18
2.1.2 head标记 18
2.1.3 meta标记 19
2.1.4 控制网页编码 20
2.1.5 注释 21
2.1.6 body标记 21
2.1.7 进制与RGB颜色值 23
2.1.8 网页模板文件 23
2.2 文本样式标记与转义字符 24
2.2.1 font标记 24
2.2.2 物理样式标记与逻辑样式标记 25
2.2.3 转义字符 26
2.3 组织段落 27
2.3.1 p标记 27
2.3.2 div标记与span标记 28
2.3.3 标记间的包含关系 29
2.3.4 标题标记hn 29
2.3.5 br标记与nobr标记 30
2.3.6 hr标记 30
2.3.7 像素、分辨率与进制 30
2.3.8 align属性 31
2.3.9 空标记 31
2.3.10 W3C与HTML标准 31
2.4 列表 32
2.4.1 li标记与ol标记 32
2.4.2 ul标记 32
2.4.3 dl、dt和dd标记 33
2.5 其他标记 33
2.5.1 abbr标记 33
2.5.2 acronym标记 34
2.5.3 del与ins标记 34
2.5.4 标记的分类 35
2.6 实训案例 35
2.6.1 创建网页模板文件 35
2.6.2 使用网页模板文件 36
思考与练习 36
上机实验 38
第3章 常用的网页标记 39
3.1 网页文件路径 39
3.1.1 绝对路径 39
3.1.2 相对路径 40
3.2 链接 40
3.2.1 a标记 40
3.2.2 书签 42
3.2.3 base标记 42
3.3 图片 43
3.3.1 图片格式 43
3.3.2 img标记 44
3.3.3 map标记 44
3.3.4 map标记内的重叠区域处理 46
3.3.5 marquee标记 46
3.4 设计表格 48
3.4.1 table标记 48
3.4.2 行标记 48
3.4.3 单元格标记 49
3.4.4 基准线对齐 50
3.4.5 表格标题标记 50
3.4.6 合并行与列 51
3.5 设计表单 52
3.5.1 表单 52
3.5.2 输入控件 53
3.6 实训案例 56
3.6.1 调整图片尺寸 56
3.6.2 管理网页相关文件 57
思考与练习 57
上机实验 58
第4章 CSS基础 59
4.1 CSS概述 59
4.1.1 CSS的作用 59
4.1.2 CSS语法 60
4.1.3 CSS选择器 60
4.1.4 注释与添加CSS代码 62
4.1.5 在网页模板文件中添加CSS 62
4.1.6 样式的优先级 63
4.1.7 模式匹配 64
4.1.8 CSS属性的继承 66
4.2 CSS基本单位 67
4.2.1 长度单位 67
4.2.2 颜色单位 68
4.3 设置字体相关样式 68
4.3.1 设置字体 68
4.3.2 设置字号 69
4.3.3 设置字体样式 69
4.3.4 设置笔画粗细 70
4.3.5 设置小型的大写字母 71
4.3.6 设置行高 71
4.3.7 设置字体复合属性 71
4.4 设置文本样式 72
4.4.1 设置文本颜色 72
4.4.2 设置文本显示方向 72
4.4.3 设置字母间距 73
4.4.4 设置文本对齐方式 74
4.4.5 设置文本修饰方式 74
4.4.6 理解伪类定义次序 75
4.4.7 IE浏览器的工作模式 75
4.4.8 改进网页模板文件 76
4.4.9 设置文本缩进 76
4.4.10 转换字母大小写 77
4.4.11 设置单词间距 77
4.5 设置元素背景 78
4.5.1 设置背景图像固定 78
4.5.2 设置元素背景色 78
4.5.3 设置表格背景 79
4.5.4 设置背景图像的基本属性与起始位置 79
4.5.5 设置背景图像的重复方式 80
4.5.6 设置背景的复合属性 80
4.6 设置列表样式 80
4.6.1 设置列表项符号 81
4.6.2 设置列表项符号的位置 81
4.6.3 用图像替换列表项符号 82
4.6.4 设置列表的复合属性 82
4.7 实训案例 82
4.7.1 显示不同字体 82
4.7.2 调整字号 83
思考与练习 83
上机实验 85
第5章 CSS布局属性 86
5.1 标记的分类 86
5.1.1 行内元素与块元素 86
5.1.2 块元素与行内元素的互换 87
5.1.3 特殊的元素类型 87
5.2 设置元素尺寸 87
5.2.1 设置元素高度 87
5.2.2 设置元素宽度 88
5.2.3 伪元素 88
5.2.4 设置文本等宽 88
5.3 分类属性 90
5.3.1 设置元素类型 90
5.3.2 设置元素是否可见 90
5.3.3 设置元素浮动 91
5.3.4 清除浮动元素 92
5.3.5 设置鼠标指针 93
5.4 盒子模型 93
5.4.1 设置外边距 93
5.4.2 设置边框 94
5.4.3 设置填充 96
5.4.4 盒子模型的概念 97
5.4.5 消除浏览器的显示差异 97
5.5 设置表格样式 98
5.5.1 表格样式的5个属性 98
5.5.2 表格隔行变色与当前行提示 99
5.6 设置元素定位 101
5.6.1 设置外边距 101
5.6.2 设置垂直方向的对齐方式 101
5.6.3 设置元素堆叠顺序 102
5.6.4 设置元素定位类型 102
5.6.5 设置溢出处理 105
5.7 实训案例 105
5.7.1 模拟论坛页面 106
5.7.2 制作个人简历页面 106
思考与练习 106
上机实验 108
第6章 设计复杂的布局 109
6.1 设计桌面浏览器布局 109
6.1.1 迭代技术 109
6.1.2 引入占位div 110
6.1.3 设计三行一列桌面浏览器布局 111
6.1.4 设计一行三列桌面浏览器布局 112
6.1.5 第二次迭代一行三列桌面浏览器布局 113
6.1.6 第三次迭代一行三列桌面浏览器布局 115
6.1.7 设计三行三列桌面浏览器布局 116
6.1.8 完善上部横向菜单 117
6.1.9 第二次迭代上部横向菜单 118
6.1.10 迭代左侧竖向菜单 119
6.1.11 迭代下方版权信息 120
6.1.12 迭代中间内容 121
6.1.13 迭代右侧友情链接 122
6.1.14 第二次迭代三行三列桌面浏览器布局 123
6.1.15 第三次迭代上部横向菜单 124
6.1.16 选择网站色调 125
6.2 HTML5与CSS3 126
6.2.1 浏览器内核 126
6.2.2 初步了解HTML5 127
6.2.3 引入HTML5后的网页模板 128
6.2.4 CSS1到CSS3 128
6.2.5 定义圆角矩形 129
6.2.6 浅谈圆角矩形实现算法 129
6.2.7 CSS3盒子模型 130
6.2.8 HTML5新增的标记 131
6.3 flex布局基础 132
6.3.1 flex容器 133
6.3.2 flex项目 135
6.4 flex布局设计 136
6.4.1 设计三行一列flex布局 136
6.4.2 设计一行三列flex布局 137
6.4.3 设计三行三列flex布局 139
6.5 响应式网页布局 140
6.5.1 响应式网页 140
6.5.2 “@media”语法 140
6.5.3 制作响应式网页 141
6.6 实训案例 144
6.6.1 整体布局的对齐方式 144
6.6.2 响应式网页菜单项提示 144
思考与练习 145
上机实验 146
第7章 JavaScript基础 147
7.1 JavaScript语法基础 147
7.1.1 定义JavaScript代码 148
7.1.2 数据类型 148
7.1.3 常量 149
7.1.4 变量 150
7.1.5 值传递 150
7.1.6 关键字 151
7.2 分隔符 151
7.2.1 注释符 151
7.2.2 空白符 151
7.2.3 普通分隔符 151
7.3 表达式和运算符 152
7.3.1 算术运算符 152
7.3.2 关系运算符 153
7.3.3 逻辑运算符 153
7.3.4 位运算符 153
7.3.5 赋值运算符 155
7.3.6 运算符的优先级 156
7.4 流程控制 157
7.4.1 顺序流程 157
7.4.2 条件流程 157
7.4.3 函数 163
7.4.4 迭代学习方法 167
7.4.5 JavaScript调试技巧 168
7.4.6 常用的全局函数 169
7.4.7 循环流程 169
7.5 实训案例 175
7.5.1 显示基本数据类型 175
7.5.2 显示斐波那契数列 175
思考与练习 176
上机实验 177
第8章 基于对象的JavaScript编程 178
8.1 对象基础 178
8.1.1 类与对象 178
8.1.2 属性与方法 179
8.2 JavaScript中的常用类 179
8.2.1 Date类 179
8.2.2 Array类 180
8.2.3 String类 181
8.2.4 Math类 183
8.2.5 函数与高等数学 184
8.3 浏览器内置对象 184
8.3.1 窗口对象window 184
8.3.2 文档对象document 185
8.3.3 浏览器对象navigator 186
8.3.4 历史对象history 187
8.3.5 位置对象location 187
8.4 事件及其处理方法 187
8.4.1 onload 187
8.4.2 onunload 188
8.4.3 onmouseover 188
8.4.4 onmouseout 188
8.4.5 onfocus 188
8.4.6 onblur 189
8.4.7 onclick 189
8.4.8 onselect 189
8.4.9 onchange 189
8.5 操作DOM 190
8.5.1 操作DOM节点 191
8.5.2 制作实时数字时钟 192
8.5.3 实时显示在页面停留的时间 193
8.5.4 修改DOM节点的样式 194
8.5.5 校验表单 195
8.5.6 设计RGB颜色查看器 200
8.6 HTTP异步通信 201
8.6.1 XMLHttpRequest对象 201
8.6.2 JSON对象 203
8.6.3 获取天气信息 204
8.6.4 使用终端显示日志信息 205
8.7 兼容性设计 206
8.7.1 IE浏览器的条件注释 206
8.7.2 低版本IE浏览器兼容HTML5和CSS3 207
8.7.3 自动切换桌面浏览器布局与移动端浏览器布局 208
8.8 JavaScript框架简介 208
8.8.1 jQuery框架 209
8.8.2 Vue.js框架 209
8.8.3 Node.js框架 210
8.9 实训案例 210
8.9.1 提示文档加载完毕 210
8.9.2 提示文档加载进程 210
思考与练习 211
上机实验 212