手把手教你使用Dreamweaver制作一个网页
- 格式：doc
- 大小：894.00 KB
- 文档页数：33
如何使用Dreamweaver制作一个网页? 2009-04-24 13:35
创建网页页面
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生成一个空白的框架页面，如下图：
