标签之美四——为网页添加绚丽多彩的图像

标签之美——图像的使用

一、设置网页背景图片

?


1

2

<body background="1.jpg">

</body>

这里图片路径的写法和本地超链接的写法是一样的,可以参考上一篇博客中关于本地路径的地方:http://my.oschina.net/u/2340880/blog/412934

注意:如果图片大小不能充满网页,图片将会被复制平铺。

二、图片标签<img>的应用

<img>是图片插入标签。其中图片路径的写法和超链接路径的写法一样。示例如下:

?


1

2

3

<body>

<img src="2.png"/>

</body>

效果如下:

<img>标签的alt属性可以为图片添加缺省文字,当图片不存在或者无法显示时,会有提示效果。示例如下:

?


1

2

3

<body>

<img src="3.png" alt="图片不存在"/>

</body>

设置图片的尺寸属性:width,height

?


1

2

3

<body>

<img src="1.jpg" width="200" height="200"/><!--设置宽高为200像素-->

</body>

三、图片的对齐模式

align是图片标签的对齐属性,对齐模式有5种属性值,下面一一对其进行介绍:

1、bottom:底部对其

?


1

底部对齐的示例<img src="1.jpg" width="200" height="200" align="bottom"/>的图片

效果如下:

2、left:左部对齐

?


1

底部对齐的示例<img src="1.jpg" width="200" height="200" align="left"/>的图片

3、right:右部对其

?


1

底部对齐的示例<img src="1.jpg" width="200" height="200" align="right"/>的图片

效果如下:

4、middle:居中对齐

?


1

底部对齐的示例<img src="1.jpg" width="200" height="200" align="middle"/>的图片

效果如下:

5、top:上部对齐

?


1

底部对齐的示例<img src="1.jpg" width="200" height="200" align="top"/>的图片

效果如下:

四、设置图片边框和边距

通过border属性可以给图片添加边框。属性的值为边框的宽度。

?


1

<img src="1.jpg" width="200" height="200" align="top" border="4"/>

效果如下,图片被加上了黑色的边框:

也可以给图片设置一个间距,间距的效果和透明的边框是一样的。

?


1

这里是图片<img src="1.png" align="middle" hspace="20">内容

其中,hspace是设置水平边框的宽度,还有一个属性vspace是设置垂直边框的宽度,上面代码效果如下:

五、插入视频的相关操作

插入视频的原理和图像是一样的,只是路径使用的时dynsrc,可以使用loop属性来设置循环次数,start属性来设置播放方式,这里,只将start属性说明一下,有两种方式,fileopen是网页加载就开始播放,mouseover是鼠标移动到视频位置后开始播放。

?


1

<img dynsrc="2.wmv" start="fileopen" loop="1">

时间: 2024-08-31 20:02:33

标签之美四——为网页添加绚丽多彩的图像的相关文章

标签之美七——为网页添加音乐

标签之美--为网页添加音乐 一.添加音乐 为网页添加音乐可以使用<embed></embed>这个标签.其用法和插入图片类似. <embed>标签的几个属性设置如下: src:音频路径 autostart:可是设置为ture或者false,代表是否自动播放. loop:设置是否循环播放 hidden:是否隐藏播放界面 二.插入背景音乐 使用标签<bgsound/>插入背景音乐,其中插入路径的写法和插入图片类似.

标签之美五——网页表格的设计

标签之美--网页表格的使用 通过表格,可以使网页排版更加清晰,形式更加简洁漂亮. 一.表格布局中三个重要的标签 1.<table></table>:表格的开始和结束标签,行列的布局都在<table>标签内. 2.<tr></tr>行标签的开始和结束 3.<tb></tb>列标签的开始和结束 行标签在列标签的外层,不能单独使用,其中必须至少有一列.示例如下: ? 1 2 3 4 5 6 7 <body> <

网页添加CSS样式表的四种方式

核心提示:网页添加CSS样式表的四种方式 一.使用STYLE属性: 将STYLE属性直接加在个别的元件标签里. <元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...}例如: <TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"标楷体"; line-height:150%>这种用法的优点 是可灵巧应用样式於各标签中,但是缺点则是没有整篇文件的『统一性』. 二

标签之美八——网页框架

标签之美--网页框架的应用 一.框架集<frameset> 框架集用来设置框架的属性,修饰框架的总体效果. 1.框架宽度 cols属性用来设置框架的宽度,示例如下: ? 1 2 3 4 5 6 7 8 <body> <frameset cols="30%,30%,30%,10%"> <frame src="1.html"> <frame src="2.html"> <frame s

标签之美十——用户交互元素

标签之美--用户交互元素 任何一个网页都会提供用户交互的功能,包括账号密码的提交,留言板等用户信息的的获取. 一.用户交互表单的属性 表单使用<form></form>来创建. 1.跳转链接属性 表单的跳转是在提交数据后跳转到指定的URL,使用action属性,如下: ? 1 2 <form action="http://"> </form> 2.传递数据的方式 表单跳转传递数据时可以设置一个传递方式,使用method可以设置方式为get

标签之美三——超链接的嵌入

标签之美--超链接标签 一.创建超链接 通常的超链接有两种方式,一种是链接到另一个文件,另一种是链接到当前文件的某个位置.这两种方式都是通过<a></a>标签来创建,其中href属性用来指定链接的目标地址. 1.链接到当前页面指定位置 被链接的地方需要使用<a>标签的name属性标记,示例如下: ? 1 2 3 4 <a href="#last">链接到本页最后</a><!--创建一个超链接--> <br&g

网页添加背景音乐

网页 一.学会添加音乐文件 为网页添加背景音乐的方法一般有两种,第一种是通过普通的<bgsound>标签来添加,另一种是通过<embed>标签来添加. (一)使用<bgsound>标签 用Dreamweaver打开需要添加背景音乐的页面,点击"代码"打开代码编辑视图,在<body></body>之间输入"<"在弹出的代码提示框中选择bgsound. Dreamweaver自动输入"<b

让你的主页声色并茂—巧为网页添加背景音乐

网页 对于个人站长来说,如何能使自己的网站与众不同.充满个性,一直是不懈努力的目标.除了尽量提高页面的视觉效果.互动功能以外,如果能在打开网页的同时,听到一曲优美动人的音乐,相信这会使你的网站增色不少. 一.学会添加音乐文件 为网页添加背景音乐的方法一般有两种,第一种是通过普通的< bgsound>标签来添加,另一种是通过< embed>标签来添加. (一)使用< bgsound>标签 用Dreamweaver打开需要添加背景音乐的页面,点击"代码"

为网页添加hCard微格式

说到"微格式",有人力捧,有人质疑.归根结底,我觉得还是浏览器和终端设备的支持没有跟上,没有形成一个完整的应用流程.尽管如此,Yahoo.Google 等行业巨头已经开始在各自的主流产品中应用微格式.而作为网站开发者和个人站长,你对"微格式"的应用仍在观望之中吗? 其实,微格式并不复杂,它离我们也并不遥远.不妨现在就行动起来,试试在网页中添加微格式吧! 在我看来,微格式最主打的应用非 hCard 莫属.所以本文将着重介绍一些 hCard 的应用经验. vCard/V