欣兴同泰科技有限公司网站建设
目 录
一、引言 1
（一）开发背景 1
（二）Bootstrap框架介绍 1
（三）工具介绍 1
1. Photoshop 1
2. Sublime Text 1
二、网站内容结构 1
三、页面的具体设计 2
（一）LOGO设计 2
（二）首页设计 2
（三）子页设计 4
（四）产品展示子页设计 5
（五）新闻动态子页设计 6
（六）客户留言子页设计 7
四、页面的具体实现 7
（一）DIV+CSS布局 7
（二）首页实现 7
（三）子页实现 8
五、页面特效 9
（一）图片轮播特效 10
（二）图片整齐排列效果 10
（三）Bootstrap导航效果 10
六、网站测试 11
七、总结 12
致谢 13
参考文献 14
附录 15
一、引言
（一）开发背景
本网站基于DIV+CSS为开发工具，结合Photoshop cs4、HTML、CSS、Sublime Text、bootstrap等技术，以Windows 7为运行环境。主要针对欣兴同泰科技有限公司的实际需求，制作出符合该公司的企业网站，客户可以通过此网站及时了解企业及其产品的情况，更加方便与其合作。本网站使用HTML+CSS设计制作页面效果，使用JavaScript制作了网站特效，来实现网站的设计。
（二）Bootstrap框架介绍
Bootstrap是由Twitter的设计师Mark Otto和Jacob Thornton合作开发的一个开源的用于前端开发的工具包，是一个CSS/HTML框架。它自带了一系列漂亮的CSS格式，是用于排版、表格、表单、按钮、图片等web页面设计中常用的元素。Bootstrap优先于移动设备，融合了其样式，通过简单的编码就可以实现漂亮的响应式布局。
（三）工具介绍
1. Photoshop
*好棒文|www.hbsrm.com +Q: ￥351916072￥
r的设计师Mark Otto和Jacob Thornton合作开发的一个开源的用于前端开发的工具包，是一个CSS/HTML框架。它自带了一系列漂亮的CSS格式，是用于排版、表格、表单、按钮、图片等web页面设计中常用的元素。Bootstrap优先于移动设备，融合了其样式，通过简单的编码就可以实现漂亮的响应式布局。
（三）工具介绍
1. Photoshop
Adobe Photoshop，是Adobe公司开发和发行的一种图像处理软件，简称“PS”。它的作用是对于以像素所构成的数字图像进行。使用Photoshop软件中的绘图，编辑工具，可以高效的处理图片，或者批量处理图片。
2. Sublime Text
Sublime Text 不仅是一个代码编辑器,也是HTML和散文先进的文本编辑器。它拥有漂亮的用户界面和非凡的功能，例如迷你地图，多选择，Python的插件，代码段，等等。完全可以自定义键绑定，菜单和工具栏。Sublime Text的主要功能包括：拼写检查，书签，完整的 Python API 、Goto 功能，可即时项目切换，多选择，多窗口等等。
二、网站内容结构
首页中主要使用了一个图片自动切换的效果，自动切换主要展示的是公司的产品、工作环境、住宿环境等。主要内容包括最新消息、全系列产品、技术研发、品质保证，点击全系列产品的任意产品，可以具体了解该产品；最新消息、技术研发右侧有个more的链接，可以获取更多信息。下侧包括关于我们、合作伙伴，可以登录微博来关注我们公司。底部设有导航版权信息、地址、电话。联系我们页面有公司地址、联系方式等，增加了与网友们的一种互动，也是一种对网站做得更好的一种期待，网友也可以对不满意的地方进行反馈。网站内容结构图如图2-1所示。
2-1 网站内容结构图
三、页面的具体设计
（一）LOGO设计
网站的LOGO设计使用了Photoshop软件，使用了一个圆形图，里面嵌入了代表产品的小图标，然后在旁边写上公司名称“欣兴同泰科技”以及网址，使logo更加一目了然。 LOGO效果图如图3-1所示。
图3-1 首页LOGO效果图
（二）首页设计
首先，首页左上方是本网站的LOGO，“欣兴同泰科技”，选用了透明图层，右上方是设为主页、加入收藏、在线申请三个功能，导航使用了ul>li来实现，导航下面是一个轮播效果图，运用了JavaScript脚本。主要内容包括全系列产品、最新消息、产品优势、品质保证、关注我们、合作伙伴，最底部是副导航、版权信息。
不仅如此，为了更加方便用户的体验感受，为 LOGO也做了主页的链接，如果想要回到首页的时候，只需要单击一下欣兴同泰科技的LOGO也可以回到首页。首页布局图如图3-2所示。
LOGO
设为主页 加入收藏 在线申请
导航
全系列产品
最新消息
品质保证（图片）
技术研发
关注我们
合作伙伴
返回导航
版权信息
图3-2 首页布局图
在每个页面的顶端都有一个滚动字幕：“欢迎进入欣兴同泰科技有限公司！”。而下面就是导航条，它是通过ul无序列表做成的。在导航条下方是一个使用JavaScript脚本制作的一个图片轮播效果。如图3-3所示。
图3-3 滚动字幕以及图片轮播效果
在主要内容中，最新消息部分使用了ul无序列表来完成，而每个内容的小图标都是通过CSS中background：url来设置的，在全系列产品、最新消息、技术发展、品质保证的右下角，都有一个小链接，它可以链接到该网页。
一、引言 1
（一）开发背景 1
（二）Bootstrap框架介绍 1
（三）工具介绍 1
1. Photoshop 1
2. Sublime Text 1
二、网站内容结构 1
三、页面的具体设计 2
（一）LOGO设计 2
（二）首页设计 2
（三）子页设计 4
（四）产品展示子页设计 5
（五）新闻动态子页设计 6
（六）客户留言子页设计 7
四、页面的具体实现 7
（一）DIV+CSS布局 7
（二）首页实现 7
（三）子页实现 8
五、页面特效 9
（一）图片轮播特效 10
（二）图片整齐排列效果 10
（三）Bootstrap导航效果 10
六、网站测试 11
七、总结 12
致谢 13
参考文献 14
附录 15
一、引言
（一）开发背景
本网站基于DIV+CSS为开发工具，结合Photoshop cs4、HTML、CSS、Sublime Text、bootstrap等技术，以Windows 7为运行环境。主要针对欣兴同泰科技有限公司的实际需求，制作出符合该公司的企业网站，客户可以通过此网站及时了解企业及其产品的情况，更加方便与其合作。本网站使用HTML+CSS设计制作页面效果，使用JavaScript制作了网站特效，来实现网站的设计。
（二）Bootstrap框架介绍
Bootstrap是由Twitter的设计师Mark Otto和Jacob Thornton合作开发的一个开源的用于前端开发的工具包，是一个CSS/HTML框架。它自带了一系列漂亮的CSS格式，是用于排版、表格、表单、按钮、图片等web页面设计中常用的元素。Bootstrap优先于移动设备，融合了其样式，通过简单的编码就可以实现漂亮的响应式布局。
（三）工具介绍
1. Photoshop
*好棒文|www.hbsrm.com +Q: ￥351916072￥
r的设计师Mark Otto和Jacob Thornton合作开发的一个开源的用于前端开发的工具包，是一个CSS/HTML框架。它自带了一系列漂亮的CSS格式，是用于排版、表格、表单、按钮、图片等web页面设计中常用的元素。Bootstrap优先于移动设备，融合了其样式，通过简单的编码就可以实现漂亮的响应式布局。
（三）工具介绍
1. Photoshop
Adobe Photoshop，是Adobe公司开发和发行的一种图像处理软件，简称“PS”。它的作用是对于以像素所构成的数字图像进行。使用Photoshop软件中的绘图，编辑工具，可以高效的处理图片，或者批量处理图片。
2. Sublime Text
Sublime Text 不仅是一个代码编辑器,也是HTML和散文先进的文本编辑器。它拥有漂亮的用户界面和非凡的功能，例如迷你地图，多选择，Python的插件，代码段，等等。完全可以自定义键绑定，菜单和工具栏。Sublime Text的主要功能包括：拼写检查，书签，完整的 Python API 、Goto 功能，可即时项目切换，多选择，多窗口等等。
二、网站内容结构
首页中主要使用了一个图片自动切换的效果，自动切换主要展示的是公司的产品、工作环境、住宿环境等。主要内容包括最新消息、全系列产品、技术研发、品质保证，点击全系列产品的任意产品，可以具体了解该产品；最新消息、技术研发右侧有个more的链接，可以获取更多信息。下侧包括关于我们、合作伙伴，可以登录微博来关注我们公司。底部设有导航版权信息、地址、电话。联系我们页面有公司地址、联系方式等，增加了与网友们的一种互动，也是一种对网站做得更好的一种期待，网友也可以对不满意的地方进行反馈。网站内容结构图如图2-1所示。
2-1 网站内容结构图
三、页面的具体设计
（一）LOGO设计
网站的LOGO设计使用了Photoshop软件，使用了一个圆形图，里面嵌入了代表产品的小图标，然后在旁边写上公司名称“欣兴同泰科技”以及网址，使logo更加一目了然。 LOGO效果图如图3-1所示。
图3-1 首页LOGO效果图
（二）首页设计
首先，首页左上方是本网站的LOGO，“欣兴同泰科技”，选用了透明图层，右上方是设为主页、加入收藏、在线申请三个功能，导航使用了ul>li来实现，导航下面是一个轮播效果图，运用了JavaScript脚本。主要内容包括全系列产品、最新消息、产品优势、品质保证、关注我们、合作伙伴，最底部是副导航、版权信息。
不仅如此，为了更加方便用户的体验感受，为 LOGO也做了主页的链接，如果想要回到首页的时候，只需要单击一下欣兴同泰科技的LOGO也可以回到首页。首页布局图如图3-2所示。
LOGO
设为主页 加入收藏 在线申请
导航
全系列产品
最新消息
品质保证（图片）
技术研发
关注我们
合作伙伴
返回导航
版权信息
图3-2 首页布局图
在每个页面的顶端都有一个滚动字幕：“欢迎进入欣兴同泰科技有限公司！”。而下面就是导航条，它是通过ul无序列表做成的。在导航条下方是一个使用JavaScript脚本制作的一个图片轮播效果。如图3-3所示。
图3-3 滚动字幕以及图片轮播效果
在主要内容中，最新消息部分使用了ul无序列表来完成，而每个内容的小图标都是通过CSS中background：url来设置的，在全系列产品、最新消息、技术发展、品质保证的右下角，都有一个小链接，它可以链接到该网页。
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/jsjkxyjs/2486.html
