文字和图片插入.ppt

网页设计制作培训 第二讲,学生网络信息中心,主讲：黄群好,文字和图片的插入,2,回忆上一节：,华南农业大学欢迎来到华南农业大学！,学生网络信息中心,3,学生网络信息中心,HTML文件结构,.元素：是HTML语言的基本部分。元素总是成对出现，每一对元素一般都有一个开始的标记（如），也有一个结束的标记（如）。元素的标记要用一对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠。,4,HTML元素属性,学生网络信息中心,HTML元素可以有自己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。元素属性出现在元素的内，并且和元素名之间有一个空格分隔；属性值用“”引起来。,5,学生网络信息中心,一、文字设置,1.文字颜色 指定颜色.如：#=rrggbb,rr：表红色（red）色码 gg：表绿色（green）色码bb：表蓝色（blue）色码,6,学生网络信息中心,HTML对颜色的控制,HTML对颜色的控制也有自己的语法。HTML使用16进制的RGB颜色值对颜色进行控制。16 进制的数码有:0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.,7,学生网络信息中心,常见颜色的代码,8,学生网络信息中心,2.文字字型,.,一、文字设置,9,学生网络信息中心,3.文字大小.#=1,2,3,4,5,6,7；数字越大字体也越大。,一、文字设置,10,学生网络信息中心,4.文字标题.#=1,2,3,4,5,6,一、文字设置,11,学生网络信息中心,5、加粗6、斜体7、底线（尚有些浏览器不提供）8、删除线 strike./strike,一、文字设置,12,学生网络信息中心,9、下标字 sub./sub（下标的英文subscript）10、上标字 sup./sup（上标的英文superscript）11、文字闪烁效果 blink./blink,13,学生网络信息中心,练习：,1、运用html语言，把海贼王主题曲的标题大小设定为6，歌词内容的颜色设定为蓝色Blue=“#0000ff”，字型为Comic Sans MS，大小为5。2、尝试把文本加粗、斜体等效果。,14,学生网络信息中心,二、文字对齐方式,1、分段p 2、换行br 元素不成对出现3、文字的对齐方向p align=“#”#号可为left：左对齐 center：居中 right：右对齐注意：palign=“#”之後的文字都会以所设的对齐方式显示，直到出现另一个palign=“#”改变其对齐方向，或遇到hrh#标签时会自动设回预设的向左对齐。,15,学生网络信息中心,练习,1、在练习一里修改，将文本标题居中，文本内容分两段，并右对齐。,16,学生网络信息中心,三、图片设置,1、插入图片是引用图片的元素标志。元素下的基本元素属性是src属性，src的属性值为所引用的图片的URL地址。src属性是必须的。Src的URL可以是绝对地址，也可以是相对地址。,17,学生网络信息中心,2、图片大小img src=“图片名称”width=宽度点数 height=高度点数width指定图片的宽度，height指定高度。它们的属性值可以是象素，也可以是%,三、图片设置,18,学生网络信息中心,3、图片边框border的属性值为象素数,三、图片设置,19,学生网络信息中心,4、图形上下左右留空img src=“图片名称”vspace=上下留空点数 hspace=左右留空点数 vspace和 hspace的单位是象素。,三、图片设置,20,学生网络信息中心,5.图片附注 img src=“图片名称”alt=“说明文字”,三、图片设置,21,学生网络信息中心,练习,1、插入图片，改变其大小，width=50 height=902、加框border=“4”3、留空vspace=3 hspace=24、附注“海贼王”,22,学生网络信息中心,四、图片的对齐方式,图片可以相对于页面或单元格有一个对齐方式。1、水平对齐方式：,23,学生网络信息中心,2、垂直对齐方式,四、图片的对齐方式,24,学生网络信息中心,练习,1、尝试将图片居中,25,学生网络信息中心,告别昨天懊悔不过是马后炮何不挥手告别昨天来吧 现在正式起航之时拉起那沉重的锚吧尽情庆祝吧 此刻心中号角无比嘹亮多姿多彩的冒险片段在脑中无限飘扬没有准备便尽管离开漫无目的的流浪之旅,学生网络信息中心,Thanks!,