《网页设计与制作》第二章Dreamweaver MX 7PPT资料29页
合集下载
网页设计与制作第二章DreamweaverMX2004000002-PPT精品文档
规划站点结构
在站点规划过程中，需使用合理的文件名称、文件 夹名称，好的名称容易理解、记忆，能够表达出网 页的内容。通常在命名时，可以采用与其内容相同 的英文或拼音进行命名，应避免使用长文件名和中 文，如电影文件夹可以命名为movie或dianying。 制作网页所需的图片或动画等文件的存放位置也是 规划站点结构时应考虑的。如果是大型站点，可分 别创建相应的文件夹在各个类别的文件夹下，如在 站点根目录下创建一个名称为picture的文件夹用以 存放主页中用到的图片和动画。如果站点内容较少， 可以只在站点的根目录下创建一个文件夹。
上单击可打开调色板，选择要设置的颜色。
设置角的三个控制点可快速改变图像大小。
2.使用属性面板
在属性面板的宽、高栏输入宽、高的像素值，可改变图像大小。
3.使用右键菜单
在图像上面单击右键，在弹出菜单中选择“改变大小”可重设图像大
设置图像大小的多种操作方式
本地站点 远程站点 测试站点
规划站点结构
设计站点的必要前提是规划站点结构。规划 站点结构是指利用不同的文件夹将不同的网 页内容分门别类地保存，合理地组织站点结 构，可提高工作效率，加快对站点的设计。 在制作站点时通常先在本地磁盘上创建一个 文件夹，将所有在制作过程中创建和编辑的 网页内容都保存在该文件夹中。在发布站点 时，直接将这些文件夹上传到Web服务器上 即可。如果站点内容较多或站点较大，则还 需建立子文件夹以存放不同类型的网页内容。
标题栏
Dreamweaver MX2019的工作窗口
菜单栏
编辑区 文档栏 面板组
属性面 板
Dreamweaver MX 2019的工作界面 菜单栏 起始页 工具栏 文档编辑窗口 属性面板 面板组
网页制作 第二章Dreamweaver基础知识共58页PPT资料
图3-4
图3-5 图3-6 图3-7 图3-8 图3-9
文档工具栏
该栏中放置了“文档”窗口视图（如设计 视图、代码视图、设计和代码混合视图）按钮、 标题设置框和文档管理（如在浏览器中预览网 页）等按钮，如图3-10所示。
“文档”窗口视图各按钮的含义如下。
：单击该按钮可以切换到“代码”视图中。“代
第2章 Dreamweaver基础知识
课前导读 课堂讲解 上机实战 课后练习
课前导读
基础知识 重点知识 提高知识
基础知识
Dreamweaver MX 2019的 工作界面。
重点知识
Dreamweaver MX 2019的工具面板及属性面 板的使用。
提高知识
Dreamweaver MX 2019中创建一般页面 的方法。
“文件”菜单 “编辑”菜单 “视图”菜单 “插入”菜单
“修改”菜单 “文本”菜单 “命令”菜单 “站点”菜单 “窗口”菜单 “帮助”菜单
“文件”菜单
“文件”菜单中包含网页文件操作的基本
项目，如网页文件的新建、打开、保存、关闭、
浏览、导入以及导出等，选择相应的命令即可执
图3-12 图3-13
标签选择器
标签选择器显示了一些常用的HTML标签，灵 活运用这些标签可大大降低设计人员的工作量。 比如想选择表格中的某一行，则可通过单击标签 选择器中的 标签快速选择，如图3-14所示。
图3-14
菜单概述
除了掌握Dreamweaver MX 2019的操作界 面外，还应该熟悉Dreamweaver MX 2019的命 令。在实际的制作过程中，有许多操作是需 要命令来完成的，下面就网页制作中常用的 一些菜单及命令进行简单的介绍。
Dreamweaver网页设计第2章_HTML简介PPT教学课件
2.1 HTML文档的基本结构—标记和属性
Hale Waihona Puke ⑵ 其他常用属性属性名 background
text link alink vlink leftmargin topmargin
属性用法 background="图像url"
text="颜色" link="颜色" alink="颜色" vlink="颜色" Leftmargin="像素值" topmargin="像素值"
2.1 HTML文档的基本结构—标记和属性
⑴ bgcolor属性 用法二：bgcolor="颜色标识符" “颜色标识符”在HTML的预定义颜色符中取值。 常用的预定义颜色符： black、olive、teal、red、blue、maroon、navy、 gray、lime、fuchsia、white、green、purple、 sliver、yellow、aqua 例如： <body bgcolor=" yellow">
2.1 HTML文档的基本结构—标记和属性
⑵ meta标记 描述网页说明 <meta name="description" content="网页说明信息"> “网页说明信息”是一段文本，它将作为搜索引擎对网页 的描述信息。 搜索引擎就能够根据这些关键字搜索到相应网页，并显 示关于网页的说明信息。
2.1 HTML文档的基本结构—标记和属性
⑴ title标记 title标记用于标识网页标题。 格式如下： <title>字符串</title> 格式中的“字符串”是网页的标题内容，浏览网 页时该内容显示在网页顶部的标题行中。 ⑵ meta标记 meta标记用于描述网页关键字和网页说明、定义 网页语言编码、页面刷新设置等，进行网页浏览 时，这些标记信息是不可见的。
《网页设计与制作》教学课件
第1章 网页设计与制作基础
1.1 学习任务：网页和网站基本知识 1.2 学习任务：网站开发的基本流程 1.5 学习任务：HTML标识语言基础 1.3 学习任务：全面认识Dreamweaver CS4 1.4 学习任务：创建和管理本地站点 1.6 应用实例——制作一个简单的网页 1.7 实训
1.1学习任务：网页和网站基本知识
根据提供服务的不同，通常把提供网页服务的服务 器称为Web服务器，相关网站称为Web站点。一个 Web站点由一个或多个Web页组成，这些Web页相 互连接在一起，存放在Web服务器上，以供浏览者 访问。 网站是提供各种信息和服务的基地，如用户熟悉的 搜狐、新浪、雅虎等。网站是由很多网页链接在一 起组成的。用户浏览到一个网站时看到的第一个页 面叫做主页。从主页出发，可以访问到本网站的每 一个页面，也可以链接到其他网站，方便地共享网 站资源。
<b>标签的内容</b> 标签的内容</b </
起始标签 结束标签
标签可以有属性，赋值的时候用“ ， 标签可以有属性，赋值的时候用“=”，多个属性中间用空格隔开 属性要写在开始标签里，并且标签符号和<>中间不可以有空格， <>中间不可以有空格 img>是 属性要写在开始标签里，并且标签符号和<>中间不可以有空格，如< img>是 错误的 结束的标签一定要加“ 结束的标签一定要加“/”
topmargin、leftmargin属性：用于设置网页 主体内容与网页顶端、左端的距离。例如， <body topmargin=0 leftmargin=2>。
上机作业：完成 作业1.txt 中的操作
13. Dreamweaver CS4简介
1.1 学习任务：网页和网站基本知识 1.2 学习任务：网站开发的基本流程 1.5 学习任务：HTML标识语言基础 1.3 学习任务：全面认识Dreamweaver CS4 1.4 学习任务：创建和管理本地站点 1.6 应用实例——制作一个简单的网页 1.7 实训
1.1学习任务：网页和网站基本知识
根据提供服务的不同，通常把提供网页服务的服务 器称为Web服务器，相关网站称为Web站点。一个 Web站点由一个或多个Web页组成，这些Web页相 互连接在一起，存放在Web服务器上，以供浏览者 访问。 网站是提供各种信息和服务的基地，如用户熟悉的 搜狐、新浪、雅虎等。网站是由很多网页链接在一 起组成的。用户浏览到一个网站时看到的第一个页 面叫做主页。从主页出发，可以访问到本网站的每 一个页面，也可以链接到其他网站，方便地共享网 站资源。
<b>标签的内容</b> 标签的内容</b </
起始标签 结束标签
标签可以有属性，赋值的时候用“ ， 标签可以有属性，赋值的时候用“=”，多个属性中间用空格隔开 属性要写在开始标签里，并且标签符号和<>中间不可以有空格， <>中间不可以有空格 img>是 属性要写在开始标签里，并且标签符号和<>中间不可以有空格，如< img>是 错误的 结束的标签一定要加“ 结束的标签一定要加“/”
topmargin、leftmargin属性：用于设置网页 主体内容与网页顶端、左端的距离。例如， <body topmargin=0 leftmargin=2>。
上机作业：完成 作业1.txt 中的操作
13. Dreamweaver CS4简介
网页设计与制作PPT课件
1.1 网页和网站
1.1.3 网页的基本功能
1、媒介的作用。使用者与信息之间的媒介。 一方面是发布者，功能是发布信息；另一方面 是浏览者，功能是提供浏览的信息，通过浏览 网页找寻需要的信息。
2、互动的作用。浏览者与网页制作单位之 间互动的窗口，可以单向或双向传递信息。
3、传输的作用。作为传输各种电子文件或 信息之用，如下载说明书、更新文件、驱动程 序等。
超链接的标志一般有：文本、图像、热区 三种。要注意的是，所有超链接标志均应清晰 无误地向浏览者标识出来，让人一看就知道。
1.2 网页中的主要元素
1.2.4其他的基本要素
除上述几种要素之外，在网页上经常使用 的还有动画、视频、声音等各种信息的形式。
1．动画。目前网络上常用的动画类型有 gif和Flash动画两种。
第2讲 HTML语言基础
$ [知识目标]
了解HTML文件的基本结构 掌握HTML中文本的编辑及图像的语法 掌握HTML中各种设置超级链接的语法 掌握HTML中表格和框架的基本语法
8 [能力目标]
掌握进行文本及图像的编辑操作 掌握创建各种超级链接的操作 能够编写简单的HTML网页 掌握HTML文件中表格和框架的使用
1.4 网页设计的基本流程
1.4.3网页的测试
1．浏览器兼容性测试。目前浏览器有： Internet Explorer与Netscape两大主流浏览器，二 者对HTML和CSS等语法的支持度是不同的。在 Dreamweaver中提供了可以检查网页中是否含有某版本浏 览器不能识别的语法功能，设计者可以借助其进行检查。
1.4 网页设计的基本流程
1.4.4网页上传和发布
网页设计好，必须把它发布到互联网上， 否则网站形象仍然不能展现出去。发布的服务 器可以是远程，也可以是本地。如果是发布到 互联网上，要先申请域名和主页空间，然后再 利用专用软件（如：CuteFTP）上传，FTP有很 多种软件，最著名的是 CuteFTP 和 LeapFTP， 也可以用Dreamweaver内置的FTP上传。
网页设计与制作课件第2章
2．工具栏
工具栏中放置了一些常用按钮，如打开文档、文件管理等。 它会随着当前窗口的变化而显示不同的内容。另外，单击 最下面的省略号可以打开“自定义工具栏”对话框，可以 在该对话框中设置工具栏中要显示的按钮，如图所示。
Hale Waihona Puke 项目二 网站创建与管理7
3三、网页的本质 ．文档标签栏
文档标签栏左侧显示当前打开的所有网页文档的标签（标签上显示相应网页文档的名称）及其关闭按钮； 右侧显示当前文档在本地磁盘中的保存路径以及向下还原按钮 ；文档标签下方显示当前文档中包含的文档 以及链接的文档。当用户打开多个网页时，通过单击文档标签可在各网页之间切换。另外，单击下方的包 含文档或链接文档，同样可打开相应文档，如图所示。
目录页
CONTENTS PAGE
项目二 网站创建与管理
案例一 案例二 案例三
创建企业网站本地站点——站点基本操作
案例四
为企业网站制作欢迎页面——网页文档基本操作
案例说明
Dreamweaver是一款集网页制作和网站管理于一身，所见即所得的 网页编辑软件。Dreamweaver CC 2017是其最新版本，本书就以该 软件为例介绍网页设计与制作的相关知识（为便于讲解，后面统一 称为Dreamweaver CC）。本案例首先启动该软件，然后熟悉其工 作界面上的各组成元素，最后在案例实施中调整Dreamweaver CC 的工作界面，以达到进一步熟悉Dreamweaver CC工作界面的目的。
项目二 网站创建与管理
5
二、认识Dreamweaver CC工作界面
启动Dreamweaver CC
后，进入其工作界面， 按【Ctrl+N】组合键， 在打开的文档中单击 “创建”按钮，新建一 个文档，如图所示。
网页设计与制作实用教程(第3版)第2章-Dreamweaver网页制作基础
第2章 Dreamweaver网页制作基础
本章主要内容：
Dreamweaver CS6的工作环境 建立本地站点 在Dreamweaver中制作第一个网页
2.1 Dreamweaver CS6的工作环境
与Dreamweaver前面版本相比， Dreamweaver CS6包含一个崭新、 高效的工作环境，且功能也得到了较大 的改进。
2.2.1 创建站点目录
在建立站点目录时，应该注意以下几点： 不要将所有的文件都存放在根目录下，否则容 易混淆，不利于管理和上传 按照文件的类型建立不同的子目录 目录的层次不能太深 目录命令要得当，不能使用中文或者过长的目 录名
2.2.1 创建站点目录
例如建立G:\samples，存放所有站点文件。在 samples目录下新建一个名字为images的子目 录，存放站点所需要的图片。接着在samples目 录下新建一个名字为part2的子目录，用于存放制 作好的页面文件，如图2-19所示。
在Dreamweaver CS6工作窗口的下端是“属 性”面板，使用“属性”面板可以很容易地设置页 面中的元素的最常用属性，从而提高了网页制作的 效率，如图2-8所示。
图2-8 “属性”面板
2.1.2 Dreamweaver软件界面
“属性”面板上面是标签选择器，这里显示环绕 当前选定内容的标签的层次结构。单击该层次结构 中的任何标签可以选择该标签及其全部内容。
图2-2 Adobe Dreamweaver CS6窗口
2.1.2 Dreamweaver软件界面
Dreamweaver CS6工作窗口,如图2-3所示。
菜单栏
插入工具栏
工作区切换器
文档工具栏
标签选择器
文档编辑区 属性面板
本章主要内容：
Dreamweaver CS6的工作环境 建立本地站点 在Dreamweaver中制作第一个网页
2.1 Dreamweaver CS6的工作环境
与Dreamweaver前面版本相比， Dreamweaver CS6包含一个崭新、 高效的工作环境，且功能也得到了较大 的改进。
2.2.1 创建站点目录
在建立站点目录时，应该注意以下几点： 不要将所有的文件都存放在根目录下，否则容 易混淆，不利于管理和上传 按照文件的类型建立不同的子目录 目录的层次不能太深 目录命令要得当，不能使用中文或者过长的目 录名
2.2.1 创建站点目录
例如建立G:\samples，存放所有站点文件。在 samples目录下新建一个名字为images的子目 录，存放站点所需要的图片。接着在samples目 录下新建一个名字为part2的子目录，用于存放制 作好的页面文件，如图2-19所示。
在Dreamweaver CS6工作窗口的下端是“属 性”面板，使用“属性”面板可以很容易地设置页 面中的元素的最常用属性，从而提高了网页制作的 效率，如图2-8所示。
图2-8 “属性”面板
2.1.2 Dreamweaver软件界面
“属性”面板上面是标签选择器，这里显示环绕 当前选定内容的标签的层次结构。单击该层次结构 中的任何标签可以选择该标签及其全部内容。
图2-2 Adobe Dreamweaver CS6窗口
2.1.2 Dreamweaver软件界面
Dreamweaver CS6工作窗口,如图2-3所示。
菜单栏
插入工具栏
工作区切换器
文档工具栏
标签选择器
文档编辑区 属性面板
第2章 网页设计与制作PPT课件
《网页设计与制作》 19
8．网站的宣传和推广 网站发布后，还要不断地进行宣传，这样 才能让更多的朋友认识它，提高网站的访问率 和知名度。网站宣传和推广的方法有很多，例 如到搜索引擎上注册，与别的网站交换链接， 运用网络广告等。
9．网站的更新和维护 网站是需要经常维护和更新内容的，必须 不断给它补充新的内容，才能够长期吸引住浏 览者。
《网页设计与制作》 5
2.1.2 网站建设的步骤 建设一个网站一般要经过以下步骤：网站目标和主题
的确定、网站的规划、网站素材的准备、网站制作工具的 选择和确定、网站的建立、注册域名和申请网页空间、网 站的测试和发布、网站的宣传和推广以及网站的更新和维 护。
1．网站目标和主题的确定 1）网站目标的确定 为什么要建立网站，是为了宣传产品，进行电子商务， 还是建立行业性网站？是企业的需要还是市场开拓的延伸？ 如果是个人网站，比如说是交朋友的、学习讨论的还是兴 趣爱好的？建立网站前目标要明确。另外还应该知道谁是 网站将来的访问者，例如，明确该网站是面向于消费者？ 雇员？学生？朋友还是家庭的？只有知己知彼，才能避免 在网站建设中出现很多问题，使网站建设能顺利进行。
《网页设计与制作》 14
这两种基本结构都只是理想方式，在实际 的网站设计中，总是将这两种结构混合起来使 用，希望浏览者既可以方便快速地到达自己需 要的页面，又可以清晰地知道自己的位置。所 以，最好的办法是：首页和一级页面之间用星 状链接结构，一级和二级页面之间用树状链接 结构。
《网页设计与制作》 15
《网页设计与制作》 11
2．网站的规划 网站的规划包括总体结构的设置、目录的设 置和链接结构的设置。 1）网站总体结构的确立 网站总体结构的确立至关重要，它是网站设 计能否成功的关键所在。规划一个网站结构，可 以用树状结构先把每个页面的内容大纲列出来， 尤其是要制作一个有很多页面的大网站时，特别 需要把这个架构规划好，同时要考虑到以后可能 的扩充性，免得做好以后又要一改再改整个网站 的架构，十分累人，也十分费时。
8．网站的宣传和推广 网站发布后，还要不断地进行宣传，这样 才能让更多的朋友认识它，提高网站的访问率 和知名度。网站宣传和推广的方法有很多，例 如到搜索引擎上注册，与别的网站交换链接， 运用网络广告等。
9．网站的更新和维护 网站是需要经常维护和更新内容的，必须 不断给它补充新的内容，才能够长期吸引住浏 览者。
《网页设计与制作》 5
2.1.2 网站建设的步骤 建设一个网站一般要经过以下步骤：网站目标和主题
的确定、网站的规划、网站素材的准备、网站制作工具的 选择和确定、网站的建立、注册域名和申请网页空间、网 站的测试和发布、网站的宣传和推广以及网站的更新和维 护。
1．网站目标和主题的确定 1）网站目标的确定 为什么要建立网站，是为了宣传产品，进行电子商务， 还是建立行业性网站？是企业的需要还是市场开拓的延伸？ 如果是个人网站，比如说是交朋友的、学习讨论的还是兴 趣爱好的？建立网站前目标要明确。另外还应该知道谁是 网站将来的访问者，例如，明确该网站是面向于消费者？ 雇员？学生？朋友还是家庭的？只有知己知彼，才能避免 在网站建设中出现很多问题，使网站建设能顺利进行。
《网页设计与制作》 14
这两种基本结构都只是理想方式，在实际 的网站设计中，总是将这两种结构混合起来使 用，希望浏览者既可以方便快速地到达自己需 要的页面，又可以清晰地知道自己的位置。所 以，最好的办法是：首页和一级页面之间用星 状链接结构，一级和二级页面之间用树状链接 结构。
《网页设计与制作》 15
《网页设计与制作》 11
2．网站的规划 网站的规划包括总体结构的设置、目录的设 置和链接结构的设置。 1）网站总体结构的确立 网站总体结构的确立至关重要，它是网站设 计能否成功的关键所在。规划一个网站结构，可 以用树状结构先把每个页面的内容大纲列出来， 尤其是要制作一个有很多页面的大网站时，特别 需要把这个架构规划好，同时要考虑到以后可能 的扩充性，免得做好以后又要一改再改整个网站 的架构，十分累人，也十分费时。
网页设计与制作PPT课件
8/24
Dreamweaver 当前最新版本 Dreamweaver CCSS5是. 什么意思？
CS 是Creative Suite的缩写（创意套件）
Adobe Creative Suite 包括： Adobe Acrobat 电子文档制作软件 Adobe Flash 矢量动画处理软件 Adobe Dreamweaver 网页制作软件 Adobe Illustrator 矢量图形绘图软件 Adobe Photoshop 图形处理软件 Adobe InDesign 排版软件
Dreamweaver 是业界领先的Web开发工具，通 过该工具用户能够高效地设计、开发和维护网站 和应用程序。使用Dreamweaver, Web 开发人 员能够完成开发的全过程，从创建和维护基本网 站到支持最佳实践和最新技术的高级应用程序。
网页制作三剑客：Dreamweaver、Flash、Fireworks
网页设计与制作
丁艳辉 E-Mail：dingyanhui@
1/24
网站的制作流程
规划阶段（网站策划） 设计阶段（页面美工） 实施阶段（网页制作）
2/24
3/24
LOGO 推荐阅读
主菜单 广告
快速登录 新闻公告
精彩项目
友情链接
版权说明
4/24
5/24
6/24
7/24
Dreamweaver 简介
23/24
位图 VS 矢量图
位图：.jpg; .gif; .bmp; 等 常用软件：Photoshop，Painter等
矢量图：.dwg; .cdr; 等 常用软件：AutoCAD、Coreldraw、 Illustrator等
返回
24/24
9/24
Dreamweaver 当前最新版本 Dreamweaver CCSS5是. 什么意思？
CS 是Creative Suite的缩写（创意套件）
Adobe Creative Suite 包括： Adobe Acrobat 电子文档制作软件 Adobe Flash 矢量动画处理软件 Adobe Dreamweaver 网页制作软件 Adobe Illustrator 矢量图形绘图软件 Adobe Photoshop 图形处理软件 Adobe InDesign 排版软件
Dreamweaver 是业界领先的Web开发工具，通 过该工具用户能够高效地设计、开发和维护网站 和应用程序。使用Dreamweaver, Web 开发人 员能够完成开发的全过程，从创建和维护基本网 站到支持最佳实践和最新技术的高级应用程序。
网页制作三剑客：Dreamweaver、Flash、Fireworks
网页设计与制作
丁艳辉 E-Mail：dingyanhui@
1/24
网站的制作流程
规划阶段（网站策划） 设计阶段（页面美工） 实施阶段（网页制作）
2/24
3/24
LOGO 推荐阅读
主菜单 广告
快速登录 新闻公告
精彩项目
友情链接
版权说明
4/24
5/24
6/24
7/24
Dreamweaver 简介
23/24
位图 VS 矢量图
位图：.jpg; .gif; .bmp; 等 常用软件：Photoshop，Painter等
矢量图：.dwg; .cdr; 等 常用软件：AutoCAD、Coreldraw、 Illustrator等
返回
24/24
9/24
电子课件-《Dreamweaver 网页设计与制作(第二版)》-项目二 创建度假村网站——Dreamweaver CS3 入门
“结果”面板用于显示几种常用操作的操作结果，如图所示。
“结果”面板
任务 1 面板基本操作——初识 Dreamweaver CS3 1. 搜索
Dreamweaver CS3 提供的搜索功能十分强大，如图所示。其搜索范围可 以是鼠标选定的一段文字、当前文档、当前打开的几个文档、某个文件夹下 的所有文档，甚至是整个站点的文档。
面板组
任务 1 面板基本操作——初识 Dreamweaver CS3
1. CSS
CSS 面板显示当前元素的 CSS 式样，可以在该区域新建、修改或删除 CSS 声明语句。
2. 代码片断
代码片断面板收集了许多常用代码段，包括 HTML 代码、JavaScript 代 码等。
3. 应用程序
应用程序面板为使用动态技术页面的编写提供了方便，该部分包括数据库 链接、数据集绑定、组件使用等方面的内容。
◆熟悉 Dreamweaver CS3 操作界面 ◆掌握网页文档的基本操作
任务 1 面板基本操作——初识 Dreamweaver CS3
Dreamweaver CS3 工作界面如图所示，其界面大致可以直观地划分为 9 个部分。
Dreamweaver CS3 工作界面
任务 1 面板基本操作——初识 Dreamweaver CS3
2. 最好不要使用汉字命名文件和文件夹。 3. 文件名中不要使用大写英文字母。
任务 2 创建“fuligong”站点——新建和管理站点
4. 运算符号不能用在文件名的开头。 5. 比较长的文件名可以使用下划线“_”隔开多个单词或关键 字。 6. 在大型网站中，分支页面的文件应存放在单独的文件夹中。 7. 在动态网站中，用来存放数据库的文件夹一般命名为“data” 或者“database”。
“结果”面板
任务 1 面板基本操作——初识 Dreamweaver CS3 1. 搜索
Dreamweaver CS3 提供的搜索功能十分强大，如图所示。其搜索范围可 以是鼠标选定的一段文字、当前文档、当前打开的几个文档、某个文件夹下 的所有文档，甚至是整个站点的文档。
面板组
任务 1 面板基本操作——初识 Dreamweaver CS3
1. CSS
CSS 面板显示当前元素的 CSS 式样，可以在该区域新建、修改或删除 CSS 声明语句。
2. 代码片断
代码片断面板收集了许多常用代码段，包括 HTML 代码、JavaScript 代 码等。
3. 应用程序
应用程序面板为使用动态技术页面的编写提供了方便，该部分包括数据库 链接、数据集绑定、组件使用等方面的内容。
◆熟悉 Dreamweaver CS3 操作界面 ◆掌握网页文档的基本操作
任务 1 面板基本操作——初识 Dreamweaver CS3
Dreamweaver CS3 工作界面如图所示，其界面大致可以直观地划分为 9 个部分。
Dreamweaver CS3 工作界面
任务 1 面板基本操作——初识 Dreamweaver CS3
2. 最好不要使用汉字命名文件和文件夹。 3. 文件名中不要使用大写英文字母。
任务 2 创建“fuligong”站点——新建和管理站点
4. 运算符号不能用在文件名的开头。 5. 比较长的文件名可以使用下划线“_”隔开多个单词或关键 字。 6. 在大型网站中，分支页面的文件应存放在单独的文件夹中。 7. 在动态网站中，用来存放数据库的文件夹一般命名为“data” 或者“database”。
网页设计与制作课件第2章
『选中单元格』单元格可以同时选中多个。 （1）选择连续的单元格：光标先选中第一个单元格，按【Shift】键不 放，再选取最后一个单元格。 （2）选不连续的单元格：按住【Ctrl】键，选取所需要的单元格即可。
对网页进行操作时，多使用“插入”栏和“属性”面板，那样 可以提高制作网站的效率。
上一页 返回
2.1.3用表格制作网页
上一页 返回
2.1.2 表格的修改嵌套
目标案例
2.1.2．表格的修改嵌套
在表格的单元格里嵌入一个表格，并用“属性”面板对表格或单元格进行修 改，实例最终效果如下图所示。
打 开 源 文 件
最 终 效 果 预 览
下一页 返回
操作步骤
步骤1：创建一个站点，主页为index.html页面，打开主页创建一个1行2列，宽为
步骤3：选中创建的表格，在“属性”检查器上给边框添加边框颜色为 #FF0000。
上一页 下一页 返回
知操识作点步评骤
步骤4：把鼠标移到第二个单元格，在“属性”检查器上给单元格添加背景 颜色为#00CC00。
步骤5：执行【文件】→【保存】菜单命令或利用快捷键【Ctrl+S】保存网 页文件，预览网页按【F12】键。
上一页 下一页 返回
知识点评
下面是有关表格属性的各参数含义说明。 『表格Id』如果要在网页中使用脚本语言来控制表格，就需要在该下拉 列表文本框中为表格命名。 『行』和『列』用于设置表格的行数和列数。 『宽』和『高』用于设置表格的宽度和高度。 『填充』用于设定单元格中内容与边框之间的距离，默认值为2。 『间距』用于设定单元格之间的距离，默认值为2。 『对齐』用于设表格的对齐方式。包含4个选项：“默认”“左对 齐”“居中对齐”和“右对齐”。 『边框』用于设定表格边框的宽度。
对网页进行操作时，多使用“插入”栏和“属性”面板，那样 可以提高制作网站的效率。
上一页 返回
2.1.3用表格制作网页
上一页 返回
2.1.2 表格的修改嵌套
目标案例
2.1.2．表格的修改嵌套
在表格的单元格里嵌入一个表格，并用“属性”面板对表格或单元格进行修 改，实例最终效果如下图所示。
打 开 源 文 件
最 终 效 果 预 览
下一页 返回
操作步骤
步骤1：创建一个站点，主页为index.html页面，打开主页创建一个1行2列，宽为
步骤3：选中创建的表格，在“属性”检查器上给边框添加边框颜色为 #FF0000。
上一页 下一页 返回
知操识作点步评骤
步骤4：把鼠标移到第二个单元格，在“属性”检查器上给单元格添加背景 颜色为#00CC00。
步骤5：执行【文件】→【保存】菜单命令或利用快捷键【Ctrl+S】保存网 页文件，预览网页按【F12】键。
上一页 下一页 返回
知识点评
下面是有关表格属性的各参数含义说明。 『表格Id』如果要在网页中使用脚本语言来控制表格，就需要在该下拉 列表文本框中为表格命名。 『行』和『列』用于设置表格的行数和列数。 『宽』和『高』用于设置表格的宽度和高度。 『填充』用于设定单元格中内容与边框之间的距离，默认值为2。 『间距』用于设定单元格之间的距离，默认值为2。 『对齐』用于设表格的对齐方式。包含4个选项：“默认”“左对 齐”“居中对齐”和“右对齐”。 『边框』用于设定表格边框的宽度。