《网页版式设计说课》由会员分享，可在线阅读，更多相关《网页版式设计说课（46页珍藏版）》请在金锄头文库上搜索。
1、网页版式设计 说课稿Web Design 一. 说课（约8分钟）1. 说教学内容 2.说教学目标 3. 说教法学法 4.说教学设计二. 教学过程节选（约7分钟）说课提纲1.内容的选取与适用性内容选取根据网页设计师工作 岗位，以完成具体工作任务为 目标，工作过程为主线，将工 作过程中核心职业能力构 建相应的支撑课程整合与 优化开发基于工作过程的 项目式课程内容。网页设计师典型工作任务模型1.教学内容1.教学内容开发项目式教学内容2.教学目标的确立及其依据根据网页版式设计工作过程中核心职业能力及职业发展迁移能力的需要2. 教学目标教法 : 项目教学、情境营造，教-学-议-做-评学法 : 任务驱动、
2、探究学习，学-思-做一体师生互动教师是学生主动建构知识、能力的帮助者、促进者主动发现问题、分析问题、解决问题3. 教法与学法3.教法与学法4. 教学设计4. 教学程序教学目标课题二：网页版式设计问题一：我们要做什么？问题二：网页版面怎样构成？问题二：如何去版式设计？问题三：网页版式设计趋势（知识拓展）二、教学过程问题一：我们要做什么?当然是一个优秀的网页版式设计作品课题：以“南京云锦”为题设计网站形象页二、教学过程优秀的网页设计是怎样做的？欣赏点击这里二、教学过程他们的网页都做了些什么？您的炒菜需要哪些主料和调料呢？问题二：网页版面构成要素二、教学过程问题二：网页版面构成要素网页与平面设计的版
3、面构成要素一样吗？为什么要这样？二、教学过程再看一次好了！不清楚吗二、教学过程网页版面构成1、信息内容2、导航系统3、浏览窗体二、教学过程二、教学过程请注意网页的信息与内容网页信息内容图形图像（含背景肌理）文字（块）富媒体rich media(包含动画、视(音)频 及其他交互性传播形式) 网页界面元素之一：视听（触）元素二、教学过程说课结束感谢各位评委专家指正！再次谢谢！网页导航系统栏目式导航隐藏式导航情境式导航3、浏览器窗体窗体尺度窗体样式(UI)窗体交互设计1、网页版式特征2、网页版式设计原则3、网页版式设计方法二、 网页版式设计原理2.1 网页版式特征. 受约束的版面尺度. 多维的呈现方
4、式. 交互式的导航系统. 由表格和Div的定位布局.受约束的版面尺度. 浏览器的标准800*600 (780*430) Pixel ,1024*768(1004*598)Pixel. 原则“宽不过一屏，竖不过三屏”. 合理控制“版面率”和Jump率. 添加适合的浏览分辨率提示.多维的呈现方式网页版式的呈现不同于报刊书籍中的平面， 不是固定不变的模式，而是动态、交互、多 维的呈现。.可用性的导航系统设计网页版式中的必须建立合理、清晰的导 航系统，方便浏览者的访问或查询，以 及关闭浏览窗体。.特殊的定位布局网页版式中的编排布局采用表格、层和框 架等方式来定位和布局，尤其DIV+CSS是 当前基于W
5、eb2.0表现层最佳的设计方式是 需要重点学习的内容。2.2 网页版面设计原则阅读性（符合信息传达的功能要求） 导向性（展现内容的顺序和层次感） 愉悦性（满足人的阅读习惯和情感需要） 创新性（具有新颖的组织形式） 统一性（采用统一的艺术风格）2.3 网页版式设计方法.网页版式视觉流程.网页版式类型. 视觉流程版式中的视觉流程是一种 “空间的运动” ，是视线随各元素在空间沿一定轨迹运动的 过程。视觉流程需要确立视觉中心，将版面 中的元素按照一定的顺序进行主次安排，形 成视觉上的层次感。通俗的说，视觉流程就是有目的地引导浏览 者首先看什么，然后看什么，最后看什么。根据阅读习惯确立视觉中心画面的中部
6、图形容易成为视觉中心。画面中大面积的图形容易成为视觉中心。多与少等对比强的因素容易成为视觉中心。画面中三个以上图形中的特异形或完整形容易成为视觉中心。根据阅读习惯确立视觉流程从整体局部，并停留在局部；从上部下部；从左边右边；从大小；视线的流动是有趣的，编排设计完全可以左右人们的视线： 水平线诱使人们的视线左右移动； 垂直线则使视线上下流动； 倾斜线因有不安定的感觉，往往更吸引视觉。 相同的基本形，做两次以上的连续排列时，视线更自然地流去， 相同的图形如果按大小排列时，视觉的流动会更自如，具有方向性根据阅读习惯确立视觉流程单向视觉流程曲线视觉流程重心视觉流程导向视觉流程散点视觉流程最佳视域. 常见版式的视觉流程单项视觉流程曲线视觉流程散点视觉流程最佳视域导向视觉流程. 常见网页版式类型平衡布局律动布局出血布局焦点布局对称布局分割布局散点布局调和布局自由布局.网页版式设计发展趋势. 简约化. 个性化。 . 符号化. 多维空间 小结本章主要讲解网站规划与创意 设计中以及网页中的版式设计方法练习课题请大家用自己已经具备的知识和能 力对优秀的网页设计作品加以模仿，完 成一个页面的制作。软件：PhotoShop 完成：课堂时间
