第一节Web技术与网站制作流程

第一节Web技术与网站制作流程【教学目的】知识与技能：1、了解http、HTML、URL分别代表什么意思；2、了解Web技术的发展历程；3、了解开发网站需要经过的基本流程；4、进一步了解网页湾站的相关知识；5、了解一些常用的网站制作工具；6、增强对网络的认识。过程与方法：教师演示学生互助学习情感态度与价值观：培养学生互助的精神以及热爱科学技术的精神。【教学重点难点】教学重点：了解http、HTML、URL的含有以及他们的关系。Web技术发展历程。教学难点：了解http、HTML、URL的含有以及他们的关系。【教学地点】学生多媒体教室【教学课时】一课时【教学过程】一、导入新课同学们都接触了网络，感受到了网络的无穷魅力，但早期的网页中的内容远没有如此丰富。今天我们通过对web技术基本概念、发展历程和网站制作流程的学习，进一步了解网页与网站的相关知识。二、学习新课1、学生快速浏览教材明确学习任务：a、了解http、HTML、URL代表什么？b、web技术的发展过程。c、网页制作的软件。2、网站的基本概念打开浏览器，进入。即“万维网”通常简称为web。HTTP协议是什么？我们在浏览器的地址栏里输入的网站地址叫做URL(UniformResourceLocator，统一资源定位符)。就像每家每户都有一个门牌地址一样，每个网页也都有一个Internet地址。当你在浏览器的地址框中输入一个URL或是单击一个超级链接时，URL就确定了要浏览的地址。浏览器通过超文本传输协议(HTTP)，将Web服务器上站点的网页代码提取出来，并翻译成漂亮的网页。因此，在我们认识HTTP之前，有必要先弄清楚URL的组成,例如：。它的含义如下：①http://：代表超文本传输协议，通知baidu.com服务器显示Web页，通常不用输入；②：代表一个Web（万维网）服务器；③baidu.com/：这是装有网页的服务器的域名，或站点服务器的名称；④浏览器：用来进行网页浏览的一种软件。⑤HTML：服务器存储着信息资源，这些信息资源主要由超文本标记语言描述的网页构成，超文本语言即HTML语言，浏览器的工作就是通过http协议来翻译这些标记语言即HTML，形成我们眼前漂亮的网页。如，百度首页的HTML代码：3、web技术发展历程⑴静态网页：只能包括单纯的文本内容，浏览器也只能显示呆板的文字信息。⑵Web2.0时代这是我们今天所看到的所使用到的web技术，它由单纯的“读”向“写”、“共同建设”发展；由被动接受信息到主动创造信息进步……4、常用网页制作软件⑴Word和powerpoint等办公软件可以直接将制作出的文档转换为网页。⑵常用网页制作软件：Dreamweaver、frontpage、HotDogProfessional、Homesite。我们本学期要涉及Dreamweaver网页制作软件工具。三、学生讨论，打开各常用互联网资源观察，巩固所学内容。四、习题判断下列说法的正误。1、HTTP是超文本标记语言的英文简写。（）2、URL是统一资源定位器的英文简写。（）3、利用word和记事本可以制作简单的网页。（）蓝图规划——主题网站规划【教学目的】1、知识目标：让学生了解网站建设的前期准备工作；学会如何规划、构思一个网站。2、能力目标：提高学生分析能力、探究能力、组织能力。3、情感目标：增进班级集体荣誉感，团队合作理念以及同学友谊。4、价值目标：培养学生自信心及个性化发展。【教学重点及难点】本节的重点有：需求分析、确定主题、制定计划表。本节的难点是：确定恰当的主题、制定一个切实可行的规划表。如何制定切实可行的规划表，循序渐进地完成整个网站的建设是为创建风格独特的个人网站打下基础。因为这一时期学生的思维能力、团队合作能力较差，而网站制作需要确定网站的功能以及网站规模、投入费用、进行必要的市场分析等，这些都需要分组讨论，而且以后主题网站的制作也需要多人合作，所以教师必须协调好学生找到具有共同主题兴趣的学生一起合作。【教学资源】1、硬件：多媒体网络电脑室；软件：安装MacromediaDreamweaver4网页制作工具。2、制作一个网站（一定要漂亮）。3、准备好规划表格印发学生。4、下载几个不同类型的优秀网站为教学参照。5、提供相关案例需求分析供学生参考。6、提供优秀网站地址供学生比较。【教学策略及设置思路】本节内容是网站制作的第一步，详细地规划网站将为今后的网站建设提供一个总体框架，使网站的建设有“轨”可循，在具体实施过程中按部就班、循序渐进地完成整个网站的建设，而合理的规划与精美的设计是网站成功的关键，因此我采用了包括情景引导法、比较法、演示法、分组讨论法、探究法等教学方法，辅之以班级间、班级内竞赛的方式，把各班级、各小组的规划进行比较打分，并进行适时的小结、分析，这样即能调动学生兴趣，又能让学生在讨论中学习、在竞赛中进步，而且广开学生思路，达到预定的教学目标。【教学过程】第一节课一、引入打开几个不同类型的优秀网站，让学生欣赏，教师指出各网站的设计风格、整体规划、素材的运用、颜色的运用等特点，引发学生兴趣，并指出其实这些网站我们都能制作，并有可能比它们做得更好，增加学生学习网站的信心。接着打开教师做好的网站，教师的网站一定要创意新颖、设计独特、漂亮，让学生的目光一下子集中到这个网站上，使学生对你钦佩和崇拜（这是教师上好网站制作课的关键）。通过这样的引入，学生表现出了空前的兴趣，都想一显身手，迫不及待的要求老师马上教他们，这时教师适时进入新课程。二、提出问题教师提出问题：（教师把学生分4个小组，每排电脑为一小组，每小组由一名学生做主要回答，一名做补充）1、什么是网站？（引入网站基本概念）2、网站有什么功能？（为网站需求提前定义）3、刚才教师的网站主题是什么？网站名是什么？（为网站主题加深印象）4、刚才教师的网站用了那些素材？这些素材你们能找得到吗？（让学生明白制作网站以前学习的电脑知识现在有用武之地了）三、学生分组讨论及回答教师组织学生讨论，并让小组回答，每小组回答完后教师都作点评。四、基本概念讲解教师花几分钟时间给学生讲解网站、网页、主页、网站结构等基本概念。五、需要分析教师指出制作网站的目的，并提供几个需求给学生参考：1、湖南省湘潭市著名的旅游胜地韶山，为提高知明度，想请你帮助他们建立一个网站。2、湖南省湘潭市想把他们市介绍给全国，让国内外的企业来投资，想请你帮助他们建立一个网站。3、湖南省湘潭市第三中学中学跆拳道协会想把他们的协会向全市展示，想请你帮助他们建立一个网站。4、湖南省湘潭市初二（1）班想把他们班的成绩、作品等制作成一个网站放在校网内，想请你帮助他们建立一个网站。教师要让学生广开思路，可小组讨论，也可一对一讨论，教师要明确指出需要分析与网站主题的关系。六、布置任务教师发放网站规划表，指导学生如何填写表格，并要求学生自己思考，学生可根据自己自身的兴趣、特长、爱好出发来确定网站的主题。课后填写，下一节课带来。七、小节教师对本节课进行小结第二节课一、收集网站规划表（可在课前）教师安排各小组组长收集网站规划表，并按主题内容分类好。二、教师分组、确定小组主题教师根据学生的网站规划表对学生进行分组，分组时尽量做到每组不少于2名学生，不超过6名学生，并可根据学生友谊进行调配，做到学生满意。三、范例讲解教师根据学生的网站规划表进行范例讲解，对不合理、难以完成的主题也要解释清楚。四、学生按新分组讨论、探究学生按新分小组进行讨论。教师给每小组发放2份初步网站规划表，2分最终网站规划表。教师巡回指导小组讨论、填写规划表，并对他们不同的主题有不同的要求。五、学生评价每个小组的规划表都要上台展示给其它小组，让大家评价，小组成员可根据评价结果完善最终网站规划表。六、确定网站名称教师指导学生可根据小组主题、兴趣、爱好等确定网站名称。网站名称必须合法、合理、合情。七、教师评价教师对各小组网站规划表进行评价，并展示其它班级的作品，同时指出优缺点。明确各小组的规划要在年级内、班级内进行打分比赛，要求学生最终完善网站规划表。并把本班优秀的规划表张贴在电脑室公示栏，让学生自己去评价。【课余练习】教师提供一些优秀网站地址给学生上网进行比较参考，进一步完善规划。破土动工——建立站点【教学目标】知识目标：建立网站文件夹和新建网站的主页。技能目标：1．认识启动FrontPage，熟悉FrontPage软件环境；2．建立网站空站点并新建保存主页；情感目标：教学中以简易地操作技能帮助学生树立成功建站的信心。【重点难点】教学重点：本课教学重点是启动FrontPage，在熟悉FrontPage软件环境的基础上建立网站空站点并新建保存主页。教学难点：本课的教学难点站点文件夹的理解。学生在理解上有一定的困难，他们一般不太理解为什么要用上文件夹来存放网页，这里教师需要作解释。【环境与素材】1．教学环境：多媒体网络教室，学生计算机中安装IE5.0以上版本及MacromediaDreamweaver，要求能上因特网。2．教学素材：准备示例网站以及首页相关的文字图片素材。【教学思想】由一个网站演示入题，激发学生学习兴趣；通过与Word界面的比较，学生讨论让他们体会到原来FP同Word差不多，将悬着的心放下；接着进行建立一个站点文件夹，这时能过教师演示，讲解，学生操作；再进行建立网站主页，保存，同Word操作的比较，让学生了解与Word些许不同的地方；最后通过分层教学，布置新建主页的一些基本的图文件混排。以上一系列的设置都是为了让学生树立成功建站的信心。【教学过程】引入：将示例学生网站“蓝色阳光”展现在学生的面前。请同学们踊跃发言，谈谈自己的爱好，理想，特长等等。好，从今天开始大家可以尽情的展现自我的个性，发挥你的专长，向全世界宣告：我来了！那么我们能通过什么来展示呢，当然方法可以是多种的，今天我们就用做网站来实现。建网站可以借助于工具软件，如MarcromediaDreamweaver、东方网页王等都是目前流行的网页制作工具。我们今天用相对简单的软件MarcromediaDreamweaver来作为网页制作的平台。任务一：找一找2个同学一小组启动MarcromediaDreamweaver和MicrosoftWord，谈谈它们的区别。情况一：学生找不出。师提示（视图栏、文件名、状态栏、分类页面选项卡）。情况二：学生回答。补充怎样快速在FP中建立一个网站呢，首先我们要做的是让各个网页及网页存在一个地方，以便以后的管理。那就是创建站点文件夹。如果没有站点文件夹，那么我们做的网站也无法上传。他就像围墙一样，将我们的网站内的所有资料围起来！演示：文件——新建——站点——空站点、指定站点位置。任务二：新建一个空站点，位置在E盘，站点文件夹名为同学们自己姓名的拼音。_private文件夹：存私人的资料，不被别人所见的；images文件夹存放网页中的图片；两个文件夹内都可以再细分类。刚才我们大家已经建好了框架，接下来的任务就需要建立网站的主页。什么是主页，homepage？首页：index.htm、index.asp、default.htm等，默认new_page_1保存可得，也可将“新建”而得。比一比：保存时同Word不同的地方，可以打开word来比较。两个学生一小组讨论。谈一谈：讨论结果个别代表发言。1、保存位置默认就在站点文件夹内；2、多了个网页标题；3、文件类型是Web页，*.htm做一做：建立自己网站的主页并保存。师：接下来我们就可以在FP中任意展现个性了。任务三：露一手简：在FP中的主页中充实文字，并保存主页文件。（文字要求：主题、栏目等）中：在FP中的主页中充实文字、图片，并保存主页文件。（要求：主题、栏目、图片等，图文之间在有一定的关联）难：在FP中的主页中充实文字、图片等内容，并保存主页文件。（要求：主题、栏目、图片等，图文之间在有一定的关联，其他内容的插入要符合实际）生总结：谈初次学习FP的感受。他同Word有何不