如何使用Dreamweaver制作一个网页

如何使用Dreamweaver制作一个网页?2009-04-2413: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、点“文件”菜单新建，弹出“新建文档”对话框如下图：或在插入栏布局选＂框架：左框架＂如下图：DreamweaverMX2004生成一个空白的框架页面，如下图：2、选择「窗口」菜单＞“框架”，弹出“框架”面板如下图。从框架面板可知，系统对左右框架生成命名。左框架名为：leftFrame，右框架名为：mainFrame，当然您可以通过框架属性面板对框架重新命名，了解这一点非常重要。创建超级链接时，要依据它正确控制指向的页面。3、保存框架。选择“文件”菜单点击“保存全部”。系统弹出对话框。这时，保存的是一个框架结构文件。我们按照惯例都命名为index.htm。保存的时候如果虚线框笼罩的是周围一圈就是保存框架结构。（下图）虚线笼罩在右边就是保存框架中右边网页。（如下图）虚线笼罩在左边就是保存框架中左边的网页：（如下图）三个页面保存完毕。4、下面我们要实现按左边的超级链接，对应的页面出现在右边。在左边的页面中做上超级链接。指向一个已经存在的页面。注意做好链接以后，要在目标栏中设置为mainFrame。(如下图）6、设置完毕，保存全部，按F12预览网页。链接指向的页面出现在右边框架中。7、重复以上步骤，把左框架所有的链接做完，一个简单的网站导航结构创建完成。框架有很多优点，但是若理解不很透彻，容易搞混。如果您的网站页面不多，可以创建一个不使用框架的Web页面来完成框架的功能。例如，如果您想让导航条显示在页面的左侧或顶部，既可以使用框架页面，也可以在每一页包含该导航条而不使用框架。Dreamweaver教程：层及其应用2006-07-0108:30作者：龙犊整理出处：天极网责任编辑：龙犊层（Layer）是一种HTML页面元素，您可以将它定位在页面上的任意位置。层可以包含文本、图像或其它HTML文档。层的出现使网页从二维平面拓展到三维。可以使页面上元素进行重叠和复杂的布局。首先，请看下图：我们首先来做一个层1、在「窗口」菜单＞选“层”，或点「插入」菜单＞布局对象＞选“层”。2、在页面中显示一个层。3、通过周围的黑色调整柄拖动控制层的大小4、拖动层左上角的选择柄可以移动层的位置。5、单击层标记可以选中一个层。6、在层中可以插入其他任何元素包括图片文字链接表格等。一个页面中可以画出很多的层，这些层都会列在层面板中。层之间也可以相互重叠。层面板可以通过菜单「窗口」菜单＞选“层”打开。这里我们需要对几个概念进行解释。层有隐藏和显示的属性。这是层的一个重要属性和以后说到的行为相结合就变成了重要的参数。单击层面板列表的左边，可以打开关闭眼睛。眼睛挣开和关闭表示层的显示和隐藏。层还有一个概念就是层数，层数决定了重叠时哪个层在上面哪个层在下面。比如层数为２的层在层数为１的层的上面。改变层数就可以改变层的重叠顺序。层面板上面还有一个参数就是防止层重叠。一旦选中，页面中层就无法重叠了。层还有一种父子关系也就是隶属关系。在层面板中是这样表示的。图中Layer2挂在Layer1的下面。Layer1为父层，Layer2为子层。在页面中拖动Layer1，Layer2也跟着动起来。因为他们已经链在一起了，并且Layer2隶属于Layer1。父层移动会影响到子层。移动layer2层，Layer1层不动。也就是子层不会影响到父层。要建立这