网页下载速度与网页设计论文

2022-04-21

近日小编精心整理了《网页下载速度与网页设计论文(精选3篇)》的文章,希望能够很好的帮助到大家,谢谢大家对小编的支持和鼓励。>美容篇IE跟随操作系统一同入驻我们的电脑,于是就成了大多数网虫所选择的浏览器。因为它的界面风格、菜单中命令的布局与操作系统一样规范,并且有许多相似的地方,从而减少了使用者不需要专门学习就可直接运用。

网页下载速度与网页设计论文 篇1:

CSS技术在网页设计中的应用研究

摘要:随着网络技術的快速发展,网络的功能日趋多样化,通过网络,不仅可以发挥其教育作用,还可以丰富人们的生活,目前,网络已经成为人们生活中必不可少的内容,各式各样的网站、网觅、网络游戏、网络软件都对人们产生了重要的影响,尤其是网瓦在人们生活中占据着尤为重要的位置,在查找资料,了解知识的过程中,都离不开网页的支持,因而,文章进行网页设计,研究网页设计的相关内容,具有重要的现实意义。

关键词:CSS技术;网页设计;应用

CSS技术也被称为层叠样式表,是一种计算机语言,与C语言类似,在计算机网页设计中占据了重要的位置,利用CSS技术,可以有效进行网页设计,增加网页的灵活性,有效进行网页链接,控制网页文件大小,保证网页的质量。总而言之,研究CSS技术在网页设计中的应用十分必要。本文以此展开研究,希望可以提出一点建议与思考,促进CSS技术的发展,保证网页设计效果。

1 CSS技术概述

CSS技术是一种计算机语言,也被称为层叠样式表,是一种文件样式的计算机语言。CSS技术的主要功能是进行网页设计,不仅可以静态修饰网页,还可以对网页进行动态的修饰,增加网页的设计感,提升网页的感染力[1]。CSS技术作为文件样式的计算机语言,可以对元素位置进行精确的控$lj,有效控制排版,合理利用所有样式的字体字号,具有网页对象与模型的编辑能力。css技术作为一种标记语言,作为一种样式,具有显著的特点:(1)具有丰富的样式定义。在CSS技术应用时,CSS技术为文档样式提供了丰富的外观,保证了样式的丰富性,在网页设计过程中,CSS技术具有背景属性能力以及文本设计能力,可以拉近元素间的距离,改变文本的大小,修饰方式,保证网页设计效果。(2)方便修改和使用。CSS技术的样式定义属于style属性中,可以在文档中指定恰当的CSS技术,方便HTML页面的引用,可以利用CSS样表将所有样式进行统一存放,方便使用与修改,以便进行网页设计。除此之外,利用CSS技术可以对相同样式相同元素进行归类,对同一个样式进行定义,将样式应用到网页设置过程中,指定到某个页面中,方便样式的修改。(3)具有层叠特点。层叠即叠加,简单地说,层叠就是对一个元素进行多次设置,通过层叠,可以在页面设计过程中进行恰当的处理,利用CSS技术,在页面中进行元素层叠,可以对页面样式设置进行重写,以便有效进行网页设计,达到理想的网页设计效果。(4)多页面应用。在CSS技术应用过程中,CSS样式可以单独放在CSS文件中,可以在多个页面中运用,实现多个页面的风格统一,保证网页的协调性与美观性。(5)页面压缩。在CSS技术应用过程中,页面压缩是其中的主要特点,通过大量重复的表格,可以增加页面文件大小,而减少页面加载需要的时间,可以尽最大可能满足用户的要求,进行页面压缩,发挥CSS技术的显著优势[2]。

2 CSS技术存在的不足

CSS技术具有显著的优势,不仅编写容易,还可以缩减页面代码,提高页面浏览速度,发挥网页的优势,还可以降低带宽成本,提高易用行,更好地控制页面布局,进行字体控制与排版。但是,CSS技术也存在一定不足,出现了一些问题,影响了CSS技术的有效开展,不利于CSS技术在网页设计中的有效应用。CSS技术主要存在以下不足:(l)CSS技术经常会出现兼容问题,实用性不强。在CSS技术应用过程中,将CSS技术应用与网页设计中会出现个别网站不识别、不相容等问题。在IE浏览器中可以识别,在其他浏览器就可能出现不能显示的问题,影响了网页的设计效果,在此情况下,书写代码时需要注意浏览器的类别,防止出现错误,影响网页设计效果。(2)CSS技术设计检验未通过校验。CSS技术在网页校验过程中通过了W3C校验,但是未通过CSS2.0的校验,因而,CSS技术还是存在一些问题,会在操作过程中被漏掉或者是意外结束。(3)CSS技术在使用时容易出现问题,一旦存在书写不规范的情况,就会影响CSS技术的应用,不利于网页设计。在书写CSS技术时,不具备较好的书写习惯,未进行十分规范的命名,就会出现多重定义,会出现不同的属性默认值,出现浏览器兼容问题,不利于网页设计,无法达到理想的网页设计效果[3]。总而言之,CSS技术存在一定的不足,主要就是存在兼容问题,但是,经过正确规范地编码,认真地书写,仔细地检验还是可以有效地避免兼容问题,发挥CSS技术在网页设计中的优势,实现CSS技术的有效应用。

3 常用的网页结构

目前,常用的网页结构主要有5种,分别是国字型、Flash型、封面型、上下框架型以及左右框架型,下面进行详细的阐述。(1)国字型。国字型是最常见的一种类型,最上面时横幅广告以及网络标题,下面是网站的主要内容,左右分列小条内容,中间是主要内容,最下面是网站的联系方式、基本信息以及版权声明。(2)Flash型。Flash型与封面型的结构是相似的,这种形式的信息更加丰富,与传统多媒体相似,具有较好的视觉效果与听觉效果,可以表达出丰富的信息与内容,这种Flash型网页结构主要应用于游戏网站以及校企网站,网页容量较大[4]。(3)封面型。封面型基本是一些网站的首页,通常会设置一些可以进行其他网页的链接,有的可以直接通过首页的图片链接进入,网页设计得较为精美,里面还设计了动画。(4)上下框架型。上下框架型与国字型类似,同样是上下分为两页的框架。(5)左右框架结构。左右框架结构是一种分别两页的框架结构,一般左边是导航链接,一面是标致与标题,右面是正文以及相关内容。

4 CSS技术在网页设计中的应用注意事项

4.1 尽量使用外部CSS样式

在CSS技术应用过程中,CSS技术在网页设计中发挥了重要的作用,通过尽量使用CSS技术以及形式,可以实现页面的美化,实现风格的统一,发挥重要的作用,直接关系到网页设计效果。因此,尽量使用外部CSS样式十分必要,可以达到理想的网页设计效果,可以保证设计效率与质量。尽量使用外部CSS样式需要注意以下两方面内容,一方面,需要根据网页特点,选择恰当的网页结构,选择外部CSS样式,达到理想的外部CSS样式使用效果。另一方面,在网页设计过程中,需要使用外部CSS技术样式,可以尽可能减少CSS技术存在的不足,方便CSS技术在网页中的设计应用。

4.2 CSS技术对Web网页样式进行控制

在进行网页设计过程中,对网页样式的设计多是通过CSS技术实现的,通过CSS技术,可以进行页面的布局和控制,可以进行背景、字体等信息的控制,使用完全代码进行控制,确保网页布局样式的灵活性以及多样性,有效进行网页设计,达到理想的网页设计效果。一方面,利用CSS技术新型网页布局设计,在网页中产生表格,创设CSS文件,并对其进行编辑,可以抛开冗长的密码,对代码进行有效的控制,对CSS文件进行修改。另一方面,CSS技术具有较强的字体控制能力,可以改变字体的样式、颜色,使网页中的字体更加漂亮,容易编排,争取达到理想的文字控制效果,利用记事本打开网页,输入相应的代码。

4.3 控制网页连接

合理利用CSS技术十分重要,可以应用于当前网页文件,还可以进行随意的连接,可以将CSS技术应用于HTML页面中,还可以将CSS代码放入到外面文件中,利用HTML中的元素进行有效的调用,缩短改版实践,实现网站文化的最优配置。由此可见,控制网页链接十分必要,通过网络连接,可以将CSS技术应用于网页样式之中,有效进行网页设计,保证网页设计质量。

4.4 控制网页文件大小

利用CSS技术,可以有效进行网页设计,控制网页文件大小,保证文件质量,确保工作的顺利实施。由此可见,将CSS技术应用于网络之中,有效进行网页设计十分必要,直接关系到网页文件的控制。控制网页文件大小需要注意以下几点:(1)为了呈现出较好的网页设计效果,需要使用大量图形,可以达到理想的设计效果,还可以增加网页的精美性。但是,网页文件过大,会导致网页下载速度较慢,保证网站的可用性,提高页面的浏览速度,确保页面能够较快地出现在放任着的窗口中,发挥网站的优势,增加访问量[5]。(2)利用CSS技术,通过层叠以及页面压缩,可以有效控制网页文件大小,实现样式与内容的分离,节约文件尺寸,将网页文件变小。

5 结语

研究CSS技术在网页设计中的应用具有重要的价值,通过研究,可以发现CSS技术的优势与不足,实现CSS技术的优化与组织,发挥其在网页设计中的重要作用,有效地对网页进行修饰,保证网页修饰效果,确保网页设计工作的顺利实施,争取达到理想的网页设计效果。

[参考文献]

[1]王微.DIV+CSS技术在网页设计中的应用研究[J].电脑编程技巧与维护,2017(16):73-75.

[2]武海丽,李彩玲.DIV+CSS技术在网页制作与设计中的应用研究[J].无线互联科技,2016(6):69-70.

[3]王國庆.探究基于DIV+CSS技术的网页设计优化方法[J].信息与电脑(理论版),2016(4):140-141.

[4]张明.网页设计中的CSS技术及优化分析[J].信息与电脑(理论版),2016(2):126-127.

[5]刘小艮.网页设计中DIV+CSS布局技术的应用实践探讨[J].无线互联科技,2016(23):34-35.

作者:张静

网页下载速度与网页设计论文 篇2:

挖掘IE的潜在功能

美容篇

IE跟随操作系统一同入驻我们的电脑,于是就成了大多数网虫所选择的浏览器。因为它的界面风格、菜单中命令的布局与操作系统一样规范,并且有许多相似的地方,从而减少了使用者不需要专门学习就可直接运用。当然,长期看着一幅面孔也难免有些“腻”,其实,Win XP/Win 2000操作系统中自带一个系统组策略功能,可以通过它修改IE的一些设置,将IE打扮得更富有个性、更酷!

请师出山

选取“开始”→“运行”,在“运行”对话框中输入“gpedit.msc”后“确定”即启动“组策略”。组策略主界面的左边是“‘本地计算机’策略”(由“计算机配置”和“用户配置”两部分组成),右边则是针对左边所选取某一配置的具体描述。修改IE可以依次选取“用户配置”→“windows设置”→“Internet Explorer维护”→“浏览器用户界面”来实现对其各项进行修改,如图1。

篡位夺权

IE浏览器的标题栏上一般是由所访问“网站名”与“Microsoft In-ternet Explorer”两项组成,我们可以在其后添加一个“提供者”,比如:由“聚龙渊-2003”提供,来一个篡位夺权(纯属娱乐,呵呵……)。其方法是:在选取图1右边的“浏览器标题”,在“浏览器标题”对话框中选取“自定义标题栏”,然后在“标题栏文字”中输入“聚龙渊-2003”,然后确定,IE浏览器的标题栏也就改变了,如图2。

重树新帜

不知你是否注意到IE浏览器的右上角有一个动态的微软标志?其实我们也可以用组策略重新设计一个。标志可以是静态位图(最大只能是256色),也可以是动态的图标文件,其规格、大小都说明得非常清楚,如图3。

重塑新颜

既然前面都改了,不妨将IE的主界面也给换了,其方法非常简单:只需要制作一张位图图像,然后通过“浏览器工具栏自定义”进行设置即可,如图4。

提示:通过组策略修改IE浏览器,其实OE也就随之修改了。同时“浏览器工具栏自定义”还可添加或删除一些功能按钮。

提速篇

在信息浩瀚的Internet上冲浪,对我等通过拨号上网的网民来说必须争分夺秒,毕竟网络费用不很便宜。上网加速除了要对Modem进行优化外,快速高效的使用浏览器也是网民应该切实掌握的技巧。

轻装上阵

影响网页下载速度因素虽然较多,比如:服务器、线路及本地机器等,所举这些都不是我们个人能力所左右的,只能从“软”处着手了,让我们的IE“轻装上阵”吧!

禁用部分多媒体

为了网页内容的丰富,吸引更多的访客,也就不能没有多媒体(如动画、音频、视频等)内容,同时,它们也占据了我们不甚丰裕的带宽。若你上网浏览更多地只是查看文字或图片内容,就可禁用 IE 的部分多媒体内容。

方法:选取IE操作窗口中的菜单“工具”→“Internet 选项”→“高级”→“多媒体”,如图5。然后根据需要将“播放网页中的动画”、“播放网页中声音”、“播放网页中的视频”等内容取消(清除其选项前的符号)。

提示:限制了部分多媒体的显示功能,速度当然可以提高许多,但是对于浏览网页的完整性有一定的影响,建议宽带用户不使用此项功能。

增大磁盘缓存容量

浏览网页时,浏览器会自动将该网页的源代码及相关的网页素材储存到磁盘缓存中,当重新调用该网页时,就可以直接从磁盘上进行调用,而不需要再通过网络重新读取内容,其提速效果是非常明显的。

方法:选取IE操作窗口中的菜单“工具”→“Internet 选项”→“Internet 临时文件”→“设置”,如图6。然后在弹出的窗口中拖动“使用磁盘空间”下的滑块,最后点按“确定”按钮。

提示:缓存设置的大小,还得根据硬盘容量进行考虑,设置太小,达不到提速目的;设置太大,不仅耗费系统资源,更大的问题在于延长了磁盘的查找时间,一般情况下,该分区 7%~8% 的空间作为缓存区就足够了。若是多人共用一台电脑,为了你信息安全,最好是不用设置此项功能,离开电脑时,清除临时文件。

设置空白主页

每当打开 IE 的时候,浏览器会直接登录所默认的“主页”地址,若是不想登录该站点,这无疑浪费了上网时间。解决办法是将“主页”设为空白页。

方法:选取IE操作窗口中的菜单“工具”→“Internet 选项”→“常规”,在“主页”对话框中选取“使用空白主页”按钮,如图7,然后“确定”即可。

携带利器

俗话说:“磨刀不误砍柴功”,“善其事必先利其器”。掌握IE的一些便捷操作可大大提高浏览网页的速度。

万箭(键)齐发

一般在IE中浏览网页,使用鼠标指指点点就足够了。但是如果您要加快浏览速度,提高上网效率的话,就必须用好IE的快捷键。一些快捷键在菜单中都有提示,如上下一页为“Alt+←/→”、停止为“Esc”等等。下面将常用的快捷键集中起来,便于记忆,如表1 。

提示:还有许多快捷键没有列举出来,你可以在实践中记忆,其中通用的一些快捷键,比如:复制操作的快捷键就是通用的“Ctrl+C”。

万马(码)并驱

使用较低版本的IE时,当你想阅读一篇其它字体的技术资料时,若你的系统里没有安装相应的内码转换软件,就会一筹莫展了。自IE5.0以后的版本都带多种字库,即可轻松实现对不同内码如“*.TXT、*.HT、*.HTML”等文件的查看。其方法也极简单:用 IE5.0(或IE6.0)打开该文件,在菜单“查看”→“编码”选项中,除了可以使用常见的简、繁中文,还可以从“其它”下拉框中选取十多种语言模式来阅读,如图8,实在快速方便。

万指(址)皆动

经常上网的朋友知道,我们要访问网易“http://www.163.com”这样的网站时,只要在地址栏中直接键人163,IE就会自动加上.com的后缀进行访问,省去了很多麻烦。但是,若是访问:“http://www.itedu.org.cn”网站就没那么方便了,因为IE未包含“.cn”后缀的自动匹配功能。那么我们不妨对IE的自动匹配功能进行扩充,使之能自动匹配“.gov.cn”、“.net.cn”、“.com.cn”之类的后缀!

方法:我们只需启动注册表编辑器,并依次展开 HKEY_LOCAL_MAC

HINESOFTWAREMicrosoftInternet Explorer Ma

inUrlTemplate分支,然后就可以在UrlTemplate分支下看到4个分别名为“1”、“2”,……“4”字符串值,其键值分别为“www.%s.com”、“www.%s.org”、 “www.%s.net”、“www.%s.edu”等,它们就是用于指定IE自动匹配范围的。若为IE增加新的自动匹配功能,只需在Url-Template分支下再新建如“5”字符串值,并将其值分别设置为“www.%s.com.cn”,如图9,然后就能让IE对“.com.cn”后缀进行自动识别。

当然,关于IE提速除了上面所述方法以外还有许多方法,就留给你自己去发现吧!

榨油篇

Internet Explorer浏览器功能强大,当然并不是所有功能都有,因为使用windows操作系统的用户同样占着大部分,所以IE有些功能,操作系统都已经自带了,因此IE浏览器的功能往往被遗忘掉,我将其比较有用而被忽略的一些功能整理出来,也许你会感觉眼前突然一亮!

文件管理

IE 可以如同资源管理器一样快速地完成文件管理的功能。只需在地址输入栏中输入驱动器号或者具体的文件地址,然后按回车键或直接打开该文件夹。当然还有一种快捷访问根目录的方法:在浏览器操作界面的地址栏中直接输入一个反斜杠字符“”,接着按一下回车键,就可以了访问根目录了。你将会发现 IE 浏览器发生了很大的变化,首先是显示窗口中显示的是该分驱(盘符)中的内容,其次是浏览器的工具条变得与资源管理器的工具条极为相似,如图10。用 IE 进行文件管理时,一切操作跟在资源管理器中操作一样,如拷贝、粘贴,双击打开文件夹等等。

网页脱机浏览

脱机浏览网页内容是节省钱的一种好方法,也就是将网页文件储存到本地电脑上,不需上网就可以直接查看该网页内容。实现这种功能有两种方法:

1.收藏夹法。在线打开要收藏的网页,选取IE操作窗口菜单中 “收藏”→“添加收藏夹”→“允许脱机使用”,如图11。同时还可以在收藏夹中分门别类的建立子收藏夹,将相应的网页内容存放在文件夹中。要进行脱机浏览,只需点收藏夹中相应的内容即可(注:前提是没有清除 Windows 中的 Temp 临时文件夹中的内容)。

2.文件保存法。通过IE操作窗口中的菜单“文件”→“另存为”命令将当前网页以文件的形式保存在磁盘上,浏览时,打开文件即可,简单吧!

直接发送网页

若是要将一个网页发送给朋友,不需要将网页内容拷贝并粘贴到邮件中进行发送,只需选取工具条上的“邮件”→“发送网址或发送网页”,如图13。就会自动启动邮件发送软件(默认邮件处理程序,比如:OE),只要接收者有一个支持HTML格式的邮件工具,网页就可以发送过去了。提示:在IE中可以调用OE,并完成OE中所有的功能。

用IE远程文件传输

要进行 FTP (远程文件传输),我们常常用的是专门的 FTP 工具,不过,IE 也具有比较简单的远程传输功能。操作如下:打开浏览器操作界面,在菜单栏中找到“工具”中的“Internet选项”命令,然后在弹出的选项对话框中选择“高级”标签,再从该标签下找到“浏览”设置区,并选择“为FTP站点启用视图文件夹”复选项,如图14,最后点击“确定”按钮,就可以使用浏览器中内置的FTP程序来下载文件了。在地址输入栏中输入 FTP 站点的网址然后按回车键就行了。不过请注意,这个地址是以 FTP:// 开头的。

在浏览器地址栏直接运行程序

在浏览器打开的情况下,如果这时需要运行系统中的另外一个程序的话,不必暂停浏览器的运行,打开另外一个窗口来启动程序。直接使用浏览器也能把需要的程序打开。具体操作步骤如下: 首先打开浏览器窗口,在地址栏中直接输入运行程序在硬盘中的绝对路径,例如我们在地址栏中输入“D:Program FilesWinRARWinRAR.exe”,输入完毕后再单击一下回车键,接着浏览器就会在浏览窗口中自动打开指定程序的界面。

显示相关站点

若你对当前站点的内容比较感兴趣,同时还想看到更多这方面的内容,可以启用 IE 的“显示相关站点”,利用IE 集成的 “Alexa” 搜索引擎快速找到与本网页内容相关的其他信息,查找结果会返回到左边的搜索窗口中。如:当前网页是:http://www.baidu.com(百度搜索引擎),若是想了解更多关于“搜索引擎”方面的内容,只需IE操作窗口菜单“工具”→“显示相关站点”即可显示更多“搜索引擎”网址链接。

快速查找页面内容

若我们通过搜索引擎找到相关的站点了,但成百上千条信息充斥在页面上,如何在这个长长的页面上找到自己想要的内容呢?IE为我们提供了“查找(当前网页)”功能,比较精确的帮你找到所需的内容。操作方法:在IE操作窗口中选取菜单条上“编辑”→“查找”(当前网页)命令,然后在弹出对话框中输入查找内容,根据要求选取查找条件。

作者:龚道敏

网页下载速度与网页设计论文 篇3:

采用DIV+CSS技术的高校门户网站系统分析和设计

摘要:本文针对采用传统表格布局方式的高校门户网站系统设计的局限性,如下载速度慢,网页代码不清晰,维护成本大等缺点,给出了采用DIV+CSS布局技术的高校门户网站系统设计方案。实验表明采用DIV+CSS技术页面布局方案一经开发者熟练掌握之后,将会比表格布局更加灵活实用。

关键词:DIV+CSS页面布局; Table页面布局; 高校门户网站

Key words:DIV+CSS Page Layout;Table Page Layout;University Gateway Website

0引言

高校门户网站是发布日常教学信息、提供学生选课服务、展示高校各类教学科研成果的综合性平台。目前,很多高校门户网站的页面布局采用的仍然是传统Table表格布局方式。表格布局在WEB2.0问世之前是比较通行的页面布局方式,但是随着网络技术的快速发展,这种布局方式的弊端逐渐显现出来。该种表格布局方式将网页的主体内容和页面表现格式混搭在一起,导致网页代码结构不清,不利于网页的设计和网站的维护。表格布局的浏览速度也比较慢,表格布局所在的网页要在表格中的所有元素下载完毕后才能显示完整的页面内容。

DIV+CSS页面布局技术的出现克服了表格页面布局方式的上述不足。采用DIV+CSS网页布局技术的高校门户网站的页面代码,可将页面的内容和页面的表现格式进行分离[1],这将使得高校门户网站的项目代码更加清晰,方便开发者阅读,有利于日后网站的升级和维护。DIV+CSS技术在提高网站下载速度的同时,也能够使高校门户网站更具亲和力,并且能够提升高校门户网站日后的浏览器兼容性[2]。

1DIV+CSS页面布局技术

CSS(Cascading Style Sheets)层叠样式表又称级联样式表,是由 W3C 的 CSS工作组策划提出的[3]。CSS在网站设计中主要负责网页内容的格式显示和布局方式。层叠样式表是一种不需要编译的标记语言,可以直接由浏览器执行,因为CSS属于浏览器解释型语言。CSS 在网页排版方面表现非常优秀,使用 CSS不仅可以控制网页文字的大小、网页文字颜色、网页文字对齐方式和网页文字字体类型等文本格式,还可以控制网页文字行高、字母间距、英文字符大小写等段落格式,同时也可以控制文本的第一个字或第一行的样式。网页开发者可以将自己所创建的样式规则应用于整个网站的所有网页文件,这样就能实现在任何时候均可寻获需要更改网站内容的格式,如字号增大,或是需要改变正文的字体,并且只需要更改对应的样式表中的CSS属性值即可。

CSS标记语言的代码应用于网页一共有四种方式:直接在HTML标记的Style属性中存放CSS代码;写入网页Head标记内的内部样式规则;嵌入外部样式规则和链接外部样式规则。这种外部样式规则是把CSS代码放在一个独立于网页文件的普通文本文件中,该文本文件要求必须使用css作为文件的扩展名。外部样式表使得网站开发者可以通过简单地更改 CSS 文件,从而实现改变网页的整体表现形式的目的。如此一来,就节省了网站维护成本,也提高了网站的维护效率,更使得只要通过操作一个CSS文件就可以改变整个网站页面的外观风格和布局方式。

DIV(Division)标记是一个容器型标记,可以利用该标记来进行网页的布局。一个网页可以由若干个这样的DIV容器组成,每个容器都对应于网页的一个独立模块。DIV容器和其它HTML标记一样可以通过 CSS进行控制。级联样式表可以控制DIV容器显示大小、背景颜色、背景图片、正文字体类别、正文字体大小以及DIV容器所定义的模块在网页当中具体的摆放位置等[4]。

DIV+CSS 布局方式的思路是首先使用DIV容器标记,将网页划分成几个模块,每个DIV标记可以对应一个独立的网页模块[5]。其后把页面的内容元素分别放入所对应的DIV模块中,再通过CSS规则来控制每个容器模块的样式,并采用CSS边框属性(Border)、填充属性(Padding) 、边界属性 (Margin) 和浮动属性 (Float)来控制容器模块间的相对位置,最终确定相互之间的布局方案和位置关系[6]。

2采用DIV+CSS技术的高校网站系统分析和设计

高校门户网站系统从功能上划分共分为以下几个模块:首页、学校概况、机构设置、师资队伍、人才培养、科学研究、国际交流、学生工作、招生信息、就业指导和公共服务。各模块的详细结构即如图1所示。

(1)网站LOGO区域:用来显示高校名称和其LOGO标志图片。

(2)网站导航区域:以导航链接列表的形式显示网站的各个功能模块超链接。主要链接内容包括首页链接、学校概况链接、机构设置链接、师资队伍链接、人才培养链接、科学研究链接、国际交流链接、学生工作链接、招生信息链接、就业指导链接和公共服务链接等。 第4期刘松:采用DIV+CSS技术的高校门户网站系统分析和设计智能计算机与应用第4卷

(3)网站主体区域:使用无序列表UL标记的形式显示高校的学术活动信息和校园公告信息。

(4)网站新闻区域:显示高校的近期新闻列表。

(5)网站友情链接区域:显示了各兄弟院校网站的链接信息。

(6)网站版权信息区域:展示了高校门户网站系统的版权信息和该高校的具体联系方式及所处地理位置信息。

3采用DIV+CSS技术进行页面结构设计的优势

经过实际运行的使用效果表明,DIV+CSS布局相对传统的表格布局掌握起来要复杂一些,因为在这种方式下,控制各布局的DIV层都是通过大量CSS规则代码来实现的。但是DIV+CSS这种页面布局方式一经开发者熟练掌握之后,则会比表格布局更加灵活实用。现对其表现出的设计优势具体表述如下:

(1)采用DIV+CSS技术进行页面结构设计的高校门户网站网页,在调整各网页容器模块之间的相对位置时比较简单。因为各DIV 模块间是相对比较独立的,不受其它模块的影响。

(2)采用DIV+CSS技术进行页面结构设计的高校门户网站网页的页面格式更改非常有效。DIV+CSS模式下网站的内容代码和格式代码是相分离的,因此在调整和维护时高校门户网站的布局结构和显示格式修改更加简便有效。

(3)采用DIV+CSS技术进行页面结构设计的高校门户网站网页,由于涉及的各布局DIV 层可以依次下载显示,因此其网页的访问速度会比表格网页布局方式更为快速。

(4)采用DIV+CSS技术进行页面结构设计的高校门户网站网页对浏览器的兼容性高。因为DIV+CSS网页布局方式符合W3C标准的特性,使得该技术可以实现对浏览器软件的向后兼容。

(5)DIV+CSS页面结构设计方式相比于表格布局方式,更加方便搜索引擎有效定位、使得在万维网上快速搜寻高校门户网站成为可能。

4结束语

采用DIV+CSS网页布局技术的高校门户网站系统网页,克服了之前采用表格页面布局方式的不足。这种将网页内容代码与网页格式代码和网页定位代码相分离的技术,使得高校门户网站的代码更加简洁,方便网站日后的升级和维护,极大地节省了维护网站的人力和物力成本。经过实际应用表明,采用DIV+CSS技术的高校门户网站系统的下载速度明显优于采用表格布局技术的高校门户网站系统网页。而且,该技术在提高网页下载速度的同时,更为有效地减少了网站网页流量。

参考文献:

[1]刘翼.DIV+CSS技术在延安大学网上考试系统中的应用研究[J].电子设计工程,2012(10):35 -37.

[2]周潇.DIV+CSS技术在网页重构中的技巧应用[J].赤峰学院学报(自然科学版),2011(12):25 -26.

[3]袁磊,陈伟卫. 网页设计与制作实例教程[M].北京:清华大学出版社,2011.

[4]尚博. 基于DIV+CSS的网页布局方式解析[J].电脑知识与技术,2010(27): 7465-7467.

[5]陈婷婷.教务网站交互界面设计原则浅析[J].天津职业院校联合学报,2011(3):12 -14.

[6]孙晓娟.基于WEB标准的网页布局的设计与实现[J].科技信息,2010(1):44.

作者:刘松

本文来自 99学术网(www.99xueshu.com),转载请保留网址和出处

上一篇:教师师德建设重要性分析论文下一篇:经济危机下企业劳动关系论文