当前位置：
|
主题：网页设计DIV+CSS--12天速成教材(之一) [收藏主题]  |
转到： |
 第一天开始制作符合标准的站点，第一件事情就是声明符合自己需要的DOCTYPE。 查看本站首页原代码，可以看到第一行就是： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">打开一些符合标准的站点，例如著名web设计软件开发商Macromedia，设计大师Zeldman的个人网站，会发现同样的代码。而另一些符合标准的站点(例如k10k.net)的代码则如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 那么这些代码有什么含义？一定要放置吗？ 什么是DOCTYPE上面这些代码我们称做DOCTYPE声明。DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。 其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义的DTD来解释你页面的标识，并展现出来。 要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定了一个正确的DOCTYPE，否则你的标识和CSS都不会生效。 XHTML 1.0 提供了三种DTD声明可供选择：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 我们选择什么样的DOCTYPE理想情况当然是严格的DTD，但对于我们大多数刚接触web标准的设计师来说，过渡的DTD(XHTML 1.0 Transitional)是目前理想选择(包括本站，使用的也是过渡型DTD)。因为这种DTD还允许我们使用表现层的标识、元素和属性，也比较容易通过W3C的代码校验。 注：上面说的"表现层的标识、属性"是指那些纯粹用来控制表现的tag，例如用于排版的表格、背景颜色标识等。在XHTML中标识是用来表示结构的，而不是用来实现表现形式，我们过渡的目的是最终实现数据和表现相分离。 打个比方：人体模特换衣服。模特就好比数据，衣服则是表现形式，模特和衣服是分离的，这样你就可以随意换衣服。而原来HTML4中，数据和表现是混杂在一起的，要一次性换个表现形式非常困难。呵呵，有点抽象了，这个概念需要我们在应用过程中逐步领会。 补充DOCTYPE声明必须放在每一个XHTML文档最顶部，在所有代码和标识之上。 [此贴子已经被作者于2006-11-30 2:33:13编辑过] |
|
 支持(0) |  反对(0)
 顶端  底部
|
![电子邮件:[ iasd@asdasd.com ]](http://bbs.kesion.com/club/images/email.gif){kind=small}
|
支持(0) | 反对(0)
顶端 底部
|
|
支持(0) | 反对(0)
顶端 底部
|
|
支持(0) | 反对(0)
顶端 底部
|
|
支持(0) | 反对(0)
顶端 底部
|
|
支持(0) | 反对(0)
顶端 底部
|
|
支持(0) | 反对(0)
顶端 底部
|
|
支持(0) | 反对(0)
顶端 底部
|
 第6天:XHTML代码规范 在开始正式内容制作之前，我们必须先了解一下web标准有关代码的规范。了解这些规范可以帮助你少走弯路,尽快通过代码校验。 1.所有的标记都必须要有一个相应的结束标记以前在HTML中，你可以打开许多标签，例如<p>和<li>而不一定写对应的</p>和</li>来关闭它们。但在XHTML中这是不合法的。XHTML要求有严谨的结构，所有标签必须关闭。如果是单独不成对的标签，在标签最后加一个"/"来关闭它。例如: <br /><img height="80" alt="网页设计师" src="../images/logo_w3cn_200x80.gif" width="200" /> 2.所有标签的元素和属性的名字都必须使用小写与HTML不一样，XHTML对大小写是敏感的，<title>和<TITLE>是不同的标签。XHTML要求所有的标签和属性的名字都必须使用小写。例如：<BODY>必须写成<body> 。大小写夹杂也是不被认可的，通常dreamweaver自动生成的属性名字"onMouseOver"也必须修改成"onmouseover"。 3.所有的XML标记都必须合理嵌套同样因为XHTML要求有严谨的结构，因此所有的嵌套都必须按顺序，以前我们这样写的代码： <p><b></p>/b> 必须修改为： <p><b></b>/p> 就是说，一层一层的嵌套必须是严格对称。 4.所有的属性必须用引号""括起来在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号。例如: <height=80> 必须修改为： <height="80"> 特殊情况，你需要在属性值里使用双引号，你可以用"，单引号可以使用'，例如： <alt="say'hello'"> 5.把所有<和&特殊符号用编码表示
注：以上字符之间无空格。 6.给所有属性赋一个值XHTML规定所有属性都必须有一个值，没有值的就重复本身。例如： <td nowrap> <input type="checkbox" name="shirt" value="medium" checked> 必须修改为： <td nowrap="nowrap"> <input type="checkbox" name="shirt" value="medium" checked="checked"> 7.不要在注释内容中使“--”“--”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们不再有效。例如下面的代码是无效的: <!--这里是注释-----------这里是注释--> 用等号或者空格替换内部的虚线。 <!--这里是注释============这里是注释--> 以上这些规范有的看上去比较奇怪，但这一切都是为了使我们的代码有一个统一、唯一的标准，便于以后的数据再利用。 |
|
|
支持(0) | 反对(0)
顶端 底部
|
 第5天:head区的其他设置 这些技巧主要讲meta标签设置的，其实与符合web标准关系不大，只要注意在最后加"/"关闭标签就可以，但是既然是入门教程，就写得详细一点吧。 收藏夹小图标如果你将本站加入收藏夹，可以看到在收藏夹网址之前的IE图标变成了本站特别的图标。要实现这样效果很简单，首先制作一个16x16的icon图标，命名为favicon.ico，放在根目录下。然后将下面的代码嵌入head区： <link rel="icon" href="/favicon.ico" type="image/x-icon" /> 为搜索引擎准备的内容代码如下，替换成你自己站点的内容就可以：
<meta content="all" name="robots" />
<meta name="author" content="ajie@netease.com,阿捷" />
<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" /> 先介绍这么多。补充说明，前面花了5节都是讲head区的代码，实际页面内容还一字未提，呵呵，不要急，其实head区是非常重要的，看一个页面的head的代码就可以知道设计师是否够专业。 |
|
|
支持(0) | 反对(0)
顶端 底部
|
| ＜上一主题 | 下一主题 ＞ |