Web标准在中职校园网站建设中的研究与应用

来源 :电脑知识与技术 | 被引量 : 0次 | 上传用户:wyingying
下载到本地 , 更方便阅读
声明 : 本文档内容版权归属内容提供方 , 如果您对本文有版权争议 , 可与客服联系进行内容授权或下架
论文部分内容阅读
  摘要:中职校园网站是对外宣传的窗口,是展示校园文化的平台,是师生相互沟通的桥梁,因此校园网站建设显得尤为重要。文中主要对Web标准及其构成进行分析,并应用Web标准进行中职校园网站建设,实现了网页中结构、表现、行为三者相分离,获得更好的访问性能,降低了维护成本。采用Web标准进行校园网站建设是必然的选择。
  关键词:Web标准;XHTML;CSS;DIV;中职校园网站建设
  中图分类号:TP393
  文献标识码:A
  文章编号:1009-3044(2017)10-0188-02
  1.引言
  随着计算机技术的不断发展,网络在人们的生活中越来越重要,可以说网络时刻影响着人们,人们通过各种不同类型的网站获取信息、学习新知识等。对于中职学校来说,校园网站是对外宣传的窗口,是展示校园文化的平台,是师生相互沟通的桥梁,因此校园网站的建设显得尤为重要。而以往的中职校园网站,大多采用层层嵌套的表格布局和复杂冗余的代码。在校园网访问量日渐增多的情况下,网站访问者在机器CPU、GPU、内存等硬件性能影响下,要花费很长时间才能将页面打开;此外由于各浏览器的兼容性问题,页面的显示效果也是千差万别,严重影响了校园网站的应用和学校形象。因此,为了更好地与外界沟通,使中职学校得以长足发展,采用Web标准进行校园网站建设是必然的选择。
  2.Web标准概述
  2.1Web标准的提出
  Web标准,也被称为网站标准,是由国际工业协会W3C(World Wide Web Consortium)和其他标准化组织共同制定的一系列的技术规范,以此来创建和解释基于Web的内容,改变二十世纪90年代Web领域中各浏览器生产厂商之间不兼容现象。1998年这些规范被定义为“Web标准”,并在不断发展更新中,使它更方便、更有效、更强大。但它创建一始,并没有被强迫要求使用,也就没有得到网页设计人员的重视。直到近几年,随着互联网技术的不断发展和行业的规范,Web标准在网站建设中才被广泛接受和推广,成为全世界公认的标准。
  2.2 Web标准的构成
  Web标准是一系列规范共同组成的标准集合。符合Web标准的网页主要由三部分组成,即结构(Structure)、表现(Pre-sentation)和行为(Behavior)。其对应的标准也分为三个方面:结构化标准语言、表现标准语言和行为标准语言。如图1所示。
  (1)结构:结构是所有表现的基础,用于对网站数据的分类及整合。结构化标准语言主要是HTML,XML和XHTML。HT-ML超文本标记语言广泛用于现在的网页,用来为文档增加结构信息,如表示标题,<br>  表示段落等。2014年10月W3C宣布完成HTML5标准规范。XML可扩展标记语言是用来定义其它语言的一种元语言,其中的标记是关键部分,网页设计者可以用来创建内容,然后使用限定标记标记它,使每个单词短语或块成为可识别、可分类的信息,常用于网络数据的转换和描述。XHTML可扩展标识语言是用XML的规则对HTML4.0进行扩展而得,为实现HTML向XML的过渡而建立,XHTML结构要求严谨。 <br>  (2)表现:用于设计者赋予内容的一种样式。表现标准是CSS(Cascading Style Sheds)层叠样式表,用来控制网页内容的外观,如版式、颜色、字体大小等。使用CSS可简化HTML中各种复杂的标记,实现与HTML所负责的结构相分离,使网站的访问和维护更加容易。目前推荐使用的标准是CSS2.0。 <br>  (3)行为:用于用户对网页文档的交互操作,行为标准主要包括文档对象模型DOM (Document Object Model)和ECMAS—cript。DOM是行为要操作的文档对象,是浏览器与内容结构之间沟通的接口,用以访问页面上其他的标准组件。ECMAScript是ECMA(European Computer Manufacturers Associationl制定的标准脚本语言,用于实现具体的界面上对象的交互操作,目前推荐遵循的ECMAScript262主要是JavaScript技术。 <br>  3.web标准在中职校园网站建设中的应用 <br>  俗话说“没有规矩不成方圆”,任何事物有了标准才会更加完善,网站设计也是这样。基于Web标准网站设计的核心是实现内容与表现相分离,即网站的结构、表现、行为三者相分离。在中职校园网站建设中采用Web标准,实现内容与表现相分离,才是真正意义上符合Web标准的网页设计,才能达到最佳架构,提高中职校园网站可用性与用户体验。 <br>  3.1使用XHTML代码对网站内容进行架构 <br>  XHTML是网页代码的核心内容,利用XHTML标签格式化文档的内容,建立语义化文档,实现HTML向XML的过渡。所要遵循的XHTML规则如下: <br>  (1)选择相应的DOCTYPE。DOCTYPE是用来说明XHT-ML的版本,在浏览器解释文档时发挥很大的作用。XHTMLl.0提供了严格型(Striet)、框架型(Frameset)、过渡型(Trans~ion)三种选择。过渡型是当前广泛使用的类型,因此在我校校园网站建设中也是使用过渡型,其具体代碼格式如下: <br>  <!DOCTYPE html PUBLIC“-//W3C//DTD XHTML 1.0 Tran-sifional//EN”“http://www.w3.org/TR/xhtmll/DTD/xhtmll-transi-tional.dtd">。 <br>  (2)设定命名空间。这里用来指出文档的所有者,其具体代码格式如下:<html xmlrls="http://www.w3-org/1999/xhtml”>。 <br>  (3)声明编码语言。这是不可缺少的部分,它可以使代码被浏览器正确地解释并通过标识校验,代码为:<meta http-equiv="Content-Type"content="text/html;charset=gb2312"/>。这里声明的编码语言是简体中文GB2312。   (4)所有标签和属性的名字均使用小写字母书写,并为每个标签配备相应的结束标签,正确嵌套标签,将所有的属性用引号括起来并赋值。 <br>  3.2使用CSS对网站进行页面布局 <br>  布局是表现层技术的基础,所有表现层的设计都基于布局。传统的网页在设计时为了实现页面布局效果,经常会使用大量的表格,有时还会进行各种嵌套,代码的可读性降低,页面字节数直线攀升,页面内容和表现也混杂在一起,维护成本较高。为使内容和表现相分离,采用CSS的页面布局方案。 <br>  (1)用D1V来定义语义结构。D1V的中文理解为“层”,它相当于—个容器,包括起始标签<div>和结束标签之间的所有内容。div标签是XHTML页面布局的首选,整个页面更多的区域使用div来标识。以我校的三栏式布局为例,结构如图2所示: <br>  这里定义了bodv、header(页面头部)、content(页面主体内容)、footer(版权区域)四个大盒子,在content这个盒子中又分了两个小盒子:sider(边栏区域)和main(主体区域)。为使header、content和footer从上到下整齐排列,将这三个盒子均放入body中,并居中对齐,控制方便。 <br>  (2)用CSS进行样式设置。使用CSS样式表控制网页的字体、格式、颜色等,将表现都定义到CSS文件中,便于访问和维护。CSS的语法结构由三部分构成:选择符fSelectorl、属性(properct)和值(value)如:p{color:blue;font-size:14px}是将段落中文字颜色设置为蓝色,同时字体大小设置为14像素。根据页面的需求,灵活选用选择符是布局的基础。为了保证页面在不同的浏览器上能够有效一致的显示,需要按照CSS2.0标准编写CSS文件。将CSS样式表应用到XHTML中有内联样式表、内部样式表和外部样式表三种方法-引。外部样式表是最常用也是最理想的一种方式,即多个网页都可以调用同一个样式文件,通过改变一个文件就可以改变整个站点的外观,实现了代码重用的最大化和Web文件的最佳分配。使用<link>标签链接到样式表: <link tel="stylesheet"type="text/css”href="mystyle.CSS"/>浏览器会从mystyle.CSS中读到样式声明,并以此来格式文档。 <br>  3.3使用基于DOM文档对象模型的标准脚本语言 <br>  DOM的产生,缓解了网景Javaseript和微软Jscript之间的矛盾,网站设计人员能够访问站点中的脚本、数据和表现层对象。JavaSeript是用来操作DOM的脚本语言,但两者并不等同。浏览器解释Javascrip存在一定的差异性,为了保证JavaS-cript各种浏览器中执行的一致性,编写Javascript时要注意对各种情况分别加以判断和处理,编写相应的JavaScript脚本。 <br>  将JavaScript代码保存在相应"*js"的文件中,在需要时调用。如<script language="JavaScript"src="test.js"></script>。 <br>  4.wEB标准在中职校园网站建設中的应用效果分析 <br>  在中职校园网站建设中采用Web标准,首先减少了中职校园网站建设的成本。由于使用了Web标准,页面的代码和组件大大减少,带宽要求降低,如当ESPN.com使用CSS改版后,每天节约超过两兆字节(terabytes)的带宽,成本随之下降。 <br>  其次,使中职校园网站更容易被搜寻引擎搜索到。在当前各中职学校竞争激烈的情况下,使用Web标准可以让网页的下载速度与网页的显示速度更快,这在中职学校的招生工作中尤为重要。 <br>  第三,减轻了中职校园网站管理者的工作量。使用Web标准制作的网页,不需要变动页面内容就可以进行改版,便于网站的维护。 <br>  第四、提供给用户多元化的访问方式。利用Web标准设计的网站易于移植到新的硬件或者软件系统,可以被更多的设备访问,如手机、PDA、屏幕阅读器,实现了信息跨平台的可用性,用户还可以订制自己喜欢的表现界面。 <br>  最后,由于Web标准网页提供适于打印的版本,符合web标准的页面也很容易被转换成其他格式文档如word格式,用户无需复制内容便可打印所需要的内容。以上这些都可以使中职校园网站的访问者获得更好的用户体验,更有利于中职学校的长期发展。 <br>  目前国内应用Web标准进行网站的开发还处于发展阶段,因此网站设计人员还需要结合实际工作经验,进行深入研究和探讨。 </div> </section> <!-- 其他文献块 --> <section class="article-other"> <div class="article-other-header" style="color:#2162e4"><span>其他文献</span></div> <div class="article-other-content"> <div class="tit"><a href="/periodical/c574dc5902f801cd353ac533db314986.html" target="_blank" title="中华民族进行曲"> 中华民族进行曲 </a></div> <div class="con"> <正>~~ </div> <div class="typ"> <div class="typ-nam"> <span>期刊</span> </div> <div class="typ-con"> </div> </div> </div> <div class="article-other-content"> <div class="tit"><a href="/periodical/b1a81a8c73cd186037662a3bd1632e8b.html" target="_blank" title="三江水啊,永远奔腾"> 三江水啊,永远奔腾 </a></div> <div class="con"> 滚滚的黑龙江水,沿着中俄国境线向东奔腾。歌唱着抗击日寇的战斗中,结成的友谊之歌。日夜奔腾,永远奔腾。啊,中国,俄罗斯,让我们为战斗的友谊纵情歌唱。 </div> <div class="typ"> <div class="typ-nam"> <span>期刊</span> </div> <div class="typ-con"> <span><a href="/tags/%E9%BB%91%E9%BE%99%E6%B1%9F" target="_blank">黑龙江</a></span><span><a href="/tags/%E5%9B%BD%E5%A2%83%E7%BA%BF" target="_blank">国境线</a></span><span><a href="/tags/%E4%BF%84%E7%BD%97%E6%96%AF" target="_blank">俄罗斯</a></span><span><a href="/tags/%E6%88%98%E6%96%97" target="_blank">战斗</a></span><span><a href="/tags/%E6%AD%8C%E5%94%B1" target="_blank">歌唱</a></span><span><a href="/tags/%E5%8F%8B%E8%B0%8A" target="_blank">友谊</a></span><span><a href="/tags/%E4%B8%AD%E4%BF%84" target="_blank">中俄</a></span><br /> </div> </div> </div> <div class="article-other-content"> <div class="tit"><a href="/periodical/90989964e4664d4887608514547f59d7.html" target="_blank" title="加强计算机技术的应用 完善药检业务的管理"> 加强计算机技术的应用 完善药检业务的管理 </a></div> <div class="con"> </div> <div class="typ"> <div class="typ-nam"> <span>期刊</span> </div> <div class="typ-con"> <span><a href="/tags/%E8%8D%AF%E5%93%81%E6%A3%80%E9%AA%8C" target="_blank">药品检验</a></span><span><a href="/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%AE%A1%E7%90%86" target="_blank">计算机管理</a></span><span><a href="/tags/%E8%8D%AF%E5%93%81%E6%A3%80%E9%AA%8C%E6%89%80" target="_blank">药品检验所</a></span><br /> </div> </div> </div> <div class="article-other-content"> <div class="tit"><a href="/periodical/31278ae7960ac7c45d6b34bd405d622e.html" target="_blank" title="幽门螺旋杆菌感染的消化性溃疡3种用药方案的成本—效果分析"> 幽门螺旋杆菌感染的消化性溃疡3种用药方案的成本—效果分析 </a></div> <div class="con"> 成本-效果分析(CEA,Cost-effectivenessanalysis)是药物经济学最早应用和最主要的评价方法之一,其目的在于通过分析寻找达到某一治疗效果时费用最低的治疗方案。应用药物经济学有助于合理分配有限的医疗经 </div> <div class="typ"> <div class="typ-nam"> <span>期刊</span> </div> <div class="typ-con"> <span><a href="/tags/%E6%B6%88%E5%8C%96%E6%80%A7%E6%BA%83%E7%96%A1" target="_blank">消化性溃疡</a></span><span><a href="/tags/%E5%B9%BD%E9%97%A8%E8%9E%BA%E6%9D%86%E8%8F%8C" target="_blank">幽门螺杆菌</a></span><span><a href="/tags/%E8%8D%AF%E7%89%A9%E7%96%97%E6%B3%95" target="_blank">药物疗法</a></span><span><a href="/tags/%E6%88%90%E6%9C%AC-%E6%95%88%E6%9E%9C%E5%88%86%E6%9E%90" target="_blank">成本-效果分析</a></span><br /> </div> </div> </div> <div class="article-other-content"> <div class="tit"><a href="/periodical/a1428a284791d84014fb66932fea3396.html" target="_blank" title="傣家小卜少逛北京"> 傣家小卜少逛北京 </a></div> <div class="con"> 哎耶来,傣家小卜少逛北京,坐上火车心欢腾。跳起嘎秧舞,手镯碰银铃。身背扁帕花布包,短褂简裙闪金星。啊!登上天安门,广场留个影。 </div> <div class="typ"> <div class="typ-nam"> <span>期刊</span> </div> <div class="typ-con"> <span><a href="/tags/%E6%B0%91%E6%97%8F%E9%9F%B3%E4%B9%90" target="_blank">民族音乐</a></span><span><a href="/tags/%E6%AD%8C%E8%AF%8D" target="_blank">歌词</a></span><span><a href="/tags/%E9%9F%B3%E4%B9%90%E8%89%BA%E6%9C%AF" target="_blank">音乐艺术</a></span><span><a href="/tags/%E3%80%8A%E5%82%A3%E5%AE%B6%E5%B0%8F%E5%8D%9C%E5%B0%91%E9%80%9B%E5%8C%97%E4%BA%AC%E3%80%8B" target="_blank">《傣家小卜少逛北京》</a></span><br /> </div> </div> </div> <div class="article-other-content"> <div class="tit"><a href="/periodical/e85cf3abc9e18444416d3bdeff5b411e.html" target="_blank" title="发展执业药师 适应改革需求"> 发展执业药师 适应改革需求 </a></div> <div class="con"> 我国从1995年实行执业药师资格制度以来,怎样提高执业药师资格考试的合格率,就成为医药主管部门领导所关心的一件大事,特别是随着医疗保险制度改革的深入和OTC政策的出台,对执业 </div> <div class="typ"> <div class="typ-nam"> <span>期刊</span> </div> <div class="typ-con"> <span><a href="/tags/%E8%8D%AF%E5%BA%97" target="_blank">药店</a></span><span><a href="/tags/%E6%89%A7%E4%B8%9A%E8%8D%AF%E5%B8%88" target="_blank">执业药师</a></span><span><a href="/tags/%E5%8C%BB%E8%8D%AF%E8%A1%8C%E4%B8%9A%E7%AE%A1%E7%90%86" target="_blank">医药行业管理</a></span><span><a href="/tags/%E6%89%A7%E4%B8%9A%E8%8D%AF%E5%B8%88%E8%B5%84%E6%A0%BC%E7%AE%A1%E7%90%86" target="_blank">执业药师资格管理</a></span><br /> </div> </div> </div> <div class="article-other-content"> <div class="tit"><a href="/periodical/e5cbbf622c2f8d84236c6821b1f35f2b.html" target="_blank" title="认知与思考:民族声乐创作的创新之路--由士心的《你会爱上他》谈起"> 认知与思考:民族声乐创作的创新之路--由士心的《你会爱上他》谈起 </a></div> <div class="con"> 民族声乐是当代中国最具代表性的声乐门类,民族声乐作品也由此而成为当代中国声乐最具代表性的作品。对一首民族声乐作品的优良的评价,关键要看作者创作的时代背景和反映的社会 </div> <div class="typ"> <div class="typ-nam"> <span>期刊</span> </div> <div class="typ-con"> <span><a href="/tags/%E6%B0%91%E6%97%8F%E5%A3%B0%E4%B9%90%E4%BD%9C%E5%93%81" target="_blank">民族声乐作品</a></span><span><a href="/tags/%E5%A3%B0%E4%B9%90%E5%88%9B%E4%BD%9C" target="_blank">声乐创作</a></span><span><a href="/tags/%E5%88%9B%E6%96%B0%E4%B9%8B%E8%B7%AF" target="_blank">创新之路</a></span><span><a href="/tags/%E8%AE%A4%E7%9F%A5" target="_blank">认知</a></span><span><a href="/tags/%E5%BD%93%E4%BB%A3%E4%B8%AD%E5%9B%BD" target="_blank">当代中国</a></span><span><a href="/tags/%E7%94%9F%E6%B4%BB%E5%86%85%E5%AE%B9" target="_blank">生活内容</a></span><span><a href="/tags/%E6%AC%A3%E8%B5%8F%E8%80%85" target="_blank">欣赏者</a></span><span><a href="/tags/%E7%A4%BE%E4%BC%9A" target="_blank">社会</a></span><br /> </div> </div> </div> <div class="article-other-content"> <div class="tit"><a href="/periodical/ba22686d55cde86c12c2389db275c5dd.html" target="_blank" title="德宏有一条瑞丽江"> 德宏有一条瑞丽江 </a></div> <div class="con"> <正>~~ </div> <div class="typ"> <div class="typ-nam"> <span>期刊</span> </div> <div class="typ-con"> </div> </div> </div> <div class="article-other-content"> <div class="tit"><a href="/periodical/94c38ef4f0fbda18b07b9684aea52b19.html" target="_blank" title="夜的云南"> 夜的云南 </a></div> <div class="con"> 星光的唇角,偷偷吻散晚霞的晕窝。三弦的清响,把欢腾的篝火,拨得窜上天河。山茶花的脸颊,醋然醉卧,金沙江水浅浅为她吟着歌。 </div> <div class="typ"> <div class="typ-nam"> <span>期刊</span> </div> <div class="typ-con"> <span><a href="/tags/%E4%BA%91%E5%8D%97" target="_blank">云南</a></span><span><a href="/tags/%E5%B1%B1%E8%8C%B6%E8%8A%B1" target="_blank">山茶花</a></span><span><a href="/tags/%E9%87%91%E6%B2%99%E6%B1%9F" target="_blank">金沙江</a></span><br /> </div> </div> </div> <div class="article-other-content"> <div class="tit"><a href="/periodical/3cb7e3cd70df9692dc8423ebba245d30.html" target="_blank" title="新课标下高中新诗写作教学的理性思考"> 新课标下高中新诗写作教学的理性思考 </a></div> <div class="con"> 校园是孕育诗歌的肥沃土壤,青春是创作诗歌的黄金时光。高中学生正处于诗的年龄,他们血气方刚,豪情万丈,想象丰富,敢于创新,写诗,合乎他们的天性。笔者担任校报文学版编辑,在大量的学生来稿中,新诗数量要占到稿件总数的2/3,尽管这些诗作水平参差不齐,但足见校园里存在一个阵容庞大的新诗写作群,他们对新诗写作表现出浓厚的兴趣。新课程标准强调高中语文教学要“重视优秀文化遗产的传承”、“关注当代文化生活”,在高 </div> <div class="typ"> <div class="typ-nam"> <span>期刊</span> </div> <div class="typ-con"> <span><a href="/tags/%E5%86%99%E4%BD%9C%E6%95%99%E5%AD%A6" target="_blank">写作教学</a></span><span><a href="/tags/%E9%AB%98%E4%B8%AD" target="_blank">高中</a></span><span><a href="/tags/%E8%AF%AD%E6%96%87%E6%95%99%E5%AD%A6" target="_blank">语文教学</a></span><span><a href="/tags/%E6%96%B0%E8%AF%BE%E7%A8%8B%E6%A0%87%E5%87%86" target="_blank">新课程标准</a></span><span><a href="/tags/%E6%96%87%E5%8C%96%E9%81%97%E4%BA%A7" target="_blank">文化遗产</a></span><br /> </div> </div> </div> </section> </div> </div> <!-- 右侧边栏 --> <div class="col-lg-3 col-md-3 hidden-sm hidden-xs"> <div class="content-right"> <div class="sid"> <div class="tit"> <h3>与本文相关的学术论文</h3> </div> <div class="con3"> <ul> </ul> </div> <!-- <div class="bot"> <a href="#" target="_blank"><button class="btn btn-default btn-block">更 多</button></a> </div> --> </div> <div class="sid-img-ad"> <script src=/d/js/public/new5.js></script> </div> </div> </div> </div> </section> </main> <!-- 页面底部 --> <footer class="public-footer"> <section class="top"> <div class="container"> <div class="row"> <div class="col-xs-120 gongjujianjie">期刊论文Web标准在中职校园网站建设中的研究与应用发表于2017年10期电脑知识与技术作者韩莹,本篇论文的所有权归原作者韩莹所有,如果您对本文有版权争议,可与客服联系进行内容授权或下架。 </div> </div> </div> </section> <section class="bottom"> <div class="container friend-link"> <div class="row"> <div class="col-xs-12"> <span class="title">友情链接:</span> <a href="https://www.soolun.com/" target="_blank">搜论网</a> <a href="https://www.soolun.com/" target="_blank">论文下载</a> </div> </div> </div> <div class="container service-link"> <div class="row"> <div class="col-lg-9 col-md-9 col-sm-12 col-xs-12"> <div class="aboutus"> <a href="/about.html">关于我们</a> <a href="/about.html">联系我们</a> <a href="/about.html">广告服务</a> <a href="/about.html">版权声明</a> <a href="/about.html">新手指南</a> <a href="/about.html">网站地图</a> </div> <div class="kefuqq"> 客服qq:184688754 客服qq:184688754 </div> <div class="disclaimer"> <span>声明:本文档内容版权归属内容提供方,如果您对本文有版权争议,可与客服联系进行内容授权或下架</span><span>搜论网</span> © CopyRight 2018-2024 </div> </div> <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 wechat"> <div class="wechat-item"> <img src="/image/weixin.png" alt="微信客服" > <div class="img-name">微信客服</div> </div> <div class="wechat-item"> <img src="/image/weixin.png" alt="微信服务号"> <div class="img-name">微信服务号</div> </div> </div> </div> </div> </section> </footer> <script src="//cdn.bootcdn.net/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="//cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> <script src="//cdn.bootcdn.net/ajax/libs/bootstrap-hover-dropdown/2.2.1/bootstrap-hover-dropdown.min.js"></script> <script src="//cdn.bootcdn.net/ajax/libs/bootstrap-select/1.13.14/js/bootstrap-select.min.js"></script> <script src="/js/js.js?v=1.0"></script> </body> </html>