网站设计Web

你的名字：

你的邮件：

你的信息：

网站设计Web 篇3

关键词 Web ASP.NET 网站开发

中图分类号：TP311.52 文献标识码：A

1网站设计和功能分析

网站主要实现了在单一商家网站的基础上，建立一个统一的商品销售交流平台，实现对相关商品信息进行统计、查询等管理，这样就可以提高经营和管理的效率，降低广告成本；同时商家通可以过网站展示自己的最新产品，发布最新动态，与用户进行交流和沟通、与合作伙伴建立联系，开展电子商务，还可以及时的向顾客公告企业经营业绩、技术与研发进展、特别推荐或优惠的项目、产品和服务，从而吸引顾客，扩大顾客群。

网站的主要功能有商家注册、修改资料，添加、删除、修改商品和报价， 商品信息显示和查找，以及各种相应的管理控制功能：如浏览权限、等级设置等。

普通用户登陆后，一般只能添加商品，删除/修改该用户添加的商品，发布和浏览零售信息；商户用户登录后，可以添加自己的商品，删除/修改该用户添加的商品，发布和浏览经销价和零售价等信息，有独立的报价单，同时可以拥有一个自己的主页，也可以连接到商家自己已有的主页；管理员用户登录后，拥有最高的管理权限，可以添加、删除、冻结其他账户的登陆和使用，删除，修改任何商品和价格的信息以及动态创建网页，修改添加、修改、删除数据库表，动态修改网页颜色、格局、背景等。

2数据库设计

在数据库设计中，所选择的数据库必须具有良好的数据管理与控制功能，同时又具有很好的安全性能与很强数据处理能力，利用SQL Server 2000 Express版来实现网站的前、后台数据库是一个很好的选择。其中，为了便于理解数据库结构设计以及数据表之间的关系，将这些表按功能分成三大类进行分别解释：商品及报价类、用户信息类和页面设置类。

2.1商品及报价类

商品和报价类的表，一般来说，一种商品对应了5个表：～（一手报价），～fold（一手报价旧），～s（二手报价），～sold（二手报价旧），～sp（商品信息表）。

不论一手还是二手，报价需要存储的信息量是比较大的，再者报价是有时效的，为了提高管理和访问的速度，报价在失效超过一定时间范围后，由系统经检测后，自动将失效超过一定时间的报价移动到相应的旧库中，以保证报价表中的数据是最新的数据，同时可以在一定程度上保证查询和访问的速度。

对于企业用户而言，还有两个关于商品及报价的表：companyfindex、companysindex，这两个表是用来记录企业用户的报价单的数据的，它有BID（编号）、companyid（企业编号），dataid（报价单中商品的编号）、shopid（）、datatime1（报价时间）等字段。

2.2用户信息类

在网站设计中，用户有三种级别，从安全性的角度考虑，分别使用了三个表：companyuser（企业用户），bp （管理员用户），pernaluser （一般用户）；和用户有关用户信息的表还有： address（地址信息表），introduce（企业介绍表），linkmethod（联系信息表），officenumber（办公室电话表），oldaddress（旧地址表）， oldname（旧名称表），qqnumber（QQ信息表），userinformaton（简单的用户信息总表）。

其中，管理员帐户是一个独立的表，与其它的用户表没有任何的交互，这样保证了超级用户即管理员的帐号安全。企业用户和一般用户的表存在一对多的关系，如一个企业用户会有好几个地址、联系人、电话以及QQ号码。

2.2页面设置类

有关页面设置所用的数据库表有：shezhi（页面背景表），datacategory（数据库信息表）， peizhi（系统相关配置信息），sp（临时信息表），zngg（公告和友情连接）和picture（图片）等。shezhi（页面背景表）记录了几乎所有页面每一个位置的配置信息，包括框架设置，颜色，字体等。datacategory（数据库信息表）保存了所有商品表的字段信息可顺序。picture（图片）表不但记录了页面上的图片信息，同时也记录了商品的图片以及企业用户上传的企业照片；他们以categery字段进行区分。

3 网站模块具体划分

整个网站分为4大模块：用户管理性模块，用户操作性模块、商户独立控制模块以及网站管理性模块。用户管理性模块主要有登陆模块、注册模块、修改资料模块和密码修改；网站管理性模块主要包含页面设置、内容更新模块以及生成新网页模块；商户独立控制模块主要包含添加、删除、查询、修改报价和商品等模块。

3.1 系统首页

作为一个网站的首頁，必须具备界面友好，网站功能一目了然和访问快速响应等优点；首页的主要由以下几部分部分主成：页头，页面操作按钮，如登陆、注册、联系我们以及数据的相关操作等。

信息管理网站作为一个企业和消费者共同访问的平台，它必须具备操作简单、界面友好的特点，并且，有可能大量的用户同时进行操作，从而产生大量的数据，要求系统还应具有较好的并发性。由于每个页面都有相同的页头，为了方便管理，设计了一个头文件header.ascx，并且在各个页面上包含该文件。

nlc202309021616

3.2 用户注册页面

用户从登录界面进入后台管理系统。如果用户没有登录或者是新用户，则必须先登录或先注册。用户只一般分成两大类：企业用户和一般用户。先填写帐号和选择用户类型，再填写其它的详细信息。

如果新用户的用户名已经存在，那么创建用户将失败，在进行帐号是否已被使用的检测之后，进入到注册界面，公司注册和一般用户注册共同使用一个界面，虽然需要填写的内容不一样，但大部分的参数是一样的，只需要动态的添加一些不一样的控件，就可以在一个页面上实现两种类型的用户的注册了。其中带*的为必填选项。为了保证用户注册信息完整性和有效性，新注册的用户帐户是被冻结的状态，需要管理员在核对信息后激活用户属性，而没有被激活的用户将无法进行登录。

用户资料修改和注册界面极为相似，操作和控制也极为相似。在注册的过程中，可以选择用户身份，而用户资料不可以修改，同样也不可以修改用户的注册帐户。

3.3用户登录页面

在登录界面上，如果是新用户，可以单击“注册”按钮进行注册；如果已经有了帐户，就可以直接输入帐号和密码以及验证码进行登陆。登录验证码已经成为网站预防暴力破解的基本手段之一。

在登录信息提交并验证通过的情况下，如果是一次验证通过，系统将自动返回进入登录界面之前的界面，使用户接续未完成的工作；如果验证是一次以上的验证才通过的，系统在用户登录后将自动返回主页。登录以后，如果希望换一个用户帐号进行登录，只需要单击页面上的“退出”按钮以重新登录。

3.4 网站内容更新页面

管理友情连接和管理公告使用的是同一个页面，只是显示内容不同。这就极大地显示了动态添加和设置一些控件的好处。友情连接是主页上的一系列的超级连接，有时需要添加连接，有时需要修改连接，甚至需要删除连接；如果不能动态的修改，则每次修改后都需要再次的重新上传。这样就比较的麻烦，也不是很安全。管理友情连接和管理公告均有修改和添加的功能以及删除的功能，从功能上来说非常相似，在显示上只需要动态的添加和删除一些不相同的DATAGRID的列信息，就行了。

3.5页面设置页面

通过页面设置界面的相关参数的设置，一般来说可以设置所有页面的布局、前景颜色、背景颜色和字体等。在进入设置页面后，只需要输入需要设置的页面的名称和位置，就可以设置相关的参数了。关于页面设置的参数可以保存在数据库中，也可以保存在文本文件中；相比较而言，保存在文本文件中速度较快，但安全系数低。

只有管理员才有进行页面设置的权利，这是提供给管理员的一项特殊功能，主要为了避免在完成远程调试后发现由于设计时部分界面不太合适而需要重新在本地修改、调试后重新上传的操作。

3.6数据库设置页面

修改和新建数据库德界面比较一致，主要用于动态的创建和修改商品的表。由于商品的种类繁多，且很多商品和报价信息需要每天更新，这就需要给新的商品创建一个相应的数据库表。编号、报价日期、经销价、零售价等信息是每种商品的数据库表都必须有的，所以不需要在上图的字段名和说明中标记出来。

3.6管理用户页面

用户管理功能：管理所有用户的用户信息、进行信息修改以及处理用户访问权限、注册新用户信息等。用户管理功能是在选定某個用户的基础上进行的，所以必须先查询用户信息，企业用户根据企业名称查询，而一般用户按照注册帐号进行查询。

3.7新网页生成页面

（1）前台的类别和产品浏览页面将以静态页面的形式呈现。采用静态页面而非动态页面的好处在于，前者降低了动态页面的执行开销，从而能支持更多的同时在线用户数量。

（2）在对产品和产品类别进行添加、修改、删除操作时，需要重新发布相应的页面，以便保持前台页面显示与后台数据的一致。

（3）要求既能够批量发布页面，也能够发布单个页面。例如，应该支持一次性发布某个类别下的所有产品页面。此外，对于各个模块有一条通用规则，即不能直接从数据库中删除任何实体，如：类别、产品、用户、订单等。从商业上考虑，所有已经录入的信息，除非另外归档，否则都不能删除，因为这些信息都有可能成为重要的历史数据；从程序上考虑，这些实体往往有着错综复杂的关系，因而需要不方便直接删除单个实体。在本案例中，为这些实体都设置了“状态”字段以专门记录该实体数据是否仍然被使用。

考虑到有些信息页面的用户访问量会非常大，如果仍然使用ASPX动态页面，就会产生一定的性能瓶颈。与动态页面相比，静态页面（纯HTML页面）或简单的ASPX页面具有更快的访问速度。

静态页面需要一个专门的发布程序。要实现静态页面发布，首先必须有一个模板页面。这里编写了Product View.aspx作为模板页面。如果某个类别下的商品数量较多，那么可能很希望看到商品静态页面发布的过程和进度。在通常情况下，ASPX页面将对输出内容进行缓冲，缓冲区充满后才向浏览器输出结果。通过设定Buffer=false页面指令，就可以禁用缓冲，从而一旦向Response中写入任何内容，就立即发送到浏览器。全性和性能上获益，并且，泛型集合也可以作为数据源直接绑定到AsP.NET的数据绑定控件上。而这些操作所适用方法如add、remove和update等，都是通过BizCart类来完成的。

3.8添加商品页面

进行产品和相关信息的管理，必须要以一定等级的身份进行登录，登录成功后，才可以设置商品和价格的信息。产品信息中比较复杂的是产品图片信息的处理，上传后将图片文件按照一定的规则重新命名后存放在指定文夹中，同时将文件的存储信息存放在数据库中。

3.9查询商品页面

要进行商品的搜索，用户必须先进行登录，再根据产品品牌、产品型号、产品质保以及其它相关属性进行综合搜索。用户可以单击“详情”，链接查看产品详细信息，但是不能进行任何修改；可以通过“添加商品”按钮进行新商品的添加，并且由于产品的种类众多，所以需要动态加载数据。

nlc202309021616

3.10修改商品/报价页面

一般的修改商品和报价页面，一次只能给一种商品或报价进行修改。自然首先必须先对商品或需要修改报价的商品进行查询，然后再检测登录和需要报价的用户信息，如果是以管理员身份登录，则直接对该商品信息或商品的报价进行修改；如果直接以其他身份登录，一般来说只有登录用户和商品信息创建或商品报价的用户一致，且日期为同一天，才有修改的权利，否则将出现无权操作的错误信息。修改完成商品相关文字信息，还可以添加和删除该商品的图片信息，其类似商品添加时的图片添加。与修改商品不同的是，修改报价的页面上，有关商品的信息是不可编辑的，而只有有关价格的方面是可以修改的。

3.11添加报价页面

一般的添加报价页面，一次只能给一种商品报价。首先必须先对商品进行查询，然后再检测登录和需要报价的用户信息，如果是以管理员身份登录，则需要查询和确定需要报价的企业，再进行对该商品的报价；如果直接以其他身份登录，则直接获取登录信息，再进行商品报价。对于一般的用户而言，只有访问和发布一般零售价的权利，而对于企业用户则可以访问和发布零售价和经销价（对其他企业的价格）。

3.12添加报价单页面

有的商品的价格浮动比较大，几乎需要一天一个报价，这样给每一个企业用户提供了一个自己商品独立的报价平台，通过该平台，企业用户只需要简单的对与上次报价不同的商品和价格进行修改，就可以给出企业今天的最新报价，而不需要一个一个的商品进行报价了。其中，企业用户可以在自己的报价单上任意的进行排序，而不是按数据库中商品的编号排序，这样企业用户可以很快的对报价单进行修改，而且报价的操作也就极为简单了。

3.13添加报价单报价页面

报价单报价页面一般在报价单修改完成之后加载的，商品的价格受供求关系的影响，经常发生波动，需要经常的更新。单击“编辑”按钮就会出现编辑框，在理面输入当前的价格即可；单击“保存”按钮，程序就会将相应的数据保存到数据库。添加报价单页面同时也是其他用户查看报价的页面，主要是根据登录用户与该报价单的报价商户是否一致来判断的。

对一般用户而言，所有的关于商品的操作是不能修改日期的，只能以今天的日期进行添加、修改和删除；而管理员则有权限进行任何日期的商品数据的添加、修改和删除等操作。

4 结束语

基于ASP+SQL Server構建的系统主要由两大功能组成，分别是前台售书系统和后台管理系统，在前台售书系统中主要对本系统的用户和非用户设计了相应的访问权限，用户可以对图书进行查询、查看简介、订购等操作，只有会员才能购买图书。而后台管理系统主要针对管理员进行设计，在这里，管理员可以对新书进行添加，删除、改变分类，订单管理等内容。该系统设计结构清晰，操作简单，界面美观大方，且所采用的B/S结构，易于维护和升级，具有较好的前景。

本文首先介绍了网上书店平台的开发背景和基础，并介绍了网上书店的设计过程，最终目的是实现人们远程浏览书店和购买图书的愿望。传统的购书方式是需要人们付出时间、交通费以及体力，四处去书店寻找图书，而这些对于越来越繁忙的都市人来说是一种浪费。随着网络的普及以及人们生活质量的提高，越来越多的消费者意识到网上购物的方便与快捷。

参考文献

[1] Mike Docherty.面向对象分析与设计（UML 2.0版）.清华大学出版社，2006.

[2] 陈轮刘蕾.ASP.NET3.5网络数据库开发实例自学手册.电子工业出版社，2008.05.

[3] 张领.ASP.NET项目开发全程实录.清华大学出版社，2008.06.

[4] 明日科技.Visual C#开发技术大全.人民邮电出版社，2007.11.

[5] 陈冠军.精通ASP.NET2.0企业级项目开发.人民邮电出版社，2007.2.

[6] 宋海兰.ASP.NET3.5项目开发实战.电子工业出版社，2009.8.

[7] 张大方.软件测试技术与管理.湖南大学出版社，2006.12.

[8] 刘藏漪.互联网网站面面观.信息化建设，2000，10

[9] 孙世杰.对评估和利用互联网上专业技术信息资源的探讨，2001，1.

响应式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

1.初始会商,主要是收集该站点的关键信息,包括站点的目标读者.要发布的内容.开发Web服务器平台;

2.概念开发,设计师根据收集的信息,开始构思,通常,设计师要把这些构思用草图的形式呈现给顾客,这个草图要有整个网站的结构,不同的布局.设计及导航;

3.内容综合,当决定了设计师的设计,设计师开始制作一些初始图样,这些图样用PHOTOSHOP那样的程序来创建,然后,设计师将图样打印出来配合文字;

4.HTML布局和导航,一旦客户同意了这些内容综合,设计师开始编制Web页面,导航器也被编制到页面中,使客户第一次真正体验一下;

5.图形制作,如果客户同意了站点的外观和感受,设计师将大量制作所需的图形,并进行优化;

6.内容流程,客户的书面材料利用各种网页技术（CSS、JAVA、FLASH）,有机的和相关的图形整合在一起;

7.测试,在站点被提交给客户之前,设计师要彻底测试每个Web页面和联结,利用清单,进行修补;

8.交付,一旦签收,客户要经常进行他们的测试,找出排版和内容方面的错误,做完了这些次要的修正后,正式启用站点.这套完整的计划可以用1-12个月来完成,平均完成时间为4个月.当站点启用后,要进行跟踪调查,以确定人们如何使用站点。经过6-12个月的运行之后，重新收集数据,开始重新设计,然后这个Web设计过程再开始一遍。

附：WEB设计经验-来自microsoft.com设计主管

作为设计主管，Peter Stern 已经领导 microsoft.com 重新设计了主页并且开发了五个不同的交互工具，这些工具被用于下载中心、产品目录、配置文件中心、搜索 和注册等联机功能。他为几个内部工具设计了用户界面，并且正致力于创建将于今年晚些时候发布的下一代主页。

从头衔上，您可能认为我主要关心的是 microsoft.com Web 站点几千个网页的版面设计。的确，这些确实是我所关注的。视觉上的吸引力是重要的，但是这仅仅是工作的一小部分。而最终的目的是确保整个站点运转正常。

我的意思是，人们通常在访问 microsoft.com 时，并未将它当作艺术作品来赞赏。而是为了获得有关产品的信息，或者有一些技术问题需要咨询，或是阅读有关开发商的期刊。所以网站的设计应该尽量清楚和有条理，以便他们能够容易地找到所需信息。

设计站点

在进行 Web 设计时--在设计过程中--形式应该服从功能。这种方法应用于我们站点的整个设计过程中。当然，我们有最新的 Web 工具，并且能够将各种可视的小配件上载到网页上。

但是我们认为这样做将不利于为访问者提供有效的服务。

事实上，我经常发现一些站点未将重点放在功能上。常见的错误包括：

用户界面元素不一致。例如，同一个控件在不同的页面上功能不同，或者同一个功能对应几个用户界面控件。

导航栏位置不一致。决定站点的哪些页和功能需要在站点的任何页上都可被访问到。这就是应该保持一致性的“全局导航栏”。

不太注意或根本不注意基本的图形设计原则，例如排版式样、色彩和版面的设计。

相关元素和功能的随意分组。注意将元素放置在网页上的位置和目的。这可帮助访问者从其它相邻的选择和位置来推断某个链接的功能。

使网页过于庞大以至使访问者需要通过典型的调制解调器速度的 Internet 连接进行长时间的下载。这并不是说不应该使用图形，但是您需要对它们进行精挑细选，然后用适当的压缩和颜色索引优化它们。

现在的 Web 站点仍然存在很多问题，这并不奇怪。毕竟，Web 设计“艺术”相对来说还是个新生事物。在四、五年以前，Web 页甚至是普通的。那时，人们好像认为他们的 Web 站点将会吸引访问者只是因为它们存在--并且，可能在某些情况下这种方法确实有效。但是这些站点一般很难看，并且更重要的是，它们真的难以使用。接下来便进入“看看我们能做些什么”阶段，在网页中加入了大量的动画、声音文件以及其它附加件，导致访问者需要长时间地进行下载，但是并未获得多少实实在在的内容。

如今的 Web 设计师们已经吸取了前人的经验和教训。好的站点倾向于简化和快速，同时在功能上有所提高。这是 Microsoft 的目标，而且我们最先承认自己所犯的错误（参阅“Microsoft 的 Web 简史”看一看以前的主页设计）。

设计错误并不总是显而易见的。有时在设计上对一个小元素的移动或更改将有很少或根本没有影响。但是，在其它情况下，它可能确实会对页面功能有所影响。而且如果说我们从过去几年学到了一些东西，那就是小的改动会使 Web 页的运行方式有很大的不同。

明确的流程

若要避免类似问题，我们为新服务（例如“搜索”）的创建或关键的 Web 页（如主页）设计了一个明确的流程。每个项目都是在一定的基础上开始的，即我们有一个受益于我们站点上的页面、部分或用户界面元素的产品或服务。在早期的产品计划阶段（第 1 阶段），我被要求设计一些初级模型：大致描述页面、部分或功能的草图。然后产品项目组检查产品计划建议，看看此项服务是否可以为 microsoft.com 的访问者真正带来一些实惠。

如果答案是“可以”，那么此项目会获得批准，我们开始写项目说明书（第 2 阶段）。我们在第 1 阶段的草图和概念基础上创建并提出一个更为完整的计划。这时，我们一般还会开始

可用性测试（一般会有书面的模型）以了解潜在用户将对计划中的设计做出何种反应。在最后开发阶段（第 3 阶段），我们创建运行计划服务的 Web 原型，并且进行全面的可用性测试以及内部复查。然后完成站点的代码，修改程序错误，最后站点通过实际运转的 Web 站点向客户发布。

正如您所见到的，可用性在整个流程中扮演着重要的角色（参阅“创建有效的 Web 界面需要认真计划”）。我们可以为用户运行某项任务计时，这样我们就可以在产品以后的版本中对比相同的测试。我们可以使用这种方法进行度量，以确定一个功能的重新设计是否为客户带来任何真正的价值。

还有，我们将仔细地观察以了解可用性对象是否可以计算出如何正确使用新功能--我们称为“可发现性”的方法。有时这为我们提供了一些挑战。例如：在我们的站点上，在 搜索引擎 中键入一个词组或字会产生一列结果。然后我们请用户选择在这些结果中进行搜索，以便进行更细的搜索并且导向某一页或资源。但是即使“在结果范围内搜索”被明显地标记在深色标签上，很少有人熟悉它。一些用户认为他们正开始新的搜索，并且可能毫无结果。我们正在解决这个问题以确保客户可以利用 microsoft.com 上所有丰富的功能来提高他们对此站点的认识。

选项“在结果范围内搜索”看上去很直观，但不是非常易发现的。此问题一直是困扰我们的设计的问题之一。

最后阶段

大体来讲，站点设计是在发生冲突的需要之间求得平衡的艺术。一方面，我要将站点设计得尽量简单易用。另一方面，我要确保站点中所有强大的工具可为经验丰富的用户所用。与此同时，我还要为内部客户服务--Microsoft 产品项目组--他们对服务有特殊的需要。所以每天我都要解决一些非常困难的问题，经常处于很紧迫的情形中。我发现这种工作是鼓舞人心和有趣的。

这个职业非常需要更熟练的专业人员。我是经过一系列非常不一般的过程--在大学学习图形艺术，然后在多媒体公司设计 CD-ROM，最后加入 Microsoft 并开发应用程序--才获得这个职位的。非常奇怪的是，当我申请（并获得）这份工作时，我以前从来没有设计过 Web 页。但是我广泛的设计经历已经证明是非常有用的，并且我自认为已经验证了格言“成功的设计就是成功的设计”（不论是什么媒体）。许多设计问题对 Web 来说是独一无二的，解决这些问题的方法对于任何媒体都是一样的。

对于那些准 Web 设计师我的建议是，他们也应该尽可能地扩大设计背景。今天应该确保将一些 Web 工作作为互动设计培训的一部分--大多数好的设计学校已将其加入课程中。但是在排版、色彩理论、版面设计以及生产等方面的扎实的技术将仍然特别有价值。

在未来，Web 设计师们仍将会继续被要求给页面增加更丰富的多媒体内容，从而为 Web 站点的可视性和可操作性增加了新一级的复杂性和技术要求。作为 CD-ROM/多媒体设计师，要求我必须具有图形设计、视频、音频制作、动画等方面的知识和创作能力。我的预言是，Web 设计师也将向这些领域发展。

对于属于 microsoft.com 的我们--以及在 Internet 上的其它地方--那应该是一个非常有趣的未来。

了解您的观众。调查一下究竟哪些人在访问您的站点，以及他们为什么要访问。新手或不定期上网的 Web 用户与软件开发商相比有非常不同的兴趣和站点需要。

使您的站点对访问者来说有所帮助。

为您的观众提供所需的信息。使导航元素保持一致，并且确保对访问率最高的区域进行明显的标记，是它们易于被找到。

使用清楚的消息。

确保用户了解此页面的上下文，并且知道需要他们做些什么。如果在注册过程中您要用户输入姓名，那么就直截了当地说。不要让访问者自己计算什么，他们会感到沮丧，于是转到其它更简单的站点（例如您的竞争对手的站点！）。

保持一致性。

虽然更改不同 Web 页的外观并不难，但这并不意味着您应该这么做。将主要功能--例如返回“主页”的链接或者执行一个搜索--放在每页的相同位置。在 microsoft.com 上，黑色全局导航工具栏的位置在四十多万页上都是一样的。

使站点可用。

牢记设计和测试站点的可用性。确保用户可容易地执行任务以获得所需信息。估算任务时间和任务完成率，然后努力进行改善。如果新的设计没有在这些方面获得改善，那么就不要实施它。重新从草图（或最初的计划）开始并尝试其它方法。

保持简洁。

说起来容易做起来难。尝试征求反馈意见。有时新人可以很容易找到解决方案。

尝试新的东西。

网站设计Web 篇6

【关键词】Web 服务；管理信息系统；优化

Web应用程序高度依赖服务器，在大量用户同时访问时容易造成服务器负载过大而延迟响应的情况，再加上互联网固有的时延，很容易形成用户长时间等待响应的情况，影响了用户体验。因此，优化系统性能，缩短响应时间是开发Web管理信息系统时要重点考虑的因素。除了采用高性能的硬件设备、负载均衡、数据库优化等方法外，程序设计的优化也是重要的方面。文中主要讨论基于ASP.NET和SQL Server 的管理信息系统程序设计优化。

1.页面优化

1.1避免不必要的回发

有些情况不必要执行回发，比如，管理信息系统中常见的信息录入，某个输入框只允许输入数字，就可以采用 Javascript等脚本语言在客户端进行格式检查，而不必要回发到服务器进行检查。通常，如果不需要将信息传遞到服务器以进行验证或将其写入数据存储区，要避免使用导致回发的代码，以提高网页的性能并改善用户体验。如果开发自定义服务器控件，可以通过让它们为支持ECMAScript（JavaScript） 的浏览器呈现客户端代码。通过这种方式使用服务器控件，能显著减少信息被发送到Web服务器的次数。

如果必须执行回发操作，使用Page对象的IsPostBack属性来避免回发时执行不必要的重复执行。对于仅在首次请求页面时执行，而不是每次回发时都执行的代码，应当通过判断页面的IsPostBack属性，确保只在第一次加载页面时执行。

1.2按需使用视图状态

视图状态使得服务器控件可以在往返行程中保存控件的状态，而不需要编写任何代码。但是，因为视图状态是加密保存在窗体的隐藏字段中的，页面提交时同样会被提交到服务器并在处理完成后发送到客户端浏览器，所以该功能增加了页面的大小，降低了服务器处理的速度，因此应当只在必要的时候才保存视图状态。如果页面不需要向服务器回发或页面服务器控件的数据在经历服务器的往返行程后值会发生变化，保存视图状态也就失去了意义。在这种情况下，应当禁用视图状态。默认情况下，ASP.NET为所有服务器控件启用视图状态。若要禁用它，将控件的EnableViewState属性设置为false，如。还可以使 用@Page指令禁用整个页的视图状态，如<%@PageEnableViewState="false"%>。

1.3优选重定向方法

ASP.NET提供了超链接、跨页发送、浏览器重定向和服务器传输 4种在网页中生成重定向的方式。每种重定向提供的功能不同，适用的时机也不同。超链接由 HTML标签实现对目标页的请求，但不能将当前页的信息传递到目标页。跨页发送是将当前页信息发送到目标页。浏览器重定向是通过在服务器端编程方式强制浏览器向目标页发出新的请求。服务器传输是将控件传输到在源页位置呈现的新页中，不会用目标页的相关信息来更新浏览器信息。在不同的ASP.NET页之间重定向，如果不需要读取源页信息，应当优先采用超链接，如果需要读取源页信息，应当使用跨页发送或服务器传输的方式，如果是重定向到另一个Web应用程序，则只能使用跨页发送。只有在需要编程控制重定向的目标页的情况下才应当考虑采用浏览器重定向的方式。

2.状态管理

2.1按需使用会话状态

会话状态为保存特定用户信息提供了方便，但也增加了服务器开销，应该在不需要时禁用。方法是在页的@Page指令中将 EnableSessionState属性 设置为 false，如 <%@ PageEnableSessionState=" false"%>。果页需要访问会话变量，但不会创建或修改，则应将 EnableSessionState 的属性设置为ReadOnly。如果整个应用程序都不用保存会话状态，则可以禁用整个应用程序的会话状态，方法是在应用程序的Web.config文件的SessionState节中将 Mode属性设置为Off，如。

2.2选择合适的会话状态模式

如果必须保存会话状态，应针对应用程序的需要，选择适当的会话状态模式。ASP.NET 提供了多种保存会话状态的模式： 进程内模式、状态服务器模式、SQL Server 模式和自定义模式。进程内会话状态速度最快，如果只在会话状态中存储少量易失数据时应当采用这样模式。只有在需要跨多个处理器（或多个计算机） 或者在服务器 （或进程） 重新启动时保存会话状态的情况下才考虑使用其他的模式。

3.Web 应用程序部署

3.1使用预编译

网站预编译后，部署服务器就可以不需要源代码，而且可缩短用户的初始响应时间，因为页在第一次被请求时无需编译。编译时可以选择预编译代码和.aspx页，或者仅预编译代码。如果只预编译代码，则无需重新编译整个站点就可以更新用户界面。如果预编译代码和.aspx 页则有利于保护知识产权，因为即便别人取得网站文件也无法直接修改和使用。

3.2 禁用调试模式

在部署应用程序或进行任何性能测量之前，应当禁用调试模式。如果启用了调试模式，应用程序的性能会受到影响。

3.3优化配置文件

默认情况下，ASP.NET配置文件被设置成启用最广泛的功能集并尽量适应最常见的情况。可更改某些默认配置以提高应用程序的性能。首先，仅对需要的应用程序启用身份验证。

ASP.NET 应用程序默认的身份验证模式为Windows或集成的NTLM。大多数情况下，最好仅对需要身份验证的应用程序在Machine.config 文件中禁用身份验证，在Web.config 文件中启用身份验证。其次，使用适当的编码格式。ASP.NET 默认的编码格式为 UTF-8。如果应用程序不需要广泛的支持，可以考虑采用其他编码以提高性能。最后，从请求处理管线中移除不用的模块。默认情况下，服务器计算机的Machine.config文件中HttpModules节点的所有功能均保留为活动状态 。对于不用的模块，应当予以删除。比如，如果应用程序中不使用会话状态和输出缓存，就可以从HttpModules节中将它们删除。

4.结语

程序运行性能是影响ASP.NET程序速度运行的重要因素。良好的程序设计是开发高性能Web管理信息系统的基础。通过页面设计、状态管理、数据访问、Web应用程序部署方面的优化设计，能有效提高程序运行效率。 [科]

【参考文献】

[1]周博文，杜山泽.社会管理创新：从伦理观念、管理理念到思维方式的转变.载于.行政管理改革，2012（11）.

网站设计Web 篇7

Web标准的技术主要表现在3方面:表现标准语言主要利用CSS, 机构化标准语言主要利用XHTML和XML, 行为标准主要利用对象模型W3C DOM和ECMAScript等。

1.1 XHTML语言

XHTML (extensible hypertext markup language) 即可扩展标识语言, 目前主要采用的是W3C知道的XML1.0标准。XHTML是服务于XML客户端的, 它是基于XML, 实现了HTML向XML的过渡。

XHTML是有普通文本和标签组成的, 将普通文件中的一些语句加注标识的语言, 换而言之, 就是运用标记格式化特定的某些文本, 从而达到预计的文档效果。XHTML的另一个重要组成部分标签一般为具有特定意义的英文单词的缩写, 例如P为Paragraph的缩写, 意为段落。一般比较典型的标签都包含标签名称、属性、属性值三部分, 如图1所示。大部分标签都是成对出现的, 其中还有一些特殊的标签。

1.2 CSS

CSS (cascading style sheets) 即层叠样式表, 是Web的标准化布局语言, 是控制颜色、版式规划、图像尺寸及布局的工具。CSS的作用是能够结合XHTML帮助网站建设人员分离外观和结果, 让网站的设计、访问及后期的维护更加方便快捷。层叠样式表是有控制被选择的元素如何显示的一个或者多个规则定义组成, 而一个层叠定义是有选择器和声明两部分组成, 声明则是由属性和值两部分组成如图2所示。

1.3 DOM

DOM (document object model) 即文档对象模型, 在W3C DOM规范中, DOM是能够让用户访问页面的标准组件, 是浏览器和平台语言的接口, 它使得Netscape的JAVAScript和Microsoft的Jscript之间矛盾缓解, 使得设计人员能够访问站点中的数据信息、脚本和表现层对象。

1.4 ECMAScript

ECMAScript (European computer manufacturers associatio) 即ECMA制定的JavaScript——标准脚本语言。

2 基于Web标准的网站设计与开发流程

对于Web标准的网站设计和开发, 没有固定不变的流程模式, 一般包含以下具体5个关键过程:需求分析、设计、利用XHTML建立Web文档内容和结构、利用CSS添加样式、测试及验证。下面以某对外交流协会网站为例, 简单论述基于Web 标准的网站设计与开发流程。

2.1 网站的需求分析

前期的网站需求分析是设计和开发网站的关键性第一步, 要与客户积极沟通, 充分挖掘客户的潜在需求。网站的需求一般有建立网站的目的、网站内容的特点、同行业的网站的风格和内容、网站的基本功能模块及网站的基本设计要求等。通过与客户的交流, 进行深入的探讨和分析, 达成书面形式的文件, 制订需求大纲。

以某对外交流协会网站为例, 通过交流、探讨和分析, 大致得出该客户的网站需求:网站的外观布局和设计要清晰明了; 页面简洁方便, 国际性强;网站具有基本点功能模块例如人员介绍、全站搜索之外还要求具备新闻、活动公示栏、会员论坛及资源上传下载功能。

2.2 网站的设计

网站的设计过程主要是信息架构和页面外观的布局和风格设计。信息架构顾名思义, 其主体就是信息。信息架构骑士就是一个收集信息、整理信息、斡旋信息体系与用户需求的过程, 使信息变成一个有组织、有次序的浏览体系的过程。这样使得用户更容易寻找信息和管理信息。

以某对外交流协会网站为例, 以上述需求为根本, 得出网站设计的信息架构:网站标志信息中的协会LOGO;实现网站的全站搜索功能;导航信息展示网站的主要功能模块;新闻栏展示协会最新的咨询;活动栏展示协会近期的活动并可以配以图片;协会的友情链接、资源上传及下载、论坛及协会的联系方式。

信息架构设计介绍, 继而就是页面外观的布局和风格设计, 参考其他相关行业的网站, 综合客户的需求设计出具有自己独特风格的页面外观布局和风格。

2.3 利用XHTML建立Web文档内容和结构

Web文档内容和结构的建立主要由两个步骤:

(1) 利用XHTML建立Wweb文档内容:利用XHTML标签格式化文档的内容, 建立语义化文档, 以某对外交流协会网站为例, 其语义化文档关键语句如下:

(2) 利用XHTML建立文档的结构

使用div和class建立文档的结构, 以某对外交流协会网站为例, 其语义化文档关键语句如下:

文档结合和内容建立好后, 接着利用CSS添加样式。利用PS或者Friworks切割所需的图片, 然后利用网页设计软件例如Dreamweaver或者TopStyle等为文档添加样式。在这个过程中, 包含CSS布局、CSS模型、图片的应用等。以某对外交流协会网站为例。

2.4 测试和验证

测试和验证严格来说并不是处于网站设计和开发的最终阶段, 而是在期间完成一段代码就可以进行测试和验证, 这随时验证、随时纠错, 提高了开发效率。

设计和开发基本完成后, 进行总体的测试和验证, 一般采用标准较好的Safari、Opera及Firefox等浏览器进行网站页面效果预览, 然后基于此在IE浏览器上进行调整。测试完成后, 将XHTML及CSS文档上传至服务器。

3 结束语

本文以某对外交流协会网站为例, 简单阐述了基于Web标准的网站设计及开发流程, 总结成一套改进网站设计开发流程的方案, 应用XHTML技术和CSS样式尽善尽美地设计文档的结构和内容。目前国内相对于Web标准应用于网站的开发还处于发展阶段, 因此网站设计工作者还需要结合实际工作经验, 进行深入研究和探讨。

参考文献

[1]李世梅, 龚盛昭.基于Web技术的精品课程网站设计与维护[J].广东轻工职业技术学院学报, 2008 (3) .

[2]朱艳.基于Web技术的高校网站设计与管理[J].办公自动化杂志 (综合版) , 2008 (12) .

[3]杜现朝, 龙怀冰, 王清理, 等.基于Web标准的网站设计与开发流程[J].计算机工程与设计, 2008 (2) .

[4]张晶.Java Web开发指南 (典藏版) [M].北京:清华大学出版社, 2010 (1) .

网站设计Web 篇8

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前端设计 篇9

关键词：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网站的安全策略 篇10

随着气象事业的发展, 气象WEB服务已成为气象部门重要的服务形式。置身于大数据环境中的WEB服务器最易受到来自网络的攻击, 如何确保气象WEB服务器的安全不仅关系到气象部门业务的正常运行, 也与人们的生产、生活息息相关。本文阐述了气象WEB网站运行的内部系统环境和外部网络环境的安全的设置与防护策略。

2. 构建安全的气象WEB网站

2.1 构建安全的操作系统

操作系统做为一个支撑软件, 是气象WEB服务器正常运行的基础。要让WEB服务器能正常运行, 首先要对WEB服务器的建立基础即操作系统进行严密的安全配置, 以下是气象WEB服务器在windows2008操作系统环境下的安全措施。

2.1.1 操作系统安装部分

(1) 在断开网络的情况下安装操作系统。安装系统最少需要三个分区, 分区格式均采用NTFS格式, 分别为系统盘、应用盘、数据备份盘。

(2) 将机器联入局域网安装瑞星网络版客户端杀毒软件, 并通过瑞星服务端控制台进行病毒库的升级。

(3) windows2008安装完成后要删除系统盘的默认共享。

(4) 安装系统补丁。扫描系统漏洞并全面杀毒。

2.1.2 设置和管理系统账户

(1) 禁用Guest账户;重命名Adminstrator账户和管理员用户组Administrators。

(2) 创建一陷阱账户名为“administrator”, 将它的权限设为最低, 同时设一个超极复杂的密码。

(3) 在运行中输入gpedit.msc回车, 打开组策略编辑器, 在气象WEB服务器中选择计算机配置--->Windows设置—>安全设置—>账户策略—>账户锁定策略, 将账户设为“三次登陆无效”, “锁定时间为15分钟”, “复位锁定计数为15分钟”

(4) 同样在打开组策略编辑器中选择计算机配置--->Windows设置—>安全设置—>账户策略—安全选项中将“不显示上次的用户名”设为“启用”。

2.1.3 设置相应的审核策略

设置本地组策略。在运行中输入gpedit.msc回车, 打开组策略编辑器可进行审核策略的配置。系统在网络环境下很容易受到攻击, 审核策略对于windows2008系统的安全性起着至关重要的作用。WEB管理人员可以利用审核功能对各种攻击行为进行跟踪, 遇到潜在安全威胁的事件发生时, 我们可通过审核功能监控到事件内容并有针对的处理问题, 从而保障WEB服务器不受非法攻击。windows2008系统包含有九项审核策略, 启用审核功能要消耗服务器资源, 造成系统运行性能下降, 在WEB服务器系统资源有限的情况下要对每个参数进行合理的配置才可最大可能保护系统的安全。例如通过WEB服务器对登录事件的成功和失败进行审核, 这样系统会自动对WEB服务器的所有系统登录操作进行跟踪、记录, 仔细分析这些记录可发现本地服务器是否存在非法登录甚至非法入侵行为。

2.1.4 禁用一些威胁系统安全的服务

WEB管理人员需要禁用一些威胁系统安全的服务, 例如Server (允许计算机通过网络的文件、打印和命名管道共享) 、TCP/IP Net BIOS Helper (允许对“tcp/ip上NETBIOS”服务及NETBIOS名称解析的支持) 、Distributed Link Tracking Client (用于网络中计算机保持链接) 、Remote Registry (用于远程用户修改注册表) 、Terminal Services (用于远程桌面控制) 。

2.2 利用Apache配置的气象WEB服务器相关的安全措施

建立的WEB服务器可采用的WEB软件有微软系统带的IIS或者Apache, 它们安全方面的设置关系到WEB服务器的正常运行, 同时也关系到与之相联的业务系统的安全。以下文章以采用Apache建立的气象WEB服务器为例, 介绍部署气象WEB服务器的安全措施。

(1) 首先要到Apache官方网站确认及下载最新Apache版本。

(2) 在安装Apache时不要将Apache安装在系统分区上, 且要修改安装的默认路径。安装完成后在sebug上搜索该版本漏洞, 跟据提示打上安全补丁。在日常工作中要勤打补丁, 这也是维护WEB网站最有用的手段。

(3) 安装完Apache必须隐藏其版本和其它敏感信息。通过编辑Apache安装目录下配置文件httpd.conf实现。在配置文件中加入以下语句:

Server Tokens prod

Server Singature off

(4) 禁用不必须的Apache模块, 减少WEB服务器的风险度增加性能, 只启用网站必须的功能模块。在具体配置中通过编辑Apache安装目录下配置文件httpd.conf, 用“#”注释掉不需要的模块。

(5) 按最小特权原则为Apache创建一个专门的用户和组, 确保Apache以其自身账号和组完成WEB服务。通过编辑A-pache安装目录下配置文件httpd.conf, 在配置文件中加入以下语句:

User Apache

Group Apache

(6) 将气象WEB网站所有文件均放在一个目录下, 确保A-pache不能访问WEB根目录之外的任何文件。通过编辑A-pache安装目录下配置文件httpd.conf, 在配置文件加入以下语句:

Order allow, Deny

Deny from all

Option None

Allow Override None

Order allow, Deny

Allow from all

3. 为WEB网站构建安全网络环境

面对目前WEB服务器所遇到的网络安全威胁, 仅仅对WEB服务器自身进行安全配置是远远不够的, 应从WEB服务器所处网络环境的安全防护去对WEB服务器进行安全保护。我们首先要在WEB服务器的前端布设好网络安全环境, 以下是针对气象WEB服务器的安全威胁采用的应对措施。

3.1 防火墙的安全配置

所谓防火墙, 指的是本地网络与外界网络之间的一道防御系统, 它能允许“被同意”的人和数据进入你的网络, 同时将“不被同意”的人和数据拒之门外, 最大限度地阻止外界网络中的非法用户访问你的网络.防火墙应当部署在内网的出口处, 这样可为内网网络中的WEB服务器提供一道屏障。要让防火墙保护网络中的一台气象WEB服务器, 需要确定此WEB服务器的数据流向和需要开放端口或者协议类型。根据WEB服务器的访问需求, 确定访问策略。以下以面向互联网为乡镇用户提供WEB服务的“乡镇服务平台”为例, 介绍为该WEB网站的安全而布设的防火墙安全配置。

首先我们在前期工作中需要从运营商申请一固定IP地址并提供给服务平台作为该网站在互联网上的访问地址, 将“乡镇服务平台”服务器的互联网地址和内网地址添加到防火墙主机地址资源中, 即在防火墙中定义共享平台主机。

接下来我们需要配置防火墙NAT规则 (地址转换) 和ACL规则 (访问控制列表) 。如果服务平台要访问互联网, 则做源转换, 防火墙隐藏其内网地址实现对互联网的访问;如果外部网络要访问服务平台服务器, 则做目的地址转换。即当乡镇用户访问该网站访问的是服务平台在防火墙上映射的地址, 经防火墙NAT转化后可访问该平台服务器, 这样WEB服务器在一定程度上减少被攻击的风险。ACL规则 (访问控制列表) 使用的是包过滤技术, 通过读取防火墙上已定义好的地址资源定义访问规则。对通过的数据包进行过滤, 从而达到访问控制的目的。这样一方面保护资源地址, 阻止非法用户对资源节点的访问, 另一方面限制特定用户节点所能具备的访问权限。由此定义两条规则:一是只允许服务平台服务器访问互联网, 其它内网机器不允许访问互联网;二是互联网用户仅可访问服务平台服务器, 不允许访问内网其它机器。

3.2 网闸安全配置

网闸又称为网络安全隔离与信息交换系统, 是模拟人工在两个隔离网络之间的信息交换, 中断两个网络间所有通信协议连接, 包括TCP/IP、IPX/SPX、Net BEUI等, 使之不能直接进行网络协议通信。当数据要由外网向内网传递时, 外部主机中止了外网所有网络协议, 将数据包经安全处理后被专用隔离开关系统摆渡到内部主机, 摆渡时仅有读和写两个命令。同样数据由内网向外网传递时, 也遵从相似过程。这样网闸也就为网络中的WEB服务器提供又一道屏障。

我们选用了具有SAT (服务器地址映射) 功能的伟思网闸。它能实现将内网可信端服务器通过SAT功能将自身特定服务虚拟映射到网闸上不可信端端口上, 通过隔离系统的不可信端对外提供服务, 访问者仅能访问虚拟端口而无法直接连接服务器, 从而对外屏蔽服务器。在具体的配置中我们需要事先规划好一个虚拟地址作为“乡镇服务平台”WEB服务器在网闸非可信端的映射地址, 然后在网闸“安全配置”中“隔离设备映射配置”添加“内部映射”, 即将“乡镇服务平台”WEB服务器需要提供外网访问的服务映射到对应的规划的虚拟地址。

3.3 入侵检测的安全配置

入侵检测系统是指依照一定的安全策略, 对网络的运行状况进行监视, 尽可能发现各种攻击企图、攻击行为或者攻击结果, 以保证网络系统资源的机密性、完整性和可用性。

在网络部署时, 我们在互联网与防火墙之间增加一个IDS入侵检测系统, 设备采用透明桥接的部署方式;提供各种入侵行为的分析, 阻断, 病毒、木马的过滤, 安全日志的存储。在部署前期开启一些常用攻击检测规则, 动作为默认即高风险阻断、低风险告警, 源和目的不限。后期网络人员要根据网络环境的攻击事件情况来调整攻击规则, 入侵防御策略没有所谓固定的模板, 一般是以适应网络环境的实际情况为原则设计调整。入侵检测的部署保护了整个内部网络, 防止非法入侵、病毒、木马的侵入传播。同时保护了气象web网站, 使其免受各种外界的攻击, 保障WEB网站的安全、稳定的运行。

3.4 网页防篡改安全配置

气象WEB网站除了使用以上网络安全设备外, 还需要有效的网页防篡改系统来专门对页面进行保护, 防止来自外部网络对页面和内容进行篡改和非法添加。我们所部署的网页防篡改系统通过对WEB服务器工作目录下所有文件内容实时监测, 若发现变更, 可立刻实时阻断篡改行为。

4. 运维网站必须注意的环节

4.1 气象WEB网站支撑数据库安全性措施

气象网站支撑的数据库安装时只安装需要的组件, 这样可防止安装上对网站建设无用但却具有安全漏洞的组件。

安装数据库系统时会有一些默认用户生成, 应该在数据库安装完毕之后, 经过功能筛选, 锁定或失效这些默认用户。对于不能锁定或失效的用户, 必须修改默认密码。

针对每个数据库账户按最小权限原则设置其在相应数据库中的权限。定期或不定期修改网站支撑数据库管理员口令。

4.2 定期进行必要的数据备份

对服务器上的数据定期进行备份是很重要的。网站的核心是数据, 要建立一个正式的备份方案, 而且随着网站的更新, 备份方案也需要不断的调整。

5. 结语

气象WEB网站作为气象部门重要的服务形式, 网站的安全策略必须不断的进行完善。构建气象网站的安全防护系统是一项艰巨且长远的任务, 这就要求我们及时学习和更新自身的知识与技能, 关注新的管理和防御技术, 及时采用新的防御手段去保障网站的安全。

摘要：随着网络技术在气象领域的深入应用, WEB服务已成为气象部门重要的服务形式。本文阐述气象WEB网站从内部系统到外部网络环境的安全设置与防护策略。

关键词：WEB网站安全,内部系统环境,外部网络环境

参考文献

[1]蔡宏生.Apache服务器在网站中的安全保护方案设计[D].电子科技大学, 2007.

[2]赵娟.Windows Server 2008操作系统安全性的研究与应用[J].网络安全技术与应用, 2014, 03:6+8.

[3]李昌.Web应用安全防护技术研究与实现[D].中南大学, 2010.

[4]许云明, 李春生.物理隔离网闸原理及应用[J].计算机安全, 2005, 12:26-29.

网站设计Web 篇11

一、需求分析

对教师要解决的问题进行详细的分析,弄清楚问题的要求,包括需要输入什么数据,要得到什么结果,最后应输出什么。可以说,需求分析是整个过程中最关键的一环。为了确定项目开发者是否能在最短的时间内开发出令用户满意的程序,可行性分析成为软件需求分析的重要一环。项目开发者在对用户进行系统调研的基础上,对经济效益方面、技术方面、外界环境限制因素方面,操作方面的可行性进行分析,要保证开发的在线考试系统具有良好的可操作性,以及在经济方面具有可观回报性。在可行性分析的基础上要对任务进行概述分析,此阶段可以按照服务的对象与系统具备的功能进行分析。本系统服务的对象分考生用户与教师用户。考生用户主要是参加考试,以及考生对自己的用户与信息查询。教师用户主要是负责对考生的基本资料、试卷的管理与分类、题库的维护以及实时查询。

从系统具备的功能角度考虑:对教师用户来说,应该包括基本信息管理与维护、试卷管理与维护、题库管理与维护、成绩管理与维护;对考生来说,是自动阅卷功能,这能让考试在考生结束之后,马上就得到考试成绩与标准答案。这中间也考虑了考试时特殊情况的处理,教师可以对考生考试信息进行管理,以方便考生考试时出现特殊情况的处理。

经过上述的分析,为进一步制定处理流程提供了一个明确的思路。根据要求绘制模拟考试流程图、考试系统流程图、考试题库管理系统流程图、考试系统数据流图、考试系统管理流程图。

二、概要设计

将在线考试复杂系统按功能进行模块划分,建立模块的层次结构及调用关系,确定模块间的接口及人机界面等。根据需求说明书的分析结果和对数据流图的分析,将数据流图转换为考试管理系统模块图与考试系统模块结构图。在线考试系统包括的模块有登陆模块、身份验证模块、生成试卷模块、生成选择题模块、生成判断题模块、生成office操作题模块、读取数据库信息模块、做试卷模块、试卷备份模块、试卷恢复模块、时间控制模块、提交试卷模块、评卷模块、保存到数据库模块和学生考试查询模块。数据库需求分析也是很重要的一个环节,为了方便所有学科组成网络题库,应遵循经典测量理论的指导,并严格按照经典测量理论的数学模型开发题库管理系统、组织试题。

三、详细设计

本阶段的主要任务是设计每个模块的实现算法和所需的局部数据结构。详细设计的目标有两个:实现模块功能的算法要逻辑上正确,算法描述要简明易懂。在设计中主要是用结构化程序设计法,在设计阶段应用了详细设计的图形工具和语言工具,NS(由Nassi和Shneidermen开发,简称NS)图、伪码等。

四、系统测试

为了提高系统的可靠性和耐用性,将对系统进行单元测试、集成测试,系统测试。程序员将独立完成单元测试,在这个阶段中,要求程序员将软件的单元块在隔离状态下进行单元测试操作。在完成单元测试之后,将对所有模块组成的系统进行检测,这个检测称为集成测试。在集成测试阶段,本可以独立工作的模块,在集成系统中却不能正常运行,说明在某些模块化测试中不能反映出来的问题,在集成之后可能暴露出一些问题。

WEB网站的建设与维护 篇12

在新的经济条件下,网络技术的发展前提下,电子商务的环境和竞争状况变化如此之快,商业规则已经发生了一些改变,因此企业为了能在市场上获得更多的利润,就要建立企业自己的网站,树立企业在科技信息时代的完美形象。通过网络宣传自己,创造更多的销售机会。加强客户沟通宣传企业产品企业可以通过网站建立与客户沟通的便捷渠道,全面展示企业的所有产品。丰富营销手段,扩大产品销售渠道企业网站可以满足一部分客户网上查询与采购的需要,抓住网络商机。企业通过网站可以开展电子营销。

2 网站开发的技术

随着社会不断发展,网络技术日新月异,国内外信息化建设已经到了以Web应用为基础核心的阶段,越来越多的企业选择以Web来建立其应用系统。企业对系统功能需求的增加使企业级应用系统的结构和规模日趋庞大,而Web应用系统的开发也越来越复杂,开发周期越来越紧迫,这也要求开发者采用一种合适的方法来开发软件,以便降低开发和维护成本,提高程序的复用性。WEB网站开发技术从大的方向上来说,主要有Java web、.NET、PHP三个方向。

Java Web,是用Java技术来解决相关web互联网领域的技术总和。web包括 :web服务器和web客户端两部分。Java在客户端的应用有java applet不过现在使用的很少,Java在服务器端的应用非常的丰富,比如Servlet,JSP和第三方框架等等。Java技术对Web领域的发展注入了强大的动力。

.NET是Microsoft XML Web services平台。XML Web services允许应用程序通过Internet进行通讯和共享数据,而不管所采用的是哪种操作系统、设备或编程语言。Microsoft .NET平台提供创建XML Web services并将这些服务集成在一起之所需。对个人用户的好处是无缝的、吸引人的体验。

PHP(PHP: Hypertext Preprocessor的缩写,中文名 :“超文本预处理器”)是一种通用开源脚本语言。语法吸收了C语言、Java和Perl的特点,入门门槛较低,易于学习,使用广泛,主要适用于Web开发领域。PHP的文件后缀名为php。

PHP独特的语 法混合了C、Java、Perl以及PHP自创的语法。它可以比CGI或者Perl更快速地执行动态网页。用PHP做出的动态页面与其他的编程语言相比,PHP是将程序嵌入到HTML(标准通用标记语言下的一个应用)文档中去执行,执行效率比完全生成HTML标记的CGI要高许多 ;PHP还可以执行编译后代码,编译可以达到加密和优化代码运行,使代码运行更快。

3 网站开发工具

Dreamweaver是一个功能强大的网页设计工具,有着方便实用的工具和所见即所得的排版功能,见面十分友好,使用方便。在不需要掌握HTML语言的情况下,即可利用其强大的功能开发出专业的网页。

Adobe Photoshop,简称“PS”,是由Adobe Systems开发和发行的图像处理软件。Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具,可以有效地进行图片编辑工作。ps有很多功能,在图像、图形、文字、视频、出版等各方面都有涉及。

4 网站整体设计

根据业务流程,需要将网站划分为前台、后台和数据库。客户在登录网站主页后即可链接查看到产品信息等,还可以给企业留言。数据库将要作为网站后台重要的组成部分,管理员的主要操作几乎全部围绕数据库,最后将更新的数据要显示给前台。

前台是一个比较大的功能群,它所包含的信息不仅数量多,而且种类不同。将它设计成比较优化的结构形式能组织好网站的信息内容并将其归类,方便用户获得所需要的信息。

系统的后台要对整个网站的信息和数据进行维护。网站前台所显示的信息在后台都应该有对应的维护。

在设计好网站前台与后台的结构以后,就将数据库加入到结构中。后台将更新的数据写入到数据库中,前台再将数据库中的信息取出来并显示。

5 企业网站维护

为了适应互联网时代的疯狂,几乎每个企业都有一个属于自己的网站。从某种意义上来说,一个企业的网站,关系到自身的发展。因此,企业的网站维护是非常重要的。网站维护大致可分为软硬件维护和内容更新。

5.1 软硬件维护

计算机硬件在使用中常会出现一些问题,同样,网络设备也同样影响企业网站的工作效率,网络设备管理属于技术操作,非专业人员的误操作有可能导致整个企业网站瘫痪。

关于软件维护,最重要的莫过于操作系统软件。任何操作系统都不是是绝对安全的。想要维护操作系统的安全,必须不断的留意相关网站,及时的为系统安装升级包或者打上补丁。其他的诸如SQL Server等等服务器软件也要及时打上补丁。服务器配置本身就是安全防护的重要环节。有不少黑客案例是利用了没有正确配置的微软的IIS服务而产生的漏洞。

5.2 网站内容更新