Dreamweaver网页制作基础教程项目六制作新闻动态详细信息讲解材料.pptVIP

王焕杰 电话 邮箱:cnsyjsj@163.com 沈阳市信息工程学校 项目六 制作新闻动态详细信息 核心技术 ? 掌握框架的基本概念 ? 掌握创建框架结构的方法 ? 掌握编辑框架页面的方法 ? 掌握框架页面导航的链接方法 ? 掌握设置框架和框架集属性的方法 任务目标 ? 任务一：框架网页的创建和保存 ? 任务二：框架属性设置 能力目标 ? 创建框架结构 ? 框架页面导航的链接 ? 保存框架文件 项目背景 由于近期网络的用户较多，导致学校网站在打开时速度变慢。为了提高网络的利用率，要求网站管理员对网页进行优化。对网站内固定不变的部分，或者占用流量比较多的部分，实现仅加载一次，从而降低服务器的负担，提高网站的利用率。 项目分析 在浏览一些网站时可以发现，当单击页面上的某个超级链接时，会打开一个新的浏览器窗口，而几个页面中往往会一些相同的结构，或者有一些固定不变的元素。如何进行优化，让固定不变的因素不因为打开不同的页面而重新加载呢？这就需要使用框架技术。 框架技术可以将浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页，从而使用户能够一次浏览更多的内容。 项目分析 应用框架技术制作“校园新闻详细信息”网页，效果如图6.1.1所示。在浏览网页时，单击某个新闻标题，则对应的链接内容便显示在窗口右侧，而顶部的网站标志和左侧的内容仍然显示在屏幕上，如图6.1.2和图6.1.3所示。当单击一个超链接时，并不会打开一个新的网页，而仅是更新窗口中的部分内容。 顶部框架topFrame 右侧框架mainFrame 左侧框架leftFrame 底部框架bottomFrame 本项目实质上是一个应用了“上方固定，左侧嵌套”框架结构的网页。这种框架结构的页面被分成了3个区域，每一个区域都是一个框架（frame），而这些框架的集合，就称为框架集（frameset）。 由于每个框架都包含一个网页，因此文件窗口虽然被分成了4个框架，但却用到了5个网页，即4个框架网页和1个包含框架数、框架大小、载入框架等信息的框架集网页。 5个网页文件如下所示。 （1）框架集网页。 （2）顶部框架topFrame中包含的网页文件。 （3）左侧框架leftFrame中包含的网页文件。 （4）右侧框架mainFrame中包含的网页文件。 （5）底部框架bottomFrame中包含的网页文件。 因此，在保存这个框架集网页时，需要保存5个文件。 2．创建框架结构 利用Dreamweaver软件可以很容易地创建框架，Dreamweaver同时提供了多种创建框架的方法，读者既可以自己随意建立框架集，也可以使用Dreamweaver提供的预定义的框架集。 1）插入框架集 创建预定义的框架集。在Dreamweaver中创建框架，最简单的方法就是插入预定义的框架集。 自定义框架集。 2）增加/删除框架 3．保存框架集网页 正确保存框架集网页和其中的每一个框架页面是非常重要的。 任务一 网页中的文本 任务描述 利用框架结构为构建好的校园网制作“校园新闻”网页。 任务准备 框架集页面内容分析 将index6.html网页分解为4个文件：index6_top.html、index6_left.html、index6_main.html、index6_bottom.html，如图6.1.5至图6.1.8所示。 图6.1.9 框架集页面 任务实施 步骤1：新建一个网页文件。 步骤2：在菜单栏中选择“查看”→“可视化助理”→“框架边框”选项，显示出立体的灰色框架边框。 步骤3：在“插入”工具栏的“布局”类别中，单击“框架”按钮上的下拉箭头，然后选择预定义的框架集（“上方固定，左侧嵌套”框架结构）。 步骤4：在弹出的“框架标签辅助功能属性”对话框中，可以为每一个框架指定一个标题，如图6.1.10所示。本例使用默认值，单击“确定”按钮。 在文件窗口中便出现了包含3个区域的“上方固定，左侧嵌套”类型的框架集，如图6.1.11所示。 图6.1.10 “框架标签辅助功能属性”对话框 图6.1.11 ?插入框架集 分别保存框架集网页和各个框架中的网页文件，操作步骤如下。 步骤1： 在文件窗口中，单击任一框架边框，在文件窗口左下角“标签选择器”上出现“frameset”，表示已经选中整个框架集。 步骤2： 选择“文件”菜单下的“保存框架页”选项，在“另存为”对话框中将框架集网页保存到本地站点下的“项目6/result”文件夹中，命名为index6.html。 步骤3： 将插入点置于顶端框架，选择“文件”菜单下的“保存框架”选项，在“另存为”对话框中将顶端框架中的网页保存到本地站点下的“项目6/result”文件夹中，命名为index6_top