Dreamweaver CS3网页设计与制作教程 第2版 教学课件 作者申莉莉教案第7章.ppt

《Dreamweaver CS3网页设计与制作教程 第2版 教学课件 作者申莉莉教案第7章.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第7章框架7.1案例1：利用框架创建网页7.2选择框架和框架集7.3编辑框架7.4设置框架和框架集属性7.5案例2：嵌套“奥运小知识”框架7.6上机实训7.7习题7.1案例1：利用框架创建网页【案例目的】利用框架，创建网页，点击框架左侧的“英语读物”，出现网页如图7-1所示。【核心知识】框架的创建、选择、编辑链接，以及正确保存框架。图7-1利用框架创建网页7.1.1框架和框架集框架是指网页在一个浏览器窗口下面分隔成几个不同区域的形式。单个框架是指在网页上定义的一个区域。框架由两个主要部分—框架集和框架。框架

2、集是一个定义了框架结构和属性的HTML网页，包括框架数量、框架尺寸、载入的框架网页等属性。框架集不会显示在浏览器中，它只是用于容纳和组织保存框架网页的一个容器。图7-2框架和框架集的关系7.1.2创建框架和框架集1.运行DreamweaverCS3，选择“文件”－“新建”命令，弹出“新建文档”对话框，在对话框中选择“示例中的页”－“框架集”－“上方固定，左侧嵌套”选项，如图7-3所示。图7-3“新建文档”对话框2.单击“创建”按钮，弹出“框架标签辅助功能属性”对话框，如图7-4所示，在此可设置可以为每一个框

3、架指定一个标题。3.单击“确定”按钮，即可创建一个上方固定，左侧嵌套的框架集，如图7-5所示。图7-4“框架标签辅助功能属性”对话框图7-5创建上方固定，左侧嵌套的框架集7.1.3保存框架每个框架包含一个文件，因此一个框架集会包含多个文件，在保存网页时，要将整个网页文档都保存下来。例如保存图7-5所示的框架集，操作步骤如下：1.选择“文件”“保存全部”命令，整个框架边框会出现一个阴影框，同时会弹出“另存为”对话框，命名为index.html，表示整个框架集的名称，如图7-6所示。图7-6命名整个框架集2.

4、单击【保存】按钮，弹出第2个“另存为”对话框，右边框架内侧出现阴影，命名为main.html，表示右边框架即主框架的文件名，如图7-7所示。3.单击【保存】按钮，分别为依次弹出的第2个和第3个“另存为”对话框命名为left.html和top.html，表示左边框架和上方框架的文件名。图7-7命名右边框架案例分解1：创建和保存框架集（1）在DreamweaverCS3中选择“文件”“新建”“示例中的页”“框架集”“上方固定，左侧嵌套”选项，如图7-8所示。（2）选择“文件”“保存全部”命令，保存所创

5、建的文件。将整个框架集保存为index.html，右边框架保存为main.html，左边框架保存为left.html，上方框架保存为top.html。图7-8创建新框架7.2选择框架和框架集在Dreamweaver中，选择“窗口”“框架”命令，可以打开框架面板，如图7-9所示。在面板中单击要选择的框架，即可选中。所选中的框架边框内侧会出现虚线，如图7-10所示。或者按Alt键，在要选择的框架内单击鼠标左键也可选中。图7-9框架面板图7-10通过框架面板选中框架图7-11选中框架集图7-12在文档中选中框架

6、在文档窗口中，当鼠标指针靠近框架集的边框并且出现上下箭头时，单击整个框架集的边框，可以选择整个框架集，如图7-13所示。图7-13在文档中选中框架集7.3.1拆分框架制作框架网页可以根据Dreamweaver自定义的框架集来创建，也可以自行设计各种类型的框架集结构，以符号设计要求。1.将光标放置在图7-13的右侧框架中，在“布局”插入栏的“框架”下拉菜单中选择“底部框架”按钮，如图7-14所示，将其拆分为如图7-15所示框架。图7-14“框架”下拉菜单图7-15拆分框架2.按Alt键选择图7-13所示的左侧

7、框架，用鼠标向右拖动框架的右边框，将其拆分成如图7-16所示框架。图7-16拖动鼠标拆分框架3.将光标放在上方框架中，直接执行“修改”“框架集”“拆分上框架”命令进行拆分，如图7-17所示。还可以选择“拆分左框架”、“拆分右框架”、“拆分下框架”命令进行拆分。4.将光标放在框架的四个角，当光标变成时，拖动到框架的中间，可以将框架拆分成4个，如图7-18所示。图7-17通过命令拆分框架图7-18拖曳一个角来拆分框架案例分解2：拆分框架（1）按Alt键选择图7-8所示的框架下边框，用鼠标向上拖动框架的上边框

8、，将其拆分成如图7-19所示框架。（2）在上框架中插入图片，左框架中插入7行1列的表格，如图7-20所示。并在表格中输入内容。图7-19拆分框架图7-20填写框架内容7.3.2删除框架用鼠标将框架边框脱离编辑窗口即可删除框架，如果框架中有未保存的内容，Dreamweaver会提示保存该文档。通过关闭显示框架集的文档窗口，可以删除框架集，如果该文件已经保存，可以删除该文件。如果边框拖拽错了，只要用鼠标把需要删除的边