要制作一个能够被大家浏览的网站,首先需要在本地磁盘上制作这个网站,然后把这个网站传到互联网的web服务器上。放置在本地磁盘上的网站被称为本地站点,位于互联网web服务器里的网站被称为远程站点。Dreamweaver 8提供了对本地站点和远程站点强大的管理功能。

1、规划站点结构

网站是多个网页的集合,其包括一个首页和若干个分页,这种集合不是简单的集合。为了达到最佳效果,在创建任何 Web 站点页面之前,要对站点的结构进行设计和规划。决定要创建多少页,每页上显示什么内容,页面布局的外观以及各页是如何互相连接起来的。

我们可以通过把文件分门别类的放置在各自的文件夹里,使网站的结构清晰明了,便于管理和查找。

2、创建站点

在Dreamweave 8中可以有效的建立并管理多个站点。搭建站点可以有两种方法,一是利用向导完成,二是利用高级设定来完成。

在搭建站点前,我们先在自己的电脑硬盘上建一个以英文或数字命名的空文件夹。

(1)选择菜单栏——站点——管理站点,出现“管 理站点”对话框。点击“新建”按钮,选择弹出菜单中的“站点”项。

在打开的窗口上方有“基本”和“高级”两个标签,可以在站点向导和高级设置之间切换。下面选择“基本”标签。

在文本框中,输入一个站点名字以在 Dreamweaver8.0中标识该站点。这个名字可以是任何你需要的名字。单击“下一步”。出现向导的下一个界面,询问是否要使用服务器技术。

 

我们现在建立的是一个静态页面,所以选择“否”。

点下一步,在文档框设置本地站点文件夹的地址。

点下一步,进入站点定义,我们将在站点建设完成后在与FTP链接,这里选择“无”。

单击“完成”按钮,结束“站点定义“对话框的设置。

单击“完成”按钮,文件面板显示出刚才建立的站点。

到此,我们完成了站点的创建。

3、搭建站点结构

站点是文件与文件夹的集合,下面我们根据前面对xmweb网站的设计,来新建xmweb站点要设置的文件夹和文件。

新建文件夹,在文件面板的站点跟目录下单击鼠标右键,从弹出菜单中选择“新建文件夹”项,然后给文件夹命名。这里我们创建新建8个文件夹,分别命名为:img、med、swf、txt、css、js、moan和fy。

创建页面,在文件面板的站点跟目录下单击鼠标右键,从弹出菜单中选择“新建文件”项,然后给文件命名。首先要添加首页,我们把首页命名为index.html,再分别新建01.html、02.html、03.html、04.html和05.html。

4、文件与文件夹的管理

对建立的文件和文件夹,可以进行移动、复制、重命名和删除等基本的管理操作。单击鼠标左键选中需要管理的文件或文件夹,然后单击鼠标右键,再弹出菜单中选“编辑”项,即可进行相关操作。

 

 

Dreamweaver8.0页面的总体设置

我们已经描绘了小屋的蓝图,从现在开始,为我们的小屋添砖加瓦吧。打开01.html,制作一个图文混排的简单页面。

一、页面的总体设置

1、设置页面的头内容

头内容再浏览器中是不可见的,但是却携带着网页的重要信息,如关键字、描述文字等,还可以实现一些非常重要的功能,如自动刷新功能。

鼠标左键单击插入工具栏最左边按钮旁的下拉小三角,在弹出菜单中选择“HTML”项,出现“文件头”按钮,点开下拉菜单,就可以进行头内容的设置了。

设置标题,网页标题可以是中文、英文或符号,显示在浏览器的标题栏中。我们直接在设计窗口上方的标题栏内输入或更改,就可以完成网页标题的编辑了。

插入关键字,关键字用来协助网络上的搜索引擎寻找网页。要想让更多的人看见你的网站,这项要好好填哦^_^单击上图所示的“关键字”项,弹出“关键字”对话框,填入关键字即可。

插入META,META标记用于记录当前网页的相关信息,如编码,作者,版权等,也可以用来给服务器提供信息。单击上图所示的“META”项,弹出“META”对话框,在“属性”栏选择“名称”属性,在“值”文本框中输入相应的值,可以定义相应的信息。

author—作者信息,copyright—版权声明,generator—网页编辑器。

2、设置页面属性

单击“属性栏”中的“页面属性”按钮,打开的“页面属性”对话框。

设置外观,“外观”是设置页面的一些基本属性。我们可以定义页面中的默认文本字体、文本字号、文本颜色、背景颜色和背景图像等。我们设置页面的所有边距为0。

设置链接,“链接”选项内是一些与页面的链接效果有关的设置。“链接颜色”定义超链接文本默认状态下的字体颜色,“变换图像链接”定义鼠标放在链接上时文本的颜色,“已访问链接”定义访问过的链接的颜色,“活动链接”定义活动链接的颜色。“下划线样式”可以定义链接的下划线样式。

设置标题,“标题”用来设置标题字体的一些属性。如下图所示,在左侧“分类”列表中选择“标题”,这里的标题指的并不是页面的标题内容,而是可以应用在具体文章中各级不同标题上的一种标题字体样式。我们可以定义“标题字体”及6种预定义的标题字体样式,包括粗体、斜体、大小和颜色。按自己的喜欢的风格设置吧。

 

Dreamweaver8.0文本的插入与编辑

1、插入文本

要向 Dreamweaver 文档添加文本,可以直接在Dreamweaver“文档”窗口中键入文本,也可以剪切并粘贴,还可以从word文档导入文本。

用鼠标在文档编辑窗口的空白区域点一下,窗口中出现闪动的光标,提示文字的起始位置,将01.rar中的文字素材复制/粘贴进来。

2、编辑文本格式

网页的文本分为段落和标题两种格式。

在文档编辑窗口中选中一段文本,在属性面板“格式”后的下拉列表框中选择“段落”把选中的文本设置成段落格式。

“标题1”到“标题6”分别表示各级标题,应用于网页的标题部分。对应的字体由大到小,同时文字全部加粗。

另外,在属性面板中可以定义文字的字号、颜色、加粗、加斜、水平对齐等内容。

3、设置字体组合

Dreamweaver8预设读的可供选择的字体组合只有6项英文字体组合,要想使用中文字体,必须重新编辑新的字体组合,在“字体”后的下拉列表框中选择“编辑字体列表”,弹出“编辑字体列表”对话框:

4、文字的其它设置

文本换行,按Enter键换行的行距较大(在代码区生成<p></p>标签),按Enter+Shift键换行的行间距较小(在代码区生成<br>标签)。

文本空格,我们选择编辑/首选参数,在弹出得对话框中左侧的分类列表中选择“常规”项,然后在右边选“允许多个连续的空格”项,我们就可以直接按“空格”键给文本添加空格了。

特殊字符,要向网页中插入特殊字符,需要在快捷工具栏选择“文本”,切换到字符插入栏,单击文本插入栏的最后一个按钮,可以向网页中插入相应的特殊符号。

插入列表,列表分为两种,有序列表和无序列表,无序列表没有顺序,每一项前边都以同样的符号显示,有序列表前边的每一项有序号引导。在文档编辑窗口中选中需要设置的文本,在属性面板中单击,则选中的文本被设置成无序列表,单击则被设置成有序列表。

插入水平线,水平线起到分隔文本的排版作用,选择快捷工具栏的“HTML”项,单击HTML栏的第一个按钮,即可向网页中插入水平线。选中插入的这条水平线,可以在属性面板对它的属性进行设置。

插入时间,在文档编辑窗口中,将鼠标光标移动到要插入日期的位置,单击常用插入栏的“日期”按钮,在弹出的“插入日期”对话框中选择相应的格式即可。

 

 

Dreamweaver8.0插入图像

目前互联网上支持的图像格式主要有GIF、JPEG和PNG。其中使用最为广泛的是GIF和JPEG。

1、插入图像

在制作网页时,先构想好网页布局,在图像处理软件中将需要插入的图片进行处理,然后存放在站点根目录下的文件夹里。

插图图像时,将光标放置在文档窗口需要插入图像的位置,然后鼠标单击常用插入栏的“图像”按钮。

弹出的“选择图像源文件”对话框,选择img/001.jpg,单击“确定”按钮就把图像001.jpg插入到了网页中。

注意:如果我们在插入图片的时候,没有将图片保存在站点根目录下,会弹出下图所示的对话框,提醒我们要把图片保存在站点内部,这时单击“是”按钮,

然后选择本地站点的路径将图片保存,图像也可以被插入到网页中