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

韋立梅 張淑榮

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

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

韋立梅 張淑榮

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

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

網站；HTML；CSS；JQuery

1 網站開發(fā)的核心技術

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

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

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

2 網頁構成標準

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

接下來給大家說明制作網頁時涉及的一些基本概念：內容、結構、表現和行為。

（1）內容：網頁設計師放在頁面上，讓用戶真正能夠看到的信息（文字、圖像等）。

（2）結構：就是使網頁上的內容更加具有邏輯性、層次性，即怎樣用1級2級標題、正文、列表等把網頁上的內容組織起來。

（3）表現：讓網頁上的內容以什么樣的外觀樣式（比如顏色、大小、背景等）呈現給用戶。

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

將結構、表現、行為三者分離開來編寫，有助于網站的開發(fā)與維護。

3 常用網站建設工具

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

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

3.2 常用網頁圖形圖像處理工具

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

3.3 網頁測試效果工具

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

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

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

4.1 HTML文檔、模板的建立

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

4.2 CSS樣式文件的建立

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

這樣就實現了調用CSS文件夾里的style.css樣式文件。

4.3 調用JQuery實現交互行為

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

5 一個簡單實例

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

圖1 實現效果圖

5.1 HTML文件主要內容及交互按鈕功能實現的代碼

5.2 CSS樣式文件的內容

6 結束語

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

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

[2] 邢增智．基于H T M L5與C SS3的工業(yè)物聯網工程中心網站開發(fā)[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-），女，遼寧凌源人，碩士，講師，研究方向為圖形圖像處理、數據庫系統開發(fā)。