第3章--使用网页基本标签.ppt

3 1设置文字效果 设计网页离不开字体的设置 恰当的字体运用能够丰富网页的内容 美化文字的视觉效果 本节从文字的细节修饰着手 使读者轻松把握HTML的各种字体格式的变化 制作出更加精美的网页 3 1 1文字样式标签标签可以用来设置文字的颜色 字体和大小 是网页设计的常用属性 可以通过标签中的face属性设置不同的字体 可以通过size属性来设置文字的字体大小 还可以通过color属性来设置文字的颜色 实战练习 使用标签设置网页文字效果3 1 2文字加粗和标签网页中对于需要强调的内容很多使用了加粗的方法 以使文字更加醒目 可以实现加粗效果的标签是标签和标签 其中标签被称为特别强调标签 目前比标签使用更加频繁 最终文件 光盘 最终文件 第3章 3 1 1 html视频 光盘 视频 第3章 3 1 1 swf 3 1 3文字倾斜和标签标签能够使作用范围内的文字倾斜 是强调标签 它的效果也是使文字倾斜 目前比标签使用更加频繁 3 1 4文字下画线标签标签的使用和粗体以及斜体标签类似 可以使用该标签作用于需要添加下画线的文字 实战练习 为文字添加加粗 倾斜和下画线修饰3 1 5其他文字修饰标签为了满足不同需求 HTML还有其他用来修饰文字的标签 比较常用的有上标格式标签 下标格式标签和删除线标签等 实战练习 为文字添加上标和删除线 最终文件 光盘 最终文件 第3章 3 1 4 html视频 光盘 视频 第3章 3 1 4 swf 最终文件 光盘 最终文件 第3章 3 1 5 html视频 光盘 视频 第3章 3 1 5 swf 网页中文字的排行很大程度上决定了一个网页是否美观 对于网页中的大段文字 通常采用分段 分行和加空格等方式进行规划 本节从段落的细节设置入手 使读者学习后能利用标签轻松自如地规划文字排版 3 2设置段落效果 3 2 1文本分段标签HTML标签中最常用的标签是段落标签 这个标签非常简单 但是却非常重要 因为这是一个用来划分段落的标签 几乎在所有网页中都会用到 3 2 2文本分行标签当文字到达浏览器的边界后将自动换行 但是当调整浏览器的宽度时 文字换行的位置也相应发生变化 格式就会显得混乱 因此在网页中添加换行标签是必要的 实战练习 为网页中的文本进行分段和分行处理 最终文件 光盘 最终文件 第3章 3 2 2 html视频 光盘 视频 第3章 3 2 2 swf 3 2 3标题至标签标题是网页中不可缺少的一个元素 为了凸显标题的重要性 标题的样式比较特殊 HTML技术保存了一套针对标题的样式标签 按照文字尺寸从大到小排列分别是从到 实战练习 设置文本标题3 2 4水平线标签HTML提供了修饰用的水平分割线 在很多场合中可以轻松使用 不需要另外作图 同时可以在HTML中为水平线添加颜色 大小 粗细等属性 实战练习 在网页中插入水平线3 2 5文本对齐设置段落文字在不同的时候需要不同的对齐方式 默认的对齐方式是左对齐 标签的对齐属性为align 实战练习 设置网页文本的对齐 最终文件 光盘 最终文件 第3章 3 2 3 html视频 光盘 视频 第3章 3 2 3 swf 最终文件 光盘 最终文件 第3章 3 2 4 html视频 光盘 视频 第3章 3 2 4 swf 最终文件 光盘 最终文件 第3章 3 2 5 html视频 光盘 视频 第3章 3 2 5 swf 列表形式在网页设计中占用比较大的比例 它的特点是显示信息非常整齐直观 便于用户理解 在本节中将向读者介绍HTML中用于创建项目列表 编号列表和定义列表的相关标签 3 3创建列表 3 3 1使用标签创建项目列表HTML的列表元素是一个由列表标签封闭的结构 包含的列表项由组成 实战练习 制作新闻列表3 3 2使用标签创建编号列表编号列表采用标签 每一个列表项被包含在标签内 所有的列表项被包含在标签内 使用编号列表可以让列表项按照明确的顺序排列 实战练习 制作编号有序列表 最终文件 光盘 最终文件 第3章 3 3 1 html视频 光盘 视频 第3章 3 3 1 swf 最终文件 光盘 最终文件 第3章 3 3 2 html视频 光盘 视频 第3章 3 3 2 swf 3 3 3使用标签创建定义列表列表的另外一种形式是定义列表 定义列表形式特别 用法也特别 定义列表中每个标签都是成对出现的 它在网页布局中的应用也是非常广泛 定义列表由 和3个标签组成 和标签包含在标签内 不同的是标签定义的是标题 而标签定义的是内容 实战练习 制作复杂新闻列表 最终文件 光盘 最终文件 第3章 3 3 3 html视频 光盘 视频 第3章 3 3 3 swf 图像作为网页元素的组成部分 在今天的网页设计中发挥着越来越大的作用 本节将学习如何控制图片在网页中的显示 3 4插入图片 3 4 1图像标签有了图像文件后 就可以使用标签将图像插入到网页中 美化页面 实战练习 在网页中插入图像3 4 2图文混排当图片和文字在一起时 可以通过HTML代码设置图文混排 标签的align属性定义了图像相对于周围元素的水平和垂直对齐方式 实战练习 制作图文介绍页面 最终文件 光盘 最终文件 第3章 3 4 1 html视频 光盘 视频 第3章 3 4 1 swf 最终文件 光盘 最终文件 第3章 3 4 2 html视频 光盘 视频 第3章 3 4 2 swf 超链接是网页中最重要 最根本的元素之一 是从一个网页或文件到另一个网页或文件的链接 包括图像或多媒体文件 还可以指向电子邮件地址或程序 在网页中创建链接 就可以把Internet中众多的网站和网页联系起来 构成一个有机的整体 网站中的每一个网页都是通过超链接的形式关联在一起的 如果页面之间是彼此独立的 那么这样的网站将无法正常运行 3 5创建超链接 3 5 1什么是超链接超链接是指从一个网页指向一个目标的连接关系 这个目标可以是另一个网页 也可以是相同网页上的不同位置 还可以是一个图片 一个电子邮件地址 一个文件 甚至是一个应用程序 而用来超链接的对象 可以是一段文本或者是一个图片 3 5 2超链接标签超链接由源地址和目标地址文件构成 当访问者单击某个超链接时 浏览器会自动从相应的目标地址检索网页并显示在浏览器中 如果链接的对象不是网页而是其他类型的文件 浏览器会自动调用本机上的相关程序打开访问的文件 3 5 3相对链接和绝对链接相对路径最适合网站的内部链接 只要是属于同一网站 即使不在同一个目录中 相对路径也非常的适合 绝对路径为文件提供完整的路径 包括使用的协议 如http ftp rtsp等 一般常见的绝对路径如 ftp 202 113 234 1 等 实战练习 在网页中创建链接3 5 4网页中的特殊超链接超链接还可以进一步扩展网页的功能 比较常用的有发送电子邮件 空链接和下载链接等 创建以上链接只需修改链接的href值 实战练习 在网页中创建特殊超链接 最终文件 光盘 最终文件 第3章 3 5 3 html视频 光盘 视频 第3章 3 5 3 swf 最终文件 光盘 最终文件 第3章 3 5 4 html视频 光盘 视频 第3章 3 5 4 swf 3 5 5超链接标签中的其他属性设置在网页文件中 默认情况下超链接在原来的浏览器窗口中打开 HTML技术提供了