首页文章中心正文

信息产业公司网站设计与实现

时间：2022-06-30 11:11:26

信息产业公司网站设计与实现

摘要：为提高中小型信息服务类企业网站设计的质量，提升网站利用率。以武汉信运通信息产业有限公司为例，从网站的设计分析出发，采用HTML和JavaScript语言，利用DIV＋CSS进行网页布局，实现了网站的重新设计、制作和测试，具体内容包括网站首页、产品展示、服务介绍、加盟合作、新闻动态、关于我们。结果表明：网站的设计与实现能满足公司的需求，达到了预期的效果，为同类型企业网站的设计与实现提供了参考和借鉴价值。

关键词：信息产业；网站设计；网站实现；JavaScript

武汉信运通信息产业有限公司是一家专业提供物流行业信息化及其他集成服务于一体的高新企业。信运通信息产业有限公司之前使用的网站存在版式老套、网页布局混乱等问题。通过对公司的现有业务内容、企业网站目标用户、企业网站设计策略进行分析和总结，综合应用AdobePhotoshopcs6、PS软件和AdobeDreamweavercs6软件，采用HTML和DIV＋CSS搭建网站的基本框架，通过Javascript语言来实现网站的动态效果。最终实现了网站规划、界面设计、网站制作及网站测试，达到了预期的效果，提升了用户的体验，进而为中小型信息服务类企业网站设计与实现提供了参考和借鉴价值。

1网站设计思路

在分析研究和实践基础上，对整体设计流程进行梳理，得出网站的设计思路（见图1）。（1）对公司现有产品、主要服务、合作伙伴、企业相关介绍等需要通过网站向目标群体进行展示的相关信息进行梳理。（2）通过对目标群体的受教育程度、浏览网站的习惯、对网站不同信息的关注度以及其对企业网站设计的影响进行分析，从而确定网站的设计框架、展示形式与风格。（3）通过浏览大量的企业网站并进行深入细致的分析，从而归纳总结出企业网站设计的策略，为后期良好的企业网站设计做好准备。（4）根据前期的调查、分析、总结，进行网站架构的初步设计以及网站界面的详细设计。（5）根据设计出来的网站界面，进行网站界面的代码实现。在制作完成后根据需要进行网站的测试。（6）对设计制作出来的网站进行总结，发现网站设计与制作过程中的不足以便后期加以修整。

2网站设计分析

2．1用户分析

在对公司业务内容进行梳理后，明确了其网站用户群。下面将针对用户群体进行分类分析。（1）中小型物流企业。通过与相关人员交流，了解到针对物流信息服务企业网站需要展示以下内容：产品与服务的相关介绍、物流行业与公司的新闻动态以及老客户使用公司产品与服务的效果。对于网站的展示效果，他们更倾向于布局相对简单、易于浏览、便于获取到关键信息。（2）合作伙伴与投资人。通过对信运通公司向合作伙伴与投资人展示的PPT内容进行分析，可以总结出公司主要想向投资人和合作伙伴传达以下信息：公司的简要介绍、市场机会、现阶段经营的产品及服务、自身发展的优势、企业未来发展规划以及合作伙伴合作、投资人投资带来的互惠互利及其良好的预期。（3）其他用户。除了物流服务企业、合作伙伴与投资人以外，网站的常见用户还有政府机构、应聘者及不定人群。这些用户在浏览网站时，主要会对网站的风格、公司的介绍、企业文化、企业发展状况、公司现阶段经营的产品与服务以及近期的招聘职位感兴趣。

2．2内容分析

在完成前期的调查与梳理以及对网站用户群体进行研究后，企业网站的内容暂定为以下7个模块，具体内容如下：（1）网站首页。网站首页主要内容有企业LOGO、展示企业理念的轮播图、网站导航、公司产品及服务、公司简介、新闻动态以及服务联系方式和APP下载区。（2）产品展示。产品展示模块主要包括公司的现有产品－－物流业务管理系统、物流公共服务平台、物流联盟管理系统、第三方物流管理系统以及手机APP。（3）服务介绍。主要包括公司现阶段对外提供的在线金融、在线投保、市内配送、GPS定位、园区WIFI服务。（4）成功案例。向意向客户或者潜在客户展示公司的产品和服务在推广过程中的成功案例。（5）加盟合作。一方面通过展示公司现阶段已经与哪些类型的机构展开合作关系从侧面彰显公司的实力。另一方面可以让潜在的加盟商、投资人知晓公司的加盟合作以及吸纳投资的意向。（6）新闻动态。新闻动态模块主要包括行业新闻和公司新闻。（7）关于我们。关于我们模块主要包括公司简介、发展历程、企业文化、联系方式、加入我们。

3网站设计制作

3．1网站结构规划

经过网站设计分析，得出公司网站界面设计的具体结构（见图2）。由于这些中小型物流公司使用系统时间较短，能够作为成功案例进行效果展示的公司并不多，因此在网站制作时先将此模块去掉。

3．2网站界面设计

3.2.1网站首页设计

网站首页能够让浏览者在第一时间内领略到企业特色所在。网站首页PS效果如图3所示：在网站首页的页眉位置，左侧放置了公司的LO-GO。在页眉的右侧设置了“添加到桌面”快捷方式。在页眉的中部，设置了网站的导航。为了提高网页字体的辨识度与界面整洁，整个网站除了特殊需要都采用微软雅黑字体。导航栏采用了鼠标悬浮的效果。当鼠标移动到相应的模块时，相应的文字由黑色跳转为红色，下方悬浮显示具体的子目录。首页Banner不仅需要体现企业的高端、大气，同时还要展示物流信息化服务的愿景，并符合整体的页面设计。Banner的下方是产品展示区，展示公司现阶段的主要产品—“好运通”物流业务管理系统、物流公共服务平台、物流联盟管理系统、第三方物流公共服务平台以及手机APP。整个产品展示区域只显示3个产品，其他产品以轮播图的形式呈现，当用户点击左、右移动按钮，图标会根据用户的操作向左或向右移动出隐藏的产品图标。产品展示的下方是两栏信息栏，分别放置公司简介和新闻动态。以便访客第一时间对公司有简单的了解，同时获取相关的新闻动态信息。接下来是优质服务展示栏，在这一信息栏，针对每一项服务都设计了相应的图标以便对服务进行形象的展示。考虑到公司后期还会推出其他的服务，在优质服务栏同样采用了轮播的效果，当访客想要对服务进行了解时，只需鼠标单击图标或者对应的文字即可进入相应的页面。在网站首页的底部是网站的版权信息、公司名称以及公司的联系电话。为了使整个网站显得不沉闷，同图4其他页面PS效果图时又能跟整个网站的风格协调，在底部的设计上选用了姜黄色作底色，字体用白色。在网站首页的右侧固定了一个信息框，上面展示有公司的客服电话、客服QQ以及手机APP二维码。此模块将作为公司联系方式的展示区，在整个网站的各个界面都会出现。

3.2.2其他界面设计

为了简化整个网站的制作流程，同时保证网站风格的统一以及实现便于访客浏览的目的，网站的其他界面（除了网站首页以外的所有界面）的页眉、Banner（其他界面的Banner没有轮播效果，只是选取了网站首页Banner轮播图的一张图片）以及网页底部均与网站首页的设计形式保持高度的一致。

3．3网站代码实现

选择AdobeDreamweavercs6作为网站代码编写软件，采用HTML、DIV＋CSS和Javascript语言来实现网站。下面将选择几个具代表性的功能模块进行说明。

3.3.1网站页眉

网站的页眉包括LOGO、导航和微信二维码三部分，这三部分的排列主要通过float属性来实现，各个模块的具体位置则需要通过设置margin值的大小来实现，使用width属性控制页眉宽度。公司LOGO的排列需要通过src属性将处理好的图片引入即可。网站的导航部分是页眉部分的难点，它主要通过＜ul＞＜li＞＜／li＞＜／ul＞来实现文字的排列，通过display属性实现二级导航的显示与隐藏，通过伪类hover实现鼠标悬浮时的文字变色。微信公众平台二维码部分则是先通过DIV＋CSS实现图标的排列，再通过引入的JS代码实现鼠标的悬浮效果。

3.3.2首页

Banner网站首页的Banner部分有两张宣传企业文化的图片交替轮播，为了实现较好的图片轮播效果，需要有JS代码作为支撑。

3.3.3“优质服务”

先通过DIV＋CSS将优质服务的五个服务内容以及进行左右切换的图标进行排版，再借助JS代码进行动态效果的实现。

3.3.4网页右侧信息框

网页右侧的信息框主要有服务热线电话、客服QQ以及手机APP下载三个模块。这三个模块均是采用DIV＋CSS进行布局，具体的每一个模块则是通过float属性与margin属性进行控制。

3.3.5公司新闻模块

公司网站的新闻展示模块主要采用了table表格进行布局，在后期新闻条目较多、一个页面的展示效果不好时，就要考虑到新闻页面的翻页问题，需要通过JS代码来实现每个页面新闻条数多少以及上下页的翻转。

4网站测试

网站测试作为网站设计与制作的最后一个环节，它对网站设计与制作的质量有较大影响，在测试时，主要针对静态网站可能存在的问题进行了测试。

4.1链接测试

此次的网站链接测试主要针对以下三个方面：①测试网站上页面的所有链接是否依照设计思路链接到了正确的页面；②测试链接所指向的网站页面是否存在；③测试整个网站没有孤立的页面，即每一个界面都应当有链接指向。