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

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

《《网站建设与网页设计》教案Word格式.docx》由会员分享，可在线阅读，更多相关《《网站建设与网页设计》教案Word格式.docx（31页珍藏版）》请在冰豆网上搜索。

strong>

i>

em>

dfn>

code>

samp>

kbd>

var>

cite>

等标签。

代码的缩进：

在编写HTML代码时要注意使用代码缩进来提高程序的结构性和层次性。

1.4.3网页文件的创建过程

用记事本创建网页

用DW软件创建网页

1.4.4搭建支持HTML5的浏览器环境

目前，Microsoft的IE系列（仅有IE9及其以上版本）浏览器，以及OperaSoftware的Opera与Google的Chrome浏览器。

1.4.5小结

本次课主要讲述了网页设计的步骤和要点以及HTML5的新特征。

第2讲HTML标签

2.1教学目的和要求

1.掌握基本的文字与段落标签的使用；

2.掌握超链接、图像、表格和列表标签的使用方法和基本属性；

3.能够进行基本的网页排版。

2.2教学重点和难点

1.各类标签的使用方法和属性设置；

2.嵌套列表的使用。

2.3教学方法及手段

2.4教学内容

2.4.1文字与段落排版

注释标签<

!

--…-->

强制换行标签<

br/>

段落标签<

p>

…<

/p>

定位标签<

div>

/div>

水平线标签<

hr/>

标题文字标签<

h#>

/h#>

2.4.2超链接

锚点标签

指向其他页面的链接

指向本页中的链接

指向下载文件的链接

指向电子邮件的链接

2.4.3图像

图像标签<

img>

用图像作为超链接热点

2.4.4表格

简单表格格式

表格内文字的对齐方式

表格在页面中的对齐方式

2.4.5列表

无序列表<

ul>

li>

/ul>

有序列表<

ol>

/ol>

嵌套列表的使用（案例讲解）

2.4.6小结

本次课主要讲述了HTML5中常用的标签，灵活掌握各类标签的使用方法的属性设置，重点介绍了嵌套列表在网页设计中的应用。

第3讲表单

3.1教学目的和要求

1.了解表单的工作原理；

2.掌握表单标签的基本格式；

3.掌握<

input>

元素、选择栏<

select>

和多行文本域<

textarea>

的用法；

4.掌握使用表单实现浏览者与网站之间信息交互的方法。

3.2教学重点和难点

1.<

元素中type属性的值；

2.表章提交数据的意义；

3.3教学方法及手段

3.4教学内容

3.4.1表单的工作原理

表单的作用是从客户端收集信息。

当访问者在表单中输入信息，单击提交按钮后，这些信息将被发送到服务器，服务器端脚本或应用程序将对这些信息进行处理。

服务器进行响应时，会将被请求信息发送回用户（或客户端），或者基于该表单内容执行一些操作。

3.4.2表单标签

网页上具有可输入表项及项目选择等控制所组成的栏目称为表单。

form>

标签用于创建供用户输入的HTML表单。

表单的基本语法及格式为：

formname="

表单名"

action="

URL"

method="

get|post"

>

…

/form>

3.4.3表单元素

元素

用来定义用户输入数据的输入字段，根据不同的type属性，输入字段可以是文本字段、密码字段、复选框、单选按钮、按钮、隐藏域、电子邮件、日期时间、数值、范围、图像、文件等。

元素的基本语法及格式为：

inputtype="

表项类型"

name="

表项名"

value="

默认值"

size="

x"

maxlength="

y"

/>

选择栏<

选择栏可分为两种：

弹出式和字段式。

标签的格式为：

selectsize="

控制操作名"

multiple>

<

option…>

…<

/option>

/select>

option>

optionselectedvalue="

可选择的内容"

多行文本域<

/textarea>

在意见反馈栏中往往需要浏览者发表意见和建议，且提供的输入区域一般较大，可以输入较多的文字。

使用<

标签可以设置允许成段文字的输入，格式为：

textareaname="

文本域名"

rows="

行数"

cols="

列数"

多行文本

其中的行数和列数是指不拖动滚动条就可看到的部分。

3.4.4表单的高级用法

案例讲解

在某些情况下，用户需要对表单元素进行限制，设置表单元素为只读或禁用，常应用于以下场景：

只读场景：

网站服务器不希望用户修改的数据，这些数据在表单元素中显示。

例如，注册或交易协议、商品价格等。

禁用场景：

只有满足某个条件后，才能选用某项功能。

例如，只有用户同意注册协议后，才允许单击“注册”按钮。

只读和禁用效果分别通过设置“readonly”和“disabled”属性来实现。

3.4.5小结

表单中的所有元素都只能放在一个表单元素中，作为一个完整的数据一起提交，HTML5对各种元素设置了一些新的属性来约束用户的输入，丰富了表单的表现力。

第4讲HTML高级应用

4.1教学目的和要求

1.了解文档结构元素的特点与应用场合；

2.掌握使用结构元素构建网页布局的方法；

3.掌握音频和视频的基本格式以及<

audio>

video>

标签的使用方法；

4.了解canvas绘图的基本原理。

4.2教学重点和难点

标签的使用；

2.<

canvas>

元素的创建与基本原理。

4.3教学方法及手段

4.4教学内容

4.4.1使用结构元素构建网页布局

HTML5中的主要文档结构元素包括：

section>

标签：

代表文档中的一段或者一节。

nav>

用于构建导航。

header>

页面的页眉。

footer>

页面的页脚。

article>

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

aside>

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

hgroup>

代表段或者节的标题。

time>

表示日期和时间。

mark>

文档中需要突出的文字。

4.4.2音频和视频

音频和视频格式

音频标签<

和视频标签<

与<

embed>

比较

4.4.3canvas绘图

创建<

元素：

是HTML5新增元素，只有较高版本的IE浏览器才支持该元素，用于在网页中创建一个画布，具体的使用方法为：

canvasid="

画布标识"

width="

画布宽度"

height="

画布高度"

/canvas>

4.4.4小结

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

元素扩展了HTML的绘图功能，增强了网页的展现力。

第5讲canvas绘图

5.1教学目的和要求

1.掌握创建<

元素、构建绘图环境的方法；

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

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

4.了解HTML5的发展前景

5.2教学重点和难点

1.构建绘图环境；

2.绘制基本图形。

5.3教学方法及手段

5.4教学内容

5.4.1构建绘图环境

大多数<

绘图API都没有定义在<

元素本身上，而是定义在通过画布的getContext（）方法获得的一个“绘图环境”对象上。

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

canvas.getContext（contextID）

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

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

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

元素只是图形容器，其本身是没有绘图能力的，所有的绘制工作必须在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）

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

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

5.4.4绘制直线

（1）lineTo（）方法

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

lineTo（x,y）

直线终点的坐标。

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

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

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

（2）moveTo（）方法

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

moveTo（x,y）

新的当前点的坐标。

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

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

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

5.4.5绘制圆弧或圆

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

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

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

radius：

描述弧的圆形的半径。

startAngle,endAngle：

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

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

counterclockwise：

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

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

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

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

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

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

5.4.6绘制文字

（1）绘制填充文字

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

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

text：

表示绘制文字的内容。

绘制文字的起点坐标。

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）

开始圆的圆心坐标。

radiusStart：

开始圆的半径。

结束圆的圆心坐标。

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类选择符

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

styletype="

text/css"

--

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

属性值;

属性:

属性值…}

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

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

-->

/style>

7.4.3id选择符

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

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

格式为：

#id名1{属性:

#id名2{属性:

#id名n{属性:

7.4.4span选择符

span>

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

spanid="

样式名"

/span>

或<

spanclass="

7.4.5div选择符

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

divid="

divclass="

7.4.6通用选择符

通用选择符指选定文档对象模型（DOM）中的所有类型的单个对象，是一种特殊的选择符，它用*表示。

*｛CSS代码｝

7.4.7通用兄弟元素选择符E~F

通用兄弟元素选择符E~F用来指定位于同一个父元素之中的某个元素的之后的所有其他某个种类的兄弟元素所使用的样式。

E~F：

{att}。

7.4.8包含选择符

包含选择符能够简化代码，大范围的样式控制。

E1E2

｛

/*对子层控制规则*/

｝

7.4.9分组选择符

分组选择符指的是对多个标签设置同一样的样式。

E1,E2,E3

{/*CSS代码*/}

7.4.10属性选择符

属性选择符存在7种具体形式：

（1）E[att]属性名选择符

（2）E[att=val]属性值选择符

（3）E[att~=val]属性值选择符

（4）E[att|=val]属性值选择符

（5）E[att^=val]属性值子串选择符

（6）E[att$=val]属性值子串选择符

（7）E[att*=val]属性值子串选择符

7.4.11伪类选择符

（1）E:

root结构性伪类选择符

（2）E:

nth-child（n）结构性伪类选择符

（3）E:

nth-last-child（n）结构性伪类选择符

（4）E:

first-child与E:

last-child结构性伪类选择符

（5）E:

only-child结构性伪类选择符

（6）E:

empty结构性伪类选择符

（7）E:

not（s）否定伪类选择符

（8）E:

target目标伪类选择符

（9）UI元素状态伪类选择符

7.4.12多重样式表的层叠

样式表的优先级别从高到低为：

行内样式表、内部样式表、链接样式表、导入样式表和默认浏览器样式表。

浏览器将按照上述顺序执行样式表的规则。

样式表的层叠性就是继承性，样式表的继承规则是：

外部的元素样式会保留下来，由这个元素所包含的其他元素继承；

所有在元素中嵌套的元素都会继承外层元素指定的属性值，有时会把多层嵌套的样式叠加在一起，除非进行更改；

遇到冲突的地方，以最后定义的为准。

7.4.13小结

不同类型的选择符适用于不同的场合，合理地使用选择符可以提高网页处理的效率，灵活处理各类选择符是本次课的重点。

第8讲Div+CSS布局方法

8.1教学目的和要求

1.了解Div布局页面的特点和优点；

2.掌握Div标签的基本用法、Div的嵌套及Div标签与Span标签的区别；

3.掌握盒模型的基本概念和属性；

4.掌握盒模型的宽度与高度；

5.掌握外边距的叠加规