下载文档原格式
第七章框架与浮动框架课堂案例:企业邮箱网页地制作7.1网站地后台管理页一般是由框架结构组成,本章通过学习框架地网页组织形式,制作企业邮箱地页面。
准备知识:框架与框架集7.2•创建框架7.2.2•删除框架与增加框架7.2.4•框架与框架集介绍7.2.1•保存框架7.2.3•在框架使用超链接7.2.5框架与框架集介绍7.2.1框架是网页常用地布局方式与网页间地组织形式,经常使用在网站地后台,邮箱,论坛等结构为一个浏览器窗口划分为若干区域并且每个区域显示不同地网页文件地网页组成。
框架是网页经常使用地页面设计方式,其作用就是把网页在一个浏览器窗口下分割成几个不同地区域,实现在一个浏览器窗口显示多个HTML页面。
使用框架可以非常方便地完成导航工作,让网站地结构更加清晰,而且各个框架之间决不存在干扰问题。
利用框架最大地特点就是使网站地风格一致。
一个框架是由框架与框架集构成,框架是浏览器窗口地一个区域,它可以显示与浏览器窗口地其余部分所显示内容无关地网页文件;框架集也是一个网页文件,它将一个窗口通过行与列地方式分割成多个框架,框架地多少根据具体有多少网页来决定,每个框架要显示地就是不同地网页文件。
框架地HTML标签为<frame></frame>,框架集地HTML标签为<frameset></frameset>。
1创建框架打开Dreamweaver工具,创建一个新地站点名称为frame）,新建一个网页文件,暂时不保存。
在Dreamweaver地CS6版本,单击菜单栏地插入 HTML 框架然后选择菜单地具体框架结构。
2修改框架显示大小与框架属性方法一:修改框架在浏览器显示大小,将鼠标放到框架边框上,当出现双箭头光标时拖拽框架边框,可以改变框架地显示大小。
方法二:单击代码视图,在代码修改rows="80,*"或cols="80,*"地值,如修改为rows="169,*"或cols="257,*"。
Dｒｅamwｅａvｅr MX考试试题单选题1．用下列的（）快捷键可以打开“文件”菜单。
A．Ctrｌ＋F B.Ctrl+LﻩＣ．Alt+F D.+Alt+L2.用下列的( ）快捷键可以调出Dreａｍweaver的查找与替换对话框。
Ａ．Cｔrl+F B.Ｃtrl+L C.Alｔ+ＦＤ．Aｌt+L3．在DreamweａveｒMＸ中的( ）菜单里可以重新设置工作区。
A．文件 B.编辑 C.视图 D.格式４．用下列的（）快捷键可以新建文件。
Ａ．Ctrl+Ｎ B.Ctrl+M C.Ctrl+PＤ.Ctrl+Ｃ５.本地站点的所有文件和文件夹必须使用( ），否则在上传到因特网上时可能导郅浏览不正常。
A．小写字母 B.大写字母 C.数字D．汉字６．在Dｒｅamweaveｒ中文本的输入可以手工输入,也可以将别的文档中的文本复制到Ｄrｅａｍweaｖer 编辑的网页中，还可以（）。
A．导入ｈｔmｌ、txt文档 B.ｈｔml、ｔｘｔ文档C．查找 D.修改7.在复制带有格式的文本时,可以先将内容粘到（)，再将其中没有格式的文本复制到剪贴板上,最后再粘贴到Ｄrｅaｍweaｅr编辑窗口中。
Ａ.文件夹B．记事本 C.Word文档 D.Eｘcel文档8.重做的快捷键是( ）。
A．Cｔｒｌ＋ＹB．Ｃｔrｌ＋N C.Cｔrl+Z D.Ctｒｌ+O９．选中要进行预格式化处理的文件,然后在（)面板中选择该段文本为“预先格式化”。
A．代码Ｂ．设计 C.属性Ｄ.应用程序10．分行显示文字应用(）。
A.EｎtｅrB.Shift+ＥｎterC.Ｃtrl＋EnterＤ.Cｔrl+Alt11.常用的网页图像格式有（)和( )。
A.gif,tiffB.tｉff，jpg Ｃ.ｇｉｆ,jpｇＤ．tiff．png12.ＵＲＬ是（)的简写,中文译作（）。
A．ＵniforｍRｅａｌＬocaｔoｒ,全球定位Ｂ．ＵｎiｎＲeｓource Locａtor,全球资源定位C.Uniform Real Loｃａtor,全球资源定位Ｄ．Uniform Ｒｅsource Locator，全球资源定位13．常用的网页动画格式有（）。
Dreamweaver CS3 简介Dreamweaver CS3是一款功能强大的可视化的网页编辑与管理软件。
利用它，不仅可以轻松地创建跨平台和跨浏览器的页面，也可以直接创建具有动态效果的网页而不用自己编写一行源代码。
Dreamweaver CS3 最主要的优势在于能够进行多任务工作，并且在操作方法、界面风格方面更加人性化。
用户可以根据自己的喜好和工作方式，重新排列面板和面板组，自定义工作区。
1 Dreamweaver CS3概述Dreamweaver CS3是由Adobe公司在并购Macromedia之后推出的最新版本，它是一款专业的Web站点开发软件，可用于Web站点、Web页和Web应用程序的设计、编码和开发工作。
在业界通常将Dreamweaver、Flash、Fireworks称为网页三剑客。
将各种网页制作的相关工具紧密联系起来是Dreamweaver系列的一大亮点，同时良好的插件体系，使Dreamweaver CS3可通过第三方插件进行补充。
另外，Dreamweaver CS3还为开发人员提供了动态语言支持与丰富的模板。
另外值得称道的是，Dreamweaver CS3不仅提供了强大的网页编辑功能，而且提供了完善的站点管理机制，可以说，它是一个集网页创作和站点管理两大利器于一身的超重量级的创作工具。
Dreamweaver CS3在功能强大与易用性之间具有很好的平衡，使用Dreamweaver CS3可以有效地提高Web开发的工作效率。
2 Dreamweaver CS3的新增功能相对于以前的版本Dreamweaver CS3的功能主要在以下方面进行了增强：1. Ajax 的Spry 框架通过Adobe Dreamweaver CS3，可以使用Ajax 的Spry框架进行动态用户界面的可视化设计、开发和部署。
Ajax 的Spry 框架是一个面向Web 设计人员的JavaScript 库，用于构建向用户提供更丰富体验的网页。
目录第一章：认识Dreamweaver MX 2004第二章：创建站点第三章：设置首页第四章：插入文本第五章：插入图象第六章：插入多媒体]第七章：建立网页链接第八章：表格第九章：层第十章：框架第十一章：表单第十二章：使用CSS第十三章：行为第十四章：资源第十五章：模板第一章：认识DreamWeaver一、认识DreamWeaver⑴标题栏⑵菜单栏⑶工具栏查看/工具栏/插入、文档、标准或插入工具栏/插入⑷网页的编辑窗口标记⑸属性面板⑹浮动控制面板（组）把鼠标放在有麻点的粘黑三角附近可移到任何位置，同时，采用同样的方式也可以拖回来。
二、更件要求：PⅢ600MHz处理器Window98以上至少128M内存、建议采用256M内存至少275Mb的可用磁盘空间显示器：1024×768百万种颜色显示器第二章：创建站点一、网站分析企划（1）要做什么类型网站，例商业的，个人的个人：在设计上不拘束，发挥自己的想象力商业：考虑公司的形象和网站的统一性，避免太过浮躁，表现太多个人想法。
（2）网站分析企业网站的名称：性质：未来网站浏览者特征：主要应用群体网站的风格：自已的特色网站分类：各个大模块收集素材：文本、图象、动画、视频二、站点（1）创建站点菜单站点/管理站点/否/选择无/完成（2）编辑站点站点/管理站点/编辑（与新建站点一样）◆复制：跟复制文件一样◆删除：只要选中要删除的站点◆导出：此站点（选中）导出一个扩展为.ste文件做备份用。
各计算机移动站点，与其它用户共享。
（3）导入：将导出的站点，重新添加到站点列表中，经供使用。
三、创建站点内容建立：右侧的浮动面板组/文件/文件/右键击本地根目录文件夹/可新建网页和文件夹删除：选中删除项目/按下键盘中的DEL键，弹出对话框，确定。
四、“文件浮动面板”右侧的浮动面板，相当于快捷键，熟练掌握。
第三章设置首页一、首页：每个网站都有首页，代表网站的风格与特色，网站上其它网页必须通过首页散发出去，可见道的重要性。
dreamweaver 系统组成的结构Dreamweaver系统组成的结构Dreamweaver是一款功能强大的网页设计和开发工具，它由多个组件组成，每个组件都担负着不同的任务。
以下是Dreamweaver 系统的组成结构：一、代码编辑器Dreamweaver的代码编辑器是其核心组件之一，它提供了强大的代码编辑功能，支持多种编程语言，如HTML、CSS、JavaScript 等。
代码编辑器具有语法高亮、代码提示、代码折叠等功能，可以帮助用户编写出规范、有效的代码。
二、视图面板视图面板是Dreamweaver中用于预览和编辑网页的界面。
它包括标签面板、属性面板、样式面板等。
标签面板用于显示网页的结构，用户可以通过拖拽标签来快速生成网页。
属性面板则用于设置标签的属性，如颜色、字体、大小等。
样式面板用于编辑和管理网页的样式表。
三、文件管理器文件管理器是Dreamweaver中用于管理网站文件的工具。
通过文件管理器，用户可以方便地创建、删除、移动和重命名文件和文件夹。
文件管理器还支持文件的上传和下载，可以实现与服务器的文件同步。
四、图像编辑器图像编辑器是Dreamweaver中用于编辑和优化图像的工具。
它提供了丰富的图像编辑功能，如剪裁、调整大小、旋转、添加滤镜等。
图像编辑器还支持图像的压缩和优化，可以帮助用户减小网页的加载时间。
五、交互式元素交互式元素是Dreamweaver中用于添加交互效果的工具。
它包括按钮、链接、表单等元素，用户可以通过拖拽这些元素来创建交互式的网页。
交互式元素还支持事件触发和脚本编写，用户可以通过编写JavaScript代码来实现更复杂的交互效果。
六、动态网页开发工具Dreamweaver还提供了一系列用于开发动态网页的工具，如服务器连接工具、数据库连接工具等。
这些工具可以帮助用户与服务器进行交互，实现动态网页的开发和调试。
七、预览和调试工具Dreamweaver提供了预览和调试工具，用于在开发过程中预览和调试网页。
实验8 用Dreamweaver建立框架页面实验目的：通过实验，掌握如何如何创建和应用框架页面，了解框架的基本分布结构和各个框架页面之间的相互联系。
实验步骤：1. 启动Dreamweaver程序，选择菜单“文件”“新建”命令，打开“新建文档”对话框。
在对话框中“常规”标签下选择“类别”列表中的“框架集”选项，然后再右边的“框架集”列表中选择“上方固定”选项，如图8-1所示。
单击“创建”按钮创建框架网页。
2. 选择菜单“窗口”“框架”命令，打开框架控制面板。
3. 用鼠标单击框架控制面板中的下部分，选中mainFrame框架。
如图8-2所示：图8-1 套用框架图11-2 选择框架集的子框架4. 将鼠标放在选中的边框上，使鼠标变成双向箭头，然后拖动鼠标将该框架分成左右两个子框架。
如图8-3所示。
图8-3 把主框架切分为子框架5. 在框架编辑窗口中，单击顶部框架，选择菜单“文件”→“保存框架”命令，保存框架为top.htm页面。
6. 将光标停放到下部分框架的左边框家中，选择菜单“文件”→“保存框架”命令，保存框架为left.htm页面。
7. 按同样的方法，将右边的框架保存为right.htm页面。
8. 单击框架面板上最外层的边框，或单击页面编辑窗口中的最外层边框，使外框出现虚线。
如图8-4所示：图8-4选中整个框架说明鼠标单击所选中的框架，所选中的框架就是当前正在编辑的页面.9. 选择菜单“文件”—>“保存全部”命令，保存所有框架和框架集，框架集文件名称为index.htm.如图8-5所示.10. 单击框架面板上的topFrame框架，选中top.htm网页.11. 打开属性面板，在属性面板上的“滚动”下拉菜单中选择“否”，图8-5 保存框架集然后勾选旁边的“不能调整大小”复选框；在“边界宽度”和“边界高度”的文本框中都输入0，参数设置如图8-6所示.图8-6 top框架的属性设置说明框架属性面板上的“滚动”下拉菜单中有“是”.“否”.“自动”.和“默认”四项，其中选择“是”表示允许页面左右.上下出现滚动条；选择“自动”.“默认”表示根据网页内容，需要时自动显示滚动条；选择“否”表示不允许出现滚动条.12. 单击top框架页面，在属性面板中单击“页面属性”按钮。
《网页制作与设计》复习题一、单选题1．为了标识一个HTML文件应该使用的HTML标记是（）。
A.<p> </p>B.<boby> </body>C.<html></html> D.<table> </table>2．以下国际域名中属于教育机构的是（）。
A．com B．net C． edu D．gov 3．Dreamweaver属于（）的网页制作工具。
A．标记型B．所见即所得C．编程型D．图像处理型4．在URL中，最为常用的协议是（）。
A．File B．Http C．FTP D．Telnet5．表格标记中表示行的标记是（）。
A．<table></table> B．<th></th> C．<tr></tr>D．<td></td>6．以下标记符中，没有对应的结束标记的是（）。
A <body>B <br>C <html>D <title>7.下列哪一项是在新窗口中打开网页文档（）。
A．_self B．_blank C．_top D．_parent8.关于超链接，（）的说法是正确的。
A．不同网页上的图片或文本可以链接到同一网页或网站B．不同网页上的图片或文本只能链接到同一网页或网站C．同一网页上被选定的一个图片或一处文本可以同时链接到几个不同网站D．同一网页上图片或文本不能链接到同一书签9.通过哪个属性可以为图片添加边框线。
（）A. htmlB. aspC. borderD. img10.在网页中最常用的单位是（）。
A. inB. cmC. pxD. pc11.HTML是一种 ( )。
A．程序设计语言B．执行语言C．编译语言D．页面描述语言12.HTML中表示表格标题的标记为( )。
Dreamweaver制作框架框架是将浏览器窗口划分成几个部分，将一些不需要更新的元素放在一个框架内作为单独的网页文档，这个文档是不变的，其他经常更新的内容放在主框架内。
框架通常是由框架集和框架两部分组成，框架集实际上是一个页面，这个页面里包含了好多框架窗口，每个框架窗口可以单独显示一个HTML文档，这些HTML文档之间可以通过超链接联系起来，下面我们就使用Dreamweaver CS3快速地创建框架。
一、框架网页框架将一个浏览器窗口分为多个独立的区域，每个区域（框架）显示一个单独的可滚动页面，每个框架都是浏览器窗口内的一个独立窗口。
典型的框架网页如图1所示，这是关于某个电子商务网站的“客户中心”服务页面。
该网页由3个框架组成，每个框架单独显示一张网页。
顶部框架用于显示横幅广告，对应于网页top.html；左侧框架放置客户中心的一些服务列表，用于页面导航，对应于页面left.html；右侧窗口用于显示具体某项客户中心服务的信息，对应于页面right.html。
为了浏览方便，当浏览者单击左侧客户中心服务列表的超链接时，右侧窗口显示相应的客户中心服务信息。
图1 网页中的多个框架二、制作框架网页Dreamweaver CS3提供了多种创建框架的方法，用户可以使用Dreamweaver CS3提供的预置框架集，也可以自己通过手写HTML代码任意地建立框架集。
使用Dreamweaver CS3如何实现如图1所示的结构清晰、风格统一的框架集页面？下面我们就使用Dreamweaver CS3预置的框架集通过操作来实现如图5.22所示的框架集页面。
制作过程如下。
1.新建框架网页要新建框架网页，请事先规划好网页的设计布局，然后执行如下步骤。
(1) 选择“文件”一“新建”命令。
(2) 在“新建文档”对话框中，选择“框架集”类别。
(3) 从“框架集”列表中选择一个合适的框架集，如图2所示。
图2 选择符合自己要求的框架集(4) 单击“创建”按钮，结果如图3所示。
框架是什么，框架就好比我们的骨骼，支撑着整个网页，如果一个网页没了框架，那么就感觉像一盘散沙，因此为了更好的实现网页的效果，我们就要学会给网页制作一个框架，为了更好的理解什么是框架。
我们画一张示意图来进行讨论。
这是一个左右型的框架，由三个网页文件组成的。
首先外部的框架是一个文件，图中我们用index.htm命名。
框架中左边命名为A，指向的是一个网页A.htm。
右边命名为B，指向的是一个网页B.htm。
下面我们就来从头开始制作一个框架。
1、点“文件”菜单>新建，弹出“新建文档”对话框如下图：或在插入栏>布局>选＂框架：左框架＂如下图：Dreamweaver MX 2004生成一个空白的框架页面，如下图：2、选择「窗口」菜单＞“框架”，弹出“框架”面板如下图。
从框架面板可知，系统对左右框架生成命名。
左框架名为：leftFrame，右框架名为：mainFrame，当然您可以通过框架属性面板对框架重新命名，了解这一点非常重要。
创建超级链接时，要依据它正确控制指向的页面。
3、保存框架。
选择“文件”菜单点击“保存全部”。
系统弹出对话框。
这时，保存的是一个框架结构文件。
我们按照惯例都命名为index.htm。
保存的时候如果虚线框笼罩的是周围一圈就是保存框架结构。
（下图）虚线笼罩在右边就是保存框架中右边网页。
（如下图）虚线笼罩在左边就是保存框架中左边的网页：（如下图）三个页面保存完毕。
4、下面我们要实现按左边的超级链接，对应的页面出现在右边。
在左边的页面中做上超级链接。
指向一个已经存在的页面。
注意做好链接以后，要在目标栏中设置为mainFrame。
(如下图）6、设置完毕，保存全部，按F12预览网页。
链接指向的页面出现在右边框架中。
7、重复以上步骤，把左框架所有的链接做完，一个简单的网站导航结构创建完成。
更多Dreamweaver 教程请继续访问建站学的Dreamweaver教程专区。
实验七框架结构【实验目的】：通过本实验，使学生熟悉创建、编辑框架网页和利用框架来布局页面的基本方法。
框架的作用是把浏览器的显示空间分割为几个部分，每个部分都可以独立显示不同的网页。
一个使用了框架的网页，可以看到，左侧是各个讨论区的名称，单击任意一个讨论区名称，在网页的右侧就会显示相应讨论区的内容，左右两边是独立显示的，例如拉动左侧的滚动条，不会影响右侧的显示效果，反之亦然。
与框架相关的概念是框架集，把几个框架组合在一起就成为了框架集。
10.1理解创建框架和框架集的核心概念在Dreamweaver中，可以非常方便地通过可视化的方法创建框架和框架集。
首先选择菜单“查看→可视化助理→框架边框”命令，这时文档窗口的边缘会显示出一个突起的边框。
用鼠标拖拽边框，就可以把窗口一分为二，4条边框都可以拖拽。
拖拽上下边框可以把窗口分为上下两个部分，拖拽左右边框可以把窗口分为左右两个部分。
如果从窗口的角上开始拖拽鼠标，窗口会被分成4个部分。
拖拽鼠标可以移动刚刚生成的分割线。
当窗口被分割为几个框架以后，每个框架都可以作为独立的网页进行编辑，也可以直接把某个已经存在页面赋给一个框架。
此时打开HTML面板，可以看到相应的HTML代码如下。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN""/TR/html4/frameset.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>无标题文档</title></head><frameset rows="64,97" cols="*"><frame src="file:→E|/dwr/MyFirstSite/UntitledFrame-1"><frame src="file:→E|/dwr/MyFirstSite/page5.htm"></frameset><noframes><body></body></noframes></html>这段代码与以往的网页代码有所不同。
