8.2,8.3,8.4 网页设计（教案）-《实用美术基础》（高教版第5版）同步精品课堂

《实用美术基础》教案 课 题 网页的视觉流程、网页的版式设计、网页设计流程 课 型 新授 课 时 授课班级 授课时间 授课教师 教材分析 网页是在电子屏幕显示，显示的网页需要设计本节知识点讲述了网页的视觉流程、网页的版式设计、网站设计流程。其中网页的视觉流程简述了视觉流程的规划与类型；网页的版式设计讲述了框架式分割、自由式分割；网站设计流程讲述了怎么去分析客户的需求、怎样制订策划方案、网站怎么去实施等。 学情分析 通过本任务让学生学习网页设计的视觉流程、版式设计及网页设计流程的相关的知识，本节的知识点简单易懂，学生通过书中的知识加图片，配合老师的讲解比较容易掌握相关知识点并学会运用；通过分析任务、制定方案、任务实施、任务总结，学生养成培养步步为营的良好学习习惯。本章节的内容需要让学生必须了解并理解。 学习目标 了解网页的视觉流程 了解网页的版式设计 了解网站设计流程 学习重难点 网页的视觉流程 网页的版式设计 网站设计流程 教学方法 任务引领、演示讲解、小组讨论 课前准备 教学素材 教学媒体 多媒体 教学过程 教学环节 教师活动设计 学生活动设计 设计意图 活动一： 创设情境 生成问题 1、 任务导入 问题： 1. 回顾常用的构图法则？ 分组就坐，根据问题，学生讨论回答问题 学生回答、说明 联系生活认识相关知识 活动二： 调动思维 探究新知 8.2.1 视觉流程的规划 视觉流程是视线浏览页面的移动过程。视觉运动的规律是：一条垂直线在页面上，会引导视线做上下的视觉移动；水平线会引导视线做左右的视觉移动；斜线比垂直线、水平线有更强的视觉诉求力；矩形的视线移动是向四方发射的；圆形的视线移动是辐射状的；三角形则随着顶角的方向使视线产生移动；各种图形从大到小逐个排列时，视线 会强烈地按照排列方向移动。 视觉流程中视觉的流动线极为重要，这条贯穿于页面的主线，引导用户浏览。上部给人轻快、漂浮、积极、高昂之感；下部给人压抑、沉重、限制、稳定的印象；左侧，感觉轻便、自由、舒展，富有活力；右侧，感觉局促却显得庄重。网页中最重要的信息，应安排在注目率最高的页面位置，这个位置便是页面的最佳视域。 设计时可以把重要信息放在页面的左上角或页面顶部。 8.2.2 视觉流程的类型 视觉流程的类型主要分为线形视觉流程和焦点视觉流程。 线形视觉流程 线形视觉流程分为直线视觉流程和曲线视觉流程两类。 (1)直线视觉流程 使页面的流动线更为简明，主题内容诉求明确，有简洁而强烈的视觉效果。直线视觉流程表现为三种形式： 竖向视觉流程：给人坚定、直观的感觉。 横向视觉流程：有稳定、恬静之感。 斜向视觉流程：以不稳定的动势引起注意。 2)曲线视觉流程 曲线视觉流程是由视觉要素随弧线或回旋线运动而形成的。它不如直线视觉流程直接简 明，但更具流畅的美感。曲线视觉流程的形式微妙而复杂，可概括为两种形式： 弧线形(C形)视觉流程：有扩张感和方向感。 回旋形(S形)视觉流程：两个相反的弧线产生回旋，在平面中增加深度和动感。 2.焦点视觉流程 焦点是指视觉心理的焦点。每个页面中都有一个视觉焦点，这是设计的重点。焦点是否突出和页面版式编排、图文的位置、色彩的运用有关。 视觉焦点的倾向与力度对视线起诱导作用。通常以鲜明的形象或文字占据页面某个位置 或完全充斥整体版面，可以集中浏览者的视线，确立视觉心理上的焦点。视觉流程中突出焦点的形式包括以下几点 ： 按照主从关系的顺序，使放大的主题形象成为视觉焦点，以此来表达主题思想； 将文字整体编排，突出主题形象； 在主题形象四周增加空白，使之成为视觉焦点； 向心、离心的视觉运动。 活动三： 调动思维 探究新知 8.3 网页的版式设计 定义： 网页的版式设计是指将网页的视觉要素(文字、图像、图表、表单等)按一定的艺术规律组织和布局，形成整体的视觉印象，最终实现有效传递信息的视觉设计。 作用： 网页的版式在整个网页中具有重要的作用，它决定了网页的艺术风格和个性特征，并影响着网页之间导航的方向性，起到吸引浏览者阅读、增强网页内容表达效果的作用。 8.3.1 框架式分割 定义： 框架式分割是一种理性的分割形式，是指利用各种不同的方形框架对网页进行分割。框 架式分割适用于信息量大的站点设计。 框架样式几种形式： ①两端均齐式：被纳入不同的方形框架中的文字、图形排列从左端到右端的长度均齐，形成方方正正的面。这种布局使版面效果端正、严谨、美观，文字信息量大，版面空间利用率高， 是门户网站和商业网站常用的样式。 框架样式几种形式： ②单侧对齐式：左对齐或右对齐使行首或行尾自然形成一条清晰的垂直线，很容易与图形 配合。这种编排方式有松有紧，有虚有实，跳动而飘逸，产生富有节奏与韵律的形式美感 左对齐符合人们阅读时的习惯，显得自然；右对齐因不太符合阅读习 惯而较少采用，但显得新颖。 8.3.2 自由式分割 自由式分割常见几种形式： 全景式：多张小图片分散地均匀排列着，视线可以从多角度进入页面，产生开放的轻松感。全景式布局的特点是图片数量不能过少，图片不能过大。 卫星式：小的图标环绕主图均匀展开，稳定与开放感并存。 满版式：以图像充满整个版面。各种视觉要素在图像上自由编排，与图像紧密结合，形成协调统一的关系。 8.4 网站设计流程 网站设计是软件应用工程，涉及项目管理、页面设计、程序设计、网站测试、资 料收集和文档编辑等多方面的工作，需要不同的人员分工合作才能完成。网站的设计过程大 致可分为客户需求分析、制订策划方案、项目实施三个阶段。 8.4.1 客户需求分析 1. 总体设计 根据客户需求对项目进行整体设计，制订一份规划说明书，网站开发内容包括网站的栏 目和版块、网站的功能和相应的程序等。 2. 策划方案 策划方案要详细说明网站的主题和定位、网站建设计划和合理的建设步骤， 一般包括以下 几部分内容：前言、背景分析、目标分析与网站定位、网站建设内容与结构、技术说明、进度表、后期支持、费用明细。 3.资料收集和编辑 包括图片搜集、拍摄与制作；音视频搜集与制作；文字资料的编辑。 8.4.3 项目实施 1.整体形象的设计 设计网站的整体视觉形象和首页。整体形象包括标准字、标志、标准色、广告语等。首页设计包括版面、 色彩、图像、动态效果、图标等设计，也包括广告条、菜单、标题、版权说明等模块设计。首页设 计一般设计1~3个设计草图供客户选择，客户确定首页的主体风格后，就可以进入开发制作了。 2.开发制作 这一阶段程序员要和网页设计师同时进入开发阶段，两者之间的协调和沟通可以保证开 发工作的顺利进行。 3.系统测试 网站完成后，将网站文件上传到服务器空间，测试速度、兼容性、交互性、链接，记录测试中 出现的问题并解决。 4.后期维护 网站测试合格后，后期还要进行内容更新和维护、响应反馈信息、推广网站等。 重点知识的提问 1.以下选项中关于视觉流程的定义是正确的是（ ） A.视线浏览页面的移动过程 B.页面的排版布局 C.页面的交互功能 D.页面的色彩搭配 2.视觉流程的有那些类型 促进学生当堂记忆 贴合考纲把握知识点 活动四： 巩固练习 素质提升 1.视觉流程的有那些类型； 2.简述曲线视觉流程的形式； 3.简述视觉流程中突出焦点的形式； 结合考纲让学生总结 让学生精准把握高频考点、出题方式 课堂小结 作业布置 背诵加配套练习题 板书设计 教学反思 原创精品资源学科网独家享有版权，侵权必究！ 学科网（北京）股份有限公司 $