朱杰

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

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

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

一、概述

（1）HTML

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

（2）CSS層疊樣式表

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

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

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

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

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

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

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

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

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

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

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

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

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

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

（1）代碼簡潔，對搜索引擎友好。

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

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

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

四、網(wǎng)頁特效

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

五、結(jié)語

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

參考文獻：

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

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