网页设计与制作项目式教程 教学课件 作者 凌云项目四项目四 利用表格布局网站首页.ppt

《网页设计与制作项目式教程 教学课件 作者 凌云项目四项目四 利用表格布局网站首页.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、项目四利用表格布局网站首页任务一表格规划页面【知识目标】1.熟悉典型的网页布局的类型2.了解常用的网页布局方法3.了解表格布局规则任务一表格规划页面【技能目标】1.能根据网站功能，选择合适网页布局形式2.能利用表格，合理规划表格布局任务一表格规划页面【项目描述】根据网页美工师提供的GlamorousSky（简称GS）创意家居网站首页平面效果图，如图4-1所示，分析效果图，完成表格规划首页面，并进行效果图切片为制作首页面做准备。图4-1GS创意家居网站首页平面效果图4.1.1项目准备1.常见的网页布局类型“国”字型拐角型标题正文型封面型混合型2.常见的网页布局方法常用的网页布局方法有三种表格布局

2、DIV+CSS布局框架布局3.使用表格布局的一般规则不要把整个网页当成一个大表格，尽量使用分块。一是因为一个大表格的内容要全部加载后才会显示，无疑会降低浏览的速度和效率，二是在单元格的调整时不够方便，往往只想调整某一个单元格，但其他行的单元格也会一起产生联动效果。因此，应尽量考虑分块处理。可以使用嵌套，但一般嵌套不宜超过三层，否则会影响浏览速度，而且在修改表格时，多层嵌套，导致代码过多，增加了修改的难度。作为布局的表格，表格线边框宽度一般设为0，单元格间距设为0，单元格填充距设为0。外表格宽度一般使用固定的像素值，嵌套的表格宽度可使用百分比，这样嵌套表格的宽度就能随被嵌套单元格宽度的变化而变化

3、。4.1.2项目实现1.分析效果图GS创意家居网站首页由4大矩形块由上至下组成依次为LOGO标题及导航栏、广告、网站内容、版本信息，其中网站内容又由3块内容从左至右组成，显然，GS创意家居网站首页的页面布局正是上面提到的“国”字型布局。2.规划布局3.效果图切片4.1.3项目训练下图为热门游戏网站首页，请根据平面效果图，利用表格规划布局，并完成图像切片。任务二利用表格布局页面【知识目标】1.掌握表格创建的方法2.掌握表格嵌套的方法3.掌握对表格的编辑任务二利用表格布局页面【技能目标】1.能根据页面布局图，利用表格实现布局2.会对表格的各种操作任务二利用表格布局页面【项目描述】在网页制作中，简单

4、的页面布局一般用表格实现。上一个任务分析了GS创意家居网站首页效果图，根据效果图，规划了该页面的表格布局图，并制作了用于GS创意家居网站首页的图像素材。本任务根据上一任务的布局图，利用表格实现布局。4.2.1项目准备1.创建表格在DreamweaverCS3中创建表格的方法有以下三种：单击菜单栏【插入记录】，选择【表格】，弹出【表格】对话框。将插入面板切换至【常用】选项卡，单击表格按钮，弹出【表格】对话框。使用快捷键Alt+Ctrl+T，弹出【表格】对话框。2.【表格】属性表格对话框中有以下这些属性：表格宽度：设置表格的宽度，单位有百分比和像素，考虑到不同计算机分辨率不同，因此最外层的表格宽度

5、的单位应使用像素。边框粗细：设置表格边框的宽度，默认为1，一般用于布局的表格是不需要边框的，可将其设为0。单元格边距：设置表格单元格内对象与单元格边框的距离，默认值为3，一般用于布局的表格是不需要边距，此处可设为0。单元格间距：设置表格单元格与单元格之间的距离，默认值为3，一般用于布局的表格是不需要间距，此处可设为0。页面：可以在表格中添加行或者列标题。标题：设置一个显示在表格上的表格标题。对齐标题：设置标题相对于表格的位置，包括默认、顶部、底部、左、右5个选项。摘要：给出表格的说明，在页面编辑时可以读取摘要文本，但是该文本不会显示在用户的浏览器中。用于布局的表格无需设置辅助功能。3.编辑表格

6、选择表格选择整个表格选择整个表格方法一般有以下四种方法：将鼠标置于表格的下/左边缘（或者表格的左上角），此时表格边框变成红色实线，鼠标变成状态（鼠标变成状态），单击即可选中表格。单击表格内任一处，选择菜单栏中的【修改】

7、【表格】，单击【选择表格】命令。在表格左上角的单元格内按住鼠标左键，拖曳至表格右下角单元格，将其中所有的单元格选中，并选择菜单栏中的【编辑】，单击【全选】命令。单击表格内任一处，通过状态栏上的HTML标签来选择表格。选择行与列选择表格的行和列也有以下三种不同的方法：当鼠标位于欲选择表格的行首或列顶时，鼠标变成黑色实心箭头状态，此时单击即可选择行或列。鼠标从一行左至右或者从一列上

8、至下左击拖曳，即选中了行或者列。这种方法只用于选择行。单击欲选择的行的任意一单元格，然后在状态栏中单击即可选中该该单元格所在的行，此方法无法选择列。选择表格选择单元格选择一个单元格的方法有以下三种：在要选择的单元格左击并拖曳，当单元格边框成黑色实线，松开鼠标即选中了该单元格。将鼠标置于要选择的单元格内，按住【shift】键并单击单元格即可将其选择，按住【shift】键可以选择多个不连续的单