网页前端技术

在计算机网络如此普及的今天，越来越多的人想学习计算机。计算机的用途如此广泛，让想学习它的人无所适从。本书面向计算机最普遍的应用，即网页的制作，力求让更多的人从中得到启发。

本书的网页制作是介于静态网页制作和动态网页制作之间的一门学科。本书共分为三个模块：HTML语言、CSS语言和JavaScript语言，从网页制作的基础认识到网页的一些简单变换，再到网页的高级应用，给想认识和掌握网页制作的初学者提供了一个入门级的教程。对初学者的网页制作提供了一个完善和实际的解决方案，也让希望在计算机网页制作方面有所成就的人增加自信心，让他们觉得计算机网页制作是如此简单和容易掌握，并且以此来进一步发展。

本书面向最实际和最富可操作性的技能，提供了完整的、具体的操作步骤，让使用者有遵循的依据。尽管这个依据不是唯一的、最完善的，但它绝对是最简便的、最容易操作的。

第一个模块分为七个任务，分别是网页中的文字、段落、图片、声音、表格、表单及页面分割的基本技能。学会了这部分技能，就对网页的制作有了更加清楚的认识，能够制作简单的网页。第二个模块分为三个任务，分别是网页的文字、层及特效的技能，是对前面的网页技能的进一步提高，让学习网页制作的人感到实用且简单，也能从中体会到新鲜、有趣。第三个模块分为四个任务，分别是特效、对象、浏览器对象及事件的技能，它又是前两个模块的扩展，让初学者体会到网页制作的强大，增强自信心，为有志在计算机网页制作方面有更深入发展的人提供一个新的技能。

本书提供了实用的知识和技能，且都是身边最常用的技能。学习的目的是应用，让使用本书的人感觉这正是他想要的、是他百思不得其解的，以提高他的学习兴趣。也让使用本书的人感觉到有具体的方法和步骤参考，以提高他们学习的信心。

本书采用最新的任务驱动式的教学方法。教无定法，但不可无法。在众多教学方法中选定任务驱动式教学方法，是因为目前它是最接近实际工作的教学方法，可以使读者觉得他们的工作和所学的是如此接近和相似，让他们掌握最直接的应用技能，而且一步到位。学习有两个方向：一个方向是先告诉他为什么，再告诉他怎么做；另一个方向是先告诉他怎么做，再让他自己找出为什么。第二个方向是人们发现理论的途径，尽管在众多实践中总结出理论是困难的，但这种经验式的理论是最持久的。你可能觉得直接告诉他为什么更直接、简便，但他不会应用或规则式地套用让其往往很快便忘记且不会创新。

众多朋友的支持是本书得以正常出版的重要原因。感谢我们学院的郝世峰院长对本书的关注和支持，他的反复阅读和丰富的经验给了我们无穷的动力和自信，使我们的编撰工作得以顺利地开展和进行。还要感谢身边同事的支持，他们在教学上的丰富经验使得其在本书内容和教学方法上更有发言权，也使得他们的建议弥足珍贵。

本书的分工如下：第一个模块由王敏杰编写；第二个模块由任云晖编写；第三个模块的任务一和任务二由王海涛编写，任务三和任务四由闫春玲编写。全书的审核校验工作由汪衍辉承担。

由于时间仓促，编者水平有限，在知识、技能和教学方法的安排上难免有疏漏和不足之处，敬请广大读者和同仁批评指正。

编 者

2012年2月

前言
模块一 HTML语言

任务一 认识HTML 2
1.1 案例一 创建第一个HTML文件 2
1.1.1 案例资讯 3
1.1.2 案例步骤 5
1.2 案例二 正确进行网页布局 5
1.2.1 案例资讯 5
1.2.2 案例步骤 9
任务二 在网页中对文字及段落进行修饰 10
2.1 案例一 在网页中插入绝美的文字 10
2.1.1 案例资讯 10
2.1.2 案例步骤 12
2.2 案例二 设计布局合理的段落 15
2.2.1 案例资讯 15
2.2.2 案例步骤 16
2.3 案例三 用列表让网页格式更工整 20
2.3.1 案例资讯 20
2.3.2 案例步骤 21
任务三 插入图片和多媒体让网页更生动 26
3.1 案例一 我的音乐贺卡 26
3.1.1 案例资讯 26
3.1.2 案例步骤 27
3.2 案例二 我的网页也能看电影 29
3.2.1 案例资讯 29
3.2.2 案例步骤 29
3.3 案例三 我的滚动相册 30
3.3.1 案例资讯 31
3.3.2 案例步骤 31
任务四 如何实现页面的跳转 33
4.1 案例一 用文字来进行超链接 33
4.1.1 案例资讯 33
4.1.2 案例步骤 34
4.2 案例二 用图像制作导航条 38
4.2.1 案例资讯 39
4.2.2 案例步骤 39
任务五 学会使用表格 41
5.1 案例一 制作成绩表 41
5.1.1 案例资讯 41
5.1.2 案例步骤 42
5.2 案例二 制作课程表 43
5.2.1 案例资讯 43
5.2.2 案例步骤 44
5.3 案例三 用表格进行复杂网页的布局 48
5.3.1 案例资讯 48
5.3.2 案例步骤 48
任务六 会用表单收集用户输入的信息 50
6.1 案例一 制作用户登录界面 50
6.1.1 案例资讯 50
6.1.2 案例步骤 52
6.2 案例二 制作用户注册界面 54
6.2.1 案例资讯 54
6.2.2 案例步骤 57
任务七 使用框架对页面进行分割 59
7.1 案例一 使用普通框架进行页面分割 59
7.1.1 案例资讯 59
7.1.2 案例步骤 61
7.2 案例二 使用内部框架进行页面分割 62
7.2.1 案例资讯 62
7.2.2 案例步骤 62

模块二 CSS语言

任务一 认识CSS 65
1.1 案例一 我的第一个CSS文件 65
1.1.1 案例资讯 65
1.1.2 案例步骤 69
任务二 用CSS实现页面风格的统一 71
2.1 案例一 用CSS美化字体 71
2.1.1 案例资讯 71
2.1.2 案例步骤 72
2.2 案例二 用CSS实现页面的精细排版 73
2.2.1 案例资讯 73
2.2.2 案例步骤 74
2.3 案例三 用CSS设置对象的边框 75
2.3.1 案例资讯 75
2.3.2 案例步骤 76
2.4 案例四 用CSS进行页面的颜色和背
景设置 78
2.4.1 案例资讯 78
2.4.2 案例步骤 79
任务三 学会CSS的高级应用技巧 81
3.1 案例一 用CSS实现层的排版 81
3.1.1 案例资讯 81
3.1.2 案例步骤 83
3.2 案例二 用CSS的滤镜实现各种特效 85
3.2.1 案例资讯 85
3.2.2 案例步骤 86

模块三 JavaScrip语言

任务一 认识JavaScript 89
1.1 案例一 Title栏滚动特效 89
1.1.1 案例资讯 89
1.1.2 案例步骤 97
1.2 案例二 水波文字效果 98
1.2.1 案例资讯 98
1.2.2 案例步骤 100
1.3 案例三 页面中输入的年月日是否正确 101
1.3.1 案例资讯 102
1.3.2 案例步骤 108
任务二 认识JavaScript对象 113
2.1 案例一 打印机式字符输出 113
2.1.1 案例资讯 113
2.1.2 案例步骤 119
2.2 案例二 页面两侧的小广告 121
2.2.1 案例资讯 121
2.2.2 案例步骤 123
2.3 案例三 记忆测试 125
2.3.1 案例资讯 125
2.3.2 案例步骤 128
2.4 案例四 很酷的日历 135
2.4.1 案例资讯 135
2.4.2 案例步骤 138
2.5 案例五 产生随机数 142
2.5.1 案例资讯 142
2.5.2 案例步骤 145
任务三 认识浏览器对象 148
3.1 案例一 显示Navigator对象属性 148
3.1.1 案例资讯 148
3.1.2 案例步骤 151
3.2 案例二 子窗体返值到母窗体 154
3.2.1 案例资讯 154
3.2.2 案例步骤 156
3.3 案例三 Screen综合应用实例 158
3.3.1 案例资讯 158
3.3.2 案例步骤 159
3.4 案例四 隐藏菜单 162
3.4.1 案例资讯 162
3.4.2 案例步骤 164
任务四 认识事件 168
4.1 案例一 可移动的导航条 168
4.1.1 案例资讯 168
4.1.2 案例步骤 180
4.2 案例二 验证输入的注册信息 183
4.2.1 案例资讯 183
4.2.2 案例步骤 186
参考文献 192

1. 基于.NET Core框架的分布式系统架构设计 [汤佳 著]
2. Web用户界面设计与制作 [主编 赵娟]
3. ASP.NET（C#）网站开发（第二版） [主编 张志明 王辉]
4. Web开发实战 [主编　肖睿　陈永]
5. Bootstrap与jQuery UI框架设计 [主编 肖睿 吴振宇]
6. 网页设计与制作 [主编 杨毅]
7. 网页制作实战 [主编 肖睿 罗保山]
8. 网页设计与制作 [主编 陈建国 项炜]
9. 16课学会网页程序设计—— HTML5+CSS3+JavaScript+jQuery+ [施威铭研究室 著]
10. HTML5+CSS3前端技术——UI设计师与开发人员合作秘籍 [北京课工场教育科技有限公司Q]
11. Web程序设计实践教程 [主编 侯萍 郭俊荣]
12. 网页设计与制作 [孙娜 蒲秋梅 南洋 编著]
13. 玩转Axure RP——Axure RP 7.0高保真网页、APP原型设计 [谢星星 编著]
14. ASP.NET Web程序设计 [吴琴霞 栗青生 康晶 编著]
15. CSS+DIV页面布局技术 [主编 朱翠苗]
16. Web开发与安全防范 [主编 武春岭]
17. 网页设计实训教程 [主编 张春英 李英文 钟大伟]
18. ASP.NET（C#）网站开发 [主编 张志明 王辉]
19. 网页设计实用技术 [主 编 陈建国 李勤]
20. JSP设计与开发 [秦毅 王可]
21. ASP.NET项目开发教程 [邹承俊 任 华]
22. 动态网页设计与制作实用教程（第三版） [程伟渊 倪燃]
23. ASP程序设计（第二版） [叶潮流 杜奕智]
24. 网页设计与制作实用技术（第二版） [齐建玲 杨艳杰]
25. 多媒体网页设计教程 [主编 朱国华 齐晖 李枫]
26. 网页设计与制作（第二版）实训指导 [任正云 赖玲 严永松 王娅纷]
27. 网页设计与制作（第二版） [任正云 赖玲 严永松 编著]
28. 网页设计与制作 [主编 陈彦许 陈维华]