网页设计流程教学案例

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

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

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

课堂教学实例

课题：网页制作流程

一、教学目标

知识与技能

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

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

过程与方法

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

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

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

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

任务描述

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

二、教学过程

1、课前准备

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

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

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

（2）资料搜集

（3）网页蓝图制作

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

（6）页面详细设计

3、网页评审

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

三、教学活动主要环节

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

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

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

四、教学反思

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

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

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

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

一、教学目标

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课时

【教学内容分析】 本节课的主题：让学生认识并利用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样式表的使用方法时，采用通过实践前一种，感受总结不足，引出第二种，使学生对于三种使用方法的区别有了比较深刻的认识。

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

第五篇：国际网页Web设计流程

国际网页Web设计流程

1.初始会商,主要是收集该站点的关键信息,包括站点的目标读者.要发布的内容.开发Web服务器平台;

2.概念开发,设计师根据收集的信息,开始构思,通常,设计师要把这些构思用草图的形式呈现给顾客,这个草图要有整个网站的结构,不同的布局.设计及导航;

3.内容综合,当决定了设计师的设计,设计师开始制作一些初始图样,这些图样用PHOTOSHOP那样的程序来创建,然后,设计师将图样打印出来配合文字;

4.HTML布局和导航,一旦客户同意了这些内容综合,设计师开始编制Web页面,导航器也被编制到页面中,使客户第一次真正体验一下;

5.图形制作,如果客户同意了站点的外观和感受,设计师将大量制作所需的图形,并进行优化;

6.内容流程,客户的书面材料利用各种网页技术（CSS、JAVA、FLASH）,有机的和相关的图形整合在一起;

7.测试,在站点被提交给客户之前,设计师要彻底测试每个Web页面和联结,利用清单,进行修补;

8.交付,一旦签收,客户要经常进行他们的测试,找出排版和内容方面的错误,做完了这些次要的修正后,正式启用站点.这套完整的计划可以用1-12个月来完成,平均完成时间为4个月.当站点启用后,要进行跟踪调查,以确定人们如何使用站点。经过6-12个月的运行之后，重新收集数据,开始重新设计,然后这个Web设计过程再开始一遍。

附：WEB设计经验-来自microsoft.com设计主管

作为设计主管，Peter Stern 已经领导 microsoft.com 重新设计了主页并且开发了五个不同的交互工具，这些工具被用于下载中心、产品目录、配置文件中心、搜索 和注册等联机功能。他为几个内部工具设计了用户界面，并且正致力于创建将于今年晚些时候发布的下一代主页。

从头衔上，您可能认为我主要关心的是 microsoft.com Web 站点几千个网页的版面设计。的确，这些确实是我所关注的。视觉上的吸引力是重要的，但是这仅仅是工作的一小部分。而最终的目的是确保整个站点运转正常。

我的意思是，人们通常在访问 microsoft.com 时，并未将它当作艺术作品来赞赏。而是为了获得有关产品的信息，或者有一些技术问题需要咨询，或是阅读有关开发商的期刊。所以网站的设计应该尽量清楚和有条理，以便他们能够容易地找到所需信息。

设计站点

在进行 Web 设计时--在设计过程中--形式应该服从功能。这种方法应用于我们站点的整个设计过程中。当然，我们有最新的 Web 工具，并且能够将各种可视的小配件上载到网页上。

但是我们认为这样做将不利于为访问者提供有效的服务。

事实上，我经常发现一些站点未将重点放在功能上。常见的错误包括：

用户界面元素不一致。例如，同一个控件在不同的页面上功能不同，或者同一个功能对应几个用户界面控件。

导航栏位置不一致。决定站点的哪些页和功能需要在站点的任何页上都可被访问到。这就是应该保持一致性的“全局导航栏”。

不太注意或根本不注意基本的图形设计原则，例如排版式样、色彩和版面的设计。

相关元素和功能的随意分组。注意将元素放置在网页上的位置和目的。这可帮助访问者从其它相邻的选择和位置来推断某个链接的功能。

使网页过于庞大以至使访问者需要通过典型的调制解调器速度的 Internet 连接进行长时间的下载。这并不是说不应该使用图形，但是您需要对它们进行精挑细选，然后用适当的压缩和颜色索引优化它们。

现在的 Web 站点仍然存在很多问题，这并不奇怪。毕竟，Web 设计“艺术”相对来说还是个新生事物。在四、五年以前，Web 页甚至是普通的。那时，人们好像认为他们的 Web 站点将会吸引访问者只是因为它们存在--并且，可能在某些情况下这种方法确实有效。但是这些站点一般很难看，并且更重要的是，它们真的难以使用。接下来便进入“看看我们能做些什么”阶段，在网页中加入了大量的动画、声音文件以及其它附加件，导致访问者需要长时间地进行下载，但是并未获得多少实实在在的内容。

如今的 Web 设计师们已经吸取了前人的经验和教训。好的站点倾向于简化和快速，同时在功能上有所提高。这是 Microsoft 的目标，而且我们最先承认自己所犯的错误（参阅“Microsoft 的 Web 简史”看一看以前的主页设计）。

设计错误并不总是显而易见的。有时在设计上对一个小元素的移动或更改将有很少或根本没有影响。但是，在其它情况下，它可能确实会对页面功能有所影响。而且如果说我们从过去几年学到了一些东西，那就是小的改动会使 Web 页的运行方式有很大的不同。

明确的流程

若要避免类似问题，我们为新服务（例如“搜索”）的创建或关键的 Web 页（如主页）设计了一个明确的流程。每个项目都是在一定的基础上开始的，即我们有一个受益于我们站点上的页面、部分或用户界面元素的产品或服务。在早期的产品计划阶段（第 1 阶段），我被要求设计一些初级模型：大致描述页面、部分或功能的草图。然后产品项目组检查产品计划建议，看看此项服务是否可以为 microsoft.com 的访问者真正带来一些实惠。

如果答案是“可以”，那么此项目会获得批准，我们开始写项目说明书（第 2 阶段）。我们在第 1 阶段的草图和概念基础上创建并提出一个更为完整的计划。这时，我们一般还会开始

可用性测试（一般会有书面的模型）以了解潜在用户将对计划中的设计做出何种反应。在最后开发阶段（第 3 阶段），我们创建运行计划服务的 Web 原型，并且进行全面的可用性测试以及内部复查。然后完成站点的代码，修改程序错误，最后站点通过实际运转的 Web 站点向客户发布。

正如您所见到的，可用性在整个流程中扮演着重要的角色（参阅“创建有效的 Web 界面需要认真计划”）。我们可以为用户运行某项任务计时，这样我们就可以在产品以后的版本中对比相同的测试。我们可以使用这种方法进行度量，以确定一个功能的重新设计是否为客户带来任何真正的价值。

还有，我们将仔细地观察以了解可用性对象是否可以计算出如何正确使用新功能--我们称为“可发现性”的方法。有时这为我们提供了一些挑战。例如：在我们的站点上，在 搜索引擎 中键入一个词组或字会产生一列结果。然后我们请用户选择在这些结果中进行搜索，以便进行更细的搜索并且导向某一页或资源。但是即使“在结果范围内搜索”被明显地标记在深色标签上，很少有人熟悉它。一些用户认为他们正开始新的搜索，并且可能毫无结果。我们正在解决这个问题以确保客户可以利用 microsoft.com 上所有丰富的功能来提高他们对此站点的认识。

选项“在结果范围内搜索”看上去很直观，但不是非常易发现的。此问题一直是困扰我们的设计的问题之一。

最后阶段

大体来讲，站点设计是在发生冲突的需要之间求得平衡的艺术。一方面，我要将站点设计得尽量简单易用。另一方面，我要确保站点中所有强大的工具可为经验丰富的用户所用。与此同时，我还要为内部客户服务--Microsoft 产品项目组--他们对服务有特殊的需要。所以每天我都要解决一些非常困难的问题，经常处于很紧迫的情形中。我发现这种工作是鼓舞人心和有趣的。

这个职业非常需要更熟练的专业人员。我是经过一系列非常不一般的过程--在大学学习图形艺术，然后在多媒体公司设计 CD-ROM，最后加入 Microsoft 并开发应用程序--才获得这个职位的。非常奇怪的是，当我申请（并获得）这份工作时，我以前从来没有设计过 Web 页。但是我广泛的设计经历已经证明是非常有用的，并且我自认为已经验证了格言“成功的设计就是成功的设计”（不论是什么媒体）。许多设计问题对 Web 来说是独一无二的，解决这些问题的方法对于任何媒体都是一样的。

对于那些准 Web 设计师我的建议是，他们也应该尽可能地扩大设计背景。今天应该确保将一些 Web 工作作为互动设计培训的一部分--大多数好的设计学校已将其加入课程中。但是在排版、色彩理论、版面设计以及生产等方面的扎实的技术将仍然特别有价值。

在未来，Web 设计师们仍将会继续被要求给页面增加更丰富的多媒体内容，从而为 Web 站点的可视性和可操作性增加了新一级的复杂性和技术要求。作为 CD-ROM/多媒体设计师，要求我必须具有图形设计、视频、音频制作、动画等方面的知识和创作能力。我的预言是，Web 设计师也将向这些领域发展。

对于属于 microsoft.com 的我们--以及在 Internet 上的其它地方--那应该是一个非常有趣的未来。

了解您的观众。调查一下究竟哪些人在访问您的站点，以及他们为什么要访问。新手或不定期上网的 Web 用户与软件开发商相比有非常不同的兴趣和站点需要。

使您的站点对访问者来说有所帮助。

为您的观众提供所需的信息。使导航元素保持一致，并且确保对访问率最高的区域进行明显的标记，是它们易于被找到。

使用清楚的消息。

确保用户了解此页面的上下文，并且知道需要他们做些什么。如果在注册过程中您要用户输入姓名，那么就直截了当地说。不要让访问者自己计算什么，他们会感到沮丧，于是转到其它更简单的站点（例如您的竞争对手的站点！）。

保持一致性。

虽然更改不同 Web 页的外观并不难，但这并不意味着您应该这么做。将主要功能--例如返回“主页”的链接或者执行一个搜索--放在每页的相同位置。在 microsoft.com 上，黑色全局导航工具栏的位置在四十多万页上都是一样的。

使站点可用。

牢记设计和测试站点的可用性。确保用户可容易地执行任务以获得所需信息。估算任务时间和任务完成率，然后努力进行改善。如果新的设计没有在这些方面获得改善，那么就不要实施它。重新从草图（或最初的计划）开始并尝试其它方法。

保持简洁。

说起来容易做起来难。尝试征求反馈意见。有时新人可以很容易找到解决方案。

尝试新的东西。

不要害怕打破常规，尝试一些完全不同的东西。如果您不试试，永远不会找到真正的答案。