Download presentation
Presentation is loading. Please wait.
1
网页设计与制作 Dreamweaver CS6 标准教程
2
本章学习的主要内容： 1. Dreamweaver CS6工作界面 2. 创建网站站点 3. 管理站点 4. 网页文档头部信息设置
3
2.1 Dreamweaver CS6工作界面 Adobe Dreamweaver CS6是一款集网页设计、 制作和管理网站于一身的可视化网页编辑软件， 它保留了Dreamweaver早期版本的各种优点， 不仅可以轻松设计网站的前台页面，也可以方 便地实现网站后台各种复杂功能。
4
2.1 Dreamweaver CS6工作界面 2.1.1 开始页面 2.1.2 工作环境 2.1.3 工作区布局
2.1.4 多文档的编辑界面
5
2.1.1 开始页面 Dreamweaver CS6启动后，默认情况下会显示 开始页面，用户可以在开始页面中打开已有文档 或新建文档。勾选开始页面底部【不再显示】， 下次启动Dreamweaver CS6时将不会显示开始 页面。 选择菜单【编辑】|【首选参数】，在【首选参数】 对话框中勾选【显示欢迎屏幕】，单击【确定】 按钮，在下次启动时重新显示开始页面。
6
2.1.2 工作环境 Dreamweaver CS6的工作环境由菜单栏、文 档工具栏、文档窗口、状态栏、属性面板（或 属性检查器）和浮动面板组等部分组成。
7
2.1.3 工作区布局 Dreamweaver CS6为用户提供了多种工作区 布局，用户可以根据需要设定工作区环境，也 可以新建工作区布局，并对它进行管理和删除 操作。 选择菜单【窗口】|【工作区布局】，在子菜 单中选择一种工作区布局。
8
2.1.4 多文档的编辑界面 Dreamweaver CS6提供了多文档的编辑界面，将多 个文档集中到一个窗口中，用户可以单击文档编辑窗 口上方选项卡的文件名切换到相应的文档，还可以按 住鼠标左键拖动选项卡改变文档的顺序。
9
2.2 创建网站站点 站点是存放一个网站所有文件的场所，由若干文 件和文件夹组成。用户在开发网站前必须先建立 站点，便于组织和管理网站文件。
10
2.2 CSS样式控制面板 2.2.1 创建新站点 2.2.2 新建和保存网页 2.2.3 管理站点文件和文件夹
2.2.4 课堂案例—慈善救助中心
11
2.2.1 创建新站点 站点按站点文件夹所在位置分为两类：本地站点 和远程站点。
本地站点是指本地计算机上的一组文件，远程站 点是远程WEB服务器上的一组文件。 创建本地站点首先要在本地硬盘上新建一个文件 夹或者选择一个已经存在的文件夹作为站点文件 夹，那么这个文件夹就是本地站点的根文件夹。
12
2.2.1 创建新站点 创建本地站点的操作步骤如下。 选择菜单【站点】|【新建站点】，或选择【管理站点】 并在【管理站点】对话框中单击【新建】按钮，打开 【站点设置对象】对话框，在左边选择【站点】，在右 侧输入站点名称和本地站点文件夹路径。 单击左侧【高级设置】，展开其他选项，选择【本地 信息】，在右侧设置相应的属性。 其他项可以根据需要设置，设置完毕后单击【保存】 按钮。在【文件】面板中可以看到新建的本地站点。
13
2.2.2 新建和保存网页 1．新建网页文档 选择菜单【文件】|【新建】，打开【新建文档】 对话框，在左侧选择【空白页】，在【页面类型】 中选择【HTML】，在【布局】中选择【无】。 单击【创建】按钮就可以创建网页文档。 2．保存网页文档 保存网页文档有如下两种方法。 （1）选择菜单【文件】|【保存】或【全部保 存】。在【另存为】对话框的【文件名】文本框 中输入网页的名称，单击【保存】按钮完成保存。 （2）按<Ctrl+S>快捷键保存网页文档。
14
2.2.3 管理站点文件和文件夹 1． 创建文件和文件夹 2．重命名文件和文件夹 3．移动文件和文件夹 4．删除文件或文件夹
15
2.2.4 课堂案例—慈善救助中心 案例学习目标：学习创建站点、管理站点文件 和文件夹的方法。
案例知识要点：使用【站点】|【新建站点】 创建站点，在【文件】面板中移动文件、重命 名文件。 素材所在位置：光盘/案例素材/ch02/课堂案 例-慈善救助中心。 案例效果如图2-17所示。
17
2.3 管理站点 建立站点以后，可以对站点进行打开、编辑、 复制和删除等各种操作。
18
2.3 管理站点 2.3.1打开站点 2.3.2编辑站点 2.3.3复制站点 2.3.4删除站点
19
2.3.1 打开站点 Dreamweaver允许建立多个站点，并可以通 过切换打开需要编辑的站点。打开站点的操作 步骤如下。
选择菜单【窗口】|【文件】或按<F8>键打 开【文件】面板，单击左边的下拉框，在下拉 列表中选择要打开的站点。 打开站点后，在【本地文件】下显示该站点 内的所有文件和文件夹。
20
2.3.2 编辑站点 编辑站点可以重新设置站点的一些属性，操作 步骤如下。
选择菜单【站点】|【管理站点】，打开【管 理站点】对话框，选择要编辑的站点名称，如 webtest，单击编辑按钮图标 。 打开【站点设置对象webtest】对话框。经 过对各种设置修改后，单击【保存】按钮，返 回【管理站点】对话框。
21
2.3.3 复制站点 复制站点可以建立多个结构相同的站点，让这 些站点保持一定的相似性，可以提高工作效率。 复制站点的操作步骤如下。
选择菜单【站点】|【管理站点】，打开【管 理站点】对话框，选择要复制的站点名称，如 webtest，单击【复制】按钮。这时在左边的 站点列表中会出现一个新的复制站点，名称为 “webtest复制”。 复制的站点和原站点默认使用同一个文件夹， 选择复制的站点，对其各种设置进行编辑操作。
22
2.3.4 删除站点 在Dreamweaver中删除站点，只是删除了 Dreamweaver同本地站点之间的关系。本地 站点中的文件夹和文件，仍然保存在硬盘原来 的位置上，没有被删除，也没有任何改变。 删除站点的操作步骤如下。 选择菜单【站点】|【管理站点】，打开【管 理站点】对话框，选择要删除的站点名称，单 击【删除】按钮。 在打开的【Dreamweaver】对话框中单击 【是】按钮，选中的站点就被删除，
23
2.4 网页文档头部信息设置 2.4.1 插入搜索关键字 2.4.2 设置描述信息 2.4.3 插入版权信息 2.4.4 设置刷新时间
24
2.4.1 插入搜索关键字 插入搜索关键字可以通过以下两种方法完成。 1．在代码视图中插入关键字
在【文档】窗口中切换到代码视图，将光标置于 <head>…</head>标签中。 选择菜单【插入】|【HTML】|【文件头标签】|【关键 字】，打开【关键字】对话框，输入关键字，如“礼品，节 日礼品”，多个关键字用英文逗号分隔。 单击【确定】按钮完成设置，在代码视图下可以看到 <head>标签内新增了如下代码： <meta name="keywords" content="礼品,节日礼品" />
25
2.4.1 插入搜索关键字 2．使用META对话框插入关键字
选择菜单【插入】|【HTML】|【文件头标签】 |【META】，打开【META】对话框，在【值】 文本框中输入keywords，在【内容】文本框中 输入关键字，多个关键字用英文逗号隔开。 单击【确定】按钮完成设置，在代码视图中 可看到相应的HTML标签。
26
2.4.2 设置描述信息 设置网页描述信息的操作如下。
在【文档】窗口中切换到代码视图，将光标置于 <head>…</head>标签中。选择菜单【插入】| 【HTML】|【文件头标签】|【说明】，在【说明】 对话框中输入说明文字。 单击【确定】按钮完成描述信息设置，在代码视图 下可以看到<head>标签内新增了如下代码： <meta name="description" content="节日礼品, 商务礼品" />
27
2.4.3 插入版权信息 在网页文档中插入版权信息的操作如下。
选择菜单【插入】|【HTML】|【文件头标签】| 【META】，打开【META】对话框，在【值】文本框 输入copyright，在【内容】文本框中输入版权信息， 如“本页版权归设计者所有”，单击【确定】按钮。 在代码视图下可以看到<head>标签内新增了如下代 码： <meta name="copyright" content="本页版权归 设计者所有" />
28
2.4.4 设置刷新时间 设置刷新时间具体操作步骤如下。
在【文档】窗口中切换到代码视图，将光标置于 <head>…</head>标签内，选择菜单【插入】| 【HTML】|【文件头标签】|【刷新】。 在【刷新】对话框中设置相应属性。 单击【确定】按钮，在代码视图下可以看到 <head>标签内新增了如下代码： <meta http-equiv="refresh" content="30" />
Similar presentations
