网页制作教案_网页制作教案图文

网页制作教案由刀豆文库小编整理，希望给你工作、学习、生活带来方便，猜你可能喜欢“网页制作教案图文”。

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=“” 里面要写成#+你起的名字 最后演示效果