仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 932|回复: 8
打印 上一主题 下一主题

[DIV+CSS] 来看看:使用CSS款式表改良网站可会见性

[复制链接]
老尸 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:13:14 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
最新版本html5+CSS3与2014年10月29日,万维网联盟宣布,经过几乎8年的艰辛努力,该标准规范终于最终制定完成。
比来,我不能不对我的一个客户的旧网站举行更新,使得它可以到达可会见性的尺度。对三四年前的旧代码举行发掘的设法基本没有吸引力,次要是由于我已经利用的良多编程常规已不再合用,出格是从可会见性下去讲。
我已经利用相对的字体巨细,流动的页面宽度和表格来做版面计划和空间分派。
像当时建构的良多网站一样,我的客户的网站利用了CascadingStyleSheets(CSS)来格局化文本。它没有利用任何CSS的加倍强无力的版面计划功效,也没有同意HTML设备自力,而这是CSS可会见性的次要长处之一。
成绩是怎样呈现的?
在我概述使网站加倍具有可会见性的办法之前,懂得当今浩瀚的会见性成绩的原因大概是很有匡助的:
对HTML浅薄的了解:在1990年月的互联网年夜开展时代中,一切人都入手下手建构网站。WYSIWYG编纂器使得几近每一个人都能够很简单地建构一个网站,而不必操心往进修HTML。但不幸的是,这类在利用上的便当带来了一些糟糕的代码,对可会见性形成了妨害。
HTML在计划方面的范围性:开辟者和计划者常常会存心错用HTML标签,出格是<table>标签,来克制HTML在版面和计划上的范围性。这类计划体例也会带来妨害可会见性的代码。
甚么使得CSS更具有会见性?
CSS在1996年呈现,用来办理上述的成绩。经由过程利用CSS,你能够将一个HTML文件的内容与有关它的体现情势或作风的信息分别开来。这就使你能够使用正确的格局化并到达想要失掉的版面计划,而无需利用大概会让屏幕浏览器和专门的扫瞄器软件发生狐疑的HTML代码。
比方,固然HTML表格是用来分列表格局数据的,但他们也常常被用来分列对齐一个页面上的元素的。可是浏览器和比方语音分解器的软件请求无效的HTML代码。因而当他们碰到一个页面毛病地利用了诸如一个表格的元素,发生的了局就会让利用者感应稀里糊涂。
CSS的另外一个可会见性的长处就是它同意利用者界说他们本人的作风单,这个作风单能够与网站的作风单配合事情。因而,比方一个利用者能够设定,一切经由过程<p>标签订义的文本都应当是1.5emArial,即便这个网站的作风单暗示它应当是18pxVerdanaBold。
要注重用户界说的作风只要在用户的作风称号与HTML页面中的标签符合时才会起感化,这是很主要的。这就将确保兼容性的义务交到了开辟者的手中。比方,假如用户的作风单指定<p>标签应显现1.5emArial文本,可是HTML页面其实不利用<p>标签来从作风单中挪用一个作风(大概它利用<fontclass=”bodytext”>),用户关于<p>标签订义的作风将会被疏忽。因而要确保你对你的题目和段落利用尺度的HTML标签,这将削减用户界说的作风单被疏忽的时机。
入手下手
假如你是重新入手下手建构一个新的网站,那末经由过程CSS来改良可会见性就会很简单。但你仍旧能够轻松地将现有的网站变化为CSS情势。
步骤1:反省现有代码
为了更好地申明,我将用在表A中这个复杂的HTML代码来代表一个利用CSS的页面。这个例子假定页面还没有利用CSS,不外你也能够利用类似的办法来评价一个基于CSS的站点。次要的分歧点就是年夜多半的改动将产生在CSS文件中而不是HTML文件中。
步骤2:从HTML中往失落一切特别作风标签
要在这个页面中到场CSS,我起首必要往失落一切要把持内容体现的标签。样本代码利用了字体标签来界说字体表面,作风和色彩。往失落这些元素使得样本代码如表B所示。
步骤3:从HTML中往失落并交换任何错用的标签
如今我要往失落任何错用的HTML标签。在样本代码当中,一个表格用来在页面的内容创立一个15象素的边沿,代码还利用<br>标签来创立段落。
在我往失落表格和<br>标签以后,我将他们交换为得当的标签。比方,我对页面题目利用<h2>标签,用<p>标签来显现段落。利用这些尺度HTML标签使得以后的CSS的使用变得十分简单,并且与用户界说的作风单加倍兼容。如今的样本代码如表C所示。
步骤4:建构一个CSS文件来掩盖作风信息
如今我已从HTML文件中往失落了一切作风信息,我必要将这些信息转移至一个CSS文件中。CSS文件仅仅是一个存为.css扩大名的文本文件,因而它能够在任何一个文本编纂器中举行创立。我利用的是DreamweaverMX。
为了使在HTML中使用CSS文件变得简单,我利用了名为p和h2的作风来对应尺度HTML标签。我利用了可变的字体巨细,使得用户能够轻松地在扫瞄器中增年夜或减少字体巨细。利用相对巨细能够避免扫瞄器对字体举行巨细的调剂(除Netscape6或今后的版本以外,它将不思索相对字体巨细)。我还在必要的中央指定了字体的品种,分量和色彩。
要从头发生由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代码也举行考证。有良多种的工具都能够帮你对两者举行考证。
我利用DreamweaverMX来反省我的样本代码的可会见性。你能够经由过程在文件菜单当选择CheckPage然后选择CheckAccessibility来完成。任何毛病或是告诫城市显现出来,还包含呈现地位的行号和对成绩扼要的注释。你能够在DreamweaverMX的Reference工具中找到更多关于这些毛病和告诫的内容。你只需从Dreamweaver的Windows菜单当选择Reference然后从Book菜单当选择UsableNetAccessibilityReference就能够了。
别的,WorldWideWebConsortium(W3C)供应了凌驾30个的可会见性评价工具的链接。W3C还供应了针对HTML和CSS的基于Web的收费考证器。
可会见性和复杂的办理
固然这里给出的例子是很复杂的,但它申明了使用CSS使你的站点加倍具有可会见性长短常简单的。并且,关于CSS的利用不止这一个长处罢了。
基于CSS的网站要比仅仅只要HTML的网站要好办理很多。CSS文件中的作风上的变更能够使用到全部网站中而不必要改动网站中任何的HTML文件。并且CSS的利用减少了每个HTML文件的全体文件巨细,由于一切的作风信息都存储在了CSS文件当中。
因而假如你想要改良可会见性的话,将其视为一个时机,而不是一个停滞。要懂得更多关于CSS和可会见性的内容,你能够往看一看WorldWideWebConsortium中的WebAccessibilityInitiative

</p>
Table中布局中,垃圾代码会很多,一些修饰的样式及布局的代码混合一起,很不利于直观。而Div更能体现样式和结构相分离,结构的重构性强。
莫相离 该用户已被删除
沙发
发表于 2015-1-18 05:42:20 | 只看该作者
在刚开始接触网页的第一堂课上,听说网页制作会是一门很无聊并且很难听懂的过程,而事实却印证了这样一个事实。
小魔女 该用户已被删除
板凳
发表于 2015-1-26 21:24:28 | 只看该作者
以上大概就是文字图片的一些链接方法,通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识,他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起,其功能强大,使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。
金色的骷髅 该用户已被删除
地板
发表于 2015-2-4 22:14:59 | 只看该作者
所见则所得网页编辑器的优点就是直观性,使用方便,容易上手.
海妖 该用户已被删除
5#
发表于 2015-2-10 22:30:23 | 只看该作者
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。
再现理想 该用户已被删除
6#
发表于 2015-3-1 17:17:47 | 只看该作者
Dreamweaver在所见即所得添加链接,也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈,用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。
深爱那片海 该用户已被删除
7#
发表于 2015-3-10 21:49:23 | 只看该作者
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。
兰色精灵 该用户已被删除
8#
发表于 2015-3-17 11:37:47 | 只看该作者
可以使用 CSS 检查工具进行设计。
乐观 该用户已被删除
9#
发表于 2015-3-24 10:22:51 | 只看该作者
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-5-16 19:23

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表