Dreamweaver CS5快速入门

Dreamweaver CS5快速入门

1.定义Dreamweaver CS5站点

（1）站点的定义及类型：

也称网站，是一系列通过超链接而相互联系的网页集合，这些网页都具有一些共性，例如风格、布局、表现主题等。站点根据其存储位置可分为两种：

①本地站点：放置在本地磁盘上的站点，对于网页制作者来说，就是在制作网站过程中存放所有文件和资源（图像、声音等）的总文件夹；

②远程站点：是本地站点的复制，存放在可以连接网络并提供广大网民浏览的远程服务器上。

（2）站点规划原则：

站点是由文档和文档所在的文件夹组成，利用不同的文件夹，将不同内容的网页分门别类地保存起来，是设计网站的前提。

? 将站点内容进行分类，然后把相关内容放在同一个文件夹中，以便对站

点资源进行管理，文件夹的层次最好不要超过3层。如：D:\\myweb ? 在对文件或文件夹命名时需注意：最好使用英文或汉语拼音作为文件或

文件夹的名字；命名应有一定规律，不要使用过长的名称，尽量使用意义明确的名称。如Photo、works、iamges

? 合理分配各种类型的文件，对文件进行分类存放。

（3）创建站点：

①在本地计算机某盘根目录下建立一个总的网站文件夹和总文件夹中的图像文件夹。

②选择【站点】—【新建站点】命令，打开【站点设置对象】对话框。

? 【站点名称】：设置站点名称，可以是中文或英文，此处输入“myweb” ? 【本地站点文件夹】：设置本地磁盘中用来存储站点文件的总文件夹，单击文本框右侧“浏览”打开“选择根文件夹”对话框，导航到myweb文件夹。

? 单击【高级设置】，设置各项参数：

※ 【默认图像文件夹】文本框：用于输入本地站点的默认图像文件夹

路径。

※ 【链接相对于】单选按钮组：在站点中创建指向其他资源或页面的

链接时，指定Dreamweaver创建的链接类型。 ※ 【Web URL】文本框：输入Web远程站点的URL。

※ 【区分大小写的链接检查】复选框：在Dreamweaver中检查链接时，

将检查链接的大小写与文件名的大小写是否匹配。

※ 【启用缓存】：指定是否创建本地缓存以提高链接和站点管理任务

的速度。

（4）管理站点：

选择【站点】—【管理站点】命令，打开【管理站点】对话框。 ? 编辑站点：单击[编辑]按钮，可对选中站点进行重新设置。 ? 删除站点：单击[删除]按钮，可删除选中站点。

? 注：此操作实际上只删除了Dreamweaver同本地站点之间的关系，并没有删除保存在本地计算机上的站点内容，用户可以重新创建指向其位置的信站点。

? 复制站点：单击[复制]按钮，可将选中站点进行复制。

? 导出站点：单击[导出]按钮，在[导出站点]对话框中设置导出位置，导出站点的扩展名为.ste。

? 导入站点：单击[导入]按钮，在打开的对话框中选择扩展名为.ste的文件，单击[确定]按钮即可。

（5）编辑站点内容

站点建立后，Dreamweaver右侧的“文件”面板中会显示出该站点名称及其站点文件。如果“文件”面板没有打开，则可选择【窗口】|【文件】命令或按F8键，打开【文件】面板，它是Deamweaver CS组织和编辑站点的控制中心，在该面板中包含了许多重要功能。

? 【文件】面板菜单：提供操作站点的全部功能。

? 站点下拉列表：列出本地计算机的磁盘分区及所有存在的站点名称，

可以提供站点的选择与切换功能。

? 视图方式列表：列出【站点列表框】显示的四种视图方式。

? 本地视图：显示在本地计算机中存储的网站文件。 ? 远程视图：显示在远程服务器中存储的网站文件。 ? 测试服务器：显示在测试服务器条件下存储的网站文件。 ? 地图视图：以站点地图的形式显示存储的网站文件。

? 工具栏：提供7个快捷工具按钮。

在【文件】下拉列表中选择要编辑的站点，打开此站点。

? 创建文件夹：在【文件】面板的本地站点文件列表中，右击准备创建

子文件夹的父文件夹，从快捷菜单中选择【新建文件夹】命令。文件夹反映网站结构，很多情况下文件夹代表网站的子栏目，每个文件夹对应一个子栏目。

? 创建文件：在【文件】面板的本地站点文件列表中，右击准备创建文

件的文件夹，从快捷菜单中选择【新建文件】命令。为网页文件命名时，应注意要带后缀“.htm”，网站中所有用到的文件、文件夹、多媒体、图像等内容的命名都应该以英文开头，后跟英文或数字。 ? 移动和复制文件或文件夹：命令法、鼠标拖动法、快捷键。 ? 重命名文件或文件夹：命令法、鼠标单击两次、快捷键。

? 删除文件或文件夹：选中要删除的文件或文件夹，按Delete键。此操

作会从磁盘上真正删除相应的文件或文件夹。 ? 编辑文件：双击要编辑的文件名即可。 2.新建网页

制作网页的第一步是从新建文件开始的。

（1）选择【文件】—【新建】命令或按Ctrl+N快捷键，打开【新建文档】对话框。

（2）【新建文档】对话框共有5个类别，分别为【空白页】，【空模板】，【模板中的页】，【示例中的页】和【其他】，可直接创建一个空白的HTML网页文档或通过模板创建有格式的网页。从【页面类型】列表框中选择要创建的页面类型，【布局】列表框显示了CS5提供的16种预设CSS布局样式，从中选择1列固定，居中，标题和脚注，右侧预览区域会显示网页的基本布局，表示一个居中列，宽度以像素表示，带有标题和脚注。

（3）在预览区域下方的【文档类型】下拉列表框中选择文档类型。 （4）如果在【布局】列表框中选择CSS布局，则从【布局CSS位置】下拉列表框中为布局CSS选择一个位置。

（5）保留其他选项的默认设置，单击“创建”按钮创建一个新页面，该页面分为3个部分，标题，正文和脚注，标识了一种布局样式，不同的部分都有一些预先设定的文字或图片，我们将这些称为占位符，在后续网页制作过程中，可以对其进行替换。这种预设的布局是通过各种的CSS规则定义实现的。打开“CSS样式”面，单击“全部”按钮，可查看当前页面上所应用的所有的CSS规则。

（6）选择【文件】—【保存】或按Ctrl+S组合键，打开“另存为”对话框，导航到站点文件夹，输入文档名称，单击“保存”按钮。

在编辑网页的过程中，一般每5~10分钟需要保存一次，以防止因为停电或死机等意外而丢失文件。 3.设置页面属性

选择【修改】—【页面属性】命令或按Ctrl+J快捷键，打开【页面属性】对话框，用于设置当前正在编辑的网页文档的整体属性。

Dreamweaver CS5将页面属性设置分为5个类别。

（1）【外观（CSS）】：采用CSS格式设置页面的一些基本属性。 ? 【页面字体】：指定在Web页面中使用的默认字体系列 ? 【大小】：指定Web页面中使用的默认字体大小 ? 【文本颜色】：指定显示字体时使用的默认颜色 ? 【背景颜色】：设置页面的背景颜色 ? 【背景图像】：设置页面背景图像

? 【重复】：设置背景图像的重复方式，no-repeat（仅显示背景图像一次）、

repeat（横向和纵向重复图像）、repeat-x/repteat-y（可横向/纵向重复图像） ? 上下左右【边距】：设置页面元素同页面边缘的间距。

（2）【外观（HTML）】：导致页面采用HTML格式 ? 【背景图像】/【背景】：用于设置页面的背景图像与背景色 ? 【文本】：显示字体时使用的默认颜色 ? 【链接】：应用于链接文本的颜色 ? 【已访问链接】：应用于已访问链接的颜色

? 【活动链接】：当鼠标或指针在链接上单击时应用的颜色 ? 【左边距】/ 【上边距】 ：指定页面左边距和上边距的大小 ? 【边距宽度】/【边距高度】：页面边距的宽度和高度。

（3）【链接（CSS）】：用于设置CSS链接属性 ? 【链接字体】：指定链接文本使用的默认字体系列 ? 【大小】：指定链接文本使用的默认字体大小 ? 【链接颜色】：应用于链接文本的颜色

? 【变换图像链接】：当鼠标或指针位于链接上时应用的颜色 ? 【已访问链接】 ：访问过的链接的颜色

? 【活动链接】：当鼠标或指针在链接上单击时应用的颜色 ? 【下划线样式】：指定用于链接的下划线样式

（4）【标题（CSS）】：用于设置CSS内容标题属性 ? 【标题字体】：指定标题使用的默认字体系列

? 【标题1】~【标题6】：指定最多6个级别的标题标签使用的字体大小和

颜色

（5）【标题/编码】：用于指定制作Web页面时所使用的文档编码类型以及要用于该编码类型的Unicode方式。

? 【标题】：在文档窗口和浏览器窗口的标题栏中出现的页面标题 ? 【文档类型（DTD）】：指定一种文档类型定义 ? 【编码】：文档中字符所用的编码

? 【Unicode标准化表单】：仅在选择UTF-8作为文档编码时才启用

（6）【跟踪图像】：可依照已经设计好的布局快速建立网页。 ? 【跟踪图像】：指定在复制设计时作为参考的图像 ? 【透明度】：确定跟踪图像的不透明度