《网页的制作》教案优秀

　　作为一无名无私奉献的教育工作者，就难以避免地要准备教案，编写教案有利于我们科学、合理地支配课堂时间。怎样写教案才更能起到其作用呢？下面是小编为大家整理的《网页的制作》教案优秀，供大家参考借鉴，希望可以帮助到有需要的朋友。

《网页的制作》教案优秀1

　　一、课程基本信息

　　课程编号：

　　中文名称：网页设计与制作

　　英文名称：Web Design and Production课程类别：选修课适用专业：所有专业

　　开课学期：20xx—20xx第2学期总学时：24学时总学分：1课程简介：

　　本课程突出网页设计与制作的现代特点，从Internet的基础知识入手，重点介绍HTML超文本标记语言，以及所见即所得的网页设计制作工具Dreamweaver的基本操作流程。从静态页面到动态页面由浅入深的介绍网页设计与制作全过程。采用案例分析和亲自实践的方式突出、突破课程的重点和难点。并指导每一名选课的同学为自己建一个博客网站，以此提高同学对网页设计与制作的兴趣和爱好。参考书：

　　1、网页设计与制作教程，熊前兴闵联营，科学出版社；

　　2、网站与网页设计，张贵明，清华大学出版社；

　　3、网页美术设计原理及实战策略，王晓峰焦燕，清华大学出版社；

　　4、网站建设典型案例，张枭，清华大学出版社；

　　二、课程教学目标：

　　网页和网站是Internet的重要组成部分，企业、公司和机构通过网站来宣传推介自己的技术和产品，个人发布主页展示自己的风采，人们从不同类型的网站来获取需要的信息。因此，设计与制作网页已经成为计算机应用技术的一个重要方面。本课程的主要教学目的.是使学生掌握网页设计与制作的基础知识，能运用网页工具设计和制作常用网页。

　　三、理论教学内容与要求

　　第一章、网页的基础知识（1学时）

　　（1）Internet基础知识

　　（2）www简介

　　（3）网页制作的技术和工具介绍

　　第二章、超文本编辑语言HTML（8学时）

　　（1）HTML文件的基本结构

　　（2）文字和段落标记

　　（3）列表标记

　　（4）图片标记

　　（5）表格标记

　　（6）超链接标记

　　（7）表单标记

　　（8）框架标记

　　第三章、JavaScript语言（4学时）

　　（1）JavaScript语言简介

　　（2）JavaScript编程基础

　　（3）基于对象的JavaScript语言

　　（4）JavaScript程序实例

　　第四章、层叠样式表CSS（1学时）

　　（1）CSS概述

　　（2）CSS属性

　　第五章、可视化网页设计工具

　　（1）网页的基本操作

　　（2）图像、表格与超链接

　　（3）表单与框架

　　（4）添加网页元素

　　（5）发布站点

　　第六章、动态网页设计语言ASP（4学时）

　　（1）ASP简介

　　（2）VBScript脚本基础

　　（3）ASP的内置对象

　　（4）实用文件

　　第七章、利用AD0访问数据库（1学时）

　　（1）数据库的连接

　　（2）数据库的检索

　　（3）数据库的操作

　　总结复习（1学时）

　　四、实验教学内容与要求

　　五、作业

　　六、考核方式

　　期末考核每个同学为自己设计制作一个博客网站。

　　七、成绩评定

　　1、自制网站（80%）

　　2、平时考勤、作业（20%）平时成绩分配：

　　平时考勤5次，每次2分，共占10%作业5次，每次2分，共占10%

　　八、执行大纲时应注意的问题

　　根据学生对课程内容的掌握和理解程度会对进度做适当的调整。

《网页的制作》教案优秀2

　　一、教学目标

　　1、知道站点、主页的概念，能在指定位置建立只有一个网页的站点；

　　2、认识FRONTPAGE的界面；

　　3、掌握在主页中插入文字、图片、水平线；

　　4、掌握页面文件与图片的保存。

　　二、教学重点

　　1、能在指定位置建立只有一个网页的站点（难点）

　　2、能在页面中插入文字、图片、水平线

　　3、掌握页面文件与图片的保存（难点）

　　三、学情分析

　　学生已经学习了WORD、POWERPOINT与上网浏览信息，对计算机的基本操作（WORD中文档的编辑，网页的浏览等）比较熟练。这使得学生主动探索、自主学习成为可能。每位学生必须完成基本任务，有能力的学生还可以完成提高篇的学习，以充分发挥学生的积极性与自主性。

　　四、教学方法

　　在教学中，一方面采用比较教学的方法，促进学生知识的迁移；另一方面，提供学生一个导学课件，让学生根据这个网络环境下的课件自己探索学习，以满足不同层次学生的需求。

　　五、教学过程设计

　　教师活动：1、引入课题：（激发兴趣，活跃气氛）

　　同学们喜不喜欢上网？经常上新浪、西祠胡同等，有没有同学知道新浪、西祠胡同称做什么？（网站）

　　浏览新浪网站，浏览的第一个页面称为什么？（主页）

　　我们还可以浏览其它的页面，点击超链接浏览，当鼠标变成手指的形状时有超链接。

　　问题1：网站是不是就是网页？用自己的语言描述一下网站的概念（网站包含多个网页，通过超链接把不同的页面链接起来）

　　问题2：网页是不是就是主页？（第一个页面称为主页，网站设计者可以确定哪一个是主页，主页的文件名一般为：index.htm,主页也是网页）

　　设计网站一般必须经过两个步骤，首先是在计算机里做好，然后发布在internet上，让所有的人访问浏览。

　　今天我们学习用Frontpage建立站点，制作一个主页。

　　先来研究一下没有发布的网站，打开教师做的网站

　　问：同学们看到了什么？（文件夹）

　　总结：

　　可以这样理解网站：在资源管理器里，网站表现为一个文件夹，里面存放的是所有与网站相关的文件。

　　打开主页，浏览页面，这是老师做的一个导学课件，将帮助大家完成学习任务。

　　请学生浏览教师课件，了解学习任务

　　2、新建站点

　　FP的启动

　　问：与word比较，有什么不同？

　　（增加了视图区，编辑区有三个窗口）

　　总结：

　　视图区：多种视图模式是为了方便网站的管理。制作网页时，必须在网页视图中编辑页面

　　普通窗口：鼠标在闪动，可编辑、修改页面，所见即所得的方式

　　预览窗口：浏览器中出现的效果，与PowerPoint中的“放映幻灯片”类似。

　　Html窗口：编写HTML（超文本标记语言，它是描述网页内容和外观的标准。）

　　打开导学软件，根据步骤，示范建立只有一个网页的站点，强调新站点的位置、路径的正确输入，站点的名称。

　　（教会学生利用导学课件，根据导学软件完成任务）

　　任务1：学生根据导学课件，在d:建立自己站点

　　教师巡视指导

　　请一位学生示范如何建立站点，教师总结

　　问：在文件夹列表中看到了什么？

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

　　3、编辑主页与保存主页

　　看效果图，请学生分析主页中的元素

　　总结：鲜明的主题，如：我的世界、我的宠物等，有分割页面的水平线，与主题相关的图片，对网站的简单介绍

　　根据导学软件，学生完成任务2：设计主页、保存主页与图片

　　教师巡视指导

　　4、总结反馈

　　请学生示范，讲解如何插入图片（来自剪贴画与来自文件）、插入水平线，如何保存

　　总结：必须切换到“普通”窗口下编辑

　　主页的保存中存在问题：

　　单击“文件”----“保存”或工具栏的“保存”按扭，弹出一个对话框，保存嵌入式文件，改变文件夹，图片必须保存在本站点images文件夹中，便于站点的管理。

　　5、请学生继续完成自己的主页，有能力的同学完成提高篇

　　教师巡视指导

　　6、教师与学生共同评价总结

　　展示学生作品，教师与学生共同评价

　　请学生总结今天的学习内容：建立包含一个页面的站点，主页的设计与保存。

　　学生活动：学生回答问题、学观察鼠标指针、学生回答问题、学生观察网站的表现形式、齐声回答、学生浏览课件，并了解本节课的学习任务、学生观察FP界面与word的.不同、学生回答、学生观察教师演示不同编辑窗口的区别。学生上机操作，在指定位置建立自己站点、请先做好的学生当小老师，辅导其它学生。学生回答、学生操作，同桌互相帮助，并参考教师做的课件，利用网络环境下的课件自己探索学习，满足不同层次学生的需求、学生总结

　　注：课件中包含每一个操作过程的操作步骤及拓展的知识、基本任务与提高任务的效果图。

　　点评：

　　教学课题“网页制作”作为初中阶段的最后一部分内容，难度较大，教学的深度较难掌握。这就要教师在备教材的基础上，同时还要备学生，做到对学生的情况有较为深刻地了解，以便很好地完成教学任务，达到预期的教学效果。根据教材和《中小学信息技术课程指导纲要（试行）》中的精神，本课应以“任务驱动”的方式完成，一方面教会学生了解和熟悉具体软件的基本功能，另一方面又能主动地掌握并深入学习思考。寻着这个思路授课教师在课前作了大量的课前准备制作出了相应的教学课件“网页制作”。

　　一、调动学生的学习热情，变被动学习为主动学习

　　整个教学过程张云老师采取了“引导加任务驱动”的模式进行。首先教师进行导入，导入概念，强调概念；再引导学生学习课件的使用，引导他们读懂课件中的第一个任务：建立一个只有一页的网站，（此处若能引导学生，由学生来完成，减少老师的操作，效果会更好），然后让学生模仿第一步的操作进行下面内容的学习，完成导学材料中给出的一个个任务。

　　二、突出重点，及时点评

　　张云老师在引导学生进行学习、操作后，就主动地去观察和发现学生中出现的问题，甚至于课前对可能出现的问题，也进行有预见性地准备；发现问题及时点评。（点评分为个别点评和全班点评，点评不等于教师将操作过程演示一遍。张云老师在点评建成的网站时，重点若再突出些，介绍再清楚些，效果会更好。比如：站点中内容说明不够清楚等。）

　　三、发挥学生的协作学习精神

　　张云老师在教学过程中，对有困难的学生进行个别辅导，同时还需发挥学生的协作学习的精神，充分调动学生学习的积极性，让学有余力的学生充当“小老师”，从而体会到学习的乐趣。（整个教学过程中，这点做地不够，没有充分地让师生互动起来）

　　四、重点突出、目标明确

　　最后，张老师在整个教学过程中，应再突出教学重点，明确本节课的任务。（课前的导入，最好给出教学目标，课后的小结应让学生总结他本堂课学习到哪些知识，所以感觉这节课重点不突出，内容分散。）

　　五、教学效果较好

　　由于张云老师在课前对本课作了大量的准备工作，课件制作效果较好，所以学生完成情况很好，教学任务完成情况较好。

《网页的制作》教案优秀3

　　学习目标:

　　制作框架网页、在网页中插入字幕和超链接知识

　　1.制作框架网页

　　框架网页是一种特殊的HTML网页，它将窗口划分成若干小窗口区域（框架）。每个框架独立显示一个不同的网页（有自己的网页名字），整个框架网页有一个总的名字。

　　框架与表格在组织网页结构时相似。表格是对页面区域进行划分，框架是对整个浏览窗口进行划分。

　　·创建框架网页：单击菜单“文件”→“新建”→“网页”，选择“框架网页”标签→选择“嵌套式层次结构”

　　·选中的框架边框为蓝色，在拆分或删除框架时应注意是否选中。

　　·隐藏框架间的横线：

　　右击框架网页→单击“框架属性”→在对话框中单击“框架网页”按钮，在“网页属性”对话框中选“框架”标签→设置“显示边框”为未选中状态。

　　·按住Ctrl键，拖动鼠标可以快速拆分框架。

　　·删除框架：单击菜单“框架”→“删除框架”。

　　·保存框架网页时注意要保存所涉及到的所有网页。

　　·更改框架链接的网页：

　　右击相应的超链接→在弹出的快捷菜单上选择“超链接属性”命令，打开“编辑超链接”对话框

　　→可直接选择列出的文件，或在“URL”框中输入网页的地址

　　→单击“目标框架”右边的“更改目标框架”按钮，在“当前框架网页”中选择目标框架。

　　2.网页中插入字幕

　　·插入字幕：光标定位插入点→单击“插入”→“组件”→“字幕”打开“字幕属性”对话框；

　　→在文本框中输入文字，选择“方向”、“速度”、“表现方式”等；

　　→选中字幕，拖动鼠标，调节字幕运动范围。

　　·修改字幕：双击字幕，可以打开“字幕属性”对话框，对字幕属性进行修改。

　　3.超链接相关网页

　　超链接是从一个网页指向另一个目标的连接。一般在网页中的某文字或图片上设置超链接。

　　·创建超链接：单击文字或图片→“常用”工具栏的.“超链接”按钮，打开“创建超链接”对话框。

　　·取消超链接：选中具有超链接的文本或图片，单击“超链接”按钮，在打开的对话框中将URL栏中的内容删除。

　　·跟踪超链接：

　　在超链接上右击，在打开的快捷菜单上选择“跟踪超链接”命令；

　　或：在普通视图中，按住Ctrl键，将光标移到超链接上，单击，会跟踪连接到超链接指向的目的位置。

　　·设置超链接文本的颜色：网页中超链接文本的颜色共有3种：未访问过的，当前正在访问的，已访问过的。FrontPage默认这3种颜色分别为蓝色，红色、深蓝色。单击“格式”→“背景”→在“网页属性”对话框→选“背景”标签，选定“超链接”、“已访问过的超链接”、“当前超链接”的颜色。

　　作业：

　　新建框架网页，建立超链接，在网页中插入字幕。7.2制作网页（框架）这一教案

《网页的制作》教案优秀4

　　一、教材分析

　　首页之外的其他网页在结构上很相似，为了给这些网站增加一些亮点，故在网页中插入了交互式按钮，交互式按钮不仅具有超链接功能，在使用过程中还会发生变化，更能引起学生的学习兴趣。

　　二、教学目标

　　1、知识性目标

　　（1）了解交互式按钮的功能；

　　（2） 了解计算机主机包括的部件；

　　（3）了解网页动态效果。

　　2、技能性目标

　　（1）会设置网页的目录；

　　（2）学会插入、修改交互式按钮；

　　（3）学会复制表格。

　　3、情感性目标

　　（1）加深对计算机硬件的'认识；

　　（2）培养学生分工协作的精神。

　　三、教学重、难点

　　1、教学重点

　　（1）交互式按钮的功能；

　　（2）插入、修改交互式按钮。

　　2、教学重点

　　（1）交互式按钮；

　　（2）复制表格。

　　四、教学准备

　　制作一个具有几个漂亮交互式按钮的网页。

　　五、教学过程

　　1、导入

　　教师：现在我们的首页已经做好了，可是其他的网页还没做，但是一节课内无法做太多的，今天呀我们就来学习制作“主机”网页吧！其余的以后在做.

　　2、学习新课。

　　（1）指导学生用表格布局；

　　教师:用表格对网页进行布局方法，前一堂课我们学习了，现在就请同学们，对照课本用表格给 “主机”网页进行设置。

　　学生看书练习。

　　（2）指导学生学习插入交互式按钮；

　　教师：在网页内经常会插入具有超链接功能的按钮，单击这些按钮，便可打开其他网页，请同学们看下面具有交互式按钮的网页。

　　屏幕展示。

　　教师：下面我们就来学习如何制作交互式按钮。

　　教师示范讲解，学生观察。

　　学生练习、老师巡视指导。

　　3、巩固练习。

　　请同学们试着完成书中本课的“试一试”中的练习，在遇到困难时可小组同学相互帮助，也可以举手问老师。

　　4、总结评价。

　　教师总结后，请同学根据自己掌握的知识情况和收获，在本节课的“评一评”中打上自己的成绩。

《网页的制作》教案优秀5

　　一、教学目标

　　1、知道站点、主页的概念，能在指定位置建立只有一个网页的站点；

　　2、认识FRONTPAGE的界面；

　　3、掌握在主页中插入文字、图片、水平线；

　　4、掌握页面文件与图片的保存。

　　二、教学重点

　　1、能在指定位置建立只有一个网页的站点（难点）

　　2、能在页面中插入文字、图片、水平线

　　3、掌握页面文件与图片的保存（难点）

　　三、学情分析

　　学生已经学习了WORD、POWERPOINT与上网浏览信息，对计算机的基本操作（WORD中文档的编辑，网页的浏览等）比较熟练。这使得学生主动探索、自主学习成为可能。每位学生必须完成基本任务，有能力的学生还可以完成提高篇的学习，以充分发挥学生的积极性与自主性。

　　四、教学方法

　　在教学中，一方面采用比较教学的方法，促进学生知识的迁移；另一方面，提供学生一个导学，让学生根据这个网络环境下的自己探索学习，以满足不同层次学生的需求。

　　五、教学过程设计

　　教师活动：1、引入课题：（激发兴趣，活跃气氛）

　　同学们喜不喜欢上网？经常上新浪、西祠胡同等，有没有同学知道新浪、西祠胡同称做什么？（网站）

　　浏览新浪网站，浏览的第一个页面称为什么？（主页）

　　我们还可以浏览其它的页面，点击超链接浏览，当鼠标变成手指的形状时有超链接。

　　问题1：网站是不是就是网页？用自己的'语言描述一下网站的概念（网站包含多个网页，通过超链接把不同的页面链接起来）

　　问题2：网页是不是就是主页？（第一个页面称为主页，网站设计者可以确定哪一个是主页，主页的文件名一般为：index.ht,主页也是网页）

　　设计网站一般必须经过两个步骤，首先是在计算机里做好，然后发布在internet上，让所有的人访问浏览。

　　今天我们学习用Frntpage建立站点，制作一个主页。

　　先来研究一下没有发布的网站，打开教师做的网站