网站栏目、版面、风格设计.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,前情回顾：,1.,下列选项中属于网页文件的是（）,A.index.gif,B.index.swf,C.index.htm,D.index.wav,2.Microsoft Access,软件是一种（）,A.,数据处理软件,B.,文字处理软件,C.,数据库管理软件,D.,数据库应用软件,3.,电子邮件的附件中很容易传播病毒木马。以下附件中，最有可能是病毒木马的是（）,A.,密码破解,.exe B.,初稿,.txt C.,小苹果,.mp3 D.,登记照,.jpg,4.,网站的规划与建设按时间顺序可分为以下五个阶段正确的顺序是（）设计宣传推广运行维护策划制作,A.B.C.D.,5.,网页中的图片一般都是,gif,或,jpg,格式的，使用这种图片格式的好处是（）,A.,浏览网页时速度更快,B.,制作网页时更快捷,C.,修改网页时更容易,D.,上传网页时速度更快,6.,网站建设开发的流程比较合理的是（）,A.,确定设计风格、规划网站结构一确定主题及制作工具一收集素材、制作网页一发布网站,B.,确定主题及制作工具一收集素材、制作网页一确定设计风格、规划网站结构一发布网站,C.,收集素材、制作网页一确定主题及制作工具一确定设计风格、规划网站结构一发布网站,D.,确定主题及制作工具一确定设计风格、规划网站结构一收集素材、制作网页一发布网站,网站栏目、版面设计,网站设计的目的在于把需要表达的信息以恰当的方式组织并呈现在网上，设法吸引人们的关注，并为浏览者提供方便的访问。,一、网页栏目设计,设计一个网站与编写一本书有相似之处，开始着手写书之前，首先要进行总体构思，拟定书的编写目录，然后才按章节组织编写内容。同样,制作网站前要设计好网站的栏目。,请大家观看南京大学的网站：,当然，还可以有二级栏目或三级栏目：,第一级栏目如下图示：,1,、,“,T,”,字型：也称,“,厂,”,字型，页面顶部为主菜单以及横条网站标志,+,广告条，下方左面为导航菜单，右面显示内容的布局。优点：页面结构清晰，主次分明；缺点：呆板，如果细节色彩上不注意，容易,“,看之无味,”,。,二、网页版面设计,网页要呈现的内容很多，概括起来可分为标题信息、栏目信息、内容信息、附加信息等，需要进行合理的放置，让人看起来井井有条，主次分明。,一个网页的版面通常以屏幕中央最能引人注意，屏幕上方紧随其后，屏幕的左右侧通常放置不太重要或固定信息，附加信息（如版权信息）一般放在最下方。,版面布局的整体造型和色彩搭配的灵活运用也会影响人们的注意力，产生不同的视觉效果。版面布局没有绝对统一的方法，应视需要而定，有创意的布局会给人以耳目一新的感觉。,常见页面布局样式：,2,、,“,国,”,字型，也称,“,同,”,字型。,即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。,常见页面布局样式：,3,、自由式。又称,POP,布局页面布局像一张宣传海报，以一张精美图片作为页面的设计中心，菜单栏目自由摆放。优点：漂亮、吸引人，适宜于艺术类网站。缺点：显示速度慢，文字信息量少。,常见页面布局样式：,4,、,“,口,”,字型。页面一般上下各有一个广告条，左面是主菜单，右面放友情链接等，中间是主要内容。优点：充分利用版面，信息量大，与其他页面的链接多，切换方便；缺点：页面拥挤，不过灵活。5,、标题正文型。标题正文型布局的布局结构一般用于显示文章页面、新闻页面和一些注册页面等，其特点是简洁明快，干扰信息少，较为正规。,6,、,“,匡,”,字形布局：这种布局结构给主内容区释放了更多空间，内容虽看起来比较多，但布局整齐又不过于拥挤，适合一些下载类和贺卡类站点使用。,7,、,“,三,”,字形布局：一般应用在简洁明快的艺术性网页布局，这种布局一般采用简单的图片和线条代替拥挤的文字，给浏览者以强烈的视觉冲击。,8,、,“,川,”,字型布局：整个页面在垂直方向分为三列，网站的内容按栏目分布在这三列中，最大限度地突出主页的索引功能，一般适用在栏目较多的网站,里。,9,、对称对比布局。顾名思义，采取左右或者上下对称的布局，一半深色一半浅色，一般用于设计型站点。优点是视觉冲击力强，缺点是很难将两部分有机地结合起,来。,10,、,FLASH,布局：,FLASH,布局是指网页页面以一个或多个,Flash,作为页面主体的布局方式。在这种布局中，大部分甚至整个页面都是,Flash,。,常见页面布局样式：,巩固练习：,1.,如果一个网站的栏目设置不合理，可能导致网站（）,A.,不能正常运行,B.,目录结构不清晰、内容混乱,C.,没有自己的整体风格,D.,浏览时速度比较慢,2.,如果一个网页给人的感觉是内容杂乱无序，主次不分，这主要是因为（）,A.,制作工具选择不合理,B.,色彩选择不合理,C版面设计不合理,D.,语言使用不合理,3.,网页的版面设计是否精美是吸引网民访问网站的重要因素之一。下列关于版面设计的叙述，错误的是（）,A.,网页版面布局可按创意草案、粗略布局、最后定案三个步骤来进行,B.,可以根据自己的想法在纸上绘制初步的版面布局创意图,C.,版面设计包括风格设计、布局设计和交互设计,D.,版面布局就是将网页需要呈现的内容进行合理的放置,网站风格设计,一、风格设计,风格是指网站的整体形象给浏览受。有的严肃计策、有的清爽温馨、有的深沉厚重、有的生动活泼、有的古朴典雅、有的豪迈奔放。风格设计与主题是密不可分的，是为突出主题服务的。,一种风格的形成需要从多方面着手设计，包括网页布局的整体造型、色彩的搭配、字体图片的样式设置、网站的标志设计等，同一个网站的各网页之间应,保持风格一致,。,1,、网站标志,树立网站整体风格的第一步是：设计、制作一个网站的,标志,(logo),，将你的标志尽可能地放置在每个页面最突出的位置上，或者页眉，或者页脚，或者背景。如同商标一样，看见标志就让大家联想起你的网站。,设计标志有这样几种方法：,(1),选择与网站主题有关的,，并具有代表性的人或者物，用它们作为设计的蓝本，加以卡通化和艺术化。例如搜狐网站的卡通狐狸。,(2),对于专业性的网站,，可以以本专业有代表的物品作为标志。比如中国银行的铜板标志。,(3),最常用和最简单的方式是用自己网站的中文或者英文名称作标志。,采用不同的字体、字母的变形与组合，可以很容易制作出自己的标志。比如百度，,Google,。,一、风格设计,2,、网页色彩搭配,设计网站的标准色彩：网站的,标志、标题、主菜单和主色块文字,的链接色彩尽量使用标准色彩；,图片的主色彩、背景色、边框,等尽量使用标准色彩同色系的色彩，这样给人以整体统一的感觉。,标准色彩能体现网站形象，延伸网站内涵。网站给人的第一印象来自视觉冲击，确定网站的标准色彩是相当重要的一步。,3,、设置字体,设计网站的字体：在关键的,标题、菜单、图片,里使用统一的标准字体。与标准色彩一样，标准字体是指用于标志、标题、主菜单的特有字体。,但要注意的是使用一些比较特别的字体时，最好使用图片的形式，否则你的辛苦设计便付之东流了，因为浏览者的计算机里很可能没有安装你的特别字体。,二、素材的收集与管理,1,、什么是素材？,网页制作过程中常用的多媒体文件格式有：,（,1,）图片：,gif,、,jpg,、,png,等,（,2,）声音：,midi,、,wav,、,ra,等,（,3,）视频：,wmv,、,asf,、,rm,、,mov,等,选用何种格式的文件要考虑到文件的大小。文件过大，会影响网页打开的速度，影响浏览者对该网页的访问效果。,2,、管理素材：分类存放,用于收集和组织网页制作素材的文件夹与文件的命名要易懂易记。,切忌随意命名，,以免到制作阶段时找不到所需要的素材。,怎么分类存放呢？请看文件夹的组织图：,巩固练习：,1.树立一个网站的整体风格主要就是设计制作网站的（）,A.建设计划、栏目设置、版面设计 B.网站结构、网站主题、网站名称,C.网页表格、网页元素、超级链接 D.网站标志、标准色彩、标准字体,2.下列选项中，不属于树立网站整体风格工作范畴的是（）,A.设计制作网站标志 B.设计标准色彩,C.设计标准字体 D.确定网站主题,3.好的网站往往都有统-的外观,有精新秀丽的,有温文尔雅的,有执着热情的。为了让网站具有这种特点，在制作网站时应该在哪个环节进行精心设计？,A栏目设置 B色彩选择 C版面设计 D树立风格,4.下列关于网站制作中收集素材的叙述，错误的是（）,A.收集来的素材要进行分类存放,B.收集来的素材无需更名，直接使用,C.提倡使用自己原创的材料，增加网站的特色,D.根据需要，对收集来的素材要进行适当的加工,