项目四利用表格布局网站首页资料.pptVIP

项目四 利用表格布局网站首页 任务一 表格规划页面 【知识目标】 1.熟悉典型的网页布局的类型 2.了解常用的网页布局方法 3.了解表格布局规则 任务一 表格规划页面 【技能目标】 1.能根据网站功能，选择合适网页布局形式 2.能利用表格，合理规划表格布局 任务一 表格规划页面 【项目描述】 创意家居网站首页平面效果图，如图4-1所示，分析效果图，完成表格规划首页面，并进行效果图切片为制作首页面做准备。 4.1.1 项目准备 1.常见的网页布局类型 “国”字型 拐角型 标题正文型 封面型 混合型 2.常见的网页布局方法 常用的网页布局方法有三种 表格布局 DIV+CSS布局 框架布局 3.使用表格布局的一般规则 不要把整个网页当成一个大表格，尽量使用分块。一是因为一个大表格的内容要全部加载后才会显示，无疑会降低浏览的速度和效率，二是在单元格的调整时不够方便，往往只想调整某一个单元格，但其他行的单元格也会一起产生联动效果。因此，应尽量考虑分块处理。 可以使用嵌套，但一般嵌套不宜超过三层，否则会影响浏览速度，而且在修改表格时，多层嵌套，导致代码过多，增加了修改的难度。 作为布局的表格，表格线边框宽度一般设为0，单元格间距设为0，单元格填充距设为0。外表格宽度一般使用固定的像素值，嵌套的表格宽度可使用百分比，这样嵌套表格的宽度就能随被嵌套单元格宽度的变化而变化。 4.1.2 项目实现 1.分析效果图 家居网站首页由4大矩形块由上至下组成依次为LOGO标题及导航栏、广告、网站内容、版本信息，其中网站内容又由3块内容从左至右组成，显然，GS创意家居网站首页的页面布局正是上面提到的“国”字型布局。 2.规划布局 3.效果图切片 任务二 利用表格布局页面 【知识目标】 1.掌握表格创建的方法 2.掌握表格嵌套的方法 3.掌握对表格的编辑 任务二 利用表格布局页面 【技能目标】 1.能根据页面布局图，利用表格实现布局 2.会对表格的各种操作 任务二 利用表格布局页面 【项目描述】 在网页制作中，简单的页面布局一般用表格实现。上一个任务分析了家居网站首页效果图，根据效果图，规划了该页面的表格布局图，并制作了用于家居网站首页的图像素材。本任务根据上一任务的布局图，利用表格实现布局。 4.2.1 项目准备 1.创建表格 在Dreamweaver CS6中创建表格的方法有以下三种： 单击菜单栏【插入记录】，选择【表格】，弹出【表格】对话框。 将插入面板切换至【常用】选项卡，单击表格按钮，弹出【表格】对话框。 使用快捷键Alt+Ctrl+T，弹出【表格】对话框。 2.【表格】属性 表格对话框中有以下这些属性： 表格宽度：设置表格的宽度，单位有百分比和像素，考虑到不同计算机分辨率不同，因此最外层的表格宽度的单位应使用像素。 边框粗细：设置表格边框的宽度，默认为1，一般用于布局的表格是不需要边框的，可将其设为0。 单元格边距：设置表格单元格内对象与单元格边框的距离，默认值为3，一般用于布局的表格是不需要边距，此处可设为0。 单元格间距：设置表格单元格与单元格之间的距离，默认值为3，一般用于布局的表格是不需要间距，此处可设为0。 页面：可以在表格中添加行或者列标题。 标题：设置一个显示在表格上的表格标题。 对齐标题：设置标题相对于表格的位置，包括默认、顶部、底部、左、右5个选项。 摘要：给出表格的说明，在页面编辑时可以读取摘要文本，但是该文本不会显示在用户的浏览器中。 用于布局的表格无需设置辅助功能。 3.编辑表格 选择表格 选择整个表格 选择整个表格方法一般有以下四种方法： 将鼠标置于表格的下/左边缘（或者表格的左上角），此时表格边框变成红色实线，鼠标变成状态（鼠标变成状态），单击即可选中表格。 单击表格内任一处，选择菜单栏中的【修改】|【表格】，单击【选择表格】命令。 在表格左上角的单元格内按住鼠标左键，拖曳至表格右下角单元格，将其中所有的单元格选中，并选择菜单栏中的【编辑】，单击【全选】命令。 单击表格内任一处，通过状态栏上的HTML标签来选择表格。 选择行与列 选择表格的行和列也有以下三种不同的方法： 当鼠标位于欲选择表格的行首或列顶时，鼠标变成黑色实心箭头状态，此时单击即可选择行或列。 鼠标从一行左至右或者从一列上至下左击拖曳，即选中了行或者列。 这种方法只用于选择行。单击欲选择的行的任意一单元格，然后在状态栏中单击tr即可选中该该单元格所在的行，此方法无法选择列。 选择表格 选择单元格 选择一个单元格的方法有以下三种： 在要选择的单元格左击并拖曳，当单元格边框成黑色实线，松开鼠标即选中了该单元格。 将鼠标置于要选择的单元格内，按住【shift】键并单击单元格即可将其选择，按住【shift】键