制作网站首页教案设计

制作网站首页教案设计

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

教学课题：制作网站首页

教学背景：

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

教学目标：

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）对照本堂课的学习情况进行总结，提问本节课的重点知识，反馈学生相关知识的掌握情况。

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

《设计网站首页》教案设计

《设计网站首页》教案设计 一、教学设计部分 教学内容分析 R本课的主要内容与地位 本节课学习的内容是设计网站的首页。首页如同一本书的封面、一个戏曲人物的脸谱，应该能够反映出整个网站的整体风格和特色，让访问者通过网站首页就能对整个网站有所了解。所以，网站首页的设计是整个网站设计的重点。 R本课与前后内容的关系 本课是在课的规划设计基础之上进行的学习活动。首页的设计一定要按照规划进行。本节中涉及的知识点是网站制作过程中需要反复用到的，所以学生应熟练掌握。教学目标分析 R知识目标/技能目标 ·知识目标 ⑴认识网页的工作原理； ⑵了解网页编辑的一般过程。 ·技能目标 ⑴熟练掌握在网页中输入文字、插入图片、插入水平线的操作； ⑵掌握网页的新建、预览和保存。

R过程与方法目标 ⑴对网页操作中基本概念有清晰的认识； ⑵在操作中体会网页中图文混排遇到的困难，探索解决之道，为下一节课──用表格布局网页的学习埋下伏笔。 R情感态度与价值观目标 感受身边版面设计的素材：广告、报刊、课本，学以致用，将其用于网页设计中。 R本课的重难点 重点：插入图片和水平线。 难点：图片和水平线属性的设置、嵌入式文件的保存。 R本课的课时分配建议 课时教学策略设计建议 R教法建议 因FrontPage与学生之前学习的ord、Excel同属微软的office家庭软件，在操作上有许多相同或相似之处，所以在教学过程中，教师应鼓励学生对照ord中的操作完成文字的输入与编辑、插入与编辑图片等操作；采用分组设置、对比效果的形式探究“水平线属性”对话框中各参数的含义，从而加深学生对水平线的理解；在网页保存环节中，嵌入式文件的保存是学生从来没有接触过的知识点，教师应安排学生将不同的网页素材保存在站点中的不同文件夹中，以此达到强化的目的；组织学生进行网页预览时，提醒学生注意站

“设计与制作主题网站”单元教学设计

“设计与制作主题网站”单元教学设计 一、教材分析 本章内容对应《刚要》的“信息的发布与交流”部分，是在学生学习了文字处理、图片处理、多媒体信息处理的基础上，让学生进一步掌握信息处理的方法，了解和掌握信息发布的另外一种形式——网站设计。初中阶段学习网站设计与制作也为高中学习这部分内容奠定了基础。本章希望通过网站设计，将信息获取（确定主题、收集资料）、信息处理（文字、表格、图片和多媒体等信息处理）、信息发布（在internet网上发布网站）综合运用于网站设计中，既复习巩固信息处理的基本知识和基本技能，又培养了学生综合运用信息技术的能力，通过实践活动提高学生的信息素养 二、教学目标： 1．知识与技能 （1）了解Dreamweaver软件窗口结构，了解站点与主页的概念，理解站点的意义，学会建立、删除站点，掌握简单网页的制作 （2）掌握网页中表格的制作方法、表格属性的设置方法及单元格的修饰与编辑。理解动态网页与网页动态效果的区别。 （3）掌握网页动态效果的制作，了解交互网页的概念，了解表单的功能及表单元件的使用方法，了解网上信息调查的设计方法。 （4）了解框架结构的基本知识、框架的作用及框架属性 （5）了解超级链接的含义及链接源和链接目标的含义，掌握同一站点内以及不同站点间网页超级链接的创建方法。 2．过程与方法 （1）通过学生动手设计网站的实践活动，使学生建立对象属性设置的思维方法和操作方法，为学生今后学习其它软件奠定了基础。 （2）通过用表格结构设计网页，使学生进一步理解表格的作用、功能及网页设计方法的多样性，培养学生的发散思维能力。 （3）掌握“插入”菜单中“组件”命令的使用，使得网页增添动态效果。（4）掌握表单元件的功能及使用方法，掌握表单各组件属性的设置方法。

《设计网站首页》教学设计

《设计网站首页》教学设计 《设计网站首页》教学设计 教学内容分析 R本课的主要内容与地位 本节课学习的内容是设计网站的首页。首页如同一本书的封面、一个戏曲人物的脸谱，应该能够反映出整个网站的整体风格和特色，让访问者通过网站首页就能对整个网站有所了解。所以，网站首页的设计是整个网站设计的重点。 R本课与前后内容的关系 本课是在第一课的规划设计基础之上进行的学习活动。首页的设计一定要按照规划进行。本节中涉及的知识点（编辑网页：文字输入和编辑、插入图片、插入水平线；保存、预览和新建网页）是网站制作过程中需要反复用到的，所以学生应熟练掌握。 ?教学目标分析 R知识目标/技能目标 ·知识目标 ⑴认识网页的工作原理； ⑵了解网页编辑的一般过程。 ·技能目标 ⑴熟练掌握在网页中输入文字、插入图片、插入水平线的操作；

⑵掌握网页的新建、预览和保存。 R过程与方法目标 ⑴对网页操作中基本概念（首页、网页、网页标题等）有清晰的认识； ⑵在操作中体会网页中图文混排遇到的困难，探索解决之道，为下一节课──用表格布局网页的学习埋下伏笔。 R情感态度与价值观目标 感受身边版面设计的'素材：广告、报刊、课本，学以致用，将其用于网页设计中。 R本课的重难点 重点：插入图片和水平线。 难点：图片和水平线属性的设置、嵌入式文件的保存。 R本课的课时分配建议 1课时 ?教学策略设计建议 教法建议 因FrontPage与学生之前学习的Word、Excel同属微软的Office 家庭软件，在操作上有许多相同或相似之处，所以在教学过程中，教师应鼓励学生对照Word中的操作完成文字的输入与编辑、插入与编辑图片等操作；采用分组设置、对比效果的形式探究“水平线属性”对话框中各参数的含义，从而加深学生对水平线的理解；在网页保存环节中，嵌入式文件的保存是学生从来没有接触过的知识点，教师应

制作网站首页教案设计

制作网站首页教案设计 广东省云浮市郁南县平台镇初级中学黄伟兴 教学课题：制作网站首页 教学背景： 网站首页是网站的“脸面”，学生通过学习设计网站首页，一方面培养他们为提高作品吸引力、展现自我而积极思考、探究、尝试的意识和态度，另一方面通过学习各种基本网页设计技术，亲历网页制作的一般过程，更好地为接下去几节课的学习和活动参与打下基本功。 教学目标： 1、知识与技能： （1）了解网页一般由哪些元素组成。 （2）学会运用表格进行版面布局。 （3）能够在网页中添加网页元素。 （4）能在网页中设置超链接。 2、过程与方法： （1）通过制作网站首页，掌握版面布局、添加网页元素和设置超链接的基本技术方法，达到举一反三的功效。 （2）通过学生动手设计网页的实践活动，使学生掌握对象属性的设置方法，为学生今后学习其他软件奠定基础。 3、情感态度与价值观：

（1）提高视觉素养，能根据网页主题确定恰当的网页风格并具有初步的创意。 （2）通过运用表格布局网页对象活动，进一步掌握各种不同对象属性的设置方法和规律，提高学生学习信息技术的信心。 （3）在合作实践过程中，培养学生的审美能力和创造能力，在小组协作学习中，培养学生合作帮助、团结协作的良好品质。 （4）培养学生大胆构思、自我创新的精神，培养学生的美感及创作后的成就感。 （5）善于和老师、同伴一起分析讨论，在分析、探讨中学会欣赏，学会评价。 4、学情分析： 学生已经具备了计算机软件使用的基础，但学生在学习过程中往往会把注意力停留在技术实现的层面上，让学生认识和掌握制作网站首页的方法，故操作性强。在前面几节课学生初步确定了网站的主题，收集了部分资料。学生已经在word文档的学习中掌握在文档中插入图片、艺术字等素材方法，为制作网页中的添加素材这一环节打下基础，同时表格教学比较枯燥，表格嵌套、根据图片特点裁剪图片、设计制作表格等知识点更加枯燥乏味。图片处理操作水平的差异和教学内容的枯燥，可能会造成很多学生不愿动手、不会动手。在实际教学时，教师应该时刻给予学生恰当的引导，在调动学生学习兴趣方面下足功夫。 5、素质目标： 制作网页要应用到多方面的知识，培养学生的知识迁移能力，同时给学生提供了自由发挥的空间，学生可以充分发挥自身的创造力与想象力，培养学生综合运用知识的能力。 教学重点难点： 1、教学重点：

美术教案面具的设计与制作

美术教案－面具的设计与制作 面具的设计与制作教学目标：1、了解面具的由来和演变发展的过程，了解不同国家、地域、民族对面具的不同理解。2、了解面具的造型特点及表现形式和方法。3、了解现代面具的功能和作用。教学难点 ：设计出具有新意、艺术效果独特并符合表演角色性格特征的面具。前准备（1）多媒体、图表、面具光盘。（2）面具相关文字资料及图片资料。（3）学生制作面具的海绵纸，胶水等。（4）学生表演节目用的道具和音乐。三、教学设计学习内容学生活动教师活动第一时激发兴趣与合作探究第二时学习与制作第三时展示、体验、交流。分组合作，讨论节目，分配角色。搜集面具资料（图片、实物、文字资料等）与同学交流自己对面具文化的了解。欣赏中外面具作品。学习面具的设计制作方法。设计有创意的面具以小组为单位表演节目，评价自己与他人的面具及节目的设计。引导学生观看录像。组织学生分组，讨论每位要演节目及角色，引导学生查找资料。讲解面具知识，面具的历史、面具的制作方法。

重点讲面具对人物性格的刻画。指导学生设计出有个性、有创意的面具。正确引导学生评价四、教学过程 设计（一）第一时 激发兴趣与合作探索1、影片欣赏：播放童话剧《马兰花》录像资料2、教师总结：看了录像中戴面具表演的节目。我们也要开一场联欢会。要以小组的形式每个同学戴上面具，表演你喜欢的节目。3、教师提出问题请同学思考：a、你和谁一组？b、表演什么节目？、我演谁？d、角色的性格是什么样的？e、你如何给角色设计面具？4、请你用形象或语言描绘出你所演角色的特征。、请同学查阅有关面具的文字资料、图片资料、实物等。（通过书籍、网络、电影、录像等）（二）第二时： 面具知识的讲解与面具设计与制作1、面具知识的介绍引导学生把搜集的图片、文字资料，以小组为单位向全班同学展示。交流对面具文化的了解。交流内容应包括：（1）古代面具的由来、意义、功能。（2）不同民族、不同地域、不同国家面具的造型特点及风格。（3）面具的材料及色彩特点。（4）现在面具的功能：随着社会的发展，面具的功能已不再是祭祀，驱鬼怪，除病魔。提问：现在社会中面具都运用在哪些方面？学生思考：家居装饰、表演道具、狂欢节、物品的设计等。现代面具是人们除旧迎新、欢歌劲舞、交流情

《设计网站首页》教案设计

《设计网站首页》教案设计 本资料为woRD文档，请点击下载地址下载全文下载地址一、教学设计部分 教学内容分析 R本课的主要内容与地位 本节课学习的内容是设计网站的首页。首页如同一本书的封面、一个戏曲人物的脸谱，应该能够反映出整个网站的整体风格和特色，让访问者通过网站首页就能对整个网站有所了解。所以，网站首页的设计是整个网站设计的重点。 R本课与前后内容的关系 本课是在第一课的规划设计基础之上进行的学习活动。首页的设计一定要按照规划进行。本节中涉及的知识点（编辑网页：文字输入和编辑、插入图片、插入水平线；保存、预览和新建网页）是网站制作过程中需要反复用到的，所以学生应熟练掌握。 教学目标分析 R知识目标/技能目标 ·知识目标 ⑴认识网页的工作原理； ⑵了解网页编辑的一般过程。 ·技能目标 ⑴熟练掌握在网页中输入文字、插入图片、插入水平线

的操作； ⑵掌握网页的新建、预览和保存。 R过程与方法目标 ⑴对网页操作中基本概念（首页、网页、网页标题等）有清晰的认识； ⑵在操作中体会网页中图文混排遇到的困难，探索解决之道，为下一节课──用表格布局网页的学习埋下伏笔。 R情感态度与价值观目标 感受身边版面设计的素材：广告、报刊、课本，学以致用，将其用于网页设计中。 R本课的重难点 重点：插入图片和水平线。 难点：图片和水平线属性的设置、嵌入式文件的保存。 R本课的课时分配建议 1课时 教学策略设计建议 R教法建议 因FrontPage与学生之前学习的word、Excel同属微软的office家庭软件，在操作上有许多相同或相似之处，所以在教学过程中，教师应鼓励学生对照word中的操作完成文字的输入与编辑、插入与编辑图片等操作；采用分组设置、对比效果的形式探究“水平线属性”对话框中各参数的含义，

《静态网页制作(Dreamweaver)》课程教案首页

河北工业职业技术学院 《静态网页制作（Dreamweaver）》课程教案首页

系（部）：计算机技术系教研室：网络技术教研室主任签字： 年月日

学习单元六以“个人主页”项目为驱动的阶段复习 授课内容：以“个人主页”项目为驱动的阶段复习 学时：2学时（90分钟） 教学目标： 知识目标： ?回顾常用标签的用法 ?强化样式的综合应用 ?理解盒子模型的意义 ?掌握浮动布局和定位 技能目标： ?通过CSS+DIV技术设计并实现一个完整网站项目的创建 ?灵活运用盒子模型灵活设计网页布局 ?灵活运用浮动和定位布局页面 素质目标： ?培养学生团队合作意识 ?培学生的设计和创意能力，提升学生对于网页设计的热情 教学内容： 1、网站设计流程 2、规划网站目录结构 3、利用HTML基本标签创建网页结构 4、利用浮动或定位设计页面布局 5、通过CSS样式修饰 6、进行网站测试 教学重点： ?利用浮动或定位设计页面布局 ?通过CSS样式修饰 教学难点： ?利用浮动或定位设计页面布局

教学方法和策略： ◆教学方法： 采用项目驱动法、分组竞争法、案例演示法提高学生的学习兴趣 ◆教学策略： 通过分组讨论、竞争的方式激发学生的学习热情 教学设计思路： 1、通过教师演示项目，采用项目驱动法引导学生进行阶段知识的复习和回顾， 强化关键知识的应用； 2、让学生对完整网站首页的设计和制作有一个整体认识，提升学生进行真实项 目开发的经验和兴趣。 授课内容提纲： 一、复习旧课导出阶段项目 1、课程回顾 （1）教师综述 在前五个学习单元的课程中，我们分阶段的以“计算机技术系网站”首页项目为驱动完成了网站首页的制作，对于网站设计有了初步的认识和了解，经过阶段学习，同学们已经具备了独立设计和制作网站首页的能力。 （2）利用项目互动提问回顾知识点 ●网站设计流程？ ●盒子模型的关键属性？ ●常用的定位方式有几种？ （3）互动总结 教师通过与学生互动沟通，进行知识的归纳： ●网站的设计流程包括需求分析、制作网页效果图、创建和设计网站、测试 和发布等几个环节； ●盒子模型的关键属性包括content、border、padding和margin四个属性。 ●常用的布局方式有浮动和定位。 2、教师首先简述本项目单元重点、难点，让学生有重点的听讲。课程回顾： 【约10分钟】 ●通过互动的方 式回顾之前的 学习内容，为阶 段项目的制作 做好准备。 ●学生通过互动 方式回答教师 提出的问题。 ●认真听取教师 的总结，明确本 项目单元的学 习任务。

《网页设计与制作》教案-第17讲 使用CSS美化网页一

第17讲使用CSS美化网页一 1.1教学目标： ◆知识目标 1.熟练掌握CSS样式表的创建与编辑。 2.掌握CSS样式表的基本语法和定义位置。 3.理解CSS样式表的标签样式、高级样式、类样式的定义方法。 ◆技能目标 1.能合理创建和管理样式表文件，在网页设计中能够灵活利用CSS样式对页 面元素变换不同的视觉效果 ◆品质目标 培养学生认真细致、踏实进取的精神 1.2教学重点： 1.掌握CSS样式表的创建与编辑。 2.掌握CSS样式表的基本语法和定义位置。 1.3 教学难点 1.理解CSS样式表的标签样式、高级样式、类样式的定义方法。 1.4教学方法：讲练结合，任务驱动、分子任务操练 1.5课时安排：2课时 1.6教学对象分析： 这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学生较好的专业基础与创新创作意识。 1.7教学过程： 一、激趣导入，揭示课题 对于一个网站的多个页面文件，经常出现布局一致的情况，甚至网页的一些部分是完全相同的，比如导航栏、标题栏等，利用Dreamweave中的模板可以方便快捷地创建大量风格统 一、布局一致的网页，运用方便灵活的库文件，可省去设计者大量的重复工作。 二、使用样式表 在Internet的汪洋大海之中，怎样才能使自己的页面独树一帜？怎样使自己的页面保持统一的风格？怎样免除众多HTML标志属性设置的烦恼？Dreamweaver中的CSS（层叠样式表）可以使我们很方便地完成页面风格的设置。利用CSS不仅可以控制一篇文档中的文本格式，而且可以控制多篇文档的文本格式。因此使用CSS样式表定义页面文字，将会使设计制作工作量大大减小。一些好的CSS样式表的建立，使我们可以更进一步地对页面进行美化，对文本格式进行精确定制。 什么是样式表？样式表的英文缩写为CSS，即Cascading Style Sheet（层叠样式表）的缩写，我们又常称这为风格样式单Style Sheet，顾名思义，是用来进行页面风格设计的。比如，想让链接文字未点击时是蓝色的，当鼠标移上去时，链接文字变成红色的且带下划线，这就是一种风格。通过设立样式表，我们可以统一地控制HMTL中各标志的显示属性。CSS样式可以看作是对HTML语言功能的一种扩展。很多时候HTML语言的功能是有限的，举一个例子来说。在HTML语言中，字号（Size）设置只有7种，无法像Word一样采取熟悉的磅值。使用了样式表，就可以对一些HTML标签进行重新定义和扩展，甚至创建自己的特效。默认

《网站主页的设计》教学设计

《网站主页的设计》教学设计 浙江绍兴市第一中学信息处董烨华 一、教材分析 本节课讲授浙江教育出版社《信息技术基础》第六章“网页的设计与制作”的相关，并根据《浙江省普通高中新课程实验信息技术学科教学指导意见》进行了适当设计，教学侧重于让学生掌握网站的策划与构思和熟练掌握简单网页的设计与制作。 二、学情分析 学生已经会收集和整理素材，掌握了用FrontPage制作网页的基本操作，对网站的策划与构思有了一定的了解，但网站创建的知识以及网站策划构思的实践比较欠缺，另外学生现有知识水平存在一定差异。 三、教学目标 知识与技能：能较熟练地运用表格实现网页布局；知道创建网站的一般过程，了解一些主页设计的知识；初步掌握网站的策划与构思。 过程与方法：通过自主探究和小组合作完成学习任务，掌握一些探究学习的方法，培养与他人协作、交流的意识和能力。 情感、态度与价值观：通过网站主页设计，激发学生的创作欲望，提高学习信息技术的兴趣和愿望；通过教师提供的创作背景信息，使学生更关注气候变化对人类发展的影响，增强社会责任感。 四、教学重难点 重点：学会运用表格实现网页布局，初步掌握网站的策划与构思。 难点：如何在主页制作中实现自己的网站设计构思。 五、教学过程 1．教学引入，学习准备 教师指导学生访问课堂学习网站（如图1），然后介绍网站的创作构思与特点。 师：这是老师为课堂学习专门设计制作的一个网站，请同学们从“名称贴切、主题鲜明、内容丰富、结构清晰、界面友好美观”五个角度，给网站做个评价，认为都满意就赶快伸出五个手指头。

学生们高举手臂，伸出五个手指。 师：谢谢大家的支持，你们的认可是我创作的动力。 师：通过前段时间的学习，我们已经较好地掌握了素材收集与整理的方法；掌握了一些利用FrontPage软件做网页的基本操作；在欣赏优秀网站的基础上，对网站的策划与构思有了一定了解。这节课，我们将跟随着学习网站的导航栏，一起揭开创建个人网站的第一页──设计制作网站主页。 师：先来玩一个拼图游戏吧。 图1 学习网站首页图2 学习参考页 面 设计意图：用学习网站吸引学生的注意力，使其迅速进入课堂学习状态。通过学生评价老师的网站设计，使学生对网站策划构思中要考虑的因素有进一步认识。 2．以趣激学，化解难点 学生浏览学习网站中“拼图游戏”活动要求。 活动内容：将分割成小块的图片素材插入到教师预先设计好的网页中，完成拼图。

实战开发—制作电商网站首页面 教学设计

传智播客 《HTML5+CSS3网站设计基础 教程》 教学设计 课程名称：HTML5+CSS3网站设计基础教程 授课年级：2016年级 授课学期：2016学年第一学期 教师姓名：某某老师

201 年月日 课题名称第10章实战开发—制作电商网站首页 面 计划 课时 6课时 内容分析在深入学习了前面9章的知识后，相信读者已经熟练掌握了HTML相关标记、CSS 样式属性、布局和排版以及一些简单的CSS3动画特效技巧。为了及时有效地巩固所学的知识，本章将运用前9章所学的基础知识开发一个网站项目—电商网站首页面。 教学目标●掌握站点的建立，能够建立规范的站点。 ●完成首页面的制作，并能够实现简单的CSS3动画效果。 重点及措施教学重点：建立站点、站点初始化设置、效果图分析、页面布局、定义公共样式、首页面详细制作。 措施：通过上机操作加强学习和补充案例进行巩固。 难点及措施教学难点：建立站点、站点初始化设置、页面布局。措施：通过上机操作加强学习和补充案例进行巩固。 教学方式教学采用教师课堂讲授为主，使用教学PPT讲解。 教学过程 第一、二课时 （准备工作，讲解建立站点、站点初始化设置、效果图分析、页面布局、定义 公共样式） 说明： ●将10.1节作为两个课时进行讲解。 复习上节课内容 在讲解本节内容前，抛出以下问题让学生回答，以复习第九章的相关知识。 1、上一章中，我们学习了CSS3高级应用，主要包括过渡、变形、动画等。那么，请同学们回顾下：过渡效果包含哪几个？ 答案： 过渡属性主要包括transition-property、transition-duration、transition-timing-function、transition-delay四个属性。 说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。 本课时内容学习 ?分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： 制作网页时通常需要先建立站点，那么，建立站点对网页的制作有什么好处呢？

“首页的设计与制作”教学设计新部编版

教师学科教案[ 20 – 20 学年度第__学期] 任教学科：_____________ 任教年级：_____________ 任教老师：_____________ xx市实验学校

“首页的设计与制作”教学设计 横山桥初级中学耿建明 一、教材分析 《制作多媒体作品》是苏科版八年级信息技术第九章第三节的内容。本节内容是本章的重点，主要任务是利用PowerPoint制作一个完整的多媒体作品，并进行作品的发布与评价。 第1课时“首页的设计与制作”要求学生熟练掌握幻灯片母版的设制，文本、图片、背景音乐的插入。这些操作既是制作多媒体作品的基础，又是它的重点。学生掌握这些基础操作为本节第2、3课时作铺垫，同时又为《设计主题网站》的学习打下坚定的基础。 首页设计是对信息技术综合知识的体现，更是对学生所学知识的一个反馈和提高的过程，对学生充满着挑战，能够让学生在现有的基础上，产生一种求知与创作的冲动，培养学生的兴趣和审美能力。 二、教学对象分析 本节内容的教授对象为初二年级的学生，在这之前，学生们已经掌握了Word、Excel软件的使用。PowerPoint与Word、Excel都是Office这个大家族的成员。因此它们的有些功能和操作相近，而且信息技术中菜单、工具的使用大同小异，学生可以联系以往的操作，融会贯通并自主探究PowerPoint软件的基本功能，解决一些实际问题。 PowerPoint与Word、Excel相比，又有很多自己独特的功能，由于各学生的基础不一样，所以学生掌握程度参差不齐，这种问题在综合课上尤其突出。如果完全让学生自己摸索有一定的难度，如幻灯片母版的操作，即使学生能参照教材步骤完操作，但不一定知道幻灯片母版的作用，所以，我认为这一部分内容要有教师讲演。 三、教学目标 知识与技能：学会利用PowerPoint制作多媒体作品的首页；熟练掌握PowerPoint的基本操作 过程与方法：以制作苏州园林首页为任务，通过学生自主探究学习，培养学生综合运用知识解决实际问题的能力 情感态度与价值观：体验多媒体作品的魅力，激发学生学习制作多媒体作品的兴趣；领悟多媒体作品的创作思想，培养学生主人翁意识，培养学生的审美意识以及创新意识，通过“亚运会特刊”首页的设计与制作增强学生的热爱国家的情感。 四、教学重点、难点 教学重点：多媒体元素的插入与编辑。 教学难点：幻灯片母版的设置。 五、教法、学法分析 1、教法：任务驱动法、自主探究法 （1）游戏驱动：利用作品带领学生进入一个创作的情境,利用游戏任务驱动------闯关，一步一步的深入，充分调动学生的学习积极性，使学生在不知不觉中巩固了知识，完成了首页的设计与制作，使课堂能在生动有趣的氛围中进行。

《创建站点制作首页》教学设计及反思

野生动物的呼唤 ——创建站点制作首页 ■教材分析 本课是苏科版《初中信息技术》教材上册第十章第二节的内容，对应《江苏省义务教育信息技术课程指导纲要》中必修基础“信息的发布与交流”模块。网站设计是初中信息技术必修部分的最后一章，本课是利用软件制作网站的实践第1课时，教材中所使用的软件是Frontpage，遵循与时俱进的原则，尝试用功能强大的Dreamweaver软件进行教学，在教学内容上作了适当调整与整合，包括站点的创建、应用表格布局网页以及插入图片文本等对象。 ■学情分析 这一节课是初二年级的借班上课，到目前阶段学生已学习了多种软件的使用，应该具备了常规的操作技能，教学内容中插入图片文本等对象，学生可以借助已有的认知经验迁移学习，但是新软件的使用学生需要一个适应过程，还有应用表格布局网页，这一点要使学生能做到灵活运用有一定难度，力图通过示例讲解练习有机结合，以期使学生通过一节课的学习，能创建站点并制作出布局工整的首页，在体验成就感的同时初步感知制作网站的过程，从而增强对网页制作后续学习的兴趣。 ■教学目标 1．知识与技能: （1）认识Dreamweaver窗口的组成，能够熟练运用Dreamweaver打开和保存网页文件。 （2）学会在Dreamweaver中建立站点。 （3）学会利用表格的相关操作布局网页。 （4）掌握插入文本、图片等对象的方法，并能根据需要设置属性。 2．过程与方法: 通过亲历建立网站、布局网页和插入对象的操作过程，在不断尝试中理解和学习基本知识。 3．情感态度与价值观: （1）引导学生在学习新软件时与已有知识经验相类比，养成勤于总结的习惯，体会学习要讲究方法。 （2）通过制作主题网站，在创建站点和制作首页的过程中，树立人与动物和谐相处，珍爱、善待和保护动物的观念，同时在不断完成任务的过程中体验成功的喜悦。 4．行为与创新: 在制作首页的过程中，学会科学运用各种元素并进行合理布局，个性化地表达思想和情感。 ■课时安排 安排1课时 ■教学重点与难点 1．教学重点 （1）创建站点并理解各参数选项的设置。 （2）利用表格的相关操作布局网页。 （3）插入文本图片等对象以及属性的设置。 2．教学难点

HTML网设计教案

《HTML 网页设计》教案 列 1 号

《HTML网页设计》教案（续页）第 2 页

图1- 1 组织教学 3分钟 （一） 创设情境， 引入课题 10分钟 （二） 实例探究 例1 5+8分钟 师生致礼、点名、检查学生准备情况、使学生集中注意力上课。 （组织教学贯彻于上课的始终） 在实际生活中，我们常常会上网获取各种各样的信息，完成各种各样的工作，上网展示在大家面前的是丰富多彩的网页，比如…… 注意 ．．： （1）网站与网页的概述 ．．．．．．．． （2）网页的基本元素 ．．．．．．． （3）网页布局 ．．．． （4）配色原则 ．．．． （5）HTML ．．．．与渲染 ．．． 教师活动：利用多媒体展示实际网页，引导学生思考。 教学意图：创设问题情境，激发学习动机。 例1．中国最成功的个人网站--hao123网址之家，在经过大家羡慕模仿复制以后，为什么依然风采依旧，而且是独树一帜，hao123网址之家最好的亮点就是 他的创意了，在他运作起来并且迅速被大家认可的时候，大量站点的模仿以及复 制其实是等于对他的运作模式的认可，对于这么个站点的结构内容以及程序方面， 大家都已经认为了他一点技术含量没有，但是为什么他就这样一直做的很好，而 别的网站倒的倒，改行的改行，那么“hao123网址之家”他到底好在哪里？ 教师活动：启发诱导，师生互动，把实际问题转化为专业问题。 学生活动：通过讨论、思考回答问题，把实际问题转化为思考专业问题。 教学意图：通过具体网页发起问题探究，掌握网页设计的原则。增强学生应用专业知识的意识。 《HTML网页设计》教案（续页）第 3 页 教学过程及 时间分配 教学内容 图1- 2

框架网页的制作教案设计与反思

框架网页的制作教案设计与反思 江苏省宜兴市和桥镇第二中学吕超 邮编：214211 E-mail：lvchao012326@https://www.wendangku.net/doc/d05421271.html, 一、教学目标： 1、知识与技能： （1）、了解框架结构网页的概念及在网页中的作用，了解它与表格网页的区别。 （2）、掌握框架结构网页的建立、框架结构的拆分、框架的删除等。（3）、掌握框架中页面设置及保存的方法，如设置初始网页按钮、新建网页按钮等。 2、过程与方法： （1）、能够区分框架结构属性设置与网页属性设置的不同点。（2）、通过框架结构网页设计，使学生对网页的整体结构有更进一步的认识。 3、情感态度与价值观： （1）、能够将表格与框架结构网页结合使用，在创作中体验乐趣。（2）、培养学生网页设计的审美意识、创新意识。 二、教学重点难点： 1、教学重点： （1）、框架网页的作用和功能，框架的建立与属性设置。 （2）、框架中各个页面之间的关联，每个框中页面的设置方法。（3）、框架网页的保存方法。

2、教学难点： （1）、框架结构网页中框架属性与页面属性的设置方法。 （2）、理解框架结构的多页面存储方法及各页面之间的关联。 三、教学过程： 1、创设情境、导入新课 （1）、教师展示一组表格制作的网页，引导学生找出它们的共同特点。并提问如何快捷地制作这种网页（学生回答：使用复制、粘贴快捷地制作）。 （2）、教师又提问：有没有更好的方法呢？相同的区域我们能否只做一遍呢？从而导入新课——框架网页的制作。 设计意图：通过对比、比较，引导学生思考，激发学生学习的乐趣。 2、任务驱动、自主学习 （1）、教师展示一个框架网页，引导学生理解框架网页的概念。（2）、出示任务一：框架网页的新建与保存。教师要求学生先阅读教材中的操作步骤，再尝试完成书本第227页的实践学习。 （3）、教师讲解框架结构中的每个框都是一个独立的选项文件，即网页文件，因此当框架确定之后，需要为每个框分别指定其网页文件的来源，可以通过每个框中的“新建网页”按钮和“设置初始网页”按钮进行选择。 （4）、学生理解框架网页的概念，通过阅读教材中的内容，自学新建框架网页的操作，初步了解“新建网页”和“设置初始网页”两个按钮的不同，并认真聆听教师的讲解，注意观察，按要求模仿操作。

《 设计与制作网站首页界面》项目教学设计

《设计与制作网站首页界面》项目教学设计一、任务描述 网站是众多企业、团体和个人宣传产品、主张和树立良好形象的主要途径和重要手段。据不完全统计，当前100%的大型企业、60%的中小企业都已经或将要在互联网上建立的自己的网站，要使我们的网站在众多网站中脱颖而出，其界面的设计就显得十分重要。 网页界面设计其实是一个系统工程，它包括网站页面布局、设计，颜色的搭配、尺寸的大小和风格的定位等。网站首页界面是整个网站的“面子”工程，首先突出的是功能，使用户只要看一眼网站，就能够知道该网站的类型。其次就是能够给访问者带来一种视觉享受，特别是展示、宣传型的网站需要更加注重艺术设计。 在本任务就是要求学生使用Photoshop CS6软件设计、制作设计制作网站首页界面。 二、任务目标 学生通过完成本项目，达成以下目标： 知识与技能：能够使用切片工具处理图像；了解优化图像命令选项优化Web 图像的使用方法；了解界面设计与制作；尝试使用动作处理图像。

方法与过程：能够根据任务的要求，确定完成任务的所需要的技术，并较熟练的完成任务；能对自己和他人的活动过程与结果进行评价与交流，能归纳利用信息技术解决问题的基本思想与方法。 情感、态度、价值观：通过完成本任务，能够感受到信息技术对社会发展、工作效率的影响。 三、任务分析 房地产宣传展示型的网站内容不多，架构不复杂，更注重的是形象和标的（楼盘）的展示。因此，我们将“怡海新城”的实景图处理成宽幅画面作为主题放置在首页中间的位置，占据一半以上的版面。网站分类栏目按钮放置在主题图下面，当用户需要进一步了解详细内容时，单击按钮即可进入二级页面。同时将公司的名称、楼盘名、经营理念和联系方式分别放置在页面的上下端，给用户更多的信息。 根据网站的特点，本首页采用800像素×520像素大小，使用图像自动合并、色调调整等技术进行整体设计，然后采取切片的方法分别保存文件，有利于网页的编辑和浏览。 四、活动策略 在本任务活动的过程中，教师首先要引导学生认识网站首页，知道网站首面构思、设计的一般方法。然后引导学生尝试自动命令拼合图像，使用切片工具切分图像的操作。当学生具备了设计与制作网站首页界面的知识与技术后，即可引导其完成本项目——网站首页界面的设计与制作活动。 在本任务活动过程中，学生技术方面的获得，大部分内容从阅读教材、观看操作录屏、教师演示示范即可达到目标，教师还需要引导学生了解网页中图像相关规则、颜色搭配、文件格式、设计创意等方面的知识。因此，教师可以结合本项目，引导学生收集、阅读网页设计方面的书籍或资料，观看比较成功的网页设计作品，从而启发迪设计创作思维，提高其综合设计的素养。 完成本任务的过程中，需要较长的时间。学生通过多次操作，更进一步熟练使用已经会使用的工具与技术，使学生达到自动化的目的。因此，我们采取“创设情境→任务分析→找出问题（知识储备）→解决问题→任务实施→活动评价→拓展提高”的流程，达到完成任务的目标。

网页制作教学设计

网页制作的教学设计 一、教学目标 1 、知道站点、主页的概念，能在指定位置建立只有一个网页的站点； 2 、认识FRONTPAGE 的界面； 3 、掌握在主页中插入文字、图片、水平线； 4 、掌握页面文件与图片的保存。 二、教学重点 1 、能在指定位置建立只有一个网页的站点（难点） 2 、能在页面中插入文字、图片、水平线 3 、掌握页面文件与图片的保存（难点） 三、学情分析 学生已经学习了WORD 、POWERPOINT 与上网浏览信息，对计算机的基本操作（WORD 中文档的编辑，网页的浏览等）比较熟练。这使得学生主动探索、自主学习成为可能。每位学生必须完成基本任务，有能力的学生还可以完成提高篇的学习，以充分发挥学生的积极性与自主性。 四、教学方法 在教学中，一方面采用比较教学的方法，促进学生知识的迁移；另一方面，提供学生一个导学课件，让学生根据这个网络环境下的课件自己探索学习，以满足不同层次学生的需求。 五、教学过程设计 教师活动：1 、引入课题：（激发兴趣，活跃气氛） 同学们喜不喜欢上网？经常上新浪、西祠胡同等，有没有同学知道新浪、西祠胡同称做什么？（网站） 浏览新浪网站，浏览的第一个页面称为什么？（主页） 我们还可以浏览其它的页面，点击超链接浏览，当鼠标变成手指的形状时有超链接。 问题1 ：网站是不是就是网页？用自己的语言描述一下网站的概念（网站包含多个网页，

通过超链接把不同的页面链接起来） 问题 2 ：网页是不是就是主页？( 第一个页面称为主页, 网站设计者可以确定哪一个是主页, 主页的文件名一般为：index.htm, 主页也是网页) 设计网站一般必须经过两个步骤，首先是在计算机里做好，然后发布在internet 上，让所有的人访问浏览。 今天我们学习用Frontpage 建立站点，制作一个主页。 先来研究一下没有发布的网站, 打开教师做的网站 问：同学们看到了什么？（文件夹） 总结： 可以这样理解网站：在资源管理器里，网站表现为一个文件夹，里面存放的是所有与网站相关的文件。 打开主页，浏览页面，这是老师做的一个导学课件，将帮助大家完成学习任务。 请学生浏览教师课件，了解学习任务 2 、新建站点 FP 的启动 问：与word 比较，有什么不同？ （增加了视图区，编辑区有三个窗口） 总结： 视图区：多种视图模式是为了方便网站的管理。制作网页时，必须在网页视图中编辑页面 普通窗口：鼠标在闪动，可编辑、修改页面，所见即所得的方式 预览窗口：浏览器中出现的效果，与PowerPoint 中的“放映幻灯片”类似。 Html 窗口：编写HTML （超文本标记语言，它是描述网页内容和外观的标准。） 打开导学软件，根据步骤，示范建立只有一个网页的站点，强调新站点的位置、路径的正确输入，站点的名称。

HTML网设计教案课程

《HTML网页设计》教案 列 1

《HTML网页设计》教案（续页）第 2 页

图1- 1 组织教学 3分钟 （一） 创设情境， 引入课题 10分钟 （二） 实例探究 例1 5+8分钟 师生致礼、点名、检查学生准备情况、使学生集中注意力上课。 （组织教学贯彻于上课的始终） 在实际生活中，我们常常会上网获取各种各样的信息，完成各种各样的工作，上网展示在大家面前的是丰富多彩的网页，比如…… 注意．．： （1） 网站与网页的概述．．．．．．．． （2） 网页的基本元素．．．．．．． （3） 网页布局．．．． （4） 配色原则．．．． （5） HTML ．．．．与渲染．．． 教师活动：利用多媒体展示实际网页，引导学生思考。 教学意图：创设问题情境，激发学习动机。 例1．中国最成功的个人网站--hao123网址之家，在经过大家羡慕模仿复制以后，为什么依然风采依旧，而且是独树一帜，hao123网址之家最好的亮点就是他的创意了，在他运作起来并且迅速被大家认可的时候，大量站点的模仿以及复制其实是等于对他的运作模式的认可，对于这么个站点的结构内容以及程序方面，大家都已经认为了他一点技术含量没有，但是为什么他就这样一直做的很好，而别的网站倒的倒，改行的改行，那么“hao123网址之家”他到底好在哪里？ 教师活动：启发诱导，师生互动，把实际问题转化为专业问题。 学生活动：通过讨论、思考回答问题，把实际问题转化为思考专业问题。

教学意图：通过具体网页发起问题探究，掌握网页设计的原则。增强学生应用专业知识的意识。 《HTML网页设计》教案（续页）第 3 页 图1- 2