网页制作与网站设计_08DreamweaverCS3框架布局题稿.pptVIP

设置框架集的属性 　 要为框架集设置属性，需打开相应框架集的“属性”面板，如图所示。 任务４:网页框架属性设置 上机操作：建立“我们美丽的校园”框架网页 1. 将“插入”面板切换为“布局”，单击“框架”右端的下拉三角按钮，打开下拉菜单，从中选择“顶部和嵌套的左侧框架”选项，打开“框架标签辅助功能属性”对话框，单击“确定”按钮，即可在编辑窗口中创建框架集，如图所示。 说明：进入“布局”选择“框架” 说明：框架标签辅助功能属性 上机操作：建立“我们美丽的校园”框架网页 2. 将光标定位到顶部框架中，在“框架”属性面板中单击“页面属性”按钮，打开“页面属性”对话框，点击“背景图像”右侧的“浏览”按钮，选择图片所在的路径、名称，单击“确定”按钮，完成顶部框架的设置，如图所示。 课后练习 用以上所学到的创建等基本操作及对框架与框架集的属性设置的方法，创建一个论坛页面，包括论坛的主题、分类以及具体内容等。 项目小结 一、创建网页框架 1．创建预定义框架 方法一：通过菜单“文件→新建”命令，在对话框中选择“示例中的页”中的“框架集”选项，在项目“示例页”中选择需要的样式示例。 方法二：将“插入”面板切换为“布局”，单击“框架”右端的下拉三角按钮，打开下拉菜单弹出13种预定义的框架结构。 2．创建自定义框架 选择“修改→框架集”命令，根据需要选择级联菜单中的选项。 把鼠标移到文档窗口的边界线上，当光标变成双向箭头时拖动光标至相应的位置即可创建。 将光标移到边框的角上，拖动鼠标至相应位置，可拖出4个边框。 3．创建嵌套框架 　　将光标定位到要插入嵌套框架的框架中，将“插入”面板切换为“布局”，单击“框架”右端的下拉三角按钮，打开下拉菜单，选择相应的框架结构。 项目小结 二、框架与框架集的基本操作 1．选择框架和框架集有两种方法：一种是通过“框架”面板选择框架或框架集；另一种是在文档窗口中选择框架或框架集。 2．保存框架和框架集 保存框架 　 将光标定位到要保存的框架中，选择“文件→保存框架”命令。在对话框中设置路径、文件名，系统将保存光标所在的框架。 保存框架集 　　　 选择“文件→保存全部”命令，在对话框中设置路径、文件名，单击“保存”按钮，此时保存为框架集。接着系统继续打开“另存为”对话框，保存框架集中子框架页面，保存的子框架页面会处于选中状态，在对话框中设置路径、文件名后单击“保存”按钮。以此类推，对框架集中所有的子框架页面分别进行保存。结构。 项目小结 三、删除框架 　　只要用鼠标拖动框架边框，将其拖到页面边框上即可。将鼠标放到该框架边框上，在鼠标变成双箭头时，将该框架边框拖到页面边框即可删除框架。 项目小结 四、网页框架属性设置 1．设置框架的属性 在“框架”面板中选中要设置的框架，单击“窗口”菜单下的“属性”选项，打开“属性”面板，在面板中进行相应的设置。 2．设置框架集的属性 　　　 在“框架”面板中选中要设置的框架集，单击“窗口”菜单下的“属性”选项，打开“属性”面板，在面板中进行相应的设置。 项目八 Dreamweaver CS3 框架布局 内容摘要 介绍了网页框架和框架集的用途。 介绍了网页框架的创建。 介绍了网页框架与框架集的基本操作。 介绍了网页框架的属性设置。 学习目标 理解网页框架与框架集的区别 掌握网页框架创建的方法 掌握网页框架与框架集的基本操作的方法 掌握网页框架的属性设置的方法 Dreamweaver CS3 框架布局 任务1——创建网页框架 任务2——框架与框架集的基本操作 任务3——删除框架 任务4——网页框架属性设置 任务1:创建网页框架 任务描述 通过以上项目的学习，我们已经可以制作简单的网页，但是小刚还是感觉页面的结构不容易把握，老师讲：“我们可以用“网页框架”设置，来设计页面的结构，这样可以简化网页设计，给我们带来很多便利”。 本任务将使用菜单、边框拖动等方法，对Dreamweaver CS3中 创建的网页文件进行框架的设置。网页建成以后，通过框架的设置将浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。 任务说明 任务1:创建网页框架 知识讲解及操作步骤 框架是网页设计中常用的技术，使用框架能将不同的内容网页显示在同一个浏览器窗口中，将页面分成不同的区域，分别在这些区域中显示不同的网页。通常我们所使用的论坛就属于框架结构。此框架结构由标题区域、导航区和内容区域三部分组成，左侧的框架显示包含导航控件的文档，右侧为内容区域显示包含内容的文档，当点击导航区中不同的论坛主题，内容区域即显示与其对应的内容。 任务1:创建网页框架