dreamweaver制作网页详细步骤(设计网站首页)

一、网站设计概览

在启动设计之旅前，我们首先在Photoshop中绘制了基本页面设计图（图4-1-1）。这张设计图是Doking’s BLOG的蓝图，清晰标注了每一个区域的功能和位置。

图4-1-1 Doking’s BLOG基本页面设计图

在这张设计图中，我们标注了序号①为网页左侧的栏目区域，这一区域将在后续的章节中逐渐填充内容。而序号②则是网站的导航条，它由第三章建立的dkblog.mdb数据库中的LM表动态生成。明确了这些基本思路后，我们开始构建网站的模板。

二、构建网站模板

我们的设计思路是构建一个统一的网站模板，以便于管理和修改。由于网站的栏目菜单内容由数据表LM动态生成，这也方便了内容的修改。具体步骤如下：

1. 在Dreamweaver中新建一个ASP.NET VB模板文档（图4-1-2）。

4. 我们还进一步设计了标题、字体大小、颜色等（图4-1-7至图4-1-9）。这些设计元素使得网站更加生动和吸引人。

经过上述步骤，我们完成了网站模板的初步构建，并将其保存为bkblog.dwt.aspx。

三、首页的页面设计

创建“ASP.NET VB”动态页面

在编辑菜单中，我们选择“模板”选项，进一步点击“应用模板到页”。在随后出现的“选择模板”对话框中，我们选择了“dkblog”模板，并单击了“选择”按钮，如图4-1-12所示。

图4-1-12：选择模板界面

启动Access2003，我们选择了“查询”，并在设计视图中创建查询。在显示表窗口中，我们按次序添加了LM表、ZT表和YH表，结果如图4-2-2所示。

图4-2-2：数据表连接视图

接下来是查询字段的设计，我们根据需求设计了查询字段，如图4-2-3所示。完成后，我们保存这个查询为ZTRE，完成了在Access中的数据表连接查询。

回到Dreamweaver，我们在服务器行为面板中添加了数据集Ztre，选择了在Access中新建的查询ZTRE。然后，我们绑定了数据到ztre表中，拖拽字段到对应的位置，如图4-2-4和4-2-5所示。

图4-2-4：Ztre数据集的设置

图4-2-5：数据绑定到ztre表中

保存了index.aspx文件后，我们完成了首页的设计。在Access中随意输入几条记录到相应的ZT表和YH表中，然后在IE浏览器中进行浏览。首页的浏览效果大概如图4-3-3所示。

图4-3-3：首页浏览效果展示

整个设计过程虽然复杂，但按照步骤操作，你也可以轻松完成一个动态网页的设计。现在，你可以通过浏览器查看你的成果，享受自己创作的乐趣。