页面元素布局设计.ppt

创建一个没有框架的网页，如下图 * 将光标定位在右边的单元格中，单击”插入记录”“HTML”“框架”，选择”IFRAME”选项，此时，视图切换到”代码”视图状态，代码中光标所在的位置出现一对iframe/iframe标签，如下图。 * 将光标定位在起始iframe标签中，按空格键在弹出的列表项中选择”width”项，并设置width的值为606，width代表浮动框架的宽度。类似方法还可以设置name、height和src等属性，完成后的代码如下。 iframe name=“ifm” align=“middle” frameborder=“1” scrolling=“auto” width=“606” height=“311” src=“main.html”/iframe。 * 用鼠标选择左边表格中的”系部概况”文本，设置超链接至xbgk.html，在”目标”文本域中输入浮动框架的名称”ifm”。然后再选中”机构设置”文本，同理设置超链接至jgsz.html，在”目标”文本域中输入浮动框架的名称”ifm”。保存网页，按F12在浏览器中浏览，如下图。 * * 当单击”系部概况”链接时会发现xbgk.html页面会出现在名称为”ifm”的浮动框架中，如下图所示。 * 本章内容完！ * 第4章页面元素定位技术 * 目录 1、用表格定位页面元素 2、使用层定位页面元素 3、创建框架页面 4、单元同步练习 * 4 页面元素定位技术 要设计一个页面，就要涉及到很多页面元素，例如图像、文本、表格、动画、视频等等。如何将这些页面元素有机的组合起来，达到满意的视觉效果，这不仅需要页面元素有自身的特点，还必须把这些元素放在合适的位置上，这就是页面元素的定位，或称页面布局。 目标： 在本单元的学习中我们将具体介绍Dreamweaver提供的几种页面元素的定位方法。第一种是用表格定位页面元素，第二种是用层定位页面元素，第三种是创建框架页面。 * 4.1 用表格定位页面元素 采用表格进行页面布局，可以简洁明了和高效快捷的将文本、图片和多媒体对象等页面元素有序地显示在页面上，从而设计出版式美观的页面效果。 目标： 本节的主要任务是学会在Dreamweaver中制作表格，掌握使用表格定位页面元素的基本方法。 * 4.1.1 关于表格 表格的实质是把页面的某个空间区域划分为若干行和列，其中的每一“格”称为表格单元。 在网页设计中，表格除了可以用来存放表格化的数据外，它还是重要的页面布局工具，可以用来定位页面元素，如设计页面分栏，定位页面上的文本和图像等等。 * 4.1.2 表格的基本操作 要熟练运用表格进行页面布局，必须学会表格的创建、编辑方法，以及表格和表格单元属性设置操作技巧。 1．创建表格 ●表格宽度：指定以像素为单位或按占浏览器窗口宽度的百分比指定表格的宽度。 ●边框粗细：指定以像素为单位的表格边框宽度。当没有明确指定边框粗细时，大多数浏览器默认边框宽度为1像素。如果不需要边框请输入0。 ●单元格边距：指定单元格内容与单元格边框线之间的距离，默认间距为1像素，如果不需要边距请输入0。 ●单元格间距：指定单元格与单元格之间的距离，默认间距为2个像素，如果不需要间距请输入0。 * 4.1.2 使用表格定位页面元素 2．表格的基本操作 在创建表格之后，常常需要对表格作进一步的处理，如改变表格大小、扩充表格、合并或拆分单元格等等，以便更好地定位页面元素。 （1）选择整个表格和调整表格的大小 （2）选择和删除行或列 （3）选择、合并和拆分单元格 （4）嵌套表格 （5）设置表格或单元格的背景颜色 * 4.1.3 表格的属性设置 1．设置表格属性 行和列，宽，填充和间距，对齐和边框等。 2．设置列、行和单元格属性 使用属性面板的扩展部分可以设置以下属性： 水平，垂直，宽高，不换行，标题，背景颜色等。 * 4.1.4 使用表格定位页面元素 3．使用表格定位页面元素 表格由于具有比较规范的格式，对于整齐排列页面元素非常有效，下面通过一个具体的实例介绍使用表格设计一个页面的方法。 （1）新建一个网页文档，选择“窗口”“插入”打开插入面板，单击插入面板中的“插入表格”按钮。 （2）在弹出的插入表格对话框中，输入行数为6，列数为2，边框值为0，填充为0，间距为0，单击“确定”按钮，在文档中生成一个6行2列的表格。通过