[计算机软件及应用]第04章 网页设计工具.pptVIP

第四章 Dreamweaver基础 网页设计三剑客 Macromedia公司推出网页设计三剑客： Dreamweaver 是一个“所见即所得”的可视化网站开发工具。 Fireworks以处理网页图片为特长，并可以轻松创作GIF动画。 Flash以制作网上动画为特长，它做出的动画声音动画效果都是其他软件无法比拟的。 主要内容 4.1 操作界面介绍 4.2 基本操作 4.3 构建站点和管理站点 4.4 模板和库 4.5 布局表格 4.6 层、行为、导航条 4.1 操作界面介绍 起始界面： 4.1 操作界面介绍：主要界面与基本操作 4.2 创建站点 进行网页制作之前最好先创建站点，利用站点的管理功能可对站点中的文件进行管理。 创建站点前首先应规划站点 ? 规 划 站 点 站点的概念 规划站点结构 创建导航草图 应用举例 站点的概念 多个网页文档通过各种链接关联起来就构成了站点，站点可以小到一个网页，也可以大到整个网站。 规划站点结构 规划站点结构是指利用不同的文件夹将不同的网页、素材内容分门别类地保存，合理地组织站点目录结构，可提高工作效率，加快对站点的设计。 在制作站点时通常先在本地磁盘上创建一个文件夹，将所有在制作过程中创建和编辑的网页内容都保存在该文件夹中。在发布站点时，直接将这个文件夹上传到Web服务器上即可。如果站点内容较多或站点较大，则还需建立子文件夹以存放不同类型的网页内容。如创建一个picture子文件夹存放站点所有的图片。 创建导航草图 做好了站点的规划后，就可根据规划，制作出一个导航草图便于理清思路，制作时可直接在纸上粗略绘出导航草图。 如： 应用举例 将为一个名为“诚与”的广告公司网站进行站点结构的规划。 创建站点 4.3 网页的基本操作 1、新建网页（注意：建完，最好先保存） ①创建页面，并保存。文件名和文件夹名禁止使用中文和特殊字符。 ②设置页面标题； ③设置页面属性： 背景图片和背景颜色 链接字体颜色 正文标题字体颜色 4.3 网页的基本操作 2、网页文本编辑 设置字体颜色等属性；P88 enter shift+enter 设置段落和正文标题：P88 插入空格： 代码窗口中输入：nbsp; ctrl+shift+空格 3、插入日期、水平线、特殊字符、空格 4.3 网页的基本操作 4、插入图像： 插入普通图像 插入 拖动 插入交互式图像 交互式图像，指当鼠标经过一幅图像时，它会变为另一幅图像 设置图片属性：替代文本、边框、图像裁剪 图像和文字的混排 对齐方式 垂直边距和水平边距 4.3 网页的基本操作 5、超链接 内部链接：在同一个站点的不同网页之间建立文件的相互联系 外部链接：链接到其他网站 创建E-mail链接 创建锚点链接 先创建命名锚记 创建指向命名锚记的链接 创建图像地图 创建热点 设置超链接 4.3 网页的基本操作 6、表格 创建表格 设置表格、单元格属性 合并、拆分单元格 嵌套表格 增加或删除行、列 格式化表格：命令?格式化表格 4.3 网页的基本操作 7、框架的使用 创建框架和框架集 插入预定义的框架集 创建框架集 创建嵌套框架 编辑框架 设置框架属性：Alt＋点击框架，设置框架页的属性 设置框架集属性 删除框架 存储框架 4.3 网页的基本操作 8、嵌入表单元素 创建表单 设置表单属性 插入各种表单对象，如文本框，文本区域、复选框、单选框、按钮、列表/菜单、文件域、图像域以及跳转菜单等。 4.4 表格布局 1、布局概述 2、常见的几种布局形式 3、版面布局设计要求 4、使用表格进行布局 4.4 表格布局 ——1、布局设计概述 布局：指的是以最适合浏览的方式将图片和文字排放在页面的不同位置。布局设计的四个步骤： 方案设计：画出页面的结构草图 初步设计：把各个功能模块安排到页面上 技术设计：确定网站标志、题头和背景图等等。 定案设计：精细化、具体化 4.4 表格布局 ——2、常见的几种布局形式 1、“┏”型布局 4.4 表格布局 ——2、常见的几种布局形式 2、“┬”型布局 4.4 表格布局 ——2、常见的几种布局形式 4.4 表格布局——3、版面布局设计要求 1、设计要求 整洁大方：各种元素的运用应适度 突出重点：突出主体内容 平衡对称：页面的上下左右应给人以任意匀称的感觉 风格一致：样式统一，配色合理 4.4 布局表格 ——4、使用表格进行布局 1、布局模式 2、绘制布局表格和布局单元格 3、编辑布局表格和布局单元格 4、内容添加，制作主页 4.4 布局表格 ——4、使用表格进行布局 1、布局模式 4.4 布局表格 ——4、使用表格进行布局 2、绘制布局表格和布局单元格 4.4 布