网站建设与维护 为页面添加图片 站点的定义 教案.docx

《网站建设与维护 为页面添加图片 站点的定义 教案.docx》由会员分享，可在线阅读，更多相关《网站建设与维护 为页面添加图片 站点的定义 教案.docx（4页珍藏版）》请在优知文库上搜索。

1、班：三电3商务师：花宏,时间：第二、三周，星期一、三，4月5、7、限/日课题第一篇快速入门课时安排9节教学目标1、了解软件界面；2、站点的定义；3、创建第一个页面；4、为页面添加图片；5、美化文字。6、添加超级链接7、表格的使用8、层的使用9、了解时间轴学生分析刚刚接触网站建设与维护这门课程，有新鲜感，但计算机基础不是很扎实，非常需要多些练习。以及需要了解DreamWeaVerMX在网站建设与维护中的强大功能。重、难点重点：目标4为页面添加图片；难点：目标2站点的定义。教学策略实例驱动、演练结合。方法选择演示法、自主式学习法。学生活动听，看，练。反馈手段学生获得的印花个数（完成一个实例，给予一

2、个印花教具准备DreamweaverMX2004中文版、设计百例素材、凌波多媒体系统。教学过程一、新课程要求（30分钟）完成一个实例，获得一个印花二、新课引入（15分钟）如果你是初次接触DreamweaverMX,那么本篇的内容是必不可少的。本篇将介绍DreamweaverMX的操作界面、站在定义以及创建网页的最基本方法及步骤。通过本篇，你将了解如何在页面中插入图片及文字,添加超级链接,学会使用表格、层及时间线来构建页面。请重视这些内容，它们是后面进阶实例的基础。刚接触的课程，讲清本课程的作用，有利于加强学生的求知欲。教学过程三、实例讲解（360分钟）实例1了解软件界面（45分钟）在开始学习之

3、前，我们需要了解DreamweaverMX的操作界面。对于初学的朋友，你将通过本例在最短的时间内了解DreamweaverMXo实例2站点的定义（45分钟）在使用DreamweaverMX制作你的网页之前，有一项重要的准备工作一定义站点。这将使你更好地利用站点窗口对站点文件进行管理。本例将为大家讲解静态（不含数据库连接）的站点的定义方法。实例4为页面添加图片（45分钟）通过学习本实例讲解了在DreamweaverMX中插入图片及设置背景图的方法，关于页面中图片的高级应用，将在以后的实例中详细介绍。实例5美化你的文字（45分钟）适当的图片，可以令网页生色不少，但不要忘记文字才是一个网页最基本的要

4、素。本例我们将学习在DreamWeaVerMX中美化文字的基本方法。首先请在DreamWeaVerMX中打开配套光盘source55.htm,我们可以看到，页面中的文字没有经过任何处理，给人零乱的感觉。选取页面中的一段文字，此时的属性窗口显示如图5.1所示。其中，FOrmat一栏中可以选择几种预设的文字格式,如ParagraPh（段落）、Heading（标题）等；在图标一栏中为字体选择栏，DreamweaverMX中默认可以选择的都是英文字体，如果想选择其他字体，就要选择最底的EditFontList一项，如图5.2所示。此时将出现字体列表编辑窗口，如图5.3所示。在这个窗口的上方，你可以通过

5、按钮和来增加或删除一个字体列表；例如，我们将“宋体”重点掌握应用技巧：老师积极引导、启发学生思考让学生熟悉实例制作步骤。学生分组讨论交流，培养学生合作学习和交流的能力。教学过程添加到字体列表中的方法是：首先在FontList栏中选取Addfontsinlistbelow（增加字体列表）一项，接着，在AvailableFonts栏中选择需要加入到字体列表的宋体（你可以同时选择多个字体，实际页面中将优先显示第一种字体，当第一种无法显示的时候，显示第二种，第二种还没有，显示第三种，如此类推）；点击按钮就可以将宋体添加到字体列表，点击按钮就可以将字体从列表中移除；设置完毕后按下OK按钮，现在你就就可以

6、在文字属性面板中选择该刚才加入列表的字体了。在文字属性面板中，SiZe一栏用来设置文字大小，其中的数字越大，文字也越大。你不仅可以在图5.4所示这个调色版上选取颜色，还可以选取屏幕上的任意颜色。其中按钮可以去掉文字上的颜色，使其显示为默认颜色值；可以选择其他样式的调色板；按钮可以在扩展调色板上选取颜色，在扩展调色板中，不仅可以选取更为丰富的颜色，还可以通过填写RGB数值来选取颜色并将该颜色值保存，方便以后调用。另外，文字属性面板中的按钮分别是设置字体为粗体和斜体；按钮为设置文字的置左、置中、置右与两端对齐排列；按钮设置文字段落标号；按钮设置文字段落的缩进。相信这些功能你试用一次就会了解其效果的

7、。实例7表格的使用（45分钟）通过本例，我们学习了DreamweaverMX中表格相关属性的设置以及最简单的表格制作方法。请不要小看这点知识，它将成为读者以后架构一个漂亮网页的基本功。在以后的实例中，我们将了解到表格在页面布局的无穷魅力。实例8层的使用（45分钟）层（Layer）在网页排版和创建动态效果方面有着举足重轻的作用。我们将通过本例来了解在DreamweaverMX中创建层、设置层相关属性的方法，并使用层创建一个简单的页面。提问学生，由学生小结，然后教师重新演示课件，进行总结和补充。通过讲解突破难点：提问学生，由学生小结，然后教师重新演示课件，进行总结和补充。教学过程实例9了解时间轴（

8、45分钟）在时间线的关键帧（Keyframe）上可以设置层的位置,DreamweaverMX会自动地创建关键帧之间的运动路径。由此可以创建多个关键帧，从页创建出更加复杂的运动。四、总结实例制作经验：按照教材的分步，可以做出教材所要求的效果，再按自己的笔记，产生导师要求的效果，最后按自己的创意，把知识点真正为自己所用。五、课堂练习（45分钟）自己做实例，完成后申请印花。六、布置作业：利用视频捕捉软件，把自己制作实例的过程制成avi文件。文件名统一用自己的名字+学号+实例号。采用凌波多媒体系统的学生演示，把一些易错的地方作反面教材。作业布置注意分层，满足不同层次学生的需要。版书设计课题1了解软件界面课题2站点的定义课题3创建第一个页面课题4为页面添加图片课题5美化文字作业设计使用HyPerCam捕捉操作画面，将它保存为标准的AVI视频文件并上交。教学后记