高校作为人才培养的摇篮,门户网站的设计水平直接关系到整个高校的自身形象,也在一定程度上反映了高校的办学水平和教学特色。在门户网站设计工作中,需要确保对门户网站中的各个模块进行合理的布局,通过合理的布局,不仅能够给人们带来耳目一新的感受,而且能帮助人们更加方便的访问与浏览高校的门户网站,从而更加便捷、直观的获取到所需信息。DIV与CSS技术是高校门户网站设计中的重要布局工具,通过布局技术的应用,可使网站的代码设计变得更加简洁,从而便于网站的维护,显著提高网站页面的下载速度,提高用户的体验度及网站信息的宣传作用。以下便对DIV与CSS的概念、应用优势及具体应用进行相应的研究。
DIV是区块容器,它能够对元素区域进行封闭,可将其理解为行级区域的范畴,它类似于一种容器、盒子,该容器能够将表格、图片、段落、文本等元素容纳于其中,在高校门户网站设计中,常常利用DIV技术来对网站页面的整体进行分块布局,即每个网页可以分割为多个DIV盒子进行布局。
CSS又被叫做层叠样式表,它作为一种扩展样式标准,能够有效补充HTML的样式编排功能,从而扩充HTML标记属性,并可利用JavaScript程序来控制HTML的样式编排功能,进而实现对网页的合理布局与外观设计,使网页更具美观性。
CSS通常可以使用三种方式引入到HTML文档中,其中最常用的是内嵌式和外链式。由于浏览器是从上到下解析代码的,因此要将CSS代码放到头部,以方便解析和下载。内嵌式主要通过的HTML的头部<head>标记中加入<style>标记,然后在style标记中加入相应的样式属性实现样式的设置。第二种方式是外链式,即将CSS样式代码作为一个外部文件引入到HTML中,格式为:<link type="text/css"rel="stylesheet"href="CSS样式文件路径"/>,这样的好处是CSS文件可以多次使用,避免代码的重复编写。
CSS技术可将网页样式和其展示内容进行相互分隔,可实现独立存储网页的设计信息,并实现对网页样式信息的统一式管理、存储。在门户网站设计中,经常需要将CSS样式信息进行单独存储,这样可使其他网页更加便捷的共享CSS信息,进而有效避免了对CSS样式信息的大量重复设计,在提高网站设计效率的同时也避免了许多错误的发生。
而在设计CSS样式时,主要通过使用CSS的不同选择器来指定样式所作用到的HTML对象。CSS选择器的种类繁多,设计人员可根据需要从标记选择器、类选择器、ID选择器、标签指定式选择器、后代选择器、群组选择器等中选择恰当的选择器完成样式设置。
DIV与CSS布局技术在高校门户网站设计中有着巨大的应用优势,其中最为明显的优势体现在其能够将网页内容和形式进行分离。在外观设计中,往往是对CSS进行独立存放的,而标记元素等页面信息则是存放在HTML文件之中,通过CSS进行处理,从而使内容能够在网页前台中进行显示。由此便实现了形式与内容之间的相互分离,使HTML代码的冗余度大幅减少的同时也提高了网页的访问速度。
利用DIV与CSS布局技术来设计高校门户网站,能够使该网站达到W3C标准要求。W3C标准是决定高校门户网站在搜索引擎排名的关键,这对于提高高校门户网站的知名度具有重要意义。在高校门户网站中,DIV与CSS布局会使源代码较为简洁,是table标签所无法超越的。由于无用的代码大量减少,使得内容更加突出,更容易够裸露于蜘蛛搜索引擎之中,进而使搜索引擎能够实现对网页内容的快速搜索,短时间内爬完网站。如此,人们只需搜索关键词即可快速找到高校的门户网站,这无疑提高了高校门户网站在搜索排名中的比重,从而提高了高校门户网站的知名度。
传统的网页采用的是Table表格技术设计的高校门户网站,当网站页面有着相同的视觉效果时,应用DIV与CSS布局技术的页面文件大小要小于传统table表格技术设计出来的网站。而且通过CSS技术的应用,还可显著提高用户对高校门户网站进行访问时的页面启动速度。
通过CSS与DIV布局技术来对高校门户网站进行设计,能够为高校在对门户网站进行后续维护时提供很大便利,高校只需在维护网页时对CSS文件进行相应的修改与设计即可。而对于以往的页面维护来说,其布局修改却是比较繁琐的,工作人员往往需要重新对整个门户网站进行设计。而通过CSS技术,则只需设计好网页层结构,这样在修改高校门户网站的外观时,只需修改网页结构及内同即可,并且对网页结构进行修改与设计,还可使门户网站在蜘蛛搜索引擎中的关注度得以提高。
高校门户网站作为对外宣传的重要窗口,布局方式的选取也很重要,通常会采用较为经典的布局方式,下图所示是其中一种采用了POP布局方式,即比较具有艺术感和时尚感的一种网页布局方式。具体门户首页结构如图一所示:
图一高校门户网站首页结构 下载原图
网站首页的布局主要分为header页眉区、nav导航区、banner图片新闻展示区、网站新闻与aside链接登录区、Footer网站底部区这五个区域。其中header页眉区主要放置高校名和LOGO图标,以及登录、注册、搜索等内容;nav导航区主要显示网站所包含的各个子页面模块,方便用户链接到相关的功能页面;banner图片新闻展示区常为轮播图或通过用户点击去显示目前学院的重要新闻、重要活动、展示学院内涵风貌等的图片,起到宣传学院的作用;接下来是页面中重要的新闻模块或链接登录区,通常使用DIV进行区域划分,而且此处设置比较灵活,上图中所示是较为简单的样式;在页面底部的footer区会有相关的友情链接、联系方式等信息展示。在首页中使用div的结构布局代码如下所示:
在CSS样式中主要对每个div盒子应用了宽、高、边框、边距margin、浮动等样式属性实现对网页的快速布局。
在高校门户网站中,位于其页面顶端或两侧以及页眉横幅图片上面或下面,能够进行导航链接的便是页面导航栏。在应用DIV与CSS布局技术对页面导航栏进行设计时,需要确保页面导航栏能够链接到各个子页面当中,通过页面导航栏,能帮助访问者更加快速的进入到目标子页面当中,从而使网页资源的获取变得更加便捷。对于高校门户网站来说,设置页面导航是非常重要的,一个布局合理、美观得体的页面导航栏,无疑能够大大提高整个网站的视觉吸引力,同时也能为访问者带来巨大的便利。在高校门户网站中,页面导航栏可进行不同形式的布局,其中以横向、纵向、下拉等布局形式最为常见。
大多数高校门户网站往往将导航栏设置为横向,即按照并列的方式将各个条目在导航条中一一列出,根据需要有些导航会设置二级弹出菜单,方便用户浏览、选择信息。具体做法是用DIV区域分割后,加入无序列表标记,再结合CSS样式来达到布局目的。具体步骤主要有三步,第一步是对导航栏的页面结构进行创建,以此生成基本布局。在这一步中需要利用DIV技术来建立容器,并将导航栏内容放入DIV容器中;第二步是通过HTML中的无序列表标记对DIV容器中的菜单项进行UI创建。接下来,进入第三步,在此需要利用CSS技术来对横向导航栏、二级菜单导航栏进行样式优化、美化该导航栏。CSS技术的主要实施如下:对无序列表前端的默认圆点进行清除,将各个列表项的间隔进行增加,将边框样式添加到对应的列表项当中,对二级导航菜单定位,设置样式。下面以高校门户网站中横向导航栏及下拉二级导航栏的设计为例进行应用。其具体代码为:
1)HTML中DIV布局的具体代码为:
2)CSS样式
CSS美化效果的样式设置代码需单独存放为styles1.css的文件,并在head标记中加入语句<link href="css/styles1.css"rel="stylesheet">,具体的样式代码如下:
综上所述,将DIV与CSS布局技术应用到高校门户网站设计工作中,既能够减少网站页面的代码冗余,使其具有清晰的代码结构,还能给高校门户网站的后续维护带来很大便利。随着DIV与CSS布局技术及Web前端技术的日益成熟,其在高校门户网站的应用价值还将得到进一步展现。
沪公网安备 31011502008038号
微信扫码关注