Slide 1

专业网页制作工具
Dreamweaver MX

学以致用，以用促学！轻松成为网页设计师！


Slide 2

教学大纲
 Dreamweaver MX基础知识
 Dreamweaver MX基本操作
 超链接
 图像
 表格
 表单
 CSS样式
 行为、层和时间轴
 框架


Slide 3

Dreamweaver MX基础知识
 Dreamweaver MX 功能介绍
 Dreamweaver MX 工作区介绍

 Dreamweaver MX 的基本界面


Slide 4

Dreamweaver MX 功能介绍
 功能强大的站点管理功能
 所见即所得的HTML网页制作功能

 应用客户端行为、层和时间轴可以
制作出动感网页

 可制作出支持数据库的ASP、
ASP.NET、JSP、PHP等动态网页


Slide 5

Dreamweaver MX 工作区介绍
 Dreamweaver MX 工作区：
是一种将全部元素置于一个窗口中的集成布局，文
档窗口居左，面板组居右。

 HomeSite/代码编写者样式工作区：
基本与Dreamweaver MX相同，只是更适合喜欢手写
代码的用户，面板组居左，文档窗口居右。

 Dreamweaver 4 工作区
类似于Dreamweaver 4的浮动布局


Slide 6

Dreamweaver MX的基本界面
 插入栏
 文档工具栏

 标签选择器
 属性检查器

 面板组


Slide 7

Dreamweaver MX的基本操作
 创建、管理站点和网页文件
 插入文本并设置其属性

 设置页面属性
 为文本做超链接


Slide 8

超链接
 理解超链接的文本、链接与目标
 建立文本超链接

 建立图像及热点超链接
 建立电子邮件超链接

 建立锚点超链接


Slide 9

超链接的文本、链接与目标
文本：即显示的文本；
链接：即链接到的路径，其中有相

对路径和绝对路径；
目标：即超链接的打开方式，如点

击链接后用新窗口打开，用_blank。


Slide 10

图像
 常用的网页图像格式
 在网页中插入图像并设置其属性

 在网页中进行图文混排
 为页面背景和表格背景设置图像

 在网页中插入翻转图像和导航条


Slide 11

常用的网页图像格式


GIF格式：支持256色，透明效果，

动画，采用无损压缩格式，压缩比小，
压缩图像与原图相同；


JPEG格式：支持16位真彩色，无透

明效果，无动画，采用有损压缩格式，
压缩比大，压缩图像稍逊于原图。


Slide 12

表格
 插入表格

 设置表格间距与填充距离
 设置表格边框与背景

 设置表格对齐
 设置单元格垂直与水平对齐
 用表格实现网页布局


Slide 13

表单
 表单简介

 插入表单及表单对象
 设置表单及表单对象属性


Slide 14

表单简介
表单能使网站与访问者进行交互或收集访问者信
息。表单从访问者处收集信息，然后将这些信息提交
给服务器进行处理，表单可以包含允许访问者进行交
互的各种表单对象。这些表单对象包括文本框、文本
域、隐藏域、单选框、复选框、下拉菜单、选择列表
、按钮等。
当访问者将信息输入表单并单击提交按钮时，这
些信息将被发送到服务器，服务器端脚 本或应用程
序将对这些信息进行处理，服务器通过请求信息将相
应的结果发送回用户，或执行一些操作来进行响应。
如果不使用服务器端脚本或应用程序如ASP、JSP
、PHP、CGI等来处理表单数据，将无法收集这些数
据。


Slide 15

CSS样式表
 CSS样式简介

 新建和编辑CSS样式
 定义CSS样式的属性

 应用CSS样式
 用CSS修饰超链接文字
 用CSS修饰表格边框
 用CSS修饰文本输入框与按钮


Slide 16

CSS样式简介
CSS是Cascading Style Sheets的缩写

，一般译为层叠式样式表。用户可以利
用CSS精确地控制页面里每一个元素的

字体样式、背景、排列方式、区域尺寸
、四周四入边框等。通过它可以制作出
风格统一且修改方便、具有特殊效果、
体积更小的网页。


Slide 17

行为、层和时间轴
 客户端行为简介

 客户端行为的事件和动作
 用行为制作弹出式菜单

 层简介
 动感层的制作
 时间轴简介
 用行为、层和时间轴制作浮动广告


Slide 18

客户端行为简介
使用客户端行为，可能使网页具有

一些动感效果，这些动感效果是在客户
端实现的。插入客户端行为，实际上是

自动给网页添加一些JavaScript代码，这
些代码能实现动感网页的效果。
客户端行为由两部分组成事件和
动作。


Slide 19

层简介
层是用于精确定位的页面元素，可

向层里插入文本、图像等其他页面元素
，借助层可对加入的页面元素进行精确

定位，还可做出重叠效果和运动效果。


Slide 20

时间轴简介
使用时间轴，可以更改层的位置、

大小、可见性和层叠顺序。特别对于要
在页加载后执行的其他操作，时间轴非

常有用。比如，时间轴可以更改网页图
像的源文件，使一段时间内有不同的图
像出现在页面上。


Slide 21

框架
框架结构是将两个或两个以上的网
页页面组合起来，能用同一个窗口打开
的网页结构。
一个框架结构包括两部分的网页文
件，一部分是框架设置文件，告诉浏览
器有哪些内容文件，怎样排列；另一部
分包括两个以上的内容网页文件，将在
窗口中分框显示，每个页面作为总页面
的一个框体。


Slide 22

上机任务
根据以上所学知识，用
Dreamweaver完成示例企业网站的首
页制作。
包括网站设计、建立站点和相
关的网页、使用文字、图像来充实
网页内容、使用表格来美化网页布
局、使用字幕和下拉菜单来增加网
页的动感。