第5章 网页制作软件 Dreamweaver CS5(实验教程)

实战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所示。

超链接4.1.5【实战演练】——摩托车改装网页使用“属性”面板，为文字制作空链接效果，使用“电子邮件链接”按钮，制作电子邮件链效果，使用“属性”面板，为文字制作下载链接效果；使用“CSS样式”改变链接的显示效果。

（最终效果参看光盘中的“Ch04> 素材> 摩托车改装网页> index.html”，如图4-1所示。

）1．创建空链接1 选择“文件> 打开”命令，在弹出的“打开”对话框中选择光盘中的“Ch04 > 素材>摩托车改装网页> index.html”文件，单击“打开”按钮打开文件，如图4-2所示。

图4-1 图4-22 选中如图4-3所示的文字，在“属性”面板“链接”选项右侧的文本框中输入“#”，如图4-4所示，按Enter键，确认文字的输入，创建空链接，效果如图4-5所示。

图4-3 图4-4 图4-53 用相同的方法为其他文字创建空链接，效果如图4-6所示。

第4章超链接CHAPTER 4图4-62．创建下载链接1选中如图4-7所示的文字，单击“属性”面板“链接”选项右侧的“浏览文件”按钮，在弹出的“选择文件”对话框中选择“Ch04 > 素材 > 摩托车改装网页 > images ”中的“mtc.zip ”文件，如图4-8所示。

图4-7 图4-82单击“确定”按钮，创建下载链接，“属性”面板如图4-9所示，效果如图4-10所示。

图4-9 图4-103．创建电子邮件链接1选中如图4-11所示的文字，单击“插入”面板“常用”选项卡中的“电子邮件链接”按钮，在弹出的“电子邮件链接”对话框中进行设置，如图4-12所示。

图4-11 图4-122单击“确定”按钮，创建电子邮件链接，“属性”面板如图4-13所示，效果如图4-14所示。

边做边学——Dreamweaver CS5网页设计案例教程中等职业教育数字艺术类规划教材图4-13 图4-14 4．调整超链接的显示效果1 选择“窗口> CSS样式”命令，弹出“CSS样式”面板，单击面板中的“新建CSS规则”按钮，在弹出的“新建CSS规则”对话框中进行设置，如图4-15所示，单击“确定”按钮，弹出“a:link,a:visited的CSS规则定义”对话框，在左侧的“分类”选项列表中选择“类型”选项，将右侧的“Color”选项设为黑色，勾选“Text-decoration”选项下的“none”，如图4-16所示，单击“确定”按钮，创建超链接样式，效果如图4-17所示。

Dreamweaver CS5教程第一课：网页设计基础一、网页的概述1、网页与网站浏览网页时在浏览器中看到的一个个页面就是网页，而多个相关的网页的集合就构成了一个网站2、浏览网页的工具－浏览器浏览器：用于打开显示网页的软件。

最常用的是Windows系统自带的IE浏览器。

还有火狐Firefox、360安全浏览器、遨游、腾讯、TT等等。

1）网址：用于定位某个网站某个页面的一串字符，通常是这种格式/nba.shtm12) 主页：访问网站时，默认打开的第一个页面就是主页也叫首页。

二、初识Dreamweaver1、制作网站的流程规划网站类型及主题－搜集资料－使用软件进行网页制作－测试及发布2、认识Dreamweaver是当前最流行、最方便的网页设计和网站开发工具软件。

Dreamweaver：梦想编辑者。

通过这个工具，实现编辑网页的梦。

Dream：梦想Weaver：织布者，织工早期的Macromedia公司推出的“网页三剑客”之一。

“网页三剑客”指的是Dreamweaver、Flash、Fireworks这三个软件，它们这三个集合起来，就像江湖中最厉害的剑客一样，成为了网站开发中专用利器。

它集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别开发的可视化网页开发工具，前两年Macromedia公司被Adobe公司收购，DM CS5是最新推出的版本。

三、创建站点1、什么是站点Dreamweaver的站点是一种管理网站中所有相关联文件的工具，通过站点可以对网站的相关页面及各类素材进行统一管理，还可以使用站点管理实现将文件上传到网页服务器，测试网站简单的说就是一个文件夹，在这个文件夹里包含了网站中所有用到的文件，我们通过这个文件夹（站点），对我们的网站进行管理，有次序，一目了然。

2、创建站点。

计算机网络与网页制作DreamweaverCS5案例教程课程设计引言计算机网络和网页制作是现代社会中十分重要的技能。

随着互联网的普及，越来越多的人需要学习这些技能以应对工作和生活中的需要。

本课程设计旨在通过Dreamweaver CS5这一工具，为初学者提供一些基础的网页制作技能，同时介绍一些计算机网络的基本知识。

通过学习这些内容，学生将能够更加深入地了解计算机网络和网页制作的重要性，同时掌握一些基本的网页设计技巧。

课程目标•培养学生对计算机网络和网页制作的基本理解•掌握HTML和CSS的基本语法和语义•使用Dreamweaver CS5来制作网页•具备基本的网页设计技巧教学内容单元一计算机网络•网络基础知识•OSI七层模型•TCP/IP协议•网络拓扑结构单元二 HTML和CSS基础•HTML标记和标记属性•HTML布局•常用CSS属性•CSS选择器单元三 Dreamweaver CS5使用和网页制作•Dreamweaver CS5介绍•网页创建和结构•CSS样式应用•图像和多媒体的使用单元四网页设计技巧•网页颜色的搭配•图片和文本的结合•网页布局的设计•图片和背景的处理教学方式本课程将采用讲授、实践和课堂互动结合的方式进行，其中包括以下内容：•讲解：通过讲解基本理论和实际案例，使学生了解计算机网络和网页制作的知识和技巧；•实践：通过课堂练习和作业，切实帮助学生掌握Dreamweaver CS5和网页制作的基本技巧；•课堂互动：通过互动和讨论，培养学生的网页设计能力和沟通能力。

教学评估•课堂作业：通过布置每个单元的小作业，检验学生掌握程度；•课堂测试：通过测试学生对各个单元的理解和掌握程度；•总结报告：通过学生自主完成的综合性作业，检验学生综合应用所学知识的能力。

教学资源•Dreamweaver CS5软件•网络教学课件•网络实验环境•相关网页设计材料和案例结语通过本课程的学习，学生将能够掌握计算机网络和网页制作的基本知识和技巧。

学习目标能够创建、编辑、删除CSS样式能够创建并灵活运用类样式能够创建标签样式重新定义HTML标签 能够创建并灵活运用复合内容样式。

能够附加外部样式表文件。

本章内容5.1　类样式的创建与应用5.2　标签样式与复合内容样式的创建与应用5.1　类样式的创建与应用5.1.1 案例制作：书法背后的人生通过本案例的操作，你将学会:1）创建CSS样式的一般方法。

2）如何创建和应用类样式。

5.1　类样式的创建与应用5.1.1 案例制作：书法背后的人生操作步骤：（1）规划站点新建文件夹“shufa_beihou”，将素材文件夹中所有文件和文件夹拷贝到“shufa_beihou”文件夹中。

（2）定义站点在Dreamweaver CS5中，单击菜单“站点”→“新建站点”命令，通过“站点设置对象”对话框定义站点，站点名称为“菁菁家园”，本地站点文件夹设置为shufa_beihou文件夹。

打开shufa_rensheng_1.html。

（3）创建并应用类样式CSS样式“.content”该样式用来修饰文章内容，字体为宋体，大小为9pt，颜色代码为#090，行高140%。

1）选择菜单“窗口”→“CSS样式”命令，打开“CSS样式”面板，如果“CSS样式”命令前已打对勾，表示“CSS样式”面板已经打开，无需执行此命令。

2）单击“CSS样式”面板右下角的新建CSS规则按钮，打开“新建CSS规则”对话框。

5.1　类样式的创建与应用5.1.1 案例制作：书法背后的人生操作步骤：3）在对话框中“选择器类型”选择“类（可用于任何HTML元素）”，“选择器名称”文本框中输入“.content”，“规则定义”选择“仅限该文档”，如图所示。

5.1　类样式的创建与应用5.1.1 案例制作：书法背后的人生操作步骤：4）单击“确定”按钮，打开“CSS规则定义”对话框，在左侧“分类”列表中选择“类型”，右侧设置字体为宋体，大小为9pt，行高140%，颜色为#090，如图所示。