当前位置: 首页 > 图文教程 > 网页制作 > Dreamweaver > 标准建站之web设计与开发常见错误

Dreamweaver
Dreamweaver 限制访问的BUG
Dreamweaver 数据库路径的使用
用Dreamweaver做搜索表单
Dreamweaver 事件简述
[Dreamweaver教程]Meta标签详解
提高 Dreamweaver行为全接触(5)
提高 Dreamweaver行为全接触(1)
提高 Dreamweaver行为全接触(3)
提高 Dreamweaver行为全接触(2)
提高 Dreamweaver行为全接触(4)
Dreamweaver MX2004视频宝典教程(7) Dreamweaver安装与启动
Dreamweaver MX2004视频宝典教程(9) 工作区结构
Dreamweaver MX2004视频宝典教程(5) 配色原则
Dreamweaver MX2004视频宝典教程(4) 网页布局
Dreamweaver MX2004视频宝典教程(8) Dreamweaver文档使用
Dreamweaver MX2004视频宝典教程(10) 菜单概述
Dreamweaver MX2004视频宝典教程(3) 网页的基本元素
Dreamweaver MX2004视频宝典教程(6) HTML与渲染
Dreamweaver MX2004视频宝典教程(1) 课程简介
Dreamweaver MX2004视频宝典教程(2) 网站与网页的概述

Dreamweaver 中的 标准建站之web设计与开发常见错误


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-23   浏览: 32 ::
收藏到网摘: n/a

混淆文档类型(DOCTYPE)

  完全不写、写的不正确、或放错地方。我曾见过HTML 4.0 Transitional被用在XHTML网页和框架页中,还看到过在开头的<html>标签后写DOCTYPE声明和一些不完整的声明。
为什么?有两个原因。首先,文档声明是必须的,在W3C HTML 4.01 spec和W3C 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,以及在id、class和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能看