8.1 网页设计概述（教案）-《实用美术基础》（高教版第5版）同步精品课堂

《实用美术基础》教案 课 题 网页设计概述 课 型 新授 课 时 授课班级 授课时间 授课教师 教材分析 网页是由多个视觉元素组合而成，多个视觉元素组合在一起需要网页设计人员去设计，网页设计是以平面设计为基础进行创意设计。本节知识点是从网页设计概述开始讲述了网页设计的内涵和原则、网页设计的视觉要素。其中网页设计的内涵和原则讲述网页设计由媒体性、数字技术性、艺术性三大内涵及多个原则。网页设计的视觉要素主要包括文字、图形图像、 色彩、网页动画、交互式视觉元素。 学情分析 通过本任务让学生学习网页设计的的内涵、原则及网页设计的视觉要素的相关的知识，本节的知识点简单易懂，学生通过书中的知识加图片，配合老师的讲解比较容易掌握相关知识点并学会运用；通过分析任务、制定方案、任务实施、任务总结，学生养成培养步步为营的良好学习习惯。本章节的内容需要让学生必须了解并理解。 学习目标 了解网页设计的内涵和原则 了解网页设计的视觉要素 学习重难点 网页设计的内涵和原则 网页设计的视觉要素 教学方法 任务引领、演示讲解、小组讨论 课前准备 教学素材 教学媒体 多媒体 教学过程 教学环节 教师活动设计 学生活动设计 设计意图 活动一： 创设情境 生成问题 1、 任务导入 问题： 1. 观察一下两张网页图片说一说同一机构的网页风格为何不同？ 分组就坐，根据问题，学生讨论回答问题 学生演示、说明 联系生活认识相关知识 活动二： 调动思维 探究新知 8.1 网页设计概述 网页设计是以平面设计为基础，顺应网络媒体传播与网页浏览的特性所产生的视觉传达创意工作。 网页设计特点： ①具有很强的视觉效果、互动性，受众面广。 ②是区别于报刊、影视的一种新媒体。 ③有传统媒体的优点，同时传播更直接、省力、有效。 网页设计与网页制作的区别： 网页设计是将策划案中的内容、网站的主题模式，结合自己的认识通过艺术的手法表现出来；网页制作是将网页设计师所设计出来的设计稿，按照规范用 html 等语言将其制作成网页格式。 网页设计具有媒体性、数字技术性、艺术性三大内涵。 首先，网页设计的载体为互联网，互联网的发展直接影响着网页设计的发展，因此，媒体性是网页设计的基本内涵。其次，网页设计具有很强的技术性， 一个完整的网页设计，往往综合了多种软件技术，这些技术的应用无不取决于网络平台的技术支持。数字技术和网络技术是网页设计的基础。最后，网页设计是科技与艺术结合的产物，是有设计目的的创造性活动，需要遵循艺术的一般规律。 在网页设计的过程中需要遵循主题明确、技术合理、个性突出、形象统一的设计原则。 1.符合受众的心理需求 是网页设计者应遵循的一项基本原则。 2.以用户需求和类别为导向明确主题。 3. 技术合理 网页设计既是艺术设计，又是技术设计。 技术合理要注意以下四个方面： ①要注意网页设计的科学性。 ②采用适当的技术表现网页的内容和形式。 ③避免滥用技术。 ④网页设计不能脱离网页浏览的技术环境。 4. 个性突出 在符合主题的前提下，具有独特的艺术风格和艺术个性的网页，具有更强的视觉冲击力， 能在众多的网页中抓住浏览者的视线，提高点击率和信息传播的效率。 5. 形象统一 形象统一是指网页的视觉印象和文化意境的整体性、 一致性（以故宫博物院官网为例，多个页面文化意境的统一使网页之间体现出一种连贯性和整体性。）。 活动三： 调动思维 探究新知 8.1.2 网页设计的视觉要素 网页是由多个视觉元素组合而成的，各视觉元素的设计效果决定了网页设计的基本风貌。 网页设计的视觉元素主要包括文字、图形图像、 色彩、网页动画、交互式视觉元素(按钮、导航条、表单) 。 1.文字编排设计 文字是网站传播信息的主要载体，在版面中占有绝大部分的空间，文字设计能对浏览者产生一定的视觉刺激，营造视觉意境，提高信息传达的效率。 网页的文字，主要包括标题文字、文本文字和图形文字。 (1)标题文字 强化标题的方法有以下几种： ①通过字号、粗细、色彩强化。 ②标题周围留出大面积的空白空间，标题会更加突出。 ③利用反差大的衬色，突出标题。 (2)文本文字 文本文字设计被大量用于正文文字和某些导航条。清晰、明确、可读性强是网页文字设计 的基本要求。文本字体最好选用计算机的系统字体，常用的是黑体和宋体。 为了避免杂乱无章，使大量的信息便于查询，可采用分组的手段安排整理文字，分组可以 通过空白、下划线和色块实现。 粗字体会给人以强而有力的印象， 体现活力与刚毅的风格。细字体显得优美，体现简练、柔美的风格。 标题文字与正文文字的大小对比，也会影响浏览者对页面的印象。对比越大，画面越活跃；对比越小则越稳重。 (3)图形文字 图形文字是将文字的含义图像化，使浏览者能够观图知意的各种文字，主要运用于标题、 文字图标、文字广告。采用图形文字可以取得更为强烈的视觉效果和丰富的页面表现形式，但图形文字的文件体积会明显增大，影响浏览速度。图形文字的创意方法主要有形象化、透叠、 组合。 2. 图形图像编排设计 网页图形图像设计最基本的原则是与网页整体协调，主次分明。图片的位置、大小、多少、 形状、色调对形成网页的整体视觉印象很重要。 3. 色彩设计 色彩是设计中最活跃、最多变的元素，能为页面增添变化和情趣，增加了页面的空间感和层次感。设计中需要掌握必要的色彩知识要从主题内容出发，理解色彩在表现主题思想上的视觉和心理感受。二是要以目标对象为主体，研究他们的心理、情感、喜好、性别、年龄、认知度、民族、 地域等因素，这些都是进行色彩设计时作出准确定位的依据。 4. 网页动画设计 网页动画主要有以下几种： (1)背景动画 (2)Logo动画 (3)悬停动画 网页动画的设计要点 ①明确的目标。 ②合适的设计风格。 ③流畅自然的动画效果。 ④使用适当的动画技术。 5. 交互式视觉元素设计 (1)按钮 按钮设计的要点： ①小巧而醒目。采用与背景对比强烈的色彩以引起注意，但要注意与页面整体协调。 ②具备导航提示的功能，提醒和指引浏览者。应编排在醒目的位置或作出明显提示。 ③采用形象化设计的方法，使按钮功能一目了然，便于信息的查找。 ④趣味化设计可以引起注意，减少视觉疲劳，增加网页的设计情趣。 (2)导航条 导航条是由多个按钮或链接图标排列形成的横条或竖条，其主要功能就是导航。导航条 一般位于页面的顶部和两侧。 导航条设计要点： ①网站的同类页面往往用同一个导航条，以便浏览者访问，实现页面风格统一。 ②导航条的内容设计很重要，科学合理的导航路线可以使浏览者方便地浏览。 ③导航条的风格设计要与整个页面协调，色彩和形状应与整个页面和谐统一。 ④导航条文字要清晰可辨，易于识别。 (3) 表 单 表单是用于信息收集和用户反馈的，表单设 计的基本原则是尽量简单。 重点知识的提问 1.网页设计的基础是（ ） A.影视制作 B.报刊编辑 C. 网络技术 D.平面设计 2.简述网页设计； 促进学生当堂记忆 贴合考纲把握知识点 活动四： 巩固练习 素质提升 1. 简述网页设计的特点； 2. 简述网页设计的内涵； 3. 简述网页设计的原则； 结合考纲让学生总结 让学生精准把握高频考点、出题方式 课堂小结 作业布置 背诵加配套练习题 板书设计 教学反思 原创精品资源学科网独家享有版权，侵权必究！ 学科网（北京）股份有限公司 $