网页设计教学案例（最终五篇）

第一篇：网页设计教学案例

《网页设计》之站点的建立教学案例

新疆阜康市厦门实验小学成伟

一、教学目标

1、知道站点、主页的概念，能在指定位置建立只有一个网页的站点；

2、认识FRONTPAGE的界面；

3、掌握在主页中插入文字、图片、水平线；

4、掌握页面文件与图片的保存。

二、教学重点

1、能在指定位置建立只有一个网页的站点（难点）

2、能在页面中插入文字、图片、水平线

3、掌握页面文件与图片的保存（难点）

三、教学方法

在教学中，一方面采用比较教学的方法，促进学生知识的迁移；另一方面，提供学生一个导学课件，让学生根据这个网络环境下的课件自己探索学习，以满足不同层次学生的需求。

四、教学过程 设计

教师活动：

1、引入课题：（激发兴趣，活跃气氛）

同学们喜不喜欢上网？经常上新浪、百度等，有没有同学知道新浪、百度称做什么？

（网站）

浏览新浪网站，浏览的第一个页面称为什么？

（主页）

问题1：网站是不是就是网页？用自己的语言描述一下网站的概念

（网站包含多个网页，通过超链接把不同的页面链接起来）

问题2：网页是不是就是主页？

(第一个页面称为主页,网站设计者可以确定哪一个是主页,主页的文件名一般为：index.htm,主页也是网页)

设计网站一般必须经过两个步骤，首先是在计算机里做好，然后发布在internet上，让所有的人访问浏览。

今天我们学习用Frontpage建立站点，制作一个主页。先来研究一下没有发布的网站,打开教师做的网站

问：同学们看到了什么？

（文件夹）

总结：

可以这样理解网站：在资源管理器里，网站表现为一个文件夹，里面存放的是所有与网站相关的文件。

打开主页，浏览页面，这是老师做的一个导学课件，将帮助大家完成学习任务。

请学生浏览教师课件，了解学习任务

2、新建站点

FRONTPAGE的启动

问：与word比较，有什么不同？

（增加了视图区，编辑区有三个窗口）

总结：

视图区：多种视图模式是为了方便网站的管理。制作网页时，必须在网页视图中编辑页面

普通窗口：鼠标在闪动，可编辑、修改页面，所见即所得的方式

预览窗口：浏览器中出现的效果，与PowerPoint中的“放映幻灯片”类似。

打开导学软件，根据步骤，示范建立只有一个网页的站点，强调新站点的位置、路径的正确输入，站点的名称。任务1：学生根据导学课件，在d:建立自己站点(站点名字改为自己的名字，便于记忆)

请一位学生示范如何建立站点,教师总结

问：在文件夹列表中看到了什么？

（分析多出的文件夹列表栏，多了一个文件夹，里面有两个子文件夹和主页，图片存放在images文件夹中）

3、编辑主页与保存主页

看效果图，请学生分析主页中的元素

总结：鲜明的主题，如：我的世界、开心乐园等，有分割页面的水平线，与主题相关的图片，对网站的简单介绍根据导学软件，学生完成任务2：设计主页、保存主页与图片

4、总结反馈

请学生示范，讲解如何插入图片（来自剪贴画与来自文件）、插入水平线，如何保存

总结：必须切换到“编辑”窗口下编辑

主页的保存中存在问题：

单击“文件”----“保存”或工具栏的“保存”按扭，弹出一个对话框，保存嵌入式文件，改变文件夹，图片必须保存在本站点images文件夹中,便于站点的管理。

5、请学生继续完成自己的主页，有能力的同学完成提高篇

6、教师与学生共同评价总结

老师向学生展示自己的作品，与学生一起讨论评价。

请学生总结今天的学习内容：建立包含一个页面的站点，主页的设计与保存。

学生活动：学生回答问题、学生观察网站的表现形式、浏览课件，并了解本节课的学习任务、学生观察FRONTPAGE界面与word的不同，学生观察教师演示不同编辑窗口的区别。学生上机操作，在指定位置建立自己站点、同桌互相帮助，并参考教师做的课件，利用网络环境下的课件自己探索学习，满足不同层次学生的需求、学生总结。

第二篇：网页设计流程教学案例

我最成功的一节课——网页设计流程

“网页设计流程”是中职计算机应用专业课《网页制作与设计》的重点教学内容。根据中等职业学校计算机应用专业课程的主要任务及对教材内容的分析研究，在“网页制作流程”这课的教学中，我把掌握网页制作流程的一些技术和方法为知识目标，通过对知识的学习和对作品的创作培养学生创造能力，协作能力，动手能力，评价能力，同时在教学中培养学生的审美、欣赏、创新，主动探索与发展的能力为情感目标。那么，如何来实现教学目标呢?我进行了教学研究的尝试，引导学生开展探究性学习：网页制作作品。

课堂教学实例

课题：网页制作流程

一、教学目标

知识与技能

1、熟悉网页的各种元素，以及各元素在网页制作过程中的应用。

2、掌握网页制作过程中的一些技术和方法。

过程与方法

1、以建构主义理论为指导，以研究性学习为载体，培养学生自学，合作学习和动手能力。

2、学生通过亲身经历，提高分析和解决实际问题的能力。情感与价值观

1、培养学生与他人协作的学习品质，加强集体主义的观念。

2、培养学生的科学探索精神与严谨的治学态度。

任务描述

根据学生不同的学习能力，知识、兴趣爱好，依据自愿组成原则，将全班分为6人的小组，各小组规划出网页设计方案，分工合作制作网页，重点注重网页制作流程，并由学生自己担任评委，评选出优秀网页。

二、教学过程

1、课前准备

（1）以小组为单位，规划网页结构方案，描述网页制作流程。

（2）根据这个方案进行工作分配，依据所给网页制作流程准备材料、备写相关材料。

2、制作过程（1）栏目设计

（2）资料搜集

（3）网页蓝图制作

（4）色系选择（5）字体选择

（6）页面详细设计

3、网页评审

各小组派一名成员上台演示，根据老师制定的评分标准，请各小组长进行评分，评出优秀的班级网页。

三、教学活动主要环节

1、引入教学资源环境，创设学习情境。这个环节的主要教学目的是激发学生的学习兴趣和对新知识的渴望，让他们有对新知识和技能的学习动机，愿望和需求，在教学中，根据学生的思想特点与学习心理。我用自己制作的网页课件以及收集的优秀网页截图来创设情景，向学生展示了优秀网页的网页作品，并指出：大家看到的每一幅画面都是一个网页，这些网页有的美观大方；有的丰富多彩。有的个性鲜明，那么我们自己能不能制作出具有自己风格的网页。这样激发了学生学习网页制作的兴趣及求知欲望，产生了完成作品展网页的动机．此时，我对学生提出研究的目标--如何利用网页三剑客这个软件来完成你们的班级网页制作，最后各研究小组要分别展示你们的研究成果。

2、小组学习与探索研究。在课堂上，我出示范例，引导学生分析网页的结构，指出：网页中可以有文字、图片，甚至有动画和声音，为了和浏览者更好地交流，有时还添加各种表格、组件。当然，各式各样的超链接更是常常出现在网页里。学生有了初步的直观印象后，就不会感到盲目，而且会引起学生极大的兴趣。随后，我将一个网页的制作流程分别说明，那一个环节需要哪些软件，用到哪些技术；就作品网页制作过程简单介绍任务分解，重点在于小组任务的分配，将网页制作流程中各环节根据任务的轻重和学生能力的强弱进行分配，既要每个小组成员都有事可干，能完成各自任务，更要每个成员发挥自己的特长，使网页整体有特色，对技术的掌握更上一层楼，这个过程中引导学生轻松愉快、主动去解决问题，完成任务，进而达到自身对知识的意义建构是关键。

3、小组展示网页评审。展示交流是研究课题的最后一个环节，各小组通过多媒体教室向全班同学展示了各小组的研究成果，并对各个小组进行自评，即；说出哪些是本小组最好的，哪些是本小组还没能解决的．最后请各小组长评选出优秀网页。我认为在此环节，教师应把握评价的尺度，评价的侧重点应该放在学生在自主的学习过程中学会了哪些学习方法，同学间团结合作意识是否体现，井充分肯定学生的成果，鼓励他们继续发扬这种探索研究精神。

四、教学反思

在“网页制作流程”这堂课的教学过程中，我充分利用了软件本身的特点为学生创设了和谐、美好，愉快的信息化学习的平台，发挥了学生的主体作用．教学中，充分调动了学生的学习积极性，培养了学生的动手能力，观察分析能力和主动探索性学习的能力。通过教学方法的设计教会了学生分析问题的方法，教学情景的设计使学生身临其境，启发了学生探索新知，深研新知的强烈欲望，培养了学生良好的思维习惯、学习习惯，使学生学习新知识的同时形成了良好的学习心理，实现了教学目标。实践表明，开展探究性学习对网页制作的教学具有非常好的效果，活动中充分发挥了学生的主体性，学生学习积极性被充分调动起来了。同时，提高了课堂效率，使整节课的教学目标得以顺利完成，小组的分工合作体现了平等原则，每个学生都积极参与到教学活动中．此外，小组成果评比演示也充分体现了学生在课堂活动中的主体地位。

第三篇：网页制作教学案例

《网页制作》教学案例分析

【课时安排】1课时

【教学内容分析】 本节课的主题：让学生认识并利用Dreamweaver软件制作简单的网页，学会建立站点和设计有一定主题思想的主页，本课是用该软件创建环保网站，也就是用所掌握的信息技术知识解决生活中的实际问题，使学生能够学以致用。发挥信息技术学科的优势，以素质教育的新理念，增强学生的动手能力，提高学生的综合素质。

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

2、对教材内容进行引申与组合，让学生利用网络强大的功能搜集资料，分组搜集不同内容，包括图片与文章，采用任务驱动，协作互助的授课模式，发挥教师的主导作用，增强学生的主体地位。通过创建环保网站增强学生的审美意识与想象力，提高学生的综合能力。

【分析教学对象】

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

学生对周围的一切充满了好奇，他们急于表现自己，对于教师布置的任务能够认真对待。对于Dreamweaver的知识掌握的较好，但综合运用能力尚有欠缺；能够上网搜集资料，但速度与技巧还有待提高。本节课给学生提出一个总的任务：创建环保网站，此项任务的设置合理、艺术，对于学生各项能力的提高有很大帮助。

学生创作欲强，因此本节课中，提倡、鼓励独立完成作品，培养学生热爱自然热爱环境的情感，以增强学生的保护地球、保护环境的意识。

2、在学习本节课之前学生应具备的基本知识和技能：

能掌握基本的文字修饰与排版功能并能查找指定地点的文件，会浏览网页与下载资料。

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

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

【教学目标的设计】 1.知识目标：

（1）了解网页的概念；

（2）初识FrontPage2000并学会简单地应用；（3）了解建立网站的一般方法；

（4）学习制作包含文字、图片和声音的网页。2.技能目标：

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

培养学生在学习过程，自主探究能力和分类汇总知识的能力。培养学生热爱环境、保护环境的情感并能号召人们行动起来保护地球、保护我们生存的环境。

【教学重点与难点】

（1）重点：建立网站与在网页中插入文字、图片、设置背景和背景音乐。（2）难点：将网页存在网站内并把涉及到的文件分类汇总在相应的站点文件夹中。

【教学策略设计】

1、根据教材内容和学生的实际情况，本课采用“任务驱动”、“问题──探究”等教学方法，创设一个板报展览的情境（创设情境），以逐个任务和问题驱动学生多动手、多思考、多实践，从而了解和掌握Dreamweaver的基本知识和技能。并以英语的鼓励语言和信息技术专业术语增强学生的学习兴趣。

2、本课传授给学生的学法是“问题驱动下的自主学习──分组协作学习──探究发现学习”。让学生在创建环保网站的过程中，既鼓励个性张扬，又提倡某些问题的分组协作与自主探究，指导学生对图片及文字的来源进行探究发现（从网络中搜集）。建构主义学习理论强调以学生为中心，要求学生由知识的灌输对象转变为信息加工的主体。故此本课教学过程中，以问题驱动，激发求知欲望，让学生带着逐个任务通过探究发现、相互合作、实际操作等方式，自主学习，使学生在完成任务的过程中不知不觉实现知识的传递、迁移和融合。

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

【教学评价设计】

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

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

【教学过程设计】

一、情景导入

先前我们学习了使用搜索引擎查找我们所需要的资料，这些资料是以网页形式存在于网络中，大家想不想拥有自己创建的网页？（激发学生的求知欲）（学生回答：想）

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

二、问题驱动 任务一：大家打开课本阅读和浏览一些好的网站了解网页概念，网页与网站的关系？看哪个小组能最先解答该问题？

学生阅读课本（3分钟）分小组讨论自己的理解。

小结：

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

2.问网站时看到的第一个页面（网页）就称作网站的首页或主页； 3.网页如同大家一样都必须有一个“家”，这个家就是网站； 4.存在网站中的网页之间采用了链接式的方法将网页串接起来。

任务二：在我们了解网页与网站后，会有疑问：使用什么软件制作网页呢？带着这个问题阅读课本，同时跟随课本启动这个软件。看哪个小组成员最先完成？ 学生阅读并实践„„ 小结：

大家会有疑问为什么选择它，还有别的软件吗？有，如FrontPage网页制作软件等，课本中使用了Dream weaver这个软件简单易学，并且窗口与我们使用操作系统windows都是基本一致的。

第四篇：《网页格式刷》教学案例（范文模版）

《网页格式刷》

——CSS样式表教学案例

【教材分析】

“CSS样式表”是高中信息技术选修《网络技术应用》的第五章“动态网页制作”中的内容。教材中将这块内容分为“什么是CSS”、“CSS实现”、“在HTML中加入CSS”三部分。本节内容的重点应该是“运用CSS进行样式设置的方法和格式”及“在HTML中加入CSS的三种方法”。因此我认为将“CSS实现”与“在HTML中加入CSS”两部分结合在一起讲比较好。此外，我认为“体会CSS样式表的优点”也应该是一个教学重点。学生以往用FrontPage做网页都习惯用工具按钮、菜单命令来进行网页外观设置，使用代码对学生来说是件令他们头疼的事，所以我认为有必要通过让学生体会CSS样式表的优点让学生明白为何我们要学习这部分内容。【教学目标分析】

1、知识与技能

(1)什么是CSS样式表。(2)CSS样式表的优点。

(3)嵌入式、内联式、外联式三种样式表的使用方法。

(4)通过对三种样式表的亲身实践，感受这三种样式表的优缺点。

2、过程与方法

(1)通过WORD排版中的“格式刷”引入网页中的“CSS样式表”，通过类比，使学生初步了解CSS样式表的作用，激发学习兴趣。

(2)对于CSS样式表的概念和优点主要由教师讲解，并让学生在实践操作中感受样式表的优点。(3)对于嵌入式、内联式、外联式三种样式表的使用，由教师讲授方法和代码的书写格式要求，由学生根据实例要求自我实践操作。

(4)在学生的实践操作过程中，让完成较快的学生充当小老师，帮助其他同学发现和改成错误。

3、情感态度与价值观

(1)通过CSS样式表的学习，提高学生美化网页的技能。(2)培养学生的探索、实践能力。

(3)通过实践过程中的“小老师”角色，让学生感受同学之间的互助友爱，团结协作。【学情分析】

通过前阶段的学习，学生已经认识了动态网页，并对HTML的标签及属性也有了了解。考虑到我所在学校的学生学习能力、领悟能力比较强。因此虽然CSS样式表对于学生来说是全新的内容，但如果教师采用“讲授概念→操作演示→学生操作”的模式上课，将无法激发学生自主探索学习的兴趣和热情，所以我采用了教师讲授概念和方法，然后由学生自主探索实践操作，使学生的学习更具挑战性。

【教学重点、难点分析】

1、教学重点

(1)CSS样式表的概念。

(2)体会CSS样式表的优点。

(3)嵌入式、内联式、外联式三种样式表的使用方法。(4)CSS代码的书写格式，输入的准确性。

2、教学难点

(1)三种样式表在使用上区别。(2)CSS代码的书写格式。【教学过程】 [新课导入：] 教师活动：教师展示两篇WORD文档A和文档B，文档A已经进行了文字字号、字体、颜色、行距、首行缩进等排版，文档B未进行任何排版。

教师提问：同学们，在WORD编辑中，有什么方法能让文档B以最快捷的速度排版成文档A的字号、字体、颜色、行距呢？

学生活动：部分学生思考后回答“格式刷”。

教师活动：教师迅速的利用格式刷将文档B设置成文档A的排版外观。

教师活动：教师展示两张网页，网页A已经进行了文字字号、字体、颜色、文字链接动态效果、彩色滚动条等外观设置，网页B未进行任何设置。

教师提问：现在老师想把网页B也设置成网页A的外观，有什么方法能够快捷而方便地帮我们做到呢？

学生活动：部分学生回答说“格式刷”。

教师提问：如果我们在做网页的过程中，也有一把“格式刷”，是不是就能很方便的将网页B设置成网页A的外观呢？网页制作中，到底有没有这样的“格式刷”呢？

教师操作：打开网页A的源代码，将CSS样式代码复制到网页B，立刻使网页B具有了与网页A相同的外观。

教师提问：老师刚才复制粘贴的那段代码是不是具有与“格式刷”相同的作用？今天我们就来学习“网页中的格式刷”——CSS样式表。

[新课讲授：] 一：什么是CSS样式表？

教师活动：讲授CSS样式表的概念。

用一个指定的名字来标识和保存的一组相关字符和段落格式的选项集合。

让学生了解CSS样式表的优点。(结合实例)

1、避免在标识字符和设置段落格式等操作时重复定义需要的样式（如字体、字号、颜色），从而使应用该样式的网页具有相同的风格。

2、只需要修改一个CSS代码就可以改变页数不定的网页外观和格式，提高网页编辑效率。

3、可以“随心所欲”地控制页面布局和外观。

4、在所有浏览器和平台之间具有较好的兼容性。

二：如何在HTML中加入样式？

1、嵌入式样式表

教师活动：教师讲授嵌入式样式表的使用方法。

方法：只需在每个要应用样式的HTML的标记后写上CSS属性就可以了。

CSS属性书写格式：style=“color:red;font-family:黑体;font-size:24pt”

注意：color的属性值还可以用颜色代码，如：#ff0000。教师活动：布置课堂练习题1。

打开example1文件夹下的qzwx.htm，将网页中文章标题文字“秋天的童话·如梦”用嵌入式样式表设置成：#ff9900，30pt，黑体。（效果如下图）

学生活动：依据教师讲的方法，进行练习。

教师活动：巡回辅导，提醒学生输入字母、标点一定要准确。

教师提问：如果用嵌入式样式表来为网页中的文字设置外观，方不方便？ 学生回答：不方便。

教师活动：总结嵌入式样式表的不足。

嵌入式样式表主要用于对具体的标签作具体的调整，其作用的范围只限于本标签。这种样式表并不能充分体现出CSS样式表的优越性。引入内联式样式表。

2、内联式样式表

（1）作用于网页中的部分文字

教师活动：教师讲授第一种内联式样式表的使用方法。

方法：(1)在网页的 定义样式，如：

(2)在要设置此样式的文字头插入,文字尾插入,如：

1、提示一些不相干的话。

注意：a1为定义的样式名，不同的网页，样式名可以不同。教师活动：布置课堂练习题2。

打开example2文件夹下的bingdu.htm，用内联式样式将网页中的9个小标题字体设置为：绿色、14pt、黑体。（效果如下图）

学生活动：依据教师讲的方法，进行练习。

教师活动：巡回辅导，提醒学生定位插入点要准确，样式名前的点不能丢，输入字母、标点也一定要准确。教师活动：发现很多学生的错误都来自输入错误，自己检查半天也查不出来，于是提议让同桌同学帮忙找错。

学生活动：学生很认真的帮同学找错。

教师提问：如果要把“bingdu.htm”网页中的小标题的颜色由绿色改为蓝色，想一想该如何做？ 学生回答：只要在定义样式的代码中将“green”改为“blue”就行了。教师提问：但是如果我们没有用内联式样式表，那又该如何做？ 学生回答：那就得九个标题一个一个改颜色，改九次。

教师活动：引导学生体会样式表的使用提高了我们修改网页的效率！（2）作用于整个网页

教师活动：教师讲授第一种内联式样式表的使用方法。

方法：在网页的 插入代码：

教师活动：布置课堂练习题3。

打开example3文件夹下的teacher.htm，用内联式样式表制作超链接文字的动态效果：当鼠标划过时，设为超连接的文字，变成橘黄色，并出现下划线。（效果如下图）

此题代码由教师提供代码图片，学生自己输入。

学生活动：依据教师讲的方法，进行练习。

教师活动：巡回辅导，提醒学生定位插入点要准确，输入字母、标点也一定要准确。提示学生利用复制粘贴相同代码后修改，提高自己的输入速度。继续鼓励同学互相帮忙找错误。

教师提问：如果网站内有几十网页都要用到此浮动链接效果，该如何做呢？

学生回答：每张网页都插入同样的CSS代码。

教师提问：有没有什么方法可以简化这项操作呢？既然几十张网页都要用同样的代码，能不能把这段代码制作成一个独立的文件，然后由每张网页调用呢？

3、外联式样式表 教师活动：教师讲授外联式样式表的使用方法。

方法：(1)将样式定义成一个“.css”的文件：

可在记事本中输入样式代码，然后保存为扩展名为“.css”的文件。(2)在网页的head区插入引用代码：

注意：标签中的属性没有前后次序要求。教师活动：布置课堂练习题4。

打开example4文件夹下的teacher.htm，用外联式样式表制作超链接文字的动态效果： 当鼠标划过时，设为超连接的文字，变成橘黄色，并出现下划线。

学生活动：依据教师讲的方法，进行练习。

教师活动：巡回辅导，提醒学生定位插入点要准确，输入字母、标点也一定要准确。样式文件和网页文件要保存于同一个文件夹内。

[课堂小结：] 教师活动：通过两节课的学习，同学们知道了什么是CSS样式表，掌握了三种CSS样式表的使用。同学们通过实践操作，也体会到了使用CSS样式表可以避免很多重复操作，从而提高网页编辑和修改的效率。希望同学们以后在自己制作网站时，能灵活运用CSS样式表来美化自己的网页。

【自我评析】

本节内容如果但看教学内容，感觉1课时就可以完成，但是考虑到高二会考对CSS代码的输入有一定的要求，所以我决定所有练习题的代码都由学生自己输入，由于学生的输入速度及准确性问题，比预计多用了一课时。虽然多用了一课时，但是由于知识点讲得比较清晰，给学生练习的时间比较充裕，自我感觉学生的学习效果比较好。

虽然课题引入用去的时间比较多，但是通过WORD文档中的“格式刷”类比引入，给了学生很直观的感受，很好的激发了学生们的学习兴趣。在讲授三种CSS样式表的使用方法时，采用通过实践前一种，感受总结不足，引出第二种，使学生对于三种使用方法的区别有了比较深刻的认识。

在学生实践过程中，虽然教师已经一再提醒代码中的字母、冒号、分号、引号不能输错，但学生还是会出现输入错误，而且自我检查不容易找到错误。于是我就让同桌同学互相帮忙找错，既让学生感受了同学互助，又收到了很好的学习效果。

第五篇：浅谈网页设计课程教学

浅谈网页设计课程教学

摘要：网页设计课程是计算机和艺术的交叉学科课程，应注重将技术和艺术相结合起来进行教学。本文针对“网页设计 ”课程的特点，结合实践应用，阐述在教学方面的一些体会。

关键词：网页设计，教学方法

Abstract: website design course is a cross computer science and artistry course, it is need to combine teaching methods of these subjects.this paper is to base on the feature of “website design” course and practice , to give some opinion about teaching.Key words : website design, a teaching method

一、引言

《网页设计》课程是职业院校计算机类专业及电子商务专业的一门专业课程，也是一门实践性很强的职业技术课程。由于《网页设计》课程实践性和更新性很强，该课程如果采用传统的教学方式，那结果是不理想的。在这里结合自身的实际经验，谈谈网页设计课程的教学。

二、教学策略

1．课程特点

网页设计课程是计算机和艺术的交叉学科课程。在教学过程中，除了要求学生掌握基本的技术外，也必须对艺术设计有一定的了解。网页设计应注重技术和艺术的统一性。在进行网页设计时，应考虑网站的总体结构，风格定位，色彩的应用，版式的设计等方面的因素，力求形式与内容的统一，让网页的显示达到快捷，美观的视觉效果。

2．教学方案

要设计一个好的网页作品，首要的因素不是创新，而是“用户体验”，第一步应该站在用户的角度去考虑设计方案，所有的形象风格都必须服从主题，服务用户。这就对网页的整体形象有了较高的要求，整体形象包括版式设计，色彩的应用，logo设计，素材设计，广告设计，web图像设计及优化，交互方式等等。在教学时，我们可以结合实际，要求学生从版式布局设计和网页元素的处理及色彩搭配三方面着手，归纳如下：

（1）版式设计

网页的美感来源于网页的版式设计，它突出了网页设计的艺术性和个性，属于网页的艺术设计，好的版式设计会使得网页显得更具有美感和创意。网页的版式设计是基于内容的，应该从实用性和艺术性考虑。网页内容一定要主次分明，中心突出；导航要清晰；可以图文并茂，是网页显得生动和活跃。除此以外，网页的版式设计要符合统一、分割的原则。统一即指整个网站版式风格的统一性、整体性；分割即指要科学的划分整个页面。

网页的版式设计主要是表格、层等技术的应用。表格是一种最简单的布局手法，它可以将图像和文字做最恰当的编排，达到清晰易懂的效果。层（div）的布局，是现在正当流行的排版手法，它主要应用相对位置等的关系进行准确定位，再加上层叠样式表的辅助，突出了它对网页的设计具有可扩展的优势。

文字是网页内容的主要载体，所以文字的视觉效果在版式设计中也起着关键的作用。文字的设置可以分为字体、大小、颜色、行距等，通过这些属性设置，使文字排列得整体和美观。但要注意的是中文字体和英文等其他字体的设置，是有一定区别的。英文的字体有很多的选择，但中文的正文字，总的来说，就两种：宋体和黑体。在传统的版式设计中，大家都还是倾向于英文的排版，从视觉上来看，英文字体更有韵律性，因为每个字母本身高矮不一致；但是中文字体相对来说，就显得单调和独立些，所以在设计时，这两种文字要作不同的处理。另外，也不要选择一些非常特殊的字体，除非用户的浏览器认识这些特殊字体，否则将会出现乱码。如果遇到非要使用特殊字体的情况，可将文字转换成图片再将其应用。对于字号而言，单位应采用em，而不是px，这点在使用层叠样式表（css）时尤为重要，还要注意的是em和px是有差别的，所以在使用的时候也要对上号，否则也达不到预先的视觉效果。文字一行的字数最好不超过50字，首页的标题在10-20字为佳；行距一般使用的是20-22像素的行距，这样使得整个的文字内容部分不会显得太紧凑或者太松散。文字的整体排列一般有四种基本形式：两端对齐、居中对齐、左对齐或右对齐、图文环绕排列。在整个网页版式设计中，标题文字的设计原则应该是“醒目而不夸张”。

导航栏的设计在网页设计中也很重要，它对整个网站内容有提纲和导航的作用，在设计的时候，要注意首先导航栏的风格也要和整个网页风格保持统一，另外最好采用文字，因为网络的速度可能会影响图片的正常下载；不过现在flash按钮的导航栏已经成为时尚，它可以实现丰富的动感效果。

（2）网页元素的处理

网页元素包括logo、按钮、图片、动画、声音、banner等。在网页中包含这些对象时要注意的有：首先是logo的设计，logo代表了整个网站或者企业的文化，一个有特色、具有视觉冲击力的logo，可以直接影响浏览者对网站的判断，给浏览者留下记忆深刻的印象。其次，要确保网页上的每一个元素都有存在的必要性，不要使用冗余的技术和内容；再次，要保持形式和内容的统一；最后，要尽量的使网页具有快捷性。对于网页的特效技术，最好采用javascript或css技术来实现。

（3）色彩的处理

并非所有的颜色都能应用于网页，网页中的颜色会受到硬件、浏览器等的影响，即使网页中使用了非常合理、非常漂亮的配色方案，每一位用户所看到的效果也不一定相同。所以，最好使用使用网页安全色来避免和解决这种问题。网页安全色是指在不同的硬件环境和软件环境下都能在浏览器上正常显示的颜色，并且现显示的效果都一样，不会出现失真的现象。在页面设计中，整个网页的色彩种类最好不要超过3种，一种或者两种主体色，其他为辅助色。颜色种类太多，会让人觉得很杂乱。另外，文字内容和网页的背景颜色的对比要做到突出，比如：背景为深色，则文字的颜色可以选取浅色调；背景为浅色时，文字颜色就应该深些；这种深浅的变化在色彩学中称为“明度变化“。比如有些主页，背景色和文字颜色都采用的是深色，由于色彩的明度较近，所以浏览者来浏览阅读的时候，会感觉吃力，从而影响阅读；但是色彩的明度变化也不能太大，明度变化大会导致亮度的反差强，让人觉得很刺眼，同样会影响整个网页的视觉效果。在进行颜色搭配时，还要注意的是：第一，采用的颜色应具有联想性，不同的色彩会产生不同的联想，所以色彩的选取也要和网页的内涵有关。第二，色彩的合理性。根据网页的主题的不同，选取相应的色彩，比如红色，可以体现出网站的热情和喜庆；蓝色可体现出科技的气息等。第三，色彩要有鲜明性，这个才能给浏览者深刻的印象，并有耳目一新的感觉。

（4）网页赏析

在教学过程中对学生的引导是非常重要的，设计网页得多看多学，网页设计的技术和风格在日新月异地变化，所以在提高学生设计技术的同时，还要多培养学生的审美能力，知道怎么设计才是一个好的网页。创建网页是一个不断学习的过程，在看一个网站的时候，找到这个网站的优点缺点，注意哪些是可以借鉴的，哪些是需要避免的，在看的同时，可以看些成熟的网站，也可以看些成长中的作品，在同期的比较中，也有助于自身的提高。另外，鼓励学生看源文件，了解某些效果是如果实现的，在效仿的同时进行改进和创新。

（5）考核方式

网页设计课程的考核应该打破传统的考试方式，建议采用机考的方式，学生通过一学期的学习，应能自行设计各种网页，熟练掌握其基本制作方法和技巧，在规定的时间内设计网 页。这也是一种对提高学生动能能力的一种鞭策方法。

三、结束语

在网页设计课程教学中，应当充分认识到网页设计课程的特点，结合实际，采取相应的教学措施和方法完成教学任务，以达到良好的教学效果。对于信息科技迅猛的发展今天，必须摒弃陈旧的教学理念，及时提高自身的专业水平，完善自身的教学理念，寻找更好的教学方法，激发学生的学习兴趣，培养学生追求新知的能力和动手实践的能力，从而达到学以致用的效果。

参考资料： 田博文，《Dreamweaver8基础培训教程》，人民邮电出版社，2007年2月

孙素华，<< Dreamweaverms2004完美网页设计>>，中国青年出版社，2005年10月