诚亿电子(嘉兴)有限公司网站建设毕业设计说明书
目录
一、引言 1
（一）开发背景 1
（二）工具介绍 1
二、网站内容结构 1
三、网站设计 2
（一）LOGO设计 2
（二）首页布局设计 2
（三）子页布局设计 3
四、 DIV+CSS布局 3
五、网站实现 6
（一）首页的实现 6
（二）子页的实现 8
六、页面特效的实现 11
（一）图片切换效果 11
（二）图片轮播效果 12
（三）导航特效 13
七、总结 14
致谢 15
参考文献 15
一、引言
（一）开发背景
本网站主要是从诚亿电子（嘉兴）有限公司的公司背景、主营产品及公司文化等方面来介绍的，其目的是为了增加这家公司的网络宣传力度，让更多也为了让更多的人了解他的基本情况，以此带来更多商机与合作机会。本网站的制作主要使用Dreamweaver8实现网页效果，图片轮转特效采用了JavaScript。
（二）工具介绍
光影魔术手：图像处理软件，可用于改变图像大小、抠图、拼图及添加水印等功能。
Photoshop:简称“PS”，是一种处理以像素构成的数字图像处理软件，可以用于网站界面设计，还可以作为图片编辑工具。
Dreamweaver:建立在Web站点和应用程序的工具，具有灵活、可视化、多功能、跨浏览器验证、集成特性、媒体支持能力、超强拓展能力等功能，是网站设计、开发、制作的好帮手。
二、网站内容结构
网站的内容结构共设计有三级页面，一级页面为首页：内容头部有LOGO、服务热线；中部有导航条（关于我们、产品展示、人力资源、新闻中心、联系我们）,图片轮转的布局,产品介绍及图片轮播效果，公司简介及企业实力；中下部是新闻资讯及联系方式，尾部是公司的地址及版权所有。二级页面为首页的导航条具体介绍。三级页面主要有关于公司详细介绍和企业文化等方面，主营产品的具体分类，人力资源管理的情况及最新资讯的动态。网站内容结构如图2-1所示：
*好棒文|www.hbsrm.com +Q: 3 5 1 9 1 6 0 7 2
OGO、服务热线；中部有导航条（关于我们、产品展示、人力资源、新闻中心、联系我们）,图片轮转的布局,产品介绍及图片轮播效果，公司简介及企业实力；中下部是新闻资讯及联系方式，尾部是公司的地址及版权所有。二级页面为首页的导航条具体介绍。三级页面主要有关于公司详细介绍和企业文化等方面，主营产品的具体分类，人力资源管理的情况及最新资讯的动态。网站内容结构如图2-1所示：
图2-1 网站内容结构图
三、网站设计
（一）LOGO设计
网站的LOGO是利用Photoshop软件设计的，大写的C小写的y是诚亿的首字母，简明意了地让人记住这个名称，部分字母用与蓝天相近的淡蓝色是为了彰显出公司业务蓬勃向上的寓意。LOGO效果图如图3-1所示：
图3-1 LOGO效果图
（二）首页布局设计
网站首页的布局是国字型。头部左上方是诚亿电子（嘉兴）有限公司的LOGO，头部右下方是服务热线；中间部分又分成五栏：导航条、图片轮转、产品推荐、公司简介及企业荣誉实力；中下部则又为左右两栏（新闻资讯、联系方式），尾部则是这家公司的地址及版权所有，这样的首页布局能给客户带来一种明朗舒适的视觉效果。首页布局如图3-2所示：
LOGO
服务热线
导航条
图片轮转
产品介绍
公司简介
企业实力
新闻资讯
联系我们
地址及版权所有
图3-2 首页布局图
（三）子页布局设计
各二级、三级布局是匡字型。头部左侧是LOGO，右侧是服务热线；头部下方是导航条，banner部分是二级标题图片；中部左侧是三级页面标题，右侧是标题具体内容；底部是地址及版权所有。各二级、三级布局如图3-3所示：
LOGO
服务热线
导航条
二级标题+图片
三级页面标题
标题具体内容
三级页面标题
三级页面标题
地址及版权所有
图3-3 子页布局图
DIV+CSS布局
网站内容设计及网页排版设计完成后，接下来就是运用DIV+CSS层叠样式表来布局整个网页的排版。div是网页的结构，css是网页的表现，两者结合应用能够更方便地调整样式；符合W3C标准；支持浏览器的兼容性；搜索引擎也更加友好。Div相对于一个盒子，可以将绝对定位变为相对定位，能保证在不同浏览器的位置不发生变动，css相当于形式上的美工，可以在其中设置每个盒子（div)层里的宽长度、文字大小、颜色，字体样式等，DIV+CSS的运用在呈现精美的网站的同时也减轻了网站制作者的工作量。首页采用套层式的布局，具体div布局结构如图4-1所示：
box
box-header
box-nav
box-banner
box-main
box-main1
box-main1-left
box-main1-r
ght
box-main2
box-main2-left
box-main2-middle
box-main2-left
box-main3
box-main4
一、引言 1
（一）开发背景 1
（二）工具介绍 1
二、网站内容结构 1
三、网站设计 2
（一）LOGO设计 2
（二）首页布局设计 2
（三）子页布局设计 3
四、 DIV+CSS布局 3
五、网站实现 6
（一）首页的实现 6
（二）子页的实现 8
六、页面特效的实现 11
（一）图片切换效果 11
（二）图片轮播效果 12
（三）导航特效 13
七、总结 14
致谢 15
参考文献 15
一、引言
（一）开发背景
本网站主要是从诚亿电子（嘉兴）有限公司的公司背景、主营产品及公司文化等方面来介绍的，其目的是为了增加这家公司的网络宣传力度，让更多也为了让更多的人了解他的基本情况，以此带来更多商机与合作机会。本网站的制作主要使用Dreamweaver8实现网页效果，图片轮转特效采用了JavaScript。
（二）工具介绍
光影魔术手：图像处理软件，可用于改变图像大小、抠图、拼图及添加水印等功能。
Photoshop:简称“PS”，是一种处理以像素构成的数字图像处理软件，可以用于网站界面设计，还可以作为图片编辑工具。
Dreamweaver:建立在Web站点和应用程序的工具，具有灵活、可视化、多功能、跨浏览器验证、集成特性、媒体支持能力、超强拓展能力等功能，是网站设计、开发、制作的好帮手。
二、网站内容结构
网站的内容结构共设计有三级页面，一级页面为首页：内容头部有LOGO、服务热线；中部有导航条（关于我们、产品展示、人力资源、新闻中心、联系我们）,图片轮转的布局,产品介绍及图片轮播效果，公司简介及企业实力；中下部是新闻资讯及联系方式，尾部是公司的地址及版权所有。二级页面为首页的导航条具体介绍。三级页面主要有关于公司详细介绍和企业文化等方面，主营产品的具体分类，人力资源管理的情况及最新资讯的动态。网站内容结构如图2-1所示：
*好棒文|www.hbsrm.com +Q: 3 5 1 9 1 6 0 7 2
OGO、服务热线；中部有导航条（关于我们、产品展示、人力资源、新闻中心、联系我们）,图片轮转的布局,产品介绍及图片轮播效果，公司简介及企业实力；中下部是新闻资讯及联系方式，尾部是公司的地址及版权所有。二级页面为首页的导航条具体介绍。三级页面主要有关于公司详细介绍和企业文化等方面，主营产品的具体分类，人力资源管理的情况及最新资讯的动态。网站内容结构如图2-1所示：
图2-1 网站内容结构图
三、网站设计
（一）LOGO设计
网站的LOGO是利用Photoshop软件设计的，大写的C小写的y是诚亿的首字母，简明意了地让人记住这个名称，部分字母用与蓝天相近的淡蓝色是为了彰显出公司业务蓬勃向上的寓意。LOGO效果图如图3-1所示：
图3-1 LOGO效果图
（二）首页布局设计
网站首页的布局是国字型。头部左上方是诚亿电子（嘉兴）有限公司的LOGO，头部右下方是服务热线；中间部分又分成五栏：导航条、图片轮转、产品推荐、公司简介及企业荣誉实力；中下部则又为左右两栏（新闻资讯、联系方式），尾部则是这家公司的地址及版权所有，这样的首页布局能给客户带来一种明朗舒适的视觉效果。首页布局如图3-2所示：
LOGO
服务热线
导航条
图片轮转
产品介绍
公司简介
企业实力
新闻资讯
联系我们
地址及版权所有
图3-2 首页布局图
（三）子页布局设计
各二级、三级布局是匡字型。头部左侧是LOGO，右侧是服务热线；头部下方是导航条，banner部分是二级标题图片；中部左侧是三级页面标题，右侧是标题具体内容；底部是地址及版权所有。各二级、三级布局如图3-3所示：
LOGO
服务热线
导航条
二级标题+图片
三级页面标题
标题具体内容
三级页面标题
三级页面标题
地址及版权所有
图3-3 子页布局图
DIV+CSS布局
网站内容设计及网页排版设计完成后，接下来就是运用DIV+CSS层叠样式表来布局整个网页的排版。div是网页的结构，css是网页的表现，两者结合应用能够更方便地调整样式；符合W3C标准；支持浏览器的兼容性；搜索引擎也更加友好。Div相对于一个盒子，可以将绝对定位变为相对定位，能保证在不同浏览器的位置不发生变动，css相当于形式上的美工，可以在其中设置每个盒子（div)层里的宽长度、文字大小、颜色，字体样式等，DIV+CSS的运用在呈现精美的网站的同时也减轻了网站制作者的工作量。首页采用套层式的布局，具体div布局结构如图4-1所示：
box
box-header
box-nav
box-banner
box-main
box-main1
box-main1-left
box-main1-r
ght
box-main2
box-main2-left
box-main2-middle
box-main2-left
box-main3
box-main4
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/jsjkxyjs/2437.html
