第5篇 表格布局.pptVIP

《网页制作基础教程（Dreamweaver CS4）》电子教案 第四章　表格处理 　　本章重点： 表格的基本操作 应用表格布局（标准视图下） 布局表格视图的使用 第四章　表格处理 5.1??应用表格布局页面——明星相册 ? 5.2??页面布局理论 5.3??表格基本操作 5.4 布局案例 5.1??应用表格布局页面——足球明星? 5.1.1 案例综述 表格是用于在HTML页上显示表格式数据，以及对文本和图形进行布局的强有力工具。 足球明星photo.html，通过表格进行布局排版，从而使照片整齐的显示于页面之中。 5.1??应用表格布局页面——足球明星? 5.1.2 案例分析 　　　“足球明星”页面Photo.htm是采用表格布局，将图片的排列在表格的单元格中，再加上图片说明。从中可使读者掌握： 表格的创建 表格及单元格的属性设置 表格进一步的修改和美化 表格的编辑 表格的嵌套 5.1??应用表格布局页面——足球明星? 5.1.3 实现步骤 1、制作相册页面 方法： （1）页面属性设置。 （2）页眉制作。 （3）主要信息显示区域表格设计 （4）插入图片并添加说明文字 （5）制作版权信息 5.1??应用表格布局页面——足球明星? 5.1.3 实现步骤 2．相册表格的美化 方法： （1）设置边框线 （2）设置单元格背景色 5.2??页面布局理论 5.2.1网页布局原则 网页布局设计是有原则的，无论使用何种手法对画面中的元素进行组合，都一定要遵循主要的三个大的原则：连贯、统一、分割。 第一 连贯，是指要注意页面的相互关系。 第二 统一，是指网页设计作品的整体性，一致性。 第三 分割，是指将页面分成若干小块，小块之间有视觉上的不同，这样可以使观者一目了然。 5.3??页面布局理论 5.2.2 网页布局类型 5.3??页面布局理论 5.2.2 网页布局类型 5.3??页面布局理论 5.2.2 网页布局类型 5.3??页面布局理论 5.2.2 网页布局类型 5.3??页面布局理论 5.2.2 网页布局类型 5.3??页面布局理论 5.2.2 网页布局类型 5.3??页面布局理论 5.2.3 页面构成 1. 页面尺寸： 分辨率为800×600：页面的显示尺寸为：780×428个象素； 分辨率为1024×768：页面的显示尺寸为：1007×600。 5.3??页面布局理论 5.2.3 页面构成 2. 页头 页头又可称之为页眉，页眉的作用是定义页面的主题。 页头常放置站点名字的图片（Logo）和公司标志以及旗帜广告（Banner）。 5.3??页面布局理论 5.2.3 页面构成 3. 页脚： 页脚和页头相呼应。页头是放置站点主题的地方，而页脚是放置制作者或者公司信息的地方，称为版权信息。 4. 导航栏 导航栏能让人们在浏览时方便地到达不同的页面，是网页元素非常重要的部分，所以导航栏一定要清晰、醒目，一般来讲，导航栏要在第一屏能显示出来。 5.3??页面布局理论 表格布局要领 在IE中只有当完全下载一个表格的内容后，才能显示出来。 如果页面文件小，可以只有一个表格放内容。 如果页面文件很大，则从上到下放几个宽度相同的表格，分别放不同的内容. 5.3??页面布局理论 5.2.4 页面布局方法 网页布局的方法有两种，第一种为纸上布局；第二种为软件布局。 1.纸上布局法 在开始制作网页时，要先在纸上画出你页面的布局草图来。 2.软件布局法 可以利用软件来完成布局。如Photoshop,Photoshop所具有的对图像的编辑功能用到设计网页布局上更显得心应手。 5.3??页面布局理论 5.2.5 页面布局技术 1. 表格布局 表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响。而且表格在定位图片和文本上比起用CSS更加方便。表格布局唯一的缺点是，当你用了过多表格时，页面下载速度受到影响。 2. 框架布局 框架可以把多个页面有机的整合在一起，它如同表格布局一样，把不同对象放置到不同页面加以处理，因为框架可以取消边框，所以一般来说不影响整体美观. 3. DIV+CSS布局 DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。 5.3??表格的基本操作 5.3.1 插入表格 　　　【插入】｜【表格】命令，或单击【插入】栏中的【常用】类型中的【插入表格】按钮 　理解表格、单元格： 5.3??表格的基本操作 5.3.