麦杰智能科技有限公司网站
目 录
一 、引言 1
（一）系统简介 1
（二）目标与意义 1
二、系统开发工具 1
（一）Adobe Dreamweaver 1
（二）Photoshop 1
三、系统分析与设计 2
（一）系统模块设计 2
（二）系统流程图 2
（三）需求分析 2
四、系统实现与编码 3
（一） 麦杰公司网站首页模块设计 3
（二）关于公司模块设计 6
（三）公司资质模块设计 9
（四）产品专利模块设计 10
（五）新闻动态模块设计 14
（六）在线留言模块设计 17
（七）联系我们模块设计 19
五.总结 20
致谢 21
参考文献 22
一 、引言
（一）系统简介
随着信息技术的高速发展，尤其是互联网技术的发展，人们获取信息的途径也变得多种多样。人们可以打开电脑，通过浏览器查询自己想知道的信息，或者通过移动智能手机，查询相关信息。传统的企业宣传模式一般是通过传单、或者在报纸上发布企业信息，或者打印成宣传手册进行宣传，但这些传统的宣传模式存在着费用大、企业宣传信息量受限、宣传范围小、信息宣传不够及时等缺点。响应李克强总理提出的“互联网+”概念，集合自身所学网站开发知识，我决定为苏州麦杰智能科技有限公司开发一个公司门户网站，用于介绍公司的企业文化、经营范围、企业信条、公司大事件、公司荣誉、公司资质、公司产品、公司新闻动态、公司招聘信息和公司薪资福利等咨询。
（二）目标与意义
苏州麦杰智能科技有限公司网站的实现有助于麦杰公 *好棒文|www.hbsrm.com +Q: ^3^5`1^9`1^6^0`7^2#
司扩大企业影响力。作为公司的门户网站，当外界访客通过浏览器访问公司主页地址时，访客第一时间会被它的界面渲染效果吸引。然后，外界访客在公司首页可以查看麦杰公司的简介，包括公司的地址成立日期、联系电话、公司经营范围简介等信息。如果想了解具体的公司信息，可以在首页导航栏中具体查看。当然，访客除了能浏览公司的咨询信息以外，还可以在线留言，如果有任何意见，都可以在线留言给公司，为麦杰公司提出宝贵的意见。
二、系统开发工具
（一）Adobe Dreamweaver
Adobe Dreamweaver，简称“DW”，是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，DW是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。
Adobe Dreamweaver使用所见即所得的接口，亦有HTML（标准通用标记语言下的一个应用）编辑的功能。它有Mac和Windows系统的版本。随Macromedia被Adobe收购后，Adobe也开始计划开发Linux版本的Dreamweaver了。 Dreamweaver自MX版本开始，使用了Opera的排版引擎"Presto" 作为网页预览。本系统为静态网站，在美观性和动态性上具有一定的要求，而DW是再合适不过的开发此类网站的免费开源工具。
（二）Photoshop
Photoshop简称“PS”，也是美国Adobe公司旗下的图像处理软件之一，为图像扫描、编辑修改，图像制作等，深受广大平面设计人员和美术爱好者喜爱。在后期处理中，我用到了这个软件为图片做出效果。
三、系统分析与设计
（一）系统模块设计
系统模块设计效果如图1所示：
图1 系统模块图
（二）系统流程图
系统流程图如图2所示：
图2 系统模块图
（三）需求分析
通过网上查看其它公司网站的门户网站并且和麦杰公司客户人员进行交流后，最终确定了该网站的需求。该网站用户主要是外界访客，而网站内的信息也主要是对外信息，最终目的是发布公司最新消息，让外界了解麦杰公司，从而达到宣传、推广麦杰公司的效果，需要包含如下模板。
首页模块
关于公司模块
公司资质模块
产品专利模块
新闻动态模块
在线留言模块
联系我们模块
四、系统实现与编码
（一） 麦杰公司网站首页模块设计
1．首页功能设计
首页需要实现以下两部分的功能
（1）访客可查看公司研究领域：
外界访客访问公司主页成功后，可以在主页中通过图片形式查看公司的研究领域，让访客一眼就能知道麦杰公司是一个什么样的企业。
（2）访客可查看公司企业宗旨：
外界访客访问公司主页成功后，可以在主页中查看企业使命和企业定位、企业宗旨和企业目标、最高理想及道德价值。
其网页如图3所示：
图 3 麦杰网站首页效果图
2．设计过程
首页顶端左侧放置一张苏州麦杰智能科技有限公司的图片，用于显示公司LOGO。首先找到一张带有这几个字样的图片，然后通过ps切割，切出自己需要的图片，然后在制作网页的时候插入图片。顶端右侧设计网站成网站导航栏，这种设计便于用户点击超链接，方便快捷，是当下主流网站的设计框架模式。通过这样的设计内容是为了吸引眼球，抓住访客的兴趣。其框架设计图如4所示：
Logo 网站头部
导航菜单
轮播图片
研究领域
图片
企业宗旨
信息
版权信息
图4 导航栏效果图
3.首页设计的核心代码：
首页通过先给图片设置一个Div容器用于存放图片，为了设置图片循环播放，我们通过JQuery中的cycle属性来设置循环动画播放效果，效果图代码如下：
$(.slider).cycle({
fx : scrollHorz,
timeout : 4000,
cleartype : false,
next : .rightArrow2,
prev : .arrowLeft2,
pager : .pager2
});
图 30招聘流程效果图
当用户在公司网站中点击薪酬福利信息超链接，网站将公司薪酬福利信息信息显示到网站界面中，其实现效果图如图31所示：
一 、引言 1
（一）系统简介 1
（二）目标与意义 1
二、系统开发工具 1
（一）Adobe Dreamweaver 1
（二）Photoshop 1
三、系统分析与设计 2
（一）系统模块设计 2
（二）系统流程图 2
（三）需求分析 2
四、系统实现与编码 3
（一） 麦杰公司网站首页模块设计 3
（二）关于公司模块设计 6
（三）公司资质模块设计 9
（四）产品专利模块设计 10
（五）新闻动态模块设计 14
（六）在线留言模块设计 17
（七）联系我们模块设计 19
五.总结 20
致谢 21
参考文献 22
一 、引言
（一）系统简介
随着信息技术的高速发展，尤其是互联网技术的发展，人们获取信息的途径也变得多种多样。人们可以打开电脑，通过浏览器查询自己想知道的信息，或者通过移动智能手机，查询相关信息。传统的企业宣传模式一般是通过传单、或者在报纸上发布企业信息，或者打印成宣传手册进行宣传，但这些传统的宣传模式存在着费用大、企业宣传信息量受限、宣传范围小、信息宣传不够及时等缺点。响应李克强总理提出的“互联网+”概念，集合自身所学网站开发知识，我决定为苏州麦杰智能科技有限公司开发一个公司门户网站，用于介绍公司的企业文化、经营范围、企业信条、公司大事件、公司荣誉、公司资质、公司产品、公司新闻动态、公司招聘信息和公司薪资福利等咨询。
（二）目标与意义
苏州麦杰智能科技有限公司网站的实现有助于麦杰公 *好棒文|www.hbsrm.com +Q: ^3^5`1^9`1^6^0`7^2#
司扩大企业影响力。作为公司的门户网站，当外界访客通过浏览器访问公司主页地址时，访客第一时间会被它的界面渲染效果吸引。然后，外界访客在公司首页可以查看麦杰公司的简介，包括公司的地址成立日期、联系电话、公司经营范围简介等信息。如果想了解具体的公司信息，可以在首页导航栏中具体查看。当然，访客除了能浏览公司的咨询信息以外，还可以在线留言，如果有任何意见，都可以在线留言给公司，为麦杰公司提出宝贵的意见。
二、系统开发工具
（一）Adobe Dreamweaver
Adobe Dreamweaver，简称“DW”，是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，DW是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。
Adobe Dreamweaver使用所见即所得的接口，亦有HTML（标准通用标记语言下的一个应用）编辑的功能。它有Mac和Windows系统的版本。随Macromedia被Adobe收购后，Adobe也开始计划开发Linux版本的Dreamweaver了。 Dreamweaver自MX版本开始，使用了Opera的排版引擎"Presto" 作为网页预览。本系统为静态网站，在美观性和动态性上具有一定的要求，而DW是再合适不过的开发此类网站的免费开源工具。
（二）Photoshop
Photoshop简称“PS”，也是美国Adobe公司旗下的图像处理软件之一，为图像扫描、编辑修改，图像制作等，深受广大平面设计人员和美术爱好者喜爱。在后期处理中，我用到了这个软件为图片做出效果。
三、系统分析与设计
（一）系统模块设计
系统模块设计效果如图1所示：
图1 系统模块图
（二）系统流程图
系统流程图如图2所示：
图2 系统模块图
（三）需求分析
通过网上查看其它公司网站的门户网站并且和麦杰公司客户人员进行交流后，最终确定了该网站的需求。该网站用户主要是外界访客，而网站内的信息也主要是对外信息，最终目的是发布公司最新消息，让外界了解麦杰公司，从而达到宣传、推广麦杰公司的效果，需要包含如下模板。
首页模块
关于公司模块
公司资质模块
产品专利模块
新闻动态模块
在线留言模块
联系我们模块
四、系统实现与编码
（一） 麦杰公司网站首页模块设计
1．首页功能设计
首页需要实现以下两部分的功能
（1）访客可查看公司研究领域：
外界访客访问公司主页成功后，可以在主页中通过图片形式查看公司的研究领域，让访客一眼就能知道麦杰公司是一个什么样的企业。
（2）访客可查看公司企业宗旨：
外界访客访问公司主页成功后，可以在主页中查看企业使命和企业定位、企业宗旨和企业目标、最高理想及道德价值。
其网页如图3所示：
图 3 麦杰网站首页效果图
2．设计过程
首页顶端左侧放置一张苏州麦杰智能科技有限公司的图片，用于显示公司LOGO。首先找到一张带有这几个字样的图片，然后通过ps切割，切出自己需要的图片，然后在制作网页的时候插入图片。顶端右侧设计网站成网站导航栏，这种设计便于用户点击超链接，方便快捷，是当下主流网站的设计框架模式。通过这样的设计内容是为了吸引眼球，抓住访客的兴趣。其框架设计图如4所示：
Logo 网站头部
导航菜单
轮播图片
研究领域
图片
企业宗旨
信息
版权信息
图4 导航栏效果图
3.首页设计的核心代码：
首页通过先给图片设置一个Div容器用于存放图片，为了设置图片循环播放，我们通过JQuery中的cycle属性来设置循环动画播放效果，效果图代码如下：
$(.slider).cycle({
fx : scrollHorz,
timeout : 4000,
cleartype : false,
next : .rightArrow2,
prev : .arrowLeft2,
pager : .pager2
});
图 30招聘流程效果图
当用户在公司网站中点击薪酬福利信息超链接，网站将公司薪酬福利信息信息显示到网站界面中，其实现效果图如图31所示：
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/rjgc/1860.html
