第6章网页布局课件.ppt
- 【下载声明】
1. 本站全部试题类文档,若标题没写含答案,则无答案;标题注明含答案的文档,主观题也可能无答案。请谨慎下单,一旦售出,不予退换。
2. 本站全部PPT文档均不含视频和音频,PPT中出现的音频或视频标识(或文字)仅表示流程,实际无音频或视频文件。请谨慎下单,一旦售出,不予退换。
3. 本页资料《第6章网页布局课件.ppt》由用户(晟晟文业)主动上传,其收益全归该用户。163文库仅提供信息存储空间,仅对该用户上传内容的表现方式做保护处理,对上传内容本身不做任何修改或编辑。 若此文所含内容侵犯了您的版权或隐私,请立即通知163文库(点击联系客服),我们立即给予删除!
4. 请根据预览情况,自愿下载本文。本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
5. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007及以上版本和PDF阅读器,压缩文件请下载最新的WinRAR软件解压。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 布局 课件
- 资源描述:
-
1、第第6章网页布局章网页布局网页设计与制作网页设计与制作第第6章章 网页布局网页布局应用框架布局网页应用框架布局网页6.2应用应用Div+CSS布局网页布局网页6.3应用表格布局网页应用表格布局网页6.1网页设计与制作网页设计与制作本章要点本章要点 在网页中,表格、在网页中,表格、Div+CSSDiv+CSS与框架主要用于网页的布局定位。表格用于精确定位,与框架主要用于网页的布局定位。表格用于精确定位,Div+CSSDiv+CSS可以灵活定位,框架在定位的基础上,可以引入多个可以灵活定位,框架在定位的基础上,可以引入多个HTMLHTML文件。文件。v创建表格与嵌套表格创建表格与嵌套表格v编辑表格
2、与设置表格的属性编辑表格与设置表格的属性v创建框架与框架集创建框架与框架集v设置框架与框架集的属性设置框架与框架集的属性v插入插入Divv绝对定位与相对定位绝对定位与相对定位v浮动定位浮动定位v应用表格、应用表格、Div+CSS与框架设计网页与框架设计网页网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格是一种在HTML页面上布局数据与图像的工具。表格为网页设计者提供了向网页添加垂直与水平结构的方法。例如,使用表格安排表格数据,在网页上布局文本与图像等。表格由三个基本组件构成:行(水平空间)列(垂直空间)单元格(行和列交汇的空间)网页设计与制作网页设计与制作6.1 应用
3、表格布局网页应用表格布局网页 创建表格创建表格 6.1.1操作实例操作实例6-1 在网页中按图在网页中按图6-1所示建立表格所示建立表格网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 创建表格创建表格 6.1.1操作步骤:操作步骤:在本地站点html文件夹下新建网页blzl.html。在文档头将网页“标题”设置为“巴黎之旅”。设置标题:在“文档”窗口的第一行输入标题文字“巴黎之旅”,并在属性面板设置为“隶书”、大小为“xx-large”、水平为“居中对齐”。设置表格插入点。在文档窗口,将表格插入点设置在标题文字的下方。执行下列操作之一,打开“表格”对话框。单击“常用”工具
4、栏的“表格”按钮。从“常用”工具栏将“表格”按钮拖动到表格插入点,即标题文字的下方。在“插入”菜单选择“表格”选项。网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 创建表格创建表格 6.1.1在对话框中默认当前值或重新输入新值。如图6-2所示。“表格”对话框显示的默认数据是最近一次创建表格时使用的数据。在“行数”中,指定表格的行数。例如,输入16。在“列数”中,指定表格的列数。例如,输入4。在“表格宽度”中,指定以像素为单位或占浏览器窗口百分比的表格宽度。例如,输入宽度为85,选择单位为百分比。在“边框粗细”中,指定以像素为单位的表格边框宽度,如果不需要边框可输入0。例如
5、,输入1。在“单元格边距”中,指定单元格内容与单元格边框之间的距离,单位是像素。默认边距为1像素,如果不需要边距可输入0。例如,输入1。在“单元格间距”中,指定单元格之间的距离,单位是像素。默认间距为1像素,如果不需要间距可输入0。单击“确定”按钮,网页中创建了一个16行4列的表格。网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格的基本操作与属性设置表格的基本操作与属性设置 6.1.21向表格中输入文字向表格中输入文字操作实例操作实例6-2 按图按图6-1所示完成表格中的文字输入与设置所示完成表格中的文字输入与设置操作步骤:操作步骤:(1)向表格中输入文字在指定单元格
6、中单击鼠标,设置插入点。在插入点输入文字。在表格中输入的信息如图6-1所示。(2)选中表格并设置表格的居中对齐执行下列操作之一,选中整个表格。单击表格的左上角。单击表格下边界的任何一处,当鼠标指针下方出现表格状图标时单击即可。在表格中单击一次,在“修改”菜单选择“表格”、“选择表格”选项。在表格中单击一次,在文档窗口下方的标签选择器中单击标签。如图6-3所示。网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格的基本操作与属性设置表格的基本操作与属性设置 6.1.2网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格的基本操作与属性设置表格的基本操作
7、与属性设置 6.1.2在表格“属性”面板的“对齐”下拉列表中选择“居中对齐”。(3)选中行或列并设置行或列文本的居中对齐执行下列操作之一,选中行或列。将鼠标移动到一行的左边界或一列的顶部,当出现选择箭头时单击鼠标左键。如图6-4、6-5所示。在指定行或列,按住鼠标左键左右或上下拖动以选取行或列。在行或列“属性”面板的“水平”下拉列表中选择“居中对齐”;在“垂直”下拉列表中选择“居中”。网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格的基本操作与属性设置表格的基本操作与属性设置 6.1.2网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格的基本操
8、作与属性设置表格的基本操作与属性设置 6.1.2网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格的基本操作与属性设置表格的基本操作与属性设置 6.1.2(4)选中单元格并设置单元格文本的居中对齐执行下列操作之一,选中一个或多个单元格。在单元格中单击,上下或左右拖动到另一个单元格。在单元格中单击,然后按下Shift键并单击另一个单元格,以这两个单元格为顶点的矩形区域中的所有单元格被选中。按下Ctrl键然后依次单击单元格、行或列,选中不相邻的单元格、行或列。按下Ctrl键并单击被选中的单元格、行或列可取消选中。在单元格“属性”面板的“水平”下拉列表中选择“居中对齐”;在“
9、垂直”下拉列表中选择“居中”。网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格的基本操作与属性设置表格的基本操作与属性设置 6.1.22编辑表格编辑表格操作实例操作实例6-3 将图将图6-1所示的表格修饰为图所示的表格修饰为图6-6所示的形式所示的形式操作步骤:操作步骤:(1)插入列如图6-6所示,在原第一列之前插入新的一列。在需要添加新列的右侧列单击任意的单元格。例如,单击“景点1”单元格。执行下列操作之一,在原列的左侧插入新的一列。在“修改”菜单中选择“表格”、“插入列”选项。在“插入”菜单中选择“表格对象”、“在左边插入列”选项。单击鼠标右键,在快捷菜单中选择“
10、表格”、“插入列”选项。在“布局”工具栏,单击“在左边插入列”按钮。网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格的基本操作与属性设置表格的基本操作与属性设置 6.1.2网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格的基本操作与属性设置表格的基本操作与属性设置 6.1.2(2)调整列的宽度执行下列操作之一,可调整列宽。将鼠标移到第一列的右边框,当鼠标指针变为双向箭头时,向左右拖动边框线,可使列的宽度缩小或增大。选中第一列,在列“属性”面板的“宽”文本框输入选中列的宽度。(3)合并单元格如图6-6所示,第一列第24行单元格合并,输入“第一游
11、览区”;第58行单元格合并,输入“第二游览区”;第911行单元格合并,输入“第三游览区”;第1214行单元格合并,输入“第四游览区”。选中需要合并的单元格。选中的单元格必须是连续的,并且形状应是矩形。例如,选中第一列的24行单元格。执行下列操作之一,合并单元格。在“修改”菜单选择“表格”、“合并单元格”选项。单击鼠标右键,在快捷菜单中选择“表格”、“合并单元格”选项。在单元格“属性”面板单击“合并所选单元格,使用跨度”按钮。如图6-7所示。网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格的基本操作与属性设置表格的基本操作与属性设置 6.1.2在合并后的单元格中输入“第
12、一游览区”。参照步骤,将第一列第58行单元格合并,输入“第二游览区”;第911行单元格合并,输入“第三游览区”;第1214行单元格合并,输入“第四游览区”。参照步骤,将第一行第12列单元格合并。注意:如果合并前的单元格有内容,则所有合并前单元格的内容将被放置到合并后的单元格中,被选定的第一个单元格的属性将应用到合并后的单元格上。网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格的基本操作与属性设置表格的基本操作与属性设置 6.1.2(4)插入行与移动行如图6-6所示,在“第三游览区”与“第四游览区”之间添加一行。由于已经纵向合并了单元格,直接在“第四游览区”行之上插入行
13、可能得不到预期的效果。因此,采用如下的间接方法。在第一行的第一个单元格内单击鼠标,设置插入点。执行下列操作之一,在原第一行之上插入新行。在“修改”菜单选择“表格”、“插入行”选项。单击鼠标右键,在快捷菜单选择“表格”、“插入行”选项。在“布局”工具栏,单击“在上面插入行”按钮。选中新插入的行,在“编辑”菜单选择“剪切”选项,将该行剪切到剪贴板。在“第四游览区”单元格中单击鼠标右键,在“编辑”菜单中选择“粘贴”选项,将所剪切的行插入到当前位置之前。合并新添加行的第12列和第35列单元格,并分别输入“自行游览”、“迪斯尼乐园、购物”。注意:采用下述方法也能完成上述操作。在需要添加新行的上一行,单击
14、任意的、非合并的单元格,在“布局”工具栏,单击“在下面插入行”按钮。网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格的基本操作与属性设置表格的基本操作与属性设置 6.1.2网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格的基本操作与属性设置表格的基本操作与属性设置 6.1.23设置表格属性设置表格属性首先通过“窗口”菜单的“属性”选项,打开“属性”面板。操作实例操作实例6-4 按图按图6-8所示的格式修饰图所示的格式修饰图6-6的表格的表格操作步骤:操作步骤:选中表格。查看表格“属性”面板,如图6-9所示。命名表格操作:在“表格”文本框中,为
15、表格输入一个名称。例如,输入“巴黎之旅”。网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格的基本操作与属性设置表格的基本操作与属性设置 6.1.2设置表格布局选项。在“行”和“列”中,输入表格的行数和列数。编辑表格时,一般采用原表格的行列数。在“宽”中,指定表格的宽度,一般采用浏览器窗口的百分比;也可采用以像素为单位的数值。通常情况下不需要设置表格的高度。使用“对齐”下拉列表,设置同一段落中表格与其他元素的对齐方式。使用“清除行高”和“清除列宽”按钮,可删除表格中所有的行高值和列宽值。使用“将表格宽度转换成像素”按钮,可将占浏览器窗口百分比的宽度表达方式转换为像素数值
16、的表达方式。使用“将表格宽度转换成百分比”按钮,可将当前的像素数值表达方式转换为占浏览器窗口百分比的宽度表达方式。在“间距”中,指定单元格之间的距离,单位是像素。网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格的基本操作与属性设置表格的基本操作与属性设置 6.1.2设置表格边框在“边框”中,输入以像素为单位的表格边框的宽度。例如,输入4。单击“快速标签编辑器”,在弹出的标签内“id=巴黎之旅”后面输入空格,在弹出的列表中双击选择“bordercolor”,在双引号中输入“#D6D3CE”,即可给表格赋予“边框颜色”。如图6-10所示。网页设计与制作网页设计与制作6.1
17、 应用表格布局网页应用表格布局网页 表格的基本操作与属性设置表格的基本操作与属性设置 6.1.2在标签内输入空格,在弹出的列表中双击选择“bgcolor”,在双引号中输入六位颜色编码,即可为表格赋予一种背景颜色。在标签内输入空格,在弹出的列表中双击选择“background”,在双引号中输入图像文件名,即可为表格插入一幅背景图像。设置行、列与单元格的属性在表格中选取任何单元格的组合。例如,选中第一行的第26列。显示单元格“属性”面板,如图6-11所示。使用“水平”下拉列表,设置单元格、行、列内容的水平对齐方式。使用“垂直”下拉列表,设置单元格、行、列内容的垂直对齐方式。在“宽”和“高”中,设置
18、选中单元格的宽度和高度,单位是像素。使用百分比时,应在数值后面添加%号。网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格的基本操作与属性设置表格的基本操作与属性设置 6.1.2使用“背景”,可为单元格、行、列插入背景图像。使用“背景颜色”,可为单元格、行、列设置背景颜色,可使用颜色拾取器或直接输入所需颜色的十六进制编码值。例如,输入“#CCCCFF”。使用“边框”,可为单元格设置边框颜色。单击“合并单元格”按钮,可将选中的单元格、行或列合并为一个单元格。单击“拆分单元格”按钮,可将一个单元格拆分为几个单元格。应在“拆分单元格”对话框中,选择是拆分为行还是列,并输入需要
19、拆分的行数或列数。如图6-12所示。网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格的基本操作与属性设置表格的基本操作与属性设置 6.1.2选中“不换行”选项,可防止英文单词中间被截断换行。此时,单元格将自动扩展以容纳输入或粘贴的英文单词。通常单元格将横向扩展以适应最长的单词,然后再纵向扩展。选中“标题”选项,将选中单元格的内容格式化为表头格式。表头单元格的内容默认为是粗体并居中。在单元格内插入图像。在第一行、第一列单元格的文字“景点序列”之前单击鼠标。单击“常用”工具栏的“图象”按钮,选择需要插入的图像文件“point01.jpg”,单击“确定”按钮,将图像插入到单
20、元格中。网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格的修饰和嵌套表格的修饰和嵌套 6.1.31表格的修饰表格的修饰操作实例操作实例6-5 按图按图6-14所示的形式修饰图所示的形式修饰图6-1的表格的表格操作步骤:操作步骤:在整个表格的周围设计一个边框,以便将内容包围起来,可以通过插入行和列来实现。(1)在表格的底部和右边添加行与列选中整个表格。在表格“属性”面板中,将现有的行数与列数分别增加1,则表格底部增加1行、表格右侧增加1列。例如,在“行”中输入17、在“列”中输入5。(2)在表格的顶部和左边添加行与列单击第一行中的任意单元格,在“布局”工具栏,单击“在上
21、面插入行”按钮。单击第一列中的任意单元格,在“布局”工具栏,单击“在左边插入列”按钮。插入行和列完成后,如图6-13所示。网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格的修饰和嵌套表格的修饰和嵌套 6.1.3网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格的修饰和嵌套表格的修饰和嵌套 6.1.3(3)设置四周的宽度合并四周的单元格。选中第一列与最后一列,在列“属性”面板的“宽”中,输入确定的宽度值。例如,输入1%。(4)设置单元格背景图像与颜色选中第一行。将视图切换为“拆分”视图。在“代码”窗口的标签内插入background属性,并将属性
22、值设置为准备好的背景图片bg03.jpg。例如:background=./image/bg03.jpg。参照步骤为最后一行的单元格设置相同的背景图像。选中第一列与最后一列。在属性面板的“背景颜色”框中设置背景颜色。例如,输入#6BC7FF。按快捷键Ctrl+S保存网页,按快捷键F12预览网页。如图6-14所示。网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格的修饰和嵌套表格的修饰和嵌套 6.1.3网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格的修饰和嵌套表格的修饰和嵌套 6.1.32表格嵌套表格嵌套嵌套表是指在表格中插入另一个表格。操作实例
23、操作实例6-6 利用嵌套表格完成图利用嵌套表格完成图6-15所示的效果所示的效果网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格的修饰和嵌套表格的修饰和嵌套 6.1.3操作步骤:操作步骤:打开或新建一个网页文件,将网页标题设置为“表格嵌套”。利用“表格”对话框,创建一个3行3列的表格,表格宽度为400像素,边框为0,在表格“属性”面板设置为“居中对齐”。如图6-16所示。单击需要插入第二个表格的单元格。例如,单击第2行第2列的单元格,设置表格插入点。利用“表格”对话框插入第二个表格,设置表格属性为3行、3列、宽度100%、边框为1。嵌套表格形式如图6-17所示。网页设
24、计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格的修饰和嵌套表格的修饰和嵌套 6.1.3分别将第一列与最后一列的单元格合并,并设置宽度为“5%”。分别将第一行与最后一行的单元格合并。利用“代码”视图,分别为外围的合并单元格插入背景图像,例如,插入image文件夹中的文件bg03.jpg。如图6-18所示。网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格的修饰和嵌套表格的修饰和嵌套 6.1.3选中嵌套的内表格的所有单元格,在“属性”面板中将“水平”设置为“居中对齐”,“垂直”设置为“居中”。合并内嵌表格的第一行,在内嵌表格中输入图6-15所示的文字。
25、按快捷键Ctrl+S保存网页,按快捷键F12预览网页。效果如图6-15所示。网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 应用实例应用实例利用表格设计网页利用表格设计网页 6.1.4很多网页设计者喜欢使用表格设计网页的布局。通过表格可以精确地定位网页元素,准确地表达创作意图。操作实例操作实例6-7 利用表格设计如图利用表格设计如图6-19所示的网页所示的网页操作步骤:操作步骤:(1)建立网页文件在本地站点窗口中,新建网页文件example1.html。双击打开该文件,将页面标题设置为“利用表格设计网页”。按快捷键Ctrl+S保存网页。网页设计与制作网页设计与制作6.1
展开阅读全文