网页设计Dreamweaver课件

■im

3.1Dreamweaver简介

3.2制作第一个网页

3.3文本修饰

3.4超链接应用

3.1Dreamweaver简介

Dreamweaver是由Micromedia公司出品的一款网

页制作的专业软件，与Fireworks、Flash并称为

网页制作的“三剑客”。

Dreamweaver也是一款“所见即所得”的可视化

软件，适合专业的网页设计师使用。

如果用户熟悉手工编写标记代码，Dreamweaver包

括许多与编码相关的工具和功能，其使用将更加

灵活。并且，借助Dreamweaver还可以使用服务器

语言（例如ASP、ASP.NET、ColdFusion标记语言、

JSP和PHP）生成支持动态数据库的Web应用程序。

目前，Dreamweaver的最新版本是

Dreamweavercs5。

amweaver界面介绍

在首次启动Dreamweaver时会出现如图3-1界面，这

是一个“工作区设置”对话框，在对话框左侧是

Dreamweaver的设计视图，右侧是Dreamweave的代码视

图。由于要采用可视化方式设计网页，选中“设计者”单

选钮，单击“确定”按钮。

工作区设置

请选择您喜欢的工作区布局。以后您可以在“首选参数”中切换布局。

。设计者①)c代码编写者(©

图3-1”对话框

D[ea端Weaver标准工作界面大致可以分为以下几个区域：

1.标题栏：2.菜单栏：3.文档工具栏：4.“插入”栏:

5.文档窗口：6.属性栏：7,状态栏：8.活动面板组：

插入工具栏

文档工具栏.组合面板

文档编辑窗口

活动面板内容

属性面板

文件（E）编辑正）查看插入①修改（⑷文本（D命令（0站点（3窗口（此帮助（由

工、菜单栏

至件：用泵管理文件。

插入：用来插入各种元素.

修改：具有对页面元素修改的功能。

文本：用来对文本操作。

命令：所有的附加命令项

站点：用来创建和管理站点

窗口：用来显示和隐藏控制面板以及切换文档窗口

帮助：联机帮助功能。

2、文档工具栏

“文档”工具栏包含各种按钮，它们提供各种“文

档”窗口视图（如“设计”视图和“代码”视图）

的选项、各种查看选项和一些常用操作（如在浏览

器中预览）。界面如图所示。

Jntltfed-L.lUntitled-2Untitled-3

代码=拆分a设计标题：无标题文档|或日照@|U回，&

包含用于将各种类型的“对象”（如图像、表格和层）插

入到文档中的按钮。有常用、布局、表单、文本、HTML、

应用程序、Flash元素和收臧夹共个二级菜单共137个按

钮。插入面板组其实就是图像化了的插入指令，通过一个

个的按钮，可以很容易的加入图像、声音、多媒体动画、

表格。图层、框架、表单、Flash和ActiveX等网页元素。

面板的界面如图。

，▼插入常用布局表单文本HTML应用程序Flash元素|收藏夹

电臼&国回国^4]■园圣田黔▼啰

“文档”窗口显示当前文档。可以选择下列任一视图:

“设计”视图是一个用于可视化页面布局、可视化编辑和

快速应用程序开发的设计环境。在该视图中

Dreamweaver显示文档的完全可编辑的可视化表示形

式，类似于在浏览器中查看页面时看到的内容。

“代码”视图是一个用于编写和编辑HTML、

JavaScript、服务器语言代码以及任何其他类型代码的

手工编码环境。

“代码和设计”视图使您可以在单个窗口中同时看到同一

文档的“代码”视图和“设计”视图。

b属件栏___________________________________________

属性面板并不是将所有的属性加载在面板上，而是根

据我们选择的对象来动态显示对象的属性属性面板的状

态完全是随当前在文档中选择的对象来确定的。属性面

板的界面如图。

▼属性三

格式无样式无

字体默认字体▼:大小无V

“文档窗口”的底部的状态栏提供了与你正在创建的

文档的有关其他信息。“文档”窗口底部的状态栏提供与

你正创建的文档有关的其它信息。

,标签选择等分辨率传送速度

<body/,<tabled*二Q100%534x392v1K/1秒

7；面板组

是分组在某个标题下面的相关面板的集合。若要展开

一个面板组，请单击组名称左侧的展开箭头；若要取

消停靠一个面板组，请拖动该组标题条左边缘的手柄。

reamweaver的参数设置

单击“编辑”一“首选参数”命令，或按〈Ctrl〉+

<U）组合键，打开“首选参数”对话框。

:义站点

1、网站的目录结构

网站的目录是指你建立网站时创建的目录。清晰

的目录结构有利于站点的维护，

网站的链接结构是指页面之间相互链接的拓扑结

构。研究网站的链接结构目的在于用最少的链接,

使得浏览最有效率。

建立目录结构的一些建议：

1.不要将所有文件都存放在根目录下

2.按栏目内容建立子目录

3.在每个主目录下都建立独立的images目录。

4.目录的层次不要太多，建议不要超过3层

(1)不要使用中文名字的目录名。

(2)不要使用过长的目录名。

(3)尽量使用意义明确的目录名，尽量做到“见

名知意”。

点管理

本地站点和远端站点

将存储于Internet服务器上的站点和相关文档称作远

端站点。位于Internet服务器上的站点仍是以文件和文件夹

作为基本要素的磁盘组织形式。

本地站点：在本地计算机的磁盘上构建出整个网站的

框架，保存相应的文档。

利用Dreamweaver,可以在本地计算机上创建出站点的框

架，从整体上对站点全局进行把握。在站点设计完毕，可以

利用各种上传工具，将本地站点上传到Internet服务器上以

形成远端站点。

建立一个本地站点，定

义站点名称和站点使用的本

地根文件夹以及默认的图像

文件夹，为以后的页面制作

和管理打好基础。

“站点/新建站点”命令或

“站点/管理站点”

图需要建立的站点结构

说明：“index.htm”为默认的首页，

“images”文件夹用来存储网页中所用到

的图片等文件，“_private”文件夹用来

存放自动生成的一些关于网站属性的文

件。

1.编辑站点

在Dreamweaver中创建好本地站点后，如果需要，还可以

对整个站点进行编辑操作。例如，编辑修改站点、复制站

点、删除站点等。

2.文件的基本操作

在Dreamweaver中，可以使用“文件”菜单来对单独的文

件进行管理。例如，执行“新建”、“打开”、“保存”、

“另存为”等命令。

皿3.2制作第一个网页

、制作网页的一般过程

制作一个浅黄色

背景的介绍中国四

大名著的页面网页,

在页面上通过添加

文字和水平线，展

示四大名著的宣传

内容，并且在页面

的右下方日期，实

例效果如图所示。

图实例效果

1、新建网页

选择菜单栏上的“文件/新建”命令。出现“新建文档

对话框，选定“基本页”中的“HTML”选项，单击

【创建】按钮，在文档窗口创建一个空白网页。

注：网站第一页的名字通常是访€佗乂.11101或访€16乂.111：011。

其它页面的名字可以自己取。这也就是主页，上传后

打开网页默认连接到此页。

2、设置页面属性

页面属性是指网页的一般属性信息，例如，网页标题、网页背景颜

色、背景图像、超链接颜色、跟踪图像等C

L设置网页标题及编码

3.设置网页其他属性

⑴外观

(3)链接

(3)跟踪图像

“修改”菜单中的“页面属性”命令

3、在浏览器中预览网页

可按〈F工2〉键或单击“文件”工具栏中的（在浏览

器中预览/调试）按钮，从弹出式菜单中选择“预览

在iexplore”。

4、保存网页

3.2文本修饰

1.文本

文本的操作主要包括：输入文字、设置文字大小、设

置字体、设置文本颜色、设置文本对齐方式等。

注意：设置文字字体时，可能字体下拉列表中不存在

想要的字体，则选择字体中的最后一项：编辑字体列表。

然后在对话框中选号，接着在“可用字体”栏中选

择需要加入到字体列表中的一种字体，点击中间的按钮

就可以加入了。

在输入文字时，一般情况下让系统自动换行，若

强制换行，可按回车键（会空出一行）或按

Shift+Enter（没有空行的强制换行）。

注意：在设置文字格式的时候，尽量为文字设置

一些常用的字体。通常的文本都设置为宋体、

12磅或10磅为好。如果非常需要使用某种特殊

字体来表达特殊效果，可以将该部分文字制作

成图片插入网页中。

2.插入日期

Dreamweaver提供了一个方便的日期对象，该对象使

用户可以以任何喜欢的格式插入当前日期，还可以选择

在每次保存文件时都自动更新该日期。

将插入点放置到要插入日期的位置，执行“插

入”一“日期”命令，弹出“插入日期”对话框，选择

一种日期格式。设置完毕后，单击“确定”按钮完成日

期的插入。

min3、4超链接的运用

一、网站的链接结构

建立网站的链接结构有以下两种基本方式：

1.树状链接结构

2.星状链接结构

链接结构的设计，在实际的网页制作中是非

常重要的一环，采用什么样的链接结构将直接影

响到版面的布局。

首页和一级页面之间用星状链接结构，一级和二

级页面之间用树状链接结构。

内容不多的小型网站，

链接结构比较简单，如

左图所示。这种链接结

构，可以称为树状结构

内容比较丰富的

中型网站，链接

结构稍为复杂一

点，它的链接关

系往往采用星形

结构。

/

二、超链接定义

1.超链接的分类

根据超链接目标文件的不同，超链接可分为页面超链接、锚

点超链接、电子邮件超接链等；根据超链接单击对象的不同，

超链接可分为文字超链接、图像超链接、图像映射等。

2.路径

(1)绝对路径

绝对路径是包括服务器规范在内的完全路径(网页一般使用

http://)o

(3)根目录相对路径

根目录相对路径是指从站点根文件夹到被链接文档经过的路

径。

(3)文档目录相对路径

文档目录相对路径是指以当前文档所在位置为起点到被链接

文档经过的路径，这种方式适合于创建本地链接。

三、设置超链接

1）页面之间的超链接

在网页中选中要做超级链接的文字或图片，单击“属性”面板中

链接栏右侧的“单击寻找链接网页”文件夹图标，在弹出的对

话框里选中相应的网页文件就完成了

注意：①如果超级链接指向的不是一个网文件。而是其他文件例

如.zip、.exe文件等等，单击链接的时候就会下载文件。另外,

超级链接也可以直接指向地址而不是一个文件，这时只需在

“属性”面板的“链接”栏中直接输入IP地址即可。

2）邮件地址的超链接

在编辑状态下，选定要链接的图片或文字，在“属性”面板的

“链接”栏中输入“mailt。：E-Mail地址”即可。

注意：以上超链接的方式也可以通过单击“插入”工具栏中的工

具或选择菜单栏上的“插入/超级链接”命令弹出的对话框，填

入要链接的地址即可。

3）文档中特定位置的超链接