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

1、5.1 Dreamweaver简介 5.2 站点管理 5.3 制作第一个网页 5.4 超链接 5.5 使用图像 5.6 使用多媒体对象 5.7 使用表格,第5章 网页制作工具Dreamweaver基础,利用Dreamweaver的可视化编辑功能，用户可以快速地创建页面而无需编写任何代码。在Dreamweaver内可以直接对图形编辑，把Word和Excel文档复制和粘贴到Dreamweaver中，会保留字体、颜色、CSS样式表信息。 如果用户熟悉手工编写标记代码，Dreamweaver包括许多与编码相关的工具和功能，其使用将更加灵活。并且，借助Dreamweaver还可以使用服务器语言（例如AS

2、P、ASP.NET、ColdFusion标记语言、JSP和PHP）生成支持动态数据库的Web应用程序。,5.1 Dreamweaver简介,1. 启动Dreamweaver 安装好Dreamweaver后，单击“开始”“程序”“Macromedia”“Macromedia Dreamweaver”命令。Dreamweaver进行一系列初始化过程后，首先显示“工作区设置”对话框，如图5-1所示。由于要采用可视化方式设计网页，选中“设计者”单选钮，单击“确定”按钮。,5.1 Dreamweaver简介 5.1.1 Dreamweaver的启动和主工作区,图5-1 “工作区设置”对话框,2. Dre

3、amweaver的工作区 Dreamweaver的设计工作区由插入工具栏、文档工具栏、文档窗口、属性面板和面板等部分组组成，如图5-3所示。,5.1 Dreamweaver简介 5.1.1 Dreamweaver的启动和主工作区,图5-3 Dreamweaver的工作区,1. 常规参数设置 单击“编辑”“首选参数”命令，或按Ctrl+U组合键，打开“首选参数”对话框。选择“分类”列表中的“常规”选项，对话框右侧显示出相关的属性。其中通常设置的属性有文档工作区的切换和一些编辑选项。,5.1 Dreamweaver简介 5.1.2 Dreamweaver的参数设置,图5-12 常规参数设置,2.

4、面板参数设置 Dreamweaver中的面板被组织到面板组中。面板组中选定的面板显示为一个选项卡。每个面板组都可以展开或折叠，并且可以和其它面板组停靠在一起或取消停靠。面板组还可以停靠到集成的应用程序窗口中。这使得用户能够很容易地访问所需的面板，而不会使工作区变得混乱。,5.1 Dreamweaver简介 5.1.2 Dreamweaver的参数设置,图5-13 面板参数设置,3. 站点参数设置 选择“分类”列表中的“站点”选项，对话框右侧显示出相关的属性，此对话框用于为“文件”面板设置站点首选参数，如图5-14所示。,5.1 Dreamweaver简介 5.1.2 Dreamweaver的参

5、数设置,图5-14 站点参数设置,基于Internet服务器的不可知特性，因此通常将存储于Internet服务器上的站点和相关文档称作远端站点。 利用Dreamweaver可以对位于Internet服务器上的站点文档直接进行编辑和管理，但这在很多时候非常不便。 既然位于Internet服务器上的站点仍是以文件和文件夹作为基本要素的磁盘组织形式，那么能不能首先在本地计算机的磁盘上构建出整个网站的框架，编辑相应的文档，然后再将之放置到Internet服务器上呢?答案是可以的，这就是本地站点的概念。 利用Dreamweaver，可以在本地计算机上创建出站点的框架，从整体上对站点全局进行把握。在站点设

6、计完毕，可以利用各种上传工具，将本地站点上传到Internet服务器上以形成远端站点。,5.2 站点管理 5.2.1 本地站点和远端站点,设计目标 建立一个本地站点，定义站点名称和站点使用的本地根文件夹以及默认的图像文件夹，为以后的页面制作和管理打好基础。本实例定义站点的名称为“Sample”，使用的本地文件夹为“D:myweb”，默认的图像文件夹为“D:mywebimage”，站点的设置和结构如图5-15所示。,5.2 站点管理 5.2.2 建立本地站点,图5-15 需要建立的站点结构,1. 编辑站点 在Dreamweaver中创建好本地站点后，如果需要，还可以对整个站点进行编辑操作。例如，

7、编辑修改站点、复制站点、删除站点等。 2. 文件的基本操作 在Dreamweaver中，可以使用“文件”菜单来对单独的文件进行管理。例如，执行“新建”、“打开”、“保存”、“另存为”等命令 。 3. 指定站点首页 网站的门户就是首页，通常首页文件中总包含有若干指向其他主要网页的超链接，用户可以先为网站创建一个空白首页，然后编辑，并可以利用站点地图来查看网站中超链接的情况。,5.2 站点管理 5.2.3 管理本地站点,设计目标 制作一个浅黄色背景的网页，在页面上通过添加文字和水平线，展示一个旅游文化网页的宣传内容，并且在页面的右下方显示出感谢信息和当前日期，实例效果如图5-28所示。 【例5-2

8、】,5.3 制作第一个网页 5.3.1 制作网页的一般过程,图5-28 实例效果,1. 设置网页标题 设置网页标题的方法为：在文档窗口工具栏中的“标题”文本框内直接输入网页的标题文字；也可以在文档窗口中选择“修改”菜单中的“页面属性”命令，或者按Ctrl+J快捷键，打开“页面属性”对话框，选择“标题/编码”分类，在右侧的“标题”文本框内设置网页的标题，如图5-42所示。,5.3 制作第一个网页 5.3 2 设置页面属性,图5-42 设置网页标题,2. 设置网页其他属性 如果需要设置网页的其他属性，可以打开“页面属性”对话框设置，对话框的功能分类如下： (1) 外观 外观对话框主要设置网页基本页

9、面布局选项，包括页面字体、大小、文本颜色、背景颜色、背景图像、左边距、右边距、上边距和下边距，如图5-43所示。,5.3 制作第一个网页 5.3 2 设置页面属性,图5-43 外观对话框,2. 设置网页其他属性 (2) 链接 网页中的链接就是以文字或图像作为链接对象，然后指定一个要跳转的网页地址，当浏览者单击文字或其他对象时，浏览器跳转到指定的目标网页。 链接对话框主要设置网页中超级链接的字体、字体大小、各种链接颜色、链接下划线的样式，如图5-44所示。,5.3 制作第一个网页 5.3 2 设置页面属性,图5-44 链接对话框,2. 设置网页其他属性 (3) 跟踪图像 跟踪图像是放在“文档”窗

10、口背景中的JPEG、GIF或PNG图像。在跟踪图像对话框中，可以隐藏图像、设置图像的不透明度和更改图像的位置，如图5-45所示。,5.3 制作第一个网页 5.3.2 设置页面属性,图5-45 跟踪图像对话框,1. 文本 文本的操作主要包括：输入文字、设置文字大小、设置字体、设置文本颜色、设置文本对齐方式等。 2. 插入日期 Dreamweaver提供了一个方便的日期对象，该对象使用户可以以任何喜欢的格式插入当前日期，还可以选择在每次保存文件时都自动更新该日期。 将插入点放置到要插入日期的位置，执行“插入”“日期”命令，弹出“插入日期”对话框，选择一种日期格式。设置完毕后，单击“确定”按钮完成日

11、期的插入。,5.3 制作第一个网页 5.3.3 网页基本元素,1. 超链接的分类 根据超链接目标文件的不同，超链接可分为页面超链接、锚点超链接、电子邮件超接链等；根据超链接单击对象的不同，超链接可分为文字超链接、图像超链接、图像映射等。 2. 路径 (1) 绝对路径 绝对路径是包括服务器规范在内的完全路径（网页一般使用http:/）。 (2) 根目录相对路径 根目录相对路径是指从站点根文件夹到被链接文档经过的路径。 (3) 文档目录相对路径 文档目录相对路径是指以当前文档所在位置为起点到被链接文档经过的路径，这种方式适合于创建本地链接。,5.4 超链接 5.4.1 超级链接的基本概念,设计目标

12、 制作一个介绍中国四大名著的页面，使用了锚点链接、页面间链接和电子邮件链接等技术。当用户单击主页面栏目中某个名著的链接时，首先链接到本页面内该作品的简介位置，如果用户需要查看详细内容，单击“详细内容”链接，进入相应的页面显示出详细的作品内容。实例效果如图5-50所示。 【例5-3】,5.4 超链接 5.4.2 在Dreamweaver中设置超链接,图5-50 实例效果,设计目标 制作一个学校建筑的展示网页，通过学校校风图像和循环滚动图像的展示，突出学校的建筑风格和特色。循环的图像支持超链接，并且鼠标移动到图像上时，画面静止；鼠标移出图像后，图像继续滚动。在浏览器中的显示效果如图5-62所示。

13、【例5-4】,5.5 使用图像 5.5.1 插入图像,图5-62 实例效果,设计目标 制作一个认识世界地图的网页，当用户将鼠标移至地图的不同组成部分时，显示出相应的说明文字，例如鼠标移到南美洲区域上时，便会显示“南美洲”的字样。单击地图图像的不同组成部分时，打开相应的链接页面显示相应的简介，效果如图5-71所示。 【例5-5】,5.5 使用图像 5.5.2 图像映射,图5-71 实例效果,设计目标 制作一个翻转图像的效果，原始图像是一个幻想电脑的卡通人物。当鼠标经过图像时，图像变为一幅真正的电脑画面，而鼠标离开时，图像又恢复为原始图像。当单击图像时，链接到另外一个介绍电脑的页面，效果如图5-7

14、6所示。 【例5-6】,5.5 使用图像 5.5.3 制作鼠标经过图像,图5-76 实例效果,网页中的多媒体对象包括音频、视频、Flash电影、Java小程序、Shockwave电影和ActiveX控件等对象。在网页中添加多媒体对象可以使制作出的网页有声有色。目前在网络上播放的音频和视频文件格式包括： 音频：主要包含Wav、Midi、Mp3、Aif和Ra等文件格式。 视频：主要有RealMedia、Windows Medla、QuickTime三种视频文件，其中RealMedia和Windows Media格式是目前国内比较广泛使用的。 设计目标 为前面章节中制作的校园建筑网页制作背景音乐。当

15、页面打开时，自动播放一首温馨的Midi背景音乐，使用户感觉非常亲切。 【例5-7】,5.6 使用多媒体对象 5.6.1 添加背景音乐,设计目标 制作一个影音播放的娱乐页面。当页面打开时，页面内左上角嵌入浏览器自动播放一段标志视频；当用户单击“点歌台”中的歌曲链接时，在新的窗口打开“Windows Media Player”播放器播放该歌曲；当用户单击“演唱会欣赏”中的视频链接时，在新的窗口打开“Windows Media Player”播放器播放视频动画。实例效果如图5-79所示。 【例5-8】,5.6 使用多媒体对象 5.6.2 使用声音与视频,图5-79 实例效果,表格是页面布局极为有用的设计工具。在设计页面时，往往要利用表格来定位页面元素。使用表格可以导