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.新建框架网页
要新建框架网页，请事先规划好网页的设计布局，然后执行如下步骤。https://www.doczj.com/doc/7316967084.html,
(1) 选择“文件”一“新建”命令。
(2) 在“新建文档”对话框中，选择“框架集”类别。
(3) 从“框架集”列表中选择一个合适的框架集，如图2所示。
图2 选择符合自己要求的框架集
(4) 单击“创建”按钮，结果如图3所示。
2.设置框架集属性
要设置框架集的属性，请执行如下步骤。
(1) 选中框架集：将鼠标指针移至某个框架的边框线上，然后单击，这时将选中整个框架集，如图3所示。
(2) 设置框架集的边框宽度：通过“框架集”属性检查器，可修改边框设置为“是”，边框宽度设置为“1”，这里我们不设边框。
图3 框架集
要调整某个框架的宽度或高度，请将鼠标移至框架的边框线上，左右或上下拖动。
3.添加每个框架的内容
如果事先没有准备每个框架的网页内容，现在可以直接在这些空白的框架中插入内容，然后在保存的时候，将提示逐个保存每个框架的网页。如果事先准备好了每个框架的网页内容，现在可以设置每个框架所关联的网页。由于我们事先已准备好了网页top.html、left.html和right.html。
下面我们就为每个框架设置对应的网页文件。
(1) 选择“窗口”一“框架”命令，打开“框架”面板，展现框架的缩略图，如图4所示。
图4 框架面板
(2) 单击“框架”面板中的每个框架，“属性”检查器中出现相应框架的属性，如图5所示。单击“源文件”旁边的文件夹图标，选择该框架对应的网页。
图5 设置框架对应的网页文件
(3) 按照同样的方法设置其他框架所对应的网页。
(4) 每个框架Dreamweaver都有个默认的名称，如顶部框架默认为topFrame，左侧框架默认为leftFrame，右侧框架默认为mainFrame．如图5所示。您也可以单击“框架名
称”文本框，修改其名称，本例暂不修改。
(5) 框架内容添加后的效果如图6所示。
4.设置超链接
左侧窗口内容为“客户中心”服务项目，现在希望当用户单击这些服务项目超链接时，链接的网页将会在右侧主窗口中打开，右侧窗口的名称是“mainFrame”。左侧窗口中的“客户中心”服务项目及其对应超链接如图1所示。
要达到上述效果，请执行如下步骤。
(1) 选中要设置超链接的图片或文本，如“注册&认证”。
(2) 选择“窗口”一“属性”命令，打开“属性”面板，如图6所示。
图6 超链接属性面板
(3) 单击“链接文件”图标，选择链接文件，如“right.html”。
(4) 单击“目标”下拉列表框，选择超链接在哪个框架中打开，这里为了在右侧框架打开，所以选择“mainFrame”。
(5) 同理，设置另外两个超链接。
5.预览网页
要预览网页，请按快捷键F12或单击工具栏中的“预览”图标，将会看到网页的显示效果。单击左侧窗口中的“客户中心”服务项目，链接内容将在右侧窗口显示。
本节作业：
使用Dreamweaver制作如图1所示的页面效果。
注意事项：
1.根据教程和图示完成作业。
2.在Dreamweaver CS3中点击框架即会切换到选定页面，随时注意自己在修改的是哪一个页面。
网页学习网提示：光看教程是无法让你掌握HTML知识，最好是完成作业后才进入下一次教程，动起手来吧！
Dreamweaver 8 基础代码 HTML基本结构（每个网页都是在基本结构的基础上添加内容的） -------- 网页文件开始标签
------- 头部元素开始标签实验8 用Dreamweaver建立框架页面 实验目的：通过实验，掌握如何如何创建和应用框架页面，了解框架的基本分布结构和各个框架页面之间的相互联系。 实验步骤： 1. 启动Dreamweaver程序，选择菜单“文件”“新建”命令，打开“新建文档”对话框。在对话框中“常规”标签下选择“类别”列表中的“框架集”选项，然后再右边的“框架集”列表中选择“上方固定”选项，如图8-1所示。单击“创建”按钮创建框架网页。 2. 选择菜单“窗口”“框架”命令，打开框架控制面板。 3. 用鼠标单击框架控制面板中的下部分，选中mainFrame框架。如图8-2所示： 图8-1 套用框架图11-2 选择框架集的子框架 4. 将鼠标放在选中的边框上，使鼠标变成双向箭头，然后拖动鼠标将该框架分成左右两个子框架。如图8-3所示。
图8-3 把主框架切分为子框架 5. 在框架编辑窗口中，单击顶部框架，选择菜单“文件”→“保存框架”命令，保存框架为页面。 6. 将光标停放到下部分框架的左边框家中，选择菜单“文件”→“保存框架”命令，保存框架为页面。 7. 按同样的方法，将右边的框架保存为页面。 8. 单击框架面板上最外层的边框，或单击页面编辑窗口中的最外层边框，使外框出现虚线。如图8-4所示： 图8-4选中整个框架
说明鼠标单击所选中的框架， 页面中的框架边框会出现虚线，所选 中的框架就是当前正在编辑的页面. 9. 选择菜单“文件”—>“保存 全部”命令，保存所有框架和框架集， 框架集文件名称为.如图8-5所示. 10. 单击框架面板上的topFrame框架，选中网页. 11. 打开属性面板，在属性面板上的“滚动”下拉菜单中选择“否”， 然后勾选旁边的“不能调整大小”复选框；在“边界宽度”和“边界高度”的文本框中都输入0，参数设置如图8-6所示. 图8-6 top框架的属性设置 说明框架属性面板上的“滚动”下拉菜单中有“是”.“否”.“自动”.和“默认”四项，其中选择“是”表示允许页面左右.上下出现滚动条；选择“自动”.“默认”表示根据网页内容，需要时自动显示滚动条；选择“否”表示不允许出现滚动条. 12. 单击top框架页面，在属性面板中单击“页面属性”按钮。 13. 打开“页面属性”对话框，在“左边框.右边框.上边框.下边框”各文本框中输入0，使网页边距都为0.单击“确定”返回框架页编辑窗口. 14. 单击“插入”面板上的“表格”按钮，插入2行4列，宽为100%的表格. 15. 打开属性面板，设置第2列两个表格背景颜色为“浅蓝色”（色标值为#E0E4F4），然后选择第4列单元格，设置同样的背景颜色；设置第3列单元格的背景颜色为“深蓝色”（色标值为#3A4593）
一、填空： (40分，每空 1 分) 1、网页三剑客中 Dreamweaver 是(网页)的软件； Fireworks 是(图像）的软件；Flash8 是(动画)的软件。 2、 Dreamweaver8的视图窗口有三种，即(代码)视图、 (拆分)视图和(设计)视图。 3、在开发网页之前，首先应建立一个(站点)来管理网页及图像等内容。 4、网页文件默认的扩展名是(.html)， Flash 源文件的扩展名是(.swf)。 5、在网页设计中，要使表格边框在浏览器中不可见，应将边框粗细设为(0 像素)。 6、通过 Dreamweaver定义站点的方法有(基本)和(高级)两种。 7、站点地图是整个站点的(结构图)，它以(层次结构)显示站点中各网页的链接关系。 8、单元格边距是指(单元格内容与边框)之间的距离；单元格间距是指(单元格)之间的距离。 9、 www 国内称之为广域网，是英文(WORLD)、(WIDE)、(WEB)的缩写，其信息资源主要就是由一篇篇使用(HTML)语言编写的 Web 文档组成。 10、通常用于网络中的图像格式有三种，即(JPG)、 (GIF)和(PNG)格式。 11、使用(放缩)工具可以放大或缩小文档；使用(抓手)工具则可以拖动页面。 12、网页中表格的宽度单位一般以(像素)为单位，也可用(百分比)来表示。 13、表格背景效果有两种设置，分别是(背景颜色)和(背景图案)。 14、跟踪图像用于辅助页面设计，可在(查看)对话框中设置。默认情况下，跟踪图像在 Dreamweaver编辑窗口是(可见)，在浏览器中永远(不可见)。 15、标准表格又称为(html表格)，它是用于 HTML页上显示(文字)以及(图像)和(表格数据)进行布局的强有力的工具。 16、 Dreamweaver 为用户提供了(左对齐)、 (右对齐)、 (居中对齐)、(两端对齐)四
在Dreamweaver中应用框架是非常容易的事情，下面我们就来看看具体的应用。 增加新框架 要给框架页面增加新框架，就是像拆分表格的单元格一样，把一个框架分为两个框架。其操作如下： （1）按住Ctrl键，将鼠标放在框架边框上，当鼠标变为上下箭头时，可把边框拖到一个新位置，当松开鼠标按钮时，一个新的空白内容的框架就形成了。 （2）也可以通过命令来操作：首先单击要拆分的框架内部，选“框架”菜单中的“拆分框架”命令，在弹出的“拆分框架”对话框中单击“拆分成列”或“拆分成行”单选按钮，单击“确定”按钮即可。 删除框架 若框架页面看起来太乱，可删除某些框架。要删除一个框架，可先单击该框架选择它，再选择“框架”菜单中的“删除框架”命令即可。 改变框架属性 在设置好框架的整体布局后，我们还可以对每一框架的具体属性进行设置，操作如下：（1）单击需设置属性的框架，选择“框架”菜单中的“框架属性”，则弹出“框架属性”对活框。 （2）在对话框的“名称”文本框中可输入框架名，这样便于识别不同的框架；在“选项”区域中，若选中“在例览器中可以调大小”复选框，则客户在浏览站点时，可重新定义框架尺寸，通过在“显示滚动条”下拉列表框中选择不同的描述项，可设置让滚动条是否出现。 （3）在“框架大小”区域中，可设置框架大小，可以定义一个绝对像素值或相对于浏览器窗口的百分比，若要用浏览器来设置相对于该页面中框架的尺寸，可选“相对”；在“边距”区域中，可设置内容页面与框架边框分隔的像素数值。 （4）要改变开始页面，可以在“初始网页”文本框中输入一个新的页面名字或URL。 （5）单击“框架网页”按钮，则弹出“网页属性”对话框。 （6）在该对话框的“框架”选项卡中，在“框架间距”文本框中，可输入以像素为单位的边框宽度；若要使框架边框消失，则不要选中“显示边框”复选框。 （7）单击“确定”按钮，关闭“网页属性”对话框，再单击“确定”按钮，关闭“框架属件”对话框，完成框架属性设置
《Dreamweaver网页设计》综合练习题（二）及解答一、选择填空题（每空2分，共20分） 1．HTML 2．URL 3．ICP 4．SGML 5．CSS （_____）网络内容服务商 （_____）网络内容服务商 （_____）标准通用标记语言 （_____）统一资源定位符 （_____）超文本标识语言 答案： （___3_）网络内容服务商 （__5_）网络内容服务商 （__4_）标准通用标记语言 （___2__）统一资源定位符 （___1_）超文本标识语言 1．标签