彭滔

摘要：國內(nèi)網(wǎng)頁設(shè)計教學，長期以來都是微軟平臺下，圍繞Dreamwver展開，這種組合體現(xiàn)了高可用性，可視化開發(fā)的特點，但是它有各種弊端，平臺封閉，版權(quán)成本高昂，平臺的進化速度慢。為此在高職電子商務網(wǎng)頁設(shè)計中引入新的時代特色，依托Linux 平臺下的超強編輯器vim，emmet特有的快速開發(fā)，重新賦予網(wǎng)頁設(shè)計新的亮點。

關(guān)鍵詞：vim；emmet；電子商務；網(wǎng)頁制作；教改

中圖分類號：TP393 文獻標識碼：A 文章編號：1009-3044（2017）31-0291-03

To Create Webpage with Vim and Emmet in e-commerce Traing Calss

PENG Tao

（Hainan College of Foreign Studies， Wenchang 571200， China）

Abstract：During all the webpage building，almost every software is on the platform of windows，it is a budiness and copyright software stacks-expenseive and closed-sourcecode， webpage building is circling dreamweaver，it focue onvisulity，now we introduce open source software to boarden our eye and mind，to introduce vim+emmet，make your webpage more efficiently.

Key words： vim； emmet； e-commerce； webpage-building

傳統(tǒng)的網(wǎng)頁設(shè)計課程通常以網(wǎng)頁制作三劍客為核心，Dreamweaver，F(xiàn)lash，F(xiàn)ireworks，這種組合以可視化為噱頭的指導思想，在教網(wǎng)頁設(shè)計的過程產(chǎn)生了一定的問題，學生沒有將重點放在網(wǎng)頁制作本身，沒有集中于掌握網(wǎng)頁設(shè)計的知識點，可視化工具代替了必要的邏輯思考，學習網(wǎng)頁制作變成了學習特定的應用軟件dreamweaver，制作出來的html代碼冗余度高，表面上看很風光，實際上臟亂差，頭腦混亂不清。

中國當下的計算機教育應當脫離“微軟+商務版權(quán)軟件”培訓中心的模式，學生考級就是圍繞Window，Office，Sqlserver，Visual C這些版權(quán)昂貴的軟件，讓學生以為計算機教育就是微軟系列產(chǎn)品的學習與操作，學生的思維完全被封閉。

開源軟件的開放性特性（代碼開源，允許任意修改）可以培養(yǎng)學生的創(chuàng)造性思維，原來條條道路通羅馬，并非只有華山一條道。開源軟件還可以大幅度降低教學成本，學院不用再掏巨資購買商用軟件，同時也提高了信息安全系數(shù)，不再擔心各種木馬后門，間諜軟件。（筆者使用開源軟件2年，沒有重裝系統(tǒng)，沒有遇到過病毒。）

在教學過程中使用開源軟件組合實現(xiàn)網(wǎng)頁設(shè)計教改有巨大的現(xiàn)實價值。本文通過案例研究剖析的方式，探討linux環(huán)境下使用開源軟件組合vim+emmet實現(xiàn)一個具體的網(wǎng)頁設(shè)計全過程，為網(wǎng)頁設(shè)計打開一扇新的窗戶。

1 平臺的搭建

本文以linux的發(fā)行版之一debian為例進行講解，debian的安裝過程參見網(wǎng)文《使用U盤安裝Debian8.2.0系統(tǒng)圖文、視頻教程》，用usb安裝可以做到快速高效。

Debian安裝完成后，配置軟件源。

Echo "deb http：//debian.cn99.com/debian/ jessie main non-free contrib

deb http：//debian.cn99.com/debian/ jessie-updates main non-free contrib

deb-src http：//debian.cn99.com/debian/ jessie main non-free contrib

deb-src http：//debian.cn99.com/debian/ jessie-updates main non-free contrib

deb http：//debian.cn99.com/debian-security/ jessie/updates main non-free contrib

deb-src http：//debian.cn99.com/debian-security/ jessie/updates main non-free contrib

" > /etc/apt/sources.list

1.1 vim軟件的安裝與配置

vim 和 emacs 是nix類（unix+linux）操作系統(tǒng)平臺上著名的文本編輯器（目前都有windows平臺下的發(fā)行版），vim被稱為“編輯器之神”，emacs被稱為“ 神之編輯器”，它們都有30多年的歷史，不斷升級進化，已經(jīng)影響了nix類平臺及軟件生態(tài)圈的建設(shè)，vim（emacs）可以終身使用，而各種商用編輯器頻繁更新改版，在競爭中消亡，導致了學習成本的增加。

對很多l(xiāng)inux發(fā)行版來說，vim（vi）是默認安裝的emacs則不是。從入門門檻來看，vim更容易上手。

我們可以在網(wǎng)頁設(shè)計中使用vim進行文本編輯，排版，運行測試，提高編輯效率。

sudo apt-get update

sudo apt-get install vim

vim的配置

1.不要保存臨時文件 （以～結(jié)尾的文件）

set nobackup

set nowritebackup

2.縮進

set tabstop=4

set sts=4

set expandtab

set softtabstop=4

set shiftwidth=4

3.數(shù)字行號

set number

vim-emmet的安裝配置

mkdir.vim

mkdir.vim/plugin

mkdir.vim/autoload

git clone https：//github.com/mattn/emmet-vim.git

cd emmet-vim

cp plugin/emmet.vim ～/.vim/plugin/

cp autoload/emmet.vim ～/.vim/autoload/

cp -a autoload/emmet ～/.vim/autoload/

2 Emmet使用簡介

Emmet是一款前端開發(fā)工具。但大多數(shù)的實現(xiàn)都有這樣一個缺點：你必須先定義你得代碼片段，并且不能再運行時進行拓展。

Emmet把片段這個概念提高到了一個新的層次：你可以設(shè)置CSS形式的能夠動態(tài)被解析的表達式，然后根據(jù)你所輸入的縮寫來得到相應的內(nèi)容。Emmet是很成熟的并且非常適用于編寫HTML/XML 和 CSS 代碼的前端開發(fā)人員，但也可以用于編程語言。

emmet可以快速編輯html及css文件的原因在于：它設(shè)計了一套縮寫規(guī)則，通過快捷鍵（默認是ctrl+y再輸入， [逗號]）展開縮寫。

emmet快速編寫html的過程分成三個步驟：原始界面的結(jié)構(gòu)分析，利用html的知識，用div模塊化網(wǎng)頁結(jié)構(gòu)；寫出目標網(wǎng)頁結(jié)構(gòu)對應的emmet寫法，再使用快捷鍵展開（通過展開后，還需多次使用emmet完善）；用瀏覽器打開進行測試。

下面介紹一下emmet的一些表達式。

整體模板產(chǎn)生的縮寫標記 html：5

網(wǎng)頁中各元素

在emmet 中，

用p 表達，其他各html標簽的表達方式以此類推。

帶屬性的html元素

，這個p元素，用emmet表達出來是這樣。

p.first

網(wǎng)頁結(jié)構(gòu)表達

1） 父子關(guān)系表達

父子關(guān)系通過 > 表達，左側(cè)是右側(cè)的父親，右側(cè)是左側(cè)的兒子。

emmet表達式： html>header

含義 ：html標簽下，有個子元素 header

2） 同胞關(guān)系表達

emmet表達式：header+container+footer

這里的三個html元素 header container footer 處于同一層次，他們是同胞關(guān)系。

為了便于劃分各層次關(guān)系，同一層次可以用（），包含。

加一個括號后，（header+container+footer）更加清晰表達了 header container footer 處于同一層次。

3） 復雜的父子-同胞關(guān)系表達

html：5>header+（nav>container>（section+div））+footer

這個表達式包含兩個層次：

第一層次：html：5 ，這是一個專用模板。

第二層次：三個html標簽 header， nav， footer

其中nav又嵌套了兩層，它有兩個子標簽

nav的第一層子標簽 container

container的子標簽（nav的第二層子標簽）：有兩個section，div 它們屬于同一層次。

具有相同結(jié)構(gòu)的多個子標簽的表達式

下面的html結(jié)構(gòu)網(wǎng)頁片段，可以用emmet寫成 nav>ul>（li>a）*4。

這里有一個需要特別關(guān)注的地方，（li>a）*4 ，li標簽下面有個a標簽，這種局部結(jié)構(gòu)反復出現(xiàn)了4次。

有了上面的基礎(chǔ)知識，我們就可以動手制作網(wǎng)頁了。

3 網(wǎng)頁制作實例

本文以下面的圖例為示范，用vim+emmet快速產(chǎn)生這個頁面。

步驟一：結(jié)構(gòu)分析

這個頁面的結(jié)構(gòu)很簡單：三個部分

頭部：包含一個h1 文字：示范博客

中間是一個container：

這個container由兩個部分組成：

左側(cè)：上下兩個articale

右側(cè)：p

最下端footer：

版權(quán)標志。

步驟二：寫出emmet表達式

html：5>（header>h1）+（nav>ul>（li>a）*4）+（div.container>section>（article.up>（h3+p）+article.down>（h3+p））+aside>article>（h3+p））+（footer>p）

這個表達式，通過快捷鍵擴展開，就成了下面的樣子

<！DOCTYPE html>

將文字添加進去，就完成了html網(wǎng)頁部分的設(shè)計。我在實際完成這個網(wǎng)頁的html部分時，用vim+emmet，僅僅用了1分鐘。請對比一下其他可視化編輯器的實現(xiàn)過程，體驗vim+emmet的強大。

步驟三：用瀏覽器打開測試

4 結(jié)論

使用vim作為文本編輯器，通過對目標網(wǎng)頁的準確分析，用emmet表達出目標網(wǎng)頁的結(jié)構(gòu)，可以快速完成html網(wǎng)頁，在教學過程中，學生可以學會分析html結(jié)構(gòu)，更好的體驗div+css設(shè)計帶來的模塊化實現(xiàn)，表現(xiàn)與結(jié)構(gòu)分離，學生將更加專注于網(wǎng)頁設(shè)計本身，是在學習網(wǎng)頁設(shè)計，而不是學習網(wǎng)頁設(shè)計工具軟件dreamweaver如何使用。

將開源平臺引入計算機教學，更能擴大學生視野，從邏輯上，最本質(zhì)的理解計算機領(lǐng)域各個方面的原理，而不是圍繞在一個工具集內(nèi)，學習這個工具集的規(guī)則，我們需要學習的是：廣泛適用的邏輯，這才是計算的本質(zhì)。

參考文獻：

[1] http：//blog.csdn.net/ailon__/article/details/48462739.

[2] https：//vim.sourceforge.io/

[3] https：//docs.emmet.io/

[4] https：//github.com/mattn/emmet-vim

[5] 黃穎.鄭代富，網(wǎng)頁設(shè)計與制作（第2版）[M].北京：中國工信出版集團，2015.

[6] 溫謙.CSS設(shè)計徹底研究[M].北京：人民郵電出版社，2008.