HTML框架制作导航

第17课 制作网页展活动（教学设计）—2024-2025学年人教版（2024）信息科技七年级全一册

一、教材分析 本节课处于学生学习网页知识的实践应用关键阶段，承接前面了解网页结构、代码以及初步探秘网页构建原理等内容，重点聚焦于让学生通过制作网页展示活动这一项目，将所学知识技能进行整合运用。教材以活动策划为线索，引导学生经历从确定主题、规划页面布局，到运用 HTML、CSS 和 JavaScript 编写代码实现网页功能，再到后期优化完善的完整流程，旨在培养学生的项目管理能力、技术应用能力以及创新实践精神，让学生切实体会网页制作在信息传播与展示方面的强大作用，贴合七年级学生渴望动手创造、展示自我的心理需求。 二、学情分析 七年级学生经过前期课程学习，已对网页的基本元素、HTML 基础语法、CSS 美化样式有了一定认识，具备初步的代码阅读和编写能力，但在面对一个完整的网页制作项目时，仍存在诸多挑战。例如，缺乏系统的项目规划思维，难以将脑海中的创意清晰转化为具体的网页布局和功能设计；在代码编写过程中，容易出现语法错误，且对于不同代码段之间的协同工作原理理解不够深入；对于如何优化网页性能、提升用户体验，还缺少有效的方法和意识。然而，此阶段学生好奇心强、学习积极性高，只要给予适当引导和支持，就能在实践中逐步成长。 三、教学目标 知识与技能目标 能够依据活动需求，独立确定网页主题，撰写详细的网页策划方案，包括页面布局草图、内容板块规划、目标受众分析等。 熟练运用 HTML 标签构建复杂网页结构，如多栏式布局、嵌套表格、导航菜单等，准确设置标签属性，确保页面逻辑清晰、层次分明。 灵活运用 CSS 样式对网页进行精细化美化，掌握 CSS 布局模型（如浮动、定位）应用，实现元素精准定位与排列，能根据主题风格调配色彩、字体、背景等样式，打造独具特色的视觉效果。 理解 JavaScript 在网页交互中的核心作用，掌握基本的 JavaScript 事件驱动编程，如按钮点击触发函数、表单提交验证等，能为网页添加实用且有趣的交互功能，提升用户参与度。 学会使用网页开发工具（如 Visual Studio Code）进行代码编写、调试与管理，掌握基本的代码错误排查技巧，如语法错误提示、逻辑错误分析，确保网页正常运行。 过程与方法目标 通过小组合作制定网页策划方案，培养团队协作、沟通交流与问题协商解决能力，学会倾听他人意见，整合团队智慧。 在网页制作过程中，以任务驱动方式逐步推进，培养学生的自主学习、自我管理与任务分解执行能力，如将网页制作分为结构搭建、样式美化、交互添加等子任务，有序完成。 借助代码调试与优化环节，锻炼学生的观察能力、分析能力与应变能力，能够从网页运行效果反向推导代码问题，迅速采取补救措施。 组织学生展示并互评网页作品，培养学生的审美鉴赏、批判性思维与语言表达能力，在对比中发现差距，学习他人长处，改进自身作品。 情感态度与价值观目标 体验网页制作带来的成就感，激发对网页开发技术的深入探索欲望，培养勇于创新、敢于实践的精神品质。 树立正确的项目意识，认识到一个成功的网页作品需要精心策划、严谨实施、反复打磨，培养耐心、细心与责任心。 强化知识产权保护观念，在使用图片、文字等素材时确保来源合法，尊重他人创作成果，遵守网络道德规范。 四、教学重难点 教学重点 运用项目式学习方法，引导学生系统地制定网页策划方案，重点讲解如何从活动主题出发，设计合理的页面布局、规划内容呈现顺序，确保方案具有可行性与前瞻性。 详细演示 HTML 复杂结构构建技巧，结合实例讲解多栏布局的实现方式（如使用 div 标签结合 CSS 布局属性）、导航菜单的制作方法（利用无序列表与超链接标签），让学生能够快速搭建起稳固的网页框架。 现场展示 CSS 精细化美化过程，通过修改 CSS 属性值，演示如何运用色彩搭配原理打造网页主色调、利用字体样式突出标题与正文区别、借助布局属性优化元素间距，使网页呈现出专业美观的视觉效果。 手把手教授 JavaScript 基本交互编程，以按钮点击触发弹窗、表单提交验证为例，讲解事件处理函数的编写、变量的运用以及与 HTML 元素的关联，让学生切实掌握为网页增添交互活力的方法。 教学难点 帮助学生建立起代码模块化思维，理解如何将 HTML、CSS 和 JavaScript 代码合理组织，使其相互配合、协同工作，避免代码混乱、功能冲突，提升网页开发效率与可维护性。 引导学生站在用户体验角度优化网页，组织研讨活动分析网页加载速度、交互便捷性、视觉舒适度等因素对用户的影响，培养学生主动优化网页性能的意识与能力，如采用图片压缩、代码精简等技术手段。 针对学生在创意设计方面的不足，设计灵感激发环节，如赏析优秀网页作品、开展创意头脑风暴，助力学生突破思维定式，在网页主题、布局、交互等方面融入独特创意，展现个性魅力。 五、教学方法 讲授法、演示法、小组合作法、项目驱动法、案例分析法 六、教学准备 多媒体教室、联网计算机、网页开发工具（如 Visual Studio Code）、教学课件、优秀网页作品案例集、网页制作项目任务卡、常见网页素材资源包（图片、图标、字体等） 七、教学过程 情境导入 展示学校近期即将举办的各类活动海报或宣传视频，如运动会、科技节、文化艺术节等，提问学生：“如果让你们来负责为这些活动制作线上宣传网页，你们会怎么做呢？” 引导学生思考线上宣传网页的优势，如传播范围广、信息更新便捷等，激发学生的兴趣与参与热情，引出本节课主题 —— 制作网页展活动。 知识新授 项目策划指导：利用 PPT 展示网页策划的关键步骤，包括确定主题（结合活动特点与目标受众喜好）、绘制页面布局草图（简单示意各板块位置与大小）、规划内容板块（如活动介绍、日程安排、报名方式等）、分析目标受众需求（考虑不同人群关注重点差异）。以科技节网页为例，详细讲解如何一步步制定完整策划方案，让学生初步掌握策划方法。 HTML 结构搭建：打开网页开发工具，新建 HTML 文件，演示如何运用 div、span、ul、li、a 等标签构建多栏式布局、导航菜单等常见网页结构。讲解标签嵌套规则，如在 div 标签内嵌套 p 标签用于放置段落内容，展示如何通过设置标签属性（如 id、class）方便后续 CSS 样式应用，让学生动手跟随操作，初步搭建网页基本框架。 CSS 美化实战：在已有 HTML 结构基础上，打开 CSS 文件，演示如何运用 CSS 选择器（标签选择器、类选择器、ID 选择器）选中 HTML 元素，并通过修改属性值（如 font-size、color、background-color、margin、padding 等）美化网页。讲解 CSS 布局属性（如 float、position）应用，实现元素精确排列，如让图片与文字环绕排列，展示不同色彩搭配方案对网页风格塑造，让学生实时观察网页变化，掌握 CSS 美化技巧。 JavaScript 交互添加：展示一个带有 JavaScript 交互的网页示例，如点击按钮弹出活动详情对话框，打开代码文件讲解 JavaScript 事件驱动编程原理。以按钮点击事件为例，演示如何定义事件处理函数，运用变量存储数据，如记录点击次数，讲解如何将 JavaScript 代码与 HTML 元素关联（通过 onclick 等事件属性），让学生了解 JavaScript 为网页带来动态交互的神奇效果，尝试添加简单交互功能。 小组合作实践 将学生分成小组，每组 4 - 5 人，发放网页制作项目任务卡，要求小组选择一个学校活动主题，依据所学知识制作宣传网页： 共同制定详细网页策划方案，绘制布局草图，明确分工，如成员 A 负责 HTML 结构搭建，成员 B 负责 CSS 美化，成员 C 负责 JavaScript 交互添加，成员 D 负责素材收集整理。 按照策划方案，逐步推进网页制作，定期小组内交流，解决遇到的代码问题、设计分歧等，教师巡视各小组，及时提供技术指导与创意建议。 在网页基本功能实现后，进行整体优化，包括检查代码语法错误、测试交互功能稳定性、优化网页加载速度，确保网页质量。 作品展示与互评 各小组推选一名代表，通过教室投屏展示小组制作的网页作品，介绍网页主题、策划思路、运用的技术亮点以及遇到的困难与解决方法。 其他小组进行互评，从网页主题契合度、布局合理性、美观程度、交互功能实用性等方面进行评价，提出优点与改进建议，教师总结点评，评选出优秀作品，给予表扬与奖励。 拓展提升 展示几个业界前沿的活动宣传网页案例，剖析其运用的高级技术，如 HTML5 动画效果、CSS3 3D 变换、大数据驱动的个性化推荐等，拓宽学生视野。 引导学生思考如何将这些先进技术逐步融入自己未来的网页制作中，鼓励课后自主学习相关知识，探索更多创意可能。 课堂总结 与学生一起回顾本节课制作网页的全过程，包括项目策划、HTML 结构搭建、CSS 美化、JavaScript 交互添加以及作品展示互评等环节，以思维导图形式呈现知识与技能要点。 八、教学反思 在教学过程中，要充分考虑学生项目实践中的困难，提前预判并

Flask后端导航栏开发模板随着互联网技术的发展和应用范围的不断扩大，Web开发已经成为了一个重要的技术领域。

在Web开发中，后端开发是至关重要的一环，而Flask作为一款轻量级的Web应用框架，其简洁的代码和丰富的扩展库使其备受开发者青睐。

本文将介绍使用Flask进行后端导航栏开发的模板，以帮助开发者更快速、高效地搭建Web应用。

一、背景随着Web应用的不断发展，用户对于页面导航栏的需求也越来越高。

良好的导航栏可以帮助用户快速定位页面信息，提升用户体验。

而在Flask后端开发中，如何设计和实现一个简洁、美观的导航栏模板成为了开发者们关注的焦点。

二、基本思路在Flask中实现导航栏模板，可以通过模板引擎的方式来实现。

通过在模板文件中定义导航栏的结构和样式，然后在视图函数中渲染模板并传递相应的数据，即可实现一个基本的导航栏。

接下来将详细介绍如何使用Flask实现后端导航栏的开发模板。

三、模板结构为了实现一个具有一定扩展性和可维护性的导航栏模板，我们可以将导航栏的结构和样式定义在单独的模板文件中，然后在需要使用导航栏的页面中引入该模板文件。

这样做不仅可以使编码更加清晰，还可以方便地对导航栏进行统一管理和修改。

导航栏模板的基本结构如下所示：```html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>导航栏</title><link rel="stylesheet" href="style.css"></head><body><header><nav><ul><li><a href="/">首页</a></li><li><a href="/about">关于我们</a></li><li><a href="/services">服务项目</a></li><li><a href="/contact">通信我们</a></li></ul></nav></header></body></html>```在上述结构中，导航栏包括了首页、关于我们、服务项目和通信我们四个信息，开发者可以根据实际需求进行修改和扩展。

网页设计中的框架是什么-优缺点-注意什么问题框架是网页中常用的一种页面制定方法。

frame的功能是在一个浏览器窗口中将网页分成假设干不同的区域，以便在一个浏览器窗口中显示多个HTML页面。

框架是网页中常用的一种页面制定方法。

frame的功能是在一个浏览器窗口中将网页分成假设干不同的区域，以便在一个浏览器窗口中显示多个HTML页面。

使用该框架可以非常方便的完成导航工作，使网站的结构更加清楚，并且各个框架之间没有干扰;使用该框架的特点是使网站的风格坚持一致。

通常，网站的同一部分被做成一个页面，作为整个网站框架结构的子框架的内容。

框架结构由两部分组成：框架：框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口其余部分中显示的内容无关的web 文件。

Frameset:Frameset也是一个网页文件。

它将窗口按行和列划分为多个框架。

帧数取决于有多少页。

每个框架中显示不同的网页文件。

所谓框架，就是把网页分成几个框架窗口，同时获得多个网址。

Ltframeset用于划分框架窗口。

每个框架窗口都有一个，必须在的范围内使用。

2 网页制定框架的优缺点有哪些1、优点(1)访问者的浏览器不必须要为每个页面重新加载与导航相关的图形。

(2)每个框架都具有自己的滚动条(如果内容太大，在窗口中显示不下)，因此访问者可以独立滚动这些框架。

例如，当框架中的内容页面较长时，如果导航条位于不同的框架中，那么向下滚动到页面底部的访问者就不必须要再滚动回顶部来使用导航条。

2、缺点(1)可能难以实现不同框架中各元素的准确图形对齐。

(2)对导航进行测试可能很耗时间。

(3)各个带有框架的页面的URL不显示在浏览器中，因此访问者可能难以将特定页面设为书签(除非您提供了服务器代码，使访问者可以加载特定页面的带框架版本)。

3网页制定框架应注意的问题1、避免框架和内联框架框架和内联框架使得搜索引擎难以抓取网站，因为它们与标准所约定的一个网页就是一个html文件相背驰，而是包涵了多个html文件。

网页设计与制作实验指导一览表实验1 HTML语言实训目的:为了让学生能熟悉学习网页不可避免要接触的HTML语言，达到用该语言可以建立一个简单的网页的目的，同时了解建立站点是做网站必不可少的，要掌握建立站点的方法。

素材准备：准备制作网页所需的文字素材、图像素材。

实验课时：2学时实验内容：1.创建站点；2.新建网页以及保存，重命名；3.输入HTML语言。

实验步骤：1.在E盘中新建本地根文件夹，命名为root，并在该文件夹中新建image文件夹以存放网站中所要用到的图片。

2.定义站点：设置 "站点名称"，命名为 "mysite";设置本地根文件夹,指定为E盘下的root文件夹;设置 "HTTP地址"为localhost。

3.创建与设置文档的页面属性：新建一个页面，保存名为“HTML基础”的文档。

4.切换代码模式下，输入代码。

5.保存文件，预览文件效果。

实验过程注意事项:1.在创建站点的过程中注意建立本地文件夹，文件夹命名最好为英文；网站中所有的文件最好取名为英文；注意文件的路径；2.所有的图片文件单独放在image文件夹内。

实验思考:除了用HTML语言来做这个网页，还有没有其它的方法？书写实验报告要求:根据最终所作的网页，写出实验报告。

页面效果图：图1-1实验2 初识Dreamweaver实验目的：为了让学生能熟练掌握Dreamweaver的安装与卸载，启动与退出，基本工作环境和设置，对Dreamweaver操作环境有一定了解。

素材准备：准备好从网上下载的安装程序。

实验课时：2学时实验内容：1.安装Dreamweaver：2.Dreamweaver的启动与退出：3.了解工具栏、菜单栏、标题栏等工作环境：4.卸载Dreamweaver实验步骤：1.打开从网上下载的Dreamweaver程序，双击安装。

2.安装完成后输入注册号。

3.启动Dreamweaver，并查看工具栏、菜单栏、标题栏等工作环境。

移动HTML5前端框架—MUI前⾔JRedu鉴于之前的很多前端框架（特别是响应式布局的框架），UI控件看起来太像⽹页，没有原⽣感觉，因此追求原⽣UI也是MUI的重要⽬标。

MUI以iOS平台UI为基础，补充部分Android平台特有的UI控件。

MUI主要有三种含义:⼀、⼀种单独发⾏的计算机操作系统Windows的多语种版本;⼆、世界上最权威的Halal认证的官⽅机构;三、在移动通讯技术中的专有名词。

⼀、使⽤该框架之前的准备⼯作1. 新建含mui的HTML⽂件在Hbuilder中，新建HTML⽂件，选择”含mui的HTML“模板，可以快速⽣成mui页⾯模板，该模板默认处理了mui的js、css资源引⽤。

2.输⼊mheader顶部标题栏是每个页⾯都必需的内容，在Hbuilder中输⼊mheader，可以快速⽣成顶部导航栏。

3.输⼊mbody除顶部导航、底部选项卡两个控件之外，其它控件都建议放在.mui-content控件内，在Hbuilder中输⼊mbody，可快速⽣成包含.mui-content的代码块。

⼆、UI组件1.accordion(折叠⾯板)折叠⾯板和⼆级列表类似，如下：<ul class="mui-table-view"><li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">⾯板1</a><div class="mui-collapse-content"><p>⾯板1⼦内容</p></div></li></ul><ul class="mui-table-view"><li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">⾯板2</a><div class="mui-collapse-content"><p>⾯板2⼦内容</p></div></li></ul>2.buttons(按钮)普通按钮在button节点上增加.mui-btn类，就可以⽣成默认按钮；如果需要其他颜⾊的按钮，则继续增加对应class即可，⽐如.mui-btn-blue即可变成蓝⾊按钮<button type="button" class="mui-btn">默认</button><button type="button" class="mui-btn mui-btn-primary">蓝⾊</button><button type="button" class="mui-btn mui-btn-success">绿⾊</button><button type="button" class="mui-btn mui-btn-warning">黄⾊</button><button type="button" class="mui-btn mui-btn-danger">红⾊</button><button type="button" class="mui-btn mui-btn-royal">紫⾊</button>运⾏之后的效果如下：若希望⽆底⾊、有边框的按钮，仅需增加.mui-btn-outlined类即可，代码如下：<button type="button" class="mui-btn mui-btn-outlined">默认</button><button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">蓝⾊</button><button type="button" class="mui-btn mui-btn-success mui-btn-outlined">绿⾊</button><button type="button" class="mui-btn mui-btn-warning mui-btn-outlined">黄⾊</button><button type="button" class="mui-btn mui-btn-danger mui-btn-outlined">红⾊</button><button type="button" class="mui-btn mui-btn-royal mui-btn-outlined">紫⾊</button>运⾏结果如下：3.gallery(图⽚轮播)图⽚轮播继承⾃，因此其DOM结构、事件均和slide插件相同；默认不⽀持循环播放，DOM结构如下：<div class="mui-slider"><div class="mui-slider-group"><div class="mui-slider-item"><a href="#"><img src="1.jpg"/></a></div><div class="mui-slider-item"><a href="#"><img src="2.jpg"/></a></div><div class="mui-slider-item"><a href="#"><img src="3.jpg"/></a></div><div class="mui-slider-item"><a href="#"><img src="4.jpg"/></a></div></div></div>假设当前图⽚轮播中有1、2、3、4四张图⽚，从第1张图⽚起，依次向左滑动切换图⽚，当切换到第4张图⽚时，继续向左滑动，接下来会有两种效果：⽀持循环：左滑，直接切换到第1张图⽚；不⽀持循环：左滑，⽆反应，继续显⽰第4张图⽚，⽤户若要显⽰第1张图⽚，必须连续向右滑动切换到第1张图⽚；当显⽰第1张图⽚时，继续右滑是否显⽰第4张图⽚，是同样问题；这个问题的实现需要通过.mui-slider-loop类及DOM节点来控制；若要⽀持循环，则需要在.mui-slider-group节点上增加.mui-slider-loop类，同时需要重复增加2张图⽚，图⽚顺序变为：4、1、2、3、4、1，代码⽰例如下：<div class="mui-slider"><div class="mui-slider-group mui-slider-loop"><!--⽀持循环，需要重复图⽚节点--><div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="4.jpg"/></a></div><div class="mui-slider-item"><a href="#"><img src="1.jpg"/></a></div><div class="mui-slider-item"><a href="#"><img src="2.jpg"/></a></div><div class="mui-slider-item"><a href="#"><img src="3.jpg"/></a></div><div class="mui-slider-item"><a href="#"><img src="4.jpg"/></a></div><!--⽀持循环，需要重复图⽚节点--><div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="1.jpg"/></a></div></div></div>mui框架内置了图⽚轮播插件，通过该插件封装的JS API，⽤户可以设定是否⾃动轮播及轮播周期，如下为代码⽰例：//获得slider插件对象var gallery = mui('.mui-slider');gallery.slider({interval:3000//⾃动轮播周期，若为0则不⾃动播放，默认为0；});因此若希望图⽚轮播不要⾃动播放，⽽是⽤户⼿动滑动才切换，只需要通过如上⽅法，将interval参数设为0即可。

课程教案项目效果【任务】制作电影网首页——框架网页入门除表格外，框架也是一种重要的网页布局工具，与使用表格布局网页不同的是，框架布局通常适合页面中一个区域发生变化，而其他区域不发生变化的网页，如网站后台管理界面和一些论坛网页。

（一）了解框架和框架集在框架网页中，浏览器窗口被划分成了若干区域，每个区域称为一个框架。

每个框架可显示不同文档的内容，彼此之间互不干扰。

框架网页由框架集定义，框架集是特殊的HTML文件，它定义一组框架的布局和属性，包括框架的数目、大小和位置，以及在每个框架中初始显示的页面URL。

框架集文件本身不包含要在浏览器中显示的HTML内容，只是向浏览器提供如何显示一组框架，以及在这些框架中应显示哪些文档的信息。

要在浏览器中查看一组框架，需要输入框架及文件的URL，浏览器随后打开要显示在这些框架中的相应文档。

使用框架最常见的情况是，一个框架显示包含导航控件的文档，另一个框架显示含有主要内容的文档。

例如，下图显示了一个由两个框架组成的框架网页：一个较窄的框架位于右侧，其中包含导航条；一个大框架占据了页面的其余部分，包含网页的主要内容。

当访问者浏览站点时，单击左侧框架中的某一超链接，或者展开或收缩其中的栏目，或者更改左侧框架的内容。

（二）了解框架构造上图所示的网页至少由三个单独的网页文档组成：两个框架区域中显示的两个网页文档和把这两个文档显示在一个界面上的框架集文档。

在Dreamweaver中设计使用框架集的网页时，必须全部保存这三个文件，框架集网页才能在浏览器中正常显示。

下图显示了该框架集文档的结构。

在制作框架集文档时，每个框架都有自己的名称。

如果没有理解前面所讲框架的概念，可能会搞不清楚框架名称和网页文档名称的区别。

为方便记忆和理解，可自行设置框架名称。

方法为：选择框架后，在“属性”面板上的“框架名称”编辑框中直接输入（一般在创建框架时会自动指定框架名称）。

（三）制作并保存框架集文档在Dreamweaver中创建框架集的方法有很多，可以选择“文件”→“新建”菜单，打开“新建文档”对话框，然后在左侧的“文档类型”列表中选择“示例中的页”，在“示例文件夹”列表中选择“框架集”，最后在“示例页”列表中选择框架类型并单击“创建”按钮；也可以通过选择“修改”→“框架集”菜单下的子菜单，将普通页面拆分为框架集；另外，还可以单击“布局”插入栏中的“框架”按钮，在普通页面中插入预定义的框架集。

事实上，HTML是一种因特网上较常见的网页制作标注性语言，而并不能算做一种程序设计语言，因为它缺少程序设计语言所应有的特征。

HTML通过IE等浏览器的翻译，将网页中所要呈现的内容、排版展现在用户眼前。

1.1.2 HTML的结构概念一个完整的HTML文件包括标题、段落、列表、表格以及各种嵌入对象，这些对象统称为HTML 元素。

在HTML中使用标签来分割并描述这些元素。

实际上可以说，HTML文件就是由各种HTML 元素和标签组成的。

一个HTML文件的基本结构如下：<html> 文件开始标记<head> 文件头开始的标记…文件头的内容</head> 文件头结束的标记<body> 文件主体开始的标记…文件主体的内容</body> 文件主体结束的标记</html> 文件结束标记从上面的代码结构可以看出，在HTML文件中，所有的标记都是相对应的，开头标记为< >，结束标记为</ >，在这两个标记中间添加内容。

有了标记作为文件的主干后，HTML文件中便可添加属性、数值、嵌套结构等各种类型的内容了。

1.1.3 HTML的标记既然HTML是超文本标记语言，那么可以想象其构成主要是通过各种标记来标示和排列各对象，通常由尖括号“<”、“>”以及其中所包容的标记元素组成。

例如，<head>与</head>就是一对标记，称为文件的头部标记，用来记录文档的相关信息。

在HTML中，所有的标记都是成对出现的，而结束标记总是在开始标记前增加一个“/”。

标记与标记之间还可以嵌套，也可以放置各种属性。

此外在源文件中，标记是不区分大小写的，因此在HTML 源程序中，<Head>与<HEAD>的写法都是正确的，而且其含义是相同的。

HTML定义了3种标记用于描述页面的整体结构。

页面结构标记不影响页面的显示效果，它们是帮助HTML工具对HTML文件进行解释和过滤的。

Dreamweaver8.0创建模板在我们制作网站的过程中，为了统一风格，很多页面会用到相同的布局、图片和文字元素。

为了避免大量的重复劳动，可以使用Dreamweaver8提供的模板功能，将具有相同版面结构的页面制作为模板，将相同的元素（如导航栏）制作为库项目，并存放在库中可以随时调用。

一、创建模板模板的创建有三种方式。

1、直接创建模板选择“窗口/资源”命令，打开“资源”面板，切换到模板子面板，如下图所示。

单击模板面板上的“扩展”按钮，在弹出菜单中选择“新建模板”这是在浏览窗口出现一个未命名的模板文件，给模板命名。

然后单击“编辑”按钮，打开模板进行编辑。

编辑完成后，保存模板，完成模板建立。

2、将普通网页另存为模板打开一个已经制作完成的网页，删除网页中不需要的部分，保留几个网页共同需要的区域。

选择“文件/另存为模板”命令将网页另存为模板。

在弹出的“另存模板”对话框中，“站点”下拉列表框用来设置模板保存的站点，课选择一个选项。

“现存的模板”选框显示了当前站点的所有模板。

“另存为”文本框用来设置模板的命名。

单击“另存模板”对话框中的“保存”按钮，就把当前网页转换为了模板，同时将模板另存到选择的站点。

单击“保存”按钮，保存模板。

系统将自动在根目录下创建Template文件夹，并将创建的模板文件保存在该文件夹中。

在保存模板时，如果模板中没有定义任何可编辑区域，系统将显示警告信息。

我们可以先单击“确定”，以后再定义可编辑区域。

3、从文件菜单新建模板选择“文件/新建”命令，打开“新建文档”对话框，然后再类别中选择“模板页”，并选取相关的模板类型，直接单击“创建”按钮即可。

Dreamweaver8.0定义可编辑区域模板创建好后，要在模板中建立可编辑区，只有在可编辑区里，我们才可以编辑网页内容。

可以将网页上任意选中的区域设置为可编辑区域，但是最好是基于HTML代码的，这样在制作的时候更加清楚。

在文档窗口中，选中需要设置为可编辑区域的部分，单击常用快捷栏的“模板”按钮，在弹出菜单中选择“可编辑区域”项。

HTML语言基础：1）HTML网页在本质上是由HTML(超文本标记语言）代码构成的。

HTML代码由一系列的标签组成，这些标签是对页面的元素如文字、图片、声音、动画、超链接等进行描述、说明。

HTML标签的结构：头部、主体。

<html>....<./html>是告诉浏览器该文件是一个html 文件；文件头部：<head>.......<./head>是用来说明整个文件的标题或公共属性，不出现在浏览器的正文中。

<title>......</title>不出现在浏览器的正文中，会出现在浏览器的标题栏中，是文档的主题。

<body>......</body>是在浏览器中主要显示的，也是HTML主要的标签所在。

HTML标签的分类：单表签和多标签。

单表签只需单独使用就可表达完整的意思，其语法结构是<标签属性 1 属性 2 属性3.....>...内容..如<p>；多标签必须同时使用始标签和尾标签才能表达完整的意思，其语法结构是<始标签属性1 属性2 属性3.....>....内容....</尾标签>,是告诉浏览器从始标签处开始执行该标签代表的功能，并且在尾标签时结束，如<b>......</b>。

标签属性指的是在始标签内对表签添加的一些属性，其语法结构是<标签属性1 属性2 属性3.....>...内容...内容指的是对表签施加的作用。

注释内容指的是在文档的代码中对某段代码的文字说明，注释内容只会在查看源代码时才会被显示，而在浏览器运行HTML文档时会被忽略，其语法结构是<!------注释内容------>或<!-->注释内容</!-->2）HTML头部标签中的标签<title>标签：不出现在浏览器的正文中，会出现在浏览器的标题栏中，是文档的主题。

XXX职业技术学院202X级《WEB开发基础》课程标准课程代码XXXXXX课程性质专业平台课课程学分4总学时64适用专业软件技术专业制（修）订日期202X-X-XX执笔审核一、课程定位本课程是软件技术专业群的平台课，是培养学生B/S架构项目开发的基础必修课程。

本课程主要培养学生的网站设计和开发能力，通过“教、学、做”一体化教学，使学生能熟练掌握PC端网页、WebApp自适应网站、响应式网站的开发规范和制作技巧，培养学生的创新能力、审美能力、自学能力、沟通能力、解决问题能力、自我管理能力、团队协作能力，为后续课程及其他程序设计课程的学习和应用打下基础。

先修课程：《计算机应用基础》《程序设计基础》。

后续课程：《Java Web应用开发》《Vue前端应用开发》《微信平台应用开发》等。

二、课程目标（-）总体目标通过本课程的学习，学生能了解WWW、HTTP、HTML5、CSS3的定义、概念和作用；了解服务器、客户端、浏览器的概念和作用，熟悉web项目规划和需求分析的基本方法，具备web网页设计、制作及站点管理的基本知识和基本技能，学生能够独立制作中小型的网站。

熟练掌握HTML5语言中的各种文本格式、字符格式、段落设置、列表、标记的使用方法；熟练CSS3样式表制作方法和技巧；熟悉PC端网站、WebApp自适应网站、响应式网站的排版技巧，根据前端设计师的任职要求，参照计算机程序员职业标准和网站开发和网页制作的职业资格标准，改革课程体系和教学内容。

课程内容突出职业能力培养，体现基于职业岗位分析和能力为导向的课程设计理念，以真实工作任务或社会产品为载体组织教学内容，在真实工作情境中采用新的教学方法和手段进行实施。

（二）具体目标课程教学目标具体体现为专业知识、专业技能和专业素质三方面的目标。

（1）专业知识目标①掌握HTML5与CSS3基础知识及最新技术。

②熟悉企业网站制作具体流程。

③掌握不同类型静态网站的开发技巧。

ftp：192.168.1.2--（2）浏览框架⽹页前应先保存框架集⽂件及要在框架中显⽰的所有⽂档。

（）@@√<标记>对象</标记>是封闭类型标记。

（　）@@√在HTML中⼀般不⽤<标记>⾮封闭型标记。

（　）@@×语句中标记的书写不分⼤⼩写。

（　）@@√在动态⽹页中要操作数据库，必须创建⼀个指向该数据库的连接。

（）√创建的“系统DSN”是不能为ASP所⽤的。

（）×动态页⾯的应⽤是指将制作好的页⾯上传。

（）×要将本地站点的信息发布到Internet上，还必须创建⼀个位于Web服务器上的远程站点。

（）√Dreamweaver MX 2004的主要功能包括 .A.所见即所得B.具有完善的站点管理功能C.强⼤的多媒体功能D.不能使⽤JavaScript语⾔@@ABC下⾯关于Dreamweaver MX 2004的说法不正确的是:A. Dreamweaver MX 2004是专业⽹页设计、⽹站管理、⽹页可视化编程的解决⽅案B.单击[窗⼝]|[属性]菜单项,可以找开[属性]⾯板C.利⽤[⽂本]菜单可以轻松地设置⽂本的格式D.可以在Dreamweaver MX 2004中直接编辑Flash MX电影,制作Flash的⽂字和按钮.@@D在Dreamweaver MX 2004中,可以选择种⼯作区布局.A .4 B. 3 C.2 D. 1@@ CDreamweaver MX 2004站点由3部分组成具体取决了环境和所开发的Web站点类型 .A.本地⽂件夹是⼯作⽬录. Dreamweaver MX 2004将该⽂件夹称为”本地站点”B.远程⽂件夹是存储⽂件的位置,这些⽂件⽤于测试、⽣产、协作等,具体取决于环境. Dreamweaver MX 2004将该⽂件夹称为”远程站点”C.虚拟⽬录D.动态⽹页⽂件夹是Dreamweaver MX 2004处理动态⽹页的⽂件夹.@@ ABC若要编辑Dreamweaver MX 2004站点,可采⽤的⽅法是: .A.选择[站点]|[编辑站点],选择⼀个站点,单击[编辑]B.在[站点]⾯板中,切换到要编辑的站点的窗⼝,双击站点名称.C.选择[站点]|[打开站点],然后选择⼀个站点.D.在[属性]⾯板中进⾏站点的编辑.@@ B设置⼴西的属性可以通过来设置.A. [属性]⾯板B.[控制]⾯板C.[启动]⾯板D.[⽂本]菜单@@ D在⽹页中连续输⼊空格的⽅法是 .A.连续按空格键B.按下Ctrl键再连续按空格键C.转换到中⽂的全⾓状态下的连续按空格键D.按下Shift键再连续按空格键@@ B在Macromedia Dreamweaver MX 2004中,可以在[ ]或[ ]视图中将图像插⼊到⽂档.A.标准B.代码C.设计D.布局@@ BC⽹页通常可以⽀持的图像格式有 .A.GIFB.BMPC.AVID.PSDE.PNGF.JPEG@@ AEF在⼀个⽹站中,路径通常有种表⽰⽅式,分别是: .A.3 绝对路径、根⽬录相对路径、⽂档⽬录相对路径B.2绝对路径、根⽬录相对路径C.3绝对路径、根⽬录绝对路径、⽂档⽬录相对路径D.2绝对路径、根⽬录绝对路径@@ A下列关于绝对路径的说法正确的⼀项是: .A.绝对路径是被链接⽂档的完整的URL,不包含使⽤的传输协议.B.使⽤绝对路径需要考虑源⽂件的位置.C.在绝对路径中,如果⽬标⽂件被移动,则链接同时可⽤.D.创建外部链接时,必须使⽤绝对路径.@@ D下列关于在⼀个⽂档中可以创建的链接类型,说法不正确的是: .A.链接到其他⽂档或⽂件(如图形、影⽚、PDF或声⾳⽂件)的链接.B.命名锚记链接,此类链接可跳转⾄⽂档内的特定的位置.C.电⼦邮件链接,此类链接可新建⼀个收件⼈地址已经填好的空⽩的电⼦邮件.D.空链接和脚本链接,此类链接能够在对象上附加⾏为,但不能创建执⾏JavaScript代码的链接.@@ D下列哪种元素不能插⼊层中: .A.层B.框架C.表格D.表单及各种表单对象@@ B选择⼀个层,下⾯可⾏的操作是: .A.在[层]⾯板中单击该层的名称.B.单击⼀个层的选择柄.如果选择柄不可见,在该层中的任意位置单击以显⽰该选项柄C.单击层代码标记(在设计视图中),它表⽰层在HTML代码中的位置.如果层代码标记不可见,可以选择[查看]|[可视化助理]|[不可见元素]命令.D.按下Shift键和Tab键可选择⼀个层.@@ ABC在Dreamweaver MX 2004中,对表格所进⾏的操作论述正确的是: .A.选择表格中的单个或多个表格都能对单元格进⾏拆分操作.B.在⼀个表格中,如果所选择的区域是矩形区域可以对其进⾏拆分操作.C.在⼀个表格中,如果所选择的区域是矩形且连续区域可以对其进⾏合并操作.D.在Dreamweaver MX 2004的表格中,只能对所选择的⾮连续的区域才能进⾏合并操作.@@ C在Dreamweaver MX 2004中提供的两种⽅式来查看和操作表格,分别是: 和 .A.标准模式B.代码模式C.活动数据模式D.布局模式E.⽂档窗⼝@@ ADHTML代码<select name=”NAME”></select>表⽰ .A.创建表格B.创建⼀个滚动菜单C.设置每个表单项的内容D.创建⼀个下拉菜单@@ D表单包括两个部分,下列选项中属于表单组成部分的是 .A.表单B.表单对象C.表单域D.以上都对@@ AB下列关于选择框架的说法正确的是: .A.在[⽂档]窗⼝的[设计]视图中,按住Alt键的同时单击⼀个框架.B.在[框架]⾯板中单击框架.C.通过移动⽅向键,可选择不同的框架.D.通过移动⽅向键,可选择不同的框架.@@ ABC要将⼀个框架拆分成⼏个更⼩的框架,可执⾏的操作说法中正确的是: .A.要拆分插⼊点所在的框架,可以从[修改]|[框架集]⼦菜单中选择拆分项.B.要以垂直或⽔平⽅式拆分⼀个框架或⼀组框架,应将框架边框从[设计]视图的边缘拖⼊[设计]视图的中间.C.如果将不在[设计]视图边缘的框架边框拆分,应在按住Ctrl键的同时拖动框架边框D.要将⼀个框架拆分成4个框架,应将框架边框从[设计]视图⼀⾓拖⼊框架的中间.@@ ABD下列关于框架的说法正确的⼀项是: .A.在Dreamweaver MX 2004中,通过框架可以将⼀个浏览器窗⼝划分为多个区域.B.框架就是框架集,框架集也就是框架.C.保存框架是指系统⼀次就能将整个框架保存起来,⽽不是保存单个框架.D.框架实际上是⼀个⽂件,当前显⽰在框架中的⽅法是构成框架的⼀部分.@@ AD在Dreamweaver MX 2004中,要创建预定义框架,应执⾏[ ]菜单中的命令.,A.查看B.插⼊C.修改D. 命令@@ B下列关于创建⾃定义框架页的⽅法描述不正确的⼀项是: .A.单击[修改]菜单中的[框架页]⼦菜单中的命令.B.将⿏标移动到边框上⾓上,拖动⿏标⾄相应位置,可拖出4个边框.C.按下Shift键,拖动⼀个框架的边缘线,可以对框架进⾏垂直或⽔平划分.D.将光标移动到[⽂档]窗⼝的边界线上,当⿏标指针变成双向箭头时拖动⿏标⾄相应的位置,即可创建⼀条边框线. @@ A下列哪个不是访问者对⽹页的基本操作:______..A.onMouseOverB. onMouseOutC. onClickD. onLoad@@ D下列关于[⾏为]⾯板的说法中错误的是:_______.A．动作(+)是⼀个菜单列表,其中包含可以附加到当前所选元素的多个B．删除(—)是从⾏为列表中所选的事件和动作C．上下箭头按钮是将特定事件的所选动作在⾏为列表中向上或向下移动，以便按定义的顺序执⾏D．[⾏为]通道不是在时间轴中特定帧处执⾏的⾏为的通道@@ D下列关于⾏为的说法不正确的是:______.A．⾏为即是事件，事件就是⾏为B．⾏为是事件和动作的组合、C．⾏为是Dreamweaver MX 2004预置的JavaScript程序库D．使⽤过⾏为可以改变对象属性、打开浏览器和播放⾳乐等@@ A下列关于Dreamweaver MX 2004中事件的说法不正确的是:_______A．事件是上浏览器为每个页⾯元素定义的B．事件只能由事件引发，不能⾃动引发C．OnAbort事件是当终⽌正在打开的页⾯时进⾏引发D．事件可以被⾃⼰引发@@ B下列说法错误的是:______.A．Dreamweaver MX 2004 允许把⽹站中需要重复使⽤或需要经常更新的页⾯元素（如图像、⽂本或其它对象）存⼊库中，存⼊库中的元素称为库项⽬B．库项⽬可以包含⾏为，但是在库项⽬中编辑⾏为有⼀些特殊的要求C．库项⽬也可以包含时间轴或样式表D．模板实质上就是作为创建其它⽂档的基础⽂档@@ C下⾯关于模板的说法不正确的⼀项是:______.A．模板可以⽤来统⼀⽹站页⾯的风格B．模板是⼀段HTML源代码C．Dreamweaver模板是⼀种特殊类型的⽂档，它可以⼀次更新多个页⾯@@ B下列关于库的说法中不正确的⼀项是:_______.A．库是⼀种⽤来存储整个⽹站上经常被重复使⽤或更新的页⾯元素B．库实际上是⼀段HTML源代码C．在Dreamweaver中，只有⽂字、数字可以作为库项⽬，⽽图⽚、脚本不可以作为库项⽬D．库可以是E-mail地址、⼀个表格或版权信息等@@ C下列说法错误的是:_______.A.通过标签编辑器，⽤户可以使⽤指定或编辑某⼀标签的属性B.除了使⽤标签编辑器编辑标签以外，还可以使⽤标签检查器在属性表中编辑标签C.⽤户必须切换⾄代码窗⼝中才能插⼊标签D.使⽤标签选择器可以将Dreamweaver标签库中的任何标签插⼊到页⾯中◎◎C下列关于设置⽂本格式说法正确的是:_______.A．CSS是中⽂⽹页专⽤的⽂本格式化⽅式B．HTML样式是Dreamweaver MX 2004⾃⾝携带的⼀个更为⽅便的⼯具，它呆以把多个HTML属性组合在⼀起形成⼀个HTML样式，帮助⽤户对⽂本格式进⾏批量设置C．可通过参数的设置，达到设置⽂本格式的⽬的D．使⽤[属性]⾯板设置⽂本格式是设置⽂本格式的惟⼀⽅法◎◎B在Dreamweaver MX 2004中通过下列⽅法不可以修改字体的颜⾊的是:_______.A．单击属性检查器中的顏⾊选择器，从浏览器安全⾊⾯板中选择⼀种颜⾊B．选择[⽂本]|[颜⾊]命令，出现系统颜⾊选择器对话框，选择⼀种颜⾊，然后单击[确定]C．直接在属性检查器中输⼊颜⾊名称或⼗六进制数字D．若要定义默认⽂本颜⾊，应使⽤[修改]|[页⾯属性]命令@@ D关于CSS和HTML样式的不同之处,说法正确的是:_______.A．HTML样式只影响应⽤它的⽂本和使⽤所选HTML样式创建的⽂本B．CSS只可以设置⽂字字体样式C．HTML样式可以设置背景样式D．HTML样式和CSS相同，没有区别@@ A在Dreamweaver MX 2004中,⼏乎可以将动态内容放在Web页或其HTML源代码的任何地⽅,具体表现为:_______. A．可以将动态内容放在插⼊点处B．可以⽤动态内容替换⽂本字符串C．可以将其插⼊到HTML属性中@@ C下列哪些服务器⾏为在添加时不需要相应的页⾯定义记录集:______.A．重复区域 B.插⼊记录C.更新记录D.删除记录E.记录集分页F.转到相关页G.转到详细页 H.显⽰区域@@ D在Dreamweaver MX 2004中,需要_______ 、_________和 ________3个参数来加⼊⼀个Shockwave影⽚。

网页设计与制作实验报告姓名：弋文君专业：市场营销班级：2010级2班学号：201007440412012-2013学年第二学期经济与管理学院实验名称：表格应用指导教师:_________实验日期:___年___月___日实验地点:_________ 成绩:_________ 实验目的：(1) 掌握表格的建立，修改的方法。

(2) 掌握图文混排的方法。

(3) 掌握鼠标经过图像的应用方式。

实验内容与基本要求:(1) 用表格方式建立家乡特色介绍的网页1.html，格式如下：(2) 图片1-6分别链接到相应文档，并在新窗口打开。

要求:实验报告上只需要写出1.html的代码。

实验步骤：（1）、打开dW网页制作软件下的html格式，右击选择“页面属性”，设置背景图片，文本颜色“蓝”，背景颜色“黑”，链接颜色“红”（2）、点击“插入”—“表格”，建立5列3行的表格，设置表格属性。

（3）、选中表格第一列和最后一列，右击“表格”—“合并单元格”，输入“我的家乡南充”和“版权所有”，选中中间三列，同样方式合并单元格。

（4）、图片1—6：点击“插入”—“图像”—“确定”；图片7点击“插入”—“图像对象”—“鼠标经过图像”，选择相应的“原始图像”、“鼠标经过图像”、“按下时前往的URL”图片。

（5）、对图片1---6分别创建链接，单击图片，再单击右键“创建链接”，打开相应的网页或输入相应的网址。

（6）、网页代码展示<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">body,td,th {<script type="text/javascript">function MM_swapImgRestore() { //v3.0var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;}function MM_preloadImages() { //v3.0var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}}function MM_findObj(n, d) { //v4.01var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];for(i=0;!x&&yers&&i<yers.length;i++) x=MM_findObj(n,yers[i].document);if(!x && d.getElementById) x=d.getElementById(n); return x;}}</script></head><body onload="MM_preloadImages('u=2402710936,334120626&amp;fm=23&amp;gp=0_conew1.jpg')"><table width="1029" height="566" border="2" cellpadding="2" cellspacing="0"><tr><th colspan="3" scope="row">我的家乡，南充</th></tr><tr><th width="272" height="178" scope="row"><img src="file:///F|/我的资‘料/新建文件夹/u=974826602,877128046&amp;fm=21&amp;gp=0_conew1.jpg" width="271" height="197" /><a href="/">南充美食</a></th><td width="466" rowspan="3"><a href="u=2465314675,731935378&amp;fm=23&amp;gp=0_conew1.jpg" onmouseout="MM_swapImgRestore()"onmouseover="MM_swapImage('Image7','','u=2402710936,334120626&amp;fm=23&amp;gp=0_conew1.jpg',1)" ><img src="u=155599163,3236453610&amp;fm=23&amp;gp=0_conew1.jpg" name="Image7" width="465" height="280" border="0" id="Image7" /></a><a href="/nanchong/">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;夜景展示</a></td><td width="272"><img src="u=2402710936,334120626&amp;fm=23&amp;gp=0_conew1.jpg" width="267" height="200" /><a href="/nanchong/"><th height="158" scope="row"><img src="file:///F|/我的资‘料/新建文件夹/u=2387159853,3673608345&amp;fm=23&amp;gp=0.jpg" width="267" height="171" /></th> <td><img src="u=885140946,1444301877&amp;fm=23&amp;gp=0_conew1.jpg" width="270" height="176" /></td><th height="25" colspan="3" scope="row">版权所有：</th></tr></table><p>&nbsp;</p></body></html>实验结果：实验总结：此实验比较简单，经过上课的学习能熟练的掌握，插入链接是必须掌握的知识实验评价（教师）：_________________________________________—————————————————————————————实验名称：框架应用指导教师:_________实验日期:___年___月___日实验地点:_________ 成绩:_________ 实验目的：(1) 熟练掌握框架网页的应用。

第11章框架框架主要用于在一个浏览器窗口中显示多个H T M L文档。

通过构建这些文档之间的相互关系，从而实现文档导航、文档浏览以及文档操作等目的。

框架是I n t e r n e t网页中最常使用的页面设计方式，具不完全统计，大约有8 0％以上的主页都采用了框架技术。

本章将介绍如何在D r e a m w e a v e r中实现框架。

11.1 框架概述在浏览网页时，我们肯定遇到过这样的情形：在浏览器窗口中被分隔成了几个不同的区域，每个区域中显示不同的文档内容。

最常见的方式是将左方或上方的区域设置为目录区域，其中显示文档页面的目录索引或导航条，而将右方或下方的区域设置为主体区域，其中显示网页主体内容。

通过单击不同的目录索引项或导航条按钮，就可以在主体区域实现网页之间的导航，在浏览网页的同时，目录索引或导航条始终显示于页面的目录区域中，这样便于用户继续浏览其他的网页。

在上述的情形中实际上就是应用了框架（F r a m e s）技术。

利用框架技术，可以将不同的文档显示在同一个浏览器窗口中。

通过构建这些显示在同一窗口中的文档之间的相互链接关系，可以实现文档之间的相互控制。

实际上，我们不必连入I n t e r n e t，也可以看到框架效果，启动D r e a m w e a v e r的帮助系统，框架1框架2框架3图11-1 使用了框架技术的Dreamweaver帮助系统您就可以看到带有三个框架区域的浏览器窗口，如图11 -1所示。

本节将介绍一些框架技术的基本概念，以便于读者更好地了解如何在D r e a m w e a v e r 中设计框架。

11.1.1 框架和框架集一般来说，框架（ F r a m e s ）技术主要通过两种类型的元素来实现，一个是框架集（F r a m e s e t ），另一个是框架（F r a m e ）。

请注意这每个术语对应的英文单词，其中第一个“框架”是复数形式的单词F r a m e s ，而后一个“框架”对应的单词是单数形式的单词F r a m e 。