边做边学——Dreamweaver CS3网页设计案例教程教学课件 作者 官辛华 06.ppt

《边做边学——Dreamweaver CS3网页设计案例教程教学课件 作者 官辛华 06.ppt》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、本章简介：框架的出现大大地丰富了网页的布局手段以及页面之间的组织形式。浏览者通过框架可以很方便地在不同的页面之间跳转及操作，BBS论坛页面以及网站中邮箱的操作页面等都是通过框架来实现的。第6章　使用框架课堂学习目标框架与框架集框架的属性设置6.1办公用品网页案例分析设计理念操作步骤相关工具6.1.1案例分析办公用品网页的功能是展示办公用品，发布产品的促销信息，为客户提供在线帮助。在设计网页时要注意办公用品的特色和客户端的真实需求，处理好页面布局及素材之间的比例关系，进行合理的配色和编排。6.1.2设计理念在网页设计、制作过程中，考虑到办公用品的时代感，界面的规划也要

2、体现出现代气息。在背景处理上挑选了最具代表性的打印机和透明色块相接合，体现办公的节奏和效率。左下方是产品的介绍说明，方便用户浏览和查看。右下方是最新产品的展示图。办公用品网页效果图6.1.3操作步骤12346.1.4相关工具建立框架集在DreamweaverCS3中，可以利用可视化工具方便地创建框架集。用户既可以通过菜单命令实现，又可以通过“插入”面板“布局”选项卡中的“框架”按钮实现。通过“新建”命令建立框架集通过“插入记录”命令建立框架集通过“框架”按钮建立框架集通过拖曳“框架”按钮到窗口中建立框架集2.为框架添加内容因为每一个框架都是一个HTML文档，所以可以

3、在创建框架后，直接编辑某个框架中的内容，也可在框架中打开已有的HTML文档，具体操作步骤如下。（1）在文档窗口中，将光标放置在某一框架内。（2）选择“文件>在框架中打开”命令，打开一个已有文档。3.保存框架保存框架时，分两步进行，先保存框架集，再保存框架。初学者在保存文档时很容易糊涂，明明认为保存的是框架，但实际上保存的是成框架集；明明认为保存的是某个框架，但实际上保存成框架集或其他框架。因此，在保存框架前，用户需要先选择“窗口>属性”命令和“窗口>框架”命令，启用“属性”面板和“框架”控制面板。然后，在“框架”控制面板中选择一个框架，在“属性”面板的“源文件”选项

4、中查看此框架的文件名。用户查看框架的名称后，在保存文件时就可以根据“保存”对话框中的文件名信息知道保存的是框架集还是某框架了。保存框架集和全部框架保存框架集文件保存框架文件4.框架的选择在对框架或框架集进行操作之前，必须先选择框架或框架集。选择框架选择框架集5.修改框架的大小立框架的目的就是将窗口分成大小不同的子窗口，在不同的窗口中显示不同的文档内容。调整子窗口的大小有以下几种方法。（1）在“设计”视图中，将鼠标指针放到框架边框上，当鼠标指针呈双向箭头时，拖曳鼠标改变框架的大小。（2）选择框架集，在“属性”面板中“行”或“列”选项的文本框中输入具体的数值，然后在“单

5、位”选项的下拉列表中选择单位。6.拆分框架通过拆分框架，可以增加框架集中框架的数量，但实际上是在不断地增加框架集，即框架集嵌套。拆分框架有以下3种方法。（1）先将光标置于要拆分的框架窗口中，然后选择“修改>框架集”命令，弹出其子菜单，其中有4种拆分方式。（2）先将光标置于要拆分的框架窗口中，然后单击“插入”面板“布局”选项卡中“框架”按钮右侧的黑色箭头，在弹出的菜单中选择一种拆分框架的方式，将框架窗口再划分。（3）选定要拆分的框架集，按住键的同时，将鼠标指针放到框架的边框上，当鼠标指针呈双向箭头时，拖曳鼠标拆分框架。7.删除框架将鼠标指针放在要删除的边框上

6、，当鼠标指针变为双向箭头时，拖曳鼠标到框架相对应的外边框上即可进行删除。删除框架6.1.5实战演练-房产信息网页使用“新建”命令创建框架网页，使用“保存全部”命令将框架全部保存，使用“表格”按钮和“图像”按钮制作完整的框架网页效果。效果图6.2儿童玩具网页案例分析设计理念操作步骤相关工具6.2.1案例分析儿童玩具网的功能是提供最全面、最新型的儿童玩具。本例是为一家生产及销售各种大中小型儿童玩具的专业公司制作的网页，除了界面达到吸引用户眼球的目的，还要注意网业的行业特色和构成要素。6.2.2设计理念在网页设计、制作过程中，将页面背景设置为橘黄色，并添加脚丫等图形元素，

7、使页面表现出热情活泼可爱的氛围。将有卡通图标的导航栏放在上面的右侧区域，有利于用户点击浏览。将玩具展示图放置在右下方，方便用户查看。儿童玩具网页效果图6.2.3操作步骤12346.2.4相关工具1.框架属性选中要查看属性的框架，选择“窗口>属性”命令，启用“属性”面板。“属性”面板2.框架集的属性选择要查看属性的框架集，然后选择“窗口>属性”命令，启用“属性”面板。“属性”面板3.框架中的链接设定框架的目的是将窗口分成固定的几部分，在网页窗口的固定位置显示固定的内容。如在窗口的顶部显示站点LOGO、导航栏等。通过导航栏的不同链接，在窗口的其他固定位置显示不同的网