网页设计
2015/10/1
辽宁对外经贸学院
1
课程介绍
网站建设
DW8的使用
通过网页对数据库进行操作
网站综合实例
2015/10/1
辽宁对外经贸学院
2
考试要求
总成绩：
平时成绩(30%)＋期末考试（70％）
平时成绩：
1.
2.
3.
4.
2015/10/1
课堂提问（包括练习）
出勤情况
平时作业
小测验成绩
辽宁对外经贸学院
3
教学内容：
1.web网站的建站流程
2. Dreamweaver 8 基础知识
3.创建本地站点的步骤
2015/10/1
辽宁对外经贸学院
4
一、网站的建站流程：
2015/10/1
规划阶段
设计阶段
制作阶段
发布上传阶段
维护管理阶段
辽宁对外经贸学院
5
1、具体流程：
1.注册域名与申请IP地址
前期
2.确定网站技术解决方案
3.规划网页内容并制作网页
4.网站的发布和推广
中期核心
后期
5.网站的更新和维护
2015/10/1
辽宁对外经贸学院
6
什么是网页？
静态：html、htm
动态：asp、aspx、jsp、php
2015/10/1
辽宁对外经贸学院
7
2、IP地址介绍
每一个接入Internet的用户都得有一个唯一的标
识记号,以便别人能够访问，这个标识记号就是
IP地址，它由IEEE（电气与电子工程师学会）
来统一分配管理。
IP地址是32位的二进制数，不容易记忆，所以每
个IP地址对应一个便于记忆的域名。
32位IP地址是Ipv4版本，提供世界约42亿地址，预计
2010年将消耗殆尽。
新的Ipv6版本为128位，“可为地球上每一粒沙子提供
一个独立的IP地址。”
2015/10/1
辽宁对外经贸学院
8
例如：辽宁对外经贸学院
域名： www.ulet.edu.cn
www.luibe.edu.cn
IP地址(占32位)
二进制：11011011 11011000 11100000
点分十进制：219.216.224.10
2015/10/1
辽宁对外经贸学院
00001010
9
域名与IP地址的关系
域名
IP地址（唯一对应）
姓名
身份证号码
域名
IP地址
DNS:Domain name system 域名解析系统
DNS的功能：域名转换为唯一对应的IP地址
2015/10/1
辽宁对外经贸学院
10
1）注册域名与申请Ip地址
⑴中国互联网络信息中心（ www.cnnic. net.cn ）
域名注册、变更、注销、转让。
由IEEE许可的可以注册域名的网站有很多，例如：
域名频道网站：www.dns110.com只要注册成功，
并交纳相应的费用，即可开通。
⑵例子：免费域名注册www.51.net虎翼网
申请成功后：主机地址：xxxx.51.net
登录帐户及码：xxxx
域名：同前
yyyy
主页文件存放目录：/public_html/
2015/10/1
辽宁对外经贸学院
11
2）确定网站技术解决方案
硬件：
⑴独立的电子商务网站
⑵利用ISP提供的服务方案
包括：a.租用虚拟主机
b.服务器托管
2015/10/1
辽宁对外经贸学院
12
软件：
⑴操作系统：UNIX、类UNIX和WIN2000
Pc机：WIN2000或Linux
小型机：UNIX
⑵web服务器软件（ Pc机）：
WIN2000：IIS＋ASP＋SQL Server
Apache (tomcat)＋JSP＋Oracle
Linux：Apache＋ MySQL ＋ PHP
L.A.M.P是开源软件的黄金组合
⑶数据库软件：
Access、Oracle、SQL Server和MySQL
⑷网页制作软件：
2015/10/1
辽宁对外经贸学院
13
⑷网页制作软件
Dreamweaver—— 自制动态HTML网页
FrontPage——制作功能强大的网页
VS.net ——制作动态网页
2015/10/1
辽宁对外经贸学院
14
3）规划网页内容并制作网页
网页:是HTML文件是一种可以WWW网上传输,
并被浏览器认识和翻译成页面显示出来的文件.
HTML:Hypertext markup language
超文本标识语言:页面内可以包含图片
链接甚至音乐 程序等非文字元素。
2015/10/1
辽宁对外经贸学院
15
二、Dreamweaver 8 简介
是Macromedia公司最新产品，它把网页
制作和网站开发有效的结合起来，具有网页设
计、网站开发、站点管理等功能。具有可视化、
支持多平台和跨浏览器的特性。是网站开发的
首选工具。
2015/10/1
辽宁对外经贸学院
16
2.需掌握的基本知识及操作
1.代码与设计视图的切换
2.标题栏的设置与修改（2种方法）
3.快捷插入面板
4.文档窗口中“*”表示什么
5.菜单中【窗口】与各个面板的对应关系
6.面板的设置：
【编辑】|【首选参数】，在分类列表中选【面板】
在“总在最上层栏”中取消不常用的面板。
2015/10/1
辽宁对外经贸学院
17
3、Dreamweaver 8 安装
Dreamweaver 所需的系统要求：
PIII 600 MHz 或更快的处理器或等效处理器
Windows 98 、 Windows 2000 、 Windows XP 或
Windows .NET Server 2003
至少 128 MB 的可用内存 （建议采用 256 MB 内存）
至少 275 MB 可用磁盘空间
能达到 1024 x 768 像素分辨率的 16 位或更高分辨率
的监视器
2015/10/1
辽宁对外经贸学院
18
4.安装IIS5.0
1. 安 装 ： 控制 面 板 添 加／删 除 程 序 添 加／ 删 除
Windows组件Internet信息服务(IIS)
2.启动或停止服务
开始设置控制面板管理工具Internet服务器
右键单击左边窗格中的本地计算机图标 “重新启动
IIS”
2015/10/1
辽宁对外经贸学院
19
三、创建本地站点
本地站点:
在本地计算机硬盘创建一个文件夹，
并把这个文件夹设置为本地站点的根文
件夹。
注意：
a:不要用中文为文件名或文件名
b:网页文件命名区分大小写
c:网站只有一个首页
d:首页文件index.htm应放在根文件夹下
e：各类文件要分别存放在该文件夹下
2015/10/1
辽宁对外经贸学院
20
1.Dreamweaver 8 的站点管理模型
1.菜单[开始][控制面板]
2.[添加/删除程序]
3.[更改/删除][确定]
4.系统开始删除
2015/10/1
辽宁对外经贸学院
21
2.创建本地站点的步骤
⑴在本地硬盘上建立一个文件夹（本地站点的根文件夹）
⑵【站点】【管理站点】－【新建】【站点】
输入站点名称、写上本地站点的根文件夹
⑶【确定】在站点管理中就出现了该站点
⑷【完成】
站点创建完成后，还可以对其重新修改和编辑：
⑴ 【站点】【管理站点】选择站点名称，单击【编辑】重新修
改站点名称和本地站点的根文件夹
⑵ 【确定】在站点管理中就出现了该站点
⑶ 【完成】
2015/10/1
辽宁对外经贸学院
22
作业：
1、创建本地站点的步骤?
2015/10/1
辽宁对外经贸学院
23
第二章 编辑网页元素
2015/10/1
辽宁对外经贸学院
24
复习提问：
一、网站的具体建站流程：
1.注册域名与申请IP地址
2.确定网站技术解决方案
3.规划网页内容并制作网页
4.网站的发布和推广
5.网站的更新和维护
2015/10/1
辽宁对外经贸学院
25
复习提问：
二、如何建立本地站点？
2015/10/1
辽宁对外经贸学院
26
教学内容：
1、网页的处理流程
2、网页文本编辑
3、网页中的图像和链接
2015/10/1
辽宁对外经贸学院
27
一、网页的处理流程
静态页面与动态页面的区别：
2015/10/1
静态页面：
设计者设计后，页面内容完全不变，web服务器在用
户请求该页面时，会原封不动地将它发给用户浏览。
动态页面：
该页面部分或全部内容是不确定的， web服务器在用
户请求该页面时，会根据用户输入的内容，选择发给
用户浏览经过它处理后的页面（部分或全部内容已更
改）。
辽宁对外经贸学院
28
静态页面与动态页面的处理流程：
应用服务器执行动态页面中的服务器
端脚本或标签，执行动作 (例如文件操
作、数据库操作、会话信息等)和生成
结果。生成结果是把原来页面中的服务
器端脚本或标签替换成一系列静态的页
面元素，生成什么页面由服务器端脚本
静态页面的处理流程如下：
或标签控制。因此，应用服务器返回给
(1)浏览器发出对静态页面的请求；
web服务器的是一个静态页面，再由
(2)Web服务器寻找该页面；
Web服务器将这个静态的结果页面传给
(3)Web服务器将该页面返回给浏览器
用户。
简单动态页面的处理流程如下：
(1)浏览器发出对动态页面的请求；
(2) Web服务器找到该页面，传给应用服务器；
(3)应用服务器扫描页面，执行代码，生成结果；
(4)应用服务器把结果页面返回给Web服务器；
(5) Web服务器发问该结果页面给浏览器。
浏览器
浏览器
请求
回答
请求
静态
动态
页面
页面
web服务器
2015/10/1
回答
web服务器
静态
页面
应用服务器
辽宁对外经贸学院
29
复杂动态页面的处理流程如下：
(1)浏览器发出对动态页面的请求；
(2)Web服务器找到该页面，传给应用服务
器；
(3)应用服务器扫描页面，执行代码；
(4)遇外部资源访问代码，应用服务器发送
资源访问命令给资源服务器；
(5)资源服务器执行资源访问命令，返回结
果数据集；
(6)应用服务器执行余下的代码，插人数据
到结果页面；
(7)应用服务器把结果页面返回给Web服
务器；
(8)Web服务器发回该结果页面给浏览器。
浏览器
请求
动态
回答
web服务器
页面
静态
页面
应用服务器
询问
记录集
数据库
2015/10/1
辽宁对外经贸学院
30
二、网页的文本编辑和基本操作
1、文件操作：创建（模板）、储存、打开、关闭网
页文件
2、插入水平线：
作用：分割页面，使页面形成两个垂直分区，这样
使页面布局更加清晰
3、输入文本和插入对象：电邮、日期、特殊字符
4、设置文本属性、项目列表
5、查找替换
6、撤销与重作
2015/10/1
辽宁对外经贸学院
31
三、在网页中插入图像
1、如何恰当的使用图像：
与网页风格相近
漂亮且富有美感
注意图片的大小（一般小于50k）
Dreamweaver 8支持的图像格式：
GIF、JPG、PNG（Firework文件格式）
2015/10/1
辽宁对外经贸学院
32
2、插入图像的基本操作
控制图像属性:
文件名、大小、链接、替代文字、边框
对齐、边距等。
鼠标经过图像
2015/10/1
辽宁对外经贸学院
33
3、 超链接和导航条的创建
1）链接路径的表示方式：
绝对路径：
在超链接中，使用完整的URL地址的链接路径。
相对路径：
在超链接中，指明目标端点与原端点的相对位置关系的路径。
基于根目录的路径：
以“/”开始，表示站点根文件夹
2015/10/1
辽宁对外经贸学院
34
绝对路径：
根据使用协议不同，URL的形式分为：
（1）http开头URL：通常指向www服务器（网址）
（2）ftp开头URL：主要用于文件的传递（上传和下载）
（3）file开头URL：主要访问本地计算机的文件信息
相对路径：
基本思想：省略当前文件和链接文件相同的绝对URL部分
（1）当前文件和链接文件处于相同文件夹，直接输入文件名
（2）链接文件处于当前文件的子文件夹中，“子文件夹/文件名”
（3）链接文件处于当前文件的父文件夹中，“../文件名”
基于根目录的路径：
以“/”开始，表示站点根文件夹，“/文件夹名/文件名”
2015/10/1
辽宁对外经贸学院
35
2）图片链接和图片热点链接
创建超链接的HTML标记: （又称锚标记或a标记）
<a href=“home.htm”>主页</a>
外部链接
2015/10/1
辽宁对外经贸学院
36
3）锚记链接（又称书签）
步骤：
（1）插入锚记
（2）设置锚记链接
（还可以设置到其它网页的锚点）
2015/10/1
辽宁对外经贸学院
37
4） 创建导航条
由一个或多个图像组成，根据用户
的动作而改变。
创建导航条图像集，该图像集可以
表示导航条的4种状态：
（1）初始状态
（2）鼠标经过状态
（3）按下状态
（4）按下鼠标时的经过状态
2015/10/1
辽宁对外经贸学院
38
第3章 使用表格布局页面
2015/10/1
辽宁对外经贸学院
39
课前复习提问：
一、根据使用协议不同，URL的形式分为哪几
种？
答：
（1）http开头URL：通常指向www服务器（网址）
（2）ftp开头URL：主要用于文件的传递（上传和下载）
（3）file开头URL：主要访问本地计算机的文件信息
2015/10/1
辽宁对外经贸学院
40
课前复习提问：
二、如何插入交互式图像（鼠标经过图
像）？
三、图片热区的具体设置步骤？
四、如何在文本中插入锚点链接？
2015/10/1
辽宁对外经贸学院
41
教学内容：
网页的定位技术：
1、应用表格对网页进行精确定位
2、使用布局视图设计网页
3、框架
4、层
2015/10/1
辽宁对外经贸学院
42
网页的定位技术:
网 页 一 般 可 用 表 格 (Table) 、 层 (Layer) 和 框 架
(Frame)来对网页元素定位。
表格作用：
组织页面数据、网页元素布局安排
优点：
低版本的浏览器对层布局的网页不支持，但支持
用表格布局的网页。要创建跨平台、跨
浏览器的网页，用表格布局是较理想的
方案。
注意：
但是在应用中要避免表格嵌套过多，表格过多嵌
套会增加页面显示的时间。
2015/10/1
辽宁对外经贸学院
43
一、创建表格
1、新建表格：
默认为2
不能修改
<caption>标题</caption>
在页面中
不显示
不能修改
2015/10/1
辽宁对外经贸学院
44
2、插入（嵌套）表格和修改设置
2015/10/1
辽宁对外经贸学院
45
3、导入、导出表格数据
4、[命令] | [表格排序]
5、扩展表格模式（P66）
6、设置表格格式：整个表格、单元格
2015/10/1
辽宁对外经贸学院
46
7、使用预置表格类型
2015/10/1
辽宁对外经贸学院
47
二、选取表格和单元格
2015/10/1
选择整个表格的方法：
1）单击表格的左上角、表格的顶边缘或底
边缘或者行或列的边框
2）单击表格，然后[修改]|[表格]|[选择表格]
或者右击，选择[表格]|[选择表格]
3）先单击某个单元格，再单击状态栏中标
签选择器的<table>
辽宁对外经贸学院
48
•选取单元格的方法：
1)选中某个单元格的种方法：
单击单元格，单击状态栏标签选择器<td>，便可选中（被选中单元
格四周出现粗边框线）
2)选中多个相邻的单元格的方法：
单击第1个单元格，然后拖动鼠标到最后一个单元格
3)选择多个不相邻的单元格的方法如下：
按住Ctrl键，分别单击要选中的那些不相邻的单元格，这时被单击的
单元格被选中
4)选择表格行的方法：
将鼠标指向表格的左边框线，当光标变为→时，
单击可选中该行（此时如果拖动鼠标可同时选择多行）
5)选择表格列的方法如下：
将鼠标指向表格的上边框线，当光标变为↓时，单击可选中该列，此
时如果拖动鼠标可同时选择多列。
2015/10/1
辽宁对外经贸学院
49
补充：使用表格设置网页结构
如何应用表格搭建网页框架：
1)新建一个网页文件
2)设置网页属性：背景颜色和网页边距尺寸
3)插入一个表格，将表格分为几个大的单元格，设
置 [边框]的参数值为0，使表格边框显示为虚线（
此表格用来控制网页的整体结构）
4)在大的单元格中插入表格，同样将[边框]设为0（
如果有必要可以做若干个嵌套式表格）
5)在单元格内插入网页文本或图像等其他元素。
2015/10/1
辽宁对外经贸学院
50
三、使用布局视图设计网页
1、进入布局模式：
[插入]面板下的[布局]
单击[布局]按钮
2、创建布局单元
和表格
2015/10/1
辽宁对外经贸学院
51
3、在布局单元中添加内容
包括文本、图像等网页元素。
4、插入布局单元
5、设置布局单元和表格属性
2015/10/1
辽宁对外经贸学院
52
布局视图使用的实例：
2015/10/1
辽宁对外经贸学院
53
课堂小结：
1、应用表格对网页进行精确定位
2、使用布局视图设计网页
2015/10/1
辽宁对外经贸学院
54
作业：
1、根据使用协议不同，URL的形式分为哪几种?
2、P93 三、2.选择表格有哪几种方法？
2015/10/1
辽宁对外经贸学院
55
第四章 运用层和框
架
2015/10/1
辽宁对外经贸学院
56
课前复习提问：
一、网页的定位技术有哪几种？
答 ： 网 页 一 般 可 用 表 格 (Table) 、 层 (Layer) 和 框 架
(Frame)来对网页元素定位。
二、选择整个表格的方法有哪两种?
答：
1）先单击某个单元格，再单击状态栏中标签选择
器的<table>；
2）单击表格的右边框线或下边框线，可选中整个
表格。
2015/10/1
辽宁对外经贸学院
57
课前复习提问：
三、插入表格（如下图）
四、如何向表格中添加背景图片？
2015/10/1
辽宁对外经贸学院
58
教学内容：
1、三种网页布局方式的区别
2、利用框架进行网页布局
3、层在网页布局中的应用
2015/10/1
辽宁对外经贸学院
59
一、三种网页布局方式的区别
1、表格(Table)：
用表格布局是最常用的方案（一个网页）
2、框架(Frame) ：
每一个框架区域都能独立操作（多个网页）
3、层(Layer) ：
可以随意定位，还可以与表格相互转换（一个网页）
2015/10/1
辽宁对外经贸学院
60
二、利用框架进行网页布局
框架(Frames )的作用:
就是把浏览器窗口划分为若于个区域，每个区域可
以分别显示不同的网页，使不同的页面在同一个浏览
窗口中可以自由的互相切换。
框架集(Frameset):
在Dreamweaver中，几个框架组合在一起称为框架
集。它定义了各框架的结构、数量、大小及装入框架
中的页面文件名和路径等有关框架的属性。
2015/10/1
辽宁对外经贸学院
61
1、创建框架与框架集
将一个页面分割成上下或左右结构的框架，把单
页面拓展成多页面，满足浏览者在一个页
面内迅速浏览更多内容的需求。
操作方法：
(1)[查看][可视化助理][框架边框]，才能显示框架边线
(2) [插入][HTML][框架] ，然后选择框架的类型
(3) [插入]面板组中的[布局][框架]，选择框架的类型。
(4)在编辑窗口中，选中已插入的框架，然后按住Alt键的
同时，用鼠标纵向拖曳或横向拖曳框架，
可加入上下结构或左右结构的框架。
2015/10/1
辽宁对外经贸学院
62
2、框架的调整、拆分和删除
2015/10/1
拆分框架：（子框架）
(1)单击要拆分的框架内部，使光标定位在该框架中。
(2) [修改][框架集] ，然后选择[拆分左框架]、[拆分右框架]
、[拆分上框架]、[拆分下框架]
(3)或按住Alt键不放，再用鼠标拖曳边框线，也可以拆分框
架。
调整框架：
(1)将鼠标指针放在两个框架的边框上，鼠标指针变成双箭头
。
(2)用鼠标拖曳边框到合适的位置，然后释放鼠标，可以调整
框架的大小。
(3)如需要精确地定义框架尺寸时，可在框架集的[属性]面板
中设置参数。
删除框架：
将鼠标指向要删除的框架边框，当光标变成双向箭头时，拖动
鼠标到上一级框架的上下或左右边框线处，松开鼠标即可删除
框架。当框架面板中的信息显示为[没有名称]时，表明当前无
63
辽宁对外经贸学院
框架。
3、框架和框架集的选择
(1) 浮动面板中的[框架]选项卡：
单击框架边框线，可选择框架集。
单击某个框架区域可选择该框架。
(2)在网页编辑窗口中，按住Alt键，然后单击要选中的
框架的任意位置，便可选中该框架。
(3)如果选中一个框架，按住A1t键，按键盘上的左、右
箭头键，可选中同一级别的框架。
按住A1t键，然后按键盘上的向上箭头键，可以选中当
前框架的上一级框架，连续重复操作，可以选中整个框
架集。
某个框架被选中时，框架的边框上会显示虚线。
2015/10/1
辽宁对外经贸学院
64
4、框架和框架集的属性设置
5、保存框架和框架集
浏览器中预览页面，必须先保存框架和框架集文件（也可以把某个已存在的网
页文件赋给这个框架）。
保存框架
(1)将插入点置于需要保存的框架中。
(2)打开[文件]主菜单，选择[保存框架]命令保存该框架文档。
保存框架集
(1)在框架面板上，选择需要保存的框架集
(2)打开[文件]主菜单，选择[框架集另存为]
保存全部文件
(1)可打开[文件]主菜单，选择[保存全部] ，首先保存框架集文件。
(2)接着保存框架文件，文档窗口的选择线会自动移到对应的框架中，据此可以
知道正在保存的是哪个框架文件。依次保存所有文件。
2015/10/1
辽宁对外经贸学院
65
6、框架应用实例：
2015/10/1
辽宁对外经贸学院
66
7、框架页面应用中需注意的问题
当网站的框架创建太多的时候，容易出现很多问题
(1)网页链接的属性设置中[目标]容易混淆
(2)框架和框架集的属性面板上，选择[滚动]设置时，最好
是设置为自动。
(3)[不能调整大小]复选框，可以禁止改变框架尺寸。
(4)在[边框]下拉列表框中，设置框架集边界。选择[否]表
示关闭该框架的边界。
(5)在网页制作好后，保存时也容易出错。
2015/10/1
辽宁对外经贸学院
67
三、 层在网页布局中的应用
层：是网页中用来放置文本、图像、动画、表单、
插件等网页元素的载体。
特点：层在网页编辑区中可以白由移动，可以精确
对页面元素定位。设计者可以控制多个层的叠放
次序，显示或隐藏层。层与时间轴配合使用，可
以很方便地设计出动态页而效果，层与行为配合
使用，还可以很方便地制作出滚动字幕、下拉式
菜单等页面效果。
嵌套层（子层）：包含嵌套层的那个层称为父层，
嵌套层永远在其父层上方。
2015/10/1
辽宁对外经贸学院
68
1、创建层和嵌套层（可打开网格定位）
2、设置层参数
3、显示层面板并改变层的重叠顺序
4、调整层的属性、大小、移动和对齐层
5、层和表格的转换
6、动态下拉菜单:
步骤：
2015/10/1
辽宁对外经贸学院
1)
设计下拉菜单样式
2)
设置层的显示
3)
设置层的隐藏
69
作业：
1、框架页面应用中需注意的问题
2、改变层的重叠顺序
2015/10/1
辽宁对外经贸学院
70
第3章 使用表格布局页面
2015/10/1
辽宁对外经贸学院
71
课前复习提问：
一、根据使用协议不同，URL的形式分为哪几
种？
答：
（1）http开头URL：通常指向www服务器（网址）
（2）ftp开头URL：主要用于文件的传递（上传和下载）
（3）file开头URL：主要访问本地计算机的文件信息
2015/10/1
辽宁对外经贸学院
72
课前复习提问：
二、如何插入交互式图像（鼠标经过图
像）？
三、图片热区的具体设置步骤？
四、如何在文本中插入锚点链接？
2015/10/1
辽宁对外经贸学院
73
教学内容：
网页的定位技术：
1、应用表格对网页进行精确定位
2、使用布局视图设计网页
3、框架
4、层
2015/10/1
辽宁对外经贸学院
74
网页的定位技术:
网 页 一 般 可 用 表 格 (Table) 、 层 (Layer) 和 框 架
(Frame)来对网页元素定位。
表格作用：
组织页面数据、网页元素布局安排
优点：
低版本的浏览器对层布局的网页不支持，但支持
用表格布局的网页。要创建跨平台、跨
浏览器的网页，用表格布局是较理想的
方案。
注意：
但是在应用中要避免表格嵌套过多，表格过多嵌
套会增加页面显示的时间。
2015/10/1
辽宁对外经贸学院
75
一、创建表格
1、新建表格：
默认为2
不能修改
<caption>标题</caption>
在页面中
不显示
不能修改
2015/10/1
辽宁对外经贸学院
76
2、插入（嵌套）表格和修改设置
2015/10/1
辽宁对外经贸学院
77
3、导入、导出表格数据
4、[命令] | [表格排序]
5、扩展表格模式
6、设置表格格式：整个表格、单元格
2015/10/1
辽宁对外经贸学院
78
7、使用预置表格类型
2015/10/1
辽宁对外经贸学院
79
二、选取表格和单元格
2015/10/1
选择整个表格的方法：
1）单击表格的左上角、表格的顶边缘或底
边缘或者行或列的边框
2）单击表格，然后[修改]|[表格]|[选择表格]
或者右击，选择[表格]|[选择表格]
3）先单击某个单元格，再单击状态栏中标
签选择器的<table>
辽宁对外经贸学院
80
•选取单元格的方法：
1)选中某个单元格的种方法：
单击单元格，单击状态栏标签选择器<td>，便可选中（被选中单元
格四周出现粗边框线）
2)选中多个相邻的单元格的方法：
单击第1个单元格，然后拖动鼠标到最后一个单元格
3)选择多个不相邻的单元格的方法如下：
按住Ctrl键，分别单击要选中的那些不相邻的单元格，这时被单击的
单元格被选中
4)选择表格行的方法：
将鼠标指向表格的左边框线，当光标变为→时，
单击可选中该行（此时如果拖动鼠标可同时选择多行）
5)选择表格列的方法如下：
将鼠标指向表格的上边框线，当光标变为↓时，单击可选中该列，此
时如果拖动鼠标可同时选择多列。
2015/10/1
辽宁对外经贸学院
81
补充：使用表格设置网页结构
如何应用表格搭建网页框架：
1)新建一个网页文件
2)设置网页属性：背景颜色和网页边距尺寸
3)插入一个表格，将表格分为几个大的单元格，设
置 [边框]的参数值为0，使表格边框显示为虚线（
此表格用来控制网页的整体结构）
4)在大的单元格中插入表格，同样将[边框]设为0（
如果有必要可以做若干个嵌套式表格）
5)在单元格内插入网页文本或图像等其他元素。
2015/10/1
辽宁对外经贸学院
82
三、使用布局视图设计网页
1、进入布局模式：
[插入]面板下的[布局]
单击[布局]按钮
2、创建布局单元
和表格
2015/10/1
辽宁对外经贸学院
83
3、在布局单元中添加内容
包括文本、图像等网页元素。
4、插入布局单元
5、设置布局单元和表格属性
2015/10/1
辽宁对外经贸学院
84
布局视图使用的实例：
2015/10/1
辽宁对外经贸学院
85
课堂小结：
1、应用表格对网页进行精确定位
2、使用布局视图设计网页
2015/10/1
辽宁对外经贸学院
86
作业：
1、根据使用协议不同，URL的形式分为哪几种?
2、选择表格有哪几种方法？
2015/10/1
辽宁对外经贸学院
87
第四章 运用层和框架
2015/10/1
辽宁对外经贸学院
88
课前复习提问：
一、网页的定位技术有哪几种？
答 ： 网 页 一 般 可 用 表 格 (Table) 、 层 (Layer) 和 框 架
(Frame)来对网页元素定位。
二、选择整个表格的方法有哪两种?
答：
1）先单击某个单元格，再单击状态栏中标签选择
器的<table>；
2）单击表格的右边框线或下边框线，可选中整个
表格。
2015/10/1
辽宁对外经贸学院
89
课前复习提问：
三、插入表格（如下图）
四、如何向表格中添加背景图片？
2015/10/1
辽宁对外经贸学院
90
教学内容：
1、三种网页布局方式的区别
2、利用框架进行网页布局
3、层在网页布局中的应用
2015/10/1
辽宁对外经贸学院
91
一、三种网页布局方式的区别
1、表格(Table)：
用表格布局是最常用的方案（一个网页）
2、框架(Frame) ：
每一个框架区域都能独立操作（多个网页）
3、层(Layer) ：
可以随意定位，还可以与表格相互转换（一个网页）
2015/10/1
辽宁对外经贸学院
92
二、利用框架进行网页布局
框架(Frames )的作用:
就是把浏览器窗口划分为若于个区域，每个区域可
以分别显示不同的网页，使不同的页面在同一个浏览
窗口中可以自由的互相切换。
框架集(Frameset):
在Dreamweaver中，几个框架组合在一起称为框架
集。它定义了各框架的结构、数量、大小及装入框架
中的页面文件名和路径等有关框架的属性。
2015/10/1
辽宁对外经贸学院
93
1、创建框架与框架集
将一个页面分割成上下或左右结构的框架，把单
页面拓展成多页面，满足浏览者在一个页
面内迅速浏览更多内容的需求。
操作方法：
(1)[查看][可视化助理][框架边框]，才能显示框架边线
(2) [插入][HTML][框架] ，然后选择框架的类型
(3) [插入]面板组中的[布局][框架]，选择框架的类型。
(4)在编辑窗口中，选中已插入的框架，然后按住Alt键的
同时，用鼠标纵向拖曳或横向拖曳框架，
可加入上下结构或左右结构的框架。
2015/10/1
辽宁对外经贸学院
94
2、框架的调整、拆分和删除
2015/10/1
拆分框架：（子框架）
(1)单击要拆分的框架内部，使光标定位在该框架中。
(2) [修改][框架集] ，然后选择[拆分左框架]、[拆分右框架]
、[拆分上框架]、[拆分下框架]
(3)或按住Alt键不放，再用鼠标拖曳边框线，也可以拆分框
架。
调整框架：
(1)将鼠标指针放在两个框架的边框上，鼠标指针变成双箭头
。
(2)用鼠标拖曳边框到合适的位置，然后释放鼠标，可以调整
框架的大小。
(3)如需要精确地定义框架尺寸时，可在框架集的[属性]面板
中设置参数。
删除框架：
将鼠标指向要删除的框架边框，当光标变成双向箭头时，拖动
鼠标到上一级框架的上下或左右边框线处，松开鼠标即可删除
框架。当框架面板中的信息显示为[没有名称]时，表明当前无
95
辽宁对外经贸学院
框架。
3、框架和框架集的选择
(1) 浮动面板中的[框架]选项卡：
单击框架边框线，可选择框架集。
单击某个框架区域可选择该框架。
(2)在网页编辑窗口中，按住Alt键，然后单击要选中的
框架的任意位置，便可选中该框架。
(3)如果选中一个框架，按住A1t键，按键盘上的左、右
箭头键，可选中同一级别的框架。
按住A1t键，然后按键盘上的向上箭头键，可以选中当
前框架的上一级框架，连续重复操作，可以选中整个框
架集。
某个框架被选中时，框架的边框上会显示虚线。
2015/10/1
辽宁对外经贸学院
96
4、框架和框架集的属性设置
5、保存框架和框架集
浏览器中预览页面，必须先保存框架和框架集文件（也可以把某个已存在的网
页文件赋给这个框架）。
保存框架
(1)将插入点置于需要保存的框架中。
(2)打开[文件]主菜单，选择[保存框架]命令保存该框架文档。
保存框架集
(1)在框架面板上，选择需要保存的框架集
(2)打开[文件]主菜单，选择[框架集另存为]
保存全部文件
(1)可打开[文件]主菜单，选择[保存全部] ，首先保存框架集文件。
(2)接着保存框架文件，文档窗口的选择线会自动移到对应的框架中，据此可以
知道正在保存的是哪个框架文件。依次保存所有文件。
2015/10/1
辽宁对外经贸学院
97
6、框架应用实例：
2015/10/1
辽宁对外经贸学院
98
7、框架页面应用中需注意的问题
当网站的框架创建太多的时候，容易出现很多问题
(1)网页链接的属性设置中[目标]容易混淆
(2)框架和框架集的属性面板上，选择[滚动]设置时，最好
是设置为自动。
(3)[不能调整大小]复选框，可以禁止改变框架尺寸。
(4)在[边框]下拉列表框中，设置框架集边界。选择[否]表
示关闭该框架的边界。
(5)在网页制作好后，保存时也容易出错。
2015/10/1
辽宁对外经贸学院
99
三、 层在网页布局中的应用
层：是网页中用来放置文本、图像、动画、表单、
插件等网页元素的载体。
特点：层在网页编辑区中可以白由移动，可以精确
对页面元素定位。设计者可以控制多个层的叠放
次序，显示或隐藏层。层与时间轴配合使用，可
以很方便地设计出动态页而效果，层与行为配合
使用，还可以很方便地制作出滚动字幕、下拉式
菜单等页面效果。
嵌套层（子层）：包含嵌套层的那个层称为父层，
嵌套层永远在其父层上方。
2015/10/1
辽宁对外经贸学院
100
1、创建层和嵌套层（可打开网格定位）
2、设置层参数
3、显示层面板并改变层的重叠顺序
4、调整层的属性、大小、移动和对齐层
5、层和表格的转换
6、动态下拉菜单:
步骤：
2015/10/1
辽宁对外经贸学院
1)
设计下拉菜单样式
2)
设置层的显示
3)
设置层的隐藏
101
作业：
1、框架页面应用中需注意的问题
2、改变层的重叠顺序
2015/10/1
辽宁对外经贸学院
102
第5章 编辑多媒体元素
2015/10/1
辽宁对外经贸学院
103
课前复习提问：
2015/10/1
一、如图所示框架页面保存后有几个文件都
是什么文件?
辽宁对外经贸学院
104
课前复习提问：
二、创建下图所示的框架:
三、新建2个层,并改变层的重叠顺序。
2015/10/1
辽宁对外经贸学院
105
一、在页面中插入媒体对象
常用插入面板中“媒体”的下拉三角
形，选择要插入的对象类型
插入媒体
包括：Flash
视频
Shockwave
ActiveX控件等
Java Applet
2015/10/1
辽宁对外经贸学院
106
二、插入Flash对象
（一）使用Flash按钮：
插入Flash按钮的操作只能在已经保存
过的网页中进行
插入Flash
2015/10/1
辽宁对外经贸学院
107
1. 插入Flash按钮对象
在“常用”插入面板中，单击“媒体”按
钮下拉框，选择“Flash按钮”；
或者 插入媒体Flash按钮
在“样式”列表中选择需要的按钮样式。
在“按钮文本”中输入按钮上显示的文字
字体：设置按钮上文字使用的字体
大小：设置按钮上文字显示的字号
2015/10/1
辽宁对外经贸学院
108
链接：设置该按钮要链接的网页的路径和名称
目标：选择指定的链接页面要载入的框架或窗口
背景色：设置制定的按钮区域中按钮的背景颜色
另存为：设置保存该按钮的名称。
用户插入的Flash按钮都将被保存在本地站点的根
目录下，并以用户所设置的文件名命名
2015/10/1
辽宁对外经贸学院
109
2. 修改Flash对象
可使用Flash按钮的属性面板修改
垂直边距和水平边距：设置按钮距网页边框的距离
如果要修改按钮上的显示文字，可以双击Flash按
钮，打开“插入Flash按钮”对话框
2015/10/1
辽宁对外经贸学院
110
（二）插入Flash文本对象
在“常用”插入面板中，单击“媒体”按
钮下拉框，选择“Flash文本”；
或者 插入媒体Flash文本
“颜色”文本框中输入文字的颜色。
“转滚颜色”文本框中指定翻转颜色
2015/10/1
辽宁对外经贸学院
111
三、设置Flash对象的属性
循环
自动播放
播放/停止
比例：制定浏览器播放Flash文本式的边界。
这个参数定义了如何在指定了的高度和宽
度值的区域中显示文本。共有三个选项：
默认（全部显示）：在文本间显示全部文字，并
且保持文字的宽高比例。
无边框：用文字填满指定区域，却仍保持文字宽
高比例，这样文字显示可能不完整
严格匹配：用全部文字填满指定区域，由指定区
域的宽高决定文字的宽高，这样就
不能保持动画的宽高比
2015/10/1
辽宁对外经贸学院
112
插入flash元素
操作：【插入】|【flash元素】
各项参数设置：
2015/10/1
Image参数（3个）
Slide参数（3个）
Title参数（4个）
Transitions参数（1个）
辽宁对外经贸学院
113
第6章 测试服务器与站点管理
此部分内容在第一章和综合实例中介绍
2015/10/1
辽宁对外经贸学院
114
第7章 HTML和CSS样式
2015/10/1
辽宁对外经贸学院
115
教学内容：
1、 HTML基础知识及相关操作
2、CSS样式的应用
2015/10/1
辽宁对外经贸学院
116
一、 HTML基础知识及相关操作
HTML(HyperText Mark Language)是超文本标记语言的
简称，它能够让不同类型的计算机在因特网上，使用同
一种网页文档格式来交流信息。
1．HTML文件的结构(头部和身体部分）语句格式如下：
<HTML>
<HEAD>
<TITLE>title</TITLE>
头部内容
<／HEAD>
<BODY>
身体内容
<／BODY>
<／HTML>
<元素>……<／元素>。
<元素>表示该元素开始起作用，<／元素>表示这种元素的作用结束。
语句写法不分字母大小写。
2015/10/1
辽宁对外经贸学院
117
2、HTML的标记
HTML语法主要用一对“小于”和“大于”符号(<>)代表标记，标记
又分开头和结束标记两种。格式如下：
开头标记<>
中间内容
结束标记<／>
有了标记作为主干后，HTML便可加上属性、数值、嵌套结构等许多不
同的变化。
注意：
多组标记嵌套在一起时，要记住下列关系。
<A><B><C>…<／C><／B><／A>
3．HTML元素
HTML元素用在文档的开头和结尾，它标识HTML文档，语法格式如下：
<HTML>…<／HTML>
其中包含HTML文档的开头和正文部分。
2015/10/1
辽宁对外经贸学院
118
4．文档的开头部分
1)HEAD元素
一般不显示在浏览器的主页上。最常用的是TITLE。其语法格
式为：
<TITLE>标题的文本<／TITLE>
5．网页的正文
1)BODY元素（正文部分）
语法格式为： <BODY>…<／BODY>
2)标题文字
网页中章节标题可以使用不同的字号，共有6级，从<H1>到<H6>，
字号逐渐减小。
例如：
<h1>网上书店<h1>
2015/10/1
辽宁对外经贸学院
119
6．网页的文本
1)分段和换行
分段标志<P>（结束标记可以省略）：
<P>…<／P>
换行标志<BR>（它没有结束标记）：
<BR>…
2)插入水平线： <hr>
3)字体元素（font）：
<font>…<／font>
例如： <font color＝"#0000FF"，face＝”隶书” size＝30>欢迎登录校园
网选课系统<／font>
4)列表
元素<UL>或<OL>必须成对出现，<UL>在列表项目前加项目符号“*”；
<OL>在列表项目前加上序号1，2，…。
<Li>单个出现，用于单行内容。
一般语法格式为：
<UL>
<LI>文本串1
<LI>文本串2
<／UL>
2015/10/1
辽宁对外经贸学院
120
7．字符修饰符（须成对出现）常用的有：
<em>…<／em>——有斜体字的强调效果
<strong>…<／strong>——有粗体字的强调效果
<B>…<／B>——文字加粗
<I>…<／I>——文字变成斜体
<U>…<／U>——文字加下划线
<Strike>…<／Strike>——文字加删除线
<center>…<／center>——整段文字居中对齐
8．嵌入图片
<IMG 属性> 一般图像的属性有3种：
①SRC＝“图像文件名”
②ALIGN＝bottom(或middle、top)
③ALT：替代文字
例:<IMG SRC＝“img／camp．jpg” ALT=”校景图” ALIGN=top>
2015/10/1
辽宁对外经贸学院
121
9．表格
其语法格式为： <TR>一行， <TD>一列
<TABLE>
<caption>表格标题<／caption>
<TR>
<TD>…<／TD>
<／TR>
<TR>
<TD>…<／TD>
<／TR>
<／TABLE>
10．超链接
<A 属性>文本或图像<／A>
链接到目标HREF
例： <A HREF＝”URL”>显示文本或图片<／A>
2015/10/1
辽宁对外经贸学院
122
11．框架
<FRAMESET>标记有两个重要的属性：
COLS和ROWS（其中COLS分割左右窗口，而ROWS分割上下窗口。）
①<FRAMESET COLS＝”20％”>
②<FRAMESET ROWS＝”20％”>
例：左右框架：分别显示left．htm和right．htm两个网页文件，如果客户
端的浏览器不支持框架，将显示<NOFRAMES>和<／NOFRAMES>之间的提示
信息。
<FRAMESET COLS="20％”>
<FRAME NAME＝"left” TARGET="right” SRC="left．htm”>
<FRAME NAME＝"right” SCR="right．htm”>
<NOFRAMES>
<BODY>
该浏览器不支持框架，无法正常显示。
<／BODY>
<／NOFRAMES>
<／FRAMESET>
2015/10/1
辽宁对外经贸学院
123
12．滚动字幕或图片
<marquee direction=up behavior=scroll
scrollamount=1 >
滚动字幕文字</marquee>
各参数含义如下：
direction：方向，上、下、左、右
behavior：sroll—表示由一端滚动到另一端；
slide—表示由一端快速滑动到另一端；alternate—
表示在两端之间来回滚动。
scrollamount：滚动距离（表现为速度的快慢），
值越大（值的单位为象素），速度越快。
2015/10/1
辽宁对外经贸学院
124
三、 HTML相关操作
1.
查看源代码
（1）在IE中（2）在Dreamweaver中
2.
快速编辑器的使用
（1）插入HTML模式（2）编辑标记模式（3）封装标记模式
3.
2015/10/1
提示菜单的使用与设置
辽宁对外经贸学院
125
一、 CSS样式的应用
1、 CSS（层叠样式表）基础知识
由W3C制定的网页元素定义规则。
内容：定义页面元素的样式，包括字体、颜色及其他的高
级样式，CSS可以精确地控制网页里的每一个元素。
例：二级标题：黑体、绿色、下划线
10个二级标题 －－－10次对应的属性面板，30次设定
10个文档，每个文档中10个二级标题 －－－100次对应
的属性面板，300次设定
Style.css: <H2>---黑色，绿色，下划线
2015/10/1
辽宁对外经贸学院
126
2、创建CSS样式
1) [窗口] CSS样式，
打开CSS样式面板
2) 单击右下角的[新建]按钮
(或右击鼠标－[新建])：
3) 设置样式格式：
2015/10/1
辽宁对外经贸学院
127
3、编辑CSS样式
4、应用CSS样式：
1）选中网页元素，在[CSS样式]面板中，右击要应用的CSS样
式，选择套用。
2）右击选中的网页元素，在CSS样式选项中，选择要应用的
CSS样式
5、导出和导入
2015/10/1
辽宁对外经贸学院
128
实例一：为网页中的一段文字单独设置背景颜色
1. 新建样式，弹出新建样式对话框
2. 名字：.wbbj， 选择器类型:类，定义在:仅适用本文档
单击确定，弹出“样式定义对话框”
3. 类型: 隶书 ，24，特粗，红色
4. 背景:绿色
5. 区块：字母间距2，居中
6. 方框:
填充：上25，下25 （表示文字区域中文字与区域边界的
上下距离各为15像素）
边界：上15，下15 （ 表示文字区域与其他对象之间的
距离为15像素）
7. 单击确定，CSS样式面板中出现.wbbj ，应用该样式即可
2015/10/1
辽宁对外经贸学院
129
实例二：为网页中的层设置立体效果
1. 新建样式，弹出新建样式对话框
2. 名字：.lt， 选择器类型:类，定义在:仅适用本文档
单击确定，弹出“样式定义对话框”
3. 类型: 24，特粗，红色
4. 扩展:
过滤器：Blur(Add=true, Direction=135, Strength=10)
5. 单击确定，CSS样式面板中出现. lt
6.新建层，应用该样式即可
2015/10/1
辽宁对外经贸学院
130
作业：
1、应用CSS样式的方法有那些？
2、快速编辑器包括哪几种编辑模式？
2015/10/1
辽宁对外经贸学院
131
第8章 提高工作效率
-----模板与库
2015/10/1
辽宁对外经贸学院
132
一、 认识资源面板
在资源面板的底部有4个按钮，其中：
插入按钮：用于把资源库的资源插入到
网页中
刷新按钮：重新整理面板中的资源
编辑按钮：编辑修改站点中选中的资源
添加到收藏夹按钮：把资源添加到收藏夹中
2015/10/1
辽宁对外经贸学院
133
二、使用资源面板
要使用资源面板，必须要设置本地站点，
并且选中“缓存”选项
在站点中添加或删除资源时，所做的更改
不会立即出现在站点面板中。单击“刷新”
按后可显示。
如果在Dreamweaver外部添加或移除资
源（如资源管理器），则必须重新生成站
点缓存以更新站点面板
2015/10/1
辽宁对外经贸学院
134
三、创建自己的资源
在资源面板上单击“收藏“单选按钮
单击右下角的“创建收藏夹”按钮，
建立收藏夹，并给收藏夹命名
2015/10/1
辽宁对外经贸学院
135
模板和库
2015/10/1
辽宁对外经贸学院
136
一、 创建模板
（一）以现有文档保存为模板
文件打开，打开一个现有的文档
文件另存为模板
在站点下拉框中选择要存到的站点名称，
在“另存为”文本框中为模板输入名称
单击“保存”按钮，则模板文件被保存到
站点的Templates文件夹中，文件扩展名
为.dwt
2015/10/1
辽宁对外经贸学院
137
注意：Dreamweaver将模板保存在站点根目录的
Templates文件夹中。当创建新模板时，如果
Templates文件夹不存在，那么Dreamweaver会自
动创建一个。不要将模板从Templates文件夹中移
走或者将一些非模板文件放进Templates文件夹。
这些做法都会导致模板的路径错误。
2015/10/1
辽宁对外经贸学院
138
（二）创建空白模板
打开资源面板，选中模板按钮
单击面板右下角的＋号按钮，一个新的无
标题模板将被添加到模板列表中。单击模
板名称，可以为他命名
或者使用文件新建，选择常规选项卡中
的“模板页”
2015/10/1
辽宁对外经贸学院
139
（三）编辑模板
在资源面板中双击要编辑的模板名，或选中
模板后，单击面板底部的“编辑”按钮
要删除模板可选中该模板，单击面板右下角
的“删除”按钮。
如果要重命名资源面板中的模板，可以鼠标
右击模板名，选择“重命名”。模板被修改
后会弹出“更新文件”对话框，询问用户是
否要更新应用模板的文件，单击“更新”，
更新所有应用模板的文件。
2015/10/1
辽宁对外经贸学院
140
二、定义模板的可编辑区域
当新创建一个模板或把已有的文档存为模板时，
Dreamweaver默认把所有区域标记为锁定。因此，
必须根据自己的要求对模板进行编辑，把某些部分
标记为可编辑的。
在编辑模板时，可以修改可编辑区，也可以修改锁
定区。但当该模板被应用于文档时，只能修改文档
的可编辑区，文档的锁定区是不允许修改的。
2015/10/1
辽宁对外经贸学院
141
（一）定义现有模板内容为可编辑区域
在模板文档中选择需要将其定义为可编辑区域
的文本或内容
选择 插入模板对象可编辑区。或者在“常
用”插入面板中，单击“模板”按钮下拉框，
选择“可编辑区”
在弹出的“新建可编辑区域”对话框中，为区
域输入唯一的名称。
单击“确定”，可编辑区域在模板中被一个高
亮的矩形外框环绕起来。
2015/10/1
注意：命名一个可编辑区时，不能使用单引号
（‘），双引号（“），尖括号（<>）和
142
辽宁对外经贸学院
（＆）。
（二）锁定可编辑区域（使之成为不可编辑）
选中可编辑区域
修改模板删除模板标记，此时该区域
变为锁定区
2015/10/1
辽宁对外经贸学院
143
（三）设置模板参数
如果要改变模板的可编辑区域和锁定区域的边框颜
色，可设置如下：
2015/10/1
编辑首选参数
在“分类”列表中选择“标记”色彩选项，设置相应的
颜色
辽宁对外经贸学院
144
三、应用模板建立网页
2015/10/1
辽宁对外经贸学院
145
（一）基于模板创建新文档
文件新建，打开新建文档对话框，再单
击“模板”标签，切换到“从模板新建”
窗口
从左边的“模板用于”栏目下选择一个站
点，在从右边的栏目中选择该站点下的模
板文件
单击“创建”按钮创建一个基于模板的网
页文档。
2015/10/1
辽宁对外经贸学院
146
（二）对现存文件应用模板
首先打开文档，然后执行以下操作之一：
选择 修改模板套用模板到页，然后从模板面
板上选择一个模板，单击确定
从资源面板的模板面板拖放一个模板到文档窗口
从资源面板的模板面板上选择一个模板，然后单
击“应用”按钮。
2015/10/1
辽宁对外经贸学院
147
四、 创建模板可选区域和重复区域
2015/10/1
辽宁对外经贸学院
148
（一）创建模板可选区域
定义可选区
单击“常用”插入面板中的模板按钮的“可选
区域”或者选择 插入模板可选
区域
在弹出的对话框“基本”选项卡中的“名称”
文本框中，为该区域输入一个名字。
将该模板保存
2015/10/1
辽宁对外经贸学院
149
使用可选区
文件新建，在弹出的对话框中，选择“模板
“选项卡。从“模板用于”选取中选
择创建模板的站点，在模板列表中选
择刚才创建的模板。单击“创建”按
钮
选择 修改模板属性，打开模板属性对话框，选
择“显示picture”复选框可以显示文
档中的可选区域或取消选择该复选框
将其隐藏。
2015/10/1
辽宁对外经贸学院
150
（二）模板重复区域
重复区域是指一个页面中可以任意多增加的部分，
例如表格的内容等，它所包含内容的数量是经常变
换的。
注意：重复区域是不可编辑区，如果要在重复区域
中编辑不同的内容，必须在重复区域中插入可编辑
区域
2015/10/1
辽宁对外经贸学院
151
五、创建库项目
2015/10/1
辽宁对外经贸学院
152
（一）库的概念
Dreamweaver允许把网站中需要重复使用或经常
更新的页面元素（如图像、文本或其他对象）存入
库中，存入库中的元素称为库项目
需要时，可以把库项目拖放到文档中。这时，
Dreamweaver会在文档中插入该库项目的HTML源
代码的一份复制，并创建一个对外部库项目的引用。
通过修改库项目，然后使用“修改”“库”子菜
单上的更新命令，即可实现整个网站各页面上与库
项目相关的内容的一次性更新，既快捷又方便
2015/10/1
辽宁对外经贸学院
153
Dreamweaver允许为每个站点定义不同的库。
Dreamweaver将库项目存放在每个站点的本地根文
件夹内的Library文件夹中，扩展名为.lbi。
2015/10/1
辽宁对外经贸学院
154
（二）创建库项目
选取文档中要保存为库项目的页面元素（如，图像、
文本等）
执行以下操作之一：
窗口资源 ，打开资源面板，再单击资源面板中的库
按钮，将刚才选择的页面元素拖拽到库面板中
单击资源面板底部的“新建库项目”按钮
选择 修改库添加对象到库菜单命令
2015/10/1
辽宁对外经贸学院
155
（三）管理和编辑库项目
选中库中的项目，单击资源面板右下角的“插入”
按钮，或者将库元素拖置文档窗口，都可将库元素
复制到文档中
在文档窗口中，单击库项目显示库项目的属性面板：
2015/10/1
Src：显示库项目的源文件名称和存放位置
辽宁对外经贸学院
156
“打开”按钮：打开库项目的源文件，可对项目进
行编辑
“从源文件中分离”按钮：切断选定库项目与其源
文件之间的联系。
“重新创建”按钮：用当前选中的内容覆盖原有的
库项目。如果库项目不存在、项目名被修改过或者
库项目被重新编辑过，这个命令将重新生成一个库
项目
2015/10/1
辽宁对外经贸学院
157
六、编辑库项目中的行为
2015/10/1
辽宁对外经贸学院
158
打开一个含有库项目的文件
选中要编辑的项目，单击库属性面板上的“从源文
件中分离”按钮
选中附带行为的元素
选择 窗口行为命令，打开行为面板，双击要作改
动的动作，在出现的对话框中作必要的改动
2015/10/1
辽宁对外经贸学院
159
作业：
在Dreamweaver中如何插入Flash文
本
如何基于模板创建新文档？
2015/10/1
怎样将现有文档保存为模板？
辽宁对外经贸学院
160
复习：
1.什么是html？
2.如何导入一个css文件？
2015/10/1
辽宁对外经贸学院
161
第9章 制作网页特效
2015/10/1
辽宁对外经贸学院
162
1、 认识行为动作和事件
行为就是以某种方式完成的动作。
行为的主要功能：
就是在网页中插入JavaScript程序而无需动手编写代码，这正是
设计者所需要的。用它可以轻松地做出许多网页特效。
行为是一种事件和动作的组合：
动作是指在浏览网页时可完成的一些特殊功能，如拖曳层、
隐藏和显示层、播放音乐、交换图像等；
事件是完成某一动作的具体方式，如onMouseOver(鼠标
指向对象)、onMouseOut(鼠标移离对象)、onClick(单击鼠标)
等。
例：插入【交互式图像】就是一个典型的行为应用。
2015/10/1
辽宁对外经贸学院
163
2.事件
onAbort
onAferUpdate
onBeforeUpdate
onBlur
onBounce
onchange
Onclick
onDblclick
2015/10/1
辽宁对外经贸学院
164
2015/10/1
onError
onFinish
onFocus
onHelp
onKeyDown
Onkeypress
onKeyUp
onLoad
onMouseDown
辽宁对外经贸学院
165
2015/10/1
onMouseMove
onMouseOut
onMouseOver
onMouseUp
onMove
辽宁对外经贸学院
166
2、Dreamweaver 8中可以添加的行为动作
3、Dreamweaver8中IE 5．0的一些主要事件
4、内置行为的具体应用：
2015/10/1
辽宁对外经贸学院
167
•动态下拉菜单:
步骤：
2015/10/1
1)
设计下拉菜单样式
2)
设置层的显示
3)
设置层的隐藏
辽宁对外经贸学院
168
•交换图像:与鼠标经过的图像基本相同。
•改变属性：改变各种网页对象的属性。
2015/10/1
辽宁对外经贸学院
169
*拖动层：
*转到URL:
*播放声音
*打开浏览器窗口
*设置文本
2015/10/1
辽宁对外经贸学院
170
作业：
1、时间轴的基本原理是什么 ？
2、简述创建时间轴动画的步骤。
3、对象行为的基本功能和属性设置是什么？
2015/10/1
辽宁对外经贸学院
171
时间轴
2015/10/1
辽宁对外经贸学院
172
教学内容：
2015/10/1
时间轴的原理及应用
对象行为的应用
辽宁对外经贸学院
173
一、时间轴的概述
时间轴的基本原理：
使层中的内容在一定的时间内，按照设计好的路线
显示在页面中，在时间轴上显示的每一个层称为一
帧，整个时间轴就是由许多帧构成的，这些帧在页
面中的连续播放构成了时间轴动画。
2015/10/1
辽宁对外经贸学院
174
时间轴弹出菜单
回
首 后
帧 退
当
前
播
放
帧
二 、时间轴面板
播
放
每秒
播放
帧数
自动
播放
循环
播放
行为频道
播放头
动画频道
动画栏
帧数
关键帧
自动播放：选择“自动播放”复选框，使当前页面在载入浏览器时自动开始播放时间轴
动画栏（条）：即动画频道中的蓝色小条，显示每个对象的持续时间。
循环播放：使页面在浏览器中打开时，当前时间轴可以无限循环播放
时间轴弹出菜单：指定当前文档的哪个时间轴显示在时间轴面板中
关键帧：是动画栏中给某个对象指定了属性（如位置）的帧
回首帧：将播放头移动到时间轴的首帧
。
动画频道：显示动画层和图像的栏
播放头：值是页面上当前显示的是时间轴的哪一帧
播放：将播放头向右移动一帧
后退：将播放头向左移动一帧
总帧数：表示每个动画栏占有的帧数
。
2015/10/1
辽宁对外经贸学院
175
•窗口时间轴 （打开时间轴面板 ）
1. 播放头：
值是页面上当前显示的是时间轴的哪一帧
2. 时间轴弹出菜单：
指定当前文档的哪个时间轴显示在时间轴面板中。
3. 动画频道：
显示动画层和图像的栏
2015/10/1
辽宁对外经贸学院
176
4. 动画栏（条）：
即动画频道中的蓝色小条，显示每个对象的持续
时间。
一个单行可以包含多个代表不同对象的动画栏，
但是在同一帧中，不同的动画条不能控制相同的
对象。
5. 关键帧：
即动画栏中的小圆点。是动画栏中给某个对象指
定了属性（如位置）的帧
2015/10/1
辽宁对外经贸学院
177
6.总帧数（即长度）：
表示每个动画栏占有的帧数 。
后退和播放按钮之间的数字是当前播放帧
通过设置总帧数和每秒帧数（fps），可以控制
动画的持续时间及速度
公式：总帧数＝持续秒数×帧频率
2015/10/1
辽宁对外经贸学院
178
7. 回首帧：将播放头移动到时间轴的首帧
8. 后退：将播放头向左移动一帧。
9. 播放：将播放头向右移动一帧。
10. 自动播放：
选择“自动播放”复选框，使当前页面在载入浏
览器时自动开始播放时间轴
2015/10/1
辽宁对外经贸学院
179
11. 循环播放：
选择“循环”复选框，使页面在浏览器中打开时，
当前时间轴可以无限循环播放
这实际上是在动画最后一帧后的行为通道中插入
了“转到时间轴帧”行为。双击此帧中的标记，
可以编辑行为的参数与改变循环次数
2015/10/1
辽宁对外经贸学院
180
三 、 创建时间轴动画的操作
(一)简单的时间轴应用：
1. 在页面添加层，在层中插入要移动的元素，然
后将层移动到动画的起始位置
2. 选择 窗口时间轴 ，打开时间轴面板
3. 选择要制作动画的层
4. 选择 修改时间轴添加对象到时间轴
或者直接把选定的对象拖入时间轴面板中
2015/10/1
辽宁对外经贸学院
181
5. 单击该动画栏最后关键帧标记（即第15帧），将
页面上的层移动到动画末尾时它所应该在的位置
6. 如果要让层按曲线移动，选择它的动画栏，按住
Ctrl键单击，再插入点位置添加一个关键帧
或在动画栏中间单击一帧，并从右键快捷菜单中选
择“增加关键帧”
7. 移动层，使运动轨迹呈曲线状
2015/10/1
辽宁对外经贸学院
182
（二）通过拖动路径创建时间轴动画
1. 插入一个层
2. 移动该层到动画的起始处，选中该层
3. 选择 修改时间轴录制层路径
4. 在页面上拖动层，创建想要运动的路径并在动
画结束的地方松开鼠标。
2015/10/1
辽宁对外经贸学院
183
（三）控制时间轴
1. 选中层，在行为面板中单击加号按钮，选择
时间轴
• 转到时间轴帧 ：
允许对指定的时间轴控制播放其指定的时间帧以
及循环的次数。
• 播放时间轴，停止时间轴 ：
允许用户通过某种事件来播放或停止播放时间轴
2015/10/1
辽宁对外经贸学院
184
四、时间轴应用实例
(一)制作在网页上飘动的广告图片
小广告在网页上飘动，当鼠标指向广告时广告停止
不动，当鼠标离开广告时，广告继续飘动
1. 在网页中插入一个层，在层中插入一幅广告图片
2. 选中图像，为其设置超级链接
3. 选中层
修改时间轴录制层路径
2015/10/1
辽宁对外经贸学院
185
4. 按住层不放，拖动层画出层的运动轨迹，在动画结
束的地方松开鼠标
5. 选中时间轴面板中的“自动播放”和“循环”
6. 选中层，窗口行为面板 面板
7. 单击加号，选择 时间轴停止时间轴 ，在对话框
中选择Timeline1。
在行为面板中把激发该动作的事件改为
onMouseOver。
2015/10/1
辽宁对外经贸学院
186
8.再次单击行为面板中的加号，选择 时间轴播放
时间轴 ，在对话框中选择Timeline1。
在行为面板中把激发该动作的行为改为
onMouseOut
2015/10/1
辽宁对外经贸学院
187
(二)用时间轴控制图片替换
3幅图片象幻灯片一样不断的变化
方法1：
1. 插入层，并在层中插入图片
2. 打开时间轴面板
2015/10/1
辽宁对外经贸学院
188
3. 选中图片，将其拖入时间轴，将时间轴动画条增
至30帧，并 在10、20帧处设置关键帧
4. 分别选中第 10、20帧，并设置不同的替换图片
文件
5.选中时间轴面板中的“自动播放”和“循环”
2015/10/1
辽宁对外经贸学院
189
方法2：
1、插入层，并在图中插入图片（共3个）
2、分别选中3个层，并将层的位置设置相同
3、打开时间轴面板，并将这3个层拖入时间
轴面板
4、添加3个时间轴动画条，并将这3个动画条
分别增至30帧，并 在10、20帧处设置关键帧
2015/10/1
辽宁对外经贸学院
190
5、按表中设置关键帧的层属性
关键帧
1
10
20
30
动画条1
层的z值：1
2
3
1
动画条2
2
3
1
2
动画条3
3
1
2
3
6.选中时间轴面板中的“自动播放”和“循环”
2015/10/1
辽宁对外经贸学院
191
作业
1.可以使用快捷键（ ）打开时间轴面板。
2.用时间轴生成动画有哪些技巧?
3.什么是行为？
4.Onload是什么时事件？
2015/10/1
辽宁对外经贸学院
192
第10章 表单
2015/10/1
辽宁对外经贸学院
193
课前复习提问：
1．如何使用资源面板创建空白模板？
2．如何将现有文件保存为模板？
2015/10/1
辽宁对外经贸学院
194
教学内容：
1、表单的创建和使用
2、表单中各个对象的插入和使用
2015/10/1
辽宁对外经贸学院
195
一、表单的创建和使用
表单：实现浏览者与Internet服务器之间信息的交互传送
和信息收集处理的方式。
作用：能实现访问者与网站或网站管理员之间的交互功能。
可根据访问者输入的信息，自动生成页面反馈给访问者；
还可以为网站收集访问者输入的信息。
例如：注册、登陆、留言板
表单有两个重要的组成部分：
(1)由DreamweaverMX2004生成的表单的页面。
(2)用于处理浏览者在表单域中输人的信息的服务器端应
用程序或客户端脚本，如JavaScript、VbScript等或应用
程序。
表单的应用必须依赖于服务器端脚本才能真正发挥其功能。
2015/10/1
辽宁对外经贸学院
196
1、表单的创建
在网页中添加表单对象(文本域、按钮等)，首先必须
创建表单域。
步骤：
(1)选择[插入]面板中的[表单]，然后在文档中将光标定
位在需要插入表单域的地方。
(2)单击表单下的按钮，此时会在网页中见到一个红色虚
线框所围起来的表单域，往后的其他表单组件都必须插入
到这个红色的虚线框中才能起作用。
(3)用鼠标选中表单域，此时显示表单属性面板，可以在
[属性]面板上设置表单域的各项属性。
2015/10/1
辽宁对外经贸学院
197
设置表单属性
1) 选中表单域：用鼠标点在表单内，单击标签<form>
2) 设置属性：
打开窗
口的方
式（4种）
应以英文字
母和数字来
命名，
为了方便以
后程序控制。
2015/10/1
默认：一般为GET
GET：
把表单附加到URL，并
发给服务器
POST：
以数据文件方式发送
辽宁对外经贸学院
链接地址：
动态页或脚
本的路径。
198
二、表单中各个对象的插入和使用
1.
•
•
•
创建文本域：
单行文本域
密码文本域
多行文本域
2. 创建复选框和单选框
2015/10/1
辽宁对外经贸学院
199
3. 创建列表和菜单：
4. 创建表单按钮：
2015/10/1
辽宁对外经贸学院
200
5. 创建跳转菜单：
6. 创建表单文件域：
作用：
当点击提交按钮时，从本地计
算机向服务器上传文件。
2015/10/1
辽宁对外经贸学院
201
7. 表单的提交：
HTML网页并不具备处理表单数据的能力。需通过以下方法：
1．通过电子邮件软件提交表单
在网页中设计好表单，显示表单属性面板，在属面板上的
[动作]输入框中，输入电子邮箱地址。
注意，电子邮箱地址的前面必须加上“mailto：”，表明表单是
以电子邮件方式发送，发送方式用POST。
设置好以后，当用浏览器进行浏览时，单击按钮提交，弹出
对话框提示用电子邮件形式提交表单，单击[确定]即可通过
Outlook进行发送。
2．通过脚本程序或ASP程序提交表单 ，
以电子邮件形式提交表单是针对表单内容少且适合个人的提
交方式。
如果一个企业或比较大的网站，必须用程序提交表单内容到数
据库里（但这要创建数据库、连接数据库、建立记录集等）。
2015/10/1
辽宁对外经贸学院
202
作业：
1、如何以电子邮件形式提交表单？
2、创建单选按钮的步骤？
2015/10/1
辽宁对外经贸学院
203
第11章
Web页面数据库应用
2015/10/1
辽宁对外经贸学院
204
Web页面数据库应用
教学内容：
1、动态网站的设置
2、数据库的建立与连接
3、定义记录集与数据库绑定
4、在页面上显示记录
2015/10/1
辽宁对外经贸学院
205
一、动态网站的设置
包含动态网页的网站。
创建动态网页：
【新建】－在常规中【动态页】－【VBScript】
静态网站的设置：
1.
2.
3.
4.
2015/10/1
【站点】－【管理站点】－新建站点
设置本地根文件夹
设置默认图像文件夹
选中【启用缓存】
辽宁对外经贸学院
206
（一）选择应用服务器
要使网页能动态显示数据库内容，必须选择一套
应用服务器：
常用的有ASP（微软）、JSP或Cold Fusion
安装IIS（win2000/win NT）
或PWS（win98/win95）
注意：
安装完成后默认的站点IIS主目录为：
c:\Intepub\wwwroot
2015/10/1
辽宁对外经贸学院
207
动态网站的设置：IIS设置和服务器行为设
置
（二）设置动态站点
1.
2.
3.
2015/10/1
如果我们站点的目录不在IIS主目
录下则需自定义（win2000
professional）：
打开【控制面板】－ 【管理工具】 －
【Internet服务管理器】
设置【默认web站点】－ 【属性】，在主
目录中设置为包含站点根站点文件夹的文
件夹（或站点根文件夹）
【确定】，完成IIS主目录的设置
辽宁对外经贸学院
208
（三）服务器行为的设置
1.
2.
3.
4.
2015/10/1
编辑站点：【站点】|【管理站点】
本地站点：设置本地站点的信息
测试服务器：
服务器类型： ASP VBScript
访问：本地/网络
测试服务器文件夹：指定任意文件夹（必须在
IIS设置的主目录下)
URL前缀：http://localhost/相对IIS主目录的路
径
远程服务器：设置与测试服务器相同
辽宁对外经贸学院
209
测试服务器和远程服务器的FTP设置：
访问： FTP
FTP主机：xxxx.51.net
主机目录：/public_html/
登陆（用户名）：xxxx
密码：****
2015/10/1
辽宁对外经贸学院
210
复习:
2015/10/1
如何设置web动态站点？
辽宁对外经贸学院
211
二、数据库的建立与连接
（一）创建Microsoft Access数据库
1.
2.
3.
4.
5.
6.
2015/10/1
打开Access，新建“空数据库”
保存数据库：输入路径（建议在站点根文
件夹下建立子文件夹）和文件名
双击“使用设计器创建表单”，输入字段
名、数据类型和相关属性
创建主索引：鼠标右击该字段所在行，选
择“主键”
输入后，关闭设计窗口，保存表
这时，在数据库设计窗口中，显示了我们
刚刚建立的表文件，双击该表，输入记录
辽宁对外经贸学院
212
（二）连接数据库
1、建立数据源（ODBC）
（1）打开控制面板－【管理工具】－【数据源】
（ 2 ） 选 择 【 系 统 DSN】 － 【 添 加 】 － 选 择
【Microsoft Access Driver】
（3）输入【数据源名】－选择数据库文件
（4）【完成】
2015/10/1
辽宁对外经贸学院
213
2、启动Dreamweaver，打开要应用数据库的网页文件
1）打开【数据库】面板，单击＋按钮，选择
【数据源名称】
2）自定义【连接名称】
3）设置完毕，单击测试按钮，显示“成功创
建连接脚本”
4）单击”完成”，完成数据库连接。
2015/10/1
辽宁对外经贸学院
214
三、定义记录集与数据库绑定
2015/10/1
可以将网页与数据库建立连接的特定关系，使网页能
显示和记录数据库中的内容
操作步骤：
启动Dreamweaver，打开网页文件
打开绑定面板：【窗口】－【绑定】
单击＋按钮，选择【记录集（查询）命令】
输入记录集名称，选择所用【连接】【列】
辽宁对外经贸学院
215
四、在页面上显示记录
2015/10/1
在网页中，把光标移到要插入记录集的位置
选择【插入】中的【应用程序】|【动态数据】 |【动
态表格】，选择记录集，显示：输入显示记录的个数
如果要修改显示记录的个数：【服务器行为】面板中
双击【重复区域】
在编辑模式下查看数据：【查看】－【动态数据】或
在【文档】面板上单击【活动数据视图】按钮
辽宁对外经贸学院
216
作业：
动态网站的设置的步骤是什么？
定义记录集的操作步骤是什么？
2015/10/1
辽宁对外经贸学院
217
综合实例1
2015/10/1
辽宁对外经贸学院
218
复习提问：
1．如何在Dreamweaver中建立数据库连接？
2．如何建立数据库连接DNS？
2015/10/1
辽宁对外经贸学院
219
网站实例——《网上书店》
主要内容包括：
登录和密码验证系统
商品信息维护系统
集成的购物车系统
2015/10/1
辽宁对外经贸学院
220
登录和密码验证系统
教学内容：
1、数据库的设计
2、实现用户登录功能
3、阶段变量的应用
4、新用户的注册
5、用户帐户密码修改
2015/10/1
辽宁对外经贸学院
221
一、数据库的设计
客户表Account
用户名
Username
密码
Password
授权级别
Authlevel
用户真实姓名
购物车表ShopingCart
Username
ProductID
Quantity
Name
产品目录表Catalog
2015/10/1
订单表Oder
ProductID
OderID
Name
Username
Image
ProductID
NuminStock
Price
。。。
。。。
辽宁对外经贸学院
222
网站页面结构：
主页面
注册新用户
页面
（用户登录）
成功
失败
成功
进入
连接至
购书系统页面
注册新用户
输入商品信息
修改
浏览
搜索特定商品
查看购物车
我要购买
修改用户信息
2015/10/1
新用户加入
数据库
重名
返回注册页
面
返回主页面
用户帐户密码修改:
成功－返回购书系统
页面
失败－显示两次密码
不符
辽宁对外经贸学院
223
二、实现用户登录功能
创建用户登录的动态网页：【新建】
－【动态页】－【ASP VBScript】
定义数据库连接，并测试
创建页面布局和页面元素
创建信息提示页面（2个）用户名：
密码：
实现用户登录功能：
1.
2.
3.
4.
5.
登录
请先注册
2015/10/1
辽宁对外经贸学院
224
5、实现用户登录功能：
1.
2.
3.
2015/10/1
打开主页面
【应用程序】面板－添加【服务器行
为】－【用户身份验证】－【登录用
户】
各项参数设置：
注意：数据库表中至少要有一条记录，
才能对登录成功的页面进行测试
辽宁对外经贸学院
225
三、阶段变量的应用
1.
1)
2)
2.
1)
2)
2015/10/1
Dreamweaver可以动态地将数据库中某一记录的
特定字段显示在页面上，那么这个显示的特定字
段就是阶段变量。
定义阶段变量：
【应用程序】－【绑定】－添加【阶段
变量】
填入名称：MM_Username(自动生成)
引用阶段变量
打开主页面
打开【应用程序】－【绑定】，将刚刚
设置的阶段变量托拽到你期望的位置
例如：登录成功页面和
注册成功页面
辽宁对外经贸学院
226
四、实现新用户注册功能
3.
新建用户注册页面
定义数据库连接
创建页面布局和页面元素
加入表单：
用户名：
1.
2.
密码：
用户真实姓名：
注册
4.
5.
6.
2015/10/1
创建信息提示页面（可以引入阶段变量）
实现注册新用户功能
检查新用户的服务器行为
辽宁对外经贸学院
227
5、实现注册新用户功能
1.
2.
3.
2015/10/1
打开新用户注册页面
【在应用程序】面板中，添加【服
务器行为】－【插入记录】
参数设置：
辽宁对外经贸学院
228
6、检查新用户的服务器行为
1.
2.
3.
2015/10/1
若新注册的用户名，已存在，则不能
注册
创建信息提示页面
打开打开新用户注册页面
【在应用程序】面板中，添加【服务
器行为】－【用户身份验证】－【检
查新用户名】
辽宁对外经贸学院
229
五、实现用户密码修改功能
新建用户密码修改页面
定义数据库连接
创建页面布局和页面元素
1.
2.
3.
1)
加入表单：
新密码：
再输一遍：
用户真实姓名：
确认修改
2)
3)
2015/10/1
创建信息提示页面
实现修改密码和帐户的功能
辽宁对外经贸学院
230
复习提问：
1．阶段变量是如何定义和引用的？
2．实现用户登录功能的步骤？
3. 实现用户注册功能的步骤？
2015/10/1
辽宁对外经贸学院
231
3）实现修改密码和帐户的功能
【应用程序】面板中，【绑定】记录集
测试
3.
添加【服务器行为】
－【更新记录】
1.
2.
2015/10/1
辽宁对外经贸学院
232
限制对页的访问
密码修改页面存在的问题：
不经过登录，输入URL地址也可以访问
添加【服务器行为】－【用户身份验证】－【限制
对页的访问】
2015/10/1
辽宁对外经贸学院
233
解决问题2：
由于没有现成的【密码核对】的【服务器
行为】，我们可以添加【更新记录】，并
对其进行修改。
2.
切换到【代码视图】
找到下列代码
<%
1.
' *** Update Record: construct a sql update statement and execute it
If (CStr(Request.Form(“xmm")) = CStr(Request .Form(“qrmm"))) Then
原有代码
Else
response.Write(“两次输入的密码不符”)
End If
>
2015/10/1
辽宁对外经贸学院
234
作业：
1.
2.
2015/10/1
创建动态网页的步骤?
如何实现新用户注册的功能？
辽宁对外经贸学院
235
综合实例2
2015/10/1
辽宁对外经贸学院
236
复习提问：
1．阶段变量是如何定义和引用的？
2．实现用户登录功能的步骤？
2015/10/1
辽宁对外经贸学院
237
网站实例——《网上书店》
主要内容包括：
登录和密码验证系统
商品信息维护系统
集成的购物车系统
2015/10/1
辽宁对外经贸学院
238
商品信息维护系统
教学内容：
1、数据库的设计
2、实现商品信息输入功能
3、实现商品信息修改功能
4、实现商品信息浏览功能
2015/10/1
辽宁对外经贸学院
239
一、数据库的设计
客户表Account
Username
购物车表ShopingCart
Username
Password
ProductID
Authlevel
Quantity
Name
商品代码
商品名称
图片（允许为空）
商品信息表Catalog
ProductID
订单表Oder
Name
OderID
Image
描述（允许为空）
Listprice
单价
NuminStock
库存数
Catelog
Username
ProductID
Price
。。。
种类
2015/10/1
辽宁对外经贸学院
240
网
站
页
面
结
构：
购书系统
输 入
输入成功
页面
（需有权进入）
（引入阶段变量）
输入商品信息
修改
选择商品代码
修 改
浏览
（需有权进入）
商品信息
搜索特定商品
查看购物车
我要购买
商品浏览
（全部记录）
修改用户信息
帐户密码修
改页面
2015/10/1
修改成功返回购
书系统页面
其它页面
（购物车系统）
辽宁对外经贸学院
241
二、实现商品输入功能
对数据库中：商品信息表Catalog添加记录
1.
创建动态网页
2.
定义数据库连接，并测试
3.
创建页面布局和页面元素
4.
创建“输入成功” 提示页面
5.
实现商品输入功能：
1)
2)
2015/10/1
连接Catalog表
添加服务器行为：【插入记录】
辽宁对外经贸学院
242
•禁止未经授权的用户访问
因为所有用户都能输入商品信息，所以限制访问。
1.
打开商品信息输入页面
2.
添加【服务器行为】－【用户身份验
证】－【限制对页的访问】
3.
各项参数设置：
2015/10/1
注意：前提是添加【登录用户】时，
要设置为由用户名、密码和访问级别
限制访问
辽宁对外经贸学院
243
三、实现商品信息修改功能
2015/10/1
包括两个主要界面：
辽宁对外经贸学院
244
（一）选择要修改商品的代码页面
创建动态页面
连接数据库（商品信息表Catalog）
3.
定义记录集：【绑定】－【记录集】
4.
创建页面布局和页面元素
5.
选中“列表/菜单”在【属性】－动态绑定
6.
设置表单提交方式：
【动作】：下一个页面（modifyproduct2.asp）
【方法】：POST
1.
2.
2015/10/1
辽宁对外经贸学院
245
（二）修改商品信息页面
1.
2.
3.
4.
5.
6.
7.
2015/10/1
创建动态页面
连接数据库（商品信息表Catalog）
定义参数传递：【绑定】－【请求变量】
参数设置：类型－－Request.Form(来源于上一页面)
名称－－上一页面表单中的表单元素
定义记录集（由请求变量传递）
创建页面布局和页面元素
动态元素设置
实现修改商品信息功能
辽宁对外经贸学院
246
6.动态元素设置：
1.
2.
3.
2015/10/1
动态数据：展开【记录集】将
ProductID托拽到相应的位置上
文本域：【属性】面板中【初始值】
后面的闪电按钮
动态“列表/菜单”元素： 【属性】
面板中－动态绑定
辽宁对外经贸学院
247
7.实现商品信息输入功能
1.
2.
2015/10/1
创建信息提示页面：“商品修改成功”
添加【服务器行为】－【更新记录】
参数设置：
辽宁对外经贸学院
248
四、实现商品信息浏览功能
全部商品信息以表格的形式显示给用户
1.
新建商品浏览页面
2.
定义数据库连接
3.
定义记录集
4.
创建页面布局和页面元素
5.
动态元素设置
6.
添加【服务器行为】－【重复区域】
7.
分页显示商品记录
2015/10/1
辽宁对外经贸学院
249
7、分页显示商品记录
1.
2.
3.
2015/10/1
【服务器行为】面板中，双击【重
复区域】修改显示记录的个数
【插入】－【应用程序对象】－
【显示记录计数】－【记录集导航
状态】
加入【重复区域】导航条：用光标
选位置，添加【记录集分页】：4
个子项
或者【插入】－【应用程序对象】－【记
录集分页】－【记录集导航条】
辽宁对外经贸学院
250
作业：
1.
2015/10/1
商品输入功能和商品信息
修改功能实际上是对数据
库进行的什么操作？
辽宁对外经贸学院
251
综合实例3
2015/10/1
辽宁对外经贸学院
252
复习提问：
1．简述商品信息维护系统的功能？
2．商品信息修改如何实现?
2015/10/1
辽宁对外经贸学院
253
网站实例——《网上书店》
主要内容包括：
2015/10/1
登录和密码验证系统
商品信息维护系统
商品信息搜索与购买
辽宁对外经贸学院
254
书店实例
1、浏览全部商品
2、实现特定商品的搜索功能
3、实现放入购买功能
2015/10/1
辽宁对外经贸学院
255
一、实现商品信息浏览功能
全部商品信息以表格的形式显示给用户
1.
新建商品浏览页面
2.
定义数据库连接
3.
定义记录集
4.
创建页面布局和页面元素
5.
动态元素设置
6.
添加【服务器行为】－【重复区域】
7.
分页显示商品记录
2015/10/1
辽宁对外经贸学院
256
分页显示商品记录
1.
2.
3.
2015/10/1
【服务器行为】面板中，双击【重
复区域】修改显示记录的个数
【插入】－【应用程序对象】－
【显示记录计数】－【记录集导航
状态】
加入【重复区域】导航条：用光标
选位置，添加【记录集分页】：4
个子项
或者【插入】－【应用程序对象】－【记
录集分页】－【记录集导航条】
辽宁对外经贸学院
257
二、实现商品搜索功能
对数据库中：商品信息表Catalog查询记录
1.
创建商品搜索网页
2.
定义数据库连接，并测试
3.
创建页面布局和页面元素
4.
创建“搜索结果” 页面
5.
实现商品搜索功能：
1)
2)
3)
6.
2015/10/1
连接Catalog表
绑定【请求变量】
创建[记录集]
布局返回结果
辽宁对外经贸学院
258
返回
•创建搜索用的记录集
添加【记录集】，单击【高级】
设置【高级】记录集各个选项
编写SQL语句：
1.
2.
3.
SELECT *
FROM catalog1
WHERE (name LIKE
'%'+LTRIM(RTRIM('mmNameStr'))+'%')
OR(description LIKE
'%'+LTRIM(RTRIM('mmNameStr'))+'%')
2015/10/1
辽宁对外经贸学院
259
返回
•布局返回结果
1.
2.
3.
2015/10/1
添加【服务器行为】：【重复区
域】和【记录集分页】
将【记录集导航条】和【重复区
域】设置为【如果记录集不为空
显示】
输入提示信息，选中它，添加服
务器行为－【如果记录集为空显
示】
辽宁对外经贸学院
260
购买
查看
留言
2015/10/1
辽宁对外经贸学院
261
© Copyright 2024 ExpyDoc
