Dreamweaver CS3架设网站教程.doc

Dreamweaver CS3架设网站教程 一、定义站点 1、 在任意一个根目录下创建好一个文件夹（我们这里假设为E盘），如取名为MyWeb。 ***备注：网站中所用的文件都要用英文名。 2、打开Dreamweaver，选择“站点—新建站点”，打开对话框。在站点名称中输入网站的名称（可用中文），在本地根文件夹中选择刚才创建的文件夹（E:\MyWeb）。然后确定即可。 ***备注：再次打开Dreamweaver，会自动找到刚才设立的站点。如果有多个站点，可以在菜单“站点—管理站点”中去选择。 二、创建页面 1、在本地文件夹E:\MyWeb下面的空白处，按右键选“新建文件”，这样就建好了一个页面，默认的文件名为untitled.htm。htm就表示这个网页文件是一个静态的HTML文件。给它改名为index.htm。 ***网站第一页的名字通常是index.htm或index.html。其它页面的名字可以自己取。 2、双击index.htm进入该页面的编辑状态。在标题空格里输入网页名称，按右键选页面属性，打开“页面属性”窗口。在这里可以设置网站的标题、背景颜色或背影图像，超级链接的颜色（一般默认即可），其他都保持默认即可。 3．此时光标位于左上角，可输入一句话，如“欢迎来到我的主页”。选取文字，用菜单“窗口/属性”打开属性面板，选取文字大小为6，再使文字居中，然后在文字前用几个回车使其位于页面中间。 4．如要选取字体，则选择字体中的最后一项：编辑字体列表。然后在对话框中选+号，接着在“可用字体”栏中选择需要加入到字体列表中的一种字体，点击中间的按钮就可以加入了。 ***在网页上最常用的是宋体字。不要将特殊的字体加到列表中使用，因为别人电脑上未装就看不到。如果需要用的话，要做成图片后再使用。 ***在网页上打入空格的办法是：把输入法调为全角。 ***在网页上换行的办法是：shift+Enter。只按Enter则为换段。 三、为页面添加图片 1、在本地文件夹E:\MyWeb下面的空白处，按右键选“新建文件夹”，这样建立了一个文件夹，用它来放图片，可以改名为tu或pic或images都可以。 2、用菜单“插入记录/图像”，在对话框里选要插入的图片。如果会出现对话框：“你愿意将该文件复制到根文件夹中吗？”，必须选“是”，然后将它保存到刚建好的文件夹里。 3、选中该图片，打开属性面板，可以在上面为图片取名，重新设置图片的高、宽，拖住图片角上的点可以变大小。按住shift键，再拖动角上的点，可以使图片保持宽高比例拉伸。如要恢复这原始大小，则单击“高、宽“右边的“重设大小”按钮。 4、 “链接”可以直接在这里输入地址。“替代”是图片的说明，即鼠标指向图片所显示的文字；“边框”是图片边框宽度，“对齐”是对齐方式。 四、添加超级链接 1、为文字添加链接。 比如，在页面上输入我的文章，然后将其选中，打开属性面板，在链接一格中，选择它所要链接到的页面即可。后面一格目标我们一般常用的是self即的窗口；或是选择blank即打开新窗口。选择6.0 十八、动态图片按钮 1、准备好两张同样大小的图片，常用的方法是如一张为灰度照片，一张为彩色照片。或一张是按钮凹下的样式，一张是按钮凸起的样式。 2、举例：插入一个3行1列的表格，设置宽度为180像素。 3、将光标置于第一行，插入一张灰度的图片。 4、在属性面板中“链接”一栏里输入需要链接的地址，并给图片加上名称，如tu1. 5、点击行为窗口上的“+”按钮，从弹出菜单中选择“交换图像”。 6、此时在“图像”一栏中已显示要交换的图像，然后在“设置原始档为”一栏里选择好交换后的那张图。 7、下面有两个参数，“预先载入图像”和“鼠标滑开时恢复图像”，都要选中。 8、同样方法创建另外两个动态按钮。 十九、用框架布局页面 框架由两个主要部分组成——框架集和单个框架。 1、 点击文件—新建—示例中的项—框架集，即显示出已定义的框架的样式。我们“上方固定，下方固定”结构为例。 2、 点击“上方固定，下方固定”框架结构的图标，此时在页上插入上下两个框架，将整个页面分割成了3部分。我们分别在上面输入“上”，在中间输入“中”，在下面输入“下”。 3、 先保存一下。点击菜单中的文件/保存全部。这时首先保存框架集文件，可以自己修改名字，如kuangjia.htm。然后将分别保存框架集中的其他页面。在保存对应的页面的时候，该部分会以虚线框起来，这样可将上面部分保存为shang.htm。下面部分保存为xia.htm。中间部分保存为zhong.htm。 4、 至此，我们保存了四个页面，分别是框架集，和组成框架集的上、中、下三个页面。所以，其实这个框架是由四个页面组成的，所以用框架会降低一点用户浏览的速度。 5、 点击窗口/框架，打开框架的面板