Dreamweaver cs5标准实例课件第2章 Dreamweaver CS5简介
合集下载
Dreamweavercs5PPT课件
2020/10/13
5
链接
路径 -绝对路径 -相对路径
目标
2020/10/13
6ቤተ መጻሕፍቲ ባይዱ
插入透明flash
插入布局对象-AP Div 在其中插入Flash-属性面板-设置透明
2020/10/13
7
谢谢您的指导
THANK YOU FOR YOUR GUIDANCE.
感谢阅读！为了方便学习和使用，本文档的内容可以在下载后随意修改，调整和打印。欢迎下载！
属性
behavior 滚动方式 alternate;scroll;slide direction 滚动方向 down;right;up;left scrolldelay 滚动延迟时间 height 活动字幕高度
蓝色字
鼠标指向时滚动字幕时停止，移开时继续滚动
2020/10/13
4
表格特效
光标定位表格中，代码视图 <td …>中输入 onmouseover="this.bgColor='#66FF99' " onmouseout="this.bgColor='#FFFFFF'"
2020/10/13
2
文本
空格
-Ctrl+Shift+空格
-代码中文字前加
换行
-shift+Enter
-代码中文字后加<br />
2020/10/13
3
滚动字幕
文字两端分别填加标签
<marquee behavior="scroll" direction="up" scrolldelay="150" height="100" id=ad onmouseover=ad.stop() onmouseout=ad.start()> ……………. </marquee>
第2章 Dreamweaver CS5基础
第2章Dreamweaver CS5基础在网络普及的现代，优秀的网页是一个很好的展现自我的平台。
古话说得好，“工欲善其事，必先利其器”，我们在进行网页设计前，首先要选择一个优秀的网页设计工具。
Dreamweaver、Flash、Fireworks最早是由Macromedia公司推出的一套网页设计软件。
Flash 用来生成二维动画，Fireworks用来制作矢量图像，Dreamweaver可以进行各种素材的集成和网络发布。
这三款软件在国内有“网页三剑客”之称。
2005年，Macromedia公司被著名影像处理软件公司Adobe收购，“网页三剑客”成为了Adobe软件家族的主要成员。
2.1 Dreamweaver CS5简介Adobe Dreamweaver CS5是Adobe最新推出的网页设计制作工具，是一款集网页制作和管理网站于一身的网页编辑器，是一种专业的HTML编辑器，采用“所见即所得”的编辑方式，利用Div、行为、CSS、模板等技术对Web站点、Web页、Web应用程序进行设计、编码和开发。
由于Dreamweaver CS5的可视化编辑功能，在通常情况下，用户可以不需要编写任何代码，直接在可视化环境中调整各种元素，快速地创建页面。
可以直接将在Photoshop、Fireworks或其他图形应用程序中创建和编辑的图像，以及在Flash中创建的动画导入到Dreamweaver CS5中，并能够进行基于ColdFusion、ASP、JSP、PHP服务器技术的动态网站的创建。
由此可见，Dreamweaver CS5为用户提供了实用方便的编辑工具，可帮助用户迅速高效地制作出功能强大的网站。
2.2 Dreamweaver的工作界面2.2.1 启动Dreamweaver CS5安装好Dreamweaver CS5后，单击“开始”菜单，选择“程序”，在程序中选择“Adobe”中的“Adobe Dreamweaver CS5”命令后，即可启动Dreamweaver CS5，如图2-1所示。
Dreamweaver-cs-基础与实例教程第2章PPT课件
•14
2.3.3 重新编辑和删除CSS样式
首先在CSS样式面板中选择一种不需要的样式，然后单 击“编辑样式”按钮，就可以重新编辑CSS样式了；如 果单击“删除CSS规则”按钮，就可以删除“CSS 样式” 面板中的所选样式，并从应用该规则的所有元素中删 除格式。
•15
2.3.4 应用CSS样式
定义了CSS样式后，可以将这些CSS样式应用于网页中 的文本、图像、Flash等对象。具体的方法如下。
•21
3.外观(Layout)设置 （1）滚动文字对齐方式align 基本语法： <marquee align="对齐方式">滚动文字</marquee> 对方方式=top、middle、bottom，对齐上沿、中间、下
沿。 （2）滚动背景颜色属性bgcolor 在滚动文字的后面，可以添加背景颜色。 基本语法： <marquee bgcolor="color_value">滚动文字</marquee>
•7
2.2 制作一个简单的网页
在认识了Dreamweaver之后，接下来我们将利用文字和 图片，完成“数学与计算机”系网站主页的内容，学 习在Dreamweaver中输入并设置文字格式的基本操作， 完成效果如图所示。
•8
2.3 CSS样式
2.3.1 创建CSS样式 2.3.2 将外部样式表导入到当前文档 2.3.3 重新编辑和删除CSS样式 2.3.4 应用CSS样式
•19
（2）滚动方式属性behavior 通过这个属性能够设定不同方式的滚动文字效果。如滚
动的循环往复、交替滚动、单次滚动等。 基本语法： <marquee behavior="value">滚动文字</marquee> （3）滚动循环属性loop 通过这个属性能够让文字滚动循环进行。 基本语法： <marquee loop="次数">滚动文字</marquee>
2.3.3 重新编辑和删除CSS样式
首先在CSS样式面板中选择一种不需要的样式，然后单 击“编辑样式”按钮，就可以重新编辑CSS样式了；如 果单击“删除CSS规则”按钮，就可以删除“CSS 样式” 面板中的所选样式，并从应用该规则的所有元素中删 除格式。
•15
2.3.4 应用CSS样式
定义了CSS样式后，可以将这些CSS样式应用于网页中 的文本、图像、Flash等对象。具体的方法如下。
•21
3.外观(Layout)设置 （1）滚动文字对齐方式align 基本语法： <marquee align="对齐方式">滚动文字</marquee> 对方方式=top、middle、bottom，对齐上沿、中间、下
沿。 （2）滚动背景颜色属性bgcolor 在滚动文字的后面，可以添加背景颜色。 基本语法： <marquee bgcolor="color_value">滚动文字</marquee>
•7
2.2 制作一个简单的网页
在认识了Dreamweaver之后，接下来我们将利用文字和 图片，完成“数学与计算机”系网站主页的内容，学 习在Dreamweaver中输入并设置文字格式的基本操作， 完成效果如图所示。
•8
2.3 CSS样式
2.3.1 创建CSS样式 2.3.2 将外部样式表导入到当前文档 2.3.3 重新编辑和删除CSS样式 2.3.4 应用CSS样式
•19
（2）滚动方式属性behavior 通过这个属性能够设定不同方式的滚动文字效果。如滚
动的循环往复、交替滚动、单次滚动等。 基本语法： <marquee behavior="value">滚动文字</marquee> （3）滚动循环属性loop 通过这个属性能够让文字滚动循环进行。 基本语法： <marquee loop="次数">滚动文字</marquee>
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文档。
dreamweaver教程第2章
2.2.2 熟悉Dreamweaver CS5的 【插入】面板
【插入】面板中包括8组面板，分别是：
2.3 体验CS5的新增功能
2.3.1 增强的CSS功能 2.3.2 实时视图导航 2.3.3 简化的站点设置
2.3.4 Adobe BrowserLab
2.3.5 Business Catalyst 集成 2.3.6 动态相关文件 2.3.7 PHP 自定义类代码提示 2.3.8 站点特定的代码提示 2.3.9 Subversion 支持增强功能
2.3.5 Business Catalyst 集成
Adobe Business Catalyst是一个承载应用
程序，将传统的桌面工具替换为一个中央平 台，供Web设计人员使用。允许构建任何内 容，包括数据驱动的基本Web站点，以及功 能强大的在线商店。
2.3.6 动态相关文件
“动态.3 简化的站点设置
升级后的【站点设置对象】对话框使设置本
地 站点更简单，“远程服务器”类别允许 在一个视图中指定远程服务器和测试服务器。
2.3.4 Adobe BrowserLab
Dreamweaver CS5集成了Adobe
BrowserLab（一种新的CS Live在线服务）， 该服务为跨浏览器兼容性测试提供快速准确 的解决方案。
外部文件和脚本，以组合基于PHP的内容管 理系统 (CMS)页面，以及在“相关文件”工 具栏中显示其文件名。
2.3.7 PHP 自定义类代码提示
PHP自定义类代码提示显示PHP凼数、对象
和常量的正确诧法，有助于输入更准确的代 码。代码提示还可以使用自定义凼数、类以 及第三方框架（如Zend框架）。
版，可以将其卸载。
《DreamweaverCS5网页设计》课件
第2章目录
设置页面的标题和编码： 1. 选择“修改”→“页面属性”，或者在属性检查器中单击 “页面属性”。 2. 在“页面属性”对话框中，单击“标题/编码”类别，如图 2.1所示。 3. 在“标题”框中，指定页面标题。也可以使用文档工具栏 来指定页面标题。 4. 从“编码”下拉列表框中选择文档中字符所用的编码。 5. 单击“确定”。
第1章目录
8／183
1.2 设置Dreamweaver站点
1.2.1 Dreamweaver工作流程 规划和设置站点 组织和管理站点文件 设计网页布局 向页面添加内容 通过手动编码创建页面 针对动态内容设置Web应用程序 创建动态页 测试和发布
第1章目录
9／183
1.2 设置Dreamweaver站点
第10章 制作ASP动态网页
3／183
第1章 Dreamweaver CS5 使用基础
1.1 认识Dreamweaver CS5工作区 1.2 设置Dreamweaver站点 1.3 创建和管理站点文件
4／183
ቤተ መጻሕፍቲ ባይዱ
1.1 认识Dreamweaver CS5工作区
1.1.1 启动Dreamweaver CS5 启动Dreamweaver CS5：单击“开始”，指向“所有程序”，然后单击 “Adobe Dreamweaver CS5”。 在“开始”菜单或任务栏中为这个软件添加一个快捷方式。 1.1.2 工作区布局概述 工作区中主要包括以下元素。 欢迎屏幕。 应用程序栏。 文档工具栏。 标准工具栏。 编码工具栏。 样式呈现工具栏 文档窗口 属性检查器 标签选择器 面板组 插入面板 文件面板
第1章目录
13／183
Dreamweaver CC实例教程(第5版) 第2章 文本
2.1.8 设置网页的默认格式
用户在制作新网页时，系统提供的页面都有一些默认的属性，如网页 的标题、网页边界、文字编码、文字颜色和超链接的颜色等。若需要修改 默认网页的页面属性，可选择“文件 > 页面属性”命令，弹出“页面属性” 对话框。
“页面属性”对话框
2.1.9 课堂案例—机电设备网页
使用“属性”面板，设置文字大小、颜色及字体；使用 “CSS设计器”面板，设置文字的字体、大小、颜色及行距。
为段落添加换行符有以下3种方法。 （1）单击“插入”面板“HTML”选项卡中的“字符”展开式 按钮 ，选择“换行符”按钮 。 （2）按Shift+Enter组合键。 （3）选择“插入 > HTML > 字符 > 换行符”命令。
2.3 水平线、网格与标尺
课堂案例——艺术摄影网页 水平线 网格 标尺
2.3.1 课堂案例—艺术摄影网页
效果图
2.1.10 改变文本的大小
Dreamweaver CC 2019提供了2种改变文本大小的方法，一 种是设置文本的默认大小，另一种是设置选中文本的大小。
2.1.11 改变文本的颜色
丰富的视觉色彩可以吸引网页游览者的注意力，网页中的文 本不仅可以是黑色，还可以呈现为其他色彩，最多时可达到16 777 216种颜色。颜色的种类与用户显示器的分辨率和颜色值有 关，一般建议在216种网页色彩中选择文字的颜色。
课堂案例——电器城网页 设置无序列表或编号列表 修改无序列表或编号列表 设置文本缩进格式 插入日期 插入特殊字符 插入换行符
2.2.1 课堂案例—电器城网页
使用“属性”面板中的“编号列表”按钮，创建列表；使用“CSS 设计器”面板，设置列表的样式。
效果图
第2章DreamweaverCS5环境精品PPT课件
选择目标 文件所在 文件夹
单击选 择文件
单击“打 开”按钮
4．关闭文档
1 常用网站管理与网
FrontPage 2000是微软公司最新推出的面向
21世纪网络办公自动化时代的大型套装软件Office
2000中新增的一个重要组件，也是Office 2000注
重网络与Internet应用的一个重要体现。
FrontPage 2000是目前最常用的中文版网页制作工 具之一，简单易学,功能强大的网页制作利器，特别适 合网页初学者使用。Frontpage也有不少缺点：首先 是兼容性不好，利用FrontPage做出来的网页往往不 能用Netscape浏览器正常显示；其次，生成的垃圾
2．保存文档
要保存网页文档，可选择“文件”>“保存”菜 单，或按【Ctrl+S】组合键，弹出“另存为” 对话框。或者关闭文档时，自动弹出如下对话 框，选择“是”按钮即可保存文档。
选择保 存位置
输入文 件名
单击“保 存”按钮
3．打开文档
要打开文档，可选择“文件”>“打开”菜单 （或按【Ctrl+O】组合键），弹出“打开” 对话框。
• Macromedia 成立于84年，主要是做网络多媒体的开 发和应用，在92年与其他两家公司合并后改名为 Macromedia，仍然关注于网络多媒体类型的软件开发。 直到97年推出了flash和DreamWeaver，正式成为行 业中的大腕，被国内所熟知的“三剑客”基本成形。05 年被另一家行业巨头公司Adobe收购
Fireworks：主要用于制作网页图像、标志、GIF动 画、图像按钮与导航栏等。 Flash：主要用于制作矢量动画，如广告、网站片头 动画、动画短片、MTV等。 Photoshop：Adobe公司出品的一个优秀而且强大 的图形图像处理软件，起初它的应用领域主要是平面设 计而不是网页设计，但是它所具有的强大功能完全涵盖 了网页设计所涉及到的各种需求。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
2.2.3 “插入”面板
单击文档窗口右侧浮动面板组中的“插入”按钮，即可弹出以前熟悉的“插入”面 板。
“插入”面板共有8类对象元素，包含一些最常用的项目：常用、布局、表单、数 据、Spry、InContext Editing、文本和收藏夹。“插入”面板的初始视图为“常用” 面板，单击“插入”面板中“常用”面板右侧的倒三角形按钮，即可在弹出的下拉 列表中选择需要的面板，从而在不同的面板之间进行切换。如图所示。
最新推出的Dreamweaver CS5趋向于易用快捷，开发环境精简而高效，由于 与Adobe CS Live 在线服务Adobe Browser Lab 集成，开发人员能以可视方 式或直接在代码中进行设计，使用内容管理系统开发页面并实现精确的浏览 器兼容性测试。
学习要点
初次启动Dreamweaver CS5 Dreamweaver CS5的窗口组成 文件操作
2.1 初次启动Dreamweaver CS5
双击桌面上的Adobe Dreamweaver CS5图标 执行“开始”/“程序”/“Adobe Dreamweaver CS5”命令，即可启动
Dreamweaver CS5简体中文版。 第一次启动Dreamweaver CS5时，会弹出如图2-1所示的“默认编辑器”对
2.3 文件操作
Dreamweaver的文件操作可以看作是制作网页的基本操作，它包括新建文件、
打开文件、导入文件、保存和关闭文件、设置文档属性等。
2.3.1 新建、打开文档
执行“文件”/“新建”命令，在弹出的 “新建文档”对话框中，选择想要创建文 件的类型和布局，然后单击“创建”按钮，即可创建新文件。
框。若文件已保存过，则执行“文件”/“保存”命令时，直接保存文件。 如果希望将一个网页文档以模板的形式保存，切换到要保存的文档所在的窗
口，执行“文件”/“另存为模板”命令，则会打开“另存模板”对话框。在该 对话框的“站点”下拉列表框中选择一个保存该模板文件的站点，然后在 “另存为”后面的文本框中输入文件的名称，最后单击“保存”按钮完成文 件的保存。
2.2.8 标尺、网格与辅助线
使用标尺、网格和辅助线可以很方便地布局对象，并能了解编辑对象的位置。 1．标尺
选择“查看”/“标尺”/“显示”命令即可显示标尺。在文档编辑窗口拖动鼠标时， 在标尺上能查看到当前鼠标位置的坐标。再次选择“查看”/“标尺”命令可以隐藏标 尺。在“查看”/“标尺”命令的子命令中，还可以根据设计需要设置标尺的原点位置 和单位。 2．网格
话框，用户可以根据个人喜好将Dreamweaver CS5设置为指定文件类型的默认 编辑器。
2.1 Dreamweaver CS5的窗口组成
该界面用于打开最近使用过的文档或创建新文档，还可以从中通过产品介 绍或教程了解关于 Dreamweaver 的更多信息。如果不希望每次启动时都打 开这个界面，可以在“首选参数”对话框中修改设置。
2.2.4 工作区
2.2.5 状态栏
Dreamweaver CS5的状态栏位于文档窗口底部，嵌有三个重要的工具：标签选择 器、窗口大小弹出菜单和下载指示器，分别用于显示和控制文档源代码、显示页面 大小、查看传输时间等。如图所示。
2.2.6 属性面板
在Dreamweaver CS5中，选中某一个对象之后，“属性”面板将显示被选中对象 的属性。用户还可以在属性面板中修改被选对象的各项属性值。如上图所示。
打开网页文件可以分为直接打开网页文件和在框架中打开网页文件两种。 （1）直接打开文件 选择“文件”/“打开”命令，弹出“打开”对话框。用户也可在对话框中双击 所需文件来打开。如果Dreamweaver CS5还没有启动，可以右击要打开的文件，在 弹出的菜单中执行“使用Dreamweaver CS5编辑”命令来打开文件。 （2）在框架中打开文件 如果已打开框架集文件，要在框架集中某一个框架打开文件，可以先把光标 定位在需要打开文件的框架内，选择“文件”/“在框架中打开”命令，则会打开“选 择HTML文件”对话框。在此方式下，只能打开以html为扩展名的文件。
第2章 Dreamweaver CS5简介
Dreamweaver最早是 Macromedia 公司开发的用于网页制作和站点管理的一 款“所见即所得”的网页编辑工具。它将可视布局工具、应用程序开发功能 和代码编辑支持组合在一起，使得各个层次的开发人员和设计人员都能够快 速创建界面精美的、基于标准的网站和应用程序，其直观性与高效性是很多 网页编辑工具无法比拟的，与Flash、Fireworks 并称为网页制作reamweaver CS5工作环境的右侧存在着许多浮动面板。启动Dreamweaver CS5后，有些浮动面板已经打开，更多的则没有显示。这些面板可以自由地在界面 上拖动，也可以将多个面板组合在一起，成为一个选项卡组，在默认的情况下， Dreamweaver CS5中的浮动面板都是成组排列于工作环境的右侧，并且自动排齐。
网格是文档窗口中纵横交错的直线，通过网格可以精确定位图像对象。 选择“查看”/“网格”/“显示网格”命令，即可在文档编辑窗口中显示网格。 选择“查看”/“网格”/“靠齐到网格”命令，在文档中创建或移动对象时，就会 自动对齐距离最近的网格线。 选择“查看”/“网格”/“网格设置”命令，在弹出的“网格设置”对话框中可以 设置网格的参数，如颜色、间隔和线型。 3．辅助线 使用辅助线可以更精确地排列图像，标记图像中的重要区域。将鼠标移到标尺 上，按住鼠标左键并拖动到文档中合适的位置释放，即可添加辅助线。
2.3.2 导入、保存、关闭文档
执行“文件”/“导入”命令下的子命令，然后找到需要导入的文件，单击“打 开”命令，即可导入相应的文件。
如果同时打开了多个网页文件，则执行“文件”/“保存”或“文件”/“另存为” 命令只保存当前编辑的页面。
若要保存打开的所有页面，则须执行“文件”/“保存全部”命令。 若是第一次保存该文件，则执行“文件”/“保存”命令会弹出“另存为”对话