基于HTML+CSS+JQuery的网站开发简述

韦立梅 张淑荣

(广东白云学院，广东广州510450)

基于HTML+CSS+JQuery的网站开发简述

韦立梅 张淑荣

(广东白云学院，广东广州510450)

网站是个人或企业向客户提供信息、产品、服务的一种平台。HTML、CSS作为网站前端开发的核心技术是每个网站开发者必须要掌握的技术，而JQuery 是一个优秀的JavaScript 框架，可以优化网站代码设计。本文主要介绍基于HTML+CSS+JQuery 网站开发所涉及的核心技术、网页构成的标准、常用开发工具、网站程序开发阶段的基本步骤，希望能对广大读者起到一个借鉴的作用。

网站；HTML；CSS；JQuery

1 网站开发的核心技术

HTML（超文本标记语言）是用来描述网页内容的一些特定符号，它不是编程语言，而是一种描述性的标记语言。目前HTML最新版本是HTML5。

CSS（层叠样式表）是用来设计网页样式的工具，CSS可以作为HTML、XHTML、XML的样式控制语言。借助CSS的强大功能，网页会更加千变万化。目前最新版本是CSS3，只有谷歌、火狐等浏览器能很好地支持。

JQuery由美国人John Resig用JavaScript编写而成，是继prototype之后又一个优秀的JavaScript框架。JQuery库非常小，经过压缩后只有几十KB左右大小，能兼容目前比较新的CSS3，它的核心就是选择器，可以用简洁的代码选择HTML中的各种标签，使用简单方便，只要用简洁的代码，就可以实现复杂的功能。采用链式编程，能自动对多个元素进行迭代方法调用，很好地屏蔽了浏览器的差异，跨浏览器兼容性好，而且开源免费。

2 网页构成标准

网页标准主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。网页结构标准主要通过HTML标记语言实现；网页表现标准主要是通过CSS样式表来完成；网页行为标准是通过JavaScript脚本语言来执行。因此完成一个静态网页的制作，只要用到HTML与CSS，就可以实现，所以我们常用HTML+CSS代表制作一个标准网页的技术。

接下来给大家说明制作网页时涉及的一些基本概念：内容、结构、表现和行为。

（1）内容：网页设计师放在页面上，让用户真正能够看到的信息（文字、图像等）。

（2）结构：就是使网页上的内容更加具有逻辑性、层次性，即怎样用1级2级标题、正文、列表等把网页上的内容组织起来。

（3）表现：让网页上的内容以什么样的外观样式（比如颜色、大小、背景等）呈现给用户。

（4）行为：对外部事件作出响应，例如当用户输入账号、密码、验证码，单击确定按钮后，要判断输入的合法性。

将结构、表现、行为三者分离开来编写，有助于网站的开发与维护。

3 常用网站建设工具

3.1 常用网页开发工具

Dreamweaver是目前最常用的网站管理和网页制作软件，它功能全面、操作灵活，利用它可以很容易地制作出跨平台、跨浏览器限制的动感网页。其它比较常用的网页开发工具有EditPlus、Visual Studio、WebStorm,它们主要完成编写html文件、CSS样式文件、网页布局等功能。

3.2 常用网页图形图像处理工具

Photoshop，主要是对网站的前期美工布局、图形图像的处理、网页切图；FireWorks，用来制作网页图形，能够对网页图像做很精准的切图，生成光标动态感应的JavaScript；Flash，主要是实现网站的动画功能，让你的网站动起来，更加吸引人。

3.3 网页测试效果工具

可以使用火狐浏览器、谷歌浏览器、IE-Tester来测试你所编辑的网页在不同浏览器的显示效果，尤其是IE6.0的效果。

4 网站程序开发的基本步骤

当网页美工根据用户的需求，使用Photoshop等平面设计软件，设计出用户满意的网页效果图后，就可以着手搭建网站了。根据美工效果图，先制作出静态网页，然后实现网页的交互功能，如果需要后台，还要开发设计网站的后台数据库。在本地搭建服务器，测试网站有没有什么BUG。若无问题，可以将网站打包，使用FTP上传至网站空间或者服务器。

4.1 HTML文档、模板的建立

用HTML各种标签搭建网站上要显示的内容。在网站规划的最初，网页设计师只要先开发出网站的首页、列表页、详情页就可以了，如果网站的首页、列表页、详情页的显示内容（比如：背景、logo、banner、导航、页脚底部等）一样，就可以用模板来实现统一网页风格的搭建。

4.2 CSS样式文件的建立

使用EditPlus、Dreamweaver、Visual Studio等开发工具建立样式文件，一般保存在站点文件夹中的CSS子文件夹里，在样式文件中主要实现对各种标签的样式定义，比如字体、字号、颜色等字体格式设置，长宽、位置、背景、边框等格式的设置。在HTML文档中调用样式的方法有行内式、内嵌式、链入式三种，而链入式调用样式文件的方法最为常用，那么如何在HTML文件中调用CSS样式文件呢？首先我们要把创建好的样式文件（假设名称为：style.css）,拷贝到当前站点所在的CSS子文件夹里，然后在HTML文档中的＜head＞标签里，＜title＞标签下，添加如下的代码：

这样就实现了调用CSS文件夹里的style.css样式文件。

4.3 调用JQuery实现交互行为

网站不仅要展示信息给用户看，还要对用户的行为（比如单击鼠标左键、双击鼠标、鼠标经过、按回车等）作出响应，完成用户与计算机之间的交互，那么就需要网页开发者提供这种交互行为的编码，JQuery就可以用简洁的代码来实现这种交互行为。首先我们要把“jquery-3.2.1.min.js”文件拷贝到当前站点所在的文件夹里，一般放在与index.html文件同一目录下，然后在HTML文档中的＜head＞标签里，添加如下的代码：

5 一个简单实例

要实现图1的效果，当单击显示全部商品时，可以显示全部的商品信息，当单击隐藏部分商品时，只显示前7个商品内容。

图1 实现效果图

5.1 HTML文件主要内容及交互按钮功能实现的代码

5.2 CSS样式文件的内容

6 结束语

综上所述，一个网站从用户需求分析、规划网站静态页面、网页效果图、程序开发阶段、测试及上线的开发是一个综合知识的运用，要想开发出一个吸引人的、功能完善的网站，有时甚至需要一个团队的配合才能完成。优秀的网页设计师不仅要熟练地掌握上述所说的图形图像工具，还要具有较强的代码编写、调试等能力。

[1] 王传建．网站开发技术比较分析[J]．电脑迷，2017(06)．

[2] 邢增智．基于H T M L5与C SS3的工业物联网工程中心网站开发[J]．物联网技术，2017(03)：92-93．

Website Development Based on HTML+CSS+JQuery

Wei LimeiZhang Shurong
(Guangdong Baiyun University,Guangzhou 510450,Guangdong)

Website is a platform for individuals or businesses to provide information,products,and services to their customers.As the core technologies for website development,HTML and CSS are which every site developer should master.JQuery is an excellent JavaScript framework that can optimize the website code design.This paper mainly introduces the core technologies,website composition standards,usual development tools,the basic steps in website development based on HTML+CSS+JQuery,hoping to provide a reference for readers.

website;HTML;CSS;JQuery

TP393.092

A

1008-6609 (2017) 09-0069-02

韦立梅（1977-），女，辽宁凌源人，硕士，讲师，研究方向为图形图像处理、数据库系统开发。