通过Dreamweaver CS3学习HTML+DIV+CSS 第17章 模板制作与应用

第9章使用AP Div布局页面一、填空题1、通过设置AP Div的（）属性可以使多个AP Div发生堆叠，也就是多重叠加的效果。

正确答案：z轴2、如果要选定多个AP Div，只要按住（）键不放，在【AP元素】面板中逐个单击AP Div的名称即可。

正确答案：Shift3、在【CSS规则定义】对话框的【定位】分类中，将【类型】选项设置为“（）”，即表示AP Div，否则即为Div标签，这是AP Div与Div标签转换的关键因素。

正确答案：绝对4、可以按住（）键，在【AP元素】面板中将某一个AP Div拖曳到另一个AP Div上面，形成嵌套AP Div。

正确答案：Ctrl二、选择题1、下面关于创建AP Div的说法错误的有（）。

A、选择菜单栏中的【插入记录】／【布局对象】／【AP Div】命令B、将【插入】／【布局】面板上的（绘制AP Div）按钮拖曳到文档窗口C、在【插入】／【布局】面板中单击（绘制AP Div）按钮，然后在文档窗口中按住鼠标左键并拖曳D、在【插入】／【布局】面板中单击（绘制AP Div）按钮，然后按住Shift键不放，按住鼠标左键并拖曳正确答案：D2、关于【AP元素】面板的说法错误的有（）。

A、双击AP Div的名称，可以对AP Div进行重命名B、单击AP Div后面的数字可以修改AP Div的z轴顺序C、勾选【防止重叠】复选框可以禁止AP Div重叠D、在AP Div的名称前面有一个眼睛图标，单击眼睛图标可锁定AP Div正确答案：D3、关于选定AP Div的说法错误的有（）。

A、单击文档中的图标来选定层B、将光标置于AP Div内，然后在文档窗口底边标签条中选择“<div>”标签C、单击AP Div的边框线D、如果要选定两个以上的AP Div，只要按住Alt键，然后逐个单击AP Div手柄或在【AP元素】面板中逐个单击AP Div的名称即可正确答案：D4、关于移动AP Div的说法错误的有（）。

Dreamweaver CS3_0单选题1:下面HTML标签中标识表格单元的是( 2 分)A:〈table〉〈/table〉B:〈tr〉〈/tr〉C:〈td〉〈/td〉D:〈p〉〈/p〉2:下面代码使用了JavaScript语言实现显示当前时间，请选择正确的选项中的内容补充到代码中下划线部分，使这段代码完善并可用？〈input type="button" name="button" value="显示当前时间"onclick="var currentTime = new Date();var strDate = currentTime.getYear() + '年';strDate += currentTime.getMonth() + '月';strDate += currentTime.getDate() + '日';strDate += currentTime.getHours() + '时';strDate += currentTime.getMinutes() + '分';var second = currentTime.getSeconds();{strDate += '0' + currentTime.getSeconds()+ '秒';}else{strDate += currentTime.getSeconds() + '秒';}alert(strDate);"/〉( 2 分)A:while(second〈10)B:if(second〈10)C:for(second〈10)D:else(second〈10)3:标准栏工具箱中以下这些图标那种说法是正确的？( 2 分)A:单击“新建”图标可新建一个文档，单击“保存”图标可将当前的文档进行保存；单击“另存为”图标，除原文档保存外，还可另存一个文档。

学习情境6
利用AP Div布局网页
案例01 – 利用AP Div布局网页 版面
课程引导 学习目标
知识讲解
案例操作过程
课堂实践 教学总结
相关知识点
布置习题
学习情境6
利用AP Div布局网页
相关知识点 “插入记录>布局对象>AP Div ①创建普通AP Div “布局”插入栏>”绘制AP Div” 绘制多个AP Div
课程引导 学习目标
知识讲解
课堂实践 教学总结 布置习题
学习情境6
利用AP Div布局网页
相关知识点 ②选择AP Div 标签选择器选择 面板选择 快捷键选择 选择多个AP Div
课程引导 学习目标
知识讲解
课堂实践 教学总结 布置习题
学习情境6
利用AP Div布局网页
相关知识点 ③标记与属性
网页设计与制作
——学习情境6：利用AP Div布局网页
主讲教师：谭荣华
学习情境6
课程引导 学习目标
知识讲解
课堂实践 教学总结 布置习题
会一点word操作的人员，就差不多 就把网站源码很轻松的改成了 说，Table不容易变形。嗯……我是 div+css 可以使用 DIV+CSS 布局的，可是今天看的这个 frontpage 网页布局优势与劣势 设计网页了，如 指在各种开发工具里面，但是想要 网站表格布局的很复杂，下拉菜单 果专业一点可以使用 Dreamweaver 改版就有些麻烦，例如说一个板块 利用AP Div 布局网页 用表格布局 对网页进行编辑。 1、要做 +javascript, DIV+CSS的网页设计师 我看了一天 希望跟另一个板块换位置，同时想 没整明白，但是我看 必须要会手写 2、网页设计速度快，如果你 HTML语言的能力， AP （Absolute positioning ），绝 做精细一些的边框也稍显复杂。 div+css+javascript 要编辑的网页不是很多的话，使用 所以对设计师来说相对要求高一点。 实现下拉菜单的 对定位的意思。 CSS+DIV貌似现在比较主流， 代码就很轻松的看懂。 表格排版速度快 2、同时得会手写 CSS语言的能 AP Div 与时间轴是Dreamweaver 中 各大网站多是这样布局。效果比 两种比较重要的功能。其中， AP 力。3 我问老板说用表格做还是 、可视化操作强，所有网页 Table 布局更为精致。 Div相当于一个容器，可以包含所 div+css, 在网页编辑软件中编辑，可以视化 3、可视化操作性不强，在很 表格是不是已经被淘汰了？ 概述 有在这种布局自然是不差，但要求 HTML文件中出现的元素，如 老板说 操作，直观，你所看到的内容，和 多可视化操作软件中看不出效果。 div+css虽然好，可是在不同 文本、图像和 等，可以随意将 页面设计者对Flash CSS了解比较透彻。 的浏览器中显示结果不同，所以他 在浏览器中显示的内容基本上是一 4、网页表现与结构分离，对 AP Div 拖到页面的任意位置，从而 如果没有详细的说明文档，又 简单又精确地定位页面对象。而使 还是习惯用表格做， 样的。 CSS 修改可以对网页文件布局修改， div+css他不是 不是开发者本人的话，重用就有些 用时间轴可以在网页中创建动画， 很熟悉。 如果有多个网页相同布局的话，可 4、在网页设计时是可重复性 它是以帧为最基本的概念来运作的 头痛了 ，有时候会出一些莫名其 操作不强，如一个网页的布局和另 以调用同一个 我该怎么办呢？继续向更高处 CSS文件实现布局功 妙的问题 。(好吧，我承认我经常 钻研div+css，自创一路（因为我估 一个如果页面相同的布局的话，得 能。 “移植”各大网站的布局) 计公司库里的网站全都是表格布局 重新设计一个。 5、网页打开速度快，因为它 我个人建议是： 的）5 可以先打开内容，再调用 还是懒点？做网站时候套用 、网页如果要修改的话、可 CSS文件。

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

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

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

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

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

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

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

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

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

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

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