网页设计电子教案项目备课.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 中完成网页链接图的绘制，但是不能明确地提出自己喜欢的网站的主题与名称，对网页设计这门课的了解还不够深，所以多数同学并没确定自己网站的主题，基本上是设计的个人网站。七、【学生作业及上交】未布置作业。