网站设计框架
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
32
实战演练
步骤 新建一个HTML页面 单击【插入】面板|【布局】分类上的框架 按钮，选择框架集“顶部和嵌套的左侧框 架” 选择“文件”菜单|“保存框架页”命令，保 存框架集，将其命名index.html 在顶部框架内单击，选择“文件”菜单|“保 存框架”命令，将其保存为top.html
11
框架<frame>的属性
• 指定子窗口显示网页属性：<frame src=“url”>
• 定义子窗口名称属性：<frame name=“子窗口名称”> • 控制框架滚动条属性：scrolling • 设置边距属性：<frame marginwidth=“数值”>
• 调整框架尺寸: noresize.
26
边框：在浏览器中查看框架时显示或隐藏当 前框架的边框。 边框颜色：为所有框架的边框设置边框颜色。 边距宽度：以像素为单位设置左边距和右边 距的宽度 边距高度：以像素为单位设置上边距和下边 距的高度
27
保存框架集文档
在预览或关闭当前文档的框架时，必须对框架集和每 个框架页文件都进行保存。
各个带有框架的页面的URL不显示在浏览器中，访问
7
框架集简介
语法为： <FRAMESET>－－－定义框架集 <FRAME name = “ ” SRC=”URL”> 定义框架 <FRAME name = “ ” SRC=”URL”> <FRAME name = “ ” SRC=”URL”> … <NOFRAMES>…</NOFRAMES> </FRAMESET>
在创建一个新的框架时，系统自动为框架集命名为 untitledFrame-1，这样的文件名一来不好记，二来也没 有意义。设计时容易混淆。在保存时要对其进行相应的 重命名。一般用其在框架集中的位置来进行命名。
28
1．保存框架集文档
1)
操作步骤：
选择框架集
2)
采取下面的方法之一：
选择【文件】|【框架集另存为】命令，将框架集另 存为新文件。 选择【文件】|【保持框架页】命令，保存框架集
第7章 框架
本章的主要内容
理解框架集、框架的概念。
创建框架集
制作框架、链接页面
创建超链接
保存框架集
2
框架技术由框架集和框架两部分组成，能 够将页面分成数个独立变化的窗口，每个 窗口可以显示不同的Web页面，并可以不 断更换显示的对象。 使用框架技术，可以使屏幕的信息量增大， 使Web网页更加吸引读者。有关框架内容 的HTML
单位有“像素”、“百分比”、“相对” 相对－分配剩余的框架空间
25
框架的属性设置
框架名称：是链接的Target属性或脚本在引用该框架 时所用的名称。 源文件：指定在框架中显示的源文件 滚动：指定在框架中是否显示滚动条。 不能调整大小：让访问者无法通过拖动框架边框在浏 览器中调整框架大小
演示示例/07/ex7-01.html
8
其中<noframes>...</noframes>中的内容显示在
不支持分框的浏览器窗口中，因而这里指向一 个普通版本的HTML文件，以便使用不支持分 框浏览器的用户阅读。
9
框架集<frameset>的属性
<frameset>标签主要有rows, cols, border, bordercolor, frameborder五个属性。 水平/垂直分割窗口属性 rows/cols
在表格内输入文本。
35
新建5个HTML页面，分别为1.html， 2.html， 3.html， 4.html， 5.html 编辑页面1.html，在页面内插入一个1×1的 表格，使其居中对齐，表格宽度为80％。 在表格内输入文本。
36
编辑left.html
将光标定位于左面的框架内（leftFrame），插入
<frameset rows=“值1, 值2, ……, 值n”>
<frameset cols=“值1, 值2, ……, 值n” >
值可以是数字、百分比（％）、剩余值（*）
10
设置窗口框架宽度属性：
<frameset border=“数值”>
设置边框颜色属性： <frameset bordercolor=“＃FFFFF”> 设置框架隐藏属性： <frameset frameborder=no或yes> no表示不显示框线，yes表示显示框线，默 认值为no。
13
name="top"
150px
64px
name="main" name="contents"
*
name="bottom"
14
64px
浮动窗口
在一个页面中直接引入另一个页面，这种技术称为 浮动窗口（Floating frame）。在HTML中通过 <iframe>标签实现。 语法格式如下： <iframe src=“…” name=“子窗口名称”>… </iframe> 其中，“…”表示初始页面的URL。
38
最后：保存框架集
选择”文件”菜单|“保存全部”命令。将框 架集和框架的内容全部保存
39
设置目标框架的基本操作方法如下：
1. 2.
在“设计”视图中，选择文本或对象。 在属性检查器的“链接”字段中，选择要 链接到的文件 在属性检查器的“目标”弹出式菜单中， 选择链接的文档应在其中显示的框架。
3.
31
编辑无框架内容
为不支持框架的浏览器提供显示内容的操作方法：
1. 2. 3.
4.
选择“修改”|框架集|编辑无框架内容。 Dreamweaver 将清除“设计”视图中的内容，并且在 “设计”视图顶部显示“无框架内容”字样 在“文档”窗口中，像处理普通文档一样输入或插入 内容。如输入文字“你目前使用的浏览器不支持框架 显示，请升级更高的版本”。 再次选择选择“修改”|框架集|编辑无框架内容命令， 以返回到框架集文档的普通视图。
HTML组成： 框架集文件以 及3个网页文 档
3个框架5
框架的优缺点
优点：
可以让网页的风格统一，加快浏览速度。
在浏览页面时，不需要将页面中含框架的窗口重新 加载。对于导航或不动的窗口在浏览网站时只需加 载一次。 当框架的内容页面较长时，而导航条又在不同的框 架中，你们向下滚动到页面底部的访问者就不需要 再滚动到顶部来使用导航条。
34
制作框架页
制作topframe
在顶部框架内创建标题栏。
”HTML在线教程”
将光标定位于上面的框架内（topFrame），插入图
片，设置对齐方式为居中对齐。
制作mainframe
将光标定位于右面的框架内（mainFrame），在页
面内插入一个1×1的表格，使其居中对齐，表格宽 度为80％
29
保存框架文档
操作步骤：
（1）光标放在目标框架内 。
（2） 采取下面的方法之一：
选择【文件】|【保存框架】命令，保存框架.
选择【文件】|【框架另存为】命令，将框架另存为 新文件。 如果选择【文件】｜【保存全部】命令，将保存与当 前框架关联的所有文档。
30
框架中的链接
在一个框架中使用链接以打开另一个框架中的文 档，必须设置链接目标。
•如果设定noresize属性，则页面打开后，浏览者不能 通过鼠标调整页面的宽度。
12
示例
<frameset rows="64,*,64"> <frame name="top" scrolling="no" target="contents"> <frameset cols="150,*"> <frame name="contents" target="main"> <frame name="main"> </frameset> <frame name="bottom" scrolling="no" target="contents"> <noframes> <body> <p>此网页使用了框架，但您的浏览器不支持框架。</p> </body> </noframes> </frameset>
33
用同样的方法，将左侧框架保存为left.html 将右侧框架保存为right.html 按住Alt键的同时，单击框架，在属性面板 设置框架的名称。Dreamweaver 已经为预 定的框架设置了名称。例如mainFrame, topFrame, leftFrame.这些名称在指定链接 目标时要用到。
可见
20
删除框架集 1) 选择要删除框架的边框 2) 将边框拖到上一级框架的边框上 调整框架大小 拖动边框
21
框架面板
框架面板：“窗口”菜单| 框架
22
选择框架和框架集
1)
选择框架
在“工作区”窗口中：只要单击一个框架内的任意地方，
该框架就成当前活动的框架。
在“框架”面板中：单击某个框架区域
每个框架都有自己的滚动条。
6
缺点：
由于搜索引擎无法对带有框架的网页正确索引，因此
框架页对于现在的搜索引擎是个挑战。
难以实现不同框架中各元素的精确图形对齐。特别是 不同计算机采用不同分辨率的情况下。 对导航测试很耗时间。因为导航决定了链接到哪一个 框架页，采用了哪种链接方式，要经过反复测试。 者很难将特定的页面进行收藏。
方法2、创建新的空预定义框架集
1) 2)
文件|新建
弹出的“新建文档”对话框，在对话框中 选择“示例中的页”|”框架页”| 选择自己需要的框架类型
3)
18
方法3、选择菜单“查看”|“可视化助理 ”|“框架边框”命令，然后再网页中按 ALT键后，用鼠标拖动框架边框，也可以创 建。
19
修改框架集
1)新建一个空白HTML文档 2)【修改】菜单|框架集|拆分左(右、上、下)框架 3) 在光标停留在某个框架中，可继续拆分 4)注：利用“查看|可视化助理|框架边框”使边框
演示示例/07/ex7-02.HTML
15
框架的基本操作 创建框架和框架集
插入预定义的框架集 创建框架 集的方法： 自行创建
16
创建框架和框架集
方法1、选择预定义的框架集
创建包含当前文档的框架集
1)
打开一个文档
2)
3)
插入栏|布局|框架
框架集图标的蓝色区域表示当前文档,白色 区域表示其他文档
17
3
网页示例
一个框架横放在 顶部：Web站点 的徽标和标题 一个较窄的框架 位于左侧：导航 条 一个大框架占据 页面的其余部分： 主要内容
4
框架：
是指浏览器窗口中的一个区域。它可以显示与浏
览器窗口的其他框架页内容无关的页面。
框架集：
定义了一组框架的布局和属性，包括框架的数目、
框架的大小和位置以及在每个框架中初始显示页 由4个单独内容的 面的URL。
一个5×2的表格，表格宽度为200px，使其居中 对齐。
在表格内插入图片和输入文本。
37
创建导航栏链接
创建导航栏链接
选择文本“页面布局与文字设计”，单击“属
性”面板“链接”文本框右边的浏览按钮，选 择目录下的1.html,单击“确定” 单击“目标”－选择mainFrame. 为其他文本添加链接并设定链接目标。 按住Alt键的同时，单击左框架，在属性面板中 设置“滚动”为否，并选中“不能调整大小”
2)
选择框架集
在“文档”窗口中：单击内部框架边框 在“框架”面板中：按“alt”键，然后单击整个内部框 架边框
23
框架集属性设置
边框：确定在浏览器中查看文档时在框架周围是 否应显示边框。 边框宽度：指定框架集中所有边框的宽度 边框颜色：设置边框的颜色
24
行列选定范围：
如果上下分割网页，则设置行的像素来改变 窗口的大小 如果左右分割网页，则设置列的像素来改变 窗口的大小