彭滔

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

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

中圖分類號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：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è)計(jì)課程通常以網(wǎng)頁制作三劍客為核心，Dreamweaver，F(xiàn)lash，F(xiàn)ireworks，這種組合以可視化為噱頭的指導(dǎo)思想，在教網(wǎng)頁設(shè)計(jì)的過程產(chǎn)生了一定的問題，學(xué)生沒有將重點(diǎn)放在網(wǎng)頁制作本身，沒有集中于掌握網(wǎng)頁設(shè)計(jì)的知識(shí)點(diǎn)，可視化工具代替了必要的邏輯思考，學(xué)習(xí)網(wǎng)頁制作變成了學(xué)習(xí)特定的應(yīng)用軟件dreamweaver，制作出來的html代碼冗余度高，表面上看很風(fēng)光，實(shí)際上臟亂差，頭腦混亂不清。

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

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

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

1 平臺(tái)的搭建

本文以linux的發(fā)行版之一debian為例進(jìn)行講解，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)平臺(tái)上著名的文本編輯器（目前都有windows平臺(tái)下的發(fā)行版），vim被稱為“編輯器之神”，emacs被稱為“ 神之編輯器”，它們都有30多年的歷史，不斷升級(jí)進(jìn)化，已經(jīng)影響了nix類平臺(tái)及軟件生態(tài)圈的建設(shè)，vim（emacs）可以終身使用，而各種商用編輯器頻繁更新改版，在競(jìng)爭(zhēng)中消亡，導(dǎo)致了學(xué)習(xí)成本的增加。

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

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

sudo apt-get update

sudo apt-get install vim

vim的配置

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

set nobackup

set nowritebackup

2.縮進(jìn)

set tabstop=4

set sts=4

set expandtab

set softtabstop=4

set shiftwidth=4

3.數(shù)字行號(hào)

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使用簡(jiǎn)介

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

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

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

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

下面介紹一下emmet的一些表達(dá)式。

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

網(wǎng)頁中各元素

在emmet 中，

用p 表達(dá)，其他各html標(biāo)簽的表達(dá)方式以此類推。

帶屬性的html元素

，這個(gè)p元素，用emmet表達(dá)出來是這樣。

p.first

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

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

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

emmet表達(dá)式： html>header

含義 ：html標(biāo)簽下，有個(gè)子元素 header

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

emmet表達(dá)式：header+container+footer

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

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

加一個(gè)括號(hào)后，（header+container+footer）更加清晰表達(dá)了 header container footer 處于同一層次。

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

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

這個(gè)表達(dá)式包含兩個(gè)層次：

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

第二層次：三個(gè)html標(biāo)簽 header， nav， footer

其中nav又嵌套了兩層，它有兩個(gè)子標(biāo)簽

nav的第一層子標(biāo)簽 container

container的子標(biāo)簽（nav的第二層子標(biāo)簽）：有兩個(gè)section，div 它們屬于同一層次。

具有相同結(jié)構(gòu)的多個(gè)子標(biāo)簽的表達(dá)式

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

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

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

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

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

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

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

頭部：包含一個(gè)h1 文字：示范博客

中間是一個(gè)container：

這個(gè)container由兩個(gè)部分組成：

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

右側(cè)：p

最下端footer：

版權(quán)標(biāo)志。

步驟二：寫出emmet表達(dá)式

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）

這個(gè)表達(dá)式，通過快捷鍵擴(kuò)展開，就成了下面的樣子

<！DOCTYPE html>

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

步驟三：用瀏覽器打開測(cè)試

4 結(jié)論

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

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

參考文獻(xiàn)：

[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è)計(jì)與制作（第2版）[M].北京：中國(guó)工信出版集團(tuán)，2015.

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