第四章 设计页面布局.pptVIP

设计页面布局 第四章 教学目标: 　　　通过本节课的学习，学生基本掌握如何插入表格，设 置表格属性，表格的作用及运用表格布局整个网页。 教学重点： 1、创建表格（重点）2、修改表格属性（重点、难点）3、表格的其它几类属性（重点）4、特殊表格的制作（难点）5、表格的嵌套（重点）6、表格布局网页（重点、难点） 任务一 表格的基本操作 讲解演示 一、创建表格 　1.方法： 1在“常用”插入面板中单击“表格”按钮 2选择“插入”?“表格”命令 　 3快捷键ctrl+Alt+T 　4通过自定义收藏夹 ２．属性设置： 单元格边距:确定单元格边框和单元格内容之间的像素数 单元格间距:确定相邻的表格单元格之间的像素数 ３．修改表格属性 （1）选中整个表格：用鼠标靠近表格边框，光标变为双向箭头点击左键 （2）移动表格：光标变为表格状时拖动 （3）选择单元格：光标移到表格边框外变为单向箭头击左键，快捷方式光标放在要选择单元格内，按住ctrl键击左键 （4）修改整个表格属性 （5）修改单元格属性 4. 导入数据 　 (1) 导入Ｅxcel表格 文件－导入－Excel文档 (2) 导入Word表格 文件－导入－Word文档 (3) 导入表格数据 　　文件－导入－表格式数据 插入－表格对象－导入表格式数据 (4) 属性设置 任务 二 网页布局 一:网页的类型 “国”字型 拐角型 标题正文型 左右框架型 5. 上下框架型 　　说明: 整个网页由三个表格组成。 第一个表格，二行一列，第一行放LOGO和Banner,第二行放导航菜单。 中间一个表格，一行二列，里面再分别插入两个表格，左边表格放导航或者图片，右边表格放网页内容。典型的二分栏结构。 最下面一个表格，一行一列，放版权声明。 四: 导航栏的设计 导航栏在网页的设计中，直接关系到使用网页的方便，和整个网页的美观也有很大关系 1. 一般用“|”分隔; 2. 如果内容很多兼顾美观,则使用弹出式菜单 3. 如果是个人网站，内容较少，可以使用尺寸 较大的图片作菜单 4. 现在使用较多的是用按钮做导航。 六：导航条 1. 插入导航条 　　可以输入或插入－＞图象对象－＞导航条 2. 修改导航条 选择“修改”“导航条”。 七：布局视图的使用 在“布局”模式下 可以在添加内容前使用布局单元格和表格来对页面进行布局，包括嵌套在其他表格中的表格。 1. 绘制布局表格 A. 在布局视图下，选择布局表格 B. 布局表格可以嵌套但不可以重叠 C. 如何绘制多个布局表格 2.绘制布局单元格 A. 在布局视图下，选择布局单元格 C. 如何绘制多个布局单元格 归纳总结: 本课程介绍了表格的使用方法。介绍了表格的插入方法，以及表格的属性设置。表格的选择，以及表格的嵌套方法和使用。 巩固考核: 1. 什么是表格？ 2. 表格在网页设计中的作用 3. 如何插入表格 4. 如何设置表格属性 5. 如何使用表格布局 * 安徽新华电脑学院 http:// 网页三剑客之 　　　deamweaver 授课：王良侠 5.细线表格的制作 方法 一： 设置“边框”:0;“单元格间距”:1,然后给整个表格填充背景色（想要的表格边框颜色）再选择每个单元格填充背景色（颜色和页面的背景色相同） 方法 二： 设置边框:1; 边框颜色暗=“背景色” 边框颜色亮=“边框色” 6. 综合框架型 7. 封面型 8、Flash型 9、变化型 二:网站结构 网页一个简单的网页是由LOGO（标志），Banner（横幅），导航栏，导航菜单，网页内容，版权声明。 如下图所示: 五: 导航栏的分布 1. 竖排的 2. 横排的 3. 横排坚排均有的： 5.弹出式菜单 * 安徽新华电脑学院 http:// 网页三剑客之 　　　deamweaver 授课：王良侠