41网站的规划与设计.ppt

41网站的规划与设计
Photoshop界面
界面默认打开的面板有：属性栏、工具栏导航、颜色、图层：
Photoshop入门介绍
效果欣赏

Company Logo
www41网站的规划与设计
Photoshop界面
界面默认打开的面板有：属性栏、工具栏导航、颜色、图层：
Photoshop入门介绍
效果欣赏

Company Logo

Company Logo
主要软件Flash
由Macromedia公司开发设计的多媒体软件所生成的动画(.swf)文件非常小，用在网页设计上不仅可以使网页更加生动，而且小巧玲珑下载迅速，使得动画可以在打开网页很短的时间里就得以播放。并且把音乐，动画，声效，交互方式融合在一起，可以直接嵌入网页的任一位置，非常方便。

Company Logo
1 舞台(Stage)
2 时间轴窗口
(Timeline) 3 绘图工具栏
(Drawing Toolbar) 4 标准工具栏
(Standard Toolbar)
5 图库窗口
(Library Window)
6 控制器面板
(Controller)
FLASH工作环境
西双版纳植物园
虚拟瓷都
中国金鱼
FLASH在中国科普博虚拟博物馆建设中的应用示例

Company Logo
三、网站的设计
网站设计的目的：
把信息以恰当的方式组织并呈现在网上，设法吸引人们的关注，并为浏览者提供方便的访问。
（一）网站结构的设计：设计网站的栏目。
网站的栏目可以有多层，以能够恰当地体现网站主题为好。此外，每个栏目本身应有一个大致的内容描述，以表达该栏目的设计思路，充实整个网站的总体结构设计。

Company Logo
“虎门销烟启思录”网站的结构

Company Logo
“虎门销烟启思录”网站的结构

Company Logo
三、网站的设计
（二）网页的版面设计

包括网页布局的整体造型、色彩的搭配、字体图片的样式设置、网站的标志设计等。
如：严肃庄重、清爽温馨、深沉厚重、生动活泼、古朴典雅。。。

Company Logo
简洁大方

Company Logo
风格独特，构图巧妙

Company Logo
生动活泼

Company Logo
色彩丰富

Company Logo
浓郁的文化气息

Company Logo
标题信息、栏目信息、内容信息、附加信息等，要进行合理的放置，让人看起来井井有条，主次分明。
一般来说：
屏幕中央最能引人注意，屏幕上方紧随其后，屏幕左右侧通常放置不太重要或固定信息，附加信息一般放在最下方。

Company Logo
常见网页布局类型
布局类型
布局方式
实例
“国”字型
上面是网站的标题及横幅广告，接下来是网站的主要内容，左右分别列一些小条，中间是主要内容，下面是一些网站的信息
人民网
拐角型
上面是标题广告，接下来在左侧是导航栏，右侧是正文，下面是网站的信息。

标题正文型
上面是标题，下面是正文。
左右框型
左边是导航栏，右边是正文。有时最上方会有一个小标题。
上下框型
上面是导航栏，下面是正文。
/
综合框架型
左右、上下两种框架结构的结合。
封面型（Flash型）
精美的平面或动画作为首页。
-

Company Logo
（三）网页的交互设计
用户如何访问网站？怎样从一个位置到另一个位置？怎样防止用户在网站中”迷路”?

链接点设计要考虑人们在浏览网站时通常有