admin 管理员组

文章数量: 1086019


2023年12月17日发(作者：电脑如何使用css)

《网页制作》教案

课题

教学目标

教学

重、难点

教、学具

1、 网页制作平台

2、 图像处理工具

3、 动画制作工具

4、 网页上传下载

常用的网页设计工具

课时

3、4

授课日期

1、了解什么是HTML语言以及HTML语言的格式

2、学会使用记事本编写源代码的方式来制作一些简单的网页

3、学会用编写源代码方式制作跑马灯效果

重点：网页制作的常用工具有哪些

难点：掌握制作网页工具的用途

多媒体计算机、高清电视及VGA信号线

预习要求

主备人

副备人

主备栏

班 级

副备栏

复习提问：

1．什么是WWW服务、超链接？

2．什么是网页、网站？

学生思考回答

引入：

早期的网页制作，网页设计师要复杂的网络编程语言，通过编写网页

引发学习兴趣

明确学习内容

的源代码来制作网页，如果要插入图片就得输入一段代码，指定图片的路径，再测试网页才能看到图片。

新授：

一、HTML语言简介

1、什么是HTML语言

HTML是Hypertext Markup Language 的缩写，意思为“超文本标记语言”。HTML就是用于编写网页的统一的语言规范。只有采用HTML制作的网页，浏览器才能正确地阅读和运行。

主备栏

2、HTML语言的编写方法

副备栏

第一种方法：使用记事本之类的工具，输入HTML标记和网页的内容进了解工作原理

行直接编写，然后保存为以html或htm为扩展名的网页文件；

第二种方法：使用可视化的网页制作工具根据用户的可视化操作自动生成

HTML代码，这样可以使人不需要了解HTML语言也能做出很好的网页。

（3）演示用记事本编写网页：跟我学“我的第一个网页”。

（4）学生上机操作老师演示的实例（5分钟）

（5）讲解HTML源代码的一些基本知识

通过刚才的操作，很多同学都制作出了自己的第一个网页，但有些同

学还没有，为什么呢？主要是HTML代码输错了，代码出错了，网页就显示

不出来了，接下来，我们来学习一些关于源代码的基础知识。

A、标记的写法

HTML语言中所有的标记都要用<>包起来，如

，小括号中的标记字

母不用区别大小写，<>与标记中间不能用空格隔开。

Html语言中的标记可以分为两类：对称标记和单独标记。

对称标记中的HTML标记是对称的，表示方式是：<标记>内容。

其中“<标记>”称为起始标记，表示某种格式功能的开始，而后面的“

标记>”称为结束标记，表示这种格式功能的结束，如上例中的

这是我

用记事本编写的第一个网页

。

对称必须首尾呼应、有头有尾；对称标记允许相互嵌套，但不能交叉

嵌套，单独标记中的HTML标记是不成对的，表示方法是：<标记>。标记中

只有起始标记没有结束标记，如
标记的作用是换行，功能相当于WORD

文档中的回车符。

C、文件标记

(A) 从上例可以看出所有HTML文件都必须用特定的标记“”起

始，表示这是个网页文件，网页内容一直持续到标记结束。

(B) 网页文件内容分为两大部分：和对称标记我们称为

头部分，主要包含着和网页文件有关的一些头信息，除了标题标记

外，其他内容不会显示在浏览器中；和对

称标记我们称为正文部分，里面的内容会显示在IE浏览器中。HTML语言

的其他标记都必须写在这两大标记中。

(C) 网页头部分中的对称标记是标题标记，该标记的作用是在 </p><p style="text-indent: 2em;";>浏览器的标题栏中显示网页的标题。 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>(D) 网页正文部分中的<P>对称标记是段落标记，该标记的作用是用来看书、思考、找划分段落的，在该标记中我们可以输入一段文字。 </p><p style="text-indent: 2em;";>出相关答案 </p><p style="text-indent: 2em;";>D、标记参数 </p><p style="text-indent: 2em;";>主备栏 </p><p style="text-indent: 2em;";>(A) 标记中可以加上参数设定，但参数必须加在起始的标记内，如：<font size="+7">欢迎光临！</font> 。 </p><p style="text-indent: 2em;";>(B) 如果一个标记中有多个参数要设定，那么用空格隔开参数，如：<font size="+7" color="red">欢迎光临！</font>。 </p><p style="text-indent: 2em;";>二、跑马灯效果 </p><p style="text-indent: 2em;";>（1）基本语法 </p><p style="text-indent: 2em;";><marquee>文字或图片</marquee> </p><p style="text-indent: 2em;";>该语法只适用于在IE浏览器中显示，只能放在<Body>标记中使用，作用是实现标记中的内容在页面移动的效果。 </p><p style="text-indent: 2em;";>（2）演示操作实例1 </p><p style="text-indent: 2em;";><HTML> </p><p style="text-indent: 2em;";> <HEAD> </p><p style="text-indent: 2em;";> <title>欢迎大家光临

这是我用记事本编写的第二个网页

讲解参数属性表

Bgcolor

direction=left、right、up、down

背景颜色，可输入颜色的英文名称或者16进制代码等；

滚动方向（左、右、上、下）

scroll表示由一端滚动到另一端；

Behavior=scroll、slide表示由一端快速滑动到另一端，不slide、alternate 再重复；

alternate表示在两端之间来回滚动；

height＝数值

Width=数值

滚动区域的高度；

滚动区域的宽度；

副备栏

学习具体操作

观察操作过程

scrollamount=数值 决定滚动的速度，数值越大滚动越快；

Scrolldelay=数值 延迟时间，数值越大跳跃越明显；

loop＝数值

三、常用的网页设计工具

循环次数，不设置该值即表示无限循环。

（3）演示讲解实例2、实例3、实例4，说明参数的使用方法。

主备栏

1、网页制作平台

三、常用的网页设计工具

1、网页制作平台

2、图像处理工具

3、动画制作工具

4、网页上传下载

作业：略

2002年9月，美国Macromdeia公司开发的Dreamweaver软件推出了MX系列的简体中文版，软件从界面到各项功能都有很多改进。

2、图像处理工具

Photoshop软件一址是图像处理软件的龙头老大，计算机图形设计师创作最有力的工具。

3、动画制作工具

Flash是目前网络上最为浒的失量支画设计制作软件，也是由美国Macromdeia公司所开发的。

4、网页上传下载

CuteFTP是一种基于FTP的数据交换软件，拥有很多功能，如断点续传、自动登录等，是上传、维护、更新网站必不可少的工具软件。

副备栏

总结：

1、什么是HTML语言以及HTML语言的格式；

2、使用记事本编写源代码的方式来制作一些简单的网页；

3、用编写源代码方式制作跑马灯效果。

作业：

P11：填空题：6、7、9、11、13

操作题：2

板书设计： 副板书设计：

一、HTML语言简介

1、定义：

2、用法：

二、跑马灯效果

1、语法：

2、实例：

教后记


本文标签： 标记 网页 制作

版权声明：本文标题：常用的网页设计工具 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1702749323a429254.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。