一、教材的基本信息
1.适用对象
本教材适合高校计算机科学与技术、软件工程、物联网、计算机网络、大数据、计算机应用、电子商务、信息技术与商务管理、市场营销等专业本科、高职学生选用，也适合有一定基础的前端学习者选用。
2.具备的知识和能力基础
具备基本的计算机操作能力和一定的英文能力。
3.预期学习效果目标内容学习效果理论知识掌握HTML掌握CSS理解网站开发规范实践技能应用HTML和CSS编写网站前端常见效果能够完成完整的网站前端的设计与开发素质能力团队合作，协作能力自主学习，学习并完成现实中见到的前端效果创新，在模仿的基础上创新4.教材编写团队
本教材是前端课程组所有教师多年前端课程授课以及项目开发和实训、实践的结晶。课程组教师大多有十年以上的前端课程的授课经验，见证了前端技术的飞速发展。课程组的网页设计与制作课程被评为辽宁省精品课，获得辽宁省教学成果奖；课程组编写的《网页设计与制作实例教程》教材被评为“辽宁省十二五规划教材”，并被国内一百余所高校采用。本次的《网页设计与制作教程》的编写，是课程组对网站前端基础技术的总结和探索。
二、教材的基本结构与内容组织
1.教材的基本结构
课程主要目标是使学生掌握网站前端的各种技术，能够完成网站前端的综合设计。
本教材的主要内容就是网页的前端设计。基本的设计思路是在读者完成了HTML和CSS的学习后，进一步提升前端设计能力。
前端设计主要包括内容、样式和行为。内容由HTML表示；样式由CSS表示；行为由JavaScript表示，本教材主要讨论网站前端的内容和样式。
本教材的定位是前端的基础内容，在完成这些基础内容的学习后，需要进行移动网站设计、JavaScript的学习，以及完整的前端知识体系的学习。
通过完整的综合项目，按照现实的规范设计，全方面的完成网站前端的设计与制作。完整的项目是综合所有前端知识的最有效手段。
课程项目从第1章开始规划和布置任务，每一章完成课程项目的一部分工作，每一章的具体任务在实践环节设计中体现，最终在第9章进行完整的课程项目的设计与实现。
2.教材的内容组织
本教材的编写基于课程项目，对实际项目中暂时不能用到的内容，进行了删减或省略。希望读者在阅读本教材时，根据教材中的规划完成一个实际项目的需求分析、设计、实现和运行。前端的学习必须通过实践来进行，一个好的项目也是对一个初出茅庐的没有工作经验的新人的最好的能力证明。
本教材的内容主要包括HTML、CSS、HTML5、表单、网站的发布和优化等。本教材中的内容从理论和实践两方面满足学生对前端知识的学习要求。
基于以上思路，同时针对课程项目的构思、设计、实现、运行的总的过程设计，本教材共分为9章。
第1章对网站前端和课程项目做了总体的介绍，并对课程项目进行构思。
第2章主要介绍HTML，重点介绍前端技术的技术规范。
第3章主要介绍CSS，介绍了网页的样式的技术规范与实现方法。
第4章主要介绍框模型，掌握框模型的要素、宽度、高度、叠加等。
第5章主要介绍网页布局，掌握实现完整网页的方法，并对课程项目进行整体的设计和布局实现。
第6章主要介绍HTML5的设计规范和布局元素。
第7章主要介绍表单，包括HTML5表单。
第8章主要介绍前端开发规范和网页元素设计，网页元素是实现网页布局的每一部分的具体方法。
第9章介绍了基于网站的设计。掌握网站的设计流程、优化、测试与网站发布，掌握课程项目的要求与实现方法。
很多人为此教材的出版付出了努力，在此向他们表示感谢。感谢参与本教材编写和审阅的所有老师，感谢他们认真、严谨的工作，保证教材高质量地完成。感谢大连东软信息学院计算机与软件学院领导以及教材建设委员会对教材编写的帮助和支持，感谢东软电子出版社为教材编写、出版创造的有利条件。
由于Web前端技术知识更新很快、日新月异，作者水平有限，编写时间仓促，因此教材中错误或不妥之处难免，敬请读者批评指正。编者邮箱：yuanlei@neusoft.edu.cn。
第1章Web前端概述1
1.1前端基础2
1.1.1WWW2
1.1.2URL2
1.1.3HTML2
1.1.4常用的前端技术3
1.1.5浏览器3
1.1.6静态网页与动态网页4
1.1.7HTTP5
1.1.8HTTPS6
1.1.9B/S7
1.2前端概述8
1.3前端学习内容9
1.4前端开发环境10
1.4.1前端开发软件概述10
1.4.2浏览器工具11
1.4.3Visual Studio Code的安装与使用12
1.5前端项目规划14
1.5.1基于模仿的项目规划14
1.5.2基于创新的项目规划14
1.5.3网站元素16
1.6小结18
实践环节设计19
习题19
第2章HTML基础20
2.1HTML概述21
2.2第一个HTML页面21
2.3标准HTML文件的结构24
2.4基本HTML标记25
2.4.1正文标题标记 从
到
25
2.4.3常用文本格式标记27
2.4.4注释语句标记28
2.5列表标记29
2.5.1无序列表29
2.5.2有序列表30
2.5.3定义列表31
2.6HTML的属性32
2.7 HTML颜色33
2.8
和35
2.9字符实体36
2.10文件路径37
2.10.1绝对路径37
2.10.2相对路径38
2.11插入图片40
2.11.1图像格式40
2.11.2在网页中使用图片40
2.12超链接42
2.12.1外部链接与内部链接42
2.12.2title属性和target属性43
2.12.3图片超链接45
2.12.4文件链接46
2.12.5锚点链接46
2.13表格48
2.13.1表格的应用48
2.13.2表格的基本标记49
2.14iframe51
2.15小结53
实践环节设计54
习题54
第3章CSS基础57
3.1CSS简介58
3.2CSS选择器59
3.2.1基本概念和语法59
3.2.2标签选择器59
3.2.3ID选择器63
3.2.4CLASS选择器64
3.2.5群组选择器和后代选择器69
3.3常用属性72
3.4CSS伪类74
3.5CSS的位置77
3.5.1内嵌样式77
3.5.2内部样式77
3.5.3外部样式77
3.6层叠与继承80
3.7CSS背景82
3.7.1无序列表的背景82
3.7.2导航84
3.8小结87
实践环节设计87
习题87
第4章框模型90
4.1第一个盒子91
4.2框模型92
4.3盒子的宽度和高度96
4.4框模型的应用98
4.5display104
4.6小结109
实践环节设计109
习题109
第5章布局与定位111
5.1网页布局方法概述112
5.2float浮动112
5.3BFC118
5.4clear119
5.5固定宽度布局120
5.6绝对定位126
5.7zindex134
5.8相对定位134
5.9自适应宽度布局137
5.10固定定位142
5.11综合布局实例142
5.12小结145
实践环节设计146
习题146
第6章HTML5基础147
6.1HTML5概述148
6.2DOCTYPE148
6.3HTML5的新特性150
6.4HTML5布局元素151
6.5常用的HTML5基本元素153
6.6HTML5属性154
6.7音频和视频156
6.8小结156
实践环节设计157
习题157
第7章表单158
7.1表单基础159
7.2常用的表单控件160
7.2.1文本域和按钮161
7.2.2单选框和复选框162
7.2.3多行文本框和下拉列表163
7.3用CSS美化表单164
7.4HTML5表单168
7.4.1datalist元素169
7.4.2autocomplete属性170
7.4.3新的input类型170
7.5小结172
实践环节设计173
习题173
第8章前端开发规范和网页元素设计175
8.1基于HTML5的前端开发176
8.2前端开发规范176
8.3网页元素设计180
实践环节设计215
习题215
第9章网站综合设计217
9.1网站设计概述218
9.2切片219
9.3网站综合设计流程220
9.4网站测试222
9.5网站前端的优化222
9.5.1SEO222
9.5.2CDN223
9.5.3服务器端优化223
9.5.4文件的压缩223
9.5.5预加载和懒加载224
9.5.6代码规范224
9.5.7HTTP缓存225
9.5.8Web安全226
9.6网站的发布227
9.6.1WWW服务器227
9.6.2网站上传227
9.6.3项目发布228
9.7网站的设计与实现229
9.7.1总体思路229
9.7.2项目分析231
9.7.3获取图片素材234
9.7.4切片236
9.7.5页面的实现239
实践环节设计241
习题242
附录：学习知识要点及能力要点243
参考文献246
2016年6月，中国成为国际本科工程学位互认协议《华盛顿协议》的正式会员，这是中国工程教育国际化进程的重要里程碑。“回归工程”、培养学生的“大工程观”是当今国际工程教育的主流理念。《华盛顿协议》对毕业生提出的12条素质要求中，不仅要求工程知识、工程能力，还强调通用能力和品德伦理；在实践上，以学生为中心，以产出为导向，注重对目标达成的支撑及持续改进，与CDIO工程教育实质等效。
CDIO工程教育是近年来国际工程教育改革的最新成果，以“预期学习结果”集合来驱动课程内容、教学方法、教育文化的设计，重视营造工程教育文化，其注重工程能力培养和基于工程项目全生命周期的一体化设计思想，对于国内工程类和相关专业的建设具有重要的实施价值。
作为承载了教学改革思想的载体，融入CDIO工程教育理念的高品质教材，东软CDIO工程教育教材在注重理实结合的同时，也注重对学生八大能力的培养，即：技术知识与推理能力，开放式思维与创新，个人职业能力，沟通表达与团队合作，态度与习惯，责任，价值观，实践构思、设计、实现和运行对社会的贡献。
CDIO工程教育教材是 CDIO教育教学改革在教学实施过程中的集中体现，它不仅承载着课程和项目的教学内容，而且贯穿和体现了CDIO工程教育的理念、思想与方法，是在系统化理论的指导下，将知识、能力、素质培养进行一体化设计，有机融合在教材体系中。教材的编写以能力培养为主线，以案例教学为引导，以项目为载体，充分体现“做中学”和“学中做”的思想，具有以下优势：
（1）以能力培养为主线，培养学生专业知识学习能力和工程实践能力。
（2）以案例为驱动，在做案例的过程中学习新知识，充分体现了“做中学”。
（3）以项目为载体，基于工程化教育方法，按照分析、设计、实施、运行展开项目及知识点的讲解。
（4）围绕专业知识结构和能力体系设计教材，实现同一专业下不同教材紧密的关联性。
（5）内容编排循序渐进，符合人的认知规律。
（6）适应柔性化教学变革，构建一体化、立体化教学资源。
CDIO工程教育教材可供以应用型人才为培养目标的高等院校以及职业培训机构作为教材使用。
目前，CDIO工程教育教材的建设还处于探索阶段，是一项创造性的工作，尚需要通过改革的实践不断加以深化和持续改进，任重而道远。
