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