冠博软件技术公司网站建设
目录
一、引言 1
（一）课题起因和目的 1
（二）课题意义即指导思想 1
（三）课题内容即解决的相关问题 1
二、开发工具简介 1
（一）Macromedia Dreamweaver 8 1
（二）Photoshop CS6 2
（三）JavaScript 2
三、网站设计 2
(一) 网站制作流程 2
1.网站功能结构图 2
2.界面设计 2
3.Table+CSS布局 4
4.LOGO设计 4
5.table结构和样式 4
6.网页的颜色选取 5
（二）网站基本功能 5
1.首页 5
Main 5
2.产品与服务 6
3.冠博新闻 7
4.合作伙伴 8
5.关于冠博 8
6.招聘信息 9
7.联系我们 10
（三）JS特效建设 10
1.首页的图片自动切换 10
2.首页浮动窗体 15
3.子页表格筛选功能 16
4.子页表格控件控制功能 17
四、总结 18
致谢 20
参考文献 20
一、引言
（一）课题起因和目的
作为一个软件技术公司，冠博必须紧跟市场的步伐行动。冠博的客户是大企业和组织，要想获得更多的客户就必定要有一个完善的网站，为自己做宣传和介绍。这样的优秀网站必将为冠博带来良好的客户感官，为企业的形象加分。自从来到冠博软件实习开始，融入了这个集体，就一直希望 *好棒文|www.hbsrm.com +Q: ￥3^5`1^9`1^6^0`7^2$
能够为公司做出一份贡献。在接到设计任务并且看到公司现有的网站比较单调时，就萌生了做一个企业网站的念头，并且成功地做到了。
（二）课题意义即指导思想
网站是一个公司在网络上的家，网站的好坏直接表现在客户面前，同时也将公司的一个方面展现在了众人面前，这就是它代表了这个企业在网络上甚至现实世界的形象。网站同时也是一家企业重要的宣传方式，当客户或者潜在客户打开这个网站，看到了的界面直接让人产生出了第一感官，产生了出对企业的第一印象。这个印象是至关重要的，对于潜在的客户的影响最大也最深。正因为网站的重要性对于公司在网络上影响极大，所以这个新网站就得要能够紧紧的吸住用户的眼睛。
（三）课题内容即解决的相关问题
冠博经营的是软件技术，接触的都是软件行业内部的专业人士和组织，大多数的软件技术企业依赖于网络，离不开网络的巨大影响。虽然本公司用到网站于合作伙伴或者客户联系的并不多，但是一个好的网站却是必不可少的。宣传、介绍是本网站的基本中心点，展示公司的实力和魅力。为了增强网站的趣味性，一些动态就必须要有很多了。在网站的首页有两个动态效果，在子页中还有很多表格、色彩变化和动态效果以及图文紧致的排版。为了解决这些问题，于是每一个页面中都多出了大量的JS、CSS和table布局。
二、 开发工具简介
（一）Macromedia Dreamweaver 8
Macromedia Dreamweaver 8是Macromedia公司所开发的网站设计工具的精品。冠博网站开发使用它是有巨大的优势：参考视图界面设计和源代码HTML完全清晰便于理解的两种样式相Switch或全文或全图或半文半图；不只有同类软件的大部分重要的功能，而且有自身的许多不同的设计理念和出色功能设计；有时甚至无需手打的一些格式代码，就能创建简单的各种基本的效果；有着强大扩展和自定义功能，提高工作质量和工作效率；支持多个浏览器预览和层叠样式表；Dreamweaver8最新版本，运用了更多的先进技术，能够快速地创建更具表现力和动态效果的网页。
在建设网站的过程中，主要就是使用君威编辑代码和制作界面。在代码中显示格式，可以很清楚地看到网页的代码的情况，对其中的错误、缺失、混乱能够清晰地看得到。清晰的代码结构对编辑代码起到了非常重要的帮助，可以看到代码中所有的模块，非常容易地完成了对代码的理解并且快速地修改。
（二）Photoshop CS6
Adobe Photoshop，简称“PS”，是一种集图像处理、加工和制作于一体的软件。在任何一个网页中都需要大量地图片，而这些网页中的图片一般来说都是用PS来制作的。当修改一张图片是可以使用众多的工具，对图片加工的条件可以说是众多相关软件中最全面的，并且可以随意的剪切。
（三）JavaScript
JavaScript一种直译式脚本语言。冠博软件网站类型是静态网页，但是还是需要用的很多的更漂亮的效果，这些都需要用到JS。
三、网站设计
(一) 网站制作流程
1.网站功能结构图
一个网站的功能是他的存在的核心。这个网站是冠博软件的企业网站，前面也已经确定它为了宣传的目标，所以在制作的时候更多的是展示企业的形象，文化精神，经营理念，服务等等
功能有以下分类：首页；产品推广；公司信息介绍；联系我们；招聘信息；公司新闻；于公司合作等（如上图）。清晰的结构分类方便用户更好的了解网站的整体结构，也适合用户更好更快的浏览所有的公司信息，迅速的对公司进行完整的了解，对公司有一个清晰的整体形象概念。如图3-1所示：
图3-1网站的大概组织结构
2.界面设计
信息的传递要想快速、高效，那就必得简单有条理。所以网页的布局一定要简单，能够一目了然，第一时间看到所有的信息。使用Table和CSS以及HTML代码来设计冠博软件的网站，可以很轻松的将整个网站架构完美地展现。当然，在最初的时候还是要将基本的框架制作出来的，以下就是网站首页的框架模式如图3-2所示：
LOGO
联系
导航
主题图片展示
页底
图3-2 首页布局图
网页采用了居中模式，传统屏宽，超级简单的头、页、尾三段结构，直接将冠博公司的信息显示在最中心。为了让所有信息能够被轻易的搜索到，所有的连接都经过了严格的逻辑排列，给人感觉他是一个整体，也能感觉冠博软件公司的组织结构的严谨性和冠博所做的程序的逻辑性。
正因为有了这种科学严谨的特点，才能让客户产生信赖和兴趣，所以我们要给它设定成以科学严谨为主，趣味炫丽为辅的样式。
以下是子页的框架模式如图3-3和图3-4所示：
LOGO
联系
图3-13 招聘信息
7.联系我们
冠博软件的办公地址，联系方式以及相关的前端人才培训机构的网站都可以在这里找到。如图3-14所示：
图3-22 表格控件效果
四、总结
经过了大半年的努力，如今这次毕业设计已经进入了尾声。在这段时间内，在杨老师的指导下，根据自己的题目和已有的知识水平，认认真真地查找资料分析设计过程中可能遇到的问题，运用自己自学和学校中学到的知识，逐步地制作完成了它的每项功能和效果以及相关的设计。
一、引言 1
（一）课题起因和目的 1
（二）课题意义即指导思想 1
（三）课题内容即解决的相关问题 1
二、开发工具简介 1
（一）Macromedia Dreamweaver 8 1
（二）Photoshop CS6 2
（三）JavaScript 2
三、网站设计 2
(一) 网站制作流程 2
1.网站功能结构图 2
2.界面设计 2
3.Table+CSS布局 4
4.LOGO设计 4
5.table结构和样式 4
6.网页的颜色选取 5
（二）网站基本功能 5
1.首页 5
Main 5
2.产品与服务 6
3.冠博新闻 7
4.合作伙伴 8
5.关于冠博 8
6.招聘信息 9
7.联系我们 10
（三）JS特效建设 10
1.首页的图片自动切换 10
2.首页浮动窗体 15
3.子页表格筛选功能 16
4.子页表格控件控制功能 17
四、总结 18
致谢 20
参考文献 20
一、引言
（一）课题起因和目的
作为一个软件技术公司，冠博必须紧跟市场的步伐行动。冠博的客户是大企业和组织，要想获得更多的客户就必定要有一个完善的网站，为自己做宣传和介绍。这样的优秀网站必将为冠博带来良好的客户感官，为企业的形象加分。自从来到冠博软件实习开始，融入了这个集体，就一直希望 *好棒文|www.hbsrm.com +Q: ￥3^5`1^9`1^6^0`7^2$
能够为公司做出一份贡献。在接到设计任务并且看到公司现有的网站比较单调时，就萌生了做一个企业网站的念头，并且成功地做到了。
（二）课题意义即指导思想
网站是一个公司在网络上的家，网站的好坏直接表现在客户面前，同时也将公司的一个方面展现在了众人面前，这就是它代表了这个企业在网络上甚至现实世界的形象。网站同时也是一家企业重要的宣传方式，当客户或者潜在客户打开这个网站，看到了的界面直接让人产生出了第一感官，产生了出对企业的第一印象。这个印象是至关重要的，对于潜在的客户的影响最大也最深。正因为网站的重要性对于公司在网络上影响极大，所以这个新网站就得要能够紧紧的吸住用户的眼睛。
（三）课题内容即解决的相关问题
冠博经营的是软件技术，接触的都是软件行业内部的专业人士和组织，大多数的软件技术企业依赖于网络，离不开网络的巨大影响。虽然本公司用到网站于合作伙伴或者客户联系的并不多，但是一个好的网站却是必不可少的。宣传、介绍是本网站的基本中心点，展示公司的实力和魅力。为了增强网站的趣味性，一些动态就必须要有很多了。在网站的首页有两个动态效果，在子页中还有很多表格、色彩变化和动态效果以及图文紧致的排版。为了解决这些问题，于是每一个页面中都多出了大量的JS、CSS和table布局。
二、 开发工具简介
（一）Macromedia Dreamweaver 8
Macromedia Dreamweaver 8是Macromedia公司所开发的网站设计工具的精品。冠博网站开发使用它是有巨大的优势：参考视图界面设计和源代码HTML完全清晰便于理解的两种样式相Switch或全文或全图或半文半图；不只有同类软件的大部分重要的功能，而且有自身的许多不同的设计理念和出色功能设计；有时甚至无需手打的一些格式代码，就能创建简单的各种基本的效果；有着强大扩展和自定义功能，提高工作质量和工作效率；支持多个浏览器预览和层叠样式表；Dreamweaver8最新版本，运用了更多的先进技术，能够快速地创建更具表现力和动态效果的网页。
在建设网站的过程中，主要就是使用君威编辑代码和制作界面。在代码中显示格式，可以很清楚地看到网页的代码的情况，对其中的错误、缺失、混乱能够清晰地看得到。清晰的代码结构对编辑代码起到了非常重要的帮助，可以看到代码中所有的模块，非常容易地完成了对代码的理解并且快速地修改。
（二）Photoshop CS6
Adobe Photoshop，简称“PS”，是一种集图像处理、加工和制作于一体的软件。在任何一个网页中都需要大量地图片，而这些网页中的图片一般来说都是用PS来制作的。当修改一张图片是可以使用众多的工具，对图片加工的条件可以说是众多相关软件中最全面的，并且可以随意的剪切。
（三）JavaScript
JavaScript一种直译式脚本语言。冠博软件网站类型是静态网页，但是还是需要用的很多的更漂亮的效果，这些都需要用到JS。
三、网站设计
(一) 网站制作流程
1.网站功能结构图
一个网站的功能是他的存在的核心。这个网站是冠博软件的企业网站，前面也已经确定它为了宣传的目标，所以在制作的时候更多的是展示企业的形象，文化精神，经营理念，服务等等
功能有以下分类：首页；产品推广；公司信息介绍；联系我们；招聘信息；公司新闻；于公司合作等（如上图）。清晰的结构分类方便用户更好的了解网站的整体结构，也适合用户更好更快的浏览所有的公司信息，迅速的对公司进行完整的了解，对公司有一个清晰的整体形象概念。如图3-1所示：
图3-1网站的大概组织结构
2.界面设计
信息的传递要想快速、高效，那就必得简单有条理。所以网页的布局一定要简单，能够一目了然，第一时间看到所有的信息。使用Table和CSS以及HTML代码来设计冠博软件的网站，可以很轻松的将整个网站架构完美地展现。当然，在最初的时候还是要将基本的框架制作出来的，以下就是网站首页的框架模式如图3-2所示：
LOGO
联系
导航
主题图片展示
页底
图3-2 首页布局图
网页采用了居中模式，传统屏宽，超级简单的头、页、尾三段结构，直接将冠博公司的信息显示在最中心。为了让所有信息能够被轻易的搜索到，所有的连接都经过了严格的逻辑排列，给人感觉他是一个整体，也能感觉冠博软件公司的组织结构的严谨性和冠博所做的程序的逻辑性。
正因为有了这种科学严谨的特点，才能让客户产生信赖和兴趣，所以我们要给它设定成以科学严谨为主，趣味炫丽为辅的样式。
以下是子页的框架模式如图3-3和图3-4所示：
LOGO
联系
图3-13 招聘信息
7.联系我们
冠博软件的办公地址，联系方式以及相关的前端人才培训机构的网站都可以在这里找到。如图3-14所示：
图3-22 表格控件效果
四、总结
经过了大半年的努力，如今这次毕业设计已经进入了尾声。在这段时间内，在杨老师的指导下，根据自己的题目和已有的知识水平，认认真真地查找资料分析设计过程中可能遇到的问题，运用自己自学和学校中学到的知识，逐步地制作完成了它的每项功能和效果以及相关的设计。
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/rjgc/1689.html
