基于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文件下的标签内写入如下的代码，同时新建一个.css文件。代码如下：

(2)内部样式表：当CSS样式只在单个页面中被应用时，就可以选择内部样式表。内联样式表的使用方法是在标签内写入

(3)内联样式：当CSS的样式需要被应用到个别页面时，就可以使用内联样式。使用内联样式的方法是在需要的元素标签中使用样式属性。代码如下：

This is a paragraph

2.2.3 JavaScript

JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。Javascript的出现，使得信息和用户之间不仅是一种显示和浏览的关系，而是实现了一种实时的，动态的，可交互式的表单功能。Javascript是一种新的描述语言，是一种基于对象object和事件驱动event driven 并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、java脚本语言（java 小程序）一起实现一个在一个web页面中链接多个对象，与web客户交互，从而可以开发客户端的应用程序等，通过javascript可以影响用户需求的时间，如：form的输入，而不用任何的网络来回传数据。所以当一位用户输入一条信息时，不需要通过网络传送到服务器端进行处理再传回来的过程，而是可以直接在客户端进行时间处理，也可以想象成诗一个可执行程序在客户端上。

完整的JavaScript的实现包含ECMAScript、文档对象模型和浏览器对象模型。JavaScript是通过标签将代码嵌入到HTML当中，代码的格式如下：

其中，