韋立梅 張淑榮

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

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

韋立梅 張淑榮

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

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

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

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

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

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

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

2 網(wǎng)頁構(gòu)成標準

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4.1 HTML文檔、模板的建立

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

4.2 CSS樣式文件的建立

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

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

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

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

5 一個簡單實例

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

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

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

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

6 結(jié)束語

綜上所述，一個網(wǎng)站從用戶需求分析、規(guī)劃網(wǎng)站靜態(tài)頁面、網(wǎng)頁效果圖、程序開發(fā)階段、測試及上線的開發(fā)是一個綜合知識的運用，要想開發(fā)出一個吸引人的、功能完善的網(wǎng)站，有時甚至需要一個團隊的配合才能完成。優(yōu)秀的網(wǎng)頁設(shè)計師不僅要熟練地掌握上述所說的圖形圖像工具，還要具有較強的代碼編寫、調(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-），女，遼寧凌源人，碩士，講師，研究方向為圖形圖像處理、數(shù)據(jù)庫系統(tǒng)開發(fā)。