网站设计与规划--第6章 网页设计工具.ppt

第6章 网页设计工具 主讲：opera 本章要点 网页制作工具Dreamweaver 8 图形图像处理工具Fireworks 8 动画制作工具Flash 8 6.1 网页制作工具 6.1.1 Dreamweaver 8的工作环境 6.1.2 建立网站 6.1.3 新建网页 6.1.4 输入文本 6.1.5 插入图像 6.1.6 创建表格 6.1.7 层的操作 6.1.1 Dreamweaver 8的工作环境 Dreamweaver 8工作窗口示意图 标题栏－位于Dreamweaver 8的最顶端，用来显示Dreamweaver 的标志和网页名称，其功能类似于Windows操作系统的标题栏。 菜单栏－位于标题栏的下方，提供了全面的Dreamweaver 命令，包括“文件”、“编辑”、“查看”、“插入”、“修改”、“文本”、“命令”、“站点”、“窗口”和“帮助”等10组不同功能的菜单。 “插入”面板组－包括8个子面板，分别为“常用”、“布局”、“表单”、“文本”、HTML、“应用程序”、“Flash元素”和“收藏夹”。 “属性”面板－用来设置页面上内容的属性，内容不同，“属性”面板上显示的属性也不同。 面板组－默认包含4个面板：CSS、“应用程序”、“标签检查器”和“文件”。 6.1.2 建立网站 （3）单击“下一步”按钮，在打开的对话框中选择文件存储的位置。 （4）单击“下一步”按钮，在打开的对话框中选择连接到服务器的方式为“本地/网络”，然后设置将文件存储在服务器上的地址。 （5）单击“下一步”按钮，再单击“完成”按钮，即完成站点的新建。 管理站点 6.1.3 新建网页 设置页面属性 6.1.4 输入文本 设置文本格式 6.1.5 插入图像 设置图像属性 6.1.6 创建表格 设置表格属性 6.1.7 层的操作 层的基本操作 （3）调整层的大小－在层的“属性”面板中输入高度和宽度的数值可以调整层的大小。 （4）移动层－随意在文档窗口中调整位置是层的一个很显著的特点。在层的“属性”面板中的“左”和“上”文本框中输入相应的数值，即可改变层在文档页面中的位置。 （5）更改层－在一个页面中可以创建多个层，每个层都是以Layer1，Layer2……为它的默认名称，可以对层的名称进行修改，使得每个层的内容更加明确，更改层的名称也是在“属性”面板上实现的，方法是在“层编号”文本框中输入新的名称即可。 6.2 图形图像处理工具 6.2.1 Fireworks 8的工作环境 6.2.2 文档的基本操作 6.2.3 矢量图形的操作 6.2.4 位图的操作 6.2.1 Fireworks 8的工作环境 标题栏－位于Fireworks 8的最顶端，用来显示Fireworks的标志和网页名称。 菜单栏－包括“文件”、“编辑”、“视图”、“选择”、“修改”、“文本”、“命令”、“滤镜”、“窗口”和“帮助”等10组不同功能的菜单。 编辑窗口－Fireworks 8文档对象都是在编辑窗口进行编辑操作的。编辑窗口位于程序界面的正中间，在文档编辑窗口的顶部有4个按钮，分别是原始、预览、2幅预览视图、4幅预览视图。 工具箱－默认情况下，Fireworks 8的工具箱位于编辑窗口的左侧，共分成6个部分：“选择”、“位图”、“矢量”、Web、“颜色”和“视图”。 面板组－Fireworks 8中有很多种浮动面板，它们通常停靠在一个浮动面板框架中，并以选项卡的形式存在。这种机制能够在有限的桌面空间中放置大量的浮动面板。 6.2.2 文档的基本操作 （1）选择“文件”→“保存”命令，如果文档未被保存过，则会打开“另存为”对话框，选择保存路径并输入文件名后单击“保存”按钮即可保存为PNG格式。 （2）打开要保存的文档，然后选择“窗口”→“优化”命令，打开“优化”面板，进行设置即可导出并保存为其他格式。 6.2.3 矢量图形的操作 绘制矢量图形 矢量图形是以路径定义形状的计算机图形。矢量路径的形状由路径上绘制的点确定。矢量图形的笔触颜色与路径一致，矢量图形在路径内的区域填充。使用工具箱中的矢量对象绘制工具可以通过逐点绘制来绘制基本形状、自由变形路径和复杂形状。 （1）绘制直线 绘制直线的方法很简单，首先在工具箱中选中“直线”工具，然后拖动鼠标即可绘制直线。当要绘制水平或垂直直线的时候，在拖动鼠标的同时按住Shift键。 （2）绘制矩形 和绘制直线一样，要绘制矩形等矢量图形，在工具箱中选中“矩形”工具后，拖动鼠标绘制即可。如果要得到标准的正方形或圆，则在拖动鼠标的同时按住Shift键。当然，也可以在选定工具后，在“属性”面板中进行设置。 6.2.4 位图的操