第一篇：动态网页制作教案
一、教学目标：
1、知识目标
（1）了解动态HTML，动态网页的概念
（2）能够实现简单的动态HTML效果，能够插入简单的javascript代码（3）掌握动态网页的特性
2、能力目标
（1）培养学生的探究学习能力（2）进一步提高学生的审美能力
3、情感目标
（1）培养学生正确评价、选择、运用信息的价值观（2）培养学生的版权意识
（3）使学生正确认识技术的两面性。
二、教学重点与难点 重点：
（1）动态HTML和动态网页的概念（2）插入简单的动态HTML特效 难点
插入javascript网页特效
三、教学过程
（一）动态HTML的概念
1、情景创设
教师：展示做好的网页，网页中有许多动态HTML的效果，问：请观察以下网页，注意哪些地方发生了动态的变化？
学生：仔细观察，发现有文字移动，背景颜色随鼠标变化等特效，兴趣大增。教师引导：同学们想不想学呢，这是什么技术呢？
2、动态HTML(DHTML)的 概念
教师给出概念：在脱离网络环境下，网页下载到浏览器以后仍能够随时变换的HTML
3、教师演示：
在FrontPage中，提供了一些动态HTML效果，教师演示操作步骤 例1：实现简单的动态HTML效果 演示:鼠标特效
方法：格式----动态HTML 教师只演示其中一个，其他例子先让学生自己探索。培养学生的自学能力。学生探索研究后，老师请先完成的同学出来演示，并讲解难点，如鼠标悬停效果。
4、学生练习
教师讲解完后，让学生继续巩固动态HTML特效，做练习一 练习一：实现简单的动态HTML效果（1）、网页加载效果
（2）、鼠标悬停效果（提供背景图片）（3）、单击（4）、双击
5、学生成果交流与评价
问：是不是动态效果越多越好呢?培养学生审美观。
让学生相互评价，哪些地方加得恰到好处，哪些地方加得不大合适？
教师总结：frontpage2000自带的动态HTML特效，实质上是在原网页上自动增加了一些代码，那么，除了frontpage2000自带的动态HTML特效，还有更丰富更具个性化的特效吗？
6、引伸：
为进一步理解动态HTML，不仅仅是ftontpage自动产生的那些，还有更加丰富更加全面各种特效，教师提供一些简单的javascript小程序，对动态HTＭＬ作一些引伸，例2：插入简单的javascript网页特效 教师演示：怎样插入“显示当前日期”的代码 强调难点：一定要注意插入代码的位置。练习二：请插入以下几个网页特效（1）、记数器（2）、显示当前时间（3）、跟随鼠标的时钟（4）、礼花背景
教师事先准备好这几个小程序，学生分组练习，分四组，每个组只要完成其中一个特效。
7、学生作品交流与评价
教师小结：这里只是插入的最简单的代码，还有一些复杂的代码在以后的章节中有要求进一步学习，javascript小程序是实现动态HTML特效的主要工具。还有css等等 注意：使用别人代码时，要注意别人的版权信息。同学们还想更多特效，教师提供以下网址，课外资源 七色风网页特效 网页特效观止 网页特效
你知道乱用javascript特效的后果吗？有些人专门编制了这种小程序，对网页产生了一些破坏作用，这是非常不道德的。
同学们对于动态HTML非常感兴趣，特鼓励同学好好专研，成为javascript的编程高手。
过渡：进一步理解动态网页的概念。动态网页不仅局限于动态HTML 还包括采用CGI、ASP、JSP、PHP、Perl等技术动态生成的页面
（二）、动态网页的概念
这里所谓的动态主要强调的是人机关系，即，按照访问者的不同需要对访问者输入的信息作不同的响应，并提供相应的信息。
教师展示网站，让学生体验良好的人机关系，这些网站主要是由asp、php等技术生成的 例3：认识几种动态网站 http://www.xiexiebang.com/platform/index.php?t=book_index_first http://www.xiexiebang.com/default_login.asp数据检索，后台数据库 http://blog.163.com/jswzb博客系统
通过演示，让学生体会到本节所说的动态网页这个“动”字的涵义，主要强调的是一种人机交流，而不是一种动画技术。
（三）、总结：静态网页和动态网页的比较 请学生讨论完成以下表格： 静态网页 动态网页
是否支持动态显示效果 无法实现动态显示效果 能实现个性化的交互功能，能否及时更新和响应 维护繁琐，不便人机交互,信息反馈 更少的刷新、更快的响应并减轻了服务器负担，维护简单，交互功能强，交流方便
是否能支持数据库 无法支持数据库 支持数据库，查询修改数据方便
第二篇：动态网页制作心得
烟台大学文经学院
姓名：
班级：
学号： 网 页 制 作 课 程 心 得题目：xxxxxx xx xxxxx xxxxxxxxxx
我制作的动态网页的主题是宣传我的家乡，通过网页将家乡的特色表现出来。通过网页可以让关注本网页的人更多的了解枣庄。还对一些热爱旅游的驴友来枣庄时可以更快的融入我们枣庄这个大家庭。
我制作的网页内容丰富。其一，包括枣庄的新闻，最新的新
闻可以使人通过现有发生的事来了解枣庄，新闻来源是枣庄最大的新闻网“齐鲁在线”，新闻真实有效。其二，有丰富的图片，图片可以说明问题，可以更好的反映枣庄的美景特色。图片来自枣庄旅游局官网。其三，有动听的音乐，收录了中国动听的音乐，有反映枣庄铁道游击队时的歌曲。其三，有中国各代在中国出现的名人。例如：墨子，奚仲，匡衡，孟尝君，兰陵笑笑生等名人的个人介绍。其四，有好的视频。是枣庄旅游宣传片，精彩不容错过。其五，有专属于枣庄的贴吧，点击链接到百度枣庄贴吧。其六，有文库，里面介绍枣庄来历，发展，枣庄人的精神。其七，包含枣庄的地图，地图上标注了枣庄的有名的旅游景点，例如，台儿庄大战纪念馆、万亩榴园、熊耳山、微山湖的景点。
动态网页设计这门课程是一门综合性很强而且非常实用的课程。包括.html、CSS、js、ajax、面向对象等等。这门课程让我了解到ASP.NET是一个统一的Web开发模型，能使用尽可能少的代码生成企业级ASP.NET网站所必需的各种服务。让我明白了如何去创建一个网站。
…表示文档头部信息。…
表示一个段落。表示换行。
表示水平线。
在制作动态网页中我学到了很多东西，懂得网页制作的许多
技巧，很容易就能制作一个简单的网页。以下我罗列出我学习到的技巧。
一、我知道如何利用超链接，现在可以灵活的利用它，明白超链接的原理。比如我可以链接到一个邮件、网站、视频等等。在网页中插入并经图片使网页更加美观。
二、明白了如何向空间中插入背景音乐，使网页变的有激情。简单了解了制作网页中的代码，并且可以写一些基础的代码来使网页得到想要的效果。
三、网页中我还插入了一些视频，并且可以让浏览人很快的应用下载视频。
四、可以向网站中插入滚动图片，滚动字幕，插入时间，插入图层等。
再现在这个年代，计算机的作用越来越重要了，人民生活办
公都离不开它，然而像这门如此深奥的知识，一般人是接触不到的。选择了这门课我感觉很高兴，接触到一些计算机知识，了解动态网页制作的基础。由于老师上课的耐心教导，我的认真听讲，使我制作出这个让我满意的作品，我很高兴很开心。说实话，对
于这门选修课我还想再上，可以让我更深的了解计算机知识，明白计算机的深奥。可惜没时间了，只能等以后自学了。
我以前总认为编程是一件很痛苦的事情，但是经过这次作
业，使我明白了编程也可以是一件很有趣的事情。想象一下：自己去构思和设计一个别人都没做过的项目那是多么的有成就感。学习网页设计不能心急，这不是一日之功，要想有比较高的造诣，没有长期的练习是达不到的。
我想我已经敲开了动态网页设计这扇大门，大门里有很多精
彩的风景需要我去浏览。当然也会有很多荆棘坎坷需要我去面对。相信只要有恒心，我终会摘到胜利的果实！
第三篇：动态网页制作心得
烟台大学文经学院
姓名：班级：学号：
网 页 制 作 课 程 心 得
题目：xxxxxx
xx xxxxx xxxxxxxxxx 我制作的动态网页的主题是宣传我的家乡，通过网页将家乡的特色表现出来。通过网页可以让关注本网页的人更多的了解枣庄。还对一些热爱旅游的驴友来枣庄时可以更快的融入我们枣庄这个大家庭。
我制作的网页内容丰富。其一，包括枣庄的新闻，最新的新闻可以使人通过现有发生的事来了解枣庄，新闻来源是枣庄最大的新闻网“齐鲁在线”，新闻真实有效。其二，有丰富的图片，图片可以说明问题，可以更好的反映枣庄的美景特色。图片来自枣庄旅游局官网。其三，有动听的音乐，收录了中国动听的音乐，有反映枣庄铁道游击队时的歌曲。其三，有中国各代在中国出现的名人。例如：墨子，奚仲，匡衡，孟尝君，兰陵笑笑生等名人的个人介绍。其四，有好的视频。是枣庄旅游宣传片，精彩不容错过。其五，有专属于枣庄的贴吧，点击链接到百度枣庄贴吧。其六，有文库，里面介绍枣庄来历，发展，枣庄人的精神。其七，包含枣庄的地图，地图上标注了枣庄的有名的旅游景点，例如，台儿庄大战纪念馆、万亩榴园、熊耳山、微山湖的景点。
动态网页设计这门课程是一门综合性很强而且非常实用的课程。包括.html、CSS、js、ajax、面向对象等等。这门课程让我了解到ASP.NET是一个统一的Web开发模型，能使用尽可能少的代码生成企业级ASP.NET网站所必需的各种服务。让我明白了如何去创建一个网站。
…表示文档头部信息。第四篇：动态网页制作与感想
在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在Internet应用上的地位显而易见，它已成为**、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。使用计算机的能力也成为当代大学生学习、生活、工作的基本要求。计算机入门不难。我们希望把计算机当成工具，而不是自己当程序员。我们只想用计算机提高设计速度和准确性，提高工作效率，减轻手工劳动的负担，这才是我们使用计算机想要达到的目的和追求的目标。
通过这两个月在学习实践中的学习和老师的指导，在制作时想想使自己的网页更加丰富多彩，在网页中插入图象，动画，动态特效。可是总遇到这样那样的问题，例如Flash动画到入Dreamweaver里，开始不明白后来才知道是在Dreamweaver里先插个层，这样就可以浏览出效果了。还有是有时上传到网页上的图片不显示，原因是它们没有在一个文件夹内。但在同学的帮助和自己摸索的情况下完成了这个实习的成果。看到了一些知名的网站开发出的网页，不仅栏目内容丰富，信息量大，而且页面图文并茂，五彩缤纷，使得网民赞叹不已，流连忘返。以我们的经验，当前的软件的功能日趋复杂，不学到一定的深度和广度是难以在实际工作中应付自如的。因此反映出学习的还不够，缺点疏漏。虚在加以刻苦钻研及学习，不断开拓视野，增强自己的实践操作技能，为以后能做出出色的网页而努力。常言道：“性急吃不了热豆腐”。建立一个网站就像盖一幢大楼一样，它是一个系统工程，有自己特定的工作流程，你只有遵循这个步骤，按部就班地一步步来，才能设计出一个满意的网站。学习时首先要找准自己的位置。要把计算机看成一种工具、一种技能，而不要被书本上那些难懂的知识以及抽象的理论概念吓倒。其次要把自己感兴趣的地方当成着眼点、突破口。其三，贵在动手这一点非常重要。最后，选择适合自己的辅助教材，坚决摒弃那些现在用不着的内容。网站设计八步骤
一、确定网站主题
网站主题就是你建立的网站所要包含的主要内容，一个网站必须要有一个明确的主题。特别是对于个人网站，你不可能像综合网站那样做得内容大而全，包罗万象。你没有这个能力，也没这个精力，所以必须要找准一个自己最感兴趣内容，做深、做透，办出自己的特色，这样才能给用户留下深刻的印象。网站的主题无定则，只要是你感兴趣的，任何内容都可以，但主题要鲜明，在你的主题范围内内容做到大而全、精而深。
二、搜集材料
明确了网站的主题以后，你就要围绕主题开始搜集材料了。常言道：“巧妇难为无米之炊”。要想让自己的网站有血有肉，能够吸引住用户，你就要尽量搜集材料，搜集得材料越多，以后制作网站就越容易。材料既可以从图书、报纸、光盘、多媒体上得来，也可以从互联网上搜集，然后把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。
三、规划网站
一个网站设计得成功与否，很大程度上决定于设计者的规划水平，规划网站就像设计师设计大楼一样，图纸设计好了，才能建成一座漂亮的楼房。网站规划包含的内容很多，如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等，你只有在制作网页之前把这些方面都考虑到了，才能在制作时驾轻就熟，胸有成竹。也只有如此制作出来的网页才能有个性、有特色，具有吸引力。如何规划网站的每一项具体内容，我们在下面会有详细介绍。
四、选择合适的制作工具
尽管选择什么样的工具并不会影响你设计网页的好坏，但是一款功能强大、使用简单的软件往往可以起到事半功倍的效果。网页制作涉及的工具比较多，首先就是网页制作工具了，目前大多数网民选用的都是所见即所得的编辑工具，这其中的优秀者当然是Dreamweaver和
Frontpage了，如果是初学者，Frontpage2000是首选。除此之外，还有图片编辑工具，如Photoshop、Photoimpact等；动画制作工具，如Flash、Cool 3d、Gif Animator等；还有网页特效工具，如有声有色等，网上有许多这方面的软件，你可以根据需要灵活运用。制作网页用的软件是Dreamweaver,Fireworks,Flash软件。Dreamweaver大大加速了网络时代电子交易应用中的项目交付。它提供了网页和表单的动态生成到企业级的解决方案，如电子商店，库存管理系统和企业内部局域网的数据库应用等功能。Fireworks是目前最流行的网页图象制作软件。只要将Dreamweaver的默认图象编辑器设为Fireworks，那么在Fireworks中制作完成网页图象后将其输出就会立即在Dreamweaver中更新。Fireworks还可以安装使用所有的Photoshop滤镜，并且可以直接导入PSD格式图象。更方便的是它不仅结合了Photoshop位图功能以及CoreIDRAW矢量图的功能，而且提供了大量的网页图象模板供用户使用，例如，网页上很流行的阴影和立体按纽等效果，只需单击一下就可以制作完成。当然，其最方便之处是，它可以将图象切割，图象映射，悬停按纽，图象翻转等效果直接生成HTML代码，或者嵌入到现有的网页中，或者作为单了的网页出现。Flash是目前最流行的矢量动画制作软件，与其他Wed动画软件相比，它具很多优点。制作的是矢量图形。只要用少量矢量数据就可以描述一个复杂的对象，而占用的储存空间只是位图的几千分之一，非常适合在网格上使用。同时，矢量图象不会随浏览器窗口大小的改变而改变画面质量。使用插件方式工作。用户只需安装一次插件，以后就可以快速启动并观看动画，而不比像Java那样每次都要启动虚拟机。Flash插件也不大，只有170KB左右，很容易下载并安装。还提供其他一些增强功能。例如，支持位图，声音，渐变色和Alpha透明等。拥用了这些功能，用户就完全可以建立一个全部由Flash制作的站点。Flash影片也是一种流式文件。这就是说，浏览者在观看一个大动画时，可以不必等到影片全部下载到本地再观看，而是可以随时观看，即使后面的内容还没有完全下载，也可以开始欣赏动画。主图是一个网页的门面，它能体现出这个网页的整体风格。
五、制作网页
材料有了，工具也选好了，下面就需要按照规划一步步地把自己的想法变成现实了，这是一个复杂而细致的过程，一定要按照先大后小、先简单后复杂来进行制作。所谓先大后小，就是说在制作网页时，先把大的结构设计好，然后再逐步完善小的结构设计。所谓先简单后复杂，就是先设计出简单的内容，然后再设计复杂的内容，以便出现问题时好修改。在制作网页时要多灵活运用模板，这样可以大大提高制作效率。
六、上传测试
网页制作完毕，最后要发布到Web服务器上，才能够让全世界的朋友观看，现在上传的工具有很多，有些网页制作工具本身就带有FTP功能，利用这些FTP工具，你可以很方便地把网站发布到自己申请的主页存放服务器上。网站上传以后，你要在浏览器中打开自己的网站，逐页逐个链接的进行测试，发现问题，及时修改，然后再上传测试。全部测试完毕就可以把你的网址告诉给朋友，让他们来浏览。
七、推广宣传
网页做好之后，还要不断地进行宣传，这样才能让更多的朋友认识它，提高网站的访问率和知名度。推广的方法有很多，例如到搜索引擎上注册、与别的网站交换链接、加入广告链等。
八、维护更新
网站要注意经常维护更新内容，保持内容的新鲜，不要一做好就放在那儿不变了，只有不断地给它补充新的内容，才能够吸引住浏览者
第五篇：网页制作教案
网页制作与设计教案
第一讲 网页设计概述....................................................................................................................3 1.1WWW和URL.....................................................................................................................3 1.2IE5的使用............................................................................................................................3 1.3 网页中所使用的技术............................................................................................................4 1.4 制作网页的基本方法............................................................................................................4 第二讲 HTML的基本标志与格式标志.......................................................................................4 2.1 HTML文档的基本结构.........................................................................................................5 第三讲 HTML的文本、图片与超级链接标志...........................................................................5 2.2 插入文字................................................................................................................................6 2.3 插入图片................................................................................................................................8 2.4 建立超级链接........................................................................................................................8 第四讲 HTML表格、表单与框架标志.......................................................................................9 2.5 插入表格................................................................................................................................9 2.6 表单的应用..........................................................................................................................10 2.7 框架窗口..............................................................................................................................10 第五讲 HTML标志综合运用案例.............................................................................................11 第六讲 DREAMWEAVER中简单WEB站点建立与管理.....................................................12 3.1 DREAMWEAVER概述............................................................................................................12 第七讲 DREAMWEAVER中静态网页设计.............................................................................13 3.2 在页面中加入文字和图像..................................................................................................14 3.3 超级链接的运用..................................................................................................................14 3.4.表格的应用.........................................................................................................................14 3.5.在网页中创建表单.............................................................................................................15 第八讲 DREAMWEAVER中动态网页设计.............................................................................15 第九讲 DREAMWEAVER综合性网页设计案例.....................................................................16 第十讲 VBSCRIPT概述.............................................................................................................17 4.1 VBSCRIPT语言简介.............................................................................................................17 第十一讲 VBSCRIPT的基本元素与输入输出.........................................................................18 4.2.基本数据类型.......................................................................................................................18 4.2.表达式和运算符.................................................................................................................19 第十二讲 VBSCRIPT的条件语句、循环语句和过程.............................................................20 4.3 VBSCRIPT基本语句.............................................................................................................20
第一讲 网页设计概述
【教学内容】
讲解网页设计的相关术语及网站制作的基本流程。【教学目的】
使学生对网站及网页有一定的认识，激发学生学习网页设计的兴趣。【教学重点】
网页设计中的若干术语。【教学难点】
理解网页设计中的若干术语。【教学方式】
讲授式、讨论式、案例分析式。【教学参考】
1、《网页设计与制作》杨尚森 曲宏山 贾文峰等著 电子工业出版社。
2、《Internet 网页工场》Wittime工作室 重庆出版社。
3、《WEB网站设计》Joel Sklar著 高等教育出版社。
4、《HTML网页制作教程》材义语编著 铁道出版社。【新课内容】
1.1 WWW和URL 1.1.1 Web的起源
Web是World Wide Web的简称，一般也称之为WWW或3W 1.1.2 Web的特点和结构
Web最大的特点是使用了超文本（Hypertext）WWW采用C/S（客户机/服务器）工作模式
在浏览器和服务器之间应用HTTP（Hyper Text Transfer Protocol，超文本传输协议）作为网络应用层通信协议 1.1.3 URL URL的完整格式
协议://主机名或IP地址：端口号/路径名/文件名
1.2 IE5的使用
Web浏览器是浏览Internet资源的客户端软件
在Windows环境下使用的浏览器主要有Internet Explorer、Netscape Navigator、Mosaic等
1.2.1 IE5的界面 1.2.2 IE5的使用
列表标志的使用。【教学方式】
讨论式、案例分析式、练习式。【教学参考】
1、《网页设计与制作》杨尚森 曲宏山 贾文峰等著 电子工业出版社。
2、《WEB网站设计》Joel Sklar著 高等教育出版社。
3、《HTML网页制作教程》材义语编著 铁道出版社。【新课内容】
2.1 HTML文档的基本结构
2.1.1 HTML语法
1、双标记
语法：
<标记>内容
2、单标记 语法：<标记> 最常用的单标记是
3、标记属性 语法
<标记
属性1 属性2 属性3 … > 例子
4、注释语句 格式
例子
2.1.2 HTML文档的基本结构 【课后小结】
通过本次课的学习,要求能熟练掌握网页面的基本标志与格式标志,并能灵活运用 列表,有序列表,无序列表标志及属性。
第三讲 HTML的文本、图片与超级链接标志
【教学内容】
讲解HTML标准中的文本、图片与超级链接标志 【教学目的】
* 使学生了解标题元素,掌握字体,上下标,及特殊字符的标志。
< EM>......，强调文字，通常用斜体。
< STRONG>......，特别强调的文字，通常用黑体。
......，以等宽体显示西文字符。
......，使文字大小相对于前面的文字增大一级。
......，使文字大小相对于前面的文字减小一级。......，使文字成为前一个字符的上标。......，使文字成为前一个字符的下标。
文本修饰 2.2.7
预格式化文本 使用预格式化标记
不再忽略在此之间的空格、制表符与回车符等元素 2.2.8 转义字符与特殊字符
一般转义符都是以“&”开始，以“；”结束，一个转义符之间不能有空格 2.2.9 文本强制换行和不换行 文本强制换行
不换行
标记
属性：Width，Size，Align，Noshade，color 2.2.11 使用列表
1、无序列表
- 列表条目1
- 列表条目2......
2、有序列表
- 列表条目1
- 列表条目2......
3、定义列表
- 列表条目1
- 条目1的说明
- 列表条目2
- 条目2的说明 ……
...... 2.4.4 图像地图 【课后小结】
本节介绍了在网页中加入文本、图片和超级链接的标志与相应属性，熟练运用这些标志是制作多媒体网页的基础。超级链接标志中，书签链接是一类特殊的链接方式，理解和使用书签链接学习HTML中超级链接标志的难点。
第四讲 HTML表格、表单与框架标志
【教学内容】
讲解HTML中制作表格、表单与框架的标志。【教学目的】
使学生掌握简单表格、表单与框架的制作。【教学重点】
* 表格中单元格的合并以及表格嵌套和叠加操作。* 框架的嵌套使用。* 表单元素标志与属性。【教学难点】
* 理解表格属性rowspan与colspan的含义以及表格嵌套实现的基本思想。* 理解框架属性name、target的意义。
* 理解表单中相应元素对应标志及属性的含义。【教学方式】
案例分析式、项目教学 【教学参考】
1、《网页设计与制作》杨尚森 曲宏山 贾文峰等著 电子工业出版社。
2、《WEB网站设计》Joel Sklar著 高等教育出版社。
3、《HTML网页制作教程》材义语编著 铁道出版社。【新课内容】
2.5 插入表格
2.5.1 在网页中插入表格
表格的基本构成元素：表头，单元格，列，行
| 第一行第一列 | 第一行第二列 |
| 第二行第一列 | 第二行第二列 |