点击这里给我发消息
点击这里给我发消息
首 页
网站案例
虚拟主机
企业邮箱
域名注册
Flash制作
软件开发
广告设计
服务报价
激情唯诚
联系我们
公告:热烈庆祝南京唯诚网络2010版官方网站改版成功!
 
当前位置 :南京网站建设>网页学堂>列表  
南京网站制作人员的修练之道(二)基于web标准的网页基本特征
时间:2008-05-21 17:17 来源:南京网站建设 点击:
TAG: 南京网站制作
 

   从三年前开始接触南京网站制作到现在,我亲身经历了国内大多数网站的web标准重构。自己在不断的学习过程中也总结出了一点符合web标准的网页的一般特征,和大家一起分享一下。

1、页面代码容易读懂了。
举一个简单的例子,按以前如果要实现一个页面的布局,一般是使用表格来划分整个页面。请阅读并运行以下代码:
 HTML代码

 <TABLE width="100%" cellpadding="5" cellspacing="1" bgcolor="blue">
<TR>
 <TD bgcolor="silver" colspan="2" align="center" align="right">
  <TABLE width="90%">
  <TR>
   <TD>首页</TD>
   <TD>栏目一</TD>
   <TD>栏目二</TD>
   <TD>栏目三</TD>
   <TD>栏目四</TD>
  </TR>
  </TABLE>
 </TD>
</TR>
<TR height="400">
 <TD width="25%" bgcolor="white">左侧内容</TD>
 <TD width="75%" bgcolor="white">右侧内容</TD>
</TR>
<TR>
 <TD colspan="2" bgcolor="#f8f8f8" align="center">尾部文字</TD>
</TR>
</TABLE>


而我们现在,一般会简化成这样:

 程序代码

<div id="header">
    <menu>
        <li>首页</li>
        <li>栏目一</li>
        <li>栏目二</li>
        <li>栏目三</li>
        <li>栏目四</li>
    </menu>
</div>
<div id="left">左侧内容</div>
<div id="right">右侧内容</div>
<div id="bottom">尾部内容</div>


    然后再通过外部的CSS对页面上的元素进行布局以及美化效果,这样的代码相对于前一段应该说更精短,更易读懂。而且这个易读性,你还可以理解成搜索引擎也比较容易读懂你的内容、聋哑等有障碍人士也能通过一些特殊设备来读懂你的内容、用手机wap上网也能比较顺畅地访问你的页面。

2、页面变小了
     同样的网页在新的标准下制作和以前的传统制作相比,代码一般能节约40%以上,当然这是由于以下原因造成的:

a.通常在符合标准的页面中,已经不再直接使用<td bgcolor="red" align="center" ....></td>这种方法直接去控制显示样式了,而是放在网页之外的CSS文件中去表现。

b.抛弃了表格用来布局的做法后,N个表格重复嵌套的冗余代码也就不再出现了。

c.页面上已经不再直接使用图片进行装饰了,而是采用在CSS中使用背景图去实现。当然,具有实际意义的图片还是应该存在的,比如网站的Logo图标、广告图片、新闻图片以及其它不是用来装饰页面效果的、是属于实际内容的一部分的那类图片。

d.大量的javascript代码也被移植到了网页外部,在页面中将精简成<script type="text/javascript"  src="../js/**.js"></script>。

    当然以上所谈的特征非常的表面化、也非常的局限,只是就页面代码方面描述了比较浅显的特征,针对于页面制作人员而言,也同时提出了更高的要求,会在后边的文章中做详细的讲解。

有兴趣的朋友可以照着下边的这个效果图去用传统的方法试着做一下,然后再查看这个页面的html代码,是不是觉得的确精短了很多?

     到底如何去培养自己去编写精练的、有语义的、结构非常清晰的html代码呢。在下一节中我们来讨论如何将一个美工画出来的效果图拆分成结构层、表现层以及行为层,以及如何正确处理三者之间的关系。

(责任编辑:admin)
 
 
上一篇:南京网站制作人员的修炼之道(一):前言
下一篇:南京网站制作人员的修练之道(三)理解表现与内容相脱离
 


 推荐关注

 热点关注

关于我们 | 工作机会 | 付款方式 | 网站制作 | 网页制作 | 网页设计 | 网络公司 | 联系我们 | 网站地图
版权所有:南京唯诚信息技术有限公司 © 2005-2010 All Rights Reserved.
咨询专线:400-657-0669 技术专线:025-83208669-808 传真:025-83208669-803
地址:南京市鼓楼区广州路37-1号江苏科技大厦502室 邮编:210008 苏ICP备05002558号