Dreamweaver 主页设计和创建分步教程

1. 网站设计思路

在开始任何网站之前，通常需要在Firworks 或Photoshop 等图像设计软件中创建基本的页面设计。图4-1-1是一个基本的Photoshop页面布局图。

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

图4-1-1中，红色方圈标记的部分①为网站左侧栏目，目前为空。将在后续章节中一一补充。序号②中的红色方块是网站导航栏，它是根据第3章建立的dkblog.mdb数据库中的LM表动态生成的。一旦基本思路清晰，就开始构建网站模板。

2。创建网站模板

设计思路：创建网站模板，统一网站的网页设计。网站栏目菜单的内容是由数据表的动态LM生成的，这也允许改变网站栏目菜单的内容。

(1) 打开【文件】→【新建】，打开【新建文档】对话框，选择“类别：”为“页面模板”，选择“页面模板：”为“ASP.NET VB 模板”，结果如图4-1-2所示。

图4-1-2 新建模板对话框

(2) 单击“创建”按钮，插入图层，在属性窗口中将ID 设置为“main”，并将“Left(L)”改为“Left(L)” ”和“顶部 (T)”设置为 0px，“宽度 (W)”设置为 100%，对齐方式设置为居中。这是网站的中心。

(3)插入表格，设置ID为“bodyT”，宽度设置为780px（这是根据你的基本页面设计的宽度设计的），设置边距和单元格间距为0，设置边框厚度设置为0。

(4) 将“bodyT”表格的第二行垂直对齐到顶部，然后将其拆分为2 列。将第一列的宽度设置为220px，并将第一列的宽度设置为560px（分隔列。宽度也是根据您的基本页面设计来分配的），并将第一列的背景颜色设置为RGB（236,236,236）。

(5) 在“bodyT”表格的第一行和第三行插入合适的背景图片，将第一行的垂直对齐设置为底部，水平对齐设置为右对齐。

(6) 如果需要，您还可以设计标题、字体大小、链接字体颜色或配色方案。

(7) 创建网站导航栏。

①启动Access2003，打开dkblog.mdb数据库，将图形设计、3D设计、网页设计、网络编程四条记录依次输入到LM表的LM字段中，如图4- 1-3.

图 4-1-3 将数据输入 LM 表

② 返回 Dreamweaver，切换到[服务器行为]面板，单击“+”按钮，从下拉菜单中选择“数据集” ，如图4-1 -4所示。

图4-1-4 添加数据集

③在弹出的【数据集】对话框中输入数据集名称“menuda”，在底部链接下拉窗口中选择“dkconn”菜单，然后从表下拉菜单中选择“dkconn”。选择 LM 表，选择“全部”列选项，从排序下拉列表中选择“LMID”字段，并将排序设置为升序。结果如图 4-1-5 所示：

图 4-1-5 数据集对话框

④单击“测试”按钮，将显示如图 4-1-6 所示的对话框，这意味着数据集已经创建成功。单击“确定”按钮完成。

图 4-1-6 测试数据集对话框

切换到【绑定】选项卡，展开数据集字段（菜单），如图 4-1-7 所示：

图 4- 1- 7 绑定选项卡

⑥ 将 LM 字段拖至表体第一行，如图 4-1-8 所示：

图 4-1-8 拖动 LM 字段

⑦ 松开鼠标，带阴影的字符将添加到第一行：{menuda.LM}。输入“主页|”前面是“|联系我们”符号。结果如图4-1-9所示。如图：

图 4-1-9 连接数据到 bodyT 表

⑧ 选择阴影字符 {menuda.LM} 和下一个字符“|”，选择菜单【插入】→【应用对象】→【重复区域]，在出现的【重复区域】对话框中选择数据集为“菜单”，选择显示的记录为“所有记录”如图4。-1-10、点击“确定”按钮完成导航根据网站的菜单。

图 4-1-10 重复区域对话框

(7) 将鼠标移至表格主体第二行第二列，选择【插入】菜单→【主题】→【编辑区域】，在在【新建编辑区域】窗口的对话框中输入名称“主体”，按“确定”键，如图4-1-11所示：

图4-1-11 新建编辑区域

这样就完成了初始站点模板工作，并将模板保存为 bkblog.dwt.aspx。

3。首页设计

设计理念：完成网站模板的构建后，使用它来构建和更新您的网站。

(1)新建一个“ASP.NET VB”动态页面，打开【编辑】菜单→【模板】→【将模板应用到页面】，在【选择模板】弹出的窗口中选择“dkblog”模板弹出对话框，点击“选择”按钮，如图 4-1-12 所示：

图 4-1-12 选择模板

（2）将鼠标移至“主体”编辑区，插入一个表并设置其 ID“crush”。实际上设计如图4-1-13所示。这是任何学习笔记都会展示的内容。

图 4-1-13 每个学习笔记中将显示的内容

4. 插入数据集

本节中介绍的插入数据集并不像上一节那么简单。首先看图4-1-13。每个学习笔记都会显示主题、发表时间、笔记类别（即所属子栏目）、作者（姓名）和回复（数量）。接下来看ZT表的设计图（3.2节图3-2-2），只有LMID（分类列ID），没有列名，可以通过连接LM表获取；只有一个 YHID（出版商 ID），没有可关联的作者姓名。只能从YH表中获取；其余数据可以从ZT表中获取。 “太复杂了！”其实不用担心，所有问题都可以在Access中解决。

5。创建查询连接数据表

（1）启动Access2003，选择【查询】→在【显示表】弹出窗口中双击【在平面图中创建查询】，如图4-2 -1如图：

图4-2-1添加查询链接表

(2)依次添加LM表、ZT表、YH表。结果如图 4-2-2 所示：

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

（3）设计查询字段如图 4-2-3 所示：

图 4 -2-3 查询字段设计图

(4) 将此查询另存为ZTRE，并完成查询以连接Access 中的数据表。

6.插入数据集

(1)返回Dreamweaver，切换到【服务器行为】面板，点击“+”按钮，添加Ztre数据集，选择表作为刚刚在Access中创建的ZTRE查询，还有其他相关设置如图 4-2-4 所示：

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

(2) 切换到【绑定】选项卡，展开数据集（Ztre），拖拽将ZTNAME字段替换为ztre表中的“学习笔记主题”，拖动ZTTIME字段替换“发布时间”，拖动LM字段替换“类别”，将ZYTEXT字段拖动到空的第二个空间。 ztre 表的行数，其他模型如图 4 -2-5 所示：

图 4-2-5 将数据连接到 ztre 表

(3) 切换到【服务器行为】面板，可以看到已经添加了很多动态文本，双击动态文本（Ztre.ZYTEXT），选择格式为“编码-HTML编码格式”，如图4-2-6所示：

图4-2 -6 设置动态文本格式

(4) 从 1、2、3 三行中选择表格的第一个元素，并使用它们来定义重复区域。设置如图4-2-7所示。

图4-2-7 定义重复区域

这样就完成了插入数据集并将数据绑定到主页的工作。

7。页面显示

（1）选择“首页”，在【服务器行为】面板中点击“+”按钮，选择【数据集分页】→【移至首页】，如图4-3-1如图：

图 4-3-1 数据集分页菜单

（2）在弹出的对话框中选择数据集为 Ztre，按“确定”键，如图 4- 3 -如图 2 所示：

图 4-3-2 移至首页对话框

(3) 选择“上一页”，定义为“移至上一页”，对数据集进行分页；选择“下一页”并将其定义为“移至下一页”以对数据集进行分页；选择“最后”并将其定义为“移至最后一页”以对数据集进行分页。

(4) 将“页码”更改为“当前页码”：在【服务器行为】面板上，单击“+”按钮，选择【显示记录数】→【显示当前页码】。

(5)保存index.aspx，完成首页设计。在Access中对应的ZT表和YH表中输入一些记录，并在IE浏览器中浏览（如果后面的章节没有特殊注释记录，则所有注释都属于“网络编程”栏），如图4- 3-3：

图4-3-3首页浏览图