网站制作之DreamWeaver入门及软件安装方法附软件下载

　　请执行以下操作：启动 Dreamweaver MX 2004：
选择“站点” >“管理站点”（即，从“站点”菜单选择“管理站点”）。 出现“管理站点”对话框。
在“管理站点”对话框中，单击“新建”，然后从弹出式菜单中选择“站点”。 出现“站点定义”对话框。
如果对话框显示的是“高级”选项卡，则单击“基本”。 出现“站点定义向导”的第一个界面，要求您为站点输入一个名称。
　　在文本框中，输入一个名称以在 Dreamweaver MX 2004中标识该站点。该名称可以是任何所需的名称。
单击“下一步”。出现向导的下一个界面，询问您是否要使用服务器技术。
　　选择“否”选项，指示目前该站点是一个静态站点，没有动态页。
单击“下一步”。出现向导的下一个界面，询问您要如何使用您的文件。
　　选择标有“编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）”的选项。 在站点开发过程中有多种处理文件的方式，初学网页制作的朋友请选择此选项。
单击该文本框旁边的文件夹图标。 随即会出现“选择站点的本地根文件夹”对话框。
　　单击“下一步”， 出现向导的下一个界面，询问您如何连接到远程服务器。从弹出式菜单中选择“无”。 您可以稍后设置有关远程站点的信息。目前，本地站点信息对于开始创建网页已经足够了。单击“下一步”，该向导的下一个屏幕将出现，其中显示您的设置概要。
　　单击“完成”完成设置。 随即出现“管理站点”对话框，显示您的新站点。单击“完成”关闭“管理站点”对话框。
现在，已经为您的站点定义了一个本地根文件夹。下一步，可以编辑自己的网页了。
dreamweaver入门（2004版本）:创建页面：
页面编辑
本节介绍如何应用Dreamweaver MX 2004创建自己的网页。
从头创建自己的页面，可以使用 Dreamweaver MX 2004起始页创建新页，或者可以选择“文件” >“新建”，弹出如下对话框：
　　从各种预先设计的页面布局中选择一种。比如：选择“基本页”HTML，点击创建按钮。Dreamweaver MX 2004即展开工作区界面（一个空白页）：
　　您可以在这个空白页添加表格和输入文本进行编辑。如果您要向页面添加图片或其它元素，应先保存这个空白页。选择“文件”>“另存为”，在“另存为”对话框中，浏览到站点本地根文件夹下。填入文件名，保存退出。
dreamweaver基础教程:页面的总体设置：
我们已经描绘了小屋的蓝图，从现在开始，为我们的小屋添砖加瓦吧。打开01.html，制作一个图文混排的简单页面。
一、页面的总体设置
　　 1、设置页面的头内容
头内容再浏览器中是不可见的，但是却携带着网页的重要信息，如关键字、描述文字等，还可以实现一些非常重要的功能，如自动刷新功能。
鼠标左键单击插入工具栏最左边按钮旁的下拉小三角，在弹出菜单中选择“HTML”项，出现“文件头”按钮，点开下拉菜单，就可以进行头内容的设置了。
　　设置标题，网页标题可以是中文、英文或符号，显示在浏览器的标题栏中。我们直接在设计窗口上方的标题栏内输入或更改，就可以完成网页标题的编辑了。
　　插入关键字，关键字用来协助网络上的搜索引擎寻找网页。要想让更多的人看见你的网站，这项要好好填哦^_^单击上图所示的“关键字”项，弹出“关键字”对话框，填入关键字即可。
　　插入META，META标记用于记录当前网页的相关信息，如编码，作者，版权等，也可以用来给服务器提供信息。单击上图所示的“META”项，弹出“META”对话框，在“属性”栏选择“名称”属性，在“值”文本框中输入相应的值，可以定义相应的信息。
　　author—作者信息，copyright—版权声明，generator—网页编辑器。
　　
2、设置页面属性
　　单击“属性栏”中的“页面属性”按钮，打开的“页面属性”对话框。
　　设置外观，“外观”是设置页面的一些基本属性。我们可以定义页面中的默认文本字体、文本字号、文本颜色、背景颜色和背景图像等。我们设置页面的所有边距为0。
　　设置链接，“链接”选项内是一些与页面的链接效果有关的设置。“链接颜色”定义超链接文本默认状态下的字体颜色，“变换图像链接”定义鼠标放在链接上 时文本的颜色，“已访问链接”定义访问过的链接的颜色，“活动链接”定义活动链接的颜色。“下划线样式”可以定义链接的下划线样式。
　　设置标题，“标题”用来设置标题字体的一些属性。如下图所示，在左侧“分类”列表中选择“标题”，这里的标题指的并不是页面的标题内容，而是可以应用 在具体文章中各级不同标题上的一种标题字体样式。我们可以定义“标题字体”及6种预定义的标题字体样式，包括粗体、斜体、大小和颜色。按自己的喜欢的风格 设置吧。
dreamweaver入门（2004版本）:超级链接：
超级链接
　　作为网站肯定有很多的页面，如果页面之间彼此是独立的，那么网页就好比是孤岛，这样的网站是无法运行的。为了建立起网页之间的联系我们必须使用超级链接。称“超级链接”，是因为它什么都能链接，如：网页、下载文件、网站地址、邮件地址……等等。下边我们就来讨论怎样在网页中创建超级链接。
　　【页面之间的超级连接】
　　在网页中，单击了某些图片、有下划线或有明示链接的文字就会跳转到相应的网页中去。
　　1、在网页中选中要做超级链接的文字或者图片。
　　 2、在属性面板中单击黄色文件夹图标，在弹出的对话框里选中相应的网页文件就完成了。做好超级链接属性面板出现链接文件显示。（如下图）
　　3、按F12预览网页。在浏览器里光标移到超级链接的地方就会变成手型。
　　〖提示〗你也可以手工在链接输入框中输入地址。给图片加上超级链接的方法和文字完全相同。
　　如果超级链接指向的不是一个网页文件。而是其他文件例如zip、exe文件等等，单击链接的时候就会下载文件。
　　超级链接也可以直接指向地址而不是一个文件，那么单击链接直接跳转到相应的地址。例如，在链接框里写上http://www.dushuwu.net那么，单击链接就可以跳转到读书屋网站。
　　【邮件地址的超级连接】
　　在网页制作中，还经常看到这样的一些超级链接。单击了以后，会弹出邮件发送程序，联系人的地址也已经填写好了。这也是一种超级链接。制作方法是：在编辑状态下，先选定要链接的图片或文字（比如：欢迎您来信赐教！），在插入栏点或点插入菜单选“电子邮件链接”弹出如下对话框，填入E-Mail地址即可。
提示：还可以选中图片或者文字，直接在属性面板链接框中填写“mailto：邮件地址”。（如下图）
　　创建完成后，保存页面，按F12预览网页效果。
【制作图片上的超级链接】
　　注意，我们这里所说的图片上的超级链接是指在一张图片上实现多个局部区域指向不同的网页链接。比如一张中国地图的图片，单击了不同的省跳转到不同的网页。可点的区域就是热区。为了演示制作效果下面的中国地图我加了一些链接，你可以用鼠标测试。鼠标移动到省份的热区，会显示提示，如果有预先设置的网站，点击会进入对方的网站。
　　【制作方法】
　　 1、首先插入图片。单击图片，用展开的属性面板上的绘图工具在画面上绘制热区。
　　 2、属性面板改换为热点面板如图：链接输入框：填入相应的链接。替代框：填入你的提示文字说明。目标框：不作选择则默认在新浏览器窗口打开。
　　3、保存页面， 按F12预览，用鼠标在设置的热区检验效果。
　　提示：对于复杂的热区图形我们可以直接选择多边形工具来进行描画。替代框填写了说明文字以后，光标移上热区就会显示出相应的说明文字。
　 超级链接属性面板中的目标选项。
　 “目标”我们称它为目标区。也就是超级链接指向的页面出现在什么目标区域。默认的情况下域中总有四个选项。
　　 ①_blank ：单击链接以后，指向页面出现在新窗口中。
　　 ②_parent：用指向页面替换他外面所在的框架结构。
　　 ③_self：　将连接页面显示在当前框架中。
　　 ④_top：　 跳出所有框架，页面直接出现在浏览器中。
　　【小结】本节教程主要探讨创建页面的链接。
　　　 1、内部链接：链接到本站点的其他文档。
　　　 2、外部链接：链接到本站点以外的其他文档。
　　　 3、E-Mail链接：单击该链接，可以打开浏览者的邮件系统。
　　　 4、图片热区链接：使你的链接更灵活更有个性。
dreamweaver入门（2004版本）:表格设计：
表格设计
　 表格是现代网页制作的一个重要组成部分。表格之所以重要是因为表格可以实现网页的精确排版和定位。本节教程我们分为两步来进行。首先看表格操作的一个实例。然后来看一些表格操作的基本方法。在开始制作表格之前，我们首先对表格的各部分的名称做一个介绍。
　　一张表格横向叫行，纵向叫列。行列交叉部分就叫做单元格。
　　单元格中的内容和边框之间的距离叫边距。单元格和单元格之间的距离叫间距。整张表格的边缘叫做边框。
　　下面看看我们使用表格制作的页面的实例
　　这幅页面的排版格式，如果用以前我们所讲的对齐方式是无法实现的。因此我们需要用到表格来做。实际上是用两行两列的表格来制作。
　　1、 在插入栏中选择按钮或“插入”菜单>选“表格”。系统弹出表格对话框。这些参数我们都已经认识了。行：2。列：2。其余的参数都保留其默认值。。
　　2、 在编辑视图界面中生成了一个表格。表格右、下及右下角的黑色点是调整表格的高和宽的调整柄。当光标移到点上就可以分别调整表格的高和宽。移到表格的边框线上也可以调整。
　　3、 在表格的第一格按住左键不放，向下拖拽选中二格单元格。
然后在展开的属性面板中选择合并单元格按钮。将表格的单元格合并。如果要分割单元格，则可以用合并单元格按钮右边的按钮。
　　4、 用鼠标拖拽表格的边框调整到适当的大小。
　　5、 单击左边的单元格，然后输入“摄影作品赏析”文字，并调整大小，因是竖排应每个字回车一次。如果需要调整格子的大小。只需要鼠标的光标移动到边框上拖拽即可。
　　6、 在右边上下单元格内分别插入图片和文本。页面的基本样子有了。
　　7、 光标移动到表格的边框上单击。表格周围出现调整框，表示选中整张表格。然后，在属性面板中将“边框”值设置适合的值，如果为0，边框在编辑状态，为虚线显示，浏览时就看不见了。
　　一个符合要求的页面在表格的帮助下做好了。
　　通过上面的操作我们对于表格有了一个初步的认识。还要提示一点，对整幅表格操作和对一个单元格操作的时候，相应的属性面板是不同的。
　　 表格颜色设置，选择整幅表格后，利用属性面板的颜色选择器设置背景色。单元格也可单独设置。鼠标在需要设置的单元格点一下，其余操作同上。
　　下面我们就来看看这些属性面板的区别。
　　表格的属性面板，要出现这个面板必须先选中整幅表格，方法上面已经提到过了。您可以在众多选项中填入需要的参数。
　
　　选中了单元格之后属性面板就发生如下变化了。选择行或者列都属于选中单元格。
对表格操作的几种常用方式：
合并：将选中的连续单元格合并成为一个单元格。
分割：将一个单元格分割成若干单元格。
水平对齐方式：分为（左）（中）（右）三种。
垂直对齐方式：分为（顶）（居中）（居底）（基线对齐）
表格还可以增加或者删除行或者列。在一个单元格中单击鼠标右键。在右键菜单中选择表格选项>>选择“插入行或列”。系统会弹出对话框如下。
　　在对话框里填入数据即可。最后要说的是选中表格中的各种元素的方法：
　　选中一行，把光标移到该行的最左边单元格的左面，光标会变成箭头状。单击就可以选中一行。
　　选中一列，把光标移到该列的最上边单元格的上面，光标会变成箭头状，然后单击可以选中一列。
　　选中整张表格，把光标移到表格的左上角或右边框或下边框线上。单击即可选中整幅表格。选中的表格会在周围出现一个黑框表示整张表格选中了。
　　选中单元格。单元格可以同时选中多个。选择连续的单元格，光标先选中的一个单元格，按shift键不放，选取最后一个单元格。选不连续的单元格。按住Ctrl键，点取所需要的单元格即可。
　　我们对于表格的使用就讲到这里，表格是网页制作的基本技术，只有通过不断实践才能充分掌握。 dreamweaver入门（2004版本）:框架技术：
框架技术
　　在浏览网页的时候，我们常常会遇到这样的一种导航结构。就是超级连接做在左边单击以后链接的目标出现在右面。或者在上边单击链接指向的目标页面出现在下面。要做出这样的效果，必须使用框架。为了更好的理解什么是框架。我们画一张示意图来进行讨论。
　　这是一个左右结构的框架。事实上这样的一个结构是由三个网页文件组成的。首先外部的框架是一个文件，图中我们用index.htm命名。框架中左边命名为A，指向的是一个网页A.htm。右边命名为B，指向的是一个网页B.htm。
　　下面我们就来从头开始制作一个框架。（以左右框架结构为例）
　　1、点“文件”菜单>新建，弹出“新建文档”
　　或在插入栏>布局>选＂框架：左框架＂
　　Dreamweaver MX 2004生成一个空白的框架页面，
　　2、选择「窗口」菜单＞“框架”，弹出“框架”面板。从框架面板可知，系统对左右框架生成命名。左框架名为：leftFrame，右框架名为：mainFrame，当然您可以通过框架属性面板对框架重新命名，了解这一点非常重要。创建超级链接时，要依据它正确控制指向的页面。
3、保存框架。选择“文件”菜单点击“保存全部”。系统弹出对话框。这时，保存的是一个框架结构文件。我们按照惯例都命名为index.htm。
　　保存的时候如果虚线框笼罩的是周围一圈就是保存框架结构。
虚线笼罩在右边就是保存框架中右边网页。
虚线笼罩在左边就是保存框架中左边的网页：
三个页面保存完毕。
　　4、下面我们要实现按左边的超级链接，对应的页面出现在右边。在左边的页面中做上超级链接。指向一个已经存在的页面。注意做好链接以后，要在目标栏中设置为mainFrame。
　　6、设置完毕，保存全部，按F12预览网页。链接指向的页面出现在右边框架中。
　　7、重复以上步骤，把左框架所有的链接做完，一个简单的网站导航结构创建完成。
　　框架有很多优点，但是若理解不很透彻，容易搞混。如果您的网站页面不多，可以创建一个不使用框架的Web页面来完成框架的功能。例如，如果您想让导航条显示在页面的左侧或顶部，既可以使用框架页面，也可以在每一页包含该导航条而不使用框架。

最新评论