Dreamweaver_2--基于表格的页面布局

Dreamweaver cs4 网站制作入门

网站制作实例一： Cafe Townsend

Cafe Townsend

一、创建工作目录

工作目录就是你建立站点时所要使用的本地文件夹，Dreamweaver 将此文件夹称为本地站点。本地文件夹通常是你的计算机硬盘上的一个文件夹，例如：D:\mywebsites 。

1、在D：盘上创建名为mywebsites 的新文件夹。

2、下载所需素材。cafe_townsend.rar

3、将下载得到的素材解压缩到mywebsites 文件夹中。

你将使用D:\mywebsites\cafe_townsend 文件夹作为站点“cafe townsend” 的根文件夹

（主文件夹）。

二、定义本地文件夹

您必须为创建的每一个新Web 站点定义Dreamweaver 本地文件夹。本地文件夹是您在

硬盘上用来存储站点文件的工作副本的文件夹。如果不定义本地文件夹，Dreamweaver 中的某些功能可能无法正确运行。

如果定义了本地文件夹，您还可以管理文件，并使用一些文件传输方法在本地与Web 服

务器之间传输文件。

1、启动Dreamweaver，选择“站点”>“管理站点”。

2、在弹出的“管理站点”对话框中单击“新建”按钮，然后选择“站点”。

3、在弹出的“站点定义”对话框中，如果显示向导（“基本”选项卡），则单击“高级”选项卡，然后从“分类”列表中选择“本地信息”（它应当是默认选项）。

4、在“站点名称”文本框中，输入Cafe Townsend 作为站点名称。

5、在“本地根文件夹”文本框中，指定在上一节中复制到D:\mywebsite 文件夹中的cafe_t ownsend 文件夹。你可以单击文件夹图标来浏览并选择该文件夹，或者在“本地根文件夹”

文本框中输入路径。

6、在“默认图像文件夹”文本框中，指定cafe_townsend 文件夹中已有的images 文件夹。你可以单击文件夹图标来浏览并选择该文件夹，或者在“默认图像文件夹”文本框中输入路径。

7、单击“确定”。随即出现“管理站点”对话框，显示您的新站点。

8、单击“完成”关闭“管理站点”对话框。此时“文件”面板显示当前站点的新本地根文件夹。“文件”面板中的文件列表将充当文件管理器，允许您复制、粘贴、删除、移动和打开文件，就象在计算机桌面上一样。

现在，已经为您的站点定义了一个本地根文件夹。本地根文件夹是本地计算机上用来存储Web 页面的工作副本的文件夹。如果您以后想要发布页面并使其可供公众访问，则需要在运行Web 服务器的远程计算机上定义一个远程文件夹，用来存储本地文件的已发布副本。

三、了解你的任务

下图是一张为Cafe Townsend（一个需要制作Web 站点的虚构餐馆）设计的、完整的和符合要求的设计草样。作为Web 设计人员，您需要对草样进行转换，使之最终形成可以使用的Web 页面。

创建基于表格的页面布局

表格是用于在HTML 页上显示表格式数据以及对文本和图形进行布局的强有力的工具。你可以使用表格快速轻松地创建布局。在本实例中，你将在一个新的Dreamweaver 文档中创建若干表格。这些表格的行和单元格实际上将用作你将在以后添加的内容的“容器框”。

一、创建并保存新页面

建立站点并检查设计草样后，你就可以开始创建Web 页面了。首先你将创建一个新页面，并将它保存到你的Web 站点的本地根文件夹my site 中。该页面最终将成为虚构餐馆C afe Townsend 的主页。

1、在Dreamweaver 中，选择“文件”>“新建”。

2、在“新建文档”对话框的“常规”选项卡上，从“类别”列表中选择“基本页”，从“基本页”列表中选择“HTML”，然后单击“创建”。

3、选择“文件”>“另存为”。

4、在“另存为”对话框中，浏览至定义为站点的本地根文件夹的my site 文件夹并打开该文件夹。

5、在“文件名”文本框中输入index.html，然后单击“保存”。文件名即出现在应用程序窗口顶部的标题栏中。

6、在新文档顶部的“文档标题”文本框中，键入Cafe Townsend。这就是页面的标题。站点访问者在Web 浏览器中查看页面时将在浏览器窗口的标题栏中看到此标题。

7、选择“文件”>“保存”来保存该页面。

保存前：保存后：

二、插入表格：

接下来，您将添加一个表格，用于放置文本、图形和Macromedia Flash 资源。

1、在页面上单击一次，在页面左上角放置插入点。

2、选择“插入”>“表格”。

3、在“插入表格”对话框中，执行下面的操作：

a. 在“行数”文本框中，输入3。

在“列数”文本框中，输入1。

在“表格宽度”文本框中，输入700。

在“表格宽度”弹出式菜单中，选择“像素”。

在“边框粗细”文本框中，输入1。

在“单元格边距”文本框中，输入0。

在“单元格间距”文本框中，输入0。

6、单击“确定”。一个三行一列的表格即出现在文档中。该表格的宽度为700 像素，

边框为1px、单元格边距和单元格间距均为0px。

7、单击一次空白处取消对它的选择。

8、选择“插入”>“表格”以插入另一个表格。

注释：后面9-14操作同理可做。

9、在“插入表格”对话框中，对第二个表格执行下面的操作：

a. 在“行数”文本框中，输入1。

在“列数”文本框中，输入3。

在“表格宽度”文本框中，输入700。

在“表格宽度”弹出式菜单中，选择“像素”。

在“边框粗细”文本框中，输入1。