第12章 层Div标签和时间轴.pptVIP

网页设计与制作案例教程 第12章 层Div标签和时间轴 知识点： 层的创建和编辑 层和表格之间的转换 Div标签 时间轴动画 第12章 层Div标签和时间轴 《网页设计与制作案例教程》 重点和难点： 层的创建和编辑 Div标签 时间轴动画 要求学生掌握层的创建和编辑，掌握层和表格之间的转换，掌握Div标签的应用，掌握创建时间轴动画的方法。 教学要求： 第12章 层Div标签和时间轴 《网页设计与制作案例教程》 第12章 层Div标签和时间轴 《网页设计与制作案例教程》 层是一种目前HTML页面中最为重要的元素之一，它可定位在页面上的任意位置，灵活的布局方式使得它在页面设计中得以广泛使用。层可以看作是一种容器，在层中可以包含文本、图像、Flash或其它HTML文档，如图12.1所示。 12.1层 图12.1层的重叠效果 第12章 层Div标签和时间轴 《网页设计与制作案例教程》 执行下列操作之一，建立层。如图12.2所示。 ① 将光标放置在“文档”窗口中，执行菜单【插入】|【布局对象】|【层】命令。 ② 单击【常用】面板右侧向下箭头|【布局】|【描绘层】 按钮，并在页面中拖曳即可创建层。 12.1.1创建层 12.1.2嵌套层 图12.2通过布局面板绘制图层 提示：在【布局】面板中主要有三项 表格、 Div、 描述层，都可以进行页面布局。 嵌套层是指在其他层中创建的层。嵌套通常用于将层组织在一起。嵌套层随其父层一起移动，并且可以设置为继承其父级的可见性。 第12章 层Div标签和时间轴 《网页设计与制作案例教程》 12.1 .3设置层属性 1．查看或设置层首选参数 （1）执行菜单【编辑】|【首选参数】命令，弹出【首选参数】对话框 （2）【层】参数设置 （3）根据需要进行设置首选参数 2．层属性 单击层手柄或层标签选中层，层选中之后，打开层对应的属性面板。 提示：如果层的内容超过指定大小，层的底边缘（按照在Dreamweaver“设计”视图中的显示）会延伸以容纳这些内容。（除非“溢出”属性设置为“可见”，否则当层在浏览器中出现时，底边缘将不会延伸。） 图12.3层对应的属性面板 第12章 层Div标签和时间轴 《网页设计与制作案例教程》 12.1 .4 层面板 通过【层】面板可以管理文档中的层。使用【层】面板可防止重叠，更改层的可见性，将层嵌套或堆叠，以及选择一个或多个层。 在页面编辑状态，按F12或执行菜单【窗口】|【层】命令，可以打开【层】面板，如图12.4所示 图12.4层面板 第12章 层Div标签和时间轴 《网页设计与制作案例教程》 12.1 .5 层面板 在处理页面布局时，可以对层进行激活、选择、移动、大小调整和对齐。层处于激活模式时，可将内容放入其中；选中层则可将层进行移动、大小调整或对齐。 1.选择层 可以选择一个或多个层进行操作或更改它们的属性。 图12.5选择层 提示：如果层代码标记不可见，执行菜单【查看】|【可视化助理】|【不可见元素】命令。 第12章 层Div标签和时间轴 《网页设计与制作案例教程》 12.1 .6 表格和层之间的转换 1.将表格转换为层 执行菜单【修改】|【转换】|【表格到层】命令 2.将层转换为表格 执行菜单【修改】|【转换】|【层到表格】命令 第12章 层Div标签和时间轴 《网页设计与制作案例教程》 12.1 .7使用层与表格进行页面布局的区别 使用层进行页面布局越来越受到人们的欢迎，因为它相对要比使用表格进行页面布局代码量要少很多、结构化更清澈，最重要的是代码更容易被人们理解。 代码： div style=border: #cccccc 1px dashed; width:100px; height:100px; 这是一个层 /div 代码： table width=100 heigth=100 border=1 cellspacing=0 cellpadding=0 tr td width=100 height=100 这是一个表格 /td /tr /table 第12章 层Div标签和时间轴 《网页设计与制作案例教程》 12.2 Div标签结合CSS样式布局页面 Div标签是块级的（简单地说，它等同于其前后有断行），用于组合一大块的代码。插入div标签后，可以对其进行操作或者在其中添加内容，绝对定位的div标签为Dreamweaver层。 12.2.1 Div标签与层的区别 （1）单击【布局】面板|【Div标签】按钮，弹出【插入Div标签】对话框，如图12.6所示 （2）在【插入Div标签】对话框中输入ID为【layer6】，单击【确定】按钮 （3）同时，使用描述层按钮绘制一个层，如图12.7所示 （4）打开代码视图，可以看到Div标签和描绘层对