推荐阅读
(6-9):制作网页翻转按钮
大家经常在一些网页中看到一种会随着鼠标的接触而变色的按钮，参见范例网页。这称之为鼠标翻转效果，这是根据英文rollover翻译而来的，其实不是很符合中文的语境。其原理是利用两张图片，平时显示一幅，当鼠标接触后换成另外一幅图片。如下图。这样看起来好像是鼠标接触的时候按钮变亮了。现在我们来动手制作，首先在Photoshop中将它们制作成图片，然后再做成网页。首先新建一个400×300的白底图像，新建一层，利用形状工具椭圆〖U/SHIFTU〗，在公共栏选择第3种绘图方式(填充像素)，调出信息调板〖F8〗观看数值，用任意颜色在新建层中间位置画一个直径40左右的正圆(按住SHIFT保持正圆)。如下左图。0614【窗口>样式】调出样式调板，点击右上角圆三角按钮，选择“替换样式”，在出来的样式列表目录中选择“Web翻转样式”，确认目前选择的是新建层，然后使用“选中状态的蓝色胶体按钮”样式。如下中图红色箭头处。大家也可以自己选择其他颜色的。0615将新建层与背景层合并，然后【图像>修整】，如下右图所示。确定操作后图像将被裁剪为和所画的圆同等大小。这个命令的作用是根据左上角第一个像素处，或右下角最后一个像素处的颜色，在我们这幅图像中这两个地方都是白色。然后就将画面中连续的白色部分裁剪掉。这就好像现实中打印图像之后将纸张的边缘裁剪掉一样。接着将背景图层复制一层，对复制出来的图层使用曲线工具，合并高光和暗调区域(高光点229,255；暗调点60,0)，形成加亮按钮的效果。如下左图。完成后我们得到两个图层，分别是暗色按钮的背景层，和亮色按钮的背景复制层。如果以上步骤无法完成，点此下载范例文件0616使用【文件>在ImageReady中编辑】〖CTRLSHIFTM〗，或点击工具栏最下方按钮，将会跳转到ImageReady中，这是Photoshop附带的一个软件，用来制作动画和网页。我们找到Web内容和图层两个调板，如下右图。后面的操作就是由这两个调板配合完成。 在完成以上5个步骤后，我们就可以开始制作鼠标翻转效果了。开始之前我们先简要介绍一下制作的原理。范例网页大家也看过，是随着鼠标的接触而发生的。这里涉及一种概念，叫事件和方法。我们的日常生活就是由许多事件和方法组成的，比如口渴是事件，喝水就是解决这个事件的方法。肚子饿是事件，吃东西就是方法。想学习是事件，看《大师之路》就是方法等等。这其实就是一种编程的思想，和人一样，电脑也是由事件和方法组成的一套逻辑系统。所以下面我们也要按照这种思路，去创建一个事件和解决方法。这个事件就是鼠标接触事件。平时鼠标不接触，我们只显示暗色按钮层(背景层)。而在鼠标接触的事件发生后，显示亮色按钮层(背景副本层)。
AutoCAD 2007 入门教程-CAD图形的输入输出
AutoCAD 2007 提供了图形输入与输出接口。不仅可以将其他应用程序中处理好的数据 传送给 AutoCAD ，以显示其图形，还可以将在 AutoCAD 中绘制好的图形打印出来，或者 把它们的信息传送给其他应用程序。此外，为适应互联网络的快速发展，使用户能够快速有效地共享设计信息， AutoCAD 2007 强化了其 Internet 功能，使其与互联网相关的操作更加方便、高效，可以 创建 Web 格式的文件 (DWF) ，以及发布 AutoCAD 图形文件到 Web 页。 AutoCAD 2007 除了可以打开和保存 DWG 格式的图形文件外，还可以导入或导出其他格式的图形。 导入图形 在 AutoCAD 2007 的 “ 插入点 ” 工具栏中，单击 “ 输入 ” 按钮将打开 “ 输入文件 ” 对话框。在其中的 “ 文件类型 ” 下拉列表框中可以看到，系统允许输入 “ 图元文件 ” 、 ACIS 及 3D Studio 图形格式的 文件。 在 AutoCAD 2007 的菜单命令中没有 “ 输入 ” 命令，但是可以使用 “ 插入 ” | 3D Studio 命令、 “ 插入 ” | “ ACIS 文件 ” 命令及 “ 插入 ” | “ Windows 图元文件 ” 命令，分别输入上述 3 种格式的图形文件。 插入 OLE 对象 选择 “ 插入 ” | “ OLE 对象 ” 命令，打开 “ 插入对象 ” 对话框，可以插入对象链接或者嵌入对象。 输出图形 选择 “ 文件 ” | “ 输出 ” 命令，打开 “ 输出数据 ” 对话框。可以在 “ 保存于 ” 下拉列表框中设置文件输出的路径，在 “ 文件 ” 文本框中输入文件名称，在 “ 文件类型 ” 下拉列表框中选择文件的输出类 型，如图元文件、 ACIS 、平板印刷、封装 PS 、 DXX 提取、位图、 3D Studio 及块等。
自己动手制作活动菜单条
用QQ聊过天的朋友都对它的自动隐藏窗口功能爱不释手，它可以使窗口显得清爽整洁而且富有动感，笔者的几个朋友都想在自己的网页中加入类似的东东，经过共同摸索发现用Dreamweaer 就可以实现这种效果，下面我们通过一个活动菜单条的制作来看看吧。 第1步：制作菜单外貌 在Dreamweaer 中新建一个文件，绘制一个层，在该层中插入一个表格（如图1），对该表格进行修饰，然后加入菜单项并建立各项的超链接，为了去掉超链接的下划线，可以编辑超链接的Css样式，在CSS样式面板中通过CSS选择器将“Link”和“Hover”的“Decoration（装饰）”均设置为“None（无）”，将“Hover”的“Color（颜色）”设置为红色，最后将设置好的样式应用到各个菜单条中（可按“F12”键预览效果）。 第2步：设计菜单的动态效果 1、选定层面，当鼠标变成“十”字形时按住左键将层面拖动到页面右上角（使整个菜单条完全露出但上边缘正好靠拢页面上边界），在窗口菜单中打开时间线面板，选定层面将其拖动到时间线上，Dreamweaer会自动产生一个长度为15帧的动画对象，拖动该动画对象的最后一个关键帧到第30帧，将其长度设置为30帧。然后在第15帧处单击右键，在弹出的快捷菜单中选择“添加关键帧”选项插入一个关键帧，并将层面拖动到适当位置（如图2）。
数码摄影10个技巧
以前一定听过这种话：数码相机(以下用DC)无所不能。你只要按下按钮，一张伟大的照片就会变魔术般展现在你面前。相机越好，照出来的照片越好。果真如此吗?见鬼，当然不是了! 事实是你可以用一个简单的消费级傻瓜DC拍出一张伟大的照片，也可以用最贵的DC拍出一张垃圾照片。漂亮的照片不是相机搞出来的，而是摄影师搞出来的。只要有一些拍摄方面的知识，再加上不断改进的愿望，你可以用你的小DC拍出能登上时代周刊的大照片。 为了帮助你在成为伟大摄影师的道路上快步前行，这里送给你10个技巧，它们会让你即使不花大价钱买昂贵的设备也能像专业人士一样拍照。 1.暖化你的照片 你注意过有些时候你拍的照片有一种冷冷的感觉吗?如果答案是肯定的，那你并不是孤独呵呵。DC的默认白平衡设置是“自动(auto)”，虽然在大部分情况下都是适用的，但有时候却会让景物太“冷”了。 当你拍户外景物的时候，特别是当阳光充足时，试着把你的白平衡调到“多云(cloudy)”那一档。对，就是“多云”那一档，这个变化跟在你的镜头前加一个暖色滤镜的效果是一样的。它使得照片中红色和黄色的更加丰满，从而暖化了这张照片 图1a是在一个山区拍摄的，白平衡设置在“自动(auto)” 图1b 同一个场景，我把白平衡换成了“多云(cloudy)”，同时把一副Costa Del Mar太阳镜放在了镜头前(佳能PowerShot S200,程序模式program mode) 如果你不相信我，那就试试吧。在户外分别用自动白平衡和多云白平衡拍两组照片，然后在你的电脑上对比着看，我猜你一定会喜欢看上去暖洋洋的那一组的 2.用太阳镜做偏振镜
最新发布
HTML5中的新事件
HTML 元素可拥有事件属性，这些属性在浏览器中触发行为，比如当用户单击一个 HTML 元素时启动一段 JavaScript。下面列出的事件属性，可以把它们插入 HTML 标签来定义事件行为。HTML 5 中的新事件：onabort, onbeforeunload, oncontextmenu, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onmessage, onmousewheel, onresize, onscroll, onunload。不再支持的 HTML 4.01 属性：onreset。
HTML代码学习:DOCTYPE的缩写
写HTML代码的时候，第一行就要写DOCTYPE，而DOCTYPE一般都很长，大家也懒得去记，所以基本都是直接去复制以前写过的。不过今天了解到一种 DOCTYPE 的缩写，如果你的 DOCTYPE 是下面这样的话：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">可以用下面的缩写来代替：<!DOCTYPE HTML> 简单，好记，这样以后就不需要去复制了。BTW，我想举一反三试一下 <!DOCTYPE XHTML> ，结果失败，页面成了“混杂模式”，大家有什么其他的技巧欢迎提供。
网页设计潮流之2009:路在何方?
大图片、大标题、素描/涂鸦、大自然和滑动。当然也有一些其它的“潮流”，不过我认为这些元素在现在的网页设计中使用的最多，并且在明年也会同样被推崇。本文中，我整理了一些前面提到的5种类型的网站。
制作商业HTML邮件的建议
通过基于许可的电子邮件营销，不仅可以大大的降低营销和推广的成本，更能够直接地、准确地把信息传递到客户手中。今天我研究的问题是，如何从技术方面入手，制作一个优秀，且同时兼容用户视觉和邮件客户端的电子邮件。1.选择HTML还是文本(Plain Text)有人喜欢简单的文本，有人喜欢看丰富的HTML，我们怎么选择？对于营销型的邮件，建议使用HTML格式来制作(图)；而对于确认/提醒/告知型邮件，建议使用文本或者简单的HTML来制作(图)。为什么针对这两种不同类型的邮件，采用不同的制作方式，这基于这些原因：营销型邮件的内容丰富性、多样性；确认型邮件的内容单一性，独特性；在营销型邮件中，客户会更注重内容的丰富性和视觉效果的美观性；在确认型邮件中，我们要让客户非常直接的看到确认信息，复杂的内容和视觉效果只会让客户忽略了邮件的主要内容——即确认信息；(下文将对营销型邮件的HTML制作做重点讨论)2.基于表格布局+CSS的HTML基本功功夫分两种，一种至阳至刚，另一种则至阴至柔，张三丰之所以登峰造极，因为其武功底子好，少林基本功扎实，才悟出这道即能至阴，又能至阳的太极拳。HTML的邮件也是如此，我们知道，当今邮件阅读客户端有很多种，传统的Outlook，Thunderbird，Lotus Notes，以及在线的Mac Mail，Gmail，Hotmail等，对邮件的解释都会不同，大多数在线邮件系统会屏蔽掉<head></head>标签之 间的代码。要让所有用不同客户端的用户看到的邮件相同，这就要非常好的掌握好HTML的基本功。有人说DIV+CSS，有人说是SEO标签语义化，不可否认作 为一个网页开发人员，能有这两种时下流行的HTML开发思想会很吃香，但是，这并不适用于邮件制作。我们的目的是让客户在不同邮件客户端下看到相同的信息 内容，这就用到一个最原始的排版方式：表格布局+CSS。让我们看下时下邮件客户端对HTML和CSS的支持(图)：*Hotmail能解析<body></body>间的<style>，但同样屏蔽<head></head>间的<style>3.做HTML邮件时，就要着重注意以下几点： 4.邮件的宽度，650px?还是600px?我们都知道，时下网页的宽度标准是950/960px，这取决于我们的显示器分辨率；而电子邮件经常是通过两种途径打开，软件客户端和在线客户端，这两种邮件客户端(图)。*Microsoft Outlook 2003*网易163邮箱
连续滚动的超级链接文字网页代码
向上滚动<div id=”marquees”><a href=”#”>破洛洛一</a><br><br><a href=”#”>破洛洛二</a><br><br><a href=”#”>破洛洛三</a><br><br><a href=”#”>破洛洛四</a><br></div><script language=”JavaScript”>marqueesHeight=200;stopscroll=false;with(marquees){style.width=0;style.height=marqueesHeight;style.overflowX=”visible”;style.overflowY=”hidden”;noWrap=true;onmouseover=new Function(”stopscroll=true”);onmouseout=new Function(”stopscroll=false”);}document.write(’<div id=”templayer” style=”position:absolute;z-index:1;visibility:hidden”></div>’);preTop=0; currentTop=0; function init(){templayer.innerHTML=””;while(templayer.offsetHeight<marqueesHeight){templayer.innerHTML+=marquees.innerHTML;}marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;setInterval(”scrollUp()”,10);}document.body.onload=init;function scrollUp(){if(stopscroll==true) return;preTop=marquees.scrollTop;marquees.scrollTop+=1;if(preTop==marquees.scrollTop){marquees.scrollTop=templayer.offsetHeight-marqueesHeight;marquees.scrollTop+=1;}}</script>向下滚动<div id=”marquees”> <a href=”#”>破洛洛一</a><br><br><a href=”#”>破洛洛二</a><br><br><a href=”#”>破洛洛三</a><br><br><a href=”#”>破洛洛四</a><br><br></div><script language=”JavaScript”>
网站建设过程中常见的5个HTML错误
网站建设过程中常见的5个HTML错误 1.网页背景色的设置 犯错机率：很大 普遍性：较广 犯错可能性：懒/不知道 约2年前我曾发现21cn上出现过一次没有设置背景色的情况，当时我用Email通知了他们，自此之后这个问题我从没犯过。 绝大部分人的窗口背景颜色都是白色，但如果象我这样个性的人，就会把windows窗口的背景颜色改成灰色或其他色，这样一来，如果你没有设置网页的背景颜色的话，你以为正常的网页在我的电脑上看起来会是一团糟。 2.Align center（自动居中）的滥用 犯错机率：非常大 普遍性：非常广 犯错可能性：以为方便/以为好用 工作中，修改、维护别人的网页是家常便饭，发现不少人有一个陋习： 在表格中的文字或图片，你是这样来令它居中、靠左或靠右过？ 〈div align="center">大家好啊！！〈/div> 〈div align="center">〈img src="/xx.gif">〈/div> 当有些表格很多、文字很多、内容分得很细的时候，爱用这种方法（它在DW里的快捷键是Ctrl+Alt+C，FP不知道是什么）的人往往会狂用，惨了，我一碰到这样的网页就头痛，为什么要用那么多〈div>来居中呢？tell me why？难道表格没有居中属性吗？为什么要加入这些垃圾代码？特别修改的时候也不能把文字或图片删除了就能自动清除 建议使用〈td align="center">来居中，当需要多重定位的时候，才考虑〈div align="center">，因为这个代码并不好处理，所以能用表格代替就用表格替代。 3.重复使用实现相同功能的代码、或杂七杂八的乱套代码 犯错机率：非常普遍 普遍性：非常普遍 犯错可能性：复杂多样 大家先来看一看下面的代码： 〈center>〈p>〈font >〈font >〈font color="#CCCCCC">〈font color="#FFA76C" style="font-size:14px;font-family:隶书">标 题〈/font>〈/font>〈/font> 〈/center>你觉得这样的代码看起来感觉怎么样呢？〈/font>〈/p> 我不知道读者有什么感觉，压根我一看到这样的代码就会先自我麻木十来秒，这十来秒目的是为了找一个能表达我的思想感情的词（我？你想反问我吗？sorry~~，我一般不犯，因为我做网页至少有一半以上的时间在浏览代码，代码中多了不该多的东西我一眼就能看出来。）。 看看上面的代码，使用了2个class，4个font来定义2个文本，其实这样的问题很多时候是在大家不断的修改中产生的，对代码不熟、或懒查看代码、又或不喜欢查看代码的人犯这些问题特别严重，当然，事实上别人浏览这个网页的时候，是没有任何问题的，但维护的人就…………。 这些多余的垃圾代码完全是可以省略掉的，其实上面的例子不够严重，更恐怖的我都见过。 另外还有一个问题也要提提的，就是〈p>...〈/p>和〈center>...〈/center>，为什么要用它们呢？tell me why~~，有甚者是这样的： 〈td>〈div align="center" > 〈center> 〈p align="center">〈/p> 〈p align="center">〈font >〈font >〈font color="#CCCCCC">〈font color="#FFA76C" style="font-size:14px;font-family:隶书">标 题〈/font>〈/font>〈/font> 〈/center>〈/td>你觉得这样的代码看起来感觉怎么样呢？〈/font>〈/p>〈/center>〈/div>〈/td> 看到这样的代码我是会很无奈的（更无奈的是我经常看到，而且必须看），我来简化一下： 〈td align="center" > 〈font color="#FFA76C" style="font-size:14px;font-family:隶书">标题〈/font> 你觉得这样的代码看起来感觉怎么样呢？〈/td> 是不是看起来觉得这个世界安静了很多？"标题"后面的文字完成可以定义在〈td>的class里，就算不用css，再用多一个〈.font>也没问题，一样很清爽。 4.表格不正确嵌套 犯错机率：一般 普遍性：普遍 犯错可能性：对这个不了解 其实这是一个街知巷闻的问题了，但还是不断有人犯，不正确的嵌套表格，可能会令到你被老总叫到办公室里臭骂一顿，会令到你以为正常的网页用ADSL开2、3分钟都开不了。 先讲第一个问题，就是在一个大表格里不断地嵌套表格，这样会令到打开网页的速度变慢（虽然说现在的IE改善了这一问题，但还是不建议这样做），另一方面维护、修改也极不方便，一般来说简单的套用是没有问题的，甚至3、4层，但是不要把所有内容都放到一个表格里去。 第二个问题就是在一个大表格里放入所有内容，而其中包括一个免费的计数器代码，嘻嘻，你猜有可能出现什么情况呢？其实也没什么大不了的，最严重的就是你的IE象死机了一样，什么都没显示。解决方法就是把计数器单独放在一个表格里，别和其他内容一起放在同一表格。 5.写代码缩进的时候，不是使用Tab而是使用空格 犯错机率：一般 普遍性：较少 犯错可能性：不知道Tab更好用 这一个问题针对js、vbs、asp、php之类，html不能使用Tab会写一点程序的都知道什么叫缩进，怎么样缩进？有人使用空格，有人使用Tab，如果你是使用空格的，那么从现在起，改用Tab吧。
图片IMG标记的alt属性和title属性
正确的使用alt text属性和title属性不仅可以提高图片的搜索能力，对用户体验上也是很有帮助。替换文字（alt text）是为了给那些不能看到你文档中图像的浏览者提供文字说明。这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户。所以替换文字是用来替代图像而不是提供额外说明文字的。Alt text在IE浏览器中还起到了title的作用——鼠标经过时的文字提示。IE浏览器给了大家一个误导，在IE中ALT会变成文字提示是因为IE不标准。这一点Firefox做的就比较好。title是对图片的说明和额外补充，如果需要在鼠标经过图片时出现文字提示应该用属性title。title属性的优先级高于alt text。但由于错误的引导，很多初学者就在img标签内只加了alt属性。下面看个例子，我们可以更清楚的看清alt text和 title之间的区别： //*图片不显示<img src="poluoluo.jpg" width="400" height="104"alt="破洛洛"> <img src="poluoluo.jpg" width="239" height="104" title="破洛洛" />//*图片显示<img src="poluoluo.png" title="破洛洛" /><img src="poluoluo.png" alt="破洛洛" /> 在IE浏览器中，这四句代码，鼠标经过图片时，都会出现文字提示。而在Firefox浏览器中，前三句代码，鼠标经过图片时，都会出现文字提示，最后一句代码，鼠标经过图片不会显示文字提示（如下图所示）。也就是说当图片不能显示时，鼠标经过图片时会显示替换文字的内容，而当图片可以显示时，鼠标经过图片时，替换文字就不会显示出来了。现在我们已经知道alt text和title有什么不同了，那么我们怎样才能正确使用它们呢？1. alt text和title对访问者都很重要（alt text对搜索引擎会更重要一些），所以在定义img对象时，最好将alt text和title属性都写全，保证在各种浏览器中都能正常使用。
介绍几个不常用的HTML标签
介绍几个不常用的HTML标签 在HTML王国里，这里有很多子民，通常我们看到的是一些熟悉的面孔，而对于那些不熟悉的面孔你又了解多少呢，你知道它们的用法吗？0、<!DOCTYPE> 标签<!DOCTYPE> 标签出现在HTML文档第一行上的信息，说明该文档的类型，是一个“标准概括化置标语言（SGML）”声明，不是元素。语法：<!DOCTYPE>例子：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.0//EN"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">1、<abbr>标签一个词或短语的简称（如“HTML”）。通常同时使用title属性来指出原词或原短语。简称不一定是缩写，但缩写同时也是简称。注：Internet Explorer还不支持abbr。<abbr>标记是用来标注一个缩写的，例子：<abbr title="Hyper Text Marked Language">HTML</abbr><abbr title="Cascading Style Sheets">CSS</abbr><abbr title="Document Object Model">DOM</abbr>对于单纯浏览没什么用，但是如果想要文本能被搜索，就可以用到。注意：此元素只能放置在body中，而且使用在文字的行内。2、<acronym>标签<acronym>元素允许作者清楚地标识一个组成缩略语的字符序列(如: "WWW", "FNAC", "IRS", 等等). 标识缩略语的能力对于拼写检查, 语音系统, 其它的用户代理器工具来说是有用的。语法：<ACRONYMTITLE=text LANG=language LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS CLASS=Style Sheet class nameSTYLE=stylingID=valueevent = script>例子：<ACRONYM TITLE="Federal Bureau of Investigation">FBI</ACRONYM>3、BASE 元素BASE 元素指定一个显式 URL 用于解析对于外部源的链接和引用，如图像和样式表。当使用时，BASE 元素必须出现在文档的 HEAD 内，在任何对外部源的引用之前。此元素在 Microsoft® Internet Explorer 3.0 的 HTML 中可用，在 Internet Explorer 4.0 的脚本中可用。此元素不会被渲染。此元素不需要关闭标签。4、<APPLET>标签描述：引入一个JAVA APPLET。语法：<APPLETALIGN=alignmentALT=alternate TextARCHIVE=compressed file CLASS=Style Sheet class nameCODE=appletFileCODEBASE=urlDATAFLD=colnameDATASRC=Data SourceHEIGHT=n pixelsHSPACE=n pixelsID=valueNAME=nameSRC=urlSTYLE=stylingTITLE=textVSPACE=n pixelsWIDTH=n pixelsevent = script>例子：<applet code="coolnav.class" align="baseline" width="168" height="313"><param name="Notice" value="CoolMenu2.5,CopyRight (c) 1999 SourceTec Software Co. Ltd, Registered"><param name="ApStyle" value="004080,ff8c8c,,1,0,0,,13,5,004080,1,Loading image ...">...</applet> 5、<CAPTION>标签<CAPTION>标签用于显示表格标题，作用是为表格标示一个标题列，有如在表格上方加上一没格线的打通列。 当然亦可置于下方，通常用以存放该表格的标题。
HTML结构化：DIV＋CSS网页布局入门指南
当你解决了第一种问题，知道了如何结构化你的HTML，我再给出一个列表，详细列出原来的表现属性用什么CSS来代替。 结构化HTML 我们在刚学习网页制作时，总是先考虑怎么设计，考虑那些图片、字体、颜色、以及布局方案。然后我们用Photoshop或者Fireworks画出来、切割成小图。最后再通过编辑HTML将所有设计还原表现在页面上。 如果你希望你的HTML页面用CSS布局(是CSS-friendly的)，你需要回头重来，先不考虑“外观”，要先思考你的页面内容的语义和结构。 外观并不是最重要的。一个结构良好的HTML页面可以以任何外观表现出来，CSS Zen Garden是一个典型的例子。CSS Zen Garden帮助我们最终认识到CSS的强大力量。 HTML不仅仅只在电脑屏幕上阅读。你用photoshop精心设计的画面可能不能显示在PDA、移动电话和屏幕阅读机上。但是一个结构良好的HTML页面可以通过CSS的不同定义，显示在任何地方，任何网络设备上。 开始思考 首先要学习什么是"结构"，一些作家也称之为"语义"。这个术语的意思是你需要分析你的内容块，以及每块内容服务的目的，然后再根据这些内容目的建立起相应的HTML结构。 如果你坐下来仔细分析和规划你的页面结构，你可能得到类似这样的几块： 标志和站点名称 主页面内容 站点导航(主菜单) 子菜单 搜索框 功能区(例如购物车、收银台) 页脚(版权和有关法律声明) 我们通常采用DIV元素来将这些结构定义出来，类似这样： ＜div id="header"＞＜/div＞ ＜div id="content"＞＜/div＞ ＜div id="globalnav"＞＜/div＞ ＜div id="subnav"＞＜/div＞ ＜div id="search"＞＜/div＞ ＜div id="shop"＞＜/div＞ ＜div id="footer"＞＜/div＞ 这不是布局，是结构。这是一个对内容块的语义说明。当你理解了你的结构，就可以加对应的ID在DIV上。DIV容器中可以包含任何内容块，也可以嵌套另一个DIV。内容块可以包含任意的HTML元素---标题、段落、图片、表格、列表等等。 根据上面讲述的，你已经知道如何结构化HTML，现在你可以进行布局和样式定义了。每一个内容块都可以放在页面上任何地方，再指定这个块的颜色、字体、边框、背景以及对齐属性等等。 使用选择器是件美妙的事 id的名称是控制某一内容块的手段,通过给这个内容块套上DIV并加上唯一的id,你就可以用CSS选择器来精确定义每一个页面元素的外观表现,包括标 题、列表、图片、链接或者段落等等。例如你为#header写一个CSS规则，就可以完全不同于#content里的图片规则。 另外一个例子是：你可以通过不同规则来定义不同内容块里的链接样式。类似这样：#globalnav a:link或者 #subnav a:link或者#content a:link。你也可以定义不同内容块中相同元素的样式不一样。例如，通过#content p和#footer p分别定义#content和#footer中p的样式。从结构上讲，你的页面是由图片、链接、列表、段落等组成的，这些元素本身并不会对显示在什么网络 设备中(PDA还是手机或者网络电视)有影响，它们可以被定义为任何的表现外观。 一个仔细结构化的HTML页面非常简单，每一个元素都被用于结构目的。当你想缩进一个段落，不需要使用blockquote标签，只要使用p标签，并对p 加一个CSS的margin规则就可以实现缩进目的。p是结构化标签，margin是表现属性，前者属于HTML，后者属于CSS。(这就是结构于表现的 相分离.) 良好结构的HTML页面内几乎没有表现属性的标签。代码非常干净简洁。例如，原先的代码＜table width="80%" cellpadding="3" border="2" align="left"＞，现在可以只在HTML中写＜table＞，所有控制表现的东西都写到CSS中去，在结构化的HTML中， table就是表格，而不是其他什么(比如被用来布局和定位)。亲自实践一下结构化 上面说的只是最基本的结构，实际应用中，你可以根据需要来调整内容块。常常会出现DIV嵌套的情况，你会看到"container"层中又有其它层，结构类似这样： ＜div id="navcontainer"＞ ＜div id="globalnav"＞ ＜ul＞a list＜/ul＞ ＜/div＞ ＜div id="subnav"＞ ＜ul＞another list＜/ul＞ ＜/div＞ ＜/div＞ 嵌套的div元素允许你定义更多的CSS规则来控制表现，例如：你可以给#navcontainer一个规则让列表居右，再给#globalnav一个规则让列表居左，而给#subnav的list另一个完全不同的表现。
HTML初级指南〉标签属性和元素
尽管HTML的基础是纯文本，但我们还是需要多一些东西才能使纯文本文件变成合法的HTML文件。 标签 HTML基本的构成包含标签，标签围绕着内容，赋予内容某些意义。 按照下面改进你的文件： 保存文件，回到浏览器界面和选择“刷新”（这会重新装载网页）。 网页的外观没有任何改变，HTML的目的是表达内容，而不是表达表现，这个例子现在已经定义了网页一定的基本元素。 第一行以<!DOCTYPE..开始是为了让浏览器知道你到底要做什么。你可能还不知道自己在做什么，但接受它很重要。如果你不这样做，浏览器将用“quirks”（奇怪的）模式来表现你的网页。现在还不必担心，当然你需要了解或者学习的话可以看看 HTML高级教成的 进一步学习“文档类型”。当前，只需要记住把这一行放在文件的顶端就可以了。 言归正传，<html>是隔开其他内容的起始标签，它告诉浏览器，位于自己与闭合标签</html>之间的就是是HTML文档。在<body>和</body>之间的是这个文档展示在浏览器上的主要内容。 闭合标签 </body>和</html>关闭他们各自的标签。所有的HTML标签都要关闭。尽管老版本的HTML允许某些标签不关闭，但最新的标准要求所有的标签都要关闭。无论如何，闭合标签是一个好习惯。