实战Dreamweaver CC 网页制作教程 第4版 课件 第1章 初识Dreamweaver CC_第1页
实战Dreamweaver CC 网页制作教程 第4版 课件 第1章 初识Dreamweaver CC_第2页
实战Dreamweaver CC 网页制作教程 第4版 课件 第1章 初识Dreamweaver CC_第3页
实战Dreamweaver CC 网页制作教程 第4版 课件 第1章 初识Dreamweaver CC_第4页
实战Dreamweaver CC 网页制作教程 第4版 课件 第1章 初识Dreamweaver CC_第5页
已阅读5页，还剩34页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

学习目标掌握DreamweaverCC工作界面的基本操作能利用站点定义向导创建站点和编辑管理站点初步体验制作一个完整网站的方法1.1DreamweaverCC简述1.2DreamweaverCC的工作界面和基本操作1.3DreamweaverCC站点的建立及规划1.4文件的基本操作1.5理解空白文档的初始代码1.6制作第一个网站“藏獒传说”本章内容

DreamweaverCC是美国Adobe公司推出的集网页制作和站点管理于一身的网页制作软件，也是第一个专门为网页设计师量身定制的可视化网页制作软件，利用它可以制作出跨越平台限制和浏览器限制的、充满丰富动感的网页。以前，网页设计者在制作网页时必须熟练掌握HTML语言和JavaScript，但是现在设计者使用DreamweaverCC就可以轻松制作出精美的网页，而且在制作过程中可以同步预览制作效果，使得网页设计过程简单明了。DreamweaverCC对工作界面进行了全面精简，减少了对话框的数量和很多不必要的操作按钮，新增加了许多HTML5元素，功能更强大。它不仅可以制作出任何结构复杂的静态网页，具有完美的操作界面、强大的模板功能、创建动态网页、强大的代码编辑功能，在DreamweaverCC中，CSS+Div功能更加完善，站点管理更为简捷、高效。1.1DreamweaverCC概述1.2.1DreamweaverCC的启动

1.2DreamweaverCC的工作界面和基本操作

单击“开始”按钮，选择“程序”中的“AdobeDreamweaverCC”命令，就可以启动DreamweaverCC应用程序。启动DreamweaverCC后首先看到的画面是开始页面，供用户选择新建文件的类型，或打开已有的文档等，在此选择“新建”下的“HTML”选项，便可进入工作界面。工作区设置对话1.2.2DreamweaverCC的工作界面1.2DreamweaverCC的工作界面和基本操作1.2DreamweaverCC的工作界面和基本操作1.菜单栏

菜单栏中包含了DreamweaverCC操作的所有命令。这些命令按照操作类别分为“文件”、“编辑”、“查看”、“插入”、“修改”、“格式”、“命令”、“站点”、“窗口”、“帮助”10个菜单。

2.文档工具栏

文档工具栏中包含“代码”、“拆分”、“设计”、“实时视图”等视图显示方式，相互之间可以快速切换，并且可以设置文档的标题。

1.2DreamweaverCC的工作界面和基本操作2.文档工具栏

“代码”视图：对于有编程经验的网页设计用户而言，可在“代码”视图中查看、修改

和编写网页代码，以实现特殊的网页效果。

“设计”视图：以所见即所得的方式显示所有网页元素。

“拆分”视图：将文档窗口分为左右两部分，左侧是代码部分，显示代码。右侧是技术

部分，显示网页元素及其在页面中的布局。

“实时视图”：显示不可编辑、交互式的、基于浏览器的文档视图。

文档标题是在用浏览器打开文档时显示在浏览器窗口标题栏上的名称，文档标题在文档的<title>和</title>标记中。它和文档的文件名称是不同的概念，文件名称则是文档存储在磁盘上的文件名。1.2DreamweaverCC的工作界面和基本操作3.文档窗口

文档窗口是设计网页的主窗口，在该窗口中，用户可以对各种网页元素进行编辑和排版。在文档窗口中右击，在弹出的快捷菜单中可以选择相应的命令进行操作。

4.状态栏

状态栏位于文档窗口的底部，用于提供与用户当前编辑的文档有关的信息，如标签选择器、窗口大小弹出菜单等。1.2DreamweaverCC的工作界面和基本操作5.属性面板

在DreamweaverCC中属性面板是经常使用的工具之一。当选中某一对象时，属性面板会自动地显示相关信息和参数，可以对其进行修改和设定1.2DreamweaverCC的工作界面和基本操作6.面板组

除了属性面板外，针对不同的控制对象，还有其他几个面板组，例如“插入”面板、“文件”面板以及“CSS设计器”面板等。按F4可以打开或隐藏所有面板。

7.开发中心

单击该按钮，可以使用系统默认浏览器自动打开Dreamweaver开发中心页面。

8.同步设置

该按钮用于实现DreamweaverCC与CreativeCloud同步，单击该按钮可在弹出的对话框中进行同步设置。1.2DreamweaverCC的工作界面和基本操作9.设计器

单击该按钮，可以在弹出的菜单中选择适合自己的面板布局方式，以更好地适应不同的工作类型。单击该按钮弹出的下拉列表。1.3DreamweaverCC站点的建立及规划【实例1-1】“藏獒传说”网站的建立

单击菜单命令“站点”→“新建站点”，可打开“站点设置对象”对话框，在站点名称右侧的文本框中输入网站的名称，这里输入“藏獒传说”，单击本地站点文件夹右侧的按钮，指定“藏獒传说”站点的文件夹。1.3.1利用站点定义向导创建站点1.3DreamweaverCC站点的建立及规划【实例1-1】“藏獒传说”网站的建立

至此“藏獒传说”网站的站点已建立，在“文件”面板中会显示站点中所有的文件和文件夹。我们可以通过“文件”面板，就像使用资源管理器一样来管理网站的文件，如拷贝、粘贴、删除、移动和打开文件等。1.3.1利用站点定义向导创建站点1.3DreamweaverCC站点的建立及规划单击菜单命令“站点”→“管理站点”，在打开的“管理站点”对话框中可对站点进行管理操作。

1.站点的切换

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

2. “管理站点”对话框

在管理站点对话框中可以对站点进行编辑管理，如新建、编辑、复制、删除、导入和导出等。1.3.2站点的管理1.3DreamweaverCC站点的建立及规划【实例1-2】修改站点信息

1）单击菜单命令“站点”→“管理站点”，打开“管理站点”对话框，选择站点“藏獒传说”，单击“编辑当前选定的站点”按钮，在弹出的“站点设置对象”对话框中将网站名称改为“藏獒大世界”，单击“保存”和“完成”按钮结束站点编辑。1.3.3创建站点的文件和文件夹1.3DreamweaverCC站点的建立及规划【实例1-2】修改站点信息

2）在“文件”面板中选中站点名称，鼠标在“文件”面板中的空白处按右键，在弹出菜单中选择“新建文件夹”命令，此时文件夹名字处于可修改状态，输入文字“file”,按回车键结束输入。

3）在“文件”面板中选中站点名称，鼠标在“文件”面板中的空白处按右键，在弹出菜单中选择“新建文件”命令，输入文字“index2”，按回车键结束输入。1.3.3创建站点的文件和文件夹1.4文件的基本操作选择菜单命令“文件”→“新建”，打开“新建文档”对话框，在左侧选择“空白页”选项，在“页面类型”列表框中选择HTML选项，在“布局”列表框中选择“无”选项，单击“创建”按钮，即可完成一个新的空白文档的创建，默认的文件名为Untitled-1.html。1.4.1创建新的空白文档1.4文件的基本操作选择菜单命令“文件”→“打开”，在“打开”对话框中选择要打开的文件后，单击“打开”按钮即可进入该文档的编辑模式。1.4.2打开现有文档1.4文件的基本操作要以模板为基础创建新的文档，只需选择“文件”→“新建”命令，打开“新建文档”对话框，单击左侧“网站模板”选项卡，选择相应的站点，指定对应的模板，单击“创建”按钮即可。若前面已建立了模板，则对话框中显示已建立的模板。若前面没有建立模板，则对话框中显示“<无项目>”.1.4.3基于模板创建文档1.4文件的基本操作当第一次保存文档时，选择菜单命令“文件”→“保存”或“另存为”，在“另存为”对话框中选择要保存的文件路径、文件名和文件格式，单击“保存”按钮即可保存文档。已经保存过的文档再次保存时，只需单击“文件”→“保存”命令即可，不再出现对话框。1.4.4存储和关闭文档1.5理解空白文档的初始代码当新建空白文档后，切换到代码视图，将会发现虽然新建页面是空白的，但是其中已经有不少代码。默认状态下原代码如图所示。1.5理解空白文档的初始代码

1.<html>和</html>标记

<html>和</html>标记是HTML文档开始和结束的标记，文档中的所有内容都包含在这两个标记之间。在<html>前面添加的是HTML的版本描述信息。

2.<head>和</head>标记

<head>和</head>标记位于文档的头部，用于包含当前文档的相关信息，例如标题关键字等。通常，位于<head>和</head>标记之间的内容不会在网页上直接显示，而是出现在其他地方，例如标题出现在浏览器的标题栏上。位于<head>和</head>标记之间的内容被称为HTML的“头部”。

3.<title>和</title>

<title>和</title>标记位于<head>和</head>标记之间，即HTML的“头部”，用于定义网页的标题，其间的文字就是标题文字。浏览网页时，标题文字出现在浏览器的标题栏上。1.5理解空白文档的初始代码4.<body>和</body>标记

<body>和</body>标记之间包含的内容为HTML文档的正文，位于</head>标记之后，</html>标记之前。<body>和</body>标记用于定义HTML文档的正文部分。

<body>标记带有很多属性，可以控制文档的基本特征，例如background属性设置背景图像，bgcolor属性设置背景颜色等。1.6制作第一个网站“藏獒传说”网站的最终效果如图所示。1.6制作第一个网站“藏獒传说”(1)组织素材，建立站点

1）新建文件夹zangao，在该文件夹中新建1个子文件夹image，将所有的素材图片拷贝到image文件夹中。

2)启动DreamweaverCC，在欢迎界面中单击“新建”下的“HTML”选项，新建一个空白网页进入操作界面。

3）单击菜单命令“站点”→“新建站点”，打开“站点设置对象”对话框，在站点名称文本框中输入网站的名称“藏獒传说”，单击本地站点文件夹右侧的按钮，指定“藏獒传说”站点的文件夹zangao。1.6制作第一个网站“藏獒传说”（2）制作网站首页

1）将当前的空白网页保存在站点文件夹zangao中，命名为index.html，在“文档”工具栏中将文档标题改为“藏獒传说-首页”，按回车键确认。1.6制作第一个网站“藏獒传说”（2）制作网站首页

2）单击属性面板中的“页面属性”按钮，打开“页面属性”对话框。在“外观”选项下，单击“背景图像”右侧的“浏览”按钮，找到image/bg.gif图像文件，如图1-21所示。单击“确定”按钮，为网页添加了背景图像。1.6制作第一个网站“藏獒传说”（2）制作网站首页

3）在文档窗口中输入文字“藏獒传说”，按回车键另起一段。选中文字，在属性面板中单击按钮切换到CSS属性面板，在字号大小的文本框中输入40，按回车键确认，文字颜色为#FF6600，单击按钮使得文字“居中对齐”。1.6制作第一个网站“藏獒传说”（2）制作网站首页

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

5）将光标分别移到第2、3段的开始，同时按Ctrl+Shift+空格键4次插入空格，使得每段文字缩进2个字。按F12预览效果。1.6制作第一个网站“藏獒传说”（2）制作网站首页

6）将光标移到第2段文字开始的最左端，单击菜单命令“插入”→“图像”→“图像”，打开“选择图像源文件”对话框，找到站点中image/zangao1.gif图像文件，单击“确定”按钮插入图像。右键单击选中图像，在弹出菜单中选择“对齐”→“左对齐”，按F12预览效果。1.6制作第一个网站“藏獒传说”（2）制作网站首页

7）光标移到第4段开始位置，单击菜单命令“插入”→“表格”，打开“表格”对话框。设置表格为1行5列，表格宽度为70%，边框粗细为1，单元格边距为2，单元格间距为0，单击“确定”按钮，则插入一个表格。1.6制作第一个网站“藏獒传说”（2）制作网站首页

8）单击表格边沿选中表格，设属性面板中的“Align”为“居中对齐”，让表格在文档中居中对齐。

9）单击表格左端的第1个单元格将光标移到该单元格中，输入文字“藏獒书屋”。同理，在其他的单元格中分别输入文字“精品藏獒”、“藏獒文化”、“藏獒训练”“熬友交流”。拖拽鼠标从左到右选中所有单元格，在CSS属性面板中设字号大小为18，文字颜色为黑色，单元格“水平”为居中对齐，使得文字在表格中居中。按F12预览效果。1.6制作第一个网站“藏獒传说”（2）制作网站首页

10）光标移到表格右端按回车键，此时光标在表格的下一段左端，单击菜单命令“插入”→“媒体”→“FlashSWF”，打开“选择SWF”对话框。在对话框中选择image/zangao.swf文件，两次单击“确定”按钮，插入Flash的SWF文件。光标移到Flash文件右边，单击属性面板中的居中对齐按钮，使得Flash文件在文档中居中。按F12预览效果。1.6制作第一个网站“藏獒传说”（3）制作网站子页

1）新建网页，保存为index1.html，在“文档”工具栏中将文档标题改为“藏獒传说-精品藏獒”，按回车键确认。

2）单击属性面板中的“页面属性”按钮，打开“页面属性”对话框。在“外观”选项下，单击“背景图像”右侧的“浏览”按钮，找到image/bg.gif图像文件，单击“确定”按钮，为网页添加了背景图像。

3）在文档窗口中输入“精品藏獒”，按回车键另起一段。选中文本，在CSS属性面板中设字号大小字号为40，文字颜色为#FF6600，单击按钮使文字居中

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论