基于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网站的布局

版面是指浏览器看到的完整的一个页面（可以包含框架和层）。布局就是以最适合的方式将图片和文字排放在页面不同的位置。在进行网页布局之前，必须先确定页面都