第5章 网页制作软件 Dreamweaver CS5(实验教程)
合集下载
Dreamweaver CS5网页设计教程第5章
第5章 在网页中创建 超链接
高等职业院校立体化精品系列规划教材
学习目标
知识目标
● 了解超链接的组成和种类。 ● 掌握文本超链接、图像超链接、外部超链接和图像热点超链接的创建方法。 ● 熟悉锚点超链接、电子邮件超链接、文件超链接和空链接的创建方法。
课堂实例预览
主要内容
1
2 3 制作“公司地图”网页 制作“给我们留言”网页 实训——制作“精品线路”网页
谢谢观赏
ቤተ መጻሕፍቲ ባይዱ
实训——制作“精品线路”网页
实训目标
本实训的目标是制作“精品线路”网页，要求在提供的网页中通过 添加各种超链接完成网页之间的关联效果。其中要求在网页上方banner 图像、导航路径以及网页下方的功能区中均实现超链接效果。本次实训 的重点在于练习超链接的创建，由于已经将一个极其简单的“精品线路” 网页制作好，只要直接在其上完成实训内容即可。
插入脚本链接
设置“关闭窗口”脚本链接
该脚本链接可以实现单击超链接后，提示是否确认关闭当前访问 页面的功能。 选择网页上方的“关闭窗口”文本，在“属性”面板的“链接” 文本框中输入“javascript:window.close()”。
插入脚本链接
设置“设为首页”脚本链接
该脚本链接可以实现将当前网页设置为主页的目的，当打开浏览 器后将自动访问该网页内容。 选择需添加链接的对象，单击 按钮，在“代码”面板选中 的对象左侧添加相应的脚本。
创建空链接
空链接不产生任何跳转的效果，一般为了统一网页外观，会为当前 页面对应的文本或图像添加空链接。空链接还可实现复杂的脚本链接功 能，比如将网页设置为首页等。 选择需创建空链接的对象，在“属性”面板的“链接”文本框中输 入“#”，按【Enter】键确认即可。
高等职业院校立体化精品系列规划教材
学习目标
知识目标
● 了解超链接的组成和种类。 ● 掌握文本超链接、图像超链接、外部超链接和图像热点超链接的创建方法。 ● 熟悉锚点超链接、电子邮件超链接、文件超链接和空链接的创建方法。
课堂实例预览
主要内容
1
2 3 制作“公司地图”网页 制作“给我们留言”网页 实训——制作“精品线路”网页
谢谢观赏
ቤተ መጻሕፍቲ ባይዱ
实训——制作“精品线路”网页
实训目标
本实训的目标是制作“精品线路”网页，要求在提供的网页中通过 添加各种超链接完成网页之间的关联效果。其中要求在网页上方banner 图像、导航路径以及网页下方的功能区中均实现超链接效果。本次实训 的重点在于练习超链接的创建，由于已经将一个极其简单的“精品线路” 网页制作好，只要直接在其上完成实训内容即可。
插入脚本链接
设置“关闭窗口”脚本链接
该脚本链接可以实现单击超链接后，提示是否确认关闭当前访问 页面的功能。 选择网页上方的“关闭窗口”文本，在“属性”面板的“链接” 文本框中输入“javascript:window.close()”。
插入脚本链接
设置“设为首页”脚本链接
该脚本链接可以实现将当前网页设置为主页的目的，当打开浏览 器后将自动访问该网页内容。 选择需添加链接的对象，单击 按钮，在“代码”面板选中 的对象左侧添加相应的脚本。
创建空链接
空链接不产生任何跳转的效果，一般为了统一网页外观，会为当前 页面对应的文本或图像添加空链接。空链接还可实现复杂的脚本链接功 能，比如将网页设置为首页等。 选择需创建空链接的对象，在“属性”面板的“链接”文本框中输 入“#”，按【Enter】键确认即可。
Dreamweaver CS5网页制作项目五
下面为“欧妮雅”网站主页创建一个“<body>” 标签样式，并设置该样式的类型和方框属性（具 体操作见视频5-1-1）。
二、为“欧妮雅”网站主页设置类样式（上）
下面创建一个类样式，并设置该样式的类型和列表 属性，然后将创建的样式应用于“欧妮雅”网站主 页中的列表文本（具体操作见视频5-1-2） 。
三、为“欧妮雅”网站主页设置类样式（下）
下面创建一个类样式，并设置该样式的边框属性， 然后将创建的样式应用于“欧妮雅”网站主页中的 相应单元格中，从而为各栏目制作分界线（具体操 作见视频5-1-3）。
四、为“欧妮雅”网站主页设置复合样式 （上）
默认情况下，网页中的链接文本为蓝色且有下划线， 下面为“欧妮雅”网站主页创建复合样式，并设置 样式的“类型”属性，使该样式的链接文本在默认 状态下为白色，而在鼠标经过时为浅紫色（具体操 作见视频5-1-4）。
预备知识
一、“CSS样式”面板
使用“CSS样式”面板可以非常方便地新建、删除、 编辑和应用样式，以及附加外部样式表等。选择 “窗口”>“CSS样式”菜单，可打开“CSS样式” 面板。
二、创建CSS样式
下面我们学习创建CSS样式的方法，并在创建过程 中了解CSS样式的类型及存在方式。
任务实施
一、为“欧妮雅”网站主页设置标签样式
项目五 应用CSS样式
任务一 样式表的基本应用 任务二 样式表的高级应用
任务一 样式表的基本应用
任务说明
使用CSS样式表可以为网页中的行、标题或单元格等 标签定义样式，也可以为链接文本定义样式，还可以 定义可应用于任何元素的样式，从而快速设置或更新 网页的外观。 在Dreamweaver CS5中，我们可以使用两种方式创建 CSS样式表，一种是利用“CSS样式”面板，在可视 化的操作环境中进行创建；一种是在“代码”视图中 直接编写相关的代码。本书我们主要学习利用“CSS 样识
二、为“欧妮雅”网站主页设置类样式（上）
下面创建一个类样式，并设置该样式的类型和列表 属性，然后将创建的样式应用于“欧妮雅”网站主 页中的列表文本（具体操作见视频5-1-2） 。
三、为“欧妮雅”网站主页设置类样式（下）
下面创建一个类样式，并设置该样式的边框属性， 然后将创建的样式应用于“欧妮雅”网站主页中的 相应单元格中，从而为各栏目制作分界线（具体操 作见视频5-1-3）。
四、为“欧妮雅”网站主页设置复合样式 （上）
默认情况下，网页中的链接文本为蓝色且有下划线， 下面为“欧妮雅”网站主页创建复合样式，并设置 样式的“类型”属性，使该样式的链接文本在默认 状态下为白色，而在鼠标经过时为浅紫色（具体操 作见视频5-1-4）。
预备知识
一、“CSS样式”面板
使用“CSS样式”面板可以非常方便地新建、删除、 编辑和应用样式，以及附加外部样式表等。选择 “窗口”>“CSS样式”菜单，可打开“CSS样式” 面板。
二、创建CSS样式
下面我们学习创建CSS样式的方法，并在创建过程 中了解CSS样式的类型及存在方式。
任务实施
一、为“欧妮雅”网站主页设置标签样式
项目五 应用CSS样式
任务一 样式表的基本应用 任务二 样式表的高级应用
任务一 样式表的基本应用
任务说明
使用CSS样式表可以为网页中的行、标题或单元格等 标签定义样式，也可以为链接文本定义样式，还可以 定义可应用于任何元素的样式，从而快速设置或更新 网页的外观。 在Dreamweaver CS5中，我们可以使用两种方式创建 CSS样式表，一种是利用“CSS样式”面板，在可视 化的操作环境中进行创建；一种是在“代码”视图中 直接编写相关的代码。本书我们主要学习利用“CSS 样识
网页设计与制作案例教程(Dreamweaver CS5+Div+CSS+JavaScript)第五章
标签
<table>...</table> <caption>…</captio n> <tr>...</tr> <td>...</td> <th>...</th>
功能
定义一个表格开始和结束 定义表格标题，可以使用属性align，属性值 top、bottom
定义表行，一行可以由多组<td>或<th>标签 组成
定义单元格，必须放在<tr>标签内 定义表头单元格，是一种特殊的单元格标签， 在表格中不是必须的
图5-9 生成的表格
图5-10
“标签检查器”面板
在“标签检查器”中列出了表格所有的属性，如表5-2所示。 请用户根据表5-2列出的表格属性，在“标签”面板中对表 格作进一步的属性设置，观察表格外观变化情况。
5.1.2 表格的基本操作
1、选择整行单元格 2、选择整列单元格 3、选择连续的多个单元格 4、选择不连续的多个单元格 5、选择表格的所有单元格
5.1.2 表格的基本操作
1）插入行
选择“修改→表格→插入行”菜单命令，即在插入点的下面出现一行。 选择“插入→表格对象→在上面插入行”菜单命令，在插入点的上面插入 一行。 选择“插入→表格对象→在下面插入行”菜单命令，在插入点的下面插入 一行。
含义
border，时显示上下左右边框 表 5-2 表 格 的 属 性 及 含 义 （ 续 ） frame box，显示上下左右边框 hsides，显示上下边框 lhs，只显示左边框
rhs，只显示右边框
void，不显示边框 vsides，只显示左右边框 none，表格内部所有线框不显示
《Dreamweaver CS5网页制作高级案例教程》教学课件 项目五
任务四 为网站首页设置第2种链接样式
有时候可能会遇到这种情况，你制作了一个网页，其 中有很多链接文本，你想用不同的链接样式来区分这 些链接文本，也就是设置两种不同样式的链接，那么 如何设置呢？本任务通过给“星光灿烂〞站点中的 “index.html〞网页添加一个链接样式来讲解此类样 式的设置方法〔具体操作见视频4-4〕。
2．CSS滤镜简介
应用CSS滤镜可为图像设置渐变、透明、阴影等效 果。在“***的CSS规那么定义〞对话框左侧的 “分类〞列表中选择“扩展〞选项，右侧的“过滤 器〔Filter〕〞下拉列表中为用户提供了多种滤镜效 果。
三、任务实践
任务一 为网站首页设置body样式
本任务将以“星光灿烂〞站点中的“index.html〞 网页为例，通过为其设置body样式，来学习标签样 式在实际网页制作中的应用〔具体操作见视频5-1〕。
任务七 为网站子页设置外部样式
我们在任务一中曾创立了一个样式文件“s1.css〞， 本任务通过将其链接到网站中的其他页面，来学习 “附加外部样式〞在实际网页制作中的应用〔具体 操作见视频4-7〕。
3．创立CSS样式
在Dreamweaver CS5中，可按照以下步骤来创立CSS 样式。
ห้องสมุดไป่ตู้
〔二〕样式表的高级应用
1．附加外部样式
一般在制作网站时，为保证同一网站中所有网页风格 的一致性，都会尽可能地使用同一种样式。这样就可 以将共用的样式保存在外部样式表文件中，然后将其 链接至各个网页文档。这不仅大大减少了工作量，还 方便了后期的维护和更新。
任务五 为网站首页设置图像样式
理论指导中简单介绍了CSS滤镜，并制作了图像半透 明效果。本任务将使用滤镜制作图像阴影效果，以进 一步学习滤镜的应用〔具体操作见视频4-5〕。
Dreamweaver CS5网页制作案例教程项目六
四、Spry可折叠面板
Spry可折叠面板是一个可以在收缩的空间内存储 内容的面板，用户可通过单击面板标签来显示或 隐藏面板内容。定位插入点后，单击“插入”面 板“布局”类别中的“Spry可折叠面板”即可将 其插入。
任务实施——为“伊韵”网站主页设置特殊效果
下面应用“Spry折叠式”为“伊韵”网站主页设置 特殊效果，来进一步巩固前面所学（具体操作见视 频6-3）。
二、Spry选项卡式面板
Spry选项卡式面板是一系列可以在收缩的空间内 存储内容的面板。浏览者可以单击相应面板标签 在各个面板之间切换。定位插入点后，单击“插 入”面板“布局”类别中的“Spry选项卡式面板” 即可将其插入。
三、Spry折叠式
Spry折叠式是一系列可以在收缩的空间内存储内容 的面板窗口。浏览者可以通过单击面板标题来显示 或隐藏面板内容。定位插入点后，单击“插入”面 板“布局”类别中的“Spry折叠式”即可将其插入。
在学习了Div的创建方法后，下面通过构建“伊韵” 网站主页的结构，来进一步巩固前面所学知识 （具体操作见视频6-1）。
任务二 Div+CSS布局中的定位方式
任务说明
要熟练应用Div+CSS布局网页，必须掌握在页面中 定位网页元素的方法。在使用Div+CSS方式布局网 页时，我们可以使用多种方式定义Div或其他元素 框在页面中的位置，其中最常用的有相对定位、绝 对定位，以及浮动定位。
任务三 应用Spry布局对象
任务说明
Spry是Dreamweaver内置的代码块，使用它可以 在网页中添加Spry菜单栏、Spry选项卡式面板、 Spry折叠式和Spry可折叠面板，本任务将分别介 绍。
预备知识
一、Spry菜单栏
Dreamweaver CS5实例教程 (5)
5.1.8 删除表格和表格内容
删除表格的操作包括删除行或列，清除表格内容。
5.1.9 缩放表格
创建表格后，可根据需要调整表格、行和列的大小。
5.1.10 合并和拆分单元格
有的表格项需要几行或几列来说明，这时需要将多个单元格合 并，生成一个跨多个列或行的单元格。
5.1.11 增加和删除表格的行和列
5.4 课堂练习——设计家园网页
使用“导入表格式数据”命令导入外部表格数据。使用“排序 表格”命令将表格的数据排序。
效果图
5.5 课堂练习——百货折扣网页
使用“页面属性”命令设置页面属性。使用“图像”和“表 格”按钮制作网页效果。使用“属性”面板设置单元格背景颜色。
效果图
5.6 课后习题——手机频道网页
使用“页面属性”命令设置页面属性。使用“表格”按钮插入 表格效果。使用“图像”按钮插入图像。
效果图
课堂学习目标
表格的简单操作 网页中的数据表格 复杂表格的排版 利用表格进行页面布局
5.1 表格的简单操作
课堂案例——时尚购物网页 表格的组成 插入表格 表格各元素的属性 在表格中插入内容 选择表格元素 复制、粘贴表格 删除表格和表格内容 缩放表格 合并和拆分单元格 增加和删除表格的行和列
5.1.1 课堂案例——时尚购物网页
5.1.4 表格各元素的属性
插入表格后，通过选择不同的表格对象，可以在“属性”面板 中看到它们的各项参数，修改这些参数可以得到不同风格的表格。
5.1.5 在表格中插入内容
建立表格后，可以在表格中添加各种网页元素，如文本、图像 和表格等。在表格中添加元素的操作非常简单，只需根据设计要求 选定单元格，然后插入网页元素即可。一般当表格中插入内容后， 表格的尺寸会随内容的尺寸自动调整。当然，还可以利用单元格的 属性来调整其内部元素的对齐方式和单元格的大小等。
实战DreamweaverCS5...
实战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根据不同的需求设置了不同风格的工作界面有经典、编码器、编码人员（高级）、设计器、设计人员（紧凑）和双重屏幕几种布局模式，其中默认的是设计器界面。
边做边学——Dreamweaver CS5网页设计案例教程05
使用表格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所示。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
5.2 Dreamweaver CS5站点管理
5.2.3 站点的发布（Windows 7旗舰版平台 ）
1. 安装Internet信息服务
单击“开始”菜单 “控制面板”命令，在窗体中选择“卸载程 2. Web服务器设置 序”，再单击窗体左侧“打开或关闭Windows功能”。 在弹出的“Windows 功能”对话框中，若“Internet信息服务”复 单击“开始”菜单 |“控制面板”命令，在窗体中选择“系统和安 3. IE浏览 选框已勾选，说明本机已安装该组件，否则选中此复选框，单击 全”，再单击窗体右侧“管理工具”，然后启动“ Internet信息服务 启动本机（ Web服务器）IE浏览器，在地址栏输入本机IP地址或 “确定”按钮，等待安装完成。 (IIS) 管理器”应用程序 localhost，进入网站的首页“index.html”
微视频5-2 演示
5.3 网页制作基本操作
5.3.2 网页的文字处理
3. 设置滚动字幕
滚动字幕是用来显示滚动文本的，如网站的最新通知等。字幕 可以水平滚动，也可以上下滚动。 在Dreamweaver CS5中利用<marquee>标签插入字幕 。
选中要做字幕的 文本 ，单击菜单 栏“插入”|“标 签”命令，打开 “标签选择器” 对话框
• 网站与网页的创建与管理
• 网页制作的基本操作
• CSS样式表的创建与使用 • 网页的各种布局方式 • 行为的应用
5.1 Dreamweaver CS5概述
5.1.1 Dreamweaver的发展
Dreamweaver 1.0 Dreamweaver CS3
Dreamweaver 2.0
Dreamweaver 2.01 Dreamweaver 3 Macromedia Dreamweaver 4 时代 Dreamweaver 5 Dreamweaver MX Dreamweaver MX 2004 Dreamweaver 8.0 Adobe 时代
单击“锐化”按钮 设置参数， 增加图像边缘的对 比度
5.3 网页制作基本操作
5.3.3 插入图像
4. 设置背景图像
设置方式 • 在“页面属性”对话框中，“外观（CSS）”和“外观 （HTML）”栏都有关于背景图像的设置。 • 用户在自定义CSS样式表中， 通过Background-image属性设 置。 背景图像样式 当背景图像没有浏览界面大时，背景图像将被复制平铺 • no-repeat（不重复）：只在图像元素的开始处显示一次图像。 • repeat（重复）：在图像元素的水平方向和垂直方向平铺图像。 当不指定平铺方式时，这是默认方式。 • repeat-x（横向重复）：在水平方向进行图像的重复显示。 • repeat-y（垂直重复）：在垂直方向进行图像的重复显示。
（1）水平线 （2）特殊符号 （3）标记列表
单击菜单栏“格式”|“列表”命令 ，通过其级联菜 单项完成操作 单击菜单栏“插入”|“HTML”|“水平线”命令
单击菜单栏“插入”|“HTML”|“特殊字符”命令， 通过其级联菜单项完成操作
“属性”面板HTML属性检查器中
也提供列表项设置
5.3 网页制作基本操作
微视频5-3 演示
5.3 网页制作基本操作
5.3.3 插入图像
3. 编辑图像
插入图像后选中该图像，“属性”面板还提供了对图像的编辑功能。
单击 “裁剪” 按钮删除图像 单击“重新取样”按钮 重新计算图像数 据量，以适应当前图像 大小
中选定区域以外的多余部分
ห้องสมุดไป่ตู้
单击“亮度和对比度”按钮 设置亮度、对比度参数
有.asp、.aspx、.php、.jsp等格式
a.html
静态网页文件后缀名 常见.htm或.html
b.html
c.html
d.html
e.php
ca.html
cb.html
cc.html
ea.html
站点文件夹：网站中所有相关文件必须存放在站点文件夹中。
5.2 Dreamweaver CS5站点管理
5.2.1 站点的创建和管理
1. 创建本地站点 站点：是一种管理网站中所有相关联文档的工具，是一种文档的组 织形式。 单击菜单栏“站点”|“新建站点”命令，打开“站点设置对象” 对话框
5.2 Dreamweaver CS5站点管理
5.2.1 站点的创建和管理
2. 管理站点 单击菜单栏“窗口”|“文件”命令，出现“文件”面板，其下拉 列表框中会出现当前站点名称。 单击下拉列表框，在下拉列表中会出现所有已经创建好的站点， 若选择“管理站点”选项，则打开“管理站点”对话框，或者直 接单击菜单栏“站点”|“管理站点”命令也可打开此对话框
单击菜单栏“文件”|“新 建”命令，打开“新建文 档”对话框
5.2 Dreamweaver CS5站点管理
5.2.2 文件的新建和管理
1. 创建文件
方式一：
选择合适对象后， 单击“创建”按钮
5.2 Dreamweaver CS5站点管理
5.2.2 文件的新建和管理
1. 创建文件
方式三：
也可以通过单击“文件”面板右上角按 钮，在弹出的“文件”菜单项中完成 文 件新建。若选择“新建文件夹”，则在 当前文件夹下新建下级文件夹
课件制作：周萱
5.1 Dreamweaver CS5概述 5.2 Dreamweaver CS5站点管理
第 5章 网页制作软件 Dreamweaver CS5
5.3 网页制作基本操作
5.4 网页布局
5.5 行为 5.6 典型习题
本章要点
• 自定义Dreamweaver CS5的工作界面与工作环境
打开“高级设置”对话框，单 击“物理路径”文本框右侧按 钮，设置好站点文件夹后，单 击“确定”按钮
5.3 网页制作基本操作
5.3.1 设置网页属性
单击工作界面下方“属性”面板 中的“页面属性”按钮，打开 “页面属性”对话框
5.3 网页制作基本操作
5.3.2 网页的文字处理
1. 添加文字
将光标置于网页中，直接输入文字内容。输入文本时，若文本要 换行有两种方式。 • 直接按<Enter>键 。上一行与下一行之间空出一行的距离，在 代码区对应的HTML标记是<p>，这是分段。 • 按<Shift>+<Enter>键进行强制换行，上一行与下一行之间很 紧密，对应的HTML标记是<br> 输入空格：按<Ctrl>+<Shift>+<Space>键，对应的HTML标记是 “ ” 。 从外部导入Word、Excel等文档。 • 例：要导入Word文档，单击菜单栏“文件”|“导入”|“Word 文档”命令，打开“导入Word文档”对话框，选择要导入的 文件，单击“打开”按钮，文本内容就被导入至网页中。
5.3 网页制作基本操作
5.3.2 网页的文字处理
3. 设置滚动字幕
• 在左侧列表中选择 “HTML标签”，在右侧 列表中选择“marquee”， 单击“插入”按钮，再 单击“关闭”按钮。 • 此时代码区生成代码 <marquee>hello</marqu ee>。 • 保存网页后预览，此 时设置滚动字幕用的是 marquee标签的默认属 性。
5.3 网页制作基本操作
5.3.2 网页的文字处理
3. 设置滚动字幕
• 在网页中选中字幕文 本，单击工作界面状 态栏“<marquee>”标 签 • 按<Ctrl>+<T>键打开 “快速标签编辑器” • 修改“<marquee>” 标签的属性
5.3 网页制作基本操作
5.3.2 网页的文字处理
4. 其他修饰
5.3 网页制作基本操作
5.3.3 插入图像
5. 插入图像占位符
在设计网页过程中，有时当要往网页中插入图像时却 没有合适的图像，这时可以先插入图像占位符代替图 像，为图像预留指定大小的空间，而不影响设计。
鼠标移至图像时，该图像切换为另一幅图像，鼠标 将光标置于网页中待插入图像位置，单击菜单栏“插入” |“图像对 从图像移走时，又恢复为原始图像 象” |“图像占位符”命令，打开“图像占位符”对话框 6. 插入鼠标经过图像
Dreamweaver CS4
Dreamweaver CS5 Dreamweaver CS5.5
Dreamweaver CS6
Dreamweaver CC ……
5.1 Dreamweaver CS5概述
5.1.2 Dreamweaver CS5工作界面与工作环境
Dreamweaver CS5工作区的操作界面主要包括菜单栏、工具 栏、状态栏、属性面板和浮动面板组等。
5.3 网页制作基本操作
5.3.4 建立超链接
3. 图像热点链接
图像热点——将图像划分成小块区域，为每个区域单独做超链接， 这样带有链接的区域就称为图像的热点。
5.3 网页制作基本操作
5.3.4 建立超链接
5.3 网页制作基本操作
5.3.2 网页的文字处理
2. 设置文本属性
文本属性设置包括设置文本字体、颜色、链接样式等。 （1）在“页面属性”对话框中设置文本
微视频5-1 演示
（2）在“属性”面板中设置文本 • CSS属性检查器：在“属性”面板中单击按钮 • HTML属性检查器：在“属性”面板中单击按钮
2. 设置图像属性
选中图像，拖动控制柄。
• 将光标分别定位至三个控制 柄处，可以分别对图像进行 水平拉伸、对角拉伸、垂直 拉伸 • 按住Shift键进行对角拉伸， 则是对图像等比例缩放。