文字和图片插入1 (2).ppt

网页设计制作培训 第二讲  主讲：黄群好 文字和图片的插入 回忆上一节： html head title华南农业大学/title /head bodyfont color=#0000ff欢迎来到华南农业大学！/font /body /html HTML文件结构 html.../html head.../head body.../body 元素：是HTML语言的基本部分。元素总是成对出现，每一对元素一般都有一个开始的标记（如body），也有一个结束的标记（如/body）。元素的标记要用一对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠。 HTML元素属性 HTML元素可以有自己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。元素属性出现在元素的 内，并且和元素名之间有一个空格分隔；属性值用“”引起来。 一、文字设置 1. 文字颜色 指定颜色 font color=# ... /font 如：#=rrggbb rr：表红色（red）色码  gg：表绿色（green）色码  bb：表蓝色（blue）色码 HTML对颜色的控制 HTML对颜色的控制也有自己的语法。HTML使用16进制的RGB颜色值对颜色进行控制。 16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f. 常见颜色的代码 颜色 颜色名和RGB值 黑色 Black=“#000000” 银色 Silver=“#c0c0c0” 红色 Red=“#ff0000” 蓝色 Blue=“#0000ff” 白色 White=“#ffffff” 黄色 Yellow=“ffff00” 绿色 Green=“#00ff00” 海蓝色 Aqua=“#00ffff” 2.文字字型 font face=“字型名称” ... /font 一、文字设置 3.文字大小 font size=# ... /font #=1, 2, 3, 4, 5, 6, 7；数字越大字体也越大。 一、文字设置 4.文字标题 h# ... /h# #=1, 2, 3, 4, 5, 6 一、文字设置 5、加粗 B/B  6、斜体 I/I 7、底线 U/U （尚有些浏览器不提供） 8、删除线 ＜strike＞..........＜/strike＞ 一、文字设置 9、下标字 ＜sub＞..........＜/sub＞（下标的英文subscript） 10、上标字 ＜sup..........＜/sup＞（上标的英文superscript） 11、文字闪烁效果 ＜blink＞..........＜/blink＞ 练习： 1、运用html语言，把《海贼王主题曲》的标题大小设定为6，歌词内容的颜色设定为蓝色Blue=“#0000ff” ，字型为Comic Sans MS，大小为5。 2、尝试把文本加粗、斜体等效果。 二、文字对齐方式 1、分段＜p＞ 2、换行 ＜br＞ br元素不成对出现 3、文字的对齐方向 ＜p align=“#”＞  #号可为 left：左对齐  center：居中  right：右对齐  注意：＜p align=“#”＞之後的文字都会以所设的对齐方式显示， 直到出现另一个＜p align=“#”＞改变其对齐方向，或遇到 ＜hr＞…＜h#＞标签时会自动设回预设的向左对齐。 练习 1、在练习一里修改，将文本标题居中，文本内容分两段，并右对齐。 三、图片设置 1、插入图片 img src=“图片名称” img是引用图片的元素标志。 img元素下的基本元素属性是src属性，src的属性值为所引用的图片的URL地址。 src属性是必须的。Src的URL可以是绝对地址，也可以是相对地址。 2、图片大小 ＜img src=“图片名称” width=宽度点数 height=高度点数＞ width指定图片的宽度，height指定高度。它们的属性值可以是象素，也可以是% 三、图片设置 3、图片边框 img src =“图片名称” border= “2” border的属性值为象素数 三、图片设置 4、图形上下左右留空 ＜img src=“图片名称” vspace=上下留空点数 hspace=左右留空点数＞ vspace和 hspace的单位是象素。 三、图片设置 5.图片附注 ＜img src=“图片名称” alt=“说明文字”＞ 三、图片设置 练习 1、插入图片，改变其大小， width=50 height=90 2、加框bor