整理建立UI界面的框架文档格式.docx

整理建立UI界面的框架文档格式.docx

《整理建立UI界面的框架文档格式.docx》由会员分享，可在线阅读，更多相关《整理建立UI界面的框架文档格式.docx（11页珍藏版）》请在冰豆网上搜索。

当一个页面被划分为若干个单个框架时，我们称这些单个框架组成了一个框架集（Frameset）。

此时Dreamweaver会为框架集建立一个框架集文件，为每个框架分别建立一个文档文件。

6.1.1知识要点

1．创建框架

（1）插入预定义框架集

Dreamweaver为我们提供了13中预定义的框架集供我们选择。

使用系统提供的预定义框架集是迅速创建基于框架布局的网页的最简单方法。

创建预定义框架集的具体步骤如下。

♦选择“文件”菜单，单击“新建”选项，在弹出的对话框中选择“实例中的页”选项卡，单击右侧“框架页”选项，从右侧“示例页”下方选项中选择“上方固定，左侧嵌套”的框架集，如图6-1-1所示。

♦单击右下角“创建”按钮，在“框架标签辅助功能”窗口中我们可以为每个框架完成相应操作，如图6-1-2所示。

然后点击“确定”，如图6-1-3所示。

图6-1-1“新建文档”对话框

图6-1-2“框架标签”对话框

图6-1-3预定义框架

（2）修改框架集结构

我们已经完成了基本的框架集的建立，如果我们想要做出更为复杂的框架集结构就需要修改框架集结构，具体步骤如下。

♦光标停留在要修改的框架集的空白位置，点击“修改”菜单，选择“框架集”选项，在弹出的子菜单中共有四项命令，如图6-1-4所示。

♦读者可以试着选择任意一种，用鼠标调整框架窗口的大小。

灵活的使用修改框架集命令，可以使我们的页面布局更加丰富多变，更符合我们用户不同种类的需求。

图6-1-4修改框架集

2．保存框架和框架文件

当我们完成了框架集的设置之后，我们可以选择“文件”菜单中的“保存全部”来对文件进行保存。

执行该命令后，将保存框架集中的所有文档，包括框架集文件和所有框架中调用的文档。

保存时Dreamweaver会先保存框架集文件，我们可以自己设定框架集的名字，单击“保存”按钮即可保存。

然后Dreamweaver会对每个框架中的文档进行保存。

要注意，保存时当前即将被保存的框架会被以粗框着重显示，如图6-1-5所示。

图6-1-5保存框架集

3．设置框架和框架集属性

当我们选中框架（框架集）时，在文档窗口的下方会出现框架（框架集）的属性面板，属性面板的具体参数如下。

（1）框架属性面板如图6-1-6所示

图6-1-6框架属性面板

❑框架名称：

作为链接指向时所用的名称。

❑源文件：

本框架内默认显示的源文件的路径，确定了本框架的源文档。

❑边框：

用来设置当前框架的边框。

❑滚动：

用来设置当框架内的内容在本框架中显示不下时是否是用滚动条。

❑不能调节大小：

当点选了本单选框时，访问者无法通过拖动框架边框在浏览器中调节框架的大小。

❑边框颜色：

用来设置与当前边框相邻的所有边框的颜色。

❑边界宽度：

用来设置边框和内容之间的左右距离（单位为px）。

❑边界高度：

用来设置边框和内容之间的上下距离（单位为px）。

（2）框架集属性面板如图6-1-7所示

图6-1-7框架属性面板

用来设置在浏览器中是否显示框架集的边框。

用来设置框架集的边框颜色。

❑边框宽度：

用来设置框架集的边框宽度（单位：

px）。

❑单位：

行、列尺寸的值的单位，具体是行还是列由框架集的结构决定。

6.1.2工作任务与设计效果

使用所学的框架技术知识完成某公司人事管理系统的UI界面的框架布局，如图6-1-8所示。

具体要求如下：

1、使用框架集将窗口分成上下两个部分。

2、在上、下两层框架中各插入一个表格。

3、在上层框架的表格中插入如图6-1-8所示的两张图片，并在下方框架表格中输入相应的文字。

。

图6-1-8最终效果

6.1.3建立UI界面的框架

♦选择“文件”菜单，单击“新建”选项，在弹出的对话框中选择“实例中的页”选项卡，单击右侧“框架页”选项，从右侧“示例页”下方选项中选择“上方固定”的框架集，单击右下角“创建”按钮，如图6-1-9所示。

图6-1-9创建框架集

♦点击“文件”菜单，点击“保存全部”，将所做的框架集进行保存。

将上方框架命名为top.html，下方框架命名为bottom.html。

将框架集文件命名为index.html。

3.环境影响登记表的内容6.1.4设置框架属性

♦

♦[例题-2005年真题]《中华人民共和国环境影响评价法》规定，建设项目可能造成轻度环境影响的，应当编制（　）。

将光标停放在顶部框架上，点击窗口下方的“页面属性”按钮，在弹出的对话框中将“上边距”、“下边距”，“左边距”，“右边距”的值均设置为0，如图6-1-10所示，然后将光标停留在底部框架上，将边距也设置为0。

（一）环境影响经济损益分析概述如图6-1-10设置页面边距

♦2.量化环境影响后果将光标置于顶层框架中，选择“插入”菜单中的“表格”命令，在弹出的对话框中，将“行数”设置为2，“列数”设置为1，“边框粗细”设置为0像素，“单元格边距”和“单元格间距”均设置为0。

如图6-1-11所示。

图6-1-11插入表格

3）应用污染物排放标准时，依据项目所属行业、环境功能区、排放的污染物种类和环境影响评价文件的批准时间确定采用何种标准。

综合性排放标准与行业性排放标准不交叉执行，即：

有行业排放标准的执行行业排放标准，没有行业排放标准的执行综合排放标准。

图6-1-12设置框架集属性

♦选中框架集，设置窗口下方的“边框”下拉菜单的选项为“是”，“边框颜色”设置为红色，“边框宽度”设置为0。

如图6-1-12所示.

♦『正确答案』B选中顶层框架中的表格，将表格宽度设置为1024，并将“对齐”选项设置为居中对齐。

如图6-1-13所示。

1.环境影响评价依据的环境标准体系

图6-1-13设置表格格式

♦选中顶层框架中的表格中的上层表格插入素材文件夹中的list.png，然后选中下层表格插入素材文件夹中的banner.jpg。

调整图片的宽度和高度，结果如图6-1-13所示。

图6-1-14在顶层框架表格中插图

♦选中下层框架。

选择“插入”菜单中的“表格”命令，在弹出的对话框中，将“行数”设置为1，“列数”设置为1，“边框粗细”设置为0像素，“单元格边距”和“单元格间距”均设置为0，设置表格宽度为1024。

如图6-1-15所示。

（3）旅行费用法

图6-1-15在下层框架中插入表格

（4）根据评价的目的、要求和评价对象的特点、工艺、功能或活动分布，选择科学、合理、适用的定性、定量评价方法对危险、有害因素导致事故发生的可能性及其严重程度进行评价。

图6-1-16设置下层框架中表格属性

♦选中下层框架中的表格。

设置窗口下方“属性”选项卡中的“宽”为1024，设置“对齐”为“居中对齐”，设置“边框”值为2。

如图6-1-16所示。

♦在下层框架的表格中输入如图6-17所示文字，并将文字颜色设置为蓝色，点击“文件”菜单中的“保存全部”选项，点击工具栏中的“在浏览器中预览”，即可看到完成的页面。

图6-1-17最终效果

6.1.5工作任务总结

2.环境保护行政法规在这个任务中利用DreamweaverCS5中的预定义框架集进行了网页的布局，这个工作是网站制作中非常常见的基本任务。

通过这个任务能够很好的训练网页布局的能力，在我们现实工作中，框架和表格结合使用才能构造出比较精美的网页布局来，希望各位读者能够多加练习。

下一节课我们会在本节课制作的网页基础上制作出表单网页。