《网站建设与网页设计》教案.docx

标签：

表示文档、页面、应用程序或网站中一体化的内容。

标签：

代表与页面内容相关、有别于主要内容的部分。

标签：

代表段或者节的标题。

标签：

表示日期和时间。

标签：

文档中需要突出的文字。

案例讲解

4.4.2音频和视频

音频和视频格式

音频标签

案例讲解

4.4.3canvas绘图

创建

…

案例讲解

4.4.4小结

HTML5中视频音频的插入方法与早期版本有所不同，使用不同的标签插入音频和视频，让HTML代码更规范严格，此外增加的

第5讲canvas绘图

5.1教学目的和要求

1.掌握创建

2.掌握通过JavaScript绘制基本图形的方法；

3.了解各种特殊图形的绘制方法；

4.了解HTML5的发展前景

5.2教学重点和难点

1.构建绘图环境；

2.绘制基本图形。

5.3教学方法及手段

实例教学，讲授与演示结合。

5.4教学内容

5.4.1构建绘图环境

大多数

getContext（）方法返回一个用于在画布上绘图的环境，其语法如下：

canvas.getContext（contextID）

参数contextID指定了用户想要在画布上绘制的类型。

“2d”，即二维绘图，这个方法返回一个上下文对象CanvasRenderingContext2D，该对象导出一个二维绘图API。

5.4.2通过JavaScript绘制图形的基本原理

在画布上绘图的核心是上下文对象CanvasRenderingContext2D，用户可以在JavaScript代码中使用getContext（）方法渲染上下文进而在画布上显示形状和文本。

JavaScript使用getElementById方法通过canvas的id定位canvas元素，例如以下代码：

varmyCanvas=document.getElementById（'myCanvas'）;

5.4.3绘制矩形

（1）绘制填充的矩形

fillRect（）方法用来绘制填充的矩形，语法格式为：

fillRect（x,y,weight,height）

其中的参数含义如下：

x,y：

矩形左上角的坐标。

weight,height：

矩形的宽度和高度。

说明：

fillRect（）方法使用fillStyle属性所指定的颜色、渐变和模式来填充指定的矩形。

（2）绘制矩形轮廓

strokeRect（）方法用来绘制矩形的轮廓，语法格式为：

strokeRect（x,y,weight,height）

其中的参数含义如下：

x,y：

矩形左上角的坐标。

weight,height：

矩形的宽度和高度。

说明：

strokeRect（）方法按照指定的位置和大小绘制一个矩形的边框（但并不填充矩形的内部），线条颜色和线条宽度由strokeStyle和lineWidth属性指定。

【案例3-7】绘制填充的矩形和矩形轮廓。

5.4.4绘制直线

（1）lineTo（）方法

lineTo（）方法用来绘制一条直线，语法格式为：

lineTo（x,y）

其中的参数含义如下：

x,y：

直线终点的坐标。

说明：

lineTo（）方法为当前子路径添加一条直线。

这条直线从当前点开始，到（x,y）结束。

当方法返回时，当前点是（x,y）。

（2）moveTo（）方法

在绘制直线时，通常配合moveTo（）方法设置绘制直线的当前位置并开始一条新的子路径，其语法格式为：

moveTo（x,y）

其中的参数含义如下：

x,y：

新的当前点的坐标。

说明：

moveTo（）方法将当前位置设置为（x,y）并用它作为第一点创建一条新的子路径。

如果之前有一条子路径并且它包含刚才的那一点，那么从路径中删除该子路径。

【案例3-8】绘制一条直线

5.4.5绘制圆弧或圆

arc（）方法使用一个中心点和半径，为一个画布的当前子路径添加一条弧，语法格式为：

arc（x,y,radius,startAngle,endAngle,counterclockwise）

其中的参数含义如下：

x,y：

描述弧的圆形的圆心坐标。

radius：

描述弧的圆形的半径。

startAngle,endAngle：

沿着圆指定弧的开始点和结束点的一个角度。

这个角度用弧度来衡量，沿着x轴正半轴的三点钟方向的角度为0，角度沿着逆时针方向而增加。

counterclockwise：

弧沿着圆周的逆时针方向（TRUE）还是顺时针方向（FALSE）遍历。

说明：

这个方法的前5个参数指定了圆周的一个起始点和结束点。

调用这个方法会在当前点和当前子路径的起始点之间添加一条直线。

接下来，它沿着圆周在子路径的起始点和结束点之间添加弧。

最后一个counterclockwise参数指定了圆应该沿着哪个方向遍历来连接起始点和结束点。

【案例3-10】绘制圆弧和圆。

5.4.6绘制文字

（1）绘制填充文字

fillText（）方法用于填充方式绘制字符串，语法格式为：

fillText（text,x,y,[maxWidth]）

其中的参数含义如下：

text：

表示绘制文字的内容。

x,y：

绘制文字的起点坐标。

maxWidth：

可选参数，表示显示文字的最大宽度，可以防止溢出。

（2）绘制轮廓文字

strokeText（）方法用于轮廓方式绘制字符串，语法格式为：

strokeText（text,x,y,[maxWidth]）

【案例3-11】绘制填充文字和轮廓文字。

5.4.7绘制渐变

（1）绘制线性渐变

createLinearGradient（）方法用于创建一条线性颜色渐变，语法格式为：

createLinearGradient（xStart,yStart,xEnd,yEnd）

其中的参数含义如下：

xStart,yStart：

渐变的起始点的坐标。

xEnd,yEnd：

渐变的结束点的坐标。

（2）绘制径向渐变

createRadialGradient（）方法用于创建一条放射颜色渐变，语法格式为：

createRadialGradient（xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd）

其中的参数含义如下：

xStart,yStart：

开始圆的圆心坐标。

radiusStart：

开始圆的半径。

xEnd,yEnd：

结束圆的圆心坐标。

radiusEnd：

结束圆的半径。

addColorStop（）方法在渐变中的某一点添加一个颜色变化，语法格式为：

addColorStop（offset,color）

【案例3-12】绘制线性渐变和径向渐变

5.4.8绘制图像

canvas相当有趣的一项功能就是可以引入图像，它可以用于图片合成或者制作背景等。

只要是Gecko排版引擎支持的图像（如PNG、GIF、JPEG等）都可以引入到canvas中，并且其它的canvas元素也可以作为图像的来源。

用户可以使用drawImage（）方法在一个画布上绘制图像，也可以将源图像的任意矩形区域缩放或绘制到画布上，语法格式为：

格式一：

drawImage（image,x,y）

格式二：

drawImage（image,x,y,width,height）

格式三：

drawImage（image,sourceX,sourceY,sourceWidth,sourceHeight,destX,destY,destWidth,destHeight）

【案例3-13】绘制图像

5.4.9小结

HTML5最强大的生命力体验在其破除了应用在不同操作系统和机型之间的障碍，具有巨大的跨平台优势。

这就意味着，基于HTML5的开发应用，可以在搭载不同操作系统的终端上运行，这对广大开发者来说绝对是一个福音。

再加上其应用的广泛性，可以便捷地完成目前所需的各种应用，包括支持文字、图片、视频、游戏，且不需要任何插件的帮助。

第6讲CSS基础

6.1教学目的和要求

1.了解CSS的基本概念、发展及CSS3的特点；

2.掌握CSS的代码规范；

3.掌握CSS与HTML文档的结合方法；

4.掌握CSS的定义组成；

5.掌握CSS的长度、百分比单位和色彩单位。

6.2教学重点和难点

1.CSS的使用规则；

2.CSS的定义组成。

6.3教学方法及手段

实例教学，讲授与演示结合。

6.4教学内容

6.4.1CSS概述

CSS的基本概念

CSS（CascadingStyleSheets，层叠样式表单）简称为样式表，是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

CSS的发展历史

CSS3的特点

Web开发者可以借助CSS3设计圆角、多背景、用户自定义字体、3D动画、渐变、盒阴影、文字阴影、透明度等来提高Web设计的质量，开发者将不必再依赖图片或者Javascript去完成这些任务，极大地提高了网页开发效率。

CSS的代码规范

6.4.2CSS与HTML文档的结合方法

定义内部样式表

定义行内样式表

链入外部样式表

导入外部样式表

6.4.3CSS的定义组成

CSS的定义是由3个部分构成：

选择符（selector）、属性（attribute）和属性的取值（value）。

其语法为：

selector{attribute:

value}/*（选择符{属性：

属性值}）*/

CSS选择符可以分为很多类，包括：

类型选择符，class类选择符，id选择符，通用选择符，分组选择符，包含选择符，元素指定选择符，子对象选择符，属性选择符。

下面讲解几种常用的选择符。

6.4.4CSS的属性单位

长度单位

百分比单位

色彩单位

6.4.5小结

CSS对于网页设计是非常重要的，它就像是网页的化妆师，可以让同一内容的网页同时具有多种不同的风格，它让网页的内容和样式分离，这种设计方式加快了网页的显示速度以及网站的执行效率。

第7讲CSS选择符

7.1教学目的和要求

1.掌握CSS常用的选择符；

2.掌握多重样式表的层叠规则。

7.2教学重点和难点

1.常用选择符的类型及应用场合；

2.层叠样式表的使用。

7.3教学方法及手段

实例教学，讲授与演示结合。

7.4教学内容

7.4.1类型选择符

类型选择符是指以某个HTML标签为对象，设置其样式规则。

案例讲解

7.4.2class类选择符

在应用时只要在标签中指定它属于哪一个类，就可以使用该类的样式了。

其格式为：

标签1.类名称1{属性:

属性值;属性:

属性值…}

标签2.类名称2{属性:

属性值;属性:

属性值…}

…

标签3.类名称n{属性:

属性值;属性:

属性值…}

-->

案例讲解

7.4.3id选择符

id选择符用来对某个单一元素定义单独的样式。

定义id选择符时要在id名称前加上一个“#”号。

格式为：

#id名1{属性:

属性值;属性:

属性值…}

#id名2{属性:

属性值;属性:

属性值…}

…

#id名n{属性:

属性值;属性:

属性值…}

-->

案例讲解

7.4.4span选择符

标签也可以用来定义区域，但一般用于网页中某一个小问题段落。

其格式为：

…或…。

案例讲解

7.4.5div选择符

div（division，部分的简写）在功能上与span相似，最主要的差别在于，div是一个块级标签。

其格式为：

…