网页设计语言HTMLPPT课件

1 HTML是网页制作的一种规范 一种标准 是编写网页的最基本的语言 也是网页设计师的必备基本功之一 本章介绍了用HTML制作网页的各种标记符的设置方法 包括网页数据的编辑与格式化 在网页中使用超链接和插入图片 网页中的表格设计以及表格与文字的混排等 2 教学重点与难点 在网页中使用超链接图片与多媒体的编排表格与文字的混排交互网页的制作 3 1HTML概述 HTML HyperTextMarkupLanguage 超文本标记语言 几乎所有的网页都是以HTML格式书写的 HTML以标识符来标识 排列各对象 标识符本身以 标识 标识符内的内容称为元素 element 也成为属性 元素代表了标识符的意义 元素是与大小写无关的 4 标识符代表了网页中的对象 如代表图像 代表表格 元素代表了网页对象的属性 如width height代表了对象的宽和高 color代表了对象的颜色等 标志符大部分是成对出现的 起始标记符和结束标记符 如和 和等 大小写均可 不过最好为大写 HTML的基本语法格式 5 HTML文件的基本结构文件头文件体 6 用超文本标记语言 HTML 编写的网页文件其实只是很平常 很普通的文本文件 可以用你所熟悉的文字编辑器来编辑它 如Edit Word 写字板 记事本等 但一定要以纯文本方式保存 浏览器只能识别纯文本格式的文件 标记HTML的开始 在文件结束处要有对应的符号 7 创建HTML文档1 用工具软件创建HTML文档用比较完善的工具软件来制作网页 象FronPage2000 Dreamweaver4等2 用编辑工具编写HTML文档EDIT 记事本 写字板 Word等编辑工具可以用来编辑HTML文档 8 2HTML的头部标记和主体标记 1HTML的头部标记标记出现在HTML网页的开头部分 与之间的内容不在浏览器窗口中显示 标记网页标题 出现在浏览器标题栏中 标记用于提供HTML网页的字符编码 关键字 描述 作者 自动刷新等信息 9 例1html的头部标记应用 10 2HTML的主体标记设置背景颜色设置背景图片设置文字颜色与链接颜色设置页边距 11 3HTML的文本标记和链接标记 文本属性的设置face属性表示文本的字体color属性表示文本的颜色size属性表示文本的字号例2标题文本的设置 标题n n 1 6 的字体最大 的字体最小 其属性align left center right 指文字的水平对齐方式 12 文本的修饰加粗斜体下划线上标下标强调删除线小字体大字体注 以上标记符都是成对出现的段落标记 13 四 段落格式1 分段与换行符分段标记符用于将文档划分为段落 标记符为 要将文字强制换行 而不是另起段落 可以用换行标记符BR实现该功能 注意 BR仅单独使用 而非成对出现 2 添加水平线添加水平线的标记符为 与BR类似 HR也不包括结束标记符 14 3 段落对齐 1 ALIGN属性ALIGN属性用于设置段落的对齐方式 其常见取值有4种 RIGHT 右对齐 LEFT 左对齐 CENTER 居中对齐 JUSTIFY 两端对齐 2 DIV标记符 3 CENTER标记符 4 格式的嵌套 15 五 文字格式1 字符格式通过表3 1的标记符设置字符格式2 字体大小 字符颜色和字体样式 1 SIZE属性 控制文字的大小 2 COLOR属性 控制文字的颜色 3 FACE属性 指定字体样式 16 六 列表格式1 有序列表定义有序列表需要使用有序列表标记符 和列表项 Listitem 标记符 语法如下 Listitem1Listitem22 无序列表无序列表标记符 和列表项标记符 17 3 定义列表定义列表的制作需要3个标记符 定义列表标记符 用来指定定义列表的开头与结尾 定义术语 Definitionterm 标记符 用来指定第一层数据 定义描述标记符 用来指定第二层数据 标记符必须有结束标记 但和标记符的结束标记可以省略 18 3 3在网页中建立超链接 一 超链接标记符创建一个超链接需要使用 标记符 A是Anchor的首字母 标记符的最基本属性是HREF 用于指定链接到的文件位置 其他属性见教材 19 二 创建超链接1 指向本地网页的链接 绝对URL2 链接至位于相同文件夹的文件 相对URL方式3 链接至位于不同文件夹的文件4 指向其他网页的链接 如 我要上网易5 页面的特定部分链接6 连接至E mail地址的超链接 20 3 4在网页中插入图片 一 插入图片用标记符在HTML文件中插入图片 标记符常用的属性见教材 二 图片布局可以使用HEIGHT WIDTH BORDER属性指定图片的高度 宽度以及是否具有框线 21 1 图片的高度 宽度 如 图片的边框还可以用标记符的SOLID属性设置边框颜色 格式 3 图片的对齐方式图片的对齐是指图片本身在页面中的对齐和图片与文本的对齐 22 3 5表格设计 一 创建基本表格可以用 标记符创建一个表格 并在它的中间加入标题和需要的数据 表格定义的代码为 具体表格内容 23 1 表格的标题元素定义了表格的说明 如 在这里输入标题行里的内容标题的属性ALIGN决定了标题的对齐方式 TOP是将标题放在表格的顶部 BOTTOM将标题放在表格的下面 24 2 行 表头和数据定义一个表格 需从第一行逐级向下 并且按行中单元格的顺序开始定义 行 表头和数据定义的代码为 表头数据 25 二 表格及文字的对齐与布局1 表格在页面中的对齐利用表格的ALIGN属性 可以将表格显示在页面的左边或右边 如果没有设置这一属性 表格单独显示为页面的一行 在页面的左侧 ALIGN LEFT 将表格按左边对齐 而表格的所有文本显示在表格右侧和页面之间的位置 ALIGN RIGHT 将表格按右边对齐 文本显示在表格的左侧 26 2 表格内数据的对齐ALIGN属性为单元格数据提供水平对齐方式 该属性有LEFT 左对齐 RIGHT 右对齐 CENTER 居中 3个值 VALIGN属性定义单元格数据的垂直对齐方式 该属性有T