如何使用Dreamweaver制作一个网页Word格式文档下载.docx

如何使用Dreamweaver制作一个网页Word格式文档下载.docx

《如何使用Dreamweaver制作一个网页Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《如何使用Dreamweaver制作一个网页Word格式文档下载.docx（34页珍藏版）》请在冰豆网上搜索。

如果要想让文字居中插入，点属性面板居中按钮即可。

启动中文输入法输入“我的主页”四个字。

字小不要紧，我们可以对它进行设置。

【设置文字的格式】选中文字，在上图属性面板中将字体格式设置成默认字体，大小可任意更改字号。

并选中“B”将字体变粗。

【设置文字的颜色】首先选中文字，在属性面板中，单击颜色选择图标，在弹出的颜色选择器中用滴管选取颜色即可。

【设置网页的标题和背景颜色】

点击“修改”菜单选“页面属性”。

系统弹出页面属性对话框（如下图）

请在标题输入框填入标题“我的主页”。

设置背景颜色：

　网页背景可以是图片，也可以是颜色。

此例是颜色。

如上图打开背景颜色选择器进行选取。

如果背景要设为图片，点击背景图象“浏览”按钮，系统弹出图片选择对话框，选中背景图片文件，点击确定按钮。

设计视图状态，在标题“我的主页”右边空白处单击鼠标，回车换一行，按照以下的步骤插入一幅画图片，并使这张图片居中。

您也可以通过属性面板中的左对齐按钮让其居左安放。

【插入图像】选择以下任意一种方法：

（1）使用插入菜单：

在“插入”菜单选“图像”，弹出“选择图像源文件”对话框，选中该图像文件，单击确定。

如下图：

（2）使用插入栏：

单击插入栏对象按钮>

选按钮，弹出“选择图像源文件”对话框，其余操作同上。

（3）使用面板组“资源”面板（如下图）：

点按钮，展开根目录的图片文件夹，选定该文件，用鼠标拖动至工作区合适位置。

为了管理方便，我们把图片放在“images”文件夹内。

如果图片少，您也可以放在站点根目录下。

注意文件名要用英文或用拼音文字命名

而且使用小写，不能用中文，否则要出现一些麻烦。

一个图片就插入完毕了。

（插入*.swf动画文件，选择“插入”菜单＞媒体＞Flash）。

【输入欢迎文字】

在图片右边空白处单击，回车换行。

仍然按照上述方法，输入文字“欢迎您……”然后，利用属性面板对文字进行设置。

保存页面。

一个简单的页面就这样编辑完毕了。

【预览网页】在页面编辑器中按F12预览网页效果。

网站中的第一页，也就是首页，我们通常在存盘时取名为index.htm。

【小结】我们制作了一个简单的网页。

内容有四：

①图片插入和对齐设置；

②文字的格式、颜色和加粗等设置；

③背景颜色的设置；

④预览网页，查看实际效果。

不仅要掌握还要举一反三反复练习。

表格设计

　表格是现代网页制作的一个重要组成部分。

表格之所以重要是因为表格可以实现网页的精确排版和定位。

本节教程我们分为两步来进行。

首先看表格操作的一个实例。

然后来看一些表格操作的基本方法。

在开始制作表格之前，我们首先对表格的各部分的名称做一个介绍。

（看下图）

　　一张表格横向叫行，纵向叫列。

行列交叉部分就叫做单元格。

　　单元格中的内容和边框之间的距离叫边距。

单元格和单元格之间的距离叫间距。

整张表格的边缘叫做边框。

　　下面看看我们使用表格制作的页面的实例

　　这幅页面的排版格式，如果用以前我们所讲的对齐方式是无法实现的。

因此我们需要用到表格来做。

实际上是用两行两列的表格来制作。

　　1、 

在插入栏中选择

按钮或“插入”菜单>

选“表格”。

系统弹出表格对话框如下图。

这些参数我们都已经认识了。

行：

2。

列：

其余的参数都保留其默认值。

。

　　2、 

在编辑视图界面中生成了一个表格。

表格右、下及右下角的黑色点是调整表格的高和宽的调整柄。

当光标移到点上就可以分别调整表格的高和宽。

移到表格的边框线上也可以调整。

（如下图）

　　3、 

在表格的第一格按住左键不放，向下拖拽选中二格单元格。

然后在展开的属性面板中选择合并单元格按钮（如下图红框所示）。

将表格的单元格合并。

如果要分割单元格，则可以用合并单元格按钮右边的按钮。

合并结果如下图。

　　4、 

用鼠标拖拽表格的边框调整到适当的大小。

　　5、 

单击左边的单元格，然后输入“摄影作品赏析”文字，并调整大小，因是竖排应每个字回车一次。

如果需要调整格子的大小。

只需要鼠标的光标移动到边框上拖拽即可。

　　6、 

在右边上下单元格内分别插入图片和文本。

页面的基本样子有了。

　　7、 

光标移动到表格的边框上单击。

表格周围出现调整框，表示选中整张表格。

然后，在属性面板中将“边框”值设置适合的值，如果为0，边框在编辑状态，为虚线显示，浏览时就看不见了。

　　一个符合要求的页面在表格的帮助下做好了。

　　通过上面的操作我们对于表格有了一个初步的认识。

还要提示一点，对整幅表格操作和对一个单元格操作的时候，相应的属性面板是不同的。

　　表格颜色设置，选择整幅表格后，利用属性面板的颜色选择器设置背景色。

单元格也可单独设置。

鼠标在需要设置的单元格点一下，其余操作同上。

　　下面我们就来看看这些属性面板的区别。

　　表格的属性面板，要出现这个面板必须先选中整幅表格，方法上面已经提到过了。

您可以在众多选项中填入需要的参数。

　　选中了单元格之后属性面板就发生如下变化了。

选择行或者列都属于选中单元格。

对表格操作的几种常用方式：

合并：

将选中的连续单元格合并成为一个单元格。

分割：

将一个单元格分割成若干单元格。

水平对齐方式：

分为（左）（中）（右）三种。

垂直对齐方式：

分为（顶）（居中）（居底）（基线对齐）

表格还可以增加或者删除行或者列。

在一个单元格中单击鼠标右键。

在右键菜单中选择表格选项>

>

选择“插入行或列”。

系统会弹出对话框如下。

　　在对话框里填入数据即可。

最后要说的是选中表格中的各种元素的方法：

　　选中一行，把光标移到该行的最左边单元格的左面，光标会变成箭头状。

单击就可以选中一行。

　　选中一列，把光标移到该列的最上边单元格的上面，光标会变成箭头状，然后单击可以选中一列。

　　选中整张表格，把光标移到表格的左上角或右边框或下边框线上。

单击即可选中整幅表格。

选中的表格会在周围出现一个黑框表示整张表格选中了。

请看如下示意：

　　选中单元格。

单元格可以同时选中多个。

选择连续的单元格，光标先选中的一个单元格，按shift键不放，选取最后一个单元格。

选不连续的单元格。

按住Ctrl键，点取所需要的单元格即可。

　　我们对于表格的使用就讲到这里，表格是网页制作的基本技术，只有通过不断实践才能充

　框架技术

　　在浏览网页的时候，我们常常会遇到这样的一种导航结构。

就是超级连接做在左边单击以后链接的目标出现在右面。

或者在上边单击链接指向的目标页面出现在下面。

要做出这样的效果，必须使用框架。

为了更好的理解什么是框架。

我们画一张示意图来进行讨论。

　　这是一个左右结构的框架。

事实上这样的一个结构是由三个网页文件组成的。

首先外部的框架是一个文件，图中我们用index.htm命名。

框架中左边命名为A，指向的是一个网页A.htm。

右边命名为B，指向的是一个网页B.htm。

　　下面我们就来从头开始制作一个框架。

（以左右框架结构为例）

　　1、点“文件”菜单>

新建，弹出“新建文档”对话框如下图：

　　或在插入栏>

布局>

选＂框架：

左框架＂如下图：

　　DreamweaverMX2004生成一个空白的框架页面，如下图：

　　2、选择「窗口」菜单＞“框架”，弹出“框架”面板如下图。

从框架面板可知，系统对左右框架生成命名。

左框架名为：

leftFrame，右框架名为：

mainFrame，当然您可以通过框架属性面板对框架重新命名，了解这一点非常重要。

创建超级链接时，要依据它正确控制指向的页面。

3、保存框架。

选择“文件”菜单点击“保存全部”。

系统弹出对话框。

这时，保存的是一个框架结构文件。

我们按照惯例都命名为index.htm。

　　保存的时候如果虚线框笼罩的是周围一圈就是保存框架结构。

（下图）

虚线笼罩在右边就是保存框架中右边网页。

虚线笼罩在左边就是保存框架中左边的网页：

三个页面保存完毕。

　　4、下面我们要实现按左边的超级链接，对应的页面出现在右边。

在左边的页面中做上超级链接。

指向一个已经存在的页面。

注意做好链接以后，要在目标栏中设置为mainFrame。

　　6、设置完毕，保存全部，按F12预览网页。

链接指向的页面出现在右边框架中。

　　7、重复以上步骤，把左框架所有的链接做完，一个简单的网站导航结构创建完成。

　　框架有很多优点，但是若理解不很透彻，容易搞混。

如果您的网站页面不多，可以创建一个不使用框架的Web页面来完成框架的功能。

例如，如果您想让导航条显示在页面的左侧或顶部，既可以使用框架页面，也可以在每一页包含该导航条而不使用框架。

Dreamweaver教程：

层及其应用

2006-07-0108:

30作者：

龙犊整理出处：

天极网责任编辑：

龙犊

层（Layer）是一种HTML页面元素，您可以将它定位在页面上的任意位置。

层可以包含文本、图像或其它HTML文档。

层的出现使网页从二维平面拓展到三维。

可以使页面上元素进行重叠和复杂的布局。

首先，请看下图：

　　我们首先来做一个层

在「窗口」菜单＞选“层”，或点「插入」菜单＞布局对象＞选“层”。

在页面中显示一个层。

通过周围的黑色调整柄拖动控制层的大小

拖动层左上角的选择柄可以移动层的位置。

单击层标记可以选中一个层。

在层中可以插入其他任何元素包括图片文字链接表格等。

　　一个页面中可以画出很多的层，这些层都会列在层面板中。

层之间也可以相互重叠。

层面板可以通过菜单「窗口」菜单＞选“层”打开。

　　这里我们需要对几个概念进行解释。

层有隐藏和显示的属性。

这是层的一个重要属性和以后说到的行为相结合就变成了重要的参数。

单击层面板列表的左边，可以打开关闭眼睛。

眼睛挣开和关闭表示层的显示和隐藏。

　　层还有一个概念就是层数，层数决定了重叠时哪个层在上面哪个层在下面。

　比如层数为２的层在层数为１的层的上面。

改变层数就可以改变层的重叠顺序。

　　层面板上面还有一个参数就是防止层重叠。

一旦选中，页面中层就无法重叠了。

　　层还有一种父子关系也就是隶属关系。

在层面板中是这样表示的。

　　图中Layer2挂在Layer1的下面。

Layer1为父层，Layer2为子层。

在页面中拖动Layer1，Layer2也跟着动起来。

因为他们已经链在一起了，并且Layer2隶属于Layer1。

父层移动会影响到子层。

移动layer2层，Layer1层不动。

也就是子层不会影响到父层。

　　要建立这样的一种隶属关系方法很简单。

在层面板中按Ctrl键将子层拖拽到父层即可。

　　［层和表格之间转换］

　　由于层在网页布局上非常方便，所以，一些人可能不喜欢使用表格或“布局”模式来创建自己的页面，而是喜欢通过层来进行设计。

DreamweaverMX2004可以使用层来创建自己的布局，然后将它们转换为表格。

　　在转换为表格之前，请确保层没有重叠。

请执行以下操作：

选择“修改”＞“转换”＞“层到表格”。

即可显示“转换层为表格”对话框。

选择所需的选项。

单击“确定”。

若要将表转换为层，请选择“修改”＞“转换”＞“表格到层”。

即可显示“转换表格为层。

对话框。

层及应用我们就简单介绍到这里。

操作框架

2006-07-0107:

00作者：

本文介绍操作框架的一些方面：

拆分框架，查看和设置框架集属性，设置链接的目标框架。

拆分框架

1.在框架页面中，将插入点放在边框上，出现双向箭头。

2.拖动边框，产生一个新的框架文件。

3.在属性面板上，为新框架命名，并且点击“浏览文件”，选择一个文件作为框架的“源文件”。

4.选择“文件”>

“保存全部”。

注：

要使用不在“设计”视图边缘的框架边框拆分一个框架，在按住Alt键的同时拖动框架边框。

查看和设置框架集属性

选择“窗口”>

“其他”>

“框架”,打开“框架”面板。

在“框架”面板中单击环绕框架集的边框，选中框架集。

在属性面板上，选中框架区，然后修改框架集属性。

使用类似的方法修改框架文件的属性。

设置链接的目标框架

在框架页面中选择一个链接，在“目标”弹出式菜单中，选择链接的文档应在其中显示的框架或窗口。

_blank在新的浏览器窗口中打开链接的文档，同时保持当前窗口不变。

_parent在显示链接的框架的父框架集中打开链接的文档，同时替换整个框架集。

_self在当前框架中打开链接，同时替换该框架中的内容。

_top在当前浏览器窗口中打开链接的文档，同时替换所有框架。

如果链接需要在框架页之外打开，使用target="

_top"

或target="

_blank"

添加背景音乐

2006-06-3015:

52作者：

　　1.打开一个网页文档，在文档左下角的“标签选择器”中选择“body”标签。

　　2.打开行为面板，点击“＋”按钮添加行为。

　　3.选择“播放声音”。

　　4.选择声音文件。

一个网页的背景音乐就添加好了。

　　如果要修改背景音乐属性

　　1.在文档中选择背景音乐的图标。

　　2.在属性检查器中，点击“参数”按钮。

　　3.修改参数。

自己动手用Dreamweaver制作活动菜单条

2006-06-1910:

44作者：

用QQ聊过天的朋友都对它的自动隐藏窗口功能爱不释手，它可以使窗口显得清爽整洁而且富有动感，笔者的几个朋友都想在自己的网页中加入类似的东东，经过共同摸索发现用Dreamweaer就可以实现这种效果，下面我们通过一个活动菜单条的制作来看看吧。

　　第1步：

制作菜单外貌 

图1

　　在Dreamweaer中新建一个文件，绘制一个层，在该层中插入一个表格（如图1），对该表格进行修饰，然后加入菜单项并建立各项的超链接，为了去掉超链接的下划线，可以编辑超链接的CSS样式，在CSS样式面板中通过CSS选择器将“Link”和“Hover”的“Decoration（装饰）”均设置为“None（无）”，将“Hover”的“Color（颜色）”设置为红色，最后将设置好的样式应用到各个菜单条中（可按“F12”键预览效果）。

　　第2步：

设计菜单的动态效果

　　1、选定层面，当鼠标变成“十”字形时按住左键将层面拖动到页面右上角（使整个菜单条完全露出但上边缘正好靠拢页面上边界），在窗口菜单中打开时间线面板，选定层面将其拖动到时间线上，Dreamweaer会自动产生一个长度为15帧的动画对象，拖动该动画对象的最后一个关键帧到第30帧，将其长度设置为30帧。

然后在第15帧处单击右键，在弹出的快捷菜单中选择“添加关键帧”选项插入一个关键帧，并将层面拖动到适当位置（如图2）。

在时间线窗口中的第15帧处再次单击右键，在弹出的快捷菜单中选择“添加动作”，为该帧添加一个交互行为，Dreamweaer将自动打开行为面板。

单击行为面板中的“+”按钮，从弹出的菜单中选择“Timeline/StopTimeline”，打开“StopTimeline”对话框，选择“Timeline1”后单击“确定”按钮关闭该对话框。

交互行为的事件为“onFrame15”，动作为“StopTimeline”，这样当时间线运行到第15帧时，动画将停止播放，这样就实现了菜单条弹回的功能。

图2

　　2、用同样的方法在时间线的第30帧处也添加一个“StopTimeline”的交互行为，这样就实现了菜单弹出的功能。

添加了这两个交互行为后，在时间线窗口的相应帧上面都出现了一个蓝色方块，它代表一个交互行为。

选择“自动播放和循环”复选框，使动画能够自动循环播放（如图3）。

图3

　　3、现在还要设置一个行为让时间线停止后能继续播放。

我的设想是这样的：

在一般状态下菜单条弹回但仅保留下方的“校园大观”字样，而菜单条再次弹出和弹回则由鼠标是否经过了菜单条上的“校园大观”来控制。

如此可以这样继续进行：

选定菜单条中的“校园大观”（要确保该字样的超链接地址为“#”，即空链接）字样，单击行为面板中的“+”按钮，在弹出的菜单中选择“Timeline/PlayTimeline”，在接着弹出的对话框中选择“Timeline1”后单击确定按钮，这时行为面板中将增加一个行为，在其“Events”下拉列表中选择“onMouseOver”事件，表示当鼠标处于该字样上方时播放动画（如图4）。

图4

　　至此，一个活动菜单条制作完成了。

可以按“F12”键预览其效果。

　　但这个菜单条还有一点美中不足的是，它的消失必须在鼠标经过了菜单条下方的特定区域（本例中为“校园大观”字样）时才行，要想在菜单条弹出后，只要把鼠标从该菜单条上移开即可使菜单消失，可能就要借助Fireworks或Flash了，如果你有什么好方法，不妨来信和我们一起交流一下。

用Dreamweaer制作活动菜单条——欢迎访问天极软件Dreamweaver教程专区

Dreamweaver超级技巧之文字特效

2007-02-2808:

19作者：

天极yesky责任编辑：

　　应用目标：

制作文字特效

　　应用软件：

DreamweaverMX

　　操作难度：

★★☆☆☆

　　我们常用的网页制作工具DreamweaverMX不仅可以制作网页，而且利用其中的CSS滤镜我们还可以对文字或图片进行简单的特效处理。

下面我们就通过几个例子来看一看在Dreamweaver中是如何制作特效文字的。

　　光晕字

　　首先启动Dreamweaver，在新文档中插入一个1×

1的表格，边框设置为0，然后在其中输入需要修饰的文字。

　　单击右面的浮动面板中的“设计→CSS样式”打开这一浮动面板。

　　面板右下角的四个按钮分别是：

添加、新建、编辑以及删除CSS样式。

　　注意：

在Dreamweaver中，CSS滤镜只能作用于有区域限制的对象，如表格、单元格、图片等，而不能直接用于文字，所以我们要把所需要增加特效的文字事先放在表格中，然后对表格应用CSS样式，从而使文字产生特殊效果。

　　图1新建CSS样式

　　单击新建CSS样式按钮，弹出如图1的对话框。

　　“类型”项选择“创建自定义样式”，“定义在”选择“仅对该文档”，点确定后弹出CSS样式定义对话框（如图2），在类型面板中我们可以定义字体、字号、颜色等内容，本例中我们选择字体为隶书，大小50像素，颜色为白色。

　　图2定义CSS样式

在Dreamweaver中精细化你的表格外观

2006-03-0113:

34作者：

　　表格无疑是网页制作中最为重要的一个对象，因为通常的网页都是依靠表格来进行版面布局和各元素组织的，它直接决定了网页是否美观，内容组织是否清晰。

但很多朋友常常忽视对表格的研究，而把目光投向其他的层、图片、特效等等，其实合理的利用表格可以方便的美化你得页面，我们也常常听到有朋友抱怨表格作出的页面单调、粗糙、缺乏变化，也常常听到有人问如何作出1个像素的表格边框。

其实在Dreamweaver中我们可以非常方便的精细化你的表格，从而使你的网页更加美观精细。

我们将分下面三个方面介绍如何在Dreamweaver中精细化你的表格。

　　一、利用属性面板。

　　图一

　　首先我们需要了解两个表格属性面板上的参数:

CellPad和CellSpace。

如图一所示，CellPad是指表格中两个单元格之间的距离，CellSpace是指每个单元格与它中间的内容之间的间隔距离。

通过改变这两个参数，并配合背景色彩的变化，可以方便的做出1像素的表格边框。

　　1、使用Object面板插入一个表格，定义表格宽、高及行数和列数。

注意此时Dreamweaver中插入表格的默认CellPad和CellSpace、Border都为0。

如图二：

　　图二

　　2、在属性面板中定义表格的Border为0，CellPad为5（这项可使单元格中的内容与单元格边缘之间保持5个像素）;

CellSpace为1（此项使得单元格之间保持1个项素的间距）。

如图三;

图三

　　3、设置表格的背景色#999999，如图四;

图四

　　4、设置单元格的背景色#FFFFFF，如图五;

　　图五

　　5、在浏览器中预览一下效果，我们可以看到表格呈现一个像素的边框，如图六;

图六

　二、利用表格嵌套。

　　还是上面的主要原理，我们在利用表格之间的互相嵌套，就可以实现更多的效果。

　　1、首先我们绘制一个表格，参照前面的例子设定此表格的CellPad和Ce