网页设计与制作项目9框架

实训九框架型网页的制作课时：2 班级：12计算机班实训日期：2013-4-19 编写时期：2013-4-10一、实训目的1、掌握框架集和框架的创建和保存；2、掌握框架、框架集的编辑和属性的设置；3、掌握框架超级链接。

二、实训内容利用框架制作如下图所示的页面效果，框架集网页为index.html，其中：图1为打开index.html的效果图；图2 单击左侧“动物类”的网页效果图；图3 单击左侧“插花类”的网页效果图；图4 单击左侧“海洋类”的网页效果图；图5 单击左侧“邮票类”的网页效果图；图6 单击左侧“诗歌”的网页效果图，其中诗歌内容在“si.txt”文档中；图7 单击左侧“散文”的网页效果图，其中散文内容在“爱情人生.doc”文档中。

图1 图2图3 图4图5 图6图7三、知识点分解该实训主要涉及的知识点就是框架和框架集的保存以及设置超链接的目标框架。

四、实训步骤1、选择[文件]/[新建]菜单命令。

2、在“新建文档”对话框“类别”列表中选择“框架集”选项。

3、从“框架集”列表选择相应的框架集，如图所示。

4、单击按钮，则会弹出“框架标签辅助功能属性”对话框，为每一框架指定一个标题，单击“确定”按钮，则上方框架标题为“topFrame”，左侧框架标题为“leftFrame”，右侧框架标题为“mainFrame”。

5、选择[查看]/[可视化助理]/[框架边框]菜单命令，则在文档中就会出现框架的边框。

6、选择[文件]/[保存全部]菜单命令，将框架集文件保存为index.html，上方框架文件保存为top.html，左侧框架文件保存为left.html，右侧框架文件保存为main.html。

注意：对于框架集和框架文件保存的文件名，一定要做的看到文件名就能知道该文件对应与该框架集中的哪个框架。

7、选择[窗口]/[框架] 菜单命令，打开“框架”面板，直接在面板中单击最外面的框架集，打开属性对话框，设置“行值”：119px，再选择里面嵌套的框架集，设置“列值”：253px。

框架是什么，框架就好比我们的骨骼，支撑着整个网页，如果一个网页没了框架，那么就感觉像一盘散沙，因此为了更好的实现网页的效果，我们就要学会给网页制作一个框架，为了更好的理解什么是框架。

我们画一张示意图来进行讨论。

这是一个左右型的框架，由三个网页文件组成的。

首先外部的框架是一个文件，图中我们用index.htm命名。

框架中左边命名为A，指向的是一个网页A.htm。

右边命名为B，指向的是一个网页B.htm。

下面我们就来从头开始制作一个框架。

1、点“文件”菜单>新建，弹出“新建文档”对话框如下图：或在插入栏>布局>选＂框架：左框架＂如下图：Dreamweaver MX 2004生成一个空白的框架页面，如下图：2、选择「窗口」菜单＞“框架”，弹出“框架”面板如下图。

从框架面板可知，系统对左右框架生成命名。

左框架名为：leftFrame，右框架名为：mainFrame，当然您可以通过框架属性面板对框架重新命名，了解这一点非常重要。

创建超级链接时，要依据它正确控制指向的页面。

3、保存框架。

选择“文件”菜单点击“保存全部”。

系统弹出对话框。

这时，保存的是一个框架结构文件。

我们按照惯例都命名为index.htm。

保存的时候如果虚线框笼罩的是周围一圈就是保存框架结构。

（下图）虚线笼罩在右边就是保存框架中右边网页。

（如下图）虚线笼罩在左边就是保存框架中左边的网页：（如下图）三个页面保存完毕。

4、下面我们要实现按左边的超级链接，对应的页面出现在右边。

在左边的页面中做上超级链接。

指向一个已经存在的页面。

注意做好链接以后，要在目标栏中设置为mainFrame。

(如下图）6、设置完毕，保存全部，按F12预览网页。

链接指向的页面出现在右边框架中。

7、重复以上步骤，把左框架所有的链接做完，一个简单的网站导航结构创建完成。

更多Dreamweaver 教程请继续访问建站学的Dreamweaver教程专区。

实验七框架结构【实验目的】：通过本实验，使学生熟悉创建、编辑框架网页和利用框架来布局页面的基本方法。

《网页设计与制作》教案第一章：网页设计基础1.1 网页设计概述介绍网页设计的概念、目的和重要性讨论网页设计的标准和原则1.2 网页设计流程讲解网页设计的基本流程，包括需求分析、设计稿、切片、编码和测试等步骤1.3 网页设计工具介绍常用的网页设计工具，如Photoshop、Dreamweaver、Fireworks等第二章：HTML与CSS基础2.1 HTML概述介绍HTML的概念、作用和基本结构2.2 HTML标签讲解常用的HTML标签，如、段落、图像、、列表等2.3 CSS概述介绍CSS的概念、作用和基本语法2.4 CSS选择器讲解常用的CSS选择器，如类选择器、ID选择器、属性选择器等第三章：网页布局与排版3.1 网页布局概述介绍网页布局的概念和重要性3.2 常用的网页布局方法讲解常用的网页布局方法，如固定布局、百分比布局、弹性布局等3.3 排版与字体介绍排版和字体的概念、作用和常用属性3.4 响应式网页设计讲解响应式网页设计的概念、方法和实现方式第四章：网页特效与交互4.1 网页特效概述介绍网页特效的概念和作用4.2 JavaScript基础讲解JavaScript的概念、作用和基本语法4.3 常用的网页特效与实例讲解常用的网页特效，如鼠标悬停效果、下拉菜单、滚动动画等，并提供实例进行演示4.4 交互式网页设计讲解交互式网页设计的概念、方法和实现方式第五章：网页设计与制作实践5.1 实践项目概述介绍实践项目的需求和目标5.2 网页设计稿制作根据实践项目需求，使用设计工具制作网页设计稿5.3 网页编码与测试使用HTML和CSS编写网页代码，并进行测试和调试讲解网页发布的步骤和注意事项，以及常用的网页推广方法第六章：网页图像与多媒体6.1 图像格式与优化介绍常见的网页图像格式，如JPG、PNG、GIF等，以及图像优化方法6.2 音频与视频讲解如何在网页中嵌入音频和视频，以及常用的媒体格式6.3 Flash动画介绍Flash动画的概念、制作方法和在网页中的应用6.4 动态效果与动画讲解如何在网页中实现动态效果和动画，包括使用CSS动画和JavaScript实现第七章：网页服务器与数据库7.1 服务器概述介绍网页服务器的概念、作用和常用服务器软件7.2 数据库概述介绍数据库的概念、作用和常用数据库管理系统7.3 动态网页制作基础讲解动态网页制作的基本原理，如服务器端编程和数据库连接7.4 实践项目：搭建简易的个人博客系统讲解如何使用服务器和数据库搭建一个简易的个人博客系统，包括前端设计和后端编程第八章：网页安全与SEO介绍网页安全的概念和重要性，以及常见的网络安全威胁8.2 网页安全措施讲解如何防范网络攻击和提高网页安全性，如使用SSL证书、X-Frame-Options 等8.3 SEO概述介绍搜索引擎优化（SEO）的概念、作用和方法8.4 SEO实践技巧讲解如何优化网页内容、结构和，以提高搜索引擎排名第九章：网页设计与制作的进阶技巧9.1 响应式网页设计深入讲解响应式网页设计的原理和实践方法，包括媒体查询和弹性布局9.2 前端框架与库介绍常用的前端框架和库，如Bootstrap、jQuery、React等，以及如何使用它们提高网页制作效率9.3 网页性能优化讲解如何提高网页加载速度和性能，包括图片优化、代码压缩和缓存策略9.4 实践项目：制作一个响应式商务网站讲解如何使用响应式设计和前端框架制作一个商务网站，包括布局、样式和交互设计第十章：网页设计与制作的拓展与趋势10.1 网页设计与制作的未来趋势探讨网页设计与制作的发展方向，如虚拟现实（VR）、增强现实（AR）等技术的应用10.2 网页设计规范与最佳实践介绍网页设计规范和最佳实践，以提高网页质量和用户体验10.3 跨平台网页设计与制作讲解如何使用跨平台技术，如PWA（Progressive Web Apps）、Node.js等，实现网页在不同平台和设备的兼容性和性能10.4 实践项目：制作一个跨平台的网页应用重点和难点解析重点环节1：网页设计基础和流程网页设计的标准和原则是设计的基石，需要重点掌握。

网页设计与制作教程（第2版） 162 动”选项为“否”，选择“不能调整大小”选项。

（6）在“框架”面板中的“mainFrame ”框的任意处单击选择该框架，在属性检查器中设置“滚动”选项为“是”，选择“不能调整大小”选项。

（7）保存文档。

9.2.3 制作框架中的网页
本实例创建的框架结构共有4个网页文件，其中框架集网页zhejiang.html 中包含了3个文档，它们分别是位于顶部框架的top.html 、位于左侧框架的left.html 和位于右侧下方框架的xihu.html 。

下面将这些框架中的网页分别制作出来，并另外制作两个网页作为右边内容框中要显示的网页。

1．制作top.html 文件
（1）在文档窗口中的顶部框架内单击，文档窗口上方标签显示为“top.html ”，在“标题”框内输入“顶部框架”。

（2）在该框架内单击定位插入点，然后输入文字“锦绣中华游”，使用属性检查器将文本设置为“标题1”文字。

（3）添加一个段落，然后制作站点的文本导航条。

（4）打开样式面板，新建一个“仅对该文档”的标签样式body 。

（5）样式定义如下。

body{
text-align: center;
}
（6）保存文档，如图9.12所示。

图9.12 制作top.html 文档
2．制作left.html 文件
（1）在文档窗口中的左侧框架内单击，文档窗口上方标签显示为“left.html ”，在“标题”框内输入“左侧框架”。

1488.2 框架属性框架属性用来确定框架集内各个框架的名称、源文件、链接、边距、滚动、边框和是否能够调整大小。

每个框架和框架集都有属于自己的属性面板，可以用来设置框架和框架集的属性，但是框架集属性控制着框架的大小和其他几个子框架之间边框的颜色和宽度，还有打开链接的目标框架窗口等。

8.2.1 布局框架基本属性框架属性面板可以用来查看和设置框架属性，一般包括命名框架、设置边框、链接和边距等，它的具体操作步骤如下所示。

在框架活动面板中单击任意一个框架，属性面板就变成了对框架属性的设置，效果如图8-8所示。

如果“属性”面板没有打开，那就选择“窗口“→“属性”命令，就会在当前页面下方显示“属性”面板，接下来单击“属性”面板右下角的扩展箭头，这样就可以查看所有框架属性，效果如图8-9所示。

图8-9 框架属性●框架名称：如果想要命名框架，那么就在Frame Name（框架名）域输入名称。

此时输入的框架名将可能被超链接和脚本引用，所以，命名框架时必须要让框架名是一个有意义的名称，可以使用下划线，但是不能使用横杠、句号和空格等，而且框架名应该以字母开头，但是不要使用JavaScript的保留字（例如top或navigator等）。

●源文件：用来指定当前框架中打开的源文件（网页文件）。

可以直接在文本框中手动输入文件名，或者单击文件夹图标，浏览文件并且选择一个合适的文件，也可以把光标置于框架内，然后选择“文件”→“在框架中打开”命令来打开一个文件。

●滚动条：用来设置当没有足够的空间来显示当前框架的内容时是否显示滚动条。

本项属性有4种选择，“是”表示显示滚动条，“否”表示不显示滚动条，“自动”表示当没有足够的空间来显示当前框架的内容时自动显示滚动条，“默认”表示采用浏览器的默认值，图8-10所示的是滚动条选择“是”时显示的结果。

●不能调整大小：选择此复选框，可以防止用户在浏览时拖动框架边框来调整当前框架的大小。

●边框：用来决定当前框架是否显示边框，一般有“显示”“不显示”和“默认”3种基本选择。