精品教程 Dreamweaver8第3章
第三章 Dreamweaver 8基础知识-第3章Dreamweaver 8基础知识
4
5.3 创建网页 5.3.1 页面属性的设定 1．设置“外观”页面属性 2．设置“链接”页面属性 3．设置“标题”页面属性 4．设置“标题/编码”页面属性 5．设置“跟踪图像”页面属性
《网页设计与制作》
5
5.3.2 网页文字的处理 在网页中输入文本是最基本的操作。在 “文档窗口”中可以直接输入文字，一般 Dreamweaver 8中的文本段落是自动换行的， 即在输入文字时，若一行文字超过了窗口显示 范围时，会自动换到下一行。如果在文本输入 的过程中需要划分段落，可以用Enter键进行 换行，用Enter键换行后上下段落的行间距为 一行。如果用Shift+Enter键进行强制换行，换 行所产生的行间距为用Enter键换行所产生的 行间距的一半。另外“文档窗口”也支持 Word的复制、粘贴等功能。
第3章 Dreamweaver 8基础知识
《网页设计与制作》
1
5.1 Dreamweaver 8概述 5.1.1 Dreamweaver 8的新增功能 Dreamweaver 8新增了许多功能，大大改 善了软件的易用性，使用户无论处于设计环 境还是编码环境都可以方便地制作页面。新 增的主要功能有： 1. 用户界面的改进 2．多种样式呈现面板 3．新的标准CSS面板 4．与最新技术和标准集成 5．缩放功能 6．改进的WebDAV
《网页设计与制作》
6
5.3.3 网页图像的处理 1．图像的添加和编辑 2．插入其它图像元素 1）插入“图像占位符” 2）插入“鼠标经过图像” 5.3.4 制作多媒体页面 为了增强网页的表现力，丰富文档的显示效果，可以 向其Flash动画、Java小程序、音频播放插件等多媒体内容。 1．插入Flash动画 2．插入Flash按钮 3．插入声音
Dreamweaver8 ppt教程 第03章
3.4文档的基本操作
在Dreamweaver 8中提供很便捷的文档的打
开、关闭、保存操作，指定页面的标题、 背景图像、背景颜色以及网页文本和链接 的颜色。
3.4.1打开和关闭网页 3.4.2保存网页
3.4.3设置文档的页面属性
1.5实战演练
在本节将一些学习如何创建一个名称 为【乐乐网站】的网站，并在该站点中创 建一个名称为index.html的主页文档和用于 存放网页图片的images文件夹。最后将 index.html文档指定为该网站的首页面。
3.1认识站点 3.1.1了解站点的基本概念 3.1.2规划站点结构 3.2Dreamweaver 8站点的创建和管理 3.2.1创建本地站点 3.2.2打开现有站点 3.2.3编辑站点 3.2.4删除站点 3.2.5复制站点 3.2.6导出和导入站点 3.3操作站点文件 3.3.1创建文件夹 3.3.2创建文件 3.3.3文件的移动、复制和粘贴 3.3.4设置主页 3.3.5编辑站点文件 3.3.6刷新本地站点文件列表 3.4文档的基本操作 3.4.1打开和关闭网页 3.4.2保存网页 3.4.3设置文档的页面属性 3.5实战演练 3.5.1 范例1 创建【乐乐网站】站点 3.5.2 范例2 创建站点文件 3.6 思考与练习
3.5.1 范例1 创建【乐乐网站】站点 3.5.2 范例2 创建站点文件
3.6 思考与练习
1. 简答题 （1）简述站点的基本概念？ （2）如何规划站点结构？ （3）叙述一下定义站点的一般步骤是什么？ 2. 操作题 （1）做一份网站的计划书，计划书中说明网站的服 务群体、网站的主题并详细列出首页所包含的内 容。 （2）根据计划书画出网站的设计草图（至少包括二 级分支）。 （3）根据结构草图，在本地的计算机上创建一个虚 拟网站，包括所有的空白文档和文件夹。
第3章Dreamweaver8网页制作
3.1 Dreamweaver8简介 3.2 网页文本及媒体的应用 3.3 表格的应用 3.4 布局表格的应用 3.5 超级链接 3.6 框架的应用 3.7 CSS样式的应用 3.8 层和行为的应用 3.9 时间轴的应用 3.10 表单的应用 3.11 模板的应用
3.1
本节知识
认识Dreamweaver8
在需要添加特殊字符的位置单击鼠标，设置插入点。 选择插入栏的“文本”类别（如图所示），单击最右边的
下三角
按钮，在弹出的下拉菜单中选择“其他字符”命令，弹出如图所示的 对话框，可在其中选择要输入的对象。
3.2.2
文本的编辑操作
也可通过软键盘来输入“★、■、※、【】”等特殊字符符号。
3.2.2
选择“关闭”命令。
在Dreamweaver 8窗口中选择“文件”|“退出”菜单命令。 在当前窗口为Dreamweaver 8工作界面时，按“Alt+F4”键退出
Dreamweaver 8。
3.1.3 Dreamweaver 8工作界面介绍
知识要点
插入栏
文档工具栏 文档编辑区 网页标签 扩展按钮 浮动面板组 属性面板 标签选择器 水平标尺和垂直标尺
3.1.1
知识要点
系统要求
Dreamweaver8的认识
在安装Dreamweaver8之前请确保硬件和软件环境满足以下条件： ① Intel Pentium III 600MHz或更快的处理器和等效的处理器 ② Windows 2000、Windows XP或Windows Server 2003 ③ 至少128MB的可用内存（建议采用256MB内存或更大内存） ④ 能达到1024×768像素分辨率或更高分辨率的监视器
dreamweaver8网页设计教程
《dreamweaver8网页设计》目录第一章遨游DREAMWEA VER8精彩世界1第二章创建与规划站点3第三章文本及其格式化10第四章表格13第五章图像15第六章框架18第七章页面布局视图的使用21第八章链接24第九章层与时间轴 28第十章表单32第十一章行为35第十二章制作动态页面38第十三章代码片断、库项目和模板 42第十四章网页的制作45第十五章网站的测试与上传49第十六章使用FIREWORKS 8处理网页图像 52第一章遨游Dreamweaver8精彩世界课题：Dreamweaver8简介及创建文档一、教学基本内容1、Dreamweaver8 的工作界面2、建立html文档二、课型：新授课三、课时：2个课时四、教学重点与难点重点：熟悉Dreamweaver8工作界面中各个工具的作用难点：1、各个面板的调用2、建立一个HTML的网页3、插处图像五、教学目的1 、对Dreamweaver这个制作网页的工具及网页有一定的认识，激发学生学习网页设计的兴趣2、一定要学会建立一个空白网页3、会对页面有一个简单的设置六、教学过程1、引入（1）为什么要用Dreamweaver而不用Frontpage?Dreamweaver是Macromedia公司的出品，它以程序小、运行速度快、所制作网页代码少这些优点，赢得了网页制作人员的喜爱。
（2）相关工具的介绍因为这是第一节网页制作课，所以首先要简单介绍下制作网页的一些相关工具，比如与Dreamweaver合称为网页三剑客的Flash和Fireworks。
2、讲授新课（1） Dreamweaver的界面a．文档窗口：主菜单、工具栏、底部启动条、文档编辑区b．对象面板：标准、表格、表单、框架、特殊、文件廷冖隐藏、字符c．启动面板：站点管理、代码检查、HTML样式、CSS样式、行为、历史记录、资源管理d．属性面板：随目前对象不同而内容不同(2)创建HTML网页(3)在网页中插入图像输入文字以后，插入图像，并对图像设置对齐的方式，使之与文字呈混排的状态。
第三章 Dreamweaver8 网页设计PPT课件
1.属性面板
上一页
网页编辑窗口下面是“属性面板”, 用
来显示和调整页面对象的属性，根据鼠标
下一页
所选中对象的不同，“属性面板”界面会
最后页 有差异，用户可以分别对不同的对象进行
设置
退出
2.浮动控制面板组
本章内容
01.08.2020
14
3.1 Dreamweaver 8简介
3.1.8 网页文件的创建与保存
15．熟练运用Dreamweaver 8创建自己个人主页。
01.08.2020
3
本章内容
第一页
Dreamweaver 8简介
上一页
站点的建立与管理
下一页
页面设计
最后页
退出
01.08.2020
4
3.1 Dreamweaver 8简介
本章案例的小型个人网站是利用 第一页 Dreamweaver 8设计的，在设计前首先要
9．掌握如何在Dreamweaver 8中使用层；
10．掌握如何在Dreamweaver 8中使用框架；
最后页 11．了解如何在Dreamweaver 8中创建和使用样式表；
12．了解如何在Dreamweaver 8中使用模板与库；
13．掌握如何在Dreamweaver 8创建表单；
退出 14．了解如何在Dreamweaver 8中使用行为与时间轴；
3.1.6 状态栏
第一页
标签选择器：文档区下部有一个如下 上一页 图所示的区域，其中左半部分文字（如
“<body>”）表示当前光标所在区域的 下一页 HTML标记，单击可以选定这个HTML标记
包括的区域。
最后页
退出
01.08.2020
Dreamweaver8教程
Dreamweaver8教程1、Flash透明化：插入Flash动画后，点击Flash图画，在属性中选择“参数”，在参数对话框左侧参数处填“wmode”，在右侧值的对应处填“transparent”，再点击“确定”即可。
2、设置滚动字幕：把光标插入点放在需要插入滚动字幕的地方，点击插入面板的“标签选择器”图标，选择“HTML标签”下的“页标签”中的“marquee”。
再转到代码视图，选择“窗口”——>“标签检查器”，在属性中单击未分类前面的“+”，可以在“标签检查器”中设置标签的各种用法。
点击“behavior”设置项右边的下拉箭头，选择滚动字幕内容的运动方式（“alternate”指内容在相反两个方向滚动，“scroll”指内容在同一方向滚动，“slide”指内容接触到字幕边框就停止滚动），direction属性设置字幕内容的滚动方向（down 向下滚动，left向左滚动，right向右滚动，up向上滚动），scrollamount属性设置字幕滚动的速度，scrolldelay属性设置字幕内容滚动时停顿的时间（单位毫秒），width属性设置字幕宽度，style属性设置字幕内容的样式，loop属性设置字幕内容滚动次数（默认或-1为无限）；在“行为”面板中，onMouseOver事件设置鼠标移动到滚动字幕时的动作（常设置为停止滚动），onMouseOut事件设置鼠标离开滚动字幕时的动作（常设置为开始滚动）。
（例:向上滚动字幕代码<marquee behavior=”scroll”direction=”up”width=”200”height=”150”loop=”-1”scrollamount=”1”scrolldelay=”1”style=”front:12px;”onMouseOver=”this.stop();” onMouseOut=”this.start();”>滚动字幕内容</marquee>3、插入关键字：（关键字用来帮助搜索引擎寻找网页的）选“插入”、“HTML”、“文件头标签”、“关键字”，在空白处输入关键字（多个关键字之间用逗号隔开）。
《Dreamweaver_8基础与实例教程》第3章
3.5.1超级链接的类型 3.5.1超级链接的类型
1.根据链接载体的特点，一般把链接分为文本链接和图像链接两大 类。 （1）文本链接：用文本作为链接载体，简单实用。 （2）图像链接：用图像作为链接载体，可使网页美观、生动活泼， 它既可以指向单项链接，也可以根据图像不同的区域建立多个链 接。 2.如果按链接目标分类，可以将超级链接分为以下几种类型： （1）内部链接：同一网站之间的链接。 （2）外部链接：不同网站文档之间的链接。 （3）锚点链接：同一网页或不同网页中指定位置的链接。 （4）E-mail链接：发送电子邮件的链接。
3.2.2移动和复制图像 3.2.2移动和复制图像
选中要编辑的图像，这时图像周围会出现几个黑色方 形的小控制柄。如果要移动或复制图像，可以像移动 文字那样，用鼠标拖曳图像到目标点，即可移动图像； 按住Ctrl键并用鼠标拖曳图像到目标点，即可复制图 像。
3.2.3 图片和文本的对齐方式
1．图像与文字相对位置的调整 在图像属性工具栏内的“对齐”下拉列表框中有10个列表项，用来 进行图像与文字相对位置的调整。这些列表项的含义如下。 “默认值”列表项：使用浏览器默认的对齐方式，不同的浏览器会 稍有不同。 “基线”列表项：图像的下沿与文字的基线水平对齐。 “顶端”列表项：图像的顶端与当前行中最高对象（图像或文本） 的顶端对齐。 “中间”列表项：图像的中线与文字的基线水平对齐。 “底部”列表项：图像的下沿与文字的基线水平对齐。 “文本上方”列表项：图像的顶端与文本行中最高字符的顶端对齐。 “绝对中间”列表项：图像的中线与文字的中线水平对齐。 “绝对底部”列表项：图像的下沿与文字的下沿水平对齐。文字的 下沿是指文字的最下边，而基线不到文字的最下边。 “左对齐”列表项：图像在文字的左边缘，文字从右侧环绕图像
Dreamweaver8入门
第3章 DREAMWEAVER 8入门
8. 图像的运用 网页上不能只有文字，必须适当地增加一些图 像，使用图像一般要注意以下事项： 图像为主页的内容服务，不要让整个页面花花绿 绿，喧宾夺主。 图像要兼顾大小美观。图片不仅要好看，还要在 保证图片质量的情况下尽量缩小图片的大小。单 张图像不要超过30KB。 合理地使用JPG和GIF格式。一般来说，颜色较少 的（在256色以内的）图像把它处理成GIF格式； 颜色比较丰富的图像，最好把它处理成JPG格式。
第3章 DREAMWEAVER 8入门
2.搜集资料 确定网站的主题后，要围绕主题开始搜集资料。资 料既可以从图书、报纸、光盘、多媒体上获得，也可 以从网上搜集；然后再把搜集的材料去粗取精，去伪 存真，作为自己制作网页的素材。 3.规划站点 规划站点就像设计一座大楼一样，只有图纸设计好 了，才能建成一座漂亮的楼房。在规划网站时，首先 要把网站的内容一一列举出来，根据内容列出一个结 构化的蓝图，根据实际情况设计各个页面之间的链接。 网站的规划内容有：确定网站点题材，确定网站的名 称，确定网站的框架等。
第3章 DREAMWEAVER 8入门
3.3 Dreamweaver 8的功能简介 1.将世界一流水平的“设计”和“代码”编辑器合二为 一，在设计窗口中精简源代码，是用户能够按照工作 的需要指定自己的用户界面。 2.跨浏览器有效检查。当保存时，自动地检查当前文档 跨浏览器的有效性（兼容性），可以指定测试浏览器， 同时自动检测以确定页面有没有目标浏览器不支持的 tags或CSS结构。动态跨浏览器有效性检测功能可以自 动核对tags或CSS规则是否适应目前的主浏览器。 3.使用内置的图形编辑程序让开发更加节省时间。图像 的剪切、缩放等一系列的辅助性的图象编辑功能可以 使用内嵌的Macromedia Fireworks 技术。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
3.3.1 插入与编辑图像
在确定图像插入点后，单击“插入”栏“常用”类别 中的“图像”按钮，打开“选择图像源文件”对话框。 从中选择要插入的图像，然后单击“确定”按钮即可。
选中插入后的图像，可以利用属性面板对该图像的各 项属性进行设置。
设置图像名称 设置宽和高 设置图像 文件路径 图像处理按钮
指定图像上、 下、左、右空 白的像素值
第3章
编辑基本网页元素
文本输入与编辑 上机实践——设置“舞林报道”网页文本 使用图像
上机实践——在“拍拍”网页中插入图像
3.1 文本输入与编辑
在Dreamweaver中可以通过设置文本的字体、字号、 颜色、字符间距与行距等属性来区别不同的文本。 网页中文本的使用原则如下：
单个页面中不要使用超过三种以上的字体。
“图像占 位符” 替换 图像
“图像占位符”对话框
3.3.3 制作鼠标经过图像
当鼠标移动到某一图像上时，图像变成了另一幅图像， 当鼠标移开时，又恢复成原来的图像，这就是我们通 常所说的鼠标经过图像。
“插入鼠标经过 图像”对话框 原始图像 鼠标经 过图像
3.3.4 制作导航条
利用与制作鼠标经过图像类似的方法，可制作具有可 变效果的导航条。下面来制作下图所示的可变导航条 （具体操作见视频3-2）。
输入文本 后的设计 视图
3.1.2 设置文本的段落格式和字符格式
在Dreamweaver中，可以利用属性面板为文本设 置默认格式化样式或者直接设置所选文本的字体、 大小、颜色等。
设置文本格式 设置文本样式 设置文本为 粗体或斜体 为所选文本 设置链接
设置文本字体
设置文本颜色
设置文本大小
设置文本对齐 和列表格式
本节以制作“拍拍”网页为例，来练习网页文本 的属性设置和图像的插入。
3.3 使用图像
目前在网页中只能使用JPEG、GIF和PNG格式的图 像。
JPEG格式适于表现色彩丰富，具有连续色调的图像。该 格式的优点是图像质量高，缺点是文件尺寸稍大（相对于 GIF格式），且不能包含透明区。 GIF格式最多只能包含256种颜色，适合表现色调不连续 或具有大面积单一颜色的图像。该格式的优点是图像尺寸小， 可包含透明区，且可制成包含多幅画面的简单动画，缺点是 图像质量稍差。 PNG格式集JPEG和GIF格式的优点于一身，既能处理照 片式的精美图像，又能包含透明区域，且可以包含图层等信 息，是Fireworks的默认图像格式。
1．设置字体列表
Dreamweaver中自带的字体有限，一般满足不了 大多数网页设计者的需求。我们可以通过设置字体 列表来解决这一问题。
“编辑字 体列表” 对话框
2．设置文本字体及大小
学会设置字体列表后，就可以随心所欲地设置文本 的字体了。
选中 文本
设置字体 和倾斜
设置 字号
3．设置段落缩进
通过设置段落缩进格式，可以更好的布局文档。
3.1.4 输入日期与水平线
在“插入”栏的“常用”类别中单击“日期”按钮 ，将打开 “插入日期”对话框。
要插入水平线，可以选择“插入”>“HTML”>“水平线”菜单。 在插入水平线后，还可通过属性面板设置其宽、高、对齐和阴影 等。
3.2 上机实践—设置“舞林报道”网页文本
本节我们以“舞林报道”网页为例，来练习网页文本 的设置（具体操作见视频３－１ ）。
3.3.5 插入Fireworks HTML
Fireworks是网页制作三剑客之一，它主要用来处理 网页图像，可以将优化后的图像和HTML文件导出并 保存至站点的图像文件夹中，然后就可以在 Dreamweaver中插入该文件。
“插入Fireworks HTML”对话框
3.4 上机实践——在“拍拍”网页中插入图 像
在“格式”下拉 列表中选择“段 落”
段落突出
段落缩进
4．设置列表项
列表分为项目列表和编号列表，项目列表常应用在 “列举”类型的文本中，编号列表常应用在“条款” 类型的文本中，这种方式使得文本更直观、明了。
选中 文本
应用“项 目列表” 格式
3.1.3 输入特殊符号和不换行空格
要插入特殊字符，可选择“插入”>“HTML”>“特殊 字符”命令，然后在弹出的菜单中选择相应的特殊字 符。
用于创建从图像到 其他文件的链接
设置图像边 框的粗细
确定图像在单元 格或页面中的对 齐方式
ห้องสมุดไป่ตู้裁切图像
3.3.2 使用图像占位符
如果网页中的某个图像尚未制作好，可暂时用图像占 位符来代替。待到制作好图像后，再用它置换图像占 位符。 选择“插入”>“图像对象”>“图像占位符”菜单， 可打开“图像占位符”对话框。 插入的
不要用太大的字号。 不要使用不停闪烁的文字。
标题文字的字号应当比正文字号稍大。
3.1.1 输入文本
首先将光标定位在表格的某个单元格中，然后输入文 字就可以了。 如果希望文本换行，可以按下【Shift＋Enter】组合 键；如果希望文本换段，可以直接按【Enter】键。
输入文本 后的代码 视图