基于WEB前端开发技术的网站设计

基于WEB前端开发技术的网站设计
摘要
随着互联网信息技术的广泛应用，互联网作为第四媒体使得全球信息共享成为现实，它正逐步改变人们的生活方式和工作方式。

面对扑面而来的网络浪潮，个人、企业等纷纷建立自己的网站，利用网站来宣传自己，提高知名度，寻找新的商机。

作为企业宣传的媒体之一，网页界面设计的成功与否，更是关系到每一个在网上安家的企业整体认知形象，其重要性并不亚于企业目前所热衷的广告、企业形象识别系统等传播媒介。

网站是企业实施电子商务的载体。

如何建好，管理好自己的网站，已经成为企业电子商务应用成功与否的标志。

本论文主要围企业网站为开发主题，在页面的布局时使用了最基本也是最必须的三个技能：HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript以及jQuery实现相应的效果和交互。

在进行开发前，需要对这些概念弄清楚，这样在开发的过程中才会得心应手。

关键词：前端技术; 网站; JavaScript
ABSTRACT
With the widely application of the Internet information technology, the Internet as the fourth media makes the global information sharing to become a reality, it is gradually changing people's way of life and the way to work. Exhortation wave of network, such as individuals, businesses have set up their own websites, use website to promote themselves, raise awareness, to find new business opportunities. As one of the enterprise propaganda media, the success of web interface design, especially in relation to each home on the Internet enterprise overall cognitive image, its importance is not less than advertising companies are keen on such mass media, the enterprise image recognition system. Website is the carrier of the implementation of e-commerce enterprises. How to build, manage their own websites, has become a sign of success for enterprise electronic commerce application.
The paper around the enterprise web site for the development of the theme, in the layout of the page when using the most basic and most must be three skills: HTML element, CSS fixing the display elements, then through JavaScript and jQuery achieve the corresponding effect and interaction. Before the development, need to understand these concepts, so that in the process of development is handy.
Keywords: Front-end technology; Website; JavaScript
目录
1 前端开发工具及相关技术 (1)
1.1 网站的VI形象 (1)
1.1.1 设计网站logo (1)
1.1.2 设计网站的标准色彩 (1)
1.2 网站的UI设计 (1)
1.3 网站的布局 (1)
2 前端开发工具及相关技术 (2)
2.1 前端开发工具 (2)
2.1.1 Dreamweaver (2)
2.1.2 Photoshop (3)
2.2 前端开发相关技术 (3)
2.2.1 HTML (3)
2.2.2 CSS (3)
2.2.3 JavaScript (4)
2.2.4 Jquery (4)
3 主要功能的实现 (5)
3.1 主页/首页 (5)
3.2 产品展示板块 (7)
3.3 新闻动态板块 (11)
3.4 联系我们、诚聘英才和公司概况板块 (12)
4 优化及调试 (12)
4.1 SEO在网站中的优化应用 (12)
4.1.1 搜索引擎基本工作原理及SEO的作用 (12)
4.1.2 网站结构和代码的优化 (13)
4.2 Firebug在web中的调试 (15)
4.2.1 Firebug简介 (15)
4.2.2 调试 (15)
4.3 各浏览器的兼容问题 (16)
5 总结 (16)
致谢 (18)
参考文献 (19)
1 网站开发概述与网站的规划设计
网站开发就是使用网页设计软件，经过平面设计，网络动画设计，网页排版等步骤，设计出多个页面，这些网页通过一定的逻辑关系的超链接，构成一个网站。

在现今的信息社会中，很多企业事业单位都希望能够建立本单位的网站，以便在网上宣传自己的产品和服务，并与客户方便地交流。

1.1网站的VI形象
VI设计全称是visual identity视觉识别设计，有意义的、有想法的VI设计，对企业的网站的宣传，推广有事倍功半的效果。

所谓VI，就是通过视觉来统一网站的形象。

在网站主题和整体构思确定下来以后，接下来则是思考网站的VI形象。

其实，现实生活中成功的VI策划比比皆是，例如：百事公司使用全球统一的标志、色彩和产品包装，让人的印象深刻万分。

接下来对网站的VI形象的几个重要方面进行介绍：
1.1.1 设计网站logo
网站logo是网站的标志，就如同商标一样，logo是站点特色和内涵的集中体现，看见logo就让大家联想起站点。

现在，网站相当多，要想吸引更多的人访问企业的网站，跟别的网站进行logo链接交换式很有必要的。

也就是说，在其他网站放一个本网站的logo，并可以通过单击该logo链接到本企业的网站。

如果网站的logo比较引人注目，那么久能为网站带来更多的访问量。

1.1.2 设计网站的标准色彩
“标准色彩”是指能体现网站形象和延伸内涵的色彩。

举几个实际的例子就明白了：耐克的白色对钩，肯德基的红色条块，苹果IOS系统视窗右上角标志上的颜色圈圈，这些色彩都使人们联想到他们与对应企业的联系。

网站给人的第一印象来自视觉冲击，所以确定网站的标准色彩是相当重要的一步。

不同的色彩搭配产生不同的效果，并可能影响到网页浏览者的情绪。

网站标准色彩的选择和确定，是由网站的主题和企业自身的特点决定的。

一般来说一个网站的标准色彩不应该超过三种，太多则让人眼花缭乱。

1.2网站的UI设计
UI即用户界面，英文名称为User Interface。

从字面上来理解是用户和界面，其实它的更深一层的意思是用户和界面之间的交互。

随着互联网社会的发展，人们对于网站的要求也越来越高，众多IT企业如百度、搜狐、淘宝、微软等等都已经意识到UI能够带来的效益，成立UI设计的部门，对这方面人才也是很重视。

UI设计包括三个部分：交互设计、用户研究与界面设计。

对于用户来说，最直观的反应就来自于页面设计。

所以，掌握用户界面设计的技巧对开发者来说是很重要的，并且影响着软件在市场中的地位。

1.3网站的布局
版面是指浏览器看到的完整的一个页面（可以包含框架和层）。

布局就是以最适合的方式将图片和文字排放在页面不同的位置。

在进行网页布局之前，必须先确定页面都
有哪些功能模块，一般来说，作为一个网站的首页都要这样的基本内容和模块：网络名称logo、广告条banner、主菜单menu、新闻news、搜索search、友情链接links、邮件列表maillist、计数器connt、版权copyright。

在确定模块后开始设计首页的版面。

首先画出页面的结构草图，这一步不需要很详细，尽可能多画几张，最后选定一个满意的进行细化，然后再结构草图的基础上防止功能模块，遵循突出重点，平衡协调的原则。

最后再进行调整。

2 前端开发工具及相关技术
2.1前端开发工具
作为前端开发者，光有构想是不够的，必须在特定的平台上实现。

在本次企业网站的开发中，用到了Axure画原型图，submit和dreamweaver编写代码，photoshop切图还有adobe illustrator设计logo。

这其中，dreamweaver以及photoshop是主要工具，所以在这里只介绍这两种前端开发工具。

图2.1.1 DreamweaverCS6开始画面图2.1.2 PhotoshopCC 开始画面
2.1.1 Dreamweaver
本网站使用的Dreamweaver版本是cs6版，目前最新版本是Dreamweaver cc2105。

Dreamweaver是世界上最顶级的软件公司adobe公司推出的一款用于编辑制作web网站和移动应用程序app并拥有可视化编辑界面的网页设计软件。

本次系统的设计利用的是Dreamweaver CS6。

Dreamweaver CS6是一套拥有可视化编辑界面的软件，通过这个软件可以直接快速的创建WEB页面而不用提前编写代码。

CS6不仅拥有更加成熟的代码编辑工具，使用了自适应网络版面来新建网页，可以方便用户在确认页面之前进行多屏幕同时预览，从而提高了工作效率，还提供了功能强大的站点管理工具，这样就使得一些功能可以很轻松的实现，如站点名称及所在路径定义、版本控制及远程服务器连接等功能。

站点简单地说就是一个网站，像一些比较小的网站就可以只用一个站点来构成。

在dreamweaver中最值得一提的功能就是站点管理。

用一句很通俗易懂的话来说，站点就是一个文件夹，存放做网页时用到的所有文件和文件夹，包括主页、子页、用到的图片，声音，视频等等。

站点是网址访问的根目录，如果没有站点，别的电脑就不能
访问这个网站。

站点也是为浏览器提供访问路径的目标点，只有设置了站点，浏览器才能准确访问。

站点分为本地站点和远程站点，本次毕业设计中，仅做了一份本地站点。

Dreamweaver使用树型的结构来展示网站的内容分布，从而实现了对站点布局及细节内容的展示及修改。

2.1.2Photoshop
本网站使用的photoshop版本是cc2014版，photoshop是世界顶尖级的图像设计与制作工具软件。

Photoshop支持多种图像格式，包括
PSD,EPS,DSC,TIF,JPEG,BMP,PCX,FLM,PDF,PICT,GIF,PNG,IFF,FPX,RAW和SCT等20
多种。

利用Photoshop可以将某种格式的图像另存为其他格式，已达到特殊的要求。

Photoshop支持的色彩模式包括位图模式、灰度模式、RGB模式、CMYK模式、LAB
模式、索引颜色模式、双色调模式和多通道模式等，并且可以实现各种模式之间的转换。

另外，利用Photoshop还可以任意调整图像的尺寸、分辨率以及画布大小。

既可以在不影响分辨率的情况下改变图像尺寸，又可以在不影响图像尺寸的情况下增减分辨率。

网页设计在技术层面上，第一步是美工做出网页效果图，第二步就是网页前端进行网页切图。

用photoshop制作网页，更准确的说是运用photoshop cc的切片功能切分网页的图片并到处HTML页面。

由于网络传输速度和容量有限，因此网络对图像也就提出了一些苛刻的要求，其中最主要的一点就是图像信息量的问题。

图像信息量越小，其下载的时间越短，这样就可能有更多的用户来预览它，从而提高其经济效率。

2.2前端开发相关技术
2.2.1 HTML
HTML是网站网页内容的载体。

内容就是前端开发设计师放在页面上想要让用户user观看的信息，可以包含文字、图片、视频等。

HTML的全称是hyper text markup language——即超文本标记语言，是一种用来创造超文本文档的简单的标记语言。

用HTML编译出来的超文本文档生成的文件格式是“.html”，它能独立于像Unix、Windows 等的各大操作系统平台。

2.2.2 CSS
CSS样式是表现。

就像网页的外衣。

比如，标题字体、颜色变化，或为标题加入背景图片、边框等。

所有这些用来改变内容外观的东西称之为表现。

CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。

CSS的定义是由三个部分构成的：选择符selector，属性properties，和属性的取值value，基本格式如下：selector{properties：value} ——li{background：red；}将CSS样式表插入网页中有下列三种方式：
(1)外部样式表：当CSS样式被应用到很多页面的时候，外部样式表就占了优势。

因为只需要修改一个文件就可以实现对整个站点的外观的改变。

外部样式表的使用方法是在.html文件下的<head>标签内写入如下的代码，同时新建一个.css文件。

代码如下：
<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>
(2)内部样式表：当CSS样式只在单个页面中被应用时，就可以选择内部样式表。

内联样式表的使用方法是在<head>标签内写入<style>来实现。

代码如下：
<head>
<style type="text/css">
body {background-color: red;}
p {margin-left: 20px;}
</style>
</head>
(3)内联样式：当CSS的样式需要被应用到个别页面时，就可以使用内联样式。

使用内联样式的方法是在需要的元素标签中使用样式属性。

代码如下：
<p style="color: red; margin-left: 20px">This is a paragraph</p>
2.2.3 JavaScript
JavaScript是用来实现网页上的特效效果。

如：鼠标滑过弹出下拉菜单。

或鼠标滑过表格的背景颜色改变。

还有焦点新闻（新闻图片）的轮换。

可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

Javascript的出现，使得信息和用户之间不仅是一种显示和浏览的关系，而是实现了一种实时的，动态的，可交互式的表单功能。

Javascript是一种新的描述语言，是一种基于对象object和事件驱动event driven 并具有安全性能的脚本语言。

使用它的目的是与HTML超文本标记语言、java脚本语言（java 小程序）一起实现一个在一个web页面中链接多个对象，与web客户交互，从而可以开发客户端的应用程序等，通过javascript可以影响用户需求的时间，如：form的输入，而不用任何的网络来回传数据。

所以当一位用户输入一条信息时，不需要通过网络传送到服务器端进行处理再传回来的过程，而是可以直接在客户端进行时间处理，也可以想象成诗一个可执行程序在客户端上。

完整的JavaScript的实现包含ECMAScript、文档对象模型和浏览器对象模型。

JavaScript是通过<script></script>标签将代码嵌入到HTML当中，代码的格式如下：<script language=”JavaScript” src=””>
JavaScript代码部分
</script>
其中，<script>标签有两种主要的属性：Language和Src。

Language是脚本语言的类型，即JavaScript；Src是包含了源代码的文件。

JavaScript虽然可以放到HTML文件中的任何位置，但是浏览器解释代码是按照先后顺序进行的，位于前面的script就会自然而然被先执行。

有一些需要在网页中输出内容、调整显示的JavaScript代码就必须放在<head></head>之间，一般来说，代码放在
<head></head>之间和放在<body></body>之间是没有什么太大的区别的。

不过，可以依据下面两条规则：第一，在页面的加载过程中，需要JavaScript为页面实现动态功能时，代码应放在<body></body>之间；第二，用于页面事件的代码定义为函数时应放在
<head></head>之间，这样便会在<body>之前加载。

JavaScript常用的库有JSer、dojo、prototype、YUI、Extjs，以及最新的jQuery库是指可以被直接应用到开发体系中的线程代码的资源。

2.2.4 Jquery
了解了javascript语言后，学习掌握jquery就如虎添翼了，因为jquery本身就是javascript，只不过是把javascript代码包装成拿过来就能实现特定功能的代码库。

例如：在使用javascript代码的条件下我们想改变一个网页中所有列表标签的文本内容：var a_change=document.getElementsByTagName(“li”);
for(var i=0;i<a_change.length;i++){
a_change[i].innerHTML=”我已经改变了列表标签的文本内容！”;
}
而在使用jquery代码的条件下去改变一个网页中的所有列表标签的文本内容：
$(“li”).html(“我已经改变了列表标签的文本内容！”);
以上两段代码完成的功能是一样的。

由此可以看出，jquery更加的简洁方便，我们在处理DOM时不必关心功能的实现细节，无论对于web开发的人员还是代码来说更加
的精练，省事。

3 主要功能的实现
在搭建网站之前，首先要做一个reset的css文件，以免搭建的页面在IE浏览器、火狐浏览器、谷歌chrom浏览器出现各种兼容问题。

兼容问题在后文中会详细分析到。

Reset还原代码如下：
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd,input,t{margin:0;padding:0;} body{font-size:12px;} img{border:none;} li{list-style-type:none;}
input,select,textarea{outline:none;border:none;} textarea{resize:none;}
a{text-decoration:none;color:#8e8e8e;} h1,h2,h3,h4,h5,h6{font-family:"微软雅黑";}
每个页面都要添加reset文件，在还原各标签的属性值之后，我们来具体分析南昌华电铁路设备有限公司网站的布局，如图3.1。

图3.1 南昌华电铁路设备有限公司网站的布局
3.1 主页/首页
图3.1.1 网站主页/首页图3.1.2 网站主页/首页布局根据图把首页分为top顶部收藏区，wrap中心内容区，copyright底部版本信息区三个部分，wrap中心内容区又分为logo公司商标区，nav导航区，banner信息轮播展示区三部分。

Top区：实现把网站设为首页，收藏该网站的功能。

背景颜色使用#900的浅灰，用户体验优良。

另外添加了一个setHomeSetFav的JS文件，用来实现所需功能。

其中部分
代码：
function AddFavorite(sURL, sTitle)
{sURL = encodeURI(sURL);
try
{window.external.addFavorite(sURL, sTitle);}
catch (e)
{try
{window.sidebar.addPanel(sTitle, sURL, "");}
catch (e)
{alert("加入收藏失败，请手动在浏览器里进行设置.");}
}
} //加入收藏
在top的<a>标签内添加AddFavorite(window.location,document.title)；，在网页中用鼠标点击“加入收藏”，既能实现该功能。

图3.1.3 企业logo
Logo区：先用Adobe Illustrator软件设计出logo的矢量图，再用ps切出378*48px 的png图像，即logo如图3.1.3，因为logo是红色系，所以整个网站的风格主色调定位绛红色。

Logo部分分两块，左边是公司名称的logo，右边则为热线电话。

因为实现起来较简单，这里就不一一复述。

图3.1.4 顶部导航
Nav区：顶部导航区域，在该网站所有页面的上方，旨在方便所有用户/使用者快速的找到自己想要的东西。

本站的导航采用扁平化设计，更贴合良好的用户体验。

在反复筛选、精简后一共分为六部分，分别是首页、产品展示、新闻动态、公司概况、联系我们、诚聘英才。

这些板块的功能能包含一个企业所需呈现的任何信息。

在主流的网站设计搭建方式中，大多数的导航，都是使用无序列表标签来搭建的，这是web前端开发者不成文的规定，也符合各大搜索引擎内部的逻辑。

结构代码如下：<ul>
<li><a href="index.html">首页</a></li>
<li><a href="ex.html">产品展示</a></li>
<li><a href="news.html">新闻动态</a></li>
<li><a href="home.html">公司概况</a></li>
<li><a href="contact.html">联系我们</a></li>
<li><a href="recruitment.html">诚聘英才</a></li>
</ul>
而列表本身的结构是纵向结构，想要让它们在一行排列，就需要添加css样
式：.nav_mid_left li{float:left;width:100px;text-align:center;}。

如此，再在其中添加背景图片、
颜色、位置等nav导航就做好了。

图3.1.5 主页/首页banner
Banner区：主页的banner用来展示公司风采以及介绍公司，分别用了三个轮播嵌套，分别是三张背景图片轮播，华电铁路设备公司介绍轮播，和最下面的公司大事件轮播。

轮播也可以用按钮来控制，如图标出的红色圈位置。

功能主要使用javascript和jQuery实现。

在jquery的官方网站中下载两个jquery文件库，分别为jquery-index.js和jquery.caroufredsel-6.0.4-index.js，下载完jquery框架文件后，不需要任何安装，直接使用<script>文件导入标记，将jquery框架文件导入页面。

代码如下：
<script type="text/javascript" src="js/jquery-index.js" >
<script type="text/javascript" src="js/jquery.caroufredsel-6.0.4-index.js" >
有了框架后，再在jquery的基础上编写代码。

图3.1.6 网站底部copyright区
copyright区：整个网站的每个页面的底部都有copyright版权信息区，该区域一共有16个link链接，增加主页的权重。

包括品牌故事、联系我们、加入我们、版权申明，售后政策、自助服务、购物指南、相关下载，新浪微博、腾讯微博、企业微信、QQ空间的留言，意见反馈、问题留言、媒体联络、在线客服等。

这些链接或者信息可以替换成其他友网站。

在底部的最右边，有南昌华电公司的企业微信公众号logo，扫一扫即可关注，是时下最流行的宣传推广方式之一。

在该网站之后的网页中的版本信息区就不一一复述了。

Copyright区主要是用无序列表实现的，在主流的网站设计搭建方式中，如此类的导航，大都使用ul，li标签，代码结构大致与nav导航区的代码结构无二。

3.2产品展示板块
图3.2.1 产品展示板块布局
产品展示板块如图3.2.1。

有三级页面，一级页面是点击导航nav中的产品展示标签所显示的页面，是所有商品的大致展示；二级页面点击左边副导航的分类文字或者右边产品图片“more”进入的产品分类子页面；三级页面则是所有的产品信息详情页。

这三级页面通过本页面的链接可以任意载入。

产品展示页面（一级页面）：
图3.2.2 产品展示页面图3.2.3 产品展示页面布局图3.2.4 副导航
根据图把首页分为top顶部收藏区，wrap中心内容区，三个部分，wrap中心内容区又分为，下面左边的subNav副导航区以及右边的banner信息展示区、四类产品分类：接触网检测仪器、维修工具、安全防护用具、供电测控系统的最新产品展示八部分。

由于top顶部收藏区、logo公司商标区，nav导航区、copyright底部版本信息区在上文中已经详细分析过了，在接下来的叙述中就不在复述。

SubNav区：如图3.2.4。

所示，副导航主要是为了用户方便查询企业内的所有产品而设置的。

本质上还是用<ul><li>标签搭建，在视觉上产品列表较宽，每行的两个产品名条的设计使用了代码：.navCon_list li{float:left;width:50%;}；鼠标移到标题栏，如：接触网检测仪器、安全防护用具等，黑色的文字会改变颜色变成红色。

代码如下：.nav_con h3 a:hover{color:#c00;}。

点击后跳转到产品分类的二级页面，这样设计是为了使所需的分类更加醒目，强调设置，导向用户的使用。

Banner区：增加banner广告图片，放置在产品的上方。

仅仅在视觉上抓取用户的关注度，经常更新广告图片，与企业本身的产品同步，可以取得更好的销售情况。

图3.2.5 产品分类区图3.2.6 鼠标移至产品区域产品分类区：一级页面的产品分类区就是为了更好的展示每种产品大类中的最新产品。

该页面仿照小米官网的购物页面，白色的底色，扁平化的设计，当鼠标移动至产品图片，如图3.2.6，产品图片在视觉上会向前突起，并且向下移动2像素，与此同时，下面的标题文字会变黑变大，这是因为在css文件中给图片的div增加了一层阴影边框，使得交互更立体，用户体验更好，不会像一些老版本的网站一样仅仅是静态的页面，没有丝毫趣味性。

实现的代码如下：
.item a:hover{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: #666 0px 0px 12px;
-moz-box-shadow: #666 0px 0px 12px;
box-shadow: #666 0px 0px 12px;
border:#fff solid 1px;
font-size:14px;
font-weight:bold;}
点击每一张产品图片，就会链接到三级页面——产品详情页，查看该产品的详细内容；而该页面每栏产品的最后一张图片则是“More”图，点击后跳转到二级页面——产品分类展示页，查看更多该类产品。

产品分类展示页面（二级页面）：由于四个产品分类子页面大同小异，界面和代码大都相同，所以在这里就以接触网测量仪器的展示子页面为例，来介绍产品展示的二级页面。

图3.2.7 副导航二级页面提示图3.2.8 More 图3.2.9副导航二级页面入口
二级页面可以从左边的副导航的title进入，或者从右边的more图片进入。

图3.2.10 产品的二级页面图3.2.11 产品的二级页面结构SubNav：本页面副导航和之前一级页面的副导航有所不同，版式设置成一行一条的形式，把width:50%;去掉，同时，缩小了subNav的宽度，给产品展示更多的位置。

在subNav中可以直接点击其他三项的产品分类展示子标题，title变成红色，直接进入其他分类的二级页面，这样的互相转换的模式更加方便了用户的操作。

Content：在产品展示内容上和一级页面中的产品展示并没有什么不同，仅仅是增加了item，完整了整个产品分类的项目。

点击图片，进入三级页面产品详情页。

产品信息详情页（三级页面）：目前整个南昌华电设备有限公司总共有40个产品——即该网站总共有40个产品信息详情子页面。

每个小页面的展示格式是一样的，所以在这里就以接触网导线磨耗测量仪为例，来介绍该三级页面。

图3.2.12 产品的三级页面图3.2.13 产品的三级页面结构
Picarea：产品图片展示点击轮播，进入该页面后，pic区域的产品图片就会自动播放，自动播放的图片边框为黄色，当鼠标移动到所想放大的图片区，图片边框为黑色，点击后又变为黄色。

图片会在左边大图高清显示，方便用户查看细节。

大图的size为：300*200px，小图的size为：90*60px，所以一定要先用ps把所有图片切成一样的大小格式，不然图片会失真，看起来不美观。

图片展示效果的实现还是使用了javascript以及jquery脚本，在html代码中关联了一个jquery文件库<script type=text/javascript src="js/jquery-ex.js">，然后再新建一个js 文件slide-ex.js，在其中编写jquery程序令图片轮播动起来，部分代码如下：function slideImage(i){
var id = 'image_'+ target[i];
$('#'+ id)
.animate({opacity: 1}, 800, function(){
$(this).find('.word').animate({height: 'show'}, 'slow');
}).show()
.siblings(':visible')
.find('.word').animate({height: 'hide'},'fast',function(){
$(this).parent().animate({opacity: 0}, 800).hide();
});} //大图轮播
其中.animate() 函数是实现轮播的关键，.animate() 函数是执行CSS属性集的自定义动画。

在picarea的左上方有一个返回键，点击后可以直接返回产品展示页面的一级页面，这样，整个产品展示模块的三个级别的页面就可以做到相互转换，大大提高了用户使用的效率。

Content：商品详情的部分没有做过多的处理，仅仅在边框上设置了一层淡淡的阴影作为突出，在内容上，根据提前做好的产品手册去制作产品的信息的图片，用img的形式比普通的文本形式更加便于修改替换，也更加节省站点空间。

3.3新闻动态板块
图3.3.1 新闻动态页面图3.3.2 新闻动态页面结构图3.3.3 新闻动态二级页面
新闻动态板块分新闻列表的一级页面以及新闻详情页的二级页面，新闻列表页面是由三部分组成：顶部图片banner、subNav新闻副导航、news-list以及新闻列表。

而二级页面新闻详情页的布局和以及页面相似，仅仅是把列表换成了content新闻内容。

SubNav：新闻副导航分为公司新闻、行业新闻、媒体报道、精彩视频、资源下载、公司内刊等部分，当鼠标移动到类项时，文本颜色会变为蓝色，前面的光标也会有所改变。

News-list：新闻列表的部分按照常规主流的列表设计的，左边标题右边日期，下面用边框点线隔开，值得一提的是新闻列表下方的页码标签，可以根据新闻条数的增加而增加标签码，便于用户浏览新闻信息。

Content：在新闻动态板块的二级页面中，只有content新闻内容的部分与之前的一级页面有所不同，新闻内容采用了文本的形式编写，方便替换以及复制内容。