目 录
一、引言 1
（一）开发背景 1
（二）工具介绍 1
1.Photoshop 1
2. Sublime Text3 1
二、网站内容结构 1
三、页面的具体设计 2
（一）LOGO设计 2
（二）首页设计 2
（三）子页设计 4
四、页面的具体实现 9
（一）DIV+CSS布局 9
（二）首页的实现 9
（三）子页的实现 10
五、页面特效的实现 10
（一）图片切换效果 10
（二）图片由小变大的效果 11
六、网站测试 11
七、总结 12
参考文献 14
附录 15
一、引言
（一）开发背景
本课题在制作的过程主要包括整理整个网站的资料，完成网站中图形图像的加工和创作，设计页面的版式和布局，并且使用了HTML5、CSS3、将设计的效果图以网页形式展现。制作此网站的目的是建立徐州赛通重工机械有限公司的新形象，便于开拓国际市场，可以更加方便的开展网上营销，使本企业的宣传变得更加便捷，给人以耳目一新的感觉。与客户建立的直接交流机制，缩短了新产品推出的周期，加强了本公司的客户服务。最终完成的网站：内容完整，色彩搭配协调，页面美观，浏览器兼容，符合WEB标准的原创实用型网站。
（二）工具介绍
1.Photoshop
Photoshop，这个进行图像处理的软件是由Adobe公司进行开发和发行的，它被简称为“PS”。它的主要作用就是处理以像素所构成的数字图像。使用Photoshop软件中的绘图，编辑工具，可以更加高效的处理想要的图片，也可以进行图片大批量的处理。
2. Sublime Text3
此工具选择需要注释的代码，多行或单行都很随意，使用”Ctrl+/”，或“Ctrl+Shft+/”即可快速注释。注释了再同样按一下即可接触注释。按住”Ctrl+F”快捷键，即可进行快速搜索，它的定位很迅速。它右侧可以看到整个代码的缩略图，点击相应的区域即可快速定位到了，非
 *景先生毕设|www.jxszl.com +Q: 3 5 1 9 1 6 0 7 2 
辑工具，可以更加高效的处理想要的图片，也可以进行图片大批量的处理。
2. Sublime Text3
此工具选择需要注释的代码，多行或单行都很随意，使用”Ctrl+/”，或“Ctrl+Shft+/”即可快速注释。注释了再同样按一下即可接触注释。按住”Ctrl+F”快捷键，即可进行快速搜索，它的定位很迅速。它右侧可以看到整个代码的缩略图，点击相应的区域即可快速定位到了，非常方便。Ctrl+P快捷键可以快速打开文件，输入文件名称即可切换打开，Ctrl+P快捷键可以快速的切换到相应的文件，选择自己的工程，可以打开整个工程，便于查看所有文件，方便修改。
二、网站内容结构
在整个网站的首页中使用了一个自动切换图片的效果，这样就方便了浏览者了解徐州赛通重工机械的代表的产品，自动切换的大图更使得浏览者眼前一亮，方便并吸引着广大的客户来进行更一步的浏览。导航条可以链接到重工机械公司的关于我们、新闻中心、产品展示、施工案例等子页，关于我们介绍了徐州赛通重工机械有限公司的概述、荣誉、科研技术、文化。新闻中心介绍了徐州赛通重工机械有限公司的新闻动态和专题报道，从其中可以了解到其公司重工机械的更新换代及其技术创新，从而吸引更多的客户。产品展示主要是介绍了徐州赛通重工机械有限公司的一些具有代表性的重工机械及其性能，可以让客户更加具体的了解到机械的作用，方便他们购买公司的产品。施工案例则主要包括图文展示和视频中心。其中图文展示可以更加充分、具体的介绍本公司的产品，而视频中心可以更加形象、灵活的展现产品的组织结构及其工作性能。网站主要内容结构图如图2-1所示。

图2-1 网站主要内容结构图
三、页面的具体设计
（一）LOGO设计
本网站的LOGO基本是使用的Photoshop软件的内阴影、渐变等技术来完成的，选用一个圆形带有五角星球图做标志，主要是希望此公司的产品可以在全球得到五星级的好评；其次再把公司的名称和此图合而为一，是为了能够让客户对此公司一目了然，公司名称设置成立体的更能使整个LOGO看起来比较大气，给人一种庄重、典雅的感觉，从而吸引更多的客户对公司进行下一步的了解。
LOGO效果图如图3-1所示：


图3-1 首页LOGO效果图
（二）首页设计
此网站的LOGO在整个网页的左上方，"徐州赛通重工机械有限公司"，用一个带有五角星的圆球作为标志，其中公司全称内阴影、渐变等技术，这样使整个logo显得比较大气、深沉，从而使得整个网页更具有立体感，吸引更多的浏览者进行进一步的了解。整个logo基本是利用Photoshop软件的内阴影、渐变技术来完成的。除此之外，为了方便客户更加充分的了解徐州赛通重工机械有限公司的产品，特地的在首页设置了图片轮转。在主内容下面还设置了一个副导航，目的是为了方便客户对本公司产品的进一步便捷的了解。最下面则是公司的版权信息。整个首页背景大气，深沉，很有韵味。首页布局图如图3-2所示。
Logo
站内搜索

导航条

图片轮转
主营产品

精品推荐
最新动态
技术支持
联系我们

副导航

版权

图3-2 首页布局图
为了使整个网站的看起来更加的齐全，更有一种想要继续浏览下去的欲望，也为了使整个网站的功能看起来更加齐全，更加方便客户快速的寻找想要寻找的重工机械，所以就在LOGO的右侧添加了站内搜索这个功能，这个功能使用了option如图3-3所示。代码详见附录1。


图3-3 站内搜索效果图
导航条则紧贴LOGO的下面，导航条的设置就是为了方便让浏览者清晰的看出，宣扬徐州赛通重工机械有限公司的重工机械以及此公司的所配备的一系列的服务，是这个网站的首要目的。除此之外，主导航还有公司发展的简单介绍、发生的新闻事件、重工机械的施工案例以及本公司的人力方面的需求。在版权的上方有副导航，副导航主要是为了客户更加清晰、更加方便的进行对公司产品的全方位的了解以及一些订购表单的填写。
在主导航条的下方是一个使用JavaScript制作的一个图片轮转。在它的旁边是一个用Photoshop软件做的主营产品的一个表单，整个表单看上去大气，更加方便浏览者浏览本公司产
原文链接：http://www.jxszl.com/jsj/jsjkxyjs/33904.html