网页 模板 教案（精选多篇）

推荐第1篇：网页教案

三、DW安装应用

在学网页创建中，有一款非常重要的软件叫ＤＷ软件，它件全称：Ｄreamweaver，被称为网页三剑客之一． ＤＷ软件学习内容： １.ＤＷ软件下载安装

２.创建ＨＴＭＬ文档和ＣＳＳ样式表并将二者关联起来 ３.ＤＷ软件的应用 Ａ.ＨＴＭＬ文档的创建 １.打开ＤＷ软件

２.如果想创建一个ＨＴＭＬ文档，只要点击“新建”下面的ＨＴＭＬ，这个就完成了一个ＨＴＭＬ文档的创建。

３.在当前页面点击“代码”，就可以看到我们新建一个ＨＴＭＬ文档的时候，包括“声明”、“标签”、“根元素”还有标签及里面的和

推荐第2篇：网页教案2

注意：做为一个优秀的网站工作者及维护者应该有很强的逻辑思维能力（即所有的文件都放在什么位置自己心里要有谱，管理维护起来能够得心应手），不能让打开你网站的用户感到“乱的一塌糊涂”。

第一章：站点的管理及文本的应用

（15节，含上机操作课）

一、站点的操作

1、新建站点（a）：

新建一个网站，所有资源手动放置在站点所对应的文件夹（或者子文件夹）下面。

2、新建站点（b）：

网站已事先做好，新建一个站点是为了维护网站的方便，即修改网页内容的方便。

3、删除站点：站点所对应的主文件夹及里面的资源依然存在。

4、编辑站点：若改变站点所对应的路径，则文件夹里面的资源将丢失。

二、为什么要引入“站点”的概念

1、管理维护的方便

2、解决文件调用时绝对路径（站点根目录）和相对路径（文档）的问题

3、一般情况下，站点与网站的主文件夹是一一对应的，不能出现冗余的情况。

三、建立站点时应注意

1、站点名称、网站对应的主文件夹及主文件夹下所对应的所有资源的名称一律不能用汉字命名

2、本地根文件夹书写时避免发生以下错误： 1） D;\\toyato2) D:/toyato3) D://toyato 4) D: oyato (不要留有空格) 5） D： \\toyato

3、能够正确区分站点名称与本地根文件夹（网站所对应的主文件夹）的异同

4、切忌将所有的资源全部放在根文件夹下，合理利用子文件夹

5、文件夹的层次不要太深，一般合理就行

四、文本字体的输入及属性的设置

1、文本的输入

2、空格的输入

3、标点符号的输入

4、如何将文本类型设置为特殊字体（操作系统中默认没有的字体）

五、将文本设置为动态文本

1、将文本放置在和之间

2、中参数的设置及输入方法

3、中参数的意义 1）behavior：滚动方式

Alternate：左右或者上下交替滚动 Scroll：循环滚动

Slide：滚动一次到达边界后静止

2）bgcolor：滚动区域的背景颜色3）height、width：滚动区域高度及宽度 4）direction：文本的滚动方向

up ：向上滚动 down：向下滚动 left：向左滚动 right：向右滚动

5 ）onClick(单击)、onDblClick（双击）、

onMouseOut（鼠标移开）、onMouseOver（鼠标经过）时文本的运动状态

例如：onMouseOut=\"this.stop()\" onMouseOver=\"this.start()\" 说明：

this.stop()：当前的对象停止运动 this.start()：当前的对象开始运动

6）scrollamount：设定活动字幕的滚动速度，单位为像素 7）scrolldelay：设定活动字幕两次之间的延迟时间，单位为毫秒，值大了会有一步一停的效果。

8）loop：循环滚动的次数 若值为-1，无限循环

注意：N(n>=o)，循环n次后停止滚动，若n为小数，则自动取整，为去掉小数点后的整数

上 机 实 验

一、实验题目：

1、熟悉站点的常规操作

2、文本的输入及属性设置

二、实验要求：

1、建立一个站点，并将所有文件放在站点对应的文件夹下

2、建立一个网页，向其中输入文本

3、对文本的属性进行设置

4、将文本设置为滚动文本，当鼠标经过文本时停止滚动，鼠标移开文本时开始滚动。

三、实验步骤（请写出在对文本进行相关设置后，“代码视图”中关于文字修饰的相应代码）

推荐第3篇：网页教案1

网页制作---序言(理论课：1节)

一、常用网页制作工具

1、FontPage2000（Office办公软件）

2、Dreamweaver MX 2004

二、美化网页的工具

1、Flash动画（动画制作工具）

2、PhotoShop(图像处理工具)

3、Premiere(非线性视频处理工具，音乐和视频剪辑工具)

三、网页类型

1、静态网页

2、动态网页

四、常用概念

1、网页、网站

2、站点、文件夹

3、客户端、服务器端

五、Dreamweaver MX 2004启动

1、桌面

2、开始按钮

3、我的电脑

六、Dreamweaver MX 2004工作界面

1、标题栏

2、菜单栏

3、常用快捷钮

4、视图类型

5、编辑区

6、面板组

七、建立站点的方法

注意：

1、自己建立网站所用到的文件（网页、图片、声音、动画、视频等）必须放在站点所对应的文件夹下

2、站点与文件夹的名字可相同，也可不同

3、网页的测试方法

实 验

实验题目：

1、熟悉Dreamweaver MX 2004的工作界面

2、建立站点（包含网页、图像、动画及文件夹）

推荐第4篇：网页教案3

第二章：一简单的网页（5节，含上操作课）

一、表格的处理

1、表格的宽度

原则：在任何一台电脑上不应出现水平滚动条（垂直滚动条则允许），760。

2、表格的对齐方式：隐含表格的对齐方式应设为：居中对齐

3、表格边框的粗细：隐含表格（边框的值为0）

4、表格相应单元格“自动扩张”的解决

二、水平线的设置

1、利用标签

Align:对齐方式Center:居中Right: 右对齐left: 左对齐 color:水平线的颜色width：水平线的宽度（即线有多长）

size：水平线的厚度（即线有多粗）noshade：是否有阴影

2、利用Photoshop制作水平线

单的水平线（垂直线）混色水平线（垂直线）

三、文字的输入及编辑

1、空格的输入

2、换行

1） 硬换行： Enter（前后两个段落） 2) 软换行：Shift+ Enter（前后为一个段落）

四、图片与文字混排

1、加载图片

2、文字输入项目符号和编号

3、图片和文字的排列方式

五、波浪线的制作

六、加载日期（不会自动更新，仅是最近保存网页的系统日期）

七、给文字增加滚动条

1、层的应用

2、层与表格的混合应用 注意： 1）先加载表格

2）向表格中插入层，调整层的大小（也就是文本要显示的区域） 3）将层的溢出属性设置为：Auto Position:relative( 相对定位) Left:0px Top:0px

八、利用Photoshop处理图片

1、抓取图片

2、裁切图片

3、在图片上添加文字

4、保存图片

九、设置页面属性

上

机

实

验

一、实验题目：

制作一个简单的网页

二、实验目的：

熟悉水平线的制作方法、体会表格在网页布局中的作用，当多个元素被加载在页面中时如何排版。

三、实验要求：

1、利用层将文本区域增加滚动条

2、设置水平线

3、对图片和文字进行排版

4、增加系统日期

三、实验步骤（请写出在网页中对文本区域设置滚动条时的操作步骤）

推荐第5篇：网页元素教案

第1章网页设计基础 教学要求

熟练掌握网页设计软件和网页图形制作软件。

掌握Internet、WWW、TCP/IP、域名系统、URL、静态网页与动态网页等与网站相关的基本概念。

了解网站建设过程中的几种常用语言，包括HTML、JavaScript和VBScript脚本语言、Java语言、ASP、ASP.NET、PHP等。 教学重点

掌握Internet、WWW、TCP/IP、域名系统、URL、静态网页与动态网页等与网站相关的基本概念。 教学难点

常用网页制作软件的使用。 课时安排

本章安排4课时。其中，理论讲授2课时，上机实验2课时 教学大纲

一、网页与网站概述 1．Internet 2．WWW 3．网页与网站 4．网页的基本元素

二、常用网页制作软件及辅助设计软件 1．网页制作软件 2．网页辅助设计软件

三、常用网站程序设计语言

四、使用Dreamweaver制作简单的网页 1．Dreamweaver工作界面

2．使用Dreamweaver构建本地站点 3．简单网页制作 主要概念 1．Internet 2．万维网（WWW） 3．文件传输（FTP） 4．电子邮件（E-mail） 5．远程登录（Telnet） 6．调制解调器 7．浏览器 8．TCP/IP 9．IP地址 10．域名

11．超文本传输协议（HTTP） 12．统一资源定位符（URL） 13．静态网页 14．动态网页 15．主页 16．HTML 17．FrontPage 18．Dreamweaver 19．Fireworks 20．Flash 21．Photoshop 22．JavaScript 23．VBScript 24．脚本语言 25．Java 26．ASP 27．ASP.NET 28．PHP 29．JSP 实验

实验一制作一个名为MySite的个人网页 1．熟悉建立本地站点的一般步骤； 2．掌握常用网页制作软件的使用方法； 第2章 HTML网页元素 教学要求

熟练掌握：HTML的基本标签，内容包括元素和标签的概念、标签、头部标签、标题标签、元信息标签、HTML主体标签的使用；文本元素，包括标题标签、引文标签、署名标签、特殊字符、注释标签、文字标签、文字修饰标签、段落标签、预编排标签、居中对齐标签等的使用；超链接，包括路径的概念、内部链接、外部链接、锚点链接、电子邮件链接的使用方法；图片元素，包括图片标签使用，以及标签的alt属性、height、width属性、align属性的设置，和设置图片为超链接的方法；多媒体对象，包括标签、标签、标签的使用。 教学重点

HTML基本标签、文本元素、超链接、图片元素。 教学难点

超链接、图片元素。 课时安排

本章安排20课时。其中，理论讲授10课时，上机实验10课时。 教学大纲

一、HTML的基本标签 1．头部标签 2．标题标签 3．元信息标签 4．HTML主体标签

二、文本元素 1．文字内容 2．文字修饰标签 3．段落排布

三、超链接

1．超链接的建立 2．内部链接 3．外部链接 4．锚点链接 5．电子邮件链接

四、图片元素

1．网页中图片的格式 2．图片的添加与设置 3．图片超链接

五、多媒体对象 1．插入多媒体文件 2．滚动文字 主要概念

1．元素和标签 2．HTML基本标签 3．头部标签 4．标题标签 5．元信息标签 6．HTML主体标签 7．标签

8．引文标签 9．署名标签 10．特殊字符 11．注释标签 12．标签 13．文字修饰标签 14．段落标签

15．、和标签 16．预编排标签

17．居中对齐标签 18．超链接 19．路径的概念 20．内部链接 21．外部链接 22．锚点链接 23．电子邮件链接 24．标签
25．标签的alt属性
26．标签中的height和width属性 27．标签的align属性 28．图片超链接 29．标签 30．标签 31．标签 实验
实验一 HTML的基本标签（2学时） 1.掌握HTML的基本标签。 2.练习制作简单网页。 实验二文本元素（2学时）
1.掌握控制文本元素的标签使用方法。2.练习制作含有文本元素的网页。 实验三超链接应用（2学时）
1.掌握在网页中插入超链接的方法。2.练习在网页中插入超链接。 实验四图片元素（2学时）
1.掌握在网页中插入图片元素的方法。2.练习在网页中插入图片并设置图片属性。 实验五图片元素（2学时）
1.熟悉在网页中插入多媒体对象的方法。2.练习在网页中插入多媒体对象。 第3章 HTML网页布局 教学要求
熟练掌握：表格，包括表格的结构、设置表格边框、大小、背景颜色、背景图像、标题、行的高度、行的对齐方式、单元格宽度、单元格内容的对齐方式、设置单元格的背景颜色、设置单元格的背景图像、合并单元格、利用表格进行网页布局；框架，包括框架的基本概念、框架结构、窗口框架的分割方式、窗口名称、框架边框的显示状态、指定在框架中显示的网页、控制框架滚动条属性、设置框架的边距、设置框架中的超链接、利用框架进行网页布局；水平线和列表，包括无序列表、有序列表、嵌套列表和自定义列表。
掌握：使用表格布局网页、使用框架布局网页、水平线标签和列表的使用。
了解：设置表格分隔线显示状态、表格边框的颜色、表格的位置、表格边框与内容的间距、行的内边框颜色、行的背景颜色、单元格的边框颜色、设置框架边框的宽度、设置框架边框的颜色、浮动框架等。 教学重点
使用表格布局网页、表格行和单元格的属性设置、使用框架布局网页、框架集和框架的属性设置。 教学难点
使用表格布局网页、使用框架布局网页。 课时安排
本章安排12课时。其中，理论讲授6课时，上机实验6课时。 教学大纲
一、表格
1．表格的基本概念和结构 2．表格的基本属性 3．表格的行属性 4．表格的单元格属性 5．利用表格进行网页布局
二、框架
1．框架的基本概念 2．设置框架集的属性 3．设置框架的属性 4．浮动框架
5．设置框架中的超链接 6．利用框架进行网页布局
三、水平线和列表 1．水平线 2．列表 主要概念 1．表格
2．表格的结构 3．设置表格边框
4．设置分隔线显示状态 5．设置表格边框的颜色 6．设置表格的大小 7．设置表格的背景颜色 8．设置表格背景图像 9．设置表格的位置
10．设置表格边框与内容的间距 11．设置表格的标题 12．设置行的高度 13．设置行的对齐方式 14．设置行的内边框颜色 15．设置行的背景颜色 16．和 17．设置单元格宽度
18．设置单元格内容的对齐方式 19．设置单元格的边框颜色 20．设置单元格的背景颜色 21．设置单元格的背景图像 22．合并单元格
23．利用表格进行网页布局 24．框架的基本概念 25．框架结构
26．窗口框架的分割方式 27．左右分割 28．上下分割 29．嵌套分割
30．设置框架边框的宽度 31．设置框架边框的颜色 32．设置框架边框的显示状态 33．指定在框架中显示的网页 34．定义子窗口名称 35．控制框架滚动条属性
36．设置是否允许调整框架的大小 37．设置框架的边距 38．浮动框架
39．设置框架中的超链接 40．利用框架进行网页布局 41．水平线 42．列表 43．无序列表 44．有序列表 45．嵌套列表 46．自定义列表 实验
实验一表格的应用（2学时） 1.掌握表格的使用方法。 2.练习用表格对网页布局。 实验二框架的应用（2学时） 1.掌握框架的使用方法。 2.练习制作框架网页。
实验三水平线和列表（2学时）
1.掌握在网页中插入水平线和列表的方法。2.练习在网页中插入水平线和列表。 第4章 HTML中的表单 教学要求
熟练掌握文本框、下拉列表框、密码域、图像域、单选按钮、复选框、隐藏域等常用表单控件的使用方法，能够使用这些表单控件制作表单实例。 掌握表单的结构和标签的用法。 教学重点
文本框、下拉列表框、密码域、图像域、单选按钮、复选框、隐藏域等常用表单控件的使用方法。 教学难点
使用表单控件制作表单实例。 课时安排
本章安排6课时。其中，理论讲授4课时，上机实验2课时 教学大纲
一、表单概述 1．表单的结构 2．标签
二、表单控件 1．文本域控件 2．按钮控件
3．单选按钮和复选框控件 4．列表控件 5．隐藏域 6．图像域控件 7．文本域
三、表单综合应用实例 主要概念 1．表单
2．标签 3．单行文本框 4．多行文本框 5．密码域 6．普通按钮 7．提交按钮 8．重置按钮 9．单选按钮 10．复选框 11．下拉列表框 12．列表框 13．隐藏域 14．图像域 15．文件域 实验
实验一表单控件操作练习
1．熟悉表单在html中的结构； 2．掌握常用表单控件的使用； 3．掌握表单实例制作方法。 第5章 CSS基础应用 教学要求
理解CSS的概念以及与HTML标签元素的关系，了解网站中应用CSS的意义；熟练掌握CSS基本语法格式、CSS基本样式的定义以及如何在网页中引入CSS。 教学重点
CSS的概念以及与HTML标签元素的关系，如何在网页中引入CSS。 教学难点
CSS基本语法格式和在网页中引入CSS的几种方法的区别。 课时安排
本章安排5课时。其中，理论讲授3课时，上机实验2课时 教学大纲
一、CSS简介 1．CSS语法 2．层叠性 3．注释
4．在网页中插入CSS
二、设置文本字体 1．字体系列 2．字体大小 3．字体加粗 4．设置斜体 5．字体变形
6．设置字体的多个属性
三、设置文本样式 1．文本段落缩进 2．文本对齐方式 3．文本字间距 4．文本修饰效果 5．行间距
四、设置颜色和背景 1．颜色 2．背景颜色 3．背景图像
五、设置边框 1．边框样式 2．边框宽度 3．边框颜色 主要概念 1．CSS 2．属性、选择符和属性值
3．链接的外部样式表、内部样式表、嵌入样式表和导入的样式表 4．层叠性
5．文本样式、文本修饰 实验
实验 CSS基础应用
1．掌握CSS基本语法结构；
2．掌握如何在网页中引入样式表；
3．熟悉对文本字体和文本样式进行设置的若干属性。 第6章 CSS高级应用 教学要求
熟练掌握CSS中列表的控制、CSS的定位和CSS特效滤镜等高级应用的使用方法，从而对使用CSS实现丰富的网页效果有深入的认识和体会，真正理解CSS引入对网页设计与制作带来的深刻变化。 教学重点
CSS定位和CSS滤镜的使用 教学难点
CSS的定位方式和定位位置 课时安排
本章安排4课时。其中，理论讲授2课时，上机实验2课时 教学大纲
一、列表 1.列表样式 2.列表图像 3.列表位置
二、定位 1.定位方式 2.定位位置 3.叠放次序
三、滤镜 1.Alpha 2.Blur 3.Chroma 4.Shadow和DropShadow 5.FlipH和FlipV 6.Glow属性 主要概念
CSS定位方式、叠放次序和CSS滤镜 实验
实验
CSS高级应用
1．掌握利用CSS控制列表的样式；
2．掌握利用CSS控制网页元素的定位位置和叠放次序； 3．熟悉利用CSS实现不同网页元素的多种滤镜效果。。 第7章 JavaScript基础知识 教学要求
熟练掌握JavaScript语言中变量的定义、命名规则和使用方法，表达式和运算符，选择语句、循环语句、转向语句等流程控制语句；掌握函数的概念、函数的创建以及如何去调用函数。 教学重点
变量的定义、命名规则和使用方法，表达式和运算符，选择语句、循环语句、转向语句等流程控制语句 教学难点
函数的概念、函数的创建以及如何去调用函数 课时安排
本章安排5课时。其中，理论讲授3课时，上机实验2课时 教学大纲
一、JavaScript概述 1．JavaScript主要特点
2． JavaScript运行和编译环境 3． JavaScript代码格式
二、JavaScript语言基础 1．数据类型及转换方法 2．常量和变量 3．运算符和表达式
三、JavaScript控制语句 1．选择语句 2．循环语句 3．转向语句
四、JavaScript函数 1．函数的定义与函数的调用 2．数据类型函数 3．内置函数 主要概念
JavaScript、常量、变量、运算符、表达式、函数、语句 实验
实验 JavaScript语言基础
1．掌握JavaScript语言的运行和编译环境用法； 2．掌握JavaScript变量、运算符、表达式的用法； 3．掌握JavaScript语句的用法和函数的用法。 第8章 JavaScript的事件和对象 教学要求
掌握对象的基本概念，熟练掌握对象的属性的访问和使用对象的方法；掌握事件的使用方法。 教学重点
对象的属性的访问和使用方法，事件的使用方法。 教学难点
对象的属性的访问和使用方法，事件的使用方法。 课时安排
本章安排4课时。其中，理论讲授2课时，上机实验2课时 教学大纲
一、事件
1.事件与处理器 2.事件捆绑 3.鼠标事件 4.键盘事件 5.浏览器事件
二、JavaScript对象 1.对象的概念 2.内置对象 3.表单对象 主要概念
对象、对象属性、事件、事件捆绑 实验
实验
JavaScript对象和事件的使用 1．掌握JavaScript对象的使用方法； 2．掌握JavaScript事件的使用方法； 第9章网站制作综合实例 教学要求
熟练掌握：主页设计的方法、步骤，能够使用Fireworks、Dreamweaver软件进行主页设计，掌握CSS样式的应用方法以及网页中添加Javascript特效的方法。 掌握：网站测试与发布的方法。 了解：网站规划的方法。 教学重点
网站主页设计的方法、步骤，使用Fireworks、Dreamweaver软件进行主页设计， CSS样式的应用方法以及网页中添加Javascript特效的方法。 教学难点
Fireworks对图片切片以及Dreamweaver制作主页方法。 课时安排
本章安排6课时。其中，理论讲授4课时，上机实验2课时 教学大纲
一、网站规划 1．网站目标 2．内容组织 3．链接结构 4．网站风格 5．版面布局
二、主页设计
1．制作主页图片稿
2．利用Fireworks对图片切片 3．利用Dreamweaver制作主页 4．插入图片
三、编辑子页面
四、设置超链接
五、CSS样式的应用
六、添加JavaScript特效
七、网站检查与发布 1．测试检查 2．网站发布 实验
实验一制作个人主页
1．熟悉主页的制作过程；
2．掌握常用网页制作软件的使用方法； 3．了解网页发布过程。 
推荐第6篇：网页制作教案
第一节 制作简单的网页
（一）教学对象分析
学生在学习本内容前，已经学习了利用Word制作简单的网页，并且初步掌握了制作网页的一般流程及基本操作，具有进一步学习的能力。
（二）教学目标
1、了解Frontpage的界面组成及基本功能。
2、掌握在Frontpage中编辑文字、插入图像的方法。
3、掌握在Frontpage中设置电子邮件超链接的方法。
4、培养学生在获取信息的能力，使学生学会利用计算机和网络搜集与准备网页素材。
5、培养学生的知识迁移能力。
（三）教学重点
利用Frontpage制作简单的网页
（四）教学方法和手段
教学方法：以学生自学为主，教师辅导为辅。 教学手段：多媒体网络教学。
（五）教学过程
1、创设情境，导入新课：
展示几幅优秀的网页作品，激发学生学习专业网页制作软件的愿望。Frontpager 功能主要体现在：
1、网页编辑功能。
2、网站管理功能。
一、启动Frontpage i.ii.启动Frontpage Frontpage窗口组成
二、用Frontpage制作网页
1、输入文字
2、设置字体、字号
3、插入剪贴画
4、创建电子邮件超链接
三、保存网页
四、预览网页 反馈操作情况情况
第二节 插入表格
（一）教学目标
了解Frontpage中使用表格的作用。 掌握在Frontpage中插入表格的方法。 能熟练在表格中输入文字、插入图片。
（二）教学重点
在Frontpage 中利用表格组织网页结构。
（三）教学过程
导入新课，表格是网页中经常使用的一种形式，表格里不仅可以存放文字、图像等数据，还可以作为组织网页内容的框架，使网页整齐、美观。
新课讲授：
1、插入空表格
2、在表格中插入图片
3、设置图片属性
4、输入文字
5、设置表格属性
6、插入表格标题
7、保存网页、预览网页 本课总结
第三节 创建表单
（一）教学目标 了解表单的功能。
掌握在Frontpage中创建表单的方法。 掌握在Frontpage中插入表单域的方法。
（二）教学重点 表单网页的结果处理。
（三）教学过程
复习
1、如何制作图文并茂的网页？
2、表格在网页中的主要作用？
3、在网页中插入表格有几种方法？ 导入新课、创设情境
展示几幅含有表单域的网页作品，例如调查表、申请表、提问：表单与表格的异同点？ 讲授新课
一、利用表单网页向导创建表单
1、建立表单
2、修改表单
3、处理表单结果
4、利用表单确认模板制作表单确认页面
二、制作网页背景 反馈操作情况 本课总结
课后任务：利用菜单栏中的命令在网页中插入表单域。 
第四节 利用框架制作首页
（一）教学目标 了解框架的功能
掌握在Frontpage中使用框架的方法。 掌握在Frontpage中建立超链接的方法。
（二）教学重点 利用框架制作首页
（三）教学过程
复习：
1、如何制作表单页？
2、表单的主要作用？
导入新课、创设情境：展示模范的网页作品，激发学生学习的兴趣。 讲授新课：
一、利用框架制作首页
1、新建框架网页
2、设置 右框中的初始网页
3、保存网页
4、建立左框中的网页
二、建立超链接
二、制作网页背景 保存网页、游览网页 反馈操作情况  本课总结
课后任务：练习其他几种超链接方式。宛善网页。 
第五节 站点管理
（一）教学目标 了解站点的基本知识。
掌握利用Frontpage建立站点的方法。 掌握向站点中导入网页的方法。
（二）教学重点 导入超链接
（三）教学过程 复习：
导入新课、创设情境：Frontpage不仅具有强大的网页编辑功能，而且具有强大的管理站点的功能。 讲授新课：
一、建立站点
二、导入网页
三、导入超链接 本课总结 
第六节 发布站点
（一）教学目标 了解发布站点的一般流程
（二）教学重点
把站点发布到因特网上是本节的重点。
（三）教学过程 复习：
导入新课、创设情境：展示因特网上的优秀个人网站。 讲授新课：
一、把站点发布到本机
二、测试网站的表单功能
三、把网站发布到因特网上（介绍） 本课总结 
推荐第7篇：网页制作教案
网页制作与设计教案
第一讲 网页设计概述 ....................................................................................................................3 1.
1WWW和URL .....................................................................................................................3 1.
2IE5的使用 ............................................................................................................................3 1.3 网页中所使用的技术 ............................................................................................................4 1.4 制作网页的基本方法 ............................................................................................................4 第二讲 HTML的基本标志与格式标志 .......................................................................................4 2.1 HTML文档的基本结构 .........................................................................................................5 第三讲 HTML的文本、图片与超级链接标志 ...........................................................................5 2.2 插入文字 ................................................................................................................................6 2.3 插入图片 ................................................................................................................................8 2.4 建立超级链接 ........................................................................................................................8 第四讲 HTML表格、表单与框架标志 .......................................................................................9 2.5 插入表格 ................................................................................................................................9 2.6 表单的应用 ..........................................................................................................................10 2.7 框架窗口 ..............................................................................................................................10 第五讲 HTML标志综合运用案例 .............................................................................................11 第六讲 DREAMWEAVER中简单WEB站点建立与管理 .....................................................12 3.1 DREAMWEAVER概述 ............................................................................................................12 第七讲 DREAMWEAVER中静态网页设计 .............................................................................13 3.2 在页面中加入文字和图像 ..................................................................................................14 3.3 超级链接的运用 ..................................................................................................................14 3.4.表格的应用 .........................................................................................................................14 3.5.在网页中创建表单 .............................................................................................................15 第八讲 DREAMWEAVER中动态网页设计 .............................................................................15 第九讲 DREAMWEAVER综合性网页设计案例 .....................................................................16 第十讲 VBSCRIPT概述 .............................................................................................................17 4.1 VBSCRIPT语言简介 .............................................................................................................17 第十一讲 VBSCRIPT的基本元素与输入输出 .........................................................................18 4.2.基本数据类型 .......................................................................................................................18 4.2.表达式和运算符 .................................................................................................................19 第十二讲 VBSCRIPT的条件语句、循环语句和过程 .............................................................20 4.3 VBSCRIPT基本语句 .............................................................................................................20
- 1
第一讲 网页设计概述
【教学内容】
讲解网页设计的相关术语及网站制作的基本流程。 【教学目的】
使学生对网站及网页有一定的认识，激发学生学习网页设计的兴趣。 【教学重点】
网页设计中的若干术语。 【教学难点】
理解网页设计中的若干术语。 【教学方式】
讲授式、讨论式、案例分析式。 【教学参考】
1、《网页设计与制作》杨尚森 曲宏山 贾文峰等著 电子工业出版社。
2、《Internet 网页工场》Wittime工作室 重庆出版社。
3、《WEB网站设计》Joel Sklar著 高等教育出版社。
4、《HTML网页制作教程》材义语编著 铁道出版社。 【新课内容】
1.1 WWW和URL 1.1.1 Web的起源
Web是World Wide Web的简称，一般也称之为WWW或3W 1.1.2 Web的特点和结构
Web最大的特点是使用了超文本（Hypertext） WWW采用C/S（客户机/服务器）工作模式
在浏览器和服务器之间应用HTTP（Hyper Text Transfer Protocol，超文本传输协议）作为网络应用层通信协议 1.1.3 URL URL的完整格式
协议://主机名或IP地址：端口号/路径名/文件名
1.2 IE5的使用
Web浏览器是浏览Internet资源的客户端软件
在Windows环境下使用的浏览器主要有Internet Explorer、Netscape Navigator、Mosaic等
1.2.1 IE5的界面 1.2.2 IE5的使用
- 3
列表标志的使用。 【教学方式】
讨论式、案例分析式、练习式。 【教学参考】
1、《网页设计与制作》杨尚森 曲宏山 贾文峰等著 电子工业出版社。
2、《WEB网站设计》Joel Sklar著 高等教育出版社。
3、《HTML网页制作教程》材义语编著 铁道出版社。 【新课内容】
2.1 HTML文档的基本结构
2.1.1 HTML语法
1、双标记
语法：
内容
2、单标记 语法： 最常用的单标记是
3、标记属性 语法
属性1  属性2  属性3  … >例子
4、注释语句 格式
例子
2.1.2 HTML文档的基本结构 【课后小结】
通过本次课的学习,要求能熟练掌握网页面的基本标志与格式标志,并能灵活运用 列表,有序列表,无序列表标志及属性。
第三讲 HTML的文本、图片与超级链接标志
【教学内容】
讲解HTML标准中的文本、图片与超级链接标志 【教学目的】
* 使学生了解标题元素,掌握字体,上下标,及特殊字符的标志。
- 5
......，强调文字，通常用斜体。 
......，特别强调的文字，通常用黑体。
......，以等宽体显示西文字符。
......，使文字大小相对于前面的文字增大一级。
......，使文字大小相对于前面的文字减小一级。 ......，使文字成为前一个字符的上标。 ......，使文字成为前一个字符的下标。 ......，使文字显示为闪烁效果。 2.2.6
文本修饰 2.2.7
预格式化文本 使用预格式化标记 不再忽略在此之间的空格、制表符与回车符等元素 2.2.8 转义字符与特殊字符
一般转义符都是以“&”开始，以“；”结束，一个转义符之间不能有空格 2.2.9 文本强制换行和不换行 文本强制换行
不换行  2.2.10 插入水平线 使用标记
属性：Width，Size，Align，Noshade，color 2.2.11 使用列表
1、无序列表  列表条目1 列表条目2 ......
2、有序列表
  列表条目1 列表条目2 ......
3、定义列表 列表条目1 条目1的说明 列表条目2 条目2的说明 …… 
- 7
...... 2.4.4 图像地图 【课后小结】
本节介绍了在网页中加入文本、图片和超级链接的标志与相应属性，熟练运用这些标志是制作多媒体网页的基础。超级链接标志中，书签链接是一类特殊的链接方式，理解和使用书签链接学习HTML中超级链接标志的难点。
第四讲 HTML表格、表单与框架标志
【教学内容】
讲解HTML中制作表格、表单与框架的标志。 【教学目的】
使学生掌握简单表格、表单与框架的制作。 【教学重点】
* 表格中单元格的合并以及表格嵌套和叠加操作。 * 框架的嵌套使用。 * 表单元素标志与属性。 【教学难点】
* 理解表格属性rowspan与colspan的含义以及表格嵌套实现的基本思想。 * 理解框架属性name、target的意义。
* 理解表单中相应元素对应标志及属性的含义。 【教学方式】
案例分析式、项目教学 【教学参考】
1、《网页设计与制作》杨尚森 曲宏山 贾文峰等著 电子工业出版社。
2、《WEB网站设计》Joel Sklar著 高等教育出版社。
3、《HTML网页制作教程》材义语编著 铁道出版社。 【新课内容】
2.5 插入表格
2.5.1 在网页中插入表格
表格的基本构成元素：表头，单元格，列，行   第一行第一列 第一行第二列   第二行第一列 第二行第二列
- 9
FrameSpacing=\"2“
BorderColor=\"#008000“ >
2.7.3 子窗口属性设置
 2.7.4 常见的框架窗口划分方法 （1）标题和正文，分为上下两部分 （2）层次结构，分为上中下三部分 
（3）目录和标题，分为左上、左下、右三部分
（4）标题、目录和正文，分为上、左下、右下三部分 （5）嵌套目录，分为左、右上、右下三部分 2.7.5 不支持框架的网页
  
很抱歉，馈下使用的浏览器不支援框架功能，请转用新的浏览器。
推荐第8篇：《网页制作》教案
《信息技术》第三册
新课程标准教案
制作第一个网页(网页诞生了)
[教学目的]
1．通过浏览几个精彩网页，激发学生制作网页的学习兴趣。
2．熟练掌握启动Frontpage 2000，熟悉Frontpage2000文件菜单和常用工具的
使用方法，新建“只有一个网页的站点”的操作步骤，从中认识Frontpage2000的主界面，理解创建网站的意义．
3．网页的基本步骤，了解创建网页的过程学会在网页中输入文字、编辑文字、插入图片的方法，培养学生搜集、处理信息的能力。
4．作网页，培养学生学习制作网页的兴趣
[教学重点]
创建网站的过程，制作、编辑网页的基本方法。Frontpage2000的窗口组成，
[教学难点]
保存网页文件的方法，创建网站的意义
[教法设计]
演示、练习、讲授、启发引导、任务驱动
[导入新课]
在因特网上，我们可以用IE浏览器获取万维网中各种有价值的信息。同时看到许多
组织机构甚至个人都在万维网上拥有自己的网页。
让学生打开“网上邻居”的“网页”文件夹，浏览从网上下载的几个精彩网页。
 你们有没有想过自己制作一个网页呢?把自己想要表述的内容，
自己喜欢的作文、图片通过网页展示给同学或更多的朋友观看、欣赏、浏览。
[讲授新课]
 制作第一个网页
 网页制作不是一件简单的事情，而是按一定的顺序一步步进行的。请同学们回忆制作网页前应作哪些准备工作?
 现在开始创建网页．我们选用功能强大，操作简单的工具Frontpage 2000来制作。
一．启动Frontpage 2000
 进入到Frontpage 2000界面后，比比看，这个软件与以前学过的Word 2000与Excel2000有什么相同与不同之处呢? (展示两软件界面的图片)
 相同之处是：窗口相似，都有常见的标题栏、菜单栏和工具栏。不同的是：多了一个如教材的图2—2—2所示：1．编辑模式标签卡2．视图框。
二．建立只有一个网页的站点
 为什么不新建一个网页，而要新建一个站点呢?
 新建FrontPage 2000中“个人站点”来启发引导．
 一般来讲，网页文件总是存放在特定的站点中便于管理。因此，第一次制作网页之前需建立一个存放网页文件的专用站点。
教材P76试试看
对于初学者，通常选用“只有一个网页的站点”，今后根据需要可以向网站中添加新的网页。
 看书P76页图2-2-6，仔细观察文件夹列表中唯一的一个网页名称是什么?(它是什么文件?)
 index．htm被命名为主页，即进入网站时看到的第一个网页。
三．在主页面编辑模式下插入文字，插入图片。
 我们知道文字，图片，动画是网页组成的基本元素。
教案设计：陡埠中学
彭荣兵
《信息技术》第三册
新课程标准教案
今天我们就在空白的主页中加入文字和图片，制作一个简单的网页。
打开主页文件，在右边主页页面编辑窗，中完成如下任务：
1．将准备好的介绍班集体的文字(主题和正文)插入(复制，粘贴)到页面中。
2．从计算机E盘里找到存储的“集体照”图片插入到网页中。
复习WORD中学过的文字编辑、排版，插入图片的方法。
问题：
学生插入图片后将其移动到合适的位置及调整图片大小．
1．老师引导，讲解；2．学生演示；3．学生相互讨论。
四．预览网页
 编辑工作完成后就能观看制作的效果了．可以保存之后在IB浏览器中观看，也可以直接通过预览模式标签卡预览、浏览．请同学们参考教材的图示切换“预览”标签卡，预览制作的网页。
评选出网页制作的“速度奖”、“设计奖”、“美观奖”。
五、保存制作的网页
网页制作完成，需要将它保存下来．请同学们按照教材P78页上的操作步骤将网页文件分别存放在images和_private文件夹中。
 今天用网页制作工具Frontpage 2000创建了一个只有一个网页的站点，在主页中加入了文字和图片，制作了一个简单的网页．这只是网页制作的第一步，精彩的网页还要不断地加工、美化和修饰，例如：配上美丽的背景，加上好看的花边和配上动听的音乐，使之变得更完美。
本着以学生为主体的原则，我在本课的教学中设计先让学生浏览网上下载的精彩网页，借以激发他们学习制作网页的兴趣，然后从启动Frontpage 2000开始，直至网页制作完成，老师只是一步步的启发引导，起着主导的作用，大部分时间都是学生自己动手动脑操作，整堂课课堂气氛活跃，收到了较好的教学效果。
教案设计：陡埠中学
彭荣兵
推荐第9篇：《表单网页》教案
《表单网页》教案
【教学目标】
1．知识与技能
⑴了解表单网页的概念和作用； ⑵掌握表单网页的制作方法。 2．过程与方法
通过阅读课本、观看演示回忆、感受表单网页的作用；在递进的操作任务中掌握表单网页制作和美化的方法。 3．情感态度与价值观
体验表单网页在网站中的重要作用，激发他们对信息技术的求知欲，形成积极主动地学习和使用信息技术、参与信息活动的态度。
【重点难点】
表单网页的制作方法。
【课时安排】 1课时
【教学准备】
网络教室、多媒体教学软件。 【教学过程】
一、新课引入（5分钟）
大家有QQ号或者E-mail邮箱吗？ 在申请QQ和E-mail时，我们要输入一些个人信息？这类采集用户信息的网页都被称为表单网单。（阅读课本P119）
展示一个简单的园艺网站来介绍家乡的盆景艺术，如皋是全国有名的盆景园艺之乡，每天有许多人通过网络了解如皋的盆景艺术，怎样才能知道他们对我们网站的意见或建议呢？ （设计一个留言板网页来采集他们的意见。）
二、过程
（一）认识表单网页（8分钟）
表单网页是一种结构化的网页，是网站中提供浏览者发表个人意见、提供反馈信息的互动交流的页面。
：用于接收用户输入的单行文本信息，如姓名、地址等。 滚动文本框：可以输入多行信息的文本框，如意见、建议等。
单选按钮：提供两个或多个互斥选项，用户只能选中其中的一项。如：性别。  ：提供一个或一组选项，用户可选择其中的一个或多个选项。 下拉菜单：允许用户从下拉菜单列表中选择其中一项。
按钮：FrontPage 2000中的按钮表单域有三种类型，即“普通”、“提交”和“重置”。“提交”用于表单提交；“重置”用于清除表单所填内容，回到初始状态；“普通”用于执行其它客户的操作。
（二）制作表单网页（15分钟）
表单网页制作方法步骤：依次单击“插入” →“表单”，弹出下级菜单。 实践：制作一个“留言”功能的表单网页。
活动1 建立表单（根据提供的效果样张，完善表单网页） 提示：
①在“姓名”后插入一个“单行文本框”； ②在“性别”后的各选项前分别插入“单选按钮”；
③在“您的兴趣爱好”后的各个选项前分别插入“复选框”，可以复制； ④在“您的职业”，后插入一个“下拉菜单”。添加“工程师”和“公务员”和“其他”等菜单内容（单击“添加”按钮，添加“工程师”菜单项，重复操作）；
⑤在“您对我们的建议或要求”后插入“滚动文本框”，调整其至合适大小； ⑥修改默认的按钮名称（双击按钮）； 
（三）表单网页的美化（5分钟）
活动2 在最后一行表格中插入一个名为“yy.swf”的Flash动画？ 提示：单击“插入”菜单中的“高级”“插件”。
思考：插入一幅GIF动画图片（.gif）和一个FLASH动画（.swf）有何不同？  活动3 为当前的表单网页添加一个名为“song.mid”的背景音乐。 提示：在网页中的任意位置右击鼠标，选择“网页属性”命令（或单击“文件”菜单，选择“属性”命令），在“常规”选项卡中操作？
保存编辑的表单网页并利用平台提交。 作品展示：（5分钟） 小结：PPT（3分钟） 
二、【检测与评价】（4分钟）
1．通常可以使用（ ）来收集访问者的意见，统计调查访问信息。 A.表格 B.框架 C.表单 D.单元格
2.利用表单制作留言板时，若要采集访问者的性别，可以选用的表单字段有（ ）。
A.复选框 B.单选按钮 C.下拉菜单 D.单行文本框
3.利用表单中的字段，我们可以设计功能强大的交互式在线考试试卷。以下（ ）字段可以用来采集不定项选择题的答案。
A.单行文本框 B.单选按钮 C.复选框 D.下拉菜单 4．插入FLASH动画时，使用“插入”菜单下的（ ）命令。 A．图片 B.组件 C.表单 D.高级→插件 5．若要为当前网页设置背景音乐或背景图片，应下面的（ ）属性中进行设置。
A．图片属性 B.网页属性 C.表格属性 D.单元格属性
【课后延伸】
表单网页提交的数据提交到哪儿去了呢？请同学们课后阅读课本P120的相关内容，也可以利用因特网搜索去解开这个奥秘，在学习本册第七章第三节时，我们会为大家解开这个奥秘。
推荐第10篇：计算机网页教案
五年级上册计算机教案(一课时) 学习目标：
1、了解Frontpage2003的主要作用，了解网页的初步知识，对网页制作页面工具的作用具有初步了解；
2、学会将搜集的图片文本素材存放相关文件夹，并了解设计网页的基本理念，学会做网页制作规划图；
3、学会根据规划创建网站，能够根据规划设计简单首页并进行保存。
德育目标：
通过学习网页制作理解网络设计工作者的辛苦劳动，在设计规划时学生可以了解到做事前需要提前准备的重要性。 
新课讲授：
1、导入：多媒体展示部分设计新颖的网页页面，点击超级链接转换不同页面带起学生的兴趣，提问学生对网页的个人了解，之后引入网页制作的概念，进入主题。
2、新授：
(1)多媒体展示网页制作的相关知识，并由学生讨论设计网页需要哪些内容。总结并补充学生回答，引导学生打开Frontpage2003，介绍网页制作页面相关工具，并由学生自主操作试验它们的作用；
(2)展示多媒体，使学生了解需要准备各类素材并存入相应文件夹。由学生搜集并存入个人设置文件夹内，通过自己构思的设计形式绘制网页设计规划图，并由学生分享他们的规划；
（3）讲解如何创建一个网站，指导学生创建网站，并个人保存相应路径。之后引导学生设计自我规划的特色首页，进行简单自我设计后保存页面，师生共同评价部分首页设计。
3、总结作业： 总结本课知识点，提问学生本课主要内容检查目标达成情况。布置学生准备其他页面资料，并在其他渠道了解网页设计方面知识。
反思总结： 
第11篇：《框架网页》教案
《框架网页》教案
八年级信息技术备课组
组长签名
授课人
教学目的：学习框架网页的制作方法，掌握框架网页的构成。 教学重点：框架网页的制作, 框架网页的属性。 教学时间：2课时 教学步骤： 一）、框架页的基本组成
框架页是一种特殊格式的网页，主要由边框、网页、滚动条组成。在框架页中，每个框架都有一个网页相连接。当打开框架页时，则同时载入每个框架所相连的网页文件。
在框架页中显示的是三个独立的网页组成的（实际下载了四个网页，还包括框架页本身这个网页）。主体框一般用来显示正文内容的。 二）、创建框架页
FrontPage 2000提供了10个框架网页向导帮助我们创建框架页。其操作步骤如下： （1）打开【文件】菜单，选择【新建】菜单项，在子菜单中选择【网页】菜单项，出现新建对话框。
（2）在对话框中单击【框架网页】选项卡。
（3）在选项卡中选择【目录】，此时在【预览】栏中会显示被选中的框架结构图，并在上方显示说明情况。
（4）单击【确定】按钮后，出现框架结构图。
（5）新创建的框架结构共有2个网页窗口，其中一个在左边，另一个在右边。这时单击【新建网页】按钮后，我们可以在当前框架网页中输入文字、图片等内容了。（如果这时单击【设置初始网页】按钮后，将弹出一个“创建超链接”的对话框，可以为所在的框架超链接到指定的网页上去。）
（6）框架的保存：单击“
”工具按钮，出现【另存为】对话框。
 保存左边框的网页文件。在对话框右面的框架示意图中，单击左边框后为蓝色，表示左边框中的网页正准备保存。在“URL”中输入文件名“in1”，单击【确定】按钮后，此时左边框的网页文件被保存起来。
 保存右边框的网页文件。紧接着，在对话框的框架示意图中，右边框显示为蓝色。在“URL”中输入文件名“in2”，单击【确定】按钮后，右边框的网页文件也被保存起来。  保存框架本身网页。在对话框中整个框架示意图的边框为蓝色，在“URL”中输入文件名“index.htm”，单击【确定】按钮后，此时保存的是整个框架页文件。 三）、框架及框架页的属性
1、设置框架的属性
框架有很多属性，例如框架的名称、宽度、高度、边距、滚动条、可调整性、间距等。以框架页为例说明，其具体操作方法如下：
单击要设置属性的框架，然后单击【框架】菜单，再单击【框架属性】菜单项，出现对话框。可以在此对话框中修改框架的属性了。
2、框架页的属性
以上是设置每个框架的属性，而修改整个框架页的属性，其具体操作如下： 在【框架属性】对话框中，单击【框架网页】按钮，会出现“网页属性”对话框。
第周八年级信息技术教案 在这个对话框中的“框架”选项卡中只有两项：
 “框架间距”：指框架之间的边框的宽度，默认值为2。
如果框架不要显示出边框时，可单击“显示边框”前面的单选框，取消“√”。 四）、框架页的编辑
在框架页中，当要拆分某一框架时，单击框架→拆分框架→选择并确定。当要删除某一框架时，单击框架→删除框架→选择并确定。 五）、框架页的超链接
在框架页中，当单击左边的超链接时，在右边框中显示该超链接网页的内容。下面我们将以框架页为例，说明怎样实现框架网页之间的超链接。其操作步骤如下：
（1）在左边的框架中选择要设置超链接的“ （2）单击“选择“jbxx.htm”。
（3）在对话框右下角“目标框架”栏，单击“标设置”栏中就相应显示所选定的区域名称。其中：
 网页默认值(main)：超链接的网页将显示在右边框（即“main主体”）。  相同框架：在左边框单击某个超链接时，其链接网页也将显示在左边框。  整页：单击某个超链接时，只显示所链接的网页，原来框架不再显示。  新建窗口：单击某超链接时，所链接的网页将显示在新打开的浏览器中。  父框架：单击某个超链接时，将返回上一级的框架。 六）、上机操作
练习设计框架网页
”图片（或文字）。
”超链接工具按钮，出现【编辑超链接】对话框。这时在对话框的文件列表中
”按钮，出现一个对话框。
在对话框中，单击框架示意图中不同的区域，也可以单击右边列表框的选项，在对话框的“目
课堂小结
板书设计 ：
教学反思
第
周八年级信息技术教案
第12篇：网页制作教案
HTML第一节课
1.本课程主要目标
使用DIV+CSS布局网页
使用CSS美化网页
制作精美的商业网站 2.整体课程内容
3.本课程授课目标
3.1了解HTML整体课程 3.2 会使用HTML标签
3.3 了解并会使用 CSS 层叠样式表 3.4 div+CSS 做网页 3.5完成一个完整的网页 4.本章目标
会使用HTML的基本结构创建网页 使用文本相关标签排版文本信息 使用图像相关标签实现图文并茂的页面 会使用超链接相关标签实现页面间的跳转 5.本章重点
本阶段的重点是让学员熟悉HTML的基本结构、HTML中的一些基本标记以及标记的属性，以及HTML中的链接。 6.本章难点
HTML基本标记及其属性 7.授课思路
以提问和演示的方式 边讲边演示 
7.课程知识点讲解 7.1什么是HTML
超文本标记语言，是英文Hyper Text Markup Language的缩写 什么是超文本
就是指页面内可以包含图形、动画、声音、表格、链接等非文字元素。
什么是标记 
就是我们要学的标签 也就是说标记语言是由一套标签组成的
HTML发展史
7.2HTML基本结构
7.3用记事本创建网页的步骤
答：
1、打开记事本 
2、输入HTML代码
3、保存为*.html文件，注意格式问题 
4、打开网页预览效果 8.标签
8.1 标题标签
  H1 H2 H3 H4 H5 H6 由大到小 标题内容  
讲课思路：先演示h1的效果，在边演示边讲解h1-h6的变化，以及他们都是加粗字体
  提问：有没有h7，然后演示， 结果：和正常字体一样 
8.2段落标签
p 格式 
段落内容
讲课思路：先演示两段。
提问 ： 与正常见到的段落有什么不同
答；首行没有缩进，没有换行 可以先用空格代替 缩进学完样式后就会使用 接下来讲换行标签
8.3换行标签
  代表换行
第一个但标签 书写方式 与双标签的区别 个数 及 /的位置
讲完换行标签后与段落标签对比，告诉他们根据空隙的大小区别什么是段落（间隙大）、什么是换行（间隙小）
8.4水平线标签
水平线标签 
第二个单标签 是一条水平线
先演示 然后告诉他们可以改颜色---引出属性
解释什么是属性 就是用来修饰标签的 属于标签的性质 要写在标签里 书写写法 属性名=\"具体值\" 并演示给他们
8.5 加粗、斜体标签
加粗的字 斜体的字 
挑选部分字体演示 
8.6 特殊符号
   
效果：不会显示在页面上 作用：1网页的作者 2注释部分代码 试用于找错的时候
空格   >>
首先敲一个空格 提问：是否有效果 再敲多个空格 提问；是否有效果 展示并引出空格特殊符号  \"  ©
先敲一个
问他们是否会显示在页面 然后再说出替代的  特殊符号
最后提问 有没有注意过版权符号 提示他们网站的最下面版权部分 最后演示写法
8.7 图片标签   思路---------标签与标签的属性----可以回顾 已经学习的标签 与 a标签的区别 双标签 单标签 标签属性
图像首先说明是单标签 然后介绍第一个属性 src 路径介绍：相对路径 上一级 ../ 上上级 ../../ 下一级 同级名/ 绝对路径
file:///C:/Users/Administrator/Desktop/Chapter01/demo.html  第二个属性：alt 演示图片不显示的情况   第三个属性：title 书写并将鼠标放到图片，查看效果
第四个属性：width 单独设置宽度时的效果 高度成比例缩放
第五个属性：height 单独设置高度时的效果 宽度成比例缩放
如果想要具体的大小 则要同时设置宽和高   
8.8 链接标签
先写一对 标签 然后再在里面写上href属性 告诉他们与图片的src属性相似，都是地址路径  再告诉他们href=\"\" 里面可以是别的网页 也可以是网址、邮箱地址 没有具体的可以写#表示空连接
演示相关链接 其中要注意，告诉他们没有在标签中间写内容 网页是不会显示任何内容的并演示
target=\"在哪里打开新链接（_self:本身窗口 _blank:新窗口打开链接）”>文字 图片
讲解target 属性：是跳转位置，是本页面还是新的页面 并演示给他们
锚链接
结合之前的超链接 锚点就是大船停泊时抛出的锚，只有锚固定了，船舶才能停住 同理
 只有设置锚点了超链接才能找到指定位置
锚点的写法 也是先写 只不过这次的属性是 name=\"\" 就是给你的锚点起个名字
而且这时超链接的href=\"\" 里面要写成#+你起的名字 最后演示效果
第13篇：《网页制作》教案
《网页制作》教案
潘有寅
一、说教材：
(一)教材分析：现在网络快速发展，广大的学生接触，使用INTERNET的机会也大大增加，学生在使用网络 获取信息时，更多的是通过浏览网页这一方式，我认为上好这节课是非常必要的，这对学生进一步认识、使用INTERNET更有益处，同时通过网页制作这一过程也利于学生对计算机常用素材的类型有更深入的了解，在一定程度上也起着培养学生运用综合知识能力作用，所以我认为这节课是非常值得我们去研究上好的 ，考虑这节课的内容及教法、学法的需要，我把这节分为两课时，第一时：在引导下学生学，练 DREAMWEAVER制作网页的基本方法；第二课：让学生自己构思创意一个与自身相关的内容丰富的，页面美观的网页。
(二)教学目标：根据对教材的分析及学生实际情况，制定如下的教学目标：
(1)知识目标：
1、有关建设第一个网页的理念思想构成。
2、熟悉用DREAMWEAVER制作网页的基本方法
3、超级链接是网页实现互相链接的基本方法
(2)能力目标：
1、培养学生的自学能力
2、创意构思能力
3、能制作出具有多重链接、多种素材、内容丰富的网页。
(3)情感目标：
1、教育学生正确认识和理解信息技术相关文化，伦理和社会问题，负责地使用信息技术。
(三)教学的重、难点：
根据对教材的分析及网页制作过程中的 实际情况，我认为要出制作内容丰富的网页，关键是要知道为什么要做网页，明确你做网页的目标。从培养学生运用信息技术综合能力这点出发，我认为如何引导学生进行思考定位、以及通过网页的制作这过程使学生对互联网有更深入的了解和运用，应该做为本节的难点内容。
二、说教法：
我采用了主体式教学模式，首先我创设了一个学习情景，让学生在情景中积极地完成任务，在任务完成阶段，我是一名帮助者、引导者，教学时注意观察学生，及时总结共性问题，个性问题留给小组学生讨论，不断激发学生的学习兴趣，以达到最佳教学效果。教学方式上①我采用了“任务驱动”教学方式，强调“实践出真知”的科学思想，授课时出示明确的，可操作性强的教学任务②分层教学，分类指导即两分：考虑学生计算机水平的差异，我把学生分为A、B两层，不同层次学生完成的学习目标不同，不同层次的学生教师指导方法不同。A层学生只要求完成知识目标，及能力目标第一个，B层学生同时要求能力目标的
2、3 项。
三、说学法：
以学生为中心，要求学生由知识的灌输对象转变为信息加工的主体，引导学生按以下两种方式来完成任务：①自学自练：通过学生自己在计算机进行操作从中获取对知识的正确理解，探求问题解决的方法；②协作学习：在实际操作中遇到的问题鼓励学生共同研究讨论、解决，使学生可以看到问题的不同侧面和不同的解决途径，开阔学生的思路，从而对知识产生新的理解。 
四、说教学过程
教学环节
教师主导
学生主体
设计意图
导入新课：
同学们，互联网近年发展迅猛，大家都离不开网络了，那么同学们平时上网看的都是别人做的网页，如果自己也可以在网上看到自己制作网页，那中动手的满足感该有多好啊。这节的学习的目标就是网页的制作，准备共用两课时完成这部分内容，第一课时：自学自练DREAMWEAVER制作网页的基本方法；第二课时： 自己设计制作网页。 学生回答，明确学习目标 通过展示教师制作的学校网页，激发学生的学习兴趣，同时给出学习目标，让学生明确学习任务，做到有的放矢。
讲授新课第一课时： 再具体操作之前，同学们应先了解有关网页的一些相关知识。
阅读内容、分析，总结激发学生主体参与意识，培养学生阅读归纳知识的能力 理念的构成， 寻找可模仿的同龄人制作的网页。找出网页内在的逻辑关系及理念。先模仿再创造。 观察，调动的兴趣，明确学习的途径，方法，坚定学习成功的信心。 通过展示学生们制作的班级网页，进一步激发学生的学习兴趣，同时坚定学生的学习信心，告诉学生通过自己的自学自练就可实现学习目标，进而培养学生的自学习惯。
总结或补充
1、网页制作方法很多，我们要学习的只是其中的一种；
2、无论哪种方法制作的网页，生成文 件扩展名均为html或htm，即对应是html语言
3、当浏览网页时，看到的不是语言代码而是语言代码所描述 的形象。总结 理解、记忆在上课的最佳时间内，让学生了解有关网页的相关知识，这利于学生的记忆
教师指导(分类指导)共性问题做小结
自学、自练协作学习培养学生自学能力，阅读、分析、解决问题实际操作，使学生成为学习的主体，学习的主人 小结 1解决操作中的共性问题
2指出超级链接是实现多网页链接的的基本方法：
3、保存文件为htm或html格式并预览 学生总结并提出问题，理解超级链接，预览自己的练习作品
解决操作中的问题，为下步学习扫清障碍，将本节的重点问题突出，通过预览对网页设计有一个初步设想
展示第二课时目标：
设计一个网页，内容丰富，突出主题，展示个性
多种素材综合运用(可以自己准备素材)
明确下课时学习任务，主动思考
通过一下课时的目标展示，使学生可以有更多时间去构思、创意，促动学生主动的去思考、去学习，引导学生习惯于创新，展示独特创意。
第二课时
展示第二课时目标：
计一个网页，内容丰富，突出主题，展示个性
多种素材综合运用(可以使用自己的准备素材)
明确任务 
明确目标、任务，理清设计思路
指导(分类) 
设计自己的网页 
培养学生实际操作能力，综合运用知识能力在这过程中学生将会将上节自学的内容及以上学习综合运用，这对培养学生综合能力是相当有好处的。
通过局域网展示网页
学生推荐、自荐、评论 
激发学生向上进取的学习态度，也可以使学生横向学习
课堂小结及课后要求
小结：找优缺点
思考、总结 
进步引导学生学习
课后思考
1、让你的网页互相网上也被全世界人所浏览，那你该怎样实现
2、用DREAMWEAVER制作的网页与我们平时所见的网页效果一样吗？
全班互动学习进一步拓展学生的学习思路，学习空间，加强自学、互学的能力
五、说板书设计：
考虑到信息技术学科教学的实际特点，所以在板书设计上我主要体现了以下三个特点。
突出简要内容
突出课时目标
设置“共性问题”、“总结解决”版面
板书设计 网页制作
第一课时：
网页文件说明
1、常见的网页制作工具
2、网页文件的扩展名为htm或html
3、浏览器所显示的不是语言代码而描述的形象
二、理念构成
1、目标：熟悉用dreamweaver制作网页的基本方法
2、分类指导
共性问题
总结解决 第二课时目标
设计网页，内容丰富，突出主题，展示个性多种素材综合运用(可以自己准备素材)  第二课时：
一、目标：
1、设计网页，内容丰富，突出主题，展示个
2、种素材综合运用(可以使用自己准备的素材)
二、设计制作：
共性问题
总结解决
三、展示、讨论
四、课后思考
第14篇：网页设计教案
课程：
课时：
教学对象：教师： 
公 开 课 教 案
课题：
时间：
地点：多媒体教室五
教学目标：
 严格把握信息产业部关于“网页设计师”职业技能鉴定大纲，使学生能够最大程度满足企业对网页设计人员的需求，掌握网页设计软件的高级应用。
 掌握CSS的基本语法与功能。
 熟悉“CSS样式”面板与“相关CSS” 面板的使用。  学会创建、插入样式表。  学会套用CSS样式。 教学对象分析：
由于讲授对象为高职院校大专生，所讲内容以实际操作为主，注重训练学生动手能力，所以本课程以案例教学的方式讲解。 教学重点：
CSS样式的创建、编辑、导出及应用 教学难点：
应用类样式，设置CSS样式属性 教学方法和教具准备：
在带有大屏幕投影仪和计算机相连接的多媒体教室，采用教师讲解与学生实践相结合的授课方式。 教学过程：
一、导入课题
复习上一章表单知识，简要回顾前面几章的学习：设置文本和网页属性、使用图像、插入表格等，但是仅仅利用以上所学知识做出来的网页比较枯燥，页面并不完美。在网络上形形色色的网站中，怎么才能让自己的页面独树一帜？
1、CSS样式功能：能够使你的页面保持统一的风格，它可以调整文字间距、行间距、删除链接下划线、固定背景图像、制作特殊的边框、改变鼠标指针形状等，并能够简化网站的制作过程。
2、拿c样式做出来的页面效果和没有使用c样式的页面做比较，演示c样式的特效 
二、新课讲解
1、CSS概述
⑴ 什么是CSS？
CSS（Cascading Style sheets，层叠样式表）是一种制作网页的新技术，现在已经为大多数的浏览器所支持，成为网页设计必不可少的工具之一。CSS定义了控制元素外观的样式属性。
⑵ CSS由来
CSS样式由全球广域网协会制定，分别是CSS
1、CSS2 
2、实例讲解
实例
1、利用c样式“类型”选项改变文本属性
分析：Dreamweaver的文本控制功能不足，无论是字体大小，排列方式，还是行间距，等等，它所提供的选择并不多，为了让我们的网页更加美观，更加规范，有必要使用CSS。
步骤：
1. 单击“CSS面板”右下角“新建CSS样式”按钮，弹出“新建CSS样式”对话框。设置完毕后点击“确定”按钮。 2. 在对话框 “类型”选项中，“字体”下拉列表框中选择“华文新魏”， “大小”选择“18”， “颜色”中选择“#003300”，加粗，单击“确定”按钮。 3. 在文档窗口中选择文字，从“样式”下拉列表框中选择该样式即可。
小结：本例中用到c样式列表中的“类型”属性。它可以帮助我们轻松地实现对文本格式的各种设置。
扩展：
1.引入外部样式表
2.利用“区块”选项组设置字母间距、縮进等属性 
实例
2、作出单张图像的背景
分析：默认状态下在“页面属性”中选择图像，则在网页文档的整体背景上重复出现，在c中可以使背景图像在指定位置上只显示一次。
步骤： 1.单击按钮，选择“新建”
2.在“背景图像”中选择合适的背景图像，在“重复”列表中选择“不重复”，在“水平位置”中选择“右对齐”，在“垂直位置”中选择“居中”，在“附件”中选择“固定”，单击“确定”按钮。
3.选中标签，在属性栏的“样式”中选择该样式。
小结：本例中用到c样式列表中的“背景”属性。它可以帮助我们随意设置背景图像。
实例
3、利用c样式给表格设置特殊边框，用图像作列表、改变鼠标指针。
分析：利用c样式为表格设置不同颜色、样式的边框，用漂亮的图标作列表也可将鼠标指针改成动画。
步骤：如实例2，但使用不同的新建及应用方式。
扩展：为标签加双线边框、利用“定位”列表项将表格像“层”一样任意移动。
实例
4、特效文字
说明：在photoshop等图像制作软件中经常会听到滤镜的概念，滤镜能作出很多神奇的特效，然而在dreamweaver mx2004中我们可以利用样式表设定各种滤镜效果。
实例
5、图像特效
说明：利用“滤镜”项为图像设置不同样式。
思考题：改变网页超级链接样式 
作业：
p204页，课后习题
上机练习：
1.对已经编辑的文档使用新的文本样式（包括超级链接时样式改变） 2.将单张图像作背景并且不滚动、水平:右对齐，垂直:底部 3.改变鼠标指针样式 4.光晕字
5.对图像使用滤镜功能 
三、教学后记
第15篇：电子表格和网页教案
第一章 引言
教学目的: 1.总结上学期期末考试情况； 2.安排本学期的学习计划和任务。 教材分析及教学过程: 引言:大家好，新的学期开始了，我又看到各位同学生龙活虎的样子，心里非常开心。一个寒假我真得很想在座的每位同学，老觉得心里少了点什么。大家跟我相处有半年时间，应该了解我，会发现我这个人性格直爽，有可能平时我说的话或做的事伤过某些同学，但我希望大家能够理解我，当然这学期我也会积极努力地理解大家的。但总之你要记住一点，我对你做的一切都是为你好。你们可能不知道，当我看到有些同学不好好学习的时候，我心里比他还着急。
我的课提倡以自学、自我反思为主，大家应该感触很深。因为我是专门学这个专业的，我的感触就是我学到的很多知识上学的时候老师从来没讲过，都是自己在学习中思考发现的，反而效果比老师讲得好，因为是经过自己思考从而概括总结的。当然，我说这句话并不说明老师不重要，当你自己无法解决的时候可以去问老师。老师只是你学习中的领路人。
大家应该了解到从2005年开始中考改革了，除了考语、数、外、物理化学之外，其他所有科目采取区上统考，按等级划分，如果不及格还要补考。
下来，我说一下上学期期末考试的主要目的是锻炼大家的整体构思、实际动手能力，培养大家的创新意识。从你一开始收集资料就已经在锻炼自己的能力了，让我欣慰的是很多同学学会了自己上网获得考卷、到机房拷贝素材，在幻灯片的构思和颜色搭配上很多同学还是下了一定功夫的。我相信凡是认真做考卷的同学，回忆。 教材分析及教学过程: 己初一的水平，肯定会觉得比以前高了一个层次。当然也有个别同学做的不好甚至于没有交考卷的，我觉得主要是学习态度问题，希望上学期你认为哪做的不好的同学加以改正。尤其是上课务必带的课本、鞋套，体育委员负责全班同学在教室门口站队，课代表先检查同学们带课本和鞋套情况。如果哪一个班上课时超过10人不带课本和鞋套，那节课全班同学在教室上课。
本学期第二课堂学习习近平面设计，如果哪位同学美术或计算机比较好到课代表处报名。 最后我简单的说一下本学期的安排和计划。我们将学习Office家族中的两个常用软件，Excel（电子表格）和FrontPage（网页制作）。这两个软件是我们日常生活中使用频率非常多的应用软件，希望大家好好学习。本学期的期末考试采取当堂完成。我带了几位同学期末考试做得好的作品，大家共同学习一下。
第二章 Excel简介
教学目的: 1.使学生掌握单元格与区域的选择；
2.使学生掌握各种类型数据的录入方法和技巧；
教学要求：学生能够输入各种类型数据到工作表中。 教学重点: 各种类型数据的录入方法和技巧。
教学难点:在工作表中录入分数、班级等类型的数据。 教学方法：讲授法、演示与实践法、任务驱动法。 教学场所：在计算机房中完成教学。
第一课时 数据输入 导课: 同学们好，我们在日常生活中经常碰到各种各样的表格，你们常见的有哪些表格？我们可以用哪些软件完成表格的基本操作?对表格中的数据可以做哪些操作？那同学们想一想哪个软件处理数据更方便快捷、直观？ 新课：
一、Excel的启动与退出（看书上第2页） 1.“开始”菜单→“程序” →“Microsoft Excel”； 2.点击“关闭”按钮，“文件”菜单→“退出”。
二、Excel的编辑窗口（看书上第3页，工作簿的组成）
三、单元格与区域的选择 1．选定一个单元格 ⑴ 用鼠标选定：
将鼠标指针指向待激活的单元格,单击左键，被激活的单元格方框将以粗黑线方框显示； ⑵ 用键盘选定：
直接按住键盘上的方向键将粗黑框移到指定的单元格。 ⑶ 单元格的命名：
列坐标+行坐标。例如：A1单元格等。 2.选定一个区域 ⑴ 选定一个连续区域
将鼠标指针指向待选定区域的第一格，按住左键不放，连续向左或向右对角线方向拖动，被选定的区域将高亮显示。 ⑵ 选定一个不连续区域
选定第一个单元格或区域后，按住“Ctrl”键不放再激活第
二、第三等单元格或区域。⑶ 选定一行或一列 直接用鼠标单击相应的行坐标或列坐标名称。 ⑷ 选定整个工作表
单击行列坐标交叉处的“全选”按钮。
四、录入表格数据
录入数据时，首先应分析一下表格中各栏数据的类型特征，因为不同类型的数据其录入方法有所不同。
分析题目：考号栏和成绩栏均为数值型数据，姓名栏、班级栏均为字符型数据。 1．序列数据自动填充法 ⑴ 先输入第一个考号，将鼠标指针指向选定区域右下角，按住“Ctrl”键和鼠标左键进行拖动。 ⑵ 输入前两个考号，然后选定这两个单元格，将鼠标指针指向选定区域右下角，用鼠标左键进行拖动。 2.班级栏的输入
选定单元格，输入’01。 3.录入分数
一般整数、小数可直接输入，而分数的输入有特殊规定，如：4/5，Excel解释为4月5号，再如：1/34，Excel解释为字符型数据。
注意：录入分数时，必须在分数前加上0和空格。
五、保存和关闭工作表 1.保存工作表
“文件”菜单→“保存”选项。 2.关闭工作表
“文件”菜单→“关闭”选型。
第二章 数据输入
1．同学们常见的表格:课程表、成绩表、体检表等 2．完成表格操作的软件有：Word、Excel等
3．对表格中的数据有哪些操作：编辑、计算、汇总、排序、筛选、打印。
一、Excel的启动与退出
二、Excel的编辑窗口
三、单元格与区域的选择 注意：单元格的命名：
列坐标+行坐标。例如：A1单元格等。
四、录入表格数据
1.序列数据自动填充法;2.班级栏的输入：选定单元格，输入’01; 3.录入分数时，必须在分数前加上0和空格。
五、保存和关闭工作表
第三章 表格数据处理（计算）
教学目的:使学生掌握公式法、函数法计算表格中的数据。 教学要求：
1.学生能够用公式法计算总分和平均分；
2.学生能够用Sum、Average函数计算表格中的数据。教学重点: 用sum、Average函数计算表格中的数据。 教学难点:用函数法计算数据时选择的数据范围。 教学方法：讲授法、启发法。
教学场所：在计算机房中完成教学。 教 材 分 析 及 教 学 过 程 第一课时 用公式法、函数法计算数据
导课：
每位同学知道完成一张表格，首先要建表，然后输入表格中的数据，以及编辑数据。除了这些，在日常生活中还要计算表格中大量、繁杂的数据，大家现在和我一块学习如何计算表格中的数据吧？
新课：
一、用公式计算
建立计算公式时，应遵循以下原则：
1.公式必须以“=”（等号）开头，后跟运算表达式；
2.Excel允许的运算表达式主要有算术类、文字类、引用类等。①算术类：符号有-（符号）、^(幂运算)、*和/（乘和除）、+和-（加和减）； ②文字类:符号有&（连接）； ③引用类：符号有：（冒号）、（逗号）、（空格）； 例1：选定H2即总分单元格，在其中输入计算公式：=E2+F2+G2，然后按回车键，这时H2单元格中立即显示出总分：247。
由于每个人的总分计算方法一样，但是这样会很慢，为了提高工作效率，我们一般采用如下技巧。
3.技巧(自动计算总分) 首先计算一个人的总分，然后向下拖动鼠标。
二、用函数计算
为了减少公式法中敲入过多的符号，Excel提供了很多现成的函数，直接可以使用。 例2：选定I2单元格，单击“插入”菜单，选择“函数”选项，选择“Average”（平均），并单击确定。
在“Number1”栏中输入计算平均分的区域F2:G2，注意系统默认的包括总分H2这个单元格中的数据，应改变选择区域。 
板书设计：
第一课时 用公式法、函数法计算数据
一、用公式计算
建立计算公式时，应遵循以下原则：
1．公式必须以“=”（等号）开头，后跟运算表达式；
2．Excel允许的运算表达式主要有算术类、文字类、引用类等。 a)算术类：符号有-（符号）、^(幂运算)、*和/（乘和除）、+和-（加和减）； b)文字类：符号有&（连接）； c)引用类：符号有：（冒号）、（逗号）、（空格）； 3．技巧(自动计算总分) 首先计算一个人的总分，然后向下拖动鼠标。
二、用函数计算
使用“SUM”、“AVERAGE”等函数计算。
第四章 表格数据处理（排序、筛选）
教学目的: 使学生掌握表格数据排序、筛选数据。
教学要求：学生能够对表格中的数据进行排序、筛选。 教学重点: 排序中的主、次关键字的作用。 教学难点: 筛选中如何使用自定义。 教学方法：案例法、启发法。
教学场所：在计算机房中完成教学。 教 材 分 析 及 教 学 过 程
第一课时 排序、筛选数据
导课：
上节课我们学习了计算表格中的数据，发现函数法的效率更高一些。那么，我们计算完数据后，还要对数据进行排序（每学期的期中、期末考试排名），有时还需要筛选出需要的数据。
新课：
一、表格数据的排序
当要对表格中的数据整理顺序时，可以通过“数据”菜单中的“排序”选项或者使用工具栏上的自动排序来进行。 例1：选定范围（A1:I9），单击“数据”菜单中的“排序”选项，弹出“排序”对话框，在“主要关键字”下拉列表中选择“班级”选项，相应的排序方式选择为“升序”；在“次要关键字”下拉列表中选择“英语”选项，相应的排序方式选择为“降序”，在“选择排序 例1.讲实验一中的第5题。
区域”选择框中选中“有标题行”。
提问：日常生活中，我们经常会发现两位同学分数一样，到底把哪位同学排在前面。 回答：我们只能通过次关键字来决定哪位同学排在前面。
二、用自动法排序
如果排序时，只指定一个排序关键字，那么我们可以用常用工具栏上的升序、降序排序。
三、表格数据的筛选
数据的筛选将符合要求的数据集中显示在工作表中，而不符合要求的数据暂时隐藏起来。
例2：选择欲筛选的数据区内的任意一个单元格，然后选择“数据”菜单项“筛选”的级联菜单中的“自动筛选”选项，此时标题行中的每一个字段名旁都出现一个下拉列表按钮，选择“班级”栏目名的下拉列表框中“02”选项和“团员否”栏目中的下拉列表中的“是”选项，完成了筛选。如果要撤销筛选，只要取消“自动筛选”选项即可。 例3：有的时候下拉列表中没有我们直接可以找到的结果，此时采用“自定义”的方法。选择“班级”栏目名的下拉列表框中“01”选项，然后选择“英语”栏目中的“自定义”选项，屏幕上弹出“自定义自动筛选”对话框，在左上方的下拉列表中选择“大于或等于”，在右上方的下拉列表中选择“70”。
注意：从以上两题的筛选操作过程中可以看出，一般筛选可通过字段名旁的下拉列表中的条件直接筛选，而包含逻辑运算的筛选，则必须通过下拉列表中的“自定义”来建立筛选条件。
注意：个别同学把“各科均分”也排序了。什么原因造成的？ 2.讲实验一中的第6题。 3.讲实验一中的第7题。 4.讲实验一中的第8题。
注意区别“大于”或“等于”70与“大于70或等于70”。
第五章 数据的输出与打印
教学目的：
1.使学生掌握表格的美化；
2.使学生掌握表格的页面设置、预览与打印。教学要求：
1.学生熟练掌握用格式工具栏或对话框美化表格；2.学生熟练掌握“页面设置”中常用选项的设置。 教学重点:  1.如何打印出有边框的表格。 教学难点:  1.如何操作才不浪费纸张和墨水。 教学方法：
1.案例法、讨论法。
教学场所：在计算机房中完成教学。 教 材 分 析 及 教 学 过 程
第一课时 数据的输出打印
导课：
前几节课我们学习了在Excel软件中计算、排序和筛选等操作，但是我们总希望将表格设计的尽量美观，使信息表达的清晰明白，给人一种赏心悦目的感觉。那么，该如何美化表格呢？下来，大家跟我一块开始学习吧！ 新课：
一、用工具栏格式化
1．字体、字形和字号的改变； 2．对齐格式的设置；
重点提出“合并及居中”操作，因为很多学生不会合并单元格。 3．数字格式的设置； 4．加边框线。
二、用对话框完成工作的格式化
由于工具栏是一种简化的操作，不可能将所有的格式命令都放在工具栏上。因此，我们使用另一种方法设置单元格，用“格式”下的“单元格”命令。
三、页面设置
当我们把表格美化之后，最后的工作就是打印表格。请大家看黑板，今天我们打印表格总共需要三步。 例1：首先打开自己原先的文件，接着点击“文件”菜单中的“页面设置”选项，在“页面”标签中选择“纵向”，缩放比例调整为“100%”，纸张大小定为“A4”。
为了保证打印的表格在水平方向处于纸张的中间位置，在“页边距”中选择“水平居中”。
把页面装饰得更好看，需要设置“页眉/页角”。在“页眉”中输入“初二年级成绩表”，在“页角”左侧输入“日期”、居中处输入“制作人名称”、在右侧输入“页数”。 思考：当使用“打印预览”时发现打印的表格缺少什么？该如何设置？
发现表格没有边框，只要把“工作表”标签中的“网格线”选中即可，你现在试一试吧，看看结果。
四、打印预览
思考：我们经常发现打印出来的数据有错误，又要重新修改再打印，发现这样做既浪费了纸张，又浪费了墨水，有没有好的办法来解决浪费现象。
单击“文件”菜单中的“打印预览”，这样，就可以预览我们的文件了，一旦发现错误可以及时修改。
五、打印内容
1.点击“文件”菜单中的“打印”选项，在指定“打印范围”中可以“打印全部”或者“从第几页打印到第几页”。
2.教你一招：“打印预览”在常用工具栏上有一个快捷按钮，我们可以应用这个快捷按钮实现打印预览的目的。
思考：如果我们打印一张表格需要50份，并且让电脑自动按页码顺序整理好，该如何操作？
如果选择“逐份打印”，则按照份数由第一张打印至最后一张，如果不选择，则先打印完所有的第一页，再打印第二页。
第六章 创建自己的网站
教学目的：
1.使学生掌握网站的建立；2.使学生掌握网页背景的设置。 教学要求：
1.学生熟练掌握网页背景的设置。教学重点: 1.如何建立一个空白网站。 教学难点: 1.网页背景的设置。 教学方法：
1.案例法、讨论法。
教学场所：在计算机房中完成教学。 教 材 分 析 及 教 学 过 程
第一课时 创建自己的网站 导课：
随着Internet的发展，越来越多的人开始上网，有些人甚至有了自己的网站，还有很多人希望在网上拥有自己的一片天空。我想问大家，你们想不想制作一个属于自己的网站呢？那好，下来和我一块开始创建自己的网站吧。
新课：
首先在硬盘上建立一个文件夹。例如我想制作一个关于旅游方面的网站，那么，就给这个文件夹取名为tour。
一、建立自己的网站
首先启动FrontPage软件，在新建里选择“空白网站”，然后在“指定新站点位置”里选择刚才在硬盘上建立的tour文件夹。此时，一个空白网站建立好了，大家发现里面只有两个文件夹。再到硬盘上看tour文 教 材 分 析 及 教 学 过 程
二、新建主页
网站的第一页我们把它叫做主页，即Homepage。因此，我们制作的网站首先应该建立主页。在文件菜单中选择新建网页，系统默认的网页名叫做new_page_1.htm。 FrontPage可以让我们在三种不同模式下显示同一网页，一般用户在“普通”模式下编辑，懂得html代码的用户可以在“html”模式下编辑，很早以前用户用“记事本”来编辑网页，html叫做“超文本标记语言”。
三、设置网页背景和标题
在网页的空白处单击鼠标右键，选择“网页属性”，在“常规”标签里的标题中输入“旅游风光”，还可以给网页添加“背景音乐”。
此时的网页背景是白色，如果我们想用图片作为背景，要在“背景”标签里选择“背景图片”，通过浏览选择自己喜欢的图片。建议：作为背景的图片一定要颜色暗淡一些，并且颜色不要杂乱，这样才能保证网页的美观性。
要用颜色填充背景，在颜色背景中选择自己喜欢的， 选择的颜色也不要过于艳丽，我们一般看到的网站还是白色。
四、保存网页
当我们设置好网页的标题和背景之后，必须保存，此时电脑会把第一张网页的名字自动取名为index，这就是我们一个网站中主页的名字，必须是这个名字，我们不能更改，否则将来别人无法浏览网站。其它网页的名字可以随便，如果刚才用图片设置的背景，电脑也会弹出图片保存对话框，我们一般把图片保存到网站最先给的文件夹images里，这样做的好处在于便于管理。 
五、浏览网页
当我们编辑好一个网页，可以有两种方法预览：一种方法直接使用“预览”模式，另一种使用浏览器预览。观察浏览器标题栏上显示的名字，我们会发现是我们设置网页的标题名“旅游风光”。
六、打开网页
我们可以把别人制作好的网页打开从而进行学习。今天，我们打开“新浪的主页”，看看设计者是如何完成版面布局的。我们发现版面布局全部使用的是表格完成的，然后在单元格里放入图片、文字等其他内容。
七、删除网站
选择网站的文件夹，按鼠标右键中的删除命令，最后选择删除整个网站。看看硬盘上的那个文件夹还在不在。
八、练习
下来大家练习新建网站和主页，更改主页的标题和背景，还可以在网页上添加表格，最后保存。
第七章 网页中的表格
教学目的：
1.使学生掌握如何在网页中添加表格；2.使学生掌握表格属性的设置。 教学要求：
1.学生熟练掌握表格属性的设置。教学重点:  1.设置表格的边框。 教学难点: 1.表格和单元格背景颜色的优先级。 教学方法：
1.案例法、讲授法。
教学场所：在计算机房中完成教学。 教 材 分 析 及 教 学 过 程
第一课时 网页中的表格 导课：
大家上节课学习了如何创建网站，并且我们看到了著名“新浪”网站设计者设计的新浪主页，版面布局用表格来完成的，因此，今天我们首先来学习与表格有关的知识。 新课：
请同学们回忆一下在Word中是如何添加表格的？
一、添加表格
在“表格”菜单中选择插入选项，输入相应的行数和列数，对齐方式选择“水平居中”。除了这种方法，我们还可以手工绘制表格。
二、调整表格宽度和单元格宽度
首先选中表格，单击鼠标右键，选择“表格属性”，
可以用“百分比”和“像素”来表示宽度，例如在数据框中输入50，表格的宽度占屏幕宽度的50%。还有种最简单的方法，像在Word中直接调整宽度和高度。
如果要设置单元格的宽度，只需选择“单元格属性”，在指定宽度中输入具体的值，和表格属性一样，但是最简单的方法还是直接调整单元格的高和宽。
三、设置表格和单元格的背景
我们首先改变表格属性中的背景，用一种颜色填充，然后我们在改变单元格的背景，你们发现谁的属性级别高呢？如果我们不想改变整个表格的属性，只须改变单元格的背景。
四、表格的边框
我们主要用表格来完成版面布局。因此为了不让用户在网上看到表格的边框，我们把它设置为0。
第八章 网页中的文字与图片
教学目的：
1.使学生掌握用格式工具栏改变文字的属性；2.使学生掌握图片属性的设置。 教学要求：
1.学生熟练掌握文字与图片属性的设置。教学重点:  1.文章自然段的划分。 教学难点: 1.如何用文本来代替图片。 教学方法：
1.案例法、讨论法。
教学场所：在计算机房中完成教学。 教 材 分 析 及 教 学 过 程
第一课时 网页中的文字与图片 导课：
我们首先复习一下以前学习的知识。请一位同学给大家用“空白站点”模板建立一个网站，然后看一个例子，大家思考它是如何制作的。首先看浏览器标题栏上的文字，请问在哪里可以完成设置。我们可以用什么完成版面布局，这张网页添加的是几行几列的表格，表格的边框是如何变成虚线的。当我们把骨架搭好以后，最后就可以在单元格里面添加文字与图片了。 新课：
一、添加文字
直接在光标闪烁处输入文字。
二、修饰文字
当我们把文字输入以后，更希望文字变得漂亮，我们用哪一个工具栏可以完成文字的美化。
教 材 分 析 及 教 学 过 程
三、自然段的划分
我们首先看这个例子。这篇文章有很多自然段，大家想想输入什么可以换行并另起一段，如果只想换行不想另起一段，那该如何做呢？看书上第33页小知识。
四、添加图片 在“插入”菜单中选择“图片”里面的“来自文件”选项。
五、修饰图片
调用“图片”工具栏或者单击鼠标右键选择“图片”属性。
六、用文本替代图片
单击鼠标右键选择“图片”属性中的“常规”标签，在“替代表示”中“文本”里输入文字，这些文字内容的含义主要用来说明或解释图片。最后用浏览器浏览制作效果。
第九章 创造更加舒适的环境
教学目的：
1.使学生掌握水平线的运用；
2.使学生掌握在网页中加入滚动字幕；3.使学生掌握时间戳的运用。 教学要求：
1.学生熟练掌握水平线和滚动字幕相关属性的设置。教学重点:  1.滚动字幕表现方式的区别。 教学难点: 1.表示水平线宽度的两种方法。 教学方法：
1.案例法、讨论法。
教学场所：在计算机房中完成教学。 教 材 分 析 及 教 学 过 程
第一课时 创造更加舒适的环境 导课：
我们上节课复习了建立网站的基本流程，但我们希望网站能够给浏览者提供更加舒适的环境。比方说我们为了防止别人侵权，在网站上添加版权信息；重要的话语想吸引浏览者的目光，可以使用滚动字幕；想要让浏览者了解网页内容的更新，可以使用时间戳。下面我们一块来欣赏几个例子。
新课：
一、添加水平线
我们一般都会在网页的最下方添加制作单位、版权信息等内容，可以使用水平线把这些和网页内容隔开。
单击“插入”菜单，选择“水平线”，编辑窗口中立即出现一条水平线。当我们想改变水平线的高度、宽度、对齐方式和颜色时，必须选中水平线，单击鼠标右键，选择“水平线属性”。
水平线的高度、对齐方式和颜色很容易理解，但是它的宽度相对来说不是很好理解，有两种表示方法：一种使用绝对值，单位为像素，比如可将水平线宽度设为500像素，当改变浏览器窗口大小时，水平线的宽度不会发生变化；另一种方法是使用相对值，单位是百分比，比如将水平线宽度设为50%，意思是水平线宽度始终占窗口的50%，随窗口大小的变化而变化。看书上第38页小知识。
二、添加滚动字幕 我们为了让更重要的信息吸引浏览者，可以使用滚动字幕。
单击 “插入”菜单，选择“Web组件”选项，选择“字幕”，出现“字幕属性”对话框；在文本里输入要显示的文字，滚动字幕的表现方式有三种，让学生看一下三种表现方式的区别。
三、时间戳
大家都知道制作网站要花大量的时间，而维护网站对于网站的生存期更重要。为了便于浏览者了解网页的更新，我们使用时间戳。 单击 “插入”菜单，选择“日期与时间”选项，我们选择第一项，“该网页上次编辑日期”，然后选择日期和时间格式。
第16篇：电脑网页制作教案
电脑网页制作教案
教员：王晓燕
课时：第一课时，一个半小时 教学目标: 1.知道如何启动和退出Dreamweaver8 2．掌握如何建立新站点，网页的打开和保存 3.掌握如何插入图像，动画，插件 4.掌握如何插入水平线
教学重点与难点：如何插入图像，动画以及修改其属性 教学方式：老师边讲解边指导学生如何操作 教学软件：Dreamweaver8 教学过程： 一.启动Dreamweaver8,
“开始”
单击”程序/”Macromedia”/”Dreamweaver8”或双击桌面上的快捷图标，退出时单击工作窗口右上角的关闭按钮 二.三.新建网页, “创建新项目”/”HTML”
新建站点.”站点”/”新建站点”/”站点”
输入站点名称,选择本地根文件夹 四.五.文件的保存 “文件”/”保存”;或”另存为”
插入Flash动画，“插入”/”媒体“ 可以选择插入Flash、
Flash文本或Flash按钮，插入对象后，利用“属性”面板设置有关属性 六.插入插件，“插入”/”媒体”/”插件”,在对话框中选中所需文件,单击”插入”,利用”属性”面板设置其大小
七.插入水平线,”插入”/”HTML”/”水平线” ,利用”标签”/”属性”/”浏览器特定的”/color 更改其颜色
第17篇：网页制作第二节教案
由莲山课件提供http://www.daodoc.com/  资源全部免费
【第六章 第二节 网页制作】教案
一、【教学目标】
1、插入表格，利用表格布局页面
2、插入背景图像，插入图象，对比两者的异同。
二、【教学重点】 利用表格布局 
三、【难点、关键】 表中表的使用 
四、【教学方法】 演示、任务驱动法 
五、【课时安排】1课时
六、【教学环境】多媒体教育广播系统，Dreamweaver软件 
七、【教学过程】 1．导入新课
①回顾上节课的学习内容
②小组讨论对比两个网页布局有什么不同？（心系奥运，古玩今玩） 
2．新课讲述 
1．利用表格布局页面（布局表格和普通表格） 操作步骤：
①“插入”/“表格”或者在常用插入栏中的“插入表格”按钮
②在表格对话框中设置插入表格的行数，列数，表格宽度，边框粗细，单元格边距等， ③单击“确定”按钮完成表格的创建
（如果要边框显示就设置边框的值，如果不要，就将其设置为0）
表格属性的设置（合并单元格，表格（选中整个表格）、文字的对齐方式（选中单元格）
背景色设置）
利用表中表来布局页面的技巧（参考“心系奥运”的布局方法）
 任务一:在”心系奥运”首页分别利用表格布局和普通表格两种方法设计导般条.由莲山课件提供http://www.daodoc.com/  资源全部免费 由莲山课件提供http://www.daodoc.com/  资源全部免费
2．插入图片 背景图片
“修改”/“页面属性”命令弹出“页面属性”对话框，在“分类”列表框中有“外观”中设置，
注意使用背景图像的一些方法：①使用小图，图片容量小，方便传输，页面美观 ②色彩淡点，有利于后面的页面制作。 插入图片 操作步骤：
①将插入点移到要插入图片的位置，“插入（I）”菜单中的“图像（I）”命令，打开“图像源文件”对话框，如果要插入的图片已经保存在当前的网站中，可以直接在图的列表框中选取，然后单击“确定”按钮。否则，单击“浏览”按钮 ，从“选择文件”对话框中选择所需图片，单击“确定”按钮，将图片插入到网页中。 ② 拖动图片到页面左侧适当位置。 注意要把图片放到站点下 说明两种图像的不同点
 任务二：在首页插入四幅图像,每一幅图像代表一个模块,图象大小设置成”249*48”,后面用文字说明模块的概意  
在表格中输放文字
文字编辑是制作网页最基本的操作。在网页编辑窗口中，可以像在Word中一样直接输入文字，进行编辑和排版。
 任务三: 在插入的四幅图像后加入文字说明，采用默认的字体和字号，颜色为黑色，居中排列。
八、小结本次课内容
总结本堂课的学习内容，还有，确定各小组期末作品的主题。
由莲山课件提供http://www.daodoc.com/  资源全部免费
第18篇：12、网页制作教案
12、DREAMWEAVER 8.0 网页制作教案
（一）
一、网站的基本概述
（一）、网页：网页是计算机连接网络时浏览器窗口中显示的一个页面，是计算机网络最基本的信息单位,它实际是一个文件,存放在世界某个角落的某一台计算机中,当我们在浏览器输入网址后,网页文件会被传送到你的计算机,这样就可以利用网页来访问计算机了。
网页分类：（1）静态网页:网页中包含文字、图片、动画、视音频。
（2）动态网页:网页中包含文字、图片、动画、视音频以及交互功能. （两者的主要区别:是否包含交互功能）
例：《自动控制原理》精品课程
网站：是众多网页的集合。 
（二）、网页的基本构成元素：
包含图片，文字，超级链接，动画，表单，视频音频等元素中的一种或多种
（三）、网页的页面设计： （1）、网页布局：网页布局是根据你所设计网站类型而设计的，不同的网站有不同的风格，一般包括了标题栏，页眉区（通常包含网站标志），导航区，正文区、页脚。
例：Visual Basic 学习网站 （2）、配色原则：网页设计要达到赏心悦目的目的，需要注意色彩的搭配与风格的设计。例：麦当劳 （3）、版面编排：例：清华大学
版面既要有美感又要实用，美感是令人感觉舒服的主要因素之一，但美感是要为内容服务的，所以版面的编排要注意各部分内容的比例关系，也就是 “经营位置”。作为一种版面，既有文字，又有图片。文字有大有小，还有标题和正文之分;图片也有大小，而且有横有竖之别。图片和文字都需要同时展示，不能简单地罗列在一个页面上，这样往往会搞得杂乱无章。必须根据内容的需要，将图片和文字按照一定的次序进行合理的编排和布局，使它们组成一个有机的整体。可以依据如下几条来做：
1.主次分明，中心突出。在一个页面上，必然考虑视觉的中心，这个中心一般在屏幕的中央，或者在中间偏上的部位。因此，一些重要的文章和图片一般可以安排在这个部位，在视觉中心以外的地方就可以安排那些稍微次要的内容，这样在页面上就突出了重点，做到了主次有别。
2.大小搭配，相互呼应。较长的文章或标题，不要编排在一起，要有一定的距离，同样，较短的文章，也不能编排在一起。对待图片的安排也是这样，要互相错开，造成大小之间有一定的间隔，这样可以使页面错落有致，避免重心的偏离。
3.图文并茂，相得益彰。文字和图片具有一种相互补充的视觉关系，页面上文字太多，就显得沉闷，缺乏生气。页面上图片太多，缺少文字，必然就会减少页面的信息容量。因此，最理想的效果是文字与图片的密切配合，互为衬托，既能活跃页面，又使主页有丰富的内容。 
（四）网站设计的原则 
（１） 网站主题和内容明确。 （２） 网页色调和谐，布局清晰。
（３） 网站方便易用，提供有效的导航条，使人很容易从每一页上访问到网站的任何部分,最好在每一个网页同样的位置上都有相同的导航条。
（４）避免长文本页面,每一个网页的高度不能超过三倍的浏览器高度，避免使用过大的图像，不要使用横滚动条。
（５） 避免错误链接，保证链接有效。
二、如何策划一个网站（制作网站的目的以及如何实现）
步骤：
1.给网站定位，确定网站的性质 给出网站的主题和名称(例如求职，聊天，社区，计算机技术，网站开发，娱乐，旅行) 2.确定网站的栏目：也就是导航区的内容，栏目的实质是一个网站的大纲索引，所以应该将网站的主体明确的显示出来，栏目要主体突出。
3.确定网站的目录和链接结构 ，画出网站的目录结构图。
4.绘制首页网页的布局：如：圣诞节网站，见网页例子：网页表格布局.htm
5、根据你的网站构思准备素材（文字、图片、动画、视频音频等元素）.在你的文件夹下面分别建立images 和txt、others三个文件夹存放你的素材。
三、Dreamweaver 软件的启动
四、Dreamweaver 8.0操作界面
DREAMWEAVER 8.0操作界面
（一）工作区的组成结构：
（二）、Dreamweaver面板和面板组：
（三）菜单栏中各个菜单的基本作用：  文件：包括对文件的各种操作。
 编辑：包含了对文件的拷贝，粘贴，查找与替换等命令。  查看：使用查看菜单可以查看文档的相关内容。
 插入：用于将对象插入文档中。包括图片标记、flash动画、视频、表格、超级链接、日期、水平线等：属性可以在属性面板中进行可视化设置
 修改：可以使用修改菜单更改选定页面元素的属性。
 文本：可以设置文本的格式，如段落格式、字体、文本环绕排版及停止文本环绕等。  命令：提供各种命令的访问。
 站点：提供用于管理站点以及上传和下载文件的菜单项，可以创建站点和对
已有站点进行编辑  窗口：提供对Dreamweaver中的所有面板，检查器和窗口的访问。  帮助：提供了对Dreamweaver文档的访问。 
五、定义一个站点
举例：Dreamweaver学习网站
（一）、定义一个站点
在正式开始制作网页之前，最好先定义一个新网站，这是为了更好地利用站点窗口对站点文件进行管理，也可以尽可能的减少一些错误的出现，如路径出错，链接出错。我提倡的做法是：建立一个文件夹用于存放网站的所有文件，再在文件内建立几个文件夹，将文件分类，如图片文件放在images文件夹内，HTML文件放在站点文件夹内。
文件的命名也是非常重要的，不要随便乱起些名字，最好做到一看文件的名字就知道是什么内容的网页文件。提倡用英文或者拼音给文件命名，不要使用中文的名字，因为有的浏览器对中文支持不太好，有可
3 能出现链接的错误。
定义站点的步骤： １、启动dreamweaver 8.0中，在菜单栏中选择站点>管理站点。 在弹出的管理站点对话框中，点击新建 。
接下来需要给站点起一个名字，输入您网站的名字，可以定义中文名。
这里起名为dreamweaver学习网站,按下一步
2、按下一步按钮，选择是否使用服务器技术。因为实例建立的是一个静态站点，就选择“否，我不想使用服务器技术”。
3、按下一步按钮，因为要传到网上的虚拟主页空间，就要选择“编辑我的计算机上的本地副本，完成后再传到服务器上”。
4、按下一步，选择要定义的本地根文件夹,这里选择D或E盘中你的文件夹，点“选择”按钮，因为没有使用远程服务器，就选择“无”。按下一步
5、按完成按钮，一个站点就定义好了。
6、打开文件面板（窗口→文件），在您的站点文件中新建三个文件夹，用于存放与站点有关的图片等文件，分别是命名为images、txt、others。
4 
新建五个网页文件，分别命名为：
index.html、kcjs.html、kcxx.html、yxzp.html、sczy.html 打开D盘看看你刚刚建立网站的文件。
 素材文件名和网页文件名必须用英文或英文状态下的数字，不能使用中文
练习1：在dreamweaver 中定义一个站点，文件夹放在D 盘的目录下。
六、常用功能介绍
（一）、表格的使用：
 制作网页数据表格：熟悉表格的插入、合并、拆分与嵌套；表格的制作..htm  表格的基本构成标记 ：
（1）创建表格：
第一步：在Dreamweaver 8.0中运行“插入→表格”命令，弹出属性设置窗口，添入插入表格的行数、列数、表格的宽度，根据自己的需要来设置表格的相应属性即可。 
小提示：表格的宽度和高度可以通过浏览器窗口百分比或者使用绝对像素值来定义，比如设置宽度为窗口宽度的100％，那么当浏览器窗口大小变化的时候表格的宽度也随之变化；而如果设置宽度为500像素，那么无论浏览器窗口大小为多少，表格的宽度都不会变化。 
第二步：点击窗口中的“OK”按钮之后即可在Dreamweaver 8.0中新建一个表格，而且通过窗口下部的属性面板还可以对其进行诸如表格线条的颜色、表格的背景色、表格的背景图片（介绍如何插入横铺垫、竖铺垫、不重复的背景图片）、色单元格的对齐方式等参数进行调整。
用标签选择器选择表格，将光标定位在表格的第一个单元格内，可以看到状态栏左侧的标签选择器处显示为 “{body}{table}{tr}{td}”，其中table表示表格，tr表示表格中的行，td表示单元格，现在td被加粗显示，说明光标处在单元格内。单击一下{table}，标签选择器处显示为“{body}{table}{tr}{td}”（如下图），再看编辑区内的表格，表格周围为一圈黑线，表示表格被选中了，四周还有几个黑色的小方块，是表格拖放手柄，可以用来改变表格的大小。
（2）基本使用（举例说明：表格的制作..htm）
步骤：
第一步：先插入一个９行３列的表格；
第二步：选中表格中第二行第二列的单元格，接着点击属性模板中的“拆分单元格”按钮，这样就把选中的单元格拆分为二个单元格，按照同样的方法再将表格中其他需要拆分的单元格拆分。 
第三步：选中表格中第九行中第二列和第三列的单元格，接着点击属性模板中的“合并单元格”按钮，这样就把选中的两个单元格合并成为一个单元格，按照同样的方法再将表格中其他需要合并的单元格合并。 
第四步：将表格第九行的三个单元格全部选中，再将属性模板中的背景颜色（Bg）一项设置为“#FFFF00”，这样表格第一列中的单元格背景全部变为黄色。 
第五步：在表格中输入相应的文本，为了美观可以在属性面板中进行居中设置。 
第六步：为了使表格产生立体效果，可以将整个表格选中，然后在属性面板中设定表格边框的宽度（Border）为7，并且将边框颜色（Border color）设置为灰色即可。 
小提示：选取整个表格常用的方法：1．把鼠标移动到表格右边界外侧，按下鼠标之后往左拖拽，这样可以快速选取整个表格。２．在单元格中右击鼠标，并且从弹出菜单中选择“表格→选择表格”命令选取整个表格。３．用鼠标点击任一个单元格，接着按两下“Ctrl＋A”组合按钮选取整个表格。
完成上述操作之后，我们就可以在Dreamweaver 8.0中定制出颇具专业水准的表格了。 练习
2、新建一个网页，在网页中插入一个3行3列的表格，设置表格属性 （边框和背景颜色），试着对目标行和列进行拆分、合并及新增表格的操作。
（3）利用表格来定位网页
表格在网页布局中有着举足轻重的地位，很多网站的页面都是以表格为框架制作的，这是因为表格在内容的组织、页面中文本和图形的位置控制方面都有很强的功能，灵活、熟练地使用表格，会使你在网页制作中如虎添翼。
表格的网页定位主要通过将网页内容分成若干个区，然后将相应的内容分别填入不同的表格，从而做成非常规范与专业的网页，下面就来看看dreamweaver学习网站是如何通过表格实现网页布局的。 表格定位网页：如index_wlr.html  是一个只含表格的网页。
为方便网站能在在800×600分辨率下会显示正常，无横滚动条，我们编辑的网页宽度就定为750象素，高度可以大些，在浏览器中显示时会有竖直滚动条。
总体布局：在菜单栏选择插入命令，下拉的菜单中选择表格，在弹出的对话框中选择一个，宽为750像素，1行1列的表格，并设置边框粗细、单元格边距、单元格间距均为0； 
页眉区： 观察到网页最上部是页眉区，页眉区可以放嵌套一行一列的表格，用于放置一个宽为750高的图片文件或flash文件； 
导航区：嵌套一行五列的表格，用于放置五个导航； 
正文区：正文区总得说来是由一个一行二列的大表格构建而成，所以首先插入一个一行二列的表格，在左边一列的单元格中插入一个16行１列的表格，在右边一列的单元格中插入一个7行3列的表格。 布局页脚：网脚是由一个大的表格组成，可以插入一个1行１列的表格，表格的宽设置为750象素。 
练习
3、打开dreamweaver学习网站站点的index.html文件，设置页面属性，并利用表格定位网页，保存网页。
（二）文字的插入
介绍编辑字体列表。
注意：在网页上打入空格的办法是：把输入法调为全角。 
在网页上换行的办法是：shift+Enter。只按Enter则为换段。 
（三）图片插入：设置图片对齐方式，使文本产生环绕效果。
例如：建立文本环绕右边：、停止文本环绕：
在文字代码中插入 
（四）插入水平线：
它的颜色设置要通过代码设置，宽和高可以通过属性面板  
（五）页面属性的设置：在编辑网页之前，先对页面属性进行设置，便于保证网页风格的统一，当然，页面属性的设置是随时可以进行的。举例：在标题上输入：dreamweaver学习网站，在背景，文本，链接，访问过的链接，活动链接几部分选取颜色。设置左边界，顶部边界，边界宽度，边界高度都为0象素，可以使页面中的表格与背景没有空隙。如果不设置边界，顶部边界，就会默认表格与顶部和边界有明显的空隙 用得比较多的还有背景图像的设置，选择一个已经做好的图像，就可以设置成页面的背景图像。
页面属性设置完毕后，我们会发现代码窗口出现了如下代码（黑色部分）： body {  margin-top: 0px;
页面顶部边界为0  background-image: url(images/dt.gif);
页面背景图像
} a:link {  text-decoration: none;  color: #666666; } a:visited {  text-decoration: none;  color: #3333CC; } a:hover {  text-decoration: underline;  color: #660000; } a:active {  text-decoration: none;  color: #CCFF33; } body,td,th {  font-size: 12px;  color: #666666; font-family: 宋体; line-height: 20px;
行距（需要在代码区设置，它的大小应该比文字大小要大，否则会吃掉一部分字体。）
} 
练习
4、试在练习3中建立的网页文件index.htm中练习插入文本、插入水平线、图片并设置图片的垂直边距和水平边距、设置页面属性。
（六）日期的插入：在插入栏选择日期，在弹出的对话框中选择显示的格式。
（七）E_mail链接的插入：在插入栏选择电子邮件链接，在文本中输入要显示的文本，在E_mail中输入需要链接的邮件地址。
（八）交换图象效果的制作：（插入→图像对象→鼠标经过图象）
鼠标经过图象的效果是当鼠标指针经过或者按下按钮的时候，图像或按钮的形状或颜色就会发生变化，如图像变换，发光，或者阴影出现等等。是网页变的生动活泼起来。
看dreamweaver学习网站导航演示：鼠标移动到图片上的时候，图片变成了另外一幅，当鼠标移开后恢复到原来的图象。
8 
制作步骤：
1、光标移动到欲插入的位置，点击菜单栏【插入】【图像对象】【鼠标经过图像】打开对话框：
【图像名称】鼠标经过图像的名称，名称是自定义的，只要不与同页面另一个鼠标经过图像名称相同即可，也可以不填。
【原始图像】页面开始时显示的图像
【鼠标经过图像】鼠标经过的时候显示的图像。
【替换文本】图像无法正常显示的时候出现的文本注释，也是图像正常显示时鼠标指向链接时的说明，也可以不填。
【前往的URL】点击鼠标后链接的目标。
【预载鼠标经过图像】浏览网页时两个图片都同时被下载，当鼠标经过时无需从网上下载，而是调用预先下载的图像，减少延迟，使效果平滑流畅。
（九）flash动画插入、flash按钮的插入、flash文本的插入，可以来制作导航栏。
练习
5、试在练习3中建立的网页文件index.htm中练习插入插入水平线、flash动画、flash按钮、日期、交换图象 
（十）了解简单的HTML：超文本标志语言，简要的介绍网页中使用的超文本标识语言HTML的基本概念和用途通过一个简单的html示例（html.html）了解html的基本构成，介绍html的基本组成部分.如果深入了解可以参考：http://www.shanxiwindow.net/teaching/htmlbook/
（十一）制作滚动的公告文字
在网页上可以方便地设置文字上下左右移动，控制文字移动的标点词,如下格式：
文字在移动
在浏览器中显示时，文字在移动这几个字左右移动。还有一些重要的属性。
dirrction:控制移动方向，可取left,right,up,down四个值；
behavior:移动方向，可取scroll (循环移动),slide(只走一圈),alternate(来回移动)；
loop:指定循环次数，不输入或-1表示无限循环
height,width:移动区域的高和宽，单位像素
scrollamount:移动的快慢，整数越大则越快
scorlldelay:每移动一步之后的延时，单位毫米
bgcolor:移动区域的背景色
onmouseover=this.stop() 鼠标覆盖时停止滚动
onmouseout=this.start() 鼠标离开时开始滚动
如下面的代码就上一个常见的实现向上滚动文字的原代码；
9 scrolldelay=\"1\" onMouseOver=\"this.stop();\" onMouseOut=\"this.start();\">祝您圣诞快乐！！！
（十二）创建网站相册： 在你站点下建立一个放置数张图片的文件夹,本实例是将文件夹命名为photo。
练习
6、试在练习4中建立的网页文件index.html中制作制作滚动的公告文字
您的网站初步构思
1、网站的主题和名称：
2、网站的栏目（也就是导航区的内容）：
3、网站的目录结构图：
4、网站的链接结构结构图：
5、绘制首页网页的布局草图
第19篇：frontpage网页制作教案
Frontpage网页制作导学案
青州一中
刘志韩
文件——新建——网页 【学习目标】
1、包括网页制作基础知识
2、站点的规划和创建
3、网页文本和图片的处理、表格和框架的应用 【学习重难点】
1、建立一个主题网站
2、建设一个网站的步骤
3、网页的美化与特效的制作 【课前预习】
思考一下多媒体信息集成的方式有哪些？ 
【自主学习】
1、在www中，________是信息的主要组织和表现形式。
2、用________语言编写的网页实际上是一种文本文件，以.HTML或者.HTM为扩展名，可以使用任何文本处理软件（如记事本、word等）创作或修改。
3、制作网页常用的软件有_________________和_________________。
4、网页文件的扩展名有哪些？
5、网站开发的基本过程：
网站的规划——(
)——(
)——网站的发布与管理——网站的评价 【合作探究与指导】
三、网站的制作
1、创建站点
文件——新建——站点（选择或创建存储站点的文件夹）
2、网页的创建与编辑
3、插入对象 水平线 图片 字幕 悬停按钮
4、创建超级链接
在对象上右击选择超级链接——选择链接的目标。
5、使用表格
表格——插入（在制作网页的过程中用表格来布局网页）
6、在站点中查看网页的编辑及网页之间的链接情况。
分步骤操作练习题：
1、新建一个站点，只有一个空白网页的站点。
2、在首页上插入“我最喜爱的明星”，然后进行修饰。
3、再新建一个空白网页。重新命名为“周杰伦”。
4、插入图片“周杰伦”，文本“周杰伦”，排版设置后保存网页。
5、再建立一张空白的网页，重新命名为“刘亦菲”。
6、插入图片“刘亦菲”，文本“刘亦菲”，排版设置后保存网页。
7、分别在首页和“周杰伦”“刘亦菲”网页建立超级链接。操作练习： 【拓展任务】
以环保为主题，利用文件夹“环保”中的素材，制作一个5页的网站。 
【当堂检测】
1.在网页制作中，我们经常用下列（
）办法进行页面布局。 
A.文字
B.表格
C.表单
D.图片 2.使用浏览器访问网站时，第一个被访问的网页称为（
）。 
A.网页
B.网站
C.HTML语言
D.主页 3.网页中可使我们进行选择性浏览的称为（
）。 
A.文字
B.图片
C.声音
D.超链接
4.在FrontPage2000中，要建立同一个网页内的链接点，让你点选某一链接后，迅速跳到同一网页内的另一个特定位置，应采用（
）链接。 
A.单元格
B.表单
C.书签
D.表格 5.FrontPage 2000中，下述关于图片与链接的关系表述正确的是（
） 。
A.图片不能建立链接
B.一张图片只能建立一个链接 
C.图片要建立链接需经过处理
D.通过设置热区，一张图片可建立多个链接 6.在FrontPage 2000\"网页\"视图模式下，单击\"普通\"标签后，在出现的\"普通\"窗口中，可直接进行（
）。 
A.网页编排
B.观察网页在浏览器中的效果
C.编辑HTML代码
D.下载图片 7.网页制作的超文本标记语言称为（
）。 
A.VB语言
B.HTML语言
C.BASIC语言
D.ASCII 8.在Frontpage2000网页视图方式下，单击（
）标签可直接编辑HTML代码？
A.普通
B.HTML
C.预览
D.编辑 9.在FrontPage 2000中，我们想要文字左右交替移动的效果，是下列（
）效果。
A.字体
B.DHTML效果
C.字幕
D.悬停按钮 10.在FrontPage 2000表格单元格中，（
）项目不能输入。 
A.表格
B.图形
C.背景
D.声音 
作业：以我们寒假生活为主题，从互联网上搜索的素材制作一个网站。
【阅读材料】
网站设计
建立一个网站就像盖一幢大楼一样，它是一个系统工程，有自己特定的工作流程，你只有遵循这个步骤，按部就班地一步步来，才能设计出一个满意的网站。
一、确定网站主题 
网站主题就是你建立的网站所要包含的主要内容，一个网站必须要有一个明确的主题。特别是对于个人网站，必须要找准一个自己最感兴趣内容，做深、做透，办出自己的特色，这样才能给用户留下深刻的印象。
二、搜集材料 
明确了网站的主题以后，你就要围绕主题开始搜集材料了。常言道：“巧妇难为无米之炊”。要想让自己的网站有血有肉，能够吸引住用户，你就要尽量搜集材料，搜集得材料越多，以后制作网站就越容易。材料既可以从图书、报纸、光盘、多媒体上得来，也可以从互联网上搜集，然后把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。
三、规划网站 
网站设计得成功与否，很大程度上决定于设计者的规划水平，规划网站就像设计师设计大楼一样，图纸设计好了，才能建成一座漂亮的楼房。网站规划包含的内容很多，如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等，你只有在制作网页之前把这些方面都考虑到了，才能在制作时驾轻就熟，胸有成竹。
四、选择合适的制作工具 
网页制作涉及的工具比较多，首先就是网页制作工具了，目前大多数网民选用的都是所见即所得的编辑工具，这其中的优秀者当然是Dreamweaver和Frontpage了，如果是初学者，Frontpage2000是首选。除此之外，还有图片编辑工具，如Photoshop、Photoimpact等；动画制作工具，如Flash、Cool 3d、Gif Animator等；还有网页特效工具，如有声有色等，
五、制作网页 
材料有了，工具也选好了，下面就需要按照规划一步步地把自己的想法变成现实了，这是一个复杂而细致的过程，一定要按照先大后小、先简单后复杂来进行制作。
六、上传测试 
网页制作完毕，最后要发布到Web服务器上，才能够让全世界的朋友观看，利用这些FTP工具，你可以很方便地把网站发布到自己申请的主页存放服务器上。网站上传以后，你要在浏览器中打开自己的网站，逐页逐个链接的进行测试，发现问题，及时修改，然后再上传测试。
七、推广宣传 
网页做好之后，还要不断地进行宣传，这样才能让更多的朋友认识它，提高网站的访问率和知名度。推广的方法有很多，例如到搜索引擎上注册、与别的网站交换链接、加入广告链等。
八、维护更新 
第20篇：网页制作教案10
4.2 课堂任务1  首页版面的设计与制作
课程名称：网站的设计与制作 课时数：4 教学目标：
知识与技能：了解图层及图层样式相关概念。
过程与方法：掌握用PhotoShop进行简单的图片处理和文字效果制作的方法
理解首页的总体设计要求、组成要素和制作方法； 情感与价值观：培养学生主动思考问题的习惯和自主学习的能力。 教学重点：
用PhotoShop进行简单的图片处理和文字效果制作。 教学难点：
首页总体设计要求、组成要素和制作方法的理解。 教法：
任务驱动法 学法：
阅读，记录要点，动手操作。 课前准备：
第四章第二节素材和实例。视频教程：首页版面的设计与制作.wmv。 教学过程设计：
（一） 导入设计：
色彩协调、清晰漂亮的高品质网站常常能使浏览者对整个网站留下深刻的印象。Adobe Photoshop软件能非常方便的帮助我们设计制作出漂亮的网页界面。今天我们一起来学习网站的设计。
（二）新课讲解设计：
（1）请学生带着以下问题阅读P140～142的知识预读，问题如下： A.什么是图层？图层的上下顺序跟显示结果有关系么？ B.什么是图层样式？打开图层样式的方法有哪些？ （2）请学生一一回答以上问题。 （3）教师总结评价并补充相关要点。 （4）了解任务目标。
（5）教师演示作品成品，请学生根据已有的知识猜测该图的制作过程。 （6）教师演示制作该图的关键步骤，（详见教材第16页至第21页的内容）。
操作要点及注意事项如下：
A.一般作为首页的图片大小以屏幕刚好能完全显示，并不需要滚动条为宜。 B.首页在色彩的使用上要尽量与子页一致。 （6）学生完成相同操作。可参考视频文件用首页版面的设计与制作.wmv。教师巡视指导。 （7）学生上传作业。教师随机抽查点评。 （8）教师总结评价。
（9）请学生完成任务一对照练习。
（三）小结和作业： 小结：
（1） 图层的概念
（2） 首页的设计要求
（3） 对图像做了哪几步操作 作业：
填写《任务评价表》并上交
4.2 课堂任务2  内容页面版面的设计与制作
课程名称：网站的设计与制作 课时数：6 教学目标：
知识与技能：了解图层及图层样式相关概念。。
过程与方法：掌握用PhotoShop进行简单的图片处理和文字效果制作的方法
理解内容页面的总体设计要求和方法； 情感与价值观：培养学生主动思考问题的习惯和自主学习的能力。 教学重点：
PhotoShop相关技术的应用。 教学难点：
内容页面的总体设计要求和方法。 教法：
任务驱动法、演示法 学法：
阅读，记录要点，动手操作 课前准备：
第四章第二节素材和实例。视频教程：内容页面版面的设计与制作1.WMV，内容页面版面的设计与制作2.WMV。 教学过程设计：
（一） 导入设计：
根据已有的首页，我们可以分析出这个网站的色彩风格，这样我们在做内容页面的时候就可以对应起来。
（二）新课讲解设计：
（1）教师展示作品成品，请学生分析首页与内容页面在色彩的使用上有什么特点。文字的处理有什么特点？
（2）请学生根据已有的知识猜测该图的制作步骤。 （3）教师补充相关要点。
（4）教师演示制作该图的操作，（详见教材第149～159页的内容）。 操作要点及注意事项如下：
在已有的代码上插入对称标记的时候，要注意标记的嵌套，不要使标记交叉而导致文件出错。 （5）请一位学生上台操作，其他学生完成相同操作。可参考视频文件内容页面版面的设计与制作1.WMV，内容页面版面的设计与制作2.WMV。 （6）教师总结评价。
（7）学生上传作品，教师抽取部分作品展示。 （8）由学生完成任务二对照练习。并上传作业。
（三）小结和作业： 小结：
（1） 网站的风格 （2） 颜色的选取
（3） 内容页面的设计技巧 作业：
（1） 填写《任务评价表》并上交 （2） 完成本章习题。

    
    

        
《网页 模板 教案.doc》
        
将本文的Word文档下载到电脑，方便编辑。
        

            推荐度：





        
    
    

        
        

            
点击下载文档
        
    


相关专题