《Vim—emmet编辑环境下的高职电子商务网页设计课程教改》-工学论文，计算机论文-论文范文参考-科学狗论文网

标题

Vim—emmet编辑环境下的高职电子商务网页设计课程教改

范文

彭滔

摘要：国内网页设计教学，长期以来都是微软平台下，围绕Dreamwver展开，这种组合体现了高可用性，可视化开发的特点，但是它有各种弊端，平台封闭，版权成本高昂，平台的进化速度慢。为此在高职电子商务网页设计中引入新的时代特色，依托Linux 平台下的超强编辑器vim，emmet特有的快速开发，重新赋予网页设计新的亮点。

关键词：vim；emmet；电子商务；网页制作；教改

中图分类号：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

传统的网页设计课程通常以网页制作三剑客为核心，Dreamweaver，Flash，Fireworks，这种组合以可视化为噱头的指导思想，在教网页设计的过程产生了一定的问题，学生没有将重点放在网页制作本身，没有集中于掌握网页设计的知識点，可视化工具代替了必要的逻辑思考，学习网页制作变成了学习特定的应用软件dreamweaver，制作出来的html代码冗余度高，表面上看很风光，实际上脏乱差，头脑混乱不清。

中国当下的计算机教育应当脱离“微软+商务版权软件”培训中心的模式，学生考级就是围绕Window，Office，Sqlserver，Visual C这些版权昂贵的软件，让学生以为计算机教育就是微软系列产品的学习与操作，学生的思维完全被封闭。

开源软件的开放性特性（代码开源，允许任意修改）可以培养学生的创造性思维，原来条条道路通罗马，并非只有华山一条道。开源软件还可以大幅度降低教学成本，学院不用再掏巨资购买商用软件，同时也提高了信息安全系数，不再担心各种木马后门，间谍软件。（笔者使用开源软件2年，没有重装系统，没有遇到过病毒。）

在教学过程中使用开源软件组合实现网页设计教改有巨大的现实价值。本文通过案例研究剖析的方式，探讨linux环境下使用开源软件组合vim+emmet实现一个具体的网页设计全过程，为网页设计打开一扇新的窗户。

1 平台的搭建

本文以linux的发行版之一debian为例进行讲解，debian的安装过程参见网文《使用U盘安装Debian8.2.0系统图文、视频教程》，用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）操作系统平台上著名的文本编辑器（目前都有windows平台下的发行版），vim被称为“编辑器之神”，emacs被称为“ 神之编辑器”，它们都有30多年的历史，不断升级进化，已经影响了nix类平台及软件生态圈的建设，vim（emacs）可以终身使用，而各种商用编辑器频繁更新改版，在竞争中消亡，导致了学习成本的增加。

对很多linux发行版来说，vim（vi）是默认安装的emacs则不是。从入门门槛来看，vim更容易上手。

我们可以在网页设计中使用vim进行文本编辑，排版，运行测试，提高编辑效率。

sudo apt-get update

sudo apt-get install vim

vim的配置

1.不要保存临时文件（以～结尾的文件）

set nobackup

set nowritebackup

2.缩进

set tabstop=4

set sts=4

set expandtab

set softtabstop=4

set shiftwidth=4

3.数字行号

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是一款前端开发工具。但大多数的实现都有这样一个缺点：你必须先定义你得代码片段，并且不能再运行时进行拓展。

Emmet把片段这个概念提高到了一个新的层次：你可以设置CSS形式的能够动态被解析的表达式，然后根据你所输入的缩写来得到相应的内容。Emmet是很成熟的并且非常适用于编写HTML/XML 和 CSS 代码的前端开发人员，但也可以用于编程语言。

emmet可以快速编辑html及css文件的原因在于：它设计了一套缩写规则，通过快捷键（默认是ctrl+y再输入， [逗号]）展开缩写。

emmet快速编写html的过程分成三个步骤：原始界面的结构分析，利用html的知识，用div模块化网页结构；写出目标网页结构对应的emmet写法，再使用快捷键展开（通过展开后，还需多次使用emmet完善）；用浏览器打开进行测试。

下面介绍一下emmet的一些表达式。

整体模板产生的缩写标记 html：5

网页中各元素

在emmet 中，

用nav 表达；

用p 表达，其他各html标签的表达方式以此类推。

带属性的html元素

，这个p元素，用emmet表达出来是这样。

p.first

网页结构表达

1）父子关系表达

父子关系通过 > 表达，左侧是右侧的父亲，右侧是左侧的儿子。

emmet表达式： html>header

含义：html标签下，有个子元素 header

2）同胞关系表达

emmet表达式：header+container+footer

这里的三个html元素 header container footer 处于同一层次，他们是同胞关系。

为了便于划分各层次关系，同一层次可以用（），包含。

加一个括号后，（header+container+footer）更加清晰表达了 header container footer 处于同一层次。

3）复杂的父子-同胞关系表达

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

这个表达式包含两个层次：

第一层次：html：5 ，这是一个专用模板。

第二层次：三个html标签 header， nav， footer

其中nav又嵌套了两层，它有两个子标签

nav的第一层子标签 container

container的子标签（nav的第二层子标签）：有两个section，div 它们属于同一层次。

具有相同结构的多个子标签的表达式

下面的html结构网页片段，可以用emmet写成 nav>ul>（li>a）*4。

这里有一个需要特别关注的地方，（li>a）*4 ，li标签下面有个a标签，这种局部结构反复出现了4次。

有了上面的基础知识，我们就可以动手制作网页了。

3 网页制作实例

本文以下面的图例为示范，用vim+emmet快速产生这个页面。

步骤一：结构分析

这个页面的结构很简单：三个部分

头部：包含一个h1 文字：示范博客

中间是一个container：

这个container由两个部分组成：

左侧：上下两个articale

右侧：p

最下端footer：

版权标志。

步骤二：写出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网页部分的设计。我在实际完成这个网页的html部分时，用vim+emmet，仅仅用了1分钟。请对比一下其他可视化编辑器的实现过程，体验vim+emmet的强大。

步骤三：用浏览器打开测试

4 结论

使用vim作为文本编辑器，通过对目标网页的准确分析，用emmet表达出目标网页的结构，可以快速完成html网页，在教学过程中，学生可以学会分析html结构，更好的体验div+css设计带来的模块化实现，表现与结构分离，学生将更加专注于网页设计本身，是在学习网页设计，而不是学习网页设计工具软件dreamweaver如何使用。

将开源平台引入计算机教学，更能扩大学生视野，从逻辑上，最本质的理解计算机领域各个方面的原理，而不是围绕在一个工具集内，学习这个工具集的规则，我们需要学习的是：广泛适用的逻辑，这才是计算的本质。

参考文献：

[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] 黄颖.郑代富，网页设计与制作（第2版）[M].北京：中国工信出版集团，2015.

[6] 温谦.CSS设计彻底研究[M].北京：人民邮电出版社，2008.

随便看

科学优质学术资源、百科知识分享平台，免费提供知识科普、生活经验分享、中外学术论文、各类范文、学术文献、教学资料、学术期刊、会议、报纸、杂志、工具书等各类资源检索、在线阅读和软件app下载服务。