第1章 网页设计基础 01 开发工具。
1．Dreamweaver CS4新增功能
在网页领域，Dreamweaver是目前最流行的网页设计与开发工具之一。
Dreamweaver目前最新版本CS4（10.0，于2008年9月发布），支持将PSD文件作为智能对象导入网页，并使网页中的图像随智能对象的改变而更新；同时，增强了代码提示引擎的功能，方便用户编写各种脚本程序。
在Dreamweaver CS4中，还新增了实时视图工具，通过Presto引擎模拟网页浏览器，执行各种网页脚本，大幅提高了网页脚本开发和调试的 效率。
另外，Dreamweaver CS4还可以方便地编写各种XML、JavaScript、CSS、ActionScript以及XSLT文档，并和Flash、Fireworks等软件一起加入了AIR编写功能。用户可使用Dreamweaver开发富互联网应用程序。
提示 使 用Dreamweaver开发AIR应用程序，需要安装Dreamweaver的AIR插件。在AIR体系中，Dreamweaver主要用来制作MXML数据文档和AIR结构化文档。
Dreamweaver CS4使用了全新的用户界面，大幅改良了工作区布局工具，用户可根据网页开发的需要，选择不同的工作区布局方式，最大限度提高
工作效率。
标题栏与 插入面板 菜单栏 面板组 属性面板 工作区 Dreamweaver支持通过两种不同的方式创建网页文档，并支持创建多种不同的文档格式。
? 通过欢迎屏幕
在打开Dreamweaver之后，在Dreamweaver的工作区会显示一个欢迎屏幕，并提供新建的文档类型列表。用户可直接单击列表中的项目，创建HTML网页文档。除了HTML文档以外，Dream- weaver还可以创建多种与网页有关的文档。例如，ColdFussion文档、PHP文档、由VBScript编写的ASP文档、XSLT样式表、CSS样式表、JavaScript
脚本、XML数据文档等。
2．创建网页文档
如果文档类型列表中并未包含用户所需要的
类型，则用户可单击【更多】按钮，打开
项卡中选择更多的文件类型。
? 执行【文件】命令
11
【新建文档】对话框，在【新建文档】对话框的选 网页设计与制作（CS4中文版）从新手到高手 网页设计与制作（CS4中文版）从新手到高手
除了通过欢迎屏幕以外，用户还可以执行【文件】|【新建】命令（或按Ctrl+N组合键），直接打开【新建文档】对话框，在对话框中选择相应的选项卡，并设置【页面类型】列表和【布局列表】等列表项，单击【创建】按钮创建。
，完成文档的
3．保存网页文档
在使用Dreamweaver创建和编辑网页之后，可以执行【文件】命令，在弹出的菜单中选择相应的命令保存网页，如表所示。
命 令 【保存】 【另存为】 【保存全部】 作 用 保存更改的文档 将文档存储为副本 保存已打开的所有文档 根据站点的【远程信息】【保存到远程服务器】 设置，将文档保存到服务器中 【另存为模板】 将文档保存为网页模板
在【新建文档】对话框中可选择5种网页文档类型，如表所示。
选项卡名 空白页 空模板 模板中的页 示例中的页 其他 说 明 创建普通空白网页或程序页 创建网页模板或程序页模板 根据已有的模板创建页面 根据已有的样式或框架创建网页 创建其他网页应用程序的文档 保存网页文档的命令
1.8 Flash CS4简介 发的一种矢量动画及多媒体开发工具。
在动画制作领域，Flash是一种易上手且功能强大的2D矢量动画制作软件，由于其制作的动画体积小、效果丰富，且支持脚本控制，因此被大量应用于互联网中。
Flash允许用户通过时间轴、元件、补间、形状等方式制作动画，也允许用户使用ActionScript脚本代码绘制图形和创建各种动画。
12 Flash是（Macromedia，后被Adobe收购）开
第1章 网页设计基础 01 1．Flash新增功能
Flash最新的版本为CS4（10.0，于2008年9月发布），相对之前的版本，Flash CS4的补间动画不再由时间轴和关键帧组成，而是完全由动画对象创建。
同时，Flash CS4还增加了动画编辑器功能，允许用户直接对补间动画的运动轨迹等属性进行操作。
另外，Flash CS4还集成了3D变形和反向骨骼工具，增强了字体引擎，并增加了直接发布AIR文件的功能。
2．创建和保存影片
Flash与Dreamweaver类似，在打开Flash CS4时，同样会打开Flash欢迎屏幕。因此，在创建Flash影片时同样可使用两种方法。
用户既可通过欢迎屏幕中的新建影片文档列表创建各种Flash文档，也可以执行【文件】|【新建】命令或按Ctrl+N组合键，打开【新建文档】对话框，通过该对话框创建新的文档。
保存Flash影片的方式与保存网页也十分类似，都允许用户将已制作的影片保存为独立的文件、另存一份副本，以及保存成为模板等。
标题栏与 菜单栏 属性面板 间轴面板 工作区 工具栏 1.9 网页设计理念 在设计网页时，可将网页根据网页的内容，即网页为用户提供的服务类型分为3类。并根据网页的类型设计网页的风格。
? 资讯类站点
资讯类站点通常是比较大型的门户网站。这类网站需要为用户提供海量的信息，在用户阅读这些信息时寻找商机。
在设计这类站点时，需要在信息显示与版面简洁等方面找到平衡点，做到既以用户阅读信息的便捷性为核心，又要保持页面的整齐和美观，防止大量的信息造成用户视觉疲劳。
在设计文本时，可着力对文本进行分色处理，
性的艺术。其是一个感性思考与理性分析相结合的过程。
网页设计不仅依赖于各种平面设计软件和网页制作软件，更依赖于网页设计者的独立思考。
1．网页设计的任务
在设计网页时，需要首先了解网页设计的任务以及网页设计的最终目的。
网页设计是艺术创造与技术开发的结合体。其任务是吸引用户，为用户创造良好的体验，在此基础上为网页的所有者提供收益。任何网页设计的行为，都是围绕这一最终目的进行的。
网页设计不仅是一门实用技术，更是一门创造
13 网页设计与制作（CS4中文版）从新手到高手 网页设计与制作（CS4中文版）从新手到高手
将各种标题、导航、内容按照不同的颜色区分。同时要对信息合理分类，帮助用户以最快的速度找到需要的信息。
以美国最大的在线购物网站亚马逊的首页 为例。其在设计中，使用了较为传统的“国”字型布局。
其网站的3类导航使用了3种字体颜色，在同一板块内的导航标题使用橙色粗体，而导航内容则使用普通的蓝色字体。在刺激用户感官的同时避免视觉疲劳。
在亚马逊首页中，每一条详细信息都保证有一张预览图片，防止大段乏味的文字使用户厌烦。
? 艺术资讯类站点
艺术资讯类站点通常是中小型的网站，例如一些大型公司、高校、企业的网站等。互联网中的大多数网站都属于这一类型。
这类网站在设计上要求较高，既需要展示大量的信息，又需要突出公司、高校和企业的形象，还需要注重用户的体验。
设计这类网站时，尤其需要注意图像与文字的
平衡，背景图像的选用以及整体网站色调的搭 配等。
在这类网站的首页不应放置过多的信息。清晰有效的分类远比铺满屏幕的产品资料更容易吸引用户的注意力。
14
以著名的软件和硬件生产商苹果为例，其首页设计上以追求简洁为主，以简明的导航条和大片的留白给用户较大的想象空间。
苹果公司在网站设计上非常有心得，其擅长使用简单的圆角矩形栏目和渐变的背景色使网站显得非常大气，对一些细节的把握也非常到位。
? 艺术类站点
艺术类站点通常体现在一些小型的企业或工作室设计中。这类网站向用户提供的信息内容较少，因此设计者可以将较多的精力放在网站的界面设计中。
上图为俄罗斯设计师foxie的个人主页，通过
大幅的留白以及简明的色彩模拟了一个书架，并以 书架上的书本和相框作为导航条。 其在设计中发布的信息并不多，因此整站用Flash制作而成，大量使用动画技术，通过绚丽的色彩展示个性。
2．网页设计的实现
第1章 网页设计基础 01 在了解了设计的目的后，即可着手进行设计。网页设计是平面设计的一个分支，因此在设计网页时，有一定的平面设计基础可以帮助设计者更好更快地把握设计的精髓。
? 设计结构图
首先，应规划网站中栏目的数量及内容，策划网站需要发布哪些东西。
然后，应根据规划的内容绘制网页的结构草图，这一部分既可以在纸上进行，也可以在计算机上通过画图板、inDesign或者其他更专业的软件 进行。
结构草图不需要太精美，只需要表现出网站的布局即可。（关于布局，请参考本章之前的内容。）
? 设计界面
在纸上或电脑上绘制好网页的结构图之后，即可根据网站的基本风格，在计算机上使用Illustrator或CorelDRAW等矢量图形软件或Photoshop、Fireworks等位图处理软件绘制网页的Logo、按钮和图标。
Logo、按钮、图标等都是网页界面设计的重要组成部分。设计这些内容时需要注意整体界面的风格一致性。包括从色调到图形的应用、圆角矩形与普通矩形的分布等。
其中，设计Logo时，可使用一些抽象的几何图形进行旋转、拼接，或将各种字母和文字进行抽象变化。例如，倾斜、切去直角、用线条切割、连接笔画、反色等。
按钮的设计较为复杂。常见的按钮主要分为圆角矩形、普通矩形、梯形、圆形以及不规则图形等。
在网页中，水平方向导航菜单的按钮设计比较随意，可以使用各种形状。而垂直方向的导航菜单则多使用矩形或圆角矩形，以使各按钮贴得更加紧密，给用户以协调的感觉。
图标是界面中非常重要的组成部分，可以起到画龙点睛的作用。在绘制图标时，需要注意图标必须和其代表的内容有明显的联系。
例如，多数网站的首页图标都会绘制一栋房
子，而多数网站的联系方式图标都是电话、信纸等通信的方式，这样的图标会使用户一眼看出其 作用。
而如果使用过于抽象的图标，则容易被用户误解，或影响用户使用网站的功能。
? 设计字体
字体是组成网页的最主要元素之一。合理分配的字体可以使网站更加美观，也更便于用户阅读。
15
网页设计与制作（CS4中文版） 从新手到高手 - 网页设计基础 - 图文
