html 第5章 图像 -- 背景图片 插入图片等

[复制链接]
ARCHY明星会员实名认证 发表于 2012-7-17 09:56:15 [html] 显示全部楼层 |阅读模式 上一主题 下一主题

马上注册,一起探讨正确快速的建站方法

您需要 登录 才可以下载或查看,没有帐号?快速注册

x
一、背景图案的设置

格式:
  1. <body background=”URL”>
复制代码
URL是指图片背景的地址

二、将图片插入到网页中去

格式:
  1. <img src="URL">
复制代码
功能:将图片插入到网页中去,单一标签

1、<img>下的属性

属性名称  属性值  说明
src     URL   图片的路径

2、图片的注解,也称为ALT,在seo优化中经常会提到,也就是图片必须添加的选项

属性名称  属性值  说明
alt     字符串  给图片做注解

3、图象大小的设置

属性名称  属性值  说明
width    像素   绝对设置,宽
      百分比  相对设置,宽
height   像素    绝对设置,高
      百分比  相对设置,高

4、图象边框的设置

属性名称  属性值  说明
border   数字   图象边框

5、文字图象的排列

属性名称  属性值  说明
align    left    图象靠左,文字靠右
      right   图片靠右,文字靠左
      top    文字往上靠
      middle   文字靠中
      bottom  文字靠下

6、空隙的设置

属性名称  属性值  说明
vspace   像素   垂直上下两端与物件的距离
hspace   像素   水平左右两段与物件的距离

三、用图像作为超链接

格式:
  1. <a href="URL"><img src="URL"></a>
复制代码
2个URL代码是不同的,第一个是链接的地址,第二个是图片的地址,图像链接会经常使用,比如常见的一些图片广告位都是如此。

四、地图索引

格式:
  1. <map name="图象名称" id="图象名称">
  2. <area shape="选取区块的形状" coords="坐标" href="URL" alt="文
  3. 字说明">
  4. </map>
复制代码
<img src="URL" USEMAP="#图象名称">

<map>声明整张图使用地图链接方式进行连接。

name、id指此图的名称.

<area>表示我们所要链接其中一点的区快

shape表示我们所选择的形状,如:rect矩形、circle圆、poly多边形。

coords 表示地图的坐标位置!!

五、为网站添加图标
  1. <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
复制代码
一般网站开源程序默认都已经写好了代码,只需要制作favicon.ico图片,然后上传覆盖即可,推荐查看:ICO透明背景图标制作方法

作业:

1、制作一个图像链接,简单的代码图片广告位;
2、尝试写个简单的地图,包含3-5个链接点;
3、给你的网站制作一个favicon.ico

推荐阅读:

第1章 XHTML 学前准备

第2章 HTML 基本结构

第3章 排列清单UL控制标记

第4章 表格table基本格式和使用方法

第6章 超链接 a标签的使用

第7章 表单from的功能结构

第8章 Flash MP3等多媒体的结构和使用

第9章 其他标记marquee、脚本和meta




上一篇:第4章 表格table基本格式和使用方法
下一篇:第6章 超链接 a标签的使用

大神点评13

 发表于 2012-7-17 10:16:59
转播微博
7089588 发表于 2012-7-17 15:41:00 [html] 显示全部楼层
前排学习
Massachu 发表于 2012-11-22 10:36:04 [html] 显示全部楼层
But in other ways he
U
Mr. Romney than Ms. Palin was for Senator
<h1><a title="A+t+h">A+t+h</a></h1>
with years of experience in Washington
<a title="A+t">A+t</a>
John Mccain in 2008 because he
<h1><a >A+h</a></h1>
represents a set of substantive policy
<a >A</a>
positions that even his own party shied away
http://www.coachoutletonlineab.com
anyta 发表于 2012-12-30 00:23:02 [html] 显示全部楼层
优秀啊
longxd 发表于 2013-1-4 13:20:00 [html] 显示全部楼层
嘻唰唰,嘻唰唰!!!!!!....
cjoyren 发表于 2013-5-9 10:45:41 [html] 显示全部楼层
本帖最后由 cjoyren 于 2013-5-9 10:49 编辑

参照W3school 的实验室样板 http://www.w3school.com.cn/tiy/t.asp?f=html5_map
尝试做了下MAP 感觉很麻烦, 有没有什么 制作 map 的软件呢? 纯手动 很不方便,DW 有办法做么?@ARCHY
唐夫君明星会员实名认证 发表于 2015-9-4 13:25:58 [html] 显示全部楼层
地图不怎么会
长高之路 www.zhanggao.club
向志祥明星会员实名认证 发表于 2015-9-6 00:50:43 [html] 显示全部楼层
回帖不支持下,期待更多分享。
http://www.37hao.net
文山社区,努力做到文山最有影响力的网站
邦妮儿 发表于 2015-9-19 17:23:48 [html] 显示全部楼层
工场是互联网教育践行者,针对互联网企业岗位提供在线直播,视频教程和多种形式的教学服务,帮助学习者快速进入互联网行业,并不断引进国内外先进的在线教育理念和技术,努力打造国内在线学习平台第一品牌
豪你个头 发表于 2015-9-22 16:23:48 [html] 显示全部楼层
谢谢分享
可乐鸡腿堡 发表于 2015-11-11 14:17:15 [html] 显示全部楼层
嗯嗯嗯神一样的村咋
长城长长的 发表于 2015-12-12 01:00:32 [html] 显示全部楼层
我要学习一下
toro 发表于 2015-12-24 07:33:18 [html] 显示全部楼层
很给力,希望分享更多给力的帖子啊。
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

快速回复 返回顶部 返回列表