`
sunxboy
  • 浏览: 2821741 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

web设计与开发常见错误(转)

阅读更多

原文:http://www.456bereastreet.com/lab/web_development_mistakes/

本文是一份web设计与开发常见错误的汇总,总结了我的web设计与开发错误web设计与开发错误,续 两篇文章。

本文包含了常见的设计开发错误以及我的一些解释,我也尝试着提供一些避免错误的方法,在某些问题上我也会给出错误信息的链接。

混淆文档类型(DOCTYPE)
完全不写、写的不正确、或放错地方。我曾见过HTML 4.0 Transitional被用在XHTML网页和框架页中,还看到过在开头的<html> 标签后写DOCTYPE声明和一些不完整的声明。
为什么? 有两个原因。首先,文档声明是必须的,在W3C HTML 4.01 specW3C XHTML 1.0 spec 里 都有说明。第二,浏览器会根据指定的文档类型去显示和渲染网页。也就是“DOCTYPE切换(DOCTYPE switching)”。为了保持各个浏览器显示网页的一致性,特别是你用了CSS,你一定会希望浏览器使用它们“Standards compliance mode”。关于DOCTYPE切换,可以看看使用正确的DOCTYPE!正确的文档类型声明,正确的布局方式
<span>癖
样式化的一个常见方法就是把一段东西用<span> 标签围起来,并且带一个class用来设置样式。我敢保证你经常可以看到诸如<span class="heading"><span class="bodytext"> 的代码。
为什么? 其实在很多情况下这完全没必要,这样做只会混乱标签并且没有什么语义。标题就用标题(h1~h6)标签,段落就用段落(P)标签,列表就用列表(UL, OL和DL)标签。然后再用CSS去样式化,如果需要的话,也可以加class和id属性。
太多可视化思考
以为web就是WYSIWYG(所见即所得) – 一开始就想着这些东西该怎么表现的,而不是先去考虑逻辑结构上怎么样。
为什么? 虽然大部分网民都是视力正常的,但是还是有残疾人上网的。网民可能使用不同浏览器、不同系统、不同尺寸显示器和分辨率、不同的窗口大小、不同颜色标准和文字大小,所以你不应该把你的网页做成WYSIWYG。网页不是 印刷品或者电视节目。要让你的设计弹性化。
缺乏语义
没有使用具有语义的标签。想当然的按照图形浏览器渲染的HTML样式去写代码,而不是参照这些标签的意义
为什么? 和上文提到的"<span>癖”比较接近,没有好好的利用现有的HTML标签来表达它应该表达的语义。没有语义化的HTML,为那些非可视化用户代理(UA)造成了理解上的困难。而且语义化的HTML很容易进行CSS样式化。
编码不一致
在服务器发送的默认编码是一种而文档里面又使用另外一种,这可能会造成浏览器乱码(不正常显示)。
为什么? 因为你必须得保证所有你的访问者都能阅读你的内容。
不正确的alt属性
没写或者写了没意义。在网络 上可以看到非常多没有alt 属性的<img> 标签。没意义的alt属性倒是不如前者常见,比如“spacer GIF used to make the layout look good”,“带有阴影的蓝色原点”, 以及“JPEG图片,123 KB”。要记住,alt 属性在<img><area> 里是必须的。
为什么? 这是必须的 ,没有alt ,任何图片中的信息就会被屏幕阅读器、文本浏览器、搜索引擎机器人忽略,或者用户关了图片显示就会显示为X。注意图片的alt的文字是要相关的,不要给装饰性的图片或者用来布局的图片加alt属性值,指定一个空值就可以了,如alt=""
不合法的id和class属性

在同一页面里使用了多次同一id ,以及在idclass 和CSS选择器中使用了非法字符。

对于CSS来说 (CSS 2.1语法和基本数据类型 ):

在CSS 2.1里,标示符(包括元素名、class和ID)只能由数字、字母、ISO 10646通用字符集U+00A1及更高、连接线("-")、下划线("_")组成,并且不能以数字开始。

对于HTML (HTML基本数据类型 ):

ID和NAME必须以大写或小写字母开始,随后可以接任意字母、数字、连接线("-")和下划线("_")、冒号(":")和分号(".")。

为什么? 遵循以上标准的浏览器可能不会按照你预期的现实。如果一个页面中有多个重用的id 值,那么任何使用了该值的JS就可能会失效或者错误。
浏览器探测
使用服务器端或客户端的脚本测试访问者的浏览器,然后发送或者执行特定浏览器的代码。这对于最新的浏览器、更新过的浏览器或者具备欺骗功能的UA(比如Opera默认伪装成IE)。
为什么? 增加了不必要的麻烦,并且最终会失效
CSS缺少单位
长度值(水平和垂直的)需要单位,除非当该值为零时。不像在HTML里面,可以输入width="10" 。在CSS里, 必须写成width:10px; (或者其他单位)。
为什么? 在遵循规范 的浏览器中会被忽略。
浏览器特定的CSS
样式化滚动条、表达示和滤镜等,都只能在IE下工作。这也不合法。
为什么? 只在特定的浏览器里面正常。如果你真的必须 使用IE特定的CSS,可以单独写一个CSS文件并且使用条件注释 ,或者保证只有IE能看到那些不合法的CSS。
JavaScript依赖症
网站整个依靠JavaScript。很多人都愿意使用不支持JS或者禁用JS的浏览器。当前的情况(W3Schools浏览器统计 , TheCounter.com )表明至少有8%-10%的用户浏览器不支持JS。搜索引擎机器人对待JS也不是非常友好,虽然有报告说Google正在开发支持JS的机器人。如果你的站点需要开启JS才能导航,那别指望有一个很高的搜索引擎排名。
为什么? 对搜索引擎不友好,难以提高排名。
Flash依赖症
实际上并不是所有人都装了Flash Player插件。并且大部分搜索引擎机器人都不支持Flash(Google有报告称已经在尝试索引Flash文件,但是他们还是要求你的内容和导航写 在HTML里),所以如果你整个网站或者导航部分是Flash的,你的网站一般就不会得到很高的PageRank。
为什么? 搜索引擎不友好,但这并不是说你应该放弃Flash,只是你应该使用的比较有技巧。
JunChen注:为Flash建立搜索索引,可以参考flash 8 swf metadate应用
文字做成图
把文字做成图,又不提供更多提示信息。这不仅仅增长了访问者下载时间,也不利于访问者选择和复制文字,又不利于文字放大。
为什么? 不亲切,增加下载时间,对搜索引擎不友好。
不友好的表单
没有语义、难以使用的表单。要学会使用<label> 标签,<fieldset><legend> 标签,不要使用“Reset”按钮
为什么? 没有语义并且难以使用。阅读设计易用的表单优秀、易用的表单 ,和重设和取消按钮 ,看如何设计友好和易用的标单。(JunChen注:使用Reset按钮会增加用户思考的时间,并且误按情况屡屡发生)
过时的HTML
多层嵌套的表格,透明的spacer图片,<font> 标签,表现层的标签。其实这个大家都已经知道了。
为什么? 增加复杂度,让整个页面代码臃肿冗余,不易理解,对搜索引擎不友好。
一切向IE看齐
IE优先,做完了再看看其他浏览器里如何,有问题再调整。
为什么? 浪费时间,并且这个习惯不好。IE会默认接受很多错误的代码,所谓“容错性”。而其实IE也接受良好结构的HTML,并且在其他浏览器里都正常,这也不会浪费很多时间。更多信息看IE真相
不合法的HTML属性
使用不推荐的属性或者只能在特定浏览器里生效的属性,诸如marginwidthleftmarginlanguage ,给<table>height ,给<img>border 等等。
为什么? 不合法并且没必要。你可以使用CSS。对于<script> 标签,使用 type ,而不是language ,来指明脚本语言(一般是JavaScript)。
没有编码的“&”
很多URI带有变量和没有编码的“&”符号。这不正确,并且可能会造成很多问题 。 “&”符号必须要写成&amp;
为什么?“&”符号和验证 一文中可以找到解释和一个会引起错误的例子。
框架
使用框架来分割浏览器窗口并且加载数个独立的文件。
为什么? 首先我要说的是,框架可能比较实用,前提是你正确的使用了,比如说在内联网和一些web应用程序中。而对于一个 网站来说,框架有很多易用性和可用性方面的问题。比如加入收藏夹的问题、打印问题以及链接问题,并且对搜索引擎不友好。因为机器人在多个框架页里面工作比 较有问题。
数据表格的误用
Table本来就是用来放置表格状的数据,不能像布局表格一样去写,而是可以用很多自带的标签和属性来使表格结构化和语义化。
为什么? 屏幕阅读器和其他辅助技术在阅读这些错误的数据表格时会有问题。很多文章都介绍了如何写出结构化的数据表格,如Web Standards Project的A table, s’il vous plaît
Divitis和classitis
相对于<span>癖,Divitis和classitis就是用了太多不必要的Div和class。
为什么? 参看“<span>癖”和“缺乏语义”部分。
过宽的固定宽度
如果你使用的是固定宽度的布局,请不要设定的过宽。说明:在这里我并不是说固定布局和浮动布局孰优孰劣。
为什么? 如果你指定的宽度宽于浏览者的屏幕,就等于强迫出现水平滚动条,那极不友好。
含糊不清的和带表现含义的class、id名
如何给classid 命名,取决于它是干嘛的而不是它看起来像什么、在哪里。
为什么? 为了避免你重新设计时候容易产生的混淆。比如一个名为largeblue 的class,你却用来用来让字变得“小”和“红”,一个名为leftcol 的id你却用来显示在右边。
没有背景色
没有给body指定背景色。
为什么? 很多用户会把浏览器设置成其他的背景色,如果你不写明的话。
非良好结构(well-formed)的XHTML
使用非良好结构(well-formed) 的XHTML。
为什么? 如果XHTML被服务器伺服为application/xhtml+xml ,严格的浏览器,如Mozilla系列,就不会显示那些非良好结构的XHTML。说明一下,本网站并没有把所有望也伺服为application/xhtml+xml ,理由我在另外一篇文章里说明:Content negotiation .
text input颜色设定遗漏
只给表单区域指定背景色或者文字颜色,特别是当行或多行文字域(input type="text"textarea )。

为什么? 有些人把他们的浏览器或操作系统设置成反色,默认情况下一个text input就会显示为黑底白字,而不是你想要的白底黑字。

如果你把文字颜色设置成深灰色,又不指明背景色,在反转了颜色的浏览器中,就会显示为黑色背景的深灰色字,一团糟。反之同理。

总记住设定前景和背景色,或者记得要设定文字输入域。

这些都是你应该要注意的问题,很长?如果你都避免了这些错误,那么你已经做得很好了。如果你已经犯了其中的一个或多个错误,嗯,我真觉得有点内疚。最后希望本文能够帮助你在以后的工作中少犯错误。

评论

相关推荐

    挑战Dreamweaver CS3网页设计与Web 2.0开发 (邓文渊)【PDF】

    本书秉承作者倡导的“向上提升,向下扎根”的理念,将概念和实际操作讲解与一个“吴哥窟之旅”动态网站的开发细节相结合,并以图示化教学方式引领您全程体验Dreamweaver CS3在网页设计和Web 2.0动态网站开发中各个...

    PHP和MySQL Web开发第4版pdf以及源码

    《php和mysql web开发(原书第4版)》:开发人员专业技术丛书。 目录 读者反馈 译者序 前言 作者简介 第一篇 使用PHP 第1章 PHP快速入门教程 1.1 开始之前:了解PHP 1.2 创建一个示例应用:Bob汽车零部件商店 ...

    Flex:Web报表引擎——MyReport 2.3.6.0 + 免Flex开发集成版

    Flex:Web报表引擎——MyReport 2.3.6.0 + 免Flex开发集成版 release 2.3.6.0 --新增功能:报表编辑器支持打开/报表本地文件功能 --新增功能:单元格垂直合并 --新增功能:报表编辑器,标题行支持单个和多个单元格...

    DjangoWeb开发指南

    1.11 常见错误 1.12 代码风格 1.13 总结 第2章 Dja ngo速成:构建一个Blog 2.1 创建项目 2.2 运行开发服务器 2.3 创建Blog应用 2.4 设计你的Model 2.5 设置数据库 2.6 设置自动admin应用 2.7 试用admin ...

    PHP和MySQL WEB开发(第4版)

    8.2 如何设计Web数据库 8.2.1 考虑要建模的实际对象 8.2.2 避免保存冗余数据 8.2.3 使用原子列值 8.2.4 选择有意义的键 8.2.5 考虑需要询问数据库的问题 8.2.6 避免多个空属性的设计 8.2.7 表格类型的总结 8.3 Web...

    WEB开发程序设计丛书-Node 网络安全

    保护用户需要了解Node特有的攻击媒介,以及与其他Web应用程序共享。 为了保护Node.js应用程序,我们首先帮助您深入研究构成典型Node应用程序的构建块。通过了解您构建的所有层,您可以防御性地安全地编写代码。这样...

    PHP和MySQL Web开发第4版

    《php和mysql web开发(原书第4版)》:开发人员专业技术丛书。 目录 读者反馈 译者序 前言 作者简介 第一篇 使用PHP 第1章 PHP快速入门教程 1.1 开始之前:了解PHP 1.2 创建一个示例应用:Bob汽车零部件商店 ...

    基于python的web框架django开发的一个讲座管理系统作为毕业设计.zip

    这些系统通常被设计用来提高效率、减少错误、加强安全性,同时提供数据和信息支持。以下是一些常见类型的管理系统: 学校管理系统: 用于学校或教育机构的学生信息、教职员工信息、课程管理、成绩记录、考勤管理等...

    JSP网站开发典型模块与实例精讲

    书名:JSP网站开发典型模块与实例精讲 图书编号:1656674 出版社:电子工业 定价:50.0 ISBN:712102874 作者:李振捷 出版日期:2006-08-09 版次: 开本:26cm 简介: 本书讲解了使用JSP开发网站系统的经典模块和工程实例。...

    WebUI自动化测试框架Dagger.zip

    Dagger是网易杭州研究院QA团队开发的一个轻量级、运行稳定的WebUI自动化测试框架,主要基于Selenium及TestNg可以认为是对Selenium进行二次封装的一个框架(俗称 造轮子 )。之所以把这个轮子开源出来,主要在于...

    CodeIgniter:php敏捷开发框架web快速开发详解

    你真的可以减少很多工作量:敲击键盘的次数减少了,代码错误减少了,你只需要很少的时间调试代码。代码量减少还意味着你只需要较少的空间来存放应用程序。 举两个例子(稍后它们会被进一步分析,因此不用担心如何...

    ServletEx2 1.0 Java WEB 应用开发框架 完整版 (release, source, document, example 2010-01-13)

    这个框架主要分为四大部份,相信它已经包括了最常见的开发工作: 数据库操作; 模板操作; 表单操作; 工作流操作(开发中)。 目标 – Database数据库操作 不需要开发人员编写SQL,也不需要关心更多的数据库处理 ...

    Web安全深度剖析(张柄帅)

    《Web安全深度剖析》最适合渗透测试人员、Web 开发人员、安全咨询顾问、测试人员、架构师、项目经理、设计等人员阅读,也可以作为信息安全等相关专业的教材。 第1篇 基础篇 第1章 Web安全简介 2 1.1 服务器是如何被...

    php网络开发完全手册

    13.7 数据库设计的方法与步骤 210 13.7.1 需求分析 211 13.7.2 概念设计的E-R方法 214 13.7.3 数据库的逻辑设计方法 215 13.7.4 物理设计阶段 218 13.7.5 数据库的实施阶段 218 13.7.6 数据库的运行和维护阶段 218 ...

    经典JAVA.EE企业应用实战.基于WEBLOGIC_JBOSS的JSF_EJB3_JPA整合开发.pdf

    中文名: 经典Java EE企业应用实战--基于WebLogic/JBoss的JSF+EJB 3+JPA整合开发 原名: 经典Java EE企业应用实战--基于WebLogic/JBoss的JSF+EJB 3+JPA整合开发 作者: 李刚 资源格式: PDF 版本: 第一版 出版社: 电子...

    基于tornado的web框架开发的订单管理系统.zip

    这些系统通常被设计用来提高效率、减少错误、加强安全性,同时提供数据和信息支持。以下是一些常见类型的管理系统: 学校管理系统: 用于学校或教育机构的学生信息、教职员工信息、课程管理、成绩记录、考勤管理等...

Global site tag (gtag.js) - Google Analytics