文字图片超链接

,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,第,*,页,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,HTML,的基本标签,讲师,：,蓝敏,第 一 章,就业技能结构图,本门课程目标和课程项目展示,本门课程目标,学完本门课程后，你能够：,课程项目展示,演示示例,1,：,课程项目展示,能制作界面美观大方、面向企业应用的静态商业网站，不含动态脚本功能。,本章任务,制作图文并茂的“广告”页面,查看源代码,本章目标,会使用,HTML,的基本结构创建网页,会使用文本相关标签实现文字修饰和布局,会使用图像相关标签实现图文并茂的页面,会使用超链接相关标签实现页面间的跳转,HTML文件的基本结构,HTML,文档的结构,我的第一个网页,Hello World!,HTML,网页,头部部分,主体部分,标签标记,HTML,文档的开始和结束,网页标题,网页内容，可以是文本、图像等,这部分包含文本、图像和链接。它包括在,标签内,查看源代码,这部分包括标题和其他说明信息。包括在,标签内,使用记事本创建网页,演示示例,2,：,如何在记事本里创建网页,使用记事本创建网页的步骤：,1,、打开记事本,2,、输入,HTML,代码,3,、保存为,*,.html,或*,.htm,文件，注意格式问题,4,、打开网页预览效果,使用记事本创建网页,标签,网页标题,网页页面中出现乱码，那如何消除乱码使其正常显示？,使用,标签,简体中文：,gb2312,繁体中文：,big5,纯英文网页：,iso-8859-1,可以避免页面中的乱码,页面背景色或背景图像,Hello World,！,为了使页面美丽大方，网页背景要尽量地浅,Hello World!,查看源代码,网页背景色彩,网页背景图像,文本相关标签,字体、字号,标题标签,标签,特殊符号,行的控制,段落标签,换行标签,使用了,换段了,设置了字体的大小和颜色,换行了,特殊符号,字体、字号相关标签,标题标签,.,#=1,2,3,4,5,6,说明：,到,字体大小依,次递减,一级标题,二级标题,三级标题,四级标题,五级标题,六级标题,H1,到,H6,标签用于指定不同级别的标题,查看源代码,.,字体、字号相关标签,标签,特殊符号,特殊字符,转义码,空格,引号,(“”),小于,(),版权号,(),字体的,大小值,字体的,颜色,字体的,类型,字体、字号相关标签,查看源代码,.,手机充值、,IP,卡,/,电话卡,移动,联通,|50,Copyright,2007,淘宝网,All rights.,空格效果,.,淘宝集市欢迎您！,淘宝网首届翠友会！,行的控制相关标签,段落标签,段,(Paragraph)(,可以看作是空行,),换行标签,换行,查看源代码,换段了,换行了,图像标签,常见的图片格式介绍,图像类型,优点,缺点,适用场合,制作工具,*.jpg,体积小，比较清晰,有损压缩、画面失真,网页图片,Photoshop,*.gif,支持,Internet,标准,支持无损耗压缩和透明度，很流行,支持有限的透明度,效果不如别的图像,网页图片,Photoshop,*.swf,体积小,便于网络传输,制作麻烦,网页动画,Flash,*.bmp,支持,24,位颜色深度，兼容性好,不支持压缩,容量大,桌面墙纸,photoshop,图像标签,图像的基本语法,查看源代码,鼠标移到图像上，出现的提示性文字,图像的位置,图像的宽度,图像的高度,为图像添加的提示性文字,图像标签,图像与文本的对齐方式,图像与文本居中对齐,还可以取,top,bottom,值,.,请点击广告进入明星专区,查看源代码,图像和文本居中对齐,小结,1,字号大小为,3,练习答案,练习代码,编写如下图所示效果对应的,html,代码,文字布局,内容分隔,标签,项目列表和编号,有序列表,无序列表,预格式文本,标签,水平分隔线,有序列表,无序列表,用了预先定义好的格式,如何使用内容分隔标签,线的厚度值,线的宽度,查看源代码,标签用于在页面上绘制水平线,线的颜色,如何使用列表,无序列表语法,列表项内容,有序列表语法,列表项内容,查看源代码,注册步骤：,填写信息,收电子邮件,注册成功,新人上路指南,如何激活会员名？,如何注册淘宝会员？,注册时密码设置有什么要求,？,支付宝认证,预格式文本标签,如何实现如下图所示的页面中的文字效果？,使用,标签可以实现,如何使用预格式文本标签,腾讯,-QQ,币,/QQ,幻想,-30,元卡,一 口 价：,26.45,元,运费：卖家承担运费,剩余时间：,5,天,宝贝类型：全新,卖主声明：货到付款，可试用,10,天！,查看源代码,HTML,中代码格式与浏览器中显示效果一样,页面链接标签,链接到其他页面,免费注册,链接内容,链接的地址,链接到其他页面,免费注册,登录,单击”,免费注册,”,之后链接到的页面,查看源代码,页面链接标签,链接到其他页面,相对路径,指定从根目录到文件的完整路径。,绝对路径,指定相对于当前文件的文件位置。,在同一个文件夹下有两个,html,文件，从一个文件超链接到另一个文件的路径有几种方式？,两种方式：相对路径和绝对路径,页面链接标签,要链接到同一目录,(C:HTML),下的页面，可编写,或,相对路径名,绝对路径名,页面链接标签,要实现如下图所示的超链接效果，怎么办？,演示示例,3,：,演示锚链接的例子,使用锚记标签,页面链接标签,链接到本页面,锚记标签用于使用户“跳”到文档的某个部分,HTML,的,NAME,属性用于创建锚标记,主题名称,为达到这种跳转效果，请在,HREF,参数中使用该标记,主题名称,演示示例,4,：,演示锚链接的例子,链接到其他页面,新人上路,新人上路指南,1,、定义锚标记,2,、链接到锚标记所在位置,页面链接标签,电子邮件链接,要链接电子邮件，可在链接标签中插入”,mailto:,邮箱地址”,站长信箱,演示示例,5,：,演示电子邮件链接,电子邮件链接,站长信箱,单击”站长信箱”链接后的输出结果,任何正确的电子邮箱地址均可,滚动标签,滚动文字或图像,滚动延迟时间,滚动对象的方向,说明：,scrolldelay,：,表示滚动延迟时间，默认值为,90,。,direction,：,表示滚动的方向，默认为从右向左。,查看源代码,滚动标签,水平滚动,垂直滚动,Avon,化妆品,雅诗兰黛,水平向左移动,垂直向上移动,图片和文字同时垂直向上移动,声明滚动文字结束,声明滚动文字“水平滚动”开始，并且将会以默认方式从右向左滚动,小结,2,有序列表,OL,无序列表,UL,练习答案,练习代码,编写如下图所示效果对应的,html,代码,标记用于在页面中嵌入多媒体文件，但是用户计算机上需要事先安装相应的处理程序,.(,一般用于,IE,和基于,IE,内核的浏览器。火狐需要安装插件才行。,),常用嵌入式文档的格式：,mp3,mid,wma,asf,swf,flv,rm,ra,ram,avi,testEmbed.html,autostart:,是否自动播放嵌入的文件。,loop:,是否循环播放。也可以取数字，表明循环多少次。,hidden:,是否显示播放器。,总结,哪个标签中的哪个属性可以改变字体颜色和字号？,图像与文本的对齐方式有哪几种？,项目列表和编号有何区别？分别适用什么场合？,链接到其他页面时，路径的表示方法有两种：相对路径和绝对路径，这两种路径有何区别和联系？,