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

七、【学生作业及上交】未布置作业友情提示：部分文档来自网络整理，供您参考！文档可复制、编制，期待您的好评与关注！6 / 6。