数字媒体艺术专业《网页设计》课程教学大纲

本科课程教学大纲（理论课）一、课程基本信息课程名称（中文）网页设计（英文）WebsiteDesign课程代码2040149课程学分4课程学时64理论学时32实践学时32开课学院艺术设计学院适用专业与年级数字媒体艺术专业二年级课程类别与性质专业必修课考核方式考查选用教材《完美网页的视觉设计法则》，贾森·贝尔德，978-7-121-14202-4，电子工业出版社，2011.11第一版是否为马工程教材否先修课程人机界面设计2040215（4），图标设计(1)2040650（2）课程简介互联网已经深深融入人们的日常生活、工作中。作为万维网（WWW）技术具象化的网页是普通用户接触互联网信息的一个重要而基础的媒介，是浏览器/服务器系统架构的前端表现，在信息架构与交互方式上有其独特性。本课程主要介绍网页作为网络前端（Front-ends）的视觉设计基本方法。课程首先从学习基础、技术基础、观念基础三个方面来切入主题，然后通过多个设计实践环节，包括页面分析，页面表现技法，页面布局设计，页面原型设计等内容，使学生初步掌握网页设计的方法；再通过课程设计，从理解课题、创意设计，到信息设计、视觉设计、原型设计，到提案制作，通过全流程的制作，使学生对网页设计的过程有全面的理解。通过本课程的学习，使学生能够从专业视角解析网页，理解网页结构与元素，并独立进行初步的常规网页设计与原型制作。选课建议与学习要求本课程适合数字媒体艺术专业、视觉传达设计专业或者其他设计类专业的二年级以上的学生学习，要求学生具备较丰富的互联网使用经验，较熟练掌握AdobePhotoshop，AdobeIllustrator等软件的基本绘图技巧，具备一定的版式设计能力。

二、课程目标与毕业要求（一）课程目标类型序号内容知识目标1理解网页设计理论2进一步理解跨地域的设计风格技能目标3能进行网页分析4能进行网页各层次的原型设计5能制作设计提案报告材料素养目标(含课程思政目标)6进一步理解数字设计审美特点7具备数字版权意识，在设计实践中能够遵守设计规范8具备自主学习的意识与能力（二）课程支撑的毕业要求LO1拥护中国共产党的领导，坚定理想信念，自觉涵养和积极弘扬社会主义核心价值观，增强政治认同、厚植家国情怀、遵守法律法规、传承雷锋精神，践行“感恩、回报、爱心、责任”八字校训，积极服务他人、服务社会、诚信尽责、爱岗敬业。②遵纪守法，增强法律意识，培养法律思维，自觉遵守法律法规、校纪校规。LO2具有人文科学素养，具备从事某项工作或专业的理论知识、实践能力。⑤能够为数字媒体产品的界面与内容提供设计支持。网络与多媒体方向能够为产品与品牌形象的维护、营销活动等需求提供设计支持；游戏与美术设计方向需具备游戏原画的设计能力、游戏角色动画设计、特效设计、游戏界面设计能力。LO4能根据环境需要确定自己的学习目标，并主动地通过搜集信息、分析信息、讨论、实践、质疑、创造等方法来实现学习目标。②能搜集、获取达到目标所需要的学习资源，实施学习计划、反思学习计划、持续改进，达到学习目标。LO5健康发展：懂得审美、热爱劳动、为人热忱、身心健康、耐挫折，具有可持续发展的能力。③懂得审美，有发现美、感受美、鉴赏美、评价美、创造美的能力。LO8国际视野：具有基本的外语表达沟通能力与跨文化理解能力，有国际竞争与合作的意识。②理解其他国家历史文化，有跨文化交流能力。（三）毕业要求与课程目标的关系毕业要求指标点支撑度课程目标对指标点的贡献度LO1②M7.具备数字版权意识，在设计实践中能够遵守设计规范100%LO2⑤H1.理解网页设计理论20%3.能进行网页分析15%4.能进行网页各层次的原型设计50%5.能制作设计提案报告材料15%LO4②M8.具备自主学习的意识与能力100%LO5③M6.进一步理解数字设计审美特点100%LO8②M2.进一步理解跨地域的设计风格100%三、课程内容与教学设计（一）各教学单元预期学习成果与教学内容1.网页分析预期教学成果：知晓互联网、浏览器、网站的基本知识；知晓网页设计的基本概念与所用工具；知晓网站与网页的基本类型，知晓网页设计的演变过程。能对跨地域网页设计的异同点进行分析、评价。能进行网页分析，包括：通过各种技术手段收集网站基本信息、分析网页的网格系统、结构与内容以及整体与局部尺寸；根据网站结构绘制页面框架图；分析页面中的设计元素的使用情况，辨析页面框架（frame）与其中的素材；总结网站功能、交互方式与设计特点，总结浏览体验。能进行初步的网页设计绘图：熟悉完整的绘制过程；能进行图案的绘制；能进行对象的精确创建与编辑；能使用智能对象、形状图层与蒙版等非破坏性编辑的方法；能根据设计进行色彩的选择与调制；能使用多种网页细节表现；学习难点：从零散的尺寸中归纳出元素尺寸与间距的规律，并通过测量出的尺寸进行网页框架的绘制。把握网页绘制过程中的像素级别的细节；套用960gs模版；区别网页主体与背景。2.登录页面设计预期教学成果：理解网页布局的基础理论：常见的固定网页布局方式与自适应布局方式；网页栅格系统的基本结构；960gs的结构；理解设计模式（DesignPattern）的概念，知晓几种常见的设计模式；理解网页设中的设计规范能运用网页设计理论进行根据课题要求进行网页设计：运用960gs栅格系统进行网页布局；在页面设计中根据课题要求灵活应用素材；在页面设计中应用表单（3.2）；在页面设计中运用平面设计的四种设计原则：对齐（Alignment）、对比（Contrast）、重复（Repetition）、相似（Proximity）；能制作网页设计线框图的技法、能制作网页设计高保真原型，能初步制作可交互设计原型；能初步制作自适应页面。学习难点：理解并能够运用表单，能够正确表单的结构，并且能够初步考虑表单设计中的用户体验；合理运用960gs栅格系统；能够区分桌面端与移动端网页的区别。3.公益性主题网页设计预期教学成果：理解网页设计的流程、知道网页设计的常见风格；能根据课题设计要求理解设计主题；能够进行契合公益主题的设计演绎；能进行网页中几种常见设计元素（logo、favicon、icon、header、footer）的设计；能进行网站导航的设计；能进行网页banner的设计；能进行纸面原型的制作；能使用栅格系统进行多栏网页布局；在设计中能妥善处理界面框架、布局、元素、文字、色彩、质感等设计要素；能够运用网页设计中的设计规范进行设计。能在设计软件中输出图片素材；能使用原型制作软件制作可以交互设计模式（menu，tabs，slideshow）；能够制作素材与参考图版权自查清单；难点：根据设计简报归纳出设计要点，归纳或者补全设计内容；能根据设计内容选择合适的设计模式的表现形式。4.设计提案预期教学成果：知道设计提案的主要内容与方法，知道设计成果物提交规范；能制作网页mockup，能进行版面编排；能进行设计说明写作；能进行口头表述设计作品创意、创作过程；能根据预定的设计目标对设计进行设计评价；难点：把握设计排版的美观性；使用Axure制作完整的页面；在设计评价中能归纳设计作品的优点与不足。（二）教学单元对课程目标的支撑关系课程目标教学单元123456781.网页分析√√√√2.登录页面设计√√√3.公益性主题网页设计√√√4.设计提案√√（三）课程教学方法与学时分配教学单元教与学方式考核方式学时分配理论实践小计1.网页分析教师案例分析、演示操作；学生实践、教师辅导分析报告4482.登录页面设计教师案例分析、演示操作；学生实践、教师辅导设计作品88163.公益性主题网页设计教师案例分析、演示操作；学生实践、教师辅导设计作品1616324.设计提案教师案例分析、演示操作；学生实践、教师辅导报告、视频448合计323264（四）课内实验项目与基本要求序号实验项目名称目标要求与主要内容实验时数实验类型1网页分析根据选题进行网页截图、信息收集与分析总结、并制作展板2④2网页绘制根据教程进行网页绘制技能的训练2②3登录页面设计根据要求进行登录页面设计，包括桌面端与移动端6③4原型设计应用熟悉界面；网格系统的设置；元素制作；使用母板；制作网页背景；制作Menu；制作Tabs；制作Slideshow；制作Lightbox；网页发布2③5主题网页设计在理解设计需求的基础上，进行网站中各个页面的视觉设计，并使用原型制作软件完成原型制作。16③6设计提案进行项目提案简报的设计，内容包括课题要求，设计方案说明，设计细节说明以及网页原型展示4④实验类型：①演示型②验证型③设计型④综合型四、课程思政教学设计《网页设计》是数字媒体艺术专业的一门核心课程。本门课程的课程思政设计基于OBE理念，对应八项能力中的LO1-2“遵纪守法”。在“网页设计”课程思政教学设计旨在通过技术教育与价值引领的有机结合，引导学生树立正确的世界观、人生观和价值观。具体设计原则如下：坚持党的领导，弘扬社会主义核心价值观，将爱国情怀和家国情怀融入课程教学中。强化法律意识，培养学生自觉遵守法律法规、校纪校规的良好习惯。结合课程内容，践行“感恩、回报、爱心、责任”八字校训，引导学生积极服务他人、服务社会；培养学生的诚信尽责和爱岗敬业精神，提高职业素养和专业技能，其中重点是具备数字版权意识，在设计实践中能够遵守设计规范。在具体教学环节中课程思政设计要点：一、网页分析：引导学生分析国内优秀网站，感受中国特色和社会主义核心价值观在网页设计中的体现，增强民族自豪感和文化自信。通过分析国内外网页设计的异同点，培养学生的国际视野和跨文化交流能力。强调在网页设计中遵守国家互联网法律法规的重要性，引导学生树立正确的网络道德观念。二、登录页面设计：结合960gs栅格系统的教学，引导学生理解并应用国家标准和规范，培养学生的规范意识和严谨作风。在设计表单时，注重用户体验和人文关怀，引导学生关注用户需求，培养服务意识和社会责任感。通过桌面端与移动端网页设计的比较，引导学生关注科技发展对国家和社会的影响，增强科技报国的使命感。三、公益性主题网页设计：强调公益性主题网页设计的社会意义和价值，引导学生树立正确的价值导向和公益意识。在设计中注重运用中国传统文化元素，弘扬中华优秀传统文化，增强学生的文化自信和民族自豪感。引导学生关注弱势群体和社会问题，通过设计传递爱心和正能量，践行社会责任。四、设计提案：通过设计提案的实践，培养学生的