实验四网页页面布局.ppt

实验四 网页页面布局 孙晓燕 2010.10,内容,表格的创建和编辑方法 通过表格来进行网页页面布局的方法 建立框架网页及框架属性设置的方法,如何将文字、图象及各种网页元素有规律的、整齐有序的排列在网页上，使页面易读和美观，是网页布局要解决的问题。表格和框架是常用的布局工具。,表格,在网页中表格不只是数据统计和展示数据，更重要的用途是利用表格来进行页面布局，使网页看起来更加直观和有条理。 行、列、单元格。,间距：单元格和单元格之间的距离。cellSpacing在属性面板里设置 边距：单元格中的内容和边框之间的距离。cellpadding=10的意思就是在原有小格的基础上沿四边各加上10 个点子宽度，也就是把原来的小格变大，但原来写的内容占的大小范围不变。 边框：表格的边线。,插入表格,单击菜单栏“插入”|“表格”命令。 在“插入”栏的“常用”类别中，单击“表格”按钮。,插入嵌套表格,嵌套表格是在一个表格的单元格内插入表格。,添加内容,将插入点定位在单元格内，即可输入文本，图象，动画等网页元素。,tag, 单元格内容 ,四行两列的表格, 08:30-09:15 第一节课 09:20-10:05 第二节课 10:20-11:05 第三节课 11:10-11:55 第四节课 ,选择表格,单击表格的左上角、右边或底部边缘的任意位置。 单击表格的单元格，在菜单栏选择“修改”|“表格”|“选择表格”。 单击表格的单元格，在“状态栏”选择“table”标签。,选择行或列,鼠标指向行的左边缘或列的上边缘，单击鼠标则选择鼠标指向的行或列。 拖动鼠标，则选择连续的多行或多列。 按Ctrl同时单击鼠标则选择不连续的的行或列。,选择单元格,标签检查器 Ctrl+a 双击 选择连续的不连续的,设置表格属性,id 行，列 宽，高 对齐 背景颜色 边框，边框颜色 背景图像 清除列宽，清楚行高,设置单元格属性,水平，垂直 宽，高 背景颜色 边框，边框颜色 背景图像 拆分 合并,表格的基本操作,表格的大小:拖动控制点,”属性检查器” 调整行高和列宽: 鼠标移动到要调整的行或列的边框上,拖动鼠标. 合并或拆分单元格 插入和删除行或列,多行或多列,表格布局,Dreamweaver 8中提供了3中布局视图:标准、扩展和布局。绘制布局表格通常在布局视图下进行。,切换布局视图,“插入”菜单栏选择“布局”类别，单击“布局”视图命令。,绘制布局表格,切换到布局视图模式 单击“布局表格”按钮，鼠标指针变成“+” 在文档窗口中，按住鼠标左键并拖动，可以绘制出布局表格 表格的框线显示为绿色 每个布局表格都在顶端有标签，并在底部或顶端显示表格的大小。 布局表格可以嵌套。,绘制布局单元格,切换到布局视图模式 单击“绘制布局单元格”按钮，鼠标指针变成“+” 在布局表格中合适的位置，按住鼠标左键并拖动，可以绘制出布局表格 单元格的框线显示为蓝色 要绘制多个单元格，按住ctrl的同时单击“绘制布局单元格”按钮。 布局表格可以嵌套。,移动布局表格和单元格,选择 鼠标拖动即可,调整大小,选择 拖动控制点,删除布局表格和单元格,选择 “Delete”键 “编辑”|“清除”,设置布局表格属性,在“属性检查器”中设置 宽 高 填充 间距 背景颜色,利用表格制作垂直线或水平线,水平线可以使用标签 插入一个无边框、无边距的表格，设单元格的高度为“1”，为单元格添加背景颜色。 切换到“拆分”视图，删除单元格内的“”代码,框架,Dreamweaver 8中,框架是除了表格以外另一种常用的网页布局工具.框架结构把浏览器划分为多个区域,每个区域都可以分别显示不同的网页.,框架实际上分为两部分,即框架和框架集.框架是浏览器窗口中的一个区域,它可以显示与浏览器窗口的其余部分中所显示的内容相关或无关的网页文件.每一个框架都是一个独立的网页文件. 框架集是框架的集合,是一个定义了一组框架结构的网页.框架集文档本身不在浏览器显示,它只是向浏览器提供如何显示框架以及在框架中显示哪些文档的信息,是一个用于存储框架的容器.,框架的优点,重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，增加了网页下载速度) 方便制作导航栏,插入框架,单击菜单栏“插入”|“HTML”|”框架”命令。 “插入”菜单栏选择“布局”类别，单击“布局”视图命令。选择”框架”按钮. 预定义了13种框架集结构供用户选择.,框架面板,1.打开 单击菜单栏中的”窗口”|”框架”命令,打开框架面板. 2.基本操作 选择框架集:在”框架”面板中单击最外层边框,使其出现粗黑边显示,则选中了框架集. 选择框架:在”框架”面板中单击要选择的框架,使其出现粗黑边显示,则选中了框架.,设置框架属性,1.设置框架集属性 选中框架集,打开框架集属性. 边框:是,否默认 边框宽度 边框颜色 框架的大小:用鼠标拖动边框,2.设置框架属性 框架名称 源文件 滚动 不能调整大小 边框 边框宽度:内容与左右边框的距离 边框颜色 边框高度:内容与上下边框的距离,保存,“文件”|”保存全部”,框架中的超链接,在框架中设置超链接以打开另一个框架中的文档时,必须设置链接的目标窗口. 例如:在左侧框架中建立导航条,打开链接是在右侧框架中显示,则链接的目标窗口为右侧框架.,删除框架,第一种，用鼠标拖动框架的边框，起到与其父框架页边框重叠即可。,编辑无框架内容,打开“修改”|”框架页”|”编辑无框架内容” 编辑代码之间的内容，当浏览器不支持框架时网页所显示的内容。,实例”HTML教程”,新建网页 切换到布局视图 插入”左侧框架” 设置框架边框 编辑无框架内容 编辑左侧框架内容 为左侧框架内容添加超链接,实例,/ 文章阅读网,说明,先绘制一个布局表格，规定好宽度和高度 在中间位置画一个单元格，将布局表格分成3行三列 在没个单元格中插入图片或者设置背景图片 改变第一行单元格的宽度为5，高度为7 改变第三行单元格