《网页页面布局》ppt课件

《《网页页面布局》ppt课件》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、网页设计与制作第1章网页设计概述第2章HTML语言基础第3章Dreamweaver基础第4章网页中的基础元素第5章网页页面布局第6章网页中的层和时间轴第7章表单的应用第8章在网页中使用行为第9章CSS样式使用第10章网页中的多媒体应用第11章模板和库第12章站点测试和发布第13章Flash简介第14章Fireworks简介$[知识目标]掌握表格及单元格的创建和编辑掌握通过表格来进行网页页面的布局方法掌握建立框架网页及框架属性设置的方法8[能力目标]熟练掌握表格的基本操作熟练运用表格进行网页布局熟练运用框架进行网页的布局第5章网页页面布局第5章网页页面布

2、局网页页面布局主要技术：框架：大概布局表格：简略布局层：精细布局CSS+DIV布局:样式布局CSS+DIV布局具有易维护,易整体控制网站,易见效网页大小,易节省流量,易推广等优势。5.1表格5.2表格布局5.3框架布局本章小结第5章网页页面布局5.1表格5.1.1插入表格5.1.2添加内容5.1.3选择表格5.1.4设置表格属性5.1.5编辑表格的基本操作在表格中横向为行，纵向为列。行列交叉部分就叫做单元格。单元格中的内容和边框之间的距离叫边距。单元格和单元格之间的距离叫间距。表格的边线叫做边框。（一）插入表格1．定位光标在要插入表格的位置，然后执行以

3、下操作之一：•单击菜单栏中的“插入”

4、“表格”命令。•在“插入”栏的“常用”类别中，单击“表格”按钮。2．打开表格对话框。5.1.1插入表格5.1表格5.1.1插入表格3．单击“确定”创建表格插入“4行5列”的表格。5.1表格（二）插入嵌套表格1．将光标定位在表格的一个单元格内。2．执行插入表格的操作，即可在表格内嵌套表格如图。5.1.1插入表格5.1表格将插入点定位在表格内，即可输入文本、图像、动画等网页元素。5.1.2添加内容5.1表格(一)选择整个表格选择整个表格执行以下操作之一：•单击表格的左上角、右边或底部边缘的任意位置。•单击表格单元格，在

5、菜单栏单击“修改”

6、“表格”

7、“选择表格”命令。(二)选择行或列1．鼠标指向行的左边缘或列的上边缘，光标变为或。2．单击鼠标则选择鼠标指向的行或列。3．拖动鼠标，则选择连续的多行或多列。4．按Ctrl同时单击鼠标，则可选择不连续的多行或多列。5.1.3选择表格5.1表格(三)选择单元格1.选择单个单元格，请执行以下操作之一：•单击单元格，然后在文档窗口左下角的标签选择器中选择标签.•在单元格内双击鼠标则可选择该单元格。•在单元格内单击，然后按组合键Ctrl+A。2．选择连续的多个单元格可以执行以下操作之一：•单击第一个单元格，按住Shift键的

8、同时单击另一个单元格，两个单元格之间的矩形区域内所有的单元格均被选中。•在一个单元格中单击并拖动鼠标横向或纵向移动到其他一个单元格，然后松开鼠标则鼠标经过区域的单元格被选中。3．按Ctrl同时单击单元格则可选择不相邻的多个单元格。5.1.3选择表格5.1表格（一）表格属性表格被选中之后，可以利用表格属性来设置或修改表格的属性。（二）单元格属性单元格被选中或光标定位在单元格中时，可以利用单元格属性，来设置或修改单元格的属性。5.1.4设置表格属性5.1表格(一)调整表格的大小：1．选择整个表格，在表格的边缘出现3个黑色控制点。2．执行以下操作：•用鼠标拖

9、动这些控制点则可改变表格的大小。•在表格“属性检查器”中重新设置“高度”与“宽度”值，改变表格的大小。（二）调整行高和列宽1．将鼠标移到要调整的行高或列宽的边框上，光标变为或。2．拖动鼠标即调整行高或列宽。5.1.5编辑表格的基本操作5.1表格（三）合并或折分单元格1．拆分单元格（1）选择（或将光标定位在）要拆分的单元格。（2）执行以下操作之一：•单击菜单栏中的“修改”

10、“表格”

11、“拆分单元格”命令。•在“属性检查器”中，单击“拆分单元格”的按钮。(3)打开拆分单元格对话框如图。（4）在这可以选择拆分行还是拆分列，以及设置拆分的行数或列数。如设置拆分为

12、“行”，行数为“2”。（5）单击确定，单元格被拆分。5.1.5编辑表格的基本操作5.1表格2．合并单元格（1）选择需要进行合并的两个以上单元格。（2）执行以下操作之一：•单击菜单栏“修改”

13、“表格”

14、“合并单元格”命令•在“属性检查器”中，单击“合并单元格”按钮。（3）选的单元格被合并。5.1.5编辑表格的基本操作5.1表格（四）插入和删除行或列1．插入单行或单列在所选择的行、列或单元格的上面及左侧插入单行或单列，操作如下：（1）选择行、列或单元格。（2）单击菜单栏中的“修改”

15、“表格”

16、“插入行”或“插入列”命令。•选择“插入列”命令：可以在所选列的

17、左侧添加一列。•选择“插入行”命令：可以在所选行的上面添加一行。5.1.5编辑表格的基本操作5