晨光科技网站建设
本文以苏州晨光科技公司为主题制作网站，网站的建设通过查找资料完成初步布局，使用Photoshop、HTML5和CSS3等实现网页内容。网站主要以宣传晨光科技为目的，让更多的人对苏州晨光科技有全面了解，同时提升了公司在互联网平台的知名度，企业会有更好的发展空间。本网站主要包括公司简介，基本服务，网站定制，网站案例等内容，最终完成的网站兼容主流浏览器，网站简洁美观，内容完整，更加吸引人的注意力。企业通过网络快速建立与客户沟通的渠道，更好的宣传自己。
目录
一、引言 1
二、网站需求分析 1
（一）网站需求 1
（二）可行性分析 1
1.网络营销 1
2.通过网络营销优点 1
三、网站整体规划 1
（一）总体设计 1
1.结构导航图绘制 1
2.网站布局 2
3.LOGO设计 3
4.导航设计 3
5.首页DIV布局结构 3
四、网站实现 5
（一）首页页面实现 5
（二）“网站”页面实现 7
（三）“推广”页面实现 8
（四）“优化”页面实现 8
（五）“400电话”页面实现 9
（六）“作品”页面实现 10
（七）“关于晨光”页面实现 11
五、网页特效设计实现 12
（一）网站首页图片轮转设计 12
（二）回到顶部设计 13
（三）鼠标点击出现特效设计 14
六、总结 15
致谢 16
参考文献 16
引言
随着中国经济的发展进步，处在这个信息化飞速发展的时代，企业想要用更多的渠道展示企业文化、产品。随着网络发展，人们越来越依赖网络，网络营销已变成一种畅销方式，越来越多的企业想要建立一个自我宣传性的平台来提高自己的知名度。
本文以苏州晨光科技公司为主题，网站的建设通过查找资料完成初步布局，使用Photoshop完成图片合成变形效果，通过HTML5和CSS3实现网页内容。网站照目前互联网的现状，以宣传晨光科技企业产品，打造企业品
*好棒文|www.hbsrm.com +Q: %3^5`1^9`1^6^0`7^2#
牌形象为主体，以行业信息展示为辅助，打造一个属于晨光科技的企业宣传性平台。本网站主要包括公司简介，基本服务，网站定制，网站案例等内容，最终完成的网站兼容主流浏览器，网站简洁美观，内容完整，更加吸引人的注意力。
网站需求分析
网站需求
一个网站或者企业最重要的是给用户有一种信任感。网站主要是为了能工全面而又详细的介绍公司，以及宣传公司的产品，网站可以给企业做推广，不仅可以降低企业的宣传费，还给企业树立更好的形象。
可行性分析
1.网络营销
网络是一种新颖的营销方法，与之前的营销比较有着很大的优势。通过网络的方式传输是没有时间限制的，它的传播速度也是非常快的，可以详细的介绍企业的相关内容，而且还可以迅速反馈、和企业客户采用一种新型的交流方式，这样对企业有很大的利益。
2.通过网络营销优点
首先，通过网络交流，这样全面而又双向的沟通渠道，有利于企业实现营销全程目标。其次，想要采购成本的降低也可以通过网络方式。最后，采取网络的手段，可以降低一些促销成本，帮助企业增加销售，在市场上也有一定的比重。
三、网站整体规划
（一）总体设计
1.结构导航图绘制
网站分三级，分别为首页、栏目页和内容页。整个网站划分出六个栏目，分别为网站设计、推广、优化、400电话、作品和关于晨光。每个栏目都有精细设计过，利用文字加图片的效果，供浏览者欣赏，详细设计如图31所示：
图31 网站整体规划
2.网站布局
网站首页采用三字型的网站布局格式，比较简单。头部导航采用横放的形式，中间部分包括网站介绍、公司知识、主要案例方面，让客户对公司有一个基本的了解。首页设计布局如图32所示：
logo
导航
网站介绍
公司知识
案例
案例作品
合作伙伴
版权
图32 首页设计布局
网站子页和首页一样也是采用三字型的布局格式，头部包括logo、电话、导航；中间部分是主要内容；尾部包括合作伙伴和版权。二级导航是相关的知识，内容部分以图片加文字的形式展现出现，浏览起来更方便，子页设计布局如图33所示：
logo
电话
导航
导航图片
二级
导航
内容
合作
版权
图33 子页设计布局
LOGO设计
网站logo用了一个太阳的标示和晨字的全拼，简单明了的表述了公司的名称，发光的太阳寓意着公司蓬勃向上的发展，晨光科技用了渐变的淡黄色，和太阳的标示相辉映，具体如图34所示：
图34 LOGO设计
导航设计
本网站导航采用UL横向排列的方式，运用CSS实现导航效果，并在导航加入背景图片，以树叶和淡黄色做为背景色，和网站LOGO相呼应。在鼠标移动到文字上时会出现一个黄色的背景图片，文字也会变成黄色，具体如图35所示：
图35 导航设计
5.首页DIV布局结构
通过查询一些网站方面的资料，做一些前期准备后，开始进行网站的制作，本网站主要采用DIV+CSS3的布局方式，将网站的文字做到想要的效果，使网站有更多的样式，网站的样式也可以多次使用，不会出现代码冗余的现象。通过HTML5的设计呈现出网站的基本框架，本网站的div结构采用层叠的布局，具体如图36所示：
图36 首页DIV布局结构
首页DIV结构如下：
目录
一、引言 1
二、网站需求分析 1
（一）网站需求 1
（二）可行性分析 1
1.网络营销 1
2.通过网络营销优点 1
三、网站整体规划 1
（一）总体设计 1
1.结构导航图绘制 1
2.网站布局 2
3.LOGO设计 3
4.导航设计 3
5.首页DIV布局结构 3
四、网站实现 5
（一）首页页面实现 5
（二）“网站”页面实现 7
（三）“推广”页面实现 8
（四）“优化”页面实现 8
（五）“400电话”页面实现 9
（六）“作品”页面实现 10
（七）“关于晨光”页面实现 11
五、网页特效设计实现 12
（一）网站首页图片轮转设计 12
（二）回到顶部设计 13
（三）鼠标点击出现特效设计 14
六、总结 15
致谢 16
参考文献 16
引言
随着中国经济的发展进步，处在这个信息化飞速发展的时代，企业想要用更多的渠道展示企业文化、产品。随着网络发展，人们越来越依赖网络，网络营销已变成一种畅销方式，越来越多的企业想要建立一个自我宣传性的平台来提高自己的知名度。
本文以苏州晨光科技公司为主题，网站的建设通过查找资料完成初步布局，使用Photoshop完成图片合成变形效果，通过HTML5和CSS3实现网页内容。网站照目前互联网的现状，以宣传晨光科技企业产品，打造企业品
*好棒文|www.hbsrm.com +Q: %3^5`1^9`1^6^0`7^2#
牌形象为主体，以行业信息展示为辅助，打造一个属于晨光科技的企业宣传性平台。本网站主要包括公司简介，基本服务，网站定制，网站案例等内容，最终完成的网站兼容主流浏览器，网站简洁美观，内容完整，更加吸引人的注意力。
网站需求分析
网站需求
一个网站或者企业最重要的是给用户有一种信任感。网站主要是为了能工全面而又详细的介绍公司，以及宣传公司的产品，网站可以给企业做推广，不仅可以降低企业的宣传费，还给企业树立更好的形象。
可行性分析
1.网络营销
网络是一种新颖的营销方法，与之前的营销比较有着很大的优势。通过网络的方式传输是没有时间限制的，它的传播速度也是非常快的，可以详细的介绍企业的相关内容，而且还可以迅速反馈、和企业客户采用一种新型的交流方式，这样对企业有很大的利益。
2.通过网络营销优点
首先，通过网络交流，这样全面而又双向的沟通渠道，有利于企业实现营销全程目标。其次，想要采购成本的降低也可以通过网络方式。最后，采取网络的手段，可以降低一些促销成本，帮助企业增加销售，在市场上也有一定的比重。
三、网站整体规划
（一）总体设计
1.结构导航图绘制
网站分三级，分别为首页、栏目页和内容页。整个网站划分出六个栏目，分别为网站设计、推广、优化、400电话、作品和关于晨光。每个栏目都有精细设计过，利用文字加图片的效果，供浏览者欣赏，详细设计如图31所示：
图31 网站整体规划
2.网站布局
网站首页采用三字型的网站布局格式，比较简单。头部导航采用横放的形式，中间部分包括网站介绍、公司知识、主要案例方面，让客户对公司有一个基本的了解。首页设计布局如图32所示：
logo
导航
网站介绍
公司知识
案例
案例作品
合作伙伴
版权
图32 首页设计布局
网站子页和首页一样也是采用三字型的布局格式，头部包括logo、电话、导航；中间部分是主要内容；尾部包括合作伙伴和版权。二级导航是相关的知识，内容部分以图片加文字的形式展现出现，浏览起来更方便，子页设计布局如图33所示：
logo
电话
导航
导航图片
二级
导航
内容
合作
版权
图33 子页设计布局
LOGO设计
网站logo用了一个太阳的标示和晨字的全拼，简单明了的表述了公司的名称，发光的太阳寓意着公司蓬勃向上的发展，晨光科技用了渐变的淡黄色，和太阳的标示相辉映，具体如图34所示：
图34 LOGO设计
导航设计
本网站导航采用UL横向排列的方式，运用CSS实现导航效果，并在导航加入背景图片，以树叶和淡黄色做为背景色，和网站LOGO相呼应。在鼠标移动到文字上时会出现一个黄色的背景图片，文字也会变成黄色，具体如图35所示：
图35 导航设计
5.首页DIV布局结构
通过查询一些网站方面的资料，做一些前期准备后，开始进行网站的制作，本网站主要采用DIV+CSS3的布局方式，将网站的文字做到想要的效果，使网站有更多的样式，网站的样式也可以多次使用，不会出现代码冗余的现象。通过HTML5的设计呈现出网站的基本框架，本网站的div结构采用层叠的布局，具体如图36所示：
图36 首页DIV布局结构
首页DIV结构如下：
