网页标准化设计（精选10篇）
网页标准化设计 篇1
1概述
近年来,笔者持续参与信息无障碍标准的起草和评审工作,以及众多网站的无障碍规划和测试。以上海市政府部门网站的无障碍改造为例, 《“十二五”期间上海市残疾人事业主要发展指标》 指出:政府网站实施无障碍改造的比例,预期性大于80%。据上海市政府部门网站管理中心、有关承建单位的不完全统计,上海市共有64家政府部门网站纳入无障碍改造计划 ( 其中区县政府网站17家, 委办局网站47家 )。截至2014年12月,已实施无障碍改造的54家,正实施和待实施的网站10家,上海市政府64家网站实施无障碍改造比例已达84.38%, 这些网站的无障碍改造为相关标准的应用和完善提供了丰富的实践经验。
纵观国内外有关网页设计的无障碍标准,它们的一大共同点,就是强调无障碍网站的四项基本原则:
(1) 网页内容必须是可感知的;
(2) 网页内容中的界面组件必须是可操作的;
(3) 网页内容和控件必须是可理解的;
(4) 网页内容应具备足够兼容性和前瞻性,能够与当前及未来的用户代理(包括辅助技术)协同工作。
以上这些可简述为:“可感知、可操作、可理解、 以及兼容性”,是每个设计人员应该遵循和掌握的基本原则。
2网页设计无障碍方案的流程和要点
一个合格的、适合读屏软件操作、符合视力障碍用户需求的无障碍网站,它的一般设计流程可总结为:
(1) 检测分析:根据无障碍标准对改造前的网站进行检测及体验,分析、讨论、汇总存在的问题。 这方面工作可采取智能化的测试平台和人工实际体验相结合的方式。
(2) 方案设计:根据存在问题结合网站信息无障碍改造的标准和目标,设计相应的无障碍解决方案。
(3) 实施开发:根据解决方案,遵循相关技术标准,利用信息无障碍技术进行实施开发工作。
(4) 测试体验:通过系统测试、人工测试、用户体验相结合的方式,全方位地保障改造成果。
(5) 运行维护:为保证无障碍的可持续性,对改造后的网站进行必要的运行维护,持续测试体验, 反馈和修正可能出现的偏差。
在具体改造设计过程中,依据目前颁布的无障碍设计标准,主要针对以下要点进行设计和开发:
(1) 针对网页不同布局形式提供统一的无障碍网页操作方法,避免由于操作不当引起问题。
(2) 针对内容页面进行单独设置,直接读正文内容。
(3) 对图形验证码提供语音提示功能,对图片等内容提供必要的文字说明。
(4) 避免在切换Tab键时产生焦点无法移动、导致键盘陷入的现象,同时注意打开网页时Tab键焦点的定位点和光标键的移动顺序。
(5) 提出快捷键实施方案,提供一整套热点跳转、 区域跳转、栏目跳转等快捷键。并注意这些快捷键是否与已有的系统快捷键、读屏软件快捷键相冲突。
(6) 为功能性操作提供语音提示,提供有意义的可理解的提示性说明内容。
(7) 统一页面 “开启 / 关闭” 方式,避免焦点直接返回桌面。
(8) 为繁琐的非文本内容提供替代内容页面。
(9) 区分各网页标题,帮助读屏用户正确定位。
(10) 部署无障碍工具条,方便低视力和老年用户按需调节屏幕显示样式;提供纯文本模式浏览, 提供语音插件。但必须注意不能仅以此来替代上述各项必要的无障碍设计。
页面改造则结合辅助功能以及无障碍检测工具的模式进行:
(1) 采用DIV+CSS+JS技术路线实现网站结构、 表现、行为相分离的基本要求;对功能性内容、 Flash等进行无障碍设计,使其不依赖鼠标,即使用键盘也可完成正常操作,适合视力障碍人群浏览。
(2) 辅助工具条充分考虑不同布局、不同色觉环境下的颜色辨识度和文字放大率,设计开发功能完善的辅助浏览工具条,可集约化部署在某一中心门户网站上,供各部门网站共享。
(3) 采用先进的云平台技术理念,从功能、性能及安全性等要求进行架构设计,搭建网站语音服务
(4) 无障碍检测根据WCAG2.0以及相关的国家标准和行业标准,设计开发无障碍检测网关,采用HTML解析技术定位网页元素,通过与网站内容管理系统的整合对新增内容进行无障碍检测,确保信息发布无障碍的可持续性。
需要注意以下两点:
(1) 网站无障碍建设应满足全体人群在任何情况下都能平等、方便、无障碍地获取和利用信息。在保持网站原有风格和功能、不改变视力健全人士浏览网站和获取信息服务的基础上提升视障人群访问政府网站的便捷性、准确性。
(2) 实践证明,在网站的无障碍建设过程中,必须始终按照国际通用的WCAG2.0标准和规范以及相关的国家标准和行业标准,采用国际领先的无障碍建设方法进行,而不是简单的通过架设某一服务器端推送的语音系统或语音频道来代替全网站的无障碍设计和改造。
3实现强化的无障碍语音导航和快捷键操作
设计一套优化的语音提示跳转链接,配合区域跳转、栏目跳转、热点或锚点跳转等快捷操作,帮助读屏软件用户快速准确地在众多的页面和栏目链接内定位。
为了充分说明语音导航和快捷键跳转的特点, 可参见图1和图2。
其中图1为某区政府门户网站首页的部分屏幕截图,是我们平时所熟悉的网页样式。而图2是将该网页另存为文本文档 (*.txt) 后的屏幕截图。与原来的网页相比,在头部区域新出现了:“无障碍操作说明跳转到网站导航区跳转到主要内容区域”等隐含的链接,这些通过语音提示获取的隐含链接, 必须使用读屏软件方可朗读出来,视力障碍用户可以根据语音提示回车确认,快速跳转到需要的位置。
通常我们为读屏软件用户专门设计了一套统一的键盘快捷键操作方案,例如:
(1) 支持全键盘操作,无需依赖于鼠标。一般采用Tab键、光标键切换、回车键确认等,辅以读屏软件配置的朗读功能键实现网页的浏览和内容页的朗读。
(2) 栏目跳转,实现栏目分组间的跳转;一般采用Ctrl + Z键。
(3) 区域跳转,实现页面内各区块的跳转,主要包括:顶部导航区、左部导航区、中间内容区、主要内容区、底部内容区等区块; 一般采用组合键: Alt + Shift + 数字键1,2,3,…, 等。
(4) 热点跳转快捷键,可分别快速定位到:跳转到无障碍操作说明页面、 跳转到主菜单 ( 网站导航 )、 跳转到主要内容区域、跳转到网站地图链接,等。 一般采用Ctrl( 或Alt) + 数字键1,2,3,…, 等。
4网站无障碍改造的其他技术要点
网站无障碍改造的推进,除了上述各项技术要点外,还应该注重以下几点:
(1) 坚持以用户体验为核心,视障人群全程参与的原则。
引入体验员监督机制,通过组织招聘无障碍体验人员,在项目建设的前、中、后期以及整个运维过程中全程参与,以利于问题的发现和解决。
(2) 坚持可持续发展的原则。
网站信息无障碍建设是一个长期的系统工程, 必须在整个过程中重视无障碍建设,坚持贯彻无障碍标准和规范。同时关注人员组织的可持续性,加强技术交流与培训,促使本地化技术力量不断成熟发展。
(3) 加强网站管理人员、技术开发人员的培训工作。
目前有关网站无障碍设计的国家标准和行业标准已经出台,一方面有必要在各地设立权威的测试网点,另一方面迫切需要对网站的从业人员进行标准化的培训,使得网站管理人员、技术开发人员充分了解视力障碍用户的需求、网站中存在的障碍现象,语音读屏软件的基本操作方法等,避免引入不切实际的改造方案。
5与民生服务密切相关的网站无障碍改造
当前,政府部门网站、残联系统网站等率先垂范, 取得了很好的经验和成果,但对于为数众多的其他服务部门网站和大众传媒网站等,无障碍改造的任务还很艰巨,这些与残障人士息息相关的服务部门网站还存在着大量的障碍。据了解,中国残疾人联合会等正在拟定相关的政策指导意见,希望各类网站的无障碍改造能继续深入展开。
网页标准化设计 篇2
的恐惧.
对搜索引擎的友好
这是最大的优点.搜索引擎十分喜欢标题标签,标签或者段落中的粗体对搜索引擎来说并没有多大意义,使用正确的
~
标记标题花不了多少时间,但是却能帮助搜索引擎为你的页面建立索引,让用户更容易找到你的网页.
搜索引擎的机器人非常重视标题标签中的内容,或许,你会想要在里面堆上几个关键字,在他们处理完和标签之后,紧接着就会处理页面内容中的标题标签,如果你的页面上没有使用标题标签的话,那这些在你的标题中的关键字不会引起他们的重视,被他们忽略.
所以,只需要花少少的时间,就能让其他人更容易通过内容找到你的网页,听起来不错,对吧?
附带一提的标签顺序
在上面的示例中,在页面中最重要的就是标题,因为他是整个文档的标题,因此,我们将使用最重要的标题标签
,根据W3C,有些人认为跳过标题层并不是什么好习惯,举例说明,假设我们有下面这么一份网页:
Super Cool Page Title
那么下一个标题(如果不是另一个
网页设计初探 篇3
关键词:网页设计;元素;色彩
互联网技术日新月异的发展,已成为人们生活中不可缺少的一部分。互联网的发展使信息传达的范围速度与效率都产生了质的飞跃,随着时代的发展,网站建设越来越接近于一门艺术而不仅仅是一项技术。
——引言
网页设计作为一个全新的设计领域,没有照搬的模式,没有从属和延续但任何设计形式又有去规律和标准。但也有些出学的设计者,将艺术的设计语言和设计理念抛到脑后,机械的完成设计,完全成为了技术的奴隶,因此,我想从平面设计基础理论在网页设计的应用来浅谈我对网页设计的理解,希望给广大读者带来一些启发。
一、平面设计元素在网页布局中的应用
第一个要素——点:在日常生活中很多东西都可以看作点,如晶莹剔透的一颗雨滴,大海中的一页孤舟,星空中的一轮明月……从几何学角度来说,点是线的交点,它没有大小和形状;从造型艺术来说,点是最基本的要素,指画面中某一小块区域;从视觉的角度而言点不但有大小还有形状。在具体构成中点并非都是以远的形式出现的,一些较小的个体元素都可以视为点。例如,在网页中的一些按钮就可以当作点来处理。在运用点的时候重点不仅在于外形,更在于点在整个空间中所起的作用,在相同的视觉环境下相对面积越小点的感觉越强。点越多其间隔就越短,免得感觉就越强,这对把握画面的整体效果和统一画面十分重要。
在Racing乐队网站中20个大小相同的圆点铺满了首页这些圆点既是页面中的按钮,又是页面的装饰元素,在不同的色彩映衬下圆点似乎产生了韵律感和运动感,浏览者的视线会不断在这些点之间徘徊决定最终去向。
第二个要素——线:线是由无数个点构成的根据其长度宽度方向等构成线。线是点移动的轨迹线在页面中有强调分割引导的作用。垂直的线给人平稳挺拔的感觉;弧线使人感到流畅轻盈;曲线使人跳动不安。不同粗细的线在空间的性格也是不同的,粗线条给人粗犷,勇敢阳刚的感觉;细线条可以表达锐利敏感速度之感;当粗线和细线进行结合时粗线必定先进入视觉,若线的长短符合透视规律,就能表达出强烈的空间感。因而,线的构成在网页设计中有着广泛的应用,网页设计师常用简洁的线条进行页面构图,以此传递丰富的视觉信息和思想感情。
第三个要素——面:根据几何学定义,面是线移动的轨迹。点和线的密集可形成面;面的分割面与面的合成亦形成新的面。面试构成空间的基本单位一段文字可以视为一个面,一张图像可以看作一个大面,一大片留白可以成为一个面"面"的概念不是固定的,面试网页构成中常用的元素,它的大小曲直变化都会影响页面的整体布局。
分割面是规划空间的重要手段,在网页设计中,设计者通过面的分割组合虚实交替等多种手法来实现页面的整体效果。在网页设计技术中表格和框架就是用来分割页面的利用面的分割,可是网页页面主体清晰,层次分明。避免杂乱的重要原则就是:少即是多。另外,在网页设计中要敢于留白,善于留空。空白可以定义为页面中没有安排内容的地方,空白空间并不一定是白色的,它可以是环境空间的颜色或图案。
第四个要素——空间:网页设计中的空间并非生活中的立体空间,而是一个假象的空间,是看得见而摸不着的,是在二维平面上建立的空间关系。在设计中,我们可以利用对比强烈的大标题可以作为前景,大面积的正文构成中景,附属的版权信息构成背景。实践证明,这种清晰而和谐的层次关系,极大地提高了页面的整体艺术效果。
二、网页设计中色彩的运用
网页界面艺术设计离不开色彩的应用,当打开一个网站的时候,给用户留下第一印象的既不是网站丰富的内容,也不是网站合理的布局,而是网站的色彩,尤其是在体现界面的时候,色彩对人的视觉效果非常明显,一个网站设计的成功与否,在某种程度上取决于设计者对网页界面設计颜色的运用和搭配。
在网页设计选择颜色时应注意几点事项:第一不要大面积使用很高的纯单色,否则会使浏览者感到视觉疲劳;第二当网站面对的用户超出本国范围时,最好使用网络安全色;第三为增强网页的可读性,背景与文字内容的亮度差最好在102以上。
在色彩运用过程中,由于生活地理文化位置的差异不同的人对色彩的喜恶有很大的差异。如生活在高原地区的人喜欢用暗色;生活在草原地区的人用红色;生活在闹市区的人喜欢用淡色……在网页设计时想要透过色彩传达某一意象时,必须将色彩形成的背景因素与目标群结合分析。同时色彩的认知是会变动的同样的一群人在不同的时间地点都会对色彩产生不同的解读。因此,不但要关注上述因素,还要考虑到网页配色的共性:色彩的鲜明性;色彩的独立性;色彩的功能性和习惯性;色彩的有限性;色彩的周期性。
三、结束语
网页界面页面设计的一个基本特色便是吸引浏览者,一个美观漂亮的页面不管内容多么空洞,也会有人欣赏,反之一个内容充实但页面简陋却往往不会有人去浏览,从这便可看出网页界面艺术设计是多么的重要。网页界面艺术设计是永远也学不完的一门学问,因为它会跟着你的成长也变化,直到形成你的一种风格,网页界面艺术设计需要大胆创新,需要新的思维,需要不断的努力。
网络对艺术设计行业同时造成了威胁和机遇。真正有魅力的设计师设计者的思想素养对艺术的理解及表现技术的综合体现。任何设计最终都是为人所用的,特别是网页设计的艺术表现,它既是传播信息的载体又是传递美感的使者,设计者只有不断增强交叉设计的能力,使艺术与技术有效地结合才能适应不断变化的时代!
参考文献:
网页标准化设计 篇4
随着近几年互联网行业的迅速发展,网页制作相关行业的人才需求不断扩大,且薪资待遇逐年上升。从各大招聘网站发布的招聘信息来看,网站类主要分为三大类:网页美工、web前端以及网站后台开发。
1、网页美工:一般情况下,此岗位偏设计更多。通过分析用户需求,利用设计软件如Photoshop、AI等,完成对网页效果图的设计。美工人员需要把握网站整体风格、用户体验等。
2、web前端:此岗位更加侧重于页面交互功能的实现,主要以运用javascript为代表的一类客户端语言,实现网站的特效、数据处理等。
3、网站后台开发:此岗位多以程序开发为主,主要以运用PHP、JSP等服务器端语言建立动态网站,例如对后台数据库的读写,从而实现网页内容的动态更新。
从上述岗位来看,似乎专业定位非常准确,不同专业可以胜任相应的岗位,但随着近几年行业的不断发展,用人需求和要求都发生了很大的变化,主要体现在以下几点:
1、低端人才过剩。由于社会需求的刺激,大量的院校都开设了网页相关课程用于培养网页人才,但师资与课程内容方面的欠缺,使得基础、低端的网页人才大量涌现,而低端岗位数量有限,使得竞争十分的激烈,薪资相对较低。
2、高端人才重金难求。与低端人才市场激烈的竞争形成强烈对比的是网页高端人才呈现重金难求的局面。许多用人单位为了节省人力成本,要求员工不仅要有专长,还要有足够多的知识面和技能。网页美工与web前端的界限似乎变得越来越模糊,这里主要是针对javascript的要求,而网站后台开发有时也要兼顾web前端的相关工作。而传统网页人才分专业特点式的培养方式显然无法完全满足这种需求。
3、技术发展更新迅速。随着新一代web技术的普及应用,富互联网应用程序开始进入大众的视线,它更加注重用户体验,如FLEX、HTML5等技术。这需要网页人才掌握更加前沿的技术。
二、课程现状分析
伴随网站建设相关人才社会需求的不断扩大,《网页设计与制作》课程已经越来越被各高职院校所重视,并已经成为信息类专业的必修课程。高职院校所开设专业种类繁多,且各有自身特点,侧重不同,这对于制定《网页设计与制作》课程内容就提出了一定要求,例如图形设计类专业优势在于设计,对于网页效果图,网页布局制作等方面更加容易上手,而软件、网络等专业重点学习的是语言、数据库等,所以更加适合程序开发,从事网站后台开发或web前端开发。
目前很多高校尽管开设了网页相关课程,但是课程内容确实五花八门,有的甚至还在学习已经被淘汰的内容。有的专业开设网页课程只要求学生基本了解,扩展知识面即可,而有的专业需要针具体的工作岗位,与学生的就业挂钩。无论是出于何种目标,《网页设计与制作》课程的内容必须是标准化的,不能因为专业不同而脱离课程知识点本身,各专业应该根据自身需求,从标准化的课程内容中选取所需的知识点。
三、课程标准化建设的思路分析
1、明确课程目标,完善课程知识体系。任何一门课程,都有其自身的体系结构,无论从事何种岗位,都不能改变课程知识点本身,而是依据所需要的知识点,从整个课程体系中进行选取,而不是改变。高职院校专业种类繁多,专业特点不同,但改变不了《网页设计与制作》这门课程自身的知识体系,应该建立完整的课程知识体系,由不同人群自由选取学习。
2、完善教学资源,满足不同层次学习人群。课程标准化建设,是根据完整的知识体系构建课程内容,然《网页设计与制作》这门课程所涉及的知识内容繁多,针对的工作岗位也有区别。针对不同人群的需求,课程内容制定应该尽量层次分明,案例教学应更加碎片化。
3、加强课程群建设,构建完整课程体系。网站建设所需要的知识技能非常多,并不是一门《网页设计与制作》课程所能包含完整的,《网页设计与制作》课程似乎更像扮演着一个承上启下的角色。例如要建站,首先必须要有网页效果图,而制作效果图需要用到平面设计的知识;而要实现网站的动态管理与内容的动态更新,有需要学习PHP、JSP等服务器端技术,《网页设计与制作》课程只是整个建站知识体系中的一个重要组成部分,要想更好的理解和掌握《网页设计与制作》课程知识点,加强关联课程的建设显得尤为重要。
4、跟踪技术发展,实时更新课程内容。课程知识点不能一成不变,当前技术发展迅速,新旧技术交替很快,应及时了解技术最新发展,及时更新调整课程内容。
四、总结
课程标准化建设是一项庞大而细致的工程,需要付出大量的人力来实现,但课程标准化建设却是一项一劳永逸的方式,只要构建起完整的标准化的课程体系,后期只需定时进行小的更新和补充,那么无论是《网页设计与制作》课程的内容质量还是网页制作人才的培养质量都将得到很大的提升,这是值得的!
摘要：随着互联网技术的不断发展,社会需求的不断增加,《网页设计与制作》课程已逐渐成为各高职院校信息类专业的必修课程。本文针对不同院校专业特点不同或师资参差不齐等原因而造成的课程内容杂乱无序的情况,探讨一下《网页设计与制作》课程内容的标准化建设。
关键词：网页设计与制作,标准化建设,高职院校
参考文献
[1]郑伟、薛岚.高职院校图形类专业实践教学研究[J].科技资讯,2010(12):248-248.
[2]郑伟.高职院校非图形类专业《网页设计与制作》课程教学改革的探讨[J].福建电脑,2011,27(1):205-206.
网页标准化设计 篇5
这是一个网页
……
……
很显然的，这种结构的网页代码是不符合Web标准规范的，但是浏览器仍然可以很好的呈现出这个网页来，只要代码没出什么错误，这个其实就像是用Table布局的页面跟Div构架的页面一样，浏览器都可以呈现出来，关健是哪个页面呈现的质量会更高。
做出一个页面，跟做好一个页面，中间有着很遥远的距离。
在浏览器的发展历程中，微软凭借着将Internet Explorer捆绑进Windows操作系统中，从来成为浏览器市场上的霸主，从而也造成了一系列的IE对W3C组织所制定的Web标准于不顾的事情，微软的IE一直都只遵循自家的Web标准。很庆幸的是，微软决定在他的IE8中支持Web标准，虽然这事还没最终确定。除微软的IE外，Mozilla Firefox、Apple Safari、Opera、Chrome等浏览器则以支持Web标准的名义与IE做得长久的对抗。
浏览器的不同，于是就造成了对HTML代码默认解析的不同，所以即使同样的代码在不同的浏览器下也可能呈现出不同的样式来，于是这就需要有一份众浏览器都遵循的规则来协调众浏览器之间的差异，这份规则需要一个声明来引用它，这个声明就是DOCTYPE——document type(文档类型)。
DOCTYPE声明是标准网页中必不可少的部分，所以，想要制作一个符合W3C标准的网页，首先就需要为这个页面声明一个文档类型。
DOCTYPE所声明的DTD(文档类型定义)分为三种，分别是：
Transitional(过渡的)：要求不是很严格的DTD，允许你继续在页面中使用HTML4.01的标签;
Strict(严格的)：这是制作页面时理想的DTD方式，但是这个文档类型定义不允许使用任何的表现层上的标签和属性;
Frameset(框架的)：这个专门针对页面设计中包含有框架的DTD，
电脑资料
由于框架型的设计可能对网页在搜索引擎中收录的影响，很多网页中都不使用框架设计;而Strict的DTD对于大多数人来说还只是一种理想化的方式;Transitional型的DTD则是目前最适用也是使用最广泛的文档类型定义。
现在随便打开一个符合Web标准的网页，都可以在页面的最开始处看到这样一句声明：
这是一个关于XHTML网页文档的DOCTYPE声明。当然并不是说DOCTYPE声明只能针对XHTML网页文档，对于使用HTML4.01的网页文档来说，同样可以使用DOCTYPE声明：
过渡的DTD：
严格的DTD：
唯一需要注意的是，DOCTYPE声明的位置必须是位于页面的最开始处，在DOCTYPE声明代码之前不能出现任何的代码或是标签，否则页面中的标签或是CSS样式可能会失效。
网页标准化设计 篇6
1 web标准的概念
Web标准作为网页的设计标准, 一般与WWW各方面的定义相关, 也与相关技术规范及说明标准相关。网页是以愉悦方式呈现的文档, 它具有很强的美学意义。网页文档在其构成元素上分为了行为、结构以及表现三个层次, 因此, 与之相对应的标准也具有三个部分, 结构式的语言标准包括XML和XHTML, 表现语言包括CSS, 而行为标准包括了对象模型等。
2 网页设计使用web标准的优点
2.1 对于使用者而言, 使用更方便, 操作更简捷
使用Web标准化设计出来的网页, 符合标准的网页结构, 使之在进行搜索时更容易进行相关判断及进行信息的评估, 在建立索引上也更为准确。网页的良好结构即使没有CSS表现样式的支持, 依然可以进行完整信息的有序显示, 这样可以为用户提供良好的便利及使用不同的设备。如果网页设计符合标准, 便可以进行其他格式信息的转换, 比如, 采用数据表格式或者转换成便携式文件等, 还可以接入到PDA或者网络电视中使用, 实现了不同阶层人们的无障碍浏览。
2.2 对于设计者而言, 使用效果更好, 效率更高
在进行网页设计时, 通过使用Web标准, 将网页的具体内容与样式分离开来, 可以让同一个设计被多次使用, 使得代码实现了重用的功能。进而减少了多余代码, 使得软件开发速度得到了提升。
3 Web标准在网站建设中的应用
目前, 很多的设计者, 在谈论到Web标准及重构时, 喜欢用DIV+CSS来予以描述, 然而, 在事实上这种说法或者理解缺乏理论性依据。这也是Web标准设计误区的具体体现。其实, 准确来说用HTML+DIV比较恰当, 在Web标准的实际应用中, 笔者主要从网页的结构、表现以及行为三个方面进行探讨。
3.1 规范书写HTML语言
回到网页的实质, 我们对HTML进行准确解释非常重要。它是Hypertext Marker Language的缩写, 而网页通过内在的结构及表现出的内容为用户提供需要的信息, 因而, 对HTML进行规范性书写非常重要。
(1) 对DOCTYPE的选择。在使用Web标准设计的网页中, DOCTYPE这个元素非常重要, 只有对文档的类型进行确定, 才可以正常打开或者解析, 完成网页的完整及正常呈现。 (2) 空间名称的设定。我们通常需要给文档空间拟定一个标记, 以便告知用户这个文档的所属者, 比如代码:
。 (3) 对文档元信息进行设置。在这里需要对meta信息进行正确的描述, 比如, 可以使用name及content属性配合来进行网页的设置及描述, 以方面引擎的的检索。 (4) 网页语义化。网络的发展, 使得网页的设计也从十年前的table转型为现在的DIV+CSS, 在结构标签的选择上, 使用了div标签。其实, 通过使用HTML, 其标签元素也得到更新与升级, 使得标签元素更为丰富。
3.2 在网页表现设计上使用了CSS设计
CSS是一种计算机的高级语言, 它是用来表现HTML或者XML等样式文件的。
(1) css语法。CSS是由选择器及多条声明组成, 在每条声明中, 均由一个值或者一个属性构成。比如在h1{color:red;font-size:14px;}中, 就是利用h1的元素对文字的颜色进行了红色的确定, 同时也完成了字体大小的设置。在这里, 选择器是h1, 属性是color、font-size, 值是14px及red。 (2) css选择器。Css选择器包括了类选择器及标签选择器等很多种, 在对Css进行设计时, 就需要对选择器进行正确的选择。这也是一种非常好的编程习惯。还有很多的设计者, 在进行选择器的选择时, 需要对所有的额区块进行划分Div, 并且需要对所有的Div样式进行ID选择器的选择, 这种做法是不对的。这其中就需要对类选择器及ID选择器进行区分, 在类选择器的使用上, 是为了所有的文档XHTML标签指定CSS样式, 而ID选择器是不能反复或者重复使用的。如果在一个XHTML文档使用了ID选择器的话, 它就会将CSS样式指定给一个标签。 (3) 浏览器兼容性。随着智能型手机及各种平板的使用, 用户在进行浏览器选择时多了更多的选择。但由于浏览器默认值的差别, 因而在对Web标准予以默认时, css便可以利用Adobe Dreamweaver软件进行浏览器兼容性的测试。此外, 还可以利用Css Hack, 对浏览器的不同问题进行解析, 这就需要针对浏览器的不同而需要进行CSS的书写, 使之可以兼容各种类型的浏览器。
4 结语
随着网络的飞速发展, 信息化进程不断加快, 网站已经成为了人们生活及享受服务的窗口, 起到了不可替代的作用。作为一个网站的设计师, 不仅需要对网站网页的审美进行设计, 还要对网站建立的目的及作用进行了解, 对其传递信息实现共享的实质予以掌握, 才能够在网站搜索及引擎的优化上进行研究及创新, 充分利用网页的标准化设计, 将网站网页建设得更符合用户的心理需求, 以很强的可读性及观赏性, 满足不同层次人们的需要, 同时也减少了维护及投资成本, 维护方便。
摘要：网站作为互联网信息的载体, 随着互联网的不断升级, 其信息的承载量越来越多, 对于网站前端在设计层面技术含量还很低, 虽然在入门容易, 但是设计出容易收录及美观的引擎还远远达不到设计要求。想要建立兼容性强且具有良好管理的无障碍网站需要面临的困难还很多。笔者结合网页的本质, 对网页实时Web标准化设计的必要性以及要如何利用Web对网页进行标准化设计进行了阐述。
关键词：web标准化,互联网,载体
参考文献
[1]吴大非.网页界面的视觉设计研究[J].电脑知识与技术, 2010年29期.
网页标准化设计 篇7
1.1 定义
Web标准是引导网站建设和实践的主要操作方法,主要由网页设计技术规范、设计原理内容及网站设计各方面定义等组成,给人们提供了网页设计参考。从Web特点上分析,网页标准与内容规范具有一致性,不仅可以指导万维网,还可以将部分内容扩展到互联网,对网络服务器管理与设计等内容均产生了巨大影响。经过分析发现,网页标准主要由网页开发工具、习惯用法、厂商独有技术及非标准、标准发布等因素组成。网络标准化设计的核心就是区分网页与文档。网页一般从美学角度上给人们呈现较强的内容,可以实现文档内容向美学的扩展,满足了广大读者群体的实际需求,由文档结构、行为与表现等内容组成。结构式语言标准主要由HTML和XML组成,表现语言为CSS,行为标准包含了用户模型。
1.2 网页标准化设计使用的优势
第一,从使用者角度分析。网页标准化设计符合使用者的使用习惯,设计出的网站更加方便快捷,而且操作速度较快。简而言之,Web标准设计的网页是标准的原始结构,可以方便用户进行相关信息的搜索,而且可以及时对相关信息进行评估,索引较准确。网页良好的标准就是是否缺少CSS的支持,同时可有序的展示信息,给用户提供较多的便利,能够使用不同设备进行操作。
第二,对使用者而言比较高效。Web标准化实现了内容与样式的分离,可以多次使用一个设计,而且必须要重新代码,减少了不必要代码的冗余,提高了网站开发速度。同时网页标准化还可以实现脚本复用操作,此种操作方式不仅减少了工作量,同时还减轻了维护成本,只需结合网站建设需求,对某处代码进行改变即可得到理想的网站效果。
第三,从服务器角度分析,降低了服务器成本。随着内容、行为与表现的分离,实现了CSS样式多次复用操作,减少了市场固定网站设计编辑器产生的冗余代码问题,尤其是将其应用到大型网站建设中,可以调用CSS样式表。用户首次访问网页时可以单独调用一个CSS样式表,进而将CSS样式保存在本地缓存中,可以利用访问调用方式使用该样式网页,进而方便了本地读取操作。同时节省了大量的带宽,减轻了硬件处理任务量和服务器负荷,实际应用质量较高,延长了服务器使用寿命。
2 网页标准化设计在网站建设中的具体应用
2.1 使用正确的结构化标记
进行网站建设的基础性工作就是从网页本质精确定义HTML。网页就是使用特定结构利用一定内容组成的页面,可以供浏览者浏览,因此只有规范数学,HTML才能建设高质量的网站。第一,合理选择。添加合理的,说明XHTML或使用HTML的版本,然后,浏览器可根据版本定义文档类型及页面代码。经过分析,XHTML1.0主要由框架型、过渡型及严格型组成,一般过渡型较容易被人们接受。在Web标准网页设计中具有很大作用,只有确定正确的文档类型,才能正常的解析并打开,进而完整详细的呈现网页内容。第二,设定空间名称。在建设网站的时候,需要给文档拟定一个合理的编辑,提醒该文档的所属者,例如代码<html xmlns=“http://w3.org/1 999/xhtml”>。第三,合理设置文档元信息。合理设计文档元信息可以精确的描述网页内容,并给其配置name属性,设定描述网页的关键词,进而方便用户的搜索。一般设计时,可以实现文件头http-equov属性与content的结合,然后构建网页语言与编码信息。
2.2 采用CSS设计网页的具体应用
CSS表示层叠样式表单,是一种表现XML或HT-ML文件样式的计算机语言。第一,CSS语法。CSS规则主要由一条或多条声明及选择器构成,每条声明中均由一个值与属性组成。例如,h2{color:green;fontsize:12px;},此例子中,表示将h2单元中的文字颜色定义为绿色,将字体设置为12像素。h2表示选择器,font-size与color均为属性,green和12px表示值。第二,CSS选择器。CSS选择器主要由类选择器、标签选择器等组成,进行实际设计时,可以结合需求合理选择,养成良好的编程习惯。经过分析发现,很多设计人员选用选择器时,要将全部区域划分为若干个Div,然后结合需求,选择ID选择器和Div样式,此种操作不符合编程习惯,而且会出现很多问题。在实际编辑中,必须区分ID选择器与类选择器,为了所有文档XHT-ML标签均为CSS样式,在操作中不能重复使用ID选择器。如果选择XHTML文档时使用了ID选择器,就会将CSS样式指定给特定的标签。第三,目前在科学技术的带动下,智能手机和平板电脑逐渐普及,给用户提供了多种类别的浏览器。但是由于不同浏览器对web标准的默认值不同,因此,在编辑或创建CSS时,可以使用Adobe Dream weaver中的测试工具,对不同浏览器的兼容性进行测试。同时还要合理使用Css Hsck,根据不同浏览器的特点,书写各种样式的CSS,进而符合不同浏览器的浏览需求,满足用户需求。
2.3 使用DIV+CSS方法进行页面布局
传统HTML代码编写中,主要利用表格完成页面布局。实际设计时,为了营造较强的页面布局效果,会嵌套大量的表格,因此导致HTML文档结构较混乱,这种大量操作不仅让文档中含有较多的表格,而且页面节数不断增加,将页面与表格杂糅在一起。随着Web的出现,将<table>标签原始的语义,让其布局不再局限于页面,可以使用DIV+CSS方法操作。
3 Web标准化设计中容易出现的问题
第一,DIV+CSS为Web标准。此种问题在实际设计中很容易被人们误解,实际上DIV+CSS只是进行网站编写的一种技术手段,但不能涵盖所有Web标准。Web标准不仅可实现HTML到XHTML的转变,而且结构较清晰,实现了内容的分离,但DIV+CSS仅仅可实现此种思想。实际分析可以发现,较多符合标准页面要求的设计均使用DIV+CSS制作。
第二,Web标准不使用表格。实现Web标准并不是不使用<table>标签,只是实际便捷中提倡使用DIV+CSS替代传统的<table>,实际上<table>标签也是XHTML1.0中的标准化标签。使用<table>布局的主要缺陷是将表格与内容杂糅在一起,不利于内容的充分使用,而且从语义角度分析,W3C制作<table>时,仅仅将其作为表格定义,文档中如果有表格,可以使用<table>标签,但定位与排版等操作均由CSS独立完成。
第三,将通过验证作为网页设计的主要目的。为了规范Web标准的推广应用,W3W官方网站中给予了代码效验操作,可以了解设计网页是否符合Web标准。但是,需要注意的是,W3W效验的提供,仅仅可以帮助更多的网站设计者及时对XHTML代码的书写规范程度进行分析,CSS属于CSS2范畴。代码标准只是实现网页标准化的基础,并不能表示实现了标准化。通常设计完成后,还要从网页结构、多种设备及浏览速度等了解网页设计的目的。
参考文献
[1]朱双六.网页设计无障碍标准应用[J].信息技术与标准化,2015,(04):126.
[2]黄丽达.关于网页标准化设计在网站建设中的研究及应用探讨[J].数字技术与应用,2014,(03):99-100.
[3]张建淳.标准化网页界面的交互设计模式研究[J].艺术与设计(理论),2014,(07):47-49.
网页标准化设计 篇8
为积极探索电子文件管理规律, 全面推进电子文件管理工作, 在国家电子文件管理部际联席会议的规划和部署下, 启动了“国家电子文件管理信息系统试点工程”项目, 选择天津、吉林、国土资源部、卫生部、国家电网公司等地方、中央部委和国有企业开展电子文件管理试点工作。
在国土资源部网站, 网页电子文件是国土资源部业务活动的记录和凭证, 是对国土资源政务公开等业务信息进行回顾、分析和证明的重要资源;但由于网页长期缺乏相关技术和标准进行档案化保存管理, 导致网页信息变动的历史痕迹无法保留, 难以展示网站发展历程, 网页信息也无法作为法律凭证使用。
要对网页进行长期保存, 首先应采取适当的技术对其进行及时和可靠的归档管理, 但是目前对网页信息进行数字归档保存, 国内外都尚未进行有效尝试, 基本处于空白状态, 难以有直接的网页电子文件管理经验可参考借鉴。国土资源网页电子文件管理的目标定位在“重要信息保存、信息发布凭证、时代文化承载”, 对网页归档的规律进行探索, 实现国土资源网页的归档长期保存, 支持业务管理决策需求, 更可作为国土资源司法诉讼的重要依据。
基于网页电子文件信息统一管理的需要, 国土资源部以网页电子文件管理为创新发展点, 探索实现网页电子文件规范化管理, 初步建立具备真实性、完整性和有效性的网页电子文件管理系统。网页电子文件管理系统管理的资源对象不同于普通电子文件, 它不仅要以电子档案形式保存网页的版式样式, 管理多个网页之间的组合封装关系, 还要能够展现原网页的超链接关系, 具有一定的特殊性和复杂性。
网页电子文件管理系统建设与标准规范建设是相辅相成的。一方面, 系统建设必须遵循相关标准规范, 其设计、开发和实施等需要标准规范进行指导;另一方面, 标准规范的制定和维护离不开信息系统的工程实践, 标准和规范必须符合信息系统的实际需求, 随着信息系统建设的不断深入, 标准和规范也要不断完善。
2 网页特点
2.1 网页
网页由若干元素组成, 网页元素是指网页中使用到的一切用于组织网页结构和表达网页内容的对象。目前网页元素主要包括以下类型:文本、图片、超级链接、动画、音乐、表单等。在网页这些组成元素中, 属于组织网页结构的元素有:表格 (布局) 、层、导航条、链接等;属于表达网页内容的要素:文本、图像、视频、flash等。
网页具有以下特点:信息分散、信息非结构化、不同网页之间的信息冗余严重、网站网页的信息量巨大、部分网页动态变化频繁, 且网页文件之间的超链接关系复杂, 这样导致网页文件不适合或难以长期保存。
2.2 网页电子文件相关概念
在万维网 (WWW) 上的一个超媒体文档称之为一个网页。网页是以htm、html、shtml、xml、asp、jsp、php、perl、cgi等为后缀的文件, 网页通常要通过网页浏览器来阅读。国土资源网页通常是HTML格式 (文件扩展名为.html或.htm) 的文件, 它具有静态和动态页面。
电子文件是机关、团体、企事业单位和其他组织在处理公务过程中, 通过计算机等电子设备形成、办理、传输和存储的文字、图表、图像、音频、视频等不同形式的信息记录。
版式文件是版面呈现效果固定的电子文件, 版式文件的呈现与设备无关, 在各种设备上阅读、打印或印刷时, 其版面的呈现结果都是一致的。目前, 我国正在制定国家标准《电子文件存储与交换格式文书类版式文档格式规范》 (即OFD版式文件格式) 。网页电子文件可以是指HTML格式的原始网页文件, 也可以是指已将网页效果固化了的版式文件。国土资源网页电子文件管理是将HTML格式网页转化为符合该国家标准的OFD版式文件 (即网页版式电子文件) 。
3 电子文件管理标准化现状
为规范和促进电子文件管理, 国家和相关行业已研制了一系列电子文件管理标准规范。电子文件管理行业标准主要有:DA/T 46-2009《文书类电子文件元数据方案》、DA/T 47-2009《版式电子文件长期保存格式需求》、DA/T 48-2009《基于XML的电子文件封装规范》等。
电子文件管理国家标准主要有:GB/Z 23283-2009《基于文件的电子信息的长期保存》、GB/T26163.1-2010《信息与文献文件管理过程文件元数据第1部分:原则》、GB/T 26162.1-2010《信息与文献文件管理第1部分:通则》、GB/T 19667.1-2005《基于XML的电子公文格式规范第1部分:总则》、GB/T 19667.2-2005《基于XML的电子公文格式规范第2部分:公文体》、GB/T 20530-2006《文献档案资料数字化工作导则》等。
同时, 有关单位和标准化技术委员会积极研制了一批电子文件管理国家标准。这些标准有的已发布, 有的正在研制或报批。这些标准主要有:GB/T29194-2012《电子文件管理系统功能要求》;《电子文件存储与交换格式文书类版式文档》和《电子文件存储与交换格式文书类流式文档》;《电子文件管理装备规范》;《电子文件归档与电子档案管理规范》;《电子文件元数据基本集》;《文书类电子文件长期保存格式规范》等。
电子文件管理标准化建设, 虽然尚未形成一个完整的成熟的标准体系, 但现已发布的标准规范和正在进行的一系列标准化创新探索, 将促使电子文件管理逐步规范化, 为未来电子文件管理标准化研制与实践提供了大量有益经验。
4 国土资源网页电子文件管理
国土资源试点建立网页电子文件管理系统, 探索对网页电子文件实现规范化管理, 首先应对国土资源网页特征进行分析, 找出网页电子文件与其他电子文件之间的主要差别, 以抓住网页电子文件的主要本质特征, 便于采取相应的技术抓取和保存网页。针对网页的特点, 国土资源网页电子文件管理采取相应的技术方案如表1所示。
通过采集HTML格式网页, 将其转化成OFD版式格式的电子文件, 在保留原有网页中的文字、图形、图像等各种要素的同时, 还保留网页的链接逻辑关系, 并提供长期有效的网页版式电子文件的查询利用服务, 使历史网页的风貌和信息能够重现, 有据可查, 真实性、有效性和安全性得到保障。国土资源网页电子文件管理全过程包括以下方面:
(1) 网页电子文件采集
针对网页特点, 国土资源部采用网络爬虫技术采集网站网页, 网络爬虫获取目标网站拓扑结构和相应的网页、并记录网页实体的元数据, 建立全文索引。采集时, 部署网页信息自动采集器, 通过以下步骤采集网页:
●采集策略编辑:针对网站拓扑结构、采集深度、不同网页组成元素、采集周期、网页文件实体元数据等设置采集策略;
●自动采集:爬虫自动对网页资源进行全量或增量采集;
●页面信息资源的处理:对采集到的网页进行脚本、样式、网页内嵌资源的路径、网页链接地址等处理, 以保持其内容和样式完整性。
(2) 网页版式电子文件制作
将采集到的网页制作成符合国家标准OFD格式的版式电子文件, 以便实现网页文件的版面和内容能够长期固定, 其呈现效果不会因软硬件环境和操作者的变化而变化, 利于长期保存和重现网页电子文件的历史风貌。
通过可视化配置操作, 对网页框架、脚本、样式、锚点、占位符和字体等排版规则进行配置、将网页中不同网页组成元素 (完整转化、非完整转化、不可转化的) 以及数字签名按照一定的规则转化为OFD文件。
●网页元素预处理:对已采集的页面元素进行初步筛选清理, 去除冗余数据;
●定位和排版:精确定位网页文件中每个页面元素 (包括:文字、线条和图像等) 的位置, 形成相应的定位数据, 追求贴近浏览器静态呈现效果;
●OFD格式转换:将排版后的位置信息形成OFD文件数据。
(3) 网页电子文件归档
将制作完成的OFD网页版式电子文件进行捕获、登记审核和分类归档。对已捕获的网页版式电子文件按照一定的分类原则和方法进行自动分类, 对于无法进行自动分类的网页电子文件, 系统支持对其手动分类。一个网页电子文件可以选择多个分类方法。
(4) 网页电子文件存储与备份
为防止网页版式电子文件丢失或被破坏而造成的损失, 应对网页电子文件及其元数据进行分类存储与备份管理。
(5) 网页电子文件利用
包括网页电子文件的阅读、检索、打印以及统计等。
(6) 网页电子文件处置管理
包括网页电子文件的销毁、移交和续存。
5 国土资源网页电子文件管理标准化
国土资源网页电子文件管理标准是在国家电子文件管理系统建设相关标准基础上进行扩展, 它指导和规范网页这类特殊电子文件的建设, 对网页电子文件进行全生命周期的规范管理。围绕网页电子文件归档目的和系统管理, 主要制定了以下国土资源网页电子文件管理标准和规章制度:
5.1 国土资源网页电子文件元数据
网页电子文件元数据的目的是将网页电子文件全过程管理信息与网页电子文件之间建立逻辑关联。该标准规定了国土资源部网页电子文件的基本元数据集, 以及网页电子文件元数据的扩展原则和方法。
根据《电子文件元数据基本集》和GB/T 26163《信息与文献文件管理过程文件元数据》, 网页电子文件元数据主要包括以下类型:
●网页电子文件实体的元数据;
●网页电子文件管理机构人员实体的元数据;
●网页电子文件记录的国土资源业务实体的元数据;
●网页电子文件管理过程的元数据;
●网页电子文件操作权限实体的元数据;
●实体相互关系的元数据;
网页电子文件元数据实体之间关系如图1所示。
5.2 网页电子文件封装规范
网页电子文件封装是将若干网页电子文件与其元数据等内容按照本规范的封装结构和封装方法以一定的业务逻辑封装在一个数据包中, 以维护网页电子文件与其元数据的完整性, 保障两者之间的可靠联系, 实现网页电子文件业务管理的目的和要求。
网页电子文件封装包中可以封装有多个网页, 同一网页电子文件还可以包含不同格式的计算机文件 (如HTML格式和OFD格式) 。在国土资源网页电子文件管理系统中, 目前只针对网页转化成OFD格式的版式网页电子文件进行封装。
国土资源版式网页电子文件按照件、卷、类、宗的层级结构进行封装, 其聚合层次模型如图2所示。
(1) 件。一个OFD版式文件由一个HTML格式的网页转化为OFD格式文件而来。网页利用时, 也可能出现将多个单页OFD文件合成为一个多页OFD文件的情况, 合成后的文件仍然可认为是在另一个宗类体系中一个“件”。
(2) 卷。按照一定的主题等内容特征和外部特征编立的, 具有密切联系的若干文件的组合体。卷也可以按照主题, 或时间周期等方式分为若干子卷。
在国土资源部网页电子文件管理系统中, 现阶段采用的是卷下可设多级子卷, 也可直接对应多个件的管理方式。
(3) 类。全宗文件的分类方法, 可按照组织方式、时间周期、专题进行分类。在国土资源网页电子文件管理系统中, 根据组织方式的不同, 宗进一步分为“风貌类”、“内容类”、“专题类”三个类, 根据业务需求将来宗下可再增加新的类。
●风貌类:按照时间轴、网站中网页的原始样式和风格, 并按一定的爬取层级限定和时间周期爬取和整理而成;
●内容类:按照国土资源部网站本身的栏目设置和结构, 重点将各层级下的所有网页的内容部分都进行爬取和保存, 以便于管理和封装;
●专题类:按照网页电子文件管理人员或者相关用户的需要, 设定特定的主题, 并围绕这一主题爬取相关的网页, 同时用户需设定主题的时间范围和爬取层级的深度, 爬取后集中放到“专题类”下进行管理和封装。
类通常可以分为若干子类, 但此三类目前不设子类。类下可分卷, 也可直接对应多个件。
(4) 宗。机构网站的网页电子文件按照某种逻辑关系组成有机整体。按照国土资源部网站的简体中文、繁体中文、英文三种语言, 国土资源网页电子文件管理系统将其划分成三个宗进行管理。
国土资源网页电子文件封装包中包含网页电子文件、网页电子文件元数据、电子签名、封装包描述信息, 其结构模型如图3所示。
5.3 网页电子文件管理系统建设规范
本标准规定了网页电子文件管理系统建设的原则、系统功能架构以及系统功能等, 系统功能架构如图4。
5.4 网页电子文件转换与存储规范
本规范是一项标准化指导性技术文件, 规定了国土资源网页主要组成元素的类型 (如文本、图片、超级链接等) 以及网页元素所对应的HTML标签类型 (如格式类型标签、表单类型标签等) 、可制作成OFD版式文件的组成元素的范围界定、网页转化为OFD版式文件的规则和要求、网页元素与OFD版式文件元素之间的对应关系, 同时还对网站建设的技术要求等进行了约束, 以指导网站网页建设, 便于网页后期制作成OFD版式文件。
5.5 网页电子文件归档和电子档案管理办法
本办法是一项规章制度, 是对网页电子文件采集、制作、鉴定归档、存储备份、整理利用以及处置 (销毁、移交、续存) 等生命周期中各个阶段进行管理时应遵循的相关管理规定。本办法主要包括网页电子文件管理的流程和角色、网页电子文件各个管理阶段的管理对象、管理要求、管理职责等方面内容。
参考文献
SVG网页数字图像标准的应用 篇9
关键词：可申缩景图形,可扩展标记语言
0前言
可伸缩矢量图像(Scalable Vector Graphics,SVG)是万维网联盟W 3 C推出的基于可扩展标记语言X M L的图形标准,具有使得网络应用小型化,快速化,更具互动性的特点。
1数字图像系统概述
在位图中,一幅图像是由一系列矩形像素阵列根据相对位置和不同的颜色赋予不同的数值。这些数值是根据三原色RGB矩阵得出。当图像精细,分辨率高时,所需要的数据量就会急速增大,甚至无法达到计算机存储和处理的要求。很多时候都需要对所得的图像进行(如图1所示)。
在矢量图系统中,一幅图像的描述是通过对一系列不同的基本几何图形的描述构成的。与位图的对相应像素填充方法不同,矢量图告知观察器相应的图形应该在哪些具体的坐标被画出来。
位图主要用于数码照相等系统中。传感器阵列比较容易将得到的信号转换成JPEG,PNG,GIF等位图格式,在传输存储中位图的使用也较广泛。因此在SVG出现之前,所有的浏览器也都只支持位图格式。矢量图无级缩放的特性使其在计算机辅助设计(CAD),高清制图,Flash动画中应用较为理想。由于矢量图大多以二进制或比特流编码封装,浏览器或其他应用程序难以提取出其中内嵌的信息,服务器也不能利用外部数据动态创建矢量图,因此矢量图对其中的信息是严密封装的,并没有特别的程序可以来浏览或创建。
2 SVG简要介绍
可伸缩矢量图像是W3C在2000年发布的一种开放的标准文本式矢量图形描述语言。使用SVG可以在网页上显示出各种各样的高质量的矢量图形,包括许多图像处理中常见的功能,如图形、文字、动画、颜色、滤镜效果等。最关键的是SVG完全用普通文本来描述。也就是说,这是一种专门为网络而设计的基于文本的图像格式。并且SVG基于XML,可扩展性很强,能够描述任意复杂的图像。
SVG严格遵从XML语法,并用文本格式的描述性语言来描述图像内容,因此是一种和图像分辨率无关的矢量图形格式。SVG图形格式具有以下优点:
(1)基于X M L标准
X M L是公认的下一代网络标记语言,拥有无穷的生命力。SVG在最开始设计的时候就基于XML,这使得它具有一种先天的优势,并且同HTML、CSS、DOM、XSL、JavaScript、CGI一样,成为新的标准。
(2)高质量的图像
由于基于矢量,使得SVG图像的质量得到大大的提高。放大、缩小以及各种特效都比位图的表现要好,在打印的时候,完全可以以印刷质量输出图片。SVG图像在客户端动态绘制,用户可以随意调整图像的一些参数而不会导致图像模糊。SVG图像的大小只与图形的复杂程度有关,而与图形的具体尺寸无关。
(3)灵活易用的文件格式
SVG主要由三个部分组成:矢量图形、位图和文字。由于SVG文件是以文本的形式(XML)存放的,更改起来是非常方便。也就是说,可以不用任何图像处理工具,仅仅用记事本就可以生成一个SVG图像。在页面运行的过程中,我们也可以对很多部分做修改。而其中的图形描述又可以被任何人重复的使用。
(4)支持交互和动画
SVG支持SMIL(synchronized multimedia integration language),使得用户可以自由的同SVG中的元素完成一些交互的动作,从而完成既定的目标,这一点在目前单独依靠图片是完成不了的,需要由网页中的Script语句来实现。
(5)支持字符查找
在SVG中可以查找“图片”中的字符,这在其它格式的图片文件中则是不可思议的。
(6)支持Xlink和Xpointer
这意味着我们可以在SVG文档之间制作超链接,这使我们可以制作出完全由SVG构成的WEB站点。这个站点可以包含图片、文本以及拥有与用户进行交互的能力。如果要浏览这样的站点,你首先得要安装一个SVG的阅读器,推荐使用Adobe公司的Adobe SVG Viewer 2.0,但它只能用在Windows和Mac OS上。使用一个合适的Java虚拟,Apache的Batik viewer可以运行在任何平台上。
SVG的历史最早可以追溯到1998年4月,W3C联盟先后收到了两个关于新的图形格式的提案,即Adobe、IBM、SUN等公司联合制定的PGML(Precision Graphics Markup Language,精确图形标记语言)和微软、Macromedia等公司提交的类似矢量图形标准VML(Vector Markup Language,向量标记语言)。虽然PGML和VML都是使用CSS的XML向量语言,但二者却是相互竞争的对手。从功能上分析,他们的区别是PGML比较适合专业设计和出版,而VML适合普通的矢量图形应用。采用哪一个作为通用矢量图形标准是一件十分困难的事情,为了更好地促进XML向量图形的发展,W3C决定在融合两者优点的基础上,开发一种新的语言即SVG。W3C期望SVG这种基于开放标准的可扩展语言,能够满足Web开发者对动态、可缩放和平台无关的Web内容表现和交互手段日益增长的需求。
根据W3C官方网站的介绍,SVG第一个草案出台于1999年2月。2000年8月,W3C组织正式发布了SVG 1.0规范。2003年1月14日,W3C组织发布了SVG 1.1规范。目前,SVG最新版本是2005年4月发布的SVG 1.2草案。
W3C组织为了在全平台上推广SVG,推出了很多SVG的子集以适应相应的SVG应用。SVG Basic又称SVGB(Scalable Vector Graphics,Basic Profile),译为“可缩放的矢量图形标准的基本版”。是SVG的一个子集,而主要目标是为掌上电脑等高端移动设备提供矢量图形显示格式。SVG Tiny又称SVGT(Scalable Vector Graphics,Tiny Profile),译为“可缩放的矢量图形标准的微型简化版本”。它也是SVG的一个子集,而主要为手机等低端移动设备提供矢量图形显示格式。
3 SVG技术原理分析
3.1例子分析
一个最简单的例子:
例子中的SVG首先画了一个矩形,然后写了一段文字,接着利用路径元素画了一个三角形,最后在浏览器中显示效果如图2所示。
这里我们可以看到SVG是一种标签化的语言,和HTML一样,通过不同的标签标识不同的元素。SVG文档是以.svg格式存放的,开头必须如下格式:
文档最后必须写成如下格式:
中间就是svg文件的主要部分,使用的是SVG的图像描述语句。第一句话是定义了一个视口坐标系和用户坐标系,缺省的情况下两者是一致的,度量单位也相同,如果属性值没有带单位,则使用用户坐标系的长度单位-像素(pixal)。大多数情况下,用户坐标系的原点处在视口的左上角,X轴的正向朝右,Y轴的正向朝下,即如果不进行坐标变换,一切渲染都是以初始坐标系为准。
因此,上面这个例子就是简单的填充出矩形,然后加上文字,再利用路径元素画出了一个黑色的三角形。
3.2为SVG中元素加上超链接
SVG是基于XML的,而"xlink"和"xpointer"等都是XML特有的,所以S V G就自然而然获得了X M L所定义的链接的好处和功能。因此,SVG可以为其中任意元素,包括文字图形或其他,加上超链接。
通常添加超链接的格式如下:
只需将如上格式嵌套在整个SVG文件中即可。
除了以上这种通常做法,还有三种添加超链接的方法:
(1)通过SVG元素的“id”属性对元素进行链接与标识。如somfile.svg#someplace。
(2)使用与XML兼容的“xpointer”。如somefile.svg#xpointer(id("someplace"))。
(3)使用SVG的“viewBox”说明。
因不常用,这里不给出具体的说明,请参考相应的文档。
3.3 SVG利用