第6章框架与表格布局页面

合集下载

网页中表格布局及框架的应用

回顾内容
Байду номын сангаас建表格表格的基本属性编辑表格
表格布局及框架的应用
•布局表格 •创建框架（框架集及框架标记） •框架超链接的设置 •内嵌框架标记的应用
主讲人：赵毅
wangyezhizuo2013@
认识表格布局

如何实现图文内容的布局，达到如右图所示页面的效果？
用表格对网页的内容进行整体控制
返回
框架超链接的应用
在同一个页面中，要实现在一个框架窗口中的超链接页面出现在另一个框架窗口中，如何实现？
使用target目标窗口属性
如何设置窗口链接的显示位置

target目标窗口属性
name＝“显示的窗口名” <frame src=url name=“窗口名”>
target属性指定了所链接的文件出现在名称为 “窗口名”的框架窗口里。
如何创建多个复杂的窗口
要实现如下图所示的窗口，该如何制作？
top窗口
1、分成上下两个窗口 2、把下面的窗口分成左右两个窗口
left 窗口 right窗口
如何创建多个复杂的窗口
3、新建多框架HTML页面“Frame_Sets.html” 设置无框
架边框 ...... <FRAMESET rows="20%,*" frameborder="0"> <FRAME src="top.html" name="topframe“ scrolling="no" noresize="noresize"> 禁止调整框架大小 <FRAMESET cols="20%,*"> <FRAME src="left.html" noresize="noresize“ scrolling="no" name="leftframe“ > <FRAME src="right.html" name="rightframe"> </FRAMESET> 框架名称，便于超 </FRAMESET> 文本链接锚标签 target属性所引用不显示滚动条

第六章使用框架,层和时间轴

第六章使用框架、层和时间轴本章要点：●框架的概念●使用框架设置网页布局●层的概念●创建层●使用时间轴一、使用框架（P90 6.2 使用框架）（一）、使用框架如果多个网页拥有相同的导航区，只是内容有所不同，则可以使用框架来设计网页布局，这样浏览者在查看不同内容时，无需每次都下载整个页面，而可以保持导航部分不变，只下载网页中需要更新的内容即可，从而极大提高网页的下载速度。

这类网页称为框架页，其最典型的应用时各大论坛的设计。

1、框架的概念框架页面通过框架将网页分成多个独立的区域，在每个区域可以单独显示不同的页面，每个区域可以独立翻滚。

（1）框架网页的结构框架由框架和框架集组成，框架就是网页中被分隔开的各个部分，每一个部分都是一个完整的网页，这些网页共同组成了框架集。

框架集实际上也是一个网页文件，用于定义框架的结构、数量、尺寸等属性。

框架集又被称为父框架，框架被称为子框架，将某个页面划分为若干框架时，既可独立地操作各个框架，创建新文件，也可为框架指定自己制作好的文档。

选择【查看】-【可视化助理】-【框架边框】命令可以显示或隐藏框架边界。

（2）框架网页的功能——导航（3）框架结构的优点●浏览者无需为每个页面重新加载与导航相关的图形，可以大大提高网页的下载效率●每个框架都有自己的滚动条，浏览者可以独立滚动这些框架2、创建框架网页文档（1）在【新建文档】对话框中创建文件-新建-示例中的页-框架集-选择所需框架结构在【框架标签辅助功能属性】对话框中为每一个框架指定一个标题（2）在【布局】插入栏中创建插入-布局-框架-可选13种预定于框架（3）手动创建框架网页查看-可视化助理-框架边框，显示框架边框，选中所需分隔的框架，按ALT键同时，光标移至框架边框上，显示为双箭头时，即可将一个框架拆分为两个框架。

（二）、编辑框架1、框架的基本操作（1）创建嵌套框架打开一个框架网页，将光标移至要创建嵌套框架集的框架中，选择【插入记录】-【HTML】-【框架】-选择某种嵌套框架集（2）删除框架光标移至需要删除的框架边缘，显示为双箭头时，将鼠标朝向框架外继续拖拽至边框消失即删除该框架（3）选择框架和框架集【窗口】-【框架】，显示框架面板，在框架面板中选择所需框架。

Dreamweaver CS6-第6章使用框架课件

（1）在文档窗口中，将光标放置在某一框架内。（2）选择“文件 > 在框架中打开”命令，打开一个已有文档。
6.1.4 保存框架
保存框架时，分两步进行，先保存框架集，再保存框架。 1．保存框架集和全部框架 2．保存框架集文件 3．保存框架文件
6.1.5 框架的选择
在对框架或框架集进行操作之前，必须先选择框架或框架集。 1．选择框架 2．选择框架集
6.1.7 拆分框架
通过拆分框架，可以增加框架集中框架的数量，但实际上是在不断地增加框架集，即框架集嵌套。拆分框架有以下几种方法。
（1）先将光标置于要拆分的框架窗口中，然后选择“修改 > 框架集”命令，弹出其子菜单，其中有4种拆分方式。
（2）选定要拆分的框架集，按Alt+Shift组合键的同时，将鼠标指针放到框架的边框上，当鼠标指针呈双向箭头时，拖曳鼠标指针拆分框架。
在Dreamweaver CS6中，可以利用可视化工具方便地创建框架集。用户可以通过菜单命令，实现该操作。
1．通过“插入”命令建立框架集 2．通过拖曳自定义框架
6.1.3 为框架添加内容
因为每一个框架都是一个HTML文档，所以可以在创建框架后，直接编辑某个框架中的内容，也可在框架中打开已有的HTML文档，具体操作步骤如下。
1．给每一个框架定义标题 2．创建框架中的链接
6.2.5 改变框架的背景颜色
通过“页面属性”对话框设置背景颜色的具体操作步骤如下。（1）将插入点放置在框架中。（2）选择“修改 > 页面属性”命令，弹出“页面属性”对话框，单击 “背景颜色”按钮，在弹出式颜色选择器中选择一种颜色，单击“确定” 按钮完成设置
6.1.8 删除框架
将鼠标指针放在要删除的边框上，当鼠标指针变为双向箭头时，拖曳鼠标指针到框架相对应的外边框上即可进行删除。

浅谈网页布局中的表格与框架

浅谈网页布局中的表格与框架作者：徐景秀来源：《科技资讯》 2014年第18期徐景秀(鄂东职业技术学院湖北黄冈 438000)摘要:本文简要介绍了页面布局的一般设计原则、设计方法,并主要论述了表格及框架定位页面元素,进行网页布局的方法。

关键词:Dreamweaver 表格框架布局中图分类号:TP393 文献标识码:A 文章编号:1672-3791(2014)06(c)-0223-011 页面布局的一般设计原则和方法用户在浏览网页的时候问题容易被那些美观大方的网页所吸引。

页面的布局是网页制作成败的一个很重要的因素,因此用户在制作网页时要重视。

而页面布局的一般设计原则和方法如下。

(1)布局简洁大方清晰:这是Web网页设计的最重要的原则。

一般一个页面应有一个主体,可以是文字块或图像。

浏览者总是先看网页中大的和色彩鲜明的部分,然后才是通常的从左到右和从上到下的模式,不能给人的感觉是杂乱无章,眼花缭乱的感觉。

另外尽可能使任何信息都能在3次内点击找到。

每个页面显示一层信息,只显示用户当前选择的内容,其它内容可用链接提示。

(2)布局类型选择:布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型。

(3)布局平衡:所谓布局平衡是指以页面为中心,页面的上下左右在分量上应给人以匀称的感觉,不会让人感到页面的某些地方特别拥挤,而有些地方又特别空旷。

为了让页面达到左右平衡,应尽可能利用文本和图像的HTML对齐方式标识。

页面的上部应多留些空间,不要太拥挤,使用给每个页面加上页眉和页脚的方法来达到上下的平衡。

(4)布局风格一致:依据网页设计界面设计的风格原则,同一网页应用的每个页面应该拥有大体一致的页面布局,这样可以有效地使用户感受到页面谐调一致。

(5)布局文本、图片和多媒体方式:文本和图片是构成网页的两大元素,目前的技术可以让文本和图片摆放在页面的任何位置。

声音、动画、视频等可使更加页面丰富。

中文版 Dreamweaver CS6网页设计教程第6章

2. 选择框架集
使用下列方法之一选择框架集：在文档窗口中，单击框架集中任意两个框架的边界，或者在“框架”面板中，单击框架集的外围，如图648所示。
18
6.3.3 设置框架和框架集属性
1. 设置框架属性
选择框架后，打开框架“属性”面板，如图6-49所示。
2. 设置框架集属性
选择框架集后，打开框架集“属性”面板，如图6-50 所示。
16
6.3.1 创建框架集
1. 插入预定义框架集
Dreamweaver CS6提供了多种预定义的框架结构，选择“插入”| HTML |“框架” 命令，就可以看到这些预定义的框架结构了，如图6-42所示。
2. 自行创建框架集
17
6.3.2 选择框架和框架集
1. 选择框架
使用下列方法之一选择框架：按住 Alt键的同时，在文档窗口中单击框架，可选定框架：或者在框架“属性”面板中单击框架，则选中相应的框架，如图6-47所示。
22
6.3.7 框架应用
该实例制作一本电子书，主体是“上方及左侧嵌套”框架集，在顶部放置标题栏，左侧框架放置导航栏(即目录)，单击链接，在右侧框架中打开链接内容。其具体操作步骤如下。
(1) 新建HTML页面。 (2) 依次选择“插入”| HTML |“框架”|“上方及左侧嵌套”命令。 (3) 选择框架集，选择“文件”|“保存框架页”命令，保存框架集。 (4) 在顶部框架内单击鼠标，选择“文件”|“保存框架”命令，将其保存为Frame-top.htm。 (5) 使用同样的方法，将左侧框架保存为Frame-left.htm，将右侧框架保存为Frame-main.htm。 (6) 按住Alt键的同时，单击框架，打开其“属性”面板，在“属性” 面板上设置框架名称。Dreamweaver CS6已经为预定义框架设置了名称，例如，mainFrame、leftFrame、topFrame，这些名称在指定链接目标时要用到，其他属性默认，如图6-54所示。

网页设计与制作第6章列表与框架-PPT精选文档16页

name noresize scrolling
src
取值 0、1 URL pixels pixels name noresize yes、no、auto URL
描述规定是否显示框架周围的边框。规定一个包含有关框架内容的长描述的页面。定义框架的上方和下方的边距。定义框架的左侧和右侧的边距。规定框架的名称。规定无法调整框架的大小。规定是否在框架中显示滚动条。规定在框架中显示的文档的 URL。
设置列表中列表项标志的位置。
list-style-type
2010网页设计与制作
请见下页
设置列表项符号的类型。
第6章
7
6.1.6 list-style-type属性取值1
值 none disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin
描述定义框架集中列的数目和尺寸。
定义框架集中行的数目和尺寸。
2010网页设计与制作
第6章
12
6.2.3 框架标记
1. 框架标记<frame />是单标记。 2. frame定义了放置在每个框架中的HTML文档。
属性 frameborder
longdesc marginheight marginwidth
</dl>
2010网页设计与制作
第6章
5
6.1.4 列表的嵌套
格式举例： <ol>
<li>列表项1</li> <li>

第6章情景6———BS结构人事管理系统的UI实现

6.1.2工作任务与设计效果
使用所学的框架技术知识完成某公司人事管理系统的UI界面的框架布局，具体要求如下： 1、使用框架集将窗口分成上下两个部分。 2、在上、下两层框架中各插入一个表格。 3、在上层框架的表格中插入两张图片，并在下方框架表格中输入相应的文字。。
6.1.5工作任务总结
6.1.1 知识要点
边框颜色：用来设置与当前边框相邻的所有边框的颜色。边界宽度：用来设置边框和内容之间的左右距离（单位为px）。边界高度：用来设置边框和内容之间的上下距离（单位为px）。（2）框架集属性边框：用来设置在浏览器中是否显示框架集的边框。边框颜色：用来设置框架集的边框颜色。边框宽度：用来设置框架集的边框宽度（单位：px）。单位：行、列尺寸的值的单位，具体是行还是列由框架集的结构决定。

在这个任务中利用Dreamweaver CS5中的预定义框架集进行了网页的布局，这个工作是网站制作中非常常见的基本任务。通过这个任务能够很好的训练网页布局的能力，在我们现实工作中，框架和表格结合使用才能构造出比较精美的网页布局来，希望各位读者能够多加练习。下一节课我们会在本节课制作的网页基础上制作出表单网页。

本章主要讲解如何使用Dreamweaver CS5中的框架、框架集、表单以及spry等组件。通过制作B/S结构人事管理系统的 UI界面来组织本章内容，使用四个任务驱动教学内容，具体涉及以下内容：
建立UI界面的框架制作系统的功能界面制作目录页面链接页面
6.1 任务一：建立UI界面的框架
6.1.1 知识要点
1．创建框架（1）插入预定义框架集（2）修改框架集结构 2．保存框架和框架文件 3．设置框架和框架集属性（1）框架属性框架名称：作为链接指向时所用的名称。源文件：本框架内默认显示的源文件的路径，确定了本框架的源文档。边框：用来设置当前框架的边框。滚动：用来设置当框架内的内容在本框架中显示不下时是否是用滚动条。不能调节大小：当点选了本单选框时，访问者无法通过拖动框架边框在浏览器中调节框架的大小。

网页设计与制作-孙第2版第6章网页布局new

③设置标题：在“文档”窗口的第一行输入标题文字“巴黎之旅”，并在属性面板设置为“隶书”、大小为“xx-large”、水平为“居中对齐”。 ④设置表格插入点。在文档窗口，将表格插入点设置在标题文字的下方。 ⑤执行下列操作之一，打开“表格”对话框。 ·单击“常用”工具栏的“表格”按钮。 ·从“常用”工具栏将“表格”按钮拖动到表格插入点，即标题文字的下方。 ·在“插入”菜单选择“表格”选项。
《网页设计与制作》
6.1 应用表格布局网页
6.1.2 表格的基本操作与属性设置
1．向表格中输入文字操作实例6-2 按图6-1所示完成表格中的文字输入与设置操作步骤：（1）向表格中输入文字 ①在指定单元格中单击鼠标，设置插入点。 ②在插入点输入文字。在表格中输入的信息如图6-1所示。（2）选中表格并设置表格的居中对齐 ①执行下列操作之一，选中整个表格。 ·单击表格的左上角。 ·单击表格下边界的任何一处，当鼠标指针下方出现表格状图标时单击即可。 ·在表格中单击一次，在“修改”菜单选择“表格”、“选择表格”选项。 ·在表格中单击一次，在文档窗口下方的标签选择器中单击<table>标签。如图63所示。
•行（水平空间） •列（垂直空间） •单元格（行和列交汇的空间）
《网页设计与制作》
6.1 应用表格布局网页
6.1.1
创建表格
操作实例6-1 在网页中按图6-1所示建立表格
《网页设计与制作》
6.1 应用表格布局网页
6.1.1
创建表格
·操作步骤： ①在本地站点html文件夹下新建网页blzl.html。 ②在文档头将网页“标题”设置为“巴黎之旅”。
《网页设计与制作》
6.1 应用表格布局网页
6.1.2 表格的基本操作与属性设置

第6章用表格和框架制作

6.1.2 设置表格和单元格属性
1．选定． 2. 在属性面板中设置表格或单元格的属性
6.1.3 编辑表格和单元格
三种方法：三种方法： 1．属性面板． 2．“修改”菜单．修改” 3．右键菜单．
对表格的编辑都可以通过属性面板来设置。对表格的编辑都可以通过属性面板来设置。
6.1.4 为表格添加内容
6.2.2 布局表格模式
特点：它同传统绘制表格方法的差别在于，特点：它同传统绘制表格方法的差别在于，在布局模式中，模式中，我们可以在页面上绘制任意数量和大小的表格，表格，而且在表格中的任意位置上也可以绘制任意数量和任意大小的单元格，用于绘制复杂的表格。数量和任意大小的单元格，用于绘制复杂的表格。切换到布局表格模式：切换到布局表格模式：选择【查看】【表格模式】【布局模式】选择【查看】|【表格模式】|【布局模式】菜单命令。命令。
6.2.3 绘制布局表格
的文挡窗口中，在Dreamweaver CS3的文挡窗口中，布局表格外框为绿色。的文挡窗口中布局表格外框为绿色。绘制布局表格的步骤如下：绘制布局表格的步骤如下：步骤1：建立一个新的页面（可选）。步骤：建立一个新的页面（可选）。步骤2：切换到布局模式。步骤：切换到布局模式。步骤3：单击【布局】工具栏上的【绘制布局表格】按钮，步骤：单击【布局】工具栏上的【绘制布局表格】按钮，如图6-28所示，开始绘制布局表格。所示，如图所示开始绘制布局表格。步骤4：拖动鼠标在页面上绘制出所需要的表格，步骤：拖动鼠标在页面上绘制出所需要的表格，即可完成布局表格的绘制。布局表格的绘制。步骤5：绘制完布局表格后，单击【布局】工具栏上的【步骤：绘制完布局表格后，单击【布局】工具栏上的【绘制布局单元格】按钮，绘制布局单元格。制布局单元格】按钮，绘制布局单元格。举例：以跟踪图像为例。举例：以跟踪图像为例。

Dreamweaver-层与布局表格的应用(1).ppt

的首选参数设置 • 层的建立 • 层的嵌套
首页
返回结束调音
第六章 Dreamweaver-层的应用
层的首选参数设置
在新建层之前，通过“首选参数”对话框中的“层”选项来设置层的默认属性。可以通过菜单”编辑/首选参数”或从状态栏的视窗设置框右边的小按钮进入首选参数
当页面要插入大小统一的层时,通过设置首选参数就可加快编辑层的速度.
首页
返回结束调音
第六章 Dreamweaver-层的应用
6.2 使用布局单元格和表格
• 为了简化使用表格进行页面布局的过程，Dreamweaver MX 2004提供了布局模式。在布局模式中，用户可以在页面上方便地绘制布局单元格，然后将这些单元格移动到所需的位置，用户还可以创建固定宽度的布局和自动伸展为整个浏览器窗口宽度的布局。
首页
返回结束调音
36
第六章 Dreamweaver-层的应用
6.2 使用布局单元格和表格
• 6.2.4 将布局单元格靠齐到网格
• 用户可以打开Dreamweaver MX 2004的网格功能，并将其用做绘制布局的可视化向导。通过网格可让页面元素在移动时自动靠齐到网格，还可以通过指定网格设置更改网格或控制靠齐行为。不管网格是否可见，靠齐都将发挥作用。
层大小和属性设置
• 层大小的设置
– 设置单个层的大小 – 设置多个层的大小
• 层属性的设置
– 设置单个层的属性 – 设置多个层的属性
首页
返回结束调音
第六章 Dreamweaver-层的应用
设置单个层的大小
• 在文档编辑区选择一个层，在出现的调整柄上按住鼠标左键不放并拖动，当调整到适当的大小时释放鼠标即可。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

4. 项目实施 8）继续在网页中插入表格，具体参数为1行2列，宽为100%，填充、间距、边框都为 0像素，第1列列宽为20%，第2列列宽为80%。 9）在第1列中嵌套一个6行2列的表格，宽为100%。设置1、3、5行中的两列宽分别为
30%和70%，高为28像素，背景色为“#E3E3E3”。并在1、3、5行中第1列插入图片
3. 项目计划与决策
针对中心网站的基本设计思路，以蓝色为主色调，突出高新科技公司形象特
点，页面干净整洁、主次分明，整个界面采用满屏设计。
淮信科技有限公司培训中心网站网站标题网站动画网站导航文档搜索服务动态专家指导技术研讨关爱社会 “用心服务、用户至上”的服务理念
分类显示
友情链接
版权信息
5.项目检查与评估
学习目标
评价项目
了解框架的概念，能够把握何时能掌握框架的使用场合使用框架布局
掌握在网页中创建框架的方法掌握框架集文件的保存方法
能在网页中创建框架能保存框架集文件
掌握框架集合集属性与框架属性能设置框架集属性与框架的属性的设置方法掌握编辑框架的方法掌握框架的综合使用能编辑框架能使用框架制作网站或项目
6.强化拓展实训：框架中超链接使用
5）使用Dreamweaver打开网页defautl.htm文件，鼠标选择left.htm中的“素材下载”
图片，在属性面板中选择“矩形热点工具”，利用工具在素材下载”图片上绘制热点，如左图所示。单击“链接”文本框右边的“浏览文件”按钮，在弹出的“选择文件” 对话框中选择scxz.html文件，如右图所示。
网页设计与制作
第六章框架与表格布局页面
主讲：xxx
1项目展示与项目目标
框架布局页面
掌握在网页中创建框架的方法掌握为框架命名并导入框架源文件的方法掌握框架集文件的保存的方法
掌握框架集合集属性与框架属性的设置方法
掌握编辑框架的内容的方法
2. 项目资讯关键知识点一：创建预定义框架
新建一个空白文档，执行 “ 查看 ” → “ 可视化助理”→“框架边框”命令，在文档窗口中显示边框，将光标移动到边框，其会变成双向箭头形状，如图 9-2所示。用光标左键拖动文档窗口中的框架边框，将其拖动到所需的位置上，释放光标左键，即可创建框架集。
边框为0像素，间距为1像素，背景色为白色，设置表格单元格的背景色为
“#E3E3E3”，依次给单元格中输入“首页”、组织架构”、“学习型班组”、 “信息交流”、“组织创建”、“图片浏览”、“关爱社会”等文字，并设置他们的超级链接地址为“index.htm”，如图9-18所示。
4. 项目实施
插入背景图片与导航后的效果
6.强化拓展实训：框架中超链接使用 3）保存后按<F12>键预览点击“素材下载”超级链接后的效果如图所示。
链接的文件显示效果
1项目展示与项目目标
表格布局页面
掌握表格的属性的设置技巧掌握使用表格制作单行线的制作方法掌握表格布局的技巧
2. 项目资讯
淮信科技有限公司培训中心针对淮安的市场竞争，满足企业自身经营和打造服务品牌的需要而建立的，网站不只是满足中心实施简单的网络宣传，它也是涉及中心服务的内部管理改革、经营流程重组等具体问题，更涉及到整个服务体制和机制的深层次变革。中心网站的建设，最根本的是通过打造一个培训品牌，促使公司培训服务水平产生质的飞跃，真正体现企业“用心服务、用户至上”的服务理念。根据需求，本网站主要包括“组织架构”、“信息交流”、“组织创建”、 “图片浏览”、“关爱社会”等几个模块，同时本网站要能够实现对所有信息的查询，能够显示并下载相关的文档，此外网站还有“服务动态”、“专家指导” 等内容。
插入淮信科技有限公司培训中心网logo
4. 项目实施
5）在网页中插入表格，具体参数为1行1列，宽为100%，高为160像素，填充、间距、边框都为0像素。将光标在单元格中点击一下，然后设置表格的背景图为 “mid.jpg”。 6）在网页中再次插入表格，具体参数为3行1列，宽为100%，填充、间距、边框都为0像素。将光标插入到第1个单元格中，设置背景色为“#243569”(蓝色)。高度设为1像素，同时插入“space.gif”到该单元格，第3个单元格设置和第一个相同，设置第2个单元格的背景色为“#E3E3E3”。 7）在第2个单元格中嵌套新表格，具体参数为1行7列，宽为720，高25像素，填充、
4. 项目实施
4）单击“框架”面板中的上侧框架（topframe），在属性中单击“浏览文件”按钮在弹出的“选择HTML文件”对话框中选择已经做好的网页“top.htm”。效果如
图所示。
4. 项目实施 5）点击框架面板的左侧框架(leftframe)，在属性面板中“源文件”后单击“浏览文件” 按钮在弹出的“选择HTML文件”对话框中选择已经做好的网页“left.htm”, 点击框架面板的右侧框架(mainframe)，在属性面板中“源文件”后点击“浏览文件”按钮在弹出的“选择HTML文件”对话框中选择已经做好的网页“right.htm”，如图所示。
<title>图形图像处理专题学习网站</title>
</head> <frameset rows="106,*" cols="*" frameborder="NO" border="0" framespacing="0"> <frame src="top.htm" name="topFrame" scrolling="NO" noresize > <frameset rows="*" cols="220,*" framespacing="0" frameborder="NO" border="0">边框高度Fra bibliotek 2. 项目资讯
关键知识点七：设置框架集的属性
边框边框宽度
边框颜色
“行”和 “列”
单位
3. 项目计划与决策通常功能型网站多采用框架结构，根据分析图形图像专题学习网站属于一个偏重软件功能的系统，网站设计采用框架结构，具体采用“上方固定、左侧嵌套”的框架布局结构。网页布局将上方框架存放网站的页眉，包括网站名称与网站地址，左侧部分包括“课堂学习”、“实验实训素材下载”、“学生答疑”、“学习交流”、“电子作业批改”、“作业上传”、“公告栏”和教师的工作模块，右侧主窗口包括“实用教程”、“课外提高”和“视频教程”等模块。上方框架图形图像专题学习网站页眉与网址左框架课堂学习素材下载学生答疑学习交流作业上传作业成绩主框架公告栏课外提高实用教程视频教程网站页脚与版权信息
4. 项目实施
12）在右边的单元格中嵌套新表格，具体参数为1行7列，宽为771像素，填充、间距、边框为0像素，背景色为白色，采用第7步制作横线的方式，将第2、4、6列宽设置为1 像素，背景色设置为“#CCCCCC”，并在其中插入“space.gif”图片。设置第1、3、 5、7列宽为192像素。 13）在第1列中嵌套新表格，具体参数为4行1列，宽为177像素，在第1行中插入 “pix03.jpg”，第2行中插入“pix003.jpg”，第3行中插入“淮信科技有限公司培训中心，是多…….”，第四行中插入“...more”等内容。采用同样的方法设置第3、5、7列，效果如图所示。
4. 项目实施
1）创建“淮信科技有限公司培训中心网站”文件夹，在文件加中创建“ images”、
“flash”等文件夹，根据需要，处理相关的图片并保存到“images”文件夹中。
2）打开Dreamweaver软件创建新网页，并将其保存到“淮信科技有限公司培训中心网站”文件夹中，命名为“index.htm”，然后设置“页面属性”中“网页标题” 为“欢迎访问淮信科技有限公司培训中心网站”，背景色为白色，上、下、左、右
4. 项目实施
6）用鼠标调整框架集中间的边框使其显示效果和谐，然后再次保存此框架网页，此时选中框架集，点击“代码”视图，代码如下：
<html xmlns="/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
4. 项目实施
1）根据草图，假设这个主页是上下结构，下方又分为左右结构，上方框架显示网
站页眉信息，左方框架显示导航页面，右侧框架显示主内容。提供的3个网页效果以及最终实现的效果如图所示。
顶部框架页面
主框架页面
套用框架后的页面左侧框架页面
4. 项目实施
2）首先，执行“文件”→“新建”命令，在弹出的“新建文档”对话框中选择
边距为0像素。
3）在网页中插入表格，具体参数为1行3列，宽为100%，高为65像素，填充、间距、边框都为0像素。分别设置三列的宽度为20%，60%，20%。
4. 项目实施
4）分别将“head.gif”、“topmid.jpg”、“headright.gif”插入到表格的第1个单元格、第2个单元格和第3个单元格中，最终效果如图所示。
选择框架集有以下两种方法。（1）将光标移动到整个边框上，按住<Alt>键，当光标指针变为水平方向箭头或垂直方向双向箭头时，单击边框即可选中整个框架集。（2）单击“框架”面板中最外边的边框，当显示为黑边时，即可选中框架集。
2. 项目资讯
关键知识点六：设置框架的属性
框架名称
源文件
边框