Dreamweaver网页设计培训教程09.ppt

《Dreamweaver网页设计培训教程09.ppt》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第9课使用框架布局网页本课要点具体要求本课导读上机练习本课要点了解框架并创建框架框架及框架集的基本操作和属性设置具体要求了解框架及框架集熟悉框架及框架集的创建掌握框架及框架集的基本操作掌握框架及框架集的属性设置本课导读使用框架可以避免重复劳动，如将共同的部分（顶部的导航区、版权信息区）分别制作成单独的网页，然后通过框架将其链接到各个框架网页中，而不必每个网页都重新制作这些共同的部分，从而节约了时间，也可以减少整个网站的大小。9.1了解框架并创建框架在布局页面时除了可以使用层和表格外，还可以使用框架进行布局，下面介绍框架的概念及创建方法。9.1了解框架并创建框架9.1.1知识讲解9.1.2

2、典型案例——“精品欣赏”网页框架制作9.1.1知识讲解框架的功能是把浏览器窗口划分为若干个区域，分别显示不同的网页。框架集的功能是定义一组框架的布局和属性。9.1.1知识讲解1.了解框架及框架集2.框架及框架集的创建3.框架及框架集的保存1.了解框架及框架集在网页上定义的一个区域就是单个框架，而框架集则记录了同一个网页中多个框架的布局、超链接和属性信息。利用框架可以把浏览器窗口划分为若干个区域，每个区域可以添加任意网页元素，也可分别显示不同的网页。1.了解框架及框架集框架集与框架之间的关系其实就是包含与被包含的关系，框架集相当于一个容器，框架则是放在容器中的东西，框架集记录了框架的位置，

3、以及框架中包含的网页的链接地址。2.框架及框架集的创建Dreamweaver8的预定义框架集可以直接创建，也可在页面中加载。1）直接创建预定义框架集2）加载预定义框架集3）手动创建框架集3.框架及框架集的保存框架创建完成后，可将其保存起来。在Dreamweaver8中保存框架和框架集与一般网页文档的保存有所不同，可以保存某个框架文档，也可以单独保存框架集文档，还可保存框架集和框架中出现的所有文档。1）保存框架文档2）保存框架集文档3）保存框架集中的所有文档9.1.2典型案例——“精品欣赏”网页框架制作案例目标本案例主要练习利用框架布局页面。本例中共有5个框架，其中顶部及底部各1个，中间共

4、3个框架。效果图位置：【第9课源文件jingpin1kuangjia1.html】9.1.2典型案例——“精品欣赏”网页框架制作操作思路（1）首先创建一个“上方固定，下方固定”类型的框架集。（2）然后将中间的框架进行分割、调整，使其中间具有3个框架。（3）最后保存框架及框架集即可。9.1.2典型案例——“精品欣赏”网页框架制作操作步骤具体操作步骤请教师参照软件和书中内容进行讲解。9.1.2典型案例——“精品欣赏”网页框架制作案例小结本案例练习了框架页面的创建及保存，其中要重点掌握的是手动进行框架拆分的方法，要区分按住【Alt】键与未按住【Alt】键而直接拆分时的区别。另外，本案例

5、中保存框架及框架集时都使用了快捷键，用户可在Dreamweaver8的【文件】菜单中找到与命令对应的快捷键。9.2框架及框架集的基本操作和属性设置框架创建完成后，还需对其进行一些操作，如选择框架、设置属性、链接网页等。9.2框架及框架集的基本操作和属性设置9.2.1知识讲解9.2.2典型案例——“精品欣赏”网页框架属性设置9.2.1知识讲解框架及框架集可进行选择、删除等操作。9.2.1知识讲解1.框架及框架集的基本操作2.删除框架3.框架及框架集的属性设置1.框架及框架集的基本操作在对框架和框架集进行属性设置以及其他操作前，需要先选择相应的框架和框架集。1）认识【框架】面板2）选中框架和

6、框架集2.删除框架如果要删除不需要的框架，可用鼠标将要删除框架的边框拖至页面外即可，如果是嵌套框架，则将其边框拖到父框架边框上或拖离页面即可3.框架及框架集的属性设置框架集创建好后，即可在各框架中直接添加网页内容，或分别制作各框架要链接的网页后，在【属性】面板中进行链接。1）设置框架的属性2）设置框架集的属性9.2.2典型案例——“精品欣赏”网页框架属性设置案例目标本案例主要练习框架页面的设置。素材位置：【第9课素材jingpin2】效果图位置：【第9课源文件jingpin2kuangjia2.html】9.2.2典型案例——“精品欣赏”网页框架属性设置操作思路（1）首先

7、打开任意一个框架网页，创建外部样式表以便其他网页能引用，然后为该框架网页添加图像。（2）接着打开其他框架网页，链接外部样式表，然后为其添加图像。其中“main.html”框架网页需添加背景图像并输入文本。（3）接着将9.1.2节制作的框架网页“kuangjia1.html”另存为“kuangjia2.html”，然后对各个框架及框架集进行属性的设置。（4）最后保存框架及框架集即可。9.2.2典型案例——“精品欣赏”网页框架属性设置操