网页设计电子教案项目备课.docx

项目一 网页概述【项目描述】 在学习制作一个网页之前，首先需要知道一些网页和网站的基本常识，培养对网页设计与制作这门学科的兴趣，了解常用的网页制作软件，熟悉网站开发的工作步骤。【教学目标】1. 师生互动，讲解网页设计与制作这门学科的发展前途，培养起教师的兴趣。2. 了解Web的由来、特征跟基本结构。3. 掌握web的常见词汇。4. 了解网站制作工具，掌握红蜻蜓抓图软件和Microsoft Office Visio 2007的基本功能。5. 熟悉网站开发的工作步骤。6. 浏览器与HTML。【项目分配】 任务一 讲解网页设计与制作这门学科的发展前景。（1课时） 任务二 认识网站制作软件。（1课时） 任务三 网站规划。（2课时） 任务四 Web简介。（1课时） 任务五 用html代码编写“我的第一个网页”的网页。（1课时）任务二 认识网站制作软件（1课时）一、【教学目标】知识目标：通过介绍网站制作工具三剑客FrontPage、Fireworks、Dreamweaver各自的功能或者优缺点后，带领学员认识并学会使用红蜻蜓抓图软件和Microsoft Office Visio 2007的基本功能。

技能目标：选择一个网页，教学生使用红蜻蜓抓图软件，分结构的把网页各个别抓到Microsoft Office Visio 2007页面中，完成网站的发力，为下一任务的学习打下坚实的基础，要求每个同学完成一个网页抓图、布局。情感目标：通过本次学习后，能培养教师对网站制作工具的进一步认识，增强学生学习网页设计的兴趣跟欲望，熟知网页制作工具帮我们设计网页带来的方便。二、【教学重点】1．认识网站制作工具三剑客FrontPage、Fireworks、Dreamweaver各自的用途并且优缺点。2．认识并学会使用红蜻蜓抓图软件和Microsoft Office Visio 2007的基本功能。三、【教学难点】学会使用红蜻蜓抓图软件和Microsoft Office Visio 2007的基本功能。四、【教学过程】 （一）明确项目任务（包括了导入项目任务跟布置项目任务）上节课，我们介绍了网页起源及其其基本构成个别，请老师来提问一下网页的基本组成部分有什么？（在手机上展示一张下载好的网站）大家想不想知道这种网页的各个个别是用哪个软件制作的？今天我们一起学习吧！（二）制定项目实行计划（项目推进）1．教师讲解示范：步骤1：介绍网站制作工具三剑客falsh、Fireworks、Dreamweaver各自的用途并且优缺点后，向学生示范安装红蜻蜓抓图软件和Microsoft Office Visio 2007。

步骤2：安装好红蜻蜓抓图软件和Microsoft Office Visio 2007后，红蜻蜓抓图软件的界面在桌面，带领学生一起找到Microsoft Office Visio 2007，并开启两软件。2．学生活动：教师演示完步骤后交由学员完成，教师做好对学员的培训检查，对做的好的学员给予引导。教师最好是先将学员进行分组，让有基础的学生做好带头作用充当小老师，这样也减少了学生的辅导量。待大部分学生做完后起初下一步讲解。3．教师讲解示范：打开一个网页（下载好的电子科大的网站），用红蜻蜓抓图软件，分别把网站的logo、导航条、横幅、版面文字内容、版尾板块抓图下来，并分别以截图保存下来。4．学生活动：让学生选择任意网站进行抓图保存。教师做巡查和培训，对后进生进行手把手操作示范，充分鼓励学员自主完成作业，鼓励组长帮助学员。5．老师讲解示范：在Microsoft Office Visio 2007窗口，单击菜单中“文件”，鼠标移至“新建”上，在列表中选取“网络”的“网站图”；把事先保存好的照片合理布局至Visio 文件中；保存绘图文件：快捷键ctrl+s以及点击菜单中“文件”，点击“保存”选项，把绘图文件（.vsd）保存至个人文件夹下。

6．学生活动：学生按照自己裁剪的照片，合理安排布局。教师做好指导，督促所有学生都可完成任务。五、【练习巩固发展】找张自己喜欢的网站，根据网页基本组成部分裁剪，并在Visio 中完成网页的布局。六、【评价与思考】本次上课，学生们学会了在Visio 中完成网页的发力，但是Visio功能超强，在上课过程中我也没有对此知识点进行扩充，导致学员用起这个工具一知半解的。七、【学生作业及上交】未布置作业。任务三 网站规划（2课时）一、【教学目标】知识目标：熟悉网站开发的工作步骤，自行设计一个网站页面的链接图。学习网站制作步骤，带领学员确定网站的主题与名称，怎样收集材料，规划好自己的网站。技能目标：基本认识网站的制作方法，为下一任务的学习打下坚实的基础，要求每个同学完成网站的主题与名称的确认，并构想网站有几个怎样的页面构成，学会布局网站基本的链接图。情感目标：通过本次学习后，能培养教师对网站制作工具的进一步认识，增强学生学习网页设计的兴趣跟欲望。二、【教学重点】1．了解网站规划中应做的预备工作。2．学会布局网站基本的链接图。3.完成网站的主题与名称的确认。三、【教学难点】1.学会布局网站基本的链接图。

2.完成网站的主题与名称的确认。四、【教学过程】 （一）明确项目任务（包括了导入项目任务跟布置项目任务）上节课，我们了解了网站制作软件，在进行页面布局时，都是用的他人做好的网页。我们最近要网站了，但是在做网站之前，我们还必须做这些装备工作呢，做网页又必须些什么呢，我们心目中的网页又是如何的呢？今天我们就一起来学习准备规划吧！（二）制定项目实行计划（项目推进）1．教师讲解示范：步骤1：网站设计是一个系统工程，具有特定的工作步骤网站规划、网站制作、网站维护，今天我们就先来说说网站的规划。网站的规划分为确定网站的主题跟名称、搜集材料和规划网站，确定网站的主题跟名称“个人网页”，规划网站的页面有主页（个人简介）、我的日志、我的荣誉、我的相册、我的好友。步骤2：在Visio 中画出这五个页面。在Visio 中新建一个绘图文档；在上面的“形状”框中用鼠标左键选中“主页”图标，拉到后面的页面上，适当调整大小；在上面的“形状”框中用鼠标左键选中“HTML”图标，拉到后面的页面上，适当调整大小（重复三遍）。2．学生活动：教师演示完步骤后交由学员完成，教师做好对学员的培训检查，对做的好的学员给予引导。教师最好是先将学员进行分组电子备课系统下载，让有基础的学生做好带头作用充当小老师，这样也减少了学生的辅导量。

待大部分学生做完后起初下一步讲解。3．教师讲解示范：在Visio 中为“主页”和四个“HTML”图标添加文字表述。单击“插入”菜单，选中“文本框”，单击“水平”，在“主页”图标下，按住滑鼠左键，向右下方拖拽，画出文本框，页面手动放大，输入“主页”二字，按“enter”（重复四遍，为我的日志、我的荣誉、我的相册、我的好友添加文字叙述）。4．学生活动：让学员按照学生的示范讲解，完成为页面添加文字叙述的任务。教师做巡查和培训，对后进生进行手把手操作示范，充分鼓励学员自主完成作业，鼓励组长帮助学员。5．老师讲解示范：对已添加文字叙述的五个页面建立逻辑上的链接。将“主页”图标与四个“HTML”图标建立链接，确定主页在上。右键点击文本空白处，选择“格式”--“线条”，点击文本空白处，即可添加一纹路；调整线条的式样，连接主页与内页。6．学生活动：学生按照页面，合理安排连接样式。教师做好指导，督促所有学生都可完成任务。五、【练习巩固发展】自行设计一个网站，确定网站的主题与名称，规划网站的页面有什么，画出网站基本的链接图。六、【评价与思考】本次上课，学生们学会了在Visio 中完成网站链接图的绘制，但是不能明确地强调自己喜欢的网站的主题与名称，对网页设计这门课的知道还不够深，所以多数朋友并没确认自己网站的主题电子备课系统下载，基本上是设计的个人网站。七、【学生作业及上交】未布置作业。