利用HTML编写简单网页
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<dl>
<dt>国内电视台</dt>
利用HTML编写简单网页
课程引导 学习目标
<dd>北京电视台</dd> 相关知识点 <dd>上海电视台</dd> <dd>江西电视台</dd> ④ 列表元素-3 <dd>浙江电视台</dd>
3. 定义列表
<dt>国际电视台</dt>
知识讲解
课堂实践 </dl> 教学总结 布置习题
知识讲解 如：<p>版权所有
课堂实践 教学总结 布置习题
®
" £ ¥ < >  
学习情境3
利用HTML编写简单网页
相关知识点 ⑤ HTML 注释
课程引导 学习目标
知识讲解
课堂实践 教学总结 布置习题
为了以后更容易地阅读HTML代码而生。
用法：
<! -- 注释的内容--> 如：<!-- 下面的代码显示焦点图片 -->
课堂实践
亮錄色 黃色
淺綠色
教学总结 或者： <body bgcolor=“blue”> 更多的颜色表可访问以下网址： <body bgcolor=blue> http://www.phpx.com/man/dhtmlcn/colors/colors.html <body bgcolor=“0,0,255”> 布置习题
十六進制值
GREEN #009900 bgcolor标记文档的背景颜色。
知识讲解
紫色
藍色
BLUE 语法：
#0000FF
<body bgcolor=“value”> 其中value可以使用RGB十六 PURPLE #800080 进制码，也可以使用颜色所对应的英文单词或者三个十进 AQUA #00FFFF
课堂实践 教学总结 布置习题
的起始标记和结束标记。开始标记为<>结束标记为</>。 属性：与标记相关的若干性质，只出现在起始标记中， 且具有固定的描述结构即 属性名=“属性值”。 如：<body bgcolor=“#336699”>
思考一下：如果要在浏览器中显示出“<body>标记一般包含正 利用HTML编写简单网页 学习情境3 在HTML中，定义转义字符串的原因有两个：第一个原因是像“<” 文内容”这几个字，代码就如何书写？
块级元素的前后都会有插入的断行，所以如果不用CSS则
没法让两个块级元素并列在一起 (更多的块元素和行元素知识请问百度)
学习情境3
利用HTML编写简单网页
相关知识点 ② 标题元素和段落元素 标题标签 <h1>至<h6>
课程引导 学习目标
知识讲解
课堂实践
段落标签 <p>
教学总结 布置习题
<br>
HTML(HyperText Markup Language)即超文本标记语 言，是使用类似于“<tag>…</tag>”的标记来描述头部信息 、段落、列表、超链接等内容的一种结构化语言。 目前我们所使用的是HTML4.01版 HTML → XML
DHTML XHTML可以看作是一种过渡
说明： 说明： 利用HTML编写简单网页 学习情境3 HEAD标记部分一般描述有关该HTML文件的一些基本信 BODY标记是主体，是HTML文件的实际内容 并不强求书写缩进，只为易读性 息，如：网页标题、关键字和网页制作工具等信息 相关知识点
布置习题
学习情境3
利用HTML编写简单网页
课程引导
案例01 - 利用HTML代码编写网页
学习目标
知识讲解
案例操作过程(P31-32)
课堂实践 教学总结
相关知识点(P32-33)
布置习题
学习情境3
利用HTML编写简单网页
相关知识点 ① HTML 简介
课程引导 学习目标
知识讲解
课堂实践 教学总结 布置习题
学习情境3
利用HTML编写简单网页
相关知识点 ⑦ Dreamweaver CS3中的HTML源码编辑窗口
课程引导 学习目标
知识讲解
课堂实践 教学总结 布置习题
步骤： 1). 启动Dreamweaver CS3
2). 从设计视图切换至代码视图
3). 输入相应的HTML代码 4). 保存文件并预览效果
<dd>美国电视台</dd>
功能：用以罗列定义。每个定义有两项内容，一是定义的内
百度文库
容，二是定义的描述。
<dd>英国电视台</dd> 语法： <DL>
<dt>标题一 <dd>日本电视台</dd>
<dd>内容一
<dd>内容二 … <dt>标题二 <dd>内容一 <dd>内容二 … </DL>
学习情境3
利用HTML编写简单网页
制数。 LIME #00FF00 例： <body bgcolor=“#0000FF”> YELLOW #FFFF00
学习情境3
利用HTML编写简单网页
相关知识点 ② 背景图像
课程引导 学习目标
知识讲解
课堂实践 教学总结 布置习题
background 标记文档的背景图片 语法： <body background="图片地址url"> 例： <body background=“images/photo1.jpg"> 背景图片和背景色可同时指定，但在显示时，浏览器 会优先考虑背景图片
学习情境3
利用HTML编写简单网页
案例01 - 利用HTML代码编写网页 案例02 - 在网页中输入并设置文本 教 学 案 例 案例03 - 更改网页中的背景
课程引导 学习目标
知识讲解
课堂实践 教学总结
案例04 - 处理网页中的图像
案例05 - 创建简单表格 综合案例实训 - 制作“九龙湾” 图文混排网页
例：<OL type=1>
课堂实践 教学总结 布置习题
<li> 列表项二
<li> 列表项三 … </OL> 属性：start、type
学习情境3 项目符号为空心圆 ○
Disc 项目符号为实心圆 课程引导
Circle
利用HTML编写简单网页
相关知识点 ●
④ 列表元素-2 项目符号为方块 ■ 学习目标
学习情境3
利用HTML编写简单网页
相关知识点 ⑥ 用记事本编写HTML网页 步骤：
课程引导 学习目标
知识讲解
课堂实践 教学总结 布置习题
1). 选择“开始>所有程序>附件>记事本”命令，打开 记事本
2). 在创建的记事本文件中输入HTML代码
3). 选择“文件>保存”或“文件>另存为”命令，保 存文件为.html文件 4). 用浏览器打开.html文件，查看显示效果
网页设计与制作
——学习情境3：利用HTML编写简单网页
主 讲 ：小 胡
学习情境3
利用HTML编写简单网页
课程引导 学习目标
网页的组成元素以及属性设置最终都形成 HTML代码，有必要对HTML语言的语法结构、 HTML标记有一定的了解，虽然很少直接输入 HTML代码制作网页，但经常要修改HTML代码 以满足网页设计的需要，当HTML代码出现错误 时，也要切换到代码视图，查找并改正错误。
学习情境3
利用HTML编写简单网页
相关知识点 ③ 字符格式元素
课程引导 学习目标
知识讲解
课堂实践 教学总结 布置习题
用以对网页中文本的字体、大小、颜色等进行定义的 元素，有了CSS后实际上用处已不是很大。主要元素有以 下几种： <font> <b>、<i>、<u>
学习情境3
Start
用以指明列表序号的起始值，如果没有这个属性，则默认从1开始。 例：<OL start=3> 相关知识点
利用HTML编写简单网页
课程引导 type
用以指明序号的类型，一共有五种类型，分别是： ④ 列表元素-1 A：大写字母 a: 小写字母 学习目标 1. 有序列表（OL元素） I：大写罗马字母 i: 小写罗马字母 1：阿拉伯数字 知识讲解 功能：对分段的文本进行有序的列表显示 语法： <OL> <li> 列表项一
专 业 知 识 目 标
1. HTML语言的结构、格式 2. 文本、排版格式、图像、链接、表格、表单、 层等标记 3. 块级元素和行级元素的概念和区别
学习情境3
利用HTML编写简单网页
课程引导 学习目标
知识讲解
课堂实践 教学总结 布置习题
专 业 素 质 目 标
1. 自主学习能力 2. 创新能力 3. 感悟能力 4. 效率观念 5. 获取知识能力
Square
2. 无序列表（UL元素）
知识讲解
课堂实践 教学总结 布置习题
功能：将分段显示的文本作无序的列表显示 语法： <UL> <li> 列表项一
<li> 列表项二
<li> 列表项三 … </UL> 属性：type（值分别为circle、disc、square）
简单DL列表示例：
学习情境3
知识讲解
课堂实践 教学总结 布置习题
概述
学习情境3
利用HTML编写简单网页
专业能力目标
课程引导 学习目标
学习目标 1. 掌握Dreamweaver CS3的HTML源 代码编辑功能。掌握快速标签编 辑器、标签选择器和标签编辑器 的使用方法。
专业知识目标
知识讲解
课堂实践 教学总结 布置习题
专业素质目标
课程引导 学习目标
和“>”这类符号已经用来表示HTML标签，因此就不能直接当作文本 相关知识点 中的符号来使用。为了在HTML文档中使用这些符号，就需要定义它 例：<body>标记一般包含正文内容
的转义字符串。当解释程序遇到这类字符串时就把它解释为真实的 ④ 特殊字符 字符。在输入转义字符串时，要严格遵守字母大小写的规则。第二 个原因是，有些字符在ASCII字符集中没有定义，因此需要使用转义 常用转义字符 对应字符串 字符串来表示。 © © © 四川警院</p> ® “ £ ¥ < > 空格
学习情境3
利用HTML编写简单网页
课程引导
案例02 – 在网页中输入并设置文本
学习目标
知识讲解
案例操作过程(P34-35)
课堂实践 教学总结
相关知识点(P35)
布置习题
学习情境3
利用HTML编写简单网页
相关知识点 ① 块级元素和行级元素
课程引导 学习目标
知识讲解
课堂实践 教学总结 布置习题
HTML中的大部分元素都可分为两种类型：块级元素和 行级元素。块级元素会从新的一行出现，行级元素则不会。
学习情境3
利用HTML编写简单网页
相关知识点 ③ 背景音乐
课程引导 学习目标
知识讲解
课堂实践 教学总结 布置习题
bgsound 标记文档的背景音乐 语法： <body src=“声音文件地址url"> 例： <body bgsound=“images/sound1.mid“ loop=“-1”> Loop属性设置重复次数，-1为无限重复
相关知识点 ⑤ 插入水平线
课程引导 学习目标
知识讲解
课堂实践 教学总结 布置习题
<hr>可用于在网页中插入水平线 语法： <hr> 属性： Color用于设置水平线颜色，width用于设置水平线长 度，align用于设置水平线位置
学习情境3
利用HTML编写简单网页
课程引导
案例03 – 更改网页中的背景
属性值通常用双引号引起来，属性值为单个字符时可省 相关知识点 课程引导 各属性之间用空格分开，如一行写不下，可在下行接着写
学习目标
③ 标记与属性 HTML元素允许相互嵌套，但不得交叉嵌套 每个HTML元素只能嵌套合法的子元素
有些HTML元素可以没有结束标记 标记：是元素的代码表现形式。是指由”<”和”>”括 知识讲解 所有的HTML标记均为ASCII码字符，不能是全角、中文字符 起来的具有特定含义的字符串，每一个HTML元素都有对应
学习目标
知识讲解
案例操作过程(P36-38)
课堂实践 教学总结
相关知识点(P38)
布置习题
顏色
名稱
学习情境3 黑色
白色 灰色 课程引导 銀色 紅色 学习目标 綠色
利用HTML编写简单网页 BLACK #000000
WHITE 相关知识点 GRAY SILVER ① 背景颜色 RED #FFFFFF #808080 #C0C0C0 #FF0000
2. 掌握常用的HTML标记的含义及其 应用。
3. 学会手工修改HTML代码。
学习情境3
利用HTML编写简单网页
课程引导 学习目标
知识讲解
课堂实践 教学总结 布置习题
专 业 能 力 目 标
1. 手工编写、修改HTML代码的能力
学习情境3
利用HTML编写简单网页
课程引导 学习目标
知识讲解
课堂实践 教学总结 布置习题
课程引导 学习目标
② HTML文件结构
一个标准的HTML文件的基本结构如下：
知识讲解
课堂实践 教学总结 布置习题
<HTML> <HEAD> …… (一般为标题等)
</HEAD>
<BODY> …… (一般为正文) </BODY> </HTML>
标记和属性的一些特性：
学习情境3
利用HTML编写简单网页 HTML标记和属性通常不区分大小写