第4章 AP Div、框架与网页布局

合集下载

模块6-利用APDiv布局网页4-精品文档

学习情境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文件。

第4章APDiv、框架与网页布局

② 按键调整的方法：按住【Ctrl】键，同时按【→】或【←】键，可使 AP Div 水平增加或减少一个像素；每按【↓】或【↑】键一次，可使 AP Div 垂直增加或减少一个像素；按住【Ctrl+Shift】组合键的同时，按光标移动键，可每次增加或减少五个像素。
③ 利用 AP Div“属性”栏设置：在其“属性”栏内的“宽”和“高”文本框内分别输入修改的数值（单位是像素），即可调整 AP Div 的宽度和高度。
见，即根据图像大小自动调整 AP Div 的大小，使内容全部显示，为系统默认）、“hidden”（当图像超出 AP Div 的范围后，超出的部分不显示）、“Scroll”（当图像超出 AP Div 的范围后，加滚动条）和“Auto”（根据 AP Div 中的内容能否超出 AP Div 的范围，决定是否加滚动条）四个选项。选择前三个不同选项后，在浏览器中的显示效果如图 4-1-11 所示。注意：在网页页面设计视图窗口内显示的都与图 4-1-11（a）一样。
所示。单击其中的一个命令，即可获得相应的对齐效果。例如，选中多个 AP Div，单击“修改”→“排列顺序”→“对齐下缘”命令，即可将各 AP Div 以最后选中
的 AP Div（控制柄是实心）的下边线为基准进行对齐，如图 4-1-8 所示。
图 4-1-7 “排列顺序”的下一级菜单
图 4-1-8 对齐下缘后的多个 AP Div
（6）调整 AP Div 的位置可以采用如下方法：
① 鼠标拖动调整的方法：将鼠标指针移到 AP Div 的边框上，当鼠标指针变为形状时拖动，即可移动 AP Div。
Байду номын сангаас
② 按键调整的方法：每按一次【→】或【←】键，可使 AP Div 向右或向左移动一个像素；每按一次【↓】或【↑】键，可使 AP Div 向下或向上移动一个像素；如果按住【Shift】键的同时，按光标移动键，也可调整 AP Div 的位置，每次移动五个像素。

6_APDiv布局网页CSS美化网页

问：每次对网页进行布局时，都会花费很多的时间进行构思，有没有什么能提高对页面整体布局的分析能力？
攀枝花学院
工业设计专业
网站设计-Dreamweaver Flash Access VBscript、
a
知识关联：使用CSS美化网页
除了通过Div+CSS来进行网页的布局外，还可通过CSS规则对创建的Div标签进行设置，美化其内容；也可导入外部的CSS文件，以套用到网页中，对网页的背景、字体、布局等进行优化，增加网页的观赏性。使用CSS美化网页的方法较为复杂，将在后面的章节中进行详细讲解。
5.1.3.1 单个AP Div的属性设置选择要设置属性的单个AP Div，在“属性” 面板中进行设置即可。
攀枝花学院
工业设计专业
网站设计-Dreamweaver Flash Access VBscript、
5.1.3.2 多个AP Div的属性设置如果多个AP Div具有相同的属性需要设置，则可同时选择这些AP Div，然后再在“属性” 面板中进行设置。
选择需改变堆叠顺序的AP Div后，在“属性” 面板中的“Z轴”文本框中输入所需的数值，大于原数字可将该AP Div在堆叠顺序中上移，小于原数字可将该AP Div在堆叠顺序中下移，完成输入后按Enter键确认即可。
攀枝花学院
工业设计专业
网站设计-Dreamweaver Flash Access VBscript、
网站设计-Dreamweaver Flash Access VBscript、
5.1.2.4 对齐AP Div 在网页制作过程中常需要将AP Div进行对齐。 AP Div的对齐方式有左对齐、右对齐、上对齐和对齐下缘。在进行对齐的过程中， Dreamweaver CS6会默认以最后选择的AP Div 为标准进行对齐。

5-用AP-Div作页面布局PPT课件

适合使用Div及对应的ID CSS规则，当然也不排除对Div使用类CSS规则。
7
.(第二版)
2. Div 与 AP Div
AP Div在设计视图内可以被随意拖动以及手工调整大小 Div在设计视图内不能拖动，也不能手工调整大小。通过修改Div的CSS属性position的值(absolute或relative)，使
body的边距就决定了页面本身的边界。
留白指箱框的边框与其内容之间的透明区域，包括上、下、左、右留白。亦可设置四个不同值。留白的默认值等于0。
箱框的边框（或边界）位于箱框的边距区与留白
区之间，包括上、下、左、右边框，定义了箱框
的界线。边框默认是透明的，你可以分别设定每
个边框的宽度、颜色以及样式。
实时查看页面元素的边距、留白
单击工具栏上的“检查”按钮，之后在设计视图内移动鼠标。
标题的上下边距默认非0；段落的上下边距默认非0；列表的上下边距默认非0；列表的左留白默认非0； body的四个边距默认非0；超链接的四边距默认为0。
40
.(第二版)
10.为页面元素添加边框
在“CSS样式”面板内双击“#main”规则
41
.(第二版)
11. 当内容超出AP Div大小时的处理
方法一：手工调整Div的高度。方法二：把“溢出”属性设置为“auto”以
增加Div的滚动条。
42
.(第二版)
AP Div的“Z轴”属性值
同一范围内AP Div的前后位置由其“Z轴”属性值决定。具有较大“Z轴”值的Div将位于较小“Z轴”值的Div前面。
第二版apdiv与div的主要区别1绝对定位的元素脱离了html内容的正常秩序它不考虑周围的元素如周围的文本相邻的div它总是准确地出现在为它指定的坐标上

第四章网页布局

2、嵌套AP元素嵌套AP AP元素
嵌套AP元素是包含在其它AP元素中的AP 嵌套AP元素是包含在其它AP元素中的AP元素 AP元素是包含在其它AP元素中的AP元素注意：注意： AP元素的嵌套子AP元素可以超过父AP元素或完全在元素的嵌套子AP元素可以超过父AP AP元素的嵌套子AP元素可以超过父AP元素或完全在子AP元素可浮动于文本编辑窗口的任何位置， AP元素之外父AP元素之外子AP元素的大小也可以大于父AP元素。 AP元素的某些属性变化则子AP 元素的某些属性变化， AP元素也相应变化父AP元素的某些属性变化，则子AP元素也相应变化
嵌套表格（表格布局重点）嵌套表格（表格布局重点）
嵌套表格即在一个单元格中插入一个表格方法: 嵌套表格的宽度受所在单元格的宽度限制）方法:（嵌套表格的宽度受所在单元格的宽度限制）将光标定位页
浏览器在下载完一个完整的表格后才显示表格中的所有内容，中的所有内容，因此应尽可能用多个独立的表格来布局页面（水平方向上是一个，格来布局页面（水平方向上是一个，垂直方向上是多个）上是多个）。作为外层的布局整个页面的表格以像素像素为单位作为外层的布局整个页面的表格以像素为单位 720-778），而里面的表格以%为单位（95），而里面的表格以（720-778），而里面的表格以%为单位（95100）。 100）。外层的布局表格若要设置对齐属性，外层的布局表格若要设置对齐属性，则都设置为统一的。为统一的。说明：说明： IE窗口内能看到的第一屏部分为778px*435px。窗口内能看到的第一屏部分为778px*435px IE窗口内能看到的第一屏部分为778px*435px。
第二节
AP元素和Spry的使用 AP元素和Spry的使用元素和Spry

三级电子商务师理论题库含参考答案

三级电子商务师理论题库含参考答案一、单选题（共60题，每题1分，共60分）1、加密秘钥和解密密钥相同的密码体制是[ ]密码体制。

A、对称B、分组C、序列D、非对称正确答案：A2、[ ]是离线并被严格保护的，负责发布品牌CA。

A、商户CAB、根CAC、支付网关CAD、持卡人CA正确答案：B3、以下不属于网站目录结构不合理造成的结果的是（）。

A、可能无法维护B、无影响C、文件存放会混乱D、可能无法更新正确答案：B4、投标书的[ ]应对招标文件的商务条款、技术条款逐一填写响应。

A、资格文件B、产品配置C、商务和技术偏离表D、格式文件正确答案：C5、如果想不显示表格线条，将边框变成虚线，则应将边框参数设置为（）。

A、1B、0C、2D、3正确答案：B6、[ ]即实时生产系统。

A、JITB、ERPC、SCMD、CRM正确答案：A7、订单转化率是[ ]的比值。

A、有效订单数与订单总数B、有效订单数与总访问次数C、总订单数与总访问次数D、有效订单数与无效订单数正确答案：B8、下列标签中表示网页中文档体的是（）A、<body></body>B、<head></head>C、<html></html>D、<title></title>正确答案：A9、以下不属于常用数据分析工具的是（）。

A、站长工具B、问卷星C、百度指数D、生意参谋正确答案：B10、[ ]指对表现优秀的供应商进行发布，以获取广告效应。

A、订单激励B、商誉激励C、价格激励D、免检激励正确答案：B11、<html>标签表示网页中的（）。

A、文档主体B、文档标题C、文档头开始D、文档开始正确答案：D12、网页HTML标签中h表示（）。

A、标题3B、标题4C、标题2D、标题1正确答案：D13、数字证书是经[ ]数字签名的电子文件。

A、CAB、IEC、VPND、SMTP正确答案：A14、在现代工业社会，要建立内在自我激励机制促进绩效，关键不是职工满意不满意，而是他们的工作责任心。

使用层APDiv搭建页面

项目三布局技术
任务七 AP Div —知识拓展
AP元素与表格的转换 • 将表格转换为AP Div。将表格转换为AP
Div是为了便于网页布局的调整。 • AP元素转换为表格。把AP元素转换为表格
是为了与低版本的浏览器兼容。
项目三布局技术
任务七 AP Div —知识拓展
注意： Dreamweaver CS3不会把重叠的AP 元素转换为表格，要防止AP元素重叠，可在AP元素面板中启用“防止重叠”选项。如果是在建立了重叠AP元素之后才选择了此选项，此时只有通过移动AP元素的方法把重叠的AP元素分开。
在使用“拖动AP元素”行为时，必须确保触发该动作的事件发生在访问者试图拖动AP 元素之前。最佳的方法是使用onLoad事件，将“拖动AP元素”附加到body对象上，操作如下：
1. 插入一个AP元素，单击窗口状态栏左下角的 <body>标记，在行为面板中单击按钮添加行为，从弹出列表中选择“拖动AP元素”命令，弹出拖动AP元素对话框。
任务七 AP Div —问题探究
在Dreamweaver CS3以下版本AP Div被称为层。 AP Div又称绝对定位元素（AP元素），是分配有绝对位置的，用来精确控制浏览器窗口对象位置的HTML 页面构成元素。AP Div可以通过层的重叠和次序的改变，实现一组包含着文字或图像等元素的胶片变换效果；可以通过动态设定层的显示或隐藏，实现层内容的动态交替等特殊显示效果；通过层子层遗传父层的嵌套特征，实现内容的可见及位置移动等。AP Div的出现使网页技术从二维空间拓展到三维空间，使页面元素能实现相互重叠，及更复杂的布局设计，成为网页设计新的发展方向。
工作任务
层是网页制作时经常用到的对象，也是重要的网页布局工具之一。由于层在页面布局方面具有更大的随意性，通过拖动、方向键或指定坐标位置的方式就可以放到网页的任何位置，不受网页中其他元素的限制和干扰，就像浮在页面上方一样。运用层的此特性创建布局更加合理、美观的网页效果。

第10讲网页的布局元素：Ap DIV

二编辑apdiv元素2apdiv元素的移动选中后apdiv元素直接拖动apdiv元素的选择柄选中apdiv元素利用属性面板进行设置编号显示元素在网页中距离左上角的距离设置元素的大小显示元素的层次关系值越高就在越上一层3apdiv元素的属性设置二编辑apdiv元素批量设置多个apdiv元素具有相同的大小方法1

调整二级菜单的位置使其和一级菜单有所重叠
为二级菜单添加显示/隐藏的行为完成所有内容添加后，再设置父层居中对齐
本讲实践任务5：要求：利用AP DIV元素布局网页，要求网页能随分辨率
的变化居中显示，具有下拉菜单
知识点：AP DIV的嵌套和居中、显示-隐藏行为提交时间：本次课
**
AP DIV元素的删除
**
• 选中需删除的AP DIV • 采用如下操作之一按【Delete】键选择菜单：“编辑/清除”命令
二、编辑AP DIV元素 1、AP DIV元素的选取 • 选取一个AP DIV元素在文档编辑区中单击AP DIV元素边框或单击AP DIV元素的选择柄。 • 选取多个AP DIV元素按住【Shift】键，在需要选择的多个AP DIV元素中单击。 2、AP DIV元素的移动选中后AP DIV元素直接拖动AP DIV元素的选择柄
素代码的内部。
嵌套在内的为子层，嵌套层外部的层称为父层。

AP层对象元素的嵌套方法
第一步：将光标定位在要插入嵌套AP元素的父层内。
第二步：拖动布局选项卡中的“绘制AP Div”到AP父层内。
三、AP DIV元素的嵌套嵌套的重要特点子层可浮动于文本编辑窗口的任何位置子层的大小可大于父层
在下中输入：高-要剪辑的像素值
3、AP DIV元素的属性设置设定 AP 元素水平居中

第7讲使用APdiv和框架

AP Div名称左边为状态时，表示AP Div为不可见，这时【属性】面板中的【可见性】选项为“hidden”（隐藏)。
AP Div名称左边没有或时，表示可见性为默认，这时【属性】面板中的【可见性】选项为“default”（默认）。
若需同时改变所有AP Div的可见性，则单击【AP元素】面板中图标列最顶端的图标，原来所有的AP Div均变为可见或不可见。
7.2.1 功能讲解 7.2.2 范例解析——插入和设置框架 7.2.3 课堂实训——使用框架布局“技术论坛”网页
7.3 综合案例──使用框架布局“网络管理系统”网页
教学目标
掌握创建和编辑AP Div的方法。掌握设置AP Div属性的方法。掌握创建、编辑和保存框架的方法。掌握设置框架和框架集属性的方法。掌握创建嵌入式框架的方法。
网页
返回目录
7.2.1 功能讲解
框架也是网页布局的工具之一，它能够将网页分割成几个独立的区域，每个区域显示独立的内容。框架的边框还可以隐藏，从而使其看起来与普通网页没有任何不同。具体内容如下。
在【AP元素】面板中选中一个AP Div，按住 Ctrl键，将其拖曳到另一个AP Div上面，形成嵌套AP Div。
AP Div的嵌套和重叠不一样。嵌套的AP Div 与父AP Div是有一定关系的，而重叠的AP Div除视觉上会有一些联系外，其他根本没有什么关系。
返回目录
五、编辑AP Div
想一次绘制多个AP Div，在单击
按钮后，
按住Ctrl键不放，连续进行绘制即可。
返回目录
三、AP Div属性
插入AP Div以后，在【属性】面板中可以查看和编辑AP Div的属性，如图所示。

电子商务师三级习题+答案

电子商务师三级习题+答案一、单选题（共50题，每题1分，共50分）1、SQL数据[ ]语言用于操纵数据库中的各种对象，检索和修改数据。

A、定义B、查询C、操纵D、控制正确答案：C2、[ ]比较适合发布能够引起讨论的商务信息。

A、新闻组B、SNSC、WIKID、第三方电子商务交易平台正确答案：A3、浏览网页时，鼠标移到文字上方时，指针会变成手型，点击鼠标，会打开一个网页，说明该文字带有( )。

A、超链接B、图片C、DivD、表格正确答案：A4、以下属于网页中的动态效果的是( )。

A、视频B、文字C、表格D、图片正确答案：A5、[ ]是指数据库减少了大量重复数据。

A、数据库减少冗余B、数据库集中控制C、数据库数据共享D、数据库数据独立正确答案：A6、以下不属于电子商务物流外包的订单处理中订单确认内容的是( )A、确认货物B、确定客户信用C、确定订单形态D、设定订单号码正确答案：D7、选择供应商的基本准则是[ ]原则。

A、QCDSB、QODC、QCDD、QODS正确答案：A8、消费者因为自身原因临时不便做出购买决定，应[ ]。

A、网站设计引起消费者兴趣B、通过线下营销提高网站信任度C、提供多种支付方式D、设计一个完善的与消费者进行交互的系统正确答案：D9、关于道德评价，正确的说法是( )A、每个人都能对他人进行道德评价，但不能做自我道德评价B、道德评价是一种纯粹的主观判断，没有客观依据和标准C、领导的道德评价具有权威性D、对一种行为进行道德评价，关键看其是否符合社会道德规范正确答案：D10、投标[ ]中应对招标文件的技术条款逐一填写响应。

A、格式文件B、资格文件C、技术偏离表D、价格文件正确答案：C11、以下对表格操作描述错误的是( )。

A、表格一旦建好则无法再增减。

B、表格可以增减C、表格可以合并D、表格可以拆分正确答案：A12、面向国际的招标书，应写明招标[ ]。

A、范围B、地点C、单位D、方式正确答案：A13、以下关于框架的描述错误的是( )。

4-1 用表格定位页面元素

1 网页布局技术概述 p5页网页布局技术概述-- 页
• 所谓的网页布局，就是对网页上的网站Logo、导所谓的网页布局，就是对网页上的网站Logo、 Logo 航栏、网站内容等元素的位置进行排版。航栏、网站内容等元素的位置进行排版。 • 对网页元素的布局排版，决定了网页的美观与否对网页元素的布局排版，和实用性。在一定程度上决定了网页设计的成败。和实用性。在一定程度上决定了网页设计的成败。
（5）内容版块）
内容版块是页面的主题，内容版块是页面的主题，可以根据内容多少划分成若干个栏目，划分成若干个栏目，合理分布。
（6）页脚）
页脚是处于网页最下面的组成部分，页脚是处于网页最下面的组成部分，与页眉首尾相呼应。主要作用是放置站点的简介、首尾相呼应。主要作用是放置站点的简介、版权信息、信息、网站备案信息和联系方式等。
用表格定位页面元素
表格是一个容器元素，表格是一个容器元素，表格布局技术的实质是把页面区域划分为若干个单元格，通过单元格来控制各种页面元素（文本、图像等)在页面上的定位和排各种页面元素（文本、图像等在页面上的定位和排版。采用表格进行页面布局，方法简洁明了、浏览器采用表格进行页面布局，方法简洁明了、兼容性高，结合在一起，兼容性高，与css结合在一起，能够满足绝大多数网结合在一起页设计需求。页设计需求。
（2）网站标志 logo
logo是代表网站形象或栏目内容的标志性图片，是是代表网站形象或栏目内容的标志性图片，是代表网站形象或栏目内容的标志性图片站点特色和内涵的集中体现。一般在网页的左上角。站点特色和内涵的集中体现。一般在网页的左上角。 Logo的设计要求形象鲜明、笔触简练，给人第一的设计要求形象鲜明、的设计要求形象鲜明笔触简练，印象即很深刻。印象即很深刻。一般可使用公司己有的徽标，可简单做些处理。一般可使用公司己有的徽标，可简单做些处理。最常用和最简单的方式是采用网站中英文名称作标志。常用和最简单的方式是采用网站中英文名称作标志。

网页设计-8 使用AP_div和框架

❖ 在【AP元素】面板中选中一个AP Div，按住 Ctrl键，将其拖曳到另一个AP Div上面，形成嵌套AP Div。
❖ AP Div的嵌套和重叠不一样。嵌套的AP Div 与父AP Div是有一定关系的，而重叠的AP Div除视觉上会有一些联系外，其他根本没有什么关系。
返回目录
五、编辑AP Div
返回目录
（上单击
按钮，然
后将鼠标指针移至文档窗口中，当指针变为形状时，
按住鼠标左键并拖曳，到适合位置释放鼠标左键，
将绘制一个自定义大小的AP Div，如图所示。如果
想一次绘制多个AP Div，在单击
按钮后，
按住Ctrl键不放，连续进行绘制即可。
返回目录
❖ 在【AP元素】面板中可以实现以下功能。
可以对AP Div进行重命名。可以修改AP Div的z轴顺序。可以禁止AP Div重叠。可以显示或隐藏AP Div。可以选定AP Div，如果按住Shift键不放，依次单
击可以选中多个AP Div。按住Ctrl键不放，将某一个AP Div拖动到另一个
返回目录
三、AP Div属性
❖ 插入AP Div以后，在【属性】面板中可以查看和编辑AP Div的属性，如图所示。
返回目录
四、创建嵌套AP Div
❖ AP Div的嵌套就是指在一个AP Div中创建另一个AP Div，且包含另一个AP Div。制作嵌套的AP Div通常有两种方式：一种是在AP Div内部新建嵌套AP Div；另一种是将已经存在的AP Div添加到另外一个AP Div内，从而使其成为嵌套的AP Div。
❖ 将光标置于AP Div内，然后在文档窗口底边的标签条中选择相应的HTML标签，如图所示。

DREAMWEAVERcs6模块6使用AP元素与框架

模块六---使用AP元素和框架
任务二框架使用
子任务1 框架和框架集的工作方式框架的作用就是把浏览器窗口分割成若干个区域，每个区域可以分别显示不同的网页内容。框架最常见用途就是导航，应用框架在制作一些功能性比较强的网页时有很大的优势，例如现在的一些网站的管理后台，都是用框架来制作的，这样操作方便，不用每次单击链接都刷新整个网页。 Dreamweaver可以在一个“文档”窗口中查看和编辑与一组框架关联的所有文档。每一框架会显示一个单独的 HTML 文档。框架创建和框架集创建的过程是同步的，只要创建了框架就创建了框架集，有了框架集就必然存在框架。如果某个页面被分成两个框架，那么它实际是由一个框架集和两个框架而组成的。使用框架的最常见情况就是：一个框架显示包含导航控件的文档，而另一个框架显示包含内容的文档。如果一个站点在浏览器中显示为包含三个框架的单个页面，则它实际上至少由四个 HTML 文档组成：框架集文件以及三个文档，这三个文档包含最初在这些框架内显示的内容。在 Dreamweaver 中设计使用框架集的页面时，必须保存所有这四个文件，该页面才能在浏览器中正常显示。
模块六---使用AP元素和框架
子任务2 框架和框架集的使用
1 .创建框架和框架集可以使用以下操作方法。步骤 1 启动Dreamweaver，将插入点放在文档中并执行下列操作之一：
选择【插入】→【HTML】→【框架】，并选择预定义的框架集；
在“插入”面板的“布局”类别中，单击【框架】按钮上的下拉箭头，然后选择预定义的框架集。框架集图标提供应用于当前文档的每个框架集的可视化表示形式。框架集图标的蓝色区域表示当前文档，而白色区域表示将显示其它文档的框架。
模块六---使用AP元素和框架

网页设计与制作课程标准

《网页设计与制作》课程标准前言：《网页设计与制作》是理实一体化课程，是计算机专业（软件与信息服务、数字媒体、计算机应用专业）的一门重要的专业必修课。

本课程定位于WEB技术开发工作岗位。

它是WEB前端技术开发的必备课程，在整个课程体系中具有重要的作用，一、课程的说明：通过本课程的学习，使学生了解网页设计技术的起源和发展、常用的网页制作软件及HTML语言，掌握运用Dreamweaver（以下简称DW）网页制作软件制作网页的方法，通过运用Photoshop图像处理软件和Flash动画制作软件，三个软件互相配合，完成网页设计与制作任务的方法。

为今后从事网页设计与制作、网站开发和管理奠定基础。

在网页设计的实践中重点培养团队协作、沟通交流能力，培养自主学习能力和探索创新能力。

二、课程内容与基本要求：该课程涉及的知识是网页设计人员必备的基本技能，职业活动与课程内容的对应关系如下：网页设计开发岗位职业能力教学内容（理实一体化课）基本开发工具的使用网页基本概念（第1章）DW CS6软件介绍（第2章）建立与管理站点（第3章）网页基本元素的处理制作主要内容为文本的网页（第4章）插入与编辑图像（第5章）插入多媒体元素（第6章）创建超级链接（第7章）HTML基础（第13章）网页布局表格处理与网页布局（第6章）AP Div的应用（第9章）使用CSS+DIV布局网页（第11章）网页美化CSS样式表（第10章）网页交互行为（第12章）动态网页基础（第15章）网页及元素的复用创建和使用模板（第9章）创建和使用库（第10章）三、教学目标1、职业关键能力目标(1)掌握使用Photoshop进行图像处理的基本方法及操作技能(2)掌握DreamweaverCS5的基本知识及操作技能(3)掌握建立与管理站点的方法(4)掌握制作主要内容为文本的网页的方法(5)掌握在网页中插入与编辑图像的方法(6)掌握在网页中插入多媒体元素的方法(7)掌握表格处理与网页布局的方法(8)掌握创建超级链接的方法(9)掌握使用框架制作旅游网站的方法(10)掌握创建和使用模板的方法(11)掌握创建和使用库的方法(12)掌握在网页中添加AP Div的方法(13)掌握在网页中使用行为的方法(14)掌握HTML基础知识及通过代码修饰网页的方法(15)掌握使用CSS样式表修饰网页的方法(16)掌握动态网页的概念及简单动态网页的制作方法2、职业专门能力目标(1)通过完成相关的项目，掌握网页设计的基本工作流程。

第4章框架、层与网页布局

第 4 章框架、层与网页布局4.1 框架框架就是把一个网页页面分成几个单独的区域（即窗口），每个区域就像一个独立的网页，可以是一个独立的 HTML 文件。

框架可以在一个网页内显示多个 HTML 文件。

对于一个有n个区域的框架网页来说，每个区域有一个 HTML 文件，整个框架结构也是一个 HTML 文件，因此该框架网页是一个 HTML 文件集，它有n+1 个 HTML 文件。

【相关知识】创建框架和框架观察器1．创建框架在网页中创建框架的常用方法可以有以下 3 种。

− 106−− 107−（1）单击“修改”→“框架集”→“×××”菜单命令或单击“插入”→“HTML”→“框架”→“× ××”菜单命令，都可以创建框架。

（2）单击“文件”→“新建”菜单命令，调出“新建文档”对话框。

选择该对话框左边“类别”栏中的“框架集”选项，再选择该对话框右边“框架集”栏内的一种框架选项，然后单击“创建”按钮，即可创建有框架的网页。

（3）单击“插入” （布局）栏内“框架”快捷菜单中的一个菜单命令，如图 4-1-1 所示，即可在页面内显示出相应的框架。

2．框架观察器单击“窗口”→“框架”菜单命令，调出“框架”面板，也叫框架观图411 “框架”快捷菜单察器。

如果光标在框架内，则框架观察器中对应框架内的文字变为黑色，如图 4-1-2 所示。

框架观察器的作用是显示框架网页的框架结构（也叫分栏结构）。

单击某一个分栏框架（选中的框架边框呈黑色），即可选中该分栏框架，同时“属性”栏变为该分栏框架的“属性”栏。

如果单击框架的外框线，则可以选中整个框架（即框架集），如图 4-1-3 所示，同时“属性”栏变为框架集的“属性” 栏。

3．增减框架个数创建框架后，要增加或减少框架的个数，首先应单击框架内部，再单击“查看”→“可视化助理” →“框架边框”菜单命令，使该菜单命令左边有，然后可采用如下方法进行。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

图 4-1-4
创建一个 AP Div
（2）选中 AP Div：在改变 AP Div 的属性前应先选中 AP Div，选中的 AP Div 会在 AP Div 矩形的左上角产生一个双矩形状控制柄图标，同时在 AP Div 矩形的四周产生八个黑色的方形控制柄。选中一个 AP Div 的效果如图 4-1-5 所示。选中 AP Div 的方法有多种，操作方法如下： ① 单击 AP Div 的边框线，即可选中该 AP Div。 ② 单击 AP Div 的内部，会在 AP Div 矩形的左上角产生一个双矩形状控制柄图标，单击该控制柄图标，即可选中与它相应的 AP Div。 ③ 按住【Shift】键，分别单击要选择的各个 AP Div 的内部或边框线，即可选中多个 AP Div。如果选中的是多个 AP Div，则只有一个 AP Div 的方形控制柄是黑色实心的，其他选中的 AP Div 的方形控制柄是空心的，如图 4-1-6 所示。
② 按键调整的方法：每按一次【→】或【←】键，可使 AP Div 向右或向左移动一个像素；每按一次【↓】或【↑】键，可使 AP Div 向下或向上移动一个像素；如果按住【Shift】键的同时，按光标移动键，也可调整 AP Div 的位置，每次移动五个像素。 ③ 利用 AP Div“属性”栏进行设置的方法：选中要调整大小的 AP Div，在其单个 AP Div“属性”栏内的 “左”文本框中输入修改的数值（单位是像素），即可调整 AP Div 的水平位置；在“上”文本框内输入修改的数值（单位是像素），可调整 AP Div 的垂直位置。 3．AP Div“属性”栏 AP Div“属性”栏有两种：一种是单 AP Div“属性”栏，这是在选中一个 AP Div 时出现的；另一个是多 AP Div“属性”栏，这是在选中多个 AP Div 时出现的。单 AP Div“属性”栏如图 4-1-9 所示，多 AP Div“属性”栏如图 4-1-10 所示。从图中可以看出，多 AP Div“属性”栏内除了基本的属性设置选项外，还增加了关于文本属性的设置选项。其中各选项的作用如下：
图 4-1-5
选中一个 AP Div
图 4-1-6
选中多个 AP Div
（3）调整一个 AP Div 大小：改变一个 AP Div 大小的方法有三种，首先要选中该对象。
① 鼠标拖动调整的方法：将鼠标移到 AP Div 的方形控制柄处，当鼠标指针变为双箭头状时拖动鼠标，即可调整 AP Div 的大小。 ② 按键调整的方法：按住【Ctrl】键，同时按【→】或【←】键，可使 AP Div 水平增加或减少一个像素；每按【↓】或【↑】键一次，可使 AP Div 垂直增加或减少一个像素；按住【Ctrl+Shift】组合键的同时，按光标移动键，可每次增加或减少五个像素。 ③ 利用 AP Div“属性”栏设置：在其“属性”栏内的“宽”和“高”文本框内分别输入修改的数值（单位是像素），即可调整 AP Div 的宽度和高度。（4）调整多个 AP Div 大小的方法也有两种： ① 命令方法：单击“修改”→“排列顺序”→“设成宽度相同”命令（见图 4-1-7），即可使选中的 AP Div 与最后选中的 AP Div（它的方形控制柄是黑色实心的）的宽度相同。 ② 利用 AP Div“属性”栏进行设置的方法：选中多个 AP Div 后，其“属性”栏变为多 AP Div“属性”栏。在“宽”和“高”文本框内分别输入修改的数值（单位是像素），即可调整选中的多个 AP Div 的宽度和高度（单位是像素）。（5）设置多个 AP Div 的排列顺序和对齐可采用以下方法： ① 命令的方法：选中多个 AP Div，单击“修改”→“排列顺序”命令，可弹出它的下一级菜单，如图 4-1-7
图 4-1-9
单 AP Div“属性”栏
图 4-1-10
多 AP Div“属性”栏
（1）“CSS-P 元素”下拉列表框：用来输入 AP Div 的名称，它会在“AP 素材”面板中显示出来。该名称可以在脚本中使用，例如通过脚本实现 AP Div 的显示或隐藏等。（2）“左（L）”文本框用来确定 AP Div 在页面中的位置，单位为像素，其内的数据是 AP Div 左边线与页面左边缘的间距。对于嵌套中的子 AP Div，“左（L）”文本框内的数据是相对于父 AP Div 的左边的位置。（3）“上（T）”文本框内的数据是 AP Div 顶边线与页面顶边缘的间距。对于嵌套中的子 AP Div，是相对于父 AP Div 的左边或顶端的位置。（4）“宽”和“高”文本框：用来确定 AP Div 的大小，单位为像素。（5）“Z 轴”文本框：用来确定 AP Div 的 Z 轴顺序，用来设置嵌套 AP Div 的重叠层次，值越大，越靠上方。（6）“可见性”和“显示”下拉列表框：用来确定 AP Div 的可视性。它有“default”（默认，由浏览器决定，大多数会继承它的父 AP Div 的可见性）、“inherit”（与其父 AP Div 的可视性相同）、“visible”（显示 AP Div
和其内对象，与其父 AP Div 无关）和“hidden”（隐藏 AP Div 和其内对象，与其父 AP Div 无关）四个选项。（7）“背景图像”文本框与按钮：用来确定 AP Div 的背景图案。（8）“背景颜色”按钮与文本框：用来确定 AP Div 的背景颜色。（9）“标签”下拉列表框：用来选择 AP Div 的样式，其内有 DIV 和 SPAN 两个选项，这是 HTML 的两个标签。（10）“溢出”下拉列表框：它决定了当 AP Div 中的内容超出 AP Div 的边界时的处理方法。它有“visible”（可见，即根据图像大小自动调整 AP Div 的大小，使内容全部显示，为系统默认）、“hidden”（当图像超出 AP Div 的范围后，超出的部分不显示）、“Scroll”（当图像超出 AP Div 的范围后，加滚动条）和“Auto”（根据 AP Div 中的内容能否超出 AP Div 的范围，决定是否加滚动条）四个选项。选择前三个不同选项后，在浏览器中的显示效果如图 4-1-11 所示。注意：在网页页面设计视图窗口内显示的都与图 4-1-11（a）一样。
（4）设定是否允许 AP Div 重叠：如果不选中“AP 元素”面板中的“防止重叠”复选框，则表示允许 AP Div 之间有重叠关系；如果选中“防止重叠”复选框，则表示不允许 AP Div 之间有重叠关系。（5）改变 AP Div 之间的嵌套关系：在 AP Div 中插入另一个 AP Div 叫做 AP Di 兼容性”复选框：选中它后，Dreamweaver 会向 HTML 文件的<HEAD>标记中加入 JavaScript 函数，用来解决在 Netscape 4.0 浏览器中添加嵌入 CSSAP Div 时可自动调整 AP Div 的尺寸，避免异常问题产生。 2．AP Div 的基本操作（1）创建 AP Div 可以有以下三种方法： ① 单击“插入”（布局）栏内的“描绘 AP Div”按钮，在页面内拖动出一个矩形，即可创建一个 AP Div，如图 4-1-4 所示。这时鼠标指针变为十字状态。 ② 将“绘制 AP Div”按钮拖动到网页页面中，也可在页面光标处插入一个默认属性的 AP Div。 ③ 将光标移到要插入 AP Div 的位置。单击“插入记录”→“布局对象”→“AP Div”命令，也可以在网页内光标处创建一个 AP Div。
第4章
AP Div、框架与网页布局
4.1 【案例 17】“秦始皇兵马俑—兵器介绍”网页相关知识 1．设置 AP Div 的默认属性单击“编辑”→“首选参数”命令，弹出“首选参数”对话框，再选择该对话框内“分类”列表框中的“AP 元素”选项，如图 4-1-3 所示。其中各个选项的作用如下：（1）“显示”下拉列表框：设置默认状态下 AP Div 的可视度。可以选择“default”（浏览器默认状态）“inherit” 、（继承母体可视度）、“visible”（可视）和“hidden”（隐藏）。（2）“宽”和“高”文本框：设置默认状态下插入 AP Div 的宽度和高度，单位为像素。（3）“背景颜色”按钮与文本框：设置默认状态下插入 AP Div 的背景颜色，默认值为透明。单击按钮可以调出颜色面板，利用它来选中颜色；也可以在文本框内输入颜色的代码。（4）“背景图像”文本框与“浏览”按钮：用来设置默认状态下插入 AP Div 的背景图像。单击“浏览”按钮，可以弹出“选择图像源”对话框，从中可以设定 AP Div 的背景图像。（5）“嵌套”复选框：选中它后，可以在将 AP Div 拖动到其他 AP Div 时实现嵌套。
（a）图 4-1-11
（b）
（c）
在“溢出”下拉列表框中分别选择“Visible”、“Hidden”和“Scroll”后的不同效果
（11）“剪辑”选项组：用来确定 AP Div 的可见区域，即确定 AP Div 中的对象与 AP Div 边线的间距。“左”、 “上”、“右”和“下”四个文本框分别用来输入 AP Div 中的对象与 AP Div 的左边线、顶部边线、右边线和底部边线的间距，单位为像素。 4.2 【案例 18】“不同亮度的图像”网页相关知识 1．“AP 元素”面板和改变 AP Div 的重叠顺序在“AP 元素”面板中，用户可以对 AP Div 的可视性、嵌套关系、显示顺序和相互覆盖性等属性进行设置。单击“窗口”→“AP Div”命令，即可调出“AP Div”面板，即 AP Div 监视器，如图 4-2-6（b）所示。（1）显示 AP Div 的信息：在图 4-2-4 所示的“AP 元素”面板中有五个 AP Div，“名称”列，是各个 AP Div 的名称，“Z”列内的数据显示各 AP Div 的顺序，Z 值越高，显示越靠上。Z 值可以是负数，表示在网页下边，即隐藏起来，网页的“Z 轴”数值为 0。（2）选定 AP Div：单击“AP 元素”面板中 AP Div 的名称，即可选中网页中相应的 AP Div。按住【Shift】键，同时依次单击“AP 元素”面板中各个 AP Div 的名称，即可选中网页中相应的多个 AP Div。（3）更改 AP Div 的名称：双击“名称”列中 AP Div 的名称，使此行名称处出现白色的矩形，如图 4-2-8 所示，即可输入 AP Div 的新名字。