下载文档原格式
实战DreamweaverCS5...学习目标掌握Dreamweaver CS5工作界面的基本操作能利用站点定义向导创建站点和编辑管理站点初步体验制作一个完整网站的方法本章内容1.1 Dreamweaver CS5简述1.2 Dreamweaver CS5的工作界面和基本操作1.3 Dreamweaver 站点的建立及规划1.4 文件的基本操作1.5 制作第一个网站“藏獒传说”1.1 Dreamweaver CS5概述Dreamweaver CS5是美国Adobe公司推出的集网页制作和站点管理于一身的网页制作软件，也是第一个专门为网页设计师量身定制的可视化网页制作软件，利用它可以制作出跨越平台限制和浏览器限制的、充满丰富动感的网页。
以前，网页设计者在制作网页时必须熟练掌握HTML语言和JavaScript，但是现在设计者使用Dreamweaver CS5就可以轻松制作出精美的网页，而且在制作过程中可以同步预览制作效果，使得网页设计过程简单明了。
Dreamweaver CS5在原来版本的功能基础之上进行了改进和升级，功能更强大。
它不仅可以制作出任何结构复杂的静态网页，具有完美的操作界面、强大的模板功能、创建动态网页、强大的代码编辑功能，在Dreamweaver CS5中，CSS功能更加完整、站点管理更为简捷、高效。
1.2 Dreamweaver CS5的工作界面和基本操作1.2.1 Dreamweaver CS5的启动单击“开始”按钮，选择“程序”中的“Adobe Dreamweaver CS5”命令，就可以启动Dreamweaver CS5应用程序。
启动Dreamweaver CS5后首先看到的画面是开始页面，供用户选择新建文件的类型，或打开已有的文档等，如图所示。
在此选择“新建”下的“HTML”选项，，便可进入工作界面。
1.2 Dreamweaver CS5的工作界面和基本操作1.2.1 Dreamweaver CS5的启动Dreamweaver CS5根据不同的需求设置了不同风格的工作界面有经典、编码器、编码人员（高级）、设计器、设计人员（紧凑）和双重屏幕几种布局模式，其中默认的是设计器界面。
使用表格5.1.5【实战演练】——租车网页使用“表格”按钮，插入表格；使用“页面属性”命令，设置页面的边距、页面标题；使用“图像”按钮，插入图像布局网页。
（最终效果参看光盘中的“Ch05> 效果> 租车网页> index.html”，如图5-1所示。
）图5-11．设置页面属性并插入表格1 启动Dreamweaver CS5，新建一个空白文档。
新建页面的初始名称是“Untitled-1.html”。
选择“文件> 保存”命令，弹出“另存为”对话框，在“保存在”选项的下拉列表中选择站点目录保存路径，在“文件名”选项的文本框中输入“index”，单击“保存”按钮，返回到编辑窗口。
2 选择“修改> 页面属性”命令，在弹出的“页面属性”对话框左侧“分类”选项列表中选择“外观”选项，将“左边距”、“右边距”、“上边距”和“下边距”选项均设为0，如图5-2所示，单击“确定”按钮。
3 单击“插入”面板“常用”选项卡中的“表格”按钮，在弹出的“表格”对话框中进行设置，如图5-3所示，单击“确定”按钮，效果如图5-4所示。
保持表格的选取状态，在“属性”面板“对齐”选项的下拉列表中选择“居中对齐”选项。
第5章使用表格CHAPTER 5图5-2 图5-3图5-42．设置单元格背景颜色并插入图像1 将光标置入到第1行单元格中，在“属性”面板“水平”选项的下拉列表中选择“居中对齐”选项，将“高”选项设为254，“背景颜色”设为青蓝色（#4488CF），如图5-5所示。
表格效果如图5-6所示。
图5-5图5-62 单击“插入”面板“常用”选项卡中的“图像”按钮，在弹出的“选择图像源文件”对话框中选择光盘“Ch05 > 素材> 租车网页> images”文件夹中的“img_03.jpg”，单击“确定”按钮完成图片的插入，效果如图5-7所示。
图5-7边做边学——Dreamweaver CS5网页设计案例教程中等职业教育数字艺术类规划教材3 将光标置入到第2行单元格中，单击“插入”面板“常用”选项卡中的“图像”按钮，在弹出的“选择图像源文件”对话框中选择光盘“Ch05 > 素材> 租车网页> images”文件夹中的“img_06.jpg”，单击“确定”按钮完成图片的插入，效果如图5-8所示。
第5章 超链接77建立图像超链接的操作步骤如下：在【文档】窗口中选择需要建立超链接的图像。
在【属性】面板中，单击【链接】项文本框后的【浏览文件】按钮，为图像添加链接。
图像添加链接后会出现一个边框，如不需要，可在【属性】面板的【边框】项文本框内输入0。
在【替换】项中可以输入替换文字。
设置替换文字后，当图像不能正常显示时，会在图像的位置显示替换文字。
浏览时把鼠标悬停在图像上也会显示替换文字。
按<F12>键预览网页效果。
鼠标经过图像是指当鼠标指针经过一幅图像时，图像的显示会变为另一幅图像。
鼠标经过图像实际上是由两张图像组成，一张称为原始图像，另一张称为鼠标经过图像。
一般来说，原始图像和鼠标经过图像尺寸必须相同，如果图像的大小不同，Dreamweaver 会自动调整鼠标经过图像的大小，使之与原始图像匹配。
建立鼠标经过图像的操作步骤如下：在【文档】窗口中将光标置于需要添加鼠标经过图像的位置。
选择菜单【插入】|【图像】|【鼠标经过图像】，在【插入鼠标经过图像】对话框中分别单击【原始图像】和【鼠标经过图像】文本框右侧的【浏览】按钮设置图像路径。
在【替换文本】文本框中设置替换文字。
在【按下时，前往的URL 】文本框中设置跳转的网页文件路径，当浏览者单击图像时打开此网页。
单击【确定】按钮，按<F12>键预览网页效果。
5.4前面介绍的图像超链接，一个图像只能设置一个链接目标，如果要实现单击一个图像的不同区域跳转到不同的链接目标，这就需要设置热点链接。
热点链接是在一个图像中创建几个不同的几何图形区域，以这些区域为超链接的源端点，然后分别为这些几何区域建立不同的超链接。
图像中建立超链接的几何区域称为热点。
案例学习目标：学习创建热点链接。
案例知识要点：使用【属性】面板创建热点链接。
素材所在位置：光盘/案例素材/ch05/课堂案例-儿童课堂。
案例效果如图5-32所示。
