>> 微信网站-自助建站
西安做网站公司_西安做网站的公司_西安网站建设公司
首 页
西安网站建设
西安域名注册
西安网站空间
西安企业邮局
西安网站推广
网站知识中心
关于玖佰网络
西安做网站公司_西安做网站的公司_西安网站建设公司
知识中心
建站常见问题-->
域名空间企邮-->
网站建设推广-->
网站方案优化-->
服务指南
最新文章
西安学校教育行业网站建设方案
西安电子商务网站建设解决方案
西安酒店餐饮行业网站建设方案
西安旅游服务行业网站建设方案
西安医院医疗行业网站建设方案
西安政府电子政务网站建设方案
西安生产制造行业网站建设方案
做好网站原创内容设计的五大要点
  您现在的位置: 西安做网站_西安玖佰网络 > 知识中心 > 网站建设推广 > 正文
让网页设计提升到下一个高度!
西安玖佰网络 www.029900.com  点击数:  更新时间:2009/11/6 15:19:06

Web设计师可以使用HTML4和CSS2.1完成一些很酷的东西。我们可以在不使用陈旧的基于table布局的基础上完成文档逻辑结构并创建 内容丰富的网站。我们可以在不使用内联<font>和<br>标签的基础上对网站添加漂亮而细腻的风格样式。事实上,我们目前的 设计能力已经让我们远离了那个可怕的浏览器战争时代、专有协议和那些充满闪动、滚动和闪烁的丑陋网页。
虽然我们现在已经普遍使用了HTML4和CSS2.1,但是我们还可以做得更好!我们可以重组我们代码的结构并能让我们的页面代码更富有语义化特性。 我们可以缩减带给页面美丽外观样式代码量并让他们有更高的可扩展性。现在,HTML5和CSS3正跃跃欲试的等待大家,下面让我们来看看他们是否真的能让 我们的设计提升到下一个高度吧…

跟<div>说再见,欢迎语义化标签

曾经,设计师们经常会跟频繁使用基于table的没有任何语义的布局。不过最终还是要感谢像Jeffrey Zeldman和Eric Meyer这样的思想革新者,聪明的设计师们慢慢的接受了相对更语义化的<div>布局替代了table布局,并且开始调用外部样式表。但不 幸的是,复杂的网页设计需要大量不同的标签结构代码,我们把它叫做“<div>-soup” 综合症。也许你很熟悉下面的代码:

<div id="news">
   <div class="section">
      <div class="article">
         <div class="header">
            <h1>Div Soup Demonstration</h1>
            <p>Posted on July 11th, 2009</p>
         </div>
         <div class="content">
            <p>Lorem ipsum text blah blah blah.</p>
            <p>Lorem ipsum text blah blah blah.</p>
            <p>Lorem ipsum text blah blah blah.</p>
         </div>
         <div class="footer">
            <p>Tags: HMTL, code, demo</p>
         </div>
      </div>
      <div class="aside">
         <div class="header">
            <h1>Tangential Information</h1>
         </div>
         <div class="content">
            <p>Lorem ipsum text blah blah blah.</p>
            <p>Lorem ipsum text blah blah blah.</p>
            <p>Lorem ipsum text blah blah blah.</p>
         </div>
         <div class="footer">
            <p>Tags: HMTL, code, demo</p>
         </div>
      </div>
   </div>
</div>

尽管这有些勉强,但上面这个实例还是可以说明使用HTML4对一个复杂的设计进行代码化后依然过于臃肿(其实xHTML1.1也不过如此)。不 过值得激动的是,HTML5解决“<div>-soup” 综合症并带给我们一套新的结构化元素。这些新的HTML5元素富有更细致的语义从而代替了那些毫无语义的<div>标签,并同时为CSS的调 用提供了”自然”的CSS钩子。下面是HTML5的解决方案实例:

<section>
   <section>
      <article>
         <header>
            <h1>Div Soup Demonstration</h1>
            <p>Posted on July 11th, 2009</p>
         </header>
         <section>
            <p>Lorem ipsum text blah blah blah.</p>
            <p>Lorem ipsum text blah blah blah.</p>
            <p>Lorem ipsum text blah blah blah.</p>
         </section>
         <footer>
            <p>Tags: HMTL, code, demo</p>
         </footer>
      </article>
      <aside>
         <header>
            <h1>Tangential Information</h1>
         </header>
         <section>
            <p>Lorem ipsum text blah blah blah.</p>
            <p>Lorem ipsum text blah blah blah.</p>
            <p>Lorem ipsum text blah blah blah.</p>
         </section>
         <footer>
            <p>Tags: HMTL, code, demo</p>
         </footer>
      </aside>
   </section>
</section>

正如我们所见,HTML5可以让我们用很多更语义化的结构化代码标签代替那些大量的无意义的<div>标签。这种语义化的特性不仅 提升了我们网页的质量和语义,并且大量减少了曾经代码中用于CSS必须调用的class和id属性。事实上,CSS3也是可以然通过我们忽略掉所有 class和id的。

[1] [2] [3] 下一页

我们专注于:西安网站建设,网站制作,网页设计,网站推广,网站改版,网站维护,域名注册,网站空间等服务
[西安玖佰网络http://www.029900.com/] 专业的西安做网站公司。
  • 上一篇文章:
  • 下一篇文章:
  • 网站地图 | 友情链接 | 联系方式 | 文档下载 | 人才招聘 | 付款方式 | 技术论坛
    西安做网站 西安建网站电话:15339190980 / 029-85535950 Email:900c@163.com
    西安玖佰网络 www.029900.com Copyright 2006-2021 版权所有 备案号:陕ICP备08103580号
    西安网站建设 西安做网站公司 西安网站制作 西安做网站的公司
    点击这里给我发消息
    点击这里给我发消息
    点击这里给我发消息
    点击这里给我发消息