怎么使用dreamweaver制作网页教程 dw建站设计网页

怎么使用dreamweaver制作网页教程 dw
建站设计网页
Dreamweaver是一款专业的网页制作软件，被广泛应用于网页设计师的日常工作中。

它是一款视觉化网页开发工具，可以轻松制作出跨越平台和浏览器限制的充满动感的网页。

在本文中，我们将为您介绍如何使用Dreamweaver制作网页。

一、定义站点
1.在任意一个根目录下创建一个文件夹（例如E盘），并为其命名（例如MyWeb）。

2.打开Dreamweaver，选择“站点-新建站点”，在对话框中输入网站名称和本地根文件夹路径（E:web），然后确定。

此时再次打开Dreamweaver，会自动找到刚才设立的站点。

二、创建页面
1.在本地文件夹E:\MyWeb下，右键点击空白处，选择“新建文件”，建立一个页面。

默认的文件名为untitled.htm，将其改名为index.htm。

2.双击index.htm进入该页面的编辑状态。

在标题空格里
输入网页名称，按右键选页面属性，打开“页面属性”窗口。

在这里可以设置网站的标题、背景颜色或背影图像，超级链接的颜色（一般默认即可），其他都保持默认即可。

3.在页面中添加文字，可用菜单“窗口/属性”打开属性面板，选取文字大小为6，再使文字居中，然后在文字前用几个回车
使其位于页面中间。

4.如果需要选取字体，则选择字体中的最后一项“编辑字
体列表”，在对话框中选+号，接着在“可用字体”栏中选择需要加入到字体列表中的一种字体，点击中间的按钮就可以加入了。

三、为页面添加图片
在页面中添加图片，可用菜单“插入/图片”，选择本地图
片路径，然后将其拖拽到页面中即可。

Dreamweaver是一款非常强大的网页制作软件，通过本文
的教程，相信您可以轻松上手制作出精美的网页。

1、在本地文件夹E:\MyWeb下新建文件夹，用于存放图片，可更名为tu、pic或images。

2、打开对象面板，选择“插入图像”，在对话框中选择要插入的图片。

若出现对话框“是否将该文件复制到根文件夹中？”，需选择“是”，并保存到刚建立的文件夹中。

3、选中图片，打开属性面板，可为图片命名、重新设置高宽，拖动角上的点可调整大小。

按住shift键再拖动角上的点，可保持宽高比例拉伸。

如需恢复原始大小，单击“重设大小”按钮。

4、“链接”中可输入地址，“替代”为图片说明，即鼠标指
向图片时显示的文字，“边框”为图片边框宽度，“对齐”为对齐方式。

5、为文字添加链接，选中文字，打开属性面板，在“链接”中选择要链接到的页面。

目标一栏可选择self或blank。

为图片添加链接同理。

图片可创建多个不同链接，方法为在属性面板中的“地图”下选择图形，画出蓝色矩形热区，为其设置链接地址。

同样，可用圆形设置另一个热区，为该图片设置其他链接。

6、添加E-mail链接，选中需要添加链接的文字或图片，打开属性面板，在“链接”中输入邮件地址，格式为mailto:邮件地址，中间不空格。

7、若链接到浏览器无法打开的文件，如exe、Zip等，点
击链接时会实现文件下载或在线播放功能。

8、使用表格，点击插入/表格，打开表格面板进行设置。

行数、列数、宽度、边框等可设置，单元格填充为单元格内侧与内容的距离，单元格间距为单元格之间的距离，单位为像素。

插入表格后，点击边框全选整个表格，在属性面板中进行各种设置。

3、把光标移到其中一个单元格，即可打开单元格的属性
面板，进行各种操作，例如设置背景色、背景图、边框、合并、拆分等。

一、制作细线表格的原理：
1、选中整个表格，将其背景设置为黑色，即表格线的颜色。

2、选中所有单元格，将其背景设置为白色。

二、自动格式化表格的方法：
1、先制作好一张表格，然后选中。

2、选择菜单中的命令/格式化表格，即可选择预设好的表
格样式。

三、创建一像素分割条的步骤：
1、插入一个1行1列，宽为200像素，边框和边距均为
0的表格。

2、选中表格，将表格高设置为1像素，并设置所需的背
景色（即所要的线条颜色）。

3、切换到代码和设计窗口，将代码中的删除即可。

七、用表格构建完整的页面：
一、网页顶部（一般包括图标、广告、导航菜单）：
1、创建一个1行2列，宽为760像素，边框和边距均为
0的表格。

2、选中表格，设置排列方式为居中对齐，背景色为
#3366CC。

3、将光标置于左边单元格中，设置其水平排列为左对齐，垂直排列为顶端对齐，然后插入网站的图标（即logo）。

4、将光标置于右边单元格中，设置其宽度为500，水平
排列为居中对齐，垂直排列为中间，然后插入网页广告（即banner）。

5、在刚完成的表格之后，插入一个1行1列，宽为760
像素，边框和边距均为0的表格。

6、选中刚创建的表格，设置排列方式为居中对齐，背景
色为#.
7、在该表格中插入多个图像，作为导航条菜单。

二、网页中部（左边栏目列表、中间网站新闻、右边栏目列表）：
1、在导航条表格后面，插入一个1行3列，宽为760像素，边框和边距均为0的表格。

并设置排列方式为居中对齐，背景色为#FFFFFF。

2、将光标置于左边单元格中，设置其宽度为18%，水平
排列为居中对齐，垂直排列为顶端对齐，然后插入一个导航条。

3、在刚插入的图片后，插入一个12行1列，宽为90%的表格。

设置其单元格间距为1，背景色为#CCCCCC。

4、首先，在表格第一个单元格中设置高度为20，背景色
为#FFFFFF。

然后，插入一个小点作为导航文字前面的标记，
并在其他11个单元格中进行同样的设置，完成左侧栏目分类
列表的制作。

5、将光标置于主体表格的中间单元格中，设置宽度为66%，水平排列为居中对齐，垂直排列为顶端对齐。

接下来，
插入一个导航条。

6、在图像后面插入一个4行1列，宽度为95%的表格，
并将单元格间距设置为1，背景色为#CCCCCC。

7、将光标置于表格的第一个单元格中，拖动鼠标选中4
个单元格，然后设置它们的高度为60，背景色为#FFFFFF。

8、将光标置于主体表格右侧的单元格中，设置宽度为16%，水平排列为居中对齐，垂直排列为顶端对齐。

接着，插
入一个导航条。

9、在图像后面插入一个7行1列，宽度为90%的表格。

将单元格间距设置为1，背景色为#CCCCCC。

10、按住Ctrl键，用鼠标点击刚插入的表格的第1、3、5、7单元格，然后设置它们的高度为55，背景色为#FFFFFF。

11、选中第2、4、6单元格，设置它们的高度为6，背景
色为#FFFFFF。

12、切换到源代码窗口，删除第2、4、6单元格中的空格符号“ ”。

网页底部（一般包括版权信息及其他相关内容）：
1、在主体表格后插入一个2行2列，宽度为760像素，
边框及边距均为的表格。

2、选中表格，设置排列方式为居中对齐，背景色为
#3366CC。

3、将光标置于表格第1行的左侧单元格中，设置宽度为50%，水平排列为默认，垂直排列为基线，背景色为#FFFFFF。

然后输入版权信息，内容颜色随意。

4、将光标置于表格第1行右侧单元格中，插入一个圆角图像，并在其后输入“Email”字样。

设置其大小和颜色为1和#FFFFFF。

5、插入一个文本域，宽度可以随意。

6、插入一个“GO”图像。

7、最后，设置页面属性。

点击菜单修改/页面属性，在标题一栏中输入标题，并选择背景图像。

将顶部边界设为***。

注意，将整个网页分部分放到不同的表格中组合而成，这样可以加快浏览器读取页面的时间。

因为浏览器是读完整个表格后才显示内容的，所以最好不要框在整个一个表格中。

1.进入布局视图：单击插入/布局中的布局视图按钮，或者通过菜单中的查看/表格视图/布局视图进入。

2.绘制布局表格：先单击绘制布局表格按钮，然后在页面中绘制出布局表格。

3.绘制大表格：按照页面的版面和内容，先绘制好网页的顶部、中部和底部的大表格。

4.绘制布局单元格：再单击绘制布局单元格按钮，在已经绘制好的布局表格中绘制布局单元格。

5.插入嵌套的小表格：返回标准视图，在已经划分好的表格中插入嵌套的小表格，细化页面设计。

注意：应该按照页面的版面和内容划分出几个布局表格，而不是把整个页面都放在一个大的布局表格中，以提高网页浏览速度。

6.使用层：单击插入/层，或者通过图标拖动鼠标创建出一个层。

7.设置属性：选中创建的层，查看属性面板，设置上、左和z轴值。

8.颜色设置：如果不设置颜色，层是透明的。

9.拖动和调节大小：点中层左上角的小方框可以随意拖动层，大小也可以调节。

10.溢出设置：当文字多于层的大小时，可设置visible （超出的部分照样显示）、hidden（超出部分隐藏）、scroll （不管有否超出，都显示滚动条）和auto（有超出时才出现滚动条）。

11.层管理：点击菜单窗口/其他/层，进入层管理窗口，可
以修改层的名称和z轴值，以及使层可见或不可见。

12.层的对齐：按住shift键，同时选中几个层，然后用修
改/对齐中的选项进行对齐。

13.嵌套层：插入一个层，将光标置于该层内，然后继续
插入一个层，就得到了嵌套层。

里面的叫子层，外面的叫父层，它们的z轴顺序是一样的。

拖动父层时，子层也会相对移动。

移动子层时，父层不会随之移动。

14.时间轴：插入一个层，然后在层中插入图片或小动画。

点击菜单中的窗口/其他/时间轴，打开时间轴窗口，将层拖放
到第1帧中，自动创建一个长度为15帧的时间轴。

5、将页面中的层拖动到页面左上角，作为动画开始时的
位置。

6、在时间轴上选中第15帧，将该帧拖动至任意长度，如30帧。

7、在第30帧选中层，将其拖放到页面右下方，此
时窗口中显示层从第1帧到第30帧的直线运动轨迹。

8、在第15帧中右键选择“增加关键帧”，并将层拖动至页面中下方。

9、勾选“自动播放”选项。

十一、制作滚动公告板
1、在页面上插入一个带背景的层，作为公告板的框架。

2、在该层中插入一个嵌套层，并将其移动到父层下方。

3、在嵌
套层中输入文本并居中排列。

4、打开时间轴面板，将子层作
为对象添加到面板中。

5、为子层创建一个向上移动的路径，
并将其移动到父层上方。

6、拖动最后一个关键帧，增加动画
时间，并勾选“自动播放”和“循环”选项。

7、选定父层，在属
性面板中将“溢出”属性设置为“hidden”。

十二、在页面中使用Flash动画
1、点击插入中的Flash按钮或选择菜单插入/媒体/Flash
来插入一个动画。

2、选中动画并在属性面板中设置宽度和高度，也可以通过拖动改变大小。

3、点击“播放”预览动画。

十三、让Flash动画变透明
1、当页面已有背景或想在图片上插入Flash动画时，Flash动画的背景色可能影响美观，需要将其制作成透明动画。

2、在图片上插入一个层，并在层中插入所需的Flash动画。

3、选中动画，在属性面板中点击“参数”按钮。

4、在“参数”左侧
输入“wmode”，右侧输入“transparent”。

十四、在页面中播放声音
1、在页面完成后，想为其添加背景音乐，应选择*.midi
文件，这样的文件大小小且下载速度快。

2、在页面所有表格
之外，点击行为窗口上的“+”按钮或选择菜单窗口/行为，在弹
出菜单中选择“播放声音”，打开对话框。

4、在行为窗口中，选择“浏览”并选择要播放的声音，然
后确定。

5、在行为面板中，会自动显示事件为onload，动作为播
放声音。

点击该行，会出现一个按钮，可以设置声音在哪个事件下播放。

常用的事件包括Onload（页面载入时）、OnClick （单击鼠标）、OnMouseOver（鼠标移到对象上）、OnUnload（关闭页面时）等。

7、该行为也可以设置在图片和文字链接上。

在文字链接
上播放声音之前，需要先为文字添加一个空链接，即选中文字，在链接一格里输入一个“#”符号。

15、制作一个准备在小窗口中显示的页面（如a.htm），
由于弹出窗口不能太大，所以内容要简洁。

2、打开已制作好的页面，在行为窗口上点击“+”按钮，选择“打开浏览器窗口”。

3、在对话框中输入相应的设置，包括要显示的URL、窗
口的宽度和高度等，属性中的各项参数需要根据需要打勾。

6、可以用这个方法来表示对浏览者的欢迎、网站公告、
离开时的告别语等。

16、选中一张图片，在行为窗口上点击“+”按钮，选择“设置文本/设置状态条文本”。

3、在对话框的“消息”一栏中输入需要显示的话，可以设
置触发条件为OnMouseOver（鼠标移到对象上），这样当鼠
标经过该图片时，状态栏将出现相关信息。

5、如果需要鼠标移开后信息消失，可以再次使用该行为，在“消息”一栏里不写任何内容，将触发条件改为XXX（鼠标
移开）。

6、同样可以在一段文字上设置该行为，或者设置在整个
页面上。

17、打开一个制作好的页面，点击左下角的项，在行为窗口上点击“+”按钮，选择“弹出信息”。

2、在设置窗口中的“消息”一栏中输入想要显示的消息即可。

3、可以通过设置Onload触发条件来实现页面载入时的欢迎信息，或者设置OnUnload触发条件来实现用户关闭页面时
的送别信息。

4、也可以在某一段文字上设置弹出信息，比如防止复制。

选中整段文字，注意左下角显示段落标记〈P〉，然后设置触
发条件为OnBeforeCopy（按右键时触发）或OnCopy（按右键选复制时触发），输入版权等语句即可。

十八、动态图片按钮
1、准备两张同样大小的图片，如灰度和彩色照片，或凹
陷和凸起的按钮样式。

2、插入一个3行1列的表格，设置宽度为180像素。

3、在第一行插入灰度图片，属性面板中设置链接和名称，点击“+”按钮，在弹出菜单中选择“交换图像”。

6、在“图像”一栏中选择要交换的图像，在“庙宇原始档为”一栏中选择交换后的图像，同时选中“预先载入图像”和“鼠标
滑开时恢复图像”两个参数。

7、同样方法创建另外两个动态按钮。

十九、使用框架布局页面
框架由框架集和单个框架两个主要部分组成。

1、点击插入中的框架，选择需要的框架结构，如上中下结构。

2、插入上下两个框架，分别输入“上”、“中”、“下”。

3、保存框架集文件和组成框架集的其他页面，分别为框架集、上、中、下三个页面。

4、框架由四个页面组成，使用框架会稍微降低用户浏览速度。

5、通过打开框架面板，选中需要编辑的框架，即可在编辑窗口中对应的框架出现虚线。

6、frame框架，可以设置该框架的属性。

同样地，选中中间框架和下面框架也可以分别设置它们的属性。

7、在编辑窗口中，将鼠标放在两个框架之间的边框上，光标会变成上下箭头形状。

此时点击边框，整个框架集会被选中。

8、选中整个框架集后，属性面板上会显示整个框架组的属性。

在此处可以设置框架集是否有边框、宽度及颜色等。

最重要的是可以在这里设置框架集中各个框架的大小。

9、在属性面板右边的图示上选中上面框架，设置它的行为为80像素，边框为。

10、选中下面框架，设置行高为30像素，边框为。

11、选中中间框架，设置行高为1，单位为相对。

相对指当前行相对于其他行所占的比例。

设为1就是指占据除上和下以外的所有浏览窗口剩余空间。

12、举例来说，Frame上，右键选页面属性，设置背景色为#FF6600.然后插入表格，插入一个1行2列，边框边距都为0的表格。

设置第1个单元格的宽度为116像素，然后插入一张图片。

将第2个单元格设置为水平对齐方式为居中，垂直排列方式为底部，然后依次输入“狮子座”、“魔蝎座”、“双子座”字样。

13、将光标置于中部框架mainFrame中，右键选页面属性，设置背景色为#FFFFCC。

然后插入一张大图像。

14、将光标置于下面框架bottomFrame中，右键选页面属性，设置一个背景图像。

15、另外制作三个页面，作为“狮子座”、“魔蝎座”、“双子座”所要链接的页面。

16、选中“狮子座”，在属性中为它设置好要链接的页面，然后在“目标”里选“mainframe”，即该内容在中间那个框架中显示。

同样设置“魔蝎座”、“双子座”的链接。

二十、跳转菜单
1、点击主菜单中的插入/表单对象/跳转菜单，或者使用插入/表单中的跳转菜单图标，来调出跳转菜单设置窗口。

2、首先在“文本”一栏里输入“请选择相关网站”字样。

然后点击窗口上的“+”号按钮。

这时菜单里多了一个选项，这个选项没有链接，仅作为跳转菜单的说明文字。

3、在文一栏里输入需要的网站，如“新浪”，然后在“选择时，前往URL”一栏里输入网站链接地址，此时，菜单项一栏里又多了一个选项，这个选项对应一个网的链接地址。

4、使用同样方法，在菜单中添加其他一些选项及对应的链接。

还可以用“上”“下”的按钮，来调整它们的顺序。

5.在设置窗口中，先不要选择“菜单之后插入前往按钮”这一项。

相反，选中“更改URL后选择第一个项目”，这样当使用跳转菜单到某个页面后，返回跳转菜单页面时，页面中的跳转菜单默认显示的仍然是第1项内容。

6.设置完毕后，点击“确定”即可。

请注意，跳转菜单实际上是一个表单，因此会先插入表单（红色虚线区域），然后在表单中插入下拉菜单。

7.要修改选项，请选中页面上的下拉菜单，然后点击属性面板中的“列表值”，即可修改各项内容。

8.当选中跳转菜单时，行为窗口中也会出现行为。

双击该行为，也可以进入设置窗口，重新对其进行设置。

9.如果“菜单项”中的第一项是链接而不是提示语句，则需要选中“选项”中的“菜单之后插入前往按钮”，并添加一个“前往”按钮。

21.运用插件可以扩展Dreamweaver的功能。

首先下载需要的插件，例如Animate Browser Window，然后在Dreamweaver XXX中安装插件。

启动Dreamweaver，在页面上右击左下角的，点击行为窗口中的“+”号按钮，选择“Animate Browser Window”，并进行相应的设置。

例如，在此处设置窗口打开前后的高度和宽度相同，打开后填满屏幕，触发条件为onLoad。

22.要插入滚动字幕，请将光标放在需要插入的位置。

在插入面板中选择“标签选择器”，选择marquee标签并点击“插
入”按钮，然后关闭“标签选择器”。

转换到代码视图，在两个marquee标签之间插入光标。

在“窗口”/“标签检查器”中设置标
签的各种用法。

r设置项右边的下拉箭头，选择滚动字幕内容
的运动方式。

其中，Alternate表示内容在相反的两个方向滚动，Scroll表示内容向同一个方向滚动，Slide表示内容接触到字幕
边框就停止滚动。

n属性设置字幕内容的滚动方向。

四个选项
分别为：down（向下运动）、left（向左运动）、right（向右
运动）和up（向上运动）。

scrollamount属性设置字幕滚动的
速度，一般设为1.
9、Scrolldelay属性用于设置滚动字幕内容滚动时的停顿
时间，单位为毫秒。

为了让滚动看起来更流畅，数值应该尽量小。

在本例中，我们将其设置为1毫秒。

10、Width属性用于设置滚动字幕的宽度。

这个数值可以
任意设置，比如我们将其设置为300.
11、OnMouseOver事件用于设置鼠标移动到滚动字幕上
时的动作，通常设置为停止滚动。

OnMouseOut事件用于设置
鼠标离开滚动字幕时的动作，通常设置为开始滚动。

这两项只
能手工输入，我们可以在OnMouseOver后面输入“();”，在
XXX后面输入“this.start();”。

12、Style属性用于设置滚动字幕内容的样式。

在本例中，我们通过手工输入“
13、Loop属性用于设置滚动字幕内容滚动的次数，默认
值为无限。

如果要设置为无限，我们可以将其设置为“-1”。

14、完整代码如下：滚动字幕内容
二十三、创建CSS样式表的步骤如下：
1、在网页上输入需要设置样式的文字。

2、打开“CSS样式”面板，可以通过“窗口/CSS样式”来打开。

3、在面板下方有四个按钮，分别是附加样式、新建样式、编辑样式和删除样式。

4、点击“新建样式”按钮，打开对话框。

在名称一栏中输
入样式名称，注意名称前面需要加上一个点号，如“.zi”（中文
名称不可用）。

在类型一栏中选择“创建自定义样式”，并将“定义在”设置为“仅对该文档”。

5、接下来打开另一个对话框，在左侧分类中选择“类型”，然后在右侧设置字体为宋体，大小为14像素，颜色可以任意
选择。

然后点击确定。

6、选中需要应用样式的文字，然后点击“CSS样式”面板
中的样式“.zi”。

这样，这段文字就应用了CSS样式。

7、如果需要修改刚才定义的CSS样式，可以点击该样式，然后点击下面的“编辑样式”按钮进行修改。

二十四、创建动态链接样式表的步骤如下：
1、点击“新建CSS样式”按钮，在“定义在”一栏中选择“仅对该文档”，在“类型”一栏中选择“使用CSS选择器”。

2、当样式表类型选择“使用CSS选择器”时，下拉菜单的
名称变成了“选择器”，表示输入内容为CSS选择器。

单击下
拉按钮，可以看到动态链接的四种状态。

Link。

visited。

hover。

and active XXX set these states。

first select a:link from the drop-down menu and set the style to have no underline and a color of #FF6600 (orange)。

Then。

select
a:visited and set it to have no underline and a color of #FFFF00 (yellow)。

Next。

set a:hover to have an underline and a color of #FF6600 (orange)。

The a:active state does not need to be set as it will XXX the a:hover state.
XXX on the same page。

click the new style button and select "Use CSS Selector" as the style type。

In the selector field。

enter a. and set it to red with no underline。

Then。

create two (purple with no underline) and a. (blue with an underline)。

XXX style.
XXX style。

XXX on the same page。

To apply the same style to different pages。

create an external style sheet by selecting "Create Custom Style" and choosing "New Style Sheet File." Save the file to the local site and use it on other pages by importing it。

To export an internal style sheet as an external file。

click the gray icon in the style window and select "Export XXX."
5、当需要其他页面使用外部样式表时，可以使用样式表窗口中的第一个按钮“附加样式表”，打开窗口，然后选择外部样式表文件，并在添加为中选择“链接”，最后点击确定即可。

二十六、CSS中的背景用于设置文字背景、表格背景图等；区块用于设置文本的文字间距、对齐方式、下标、上标、排列方式等；盒子用于设置图片和文本内容之间的空白距离和图文混排的方法；边框用于设置表格文本区、按钮等的美化；列表用于设置列表项样式，即提纲式的一段话；定位用于设置页面中图片的相对和绝对定位；扩展中的光标可以设置为手型、十字型、I型、等待型、默认型、帮助型和各种方向的箭头型；
扩展中的过滤器可以用来做CSS滤镜特效，但效果不太明显，最好使用专门加工图片的软件来完成。

二十七、创建网上相册的步骤：首先安装FireworksMX
软件，然后加工好所需的照片并将它们放在同一个文件夹中。

接着点击菜单中的命令/创建网站相册，打开设置窗口，并输
入相册标题、副标信息、其他信息。

在“源图像文件夹”中选择保存照片的文件夹，在“目标文件夹”中选择当前站点目录，并根据需要选择“缩略图大小”和“显示文件名称”等选项。

最后选
中“为每张图片建立导览页面”一项，确定即可。

二十八、定制网页过渡功能是指在浏览者进入或离开网页时呈现不同的刷新效果，比如卷动、百叶窗等。

这可以使网页
更具有动感，但也要注意适可而止，否则太花哨的变化容易引起浏览者反感。

打开一个页面后，单击菜单中的插入/文件头标签/Meta，会弹出Meta对话框。

在对话框中的属性选项的下拉列表中选择HTTP-equivalent选项。

在值一格中键入Page-Enter，表示进入网页时有网页过渡效果。

在内容一格中键入Revealtrans(n=4,n=2)。

n=4表示网页过渡效果的延续时间为4秒，XXX表示过渡效果方式。

值为2时表示圆形收缩。

输入完后单击确定，存盘。

这样当我们点击一个超链接进入这个页面时就可以看到效果了。

还有二十多种效果供你选择，n的值改为相应的效果的代号即可，具体效果和设置如下表所示：
效果 n 效果 n
盒状收缩溶解 12
盒状展开 1 左右向中部收缩 13
圆形收缩 2 中部向左右展开 14
圆形展开 3 上下向中部收缩 15
向上擦除 4 中部向上下展开 16
向下擦除 5 阶梯状向左下展开 17。