第7章 用表格来布局页面

使用插入Div标签的方法，就可以插入嵌套的Div标签，
DIV+CSS是网站标准（或称“WEB标准”）中 常用术语之一，通常为了说明与HTML网页设计语 言中的表格（table）定位方式的区别，因为 XHTML网站设计标准中，不再使用表格定位技术， 而是采用DIV+CSS的方式实现各种定位。
Div标签本身没有任何表现属性，如果要使Div
绘制嵌套的AP Div
（1）确保在“AP 元素”面板中取消选择了“防 止重叠”。
（2）在“插入”工具栏的“布局”类别中。单击 “绘制AP Div”按钮
（3）在“文档”窗口的“设计”视图中，鼠标拖 动绘制一个AP Div
（4）在选中“绘制AP Div”按钮 ，在现有AP Div的内部鼠标拖动绘制AP Div，这个AP Div就嵌 入到前面的AP Div中， apDiv2嵌入到apDiv1中
置在网页文档中的任何一个位置，都可以随意移动，而且还可以与动作
行为制作出动画效果。
1.插入AP Div
AP Div可以使用菜单中的命令插入，也可以选择 插入栏中相应的按钮，通过拖拽鼠标添加AP Div。
（1）在页面的“设计”视图，在“插入”工具栏 的“布局”类别中，单击“绘制AP Div”按钮 ，
2． 使用AP元素面板将现有AP元素嵌套在另一个 AP元素中
单击菜单“窗口”→“AP元素”，打开“AP元素” 面板
在“AP元素”面板中选择一个AP元素，然后按 住Ctrl键将此AP元素拖动到“AP元素”面板中的目 标AP元素。
目标AP元素的名称高亮显示时，松开鼠标按钮
一些 Web 设计人员更喜欢通过 AP 元素来进行设 计，而不是使用表格来创建自己的布局。 Dreamweaver 可以使用 AP 元素来创建自己的布局， 然后将它们转换为表格。例如，如果需要支持 4.0 版 之前的浏览器，可能需要将AP 元素转换为表格。不过， 建议不要将 AP 元素转换为表格，因为这样做会产生带 有大量空白单元格的表格，更不用说急剧增加的代码了。 如果需要一个使用表格的页面布局，最好使用 Dreamweaver 中可用的标准表格布局工具来创建该页 面布局。

blank在没有框架的新窗口中显示链接页_ parent在直接框架集父级中显示链接页_ self在具有焦点的框架中显示链接页_ top在没有框架的窗口中显示链接页
4
7.1.2 DataList控件
DataList控件是Web服务器控件中的一个基本容器控件，用来以自 定义格式显示Web页中任何数据源的数据。如果在定义模板时使 用了按钮等交互控件，则可以在显示数据的同时控制对数据源的 操作功能(如查询、修改、添加、删除)，这样构成了一个能够对数 据源进行交互操作的界面。 该控件没有预先定义好的固有显示外观和布局，只有可用于自定 义显示格式的可编辑模板。所以，使用该控件显示数据时，主要 的工作是设计和编辑模板，以便提供一个灵活有效的显示布局。 当要使用Repeater控件显示数据时，就要先创建定义控件内容布 局的模板，模板用有效的HTML文本和控件的任意组合来描述。 如果未定义模板或模板中无要显示的数据元素，则在页面运行时， 此控件不显示在页上。 与Repeater控件不同的是DataList控件提供了7种可编辑模板。 在7种模板中必不可少的是ItemTemplate模板，此模板用来显示数 据，也称为数据项模板，所以控制数据显示就是编辑此模板。
2
第7章 图书信息浏览模块设计
(1) 掌握数据显示控件DataList的应用 (2) 了解数据显示控件Repeater的应用 (1) 利用DataList控件实现一条记录分多行显示 (2) 利用Repeater控件实现一条记录分多行显示
教 学 导 航
章 章
(1) 培养学生的自主学习能力和知识应用能力 (2) 培养学生勤于思考、认真做事的良好作风 (3) 培养学生理论联系实际的工作作风 利用DataList控件和Repeater控件实现一条记录分多行显示 DataList控件和Repeater控件模板的定义 理论实践一体化，教、学、做合一 4课时(含课堂实践) 项目1：设计图书信息浏览模块 任务1：设计图书信息浏览页面 新建项目ch7→添加项目ch6中的现有文件datagridbookinfo.aspx→添加一个新的Web窗体datalistbookdetails.aspx→在Web窗体 datalistbookdetails.aspx中添加所需控件→设置控件属性→编写程序代码、实现功能 (1) Page对象、Request对象 (2) 的主要对象：SqlConnection、SqlCommand、SqlDataAdapter、DataSet等 Label控件、DataList控件、HyperLink控件和表格

第 7章建立框架网页教学目标：1．能够理解框架的作用2．能够合理使用框架划分窗口布局3．能够明白框架和框架集的关系4．能在框架中创建编辑网页5．能在框架中打开已有的网页进行编辑6．能够正确保存框架和框架集7．能够理解和编辑框架的属性教学重点：绘制布局表格、绘制布局单元格、设置布局表格和布局单元格的属性教学难点：绘制嵌套布局表格教学课时：理论：2课时实训：4课时教学方法：讲授法、任务驱动法。

教学过程:一、导入新课网页布局技术还有一种，叫做框架。

然而框架本质上是一种浏览器窗口的分割技术。

而前面我们学习的表格和层的布局方式则属于页面分割技术，只是对一个网页的页面做了的划分，在页面不同的位置放置不同的内容，但这些内容仍在同一个页面上。

利用框架，我们可以把浏览器窗口分成几个部分，每一部分都相当于浏览器窗口的一个子窗口，都可以用来显示一个完整的网页，从而可以实现多个页面在浏览器中的同时显示，所以说框架应该算作是一种“窗口”的布局技术。

按照布局要求，把浏览器窗口分成若干子窗口，并在各个子窗口中显示具有不同内容的网页，这些网页有机的结合在一起，达到一个完整的布局效果。

二、讲授新课（一）、框架和框架集的概念框架是一种窗口分割布局技术，利用框架我们可以把窗口分成规划好的若干子窗口，每一个框架都相当于一个子窗口，我们可以在框架中编辑和显示一个完整的网页。

不同框架中的网页是互不相干，根据我们的整体规划，可以把不同的信息放置在不同框架中页面上，从而实现我们想要的布局效果。

每一个框架都属于某个框架集，我们可以把框架集中的一个框架拆分，来实现更多子窗口的划分，就像我们项目中一样，这其实是通过在框架集中不断的嵌套子框架集来实现的。

（二）、创建框架在创建框架集或使用框架前，通过选择“查看/可视化助理/框架边框”命令，使框架边框在文档窗口的设计视图中可见。

1、使用预制框架集(1)、新建一个HTML文件，在快捷工具栏选择“布局”，单击“框架”按钮，在弹出的下拉菜单中选择“顶部和嵌套的左侧框架”。

网页制作教学设计（经典版）编制人：__________________审核人：__________________审批人：__________________编制单位：__________________编制时间：____年____月____日序言下载提示：该文档是本店铺精心编制而成的，希望大家下载后，能够帮助大家解决实际问题。

文档下载后可定制修改，请根据实际需要进行调整和使用，谢谢!并且，本店铺为大家提供各种类型的经典范文，如工作总结、实习报告、职业规划、职场语录、规章制度、自我介绍、心得体会、教学资料、作文大全、其他范文等等，想了解不同范文格式和写法，敬请关注!Download tips: This document is carefully compiled by this editor. I hope that after you download it, it can help you solve practical problems. The document can be customized and modified after downloading, please adjust and use it according to actual needs, thank you!Moreover, our store provides various types of classic sample essays, such as work summaries, internship reports, career plans, workplace quotes, rules and regulations, self introductions, insights, teaching materials, complete essays, and other sample essays. If you want to learn about different sample formats and writing methods, please pay attention!网页制作教学设计网页制作教学设计（通用5篇）作为一名老师，时常要开展教学设计的准备工作，教学设计是实现教学目标的计划性和决策性活动。