《网页设计与制作:Web 前端开发(第3版)》围绕专题类、商业类、教育类、门户类等主流网站类型,采用项目引导、任务驱动的编写方式,全面、翔实地介绍了 Web 前端开发的流程及相关技术,包括 HTML5、CSS3、JavaScript、响应式布局、开发网站等内容,并介绍 CMS 网站管理系统以及动态网站技术。 全书共分为 10 个项目,项目的构建由易到难,逐层深入,让学生在模拟的工作情境下切实掌握网页设计与制作的方法和技能,提高动手能力和解决实际问题的能力。 《网页设计与制作:Web 前端开发(第3版)》适合于高职高专院校计算机、电子商务及相关专业的学生学习使用,也可以作为网页设计与制作初学者和网页制作培训班学员的参考用书。
随着Web前端开发在近年来迅速崛起,从Web前端开发企业实战的角度,以项目式的教学方式讲解HTML5、CSS3、响应式设计等新技术实用性更强 ;同时配备相应的微课资源。
随着 Web 2.0 技术的广泛应用,标准化的网页设计方式正逐渐取代传统的布局方式,Web 2.0 标准的特点是采用 HTML CSS JavaScript 的技术将网页内容、外观样式及动态效果彻底分离,从而减少页面代码、提高网速,便于分工设计和代码重用。云技术、移动设备的发展和普及又为网站动态化、移动 Web 开发提出了更高的要求。
本书有如下几个特点。
(1)项目驱动
教材以 Web 前端核心技术 HTML5、CSS3、JavaScript、响应式布局为知识主线,以项目需求重构知识体系,通过项目描述分析项目知识点项目实现知识链接拓展学习,在项目实践中强化知识的理解与创新应用,从而提升学习者的问题解决能力、项目开发能力和创新实践能力。
(2)资源丰富
编者在智慧职教 MOOC 学院开通了在线课程,其中包含项目案例的素材及源文件、重 点知识点对应的微视频、课件、项目拓展训练等丰富的资源。
(3)注重能力培养
本书编者长期从事网页设计和Web 前端开发等课程的教学工作,结合国家职业教育学历证书 若干职业技能等级证书(简称 1 X 证书)中 Web 前端开发职业技能开发教材。因此,本书是一本以提高动手能力、核心职业能力为目标的教材。
全书共分为 10 个项目,涵盖了商业类、教育类、专题类等主流网站类型。项目的构建由易到难,逐层深入,让学生在模拟的工作情境下,切实掌握网页设计与制作的方法和技能,提高动手能力,并能举一反三。
项目中项目描述及分析旨在引领读者从整体上认识项目,学会由上至下地分析和规划一个网站的方法;项目知识点首先将项目分解成若干个典型的设计任务,然后引领读者逐步进行制作,在完成一个个页面的同时不知不觉地掌握网页制作中必需、常用的知识和技能;知识链接用于补充项目制作过程中一些重要但来不及详细讲解的知识点,加深读者的认识;拓展学习则提供了同类型网站的一些设计要点,以开阔读者的视野,使其形成良好的设计习惯和理念。限于篇幅,每个项目中一般只涉及首页或 1~2 个子页的制作,其他页面读者可课后自行练习。各项目的具体内容及安排如下。
项目 1 通过对一些常见网站的赏析,引出网页设计与制作方面的基础知识,使读者对网页设计有一个基本的认识,主要包括网站的常见类型、网页的组成元素、网页制作常见术语、网页制作相关软件、网站建设的一般流程、网页制作的基本原则等内容。
项目 2 通过制作一个简单的网页,使读者初步感受网页制作的魅力并熟悉网站制作的基本流程,主要包括进行网站功能设计、使用 Photoshop 制作页面草图、页面草图的切片与导出、使用 Hbuilder 建立站点、申请空间及域名、网站文件的上传等内容,并补充介绍了色彩运用、页面基本元素的常见标准及使用技巧等知识。
项目 3 通过制作一个旅游网站,介绍了文本、图像等页面基本元素的添加、编辑和美化知识,主要包括添加并编辑文本、添加并编辑图像、使用 CSS 样式表美化文本、为页面添加链接等内容,并补充介绍了旅游类网站的设计要点。
项目 4 通过制作一个专题网站,介绍了对于网页制作初学者来说非常重要的DIV CSS 布局形式,主要包括盒子模型、浮动与定位、利用 DIV CSS 进行页面布局、插入 LOGO和 Banner、设计导航条、输入网页内容及定义 CSS、设计其他版面内容等,并补充介绍了专题类网站的设计要点。
项目 5 通过制作一个服装网站,介绍了列表、表格等知识,主要包括 CSS 对列表样式的控制、对图片的排版及控制,并补充介绍了流行时尚类网站的设计要点。
项目 6 通过制作一个影音网站,介绍了 HTML5 中的多媒体应用,主要包括 HTML5 新增标签、音频标签、视频标签、表单等内容,并补充介绍了音频/视频的方法、属性、事件。
项目 7 通过制作业务类网站,介绍了 JavaScript 基础知识,主要包括 JavaScript 语法、流程控制语句、函数的调用等内容,并补充介绍了业务类网站的设计要点。
项目 8 通过制作一个教育类网站,介绍了 JavaScript 中的对象,主要包括 BOM、DOM、事件处理等、并制作网站的首页,补充介绍了教育类网站的设计要点。
项目 9 是在项目 2 的基础上,通过制作该网站的导航、盟院快讯及列表页、内容页,介绍了如何使用 CMS 内容管理系统实现网站内容的动态更新,主要包括认识 CMS、制作网站首页模板、制作列表页和内容明细页模板、配置网站运行环境、进行后台管理、首页的动态化实现、列表页的动态化实现、内容明细页的动态化实现等内容,并补充介绍了网站数据的备份和还原技术。
项目 10 是在项目 9 的基础上,通过首页的响应式开发,介绍了 Bootstrap 框架、栅格系统、CSS 排版、响应式开发等内容。
本书内容详尽,讲解清晰,适合于高职高专院校计算机相关专业以及电子商务专业的学生学习使用,也可以作为网页设计与制作初学者、网站开发人员和网页制作培训班学员等的参考用书。
书中所用实例的素材和源代码可以在清华大学出版社网站(http://www.tup.tsinghua. edu.cn)上下载。
本书由杨艳任主编,郜亚丽、苏文芝任副主编。其中,杨艳编写了项目 3、项目 9、项目 10,郜亚丽编写了项目 4 和项目 5,苏文芝编写了项目 7 和项目 8,田江丽编写了项目 1、 项目 2 和项目 6。全书由杨艳进行统稿。此外,在编写本书的过程中,清华大学出版社的邓艳老师也提出了很多宝贵的意见,为这本书的出版付出了很多的努力。在此,编者一并表示衷心的感谢。
由于编者学识有限且时间仓促,本书在很多方面还需要进一步提高和改进,对于不足和错误之处,恳请广大读者批评指正。
编 者