html网站设计文档,《HTML网站设计》第一章.docx

《HTML网站设计》理论课教案

第一章 HTML页面与文本标记

课时：100分钟

授课人：

本章工作任务

制作清华大学校训页面

本章技能目标

了解网页基本知识

掌握HTML文件的结构

理解HTML文件的背景色及文本色

掌握字体标签的使用

本章重点

了解网页基本知识

掌握HTML文件的结构

理解HTML文件的背景色及文本色

掌握字体标签的使用

本章难点

了解网页基本知识

掌握HTML文件的结构

理解HTML文件的背景色及文本色

掌握字体标签的使用

课程地位、技能点、课程目标 部分[15分钟]

课程地位(突出课程企业应用价值)

导入：

同学们，大家好，先做下自我介绍，我叫刘容杏，刘备的刘，容易的容，杏花的杏，是大家的专业课老师，在如此漫长的假期中，大家做了哪做了哪些事情呢？体验生活？磨练厨艺？今天我们要开始学习HTML网站设计课程，问下大家，平时上网都是去看什么，访问百度、steam、优酷等网站？ 那么这些我们看到的页面是怎么制作出来的呢？我们这门课就是学习如何制作这些页面的。

技能目标(完成什么项目，注意展示项目)

王者荣耀

课程目标(必知必会)

页面与基本标记的使用

表格的设计与应用

表单与页面控件

CSS样式定义与应用

框架与多媒体效果

浮动窗口、层的基础

层的应用、滤镜

使用HBuilder设计网页

整章授课思路[100分钟]

本章课堂上会依次讲解四个问题：

了解网页基本知识

掌握HTML文件的结构

理解HTML文件的背景色及文本色

掌握字体标签的使用桌

本章内容和目标[5分钟]

本章内容

了解网页基本知识

掌握HTML文件的结构

理解HTML文件的背景色及文本色

掌握字体标签的使用桌

本章目标

学习完这章我们需要达到一个什么样的目标呢？

完成制作清华大学校训页面

知识点讲授【70分钟】(与本章课堂上会依次讲解N个问题对照)

网页基本知识【10分钟】

问一下大家平常上网访问什么？有没有见过这个：

一般我们称为网址，英文名URL(Uniform Resource Locator)，高大上的名字叫统一资源定位器。

网址作用：

用HTML标签编写的网页是一个个的文件

网站就是由若干个文件组成

超文本标记语言【10分钟】

HTML是Hypertext Markup Language(超文本标记语言)的缩写。

“超文本”就是指页面内可以包含图片、链接、视频等非文字内容。

“标记”就是使用标签的方法将需要的内容包括起来。例如：浏览器负责翻译HTML文档中的标记，并将HTML文档显示为网页。

HTML扩展名是*.html 或 *.htm

浏览器：

基本标签格式分：

所谓标签就是放在“< >” 标签符中表示某个功能的编码命令，也称为HTML标签或 HTML元素

双标签： 内容 标签名>

该语法中“”表示该标签的作用开始，一般称为“开始标签(start tag)”，“标签名>” 表示该标签的作用结束，一般称为“结束标签(end tag)”。和开始标签相比，结束标签只是在前面加了一个关闭符“/”。

单标签：

单标签也称空标签，是指用一个标签符号即可完整地描述某个功能的标签

HTML页面的基本结构【10分钟】

基本结构：起始标记、网页标题、文件主体

这是标题

这里是正文

起始标记 头标记

主体标记

title标签：

1)bgcolor：bgcolor属性标志HTML文档的背景颜色

2)background：background属性标志HTML文档的背景图片

3)text：text属性标志HTML文档的正文文字颜色。

标题标签：标签

.... : n的取值为:1—6,1最大,6最小;1-6级标题。

水平线：分割线

---

用于将不同的信息分开。

属性：size：设置线的粗细，单位像素

width：设置线的宽度，单位像素

align： 设置线的对齐方式，默认居中对齐

color：设置线的颜色，颜色可以用名称或数字

特殊字符

空格： 

>：>

&：&

?：©

段落标签

标签：短文本引用。

标签，长文本引用

标签：分行显示文本

字体控制标记：

格式：文字

size：设置字体大小，取绝对