网页设计-5.ppt

《网页设计-5.ppt》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、表格应用页面布局设计应用篇应用布局模式作业框架应用层应用页面布局设计创建网页表格应用应用布局模式框架应用层应用网页是在网站上显示的基本页面利用“页面属性”命令设置页面的整体格式利用“属性”面板设置页面各个对象的格式插入文本数据普通文字输入或粘贴特殊文字利用“插入/文本/字符”对象导入外部数据（文件/导入……）插入多媒体数据页面布局设计创建网页定位页面元素（如：页面分栏、文本和图像等）创建表格（插入/表格）利用“属性”面板设置表格对象格式在已有的表格中，单击鼠标右键，通过“快捷”菜单中的“表格”命令编辑表格。页面布局设计表格

2、应用当前插入点示例表格提示框间距边框①设置表格属性创建表格（插入/表格）选定表格编辑表格表格嵌套为表格添加内容表格格式化表格排序应用示例②表格基本操作页面布局设计Dreamweaver提供了标准视图和布局视图两种创建表格方式来设计页面布局，前面介绍的即是在标准视图下创建表格的应用。布局模式是指用可视化的方法在页面上绘制复杂的表格，可以在布局模式下任意地绘制表格，在表格中也可以任意地绘制单元格，给网页设计工作带来极大的方便，比在标准视图下使用表格更具有灵活性。应用布局模式在默认的情况下，文档窗口是以标准模式显示的。要使用布局

3、视图，必须首先从Dreamweaver的标准视图模式进入到布局视图模式。①进入布局模式句炳插入点嵌套表格指向单元格时移动表格时应用示例②编辑表格或单元格应用示例在一新页面中插入一个3列的布局表格，其中左单元格使用固定像素，设置宽度为100；中间单元格使用百分比进行设置为“自动伸展”；右端单元格也使用固定像素，设置宽度为200。在左端单元格存放一幅宽度为100的图片、右端存放一幅宽度为200的图片，而在中间单元格存放一个文本文件。也就是说，将固定大小内容的对象放置到固定宽度的单元格中，不需要固定宽度的内容放到中间可变的宽度的

4、单元格中。这样就可以实现不同浏览器下动态调整页面内容，使页面达到最佳浏览效果。③利用自动伸展特性框架可以将浏览器窗口分割成不同的区域创建框架（文件/新建文档/常规-框架集）框架中的每一个区域都是一个独立的页面整个框架由一个主文件控制保存框架（主控文件和各个框架文件）选中某个框架（按下Alt+单击区域）添加或删除框架（拖拽边线）在框架中打开文档（文件/在框架中打开）页面布局设计框架应用①创建框架示例框架边框分割线topFramemainFrameleftFrame具有一个上方固定、左侧嵌套的3个框架结构的框架集。由于在框架集

5、中的每个框架都是一个独立的页面，所以一个框架集可以包含若干个文档文件，创建好框架集后需要将每个框架保存成一个个独立的HTML文件和一个框架集文件（通常为index.html或index.htm）。然后就可以在这些独立的文件中创建页面内容了。Dreamweaver提供了多种保存框架页面的相关命令，随着用户当前的状态不同，给出的保存命令也有所不同。在执行保存命令之前，首先要选中要保存的对象。通常，一个框架集具有n+1个文件。②保存框架输入框架文件名提示保存的框架示例框架集建立后，就可以往各个框架的区域存放内容了。只要在文档窗口

6、中的任意一个框架里单击一下就可置当前插入点为该框架内，然后就可以象编辑一般的页面一样，插入各种各样的文本、图片等网页元素。当然，也可以直接打开某个框架文件独立进行页面编辑制作。③添加内容④设置框架或框架集属性层应用层是网页制作特色功能之一，提供了强大的网页控制能力，可以精确定位Web页面的各个元素。层是网页中的一个区域，一个网页中可以有多个层，其特点是各个层之间可以重叠，并可以决定每个层是否可见，也可以定义各层之间的层次关系。层的运用使创作者在处理图像时能够在多个“画布”上进行，从而大大提高创作者的工作效率，同时使创作出的

7、作品效果更加丰富。层技术属于动态HTML范畴，只有4.0版本以上的浏览器才支持。页面布局设计页面对象按顺序一张张叠放在一起，以垂直方向组合起来形成页面的最终效果即为层。创建图层（插入/布局对象/层）典型应用（在对象上叠放flash动画）①基本知识200115②创建层③设置层属性层创建好后，就可以在层中添加对象，如文字、图像等，其操作方法与插入对象相同。单击层『边框』，可以选中层；当鼠标指针放到层边框线上指针变为十字时，按住鼠标左键可以拖动层，将其放置页面任何位置。拖动层四周的小方块，调整层的大小。④添加对象示例层应用示例：

8、创建对象透明效果题目：在标题图片文字上添加动画效果创建一新页面，保存为“ex-1.htm”；在文档中插入标题图片；在文档中插入一个图层；在图层中插入“星星闪烁”动画；设置层对象透明效果；预览即可看到实际效果。步骤一：插入图片步骤二：插入图层步骤三：插入动画移动图层到图片合适位置步骤四：设置动画透明效果预