吕茶香网页设计与制作教案汇总.doc

教学文件 编号网页设计与制作教案科目网页设计与制作项目：项目一 认识网页和网站任务：分析网页构成授课日期第1周课时6班级电商1103教师吕茶香授课方式多媒体教学，讲授作业题数6拟用时间25教学对象分析由于是第一次上这个班的课，对于他们的了解还不是很多，对于上课内容尽量口语化，让学生更好地接受。学习目标知识1、了解网页的构成2、掌握网页的布局设计使用教学媒体多媒体技能1、掌握不同风格网页的布局2、熟悉网页制作工具的应用素养鼓励学生多发言，积极动脑思考重点熟悉常用网页制作工具软件难点软件工具的应用实训内容项目名称项目一 认识网页和网站工具器材多媒体教学回顾大家都知道在第一次课给学生上课时应该让学生留下好的印象，最好是拿出自己的法宝，使学生喜欢上自己的课，并在第一次课中应该告诉学生学该课程的重要性，以及学完后应该达到的水平，也就是教学目标要让学生明确，引起学生对本课程的学习兴趣。说明审阅： 年 月 日教 学 过 程教学环节教学过程（教学内容和教学方法）时间分配上课时间：第一周第一次课（一次课为2课时） 内容：一、组织教学（10分钟）1、起立，检查学生出勤情况； 2、打开教材。首先自我介绍及与同学们沟通。二、导入设计1、提问：同学们一般是利用网络做什么？（10分钟）查资料、玩游戏、看电影、找工作、淘宝2、打开并展示几个常用网站（比如：*的博客、网易、校园网、论坛、淘宝网等），吸引学生的注意力，同时说明网络与生活的密切关系。信息在网络上传播和表达，往往是通过网页这个载体。我们这门课程学的是如何制作和美化网站。希望通过三个学期的努力，我们同学中的大部分人，可以制作出具有一定功能的漂亮的网站。到时候，你可以帮你邻居家的叔叔阿姨制作他们公司的企业网站，也可以设计一个属于自己的个性网站，把它挂到自己申请的空间上，让你的亲朋好友来访问。这次课我们先来认识网页和网站。三、新课内容（50分钟）课程名称：网页布局赏析（1）请学生带着以下问题阅读P12知识预读1，问题如下：A.什么是网页？B.什么是网站？C. 什么是网站首页，一般首页文件名怎么取？D. 网页有哪些分类？如何区分不同类别的网页。E. 根据网站内容的不同，网站有哪些分类？ （2）教师提问，请学生一一回答以上问题。期间对回答问题的同学要多多表扬，如“你真棒”。增强学生对教师的亲和力。（3）教师在学生回答问题的同时，总结评价并补充相关要点。（4）学生自学教材第3页至第4页的内容，由学生分析中国奥委会的官方网站（）的基本结构。（5）教师提问，并总结补充。（6）教师讲解分析网页组成元素的类型，（详见教材第4页至第5页的内容）。（7）学生完成任务一对照练习第5、6两题。个别点名回答，检验教学成果。（8）教师演示如何绘制网站结构图，（详见教材第5页至第6页的内容）。操作要点及注意事项（略）四、小结与作业：（10分钟）小结：略作业：1、什么是网页和网站2、网页页面的基本结构3、网页页面组成元素的类型实训操作：利用PS制作书中练习题1上课时间：第一周第二次课（一次课为2课时）内容：一、组织教学（10分钟）1、起立，检查学生出勤情况； 2、打开教材P5。二、复习导入（10分钟）提问： 网页的布局一般分为哪七种？ 三、新课内容（50分钟）课程名称：认识常用的网页制作软件（1）教师提出新的问题：如何获取与安装这些网页制作软件（2）教师演示从网上下载网页制作软件DreamWeaver8，（网址详见教材第9页）。（3）教师演示网页制作软件的安装，（详见教材第9页至第10页的内容）。（4）让学生自主操作练习，获取与安装已有的网页制作软件。说明：没有网络支持条件的，可以播放视频文件“认识常用的网页制作软件.wmv”。（5）请学生回答任务二对照练习第1题。（6）教师再次提出问题：如何启动和退出这些网页制作软件（7）让学生上台完成这些问题（8）教师总结并演示网页制作软件的启动和退出，（详见教材第10页的内容）。（9）由学生完成任务二对照练习第4，5题。（10）教师提出问题：a、除了书上介绍的网页制作软件，还有哪些网页制作软件？b、这些网页制作软件有什么区别，各有哪些特点？（11）学生在网上搜索查找问题答案。（三）小结和作业：小结：（1） 认识常用的网页制作软件（2） 网页制作软件的获取方法及安装（3） 常用网页制作软件的启动与退出作业：反复应用网页制作常用软件上课时间：第一周第三次课（一次课为2课时）内容：认识常用的网页制作软件一、组织教学（10分钟）1、起立，检查学生出勤情况； 2、打开教材P6。二、复习导入（10分钟）提问： 网页制作常用工具有哪几个？ 三、新课内容（50分钟）课程名称：认识常用的网页制作软件（1）请学生带着任务二对照练习2、3两题，阅读P89知识预读2；（2）请学生一一回答以上问题。（3）教师总结评价并补充相关要点。（4）教师演示从网上下载网页制作软件DreamWeaver8，（网址详见教材第9页）。（5）学生回答任务二对照练习第1题。（6）教师演示网页制作软件的安装，（详见教材第9页至第10页的内容）。（7）请学生将已有软件安装起来。说明：没有网络支持条件的，可以播放视频文件认识常用的网页制作软件.wmv。（8）教师演示网页制作软件的启动和退出，（详见教材第10页的内容）。（9）由学生完成任务二对照练习第4题。四、小结和作业：（10分钟）小结：（1） 了解有哪些网页制作软件，各有哪些功能（2） 学会获取、安装网页制作软件（3） 学会各软件的启动与退出作业：利用PS制作一个Logo.要求：高宽为1003*800利用PS制作一个Banner.要求：高宽为500*1024网页设计与制作教案科目网页设计与制作项目：项目一 认识网页和网站任务： 设计基本网页框架 授课日期第2周课时6班级电商1103教师吕茶香授课方式多媒体教学，讲授作业题数6拟用时间25教学对象分析通过第一周上课时对学生的了解，大部分同学对网页设计与制作这门课程感兴趣，但学生没有一点网页的知识，只会浏览网页。学习目标知识1、理解框架结构的含义和用途； 2、掌握建立框架网页的方法； 3、掌握框架属性的设置方法； 4、掌握框架网页的保存方法。使用教学媒体多媒体技能1、掌握建立网页框架及设置框架属性的能力； 2、能够应用网页框架建立简单的网页。素养鼓励学生积极动脑思考，加强学生动手能力重点1、网页框架的建立。 2、理解“设置初始网页”和“新建网页”的含义。难点软件工具的应用实训内容项目名称项目一 认识网页和网站工具器材多媒体教学回顾上课时所有资料内容均为本人悉心收集,全部是文档中的精品。说明审阅： 年 月 日教 学 过 程教学环节教学过程（教学内容和教学方法）时间分配上课时间：第二周第一次课（一次课为2课时） 内容：一、组织教学（10分钟）1、起立，检查学生出勤情况； 2、打开教材P17。二、导入设计1、提问：PS中你学会了使用哪些工具制作什么效果（10分钟）利用PS做三、新课内容（50分钟）课程名称：设计基本网页框架（教师示范操作）操作一：网站Logo制作1、 运行PS CS32、 新建文件3、 加入素材，调整位置4、 设置地球发光效果5、 输入文字学生练习操作操作二：网站Banner制作1、 在Logo下方绘制一个矩形2、 打开素材并调整大小及位置3、 用仿制图章工具将两张图片融合4、 输入文字5、 调整Logo和Banner的位置学生练习操作四、作业：（10分钟）1、将老师示范操作内容独立做一遍，请反复修改达到最佳效果。2、利用PS制作一个网幅广告上课时间：第二周第二次课（一次课为2课时） 内容：一、组织教学（10分钟）1、起立，检查学生出勤情况； 2、打开教材p11。二、导入设计1、提问：你学会了用什么软件做网页的什么元素？（10分钟）利用Photoshop做Logo和Banner。三、新课内容（50分钟）课程名称：设计基本网页框架（教师示范操作）操作一：导航条制作1、 用圆角矩形工具在Banner上部为导航条加底色2、 复制图层作为导航条的顶色3、 输入文字知识链接、学生练习操作操作二：网页框架搭建 1、 分别使用矩形选框工具和圆角矩形工具分割网页的布局并填充灰色，中间用直线工具平均分布。2、 用矩形工具加阴影效果3、 加入素材中的文件并调整位置和大小4、 用矩形选框工具和自定形状工具制作小图标5、 输入文字学生练习操作四、作业：（10分钟）1、将老师示范操作内容独立做一遍，请反复修改达到最佳效果。2、利用PS制作一个简单的网页上课时间：第二周第三次课（一次课为2课时） 内容：一、组织教学（10分钟）1、起立，检查学生出勤情况； 2、打开教材P17。二、导入设计1、提问：你学会了用什么软件做网页的什么元素？（10分钟）利用Photoshop做Logo、Banner和框架。三、新课内容（20分钟）课程名称：设计基本网页框架（教师示范操作）操作：网页切片输入1、 用切片工具将网页图片切割成若干部分2、 “文件”/“存储为Web和设备所用格式”/“存储”3、 PS中的网页已经制作完成，下次将在Dreamweaver中对切割好的图片进行整理，制作成网页。知识链接、学生练习操作四、项目实训（30分钟）1、儿童网站首页设计布局2、儿童子站首页设计布局五、作业：（10分钟）1、将老师示范操作内容独立做一遍，请反复修改达到最佳效果。2、应用所学的知识完成企业网站的设计制作，如P21图所示。网页设计与制作教案科目网页设计与制作项目：项目二 网页色彩运用任务： 任务一 认识色彩授课日期第3周课时6班级电商1103教师吕茶香授课方式多媒体教学，讲授作业题数6拟用时间25教学对象分析本课程授课对象具有一定的动手能力和分析能力，学习积极性较强，但前期所学专业课程少，专业基础薄弱，虽然对网页有所了解，但对于实践缺乏深入的认识。学习目标知识色彩三个要素:色相, 明度, 纯度的特点以及用处.和特性.使用教学媒体多媒体技能网页色彩搭配的技巧素养培养学生的综合能力重点网页色彩搭配的技巧难点网页色彩搭配的技巧实训内容项目名称项目二 网页色彩运用工具器材多媒体教学回顾学习理论前，学生欣赏有关视频，让学生眼界大开。说明审阅： 年 月 日教 学 过 程教学环节教学过程（教学内容和教学方法）时间分配上课时间：第3周第一次课（一次课为2课时） 内容：任务一 色彩的三要素一、组织教学（10分钟）1、起立，检查学生出勤情况； 2、打开教材P23。二、导入设计1、提问：当你打开一个网站时，留下的第一印象是什么（10分钟）不是网站的内容也不是网站的版面布局，而是网站的色彩。三、新课内容（50分钟）课程名称：色彩的三要素1、当我们漫步在公园里,花坛里的鲜花,有白色、黄色、橙色、粉色、红色、紫色有的鲜艳，有的柔和，有的明亮，有的深暗，让人眼花缭乱。人们对自然界的色彩表层的观察，正是对色彩色相、明度、纯度三种性质的感性认识。对专业设计者来说，置身于浩瀚的色彩世界，不断探索色彩构成的基本要素；色相、明度、纯度的性质和相互关系，从而把对色彩的一般了解，升华到理论与审美的高度，掌握色彩构成的原理、规律、方法，从而创造出美的色彩是非常必要的。2、色彩三要素的作用：色彩三要素是色彩最基本的属性，是研究色彩的基础，也是最重要的概念。3、色相：指的是色彩的基本特征，它是区别色彩的最重要的依据。明度：也叫亮度，指的是色彩的明暗程度。纯度：指色彩的纯净程度，也就是色彩的饱和度。色相、明度、纯度它们是研究色彩的基础 四、作业：（10分钟）观察企业网站的色彩运用，总结特征及运用各色彩的原因上课时间：第3周第二次课（一次课为2课时） 内容：任务二 网页色彩搭配一、组织教学（10分钟）1、起立，检查学生出勤情况； 2、打开教材29。二、导入设计1、提问：网页色彩三要素是哪三要素（10分钟）色相、明度、纯度三、新课内容（50分钟）课程名称：任务二 网页色彩搭配一网页色彩搭配的原理 1.色彩的鲜明性。网页的色彩要鲜艳，容易引人注目。 2.色彩的独特性。要有与众不同的色彩，使得大家对你的印象强烈。 3.色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。 4.色彩的联想性。不同色彩会产生不同的联想，蓝色想到天空，黑色想到黑夜，红色想到喜事等，选择色彩要和你网页的内涵相关联。 二.网页配色忌讳 1.不要将所有颜色都用到，尽量控制在三种色彩以内。 2.背景和前文的对比尽量要大，(尽量不要用花纹繁复的图案作背景)，以便突出主要文字内容。三背景与字体的搭配经验 浅绿底黑字，或白底蓝字都很醒目，但前者突出背景，后者突出前景。红底白字醒目，较深底色配黄字有效果。四、作业：（10分钟）思考练习题（书第37页中）根据色彩的认识，试为环保网站设计布局和颜色。上课时间：第3周第三次课（一次课为2课时） 内容：项目实训一、组织教学（10分钟）1、起立，检查学生出勤情况； 2、打开教材P35。二、导入设计（10分钟）提问：网页色彩搭配技巧有哪些？用一种色彩、 用两种色彩、用一个色系、用黑色一种颜色。 三、新课内容（20分钟）课程名称：项目实训（教师示范操作）实训一 设计化妆品网站的首页实训二 设计化妆品网站的子页四、项目实训（30分钟）根据对色彩的认识，试为环保网站设计布局和颜色制作要求：1、首页包括内容有Logo、Banner和导航菜单、环保宣传栏、网站重点栏目简介、投票栏、友情链接和版权说明等2、子页根据导航菜单进行设计，不同版面选择合适的色彩五、作业：（10分钟）1、将老师示范操作内容独立做一遍，请反复修改达到最佳效果。2、应用所学的知识完成网站的设计制作。网页设计与制作教案科目网页设计与制作项目：项目二 网页色彩的运用任务： 网页色彩搭配授课日期第4周课时6班级电商1103教师吕茶香授课方式多媒体教学，电子教室（机房）作业题数6拟用时间25教学对象分析通过第三周的操作训练，同学对网页设计与制作有了进一步的了解，同时也对网页色彩也有了一定的认识，接下来的课程可以学习一下如何进行网页色彩的搭配了。学习目标知识1、网页色彩搭配基本方法； 2、网页色彩搭配技巧； 3、Photoshop软件工具的应用。使用教学媒体多媒体技能1、了解网页色彩搭配基本方法； 2、掌握网页色彩搭配技巧。3、掌握如何表达和传递色彩的内涵素养培养学生色彩分辨能力，熟悉网站色彩搭配重点1、理解网页色彩搭配方法。 2、掌握网页色彩搭配技巧。难点色彩搭配技巧实训内容项目名称项目二 网页色彩运用工具器材多媒体教学回顾本教学开放了教学时空，课前让学生收集相关信息，然后在课堂上通过多渠道交流了信息。说明审阅： 年 月 日教 学 过 程教学环节教学过程（教学内容和教学方法）时间分配上课时间：第4周第一次课（一次课为2课时） 内容：一、组织教学（10分钟）1、起立，检查学生出勤情况； 2、复习回顾上一节内容。二、导入设计1、提问：日常生活中常见的颜色搭配有哪些（10分钟）三、新课内容（40分钟）课程名称：一. 网页色彩搭配方法色彩的运用和搭配是网站带给访问者的首要印象，通过色彩搭配的学习，掌握如何表达和传递色彩的内涵。1. 同种色彩搭配2. 邻近色彩搭配3. 对比色彩搭配4. 明度推移色彩搭配5. 纯度推移色彩搭配6. 色相推移色彩搭配二网页色彩搭配技巧1、用同一种色彩2、用两种色彩3、用一个色系4、用黑色一种颜色四、作业：（20分钟）1、讨论:网页配色要注意哪几个方面？2、思考：什么叫网页风格？上课时间：第4周第二次课（一次课为2课时） 内容：一、组织教学（10分钟）1、起立，检查学生出勤情况； 2、打开教材p35，预习。二、导入设计1、作业讲解：网页配色应注意哪些方面？（10分钟）三、项目实训（30分钟）实训一：设计化妆品网站首页（教师示范操作）【要求】：化妆品网站在色彩上要体现女性的柔美和含蓄，色系可选择能显示这一特点的颜色。【实训目的】1. 进一步掌握网页配色的基本方法2. 进一步掌握网页设计中色彩基调的选择【步骤分析】1. 选择紫色系的两个颜色做网页的分割，以确定网页的色彩基调。2. 导航条选用色带中与紫色相邻的颜色，以丰富页面色彩,增加色彩对比。3. 网页中部图片元素的选择也遵循紫色系的基本色调，背景颜色选用浅灰色，文字以紫色和灰色的搭配，展现含蓄和优雅。4. 网站LOGO文字选用深紫色，底色选用浅紫色，用加强明度的对比突出网站形象。5.学生练习操作四、作业：（30分钟）1、将老师示范操作内容独立做一遍，请反复修改达到最佳效果。2、利用PS制作网站首页（练习色彩搭配）上课时间：第4周第三次课（一次课为2课时）内容：一、组织教学（10分钟）1、起立，检查学生出勤情况； 2、打开教材p36，预习。二、导入设计1、作业讲解：化妆品网站首页的设计（10分钟）三、项目实训（30分钟）实训一：设计化妆品网站子页（教师示范操作）【要求】：保持首页既定的色彩基调上，进行子页布局和色彩的设计。【实训目的】1.进一步掌握网页配色的基本方法2进一步掌握色彩在保持网页风格统一中的作用。3.进一步熟练PS软件的使用【步骤分析】1将首页中的导航和图片，移到页面的左侧，中间部分背景选择淡紫色，增加整体色彩的统一。2网页右侧绘制白色矩形，添加外发光效果，页面上绘制圆环和灰线，作为放置文字内容的位置，圆环的色彩与导航条的颜色想呼应。3添加右上角的文字，丰富页面结构。小结:除上述版式设计外，也可根据自己的设计来布局整个网站，全面提高对网页布局和色彩的实际运用。四、作业：（30分钟）1、将老师示范操作内容独立做一遍，请反复修改达到最佳效果。2、利用PS制作化妆品网站子页（色彩搭配）局域网管理教案科目网页设计与制作项目：项目三用表格布局页面任务：任务一 插入表格授课日期第6周课时6班级1103电子商务教师吕茶香授课方式多媒体教学，讲授作业题数3拟用时间50教学对象分析本课程授课对象具有一定的动手能力和分析能力，学习积极性较强；但前期所学专业课程少，专业基础薄弱，虽然对计算机专业有所认识，但对计算机网络缺乏深入的认识。学习目标知识认识Dreamweaver 8的界面使用教学媒体多媒体电脑房技能了解Dreamweaver 8 操作环境素养鼓励学生多发言，积极动脑思考，培养学生动手能力重点Dreamweaver 8界面难点Dreamweaver 8界面实训内容项目名称用表格布局页面工具器材多媒体教学回顾学习理论前，学生欣赏有关视频，让学生眼界大开。说明审阅： 年 月 日教 学 过 程教学环节教学过程（教学内容和教学方法）时间分配上课时间：第6周 第一次课（一次课为2课时）内容：Dreamweaver 8界面一、组织教学（10分钟）1、起立，检查学生出勤情况； 2、打开教材。二、提问：常用的网页编辑工具有哪些？（10分钟）三、新课内容：（50分钟）课题：Dreamweaver 8 操作环境1、启动与退出启动：开始菜单启动或桌面启动。退出：从“文件”菜单中选择“退出”或直接单击窗口右上角的关闭按钮。2、界面介绍启动Dreamweaver 8 后，可以看到Dreamweaver 8是由标题栏、菜单栏、工具栏（插入、文档、标准） 、网页编辑窗口、属性面板及浮动控制面板组成。界面如图所示。（1）窗口界面组成（2）工具栏的显示/隐藏：“查看”/“工具栏”命令/插入、文档、标准。（3）浮动面板组的显示/隐藏：在“窗口”菜单中选择。（4）“插入”工具栏：A、有两种显示方式（显示为菜单和显示为制表符）。B、有常用、布局、表单、文本、HTML、应用程序、Flash元素、收藏夹8类按扭组。（5）展开和折叠面板组：在文档编辑窗口和浮动控制面板间有可以展开和折叠其他功能面板的按钮四、作业：（10分钟）观察界面组成，总结与其它软件的不同之处。上课时间：第6周 第二次课（一次课为2课时）内容：创建站点及网页一、组织教学（10分钟）1、起立，检查学生出勤情况； 2、打开教材。二、提问：（10分钟）Dreamweaver 8的界面由哪几大部分组成？三、新课内容：（50分钟） 课题：创建站点及网页1、新建站点（1） 启动Dreamweaver 8后，单击“站点”，选择“新建站点”，打开“站点定义”对话框，选择“高级”选项卡，在分类中选择“本地信息”（2）在“本地信息”中，输入”站点名称“（如心灵网站），选择”本地根文件夹“（E:项目实例心灵网站