如何使用Dreamweaver制作一个网页
如何使用Dreamweaver制作一个网页?
创建网页页面
1、在Dreamveaver“文件－新建－常规－基本页－HTML”，这样就建好了一个页面，英文版的默认的文件名为untitled.htm。中文版的的默认的文件名为“无标题文档”。htm就表示这个网页文件是一个静态的HTML文件。给它改名为index.htm。
注：网站第一页的名字通常是index.htm或index.html。其它页面的名字可以自己取。这也就是主页，上传后打开网页默认连接到此页。
2、在标题空格里输入网页名称，点击修改－页面属性，打开“页面属性”窗口。在这里可以设置网站的标题、背景颜色或背景图像，超级链接的颜色（一般默认即可），其他都保持默认即可。
3．此时光标位于左上角，可输入一句话，如“欢迎来到我的主页”。选取文字，用菜单“窗口/属性”打开属性面板，选取文字大小为6，再使文字居中，然后在文字前用几个回车使其位于页面中间等。
4．如要选取字体，则选择字体中的最后一项：编辑字体列表。然后在对话框中选+号，接着在“可用字体”栏中选择需要加入到字体列表中的一种字体，点击中间的按钮就可以加入了。
注：在网页上最常用的是宋体字。不要将特殊的字体加到列表中使用，
因为别人电脑上未装就看不到。如果需要用的话，要做成图片后再使用。注：在网页上打入空格的办法是：把输入法调为全角。
注：在网页上换行的办法是：shift+Enter。只按Enter则为换段。
下面拿一个现成的例子来给大家讲解一下：
现在，以下边的简单网页为例，叙述一下制作过程。简单网页如下图：在开始制作之前，我们先对这个页面进行一下分析。看看这个页面用到了哪些东西。
□网页顶端的标题“我的主页”是一段文字。
□网页中间是一幅图片。
□最下端的欢迎词是一段文字。
□网页背景是一深紫红颜色。
构思好这个网页的结构，我们就可以开始制作了。
首先启动Dreamweaver，确保你已经用站点管理器建立好了一个网站（根目录）。
为了制作方便，请您事先打开资源管理器，把要使用的图片收集到网站目录images文件夹内。
进入页面编辑设计视图状态。在一般情况下，编辑器默认左对齐，光标
在左上角闪烁，光标位置就是插入点的位置。如果要想让文字居中插入，点属性面板居中按钮即可。启动中文输入法输入“我的主页”四个字。字小不要紧，我们可以对它进行设置。
【设置文字的格式】选中文字，在上图属性面板中将字体格式设置成默认字体，大小可任意更改字号。并选中“B”将字体变粗。
【设置文字的颜色】首先选中文字，在属性面板中，单击颜色选择图标，在弹出的颜色选择器中用滴管选取颜色即可。
【设置网页的标题和背景颜色】
点击“修改”菜单选“页面属性”。系统弹出页面属性对话框（如下图）请在标题输入框填入标题“我的主页”。
设置背景颜色：网页背景可以是图片，也可以是颜色。此例是颜色。如上图打开背景颜色选择器进行选取。如果背景要设为图片，点击背景图象“浏览”按钮，系统弹出图片选择对话框，选中背景图片文件，点击确定按钮。
设计视图状态，在标题“我的主页”右边空白处单击鼠标，回车换一行，按照以下的步骤插入一幅画图片，并使这张图片居中。您也可以通过属性面板中的左对齐按钮让其居左安放。
【插入图像】选择以下任意一种方法：
（1）使用插入菜单：在“插入”菜单选“图像”，弹出“选择图像源文件”对话框，选中该图像文件，单击确定。如下图：
（2）使用插入栏：单击插入栏对象按钮>选按钮，弹出“选择图像源文件”对话框，其余操作同上。
（3）使用面板组“资源”面板（如下图）：点按钮，展开根目录的图片文件夹，选定该文件，用鼠标拖动至工作区合适位置。
注：为了管理方便，我们把图片放在“images”文件夹内。如果图片少，您也可以放在站点根目录下。注意文件名要用英文或用拼音文字命名
而且使用小写，不能用中文，否则要出现一些麻烦。
一个图片就插入完毕了。（插入*.swf动画文件，选择“插入”菜单＞媒体＞Flash）。
【输入欢迎文字】
在图片右边空白处单击，回车换行。仍然按照上述方法，输入文字“欢迎您……”然后，利用属性面板对文字进行设置。
保存页面。
一个简单的页面就这样编辑完毕了。
【预览网页】在页面编辑器中按F12预览网页效果。
网站中的第一页，也就是首页，我们通常在存盘时取名为index.htm。【小结】我们制作了一个简单的网页。
内容有四：
①图片插入和对齐设置；
②文字的格式、颜色和加粗等设置；
③背景颜色的设置；
④预览网页，查看实际效果。
不仅要掌握还要举一反三反复练习。
表格设计
表格是现代网页制作的一个重要组成部分。表格之所以重要是因为表格可以实现网页的精确排版和定位。本节教程我们分为两步来进行。首先看表格操作的一个实例。然后来看一些表格操作的基本方法。在开始制作表格之前，我们首先对表格的各部分的名称做一个介绍。（看下图）
一张表格横向叫行，纵向叫列。行列交叉部分就叫做单元格。
单元格中的内容和边框之间的距离叫边距。单元格和单元格之间的距离叫间距。整张表格的边缘叫做边框。
下面看看我们使用表格制作的页面的实例
这幅页面的排版格式，如果用以前我们所讲的对齐方式是无法实现的。因此我们需要用到表格来做。实际上是用两行两列的表格来制作。
1、在插入栏中选择按钮或“插入”菜单>选“表格”。系统弹出表格对话框如下图。这些参数我们都已经认识了。行：2。列：2。其余的参数都保留其默认值。。
2、在编辑视图界面中生成了一个表格。表格右、下及右下角的黑色点是调整表格的高和宽的调整柄。当光标移到点上就可以分别调整表格的高和宽。移到表格的边框线上也可以调整。（如下图）
3、在表格的第一格按住左键不放，向下拖拽选中二格单元格。（如下图）
然后在展开的属性面板中选择合并单元格按钮（如下图红框所示）。将表格的单元格合并。如果要分割单元格，则可以用合并单元格按钮右边的按钮。
合并结果如下图。
4、用鼠标拖拽表格的边框调整到适当的大小。
5、单击左边的单元格，然后输入“摄影作品赏析”文字，并调整大小，因是竖排应每个字回车一次。如果需要调整格子的大小。只需要鼠标的光标移动到边框上拖拽即可。
6、在右边上下单元格内分别插入图片和文本。页面的基本样子有了。
7、光标移动到表格的边框上单击。表格周围出现调整框，表示选中整张表格。然后，在属性面板中将“边框”值设置适合的值，如果为0，边框在编辑状态，为虚线显示，浏览时就看不见了。
一个符合要求的页面在表格的帮助下做好了。
通过上面的操作我们对于表格有了一个初步的认识。还要提示一点，对整幅表格操作和对一个单元格操作的时候，相应的属性面板是不同的。
表格颜色设置，选择整幅表格后，利用属性面板的颜色选择器设置背景色。单元格也可单独设置。鼠标在需要设置的单元格点一下，其余操作同上。
下面我们就来看看这些属性面板的区别。
表格的属性面板，要出现这个面板必须先选中整幅表格，方法上面已经提到过了。您可以在众多选项中填入需要的参数。如下图：
选中了单元格之后属性面板就发生如下变化了。选择行或者列都属于选中单元格。如下图：
对表格操作的几种常用方式：
合并：将选中的连续单元格合并成为一个单元格。
分割：将一个单元格分割成若干单元格。
水平对齐方式：分为（左）（中）（右）三种。
垂直对齐方式：分为（顶）（居中）（居底）（基线对齐）
表格还可以增加或者删除行或者列。在一个单元格中单击鼠标右键。在右键菜单中选择表格选项>>选择“插入行或列”。系统会弹出对话框如下。
在对话框里填入数据即可。最后要说的是选中表格中的各种元素的方法：
选中一行，把光标移到该行的最左边单元格的左面，光标会变成箭头状。单击就可以选中一行。
选中一列，把光标移到该列的最上边单元格的上面，光标会变成箭头状，然后单击可以选中一列。
选中整张表格，把光标移到表格的左上角或右边框或下边框线上。单击即可选中整幅表格。选中的表格会在周围出现一个黑框表示整张表格选中了。请看如下示意：
选中单元格。单元格可以同时选中多个。选择连续的单元格，光标先选中的一个单元格，按shift键不放，选取最后一个单元格。选不连续的单元格。按住Ctrl键，点取所需要的单元格即可。
我们对于表格的使用就讲到这里，表格是网页制作的基本技术，只有通过不断实践才能充
框架技术
在浏览网页的时候，我们常常会遇到这样的一种导航结构。就是超级连接做在左边单击以后链接的目标出现在右面。或者在上边单击链接指向的目标页面出现在下面。要做出这样的效果，必须使用框架。为了更好的理解什么是框架。我们画一张示意图来进行讨论。
这是一个左右结构的框架。事实上这样的一个结构是由三个网页文件组成的。首先外部的框架是一个文件，图中我们用index.htm命名。框架中左边命名为A，指向的是一个网页A.htm。右边命名为B，指向的是一个网页B.htm。
下面我们就来从头开始制作一个框架。（以左右框架结构为例）
1、点“文件”菜单>新建，弹出“新建文档”对话框如下图：
或在插入栏>布局>选＂框架：左框架＂如下图：
Dreamweaver MX 2004生成一个空白的框架页面，如下图：
2、选择「窗口」菜单＞“框架”，弹出“框架”面板如下图。从框架面板可知，系统对左右框架生成命名。左框架名为：leftFrame，右框架名为：mainFrame，当然您可以通过框架属性面板对框架重新命名，了解这一点非常重要。创建超级链接时，要依据它正确控制指向的页面。
3、保存框架。选择“文件”菜单点击“保存全部”。系统弹出对话框。这时，保存的是一个框架结构文件。我们按照惯例都命名为index.htm。
保存的时候如果虚线框笼罩的是周围一圈就是保存框架结构。（下图）
虚线笼罩在右边就是保存框架中右边网页。（如下图）
虚线笼罩在左边就是保存框架中左边的网页：（如下图）
三个页面保存完毕。
4、下面我们要实现按左边的超级链接，对应的页面出现在右边。在左边的页面中做上超级链接。指向一个已经存在的页面。注意做好链接以后，要在目标栏中设置为mainFrame。(如下图）
6、设置完毕，保存全部，按F12预览网页。链接指向的页面出现在右边框架中。
7、重复以上步骤，把左框架所有的链接做完，一个简单的网站导航结构创建完成。
框架有很多优点，但是若理解不很透彻，容易搞混。如果您的网站页面不多，可以创建一个不使用框架的Web页面来完成框架的功能。例如，如果您想让导航条
显示在页面的左侧或顶部，既可以使用框架页面，也可以在每一页包含该导航条而
不使用框架。
Dreamweaver教程：层及其应用
2006-07-01 08:30作者：龙犊整理出处：天极网责任编辑：龙犊
层（Layer）是一种HTML 页面元素，您可以将它定位在页面上的任意位置。层可以包含文本、图像或其它HTML 文档。层的出现使网页从二维平面拓展到三维。可以使页面上元素进行重叠和复杂的布局。首先，请看下图：
我们首先来做一个层
1、在「窗口」菜单＞选“层”，或点「插入」菜单＞布局对象＞选“层”。
2、在页面中显示一个层。
3、通过周围的黑色调整柄拖动控制层的大小
4、拖动层左上角的选择柄可以移动层的位置。
5、单击层标记可以选中一个层。
6、在层中可以插入其他任何元素包括图片文字链接表格等。
一个页面中可以画出很多的层，这些层都会列在层面板中。层之间也可以相互重叠。层面板可以通过菜单「窗口」菜单＞选“层”打开。
这里我们需要对几个概念进行解释。层有隐藏和显示的属性。这是层的一个重要属性和以后说到的行为相结合就变成了重要的参数。单击层面板列表的左边，可以打开关闭眼睛。眼睛挣开和关闭表示层的显示和隐藏。
层还有一个概念就是层数，层数决定了重叠时哪个层在上面哪个层在下面。比如层数为２的层在层数为１的层的上面。改变层数就可以改变层的重叠顺序。
层面板上面还有一个参数就是防止层重叠。一旦选中，页面中层就无法重叠了。
层还有一种父子关系也就是隶属关系。在层面板中是这样表示的。
图中Layer2挂在Layer1的下面。Layer1为父层，Layer2为子层。在页面中拖动Layer1，Layer2也跟着动起来。因为他们已经链在一起了，并且Layer2隶属于Layer1。父层移动会影响到子层。移动layer2层，Layer1层不动。也就是子层不会影响到父层。
要建立这样的一种隶属关系方法很简单。在层面板中按Ctrl键将子层拖拽到父层即可。
［层和表格之间转换］
由于层在网页布局上非常方便，所以，一些人可能不喜欢使用表格或“布局”模式来创建自己的页面，而是喜欢通过层来进行设计。Dreamweaver MX 2004可以使用层来创建自己的布局，然后将它们转换为表格。
在转换为表格之前，请确保层没有重叠。请执行以下操作：选择“修改”＞“转换”＞“层到表格”。即可显示“转换层为表格”对话框。
选择所需的选项。单击“确定”。
若要将表转换为层，请选择“修改”＞“转换”＞“表格到层”。即可显示“转换表格为层。对话框。
选择所需的选项。单击“确定”。
层及应用我们就简单介绍到这里。
Dreamweaver教程：操作框架
2006-07-01 07:00作者：龙犊整理出处：天极网责任编辑：龙犊
本文介绍操作框架的一些方面：拆分框架，查看和设置框架集属性，设置链接的目标框架。
拆分框架
1.在框架页面中，将插入点放在边框上，出现双向箭头。
2.拖动边框，产生一个新的框架文件。
3.在属性面板上，为新框架命名，并且点击“浏览文件”，选择一个文件作为框架的“源文件”。
4.选择“文件”>“保存全部”。
注：要使用不在“设计”视图边缘的框架边框拆分一个框架，在按住Alt 键的同时拖动框架边框。
查看和设置框架集属性
选择“窗口”>“其他”>“框架”,打开“框架”面板。
在“框架”面板中单击环绕框架集的边框，选中框架集。
在属性面板上，选中框架区，然后修改框架集属性。
使用类似的方法修改框架文件的属性。
设置链接的目标框架
在框架页面中选择一个链接，在“目标”弹出式菜单中，选择链接的文档应在其中显示的框架或窗口。
_blank 在新的浏览器窗口中打开链接的文档，同时保持当前窗口不变。
_parent 在显示链接的框架的父框架集中打开链接的文档，同时替换整个框架集。
_self 在当前框架中打开链接，同时替换该框架中的内容。
_top 在当前浏览器窗口中打开链接的文档，同时替换所有框架。
如果链接需要在框架页之外打开，使用target="_top" 或target="_blank"。
Dreamweaver教程：添加背景音乐2006-06-30 15:52作者：龙犊整理出处：天极网责任编辑：龙犊
1. 打开一个网页文档，在文档左下角的“标签选择器”中选择“ body ”标签。
dw网页制作基础代码
Dreamweaver 8 基础代码 HTML基本结构（每个网页都是在基本结构的基础上添加内容的） ---------网页文件开始标签
--------头部元素开始标签加粗：... 倾斜：... 滚动字幕: 滚动标签：marquee 最简表达： 滚动的属性： Direction--表示滚动的方向，值可以是left，right，up，down，默认为left Behavior--表示滚动的方式，值可以是scroll（连续滚动）slide（滑动一次）alternate（来回滚动）
Dreamweaver网页设计题库全(有答案)
网页设计复习试题（理论） 一、选择题 1、在网页中不能添加的元素是（ D ） A、文字、图像 B、表格、动画 C、声音视频 D、纸张等实物 2、下面不属于“页面属性”中可以设置的内容（ D） A、外观 B、链接 C、跟踪图像 D、首选参数 ~ 3、下列(B )方法无法添加网页标题 A、在HTML代码中添加网页标题 B、在文档窗口中添加网页标题 C、在网页属性中添加网页标题 D、在文档工具栏中添加网页标题 4、下面哪个功能不是开始页能够完成的操作（D ）。 A、创建新网页 B、创建新网站 C、打开网页文档 D、删除网页文档 5、在下面的选项中哪种不属于网页设计的范围（ C） A、页面内容设计 B、网页架构设计 ( C、服务器设计 D、LOGO设计 6、下面的哪一项不属于网页标准色的三大色系（D ） A、蓝色 B、黄/橙色 C、黑/灰/白 D、绿 7、下面文件属于静态网页的是 ( C )。 A、 B、 C、 D、 8、下面选项中哪个不是单元格的水平对齐方式之一（A ）。 。 A、两端对齐 B、默认 C、居中对齐 D、右对齐 9、以下说法正确的是（ A ） A、如果要选择多个非连续的单元格，只要按下[Ctrl]键，依次单击要选择的单元格即可 B、表格一旦创建，单元格就不能被合并和拆分了 C、表格的列的宽度和行的高度不能重新设置 D、以上都正确 10、表格的行标记是（ A ） A、tr B、td C、table D、tl 11、表格的单元格标记是（ B ） \ A、tr B、td C、table D、th 12、不可以在插入表格时弹出对话框中设置的属性（ C） A、行数 B、边框粗细 C、边框高度 D、列数 13、下列关于表格颜色的设置说法正确的是（D ） A、只能给表格设置背景颜色不能设置背景图片 B、不能对某一行设置背景颜色或背景图片 C、不能对一个单元格设置背景颜色或背景图片 D、可以对表格、行、单元格分别设置背景颜色或背景图片 & 14、下列不能创建表格的是( D ) A、单击[插入]菜单,选择[表格]命令 B、单击常用面板中的"表格"按钮 C、直接按ctrl+alt+t D、单击[文件]菜单,选择[表格]命令 15、下面哪些操作不可以在“文件”面板中完成（ D ）。 A、创建新文件 B、显示站点地图 C、文件的移动和删除 D、复制站点 16、下列哪个内容不是表格的基本组成部分（B ） A、行 B、图片 ? C、单元格 D、列 17、在“水平线”属性面板中，不能设置水平线的(c )。 A、宽度 B、高度 C、颜色 D、阴影 18、在表格属性面板中，不能设置表格的(B )。 A、边框颜色 B、文本的颜色 C、背景图像 D、背景颜色 19、（A ）的易用性以及几乎所有的浏览器所支持的特征是其他网页布局方法所取代不了的。 。 A、表格 B、框架 C、层 D、表单 20、除了（ D ）格式，其他三种图像格式都是应用于网络。 A、GIF B、JPEG C、PNG D、MP3 21、在制作文本超链接时，建立了超链接的文本（C ）发生了变化，并且多了一条下划线。 A、字体 B、大小 C、颜色 D、位置 … 22、以下能够创建空链接是（ A ） A、在”链接“文本框中直接输入“#” B、在”链接“文本框中直接输入“！” C、在”链接“文本框中直接输入“$” D、在”链接“文本框中直接输入“@” 23、。以下是Dreamweaver MX热点工具的是（D ） A、矩形热点工具 B、圆形热点工具 C、多边形热点工具 D、以上三个都是 24、下列的哪种图像格式不能插入到网页之中（D ）。 A、GIF B、JPEG { C、PNG D、BMP 25、源端点不能用于附加超链接的对象组有（ B ）。 A、文本、图像、按钮 B、文本、图像、单元格 C、文本、图像、FLASH动画 D、文本、图像、图层 26、通过页面属性可以修改链接的样式，下列哪些不能在页面属性里设置（ D ）。 A、链接的各种状态颜色 B、链接的文字样式 C、链接的下划线 D、链接文字的底纹样式
《Dreamweaver网页制作》期中试卷及答案
一、填空： (40分，每空 1 分) 1、网页三剑客中 Dreamweaver 是(网页)的软件； Fireworks 是(图像）的软件；Flash8 是(动画)的软件。 2、 Dreamweaver8的视图窗口有三种，即(代码)视图、 (拆分)视图和(设计)视图。 3、在开发网页之前，首先应建立一个(站点)来管理网页及图像等内容。 4、网页文件默认的扩展名是(.html)， Flash 源文件的扩展名是(.swf)。 5、在网页设计中，要使表格边框在浏览器中不可见，应将边框粗细设为(0 像素)。 6、通过 Dreamweaver定义站点的方法有(基本)和(高级)两种。 7、站点地图是整个站点的(结构图)，它以(层次结构)显示站点中各网页的链接关系。 8、单元格边距是指(单元格内容与边框)之间的距离；单元格间距是指(单元格)之间的距离。 9、 www 国内称之为广域网，是英文(WORLD)、(WIDE)、(WEB)的缩写，其信息资源主要就是由一篇篇使用(HTML)语言编写的 Web 文档组成。 10、通常用于网络中的图像格式有三种，即(JPG)、 (GIF)和(PNG)格式。 11、使用(放缩)工具可以放大或缩小文档；使用(抓手)工具则可以拖动页面。 12、网页中表格的宽度单位一般以(像素)为单位，也可用(百分比)来表示。 13、表格背景效果有两种设置，分别是(背景颜色)和(背景图案)。 14、跟踪图像用于辅助页面设计，可在(查看)对话框中设置。默认情况下，跟踪图像在 Dreamweaver编辑窗口是(可见)，在浏览器中永远(不可见)。 15、标准表格又称为(html表格)，它是用于 HTML页上显示(文字)以及(图像)和(表格数据)进行布局的强有力的工具。 16、 Dreamweaver 为用户提供了(左对齐)、 (右对齐)、 (居中对齐)、(两端对齐)四
Dreamweaver网页制作教案
认识Dreamweaver 一、学习目的 了解Dreamweaver，学会利用Dreamweaver制作网页。 二、学习内容 Dreamweaver的基本知识。 【学习步骤】 1、 Dreamweaver的功能 Dreamweaver可以像普通的字处理软件一样编辑Internet上以HTML格式保存的所有文件， 也就是网页；它支持动态HTML，可以在网页中产生动画；还可以在网页中插入各种插件，以产生特殊效果。 Dreamweaver可用于管理站点，它像文件夹一样创建和打开站点，用不同的方式查看站点中各个网页之间的关系，调整站点的组织结构，使整个站点条理清晰。 2、 Dreamweaver的窗口 （1）标题栏 （2）菜单栏 （3）工具栏 （4）视图栏 （5）文件夹列表 （6）工作区 3.网页工作区的三个视图方式选项 它们分别是“普通”、“HTML”“预览”，它们之间的相互切换十分容易实现的。 普通视图方式是Dreamweaver对网页所见即所得编辑方式的最佳体现，在此方式下，可以 像在Word中那样直接进行各种编辑操作，实现网页编辑的所有功能。
HTML视图实际上是一个文本编辑器，其中给出了普通视图方式下所件网页的HTML代码。在这里可以用菜单命令进行复制、粘贴、删除、查找等操作。对于HTML语言中的不同成分均用不同的颜色显示，这样比较容易区分各种语法成分。 为了在制作网页过程中能够随时查看网页的实际效果，Dreamweaver提供了预览视图方式。 4.安装dreameaver的方法 安装及注册 5.关闭dreameaver 6.保存网页的方法 三、小结 Dreamweaver的基本知识
《Dreamweaver网页设计》综合练习题(二)及答案
《Dreamweaver网页设计》综合练习题（二）及解答一、选择填空题（每空2分，共20分） 1．HTML 2．URL 3．ICP 4．SGML 5．CSS （_____）网络内容服务商 （_____）网络内容服务商 （_____）标准通用标记语言 （_____）统一资源定位符 （_____）超文本标识语言 答案： （___3_）网络内容服务商 （__5_）网络内容服务商 （__4_）标准通用标记语言 （___2__）统一资源定位符 （___1_）超文本标识语言 1．标签