《DIV样式和设置》PPT课件_第1页
《DIV样式和设置》PPT课件_第2页
《DIV样式和设置》PPT课件_第3页
《DIV样式和设置》PPT课件_第4页
《DIV样式和设置》PPT课件_第5页
已阅读5页,还剩19页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

网页制作应用教程,2012.11,创建DIV标签DIV标签操作和设置应用实例,本节讲堂:DIV标签和设置,1、创建DIV样式,了解的知识点:DIV标签简介DIV与TABLE对比创建DIV标签层视图的基本组成,1.1DIV标签简介,DIV(层)是一个块级元素,是一种网页元素定位技术,用来为HTML文档内块(block-level)的内容提供结构和背景的元素,DIV以像素为单位实现页面元素的精确定位。DIV中的元素可以包含文本、图像或其它html文档等,通过DIV可以对页面元素进行重叠和更为复杂的布局,使网页页面布局(设计)从二维平面扩展到三维立体。,1.2DIV与TABLE对比,如附件1所示,1.3创建DIV标签,操作:插入-布局对象-DIV标签,1.3创建DIV标签,操作:插入-布局对象-层,层是DIV标签的特殊形式。,1.4层视图的基本组成,选择柄,调整柄,DIV元素(块区间),2、DIV标签操作和设置,了解的知识点:“层”面板操作:选择、移动和对齐层“层”属性设置DIV和表格的转换,2.1层面板操作,“层”面板是对层进行管理的场所,可以方便地查看层的结构。要显示或隐藏“层”面板,可选择窗口层菜单命令或按【F2】键。,2.1层面板操作:选择,选择单个层:(1)在文档编辑区中单击层边框。(2)在层中单击鼠标左键,再单击该层的选择柄。(3)在“层”面板中单击要选择的层的名称。(4)按住【Ctrl+Shift】键并在层中单击即可选择层。,选择多个层(1)按住【Shift】键,在需要选择的多个层中单击,同时“层”面板中选择的层以反白显示。(2)按住【Shift】键,在“层”面板中单击要选择的多个层的名称。,2.1层面板操作:移动,在网页制作中往往需要精确定位层的位置,这就需要对创建的层进行移动。,(1)移动选择柄;(2)确定X轴和Y轴坐标值,2.1层面板操作:对齐,在网页制作中常常需要将某些层按照一定的规定对齐。在进行层的对齐操作时,嵌套层中所有子层并不参与层的对齐操作,它们只随父层的移动而移动,并始终与父层保持相对的固定位置。注:是将层中的元素内容进行对齐设置,而非对层本身进行对齐。,2.2层属性设置,选中层,在“属性”面板中进行相关设置。,层编号:DIV的唯一ID。只应使用标准的字母数字字符。左和右:DIV的左上角相对于页面左上角的位置(像素)。DIV嵌套则为父DIV相对左上角的位置。宽和高:DIV元素的宽度和高度(像素)。如果DIV元素的内容超过指定大小,在Dreamwaver设计视图中,DIV元素的底边会自动延伸以容纳这些内容,如果“溢出”属性设置为“不可见”,则在浏览器中,超过宽度和高度的内容将不会延伸。溢出:当DIV元素内容超过设定宽度和高度的处理设置。Visible:可见Hidden:隐藏Scroll:滚动Auto:自动,Z轴:DIV元素的Z轴或堆叠顺序。编号大的元素出现在编号小的元素的前面。(需将防止重叠设置取消)可见性:DIV元素最初的可见状态。default:默认(可见)inherit:继承(使用父级的可见属性)Visible:可见hidden:隐藏,2.3DIV和Table的相互转换:层-Table,层和表格都是对网页进行精确定位的工具,用层定位比表格定位使用起来更加灵活,但层只有在InternetExplorer4.0或NetscapeNavigator4.0以上的版本中才能够正确显示。表格对浏览器的版本高低没有要求,如果要使设计的网页在更低版本的浏览器中也能被正确显示,那么可将用层设计的网页转换为表格形式。,2.3DIV和Table的相互转换:层-Table,(1)用层进行布局设置(如附件3所示)(2)选中层(多个)(3)【修改】-【转换】-【层到Table】,3、应用实例,实际案例:飘移的图片,3.1、DIV层设置,(1)创建可见层;(2)层中插入图片或文字;,3.2、时间轴设置,(1)打开时间轴面板:【窗口】-【时间轴】;(2)选中DIV层;(3)将层拖放到时间轴:【修改】-【时间轴】-添加对象到时间轴;,3.3、运行样式设置,(1)单击选择第一帧和最后一帧,调整该帧层的位置等属性;(2)设置时间轴属性:自动播放、循环(3)保存预览,3.4、复杂效果设置,(1)选中层(2)执行【修改】-【时间轴】-【录制层路径】(3)移动层并任意绘制路径,结束位置释放鼠标(4)则时间轴上自动添加刚才绘制的图

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论