任务03：网站中文本与图像的编辑

1、2017 任务03 网页中文本与图 像的编辑 示例 思考： u盒子里可以放置哪些内容？如何排版？ 最常见的文本、图像等 任务清单 u子任务01：插入文本 u子任务02：插入图像 块级文本标记 u标题标记h1h6,其中字号最大 u段落标记 行内修饰标记 u有关文本字体局部设置、修饰 样式组织标记 u行内标记，通过css样式表可以为行内文本设置特殊效果。 u绝大多数行内修饰标记如加粗、斜体、下划 线等都已被span取代 子任务01：插入文本 3.1.1块级文本标记应用CSS文字样式 u准备好需要设置样式的文本 设置字体 文字大小 文字是否加粗、倾斜与大小写 行高 文字颜色与背景颜色 文字的装饰效果

2、 文字的水平对齐方式 文字布局 段落的垂直对齐方式 文本字符的样式属性 u字体：font-family：字体1，字体2；通常有备用字体 u字号：font-size u风格：font-style:normal|italic|oblique u粗体：font-weight:normal|bold|100900|bolder u变体：font-variant:normal|small-caps(小体大写) u综合定义：font 必须按照规定的顺序（风格、变体、粗 细、字号、字体）使用 文本外观样式属性 u前景字符颜色属性：color u字符间距属性：letter-spacing u单词间距属性：wo

3、rd-spacing u行高属性：line-height包括字体高度部分 u装饰属性：text-decorationunderline（下划线常用）、 overline（上划线）、line-through（删除线）、blink（文字闪烁效 果，IE不支持）、none（默认） u水平对齐属性：text-align u首行缩进属性：text-indent:2em|2倍字号大小 u书写方向属性：direction:ltr(从左向右)|rtl(从右向左) u文本书写方向：direction 3.1.2文本修饰标记 u有关文本字体设置、修饰的标记都是行内标记。 u上下标标记 . . 例如：a2 u文本修

4、饰标记 加粗： XHTML推荐使用： 斜体： XHTML推荐使用： 删除线： XHTML推荐使用： 下划线： 以上大多可以由span代替 3.1.3常用特殊字符 u空格符号：HTML文档中直接输入的空格不起作用，输入 多个空格，要使用多个或者在全角状态下按空格 键 u人民币:是hr的高度 border:none;是没有边框 border-top:2px dotted #185598;是设置横线的样式 dotted 虚线 #185598 颜色 案例：段首字母下沉 uThe u设置样式 .firstLetter font-size:3em; float:left; 因为设置浮动会实现下沉显示 子任

5、务02：设置图像样式 u图片能美化页面，但一般页面不会用太多图片，太多的图 片会严重影响下载时间；另外考虑到图片的下载速度，页 面中一幅图通常不允许太大，对于较大的图片可以在分割 之后再以多个页面元素的方式插入到页面中 u网页常用的图片格式主要有JPEG、GIF和PNG格式的 u插入图片的标记 u语法 u属性有src width height align border等 Src属性与图像路径 u使用标记，基本格式如下： u u标记是行内元素，用于在当前行中插入一副 图像，图像前后的文本默认与图像底部对齐。 usrc 指定图像路径及文件名，文件必须是jpeg、jpg、 gif或png格式。 u指

6、定图像时可以使用的路径由相对路径和根路径两种。 图像路径说明 （1）相对路径 u相对路径就是图像文件相对于当前页面文件的路径。 u同一目录内：只写被链接的文件名。如：cat.jpg u下一级目录：目录名/文件名。如：images/cat.jpg u上一级目录：./文件名。如：./cat.jpg （2）根路径 u根路径是以斜杠/开始，后面跟随从当前文件所在盘符开始的完整路 径形式，例如/E:/html教材（新版）/example/chap03/img/p3- 1.jpg，这种路径方式必须要带有盘符，一旦将整个网站文件夹移动 到其它盘符下，或者复制到其它主机的其它文件夹下，该路径方式都 要失效，导

7、致无法找到图片文件，所以根路径方式在页面中不允许使 用。 可选属性 utitle：鼠标指向该标记内容时提示的信息 ualt：设置替换文本（图像不能显示时，或者没有指定title 时） uwidth：设置图片在页面中的显示宽度（取值为像素） uheight：设置图片在页面中的显示高度（取值为像素） u图片的高度宽度调整说明： 默认情况下，对图片的高度和宽度属性只要设置了其中之一，另一个 会自动按照同比例进行调整。 如果同时设置两个属性，则可以按照非同比变化强制调整图片的大小 3.4.2图像样式 u边框样式设置样式属性：border 取值包括三个部分：粗细（使用像素值即可） 颜色（三原色分量组 合） 边框样式（solid实线、dashed虚线、dotted点线、double双 线） umargin 设置图像在四个方向的外边距 图像样式 uvertical-align 设置同一行中图像与文字的垂直对齐方 式，样式属性常用的取值为： top：图像顶端与第一行文字行内框顶端对齐 middle：图像垂直方向中间线与第一行文字对齐 bottom：图像底线与第一行文字行内框底端对齐 text-top：图像顶端与第一行文字文本顶线对齐 text-bottom：图像底线与第一行文字文本底线对齐 baseline图像底线与第一行文字基线对齐 3.4.2 使用disp