微创软件有限公司网站建设
目录
一、引言 1
二、需求分析 1
三、开发工具选择 2
四、主体设计 2
（一）网站开发流程 2
1.功能结构图绘制 2
2.界面设计 3
3.DIV+CSS布局 4
4.首页div结构和层样式 5
（二） 网站基本功能 6
1.首页 6
2.关于微创 7
3.最高荣誉 8
4.人才招聘 9
5.主营项目 10
6.联系我们 11
7.新闻子页 11
8.其他子页 12
（三）JavaScript特效 13
1.幻灯片播放效果 13
2.图片放大效果 15
五、总结 16
致谢 17
参考文献 17
附录 18
一、引言
由于表格布局仍然存在不少局限性，随着网络技术的发展，表格布局已然退出历史舞台，DIV+CSS网站布局的方式应运而生，这种布局方式拥有多个优势：提高了页面加载速度、减少了设计人员的工作量、容易被多种浏览器访问。
互联网是文字、图片、声像的载体，不同于其他的广告媒介——电视、报纸、杂志，互联网可以让用户更加方便快捷的浏览公司的产品、广告和新闻。网络宣传和电视宣传、报刊杂志宣传相比，不但降低了成本，同时也大大提高了时间的利用率。我们公司是一家外包公司，客户市场当然遍及世界各个角落，网络宣传让我们获得更加广阔的客户市场以及更加丰富的资源。建设公司网站后，在网络的平台上，公司在人才招聘这方面可以有更多的选择，应聘者了解了公司的用人需求，有选择性的应聘，减去了人事行政部门的不 *好棒文|www.hbsrm.com +Q: 3 5 1 9 1 6 0 7 2
必要工作，提升了员工的工作热忱度。电脑的普及、全球网民人数的增长，让公司的网站建设已经成为互联网时代的一种趋势。
二、需求分析
企业建设的网站，可以让用户方便清楚的看到企业的介绍、企业文化、发展历程产品服务以及联系方式，网站给用户一目了然的效果，进而在用户心中树立一种良好的企业形象，为企业日后的口碑和发展打下良好的基础。
企业网站的基本功能是，全方位、多层次地介绍公司以及公司的产品，公司可以把公司的奖项荣誉、公司业绩、公司新的动态等放在网上供用户浏览，宣传企业文化。
很多求职者在网上投递简历之前，都会使用搜素引擎搜素该公司的资料，如果公司有网站，他们一定会习惯性的点击公司的网站，浏览公司主要经营的项目、服务以及发布的最新的公司消息。大致了解完公司之后，他们才会决定是否向该公司投递简历。公司网站无疑也在求职者应聘方面起到了一定的参考作用。
互联网是一个商机无限的大平台，很多大的采购商考虑到预算的限制，都是通过互联网采购新产品、寻找新的供应商，如果公司建立自己的网站，不但给公司带来了新的客户、新的资源，也大大提升了公司在其他同类公司中的知名度和影响力。
网站的信息量非常多，方式也非常丰富（包含图片、文字、动态效果等等），同时信息可以不断更新，企业可以经常更新公司的新闻动态和发布最新的消息，公司的新闻可以归纳整理：按年月分类，让用户了解每个时期公司的发展和变化。
三、开发工具选择
公司网站设计中，包含首页、关于微创、最高荣誉、人才招聘、主营项目、联系我们等模块的功能，让用户了解公司的概括，公司最近的新闻，公司的主要项目以及公司的职位招聘方面的内容。在微创近一年的实习生活中，结合公司网站建设的需求，因此设计了微创软件公司的静态网站。
建立网站很重要的一部分就是选择开发工具。本网站使用的工具是Dreamweaver、Photoshop、Flash和记事本，通过Dreaweaver简单易操作来制作网页，使用Photoshop工具对图片进行基本的处理（背景透明），利用Flash来制作简单的JavaScript特效。这几个软件中最重要的当属Dreamweaver软件了，它是建立Web站点和应用程序的专业工具，可视布局工具、应用程序开发功能和代码编辑支持被它组合得功能强大，让不同层次的开发人员和设计人员可以迅速创建足以吸引人眼球的界面并且基于标准站点和应用程序。从对基于CSS的设计领先支持到手工编辑功能的转换，专业人员在一个集成、高效的环境中所需的工具正是Dreamweaver所提供的。开发人员可以搭配使用服务器技术和Dreamweaver，来实现功能强大的连接数据库、Web服务和旧式系统的Internet应用程序。所以，选择合适的开发工具对网站建设尤为重要。
四、主体设计
（一）网站开发流程
1.功能结构图绘制
本网站包括首页、关于微创、最高荣誉、人才招聘、主营项目、联系我们六大版块，每个版块都会有详细的排版，有文字介绍和图片穿插供大家浏览。
具体结构图如下图4-1所示：
图4-1网站详细结构图
首页是用户第一眼看到网站的状态，是网站建设的开端，网站的首页力求给用户一目了然的感觉，图片区域的幻灯片效果希望给用户展示公司的面貌，公告版块是关于和员工的互动：员工通过微信畅谈2015年在微创软件的感受，我们将抽取5名幸运观众赠送礼品——精美电子健康秤一份。接下来是公司的新闻中心，主要包含了公司近期的一些热点新闻供用户浏览。最后就是公司的地址和联系方式。
2.界面设计
运用了DIV+CSS网页布局方式，加入HTML代码将公司网站的整体框架展现出来。第一步是使用Photoshop软件将首页的基本框架设计出来。首页的具体框架如下图4-2所示：
logo
导航
动态图片
公司公告
新闻动态
联系我们
版权
图4-2首页布局框架图 首页布局主要是以内容丰富为准则，吸引用户继续浏览网站的更多页面。三大版块包含logo和导航区、网站主体区（动态图片和新闻中心）以及版权区。首页上放置公司的最近新闻，可以让用户进一步了解公司的动态，Logo下方的幻灯片效果的图片可供用户欣赏。
子页框架如下图4-3所示
logo
导航
公司图片
二级导航
主要内容
版权
图4-3子页布局框架图
子页的布局就没有首页看起来那么丰富了，相对而言比较简单，Head依然是Logo和导航条；PageBody是网站的主要内容，包含了公司图片、二级导航和主要文字介绍；Foot是网站的版权区，二级导航是微创风云、公告通知、员工福利和微创荣誉。
一、引言 1
二、需求分析 1
三、开发工具选择 2
四、主体设计 2
（一）网站开发流程 2
1.功能结构图绘制 2
2.界面设计 3
3.DIV+CSS布局 4
4.首页div结构和层样式 5
（二） 网站基本功能 6
1.首页 6
2.关于微创 7
3.最高荣誉 8
4.人才招聘 9
5.主营项目 10
6.联系我们 11
7.新闻子页 11
8.其他子页 12
（三）JavaScript特效 13
1.幻灯片播放效果 13
2.图片放大效果 15
五、总结 16
致谢 17
参考文献 17
附录 18
一、引言
由于表格布局仍然存在不少局限性，随着网络技术的发展，表格布局已然退出历史舞台，DIV+CSS网站布局的方式应运而生，这种布局方式拥有多个优势：提高了页面加载速度、减少了设计人员的工作量、容易被多种浏览器访问。
互联网是文字、图片、声像的载体，不同于其他的广告媒介——电视、报纸、杂志，互联网可以让用户更加方便快捷的浏览公司的产品、广告和新闻。网络宣传和电视宣传、报刊杂志宣传相比，不但降低了成本，同时也大大提高了时间的利用率。我们公司是一家外包公司，客户市场当然遍及世界各个角落，网络宣传让我们获得更加广阔的客户市场以及更加丰富的资源。建设公司网站后，在网络的平台上，公司在人才招聘这方面可以有更多的选择，应聘者了解了公司的用人需求，有选择性的应聘，减去了人事行政部门的不 *好棒文|www.hbsrm.com +Q: 3 5 1 9 1 6 0 7 2
必要工作，提升了员工的工作热忱度。电脑的普及、全球网民人数的增长，让公司的网站建设已经成为互联网时代的一种趋势。
二、需求分析
企业建设的网站，可以让用户方便清楚的看到企业的介绍、企业文化、发展历程产品服务以及联系方式，网站给用户一目了然的效果，进而在用户心中树立一种良好的企业形象，为企业日后的口碑和发展打下良好的基础。
企业网站的基本功能是，全方位、多层次地介绍公司以及公司的产品，公司可以把公司的奖项荣誉、公司业绩、公司新的动态等放在网上供用户浏览，宣传企业文化。
很多求职者在网上投递简历之前，都会使用搜素引擎搜素该公司的资料，如果公司有网站，他们一定会习惯性的点击公司的网站，浏览公司主要经营的项目、服务以及发布的最新的公司消息。大致了解完公司之后，他们才会决定是否向该公司投递简历。公司网站无疑也在求职者应聘方面起到了一定的参考作用。
互联网是一个商机无限的大平台，很多大的采购商考虑到预算的限制，都是通过互联网采购新产品、寻找新的供应商，如果公司建立自己的网站，不但给公司带来了新的客户、新的资源，也大大提升了公司在其他同类公司中的知名度和影响力。
网站的信息量非常多，方式也非常丰富（包含图片、文字、动态效果等等），同时信息可以不断更新，企业可以经常更新公司的新闻动态和发布最新的消息，公司的新闻可以归纳整理：按年月分类，让用户了解每个时期公司的发展和变化。
三、开发工具选择
公司网站设计中，包含首页、关于微创、最高荣誉、人才招聘、主营项目、联系我们等模块的功能，让用户了解公司的概括，公司最近的新闻，公司的主要项目以及公司的职位招聘方面的内容。在微创近一年的实习生活中，结合公司网站建设的需求，因此设计了微创软件公司的静态网站。
建立网站很重要的一部分就是选择开发工具。本网站使用的工具是Dreamweaver、Photoshop、Flash和记事本，通过Dreaweaver简单易操作来制作网页，使用Photoshop工具对图片进行基本的处理（背景透明），利用Flash来制作简单的JavaScript特效。这几个软件中最重要的当属Dreamweaver软件了，它是建立Web站点和应用程序的专业工具，可视布局工具、应用程序开发功能和代码编辑支持被它组合得功能强大，让不同层次的开发人员和设计人员可以迅速创建足以吸引人眼球的界面并且基于标准站点和应用程序。从对基于CSS的设计领先支持到手工编辑功能的转换，专业人员在一个集成、高效的环境中所需的工具正是Dreamweaver所提供的。开发人员可以搭配使用服务器技术和Dreamweaver，来实现功能强大的连接数据库、Web服务和旧式系统的Internet应用程序。所以，选择合适的开发工具对网站建设尤为重要。
四、主体设计
（一）网站开发流程
1.功能结构图绘制
本网站包括首页、关于微创、最高荣誉、人才招聘、主营项目、联系我们六大版块，每个版块都会有详细的排版，有文字介绍和图片穿插供大家浏览。
具体结构图如下图4-1所示：
图4-1网站详细结构图
首页是用户第一眼看到网站的状态，是网站建设的开端，网站的首页力求给用户一目了然的感觉，图片区域的幻灯片效果希望给用户展示公司的面貌，公告版块是关于和员工的互动：员工通过微信畅谈2015年在微创软件的感受，我们将抽取5名幸运观众赠送礼品——精美电子健康秤一份。接下来是公司的新闻中心，主要包含了公司近期的一些热点新闻供用户浏览。最后就是公司的地址和联系方式。
2.界面设计
运用了DIV+CSS网页布局方式，加入HTML代码将公司网站的整体框架展现出来。第一步是使用Photoshop软件将首页的基本框架设计出来。首页的具体框架如下图4-2所示：
logo
导航
动态图片
公司公告
新闻动态
联系我们
版权
图4-2首页布局框架图 首页布局主要是以内容丰富为准则，吸引用户继续浏览网站的更多页面。三大版块包含logo和导航区、网站主体区（动态图片和新闻中心）以及版权区。首页上放置公司的最近新闻，可以让用户进一步了解公司的动态，Logo下方的幻灯片效果的图片可供用户欣赏。
子页框架如下图4-3所示
logo
导航
公司图片
二级导航
主要内容
版权
图4-3子页布局框架图
子页的布局就没有首页看起来那么丰富了，相对而言比较简单，Head依然是Logo和导航条；PageBody是网站的主要内容，包含了公司图片、二级导航和主要文字介绍；Foot是网站的版权区，二级导航是微创风云、公告通知、员工福利和微创荣誉。
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/rjgc/1870.html
