网页设计步骤 范例 第1篇
《网页设计与制作》课程是计算机网络、电子商务、计算机软件及计算机应用等专业的一门必修的专业课，是进一步学习《动态网站开发与管理》等专业课程的基础。通过课程建设，力求建设一套有效地、完整的教学资源，达到职业教育的教学目标。
关键字：职业教育 课程建设 工学结合
课程建设不仅仅是将教学大纲、教学课件、教案首页、例题等教学资料整理在一起就完成的，而是要根据此课程所对应的职业或行业的需求，通过企业调研、企业专家研讨等多种途径从中获取，总结出课程的技能解析表，使之成为课程建设目标的依据。课程建设成功与否的标志在于其群体教学质量与教学水平是否真正得到提高。课程组成员对课程的内容、课程体系及课程的各个环节的认识，这些最终都依赖于在课程教学中起到主导作用的教师，因此教师自身业务水平的提高是课程建设的核心，是提高教学质量的关键。所以在课程建设规划中必须把促进师资队伍建设摆在首位，并且将队伍素质、队伍水平、师资培养及提高都安排出明确的目标，只有这样，才能确保课程建设成为有源之水，才能保证教学质量的稳步提高。
1 课程建设目标
《网页设计与制作》课程是HTML、XHTML、JavaScript、CSS及网页设计制作相关软件应用等专业知识的综合应用，在《网页设计与制作》的基础之上后续课程有《动态网站开发》等内容。通过本课程和相关课程的学习，学生能够胜任WEB前端工程师的工作。在课程建设上，我们一直探索如何有效进行教学，逐步形成了以项目驱动、案例教学为主的符合高职学生学习的教学模式，具体计划如下：
（1）将工学结合的教学理念运用到积极探索教学方法改革中，一方面进行企业调研，根据网站建设的职业技能要求，进一步分析总结本课程的典型工作任务；另一方面，根据项目驱动为主的教学模式，撰写教学大纲、课程设计方案、项目任务书及项目任务指导书，力争提高教学效率和教学的规范化建设。
（2）着力健全本课程的教学资源建设，包括：项目案例集、理论与技能试题库、网页设计素材库、校本讲义等教学资源的整理和完善。同时，进一步增强师资队伍建设和提高教师的业务能力，安排教师积极参加相关专业的培训及企业实习，这些措施的实施不仅开拓了教师的思路及眼界，更提高了课题组成员的专业水平。
（3）教学实践，进一步完善已开发的课程资料，并争取企业人员的意见。“实践是检验真理的唯一标准”，组织教学实践，不断地更新课程内容，调整课程结构，改革教学方法与手段，加快了实训教学条件与教学资源的建设步伐，逐步形成了讲授课、实验课、学习指导课相结合的教学模式，注重增强教学互动性。
2 课程建设内容
明确《网页设计与制作》课程在网站开发工作流程中的作用和职业技能要求，从而对教学方案、教学内容、教学模式等方面的课程设计做出了根本的改变，力求使教学目标更符合实际的行业标准，即网站开发中前端工程师应具备的应聘条件。
《网页设计与制作》课程建设内容主要包括课程目标、课程内容与结构、教学方法和手段、课程团队、课程资源、课程考核、课程管理等几个方面：
（1）在课程目标建设方面：通过广泛的专业调研与市场调查，并结合往届毕业生反馈意见，不断改进完善人才培养方案，适时地调整课程目标，明确了课程的职业岗位指向和职业能力要求，明确课程知识目标、技能目标，进一步明确以职业岗位能力要求的课程目标，使之更加贴近不断发展的职业岗位技能要求。通过市场调研得出的对专业人才的需求有以下几个大的方面：
①拥有过硬专业技术能力；
②善于交际，拥有较好的口才，能与领导同事和客户进行较好的沟通与交流；
③坚守职业道德，能吃苦耐劳、有较强的团队合作精神；
④能及时了解市场行情，思维敏捷，具有创新能力；
⑤不断地学习进取，具有自主学习能力和知识应用的能力。
（2）在课程内容和课程结构建设方面：《网页设计与制作》课程的教学内容是综合应用到HTML/XML、DIV+CSS技术、JavaScript/Ajax、图形图像处理、动画制作等编写代码能力、信息采集处理能力及网页制作技术，同时要熟悉相关软件的操作使用，如：Dreamweaver、Photoshop、Flash、CorelDraw等，是进行动态网站开发的前端工作。在课程建设中过程，收集和整理课程骨干教师、行业中的技术专家的意见，调整和完善课程教学和课程内容设计，围绕培养网站开发应用型人才这一中心目标、注重培养学生创新思维能力和实践动手能力。调整各教学模块的课时分配，加大功能模块和综合实训模块的课时。
（3）教学方法与手段建设方面：为培养学生综合应用知识的能力，采用教学案例教学法，通过对完整项目的工作流程，培养学生从设计网站页面及站点管理到制作整个网站静态页面的综合应用能力，调动学生学习的积极性，充分利用启发式教学原则进行教学，使学生在课堂中能积极思考；注重理论联系实际，使学生在学习过程中能够理解平时上网时所应用到功能的实现过程，不再感到枯燥无味。在机房里采用讲授、教师示范、学生演示、学生练习等多种教学方法， 切实提高教学效果，以提高学生的动手能力、创新能力为目的，将课件、教案、习题、测试题等学习资源提供给学生，实现优质教学资源共享。
在机房授课，学生一人一机，多媒体教学，大大提高了课程的教学效果，但教学课时有限，课后自主学习，加强基本功的训练尤为重要。且计算机的发展日新月异，课程教学的滞后与目前技术的发展，让学生及时了解与课程相关的技术动态，不要与当前社会需求脱节，开阔眼界，扩宽知识面也是非常有必要的，因此在精品课程建设的过程中加大了网上学习功能的建设力度，可以让学生把课堂上没有消化吸收的知识点通过精品课程中的教学资源进行自学，通过项目案例加强实践动手能力训练，进行课外延伸学习。
（4）为企业提供技术服务方面：为学生创造实践机会，与北京航空城宾馆签订了网站开发协议，该网站的主要功能就是企业宣传，包括前台展示和后台管理两个模块。
（5）课程研究建设方面：开展课题组集体教研活动，加强课程目标、课程教学内容、教学方法、教学手段等方面的研究，撰写课程设计方案、项目任务书和项目指导书、搜集整理案例集、理论及实践题库等教学资料，并于本学期开始实践教学活动，进一步修订课程设计方案、项目任务书及指导书，完善教学资料。
（6）课程研究建设方面：开展课题组集体教研活动，加强课程目标、课程教学内容、教学方法、教学手段等方面的研究，撰写课程设计方案、项目任务书和项目指导书、搜集整理案例集、理论及实践题库等教学资料，并于本学期开始实践教学活动，进一步修订课程设计方案、项目任务书及指导书，完善教学资料。
3 结论
通过《网页设计与制作》课程建设，不仅仅是建立了一套完整的教学资源，更是认知和实践了一套先进的教学理念。
首先，体现在教师自身业务水平的提高。师资队伍建设是课程建设的核心内容，是提高教学质量的关键。创建学习条件，相互听课，取长补短，不断提高业务素质，教师队伍整体水平和业务综合能力上都有了显著提高，建成了一只爱岗敬业、教学基本功扎实、学术水平较高且结构较合理的师资队伍。
其次，体现在教学理念的根本改变。学校曾组织教师参加过“工学结合”的教学思想创新的培训，教师不断学习实践新的教学理念、不断提高教学质量是课程建设的根本所在。在课程建设规划中，必须明确本门课程在不同阶段的教学质量的内涵与目标，以确保课程建设的准确操作，从而达到不断提高课程教学质量的目的。
最后，体现在课程体系的建设。课程标准是教学的法定性文件，是组织教学的基本依据。而教学资源是教学内容、教学方法的重要载体，学生评价是促进教学质量、确保教学实践有效实施的方法和手段。
参考文献
[1] 首珩.高职加强精品课程建设的研究[J].职业技术教育，2003，（25）：39-42.
网页设计步骤 范例 第2篇
根据齐鲁网及山东传媒职业学院毕业生岗位调研结果，我校毕业生在网页设计方面适应的岗位主要有网页页面设计、前端网页开发、后台动态网页开发等。
网页页面设计：主要应用Photoshop、Illustrator等图片处理和图形设计工具;
前端网页开发：主要应用Dreamweaver、Notepad++、Editplus等网页编码工具;
后台动态网页开发：主要应用Mysql数据库、PHP动态页面开发工具等。
这些工作岗位要求学生熟悉整个网页设计和开发的工作流程，具备所需的基本知识和操作技能，同时还要有良好的职业道德和团队精神，以适应行业发展需求。为了进一步实现职业院校的人才培养目标，提高职业教育的教学质量，围绕实际的网页设计和开发的工作过程，对《网页综合实训》课程进行改革和开发。
二、课程设计原则和设计依据
设计原则：以学生为主体，提高学生的学习兴趣;以职业岗位任务为导向，组织教学内容;以职业岗位需求为依据，突出职业能力培养;以项目为载体，训练学生职业岗位能力和自学能力。
设计依据：本课程以真实完整的网站开发项目为载体设计教学过程，以网站技术人员的岗位工作任务为依据，设计相应教学工作任务，以这些工作任务为载体设计学习情境。教师带领学生在网络机房完成网站项目的开发设计任务，学生以小组为单位开展工作任务。
三、根据岗位能力要求和专业培养目标，确定课程培养目标
1.岗位能力目标
（1）网页页面设计：要求学生能对网站结构进行规划及功能设计、能利用ps等工具设计制作网页页面效果图;
（2）前端网页开发：能将网页效果图重构为HTML网页、能为网页添加常用的js特效;
（3）后台动态网页开发：能进行网站后台数据库设计;能对常用的动态页面功能模块进行开发。
2.职业素质目标
完成具体工作项目，要求学生能自主学习和查阅资料。通过网络搜索资源，首先通过模仿然后举一反三，自主分析问题、解决问题;完成整个网站开发工作项目，要求学生具备良好的职业道德，能够团结协作共同完成工作任务，重在培养学生的团队合作能力和爱岗敬业精神。
四、根据工作流程，基于工作任务，设计学习情境
1.设计思路
网站开发实际工作任务主要包括网站规划设计、网站前端设计、网站后台开发、运营与维护。网站开发过程中的重要环节为设计与开发，即网站规划设计网站前端设计网站后台开发。遵循实际网站开发流程，本课程主要针对这一阶段设计开发一个实际的网站。
2.学习情境设计
遵循网站开发工作流程，以工作过程为导向，以项目为载体，把本课程设计成以下五大学习情境：（1）网站的整体规划设计;（2）网页设计与实现;（3）网页特效设计与实现;（4）网站后台数据库设计;（5）网站后台功能设计。
3.学习子情境设计
对应工作流程和能力目标，每一个情境又以工作任务为载体细分为若干个子情境，即学习任务。学习子情境要与整个项目的实际工作过程相结合，与每个工作阶段的能力目标相对应。下面以第二大情境――网页设计与实现为例，进行基于工作过程为导向的学习子情境设计与实施。
学习情境二：XX网页设计与实现
子情境设计及主要工作任务：
（1）网页版面设计：规划网页页面内容版块;绘制页面布局线框图;
（2）网页素材的搜索及制作：根据网站主题和风格，利用网络搜索，或利用工具软件制作网页素材;
（3）网页效果图设计与实现：利用ps完成网页设计psd效果图;
（4）HTML网页重构：根据psd网页设计图编写html网页代码。
4.考核评价设计
考核方法：本课程的考核包括平时过程考核和期末结果考核，两者各占一定比例。
考核对象：包括小组团队考核和个人表现考核，且侧重于团队的考核，着重培养学生的团队协作意识。过程考核除了考核团队协作以外，还要对学生个人表现情况进行考核，根据小组分工、工作量和完成质量等对每位学生进行考核。
网页设计步骤 范例 第3篇
关键词： 网页型电子教案 制作 优化
一、前言
随着计算机技术及网页设计技术的发展与应用，教育界正在利用计算机制作电子教案，以取代传统的纸质教案。而在制作各种电子教案的过程中，最优的方法是利用网页设计技术制作，再辅以其它应用工具对其进行优化。
教育部在《面向21世纪教育振兴行动》中提出“形成开放式教育网络，构建终身学习体系”，分三步逐步推进我国信息化教育：第一步是计算机多媒体为核心的教育技术在学校的普及运用；第二步是组织上网，利用网上资料；第三步是开展远程教育，提供广泛的学习资料，不断满足社会终身教育的需求。
随着计算机技术的广泛应用，在中国教育教学信息化的今天，各级各类学校全面要求教师完成信息化的第一步，即以多媒体教学为核心的教育技术应用于教学中。第二步与第三步也在广泛开展，广大教师都在广泛开发各种各样的多媒体课件，各类的教材出版社也都为各自所出版的教材增加竞争的砝码，在出版教材的同时，80%的教材都有增值服务：如配送电子教案，网上在线学习卡，教学及学生自学光盘和其它类似服务。这些正是教育部在《面向21世纪教育振兴行动》中提出的推进我国信息化教育的具体体现。
二、电子教案概念、重要性及常见的制作技术
所谓电子教案就是指利用计算机技术，将教学过程中的大部分内容存储在计算机中，教学过程通过投影仪或网页浏览进行教学或让学生自学。
电子教案在现代信息化教育的今天，具有非常大的重要性，主要体现在如下几个方面。
1.便于电子教案中的各种资源随时更新与修改。
2.便于教学中的各种教学资源如：文字、图片、动画、影片、音乐的高效组合。
3.便于学生复制到家后自我学习，如果将其放在网页上可供学生浏览学习，及其他教师参考。
4.是响应国家创建节约节性社会的需要，可以大量节约纸张。
5.减少教师的重复劳动，提高教师的备课效率，及授课效率。
6.减少教师课堂板书及粉笔使用，还可以减少粉笔灰对教师与学生身心健康危害。
将计算机技术广泛应用于教学中是在Windows95与Office95以后，从而利用计算机技术取代传统的电教方法：幻灯片、录音机、录像带的播放。而广泛采用Word文档和PowerPoint幻灯片的方法，也开始逐步取代纸质教案，而后又开始出现各种动画技术、视屏技术应用于教学中。这一类可以说是计算机多媒体课件。这种可以称之为传统的多媒体技术，是在以教师为主导的教学模式中，借助多媒体的特有表现形式，对教学内容中的重难点部分展开，以发挥传统媒体所不能发挥的作用。教师可利用学校的投影教室，播放的教学软件、图片、视屏、声音、动画、多媒体光盘，用Word电子教案、以PowerPoint制作的幻灯片进行授课。
随着网络技术及网页设计与编程技术的推广使用，网络课件，也可以说是网络型电子教案应运而生，但网页设计技术没有普及，所以90%教师都是用PowerPoint制作的课件，同样，很多教材出版社出版的教材，也有约85%所提供的配套课件是PowerPoint课件，有约10%是教学光盘，只有约5%是网页形式的电子课件。
三、网页设计制作电子教案的优点
网页型电子教案，就是利用网页设计技术及网页编程技术，将教学所用的各种资源融合于一体的电子教案。它是教育信息化的实践前沿、学法教法改革的试验，是网络学习的小型集约化活动平台，不同于PowerPoint一类的课件，优点主要表现在如下几个方面。
1.利于提高教师的教学水平，减少重复劳动。
教师制作网页型电子教案，可以将各种教学资源有效地、有序地整合在一起。网页型电子教案是教师的移动教案，是教师的教学资源库，有利于教师进行教学；有利于教师对教学资源进行修改与补充，进而提高自己的教学水平与能力。
2.有利于学生学习效率的提高。
其一，教师丰富的教学内容、全新的教学形式可以提高教学的质量和学生的学习兴趣。
其二，教师可以将网页型电子教案放到学校的网站上，供学生学习相关的知识；可以将QQ在线代码写在网页中，这样学生就可以在网上与老师进行在线交流，将第一课堂延伸到第二课堂。
其三，学生自学。放在网站上的电子教案，学生可以自学，而这种自学模式则突破了看书或翻阅笔记获取知识的唯一渠道，他们根据自己的需要，在合适的时间、合适的地点、合适的条件下，反复利用网络点播、观看多种资源，包括教师的教案、参考资料等丰富的背景资源，建立一种综合性、创造性、灵活性极强的学习模式。
3.有利于教师同行资源共享。
网页型电子教案放在网站有利于教师同行之间的交流，有利于教学资源的共享，教师可相互促进、相互学习，从而全面地提高教师整体的教学水平。
4.有利于提升院校形象，可作为开发精品课程的基础阶段。
现在高等学校都要求开发自己的精品课程。通过多个院校网上查寻，做得好的精品课程都采用网页形式，这是网页型电子教案的最高形式，所以教师制作网型电子表教案正是精品课程的源泉。
四、网页电子教案的制作基本技术及要求
网页电子教案的主要内容是文字、图片、动画，只有通过超级链接到其它素材上，丰富的内容才可以提高教案的视听效果和教学效果。在制作与设计网页电子教案时要注意如下方法与技巧。
1.网页制作的工具选择。
（1）FrontPage简单易学易用，功能强大，基本操作命令同于Word的操作，有利于广大教师学习与应用。
（2）Macromedia公司的网页三剑客：Dreamweaver具有强大的网页设计功能，是用于专业制作网页的工具软件、但不易精通；Flash用于制作一些网页动画及网页，也可以制作Flash课件；Fireworks用于网页图片进行优化处理。
（3）其它工具。利用相关的工具软件和网页特效。
（4）动态网页技术。可以利用ASP、PHP、JSP等语言编程和用Access、MS SQL、MySQL数据库技术编制动态网页，从而实现交互功能。
2.网页电子教案的组织与规划。
一个成功的网页电子教案，教师的规划能力有相当程度的影响力。网页规划包含的内容很多，如网页的结构、项目的设定、网页颜色搭配、页面版面布局、文字图片的运用等。
3.网页内容的布局。
网页的具体内容可以用表格结构、框架结构表示，Dreamweaver用“层”来进行网页的布局。最好的是用框架结构。用框架结构组织的网页型教案，学生易于浏览，教师易于维护、更新。
4.用网页模板来建立网页。
网页设计步骤 范例 第4篇
关键词：网络课程；学习环境；信息资源；教学策略；教学设计
Web Design and Production Curriculum Development and Practice
Tang Huai
(Zhaoqing Business and Technology College,Zhaoqing526040,China)
Abstract:Web design and production of network programs compared to traditional courses in educational philosophy,educational models,teach-
ing strategies,learning and evaluation aspects of change,breaking the constraints of time of teaching and learning,provides a good learning resources,learning environment,and convenient article focuses on the learning environment of the online courses to build analysis and discussion and teaching strategies and evaluation systems design.
Keywords:Network courses;Learning environment;Information resources;Teaching strategies;Instructional design
一、引言
《网页设计与制作》是我院计算机各专业及电子商务类专业的必修课程，自开设以来深受学生的喜爱。因本课程教学内容及教学资源较多，学生很难在课程中完全掌握所学知识，为更好地补充和辅助学生进行课外学习，更加开放的网络教学成为本课程的有益补充和良好的学习途径。
二、课程分析与设计
《网页设计与制作》课程是高职高专计算机专业的一门技能课程，结合职位岗位对人才的需求，我们收集了网页设计、平面设计、动画设计、动态网页开发等课程的相关知识，对本课程的教学内容、知识结构、信息资源的选取、教学策略的使用进行了精心的策划和设计。我们将学生熟练的网页设计与开发的操作技能作为培养重点，在课程教学设计中，以“高素质、技能型”人才为培养目标，采取“小组协作学习”的学习方式完成整个课程的教学，并注重对小组的考核评价。
（一）学习需求分析
对于高职高专的学生，学习的主动性和积极性不够强，但对于操作性比较强的课程，往往有强烈的学习愿望，针对学生的特点，并根据《网页设计与制作》这门课程的性质特征，在教学中我们主要采用任务驱动的教学方法，实施项目教学，让学生的学习和工作的内容紧密相联，这样不仅能够吸引学生的注意力，并且能够提高学生的学习兴趣，同时达到“工学结合”的教学理念。
（二）学习内容分析
我们分析了多门与网页设计与制作相关的教材，从课程的实际应用与培养需求出发，对教学内容进行了重新安排。从本课程的教学实际出发设定的学习目标是：培养学生具有一定的艺术素养，较强的网页鉴赏能力，熟悉网页设计创意的原理和方法，熟悉HTML、CSS、JavaScript和网页制作工具，熟悉网页的制作和流程。能够根据客户需求进行网页设计与制作以及进行网站的维护和管理工作等。考虑到学生的层次不同，大家可以根据自己的实际情况有选择的学习适合自己的模块，自学能力较强的学生可以通过我们的网络平台得到进一步的提高和知识的拓展。
（三）知识结构体系
网页设计与制作融合了平面设计、网页制作、动态程序、数据库等知识，作为一门综合性强的课程.。把核心知识以最快、最有效的方式传递给学生，而又要能使学生容易掌握，所以本课程以“表格式”布局作为教学的主线，把Photoshop平面设计、Flas设计融入其中，同时适当引入“div+css”网页布局的内容。而在动态网页设计中，简单介绍Asp+Aceess动态网页设计知识。据此，在学习内容的组织上，以“用表格进行页面布局”和“网页与数据库”这两个知识点为主线，将其它知识串联起来，可帮助学生迅速建立起知识的体系结构。
图1 《网页设计与制作》网络课程知识体系和信息资源结构图
三、信息资源的选择
在《网页设计与制作》网络课程的设计中，以课内项目、课外项目和教学专题的形式进行信息资源的规划与整合，选择合适的形式来展现信息资源是非常重要的。如在网页的中文排版教学模块中，网页文字材料应以文本为主，而涉及的图片只需提供原始图片即可，增强学生对资源的应用与处理。而在“实验演示”、“动态网页的原理”模块中，以动画的形式形象地展示出来，激发学生的想象力。而在课外拓展模块中，信息资源应以视频的形式展现，使学生方便参照与模仿。信息资源总体结构见图1。
四、教学策略的设计
（一）任务驱动的教学模式
“任务驱动教学”就是将要学习的新知识隐含在一个或几个任务中，学生通过对任务进行分析和讨论，明确该任务所涉及的课程知识，并找出其中的新知识，然后在老师的指导和帮助下找出解决问题的方法，继而完成相应任务。《网页设计与制作》课程在教学中使用“任务驱动教学法”的具体做法是：教师先给学生呈现一个具体的网页效果，接着与学生共同分析该网页需要如何去处理，然后在老师的指导下师生共同完成网页，形成“阶梯式螺旋化”教学模式。这样做的好处是：通过一个任务的完成，培养学生发现问题、分析问题、解决问题的能力，激发学生的学习兴趣，同时能够提高学生的实际动手能力；而且将新知识点融入任务中进行学习，所学知识具有一定的针对性与目的性，学生的学习就会认为学的有价值，且通过一项任务的完成，学生同时可以体会到一种成就感。
（二）开放式自主学习模式
本课程建立的网络教学平台中包含本课程的教学资源、教学课件、课程教案、教学指导等模块。通过网络提供10大类、45000多个文件的立体化教学资源，所有的教学资源可在网上浏览和下载，任何学生在任何时候、任何地方都能借助网络学习。同时开发了在线答疑系统，提供了QQ和TQ两种访问途径，在线访问和离线留言两种方式。在“学习资源区”针对不同层次的学习者设计了丰富的学习资源。通过电子教案，学习者可以了解教师课堂上讲授的知识要点，并可下载素材进行相应的训练；如果在学习中遇到了困难，一般通过“学习资源区”中的“你问我答”即可解决，确需教师帮助的，也可在网络的“教师答疑”中给教师留言。专题学习板块基本上覆盖了较高层次学习者所要了解的知识。
（三）课外小组协作学习模式
在课外作业环境，采用基于构建主义学习理论的协作学习模式。一方面教师在网络教学平台创建学习主题和要求，另一方面学生可自由创建学习主题和内容，挖掘优秀学生的潜能。由学生自行组成小组并进行分工设计，在设计过程中可通过小组讨论、师生网络交流进一步深化和完善学习内容，完成后相互进行评价和交流。因此在设计网络课程时要注重协同工作环境的设计，充分发挥网络的功能。
五、学习评价系统的设计
为更好地评价学生在网络教学中的学习效果，学习评价系统的设计是十分重要的。在本网络课程中，根据学习者的学习需求和特点，进行不同程度的强化练习评价，并及时给出反馈意见。在学生完成对应的学习内容后，教师可以对学生进行评价，学生之间也可以相互评价。同时完成专题学习后，挑选出优秀的作品进行课外开放式评价，增强学生的成就感，以此达到学生的再学习的主动性。
六、结束语
全方位、立体化的网络课程教学资源，弥补了课堂讨论的局限性，调动了学生课内及课外学习的主动性和积极性，促进了学生对课程的全面掌握和理解，满足了不同层次、不同学生对计算机知识的学习的需求。而网络教学系统又具有共享性、交互性、非线性、时效性、多媒体化、服务个性化等特点，从而为学生自主学习的开展提供了保证，拓展了学习的空间和时间，充分保证教学活动的开放性、自主性，学习方式灵活多样。
参考文献：
[1]武法提.网络课程设计与开发[M].北京:高等教育出版社,2007
[2]戴士弘.高职教改课程教学设计案例集[M].北京:清华大学出版社,2007
[3]董志彪,李文光.网络环境下主题式学习的教学设计与实施[J].中国电化教育,2007
[4]黄荣怀.网络课程开发指南[M].北京:高等教育出版社,2010
网页设计步骤 范例 第5篇
关键词：网页设计与制作；教学案例；任务驱动
中图分类号：G642 文献标识码：B
1引言
“网页设计与制作”课程是高职计算机专业的必修课，也是大多数学生感兴趣的课程。随着Internet的飞速发展，网络已深入到社会的各个阶层，大批学生对网络、网站和网页等概念都已有了初步认识，同时也自己动手设计网页，建立自己的个人网站。因此，借助良好的学习动机，寻求合适的教学方法，是帮助学生掌握好该门课程的关键。
2采用多维、多层次教学模式，调动学生学习主动性
目前，我国的高职教育正逐步形成以就业为导向，以能力为本位，以实践为中心，以获取职业资格证书为标志，以促进学生的职业生涯发展为最终目标的办学模式。因此，在计算机课程的教学过程中，我们强调理论以够用为度，关键是强化实践教学，培养学生的动手能力。在“网页设计与制作”课程教学中，我们将理论课与实践课的学时比例设置为1:2，如何上好这占据总学时数1/3的理论课，并且能满足不同层次学生的学习需求，是理论课教学的关键。
精心制作多媒体教学课件
单调的100分钟理论课，会使学生感觉到沉闷和乏味，因此首先要在多媒体教学课件上下功夫。多媒体教学课件是课堂教学的灵魂，它不只是文字与图像的组合，还融合了各种设计元素，如音频、视频和动画信息，使课堂变得更加生动和精彩。制作课件时，我们根据教学大纲，链接了一些国内优秀网站，并对网站的结构和网页进行分析研究，同时鼓励学生多浏览观摩优秀的网页作品，增加感性认识，培养审美观念，这样对提高学生分析问题、解决问题的能力和学习兴趣都有很大的帮助。
采用任务驱动和案例教学法
在教学过程中，我们采用任务驱动和案例教学相结合的教学模式。教师首先演示制作网页案例，传授本节课所需掌握的知识点。然后学生模仿制作演示案例，在完成演示案例制作的基础上，对学生提出基本要求“根据教师提供的素材和要求扩充演示案例”和更高要求“自己收集资料和素材，以教师提供网页案例为模板，制作网页”。
例如，在框架网页教学模块中，我们所采用的任务驱动教学内容如表1所示。
利用网络资源，实现网上自学与答疑
高职院校学生大部分有较强的求知欲望，压缩后的课堂理论教学已不能满足他们对知识的渴求，应充分利用网络教学资源来满足不同层次学生学习的需求。在“网页设计与制作”课程的学习中，我们在校园网上网络教学课件，内容包括课程教学大纲、电子教案、视频教学、实践教学、课后习题、知识拓展、网上答疑等模块，不但能引导学生有效利用网络资源，而且网上教学不受上课时间、所学专业限制，只要对本门课程有兴趣，就可进行网上自学。另外，在课件中还和其它高校“网页设计与制作”精品课程网站相链接，满足较高层次学生的学习需求。
以竞赛促兴趣，发挥激励机制
在教学中，每一模块学习结束后在全班范围内进行作品展示。每组提供一份优秀作品，由设计者进行作品演示讲解，然后由教师进行点评，同学打分，评选出优秀作品，同时将优秀作品上传到校园网。通过这种活动提高学生的学习积极性、激发学生的竞争意识，同时还培养学生的创新精神和团结协作精神。
3强化实践教学，培养学生的动手能力
在课程设计中，实践教学占总学时的2/3。实践教学的贯彻落实，是关系到课程设置目标能否实现的重要一环。在实践教学中，我们设计了“课堂训练――模块设计――教学实训”一体化的实践教学体系，培养学生的实践动手能力。
课堂训练
课堂训练时，一定要做到重点突出，目标明确。我们要求指导教师每次上机课必须用10~20分钟的时间，安排上机操作内容，讲解操作要点，起到配合和辅助理论教学的作用。这种方式不仅缓解了理论教学时数不足的问题，还能提高学生的上机操作效率。
模块设计
当一个模块理论教学结束后，教师安排一定学时进行模块设计训练。教师根据教学模块内容选择一个教学案例，教学案例要求具有一定的代表性，不需太过复杂。学生首先分析、模仿案例，培养对这一模块理论知识的实践应用能力。然后要求学生以此案例为样本，自己收集资料设计制作作品，在设计制作过程中教师给予正确引导，在深度方面给与拓展。这样既完成了实习任务，掌握了学习知识点，又让学生独立完成作品，产生成就感和自豪感。
教学实训
教学实训阶段是学生对本门课程知识的总结和巩固，并且把所学知识应用到实际工作中的阶段。我院与校外企业合作，建立了两个计算机专业教学实训基地，为学生提供了实训场所，加强了学生实习实训技能培养。另外，我们还提倡和鼓励学生积极参与教师的教学与科研项目。如有些学生协助教师制作网络教学课件和精品课程建设，通过实践应用，不但将课程中所学的知识点融会贯通，强化了对知识的理解和掌握，又培养了学生制作网页的系统性、精细性和艺术性；还有些学生参与校园网内容设计与建设工作，如在校园网中开辟班级专栏和一些社团活动新闻专栏，同时参与校园网的维护工作。
4课程考核方式的改进
对于“网页设计与制作”课程，传统单一的笔试考核模式不能全面真实地反映学生的知识、技能和能力，因此必须将考试重点转移到考核学生的实际技能方面。
在“网页设计与制作”课程的考核模型中，我们主要采用作品评价方式进行。该课程的最终目的是要求学生应用所学知识，设计出个性化的特色网站，并上传到Internet供用户浏览访问。因此，最好的考核方式就是评价学生所做的作品。由于这类作品不能在短时间内完成，因此我们在教学实训阶段，就要求学生一边进行操作实训，一边着手收集资料，设计自己的特色网站。作品评价时，根据学生提供的域名地址，进行课堂演示，学生总体评价占30%，教师评价占40%，平时作业和上机实训成绩占总成绩的30%。这种考核方式注重实践操作和应用开发能力的培养，可大大发挥学生的学习积极性和主动性。
5结束语
兴趣是最好的老师。在教学过程中，从学生感兴趣的角度出发，对课堂理论教学、实践教学和课程考核方式等方面进行探索和改革，能使学生从被动学习转变为主动学习，提高其实践操作技能，拓展其知识面。近两年来，我院学生网页设计作品多次获得省级、校级奖励，部分学生积极参与教师的科研工作，其实践能力和创新意识得到了较好的培养。
参考文献
[1] 白建明等. 高职计算机专业教学模式的研究[J]. 计算机教育，2006，(2).
网页设计步骤 范例 第6篇
关键字：网页设计 开发 案例教学法
近年来，随着IT行业的迅速发展，特别是电子商务网站的发展与成熟，《网页设计与开发》课程已经成为了计算机、电子商务等专业的必修课程之一。网站的发展带来了专业人才的需求空间，也相应的提高了学生对课程教学的要求。通过案例教学法，让所教学生更加了解网页设计的内容，同时适应企业对人才的要求。
一、案例教学法概论
案例教学始于哈佛商学院，从十九世纪末开始至今，在法学、管理学等学科领域应用广泛[1]。案例教学比较传统型教学更加具有开放性和双向性，能在一定程度上提高学生的思维能力和创新能力。从某种意义上说，案例教学法的主体不仅仅是教师，它更加注重教与学的结合，同时具有启迪性，通过分析让学生举一反三灵活应用，从而让学生学习到与未来职业接近的工作方式和解决问题的实际能力。由于案例教学法中采用的教学案例来自于工作中所遇到的实际问题，也能提高学生的学习兴趣和职业能力。
二、采用案例教学法的原则
（一）符合课程特点的原则
网页设计与开发是一门实践性很强的课程，通过学习这门课程能够培养学生解决实际工作问题的能力。案例的选择必须是与现实工作相关的内容，让学生能够充分了解工作的实质和学习解决实际问题的方法。
（二）符合学生特点的原则
对于学生应采用因材施教的原则，在学习案例的同时，要不断的启迪学生，让学生能够将所学的只是融会贯通。
（三）符合课程体系特点的原则
《网页设计与开发》是一门结合多种软件制作工具的课程，其中包括：Dreamweaver、Flash、Fireworks、Photoshop等，加上HTML技术以及有关的数据库，可见学生要掌握和了解的知识点相当多，容易造成知识之间的干扰，不利于吸收知识，因此应该以Dreamweaver为主线，结合相关案例让学生能够将所学的各项内容有机的结合起来。
三、案例教学法的具体应用
（一）课程引导阶段
此阶段主要在于培养学生的兴趣，激发学生的好奇心。通过演示一些经典的网页案例来启发学生的积极性，例如新浪网、淘宝网、百度等一些优秀的具有不同功能的网站让学生进行观看。在演示的同时，让学生思考例如商业网站和个人网站的不同与特点，综合性网站和商业网站的不同于特点等等。同时讲解站点的设计理念、标志的设计、色彩的应用、信息的组合、超链接的层次等等。在这个阶段需要对网页设计的知识点讲解透彻，让学生对于如何制作网页与网站有清晰的条理，为学生制作网页打下好的基础。
（二）学习制作阶段
例如在进行Dreamweaver教学时，可以讲教学内容与实际案例相结合，在讲到表格时，可以举表格布局网页的例子，在说到层时可以通过弹出菜单的例子来进行分析讲解；在说到“行为”时，可以掩饰单机播放辅导能够广告漂浮栏的实例。在进行Photoshop教学时，可以将各大网站的LOGO截图给学生进行观看，让学生了解网站LOGO的制作对网站的重要性，再引入PS教学。在进行Flash教学时，可以下载网上大量的素材，在制作蝴蝶花丛飞的动画时，先播放一段蝴蝶翩翩起舞的影片，制作猎豹奔跑的动画，可以让学生在网上分别寻找猎豹和森林的背景图片，通过素材的收集和应用，不仅可以提高学生的审美能力、想象力和兴趣，还可以制作出更加生动的动画作品。
（三）综合项目合作阶段
通过一段时间的基本技能的学生后，让学生分组完成网站的制作。要求学生在课余时间去学校附近联系自己的客户，客户可以是物流公司、小商铺、学校、企业等，为客户制作一个小型的宣传网站。通过这种方式一方面可以为我们搭建一个学习的平台，使学生在学习的过程中也能体会到制作网站的整个流程；同时也可以培养学生在网站制作过程中能及时与客户进行交流沟通的能力，为以后从事这方面的工作打基础。
四、结束语
实践证明，通过在《网页设计与开发》课程中采用案例教学法，同时利用好实践教学环节，可以有效的将理论教学与能力应用相结合，通过自己分析、制作、合作大多数学生都可以自己或者与团队一起完成完整的网页作品。不同的环节采用的不同案例，让学生能够学会主动研究问题、分析问题、解决问题。俗话说“授人与鱼不如授人与渔”。学生本身也很愿意接受这种教学方式，且在课后也能够积极主动的完成教学任务。希望通过更多的实践与探讨，给计算机教学带来新的启示。
参考文献：
网页设计步骤 范例 第7篇
css:
16-精品课程内容
效果图：
html：
css：
17-版权区域-布局
效果图：
html：
css：
18-版权区域-内容
效果图：
html：
css：
网页设计步骤 范例 第8篇
关键词 商务网页设计与制作 课程设计 电子商务专业
中图分类号：F713 文献标识码：A
截至2012年12月，中国网络购物用户规模达到亿，市场整体交易规模为万亿元，同比增长。随着网络购物人数爆炸式的增长，越来越多的企业开始尝试利用网络平台开展商务活动。同时，企业对于电子商务人才的需求也越来越大。鉴于中小企业自身的特点，企业希望人才来了就能用，这就要求学生具有较强的专业技能。《商务网页设计与制作》课程是电子商务专业的一门核心专业课程，这门课程学好了，对于学生未来的成才和发展效果是非常明显的。笔者结合多年从事电子商务专业《商务网页设计与制作》教学实践经验，引入企业网站的生产流程，对课程教学内容体系进行了重构。
1课程教学现状及存在的问题分析
《商务网页设计与制作》是高职电子商务专业的一门核心专业课程，既是学生最期待、最向往的课程，也被认为是最艰难，最难啃的课程，以文科学生为主体的商贸财经类专业尤甚。之所以向往，是因为它如此之重要；之所以艰深，是缘自于技术的隔膜和不必要的恐惧。当然，究其原因，传统教材与教法，自然难辞其咎。
课程设置不合理，知识内容落后
传统网页设计与制作教材，往往专注于“网页三剑客”等技术软件的操作，让学生从一个代码，一段文字，一张图片入手，来制作属于自己的网页和网站。这种教学模式，经过两到三年，学生还难以上手；而一名合格的网页设计师，往往只需一两天，就能开发出一个让企业签单付费、价值达几百上千元的小网站。网页设计思路不明确、网站栏目设置不合理、首页布局无特色，内容定位不清晰。总之，网页制作门槛高、学生动手操作难，美工不出彩、商务没感觉，这是传统模式的致命缺陷。
课程教学模式落后
传统的《商务网页设计与制作》教学中，许多学校是以教师为中心，偏重于讲授为主，传授网页制作的工具、技术等专业知识，缺少对学生思考和解决问题能力的训练，没有引导学生去自主学习，这就导致很难培养学生的理性精神及创造能力、创业意识，也无法培养学生独立思考、敢于向权威挑战的学习态度和竞争精神，更无法引导学生的创业意识和创造性思维。
实践教学方法有待完善
现有的《商务网页设计与制作》实践教学更多的强调技术层面的东西，很少有考虑到商务诉求。在教学过程中，大部分学生都有畏难情绪，导致教学效果不明显，学生网页设计的思路不清晰，动手操作难。
2《商务网页设计与制作》教学模式设计总体方案
打破传统学术思维的束缚，遵循网站建设的业务逻辑
课程设计以典型企业网站为载体，通过商务网页设计导引、商务网页布局与设计、网页效果图制作、静态页面制作、DIV+CSS网页布局五个学习型项目的创设，对商务网页设计与制作的基本原理及实现方法进行了系统介绍及完整展示，让学生能在较短的时间内制作出不仅美观大方，而且能体现企业商务诉求的网站，打破传统学术思维的束缚，遵循网站建设的业务逻辑――企业怎么做，我们怎么做。商务网页设计制作流程如下图1所示。
教学内容体系构建
本课程在教学内容的设计上以商务网页设计与制作业务流程为主线，将商务网页设计的基本原理与方法融入到典型工作任务的介绍和实训中。
第一个模块和第二个模块以典型商务网站类型、典型商务网页版面风格分析入手，使学生快速理解和掌握网页设计的基本原理和方法，并能完成网站栏目规划及商务网页版面设计的任务。
第三个模块以网页素材的选择为突破口，使学生快速地熟悉并掌握网页效果图制作的方法、步骤及要点。
第四个模块则要求学生在已有效果图的基础上能制作实现静态页面，以使学生掌握必要的html标记语言，并掌握常见的两种页面布局方式，为后续课程的学习打下基础。
在课程实训方面，则选择目前商务网站建设服务市场业务类型较多的企业网站建设业务为主线构建实训项目。这类网站建设业务中的页面设计素材丰富、规范化程度高，便于学生学习。
在教学内容的细节处理上将充分考虑本课程与艺术设计类及软件设计类相关课程的区别，降低学生学习难度，突出商务网页设计与制作的重点，使学生能举一反三，适应商务网站网页设计师岗位能力需求。
3课程教学的实施途径
基于校企合作的课程项目开发
《商务网页设计与制作》要求教师教学应以企业真实需求为逻辑主线组织教学内容，以项目为知识学习、技能训练和素质养成的载体。为了保证与企业生产实践相结合，最大限度地利用企业有效资源，通过积极深入市场与企业一线，认真分析当地产业结构与发展趋势，寻找校企合作的结合点。目前，课程依照行业标准、岗位技能要求以及岗位工作流程等进行项目运作。在项目的开发过程中，企业高度参与，共同确定基于工作过程的典型工作任务。
基于职场环境的教学实训基地建设
建设能够进行教、学、创于一体的基于职场环境一体化教学实训基地，是实施一体化教学的硬件保障，是实现教学模式转变的重要条件。目前，我们已经建立了三个学生工作室：网赢工作室、智越工作室和服务外包工作室。其中智越工作室的核心业务是中小企业网站建设与维护，每年吸纳30多名学生，完成10多个企业真实项目，收入1万多元。通过引进企业真实项目，和企业建站的标准流程，提升学生的专业技能和职业素养。
考核评价体系改革
本课程的学习，是要求学习者联系一家有商务网站建设需求的真实企业，来完成课程模块的实训。本课程以学习者的实训作品为主要考核依据，兼顾学习者的学习态度、职业素养、团队意识及表达沟通能力。
4结束语
将企业真实的生产制作流程引入到《商务网页设计与制作》课程教学中，引导学生重视企业的商务诉求，制作出符合企业需求的商务网站，是本课程的重要特色。
参考文献
[1] 方玲玉.《网络营销实务》工学结合课程开发的实践尝试[J].职教论坛，2008（16）.
[2] 张婵.基于就业一创业导向的独立学院网络营销实践教学方法改革探讨[J].物流工程与管理，2012（5）.
[3] 周建良.以创业能力培养为导向的电子商务课程开发探索[J].科教文汇，2010（7）.
[4] 韩义.对电子商务课程教学改革的思考[J].天津电大学报，2008（9）.
[5] 方玲玉，李小斌，李念.高职经管类专业系列项目课程开发――以高职电子商务专业为例[J].职教论坛，2010（12）.
网页设计步骤 范例 第9篇
【关键词】大专院校 Flash 网页设计 教学方法
Flash网页设计是大专院校网页设计系列课程的扩展和提升阶段，以非服务器端脚本编程的Flash结构页面设计为主，包括Flash软件学习、Flas设计和Flash网页设计等几个方面。与基础性的HTML静态网页设计课程相比，Flash网页设计的教学内容整体性较强，教学边界相对清晰。下面笔者根据自身的教学经验，对其教学思路和教学方法做简要分析。
一、利用软件的快捷键快速上手
Flash软件与基本动画设计是网页设计的基础部分。如果在专业课程体系中没有专门的Flash模块作为先导课程，这一课程就需要引导学生在软件使用层面快速上手。为实现这个目的，可以采用“快捷键学习法”。这种依靠重点快捷键快速学习的方法有助于短时间内准确把握软件的常用与核心功能，受到越来越多的设计师的青睐。
笔者建议，在教学课件中为每一个常用的菜单与工具附上快捷键命令，以便学生第一次接触时就可以熟悉它们。实际上，软件在快捷键设置方面也非常注重功能的集合性，有助于集中记忆。如针对帧的操作部分，F5、F6、F7三个功能键分别实现了“插入帧”“转换为关键帧”和“转换为空白关键帧”三项内容，既好记又好用。
二、Flash线性动画的设计相关性
我们知道，Flash MV一度在网络上非常流行，和Flash MV的线性播放特性相似，Flash广告已经成为时下网络广告的主流。如某知名网站首页共使用了27幅广告，其中Flash广告有18幅，占页面广告总数的。
Flash网络广告的普遍使用促进了Flash技术在艺术设计专业中的广泛应用。基于这种考虑，笔者建议在软件基础学习之后安排适当的学时进行Flash广告设计学习。这一部分课程的教学还可以与广告相关课程相衔接，以进一步丰富Flash网页设计课程的内涵。
在Flash广告设计教学中，要侧重于内容密度、节奏感、视觉冲击力等与Flash软件技术直接相关的层面，其他内容，如广告语言、传播理论等可鼓励学生课外复习或自学，做到把握重点、取舍得当。
三、Flash网页设计“总分总”的教学模式
在软件基础和线性动画（Flash广告设计）的基础上，进入到课程的主体模块，即Flash网页设计。与HTML静态网页的分页面结构不同，Flash网页设计在集成设计开发环境内（Flash软件和Action脚本）实现网页内容与非线性结构的编排，模块化特性明显。为此，笔者尝试采用“基本结构设计—模块分解设计、网站整合”三步走的教学法，可概括为“总—分—总”教学流程，合理调配教学难点和重点，循序渐进，在实践中取得了一定的效果。
（一）基本结构设计
首先，从网页基本结构入手，利用按钮对时间线上各帧的控制构造网站模型，其中包含了最基本的场景转换。在学习的后期，可以针对每帧对应的画布进行深入设计，包括内容扩展和淡入、淡出动画效果的实现等。
基本结构设计涉及每帧对应的画布设计、按钮设计、元件和实例的进一步应用以及补间动画等内容，还涉及一些基础的Action脚本内容，如“stop”“gotoAndStop”“gotoAndPlay”命令以及帧标记的参数调用等，适合入门学习。在脚本程序编写的最初阶段，重点要使学生理解脚本语言代替人进行指令操作的特性，如“去哪”“做什么”等，利用这种指向性的形象思维逐渐强化学生的编程思维。一般来说，静态网页设计课程教学不会将Java脚本作为重点，在这种情况下，这一阶段的Action脚本学习就更加重要。
（二）具体模块学习
由于Flash网页多在屏幕的显示面内不翻屏，高度有限，这就需要使用软件功能和脚本程序创造更多的结构层次去容纳网页内容。除了场景的转换外，在每个场景之中，还要借助于不同类型的页面组件来实现额外的结构层次。
针对种类较多的页面组件，可以实施“分解教学”，即抛开网站设计的整体性，单纯提炼每个组件的设计与编程要点，使每节课都可以完成一种组件设计，实现相关功能。笔者选择的页面组件包括按钮组（菜单）、弹出框、下拉菜单、声音控制模块和预加载器等。
在设计层面，要考虑到各组件与网页整体风格的一致性；在内容层面，要合理地选择组件类型，丰富内容层次，便于用户访问，形成良好的互动性。而在Action脚本编写方面，要以典型程序、核心程序为主，逐步增加更多的样式变化。实际上，虽然组件类型不同，其背后的程序控制大多有着一定的内在联系，如很多组件都会用到onEnterFrame频率控制函数。随着教学的不断深入，要尽量将脚本教学系统化，将松散的知识点整合起来，尽量覆盖到常用的函数、方法和命令。
（三）网站内容搭建
经过不同组件的分解学习，接着补充几种场景转换的方法，结合不同设计项目中对组件的选择，Flash网站就可以搭建起来。至此，Flash网页设计的技术性教学目标就基本完成了。
在技术性教学目标之外，在课程的收官阶段，要融入行业设计理念，以提高结课作业的质量，保证教学效果。在HTML静态网页设计教学阶段，笔者针对结课作业挑选了“实用设计”这一特定行业分类进行教学强化，避免学生在结课阶段设计得没有针对性，学无所用。
四、静态网页的有效补充
如果分析“静态网页”的内涵和外延，可以看到，在基于HTML网页设计之外，只要立足于本地，与服务器没有数据交互的网页设计都可以统称为“静态网页”。从这个角度来看，艺术设计专业中的Flash网页设计课程也基本上以静态网页为主。
在时代，交互性的社交网络已经发展得比较成熟，使每个独立域名的网站不再是用户交互的首选。在这种形势下，静态网页设计要“扬长避短”，不拘泥于本身用户交互行为的弱点，以设计为主，反而有自己的一席之地。在教学中，要鼓励学生在参与网络互动之余，尽量发挥自身设计优势，具备独立完成内容展示型网站的能力。
经过相关调整，Flash网页设计课程具备了循序渐进、由浅入深的教学层次，直至课程结尾处，着眼于设计之“道”的有目的训练，使整个网页设计课程体系具备了从基础知识到综合设计提升的完备性，并与其他课程有机结合，最大限度实现了课程的自身价值，为该课程的序列化、标准化建设积累了一定经验。
（注：本文为辽宁省教育科学“十二五”规划2011年度一般课题，课题批准号：JG11DB075）