为网页添加对象.pptx

第三章第三章第三章第三章 为网页添加对象为网页添加对象为网页添加对象为网页添加对象1 1、添加文本、添加文本、添加文本、添加文本2 2、添加图像、添加图像、添加图像、添加图像3 3、创建超链接、创建超链接、创建超链接、创建超链接4 4、插入动态元素、插入动态元素、插入动态元素、插入动态元素第三章 为网页添加对象3.1 添加文本添加文本3.1.1 添加普通文本添加普通文本字体标记字体标记 字体标记字体标记用于设置文本的字用于设置文本的字体名称、颜色和大小。体名称、颜色和大小。常用格式为：常用格式为：第三章第三章 为网页添加对象为网页添加对象属性：属性：1、size=“n”n=17，其中当，其中当n=1时，时，字体最小；当字体最小；当n=7时，字体最大时，字体最大2、color=“字体颜色字体颜色”3、face=“字体字体”第三章第三章 为网页添加对象为网页添加对象Eg：如图所示，制作网页：如图所示，制作网页第三章第三章 为网页添加对象为网页添加对象3.1.2 添加特殊符号添加特殊符号 网页中添加一些特殊符号，如英镑符网页中添加一些特殊符号，如英镑符号、注册商标符号、版权符号等。号、注册商标符号、版权符号等。第三章第三章 为网页添加对象为网页添加对象3.1.3 添加空格添加空格方法：方法：1、通过、通过“插入插入-HTML-特殊字符特殊字符-不换行符不换行符”2、 第三章第三章 为网页添加对象为网页添加对象3.1.4 文本换行与分段文本换行与分段 分段标记：分段标记：，指示文本，指示文本另起一段另起一段 换行标记：换行标记：，指示文字从这里，指示文字从这里换行显示，换行显示，是一个单标记是一个单标记区别：换行行间距小，分段行间距大区别：换行行间距小，分段行间距大第三章第三章 为网页添加对象为网页添加对象eg：制作一网页，：制作一网页，如下图所示如下图所示第三章第三章 为网页添加对象为网页添加对象3.1.5 水平线标记水平线标记特点：特点：1、线条默认情况下居中显示、线条默认情况下居中显示2、默认色为黑色、默认色为黑色3、是一个单标记是一个单标记4、默认情况下水平线显示效果为立体效、默认情况下水平线显示效果为立体效果果第三章第三章 为网页添加对象为网页添加对象属性：属性：1、width=“n”：水平线宽度：水平线宽度 size=“n”：水平线高度：水平线高度2、color=“水平线颜色水平线颜色”3、align=“left/right/center(默认默认值值)”4、noshade：去除立体效果：去除立体效果第三章第三章 为网页添加对象为网页添加对象其他文字排版标记其他文字排版标记1、标题标记：、标题标记：标题是通过标题是通过来实现来实现的，的，数字数字i的取值为的取值为16，即，即H1H6共共有有6中标题格式。中标题格式。H1为最大字号为最大字号第三章第三章 为网页添加对象为网页添加对象HTML的标题和一般文本的不同是每个的标题和一般文本的不同是每个标题需要独占一行标题需要独占一行在标题标记中可以使用水平对齐属性，在标题标记中可以使用水平对齐属性，如下所示：如下所示：第三章第三章 为网页添加对象为网页添加对象可以使用如下可以使用如下3中对齐方式：中对齐方式：left-左对齐（左对齐（默认默认）right-右对齐右对齐center-中间对齐中间对齐第三章第三章 为网页添加对象为网页添加对象1：加粗：加粗2：斜体：斜体3：下划线：下划线4：删除线：删除线5 ：下标，如：下标，如：I6 ：上标，如：上标，如：I22第三章第三章 为网页添加对象为网页添加对象eg:如图所示，制作该页面如图所示，制作该页面第三章第三章 为网页添加对象为网页添加对象3.1.6 创建列表创建列表1、无序列表标记、无序列表标记可以使用可以使用，符号表示列表项，格式为：符号表示列表项，格式为：列表项列表项1 列表项列表项2第三章第三章 为网页添加对象为网页添加对象单层列表默认值是单层列表默认值是disc，标记可以标记可以是单标记或双标记是单标记或双标记第三章第三章 为网页添加对象为网页添加对象2、有序列表标记、有序列表标记 用数字、罗马数字、字母顺序表示列表用数字、罗马数字、字母顺序表示列表项。标记格式为：项。标记格式为：列表项列表项1 列表项列表项2 第三章第三章 为网页添加对象为网页添加对象3、说明列表、说明列表 列表项名称列表项名称列表项说明列表项说明 列表项名称列表项名称列表项说明列表项说明第三章第三章 为网页添加对象为网页添加对象eg:如图所示，制作如图所示，制作网页。网页。第三章第三章 为网页添加对象为网页添加对象3.2 添加图像添加图像图像标记图像标记属性：属性：1、src=“图像路径图像路径”2、border=“图像边框属性图像边框属性”3、height=“n”：高度：高度 width=“n”：宽度：宽度4、alt=“替换文本替换文本”：当鼠标放在图像上：当鼠标放在图像上时鼠标右下角显示的文本内容时鼠标右下角显示的文本内容第三章第三章 为网页添加对象为网页添加对象 5、标记的标记的align属性值有属性值有行对齐、水平行对齐、水平对齐与图文混排对齐与图文混排。（1）行对齐）行对齐 行对齐指示图片与该行文字的对齐方式。行对齐指示图片与该行文字的对齐方式。图片图片在页面上要占一个文本行。在页面上要占一个文本行。行对齐的各个属性含行对齐的各个属性含义如下：义如下：top、texttop：文字顶部与图片顶部对齐：文字顶部与图片顶部对齐 bottom、baseline、absbottom：文字底：文字底部与图片底部对齐（部与图片底部对齐（默认对齐方式默认对齐方式）第三章第三章 为网页添加对象为网页添加对象middle：居中对齐方式，居中对齐是文：居中对齐方式，居中对齐是文字底部与图片中线对齐。字底部与图片中线对齐。absmiddle：绝对中间对齐，图片中线：绝对中间对齐，图片中线与文字中线的对齐与文字中线的对齐第三章第三章 为网页添加对象为网页添加对象eg：制作一网页，如：制作一网页，如图所示图所示第三章第三章 为网页添加对象为网页添加对象（2）水平对齐与图文混排）水平对齐与图文混排 align属性值使用属性值使用left、right时，指时，指示图片水平位置是左对齐还是右对齐，示图片水平位置是左对齐还是右对齐，并且图片和文字行此时没有同行的关系，并且图片和文字行此时没有同行的关系，图片不在只占一个文本行，因此可以实图片不在只占一个文本行，因此可以实现图文混排现图文混排。第三章第三章 为网页添加对象为网页添加对象eg：制作一网页，：制作一网页，如图所示如图所示第三章第三章 为网页添加对象为网页添加对象3.3 创建超链接创建超链接超链接超链接属性属性:1.href=“链接目标链接目标”2.target=“self/blank”:链接目标打开链接目标打开位置位置第三章第三章 为网页添加对象为网页添加对象超链接标记的使用：超链接标记的使用：第三章第三章 为网页添加对象为网页添加对象eg:根据网站主题，利用超链接制作网站根据网站主题，利用超链接制作网站的导航栏的导航栏第三章第三章 为网页添加对象为网页添加对象3.4 插入动态元素插入动态元素一、插入一、插入Flash动画动画二、插入二、插入Flash文本文本三、插入三、插入Flash按钮按钮四、添加插件：通过添加插件可以添加更四、添加插件：通过添加插件可以添加更多类型的媒体文件。多类型的媒体文件。第三章第三章 为网页添加对象为网页添加对象练习：练习：1、制作一网页，在页面中插入一、制作一网页，在页面中插入一FLASH动画动画2、根据网站主题，分别利用、根据网站主题，分别利用FLASH文本、文本、FLASH按钮制作网站的导航栏按钮制作网站的导航栏第三章第三章 为网页添加对象为网页添加对象五、添加背景音乐五、添加背景音乐 该标记必须在头部标记中使用，打开页该标记必须在头部标记中使用，打开页面时自动播放，默认播放一遍，面时自动播放，默认播放一遍，如果需如果需要循环播放，则需要将要循环播放，则需要将loop的属性值设的属性值设置为置为-1第三章第三章 为网页添加对象为网页添加对象六、网页特效标记六、网页特效标记 该标记主要完成指定文字在页面上的该标记主要完成指定文字在页面上的滚动效果。滚动效果。属性：属性：1、behavior=scroll(循环滚动，默认循环滚动，默认值值)/slide(滚动次滚动次)/alternate(来回滚来回滚动动)第三章第三章 为网页添加对象为网页添加对象2、direction=left/right/down/up3、height=n，width=n，设置，设置滚动区域滚动区域4、bgcolor=滚动区域背景颜色滚动区域背景颜色第三章第三章 为网页添加对象为网页添加对象5、loop=“n”，设置滚动次数，默认值，设置滚动次数，默认值为为-1（即循环）（即循环）6、scrollamount=n 设置滚动速度，单位为设置滚动速度，单位为px/s，默认为，默认为5px/s第三章第三章 为网页添加对象为网页添加对象练习：练习：1、制作一文本滚动特效的网页、制作一文本滚动特效的网页2、制作一图像滚动特效的网页、制作一图像滚动特效的网页总结总结一、页面属性（一、页面属性（body标记）标记）body标记的各个属性主要是设置标记的各个属性主要是设置网页正文内容的显示效果，包括设置网页正文内容的显示效果，包括设置网网页页背景颜色、网页背景图片、网页文本背景颜色、网页背景图片、网页文本颜色以及超链接的颜色。颜色以及超链接的颜色。总结总结二、字体标记二、字体标记 字体标记字体标记用于设置文本的字用于设置文本的字体名称、颜色和大小。体名称、颜色和大小。总结总结三、文本换行与分段三、文本换行与分段 分段标记：分段标记：，指示文本，指示文本另起一段另起一段 换行标记：换行标记：，指示文字从这里，指示文字从这里换行显示，换行显示，是一个单标记是一个单标记区别：换行行间距小，分段行间距大区别：换行行间距小，分段行间距大总结总结四、水平线标记四、水平线标记特点：特点：1、线条默认情况下居中显示、线条默认情况下居中显示2、默认色为黑色、默认色为黑色3、是一个单标记是一个单标记4、默认情况下水平线显示效果为立体效、默认情况下水平线显示效果为立体效果果总结总结五、标题标记：五、标题标记：标题是通过标题是通过来实现来实现的，的，数字数字i的取值为的取值为16，即，即H1H6共共有有6中标题格式。中标题格式。H1为最大字号为最大字号总结总结六、六、1：加粗：加粗2：斜体：斜体3：下划线：下划线4：删除线：删除线5 ：下标：下标6 ：上标：上标总结总结七、创建列表七、创建列表1、无序列表标记、无序列表标记2、有序列表标记、有序列表标记3、定义列表标记、定义列表标记总结总结八、图像标记八、图像标记属性：属性：align=“top/middle/bottom/left/right”总结总结九、超链接九、超链接属性属性:1.href=“链接目标链接目标”2.target=“self/blank”:链接目标打链接目标打开位置开位置总结总结十、插入动态元素十、插入动态元素1、插入、插入Flash动画动画2、插入、插入Flash文本文本3、插入、插入Flash按钮按钮4、添加插件：通过添加插件可以添加更、添加插件：通过添加插件可以添加更多类型的媒体文件。多类型的媒体文件。总结总结十一、添加背景音乐十一、添加背景音乐总结总结十二、网页特效标记十二、网页特效标记 该标记主要完成指定文字在页面上的该标记主要完成指定文字在页面上的滚动效果。滚动效果。第三章第三章 为网页添加对象为网页添加对象END