网页设计基础 层与表格及其应用

Click to edit Master title,Click to edit Master text,Second level,Third level,Fourth level,Fifth level,*,计算机信息中心,授课教师：邵熹雯,jsjsxw,第十三章 层与表格及其应用,13.1,层的创建与基本操作,13.2,层的属性面板和控制面板,13.3,层的应用实例,13.4,创建表格的基本操作,13.5,表格的编辑修改与格式化,13.6,布局表格和布局单元格,13.7,本章小结,本章内容,层的创建与基本操作,层是网页元素的载体,层的应用技术也是一种网页元素的定位技术。,层可与行为、时间轴配合使用,创建和删除层,【,插入,】|【,布局对象,】|【,层,】,层可以重叠,层可以嵌套,【,插入,】|【,布局对象,】|【,层,】,将光标插入到已建好的层中,【,插入,】|【,布局对象,】|【,层,】,嵌套层的子层可以在其父层,中间,，也可以在其父层,外边,，嵌套层永远在其父层,上方,。,图,13-1,未被选中激活的层,图,13-2,被激活的层,图,13-3,被选中的层,激活和选中层,激活层目的：向层中插入各种网页元素,单击层中任意位置，就可激活层,选中层目的：对层进行属性编辑、调整、定位等,先激活层，再单击层左上角的选择柄,单击层的边框，也可选中层,当前窗口中没有层被激活和选中,注意鼠标形状变化,F2,/【,窗口,】|【,层,】,，在,【,层,】,面板中选中,按住,Shift,键，在,【,层,】,面板中选中多层,调整、移动和对齐层,手动调整,/,利用层,【,属性,】,面板调整,手动定位,/,利用层,【,属性,】,面板定位,选中多层,-【,修改,】|【,排列顺序,】,设置层的属性,层编号：不能以数字开头，只能是英文字母和数字。,左上：位置,宽高：大小,Z,轴：叠放次序，大在上，小在下,可见性：,inherit,、,visible,、,hidden,溢出：,visible,、,hidden,、,Scroll,、,Auto,剪辑：层可视区域与层边界之间的距离。,背景：颜色和图像,层的控制与操作,在,【,层,】,面板中可以完成对层改名，选定层，修改层的可见性，设置层的叠放次序以及设置层嵌套等操作,嵌套层在页面上显示时并不一定位于其父层之中，它的,HTML,代码嵌套在其父层的,HTML,代码中，移动父。层时嵌套层会一齐移动。如果从页面上看到某一层位于另一层之中，它们的,HTML,代码互不包含，就不是嵌套层,层的应用实例,2,个文字图层,4,个图像图层,图像为鼠标经过图片,创建表格的基本操作,利用表格可以控制文本和图像等对象在页面上的位置,网页一般可用表格和层来对网页元素定位,对于页面元素布局不规则的网页则可用布局表格和布局单元格来对网页元素定位,新建表格,【,插入,】|【,表格,】,【,插入,】|【,布局,】|【,表格,】,Ctrl+Alt+T,设置表格属性,表格,Id,：表格名称。,行、列、宽、高,填充、间距、边框,对齐：表格相对于页面对齐方式,清除列宽、清除行高,将表格宽度转换成像素、将表格宽度转换成百分比,背景颜色、边框颜色、背景图像,设置单元格属性,水平、垂直：单元格中元素对齐方式,宽、高：像素或百分比,不换行,标题,背景、背景颜色、边框,合并和拆分单元格,选取表格和单元格,选择单元格,鼠标单击并拖动,单击状态栏左侧标签选择器的,选中多个单元格：鼠标拖动、,shift,、,Ctrl,选中整行和整列,选择表格,单击状态栏左侧标签选择器的,【,修改,】|【,表格,】|【,选择表格,】,按两次,Ctrl + A,单击表格的右边框线或下边框线,表格的嵌套,嵌套的表格往往用作页面布局,表格边框线的宽度应该设为,0,将光标插入当前表格的某个单元格内，然后可选择,【,插入,】|【,表格,】,命令,表格的编辑修改与格式化,改变表格或单元格的大小,表格行、列的增加和删除,单元格的拆分和合并,单元格的复制、粘贴、移动和清除,表格的样式化,【,命令,】|【,格式化表格,】,补充,:,表格元素的对齐方式,表格在页面中的对齐方式,图片等元素在单元格中的对齐方式,注意区别：图片的基线对齐与图片本身的对齐,布局表格和布局单元格,网页页面布局有两种工作模式，分别是,【,标准模式,】,和,【,布局模式,】,创建和调整布局表格与布局单元格,由标准模式切换到布局模式,选择,【,布局表格,】,按钮，绘制布局表格,按住,Ctrl,键可以连续画多个布局表格,选择,【,布局单元格,】,按钮，绘制布局单元格,布局单元格中，根据页面需要输入文字或插入图片等对象,调整布局表格或布局单元格的大小及其中内容的属性,选中,布局表格或布局单元格，并在布局表格或布局单元格的,【,属性,】,面板,中完成它们的属性设置,标准模式和布局模式的应用实例,1,3,行,8,列的单元格用于布局,前两行合并，用于插入,居中,图片,第三行单元格调整宽高为：,80*300,输入相应文字,利用,shift+enter,键换行,利用吸管提取颜色,标准模式和布局模式的应用实例,2,800*600,像素的布局表格,800*40,像素的布局单元格：插入,flash,4,个,79*,79,像素的,gif,图片,170*,170,像素的,gif,图片,本章小结,在本章中介绍了,Drameweaver,8,中的层、表格、布局表格与布局单元格及其应用。较为详细的介绍了层、表格、布局表格与布局单元格的创建、编辑和属性设置等操作以及它们在网页设计中的定位作用。,在本章内我们涉及到的重点知识有：层、表格、布局表格与布局单元格的创建、选择、编辑等操作方法；层、表格、布局表格与布局单元格的各种属性设置；以及在它们中输入各种网页元素的方法。布局表格和布局单元格是网页布局设计时重要的、有效的、便捷的手段，是应该重点掌握的知识。,The End,