项目一创建第一个网页

互联网的快速发展改变了我们的工作、学习和生活方式，我们每天都会通过访问网站获取大量信息。网站是通过一个个网页呈现内容和交互信息，本项目简要介绍了网页及其相关概念，列举了网页制作技术涉及的基本标准语言、常见浏览器和常用开发工具，并利用HBuilder做为开发工具，完成创建简单网页的操作。

●1.1网页概述

网页是构成网站的基本元素，是承载各种网站应用的平台。本节概述了网页的概念及其基本构成元素，介绍了静态网页与动态网页的区别，以及Web标准的起源和构成。

●1.2网页制作技术入门

本门课程主要学习静态网页的开发技术，那么完成静态网页的制作将涉及到哪些技术和工具呢？本节着重介绍了制作网页的3种基本标准语言，展示网页的常见浏览器和开发网页的常用开发工具。

●1.3案例：创建第一个网页

关于网页的基本知识已经在前面的小节做了详细介绍，如何完成自己的第一个网页呢？本节主要利用HBuilder做为开发工具，介绍其基本操作界面和功能，完成创建Web项目和制作简单网页的操作。

项目二图文混排商品简介页面

近年来HTML5成为互联网行业最热门的话题。HTML5包含了许多功能，从桌面浏览器到移动应用，它从根本上改变了开发Web应用的方式。作为网页设计人员，我们也要顺应潮流，掌握HTML5的相关技术。

●2.1HTML5的优势

HTML5作为HTML的最新版本，是HTML的传递与延续。从HTML4.0、XHTML再到HTML5，可以说，这是HTML的更新与规范的过程。老版本的大部分标签在HTML5中依然适用。相比较老版本而言，新的HTML5的优势主要在几个方向体现，本节将做具体介绍。

●2.2HTML5结构介绍

学习任何一门语言，我们首先要掌握的都是其基本结构，就像写信需要符合书信的格式要求一样。想要学会HTML5，同样要先掌握HTML5的基本格式。本节将给大家讲解HTML5的基本格式。

●2.3了解标签

在HTML5页面中，带有“＜ ＞”符号的元素被称之为HTML5标签，如前一节学习的＜html＞、＜head＞和＜body＞都是HTML5标签。所谓标签就是放在“＜ ＞”符号中表示某个功能的编码命令，也称为HTML5标记或HTML5元素。本节将讲解标签分类、标签关系、标签属性和HTML5头部相关标签。

●2.4文本控制标签

无论网页内容如何丰富，文字自始至终都是网页中的最基本的要素。为了使文字排版整齐、结构清晰，HTML5中提供了许多文本控制标签，本节将对文本控制标签进行详细讲解。

●2.5图像标签

浏览网页时，我们经常会被页面中的图片所吸引，巧妙的在页面中穿插图片可以使网页内容更加的丰富多彩。本节将给大家介绍几种常用的图像格式以及如何在页面中插入图像。

●2.6综合案例

前几节中，我们重点讲解了HTML5的结构、HTML5的文本控制标签和图像标签。为了使学者能更好的认识HTML5，本节会通过综合案例的形式分步骤实现网页中常见的图文混排效果。

项目三图文混排商品简介页面（样式代码部分）

随着网页制作技术的不断发展，单调的HTML5属性样式已经无法满足网页设计的需求。开发者往往需要更多的字体选择、更方便的样式效果、更绚丽的图形动画。CSS可以在不改变原有HTML5结构的情况下，增加丰富的样式效果，极大地满足了开发者的需要。本项目将详细讲解CSS3及其最新版本CSS3的相关知识。

●3.1CSS3概述

本节中我们将学习结构与表现相分离的概念和意义以及CSS3的优势。了解CSS3样式规则，并能熟练掌握在HTML5文档中引入CSS3样式表的3种方式，会使用CSS3对网页进行修饰。

●3.2CSS3选择器

CSS3选择器可以快速找到HTML5中的目标元素，继而将CSS3样式应用于特定的HTML5标签，本节我们将学习3类选择器，包括基础选择器，复合选择器和伪类选择器。

●3.3CSS3常用属性

CSS3中提供文本样式属性来控制文本显示样式。本节我们将学习CSS3字体样式属性，如控制字号大小、字体、字体粗细，以及CSS3新增的@font-face规则；CSS3文本外观属性以及文本背景相关属性。

●3.4案例-创建图文混排商品简介页面（样式代码）

本节我们将学习CSS3层叠样式表的基本特征：层叠性和继承性，并理解CSS3的优先级，会计算选择器对应的权重。

●3.5案例-创建图文混排商品简介页面（样式代码）

通过对CSS3内容的学习，本节将使用CSS3完成图文混排商品简介页面的样式代码。

项目四为商品页面添加商品列表

一个网站由多个网页构成，每个网页上都有大量的信息，要想使网页中的信息排列有序、条理清晰，并且网页与网页之间有一定的关联，就需要使用列表和超链接。本项目将对列表标签、CSS3列表样式、超链接标签和链接伪类进行具体讲解。

●4.1列表标签

列表标签是网页结构中最常用的标签，按照列表结构划分，网页中的列表通常分为3类，分别是无序列表＜ul＞、有序列表＜ol＞和定义列表＜dl＞。本节将对3种列表标签以及列表的嵌套应用进行详细讲解。

●4.2CSS3列表样式属性

定义无序或有序列表时，可以通过标签的属性控制列表的项目符号，但这种方式不符合结构表现分离的网页设计原则，为此CSS3提供了一系列的列表样式属性，来单独控制列表项目符号，本节将对这些属性进行详细的讲解。

●4.3CSS3列表样式复合属性

在CSS3中，列表样式也是一个复合属性，可以将列表相关的样式都综合定义在一个复合属性list-style中。

●4.4超链接

超链接是网页中最常见的元素，每个网页通过超链接关联在一起，构成一个完整的网站。只有通过超链接定义的对象，才能在单击后进行跳转。如果网页内容较多，页面过长，就可以通过锚点链接来提高检索速度。定义超链接时，为了提高用户体验，经常需要为超链接指定不同的状态，使得超链接在单击前、单击后和鼠标指针悬停时的样式不同。在CSS3中，通过链接伪类可以实现不同的链接状态。

●4.5案例-制作商品列表

在手机商城中，结构整齐、排列整齐的部分是使用列表结构制作的。例如：导航、商品列表等都是使用列表来制作的。这一节我们动手来实践一下。

项目五商品展示布局设置

在网页中，页面内容放在盒子模型中，页面布局过程可以看做是在页面上摆放盒子的过程。盒子模型是网页布局的基础，只有掌握了盒子模型的各种规律和特征，才可以更好地控制网页中各个元素所呈现的效果。本章将对盒子模型的概念、盒子相关属性及元素类型和转换进行详细讲解。

●5.1盒子模型及相关属性

要想随心所欲地控制页面中每个盒子的样式，除了需要知道什么是盒子，还需要掌握盒子模型的相关属性，盒子模型的相关属性就是我们前面提到边框、边距、背景、宽高等，本节将讲解盒子的构成及相关属性的意义和使用。

●5.2CSS3新增盒子模型属性

早期CSS3样式中要实现一些盒子的特殊样式，实现效果复杂、代码量较大，为了丰富网页的样式功能，去除一些冗余的样式代码，CSS3中添加了一些新的盒子模型属性，如颜色透明、圆角、阴影、渐变等。本节将对这些全新的CSS3盒子模型样式属性进行讲解。

●5.3元素的类型和转换

HTML5代码中标记符都有自己的功能和特性，在使用这些标签的时候，我们会发现有些标签可以设置宽度和高度属性，有些标签则不可以。这是因为标签有着特定的类型，不同类型的标签可以设置的属性也不同。本节将详细讲解标签元素的类型和转换方法。

●5.4案例-商品展示布局设置

分析"手机商城网站”首页的结构图，使用本章所学到的盒子模型完成商品展示区域的结构代码，再通过盒子模型的相关属性，完成商品展示区域的布局设置，使首页中商品展示区域中每一个手机图片和文字区域大小相同、效果统一、排列整齐美观。

项目六制作商品页面导航栏

在网页设计中，如果按照结构代码从上到下的默认方式进行排版，网页版面看起来会显得单调、混乱。这时就可以运用DIV+CSS对页面进行布局，将各部分模块有序排列，使网页的排版变得丰富、美观。然而什么是DIV+CSS布局？该如何运用DIV+CSS布局呢？本章将对DIV+CSS布局的相关知识做具体讲解。

●6.1元素的浮动

HTML5中每一个标签都有自己默认的排版方式，要想页面排版整齐，可以通过设置浮动将标签脱离标准文档流的控制，移动到指定的位置。浮动是页面排版中重要的属性。本节将详细讲解浮动的设置和清除浮动的方法。

●6.2元素的定位

浮动布局虽然灵活，但是它无法实现标签内容在某个特定位置的精确显示，通过定位属性（position）可以实现网页标签的精确定位。本节将讲解定位属性中定位类型和偏移量的定义和使用。

●6.3案例-制作商品页面导航

分析“手机商城网站”首页的结构图，了解要实现的功能。前面项目综合案例中已经完成了导航栏和手机品牌分类部分的结构代码和部分css样式，无序列表的默认排版使得两个区域内容都是垂直显示的。本次案例将使用本章所学的浮动和定位技术，实现导航栏在页头区域右侧指定位置横排显示，手机品牌分类区域的横排显示，并设置合适的外观效果。

项目七制作表单注册页面

在我们的实际生活中，有条理得展示数据经常会用到表格，另外在访问网页浏览信息以外，我们也是需要反馈一些信息给后台服务器的，例如注册页面的账户密码输入、网上订货页等，所以本章通过介绍表格的结构与实现、表单的构成与属性的设置来完成这些设计，通过解析制作表单注册页面是同学们掌握表格标签的应用；能够创建表格并添加表格样式；并理解表单的构成，可以快速创建表单；掌握表单相关标签，能够创建具有相应功能的表单控件；掌握表单样式，能够使用表单样式美化表单界面。

●7.1表格的框架

表格主要用于显示、展示数据，显示数据非常的规整，可读性比较好。本节以生活实际看到的新闻表格作引入，深入探讨了网页设计中表格的作用。讲解了表格标签及table标签的属性，带领同学们完成了制作表格的第一步。

●7.2表格实现及CSS3控制表格样式

如何调整表格的样式呢？本节着重介绍了＜tr＞标签、＜td＞标签的属性、＜th＞标签及其属性，通过案例演示展示整个表格的创建过程，并通过属性优化其展示效果，并且通过CSS3控制表格的边框、单元格边框、单元格宽高等进一步美化表格。

●7.3表单

表单是可以通过网络接收其他用户数据的平台，例如注册页面的账户密码输入、网上订货页等，都是以表单的形式来收集用户信息，并将这些信息传递给后台服务器，实现网页与用户间的沟通对话。本节以手机商城案例为例，介绍了表单的构成以及如何创建表单。

●7.4表单控件

表单的组成部分中最重要也是最复杂的就是input控件、tetarea控件、select控件三大控件了，为了让同学们更好得理解其含义，本节以边介绍边展示的方式让同学们直观得了解三大控件的实现方式和属性的设置。

●7.5HTML5表单新属性

在HTML5中，为了丰富表单的功能，本文重点讲解了HTML5中的新form属性、全新的表单控件、全新的input控件类型和HTML5全新的input属性。

●7.6CSS3控制表单样式

表单框架搭好后，需要进一步优化其样式效果，本节通过实际案例，讲解了在表单设计中添加CSS3样式的全过程。

●7.7案例-制作表单注册页面

手机商城中需要用到表单么？注册界面，本节通过带领同学们完成手机商城的注册界面来巩固前面章节中的知识点，实现从理论到实践的转变。

项目八插入商品音视频广告

当前Web网站中，音频和视频早已成为了网站重要的组成部分。但长久以来，音频和视频一直依赖于第三方插件，插件会给网站带来一些性能和稳定性的问题。为了提高用户体验，HTML5新增了video标签和audio标签来嵌入视频或音频，让网页的代码结构变得清晰简单，让音频和视频网站开发有了新的选择。video标签用于为页面添加视频，audio标签用于为页面添加音频。并且HTML5规范为其提供了可脚本化控制的API。本章我们就将针对音频与视频标签的使用进行学习。

●8.1视频的基本使用

HTML5使用video标签来定义视频播放器，它的功能不仅仅是一个标签而已，video标签的控制栏，实现了包括播放、暂停、进度和音量控制、全屏等功能，更重要的是我们可以自定义这些功能和控制栏的样式。

●8.2音频的基本使用

目前为止，在网页中播放音频没有固定的标准，大多数音频是通过插件（比如 Flash）来播放的，但并非所有浏览器都有同样的插件。在HTML5中提供audio标签来定义Web上的声音文件或音频流，audio标签的使用方法与video标签的使用方法基本相同。

●8.3视频和音频对象

HTML5 DOM为video和audio元素提供了类似的属性、方法和事件，它们都需要使用JavaScript来操作Audio（音频）对象和Video（视频）对象。本节就来使用JavaScript操作视频对象的常用方法、属性和事件，来实现对视频文件的加载、播放、暂停操作。

●8.4案例-插入商品音视频广告

根据项目八前3小节关于“在HTML5中使用video标签和audio标签嵌入视频和音频的基本使用方法、视频Video对象和音频Audio对象的方法、属性、事件以及使用JavaScript对视频和音频对象的操作”知识储备的学习，本小节的目标是完成项目八的案例操作“插入商品视频广告”。

项目九响应式Web设计

在前面的章节中讲解了如何使用HTML5、CSS3和JavaScript来制作网页。本章将在HTML5和CSS3的知识基础上，讲解一种新型的网页设计理念——响应式Web设计。响应式网站可以针对不同的终端显示出合理的页面，实现一次开发，多处适用。响应式Web设计之所以称之为新理念，是因为响应式不仅是一种跨终端的网页开发技术，它还颠覆了之前的网页设计思想。本章将针对响应式Web设计进行详细讲解。

●9.1响应式Web设计基础

响应式Web设计需要考虑页面在PC端和移动端设备上的呈现效果，移动端页面的显示效果与移动端设备的视口有关。本节主要讲解响应式Web设计基础内容，包括视口、媒体查询和百分比布局等，为接下来实现响应式页面实现方式打下基础。

●9.2响应式常见实现方式

本节将讲解创建响应式网页布局的两种常见的方式，分别是使用媒体查询和使用CSS3提供的弹性盒布局。运用媒体查询来实现响应式页面，主要是在特定的屏幕尺寸下编写限定条件的CSS3代码，如果满足这些限定条件，则应用相应的样式。弹性盒改进了块模型，既不使用浮动，也不会合并弹性盒容器与其内容之间的外边距，是一种非常灵活的布局方法。本节将主要讲解弹性盒常用属性以及弹性盒属性的综合运用。

●9.3案例—实现商品网站的响应式效果

学习完了《项目九—响应式Web设计》的基础知识，本节我们运用所学知识完成一个综合项目案例，将“手机商城”网站首页制作成响应式网页，能够在PC端、平板端和手机端，显示不同的布局效果。

项目十CSS3过渡、变形与动画

为追求更为直观的浏览与交互体验，用户对网站的美观性和交互性的要求越来越高。CSS3不仅可以实现页面的基本样式，还可以为页面中的元素添加过渡效果。除此之外，CSS3还可以使用animation实现更加复杂的动画，来提高用户的体验。本章将重点讲解CSS3过渡、变形与动画的使用方法。

●10.1CSS3过渡

在CSS3之前，由于没有过渡属性transition，当修改CSS3样式时，CSS3样式属性值就会瞬间变成修改后的值，此时CSS3样式的变化是没有过渡效果的，这样会直接影响到用户的体验。过渡其实就是一个简单的动画效果，它可以实现网页中常用的过渡效果。本节讲解transition属性的基本语法。

●10.2CSS3变形

大家平时在浏览网页时，经常会看到一些炫酷的网页特效，如鼠标滑过一张图片，这张图片就会旋转、缩放或倾斜，像这样的效果是如何实现的呢？其实，这些效果都可以通过CSS3中的2D、3D转换来实现。本节将详细讲解如何使用transform属性实现元素的变形效果。

●10.3CSS3动画

在网页开发中，为了让页面效果丰富精彩，我们经常需要给页面添加一些动画效果。CSS3提供了强大的动画功能，可以实现许多动画效果。一个完整的CSS动画由两部分构成，分别是“一组定义的动画关键帧”和“描述该动画的CSS3声明”，前者使用@keyframes创建，后者使用animation属性声明。本节我们来学习@keyframes规则和animation属性。

●10.4案例—设置过渡与旋转效果

学习完了《项目十—CSS3过渡、变形与动画》的基础知识，本节我们运用所学知识完成一个综合项目案例，为“手机商城”网站首页中的手机图片设置过渡与旋转效果。

项目十一HTML5画布

在过去的很长一段时间里，网页显示图像是用jpg、png等嵌入式图像格式，动画通常是由Flash实现的。在网页中，我们可以使用HTML5的＜canvas＞标签来创建画布，由于Canvas需要依赖于JavaScript才能完成一系列操作，本项目将会讲解JavaScript基础知识和Canvas网页图形绘制。

●11.1JavaScript基础知识

JavaScript是一门简单的脚本语言，是前端开发中一个重要的角色，主要用于开发交互式的Web页面。本节对JavaScript引入方式、变量进行讲解。我们想要在JavaScript中操作某个标签，首先要获取该标签的属性。在JavaScript中通过document对象及其方法可以获取标签属性，如id、name和class等属性。

●11.2Canvas绘图基本步骤

HTML5中为我们提供了一种全新的画布功能，即运用＜canvas＞标签让用户轻松地在网页中绘制图形、文字、图片等。Canvas表示画布，现实生活中的画布是用来作画的，HTML5中的Canvas与之类似，我们可以称它为“网页中的画布”。它不是通过鼠标“绘画”，用户需要通过JavaScript来控制画布中的内容，如添加图片、线条、文字等。本节我们将会讲解HTML5画布绘制图形的步骤。

●11.3Canvas常用方法

Canvas提供的相关属性和方法绘制基本图形外，getContext(‘2d’)对象作为HTML5的内建对象，它还提供了快速绘制矩形、圆形、字符以及添加图像的方法。

●11.4案例-涂鸦板

大家对计算机中的画图软件应该很熟悉，画图工具中的画笔功能就像现实生活中的画笔，可以在画板上画出任意图形。本节将带领大家使用Canvas完成一个网页涂鸦板。