网站首页  注册会员  本站免费电影 留言板  繁體中文

 

您现在的位置: 陈鹏个人网站 >> 电脑应用 >> 网络应用 >> 网页制作 >> 正文
 

|
闂傚倸鍊搁崐鎼佸磹閻戣姤鍊块柨鏇楀亾妞ゎ亜鍟村畷褰掝敋閸涱垰鏁搁梻渚€鈧偛鑻晶鎵磼鏉堛劌娴鐐存崌楠炴帒鈹戦崼婵囧€梺璇叉唉椤煤濡厧鍨濋柟鎹愵嚙缁犲湱鎲搁悧鍫濅刊闁轰礁鍟撮弻銊モ攽閸℃ê娅f繝纰樺墲婵炲﹤顫忕紒妯诲闁告稑锕ラ崕鎾绘⒑閸濄儱娅忛柛瀣工閻g兘骞囬妯规睏闂佸湱鍎ら崹鑸垫綇閸儲顥婃い鎰╁灪婢跺嫰鏌熸搴㈠殌闁宠棄顦垫慨鈧柍鈺佸暞閻濇娊姊绘担铏广€婇柛鎾寸箞閹兘濡烽埡浣哄幈閻庡厜鍋撻柛鏇ㄥ厴閹锋椽姊婚崒姘卞缂佸甯¢弫宥夊籍閸喓鍘甸梺鍛婂灟閸婃牜鈧熬鎷�
|
缂傚倸鍊搁崐鎼佸磹閻戣姤鍤勯柛顐f礃閹偤骞栧ǎ顒€濡奸柣顓燁殜楠炴牕菐椤掆偓婵¤偐绱掗埀顒勫磼濞戞氨顔曢梺鐟邦嚟閸婃垵顫濈捄鍝勫殤闁瑰吋鐣崝宥夋偂韫囨稓鍙撻柛銉亽閸儱纾婚柟鎯х-閺嗭箓鏌涢妷銏℃珖鐎规挷绶氬濠氬磼濞嗘埈妲梺姹囧€曞ú銈夈€呮總绋课╅柍鍝勫€稿▓鎴︽⒑閸撴彃浜濇繛鍙夌墵瀹曞綊宕掗悙瀵稿弳闂佺粯娲栭崐鍦偓姘炬嫹
|
濠电姷鏁告慨鐑藉极閹间礁纾绘繛鎴欏灪閸嬨倝鏌曟繛褍鎳庨弳妤呮⒑缁嬭法鐏遍柛瀣〒缁牓宕橀鐣屽帗闂佸憡绻傜€氼剟鍩€椤掍焦鍊愮€规洘绮撻、妤呭礋椤戣姤瀚奸梺鑽ゅТ濞测晝浜稿▎鎾崇闁革富鍘剧壕濂告煠绾板崬澧伴悽顖涚〒缁辨帡寮崒姘亪閻庤娲栭妶鍛婁繆閻戣棄唯鐟滃繐鐣烽崼鏇熲拻濞达綀濮ょ涵鍫曟煕閿濆繒鐣垫鐐茬箻閺佹捇鏁撻敓锟�
|
闂傚倸鍊搁崐椋庣矆娓氣偓楠炴牠顢曚綅閸ヮ剚鐒肩€广儱鎳愰敍鐔兼⒑閸︻厼顣兼繝銏★耿瀹曞綊宕掑☉鏍︾盎闂佸搫绉查崝宀勬倿瑜版帗鐓涢悗锝庝邯閸欏嫰鏌$仦鐐缂佺姵绋掔换婵嬪礃閵婏妇褰撮梻鍌欒兌鏋い鎴濇楠炴劙骞栨担鍝ュ弨婵犮垼娉涢敃锕傚汲閿曞倹鐓曢柕澶堝灪濞呭棙绻涢崼鐔搞仢婵﹨娅i幏鐘诲箵閹烘繂濡烽梻浣虹帛濡繘宕滈悢鑲╁祦闊洦绋掗弲鎼佹煥閻曞倹瀚�
|
缂傚倸鍊搁崐鎼佸磹閹间礁纾归柟闂寸绾惧綊鏌熼梻瀵割槮闁汇値鍠楅妵鍕冀椤愵澀绮堕梺鎼炲妼閸婂潡寮诲☉銏℃櫆閻犲洦褰冪粻褰掓⒑閹肩偛濡界紒璇茬墦瀵濡堕崶鈺冪厯闁荤姵浜介崝瀣垝閻㈠憡鈷戠紒瀣閹癸綁鏌涢悩宕囧⒌鐎殿喖顭烽弫鎾绘偐閼碱剦妲伴梻渚€娼ф灙闁稿寒鍣e畷鎴﹀箻楠炲じ姹楅梺鍦劋閸ㄨ埖娼忛崼銉︹拺閻犳亽鍔屽▍鎰版煙閸戙倖瀚�
|
IT闂傚倸鍊搁崐鎼佸磹妞嬪海鐭嗗〒姘e亾妤犵偞鐗犻、鏇㈡晝閳ь剛澹曡ぐ鎺撶厽闁硅揪绲鹃ˉ澶岀棯椤撴稑浜鹃梻鍌欑閹诧繝宕濋弴鐐嶇喐绻濋崒妯峰亾閹烘挾绡€婵﹩鍘鹃崣鍡涙⒑缂佹ɑ绀€闁稿﹤婀遍埀顒佺啲閹凤拷
|
闂傚倸鍊搁崐椋庣矆娴i潻鑰块梺顒€绉撮崒銊ф喐閺冨牆绠栨繛宸簻鎯熼梺闈涱樈閸犳绱炴惔銏㈢瘈闁汇垽娼ф牎闂佺厧缍婄粻鏍ь嚕閸涘﹦鐟归柍褜鍓熷濠氬即閵忕娀鍞跺┑鐘茬仛閸旀牜鐟х紓鍌氬€烽懗鑸靛垔椤撱垹闂柨婵嗩槸閽冪喓鈧箍鍎遍悧婊冾瀶閵娾晜鈷戦柛娑橈攻鐏忎即鏌i悢鍙夋珚闁靛棔绀侀埢搴ㄥ箳閺冨倹婢戞繝鐢靛仦閸ㄥ爼鎮烽敃鈧埢宥夊閵堝棌鎷洪柣鐘充航閸斿苯鈻嶉幇鐗堢厵闁告垯鍊栫€氾拷
|
闂傚倸鍊搁崐鎼佸磹閻戣姤鍊块柨鏇楀亾妞ゎ亜鍟村畷褰掝敋閸涱垰鏁搁梻渚€鈧偛鑻晶鎵磼鏉堛劌娴鐐存崌楠炴帒鈹戦崼婵囧€梺璇叉唉椤煤濡厧鍨濈€光偓閸曨剙浠奸梺缁樺灱濡嫰鎮欐繝鍥ㄧ厓闁告繂瀚弸锔剧磼鏉堫偄鐨虹紒杈ㄦ崌瀹曟帒顫濋钘変壕闁归棿鐒﹂崑瀣叓閸ャ劍鈷愰柛娆忕箻閺岋綁濮€閳惰泛缍婇幆灞轿旈崨顔惧弳闂佺粯娲栭崐鍦偓姘炬嫹
|
闂傚倸鍊搁崐宄懊归崶褏鏆﹂柣銏⑶圭粣妤呮煙閹殿喖顣奸柛瀣剁節閺屾洘寰勯崼婵嗗濠电偞鍨惰彜闁衡偓娴犲鍊甸柨婵嗗暙婵$兘鏌涚€n偅宕岀€规洘甯¢幃娆撳蓟閵夈儲鏆梻鍌欑閹碱偄煤閵娾晛纾婚柣鎰劋閸婂灚銇勯幒鍡椾壕闂佸疇顫夐崹鍧楀箖濞嗘挸鐭楀鑸瞪戦敍渚€姊绘担瑙勫仩闁告柨閰e畷浼村冀瑜滈崵鏇炩攽閻樺磭顣查柡鍛倐閺屻劑鎮ら崒娑橆伓
|
   
专 题 栏 目
 婵犵數濮烽弫鍛婃叏閻戣棄鏋侀柟闂寸绾剧粯绻涢幋鐐垫噧缂佸墎鍋ら弻娑㈠Ψ椤旂厧顫╃紓浣插亾闁割偆鍠撶弧鈧梻鍌氱墛缁嬫帡鏁嶉弮鍫熺厾闁哄娉曟禒銏ゆ婢舵劖鐓ユ繝闈涙閸f椽鎮归幇銊ュ⒉闁靛洤瀚伴崺锟犲礃閵娿儱绠i梻浣筋嚃閸犳盯锝炴径鎰闁告稒娼欐导鐘绘煏婢舵ê鐏g紒鈧繝鍕=闁稿本鐟чˇ锔姐亜閿旇鐏﹂柟顔矫埞鎴犫偓锝庝簽閸欌偓濠电姰鍨奸崺鏍礉閺囩姷涓嶅┑鐘崇閸婂灚绻涢幋鐑嗕痪妞ゅ繐妫楅ˉ姘舵煕閹邦剚鈻曟繛鎾愁煼閺屾洟宕煎┑鍫㈩唺闁诲簼绲婚崑鎰閹烘鏁婇柣锝呮湰閸Q冾渻閵堝棙绌跨紓宥勭閻g兘骞囬悧鍫濅簻闂佹儳绻楅~澶婎熆閹达附鈷掑ù锝呮啞閹牊绻涚仦鍌氬鐎规洑鍗抽獮妯肩磼濡桨绮ч梻浣芥硶閸o箓骞忛敓锟�
相 关 文 章

利用QQ邮箱 让你的QQ好友
利用Windows7中的自带功
Adobe Flash CS4 试用版
Photoshop CS3新特性概览
Adobe Illustrator CS3蓄
闪客一族看过来 FlashCS
最大规模 Adobe CS4套装
Adobe Photoshop CS4最新
Adobe发布Acrobat 9、CS
Adobe CS4网页制作套装测

 
利用CSS改善网站可访问性           
利用CSS改善网站可访问性
作者:陈鹏 文章来源:eNet 点击数:115 更新时间:2009-9-12 9:08:41
 




 

最近,我不得不对我的一个客户的旧网站进行更新,使得它能够达到可访问性的标准。对三四年前的旧代码进行挖掘的想法根本没有吸引力,主要是因为我曾经使用的很多编程惯例已经不再适用,特别是从可访问性上来讲。我曾经使用绝对的字体大小,固定的页面宽度和表格来做版面设计和空间分配。

  像那时建构的很多网站一样,我的客户的网站使用了Cascading Style Sheets (CSS)来格式化文本。它没有使用任何CSS的更加强有力的版面设计功能,也没有允许HTML设备独立,而这是CSS可访问性的主要优点之一。

  问题是如何出现的?

  在我概述使网站更加具有可访问性的方法之前,了解现今众多的访问性问题的起因也许是很有帮助的:

  对HTML肤浅的理解:在1990年代的互联网大发展时期中,所有人都开始建构网站。WYSIWYG编辑器使得几乎每个人都可以很容易地建构一个网站,而不用费心去学习HTML.但不幸的是,这种在使用上的便利带来了一些蹩脚的代码,对可访问性造成了妨碍。

  HTML在设计方面的局限性:开发者和设计者经常会故意错用HTML标签,特别是<table>标签,来克服HTML在版面和设计上的局限性。这种设计方式也会带来妨碍可访问性的代码。

  什么使得CSS更具有访问性?

  CSS在1996年出现,用来解决上述的问题。通过使用CSS,你可以将一个HTML文件的内容与有关它的表现形式或风格的信息分离开来。这就使你可以应用准确的格式化并达到想要得到的版面设计,而无需使用可能会让屏幕阅读器和专门的浏览器软件产生困惑的HTML代码。

  例如,虽然HTML表格是用来排列表格式数据的,但他们也经常被用来排列对齐一个页面上的元素的。但是阅读器和例如语音合成器的软件要求有效的HTML代码。因此当他们遇到一个页面错误地使用了诸如一个表格的元素,产生的结果就会让使用者感到莫名其妙。

  CSS的另一个可访问性的优点就是它允许使用者定义他们自己的风格单,这个风格单可以与网站的风格单共同工作。因此,例如一个使用者可以设定,所有通过<p>标签定义的文本都应该是1.5em Arial,即使这个网站的风格单表示它应该是18px Verdana Bold.

  要注意用户定义的风格只有在用户的风格名称与HTML页面中的标签相符时才会起作用,这是很重要的。这就将确保兼容性的责任交到了开发者的手中。例如,如果用户的风格单指定<p>标签应显示1.5em Arial文本,但是HTML页面并不使用<p>标签来从风格单中调用一个风格(也许它使用),用户对于<p>标签定义的风格将会被忽略。因此要确保你对你的标题和段落使用标准的HTML标签,这将减少用户定义的风格单被忽略的机会。
热门推荐 MSN Spaces使用秘笈特色技巧 快速排除广域网线路时通时断故障

  开始

  如果你是从头开始建构一个新的网站,那么通过CSS来改善可访问性就会很容易。但你仍然可以轻松地将现有的网站转变为CSS形式。

  步骤1:检查现有代码

  为了更好地说明,我将用在表A中这个简单的HTML代码来代表一个使用CSS的页面。这个例子假设页面还没有使用CSS,不过你也可以使用相似的方法来评价一个基于CSS的站点。主要的不同点就是大多数的改变将发生在CSS文件中而不是HTML文件中。

  步骤2:从HTML中去掉所有特殊风格标签

  要在这个页面中加入CSS,我首先需要去掉所有要控制内容表现的标签。样本代码使用了字体标签来定义字体外观,风格和颜色。去掉这些元素使得样本代码如表B所示。

  步骤3:从HTML中去掉并替换任何错用的标签

  现在我要去掉任何错用的HTML标签。在样本代码之中,一个表格用来在页面的内容创建一个15象素的边缘,代码还使用
标签来创建段落。

  在我去掉表格和
标签之后,我将他们替换为适当的标签。例如,我对页面标题使用<h2>标签,用<p>标签来显示段落。使用这些标准HTML标签使得之后的CSS的应用变得非常容易,而且与用户定义的风格单更加兼容。现在的样本代码如表C所示。

  步骤4:建构一个CSS文件来覆盖风格信息

  现在我已经从HTML文件中去掉了所有风格信息,我需要将这些信息转移至一个CSS文件中。CSS文件仅仅是一个存为。css扩展名的文本文件,因此它可以在任何一个文本编辑器中进行创建。我使用的是Dreamweaver MX.

  为了使在HTML中应用CSS文件变得容易,我使用了名为p和h2的风格来对应标准HTML标签。我使用了可变的字体大小,使得用户可以轻松地在浏览器中增大或缩小字体大小。使用绝对大小可以防止浏览器对字体进行大小的调整(除了Netscape 6或以后的版本之外,它将不考虑绝对字体大小)。我还在需要的地方指定了字体的种类,重量和颜色。

  要重新产生由HTML标记代码创建的版面,我需要将<p>和<h2>标签设置宽度为780象素。然而,由于我们的目的是将可访问性最大化,因此我将去掉宽度设置使得页面能符合浏览器窗口的大小。而且我将让HTML页面使用浏览器的缺省边缘,而不是用原始代码的<table>标签来重新创建15象素的空白,这也使得其它例如打印机等的设备来使用它的缺省边缘设置。

  表D显示了我创建的CSS文件。我将它命名为Mystylesheet.css并将它放置在网站根目录下的一个风格文件夹之中。

  步骤5:在HTML文件上附加新的风格单

  在创建了CSS文件之后,我在HTML文件中插入了它的风格。因为HTML文件已经包括了所有在CSS文件中引用的标签(<h2>和<p>),所以我只需要连接到HTML文件头部的风格单上就可以了。HTML文件从CSS文件中获得风格并将他们应用到<h2>和<p>标签当中,如表E所示。

  步骤6:验证代码

  整个过程的最后一个步骤就是验证HTML代码的可访问性。如果你对于CSS来说是个新手的话,你最好对CSS代码也进行验证。有很多种的工具都可以帮你对二者进行验证。

  我使用Dreamweaver MX来检查我的样本代码的可访问性。你可以通过在文件菜单中选择Check Page然后选择Check Accessibility来实现。任何错误或是警告都会显示出来,还包括出现位置的行号以及对问题简要的解释。你可以在Dreamweaver MX的Reference工具中找到更多关于这些错误和警告的内容。你只要从Dreamweaver的Windows菜单中选择Reference然后从Book菜单中选择UsableNet Accessibility Reference就可以了。

  此外,World Wide Web Consortium (W3C)提供了超过30个的可访问性评估工具的链接。W3C还提供了针对HTML和CSS的基于Web的免费验证器。

  可访问性和简单的管理虽然这里给出的例子是很简单的,但它说明了利用CSS使你的站点更加具有可访问性是非常容易的。而且,对于CSS的使用不止这一个优点而已。

  基于CSS的网站要比仅仅只有HTML的网站要好管理得多。CSS文件中的风格上的变化可以应用到整个网站中而不需要改变网站中任何的HTML文件。而且CSS的使用缩小了每一个HTML文件的整体文件大小,因为所有的风格信息都存储在了CSS文件之中。

  因此如果你想要改善可访问性的话,将其视为一个机会,而不是一个障碍。要了解更多关于CSS和可访问性的内容,你可以去看一看World Wide Web Consortium中的Web Accessibility Initiative (WAI)。
热门推荐 MSN Spaces使用秘笈特色技巧 快速排除广域网线路时通时断故障

文章录入:陈鹏    责任编辑:陈鹏 
  • 上一篇文章:

  • 下一篇文章:
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
     
     
     
     
     

    Copyright © 2007 - 2009 chenpeng123.com All Rights Reserved
    本站所有文章,软件等均来自网络收集,不代表本站观点,仅供学习和研究使用。如有侵犯您的版权,请联系我们,本站将立即删除。
    鲁ICP备07014697号
    你是本站第 位访客
    51La