dreamweaver8网页设计第九章使用框架布局网页.pptx

dreamweaver8网页设计第九章使用框架布局网页汇报人：XX2024-01-23

目录框架布局网页概述创建和编辑框架集在框架中插入网页元素框架布局网页实例分析框架布局网页常见问题及解决方案总结与展望

01框架布局网页概述

框架布局网页定义框架布局网页是指将一个网页划分为多个区域，每个区域可以独立加载不同的网页内容，实现页面的分块显示和交互。框架布局网页通过HTML的`frameset`和`frame`标签来实现，`frameset`用于定义框架集，而`frame`用于定义每个框架的内容。

实现页面的分块显示通过框架布局，可以将一个页面划分为多个区域，每个区域显示不同的内容，使得页面结构更加清晰，方便用户浏览。提高页面加载速度由于框架布局网页可以将页面的不同部分分别加载，因此可以加快页面的加载速度，提高用户体验。实现页面间的交互通过框架布局，可以实现不同页面间的交互，例如在一个框架中显示导航菜单，而在另一个框架中显示对应的内容。框架布局网页作用

VS通过框架布局，可以将页面划分为多个区域，使得页面结构更加清晰，方便用户浏览。提高页面加载速度由于框架布局网页可以将页面的不同部分分别加载，因此可以加快页面的加载速度。页面结构清晰框架布局网页优缺点

实现页面间的交互：通过框架布局，可以实现不同页面间的交互，提高用户体验。框架布局网页优缺点

010203不利于SEO优化搜索引擎对框架布局网页的抓取和索引存在一定的困难，因此不利于网站的SEO优化。浏览器兼容性差不同浏览器对框架布局的支持程度不同，可能导致页面在不同浏览器中的显示效果不一致。不方便管理和维护由于框架布局网页涉及多个页面和文件的关联，因此不方便进行管理和维护。框架布局网页优缺点

02创建和编辑框架集

创建框架集打开Dreamweaver8，选择“文件”“新建”，在弹出的对话框中选择“框架集”。在“框架集”对话框中，选择所需的框架布局类型，例如“顶部和嵌套式”、“左侧和嵌套式”等。设置框架集的行数和列数，以及每个框架的大小和位置。点击“确定”按钮，即可创建一个新的框架集。

在文档窗口中，选择需要编辑的框架集。选择“修改”“框架集”，在弹出的菜单中选择“编辑框架集”。在“编辑框架集”对话框中，可以修改框架集的布局、大小、位置等属性。点击“确定”按钮，即可完成对框架集的编辑辑框架集

设置框架属性选择“窗口”“属性”，打开属性面板。根据需要设置其他属性，例如背景颜色、边距等。在文档窗口中，选择需要设置属性的框架。在属性面板中，可以设置框架的名称、源文件、滚动条、边框等属性。点击“应用”按钮，即可完成对框架属性的设置。

03在框架中插入网页元素

插入文本和图像可以通过属性检查器来调整文本和图像的属性，如字体、大小、颜色、对齐方式等。调整文本和图像属性可以直接在框架的文档窗口中输入文本，或者从其他文档中复制文本并粘贴到框架中。在框架中插入文本可以通过“插入”菜单中的“图像”选项，或者点击工具栏上的图像按钮来插入图像。在弹出的对话框中选择要插入的图像文件即可。插入图像

插入超链接和多媒体可以通过“插入”菜单中的“超链接”选项，或者点击工具栏上的超链接按钮来插入超链接。在弹出的对话框中输入链接地址和目标框架即可。插入多媒体可以通过“插入”菜单中的“媒体”选项来插入多媒体文件，如Flash动画、音频和视频等。在弹出的对话框中选择要插入的多媒体文件即可。调整超链接和多媒体属性可以通过属性检查器来调整超链接和多媒体的属性，如链接地址、目标框架、播放控制等。插入超链接

创建和应用CSS样式可以通过“窗口”菜单中的“样式”选项来打开样式面板，在其中创建和应用CSS样式。可以选择内联样式、内部样式表或外部样式表等方式来定义和应用样式。在样式面板中可以选择要编辑的CSS样式，然后修改其属性来改变网页的外观和布局。可以使用CSS布局来控制网页中元素的位置和排列方式，如使用div元素和CSS盒模型来控制元素的布局和定位。编辑CSS样式使用CSS布局使用CSS样式

04框架布局网页实例分析

030106050402布局特点：页面的主体内容区域具有固定的像素宽度，不会随着浏览器窗口大小的改变而改变。适用范围：适用于需要保持页面元素尺寸和布局稳定的场景，如企业官网、新闻网站等。设计要点注意不同分辨率下页面的显示效果，确保页面在不同设备上都能良好展示。保持页面左右两侧留白，使页面具有呼吸感。确定主体内容区域的宽度，并以此为基础设计其他页面元素。实例一：固定宽度布局

010405060302布局特点：页面的主体内容区域宽度以浏览器窗口宽度的百分比进行定义，会随着窗口大小的改变而自适应调整。适用范围：适用于需要页面元素随窗口大小自适应变化的场景，如响应式网页、个人博客等。设计要点确定主体内容