尝试XHTML,第一个页面

知道XHTML也不算早,直到今天才尝试了一下用 CSS+DIV 定位,把昨天画的那个页面转化成了网页!

以前很难相信不用表格也能作出很漂亮的网页,今天自己亲自尝试了一下,哈哈,还真的可以(虽然我的不够pp)!

第一个作品:点这里查看

通过了 XHTML 校验和 CSS2 校验,发现要通过XHTML效验也比较简单!唯一不爽的是不支持输入文本框的 onMouseOver 和 onFocus !

也算是边学变做了,最开始做的时候还真是有点困难,因为平时做网页都是用表格,CSS 用的也不多,而且都是很简单的 CSS ,然后针对那些常用的标签研究了一下,渐渐就上手了,呵呵~

由于初学,代码很烂,就不公布了(其实可以自己下载的),呵呵~…

网页中文本框和按钮的一些特效

在网页制作中,表单中的对象总是给人一种单调与沉闷的感觉,比如说按钮、文本框等,它们一成不变的模样与颜色出现在页面上时,或多或少都会破坏页面的美观程度,就像我才作的那个登陆页面。

第一种效果:无立体效果的文本框与按钮
  在网页的与标签之间插入这个样式表:

好了第一步就完成了,下一步我们就分别在文本框与按钮的htm语句中加上这一句代码:class=login
例:

好了,可以看一下文本效果与按钮效果了:

第二种效果:带颜色的下划线式文本框与按钮效果

  同样,我们也需要样式表的帮助来实现这个效果,和第一种效果的操作步骤一样在网页的与标签之间插入样式表,

关于网页标准

接触网络这么久,网页也做了一些,从来就没有想过什么网页标准的问题,前几天由于时间关系,看了一点点相关的文章,今天有跑去看了,还是有点感触的,尤其其中提到了三大门户网站的设计均不符合网页标准:

代码校验(XHTML)
(校验地址:http://validator.w3.org/、
(http://www.htmlhelp.com/tools/validator/ )

www.sina.com.cn
失败,混杂的HTML,未达到XHTML1。黄色警报:字符集错误。(定义了GB2312,但页内使用了非GB2312字符)。非标准代码43处。

www.163.com
失败,混杂的HTML,未达到XHTML1。红色警报:未定义DOCTYPE。非标准代码41处。

www.sohu.com 失败,混杂的HTML,未达到XHTML1。黄色警报:字符集错误。非标准代码38处。

CSS2校验 (校验地址:http://jigsaw.w3.org/css-validator/validator-uri.html…

极细表格的做法

在网页中应用最广泛的就是表格了,作出一个漂亮的表格会为网页增色不少,而其中表格的边框就是很
重要的部分。新手在用表格时,总是发现自己作出来的表格边框很粗,不如人家的漂亮,这里介绍两种方法。
  在介绍制作极细表格边框的方法之前,我们先来看一下有关标识的作用:
  border:指定表格边框的厚度,单位为像素,数值为0表示表格不显示边框;
  bordercolor:指定表格边框的颜色,可用颜色名或十六进制rgb值;
  bgcolor:指定背景颜色,可用颜色名或十六进制rgb值;
  cellspacing:指定相邻单元格边框的间距;
  cellpadding:指定表格单元格与内容之间的间距;
  bordercolordark:指定表格三维边框的深色颜色,可用颜色名或十六进制rgb值;
  bordercolorlight:指定表格三维边框的浅色颜色,可用颜色名或十六进制rgb值。

  方法一:
  

bordercolorlight=”#000000″…

虚线表格的制作方法

浏览网站的时候总是看见很多虚线表格,使得网页的边线看起来更舒服,其实做起来也很简单了,在表格的html里加上这个:

style=”BORDER-LEFT:#000000 1PX DASHED;
BORDER-RIGHT: #000000 1PX DASHED;
BORDER-TOP: #000000 1PX DASHED;
BORDER-BOTTOM: #000000 1PX DASHED”

颜色是十六位代码,你可以自己设。

注:只能在IE5.5以上版本里用,到了NETSCAPE里一点用处都没有,除非你用做好的底图填充。

下面是一个例子:


虚线表格

.box {
BORDER-RIGHT: #000000 1px dotted; BORDER-TOP: #000000 1px dotted; BORDER-LEFT: #000000 1px dotted; WIDTH: 300px; COLOR: #000000; BORDER-BOTTOM:

关于链接特效(CSS)

经常看到有些网页的链接做的很漂亮,研究了一下,整理了一些代码,供大家参考:

  一、先看看超连没有下划线的例子

  在和之间加上如下的CSS语法:

  这样浏览器在执行时,就明白:a:link指正常的未被访问过的链接a:active指正在点击的链接a:visited指已经访问过的链接其中,text-decoration是文字修饰效果的意思,none参数表示使有超级链接的文字不显示下划线。如果讲none替换成underline就表示有下划线,换成overline则给超连文字加上划线,换成line-through给超连文字加上删除线,blink则使文字在闪烁。

  二、类似的控制:使粗体文字加上删除线

  例子2:闪烁的粗体文字使用的代码是:B …

Macromedia代言人谈为什么要用CSS

Greg Rewis
Dreamweaver Evangelist

自从 Dreamweaver MX 2004 发布以来,我曾经无数次向 Dreamweaver 的新老用户演示它的新特征和新功能。每次进行产品演示,我很快就会极力称赞 Dreamweaver MX 2004 设计和呈现 CSS(或层叠样式表)的新功能。

然而最近某位新用户问了一个问题,说实话,这个问题一下子让我张口结舌。这位用户只是问:“我为什么要使用 CSS?”当时我意识到,尽管我们这些每天与 HTML 和 CSS 打交道的人非常了解 CSS 的优点,但仍有很多人并不了解。或者说并不完全了解 CSS 所能提供的所有优点。本文是我对上面那位新用户的书面回答。

CSS 起源
回顾 CSS 的优点之前,我要先介绍一下它的历史。Web 管理组织 W3C 在 1996 年 11 月推荐使用 CSS,并批准了 CSS 1 级规范。CSS 1 级规范说明了用于 HTML 页面的属性。这些属性代替了传统的字体标签和其他“样式”标记,例如颜色和边距。1998…