[理学]学选—chap3网页设计工具.ppt

第四章 网页设计工具 网页设计三剑客 Macromedia公司推出网页设计三剑客： Dreamweaver 是一个“所见即所得”的可视化网站开发工具。 Fireworks以处理网页图片为特长，并可以轻松创作GIF动画。 Flash以制作网上动画为特长，它做出的动画声音动画效果都是其他软件无法比拟的。 主要内容 4.1 操作界面介绍 4.2 基本操作 4.3 构建站点和管理站点 4.4 模板和库 4.5 布局表格 4.6 层、行为、导航条 4.7 Timeline 4.1 操作界面介绍 在 Windows 中首次启动 Dreamweaver 时，会出现一个对话框，您可以从中选择一种工作区布局。并可以使用”编辑”菜单－“首选参数”对话框切换到一种不同的工作区。 4.1 操作界面介绍 4.2 基本操作 1、新建网页（注意建完先保存） 2、页面设置 3、字体排版 4、超链接编辑 5、清单和表格 6、插入图片、绘制热点 7、创建框架网页 (1)新建——基本页——[修改]|[框架页] (2)新建——框架集 (3)Alt＋点击框架，设置框架页的属性 (4)设置每个框架的name属性，实现框架之间的跳转 4.2 基本操作_框架 新建－－修改－－框架页－－－进行相应拆分 可按住alt键，点框架边，建新框架 可拖动框架到父框架边缘，取消框架 设置框架集属性：点击框架分割边，设置对应框架集的属性 边框有或无、边框宽度、颜色等 框架大小 设置框架属性：alt＋点击对应的框架页，属性面板中设置属性 设置显示的源文件 框架名称 设置每个框架的name属性，实现框架之间的跳转 实例：sy3/3-3 frameset.html 4.3 构建站点和管理站点 1、定义站点 在在菜单栏选择“站点”|“管理站点”选项，弹出“管理站点”对话框，点击“新建”，按照提示进行设置。 2、编辑站点和操作站点 将站点连到FTP服务器上，并进行网页的下载和上传操作。 3、删除站点 4、创建站点首页 编辑站点的首页index.htm，将以往的作业链接到首页中。 5、查看站点文件和链接 当建立完首页之后，就可以编辑首页，然后添加与其相关的网页，网页之间的相互链接可以通过站点管理器来查看 4.4 模板和库 1、模板 使用模板的目的： 网站要维持统一的风格，比较基本的一点是，同一频道的网页版式多数是相同的。 为了避免重复劳动，可以通过模板的形式编辑网页。将版式相同的部分做成模板，将变化的部分设置成为可以编辑的区域。 创建模板 空白模板 现有文档另存 编辑模板 使用模板 创建基于模板的文档 在现有文档上应用模板 将文档脱离出模板 2、库 模板可以用来制作整体网页的重复部分。库就是面向网页局部重复部分的。 将某些重复编辑的内容设置成为库部件即可。 例如，制作版权声明的库(chap3/dm.html) 输入版权声明的内容：?2008 yingkz 联系我们 网站说明 而后拖到库面板中命名即可 使用时，点击对应库部件，点“插入”即可。 4.5 布局表格 1、布局设计概述 2、常见的几种布局形式 3、版面布局设计要求和实例 4、使用表格、框架和图层进行布局 5、使用布局模式进行布局 4.5 布局表格 ——1、布局设计概述 版面：浏览器观看到的完整的一个页面。因各个用户的显示器分辨率不同，同一个页面的大小可能出现800*600像素、1024*768像素等等。目前， 1024*768像素占多数。 一般分辨率800×600下，页面的显示象素为780×428；在1024×768下，为1007×600。设计中，向下拖动页面是唯一增加页面尺寸的方法，但最好不超过3屏，否则最好在上方做内部链接。 布局：指的是以最适合浏览的方式将图片和文字排放在页面的不同位置。布局设计的四个步骤： 方案设计：画出页面的结构草图 初步设计：把各个功能模块安排到页面上 技术设计：确定网站标志、题头和背景图等等。 定案设计：精细化、具体化 4.5 布局表格 ——2、常见的几种布局形式 1、“┏”型布局 4.5 布局表格 ——2、常见的几种布局形式 2、“┬”型布局 4.5 布局表格 ——2、常见的几种布局形式 3、其他布局 4.5 布局表格——3、版面布局设计要求和实例 1、设计要求 整洁大方：各种元素的运用应适度 突出重点：突出主体内容 平衡对称：页面的上下左右应给人以任意匀称的感觉 风格一致：样式统一，配色合理 2、实例：详见书P90 页面尺寸 整体造型 页面题头 页脚 文本与图片 4.5 布局表格——4、使用表格、框架和图层进行布局 1、使用表格进行布局 如何创建表格、选取表格、修改表格，详见P93－95 进行布局设置，详见P95－