网页制作教学大纲

网页制作教学大纲（通用8篇）

1.网页制作教学大纲 篇一

《网页制作》教学大纲（40学时）

课程代码：13407334

一、课程性质、目的及开课对象

（一）课程性质：专业选修课

（二）目的：对学生进行网页制作技能训练，提高他们对网络资源利用开发的能力，处于信息时代，还应努力培养学生的信息素养，使他们掌握网页制作的基本技能和网络资源利用的基本能力，以及网络道德素养的培养与提高。

（三）开课对象：教育技术学专业本科学生，时间为第七学期。

二、先修课程：无

三、教学方法和考核方法

（一）教学方法：演示法、讲授法。

（二）考核方式：考查

四、学时数分配

总学时：40学时。授课20学时，实验20学时。

五、教学内容与学时

第一章 HTML基础（2学时）【主要内容】：

1.1 什么是HTML 1.Web页的基本概念 2.HTML的工作原理 3.创建和测试Web页 1.2 创建WEB页 1.标记符基础

2.Web页的基本结构 3.设置页面属性 4.添加注释 5.显示特殊符号 1.3 发布WEB页 1.创建本地站点 2.申请网页空间 3.用FTP上传网页

【重点难点】：站点的创建与使用

【学生掌握要点】：什么是HTML、站点的创建与使用 【习题】：

1.简要说明HTML的基本工作原理。

2.编写一个能够显示背景图案并能播放背景音乐的网页。

第二章 文本格式（2学时）【主要内容】： 2.1 文本分段

1.段落标记符P和换行标记符BR 2.水平线标记符HR 3.标题标记符Hn 4.段落对齐

2.2 控制文本的显示效果 1.字体控制标记符FONT 2.物理字符样式 3.逻辑字符样式 4.滚动文字效果 2.3 列表格式 1.有序列表 2.无序列表

【重点难点】：控制文本的显示效果 【学生掌握要点】：文本格式化 【习题】：

1、自行编写实例，尝试本章中介绍的所有标记符和属性。

第三章

使用图像（4学时）【主要内容】：

3.1 web页图像基础 1.位图与矢量图形 2.Web页图像格式 3.使用网页图像的要点 3.2 图像处理基本操作 1.Fireworks的界面 2.修改图像大小

3.用适当的格式导出图像 4.制作GIF动画 3.3 图像标记符IMG 1.插入图像 2.设置图像属性 3.4 创建超链接

1.相对地址和绝对地址 2.页面链接 3.锚点链接 4.电子邮件链接 3.5 使用图像映射 1.什么是图像映射 2.创建图像映射

【重点难点】：创建超级链接和对页面空间结构的理解。【学生掌握要点】：图像处理基础、图像处理、超级链接 【习题】：

1.2.3.4.简要说明GIF格式和JPEG格式各自的特点。说明在网页中使用图像时应注意的基本原理。

使用FRIEWORKS制作一个GIF动画，并将动画插入到网页中。制作一个简单的图像映射网页。

第四章

表格与框架（2学时）【主要内容】：

4.1 创建表格

1.表格的基本结构 2.合并单元格

3.构造表格的步骤 4.2 表格的属性设置 1.边框与分隔线 2.控制单元格空白 3.表格的对齐

4.3 使用表格设计网页布局 1.控制表格和单元格大小 2.控制表格和单元格的背景 3.使用嵌套表格

4.表格布局综合应用 4.4 创建框架 1.什么是框架 2.指定框架结构 3.框架的嵌套 4.框架的初始化

4.5 控制框架的显示效果 1.边框效果 2.设置框架空白

4.6 使用框架设计网页布局 1.指定超链接的目标框架 2.使用页面框架

【重点难点】：使用表格与框架设计网页布局

【学生掌握要点】：实现表格的各种作用、使用框架设计网页布局 【习题】：

1、按照讲解实例自行制作。

2、制作一个简单的个人网站，要求使用表格排版，并用到框架导航结构。请注意不同页面到框架页面的跳转，以及如何从框架页面跳出。第五章

CSS技术（4学时）【主要内容】：

6.1 CSS入门 1.什么是CSS 2.CSS的属性单位 6.2 在网页中使用CSS 1.在标记符中直接嵌套样式信息 2.在STYLE标记符中定义样式信息 3.链接外部样式表中的样式信息 4.样式的优先级 6.3 CSS样式定义

1.HTML标记符selector 2.具有上下文关系的HTML标记符selector 3.用户定义的类selector 4.用户定义的ID selector 5.虚类selector 6.4 CSS属性

1.字体与文本属性 2.颜色与背景属性 3.布局属性

4.定位和显示属性 5.列表属性 6.鼠标属性

6.5 CSS过滤器效果 1.过滤器属性列表 2.过滤器效果示例

【重点难点】：CSS样式定义

【学生掌握要点】：在网页中使用CSS 【习题】：

1.2.3.4.简要说明在网页中使用CSS的三种方式，并说明各自的特点。说明如何确定网页中特定CSS样式的优先级。试验各节介绍的各种CSS属性效果和过滤器效果。

制作一个个人网站，要求合理使用CSS技术和其他网页技术。

第六章

用DreamweaverMX制作网页（6学时）【主要内容】：

7.1 DreamweaverMX的界面 1.DreamweaverMX的界面元素 2.设置文档窗口 7.2 创建和管理站点 1.网站开发流程 2.创建本地站点 3.管理本地站点

4.创建与管理远程站点 7.3 文本修饰与超链接 1.制作网页的一般过程 2.设置字符格式 3.设置段落格式 4.设置列表格式 5.使用超链接 7.4 使用图像 1.插入图像 2.设置图像属性 3.制作图像映射 4.动态图像效果 7.5 使用多媒体对象 1.使用声音与视频 2.使用Flash对象 7.6 设置页面版式 1.使用表格排版 2.使用层排版 3.使用框架排版 7.7 表单与行为 1.创建表单 2.创建表单控件

3.添加表单控件标签 4.行为的概念与基本操作

5.使用DreamweaverMX自带的行为动作 7.8 使用样式

1.使用HTML样式 2.创建和应用CSS样式

3.创建和链接外部CSS样式表

【重点难点】：站点的建立与管理；网页设计与制作 【学生掌握要点】：用DreamweaverMX制作网页 【习题】：

1.简要说明Dreamweaver的界面组成元素及其相应功能。

2.简要说明网站建设的工作流程，规划站点时要考虑哪些问题？设计站点时要考虑哪些问题？

3.总结在Dreamweaver中制作网页的一般过程。4.如何在网页中使用声音和视频？

5.在Dreamweaver中分别用表格和层两种方法制作同一个页面效果。具体页面要求见授课内容。

6.在Dreamweaver中实现一个简单的网站（5－10页），要求使用框架导航结构。7.什么是行为？Dreamweaver提供哪些常用的行为动作？它们的作用是什么？

8.什么是HTML样式？它和CSS样式有何不同？在Dreamweaver中能够实现哪些类型的CSS样式？

9.简述在Dreamweaver中使用CSS样式表的步骤。

六、教材与教参

（一）教材：

无

（二）教参：

1、《网页制作教程》

2、《网页制作三剑客实例精粹》

3、《跟我学Dreamweaver MX》

赵丰年等 姜谷鹏等 甘登岱等6

人民邮电出版社航空工业出版社人民邮电出版社 2005年 2003年 2002年

2.网页制作教学大纲 篇二

1《网页制作》课程课程教育标准

Internet的普通应用已深入到社会生活的各个角落,许多单位都需要维护自己的网站或正在建立自己的网站,特别是企业,他们的网站在商品流通中起到非常重要的作用。因此在大学生求职中,许多单位都把大学生是否掌握网页制作作为一项重要技能的衡量标准。网页制作是当今非常流行的实用技术,在各高职院校的计算机专业都开设了网页制作这门课程。《网页制作》课程尤其注重实际操作和网页设计人员必备的基本能力的训练,使学生熟练掌握网页设计与制作的操作技术、具备开发、维护小型网站的知识和能力。有助于完善学生的专业知识结构、提高学生从事实际工作的综合素质。通过本课程的学习,逐渐培养和提高学生科学的思维方法和创新思维能力、团队协作能力和以下四大知识结构的能力:1)网页与图形图像独立创作、设计和制作的能力;2)使用网页布局工具布局综合网页的能力3)使用photoshop和flash处理图片和制作动画的能力;4)考取Macromedia Web Designer证书的能力。

2《网页制作》课程的教学方法

网页制作是一门实践性很强的课程,该课程的教学如果采用传统课程的教学方式,学生将一无所获。为此,该课程需要改变以往各学科的教学方式,不再整堂课灌输理论,而是通过大量的案例进行教学,该课程的教学内容的组织方式要采用任务驱动方式。

2.1 采用案例教学

案例教学法是现代教育实践中一种很重要的教学方法,是在学生掌握了有关基本知识和分析技术的基础上,根据教学目的和教学内容的要求,在教师的精心策划和指导下,运用典型案例,将学生带入特定事件情境中进行案例分析。在案例教学中学生不是教学过程的旁观者而是参与者;他自己有对案例做出透彻分析的责任,而不是一味地听从教师的指令;他必须与其他同学进行交流。在对复杂问题进行分析、综合的场合,可采用协作型学习方式。利用计算机网络建立各种交互、讨论、协商、辩论环节,为多个学习者提供对同一问题用多种不同观点和方法进行观察比较和分析综合的环境,使学生在这一环境中相互强化、共同提高。

2.2 任务驱动方式

教师将网页设计的理论知识与开发小型网站的实际技能结合起来,把开发一个完整的小型网站作为项目,确定项目以后,让每一组学生针对该项目进行需求分析,启发学生主动发现身边的素材。让学生参与到实际项目中来,使学生在完成网站的设计、制作、测试、发布和上传的过程中,学习网站建设的过程、注意事项、网页设计规范、设计制作网页的开发工具的使用方法等。使学习过程成为一个人人参与的创造性实践活动,可以更好地培养学生创造性思维和发现问题、解决问题的能力,培养团结协作的团队精神,充分发掘了学生的创造潜能。

3《网页制作》课程的教学内容

根据《网页制作》课程的教学大纲及教育标准设计教学内容。教学内容按模块设计,并及时更新,从而将最新的技术融入教学中。《网页制作》课程的教学内容分为三大模块:Web基础知识、图形图像制作软件、Dreamweaver软件,各个模块的内容见图1,可根据学时的要求和学生的实际水平按模块灵活选择教学内容。

网页制作涉及到三个方面的问题:一是网页的风格,即文件的样式、颜色、图片的组合,网页的美化;二是网页的布局;三是交互的方式及动态的效果等。网页制作课程教学多用于时下比较流行的Dreamweaver软件,连同Macromedia公司同期推出的另外两个软件Flash(网络动画制作软件)和Fireworks(网络图片编辑软件),合称为网页制作三剑客。如果仅对Dreamweaver教材给学生进行讲述,难免会有所欠缺。在网页制作教学中适量穿插图形图像制作软件的讲解,不仅可以为学生开阔眼界,而且可以大幅度的提学生制网页的综合能。多数高职院校《网页制作》课程只针对网站建设这一环节进行授课,而对其它环节在整个教学进程中从未提及,这极不利于教学与市场的真正接轨。为使学生能在正常教学时间内掌握网页制作流程的精髓,最好在课程结束前布置一次较为大型的实训作业,作业内容即为免费为一家企业或厂家制作网站。从联系单位,到市场受众调查,再到素材收集整理,最后到网站构架建设都由学生亲自完成,最后在教师的指导下,将自己的作品发布到免费空间,从而完成整个流程环节。

4《网页制作》课程的考核方式

对于学生成绩的评定,采取理论+实践的考核方式进行。理论部分采取卷面考试,主要是针对HTML源代码编写网页的考核。题型为填空题、选择题、代码编写题;实践部分由教师可提供选题,学生也可自拟题目,学生独立完成网页制作,老师给予评定。采用这种考核方法,学生在学习的过程中就有了任务感,学习也会更加认真。学生制作出自己的个人作品肯定是希望得到别人的认可和肯定的,这样会激励他们更加努力的学习。

5 结束语

通过总结多年教学的实践经验,积极思考,不断探索,在“网页设计与制作”课程的教学中改进了教学方法和增添了新的教学内容,注重培养学生的综合素质和技能,充分发挥了学生的主观能动性。同时也对教学质量进行了检测,对教学中存在的问题得以发现和改善。只有在实际教学中突破以往的教学模式,才能培养学生自我探索、独立研究能力与自主创新精神。

摘要：该文对高职院校网页制作课程的教育标准、教学方法、教学内容、考核方法进行了探讨,目的在于提高网页制作课程的教学质量。

关键词：网页制作,教学方法,教学内容,教学质量

参考文献

[1]胡波.网页制作课程教学方法探讨[J].电脑知识与技术,2006(8):222-227.

[2]耿杰.网页设计与制作[M].北京:科学出版社,2005.

[3]潘颖.《网页制作》课程教学新探[J].乌鲁木齐成人教育学院学报,2005(1):74.

[4]谢永超,杨云辉.网页设计与制作[M].北京:中国电力出版社,2005.

3.浅谈《网页制作》的教学心得 篇三

[摘要]网页制作作为中职教育计算机专业的一门必修课，具有高创造性、应用性强，且入门容易提高难等特点。因此，根据多年的教学经验，分析学生学习呆板、运用困难的原因，并提出从五个方面改善。以“学生为主，教师引导”为主的学习方式教学法。

[关键词]网页制作；教学；引导

[中图分类号]F224-39

[文献标识码]A

[文章编号]1672-5158（2013）05-0299-01

在中职教育中，网页制作作为计算机专业的一门必修课，学好并运用于工作中很重要。脱离了现实对学生来说等于没有学这门课程。很多学生在学习过程中养成了不动脑的习惯，只会生搬硬套，按照“教师讲授，学生模仿、跟练”的模式进行学习，已经不能适应当今对网页设计人才的需要。一旦安排了与老师讲授例子不同的题目，学生无从下手，即使DW等网页制作软件使用很熟练，也无法制作出一个网站来。

学生之所以学习如此困难的原因如下：

1、缺乏学习的自信心。

因为很多学生从一般中学到职业类学校，学习能力参差不齐，普遍都缺乏自信心，不相信自己可以学好，内心深处已经把自己定义为学不好的学生。

2、平时浏览网站数量太少，不会从专业的角度欣赏网站，累积知识。

上网做什么？看电影、打游戏、聊QQ。这就是学生上网的目的。正确引导学生了解互联网，并利用互联网学习是学好网页制作的前提条件。

3、对各种网站的类型没有一个清楚的认识。

网站根据内容、目的不同，分为不同的类型，每种类型有常用固定的页面布局，清楚认识网站类型，掌握网站页面布局，引导学生从专业角度认识网页是学习网页制作的关键。

4、习惯了被动式的学习方法。

网页制作是一门充满艺术性的科目，需要学生的发散思维及创新意识，填鸭式的学习方法阻碍了学生的学习，不利于网页制作这门学科的长远发展。

5、没有自主创新的意识。

网页制作体现了创造思维，体现了个人性格的特点，是表现自己的窗口，教师引导学生有创造的意识，学生才会创新发展。

6、缺乏审美观。

审美观的培养是学好网页制作的重要部分，谨记符合大众的才是真的美，从身边欣赏美丽的事物引导学生。

要让学生从被动接受转为主动创新制作，应该以“学生为主，教师引导”的学习方式改善教学，我主要是从以下几点着手：

1、向学生展示网页，引导学生对网页制作产生兴趣。

我没有一开始就进入网页制作软件的学习，而是先让学生对网页制作有整体了解。知道网页是信息时代的灵魂，通过展示不同类型的网站，开阔学生眼界。强调网页制作在信息化发展中起到的关键作用，学好网页制作，对自己将来工作、学习的影响。

2、介绍常用网站类型及其页面布局方式。

举例描述，每个类型列举一到两个网站，并介绍该类型网站的页面布局特点，打开不同网站，引导学生自己判断网站类型，动手画出网站页面的布局。加深学生对网站类型及布局的印象。

3、引导学生浏览网站，从专业角度欣赏网页，积累网页专业知识，培养学生审美观。

学生平时在浏览网页的时候，只会单纯地浏览网页，没有从专业角度浏览网页的意识，培养学生从专业角度浏览网页的意识，不是一朝一夕就能够做到的，要循序渐进，不断加深学生印象。每天上课之前，都要打开一个网站，介绍该网站的类型、页面布局、logo设计，网站内容特点，发表自己的看法，畅谈该网站的优缺点。一开始老师自己讲，慢慢地就引导学生发表看法，给以学生适当的鼓励，最后做到一起搜索，一起分析。虽然每次只是短短的几分钟，但对学生的影响是深远的，潜移默化中学生就习惯成自然，与老师互动明显，学习更有自主性，思维更发散。课后布置的作业是让学生主动寻找设计特别的网页，介绍给大家。

适当的分小组讨论网站特点，内容描述，不同网站相同之处，不同之处，烘托网站特点采用的方法等。从各个方面归纳总结该网站优点及缺点。小组代表发言总结，同时培养学生的团结合作意识。

4、教学过程中由简单到复杂。

网页制作这门课，涉及到很多软件。主要掌握的是DW。学生在有了一定的计算机基础知识，学习DW并不困难。为了让学生对该门课程引起重视，夸大学习的难度，反而起到反效果，使一部分学生在还没有开始学习就打了退堂鼓，很不利于学习。让学生有一个认识——那就是软件的学习可以举一反三，会一种，就能自己慢慢摸索出其他软件的大概操作。以此来增强学生学习的信心。

采用的教学方法主要是“演示模仿，引导创新”。演示模仿，为了让学生熟悉软件命令。引导创新，主要是提供素材，引导学生运用之前存储的网页知识，结合软件制作出风格迥异的网页。

5、引导学生自主创作网站

学生既积累了网页知识，又能在灵活运用网页制作软件的基础上，展示学生作品，再次调动学生的积极性，鼓励学生，采用讨论的学习方法，讨论网页优缺点。学会写网站系统分析说明书，提起学生展示自己才华的欲望。分小组，布置不同类型网站题目，学生自主创作。完成作品，展示发言，使学生真正掌握网页制作的精髓所在。

网页制作这门课是一门具有挑战性的课程，需要的不仅是教学方法的改变，还需要教师的不断学习和提高，才能真正上好这门课。

参考文献

4.网页制作教学设计 篇四

网页制作教学设计1

教学目标：

1、知识与技能

（1）了解超级链接的含义及链接源和链接目标的含义，掌握同一站点内以及不同站点间网页超级链接的创建方法。

（2）掌握网页内书签的作用及创建书签链接方法，掌握交互式按钮、框架网页内超级链接的设置方法。

（3）理解热区链接的含义及创建方法。

2、过程与方法

（1）通过创建网页超级链接的操作，使学生了解网页中创建超级链接的基本方法，破除对网页链接的神秘感。

（2）通过对不同对象设置超级链接的操作，使学生总结出操作的规律，培养学生自主学习与操作的能力。

（3）通过网页不同的超级链接方法，拓展学生思维，创建多种形式的网页链接。

3、情感态度与价值观

（1）通过链接我国主要自然保护区网页，激发学生热爱祖国、热爱自然、热爱生命的激情。

（2）完成超级链接，使学生感受成功的喜悦和快乐。

教学重、难点：

1、教学重点：

（1）超级链接的含义及链接源和链接目标的含义。

（2）超链接的制作方法——给文字、图片制作超链接，制作书签链接，给交互式按钮制作超链接，框架页面内的超链接，图片区域制作超链接等。

2、教学难点

（1）书签链接中名称及对应链接位置的设定。

（2）在框架页面中制作超链接时，目标对象所选择的显示窗口形式。

教学方法与教学手段：

任务驱动法、讨论探究法、讲解与演示法、类比知识迁移法。

教学准备：

“动物——人类的朋友”站点，包括未链接的网页，如欢迎页、表格页、框架页，表单页等。

教学过程：

1、引入

展示两个主页，一个已经创建了链接，一个没有创建链接，让学生进行比较并找出区别，引出本课课题——超级链接。

提出：我们在先前的学习中，哪个软件中的相关操作与它类似？什么是超级链接？找一个例子，分析链接源和链接目标分别是什么？

学生展开交流，通过对比找出不同点，并积极思考，回答老师的问题。

设计意图：通过对比操作、交流，再辅以知识迁移，明确本节课教学内容。

2、新授

（1）站内超级链接

引导学生回顾PowerPoint中超链接的制作方法（教师提示：右击链接源，利用快捷菜单制作超链接），辅以教材中的内容，让学生自行探究并完成以下操作：

任务1同一站点内不同页面之间的链接

○1制作首页（欢迎页）到表格页的超链接。

○2给表格页内交互式按钮设置超级链接，链接到相关页面。

○3给框架页内交互式按钮设置超级链接，链接到相关页面。

教师巡视，及时指导，安排学生示范操作并讲解如何制作超链接。

交互式按钮的超链接制作要求在框架网页中演示操作。老师可以提问学生：演示者操作的对吗？有没有问题？

引导学生发现问题：超链接制作完成后需要检验（保存后预览）。

教师讲解，突破难点，再交由学生操作。

以上是同一站点内不同网页之间的链接，有时一个页面中内容过多，需要不断拖动滚动条实现阅读，能否实现快速跳转呢？

任务2同一站点内同一页面内的跳转（链接）：在“动物趣闻”页面内制作书签链接。

教师讲解：由生活中的书签引入，介绍“书签链接”的概念，然后再演示如何操作。

提示：书签链接的双向性问题（返回）。

学生认真听讲后模仿制作，教师巡视进行指导并反馈学生的完成情况。

（2）站间超级链接

仅凭我们课堂上制作的这些页面还不足以详细介绍我们的主题，此时我们还可以借助超链接，链接到因特网上的其他网站，以丰富我们的内容。

任务3借助热区链接，为“友情链接”页面制作超链接，链接我国一些自然保护区网站。

有了以上基础，可安排学生自学教材中有关热区链接的相关内容，学生探究操作后教师再安排学生进行演示，辅助以提问的形式检验学生的自学情况。

3、总结与评价

开展同学间的互助，检验其链接完成情况，推荐优秀同学做展示。引导学生分类总结本节课的知识点。

网页制作教学设计2

教学目标：

1、让学生掌握在网页中插入表格的方法以及表格的修改

2、学会利用表格来规划网页

3、培养学生创新的能力以及动手操作的能力

教学重、难点：

利用表格来规划网页，从中培养学生的创新能力

教学过程：

一、情境导入

同学们你们善于观察吗？老师先考考你们，我们一起来看一组图片，你们看看在那里看过呢？学校缓台的窗台上。你们的观察能力真的很强啊，对，这些都是我们学校美术的特色作口，盘画。其实，我们做过很多作品：有手工作品，语文课中的作文、书法等都是作品，这节课我们以绘画作口品为例，做一个学习园地网页，把我们的作品展示到自己的班级网站中，以便我们更好的努力学习。现在我们就一起来制作吧！

二、新知探究

首先我们来打开上节课的班级网站，在这个网站中新建一个网页，并保存成“学习园地”。

教师讲解：如何制作学习园地网页。

1、制作网页的标题：输入文字，并设置文字的格式。

2、插入表格：单击“表格”中的“插入表格”并对表格属性进行设置。如：行、列的操作，对齐方式等。同时讲解什么是行，什么是列，以及单元格的概念。

3、修改表格：调整表格行高和列宽。

4、在学生学会插入表格的基础上，来设计网页，展示作品。并讲解在单元格中可以插入图片、文字。那我们就一起快快去做吧！插入图片，并在图片的上面或下面进行图片的注释。

5、进一步设置单元格的背景，来美化网页。

6、设置超链接：通过导航栏目，设置文字超链接。选中文字，点击右键选择超链接在列表中选择你要链接的网页，单击“确定”按钮。

7、学生在教师的讲解后，学生自己动手操作制作网页。教师进行指导。（伴随音乐）

三、作品评价

1、生评：从网页设计上，美观程度上，知识落实上重点评价。

2、师评：对学生作品进行评价，并对其它学生的评价加以更完整的解释。

四、总结

我们这节课主要是利用了表格来设计网页，以使来美化我们的网页，通过绘画作品的展示，学习更多的知识。

网页制作教学设计3

一、课程基本信息

课程编号：

中文名称：网页设计与制作

英文名称：Web Design and Production课程类别：选修课适用专业：所有专业

开课学期：20xx—20xx第2学期总学时：24学时总学分：1课程简介：

本课程突出网页设计与制作的现代特点，从Internet的基础知识入手，重点介绍HTML超文本标记语言，以及所见即所得的网页设计制作工具Dreamweaver的基本操作流程。从静态页面到动态页面由浅入深的介绍网页设计与制作全过程。采用案例分析和亲自实践的方式突出、突破课程的重点和难点。并指导每一名选课的同学为自己建一个博客网站，以此提高同学对网页设计与制作的兴趣和爱好。参考书：

1、网页设计与制作教程，熊前兴闵联营，科学出版社；

2、网站与网页设计，张贵明，清华大学出版社；

3、网页美术设计原理及实战策略，王晓峰焦燕，清华大学出版社；

4、网站建设典型案例，张枭，清华大学出版社；

二、课程教学目标：

网页和网站是Internet的重要组成部分，企业、公司和机构通过网站来宣传推介自己的技术和产品，个人发布主页展示自己的风采，人们从不同类型的网站来获取需要的信息。因此，设计与制作网页已经成为计算机应用技术的一个重要方面。本课程的主要教学目的是使学生掌握网页设计与制作的基础知识，能运用网页工具设计和制作常用网页。

三、理论教学内容与要求

第一章、网页的基础知识（1学时）

（1）Internet基础知识

（2）www简介

（3）网页制作的技术和工具介绍

第二章、超文本编辑语言HTML（8学时）

（1）HTML文件的基本结构

（2）文字和段落标记

（3）列表标记

（4）图片标记

（5）表格标记

（6）超链接标记

（7）表单标记

（8）框架标记

第三章、JavaScript语言（4学时）

（1）JavaScript语言简介

（2）JavaScript编程基础

（3）基于对象的JavaScript语言

（4）JavaScript程序实例

第四章、层叠样式表CSS（1学时）

（1）CSS概述

（2）CSS属性

第五章、可视化网页设计工具

（1）网页的基本操作

（2）图像、表格与超链接

（3）表单与框架

（4）添加网页元素

（5）发布站点

第六章、动态网页设计语言ASP（4学时）

（1）ASP简介

（2）VBScript脚本基础

（3）ASP的内置对象

（4）实用文件

第七章、利用AD0访问数据库（1学时）

（1）数据库的连接

（2）数据库的检索

（3）数据库的操作

总结复习（1学时）

四、实验教学内容与要求

五、作业

六、考核方式

期末考核每个同学为自己设计制作一个博客网站。

七、成绩评定

1、自制网站（80%）

2、平时考勤、作业（20%）平时成绩分配：

平时考勤5次，每次2分，共占10%作业5次，每次2分，共占10%

八、执行大纲时应注意的问题

根据学生对课程内容的掌握和理解程度会对进度做适当的调整。

网页制作教学设计4

一、学习内容分析

《H5快速制作网页》是苏教版《初中信息技术》8年级第3章《主题网站设计与制作》第2节《制作网页》中第1课时的内容。H5是指第5代HTML标记语言，其搭建的站点可方便地应用于PC、Android、iOS等多种平台，它为互联网内容的呈现提供了一种全新的框架和平台，包括免插件的音视频、图像、动画、本地存储以及更多酷炫的功能。通俗地说，H5是一种创建网页的方式，用H5创建的网页以文字、图片、动画、声音等相结合的富媒体出现，页面图文并茂、生动活泼、传达方便、易于推广。

二、学习者分析

本节课的学习对象是八年级的学生，处于这一年龄段的学生，思维活跃，具备一定的理解能力和较强的自学能力。通过前面的学习，学生已熟练使用WPS、Photoshop等软件，也掌握了规划设计主题网站的方法。本节课以iH5软件工具为平台，学习用H5快速制作网页。然而学生从未接触过iH5，对于陌生软件的学习，有些畏难情绪，觉得无从下手。但是在日常生活中，他们经常能接触到各种各样的手机H5网页，如企业宣传、个人简历、邀请函、纪念册等，这些H5网页给大家带来了全新的体验，技术本身带来的新奇感让学生心生向往。

三、学习目标

知识与技能：能列举H5网页的特点；掌握在iH5软件中添加和编辑文字、图片、动画等元素的方法以及设置对象属性的方法，理解舞台、页面、对象之间的层级关系。

过程与方法：通过制作校园文化艺术节邀请函，经历制作H5网页的基本过程。

情感态度及价值观：感悟网页制作并非难事，软件使用有共通之处。

四、教学过程

（一）创设情境，初认H5

以艺载德、以艺促智，一年一度的校园文化艺术节又开始了，同学们踊跃报名，比拼才艺。八年级将举行以“多彩校园，闪亮你我”为主题的汇报演出，充分展示八年级同学的青春活力和精神面貌。

思考：本次演出将要邀请家长参加，你会选择什么样的方式来做出邀请呢？（口头传达、短信、纸质邀请函等）

活动1：体验“校园文化艺术节邀请函H5”，初认H5。

（1）二人一组，一位同学在手机浏览器中打开；另一位同学在电脑浏览器中打开（网址：xxxxxx）。浏览后回答以下问题：

不同平台的浏览效果是否一致？为什么？

这支H5中具有哪些媒体元素？

用户能参与其中吗？

你会用什么方式推广这支H5？

小结：

（1）H5具有跨平台、支持多媒体、可交互、易推广等优势。以上特点使得H5可能成为我们发出邀请的首选。

（2）“校园文化艺术节邀请函H5”为何如此吸引人？观看视频，思考到底什么是H5？

小结：H5是指第5代HTML标记语言，也指用H5语言制作的一切数字产品。通俗地说，H5是一种创建网页的方式。用H5创建的网页图文并茂、生动活泼、传达方便、易于推广。

设计意图：与H5相关的概念性知识抽象、枯燥难懂，如果采用讲授法，学生并不容易理解。因此本节课创设了学生现实生活中的情境，以制作校园文化艺术节邀请函H5为主题，设计了4个问题，每个问题目标指向明确，容易引起学生的共鸣，激发学生的思考并得出结论。通过微视频用通俗易懂的语言帮助学生进一步认识H5，内化知识。

（二）根据需求，规划H5

凡事预则立，不预则废，要制作汇报演出邀请函，首先对每个页面的内容、素材等进行一个简单规划。

活动2：根据需求，选择素材，规划邀请函。

设计意图：学生已经学习过网站的规划，所以容易理解规划的重要性。教师通过搭建“规划表”这个支架，引导学生根据制作校园文化艺术节邀请函的需求，对所要制作的邀请函进行初步的规划，帮助学生理清楚每个页面的内容和所需添加的元素。

（三）知识迁移，制作H5

能够用于开发H5网页的工具很多，今天以iH5软件工具为平台，学习使用H5快速制作网页。

活动3：找“共性”，探“个性”，认识iH5软件。

（1）使用课前申请的账号，登录网址：，进入在线编辑平台。

（2）对比Photoshop界面，认识iH5界面，找出相同之处和不同之处。

小结：相同之处：_______________________（菜单栏、工具面板、编辑区）

不同之处：_______________________（对象树面板）

（3）比较PS中的图层面板和iH5中的对象树面板，思考对象树面板的作用。

小结：对象树面板可以用来管理舞台中的对象，对象树中的层级关系为：舞台→页面→文本、图片等素材，每个页面中的对象上层覆盖下层。

活动4：利用iH5软件，制作邀请函H5。

（1）观看操作指导微视频，自主探究页面的制作，完成以下问题：

设置背景：选中页面1，在属性面板中找到_____________选项，添加背景图片。

添加文字：选中页面1，在工具面板中选择_____________选项。

添加图片：选中页面1，在工具面板中选择_____________选项。

小结：添加文字、图片的一般步骤：选择位置—添加对象。

（2）展示学生作品，师生共同分析存在的问题，寻求解决方式。

问题1：首页、内容页都播放同一素材。

原因分析：素材全部都添加在了舞台之中，其层级关系在内容页和首页的上一级。

问题2：内容页没有显示内容。

原因分析：素材全部都添加在了首页之中，而不是对应的内容页中。

设计意图：迁移是人类认知的一个普遍特征，因为新的学习总是建立在原有学习基础之上。学生原有的知识是Photoshop软件使用，将Photoshop和iH5进行对比，引导学生发现界面组成的“共性”与“个性“，让学生初步认识对象树面板，学会利用对象树面板来管理素材。在制作H5时采用局部“翻转课堂”的形式，通过高效、简短的微视频和几个思考题，引导学生思考探究；在学生遇到问题和困难时，师生共同分析问题，解决问题。给学生“瑞士奶酪式”知识建构时间，使学生从规律的获得到知识的应用有一个过渡和渐进的过程。

（四）自主探究，美化H5

活动5：美化完善邀请函H5。

（1）邀请函中的标题、内容文字等选用什么样的字体、字号合适？如何设置？

（2）如何改变图片大小，修改图片的亮度、对比度等？

（3）如何设置元素的动态效果，使得网页更生动？

小结：

（1）选中文字或图片——属性面板——修改设置。“邀请函”等标题文字字号一般选用大些，宜用饱满的字体，以达到醒目的作用；内容用于提供具体信息，文字字号可以小些。

（2）图片选用要符合主题，色彩和谐。字体颜色与背景要有一定的对比度。（3）选择要添加动态效果的对象——选择动效命令。注意：设置合理、适度的动态效果，可以给观赏者带来较好的视觉体验。

设计意图：对邀请函的美化可分成两个部分：一是对邀请函中的文字、图片进行美化，二是合理设置动态效果。单从技术角度来讲，这些操作是比较简单的，只要学会设置属性面板即可。但是邀请函的美化不是天马行空，随心所欲，还需要一定的艺术欣赏能力。因此首先让学生带着问题思考如何设置文字、图片？设置动效时需要注意的问题？得出一定的结论后，让学生带着构思去美化邀请函，以减少学生操作的盲目性。

（五）作品展示，共析H5

活动6：发布和评价作品。

（1）对于制作好的作品，将其发布到网上，这样其他人就可以通过电脑和手机访问你的作品。请保存当前的网页并发布到网上。

（2）同桌之间用发布的网址或二维码相互访问对方的作品。

（3）根据评价表对同桌的作品进行评价。

（4）根据同伴及老师意见进一步修改作品。

设计意图：学生在制作完成邀请函后，进行保存，发布就可以浏览到自己的成品，极大地提高了学生的学习兴趣。将学生的作品进行展示，师生共同赏析作品，根据评价表进行点评，给出建议，然后进一步完善作品。

（六）知识梳理，展望H5

展示思维导图，梳理本节课内容：

总结利用iH5制作网页的基本过程：

观看视频，结束本课：随着信息技术的高速发展，H5可谓是无处不在。H5可以是各种宣传网页、在线游戏，甚至户外大屏中的互动也是H5。在未来5-内，H5或将会成为移动互联网领域的主宰者。

设计意图：借助思维导图，将关键知识点结构化，清晰形象地呈现出各知识点的脉络关系，有助于学生从整体上把握知识，完成知识的建构。最后观看H5应用视频，了解H5的日常应用，对未来展望，进行情感升华。

网页制作教学设计5

1、教学目标知识与技能：灵活运用添加超链接和在网页中插入表格方法，根据网页内容进行页面布局，完善网页,掌握网页布局的技能和技巧。

过程与方法：培养学生加工信息和应用信息的能力及培养学生思维能力，规划能力、创新能力、及合作能力。

情感与态度：使学生感受中国源远流长的历史文明，并通过网页传递给世界；帮助学生树立良好的信息道德意识；让学生享受成就感，树立自信心。

2、学生分析初中二年级学生感知能力较强,理解能力和抽象思维较弱;学生基本学会使用在网页中插入表格的方法，但分析信息、处理信息和应用信息能力较弱;对教学内容的了解程度较强。

3、内容分析

教学重点：利用表格对网页页面进行布局。

教学难点：怎样合理、美观地设计网页页面布局。

此部分教学内容在整个网页设计知识体系中处于综合处理信息的重要部分。

4、教学策略设计

（1）．教学方法设计

我根据教学主题及其教学目标确定的教学指导思想是以学生为主体，以学生自己的亲身体验展开探究式小组合作学习。本节课采用研究体验式教学法,建构主义模式下的任务驱动式教学法组织教学。首先设计“总任务”，再细分成若干“小任务”，实现教学目标。

（2）．教-学流程和教-学活动的设计思路

整个教学活动，尤其是学习活动，我采用探究式学习法，又称研究性学习，我强调的是学生在教师指导下，根据各自的兴趣、爱好和条件，再结合与自己有相同或相近的兴趣、爱好的同学组成合作伙伴，共同选择西安不同的旅游景点，确定研究课题，借助“表格布局”功能规划七天的旅游行程，独立自主结合小组合作开展研究，进行合理的网页布局设计，达到从中培养创新精神和创造能力及审美能力的一种学习方式，实现“双赢”。建构主义学习理论认为，学习过程不是学习者被动地接受知识，而是积极地建构知识的过程，把学过的网页设计知识综合应用起来，由于建构主义学习活动是以学习者为中心，而且是真实的，并且以完成特定的任务为动力，因而学习者就更具有兴趣和动机，能够鼓励学习者进行批判型思维，能够更易于提供个体的学习风格，展现自己的独特思维，不受现有网页模式的拘束。基于构建主义的探究性学习模式，我的设想是整个教学过程是动态的，学生是学习的主体，教师是学生学习环境的创设者、学习动力的激发者、学习过程的指引者和学生学习的协作者。

（3）．应用信息技术的依据或考虑

信息技术在本次教-学活动有不可替代的功能。利用信息技术中计算机技术进行网页设计，实现教学目标，完成让世界各地的人实现“网上游古都”。在教学中计划通过探究式教学方式，小组合作学习方式和“任务驱动式”教学策略，自主设计网页，发布网页，运用网络使信息技术的这些潜在优势发挥作用并真正促进学生能够结合实际应用，通过自主实践，完成“网上游古都”任务，并同时完成了学习任务，进一步建构了自己的知识体系，并实时地享受到巨大的成就感。

（三）、教与学的过程

1．教与学的过程

活动内容

教师活动

学生活动

设计意图

创设情境

激发兴趣

［创设情境］

“要想了解中国上下五千年文明历史，请到西安来！”近几年，越来越多的外地游客涌向西安。“十一黄金周”即将来临，大家想不想用网页形式向外地游客介绍宣传西安，让更多的人来西安，领略其古老的魅力！我们上节课把利用搜索引擎找到的有关西安的历史文物古迹的文字信息和图片信息整理制作成有关不同景点的网页，但信息是否显得很零散？怎样把景点信息整合规划，让人们先在网上一饱眼福，轻松网上游古都？

设计一个含有指向各旅游景点网页的超链接的主页。

提供信息活条件，激发起学生的兴趣。

［导语］

我们可在主页中制作一个西安旅游景点导航栏，但怎样合理规划各旅游景点，并且使页面布局美观，整洁，分类清晰？

利用“表格”。

为细化任务埋下伏笔;并且激发学生的认知冲突。

［出示课题］

今天我们就围绕“西安七日游”，在主页中利用表格规划设计旅游行程，本节课的课题是《“黄金周”—规划网上西安七日游》

学生明确本节课课题，初步了解任务。

出示课题，介绍总任务。

［分组方法］

根据对各旅游景点的兴趣及当初搜索信息的分工情况及本节课任务分工，四人一小组。

学生进行分组

为细化任务做准备

出示任务

明确分工

［出示总任务］

每个组围绕主题，利用表格规划设计旅游行程，并建立好超链接，利用主页展示出来。

学生明确任务

明确总任务

［作品形式及分工参考］

形式：创建并完善主页，并展示整个网站。

分工参考：

内容版式规划

整理七个旅游景点网页

超链接的建立与维护

作品演示解说

学生明确汇报形式，分工参考。

使学生明确各自任务后，通过研究，探讨，操作，通过电脑媒体来完成任务。

活动内容

教师活动

学生活动

设计意图

出示任务

明确分工

[角色分工]

学生自由分组后,共同研究选组长，组长进行给组员分配任务。

学生共同研究选组长,并协调分配好任务.

锻炼学生自主协调分工能力。

［出示作品评价标准］

教师出示作品评价标准：

作品内容：设计含有七个链接网页的主页，资料丰富，内容准确。

技术表现：页面布局设计合理，颜色搭配和谐，主题突出，作品演示运行正常，操作熟练。

创新特色：作品布局规划有独特之处，有新意。

提示学生有三条帮助热线：

1、组长2、邻座学习伙伴3、教师4、自学课件

学生明确要求。

培养学生的创新能力，规划能力，思维能力和合作能力。

学生研究探索合作交流创作作品

［创作作品］

播放舒缓音乐，为学生营造自由和谐气氛。

（提示学生利用网上邻居把各组员的作品组合在一起，共同完成此任务。）

学生根据角色分工，按小组形式开始完善网站。

学生体会了超链接的作用，练习了超链接的使用，理解了表格强大的页面布局功能；培养学生处理信息和应用信息的能力；通过学生间交流合作，老师及时点拨与指导，培养学生发现问题和解决问题的能力。

［展示作品］

下面请各组派代表，到教师机前展示以下你们的旅游行程。其他同学观察后，可提意见或建议。

由小组代表展示组内作品，并详细说明旅游景点规划的呈现形式，内容选择及整体构思。

锻炼学生口语表达能力和分析说明问题能力。

合作成功展示作品成果汇报交流探讨

［交流探讨］

教师引导学生探讨页面布局的方法和技巧；谈看完作品后，对其改进意见；进行组间互评和组内自评。

评出“最受欢迎奖”（即如果此网站上传到网上，点击率最高），“最具创意奖”“最佳布局奖”作品。

学生间相互交流探讨。

培养学生合作交流能力。

［教师点评及检测］

教师从页面布局，整体规划合理性，创意等几方面进行点评。

学生思考，怎样完善作品。

教师鼓励学生发展创新思维，页面布局规划能力，逻辑思维能力及合作能力。

教师或其他同学提问页面布局的方法。

学生代表演示

及时检测学生对表格的掌握情况。

你受到的最大启示和收到的最大收获？成功经验和失败教训？

学生回答

巩固知识，培养情感

[完成旅游规划，培养情感]

同学们已熟练掌握表格的使用方法，并且加工和应用信息的能力增强。

悠久的历史积淀和丰富的人文资源，使西安居中国六大古都之首，是世界四大文明古都之一，著名的旅游中心城市。希望你们热爱中国博大精深的历史，感受西安古老的魅力！

学生感悟。

全课总结，培养道德情感。

全课总结知识延伸

［达到目标，知识延伸］

网站制作好了，怎样让世界各地的人都看到你们的网站呢？

想当我们的故乡—大庆的小导游吗？赶快制作一个“铁人故乡—大庆”的网站吧！

学生思考。

学生课后实践。

为激发下一节课内容（上传主页）的兴趣奠定基础。

让学生可把本课内容应用到实际生活中去。

培养学生自发探究能力。

2．关键环节提炼

利用信息技术创设情境，播放一段自拍的录像，内容大体是：一位外国友人，想要来中国四大古都之一“西安”旅游，但想要自助游，想借助因特网，先在网上了解一下西安，并参考一下旅游行程。通过此录像激发学生兴趣并利用信息技术呈现问题，使学生产生认知冲突，培养学生发现问题、分析问题、解决问题的能力。我通过学生利用信息技术完成此项任务，促进学生对基础知识、基本技能的学习。我利用信息技术，尤其是网络提供的有关“西安”丰富的旅游景点介绍资源，帮助和拓展学生的学习。让学生借助信息技术手段开展探索、总结并进行创作。我利用信息技术展示学生自评，学生互评，教师评价的评价表，为学生的学习提供评价、反馈和矫正。我利用网页自学课件和网络教室教学广播系统支持师生间、生生间的交流对话。

3.教学反思

本节课主题明确、集中，让学生分成小组，合作探究学习，给出特定的总任务，有利于学习效果评判的可比较性，也便于学生之间的广泛交流和良性竞争。通过利用信息技术规划规划网上西安七日游，对西安七个主要景点的介绍，让世界了解西安，每个学生在共同完成“网上游古都”网站作品后，让每个学生都有完成任务和宣传中国源远流长的文明历史的成就感，并感到自豪。

本节课，在小组合作学习过程中，学生之间互学互教，彼此交流探讨，经历了提出问题、分析问题和解决问题过程，每个学生都承担一定学习任务，防止滥竽充数，促进了学生的参与程度、认知深度，高质量地实现了课程的目标，增强学生的责任感。但个别学生没有认识到合作学习的重要意义，自主探究能力较弱，容易丧失信心。

教学实际实施过程，有学生提出：我对中国的少数民族文化感兴趣，能否制作一个宣传中国五十六个少数民族文化的特色网站？于是我了解到学生对中国的不同文化感兴趣，可在课外活动小组完成此任务或作为课外自主探究性学习课题来探究。

本节课让学生掌握了“表格”的妙用，还提高了加工信息和应用信息的能力，而且使学生感悟到了中国上下五千年的博大精深，对祖国更加热爱。

（四）、教学评析：

在新课程标准的理念中，明确提出要关注全体学生，建设有特色的信息技术课程。在教材因篇幅的限制，提供给学生感知的背景材料极其有限，“信息”且都处于“静止、储存”状态，不利于学生的感知和抽象概括。因此，允许教师在不改变教材内容、体系、结构的前提下，经教学法的加工，营造引入新课的“情境问题”的氛围。学生在积极的参与、体验、研究并在已有知识经验的支持下，自主能动地探索，实现知识的再创造。

教学活动在面向全体的同时更注重学生情感的`交流协作意识与因材施教。更注重学生个性培养和创新智能的开发。

学生自主性学习，需要有一个适应的过程，开始阶段，布置任务要明确具体。

学生之间的交流和帮助比较少，自主学习的能力还要不断提高等。

附：学生学习过程及典型成果

另附：小组成员分工表

第________组组长________作品题目______________

小组成员

主要负责工作

网页制作教学设计6

一、教学目标：

1、知识与技能：

（1）、了解框架结构网页的概念及在网页中的作用，了解它与表格网页的区别。

（2）、掌握框架结构网页的建立、框架结构的拆分、框架的删除等。

（3）、掌握框架中页面设置及保存的方法，如设置初始网页按钮、新建网页按钮等。

2、过程与方法：

（1）、能够区分框架结构属性设置与网页属性设置的不同点。

（2）、通过框架结构网页设计，使学生对网页的整体结构有更进一步的认识。

3、情感态度与价值观：

（1）、能够将表格与框架结构网页结合使用，在创作中体验乐趣。

（2）、培养学生网页设计的审美意识、创新意识。

二、教学重点难点：

1、教学重点：

（1）、框架网页的作用和功能，框架的建立与属性设置。

（2）、框架中各个页面之间的关联，每个框中页面的设置方法。

（3）、框架网页的保存方法。

2、教学难点：

（1）、框架结构网页中框架属性与页面属性的设置方法。

（2）、理解框架结构的多页面存储方法及各页面之间的关联。

三、教学过程：

1、创设情境、导入新课

（1）、教师展示一组表格制作的网页，引导学生找出它们的共同特点。并提问如何快捷地制作这种网页（学生回答：使用复制、粘贴快捷地制作）。

（2）、教师又提问：有没有更好的方法呢？相同的区域我们能否只做一遍呢？从而导入新课——框架网页的制作。

设计意图：通过对比、比较，引导学生思考，激发学生学习的乐趣。

2、任务驱动、自主学习

（1）、教师展示一个框架网页，引导学生理解框架网页的概念。

（2）、出示任务一：框架网页的新建与保存。教师要求学生先阅读教材中的操作步骤，再尝试完成书本第227页的实践学习。

（3）、教师讲解框架结构中的每个框都是一个独立的选项文件，即网页文件，因此当框架确定之后，需要为每个框分别指定其网页文件的来源，可以通过每个框中的“新建网页”按钮和“设置初始网页”按钮进行选择。

（4）、学生理解框架网页的概念，通过阅读教材中的内容，自学新建框架网页的操作，初步了解“新建网页”和“设置初始网页”两个按钮的不同，并认真聆听教师的讲解，注意观察，按要求模仿操作。

（5）、出示任务二：相关页面的制作与设置。教师要求学生先阅读教材中的操作步骤，再尝试完成书本第228、229页的实践学习。

（6）、学生制作相关页面，同时也是对前面所学内容的复习和回顾。教师反馈学生的操作情况，开展评比活动，对表现好的学生给与表扬。

（7）、出示任务三：框架网页属性的设置。学生自主探究学习，有问题可向教师寻求帮助。教师基础扎实的同学完成任务后可进行拓展学习。

（8）、教师请学生示范操作，并说明自己设置的方法和原因。同时鼓励做的比较好的学生。

设计意图：培养学生的自主学习能力，对于课堂教学难点，学生在教师的讲解后模仿操作，有效突破难点。

3、展示作品、课堂小结

（1）、教师给出一些常见的框架结构应用界面，如Web邮箱页面等，引导学生总结本课内容，并让学生分组，推进一些优秀作品在全班展示。

（2）、教师点评，并鼓励完成作品比较好的学生。

设计意图：拓展学生的视野，使学生了解框架的应用方法。展示优秀作品鼓励学生，激发学生的创作欲望。

四、教学反思：

1、本节课是在学习完简单网页、表格布局网页、交互式网页的基础上，进一步页的设计方法。由于学生已经具备了一定的网页设计基础知识与技能，所以教师可以根据学生的实际情况，采用更灵活

的教学方法。教师可以简单介绍框架结构网页的功能及框架的建立与编辑方法，以及框架属性设置与网页属性设置的方法与区别。然后由学生根据教师提供的学案及演示动画，完成框架网页设计任务。

网页制作教学设计7

教学目标：

1、知识与技能：

（1）理解框架的概念及用途。

（2）掌握框架网页的新建、制作、编辑与保存，了解框架的拆分方法。

（3）初步掌握将框架结构与表格布局结合使用来制作网页。

2、过程与方法：

（1）通过对表格网页的分析，体验新知识（框架结构网页）的优点，从而促进其学习新知识。

（2）理解框架的概念与组成，学会分析网站的结构。

3、情感态度与价值观：

（1）通过以“人与动物”为主题的框架结构网页制作活动，了解更多有关人与动物和谐相处的知识，通过故事趣闻，增强学生关注动物的兴趣和意识。

（2）能够将表格与框架结构网页结合使用，在创作中体验乐趣。

教学重、难点：

1、重点：框架的概念、用途， 创建、编辑与保存框架网页的方法。

2、难点：框架的拆分。

教学方法：

对比教学法、探究学习法、模仿学习法。

教学准备：

整理、归类相关素材，并按要求摆放。

教学过程：

1、引入

老师展示一组利用表格制作的网页，要求学生仔细观察，找出它们的一个共同特点（学生答：网页上方和左侧内容都是相同的，仅右下部分内容不一样），并提问如何快捷地制作这种网页？（学生答：使用复制粘贴快捷地制作）

尽管复制、粘贴能为我们节省时间，但有没有更好的方法呢？相同的区域我们能否只做一遍呢？今天我们要学习的内容——框架网页制作，就能给我们带来更多便捷。（让学生明确框架网页使用的场合）

2、新授

（1）框架网页概念

由以上例子入手，再展示一个框架网页，教师引导学生理解框架网页的概念

（2）框架网页的新建与保存

教师要求学生先阅读教材中的操作步骤，再尝试进行探究操作。

任务1 创建“横幅和目录”结构的框架网页，新建top和left页面，并学会保存。

框架结构中的每个框都是一个独立的选项文件，即网页文件，因此当框架确定之后，需要为每个框分别指定其网页文件的来源，可以通过每个框中的“新建网页”按钮和“设置初始网页”按钮进行选择。在top和left页面中，单击“保存”按钮，随即开始保存。

此处为教学难点，可先由框架的概念入手，再针对保存页面中的蓝色部分，教师进行讲解，教会学生注意观察。

学生要理解框架网页的概念，通过阅读教材中的内容，自学新建框架网页的操作，初步了解“新建网页”和“设置初始网页”两个按钮的不同，并认真聆听教师的讲解，注意观察，按要求模仿操作。

设计意图：培养学生自主

学习能力，课堂教学难点在教师的讲解后模仿操作，有效突破难点。

（3）相关页面的制作与设置

框架网页中相关页面的制作，需要结合表格来布局，插入文字、图片和交互式按钮。

任务2 top和left页面的制作。

要求：

○1top页面内插入1行2列的表格，左边单元格插入logo图片，右边单元格插入banner图片。

○2 left页面内插入5行1列的表格，在每个单元格内依次插入交互式按钮（共4个），交互式按钮文字为展示介绍的相关内容概括，在第5个单元格内插入一个邮箱指示的图片。

○3调整表格边框的粗细。

○4为main区域设置初始页面。（该网页由教师提供现成的）

学生制作相关页面，同时也是对前面所学内容的复习和回顾。老师反馈学生的操作情况，开展比一比、评一评活动，对表现好的学生给予表扬。

（4）框架网页属性的设置

创建好框架网页后，可以根据实际需要改变框架的属性。

任务3 调整框架的大小、设置框架的边框、设置框架窗口中的滚动条等。

提高任务：框架的拆分。

学生自主探究学习，可向老师寻求帮助。完成设置后请同学示范操作，并说明自己设置的方法和原因。操作基础扎实的同学完成任务后可进行扩展学习。

3、总结与评价

老师可以给出一些常见的框架结构应用界面，如Web邮箱页面等，引导学生总结本课内容，梳理课堂知识，并让学生分组，推荐一些优秀作品进行全班展示。

5.《网页设计与制作》教学大纲 篇五

一、课程基本信息

课程编号：

中文名称：网页设计与制作

英文名称：Web Design and Production 课程类别：选修课 适用专业：所有专业

开课学期：2011-2012第2学期 总学时：24学时 总学分：1 课程简介：

本课程突出网页设计与制作的现代特点，从Internet的基础知识入手，重点介绍HTML超文本标记语言，以及所见即所得的网页设计制作工具Dreamweaver的基本操作流程。从静态页面到动态页面由浅入深的介绍网页设计与制作全过程。采用案例分析和亲自实践的方式突出、突破课程的重点和难点。并指导每一名选课的同学为自己建一个博客网站，以此提高同学对网页设计与制作的兴趣和爱好。参考书：

1、网页设计与制作教程，熊前兴 闵联营，科学出版社;

2、网站与网页设计，张贵明，清华大学出版社;

3、网页美术设计原理及实战策略，王晓峰 焦燕，清华大学出版社;

4、网站建设典型案例，张枭，清华大学出版社；

二、课程教学目标：

网页和网站是Internet的重要组成部分，企业、公司和机构通过网站来宣传推介自己的技术和产品，个人发布主页展示自己的风采，人们从不同类型的网站来获取需要的信息。因此，设计与制作网页已经成为计算机应用技术的一个重要方面。本课程的主要教学目的是使学生掌握网页设计与制作的基础知识，能运用网页工具设计和制作常用网页。

三、理论教学内容与要求

第一章、网页的基础知识（1学时）（1）Internet基础知识

（2）www简介

（3）网页制作的技术和工具介绍

第二章、超文本编辑语言HTML（8学时）（1）HTML文件的基本结构（2）文字和段落标记

（3）列表标记

（4）图片标记（5）表格标记（6）超链接标记（7）表单标记（8）框架标记

第三章、JavaScript语言（4学时）（1）JavaScript语言简介（2）JavaScript编程基础（3）基于对象的JavaScript语言（4）JavaScript程序实例

第四章、层叠样式表CSS（1学时）（1）CSS概述（2）CSS属性

第五章、可视化网页设计工具Dreamvawer8.0（1）网页的基本操作（2）图像、表格与超链接（3）表单与框架（4）添加网页元素（5）发布站点

第六章、动态网页设计语言ASP（4学时）（1）ASP简介（2）VBScript脚本基础（3）ASP的内置对象（4）实用Global.asa文件

4学时）（第七章、利用AD0访问数据库（1学时）（1）数据库的连接（2）数据库的检索（3）数据库的操作

总结复习（1学时）

四、实验教学内容与要求

五、作业

六、考核方式

期末考核每个同学为自己设计制作一个博客网站。

七、成绩评定

1.自制网站（80%）2.平时考勤、作业(20%)平时成绩分配：

平时考勤5次，每次2分，共占10% 作业5次，每次2分，共占10%

八、执行大纲时应注意的问题

根据学生对课程内容的掌握和理解程度会对进度做适当的调整。

6.网页制作教学大纲 篇六

一、程的性质与目的：

《网页设计与制作》是信息技术专业以及与信息技术有关的专业的基础课。本课是集于理论与实践一体的综合应用课程。通过学习本课程学生初步掌握制作网页和建立网站的技术。

二、课程的基本要求：

了解网页制作和网站建设所需的基本知识，理解HTML语言和CSS样式个属性以及JavaScript语言的基本知识，掌握网页制作和网站建设所需的基本技能。根据任务需求能够建立客户端的的静态网页和网站。

三、选修课程要求：

先修《计算机应用基础》、《Internet》、《flash》和《photoshop》等课程。

四、课程教学内容要点：

第一章 网页基本常识

1.WWW网站以及相关知识 2.网页基本元素 3.HTML语言简介

要求：了解www网站的相关知识；掌握HTML语言以及相关技术；

第二章 网站设计及其工具

1.网站与网页

2.规划网站设计流程 3.设计工具选择

4.远程站点的管理——FTP上传下载软件的使用

要求：制作工具Frontpage的介绍；与dreamwear工具区别与联系了解web站点的申请过程；掌握FTP上传下载软件的使用；

第三章 网站制作

1.建立网站

2.主页设计与制作] 3.表格制作

4.创建表单和框架页面 5.发布网站及其维护

要求：了解网站导航以及网页中超级链接的作用；掌握不同链接源(包括图片热点)链接各种文件的方法；掌握web站点的申请过程；建立本地站点的必要性、原理和原则掌握如何规划站点；掌握创建Web站点的基本方法与步骤，并能够管理站点

第四章 让网页美起来

1.Web上的图形 2.网页中色彩选择

3.使用photoshop设计图形 4.使用Flash创建动画等

要求： 了解网页艺术设计的必要性和原则；掌握网页布局、图片和动画的设计方法和原则，掌握综合应用photoshop设计图形使用Flash创建动画等

第五章 网页编程 1.网页编程基础

2.VBScript语言编程 3.JavaScript语言编程 4.网页编程实例

要求：了解JavaScript语言基础知识，VBScript语言知识

第六章 网页技术进阶

1.动态网页编程（DHTML）2.用CSS来控制元素

3.虚拟现实网页编程VRML 要求：掌握使用CSS样式美化超级链接的方法；理解标记a以及各个属性；理解CSS选择器中四个状态；

第七章 设计个人主页

1.个人主页制作的一般步骤 2.个人主页设计举例

要求：综合所学知识，制作精美，合理，科学个人网站。并具有实际意义。可制作一个公司网站作为提高性实例

五、课时分配：

总学时：72学时课堂讲解＋54学时上机操作 ［教学章节学时分配］

第一章 网页基本常识

第二章 网站设计及其工具

第三章 网站制作第四章 让网页美起来第五章 网页编程第六章 网页技术进阶第七章 设计个人主页

六、大纲说明：

1、教学设计思想

本课程是一门实践与理论相结合的课程，应采用案例教学法，应该充分利用互联网上现成的、实际的网站。

2、考试方式和成绩评定 本课程是考试课。采用期末上机考试与平时上机实验成绩结合的考核方式。期末占总评60%，平时成绩占总评40%。

3、作业要求

7.网页制作课程的实践教学 篇七

网页制作是我校计算机专业与电子商务专业的重要的专业基础课程, 该课程不仅实用性强、应用面广, 而且与岗位的联系非常密切。我们希望通过本课程的学习, 让学生能够自主开发一个完整的网站, 毕业后能够直接从事企事业单位网站的开发与维护工作。然而, 实际教学效果却很难尽如人意, 传统的教学模式一般采用接受教学和案例教学两种形式, 教学方法比较单一, 学生也能掌握其中的知识和技能, 但是应变能力比较弱, 综合运用能力不强, 远远不能达到社会对人才的要求, 学校的教学与社会生产实践往往出现脱轨现象。要想达到这个教学目标, 学生必须在系统学习课程基本理论、熟练掌握网站开发工具的基础上, 参与实际网站的设计、开发, 建成一个完整的网站。学生在学习的过程中, 发现问题, 并通过实践解决问题, 这样既可以培养学习能力, 又可更快地掌握基础知识与基本技能, 更容易了解社会职业, 培养职业意识, 更好地做好就业准备, 进入职业角色。为此, 我对该课程进行了较大的教学改革, 打破传统的教学模式, 将实际项目引入课堂教学, 改革教学方法、教学手段和考核形式, 较好地实现课程教学目标。

一、在教学中实施研究性学习模式

本课程传统的教学方式是教师先进行理论讲解, 然后安排学生在机房上机操作。这种传统的教学方式, 学生学到的知识比较零碎, 对于所学课程很难构建一个相对完整的知识结构体系。学生虽然在校学习了两三年, 可总觉得什么也没学到, 更别谈承担实际项目的开发。为了突破传统的教学模式, 提高学生技术应用能力, 我结合该课程的特点, 在教学实践中采用了新的教学模式。为了方便教学, 将一个班级分成很多个项目小组。教师是项目经理, 学生则是项目的开发人员。除了学生要学习外, 教师也应学习与研究。因此, 在教学的过程中, 通过以小组的形式、学生展示的方式, 进行师生、生生之间交流和讨论。项目开发小组经常以幻灯片方式展示成果, 陈述自己通过学习掌握了哪些知识和技能, 运用了哪些方法, 怎么用的?如何改进?获得了什么亲身体验?问题是怎么解决的?解决的过程是什么?类似的交流穿插在整个学习过程中。实践证明这种教学方法有助于学生学习思维的发展, 通过和其他学生的交流, 解决疑惑, 论证自己的观点, 开拓思路, 活学活用。可能学生的答案不是最佳的解决方案, 甚至不正确, 但这个过程学生能相互启发、相互弥补自己思维的欠缺之处, 非常有利于发展学生的智力, 整个教学过程同时也是学生学习的体验

二、改革教学方法, 引入项目教学法

在《网页制作Dreamweaver》课程教学中, 将网站建设的项目引入教学, 其效果成功与否关键在于实践教学。在教学过程中以项目为主线, 将项目与教材相结合, 同时注重学生能力和综合素质的培养, 通过项目来评价考核学生学习质量。在教学中, “项目”直接影响教学效果, 因此, “项目”设计、编排非常关键。在教学前, 我通过与学生的交流, 了解他们的兴趣点, 以及浏览各类网站素材, 最终确定以学校“同学录”网站作为教学项目。这一项目的选取, 在实际教学中体现出如下特点:首先, “同学录”网站这一项目在设计上有明确的目标, 贴近生活, 学生比较熟悉。这样学生就可以将学习重点放在项目开发的过程中, 而不是对项目的理解上。我在学习总体目标的框架上, 将“同学录”网站进行分解, 把总项目细分成一个个的小项目, 并把学习内容融合进每一个小的项目中, 通过这些小的“项目”来体现总的学习目标。其次, 该“项目”设计符合学生特点。不同学生, 他们接受知识的能力往往会有很大的差异。我在进行“项目”设计时, 主要从学生实际出发, 充分考虑学生现有的文化知识、认知能力、年龄、兴趣等特点, 结合教学内容将实际项目进行调整与修改, 适当降低项目的难度。这样学生在学习过程中不会因为项目本身的因素而失去学习的信心与动力。再次, 在“项目”教学设计过程中, 考虑到“项目”的大小、知识点的含量、前后的联系等多方面的因素, 我将教学重点、难点进行分散, 分解到每个小项目中。最后, 以“布置项目”的方式引入有关概念, 展开教学内容。

学生通过本课程的学习, 不仅获得了基本知识、基本技能, 而且通过项目的开发, 积累了项目开发的经验。教学与社会实践相结合, 为学生今后实习、就业打下了良好的基础。

三、改革教学手段

传统的教学手段很难达到项目教学的目的, 这一点在计算机课程的教学过程中尤为突出。因此, 我改变了教学手段。首先, 有效利用教学时间。在课堂上我围绕项目的内容进行讲解, 学生则根据项目的要求进行制作;其次, 充分利用校园网资源进行辅助教学。项目中各项功能的实现需要使用大量的素材。因此, 学生需要通过网络进行收集及整理, 再进一步加工、提炼;最后, 将课堂教学与课外指导及答疑相结合, 开发一个项目不是一天两天就可以完成, 也不是靠课程的几十个课时就能够实现的, 需要经过大量艰苦的劳动。因此, 我们将课堂教学与课外指导结合起来, 延伸了课堂教学的时间与空间, 弥补了课堂教学的不足。在深化了教学效果的同时, 学生也在整个教学活动中, 形成了自主学习的良好学习习惯, 最终掌握了整个项目需要的各种知识, 提高了专业技能。

四、调整教学内容

项目教学教什么, 拿什么来教?为了解决这个问题, 我对教学内容进行了较大的改革, 围绕实现项目需要的技术和开发的过程重新安排教学内容, 自编教学讲义。同时, 还经常结合项目的技术对教学内容进行补充, 以实现某些项目需要的特殊技术。根据“项目驱动”教学法的要求, 我在教学过程中, 将“同学录”网站的开发项目分解为一个个具体的小项目, 把教学内容巧妙地隐含在每个小的项目之中, 每一个小项目中都包含着新、旧知识点。学生接受项目后首先思考如何去完成项目, 在完成项目的过程中将会遇到哪些不能解决的问题。学生自己提出的问题, 也是他们想要知道的知识点, 此时再讲授新知识, 就调动了学生主动求知的欲望。在完成项目的同时, 学生培养了创新意识、创新能力, 以及自主学习的习惯, 学会如何去发现问题、思考问题、寻找解决问题的方法。

五、采用多层次、多角度考核方式

传统的考试方式很难真正对项目教学法进行有效的考核, 因此, 我们进行了考核方法的改革, 首先采用常规的笔试、上机操作, 考核学生掌握基本知识、基本技能的情况, 还采取口试, 考核学生对整个项目开发的思路及开发方法, 同时考查学生的口头表达能力、与人沟通能力, 最主要的考核是以项目最后实现的效果及每个人完成工作量的情况、完成工作的质量及效率进行评分, 由项目小组与教师共同打分。采取的形式有学生相互评价, 小组评价, 通过学生在小组中的表现, 完成任务的情况, 在小组中的表现进行评价。在交流评价的基础上对自己获得的材料和做出的作品进行检验。验证学生自己的观点。通过对比师生评价结果, 找出造成结果差异的原因, 让学生反思在探究实践中所运用的解决问题的策略。

通过在《网页制作Dreamweaver》课程中实践教学环节所进行的尝试性教改, 我从重视研究“教法”, 转向了重视研究学生的“学法”, 并从“如何指导学生明确问题?”、“如何引导学生开展研究?”、“如何对学生进行评价?”、“如何结合学科特点开展实践教学活动?”几个角度进行了研究。在教学过程中, 在组织教学的时候, 有时不自觉地偏重学生学科知识的建构和深化, 却忽略了实践教学过程中学生探究能力和态度的培养与发展, 通过教学中的反思不断改正错误, 使教学水平得到了一定的提高。通过实施新的教学模式, 转变新的教学方法, 我感受到了一些改变:学生从以前的不愿意问问题, 变成追着老师问问题, 从不愿意学到愿意学。这在以前是没有的, 虽然在教学过程中出现了上网管理的问题, 教材组织的难易问题等, 但是我想通过实践课程教学的改革, 学习过程成为一个人人参与的创造实践活动, 注重的不是最终的结果, 而是整个教与学的过程。学生在项目实践过程中, 理解和把握课程要求的知识和技能, 体验创新的艰辛与乐趣, 培养分析问题和解决问题的思想和方法, 同时让学生掌握学习的方法, 进一步提升专业技能。

参考文献

[1]赵亮宏, 谭浩强.网页制作Dreamweaver.西安交通大学出版社, 2004.2.

[2]唐建平, 陈建军, 唐汝育.程序设计实用教程.人民邮电出版社, 2005.5.

8.网页制作教学大纲 篇八

一、项目教学法的突出特点

在以“厚德强能”为教育宗旨的技工学校，教师讲解为主、学生跟着老师学习的教学模式显然已经不能满足新时期的要求。多元化的用工需求环境和艰巨的教学任务促使教师在教学过程中大胆突破，不断总结和探究，以培养学生的兴趣，提高学生的认知能力和综合素质为目标，不断对教学内容、教学方法、教学手段等做出改革。

网页制作具有实用性强，应用面广，与岗位联系密切等特点，是各类高职院校计算机类专业开设的主干课程之一。为了更好地讲授网页制作课程，笔者不断“充电”，分析和调研市场对网页制作技术岗位的需求，认真分析教材，整合教材，将实际项目大胆引入课堂教学，将需要解决的问题或需要完成的任务以项目的形式交给学生。在这个过程中，学生不仅能够掌握网页设计的一般工作流程，培养学生综合运用知识分析和处理实际问题的能力，而且让学生感受企业实际的工作模式，从而提高了他们的协作能力和适应能力。

二、项目教学过程实施的严密性

在采用项目教学的过程中，要抓住项目重点和难点，结合企业规范的工作流程进行设计，使学生在完成项目的过程中，提高就业能力。笔者主要是从以下三个方面进行项目化教学的。

1.项目引入

网页制作的教学要以网页制作软件为载体开展，一般软件的知识都是很松散的，也是比较易学的。学生在掌握软件的基本操作后，很容易满足现状，为了完成作业而完成作业，结果做出的效果没有新意。兴趣是最好的老师，好的项目是实施项目化教学的关键点。在选择项目时，要遵循两个原则：一是选题要充分考虑学生的实际能力，难度适中为好。难度过小，没有挑战性，起不到锻炼的效果；难度太大，学生容易产生畏难情绪，会挫伤他们的积极性。二是选题要与企业接轨，与实践相结合，选择实用的、学生感兴趣且比较熟悉的项目。比如网页制作中的个人博客，让学生能够感知项目的真实性和可触性，同时也容易激发学生的创新意识。

2.项目实施

项目教学的实施要求从信息的收集、方案的设计与实施，都由学生负责；教师只发挥咨询、指导与解答疑难的作用，通过让学生承担和完成某个具体的项目来掌握专业能力和社会能力。在实施过程中，要求学生能够运用新学习的知识和技能，解决在项目中遇到的各种技术问题。在实际教学过程中，教师要重点做好指导监督工作。当学生遇到困难时，尽量不要直接给出答案，要做出提示，让学生通过思考、讨论、查阅资料等方式自己解决。教师要根据各小组的具体情况有针对性的进行指导，督促学生按时按量完成项目中的各个环节，保证学生顺利完成项目的开发，实现教学目标。另一方面，项目进度表规定了学生的进度要求，给他们一种无形的压力和设计的紧迫感，以利于他们尽快融入设计岗位的快节奏工作中去。

3.项目评价

项目评价分为课上和课下两个环节。课上教师利用两学时对项目进行总结和评价，鼓励学生大胆展示自己的优秀成果，并恰当地对作品的创作思路和心得进行阐述，充分锻炼学生的语言表达能力、逻辑思维能力、分析总结能力等。课下，针对所教班级的实际情况，笔者分为三个层次进行评定，即教师、组内、组间。从知识、能力、素质等方面进行细化，并分成“优、良、合格、不合格”四个等级进行量化，制成表格，对每个学生的作品做出正确评价。

三、项目教学法的重要性

职业类院校在新时期担负着为生产一线培养大量技术型人才的重要使命，在《网页制作》课程教学中推行项目教学法，能够大大减少高分低能问题的出现，使学生在学习的过程中不仅能够体会到成功和乐趣，也能够真正掌握一门技术，具备一定的能力，具备承担相应的工作的能力。项目教学法培养了学生热爱专业，勇于创新，乐于实践等多方面的综合素质，使学生在一个接一个的项目中不断成长，形成螺旋式上升的过程，从而实现了学校与企业的无缝对接。