公开课 网页制作之表格布局页面

网页制作之表格布局页面计算机部方辉复习旧课Web站点和网页复习旧课问题：如何建立站点？操作练习导入新课1．掌握表格的创建方法和表格的属性设置。2．学会使用表格布局页面的方法和技巧。教学目标教学提纲1．表格布局

掌握表格的创建方法和表格的属性设置。2．项目任务

学会使用表格布局页面的方法和技巧。边学边练：在游泳中学会游泳！讲授新课一、表格布局为了使网页更加美观大方，在制作网页时，需要先对网页的轮廓进行规划，将文字、图片等网页元素进行精确定位，这就需要用到网页的布局。表格布局是目前最常见的网页布局方式之一，它灵活方便、简单易学。熟练地使用表格布局是网页制作的基本要求。1．表格的组成2．创建表格（1）创建表格（2）创建嵌套表格创建嵌套表格就是在已有表格的某单元格中插入新的表格。使用表格的嵌套可以使大量的网页元素进行复杂的定位，从而整齐地展示在浏览者面前，在新浪、网易等综合性网站中都被普遍使用。3．选择表格元素要在表格中进行操作，首先需要选择表格元素，即选择整个表格、行、列和单元格。（1）选择整个表格（2）选择行（3）选择列（4）选择单元格4．设置表格属性

（1）设置表格的属性

（2）设置单元格的属性5．表格的基本操作（1）调整表格的大小（2）调整行高和列宽（3）插入行或列（4）删除行或列（5）合并和拆分单元格6．常见页面布局

网页导航（分类菜单）网页导航（分类标题）网页内容网页导航（分类标题）网页版权信息操作练习二、项目任务：时尚杂志网页1．网页效果2．项目素材3．操作流程（1）、建立文件夹（2）、建立站点（3）、分析网页效果图：素材位置、素材类型、页面大小、网页标题（4）、记录素材大小，如图像大小尺寸（5）、计算图像大小进行拼图设计表格（6）、表格嵌套技巧：由外而内，越简单越好，根据图片大小设置单元格宽和高。边设置单元格大小边插入图片，边插入图片边嵌套插入新的表格。（7）、初始表格插入，行列数越小越好，表格宽度输入最大图片宽度800，边框粗细0，单元格边距0，单元格间距0。对齐方式为居中对齐。3．操作流程（8）、后续表格插入与初始表格插入类似，表格宽度可以不设，也可以输入与其相关的最大图片宽度。（9）、可以边预览边修改。修改的重点在于图片大小与单元格大小、图片数量与表格行列设置。（10）、不要期待一次成功，要反复多试。熟能生巧，学习的不是知识，而是要练习出能力。（11）、保存预览。“文件”→“在浏览器中预览”4．实际操作（1）、建立文件夹（2）、建立站点（3）、分析网页效果图：素材位置、素材类型、页面大小、网页标题（4）、记录素材大小，如图像大小尺寸（5）、计算图像大小进行拼图设计表格（6）、表格嵌套技巧：由外而内，越简单越好，根据图片大小设置单元格宽和高。边设置单元格大小边插入图片，边插入图片边嵌套插入新的表格。（7）、初始表格插入，行列数越小越好，表格宽度输入最大图片宽度800，边框粗细0，单元格边距0，单元格间距0。对齐方式为居中对齐。（8）、后续表格插入与初始表格插入类似，表格宽度可以不设，也可以输入与其相关的最大图片宽度。（9）、可以边预览边修改。修改的重点在于图片大小与单元格大小、图片数量与表格行列设置。（10）、不要期待一次成功，要反复多试。熟能生巧，学习的不是知识，而是要练习出能力。（11）、保存预览。“文件”→“在浏览器中预览”操作练习巩固复习操作关键1、网页效果及素材分析素材位置、素材类型、页面大小、网页标题、素材大小（如图像大小尺寸）2、表格嵌套技巧由外而内，越简单越好，根据图片大小设置单元格宽和高。边设置单元格大小边插入图片，边插入图片边嵌套插入新的表格。

初始表格插入，行列数越小越好，表格宽度输入最大图片宽度800，边框粗细0，单元格边距0，单元格间距0。对齐方式为居中对齐。后续表格插入与初始表格插入类似，表格宽度可以不设，也可以输入与其相关的最大图片宽度。3、修改技巧可以边预览边修改。修改的重点在于图片大小与单元