欢迎来到速发表网,咨询电话:400-838-9661

关于我们 登录/注册 购物车(0)

期刊 科普 SCI期刊 投稿技巧 学术 出书

首页 > 优秀范文 > 网页制作与设计

网页制作与设计样例十一篇

时间:2023-07-10 09:24:49

网页制作与设计

网页制作与设计例1

第五,单击菜单“窗口”中的[框架],显示[框架]面板,在[框架]面板中,选中“mainFrame”,在[属性]面板中将“滚动”设为“自动”。

第六,在顶部的框架中插入图像。在左侧的框架中插入一个7行1列的表格,在表格中输入文字。

第七,在左框架的表格中选中文字,分别设置文字的超链接。

第八,按下F12键,打开浏览器查看网页内容。

这个例子用框架布局整个页面,但在框架里又嵌套了表格,这就实现了框架和表格有机结合,让页面布局更加灵活。

三、表格和框架的优缺点

表格是用于划分页面区域的。使用表格布局页面的好处是:表格方便排列有规律、结构均匀;使用表格会使页面结构清晰、布局整齐;表格可被绝大部分的浏览器所支持,具有很好的兼容性。表格的缺点是容易产生垃圾代码,影响页面下载时间,灵活性不大,难于修改。

框架则是用于分割浏览器窗口的,框架可以将一个页面拓展为多个页面,每个页面都可以显示不同的网页。框架的优点是支持滚动条,方便导航。框架的缺点是:难以实现在不同框架中精确地对齐各个页面元素;保存时不方便,应用范围有限;兼容性不好,并不是所有浏览器都提供良好的框架支持。

使用表格和框架对网页进行布局,各有利弊。初学者要根据不同网页页面的要求做出良好判断。

网页制作与设计例2

中图分类号:TP393 文献标识码:A 文章编号:1009-3044(2009)15-4089-02

The Design of Subject Learning Webside: Web Design and Making

HUANG Yi-bao

(Gaozhou Normal Subcollege of Maoming University,Gaozhou 525200,China)

Abstract: The development of Information technology improves Educational Informatization. So under the network condition, the buiding of educational resources are the important parts of Educational Informatization. Subject Learning Website represents the importance of the buiding of educational resources. This paper takes the course Web Design and Making ( Gaozhou Normal School of Maoming College) as an example, presenting the design of Subject Learning Webside, and mostly expatiating three aspects: demanding analysis, system design and function design.

Key words: subject learning Webside; Web design and making; design

1 专题学习网站的概述

专题学习网站是指在互联网络的环境下,围绕某门课程或多门课程密切相关的某一项或多项学习知识点,有机地结合起来形成专题,让学习者进行广泛深入研究的资源型学习网站。它可以用来存储传递加工和处理教学信息,能让学生进行自主学习和协作学习,并对学生的学习情况提供在线反馈。根据这些理论,专题学习网站主要包括专题结构化知识库、专题资源库、专题协作学习工具和专题学习评价四大部分内容[1]。

2 专题学习网站的需求分析

《网页设计与制作》在本校是大专学生比较感兴趣的学科,并且本学科具备操作性强、个性突出、资源广泛等特点,有利于引导学生的学习主导性和协作性。

2.1 专题功能需求分析

根据专题学习网站的总体要求和本学科的特点,本专题学习网站主要实现以下功能:

1) 资源管理功能。按专题学习网站的理论要求和教学需要,资源管理功能必须能对资源进行查询、修改、删除、分类、整合等资源处理功能,同时还要提供资源的搜索和资源下载功能。2) 交流讨论功能。向用户提供一个交流讨论的空间,可以对学习内容的交流讨论,也可以上传与学习相关知识或问题或作品进行交流讨论。3) 评价展示功能。包括作业批改、作品展示、自我测试、竞赛投票等在线评价。4) 用户管理功能。包括专题学习网站的资源管理用户、学习留言用户和专题论坛用户。根据不同的需要设置不同的权限,以使师生共同使用和合作管理。

2.2 专题角色需求分析

功能的需求主要来源于角色,不同的角色有着不同的需求。本专题学习网站的角色主要有两类:学习者和管理者。各类用户有自己相应的权限,登录后只能访问自己权限内的功能模块。

1) 学习者的功能需求。学习者主要是利用专题网站进行学习活动,包括查看专题知识与相关资源、交流心得与讨论问题、提交作品与上传资源、测评反馈与投票评价。2) 管理者的功能需求。管理者主要是利用专题网站向学习者提供学习的资源与协作的场景,包括资源管理、讨论管理、评价管理和用户管理。

3 专题学习网站的系统结构设计

3.1 专题学习网站系统框架设计

根据需求分析中的专题网站功能分析,可以把专题网站分为网页基础、动态技术、数据库、辅助工具、作品展示、专题论坛等模块,网站的框架结构设计如下 :

1) 专题结构化知识:网页基础、动态技术、数据库、辅助软件。2) 专题资源库:拓展资源、相关链接、强化训练、素材集锦。3) 专题协作学习工具:学习留言、专题论坛。4) 专题学习评价:作业批改、自我测验、作品展示、竞赛投票。

3.2 专题学习网站系统程序流程设计

根据需求分析中的专题网站角色分析,可以把专题网站分为前台应用和后台管理两个模块,网站的程序流程图(如图1所示)如下。

3.3 专题学习网站体系结构设计

专题学习网站作为管理信息系统又称MIS(Management Information System)的一种,根据功能需要,主要包括前端应用程序以及后台数据库的建立和维护的后台管理。要把前端应用程序与后端的数据库联系起来,即给用户提供数据库相应信息和将用户相应信息存入数据库等,本专题学习网站基于面向互联网和用户机要求不高的基础上,采用的体系结构为B/S。B/S是Brower/Server的缩写,客户机上只要安装一个浏览器(Browser),服务器安装数据库。浏览器通过Web Server 同数据库进行数据交互。那样通过用户的登录,以及相应的权限,就可以实现在远端对系统的浏览、查询和修改。基于B/S的体系结构得出专题网站运行模式包括有客户机、应用程序服务器、数据库服务器三部分[2],其各部分运行工作如下:

1) 客户机:属于表示层,用于界面的入导,接受用户输入,然后向应用服务器部分发送服务请求,最后显示处理结果。2) 应用程序服务器:属于业务逻辑层,执行业务逻辑,向数据库服务器发送请求。3) 数据库服务器:属于数据存储层,执行数据逻辑,运行SQL式存储过程。

4 专题学习网站的功能设计

专题知识资源的输出应用,即前台显示主要是依托动态技术和数据库技术的结合,根据用户需求提供一定的参数,动态地从数据库提取数据,并自动整合为网页形式输出。而作为专题学习网站的管理部分,即后台管理则是通过管理平台与数据库联合起来实现的。

4.1 专题学习网站资源的形成

为了达到为师生提供结构化的专题知识的需要,必定要将学习内容相关的文本、图形、动画、视频等资源按一定的教学策略进行分类、组织、入库,以此达到知识结构化重组,形成了以网页形式的专题网络教学课件[3]。并且提供上传、下载、维护、搜索等资源管理与应用功能,以此形成专题资源库。除了设计组在初期完成的教师教学资料和收集的资源外,网站的管理员或授权的教师甚至学生根据教学的需要和使用的反馈信息,能不断地对专题知识或专题资源库更新、调整。这是一个不断循环、动态调节的资源生产过程。根据数据库设置的角色,用户可以拥有相应的添加、修改、删除、重组资源等权限。并且还设置了审核权,这个权限要赋予教学的专业教师负责,以确保资源的正确与有学习意义的。

4.2 专题知识的结构化重组

使用专题网站教学,既要学习专题知识,又要学习有关联且经过整合的拓展知识;既可以根据个人爱好或能力自主选取相应的其它知识学习,还可以进行相应专题的实践训练。基于这些目的,专题网站必须能够提供有针对性的自主探究学习,才能调动学生的主导性和能动性。由于本专题学习网站采取了网页设计的动态技术和数据库技术,所以除了对专题知识的查询、添加、修改等外,还可以对已有的资源进行重组整合。例如,在教学网页图片的应用时,给学生提供了Fireworks软件的拓展学习资源,那样除了可以根据教学进程Fireworks的教程外,在学习完Fireworks后,可以将的所有Fireworks教程,重组成一个资源。只需要将所有Fireworks教程根据教学顺序,将其超链接集合成一个新的资源到专题知识栏目,如此可以方便学生的学习。同样可以对各章节或各年级学习遇到的问题或教师一个阶段的教学心得等,进行结构化重组,有利于不同程度的或不同级别的学生学习和教师对教学的改进。

4.3 专题协作学习工具

专题学习网站为师生提供协作学习的空间,既利于学生之间的交流,共同学习相应内容,也利于学生对相应学习内容反馈问题和教师根据反馈进行调整或解决问题。同时,对学生以外的网页爱好者开放,更利于学生与互联网上的网页爱好者交流,以使知识面更广和交流更深刻。在本专题学习网站,专题协作学习工具主要包括有学习留言和专题论坛。学习留言主要是专题知识后的留言板,在每一个资源后都给学生提供留下学习心得或需求信息的空间,以便于其他学生的便捷认识或教师掌握教学程度。教师对学习留言拥有整理和回复权,以确保信息的有意义和回复相关问题。专题论坛主要为学习者之间或教与学之间进行讨论、问答、交流而进行的协作、探讨学习的交流工具。根据《网页设计与制作》学科特点,将论坛分为新手上路、CSS美化、图片加工、动画制作、数据库、动态技术、素材源码等栏目,可以让师生分享教程和学习心得,探讨相关问题。除专任教师要管理论坛外,还可以在各栏目设置学生版主,这样既让问题得到及时解决,也让资源得到及时更新,还可以加强资源审核。

4.4 专题学习评价

包括学生提交作品、教师评改作业、学生互评、学生自我测试、竞赛投票等功能,根据评价内容不同,有打分数等级的评价,也有详细评析的评价,也有公开投票的评价。主要是要实现到师生能进行评价、能看到评价、能交流评价、能反馈评价,只有这样才能达到评价的最终目的。首先,通过收集与学习专题相关的思考性问题和总结性考察的评测资料,学生完成相应专题或阶段或知识点后,可以进行自我测试,以检测个人掌握程度;其次,学生在此提交作业,教师对作业打分或评析;再次,学生通过网络提交作业或竞赛作品,教师对作业或竞赛作品进行展示,也给学生之间提供了比较和交流,从而进行他人评价和自我评价。

5 结束语

专题学习网站实际上就是一本拓展的课本和一个开放的课堂,有着多元的内容和多样的评价,既使师生学习的空间得到了拓展,也满足了学生因材施教的发展。但正因为如此,专题学习网站不能成为纯粹的资源收集网站,更应该达到鼓励和引导自主学习、协作学习、创新学习的目的。因为不管是教师在教的过程,还是学生在学的过程,都不仅是一种利用资源的过程,更是一种创新资源的过程。因此,专题学习网站的设计要遵循整合性、自主

性、交互性、开放性等原则。在设计中注重把主动权交给用户,不要把学习的模式或内容固定,让用户在教与的基础上,既能学习基础知识和拓展知识,又能讨论交流和相互评价,更能够在教学过程中创造资源。

参考文献:

网页制作与设计例3

【中图分类号】G642

一、教学目标

完成“心理健康教育网站”的设计与制作,并在网上。在完成上述任务的过程中,学生要学会:

1)掌握网站开发流程

2)学会网页的设计和制作

3)能够正确认识心理健康教育以及相关概念,了解心理教育知识

4)通过开发网站的学习,培养学生创新能力。

5)通过分组合作学习,培养学生的自主学习能力,团结协作能力,问题解决的能力,提高学生的信息检索能力。

二、学习内容分析

以下是本次学习活动的教学内容知识结构图,也是本课程的重点。它是对网页设计全过程的总结,也是最终的教学目标。

三、教学过程设计

1.项目名称:“心理健康教育网站”的设计与开发

2.项目负责人:学习委员张红梅

3.项目的提出:

大家阅读过学校的心理健康报吗?看过几期呢?你们只能看到这学期出版的心理健康报。咱们想一个办法让学生可以随时阅读任意一期的心理健康报。就是设计一个心理健康教育网站。通过这个网站,大家不仅能够查阅校报,还可以学到心理健康教育的知识,全校的师生可以给校辅导员留言。

4.教学活动过程

从学生设计网站的过程中反映出学生已经掌握了网站开发的流程,但是网页设计的基础知识中有一部分掌握的不太好。如:站点的建立,模板的使用,CSS样式表的定义等。在今后的教学中要加强这些知识的学习。

在网站设计过程中遇到了很多问题,师生共同讨论解决。仍然有些没有解决的难题,需要进一步的解决:

(1)在模板的可编辑区域添加内容后,模板的不可编辑区域布局增加,使得表格中的内容和表格间距增大,重新修改模板也不能调整表格间距。

(2)使用了模板的网页中不能添加SPRY构件。

(3)如何解决层起始位置发生移动问题

五、总结

基于项目的学习内容呈现方式很适合网页设计课程的教学要求。充分发挥了学生的主观能动性。学生由被动转为主动,提高了学习积极性。只是学生刚刚接触项目教学法,在制定项目计划时考虑不全面,不明确,造成后期的探究活动目标不明确,容易造成学习混乱。今后在教学中要加强练习项目教学的流程。

参考文献

网页制作与设计例4

项目教学模式作为一种以生为本,具有多元化、开放性特点的新型教学模式,强调了在教学时,以学生文本,加强对意义建构的主义理论、探究式学习的理论的重视作用。即在整个教学过程中,严格遵循“以生为主体,教师辅导”的教学原则,以教学目标、任务为出发点,让学生在教师指导下,按照自己的学习能力与喜好,与同学进行自由组合,选择相应的题型,组织开展项目研究学习,以充分发挥学生的主观能动性,从而提高他们的创造能力与创新精神。因此基于项目教学模式下,对“网页设计与制作”课程进行改革与实践,势在必行。

1教学改革的理念与思路

在计算机应用专业的教学中,对于网页设计和制作课程的教学总体目标,主要是通过真实的网站项目来开展教学活动,让学生能够依据网站开发的过程和网页制作方法,结合需要制作的要求,制作出简单的网页图像与自动生成的动态网页,以提升学生网页制作技能,积累丰富的网页制作经验,从而满足日后工作岗位需求。因此在进行网页设计与制作时,应体现以下理念:(1)培养与人沟通和团队合作的能力。为能准确地把握项目制作的要求与客户的需要,教师必须重点培养学生与人沟通、团队合作的能力。让学生通过自由组队的方式合作开发项目,共同努力完成布置的任务,让学生之间能够形成良好合作的关系,以提升学生的心理素质与适应社会环境的能力。(2)培养职业技术能力和解决问题的能力。培养学生具备扎实的专业技术能力,这是网页设计与制作课程中能力培养的关键。因此在进行教学时,对学生职业技术能力的培养,主要包括以下几方面:①网站的规划能力。在项目教学中,应了解分析项目的内容,正确地理解项目的要求,并合理规划项目,编写网站的建设方案。②网站的设计能力。学生应熟悉网页的工作环境,详细规划与设计网页布局,并了解开发的主要工具,灵活使用网页元素,保证网页设计顺利完成。③网站的维护与更新能力。应依据专业规范操作,来维护与更新网站。④解决问题的应变能力。网页设计对专业性要求极高,因此要想强化学生处理问题和解决问题的能力,必须引导学生熟悉与掌握网页设计中较为常用的方法与工具。(3)自学与创新能力。自学能力即培养学生自我解决问题的能力,主要是指学生在学习的过程中,能够形成良好的学习习惯与掌握所学的知识,并通过自主学习的方式,来获得有用的信息,以积极的应对职业中遇到的问题。而创新能力则是培养学生具备创新思维与创新意识,从而为日后工作打下扎实基础[1]。

2基于项目教学的“网页设计与制作”课程改革与实践的途径

2.1课程整体设计

在网页设计与制作课程中应用项目教学,是否能成功的关键在于给学生安排的学习任务是否恰当。通常在设计项目的内容时,必须保证对学生具有挑战性、实用性、趣味性以及可操作性,要求学生通过查阅相关资料,经过仔细研究和思考,便可顺利地完成学习任务。但需要特殊注意的是,教师在设计学习任务时,必须按照教学目标与学生个性差异来设计,保证内容设计不能过于复杂[2]。例如在“网页设计与制作”的教学过程中,课程整体设计的目标是从简单——复杂——综合网站建设项目的训练方式,让学生能够依据网站业务的需要,对网站需要的功能加以分析,以明确网页风格与结构,理解并设计出相应的制作方案,从而掌握网页制作与网站的方法,熟练HTML语言、Dreamweaver网页制作软件,能读取JavaScript代码,并学会灵活运用CSS设计网站的元素。这时教师需要在设计上,依据项目的需要,选出“企业网站建设”作为该课程的实训项目,将课程设计任务划分为5个项目,16个任务、每个任务4学时,前2个项目是网站点的创建和静态网页设计,属于简单的入门项目,由教师辅导;第3与4个项目是进行网页素材设计和制作,依据规范进行标准化网页设计;第5个项目课后完成项目的情况,让学生能够积极参与项目的开发和维护中,以拓宽课程教学的内容。但是每1个项目都应以任务为载体,将课程学习的内容划分到每1个项目中。且每1个项目之间都有明显的独立性,同时项目之间相互联系,知识与技能循环渐进;前1项是后1项的基础,后1项是巩固前1项的关键,实现知识和技能学习的层层递进、由浅到深、由简到繁,以树立学生学习的自信心。

2.2建立项目小组

在明确项目教学的内容后,教师集全班的学生,让学生依据项目,自由分组学习,全班分成若干组,每组为3~5名,并安排组织能力较强、善于表达的学生担任本组的小组长。然后每组学生在组长的领导下,按照项目要求的内容,在课后充分利用参考书目、内容对网站制作与设计所涉及的资料进行查阅。此外,教师是项目的指导者,应适当引导学生整理所需要资料。让每个成员之间依据不同的学习任务,专门负责自己的问题。例如在“网页设计与制作”的教学过程中,教师依据本班学生的情况,将学生划分成每组5名成员后,结合实施方案,让1名理论功底扎实的学生负责网站栏目的整体规划;1名计算机操作能力较强的学生负责网页制作;2名程序设计能力较强的学生负责代码的编写和程序调试;然后让担任小组长的学生负责对网站加以宣传,并制定项目进度表,明确成果完成的时间,同时详细记录每个成员学习的情况、态度,为教师的评价提供依据。

2.3项目教学的实施

项目教学的实施主要是引导学生为完成项目,而组织开展自主性的学习,以辅导学生依据项目学习中所需要的知识与技能,通过有效的学习方法来开展学习活动,激发学生的学习热情与主动性[3]。例如在确定各小组的学习任务后,进入具体“网页设计与制作”课程的学习中,一开始部分学生会感觉到制作一个网站,以我个人的能力,难以顺利完成教师布置的任务,又怎会设计出具有个人鲜明、独具个性的网站来吸引客户的注意力?针对这些问题,在进行教学时,教师需要将教学知识转变成学习任务,以学生合作的方式,然后详细讲解网页设计与制作的知识点,让学生结合参考目录和资料,来回答提出的学习问题:(1)什么是框架?有什么作用?(2)框架和网页之间的联系?框架的优缺点?(3)依据各网站主页布局,怎样合理地使用框架?这样学生不仅能够在合作的前提下,进行自主探究学习,还可快速找到问题的答案:在Web浏览器窗口中,HTML框架集文档显示的若干个独立的可滚动区域就是框架,框架集中每一个框架在Web浏览器窗口中,属于自己管辖区域内显示一个HTML文档,可使用选项内是否滚动和可调整大小来调整页面。

2.4成果展示

在网页设计与制作课堂教学中应用项目教学时,项目成果的展示是为教师评价提供参考的关键。因此在实际项目学习成果展示的过程中,要求教师应依据项目教学的要求来组织各个小组的小组长汇报本组的项目成果。但需要特殊注意的是,小组长在展示、汇报本组的项目成果时,需要详细说明作品涉及的知识点、创新、优缺点和项目中遇到的困难,并说明对于遇到的问题,应该如何解决,而其他小组的成员,也可提问与设计有关的思路、技术和特点等问题,让课堂教学生动活泼,从而提高教学的效果[4]。例如在“网页设计与制作”的教学过程中,各小组完成动态网页作品的制作后,教师应通过组织活动的方式,让每个小组的组长借助电子演示文稿的方式,详细的介绍、JSP和PHP等动态网页技术,但是由于时间的限制,教师需要引导每个小组结合学习的情况,将关于ASP的内置对象:Request、SQL查询语言、Respone、Server、Application、Session以及ADO组件中的Connection、Command和Record.Set等归纳为一个单独的知识点加以阐述,以便其他小组的成员理解掌握Dreamweaver数据库、绑定和服务器行为等网页制作知识。

2.5考核方式的改革

项目完成后的最后环节就是教师要进行及时客观的点评与总结,评定学生的学习成绩。但是以往的课程考核方式都是通过笔试与期末提交个人作品的方式来考核,这种考核模式过于注重结果,忽略学生学习的过程,难以达到项目教学的考核目的。因此在对学生的成绩进行评价与总结时,教师必须将现场汇报、学生自我评价和学生互评内评价内容纳入到考核评价中,形成完善的课程考核评价体系,从作品的主题、版面、图片、色彩搭配、网站布局和超链接等方面来考核学生的口头表达能力、沟通能力、日常出勤、课堂表现和每个阶段实训项目的质量,以了解学生掌握的技能,然后通过百分制的方式进行最后总评,依据40%的比例纳入到课程总评成绩中,实现评价的合理性[5]。

3结束语

综上所述,项目教学在网页设计与制作中的应用,不仅能丰富课堂教学的内容,拓宽学生的知识面,实现知识的转化与整合。还可按照项目的目标进行课程的整体设计、建立项目小组、成果展示和考核,将枯燥、乏味的文字变得更加生动有趣,让学生积极参与到项目活动中,充分发挥学生的主动性与潜力,进行自主性探究学习,以培养学生形成良好的学习习惯,从而促进学生全方面发展。

参考文献:

[1]劳飞.基于项目化教学的“网页设计与制作”课程改革与实践[J].教育与职业,2014(29):139-140.

[2]毛乐琦.高职《网页设计与制作》课程项目化教学改革实践[J].电子制作,2013(23):113-113.

网页制作与设计例5

中图分类号:TP311 文献标志码:A 文章编号:1006-8228(2013)12-65-02

Design and implementation of teaching websites

Gao Yaxia1,2, Zou Hairong3

(1. Shaanxi University of Science & Technology, Xi'an, Shaanxi 710021, China; 2. Shaanxi Commercial School; 3. Shaanxi University of Technology)

Abstract: In order to improve teaching efficiency and spread good teaching resources and information in a larger scope but a short period of time, the network teaching platform is developed using Dreamweaver tools and ASP technology. A dynamic web page is applied at the front desk in teaching website, and SQL Server 2005 is used in the backstage data base to satisfy large amount of consumer. After testing and operation of the site, the functions such as answering of the network, online discussions, assignments and learning announcements, uploading and downloading courseware, teaching management and user management are realized in this teaching website, which provides an efficient and convenient teaching environment on web.

Key words: SQL Server; teaching Website; Dreamweaver; ASP

0 引言

随着计算机和信息技术的飞速发展,网络教学也在快速发展和普及。教师与学生都迫切需要一种简便高效的教学方式,网络教学的出现正好满足了人们的这种需要。随着网页技术的发展成熟,人们对网页的要求也不再是文字、图片的简单堆砌和单调枯燥的内容,而是实时性、交互性和丰富性,使用动态技术的网页越来越受欢迎[1]。本文介绍采用ASP动态网页技术结合SQL Server 2005数据库构建一个“网页设计与制作”课程教学网站。学生通过访问该网站,可以浏览/下载课件、在线作业、在线交流与讨论等;教师可以上传课件、在线答疑等;管理员可以修改、删除、添加、查询用户信息、进行教程管理等。系统发挥了ASP技术显示于客户端和运行于服务器端,以及保护用户资料的安全性等特性。

1 系统需求分析

利用互联网技术进行网络教学,可以跨越时空限制,最大范围地传播资源,具有投资少、覆盖面广、受益人多和互动性强等特点,使办学单位减少了人力和物力的消耗,并为广大学子提供了丰富的资源。可见,网络教学为教育事业开辟了广阔的前景。由于在网络中易于实现资源共享,学生可以将个人问题转化为公共问题,并借助集体智慧解决个人问题,学生在网络中容易找到志同道合的学友,各自就共同感兴趣的问题发表自己的看法,有益于培养学生的信息素养和解决问题的能力等[2]。教师可以在网络平台成为导师,接受或选择学生的辅导请求,起到指导和督导作用。通过对在校大学生和教师调查发现,计算机网络教学因其互动性强、教学效果好等优势成为人们的新需求。网络教学网站系统的开发,主要是为用户设计和开发一个便于学习与交流的网络教学平台,以提高教学效率。

2 开发技术和方法

本网站教学平台采用目前流行的B/S(Brower/Server)结构。整个网站可以运行于Windows 2003 Server/Windows XP平台上,系统前台使用流行的工具和脚本语言Dreamweaver HTML语言和ASP技术开发,后台采用当前最流行且性能较高,数据库维护与管理性能很强大的SQL Server 2005。B/S是随Internent技术的兴起,对C/S(Client/Server)结构的一种变化或者改进的结构,在这种结构下,用户界面完全通过www浏览器实现,一部分事务逻辑在前端实现,但主要事务逻辑在服务器端实现[3]。系统充分发挥了ASP技术显示于客户端、运行于服务器端,以及保护用户资料的安全性等优点。

3 “网页设计与制作”教学网站的设计

3.1 系统功能设计

从教学用户的角度,网页设计与制作课程教学网站可划分为教师、学生和管理员三大功能模块。具体内容如表1所示。

表1 系统用户与功能设计

[分类\&模块\&使用者\&教师\&查看短消息\&教师\&学习及作业公告\&教师\&上传课件\&教师\&网络答疑\&教师\&讨论交流\&教师\&学生

\&查看短消息\&学生\&浏览课件\&学生\&查看作业公告\&学生\&网络提问\&学生\&讨论交流\&学生\&管理员\&消息管理\&管理员\&教学管理\&管理员\&讨论管理\&管理员\&用户管理\&管理员\&]

3.2 数据流程

3.2.1 系统总流程

在网站首页进行用户账号的登录时,系统接收到用户账号后,首先与数据库中存放的账号进行权限分析和匹配,若账号相匹配,则进入相应权限的用户模块;若账号不匹配,则提示用户操作错误,返回登录界面。系统的总流程如图1所示。

[用户登录][账号是否正确?] [验证权限] [具体模块][数据库] [N][Y][学生][教师][管理员][结束]

图1 系统流程图

3.2.2 后台管理流程

管理员用户具有对整个系统的管理权限,除接收短消息功能外主要实现管理学生和教师模块的内容,课件管理可在一个特定的时间内删除数据库里的课件记录和站点内相应的文件,这样可节省站点的空间;用户管理可针对目前系统的工作量适当地添加或删除系统管理员,也可更改用户账号;在讨论管理区内管理员可删除一些过期的或恶意的帖子,也可针对一些话题发帖;在教学管理区内可对学生、教师、学院、专业、班级等进行编辑、修改、添加和删除。详细流程如图2所示。

[管理员登录][接收短消息][课件管理][用户管理][讨论管理][教学管理][收信息][发信息] [学生管理][教师管理][学院管理][专业管理][班级管理][课件管理][开课管理][操作完成] [数据库]

图2 后台管理流程图

4 “网页设计与制作”教学网站的实现

4.1 数据库设计

数据库是网站信息管理的后台支持,存储着前台页面所需要的信息,在信息管理系统中有着很重要的地位。数据库设计的好与坏,直接影响到网站系统的运行效率。良好的数据库设计,可以提高数据信息的存储效率,保证数据信息的完整性和一直性。同时,一个合理的数据库结构有利于程序的实现。本网站系统使用数据库SQL Server 2005建立教学(teaching)数据库。后台数据库的连接采用字符串连接,其连接文件的代码如下:

ctrConnection="Driver={SQL Server};server=(local);uid=wy;

pwd=123;database=teaching;" //连接字符串

set conn=server.createobject("ADODB.CONNECTION")

//创建连接对象

conn.open ctrConnection %> //打开数据库

4.2 网站主要页面实现

4.2.1 网站主页面

课程教学网站主要是实现教师、学生在线学习与交流的良好平台,进入系统首页就能够方便的选择用于学习的资源信息等内容。资料列表模块,显示学生可以自主学习的所有教学资料信息;网上答疑模块,提供师生在线交流、学习和讨论的平台。主页运行效果如图3所示。

图3 网站主页界面

4.2.2 网站管理页面

网站后台管理系统能够实现教师、学生、课件与教学资源及用户信息的管理等功能。系统管理员登录页面的运行效果图4所示。

图4 管理员登录页面

5 系统功能测试

为了提高网站开发和设计的效率,该教学网站使用目前流行的B/S模式[5]。整个网站可以运行于Windows 2003 Server/Windows XP平台上,系统前台采用先进的Dreamweaver、HTML语言工具和ASP技术开发。后台数据库采用当前最流行且性能较高,数据库维护与管理性能很强大的SQL Server 2005实现。通过对网站系统的基本信息模块,消息管理模块、课件管理模块、上传下载课件模块,作业公告、BBS模块与教学管理等功能模块(学生管理,教师管理,课程管理)进行系统测试,结果表明,所设计的功能都能实现,系统性能良好,能够满足用户的实际需求。

6 结束语

本教学网站平台的开发和应用,实现了教学资源的访问、课件上传下载、师生互动、学习交流和网上答疑讨论等功能;使优秀的教学资源和交流信息能在大范围、短时间内传播。给教师和学生提供了一个方便、高效的网上教学与学习平台,从而提高了学校教学效率与教学质量。

参考文献:

[1] 周兴华,周新伟,张军等.ASP+SQL Server数据库开发与实例[M].清

华大学出版社,2008.

[2] 蒋理.动态网页设计实用教程[M].西安电子科技大学出版社,2007.

[3] 王萍萍,李晓娜,孙更新.ASP+Dreamweaver动态网站开发[M].清华

大学出版社,2008.

网页制作与设计例6

中图分类号:TP3-4文献标识码:A文章编号:1007-9599 (2012) 07-0000-02

在网络技术迅速发展的今天,网页设计与制作已成为当今社会上一种比较热门的技术,也是“计算机应用技术、计算机网络技术、国际贸易、国际商务专业”等专业学生的必修课,同时,也是相关专业学生的选修课[1]。

一、《网页设计与制作》课程现状与问题

对于以往的教学方式与内容,其相对落后的表现为:以简单分析为主线,系统的概念化设计思想较弱;以文字教材与课堂讲述的方式传授知识为主导;过于重视软件的操作,几乎没有创新设计的内容,忽视培养学生创造性思维;新理论、新技术相对偏少;与实际案例的联系不密切、没有反映现实技术的发展水平。

二、《网页设计与制作》课程教学改革的对策

(一)教法的改革

“教师一张嘴、学生一支笔”的传统“填鸭式”教学模式,是培养不出掌握熟练技能技巧面向市场的网页制作人才的。为此,我们必须在教师的教法上改革传统的教学模式。

1.注重培养学生的新思维

教学改革的关键是教师,要把如何培养具有创新能力的网页制作人才放在第一位。有了创新意识,就能抓住创新机会,产生创新方法,启动创新思维。通过改革,带动和影响学生去创造、去想象、去独立思考。培养学生的创新思维,可以改变学生依赖老师的习惯,也可以改变计算机教学传统的填鸭式、灌输式的教学方法。代之以自学指导法、尝试教学法、提问验证法等。教学方法创新,可使学生具有获取新知识的能力,为他们在今后工作中不断创新打下基础。

2.使学生从课本中解放出来动手实践

传统教学方式学生取得知识的途径主要是教师的课堂讲授和教科书。笔者认为,教师应该让学生从书本和课堂中适度解放出来,要求学生积极参加实践,接触实际问题,在经历实践的同时和解决问题中获取知识。教师对每一门计算机课都给学生布置实践课题,作业考核测试尽量在电脑上进行,实行“无纸化”,使理论和实践教学有机地统一。

3.鼓励并组织学生校外实习

为了让学生能更好的适应社会需求,在充分发挥本校人力资源的基础上,与一些IT公司联合,鼓励并组织一些学生去公司实习,让学生有机会参与实际项目的开发和管理,提高实际应用水平。同时,也可以聘请公司专门从事网页制作的人员来校授课,让学生能及时了解学科前沿应用信息并掌提高新技术,尽力让学生的认知内容始终与世界资讯保持一致。

(二)学法的改革

1.引导学生转变思想

学生从高中升人高职,大部分学生已经习惯中学教师的教法。简单的说就是,学生只会学习老师教的内容,不会太多想和学课外的一些知识点。但是,现在不同了,首先要从思想上给学生敲一下警钟,让他们知道,高校不同于中学,高校的学习和学法主要靠个人,网页制作的知识无边无际,需要学生自己去好好学习,自己去钻研。因此,老师应该更多的提醒学生平时独立思考问题、独立看书、独立去实践,逐步转变学生的惯性思维。

2.引导学生理论与实际相结合

我们注意引导学生从课本中解放出来,但是也不能完全的脱离课本。尤其是网页制作科目的实践性很强,所以一定要注意提醒学生不能忘掉课本的这个“本”,注意理论与实践相结合,只有通过在实践中来发现问题,同时又从课本中获取知识,才能达到理论与实践相结合,才能增长知识,才能取得更大的进步。

3.引导学生利用好网络资源

随着学校网络环境的进一步改善,学生上网的机会也随之增多。网络资源为我们的教学提供了一个很好的学习资源,但需要教师的有效规范和引导。网上关于网页制作的相关网站很多,有一些做网页的相关技巧等着学生去学。通过学生对网络资源的利用,既能大大的补充学生做网页知识的全面性,又能很好的激发学生学习的积极性。

4.引导学生建立学习小组

在教学的过程中,我们可以将学生每4—6人来建立一个学习小组,小组成员之间相互协作,相互帮助,来共同解决问题。同时可以让小组中尖子生充当小老师来指导其他成员,从而达到共同学习进步的效果。学习小组的建立,初步培养同学们合作交流的愿望,使他们能主动与他人合作,敢于提出与别人不同的见解,也勇于放弃或修正自己的错误观点。通过学生的共同探索,可以培养同学之间相互合作、共同探索的团队精神,也可以提高学习效率。

(三)成绩考核方法的改革

网页制作操作性很强,实践内容多,而理论知识少,一个学生学得好不好,关键看学生的动手能力怎么样。对学生成绩的考核也是网页制作教师长期探索的课题。

1.小的知识点,平时随堂考查

在时间允许的情况下对每个学生要逐一检查,使学生在平时就养成对小知识点的积累。久而久之,做一个网站的所有知识点就会慢慢的积累起来。

2.提前布置一些较大的工程(如个人主页、网店设计之类)

如何使学生将一些小的知识点组合成为一个大的或综合的网站才是做网页最终目的。因此,开学初我们就可以布置个人主页、网店设计的任务,要求学生做好准备,到期末后一起交上来。这样既可以即学即用,也使得学生在平时把精力真正的投入到专业技能的训练上。

3.上机操作

期末考试的成绩不能仅仅就是上面的两个方面的成绩,还要让学生能在规定的时间内来完成老师所规定的一个网站来,学生可以自由发挥,设计想出自己独特风格的网页,这样对学生就会有一个很大促进作用,有助于学生独创意识的发展。

三、五步教学法

《网页设计与制作》课程特点是:具有很强的操作性,并且新技术不断涌现,有明显的时展特点,教学内容须同步更新;设计无定势,故极富创意性、挑战性,要求学生手脑并用。

基于以上特点,教学时可反复采用五步法训练,即【分析】【归纳】【模仿】【创新】【进入资料库】,逐渐提高学生层次。具体实施时采用宏观讲解与个别指导相结合的方法进行。

(一)创设情境,提出问题,讨论分析

通过“创设情境,提出问题”可以激发学生的求知欲,而且还可以培养学生发现问题,探索问题的能力。

(二)操作演示,理论讲授,模仿创新

本课程重视实际操作,培养学生的动手能力。在组织课堂教学时:首先,演示案例结果,给学生以直观的感受,然后倒述代码;其次,提出问题,让学生模仿着翻三,归纳总结;最后,留出部分时间让学生创新设计。

(三)资源开放,自主探索,评价作品

在网上随时学习资源,鼓励学生利用搜索引擎,自主学习,互评作品,总结得失,共同提高。

四、期望达到的教学效果

通过让学生分组设计网店,掌握网络店铺营销的基本操作方法、各种信息搜集与方式的使用、网络问卷的制作与、网络广告推广策划、网络营销各种策略方案等核心知识和必备技能[2]。同时获得相应的操作能力、学习能力、应用能力,强化学生的实践能力,100%达到课程教学的要求。

学生在掌握基本知识、能力,培养素质的基础上,能掌握课程中要求的职业技能和素质,能在真实或仿真的环境中经营网络店铺。由于本课程设计为项目导向、任务驱动的工作过程系统化课程,每个项目的第一步即为明确工作任务,全体课程组教师应充分尊重学生在教学过程的主体地位,把单向灌输改为师生协同互动,从引导学生的思维方式入手,最终由学生自主完成电子商务操作流程,达到良好的教学效果,极大地调动学生的主动性,使学生的学习目的进一步明确,学习兴趣明显提高。

网页制作与设计例7

关键词:

网页设计与制作;课程;教学改革;策略

随着互联网的发展,互联网已经被广泛运用到人们的工作和生活之中,其中企业网站对企业的宣传与发展有着重要作用,网页设计与制作成为企业建设网站的重要技术支撑。因此,各企业积极引入高素质网页设计与制作人才的,强化企业网站建设。而高校作为为企业培养人才的基本场所,十分重视《网页设计与制作》课程教学的开展,并在新课改背景下积极探索《网页设计与制作》教学改革的科学方法。但是,由于受传高校教育模式的影响,《网页设计与制作》课程教学在学习地位、实践教学、师生沟通等方面都存在着一些问题需要高校改进。研究《网页设计与制作》课程教学改革不仅能够提高教学质量,培养高素质网络设计与制作人才,而且对企业发展和互联网发展有着深刻意义。

1《网页设计与制作》课程教学存在的问题

1.1学生学习被动

长期以来,我国高校《网页设计与制作》教学多采用理论与实践课程交替的教学方式,教师为学生讲解基本的《网页设计与制作》理论知识,并为学生进行实践操作师范,让后让学生根据课堂笔记或一级进行模仿操作。在这种教学模式下,学生的网页设计与制作处于被动的地位,学生的积极性不高。具体来说,有些学生不愿意听教师的理论知识讲解,有些学生不愿意完成老师的网页设计与制作作业,在课堂上出现睡觉、玩手机甚至是旷课现象,学生的专业基础知识不扎实,无法将专业理论知识与网页设计与制作实践相结合。

1.2学生动手能力较差

在教师进行示范的时候,部分学生认为教师致使拖动鼠标,具体操作内容没有难度,不愿意认真观察教师的示范,而到实践锻炼的时候,很多学生对具体的操作步骤不屑一顾,认为网页设计与制作操作过于简答。但是当学生真正上手进行网络设计与制作会发现自己对操作步骤和操作技巧不了解,无法进行网页设计与制作。另外,还有些学生的自我意识较强,不愿意按照教师的讲解进行网页设计与制作,而是一味按照自己的经验和想法设计制作网页,导致网页设计与制作的专业性和科学性不强。

1.3缺乏沟通

首先,在《网页设计与制作》教学中,教师与学生之间缺乏沟通与互动。一方面,教师缺乏对学生的了解,无法掌握学生的学习现状、学习兴趣和学习需求,《网页设计与制作》教学只是按照教学大纲和教材开展,缺乏对学生学习需求的重视。并且,很多教师在课堂讲解的过程中一味追求讲授的知识量,没有涉及师生互动环节,导致学生的课堂参与程度较低。另一方面,学生习惯了传统的教师权威的师生关系,很多学生在《网页设计与制作》课程学习的过程中不敢与教师沟通交流,也不敢向教师提问,害怕教师批评和嘲讽;其次,在《网页设计与制作》教学中,学生之间缺乏沟通与互动,很多学生都是独自为战,自行设计并制作网络,但是,个人的知识和智慧是有限的,个人设计与制作网页受到知识水平和专业技能的限制较大。

2《网页设计与制作》课程教学改革的策略

2.1重新定位课程教学标准

首先,高校《网页设计与制作》教学应积极重视企业的用人标准,在《网页设计与制作》教学中重点培养学生的职业素养、团队精神、审美能力、美术功底、计算机技能等基础能力和素质;其次《网页设计与制作》教学应加强重视课程教育目标,根据新课改的课程教学要求强调学生创新思维和动手操作能力的培养,使学生具备网页正当年规划与构建能力、网页图形设计能力、动画设计和制作能力等。

2.2优化教学内容

《网页设计与制作》课程教学应根据教学大纲和企业的用人要求科学设计教学内容,将教学内容氛围Web基础知识、Fireworks、Flash、Dreamweaver这四个模块。具体来说,Web基础知识模块主要包括网络常用名、网页浏览器、网页设计原则等基础知识。Fireworks主要包括基础知识、基本操作技能和高级应用。Flash主要包括基础知识、基本动画制作技巧和高级技术等内容。Dreamweaver主要包括基础知识、网页定位技术、动态网页设计、网页站点管理、数据库连接技术等知识。

2.3更新教学模式

高校《网页设计与制作》课堂教学应积极更新教学模式,采用班级授课制、网络教学、个别化教学等模式开展课堂教学。并且,教师应积极运用高校的多媒体设备,让每个学生在课堂上拥有一台计算机,并使用多媒体技术向学生全面展示教学内容,指导学生的网页设计与制作,加强学生的动手练习。另外,高校《网页设计与制作》教学应积极利用网络中的教学资源,将网络中的教学资源引入到教学活动中,以视频、图片等形式向学生展示网页设计与制作技巧,提高《网页设计与制作》教学的吸引力。

引用:

网页制作与设计例8

中图分类号:G71 文献标识码:A 文章编号:1672-3791(2014)03(a)-0209-02

内蒙古科技大学是地方高等院校,毕业生大多到企业从事设计、生产、管理等技术工作,故人才培养定位于“工程实施型人才”,要求学生具有扎实的基础理论和专业基础知识,能够教深入地掌握专业知识和流行生产技术,具有较强的工程实施能力,因此内蒙古科技大学的毕业生具有“上手快,留得住,后劲足”的特点,毕业生就业率连续多年位居自治区高校前列,被国务院授予“全国就业先进工作单位”光荣称号。该校的计算机科学与技术专业在学校人才培养思想的指导下完成了专业定位,重新制定了人才培养方案和课程体系,在此背景下,计算机科学与技术专业开设了《网页设计与制作》课程。

1 《网页设计与制作》课程现状及存在的问题

根据企业用人标准及对毕业生的回访调查,总结出了网页设计师的从业要求:具备优秀网站设计能力,能综合运用各类软件设计视觉创意网站,能独立进行平面网页的创意设计,具有良好的艺术触觉和美术色彩搭配功底,深刻理解web标准,熟悉CSS+DIV模式,能手写XHTML及CSS样式代码,懂得javascript应用,精通设计与网页设计软件,如photoshop、fireworks、dreamweaver等,能独立完成网站的规划和静态页面制作。可以看出一个优秀的网页设计师能够对网页的构成元素进行艺术规划和创造性思维活动,通过网页制作技术实现网页设计的目的,达到了艺术与技术的和谐统一。[1]为了培养大一新生对计算机专业的学习兴趣和热情,许多高校包括我校在内,将《网页设计与制作》课程规划为必修课安排在大一下学期开课,目的通过本课程所见即所得的特点,激发新生对计算机专业的学生兴趣和热情。可在以往的本课程教学内容安排上,重网页制作技术的讲授,对网页设计相关知识涉及甚少,即便学生掌握了XHTML、css+div、JavaScript等网页制作技术,可没有遵循网站与网页设计原则,致使学生制作出来的网页粗糙拙劣,毫无美感可言,这样的教学安排,难以培养学生的专业学习兴趣和热情。

2 《网页设计与制作》课程改革思路

以适应企业需求为导向,以培养学生网页设计能力为根本,以项目教学和案例教学为手段,以实际网站为目标,进行课程内容的编排和改革。[2]紧跟当前市场需求,及时对教学内容作出调整,特别强调网站与网页设计原则理论知识,在讲授网页制作技术的过程中注重网页设计基本理论与基础知识的渗透,努力提高学生的审美情趣,在潜移默化中让学生形成“技术为设计服务”的思想,让这种思想指导其网页设计与制作行为,最后将这种认识转换为能力,最终体现在其网页设计作品上。

3 《网页设计与制作》课程教学改革方案

以“技术为设计服务”为指导思想,以项目教学和案例教学为手段,通过项目驱动,[3]让学生在32学时讲授+32学时上机的学习过程中,独立完成上机项目。上机项目按照具备知识水平由易到难,需求由低到高,设计方案由局部到整体的梯度进行,符合教育教学的基本规律。结课后,以一个综合项目的开发作为对学生学习效果的最后的评价。综合项目的开发,实际上是学生实践和独立探究的过程,在此过程中,增长了学生的知识,培养了学生创造性思维和发现问题、解决问题的能力。

3.1 教学内容的编排

按照WEB标准,网页由三部分组成:结构(structure)、表现(presentation)和行为(behavior),因此,在教学内容的编排上,将《网页设计与制作》课程分为四大模块进行讲授和实践。分别为:网页与网站设计原则、XHTML基础知识、css+div、javascript。

网页与网站设计原则模块:在本课程的教学过程中处于指导地位和核心地位。通过该模块的教学,首先让学生掌握网站的3C设计原则,即简洁、一致性、对比度。通过一些优秀网站设计案例的展示,使学生对3C设计原则有初步的体会和认识。其次让学生掌握页面设计要点,包括:精心组织的内容、格式美观的正文、和谐的色彩搭配、较好的对比度、生动的背景图案、页面元素大小适中,布局均匀、不同元素间的留白等。通过优秀网站设计案例的讲解,让学生初步体会每一个页面设计要点。在随后的课程讲授及上机实践中,通过具体案例,强调网页与网站设计原则,让学生对3C设计原则及页面设计要点有更深的体会和认识,在潜移默化中,学会用网页与网站设计原则指导自己的网站制作行为。

其他三个模块为《网页设计与制作》课程的技术范畴。通过XHTML、css+div、javascript的讲授及配合各类上机项目的实践,使学生具备认识网页创建站点应用网页元素对网页布局应用CSS美化页面给网页添加动态行为的能力。最后以网页与网站设计原则为指导,设计开发一个综合项目。该综合项目要求要有鲜明的主题,内容与形式统一,个性突出、布局合理、配色美观。可以看出,通过本课程技术层面的学习,为学生奠定了制作综合项目的技术基础,而其掌握的网页与网站设计原则又将反作用于其网页制作的行为上,提高其网页制作水平,逐步达到技术与设计的和谐统一。

4 《网页设计与制作》课程考核体系

本课程的考核方式为考察,主要考察学生的实践能力及学生网页与网站设计原则的掌握情况。将平时表现,上机项目完成情况、综合项目的开况相结合,从而得出学生的最终成绩。

考核方案设计如下。

平时表现10分:包括上课出勤,上机出勤。有课堂主动回答问题的额外加3分。

上机实验40分:内容包括:包含文本、图像、超链接、多媒体的简单网页设计(3分);包含表格的简单网页设计(3分);包含表单的简单网页设计(3分);利用框架进行简单网页设计(3分);利用CSS样式表美化网页(10分);利用表格进行网页布局(3分)、利用DIV进行网页布局(5分)、利用DIV嵌套表格进行网页布局(5分);利用javascript实现网页特效(5分)。

综合项目开发:通过本课程掌握的网站设计原则及制作方法,完成综合项目的设计与制作。(50分)

设计要求(25分):需求分析充分,栏目设计合理,功能完善,网站深度不低于3级别(5分);主题鲜明,页面布局合理,配色和谐,形式美观,风格统一(10分);logo、banner的设计应突出主题,与页面风格相协调(5分);要有便捷的导航信息。网站内容丰富,具有良好的可读性(5分)。

技术要求(25分):站点文件组织规划合理,主页必须以index命名(2分);代码书写符合XHTML语法规范(3分);用Div对网站进行总体布局,局部布局可用表格(6分);用css进行页面的美化,对样式的定义统一写在外部样式表中(6分);多媒体元素运用得当,适合网络传输(3分);页面中包含有JavaScript实现的特效(5分)。

5 结语

改革后的《网页设计与制作》课程重视学生网页设计能力的培养,在每一次的教学实践环节中,都在强调网页与网站设计原则,在潜移默化中让学生学会用网页与网站设计原则来指导自己的制作行为。在此原则的指导下,74名学生完成的综合项目开发作品中,符合网站与网页设计原则的作品有62.3%,其中优秀作品比例为 12.6%,较未实行教改前学生的设计与制作水平有了明显提高。实践证明,以“技术为设计服务”为指导思想的《网页设计与制作》课程教学改革实在可行,提高了学生网站设计与制作水平,为其以后的就业打下了良好基础。

参考文献

网页制作与设计例9

《网页设计与制作》作为一门高校网络与新媒体相关专业强化学生学习兴趣点的专业基础课程,开展课程教学模式改革与实践研究有着十分重要的现实意义[1].

1《网页设计与制作》课程教学中存在的问题

结合学生就业实际情况、已从事与网站建设相关岗位的毕业生反馈信息,现阶段《网页设计与制作》课程教学中存在的问题,具体而言:

1.1不够积极主动,学生实践能力不足

长时间以来,《网页设计与制作》课程大多推行理论课与实践课交替开展的教学模式,起先由教师对相关专业知识、软件技术操作内容进行教授示范,之后由学生通过随堂笔记或者学习记忆对教师教授内容开展模仿操作.教师占据课程教学主体地位,教学内容缺乏生动形象性,学生学习过于被动,学习主观能动性难以得到有效调动.一些学生对教师教授的理论知识、布置的上机作业等不感兴趣,沉溺于网络游戏、手机游戏等,致使专业知识教学成效不尽如人意.学生受基础理论知识与专业理论知识不扎实影响,对于自身面临的疑难问题难以迅速反应并开展自主解决.再加上理论教学内容与实践教学内容未能实现有效衔接,使学生在对于“何为过程性知识、何为陈述性知识?”、“何为理论性知识、何为实践性知识?”等认识上模棱两可,即便学生能够对教师所教授知识展开有效模仿操作,也难以将它们运用至实际工作中去.

1.2不够实事求是,学生动手能力不足

教师在《网页设计与制作》课程教学中通过操作鼠标进行示范,学生片面的认识十分简单,学习过程中不实事求是,等到进入实践课要求他们独立开展操作时,面对提供完备操作流程的学习任务不屑一顾,认为太过简单;面对未提供相关操作流程的学习认识则无从着手,进而产生“高不成低不就”的局面.学生未能基于独立自主实践队专业知识进行掌握,致使难以建立隶属自身特有的知识、经验架构,一旦进入社会职业岗位中便不知所措,无法独立自主制定工作方案,更别谈是付诸实际行动,难以有效将所学知识与实际结合,不具备自主解决问题的能力.

1.3各方缺乏沟通,学生适应能力不足

结合毕业生反馈信息,普遍存在学生沟通意识欠缺,不具备客户至上理念等问题,致使难以对职业岗位进行有效适应.一些学生不明确客户要求,亦或对客户要求抛之脑后,而凭借自身主管意识开展设计;一些学生对客户要求形成错误认识,为客户带来不必要的麻烦.受各方缺乏沟通或沟通能力不足影响,致使返工情况屡见不鲜,不但降低了工作效率,还会对客户信任造成负面影响,不利于企业的有序发展.这些不良后果极易使学生产生负面情绪,进而对后续工作造成不良影响,由此进入恶性循环;进而这些学生对工作产生厌烦心理,没有成就感,不具备工作的动力.

2《网页设计与制作》课程教学模式改革策略

在时展新形势下全国高校网络与新媒体专业,必须与时俱进,大胆进行改革与创新,引入先进的科技和成功发展的经验,进一步强化《网页设计与制作》课程教学模式改革与实践,对促进《网页设计与制作》课程教学模式改革与实践逐步开展可以从以下几个方面着手:

2.1强化教学内容改革

高校《网页设计与制作》课程强调对设计人员实践操作能力和基本功训练,对于网页设计等一系列相关操作技术要求每个学生必须能够娴熟掌握,具有管理、开发和维护小型网站的能力.鉴于此,《网页设计与制作》课程开展教学内容改革的重要前提是用人企业的需求.结合企业用人需求从事不同高校网页设计与制作专业、网上招聘启示及人才市场相关信息等,对不同行业需求开展总结:(1)以企业局域网为重要前提的操作,好比对等网的组建与维护、office文档的存储与整理、B/S企业MIS系统的管理与维护、计算机一系列软件的安装与使用等;(2)企业网站的管理,好比企业网站建设、企业网站文件管理、企业网站策划等;(3)企业电子商务活动,好比在线商务活动、产品在线宣传、互联网信息处理等;(4)具备相应计算机图形设计、软件设计能力,具备相应B/S应用程序开发能力;(5)娴熟掌握Flash、Dreamweaver等网页设计工具,精通CGI网页交互语言,熟悉HTML设计等[2].在此基础上,《网页设计与制作》课程在侧重Flash、Dreamweaver及Fireworks网页教学前提下,应当进一步关注HTML设计、图形设计与处理、JavaScript代码等的教学,以强化学生计算机图形设计能力、软件设计能力;此外,还应当强调网站建设、管理,强化学生对网站组建、管理、维护等内容的系统认识.

2.2强化教学方法改革

2.2.1案例教学法要想调动起学生学习主观能动性,避免传统灌输式教学模式,在教学期间应当推行案例教学法.结合教学进度、要求引入案例并开展好备课工作,对案例涉及理论、技能进行教授讲解,探讨案例中存在的相关问题及处理对策等,同时案例要具备针对性、典型性,自符合学生接受能力开展选取、设计.好比,可选取介绍“民族传统”、“家乡美景”等的门户网站,教师通过向学生开展讲解此类网站涉及的知识点,要求学生制订学期学习计划,设计制作一个小型网站,且网站制作过程要与课程教学内容保持协调.2.2.2项目化教学法选取实际项目为前提,加大对学生分析、解决问题能力培养的力度.在专业网站设计与制作过程的前提下建立学习项目,沿着职业岗位任务主要方向明确不同模块内容,包括网站建设方案制作、网站制作以及网站设计等,依托紧贴职业实际的教学内容,有效调动起学生浓厚的学习兴趣.依据职业岗位任务主要方向提取各项能力目标,并融入进制作网站建设方案、网页基础知识储备等多个不同模拟制作任务中,达到对学生分析、解决问题能力培养的目的.与此同时,制定一系列相关独立实践任务,以使学生在完成任务的同时,对自身所学知识理论进行巩固,进而娴熟掌握各项网页制作技能.2.2.3任务驱动教学法将实践操作任务、模拟制作任务作为载体,关注对学生学习能力、技术应用能力及工作能力等方面的培养.在教学中部署一系列模拟制作任务,并与其中插入相应的知识内容,经由任务背景介绍、操作流程讲述、知识点拓展等布置,引导学生进行自主思考.学生通过解决问题来掌握知识,经由任务把所掌握知识应用于实际问题解决中,进而强化自身动手、解决问题的能力.与此同时,需要学生自主完成实践操作任务环节,以增强学生自学能力、技能应用能力等方面训练.以某学院网站引导页任务制作为例,应展开下述操作:(1)背景介绍,经由该学院网站,提升学院影响力,为师生相互、校企相互、家校相互等往来提供便利;(2)任务要求,对学院网站特色进行尽可能凸显,吸引更多网页浏览者,并为浏览者留下深刻印象;(3)任务分析,设计前对学院网站用户相关需求展开全面研究,找准网站风格定位,可选取图片或者Flash动作用以引导页,将图片用以引导页第一步通过PS设计好引导页效果图及Flas,然后开展切片,最后完成表格设置工作,并将图片、Flas添加进网页引来浏览者,提升网站流量;(4)延伸知识点,包括表格属性设置、切片优势、切片方法等;(5)处理问题,要想加快网页浏览速度,通常要求将大图切为小图.基于任务制作过程开展知识点延伸教学,结合实际情况让掌握理论知识的同时,了解知识的获取渠道及方法,改善学生学习效率.由于伴随技术发展,学生职业生涯会受到一定影响,因此教师一方面要权衡知识的够用情况,一方面要权衡知识点的系统性.应当尽可能拓宽学生知识面,在知识点选定过程中不仅要结合岗位群,又要自技术发展、设备软件更新所对学生职业造成的影响出发,留有一定的余量.在全面教学期间,强调对学生综合职业能力、职业素质等方面的培养,汇集教、学、做于一体,尽量适应学生为主体、教师为主导的新型教学模式的需求.各模拟制作任务均很好地融入知识目标、能力目标,侧重能用什么做什么,尽可能凸显《网页设计与制作》课程教学与职业岗位能力需求的紧密联系,强化学生专业学习针对性、实用性.2.2.4激励教学法要想激发学生对网页设计的学习兴趣,锻造学生自学能力、创造能力,学校应当积极组织各式各样种类的就业技能大赛、Flash设计大赛、网页设计大赛等活动,通过激励性活动一方面促进学生对所学知识的实践应用,一方面有效发挥学生团队协助能力、设计创新能力.

2.3强化教学手段改革

2.3.1联机教学借助网络开展好《网页设计与制作》课程教学.《网页设计与制作》是一实践性强、应用广泛的技术,要想说明网页设计的性质及相关实践应用,实时展示极为关键,所以在网络教学中接入互联网,通过互联网对一系列理论知识开展详实说明,如此可有效提升教学课堂生动形象性,强化学生对《网页设计与制作》课程实用性、重要性的明确认识.2.3.2开设《网页设计与制作》在线课堂要想进一步改善《网页设计与制作》课程教学成效,可考虑开设该课程的在线课堂,促进教师与师生之间的互动,实时了解学生意见,优化整合教学方法、教学进度,对学生学习遇见的疑难困惑进行及时解答.此外,还可将该课程全部课程资源传输上网,诸如教学大纲、教案、课件等资料,还可依据课程章节补充相关设计案例等.如此,学生一方面可通过网络获取课堂教学的各项内容,一方面可借助多媒体优势满足自身自主学习需求.

3结束语

总而言之,高校网络与新媒体专业《网页设计与制作》课程教学模式的改革与实践,是一项十分复杂的系统工程.其是对传统课堂教学方式的一种挑战,对教师和学生均提出了极为严苛的要求.鉴于此,相关人员务必要不断钻研研究、总结经验,清楚认识《网页设计与制作》课程性质、教学特征及教学目标,全面分析《网页设计与制作》课程教学中存在的问题,“强化教学内容改革”、“强化教学方法改革”、“强化教学手段改革”等,积极促进促进《网页设计与制作》课程教学模式改革与实践有序开展.

参考文献:

网页制作与设计例10

中图分类号:TP393 文献标识码:A 文章编号:1671-7597(2013)21-0104-02

网络运用越来越广泛,熟悉网页设计基本程序,掌握一点网页制作实用技术,对提高网络使用效率非常有帮助。特别是网页制作中的实用技术,也是平时工作和学习的需要,熟悉其技术要领,能够给我们带来更多便利。计算机已经进入寻常人家,网络把整个世界都联系在一起。网络研究也不再是专业技术人员的专利,普遍电脑爱好者掌握相关软件的使用,也是极其平常的事情。网页设计和制作技术普及当然有重要意义。

1 网页设计技术要领

网页设计经历不同发展时期,借助的工具也在不断更新之中。网页设计技术也随之软件更新中不断得到简化,如果不是特别需要,简单网页设计早已变得很容易。

1.1 HTML语言

网页制作要借助一定的工具才能实现。我们最常熟悉的网页,也是大家都会制作的Windows文本网页。这是借助Windows软件工具完成的。可这还不是我们真正需要学习的网页设计,随着人们对网页制作要求的不断提高,制作动态超级链接的网页已经成为人们的普遍需要。

要学习网页设计,首先要了解HTML语言,因为这是网页制作的基础。HTML语言是专业术语,就是指计算机标记语言,通过HTML源代码解读和撰写实现网页设计。随着更多实用性软件的问世,HTML语言对计算机爱好者来说,已经没有那么重要了。大家关注的是网页的实效性,能不能给人以视觉冲击,制作也有更多的简单便捷的软件可供选择。因此,网页设计制作对HTML语言的依赖越来越少,只有在特别需要的时候要用上HTML语言。了解HTML语言是必要的,特别是要写脚本语言程序时,HTML语言就不可或缺。

1.2 版面设计

网页版面设计时,要对版面风格进行定位,对页面文字和图片等内容做统筹考量,不仅要安排有序得当,还要体现整齐美观大方的视觉效果。版面设计其实是一种艺术,而不是一般意义的技术了。网页就是制作者的思想品位素养的直观表达,阅读网页就是对制作者的审视和评价。

版面设计首先要做好主页制作工作。主页就是人的脸面,要体现网页内容风格,就要注意突出什么,要有醒目的文字和图片,而且文字和画面要有自己的特色,一味堆砌当然不会有好效果。一般情况下,有特色的主页要包含这样几个要素:文字、图片、色调和排版方式。几种要素不可或缺,还要注意相互之间的协调和搭配,和谐统一才能体现整体美。

2 网页制作实用技术

网页制作可以借助的软件很多,Frontpage是一款比较适合初学者网页制作的入门工具。Frontpage的界面和操作和Word比较相似,非常容易学习。

2.1 插入图片

在网页中插入图片是常常要遇到的,有丰富图片内容可以让网页显得丰满生动,其操作方法并不复杂。在制作的网页中选择适当位置,确定插入点,然后在网页上部点击菜单“插入”选择“图片”,再点击“来自文件”,进入对话框,查找需要插入的图片位置,最后点击插入按钮就可以完成图片插入。

如果图片格式不是GIF或者JPEG也不要紧,在网页保存时Frontpage会自动转换格式。图片插入后还要对图片进行适当调整和修正,点击图片选中,单击便可以随意拖动图片,进行大小调整。

图片确定后还要对图片进行环绕样式选择。在网页中右键点击图片,在“图片属性”中选择“外观”,然后是“环绕样式”,找到文本图形周围流动方式,在“布局”中选择“图片对齐方式”,根据需要进行详细设置。

2.2 添加动画

网页添加动画文件可以让网页动态十足,给人带来不一样的活力感觉。与图片相比,动画需要有多幅图片构成。首先要准备好动画文件,动画文件可以网络下载,也可以自己制作。添加动画和图片插入基本相同。打开网页,确定动画插入位置,点击“插入”选择“图片”,在对话框中选择“从计算机上选择一个文件”,找到动画源文件点击“确定”,动画就插入到网页当前位置。

如果要插入用Flash技术制作的动画,操作就要复杂一些。首先要在Flash中生成动画文件moon.Swf,然后启动Frontpage,先建立一个新网页文件,点击“插入”选择“高级”到“插件”,这时会出现“插件属性”对话框,选择“浏览”找到moon.Swf源文件,确定之后回到“插件属性”找到“数据源”,并将其中的文件途径删掉,只保留文件名moon.Swf。确定之后还要选择“文件”到“保存”,将动画文件moon.Swf保存。

2.3 制作滚动字幕

滚动字幕的运用可以让网页显得活泼,其制作技术也比较简单。首先是打开Frontpage编辑界面,确定插入滚动字幕的位置,把需要显示的文字输入进去。然后将这些文字选定,点击菜单“插入”,选择“组件”到“字幕”,点击之后出现对话框,点击“字幕属性”,对文章滚动方式进行进一步设置,包括字幕滚动方向和字幕滚动延迟时间等。最后点击确定,就完成了字幕滚动插入。如果要查看效果,可以从“预览”中查看。

2.4 建立超级链接

制作网页不仅要建立自己的主页附页链接,有时还需要将网页和其他网站形成链接,这就需要建立浏览器超级链接。要链接其他网站,首先要选择作为链接的文本,然后点击菜单“常用”工具栏的“超链接”,在“创造超链接”中,将要链接的网站的地址输入在URL地址栏内,点击确定就可以了。如果要改变某些超链接,可以先确认是普通模式,右键点击要改变的超链接,选择“超链接属性”,直接输入新的URL地址就可以了。

3 结束语

网页设计和制作并不神秘,学习网页设计和制作也无需多么高的计算机理论水平,只要掌握网页设计和制作实用技术的操作过程,就可以进行网页设计和制作,并且能够把网页设计和自己的工作学习紧密结合起来,这对工作和学习都有极大帮助。

参考文献

[1]吕何新,陈伟,沈淦. Front Page 2003网页设计与制作[M].高等教育出版社,2005.

[2]许文芝.充分挖掘超链接功能设计制作网页课件[J].中小学电教,2003(02).

[3]张红玉,王德东.如何在FrontPage2000中插入Flas[J].计算机时代,2001(06).

[4]陈凤芹. Dream weaver网页设计与制作教学探讨[J].中国教育技术装备,2012(21).

[5]陈艳,宋顺林,邢桂芬.基于Dream weaver方式的Web站点开发——及其在OA系统中应用[J].计算机应用与软件,2004(09).

网页制作与设计例11

中图分类号:G64文献标志码:A文章编号:2095-6401(2016)02-0068-01

作者简介:侯敏(1979-),女,汉族,陕西西安人,讲师。研究方向:软件工程,数据库

互联移动终端的大面积推广,使得掌握网页制作技术的人才在各个行业里都成为必不可少的需求;同时,地方普通高校为社会服务的使命感在不断增强,如何培养出“学即能用”的人才,使之在短时间内掌握主流的网页设计技术,提高站点访问量,是这门课程课堂教学效果进步的体现。

一、技术背景与课堂教学要求

(一)Internet发展历程

Internet经历了从Web1.0到Web3.0的迅猛发展。Web1.0是静止、单向、被动的;Web2.0则为用户开设了主动权,使得用户和网站可进行双向信息互动;Web3.0提升了用户的主动权,用户可对页面的多种元素(显示、色彩、像素、框架等)按需设置,订制专属的功能模块,整合数据资源,适用于电脑、手机、PDA等多终端平台定制。

(二)传统的网页设计与制作课程内容一般情况下,高校开设的网页设计课程从教学内容上可划分为两大块:

1.相关知识介绍。网站的概念、基本元素及页面等相关知识的介绍。

2.应用软件的使用。介绍使用最多的Dreamweaver系列网页制作工具,使学生掌握布局(表格、层、框架、模板等)、超级链接、表单和几种特效。随着互联网的全面推广和“学即能用”的需求,以上内容已不能满足互联网时代与时俱进的特点。最关键的问题在于:课堂学到的知识是否马上就能得到应用,是否与目前社会上专业的网页制作公司的技术规格保持一致。因此,本门课程的改革势在必行。

二、“服务于地方”教学内容的改革

(一)教学内容改革

内容改革是课程改革的首要环节。关于什么是关键内容,什么是次要内容,笔者走访了本地专业网页设计公司中企动力的设计总监马女士,通过对她的访谈,了解到时下主流的网页设计公司所涉及到的技术规范,对本校现阶段的教学内容做了必要的调整,简化了表格布局页面、框架设计等已被淘汰的陈旧技术的授课内容,有选择地介绍了网页交互特效及表单的应用,加强了网页美化工具、HTML语言及CSS的学习内容。改革后的课程主要分为六大模块:网页和网站的基础知识、网页美化工具(Photoshop或者Fireworks)、HTML语言、网页开发工具的介绍、DIV+CSS、动态网页技术。首先,通过具体的例子阐明网页、网站的定义,页面的布局类型(主要是盒模型)、整体造型及配色方案的相关知识;其次,介绍网页美化工具图片处理工具(Photoshop或Fireworks)的使用,学生可用其设计页面元素,加强页面的视觉效果与美观性,提升站点的专业度;再次,介绍HTML的基本语法结构和语句,使学生熟练掌握其主要标签的使用(传统的教学模式对这一部分的内容有所忽略)。

实践证明,学生若不熟悉HTML的语法构成,学习DIV+CSS这一主流的网页布局模式就会相当吃力。当然,对于非专业学生而言,学习一门语言,即便是文本标记语言,由于其本身对计算机系统相关知识的欠缺,授课会比较困难,学生也学得辛苦,但这又是一个必要的过程,其所占用的时间比较长,需要设计大量实例,反复练习才能掌握。之后介绍开发工具,重点是要理解页面的代码模式和设计模式,而DIV+CSS则是本门课程的重头戏,由于学生对代码有种天生的恐惧,所以,在建立CSS时又以开发工具建立为主,修改程序为辅。最后简单提及动态网页技术。由于课时限制(32节),本课程主要讲授静态网页制作。静态网页技术分为传统技术和新技术。传统课堂教学内容重点是布局表格、框架、模板等,而目前主流的网页制作公司则主要应用DIV+CSS。所以,对于陈旧的技术简单介绍即可,而把DIV+CSS作为布局的主要技术进行讲解。由于这些内容需要学生对代码部分比较熟悉,所以,在课时中增加了相应的HTML的基本语法结构和语句的介绍,并对主要标签的使用熟练掌握。

(二)实际授课效果

笔者今年为设计和思政两个专业的学生授课。设计专业的学生已经开设了PS,有一定的设计基础,所以,课程内容改革中的第一部分可以省略;思政专业的学生没有图片处理基础,笔者在授课过程中有意加强了这部分内容,讲授简单的图片处理方法和文字特效工具。实践证明,学生有追求新知识的欲望,基本能做到学以致用,并反馈到最终的作品中。往届学生的作品更像电子小报,而今年通过课程内容改革的学生作品虽不完美,但在形式内容上更接近Internet的正规网站,教学效果良好。针对我校提出建立培养服务于地方应用型人才的本科院校,传统的网页设计与制作课程必须响应时代号召,更新教学内容与方法。本文仅供从事该课程教学的教师参考。