版面设计
字体艺术在平面广告中的使用已经成为品牌宣传和营销的重要组成部分，如果正确、适当地运用字体，不仅能有效地传达信息，还可以提高公司的品牌价值。这里介绍一些创意广告，充满创造力的字体给广告增色不少。
13种典型网页版式设计介绍 一、骨骼型 骨骼型是一种规范的理性的分割方法。常见的骨骼有竖向通栏、双栏、三栏、四栏和横向通栏、双栏、三栏和四栏等。一般以竖向分栏为多。在图片和文字的编排上则严格按照骨骼比例进行编排配置，给人以严谨、和谐、理性的美。骨骼经过相互混合后的版式，既理性、条理，又活泼而具弹性。二、满版型 版面以图象充满整版，主要以图象为诉求，视觉传达直观而强烈。文字的配置压置在上下、左右或中部的图象上。满版型给人以大方、舒展的感觉，是商品广告常用的形式。 三、上下分割型 把整个版面分为上下两个部分，在上半部或下半部配置图片，另一部分则配置文案。配置有图片的部分感性而有活力，而文案部分则理性而静止。上下部分配置的图片可以是一幅或多幅。 四、左右分割型 把整个版面分割为左右两个部分，分别在左或右配置文案。当左右两部分形成强弱对比时，则造成视觉心理的不平衡。这仅仅是视觉习惯上的问题，也自然不如上下分割的视觉流程自然。不过，倘若将分割线虚化处理，或用文字进行
左右重复或穿插。 左右图文则变得自然和谐。 五、中轴型 将图形做水平或垂直方向的排列，文案以上下或左右配置。水平排列的版面给人稳定、安静、和平与含蓄之感。垂直排列的版面给人强烈的动感。 六、曲线型 图片或文字在版面结构上作曲线的编排构成，产生节奏和韵律。 七、倾斜型 版面主体形象或多幅图版做倾斜编排，造成版面强烈的动感和不稳定因素，引人注目。 八、对称型 对称的版式给人稳定、庄重理性的感觉。对称有绝对对称和相对对称。一般多采用相对对称。以避免过于严谨。对称一般以左右对称居多。 九、中心型 重心有三种楷念。1、直接以独立而轮廓分明的形象占据版 面中心。2、向心：视觉元素向版面中心聚拢的运动。3、离心：犹如将石子投入水中，产生一圈圈向外扩散的弧线运动。重心型版式产生视觉焦点，使强烈而突出。
网页设计规范 网页设计标准尺寸: 1、800*600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。 2、1024*768下，网页宽度保持在1002以内，如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。(在dw里面有设定好的标准值,1024*768页面的标准大小是955*600,照着它的尺寸做就行了) 3、在ps里面做网页可以在800*600状态下显示全屏，页面的下方又不会出现滑动条，尺寸为740*560左右 4、在PS里做的图到了网上就不一样了，颜色等等方面，因为ＷＥＢ上面只用到 ２５６ＷＥＢ安全色，而ＰＳ中的ＲＧＢ或者ＣＭＹＫ以及ＬＡＢ或者ＨＳＢ的色域很宽颜色范围很广，所以自然会有失色的现象. 页面标准按800*600分辨率制作，实际尺寸为778*434px 页面长度原则上不超过3屏，宽度不超过1屏 每个标准页面为A4幅面大小，即8.5X11英寸 全尺寸banner为468*60px，半尺寸banner为234*60px，小banner为88*31px 另外120*90，120*60也是小图标的标准尺寸 每个非首页静态页面含图片字节不超过60K，全尺寸banner不超过14K 标准网页广告尺寸规格 1、120*120，这种广告规格适用于产品或新闻照片展示。 2、120*60，这种广告规格主要用于做LOGO使用。 3、120*90，主要应用于产品演示或大型LOGO。
4、125*125，这种规格适于表现照片效果的图像广告。 5、234*60，这种规格适用于框架或左右形式主页的广告链接。 6、392*72，主要用于有较多图片展示的广告条，用于页眉或页脚。 7、468*60，应用最为广泛的广告条尺寸，用于页眉或页脚。 8、88*31，主要用于网页链接，或网站小型LOGO。 网页中的广告尺寸 1、首页右上，尺寸120*60 2、首页顶部通栏，尺寸468*60 3、首页顶部通栏，尺寸760*60 4、首页中部通栏，尺寸580*60 5、内页顶部通栏，尺寸468*60 6、内页顶部通栏，尺寸760*60
版式设计学习心得 导读：我根据大家的需要整理了一份关于《版式设计学习心得》的内容，具体内容：学习了版式设计的课程后，怎样写好学习心得体会呢?下面我收集了体会的范文，希望对你有帮助篇一在没有学习版式设计之前，我完全不知道一本杂志，或者一张海报的设计有这么多讲...学习了版式设计的课程后，怎样写好学习心得体会呢?下面我收集了体会的范文，希望对你有帮助 篇一 在没有学习版式设计之前，我完全不知道一本杂志，或者一张海报的设计有这么多讲究，还以为只要把元素都摆上去看着舒服就行。我记忆最深的两个大的概念是一开始老师说的黑白灰层次和分栏线。版式设计和素描一样要分出黑白灰，同时不同等级的信息还要分成不同等级的灰，这样画面才会层次丰富。分栏线是相对理性的概念，在版式设计中至关重要，信息元素要按栏线排放才会井然有序，不会给人杂乱无章的感觉。这是我需要加强学习的方面。 在版式设计中有几大原则，一是整体性原则，二是简洁性原则，三是重复原则。任何版面都要注重整体，同时也不能忽略细节，细节体现品质。老师经常提到的一点很重要的是不能为了形式而形式，形式是服务于功能的，不要为了形式而忽略功能，要实现美观与功能的统一。 在学习中发现了很多问题，首先第一大问题就是软件操作不熟悉，
这点需要我们在以后的学习中加强。二是整体的观念不够强，容易出现杂或散的画面，这也要在以后的学习中多加注意，多分析好的作品。三是细节关注度不够，经常容易忽略细节，要多加注意。 设计的时候，如果设计者随意地进行处理而不考虑当中的原则方法及对象规律的话，那么很多时候都会出现一些不太好的结果。虽然感性是一种相当重要的因素，设计中一定要带有情感，但并不代表简单地依靠情感就能做出好的设计。相反，如果设计的时 候能够考虑到各方面的因素并运用恰当的方法的话，那么作品将更加得体和出色。在网页设计中，版式设计占的比重非常大，可以说版式的好坏直接决定页面的成败，也可以说它是网页视觉识别的基础。那么在具体视觉设计的时候，版式上有哪些原则及方法的? 为设计对象建立一个合适的网格。排版网格是由一些垂直和水平的线构成的结构，可以用来帮助内容结构化，它能够让对象产生秩序感。有些人说网格太过于呆板，影响设计创意，我个人觉得可以把网格当做一个整体大的框架，也可以作为设计师组织文字、图片的支架，它相当于是设计的基础，没有好的基础怎么能够谈得上出色的设计呢?所以网格不仅不影响创意的发挥，反而能使设计师思路得到理性地梳理。网格地使用，能较好地解决设计师关于页面中各元素定位的问题，在这基础之下可以做科学的精准的版式的规划。同时使用网格也是一个令您的设计变得高效的方法之一，在把草图转化为设计稿的过程中，在版式方面主要的难点是如何精确地安排各个元素，如果这时候呢够选择合适的网格进行设计，那么这个起点的意义是不可小看的。
《word图文混排》教学设计
————————————————————————————————作者：————————————————————————————————日期：
《WORD图文混排》教学设计 教学目标： 知识目标： 掌握插入、编辑图片，设置图文环绕，熟练运用word软件进行文档版面设计。 能力目标： １、会应用word的图文混排制作简单的贺卡、宣传单、电子手抄报等。 2、培养学生对图文混排作品的评价能力、实践操作能力。 3、培养学生在练习中的分工合作能力、组织能力。 情感目标： 通过师生的相互交流和团队的协作学习，感受探索的过程，培养学生实践能力和鉴赏能力，进一步激发学生学习计算机的兴趣。 教学重难点： 教学重点：掌握插入和编辑图片，实现图文混排。 教学难点：对图片和文字进行格式和布局的排版设计方法。 教学方法 演示法、任务驱动法、讲练结合法、分组探究法、展示评价法教学课时： 1课时 教学准备 软件：WORD2003、教学案例素材，多媒体课件
硬件：网络教室、多媒体教学软件（伽卡他卡电子教室教师端及学生端） 教学内容的组织与呈现方式 利用网络教室展示几幅图文并茂的文档，学生能过鉴赏，评价值得学习的地方，引起学生的学习兴趣，激发学生的求知欲望。再由教师演示并简单讲解插入、编辑图片的方法，为学生的自主学习扫除障碍。然后引导学生自主学习设置文字环绕方式等知识点。最终要求学生利用准备好的素材和网络中的资源，共同合作编排出图文并茂的作品。接着通过展示优秀作品，能过鉴别评价每个学生投票选出优秀的课堂作品，学生有一种成就感，进一步激发全体学生的学习兴趣，调动学生的学习积极性。最后通过总结培养学生审美评价能力和实践操作能力。 二、教学过程 1、导入 （1）通过课件展示三幅作品,引导学生观察。 （2）引导学生进行评价鉴赏。（你认为这三件WORD作品好在什么地方？如果给你做，你能做出来吗？认真学习这节课，老师相信你们都能制作，并且还能做得更好呢。）以美激趣，唤起学生探究的意愿，激发学生创作的欲望。重点运用学生对优秀作品评价和教师语言激励评价。 2、展示教学目标：课件展示，明确学习目标。 3、教学内容
第十节课:图文混排 图文混排 1. 学会调整艺术字. 2.知道调整控制点的作用 3.熟悉艺术字工具栏中工具按钮的功能及使用方法 4、学会图形的组合方法 编辑修改艺术字 讲演辅结合 初二（1、2、3、4、5、6） 2009年6月18日星期五 认知操作 一. 复习提问 艺术字如何插入 二、新授
(首先展示精美的倒“福”字并提问其含义) 提问：在Word中利用所学过的对正文文字的编辑方法能制作出倒“福” 字吗？在Word中倒“福”字是如何编辑出来的？ <引导学生分析任务：⑴此作品由哪几部分组成？⑵用什么方法制作倒“福”字？⑶用什么方法制作菱形？⑷如何形成最终作品？这样就自然而然地把大任务分解成了四个子任务：> 任务1 动手操作，插入艺术字“福” 1、启动应用程序从开始菜单程序的子菜单启动Microsoft word2003软件，出现该应用程序的启动画面。 2、在绘图工具栏中点击A，在弹出的对话框中,选择艺术字效果后点确定. 3、然后输入”福”字确定。 4、点击”福”字，周围出现八个控制点，拖动改变大小。 任务2 修改艺术字“福”到满意的倒“福”字效果 5、点艺术字工具栏上的“文字环绕方式”选择浮于文字上方。 6、点击”福”字，按“旋转”控制点，使福字倒立。 7、修改”福”字效果。 任务3 绘制及编辑正菱形 8、点击绘图工具栏->自选图形->基本形状下的菱形，按SHIFT键画出菱形。 9、编辑菱形到满意效果。 任务4 实现最终效果 10、调整正菱形与倒“福”字的位置、叠放次序并组合成一体。 三、提高训练
制作禁止停车标志 四、小结： 一、开机 二、登录 三、启动word 四、制作“福”倒艺术字。 五、保存文件。 六、关机 学生对艺术字兴趣很浓,掌握程度非常高。
原始图：（红色边框是我加上的，为了标示边界）.这张图背景是白色的。 图文混排的三个效果： A ：嵌入型 B ：四周型 C ：紧密型（需要先把图片的背景色变为透明） 9月26日下午，学校召开三十年教（工）龄教职工表彰慰问暨座谈会。副校长邱运华、人事处处长佟庆伟、工会常务副主席于丽萍以及2013年满三十年教（工）龄的教职工50多人出席会议。会议由校工会常务副主席于丽萍主持。 人事处处长佟庆伟宣读了2013年满三十年教（工）龄教职工表彰名单。随后，邱运华副校长、佟庆伟处长、于丽萍常务副主席为受表彰的教职工送上了一份温馨的慰问品。 副校长邱运华在讲话中代表学校党委和行政对满三十年教（工）龄 的教职工致以节日的问候和崇高的敬意，感谢他们为学校改 革发展作出的重要贡献。他说，在座各位老师，在这三十年里，勤勤恳恳、兢兢业业地为学校的发展付 出了辛勤的汗水和美好的青春年华，学校将永远 铭记 老师们为学校发展 作出的积极贡献。随后，他和老师们一起分享了学校这些年蓬勃发的可喜成绩。他说，当前学校正在开展以为民务实清廉为主要内容的党的群众路线教育实践活动，学校党委和行政虚心听取全校方方面面的意见建议，先后召开了各类座谈会12个，梳理了意见建议1300余条，他表示学校将认认真真地对待来自群众的每一条建议，努力作好整改落实工作，给老师们一个满意的答复。 历史学院郗志群、教育学院李新旺、科 教服务中心胡建柱、后勤集团东校区服务中心郅文联等4位教师代表先后发言。他们回顾了30 年的工作历程，和大家分享了30年来的美好回忆，表达了对学校的热爱和感激之情，并表示 要再接再励，为学校新的发展作出更大的贡献。 B A C
《WORD图文混排》 一、课题：《WORD图文混排》 二、教学目标： 知识目标： 掌握插入、编辑图片，设置图文环绕，熟练运用word软件进行文档版面设计。 能力目标： １、会应用word的图文混排制作简单的贺卡、宣传单、电子手抄报等。 2、培养学生对图文混排作品的评价能力、实践操作能力。 3、培养学生在练习中的分工合作能力、组织能力能力。 情感目标： 通过师生的相互交流和团队的协作学习，感受探索的过程，培养学生实践能力和鉴赏能力，进一步激发学生学习计算机的兴趣。 三、重难点： 教学重点：掌握插入和编辑图片，实现图文混排。 教学难点：对图片和文字进行格式和布局的排版设计方法。 四、教学方法 演示法、任务驱动法、讲练结合法、分组探究法、展示评价法 五、课时安排 1课时 六、教学准备
软件：WORD2003 七、教学内容的组织与呈现方式 利用网络教室展示几幅图文并茂的文档，学生能过鉴赏，评价值得学习的地方，引起学生的学习兴趣，激发学生的求知欲望。再由教师演示并简单讲解插入、编辑图片的方法，为学生的自主学习扫除障碍。然后引导学生自主学习设置文字环绕方式等知识点。最终要求学生利用准备好的素材和网络中的资源，共同合作编排出图文并茂的作品。接着通过展示优秀作品，能过鉴别评价每个学生投票选出优秀的课堂作品，学生有一种成就感，进一步激发全体学生的学习兴趣，调动学生的学习积极性。最后通过总结培养学生审美评价能力和实践操作能力。 八、教学过程 1、导入 （1）通过对比展示三幅作品,引导学生观察。 （2）引导学生进行评价鉴赏。（你认为这三件WORD作品好在什么地方？如果给你做，你能做出来吗？认真学习这节课，老师相信你们都能制作，并且还能做得更好呢。）以美激趣，唤起学生探究的意愿，激发学生创作的欲望。 重点运用学生对优秀作品评价和教师语言激励评价。 2、教学内容 （一）插入、编辑图片 （课件展示,教师演示、讲解并指导学生学会操作的方法，学生自评：我学会了吗？）。 （1）图片的插入：执行“插入/图片/来自文件”命令，选择路径，选择图片，单ft“插入”按钮。
word图文混排教学实例 初中信息技术《图文混排》课堂教学实录 案例主题:Word《图文混排》 地点:多媒体计算机教室 时间:45分钟 课型:新授课 [案例描述] 学生学情分析: 我所教授的班级七年级新入学不久的新生，从年龄特点来看,七年级学生好动,好奇,好表现,应采用形象生动,形式多样的教学方法和学生广泛的,积极主动参与的学习方式,去激发学生学习的兴趣.生理上,学生好动,注意力易分散,爱发表见解,希望得到老师的表扬,所以在教学中应抓住学生这一特点,发挥学生的主动积极性.从学生认知特点和已有的认知经验及能力水平出发，教师只有采用任务驱动法，并结合演示法、分层指导法、讨论等教法，通过选取适合七年级学生特点的综合案例，结合实际教学流程，才能使学生真正掌握图文混排的操作技巧。 教学目标: 知识与技能目标: 1、掌握在WORD文档中插入图片、艺术字、文本框的方法和技巧。 2、能够灵活地设置图片、艺术字、文本框设置。 3、学会对页面颜色、和水印的设置。 过程与方法目标: 通过任务驱动、自主探究、合作交流、作品评价培养学生的自学
能力、多渠道解决问题的能力、协作意识、实践操作能力和创新精神。情感态度与价值观目标: 在学习活动中激发学生的学习兴趣，让学生体验到成功的喜悦， 陶冶学生的情操，培养其健康的审美观。 教学重点: 1、插入、设置艺术字、文本框和图片的方法 2、对艺术字、图片、文本框的环绕和样式的设置 教学难点:对艺术字、图片、文本框的环绕和样式的设置教学方法:问题探究式教学、任务驱动式教学 学习方法:小组合作学习法、自主探究学习法 教学准备: 1、多媒体计算机教室教室 2、多媒体教学微课、PPT教学课件、活动素材资源、文字处理 软件 课前准备: 教师通过网络邻居下发教学资源 过程展示: 课前活跃课堂气氛(约1分钟): 师:在讲新课之前，我请同学们欣赏一组照片，在出示照片之前， 大家可以猜一猜照片的内容是什么。 学生表情疑惑，甚至有些同学小学议论。。。 师:出示一组照片(注:我校在2015年9月末举行的秋季运行会照片) 学生看到自己或同学生龙活虎、奋勇争先的情景，心情特别的兴奋。 新授过程:
浅谈网页设计中的版式设计 【摘要】网页设计包含视听元素与版式设计两项内容,而网页的版式设计在整个网页设计中具有重要的作用。它决定了网页的艺术风格 和个性特征,形成了网页整体视觉印象,本文拟就网页设计的版式设计谈谈自己的看法。 【关键词】网页设计;版式设计;布局 1.概念 1.1网页设计网页设计是在Internet的发展和数字技术的发展中出现的新艺术形式。它是以Internet为载体,以网络技术和数字技术为基础,依照设计目的、遵循艺术设计规律,实现设计目的与功能,强调艺术与科学密切结合的一种艺术创造化视觉传达活动。它是网络视觉艺术的主要表现形式,也是设计艺术的重要组成部分,它具有媒体相关性、数字技术性和设计艺术性三大基本内涵。 1.2网页版式设计网页版式设计是指在有限的屏幕空间内,按照设计师的想法、意图将网页的形态要数按照一定的艺术规律进行组织和布局,使其形成整体视觉印象,最终达到有效传达信息的视觉设计。它以有效传达信息为目标,利用视觉艺术规律,将网页的文字、图像、动画、音频、视频等元素组织起来,产生感官上的美感和精神上的享受,充分体现了设计师的艺术风格。 2.网页版式设计的作用 网页版式设计是设计师理性思维与感性表达的产物。它决定了网页的艺术风格和个性特征,并以视觉配置为手段影响着网页页面之间导航的方向性,以吸引浏览者注意力,增强网页内容的表达效果。网页版式设计在整个网页的设计中占有很重要的作用。 3.网页版式设计与传统印刷版式设计的差异网页的版式设计同报纸杂志等平面媒体的版式设计有很多共同之处,但网页的排版与书籍杂志的排版又有很大差异。印刷品都有固定的规格尺寸,网页则不然,它的尺寸是由读者来控制的。这使网页设计者不能精确控制页面上每个元素的尺寸和位置。而且,网页的组织 结构不像印刷品那样为线性组合,这给网页的版式设计带来了一定的难度。具体表现如下:
一、课题：《WORD图文混排》 二、教学目标： 知识目标： 掌握插入、编辑图片，设置图文环绕，熟练运用Word软件进行文档版面设计。 能力目标： １、会应用Word的图文混排制作简单的文档、文章等。 2、培养学生对图文混排作品的评价能力、实践操作能力。 3、培养学生对文章的美观的理解、排版能力。 情感目标： 通过师生的相互交流学习，感受探索的过程，培养学生实践能力和鉴赏能力，进一步激发学生学习Word的兴趣。 三、重难点： 教学重点：掌握插入和编辑图片，实现图文混排。 教学难点：对图片和文字进行格式和布局的排版设计方法。 四、教学方法 演示法、任务驱动法、讲练结合法、分组探究法、展示评价法 五、课时安排 2课时 六、教学准备
软件：WORD2010、教学案例素材，多媒体课件,教学广播软件（极域电子教室） 硬件：多媒体教室（机房）、 七、教学内容的组织与呈现方式 利用多媒体教室展示几幅图文并茂的文档，学生能过鉴赏，评价值得学习的地方，引起学生的学习兴趣，激发学生的求知欲望。再由教师演示并简单讲解插入、编辑图片的方法，为学生的自主学习扫除障碍。然后引导学生自主学习设置文字环绕方式等知识点。最终要求学生利用准备好的素材和网络中的资源，共同合作编排出图文并茂的作品。接着通过展示优秀作品，能过鉴别评价每个学生投票选出优秀的课堂作品，学生有一种成就感，进一步激发全体学生的学习兴趣，调动学生的学习积极性。最后通过总结培养学生审美评价能力和实践操作能力。 八、教学过程 1、导入 （1）通过课件展示三幅作品,引导学生观察。 （2）引导学生进行评价鉴赏。（你认为这三件WORD作品好在什么地方？如果给你做，你能做出来吗？认真学习这节课，老师相信你们都能制作，并且还能做得更好呢。）以美激趣，唤起学生探究的意愿，激发学生创作的欲望。重点运用学生对优秀作品评价和教师语言激励评价。
一、学习任务 【能力目标】 1、能利用word文字处理软件进行板报类文本信息的处理。 2、能设计出不同主题、形式的电子板报。 【知识目标】 1、初步掌握在word中运用图片、艺术字、文本框、自选图形进行综合处理问题的方法。 2、学会设计、评价电子板报。 【德育目标】 1、激发学生的创造性。 2、培养学生的环保意识。 二、教学指导 【指导思想】 本课出自师大学《大学计算机基础》第七章实验——制作电子板报，属于文字处理软件应用畴。它是WORD字处理的基础知识和基本操作技能的综合应用和巩固提高，是学生板报设计、制作的扩展和提升，从更高层次来认识板报的版面结构、布局和排版技术的应用。 设计了本次单元活动任务，这个任务活动可以将之前所学的知识全部包含其中，既检验了学习情况，又可以体会到WORD的神奇，通过设计并制作一份电子小报，不但可以更好地掌握WORD文档的制作，还可以通过电子小报的形式表达思想和信息，从而体会到，利用所学信息技术知识可以很好地应用于实践问题的解决，做到信息技术与其他学科或知识的整合。 【学情分析】 这节课的教学对象是高技班学生，是在他们已经学习了WORD文档的基本制作这一单元之后，在学生已经基本掌握了WORD的基本操作技能，包括文稿的编辑、文字与段落的设计、艺术字与图片的插入与编辑、页面设置等技能之后，在大部分学生已经可以熟练地操作并运用WORD的文档编辑功能的前提下，设计了这样一个单元结束的活动任务，所以，学生可以完成这个任务。 【教学重点、难点】
1、电子板报中图片、艺术字、文本框、自选图形之间的位置关系； 2、插入对象（图片、艺术字、文本框、自选图形）的格式（色彩搭配、位置摆放）设置。 【教学模式与方法】 教学模式：学案导学模式，“做、学、教”三位一体式 教学方法：项目教学法 学习方法：协作学习、自主学习 【课型与课时】 课型：练习 课时：1课时（45分钟） 【课前准备】 教师准备：设计任务，搜集素材 学生准备：回忆WORD相关知识，按成绩和操作能力分组
网页设计 网页的版式设计 在网页设计中根据特定的主题和内容，把文字、图形图像、动画、视频、色彩等信息传达要素界定在一个范围内，有机的、秩序的、艺术性的组织在一起，形成美观的页面并不是容易的事。由于多数专业的计算机技术人员缺乏艺术设计的能力，致使许多网页一直都是按固定的格式来完成，只是在文字内容上有所变化，所以使很多网页看起来千篇一律，缺乏个性。为了让网页更具艺术魅力，必须加强制作人员的艺术素养，将艺术与技术有机的结合起来，使网络呈现更绚丽的色彩。 网页的版面设计应从造型、视觉心理及版式构成几方面入手。 一、版式设计的造型 在版式空间中标题、内容、主体图形、色调、视觉中心、背景和留白都是造型的最基本元素，将这些基本元素在800*600像素或1024*768像素的版面中有机的结合起来就是设计的过程。网页版式设计常常借助多种形式的框架（骨骼），规则的框架与不规则的框架，可见的框架与不可见的框架，同时还要与文字样式、色调等因素紧密联系起来。 网页界面设计不同于报纸、杂志等版面的设计，它是动态的、变化的版面。多数人的显示器分辨率为800*600像素或1024*768像素，我们设计版面时就应以800*600像素为标准，除去滚动条所占的20像素，安全宽度应控制在780像素以内，这样才能浏览到全部的横向页面内容，垂直方向上，页面是可滚动的，版面的长度一般不作限制，但是一些较正规的网站要求滚动不超过3屏，针对这样动态的版面空间，设计起来就要存在较大的难度。为此，网页设计师应采取一些相应的对策： 1．运用自适应宽度技术。即在版面宽度超出800像素时，页面内容自动伸缩，充满整个版面，这样的技术就要求版面设计也要具有适应性。
《网页设计》实训任务书 院系：电气与信息工程学院 专业：计算机信息管理（2010级） 1.1 实训意义 《网页设计》实训是教学过程中重要的实践性教学环节。它是根据专业教学计划的要求，在教师指导下对学生进行的网页制作专业技能的训练，培养学生综合运用理论知识分析和解决实际问题的能力，实现由理论知识向操作技能的转化，是对理论与实践教学效果的检验，也是对学生综合分析能力与独立工作能力的培养过程。因此，加强实践教学环节，搞好实训教学，对实现本专业的培养目标，提高学生的综合素有着重要的作用。 1.2 实训目的 1．通过综合实训进一步巩固、深化和扩展学生的理论知识与专业技能。 （1）掌握规划网站的内容结构、目录结构、链接结构的方法。 （2）熟练掌握网页制作软件Dreamweaver 8的基本操作和使用技能。 （3）掌握页面的整体控制和头部内容设置的方法。 （4）熟练掌握网页页面布局的各种方法。 （5）熟练掌握在网页中输入、设置标题和正文文字的方法。 （6）熟练掌握在网页中插入图像、flash动画、背景音乐的方法。 （7）掌握建立各种形式超级链接的方法。 （8）掌握表单网页制作方法。 （9）掌握网页特效的制作方法。 （10）掌握网站测试的方法。 2．训练和培养学生获取信息和处理信息的能力，充分培养和提高学生的动手能力，学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图像资料、flash动画和网页特效等。 3．培养学生运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题的能力及其基本工作素质。 4．培养学生理论联系实际的工作作风、严肃认真的科学态度以及独立工作的能力，树立自信心。 5．训练和培养团队协作精神和共同开发网站的综合能力。
图文混排 案例一：贺卡的制作 一、案例：展示已经做好的案例 （素材---贺卡案例---贺卡1、2、3） 二、案例应用背景： 在节日来临的时候送上自己制作的贺卡 用Word制作精美的贺卡和word应用制作技巧 三、制作步骤： 1)新建一个Word文档，打开“页面设置”对话框，将宽度设置为24厘米，高 度设置为18厘米 2)打开“边框和底纹”对话框，在“页面边框”选项卡中选择一种艺术边框， 在单击“选项”按钮，将所有的边距设置为0， 3)打开“绘图”工具栏，选择“矩形”按钮，在页面上画一个矩形，使它的大 小与边框一致；保持举行为选中状态，打开“填充效果”对话框，在“纹理” 选项卡中选择“纸莎草纸”效果，单击“确定”，完成纹理的填充； 4)插入一个艺术字，选取合适的样式和字体，并调整好它的大小和位置 5)再插入两张图片，同样将“环绕方式”设置为“紧密型”，然后调整好它们 的大小和位置 6)插入一个文本框，将它放到合适的位置，输入祝福的话，并设置好字体、大 小和颜色，最后将“填充颜色”和“线条颜色”设置成无，一张精美的贺卡将制作完成了。 四、相关知识点 页面设置、边框的使用、填充纹理、插入艺术字、插入图片、文本框的使用、字体设置：字体、字号、颜色 五、重点操作提示 文件---页面设置 格式---边框和底纹---页面边框 插入---艺术字---图片----文本框 案例二：word图文混排 一、案例：展示已经做好的案例
图文混排案例 二、案例应用背景： 对文章进行高级排版 三、制作步骤： 7)新建一个Word文档，打开“页面设置”对话框，将宽度设置为24厘米，高 度设置为18厘米 8)打开“边框和底纹”对话框，在“页面边框”选项卡中选择一种艺术边框， 在单击“选项”按钮，将所有的边距设置为0， 9)打开“绘图”工具栏，选择“矩形”按钮，在页面上画一个矩形，使它的大 小与边框一致；保持举行为选中状态，打开“填充效果”对话框，在“纹理” 选项卡中选择“纸莎草纸”效果，单击“确定”，完成纹理的填充； 10)插入一个艺术字，选取合适的样式和字体，并调整好它的大小和位置 11)再插入两张图片，同样将“环绕方式”设置为“紧密型”，然后调整好它们 的大小和位置 12)插入一个文本框，将它放到合适的位置，输入祝福的话，并设置好字体、大 小和颜色，最后将“填充颜色”和“线条颜色”设置成无，一张精美的贺卡将制作完成了。 四、相关知识点 页面设置、边框的使用、填充纹理、插入艺术字、插入图片、文本框的使用、字体设置：字体、字号、颜色 五、重点操作提示 文件---页面设置 格式---边框和底纹---页面边框 插入---艺术字---图片----文本框
第二节网页的版式设计 在网页设计中根据特定的主题和内容，把文字、图形图像、动画、视频、色彩等信息传达要素界定在一个范围内，有机的、秩序的、艺术性的组织在一起，形成美观的页面并不是容易的事。由于多数专业的计算机技术人员缺乏艺术设计的能力，致使许多网页一直都是按固定的格式来完成，只是在文字内容上有所变化，所以使很多网页看起来千篇一律，缺乏个性。为了让网页更具艺术魅力，必须加强制作人员的艺术素养，将艺术与技术有机的结合起来，使网络呈现更绚丽的色彩。 网页的版面设计应从造型、视觉心理及版式构成几方面入手。 一、版式设计的造型 在版式空间中标题、内容、主体图形、色调、视觉中心、背景和留白都是造型的最基本元素，将这些基本元素在800*600像素或1024*768像素的版面中有机的结合起来就是设计的过程。网页版式设计常常借助多种形式的框架（骨骼），规则的框架与不规则的框架，可见的框架与不可见的框架，同时还要与文字样式、色调等因素紧密联系起来。 网页界面设计不同于报纸、杂志等版面的设计，它是动态的、变化的版面。多数人的显示器分辨率为800*600像素或1024*768像素，我们设计版面时就应以800*600像素为标准，除去滚动条所占的20像素，安全宽度应控制在780像素以内，这样才能浏览到全部的横向页面内容，垂直方向上，页面是可滚动的，版面的长度一般不作限制，但是一些较正规的网站要求滚动不超过3屏，针对这样动态的版面空间，设计起来就要存在较大的难度。为此，网页设计师应采取一些相应的对策： 1．运用自适应宽度技术。即在版面宽度超出800像素时，页面内容自动伸缩，充满整个版面，这样的技术就要求版面设计也要具有适应性。 1024*768像素环境下的页面效果
《WORD图文混排》教学设计 教学目标： 知识目标： 掌握插入、编辑图片，设置图文环绕，熟练运用word软件进行文档版面设计。 能力目标： １、会应用word的图文混排制作简单的贺卡、宣传单、电子手抄报等。 2、培养学生对图文混排作品的评价能力、实践操作能力。 3、培养学生在练习中的分工合作能力、组织能力。 情感目标： 通过师生的相互交流和团队的协作学习，感受探索的过程，培养学生实践能力和鉴赏能力，进一步激发学生学习计算机的兴趣。 教学重难点： 教学重点：掌握插入和编辑图片，实现图文混排。 教学难点：对图片和文字进行格式和布局的排版设计方法。 教学方法 演示法、任务驱动法、讲练结合法、分组探究法、展示评价法教学课时： 1课时 教学准备 软件：WORD2003、教学案例素材，多媒体课件
硬件：网络教室、多媒体教学软件（伽卡他卡电子教室教师端及学生端） 教学内容的组织与呈现方式 利用网络教室展示几幅图文并茂的文档，学生能过鉴赏，评价值得学习的地方，引起学生的学习兴趣，激发学生的求知欲望。再由教师演示并简单讲解插入、编辑图片的方法，为学生的自主学习扫除障碍。然后引导学生自主学习设置文字环绕方式等知识点。最终要求学生利用准备好的素材和网络中的资源，共同合作编排出图文并茂的作品。接着通过展示优秀作品，能过鉴别评价每个学生投票选出优秀的课堂作品，学生有一种成就感，进一步激发全体学生的学习兴趣，调动学生的学习积极性。最后通过总结培养学生审美评价能力和实践操作能力。 二、教学过程 1、导入 （1）通过课件展示三幅作品,引导学生观察。 （2）引导学生进行评价鉴赏。（你认为这三件WORD作品好在什么地方？如果给你做，你能做出来吗？认真学习这节课，老师相信你们都能制作，并且还能做得更好呢。）以美激趣，唤起学生探究的意愿，激发学生创作的欲望。重点运用学生对优秀作品评价和教师语言激励评价。 2、展示教学目标：课件展示，明确学习目标。 3、教学内容
Word中图文混排的教学设计 教学内容：图文混排（小报的制作） 教学对象：学过word的基本操作的中学生 教学目标： 1.掌握处理图形对象的方法和技巧； 2.了解各种环绕方式的版面效果； 3.能够实现图文混排，编排出图文并茂的文档。 教材分析： 本课是“文字处理”一章内容中的重点，也是难点。学习本课之前，学生已经学过了字符排版、段落排版和插入对象的方法。本课主要学习图文混排的方法，让学生在排版过程中综合运用已学的技能，掌握排版的指导思想、操作要领，并能应用到实践中去。教学重点与难点： 处理对象的方法和技巧，如何快速找到处理对象的命令。要解决这一问题就必须把要求学生对以前学习的内容充分复习，引导学生知道哪方面是图文混排的重点，重点强调这方面的能力，还有适时的给学生演示一些小技巧，让学有余利的学生能够钻研。然后让学生更快的找出解决问题的最佳途径。 教学模式： 学生在“图文混排”学习中的最大问题就是：上课可以完成练习，但独立应用时往往不知从何下手。这是因为学生在课上只是依样画葫芦，并没有真正掌握操作思路和要领。因此教师宜采用启发式教学，正确引导学生用比较和联想的方法，运用已学的知识去解决新的问题，在解决新问题的过程中，进一步积累感性认识，通过分析、总结，上升到理性认识。这样才能使学生真正领会操作要旨，做到应用时得心应手。 教具准备：多媒体机房，小报的一些实例。 教学流程图：
给学生展示一张小报 导入新课教师演示 让学生说出它的组成 重难点强调 学生练习教师总结一下本节课内容 给学生展示一些小技巧教学过程： 导入新课： 由于学生都学过word的基本操作，教师事先准备一张报纸，上课时教师拿出来让学生观看这张报纸里含有哪些在word中学过的图形，工具等。然后启发学生如果这张报纸要自己做，自己会怎么想，通过提问学生汇集各种思路。然后向学生展示一些小报的实例，学生看起来肯定很漂亮，然后引导学生自己也制作一张漂亮的小报出来给别人看，别人一定会夸奖他。进入激发学生的学习兴趣，从而导入新课。 讲授新课： 首先让学生回忆设定文字格式的方法。要注意的是Word排版的基本原则“先选定后操作”，选定文字后，有两种基本操作方法：一是用格式工具栏上的快速按钮完成；二是用字体对话框来全面设置。前一种方法快捷，后一种方法全面。 让学生回忆如何打开或隐藏格式工具栏以及如何打开字体对话框。格式工具栏可在“视图”菜单的“工具栏”子菜单中打开或隐藏；字体对话框可单击“格式”菜单中的“字体”命令或右击选中的文字后单击弹出快捷菜单中的“字体”命令来打开。 将处理文字的方法应用图形对象的处理中，并在这过程中类比这两者处理方法的相同点和不同点。 Word文档排版中，图片、剪粘画、文本框、艺术字、公式和自选图形等都作为图形对象来处理，这些图形对象的处理方法很相似，只要掌握了其中一种对象的处理方法，其它对象的处理方法就可依此类推。
一株小小的野百合 ．．．，演绎出一段美丽而又令人感动的故事。这就是台湾作家 林清玄的散文《心田上的百合花开》。一个小小的“心灵”，为了心中那个美好的愿望，竟是如此的执著和坚韧。它，的确不是 一株野草。 偏僻遥远的山谷、高数千尺的断崖，预示了野百 ．． 合．追求美好愿望的道路必然艰难曲折。恶劣的生长环境，并没有消磨它作为花——一棵百合的天性，虽然它刚诞生时长得跟其他野草一模一样。但一个坚定的念头在它的心中悄悄萌生：我要开花，我要以花作证。为此，它“努力地吸收水分和阳光，深深地扎根，直直地挺着胸膛”——与自然环境顽强地抗争。 如果说与生长环境的抗争，只是野百合 ．．．为实现美好心愿迈出的第一步的话， 那么，野草的讥讽嘲笑、蜂蝶的鄙夷才是野百合 ．．．是 ．．．面对的更严酷的考验。野百合 执著的，野百合 ．．．更是智慧的。面对野草的嘲讽讥笑、蜂蝶的鄙夷劝 导，野百合 ．．．坚定的信念始终没有动摇：“不管有没有人欣赏，不管你们怎么看我，我都要开花！” 不事张扬的野百合 ．．．，用自己的行动默默抗争，独行其道，终成“正果”：“它终于开花了，它那灵性的洁白和秀挺的风姿，成为断崖上最美 丽的颜色。”这花是信念的结晶，是心血的凝聚。野百 ．．合．终于实现了自己的价值。正因为这美丽来之不易，所以当百合谷成为人们的“圣地”之时，每一 朵野百合 ．．．都能谨记第一朵百合的教导：“全心全意默默地开花，以花来证明自己的存在。” 在林清玄看来，人生的美分为三个层次：第一个层次是欲望、物质带来的美；第二个层次是文化、艺术、文明带来的美的满足。第三个层次是灵性、精神的美， 这是最高境界的美。他信奉“尽心就是完美”，而野百合 ．．．就是这样一个因“尽心”而近乎“完美”的形象，真正实现了“灵性、精神的美”。
《WORD 图文混排》 一、课题：《WORD 图文混排》 二、教学目标： 知识目标： 掌握插入、编辑图片，设置图文环绕，熟练运用word 软件进行文档版面设计。 能力目标： １、会应用word 的图文混排制作简单的贺卡、宣传单、电子手抄报等。 2、培养学生对图文混排作品的评价能力、实践操作能力。 3、培养学生在练习中的分工合作能力、组织能力能力。 情感目标： 通过师生的相互交流和团队的协作学习，感受探索的过程，培养学生实践能力和鉴赏能力，进一步激发学生学习计算机的兴趣。 三、重难点： 教学重点：掌握插入和编辑图片，实现图文混排。 教学难点：对图片和文字进行格式和布局的排版设计方法。 四、教学方法 演示法、任务驱动法、讲练结合法、分组探究法、展示评价法 五、课时安排 1 课时 六、教学准备
软件：WORD2003 七、教学内容的组织与呈现方式 利用网络教室展示几幅图文并茂的文档，学生能过鉴赏，评价值得学习的地方，引起学生的学习兴趣，激发学生的求知欲望。再由教师演示并简单讲解插入、编辑图片的方法，为学生的自主学习扫除障碍。然后引导学生自主学习设置文字环绕方式等知识点。最终要求学生利用准备好的素材和网络中的资源，共同合作编排出图文并茂的作品。接着通过展示优秀作品，能过鉴别评价每个学生投票选出优秀的课堂作品，学生有一种成就感，进一步激发全体学生的学习兴趣，调动学生的学习积极性。最后通过总结培养学生审美评价能力和实践操作能力。 八、教学过程 1、导入 （1）通过对比展示三幅作品,引导学生观察。 （2）引导学生进行评价鉴赏。（你认为这三件WORD 作品好在什么地方？如果给你做，你能做出来吗？认真学习这节课，老师相信你们都能制作，并且还能做得更好呢。）以美激趣，唤起学生探究的意愿，激发学生创作的欲望。重点运用学生对优秀作品评价和教师语言激励评价。 2、教学内容
Word图文混排实例之艺术字效果“福到了” 在撰写教案或论文时，经常要遇到图文混排，即文本框和自选图形的混排，但有时文本框却无法实现某些特殊功能，比如说倒写的红“福”字通过文本框就无法实现，在这种情况下， 通过插入艺术字就很容易实现。具体操作步骤如下： 1. 单击“视图”菜单，选中“工具栏”，再选中级联菜单中的“绘图”命令，启动“绘图”工具栏。 2. 单击“自选图形”下的“基本形状”命令，选中第四个图形，菱形。 3. 设置插入点，单击鼠标左键，出现一规则菱形。 4. 设置自选图形格式，填充为红色，无线条色。 5. 设置插入点，单击“插入”下的图片命令，选择“艺术字”。选择第一种艺术字式样， 单击[确定]。 6. 弹出“编辑艺术字文字”对话框，输入“福”字，并设置字型为“华文行楷”，字号 “48”，填充为“黑色”。 7. 选中“福”字，单击“绘图”选择“旋转或翻转”命令，做两次左转。 8. 将图2和图4进行组合。选中图2，按住[Shift]键不放，再选择图4，此时两张图片同时被选中，选择“绘图”菜单，点击[组合]命令。 9. 最后，将“福”字与自选图形格式对齐。首先选中图形，再选择“绘图”菜单，点击[对齐或分布]命令，选中水平居中和垂直居中。这样“倒福字”图片就制作成功了。 小编也借这个喜气洋洋的“福”字祝全国的读者朋友，新年快乐！万事如意！ WORD 2000 图文混排 （根据陆爱玉老师课堂教学实况整理）
朱瑞明 师：OFFICE 2000提供了一个剪辑库，包含了大量的图片。 （屏显：叠现剪贴画） （屏显：“神舟五号”、杨利伟图片） 师：如果把这些图片插入到文档中去，文档一定会变得更加活泼、漂亮、形象，也更有利于文章内容的表达。那么，怎样才能够把这些图片插入到文档中去呢？今天，我们就来学习这一种操作技术——WORD 2000 图文混排。 （屏显：WORD 2000 图文混排） 师：图片有两种：一是剪贴画，来源于“剪贴画”；另一种是文件图形，来源于“图形文件”。 （屏显：图片来源剪贴画图形文件） 师：先来看插入剪贴画。 （屏显：插入剪贴画） 师：操作指导（教师边讲解，边在“参考文档.DOC”中演示）。 光标定位（将光标移动到需要插入剪贴画的位置）—→菜单“插入”—→“图片”—→“剪贴画”—→在打开的对话框中，单击“图片”选项卡—→选择所 需的剪贴画—→右击“插入”按钮。 如果觉得这图片也太大了一点吧？不雅观，不好看，是不是可以把图片变小点？那太容易啦。 教师边讲解，边演示：改变图片大小；同时提醒学生注意：拖动不同的控点，可进行不同的缩放，注意观察拖放不同控点的不同效果。 学生练习 在“练习文档一.doc”的第二段中插入一副剪贴画，内容自选，大小自调。 （教师巡视，个别指导，发现共性问题，面上指导。） （教师根据实情简要评点。） 师：（承转）我们已经学会了“剪贴画”的插入方法，“剪贴画”，顾名思义就是把画剪下来再贴上去，只要找到“剪贴画”的来源，操作起来就不太困难了吧？ 但是在“剪贴画”中找不到“神舟五号”、“中国首位航天员杨利伟”呀。那是因为这不是“剪贴画”，而是文件图形，来源不同，需要在“图形文件”中寻找。 （屏显：插入图形文件） 师：WORD 2000支持.bmp、.wmf 、.tif 、.pic、 .jpg 、.gif等图形文件。 师：操作指导（教师边讲解，边演示：在“参考文档.doc”第一段的段首插入“中国首位航天员杨利伟”）。 光标定位—→菜单“插入”—→“图片”—→“来自文件”，—→在“插入图片”对话框中，选择图形文件所在的文件夹—→在“文件名”列表中选择要插 入的图形文件—→单击“插入”按钮。 学生练习（要求自定大小）