浅谈网页设计与制作课程

廖家莉

摘要：互联网时代，人们越来越离不开网络，因此越来越多的人学习计算机相关知识了，如软件、硬件、通信网络、人工智能、大数据、机器人编程等。不管是软件技术、移动应用、数字媒体、通信专业等都要学习网页设计，网页设计与制作是一门非常基础的课程，是计算机学院必开的一门课程。网页设计虽然简单，但想真正做好一个网站却没那么容易，网页设计的内容在不断地更新，网页设计的编辑器也越来越多。通过这几年的学习与观察，我发现很多公司员工会随着技术的发展使用不同的框架及编辑器来做网站，但学校教的内容比较基础的，很多老师只用一种软件，没给学生介绍更多的编辑器，让学生有更多的选择。该文主要讲述网页设计的学习路线;网页设计的不同编辑器及其优缺点;如何上好网页设计基础课程以及如何上好第一堂课等。

关键词：网页设计基础;HTML5;CSS3;框架;编辑器

中图分类号：TP311 文献标识码：A

文章编号：1009-3044（2020）01-0114-02

网页设计基础主要讲HTML+CSS。HTML是1990年创立的一种超文本标记语言，使用HTML标记对网页中的文本、图片、声音、视频等内容进行描述。HTML发展至今，经历了6个版本，现在最新的版本是HTML5。这个过程中新增了许多HT-ML标记，如：header、nay、footer、canvas等，同时也淘汰了一些标记，如frameset。HTML标记、属性、样式都在一个页面，使得页面越来越臃肿，于是CSS诞生了。1996年12月W3C发布了第一个有关样式的标准CSSl，目前最新的版本是CSS3。CSS（层叠样式表1主要用于设置HTML页面中的文本字体、颜色、大小、加粗、对齐方式;图片宽度、高度;div盒子模型的边框样式、内外边距和一些布局样式;还有CSS使用方式，选择器的使用及其优先级别。CSS不仅可以静态地修饰网页，还可以配合Ja—vaScript动态地对网页各元素进行修饰，同一网站可以换不同的风格。HTML就像修房子时搭的框架，而CSS就是装修，现在出了很多前端框架就是精装房，里面封装了很多组件、样式，我们可以直接使用。

1网页设计的学习路线

第一阶段学习网页设计基础，主要内容为HTML文件的基本结构;HTML常用标签：文字、段落、图像、超链接、表格、表单等标签;CSS样式：CSS使用方法、CSS选择器、盒子模型（border、padding、margin）浮动（float：lefffright）、定位技术（position：relative/absolute）等;网页布局：DIV+CSS布局和表格布局，表格布局相对于简单点，但不便于修改;DIV+CSS布局便于修改但兼容性问题难处理。以前学习网页还有frameset框架，做后台网站经常用到，非常实用，现在html5淘汰了这一标记，vue.js框架里面有template，可以用组件实现。学好基础知识后，做一些div+css布局的网站。

2网页设计编辑器

我在这几年学习的过程换了不少编辑器，比如Dreamweav-er、EditPlus、sublime Text、HBuilder、IntelliJ IDEA等。每种软件各有各的优缺点，我觉得可以根据自己做網站的需求使用不同的编辑器。Dreamweaver是可视化的编程软件，有代码、设计、拆分三种视图。我认为初学者很适合使用Dreamweaver软件，可以用拆分模式，一边敲代码一边看效果，而且有很多提示，很多老师教学都用的Dreamweaver软件。Dreamweaver还方便站点管理。不过刚开始学不建议使用提示，不然连标签、属性名都记不全，可以用记事本敲，使自己记得更牢。EditPlus是一款小巧但功能强大的编辑器，可以处理文本、HTML、程序语言，还可以无限制地撤消与重做，同时编辑多文件。Sublime Text是跨平台、当前前端开发的主流编辑器，Su～ime Text体积也小，但运行速度快、可以自动补全代码、代码高亮提示，sublime text编辑器的缺点是需要很多插件。HBuflder的最大优势是快，创建web项目时可以自动生成CSS、img、js文件夹，不需要再手动创建。HBuflder有完整的语法提示、代码块等，可以提高开发效率。

在企业上班，老板都很注重开发效率，时间就是金钱，Dreamweaver开发效率相当于要慢点，所以很多公司都用的是Sublime Text和HBuilder。但好多学校都用的Dreamweaver，不管是多媒体教室还是机房环境都安装的是Dreamweaver，对于老师来说，我的解决办法有两种，一种是老师可以自带SuNimeText安装包，因为SublimeText很小安装起来非常快;另一种是可以远程连接桌面，在自己的电脑上安装好这些软件，直接远程就好了。我上课是Dreamweaver、SuNime Text、HBuilder都给学生介绍了，都使用过，然后让学生自由选择用什么软件。

3如何上好网页设计课程

3.1如何上好第一堂课

俗话说“好的开端等于成功的一半”，如果你上好了第一堂课，学生不仅对网页设计会有兴趣，还会比较喜欢你，以后的出勤率应该也会比较高。我在高校从教五年了，现在上第一堂课都还有点小紧张。教师在上第一堂课时，一定要有自信，在学生心中塑造一个完美形象。

网页设计是专业基础课，一般在大一上期开设，也是学生入学的第一门专业课。因此网页设计的第一堂课更重要，网页设计的第一堂课一般不需要讲书本上的知识，可以讲以下几个方面：

I、行业发展，就业方向，比如软件行业有很多岗位：产品经理、前端设计、后台开发、数据库管理、软件测试等，其中后台开发又有不同技术。前端方向需要掌握HTML5+CSS3、javas-eript+JQuery、原型设计、前端框架等技术，java方向需要掌握ja_va、java web、spfingMVC、ssh框架等技术，微软方向需要掌握C#、asp.net、sql server等技术;

II、项目演示，演示不同类型的网站，如门户网站、职能网站、个人网站等;然后分析不同类型网站的共同点，设计原则等;最后再讲网站开发流程，让学生刚开始做项目时一定要养成良好的习惯;

III、说教材、说目录、说目标、说教学方法、说考核方式;先分析这门课程的整体框架，再说应该如何学习，学到什么程度;

总之，第一堂课老师要有自信，要给学生留下好的印象，让学生对该课程感兴趣。

3.2如何上好网页设计课程

最近几年微课、慕课、翻转课堂特别的火，课堂有趣，才会有更多的学生听课。俗话说台上一分钟台下十年功，想上好一堂课是需要花特别多的工夫。通过这几年的授课经验，我总结出来几点关于如何上好网页设计课程：

I、首先课前得把课备好，备课不仅要备学生，还要备教学内容。备学生的话要了解学生的基本水平，学生学习过哪些课程，针对不同的学生使用不同的教学方法。备教学内容的话要把内容多备一点，特别是新教师，掌握不好教学进度，讲课过陕会把自己准备的所有内容讲完了但还没下课。

II、上课的话分理论课和实训课，理论课的话，大专院校的学生的基础可能更差一点，需要讲得更基础，更细，拓展的可以更少点。实训课的话，刚开始的话可以先演示一遍，然后把效果图和代码截图给他们，再让学生做;等他们入门后，就只给效果图让他们自己完成。最后再项目化教学，带着学生做一项目，这样他们印象才更深刻，学得更好。

III、课后让学生多练习，多做项目，确定方向，学习相关知识。比如把自己做的网站放服务器上，用不同的终端看，不断美化、完善自己做的网站。

4结束语

通过这几年的学习与教学，我个人认为网页设计比后台开发更复杂。后台开发的方法一处编写随处可用，后台开发的语言都是相通的，学好一门语言再学其他的语言會觉得很简单。网页设计不一样，网页设计内容在不断地更新，需要不断地学习，网页设计还得有一定的美学基础。想做一个好的网站不是仅仅只靠网页设计基础就可以完成，还需要使用到javaseript、jquery、框架等很多方面的知识，特别是使用不同的框架，环境需求可能也不一样，可能会使用不同的编辑器。作为学生学习网页设计可以从div+css到HTML5+CSS3，再到前端框架，学了基本知识之后一定要多做项目，巩固对知识的理解。作为老师想上好网页设计课的话，要有丰富的项目经验，给学生讲起来才更有说服力，备课一定要充分，要让学生感兴趣，多做项目。