Dreamweaver-CS5-ch11-使用框架布局网页.pptVIP

* * Dreamweaver CS5网页设计与制作基础教程 第11章 使用框架布局网页 11.1 框架概述 11.1.1 框架的组成 11.1.1 框架的组成 框架页面是由一组普通的Web页面组成的页面集合，通常在一个框架页面集中，将一些导航性的内容放在一个页面中，而将另一些需要变化的内容放在另一个页面中。 使用框架页面的主要原因是为了使导航更加清晰，使网站的结构更加的简单明了、更规格化，一个框架结构由两部分网页文件组成，一个是框架，另一个是框架集。 11.2 创建框架和框架集 11.2.1 创建预定义的框架集 11.2.2 向框架中添加内容 11.2.3 保存框架和框架集文件 11.2.1 创建预定义的框架集 启动Dreamweaver CS5，单击【插入】面板上的【布局】选项卡，选择【框架】选项，在弹出的下拉列表中，选择【顶部框架】选项。 弹出【框架标签辅助功能属性】对话框，设置框架及标题，单击【确定】按钮。 在网页窗口中，可以查看到创建的框架集。 11.2.2 向框架中添加内容 启动Dreamweaver CS5，单击【插入】面板上的【布局】选项卡，在【框架】下拉选项中，选择【顶部框架】选项。 打开准备添加内容的文档，选中准备复制的文本，右键单击，在弹出的快捷菜单中，选择【复制】选项。 返回至Dreamweaver CS5编辑窗口，在准备添加文本的位置，右键单击，在弹出的快捷菜单中，选择【粘贴】选项。 此时，在页面中，可以查看到刚刚添加的文本内容，通过以上步骤即可完成操作。 11.2.3 保存框架和框架集文件 在文档窗口选择框架集，在菜单栏中，选择【文件】→【框架集另存为】菜单项，弹出【另存为】对话框，设置参数，单击【保存】按钮，即可保存框架集的操作。 11.5 IFrame框架 11.5.1 制作IFrame框架页面 11.5.2 IFrame框架页面链接 11.5.1 制作IFrame框架页面 启动Dreamweaver CS5，在菜单栏中，选择【文件】→【打开】菜单项，打开素材文件。 将鼠标光标放置在准备插入浮动框架的位置，在【插入】面板【布局】选项卡中，选择【IFRAME】选项。 此时，在页面中插入一个浮动框架，页面会自动转换到拆分模式，并在代码中生成iframe/iframe标签。 在代码视图中的iframe标签中输入的代码如下：iframe widt=“695”height=“420”name=“main”scrolling=“auto”frameborder=“0”src=“11-5-1.html”/iframe。 此时，页面中插入的浮动框架会变成灰色区域，在菜单栏中，选择【文件】→【保存】菜单项，保存页面，在工具栏中，单击【在浏览器中预览】按钮 ，即可在浏览器中预览页面效果。 11.5.2 IFrame框架页面链接 启动Dreamweaver CS5，在菜单栏中，选择【文件】→【打开】菜单项，打开素材文件。 选中左侧“英语培训教学”图像，在【属性】面板中，设置【链接】地址，在【目标】文本框中，输入文本。 在菜单栏中，选择【文件】→【保存】菜单项，保存页面，在工具栏中，单击【在浏览器中预览】按钮 ，单击创建的页面链接，即可在浏览器中预览页面效果。 *