运用框架结构制作网页 下载可修改 优质文档

制作一个典型的网站框架第一篇：制作一个典型的网站框架学习情境1：制作一个典型的网站框架工作任务：制作一个典型的网站框架并将其应用于网页技能目标1、掌握创建和应用模板的方法2、掌握使用CSS美化网页的方法3、掌握网站的测试如发布1.1 任务描述在开发网站时，保持网站的风格一致是很重要的。

或者说在设计网站时，有时候多个页面上存在内容相同的地方。

这时候提高开发效率的一种方法就是先制作一个模板，其他页面使用这个模板进行进一步的设计。

如图1-1和图1-2 是一个名为“WEB设计论坛”网站的两个页面，在页面的左上角是网站的Logo，及简单的搜索提示，接下来是网站的导航栏，中间部分是两个页面不同的地方，而最下面网站版权信息也是一样的。

在制作这两个网页时，其实是先制作了一个模板，模板在DreamWeaver中的设计效果如图1-3所示，将不同的部分制作了一个可编辑区，从而实现了制作风格一致的网站的快速开发，本章我们就来学习模板的创建和使用，以及使用样式表美化网页，最后还要向大家介绍一下网站的测试与发布的知识。

图1-1 注册页面效果图图1-2 网站首页效果图1.2 任务实施为了完成任务描述里的网页效果，需要先设计一个模板，然后其他页面套用这个模板，根据页面本身需要实现的功能在可编辑区域内进行编码设计。

1.2.1制作模板并应用到其他页面1.创建模板Step1：新建一个站点，命名为WebDesignForum。

Step2：在站点下添加一个新文件，命名为home.html,其设计效果如图1-3所示，执行“文件”—“另存为模板”命令，命名为home.dwt，则在站点根目录下会自动创建一个“T emplate”文件夹，模板文件home.dwt就存放在该文件夹下面。

2.定义可编辑区可编辑区是指基于模板创建的页面中可以更改的内容，基于模板的页面中不可更改的部分成为“锁定区域”或“不可编辑区域”。

锁定区域用来体现网站统一的风格，如网站的Logo、导航条等，可编辑区是不同网页不同内容的体现，创建模板必须创建可编辑区，否则模板便没有任何的意义。

教学设计《运用框架结构制作网页》各位读友大家好，此文档由网络收集而来，欢迎您下载，谢谢南京四中张莉一、设计意图《运用框架结构制作网页》是初中信息技术（中国科学技术出版社出版）第二册中的内容，书中是以3个小任务的形式介绍了制作框架网页的详细操作步骤。

若按书上内容用传统的教师讲解、学生操作的方式教学，会存在一些问题。

一、学生不理解为什么要用框架结构来制作网页；二、学生只是按任务要求及具体的操作提示而完成框架结构网页，并不知道这种结构的网页应用在什么场合，在什么情况下选用框架结构来设计网页呢？三、内容上没有学生喜欢的动态或多媒体元素，学生觉得只是按部就班地操作，提不起兴趣。

所以在本节课的设计中要有心注意处理好以上三个问题，精心设计与学件，把提高学生信息技术素养，培养学生应用信息技术能力有机融于教学。

二、教材分析从在本教材中所处的位置来看，《运用框架结构制作网页》是在创建新站点，制作简单网页、运用表格制作网页和动态网页之后。

通过前面的学习，学生可以建立有多张网页的个人站点，在对网页的设计中会运用表格给网页布局，为了使网页增添动感，还会通过增加滚动字幕、动态按钮以及动画插件等方法，令网页更加具有活力。

但是除了表格布局外，还有一种常见的布局形式，应用也相当广泛，学生在浏览一些著名网站时就能遇到，通过本节课《运用框架结构制作网页》学习，可以为学生解惑，帮助学生理解框架结构制作网页的应用，因此本节课也是利用FrontPagexxxx 制作网页部分的重点内容。

希望通过学习，学生在自主设计网站时能灵活运用两种布局方法，相辅相成规划自己的网站。

从教材的难易度分析，这部分知识点学生从来没有接触过，在前面学习其它的应用软件时也没有类似的地方，故而有一定难度，教学目标不能定的过高。

另外，为了让学生知识模块更加清楚，教材中原本在该章节安排的横幅广告管理器内容已在前面动态网页制作中完成教学。

三、学情分析对初二的学生来说，运用框架结构制作网页是有一定难度的，因为学生在前面学习网页制作过程中没有接触过；在初一学习网络基础知识时只注意了根据网址找到相应网站并浏览网页内容，很少会考虑或注意到不同网站的不同布局。

《制作框架网页》作业设计方案（第一课时）一、作业目标通过本次作业，学生将掌握以下目标：1. 了解网页的基本构成，如标题、段落、图片等。

2. 学习使用框架来布局网页，提高网页的层次感和视觉效果。

3. 学习在框架中插入文字和图片，增加网页的信息量和吸引力。

二、作业内容任务一：设计一个简单的框架网页1. 创建一个新的网页文件，命名为“框架网页.html”。

2. 使用框架布局网页，至少包含两个框架，分别用于放置标题和内容部分。

3. 在标题框架中插入标题文字，在内容框架中插入至少一张图片。

4. 在内容框架中添加一些文字描述，以解释图片的内容。

5. 保存并上传作业文件至指定平台。

任务二：优化框架网页的外观和功能1. 调整框架的尺寸和位置，使网页看起来更加美观和协调。

2. 尝试使用不同的颜色、字体和样式来美化网页，提高视觉效果。

3. 测试框架网页在不同浏览器中的显示效果，确保兼容性。

4. 完成作业后，将优化后的网页文件上传至指定平台。

三、作业要求1. 作业文件必须为HTML格式，并按照要求命名。

2. 作业文件应包含完整的代码和说明，以便教师和其他同学理解。

3. 确保作业文件上传至指定平台，并完成提交。

4. 尽量发挥自己的创意和想象力，尝试不同的布局和美化方式。

5. 遵守网络安全和知识产权等相关法律法规，不得抄袭或使用他人内容。

四、作业评价1. 教师将根据作业完成情况、代码规范性、创新性等方面进行评价。

2. 教师将参考其他同学的反馈和建议，对作业进行进一步优化和指导。

3. 评价结果将纳入期末总评，以激励学生积极参与和不断提高。

五、作业反馈1. 学生可随时查看其他同学提交的作业，并进行评价和交流。

2. 学生可向教师提出疑问和建议，教师将及时给予解答和指导。

3. 鼓励学生之间互相学习、互相帮助，共同提高信息技术水平。

4. 通过反馈环节，学生可以更好地了解自己的优缺点，从而有针对性地改进和提高。

通过本次作业，学生将初步掌握制作框架网页的基本知识和技能，为后续学习打下坚实的基础。

《制作框架网页》作业设计方案（第一课时）一、作业目标本节课的作业旨在帮助学生巩固和理解《制作框架网页》课程内容，通过实践操作掌握基本的网页框架搭建技能。

通过完成作业，学生将能够：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的基本语法和常用标签；* 演示如何设置框架大小和位置；* 展示一些优秀的框架网页示例，帮助学生开阔视野。

此外，教师还可以提供一些有用的资源和学习材料，以帮助学生更好地完成作业。

学生可以通过小组合作、在线讨论等方式，互相学习和交流，共同提高技术水平。

《制作框架网页》作业设计方案（第一课时）一、作业目标通过本次作业，学生将掌握制作框架网页的基本概念和技能，包括框架的创建、页面布局、链接和样式设置等。

同时，学生将通过实践操作，提高自己的信息技术应用能力和问题解决能力。

二、作业内容1. 创建框架：学生需要使用所学的HTML和CSS知识，设计并创建两个框架页面。

一个框架用于展示主要内容，另一个用于展示辅助信息。

2. 页面布局：学生需要合理规划每个框架页面的布局，包括标题、正文、图片、链接等元素的布局和排版。

3. 链接设置：学生需要在每个框架页面之间建立链接，以便用户可以通过点击链接在不同的页面之间切换。

4. 样式设置：学生可以根据自己的喜好和页面内容，为框架页面设置适当的样式，如字体、颜色、大小、间距等。

三、作业要求1. 学生需要独立完成作业，不得抄袭或使用其他人的成果。

2. 作业中使用的所有代码和文件需要符合信息技术课程的要求，不得使用非法或恶意代码。

3. 学生需要在规定时间内完成作业，并提交作业文件至教师指定的平台或邮箱。

4. 提交的作业文件应包括每个框架页面的HTML和CSS代码，以及任何必要的图片、链接等资源文件。

四、作业评价1. 教师将根据作业的质量和完成情况，给予学生相应的分数。

2. 评价标准包括页面布局是否合理、链接是否有效、样式是否符合要求、代码是否规范等。

3. 学生可以通过教师提供的平台或邮箱查看自己的作业评分和反馈意见，以便改进和提高自己的技能。

五、作业反馈1. 学生应认真阅读教师提供的反馈意见，并根据意见改进自己的作业，提高自己的技能水平。

2. 学生可以随时向教师咨询或讨论与作业相关的问题，教师将尽力提供帮助和解答。

3. 教师在评价学生作业时，应尊重学生的创意和个性，鼓励他们发挥自己的想象力和创造力，同时也要注重技术规范和准确性。

通过本次作业，学生将能够掌握制作框架网页的基本知识和技能，提高自己的信息技术应用能力和问题解决能力。

《制作框架网页》作业设计方案（第一课时）一、作业目标本节课的作业设计旨在通过制作框架网页的实践操作，让学生掌握网页制作的基本框架搭建技巧，熟悉HTML基础语法，提升学生对网页设计的理解与运用能力，培养其逻辑思维能力及创新思维。

二、作业内容本课时作业内容主要围绕“制作一个简单的框架网页”展开。

1. 基础知识学习：学生需预习并掌握HTML中框架标签的使用方法，了解框架网页的基本结构。

2. 框架设计：学生需设计一个包含至少两个框架的网页布局，每个框架内应包含不同的内容或功能。

3. 代码编写：学生需使用HTML编写代码，实现所设计的框架布局。

要求代码结构清晰，语义明确。

4. 样式美化：学生可适当添加CSS样式，对框架网页进行美化处理，使其更加美观、易用。

三、作业要求1. 安全性：代码应遵循HTML规范，无安全隐患。

2. 规范性：代码应有良好的缩进、注释等规范性书写习惯。

3. 创新性：鼓励学生在框架设计中融入自己的创意和想法，展现个性。

4. 实用性：所设计的框架网页应具备实际用途，如信息展示、互动交流等。

5. 提交要求：作业需按时提交，并附上详细的代码注释和设计思路说明。

四、作业评价1. 评价标准：根据学生的代码规范性、创新性、实用性以及作业完成度等方面进行评价。

2. 互评机制：鼓励学生之间进行互评，互相学习、互相进步。

3. 教师点评：教师需对每份作业进行仔细评阅，给出详细的评价意见和改进建议。

五、作业反馈1. 课堂讲解：下节课上，教师需对共性问题进行讲解，对优秀作业进行展示。

2. 个别辅导：针对学生作业中存在的问题，教师需进行个别辅导，帮助学生解决问题。

3. 作业优化：鼓励学生根据教师和同学的建议，对作业进行优化改进，提升作品质量。

六、附加建议在完成本课时作业的基础上，教师可鼓励学生进行拓展学习，如学习如何使用JavaScript为网页添加交互功能，或学习使用CSS3的动画效果来增强网页的表现力等。

同时，可引导学生关注网页设计的最新趋势和优秀案例，拓宽视野，激发创意。

《制作框架网页》作业设计方案（第一课时）一、作业目标通过本次作业，学生将掌握制作框架网页的基本概念和技能，包括了解网页框架的构成、学会创建框架、设置页面属性等。

通过实践操作，学生将加深对信息技术课程的理解，提高解决问题的能力。

二、作业内容1. 任务一：创建框架学生需要使用HTML代码创建一个简单的框架页面。

要求框架分为左右两个部分，左侧部分放置导航栏，右侧部分为内容区。

学生需要使用表格或div标签进行布局设计。

2. 任务二：设置页面属性学生需要设置框架页面的标题、背景颜色、边距等属性，使页面更加美观。

同时，学生需要使用CSS样式对内容区进行美化，如调整字体、大小、颜色等。

3. 任务三：链接和导航学生需要在左侧导航栏中添加链接，使页面可以跳转。

学生需要使用超链接标签<a>实现链接功能，同时确保链接的正确性和可用性。

三、作业要求1. 学生需独立完成作业，不得抄袭或使用其他方式获取答案。

2. 作业中使用的代码和设计应符合规范，符合网页制作的基本原则。

3. 学生需在规定时间内完成作业，并在提交作业时附上相应的注释和说明。

4. 鼓励学生在作业中运用创新思维，尝试不同的布局和美化方式，提高自己的实践能力。

四、作业评价1. 评价标准：根据学生的作业完成情况、代码规范性、页面美观程度等方面进行评价。

2. 评价方式：教师对学生提交的作业进行批改，给出相应的分数和评语。

同时，教师可以通过学生的作业反馈，了解学生对知识的掌握情况，以便在后续教学中进行调整和改进。

3. 评价结果：根据评价标准，对学生的作业进行评分和排名。

对于表现优秀的学生，给予一定的奖励和鼓励，以提高学生的学习积极性和自信心。

五、作业反馈1. 学生反馈：学生可以通过教师提供的反馈信息，了解自己的作业完成情况，找出自己的不足之处，及时调整学习方法和策略。

同时，学生可以向教师提出自己的疑问和困惑，寻求帮助和建议。

2. 教师反馈：教师可以通过学生的作业反馈，了解学生对知识的掌握情况，以便在后续教学中进行调整和改进。

《制作框架网页》作业设计方案（第一课时）一、作业目标本作业设计旨在通过制作框架网页的实践操作，使学生掌握网页制作的基本流程和框架构建的方法，提升学生运用信息技术进行创新实践的能力，同时加强学生对网页设计美学的理解与运用。

二、作业内容1. 理论学习：学生需学习网页框架的概念、作用及常见的网页框架类型。

理解框架网页在网页设计中的重要性，并掌握如何使用HTML语言进行框架网页的初步构建。

2. 选定主题：学生需根据个人兴趣，选择一个适合的网页主题，如学校官网、社团网站等，为接下来的框架设计与内容填充做准备。

3. 设计框架：学生需根据选定的主题，设计出合理的网页框架结构，包括导航栏、页眉、页脚等基本元素的位置与布局。

4. 编写代码：学生需使用HTML语言，按照设计的框架结构编写代码，完成框架网页的初步搭建。

5. 保存与提交：学生需将完成的框架网页保存为HTML文件，并按要求提交至指定的作业平台。

三、作业要求1. 规范性：代码编写需符合HTML语言规范，结构清晰，易于阅读和维护。

2. 创意性：框架设计需有创意，能体现所选主题的特点，同时保持美观与实用性的平衡。

3. 完整性：作业需包含完整的导航系统、页眉、页脚等基本元素，且各部分之间应协调统一。

4. 独立性：学生需独立完成作业，不得抄袭他人作品。

5. 时间性：学生需在规定的时间内完成作业并提交，以确保作业的及时性与效率。

四、作业评价1. 教师评价：教师根据学生的作业完成情况、代码规范性、创意性、完整性等方面进行评价，给出相应的成绩。

2. 互评：鼓励学生之间进行互评，互相学习，取长补短。

3. 自评：学生需对自己的作品进行反思与评价，找出不足之处并加以改进。

五、作业反馈1. 教师反馈：教师需对学生的作业进行详细点评，指出优点与不足，并给出改进建议。

2. 学生反馈：学生需根据教师与同学的反馈，对作品进行修改与完善，以提高作品的质量。

通过此作业设计方案的实施，将有助于学生掌握网页制作的基本流程和框架构建的方法，同时提高学生的信息技术实践能力和创新思维。