网页设计教案1Word文件下载.docx
《网页设计教案1Word文件下载.docx》由会员分享，可在线阅读，更多相关《网页设计教案1Word文件下载.docx（26页珍藏版）》请在冰点文库上搜索。
网页制作概述、Web基本介绍
授课时间
2课时
教学目的
1.对网站及网页有一定的认识，激发学生学习网页设计的兴趣
2.了解网页中包含的基本元素
3.了解Web的一些基本术语
教学重难点
认识网页与网站，了解其中的基本术语
教学过程
1.网页实例展示
2.分析网页设计的基本流程和网页元素
3.Web的特点和结构介绍
授课内容
1.网页中常包含的元素：
文本、图像、动画、声音、视频
2.什么是WWW？
WorldWideWeb，简称为Web（万维网）。
WWW是一个全球性的信息系统，使计算机能够在Internet上相互传送基于超媒体的数据信息。
WWW也可以用来建立Intranet（企业内部网）的信息系统。
3.WWW的特点
分布式的信息资源；
统一的用户界面；
支持各种信息资源和各种媒体的演播；
广泛的用途。
4.WWW的结构
Web是成千上万个网站连结而成的页面式网络信息系统。
是采用“客户机/服务器”（C/S）结构。
5.静态网页和动态网页
静态网页是从放置到服务器以后，直到发送给浏览器不会发生更改的网页，通常用HTML语言编写其代码，保存为.htm或.html文件。
动态网页是在发送到浏览器之前由应用程序服务器修改的网页。
动态网页的源文件可用HTML语言和VBScript或JavaScript等脚本语言编写，保存为.asp文件，也称为Web应用程序。
1.4HTML基础
4课时
1.了解HTML文档的基本结构
2.掌握各种标记的结构、作用及书写方法
重点：
各种标记的应用
难点：
表格标记
1.概念讲解
2.实例操作
一、什么是HTML？
超文本标记语言（HTML，HyperTextMarkupLanguage）是用于设计网页源文件（网页文档）的语言。
每一个页面的代码保存为一个网页源文件（.htm或.html文件）。
HTML包括一些定义页面内容和格式的符号，称为标记。
它能够将文本、图像、声音和动画结合在一个网页文档中。
这些文档可以通过Web浏览器显示，还可以通过超链接以访问其它的信息资源。
二、什么是标记？
标记是网页文档中的一些有特定意义的符号。
这些符号指明如何显示文档中的内容。
标记总是放在三角括号中，大多数标记都成对出现（有开始标记和结束标记）。
结束标记和开始标记所用的字符相同，只是前面加一个斜杠。
1.HTML文档的结构标记【例1】
2.格式标记
（1）<
p>
…<
/p>
（段落标记）
用来创建一个段落，在此标记之间的文本将按照段落的格式显示。
（2）<
br>
（换行标记）
（3）<
blockquote>
/blockquote>
（两边缩进标记）
在此标记之间的文本将按照两边缩进的方式显示。
（4）<
dl>
<
/dl>
dt>
/dt>
dd>
/dd>
（列表标记）
【例2】
（5）<
ol>
/ol>
ul>
/ul>
li>
/li>
（有数字或圆点的列表标记）
【例3】
（6）<
div>
/div>
（分段标记）
3.文本标记
h1>
/h1>
……<
h6>
/h6>
（六级标题标记）
<
是最大的标题，<
则是最小的标题。
b>
/b>
i>
/i>
u>
/u>
（字体标记）
em>
/em>
strong>
/strong>
（强调加重标记）
font>
/font>
（字体的大小颜色标记）
【例4】
可以指定输出文本的字体大小、颜色，它主要两个属性size和color。
4.链接标记【例5】
ahref="
地址"
>
/a>
（超链接标记）
Ø
链接对象为文本时（例：
"
XX<
）
链接对象为图像时，需使用<
imgsrc="
标记指定图像。
（例：
d:
\pic1.gif"
href的值也可以是mailto:
形式，即发送E-Mail形式。
语法为：
mailto:
E-Mail地址"
具有target属性，用来指明显示的目标窗口。
（2）<
aname="
标签名"
（标签标记）——建立锚点
5.图像标记和多媒体标记
（1）图像标记：
imgsrc=”图像文件名”>
【例6】
（2）多媒体标记【例7】
直接将音乐或影像嵌入网页，使用<
embed>
标记
embedsrc=”名称”width=”宽度”height=”高度”autostart=”true”loop=”次数”/>
播放网页背景音乐,使用<
bgsound>
bgsoundsrc=”音乐文件名”loop=”次数”/>
6.表格标记（用于制作表格或网页结构）
【例8】
table>
/table>
（创建一个表格）
tr>
/tr>
和<
td>
/td>
（创建表格中的每一行和每一格）
th>
/th>
（创建表格头）
7.表单标记（用于制作对话框）
【例9】
8.其他常用标记【例10】
（1）空格标记&
nbsp
（2）自动切换标记<
meta>
——可使网页显示几秒种后，自动切换到另一网页。
metahttp-equiv=”refresh”content=”秒数;
URL=文件名称或网址”>
（3）水平线标记<
hr>
（4）滚动的文本标签<
marquee>
marqueedirection=”方向”behavior=”方式”loop=”次数”scrollamount=”速度”scrolldelay=”延时”Width="
n%"
onMouseOver=this.stop（）onMouseOut=this.start（）>
/marquee>
第4章DreamweaverCS3入门
本章包括7节内容，其中4.3插入表格和4.4插入多媒体对象是本章的重点内容。
本章理论授课有6个课时。
4.1文本及排版
1课时
1.熟悉Dreamweaver的界面
2.掌握在Dreamweaver中文本的插入方法
3.能够熟练使用属性面板设置文本格式
文本的插入和格式设置
1.站点的建立与管理
2.属性面板的应用
1.安装Dreamweaver，软件介绍
2.软件界面讲解
3.创建与管理站点
4.实例分析
5.结合HTML标记知识，介绍文本的插入与格式设置方法
6.文本格式化的实例讲解
一、Dreamweaver界面介绍、站点管理
Dreamweaver主要由菜单栏、工具栏、制作窗口、属性面板以及右侧的一些面板组成。
要使用此软件制作网页，第一步、也是最关键的一步就是创建站点。
【演示站点的创建与管理过程】
二、插入文本
1.插入文本的方法
直接输入法；
复制粘贴法；
导入已有Word文档
2.插入特殊符号
三、格式化文本【例1】
1.设置字符格式
使用属性面板，选择字体、设置文字的大小及颜色
2.使用段落和标题
属性面板中的“格式”下拉列表框
段落——<
标签的默认格式
标题——<
、<
h2>
标签
3.对齐文本
“属性面板”>
“对齐方式”（右对齐、居中、左对齐、两端对齐）
4.缩进与扩展——使得内容在<
对标签之间
5.首行缩进
四、创建项目列表【例2】
1.项目列表（几何符号来表示其列表关系）
2.有序项目列表（编号列表）
3.嵌套项目列表（列表显示不同级别的文本内容）——配合使用缩进与扩展按钮
4.2设置文件头和网页属性
1.了解网页的编码方式
2.掌握添加网页关键字和设置网页刷新的方法
理解网页编码的含义
插入meta对象的方法
1.讲解网页文件头设置的意义及方法
2.实例演示
选择菜单“查看”>
“文件头内容”
1.设置网页的编码
UTF-8是一种被广泛应用的编码，致力将全球语言纳入统一的编码；
GB2312是简体中文编码。
2.设定文档标题——等同于在<
title>
/title>
之间添加标题
3.设置网页的刷新
4.添加关键字——协助网络索引擎寻找网页
5.插入meta对象（记录有关当前页面的信息）
设置刷新代码：
metahttp-equiv="
Refresh"
content="
5;
URL=1font.html"
/>
设置网页编码：
Content-Type"
content="
text/html;
charset=utf-8"
4.3插入表格
1.掌握表格的制作与编辑方法
2.能够熟练应用表格布局页面
表格的制作与编辑
使用表格进行页面布局
1.制作与编辑表格的操作演示
2.综合实例讲解
一、制作表格【例1】
1.插入表格
设置表格的行数和列数
设置表格的宽度，单位有像素、百分比两种
设置表格边框，边框若为0则不显示边框，在设计页面中以虚线表示
单元格边距：
单元格边框与内容之间的距离
单元格间距：
单元格与单元格间的距离值
带有页眉的单元格为<
，文本被加粗并居中
2.制作嵌套表格
在表格中再插入新的表格，在页面布局中特别常用
二、编辑表格【例2】
1.选择表格
2.选择行列
选择可以直接运用鼠标点击进行选取，也可以点击标记来选取
3.选定单元格（按住键盘的Ctrl键，可选择多个不相邻的单元格）
4.合并与拆分单元格→使用属性面板
5.插入行列
插入单行/列：
右键“表格”→插入行/列（插在上或前）
插入多行/列：
右键“表格”→“插入行或列”
6.删除行列
7.隐藏单元格之间的分隔线【例3】
（1）控制单元格边框的显示（参数rules取值）
cols——只显示单元格列边框
rows——只显示单元格行边框
none——不显示单元格边框
all——显示所有单元格边框
（2）控制表格外边框的显示（参数frame取值）
vsides——只显示表格左右边框
hsides——只显示表格上下边框
lhs——只显示表格左边框
rhs——只显示表格右边框
above——只显示表格上边框
below——只显示表格下边框
void——不显示表格边框
三、表格的综合应用【例4】
1.插入表格（运用表格布局）
2.表格与单元格属性设定（边框、高、宽、背景、对齐方式、边框显示与隐藏）
3.文本样式设定
4.4-4.5插入多媒体对象和JavaApplet
1.掌握图像的使用方法
2.掌握Flash对象的插入与属性设置方法
3.掌握音视频的插入方法
4.了解JavaApplet
1.图像的插入与属性设置
2.Flash按钮和文本的插入、Flash背景透明的参数设定
3.音视频的插入方法
4.JavaApplet的应用
1.Flash按钮和文本的应用
2.插件的使用
1.回忆上节内容，复习table布局实例中的知识点
2.讲解多媒体的插入方法与属性
3.操作演示
一、使用图像
1.插入图像
2.鼠标经过图像
3.设置图像属性（图像大小、源文件、链接地址、边框、对齐方式、边距）
二、插入Flash对象
1.插入Flash动画
要使Flash背景透明，设置参数wmode值为transparent
2.插入flash按钮
3.使用Flash文本对象
4.插入Flashpaper
5.图像查看器
菜单“插入记录”>
“媒体”>
“图像查看器”
三、插入音视频对象
1.插入FlashVideo（只能插入格式为.flv的视频）
2.插入Shockwave影片（插入格式为.dcr/.dir/.dxr的视频）
3.插入ActiveX
4.插入插件——等同于添加embed标签
四、插入JavaApplet
JavaApplet嵌入在WWW页面，作为页面的组成部分被下载，并能运行在实现Java虚机器的web浏览器中。
【例】插入多媒体对象
4.6-4.7创建超链接、Dreamweaver新增功能
1.掌握超链接的创建方法
2.了解spry框架的应用方法
超链接的创建
1.知识讲解
2.操作演示
一、地址和链接
要创建从exercise目录下的images.html到站点根目录下的index.html的链接，链接地址应是“../index.html”。
要创建到exercise目录下的images.html的链接，任何文件中的链接地址都可以写成“/exercise/images.html”。
绝对地址：
适用与创建外部链接。
如
1.文件地址文件相对地址
相对地址
根目录相对地址
内部链接：
超级链接的是站点目录外的文件
2.超级链接
外部链接：
超级链接的是站点目录内的文件
二、添加链接
1.添加外部链接（文字/图像）
2.添加内部链接
方法一：
选择文件方式
方法二：
拖放定位图标方式
3.添加E-mail链接
“电子邮件链接”
在链接地址中输入mailto:
**@**
三、书签链接和热点链接
1.书签链接
2.热点链接
【例】创建超级链接
四、Spry框架【例】
“插入”工具栏中Spry栏，可插入Spry菜单栏、Spry选项卡式面板、Spry折叠式、Spry可折叠面板
第5章网页布局和框架
网页主要采用表格、框架来布局，另外在网站制作过程中，网页模板的运用是非常普遍的。
因此，在本章中介绍表格的布局模式、框架和网页模板这几部分的内容，共授课6课时。
5.1-5.5表格布局模式的应用
1.了解网页布局的几种方法
2.了解运用布局模式进行页面布局
3.学会使用标尺与网格
在布局模式中绘制布局表格和布局单元格
1.嵌套布局表格的应用方法
2.布局表格与布局单元格的属性设置
1.知识引入
2.操作讲解
5.1布局模式
切换到“布局”模式
“查看”>
“表格模式”>
“布局模式”
按Alt+F6
5.2绘制布局表格和布局单元格
一、绘制布局表格
二、绘制布局单元格（布局单元格只能出现在布局表格内部）
三、绘制嵌套布局表格
5.3使用标尺与网格
一、使用标尺（菜单“查看”>
“标尺”>
“显示”）
二、使用网络（菜单“查看”>
“网格设置”）
5.4调整布局表格及布局单元格
一、选择布局表格和布局单元格
二、调整布局表格和布局单元格的大小
三、移动嵌套布局表格和布局单元格
四、设置布局表格和布局单元格属性
五、设置列宽
1.使用间隔图像
2.列设置为自动伸展
3.列设置为固定宽度
5.5设置布局模式的首选参数
“编辑”>
“首选参数”>
“分类”>
“布局模式”
5.6框架的使用
3课时
1.掌握框架的使用方法
2.能够运用框架进行页面布局，在框架中实现几个页面的切换
3.能够灵活应用嵌入式框架
1.框架的创建、选择、保存与属性设置
2.嵌入式框架的应用
1.框架的修改与保存
2.运用属性面板设置框架与框架集的属性
3.嵌入式框架的属性设置
1.复习上次课内容
2.创设情境、提供框架实例
3.知识讲解
4.操作演示
一、框架与框架集
框架:
是浏览器窗口中的一个区域，它可以显示与浏览器窗口其余部分所显示内容无关的HTML文档。
框架集:
定义了一组框架的布局和属性，包括框架的数目、大小和位置，以及在每个框架中的初始页面的URL。
【框架集文件本身不包含要在浏览器中显示的HTML内容，它只是向浏览器提供应如何显示一组框架以及在这些框架中应显示哪些文档的有关信息。
】
二、创建框架和框架集
1.创建框架（工具栏“插入”>
“布局”>
“框架”）
2.设计框架集
（1）创建框架集：
“修改”>
“框架集”>
“选择拆分项”
（2）拆分框架：
可将框架边框从边缘拖入视图中间。
要将不在设计视图边缘的框架边框（内部的框架边框）拆分成一个框架，可在按住Alt键的同时拖动框架边框。
要将一个框架拆分成四个框架，可将框架边框从设计视图的一角拖入框架的中间。
单独拆分一个框架。
选择“窗口”>
“框架”，在框架面板上单击待拆分的框架，用光标拖动相应框架的边框。
（3）删除框架：
将框架边框拖离页面或拖到父框架的边框上
三、选择框架和框架集
1.在文档窗口中选择框架和框架集
（1）选择框架：
在设计视图中，按住Alt键的同时单击框架内部，这时在框架周围会显示一个选择轮廓。
（2）选择框架集：
单击框架集的某一内部框架边框，则在框架集周围显示一个选择轮廓。
（3）选择不同的框架或框架集
2.在“框架”面板中选择框架和框架集
选择菜单“窗口”>
“框架”，调出框架面板
四、保存框架和框架集文件（Ctrl+S）
五、设置框架和框架集属性
六、为框架设置链接
在设置链接地址后，注意选择链接目标，即指定页面显示的target
七、处理不能显示框架的浏览器
“框架集”>
“编辑无框架内容”
【例1】框架应用实例
八、嵌入式框架的应用（使用<
iframe>
/iframe>
标签）
【例2】嵌入式框架应用实例
5.7模板和库
1.掌握模板的创建和使用方法
2.了解库的作用
3.能够使用模板与库制作一个较为完整的网站
模板的创建与应用
1.模板的创建
2.可编辑区域的创建与使用
1.提供实例，进行实例分析
2.新知识讲解
3.实例操作演示
一、基本概念
模板：
用来控制大的设计区域，以及重复使用完整的布局的文件。
可以基于模板创建文档，从而使创建的文档继承模板的页面布局。
库：
是一种用来存储在整个Web站点上经常重复使用的页面元素（如图像、文本和其他对象等）的文件。
二、应用模板与库的基本操作
1.创建模板
创建模板的2种方法：
（1）修改现有文档创建模板
（2）在“资源”面板中创建空白模板
2.创建模板的可编辑区域
创建可编辑区域的3种方法：
（1）用菜单设置
选择菜单“插入”>
“模板对象”>
“可编辑区域”命令
（2）用快捷菜单
右击选择的文本或对象，在弹出的快捷菜单中选择“模板”>
“新建可编辑区域”命令。
（3）用工具栏
3.创建库项目
库是一种用来存储希望在整个网站上经常重复使用或更新的网页元素（如图像、文本和其他对象）的文件，这些网页元素被称为库项目。
使用库，可以一次更新该网站中的多个网页。
创建库项目的具体步骤：
（1）选择文档的一部分并另存为库项目；
（2）在“资源”面板中单击库图标查看库资源；
（3）将需要创建的库项目拖到“资源”面板的“库”类别中，为新创建的库项目命名。
4.在文档中插入库项目
将库项目拖到文档中需要插入库项目的地方；
或者将光标放在文档中需要插入库项目的地方，在库项目列表中选择一个库项目并单击“插入”按钮。
【例】模板和库的应用
第6章CSS层叠样式表
本章主要介绍运用CSS层叠样式表来进行样式定义，在网页设计中占据重要地位，共授课4课时。
6.1CSS的基本概念
1.了解CSS定义的格式
2.掌握CSS定义的基本规则
3.能够熟练地应用CSS进行页面样式设定
重点
升级会员 