高级网页设计范例

高级网页设计

高级网页设计范文1

该文介绍了《网页设计与制作》项目化教学思路和方法,从设计理念与思路、对计应相关专业建设与发展的定位与作用、课程内容的针对性与适用性、教学内容的组织与安排、教学模式的设计与创新、实践教学条件的建设与使用等6个方面进行了设计与分析,为学生较好地掌握知识及快速适应工作岗位需求进行了一些思考和探索。

关键词:

高职院校;网页设计;项目化课程;开发实践

《网页设计与制作》是计算机应用专业的一门专业核心课程。该课程目标是让学生掌握网页设计与制作能力。它以图形图像处理、互联网应用等课程的学习为基础,也是进一步学习动态网站设计等课程的基础。学完本课程,要求学生能达到掌握网页美工初步技能;熟练掌握HTML+CSS进行页面布局与排版的技能;基本掌握使用网页脚本控制页面操作和提升用户体验的能力。按照高职高专知识传授特点与职业技能需求,同时根据网页设计与制作课程知识的掌握规律,目前我校采用了项目化教学方法,为学生较好地掌握知识及快速适应工作岗位需求打下扎实的基础。

1设计理念与思路

该课程根据职业能力发展的基本规律(新手—生手—熟手—能手—专家),将学习内容设计为网页设计实际工作,通过工作实现学习。采用整体→模块→整体的设计思路,按照简单到复杂、单一到综合、低级到高级的原则进行。

1.1设计理念:学习的内容是工作,通过工作实现学习。这一理念体现了该课程的职业性和实践性,同时学习的主体变为学生,学习内容以培养学生的职业技能为主。为体现这一设计理念,在课程设计前我们调研了数十家合作企业,与企业专家一起,对网页设计各个方面涵盖的岗位进行职业技能与职业素质分析,整合出一个基于工作实践的“网页设计与制作”项目(比工作实践更完备体现课程的各个知识点)。同时分解实际工作中网页设计的工作流程和岗位,确立多个子项目。这种方式学习,充分体现职业典型工作任务,以“工作”促学习,边“工作”边学习,学生学习内容具体化,学习兴趣大大提高。

1.2设计思路:整体→模块→整体课程设计的思路是根据几个不同类型的网站案例整体设计入手,将网页设计所有环节和操作步骤详细介绍给学生,让学生从与“用户”沟通开始参与到整个系统的设计过程中,教师根据任务需要,先给出网页效果图,让学生体验完成后的整体效果,再根据项目进程分解任务,这种设计优点是能让学生将学习过程作为完整的“工作”过程。在此基础上,进一步将各工作任务分成若干子任务,通过90课时教学+30课时整周实训学习,最终将各个子项目整合,完成网站整体设计工作。在子模块学习任务设定中,每个子任务设计是按实际工作中网页设计的技能要求提炼出来的,能满足不同岗位的需求。项目完成时,我们还设计了学员相互评价体系,对设计成果进行评估,让学生在自我学习过程中及时总结并收获进步。

2对专业建设与发展的定位与作用

该课程采用项目化教学方式,可以起到如下作用。(1)学生对该专业的工作岗位有了具体认识,了解了各岗位所需的专业知识,从而帮助学生进行职业规划和知识储备。(2)学生对所学专业的工作内容有了比较具体的认识。该课程使学生对计应专业到底是做什么的、怎么做等问题有了全面认识,增强了学习信心和学习兴趣。

3课程内容的针对性与适用性

(1)该课程是依据“计算机应用专业职业岗位与职业能力分析表”中网页设计师职业岗位设置的。总体设计思路是:着重培养学生网页制作能力,具备HTML、CSS、JavaScript等知识,以网站设计工作任务为中心选择和组织课程内容,让学生在完成网站设计具体项目的过程中完成相应工作任务。课程构成主要突出职业能力要求。(2)课程总学时为90学时教学+30学时整周实训,内容包括Web服务器配置、网页视觉效果设计、用户体验设计、网页兼容性设计等。(3)知识目标和能力目标。知识目标应掌握HTML、CSS、JavaScript、HTML5、CSS3等知识,该课程学习结束,学生应能自行设计各种网页、开发一定规模的网站,熟练掌握网站制作基本方法和技巧,并最终设计出综合性的网站。能力目标主要体现以下方面:①熟练使用网页编辑软件。②熟练使用样式表控制页面外观。③能在网页中设置需要的脚本。④能进行网站的更新与管理。另外根据职业教育要求,加强学生以下素质:①服务意识:为他人提供优质的服务。②文明法制意识:网站内容积极健康向上,不做违法的事。③合作精神:能够与他人合作,具有协调能力和组织管理能力。④较强的自我知识及技术更新能力:能快速跟踪网页制作的新技术及市场应用动态。

4教学内容的组织与安排

该课程主要教学内容包括网站服务器、HTML、CSS、网页界面整体设计(含JavaScript应用)、网页兼容性等5个教学模块,其中HTML和CSS为学习和实践的重点,通过几个案例的制作过程展开知识讲授。具体教学内容及课时安排见表1,“网页外观制作技术”项目的教学设计见表2(其他教学项目的教学设计因篇幅所限此处省略)。

5教学模式的设计与创新

在该课程的教学中,教学地点由教室迁移到一体化实训室,教学方式由教师讲为主转变为学生做为主。实施中包含如下步骤。(1)指定清晰的工作任务,教师展示页面效果。(2)学生制订工作计划,理顺工作思路。(3)教师进行工作过程辅导,讲解涉及的理论知识。(4)学生根据需要在课程网站上获得丰富的教学资源。(5)学生完成工作任务,体验工作效果。(6)师生及企业专家共同评价工作成果。

6实践教学条件的建设与使用

课程在网站设计一体化教室完成,其间配合到企业现场教学实习环节,实施时由每位学生独立完成网页制作任务,课程各种教学资源能够在学习过程中在线使用。

7结语

高级网页设计范文2

1.高校概况导航栏

该栏目在网页中占据着很大的比重,也是浏览者认识高校的最基础部份,因此设计该栏目时必须要在醒目的地方和使用新颖的字体来表现,目前我国大多数高校在网页设计时,对该栏目的主要内容包括:学院概况;机构设置;人才教育(这里面包括、大专生教育;本科生教育;研究生教育;留学生及成人教育等);教师简介;科研成果;招生就业以及合作交流等。

2.校园新闻及公告

高校新闻主要包括校内及校外新闻,其中校内新闻是重点,主要包括校内主要新闻、专题新闻、校园报刊杂志等。另外新闻及公告在设计时一般以滚动的形式,以方便浏览者阅读。

3.交互窗口

该窗口主要是为浏览者提供参与学校管理,反映学院实际信息的一个平台,也是学院领导掌握学生动态,接近学院基层的一个很好的平台。该部分中最为常见的是校长信箱,由于网络的便捷性及隐蔽性,因此与传统的书面意见相比较网络信箱占据很大的优势,人们更加愿意用它来实现意见的投递。

4.信息管理及服务

校园网路为学校的教学管理及信息提供给予了极大的便利,很多高校将学校内部公文处理、人事变动、学籍选课及学生成绩查询录入校园网主页上,学生及教职工就可利用网络主页轻松的进行信息的查询和处理,另外校园网络还可为很多浏览者提供一些资料下载、信息查询等服务。

二、高校网站设计应该遵循的原则

1.短小精简、美观原则

首先,主页的作用就相当于一本书的书皮,给人的第一印象非常重要,主页的美观是吸引浏览者进一步浏览网站具体内容的先决条件,因此在设计主页时题目必须要醒目,应该做到一目了然,只需将所要表述的具体内容表达出来就好,一定不能掺杂一些不必要的内容,或者使得画面过度复杂,否则很容易引起浏览者的反感,进而关闭画面。

2.漫游工具简易原则

主页的一个很重要的功能是其中的漫游工具,漫游工具是用于引导浏览者查找保存在网站有关信息的链接工具。为了使得浏览者可快速、准确、清晰的找出所需要的信息,在主页设计时必须仅限定几个常用的高级类别即可,例如学院简介、校园新闻、校园文化、资源浏览、网络服务及技术支持等几个大块,切勿将类别下面的信息放置在重重叠叠的子页面下,以防止浪费浏览者时间甚至误导浏览者,为浏览者的浏览制造困难。

3.文字与图像合理搭配原则

人们对互联网的依赖,很大程度上是由互联网上的多媒体资源所吸引,在设计校园主页时必须要设计出足够吸引浏览者眼球的因子,因此必须要尽可能运用醒目图像、美观的画面以及新颖的文字搭配,并且使用图像、图片对文字不足之处作补充,最终做到几者的有机结合。

4.下载与图像的合理兼顾原则

在对主页进行设计时,相关工作人员必须要注意所应用的图片图像实际情况,使用的图片最佳应保持在二十几KB左右,这样才有助于校园主页的迅速打开,使得校园信息提供、校园风貌展示、网页页面美化的作用可迅速体现。如果添加的图片过大,即使图片效果很好,但是受到浏览者网络网速影响,很可能浏览者在打开网站时不耐烦法而关闭网页,最终使得浏览者没有浏览到网站具体信息。

三、结语

高级网页设计范文3

1引言

当今网站已经成为各行各业,乃至很多人的标配名片,当想了解某些未知信息时,第一时间想到的就是去网上搜索了解信息。然而随着时代的发展,我们的使用场景发生了变化,以前我们上网用的是台式电脑(PC),而现在我们使用最多的是移动设备。据著名网站通信流量监测机构StatCounter于2019年6月统计数据显示,我国网民使用手机端的市场份额为58.03%,PC端的市场份额为40.26%,平板电脑的市场份额为1.71%。可见在我国有一半以上的网民使用手机来上网浏览信息。传统的网站在建设时没有考虑到移动设备的显示和兼容问题,导致在移动设备上的用户体验不友好。因此,设计一个能够同时适配PC和移动设备,并且具有良好用户体验的网站是每个网站主都要考虑的问题。

2响应式网页设计

在响应式网页设计的概念提出之前,网站前端开发者们为了使网站能够适配各种终端设备(PC、手机和平板电脑等),往往会专门针对不同的终端设备开发出相适配的版本,即一个网站针对不同的终端设备开发出不同的前端版本,从而达到相同的用户体验,但是,如果有几十种甚至上百种不同型号的终端设备,难道都要为其单独开发吗?显然这样的做法并不科学,大大增加了网站的开发成本以及日后的修改成本。于是在2010年5月,一位名为伊桑•马科特的网页设计师首次提出了响应式网页设计(ResponsiveWebDesign)的概念,即为网站开发一个版本的样式,便能自动兼容并适配各种终端设备,且能同时达到相同的用户体验。可以说响应式网页设计的出现,不仅降低了网站的开发成本,还解决了终端设备的兼容问题,同时各大搜索引擎也更喜欢响应式网页设计的网站,响应式网页已成为网站前端设计的首选。

3高校网站使用响应式网页设计的现状

虽然响应式网页设计的概念早就提出了,但是在我国直到2015年才开始逐渐流行起来(可能与PC和移动设备的市场份额有关),而高校网站使用的响应式网页设计技术相对比较落后,笔者对全国10个省份,每个省随机抽取了10所高校门户网站以及招生网站统计发现,其中门户网站使用响应式网页设计的高校有43%,招生网站使用响应式网页设计的高校只有10%。从数据和笔者工作的经验来看,高校网站使用响应式网页设计相对落后的原因一是管理者不够重视,没有意识到网站还需要适配移动设备,二是缺少专门进行学校网站开发的专职人员,因此对于新技术的应用还需要一定的时间过程。不过近几年来,越来越多的高校门户网站已经逐渐开始使用响应式网页设计了。

4响应式网页设计的方法

4.1响应式网页设计的技术原理

一个标准的网页一般由结构(HTML,XML,XHTML)、表现(CSS)和行为(DOM、ECMAScript)三部分组成,其中结构和表现部分则为响应式网页设计的重要部分,另外CSS3标准的建立也为响应式网页设计奠定了基础。响应式网页设计的核心技术一般由以下三部分组成:

(1)媒体查询(MediaQueries)

媒体查询又称为媒介查询,即通过CSS3的@media声明来查询展示媒介(终端设备)的显示尺寸,根据不同尺寸的终端设备来选择不同的CSS样式,从而达到网页能自动适配多种终端的效果。@media声明从CSS3开始才被支持,现在的移动设备中的浏览器均支持CSS3,只有PC端的一些老旧浏览器不支持,如IE8以前的版本,很多网站已经放弃这些老旧的浏览器。

(2)网格布局(FlexibleGrids)

这里的网格布局是一个宽泛的概念,即结合了流式布局、弹性布局和栅格布局的特性,把整个网页划分成一个个网格,网页上每个网格可以任意组合,最终表现为一个个内容块。通过与媒体查询配合,同时运用流式布局中以百分比或混合百分比作为度量单位的方式和弹性布局中Flex技术,从而实现网页响应式布局的效果。

(3)弹性图片(FlexibleImages)

响应式网页设计中,处理好图片也非常重要。因为现在的网站往往会使用大幅图片来展示内容,这就需要根据终端设备的宽度来自动调整图片的宽度,从而达到更好的显示效果。通常的做法是将图片宽度以百分比来度量,配合max-width或background-size等CSS属性来完成。

4.2目前主流响应式网页设计开发框架介绍

我们在做网站前端开发的时候,可以借助一些前端开发框架来帮助快速开发网站,这些前端开发框架的原理其实就是将布局系统、排版样式、导航样式、表单样式、按钮样式和表格样式等封装好,我们只需要直接拿来引用,而不需要单独的为每个HTML标签写CSS样式,还能提高界面的美观性。目前支持响应式网页设计的开发框架有很多,甚至自己也可以开发一套适合的开发框架,下面介绍几种主流的响应式网页设计开发框架。

(1)Bootstrap

由Twitter的工程师开发,是一款集合HTML、CSS和JavaScript的框架,用于开发响应式布局、移动设备优先的网站,且免费开源,拥有庞大的社区支持。

(2)Foundation

由一家专业的产品设计公司ZURB开发,是目前在商业领域使用最为广泛的一款响应式前端开发框架,是一个易用、强大而灵活的框架,且免费开源。

(3)GroundworkCSS2

同样是一款响应式HTML、CSS和Javascript的框架,其官网还提供大量的在线展示示例和开发文档,且免费开源。

4.3使用响应式前端开发框架来开发高校网站

面对如此繁多的前端开发框架,高校网站只需要挑选其中一款即可满足需求。通常高校网站前端开发步骤如下(这里仅仅提供一种思路,具体设计开发的细节不展开):第一步设计界面,用网格布局的原理,将高校网站的内容设计成一个个区块,比如从页面顶端依次到页面的底端,一般为网站Logo、导航菜单、大图轮播、主要栏目列表、底部联系方式、备案信息和新媒体二维码等。第二步选择一款主流的前端开发框架,通过前端开发框架的实例,找到适合的界面设计实例,直接拿来使用就可以。第三步开发调试您的网站,使用Chrome开发者工具可以高效调试您的网站。

5结束语

高级网页设计范文4

1.1网页设计与制作课程的性质

首先,设计者要有一定的美术功底,其次要有搜集和整理素材的能力,再者要有准确的表达能力,甚至还应该具备一定的行为学知识的能力,另外还要有分析和创新能力。综上所述,得出以下结论,网页设计课程是一门综合性很强的基础课程。

1.2网页设计与制作课程的地位

与网页设计与制作课程关系密切的课程很多,而关系最为密切的课程有计算机应用基础课程,电脑绘画课程(Photoshop)和动漫设计课程(flash),这三门课程都是网页设计与制作课程的前导课程,相对于这三门课程来讲,网页设计与制作课程就是后续课程。在对后续课程的教学过程中,必定会让学生运用到前导课程的知识和技能,这样不仅可以让学生对前导课程进行一定的强化学习,而且更有利于后续课程的教授和学习,在很大程度上,能够提高学生设计网站的水平。如果把前导课程比喻成红花和绿叶的话,那么后续课程就是饱满的果实。由此看来,网页设计与制作课程在整个教学体系中占据着非常重要的地位。

2选择适合高职院校学生特点的教材

我院具有所有高职院校所共有的职业特点,但又有着我们自身更为突出的特点,要以“面向高职学生以应用”为目的的思想为指导,以能力为本位,适应社会的需要,这就要求我们在选择教材时一定要准确实用,我院幼儿教育系选用的是由清华大学出版社出版的第二版《Dreamweaver网页制作实用教程》,本教材以“实例+知识点”的结构构建内容,采用“任务驱动教学法”让学生边做边学,并配以相应的光盘,生动直观,能够让学生在短时间内迅速掌握所学知识,是一本符合培养高职院校学生技能的好教材。

3遵循高职教学规律,加强和改进教学工作

高职院校不同于其他高校的地方就是它是以实践操作能力的培养为主导,理论知识的学习为辅的教学指导方针进行教学,对于网页设计与制作这门实践性很强的课程来说更是如此。想要教好这门课程,教师就必须在教学过程中进行一系列的教学设计才能达到较好的效果,如何组织好这门课对于教学工作和效果尤为重要。

3.1网页设计与制作课程的教学思路

首先,要上好第一堂课。教师要在课前做好充分的准备工作,要利用第一堂课想办法牢牢抓住学生的心,让学生真正认识到学习网页设计课程的重要性和必要性,不能让学生有沉闷和枯燥的感觉。所谓万事开头难,好的开始必定能为之后的教学打下一个坚实而良好的基础,但好的开始并不意味着之后的教学就会一帆风顺的进行,之后的教学务必要在多媒体课件上下工夫。多媒体课件是教学的灵魂,它不是文字、图象、音频、视频和动画信息等各种元素的堆砌,而是它们的完美融合,利用它们使课堂变得更加生动和精彩,从而尽可能的提高学生的学习兴趣。

3.2网页设计与制作课程的教学方法

用实例作为课堂切入点,让学生先看到实际效果,首先启发学生思考用之前学到的知识和技巧能否做出此种效果,然后再由教师演示实例,在演示实例的过程中引出新的知识点,将知识点融入到具体实例中。比如,在表格布局和内嵌框架的教学模块中,我们采用任务驱动教学内容。教学目标是用布局表格设计网站主页,在演示此实例之前,让学生先利用之前学习的表格知识设计此网站主页,目的一是巩固前面章节所学知识和操作技巧,目的二是为接下来的布局表格设计做好充分的铺垫,让学生从内心有所比较,哪种方法更适合用来设计网站主页,在教师演示实例过程中可以更好地抓住学生的注意力和调动学习的积极性。演示案例制作一个介绍“学习教程”的站点,主要包含六个模块,包括“我的主页”LOGO、“导航”、“网站信息”、“教程热点”、“热门下载”、“最新教程”、“最新软件”等等。基本要求是在此实例中,添加“左上角三叠图”和“最下面友情链接”,资料在网络中获取,合理设置网页的背景以及图片和文本的属性,页面美观大方。较高要求是用此站点结构制作一个介绍自己的个人站点,要求除基本要求外,要有六处超级链接,且六处链接页面要有一致的框架结构,站点中导航清晰,布局合理,配色美观大方。

3.3教学过程中因时因人改进教学手段和方法

高职具有较强的职业特色,而学生水平存在着个体差异,故不能进行一成不变的教学方法。在课程进行到中期的时候,学生对课程知识的索求和动手实践的欲望会渐渐减弱,他们的厌学情绪越来越重,或者总是出现眼高手低的现象。在这个阶段学生已经掌握了一定的网页设计与制作的知识和技能,教师可以放手给学生,在授课过程中可以由主动变为被动,让学生由被动变为主动,譬如找某位学生来演示课堂实例,教师在旁指导,把学生的注意力拉回课堂,以此来推动教学进度顺利高效的向前进行。

4明确教学目标,把握教学内容

4.1选择合适的网页制作工具

目前最好的网页制作与设计软件工具是Dre-amweaver。它一直以来作为可视网页编辑工作的标准,在代码编辑和应用程序开发方面的功能比较强大,更重要的是它是所见即所得类型的网页设计软件,对高职院校非计算机专业的学生来将非常适合。同时,可以选择Flash制作网页中的动画素材,选择photoshop处理和制作网页中的图片素材。

4.2要求学生能够利用

Dreamweaver设计各种网页,开发初具规模的网站我系课程方案中要求采用以Dreamweaver为主导,逐步讲解网页设计的基础知识,初步了解HTML语言、简单认识CSS网页设计的基础知识。这里需要特别说明的一点是,首先,对HTML的教学,有些人认为对于高职非计算机专业的学生来说,不用学习太多语言,其实不然,HTML可以说是网页的灵魂,它不像C语言那样生涩难懂,高职非计算机专业的学生完全有能力学会和掌握。其次,要掌握CSS的基本使用方法,CSS是英文单词CascadingStyleSheets缩写,翻译为“层叠样式表”。通俗讲CSS是控制网页中内容的颜色、字体、文字大小和宽度、边框、背景及浮动等样式来实现各式各样、花样百出的网页样式的统称。由于允许同时控制多重页面的样式和布局,CSS可以称得上网页设计领域的一个突破,作为网站开发者、设计者能够为每个HTML元素定义样式,并将之应用到希望的任意多的页面中。如需进行全局的更新,只需简单地改变样式,然后网站中的所有元素均会自动地更新。

5考核方式

根据高职院校学生的实际能力水平和课程教学质量基本要求,传统理论考试已不适宜于网页设计和制作课程,网页设计和制作课程采用的是考查的考核形式。这种考核方式更适合网页设计课程的特点,更加强调学生学习的灵活多样性。期末总评学习成绩可由三部分组成:课程考核(平时到课考勤、课堂上的表现、课堂实训作业和)占30%、小结考核(阶段测验作品)占30%和期末考核(期末综合作品)占40%。这种考核方式注重实际操作能力和灵活应用能力的培养,可尽可能地调动学生的学习兴趣,发挥学生的学习积极性和主动性。期末考试要求学生在教师规定的时间内完成一整个网站项目的设计与制作,项目中包含一个学期中所学过的全部知识点和技能点。《网页设计与制作》课程是当下一种全新的教学内容,教师在教学中应将自己独特的教学理念运用于教学方法中,即让学生轻松愉快地学会制作网页的方法和技巧,又能在建立网站的过程中充分发挥自己的想象力和创造力,从而能培养更多适应信息化社会的综合型网页设计人才。

6社会实践

如果说课堂考核方式是检测和巩固学生设计网页能力最有效的方法,那么课外的实践则是拓展和提高学生设计网站能力最有效的渠道。可以组织学生进行学院网页设计的比赛,也可以走出校园去参加社会团体组织的设计大赛,或者进行一段时间的顶岗实习,这样可以最大程度的提高他们对此课程的学习积极性,也可以让学生找到差距,激励他们更加努力,不断完善和提高自己设计网页的水平。

7总结

高级网页设计范文5

网页设计课程是高校计算机专业中的一门核心课程,其实用性和综合性很强。如何建立高效率的课堂,让学生学习好这门课程,成为广大教师重点关注和亟待解决的重要问题。

关键词:

计算机;网页设计;教学模式;实践;互动

《网页设计》课程相对其他学科来说,是一门趣味性较高的课程,如何吸引学生的兴趣,激发他们学习的热情,是广大教师应该深入思考的问题。而且网页设计课程最大特点是易学易忘,学生如果仅仅在课堂上学习,课后的自学意识和复习意识差,那么他的学习质量将难以保证。因此,为提高网页设计课程的教学效率,必须不断改革与充实教学内容,改进教学方式,注重突出网页设计课程的实践性和应用性,注重培养学生的动手意识和计算机操作能力,使学生能够运用所学知识进行网页管理和设计。

一、营造融洽的课堂气氛,体现师生互动

传统教学中教与学的关系,使教师与学生的角色产生了定型。教师如果只管教,学生爱听不听,这种教育效果会很不理想。为提高教学效率,必须营造出融洽的课堂氛围,在教学中注重师生互动,及时反映出教师和学生的不足。教师可以针对不同的教学内容、学生的掌握程度,灵活采用多种教学方法。在教学中,教师要了解学生的领悟情况,注意学生所反映出的问题,及时跟学生进行相应互动。实践证明,充分的师生互动,可以提高学生的参与热情,同时也能活跃课堂气氛,大大提高学生的学习效率,从而提升教学效果。

二、充分利用案例教学,加深学生印象

网页设计是一门实用性和综合性很强的学科,在高校教学中,应该更注重这些特点。因此,教师在教授网页设计课程的时候,要充分利用好实例教学的模式,突出学科的实用性,同时,也能激发学生的学习兴趣。在教学中,教师可以切入和学习内容有关的情景或实例,让学生通过参与情境学习,分析和判断学习情境所带来的问题。教师在教学实例的选取上应该以贴切实际为原则,以实际应用的案例为主线,让学生切身体会实例从需求分析、设计、制作、测试到完成的整个过程,使每次学习都变成一次实践,从而加深对学科的印象。同时,教师要引导学生自己去分析整个实例过程,使每个学生都参与其中,培养他们的分析能力和自学能力,激发学生的学习兴趣,使学生的学习更有针对性和实用性,为他们以后参加工作打下坚实基础。

三、采用分阶段分模块的方式教学

教师在制定教学目标的时候,应当根据教学内容,同时结合学生的学习能力,制作出一个整体大纲,根据由浅入深的原则,分模块教学。例如,网页设计课程中,可以尝试计划出四个教学阶段,第一阶段目标是让学生能够熟练使用网页设计的超文本标记语言HTML,能相应地制作简单的网页和超链接文本。教师根据第一阶段学生学习的情况,及时进入第二阶段学习,第二阶段的目标是让学生能熟悉并熟练使用网页基本制作工具Dreamweaver,同时可以在记事本和工具之间自由切换。第三阶段是让学生能进行网页设计中的图像插入和简单的Flash制作,相应地教导学生用Photoshop进行图片处理。第四阶段让学生掌握在网页中嵌入Java脚本语言,从而实现网页动态效果。这样一个由浅入深的过程,不仅能适当减少学生的学习压力,同时能一步步带领学生感受新知识的魅力,激发学生的求知欲望,使学生主动学习,大大增强教学效果。

四、举办各种竞赛活动,激发学生的学习热情

教师在网页设计的教学过程中,可以通过举行各种比赛或活动来吸引学生的参与热情。例如,在学习中教师可以建立一个学习园地、作品展示区。在园地中,学生可以大胆发挥自己的想象能力,制作有自己特色的作品,可以是关于学校宣传、学科学习、个人兴趣的网站等,教师则帮助启发学生设计思路。又如举办“学生网页设计大赛”,给学生搭建一个交流学习的平台。通过这个平台,一方面可以使学生展示出自己的学习成果,激发其学习热情。另一方面教师也可以在学生展示的作品中了解前期学生的学习情况,适当调整教学方法。这样一个平台,明确了学生的学习方向,同时也能让学生体会到一个实例的制作过程,提高他们的动手操作能力,也教育学生要学以致用,提高学生的综合实践能力。

五、结语

随着信息技术的发展,教学模式要更加多样化才能满足学生的学习需求。网页设计是一门实用性和综合性很强的课程,如何通过此课程,提高学生的动手操作能力和综合实践能力,值得人们思考。只有通过不断探索和改进,才能提高课堂的教学效率和学生的学习质量,从而培育出更加优秀的人才。

作者:王宇祥 单位:辽宁广告职业学院

参考文献

[1]潘家辉,曾碧卿“.翻转课堂”下软件工程专业的课堂教学研究与实践[J].当代教育实践与教学研究,2015(7).

高级网页设计范文6

笔者构想的结合方式涉及三个开放:教师和学生之间的互动通过网络开放,两者相互监督和评价;企业和学生之间的联系开放,企业可以通过学校网站直接与相关专业的学生联系;设计专业还可以通过网络建立自己的产品销售渠道,将课本知识通过产品直接反映到市场中,让教师和学生共同接受市场检验。具体内容如下。

(一)通过网络对学生开放评价系统

现在的学校网络都有教学评价的环节,但基本是一门课结束时可评价一次,并以这次评价的分数来作为教师代课成绩的重要指标。如果评价是为了分数,就失去了评价的重要意义:评价是为了交流。在这方面,网络完全可以发挥更大的作用,建立网站,将每节课都在网络上全程对学生开放,学生可通过网络匿名,随时和教师及其他学生交流,发表自己的看法,讨论课程的不足之处。这样就把学生意见全程融入到课程当中,教师和学生的身份将变得更为平等。

(二)通过网络对企业开放评价及招聘系统

企业可以以会员形式加入到相对应的专业体系里,有会员身份的企业可以参与到每门课程的每节课中进行匿名点评或讨论,积极参与的企业,可以积累分数,分数高的企业可以在本专业系统的毕业生里享有优先招聘学生的权利。企业通过参与课程,可以观察哪些学生符合自己的企业需求,其也可以在课程中发挥督导作用,以企业标准衡量课程内容是否合理有用。教师在企业的参与指导下上课,避免了象牙塔现象,教师本身的专业能力也将得到极大提高。

(三)通过网络将设计结果对潜在的购买人群开放

可以通过大的网络销售平台建立学生作品销售网络。比如在淘宝上专门开设大学生作品销售市场,每个学校的每个设计专业都可以在淘宝上开设一个店铺,本专业学生可以在店铺里上传自己的作品,对这些作品感兴趣的人可以通过网站进行购买并评价。这样学生和市场就以最直接的方式紧密联系在了一起,其市场敏锐性和积极性必将得到很大提高。职业教育“以就业为导向”就不会是一句空谈。综上所述,整个教学过程通过网络对学生开放、对企业开放、对市场开放,开放内容包括教学过程、教学评价和教学成果。

二、构建开放式“E”教学系统的意义

网络改变了现代人的生活,并为其提供了非常方便的展示平台,使人们更便捷地获取各种知识,还使各种信息都面临被公开、被泄露的压力,在这种新形势下,开放式教学的定义和方式都应被赋予新的解释。“开放”是互联网的根本特性,其在实质上提升了个人(包括学生)的权利和能力,在互联网的帮助下,学生很快发现站在讲台上的教师不再是最有学问的那个人,现行的课堂讲授模式受到“E时代”生活方式的巨大冲击。本研究正是把开放式教学理论放在当前社会背景下,重新挖掘其内涵,研究如何主动通过网络把开放、互动的E时代特性融入到整个教学过程中,提高教学质量,增加教学趣味性。

这个系统是网络技术在教学中运用方式的创新。比如:让设计专业有组织地利用网络建立自己的产品销售渠道,让学生的设计作品与市场直接接轨。在网购普及的时代,网络销售的低成本性适合学生群体进行销售试验,由教师带领按照企业架构的方式去完成从设计到产品销售的所有环节,这将是极富挑战性又很有趣味性的教学方式。

这个系统也是对校企合作方式的创新。一般的校企合作都是将企业引入学校,让学生在企业中实习,以了解企业的运行过程。本课题的构想是吸引企业加入学校专业网站,企业与学校之间的联系转化为网民与网站管理者之间的关系,通过一些可行的网站规则,实现企业对教学过程的监督与指导,并为企业与学生之间的联系提供方便。

这个系统有利于建立新型的师生关系。传统的教学中,教师与学生是教与学的关系,本课题所研究的教学体系将改变这种传统关系,因为网络信息的巨大容纳性,教师作为知识的传授者这一角色在开放的网络教学过程中将受到学生的挑战,这会使教师和学生的关系变得更自由和平等。

三、总结

高级网页设计范文7

在互联网蓬勃发展的大环境下,《网页设计与制作》已经成为众多高职院校中开设的课程,但是实际的教学效果往往差强人意。本文尝试从教学内容的角度对高职《网页设计与制作》教学提出一些看法,以期提高《网页设计与制作》课程的教学效果。

【关键词】

网页设计;高职;教学内容

随着互联网逐渐深入到经济生活的各个角落,涌现出越来越多的网站。相应的,各类单位、企业等用人单位对网页设计与制作人才的需求也开始变得普遍。而《网页设计与制作》也早已成为大多数高职院校普遍开设的课程,甚至在同一所高职院校中也有相当数量的专业开设了这一课程,这些现象都反映出了社会对网页设计与制作人才的需求。而互联网的不断发展也在推动着社会对网页设计与制作人才水平要求的不断提高,也对《网页设计与制作》的教学提出了新的挑战。

一、《网页设计与制作》教学内容存在的问题

1.教学内容与实际应用脱节。

目前,《网页设计与制作》的教学内容大致分为:网页设计基础知识、HTML语言基础、CSS样式基础、网页文本和图像、超链接、表格、框架、Div、多媒体网页、模板和库、站点管理维护。不同院校、不同专业在具体内容的选择上可能会有所差异,但大致都包括了这些内容。首先,在《网页设计与制作》教学中,往往会以Dreamweaver这一网页制作软件的使用作为主要内容,所有的操作都依赖于Dreamweaver,很少涉及对HTML代码的讲解,这导致学生无法熟练的查看、修改HTML代码,一旦离开了Dreamweaver,学生将无法制作、修改网页。而在实际应用中,HTML代码是在进行网页设计时无法绕过的一个知识点。因为在Dreamweaver的设计视图下操作是不能解决所有问题的,很多网页设计中出现的问题只有通过查看HTML代码才能发现并解决。此外,Dreamweaver也并不是计算机上的常用软件,学生应该具备在脱离Dreamweaver的环境中进行简单网页制作、修改的能力。其次,早期的页面布局以表格布局为主,但随着互联网技术与网页设计标准的不断发展,表格布局技术已经不再是主流,取而代之的是Div+CSS布局,也是所谓的内容与形式分开的布局方式。在这种布局方式下,页面元素的布局更加灵活、页面代码更加简洁。而更重要的是,采用这种布局方式的网站在整体风格的管理和后期维护上更加方便、效率更高。因此,《网页设计与制作》的教学内容应当给予Div+CSS足够的重视,加大其在教学内容中的比重,以增强与实际应用联系的紧密程度。再次,随着移动互联网的兴起,通过手机等移动终端访问互联网的用户数量已经超过了传统的通过PC访问互联网的用户数量,如何设计适合于移动终端浏览的页面,也应该作为《网页设计与制作》教学内容的一部分。

2.只重视“制作”忽略“设计”。

不同院校、不同专业对《网页设计与制作》课程的命名不尽相同,但大多带有“设计”二字。而在实际的教学内容安排中,却往往没有体现出“设计”的部分。网页设计是一门典型的交叉课程,既有计算机科学知识,又有人文社会科学知识。网页设计虽较多的依赖技术性手段,但并不代表在教学内容的安排上就要以技术为主导。学习Dreamweaver也是只是为了掌握一种工具而不是最终目的,成功的网页设计作品还要有美观的布局、配色和人性化的信息导航。

二、确定合理的《网页设计与制作》教学内容

1.加强对HTML基础的教学。

虽然Dreamweaver作为主流的“所见即所是”编辑工具,可以让使用者不接触HTML代码就能完成大部分网页制作的工作,但是只有真正理解HTML语言,才能理解网页工作的原理,才能真正深入到网页设计的核心,才能学习到其他优秀网页设计作品的内涵,为将来的能力提升铺平道路。

2.加强对Div+CSS内容的教学。

Div+CSS布局已经是成熟的主流网页布局技术,《网页设计与制作》的教学应该突出对该技术的侧重,将已经被淘汰的表格布局作为辅助。同时,对CSS的教学内容应该贯穿始终,因为CSS可以说是控制网页元素表现形式的关键,掌握了CSS就能根据需要轻松的设置页面元素的各种效果,从而为整个页面增色。

3.增加对艺术设计的教学。

目前网页设计行业内最缺乏的是具备优秀设计能力的高端网页设计人才,而目前《网页设计与制作》教学中最欠缺的就是对设计能力的培养,导致学生在学完课程后也只能进行简单的模仿和重复,无法进行有效的创新和设计。因此网页设计课程的教学应该以艺术设计为出发点,增加对传统艺术设计方面的教学内容,如构图、色彩、设计思维等知识,并进行相应的实践练习,以此培养学生基本的审美能力和在设计上的创新能力,这样才能让网页制作技术服务于网页设计,从而真正体现出“设计”,避免舍本逐末。

4.补充对主流技术的教学。

互联网的发展日新月异,新的技术不断涌现,作为《网页设计与制作》的任课教师,应该具备一定的判断能力,将未来网页设计技术发展的新趋势呈现给学生,帮助他们紧跟行业动态,为将来就业打下良好基础。

三、结束语

《网页设计与制作》作为一门开设多年的课程,在教学内容的设计上必须要关注行业的最新动态,同时明确课程的核心内容,才能培养出社会所需要的网页设计人才。

作者:韦喆哲 单位:广西经济管理干部学院信息管理系

参考文献:

高级网页设计范文8

关键词:实践视角;高职院校;网页设计;课程优化

高职院校网页设计课程教学经验丰富,然而真正从实践层面上探讨课程质量优化的研究却不多。实践经验的累积,是学生获取实践能力的先决条件,更是设计出优秀网页作品的基础。鉴此,从实践视角探讨了高职院校网页设计课程优化策略,希望对高职院校网页设计课程的教学质量提高具有参考作用,为网页设计行业培养出更多优秀的应用型人才。现做如下分析。

一、网页设计课程实践维度

(一)应用实践。高职院校开设网页设计课程,首先是从应用层面上教会学生使用各种网页设计工具。学生对于网页设计软件各种功能的熟练程度,决定了学生日后完成网页设计任务的速度。实践层面上,需要学生至少能够临摹优秀作品,而临摹的基本条件便是学生掌握网页设计软件的各种功能。目前,高职院校开设的网页设计课程,所教授的应用软件类型主要为三个方向,图片设计软件、网页布局软件、网页代码编辑软件。图片设计软件主要是在线优化图片质量,既要保证上传和加载速度,也要保证图片像素质量。学生至少需要掌握AdobePhotoshop、AutoCAD等制图软件的基本功能,才能在网页设计上达到从业水平。网页布局软件的应用,决定了网页总体设计效果,是网页设计课程的主要讲授内容,如Dreamweaver、Fireworks、Flash等软件使用频率最高,也是当前高职网页设计课程的重点知识结构。最为主要的是教会学生使用网页前端制作工具,对网页呈现结构和布局进行合理化调整,掌握其中的设计技巧和方法。网页代码编辑软件较多,编程语言常用代码包括:CSS、HTML、JavaScript、ASP、PHP、CGI等。由于高职院校课时有限,需针对某一种常用代码进行详细讲解,以保证学生至少掌握一种网页代码编辑方法,达到设计网页后台程序的基本需要。

(二)企业实践。高职院校网页设计课程最终实践层面在于企业,尤其是那些网页需求量极高的企业类型,对于学生网页设计经验要求也很高。从企业实践角度考量,学生必须具备帮助企业不断完善官网首页、子页面、各种链接页面设计效果的能力。因此企业实践才是学生走出校园,走上职业岗位的学习实践目标。高职院校以培养应用型人才为发展目标,而评价学生是否具备了应用型人才的基本特征,不应当由校方直接评价,而应当由企业评价和客户评价作为实践基准。由于网页设计市场高速发展,尤其5G时代的来临,令智能终端流量激增,H5页面的设计需求也在不断更新。真正了解市场需求的网页设计课程,才能契合市场标准培养学生的实践能力。那么单独依靠高职院校的教学资源,实际上是很难实现市场需求的全面对接。学生设计作品也更需要企业平台的检验,才能透过企业了解客户需求,真正反映出市场发展动向,以及学生是否达到了相应的设计标准和职业能力条件。因此,企业实践是当前高职院校网页设计课程的必然发展趋势,更是拓展学生眼界、增强实践能力的必然发展之路。

(三)设计实践。网页设计归根结底着重于“设计”,设计能否被企业满意,能否令用户欣赏,都决定了学生的职业发展。因此,高职院校网页设计课程的实践,究其根本仍然是设计案例的反复实践,并从中总结出各种实践性较强的设计经验,以供学生从业所需。网页设计课程除了要求学生掌握各种设计软件的基本功能,适应企业人才发展需求,更要在设计层面上有所创新。一味效仿临摹他人设计作品,并不足以培养学生的设计灵感和审美能力。故而设计实践才是真正增强学生就业能力的课程标杆,更是为网页设计行业培养优秀人才的重要发展尺度。以往时期,高职院校误以为将教会学生如何使用网页设计工具,便可以带领学生走入网页设计行业。而从近些年的行业入职标准来看,准入门槛越来越高。其中最为关键的影响因素在于,网页设计作品更趋向于大众审美,实践经验不足的学生很难获得就业机会。这种设计经验并非对于设计软件功能的使用能力,而是超出以往设计构思推陈出新的设计构思和创造力。那么唯有突破设计实践的局限性,才能提升高职院校网页设计课程质量。

二、基于实践视角的课程优化策略

(一)拓展课程实践应用教学资源。网页设计应用软件的功能很多,虽然高职院校课时有限,但是最为基本的软件功能必须在有限的课时内讲完。根据学生的理解情况,可以适当拓展课程资源,重点讲解当前设计公司普遍应用的设计软件。如果教学时间安排未能达到预期,也需要为学生提供课外学习资源,由学生自学来完成对多种网页设计软件的掌握。教师也可以适当开设辅助课程,帮助学生掌握更多网页设计软件的功能,进而提高学生的职业能力。由Macromedia开发出的Dreamweaver、Fireworks、Flash(网页三剑客)虽然功能强大,也满足网页设计的基本需要。但是从教学实践层面考量,高职院校仅讲解这些软件功能还是不够的。网页设计课程教学资源的拓展,有助于优化课程质量和学生的设计思维。像Udemy、Lynda.com、Learnable、Tuts+、Bloc、Mijingo等网页设计教学资源,都有很多免费的课程视频。而且这些教学资源几乎都融入了Android开发、iOS开发、响应式网页设计、HTML5页面设计、CSS语言编程等重要课程内容,课程资源的实践性与应用性都很强,高职院校网页设计课程有必要甄选并整合这些学习资料,为学生提供更优质的教学资源并引导学生自学,进而培养学生网页设计的实践能力。

(二)增强校企合作引入实践案例。企业实践的发展,是高职院校网页设计课程质量优化的重点方向。高职院校有必要结合自身地域优势、资源优势、渠道优势,拓展与企业合作的基础条件,令企业资源可以融入高职院校的网页设计课程,为学生提供更多市场一线的终端反馈,进而通过增强校企合作引入实践案例,培养学生适应市场发展的职业能力。真正为学生走向网页设计的职业岗位,奠定良好的实践经验。增强校企合作是培养学生网页设计实践能力的重要方向,更是优化高职院校网页设计课程的关键所在。高职院校网页设计课程需要尽量关注设计需求较大的企业类型,如淘宝店铺、京东店铺、拼多多页面链接、微信公众号等潜在的网页设计需求群体,联系这些商家建立合作关系,帮助学生尽早接触网页设计需求客户,有助于学生了解网页设计的市场需求并总结设计经验。同时在征得企业同意后,可以带领学生参观企业设计师的构思草稿或后台页面素材,进而帮助学生更好的了解设计过程和所需的知识点。此外,企业方可以为学生提供一些简单的网页设计任务,在高职教师的带领下合作完成。如此,这些实践任务对学生的网页设计思维启发也会更为理想,有益于培养学生的网页设计实践能力。校企双方的资源互换,企业设计任务流入校方,校方人才资源流向企业,才能更好的助力高职院校网页设计课程不断优化,实现设计经验的分享和实践能力培养。

(三)解读经典设计共享实践经验。网页设计经验的累积,首先需要培养学生的审美能力,至少需要学生具备判断优秀作品和识别高质量作品的基本审美能力。这种基于审美能力的实践经验获取,就需要教师帮助学生解读经典设计作品,从其构图或色彩运用等多方面,引导学生思考经典作品的设计思维。真正打破保守的设计构思,突出网页设计作品的创新性,才能令学生在未来职业岗位上脱颖而出。从设计经验的实践维度考量,高职院校网页设计课程有必要增加针对经典设计案例的深刻解读,并引导学生总结、分享并累积设计经验,真正形成不断学习网页设计经验并加以思考的学习模式。在校期间教师能够传授学生的设计经验十分有限,而学生参加工作以后,仍然需要不断学习高品质网页设计案例,才能向着行业顶尖设计师行列进步。那么高职院校就需要在有限的课时内,帮助学生掌握获取设计经验的方法。为此,网页设计课程需要不断引入经典案例,如国际知名品牌的官网设计,学习如何体现其品牌文化、突出产品功能、引导用户浏览、运用色彩构图等等。通过课上的深入解读分析,帮助学生建立自主学习意识,不断培养学生赏析网页设计案例的能力,学会如何在经典设计中找到亮点,理解优秀设计师的设计思维,更有利于学生养成自学能力,学会通过临摹优秀作品养成良好的设计习惯,进一步提升实践能力。除此之外,教师也需要帮助学生寻找更多的设计素材资源,如:包图网、千图网、素材中国、爱图网、昵图网等等。由教师注册班级账号,密码分享给全班同学,让学生下载网页设计素材更为便捷,有利于学生课后学习和巩固设计经验。同时可以将学生的设计案例上传至网络平台,通过下载量验证学生作品的设计构思是否被市场真正接受,从而增强学生的设计信心,真正找到设计乐趣,以更为优秀的设计作品创新找到职业发展的原始驱动力。

三、结语

综上所述,高职院校网页设计课程,教学任务重点在于培养学生的实践能力。唯有引导学生掌握各种网页设计软件的实践应用,更好的完成企业设计任务,在经典优秀作品中累积设计经验,才能真正提高实践能力,走向实践岗位。鉴于此,高职院校网页设计课程,应当拓展课程实践应用教学资源,增强校企合作引入实践案例,解读经典设计共享实践经验,进而培养学生网页设计的实践能力。

参考文献

[1]陈妍.浅谈基于翻转课堂的html5+css3网页设计教学模式的实践研究[J].数码世界,2020(10):143-144.