网站设计与评价课件.ppt

1、网站设计与评价了解与设计网站 了解网站的基本结构 网站是由一些互相关联的网页构成的一个整体，一个网站通常包含多个网页，其起始网页称为主页，主页的文件名通常为或，它是网站的门面，体现了整个网站的主题、风格及架构，还具有引导的功能。（我们先来看九江一中的主页) 网页是利用各种软件或开发工具制作而成的文件，它可以传递文字、图片、声音等各种信息，网页可分为静态网页和动态网页。静态网页是一种用代码组成的文件，往往用于发布无需用户参与、内容固定的信息。动态网页包括动态表现网页与动态内容网页，动态表现网页在网页外观上实现动态，常用制作技术有动画、，等，动态内容网页是通过一定的计算机编程语言，实现与用户的实时

2、交互，生成内容发生变化的网页（如聊天室）。 网站的结构 常见的网站结构有树形、星形和混合形 在树形结构的网站中，主页上的超级链接指向一级子页，一级子页的超级链接指向二级子页，依次类推。主页一级子页一级子页一级子页一级子页二级子页二级子页二级子页二级子页二级子页二级子页优点是条理清晰，缺点是浏览效率较低，从一个栏目的子页转到另一个栏目的子页必须先返回主页 星形结构是指在每个页而上都设置一个共同的超级链接，所有的页面都可以通过该链接进行浏览。主页一级子页一级子页一级子页二级子页二级子页二级子页二级子页二级子页一级子页二级子页优点是浏览方便，缺点是链接太多，访问者容易迷失方向 混合型结构结合了上面两

3、种结构的优点，在实际的网站设计中应用较多。一级子页二级子页二级子页二级子页二级子页主页一级子页一级子页一级子页二级子页二级子页三级子页三级子页三级子页三级子页 构成网页的元素 构成网页的元素多种多样，主要包括文字、图片、超级链接、动画、音频、视频及动态内容等 、文字与图片 文字与图片是构成一个网页的两个最基本的元素，通常文字反映了网页的内容，而图片除了对相应的文字作补充说明外，还可以让网页更加美观。 、超级链接 网页的一大特色是提供了超级链接功能。正是超级链接将各个孤立的页面相互联系起来组成了网络，才使整个万维网成为一个巨大的、相互关联的信息系统。 、动画 动画能够使页面变得更加生动，网页上的

4、动画以动态的图片居多 、音频 网页上不仅可以有图片和动画，还可以有语音、音乐等音频信息，适当地在网页上加上音频效果，可以使网页更具有吸引力 网上流行的音频主要有、等 视频 视频是一种非常直观有效的表现方式，在网页上使用视频效果，主要用于解释文字难以表述清楚的含义，使网页内定更加生动、直观、容易理解。 常用的视频格式包括，等 、动态内容 动态内容是在与用户交互的过程中产生的，主要包括 查询、留言板、论坛、聊天室等。网站的策划与设计 、网站主题和内容的选择与定位 网站的主题就是网站要表达的主要内容。在动手制作网站之前，首先要考虑的就是建个什么样的网站，放些什么内容，希望吸引哪些访问者。例如：新浪网

5、以提供全面、及时的新闻信息而著称；淘宝网则以电子购物为主。 选择网站主题和内容应考虑以下几点： （）选择自己最熟悉、最擅长的题材； （）网站的主题要小而精； （）内容要有创新； （）网站的名称要易记、健康、有特色； （）兼顾网站主要访问群体的兴趣和浏览习惯。一些中学生网站的名字：篮坛风云，海中世界，空军之翼，星球空间站， （旅游），清新茶园（环保），梦幻音画廊，虚幻时空（影视）. 、网站栏目的设计 确定好网站主题后，要把网站的内容按一定的方法以进行分类，并设置专门的栏目。网站栏目的设置原则一是要紧扣主题，埂要突出重点。在设置栏目的时候，要仔细考虑的轻重缓急，合理进行安排。 网站的栏目一般分为几

6、个层次，主要内容一定要放在主页或一级栏目中，或者在主页和其他网页上安排超级链接，以便浏览者很容易就能找到，将要的内容可以放在二级或三级栏目中。 、网站的风格设计 要想让网站能吸引人们的注意，就必须确立自己的风格。网站的风格往往体现了制作者的文化品位和行事风格，没有固定的模式可以参照和模仿。风格设计一般可以从色彩、图片、字体、语言风格等几个方面进行考虑。 （）色彩的选择和搭配 网页色彩的选择和搭配是网页设计的重点之一。在设计网页的色调、背景、文字、图标、边框甚至链接时，都会遇到选择色彩的问题。 色彩能够给人以冷暖感觉上的联想： 冷色：蓝色、绿色给人的感觉是冰冷的，人们称它们为冷色。 暖色：红色、

7、黄色给人的感觉是炎热的，人们称它们为暖色。 中性偏冷色：黑色、白色、灰色属于中性偏冷色。 网页的色彩搭配应以大众的欣赏习惯为标准，同时兼顾网站主题和艺术规律，一般应遵循合理性、独特性、艺术性的原则。 （）图片的选择 图片的类型大体可分类照片类和绘画类。照片类图片的特点是能够真实地记录现实事物的原貌，给人以真实可靠的印象。同时，照片类图片比较容易得到。绘画类图片一般来自手工绘画或软件制作，在见面设计有自己的优势，这种图片可以按照网站的风格设计创作，能使网站富有整体感。 图片的格式常用、等。 （）字体的设计 文字是网页的主要组成部分，是信息的重要载体，正确选择字体，不仅关系到网页的美观，还对浏览者

8、的证券市场及信息的传达有直接的影响。目前计算机上可以选用的字体很多，但不是都可以用在网页里的。 计算机能不能显示某种字体，主要取决于其字库里是否安装了这种字体。不论你的网页里使用了什么样的字体，用户的计算机只能以自己字库里的字体显示出来。对于需要展现艺术效果的文字，最好先将其制作成图片，再插入到网页上去。 、网站内容的收集和筛选 在创建网站时，资料悼念的过程也是必不可少的，资料的悼念要有一个明确的办公室范围，不要把与网站主题无关的内容塞到网站里，也不要收得太多太杂。 、网站结构和超链接设计 在设计时需要考虑的因素有：采用哪种网站结构，是否需要放导航栏，导航栏放在哪里，是否需要放返回主页的链接，

9、哪些内容要链接到主页，哪些内容要链接到其他级页面，是否设置搜索引擎，采用下拉菜单还是使用动态菜单等 、网页的布局 在网站设计中，页面的而已也很重要，导航栏的位置、文字的位置，以及图片的位置，都是设计者需要考虑的内容。 网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、型及变化型等。 “国”字型 上面是网站的标题及横幅广告，接下来是网站的主要内容，左右分列一些小条，中间是主要部分 拐角型 上面是标题及广告，接下来的左侧是导航栏，右侧是正文 左右框架型 左边是导航栏，右边是正文 上下框架型 上面是导航栏，下面是正文 封面型型 设计网页布局时必须遵循突出重

10、点、平衡协调的原则，将突出网站主题的最重要的模块放在最显眼的位置，然后再考虑将要模块的摆放。设计网页布局的主要参考要素有 （）平衡：指页面的图片、文字的礼堂分量在左右、上下、几个方位基本相等，颁布匀称。色彩表现也要平衡，给人一种协调的感觉。 （）呼应：使一种元素同时出现在不同的地方，形成相互联系 （）对比：利用不同的色彩、线条等元素相互并转，造成画面的多种变化，达到丰富视觉的效果。 （）疏密：即空白的合理运用，太满、太密、太平均是布局设计的大忌，适当的疏密搭配可以使画面产生节奏感，体现出网站的格调与品位学生综合练习 1、登录学生获奖网页，认真观察这些网页的结构、内容、栏目、布局、链接、色彩、内容、特点、风格等。 2、设计一个个人网站，确定网站的标题、栏目、内容、布局、链接结构、风格、色彩、图片选择等,并根据你的设计收集相关的素材，如图片、文字、动画等。个人整理，仅供交流学习！