网页开发备忘

 

    BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom;

尽管可以用<img>直接插在内容中,但这是不推荐的。这里的"辅助图片"是指那些

不是作为页面要表达的内容的一部分,而仅仅用于修饰、间隔、提醒的图片。例如:

相册中的图片、图片新闻中的图片,上面的3d盒模型图片都属于内容的一

部分,它们可以用<img>元素直接插在页面里,而其它的类似logo,标题图片,列表

前缀图片都必须采用背景方式或者其他CSS方式显示。

 

为页面添加正确的DOCTYPE

1)过渡型(Transitional

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1 /DTD/xhtml1-transitional.dtd">

设定一个名字空间(Namespace

 

直接在DOCTYPE声明后面添加如下代码:

 

<html XMLns="http://www.w3.org/1999/xhtml"> 

 

一个namespace是收集元素类型和属性名字的一个详细的DTDnamespace

声明允许你通过一个在线地址指向来识别你的namespace。只要照样输入代码就可以。

 

声明你的编码语言

 

为了被浏览器正确解释和通过标识校验,所有的XHTML文档都必须声明它们所使

用的编码语言。代码如下:

 

<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />

 

这里声明的编码语言是简体中文GB2312,你如果需要制作繁体内容,可以定义为BIG5

为搜索引擎准备的内容

代码如下,替换成你自己站点的内容就可以:

 

允许搜索机器人搜索站内所有链接。如果你想某些页面不被搜索,推荐采用robots.txt方法

<meta content="all" name="robots" />

设置站点作者信息

<meta name="author" content="[email protected],阿捷" />

设置站点版权信息

<meta name="Copyright" content="www.w3cn.org,自由版权,任意转载" />

站点的简要介绍(推荐)

<meta name="description" content="新网页设计师。web标准的教程站点,

推动web标准在中国的应用" />

站点的关键词(推荐)

<meta content="designing, with, web, standards, xhtml, css, graphic, design,

layout, usability, ccessibility, w3c, w3, w3cn, ajie" name="keywords" />

 

给所有属性值加引号 例:height="100",而不能是height=100

关闭所有的标签例如:

 

<br /> <img src="webstandards.gif" />

背景图象重复与否:[/B]

 

background-repeat:

repeat | repeat-x | repeat-y | no-repeat

 

注:

以上设置标签的意义

repeat   图象水平垂直方向都重复。

repeat-x  图象水平方向重复。

repeat-y  图象垂直方向重复。

no-repeat  图象不重复。

 

说:

定义图象重复方向是对于一些独特的图象定位而言。 

 

:

background-repeat: repeat(设定背景图为重复,如果重复一般不必设置,这个是浏览器默认的。) 

 

背景图的地址最好写全,就是 http://~~因为据说,NETSCAPE4.0以下好象支持的不是很好。

 

背景图象是否随滚动条移动:

 

background-attachment: 

scroll | fixed

scroll属于浏览器默认的,也就是随滚动条移动,fixed为不动。

 

[B]给背景图定位:

 

---就是设置它显示在哪里.最上面top,还是左边left

background-position:

| [percentage | length]{1,2}

|[top | center | bottom]

| [left | center | right] 

 

background-position:[percentage | length]是用X(横座标)y(纵座标)定义,

background-position: 20px 40px;

 

background-position:[top | center | bottom] [left | center | right]

是一样的意思了,三个任意两个搭配可以产生不同的效果.

可以是background-position:top center;center bottom;top bottom;left,right.....

 

bottom:,top:,left:,right:,center:.

全部的设定:

 

{ background: background-color || background-image || background-repeat

|| background-attachment || background-position }

 

:

body{ background: #ffffff; background-image: url( http://user.7host.com/

bluemm/img/1bg.gif); background-attachment: fixed; background-repeat:

no-repeat; background-position: right bottom }

使你的主页自动被搜索引擎收录

   你一定为了让你的网站名扬天下而去各个搜索引擎注册吧?在网上有很多机器人,

它们自动搜寻关键字,你只要在网站上设立这样的关键字,就有可能被它们找到。

<head><meta http equiv=keywords content=yancheng,science,technolodgy,

information,network,politics,economic charset=gb2312></head>

   其中 CONTENT 这个属性主要让你放置一些你主页里的关键词,而且这些关键词

最好容易使人想到。

如果是有意义的图片,不便用背景方法,可以用增高行距的办法变通实现垂直居中,完整代码如下:

 

<html>

<head>

<style>

body{TEXT-ALIGN: center;}

#center{ MARGIN-RIGHT: auto;

MARGIN-LEFT: auto;

height:200px;

background:#F00;

width:400px;

vertical-align:middle;

line-height:200px;

}

</style>

</head>

<body>

<div id="center"><img height="79" src="style/001/logo_w3cn_194x79.gif" width="194" border="0" /></div>

</body>

</html>

说明:vertical-align:middle;表示行内垂直居中,我们将行距增加到和整个DIV一样高line-height:200px;然后插入图片,就垂直居中了。

计数器的代码:<tr>

          <td width="100%" align="center"><font size="3" color="#33CC00" class="f1">You

            are the</font><font size="4" color="242931"> <img src="http://202.113.53.130

          /counters/count.exe?dd=d|sh=T|df=tjmu.dat" align="absmiddle"><font size="3">

            <font color="#33CC00" class="f1">guests to access this page since

            Dec ,01,1997</font> </font></font></td>

        </tr>

 

    BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom;

尽管可以用<img>直接插在内容中,但这是不推荐的。这里的"辅助图片"是指那些

不是作为页面要表达的内容的一部分,而仅仅用于修饰、间隔、提醒的图片。例如:

相册中的图片、图片新闻中的图片,上面的3d盒模型图片都属于内容的一

部分,它们可以用<img>元素直接插在页面里,而其它的类似logo,标题图片,列表

前缀图片都必须采用背景方式或者其他CSS方式显示。

 

使用腾讯QQ提供的天气预报教本,代码如下:

<!-- 天气预报 -->

<p><b>天气预报</b></p>

<center>

<iframe id="weather" width="157" height=257 frameborder="0" scrolling="NO" src="http://appnews.qq.com/cgi-bin/news_qq_search?city=%C9%CF%BA%A3"></iframe>

</center>

city一项中需要填入所需预报城市编码,默认值是深圳。其中的"%D6%D8%C7%EC"代表城市的代码.

 

那么如何得知你所在城市的代码呢?其实很简单,只需要到baidu搜索一下城市的名称,比如"重庆",然后地址栏中的那个代码就是了

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章