12天学会XHTML[整理]送给需要的朋友

随风而去

第十一天：不用表格的菜单<br /><br />布局初步搭建起来，我开始填充里面的内容。首先是定义logo图片：<br />样式表：#logo {MARGIN: 0px;padding:0px;WIDTH: 200px;HEIGHT:80px;}<br />页面代码：&lt;div id=&quot;logo&quot;&gt;&lt;a title=&quot;网页设计师&quot; href=&quot;http://www.w3cn.org/&quot; &gt;&lt;img height=&quot;80&quot; alt=&quot;链接到w3cn.org首页&quot; src=&quot;images/logo_w3cn_200x80.gif&quot; width=&quot;200&quot; /&gt;&lt;/a&gt;&lt;/div&gt; <br />以上代码现在应该容易理解。先在CSS定义了一个logo的层，然后在页面中调用它。需要说明的是，为了使网页有更好的易用性，web标准要求大家给所有的、属于正式内容的图片，加一个alt属性。这个alt属性是用来说明图片的作用(当图片不能显示的时候就显示替换文字)，所以不要只写成无意义的图片名称。<br />接下来是定义菜单。<br />1.不用表格的菜单(纵向)<br />我们先来看菜单的最终效果：<br />什么是网站标准 <br />使用标准的好处 <br />怎样过渡 <br />相关教程 <br />工具 <br />资源及链接 <br />通常方法我们至少嵌套2层表格来实现这样的菜单，间隔线采用在td中设置背景色并插入1px高的透明GIF图片实现；背景色的交替效果采用td的onmouseover事件实现。但查看本菜单的页面代码，你会看到只有如下几句：<br />&lt;div id=&quot;menu&quot;&gt; <br />&lt;ul&gt;<br />&lt;li&gt;&lt;a title=&quot;网站标准&quot; href=&quot;http://www.w3cn.org/webstandards.html&quot;&gt;什么是网站标准&lt;/a&gt;&lt;/li&gt;<br />&lt;li&gt;&lt;a title=&quot;标准的好处&quot; href=&quot;http://www.w3cn.org/benefits.html&quot;&gt;使用标准的好处&lt;/a&gt;&lt;/li&gt;<br />&lt;li&gt;&lt;a title=&quot;怎样过渡&quot; href=&quot;http://www.w3cn.org/howto.html&quot;&gt;怎样过渡&lt;/a&gt;&lt;/li&gt;<br />&lt;li&gt;&lt;a title=&quot;相关教程&quot; href=&quot;http://www.w3cn.org/tutorial.html&quot;&gt;相关教程&lt;/a&gt;&lt;/li&gt;<br />&lt;li&gt;&lt;a title=&quot;工具&quot; href=&quot;http://www.w3cn.org/tools.html&quot;&gt;工具&lt;/a&gt;&lt;/li&gt;<br />&lt;li&gt;&lt;a title=&quot;资源及链接&quot; href=&quot;http://www.w3cn.org/resources.html&quot;&gt;资源及链接&lt;/a&gt;&lt;/li&gt;<br />&lt;/ul&gt;<br />&lt;/div&gt; <br />没有用任何table,而用的是无序列&lt;li&gt;，整个菜单的效果实现的秘密完全在于id=&quot;menu&quot;，我们再来看CSS中关于menu的定义：<br />(1)首先定义了menu层的主要样式:<br />#menu {<br />MARGIN: 15px 20px 0px 15px;&nbsp;&nbsp;/*定义层的外边框距离*/<br />PADDING:15px;&nbsp; &nbsp; /*定义层的内边框为15px*/<br />BACKGROUND: #dfdfdf;&nbsp; &nbsp;/*定义背景颜色*/<br />COLOR: #666;&nbsp; &nbsp; /*定义字体颜色*/<br />BORDER:#fff 2px solid;&nbsp;&nbsp;/*定义边框为2px白色线条*/<br />WIDTH:160px;&nbsp; &nbsp; /*定义内容的宽度为160px*/<br />} <br />(2)其次定义无序列表的样式：<br />#menu ul {<br />MARGIN: 0px;<br />PADDING: 0px;<br />BORDER: medium none; /*不显示边框*/<br />LINE-HEIGHT: normal; <br />LIST-STYLE-TYPE: none;<br /><br />}<br />#menu li {BORDER-TOP: #FFF 1px solid; MARGIN: 0px;} <br />说明：这里用的是id选择器的派生方法定义(参考第7天：CSS入门的介绍)了在menu层中的子元素&lt;ul&gt;和&lt;li&gt;的样式。LIST-STYLE-TYPE: none一句表示不采用无序列表的默认样式，即：不显示小圆点（我们后面用自己的图标来代替小圆点）。BORDER-TOP: #FFF 1px solid;则定义了菜单之间的1px间隔线。<br />(3)定义onmouseover效果<br />#menu li a {<br />PADDING:5px 0px 5px 15px;<br />DISPLAY: block; <br />FONT-WEIGHT: bold; <br />BACKGROUND: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px; <br />WIDTH: 100%; <br />COLOR: #444; <br />TEXT-DECORATION: none;<br />}<br />#menu li a:hover { BACKGROUND: url(images/icon_dot_lmenu2.gif) #C61C18 no-repeat 2px 8px;<br />COLOR: #fff; } <br />解释如下：<br />&quot;display:block;&quot;表示将标签a当作块级元素来显示，使得链接变成一个按钮； <br />&quot;BACKGROUND: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px;&quot;这一句定义了替代li的小圆点的图标。&quot;transparent&quot;指背景为透明，&quot;2px 8px&quot;指定图标的位置是距左边2px，距上边8px。这一句也可以拆分写成四句：&quot;BACKGROUND-IMAGE: url(images/icon_dot_lmenu.gif); BACKGROUND-POSITION: 2px 8px; BACKGROUND-REPEAT: no-repeat; BACKGROUND-COLOR: transparent;&quot; <br />&quot;#menu li a:hover&quot;定义了当鼠标移动到链接上以后的颜色变化和小图标变化。 <br />ok，不用表格的菜单就这样实现了。大家可以明显感觉到，原来写在HTML里的表现样式全部剥离放到CSS文件里去了。页面代码节约了大半。通过CSS要修改菜单样式就很简单了。<br />2.不用表格的菜单(横向)<br />上面是纵向的菜单,如果要显示横向菜单，用li也可以吗？当然是可以的，下面给出代码，效果就在本页顶部:<br />页面代码<br />&lt;div id=&quot;submenu&quot;&gt; <br />&lt;ul&gt;<br />&lt;li id=&quot;one&quot;&gt;&lt;a title=&quot;首页&quot; href=&quot;http://www.w3cn.org/&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;<br />&lt;li id=&quot;two&quot;&gt;&lt;a title=&quot;关于我们&quot; href=&quot;http://www.w3cn.org/aboutus.html&quot;&gt;关于我们&lt;/a&gt;&lt;/li&gt;<br />&lt;li id=&quot;three&quot;&gt;&lt;a title=&quot;网站标准&quot; href=&quot;http://www.w3cn.org/webstandards.html&quot;&gt;网站标准&lt;/a&gt;&lt;/li&gt;<br />&lt;li id=&quot;four&quot;&gt;&lt;a title=&quot;标准的好处&quot; href=&quot;http://www.w3cn.org/benefits.html&quot;&gt;标准的好处&lt;/a&gt;&lt;/li&gt;<br />&lt;li id=&quot;five&quot;&gt;&lt;a title=&quot;怎样过渡&quot; href=&quot;http://www.w3cn.org/howto.html&quot;&gt;怎样过渡&lt;/a&gt;&lt;/li&gt;<br />&lt;li id=&quot;six&quot;&gt;&lt;a title=&quot;相关教程&quot; href=&quot;http://www.w3cn.org/tutorial.html&quot;&gt;相关教程&lt;/a&gt;&lt;/li&gt;<br />&lt;li id=&quot;seven&quot;&gt;&lt;a title=&quot;工具&quot; href=&quot;http://www.w3cn.org/tools.html&quot;&gt;工具&lt;/a&gt;&lt;/li&gt;<br />&lt;li id=&quot;eight&quot;&gt;&lt;a title=&quot;资源及链接&quot; href=&quot;http://www.w3cn.org/resources.html&quot;&gt;资源及链接&lt;/a&gt;&lt;/li&gt;<br />&lt;li id=&quot;nine&quot;&gt;&lt;a title=&quot;常见问题&quot; href=&quot;http://www.w3cn.org/faq.html&quot;&gt;常见问题&lt;/a&gt;&lt;/li&gt;<br />&lt;/ul&gt;<br />&lt;/div&gt; <br />样式表代码<br />#submenu { <br />MARGIN: 0px 8px 0px 8px; <br />PADDING: 4px 0px 0px 0px; <br />BORDER: #fff 1px solid; <br />BACKGROUND: #dfdfdf; <br />COLOR: #666; <br />HEIGHT:25px; } <br /><br />#submenu ul { <br />CLEAR: left; <br />MARGIN: 0px; <br />PADDING:0px; <br />BORDER: 0px; <br />LIST-STYLE-TYPE: none; <br />TEXT-ALIGN: center; <br />DISPLAY:inline;<br />} <br /><br />#submenu li { <br />FLOAT: left; <br />DISPLAY: block; <br />MARGIN: 0px; <br />PADDING: 0px; <br />TEXT-ALIGN: center} <br /><br />#submenu li a { <br />DISPLAY: block; <br />PADDING:2px 3px 2px 3px; <br />BACKGROUND: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px; <br />FONT-WEIGHT: bold; <br />WIDTH: 100%; <br />COLOR: #444; <br />TEXT-DECORATION: none; <br />} <br /><br />#submenu li a:hover { <br />BACKGROUND: url(images/icon_dot_lmenu2.gif) #C61C18 no-repeat 2px 8px; <br />COLOR: #fff; } <br /><br />#submenu ul li#one A { WIDTH: 60px} <br />#submenu ul li#two A { WIDTH: 80px} <br />#submenu ul li#three A { WIDTH: 80px} <br />#submenu ul li#four A { WIDTH: 90px} <br />#submenu ul li#five A { WIDTH: 80px} <br />#submenu ul li#six A { WIDTH: 80px} <br />#submenu ul li#seven A { WIDTH: 60px} <br />#submenu ul li#eight A { WIDTH: 90px} <br />#submenu ul li#nine A { WIDTH: 80px} <br />以上代码不逐一分析了。横向菜单的关键在于：定义&lt;li&gt;样式时的&quot;FLOAT: left;&quot;语句。另外注意UL定义中的DISPLAY:inline;一句表示将li强制作为内联对象呈递，从对象中删除行，通俗讲就是li不换行。实现横向排列。你也可以象例子中定义每个子菜单的宽度，控制菜单的间隔。好了，你也可以动手试试，用li实现各种各样的菜单样式。<br />Tips:如果你子菜单的宽度总和大于层的宽度，菜单会自动折行，利用这个原理可以实现单个无序列表的2列或者3列排版，这是原来HTML很难实现的。

随风而去

第十二天：校验及常见错误<br /><br />辛苦了好多天，我们努力学习使用XHTML+CSS来重新设计我们的网站。那么我们如何知道自己制作的页面真的符合web标准？W3C和一些志愿者网站提供了在线校验程序，来帮助我们检查页面是否符合标准，并提供了修正错误的帮助信息。这些校验非常有用，是我调试页面第一步要做的事情。<br />1.XHTML校验<br />校验网址：<a href="http://validator.w3.org/" target="_blank">http://validator.w3.org/</a> <br />校验方式:网址校验、文件上传校验 <br />校验成功，会显示&quot;This Page Is Valid XHTML 1.0 Transitional!&quot;

随风而去

一般选择&quot;Show Source&quot;和&quot;Verbose Output&quot;可以帮助你找到错误代码所在行和错误原因。<br />XHTML校验常见错误原因对照表<br />No DOCTYPE Found! Falling Back to HTML 4.01 Transitional--未定义DOCTYPE。 <br />No Character Encoding Found! Falling back to UTF-8.--未定义语言编码。 <br />end tag for &quot;img&quot; omitted, but OMITTAG NO was specified--图片标签没有加&quot;/&quot;关闭。 <br />an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified--属性值必须加引号。 <br />element &quot;DIV&quot; undefined---DIV标签不能用大写，要改成小写div。 <br />required attribute &quot;alt&quot; not specified---图片需要加alt属性。 <br />required attribute &quot;type&quot; not specified---JS或者CSS调用的标签漏了type属性。 <br />其中最最常见的错误就是标签的大小写问题了。通常这些错误都是关联的，比如忘记了一个&lt;/li&gt;其他&lt;li&gt;标签都会报错，所以不要看到一堆的错误害怕，通常解决了一个错误，其他的错误也都没有了。如果你的页面通过XHTML1.0校验，可以在页面上放置这么一个图标：&nbsp;&nbsp;代码如下：<br />&lt;p&gt; &lt;a href=&quot;http://validator.w3.org/check/referer&quot;&gt;&lt;img src=&quot;http://www.w3.org/Icons/valid-xhtml10&quot; alt=&quot;Valid XHTML 1.0!&quot; height=&quot;31&quot; width=&quot;88&quot; /&gt;&lt;/a&gt; &lt;/p&gt; <br />2.CSS2校验<br />校验网址：<a href="http://jigsaw.w3.org/css-validator/" target="_blank">http://jigsaw.w3.org/css-validator/</a> <br />校验方式:网址校验、文件上传校验、直接贴入代码校验 <br />校验成功，会显示&quot;恭喜恭喜，此文档已经通过样式表校验! &quot;,hoho,校验信息支持中文噢。

随风而去

校验失败，会显示两类错误：错误和警告。错误表示一定要修正，否则无法通过校验；警告表示有代码不被W3C推荐,建议修改。<br />CSS2校验常见错误原因对照表<br />(错误)无效数字 : color909090 不是一个 color 值 : 909090 ---十六进制颜色值必须加&quot;#&quot;号，即#909090 <br />(错误)无效数字 : margin-topUnknown dimension : 6pixels ---pixels不是一个单位值，正确写法6px <br />(错误)属性 scrollbar-face-color 不存在 : #eeeeee --- 定义滚动条颜色是非标准的属性 <br />(错误)值 cursorhand不存在 : hand是非标准属性值，修改为cursor:pointer <br />(警告)Line : 0 font-family: 建议你指定一个种类族科作为最后的选择 --W3C建议字体定义的时候，最后以一个类别的字体结束，例如&quot;sans-serif&quot;，以保证在不同操作系统下，网页字体都能被显示。 <br />(警告)Line : 0 can't find the warning message for otherprofile --表示在代码中有非标准属性或值，校验程序无法判断和提供相应的警告信息。 <br />同样，通过检验后，可以放置一个CSS校验通过图标，代码如下：<br />&lt;p&gt; &lt;a href=&quot;http://jigsaw.w3.org/css-validator/&quot;&gt; &lt;img style=&quot;border:0;width:88px;height:31px&quot; src=&quot;http://jigsaw.w3.org/css-validator/images/vcss&quot; alt=&quot;Valid CSS!&quot; /&gt; &lt;/a&gt; &lt;/p&gt;

秋

好象不是你写的吧

ken27

不是阿捷写的么?

随风而去

不是我写的,是阿捷写的,整理了下,给需要的朋友

ken27

不错的东西,配图就更好了

悟空猫

好东西。要收起来。

小龍

蛮好的