来谈谈：接纳XHTML和CSS计划可重用可换肤网页

WHATWG版和W3C版的HTML5规范虽然根源相同，在一些领域却已经产生分歧。　跟着XHTML的渐渐推行盛行，HTML在很多场所已显得过期。WorldWideWebConsortium(W3C)于2000年6月26日公布了XHTML的第一个版本作为保举尺度。XHTML尺度的方针是代替html。依照W3C的说法，“XHTML是html的承继者”(http://www.w3.org/MarkUp/)。　　XHTML具有两年夜方针:

• 在文档布局和暗示情势之间创立更分明的分别。
  
• 将html从头暗示为XML的使用程序。
  

　　利用XHTML尺度的优点是:只需计划页面一次，便可让该页以完整不异的体例在任何古代的扫瞄器中显现和事情。比方，在依照尺度天生今后，页面在InternetExplorer、MozillaFirefox、NetscapeNavigator、Opera、Camino和Safari)中以不异的体例显现，而无需完成任何分外的事情。而且XHTML尺度可使Web站点更容易于为智妙手机、残疾人电脑等设备会见。
　　因为XHTML尺度请求在在文档布局和暗示情势之间创立更分明的分别。因而利用CSS款式表是必不成少的。CSS在网页中占着极主要的位置，它的利用一向是抢手会商的话题。CSS是CascadingStyleSheet的简写，译为“层叠款式表单”。在1997年W3C公布HTML4尺度的同时也发布了有关款式表的第一个尺度CSS1,自CSS1的版本以后，又在1998年5月公布了CSS2版本。
　　CSS的创造者的目标是撤除暗示性元素，即应当依据内容所暗示的器材来标志内容，而款式表应当用于丑化内容。而这一点与XHTML分别文档布局和暗示情势的方针是分歧，(在XHTML2.0将撤除b、i和img标志(和big、small和tt)，乃至不同意利用br，筹办从未来的刊行版中撤除它。缘故原由在于年夜多半标志都是暗示性的。它们的独一目标就是赐与扫瞄器指令，划定有关其内容应当怎样显现，但却完整未供应有关其内容是甚么的信息。)因而它们成了最好的互助同伴。更多关于XHTML2.0的材料，请拜见:http://www-128.ibm.com/developerworks/cn/xml/x-wa-xhtml/index.html
　　CSS已往常常被用来界说字体的属性，而如今新尺度中我们将用它来把持全部页面的显现。但是，我们必需必要做一些分歧于以往的处置来顺应这类新的变更，如:利用div来结构而不是表格，利用布局化、语义化的标志等等。因为接纳新的处置体例，我们如今能够轻松地计划出可重用的CSS(统一个款式文件多个WEB站点中利用)和可换肤的WEB站点(一个站点利用多种分歧作风的款式)。

　　跟着XHTML的渐渐推行盛行，HTML在很多场所已显得过期。WorldWideWebConsortium(W3C)于2000年6月26日公布了XHTML的第一个版本作为保举尺度。XHTML尺度的方针是代替html。依照W3C的说法，“XHTML是html的承继者”(http://www.w3.org/MarkUp/)。
　　XHTML具有两年夜方针:

• 在文档布局和暗示情势之间创立更分明的分别。
  
• 将html从头暗示为XML的使用程序。
  

　　利用XHTML尺度的优点是:只需计划页面一次，便可让该页以完整不异的体例在任何古代的扫瞄器中显现和事情。比方，在依照尺度天生今后，页面在InternetExplorer、MozillaFirefox、NetscapeNavigator、Opera、Camino和Safari)中以不异的体例显现，而无需完成任何分外的事情。而且XHTML尺度可使Web站点更容易于为智妙手机、残疾人电脑等设备会见。
　　因为XHTML尺度请求在在文档布局和暗示情势之间创立更分明的分别。因而利用CSS款式表是必不成少的。CSS在网页中占着极主要的位置，它的利用一向是抢手会商的话题。CSS是CascadingStyleSheet的简写，译为“层叠款式表单”。在1997年W3C公布HTML4尺度的同时也发布了有关款式表的第一个尺度CSS1,自CSS1的版本以后，又在1998年5月公布了CSS2版本。
　　CSS的创造者的目标是撤除暗示性元素，即应当依据内容所暗示的器材来标志内容，而款式表应当用于丑化内容。而这一点与XHTML分别文档布局和暗示情势的方针是分歧，(在XHTML2.0将撤除b、i和img标志(和big、small和tt)，乃至不同意利用br，筹办从未来的刊行版中撤除它。缘故原由在于年夜多半标志都是暗示性的。它们的独一目标就是赐与扫瞄器指令，划定有关其内容应当怎样显现，但却完整未供应有关其内容是甚么的信息。)因而它们成了最好的互助同伴。更多关于XHTML2.0的材料，请拜见:http://www-128.ibm.com/developerworks/cn/xml/x-wa-xhtml/index.html
　　CSS已往常常被用来界说字体的属性，而如今新尺度中我们将用它来把持全部页面的显现。但是，我们必需必要做一些分歧于以往的处置来顺应这类新的变更，如:利用div来结构而不是表格，利用布局化、语义化的标志等等。因为接纳新的处置体例，我们如今能够轻松地计划出可重用的CSS(统一个款式文件多个WEB站点中利用)和可换肤的WEB站点(一个站点利用多种分歧作风的款式)。

　/*文中的款式表语法中的"("及")"为示例所用,由于blog每次保留花括号都呈现毛病。请在利用时改成准确的标记*/
　　BODY
　　(
　　background:url(images/bg_page.jpg);
　　font:10ptverdana,arial,;
　　margin-top:0px;
　　margin-left:0px;
　　margin-right:0px;
　　margin-bottom:0px;
　　)
　　H1,H2,H3,H4,H5,H6
　　(
　　border-bottom:solid1px#ccc;
　　margin:1em0;
　　)
　　TD
　　(
　　font:10pt;
　　)
　　A:link
　　(
　　color:#057AE0;
　　text-decoration:none;
　　)
　　A:visited
　　(
　　color:#057AE0;
　　text-decoration:none;
　　)
　　A:hover
　　(
　　color:#009900;
　　)
　　A:active
　　(
　　color:#009900;
　　)
　　如许的一个款式文件，能够合用于任何一个网页，只需增加援用我们都能够立即瞥见效果。
　　因为款式表的承继划定规矩是内部的标签款式会保存上去承继给这个标签所包括的其他标签。现实上，一切在标签中嵌套的标签城市承继外层标签指定的属性值，偶然会把良多层标签的款式叠加在一同，比方在body标签中界说了字体巨细，那末div、p等标签也会承继一样的字体巨细，假如在P标签中又界说了字体色彩，那末P标签中的笔墨既具有body标签的字体巨细又有P标签的字体色彩。必要注重的是，table标签不会承继body的字体巨细设定，以是在下面的款式表中，我们独自来界说td的款式。

　　3、界说好页面的布局结构
　　良多时分，我们在制造网页时老是从视觉动身，先用Photoshop大概Fireworks画出来、思索页面的配色，做一些很炫的效果，很优美的图片，再切割成小图。然后经由过程编纂HTML将一切计划酿成页面。
　　但是，有视觉的缺点的人，不克不及了解这些色彩大概效果。PDA、挪动德律风和屏幕浏览机上也没法剖析这些效果。
　　因而表面并非最主要的。一个布局优秀的XHTML能够经由过程CSS的分歧界说，显现成任何表面，显现在任何撑持XHTML的收集设备上。
　　经由过程剖析我们能够发明，关于年夜多半WEB网站来讲，页面都是由一些相似的内容区块所构成，如:

• 站点题目区
  
• 站点导航(主菜单，次及菜单)
  
• 功效区(比方搜刮框、用户上岸区)
  
• 内容区(文章注释大概文章、产物列表)
  
• 页脚(版权和有关功令声明)
  

　　然后我们用DIV标签来将这些区块包括起来，相似如许:
<divclass="pageHeader">站点题目
</div>
<divclass="pageNav">站点导航
</div>
<divclass="catalogNav">栏目导航
</div>
<divclass="pageContent">文章注释或列表等等
</div>
<divclass="pageSearch">查询
</div>
<divclass="pageBottom">页脚
</div>
　　经由过程CSS的界说，我们能够将这些DIV标签包括的区块放在页面上任何地位，再指定这些块的色彩、字体、边框、背景和对齐属性等等。如:我们再创建siteLayout.css文件，界说以下:
.pageHeader
　　(
　　padding:10px;
　　border:1pxsolid#666;
　　height:100px;
　　height:70px;
　　)
　　.pageNav
　　(
　　padding:10px;
　　border:1pxsolid#666;
　　height:100px;
　　height:30px;
　　)
　　.catalogNav
　　(
　　float:left;
　　top:130px;
　　padding:10px;
　　border:1pxsolid#666;
　　width:20%;
　　)
　　.pageSearch
　　(
　　float:left;
　　top:130px;
　　padding:10px;
　　border:1pxsolid#666;
　　width:20%;
　　)
　　.pageContent
　　(
　　float:left;
　　padding:10px;
　　border:1pxsolid#666;
　　height:400px;
　　width:60%;
　　)
　　.pageBottom
　　(
　　clear:both;
　　padding:10px;
　　border:1pxsolid#666;
　　height:100px;
　　height:70px;
　　)
　　云云，我们界说了一个三列的页面结构:顶部自顺应页面宽度。两头三列自顺应页面。底部自顺应页面宽度，固然您也能够将页面界说为两头只要两列等等，您只必要调剂layout.css文件便可，如许您能够天真的修正页面的结构，让页面表面产生基本的变更，而不用动到HTML源文件，这一点关于服务器端天生代码的程序尤其主要。更多关于CSS结构的材料，请拜见:http://www.w3cn.org/article/layout/2004/55.html
　.pageHeader
　　(
　　padding:10px;
　　border:1pxsolid#666;
　　height:100px;
　　height:70px;
　　)
　　.pageNav
　　(
　　padding:10px;
　　border:1pxsolid#666;
　　height:100px;
　　height:30px;
　　)
　　.catalogNav
　　(
　　float:left;
　　top:130px;
　　padding:10px;
　　border:1pxsolid#666;
　　width:20%;
　　)
　　.pageSearch
　　(
　　float:left;
　　top:130px;
　　padding:10px;
　　border:1pxsolid#666;
　　width:20%;
　　)
　　.pageContent
　　(
　　float:left;
　　padding:10px;
　　border:1pxsolid#666;
　　height:400px;
　　width:60%;
　　)
　　.pageBottom
　　(
　　clear:both;
　　padding:10px;
　　border:1pxsolid#666;
　　height:100px;
　　height:70px;
　　)
　　云云，我们界说了一个三列的页面结构:顶部自顺应页面宽度。两头三列自顺应页面。底部自顺应页面宽度，固然您也能够将页面界说为两头只要两列等等，您只必要调剂layout.css文件便可，如许您能够天真的修正页面的结构，让页面表面产生基本的变更，而不用动到HTML源文件，这一点关于服务器端天生代码的程序尤其主要。更多关于CSS结构的材料，请拜见:http://www.w3cn.org/article/layout/2004/55.html

　如许我们就有了3个CSS文件。SiteComm.css:任何站点都可使用的款式文件，界说了经常使用的html标签款式。SiteLayout.css:站点的结构文件，能合用于年夜多半的网站布局，详细细节必要调剂。siteStyle.css:站点独占的款式文件，能显现出本站点共同的作风和顺应于站点的内容。
　　然后我们接纳内部挪用法:将这些款式表与页面联系关系起来。
<LINKrev="stylesheet"media="all"href="css/SiteComm.css"type="text/css"rel="stylesheet">
<LINKrev="stylesheet"media="all"href="css/SiteLayout.css"type="text/css"rel="stylesheet">
<LINKrev="stylesheet"media="all"href="css/siteStyle.css"type="text/css"rel="stylesheet">
　　在切合XHTML尺度的计划中，我们利用内部挪用法，优点不问可知，HTML文档会变得十分的小，CSS文件被存在扫瞄器的缓存中，仅仅必要下载一次便可，而且你只必要修正一个文件就能够改动全部网站的款式。
　　而且如许我们才干经由过程客户端剧本，大概服务器端代码便利地改动款式表的毗连地点，而快速地完成换肤功效。
　　5、依据用户设置换肤
　　网站款式切换在网上已有良多现成的javascript换肤代码，一样平常利用cookie来保留用户设置，在哀求页面时，改动页面的CSS文件毗连便可。
　　而服务器真个换肤做法是依据用户哀求，静态地天生CSS文件毗连，用户设置一样平常保留在数据库大概cookie中。
　　因为我们利用了3个分歧功效CSS款式文件来显现网站，以是我们能够计划出加倍天真的换肤计划和组合，如只切换主题而保存结构，和切换结构和主题，和各类细节等等。
　　利用3个CSS款式文件分外的优点是，每当我们计划一个新的体系，它的款式作风特征几近都能够年夜部分使用到之前的体系上(由于我们接纳大抵不异的页面布局模子，固然显现千差万别，但次要的框架是一样的)，如许我们就能够堆集出相称数目和相称风丰厚的界面款式库来。
　　6、经由过程校验
　　全部历程的最初一个步骤就是对XHTMLCSS代码举行考证。有良多种的工具都能够帮你对两者举行考证。
　　比方DreamweaverMX便可反省我的样本代码的可会见性。你能够经由过程在文件菜单当选择CheckPage然后选择CheckAccessibility来完成。任何毛病或是告诫城市显现出来，还包含呈现地位的行号和对成绩扼要的注释。你能够在DreamweaverMX的Reference工具中找到更多关于这些毛病和告诫的内容。
　　而MicrosoftASP.NET2.0具有良多有效的功效，也能匡助我们计划和天生切合XHTML和可会见性尺度的Web站点。利用Web尺度天生ASP.NET2.0Web站点http://www.microsoft.com/china/msdn/library/webservices/asp.net/ASPNETusStan.mspx
　　别的，WorldWideWebConsortium(W3C)供应了凌驾30个的可会见性评价工具的链接。W3C还供应了针对HTML和CSS的基于Web的收费考证器。
　　因而假如想要改良网站友爱度，可用性，可会见性等，可将新尺度视为一个时机，而不是一个停滞。要懂得更多关于新尺度和可会见性的内容，你能够往看一看WorldWideWebConsortium中的WebAccessibilityInitiative(WAI)。


WHATWG版和W3C版的HTML5规范虽然根源相同，在一些领域却已经产生分歧。

AdobeDreamweaver(前称MacromediaDreamweaver)是Adobe公司的著名网站开发工具。

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

学Dreamweaver技术的过程其实是一个增加信心的过程。

直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

学Dreamweaver技术的过程其实是一个增加信心的过程。

Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。