Photoshop在图片处理上具有强大的功能，尤其是对图像进行精细化操作，更是奠定了其在广告设计及美术创作中的坚实地位。当然，在网页制作模型设计上，Photoshop依然可以凭借其精细化、功能化优势来实现美轮美奂的网页规划效果。
现代网络技术的发展，对网页制作提出越来越高的要求。Photoshop作为功能强大的图像处理软件，同样在网页制作设计中不容小觑。如在不同格式文件上兼容性强，图像处理精度高、误差少、视觉效果显著，更成为网页图像、动画、基于Web页面设计领域的优秀工具。
利用Photoshop来进行网页设计，主要是利用图层的特色功效，可以实现不同层次上不同元素的放置，且在进行移动时不会影响其他元素及整体视觉效果。当然，对于图层空间不仅可以放置单独页面要素，还可以放置链接，还可以进行叠加，确保不同图层上不同要素的色彩、亮度、大小等不会出现偏差。由此以来，在进行网页要素规划及布局上，可以依照设计者的思维进行灵活操作，增强了设计自由度。
由于网站在设计过程中因客户的要求而进行修改是常有的，而Photoshop因其便捷的修改功能，可以先通过Photoshop设计出效果图，然而结合需求变化来优化，最终获得客户的满意。对于其他软件则无法实现自由、从容的修改。
网页制作的目的在于浏览，而浏览体验不仅需要美观和规范的视觉效果，还要具有良好的网站交互能力。特别是对于大型网页架构，因加载项目过多，对网速要求过高。但对于Photoshop制作的网页，多采用裁切体积及文件格式转换，对系统资源占用率较低，从而能够保障快速的反应速度，提升浏览的流畅度。
根据网页设计模型基本框架要求，首先需要新建图像文件，以常规1280*800像素为例，可以设置浏览器的图像宽度、高度为1260*780，选择RGB色彩模式，便于在Photoshop中利用色彩的叠加营造五彩缤纷的视觉效果。
针对不同功能、不同用途的网站，其页面框架结构也不尽相同。通常情况下，对于视觉的热点效应多聚焦于左上角。在进行网页浏览时，左上部及上部为视觉中心，其后往下阅读，呈现出“F”形特征。因此，在页面布局上，围绕网站标识、站名、导航条、热点栏目、头条等页面布局要素，来重点优化左上部区域。如对于综合性网站，通常采用“国”字型页面布局，最上面为标示栏及广告条，其次为网站的主体内容，再次左右各一列小字号标题栏目，中间侧重于图文并茂的内容，最下面为基本信息，包括版权、联系方式等说明。因此，在设计上，利用Photoshop在页面上设置“T”型字，形成三块空间，最上面为标识、广告条等；左侧为导航栏，右侧为网站主体内容；接下来设置不同的页面图层，并在不同图层上进行绘制，结合Photoshop的图形、渲染功能来完成。
完整的网站需要具备Logo、广告栏Gif动画，背景底纹及导航按钮等。对于网站Logo，利用Photoshop丰富的图像设计功能来设计独特的富有个性的标识。如新浪网标识中的“i”通过进行艺术化处理，将之转换为活灵活现的眼睛，正是传达“世界在你眼中”的设计理念，增强了视觉动感；再如人人网的标识，利用对“人”字的抽象变形，代表每一个人；辅以圆圈，寓意人际圈，其共同的交集则象征着人与人的协作、分享、沟通。可见，对于标志的设计，既要从视觉审美上来表达生动的效果，还要从文化内涵彰显丰富的意蕴。Photoshop可以实现对矢量图形的任意变形而不失真，从而为我们进行自由创作和设计提供了无与伦比的设计环境。如可以利用钢笔工具来绘制矢量图，保存为JPG格式占用空间小，带来较快的响应速度。
广告栏多采用GIF动画，位置多居于网页的最醒目中间靠上，在动画内容上可以是企业精神、也可以是产品介绍，以图像自动切换等方式来呈现。利用Photoshop和ImageReady可以制作出简单、易用、低系统占用率的GIF动画，避免了传统SWF动画设计对插件的要求。举例来说明，以600*200像素广告栏为例，其操作过程如下：首先新建600*200像素文件，分别插入四张不同的图片到1，2，3，4个图层里，调整各图层中图形尺寸，使其保持和谐度；分别在4个图层新建文本图层，并打出不同的广告语，与相应图层进行合并；利用ImageReady，打开后点击“动画”面板，复制当前帧，连点3下，使帧数为4；分别对各帧进行操作，每一帧显示一个图层的内容；设置动画延时数值；转存为GIF动画格式，预览效果。
在利用Photoshop进行背景设计时，可以利用无限填充功能，只要设计一个背景元素，将之无缝连接并填充整个背景页面即可。如可以设计一个1*2像素的条形状背景图，保存为JPG格式，并填充整个背景，而这个背景文件却仅有几k的大小。
按钮是网页制作模型中的必要内容，在设计上要注意几点：一是大小尺寸要以像素为单位，避免图像失真；二是保存为JPG格式，对于有透明像素的需要改为GIF格式；三是利用Photoshop处理过的源文件要另存为PSD格式，便于后期修改；四是利用切片工具进行切割时要依靠参考线，保持页面布局一致性，避免爆边。
总之，利用Photoshop进行网页制作模型设计，要从网页整体功能及展示特性上，积极挖掘Photoshop在网页图像、动画、WEB化页面设计中的优势，提升网页制作的应用效率。
[2]邓美玲.浅谈Photoshop在网页制作中的应用[J].无线篇：网页的设计与制作范文
网页设计与制作的用户界面作为与用户打交道的门面,它在网站开发平台中占有非常重要的地位,因为它直接面对的是广大浏览用户。由于网页设计是计算机科学的一个专门研究方向,有其自身的原则、标准和方法,本章从简要介绍网页的一般设计原则和方法出发,结合网页开发的特殊性,系统阐述网页开发平台界面的开发和实现。
网页的设计除了要掌握页面设计的一般原则外,还要把握其特殊性,因为网页的主要功能是向浏览者提供信息,所以网页设计和其它应用软件设计存在一定的差异。总的来说,网页设计是一项既简单又复杂的工作。说其简单,是因为设计者只要遵守一项原则就行,那就是:设计者的设计应该增强而不是减弱网页所要提供的信息,不可喧宾夺主。说其复杂,是因为网页设计要考虑到很多问题的方方面面,需要有许多灵感和技巧在其中。
在网页设计中,用户通常根据所提供的交互方式进行浏览或操作,设计者在设计网页的页面时,应始终考虑如何提供良好的交互性:如主页的界面设计对浏览者来说是否具有吸引力;是否可以更好地引导浏览者访问站点;是否能保证用户简便、快捷、准确地操作网页;是否能为用户提供有效的帮助和出错信息;所创建的网页是否更加符合浏览者的需要。网页的交互操作主要集中在网页的多维超链接空间和网页的提交操作中。
第一,网页的色彩具有精神价值,对人的心理影晌有时是直接刺激,有时是间接联想。设计者做到有针对性合理的用色,来体现网站适应人的心理需求和特色十分重要。那么如何搭配色彩来表达网站的内涵?色彩总的应用原则应该是“总体协调,局部对比”。也就是说网页的整体色彩效果应该是和谐的,只的局部小范围可以有一些强烈色彩对比,它包括网页的背景、文字、图标、边框、超链接等。首先,网页要有主色调,以确定网站的总体基调,充分利用色彩的象征性、职业的标志色、冷暖的感觉和时退的效果来展示网站的艺术内涵和文化品位。其次,网页的颜色搭配最好不要超过3-5种,网页的前文和背景的色彩对比要尽量大,特别不要采用花纹繁杂的图案作背景以便突出主要文字的内容。
第二,网页的字体设置包括字体的样式、效果和大小。选择贴切的字体有助于表达网页的内涵。对于网页的字体设置通常归纳以下几点内容:一是不要使用超过3种以上的字体。字体太多则显得杂乱,没有主题。二是不要用太大的字。因为版面是宝贵有限的,粗陋的大字体不能带给访问者更多信息。三是不要使用不停闪烁的文字。四是原则上标题的字体较正文大,颜色也应有所区别。
第三,网页的排版结构即网页的版面布局。版面是浏览器看到的完整页面,而布局指以最适合浏览的方式将图片和文字等内容排放在页面的不同位置。目前网页版面布局主要有:“T”结构布局、“口” 型布局、“三”型布局、对称对比布局和POP布局。经分析、比较这些布局,得出在除了网页标题部分和结尾部分,网页中间的主体部分一般采用1: 2、2: 1或1: 2: 1的结构,这些结构都方便地、有条理地组织了网页的信息。当然,这并不意味着一定要采取这些组织结构,只要能够合理地组织信息、便于交流,采用其他更为灵活的结构方式也是可以的。
用户界面元素是指一些具有特定功能和操作方式的可视化图形对象。在不同的应用系统中,有不同的用户界面元素。在浏览器中,用户界面元素包括:浏览窗口、图形图像、表格、链接、框架、表单、按钮、对话框等。用户界面元素设计的内容包括采用哪些界面元素、界面元素的定制、界面元素的如何布局以及界面元素的管理等。
交互操作设计是指用户如何通过输入设备和各种界面元素,实现人机交流信息的目的。由于网页开发平台是在览器下运行的,交互的过程是通过表单块提交操作或链接方式来完成的,即用户通过鼠标和键盘在界面元素上触发相应的事件,软件接收到事件后,作相应的处理,然后将结果通过界面元素或其他途径反馈给用户。交互设计的关键在于如何利用各种界面元素,定义自己的交互操作规范并进行管理。
导航主题页面的布局可以采用与后台管理页面类似的“T型”布局,用框架把整个浏览窗口分割成三个部分,上面为导航栏和网站登录模块,下面左边为所选择导航主题的第二层主题或内容列表,右边为相应的网页内容。导航主题页面的结构可以采用树型的分层次结构模型,不但有利于动态管理,而且也有利于浏览者对各种主题内容的访问。
为使网页开发平台利用CSS技术统一风格,实现版面设计,在页面套用CSS技术不是用直接法或导入法,而是用了链接CSS文件法。其方法如下:当多个网页页面采用统一的风格需要套用CSS文件时,首先需要建立CSS格式页。CSS格式页文件的内容与普通的HTML文件相同,都是一般的文本文件,只是扩展名为CSS,在CSS格式文件中,不需要用标记来限定。
用块表示符 (DIV )和 定位界面元素灵活性较大,它们有两种定位方式:绝对定位和相对定位,绝对定位使界面放置在网页上准确的位置,相对定位是相对于其它界面元素而定位的,此时对其它元素进行变动后,都会保持定位的完整性。块表示符通过其定位属性Top、Left和Position来实现界面元素的定位。
表单是提供给用户输入信息的区域,它是使web页面具有交互性特征的关键,用户将查询或填入表单的数据转送给服务器的ASP处理程序,服务器使用这些处理程序来处理用户的请求,并动态地产生HTML文件,最终对用户的请求作出响应,表单的工作过程是:用户在客户浏览器根据URL地址或链接向服务器发送用户的请求,服务器接受用户的请求,调出相应表单页面,并返回给浏览器;用户填写表单,提交给服务器,服务器执行ASP文件,取出用户提交信息;应用程序与数据库通过ODBC建立联系,存取数据库中的数据;将数据填回表单,结果以HTML页面送给客户浏览器。
链接是提供给用户链接页面信息的接入点,链接可以分为一般链接和带参数型的链接。一般链接在静态页面和动态页面中广泛存在,它的交互性只局限于页面间的信息传递,向服务器请求已固定化的页面,然而,利用带参数的链接,可以实现复杂的交互动作,用户将参数转送至服务器的ASP处理程序,服务器使用这些处理程序完成用户的请求,并动态产生HTML文件。
1．1内涵理解翻转课堂的内涵为，在信息技术的基础上，将传统的课堂教学和课外学习的过程进行转换的一种新型的教学模式，又叫做颠倒课堂。在这种教学模式下，教师要将原本的课堂教学内容和学习资料以视频的方式展开，学生则需要在课下提前观看视频，然后在课堂上共同交流，讨论并解决之前学习过程中遇到的问题。1．2应用优势通过和传统教学模式的比较，我们可以对翻转课堂的应用优势进行如下归纳:第一，翻转学习方式。在翻转课堂中，学生可以从被动学习转变为主动学习。因为课程内容以视频的方式呈现，可以永久性保存，便于学生随时观看。这样部分基础较差的学生可以结合自身的实际情况进行反复学习，获得教师的个别指导，能满足个性化教学的需求。另外，通过课前学习、课堂讨论和课后复习的过程，还能对教学的内容进行整合，提高课堂教学的效率。第二，翻转课堂活动。在翻转课堂中，学生在课下就可以初步完成知识的学习，节省了课堂讲解的时间，教师和学生有充足的时间开展讨论、实验探究、互动交流等对知识的内化活动，对课下学习中的问题进行解答和指导，增加课堂教学的活跃程度，有助于激发学生的学习兴趣。第三，转换师生角色。在翻转课堂中，充分体现了学生在学习活动中的主体地位，他们能够根据自己的实际情况，自由选择教学资源。同时，在课堂讨论中，不再是由教师主导，而是根据学生感兴趣的问题进行针对性的指导教学，符合因材施教的要求。
网页设计与制作是计算机类专业的一门基础课程，具有较强的实践性和操作性，其课堂教学主要采用的是案例教学法，就是通过对案例进行分析，讲解其中的知识，进行实验步骤的演示之后，让学生当堂完成练习。这种教学方法虽然优于传统教学方法，也取得了一定的成效，但是在具体的实施中仍然存在如下问题。2．1学生缺乏主动思考在网页设计与制作的练习中，学生基本上会完全根据教师演示的步骤来完成练习，所以大部分的时间和精力都集中在回忆实验步骤中，没有主动思考，。实验过程是否合理，甚至根本不明白实验的目的。当面对类似的案例或者实际的项目时，就无法灵活应用所学的知识，导致学生的思维存在严重的依赖性，不利于开发其自主学习能力。2．2教学质量较低网页设计与制作课程的教学内容较多，包括了平面设计的技术、HTML、XML、CSS、Javascript、动画技术、服务器配置等，但是课时设置却较少。例如，我校对该课程安排了60个课时，其中教师的课堂讲解和步骤演示课时约占50%，学生学习知识点和上机实践操作的实践只有一半，很难完成教学大纲的要求。为了完成教学任务，很多内容都是一带而过，导致教学质量较低。
3．1做好课前准备教师可以采用相关的视频录制软件，例如“屏幕录制专家”，录制2个长度约5min的微视频，并根据视频讲解的内容，设计导学案，并将资料在班级QQ裙或者微信朋友圈共享，学生利用手机终端下载视频，利用课余时间观看视频，查看导学案，提出自己的问题，在QQ群或微信群中讨论。教师则需要对学生的反馈意见和问题进行统计和归纳，便于在课堂中集中解决。做好课前准备，能让学生初步了解和理解个人主页的制作方法。3．2合理安排课中教学在学生完成对个人主页制作教学内容的预习之后，教师可以结合具体的实例来解答课前学生提出的问题，并进行案例的演示操作。这一环节的时间应控制在20min左右。在翻转课堂中，由于学生在上课前已经进行了比较深入的学习，。对教学内容有了一定的理解，所以教师在确认学生基本掌握个人主页的布局之后，就可以布置任务，将学生平均分成若干个小组，采用小组合作的方式完成个人主页的设计，让每一个学生都能参与其中。在学生练习的过程中，教师要积极发挥自身引导者的作用，对遇到问题的小组及时进行指导。设计完成之后，教师可以让各小组展示作品，并对作品进行评价。其中评价分为自我评价、小组互评和教师评价，对课前微视频学习情况、独立学习、问题讨论、合作表现、创意你表达和成果展比等内容进行综合评价。3．3完善课后复习课堂教学完成后，教师可以将评价表的原始数据进行整理，然后放入各个小组创建的网络学习档案中。同时，教师还需要对课堂中遇到的问题进行整理和总结，并提出对应的解决方法和应对策略，将其制作成动态的学习资源，发送到共享平台，长期存放，方便学生能随时观看。对于因为各种原因无法参与课堂学习的学生，教师也可以利用这些资源帮助他们补课。同时，对于在学习上存在一定困难的学生，或者是不敢大胆提问的学生，也可以利用教师提供的资源，在课后进行反复观看。这样既可以进行补救性学习，又可以节省课堂的公共时间，提高课堂教学的整体效率。
2.项目的设计。对网页设计与制作专业的学生来说，他们主要的学习内容就是将网页进行美化以及实现网页的功能，要能够掌握基本的Html语言，要会使用Dreamweaver、Photoshop以及Flash等软件来进行美观并且实用的网页的设计。网站的建设可作为一个整体的项目，之下可以分出一些子项目。可以以“在线留言板”来作为课题。它包含了HTML、CSS以及VBScript这三个方面的内容，与学生的学习能力比较适宜，此外，它也是比较通用的，在很多的网站上都是不可或缺的，有应用价值。首先将学生分成小组，每一个组都要有一个组长，组长来进行项目任务的分配，每一个组员都要有专门的职责，并且要定期的进行会议的召开，来报告各自的工作进度。如果有哪一个人遇到了困难，小组之间要共同的解决。
6.教师检查项目。在项目完成之后，学生要对项目的结果进行检查，然后再由老师进行质量的检查。并且将其完成的作品进行公开的展示，让学生来找出优点以及缺点。要让学生进行自评以及互评。这样，可以使学生锻炼他们的责任心，提升他们的质量意识，并且可以学习评估的方法。教师不但要对内容检查，还要检查其实际的功能效果。
《网页设计与制作》课程是高职高专计算机专业的一门技能课程，结合职位岗位对人才的需求，我们收集了网页设计、平面设计、动画设计、动态网页开发等课程的相关知识，对本课程的教学内容、知识结构、信息资源的选取、教学策略的使用进行了精心的策划和设计。我们将学生熟练的网页设计与开发的操作技能作为培养重点，在课程教学设计中，以“高素质、技能型”人才为培养目标，采取“小组协作学习”的学习方式完成整个课程的教学，并注重对小组的考核评价。
对于高职高专的学生，学习的主动性和积极性不够强，但对于操作性比较强的课程，往往有强烈的学习愿望，针对学生的特点，并根据《网页设计与制作》这门课程的性质特征，在教学中我们主要采用任务驱动的教学方法，实施项目教学，让学生的学习和工作的内容紧密相联，这样不仅能够吸引学生的注意力，并且能够提高学生的学习兴趣，同时达到“工学结合”的教学理念。
我们分析了多门与网页设计与制作相关的教材，从课程的实际应用与培养需求出发，对教学内容进行了重新安排。从本课程的教学实际出发设定的学习目标是：培养学生具有一定的艺术素养，较强的网页鉴赏能力，熟悉网页设计创意的原理和方法，熟悉HTML、CSS、JavaScript和网页制作工具，熟悉网页的制作和流程。能够根据客户需求进行网页设计与制作以及进行网站的维护和管理工作等。考虑到学生的层次不同，大家可以根据自己的实际情况有选择的学习适合自己的模块，自学能力较强的学生可以通过我们的网络平台得到进一步的提高和知识的拓展。
网页设计与制作融合了平面设计、网页制作、动态程序、数据库等知识，作为一门综合性强的课程.。把核心知识以最快、最有效的方式传递给学生，而又要能使学生容易掌握，所以本课程以“表格式”布局作为教学的主线，把Photoshop平面设计、Flas设计融入其中，同时适当引入“div+css”网页布局的内容。而在动态网页设计中，简单介绍Asp+Aceess动态网页设计知识。据此，在学习内容的组织上，以“用表格进行页面布局”和“网页与数据库”这两个知识点为主线，将其它知识串联起来，可帮助学生迅速建立起知识的体系结构。
在《网页设计与制作》网络课程的设计中，以课内项目、课外项目和教学专题的形式进行信息资源的规划与整合，选择合适的形式来展现信息资源是非常重要的。如在网页的中文排版教学模块中，网页文字材料应以文本为主，而涉及的图片只需提供原始图片即可，增强学生对资源的应用与处理。而在“实验演示”、“动态网页的原理”模块中，以动画的形式形象地展示出来，激发学生的想象力。而在课外拓展模块中，信息资源应以视频的形式展现，使学生方便参照与模仿。信息资源总体结构见图1。
“任务驱动教学”就是将要学习的新知识隐含在一个或几个任务中，学生通过对任务进行分析和讨论，明确该任务所涉及的课程知识，并找出其中的新知识，然后在老师的指导和帮助下找出解决问题的方法，继而完成相应任务。《网页设计与制作》课程在教学中使用“任务驱动教学法”的具体做法是：教师先给学生呈现一个具体的网页效果，接着与学生共同分析该网页需要如何去处理，然后在老师的指导下师生共同完成网页，形成“阶梯式螺旋化”教学模式。这样做的好处是：通过一个任务的完成，培养学生发现问题、分析问题、解决问题的能力，激发学生的学习兴趣，同时能够提高学生的实际动手能力；而且将新知识点融入任务中进行学习，所学知识具有一定的针对性与目的性，学生的学习就会认为学的有价值，且通过一项任务的完成，学生同时可以体会到一种成就感。
本课程建立的网络教学平台中包含本课程的教学资源、教学课件、课程教案、教学指导等模块。通过网络提供10大类、45000多个文件的立体化教学资源，所有的教学资源可在网上浏览和下载，任何学生在任何时候、任何地方都能借助网络学习。同时开发了在线答疑系统，提供了QQ和TQ两种访问途径，在线访问和离线留言两种方式。在“学习资源区”针对不同层次的学习者设计了丰富的学习资源。通过电子教案，学习者可以了解教师课堂上讲授的知识要点，并可下载素材进行相应的训练；如果在学习中遇到了困难，一般通过“学习资源区”中的“你问我答”即可解决，确需教师帮助的，也可在网络的“教师答疑”中给教师留言。专题学习板块基本上覆盖了较高层次学习者所要了解的知识。
在课外作业环境，采用基于构建主义学习理论的协作学习模式。一方面教师在网络教学平台创建学习主题和要求，另一方面学生可自由创建学习主题和内容，挖掘优秀学生的潜能。由学生自行组成小组并进行分工设计，在设计过程中可通过小组讨论、师生网络交流进一步深化和完善学习内容，完成后相互进行评价和交流。因此在设计网络课程时要注重协同工作环境的设计，充分发挥网络的功能。
为更好地评价学生在网络教学中的学习效果，学习评价系统的设计是十分重要的。在本网络课程中，根据学习者的学习需求和特点，进行不同程度的强化练习评价，并及时给出反馈意见。在学生完成对应的学习内容后，教师可以对学生进行评价，学生之间也可以相互评价。同时完成专题学习后，挑选出优秀的作品进行课外开放式评价，增强学生的成就感，以此达到学生的再学习的主动性。
全方位、立体化的网络课程教学资源，弥补了课堂讨论的局限性，调动了学生课内及课外学习的主动性和积极性，促进了学生对课程的全面掌握和理解，满足了不同层次、不同学生对计算机知识的学习的需求。而网络教学系统又具有共享性、交互性、非线性、时效性、多媒体化、服务个性化等特点，从而为学生自主学习的开展提供了保证，拓展了学习的空间和时间，充分保证教学活动的开放性、自主性，学习方式灵活多样。
《网页设计与制作》课程是近几年高职院校普遍开设的一门课程,它的实践性非常强,包含内容非常丰富,随时展不断变化,且极具创造性,受到学生的欢迎。怎样在有限的课堂教学中让学生掌握网页设计与制作的技巧,培养他们的实际动手能力,是教师们一直关注的。笔者在实际教学中一直在积极探索,就此结合自己教学经验谈谈几点体会。
《计算机应用基础》、《C语言程序设计》作为它的先导课程,为它提供了必要的知识准备,比如熟悉设计平台,了解文字基本操作等等,同时《网页设计与制作》又为它的后续课程《动态网页设计》、《javascript脚本语言》打下坚实基础。本课程的学习有助于学生学习本专业相关其它知识,提高学生的动手能力,提高学生将来从事实际工作的综合素质。
通过调研,分析该课程今后面向的职业岗位群。学生将来主要面向企业、公司、事业单位和政府机关从事管理互联网信息,网页制作、网站设计、建设和维护工作。根据从事这些岗位要具备的知识、能力和素质及专业人才培养目标,定制了本课程的教育任务。通过本课程的学习,逐渐提高学生的审美能力,培养学生的动手能力、创新能力、一定的沟通技巧和团队合作技巧。通过学习本课程,学生具备:1)网站规划、创建及测试的能力;2)美化网页能力;3)考取相关行业证书的能力。
网页设计与制作这门课程在我院电子商务、计算机相关专业都有开设。本课程包含的知识面非常广:网页基础知识、CSS样式表、Dreamweaver、flash 、Fireworks及HTML语言、 Javascript语言等。该课程对学生的动手能力要求也较高,要求学生学完本课程后能以团队协作的方式进行小型网站的开发。考虑到教学对象来自不同的专业,在课程设计时应根据不同专业的人才培养目标、各专业的特点、学生知识结构的差异,在教学内容的选取上要有区别,真正做到因材施教。比如计算机专业学生逻辑思维能力较强,有一定的编程基础,教学侧重网站开发,通过课程学习学生能熟练运用CSS样式表及HTML语言,且能利用Javascript编写一些网页特效。而文科类学生对颜色、布局及构图较敏感,有一定图像处理基础,对他们则侧重网页设计方面,通过本课程的学习学生能够设计较美观的页面,能利用动画软件创造生动、活泼的页面。
针对本课程,先设计一个总项目 ,再根据循序渐进的原则,分小项目进行教学 。把总项目分成若干小项目,再把小项目分成不同的子项目,子项目再分解成步骤。 通常以子项目为教学单位,划分层次如下:总项目小项目子项目步骤。例如,设计一个“畅想未来”的网站,这个总项目可以分解成多个小项目,单个页面可作为一个小项目,而该小项目又可分为版面布局、导航条制作、图片处理、动画效果等几个子项目。对于子项目教学过程,可按图2进行:
以子项目为教学单位,教师可结合教学大纲,收集与设计符合开发进度的教学专题。专题应尽可能将课程大部分知识点覆盖,由若干个教学案例组成,先易后难;专题与专题之间要有联系,前后连贯,为完成一个完整的网站项目服务。例如,在项目进度到网页的排版与布局时,笔者收集了大量的排版与布局的案例,以专题的形式讲授如何利用表格、层、框架来制作流行的排版和布局模式,学生对于网页的排版和布局有了更全面、深刻的认识,改变以往教师单纯用知识点讲解,学生学得比较零散的缺点,有较好教学效果。
网页设计与制作是一门实践性很强的课程,学生的水平参差不齐。有些学生接受能力很强,能快速掌握并理解教师所授知识,并能在理解基础上有所突破,而有的学生接受较慢,要通过不断重复才能掌握,因此,要根据学生掌握水平及学生学习的兴趣、智力水平、恒心等这因素些来区分学生层次,给不同层次的学生提出不同的目标和要求,保持各个层次的学生学习网页设计与制作的积极性。
分层次教学时,需要注意几点:第一 不同层次的学生应该有不同的教学目标,不能按同一目标要求;第二 教学目标要充分发挥学生的主体地位。对基础比较差的学生,目标重点在于克服他们由于畏惧困难而引起的厌学情绪,利用有限时间让他们掌握最基本的操作;对一般学生,目标重点在于调动他们的学习积极性,使他们有新的发现和提高;对掌握较好学生,目标重点是使他们零散的知识更加系统性,在原有的基础上更好掌握这门课程;第三 对不同层次学生教学目标不是机械不可变动的。
网页设计与制作每周在机房上机实践,分层次教学体现在对不同层次的学生安排不同的试验任务,让每个学生都有明确的任务,在给定时间内完成某些子项目。在具体教学过程中,可将这些子项目按由易到难分成不同的级别,不同层次的学生选择不同难度级别的子项目,鼓励学生在完成所选任务后尝试去完成更高层次级别的任务。如何鼓励学生能在完成自己能力范围内的子项目后向更高层次任务挑战呢?教师可在上机指导过程中,做到前后联系,对于学生每次的进步,给予及时的鼓励;教师可将每次上机试验学生做出来的作品拷贝,建立文件夹分门别类存放,对于不同层次的学生的作品给予评定,并对优秀学生和进步学生给予一定的奖励。
在课堂教学中,分层次教学体现在对学生的提问与交流上。由于课堂是在多媒体教室中进行,教师可从学生试验作品中选择不同难度层次的有代表性的作品,将这些作品展示在大屏幕上。由于作品均出自同学之手,大家会有很强的好奇心和兴趣,教师可根据这些作品激发学生的求知欲,由易到难,由浅入深,让学生在紧凑又轻松愉快的氛围中掌握网页制作知识,让大家体会到知识变能力的无穷乐趣,树立大家学习的信心。
虽然教师在设计项目进行专题教学时力求涵盖大多数知识点,但由于网页设计与制作技术发展迅速及教师个人知识结构和艺术修养的局限,总有些遗漏和不足的地方。因此,教师应最大程度的利用网络资源,弥补课堂教学的不足。比如给学生提供一些视频,介绍一些优秀的网站,开阔学生视野,增加他们的感性认识。可以组织学生按专题讨论分析这些优秀网站的创意、特点及使用的技术,在讨论中提高他们分析问题和解决问题的能力。
网页设计与制作传统的考核方式是笔试+机试或上交作品的方式,这两种考核方式各有利弊。笔试+机试的考核方式可以了解学生对网页设计与制作理论知识掌握程度和对工具使用的熟练程度,但不能反应学生的综合应用能力;上交作品的考核方式能反映学生的动手能力,但反映不了理论水平且过程无法监控。笔者采用平时成绩(20%)+作品(20%)+分阶段考核(60%)方式,尽量使考试做到公平、可控,能全面真实的反映学生的水平。平时成绩主要是学生的到课情况、试验报告填写情况、实训设备保存完好情况等组成;分阶段考核方式主要是根据不同阶段学生子项目完成情况及最后期末机试组成,学生每次上机实践的作品均可用“极域电子教室”软件提交保存,这样每次学生子项目的完成情况教师均可查看,且能根据完成情况给定相应的成绩,这样各个阶段均可考核,弥补了只有最后一次上机考试不能全面反映学生真实水平的不足;学生最后上交的作品除了有作品外,还要有相应的日志,在什么阶段完成什么工作,用到哪些技术,如何实现某些效果等,而最后成绩的评定,主要通过专业教师与行业专家共同完成。
随着我国电子商务的快速发展，该行业的人才需求在相当长的一段时间内持续增长，特别是网站营销策划、网站美工、网站开发、搜索引擎优化、网站运营推广等岗位的人才。而“网页设计与制作”这门课是电子商务等专业的必修课，其课程目标是培养上述岗位均需具有的网页设计及制作能力。但一直以来学生在实际工作中仍难达到用人企业的工作预期，普遍建议提高该课程教学的实用性和针对性。
课程建设采用“基于工作过程”的课程设计理念，课程建设团队对企业相关岗位所需的能力等进行分析，根据行业应用需要设计和组织课程，将学习目标和和工作目标有机地结合在一起，充分体现“学习的内容是工作”、“通过工作来学习”的职业教育理念。最终，以学生在企业的网页设计、制作、应用的实际工作过程和要求为切入点，形成了“能力导向、工作导向、行动导向”的课程模式。
职业教育既要培养学生的“岗位能力”保证当前的就业需要，又要培养完成整体化工作任务的“综合职业能力”奠定持久职业生涯发展的基础。[3]电子商务网站的应用在很大程度上取决于互联网上快速发展的创新商业模式的适应和反应能力，课程不仅培养网页设计与制作过程中的操作技能，更注重将营销策划、色彩版面设计、运营推广、优化等知识和技能综合应用到网页设计制作过程中的能力，还需要科学规划资源、时间、进度的管理能力，搜集、分析和利用企业资料的能力，在团队中沟通协调等内在隐性能力保障工作的质量，从而在工作过程中形成学生的专业能力、方法能力和社会能力，培养在未来实际工作中能够发现问题、解决问题的能力，能够满足企业的实际工作要求。
课程的学习过程是一个工作与学习相统一的过程，是从典型工作任务的工作内容中提炼出来的“工作过程”，是教师结合能力目标及其学习内容进行转换的结果，并不是企业工作流程的简单再现，学习的内容由多个学习情境来实现，学习情境设计的关键在于载体的选择和设计，载体是学习情境的具体化。[4]载体需具有典型性、开放性、实用性，设计为不同发展阶段的企业网站形态：宣传网站、营销网站、商务网站，分别突出以“信息为主”、“产品销售为主”、“顾客沟通为主”的初、中、高级营销推广模式的网站建设，符合从简单到复杂的学习认识规律。而载体所体现的“工作过程”定义为以下四个学习任务：
学生在三个渐进的学习情境中，都需完成四个学习任务即完整“工作过程”，分别是学生模仿教师完成、教师引导学生完成、学生独立完成，“工作过程”的完成是对重新选择和排序的知识和技能进行整合，适度够用的知识和技能的数量没有变，而是在渐进的学习过程中不断的整合，最终在学生形成“工作成果”的过程中形成属于学生自己的经验、策略等综合职业能力。
一是明确任务，并确定在任务中需要解决的关键核心问题。比如：如何分析经营产品特点和目标客户定位、如何进行同行业网站对比等，引导学生去思考、分析，引导学生利用教材、网络、参考资料等进行知识的储备，问题在教师的指导下、在同学间的互相讨论下逐步解决，从而完成有产出的任务。二是通过教材提示，明确具体的工作过程，拟定详细的实施步骤，包括：任务目标描述，学习目标描述，任务的细分项指引，细分项完成的时间、内容、方法、资源等。三是明确岗位角色的职责和要求。学生分组模拟学习情境中网站的发包方和承包方的相关岗位，理解双方在网站发包和承接中的要求和思考问题角度的不同，建立职业认同感，感悟职业角色内涵，明确自己的特长和优势，科学规划自己未来的学习。四是明确工作质量要求。指引学生自我检查、分组讨论等，在工作中找到问题、分析问题、改进不足、从而解决问题，通过工作反思提升工作的能力和策略。
来自企业的专家和多所院校的教师共同组成了专兼结合的课程建设团队，形成交流、分享、探讨的机制，建立互为补充、互相学习、共同提高的发展平台。校校、校企间共同协作制定教学标准和计划、联合建设教学资源库，实现企业、学校的共享和互动，共同强化学习过程中的沟通、交互、反馈、评价等环节，大力引导和推动教学模式改革，保障课程实施的质量。
学生的考评不只是简单地对其完成的任务给出一个分数，而是要反馈学生在完成任务过程中的学习情况和成效，让学生了解自己的优势和不足。对优势方面进行肯定，从而坚定其学习的信心，激励其获得更大的成功。对学生的不足之处引导改进，教师帮助学生找出工作中出现的问题，引导其想办法解决，帮助其巩固所需的知识和技能，进而找到解决问题的方法，获得更好的学习成效，通过过程改进提升工作的能力和策略。考评的不是静态的知识积累，而是动态的工作过程；考评的不只是任务完成的结果，而是在任务完成过程中的改进；考评的结果不只是由教师决定，而更多的要由学生参与。[5]
参与课程实施教师们普遍反映：通过完成学习情境的学习任务，学生不仅具有过硬的专业知识和技能，同时又具有一定的项目全局观念，理解了工作过程、方法和要求，有了发现、分析、解决问题的意识，能更快适应企业的团队工作，学生的综合职业能力得到了显著增强。学生们普遍反映项目的引导性强，学习兴趣高，易于上手，学习过程的自我空间大，可扩展性强，学生具有明显的学习成就感，作品在校外的技能竞赛中屡屡获奖，并在校学习期间就能承接企业的网站建设工作并获取报酬。充分体现了“基于工作过程”的课程观及“行动导向”的教学理念，使得校企合作、工学结合的人才培养模式得到切实的落实。
现在网络已经成为人们生活当中不可缺少的一部分，越来越多的企业、个人都拥有了自己的网站。在互联网的世界，展现出吸引眼球的网站，是每一个网页设计师的目标。《网页设计与制作》课程是中等职业学校一门重要的课程，是我校计算机专业的主干课程，它是一门包含一定的理论知识而实践性、技能性相当强的课程。网页制作的实践操作技能对如何设计出与众不同、独树一帜的网页及后续的《动态网站制作》课程学习，具有十分重要的作用。
按照我校《网页设计与制作》课程的教学大纲和教学目标，结合教材和课程特点，教学内容选择以项目、案例教学为主。根据总体目标确定课程各个知识点和技能点的具体目标以及教学内容，让学生带着任务学知识、带着任务学技能，使学生既知道该怎么做，又知道为什么这样做。根据学时和学生的实际水平灵活选择教学内容，如表1是《网页设计与制作》部分教学内容。
本门课程教学内容以实践教学为主导，理论为实践服务，以学生为中心，教师为主导，通过分解任务、学做合一和讨论协作有机融合，使学生能够参与，有明确的任务，学习的主动性、积极性得以发挥。在实践教学设计中重视知识点和技能点的综合运用，并充分有效地利用多媒体教学的网络环境和优越的硬件环境，会收到很好的教学效果。
在以往旧博鱼体育的教学方式中，从总体的教学效果上看并不十分理想，学生完成实训任务时目标欠明确，所学知识和技能比较零散，不能产生浓厚兴趣，学生之间的协作性以及教师与学生间的互动性较差。知识和技能的遗忘率较高，不利于学生职业技术素质的提高和职业技能的培养，达不到理想的教学效果。笔者根据往年的教学经验，结合学生及课程特点，对所教的班级采取了以下教学方法：
为便于学生的学习讨论和设计制作，本课程教学直接在有职业氛围的配备有多媒体教学设备的实训室进行。教师根据学生实施任务时所需知识和技能的情况演示讲解有关的知识和技能。在实施任务的过程中，学生可以小组相互讨论、协作、提问，而教师则在实训室巡视，到学生中间监督任务进程，并给予学生适当引导，必要时进行个别或集体辅导。等学生完成任务后，教师对学生完成的任务成果进行点评，并对任务的总的完成情况进行总结。最后让学有余力的学生开发自选网站项目中类似的任务，对自选项目的完成情况和设计思路应在适当时间进行分析、点评，并可通过学生自己的介绍提高学生的综合素质。
笔者将学生分成多个小组，每组5人，兼顾学习成绩、学习能力、性格特点等因素，每小组选出一位技能操作性强、责任心强、热心助人的学生作为小组长，小组长主要起到帮学及“小老师”的作用，在完成学习任务过程中，如遇到问题可在小组内互相学习讨论、分析、解决问题，设计制作与创新于一体，能够开拓思维，发挥潜力、培养个性、培养团队精神。学生在“帮”与“被帮”的过程中也体会到了成就感和学习的乐趣，充分调动了学生的学习兴趣，不再因为“难”而不想学。而教师能更好地控制课堂，巡视、引导有需要帮助的学生，也弥补了教师在实训教学过程中，一人面对几十位学生时，不同的学生所遇到的不同问题而不能及时得到解决的不足之处。为了能更好地管理课堂及机房实训室的管理，每三个小组组成一个大组，每一大组选出一位“线长”，做到教师管理“线长”，“线长”管理组长，组长管理组员的层层递进关系的管理方式。
小组教学需要注意的几点：1）小组长人选需要具备“三强”，即操作技能强、责任心强、管理能力强；2）“线长”和组长在上实训课前任课教师需要对他们进行适当的培训，特别是管理的要求及学习任务的具体要求；3）小组教学并不是让教师“放羊”，而是要充分体现出发挥学生是主体，教师是主导的作用。根据本门课程及实训上机的特点，设计项目登记表如下：
根据以上情况，笔者采用了“凌波多媒体软件”和网络教学环境进行教学，达到较好的教学效果。利用“凌波多媒体软件”进行控制所有的学生机，使学生在原来的座位上一人看一台电脑，能认真听讲、思考，互不干扰，吸引学生的注意力，学生身监其境，“看在眼里，记在心上”，非常直观，加深了印象利于学生理解，也防止了学生做跟上课内容无关的操作。教师一边分析讲解，进行提问、讨论，并适当的一边演示，一边引导同学进行操作，学生则一边听课，一边思考，并根据自己的想法与教师沟通，随时发现问题及解决问题，建立了一种互动的学习氛围。
在课程考核中增加了课程设计题目，以小组为单位，为了充分考虑到学生的兴趣爱好和主观能动性，不指定单一的项目，而是列出大量题目供参考，学生也可以自选项题目，但是老师要提出项目的设计具体要求。学生在两至三周的时候利用课余时间完成，老师对各个小组成员提出问题，然后根据完成的情况进行评分。通过合作完成一个实际的项目，不仅可以考核学生运用知识的能力，而且可以考查实际动手能力，合作团队精神。
针对《网页设计与制作》课程的特点和目前学生的状况，根据企业的需求，结合往年教学经验，对课程改革进行了大胆的尝试，取得了较好的教学效果。总之，教师应以培养能力为主线，强化实践性教学。教学工作是学校工作的重点，有效教学和教学改革是一个长期、一个永恒的话题，在教学过程中必须不断探索，不断创新，只有这样才能顺应时代潮流的发展，培养出素质高能力强的人才。
[摘 要] 通过传统教学模式（LBL）和基于问题的教学模式（PBL）的教学过程、优缺点进行对比，充分体现出PBL教学模式的优越性，也对PBL教学模式可能存在的问题进行了分析并给出解决策略。同时，通过在网页设计与制作课程中的具体实例，来讲解PBL教学的过程。PBL教学法应用在网页设计与制作课程中取得了良好的效果，激发了学生的学习热情，充分调动了主观能动性，将知识转化为能力，形成了有效迁移，使学生受益匪浅，意义重大。
1965年，加拿大安大略湖医学院神经病学的麦克马斯特教授经过多年的研究，创建了以基于问题的学习（Problem-Based Learning，PBL）的教学方法，在1969年开始在医学课程中进行应用。PBL教学法以“问题”和“学习者”为中心，融合了“自主学习”、“探究学习”、“合作学习”、“小组讨论”等多种教学理念。1980年美国哈佛大学引进了PBL教学法，因其良好的教学效果得到广泛的推广，从医学课程到现在各学科中应用，成为国际上最为流行的一种教学方法，备受关注。为了走出传统教育所带来的困境，1986年由上海第二医科大学和西安医科大学引进了PBL教学法，至此，我国也开始了PBL教学的历程。
PBL教学模式在实施的过程中会有一定的难度，很多人们固有的传统观念难于改变。很多教师觉得，这么多年上课就这么上的，还是这种讲授的方式能把所有的知识讲授出来，却没考虑到学生的接受能力和素质培养。而学生也需要进行积极的配合，才能使PBL教学过程顺利完成，而有的学生懒惰的性格和依赖的心理，致使学生也不愿意接受改变。PBL教学模式法需要教师和学生在理念上彻底转变，难度较大，应该逐步实行。
PBL教学法彻底改变了传统的教学模式，将填鸭式的教学转变成激发学生主动思考的基于问题的学习，不但调动了学生的学习积极性，而且培养了学生独立思考，分析问题的良好学习习惯，培养了学生的团队意识、创新精神，锻炼了学生解决问题的能力。在网页设计与制作课程中使用PBL教学法教学，端正了学生的学习态度，提高了学习成绩，是教学改革的重大突破，应在其他学科中进行推广。
