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

1、第一节Web技术与网站制作流程【教学目的】知识与技能：1、了解http、HTML、URL分别代表什么意思；2、了解Web技术的发展历程；3、了解开发网站需要经过的基本流程；4、进一步了解网页湾站的相关知识；5、了解一些常用的网站制作工具；6、增强对网络的认识。过程与方法：教师演示学生互助学习情感态度与价值观：培养学生互助的精神以及热爱科学技术的精神。【教学重点难点】教学重点：了解http、HTML、URL的含有以及他们的关系。Web技术发展历程。教学难点：了解http、HTML、URL的含有以及他们的关系。【教学地点】学生多媒体教室【教学课时】一课时【教学过程】一、导入新课同学们都接触了网络，

2、感受到了网络的无穷魅力，但早期的网页中的内容远没有如此丰富。今天我们通过对web技术基本概念、发展历程和网站制作流程的学习，进一步了解网页与网站的相关知识。二、学习新课1、学生快速浏览教材明确学习任务：a、了解http、HTML、URL代表什么？b、web技术的发展过程。c、网页制作的软件。2、网站的基本概念打开浏览器，进入。www即“万维网”通常简称为web。HTTP协议是什么 ？我们在浏览器的地址栏里输入的网站地址叫做URL (Uniform Resource Locator，统一资源定位符)。就像每家每户都有一个门牌地址一样，每个网页也都有一个Int

3、ernet地址。当你在浏览器的地址框中输入一个URL或是单击一个超级链接时，URL就确定了要浏览的地址。浏览器通过超文本传输协议(HTTP)，将Web服务器上站点的网页代码提取出来，并翻译成漂亮的网页。因此，在我们认识HTTP之前，有必要先弄清楚URL的组成,例如：。它的含义如下： http:/：代表超文本传输协议，通知服务器显示Web页，通常不用输入； www：代表一个Web（万维网）服务器；/：这是装有网页的服务器的域名，或站点服务器的名称； 浏览器：用来进行网页浏览的一种软件。HTML：服务器存储着信息资源，这些信

4、息资源主要由超文本标记语言描述的网页构成，超文本语言即HTML语言，浏览器的工作就是通过http协议来翻译这些标记语言即HTML，形成我们眼前漂亮的网页。如，百度首页的HTML代码：3、web技术发展历程静态网页：只能包括单纯的文本内容，浏览器也只能显示呆板的文字信息。Web2.0时代这是我们今天所看到的所使用到的web技术，它由单纯的“读”向“写”、“共同建设”发展；由被动接受信息到主动创造信息进步4、常用网页制作软件Word和powerpoint等办公软件可以直接将制作出的文档转换为网页。常用网页制作软件：Dreamweaver、frontpage、HotDog Professional、

5、Homesite。我们本学期要涉及Dreamweaver网页制作软件工具。三、学生讨论，打开各常用互联网资源观察，巩固所学内容。四、习题判断下列说法的正误。1、HTTP是超文本标记语言的英文简写。 （ ）2、URL是统一资源定位器的英文简写。 （ ）3、利用word和记事本可以制作简单的网页。 （ ）蓝图规划主题网站规划【教学目的】1、知识目标：让学生了解网站建设的前期准备工作；学会如何规划、构思一个网站。2、能力目标：提高学生分析能力、探究能力、组织能力。3、情感目标：增进班级集体荣誉感，团队合作理念以及同学友谊。4、价值目标：培养学生自信心及个性化发展。【教学重点及难点】本节的重点有：需求

6、分析、确定主题、制定计划表。本节的难点是：确定恰当的主题、制定一个切实可行的规划表。如何制定切实可行的规划表，循序渐进地完成整个网站的建设是为创建风格独特的个人网站打下基础。因为这一时期学生的思维能力、团队合作能力较差，而网站制作需要确定网站的功能以及网站规模、投入费用、进行必要的市场分析等，这些都需要分组讨论，而且以后主题网站的制作也需要多人合作，所以教师必须协调好学生找到具有共同主题兴趣的学生一起合作。【教学资源】1、硬件：多媒体网络电脑室；软件：安装Macromedia Dreamweaver 4网页制作工具。2、制作一个网站（一定要漂亮）。3、准备好规划表格印发学生。4、下载几个不同类

7、型的优秀网站为教学参照。5、提供相关案例需求分析供学生参考。6、提供优秀网站地址供学生比较。【教学策略及设置思路】本节内容是网站制作的第一步，详细地规划网站将为今后的网站建设提供一个总体框架，使网站的建设有“轨”可循，在具体实施过程中按部就班、循序渐进地完成整个网站的建设，而合理的规划与精美的设计是网站成功的关键，因此我采用了包括情景引导法、比较法、演示法、分组讨论法、探究法等教学方法，辅之以班级间、班级内竞赛的方式，把各班级、各小组的规划进行比较打分，并进行适时的小结、分析，这样即能调动学生兴趣，又能让学生在讨论中学习、在竞赛中进步，而且广开学生思路，达到预定的教学目标。【教学过程】第一节课

8、一、引入打开几个不同类型的优秀网站，让学生欣赏，教师指出各网站的设计风格、整体规划、素材的运用、颜色的运用等特点，引发学生兴趣，并指出其实这些网站我们都能制作，并有可能比它们做得更好，增加学生学习网站的信心。接着打开教师做好的网站，教师的网站一定要创意新颖、设计独特、漂亮，让学生的目光一下子集中到这个网站上，使学生对你钦佩和崇拜（这是教师上好网站制作课的关键）。通过这样的引入，学生表现出了空前的兴趣，都想一显身手，迫不及待的要求老师马上教他们，这时教师适时进入新课程。二、提出问题教师提出问题：（教师把学生分4个小组，每排电脑为一小组，每小组由一名学生做主要回答，一名做补充）1、什么是网站？（引

9、入网站基本概念）2、网站有什么功能？（为网站需求提前定义）3、刚才教师的网站主题是什么？网站名是什么？（为网站主题加深印象）4、刚才教师的网站用了那些素材？这些素材你们能找得到吗？（让学生明白制作网站以前学习的电脑知识现在有用武之地了）三、学生分组讨论及回答教师组织学生讨论，并让小组回答，每小组回答完后教师都作点评。四、基本概念讲解教师花几分钟时间给学生讲解网站、网页、主页、网站结构等基本概念。五、需要分析教师指出制作网站的目的，并提供几个需求给学生参考：1、湖南省湘潭市著名的旅游胜地韶山，为提高知明度，想请你帮助他们建立一个网站。2、湖南省湘潭市想把他们市介绍给全国，让国内外的企业来投资，想

10、请你帮助他们建立一个网站。3、湖南省湘潭市第三中学中学跆拳道协会想把他们的协会向全市展示，想请你帮助他们建立一个网站。4、湖南省湘潭市初二（1）班想把他们班的成绩、作品等制作成一个网站放在校网内，想请你帮助他们建立一个网站。教师要让学生广开思路，可小组讨论，也可一对一讨论，教师要明确指出需要分析与网站主题的关系。六、布置任务教师发放网站规划表，指导学生如何填写表格，并要求学生自己思考，学生可根据自己自身的兴趣、特长、爱好出发来确定网站的主题。课后填写，下一节课带来。七、小节教师对本节课进行小结第二节课一、收集网站规划表（可在课前）教师安排各小组组长收集网站规划表，并按主题内容分类好。二、教师分

11、组、确定小组主题教师根据学生的网站规划表对学生进行分组，分组时尽量做到每组不少于2名学生，不超过6名学生，并可根据学生友谊进行调配，做到学生满意。三、范例讲解教师根据学生的网站规划表进行范例讲解，对不合理、难以完成的主题也要解释清楚。四、学生按新分组讨论、探究学生按新分小组进行讨论。教师给每小组发放2份初步网站规划表，2分最终网站规划表。教师巡回指导小组讨论、填写规划表，并对他们不同的主题有不同的要求。五、学生评价每个小组的规划表都要上台展示给其它小组，让大家评价，小组成员可根据评价结果完善最终网站规划表。六、确定网站名称教师指导学生可根据小组主题、兴趣、爱好等确定网站名称。网站名称必须合法、

12、合理、合情。七、教师评价教师对各小组网站规划表进行评价，并展示其它班级的作品，同时指出优缺点。明确各小组的规划要在年级内、班级内进行打分比赛，要求学生最终完善网站规划表。并把本班优秀的规划表张贴在电脑室公示栏，让学生自己去评价。【课余练习】教师提供一些优秀网站地址给学生上网进行比较参考，进一步完善规划。 破土动工建立站点【教学目标】知识目标：建立网站文件夹和新建网站的主页。技能目标：1认识启动FrontPage，熟悉FrontPage软件环境；2建立网站空站点并新建保存主页；情感目标：教学中以简易地操作技能帮助学生树立成功建站的信心。【重点难点】教学重点：本课教学重点是启动FrontPage，

13、在熟悉FrontPage软件环境的基础上建立网站空站点并新建保存主页。教学难点：本课的教学难点站点文件夹的理解。学生在理解上有一定的困难，他们一般不太理解为什么要用上文件夹来存放网页，这里教师需要作解释。【环境与素材】1教学环境：多媒体网络教室，学生计算机中安装IE5.0以上版本及Macromedia Dreamweaver，要求能上因特网。2教学素材：准备示例网站以及首页相关的文字图片素材。【教学思想】由一个网站演示入题，激发学生学习兴趣；通过与Word界面的比较，学生讨论让他们体会到原来FP同Word差不多，将悬着的心放下；接着进行建立一个站点文件夹，这时能过教师演示，讲解，学生操作；再进

14、行建立网站主页，保存，同Word操作的比较，让学生了解与Word些许不同的地方；最后通过分层教学，布置新建主页的一些基本的图文件混排。以上一系列的设置都是为了让学生树立成功建站的信心。【教学过程】引入：将示例学生网站“蓝色阳光”展现在学生的面前。请同学们踊跃发言，谈谈自己的爱好，理想，特长等等。好，从今天开始大家可以尽情的展现自我的个性，发挥你的专长，向全世界宣告：我来了！那么我们能通过什么来展示呢，当然方法可以是多种的，今天我们就用做网站来实现。建网站可以借助于工具软件，如Marcromedia Dreamweaver、东方网页王等都是目前流行的网页制作工具。我们今天用相对简单的软件Marc

15、romedia Dreamweaver来作为网页制作的平台。任务一：找一找 2个同学一小组启动Marcromedia Dreamweaver和Microsoft Word，谈谈它们的区别。情况一：学生找不出。师提示（视图栏、文件名、状态栏、分类页面选项卡）。情况二：学生回答。补充怎样快速在FP中建立一个网站呢，首先我们要做的是让各个网页及网页存在一个地方，以便以后的管理。那就是创建站点文件夹。如果没有站点文件夹，那么我们做的网站也无法上传。 他就像围墙一样，将我们的网站内的所有资料围起来！演示：文件新建站点空站点、指定站点位置。任务二：新建一个空站点，位置在E盘，站点文件夹名为同学们自己姓名的

16、拼音。_private文件夹：存私人的资料，不被别人所见的； images文件夹存放网页中的图片；两个文件夹内都可以再细分类。刚才我们大家已经建好了框架，接下来的任务就需要建立网站的主页。什么是主页，homepage？首页：index.htm、index.asp、default.htm等，默认new_page_1保存可得，也可将“新建”而得。比一比：保存时同Word不同的地方，可以打开word来比较。两个学生一小组讨论。谈一谈：讨论结果个别代表发言。1、保存位置默认就在站点文件夹内；2、多了个网页标题；3、文件类型是Web页，*.htm做一做：建立自己网站的主页并保存。师：接下来我们就可以在F

17、P中任意展现个性了。任务三：露一手简：在FP中的主页中充实文字，并保存主页文件。（文字要求：主题、栏目等）中：在FP中的主页中充实文字、图片，并保存主页文件。（要求：主题、栏目、图片等，图文之间在有一定的关联）难：在FP中的主页中充实文字、图片等内容，并保存主页文件。（要求：主题、栏目、图片等，图文之间在有一定的关联，其他内容的插入要符合实际）生总结：谈初次学习FP的感受。他同Word有何不同。梦幻织网表格布局、插入媒体元素【教学目的】页面布局是网页制作重要环节，通过实训，让学生掌握好网页制作过程中布局原则，布局要素相关技巧。【教学重点】表格布局，框架运用，层的使用。【教学难点】1：表格布局与

18、布局表格的运用，（标准视图，布局视图） 2：框架结构的运用。 3：层的技巧运用与掌握【教学方式】演示教学，学生实际操作。【组织教学】温习前面讲学内容同学们，直到现在，我们把以前所学的知识系统整理一下：前面我们已经学习了两大主要软件 Dreamweaver和flash，其绝大多数知识要点均已接触到了，那么同学们在自己脑海里是否能够归纳成体系并灵活应用呢？教师提问：网页三剑客指的是什么？学生回答：教师总结。其中、Dreamweawer我们已经学习了哪些内容呢？1：对操作界面的认识2：站点管理器3：页面的文本设置4：图文要素的编辑便问5：表格的使用6：层与时间-轴的使用另外：初步在网页中涉及到了插入

19、多媒体元素（教师随便提示讲解后面尚未接触到的知识要点），今天的实训，我们将对以上教学知识要点进行系统合理地运用：板书课题：页面布局及其应用。讲授新知识页面布局包括以下三个方面的知识的综合应用：表格布局与布局表格；框架的应用；层的应用！（一） 表格布局：（板书）1：创建表格。演示操作步骤： 单击表格按钮插入表格对话框设置相关参数、边框设置。内距：表格中内容与边框线的距离（单位）间距：边框的宽度 确定2：表格的选取 整行或整列教师演示 选取单元格两种情况：连续单元格的选取：拖动鼠标法 不连续单元格的选取：按ctrl+单击单元格 选取整个表格：（四种方法）A：光标置内，“修改”“表格”B：按ctrl

20、+AC：光标移到左上角，会变成“+”形单击D：利用状态栏的table标识符进行选取3：设置表格的属性：A：边框设置：粗细值 ； 颜色： 010颜色 ；B边框：C间距：D对齐方式背景设置：颜色或图象4：单元格的与拆分（图象）5：在表格中加入文本与图象（略） 6：表格的格式化 步骤演示:1:插入表格,选中“命令”菜单“格式表格”2选择样式ok学生实际操作上机（一课时）教师布置上机项目：1 新建一个站点2 在站点内新建网页，标题：表格的应用3 页面设置：（背景；字体。）4 利用表格进行布局，设置表格编辑内容5 教师巡回指导。联通世界添加超级连接、设置页面属性【教学目标】： 1、知识与技能：学习在Dr

21、eamweaver中设置超级链接的方法。 2、过程与方法：任务驱动，使学生在课本的指导下，探究学习如何将网站的所有网页通过超级链接的方法组织成一个互相联系、便于访问的整体，通过自主学习、交流探讨、测试链接的过程来实现知识技能的掌握。 3、情感、态度、价值观：培养学生用系统方法分析问题、解决问题，提升其创造能力，在小组协作学习中，培养学生的团队精神。 【教学重点】： 1、根据规划，创建各网页间的链接、为互联网资源创建超级链接、为电子邮箱创建超级链接。 2、利用“超级链接”视图检查超级链接的。 【教学难点】： 为各类网页元素（文字、图片）插入超级链接； 【教学过程】： 一、 创设情景，引入课题：教

22、师出示一个网页封面，上面有“请点击进入xxxx个人网站”（没有设置超级链接），请一位同学点击，并让同学们分析为不能进入网站首页。教师引入：对！由于这个封面没有添加超级链接，所以我们无法看到网站的其它页面。超级链接时是网站的生命，有了它，不但可以方便地浏览本网站的网页，甚至还可以通过超级链接跳转到别的网站进行浏览。 这节课我们就来为自己的个人网站赋予生命超级链接。 二、新课教学 任务一：为首页制作超级链接 1、学生打开Dreamweaver，找到并打开上节课制作的个人网站首页。 学生读书，探究：为首页的导航文字（栏目）添加超级链接，将首页与子网页链接起来。 （教师投影展示插入超级链接的提示性画面

23、，以利个别学生突破难点。） 制作一个栏目的超级链接后 教师提示学生，除了使用菜单插入超级链接，你还会工具按钮或快捷菜单插入超级链接吗？ 2、小组交流：如何为文字添加超级链接。教师选两名学生示范插入超级链接的步骤和效果。 3、保存网页，预览超级链接效果。 任务二：在子网页中添加超级链接 1、师：在浏览子网页后，我们希望能回到首页，或者继续浏览其他网页，因此我们也应当为其他子网页插入一些超级链接。展示一个网站示例，让学生指出子网页超链接的方式。 教师提示：方案1：直接使用首页的导航栏链接至各页 方案2：使用“返回”文字或按钮、图标链接至主页 方案3：使用“上一页”“下一页”文字或图标链接各页 2、

24、小组内交流并实践：这三种方式你更喜欢哪一种？选择一种方式为各子网页添加超级链接。 教师指导：以上三种方案如何实现？ 方案1：将首页的制作了超级链接的导航栏复制到子网页。 方案2：插入图片并为它添加超级链接；插入“组件-悬停按钮”并添加超级链接。 方案3：可结合以上两种方法。 学生操作：完成各页的超级链接设置。 3、评一评：保存网页，点击工具栏“在浏览器中预览”进入浏览器预览方式，看看谁的超级链接做得更漂亮，让学生说出自己最喜爱的超级链接方式。 任务三：设置邮箱超级链接。 师：展示一个网站首页，指向“友情链接”“电子邮箱”等，告诉学生，除了为导航文字或图片添加超级链接，我们还可以为自己的邮箱添加

25、超级链接，制作方法和前面的做法大致相同，你能根据课本图14-4为自己的邮箱制作超级链接吗？ 学生练习：为自己的邮箱插入超级链接。 大屏幕投影插入邮箱超级链接的关键画面，辅助学生操作。 比一比，说一说：邮箱的超级链接与网站内的链接在制作方法、生成的URL地址上有什么不同？ 四、检查超级链接指导学生，根据课本提示，利用“视图”中的“超级链接”查看网页间链接出入情况，修改不完善的网页。 五、拓展练习 综合运用表格和图片，设计一个“认识动物”的网页，点击首页小图即查看大图，并在每页设置“上一页”“下一页”“返回”超级链接。 为自己的个人网站设置“友情链接”位置。并将百度、搜狐等常用网站的logo添加进来，并设置好超级链接。 上机（一课时）1、 分组制作几个简单的网页；2、 各自将制作的几个网页链接起来交流与评价发布与评价网站【教学目标】1、知识与技能： （1）、通过检查、测试完成的网站，掌握检测网站的一般方法。 （2）、了解网站评价的基本要点，掌握网站评价的过程。【过程与方法】 （1）、学会测试网站，能对测试的网站进行维护。 （2）、学会评价网站，能对设计的网页进行自评和互评。【情感态度与价值观】 （1）、通过网站的发布与维护，使学生意识到网站制作与维护的艰辛，增强知识产权的保护意识。 （2）、掌握网