《网页制作》教案

湖南省商业技术学院学期授课进度计划（二年级第一学期）课程名称网页制作与设计适用班级16高21、22制定教师易会芝审批签字教研室主任年月日教务科长年月日教务院长年月日2017-2018学年第一学期制定课时分配授课周数周课时授课总课时其中讲课实验复习考试机动23期末完成情况计划课时完成课时超出或缺少课时超出缺少弥补教学截至章节内容备注：用蓝黑或碳素墨水钢笔填写教学计划学情分析本门课程《网页设计与制作》的教学班级为14级计算机班，计算机班对网络知识有一定的了解，基础知识较好，同时根据实际情况，特拟定本计划。大纲要求通过本学期《网页设计与制作》的学习，主要要求同学们掌握网页制作的一些基本功能和操作，为以后的一些学习和工作打下较好的基础。通过学习要求同学达到以下要求：1、了解DreamweaverCS6的详细功能及操作方法。2、熟练掌握网页制作技巧。3、掌握网页规范以及网页优化和网站推广的知识。4、明确网站建设的流程和站点建设成后需要做的优化推广工作。教学重点1、超级链接2、表格表单应用3、框架使用4、CSS样式教学难点1、超级链接2、用表格和框架布局页面3、创建数据库教学方法讲授法、演示法、项目教学法、合作学习、对话、任务驱动法、头脑风暴、小组讨论法等教学方法。学期授课进度计划表周次授课内容课时备注31.1网站基础知识21、2周新生军训1.2网站建设概述2实训新建一个网页2上机42.1添加和编辑文本2实训网站素材处理2上机实训制作简单网页2上机567国庆放假6机动补周一课82.2添加和编辑图像62.3创建超级链接2实训图像处理和创建超级链接2上机9实训跳转菜单2上机2.4使用表格布局页面2实训表格布局实例分析2上机102.5使用框架布局页面2运动会充周三到周五运动会11实训框架布局实例分析2上机3.3添加动画2添加音频和视频212实训DIV与表格的转换2上机4.3晃动的图片2实训交换图像2上机13实训拼图游戏2上机4.4修改属性特效及动态菜单制作2实训效果行为应用2上机14实训图片展播实例2上机5.1认识和编辑CSS2实训美化页面2上机15实训应用CSS到网页中2上机5.2类型、背景和区块样式2实训方框、边框和导航栏2上机16实训超链接样式及设置技巧2上机学期授课进度计划表6.1DIV布局页面26.2认识Spry217实训调整样式2上机6.3选择服务器和使用虚拟机26.4申请域名218实训网站发布2上机7.1个人主页制作27.2策划构思及设计流程219实训页面布局2上机7.3制作页面头部27.4制作中间表格内容220元旦放假2机动2充周一课22122222复习考试6教研组意见课题1.1网页制作基础知识教学课时2课时教学目标知识目标能了解网页制作软件的特点能力目标能掌握网页制作的基本概念情感目标提高学生团结合作精神，提高学生竞争意识教学重点网页的组成教学难点网页的分类，网址与域名的区分教学资源1.教学场所：多媒体教室2.教学设备：安装有Dreamweavercs5软件的计算机3.教学资料：辅助课件.多媒体教学软件教法讲解法、任务驱动教学法学法小组讨论法教学过程课前准备导入新课讲授新课动手实践课堂小结作业布置时间分配510501555教学过程过程安排教学内容教师活动学生活动设计意图课前准备1、教师自我介绍；2、点名；3、课程介绍4、课堂要求1.自我介绍2.按照花名册点名3.课程介绍4.统计学情5.提出期望与要求1.班长统计座次表2.学生自我介绍3.反应学情4.推荐课代表。使师生尽快互相认识，并促使学生答题了解我们的课程。导入新课本次课是本学期第一次上课，简单介绍本课程：1、网页设计相关级别及其薪资待遇2、网页设计的就业方向及其公司类型以提问的方式了解学生对网页设计的认知学生之间相互讨论，加深对网页设计的认识提问跟就业和薪资有关的问题，抓住学生注意力。任务一讲授新课一、网页设计介绍1、网站是企业向用户和网民提供信息（包括产品和服务）的一种方式，是企业开展电子商务的基础设施和信息平台，离开网站去谈电子商务是不可能的。2、企业的网站被称为“网络商标”，也是企业无形资产的组成部分，而网站是Internet上宣传和反映企业形象和文化的重要窗口。二、网页设计的要点1、明确建站目标和需求。2、网站主题鲜明。3、网站版式设计。4、色彩在网站设计中的作用。5、网站设计形式与内容统一。三、网站设计级别1、新手入行2、跳槽阶段3、稳定阶段4、大师阶段四、网页设计公司类型1、门户游戏类2、企业部门类3、网站建设类4、互动设计类五、网页三剑客1、Dreamweaver：可视化页面设计、网站管理简单介绍网页知识提问：网页设计要点并将学生分组进行讨论讲述网站设计级别，引导学生对这个行业向往，并鼓励学生向大师阶段努力简单介绍学生将来从事本行业的范围介绍网页制作需要的软件吸收新知识并思考生活中常见网页设计知识分组讨论，并派出代表来总结思考自己的定位了解本行业的现状认识软件基本组成讲述基础知识，为后面学习打下基础加强学生之间交流沟通能力，加深学生对网页设计要点理解引导学生了解这个行业引导学生了解本行业从事范围提前引导学生认识dreamweavercs5为后面软2、Fireworks页面图象设计工具3、Flash动画制作六、网页基础知识1、网页与网站的区别（1）网页是系统中信息的基本单位，简单来说，就是后缀名为htm的文件。（2）网站是指存放在网络服务器上的完整信息的集合体。2、网页的组成（1）文字：最直接、通用、容易的沟通方式（2）图片：网页的一大特点——图文并茂（3）动画：1995年，Sun公司开发了Java语言，用户可以创建能调用图片和声音的多媒体应用小程序（4）超链接：要通过一种方式把各独立的网页整和在一起，使之构成一有机整体，而这种链接页面的功能叫超链接。（5）特殊组件：图片与动画可算是最常见的特殊组件。3、主页Homepage引导访问者浏览网站。index、main、default4、网页空间给学生灌输网页设计的基本知识做笔记，识记教师讲述的知识件学习打下基础这些知识都是学网页设计最基本的基础知识，学生基础知识薄弱，必须了解这些才能学习后面的内容在Internet上申请的一个存储空间，用以存放网页。5、网址和域名网址：IP地址域名：与IP地址相对应，唯一性，善于识别最右边：国家（中国——cn）其次：机构（商业机构——com）再次：子网名称最左边：服务器类别（web服务器——）6、网页的分类静态页面与动态页面7、认识网站门户网站：sina个人网站：明星专业网站：医疗职能网站：政府任务二动手实践根据网页设计要点，以小组为单位确定一个网站主题，小组讨论需要的步骤以及素材巡回指导，给予学生帮助小组讨论，相互沟通加深学生对网页设计要点学习课后作业1、按照课堂分组课后进行讨论2、每组确定一个网站主题方向。3、每组设计一个网站调查问卷。课堂小结一、网页设计师就业方向二、网站设计流程三、常见网站教学反思本次课是网页设计第一次上课，主要讲述一些网页基础知识，学生基础知识薄弱，需要加强，整体来说计算机班基础知识要好于电子商务班板书一、网页设计介绍二、网页设计的要点三、网站设计级别四、网页设计公司类型五、网页三剑客六、网页基础知识课题1.2网站建设概述教学课时2课时教学目标知识目标了解做网站的准备工作，掌握站点的建立。能力目标1.能了解网站开发的基本流程。2.能掌握网站开发的基本原则。3.能学会站点的建立与管理。情感目标提高学生团结合作精神，增强小组合作能力教学重点站点的建立教学难点如何规划好一个网站教学资源1.教学场所：多媒体教室2.教学设备：安装有Dreamweavercs5软件的计算机3.教学资料：辅助课件、多媒体教学软件教法讲解法、任务驱动教学法学法小组讨论法教学过程过程安排教学内容教师活动学生活动设计意图课前准备1、搜集了解网站开发的基本流程。2、网站设计、制作过程中的一些原则、注意事项。配合学生搜索资料及解答疑问网上搜索教师提出问题，了解网站设计事项培养学生自主学习能力导入新课(5min)网站设计大致流程是哪些？每组派出一个代表阐述本组课前搜集的资料听取学生的观点并给予一定的知道阐述观点，组员之间相互讨论锻炼学生的语言表达能力和分析能力任务一讲授新课(35min)一、网站设计流程任务二分组讨论(40min)二、网站开发原则1、确定主题讨论：网站是靠什么赢利的？2、规划站点结构（1）结构设计（2）目录结构设计（3）形象设计（4）主页设计（5）其他页面设计（6）企业站点设计（7）为站点设计目标对象访问率1、确定网站主题的建议2、给网站取名3、提示决定网站的性质小组讨论，相互沟通加深学生对网页设计要点学习架构内容信息搜集整理资料规划网站结构网页制作整合网站效果测试网站上传网站推广更新维护三、网页版面布局设计1、版面布局的原则（1）主次分明、中心突出（2）大小搭配、相互呼应（3）图文并茂、相得益彰（4）动静适度、平衡对称2、页面布局的类型（1）“国”字型（2）框架型（3）标题正文型（4）封面型（5）综合型四、规划站点1、建立站点目录2、站点规划规划站点结构是利用不同的文件夹将不同的网页内容分门别类的保存。3、创建导航草图五、搜集素材1、搜集并制作素材无论是文字素材还是图片、动画素材，都应注意其来源是否注明版权所有。网站素材要为网站主题服务。2、整理素材原始素材、编辑处理好的素材3、命名规范六、创建站点1、不使用服务器技术2、本地编辑3、不连接到远程服务器七、管理站点（1）编辑现有站点（2）删除已有站点课后作业(5min)根据这次课的内容、注意事项，构思一个明确的网站主题，并将站点结构的规划用文件夹表示出来课堂小结(5min)一、网站设计确定主题二、网站设计流程三、站点管理教学反思本次主要讲述站点的建立和管理，课程较简单，学生掌握较好板书一、网站设计流程二、网站开发原则三、网页版面布局设计四、规划站点五、搜集素材六、创建站点七、管理站点实训课题新建一个网页实训课时2课时实训目标1、熟悉Dreamweavercs4界面2、制作简单网页实训重点1、学会在网页中输入文字、插入图片等2、掌握简单代码的编写实训难点代码的编写实训方法上机实训实训准备教案、素材、案例、教材、计算机机房实训要求1.对照实习报告的要求，完成上机任务；2.任务完成后及时要求教师考评；3.完善实习报告，填写实训总结；遵守实训纪律，不游戏，不睡觉，不高声谈论。实训过程内容操作要求及步骤任务一新建网页11、双击打开软件——新建HTML网页——网页名字为nes01——输入以下文字然后保存2、文字要求：标题宋体二号蓝色正文：五号宋体加粗任务二新建网页2制作如下网页素材见文件夹网页命名文字为index保存在文件夹中上交给老师操作步骤：新建HTML网页——输入文字——将标题设置为36号，蓝色，宋体——插入两根红色的水平线——插入时间——插入商标——插入背景图片——保存完善报告填写实训总结，并上交实习报告。自主练习剩余时间，可进行自主练习，内容不限，但不可违反上机纪律实训总结本次课是学生第一次上机，制作一个较简单的网页，学生存在对DW界面不熟，操作不熟练等缺点，需加强操作课题2.1编辑和添加文本教学课时2课时教学目标知识目标1、掌握输入和编辑文本2、学会插入文本，掌握设置文本格式的方法能力目标掌握网页中三种常见列表的创建，及其各自的特点情感目标提高学生自主学习和团队竞争意识教学重点插入和编辑文本教学难点创建列表教学资源1.教学场所：多媒体教室2.教学设备：安装有Dreamweavercs5软件的计算机3.教学资料：辅助课件.多媒体教学软件教法讲解法、任务驱动教学法学法小组讨论法教学过程过程安排教学内容教师活动学生活动设计意图导入新课（5min）提问：在DW中输入文本和在Word中输入文本有何区别？将学生分组，并提出问题，引导学生小组之间讨论并总结讨论并思考以讨论的形式提高学生之间的交流沟通任务一插入文本(20min)一、插入文本1、插入普通文本2、插入不换行空格3、插入水平线4、插入日期和特殊字符二、编辑