HTML网页制作第二章课件.ppt
《HTML网页制作第二章课件.ppt》由会员分享,可在线阅读,更多相关《HTML网页制作第二章课件.ppt(35页珍藏版)》请在三一办公上搜索。
1、HTML网页制作,Company Logo,第二章 网页常用标签,Company Logo,Company Logo,教学要求,2.网页常用标签,2.1 图片,1)图片标记,在网页中我们可以使用标签插入图片,标签的语法如下:,注意:在使用标签时,不是英语单词中的image单词拼写方式,在html页面中可以插入图像,网页中常用的图像格式有jpg和gif两种。,例2-1:标签的使用,/ 我们在这里插入图片! ,2.网页常用标签,2.1 图片,页面中插入图片可以起到美化的作用,插入图片的标记只有一个,那就是标记,插入图片的时候,仅仅使用标记是不够的,需要配合其它的属性来完成。如表2-1,2)属性介绍
2、,src:图像的源文件。 alt:提示文字。width:宽度。 height:高度。border:边框。 align:排列。,2.网页常用标签,2.1 图片,图文混排是制作精美网页常用的功能之一,通过将适当的图像与文字有效的排列组合在一起,可以大大丰富版面,在很大程度上提高版面的可视性。 图文混排是指当文字和图片在一起时他们的排列方式,通过图片的align属性设置,一般有如下几种值:,3)图文混排,left:表示图片在文字的左边显示。right:表示图片在文字的右边显示。top:表示文字和图片的顶端对齐。bottom:表示文字和图片的底端对齐。middle:表示文字和图片中部对齐。,2.网页常
3、用标签,2.1 图片,3)图文混排,例2-2:图文混排,图文混排 图片在文字的右边显示! 文字和图片中部对齐!,2.网页常用标签,2.2 超级链接,超级链接也称超链接或链接。超链接在本质上属于一个网页的一部分,它是一种允许我们同其他网页或站点之间进行连接的元素。所谓的超链接是指从一个网页指向一个目标的连接关系。,按照链接路径:,内部链接-点击该超链接连接到同一网站 的另外一个页面。锚点链接-点击该超链接连接到同一页面的某一个位置。外部链接-点击该超链接连接到其它的网站上的某一个页面,按使用对象:,文本超链接-建立在文本上的超连接。图像超链接-建立在图片上的超连接。E-mail链接-超链接的目标
4、是打开邮件发送。锚点链接-超链接的目标是在同一个页面之内。多媒体文件链接-超链接的目标是多媒体文件。空链接-超链接没有目标。,2.网页常用标签,2.2 超级链接,超链接是一种对象,它以特殊编码的文本或图形的形式来实现链接,如果单击该链接,则打开一个新的网页,其语法如下:,href表示超链接的目标路径,href的值一般有三种形式的值: (1)绝对URL的超链接。URL就是统一资源定位符,简单地讲就是网络上的一个站点、网页的完整路径,称为内部链接。如。 (2)第二种是相对URL的超链接。如将自己网页上的某一段文字或某标题链接到同一网站的其他网页上面去,称为外部链接。 (3)第三种称为同一网页的超链
5、接,这种超链接又叫做书签或者锚标记。,1)超链接,2.网页常用标签,2.2 超级链接,例2-3:超级链接的使用,a.html,b.html/ 我们现在学习的是超级链接的使用! ,1)超链接,/ 链接到另外一个页面,2.网页常用标签,2.2 超级链接,锚标记的作用是链接到同一页面的某一个段落,它的语法和超链接的语法几乎一样,只是src属性的书写有些变化和属性的使用,其锚标记的定义语法如下:,文本内容,注意:锚标记的使用需要先使用标签和name属性定义一个锚标记,然后使用标签的href属性去链接。,2)锚标记,锚标记的使用语法如下:文本内容,2.网页常用标签,2.2 超级链接,例2-4:锚标记的使
6、用,2)锚标记,/ 第一章为“锚”标记。 除了链接到另外一个HTML文件,也可以在一篇文章内随心所欲地链接。 这和前面两种稍有不同,需要先做出一个“锚”标记,即链接的目标地, 再做到“锚”的链接。到“锚”的链接与平常相同。 从这里可链接到第一章,2.网页常用标签,2.2 超级链接,外链接是指超链接的目标是当前网站之外的页面路径,其语法格式和超链接的语法格式完全相同,比如我需要在我的页面中使用百度的搜索功能。,例2-5:外链接的使用,3)外链接,/ 使用百度搜索,2.网页常用标签,2.3 滚动效果,在网页上我们经常看到文字和图片可以自上而下滚动,也可以从左至右滚动,能够使这些僵硬的文字和图片变的
7、活跃起来的大功臣便是标签。其语法是:, 内容,2.网页常用标签,2.3 滚动效果,标签的属性,align 用于按设定的值对齐滚动的内容,可以设定的值有:left、center、top、bottom。loop 用于设定滚动内容的滚动次数。当loop的值为“infinite”或是“-1”时,则内容会无限制的滚动。scrollamount 用于设定每个连续滚动内容后面的间隔,该间隔用像素表示。scrolldelay 用于设定两次滚动操作之间的间隔时间,该时间以毫秒为单位。bgcolor 用于设定内容的背景颜色。direction 用于设定内容滚动的方向。可以设定的值有:left、right、down
8、、up。height 用于设定滚动内容的高度。width 用于设定滚动内容的宽度。hspace 用于设定滚动内容左右的空白空间。vspace 用于设定滚动内容上下的空白空间。,注意:标签的属性,不是所有的属性都必须使用。,2.网页常用标签,2.4 列表,1)有序列表,有序列表是指列表结构中的列表项有先后顺序的列表形式。从上到下有序列编号,由标签和列表项实现。其语法如下: 第一项 第二项 第三项,注意:type属性用于设置有序列表项前的编号类型,而start属性用于设置起始值。Type属性的值可以有很多种。 有序列表的属性值 type=1 表示列表项用的数字标号(1、2、3.) type=A 表
9、示列表项用大写字母标号(A、B、C.) type=a 表示列表项用小写字母标号(a、b、c.) ,2.网页常用标签,2.4 列表,1)有序列表, 有序列表的使用 网页前台技术列表 HTML CSS JavaScript JQuery ,例2-6:有序列表的使用,2.网页常用标签,2.4 列表,2)无序列表,无序列表是指列表结构中的列表项没有先后顺序的列表形式。大部分网页应用的列表均采用无须列表,由标签和列表项实现。其语法如下: 第一项 第二项 第三项,注意:type属性用于设置无序列表项前的提示符类型。Type属性的值可以有很多种。 无序列表的属性值 type=“disc” 表示列表项前的提示
10、符为实心圆。 type=“circle” 表示列表项前的提示符为空心圆。 type=“square” 表示列表项前的提示符为方块。 ,2.网页常用标签,2.4 列表,1)有序列表, 无序列表的使用 网页后台技术列表 J2EE ASP.NET PHP Struts ,例2-7:无序列表的使用,2.网页常用标签,2.5 表格,表格是网页制作中使用最多的技术之一。表格通常用来显示分类数据,在网页中表格更多地用在网页布局和定位上,通过使用表格相关属性,可以实现对网页中的文字和图片进行合理的布局和定位,使得网页在形式上丰富多彩,在组织上井然有序。,表格是由指定数目的行和列组成,表格的基本结构有表格标题、
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- HTML 网页 制作 第二 课件

链接地址:https://www.31ppt.com/p-1785606.html