WEB设计

WEB设计（共12篇）

WEB设计 篇1

面对如此众多的手机上网用户, 任何一个利用互连网展示自身的企业都不会对此群体无动于衷。但是面对如此众多的上网设备, 如何让企业的网站去适应各种屏幕的设备并不是一个简单的问题。幸运的是, 我们现在已经有了可行的解决方案, 那就是响应式Web设计。

什么是响应式Web设计

响应式Web设计 (Response Web Design) 是由Ethan Marcotte提出。他在A List Apart发表了一篇开创性的文章, 将三种已有的开发技巧 (弹性网格布局、弹性图片、媒体和媒体查询) 整合起来, 并命名为响应式Web设计。其实质是针对任意设备对网页内容进行完美布局的一种显示机制。

响应式Web设计的理念

响应式Web设计的理念用一句话概括就是:让我们所设计的页面自动去适应用户的上网设备视口。具体来说就是:页面的设计与开发应当根据用户的系统平台、屏幕尺寸、屏幕定向等进行相应的响应和调整。主要包括弹性网格和布局、图片的自适应缩放、CSS媒体查询的使用等。无论用户正在使用笔记本还是i Pad, 我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等, 以适应不同设备。

响应式Web设计的关键技术

实现响应式Web设计的关键技术是CSS3。CSS3是CSS技术的升级版本, CSS3语言开发是朝着模块化发展的, 主要包括:盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。

1.媒体查询 (media query)

CSS 3的media query (媒体查询) 是对media type的一种增强, 是CSS3的重要内容之一, 它为我们在不同的设备和环境下实现丰富的界面提供了一种快捷方法。media type (媒体类型) 是CSS2中的一个属性, 通过media type我们可以对不同的设备指定特定的样式, 从而实现更丰富的界面。事实上, 可以将media query看成是media type+CSS属性判断。

因为现在主流的智能终端都是基于i OS和Android的, 而它们自带的浏览器都是基于webkit内核, 所以我们可以完全使用viewport属性和media query技术实现网站的响应性:

viewport是网页默认的宽度和高度, 上面这行代码的意思是, 网页宽度默认等于屏幕宽度 (width=device-width) , 原始缩放比例 (initial-scale=1) 为1.0, 即网页初始大小占屏幕面积的100%, maximum-scale表示最大缩放比例。

Media Query模块自动探测屏幕宽度, 然后加载相应的CSS文件。

上面的代码意思是, 如果屏幕宽度小于400像素 (max-devicewidth:400px) , 就加载tiny Screen.css文件。

如果屏幕宽度在400像素到600像素之间, 则加载small Screen.css文件。

同一个CSS文件中, 也可以根据不同的屏幕分辨率, 选择应用不同的CSS规则。

@media screen and (max-device-width:400px)

{

.column{float:none;width:auto;}

#sidebar{display:none;}

}

上面的代码意思是, 如果屏幕宽度小于400像素, 则column块取消浮动 (float:none) 、宽度自动调节 (width:auto) , sidebar块不显示 (display:none) 。

2.流体网格 (fluid grid)

"流体网格"的含义是, 各个区块的位置都是浮动的, 不是固定不变的。各区块的大小都采用百分比而不是使用绝对值。例:

.main Frame{float:right;width:80%;}.

left Nav{float:left;width:19%;}

3.弹性盒模型 (flex box)

flex box是css3中的新技术, 使用该模型, 可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。

传统的盒模型基于HTML流在垂直方向上排列盒子。使用弹性盒模型可以规定特定的顺序 (“box-orient”定义分布的坐标轴:vertical和horizional) , 也可以反转之定义 (“box-direction”的属性值为“reverse”) 。要开启弹性盒模型, 只需设置拥有子盒子的盒子的display的属性值为box (或inline-box) 即可。例:

body{display:box;box-orient:vertical;box-direction:reverse;}

4.使用相对值

由于网页会根据屏幕宽度调整布局, 所以不能使用绝对宽度的布局, 也不能使用具有绝对宽度的元素。

字体也不能使用绝对大小 (px) , 而只能使用相对大小 (em) 。

实现图片的自动缩放:img{max-width:100%;}

响应式网页设计的优缺点

不要认为响应式Web设计是针对移动终端的万能解决方案。它并不能真正替代移动网站。响应式Web设计有很多优点, 但同样也有缺点。

主要优点有:

1.对用户友好

随着移动设备越来越多, 可以提升用户体验。很显然, 响应式Web设计可以向用户提供友好的Web界面, 因为它可以适应几乎所有设备的屏幕。

2.更少维护

开发一个响应式网站, 维护的成本将会很小, 因为它只有一个布局, 且可工作在所有类型的设备上, 而这可以明显地减少你的工作量。而开发一个独立的移动网站, 实际上是拥有了两个独立网站, 就需要两个网站的维护量, 而还有可能不能同步两个网站的数据。

3.不需要另外的域名

如果使用响应式网站, 则只有一个网站。但如果使用移动网站, 则有两个网站, 就需要额外再配置一个独立的域名。

主要缺点有:

1.加载需要一定的时间

在响应式设计中, 需要下载一些看起来并不必要的HTML/CSS。除此之外, 图片并没有根据设备调整到合适大小, 而这正是导致加载时间加倍的原因。

2.对浏览器的支持

由于响应式Web设计使用的是CSS3, 很多老版本的浏览器并不能很好的支持。

结论

响应式Web设计并非适合所有类型的网站。尽管, 由于技术上的最新进步, 从移动设备上访问网站的数量已经增长, 但在顶端、最著名的网站中, 只有9%拥有他们的移动网站。最新好消息, Google已经推荐使用响应式Web设计, 这将使其更加流行。

WEB设计 篇2

学

院：

信息科学与工程学院

专

业：计算机科学与技术（软件外包方向）班

级：

计软1302班

学

号：

201312141041

学生姓名：

韩世昌

指导教师：

张芊茜

课程名称：

Web客户端编程技术

设计名称：

网页设计

一、设计内容及要求 ① 设计题目

题目自定，可以是“我的个人网站”、“我的大学生活”、“我的家乡”等，也可以是其它题目。

要求主题要鲜明，内容要充实、健康。

② 设计任务

运用HTML、CSS和JavaScript技术完成一个相对完整的网站，至少完成5个页面。

③ 设计要求

使用HTML标记，CSS样式及JavaScript技术，完成的网页没有错误首页设置导航栏，命名为index.htm。利用CSS技术对网站进行布局，网站风格统一灵活运用JavaScript使网页生动，配置服务器，发布网站，并经主流浏览器测试通过

④ 具体要求

时钟，级联菜单，动态图片展示，各种广告栏，HTML5和CSS3的应用，建立表单页面，并用JavaScript对表单内容进行验证。

二、设计思路

我的课程设计主题定的是家乡介绍，共有5个页面，分别实现首页，类，历史文化，家乡景点介绍和注册本站会员以及家乡特产的链接。首页大致分为4部分，比较简单，分别用css实现导航栏，左边推荐网站的div块和下方图片块以及用JavaScript脚本实现了图面自动循环切换以及页面底部的时钟显示。，css设置导航栏，下面的块与上面的背景图片边缘对齐，左边有一个div中有列表 设置了锚点。

三、设计结果及分析

网页的显示没有达到预期的效果，在网页的设计上还需要提高，内容比较少，不丰满。在网页的布局上也比较单调，主要是设计时间只有四天，没有太多的时间进行修改。我会在寒假进一步修改此次课程设计的作业，让效果达到满意状态。

四、总结

课程设计是培养学生综合运用所学知识发现提出分析和解决实际问题锻炼实践能力的重要环节,是对学生实际工作能力的具体训练和考察过程，随着科学技术发展的日新日异，Web网页技术已经成为当今计算机应用中空前活跃的领域，在生活中可以说得是无处不在。因此作为二十一世纪的大学来说掌握Web网页的开发技术是十分重要的。

回顾起此次Web课程设计，至今我仍感慨颇多，的确，从选题到定稿，从理论到实践，在整整4天的日子里，可以说得是苦多于甜，但是可以学到很多很多的的东西，同时不仅可以巩固了以前所学过的知识，而且学到了很多在课堂上所没有学到过的知识。通过这次

课程设计使我懂得了理论与实际相结合是很重要的，只有理论知识是远远不够的，只有把所学的理论知识与实践相结合起来，从理论中得出结论，才能真正为社会服务，从而提高自己的实际动手能力和独立思考的能力。在设计的过程中遇到问题，可以说得是困难重重，第一次做的，难免会遇到过各种各样的问题，同时在设计的过程中发现了自己的不足之处，对以前所学过的知识理解得不够深刻，掌握得不够牢固。通过这次课程设计之后，一定把以前所学过的知识重新温故。

五、附录（源代码）主页源代码

章  丘

WEB设计 篇3

【摘 要】随着移动互联网的飞速发展，移动终端设备（如智能手机、平板电脑）因其携带方便以及可随时随地接入互联网的优势，而使其成为多数人访问网络的主要工具。但由于同一个网页在不同尺寸大小的屏幕上的显示效果是不同的，这就需要利用响应式Web设计的实现方法使网页做到自动适应屏幕的大小。本文从弹性布局、弹性图片和媒体查询三个方面阐述了响应式Web设计的实现方法。

【关键词】响应式Web设计；移动终端；布局

引言

随着智能手机和平板电脑的普及，越来越多的人习惯了拿起手机就上网，因此，手机端网站建设的需求也逐渐增加。由于PC端和移动端设备的视口差别很大，同一个网页不可能在不同视口下都完美的显示出来，而为每一种屏幕尺寸都设计制作一个对应宽度的页面也是不现实的。因此，探索出一种可适应不同视口宽度的网页开发方法才是需要我们解决的问题。

响应式网页设计（Responsive Web Design）由Ethan Marcotte于2010年5月在他发表的一篇文章中提出。在这篇具有开创性意义的文章中他将三种已有的开发技巧（弹性布局、弹性图片、媒体和媒体查询）整合在一起，提出了响应式网页设计的概念。概括来说，响应式网页设计就是针对任意设备对网页内容进行完美布局的一种显示机制[1]。

一、弹性布局

由于要适应不同分辨率的显示要求，固定宽度的页面设定显然已不能完美的显示页面内容。这时，弹性流体布局的应用可以很好的解决这样的问题。弹性布局不对页面的宽度进行固定值的设定，而是采取百分比（%）宽度进行设定。

举例说明这种百分比设定的方法，一个符合Web标准的页面基本标签结构应该是这样的：

设定整个页面的宽度为100% ，要设置合理的最大宽度值和最小宽度值就要考虑到用户端的显示设备，大到桌面PC，小到移动互联设备（如ipad、手机等）。因此可以对#wrapper元素的样式属性设置如下：

#wrapper {margin：auto； width：100%； max-width：1280px； min-width：220px；}

现在的重点是如何设置各主要模块的百分比宽度。这种百分比的計算有一个简易可行的方法：如要计算头部（header）的百分比值可以用header元素宽度与wrapper元素宽度相比，取百分比即可。计算后将结果设置到CSS样式表中：

#header {margin-right：10px； margin-left：10px； width：97%；}

#sidebar {margin-top：60px； width：35%； }

#content {margin-top：60px； width：65%； }

#footer {float：left； margin-top：30px； width：97%； }

二、弹性图片

在一个网站中图片的显示效果是很重要的一部分。如果使用图像的原始宽度显示，当包含图像的元素模块小于图像宽度时，图像的一部分会被遮挡或无法显示出来。对于解决这个问题就要用到弹性图片的概念，这需要在CSS中作以下声明：

img{max-width： 100%；}

上面这行代码可以确保图像宽度不会超出屏幕或视口宽度，当屏幕尺寸不断变化时，图像也随之变化并始终适应屏幕大小，而且不会被遮挡或覆盖。不过，弹性图片也有其缺点，通常在使用时需要准备一张足够大的图片来适应更大的分辨率显示，但是对于小视口每次都需要下载超大图片来说就显得有点负担沉重了。

三、媒体查询

媒体查询（Media Query）是响应式设计的核心。它可以让开发者根据在特定环境下查询到的各种属性（如分辨率、色彩深度、高度和宽度）来决定应用什么样的样式表。通过媒体查询，可以实现调整布局、美化之前弹性布局之后的页面[2]。

CSS3是实现响应式设计的关键技术，它是由多个附加模块组合而成的。媒体查询就是其中一个模块，其具体方法就是在链接样式表的媒介属性中添加如下一个查询语句：

从这条查询语句来看，首先询问了媒体类型（是否是显示屏）和媒体特性（显示屏是否是纵向的），接着询问视口宽度是否小于720像素，如果视口宽度小于720像素就加载720wide-portrait-screen.css文件，否则样式表将被忽略。

四、结束语

由于响应式Web设计可以适应几乎所有视口尺寸的设备，因此它可以给用户带来前所未有的操作体验。本文通过讨论响应式Web设计的三个关键技术基本阐明了针对移动端页面的开发方法。虽然响应式Web设计在技术上还有一些不足，但随着Web技术的不断进步和广大网页设计人员的努力，相信响应式Web设计在未来一定会给用户带来更好用户体验和更高的满意度。

参考文献：

[1] Ben Frain 著，王永强 译. 响应式Web设计 HTML5和CSS3实战[M]. 人民邮电出版社，2013，01.

响应式Web设计研究 篇4

响应式web设计的优势主要有以下几点:

1、开发,维护,运营成本低。

因为页面只有一个,只是运用的css和js让它适应不同的设计。特别是一些公司的官网,经常更新维护,用响应式web设计,维护起来就简单的多。只需要修改一个页面就可以在不同页面终端显示相同的效果。拿花旗银行的官网来说,网站地址:https://www.citibank.com.cn。假如客户要修改花旗礼享卡的文字介绍或者选项卡的内容,我们只需要找到相关内容修改一次就好,大大节省了维护成本。原来公司的官网有3个版本:pc版,mobile版和ipad版。算上每种版本都有中英文两个版本,网站的任何一次变动都需要修改6个地方,很不方便还容易出错。

2、兼容性优势。

现在科技日新月异,特别是移动端不时的就有新一代产品的出现。响应式布局在设计的时候已经充分考虑的这一点。不需要针对新出现机型做任何改变就可以完美的在新设备上显示正确的内容。

3、对用户友好,无需重定向。

原来针对每种机型做一套网站的做法,为了达到让用户无论通过什么设备都能访问到正确的网站的目的,一般采用的方法是在网站的首页进行设备判断,然后根据结果跳转到相应的网站URL,而有些检测代码就有可能在重定向的过程中丢失。响应式布局网站是一个URL,因此可以很好的解决这个问题。

下面着重讲解一下响应式布局网站的实现步骤和注意事项。

1、设计。

要想做响应式布局网站,设计很重要。一定要设计部门配合好才能设计出好的相应式布局网站。首先,要确定整个网站的布局结构,方便在各种规格的屏幕上显示;其次,确定网站中的图片显示方式,怎样让网站中的图片在各种屏幕尺寸下正确显示,并且不占用很多的下载流量显得尤为重要;最后,就是确定哪些内容在小的屏幕上是开始隐藏起来的,通过下一步操作才能看到全部内容。

还是以花旗银行的花旗礼享卡(链接:https://www.citibank.com.cn/sim/ICARD/minisite/index_lix.html)为例。对比此页在各种终端的显示就可以看出,手机版和pc的最大的区别就是菜单导航变了,主导航变成左上角一个小按钮,屏幕的第二行是当前页面导航,同时也是二级菜单导航。这样方便用户进行下一步操作,也不占用很大的屏幕空间,从而可以腾出更多的空间显示当前页面的主要内容。其次,就是同样在重要位置上突出申请信用卡的banner的重要内容。最后,选项卡的内容则仅显示标题,如果用户喜欢相关内容,就可以通过点击查看更多内容。这样既保证了内容的完整性,又保证了页面的简洁性,两全其美。而ipad因为屏幕介于pc和mobile中间,因此内容显示和pc差不多,只是菜单框架参考了mobile。所以说设计很重要,从一开始就要考虑好各种屏幕的适应性。

2、开发实现。

如果设计的时候充分考虑到相应式布局的问题,那实现阶段就变得容易的多。首先,媒体查询(media Queries)是响应式设计的核心;它能使我们根据设备的功能来设定相应的样式。这样就可以保证在不同的屏幕终端都能正确显示所需要的内容。第二,弹性机制。这部分内容包括弹性的网格,弹性的容器,弹性的图片和视频等。在响应式布局的设计理念中所有的图片和容器大小最好是以百分数来表示的,不能用固定的像素来设置。当然还要考虑下载流量的问题。在小的屏幕上不仅要同比缩小图片,更要让用户下载小的像素的图片或者像素低的图片即响应式图片。第三,字体。以前的普通网页字体都是以px来作为度量单位的,这样在手机端的文字就会变得非常小。CSS3引用了一个新的单位叫rem,他和em类很像,但比em更容易使用。因为em是针对父级元素来确定自身元素的大小,而rem却是根据根元素来确定自身大小的。但是不要忘记一点就是在网页的开始重置根元素的大小。

3、耐心的测试和修改。

因为要匹配所有的终端,因此在网站制作完毕后一定要耐心细致的测试,找几个代表性的设备进行测试(当然不可能测试完所有的设备)。发现兼容性问题及时反馈处理,这样就可以使得上线后的作品可以给用户一个良好的体验。

WEB设计 篇5

我截取了大概100个页面进行色彩应用的分析，我想，既然这些页面代表着的视觉潮流，那么网站的色彩也相应地体现了20的流行色应用趋势，

其实还可以深化研究的，因为时间的问题（大概用了5个工作日），我做得比较粗，等后续再进一步细化分析。希望能给我们和广大web视觉设计是带来一点点的帮助。

分析总结的结果，基本符合常规理论，只是通过分析得出的数据，进一步坚定了我们的设计思想和理念。数据能证明一切问题。

欢迎大家探讨，指正，共同进步！

WEB设计 篇6

关键词 WEB技术 新闻发布 模块化设计

中图分类号：TP3 文献标识码：A

1概述

随着Internet 的高速发展，网络已成为了人们日常生活信息来源的主要途径。越来越多的企业建立了自己的 WWW 网站，通过新闻管理系统发布最新动态，展示产品，建立与合作伙伴的联系，与用户进行交流和沟通。对信息的掌握程度、信息能否得到充分利用、信息获取是否及时、对信息的反应是否敏感准确，已越来越成为衡量一个企业市场竞争能力的重要因素。

基于WEB技术的企业新闻发布系统能够通过新闻采集、修改、审核、发布和管理一体化设计，实时的网上交互，能很好地适应互联网技术的发展。对于拥有众多分支机构的大型企业，新闻的可靠性和安全性是非常重要的，创建及时可靠的新闻发布系统会使企业在竞争中处于领先位置。

2需求分析

2.1性能需求

目前已经进入互联网技术高速发展的大数据時代，人们已经离不开网络媒体，网站新闻发布系统能够提供一个传递信息的平台。新闻发布系统是一个信息系统，但与一般信息系统相比，新闻发布系统是一个开放的系统，前台浏览无需验证；是基于浏览器/服务器模式下的网络信息系统，数据量较大，但数据库逻辑相对简单。在这种情况下如何达到新闻对时效性和管理信息丰富性的要求，这就需要做好全面的需求分析，对网站新闻普通浏览用户和管理人员都要有一个比较全面的了解，才能设计出一个令人满意的系统。网站新闻发布系统为企业和单位提供了一个发布和管理信息的平台，同时也为潜在客户提供了了解信息的平台，通过交互式的界面，两者可以实现交流与沟通。

通过以上分析可知，网站新闻系统在性能上应达到以下要求：界面友好，新闻条目分类简单明了，方便用户操作方便，只需要点击鼠标即可完成需要的动作；处理新闻操作简单，一些常用命令如录入、修改、删除等显示在页面上；系统操作要求稳定、速度快、效率高，并且具有很好的扩展性，便于功能扩展和维修的未来。

2.2系统功能需求

网站新闻发布系统的主要目的是实时、有效地发布和管理新闻信息。正常情况下，在功能要求上，网站新闻发布系统需要确保网站的浏览用户能够登录网站浏览信息，方便地阅读新闻，根据特定需求进行新闻搜索，信息查询和下载文件，对感兴趣的新闻进行评论等互动性需求。系统管理员实现对网站的更新和维护，添加和删除信息的相关权限人员的帐户，对不同人员设定相应的权力。

3系统设计与实现

3.1 系统架构

该网站新闻发布系统的运行架构由表现层、业务逻辑层、服务前端层，Web Services 层和数据库层组成。其运行流程为数据由前台的表现层传递到系统业务逻辑层，经过平台内建的应用集成模块和应用业务逻辑模块来区分系统的下一步操作，当数据转入服务前端层后，再经判断用户的授权等一系列操作，这些操作都是有引用服务前端来完成的。当进行一些底层的数据操作时，有系统的 Web Services提供服务，处理一些数据上的衔接。最终所有数据都要进入系统的数据库层，由SQL来完成所有的存储功能。

3.2系统模块设计

本系统基于B/S进行设计，管理员可以通过网站的管理员登陆界面登陆系统，获取相关权限后完成对新闻的编辑和管理，对普通用户的评论信息进行管理等，普通用户在使用该系统时通过普通浏览器进入网站查看、搜索新闻或者进行评论等。

为便于开发与维护整个系统，本系统采用模块化设计，逐个设计分析，在功能上分为：为管理员设计的新闻管理模块、添加新闻模块、登陆模块、评论审核模块和为用户设计的浏览模块、搜索模块、评论模块等几大类重要模块。各个模块之间通过连接组合，完成整个系统的整体功能，使整个系统实现在需求分析时设定的要求。

从管理员的角度来讲，管理员的功能都属于后台管理功能。管理员首先要有管理权限，如添加管理员基本信息、更改管理员密码、名称等，确保管理员对整个系统的管理权限。为确保新闻信息的时效性，管理员需要及时准确地添加内容，及时的添加新闻信息，这就是增添新闻信息内容模块。此外还要有新闻管理模块，

完成每时每刻能够对新闻的变化、对新闻信息的修改、删除等操作。当需要添加信息时，管理员需要利用分类模块将新闻进行分类，使新闻信息管理更科学。对用户的留言需要利用评论审核模块进行筛查，正确引导新闻舆论。

从用户的角度来讲，最简单最必须的模块就是用户查看模块，允许用户有选择地浏览新闻信息的内容。另外需要允许一些有权限的用户进入系统的后台界面，就是登陆模块。该模块主要是保证有权限用户的操作需求，并且确保新闻信息不被普通用户随意操作，可以有效的保证网站新闻发布系统的安全性。当用户遇到对自己感兴趣的新闻时，可以利用评论模块进行评论，然后用户发表的信息被储存到数据库，等待管理员进行审核，只有通过审核后才能在页面显示，同时保留用户的评论信息，以便用户下次查找。当用户需要对新闻进行搜索时，搜索模块确保用户可以通过输入相关的信息，在数据库中查找相关内容。该模块主要是为了使用户可以根据自己的兴趣爱好对新闻信息整理分类，有选择地浏览新闻信息的内容。

3.3 数据库设计

需求分析中已经对系统所需数据和系统结构进行了分析，在数据库建设中需要设计出系统中所需的具有不同属性的实体。根据系统的规划和需求，根据新闻大小可以将新闻分为大类别和小类别实体，该系统中将实体分为：用户管理员实体、新闻信息实体和评价实体。实体之间存在的关系，是数据逻辑设计的基础。

在进行数据库建设过程中，要保证数据库一致性、数据库内信息安全性、和数据安全性。数据库一致性要求新闻一级类别和二级类别中通过一级目录名约束，同时通过新闻编号关联新闻和评论，保证评论与新闻相对应。数据库内信息安全性要求在管理员必须通过账号和密码才能登陆系统进行相关权限的操作，防止数据被一般人员操作。数据安全性，要求隔离客户端层和数据库层数据，使得数据不能被破坏，保证数据的安全性。

通过对系统的需求分析，对数据库的表设计主要有：客户评论表，对新闻进行评论，与管理系统进行交互新闻分类表；后台管理员表，主要进行新闻管理，对新闻的上传编辑修改；对新闻进行分类的新闻文章表，根据新闻的分类，进行文章发表。

3.4 系统设计要点

系统的前台模块主要是划分一些功能，当用户登录到系统后就可以使用控制面板通过首页的页面能够顺利的调用到下面的其他模块，设置一些基本信息和发布新闻并管理。前台页面主要有标题栏、主要新闻、新闻分类显示等模块。前台页面采用母版页，在更换前台页面的样式时，只需添加一个新的母版页即可，操作简单。为保证了系统的美观，在前台页面中使用了少量的CSS样式，如设置字体颜色、背景、边框大小等。本系统主要的两个大类就是新闻浏览模块和登录模块。

系统后台模块的主要功能是通过认证的会员并且是具有 Admin 属性的用户可以显示出站点管理选项。为保证后台页面风格统一，后台页面也采用了母版页。后台管理页面在后台页面中主要是针对菜单栏的设计，在菜单中主要由用户管理、系统管理、版本信息、新闻管理等。为使后台页面不显枯燥，可以在后台页面中加入了系统探针这个页面，用来显示电脑的一般信息。

4结语

本文详细介绍了基于WEB技术的网站新闻发布管理系统的分析、设计、实现过程。本系统的设计遵循软件工程的思想，为企业发布新闻提供了能够统一管理的平台，确保新闻发布效率，提高管理水平，适用于网络高速发展及信息快速更新的背景下企业全球化发展的需求。

参考文献

[1] 张景峰，陈刚，康宏.WEB方式下图形数据的存取[J].华北航天工业学院学报，2005（04）.

[2] 王建军，刘玉林.网络教学数据库的构建与开发[J].教育信息化，2002（07）.

[3] 虞智辉.基于Flash-Website的两个Flash动态技术的应用[J].中国教育技术装备，2010（21）.

WEB设计 篇7

1 关键技术

响应式设计整合了媒体查询、弹性视觉媒体和流动布局[7],媒体查询实现按设备特性来分级控制页面布局,弹性视觉媒体实现视觉媒体按照特定布局的动态调整,使用流动布局能创建可缩放、可流动的弹性版式,三者构成了响应式设计的核心技术。

1.1 媒体查询

在CSS2.1媒体类型允许为显示器(screen)、打印机(print)、电视机(tv)等媒体定义样式,W3C在CSS3中加入了媒体查询(Me-dia Queries)模块,不但支持定义媒体类型,而且支持上网设备的物理特性的检测。没有CSS3的媒体查询模块,就不能针对设备特性匹配特定的CSS样式。媒体查询根据媒体类型、屏幕宽度、屏幕比例、设备方向(横向或纵向)等各种功能特性来改变页面布局,而不仅仅像CSS2.1的只是媒体类型。Web设计者只需要针对不同的屏幕分辨率等级来编写不同的页面布局样式,然后上网设备会根据自身的屏幕分辨率来选择一种适合页面的布局,从而改善用户浏览体验。媒体查询表达式由设备类型和一个或多个检测媒体特性的声明构成,声明由媒体特性名称和值构成,中间用冒号“:”分隔[8]。媒体查询的语法为:“@media媒体类型and (媒体特性) {样式代码}”,其中媒体类型常用的有al(l所有设备)、screen(电脑显示器)、prin(t打印机或者打印预览)和tv(电视机)。CSS3中定义的媒体特性共有13种,分别是视口宽度width、视口高度height、设备屏幕分辨率宽度device-width、设备屏幕分辨率高度de-vice-height、设备方向orientation[portrait | landscape]、视口宽高比aspect-ration、设备屏幕分辨率宽高比device-aspect-ratio、设备支持的每像素色彩位数color、设备的颜色索引表中的颜色数color-index、黑白屏幕设备每个像素的所使用的位数monochrome、屏幕或打印机分辨率的resolution、电视机扫描方式scan[progressive | interlace]、输出设备是栅格还是位图grid[0|1]。可使用and关键词组合媒体类型和媒体特性值条件,在媒体类型前面或媒体特性前面加not对后面的表达式取反,加逗号“,”在一系列表达式其中一个真时则为真,加only使不支持媒体查询的浏览器忽略本条查询,“{ }”中书写CSS规则。例如“@media screen and (min-width: 480px){}”表示视口宽度小于480px适用,“@media screen and (min -width: 480px) and (max -width: 768px) {}”表示视口宽度大于480px但小于768px适用,“@media screen and (max-width: 960px) {}”表示视口宽度小于960px适用,“@media screen and (min-width: 1420px) {}”表示视口宽度大于1420px适用,这时可能要考虑设置max-width属性限制内容区的最大宽度,或者增加列数来填补大量的空白区域[9][10]。响应式Web设计最为常见的是检测上网设备的width特性值,设定视口宽度的级数取决于用户群体终端设备碎片化程度和视觉设计需求,需为不同终端级别宽度定制相匹配的样式,做到宽度连续覆盖。另一种设计思路强调以界面为主导,解除断点设置跟上网设备分辨率的直接关联,断点数量及参数完全根据内容来决定,也就是根据网站的图文版式的变动临界点来设置。

响应式Web布局设计时,媒体查询顺序采用从移动端向上设计,优先建立移动设备用户体验,然后针对更大屏幕的显示器进行调整,以避免移动终端对媒体查询的支持不完善,也就是,在样式表的开头定义基本样式,然后使用媒体查询从低分辨率到高分辨率来重写样式以覆盖前面定义的样式[11]。

为减少HTTP请求数量,建议将媒体查询样式尽可能写在同一个文件中。对于较复杂的网站,可以采用外部样式表,通过<link>标签链接到网页文件,如“<link rel="stylesheet" type="text/css" media="screen and (min-width:960px)" href="css/gt- 960px.css">”,实现当视口宽度大于等于960px时载入外部样式表gt-960px.css。

目前,移动终端浏览器一般都能比较好支持CSS3,不需要考虑响应式布局的媒体查询兼容问题,为实现IE9以下的浏览器媒体查询兼容性,需在页面中插入css3-mediaqueries.js文件调用,代码如下:

1.2 流动布局

媒体查询能适应不同设备和视口宽度,可以从一组CSS样式代码切换到另一组,但切换期间没有任何平滑过渡,会导致媒体内容要么过宽出现水平滚动条,要么过窄出现大量空白,尤其在切换临界点时布局会严重恶化。通过将固定像素布局转换成灵活的流动布局,确保在媒体查询未切换样式期间布局能适应视口改变。流动布局依靠浮动和百分比宽度来实现,浮动实现布局区块的动态重组,百分比宽度实现未到达断点时的区块宽度调整,以减少创建的断点数。浮动布局在固定宽度的Web设计中已经大量使用,在此不在赘述。将固定像素宽度转换成百分比宽度可套用公式:百分比宽度=目标元素宽度÷上下文元素宽度。例如,将原来#wrapper宽度为960px,#content宽度为940px,转换为百分比布局#content宽度97.92%,即940÷960=0.9792。

在网页文档<head>标签中插入一个HTM5<meta>标签,设置基于Web Kit内核的画布缩放参数,如<meta name="viewport" con-tent="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> ,可实现页面在浏览器中以原始大小显示,禁止用户缩放。其中:width和height检测设备屏幕分辨率宽度和高度,initial-scale设定初始的缩放比例,值为1时将根据浏览器可视区域实际大小来渲染页面。minimum-scale和maximum-scale指允许用户缩放到的最小比例和最大比例,user-scalable设定用户是否禁止缩放。

1.3 弹性视觉媒体

视觉媒体主要指文本、图形、图像、动画和视频等可视媒体。弹性视觉媒体设计的本质是确保视觉媒体适应版式布局的变化,确保页面上媒体的可读性。响应式Web设计时文本和其他视觉媒体实现方式不同。

弹性文本需将文本大小单位从px改为em,em的大小由上下文的定义的字体大小计算而来,是相对大小单位。使用em的好处在于:允许缩放文本和保持文本大小设计的灵活性。设计时通常给body标签设置font-size属性值后,给其他文本都使用相对单位em,使用相对单位的文本就会基于body的大小来计算字体大小。字体百分比尺寸计算跟百分比布局盒子计算方法相同,如上下文字体大小为16像素,当前文字大小为14像素,则字体大小0.875em,即14÷16=0.875。

图形图像、动画和视频的弹性设置使用“img,object,video,embed {width:100%; max-width:100%;}”,max-width属性用于设置媒体显示阈值,确保缩放时不会超出图片最大尺寸,同时应删除HTML插入媒体的标记中的width和height属性定义,如果要定义特定规格的媒体尺寸,可编写专用样式单独设置宽度,以覆盖上下文定义,使其仅作用于该媒体即可。另外一种限制内部媒体显示缩放比例的方法是给外层盒子设置max-width属性,通过限制外层盒子来间接控制内部媒体缩放尺寸。

在设计制作弹性视觉媒体时,仅考虑媒体放大到的极限情况会因此带来一个媒体文件整体偏大,使网站变得臃肿,需利用媒体压缩和优化技术来控制文件大小。另一种实现思路是通过Java Script判断当前设备的分辨率,并根据预设的规则加载不同尺寸的图片文件。

2 响应式设计流程

2.1确定需支持上网设备类型

上网设备调查可以帮助Web设计者了解用户使用的设备类型、屏幕尺寸、浏览器类型及版本[12]。上网设备类型主要调查移动终端(手机、平板)和上网本、笔记本电脑和PC,甚至是信息家电。屏幕尺寸调查主要掌握屏幕的尺寸和长宽比例。浏览器类型调查主要掌握浏览器类型、采用内核引擎及版本。通过调查最终确定出一份上网设备支持列表。响应式Web设计的目的在于针对不同设备的屏幕特性进行功能及内容的界面预设。对于用户不太明确的项目,可选择桌面显示器、i Pad和主流智能手机作为主要代表性的设备,而不必顾全所有已知的设备规格类型。对于结构复杂,内容丰富的门户类网站,可以采用响应式设计与手机版、i Pad版混合设计模式,对内容庞杂的页面做成手机版和i Pad版,一般页面则统一采用响应式设计。

2.2 制作线框原型

确定出设备支持列表后,需要依据这些需求由Web设计师去设计线框原型。制作线框原型的作用是组织并呈现信息,要避免在视觉上过度的保真,它并不是细致的视觉设计,不是Web设计稿,跟字体、字号、配色、图片等无关。针对确定下来的分辨率级别分别制作不同的线框原型,需要考虑清楚不同尺寸下页面的布局变化过程,内容缩放过程,甚至针对特殊的环境作特殊化的设计等。线框原型完成后将图片导入到相应的设备进行测试,可以帮助设计者尽早识别潜在问题,测试内容包括可访问性、导航与表单的可用性、可读性等方面。对于较小屏幕设备,将全局导航与主要内容之间的部分高度压缩,或者采用可折叠设计,确保页面跳转后主要内容可以呈现在首屏中,以防引起用户误认为页面没有发成跳转。

2.3前端实现

线框原型经过测试后,交给视觉设计师和前端工程师具体实现,主要任务是页面布局实现、编写Media Queries、自动缩放图像、字体大小采用相对单位、调整移动互联设备浏览缩放默认规则和调试[13][14],相比于传统的Web视觉设计过程,Web设计师必须时刻保持警惕,关注功能性组件的可用性、保证图文信息在所有设备中都容易辨读。前端工程师可以使用响应式前端开发框架,简化开发过程,确保开发网站具有跨浏览器、一致性、响应式等特点[15]。测试响应式布局可以安装i OS模拟器或者Android模拟器,也可以利用用户拖动浏览器时会触发判断条件的特性,把浏览器窗口缩小到一定尺寸就可以检测响应式布局是否生效。

3 结论

响应式Web设计为适应多样化的上网设备来设计,它通过整合媒体查询、流动布局和弹性视觉媒体技术,是一种采用灵活的、不针对特定上网设备的方法来进行Web设计,有效地解决了移动互联网用户终端设备碎片化问题,实现了“一源多屏”的现实需求。在响应式Web设计实践中,先确定Web设计所支持上网设备列表,然后制作线框原型并测试,再由前端工程师使用响应式布局开发框架完成网站设计与开发。开展响应式Web设计关键技术及设计流程的探究,能为Web设计师和前端工程师开展响应式设计和网站重构提供了技术框架和路径。

摘要：适应移动互联网Web设计需求,从Web设计实践出发,解析了响应式Web设计的媒体查询、流动布局和弹性视觉媒体三大关键技术,提出了响应式Web设计流程,为实现“一源多屏”Web设计提供了解决方案,为移动互联网设计和重构提供了技术框架和路径。

基于框架的WEB前端设计 篇8

关键词：Bootstrap,Angular JS,框架,WEB前端

0 引言

随着新一代信息技术的快速发展,Web应用越来越广泛,对于Web前端开发工程师的要求也越来越高,无论是开发技术上,还是开发方式上,现在的网页制作都更接近传统的网站后台开发,由原来必须掌握的HTML、CSS和Java Script三个技术要素演变成现在的HTML5,CSS3和Jquery。而且前端工程师开发的Web应用不仅需要适合传统的电脑PC端,还需要适合手机和IPAD等各种不同的移动设备。为了降低Web前端开发的难度和复杂性,引入框架思想进行Web前端开发。

使用框架进行Web前端开发主要有两个方面的原因:使用W3C标准的框架后,可以有效提高Web应用的性能,让应用的代码组织更有序,提高其可维护性;使用便捷的MVC框架,把HTML作为信息模型(Model)、CSS控制样式(View)、Java Script实现功能和业务逻辑(Controller),使得代码具有很好的重用性和复用性,提高Web前端开发的效率、质量和团队协作性。本文主要简单介绍使用框架思想来进行Web前端开发。

1 框架概述

框架是随着软件工程的发展演变而来的,在软件开发过程中,很多项目要解决的问题和实现的功能是一样的,在这种情况下,可以将实现相同功能的代码放在单独的一个文件作为组件或构件,供以后开发和使用,这些代码是可重用和扩展的。因此,业界人士将相同功能的实现和问题的解决方法进行抽象,最终抽取和形成一个应用框架。框架可以使软件开发人员将大部分时间用来分析和处理业务逻辑上,在编写代码时只要应用框架就可以了。

使用框架开发应用的优点如下:

(1)框架重用性好,开发效率高。在开发应用时,可以重用框架的分析、设计、代码,使得应用开发效率和开发质量得到了显著提高。应用开发人员可以按照框架的思想将应用进行分析并将其分解为同样的组件,采用同样的方法来解决的问题。框架还提供了可重用的概要设计和详细设计,并将应用分解成较小的组件和接口。只要符合框架的定义和要求,开发人员就可以使用框架中的类和接口,使得开发效率大大提高。

(2)因框架实现了“高内聚、低耦合”,可扩展性较好。框架把要解决的业务分解为较小的事务,采用分层的方法将相关性很强的代码组合成一个组件,根据单一责任原则只解决一项较小的事务,并且减少组件与组件之间的联系,如果彼此之间的联系比较复杂的话,继续分解为较小的组件。因此框架实现了软件工程的“高内聚、低耦合”的要求,易于控制,易于扩展。

(3)使用框架,开发周期短,成本低,可维护性较好。使用框架开发应用,只要调用类和接口就可以完成大部分工作,大幅度缩短了应用和软件的开发周期,显著提高了软件开发质量。大粒度的重用使得应用和软件开发成本大大降低,开发时间成倍减少,同时分层思想设计的框架使得应用开发的适应性和灵活性也得到增强,可维护性较好。

2 Bootstrap框架应用

2.1 概述

Bootstrap框架主要用于静态页面的设计,是由Twitter公司的设计师Mark Otto和Jacob Thornton共同开发的,是比较受欢迎的一个CSS/HTML Web前端框架。它是基于HTML5、CSS3和Java Script的框架,符合HTML和CSS规范,且代码简洁灵活,使得Web前端开发更加快捷。Bootstrap框架推出以后一直颇受欢迎,是Git Hub网站上的排行榜靠前的开源项目,国外知名的公司NASA的Breaking News和国内一些移动开发者较为熟悉We X5前端开源框架都采用了Bootstrap框架。

由于Bootstrap的HTML是基于HTML5的最新技术,可以快速实现响应式页面,集成了非常友好的CSS样式表,对于非设计人员也可以制作出很漂亮的网页,且占用资源非常少,因此我们也采用Bootstrap框架进行Web前端设计。该框架包含了丰富多彩的Web组件,利用这些组件,我们可以快速的搭建一个个性化的、漂亮和功能完备的网站。主要包括以下几个部分:

1)全局CSS样式:包含了格栅系统、表单和表格等集成样式。

2)组件:包含了下拉菜单、按钮下拉菜单、文本框、导航、列表框等组件。

3)插件:包含了进度条、警告对话框、弹出框等插件。

2.2 应用

(1)从Bootstrap官网http://getbootstrap.com/getting-started/#download下载Bootstrap开源框架。Bootstrap主要包含css、fonts和js文件夹:css文件夹存放的是bootstrap.css基本样式,在网页中使用<link rel="stylesheet"href="css/bootstrap.css"/>命令即可;fonts文件夹存储网页中可以使用的各种字体;js文件夹存放的是bootstrap.js等js文件,在网页中可以通过<script></script>标签来使用js组件。

(2)Bootstrap是根据移动终端优先的原则设计的。它支持响应式网页(RWD,Responsive Web Design),为了控制网页的尺寸比例和触屏缩放,需要使用命<meta name="viewport"content="width=devicewidth,initial-scale=1">命令添加viewport元素。

(3)设置页面流式布局,网页中的各元素会根据设备分辨率的不同而自动调整大小,但元素位置并不会发生变化。流式布局通常将页面分为12列,将网页的宽度设置为100%,具体代码因太多此处省略。

(4)运用Bootstrap提供的各种样式、组件和插件完成WEB前端设计。例如制作一个提交按钮,通过以下代码实现<button class="btn btn-default"type="submit">提交</button>。

3 Angular JS框架应用

3.1 概述

Angular JS主要用于构建单页面的动态页面的设计,更多关注的是构建CRUD(增加Create、查询Retrieve、更新Update、删除Delete)应用,由Misko Hevery等人在2009年创建,是一款优秀的JS框架,被广泛应用。

Angular JS主要使用MVC的分层设计模式,将管理数据的model、应用逻辑controller和向用户显示数据的界面(view)清晰地分离开,以提高代码的易读性和可移植性,使得程序清晰易读。在Angular JS应用中,model被存储在各个对象的属性中,view就是文档对象模型(DOM),controller就是JS类和代码。

3.2 应用

(1)从网上下载Angular JS框架。将要使用的js文件复制到工程文件的js文件夹中,并在页面中使用<script src="js/angular.js"></script>命令引入。

(2)使用ng-app命令在动态页面中创建模块。Angular JS的MVC结构是基于整个具体应用的。通常在页面的指定容器标签中使用ngapp命令来创建具体模块,例如<div ng-app="test"></div>。

(3)设置控制器controller。在网页中通过ng-controller指令设置控制器,<div ng-app="test"ng-controller="test Controller">{{text}}</div>。再通过JS代码控制逻辑,app.controller("test Controller",function($scope){$scope.text='welcome';})。

(4)设置模型数据model。通过ng-model命令动态设定模型数据model内容,<div ng-app="特test"ng-controller="Hello Controller"><input type="text"ng-model="text">{{text}}</div>。

4 总结

本文针对新一代信息技术的发展,将Bootstrap和Angular JS框架运用在WEB前端开发中,希望能对WEB前端设计的研究提供一定的参考。当然本文只是简单介绍了Bootstrap和Angular JS框架的基本应用,详细的应用有待进一步的完善。

参考文献

[1]http://www.51cto.com.

[2]http://baike.baidu.Com.

基于WEB的网络爬虫的设计 篇9

关键词：网络爬虫,多线程,深度优先,WEB抓取

1 引言

1.1 网络爬虫的原理

网络爬虫的工作原理都是一样的。它的基本工作流程如图1所示。(1)首先选取一部分精心挑选的种子URL。(2)将这些URL放入待抓取URL队列。(3)从待抓取URL队列中取出待抓取在URL,解析DNS,并且得到主机的ip,并将URL对应的网页下载下来,存储进已下载网页库中。此外,将这些URL放进已抓取URL队列。(4)分析已抓取URL队列中的URL,分析其中的其他URL,并且将URL放入待抓取URL队列,从而进入下一个循环。如图1所示。

1.2 网络爬虫的爬取策略与选择

爬虫系统中,待抓取URL队列是很重要的一部分。现在网络爬虫采用的主流爬取策略有深度优先爬取策略,文章主要对主流爬取策略进行讲述:深度优先爬取策略就是指网络爬虫会从起始页开始,从起始页的一个链接接着一个链接跟踪下去,处理完这条线路之后再转入下一个起始页,继续跟踪链接。如图2所示。

深度优先爬取策略的遍历路径为:A-F-G E-H-I B C D。

2 网络爬虫的设计

根据上面所说网络爬虫设计,运用Java语言进行编程,笔者在Eclipse平台上实现了网络爬虫。当爬虫程序的线程数设置为4,爬取深度设为5,爬行关键词设置为“军事”“和平”“边境”,初始URL设为百度网站:http://www.baidu.com,设置界面如图3所示。运行界面,如图4所示。

3 网络爬虫的测试

实验的环境如表1所示。

将爬虫程序的线程数分别设置为1、10、20,爬取深度设为3,爬行关键词与初始URL不变时,所得实验结果,如表2所示。从测试结果中可以看出,当爬虫的线程数增加时,网络爬虫的工作效率在不断提高,性能也不断增强。但不能无限制地增加爬虫的线程数,因为数据库的容量是有限的,所以我们应该为网络爬虫选择一个适当的线程数,才能更有效地利用爬虫资源以及空间资源。

4 结语

文章首先简要介绍了网络爬虫的基本概念及其工作原理,然后具体分析了爬虫程序的结构和功能。在最后还结合自己设计的网络爬虫代码进行了详细说明与介绍。

参考文献

[1]罗刚,王振东.自己动手写网络爬虫[M].北京:清华大学出版社,2010.

[2]房志峰.中文搜索引擎中的分词技术研究[J].科学技术与工程,2008(9).

[3]曾伟辉.深层网络爬虫研究综述[J].计算机系统应用,2008(5).

Web的入侵防御系统的设计 篇10

随着网络技术的不断发展和深入应用, 人们对网络的安全性和可管理性的要求也越来越高, 与此同时网络黑客的攻击方式, 也变得越来越多样化, 技术的复杂程度也越来越高, 网络用户使用网络过程中常见的攻击类型有:未经授权的远程访问、本地超级用户的非法访问、扫描与探查、拒绝服务攻击以及恶意软件包。这就要求对用户端发送的HTTP信息进行分析比对, 这可以通过截获传输层或网际层报文的实现, 所以我们通过Web服务器提供的接口仅仅截获应用层的HTTP报文。由于完整的HTTP会话, 包括用户端口发送一个请求, 服务器端响应请求, 那么服务器只监控的内容后, 才作回应的HTTP会话将结束。这个入侵防御系统的核心是它的策略引擎, 通过强大, 灵活的策略引擎, 实现功能检测或异常检测。

1 体系结构

通常一个系统会采用单层或者多层的体系结构。单层的结构将模块都紧密连接在一起, 模块与模块间都能交叉调用, 多层的结构划分了不同功能的模块, 层与层之间是靠已经定义好的接口进行通信传输。为了能使系统能够适合不同的Web服务器平台, 综合以上的因素考虑后, 本系统采取了分层式体系结构。图1为本系统的体系结构图。如图1所示, 这个Web的入侵防御系统主要分层了以下三层:

解析及响应层:这一层的作用是为IPS提供解析客户端HTTP报文请求以及封装服务响应报文的接口。按照以上的分析结果, 这一层由服务器提供的接口封装实现。如图2所示。

策略引擎:这一层的作用是策略调配, 通过“解析及响应层”提供的接口来获取用户端的信息, 并交给“解析及响应层”来完成。同时策略加载策略引擎的调配数据管理层来完成, 以及日志记录的功能。

数据管理:这一层主要提供日志记录的信息、策略脚本解析及配置管理的功能。因此数据进行处理过程都是在这一层里来处理完成。

每一层都独立的完成功能, 当其中某层的发生变化时, 只要接口没有改变, 对另外层没有影响。这样整体结构就有较大的扩展性, 例如:我们可以把响应层和解析的具体实现方法是由调用Web服务器的接口方式替换为直接截获传输层网络层封包的方式等。

2 处理流程

Web IPS的处理流程图2所示, 具体流程如下:当用户端向发送HTTP请求的时候, 解析模块解析原始的数据报文经HTTP报文, 报文解析模块会告知策略引擎模块对用户端的信息进行排查检测, 策略引擎会根据策略脚本中编写的策略, 告知HTTP响应模块对用户端的行为做出响应, 并根据策略脚本中的策略, 告知日志记录信息模块记录相应的日志。如图3所示, 依据WebIPS系统的处理流程及体系结构, 系统主要模块和实际作用如下:

IPS管理模块

该模块的主要工作是管理和连接IPS的各个功能模块, 同时管理和监控数据流, 根据读取配置文件的相关设置完成系统的初始化, 对系统的信息状态进行管理:运行、停止、重新加载。当HTTP报文解析模块告知有用户端进行访问时, 调用策略引擎对用户端的信息进行和行为进行检测, 对策略引擎反馈的结果告知HTTP响应模块进行响应。

配置文件模块

主要完成IPS配置文件的分析、读取及保存, 为IPS提供正确的接口, 具体方式可以由管理需求进行修改。

HTTP报文的解析模块

主要通过服务器为IPS提供的接口, 对用户端访问服务器的数据进行解析, 并通知IPS管理模块已经收到访问请求, 策略引擎检测访问用户端的信息。HTTP完整的数据信息解析模块中都有一个接口, 来检测用户端口相关信息。在一般的Web脚本当中都有这样一个接口。

HTTP响应模块

当需要针对用户端口的行为进行分析响应时, 在这一模块中对完整的数据信息进行组装。提供下面几种方式响应:调用了下一条策略、响应接受请求、响应断开链接、响应发送信息、响应发送文件和重定向。

策略引擎模块

策略引擎首先对系统预先制定好的策略脚本进行解析比对, 并依据设定的策略的不同属性和优先级组装策略链。当系统的管理员模块通知策略引擎对用户端口信息检测的时候, 策略引擎将利用HTTP报文分析模块提供的接口获得用户端口的信息, 分析用户端口的行为模式, 通过一次一次调配策略来控制用户端口的访问。在策略中, 可以检查侦测用户端口请求的每个字段, 并对用户端口的行为进行一次次分析比对或记录信息, 通过已经定义好的规则对用户端口的不同行为进行回应。策略引擎需要封装的HTTP完整的数据信息解析和回馈模块, 及日志记录的信息模块, 供策略中调配。

3策略引擎的设计

策略引擎是整个的IPS的核心部分, 同时可以加载两种格式不同的策略, 或者可以说策略也可以用两种完全不同的方式表现出来, 一种是应用策略脚本的文件, 一种是应用C++编码的C++类型的。策略的属性需要进行必要的设置, 包括策略的名称、类型、开启状态、加载状态、优先级、路径。

3.1 策略的加载

具体步骤如下:

(1) IPS管理模块利用配置模块来读取管理员设定好的策略属性列表, 将策略名称相同的项去掉, 并将它作为策略引擎初始化的参数或者策略引擎重新加载的参数。

(2) 策略引擎将按列表当策略的型属性、优先级属性, 将策略由高级策略到低级策略的次序进行排列。生成一个新的策略列表。

(3) 若策略的开启状态属性值不是Enable, 将跳过此策略, 继续加载下一个策略。

(4) 若加载器的属性为C++, 则使用C++的策略加载器进行处理, 如果是为脚本的就由相同属性处理器进行处理。如果是不能识别的就将跳过这个策略。否则加载器会将策略对象初始化。

(5) 如果系统加载成功, 该策略的状态属性值将被设置为Loaded, 如果加载出现失败, 则将保持这个选项的状态属性值为Unload。由HTTP解析模块提供具体实现方式。

(6) 当策略列表中的全部项都被处理完后, 系统重新编辑该列表, 同时把Loaded的项提取出来, 形成策略调配用策略列表。

3.2 策略的调配

策略对象中提供了两个接口供策略引擎调配, 其中一个是OnSend, 另一个则是OnRecv。当策略引擎是为侦测这个服务器端口发送的数据时, 都是调用这个策略中的On Send接口。而当策略引擎是为检测这个用户端口的信息而调配策略的时候, 都是调配的策略中的OnRecv接口。

策略引擎将按下列的步骤对策略链上面的策略进行调配:

1) 依次按步骤 (2) 、 (3) 调配策略链上的策略

2) 如果策略回馈的是一个“调配下一个策略”的响应的时候, 则调用下一条策略。

3) 如果策略回馈的不是“调用下一个策略”的响应的时候, 则停止调度策略链上后面的策略并返回该响应。

4) 重复步骤 (2) 、 (3) 直到策略全都调配结束, 如果没有策略的响应, 则策略引擎回馈一个“接受请求”的响应。

4 总结

选取Kddcup99数据集对本系统进行模拟检测, 通过检测结果可认定:本系统能够对常见攻击类型做出正确响应。本系统为Web服务器管理员提供了脚本编写的策略, 使其能够便捷地配置Web服务器的环境。这一系统仅适用于防御Web服务器的入侵安全, 健康安全的网络环境是一个整体, 需要依靠每个网络中的个体都配备上良好的安全配置才得以实现。

参考文献

[1]吴海燕, 蒋东兴, 程志锐, 高国柱.入侵防御系统研究[J].计算机工程与设计, 2007 (24) .

WEB设计 篇11

关键词：计算机网络；信息；教学系统

中图分类号：TP393文献标识码：A文章编号：1009-3044(2007)16-30980-02

Design and Implementation of Teaching System Based on Web

ZHENG Wei-yong,LI Yan-wei

(Henan Textile College,Zhengzhou 450007,China)

Abstract:With the development of information technology, computer and computer network,they provide probabillity for the network teaching systems. The study in the network environment has the characteristics of individuation, cooperaticity, resourceulness and so on. They can help students cultivate independent learning abilities and frontier spirits. This teaching system adopts C/S and B/S to carry out together,and its contents mainly consists of three parts:teaching contents, testing contents and contents management.

Key words:computer network;information;teaching syste

1 引言

目前，计算机和网络的广泛应用，校园网的建设已逐步完善，大多数学生也已经具备了利用网络进行交流和学习的能力。但是在教学这个环节中，我们仍然过分依赖于传统的教学模式，对于网络的开发和应用程度远远不够。网络教学系统，主要包含一个基于网络的教学和考试系统，用于计算机基础课的教学环节。希望充分利用现有的计算机和网络资源，提高教学效率和质量。该系统主要有以下两个主要目的：

(1)成为学生学习“计算机基础”课程的辅助工具。

在原有的教学模式中，学生只能对着书本进行上机练习，缺少相应的辅助软件。该系统不仅可以进行各项教学工作如在线学习、提出问题和在线讨论等等，而且提供给学生大量的理论练习题和操作练习题，用于学生的网上练习及自我检测知识。通过系统的交互功能，增强同学们的上机积极性；提高学习效率。

(2)用于网上考试。

在传统的考试方式下，教师需要命题、阅卷、统计分数等等，工作量非常大。尤其当考生数量比较大时，阅卷和成绩统计将十分烦琐而且容易出错。同时，由于"计算机基础"是一门操作性十分强的课程，只凭理论考试难以检测学生的掌握情况。本系统可用于期末等各阶段的考试，不仅可以检测学生的理论知识，还可以检测操作水平，提高考试质量，并减轻教师的工作负担和提高工作效率。

2 系统设计

基于数据库和网络应用的系统实现技术有多种，可以采用传统的客户机/服务器（C/S）架构，也可以采用目前流行的基于WEB的方式。

所谓客户机/服务器 (Client/Server，以下简称C/S)工作模式作为一种分散化管理和分布式处理的具体实现手段，C/S软件一般采用两层结构，其分布结构如图1所示。它由两部分构成：前端是客户机，即用户界面(Client)结合了表示与业务逻辑，接受用户的请求，并向数据库服务提出请求，通常是一个PC机；后端是服务器，即数据管理(Server)将数据提交给客户端，客户端将数据进行计算并将结果呈现给用户。根据这一特点将数据库（比如，试题库）内容放在远程的服务器上，在客户机上安装相应软件；但是 C/S结构在技术上很成熟，它的主要特点是交互性强、具有安全的存取模式、网络通信量低、响应速度快、利于处理大量数据。但是该结构的程序是针对性开发，变更不够灵活，维护和管理的难度较大。通常只局限于小型局域网，不利于扩展。并且，由于该结构的每台客户机都需要安装相应的客户端程序，分布功能弱而且兼容性差，不能实现快速部署安装和配置，因此缺少通用性，具有较大的局限性。要求具有一定专业水准的技术人员去完成。

图1 C/S结构

基于WEB的方式其实是一种特殊的客户/服务器方式，在这种方式中，客户端是各种各样的浏览器。为了区别于传统的C/S模式，通常称为浏览器/服务器（B/S）模式。B/S采用三层体系结构，在数据管理层(Server)和用户界面层(Client)增加了一层结构，称为中间件(Middleware)，使整个体系结构成为三层。三层结构是伴随着中间件技术的成熟而兴起的，核心概念是利用中间件将应用分为表示层、业务逻辑层和数据存储层三个不同的处理层次，如图2所示。三个层次的划分是从逻辑上分的，具体的物理分法可以有多种组合。中间件作为构造三层结构应用系统的基础平台，提供了以下主要功能：负责客户机与服务器、服务器与服务器间的连接和通信；实现应用与数据库的高效连接；提供一个三层结构应用的开发、运行、部署和管理的平台。这种三层结构在层与层之间相互独立，任何一层的改变不会影响其它层的功能。由于采用了互联网的相关技术，B/S结构的系统开放性好，易维护、扩展。客户浏览器只跟WEB服务器交换数据，数据安全性比较高。当然，B/S结构在网络安全方面也有其弱点。在C/S结构中，应用程序是在客户机上运行的独立程序，如果这台计算机安全的话，那么应用程序就是安全的。而在B/S结构中，众多的客户浏览器访问同一个WEB服务器， WEB服务器会成为攻击活动的对象。

根据C/S和B/S结构的特点，以及系统在教学中的实际使用情况，“计算机基础”的辅助教学和考试系统的结构设计如下：面向广大学生的功能模块采用B/S结构，这使得系统的开放性和可扩展性相当好，系统的维护也比较方便。而且，对本系统而言，只有在考试的时候对网络安全性要求比较高，而在考试的短时间内完成对Web的入侵，可能性很小。

图2 B/S 三层体系结构

本系统的其他一些模块（比如，评分，成绩统计、打印）则采用C/S结构。这主要是因为：

(1)这些工作相对来说比较集中，不需要众多学生的参与；

(2)采用C/S 结构后，学生不能通过WEB方式访问一些非公开资料，这样有利于系统的安全。

(3)浏览器的打印功能不是十分强大；某些工作（比如，评分）涉及到多种技术，用客户机程序有一定的优势。

3 系统的设计思路如下

(1)建立数据库服务器和试题库。在服务器上安装windows 2000 Advanced server及数据库管理系统SQL Server2000。题库向广大任课教师收集，具有覆盖面广，难易搭配合理，考核点准确等特点。试题库汇总在服务器上，集中存储管理，确保其可靠性。在数据库服务器上同时存放学生的考试结果和成绩。

(2)根据实际需要，应用服务器可以采用独立的服务器，也可以与数据库服务器共用一个物理服务器。考虑到机房的服务器上一般都是采用Windows 2000 Advancedserver作为操作系统，因此我们在应用服务器上建立WEB 时，采用微软的IIS（Microsoft Internet Information Server5.0）[1],为了系统的安全性，安装微软的Proxy Server 作为代理服务器。当然，实际操作时更应该注重IIS本身的安全性。而IIS的安全性很大程度上依赖于服务器的安全性，因此也要充分利用服务器的安全特性。

(3)系统采用ASP.NET[2]技术作为服务器端脚本，实现与数据库和其他应用互动的Web网页。用户运行环境为标准的中文浏览器环境（比如，IE6.0或以上版本），用户只要具有一定的权限，并能通过浏览器访问服务器上的Web站点，就可以使用题库参加考试，以及辅助练习；练习题和试卷均按一定的组卷原则随机抽题，并以HTML格式呈现。由于本系统涉及到操作能力的考核（比如，汉字录入，WORD操作，Windows操作），在页面中需要实现一些相对复杂而又独立的功能。这些功能直接在网页中很难实现，因此采用Visual Basic 来编写应用程序，并封装成ActiveX控件置于页面中，实现网页中原本较难实现的功能。

(4)操作能力的考核也给评分和成绩处理工作带来一定的难度。考虑到只有教师有评分和成绩处理的权力。同时，这些工作相对来说比较集中，因此，把这部分功能处理成C/S结构的程序。评分部分综合各种技术进行，以求得到较为客观、公正的评分结果。此部分用VB[3]和VC开发成一个独立的客户端程序。

(5)为了整个系统的安全和维护的方便，在系统中包含了管理模块，设置有关参数，以及对系统进行必要的监控。只有系统管理员才有该模块的操作权。

4 系统的主要模块和功能

系统主要包括以下模块：教学子系统，考试子系统[4]，评分及成绩处理子系统，系统管理及维护子系统。

(l)教学子系统：

该子系统又包含两部分模块：教师模块和学生模块。在教师模块中，教师通过输入验证的账号、密码后，就可以进行授课所需的各种功能，如：在Web网页上添加学生的学习内容的相关内容、设置学习的课时时间，可以对学习的内容进行修改和删除；教师检查学生的作业情况、作业的内容；对各个学生的所提出的问题进行查看、答疑；及时了解学生人数、学习次数、某时刻的在线人数等等。在学生模块中，通过输入验证的账号、密码后，就可以进行学习，查看教师布置的作业、在网上或本地做作业、教师授课的学习内容、分步骤的学习、网上答疑、课程资源浏览等。

(2)考试子系统

用于学生完成在线考试，只能在教师设定的考试时间启动。学生登录到考试子系统的网页后，首先根据提示输入学号和考号，然后等待服务器抽取试题。服务器根据教师设定的考试参数，随机抽取试题，以HTML格式呈现给学生。在考试过程中利用服务器的定时器限定考试时间，同时在页面上动态地显示出考试所剩时间，当考试时间到或考生点击“交卷”按钮时，则系统把考生答案传送至服务器的数据库中保存起来。系统还提供成绩查询功能。

(3)评分及成绩处理子系统

是一个独立的客户端程序。该模块具有自动阅卷和成绩统计功能，提高教师的工作效率。教师通过特定的权限登录，选择某场考试的试卷及答案，进行评分和成绩统计，可以打印考试成绩，也可以把学生的成绩保存在数据库中。其中，评分是一个难点，应结合试题特点，综合利用各种技术，以求得到比较客观的评分结果。

(4)系统管理及维护子系统

该模块为考试过程的规范化和系统的安全性起一定的支撑作用，主要包括以下功能：

(a)设置试卷的一些整体属性参数和题型结构参数；

(b)对考试时间、合法考生及其考号进行设置；每场考试前进行初始化操作。

(c)对一些历史上的考试结果和成绩库进行删除和清理工作；

(d)对用户密码及权限进行设置；

(e)对考试结果提供安全备份机制。

5 结论

本系统的模块主要采用的是B/S结构，该结构与互联网紧密相连，扩展性十分好。而且该课程内容有所调整，只要对题库和评分模块作一些调整即可。同时，也可以结合其他课程的特点，对该系统作一些修改，用于其他课程的辅助教学和在线考试。

参考文献：

[1]肖国尊.译.IIS安全技术.清华大学出版社,2003年6月.

[2]杨帆.ASP.NE技术与应用.高等教育出版社,2003年10月.

[3]刘韬,骆娟.Visual Basic 数据库系统开发实例导航.人民邮电出版社,2003,8,8.

[4]王清心,胡建华.精英计算机考试系统的设计与实现.昆明理工大学学报,2003年28卷3期.

Web结构挖掘算法模拟器设计 篇12

Web结构挖掘是通过研究网页之间的链接结构来发现网络的组织结构和链接关系中隐藏的知识。随着互联网的迅猛发展和快速普及, Web上蕴藏的海量信息为数据挖掘提供了无比丰富的资源。其中, Web结构挖掘主要是从Web组织结构和链接关系中推导信息、知识。挖掘页面的结构和Web结构, 可以用来指导对页面进行分类和聚类, 找到权威页面、中心页面, 从而提高检索的性能;同时还可以用来指导网页采集工作, 提高采集效率。

本文对Web结构挖掘技术进行深入的学习研究, 探讨Web结构挖掘中的关键算法, 设计一个算法模拟器, 以使Web结构挖掘适应对海量数据分析与挖掘。

Web结构挖掘算法

Web结构挖据采用目前数据挖掘领域中的一些经典算法作为本模拟器所要实现的算法对象, 主要有关联规则和聚类两大类算法。

1 关联规则

关联规则是用来发现大量数据中项集之间的关联或相关联系。其形式化定义如下:

设I={i1, i2, …, im}是由m个不同项目组成的集合, 称为项集.设任务相关的数据D={t1, t2, …, tn}是事务数据, 其中ti称为一个事务, 是项的集合.每一个事务都有一个唯一的标示符, 称作TID.设X中包含K个项, 则X被称为K-项集。而关联规则是形如X=>Y的蕴含式, 其中X∈I, Y∈I, 并且X∩Y=φ。

由上面定义可知, 关联规则挖掘问题就是在事务数据库D中寻找具有最小支持度和最小置信度的关联规则.关联规则的挖掘是一个两步的过程。

(1) 找出所有频繁项集。

(2) 由频繁项集产生强关联规则。

2 聚类

在数据挖掘中, 聚类分析能作为一个独立的工具来获得数据分布的情况, 观察每个簇的特点, 集中对特定的某些簇做进一步的分析。此外, 聚类分析还可以作为其它算法 (如特征和分类等) 的预处理步骤, 这些算法再在生成的簇上进行处理。

本文主要对层次聚类中的凝聚算法以及划分聚类算法中的K-均值聚类算法进行分析。

2.1 层次聚类

层次聚类是按照一定的相似性判断标准, 合并最相似的部分, 或者分割最不相似的两个部分, 如果合并最相似的部分, 那么从每一个对象作为一个类开始, 逐层向上进行聚结, 直到形成唯一的一个类;如果分割最不相似的两个部分, 那么从所有的对象归属在唯一的一个类中开始, 逐层向下分解, 直到每一个对象形成一个类。

2.2 划分聚类

与层次聚类技术不同, 划分聚类生成的是在同一层次上的若干个聚类。如果想要生成K个聚类, 采用划分方法可以一次找到所有的K个聚类。而传统的分层方法是把一个聚类分成两个或者把两个聚类合并成一个, 这样一步一步生成一个系统树图。当然, 用分层方法也可以在系统树图的某一层上生成K个聚类。

算法模拟器实现

应用这些算法从模拟数据资源中发现模式或关系, 并最终以图形的方式将结果显示出来。

挖据模拟器系统设计利用matlab中所需要用的函数以及在vc中设计CApriori View类所需要建立的函数实现, 建立一个名为Apriori的应用程序, 并设置vc的头文件搜索路径和库文件搜索路径。

算法模拟器运行效果如下图所示:

结束语