手把手教你电子商务网站建设

　　手把手教你电子商务网站建设，网站是由各种网页所组成的，那么我们可以这么理解先做好网页才能做成网站，下面我们就来说说电子商务网站建设。

　　手把手开始做第一个网页

　　前几篇我们已经安装了Dreamweaver,并对它的界面做一介绍。那用Dreamweaver如何制作网站呢?现在我们就开始动手制作自己的第一个页面。以下边的网页为例，叙述一下制作一个网页的全过程。本节要制作的简单网页如下图：

　　如果你还没有下载安装Dreamweaver查看：dreamweaver基础教程：下载并安装

　　如果你要了解Dreamweaver工作界页请查看：Dreamweaver入门：工作区布局简单介绍(界面介绍)

　　在开始制作之前，我们先对这个页面进行一下分析。看看这个页面用到了那些东西。

　　网页顶端的标题“我的主页”是一段文字。

　　网页中间是一幅图片。

　　最下端的欢迎词是一段文字。

　　网页背景是一深紫红颜色。

　　知道了这个网页的结构以后我们就来可以制作了。

　　首先启动Dreamweaver MX 2004，确保你已经用站点管理器建立好了一个网站(根目录)。

　　为了制作方便，请您事先打开资源管理器，把要使用的图片收集到网站目录images文件夹内。

　　【插入标题文字】

　　进入页面编辑设计视图状态。在一般情况下，编辑器默认左对齐，光标在左上角闪烁，光标位置就是插入点的位置。如果要想让文字居中插入，点属性面板居中按钮即可。启动中文输入法输入“我的主页”四个字。字小不要紧，我们可以对它进行设置。

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

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

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

　　点击“修改”菜单选“页面属性”。系统弹出页面属性对话框(如下图)

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

　　设置背景颜色：　网页背景可以是图片，也可以是颜色。此例是颜色。如上图打开背景颜色选择器进行选取。如果背景要设为图片，点击背景图象“浏览”按钮，系统弹出图片选择对话框，选中背景图片文件，点击确定按钮。

　　设计视图状态，在标题“我的主页”右边空白处单击鼠标，回车换一行，按照以下的步骤插入一幅画图片，并使这张图片居中。您也可以通过属性面板中的左对齐按钮让其居左安放。

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

　　(1)使用插入菜单：在“插入”菜单选“图像”，弹出“选择图像源文件”对话框，选中该图像文件，单击确定。如下图：

　　(2)使用插入栏(如下图)：单击插入栏对象按钮>选

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

　　(3)使用面板组“资源”面板(如下图)：点

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

　　注：为了管理方便，我们把图片放在“images”文件夹内。如果图片少，您也可以放在站点根目录下。注意文件名要用英文或用拼音文字命名而且使用小写，不能用中文，否则要出现一些麻烦。

　　一个图片就插入完毕了。(插入*.swf动画文件，选择“插入”菜单>媒体>Flash)。

　　【输入欢迎文字】

　　在图片右边空白处单击，回车换行。仍然按照上述方法，输入文字“欢迎您……”然后，利用属性面板对文字进行设置。

　　保存页面。

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

　　【预览网页】在页面编辑器中按F12预览网页效果。网站中的第一页，也就是首页，我们通常在存盘时取名为index.htm。

　　【小结】在今天的教程中我们制作了一个简单的网页。

　　内容有四：

　　①图片插入和对齐设置;

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

　　③背景颜色的设置;

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

　　第三课：Dreamweaver基础教程之为页面创建超级链接

　　我们前面已经学习了制作一个单独的网页(Dreamweaver教程：手把手开始做第一个网页) 。然而一个网站不仅仅只有一张网页，而是有很多张网页组成，各网页之间就是通过超级链接连在一起，本文来介绍使用 Dreamweaver如何来建立网页的超链接。

　　在网页中，单击了某些图片、有下划线或有明示链接的文字就会跳转到相应的网页中去。

　　1、在网页中选中要做超级链接的文字或者图片。

　　2、在属性面板中单击黄色文件夹图标，在弹出的对话框里选中相应的网页文件就完成了。做好超级链接属性面板出现链接文件显示。(如下图)

　　3、按F12预览网页。在浏览器里光标移到超级链接的地方就会变成手型。

　　〖提示〗你也可以手工在链接输入框中输入地址。给图片加上超级链接的方法和文字完全相同。

　　如果超级链接指向的不是一个网页文件。而是其他文件例如zip、exe文件等等，单击链接的时候就会下载文件。

　　超级链接也可以直接指向地址而不是一个文件，那么单击链接直接跳转到相应的地址。单击链接就可以跳转到网站制作教程网站。

　　【邮件地址的超级连接】

　　在网页制作中，还经常看到这样的一些超级链接。单击了以后，会弹出邮件发送程序，联系人的地址也已经填写好了。这也是一种超级链接。制作方法是：在编辑状态下，先选定要链接的图片或文字(比如：欢迎您来信赐教!)，在插入菜单选“电子邮件链接”弹出如下对话框，填入E-Mail地址即可。

　　提示：还可以选中图片或者文字，直接在属性面板链接框中填写“mailto：邮件地址”。

　　(如下图)

　　创建完成后，保存页面，按F12预览网页效果。

　　【制作图片上的超级链接】

　　注意，我们这里所说的图片上的超级链接是指在一张图片上实现多个局部区域指向不同的网页链接。比如一张中国地图的图片，单击了不同的省跳转到不同的网页。可点的区域就是热区。为了演示制作效果下面的中国地图我加了一些链接，你可以用鼠标测试。鼠标移动到省份的热区，会显示提示.

　　【制作方法】

　　1、首先插入图片。单击图片，用展开的属性面板上的绘图工具在画面上绘制热区。

　　2、属性面板改换为热点面板如图：链接输入框：填入相应的链接。替代框：填入你的提示文字说明。目标框：不作选择则默认在新浏览器窗口打开。

　　3、保存页面， 按F12预览，用鼠标在设置的热区检验效果。

　　提示：对于复杂的热区图形我们可以直接选择多边形工具来进行描画。替代框填写了说明文字以后，光标移上热区就会显示出相应的说明文字。

　　超级链接属性面板中的目标选项。

　　“目标”我们称它为目标区。也就是超级链接指向的页面出现在什么目标区域。默认的情况下域中总有四个选项。

　　①_blank ：单击链接以后，指向页面出现在新窗口中。

　　②_parent：用指向页面替换他外面所在的框架结构。

　　③_self：　将连接页面显示在当前框架中。

　　④_top：　 跳出所有框架，页面直接出现在浏览器中。

　　创建完成后，保存页面，按F12预览网页效果。

　　第四课：Dreamweaver基础教程之表格的应用

　　表格应用

　　在网页制作中，表格起着非常重要的作用。表格不但可以用来对网页进行布局，还可以用来对网页的数据进行显示。本文就来介绍一下在Dreamweaver中表格的简单应用。先来看看下图

　　一张表格横向叫行，纵向叫列。行列交叉部分就叫做单元格。

　　单元格中的内容和边框之间的距离叫边距。单元格和单元格之间的距离叫间距。整张表格的边缘叫做边框。

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

　　这幅页面的排版格式，如果用以前我们所讲的对齐方式是无法实现的。因此我们需要用到表格来做。实际上是用两行两列的表格来制作。

　　1、 在“插入”菜单>选“表格”。系统弹出表格对话框如下图。这些参数我们都已经认识了。行：2。列：2。其余的参数都保留其默认值。。

　　2、 在编辑视图界面中生成了一个表格。表格右、下及右下角的黑色点是调整表格的高和宽的调整柄。当光标移到点上就可以分别调整表格的高和宽。移到表格的边框线上也可以调整。(如下图)

　　3、 在表格的第一格按住左键不放，向下拖拽选中二格单元格。(如下图)

　　然后在展开的属性面板中选择合并单元格按钮(如下图红框所示)。将表格的单元格合并。如果要分割单元格，则可以用合并单元格按钮右边的按钮。

　　合并结果如下图。

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

　　5、 单击左边的单元格，然后输入“摄影作品赏析”文字，并调整大小，因是竖排应每个字回车一次。如果需要调整格子的大小。只需要鼠标的光标移动到边框上拖拽即可。

　　6、 在右边上下单元格内分别插入图片和文本。页面的基本样子有了。

　　7、 光标移动到表格的边框上单击。表格周围出现调整框，表示选中整张表格。然后，在属性面板中将“边框”值设置适合的值，如果为0，边框在编辑状态，为虚线显示，浏览时就看不见了。

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

　　通过上面的操作我们对于表格有了一个初步的认识。还要提示一点，对整幅表格操作和对一个单元格操作的时候，相应的属性面板是不同的。

　　表格颜色设置，选择整幅表格后，利用属性面板的颜色选择器设置背景色。单元格也可单独设置。鼠标在需要设置的单元格点一下，其余操作同上。

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

　　表格的属性面板，要出现这个面板必须先选中整幅表格，方法上面已经提到过了。您可以在众多选项中填入需要的参数。

　　选中了单元格之后属性面板就发生如下变化了。选择行或者列都属于选中单元格。如下图：

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

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

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

　　水平对齐方式：分为(左)(中)(右)三种。

　　垂直对齐方式：分为(顶)(居中)(居底)(基线对齐)

　　表格还可以增加或者删除行或者列。在一个单元格中单击鼠标右键。在右键菜单中选择表格选项>>选择“插入行或列”。系统会弹出对话框如下。

　　在对话框里填入数据即可。最后要说的是选中表格中的各种元素的方法：

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

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

　　选中整张表格，把光标移到表格的左上角或右边框或下边框线上。单击即可选中整幅表格。选中的表格会在周围出现一个黑框表示整张表格选中了。请看如下示意：

　　选中单元格。单元格可以同时选中多个。选择连续的单元格，光标先选中的一个单元格，按shift键不放，选取最后一个单元格。选不连续的单元格。按住Ctrl键，点取所需要的单元格即可。

　　到这里为止，对于表格的一般应用就已经全部讲完了。如果要熟悉掌握，还要多多练习。

　　第六课：dreamweaver基础教程：学习使用框架

　　我们平时在上网时，经常会看到这种网页，导航在左边或的上面。单击导航后目标的内容会出现在右边或下面。如果要实现这样的功能，我们最好使用框架技术。为了更好的理解什么是框架。我们画一张示意图来进行讨论。

　　这是一个左右型的框架，由三个网页文件组成的。首先外部的框架是一个文件，图中我们用index.htm命名。框架中左边命名为A，指向的是一个网页A.htm。右边命名为B，指向的是一个网页B.htm。

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

　　1、点“文件”菜单>新建，弹出“新建文档”对话框如下图：

　　或在插入栏>布局>选"框架：左框架"如下图：

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

　　2、选择「窗口」菜单>“框架”，弹出“框架”面板如下图。从框架面板可知，系统对左右框架生成命名。左框架名为：leftFrame，右框架名为：mainFrame，当然您可以通过框架属性面板对框架重新命名，了解这一点非常重要。创建超级链接时，要依据它正确控制指向的页面。

　　3、保存框架。选择“文件”菜单点击“保存全部”。系统弹出对话框。这时，保存的是一个框架结构文件。我们按照惯例都命名为index.htm。

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

　　虚线笼罩在右边就是保存框架中右边网页。(如下图)

　　虚线笼罩在左边就是保存框架中左边的网页：(如下图)

　　三个页面保存完毕。

　　4、下面我们要实现按左边的超级链接，对应的页面出现在右边。在左边的页面中做上超级链接。指向一个已经存在的页面。注意做好链接以后，要在目标栏中设置为mainFrame。(如下图)

　　6、设置完毕，保存全部，按F12预览网页。链接指向的页面出现在右边框架中。

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

　　第七课：dreamweaver基础教程：创建网站导航条

　　上篇文章中我们介绍了用框架创建网站导航的应用(dreamweaver基础教程：学习使用框架)。本篇介绍另一种方式不使用框架创建网站导航条。由鼠标经过图像变换按钮的组成的导航条制作：

　　“鼠标经过图像”是当访问者用鼠标指针指向该图像时，该图像发生变化。

　　“鼠标经过图像”由两个图片组成：页面最初载入时显示的原始图像，访问者将鼠标指针移到原始图像上时显示另一幅图像。

　　提示：事先您要制作好按钮图像，确保每个按钮的图像都具有相同的宽度和高度(以像素为单位)。

　　请执行以下操作：

　　打开主页 (index.htm)

　　在“文档”窗口中，将插入点放置在要显示导航条的位置。一般在导航条上边要放置一个横幅图像(logo)，导航条就安排在logo下边的位置。

　　选择“插入”>“图像对象”>“导航条”。弹出对话框如下：

　　在“插入导航条”对话框中，单击顶部加号“+”按钮，按照上图所示①②③④⑤对应的文本框，填入相应的文件。即完成了一个按钮的添加。

　　然后，单击页面顶部的加号“+”按钮，添加另一个按钮。重复以上步骤，直至您所需的按钮添加完毕。

　　勾选“预先载入图像”，在对话框底部的“插入”菜单中，选中“水平”。勾选“使用表格”。

　　单击“确定”关闭该对话框，成功创建了导航条。

　　保存页面。

　　按F12，预览一下你的导航条，如果满意了，可以将该页面多次“另存为”其它页面，分别指定不同的名称。比如：p1.htm、p2.htm.....等。保存多少次视您的按钮数量而定。然后，分别打开其它页面进行编辑。

　　上述给大家介绍了一下DW的操作手法手把手教你电子商务网站建设，希望能帮助到大家。