前言:想要写出一篇令人眼前一亮的文章吗?我们特意为您整理了5篇网页设计知识总结范文,相信会为您的写作带来帮助,发现更多的写作思路和灵感。
1.网页主题策划。当要求学生为某个网站主题制作一系列网页时,某些作品主题定位不准确,比如原本网站主题是品牌产品宣传,最后的作品却是购物网站。有的作品则是主题不统一,想展现的内容太多,多个主题拼凑在一起。出现上述问题的主要原因是需求分析不准确、提炼设计主旨的能力不足。
2.网页风格设计。在网页布局及风格设计方面,常出现页面风格不统一、页面风格与内容不协调等的问题。比如某些作品的多个页面之间在风格、模式和色彩上差异较大,影响了网站的整体风格。这是由于学生对形式与内容的协调把握不足,不能在内容不同时实现形式上的统一。
3.网页元素的编排。网页元素的编排,主要是框架、表格、文字、图片、动画等内容在单个网页内的排版。学生作品在网页元素的编排方面的问题主要有:(1)文字的处理。网页中使用的字体太多,造成页面混乱;字体、字号过于单一,标题或重点不突出;行距过大或过小等。(2)图片的处理。图片过度拉伸造成显示模糊;图片过大造成页面加载速度缓慢;并排显示的图片尺寸不统一等。(3)网页布局。页面宽度过大,在一屏内无法显示,造成浏览困难;页面内容多而杂,各部分跨度太大,整体可读性不好,重点内容不突出等。
4.网页色彩搭配。网页的色彩搭配应该均衡、协调,使人感觉舒适、美观,又不至于视觉疲劳。学生在网页色彩搭配上出现的问题主要有:网页色彩过于单一,无吸引力;色彩过于花哨,容易造成视觉疲劳;文字颜色与背景颜色相似,造成阅读困难等。
5.交互性设计。用户浏览网页是一个人与网页信息交互的过程,交互性好的网页应该功能实用、操作便捷。学生在交互性设计上出现的问题主要有:网页无标题;导航栏不全,引导性不佳;链接层次过深,造成连续浏览不便捷等。
6.网站文件结构。网站文件结构是指储存在硬盘上的目录结构,虽然不会影响到网页的功能和外观,但是良好的目录结构能够提高网页设计和后续维护工作的效率。学生设计的网页作品往往忽视网页文件结构的合理性,存在着网页命名随意无规则,不同层次的网页文件存放在同级目录,图片文件随意存放等问题。综合上述问题分析可以看出,学生在创造能力及设计思维上相对较弱,实际上通过操作实践,学生基本都能完全掌握网页设计软件操作,比如插入文字和图片、设置字体和颜色、插入超链接等,但却在需要整合运用这些操作时出现了问题。这实际上就是心智技能缺乏的表现,因此培养心智技能是提高学生网页设计能力的关键。
二、心智技能阶段性理论在网页设计教学中的应用
1.网页设计心智技能形成分析。根据冯忠良教授的研究,心智技能的形成是阶段性的,其过程分为原型定向、原型操作和原型内化三个阶段。原型定向阶段以理论知识传授为主,让主体掌握技能操作的原理;原型操作阶段通过实践让主体熟练掌握操作技能,为原型内化奠定基础;在主体大脑中形成内化的思维模式,使主体能够灵活运用操作技能解决实际问题。根据上述理论,结合网页设计教学的实际过程,网页设计心智技能的形成阶段如图1所示。网页设计心智技能的形成可分为:掌握基本理论、熟练实践操作和总结设计模式三个阶段。这三个阶段不仅体现在整个学期的教学过程,更应该体现在每一章节的教学中,甚至在每次课的教学中不断重复,才能强化巩固心智技能。在整个学期的网页设计教学过程中,基本理论、熟练实践操作和总结设计模式三个阶段的主要教学内容是:(1)网站和网页的组成、网页设计的一般过程、HTML原理和常用设计工具。(2)网页设计工具Dreamweaver、Firewoks及Flash的操作和使用。(3)指导学生综合应用设计工具进行完整设计,总结网页设计中的经验和模式。而在某项软件操作的教学过程中也应遵循三阶段原则。教师首先结合HTML语言讲解此项操作的后台原理。然后教师进行演示,学生操作,期间教师不断进行指导。最后教师总结该操作中应当注意的一些原则,以及常用的一些设计模式,可通过展示优秀的设计作品进行对比讲解。
2.教学实践。在前述理论研究的基础上,笔者进行了教学实践。根据课程教材,首先设置了“网页设计概述”、“HTML基础”、“DreamweaverCS4应用”、“FirewoksCS4应用”“、FlashCS4应用”“、综合实例”六章课程内容。其中第一、二章以纯理论教学为主,难点在于HTML基础知识,须重点讲解。第三至六章均采用三阶段原则进行教学。最后为了加强心智技能原型内化阶段的效果,增加了第七章“网页设计模式精讲”,对网页设计中的常见问题进行总结,介绍设计原则和方法。下面以第三章“DreamweaverCS4应用”和第七章“网页设计模式精讲”为例介绍教学思路。“DreamweaverCS4应用”主要分为表格的使用、框架的使用、DIV元素的使用、文本的插入与编辑、图像的插入与编辑、超链接的插入与编辑、其他多媒体对象的插入与编辑七项主要内容。在正式讲解软件应用前,应使学生明白网页的本质是HTML代码,Dreamweaver本质是辅助设计工具,其作用是自动生成HTML代码,比如在Dreamweaver中执行插入表格的命令,就会在源文件中加入表格的HTML代码。在此后的讲课过程中,帮助学生理解操作的原理,为心智技能的建立奠定基础。以文本的插入和编辑为例,在教学中首先向学生讲解文本编辑中HTML标签<p>与<br>的作用和使用方法。然后在Dreamweaver中执行文本插入和编辑操作,并对比源文件中的代码变化。最后结合教学用例介绍文字排版的一些原则,比如长文本使用标准字号、在文本周围留出足够空间、增加文本和背景的对比度等。帮助学生建立文本编辑的心智技能,使学生在自主设计时能够编排出美观的、可读性强的文本效果。
由于网页设计与制作技术的不断发展,网页设计与制作软件不断推陈出新,作者根据多年来教学经验的总结和社会各界读者提出的建议,重新编写了该套教材。该套教材包括:《网页设计与制作教程》(第2版) 为课堂教学教材,《网页设计与制作实验指导》(第2版)为实验辅助教材,配套的多媒体教学课件可以从清华大学出版社网站免费下载。
《网页设计与制作教程》(第2版)是全面介绍网页设计与制作技术的教程,它以目前最流行的网页设计软件作为技术支持,由浅入深、系统地介绍了网页的构思、规划、制作和网站建设的全过程。全书分为三篇共11章和一个附录,涵盖了网页和网站建设的基本知识、HTML语言,以及FrontPage 2003、Dreamweaver 8、Photoshop CS2、Fireworks 8、Flash 8五个常用软件的主要知识。全书构思清晰,结构合理,内容全面系统,兼顾了入门和提高两个层次;语言简洁生动、图文并茂、实例新颖,关注了每个软件最常用、实用的部分;并特别注重对实践能力的培养。为提高教材的实用性、可操作性和可模仿性,作者巧妙地将理论学习与实践操作紧密结合在了一起。在与教程配套的《网页设计与制作实验指导》(第2版)中,共设计了6章共48个非常有代表性的实验,可以供读者上机练习使用。这两本书可以帮助初学者在较短的时间内快速掌握实用的网页设计知识和通用的网站制作方法,设计制作出自己喜爱的网站。
作者一贯主张教师要有使命感,教材要满足教与学的需求。通过多年不懈的努力,作者最终给读者呈现了一套立体化的教学方案:优秀的课堂教学教程、实用的实验指导书、精彩的多媒体教学课件。欢迎大家使用和验证。
网页设计与制作教程(第2版)
作者:杨选辉
ISBN:9787302178200
网页设计与制作实验指导(第2版)
但是,即便掌握了网页语言的使用,在高职院校网页设计课程的教学体系中,也很少涉及网站易用性、无障碍网页设计、面向用户的网页设计、网站安全等计算机科学及信息技术领域的相关知识.这往往使得网页设计脱离实际,过于追求美观与新功能而忽视用户体验,华而不实.面对如此众多的计算机科学及信息技术领域的相关知识,在选择教学内容时并不能完全覆盖,如何取舍已经成为一个影响课程教学质量的关键问题.为了使教学更适合每位学生的知识结构,必须有针对性、侧重性.本文就是在这样的背景下,提出了一种基于学生先前知识的教学内容选择方法.
1研究概述
本文针对高职院校艺术设计专业网页设计课程的教学内容及实施过程进行研究.首先介绍了测试学生网页设计先前知识的过程,然后对获得的数据进行统计分析,最后呈现基于分析结果的教学内容选择及教学实施过程.由于网页设计总是同其他学科联系在一起,所以当我们尝试创建一个功能性强、吸引力高的网站时,经常会遇到很多问题.这使得网页设计人员既要学习艺术方面的课程,如平面设计、样式和风格、绘画、色彩,又要掌握网页设计方面的课程,如网页设计工具的使用、网页界面设计及网页编程语言,与此同时还要了解像网站易用性、无障碍网页设计、面向用户的网页设计、隐私及安全等其他学科方面的扩展内容.然而,目前大多数高职院校艺术设计专业的教学计划还主要集中在网页艺术设计、网页视觉及版式设计、网页设计软件、网页语言的学习,忽视上面提到的易用性、无障碍设计等问题.这主要由于艺术设计专业课程结构所致,并不能对计算机科学及信息技术领域的相关知识做详细讲解.那么如何在有限的教学时间内,根据学生的先前知识状态,有针对性地扩展其他领域的相关教学内容便成为本文的研究重点.本文的研究基于北海艺术设计职业学院于2010年开设的一门全新的网页设计选修课程———网页客户端表现技术.课程开始前,首先要求选修该课程的学生对网页设计有初步的了解,同时喜欢设计网页,然后再进行网页设计先前知识的测试.测试包含十个相关科目的50个不同的网页设计问题.测试的结果可以帮助我们更有针对性地选择教学内容,灵活地实施教学.
1.1学生网页设计先前知识的测试过程在开设网页设计课程之前,本了一系列调研及相关文献的查阅[3,4],并对收集到的信息进行分析,总结出高职院校艺术设计专业在网页设计教学中经常忽视的十个科目.根据每个科目的相关知识,制作了一份50道题目的测试试卷,然后对选修该门课程的55个学生进行测试.他们的年龄在20~22岁之间,涉及专业包括视觉传达、多媒体技术、动漫设计、环境艺术设计,男女比例为30:25.测试结果如表1所示.下面是多数学生都回答错误的几个问题.首先是网站易用性问题.设计网站时运用一些约定成俗的设计规范(如将超链接标记成蓝色,可以使访问者快速的找到链接),这个非常重要的网站易用性问题,很多学生都不知道它的作用,如图1所示.测试结果显示:网站易用性、面向用户的网页设计、无障碍网页设计、网站安全,这四个科目的问题回答正确率相对较低,全部低于30%.由于这些内容是保证网页设计质量的关键,同时也是选修该门课程的学生最缺乏的知识,所以“网页客户端表现技术”课程需要扩展上述内容.
2基于先前知识的教学内容选择及实施过程
2.1基于先前知识的教学内容选择
根据学生的先前知识状态,有针对性地扩展计算机科学及信息技术领域内的4个相关科目内容.
(1)网站易用性:伴随着对网站用户体验的关注度普遍上升,网站易用性建设已经受到广泛的重视.一个好的网站首先要平衡目的、网页内容、虚拟因素、技术这四项基本准则.但是,由于学生缺乏易用性方面的知识,很多学生设计的网站都无法平衡网站功能和表现形式.因此,网站易用性教学就显得尤为重要.教学内容及教学重点如表2所示.
(2)面向用户的网页设计:学生在制作网页时很少分析用户需求,总是认为自己的设计很有吸引力,但是对于访问者来说,他们的设计经常过于复杂或者内容冗余无用.所以,学生应该明确他们是在为用户做开发,而非展示自己的网页技术知识.因此,有必要引入面向用户的网页设计教学.教学内容及教学重点如表3所示.
(3)无障碍网页设计:无障碍网页设计可以帮助残障人士使用网页.更确切地说,无障碍网页设计可以帮助残障人士感知、理解、浏览网页.近些年,欧美的网站已经开始系统的研究无障碍网页设计思想,而国内也开始对这方面进行研究.下面通过实例介绍无障碍网页设计特点.例如购物网站可以为商品添加颜色的冗余文字信息,以支持色盲在线购物.对于读写困难的人来说,网页中过多的动画及滚动文字会增加他们的阅读难度等.教学内容及教学重点如表4所示.
(4)网站安全:由于一个网站设计者更多地考虑满足用户应用,如何优化界面,实现业务,但很少考虑网站应用开发过程中所存在的隐患.大多数网站设计者、网站维护人员对网站安全技术了解甚少,所以有必要介绍一些网站安全技术.教学内容及教学重点如表5所示.
2.2基于先前知识的教学实施过程
(1)课程背景和目的《网页客户端表现技术》是艺术设计专业二年级学生的一门选修课.根据对企业调研的结果,发现企业承接的网站项目较多,并且企业、客户都很看重网站客户端页面的表现效果,即是否能够吸引客户挑剔的眼球.本课程就是在这样的背景下建立的.艺术设计专业学生具有良好的平面设计、样式和风格、绘画、色彩基础,这也正是网页客户端表现的基础.通过对网页设计工具、网页界面设计及网页编程语言的学习,学生可以制作出美观、大方的客户端页面.但是由于缺乏计算机科学或信息技术领域的相关知识,使得学生制作的网页脱离实际,过于追求美观而忽视用户体验.通过在教学中引入其他学科的网页设计相关知识,使学生得到全面的培养,最终满足企业对于网页客户端的设计要求.
(2)课程的教学实施过程下面是“网页客户端表现技术”课程的教学内容及实施过程,如表6所示.
1.以就业为导向的网页设计与制作课堂的教学
1.1网页设计与制作课程的内容与特点
网页版面的规划设计与制作方法是网页设计与制作主要设计的内容,在计算机应用中网页设计与制作只是其中的一个分支。学生可以通过学习网页设计与制作学会基本技能,用来进行网页美化、网页设计与网页制作。网页设计与制作作为一门课程有一定的技术性,同时它所具有的艺术性也很强,学生会因为课程丰富的内容和涉及到多方面的知识而获取生存技能,同时学生的艺术气息也会受到培养。因此学生自身要有较高的综合素质才能学习这门课程。
1.2以就业为导向的课程体系设置目标
就业是目前网页设计课程的设计导向。市场需求是这种体系的前提,课程设置以就业为先决条件,职业中所需要的技能在课程设置中都能找到相对应的内容,学生有明确的就业方向在毕业之后。课程设置决定于岗位需求,课程内容紧密联系实际需要,在就业趋势上充分体现了“能力本位”。网页设计为与市场相连接应该构建一套课程体系,课堂体系的本位应该是培养能力、主线是进行实践操作并且能够顺应经济社会的发展。这套课程体系归纳总结了网页设计师在实际中的应用,不同的模块在教学中被设立用来进行学生的训练,对于教学中的知识点学生可以通过模拟训练来熟练掌握。
2.大学文科专业开展网页设计与制作课程的必要性
当今社会已经普遍应用了计算机和互联网,各企业和单位也越来越重视自身网站的建设,因此基本的网站制作技能是每个专业的学生都应该具备的。互联网背后运作被网页设计展现在大学生面前,对于这些文科生中的很多人都是闻所未闻的。因此,文科生会或多或少的存在一些困难在网页制作的学习中。文科生与理科生相比有比较活跃的思维,对文字更善于表达。如果对于计算机技能文科生能够快速的掌握,结合自己的知识背景和现代计算机来满足市场上的各种职业要求,那么他们的就业优势在同一竞争环境中就会比较突出。所以开展网页设计与制作课程十分必要。
3.以就业为导向的大学文科网页设计与制作课程体系构建策略
3.1优化课程内容设计,引入新的教学方法
在文科占较大比重的综合性大学中,学生因专业的不同需要掌握不同的计算机技术。因此,高校应该根据不同的张扬对计算机课程进行不同的设置。理论与实践紧密相连是网页设计与制作课堂的基本特征,没有清晰的划分界限在理论与实践之间。本文提出了一些建议与意见在教学方法上用来实现教学效果的最优化。
3.1.1模拟任务法,课堂教学结合实际操作。
教师在教学活动中可以把课堂假设成工作环境,模拟演练制作任务,一边把如何操作演示给学生,一边向学生进行讲解,学生则可以边听边做。学生在这样的讲练过程中很容易被激发出兴趣,这种以学生为主的课堂可以提高学生发现问题、分析问题和解决问题的能力。
3.1.2实际案例分析法。
教师在课堂中引入典型的分类网站,为学生在课堂上做展示,对这些网站的内容分类、布局结构及技术特点进行分析讨论。通过实际案例对教材中的知识点进行解释说明,使学生的创新思维在实践教学中得到培养,团队合作能力得到锻炼。
4.项目驱动的专题教学模式创新
4.1对教学项目进行合适的选择,开发进度表的制定要细化。
优秀的教学项目对学生的积极性能起到充分的调动作用,学生会由“要我学”的学习态度逐渐转变为“我要学”。对于教学内容与实际案例的结合教师在备课时应该进行充分的考虑,选择的网络项目应该略具挑战性、有较广的覆盖范围。
4.2为了促进网页设计课程的创新引入专题教学模式。
关键词:网页设计与制作 网页与网站设计原则 教学改革
中图分类号: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%,较未实行教改前学生的设计与制作水平有了明显提高。实践证明,以“技术为设计服务”为指导思想的《网页设计与制作》课程教学改革实在可行,提高了学生网站设计与制作水平,为其以后的就业打下了良好基础。
参考文献
[1] 邵小兰.浅析网页设计中的艺术设计[J].科技资讯,2011(15):14.