文字和图片插入.pptxVIP

网页设计制作培训

第二讲

学生网络信息中心主讲：黄群好文字和图片的插入

回忆上一节：htmlheadtitle华南农业大学/title/headbodyfontcolor=#0000ff欢迎来到华南农业大学！/font/body/html学生网络信息中心

HTML文件结构3学生网络信息中心html.../htmlhead.../headbody.../body元素：是HTML语言的基本部分。元素总是成对出现，每一对元素一般都有一个开始的标记（如body），也有一个结束的标记（如/body）。元素的标记要用一对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠。

HTML元素属性4学生网络信息中心HTML元素可以有自己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。元素属性出现在元素的内，并且和元素名之间有一个空格分隔；属性值用“”引起来。

一、文字设置5学生网络信息中心1.文字颜色指定颜色fontcolor=#.../font如：#=rrggbbrr：表红色（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.

常见颜色的代码7学生网络信息中心

学生网络信息中心2.文字字型fontface=“字型名称”.../font一、文字设置

一、文字设置93.文字大小fontsize=#.../font#=1,2,3,4,5,6,7；数字越大字体也越大。学生网络信息中心

学生网络信息中心4.文字标题h#.../h##=1,2,3,4,5,6一、文字设置

一、文字设置11logo学生网络信息中心5、加粗?B/B?6、斜体?I/I?

7、底线?U/U?（尚有些浏览器不提供）8、删除线＜strike＞..........＜/strike＞

学生网络信息中心129、下标字＜sub＞..........＜/sub＞（下标的英文subscript）10、上标字＜sup..........＜/sup＞（上标的英文superscript）11、文字闪烁效果＜blink＞..........＜/blink＞

学生网络信息中心练习：1、运用html语言，把《海贼王主题曲》的标题大小设定为6，歌词内容的颜色设定为蓝色Blue=“#0000ff”，字型为ComicSansMS，大小为5。2、尝试把文本加粗、斜体等效果。

二、文字对齐方式14学生网络信息中心1、分段＜p＞2、换行?＜br＞br元素不成对出现3、文字的对齐方向?＜palign=“#”＞?#号可为?left：左对齐?center：居中?right：右对齐?注意：＜p?align=“#”＞之後的文字都会以所设的对齐方式显示，?直到出现另一个＜p?align=“#”＞改变其对齐方向，或遇到?＜hr＞…＜h#＞标签时会自动设回预设的向左对齐。

学生网络信息中心练习1、在练习一里修改，将文本标题居中，文本内容分两段，并右对齐。

三、图片设置16学生网络信息中心1、插入图片imgsrc=“图片名称”img是引用图片的元素标志。img元素下的基本元素属性是src属性，src的属性值为所引用的图片的URL地址。src属性是必须的。Src的URL可以是绝对地址，也可以是相对地址。

学生网络信息中心2、图片大小＜imgsrc=“图片名称”width=宽度点数height=高度点数＞width指定图片的宽度，height指定高度。它们的属性值可以是象素，也可以是%三、图片设置

三、图片设置183、图片边框imgsrc=“图片名称”border=“2”border的属性值为象素数学生网络信息中心

三、图片设置19logo学生网络信息中心4、图形上下左右留空＜imgsrc=“图片名称”vspace=上下留空点数hspace=左右留空点数＞vspace和hspace的单位是象素。

三、图片设置20学生网络信息中心5.图片附注＜imgsrc=“图片名称”alt=“说明文字”＞

学生网络信息中心练习1、插入图片，改变其大小，width=50height=902、加框border=“4”3、留空vspace=3hspace=24、附注“海贼王”

四、图片的对齐方式22图片可以相对于页面或单元格有一个对齐方式。1、水平对齐方式：imgsrc=“图片名称”