单中选择“新建文件”命令，则站点文件夹被展开，同时自动建立一个名为“untitled.htm”的网页。
子项目5 更改文件名与删除文件
只需要在面板组中两次单击该文件的文件名，文件名就立刻变成编辑状态，输入新名字就可以。
如果要删除网页文件，只需要选中该文件，按下键盘上的“delete”键即可。 项目3 打开与保存网页 子项目1 打开网页文件
打开网站中的网页文件一般有三种方法。
第一种方法是在打开Dreamweaver后，在弹出的欢迎画面中单击“打开”命令，然后找到要编辑的文件。
第二种方法是在面板组中打开网页文件，在显示的本地文件中双击网页文件，将其打开。 第三种方法是使用菜单打开网页文件。单击“文件”菜单，在弹出的下一级菜单中选择“打开”命令，然后找到网页文件，将其打开。 子项目2更改网页标题
网页标题又称网页名字，它指的是浏览该网页时显示在浏览器标题栏中的文字，而不是这个网页的文件名。
在网页打开的状态下，可以发现文档工具栏右端的标题文本框中有“无标题文档”几个字，这是默认的网页标题。将 “无标题文档”几个字删除，输入网站主页的标题。 子项目3 保存网页文件
单击“文件”菜单，在弹出的下一级菜单中选择“保存”命令，可以将当前打开的网页文件保存。
保存网页以后可以发现，文件名后面的星号都消失了。 子项目4 预览网页
单击“文件”菜单，在弹出的下一级菜单中选择“在浏览器中预览”，然后在其子菜单中选择“IExplorer”。网页内容显示在浏览器中，同时网页的标题“读书俱乐部”也显示在相应的位置。
子项目5 退出Dreamweaver
单击“文件”菜单中的“关闭”命令，或者单击网页编辑窗口右上角的按钮，都可关闭这些网页的编辑窗口。
第2章 编辑网页的内容 本章的教学目标为：
（1）了解Dreamweaver中面板的应用特点。
（2）熟练掌握在网页中输入文字，设置文字效果的方法。 （3）了解图片的相关知识。
（4）了解图片在网页制作中的作用。
（5）掌握为网页设置背景色和背景图片的方法。 （6）掌握插入图片修饰网页的方法。 本章的教学建议： ·6·
本章的教学内容主要是文字与图片的相关设置。由于操作界面与Word等学生熟悉的软件不同，学生在操作上可能会有所不习惯，在教学中要注意以下几个问题：1.换行操作；2.添加中文字体；3.字号的大小关系；4.行首空两格的操作；5.水平线的颜色更改。以上五个问题在操作中会使学生感到不方便，要通过练习进行加强，尽快熟悉Dreamweaver的操作特点，以免影响下面的学习。 教材在讲述插入图片时，着重讲述了将图片保存在当前网站的方法。这是网站管理的内容，要使学习者认识到这种操作的重要性，以免造成文件增多而产生的麻烦。
本章的教学内容： 第2章 编辑网页的内容 项目1 字体与段落的设置 子项目1 输入文字
像在记事本中一样，在网页编辑区域单击鼠标，出现光标后就输入文字了。也可以同过复制、粘贴命令，将网页素材文件中的文字复制到网页中。
用键盘操作换行有两种方法：按Enter键和按Enter+Shift组合键。按Enter键，实施的是分段操作，段与段之间的距离较大；而使用Enter+Shift组合键，实施的是换行操作，也就是正常行间距。
子项目2 导入中文字体
在设置字体之前，应先将中文字体添加到“属性”面板字体下拉列表框中。 “属性”面板有两种模式，在默认情况下“<>html”模式被打开，从图2.1.4中可以发现，在该模式下是不能够设置字体的。单击
按钮，可以切换到“CSS”模式。单击
右端的，在下拉菜单中选择 。在弹出的“编辑字体列表”对话框中，选中“可用字体”栏中的中文字体，本例选中“仿宋”，单击，字体出现在“选择的字体”栏中。单击“确定”按钮，“仿宋”被加入到“属性”面板的字体列表下拉菜单中。 子项目3 设置文字
在Dreamweaver网页编辑区域选择几个字，然后单击右边的，在下拉列表中选择“黑体”，在选择器名称下面的文本框中输入： ys1作为新建CSS规则的名字，ys1就是样式1的意思。单击“确定”。
此时，属性面板中目标规则右边的对话框中显示的是“.ys1”。单击右边的，在下拉列表中选择“16”，将字体设为16号字。
单击，将文字设为加粗。然后在“属性”面板中单击，打开颜色面板，选择一种颜色，更改文字的颜色。 子项目4 段首缩进
要实现在段首空两个格，可以切换到代码编辑状态，在段首文字前输入代码“ ”（不要漏掉“;”）。 子项目5 列表与缩进 1. 列表
列表有两种类型：项目列表和编号列表。
·7·
拖动鼠标，选中要添加列表的文字。然后在属性面板中单击 “项目列表”按钮，注意是在“<>html”模式下，不是在“CSS”模式下，单击“项目符号”按钮，每一行都出现了一个黑点。
2. 缩进
选中文字，将鼠标移动到属性面板上，在保证处于“<>HTML”的情况下，多次单击“内缩区块”按钮，文字将向右移动。 项目2 美化网页
子项目1 插入水平线
将光标移动最下面一个单元格的行首，单击菜单栏上的“插入记录”，然后选择“HTML”子菜单下的“水平线”命令，网页上自动插入一条水平线。
那么怎样删除水平线呢？很简单，只要选中水平线，按下键盘上的Delete键即可。 子项目2 插入图片
1. 图片的格式
图片的基本格式是BMP，但这种文件由于没有压缩，往往比较大，因特网并不采用它。 因特网上应用最广泛的图片格式有三种：GIF文件、JPEG文件和PNG文件。
2.插入图片
首先单击鼠标，确定光标的位置，单击“插入”面板上的按钮，然后在弹出的菜单中选择“图像”。在弹出“选择图像源”对话框，再单击“查找范围”右边的，在下拉菜单中，选择图像文件，选择文件单击“确认”，将图片插入网页。 子项目3 设置图片
单击图片，使图片被一个矩形框住，同时出现三个小的实心矩形。鼠标指针指向图片右下角，当鼠标指针变成双向箭头时，拖动鼠标，就可以更改图片的大小。 子项目4 设置网页背景
单击菜单栏上的“修改”，在下拉菜单中单击“页面属性”，打开“页面属性”对话框，在“页面属性”对话框中，可以设置文本的颜色，背景颜色等。单击“背景”右边的，选择一种颜色，将网页背景设置成该颜色。
单击背景图像栏右边的“浏览”，找到存放图像的文件夹。打开“选择图像源文件”对话框。选中要使用的图片文件，单击“确认”，然后将图片保存到网站站点的文件夹“images”中，返回“页面属性”对话框，单击“确定”按钮，效果如图2.2.27所示。
在默认状态下，背景图片覆盖在背景颜色之上。所以，在设置背景图片以后，背景颜色是看不到的。
第3章 网页的布局 本章的教学目标为：
（1）知道网页设计中的几种常见布局和风格。 （2）熟练掌握插入表格，对表格进行设置的方法。 （3）知道布局模式；能够用布局模式完成网页的布局。 （4）掌握表格布局与布局模式的区别。 ·8·
本章的教学建议：
本章的重点是学习网页的风格和布局，这要比具体的操作重要的多。建议在学习的过程中熟练讲出课本中介绍的几种布局结构，并举出相应的实例，最好这些例子与课本上的例子不一样。
网页制作的技能，作为纯技术AP元素面，本教材要求并不高。而要做出一个优秀的网站，重要的一点是对网页的感觉，也就是网页的布局、颜色的搭配、文字的大小等等，这些素养的培养需要多观摩优秀的网页，吸取其精华。教材中用大量的篇幅介绍相关内容的寓意就在于此，在教学设计上要体现出这一点。
AP元素也是一个不好理解的概念，在学习时要认真体会。也可以首先不详细介绍它，在完成本章的教学内容后，再讲解，那样更容易理解它的含义。在学习过程中要注意一点：当多个AP元素同时存在时，如何正确选取需要操作的那个AP元素。
作为操作技能，本章主要涉及表格和布局模式。由于Word等软件的使用，表格应该不是难点。所以要对布局模式着重介绍，最好通过比较使学生认识到表格布局与布局模式的区别。
本章的教学内容： 第3章 网页的布局
项目1 网页布局相关知识 子项目1 网站的风格
在对网页插入各种对象、修饰效果前，一定要确定网站的风格和网页的布局。也就是说，要先确定网站的总体风格，并对网页的布局进行规划，这样才能保证网站中各网页的统一。
主页风格没有优劣之分，网站的性质与风格有着根本的区别。 子项目2网页布局实例
所谓网页的布局，通俗地说，就是确定网页上的网站标志、导航栏、菜单等元素的位置。不同的网页，各种网页元素所处的地位不同，它们的位置也就不同。
简单划分，网页的布局一般可以分为“同”字型、标题正文型、分栏型、Flash型和封面型等。
子项目3 网页布局注意事项
网页布局同样没有优劣之分，但要注意与网站的风格相适应。要注意整个站点的协调，要注意色调的一致。下面一些规律性的东西在确定网页风格时要特别注意。
1. 平衡性 2. 对称性 3. 对比性 4. 疏密度 5. 反复性 6. 韵律感 7. 颜色搭配
3.1.4 画出网页布局草图
要实现这种网页的布局有三种方法，一种是采用表格，一种是使用布局视图，还有一种是使用框架。
项目2 使用表格规划网页布局
·9·
子项目1 在网页中插入表格
在网页中单击鼠标，确定光标的位置。然后单击“插入”菜单，选择“表格”命令， 在对话框中输入表格行数，列数，表格宽度，边框粗细，就得到表格。 子项目2 制作不规则表格
1. 添加新行、新列
单击表格最下面一行，使光标出现在该行中。然后单击鼠标右键打开快捷菜单，移动鼠标指针到快捷菜单的“表格”上使之弹出子菜单，在子菜单中单击“插入行”，则插入一行。
插入列的操作与插入行的操作基本一样。 2. 删除行或列
首先单击鼠标，使光标出现在被删除行中。然后单击鼠标右键打开快捷菜单，移动鼠标指针到快捷菜单的“表格”上使之弹出子菜单，在子菜单中单击“删除行”，则该行被删除。
删除列的方法与删除行相似。 3. 合并单元格
拖动鼠标同时选中多个单元格，移动鼠标指针到“属性”面板上，单击“合并单元格”按钮，则被选中的单元格被合并。
4. 拆分单元格
首先单击鼠标，使光标出现在被拆分单元格中。移动鼠标指针到“属性”面板上，单击“拆分单元格”按钮，打开 “拆分单元格”对话框。在“拆分单元格”对话框中选中“把单元格拆分”后面的“列”，输入“列数”。单击“确定”按钮，则该单元格被拆分。 子项目3 设置表格和单元格属性（设置表格背景、框线宽度）
在表格的“属性”面板中，能够设置框线的宽度、单元格间距，以及背景色等。 将表格框线的宽度更改为“0”，可以发现表格的框线变成虚线，这样在浏览器中，表格将被隐藏。
子项目4 表格的嵌套
将光标移动到单元格中，单击“插入”面板的按钮，打开“插入表格”对话框，输入行数列数，单击“确定”按钮。 子项目5 使用表格规划网页布局
将表格中的所有框线粗细都设为0，调整表格的高度和宽度，就会看到一个规划后网页的样子。在表格中输入文字和图片，设置上背景，达到预定效果。 项目3 使用AP Div布局网页 子项目1 Div与AP Div概述
Div，也称Div标签，是一种区隔标记。它的主要作用是还可以将页面分割为不同的区域，设定文字、图像和表格的排列方式。通过拖动、方向键或者指定坐标的位置等方式，对文字、图像等元素进行精确定位。
AP Div是一种绝对定位元素，它可以包含文本、图像等其他内容，这使得组成网页的各种元素可以精确定位在网页的某个位置。 子项目2 插入AP Div
在编辑区域中单击鼠标，使光标出现在编辑区中。移动鼠标单击“插入”菜单，选择“布局对象”下的“AP Div”命令。 子项目3 设置AP Div ·10·
《网页制作基础教程(Dreamweaver CS6)》教学指南
