利用HTML编写简单网页
Square
2. 无序列表(UL元素)
知识讲解
课堂实践 教学总结 布置习题
功能:将分段显示的文本作无序的列表显示 语法: <UL> <li> 列表项一
<li> 列表项二
<li> 列表项三 … </UL> 属性:type(值分别为circle、disc、square)
简单DL列表示例:
学习情境3
知识讲解
课堂实践 教学总结 布置习题
概述
学习情境3
利用HTML编写简单网页
专业能力目标
课程引导 学习目标
学习目标 1. 掌握Dreamweaver CS3的HTML源 代码编辑功能。掌握快速标签编 辑器、标签选择器和标签编辑器 的使用方法。
专业知识目标
知识讲解
课堂实践 教学总结 布置习题
专业素质目标
课堂实践 教学总结 布置习题
的起始标记和结束标记。开始标记为<>结束标记为</>。 属性:与标记相关的若干性质,只出现在起始标记中, 且具有固定的描述结构即 属性名=“属性值”。 如:<body bgcolor=“#336699”>
思考一下:如果要在浏览器中显示出“<body>标记一般包含正 利用HTML编写简单网页 学习情境3 在HTML中,定义转义字符串的原因有两个:第一个原因是像“<” 文内容”这几个字,代码就如何书写?
十六進制值
GREEN #009900 bgcolor标记文档的背景颜色。
知识讲解
紫色
藍色
BLUE 语法:
#0000FF
<body bgcolor=“value”> 其中value可以使用RGB十六 PURPLE #800080 进制码,也可以使用颜色所对应的英文单词或者三个十进 AQUA #00FFFF
知识讲解 如:<p>版权所有
课堂实践 教学总结 布置习题
®
" £ ¥ < >  
学习情境3
利用HTML编写简单网页
相关知识点 ⑤ HTML 注释
课程引导 学习目标
知识讲解
课堂实践 教学总结 布置习题
为了以后更容易地阅读HTML代码而生。
用法:
<! -- 注释的内容--> 如:<!-- 下面的代码显示焦点图片 -->
<dd>美国电视台</dd>
功能:用以罗列定义。每个定义有两项内容,一是定义的内
容,二是定义的描述。
<dd>英国电视台</dd> 语法: <DL>
<dt>标题一 <dd>日本电视台</dd>
<dd>内容一
<dd>内容二 … <dt>标题二 <dd>内容一 <dd>内容二 … </DL>
学习情境3
利用HTML编写简单网页
学习情境3
利用HTML编写简单网页
相关知识点 ⑦ Dreamweaver CS3中的HTML源码编辑窗口
课程引导 学习目标
知识讲解
课堂实践 教学总结 布置习题
步骤: 1). 启动Dreamweaver CS3
2). 从设计视图切换至代码视图
3). 输入相应的HTML代码 4). 保存文件并预览效果
学习情境3
利用HTML编写简单网页
案例01 - 利用HTML代码编写网页 案例02 - 在网页中输入并设置文本 教 学 案 例 案例03 - 更改网页中的背景
课程引导 学习目标
知识讲解
课堂实践 教学总结
案例04 - 处理网页中的图像
案例05 - 创建简单表格 综合案例实训 - 制作“九龙湾” 图文混排网页
2. 掌握常用的HTML标记的含义及其 应用。
3. 学会手工修改HTML代码。
学习情境3
利用HTML编写简单网页
课程引导 学习目标
知识讲解
课堂实践 教学总结 布置习题
专 业 能 力 目 标
1. 手工编写、修改HTML代码的能力
学习情境3
利用HTML编写简单网页
课程引导 学习目标
知识讲解
课堂实践 教学总结 布置习题
布置习题
学习情境3
利用HTML编写简单网页
课程引导
案例01 - 利用HTML代码编写网页
学习目标
知识讲解
案例操作过程(P31-32)
课堂实践 教学总结
相关知识点(P32-33)
布置习题
学习情境3
利用HTML编写简单网页
相关知识点 ① HTML 简介
课程引导 学习目标
知识讲解
课堂实践 教学总结 布置习题
课程引导 学习目标
和“>”这类符号已经用来表示HTML标签,因此就不能直接当作文本 相关知识点 中的符号来使用。为了在HTML文档中使用这些符号,就需要定义它 例:<body>标记一般包含正文内容
的转义字符串。当解释程序遇到这类字符串时就把它解释为真实的 ④ 特殊字符 字符。在输入转义字符串时,要严格遵守字母大小写的规则。第二 个原因是,有些字符在ASCII字符集中没有定义,因此需要使用转义 常用转义字符 对应字符串 字符串来表示。 © © © 四川警院</p> ® “ £ ¥ < > 空格
块级元素的前后都会有插入的断行,所以如果不用CSS则
没法让两个块级元素并编写简单网页
相关知识点 ② 标题元素和段落元素 标题标签 <h1>至<h6>
课程引导 学习目标
知识讲解
课堂实践
段落标签 <p>
教学总结 布置习题
<br>
网页设计与制作
——学习情境3:利用HTML编写简单网页
主 讲 :小 胡
学习情境3
利用HTML编写简单网页
课程引导 学习目标
网页的组成元素以及属性设置最终都形成 HTML代码,有必要对HTML语言的语法结构、 HTML标记有一定的了解,虽然很少直接输入 HTML代码制作网页,但经常要修改HTML代码 以满足网页设计的需要,当HTML代码出现错误 时,也要切换到代码视图,查找并改正错误。
学习情境3
利用HTML编写简单网页
相关知识点 ③ 背景音乐
课程引导 学习目标
知识讲解
课堂实践 教学总结 布置习题
bgsound 标记文档的背景音乐 语法: <body src=“声音文件地址url"> 例: <body bgsound=“images/sound1.mid“ loop=“-1”> Loop属性设置重复次数,-1为无限重复
<dl>
<dt>国内电视台</dt>
利用HTML编写简单网页
课程引导 学习目标
<dd>北京电视台</dd> 相关知识点 <dd>上海电视台</dd> <dd>江西电视台</dd> ④ 列表元素-3 <dd>浙江电视台</dd>
3. 定义列表
<dt>国际电视台</dt>
知识讲解
课堂实践 </dl> 教学总结 布置习题
学习情境3
利用HTML编写简单网页
相关知识点 ⑥ 用记事本编写HTML网页 步骤:
课程引导 学习目标
知识讲解
课堂实践 教学总结 布置习题
1). 选择“开始>所有程序>附件>记事本”命令,打开 记事本
2). 在创建的记事本文件中输入HTML代码
3). 选择“文件>保存”或“文件>另存为”命令,保 存文件为.html文件 4). 用浏览器打开.html文件,查看显示效果
课程引导 学习目标
② HTML文件结构
一个标准的HTML文件的基本结构如下:
知识讲解
课堂实践 教学总结 布置习题
<HTML> <HEAD> …… (一般为标题等)
</HEAD>
<BODY> …… (一般为正文) </BODY> </HTML>
标记和属性的一些特性:
学习情境3
利用HTML编写简单网页 HTML标记和属性通常不区分大小写
学习情境3
利用HTML编写简单网页
相关知识点 ③ 字符格式元素
课程引导 学习目标
知识讲解
课堂实践 教学总结 布置习题
用以对网页中文本的字体、大小、颜色等进行定义的 元素,有了CSS后实际上用处已不是很大。主要元素有以 下几种: <font> <b>、<i>、<u>
学习情境3
Start
用以指明列表序号的起始值,如果没有这个属性,则默认从1开始。 例:<OL start=3> 相关知识点
相关知识点 ⑤ 插入水平线
课程引导 学习目标
知识讲解
课堂实践 教学总结 布置习题
<hr>可用于在网页中插入水平线 语法: <hr> 属性: Color用于设置水平线颜色,width用于设置水平线长 度,align用于设置水平线位置
学习情境3
利用HTML编写简单网页
课程引导
案例03 – 更改网页中的背景
例:<OL type=1>