《DW使用框架布局网》课件.pptxVIP

添加副标题DW使用框架布局网页汇报人：

目录CONTENTS01添加目录标题02Dreamweaver软件介绍03网页布局基本概念04使用框架布局网页05使用DW实现框架布局网页06框架布局网页的优化与调试

PART01添加章节标题

PART02Dreamweaver软件介绍

DW软件的发展历程1997年，Macromedia公司推出Dreamweaver1.01998年，Dreamweaver2.0发布，增加了对CSS的支持2000年，Dreamweaver3.0发布，增加了对JavaScript的支持2003年，Dreamweaver4.0发布，增加了对XML的支持2005年，Adobe公司收购Macromedia，Dreamweaver成为Adobe旗下的产品2007年，DreamweaverCS3发布，增加了对Ajax的支持2010年，DreamweaverCS5发布，增加了对HTML5和CSS3的支持2013年，DreamweaverCC发布，增加了对响应式设计的支持2017年，DreamweaverCC2017发布，增加了对CSS预处理器的支持2020年，Dreamweaver2020发布，增加了对Web组件的支持

DW软件的功能特点集成了Photoshop、Illustrator等设计软件，方便进行网页设计支持FTP上传和下载功能提供丰富的模板和组件库强大的代码编辑和调试功能所见即所得的编辑模式支持HTML、CSS、JavaScript等网页编程语言

DW软件的应用领域网页设计：DW是专业的网页设计工具，可以快速创建和编辑网页。网站开发：DW支持HTML、CSS、JavaScript等编程语言，可以进行网站开发。电子商务：DW可以用于创建电子商务网站，实现在线购物功能。企业网站：DW可以用于创建企业网站，展示企业形象和产品信息。

PART03网页布局基本概念

网页布局的定义网页布局是指将网页上的元素按照一定的规则和顺序进行排列和组合，以实现良好的视觉效果和用户体验。网页布局包括页面布局、导航布局、内容布局等。网页布局需要考虑到用户的浏览习惯、网站的品牌形象、内容的重要性等因素。网页布局需要遵循一定的设计原则，如对齐、对比、重复、亲密性等。

网页布局的分类添加标题添加标题添加标题添加标题响应式布局：网页内容根据屏幕宽度自适应，适合各种设备固定布局：网页内容在固定宽度内显示，适合小屏幕设备自适应布局：网页内容根据屏幕宽度和设备类型自适应，适合各种设备混合布局：结合固定布局和响应式布局的优点，适合各种设备

网页布局的优缺点优点：易于理解和使用，易于维护和更新缺点：可能存在兼容性问题，可能影响页面加载速度优点：可以灵活地调整页面布局，适应不同的设备和屏幕尺寸缺点：可能需要更多的设计和开发时间，可能需要更多的技术支持

PART04使用框架布局网页

框架布局的概念框架布局是一种网页设计技术，可以将网页分成多个独立的区域，每个区域可以显示不同的内容。框架布局可以使网页结构更加清晰，便于用户理解和浏览。框架布局可以方便地实现网页内容的更新和维护。框架布局可以方便地实现网页的导航和链接。

框架布局的创建方法打开DW软件，新建HTML文档在HTML文档中，使用frameset标签创建框架布局使用frame标签定义框架，设置框架的src属性、name属性、noresize属性等使用noframes标签定义框架的替代内容，当浏览器不支持框架时显示使用CSS样式设置框架的样式，如边框、背景色等保存并预览框架布局效果

框架布局的修改方法打开DW，选择要修改的框架布局网页在“框架”面板中，选择要修改的框架在“属性”面板中，修改框架的宽度、高度、背景颜色等属性在“框架”面板中，添加或删除框架，调整框架的位置和大小在“框架”面板中，设置框架的链接，实现页面间的跳转保存修改后的框架布局网页，预览效果

框架布局的优缺点优点：易于维护和管理，可以快速定位和修改内容缺点：可能会导致页面加载速度变慢，影响用户体验优点：可以更好地控制页面布局，实现更复杂的设计效果缺点：可能会导致页面布局过于复杂，难以理解和维护

PART05使用DW实现框架布局网页

创建框架集页面打开DW，新建HTML文档在HTML文档中，添加框架集标签在框架集标签中，添加框架标签设置框架标签的属性，如宽度、高度、边框等在框架标签中，添加内容，如文本、图片、链接等保存并预览框架集页面

添加框架页面设置框架标签的属性，如rows、cols等打开DW，新建HTML文档在HTML文档中，添加框架标签在框架标签内，添加内容，如文本、图片等保存并预览网页效果

设置框架属性框架背景颜色：设置框架的背景颜色，以增强视觉效果框架类型：选择合适的框架类型，如固定宽度、百分比等框架