转至繁体中文版     | 网站首页 | 图文教程 | 资源下载 | 站长博客 | 图片素材 | 武汉seo | 武汉网站优化 | 
最新公告:     敏韬网|教学资源学习资料永久免费分享站!  [mintao  2008年9月2日]        
您现在的位置: 学习笔记 >> 图文教程 >> 站长学院 >> 网页制作 >> 正文
使用html表格和CSS进行混合网页设计         ★★★★

使用html表格和CSS进行混合网页设计

作者:闵涛 文章来源:闵涛的学习笔记 点击数:674 更新时间:2009/4/23 13:50:32

最近一篇关于桢(Frames)的文章让我开始考虑网页设计的当前状态。不久前公布了许多的网页标准。使用CSS以及XHTML开发网页程序的优点正日益得到人们的称颂,但仍有许多 的开发者团体更依赖于使用HTML表格来控制页面的输出。让我们来考虑一下使用HTML表格和使用CSS方法的各自优点。

老方法未必不好

当我刚开始进行网页设计时,我吃惊于HTML表格的强大和弹性。它们可以被无穷嵌套以达到预期的设计效果,而原先空白表格无法在浏览器中正确显示的问题则可以通过空白GIF图 片予以修正。但是HTML和表格背后的意义并不在于外观。

HTML表格用于设计呈现表格式的数据。所以,如果你希望数据看起来像在Excel中那样,那么使用表格就是最佳答案。除了毫不费力的应付这些数据,早年的网页开发者们迅速发现 了表格还是控制网页输出与外观的绝佳办法。

将一个网页设计切割成不同的表格是很简单的事情,但是要手工编码完成同样的输出可就有些麻烦。另外,网页设计中无数嵌套的表格在需要改变时就成了令人头痛的梦魇,好在 类似Frontpage这样的可视化设计工具还可以助你一臂之力。要展示基于表格的输出,有个好方法就是使用一个示例。

表格设计可以提供我们期望的设计结果,但是最终的HTML代码就有点不好理解了。使用表格的一个有利方面是众多浏览器全都支持,包括类似IE 5.0这样的古老浏览器。这一点和基 于CSS的设计明显不同,但是CSS有一些不同的优点。

突破新的应用

几年之前,当CSS刚刚成型之时,网页标准就开始推行了。它的建立基于HTML被设计用于处理网页内容的事实。这意味着,它不是设计用于处理数据的。CSS继承了这个设计原理, 允许你很容易的将设计(HTML)和外观(CSS)区分开来。

首先,CSS是用于处理文本的外观,比如颜色和字体,不过逐渐成长为支持各种外观因素。除了简化文本外观以及颜色外,CSS还提供了布局功能。基于CSS的输出设计有个问题就是 浏览器的支持。浏览器的支持正在慢慢达到期望值,但是古老的浏览器永远也不可能支持。在支持有限的情况下,又有多种不同的工作区和修改版本。

让我们来看个使用CSS开发的HTML示例,和使用HTML表格的做个对比。在列表B中的HTML源代码,其浏览外观和使用DIV标记定义页面主要区域(题头,菜单,内容和页脚)的效果完 全相同。另外,菜单区使用了一个未排序的列表。CSS被包含在HTML的“head”部分中。它定义了不同的DIV标记的外观规则。这包含了色彩和空白。

使用CSS输出的最终结果是设计更简单,因为内容将由HTML来控制(没有了表格,HTML源代码阅读起来也简单多了),而外观则简单的交由CSS来控制。因为对CSS的支持各个浏览器 有些差异,所以你必须努力不懈的进行测试,并部署许多的CSS修改以适应已知的浏览器差异。至于这些修改(以及如何在老式浏览器中工作),则不在本文的讨论范围之内了。

其他设计方法

HTML表格和CSS并不是控制网页输出的唯一方法。你也可以使用Macromedia Flash来提供一个动态接口。不过,你总该另外提供一个HTML/CSS的通道,以服务那些浏览器不支持 FLASH的用户,以及那些不注意FLASH接口的用户。

是否该采用混合之道?

我最近已经参与了多个项目,采用混合HTML表格和CSS的设计方法。这使得适应当今为数众多的浏览器成为一件容易的事情。我也参与了一个特别的项目,使用纯粹的CSS设计,但 这是一个企业内部网程序,由客户浏览器进行控制,所以设计起来比较容易。

在眼下的这种网页情况下,我推荐混合的设计模式,CSS可用于控制一个页面中的绝大多数外观(字体,大小,颜色,等等),而表格则可以辅助输出布局——特别在CSS的输出布 局功能没有得到广泛支持时。


[Web开发]css ul li 不换行  [网页制作]如何正确的理解CSS的float浮动属性?
[网页制作]CSS 3 选择器解释  [网页制作]CSS Image Maps—图像地图
[网页制作]一款DIV+CSS导航条效果  [网页制作]xml css htc 的综合运用
[网页制作]用GoLive实现CSS+DIV之二  [网页制作]免费CSS布局和模板大集合!
[网页制作]DIV+CSS网页布局常用的方法与技巧  [网页制作]初学者来看:网页CSS样式表设计十条技巧
教程录入:mintao    责任编辑:mintao 
  • 上一篇教程:

  • 下一篇教程:
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
      注:本站部分文章源于互联网,版权归原作者所有!如有侵权,请原作者与本站联系,本站将立即删除! 本站文章除特别注明外均可转载,但需注明出处! [MinTao学以致用网]
      网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)

    同类栏目
    · Web开发  · 网页制作
    · 平面设计  · 网站运营
    · 网站推广  · 搜索优化
    · 建站心得  · 站长故事
    · 互联动态
    更多内容
    热门推荐 更多内容
  • 没有教程
  • 赞助链接
    更多内容
    闵涛博文 更多关于武汉SEO的内容
    500 - 内部服务器错误。

    500 - 内部服务器错误。

    您查找的资源存在问题,因而无法显示。

    | 设为首页 |加入收藏 | 联系站长 | 友情链接 | 版权申明 | 广告服务
    MinTao学以致用网

    Copyright @ 2007-2012 敏韬网(敏而好学,文韬武略--MinTao.Net)(学习笔记) Inc All Rights Reserved.
    闵涛 投放广告、内容合作请Q我! E_mail:admin@mintao.net(欢迎提供学习资源)

    站长:MinTao ICP备案号:鄂ICP备11006601号-18

    闵涛站盟:医药大全-武穴网A打造BCD……
    咸宁网络警察报警平台