网页设计原理 PPT

（2）站内搜索引擎。站内搜索引擎提供了一种主动查 询方式，浏览者只要把自己需要寻找的内容的关键字输 入到搜索引擎中，网站将自动地查找出站内符合条件的 页面，这是一种人性化的做法。 （3）当前浏览位置。所谓“当前浏览位置”就是在网 站的每个页面中加入当前位置的文字说明并逐级加入链 接。
2.网页版块 导航条（常用导航栏）
LOGO是网站的标志、名片，如同商标一样。
在网站设计中logo的设计是不可缺少的一个重要环
节。Logo是网站特色和内涵的集中体现,它作用于
传递网站的定位和经营理念、同时便于人们识别，
会直接影响到客户对网站的判断，特别是网站日后
需要进行全球性推广，优秀的商标设计会吸引来更
多的访问者。
LOGO可以是中文、英文字母，也可以是符号、 图案，还可以是动物或者人物。LOGO的设计创意来
1.2.2 网页页面与版块
1.网页页面大小 标准显示器的屏幕分辨率为1024*768，则不同版本 的IE浏览器的屏幕大小为：
◦ IE6.0：1003*600px ◦ IE8.0（隐藏菜单栏）：1003*626 ◦ IE8.0（不隐藏菜单栏）：1003*598
原则：不出现水平滚动栏
2.网页版块 网站LOGO
表企业形象或栏目内容的标志性图片（即LOGO），用于宣传的广 告（即Banner）等多种形式。 3．超级链接 超级链接是Weቤተ መጻሕፍቲ ባይዱ网页的主要特色，是指从一个网页指向另一个 目的端的链接。这个“目的端”通常是一个网页，也可以是下列 情况之一：相同网页上的不同位置、一个下载的文件、一幅图片、 一个E_Mail地址等。超级链接可以是文本、按钮或图片，鼠标指 向超级链接位置时，会变成小手形状。
1.2.5 网页页面元素设计
4．导航栏 导航栏是一组超级链接，用来方便地浏览站点。导航栏 一般由多个按钮或者多个文本超级链接组成。 5．动画 动画是网页中最活跃的元素，创意出众、制作精致的动 画是吸引浏览者眼球的有效方法之一。 6．表格 表格是HTML语言中的一种元素，主要用于网页内容的布 局，组织整个网页的外观，通过表格可以精确地控制各网页 元素在网页中的位置。
版面典型风格
对称型
偏置型
标题型
1.2.4网页色彩设计原理
色彩的运用在网页中的作用真是太重要了，有 些网页看上去十分典雅、有品位，令人赏心悦目， 但是页面结构却很简单、图像也不复杂，这主要是 色彩运用得当。色彩是人的视觉最敏感的元素，网 页色彩处理得好，可以锦上添花。
网页三原色：red、green、blue 色彩的属性：色相、饱和度、明度 色彩模式：RGB、CMYK Web216安全色
2.网页版块 Banner条（网页广告栏）
一般为广告横幅图片、或者使用JavaScript或 Flash技术制作的动画，用于吸引用户观看
2.网页版块 内容版块
网页的主体
◦ 文本 ◦ 图像 ◦ 动画 ◦ 超链接
2.网页版块 版尾版块
版权信息版块
◦ 制作单位、制作人、时间等
1.2.3 网页版面布局设计
网页设计原理
本章目标
掌握网站的开发流程 掌握网页设计原理 掌握网页设计规范 欣赏优秀的网页，学习他人之长，激发学习网页设
计的兴趣
1.1 网站开发流程
第一个阶段：规划和准备阶段。这个阶段要做的工作包括： （1）市场调查、市场分析； （2）制定网站技术方案； （3）规划网站内容； 第二阶段：网页设计、制作阶段。这个阶段要做的工作包括： （1）网站总体设计（风格、布局、色彩）； （2）设计界面、制作网站中的各个网页； （3）将各个网页通过超级链接进行整合； （4）后台设计。 第三阶段：网站的发布、推广和维护阶段。这个阶段要做的
1.2.5 网页页面元素设计
7．框架 框架是网页的一种组织形式，将互相关联的多个网页的 内容组织在一个浏览器窗口中显示。例如在一个框架内放置 导航栏，另一个框架中的内容可以随着导航栏中的链接而改 变。 8．表单 表单是用来收集访问者信息或实现一些交互作用的网页， 浏览者填写表单的方式是输入文本，选中单选按钮或复选框， 从下拉菜单中选择选项等。 网页中除了上述这些最基本的构成元素外，还包括横幅 广告、字幕、悬停按钮、日戳、计算器、音频、视频、 Java Appplet等元素。
网站设计不是把所有内容放置到网页中就行了，还 需要我们把网页内容进行合理的排版布局，以给浏 览者赏心悦目的感觉，增强网站的吸引力。在设计 布局的时候要注意把文字、图片在网页空间上均匀 分布并且不同形状、色彩的网页元素要相互对比， 以形成鲜明的视觉效果。
常见的布局结构有 “同”字形布局、“国”字形 布局、“匡”字形布局、“三”字形布局和“川” 字形布局、上下框架型、封面型
表1.1 色彩与心理反应
1.2.5 网页页面元素设计
网页是由文本、图像、动画、超级链接等基本元素构成 1．文本 建议用于网页正文的文字一般不要太大，也不要使用过多的字体，
中文字体一般使用宋体，大小一般使用9磅或12像素即可。 2．图像 网页中的图像主要有用于点缀标题的小图片，介绍性的照片，代
1.3 网页设计与开发技术
前台技术
◦ XHTML（网页的结构技术） ◦ CSS（网页的表现技术） ◦ ECMAScript（前身为JavaScript，脚本语言） ◦ Ajax（由JavaScript脚本语言扩展而来） ◦ E4X（ 是ECMAScript的扩展，实现更快的访问XML数据 ） ◦ 切片（网页图形处理）
源是网站的名称和内容。
2.网页版块 网站LOGO
2.网页版块 导航条
导航栏
sh 动画
图像 超链接
2.网页版块
导航条
网站导航的表现形式主要有：菜单、站内搜索引擎、当 前浏览位置等。 （1）菜单。菜单是网站最常见的导航方法，一个好的 菜单系统关键在于能适应网站的层次需要，并且容易让 浏览者理解网站的结构。
工作包括： （1）测试、调试与完善网站； （2）发布与推广网站； （3）维护和更新网站。
1.2 网页的设计原理
1.2.1网页设计的基本原则 （1）用户至上原则 （2）易用性原则
网页中的导航应放置明显、结构清晰、操作简单。网 站的链接结构合理，方便浏览者在不同网页之间跳转快捷、 方便。
（3）实用性原则