网站欣赏与创建网页-教案（大全）

第一篇：网站欣赏与创建网页-教案（大全）

网站欣赏与创建网页教学设计

一、教材分析

本节课选自清华大学出版社出版的初中信息技术八年级下册第一单元第1课。本教材贯彻“以学生为主体，教师为主导”的方针，把提高学生的积极性，培养学生的创新能力作为教育的根本目标。本节课所学的《网站欣赏与创建网页》是第一单元的首要内容，本单元是学生初次接触用于制作网站的软件Dreamweaver，让学生了解网页设计、网站制作等的基本知识是必要的，是在学生掌握了计算机基础知识后的能力提高训练，激发学生制作出更加精彩的个人网页。

二、学生分析：

八年级的学生思维活跃，想象力丰富，好奇心强，同时又有了一定的自学能力和动手能力。大多数学生都有QQ号，会使用QQ空间、微博等，学生有一定的信息技术基础和实践操作能力。特别是通过对Internet相关知识的介绍及大量网站的浏览，对网页内容、网页结构、效果等设计的优劣都有了一定的感性认识，并且有了一定的分析、评判的能力，基本上完成了知识和能力的积累。学生对网络学习都有着强烈的好奇心和兴趣，但对网络知识的认识不够全面，需要教师在教学实践中加以引导。

三、教学目标

知识与技能：掌握浏览网页的方法；掌握互联网、网站、网页、首页等术语的含义，以及它们之间的关系；学会使用记事本作为网页编辑工具来编辑HTML代码并生成网页。

过程与方法：通过让学生浏览并介绍他们感兴趣的优秀网站，让学生掌握浏览网页的方法。结合启发、设问、打比喻等方法，使学生尽可能地自己总结出相关知识。通过打字比赛，让学生积极的录入HTML代码。让学生在此过程中，初步认识HTML语言。在修改文档的过程中，探索标签的含义及其与属性值的对应关系。

情感态度与价值观：培养学生的自学探究能力、合作竞争意识和创新精神；引导学生正确地理解网络用途，充分地利用网络为学习服务。

四、教学重难点

重点：网页设计与网站制作的基本知识是本课的教学重点。

难点：学会使用记事本作为网页编辑工具来编辑HTML代码并生成网页。

五、教学过程

（一）激趣导入

提问：同学们最喜欢的在线小游戏网站是什么？学生回答，然后选择学生演示浏览网页的过程。师生一起归纳浏览网页的方法：

1、利用导航网页；

2、利用百度搜索；

3、直接输入网址。设计意图：通过小游戏网站讲解浏览网页的方法，吸引所有学生的注意力，从而提高了学习兴趣。如果不讲解打开网页的方法，会有一部分学生产生疑问，但是如果由老师演示，基础好的学生会因为太简单而失去学习动力，所以我选择让学生演示。这样安排既照顾到不经常接触网络的学生，又给操作熟练地学生一个展示自己的机会。

（二）自主学习

任务1：浏览“学生科技网：http://代码，记事本保存为index.html。

提问2：打开index.html文档,浏览网页,查找页面中的不同？（字体、字号、颜色等的设置）

设计意图：让学生复制粘贴代码，通过在页面中寻找不同，引导学生去读代码，初步认识HTML语言的结构。

在操作中感受扩展名对文件的影响。

教师演示作比较，引导学生思考扩展名对文件的影响，既包括其对文件图标的影响，也包括调用应用程序的影响，并引出HTML语言。

（三）合作交流

任务3：观察HTML代码，找找HTML语言有什么特点？修改代码，改变网页。

学生能观察到都是“成对”出现的。“成对”出现的代码叫标签。每个标签的含义都不一样，对照你的网页，大家能不能猜出这些标签的含义？现在因为代码都相同，所以大家的网页都是一样的。是不是觉得这个网页不是完全属于自己？大家试着通过修改、添加、删除代码，让自己的第一个网页和别人的都不同。

设计意图：教师的分析点到为止，引导学生自主探索标签的含义及其与属性值的对应关系。如果直接讲解然后让他们修改，大部分学生会因为觉得没有挑战性，而降低了学习的积极性。这同时是对课本“创作天地”板块中的练习。

（四）展示评价

教师挑出几个比较有代表性的网页，让学生去欣赏作品，互相看一看，评一评，说一说，虚心的学习他人的长处。同时教师适当评价成功之处，对不足的地方加以完善。

学生通过比较作品体验创造的快乐并且反思自身作品，迸发灵感，二次创作，这样在整个班级中将会产生更多的富有创意的优秀作品。

（五）布置作业

在index.html文件中增加标题“遵义市第十六中学简介”，正文字体设为“宋体”，字号设为14pt，颜色设为红色。

第二篇：《网站建设与网页设计》教案

《网站建设与网页设计》

教案

学期：2014-2015-1 班级：2012软件工程

2012计算机科学与技术

课时：44学时教师：李念

第1讲 HTML基础

1.1 教学目的和要求

1.了解HTML的发展历史和HTML5的特性；

2.掌握HTML的文档结构、代码规范和网页文件的创建过程； 3.掌握搭建支持HTML5浏览器环境的方法。

1.2 教学重点和难点

1.HTML5的新特点； 2.HTML5的新元素；

1.3 教学方法及手段

实例教学，讲授与演示结合。

1.4 教学内容

1.4.1 HTML简介

HTML是HyperText Markup Language（超文本置标语言）的缩写，是一种为普通文件中某些字句加上标签的语言，其目的在于运用标签（tag）对文件达到预期的效果。

HTML5的特性及元素：

(1)实现Web应用程序：绘画的Canvas元素，该元素就像在浏览器中嵌入一块画布，程序可以在画布上绘画；更好的用户交互操作，包括拖放、内容可编辑等；扩展的HTMLDOM API（Application Programming Interface，应用程序编程接口）。

(2)更好地呈现内容：基于Web表现的需要，HTML5引入了更好地呈现内容的元素；用于视频、音频播放的video元素和audio元素；用于文档结构的article、footer、header、nav、section等元素。

1.4.2 HTML编写规范

HTML文档由标签和被标签的内容组成。标签能产生所需要的各种效果。其功能类似于一

个排版软件，将网页的内容排成理想的效果。其格式为：

<标签> 受标签影响的内容每个标签都有一系列的属性。标签通过属性来制作出各种效果，格式为： <标签

属性1=“属性值1” 属性2=“属性值2” „> 受标签影响的内容。不推荐使用的标签：在HTML中，某些标签不推荐使用，例如，、、、、、、、、、等标签。

代码的缩进：在编写HTML代码时要注意使用代码缩进来提高程序的结构性和层次性。

1.4.3 网页文件的创建过程

用记事本创建网页用DW软件创建网页

1.4.4 搭建支持HTML5的浏览器环境

目前，Microsoft的IE系列（仅有IE9及其以上版本）浏览器，以及Opera Software的Opera与Google的Chrome浏览器。

1.4.5 小结

本次课主要讲述了网页设计的步骤和要点以及HTML5的新特征。

第2讲 HTML标签

2.1 教学目的和要求

1.掌握基本的文字与段落标签的使用；

2.掌握超链接、图像、表格和列表标签的使用方法和基本属性； 3.能够进行基本的网页排版。

2.2 教学重点和难点

1.各类标签的使用方法和属性设置； 2.嵌套列表的使用。

2.3 教学方法及手段

实例教学，讲授与演示结合。

2.4 教学内容

2.4.1 文字与段落排版

注释标签强制换行标签段落标签

„

定位标签„第三篇：网页设计与网站建设《网页设计与网站建设》实验教学大纲课程编号070105007 学时学分：总学时：64总学分：4实验学时： 32适用对象：计算机科学与技术及相关本科专业课程属性：专业方向课实验属性：非独立设课一、课程的性质与任务随着Internet的普及，网页已经成为人们信息发布及获取、思想交流和商务往来最重要的途径，网页制作已成为当今社会上一种比较热门的技术，本课程突出实用技术和应用技能，是计算机专业学生的一门必选课，同时又可作为相关专业学生的选修课。网页设计课程是学生在学习了高级程序设计语言、数据库原理及应用等课程的基础上开设的一门实用性较强的课程，实验课的任务是通过实验加深对理论知识的理解，基本掌握WEB应用的规划、设计和动态网页制作中对于内容的动态显示与更新技术，培养学生的动手能力和设计能力。二、实验的目的与基本要求实验目的：通过实验让学生掌握网站的配置方式和网页设计的基本方法。基本要求：（1）掌握页面的设计与布局的基本方法；（2）掌握JS脚本语言的使用方法；（3）掌握asp.net控件（包括HTML控件与服务器端控件）的使用方法。三、实验考核方式及办法实验成绩根据学生的实验完成情况、实验纪律、实验报告进行综合评定，给出优（90-100）、良（70-89）、及格（60-69）、不及格（60以下）。实验成绩占本课程总成绩的20%，对缺实验成绩或不及格者，《网页设计与网站建设》课程不予通过。四、实验项目一览表网页制作实验项目一览表序号2 3 4 5实验项目名称 div布局 css层叠样式单 JS脚本 asp.net控件 ado.net数据库连接实验类型验证性设计性设计性设计性设计性实验要求必做必做必做必做必做适用专业理工类理工类理工类理工类理工类学时6 6 6 8 五、实验项目的具体内容：实验一div布局 1．本次实验的目的和要求掌握网页设计的DIV布局方式，能够使用DIV进行层布局，认真撰写实验报告，严格遵守实验室规章制度。 2．实验内容或原理掌握dream weaver软件的基本功能，熟悉dream weaver的工具箱,使用DIV做层布局。 3．需用的仪器或试剂等多媒体计算机，操作系统Windows 2000/XP以上，并安装有dream weaver软件，搭建好asp.net的开发环境。 4．实验步骤（1）打开dream weaver软件；（2）使用div布局设计网页；（3）div的布局设计与修改。 5．教学方式学生主要通过上机实验，在相应的软件环境下学习处理，教师实时指导。 6．考核要求实验过程中能认真独立完成实验，实验完成后及时上交实验报告，实验过程的表现和实验报告成绩记入平时成绩。 7．实验报告要求实验报告格式正确，书写工整，字迹清楚，步骤叙述清楚，实验结果符合逻辑。实验二css层叠样式单 1．本次实验的目的和要求通过dream weaver软件的使用，掌握使用css层叠样式单做布局样式控制的方法，要求认真撰写实验报告，严格遵守实验室规章制度。2．实验内容或原理通过dream weaver软件的使用，使用css层叠样式单做布局样式控制。3．需用的仪器或试剂等多媒体计算机，操作系统Windows 2000/XP以上，并安装有dream weaver软件，建好asp.net的开发环境。4．实验步骤（1）打开dream weave软件。（2）用css层层叠样式单做布局样式控制。（3）css层叠样式单编写与调用。5．教学方式学生主要通过上机实验，在相应的软件环境下学习处理，教师实时指导。6．考核要求实验过程中能认真独立完成实验，实验完成后及时上交实验报告，实验过程的表现和实验报告成绩记入平时成绩。7．实验报告要求实验报告格式正确，书写工整，字迹清楚，步骤叙述清楚，实验结果符合逻辑。实验三JS脚本 1．本次实验的目的和要求掌握JS脚本的基本用法、变量、函数、DOM文档对象的操作。要求认真撰写实验报告，严格遵守实验室规章制度。2．实验内容或原理 JS脚本的基本用法、变量、函数、DOM文档对象的操作。3．需用的仪器或试剂等多媒体计算机，操作系统Windows 2000/XP以上，并安装有dream weave软件。4．实验步骤（1）打开dream weave软件。（2）新建JS文件，编写脚本程序实现对JS脚本的变量、函数、DOM文档对象的操作。（3）外部调用JS文件。5．教学方式学生主要通过上机实验，在相应的软件环境下学习处理，教师实时指导。6．考核要求实验过程中能认真独立完成实验，实验完成后及时上交实验报告，实验过程的表现和实验报告成绩记入平时成绩。7．实验报告要求实验报告格式正确，书写工整，字迹清楚，步骤叙述清楚，实验结果符合逻辑。实验四 asp.net控件 1．本次实验的目的和要求掌握asp.net控件（包括HTML控件与服务器端控件）的使用方法。实验后要求认真撰写实验报告，实验过程中严格遵守实验室规章制度。2．实验内容或原理运用所学知识，用HTML控件与服务器端控件进行编程，实现简单功能。3．需用的仪器或试剂等多媒体计算机，操作系统Windows 2000/XP以上，并安装有asp.net开发平台。4．实验步骤（1）打开asp.net开发平台。（2）新建空白页面或者空站点。（3）用HTML控件与服务器端控件进行编程并调试。5．教学方式学生主要通过上机实验，在相应的软件环境下学习处理，教师实时指导。6．考核要求实验过程中能认真独立完成实验，实验完成后及时上交实验报告，实验过程的表现和实验报告成绩记入平时成绩。7．实验报告要求实验报告格式正确，书写工整，字迹清楚，步骤叙述清楚，实验结果符合逻辑。实验五ado.net数据库连接 1．本次实验的目的和要求掌握ado.net数据库连接的基本概念、ADO.NET对象模型、SqlConnection对象。 2．实验内容或原理建立ado.net数据库连接，ADO.NET对象模型、SqlConnection对象。3．需用的仪器或试剂等多媒体计算机，操作系统Windows 2000/XP以上，并安装有asp.net开发平台。4．实验步骤（1）打开asp.net开发平台。（2）建立ado.net数据库连接。（3）通过SqlCommand对象提供的方法传递对数据库操作的命令，并返回命令执行的结果。5．教学方式学生主要通过上机实验，在相应的软件环境下学习处理，教师实时指导。6．考核要求实验过程中能认真独立完成实验，实验完成后及时上交实验报告，实验过程的表现和实验报告成绩记入平时成绩。7．实验报告要求实验报告格式正确，书写工整，字迹清楚，步骤叙述清楚，实验结果符合逻辑。六、实验教材及主要参考资料翁健红编著，基于C#的ASP.NET程序设计(第2版)，机械工业出版社七、教改说明及其他在实验教学过程中可以结合优秀网站分析、优秀作业点评、作业中普遍存在的主要问题及改正方法的分析等方法相互穿插结合进行教学。第四篇：07创建超链接和网页教案案例名称创建超链接和网页模板一、教材内容分析本课主要有三个教学内容：制作“超链接”，设置超链接颜色和设置超链接热区。学生对超链接的内容是比较陌生的，所以首先让学生明确超链接的概念。学生明确超链接后教师再讲如何创建超链接的创建。字超链接是最普通的一种超链接形式，教师在讲解这个操作时重点要说明的是要确定超链接的目标。超链接的目标有多种，如网页、图片、音乐、视频等，本课要求学生掌握链接到网页就可以了。图片超链接和文字超链接建立的方法是一样的。超链接热区的建立重点是自选图形的使用。本课重点是超链接的建立，学好本课为后面的网页、网站的设计打下基础。二、教学目标（知识，技能，情感态度、价值观）知识与技能：1．建立文字超链接、图片超链接、电子邮件的超链接； 2．学会设置超链接颜色和设置超链接热区。过程与方法：1．通过创建网页超链接的操作，使学生了解网页中创建超链接的基本方法，消除对网页链接的神秘感； 2．通过教师讲解、演示，学生观察、动手操作、理解记忆等学习方法，使学生学会正确建立和修改文字及图片超链接的操作。情感态度与价值观：1．完成文字和图片超链接的创建，使学生感受成功的喜悦和快乐。2．培养学生勤于思考和自己动手探索新知识的良好学习品质。三、学习者特征分析 1．该班级学生基础知识比较扎实，思维活跃，学习兴趣浓厚，课堂参与积极、主动。2．该班级学生能熟练掌握电脑的基本操作，能够在网络环境下顺利的开展自主和合作探究活动。 3．该班级学生对超链接这部分内容还不熟悉，对于超链接及超链接热区的创建的实际操作能力有待提升。四、教学策略选择与设计直观演示与自主学习相结合，合作练习与教师的讲授相结合五、教学环境及资源准备多媒体教室、自制教学课件六、教学过程教学过程教师活动学生活动设计意图及资源准备质疑导入首先，老师演示自己制作的网站，用超链接预览所有的网页，让学生仔细观察。然后，让学生按照老师的方法，演示自己的作品，看能不能进行，为什么？对，有“手”形的地方，就是“超级链接”。学习自主练习学生踊跃发言，说老师的网页上有“手”的形状教师制作完成《介绍我自己》网站（含有超级链接）。学生：已制作完成，共4张网页。拉进学生与知识点的距离，让学生对超链接产生神秘感。引入网页制作中合作探究（超链接的建立及超链接颜色的设置）一、超链接的建立提问：“这些超链接（文字、图片）是怎么制作的？” 教师巡视指出操作要点：建立文字超链接时需要选中制作超链接的文本！提问：超链接制作的方法？提问：超链接的对象是什么呢？二、设置超链接颜色让同学们观察建立文字超链接后文字有什么变化？我们能够修改超链接的颜色吗？按照书本上的图示，讨论、探究超链接制作的方法。学生尝试制作超链接小组发言并演示超链接的建立方法学生回答超链接的对象可以是网页、文件、网址、电子邮件等学生通过观察后回答并按照书上尝试改变超链接文字的颜色小组成员间合作练习掌握超链接文字的颜色的的设置方法培养学生的自学能力、他人交流合作的能力、语言表达能力让学生动手制作、体验超链接，提高学生的动手操作能力。培养学生与他人交流合作能力演示讲解三、设置超链接热区课件演示（设置超链接热区后）“米老鼠” 单击“米老鼠”的头链接到“第一个网页”，单击“米老鼠”的手链接到“第二个网页”，单击“米老鼠”的脚链接到“第三个网页”。教师提问：这是怎么制作出来的？教师讲解演示：通过借助自选图形来建立热区。指出操作要点：先建立自选图形，并设置自选图形的超链接，再设置自选图形为透明。鼓励学生尝试实践学生观察教师的操作，掌握操作的方法后自己实践操作加强学生对超链接的理解。消除对超链接的神秘感。展示与评价组织学生将自己的优秀制作向全班同学进行展示，并以组为单位评价作品。各小组推荐优秀作品进行展示并自评，其他小组对作品进行评价通过作品展示与评价能够相互取长补短课后拓展同学们，今天我们学习了网页间的超链接的制作方法，那么，能不能链接到其他格式的文件，如doc,exe等？课后学生合作或独立完成。拓展、作业。教学流程图七、教学评价设计 1、在学习的过程中你遇到了哪些困难，你是怎样解决的？ 2、对于熟练的学生，探究：如何制作“电子邮件”的超链接？ 3、你能为熟练设置文字和图片的超链接吗？八、帮助和总结学习了各种超链接的使用方法，同学生都做的非常好。通过本节课的学习你应该能使自己的网页更加充实和美妙。第五篇：《网页制作与网站管理》培训总结《网页制作与网站管理》省级培训总结刘玉贞在学校领导，老师的关心支持下。我于2009.7.19---2009.7.28赴德州齐河职业中专参了“网页制作与网站管理”专题培训。德州齐河职业中专位于齐河县，是国家级重点职业中专，数控专业较好。课程主讲人是来自潍坊贝通网络公司的技术主管李学军。网站的应用领域  公司，企业，事业单位的宣传  电子商务（如阿里巴巴，淘宝网）  办公系统的应用（电大教务系统）  在线考试系统的应用（山东省中职生计算机考试系统） 其他系统的应用动态网页的概念目前颇受关注的动态网页技术： 1、ASP 即Active Server Pages，它是微软开发的一种类似HTML(超文本标识语言)、Script(脚本)与CGI(公用网关接口)的结合体。它是在Web服务器端运行，运行后再将运行结果以HTML格式传送至客户端的浏览器。通过使用ASP的组件和对象技术，用户可以直接使用ActiveX控件，调用对象方法和属性，以简单的方式实现强大的交互功能。但ASP技术也非完美无缺，由于它基本上是局限于微软的操作系统平台之上，主要工作环境是微软的IIS应用程序结构，又因 ActiveX对象具有平台特性，所以ASP技术不能很容易地实现在跨平台Web服务器上工作。 2、PHP 即Hypertext Preprocessor(超文本预处理器)，它是当今Internet上最为火热的脚本语言，其语法借鉴了C、Java、PERL等语言，但只需要很少的编程知识你就能使用PHP建立一个真正交互的Web站点。主要运行在linux，Unix系统上 3、JSP 即Java Server Pages，它是由Sun Microsystem公司于1999年6月推出的新技术，是基于Java Servlet以及整个Java体系的Web开发技术。公认安全性较高。 4、ASP.NET是ASP的升级版本，但和ASP存在很大区别。ASP.NET是建立在公共语言运行库上的编程框架，可用于在服务器上生成功能强大的Web应用程序。培训所学  本次培训学习了ASP动态网页技术。  ASP环境配置，基本语法  ASP基本对象，组件的使用  用户登录模块  新闻发布模块（添加，删除，修改）  新闻显示模块  用户留言模块心得体会  在培训之前，我管理着学校的网站，对网站管理有一定的了解，但也有很多困惑。在培训中，专心听讲，遇到不明白的问题及平时管理中遇到的问题，能够及时的向老师请教，进一步提高了网站管理水平。  网站管理涉及编程，数据库，操作系统等诸多领域，并且新技术层出不穷。只有不断的学习，才能保持不被淘汰。  就业前景广阔。网络公司，软件开发公司等。

网站欣赏与创建网页-教案（大全）

第一篇：网站欣赏与创建网页-教案（大全）

第二篇：《网站建设与网页设计》教案

第三篇：网页设计与网站建设

第四篇：07创建超链接和网页教案

第五篇：《网页制作与网站管理》培训总结

相关范文推荐

网站规划书与网页制作实验报告

网页设计与制作与网站发布学习心得（范文）

《网站规划与网页设计制作》学习心得

网站建设与网页制作结业论文

《网页设计与网站建设》教学总结

网页制作与网站建设0586-教学大纲

站点的创建与网页制作

创建网页-初二信息技术教案[5篇材料]