DreamweaverCC网页设计课件第1章.ppt

1、本章内容本章内容1.1 Dreamweaver CC1.1 Dreamweaver CC概述概述 1.2 Dreamweaver CC1.2 Dreamweaver CC的工作界面和基本操作的工作界面和基本操作1.2 Dreamweaver CC1.2 Dreamweaver CC的工作界面和基本操作的工作界面和基本操作1.2 Dreamweaver CC1.2 Dreamweaver CC的工作界面和基本操作的工作界面和基本操作1.菜单栏菜单栏 菜单栏中包含了菜单栏中包含了Dreamweaver CC操作的所有命令。这些命令按照操作类别分为操作的所有命令。这些命令按照操作类别分为“文文件件”

2、、“编辑编辑”、“查看查看”、“插入插入”、“修改修改”、“格式格式”、“命令命令”、“站点站点”、“窗口窗口”、“帮助帮助”10个菜单。个菜单。2.文档工具栏文档工具栏 文档工具栏中包含文档工具栏中包含“代码代码”、“拆分拆分”、“设计设计”、“实时视图实时视图”等视图显示方式，等视图显示方式，相互之间可以快速切换，并且可以设置文档的标题。相互之间可以快速切换，并且可以设置文档的标题。1.2 Dreamweaver CC1.2 Dreamweaver CC的工作界面和基本操作的工作界面和基本操作2.文档工具栏文档工具栏“代码代码”视图：对于有编程经验的网页设计用户而言，可在视图：对于有编程经

3、验的网页设计用户而言，可在“代码代码”视图中查看、修改视图中查看、修改 和编写网页代码，以实现特殊的网页效果。和编写网页代码，以实现特殊的网页效果。“设计设计”视图：以所见即所得的方式显示所有网页元素。视图：以所见即所得的方式显示所有网页元素。“拆分拆分”视图：将文档窗口分为左右两部分，左侧是代码部分，显示代码。右侧是技术视图：将文档窗口分为左右两部分，左侧是代码部分，显示代码。右侧是技术 部分，显示网页元素及其在页面中的布局。部分，显示网页元素及其在页面中的布局。“实时视图实时视图”：显示不可编辑、交互式的、基于浏览器的文档视图。：显示不可编辑、交互式的、基于浏览器的文档视图。文档标题是在用

4、浏览器打开文档时显示在浏览器窗口标题栏上的名称，文档标题在文档标题是在用浏览器打开文档时显示在浏览器窗口标题栏上的名称，文档标题在文档的文档的和和标记中。它和文档的文件名称是不同的概念，文件名称则是文档标记中。它和文档的文件名称是不同的概念，文件名称则是文档存储在磁盘上的文件名。存储在磁盘上的文件名。1.2 Dreamweaver CC1.2 Dreamweaver CC的工作界面和基本操作的工作界面和基本操作3.文档窗口文档窗口 文档窗口是设计网页的主窗口，在该窗口中，用户可以对各种网页元素进行编辑和文档窗口是设计网页的主窗口，在该窗口中，用户可以对各种网页元素进行编辑和排版。在文档窗口中右

5、击，在弹出的快捷菜单中可以选择相应的命令进行操作。排版。在文档窗口中右击，在弹出的快捷菜单中可以选择相应的命令进行操作。4.状态栏状态栏 状态栏位于文档窗口的底部，用于提供与用户当前编辑的文档有关的信息，如标签状态栏位于文档窗口的底部，用于提供与用户当前编辑的文档有关的信息，如标签选择器、窗口大小弹出菜单等。选择器、窗口大小弹出菜单等。1.2 Dreamweaver CC1.2 Dreamweaver CC的工作界面和基本操作的工作界面和基本操作5.属性面板属性面板 在在Dreamweaver CC中属性面板是经常使用的工具之一。当选中某一对象时，属性中属性面板是经常使用的工具之一。当选中某一

6、对象时，属性面板会自动地显示相关信息和参数，可以对其进行修改和设定面板会自动地显示相关信息和参数，可以对其进行修改和设定1.2 Dreamweaver CC1.2 Dreamweaver CC的工作界面和基本操作的工作界面和基本操作6.面板组面板组 除了属性面板外，针对不同的控制对象，还有其他几个面板组，例如除了属性面板外，针对不同的控制对象，还有其他几个面板组，例如“插入插入”面板、面板、“文件文件”面板以及面板以及“CSS设计器设计器”面板等。按面板等。按F4可以打开或隐藏所有面板。可以打开或隐藏所有面板。7.开发中心开发中心 单击该按钮，可以使用系统默认浏览器自动打开单击该按钮，可以使用

7、系统默认浏览器自动打开Dreamweaver开发中心页面。开发中心页面。8.同步设置同步设置 该按钮用于实现该按钮用于实现Dreamweaver CC与与Creative Cloud同步，单击该按钮可在弹出的对话同步，单击该按钮可在弹出的对话框中进行同步设置。框中进行同步设置。1.2 Dreamweaver CC1.2 Dreamweaver CC的工作界面和基本操作的工作界面和基本操作9.设计器设计器 单击该按钮，可以在弹出的菜单中选择适合自己的面板布局方式，以更好地适应不同单击该按钮，可以在弹出的菜单中选择适合自己的面板布局方式，以更好地适应不同的工作类型。单击该按钮弹出的下拉列表。的工作

8、类型。单击该按钮弹出的下拉列表。1.3 Dreamweaver CC1.3 Dreamweaver CC站点的建立及规划站点的建立及规划【实例实例1-1】“藏獒传说藏獒传说”网站的建立网站的建立 单击菜单命令单击菜单命令“站点站点”“新建站点新建站点”，可打开，可打开“站点设置对象站点设置对象”对话框，在站点名对话框，在站点名称右侧的文本框中输入网站的名称，这里输入称右侧的文本框中输入网站的名称，这里输入“藏獒传说藏獒传说”，单击本地站点文件夹右侧的，单击本地站点文件夹右侧的按钮，指定按钮，指定“藏獒传说藏獒传说”站点的文件夹。站点的文件夹。1.3 Dreamweaver CC1.3 Drea

9、mweaver CC站点的建立及规划站点的建立及规划【实例实例1-1】“藏獒传说藏獒传说”网站的建立网站的建立 至此至此“藏獒传说藏獒传说”网站的站点已建立，在网站的站点已建立，在“文件文件”面板中会显示站点中所有的文件和面板中会显示站点中所有的文件和文件夹。我们可以通过文件夹。我们可以通过“文件文件”面板，就像使用资源管理器一样来管理网站的文件，如拷面板，就像使用资源管理器一样来管理网站的文件，如拷贝、粘贴、删除、移动和打开文件等。贝、粘贴、删除、移动和打开文件等。1.3 Dreamweaver CC1.3 Dreamweaver CC站点的建立及规划站点的建立及规划 单击菜单命令单击菜单命

10、令“站点站点”“管理站点管理站点”，在打开的，在打开的“管理站点管理站点”对话框中可对站点进对话框中可对站点进行管理操作。行管理操作。1.站点的切换站点的切换 在在“文件文件”面板左上侧的下拉列表中选择已经创建的站点，就可以切换到对这个站点面板左上侧的下拉列表中选择已经创建的站点，就可以切换到对这个站点进行操作的状态。还可以单击菜单命令进行操作的状态。还可以单击菜单命令“站点站点”“管理站点管理站点”，在打开，在打开“管理站点管理站点”对对话框中选择需要的站点，单击话框中选择需要的站点，单击“完成完成”按钮。这样就可以在文件面板中显示新切换的站点按钮。这样就可以在文件面板中显示新切换的站点1.

11、3 Dreamweaver CC1.3 Dreamweaver CC站点的建立及规划站点的建立及规划 2.“管理站点管理站点”对话框对话框 在管理站点对话框中可以对站点进行编辑管理，如新建、编辑、复制、删除、导入和在管理站点对话框中可以对站点进行编辑管理，如新建、编辑、复制、删除、导入和导出等。导出等。1.3 Dreamweaver CC1.3 Dreamweaver CC站点的建立及规划站点的建立及规划【实例实例1-2】修改站点信息修改站点信息 1）单击菜单命令）单击菜单命令“站点站点”“管理站点管理站点”，打开，打开“管理站点管理站点”对话框，选择站点对话框，选择站点“藏獒传说藏獒传说”，

12、单击，单击“编辑当前选定的站点编辑当前选定的站点”按钮按钮，在弹出的，在弹出的“站点设置对象站点设置对象”对话框中将对话框中将网站名称改为网站名称改为“藏獒大世界藏獒大世界”，单击，单击“保存保存”和和“完成完成”按钮结束站点编辑。按钮结束站点编辑。1.3 Dreamweaver CC1.3 Dreamweaver CC站点的建立及规划站点的建立及规划【实例实例1-2】修改站点信息修改站点信息 2）在）在“文件文件”面板中选中站点名称，鼠标在面板中选中站点名称，鼠标在“文件文件”面板中的空白处按右键，在弹面板中的空白处按右键，在弹出菜单中选择出菜单中选择“新建文件夹新建文件夹”命令，此时文件夹

13、名字处于可修改状态，输入文字命令，此时文件夹名字处于可修改状态，输入文字“file”,按按回车键结束输入。回车键结束输入。3）在）在“文件文件”面板中选中站点名称，鼠标在面板中选中站点名称，鼠标在“文件文件”面板中的空白处按右键，在弹面板中的空白处按右键，在弹出菜单中选择出菜单中选择“新建文件新建文件”命令，输入文字命令，输入文字“index2”，按回车键结束输入。，按回车键结束输入。1.4 1.4 文件的基本操作文件的基本操作 选择菜单命令选择菜单命令“文件文件”“新建新建”，打开，打开“新建文档新建文档”对话框，在左侧选择对话框，在左侧选择“空白页空白页”选项，在选项，在“页面类型页面类型

14、”列表框中选择列表框中选择HTML选项，在选项，在“布局布局”列表框中选择列表框中选择“无无”选项选项，单击，单击“创建创建”按钮，即可完成一个新的空白文档的创建，默认的文件名为按钮，即可完成一个新的空白文档的创建，默认的文件名为Untitled-1.html。1.4 1.4 文件的基本操作文件的基本操作 选择菜单命令选择菜单命令“文件文件”“打开打开”，在，在“打开打开”对话框中选择要打开的文件后，单击对话框中选择要打开的文件后，单击“打开打开”按钮即可进入该文档的编辑模式。按钮即可进入该文档的编辑模式。1.4 1.4 文件的基本操作文件的基本操作 要以模板为基础创建新的文档，只需选择要以模

15、板为基础创建新的文档，只需选择“文件文件”“新建新建”命令，打开命令，打开“新建文档新建文档”对话框，单击左侧对话框，单击左侧“网站模板网站模板”选项卡，选择相应的站点，指定对应的模板，单击选项卡，选择相应的站点，指定对应的模板，单击“创创建建”按钮即可。若前面已建立了模板，则对话框中显示已建立的模板。若前面没有建立模按钮即可。若前面已建立了模板，则对话框中显示已建立的模板。若前面没有建立模板，则对话框中显示板，则对话框中显示“”.1.4 1.4 文件的基本操作文件的基本操作 当第一次保存文档时，选择菜单命令当第一次保存文档时，选择菜单命令“文件文件”“保存保存”或或“另存为另存为”，在，在“

16、另存为另存为”对话框中选择要保存的文件路径、文件名和文件格式，单击对话框中选择要保存的文件路径、文件名和文件格式，单击“保存保存”按钮即可保存文档按钮即可保存文档。已经保存过的文档再次保存时，只需单击。已经保存过的文档再次保存时，只需单击“文件文件”“保存保存”命令即可，不再出现对话命令即可，不再出现对话框。框。1.51.5理解空白文档的初始代码理解空白文档的初始代码 当新建空白文档后，切换到代码视图，将会发现虽然新建页面是空白的，但是其中已当新建空白文档后，切换到代码视图，将会发现虽然新建页面是空白的，但是其中已经有不少代码。默认状态下原代码如图所示。经有不少代码。默认状态下原代码如图所示。

17、1.51.5理解空白文档的初始代码理解空白文档的初始代码 1.和和标记标记 和和标记是标记是HTML文档开始和结束的标记，文档中的所有内容都包含在文档开始和结束的标记，文档中的所有内容都包含在这两个标记之间。在这两个标记之间。在前面添加的是前面添加的是HTML的版本描述信息。的版本描述信息。2.和和标记标记 和和标记位于文档的头部，用于包含当前文档的相关信息，例如标题关标记位于文档的头部，用于包含当前文档的相关信息，例如标题关键字等。通常，位于键字等。通常，位于和和标记之间的内容不会在网页上直接显示，而是出现标记之间的内容不会在网页上直接显示，而是出现在其他地方，例如标题出现在浏览器的标题栏上

18、。位于在其他地方，例如标题出现在浏览器的标题栏上。位于和和标记之间的内容标记之间的内容被称为被称为HTML的的“头部头部”。3.和和 和和标记位于标记位于和和标记之间，即标记之间，即HTML的的“头部头部”，用于定，用于定义网页的标题，其间的文字就是标题文字。浏览网页时，标题文字出现在浏览器的标题栏义网页的标题，其间的文字就是标题文字。浏览网页时，标题文字出现在浏览器的标题栏上。上。1.51.5理解空白文档的初始代码理解空白文档的初始代码 4.和和标记标记 和和标记之间包含的内容为标记之间包含的内容为HTML文档的正文，位于文档的正文，位于标记之后标记之后，标记之前。标记之前。和和标记用于定义

19、标记用于定义HTML文档的正文部分。文档的正文部分。标记带有很多属性，可以控制文档的基本特征，例如标记带有很多属性，可以控制文档的基本特征，例如background属性设置背属性设置背景图像，景图像，bgcolor属性设置背景颜色等。属性设置背景颜色等。1.6 1.6 制作第一个网站制作第一个网站“藏獒传说藏獒传说”网站的最终效果如图所示。网站的最终效果如图所示。1.6 1.6 制作第一个网站制作第一个网站“藏獒传说藏獒传说”(1)组织素材，建立站点组织素材，建立站点 1）新建文件夹新建文件夹zangao，在该文件夹中新建，在该文件夹中新建1个子文件夹个子文件夹image，将所有的素材图片拷，

20、将所有的素材图片拷贝到贝到image文件夹中。文件夹中。2)启动启动Dreamweaver CC，在欢迎界面中单击，在欢迎界面中单击“新建新建”下的下的“HTML”选项，新建一个选项，新建一个空白网页进入操作界面。空白网页进入操作界面。3）单击菜单命令）单击菜单命令“站点站点”“新建站点新建站点”，打开，打开“站点设置对象站点设置对象”对话框，在站点对话框，在站点名称文本框中输入网站的名称名称文本框中输入网站的名称“藏獒传说藏獒传说”，单击本地站点文件夹右侧的按钮，指定，单击本地站点文件夹右侧的按钮，指定“藏藏獒传说獒传说”站点的文件夹站点的文件夹zangao。1.6 1.6 制作第一个网站制

21、作第一个网站“藏獒传说藏獒传说”（2）制作网站首页）制作网站首页 1）将当前的空白网页保存在站点文件夹将当前的空白网页保存在站点文件夹zangao中，命名为中，命名为index.html，在，在“文档文档”工具栏中将文档标题改为工具栏中将文档标题改为“藏獒传说藏獒传说-首页首页”，按回车键确认。，按回车键确认。1.6 1.6 制作第一个网站制作第一个网站“藏獒传说藏獒传说”（2）制作网站首页）制作网站首页 2）单击属性面板中的）单击属性面板中的“页面属性页面属性”按钮，打开按钮，打开“页面属性页面属性”对话框。在对话框。在“外观外观”选选项下，单击项下，单击“背景图像背景图像”右侧的右侧的“浏

22、览浏览”按钮，找到按钮，找到image/bg.gif图像文件，如图图像文件，如图1-21所示所示。单击。单击“确定确定”按钮，为网页添加了背景图像。按钮，为网页添加了背景图像。1.6 1.6 制作第一个网站制作第一个网站“藏獒传说藏獒传说”（2）制作网站首页）制作网站首页 3）在文档窗口中输入文字）在文档窗口中输入文字“藏獒传说藏獒传说”，按回车键另起一段。选中文字，在属性面，按回车键另起一段。选中文字，在属性面板中单击板中单击 按钮切换到按钮切换到CSS属性面板，在字号大小的文本框中输入属性面板，在字号大小的文本框中输入40，按回车键确认，文字，按回车键确认，文字颜色为颜色为#FF6600，

23、单击，单击 按钮使得文字按钮使得文字“居中对齐居中对齐”。1.6 1.6 制作第一个网站制作第一个网站“藏獒传说藏獒传说”（2）制作网站首页）制作网站首页 4）光标移到第）光标移到第2段，打开素材段，打开素材image/藏獒藏獒.doc，将文档中第，将文档中第1、2段文字复制粘贴到网段文字复制粘贴到网页中，光标移到文字的最后按回车键另起一段。选中这页中，光标移到文字的最后按回车键另起一段。选中这2段文字，在段文字，在CSS属性面板中设字属性面板中设字号大小为号大小为18，文字颜色为黑色，单击，文字颜色为黑色，单击 按钮使得文字按钮使得文字“左对齐左对齐”。5）将光标分别移到第）将光标分别移到第

24、2、3段的开始，同时按段的开始，同时按Ctrl+Shift+空格键空格键4次插入空格，使得每次插入空格，使得每段文字缩进段文字缩进2个字。按个字。按F12预览效果。预览效果。1.6 1.6 制作第一个网站制作第一个网站“藏獒传说藏獒传说”（2）制作网站首页）制作网站首页 6）将光标移到第）将光标移到第2段文字开始的最左端，单击菜单命令段文字开始的最左端，单击菜单命令“插入插入”“图像图像”“图像图像”，打开，打开“选择图像源文件选择图像源文件”对话框，找到站点中对话框，找到站点中image/zangao1.gif图像文件，单击图像文件，单击“确确定定”按钮插入图像。右键单击选中图像，在弹出菜单

25、中选择按钮插入图像。右键单击选中图像，在弹出菜单中选择“对齐对齐”“左对齐左对齐”，按，按F12预览效果。预览效果。1.6 1.6 制作第一个网站制作第一个网站“藏獒传说藏獒传说”（2）制作网站首页）制作网站首页 7）光标移到第）光标移到第4段开始位置，单击菜单命令段开始位置，单击菜单命令“插入插入”“表格表格”，打开，打开“表格表格”对话对话框。设置表格为框。设置表格为1行行5列，表格宽度为列，表格宽度为70%，边框粗细为，边框粗细为1，单元格边距为，单元格边距为2，单元格间距为，单元格间距为0，单击，单击“确定确定”按钮，则插入一个表格。按钮，则插入一个表格。1.6 1.6 制作第一个网站

26、制作第一个网站“藏獒传说藏獒传说”（2）制作网站首页）制作网站首页 8）单击表格边沿选中表格，设属性面板中的）单击表格边沿选中表格，设属性面板中的“Align”为为“居中对齐居中对齐”，让表格在文，让表格在文档中居中对齐。档中居中对齐。9）单击表格左端的第）单击表格左端的第1个单元格将光标移到该单元格中，输入文字个单元格将光标移到该单元格中，输入文字“藏獒书屋藏獒书屋”。同。同理，在其他的单元格中分别输入文字理，在其他的单元格中分别输入文字“精品藏獒精品藏獒”、“藏獒文化藏獒文化”、“藏獒训练藏獒训练”“”“熬友熬友交流交流”。拖拽鼠标从左到右选中所有单元格，在。拖拽鼠标从左到右选中所有单元格

27、，在CSS属性面板中设字号大小为属性面板中设字号大小为18，文字颜，文字颜色为黑色，单元格色为黑色，单元格“水平水平”为居中对齐，使得文字在表格中居中。按为居中对齐，使得文字在表格中居中。按F12预览效果。预览效果。1.6 1.6 制作第一个网站制作第一个网站“藏獒传说藏獒传说”（2）制作网站首页）制作网站首页 10）光标移到表格右端按回车键，此时光标在表格的下一段左端，单击菜单命令）光标移到表格右端按回车键，此时光标在表格的下一段左端，单击菜单命令“插插入入”“媒体媒体”“Flash SWF”，打开，打开“选择选择SWF”对话框。在对话框中选择对话框。在对话框中选择image/zangao.

28、swf文件，两次单击文件，两次单击“确定确定”按钮，插入按钮，插入Flash的的SWF文件。光标移到文件。光标移到Flash文件右边，单击属性面板中的居中对齐按钮文件右边，单击属性面板中的居中对齐按钮，使得，使得Flash文件在文档中居中。按文件在文档中居中。按F12预览效预览效果。果。1.6 1.6 制作第一个网站制作第一个网站“藏獒传说藏獒传说”（3）制作网站子页）制作网站子页 1）新建网页，保存为新建网页，保存为index1.html，在，在“文档文档”工具栏中将文档标题改为工具栏中将文档标题改为“藏獒传说藏獒传说-精品藏獒精品藏獒”，按回车键确认。，按回车键确认。2）单击属性面板中的）

29、单击属性面板中的“页面属性页面属性”按钮，打开按钮，打开“页面属性页面属性”对话框。在对话框。在“外观外观”选选项下，单击项下，单击“背景图像背景图像”右侧的右侧的“浏览浏览”按钮，找到按钮，找到image/bg.gif图像文件，单击图像文件，单击“确定确定”按钮，为网页添加了背景图像。按钮，为网页添加了背景图像。3）在文档窗口中输入）在文档窗口中输入“精品藏獒精品藏獒”，按回车键另起一段。选中文本，在，按回车键另起一段。选中文本，在CSS属性面属性面板中设字号大小字号为板中设字号大小字号为40，文字颜色为，文字颜色为#FF6600，单击，单击 按钮使文字居中对齐。按钮使文字居中对齐。1.6

30、1.6 制作第一个网站制作第一个网站“藏獒传说藏獒传说”（3）制作网站子页）制作网站子页 4）光标移到第）光标移到第2段，单击菜单命令段，单击菜单命令“插入插入”“表格表格”，打开，打开“表格表格”对话框。设置对话框。设置表格为表格为6行行2列，表格宽度为列，表格宽度为70%，边框粗细为，边框粗细为0，单元格边距为，单元格边距为2，单元格间距为，单元格间距为4，单击，单击“确定确定”按钮，则插入一个表格。按钮，则插入一个表格。1.6 1.6 制作第一个网站制作第一个网站“藏獒传说藏獒传说”（3）制作网站子页）制作网站子页 5）光标移到各单元格中，分别插入藏獒图像。）光标移到各单元格中，分别插入

31、藏獒图像。6）光标移到各单元格中，输入文字。）光标移到各单元格中，输入文字。1.6 1.6 制作第一个网站制作第一个网站“藏獒传说藏獒传说”（3）制作网站子页）制作网站子页 7）分别选中文字，在）分别选中文字，在CSS属性面板中设字号大小字号为属性面板中设字号大小字号为12，文字颜色为黑色。，文字颜色为黑色。8）框选所有单元格，在属性面板中设单元格的）框选所有单元格，在属性面板中设单元格的“水平水平”为居中对齐。按为居中对齐。按F12预览效果预览效果。（4）创建超链接）创建超链接 1）当网页处于打开状态时，单击文档工具栏上端的网页标签切换到）当网页处于打开状态时，单击文档工具栏上端的网页标签切

32、换到index.html文档。文档。否则在否则在“文件文件”面板中双击面板中双击index.html打开网页。打开网页。1.6 1.6 制作第一个网站制作第一个网站“藏獒传说藏獒传说”（4）创建超链接）创建超链接 2）选中表格中的文字）选中表格中的文字“精品藏獒精品藏獒”，在属性面板中单击，在属性面板中单击 按钮切换到按钮切换到HTML属性面板属性面板，单击，单击“链接链接”文本框右侧的文本框右侧的 按钮，打开按钮，打开“选择文件选择文件”对话框。在对话框中找到对话框。在对话框中找到index1.html文件，单击文件，单击“确定确定”按钮，则为按钮，则为“精品藏獒精品藏獒”文字建立起跳转到文字建立起跳转到index1.html的的超链接，如图超链接，如图1-32所示。设有链接的文字颜色发生了改变，并带有下划线，如图所示。设有链接的文字颜色发生了改变，并带有下划线，如图1-33所示所示。按。按F12预览效果。当鼠标移到文字预览效果。当鼠标移到文字“精品藏獒精品藏獒”上时，鼠标图标变为手形，单击文字后上时，鼠标图标变为手形，单击文字后则打开则打开index1.html网页。最终效果如图所示。网页。最终效果如图所示。