通过css的定义，我们可以将这些div标签包含的区块放在页面上任何位置，再指定这些块的颜色、字体、边框、背景以及对齐属性等等。如：我们再建立sitelayout.css文件，定义如下：

以下是引用片段：
.pageheader 
（ 
    padding: 10px; 
    border: 1px solid #666; 
    height: 100px; 
    height: 70px; 
） 
.pagenav 
（ 
    padding: 10px; 
    border: 1px solid #666; 
    height: 100px; 
    height: 30px; 
） 
.catalognav 
（ 
    float: left; 
    top: 130px; 
    padding: 10px; 
    border: 1px solid #666; 
    width: 20%; 
） 
.pagesearch 
（ 
    float: left; 
    top: 130px; 
    padding: 10px; 
    border: 1px solid #666; 
    width: 20%; 
） 
.pagecontent 
（ 
    float: left; 
    padding: 10px; 
    border: 1px solid #666; 
    height: 400px; 
    width: 60%; 
） 
.pagebottom 
（ 
    clear: both; 
    padding: 10px; 
    border: 1px solid #666; 
    height: 100px;  (www.iocblog.net 文章来源)
    height: 70px; 
） 

      如此，我们定义了一个三列的页面布局：顶部自适应页面宽度。中间三列自适应页面。底部自适应页面宽度，当然您也可以将页面定义为中间只有两列等等，您只需要调整layout.css文件即可，这样您可以灵活的修改页面的布局，让页面外观发生根本的变化，而不必动到html源文件，这一点对于服务器端生成代码的程序尤为重要。

     4、定义站点独有的样式

      经过以上两步之后，我们已经有了一个大概的页面主题外观，接下来我们要设计站点的细节，比如，对站点导航条我们想使用与普通超链接不一样的样式，如：蓝色、加粗、字体更大、再加上有立体效果的背景图：

以下是引用片段：
. pagenav a:link, . pagenav a:hover, . pagenav a:visted (color:#36c;  
font-weight:bold; font-size:120%; background: url(images/bg_sitemenu.jpg) #36c;  
) 

      对于栏目导航，我们想给每个栏目连接加上背景色，并且有鼠标滑过和移出的效果。 栏目导航区的html代码为：

以下是引用片段：
<div class="catalognav"> 
        <ul> 
            <li> 
                <a href="1">栏目1</a> 
            <li> 
                <a href="2">栏目2</a> 
            <li> 
                <a href="3">栏目3</a> 
            <li> 
                <a href="4">栏目4</a> 
            <li> 
                <a href="5">栏目5</a> 
            <li> 
                <a href="6">栏目6</a> 
            </li> 
        </ul> 
    </div> 

      栏目导航区对应的css代码为：

以下是引用片段：
.catalognav ul 
( 
    margin-left: -30px; 
    list-style: none; 
) 
.catalognav li 
( 
    float: left; 
    background: #ccc; 
    line-height: 30px; 
    border: solid 1px #black; 
) 
.catalognav a 
( 
    width: 100%; 
    text-align: center; 
    height: 30px; 
) 
.catalognav a:link 
( 
    color: #666; 
    background: url(arrow_off.gif) #ccc no-repeat 5px 12px; 
    text-decoration: none; 
) 
.catalognav a:visited 
( 
    color: #666; 
    text-decoration: underline; 
) 
.catalognav a:hover 
( 
    color: #fff; 
    font-weight: bold; 
    text-decoration: none; 
    background: url(arrow_on.gif) #f00 no-repeat 5px 12px; 
) 

      接下来我们还需要定义其他的站点独有的样式，如栏目标题、文章列表、文章正文、时间、注释、提示、错误等等各种样式，而且这些样式多以类和id来作为选择符。这些样式都是针对某个站点的，不适用于其他的站点，然后我们将这些样式保存为sitestyle.css文件。这样我们就有了3个css文件。 sitecomm.css：任何站点都可以使用的样式文件，定义了常用的html标签样式。 sitelayout.css：站点的布局文件，能适用于大多数的网站结构，具体细节需要调整。 sitestyle.css：站点独有的样式文件，能显示出本站点独特的风格和适应于站点的内容。

      然后我们采用外部调用法：将这些样式表与页面关联起来。

以下是引用片段：
<link rev="stylesheet" media="all" href="css/sitecomm.css" type="text/css" rel="stylesheet"> 
<link rev="stylesheet" media="all" href="css/sitelayout.css" type="text/css" rel="stylesheet"> 
<link rev="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代码进行验证。有很多种的工具都可以帮你对二者进行验证。

      例如dreamweaver mx即可检查样本代码的可访问性。你可以通过在文件菜单中选择check page然后选择check accessibility来实现。任何错误或是警告都会显示出来，还包括出现位置的行号以及对问题简要的解释。你可以在dreamweaver mx的reference工具中找到更多关于这些错误和警告的内容。而microsoft asp.net 2.0 具有很多有用的功能，也能帮助我们设计和生成符合 xhtml 和可访问性标准的 web 站点。 使用 web 标准生成 asp.net 2.0 web 站点http://www.microsoft.com/china/msdn/library/webservices/asp.net/aspnetusstan.mspx 

      此外，world wide web consortium (w3c)提供了超过30个的可访问性评估工具的链接。w3c还提供了针对html和css的基于web的免费验证器。

      因此如果想要改善网站友好度，可用性，可访问性等，可将新标准视为一个机会，而不是一个障碍。要了解更多关于新标准和可访问性的内容，你可以去看一看world wide web consortium中的web accessibility initiative (wai)。

上一页 [1] [2]

Tag: XHTML

文章整理：iocblog
版权申明：本站文章均来自网络，如有侵权，请联系我们，我们收到后立即删除，谢谢！
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有。