11单元第2节创建网站制作首页教案

第一篇：11单元第2节创建网站制作首页教案

第10章 主题网站设计

第2节 制作网站——创建网站制作首页

一、教学目标： 1．知识与技能：

（1）认识FrontPage软件窗口结构，并与Word窗口进行比较。

（2）了解站点与主页的概念，理解站点的意义，学会建立、删除站点。

（3）掌握新建简单网页的方法，能够在网页中插入文字并进行排版，掌握图片、水平线的插入方法及属性的设置方法，能够灵活应用“网页属性”对话框来设置网页属性，如背景图、背景音乐等。

（4）掌握保存网页的方法，了解网页保存与普遍文档保存的不同点。

2．过程与方法：

（1）通过对比，使学生掌握软件的使用方法，达到举一反三的功效。

（2）通过学生动手设计网站的实践活动，使学生掌握对象属性的设置方法，为学生今后学习其他软件奠定基础。

3．情感态度与价值观：

（1）通过对比，使学生了解软件学习的一般方法及规律，提高学生学习信息技术的信心。（2）通过创建网站和设计首页，掌握对象属性的设置方法，初步体验成功的快乐。

（3）通过创建“动物——人类的朋友”网站，使学生树立人与动物和谐相处，真爱、善待和保护动物的观念。

二、教学重点难点： 1．教学重点：

（1）认识FrontPage窗口结构及主要菜单的功能。（2）掌握建立、删除网站的基本方法。

（3）掌握简单网页设计的基本方法，如文字、图片以及水平线的插入与编辑等。（4）掌握设置网页属性的一般方法。

2．教学难点：

（1）站点的作用和存储路径。（2）网页的保存。

三、教学过程：

1．创设情境、导入新课

（1）教师将配套光盘上“动物”网站展示给学生看，并分析网站的基本结构和主题。（2）师生共同讨论对比FrontPage与Word的异同，进入教学主题——创建网站站点与制作首页设计。

设计意图：通过讨论对比，自然过渡，激发兴趣，活跃气氛。2．任务驱动、自主学习

（1）教师启动FrontPage，介绍各窗口组成，并与office中的其他软件作比较，分析有什么异同。学生打开软件，并结合教材仔细观察。

（2）由于我们的网站需要多个网页文件以及相关图片、声音文件等，所以网站建设初期就要做好管理准备，我们以站点的形式来管理网站内容的文件。出示任务一：建立一个站点。

（3）教师指导学生对照书本进行学习，学生明确教师要求后，阅读教材，进行自主学习。学生操作期间教师巡视课堂，做个别辅导。针对学生普遍存在的问题，教师做详细讲解。

（4）进一步提问：在文件夹列表中看到了什么？引导学生分析一般首页的组成情况，提出制作要求。出示任务二；设计首页。学生可脱离教材中各对象的具体摆放要求，构思自己网站首页中各对象的布局，但必要的元素不得缺少。

（5）出示任务三：编辑主页。教师提出编辑要求，引导学生设置相关对象的属性。学生示范，讲解如何设置文字、图片、水平线以及网页属性等。教师强调必须切换到普通模式窗口下编辑。

（6）出示任务四：保存网页。教师边示范边讲解。学生认真听讲，按要求保存自己的网页。

设计意图：在完成基本任务的前提下，鼓励学生创新，培养学生自主学习合作学习能力。

3．课堂小结、师生评价

（1）教师引导学生进行总结，针对本节课的重点知识进行提问，了解学生对相关知识的掌握。

（2）学生相互欣赏作品，推荐优秀作品在全班进行展示，师生共同评价，教师对完成情况好的学生和帮助他人的学生给与表扬。

设计意图：引导学生对所学的知识进行梳理，并及时了解学生对教学内容的掌握情况，鼓励学生互帮互助。

四、教学反思：

1．学生可以自定主题，根据主题确定网站内容。在教学中，教师可以要求学生设计的网页内容不同，但网页设计的基本要求要与教师的教学要求一致，保证教学内容落实到位。

2．由于课堂时间有限，若用大量时间让学生收集资料，则无法完成任务。为了使学生能有更多时间学习网页设计，教师可以事先多准备一些各种类型的素材，以方便学生查找和使用。

第二篇：博物馆网站首页制作教案

博物馆网站首页制作教案

第一部分：课前导入

简单复习回顾上节所学内容 第二部分：学习新内容 【步骤一】 告知

简单介绍本单元需要学习掌握的内容

【步骤二】 引入

由一组图片导入 【步骤三】 操练

北京腾飞博物馆网站首页制作

一、行业应用 属于网页设计

二、设计理念

博物馆本身存放的就是大量距今年代比较久远的物品，因此设计师在设计过程中，从网页的颜色、装饰元素以及表面肌理等方面，都力求能够表现出一种历史久远、古老典雅的气氛，并给人以有内涵、有文化气息的视觉感受。【步骤四】具体操作步骤

1、制作背景

1新建 ○2打开素材 ○3设置前景色…….○

2、制作辅助效果 【步骤五】 归纳

本网站在开始时采用了很多图形绘制功能辅助进行布局，然后再结合各种肌理素材、混合模式、图层蒙版以及调色功能，为网页的各个部分叠加纹理；在制作内部的各个内容时，将使用的蒙版、图层样式、图形绘制以及文字输入等功能，为每个图形对象边框等精致的效果，以及相关的装饰图形及说明文字，最后还需要打开一些装饰图形，结合缩放功能将其摆放在网页的各个边角位置作为装饰。【步骤六】 评价

对学生作品作具体评价，好的作品给予肯定，容易出现问题的方面，如部分叠加纹理方面、蒙版的使用等，具体讲解。【步骤七】 小结

本案例：博物馆本身存放的就是大量距今年代比较久远的物品，因此设计师在设计过程中，从网页的颜色、装饰元素以及表面肌理等方面，都力求能够表现出一种历史久远、古老典雅的气氛，并给人以有内涵、有文化气息的视觉感受。因此同学们要把这种厚重感表现出来，此作品才算成功。

【步骤八】 作业

1、北京腾飞博物馆网站首页制作

2、完成实训报告册 【步骤九】 课后反思

第三篇：制作网站首页教案设计

制作网站首页教案设计

制作网站首页教案设计

广东省云浮市郁南县平台镇初级中学

黄伟兴

教学课题：制作网站首页 教学背景：

网站首页是网站的“脸面”，学生通过学习设计网站首页，一方面培养他们为提高作品吸引力、展现自我而积极思考、探究、尝试的意识和态度，另一方面通过学习各种基本网页设计技术，亲历网页制作的一般过程，更好地为接下去几节课的学习和活动参与打下基本功。教学目标：

1、知识与技能：

（1）了解网页一般由哪些元素组成。（2）学会运用表格进行版面布局。（3）能够在网页中添加网页元素。（4）能在网页中设置超链接。

2、过程与方法：

（1）通过制作网站首页，掌握版面布局、添加网页元素和设置超链接的基本技术方法，达到举一反三的功效。

（2）通过学生动手设计网页的实践活动，使学生掌握对象属性的设置方法，为学生今后学习其他软件奠定基础。

3、情感态度与价值观：

制作网站首页教案设计

（1）提高视觉素养，能根据网页主题确定恰当的网页风格并具有初步的创意。（2）通过运用表格布局网页对象活动，进一步掌握各种不同对象属性的设置方法和规律，提高学生学习信息技术的信心。

（3）在合作实践过程中，培养学生的审美能力和创造能力，在小组协作学习中，培养学生合作帮助、团结协作的良好品质。

（4）培养学生大胆构思、自我创新的精神，培养学生的美感及创作后的成就感。

（5）善于和老师、同伴一起分析讨论，在分析、探讨中学会欣赏，学会评价。

4、学情分析：

学生已经具备了计算机软件使用的基础，但学生在学习过程中往往会把注意力停留在技术实现的层面上，让学生认识和掌握制作网站首页的方法，故操作性强。在前面几节课学生初步确定了网站的主题，收集了部分资料。学生已经在word文档的学习中掌握在文档中插入图片、艺术字等素材方法，为制作网页中的添加素材这一环节打下基础，同时表格教学比较枯燥，表格嵌套、根据图片特点裁剪图片、设计制作表格等知识点更加枯燥乏味。图片处理操作水平的差异和教学内容的枯燥，可能会造成很多学生不愿动手、不会动手。在实际教学时，教师应该时刻给予学生恰当的引导，在调动学生学习兴趣方面下足功夫。

5、素质目标：

制作网页要应用到多方面的知识，培养学生的知识迁移能力，同时给学生提供了自由发挥的空间，学生可以充分发挥自身的创造力与想象力，培养学生综合运用知识的能力。教学重点难点：

1、教学重点：

制作网站首页教案设计

（1）能用表格规划版面布局的方法与技巧。（2）恰当选取网页元素与设置。

2、教学难点：

（1）掌握超链接技术设置网站导航功能的方法。（2）掌握设置网页属性的一般方法。教材分析：

1、本节的作用和地位：

本节课侧重培养信息表达的能力，对于加强学生的信息意识，提高信息处理的能力有着重要的作用；网页的设计也给学生提供了展示个性、自主创新的机会，促使他们主动地学、创造性地学；网页的评价则能使学生了解内容编排的原则，页面布局的种类，色彩搭配的风格等，提高他们的艺术修养和审美情趣。

2、本节主要内容介绍：

课改后信息技术课已不再是单纯的计算机技能课，它强调以培养信息素养为目标，以任务驱动为模式，以应用软件为载体。只有在实际教学中突破以往的教学模式，才能培养出适应信息社会发展的有用人才。这节课的主要任务是使学生掌握在FrontPage用表格规划网页及在网页中插入图片、声音、水平线等相关知识与操作，并能合理、灵活地应用到网页制作中，美化自己的网页。教学方法：

1、先学后教，“兵”教“兵”

先学，就是让学生自学，尝试独立操作；后教，是根据学生自学效果，教师进行精讲、点评，并尽量让学生去“教”；“兵”教“兵”，就是让学生充当小教师的角色，自学得较好的学生操作给其他学生看，通过示范，在学生间起到相互

制作网站首页教案设计

促进，相互影响的作用，达到共同进步。

2、任务驱动，小组竞赛法

根据学生不同的学习能力、知识储备、兴趣爱好，依据自愿组成原则，将全班分成若干个小组。通过网页教学课件的辅助，在教师的引导下，各小组按照自己规划出的网页设计方案，以任务驱动和分工合作形式制作网页。并通过自我评价、小组评价、师生互评相结合的评价方式使学生自主完成作业，由学生自己担任评委，评选出优秀网页，通过展示学生的优秀作品来激发学生对网页制作的兴趣。

由操作能力强的学生充当组长，带动其他成员完成网页制作，一来培养他们合作互助的关系，二来培养学生之间、师生之间的感情。

整节课教师只扮演一个组织者和提示者的角色，一步步引导学生完成本课的目标，让学生充分发挥自主性、协助性，培养他们合作、创新的能力。

3、提问引导法

根据学生已有的知识结构体系，采用提问的方式引出每个教学目标，中间穿插观察、自主探究、合作交流的方式加深学生的印象，培养学生的观察能力，动手能力和团结合作精神。让学生自觉主动地去分析问题、解决问题，学生在操作过程中不断发现问题、解决问题，使学生由学会知识变为会学知识。教学评价：

在教学过程中一方面要考查学生能否顺利掌握制作网页的基本技术方法，根据设计需求完成网站首页的制作，另一方面又要考查学生在作品中是否做了科学的布局规划、是否合理地运用了各种网页元素，作品是否具备表现力和较强的可读性。教学过程：

制作网站首页教案设计

一、创设情景、引入课题、明确任务

师：上节课我们已经规划了自己的网站，今天老师给大家带来了一个礼物，它是一个漂亮的网站，它就是“老师个人学校网站”，里面有许多关于同学们的内容，如：你们漂亮的生活相等，请同学们欣赏。

生：学生认真观看，自主互相讨论，畅谈想法及发表意见。

师：继网站筹划之后我们就要着手来进行网页的设计了，第一个要进行的当然是首页的制作。首页是网站的“脸面”，能不能吸引访问者的注意，它显得尤为重要，所以在设计制作首页时需要特别花心思。怎样设计一个好看的网页让网站第一时间抢占浏览者的眼球呢？再度打开网站的首页。生：仔细观察该首页的特点。并互相讨论，各抒已见。

师：上节课已经搜集了素材，这节课咱们来动手制作网站的首页。指导学生使用FrontPage打开范例“班级网站”的首页，让学生进行小组交流，回答以下几个问题：

1、你知道有哪些软件可以用来制作网页吗？

2、该网页包含了很多元素，它们是如何整齐有序地分布在网页中的？用什么可以分割网页的版面布局呢？

3、该首页包含了哪些元素？是否能很好地表达主题思想？结合小组收集到的素材，你认为在自己的网站首页中可以添加哪些网页元素？

4、导航栏是网站的“地图”，没有它，浏览者就会“迷路”。选定范例网站首页导航栏中的栏目文字，单击常用工具栏上的超链接按钮，看看会出现什么？ 生：观察思考、探究、小组合作交流，回答教师提出的几个问题，并确立自己将要开展的工作。

制作网站首页教案设计

师：其实很多文字处理软件都可以设计网页，如Word中，利用“另存为web页”就可以将文档保存为网页，有些图像处理软件如PhotoShop也可以制作网页，Windows“记事本”也可以制作网页等，不过FrontPage和Dreamweaver却是最方便的网页制作软件，因为它们不仅可以制作网页，而且能方便地设计和管理网站，很适合入门学习。

二、先学后教、任务驱动、自主学习

1、用表格进行版面布局

师：（1）提问学生都为他们的主页准备了哪些内容和素材（如文本、图片、动画、音频、视频）？

（2）引导学生阅读教材，然后动手实践。生：（1）学生回答老师的问题。（2）上网学习相关的技能技巧。

（3）小组合作自主探究，教师引导，并安排操作熟练的学生进行演示。师：（1）教师巡视课堂，做个别辅导。针对学生普遍存在的问题，教师做详细讲解。

（2）以前我们可以用表格来表示数据信息吗？表格还可以用来对网页版面实现分割吗？

（3）你打算怎样安排它们的具体位置才能使网页更加合理美观，方便访问者访问？

（4）让打开学生常去的网站，腾讯QQ网站，让学生观察并提问他们发现了什么，再逐一把表格中的各元素删除，使网页上只留下一个空表格结构。（5）提醒学生要在编辑窗口和预窗口之间切换观察，使表格结构调整得更加

制作网站首页教案设计

合理。

（6）如何才能让表格不显示在我们的网页中呢？

生：思考回答问题，小组合作探究、交流，完成老师布置的任务。

师：（1）对比展示两张素材相同布局不同的网页。一个使用表格布局，但表格边框隐藏，其页面工整，文本、图片摆放对称，具有一定的规律；另一个不用表格布局则页面凌乱，图文混杂，摆放杂乱。（2）教师简单演示。

A：添加表格；B：表格属性设置面板中的几个常用设置选项说明。（3）指出学生易出错或难于处理的问题及学生可能遇到的问题。

生：（1）认真观看教师演示，归纳总结交流自己动手动实践过程中存在的问题和不足、成功的心得体会及改进思路等。

（2）互相找出易出错或难于处理的问题及学生可能遇到的问题，合作探究解决的办法。

2、添加网页元素

师：（1）要求学生把事先准备好的各种网页元素（如文本、图片、动画、音频、视频）添加到主页，也可使用教师机的共享资源库的素材。（2）把学生用到的技能要点发到学习网站上。

生：（1）小组合作交流，对之前收集到的素材进行选用，添加到网页中。（2）上网学习相关的技能技巧。（3）上网查找需补充的素材。

制作网站首页教案设计

（4）学有余力的同学还可以尝试怎样让网页更加生动。如添加视频、背景音乐等。

师：（1）恰当地为学生提供方法，讲授经验心得。（2）解决学生提出的疑难问题。

（3）鼓励学生进行发现和尝试提高他们的动手能力。

（4）教师巡视课堂，做个别辅导。针对学生普遍存在的问题，教师做详细讲解。

师：（1）教师简单演示。

（2）指出学生易出错或难于处理的问题及学生可能遇到的问题。

生：认真观看教师演示，归纳总结交流自己动手动实践过程中存在的问题和不足、成功的心得体会及改进思路等。

3、设置超链接

师：（1）如何通过超链接技术实现网站的导航功能？

（2）再次提出导航栏是网站的“地图”，没有它，浏览者就会“迷路”。选定范例网站首页导航栏中的栏目文字，单击常用工具栏上的超链接按钮，看看会出现什么？

（3）你发现哪些地方需要设置超链接吗？试对它们进行设置。（4）如何检查各个链接目标是否设置正确？

生：动手尝试，通过自主探究、小组合作交流，回答老师的问题。师：教师简单演示。

制作网站首页教案设计

三、课堂小结、作品展示、师生评价

（1）教师引导学生进行总结，针对本节课的重点知识进行提问，了解学生对相关知识的掌握。

（2）学生相互欣赏作品，推荐优秀作品在全班进行展示。我们来评一评，哪个作品做得好，好在哪里？那个作品还存在不足之处，都有那些方面？师生共同评价，教师对完成情况好的学生和帮助他人的学生给与表扬。

四、教学反思

本节课采用的教学理念和教学方式是在建构主义的教学理论指导下，采用“任务驱动教学法”,让学生这种“带着任务自主学习”的探究模式下实现知识的意义建构。以学生自己实践、自主学习为主，老师巧妙引导，适时指点为辅，学生在这种学习过程中处于积极主动的主体地位，从而可以充分发挥学生的学习主动性和创造性，使学生自主地获取知识。让学生通过合作协调、构思创新的方式完成整节课学习的方法，极大调动了学生的学习积极性，培养了其信息表达的能力，加强了学生的信息意识，提高了信息处理的能力。在探索式学习中，重要的不只是仅对任务完成的学习，而是学习者对知识的探索过程，是学习者在探索知识过程中的思维飞跃，是个性化发展的极好过程。同时，自主学习可以使每一位学生根据自己的知识基础与学习方法自定步调进行个别化学习，克服了传统课堂教学中压制个性化发展而采用“一刀切”的人为现象,但在引导过程中要注意掌握好“度”，既让学生自己探索，掌握知识，又要合理补充，及时纠错。

制作网站首页教案设计

《网站制作——站点创建与首页制作》教学设计

一、教材分析

本节课是江苏科学技术出版社教材，初中信息技术（8年级）第3章第2节的第二课时的内容，是继网站规划、网站设计后进行网站实现的关键一节，在整个课程的学习过程中至关重要。这节课的主要任务是运用Dreamweaver软件，让学生掌握在网页中插入图片、声音、水平线等相关知识与操作，并能合理、灵活地编辑和美化自己的网页。

二、教学目标 1．知识与技能

（1）掌握简单网页的新建方法。

（2）能够在网页中插入、排版文字，掌握图片、水平线的插入方法及属性的设置方法，能够灵活应用“网页属性”对话框，设置网页属性，如背景、背景音乐。

（3）掌握保存网页的方法，了解网页保存与普通文档保存的不同点。2．过程与方法

（1）对比教学，使学生掌握学习应用软件的基本方法和规律，达到举一反三的功效。

（2）任务驱动、自助探究，动手设计网站的实践活动，建立对象属性设置的思维方法和操作方法，为学生今后学习其它软件奠定基础。

（3）小组合作，培养学生自助、协作学习的能力。3．情感态度与价值观

制作网站首页教案设计

（1）能够在对比学习中，让学生体验软件学习的一般方法及规律，提高其学习信息技术的信心。

（2）能够在网站首页的设计和创建的过程中，掌握对象属性的设置方法，初步体验成功的快乐。

（3）能够通过小组交流学习，激发学生探究创新的学习精神。

三、教学重难点 1．教学重点（1）站点的建立。

（2）简单网页设计方法，如文字、图片以及水平线的插入与编辑等。（3）设置网页属性的一般方法。2．教学难点

（1）站点的作用和存储路径。（2）网页的保存。

四、教学方法

对比和任务驱动教学法，自助探究和合作学习法，五、教学准备

教学内容准备：整理、归类相关素材，并分发到学生电脑指定盘。上课地点：多媒体教室

六、教学过程 1．情境导入

制作网站首页教案设计

分发导学案，展示《旅游日记》网站，提问学生放假出门旅游的经历，引导学生思考如何记录旅行过程，讲解网站展示的内容，激发学生创建网站的学习兴趣。

设计意图：由学生生活实际入手，自然过渡，激发兴趣，活跃气氛。2．新课教学（1）网站介绍

通过展示的网页，分析其组成元素：网站标志、标题、水平线、文字介绍、背景图片、背景音乐，强调网站内容的合理布局。

（2）建立站点

由于我们的网站需要制作多个网页文件以及相关图片、声音文件等，所以网站建设初期就要做好管理准备，我们以站点的形式来管理网站内部文件。

任务1 在D盘下建立一个站点文件夹，站点名称：0128（即班级序号+学号）。教师活动：指导学生对照书本进行学习（限时）； 学生操作期间教师巡视课堂，做个别辅导； 针对学生中普遍存在的问题，教师可做详细讲解。

学生活动：明确教师要求后，阅读教材，开展对照着教材的自学活动； 举手反馈完成与否。

设计意图：对照教材操作步骤自学软件的相关操作。（自学为主）提问思考：在文件夹列表中看到了什么？

分析多出的文件夹列表栏，多了一个文件夹，里面有两个子文件夹和主页，图片存放在“images”文件夹中。

设计意图：了解站点的作用，强调站点的管理。

制作网站首页教案设计

（3）设计首页

再次强调一般首页组成情况，提出课堂制作要求（可跳出案例中各对象的具体摆放要求，但要求出现元素不得缺少）。

任务2 新建首页，要求首页中有如下对象： 网站的图片标志和标题。网站的建立主旨（文字介绍）。水平线（起分隔作用）。

链接到下一页的标记（可为文字，也可为图片）。

教师活动：指导学生示范，讲解如何插入图片（来自文件）、插入水平线等。（注意各对象“插入点”的选择）

学生活动：按要求小组合作完成任务。

设计意图：类比Word中对象的插入方法，使学生学会知识迁移。并在完成基本任务的前提下，鼓励学生创新。（类比学习法、知识迁移学习法）

（4）编辑与预览主页

提出具体编辑要求，引导学生设置相关对象的属性。

任务

3编辑主页

设置网站标题文字为隶书、7级、蓝色、居中。设置水平线粗细为5像素。

设置文字介绍文字为楷体、小二号、蓝色、加粗。选择一张淡雅图片，将其设置为首页背景图片。为首页加上背景音乐。

制作网站首页教案设计

教师活动：指导学生示范，讲解如何设置文字、图片、水平线以及网页属性等。

学生活动：按要求小组合作完成任务。

（强调：必须在“普通” 窗口下编辑，网页背景图片的像素符合要求）。设计意图：通过小组交流学习，培养学生自助、协作学习的能力，激发学生探究创新的学习精神。

（5）保存网页

教师活动：深入讲解示范。

学生活动：认真听讲，按要求保存自己的网页。

（强调：选择一个其他文件的文件夹分类保存图片等素材）３．总结与评价

（1）引导学生填写任务完成测评表，相互检查作业，推荐优秀作品，展示给全班同学，表扬完成情况好的同学与帮助他人的同学。

（2）对照本堂课的学习情况进行总结，提问本节课的重点知识，反馈学生相关知识的掌握情况。

设计意图：加强总结反馈，鼓励学生互帮互助

第四篇：教案【设计网站与制作首页】

教学目标

1.知识与技能：了解设计网站的一般流程以及网页的基本构成元素；学会运用表格进行版面布局；能够在网页中添加网页元素 2.过程与方法：

通过制作网站首页，掌握版面布局、添加网页元素和设置网页背景的基本技术方法，达到举一反三的效果。

通过学生跟随老师动手设计网站的实践活动，使学生掌握对象属性的设置方法，为学生今后学习其他软件奠定基础。3.情感态度价值观：

提高视觉美感素养，能够根据网站主题确定恰当的网页风格并具有初步的创意； 使学生善于交流，在分析探讨中学会欣赏与评价。教学重难点

1.学会使用表格规划版面布局的方法与技巧 2.恰当选取网页元素并进行设置。难点：掌握设置网页属性的一般方法 教学过程

一、创设情境、引入课题——5min 师：同学们，你们上过网吗？哪位同学说说自己都知道哪些网站？可以相互讨论一下。生：百度、新浪、腾讯„„

师：非常好，那么同学们还记得它们的样子吗？老师这里有一些我们常用网站的首页，咱们一起来欣赏、探讨一下。哪位同学说说，你最喜欢哪个网页？为什么？ 生：仔细观察几类首页的特点，并踊跃发言。

师：一个网站，最重要的是它的人气。独特的设计、新颖的构思都能够为你的网站吸引大众增光添彩。而首页，作为网站的“脸面”，能不能吸引访问者的注意，它更是重中之重。所以在设计制作首页时需要特别地花心思，那么怎么样设计一个好的首页让网站第一时间抢占浏览者的眼球呢？今天我们一起来学习《设计网站与制作首页》。

二、新课讲授

1.熟悉Dreamweaver开发环境——6min 师演示操作：运行Macromedia Dreamweaver MX 2004，在“起始页”对话框中，选择“创建新项目”中的“HTML”选项，进入操作界面。

师讲解：菜单栏；插入栏；视图模式按钮：设计视图、拆分视图、代码视图；文档工具栏；工作区、版面组、属性面板。

师：制作网站的第一步要定义站点。站点是存放所有网页以及相关图片、动画等媒体文件的文件夹。下面请大家跟随我一起进行操作，定义本地站点。师生共同操作：课本P53定义本地站点。2.制作网站首页——6min 师：设计网站首先要确定网站主题，主题是网站的灵魂，是确定网站风格与创意的前提和出发点。【板书：1.确定网站主题、名称】 我想大家应该非常熟悉自己的QQ空间，所以我们今天就以个人网站为例，做一个个人主页。现在我们一起创建网站首页。师生共同操作：

1）在“文件”面板的站点根目录“myweb”下，右键——新建文件——命名“index.htm”作为网站首页；新建文件夹，命名“images”，保存首页中用到的图片文件。2）双击“index.htm”文件，进入网页编辑状态。3）在“文档工具栏”上的“标题”输入框中输入页面标题：***个人主页，作为首页标题。按键盘上F12键预览网页，师：“请同学们观察哪里发生了变化？” 生：首页标题变为***个人主页。3.用表格布局首页——8min 师：好，在确立网站主题后，要设计网站栏目，规划出网站结构图【板书：2.规划网站栏目结构】。下面老师把QQ空间的主页展示给大家，大家观察并进行分析，咱们这个个人网站应该包含哪些栏目？请一位同学回答。

生：主页日志相册留言板说说个人档音乐时光轴更多

师：非常好，接下来我们就要设计网页版面布局了【板书：3.设计网页版面布局】。请同学们快速阅读课本P47网页版面布局部分的内容。

师演示讲解：我们可以借助表格实现网页的精细排版。打开“index.htm”文件——插入——表格。在“表格”对话框中可以设置行数、列数、表格宽度、边框粗细、单元格间距等参数。单击表格边框，选中整个表格，就会显示出表格的“属性”面板，在这里可以对单元格进行拆分。

师生共同操作：下面请同学们跟随我进行操作，简单布置我们的个人主页结构。4.添加首页内容——3min 师演示操作：为了节省时间，老师已将文本内容为大家准备好，咱们直接把一部分内容复制粘贴进来。

类似我们学习过的Word等文本编辑软件，可以在属性面板中设置字体、字号、颜色等。5.插入图像——4min 师演示：我们现在按F12键浏览一下，这样的网页你们喜欢看吗？为什么？ 生：不喜欢，都是字。师演示：那我们现在就来学习如何插入图片，选择“插入——图像”，如果图片大小不合适，可以选中图片，在属性面板中设置图片的宽度和高度。6.设置网页背景——3min 师：网页背景可以是颜色，也可以链接调用图像文件，下面请同学们认真看我的演示。

三、知识回顾——3min 师：请几位同学说说本节课学到了哪些知识或者技能？ 生：积极思考并发言。

四、布置任务——2min 小组合作：下节课我们需要利用本课所学知识和技能为班级设计一个主题网站的首页。课下请同学们4人为一组，分工合作，确定网站主题和名称，并作出栏目规划和版面设计，搜集整理相关资料，以小组为单位提交至老师邮箱，以备下节课使用。【多媒体展示】

五、课程收尾——5min 师：剩余5分钟时间大家快速为个人主页添加文本和图片，将没完成的部分补充完整，做得快的同学可以尝试修改格式以及设置网页背景。【教师巡视课堂，进行个别指导。】

第五篇：制作网站首页教案设计

制作网站首页教案设计

制作网站首页教案设计

教学课题：制作网站首页 教学背景：

网站首页是网站的“脸面”，学生通过学习设计网站首页，一方面培养他们为提高作品吸引力、展现自我而积极思考、探究、尝试的意识和态度，另一方面通过学习各种基本网页设计技术，亲历网页制作的一般过程，更好地为接下去几节课的学习和活动参与打下基本功。教学目标：

1、知识与技能：

（1）了解网页一般由哪些元素组成。（2）学会运用表格进行版面布局。（3）能够在网页中添加网页元素。（4）能在网页中设置超链接。

2、过程与方法：

（1）通过制作网站首页，掌握版面布局、添加网页元素和设置超链接的基本技术方法，达到举一反三的功效。

（2）通过学生动手设计网页的实践活动，使学生掌握对象属性的设置方法，为学生今后学习其他软件奠定基础。

3、情感态度与价值观：

（1）提高视觉素养，能根据网页主题确定恰当的网页风格并具有初步的创意。

制作网站首页教案设计

（2）通过运用表格布局网页对象活动，进一步掌握各种不同对象属性的设置方法和规律，提高学生学习信息技术的信心。

（3）在合作实践过程中，培养学生的审美能力和创造能力，在小组协作学习中，培养学生合作帮助、团结协作的良好品质。

（4）培养学生大胆构思、自我创新的精神，培养学生的美感及创作后的成就感。

（5）善于和老师、同伴一起分析讨论，在分析、探讨中学会欣赏，学会评价。

4、学情分析：

学生已经具备了计算机软件使用的基础，但学生在学习过程中往往会把注意力停留在技术实现的层面上，让学生认识和掌握制作网站首页的方法，故操作性强。在前面几节课学生初步确定了网站的主题，收集了部分资料。学生已经在word文档的学习中掌握在文档中插入图片、艺术字等素材方法，为制作网页中的添加素材这一环节打下基础，同时表格教学比较枯燥，表格嵌套、根据图片特点裁剪图片、设计制作表格等知识点更加枯燥乏味。图片处理操作水平的差异和教学内容的枯燥，可能会造成很多学生不愿动手、不会动手。在实际教学时，教师应该时刻给予学生恰当的引导，在调动学生学习兴趣方面下足功夫。

5、素质目标：

制作网页要应用到多方面的知识，培养学生的知识迁移能力，同时给学生提供了自由发挥的空间，学生可以充分发挥自身的创造力与想象力，培养学生综合运用知识的能力。教学重点难点：

1、教学重点：

（1）能用表格规划版面布局的方法与技巧。

制作网站首页教案设计

（2）恰当选取网页元素与设置。

2、教学难点：

（1）掌握超链接技术设置网站导航功能的方法。（2）掌握设置网页属性的一般方法。教材分析：

1、本节的作用和地位：

本节课侧重培养信息表达的能力，对于加强学生的信息意识，提高信息处理的能力有着重要的作用；网页的设计也给学生提供了展示个性、自主创新的机会，促使他们主动地学、创造性地学；网页的评价则能使学生了解内容编排的原则，页面布局的种类，色彩搭配的风格等，提高他们的艺术修养和审美情趣。

2、本节主要内容介绍：

课改后信息技术课已不再是单纯的计算机技能课，它强调以培养信息素养为目标，以任务驱动为模式，以应用软件为载体。只有在实际教学中突破以往的教学模式，才能培养出适应信息社会发展的有用人才。这节课的主要任务是使学生掌握在FrontPage用表格规划网页及在网页中插入图片、声音、水平线等相关知识与操作，并能合理、灵活地应用到网页制作中，美化自己的网页。教学方法：

1、先学后教，“兵”教“兵”

先学，就是让学生自学，尝试独立操作；后教，是根据学生自学效果，教师进行精讲、点评，并尽量让学生去“教”；“兵”教“兵”，就是让学生充当小教师的角色，自学得较好的学生操作给其他学生看，通过示范，在学生间起到相互促进，相互影响的作用，达到共同进步。

制作网站首页教案设计

2、任务驱动，小组竞赛法

根据学生不同的学习能力、知识储备、兴趣爱好，依据自愿组成原则，将全班分成若干个小组。通过网页教学课件的辅助，在教师的引导下，各小组按照自己规划出的网页设计方案，以任务驱动和分工合作形式制作网页。并通过自我评价、小组评价、师生互评相结合的评价方式使学生自主完成作业，由学生自己担任评委，评选出优秀网页，通过展示学生的优秀作品来激发学生对网页制作的兴趣。

由操作能力强的学生充当组长，带动其他成员完成网页制作，一来培养他们合作互助的关系，二来培养学生之间、师生之间的感情。

整节课教师只扮演一个组织者和提示者的角色，一步步引导学生完成本课的目标，让学生充分发挥自主性、协助性，培养他们合作、创新的能力。

3、提问引导法

根据学生已有的知识结构体系，采用提问的方式引出每个教学目标，中间穿插观察、自主探究、合作交流的方式加深学生的印象，培养学生的观察能力，动手能力和团结合作精神。让学生自觉主动地去分析问题、解决问题，学生在操作过程中不断发现问题、解决问题，使学生由学会知识变为会学知识。教学评价：

在教学过程中一方面要考查学生能否顺利掌握制作网页的基本技术方法，根据设计需求完成网站首页的制作，另一方面又要考查学生在作品中是否做了科学的布局规划、是否合理地运用了各种网页元素，作品是否具备表现力和较强的可读性。教学过程：

一、创设情景、引入课题、明确任务

制作网站首页教案设计

师：上节课我们已经规划了自己的网站，今天老师给大家带来了一个礼物，它是一个漂亮的网站，它就是“老师个人学校网站”，里面有许多关于同学们的内容，如：你们漂亮的生活相等，请同学们欣赏。

生：学生认真观看，自主互相讨论，畅谈想法及发表意见。

师：继网站筹划之后我们就要着手来进行网页的设计了，第一个要进行的当然是首页的制作。首页是网站的“脸面”，能不能吸引访问者的注意，它显得尤为重要，所以在设计制作首页时需要特别花心思。怎样设计一个好看的网页让网站第一时间抢占浏览者的眼球呢？再度打开网站的首页。生：仔细观察该首页的特点。并互相讨论，各抒已见。

师：上节课已经搜集了素材，这节课咱们来动手制作网站的首页。指导学生使用FrontPage打开范例“班级网站”的首页，让学生进行小组交流，回答以下几个问题：

1、你知道有哪些软件可以用来制作网页吗？

2、该网页包含了很多元素，它们是如何整齐有序地分布在网页中的？用什么可以分割网页的版面布局呢？

3、该首页包含了哪些元素？是否能很好地表达主题思想？结合小组收集到的素材，你认为在自己的网站首页中可以添加哪些网页元素？

4、导航栏是网站的“地图”，没有它，浏览者就会“迷路”。选定范例网站首页导航栏中的栏目文字，单击常用工具栏上的超链接按钮，看看会出现什么？ 生：观察思考、探究、小组合作交流，回答教师提出的几个问题，并确立自己将要开展的工作。

师：其实很多文字处理软件都可以设计网页，如Word中，利用“另存为web页”就可以将文档保存为网页，有些图像处理软件如PhotoShop也可以制作网页，制作网站首页教案设计

Windows“记事本”也可以制作网页等，不过FrontPage和Dreamweaver却是最方便的网页制作软件，因为它们不仅可以制作网页，而且能方便地设计和管理网站，很适合入门学习。

二、先学后教、任务驱动、自主学习

1、用表格进行版面布局

师：（1）提问学生都为他们的主页准备了哪些内容和素材（如文本、图片、动画、音频、视频）？

（2）引导学生阅读教材，然后动手实践。生：（1）学生回答老师的问题。（2）上网学习相关的技能技巧。

（3）小组合作自主探究，教师引导，并安排操作熟练的学生进行演示。师：（1）教师巡视课堂，做个别辅导。针对学生普遍存在的问题，教师做详细讲解。

（2）以前我们可以用表格来表示数据信息吗？表格还可以用来对网页版面实现分割吗？

（3）你打算怎样安排它们的具体位置才能使网页更加合理美观，方便访问者访问？

（4）让打开学生常去的网站，腾讯QQ网站，让学生观察并提问他们发现了什么，再逐一把表格中的各元素删除，使网页上只留下一个空表格结构。（5）提醒学生要在编辑窗口和预窗口之间切换观察，使表格结构调整得更加合理。

制作网站首页教案设计

（6）如何才能让表格不显示在我们的网页中呢？

生：思考回答问题，小组合作探究、交流，完成老师布置的任务。

师：（1）对比展示两张素材相同布局不同的网页。一个使用表格布局，但表格边框隐藏，其页面工整，文本、图片摆放对称，具有一定的规律；另一个不用表格布局则页面凌乱，图文混杂，摆放杂乱。（2）教师简单演示。

A：添加表格；B：表格属性设置面板中的几个常用设置选项说明。（3）指出学生易出错或难于处理的问题及学生可能遇到的问题。

生：（1）认真观看教师演示，归纳总结交流自己动手动实践过程中存在的问题和不足、成功的心得体会及改进思路等。

（2）互相找出易出错或难于处理的问题及学生可能遇到的问题，合作探究解决的办法。

2、添加网页元素

师：（1）要求学生把事先准备好的各种网页元素（如文本、图片、动画、音频、视频）添加到主页，也可使用教师机的共享资源库的素材。（2）把学生用到的技能要点发到学习网站上。

生：（1）小组合作交流，对之前收集到的素材进行选用，添加到网页中。（2）上网学习相关的技能技巧。（3）上网查找需补充的素材。

（4）学有余力的同学还可以尝试怎样让网页更加生动。如添加视频、背景音 7

制作网站首页教案设计

乐等。

师：（1）恰当地为学生提供方法，讲授经验心得。（2）解决学生提出的疑难问题。

（3）鼓励学生进行发现和尝试提高他们的动手能力。

（4）教师巡视课堂，做个别辅导。针对学生普遍存在的问题，教师做详细讲解。

师：（1）教师简单演示。

（2）指出学生易出错或难于处理的问题及学生可能遇到的问题。

生：认真观看教师演示，归纳总结交流自己动手动实践过程中存在的问题和不足、成功的心得体会及改进思路等。

3、设置超链接

师：（1）如何通过超链接技术实现网站的导航功能？

（2）再次提出导航栏是网站的“地图”，没有它，浏览者就会“迷路”。选定范例网站首页导航栏中的栏目文字，单击常用工具栏上的超链接按钮，看看会出现什么？

（3）你发现哪些地方需要设置超链接吗？试对它们进行设置。（4）如何检查各个链接目标是否设置正确？

生：动手尝试，通过自主探究、小组合作交流，回答老师的问题。师：教师简单演示。

三、课堂小结、作品展示、师生评价

制作网站首页教案设计

（1）教师引导学生进行总结，针对本节课的重点知识进行提问，了解学生对相关知识的掌握。

（2）学生相互欣赏作品，推荐优秀作品在全班进行展示。我们来评一评，哪个作品做得好，好在哪里？那个作品还存在不足之处，都有那些方面？师生共同评价，教师对完成情况好的学生和帮助他人的学生给与表扬。

四、教学反思

本节课采用的教学理念和教学方式是在建构主义的教学理论指导下，采用“任务驱动教学法”,让学生这种“带着任务自主学习”的探究模式下实现知识的意义建构。以学生自己实践、自主学习为主，老师巧妙引导，适时指点为辅，学生在这种学习过程中处于积极主动的主体地位，从而可以充分发挥学生的学习主动性和创造性，使学生自主地获取知识。让学生通过合作协调、构思创新的方式完成整节课学习的方法，极大调动了学生的学习积极性，培养了其信息表达的能力，加强了学生的信息意识，提高了信息处理的能力。在探索式学习中，重要的不只是仅对任务完成的学习，而是学习者对知识的探索过程，是学习者在探索知识过程中的思维飞跃，是个性化发展的极好过程。同时，自主学习可以使每一位学生根据自己的知识基础与学习方法自定步调进行个别化学习，克服了传统课堂教学中压制个性化发展而采用“一刀切”的人为现象,但在引导过程中要注意掌握好“度”，既让学生自己探索，掌握知识，又要合理补充，及时纠错。