朱杰

【摘要】近年來(lái)，電子商務(wù)網(wǎng)站數(shù)量激增，顧客規(guī)模日益擴(kuò)大。電子商務(wù)網(wǎng)站的內(nèi)容和功能變得更加豐富，各電子商務(wù)網(wǎng)站之間的競(jìng)爭(zhēng)也越來(lái)越激烈。在這種情況下，電子商務(wù)網(wǎng)站的設(shè)計(jì)和性能的要求也越來(lái)越高。在電子商務(wù)網(wǎng)站制作中，web前端扮演著重要的角色，web （World Wide Web）即全球廣域網(wǎng)，也稱為萬(wàn)維網(wǎng)，它是一種基于超文本和HTTP的、全球性的、動(dòng)態(tài)交互的、跨平臺(tái)的分布式圖形信息系統(tǒng)。是建立在Internet上的一種網(wǎng)絡(luò)服務(wù)，為瀏覽者在Internet上查找和瀏覽信息提供了圖形化的、易于訪問(wèn)的直觀界面，其中的文檔及超級(jí)鏈接將Internet上的信息節(jié)點(diǎn)組織成一個(gè)互為關(guān)聯(lián)的網(wǎng)狀結(jié)構(gòu)。本文將結(jié)合工作經(jīng)驗(yàn)，介紹如何制作一個(gè)web前端網(wǎng)頁(yè)頁(yè)面。

【關(guān)鍵詞】web前端 html css 網(wǎng)頁(yè)制作

隨著信息技術(shù)的發(fā)展，信息技術(shù)的傳遞突破了時(shí)間和地域性，網(wǎng)絡(luò)化與全球化成為一種不可避免的世界趨勢(shì)。web前端網(wǎng)頁(yè)制作的學(xué)習(xí)顯得尤為重要，下面我將從四個(gè)方面開(kāi)始闡述web網(wǎng)頁(yè)制作。

一、概述

（1）HTML

HTML的全稱是Hypertext Markup Language（超文本標(biāo)記語(yǔ)言）HTML是用于描述網(wǎng)頁(yè)文檔的標(biāo)記語(yǔ)言。HTML語(yǔ)言是由W3C組織（萬(wàn)維網(wǎng)聯(lián)盟）所規(guī)范，從1993到如今的發(fā)展，同時(shí)針對(duì)其以后的發(fā)展進(jìn)行評(píng)測(cè)。HTML在計(jì)算機(jī)發(fā)展史中有不可或缺的地位。

（2）CSS層疊樣式表

從HTML被發(fā)明開(kāi)始，樣式就以各種形式存在。不同的瀏覽器結(jié)合它們各自的樣式語(yǔ)言為用戶提供頁(yè)面效果的控制。最初的HTML只包含很少的顯示屬性。

隨著HTML的成長(zhǎng)，為了滿足頁(yè)面設(shè)計(jì)者的要求，HTML添加了很多顯示功能。但是隨著這些功能的增加，HTML變的越來(lái)越雜亂，而且HTML頁(yè)面也越來(lái)越臃腫。于是CSS便誕生了。

css層疊樣式表（英文全稱：Cascading Style Sheets）是一種用來(lái)表現(xiàn)HTML等文件樣式的計(jì)算機(jī)語(yǔ)言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化.css能夠?qū)W(wǎng)頁(yè)中元素位置的排版進(jìn)行像素級(jí)精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁(yè)對(duì)象和模型樣式編輯的能力。

（3）網(wǎng)頁(yè)的定義

網(wǎng)頁(yè)是構(gòu)成網(wǎng)站的基本元素，是承載各種網(wǎng)站應(yīng)用的平臺(tái)。網(wǎng)負(fù)是一個(gè)包含HTML標(biāo)簽的純文本文件，它可以存放在世界某個(gè)角落的某一臺(tái)計(jì)算機(jī)中，是萬(wàn)維網(wǎng)中的一“頁(yè)”，是超文本標(biāo)記語(yǔ)言格式，網(wǎng)頁(yè)是一個(gè)可以在線交流、提供顧客服務(wù)，以及在線下載的渠道頁(yè)面。

二、網(wǎng)頁(yè)代碼編輯器

在web前端網(wǎng)頁(yè)制作過(guò)程當(dāng)中，每個(gè)人用的軟件也不一樣，因人而異，比較有名的有Adobe公司下的Dreamweaver和Microsoft公司下的VScode，當(dāng)然web前端設(shè)汁師用的最多的軟件還是Sub-lime Text。因?yàn)镾ublime Text支持多種編程語(yǔ)言的語(yǔ)法擁有優(yōu)秀的代碼自動(dòng)完成功能，還擁有代碼片段（Snippet）的功能，可以將常用的代碼片段保存起來(lái)，需要時(shí)隨時(shí)調(diào)用。

三、網(wǎng)頁(yè)排版布局

在web中布局排版有很多種，例如：

1.表格布局（已淘汰）：這是網(wǎng)頁(yè)布局最常用的一種方法。因?yàn)榕虐骐y點(diǎn)低，容易接受，速度快，兼容性好受到美工和程序的喜愛(ài)。但是缺點(diǎn)很多：

（1）代碼繁多，不利于網(wǎng)站優(yōu)化。

（2）頁(yè)面布局如果更改。之前的代碼可以說(shuō)毫無(wú)用處。對(duì)設(shè)計(jì)，對(duì)程序都是一個(gè)可悲的事情。

（3）表格嵌套多，網(wǎng)站加載速度慢。影響用戶體驗(yàn)。

2.DIV+CSS布局：這是一種最難的排版方式，因?yàn)楠?dú)特的樣式和方法讓許人接受起來(lái)有點(diǎn)吃力，要考慮網(wǎng)站的兼容性。所以這種方式被大多數(shù)網(wǎng)站建設(shè)公司所排斥。但是它卻有很多的優(yōu)點(diǎn)：

（1）代碼簡(jiǎn)潔，對(duì)搜索引擎友好。

（2）網(wǎng)站布局超前、便于修改，層與層之前銜接方便、靈活調(diào)用。

（3）只要一個(gè)樣式表就可以把所有的頁(yè)面布局全部加入其中。網(wǎng)站加載速度快、利于網(wǎng)站優(yōu)化。

DIV+CSS布局排版是Web布局排版中一種新的做網(wǎng)站的布局方式，是一種新的排版理念，完全有別于傳統(tǒng)的表格布局排版習(xí)慣。DIV+CSS樣式具有比表格更大的優(yōu)勢(shì)，它能夠?qū)崿F(xiàn)頁(yè)面內(nèi)容和外觀樣式的分離，可以對(duì)相的DIV標(biāo)記中的ID進(jìn)行控制，使瀏覽者更快地瀏覽網(wǎng)頁(yè)。

四、網(wǎng)頁(yè)特效

網(wǎng)頁(yè)特效是用程序代碼在網(wǎng)頁(yè)中實(shí)現(xiàn)的特殊效果或者特殊的功能的一種技術(shù)，是用網(wǎng)頁(yè)腳本（javascript，vbscript）來(lái)編寫(xiě)制作動(dòng)態(tài)特殊效果。javascript語(yǔ)言給html靜態(tài)網(wǎng)頁(yè)增添了許多色彩，使網(wǎng)頁(yè)更加生動(dòng)，也實(shí)現(xiàn)了用戶和網(wǎng)頁(yè)之間的交互，它是通過(guò)嵌入或調(diào)入到標(biāo)準(zhǔn)的HTML語(yǔ)言中實(shí)現(xiàn)的。

五、結(jié)語(yǔ)

通過(guò)以上四個(gè)章節(jié)的闡述，wcb前端的學(xué)習(xí)是非常重要的，熟練掌握web技術(shù)可以制作精美的網(wǎng)頁(yè)，合理的網(wǎng)頁(yè)布局排版，可以給用戶帶來(lái)最佳體驗(yàn)。

參考文獻(xiàn)：

【l】《XML基礎(chǔ)與實(shí)踐教程》王震江，馬宏清華大學(xué)出版社

【2】HTML、CSS、JavaScript整合詳解》王津濤北京機(jī)械工業(yè)出版社