位置：首页>> 网络编程>> 网页设计>> WEB前端开发经验总结之实战篇（3）

WEB前端开发经验总结之实战篇（3）

作者：海啸　来源：海啸的地盘　发布时间：2008-06-12 12:49:00　

标签：web,开发,设计,css,用户

让我们再回顾一下行内元素的说明：行内元素在一个文本行内生成元素框，而不会打断这行文本。而我们这里要做的就是在一行内生成两个不同的元素框，而又不打破这行文本（直白的说法：在同一行显示）。好了，现在我们就得到了这部分的代码了：

<div>
<p>
<span><a href="#1">Homepage</a> | <a href="#1">About Us</a> | <a href="#1">Contact Us</a> | <a href="#1">Site Map</a> | <a href="#1">FAQs</a></span>
<span>Copyright © 2004 FD, All rights reserved.</span>
</p>
</div>

大功告成，现在我们就把这个页面里的全部XHTML代码都获得了，看看我们一步步的分析，对页面数据的的显示做了充分的语意化了。现在就把这个页面完整的代码给出来了，看看它是否也做到了，

尽量少的嵌套

页面里基本只显示用户需要看的数据（我们用CSS直接控制用户需要看的数据的显示的样式）

页面对搜索引擎友好（没有CSS支持时，浏览页面时同样清晰，层次分明，十分容易查看数据。），已做了基本的SEO优化

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="Frame Design,a person of artistic mind,temperament,trun,What's News,Green event,Couer Story,Cooperation,Project Work" />
<meta name="description" content="Frame Design,a person of artistic mind,temperament,trun,What's News,Green event,Couer Story,Cooperation,Project Work" />
<meta name="author" content="Frame Design! Scripted by Yaohaixiao" />
<title>Frame Design</title>
</head>
<div>
    <a href="#1">Cart</a> | <a href="#1">Account</a> | <a href="#1">GuestBook</a> | <a href="#1">FAQs</a>
</div>
<div>
    <h1><a href="#1" title="FrameDesign">Frame Design</a></h1>
    <ul>
        <li><a href="#1">ARTICLES</a></li>
        <li><a href="#1">TOPICS</a></li>
        <li><a href="#1">ABOUT</a></li>
        <li><a href="#1">CONTACT</a></li>
        <li><a href="#1">FEED</a></li>
    </ul>
</div>
<div>
    <img src="img/banner.gif" alt="Nature is the best physician" />
</div>
<div>
<div>
    <h2>What's News a person of artistic temperament[nature]</h2>
    <div><img src="img/tlt-banner.gif" alt="What's News" /></a>
    <ul>
        <li><a href="#1">A person of artistic temperament[nature]</a></li>
        <li><a href="#1">A person of artistic temperament[nature]</a></li>
        <li><a href="#1">A person of artistic temperament[nature]</a></li>
        <li><a href="#1">A person of artistic temperament[nature]</a></li>
        <li><a href="#1">A person of artistic temperament[nature]</a></li>
    </ul>
    <h2>Green event a person of artistic temperament</h2>
    <ul>
        <li><a href="#1">A person of artistic temperament[nature]</a></li>
        <li><a href="#1">A person of artistic temperament[nature]</a></li>
        <li><a href="#1">A person of artistic temperament[nature]</a></li>
        <li><a href="#1">A person of artistic temperament[nature]</a></li>
    </ul>
</div>
<div>
    <p>
       <strong>a person of an artistic turnof mind;</strong><br />
       a person of artistic temperament[nature] <br />
       a person of an artistic turn
    </p>
    <div><img src="img/pic-1.gif" alt="picture-1" /></div>
    <p>
       <strong>a person of an artistic turnof mind;</strong><br />
       a person of artistic temperament[nature] <br />
       a person of an artistic turn
    </p>
    <div><img src="img/pic-2.gif" alt="picture-2" /></div>
</div>
<div>
    <h2>Couer Story</h2>
    <p>
        a person of an artistic turnof mind; a person of artistic temperament[nature] a person of an artistic turn
    </p>
    <div><img src="img/Cooperation.gif" alt="Cooperation" /></div>
    <div><img src="img/ProjectWORK.gif" alt="Project WORK" /></div>
    <p>
        a person of an artistic turnof mind;<br />
        a person of artistic temperament[nature]
    </p>
</div>
</div>
<div>
<p>
   <span><a href="#1">Homepage</a> | <a href="#1">About Us</a> | <a href="#1">Contact Us</a> | <a href="#1">Site Map</a> | <a href="#1">FAQs</a></span>
   <span>Copyright © 2004  FD, All rights reserved.</span>
</p>
</div>
<body>
</body>
</html>

看看我们得到的代码，是不是结构清晰啊，页面上都是运用合理的标签显示相应特征的数据（新闻标题、新闻列表、文字说明、图片、导航链接）了，做到了XHTML标签充分的语意化。大家也看到了，没有多余的嵌套，做到了尽量少的嵌套。而且页面里显示的基本是用户需要的数据，所以我们也做到了页面里基本只显示用户需要看的数据，而我们用CSS直接控制用户需要看的数据的显示的样式，由于我这里还没有添加任何的CSS样式，所以暂时我们还做不到，不过CSS的运用技巧会在我接下文章里介绍，很快我们做到这个也不是什么问题了。

第一页上一页 1 2

4 下一页

投稿

WEB前端开发经验总结之实战篇（3）

猜你喜欢