网页的制作教案（精选8篇）
网页的制作教案 篇1
《网页制作》教案
潘有寅
一、说教材：
(一)教材分析：现在网络快速发展，广大的学生接触，使用INTERNET的机会也大大增加，学生在使用网络 获取信息时，更多的是通过浏览网页这一方式，我认为上好这节课是非常必要的，这对学生进一步认识、使用INTERNET更有益处，同时通过网页制作这一过程也利于学生对计算机常用素材的类型有更深入的了解，在一定程度上也起着培养学生运用综合知识能力作用，所以我认为这节课是非常值得我们去研究上好的，考虑这节课的内容及教法、学法的需要，我把这节分为两课时，第一时：在引导下学生学，练 DREAMWEAVER制作网页的基本方法；第二课：让学生自己构思创意一个与自身相关的内容丰富的，页面美观的网页。
(二)教学目标：根据对教材的分析及学生实际情况，制定如下的教学目标：
(1)知识目标：
1、有关建设第一个网页的理念思想构成。
2、熟悉用DREAMWEAVER制作网页的基本方法
3、超级链接是网页实现互相链接的基本方法
(2)能力目标：
1、培养学生的自学能力
2、创意构思能力
3、能制作出具有多重链接、多种素材、内容丰富的网页。
(3)情感目标：
1、教育学生正确认识和理解信息技术相关文化，伦理和社会问题，负责地使用信息技术。
(三)教学的重、难点：
根据对教材的分析及网页制作过程中的 实际情况，我认为要出制作内容丰富的网页，关键是要知道为什么要做网页，明确你做网页的目标。从培养学生运用信息技术综合能力这点出发，我认为如何引导学生进行思考定位、以及通过网页的制作这过程使学生对互联网有更深入的了解和运用，应该做为本节的难点内容。
二、说教法：
我采用了主体式教学模式，首先我创设了一个学习情景，让学生在情景中积极地完成任务，在任务完成阶段，我是一名帮助者、引导者，教学时注意观察学生，及时总结共性问题，个性问题留给小组学生讨论，不断激发学生的学习兴趣，以达到最佳教学效果。教学方式上①我采用了“任务驱动”教学方式，强调“实践出真知”的科学思想，授课时出示明确的，可操作性强的教学任务②分层教学，分类指导即两分：考虑学生计算机水平的差异，我把学生分为A、B两层，不同层次学生完成的学习目标不同，不同层次的学生教师指导方法不同。A层学生只要求完成知识目标，及能力目标第一个，B层学生同时要求能力目标的2、3 项。
三、说学法：
以学生为中心，要求学生由知识的灌输对象转变为信息加工的主体，引导学生按以下两种方式来完成任务：①自学自练：通过学生自己在计算机进行操作从中获取对知识的正确理解，探求问题解决的方法；②协作学习：在实际操作中遇到的问题鼓励学生共同研究讨论、解决，使学生可以看到问题的不同侧面和不同的解决途径，开阔学生的思路，从而对知识产生新的理解。
四、说教学过程
教学环节
教师主导
学生主体
设计意图
导入新课：
同学们，互联网近年发展迅猛，大家都离不开网络了，那么同学们平时上网看的都是别人做的网页，如果自己也可以在网上看到自己制作网页，那中动手的满足感该有多好啊。这节的学习的目标就是网页的制作，准备共用两课时完成这部分内容，第一课时：自学自练DREAMWEAVER制作网页的基本方法；第二课时： 自己设计制作网页。学生回答，明确学习目标 通过展示教师制作的学校网页，激发学生的学习兴趣，同时给出学习目标，让学生明确学习任务，做到有的放矢。
讲授新课第一课时： 再具体操作之前，同学们应先了解有关网页的一些相关知识。
阅读内容、分析，总结激发学生主体参与意识，培养学生阅读归纳知识的能力 理念的构成，寻找可模仿的同龄人制作的网页。找出网页内在的逻辑关系及理念。先模仿再创造。观察，调动的兴趣，明确学习的途径，方法，坚定学习成功的信心。通过展示学生们制作的班级网页，进一步激发学生的学习兴趣，同时坚定学生的学习信心，告诉学生通过自己的自学自练就可实现学习目标，进而培养学生的自学习惯。
总结或补充
1、网页制作方法很多，我们要学习的只是其中的一种；
2、无论哪种方法制作的网页，生成文 件扩展名均为html或htm，即对应是html语言
3、当浏览网页时，看到的不是语言代码而是语言代码所描述 的形象。总结 理解、记忆在上课的最佳时间内，让学生了解有关网页的相关知识，这利于学生的记忆
教师指导(分类指导)共性问题做小结
自学、自练协作学习培养学生自学能力，阅读、分析、解决问题实际操作，使学生成为学习的主体，学习的主人 小结 1解决操作中的共性问题
2指出超级链接是实现多网页链接的的基本方法：
3、保存文件为htm或html格式并预览 学生总结并提出问题，理解超级链接，预览自己的练习作品
解决操作中的问题，为下步学习扫清障碍，将本节的重点问题突出，通过预览对网页设计有一个初步设想
展示第二课时目标：
设计一个网页，内容丰富，突出主题，展示个性
多种素材综合运用(可以自己准备素材)
明确下课时学习任务，主动思考
通过一下课时的目标展示，使学生可以有更多时间去构思、创意，促动学生主动的去思考、去学习，引导学生习惯于创新，展示独特创意。
第二课时
展示第二课时目标：
计一个网页，内容丰富，突出主题，展示个性
多种素材综合运用(可以使用自己的准备素材)
明确任务
明确目标、任务，理清设计思路
指导(分类)
设计自己的网页
培养学生实际操作能力，综合运用知识能力在这过程中学生将会将上节自学的内容及以上学习综合运用，这对培养学生综合能力是相当有好处的。
通过局域网展示网页
学生推荐、自荐、评论
激发学生向上进取的学习态度，也可以使学生横向学习
课堂小结及课后要求
小结：找优缺点
思考、总结
进步引导学生学习
课后思考
1、让你的网页互相网上也被全世界人所浏览，那你该怎样实现
2、用DREAMWEAVER制作的网页与我们平时所见的网页效果一样吗？
全班互动学习进一步拓展学生的学习思路，学习空间，加强自学、互学的能力
五、说板书设计：
考虑到信息技术学科教学的实际特点，所以在板书设计上我主要体现了以下三个特点。
突出简要内容
突出课时目标
设置“共性问题”、“总结解决”版面
板书设计 网页制作
第一课时：
网页文件说明
1、常见的网页制作工具
2、网页文件的扩展名为htm或html
3、浏览器所显示的不是语言代码而描述的形象
二、理念构成
1、目标：熟悉用dreamweaver制作网页的基本方法
2、分类指导
共性问题
总结解决 第二课时目标
设计网页，内容丰富，突出主题，展示个性多种素材综合运用(可以自己准备素材)第二课时：
一、目标：
1、设计网页，内容丰富，突出主题，展示个
2、种素材综合运用(可以使用自己准备的素材)
二、设计制作：
共性问题
总结解决
三、展示、讨论
四、课后思考
网页的制作教案 篇2
随着计算机技术及网页设计技术的发展与应用，教育界正在利用计算机制作电子教案，以取代传统的纸质教案。而在制作各种电子教案的过程中，最优的方法是利用网页设计技术制作，再辅以其它应用工具对其进行优化。
教育部在《面向21世纪教育振兴行动》中提出“形成开放式教育网络，构建终身学习体系”，分三步逐步推进我国信息化教育：第一步是计算机多媒体为核心的教育技术在学校的普及运用;第二步是组织上网，利用网上资料;第三步是开展远程教育，提供广泛的学习资料，不断满足社会终身教育的需求。
随着计算机技术的广泛应用，在中国教育教学信息化的今天，各级各类学校全面要求教师完成信息化的第一步，即以多媒体教学为核心的教育技术应用于教学中。第二步与第三步也在广泛开展，广大教师都在广泛开发各种各样的多媒体课件，各类的教材出版社也都为各自所出版的教材增加竞争的砝码，在出版教材的同时，80%的教材都有增值服务：如配送电子教案，网上在线学习卡，教学及学生自学光盘和其它类似服务。这些正是教育部在《面向21世纪教育振兴行动》中提出的推进我国信息化教育的具体体现。
二、电子教案概念、重要性及常见的制作技术
所谓电子教案就是指利用计算机技术，将教学过程中的大部分内容存储在计算机中，教学过程通过投影仪或网页浏览进行教学或让学生自学。
电子教案在现代信息化教育的今天，具有非常大的重要性，主要体现在如下几个方面。
1. 便于电子教案中的各种资源随时更新与修改。
2. 便于教学中的各种教学资源如：文字、图片、动画、影片、音乐的高效组合。
3. 便于学生复制到家后自我学习，如果将其放在网页上可供学生浏览学习，及其他教师参考。
4. 是响应国家创建节约节性社会的需要，可以大量节约纸张。
5. 减少教师的重复劳动，提高教师的备课效率，及授课效率。
6. 减少教师课堂板书及粉笔使用，还可以减少粉笔灰对教师与学生身心健康危害。
将计算机技术广泛应用于教学中是在Windows95与Office95发布以后，从而利用计算机技术取代传统的电教方法：幻灯片、录音机、录像带的播放。而广泛采用Word文档和PowerPoint幻灯片的方法，也开始逐步取代纸质教案，而后又开始出现各种动画技术、视屏技术应用于教学中。这一类可以说是计算机多媒体课件。这种可以称之为传统的多媒体技术，是在以教师为主导的教学模式中，借助多媒体的特有表现形式，对教学内容中的重难点部分展开，以发挥传统媒体所不能发挥的作用。教师可利用学校的投影教室，播放的教学软件、图片、视屏、声音、动画、多媒体光盘，用Word电子教案、以PowerPoint制作的幻灯片进行授课。
随着网络技术及网页设计与编程技术的推广使用，网络课件，也可以说是网络型电子教案应运而生，但网页设计技术没有普及，所以90%教师都是用PowerPoint制作的课件，同样，很多教材出版社出版的教材，也有约85%所提供的配套课件是PowerPoint课件，有约10%是教学光盘，只有约5%是网页形式的电子课件。
三、网页设计制作电子教案的优点
网页型电子教案，就是利用网页设计技术及网页编程技术，将教学所用的各种资源融合于一体的电子教案。它是教育信息化的实践前沿、学法教法改革的试验，是网络学习的小型集约化活动平台，不同于PowerPoint一类的课件，优点主要表现在如下几个方面。
1. 利于提高教师的教学水平，减少重复劳动。
教师制作网页型电子教案，可以将各种教学资源有效地、有序地整合在一起。网页型电子教案是教师的移动教案，是教师的教学资源库，有利于教师进行教学;有利于教师对教学资源进行修改与补充，进而提高自己的教学水平与能力。
2. 有利于学生学习效率的提高。
其一，教师丰富的教学内容、全新的教学形式可以提高教学的质量和学生的学习兴趣。
其二，教师可以将网页型电子教案放到学校的网站上，供学生学习相关的知识;可以将QQ在线代码写在网页中，这样学生就可以在网上与老师进行在线交流，将第一课堂延伸到第二课堂。
其三，学生自学。放在网站上的电子教案，学生可以自学，而这种自学模式则突破了看书或翻阅笔记获取知识的唯一渠道，他们根据自己的需要，在合适的时间、合适的地点、合适的条件下，反复利用网络点播、观看多种资源，包括教师的教案、参考资料等丰富的背景资源，建立一种综合性、创造性、灵活性极强的学习模式。
3. 有利于教师同行资源共享。
网页型电子教案放在网站有利于教师同行之间的交流，有利于教学资源的共享，教师可相互促进、相互学习，从而全面地提高教师整体的教学水平。
4. 有利于提升院校形象，可作为开发精品课程的基础阶段。
现在高等学校都要求开发自己的精品课程。通过多个院校网上查寻，做得好的精品课程都采用网页形式，这是网页型电子教案的最高形式，所以教师制作网型电子表教案正是精品课程的源泉。
四、网页电子教案的制作基本技术及要求
网页电子教案的主要内容是文字、图片、动画，只有通过超级链接到其它素材上，丰富的内容才可以提高教案的视听效果和教学效果。在制作与设计网页电子教案时要注意如下方法与技巧。
1. 网页制作的工具选择。
(1) FrontPage简单易学易用，功能强大，基本操作命令同于Word的操作，有利于广大教师学习与应用。
(2) Macromedia公司的网页三剑客：Dreamweaver具有强大的网页设计功能，是用于专业制作网页的工具软件、但不易精通;Flash用于制作一些网页动画及网页，也可以制作Flash课件;Fireworks用于网页图片进行优化处理。
(3)其它工具。利用相关的工具软件和网页特效。
(4)动态网页技术。可以利用ASP、PHP、JSP等语言编程和用Access、MS SQL、MySQL数据库技术编制动态网页，从而实现交互功能。
2. 网页电子教案的组织与规划。
一个成功的网页电子教案，教师的规划能力有相当程度的影响力。网页规划包含的内容很多，如网页的结构、项目的设定、网页颜色搭配、页面版面布局、文字图片的运用等。
3. 网页内容的布局。
网页的具体内容可以用表格结构、框架结构表示，Dreamweaver用“层”来进行网页的布局。最好的是用框架结构。用框架结构组织的网页型教案，学生易于浏览，教师易于维护、更新。
4. 用网页模板来建立网页。
在网页建立过程中，可以将相同的内容建立网页模板，从而有利于网页编辑与修改。
5. 用站点的方式来管理电子教案。
在设计制作网页电子教案的过程中，必须用站点的方式来管理，如文件的移动、更名等操作，否则超级链接的属性就会发生变化。
6. 网页交互式设计。
交互式设计可以作为网页电子教案的高级应用，有利于师生、同行教师之间交流，还有利于学生自学与自测。
五、网页电子教案的优化
网页电子教案的优化主要体现在它的高级应用。很多人认为电子教案就是用于教师教学，但作用信息化的今天，教育部在《面向21世纪教育振兴行动》提出推进我国信息化教育进程。网页电子教案的优点就是在于将教案融于网页之中，网页更有利于信息的供享。所以对网页电子教案的优化处理是网页电子教案的重要体现。
1. 将网页电子教案上传到院校的网站上，供学生自我学习。
2. 通过电子书制作工具，这些工具可通过网络下载。如：eBook workshop, eBook Edit Pro等软件，将电子教案制作成电子书，可以让学生复制到手机中，从而自由地学习。
3. 通过网页制作的电子教案，加入一定的网页特效，如在网页中，禁止复制，禁止另存为，这些特效可以从网上搜索，并辅以框架结构，实现一定的版权保护。这种优化处理，特别有利于教材出版社，可以保护版权，也有利于教师教学成果的保护。
4. 在上述2、3点的基础之上，还可以对网页电子教案进行打包格式为“EXE”文件，再辅以制作安装程序软件，如安装程序制作专家，可以实现网页电子教案的软件化处理，可以加入安装序列号，制作成需要安装的学习软件程序。
5. 教师每一年都可以通过对网页电子教案进行修改补充，制作成程序软件和升级版本，从而取得一定的商业利益，这也是对教师制作优秀电子教案努力的回报。
六、结语
总之，网页型电子教案是一种很好的电子教案制作方法，是推进我国信息化教育改革的必要手段，是一种非常值得广大教师、各级教学管理者、教材开发者及精品课程的开发者进一步探索的制作方法与理念。
摘要：本文就利用网页技术制作电子教案的方法、优点和优化进行了一定的研究, 以期广大教师改变传统的教案, 制作优秀的网页型电子教案, 提高教学质量与教学水平, 全面推进我国教育现代化、教育信息化的进程。
关键词：网页型电子教案,制作,优化
参考文献
[1]方慎林, 胡豪, 徐星.《Dreamweaver8网页制作教程》十一五规化教材.北京科海电子出版社.
浅谈《网页制作》的教学心得 篇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、引导学生自主创作网站
学生既积累了网页知识，又能在灵活运用网页制作软件的基础上，展示学生作品，再次调动学生的积极性，鼓励学生，采用讨论的学习方法，讨论网页优缺点。学会写网站系统分析说明书，提起学生展示自己才华的欲望。分小组，布置不同类型网站题目，学生自主创作。完成作品，展示发言，使学生真正掌握网页制作的精髓所在。
网页制作这门课是一门具有挑战性的课程，需要的不仅是教学方法的改变，还需要教师的不断学习和提高，才能真正上好这门课。
参考文献
12、 网页制作教案 篇4
（一）一、网站的基本概述
（一）、网页：网页是计算机连接网络时浏览器窗口中显示的一个页面，是计算机网络最基本的信息单位,它实际是一个文件,存放在世界某个角落的某一台计算机中,当我们在浏览器输入网址后,网页文件会被传送到你的计算机,这样就可以利用网页来访问计算机了。
网页分类：（1）静态网页:网页中包含文字、图片、动画、视音频。
（2）动态网页:网页中包含文字、图片、动画、视音频以及交互功能.（两者的主要区别:是否包含交互功能）
例：《自动控制原理》精品课程
网站：是众多网页的集合。
（二）、网页的基本构成元素：
包含图片，文字，超级链接，动画，表单，视频音频等元素中的一种或多种
（三）、网页的页面设计：（1）、网页布局：网页布局是根据你所设计网站类型而设计的，不同的网站有不同的风格，一般包括了标题栏，页眉区（通常包含网站标志），导航区，正文区、页脚。
例：Visual Basic 学习网站（2）、配色原则：网页设计要达到赏心悦目的目的，需要注意色彩的搭配与风格的设计。例：麦当劳（3）、版面编排：例：清华大学
版面既要有美感又要实用，美感是令人感觉舒服的主要因素之一，但美感是要为内容服务的，所以版面的编排要注意各部分内容的比例关系，也就是 “经营位置”。作为一种版面，既有文字，又有图片。文字有大有小，还有标题和正文之分;图片也有大小，而且有横有竖之别。图片和文字都需要同时展示，不能简单地罗列在一个页面上，这样往往会搞得杂乱无章。必须根据内容的需要，将图片和文字按照一定的次序进行合理的编排和布局，使它们组成一个有机的整体。可以依据如下几条来做：
1.主次分明，中心突出。在一个页面上，必然考虑视觉的中心，这个中心一般在屏幕的中央，或者在中间偏上的部位。因此，一些重要的文章和图片一般可以安排在这个部位，在视觉中心以外的地方就可以安排那些稍微次要的内容，这样在页面上就突出了重点，做到了主次有别。
2.大小搭配，相互呼应。较长的文章或标题，不要编排在一起，要有一定的距离，同样，较短的文章，也不能编排在一起。对待图片的安排也是这样，要互相错开，造成大小之间有一定的间隔，这样可以使页面错落有致，避免重心的偏离。
3.图文并茂，相得益彰。文字和图片具有一种相互补充的视觉关系，页面上文字太多，就显得沉闷，缺乏生气。页面上图片太多，缺少文字，必然就会减少页面的信息容量。因此，最理想的效果是文字与图片的密切配合，互为衬托，既能活跃页面，又使主页有丰富的内容。
（四）网站设计的原则
（１）网站主题和内容明确。（２）网页色调和谐，布局清晰。
（３）网站方便易用，提供有效的导航条，使人很容易从每一页上访问到网站的任何部分,最好在每一个网页同样的位置上都有相同的导航条。
（４）避免长文本页面,每一个网页的高度不能超过三倍的浏览器高度，避免使用过大的图像，不要使用横滚动条。
（５）避免错误链接，保证链接有效。
二、如何策划一个网站（制作网站的目的以及如何实现）
步骤：
1.给网站定位，确定网站的性质 给出网站的主题和名称(例如求职，聊天，社区，计算机技术，网站开发，娱乐，旅行)2.确定网站的栏目：也就是导航区的内容，栏目的实质是一个网站的大纲索引，所以应该将网站的主体明确的显示出来，栏目要主体突出。
3.确定网站的目录和链接结构，画出网站的目录结构图。
4.绘制首页网页的布局：如：圣诞节网站，见网页例子：网页表格布局.htm
5、根据你的网站构思准备素材（文字、图片、动画、视频音频等元素）.在你的文件夹下面分别建立images 和txt、others三个文件夹存放你的素材。
三、Dreamweaver 软件的启动
四、Dreamweaver 8.0操作界面
DREAMWEAVER 8.0操作界面
（一）工作区的组成结构：
（二）、Dreamweaver面板和面板组：
（三）菜单栏中各个菜单的基本作用： 文件：包括对文件的各种操作。
编辑：包含了对文件的拷贝，粘贴，查找与替换等命令。 查看：使用查看菜单可以查看文档的相关内容。
插入：用于将对象插入文档中。包括图片标记、flash动画、视频、表格、超级链接、日期、水平线等：属性可以在属性面板中进行可视化设置
修改：可以使用修改菜单更改选定页面元素的属性。
文本：可以设置文本的格式，如段落格式、字体、文本环绕排版及停止文本环绕等。 命令：提供各种命令的访问。
站点：提供用于管理站点以及上传和下载文件的菜单项，可以创建站点和对
已有站点进行编辑 窗口：提供对Dreamweaver中的所有面板，检查器和窗口的访问。 帮助：提供了对Dreamweaver文档的访问。
五、定义一个站点
举例：Dreamweaver学习网站
（一）、定义一个站点
在正式开始制作网页之前，最好先定义一个新网站，这是为了更好地利用站点窗口对站点文件进行管理，也可以尽可能的减少一些错误的出现，如路径出错，链接出错。我提倡的做法是：建立一个文件夹用于存放网站的所有文件，再在文件内建立几个文件夹，将文件分类，如图片文件放在images文件夹内，HTML文件放在站点文件夹内。
文件的命名也是非常重要的，不要随便乱起些名字，最好做到一看文件的名字就知道是什么内容的网页文件。提倡用英文或者拼音给文件命名，不要使用中文的名字，因为有的浏览器对中文支持不太好，有可 能出现链接的错误。
定义站点的步骤： １、启动dreamweaver 8.0中，在菜单栏中选择站点>管理站点。在弹出的管理站点对话框中，点击新建。
接下来需要给站点起一个名字，输入您网站的名字，可以定义中文名。
这里起名为dreamweaver学习网站,按下一步
2、按下一步按钮，选择是否使用服务器技术。因为实例建立的是一个静态站点，就选择“否，我不想使用服务器技术”。
3、按下一步按钮，因为要传到网上的虚拟主页空间，就要选择“编辑我的计算机上的本地副本，完成后再传到服务器上”。
4、按下一步，选择要定义的本地根文件夹,这里选择D或E盘中你的文件夹，点“选择”按钮，因为没有使用远程服务器，就选择“无”。按下一步
5、按完成按钮，一个站点就定义好了。
6、打开文件面板（窗口→文件），在您的站点文件中新建三个文件夹，用于存放与站点有关的图片等文件，分别是命名为images、txt、others。
新建五个网页文件，分别命名为：
index.html、kcjs.html、kcxx.html、yxzp.html、sczy.html 打开D盘看看你刚刚建立网站的文件。
素材文件名和网页文件名必须用英文或英文状态下的数字，不能使用中文
练习1：在dreamweaver 中定义一个站点，文件夹放在D 盘的目录下。
六、常用功能介绍
（一）、表格的使用：
制作网页数据表格：熟悉表格的插入、合并、拆分与嵌套；表格的制作..htm 表格的基本构成标记 ：
（1）创建表格：
第一步：在Dreamweaver 8.0中运行“插入→表格”命令，弹出属性设置窗口，添入插入表格的行数、列数、表格的宽度，根据自己的需要来设置表格的相应属性即可。
小提示：表格的宽度和高度可以通过浏览器窗口百分比或者使用绝对像素值来定义，比如设置宽度为窗口宽度的100％，那么当浏览器窗口大小变化的时候表格的宽度也随之变化；而如果设置宽度为500像素，那么无论浏览器窗口大小为多少，表格的宽度都不会变化。
第二步：点击窗口中的“OK”按钮之后即可在Dreamweaver 8.0中新建一个表格，而且通过窗口下部的属性面板还可以对其进行诸如表格线条的颜色、表格的背景色、表格的背景图片（介绍如何插入横铺垫、竖铺垫、不重复的背景图片）、色单元格的对齐方式等参数进行调整。
用标签选择器选择表格，将光标定位在表格的第一个单元格内，可以看到状态栏左侧的标签选择器处显示为 “{body}{table}{tr}{td}”，其中table表示表格，tr表示表格中的行，td表示单元格，现在td被加粗显示，说明光标处在单元格内。单击一下{table}，标签选择器处显示为“{body}{table}{tr}{td}”（如下图），再看编辑区内的表格，表格周围为一圈黑线，表示表格被选中了，四周还有几个黑色的小方块，是表格拖放手柄，可以用来改变表格的大小。
（2）基本使用（举例说明：表格的制作..htm）
步骤：
第一步：先插入一个９行３列的表格；
第二步：选中表格中第二行第二列的单元格，接着点击属性模板中的“拆分单元格”按钮，这样就把选中的单元格拆分为二个单元格，按照同样的方法再将表格中其他需要拆分的单元格拆分。
第三步：选中表格中第九行中第二列和第三列的单元格，接着点击属性模板中的“合并单元格”按钮，这样就把选中的两个单元格合并成为一个单元格，按照同样的方法再将表格中其他需要合并的单元格合并。
第四步：将表格第九行的三个单元格全部选中，再将属性模板中的背景颜色（Bg）一项设置为“#FFFF00”，这样表格第一列中的单元格背景全部变为黄色。
第五步：在表格中输入相应的文本，为了美观可以在属性面板中进行居中设置。
第六步：为了使表格产生立体效果，可以将整个表格选中，然后在属性面板中设定表格边框的宽度（Border）为7，并且将边框颜色（Border color）设置为灰色即可。
小提示：选取整个表格常用的方法：1．把鼠标移动到表格右边界外侧，按下鼠标之后往左拖拽，这样可以快速选取整个表格。２．在单元格中右击鼠标，并且从弹出菜单中选择“表格→选择表格”命令选取整个表格。３．用鼠标点击任一个单元格，接着按两下“Ctrl＋A”组合按钮选取整个表格。
完成上述操作之后，我们就可以在Dreamweaver 8.0中定制出颇具专业水准的表格了。练习
2、新建一个网页，在网页中插入一个3行3列的表格，设置表格属性（边框和背景颜色），试着对目标行和列进行拆分、合并及新增表格的操作。
（3）利用表格来定位网页
表格在网页布局中有着举足轻重的地位，很多网站的页面都是以表格为框架制作的，这是因为表格在内容的组织、页面中文本和图形的位置控制方面都有很强的功能，灵活、熟练地使用表格，会使你在网页制作中如虎添翼。
表格的网页定位主要通过将网页内容分成若干个区，然后将相应的内容分别填入不同的表格，从而做成非常规范与专业的网页，下面就来看看dreamweaver学习网站是如何通过表格实现网页布局的。表格定位网页：如index_wlr.html 是一个只含表格的网页。
为方便网站能在在800×600分辨率下会显示正常，无横滚动条，我们编辑的网页宽度就定为750象素，高度可以大些，在浏览器中显示时会有竖直滚动条。
总体布局：在菜单栏选择插入命令，下拉的菜单中选择表格，在弹出的对话框中选择一个，宽为750像素，1行1列的表格，并设置边框粗细、单元格边距、单元格间距均为0；
页眉区： 观察到网页最上部是页眉区，页眉区可以放嵌套一行一列的表格，用于放置一个宽为750高的图片文件或flash文件；
导航区：嵌套一行五列的表格，用于放置五个导航；
正文区：正文区总得说来是由一个一行二列的大表格构建而成，所以首先插入一个一行二列的表格，在左边一列的单元格中插入一个16行１列的表格，在右边一列的单元格中插入一个7行3列的表格。布局页脚：网脚是由一个大的表格组成，可以插入一个1行１列的表格，表格的宽设置为750象素。
练习
3、打开dreamweaver学习网站站点的index.html文件，设置页面属性，并利用表格定位网页，保存网页。
（二）文字的插入
介绍编辑字体列表。
注意：在网页上打入空格的办法是：把输入法调为全角。
在网页上换行的办法是：shift+Enter。只按Enter则为换段。
（三）图片插入：设置图片对齐方式，使文本产生环绕效果。
例如：建立文本环绕右边：、停止文本环绕：
在文字代码中插入
（四）插入水平线：
它的颜色设置要通过代码设置，宽和高可以通过属性面板
（五）页面属性的设置：在编辑网页之前，先对页面属性进行设置，便于保证网页风格的统一，当然，页面属性的设置是随时可以进行的。举例：在标题上输入：dreamweaver学习网站，在背景，文本，链接，访问过的链接，活动链接几部分选取颜色。设置左边界，顶部边界，边界宽度，边界高度都为0象素，可以使页面中的表格与背景没有空隙。如果不设置边界，顶部边界，就会默认表格与顶部和边界有明显的空隙 用得比较多的还有背景图像的设置，选择一个已经做好的图像，就可以设置成页面的背景图像。
页面属性设置完毕后，我们会发现代码窗口出现了如下代码（黑色部分）： body { margin-top: 0px;
页面顶部边界为0 background-image: url(images/dt.gif);
页面背景图像
} a:link { text-decoration: none;color: #666666;} a:visited { text-decoration: none;color: #3333CC;} a:hover { text-decoration: underline;color: #660000;} a:active { text-decoration: none;color: #CCFF33;} body,td,th { font-size: 12px;color: #666666;font-family: 宋体;line-height: 20px;
行距（需要在代码区设置，它的大小应该比文字大小要大，否则会吃掉一部分字体。）
}
练习
4、试在练习3中建立的网页文件index.htm中练习插入文本、插入水平线、图片并设置图片的垂直边距和水平边距、设置页面属性。
（六）日期的插入：在插入栏选择日期，在弹出的对话框中选择显示的格式。
（七）E_mail链接的插入：在插入栏选择电子邮件链接，在文本中输入要显示的文本，在E_mail中输入需要链接的邮件地址。
（八）交换图象效果的制作：（插入→图像对象→鼠标经过图象）
鼠标经过图象的效果是当鼠标指针经过或者按下按钮的时候，图像或按钮的形状或颜色就会发生变化，如图像变换，发光，或者阴影出现等等。是网页变的生动活泼起来。
看dreamweaver学习网站导航演示：鼠标移动到图片上的时候，图片变成了另外一幅，当鼠标移开后恢复到原来的图象。
制作步骤：
1、光标移动到欲插入的位置，点击菜单栏【插入】【图像对象】【鼠标经过图像】打开对话框：
【图像名称】鼠标经过图像的名称，名称是自定义的，只要不与同页面另一个鼠标经过图像名称相同即可，也可以不填。
【原始图像】页面开始时显示的图像
【鼠标经过图像】鼠标经过的时候显示的图像。
【替换文本】图像无法正常显示的时候出现的文本注释，也是图像正常显示时鼠标指向链接时的说明，也可以不填。
【前往的URL】点击鼠标后链接的目标。
【预载鼠标经过图像】浏览网页时两个图片都同时被下载，当鼠标经过时无需从网上下载，而是调用预先下载的图像，减少延迟，使效果平滑流畅。
（九）flash动画插入、flash按钮的插入、flash文本的插入，可以来制作导航栏。
练习
5、试在练习3中建立的网页文件index.htm中练习插入插入水平线、flash动画、flash按钮、日期、交换图象
（十）了解简单的HTML：超文本标志语言，简要的介绍网页中使用的超文本标识语言HTML的基本概念和用途通过一个简单的html示例（html.html）了解html的基本构成，介绍html的基本组成部分.如果深入了解可以参考：http://www.shanxiwindow.net/teaching/htmlbook/
（十一）制作滚动的公告文字
在网页上可以方便地设置文字上下左右移动，控制文字移动的标点词
在浏览器中显示时，文字在移动这几个字左右移动。
dirrction:控制移动方向，可取left,right,up,down四个值；
behavior:移动方向，可取scroll(循环移动),slide(只走一圈),alternate(来回移动)；
loop:指定循环次数，不输入或-1表示无限循环
height,width:移动区域的高和宽，单位像素
scrollamount:移动的快慢，整数越大则越快
scorlldelay:每移动一步之后的延时，单位毫米
bgcolor:移动区域的背景色
onmouseover=this.stop()鼠标覆盖时停止滚动
onmouseout=this.start()鼠标离开时开始滚动
如下面的代码就上一个常见的实现向上滚动文字的原代码；
（十二）创建网站相册： 在你站点下建立一个放置数张图片的文件夹,本实例是将文件夹命名为photo。
练习
6、试在练习4中建立的网页文件index.html中制作制作滚动的公告文字
您的网站初步构思
1、网站的主题和名称：
2、网站的栏目（也就是导航区的内容）：
3、网站的目录结构图：
4、网站的链接结构结构图：
用Word制作网页 教案 篇5
用Word制作网页 教案
第1课 Word大变身――用Word制作网页 教学目的：将word文件转换为网页格式，会浏览自己制作的网页。 指导意见：本课内容较多，链接其他相关知识。 教学设计 教学目标： 1、掌握利用Word制作网页的基本方法。 2、能将Word文件转换为网页。 教学过程： 一、观察自己上网时浏览的网页，里面内容及格式和我们的文件有哪些相同点？ 二、打开保存过的具有“我喜爱的.动漫一览表”的Word文件――“动漫表”。 学生按下列步骤操作，教师给予讲解和指导。 1、将Word进行必要的设置。 （1）设置艺术字居中。 第1步：在菜单中依次选择“格式”→“艺术字”。 第2步：设置艺术字版式。在出现的对话框中选择“版式“标签，其中环绕方式选择”嵌入型“，这样可将艺术字插入文字当中，可以用设置文本的对齐方式进行设置。 第3步：选中艺术字，单击工具栏中的“居中“按钮。 （2）设置表格居中。 第1步：在表格中任意位置单击鼠标左键，将插入光标放在表格中。 第2步：在菜单栏中依次 选择“表格”→“表格属性”。 第3步：在出现的“表格属性”对话框中，选择“表格”标签的对齐方式为“居中”，其他为默认值。 （3）设置表格的边框样式。 为美观起见我们将表格的边框线进行变化。 第1步：在表格中任意位置单击鼠标左键后，依次选择“表格”→“表格属性”。 第2步：在出现的“表格属性”对话框中，单击“边框和底纹”按钮，在出现的对话框中选择“边框”标签中的设置项为“全部”，线型为倒数第二中（因为只有第一种和最后两种能够在网页上显示）。 2、将Word文件转换为网页。 将Word文件进行保存后，选择“文件”菜单中的“另存为”菜单项。在出现的“另存为”对话框中，将保存类型选择为“Web页”，位置还是文件的位置。 3、浏览网页。 到“动漫”文件夹下，可以看到出现了一个带有e图标的文件，它就是刚刚保存的网页文件。双击它可以用浏览器以网页的方式打开进行浏览。 三、阅读知识链接。 编辑网页应该注意：网页的标题要简洁、明确；每个网页都要合理布局，保持页面风格一致，展现主题。网页中插入的图片要尽量的小。网页中引用的资料及商标（或图标）不能侵犯版权。 四、谈制作心得。
网页制作第二节教案 篇6
【第六章 第二节 网页制作】教案
一、【教学目标】
1、插入表格，利用表格布局页面
2、插入背景图像，插入图象，对比两者的异同。
二、【教学重点】 利用表格布局
三、【难点、关键】 表中表的使用
四、【教学方法】 演示、任务驱动法
五、【课时安排】1课时
六、【教学环境】多媒体教育广播系统，Dreamweaver软件
七、【教学过程】 1．导入新课
①回顾上节课的学习内容
②小组讨论对比两个网页布局有什么不同？（心系奥运，古玩今玩）
2．新课讲述
1．利用表格布局页面（布局表格和普通表格）操作步骤：
①“插入”/“表格”或者在常用插入栏中的“插入表格”按钮
②在表格对话框中设置插入表格的行数，列数，表格宽度，边框粗细，单元格边距等，③单击“确定”按钮完成表格的创建
（如果要边框显示就设置边框的值，如果不要，就将其设置为0）
表格属性的设置（合并单元格，表格（选中整个表格）、文字的对齐方式（选中单元格）
背景色设置）
利用表中表来布局页面的技巧（参考“心系奥运”的布局方法）
任务一:在”心系奥运”首页分别利用表格布局和普通表格两种方法设计导般条.由莲山课件提供http:/// 资源全部免费 由莲山课件提供http:/// 资源全部免费
2．插入图片 背景图片
“修改”/“页面属性”命令弹出“页面属性”对话框，在“分类”列表框中有“外观”中设置，注意使用背景图像的一些方法：①使用小图，图片容量小，方便传输，页面美观 ②色彩淡点，有利于后面的页面制作。插入图片 操作步骤：
①将插入点移到要插入图片的位置，“插入（I）”菜单中的“图像（I）”命令，打开“图像源文件”对话框，如果要插入的图片已经保存在当前的网站中，可以直接在图的列表框中选取，然后单击“确定”按钮。否则，单击“浏览”按钮，从“选择文件”对话框中选择所需图片，单击“确定”按钮，将图片插入到网页中。② 拖动图片到页面左侧适当位置。注意要把图片放到站点下 说明两种图像的不同点
任务二：在首页插入四幅图像,每一幅图像代表一个模块,图象大小设置成”249*48”,后面用文字说明模块的概意
在表格中输放文字
文字编辑是制作网页最基本的操作。在网页编辑窗口中，可以像在Word中一样直接输入文字，进行编辑和排版。
任务三: 在插入的四幅图像后加入文字说明，采用默认的字体和字号，颜色为黑色，居中排列。
八、小结本次课内容
总结本堂课的学习内容，还有，确定各小组期末作品的主题。
网页制作概述 篇7
一个好的网站具备如下特点:
(1) 具有鲜明的主题。比如远程教育类、图片音乐类、文学创作类、软件下载类等; (2) 合理的站点结构。既便于网站管理者的日常维护, 又满足浏览者快速翻阅感兴趣内容的需要; (3) 统一的站点风格。体现在色彩、文字、按钮、图形等方面的统一搭配, 不至于让人产生杂乱无章的感觉; (4) 动态网页。静止的网页一般而言总不如动态网页来得生动、吸引人; (5) 可交互性。浏览者与浏览者之间可以交互, 与管理者之间也可以有多种方式沟通, 如各类表单、聊天室、公告板等。
因此, 网页制作并非从刚开始就创建各类页面。相反, 最重要的工作还是在于明确主题、搜索各类资料、准备相应素材, 从站点自身的组织和浏览者的角度出发, 详细规划网页内容、分类、结构、表现方式等。整体设计完成之后, 进行素材的搜集和整理工作, 包括一些文本、图片、图画等。另外, 自己还需要制作一些电子素材, 如站点微标、统一风格的按钮Flash动画等, 可以通过Adobe Photoshop、Microsoft Firework、Microsoft Flash等软件进行制作。
接着, 着手建立站点结构。建立网站总目录、相关网页子目录, 如Html用于存放网页文件, images用于存放图片、media用于存放声音和动画等。网站的导航结构、各页面之间的超链接关系都应该有所考虑。
准备工作结束后, 可以开始设计和制作网页。制作的工具有很多, 有文才编辑类的如Hotdog、Homesite、webedit等;也有所见即所得类的, 如Microsoft Front Page、Netscape等。其中, Front Page2000是通俗易掌握、功能强大的一款网页制作和管理软件, 用它可以设计出图文书茂、生动活泼的网页。
完成所有页面的设计和制作工作之后, 就可以将其发布于web服务器上了。当然, 发布之前还应当做一次全面细致的测试, 以及时发现尚不完整之处。
2 常用网页开发工具介绍
2.1 Microsoft Front Page2000
在Front Page2000中, 页面制作由Front Page2000中的Editor完成, 其工作窗口由3个标签页组成, 分别是“所见即所得”的编辑页, HTML代码编辑页和预览页。Front Page2000带有图形和GIF动画编辑器, 支持CGI和CSS。Front Page2000最强大之处是其站点管理功能。在更新服务器上的站点时, 需要创建更改文件的目录。FrontPa8e2000会跟踪文件并拷贝那些新版本文件。
2.2 Netscape。Netscape Communicator和Netsccape Navigator Gold3.0版本都带有网页编辑器
如果喜欢用Netscape浏览器上网。使用Netscape编辑器真是简单方便。用Netscape浏览器显示网页时, 点击编辑按钮, Netscape就会把网页存储在硬盘中, 然后就可以开始编辑了。也可以像使用word那样编辑文字、字体、颜色, 改变主页作者、标题、背景颜色或图像, 定义描点, 挤入链接, 定义文档编码, 插入图像, 创建表格等。但是, Netscape编辑器对复杂的网页设计就显得功能有限了, 它连表单创建、多框架创建都不支持。
Netscape编辑器是网页制作初学者很好的入门工具。如果要制作的网页主要是由文本和图片组成的, Netscape编辑器将是一个轻松的选择。如果对HTML语言有所了解的话, 能够使用Netscape或Ultra Edit等文本编辑器来编写少量的HTML语句, 也可以弥补Netscape编辑器的一些不足。
2.3 Adobe Pagemill3.0
Pagemill功能不算强大, 但使用起来很方便, 适合初学者制作较为美观、而不是非常复杂的主页。如果主页需要很多框架、表单和Image Map图像, 那么Adobe Pagemill 3.0的确是你的首选。Pagemill另一大特色是有一个剪贴板.可以将任意多的文本、图形、表格拖放到里面, 需要时再打开, 很方便。
2.4 Dream Weaver
Dream Weaver是一个功能很强的网页设计软件, 它包括可视化编辑、HTML代码编辑的软件包, 并支持Active X、Java Script、Java、F1ash、Shock-wave等特性, 而且它还能通过拖拽从头到尾制作动态的HTML动画, 支持动态HTML的设计, 使得页面没有plug-in也能够在Netscape和IE 4.0浏览器中正确地显示页面的动画。同时它还提供了自动更新页面信息的功能。Dream Weaver还采用了Roundtrip HTML技术。这项技术使得网页可以在Dreamweaver和HTML代码编辑器之间进行自由转换, HTML句法及结构不变。这样, 专业设计者可以在不改变原有编辑习惯的同时, 充分享受到可视化编辑带来的益处。
2.5 Fireworks
Fireworks的出现使web作图发生了革命性的变化。Fireworks是专为网络图像设计而开发, 具有丰富的支持网络出版功能, 比如Fireworks能够自动切图、生成鼠标动态感应的Javascript。而且Fireworks具有十分强大的动态功能和一个几乎完美的网络图像生成器 (Export功能) 。它增强了与Dream Weaver的联系, 可以直接生成Dreamweaver的Libaray甚至能够导出为配合CSS式样的网页及图片。
2.6 Flash
F1ash是用在互联网上动态的、可互动的shockwave。它的优点是体积小, 可边下载边播放, 这样就避免了用户长时间的等待。Flash可以用其生成动画, 还可在网页中加入声音。这样你就能生成多媒体的图形和界面, 而使文件的体积却很小。Flash虽然不可以像一门语言一样进行编程, 但用其内置的语句并结合Javascript, 利用它可做出互动性很强的主页来。
2.7 Hotmetal Pro 4.0
Hotmetal Pro既提供“所见即所得”图形制作方式, 又提供代码编辑方式, 是个令各层次设计者都不至于失望的软件。但是初学者需要熟知HTML才能得心应手地使用这个软件。Hometal Pro具有强大的数据嵌入能力, 利用它的数据插入向导, 可以把外部的Access、word、Excet以及其他ODBC数据提出来, 放入页面中。而且Hotmetal Pro能够把它们自动转换为HTML格式, 是不错的。此外它还能转换很多老格式的文档, 并能在转换过程中把这些文档里的图片自动转换为GIF格式。
3 网页的发布
在发布之前, 还需要对所有的网页进行全面细致的检查, 链接的检查, 及时发现其中的孤立文件断链。若是已经在某个ISP处申请了一个域名, 并有了管理站点的权限, 就可以使用web发布向导或FTP程序发布网页了。
(1) 使用网页制作工具发布网页。大多数网页制作工具都具有web网站发布向导, 使用这些向导我们可以很容易地发布网页; (2) 使用FTP工具发布。这种方式大多数是将web服务器的目录与FTP服务器的目录设置为同一个目录, 这样只要将网页直接上传到此目录就可以了。
摘要：万维网能够处理大量内容丰富的信息资源, 如文本、图像、表格、声音、视频等。这些信息一页一页分门别类以网页的形式存放在各个服务器上, 浏览者可以根据自己的兴趣和爱好翻阅相关的内容。这里所说的网页其实就是一些网络文件, 其中包含了制作者所要发布的信息, 并以一定的方式链接在一起。
关键词：网页制作,基本方法,工具
参考文献
网页的制作教案 篇8
关键词：网页制作；兴趣；创新意识
中图分类号：TP393 文献标识码：A文章编号：1007-9599 (2011) 09-0000-01
Analysis on Cultivate Interest in Creating Web Pages and Innovation Awareness
Zhang Ling
(Chongqing Minsheng Vocational and Technical College,Chongqing401520,China)
Abstract:This paper describes the process of making a web page,interested teachers should start from the student,step by step in depth,step by step,gradually develop from the student's sense of innovation and innovative ideas to the farm holds many lessons for fun fashionable stores,for example,allow students again a pleasant,relaxed atmosphere of teaching and teaching environment,stimulate students to create motivation,develop their creative thinking,students must establish a creative personality traits.
Keywords:Web Production;Interest;Innovative awareness
隨着信息时代的到来，现在的学生对网络和计算机都有一定的了解，喜欢玩电脑游戏、聊天、冲浪……这些基本都是90后孩子们的基本生活特征。上计算机课时，认真上学的不多，其实计算机对于培养创造力意识和创新能力有着得天独厚的优势，利用相关的工具软件，学生可以将自己的想法有理想变为现实。在这个过程中，学生充分享受自己的劳动成果，激发学生发挥创造力、想象力。
网页制作中，需要我们教师引入学生感兴趣的教学实例进行剖析讲解，切合实际，笔者就网页教学的部分过程从以下几个方面进行阐述。
一、围绕着兴趣开课，设计富有吸引力的问题
兴趣是学生发展思维能力的巨大推动力。有兴趣的学习能使人积极思考、全神贯注，甚至废寝忘食。教学时，教师有目的地创设一些有价值而且使学生感兴趣的问题情境，设计一些绚丽多彩的想象内容，对于引导学生明确学习目标，让目标在学生的学习内容和学习求知心理之间制造一种悬念；让学生对新问题、新知识产生一种强烈的好奇感，这种好奇心理会让学生在探索和解决矛盾时形成一种要独立思考的愿望；进而调动起学生主动参与的心理，为自主学习奠定较好的情感基础。
例如，现在网络上普遍流行的QQ农场，属于SNS游戏，很多学生都喜欢玩，同时，这种游戏开发的技术门槛比较低，拿来做教学实例最好不过。确定了要做的游戏后，再确定游戏的功能，最后把定向开发的这些游戏功能组合起来，完成游戏的整体开发。设计这款游戏，就必须设计好农作物、商店、宠物、礼品、去好友田地等各项功能。
二、围绕重、难点，设计富有探究性的问题
很多SNS游戏，都包括商店，可以在商店里买卖物品。不同游戏商店里的物品不同，但设计方法却一样。以开心农场为例，来进行设计。
开心农场的最基本功能是商店功能，有了商店，玩家可以买种子，然后播地、种地。而设计商店这个功能，先要创建好数据库，数据库是用来记录商店里面的商品信息，接着设计商店的界面，再然后定义商店的功能。在商店里面可以买到化肥、种子、工具，收获之后买卖农作物。第一步：创建数据库。我们需要建立整个游戏的数据库，做出基本的数据结构，制作程序。启动Access，“建立空白数据库”，输入数据库名称。第二步：设计数据库连接模板。有了数据库，还需要数据库链接板块，这样才能让数据库发挥作用。
三、有意识培养创新意识
在制作网页时，要有意思地提倡和培养学生的创新思维。作业是一个可以有大文章的教育基地，也是可以提高学生创造思维的有利途径。一方面，学生要有意识有目的地自己主动去开拓眼界、拓展思维、发散思考，另一方面，教师要有意识设计能激发学生创造思维的联系训练。设计辐射性练习，可以培养学生的联想思维能力。辐射思维也就是一种发散思维，就是一种举一反三、触类旁通的思维能力，培养这种思维能力时，教师一定要选好教学点，使学生有类可触。网页设计不仅需要制作者有良好的创新意识、创新精神，尤其是要做出优秀的网页时；做网页设计亦会培养学生的发散思维能力、创造精神。传统教学过程中过分强调的标准答案这一说法就要适当地进行改革，教师最好减少标准答案的频率，降低抑制学生创造性发生的几率。
从色彩角度如何做出精美的网页。网站色彩就比如是人的衣服外表一样，如果打扮得大方美观，就会给大家魅力四射之感，而不修边幅就会给人一种毛糙粗制之感，网页配色是一项艺术性很强的工作，不同的人对颜色的感觉悟性不同，即使实用的材料大同小异，创作出的网页也会千差万别。笔者浏览过众多优秀获奖网页，最为欣赏的是一个绿色的搜索网页，该网页是2010年由一名女设计师设计。画面总体透露出一种祥和平静的韵味，浏览者看到网页第一感觉是亲切而又平和，再烦躁的心态都会在一瞬间平静下来，再加上作者左下方简洁个性的按钮设计和中间一个银白色的流线条人形设计，整体看来网页设计的简单实用而又不落俗套。
四、结束语
经过近几年的探索，素质教育的倡导下，我们坚持“以服务为宗旨，就业为导向”的培养目标，在教学内容和课程体系方面不断改革，模式上运用“案例教学”“一体化教学”等，培养大家网页制作的兴趣和创新意识。
参考文献：
[1]雷东升.计算机专业实践教学体系的改革与探讨[J].黑龙江教育:高教研究与评估,2006,10
【网页的制作教案】推荐阅读：
网页制作教案808-08
《网页制作FrontPage》教案08-23
frontpage网页制作教案10-03
网页制作的技术因素05-24
制作网页09-22
网页制作和设计的原则09-01
网页制作课程的技巧论文12-14
关于网页制作的教学反思08-15
网页制作中的声音技术05-23
网页制作技巧08-10