1.创建和使用层-《网页设计与编程》网络课程.ppt

九.CSS样式表 九.CSS样式表 第6章 用层和样式表布局并修饰 1.层的基本操作 2.CSS样式表 3.DIV+CSS样式表布局 （一）层的基本操作 层是一种HTML内容的容器，通常由DIV及SPAN标记说 明。层可定位在页面上的任意位置，并且其中可包含 文本、图像、表单等所有可直接用于文档的元素。 层提供了定位页面元素的方法，通过将页面元素放置 于层中，用户可控制对象的上下叠放顺序，显示或隐 藏，也可以通过时间轴同时在屏幕上移动一个或多个 层（可制作动画）。 层的定位和显示跟不同浏览器有关，需精确定位。 1.创建和使用层 当用户在文档中放置层时，DW将在代码中插入该层的 HTML标签。用户可以选择让DW将DIV标签或SPAN标签用 于自己的层。 默认情况下，DW会使用DIV标签创建层。层代码可以插 入在HTML文件正文中的任意位置。但在页面中绘制层 时，DW将在body标记的后面加入层代码。如果嵌套一 个层，则DW会在父层中插入代码。 1.创建和使用层 （1）创建层和嵌套层 “查看”菜单－“可视化助理”－“层边框（AP元素轮廓线）” 创建层：“插入栏”－“布局”－“绘制AP DIV” 或通过“插入”菜单－“布局对象”－“AP DIV” 嵌套层： 鼠标插入点放置在要创建嵌套层的层中， 然后通过“插入”菜单－“布局对象”－“AP DIV”； 或按住ALT键在层中直接绘制嵌套 1.创建和使用层 （2）显示层面板（AP元素面板） 选项设置： 显示或隐藏：如果前面什么都没有的话，则该层的可见性继承其父层的显示属性（默认） 在层名处双击可修改层名 在Z列单击可修改层的层次属性值，数值大的位于上层。单击可以修改层次。也可以选定一个层，把层直接拖到想要的层次也可以。 “防止重叠” ：有嵌套层时应选定 1.创建和使用层 （3）设置层参数 “编辑”菜单－“首选参数”－“AP元素” 1.创建和使用层 （4）选择层和激活层 选择层： 要对层进行移动，调整大小等就要先选择层， 选择层才能对层进行操作。 ①要选择层的话，可以在层面板里面选择， 或点击层边框，或点击层标记等 ②选中后，可以直接移动或调整层的大小了。 ③选择多个时，shift键。 ④要对齐层，多个选定之后通过“修改”菜单－“排列顺序” －“对齐”。 1.创建和使用层 激活层： 要把对象插入层中，首先要激活层。 ① 把光标移动到层内的任何地方单击。就可以在里面插入文本，图像等对象了 ② 激活层不等于选择层。 层里面的内容怎么定位？P129右下角的一堆话 1.创建和使用层 （5）设置层属性 ① 左、上：设定层相对与页面或父层的位置 （坐标） ② Z轴：设置层的层次属性值 ③ 显示：设置层的可见性，default指不指明 可见性，但一般default是“继承”。 1.创建和使用层 ④ 溢出：层内容超出层范围（尺寸）时的处理方法 Visible：自动增加层的尺寸 hidden：保持层尺寸不变，隐藏超出部分内容 scroll：无论是否超出范围，显示滚动条 auto：当层内容超出层范围时，自动增加滚动 条，默认值。 ⑤ 剪辑：设置层的可视区域。其中的数值表示可视 区域与层边界的像素值 1.创建和使用层 （6）转换表格和层 “修改”菜单－“转换” 在DW中，不能将模板中的层或应用模板的网页中的层转换为表格。 2.创建层动画 动态HTML（DHTML）是HTML与特定脚本语言的结合，该脚本语言可以用来改变HTML元素的样式或定位属性。在DW中时间轴面板使用动态HTML来改变层及图片在一段时间内的属性，如位置、尺寸、可见性及堆栈顺序等，从而制作出动画效果。此外，可以使有时间轴加载其它操作，如执行行为。 2.创建层动画 通过在不同时间改变层的位置、大小、可见性和 叠放顺序来创建动画。 “窗口”－“时间轴”把时间轴面板选择出来 其中B为行为通道，显示时间轴对应时间所附近 的行为，使用浅蓝色方块来表示存在的行为 2.创建层动画 （1）直接创建时间轴动画 时间轴只能移动层 （2）删除某段动画 右键点击要删除的部分，选择“移除时间轴” （3）拖动路径创建动画 右键单击选定的层，选择“记录路径”； 或右键点击时间轴，选择“录制层路径” 练习 P263-P268 第17章 利用时间轴制作浮动的小广告 （二）CSS样式表 6.2 CSS在网页中的应用 （二）CSS样式表 样式是控制文本块或段落外观的一组格式属性，使用 样式可以格式化文本,可以