Dreamweaver CS5自学教程-第二课：制作网页的基本操作
第二章 DWCS5基本操作
15
在设计页面时需要设置页面元素的位置或对齐页面元素，Dreamweaver CS5提供了“标尺”和“网格”功能。选择“查看”|“标尺”|“显示”命令， 可以在文档中显示“标尺”，选择“查看”|“网格”|“显示网格”命令，可 以在网页文档中显示网格，如图所示。重复操作，可以隐藏显示标尺和网格。
16
在Dreamweaver CS5中，使用跟踪图像功能可以载入某 个网页的布局(或图片)，然后借助该网页的布局来安排正 在制作的网页布局。选择“查看”|“跟踪图像”|“载入”命 令，打开“选择图像源文件”对话框，如图2-33所示。
17
18
每一个网页都是由HTML脚本所组成的*.html文件，一 个完整的HTML网页文件包含head和body两个部分，head 部分包括许多不可见的信息，例如语言编码、版权声明、 关键字等，使用Dreamweaver CS5，可以设置这些信息。
1
Dreamweaver CS5是一款专业的网页制作软件，可 以制作单独的网页文件，但制作网页的根本目的是为了构 建一个完成的网站。Dreamweaver既是一个网页的创建和 编辑工具，又是一个站点创建和管理的工具。因此，在创 建网页之前必须规划和设计好网站。本章主要讲述了 Dreamweaver CS5的一些基本操作，包括规划和创建站点 以及网页文件的基本操作。
10
创建了本地站点后，就可以创建文档并将保存在站点 文件夹中。在创建和编辑文档时，Dreamweaver CS5会自 动生成文档的HTML代码和JavaScript代码，使用 Dreamweaver代码编辑器可以测试和编辑这些代码。 Dreamweaver CS5提供了多种创建文档的方法，可以创建 一个新的空白HTML文档，或使用模板创建新文档。同时， 还提供了功能强大的“新建文档”对话框来满足用户创建 不同类型的文档的需求。 创建网页文档 打开和保存网页文档
Dreamweaver CS5.5中文版案例教程第2章
2.6 知识与技能梳理
一个网站的建立通常要遵循以下顺序：首先是合理规划站点，这是 创建任何网站的前提，在创建网站之前必须先明确站点目标、用户 及站点结构；其次是构建本地站点和远程站点；接着是站点的测试、 维护与管理；最后是站点的上传与发布。
第2章 站点的搭建与管理
站点是一系列文件的组合，这些文件通过各种链接联系起来。Dreamweaver CS5.5 是创建和管理站点的工具，使用它不仅可以创建单独的文件，还可以创建完整的站 点。本章主要讲解创建站点、管理站点地图、设置站点的参数，以及规划与构建站 点结构等内容。
2.1 创建本地站点
2.1.1 使用“管理站点”向导创建站点
重要工具：管理站点、弹出菜单工具。 核心技术：通过创建本地站点，将位于本地的文件夹当作远程站 点的镜像，最后上传至服务器，完成网站的上传。 实际应用：使用“管理站点”向导搭建站点、编辑和管理站点。
2.2.4 删除站点 如果不再需要利用Dreamweaver对某个本地站点进行操作，则可以将其从站 点列表中删除，具体操作步骤如下。
2.3 管理站点中的文件
2.3.1 创建文件夹和文件 网站每个栏目中的所有文件被统一存放在单独的பைடு நூலகம்件夹内，根据包含的文件 多少，又可以细分到子文件夹里。
2.3 管理站点中的文件
2.3.2 移动和复制文件 同大多数的文件管理一样，Dreamweaver CS5.5也可以利用剪切、复制和粘 贴功能来实现对文件的移动和复制，具体操作步骤如下。
2.4 管理站点地图
站点地图是以树形结构图方式显示站点中文件的链接关系。在站点地图中 可以添加、修改、删除文件之间的链接关系。
项目一初识Dreamweavercs5(上机)2
项目一网页制作基础任务二初识Dreamweaver CS5一、教学目标1、知道创建站点。
2、掌握创建网站的首页及子页。
二、学生特征分析学生利用Dreamweaver cs5软件，尝试创建站点，首页、子页，并制作一个简单的首页页面。
三、课型实训课四、教学重点创建一个网站站点：名称为“青春我美丽”。
五、教学难点创建一个首页，另创建子页名称为“新闻、文章、下载、图片”。
六、课前准备机房七、课时安排2课时（45分钟×2）八、教学过程1、复习思考与组织教学初步创建站点，首页、子页及首页页面。
2、引入新课老师先讲解步骤方法及演示引入课题。
3、讲授新课在首页中编辑内容《见素材》。
1、准备好网页素材。
2、创建青春我美丽的站点。
3、创建子页“新闻、文章、下载、图片”并在主页中编辑内容。
4、保存并用浏览器浏览网页看其较果。
如下图所示。
4、巩固深化尝试建立首页页面。
5、课堂小结A、教学内容与时间分配：第一节课：一、在软件中定义站点（10分钟）二、在软件中管理站点（10分钟）三、网站文档的基本操作（25分钟）第二节课上机操作（45分钟）B、教学活动：通过软件功能解析深入学习软件功能和制作特点。
C、教师活动：通过软件相关功能的解析学习Dreamweaver CS5工作界面的基本操作和设置文件头的基本方法。
D、学生活动：除了课堂讲解的软件功能外，还可以根据相关的工具特点进行简单的练习和操作。
布置作业上机作业（见素材）。
九、板书设计十、教学反思我和学生一起学习了怎样建立一个自己的站点，并且在自己的站点内建立一张网页，然后在这张网页内输入文字、插入图片、设置网页背景等，并进行一些格式的设置。
但仍然有一小部分学生没有完成，于是我就查看了一下学生的来源，发现有的学生初中来自农村中学，动手能力相对较差一点。
Dreamweaver cs5标准实例教程配套全册教学课件
2.2.3 “插入”面板
单击文档窗口右侧浮动面板组中的“插入”按钮，即可弹出以前熟悉的“插入”面 板。
“插入”面板共有8类对象元素，包含一些最常用的项目：常用、布局、表单、数 据、Spry、InContext Editing、文本和收藏夹。“插入”面板的初始视图为“常用” 面板，单击“插入”面板中“常用”面板右侧的倒三角形按钮，即可在弹出的下拉 列表中选择需要的面板，从而在不同的面板之间进行切换。如图所示。
所谓动态网页，是指服务器会针对不同的使用者以及不同的要求执行不同的程序， 从而提供不同的服务，一般与数据库有关。这种网页通常在服务器端以扩展名asp、 jsp或是aspx 等储存。动态网页的页面自动生成，无须手工维护和更新HTML文档； 不同的时间、不同的人访问同一网址时会产生不同的页面。
动态网页与静态网页的最大不同就是Web服务器和用户之间的动态交互，这也是 Internet强大生命力的体现。
第1章 网页制作基础知识
本章重点
本章和网页制作的基本步骤，然后简要介绍设计制作网页的常用工 具，重点介绍Adobe公司最新推出的Dreamweaver CS5，它涵盖了 网页制作与站点管理，是使用最多的网页制作工具之一。
学习目的
通过本章的学习，您可以：
网页与网站 网站建设的基本步骤
1.1 网页与网站
网页是网络上的基本文档，网页中包含文字、图片、声音、动画、影像以及 链接等元素，通过对这些元素的有机组合，就构成了包含各种信息的网页。简单 地说，通过浏览器在WWW上所看到的每一个超文本文件都是一个网页，而通过 超链接连接在一起的若干个网页的集合即构成网站。
通常我们看到的网页，都是以.htm、.html、.shtml等为后缀的文件。在网站设计 中，这种纯粹HTML格式的网页通常被称为静态网页。静态网页的内容是固定的， 当用户浏览网页内容时，服务器仅仅是将已有的静态HTML文档传送给浏览器供用 户阅读。若网站维护者要更新网页的内容，就必须手工更新所有的HTML文档。
ch2 Dreamweaver_CS5快速入门
二、编辑文本 1）网页中输入的文本可以像Word文档一样，进行编 辑。 – 1. 拖动鼠标选中一个或多个文字、一行或多行文本， 也可以选中网页中的全部文本。 – 2. 按BackSpace键或Delete键实现删除文本操作。 – 3. 实现复制、剪切、粘贴等操作。 – 4. 实现查找与替换操作。5. 实现撤消或重做操作。 2）设置文本格式 – 字体(通用性问题)、大小、颜色、风格 – 注：CSS（Cascading Style Sheet，可译为“层 叠样式表”或“级联样式表”）是一组格式设置规则， 用于控制Web页面的外观。
第二课：制作网页的基本操作
一 、在网页中添加文本 添加普通文本 方法： A、直接输入 （1）用鼠标单击网页编辑窗口中的空白区域， 窗口中随即出现闪动的光标，标识输入文字的起 始位置。 （2）选择适当的输入法输入文字 B、复制和粘贴 C、从其他文件导入
12/10/2014
3
文档标签
文档标签位于应用程序栏下方，左侧显示当前打开 的所有网页文档的名称及其关闭按钮；右侧显示当前 文档在本地磁盘中的保存路径以及向下还原按钮；下 方显示当前文档中的包含文档以及链接文档。
当用户打开多个网页时，通过单击文档标签可在各 网页之间切换。另外，单击下方的包含文档或链接文 档，同样可打开相应文档。
分门别类地将文件保存在不同的目录下,在大型网站中， 分支页面的文件应存放在单独的文件夹中存放网页图像的文 件夹一般命名为“images”或者“img”。在动态网站中，用来 存放数据库的文件夹一般被命名为“data”或者“database”。 目录的层次不要太深， 建议不要超过3层 不要使用中文文件名和中文目录名 不要使用过长的目录名,比较长的文件名可使用下划线 “_”来隔开多个单词或关键字。
网页设计第2章 Dreamweaver CS5基础
2.2.2新建和保存网页
1．新建网页文档 2．保存网页文档
2.5网页文档头部信息设置
META标签位于在网页<head>…</head>标签之间，用来 记录当前页面的相关信息，如作者和版权信息、搜索关 键字等，它也可以用来向服务器提供信息，如页面的失 效日期、刷新时间间隔等。 META标签分为http-equiv属性和name 属性。name属性主 要用于描述网页，如Keywords（关键字）、description （网站内容描述）等。http-equiv属性类似于HTTP的头部 协议，它回应给浏览器一些有用的信息，以帮助正确和 精确地显示网页内容，如Refresh（刷新）等。
第2章 Dreamweaver CS5基础
网页设计与制作 Dreamweaver CS5 标准教程 邢帅教育
本章学习主要内容：
1.Dreamweaver CS5工作界面 2.创建网站站点 3.管理站点文件和文件夹 4.管理站点 5.网页文档头部信息设置 学习QQ群69364320
2.6课堂案例-慈善救助中心
案例学习目标：学会创建站点、管理站点文 件和文件夹。 案例知识要点：创建站点、移动文件、重命 名文件。 素材所在位置：光盘/案例素材/ch02/课堂案 例-慈善救助中心。 案例效果如图2-29所示。
2.5网页文档头部信息设置
2.5.1插入搜索关键字 2.5.2设置描述信息 2.5.4插入版权信息 2.5.3设置刷新时间 可以指定浏览器在一定的时间后重新加载当前页 面或转到不同的页面，比如论坛网站中通常要定 时刷新页面，以便实时反映在线用户信息、离线 用户信息以及动态文档的实时改变情况。
11.4.3 使用Dreamweaver CS5制作页面[共5页]
![11.4.3 使用Dreamweaver CS5制作页面[共5页]](https://img.taocdn.com/s3/m/e6d13735524de518964b7de7.png)
规则”对话框，直接单击
图１１－３７ 新建文件 图１１－３８ 创建ＤＩＶ 图１１－３９ 设置方框样式
（4） 依次单击按钮确认设置，然后删除默认的文本，使用相同的方法创建一个名称为“top”的DIV，设置大小为“1000×404”像素，初学者为了便于查找和观看，可先为其设置一个背景颜色，这里设置将该标签背景设置为“＃FC9”，如图11－40所示。
（5） 将插入点定位到名称为all的DIV中，再次插入一个名称为“maid”的DIV，大小为“1000×499”像素，设置背景颜色为“＃”，效果如图11－41所示。
（6）使用相同的方法在底部创建一个名称为“
图１１－４０ 设置ｔｏｐ样式 图１１－４１ 设置ｍａｉｄ样式 图１１－４２ 设置ｂｏｔｔｉｏｎ样式）将插入点定位到名称为的DIV中，再次插入一个名称为“top＿tb”的DIV，大小为“1000×121”像素，设置背景颜色为白色。
在“top”中单击定位插入点，选择【插入】→【布局对象】→【Div标签】菜单命令，插入一个AP Div标签，选择该标签，在“属性”面板中设置大小为“606×121”像素，背景颜色为白色。
）选择创建的AP Div标签，然后在“CSS面板”中单击“编辑”按钮，在打开的面板中。
Dreamweaver-cs5-网页制作教程ppt全册
打开最近 编辑的文件
创建新的文件或 者Dreamweaver站点
教学网站与 资源连接
前往 ADOBE功能 介绍网站
是否禁用开始项
2021年2月4日星期四
5
官方的重要信息
教育学院
菜单栏 文 档 工 具 栏 文 档 窗 口
状 态 栏 属 性 面 板
2021年2月4日星期四
应用程序栏 工作区切换器 插 入 面 板 文 件 面 板
Dreamweaver-cs5-网页制作教程ppt全 册
第一节 认识Dreamweaver
Dreamweaver是由Macromedia公司推出的一款网 页制作软件，它具有可视化编辑界面，用户不必编写 复杂的HTML源代码就可以生成跨平台、跨浏览器的网 页，不仅适合于专业网页编辑人员的需要，同时也容 易被业余网友们所掌握。
状态栏：位于文档窗口底部，包括3个功能区：
标签面板（又称为：标签选择器，显示和控制文档当 前插入点位置的HTML源代码标签，可查看网页内容的 代码标签，也可以单击标签，选中该元素。）
标签选择器
选取工具
缩放工具
文档大小和估计 下载时间
手形工具 窗口大小
① 标签选择器 用来显示环绕当前选定内容的标签的层次结构。若单 击该层次结构Байду номын сангаас的任何标签，则选定该标签全部内容。 如单击状态栏的<body>标签，则选定文档中整个正 文。 ② 选取工具 用于启动和禁用手形工具。 ③ 手形工具 用于在文档窗口中单击并拖动文档。
下载指示器（估计下载时间，查看传输时间）。 注意： “8秒钟原则”：一般来说，大多数用户浏览网页时 等待一个页面的时间不会超过8秒。 所以要随时注意网页的大小 ，超过8秒，要及时优化。 Web页下载时间和大小的设计应遵从该原则。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第二课：制作网页的基本操作2-1 添加文本1
1、网页文本的输入方式
(1)、导入预先保存的文档
(2)、直接输入或复制粘贴2、首页命名
3、网页的背景图
片通过下方的页
面属性来设置。
2-2 添加文本2
1、在网页中添加一个能自动更新的日期时间。
2、在网页中连续输入多个空格的设置。
在“编辑”菜单中选择“首选参数—常规--允许多个连续的空格”，确定。
3、添加水平线。
选中需要添加的位置，选择“插入—HTML—水平线”
在下放的属性面板中设置水平线
水平线的颜色需要通过代码进行设置，<hr>代码表示一条水平线，括号内加空格设置属性，保存后预览即能看见设置的效果。
4、特殊字符的插入。
2-3 编辑文本
1、网页文件中的文本输入、删除、复制和粘贴等编辑与DOC文档的操作相似。
2、搜索网页中查找或替换某一字词
搜索结果的显示点击每一项即显示精确位置替换和撤销Ctrl+Z
2-4 设置文字样式
1、网页文件中文本的样式通过下方的属性面板设置
在Dreamweaver CS5中在设置文本样式时可能需要新建CSS规则
2、在网页设计中使用的特殊字体，可能会因为浏览者电脑上没有安装这个字体而不能正常显示。
所以在网页设计过程中我们一般会选择“宋体”或“黑体”等常见字体。
为了保证特殊的字体能在网页中正常显示，我们通常用PS等制图软件把特殊字体制作成图片的格式添加到网页中。
2-5 段落设置
1、段落的分段、换行、缩进、编号
2、文本段落编号样式的更改设
置
3、选择文本即可使用预设标题效果。
“页面属性”中“标题CSS”的设置。
2-6 网页中使用的图片格式2-7 插入图片
1、网页文件中插入图片的两种方式，此外还有直接拖拽的方式添加图片。
插入图片时输入的“替换文本”内容在网页浏览过程中鼠标放置到图片上时显示可以使浏览者了解这个图片的主题
2、下方的属性面板显示图片的各种属性。
ID表示每个图片的识别编号 ..∕表示的站点根目录（或上一层文件夹）
如果不需要图片的边框就把边框设置为“0”
3、图片在页面中的对齐方式与文本对齐方式类似
2-8 图文混排
图片与文字段落混排的对齐可以使用底部的对齐选项变换不同的混排方式
水平边距可以控制图片水平方向上与文字之间的距离，垂直边距控制垂直方向2-9 使用Dreamweaver编辑图片
在Dreamweaver内对图片调整尺寸大小后必须“瘦身”
图片的裁切，亮度对比和锐化对比度。
2-10 优化图片
图片的优化要在保证画质的前提下尽可能的减小图片的数据量。
还可以转化图片的格式。
使用第三方软件进行图片处理
“首选参数”中第三方编辑软件的添加和相应图片格式的编辑器设置。
2-11 鼠标经过更换图片特效
1首先要准备好两张不同效果的图片
2、将光标定位在需要添加的位置。