Dreamweaver CS5自学教程-第五课：表格处理(6页).doc

《Dreamweaver CS5自学教程-第五课：表格处理(6页).doc》由会员分享，可在线阅读，更多相关《Dreamweaver CS5自学教程-第五课：表格处理(6页).doc（6页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、-Dreamweaver CS5自学教程-第五课：表格处理-第 6 页第五课：表格处理5-1 插入表格1、在页面中插入表格的方式在页面中需要添加表格的地方单击，选择“插入表格”或在常用面板中选择“表格”图标2、表格设置项表格宽度设置单位是像素时，表格的宽度是固定的；单位是百分比时，表格的宽度与浏览器窗口的宽度保持设置的比例，随窗口变化。3、单元格的边距和间距边距就是单元格内部内容与单元格边框的距离间距就是单元格边框与表格边框之间的距离注：如果添加表格式单元格边距和间距空白不填数字，那么系统默认的数字就是单元格边距为1，单元格间距为2。单元格边距和单元格间距分别为0时，表格的边框最细。5-2 创

2、建数据表格页眉标题功能的设置可以自动加粗单元格内的字体设置的辅助功能标题是表格在页面中的标题，摘要部分的内容不会显示在网页中。5-3 实例：明星相册页11、表格整体的属性设置2、表格“行”的属性设置3、单元格属性设置注：单元格的宽的单位可以是像素，也可以是百分比。5-4 实例：明星相册页21、表格边框颜色的设置选中边框，右击显示快捷菜单，选择“编辑标签”在“标签编辑器”中编辑表格边框的颜色；表格的背景颜色在 “常规”项中用同样的方式设置。2、表格中行的背景颜色设置在下方的属性栏即可，列背景颜色的设置与行相同3、加入网页页面的图片较多时，可以全部选中图片用拖拽的方式加入网页，再细分。4、软件中的

3、操作版面受限时，可调整版面的视图比例。5-5 实例：课程表1 5-6 实例：课程表21、单元格的拆分和合并2、插入行：在需要插入行的表格最前边单击，然后右击出现快捷菜单，如下或者用下边的方式批量插入3、按住Ctrl键拖动，可以复制1、单元格背景图片的一种添加方式：在代码中按空格键设置2、单元格的边框颜色需要在代码中设置：在代码中按空格键设置5-7 表格的HTML标记1、表格的代码标记2、表格每行的代码标记3、单元格的代码标记4、每一对表格标记后边都可以添加属性特征5、也可以在代码标记选择器处快捷选择5-8 实例：软件下载页1三、表格嵌套1概念：就是在表格的单元格中再插入表格，形成嵌套的结构。或

4、者就是说在已有的表格中再创建表格。2步骤 A：光标定位到需要插入嵌套表格的单元格里B： 按照插入表格的方式，插入新的表格实例一：下载页面要求：1、背景图片为bg.gif 2. 单元格颜色 #33B3F0和 #C8EAFB1、设置表格的细边框，单元格背景颜色设置为不同于边框的一种颜色、选中表格，边框设置为0、间距设置为1、选中表格右击，选择“编辑标签”设置背景颜色，确定5-9 实例：软件下载页2表格嵌套的添加(表中表)，与表格添加方式相同5-10 实例：个人简历页1 5-11 实例：个人简历页2表格在网页中的视图，默认情况下表格的显示是以“标准”的模式显示的；我们为了在网页设计中更见直观的显示表

5、格，可以利用“扩展”模式显示5-12 网页的布局四、应用表格布局页面1）、类型：网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型。A、国字型B拐角型C正文型D左右框架型E Flash型2、页面的构成1）网页尺寸 根据屏幕分辨率的大小设计网页的宽度。 一般如果屏幕分辨率为800*600 那么设计网页的尺寸为780*428，如果屏幕分辨率为1024*768，那么设计页面尺寸为980*6002）页头（页眉） 通常放置logo（网站标志）和banner（广告条）3）页脚放置版权信息、联系电话、网站介绍、备案信息等等。5-13 布局综合实

6、例1（页眉）1、从页面属性中设置网页的左边距和右边距可以消除网页下边的导航条2、在网页设计中，对于需要添加图片的位置可以先插入图像占位符，后期加入图片5-14 布局综合实例2（导航栏）1、网页设计中，表格嵌套式，表格的宽度按百分比插入，不设置具体数值2、表格的背景图片一般采用较小的图片平铺，可以节省流量，提高网页下载速度5-15 布局综合实例3（信息栏） 设置表格嵌套中单元格边框的一种方式1、先把外部表格的边框宽度设置为“1”，颜色设置为白色2、选择内部单元格，在代码（或下方属性面板）设置想要的边框颜色，保存5-16 布局综合实例4（页脚）1、单元格的高度设置比较小时，必须把单元格代码中的空格符号删除才有效果2、为了保证网页文本布局格式在任何比例下不变形混乱，需要不网页的字体进行统一的设置