实验七 框架型网页的制作
框架网页的制作
《框架网页的制作》教学设计一、教学背景１．社会背景“５.１２”四川汶川大地震，整个社会掀起抗震救灾高潮，校园里爱心涌动，支援灾区活动不断。
我们信息技术课所以也应围绕抗震救灾，做点什么。
２．学生初一学生，社会课中有地理内容，但对地震知识介绍很少，所以对地震不了解，对遇到地震的逃生技巧更是一无所知。
信息技术方面，学生经过前面学习掌握了简单网页（表格网页）的制作。
３．教材浙教版初中必修本第二册中第十三课是框架网页设计。
第十一，十二课是表格网页和网页中的超链接。
二、教学目标１．知识与技能（１）框架网页的识别，特点和作用；（２）能用Frontpage软件创建框架网页；２．过程、方法和能力（１）比较学习法（与前面表格网页比较，学习框架网页的特性）；（２）借助软件向导的自我探究和模仿样例的操作能力；３．情感、态度、价值观（１）了解地震，关爱生命，保护自我能力；（２）人类不一定能战胜自然，但可以改造自然，防灾减灾；三、教学重点及难点教学重点：框架网页的创建教学难点：框架网页的保存（一个框架网页，每个区域都是一个网页文件）四、教学准备１．地震表格网页地震框架网页样例及素材（地震常识，逃生技巧，防灾减灾）２．演示文稿，投影用多媒体课件五、教学过程（一）感受框架网页（框架网页的浏览）创设情景：四川汶川大地震过后，某校开展“了解地震，保护生命，抗争自然”的主题网站的征集活动。
小明同学是个信息技术爱好者。
他制作了两个内容相同，形式不同的网站，一个是表格形式网站，一个是框架形式网站。
浏览这两个网站后，如果你是小明，会选哪一个参加活动。
为什么？学生自主浏览上述主题的表格网站和框架网站。
叫单个学生站起来回答教师小结：框架网页浏览时特点在于标题，导航目录都始终保留在窗口上，只有中间正文区域内容变化，便于快速浏览不同内容。
（二）尝试框架网页的制作师：小明能作的框架网页，其它我们大家都能作。
下面大家就跟着老师，尝试一下框架网页制作过程。
实训练习07 HTML网页布局设计——框架的应用
广东工程职业技术学院计算机信息系《网页设计》实训报告实训题目：实训项目07 框架的应用班级：学号：姓名：日期：教师：成绩：实训目的：1．掌握在网页中创建框架的操作方法。
2．掌握如何保存框架集文件和各个框架的操作方法。
3．掌握设置框架集属性和框架属性的方法。
4．掌握编辑框架内容的操作方法。
5．了解在框架中设置超链接的操作方法。
实训内容：1.本次实训要求用布局表格完成“我的主页”网页，完成2个框架集页面的创建，具体效果参见预览效果页面。
2.在站点“myweb”根文件夹之下，建立一个“07”的子文件夹，将“素材”复制到这个文件夹下，而且重新命名为“sucai”，里面的文件夹也重新命名，去掉中文；再在“07”下建立一个“letuweb”文件夹，将“ch8”复制到此文件下。
3.在“07”的子文件夹中建立“07.html”的网页文件，为本次练习的内容做一个首页。
4.制作一个框架网页a)新建一个页面文档，将其保存为07-1.html。
创建框架集“上方和下方框架”网页，在中间的框架中嵌套一个“左侧框架”，保存全部的页面，设置框架网页标题及属性。
b)框架集由4个框架组成：1.顶部为标题部分，显示网页的大标题，保存为07-1top.html。
2.中间左侧为导航部分，提供个网页的导航链接，保存为07-1left.html。
3.中间右侧为主题部分，显示网页主要内容，网页展示的内容共分为4大部分，分别为：公司简介07-1main.html、产品介绍07-1main2.html、征稿合作07-1main3.html和联盟伙伴07-1main4.html。
这4部分内容分别放置在4个网页中，并通过导航链接控制在住框架中显示。
4.底部为说明部分，主要包括一些版权信息等，保存为07-1bottom.html。
c)编辑各框架内的网页文件：1.将光标定位在topFrame框架中，编辑07-1top.html文档，在其中中插入一个1行1列宽度为680像数的表格，在表格中插入Banner图像。
制作框架网页教案
制作框架网页教案教案标题：制作框架网页教案教学目标：1. 学生能够理解什么是框架网页，并能够解释其作用和优势。
2. 学生能够使用HTML和CSS创建框架网页的基本结构和样式。
3. 学生能够利用框架网页设计和布局内容。
教学资源：1. 计算机和互联网连接2. HTML和CSS编辑器（如Sublime Text、Notepad++等）3. 网页浏览器（如Chrome、Firefox等）教学步骤：引入：1. 向学生介绍框架网页的概念，并解释其在网页设计中的作用。
2. 引导学生思考框架网页与普通网页的区别，并列举框架网页的一些应用场景。
主体：3. 讲解HTML框架标签的基本语法和用法，包括`<frameset>`、`<frame>`和`<noframes>`标签。
4. 演示如何创建一个简单的框架网页结构，包括水平和垂直分割的框架。
5. 引导学生实践创建自己的框架网页结构，并帮助他们解决可能遇到的问题。
6. 讲解CSS样式表的基本语法和用法，包括如何为框架网页添加样式和布局。
7. 演示如何为框架网页添加背景颜色、边框、字体等样式效果。
8. 引导学生实践为自己的框架网页添加样式和布局，并鼓励他们发挥创造力。
总结：9. 回顾框架网页的概念和创建过程，确保学生对所学内容有一个清晰的理解。
10. 鼓励学生分享他们创建的框架网页，并提供反馈和建议。
教学评估：1. 观察学生在实践中的表现，包括他们是否能够正确创建框架网页的结构和样式。
2. 收集学生的框架网页作品，评估其创意和设计水平。
3. 进行小组或个人讨论，让学生分享他们对框架网页的理解和应用。
拓展活动：1. 鼓励学生进一步探索框架网页的高级功能，如跨框架通信、动态调整框架大小等。
2. 引导学生学习响应式网页设计的基本概念和技巧，以适应不同设备和屏幕尺寸。
教学反思：1. 教学过程中，及时观察学生的学习情况，根据需要进行适当的调整和辅导。
《七、 制作框架网页》作业设计方案-高中信息技术人教版选修3
《制作框架网页》作业设计方案（第一课时）一、作业目标本节课的作业旨在帮助学生巩固和理解《制作框架网页》课程内容，通过实践操作掌握基本的网页框架搭建技能。
通过完成作业，学生将能够：1. 熟练使用HTML创建基本的框架结构；2. 了解并掌握HTML中的各种框架标签；3. 掌握如何设置框架大小和位置；4. 理解并能够应用CSS样式对框架进行美化。
二、作业内容1. 创建一个简单的框架网页，包含标题、段落、图片等基本元素；2. 在主框架中添加一个按钮，点击按钮后跳转到另一个页面；3. 在次框架中添加一个列表，列出主框架中各个元素的ID或类名；4. 使用CSS为框架添加样式，使网页更加美观；5. 确保作业中所有代码符合HTML规范，且能在浏览器中正常显示。
三、作业要求1. 学生需独立完成作业，不得抄袭；2. 作业中使用的所有代码必须符合HTML规范，不得使用非法或恶意代码；3. 学生需在规定时间内完成作业，并在提交作业时一并提交源代码文件；4. 鼓励学生在完成作业过程中发现问题、解决问题，提高自己的技术水平。
四、作业评价1. 教师将对提交的作业进行审查，检查代码规范性和正确性；2. 根据学生作业中遇到的问题和解决方案，评估学生对知识的掌握程度；3. 综合考虑学生的创新和解决问题的能力，给予优秀、良好、及格和不及格四个等级评价。
五、作业反馈1. 学生应根据教师反馈，对作业中存在的问题进行修改和完善；2. 学生应向教师反馈对作业评价结果的意见和建议；3. 教师根据学生反馈，对作业设计方案进行改进和优化，提高教学质量。
为了确保学生能够顺利完成作业，教师可以在课堂上进行一些必要的指导和演示，例如：* 讲解HTML和CSS的基本语法和常用标签；* 演示如何设置框架大小和位置；* 展示一些优秀的框架网页示例，帮助学生开阔视野。
此外，教师还可以提供一些有用的资源和学习材料，以帮助学生更好地完成作业。
学生可以通过小组合作、在线讨论等方式，互相学习和交流，共同提高技术水平。
《七、 制作框架网页》作业设计方案-高中信息技术人教版选修3
《制作框架网页》作业设计方案（第一课时）一、作业目标通过本次作业，学生将掌握制作框架网页的基本概念和技能，包括框架的创建、页面布局、链接和样式设置等。
同时，学生将通过实践操作，提高自己的信息技术应用能力和问题解决能力。
二、作业内容1. 创建框架：学生需要使用所学的HTML和CSS知识，设计并创建两个框架页面。
一个框架用于展示主要内容，另一个用于展示辅助信息。
2. 页面布局：学生需要合理规划每个框架页面的布局，包括标题、正文、图片、链接等元素的布局和排版。
3. 链接设置：学生需要在每个框架页面之间建立链接，以便用户可以通过点击链接在不同的页面之间切换。
4. 样式设置：学生可以根据自己的喜好和页面内容，为框架页面设置适当的样式，如字体、颜色、大小、间距等。
三、作业要求1. 学生需要独立完成作业，不得抄袭或使用其他人的成果。
2. 作业中使用的所有代码和文件需要符合信息技术课程的要求，不得使用非法或恶意代码。
3. 学生需要在规定时间内完成作业，并提交作业文件至教师指定的平台或邮箱。
4. 提交的作业文件应包括每个框架页面的HTML和CSS代码，以及任何必要的图片、链接等资源文件。
四、作业评价1. 教师将根据作业的质量和完成情况，给予学生相应的分数。
2. 评价标准包括页面布局是否合理、链接是否有效、样式是否符合要求、代码是否规范等。
3. 学生可以通过教师提供的平台或邮箱查看自己的作业评分和反馈意见，以便改进和提高自己的技能。
五、作业反馈1. 学生应认真阅读教师提供的反馈意见，并根据意见改进自己的作业，提高自己的技能水平。
2. 学生可以随时向教师咨询或讨论与作业相关的问题，教师将尽力提供帮助和解答。
3. 教师在评价学生作业时，应尊重学生的创意和个性，鼓励他们发挥自己的想象力和创造力，同时也要注重技术规范和准确性。
通过本次作业，学生将能够掌握制作框架网页的基本知识和技能，提高自己的信息技术应用能力和问题解决能力。
框架网页的制作
框架网页的制作
■教学目标
1.知识与技能
（1）理解框架的概念与用途。
（2）掌握框架网页的新建、制作、编辑与保存的方法。
（3）初步掌握将框架结构与表格布局结合使用来制作网页。
（4）会在框架网页中设置超链接。
2.过程与方法
（1）通过对表格网页的分析以及表格与框架网页的对比，体验新知识（框架结构网页）的优点，从而促进其学习新知识。
（2）理解框架的概念与组成，学会分析网站的结构。
（3）感受框架网页的用途，体会其优点，从而明确框架网页设计技术的适用范围。
3.情感态度与价值观
（1）通过以“母亲节的祝福”为主题的框架结构网页制作活动，提升对母爱的理解，学会感恩。
（2）能够将表格与框架结构网页结合使用，在创作中体验乐趣。
4.行为与创新
在老师的引导下学会对比学习，培养对知识的主动探索、主动发现和对所学知识意义的主动建构。
■教学重点与难点
1.教学重点
框架网页的建立与保存。
2.教学难点
框架中超链接的使用。
■教学方法与手段
对比教学法、探究学习法、模仿学习法。
■课前准备
制作相同结构的用以对比的表格网页和框架网页以及给学生用于操作的网站半成品和素材。
■教学过程。
框架网页布局实验报告
实验目的：通过本次实验，了解和掌握框架网页布局的基本原理和方法，能够熟练运用框架标签（frameset和frame）进行网页布局，并学会使用CSS进行样式调整，提高网页设计的实用性和美观性。
实验时间：2023年4月10日实验环境：Windows 10操作系统，Adobe Dreamweaver CC软件实验内容：1. 创建一个简单的框架网页；2. 使用frameset和frame标签进行布局；3. 调整框架大小和位置；4. 使用CSS样式美化框架；5. 测试框架网页在不同浏览器下的兼容性。
实验步骤：一、创建框架网页1. 打开Adobe Dreamweaver CC，创建一个新的HTML文件；2. 在“插入”菜单中选择“框架”选项，选择“框架集”；3. 在弹出的“框架集”对话框中，设置框架布局方式为“列”，并设置列数为2；4. 点击“确定”按钮，完成框架网页的创建。
二、使用frameset和frame标签进行布局1. 在框架网页的左侧框架中，插入一个图片；2. 在右侧框架中，插入一段文本内容；3. 保存网页，预览效果。
三、调整框架大小和位置1. 在框架网页的框架标签中，添加“cols”和“rows”属性，以调整框架的大小和位置；2. 例如，将左侧框架的宽度设置为“200px”，右侧框架的宽度设置为“”（表示自动填充剩余宽度）；3. 保存网页，预览效果。
四、使用CSS样式美化框架1. 在框架网页的头部标签中，添加一个CSS样式表；2. 在样式表中，设置框架的背景颜色、边框样式等属性；3. 例如，设置左侧框架的背景颜色为“#f2f2f2”，边框样式为“1px solid#ccc”；4. 保存网页，预览效果。
五、测试框架网页在不同浏览器下的兼容性1. 打开多个浏览器（如Chrome、Firefox、IE等），分别预览框架网页；2. 观察网页在不同浏览器下的显示效果，确保框架布局和样式的一致性；3. 如有兼容性问题，可适当调整CSS样式，以达到最佳效果。
《七、 制作框架网页》作业设计方案-高中信息技术人教版选修3
《制作框架网页》作业设计方案（第一课时）一、作业目标通过本次作业，学生将掌握制作框架网页的基本概念和技能，包括了解网页框架的构成、学会创建框架、设置页面属性等。
通过实践操作，学生将加深对信息技术课程的理解，提高解决问题的能力。
二、作业内容1. 任务一：创建框架学生需要使用HTML代码创建一个简单的框架页面。
要求框架分为左右两个部分，左侧部分放置导航栏，右侧部分为内容区。
学生需要使用表格或div标签进行布局设计。
2. 任务二：设置页面属性学生需要设置框架页面的标题、背景颜色、边距等属性，使页面更加美观。
同时，学生需要使用CSS样式对内容区进行美化，如调整字体、大小、颜色等。
3. 任务三：链接和导航学生需要在左侧导航栏中添加链接，使页面可以跳转。
学生需要使用超链接标签<a>实现链接功能，同时确保链接的正确性和可用性。
三、作业要求1. 学生需独立完成作业，不得抄袭或使用其他方式获取答案。
2. 作业中使用的代码和设计应符合规范，符合网页制作的基本原则。
3. 学生需在规定时间内完成作业，并在提交作业时附上相应的注释和说明。
4. 鼓励学生在作业中运用创新思维，尝试不同的布局和美化方式，提高自己的实践能力。
四、作业评价1. 评价标准：根据学生的作业完成情况、代码规范性、页面美观程度等方面进行评价。
2. 评价方式：教师对学生提交的作业进行批改，给出相应的分数和评语。
同时，教师可以通过学生的作业反馈，了解学生对知识的掌握情况，以便在后续教学中进行调整和改进。
3. 评价结果：根据评价标准，对学生的作业进行评分和排名。
对于表现优秀的学生，给予一定的奖励和鼓励，以提高学生的学习积极性和自信心。
五、作业反馈1. 学生反馈：学生可以通过教师提供的反馈信息，了解自己的作业完成情况，找出自己的不足之处，及时调整学习方法和策略。
同时，学生可以向教师提出自己的疑问和困惑，寻求帮助和建议。
2. 教师反馈：教师可以通过学生的作业反馈，了解学生对知识的掌握情况，以便在后续教学中进行调整和改进。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
实验七框架型网页的制作
一、实验目的
1、掌握框架集和框架的创建和保存；
2、掌握框架、框架集的编辑和属性的设置；
3、掌握框架超级链接。
二、实验内容
利用框架制作如下图所示的页面效果，框架集网页为index.html，其中：图2-9-1为打开index.html的效果图；
图2-9-2 单击左侧“勇敢的心”的网页效果图；
图2-9-3 单击左侧“肖申克的救赎”的网页效果图；
图2-9-4 单击左侧“阿凡达”的网页效果图；
图2-9-5 单击左侧“战马”的网页效果图；
图2-9-1 图2-9-2
图2-9-3 图2-9-4
图2-9-5
三、知识点分解
该实验主要涉及的知识点就是框架和框架集的保存以及设置超链接的目标框架。
四、实验步骤
1、选择[文件]/[新建]菜单命令。
2、在“新建文档”对话框“示例中的页”列表中选择“框架集”选项。
3、从“框架集”列表选择相应的框架集，如图2-9-8所示。
图2-9-8 “新建文档”对话框
4、单击按钮，则会弹出“框架标签辅助功能属性”对话框，为每一框架指定一个标题，单击“确定”按钮，则上方框架标题为“topFrame”，左侧框架标题为“leftFrame”，右侧框架标题为“mainFrame”。
5、选择[查看]/[可视化助理]/[框架边框]菜单命令，则在文档中就会出现框架的边框。
6、选择[文件]/[保存全部]菜单命令，将框架集文件保存为index.html，上方框架文
件保存为top.html，左侧框架文件保存为left.html，右侧框架文件保存为main.html。
注意：对于框架集和框架文件保存的文件名，一定要做的看到文件名就能知道该文件对应与
该框架集中的哪个框架。
7、选择[窗口]/[框架] 菜单命令，打开“框架”面板，直接在面板中单击最外面的框架集，打开属性对话框，设置“行值”：119px，再选择里面嵌套的框架集，设置“列值”：253px。
8、打开top.html，依次插入图片，定义图片宽和高均为200px。
注意：可以不需要打开相对应的框架文件，直接在index.html文档中对框架文件进行编辑。
9、按【Ctrl+S】保存该网页。
10、打开left.html，输入文本，在页面属性中设置文本颜色、大小和字体。
11、由于四部电影分别对应4个网页，在框架mainFrame里面进行显示，所以需要新建4个html文档，分别为braveheart.html,sh.html,afd.html,zm.html。
分别将电影简介添加到四个对应的页面。
《勇敢的心》链接到braveheart.html，
12、打开top.html，依次给4部电影添加超级链接，
目标（即当点击链接时的显示区域）选择mianFrame,然后确定；《肖申克的救赎》链接到sh.html，目标选择mianFrame,然后确定；《阿凡达》链接到afd.html, 目标选择mianFrame,然后确定；《战马》链接到zm.html，目标选择mianFrame,然后确定；打开页面属性，定义字号、字体和颜色，定义链接的样式。
12、按【Ctrl+S】保存该网页。
13、打开main.html，制作一个图像查看器来浏览图片，方法已经试验过，请同学们自行制作。
14、按【Ctrl+S】保存该网页。
15、回到index.html，按【F12】预览。