Dreamweaver-CS6网页制作第1章

目录
前进
后退
结束
1.3 利用Dreamweaver CS6创建站点
（1）在打开的Dreamweaver CS6中，选择“站点 新建站点”菜单项进入新建站点的流程，如下图所示 进入Dreamweaver CS6界面，点击菜单栏中的 “ ”符号就会出现“新建站点”和“管理站点” 。
目录
前进
后退
结束
1.3 利用Dreamweaver CS6创建站点
目录
前进
后退
结束
1.4 利用Dreamweaver CS6进行站点管理
导出站点
（1）选择“站点” “管理站点”菜单项，在弹出 的“管理站点”对话框中，选择要导出的站点“悠悠 我心的个人网站”，如下图1和图2所示。单击“导出 当前选择的站点”按钮 ，弹出“导出站点”对话 框。
目录
前进
后退
结束 图1“站点”菜单 图2“管理站点”对话框1
目录
前进
后退
选择要导入的站点文件
结束
1.4 利用Dreamweaver CS6进行站点管理
（3）在“导入站点”对话框中，选择前面保存的扩展 名为“.ste”文件，单击“打开”按钮，由于本机上 已经存在一个“悠悠我心的个人网站”站点，所以出 现下图的提示框：
目录
前进
后退 自动重命名站点名称 结束
1.4 利用Dreamweaver CS6进行站点管理
（2）在弹出的“站点设置对象”对话框中，输入网站 名称“悠悠我心的个人网站”，输入本地站点文件夹 “D：\mysite\”,如下图所示，单击“保存”按钮。
目录
前进
（1）输入网 站的名称
后退
（3）单击“保 存”按钮
结束
1.3 利用Dreamweaver CS6创建站点
（3）站点定义已经完成，查看Dreamweaver CS6界 面右边面板组中的“文件”面板，可以在站点列表中 发现，名为“悠悠我心的个人网站”的新站点已经创 建，但该站点下没有任何的内容，如下图所示，站点 内容存放在“D：\mysite\”文件夹中，这个文件夹是 在任务一中确立网站目录结构时建立的。
目录
前进
后退
结束
1.1 网页基础知识
目录
前进
WWW服务的基本原理
后退
结束
1.1
网页基础知识
WWW服务的基本原理：用户使用浏览器所看到的网 页，实际上是保存在Web服务器上相应站点中的网页 文件。一台Web服务器上可以同时有多个站点，每个 站点有多个网页、图像、视频等文件及其相关文件夹 组成。站点由开发人员设计制作，然后通过站点管理 软件上传到服务器上，并对其进行更新和维护。 网站的开发流程可以分为规划与设计、制作与发布、 更新与维护三个阶段。在规划与设计阶段要确定网 站的主题、结构、栏目和风格；在制作和发布阶段， 按照上一阶段确定的设计思路，利用网页制作工具， 使用搜集的素材完成站点的制作，然后把网站上传 到服务器；在更新和维护阶段，根据需求的变化对 站点内容进行更新和维护。
1.4 利用Dreamweaver CS6进行站点管理
（2） 在“导出站点”对话框中，可以任意选择保存 位置，这里选择保存在D盘下的“mysite”文件夹中 ，单击“保存”按钮，如下图所示：
目录
前进
后退
结束 “导出站点”对话框
1.4 利用Dreamweaver CS6进行站点管理
（3）回到“管理站点”对话框，如下图所示，单击“ 完成”按钮。此时，在“文件”面板中可以发现，“ 悠悠我心的个人网站”站点中多了一个扩展名为 “.ste”的文件（如果没有看到该文件，可以单击“ 文件”面板的“刷新”按钮刷新），如下图所示。也 就是在“D:\mysite\”文件夹中生成了一个扩展名为 “.ste”的文件，这个文件就是“悠悠我心的个人网 站”的站点导出文件。
目录
前进
后退
结束
1.2 Dreamweaver CS6的工作界面
Dreamweaver CS6的启动界面
目录
新建网页文件 或其他对象 选用已有的范例 创建CSS样式表 等网页文件
前进
打开最近编辑过 的网页文件
后退
结束
Dreamweaver CS6的工作界面
目录
前进
后退
结束
菜单栏
“文件”：提供新建、打开、保存、预览、转换文档格式等命令。 目录 “编辑”：提供用于基本操作的标准菜单命令。 “查看”：用于切换文档的各种视图，显示或隐藏各种页面元素。 “插入记录”：向页面中插入各种页面元素，创建超链接。 前进 “修改”：用于设置页面属性及更改选定页面元素的属性。 “文本”：用于设置文本及段落的格式。 “命令”：提供了对各种命令的访问。 后退 “站点”：提供了创建、编辑站点的命令。 “窗口”：用于设置工作区布局和各种面板的打开和隐藏。
后退
置。
结束
文档工具栏
目录
“文档标题”：显示当前网页的标题。新建文档时，默认的网
页标题是“无标题文档”。
“文件管理”：显示“文件管理”菜单，包括上传、下载等命 令。 “在浏览器中预览/调试”：选择一种浏览器预览或调试文档。 “可视化助理”：用户可以使用各种可视化助理来设计页面。 “检查浏览器兼容性”：用于检查CSS是否对各种浏览器均兼 容。
（4）单击“完成”按钮，回到“管理站点”对话框， 导入的站点已经出现在列表中，因为有重命名的站点 ，所以导入的站点名称后面自动加上了数字2，如下图 所示：
目录
前进
后退
导入后的站点显示
结束
1.4 利用Dreamweaver CS6进行站点管理
（5）单击“确认”按钮，完成站点的导入工作。 （6） Dreamweaver CS6主界面右侧“文件”面板的 下拉列表框中出现了导入“悠悠我心的个人网站2”站 点和原来的站点“悠悠我心的个人网站”，如下图所 示。在“站点管理”对话框中分别选择这两个站点， 单击“编辑”按钮 ，可以看到这两个站点的定义也 完全一样。
结束
1.1 网页基础知识
Internet：是一个全球性的计算机互联网络，中文名称 为“国际互联网”或“因特网”，如下图所示。
目录
前进
后退
Internet示意图
结束
1.1 网页基础知识
网站：指在网络上，根据一定的规则，使用网页开发
软件制作的用于展示特定内容的相关网页的集合。
网页：一般又称作HTML文档，可以在互联网上传输，
刷新按钮 后退 目录
前进
结束
1.4 利用Dreamweaver CS6进行站点管理
站点管理包括站点的编辑、复制、删除、导入和导出 。站点的编辑、复制、删除比较简单，本任务主要通 过“悠悠我心的个人网站”介绍站点的导出和导入方 法。 当需要更换一台计算机需要继续进行网站开发的时候 ，可以在Dreamweaver CS6中将定义好的站点从本 机导出，然后导入到另一台计算机进行编辑，在站点 管理信息比较复杂时，新建站点比较麻烦，使站点的 导入导出会显得很方便。
目录
前进
后退
结束
选择站点
1.4 利用Dreamweaver CS6进行站点管理
编辑、复制与删除站点
（1）站点编辑:站点的编辑用于修改已有站点的定义 消息，在“管理站点”对话框中选中要编辑的站点“ 悠悠我心的个人网站2”，单击“编辑”按钮 ，即可 对“幽幽我心的个人网站2”的站点进行编辑。 (2)站点复制:在“管理站点”对话框中选择要复制的 站点，这里选择“悠悠我心的个人网站2”，单击“复 制”按钮，将在站点列表中出现“悠悠我心的个人网 站2 复制”，如下图所示:
第一单元 创建个人网站
本章导读 本章任务 知识细目 上机实训
目录
前进
后退
结束
本章导读
目录
本章主要介绍了网站、网页的基本概念、 网站运作基本原理、Dreamweaver CS6 的工作界面组成、HTML文档的基本结构 和常见的HTML标记。
前进
后退
结束
本章任务
了解网站、网页的基本概念、网站运作基 本原理； 熟悉Dreamweaver CS6的工作界面、文档 窗口视图方式、面板组的基本操作； 掌握Dreamweaver CS6的属性面板和文档 工具栏的作用； 掌握HTML文档的基本结构，学会使用HTML 源代码制作简单网页的方法。
目录
前进
后退
结束 导出的站点定义文件
1.4 利用Dreamweaver CS6进行站点管理
导入站点
（1）选择“站点” “管理站点”菜单项，在弹出 的“管理站点”对话框中。如下图所示：
目录
Baidu Nhomakorabea前进
后退
结束
“管理站点”对话框2
1.4 利用Dreamweaver CS6进行站点管理
（2）单击“导入站点”按钮，出现“导入站点”对话 框，如下图所示：
CS6提供的标尺和网格工具，可以使操作更加准确。 标尺和网格只在网页文档窗口内显示，在浏览器中不会显示。
前进 目录
选择“查看→标尺→显示”命令，可打开标尺。
选择“查看→网格设置→显示网格” 命令可打开网格。
后退
结束
1.3 利用Dreamweaver CS6创建站点
站点可以简单地理解为存放网页及各种素材的文件 夹，可以分为本地站点和远程站点。其实，这两种 站点的内部结构没有不同之处，只是所处的位置不 同。使用Dreamweaver CS6开发站点的普遍做法是 ：先建立站点，管理其中的各种文件；完成本地站 点后，经过一系列的测试，再将其上传到远程服务 器上供他人浏览。这一小节我们首先学会如何创建 本地站点。
前进
后退
结束
文档窗口
“文档”窗口显示当前打开的文档，用户在这里进行网页的编 辑制作，分为“代码”视图、“设计”视图和同时显示“代码” 视图和“设计”视图的“拆分”视图三种视图模式。
目录
标签选择器
标签选择器位于状态栏的最左边，以HTML标记显示页面对 象信息，通过它可以选择各种页面元素。
前进
状态栏
后退
结束
打开属性面板的方法
选择“窗口” →“属性” 命令 按Ctrl+F3快捷键
目录
面板组
前进
Dreamweaver CS6的面板
组中包含许多面板，每个
面板都可以展开或折叠， 如右图所示，关闭或打开
后退
面板可以通过“窗口”菜
单来完成。
结束
标尺和网格
在调整网页中一些对象的位置和大小时，利用Dreamweaver
结束
插入栏
目录
“常用”类别：用于创建和插入最常用的对象。
“布局”类别：用于插入表格、div标签、框架和 Spry构件。
前进 “视图”还可以选择表格的两种视图：标准（默认）视图和扩展。
“表单”类别：包含一些按钮，用于创建表单和插入表单元素。 “数据”类别：可以插入Spry数据对象和其它动态元素。 “Spry”类别：包含一些用于构建 Spry 页面的按钮。 “文本”类别：用于插入各种文本格式和列表格式的标签。 “收藏夹”类别：用于将最常用的按钮分组和组织到某一公共位
1.2 Dreamweaver CS6的工作界面
Macromedia Dreamweaver CS6提供了强大的网页 制作功能，其可视化的操作界面更接近广大的网页 制作人员。所见即所得的界面可以使那些只要掌握 了文档编辑能力的人就可完成一张网页的制作。
Dreamweaver CS6网页浏览的基本原理和网页制作 技术的发展，知道目前网页制作的几种工具。了解 HTML语法的基本构成及几种常用的标签。通过具体 的网页实例制作，掌握起始页的设置以及基本的界 面操作。
目录
前进
后退
结束
知识细目
1.1 网页基础知识 1.2 Dreamweaver CS6的工作界面 1.3 利用Dreamweaver CS6创建站点
前进 目录
1.4 利用Dreamweaver CS6进行站点管理
1.6 HTML语言的基础知识
后退
1.5 利用Dreamweaver CS6创建网站目录结构
结束
选取工具：用于选取“文档”窗口内的对象。
手形工具：用来移动对象的位置。 缩放工具：增大或减小窗口的显示比例。 窗口大小：显示当前文档窗口的大小，以像素为单位。 文件大小和估计的下载时间：显示页面的预计文档大小和预计下 载时间。
目录
属性面板
前进
后退
“属性”面板用于查看和编辑当前选定对象（如文本、图像等） 的各种属性。不同页面元素对应的的“属性”面板也不同。
目录
能被浏览器识别和翻译成页面并显示出来。
网站、网页、主页之间的关系 网站是若干网页的集合,包括主页和其他网页。 主页是指在浏览器的地址栏中输入网址后默认显示 的页面，是网站的索引页，其他网页通过超链接与 主页相连。
前进
后退
结束
1.1 网页基础知识
WWW服务（World Wide Web）
WWW含义为“全球网”或“万维网”，它以HTTP 为基础，提供面向Internet的信息查询服务，可以让 用户使用统一界面的信息浏览系统查询Internet上的 各类信息，其原理如下图所示。