网页效果图的制作公开课教案
网页的美化与特效制作教案
网页的美化与特效制作【教学目标】（一）知识目标通过学习，使学生了解导航栏和共享边框，给网页设置背景，使网页更加美观。
理解导航栏和共享边框的作用。
（二）能力目标学生能熟练掌握为网站主页设置共享边框，添加主页与下级网页的导航栏；学会为网页设置背景（包括背景图片和背景颜色），增强学生对网页进行合理搭配的观念。
（三）情感目标培养学生的自学能力、操作能力以及分析和解决问题的能力，通过对网页的美化，培养学生审美能力。
【教学重难点】重点：1.理解共享边框和导航栏的好处，学习为网站设置共享边框，添加主页与下级网页的导航栏2.学习给网页添加背景；难点：为网站设置共享边框，添加主页与下级网页的导航栏，给网页添加背景，网页背景与内容的合理搭配。
【教学安排】课时安排：一课时。
【教法、学法】1、教法：以“比较法”和“激趣探知法”引入新课，以强烈鲜明的对比效果激发学生的学习兴趣，推动学生探求新知的强烈欲望，提高学生的学习主动性。
适时给表现好的学生表扬，通过学生看书自主学习，培养学生的创新精神和实践能力。
利用任务驱动，引导学生自主学习、动手实践方式完成本节课的教学目标。
2、学法：教学活动是教和学的双边相互促进活动。
在浓厚的创设欲望和教师布置任务的驱动下，学生积极主动的参与教学活动。
结合课本，自主发现问题、提出问题、解决问题，通过多思考、多交流，学习掌握本节课的重点内容。
通过学生演示作品展示，引导学生相互交流、对作品进行评价，由此增强学生对网页内容和背景图片颜色进行合理搭配的能力。
【活动概述】本次教学活动是在教师的指导下，学生通过观察、探索、讨论、研究进行自主性学习，学会对网页进行美化（包括：设置共享边框和导航栏，设置网页背景）。
【教学准备】1.课件2.上课资料两份内容相同的网页，（一份是经过美化的，一份是没有美化的，事先在每位学生计算机上都拷上没有美化的网页。
）【教学过程】组织教学第一阶段：观察作品，导入新课1、老师演示出示内容相同的网页《我的家乡》，（一份是经过美化的，一份是没有美化的）让学生观察：2、看一看，有哪些不同，哪个网站浏览更方便、更能吸引观众？3、学生活动：观察、思考，发言。
DreamWeaver网页制作公开课教案
观察理解
这个网址你就可以打开这个网站的首页（入口） ，通过点击超链接 打开一个又一个页面去浏览。 创设情境：打开 seek 网站根文件夹进行演示说明 观察明确 第二层含义：对于一个网站设计者而言， 它就是一个文件夹， ．．．．．．．．．．．．．．．．．．．． ． 把你所设计的所有网页，所用到的所有素材都分门别类地存放在 这样一个文件夹里。 那么，超链接跟它又有什么关系呢？依据超链接与其关系， 我们将超链接划分成如下几类： 引发思考
公开课教案
授课章节 名称 课题 序号 第四单元 《DreamWeaver 网页制作——超链接的使用》 授课 时间 2006-4-4 星期二 第三节 授课 班级 04162 班 课型 课时 教师 姓名 复习 1 时红玲
教学目标
知识目标：了解超链接的含义、作用及在网页制作中的地位 掌握超链接的分类及作用对象 熟练掌握超链接的创建方法 能力目标：能够创建文字、图像、图像热区、电子邮件、书签超链接 能够运用超链接的创建方法将一个网站中的页网连接起来 情感目标：培养学生团结协作的能力 培养学生的爱国主义情怀 培养学生不断进取的求知精神 超链接的种类 超链接的创建方法 电子邮件超链接、书签超链接 超链接的实际应用 本教材已基本学完，马上要进入综合实战，但在进行综合实战之前，必须要对 超链接和网页布局进行一下复习，这两个知识点的正确掌握与否，对网页设计 致关重要。 学生在一个月前已经学习了超链接及其创建方法， 但时间比较长了， 学生对此知识点有所遗忘，还需要花一节课时间进行充分的复习与巩固。 教材 名称 NIT 的 《DreamWeaver 网页 制作》 出 版 社 西安交通大学 出版社 作 者 教育部考 试中心编
本教材已基本学完，马上要进入综合实战，但在进行综合实战之 明确本节课的学 前，必须要对超链接和网页布局进行一下复习，这两个知识点的 习目标 正确掌握与否，对网页设计致关重要。我们在一个月前已经学习 了超链接及其创建方法，但时间比较长了，学生对此知识点有所 遗忘，还需要花一节课时间进行充分的复习与巩固。试想：如果 没有超链接，我们就无法把制作的一个个网页连接起来，就无法 让用户通过点击方便的浏览一个又一个页面。
网页制作教案
网页制作教案课程名称：网页制作教学目标：1.了解网页制作的基本概念和原则。
2.掌握网页设计的基本技巧和工具。
3.培养学生的创造力和团队合作能力。
4.通过实践项目，提高学生的问题解决和解决方案设计能力。
年级水平：初中高中课时数：10课时教学材料：1.计算机或笔记本电脑2.网页设计软件（如Adobe Dreamweaver）3.网页制作教材或参考书籍4.案例分析和示例网站课程安排：第一课：网页制作基础（1课时）- 介绍网页制作的定义和目的- 解释HTML和CSS的基本概念- 示范如何创建HTML文件并在浏览器中查看第二课：网页布局与设计（1课时）- 解释网页布局的重要性和原则- 演示如何使用CSS创建简单的网页布局- 强调网页设计的可读性和美观性第三课：文本和图像处理（1课时）- 讲解HTML中文本和图像标签的用法- 指导学生如何在网页中插入文本和图像- 鼓励学生使用样式和对齐技巧来提高页面的可视化效果第四课：超链接和导航（1课时）- 介绍超链接的概念和作用- 演示如何创建内部和外部链接- 引导学生设计网站导航菜单第五课：多媒体和互动元素（1课时）- 解释如何在网页中嵌入音频和视频- 演示如何创建表单和添加交互元素- 鼓励学生设计交互式网页元素以增加用户体验第六课：响应式网页设计（1课时）- 解释响应式网页设计的概念和原则- 演示如何使用媒体查询和流式布局创建响应式网页- 强调在不同设备上测试和优化页面的重要性第七至八课：案例分析与实践项目（2课时）- 分析和讨论一些成功的网站案例- 指导学生进行网页设计项目，包括规划、设计和实施阶段- 提供指导和反馈，帮助学生改进他们的网页设计技能第九至十课：项目呈现与总结（2课时）- 学生展示他们的网页设计项目- 分享项目中的挑战和解决方案- 提供指导和建议以进一步完善他们的设计作品- 结束课程时，总结学生的学习成果和进步评估方法：1.课堂参与和表现评估2.项目成果评估3.网页设计作品展示和评估备注：以上教案仅供参考，具体的教案内容和安排可根据实际情况进行调整和优化。
《网页制作》教学设计（5篇）
《网页制作》教学设计（5篇）作为一名优秀的教导工，通常会被要求编写教学设计，借助教学设计可以提高教学质量，收到预期的教学效果。
则写教学设计须要留意哪些问题呢？下面是我收拾的《网页制作》教学设计〔精选5篇〕，欢送阅读与收藏。
《网页制作》教学设计1一、教材或教学内容分析本章内容在本教材中的位置处于第五章,是在文字处理(Word2000)和网络根底及因特网应用两章之后。
学生所学的文字处理软件Word和将要学习的网页制作软件Frontpage同是Microsoft公司的产品,在软件的使用上有无数的共通之处,所以在学习frontpage的时候,无数内容可以让学生自学,而不必面面俱到地在课上讲授。
而第四章网络根底及因特网的应用又为学生对网页的理解奠定了根底,学生对网页中的根本元素——文字、图片、动画、声音等都有所了解,而网页的制作就是将这些元素重新组合到网页上,学生要学的就是这种组合的办法。
所以说,虽然大多数学生以前都未接触过网页的制作,但有了以上这些根底,学起来就轻巧多了。
本章内容根据学生已有的根底,我对教学内容分了一下类,也为教学的组织工作打下一点根底。
本章内容主要由网页根底学问、网站的建设和管理、网页的制作、创立超链接、图片的处理、网页框架。
重点是网页的制作和创立超链接,学会了这些就可以开场容易的网页制作了。
难点是网页框架,这局部互相之间关系比拟冗杂,必要时,教师在对各组个别辅导时,可以赋予分离解说。
这个分类可以为组长支配各个组员的任务提供参考,使分工越发合理。
二、教学对象的分析信息技术课虽然已经成为初中的必修科目,但是城乡学生之间控制状况的差别却相当大,条件好一点的初中学生不仅已经娴熟控制了课本上的内容,还对一些常用软件有所了解;而差一点的可以说是从高中开场才正式接触到信息技术学问的学习,他们须要多锻炼、多指导,所以配合学习对学生的学习帮忙很大。
三、教学策略的挑选及媒体的使用在教学策略的挑选上,我使用的是任务驱动和配合学习相结合的办法。
大学主题网页制作教案模板
课程名称：网页设计与制作课时安排：4课时教学目标：1. 让学生了解大学主题网页的基本概念和设计原则。
2. 培养学生使用网页制作软件进行实际操作的能力。
3. 提高学生的审美能力和创新意识。
教学重点：1. 大学主题网页的设计原则。
2. 网页制作软件的使用技巧。
教学难点：1. 网页布局的合理性。
2. 网页美感的提升。
教学准备：1. 网页制作软件（如Adobe Dreamweaver、Microsoft FrontPage等）。
2. 大学主题网页设计案例。
3. 教学课件。
教学过程：第一课时一、导入1. 引导学生思考：什么是大学主题网页？2. 简要介绍大学主题网页的特点和作用。
二、讲解1. 大学主题网页的设计原则：a. 简洁明了：避免过多装饰，突出主题。
b. 美观大方：色彩搭配、字体选择、图片处理等。
c. 便于浏览：导航清晰，内容组织合理。
d. 适应性：兼容不同浏览器和设备。
2. 网页制作软件的使用技巧：a. 熟悉软件界面和基本操作。
b. 使用表格布局和CSS样式表进行页面设计。
c. 合理运用图片、动画等元素。
d. 注意代码规范和优化。
三、实践1. 学生分组，每组设计一个大学主题网页。
2. 指导学生使用网页制作软件进行操作。
第二课时一、回顾上节课内容1. 复习大学主题网页的设计原则和网页制作软件的使用技巧。
2. 汇报上节课设计的网页进度。
二、讲解1. 网页布局的合理性：a. 合理安排内容区域，突出重点。
b. 注意页面上下左右的平衡。
c. 避免过多的空白和冗余信息。
2. 网页美感的提升：a. 选择合适的色彩搭配。
b. 合理运用字体和字号。
c. 优化图片质量和布局。
三、实践1. 学生根据指导，对已设计的网页进行优化。
2. 指导学生添加特效和动画，提升网页吸引力。
第三课时一、回顾上节课内容1. 复习网页布局的合理性和网页美感的提升方法。
2. 汇报优化后的网页进度。
二、讲解1. 网页的交互性设计：a. 使用超链接实现页面跳转。
网页制作教案
网页制作教案
教学目标：学生能够掌握基本的网页制作技巧，能够制作简单的网页。
教学重点：网页布局、文本编排、插入图片、添加链接等基本网页制作技巧。
教学准备：计算机、网页制作软件、相关教学资料。
教学过程：
1. 介绍网页制作的基本概念和流程。
2. 教授网页布局的基本原则，包括顶部导航栏、页眉、侧边栏等。
3. 演示如何使用网页制作软件进行网页布局设计，通过拖拽图形元素实现。
4. 说明文本编排的基本规则，包括字体、字号、字距等。
5. 指导学生使用文本编辑工具进行文本编排，实现网页中各部分的文字内容。
6. 指导学生如何插入图片，并讲解图片格式的选择和优化方法。
7. 演示如何添加链接，并介绍超链接的作用和使用方法。
8. 分组训练，学生根据所学知识制作简单网页。
9. 学生展示自己的作品，并相互评价。
10. 总结网页制作的要点和注意事项，并激发学生对网页制作
的兴趣。
教学扩展：
1. 引导学生学习其他网页制作技术，如CSS样式设置、JavaScript交互效果等。
2. 组织学生参加网页设计比赛，激发学生创造力和团队合作精神。
评估方式：观察学生的学习过程和展示作品，给予评价和建议。
最新网页制作教案2
网页制作教案2项目教学教案项目名称网页制作提高训练模块网页制作学习任务通过学习，对网页制作过程理解加深与网页制作操作技能得到提高授课教师授课班级教学方法项目教学法教学时间(第周）年月日-------- (第周）年月日（共天）学时学时审核意见签名：年月日学习目标一、应用超链接和行为二、用表格构建网页布局三、应用框架布局网页四、应用样式表教学条件一、课本参考教材二、网络教学环境10课时——（4课时）（6课时） 项目四制作文化公司网站——应用超链接和行为任务一为首页和子页设置链接——应用超链接相关知识一、设置常规超链接二、设置图片链接和下载链接三、设置电子邮件链接四、设置热点链接五、设置命名锚记链接六、设置跳转菜单实施步骤任务评价思考与练习任务二为首赁添加伴随窗口——应用行为相关知识一、认识“行为”面板二、应用行为三、应用“弹出信息，行为”四、应用“打开浏览器窗口”行为五、对图像应用“效果”行为六、应用“显示，隐藏元素”行为七、应用“设置状态栏文本”行为八、安装行为插件实施步骤任务评价思考与练习项目评价知识拓展一、制作弹出式下拉菜单二、文化公司网站欣赏1.观看教学课件2.预习课本3.演示操作4.讲授重难点5.布置学习任务6.学生自行练习7.教师巡视课堂8.讲评作业9.学生修改作业并上交10.课堂小结10课时——（4课时）（6课时） 项目五制作饰品网站——用表格构建网页布局任务一布局主页index.html——表格的基本应用相关知识一、插入表格二、选择表格和单元格三、设置表格属性四、设置单元格属性实施步骤任务评价思考与练习任务二布局子页——表格有高级应用相关知识一、拆分与合并单元格二、在表格中添加或删除行与列实步骤任务评价思考与练习项目评价知识拓展一、表格单位为百分比和像素时的比较二、单元格没有按照指定的大小显示三、珠宝首饰饰品行业网站欣赏三、度假村网站欣赏1.观看教学课件2.预习课本3.演示操作4.讲授重难点5.布置学习任务6.学生自行练习7.教师巡视课堂8.讲评作业9.学生修改作业并上交10.课堂小结10课时——（4课时）（2课时）（4课时）●项目六制作播客网站——应用框架布局网页任务一制作网站首页——了解和使用框架相关知识一、了解框架和框架集二、了解框架构造三、制作并保存框架集文档四、设置框架集属性五、设置框架属性实施步骤一、制作网站首页二、设置链接思考与练习项目评价知识拓展一、嵌入式框架二、播客网站欣赏●项目七制作美容网站——应用样式表任务一为网站首页设置样式——样式表的基本应用相关知识一、熟悉“CSS样式”面板二、CSS样式的存在方式三、CSS样式的分类四、创建样式的一般步骤实施步骤任务评价思考与练习任务二为网站子页设置样式——样式表的高级应用相关知识一、附加外部样式二、CSS滤镜简介实施步骤1.观看教学课件2.预习课本3.演示操作4.讲授重难点5.布置学习任务6.学生自行练习7.教师巡视课堂8.讲评作业9.学生修改作业并上交10.课堂小结。
网页的美化与特效制作教案
网页的美化与特效制作教案一、教学目标1. 让学生了解网页美化的基本原则和方法。
2. 培养学生掌握HTML和CSS的基本语法和用法。
3. 使学生能够使用JavaScript实现网页的基本特效。
二、教学内容1. 网页美化的基本原则和方法：页面布局、色彩搭配、字体与排版、图片处理等。
2. HTML基本语法和用法：标签、属性、注释、文档结构等。
3. CSS基本语法和用法：选择器、属性、注释、样式规则等。
4. JavaScript基本语法和用法：变量、数据类型、条件语句、循环语句、函数等。
5. 网页特效的实现：鼠标悬停效果、下拉菜单、滚动动画等。
三、教学过程1. 讲解网页美化的基本原则和方法，通过实例演示和分析，让学生理解和掌握。
2. 讲解HTML的基本语法和用法，通过实例演示和练习，让学生掌握HTML 的基本标签和属性。
3. 讲解CSS的基本语法和用法，通过实例演示和练习，让学生掌握CSS的选择器和样式规则。
4. 讲解JavaScript的基本语法和用法，通过实例演示和练习，让学生掌握JavaScript的基本语法和函数。
5. 讲解网页特效的实现方法，通过实例演示和练习，让学生掌握如何实现简单的网页特效。
四、教学方法1. 采用“讲解+演示+练习”的教学模式，让学生在听讲的跟随老师一起操作和实践。
2. 使用多媒体教学工具，如PPT、网页演示等，直观地展示和讲解知识点。
3. 鼓励学生提问和参与讨论，解答学生在学习过程中遇到的问题。
4. 布置课后作业，巩固所学知识，提高学生的实际操作能力。
五、教学评价1. 课堂表现：观察学生在课堂上的参与程度、提问和回答问题的情况。
2. 课后作业：检查学生完成作业的质量，评估学生对所学知识的掌握程度。
3. 项目实践：让学生独立完成一个网页美化与特效制作的项目，评估学生的综合运用能力。
教学资源：教材、多媒体教学课件、网络资源、编程工具。
六、教学环境1. 硬件环境：计算机教室，每台计算机配备浏览器、文本编辑器和网页制作相关软件。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
网页效果图的制作
——制作网页标志横幅
课程：电子商务网页制作班级：09电商3+2
时间：12月16日第三节授课教师：李晓琳
教学目标：知识目标：1、能描述创建网站主页的目的
2、能列举网页应包含的内容
3、了解网页标志横幅的作用
技能目标：1、能绘制网站主页的网页标志横幅
2、掌握fireworks工具属性的设置方法
情感目标：对操作过程中遇到的问题能主动思考具有较强的网页设计
创意思维、艺术设计素质。
教学重点：1、Firewoks中矩形工具、文字工具、直线工具、库命令的使用
2、Firewoks中元件转换为按钮的操作
难点：元件转换为按钮及库命令的使用
教学方法：任务驱动教学法
一、导入
提问：同学们平时的休闲方式有哪些呢？——影视文化通常是我们茶余饭后的谈资，平时也会去电影院看电影是吧？特别是大片，往往去了电影院要排长队，而且还不一定买的到票，在电子商务迅速发展的推动下，网上订票为我们消除了排队买票的烦恼。
那网上订票是基于什么样的平台呢？下面我们来看下我们德清的大地数字影院的网络平台——“哈票网”。
二、新授
任务一：网页横幅的制作——
1、“哈票网”网站的展示，分析引出一个网页应包含哪些内容。
提问：看了这个页面，请你说出一个网页包含哪些元素呢？
（学生回答，教师补充）——引出网页横幅的重要性
2、为什么要制作网页横幅？
在一个简单的网页中，上方的横幅是最重要的视觉元素。
在很多博客网页中，
它甚至是唯一的视觉元素。
所以它的作用可以说是相当大的。
它必须能够与网站的风格配合，并能传达视觉上的信息。
它必须让人看上一眼就让人知道这个网站是属于什么类型，风格是什么。
（展示不同网站的不同网页横幅效果图，说明网页横幅是可以多种形式展现的。
）
3、提出任务，教师演示：效果图展示，操作示范
（1）新建一个文档：宽1200像素，高为600像素。
（2）矩形工具、圆角矩形工具、椭圆工具、文字工具、直线工具的使用及属性设置
4、学生活动：按所给效果图及素材制作网页横幅（根据男女生兴趣偏好不同，
男女分组操练：男生做NBA网页横幅、女生做淘宝门户网的网页横幅）操作步骤: （1）新建一个文档：新建一个文档：宽1200像素，高为600像素。
（2）用矩形工具绘制两个矩形：可与画布同长，宽度根据需要自定，大矩形的颜色设为“#333333”,小矩形的颜色设为“#666666”
（3）在小矩形右侧添加文字，选择“文字工具”，添加文字，其属性设置为：字体——宋体，颜色——“#66FF00”，字号——“15”
（4）用椭圆矩形工具在画布的左侧绘制两个圆形，一大一小，填充颜色渐变，颜色为“#FFFF00”至“#00CC00”,如图所示（5）用文字工具，在大圆上添加文字“哈”，文字属性设置为：“白色”“隶书”“90”；小圆上添加文字“票”，属性设置为“白色”
“幼圆”“30”；再用文字工具在“哈票”右侧添加文字“快速
订票轻松观影”，属性设置为“白色”“幼圆”“24”，紧接着下
方添加网址，属性设置为“#66FF00”“Century Gothic”“22”
5、教师巡回指导，发现问题，个别辅导
任务二、美化横幅——添加阴影、元件转换为按钮
6、提出任务，教师演示：效果网页横幅展示，操作示范
（1）添加阴影
（2）元件转换为按钮的操作
（3）“库”命令的操作
学生活动：按所给效果网页制作
操作步骤：（1）选中要添加阴影的对象“哈”，选择“命令”——“创意”——“添加阴影”，调整到所需要的位置
（2）选择“圆角矩形工具”绘制一个圆角矩形，颜色填充为“#333333”
描边选择“铅笔”，笔尖大小和边缘都为“3”，颜色为“#66FF00”
按<F8>，弹出元件属性对话框，名称改为“选择”，类型为“按
钮”，单击确定。
（3）打开“库”面板,将元件拖动到网页中，排列对其，选中对象，选择文字工具，添加文字“选影院订票”“选影片订票”
（4）按<F12>可以预览网页，操作完成后，保存为“png”格式的文档，同时以网页形式导出，保存在桌面以自己姓名命名的文件夹。
（在
桌面上新建文件夹，以自己的名字命名）
教师巡回指导
三、点评：对学生上传的作品进行点评，学生互评。
四、课堂小结：
本节课我们学习了网页标志横幅的制作，学习FIREWORKS中矩形工具、圆角矩形工具、文字工具、直线工具及库命令的操作，重点掌握元件转换为按钮的操作及库命令的使用。
五、作业：完成实验指导练习的操作练习和实验报告。