本书采用“理论与实践”相结合的模式，将课堂教学内容与案例教学内容有机地结合起来进行讲解。全书共分8章，内容包括：网页设计基础、基本的HTML标签、表格和表单、用CSS修饰HTML标签、盒子模型和布局、综合案例、JavaScript编程基础知识和网页对象的JavaScript编程等。每章后面附有小结和习题，帮助读者巩固所学知识。



本书从基础知识入手，循序渐进，重视能力培养，适合学生在实践中学习，逐步掌握网页设计与编程技术。本书适合作为普通高等院校网页设计课程教材，也可作为网页设计爱好者的参考用书。

从基础入手，立足Z新国际标准，重视能力培养，着重案例实践；采用目前主流的布局技术DIV+CSS布局

随着Internet应用的飞速发展，大多数高校在大学生学习了计算机应用基础课程之后开设了网页设计课程。但教学内容会根据学生专业不同而有所调整：为文科与艺术类学生所授偏向网页设计知识；为理工科学生所授偏向编程知识。实际上，若同时讲授网页设计与编程知识，不但可以让学生更好地进行网站开发工作，而且也符合未来艺工专业融合的学科发展方向。基于此，我们为高等院校的广大师生编写了本书。


本书从基础入手，立足Zui新国际标准，重视能力培养，着重案例实践；在形式上力争语言简洁、内容充实、排版活泼，学生学完本书后能够掌握必备的网站设计知识。



由于HTML5是业界认可的Zui新标准，因此W3C（万维网联盟）组织不再推荐使用的一些标签如框架（ 标签），本书不再涉及。样式设计采用了Zui新的CSS3，但由于篇幅原因，本书只讲解常用的样式属性。为了兼顾不同专业的学生，只讲解JavaScript语言网页设计所需的程序设计基础内容。



本书采用的是目前主流的布局技术DIV+CSS布局，这种技术具备三大优点：写代码容易，效率高；方便修改，尤其是通过修改样式文件快速改变网站外观；代码量少，省带宽，适合SEO（搜索引擎优化）。



本书由长期从事网页设计与编程课程教学的一线教师编写而成，全书共分8章：第1章~第6章是静态网页设计的基础知识，内容包括网页、网站和HTML基础，HTML5标签，表格和表单，CSS3样式，DIV+CSS布局；第7章和第8章是JavaScript编程基础，主要内容包括JavaScript语法基础以及如何用JavaScript来实现与网页元素的交互。学完本书所有内容后既可以设计静态网页，又能设计动态网页。精心设计的案例确保读者在完成上机实验后能快速掌握必要的知识点，每章都附有形式多样的习题供读者自行测评，书中附录给出了习题答案。



网站开发的工具多种多样，目前比较流行的开发平台有Adobe Dreamweaver、Sublime、MSCode、HBuilder、WebStorm等。每个平台都有自己的独特之处，但在代码提示、辅助纠错方面WebStorm稍胜一筹，故我们推荐使用WebStorm。对于喜欢可视化环境的读者，可以选择Dreamweaver。
为了方便读者学习，我们提供了教材的电子课件和案例代码（可在中国铁道出版社有限公司官网http://www.tdpress.com/51eds/下载），每章习题的答案参见附录B。
在学习本书的过程中，应注意以下几点：



1．重视对HTML、CSS和JavaScript内容的理解



虽然代码提示和可视化开发环境使很多代码可以自动完成，但还是建议读者尽量理解网页元素、样式和JavaScript的真正含义。例如，标签和样式的完整英文单词意思，JavaScript语言中标识符的英文含义，只有这样才能加深理解，使用时信手拈来，更精确地控制网页的实际显示效果。
2．重点学习方法并应用于实际



在学习案例时要举一反三，将更多的知识点诉诸实践。只有掌握了方法，遇到新需求时才能灵活应对，例如，掌握了盒子的布局原理后，任意格局的设计就会像搭积木一样得心应手；看到了别人设计网站的效果后会想到用什么方法加以实现。



3．一些辅助知识和技术也是必须要掌握的
学习本书时我们假定读者掌握了计算机基础知识，如文件系统、图片处理、视频处理等必备知识，否则有的读者会对诸如路径参数的设置、图片视频格式及压缩等知识点难以理解。若想进一步提高网页设计水平，需要选择进阶教材进一步学习。



本书是我们在高校长期教学实践的经验积累，编者投入了巨大的心血并建设了课程的数字化教学资源。



本书由耿增民任主编，洪颖、邵熹雯、吕超任副主编。具体编写分工为：洪颖编写第1章和第6章，邵熹雯编写第2章和第5章，吕超编写第3章和第4章，耿增民编写第7章和第8章。全书由耿增民策划、统稿、定稿。



网页设计技术发展日新月异，由于编者水平有限，加之时间仓促，书中疏漏与不妥之处在所难免，敬请广大读者批评指正。



编 者



2020年10月

耿增民，男，2002-2006年在北京理工大学计算机学院计算机应用技术专业学习，并获得工学博士学位。现在北京服装学院计算机信息中心计算机公共课教研室任教，教授。主讲的课程有：Web设计与编程、计算机应用基础、VB程序设计、C#程序设计、Internet应用基础、Flash动画设计基础。2012年获得中国纺织协会教学成果2等奖，参与多项军工科研项目，项目分别获得国防科技进步二等奖、三等奖。

第1章 网页设计基础 1
1.1 认识网页和网站 1
1.2 HTML概述 5
1.3 浏览器概述 7
1.4 网站与网页开发工具 10
小结 15
习题 15
第2章 基本的HTML标签 17
2.1 HTML标签语法 17
2.2 文档头部标签 21
2.3 文本控制标签 24
2.4 图像标签 32
2.5 列表标签 40
2.6 超链接标签 46
2.7 音频和视频标签 53
2.8 HTML 5新增结构性标签 58
小结 61
习题 61
第3章 表格和表单 63
3.1 表格标签 63
3.2 表单 68
3.3 表单控件 69
小结 76
习题 76
第4章 用CSS修饰HTML标签 78
4.1 CSS简介 78
4.2 CSS的添加方法 79
4.3 CSS基础选择器 80
4.4 链接伪类选择器 84
4.5 CSS修饰文本 86
4.6 CSS修饰图像 92
4.7 CSS修饰表格 101
4.8 CSS修饰表单 106
4.9 CSS高级属性 109
小结 113
习题 113
第5章 盒子模型和布局 116
5.1 盒子模型概述 116
5.2 盒子模型的属性 118
5.3 div和span标签 138
5.4 盒子外边距的合并 141
5.5 浮动和定位 145
5.6 DIV+CSS布局 159
5.7 弹性盒子布局 167
小结 177
习题 177
第6章 综合案例 180
6.1 网站规划 180
6.2 设计网页效果图 182
6.3 切图 185
6.4 建立站点 189
6.5 制作首页 190
6.6 制作网页模板 202
6.7 利用模板制作子页面 204
小结 210
习题 211
第7章 JavaScript编程基础知识 212
7.1 初识JavaScript 212
7.2 JavaScript语法基础 217
7.3 在浏览器中调试程序 229
小结 233
习题 233
第8章 网页对象的JavaScript编程 235
8.1 JavaScript常用对象 235
8.2 事件驱动的程序设计 248
8.3 案例 252
小结 260
习题 261
附录A