Dreamweaver基础教程—使用Dreamweaver构建HTML结构 网页制作与网站开发从入门到精通 42 使用 Dreamweaver 构建 HTML 结构 对于初学者来说， 如果不能熟练掌握一种或多种 Web 设计和开发工具， 将会面临众多挑战， 甚至是举步维艰。可以毫不夸张地说，精通一种工具对于所有 Web 开发和设计人员来说都是至 关重要的。 Web 设计和开发的工具众多。 有小巧灵便的 EditPlus （高手的最爱）， 也有功能庞大的 Visual Studio（.NET 开发的必备工具），还有新兴时尚的 Aptana（支持 Web 2.0）...
| 列标题 1 | 列标题 2 |
|---|---|
| 数据 1 | 数据 2 |
页脚区域
整个结构是一个三行单列版式（包括页眉区域、主体区域和页脚区域），页眉区域插入两个 不同级别的标题文本。主体区域又包括两个子模块，在第一个子模块中插入一个列表结构，在 第二个子模块中插入一个数据表格结构。页脚区域插入一个段落文本。如果在无 CSS 技术支持 的情况下显示如图 2 所示（本示例在演示中打开了 CSS 布局背景功能，方法是选择【查看】| 【可视化助理】|【CSS 布局背景】菜单项）。 图 2 构建的 HTML 文档结构 整个示例的操作步骤如下。 第一步，选择【插入】|【布局对象】|【Div 标签】菜单命令，在打开的【插入 Div 标签】 对话框中设置 div 元素的 id 属性值为 wrap，如图 3 所示，定义一个页面包含框。此时编辑窗口 中会显示插入的标签，并显示被选中的“此处显示 id "wrap" 的内容”文本，如图 4 所示。 使用 Dreamweaver 构建 HTML 结构 45 图 3 【插入 Div 标签】对话框 图 4 插入的标签 第二步，继续执行步骤一的操作，插入一个子标签，ID 名为“header” ，插入点为“在选定内 容旁换行” ，设计网页标题区域，如图 5 所示。在使用【Div 标签】对话框插入 div 标签时，读 者应注意插入点的位置，这在复杂网页结构中非常重要。插入点一般包括五种。 l 在选定内容旁换行：把 div标签插入到当前标签内。 l 在标签之前：把 div标签插入到当前标签前面。 l 在开始标签之后：把 div标签插入到当前标签内，且紧邻该标签的开始标记后。例如， 对于绝对定位元素
段落文本
段落文本
代码内容
| 列 1 | 列 2 |
|---|---|
| 数据 1 | 数据 2 |
版权信息
排版文档源代码的格式方法：在【代码】视图的左侧【编码】工具栏中单击【格式化源代 码】按钮（ ），然后在弹出的下拉菜单中选择【应用源格式】选项，如图 26 所示，即可把预 定义的缩排格式应用到当前文档中。排版后的文档源代码如下所示： 图 26 【应用源格式】选项段落文本
段落文本
代码内容
| 列 1 | 列 2 |
|---|---|
| 数据 1 | 数据 2 |
版权信息
通过比较，你可以很直观地看到经过格式化排版的源代码的结构层次更为清晰、明了。这 时如果再在文档中编辑结构或插入代码就方便了很多。Dreamweaver 在缩排源代码时，将根据 元素的显示性质进行排版。 l 如果是块状元素、列表元素和数据表元素，则每个元素将占据一行。例如：
段落文本
段落文本
段落文本
段落文本
浙公网安备 33021202002483