《模块3-利用HTML编写简单网页8》由会员分享，可在线阅读，更多相关《模块3-利用HTML编写简单网页8（38页珍藏版）》请在金锄头文库上搜索。
1、主讲教师：谭荣华网页设计与制作学习情境3：利用HTML编写简单网页布置习题学习目标知识讲解课堂实践教学总结利用HTML编写简单网页学习情境3课程引导网页的组成元素以及属性设置最终都形成 HTML代码，有必要对HTML语言的语法结构、 HTML标记有一定的了解，虽然很少直接输入 HTML代码制作网页，但经常要修改HTML代码 以满足网页设计的需要，当HTML代码出现错误时，也要切换到代码视图，查找并改正错误。概述布置习题知识讲解课堂实践教学总结课程引导利用HTML编写简单网页学习情境3学习目标1. 掌握Dreamweaver CS3的HTML源代码编辑功能。掌握快速标签编辑器、标签选择器和标签编
2、辑器的使用方法。2. 掌握常用的HTML标记的含义及其应用。3. 学会手工修改HTML代码。学习目标专业能力目标专业知识目标专业素质目标布置习题知识讲解课堂实践教学总结课程引导利用HTML编写简单网页学习情境3学习目标1. 手工编写、修改HTML代码的能力专 业 能 力 目 标布置习题知识讲解课堂实践教学总结课程引导利用HTML编写简单网页学习情境3学习目标1. HTML语言的结构、格式2. 文本、排版格式、图像、链接、表格、表单、层等标记3. 块级元素和行级元素的概念和区别专 业 知 识 目 标布置习题知识讲解课堂实践教学总结课程引导利用HTML编写简单网页学习情境3学习目标1. 自主学习能
3、力2. 创新能力3. 感悟能力4. 效率观念5. 获取知识能力专 业 素 质 目 标课堂实践布置习题学习目标教学总结课程引导利用HTML编写简单网页学习情境3知识讲解教 学 案 例案例01 - 利用HTML代码编写网页案例02 - 在网页中输入并设置文本案例03 - 更改网页中的背景综合案例实训 - 制作“九龙湾” 图文混排网页案例04 - 处理网页中的图像案例05 - 创建简单表格课堂实践布置习题学习目标教学总结课程引导利用HTML编写简单网页学习情境3知识讲解 案例操作过程相关知识点案例01 - 利用HTML代码编写网页课堂实践布置习题学习目标教学总结课程引导利用HTML编写简单网页学习情
4、境3知识讲解相关知识点HTML(HyperText Markup Language)即超文本标记语言，是使用类似于“”的标记来描述头部信息、段落、列表、超链接等内容的一种结构化语言。目前我们所使用的是HTML4.01版HTML XMLDHTML XHTML可以看作是一种过渡HTML 简介课堂实践布置习题学习目标教学总结课程引导利用HTML编写简单网页学习情境3知识讲解相关知识点一个标准的HTML文件的基本结构如下： (一般为标题等) (一般为正文)HTML文件结构说明：HEAD标记部分一般描述有关该HTML文件的一些基本信息，如：网页标题、关键字和网页制作工具等信息说明：BODY标记是主体，是
5、HTML文件的实际内容说明：并不强求书写缩进，只为易读性课堂实践布置习题学习目标教学总结课程引导利用HTML编写简单网页学习情境3知识讲解相关知识点标记：是元素的代码表现形式。是指由”括起来的具有特定含义的字符串，每一个HTML元素都有对应的起始标记和结束标记。开始标记为所有程序附件记事本”命令，打开记事本2). 在创建的记事本文件中输入HTML代码3). 选择“文件保存”或“文件另存为”命令，保存文件为.html文件4). 用浏览器打开.html文件，查看显示效果用记事本编写HTML网页课堂实践布置习题学习目标教学总结课程引导利用HTML编写简单网页学习情境3知识讲解相关知识点步骤：1).
6、启动Dreamweaver CS32). 从设计视图切换至代码视图3). 输入相应的HTML代码4). 保存文件并预览效果Dreamweaver CS3中的HTML源码编辑窗口课堂实践布置习题学习目标教学总结课程引导利用HTML编写简单网页学习情境3知识讲解案例02 在网页中输入并设置文本案例操作过程相关知识点课堂实践布置习题学习目标教学总结课程引导利用HTML编写简单网页学习情境3知识讲解相关知识点HTML中的大部分元素都可分为两种类型：块级元素和行级元素。块级元素会从新的一行出现，行级元素则不会。块级元素的前后都会有插入的断行，所以如果不用CSS则没法让两个块级元素并列在一起(更多的块元素
7、和行元素知识请问百度)块级元素和行级元素课堂实践布置习题学习目标教学总结课程引导利用HTML编写简单网页学习情境3知识讲解相关知识点标题标签至段落标签标题元素和段落元素课堂实践布置习题学习目标教学总结课程引导利用HTML编写简单网页学习情境3知识讲解相关知识点用以对网页中文本的字体、大小、颜色等进行定义的元素，有了CSS后实际上用处已不是很大。主要元素有以下几种：、字符格式元素课堂实践布置习题学习目标教学总结课程引导利用HTML编写简单网页学习情境3知识讲解相关知识点1. 有序列表（OL元素）功能：对分段的文本进行有序的列表显示 语法： 列表项一列表项二列表项三属性：start、type列表元
8、素-1Start用以指明列表序号的起始值，如果没有这个属性，则默认从1开始。 例：type用以指明序号的类型，一共有五种类型，分别是： A：大写字母 a: 小写字母I：大写罗马字母 i: 小写罗马字母1：阿拉伯数字例：课堂实践布置习题学习目标教学总结课程引导利用HTML编写简单网页学习情境3知识讲解相关知识点2. 无序列表（UL元素）功能：将分段显示的文本作无序的列表显示 语法： 列表项一列表项二列表项三属性：type（值分别为circle、disc、square）列表元素-2Circle项目符号为空心圆 Disc项目符号为实心圆 Square项目符号为方块 课堂实践布置习题学习目标教学总结课
9、程引导利用HTML编写简单网页学习情境3知识讲解相关知识点3. 定义列表功能：用以罗列定义。每个定义有两项内容，一是定义的内容，二是定义的描述。语法： 标题一内容一内容二 标题二内容一内容二列表元素-3简单DL列表示例：国内电视台北京电视台上海电视台江西电视台浙江电视台国际电视台美国电视台英国电视台日本电视台课堂实践布置习题学习目标教学总结课程引导利用HTML编写简单网页学习情境3知识讲解相关知识点可用于在网页中插入水平线语法：属性： Color用于设置水平线颜色，width用于设置水平线长度，align用于设置水平线位置插入水平线课堂实践布置习题学习目标教学总结课程引导利用HTML编写简单网
10、页学习情境3知识讲解案例03 更改网页中的背景案例操作过程相关知识点课堂实践布置习题学习目标教学总结课程引导利用HTML编写简单网页学习情境3知识讲解相关知识点bgcolor标记文档的背景颜色。语法：其中value可以使用RGB十六进制码，也可以使用颜色所对应的英文单词或者三个十进制数。 例： 或者： 背景颜色顏色名稱十六進制值 黑色 BLACK #000000 白色WHITE#FFFFFF 灰色GRAY#808080 銀色SILVER#C0C0C0 紅色RED#FF0000 綠色GREEN#009900 藍色BLUE#0000FF 紫色PURPLE#800080 淺綠色AQUA#00FFFF
11、 亮錄色LIME#00FF00 黃色YELLOW#FFFF00更多的颜色表可访问以下网址： http:/ 标记文档的背景图片语法：例： 背景图片和背景色可同时指定，但在显示时，浏览器会优先考虑背景图片背景图像课堂实践布置习题学习目标教学总结课程引导利用HTML编写简单网页学习情境3知识讲解相关知识点bgsound 标记文档的背景音乐语法：例： Loop属性设置重复次数，-1为无限重复背景音乐课堂实践布置习题学习目标教学总结课程引导利用HTML编写简单网页学习情境3知识讲解案例04 处理网页中的图像案例操作过程相关知识点课堂实践布置习题学习目标教学总结课程引导利用HTML编写简单网页学习情境3知
12、识讲解相关知识点网页中每一个图片都是以独立文件存在的，HTML代码只是指明了这个图片所在的位置，即URL。浏览器在显示这个图片时，需要根据图片的URL找到这个图片并下载显示出来图像元素img课堂实践布置习题学习目标教学总结课程引导利用HTML编写简单网页学习情境3知识讲解相关知识点IMG元素功能：引用图片URL语法： 空标记，无需要结束标记图像元素img主要属性：Src 指明图片的URLAlt 设定鼠标移动到图片上时显示的文字Width 指明要显示的图片的高度，单位是像素，像素的英文缩写是px。Height 指明要显示的图片的宽度，单位同上vspace 垂直边距Hspace 水平边距Align
13、 指明图片的对齐方式，有：top、middle、bottom、left、right等属性值Border 指明图片的边框宽度，无该属性或值为0时，表示无边框Lowsrc 设定低分辨率图片URLUsemap 指明该图片是否有热区，其值指向一个map元素例：引用一图片，存放在本地计算机的D盘myphoto文件夹中，文件名为photo1.jpg，要求:在网页中鼠标指向图片时显示：“这是一幅示例图片”的字样，边框宽度为5，图片高度300，宽度200，对齐方式为居中对齐。试写出其HTML代码课堂实践布置习题学习目标教学总结课程引导利用HTML编写简单网页学习情境3知识讲解案例05 创建简单表格案例操作过程
14、相关知识点课堂实践布置习题学习目标教学总结课程引导利用HTML编写简单网页学习情境3知识讲解相关知识点表格元素一共有5个,用来定义表格的标题、行和列。tablecaptiontrthtd表格元素1. Table功能：用来标志一个表格。语法： 表格内容属性：align bgcolor cellpadding cellspacing height widthTable的元素很多，上述几个是最常用的。Align ：对齐方式。Bgcolor: 表格的背景色。Border: 表格边框的宽度。Cellpadding: 单元格中的内容到表格边框线的最短距离。Cellspacing: 两个单元格之间的距离。H
15、eight: 表格高度，其值可以是像素或百分比。Width: 表格宽度，其值可以是像素或百分比。这里的百分比是指该高度或宽度占整个屏幕的百分比。2. Caption功能：指明表格的标题或说明语法： 表格标题 属性：alignalign有四个值：top，bottom，left，right。如果没有指定align属性，默认值是表格的上方且居中显示标题。例：学生成绩登记表3. Tr功能：定义表格的一行。一个table元素中至少要有一个Tr元素。Tr元素可以嵌套Td和Th子元素。语法： 或者或者属性：align valign bgcolor等Align: 设置该行中内容的水平对齐方式Valign: 设置该行中内容的垂直对齐方式其值可以是：baseline(基线对齐) bottom(底端对齐) top(顶端对齐) middle(垂直居中)Bgcolor: 设置该行的背景色，此项设置会覆盖表格的背景色，即table中的bgcolor颜色设置。4. Th, Td功能：指明表格某一行中的某一列，即一个单元格。与基本一样，唯一不同的就在于会将单元格内的内容以粗体且默认居中显示，故经常用于表格的表头，也就是第一行或者第一列，而用于普通的单元格且默认为左对齐。语法： 单元格内容单元格内容属性：align valign bgcolor colspan
