第5章 网页制作工具Dreamweaver 基础.ppt

5 1DreamweaverMX2004简介5 2站点管理5 3制作第一个网页5 4超链接5 5使用图像5 6使用多媒体对象5 7使用表格 第5章网页制作工具DreamweaverMX2004基础 利用Dreamweaver的可视化编辑功能 用户可以快速地创建页面而无需编写任何代码 在Dreamweaver内可以直接对图形编辑 把Word和Excel文档复制和粘贴到Dreamweaver中 会保留字体 颜色 CSS样式表信息 如果用户熟悉手工编写标记代码 Dreamweaver包括许多与编码相关的工具和功能 其使用将更加灵活 并且 借助Dreamweaver还可以使用服务器语言 例如ASP ASP NET ColdFusion标记语言 JSP和PHP 生成支持动态数据库的Web应用程序 目前 Dreamweaver的最新版本是DreamweaverMX2004v7 01 如果用户安装的是v7 0 一定要升级为v7 01 否则有些功能将不能使用 如时间轴 5 1DreamweaverMX2004简介 1 启动DreamweaverMX2004安装好DreamweaverMX2004后 单击 开始 程序 Macromedia MacromediaDreamweaverMX2004 命令 DreamweaverMX2004进行一系列初始化过程后 首先显示 工作区设置 对话框 如图5 1所示 由于要采用可视化方式设计网页 选中 设计者 单选钮 单击 确定 按钮 5 1DreamweaverMX2004简介5 1 1DreamweaverMX2004的启动和主工作区 图5 1 工作区设置 对话框 2 DreamweaverMX2004的工作区DreamweaverMX2004的设计工作区由插入工具栏 文档工具栏 文档窗口 属性面板和面板等部分组组成 如图5 3所示 5 1DreamweaverMX2004简介5 1 1DreamweaverMX2004的启动和主工作区 图5 3DreamweaverMX2004的工作区 1 常规参数设置单击 编辑 首选参数 命令 或按 Ctrl U 组合键 打开 首选参数 对话框 选择 分类 列表中的 常规 选项 对话框右侧显示出相关的属性 其中通常设置的属性有文档工作区的切换和一些编辑选项 5 1DreamweaverMX2004简介5 1 2DreamweaverMX2004的参数设置 图5 12常规参数设置 2 面板参数设置Dreamweaver中的面板被组织到面板组中 面板组中选定的面板显示为一个选项卡 每个面板组都可以展开或折叠 并且可以和其它面板组停靠在一起或取消停靠 面板组还可以停靠到集成的应用程序窗口中 这使得用户能够很容易地访问所需的面板 而不会使工作区变得混乱 5 1DreamweaverMX2004简介5 1 2DreamweaverMX2004的参数设置 图5 13面板参数设置 3 站点参数设置选择 分类 列表中的 站点 选项 对话框右侧显示出相关的属性 此对话框用于为 文件 面板设置站点首选参数 如图5 14所示 5 1DreamweaverMX2004简介5 1 2DreamweaverMX2004的参数设置 图5 14站点参数设置 基于Internet服务器的不可知特性 因此通常将存储于Internet服务器上的站点和相关文档称作远端站点 利用Dreamweaver可以对位于Internet服务器上的站点文档直接进行编辑和管理 但这在很多时候非常不便 既然位于Internet服务器上的站点仍是以文件和文件夹作为基本要素的磁盘组织形式 那么能不能首先在本地计算机的磁盘上构建出整个网站的框架 编辑相应的文档 然后再将之放置到Internet服务器上呢 答案是可以的 这就是本地站点的概念 利用Dreamweaver 可以在本地计算机上创建出站点的框架 从整体上对站点全局进行把握 在站点设计完毕 可以利用各种上传工具 将本地站点上传到Internet服务器上以形成远端站点 5 2站点管理5 2 1本地站点和远端站点 设计目标建立一个本地站点 定义站点名称和站点使用的本地根文件夹以及默认的图像文件夹 为以后的页面制作和管理打好基础 本实例定义站点的名称为 Sample 使用的本地文件夹为 D myweb 默认的图像文件夹为 D myweb image 站点的设置和结构如图5 15所示 5 2站点管理5 2 2建立本地站点 图5 15需要建立的站点结构 1 编辑站点在Dreamweaver中创建好本地站点后 如果需要 还可以对整个站点进行编辑操作 例如 编辑修改站点 复制站点 删除站点等 2 文件的基本操作在Dreamweaver中 可以使用 文件 菜单来对单独的文件进行管理 例如 执行 新建 打开 保存 另存为 等命令 3 指定站点首页网站的门户就是首页 通常首页文件中总包含有若干指向其他主要网页的超链接 用户可以先为网站创建一个空白首页 然后编辑 并可以利用站点地图来查看网站中超链接的情况 5 2站点管理5 2 3管理本地站点 设计目标制作一个浅黄色背景的网页 在页面上通过添加文字和水平线 展示一个旅游文化网页的宣传内容 并且在页面的右下方显示出感谢信息和当前日期 实例效果如图5 28所示 例5 2 5 3制作第一个网页5 3 1制作网页的一般过程 图5 28实例效果 1 设置网页标题设置网页标题的方法为 在文档窗口工具栏中的 标题 文本框内直接输入网页的标题文字 也可以在文档窗口中选择 修改 菜单中的 页面属性 命令 或者按 Ctrl J 快捷键 打开 页面属性 对话框 选择 标题 编码 分类 在右侧的 标题 文本框内设置网页的标题 如图5 42所示 5 3制作第一个网页5 32设置页面属性 图5 42设置网页标题 2 设置网页其他属性如果需要设置网页的其他属性 可以打开 页面属性 对话框设置 对话框的功能分类如下 1 外观外观对话框主要设置网页基本页面布局选项 包括页面字体 大小 文本颜色 背景颜色 背景图像 左边距 右边距 上边距和下边距 如图5 43所示 5 3制作第一个网页5 32设置页面属性 图5 43外观对话框 2 设置网页其他属性 2 链接网页中的链接就是以文字或图像作为链接对象 然后指定一个要跳转的网页地址 当浏览者单击文字或其他对象时 浏览器跳转到指定的目标网页 链接对话框主要设置网页中超级链接的字体 字体大小 各种链接颜色 链接下划线的样式 如图5 44所示 5 3制作第一个网页5 32设置页面属性 图5 44链接对话框 2 设置网页其他属性 3 跟踪图像跟踪图像是放在 文档 窗口背景中的JPEG GIF或PNG图像 在跟踪图像对话框中 可以隐藏图像 设置图像的不透明度和更改图像的位置 如图5 45所示 5 3制作第一个网页5 3 2设置页面属性 图5 45跟踪图像对话框 1 文本文本的操作主要包括 输入文字 设置文字大小 设置字体 设置文本颜色 设置文本对齐方式等 2 插入日期Dreamweaver提供了一个方便的日期对象 该对象使用户可以以任何喜欢的格式插入当前日期 还可以选择在每次保存文件时都自动更新该日期 将插入点放置到要插入日期的位置 执行 插入 日期 命令 弹出 插入日期 对话框 选择一种日期格式 设置完毕后 单击 确定 按钮完成日期的插入 5 3制作第一个网页5 3 3网页基本元素 1 超链接的分类根据超链接目标文件的不同 超链接可分为页面超链接 锚点超链接 电子邮件超接链等 根据超链接单击对象的不同 超链接可分为文字超链接 图像超链接 图像映射等 2 路径 1 绝对路径绝对路径是包括服务器规范在内的完全路径 网页一般使用http 2 根目录相对路径根目录相对路径是指从站点根文件夹到被链接文档经过的路径 3 文档目录相对路径文档目录相对路径是指以当前文档所在位置为起点到被链接文档经过的路径 这种方式适合于创建本地链接 5 4超链接5 4 1超级链接的基本概念 设计目标制作一个介绍中国四大名著的页面 使用了锚点链接 页面间链接和电子邮件链接等技术 当用户单击主页面栏目中某个名著的链接时 首先链接到本页面内该作品的简介位置 如果用户需要查看详细内容 单击 详细内容 链接 进入相应的页面显示出详细的作品内容 实例效果如图5 50所示 例5 3 5 4超链接5 4 2在Dreamweaver中设置超链接 图5 50实例效果 设计目标制作一个学校建筑的展示网页 通过学校校风图像和循环滚动图像的展示 突出学校的建筑风格和特色 循环的图像支持超链接 并且鼠标移动到图像上时 画面静止 鼠标移出图像后 图像继续滚动 在浏览器中的显示效果如图5 62所示 例5 4 5 5使用图像5 5 1插入图像 图5 62实例效果 设计目标制作一个认识世界地图的网页 当用户将鼠标移至地图的不同组成部分时 显示出相应的说明文字 例如鼠标移到南美洲区域上时 便会显示 南美洲 的字样 单击地图图像的不同组成部分时 打开相应的链接页面显示相应的简介 效果如图5 71所示 例5 5 5 5使用图像5 5 2图像映射 图5 71实例效果 设计目标制作一个翻转图像的效果 原始图像是一个幻想电脑的卡通人物 当鼠标经过图像时 图像变为一幅真正的电脑画面 而鼠标离开时 图像又恢复为原始图像 当单击图像时 链接到另外一个介绍电脑的页面 效果如图5 76所示 例5 6 5 5使用图像5 5 3制作鼠标经过图像 图5 76实例效果 网页中的多媒体对象包括音频 视频 Flash电影 Java小程序 Shockwave电影和ActiveX控件等对象 在网页中添加多媒体对象可以使制作出的网页有声有色 目前在网络上播放的音频和视频文件格式包括 音频 主要包含Wav Midi Mp3 Aif和Ra等文件格式 视频 主要有RealMedia WindowsMedla QuickTime三种视频文件 其中RealMedia和WindowsMedia格式是目前国内比较广泛使用的 设计目标为前面章节中制作的校园建筑网页制作背景音乐 当页面打开时 自动播放一首温馨的Midi背景音乐 使用户感觉非常亲切 例5 7 5 6使用多媒体对象5 6 1添加背景音乐 设计目标制作一个影音播放的娱乐页面 当页面打开时 页面内左上角嵌入浏览器自动播放一段标志视频 当用户单击 点歌台 中的歌曲链接时 在新的窗口打开 WindowsMediaPlayer 播放器播放该歌曲 当用户单击 演唱会欣赏 中的视频链接时 在新的窗口打开 WindowsMediaPlayer 播放器播放视频动画 实例效果如图5 79所示 例5 8 5 6使用多媒体对象5 6 2使用声音与视频 图5 79实例效果 表格是页面布局极为有用的设计工具 在设计页面时 往往要利用表