Dreamweaver CS5自学教程第五课表格处理解析.docx
- 文档编号:1836103
- 上传时间:2022-10-24
- 格式:DOCX
- 页数:19
- 大小:1.93MB
Dreamweaver CS5自学教程第五课表格处理解析.docx
《Dreamweaver CS5自学教程第五课表格处理解析.docx》由会员分享,可在线阅读,更多相关《Dreamweaver CS5自学教程第五课表格处理解析.docx(19页珍藏版)》请在冰豆网上搜索。
DreamweaverCS5自学教程第五课表格处理解析
第五课:
表格处理
5-1插入表格
1、在页面中插入表格的方式
在页面中需要添加表格的地方单击,选择“插入—表格”
或在常用面板中选择“表格”图标
2、表格设置项
表格宽度设置单位是像素时,表格的宽度是固定的;
单位是百分比时,表格的宽度与浏览器窗口的宽度保持设置的比例,随窗口变化。
3、单元格的边距和间距
边距就是单元格内部内容与单元格边框的距离
间距就是单元格边框与表格边框之间的距离
注:
如果添加表格式单元格边距和间距空白不填数字,那么系统默认的数字就是单元格边距为1,单元格间距为2。
单元格边距和单元格间距分别为0时,表格的边框最细。
5-2创建数据表格
页眉标题功能的设置可以自动加粗单元格内的字体
设置的辅助功能标题是表格在页面中的标题,摘要部分的内容不会显示在网页中。
5-3实例:
明星相册页1
1、表格整体的属性设置
2、表格“行”的属性设置
3、单元格属性设置
注:
单元格的宽的单位可以是像素,也可以是百分比。
5-4实例:
明星相册页2
1、表格边框颜色的设置
选中边框,右击显示快捷菜单,选择“编辑标签”
在“标签编辑器”中编辑表格边框的颜色;表格的背景颜色在“常规”项中用同样的方式设置。
2、表格中行的背景颜色设置在下方的属性栏即可,列背景颜色的设置与行相同
3、加入网页页面的图片较多时,可以全部选中图片用拖拽的方式加入网页,再细分。
4、软件中的操作版面受限时,可调整版面的视图比例。
5-5实例:
课程表15-6实例:
课程表2
1、单元格的拆分和合并
2、插入行:
在需要插入行的表格最前边单击,然后右击出现快捷菜单,如下
或者用下边的方式批量插入
3、按住Ctrl键拖动,可以复制
1、单元格背景图片的一种添加方式:
在代码中按空格键设置
2、单元格的边框颜色需要在代码中设置:
在代码中按空格键设置
5-7表格的HTML标记
1、表格的代码标记
2、表格每行的代码标记
3、单元格的代码标记
4、每一对表格标记后边都可以添加属性特征
5、也可以在代码标记选择器处快捷选择
5-8实例:
软件下载页1
三、表格嵌套
1.概念:
就是在表格的单元格中再插入表格,形成嵌套的结构。
或者就是说在已有的表格中再创建表格。
2.步骤
A:
光标定位到需要插入嵌套表格的单元格里
B:
按照插入表格的方式,插入新的表格
实例一:
下载页面
要求:
1、背景图片为bg.gif
2.单元格颜色#33B3F0和#C8EAFB
1、设置表格的细边框,单元格背景颜色设置为不同于边框的一种颜色
①、选中表格,边框设置为0
②、间距设置为1
③、选中表格右击,选择“编辑标签”
设置背景颜色,确定
5-9实例:
软件下载页2
表格嵌套的添加(表中表),与表格添加方式相同
5-10实例:
个人简历页15-11实例:
个人简历页2
表格在网页中的视图,默认情况下表格的显示是以“标准”的模式显示的;我们为了在网页设计中更见直观的显示表格,可以利用“扩展”模式显示
5-12网页的布局
四、应用表格布局页面
1)、类型:
网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型。
A、国字型
B拐角型
C正文型
D左右框架型
EFlash型
2、页面的构成
1)网页尺寸
根据屏幕分辨率的大小设计网页的宽度。
一般如果屏幕分辨率为800*600那么设计网页的尺寸为780*428,如果屏幕分辨率为1024*768,那么设计页面尺寸为980*600
2)页头(页眉)
通常放置logo(网站标志)和banner(广告条)
3)页脚
放置版权信息、联系电话、网站介绍、备案信息等等。
5-13布局综合实例1(页眉)
1、从页面属性中设置网页的左边距和右边距可以消除网页下边的导航条
2、在网页设计中,对于需要添加图片的位置可以先插入图像占位符,后期加入图片
5-14布局综合实例2(导航栏)
1、网页设计中,表格嵌套式,表格的宽度按百分比插入,不设置具体数值
2、表格的背景图片一般采用较小的图片平铺,可以节省流量,提高网页下载速度
5-15布局综合实例3(信息栏)
设置表格嵌套中单元格边框的一种方式
1、先把外部表格的边框宽度设置为“1”,颜色设置为白色
2、选择内部单元格,在代码(或下方属性面板)设置想要的边框颜色,保存
5-16布局综合实例4(页脚)
1、单元格的高度设置比较小时,必须把单元格代码中的空格符号删除才有效果
2、为了保证网页文本布局格式在任何比例下不变形混乱,需要不网页的字体进行统一的设置
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Dreamweaver CS5自学教程第五课表格处理解析 CS5 自学 教程 第五 课表 处理 解析