网页设计制作第2节.ppt

第2章 超文本标记语言HTML ;HTML是HyperText Markup Language（超文本标记语言）的缩写，它是一种用于网页制作的排版语言，是构成Web页面的最基本元素。;;;;;;;;;;;;;;;;;;;;;;;;;;;;例2-4 设置字型;;强制换行标记BR 强制换行的格式为： 文字BR;例2-5 强制换行标记的使用;2. 强制换段标记 ? 段落标记P放在一段文字的末尾，就定义了一个新段落的 开始。P标记不但能使后面的文字换到下一行，还可以是 两段之间留一空行。由于一段的结束意味着新一段的开始， 所以使用P也可省略结束标记。 强制换段标记的格式为： 文字P 强制换段标记可以看作两个强制换行标记BRBR;设置段落标记 设置段落标记的格式为： P align=对齐方式文字/P 其中属性align用来设置段落的对齐方式，可以为left、center 或right，分别表示段落左对齐、段落居中、段落右对齐。默 认为left。;例2-6 段落标记的使用。;4. 水平线 ? 水平线标记的格式为： HR align=”对齐方式” size=”横线粗细” width=”横线长度” color=”横线颜色” noshade。;Align属性： 设定线条放置的位置，可选择left、right或 center。 Size属性： 设定线条厚度，以像素作单位，默认为2。 Width属性： 设定线条长度，可以是绝对值或相对值， 默认值为100%。 Color属性： 设定线条颜色，默认为黑色。 Noshade属性：设定线条为平面显示（没有三维效果），若 缺省，则有阴影或立体效果。;例2-7 水平线标记的使用;;;;例2-8 无序列表标记的使用;;;例2-9 有序列表标记的使用。;;例2-10 无序列表中套无序列表。;;2.4.1 网页中的图片 ? Web中图片的几种常用格式为GIF、JPEG和PNG，此外还 可使用矢量格式。其中最常用的是GIF和JPEG格式，几乎 所有浏览器都支持这两种格式。;2.4.2 图片标记 ? 图片标记IMG的格式为： IMG src=”图片文件名” alt=”简单说明” width=”图片的宽度” height=”图片的高度” hspace=”水平方向空白” vspace=”垂直 方向空白” border=”边框宽度” align=”对齐方式”;2.4.3 设定图片的布局 ? 布局是图像放在网页中的位置以及图像与文本的排放关系。 实现这种功能，除了利用IMG标记的align属性外，还有 CENTER、P等标记。 1. 设置图像的对齐方式 2.设置图像与文本间的关系 ?;1. 设置图像的对齐方式 ? 图像可放在页面的左边（left）、中间（center）和右边 （right）。 使用P标记的align属性可实现图像的居左、居中和居右。 格式为： P align=left 或center或right IMG src=”图像文件名”/P 另外，实现图像居中还可以使用CENTER标记， 格式为：centerIMG src=”图像文件名” /center;例 2-12 设置图像的对齐方式;2. 设置图像与文本间的关系 ? （1）设置图像与文本之间的空白 （2）文本与图像在垂直方向上的对齐 （3）文本环绕图像;2. 设置图像与文本间的关系 ? （1）设置图像与文本之间的空白 IMG标记的hspace和vspace属性可实现该功能。;2. 设置图像与文本间的关系 ? （2）文本与图像在垂直方向上的对齐 文本 IMG src=“图片文件名”align=“对齐方式” 文本 其中align的值可取： top文本与图像的顶部对齐； middle文本与图像的中央对齐； bottom文本与图像的底部对齐。 ;2. 设置图像与文本间的关系 ?;例 2-13 设置图像与文本间的关系;;;例 2-14 一个简单的表格;;;;;;例 2-15 表格的属性设置;;例 2-16 表格单元格的合并;例 2-17 表格单元格的随意合并;;;例2-18 按行组制作表格。;;例2-19 设置列组。;;;例2-20 表格边框和分隔线的显示控制;;2.6.1 超链接标记 A href =”地址” name=”书签名” target=”打开窗口方式”热点/A 属性href为超文本引用，它的值为一个URL地址，是目标资源的有效地址。