基于WEB前端开发技术的网站设计
摘要
随着互联网信息技术的广泛应用，互联网作为第四媒体使得全球信息共享成为现实，它正逐步改变人们的生活方式和工作方式。面对扑面而来的网络浪潮，个人、企业等纷纷建立自己的网站，利用网站来宣传自己，提高知名度，寻新的商机。作为企业宣传的媒体之一，网页界面设计的成功与否，更是关系到每一个在网上安家的企业整体认知形象，其重要性并不亚于企业目前所热衷的广告、企业形象识别系统等传播媒介。网站是企业实施电子商务的载体。如何建好，管理好自己的网站，已经成为企业电子商务应用成功与否的标志。
本论文主要围企业网站为开发主题，在页面的布局时使用了最基本也是最必须的三个技能：HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript以及jQuery实现相应的效果和交互。在进行开发前，需要对这些概念弄清楚，这样在开发的过程中才会得心应手。
关键词：前端技术; 网站; JavaScript
ABSTRACT
With the widely application of the Internet information technology, the Internet as the fourth media mak
es 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)
html网页设计超链接
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中最值得一提的功能就是站点管理。用一句很通俗易懂的话来说，站点就是一个文件夹，存放做网页时用到的所有文件和文件夹，包括主页、子页、用到的图片，声音，视频等等。站点是网址访问的根目录，如果没有站点，别的电脑就不能

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。