韋立梅 張淑榮

(廣東白云學(xué)院，廣東廣州510450)

基于HTML+CSS+JQuery的網(wǎng)站開發(fā)簡述

韋立梅 張淑榮

(廣東白云學(xué)院，廣東廣州510450)

網(wǎng)站是個(gè)人或企業(yè)向客戶提供信息、產(chǎn)品、服務(wù)的一種平臺(tái)。HTML、CSS作為網(wǎng)站前端開發(fā)的核心技術(shù)是每個(gè)網(wǎng)站開發(fā)者必須要掌握的技術(shù)，而JQuery 是一個(gè)優(yōu)秀的JavaScript 框架，可以優(yōu)化網(wǎng)站代碼設(shè)計(jì)。本文主要介紹基于HTML+CSS+JQuery 網(wǎng)站開發(fā)所涉及的核心技術(shù)、網(wǎng)頁構(gòu)成的標(biāo)準(zhǔn)、常用開發(fā)工具、網(wǎng)站程序開發(fā)階段的基本步驟，希望能對(duì)廣大讀者起到一個(gè)借鑒的作用。

網(wǎng)站；HTML；CSS；JQuery

1 網(wǎng)站開發(fā)的核心技術(shù)

HTML（超文本標(biāo)記語言）是用來描述網(wǎng)頁內(nèi)容的一些特定符號(hào)，它不是編程語言，而是一種描述性的標(biāo)記語言。目前HTML最新版本是HTML5。

CSS（層疊樣式表）是用來設(shè)計(jì)網(wǎng)頁樣式的工具，CSS可以作為HTML、XHTML、XML的樣式控制語言。借助CSS的強(qiáng)大功能，網(wǎng)頁會(huì)更加千變?nèi)f化。目前最新版本是CSS3，只有谷歌、火狐等瀏覽器能很好地支持。

JQuery由美國人John Resig用JavaScript編寫而成，是繼prototype之后又一個(gè)優(yōu)秀的JavaScript框架。JQuery庫非常小，經(jīng)過壓縮后只有幾十KB左右大小，能兼容目前比較新的CSS3，它的核心就是選擇器，可以用簡潔的代碼選擇HTML中的各種標(biāo)簽，使用簡單方便，只要用簡潔的代碼，就可以實(shí)現(xiàn)復(fù)雜的功能。采用鏈?zhǔn)骄幊?，能自?dòng)對(duì)多個(gè)元素進(jìn)行迭代方法調(diào)用，很好地屏蔽了瀏覽器的差異，跨瀏覽器兼容性好，而且開源免費(fèi)。

2 網(wǎng)頁構(gòu)成標(biāo)準(zhǔn)

網(wǎng)頁標(biāo)準(zhǔn)主要由三部分組成：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）。網(wǎng)頁結(jié)構(gòu)標(biāo)準(zhǔn)主要通過HTML標(biāo)記語言實(shí)現(xiàn)；網(wǎng)頁表現(xiàn)標(biāo)準(zhǔn)主要是通過CSS樣式表來完成；網(wǎng)頁行為標(biāo)準(zhǔn)是通過JavaScript腳本語言來執(zhí)行。因此完成一個(gè)靜態(tài)網(wǎng)頁的制作，只要用到HTML與CSS，就可以實(shí)現(xiàn)，所以我們常用HTML+CSS代表制作一個(gè)標(biāo)準(zhǔn)網(wǎng)頁的技術(shù)。

接下來給大家說明制作網(wǎng)頁時(shí)涉及的一些基本概念：內(nèi)容、結(jié)構(gòu)、表現(xiàn)和行為。

（1）內(nèi)容：網(wǎng)頁設(shè)計(jì)師放在頁面上，讓用戶真正能夠看到的信息（文字、圖像等）。

（2）結(jié)構(gòu)：就是使網(wǎng)頁上的內(nèi)容更加具有邏輯性、層次性，即怎樣用1級(jí)2級(jí)標(biāo)題、正文、列表等把網(wǎng)頁上的內(nèi)容組織起來。

（3）表現(xiàn)：讓網(wǎng)頁上的內(nèi)容以什么樣的外觀樣式（比如顏色、大小、背景等）呈現(xiàn)給用戶。

（4）行為：對(duì)外部事件作出響應(yīng)，例如當(dāng)用戶輸入賬號(hào)、密碼、驗(yàn)證碼，單擊確定按鈕后，要判斷輸入的合法性。

將結(jié)構(gòu)、表現(xiàn)、行為三者分離開來編寫，有助于網(wǎng)站的開發(fā)與維護(hù)。

3 常用網(wǎng)站建設(shè)工具

3.1 常用網(wǎng)頁開發(fā)工具

Dreamweaver是目前最常用的網(wǎng)站管理和網(wǎng)頁制作軟件，它功能全面、操作靈活，利用它可以很容易地制作出跨平臺(tái)、跨瀏覽器限制的動(dòng)感網(wǎng)頁。其它比較常用的網(wǎng)頁開發(fā)工具有EditPlus、Visual Studio、WebStorm,它們主要完成編寫html文件、CSS樣式文件、網(wǎng)頁布局等功能。

3.2 常用網(wǎng)頁圖形圖像處理工具

Photoshop，主要是對(duì)網(wǎng)站的前期美工布局、圖形圖像的處理、網(wǎng)頁切圖；FireWorks，用來制作網(wǎng)頁圖形，能夠?qū)W(wǎng)頁圖像做很精準(zhǔn)的切圖，生成光標(biāo)動(dòng)態(tài)感應(yīng)的JavaScript；Flash，主要是實(shí)現(xiàn)網(wǎng)站的動(dòng)畫功能，讓你的網(wǎng)站動(dòng)起來，更加吸引人。

3.3 網(wǎng)頁測(cè)試效果工具

可以使用火狐瀏覽器、谷歌瀏覽器、IE-Tester來測(cè)試你所編輯的網(wǎng)頁在不同瀏覽器的顯示效果，尤其是IE6.0的效果。

4 網(wǎng)站程序開發(fā)的基本步驟

當(dāng)網(wǎng)頁美工根據(jù)用戶的需求，使用Photoshop等平面設(shè)計(jì)軟件，設(shè)計(jì)出用戶滿意的網(wǎng)頁效果圖后，就可以著手搭建網(wǎng)站了。根據(jù)美工效果圖，先制作出靜態(tài)網(wǎng)頁，然后實(shí)現(xiàn)網(wǎng)頁的交互功能，如果需要后臺(tái)，還要開發(fā)設(shè)計(jì)網(wǎng)站的后臺(tái)數(shù)據(jù)庫。在本地搭建服務(wù)器，測(cè)試網(wǎng)站有沒有什么BUG。若無問題，可以將網(wǎng)站打包，使用FTP上傳至網(wǎng)站空間或者服務(wù)器。

4.1 HTML文檔、模板的建立

用HTML各種標(biāo)簽搭建網(wǎng)站上要顯示的內(nèi)容。在網(wǎng)站規(guī)劃的最初，網(wǎng)頁設(shè)計(jì)師只要先開發(fā)出網(wǎng)站的首頁、列表頁、詳情頁就可以了，如果網(wǎng)站的首頁、列表頁、詳情頁的顯示內(nèi)容（比如：背景、logo、banner、導(dǎo)航、頁腳底部等）一樣，就可以用模板來實(shí)現(xiàn)統(tǒng)一網(wǎng)頁風(fēng)格的搭建。

4.2 CSS樣式文件的建立

使用EditPlus、Dreamweaver、Visual Studio等開發(fā)工具建立樣式文件，一般保存在站點(diǎn)文件夾中的CSS子文件夾里，在樣式文件中主要實(shí)現(xiàn)對(duì)各種標(biāo)簽的樣式定義，比如字體、字號(hào)、顏色等字體格式設(shè)置，長寬、位置、背景、邊框等格式的設(shè)置。在HTML文檔中調(diào)用樣式的方法有行內(nèi)式、內(nèi)嵌式、鏈入式三種，而鏈入式調(diào)用樣式文件的方法最為常用，那么如何在HTML文件中調(diào)用CSS樣式文件呢？首先我們要把創(chuàng)建好的樣式文件（假設(shè)名稱為：style.css）,拷貝到當(dāng)前站點(diǎn)所在的CSS子文件夾里，然后在HTML文檔中的＜head＞標(biāo)簽里，＜title＞標(biāo)簽下，添加如下的代碼：

這樣就實(shí)現(xiàn)了調(diào)用CSS文件夾里的style.css樣式文件。

4.3 調(diào)用JQuery實(shí)現(xiàn)交互行為

網(wǎng)站不僅要展示信息給用戶看，還要對(duì)用戶的行為（比如單擊鼠標(biāo)左鍵、雙擊鼠標(biāo)、鼠標(biāo)經(jīng)過、按回車等）作出響應(yīng)，完成用戶與計(jì)算機(jī)之間的交互，那么就需要網(wǎng)頁開發(fā)者提供這種交互行為的編碼，JQuery就可以用簡潔的代碼來實(shí)現(xiàn)這種交互行為。首先我們要把“jquery-3.2.1.min.js”文件拷貝到當(dāng)前站點(diǎn)所在的文件夾里，一般放在與index.html文件同一目錄下，然后在HTML文檔中的＜head＞標(biāo)簽里，添加如下的代碼：

5 一個(gè)簡單實(shí)例

要實(shí)現(xiàn)圖1的效果，當(dāng)單擊顯示全部商品時(shí)，可以顯示全部的商品信息，當(dāng)單擊隱藏部分商品時(shí)，只顯示前7個(gè)商品內(nèi)容。

圖1 實(shí)現(xiàn)效果圖

5.1 HTML文件主要內(nèi)容及交互按鈕功能實(shí)現(xiàn)的代碼

5.2 CSS樣式文件的內(nèi)容

6 結(jié)束語

綜上所述，一個(gè)網(wǎng)站從用戶需求分析、規(guī)劃網(wǎng)站靜態(tài)頁面、網(wǎng)頁效果圖、程序開發(fā)階段、測(cè)試及上線的開發(fā)是一個(gè)綜合知識(shí)的運(yùn)用，要想開發(fā)出一個(gè)吸引人的、功能完善的網(wǎng)站，有時(shí)甚至需要一個(gè)團(tuán)隊(duì)的配合才能完成。優(yōu)秀的網(wǎng)頁設(shè)計(jì)師不僅要熟練地掌握上述所說的圖形圖像工具，還要具有較強(qiáng)的代碼編寫、調(diào)試等能力。

[1] 王傳建．網(wǎng)站開發(fā)技術(shù)比較分析[J]．電腦迷，2017(06)．

[2] 邢增智．基于H T M L5與C SS3的工業(yè)物聯(lián)網(wǎng)工程中心網(wǎng)站開發(fā)[J]．物聯(lián)網(wǎng)技術(shù)，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-），女，遼寧凌源人，碩士，講師，研究方向?yàn)閳D形圖像處理、數(shù)據(jù)庫系統(tǒng)開發(fā)。