实训一 制作一个简单的网页

实训一 制作一个简单的网页（精选5篇）

篇1：实训一 制作一个简单的网页

实训一 创建和管理站点、制作站点首页

实训目标：用Dreamweaver制作一个简单的网页

一、用Dreamweaver创建和管理站点

（一）在D盘上创建“畅想未来”站点

在菜单栏中选择“站点”→“新建站点”，在文本框中输入网站的名称“畅想未来”。

（二）对站点进行规划

1．在文件面板中搭建站点的结构

（1）在站点根文件夹下建立4个子文件夹“city”、“novel”、“outspace”和“travel”。在文件面板中右单击站点“畅想未来”，选择“新建文件夹”命令。

2）在文件夹“city”中建4个子文件夹“images”、“sound”、“swf”和“webpages”。

3）将文件夹“city”中的4个子文件夹分别复制到“novel”、“outspace”和“travel”中。6（（方法：依次选中“images”、“sound”、“swf”和“webpages”，然后按住Ctrl键，分别将其拖动到“novel”、“outspace”和“travel”中。

结果如下图所示。

（二）设置网站首页，重新搭建站点结构

1．设置网站首页

（1）右单击站点的根文件夹，从弹出的快捷菜单中选择“新建文件”命令。（2）将文件重命名为“index.html”。（3）将其设置成首页。

2．重新搭建站点结构

（1）将站点的根文件夹下的4个子文件夹“city”、“novel”、“outspace”和“travel”删除。（2）在站点的根文件夹下新建2个子文件夹“images”和“webpages”，如下图所示。

在Dreamweaver中打开文件“txt3_1.txt”，并将其另存为index.html。

二、设置index.html网页属性

选择“修改”→“页面属性”，打开“页面属性”对话框。

（一）设置页面外观

在“分类”→“外观”中按下图设置“页面字体”：宋体、“文本颜色”：#034881、“背景颜色”：#B8DCF4。

（二）设置页面标题

在“分类”→“标题/编码”中按下图设置“标题”：畅想未来。

（三）按F12键，保存并预览网页。

三、制作index.html网页

（一）编辑文本

1．编辑网页中的文本。

按下图编辑index.html网页中的文本。

换行标记
的使用

HTML文件中任何位置只要使用了
标记，当文件显示在浏览器中时，该位置之后的文字将显示于下一行，该
标记就是起到换行的标记。段落标记

的使用

由

标记所标识和文字，代表同一个段落的文字。在浏览器中，不同段落文字间除了换行外，有时还会以一行空白加以间隔，以便区别出文字的不同段落，其语法如下：

文字

的有什么区别呢？通俗的讲就是，它们在分行的时候
分得行比

分得行距比较大！

在HTML代码中，
是换行符，表示强制性换到下一行。而

则是分段符，相当于回车，等同于两个
。

Copyright ? 2007200x 畅想工作室，All Rights Reserved
如果您对我们的服务有任何意见或建议，请惠赐E-mail至:teach_ie@163.com
联系电话：0755-12345678 联系人：丝雨轻梦

2．设置文本格式

（1）在第一行前输入2个空格，并去掉最后3行之间的空行，如下图所示。

（2）将“未来都市”、“未来旅游”、“未来通讯”、“展望太空”、“科幻小说”设置为“标题2”，并为其添加项目符号。

（3）将“设为首页”、“加入收藏”、“联系我们”、“网站管理”设置为“标题5”。（4）将最后4行文本的对齐方式设置为“居中”。（5）将最后3行文本的颜色设置为灰色（#999999）。

3．添加和删除中文字体

（1）添加“隶书”、“华文行楷”等中文字体。

（2）将“未来都市”、“未来旅游”、“未来通讯”、“展望太空”、“科幻小说”5行文字的字体设置为华文行楷。

（3）按F12，保存并预览网页。

（二）在页面中插入和处理图象

1．插入图象

（1）在index.html页面顶端插入图象“img3_1.jpg”。

（a）将光标置于页面左上角的起始处，然后按回车键，生成一个空行。

（b）在菜单栏中选择“插入”→“图象”命令，找到素材文件夹webcoursechapter03images中的图象“img3_1.jpg”。注意：要将其复制到站点的“images”文件夹中。

（c）用同样的方法，在第一段下面插入图象“img3_2.jpg”，效果如下图所示。

2．调整图象“img3_1.jpg”、“img3_2.jpg”的对齐方式

（1）使图象“img3_1.jpg”居中对齐。方法：选中图象“img3_1.jpg”，在属性面板中单击“居中对齐”按钮。

（2）使图象“img3_2.jpg”左对齐。方法同上。3．调整图象“img3_2.jpg”的周边间距

选中图象“img3_2.jpg”，按下图设置图象的垂直边距和水平边距。

4．为图象“img3_2.jpg”添加提示文本：科幻图象

方法：选中图象“img3_2.jpg”，在“属性”面板的“替换”文本框中输入“科幻图象”，然后按回车键。按F12，保存并预览网页，效果如下图所示。

（三）插入水平线

1．在页面中插入水平线

（1）将插入点置于“设为首页”文本前。

（2）在菜单栏中选择“插入”→“HTML”→“水平线”。

2．修改水平线

将水平线设置成居中对齐、宽：920像素、高：5像素。如下图所示。

3．将水平线的颜色设置为蓝色

（1）选中水平线。

（2）单击“属性”面板右侧的“快速标签编辑器”中输入“color=”#024918””。

按钮，打开“快速标签编辑器”，如下图所示，在其

（3）按F12键预览，可以看到水平线变为蓝色了。

（四）插入特殊字符

1．在页面页脚插入版权字符“©”（Ctrl+Alt+c）

（1）删除页脚中的“？”。

（2）在菜单栏上选择“插入”→“HTML”→“特殊字符”，从单出的子菜单中选择“版权”。

2．改变栏目颜色

将“未来都市”、“未来旅游”、“未来通讯”、“展望太空”、“科幻小说”5行文本的颜色设置为与顶端“畅想未来”logo相同的颜色。

方法：先选中文本，然后在文本的“属性”面板上单击“文本颜色”按钮，拖动鼠标移动滴管到所要设置的颜色上单击即可，如下图所示。

至此，本页面已完成，完成后的效果如下。

四、实训总结

（一）本实训介绍了利用Dreamweaver创建站点的方法

1．建立站点，首先要规划站点结构，然后创建站点。2．其中重点介绍了利用“文件”面板管理站点文件的方法。

（二）制作一个简单的网页

1．设置页面属性 2．网页中的基本元素

（1）在网页中编辑文本 字体格式和段落格式（2）在网页中插入图片 图片格式的设置

（3）在网页中插入水平线 水平线格式的设置

（4）在网页中插入特殊字符

五、作业

参照提供的作业结果，利用所给的素材文件，制作一个介绍台湾音乐团体“信乐团”的网站，要求如下：

1．在Dreamweaver创建本地站点文件夹，将网页用到的素材按类别复制到站点文件夹中。2．新建index.html文件，设置页面背景图象为bg.jpg，网页标题为“信乐团”。3．插入基本页面元素，包括文本、图象、水平线和日期对象，效果如下图所示。

4．对图象进行适当的调整，包括大小、对齐方式、与周边对象的距离及环绕方式等，效果如下图所示。5．对文本设置相应的字符格式和段落格式，效果如下图所示。

篇2：实训一 制作一个简单的网页

【课时安排】1课时 【教学内容分析】

本节课的主题：让学生了解网页概念并利用FrontPage软件制作简单的网页，学会建立网站的制作流程并建立一个只有文字的网页，本课是用该软件 创建以“诗文荟萃”为主题的网站，也就是用所掌握的信息技术知识解决生活中的实际问题，使学生能够学以致用。发挥信息技术学科的优势，以素质教育的新理 念，增强学生的动手能力，提高学生的综合素质。

以教材为基石，作为构建知识的桥梁，依据《课程标准》，创造性、合理的对教材进行二次开发与重组。如：导入新课时，利用学生对美好事物的向往，激发 学生的求知欲和学习兴趣；采用任务驱动教学，增强学生自学能力；充分采用教材资源，使学生学会自学，并有的放矢；对学生的评价方式，采用学生作品展示，是 学生学习的一个延续，对学生学习起到一种推进的作用。

【分析教学对象】

1、学生的年龄特点和认知特点

八年级的学生对周围的一切充满了好奇，他们急于表现自己，对于教师布置的任务能够认真对待。对于FrontPage的知识了解不多；对网站兴趣较 大，但制作知识几乎为零。本节课给学生提出一个初步的任务：创建一网站，并制作一个简单网页，让学生体验初步的成功，这对于今后的学习有很大帮助。初二的学生创作欲强，因此本节课中，提倡、鼓励独立完成作品，培养学生自学意识与自学能力。

2、学习者对即将学习的内容应该具备的水平

本课是学生初次认识FrontPage并能应用它制作简单的网页，培养学生综合运用知识解决问题的能力，以及各方面素质的一次综合评价。

【教学目标的设计】

1.知识目标（1）了解网页的概念；

（2）了解建立网站的一般流程；

（3）初识FrontPage2003并学会建立网站；（4）学习制作一个只有文字的简单网页。2.技能目标

学生通过探究学习过程中，掌握网站的建立方法与创建简单网页的操作。3.情感目标

培养学生在学习过程，自主探究能力和分类汇总知识的能力。

【教学重点与难点】

（1）重点：建立网站、保存网页的方法。

（2）难点：网站与网页的区别，网页文件名与文件标题的区别。

【教学策略设计】

1、根据教材内容和学生的实际情况，本课采用“任务驱动”、“问题──探究”等教学方法，创设一个板报展览的情境（创设情境），以逐个任务和问题驱动学生多动手、多思考、多实践，从而了解和掌握FrontPage的基本知识和技能。

2、本课传授给学生的学法是“问题驱动下的自主学习──分组协作学习──探究发现学习”。让学生在学习过程中，提倡某些问题的分组协作与自主探究。建构主义学习理论强调以学生为中心，要求学生由知识的灌输对象转变为信 息加工的主体。故此本课教学过程中，以问题驱动，激发求知欲望，让学生带着逐个任务通过探究发现、相互合作、实际操作等方式，自主学习，使学生在完成任务的过程中不知不觉实现知识的传递、迁移和融合。

3、是在网络教室中完成的，利用多媒体局域网络，实现教师演示、个别指导、网上交流、作品提交及作品展示评比。在出现共性问题与个别错误时教师可以 利用网络教室软件演示和个别指导，在创作作品的同时，生生可以进行网上交流。体现教师的指导、组织作用，学生主体、探究协作地位。

【教学评价设计】 1.采用小组间竞争机制，比赛哪个小组解决问题或是完成任务的速度快与质量高，增强学生协作互助的意识。

2.最后进行作品展示，评出“速度”奖，“质量”奖，“自觉标兵”奖等几个奖项，进一步激发学生的学习热情。对自己的作品有一个反思，增加相互学习、相互交流的机会，让学生学会自己梳理知识，增强自学能力。

【教学过程设计】

一、情景导入

网络就像是一个信息的海洋，我们就像是一条小鱼，可以畅游在信息的海洋，获取各种各样的信息，这些信息都是以网页形式存在于网络中，但并不真正属于我们自己，大家想不想在网上拥有自己家（网站）呢？（激发学生的求知欲）

（学生回答：想）

从这节课开始我们就学习制作网页，到底什么是网页呢？

二、问题驱动

任务一：大家打开课本P46，通过阅读解网页概念，超链接标志？看哪个小组能最先解答问题？

学生阅读课本（2分钟）分小组讨论自己的理解„„ 小结：

1.网页使用文字、图形、声音影视等多媒体的形式表达信息，使表达的信息更加鲜活；

2.网页如同大家一样都必须有一个“家”，这个家就是网站； 3.存在网站中的网页之间采用了链接式的方法将网页串接起来。

任务二：在我们了解网页与网站后，会有疑问：使用什么软件制作网页呢？带着这个问题阅读课本P45。看哪个小组成员最先完成？

学生阅读并实践„„ 小结：

大家会有疑问为什么选择它，还有别的软件吗？有，如Dream weaver、网页制作软件等，课本中使用了FrontPage这个软件简单易学，并且窗口与我们使用操作系统windows都是基本一致的。任务三：有了制作软件，如何才能做好一个网站呢？该做哪些准备工作呢？ 学生自读P47，总结制作网站流程。

请几位学生叙述制作网站的流程，强化“三思而行的意识”，避免盲目操作。并总结。

任务四：自学P48了解网页制作具Front page 2003。自读教材，初识软件界面。

任务五：创建“诗文荟萃”网站。教材要求将站点建在“D：诗文荟萃”，但

因机房是多个班共用，所以就要求学生先建立个人文件夹，然后再建立站点例：“F:张三诗文荟萃”。

学生自主学习P49“新建网站”，小组讨论并实践„„

以小组为单位，师查看完成情况，完成快的学生帮助慢的同学，实现共同进步。

广播教学：我们建立网页默认名称是new_page_1.htm，但是通常使用的主页文件名是index类型，是web页。除了主页以外，其他的网 页名称大家可以自由命名（建议大家尽量使用英文或数字作为网页名，上传到网上后易于检索到，地址不易出错。）保存时有两个文件夹，_private文件夹 用来存放制作网页过程中自动生成的一些文件，请大家不要随意删除，以免影响网页的浏览效果；images文件夹用来存放网页中用到的图片文件，大家在今后 的网页中使用到的图片全保存到这个文件夹中；

任务六：制作一个只有文字的网页。看哪位同学完成的速度最快，质量最高，创作主题明确风格优美？（参照P50）

学生动手实践„„

学生上台边讲边演示，培养学生语言表达能力。

师：广播教学，P51“小博士”。（因此内容较多，且文件名和文件标题是一难点内容）

任务七：继续添加网页，P52“做一做”、P53“动动手”。（此处老师应将用到的大篇幅文字素材及时发至学生机）

学生独立完成任务；学生代表上台演示教学。

三、达标练习

学生独立完成课后练习（此练习要求只有完成课堂任务的基础之上才可以做，目的是不要求学生贪多，而追求知识的精）。

四、作品提交与展示

让学生自主展示作品，并让其他同学做评价，评出其中的优点和不足，然后老师再做出评价。让学生在评价和被评价中得到进步与提高。

五、总结

让学生自己进行总结„„

【教学反思】

这节课的设计两头松中间紧，在时间的把握上可以增加一定的弹性。带着疑问使学生逐步进入到网页制作路途中来，有利于下节课内容的开展，同时也激发学生的兴趣，培养学生自主探究能力。知识点上的衔接比较紧密，要注重学生分类汇总知识能力的培养。

篇3：如何制作简单的个人网页

制作个人主页、包括网站设计的最佳工具软件是M A R C O M E D I A公司的网页制作三剑客系列：Dreamweaver, Flash, Fireworks，但是有的时候如果我们不用这些专用软件工具，也可以制作出一些简单实用的个人网页。

一、准备材料

首先要做好个人计划，即自己要在网页上告诉读者自己想要表达的意愿，以我们经常提到的3个方面为例：自我介绍、我的爱好、我的工作, 那么就先新建一个总目录的文件夹（比如C:myhome）, 这个文件夹用来放你的所有文件，然后在这个目录建立3个子目录：ziwojieshao, aihao, gongzuo（子目录的文件名可以根据个人来定，最好小写）。然后将你的材料分类放进相应的子目录。比如要把自己的一些照片、视频、音乐等放进去，那么你可以选择放在ziwojieshao这个子目录里。

需要注意的是, 网上只能使用JPG和GIF两种图像格式，其他诸如BMP和TIF等很通用的格式都不能用在网上, 因为它们太大了, 但可以用图像软件进行转换，比如Office 97的照片编辑器，把你准备放在主页上的图像放进相应的目录里后, 就可以开始制作了。

二、开始制作

制作的时候不一定需要用复杂的H t m l语言，可以用Netscape4.0, Word7.0，或者Frontpage。打开Netscape，在File菜单里选Edit Page, 便可以制作了。文字的处理基本跟W o r d没什么两样，关键是插入图片和产生链接，我们先做关于自我介绍的一页，先写上“大家好，我是×××，下面是我的照片：”这时要放图片了，只须点击Insert菜单，选取Image, 在Choosefile里选取你的图像文件即可，然后把这个文件保存ziwojieshao.html文件，放在ziwojieshao的目录下。现在必须做封面了，封面可以写：“欢迎来到×××的主页”以下是“自我介绍，我的爱好，我的工作”。自我介绍要链接到下一页去，只须用鼠标选“自我介绍”后按鼠标右键，再选create link，然后再选ziwojieshao目录下的ziwojieshao.html，就将“自我介绍”链接到下一页，以后在浏览器中一按，就可以跳到镶有你靓照的页面啦。

在封面做好所有链接和图片后，记住必须将这一页保存为index.htm (有的主机要求必须为index.html) , 因为网页默认的主页名称是index.制作主页其实很简单，只要多进行实际制作，熟能生巧。

三、将制作好的页面放在网上

要在网上安自己的“家”，必须先申请一个主页空间，即向某一个主机申请一块硬盘空间。现在有较多的主机提供免费主页空间，这些主机不仅提供免费个人主页空间，并且还提供留言簿、计数器等很有用的功能。只要到有关站点申请即可，申请完成以后用FTP将你所有的主页文件上传至主机指定的目录就可以了。

需要注意的是，一定要保持网页的相对位置，否则会看不到网页，有很多人网页传上去了可是看不到, 老是出现网页错误，都是因为位置的问题，只要把位置改动一下就可以了。

至此，一个简单的个人网页就制作完成了，如果你想要与众不同的网页，可以在你的主页里面添加一些个性比较鲜明的内容来突出你的作品。

四、网页维护

这是网页制作完成后的长久维持问题，个人网页的维护和更新可以根据自己的需要来进行，如可以根据自己的时间、自己的见闻等。网页的定期维护和更新是很重要的，如果网页得不到及时的维护和更新，那么个人网页也就形同虚设，起不到任何作用，所以建立个人网页的同时就应该考虑到如何维护和更新，以便使自己的“家”越来越温馨且有创意。

摘要：随着科技的进步和Internet的普及, 越来越多的学生想把自己的“家”搬进网络, 首先要把网页制作好, 然后再发布到网站上, 本文用最简单的步骤介绍如何制作一个简单但是实用的个人网页。

关键词：制作网页,目录,链接

参考文献

[1]孙宇.网页制作实例大讲堂[M].北京:人民邮电出版社, 2007

篇4：实训一 制作一个简单的网页

关键词：网页设计与制作；实训；拓展训练；项目实战

中图分类号：TP393 文献标识码：A 文章编号：1674-7712 （2012） 16-0138-01

《网页设计与制作》是一门实践性、操作性和创新性很强的课程，它能很好地锻炼学生的动手能力和团队协作能力，并且还能紧贴市场，做到以典型工作过程为导向，进行实际项目的开发训练，使学生应聘的时候不再只是有理论知识，而没有任何实践经验。以此来真正做到理论、实践并行，与企业的工作需求接轨，培养应用型的专业人才。

《网页设计与制作》课程是我院多个专业的核心课程，如计算机应用技术、网络技术以及广告设计等专业都开设了此门课程，该课程对学生的操作练习有较高的要求，实训的教学内容都是融入在课堂教学中，由于课程安排的比较分散，不能有效地集中训练学生的动手操作能力以及策划设计网页的能力，学生在学完该课程之后，有的不能独立地完成网站规划和页面设计，有的设计效果不能达到预想的功能和视觉效果。因此，实训课程在《网页设计与制作》教学中起着比较重要的作用。根据《网页设计与制作》课程的这一特点以及我的个人教学经验，下面对《网页设计与制作》实训教学谈一下自己的意见和看法。

一、提高教师的专业技能

作为一名教师，他既是课堂的领路人，又是学生学习的辅导者，教师的专业水平直接影响着学生各方面能力的提高。职业教育传授的不仅仅是理论知识，还要传授学生操作技能，培养学生的动手能力。在高职的教学中《网页设计与制作》的实训课程主要就是培养学生的实践动手能力，要求学生能够通过所学知识做出优秀的作品，因此这门课程对学生的动手实践能力要求是非常高的，这就要求教师首先要具有较强的实践操作能力，只有教师具有了一定的项目实践经验，才能充分地指导学生完成优秀的网页作品。因此，教师平时就要注重理论与实践相结合，加强自己的企业实践，在补充自身理论知识的同时，还要不断提高自身的专业技能和实践能力。

二、多种教学模式相结合，培养学生学习兴趣

（一）通过优秀作品赏析，激发学生的学习兴趣

在授课初始阶段，准备一些精彩的网站案例，在课堂上演示。在展示优秀网站案例的同时，学习网页制作技术之前首先让学生欣赏优美网页，教师分析网站的整体设计、网页的结构布局以及颜色搭配，让学生边欣赏网站，边听教师讲解，在美的熏陶中，让学生能够感觉到一个好的网站不仅仅有宣传推广的作用，它更是一件艺术品，完成它是需要倾注心血的。

每个教学单元中都去展示相应的网站案例，并且在网站案例展示的同时，引导学生去思考网站的美工、布局以及样式等都是怎样完成的，自己能否通过努力完成这样优秀的作品。几节课下来，就有不少学生跃跃欲试，从而有效地调动学生的积极性，激发学生的学习兴趣。

（二）阶段测试训练

通过过程考核，提高学生学习的紧迫感，巩固学生的阶段性学习成果。

首先教师布置本次课的实训任务，并分析其实训要点；然后学生根据本次任务开始制作网页，教师进行辅导；实训完成后教师对实训过程中出现的问题进行分析解决，并选几位学生的网页作品进行展示，其他学生对其进行点评。

（三）拓展训练

可以通过课外兴趣小组集体活动等形式，提高学生的人文素养。课余时间充分利用网络资源进行课外拓展实践，如果遇到疑难问题学生可以通过”E-mail”和“QQ留言”的方式与辅导教师取得联系、化解难题。利用课外拓展实践的方法对于能力强的学生可以进一步提高他们的操作技能；对于能力差的学生可以解决他们存在的问题。

（四）项目实战训练

将实际项目引入进教学，并对其进行任务分解。

例如让学生制作各行业的门户网站，首先教师以客户的角色为学生布置项目，学生进行市场调研，撰写需求分析报告；然后学生自己制定项目实施计划，进行项目设计实施；教师再以客户的角色验收项目，进行评价；最后学生撰写项目总结。以这样一个过程让学生在开发实际项目中提高职业能力，培养他们的工程意识。

三、增加实训课程的课时，提高学生的动手能力

实训课程主要是在强化理论知识的同时提高学生的操作技能，因此实训课程必须是以学生操作为主，教师辅导为辅，在实训过程中帮助学生解决遇到的问题。从网站的策划、素材的搜集到网站页面的设计布局、网页的制作以及网站的测试与发布等等，学生都要自己独立去完成，在整个实训过程中学生会遇到不同程度的问题，教师可以在旁协助。学生就在这样一个不断遇到问题、解决问题的过程中提高自己的能力。实训结束后有不少学生会感慨到实训一个礼拜比上一个学期的课学到的知识要多很多。因此实训不仅仅是学生制作网站的过程，更是学生自我学习，自我提高，自我评价的过程。

同时实训的环境也是非常重要的，实训课程基本都是在微机室完成的，在微机室里学生可以实现一人一机，并且每台电脑都直接与互联网相连，学生在实训过程中，可以上网查找相关资料，搜集所需素材，解决实训中遇到的问题，同时还可以直接通过教师、同学的帮助快速解决问题。

四、结束语

《网页设计与制作》是一门专业性很强的课程，在教学过程中突破传统理论教学和讲解为主的模式，把课程中的理论内容，合理地穿插到实践教学中，把原来枯燥、单调的讲解通过实践环节让学生消化和掌握。通过实训达到高职高专学生的培养目标。体现以学生为本，最大限度地调动学生自主学习的积极性，培养了学生的综合能力，使学生掌握一门技巧，这样对教师也是一种锻炼和提高。

参考文献：

[1]瞿江.浅谈网页制作实训教学[J].电脑知识与技术，2011，26.

[2]张丽香.高校《网页设计》课程教学探讨[J].大众科技，2006，05.

篇5：浅谈网页制作实训教学

《网页制作与网站设计实训》课程有很强的实践性，能有效地锻炼学生的动手能力、组织策划能力以及团队协作能力，且能够紧贴市场，做到以工作过程为导向，进行实际项目的训练，使学生在应聘时不再只有理论知识，而没有任何实际经验。真正做到理论与实践并行，与企业需求接轨，培养应用型人才。

我院《网页制作与网站设计实训》课程是在网页制作理论与实验课程之后，网页制作理论课程主要讲解网页制作的相关知识点，以一个具体实例贯穿整个过程，在实例讲解中穿插知识点，讲解理论知识的同时进行相关的实验，即采用项目化教学方法，实训内容在理论课程之后，有一周的时间，共30课时，在这一周时间内，学生以小组方式与企业合作确定主题，规划站点，页面设计和布局，创建内容资源，最后对网站进行测试和发布，通过一周的实训课程能够综合学生前面所学知识，使学生完整地参与网站制作项目过程，提高学生的动手实践能力。根据笔者的教学经验，下面粗浅地谈谈对网页制作实训教学的一些意见和看法。

1 加强教师培训，提高教师专业水平

教师是课堂的引导者，是学生学习的辅导者、资料提供者，教师的专业水平对学生各方面能力的提高起着重要作用。教育部《关于加强高职高专院校师资队伍建设意见》指出：高职院校要支持教师参与产学研结合、专业实践能力培训等措施，提高教师队伍的“双师”素质。

职业教育不仅仅是传授理论知识，更重要的是培养学生的动手能力，传授学生技能。而高职网页制作实训课程主要是培养学生的动手能力，要求学生能够应用相关知识完成具体网页，因此对学生的动手实践能力要求较高，同时也要求教师具有较强的实际操作能力，只有教师具有了一定的项目实践经验，才能充分地指导学生完成优秀的作品。因此，教师平时就应该注重产学研结合，加强企业实践，在提高自身理论知识的同时，不断提高自身的实践能力和专业技能。

2 多种方法结合，培养学生兴趣

孔子说过：“知之者不如好知者，好知者不如乐之者。”兴趣是学生最好的老师，只有学生对此课程有了兴趣，才能将学生的被动学习转变为主动学习，消极学习转变为积极学习，如此才能发挥学生的最大效率，提高实训效率。

在网页实训中我们采用下列方法来培养学生兴趣：

2.1 精彩网站案例展示，激发学生学习热情

在实训初始阶段，精心准备一些精彩的网页案例，在课堂上演示。在展示优秀网站案例的同时，教师对网站的整体设计，网站的布局，以及网站特效等多方面进行分析，学生可以一边欣赏网站背景音乐，一边观看网站，一边听教师讲解，入情入境，感受美的氛围，受到美的熏陶。让学生感觉好的网站不仅仅有宣传推广的作用，更是一件艺术品，是需要倾注心血去完成的。

在网站案例展示的同时，引导学生思考网站的美工、动画、布局、样式等，思考自己能否通过努力完成如此优秀的站点。几节课下来，不少学生都跃跃欲试，从而有效地激发了学生的学习热情。

2.2 网页元素制作实例与特效讲解，激发学生学习兴趣

实训课程的教学安排与理论课程应该有所不同，实训课程中学生已经具备了相关的网页制作理论知识，因此，在实训过程中分网页元素进行讲解，如网站的logo、banner、导航等分主题进行讲解，讲解时注重联系实际，以实际案例制作过程做演示，同时引导学生一起完成，讲解过程中注重介绍相关软件，如动画制作软件，图片处理软件，有一些小软件能够以简单的操作步骤完成较好地效果，通过相关软件的制作，学生都能够制作出精美的logo、banner、导航条等，不少学生感觉较有成就感，学习兴趣高涨。

同时还选择一些网页特效给学生进行介绍，鼓励学生自己多查阅书籍、参考相关网站，利用特效给自己的网站增色，效果明显。

2.3 自主选择网站设计内容，提高学生学习积极性

在实训过程中，要求学生自定主题进行网站的制作与设计，不少学生选择自己感兴趣的主题，如各地美食、宠物乐园、个人博客、班级网站、当地旅游、某某公司等等，通过自拟主题，使学生在自己的兴趣基础上完成相关网页，学生学习积极性明显提高。

3 增加实践课时，锻炼学生动手能力

实训课主要目的为强化理论知识，提高操作技能，因此实训课必须以学生动手为主，教师进行相关的辅导，帮助学生解决相关问题。学生通过实训动手制作网站，从网站的策划开始，到素材的搜集、页面设计的规划和布局、页面的制作、网页的测试与发布等等，在整个过程中学生会遇到不同的问题，通过在不断地遇到问题、解决问题过程中从而不断提高。

不少学生在实训结束后感慨：实训一个礼拜比上了一个学期的课学到的都要多。由此可见，实训过程不仅是学生操作完成网站的过程，更是学生自我学习，提高的机会。

实训的环境也很重要，实训课基本都是在机房完成，在机房学生可以实现一人一台机器，且机器直接与互联网相连，学生在实训过程中，可以通过网络查找资料，搜集素材，解决问题，同时还可以通过教师、同学的帮助快速解决问题，能有效提高学习效率，同时大量的动手实践时间能够快速有效地提高学生动手能力。

4 分组合作，增强学生团队合作能力

分组合作学习(Cooperative Learning)是20世纪70年代兴起于美国，并在20世纪70年代中期至80年代中期取得实质性进展的一种教学理论与策略体系。合作学习对于提高学生学习成绩促进学生良好非智力品质的发展等方面具有显著成效因此被公认为是一种比较有有效地教学模式。

在网页实训中将学生3-4名进行分组，自由组合，每组中设立组长一名，负责统筹协调相关问题，组员根据自己的特长自愿选择自己在团队中的分工，如此可以让每个学生在小组中找到自己的位置，调动每个学生的积极性，同心协力完成网站。同时在此过程中还可以锻炼学生的人际交往以及合作协调能力，小组间形成竞赛关系，在实训结束时请小组成员演示并介绍本组作品，评选出最佳网站。通过如此活动，不仅增强了学生的学习积极性，更能有效地提高学生的合作能力、表达能力以及动手能力等多方面共同发展。

5 校企合作，培养学生职业技能

职业技能教育是职业教育的根本任务，因此职业技能是学生的从业技能，是学生生存的保障，培养学生的职业技能是确保每个学生进入市场竞争的就业基础。高职院校应积极与企业合作，建立校企合作，一方面使教师有企业实践的机会，不断提高自身实践能力，另一方面增加学生的企业实践经验，使学生能够融入到企业生产和管理时间中，同时也能为企业创造经济效益。

教师可以将网页实训的内容实际化，以具体企业网站的制作做为每组实训的题目，要求学生自己与企业沟通，了解企业需求，制定具体的网页设计与制作方案，同时认课教师可聘请企业经验丰富的工程师来到实训课堂，或带领学生直接去到校外实训基地，请公司工程师给学生讲解指导。通过校企合作，使学生更了解企业需求，熟悉企业，从而提高学生就业。

6 结束语

《网页制作与网站设计实训》课程对于培养学生的学习兴趣、动手能力以及团队合作能力都有重要的意义，因此作为教师更应从多方面提高自身素质，带领学生参与企业合作，提高学生的实践动手能力，为学生就业打好基础。

摘要：《网页制作与网站设计实训》课程有很强的实践性, 能有效地锻炼学生的动手能力、组织策划能力以及团队协作能力, 该文从五个方面谈了对网页实训教学的意见与看法。

关键词：网页实训,兴趣,分组合作,校企合作

参考文献

[1]张伟娜.《网页设计与制作》课程教学的探讨与实践[J].中国教育信息化, 2008 (3) .

[2]李捷, 罗拥军.《网页制作技术》项目教学法的研究与实践[J].职业教育研究, 2008 (3) .