第3章Dreamweaver基本操作.ppt

PPT模板下载：/moban/ 行业PPT模板：/hangye/ 节日PPT模板：/jieri/ PPT素材下载：/sucai/PPT背景图片：/beijing/ PPT图表下载：/tubiao/ 优秀PPT下载：/xiazai/ PPT教程： /powerpoint/ Word教程： /word/ Excel教程：/excel/ 资料下载：/ziliao/ PPT课件下载：/kejian/ 范文下载：/fanwen/ 试卷下载：/shiti/ 教案下载：/jiaoan/ 字体下载：/ziti/ 第3章 Dreamweaver基本操作第3章 Dreamweaver基本操作 本章内容提要：本章内容提要：l中文DreamweaverDreamweaver8l中文Dreamweaver8工作环境l站点创建与管理本章目标任务：本章目标任务：3.1 中文中文Dreamweaver8工作环境工作环境中文Dreamweaver8提供可视化的网页开发环境,具有所见即所得的功能。

它的工作窗口简洁明了，功能面板及工具栏中几乎集中了所有的重要功能，属性面板放在窗口底部外，其他面板多放在窗口的右边，可随时打开与关闭，并能折叠和展开，这样就克服了以往版本浮动面板位置较乱，有时会影响网页编辑的不足中文Dreamweaver8工作环境即中文Dreamweaver8应用程序窗口，该应用程序窗口由标题栏、菜单栏、文档工具栏、文档编辑窗口、浮动面板等组成，文档编辑窗口由文档标题栏、页面编辑区、状态栏等组成，浮动面板包括插入面板、属性面板、面板组等中文Dreamweaver8工作环境图3-1所示：3.1 中文中文Dreamweaver8工作环境工作环境 输入面板文档工具栏菜单栏标题栏面板组属性面板页面编辑区状态栏文档窗口图3-1 中文Dreamweaver8工作环境3.1 中文中文Dreamweaver8工作环境工作环境1. 标题栏标题栏上显示当前网页的页面标题及打开的文件名若是对一个新网页进行编辑，则在对此网页命名之前自动将此文件命名为“Untitled-x”(x是按顺序产生的数字)2. 菜单栏和其他应用软件基本相同，菜单栏中的每一项都有一个下拉式菜单，Dreamweaver中大部分操作都可以通过菜单项的下拉菜单来实现。

3.1 中文中文Dreamweaver8工作环境工作环境3. 文档工具栏文档工具栏包含可在代码视图、设计视图之间快速切换的按钮，并包含一些与选定视图有关的常用命令选择【查看】→【工具栏】菜单命令，可以在窗口中显示或隐藏文档工具栏代码”按钮：在文档中显示代码视图在代码视图中，可以直接查看和编辑HTML源代码拆分”按钮：同时显示代码视图与设计视图在代码视图显示在上方，设计视图显示在下方要改变视图的上下顺序，可单击“视图选项”按钮，选择“在顶部查看设计视图”选项设计”按钮：在文档中显示设计视图设计视图是中文Dreamweaver8编辑过程中的默认方式，可以达到所见即所得的效果标题”文本框：显示或编辑当前网页的标题在浏览器中预览/调试”按钮：在浏览器中预览网页效果或检查错误文件管理”按钮：查看文件的上传、下载的状态刷新设计视图”按钮：刷新设计视图视图选项”按钮：为不同的视图设置选项3.1 中文中文Dreamweaver8工作环境工作环境4. 文档窗口文档窗口包括文档标题栏、页面编辑区、状态栏文档标题栏可显示建立或打开的多个网页文档标题，单击标题标签可切换到相应网页的编辑状态页面编辑区用于设置和编辑页面内的文本、图形和表格等。

状态栏用于选择标记、设置窗口大小及调整文件的下载速度3.1 中文中文Dreamweaver8工作环境工作环境5. 面板中文Dreamweaver8提供了多种多样的、具备不同功能的面板，大量操作可通过面板方便地完成面板包括：属性面板、插入面板、站点文件管理器、资源面板、行为面板、CSS样式面板、代码检查器、框架面板、历史记录面板、层面板、库面板、参考面板、模板面板、时间轴面板等所有面板都可以由“窗口”菜单控制显示或隐藏下面介绍一些常用面板面板的具体操作方法，将在后面使用相应面板的实例中再进行介绍3.1 中文中文Dreamweaver8工作环境工作环境插入面板插入面板，也可称作插入工具栏选择【窗口】→【插入】菜单命令或按快捷键【Ctrl】+【F2】可显示或隐藏插入面板选择【查看】→【工具栏】菜单命令，可以在窗口中显示或隐藏插入工具栏插入面板是中文Dreamweaver8中最重要的面板之一，所包含的内容均为网页设计最常用的工具按钮将鼠标放在某个工具按钮上，可显示该工具按钮的名称插入面板集成了“插入”菜单中的选项，主要包括常用、布局、表单、文本、HTML、应用程序、FLASH元素等有菜单和制表符两种显示方式。

在菜单显示方式中（如图3-1中的插入面板） ，可以通过下拉按钮选择不同工具类型，如常用、布局、表单、文本等，默认是常用工具类型，单击“常用”右边的下拉按钮，选择“显示为制表符”即可切换到制表符显示方式（如图3-2所示 ）在制表符显示方式中直接按相应的类型标签，即可显示相应工具类型单击制表符显示方式的插入面板右边的下拉按钮，在弹出的菜单中选择“显示为菜单”即可切换到菜单显示方式图3-2 插入面板的制表符显示方式3.1 中文中文Dreamweaver8工作环境工作环境属性面板属性面板是使用频率最高的一个浮动面板，被放置在窗口的下边属性面板中的项目会随着网页中选定对象的不同而改变的在属性面板中，详细地列出了所选对象的属性参数，用户可以通过属性面板查看或修改这些参数选择【窗口】→【属性】菜单命令或按快捷键【Ctrl】+【F3】， 可显示或隐藏属性面板面板组常用面板组显示在窗口的右侧，如文件面板、资源面板、CSS样式面板、框架面板层面板、行为面板等非常用面板组显示在窗口的下面，如结果面板、时间轴面板等使用“窗口”菜单中的相应面板选项，可以显示或隐藏相应面板在面板标题上单击右键，在快捷菜单中选择“关闭面板组”，也可关闭相应面板。

各种面板的具体应用性操作在后面课程中再具体介绍3.2 站点创建与管理站点创建与管理在开始制作网页之前，一般需要先定义一个本地站点，然后再进行后续操作作为一个网站，里面一定有很多图片、网页文件、音乐文件、Flash动画等，如果不进行管理分类，分散在硬盘的各个地方就无法进行网页发布了因此，站点的实质就是硬盘上的一个目录，网页的所有文件都放在该目录之中，创建站点就是在硬盘上建立一个目录，把所有的网页及相关文件都放在里面，以便进行网页的制作与管理3.2.1 设置站点存储位置设置站点存储位置本地站点需要一个本地的根目录，以确定存放所有站点文件的存储位置在硬盘上设置本地站点目录的步骤如下：（1）在桌面双击“我的电脑”图标；（2）在“我的电脑”窗口中双击打开用于存储站点的硬盘驱动器（例如为E盘）；（3）使用【文件】→新建→文件夹命令，在硬盘中建立一个新文件夹建立并命名站点文件夹（4）在新文件夹上单击右键，选择“重命名”选项，在英文输入法状态下输入站点名称如图3-3所示 3.2.1 设置站点存储位置设置站点存储位置图3-3 建立并重命名站点文件夹建立并命名站点文件夹3.2.2 建立建立Dreamweaver站点站点启动Dreamweaver，执行“站点”→“管理站点”菜单命令，弹出管理站点对话框，单击【新建】按钮开始创建站点，其中一些选项说明如下：站点名称：输入站点名称，该名称可以使用户直接进入定义为本地站点的文件夹中，建立好的站点会出现在“文件”面板中。

本地根文件夹：指定本地站点所使用的文件夹自动刷新本地文件夹列表：选中此项，则将新的复制到此网站的本地文件夹中，Dreamweaver将对这个本地站点自动更新HTTP地址：输入本网站所使用的网址，网页上传后，用户可使用此网址登录到本网站缓存：选中“启动缓存”，则当用户移动、重命名或删除站点内文件时，可以提高链接更新速度设置完毕，单击【确定】按钮，新的站点就建立好了3.2.2 建立建立Dreamweaver站点站点【实例3.1】建立一个名称为“班级”的站点操作步骤：（1）启动“管理站点”对话框2）单击【新建】按钮，在下拉菜单中选择“站点”选项，弹出“站点定义为”对话框，如图3-4所示3）选择“高级”标签，在“分类”中选择“本地信息”4）在“站点名称”文本框中输入“班级”；在“本地根文本夹”文本框中输入 E:\CLASS（或单击黄色浏览器按钮，选择“E:\CLASS”）作为本地根文件夹5）单击【确定】按钮，返回管理站点对话框6）单击【完成】按钮，完成创建3.2.2 建立建立Dreamweaver站点站点图3-4 创建“班级”站点3.2.3 建立站点子文件夹 在已建好的网站中，一般还需要建立一些子文件夹，用于归类存入网站中的图像、网页、动画、模板等文件。

实例3.2】在“班级”站点中建立站点文件夹操作步骤：（1）在文件面板中选择“站点-班级（E:\class）”文件夹，单击鼠标右键，在快捷菜单中选择“新建文件夹”选项2）单击untitled文件夹的名称部分，输入image，将文件夹改名为image，此文件夹用于存放图像文件；（3）参照步骤（1）和（2），依次建立文件夹“swf”(用于存放Flash动画)、“html”(用于存放非首页的其他网页)、“music”（用于存放音乐文件）,如图3-5所示 3.2.3 建立站点子文件夹图3-5 建立站点子文件夹结果3.2.4 建立网页新文件建立网页新文件主页是浏览者登录网站后显示的第一个页面,因此,主页文件是必不可少的通常，主页文件命名为index.htm或者default.htm其他网页文件应放在指定的子文件夹下，这样便于管理建立网页文件的方法为：先选中要放置网页文件的文件夹，单击鼠标右键，在弹出的快捷菜单中选择“新建文件”命令或执行“文件”→“新建文件”菜单命令，在弹出的“新建文档”对话框中选择“基本页”或“HTML”，单击【创建】按钮编辑完成网页内容后，以适当的文件名称保存到相应站点文件夹下（如保存到E:\class\html下面）。

在操作时要注意以下问题：（1）主页文件必须放在本地站点根目录下，例如，本例应将首页文件放在“E:\class”文件夹下2）网页文件名、文件夹名和网站内的其他文件名最好全部使用英文小写形式，因为Dreameaver不识别中文文件名，而且有些网站服务器要区分字母大小写3.2.4 建立网页新文件建立网页新文件【实例3.3】在“班级”站点中建立网页文件操作步骤：① 打开站点窗口，在文件面板上单击“展开”按钮即可打开“站点”窗口② 选中“站点-班级（E:\class）”文件夹，单击鼠标右键，在弹出的快捷菜单中选择“新建文件”命令③ 单击新文件名的名称部分，将untitled.htm改名为index.htm(作为网站的首页文件)；④ 选中“html”文件夹，单击鼠标右键，在弹出的快捷菜单中选择“新建文件”命令，建立网页dangan.htm(班级档案)；⑤参照步骤，分别建立网页xuexi.htm（学习园地）、wenti.htm（文体天地）、jigou.htm（组织机构）、zhibu.htm（支部生活）、tupian.htm（风彩图片）、rongyu.htm（荣誉殿堂）最后结果如图3-6所示说明：说明：文件及文件夹的移动、复制、删除等操作，与windows的资源管理器操作类似。

例如，选中文件或文件夹后，单击右键，在快捷菜单中选择“编辑”选项，可以完成删除、复制、剪切、粘贴、重命名等操作3.2.4 建立网页新文件建立网页新文件 图3-6 建立网站新文件结果3.2.5 管理已有站点管理已有站点对于已经建立过的站点，可通过站点管理对话框进行管理包括编辑站点，复制站点，删除站点、打开站点等实例3.4】打开所建立过的“班级”站点操作方法一：启动Dreamweaver，在文档窗口中执行“站点”→“管理站点”菜单命令，选中需要打开的“班级”站点名称，单击【完成】按钮，即可打开相应站点如图3-7所示 操作方法二：在文件面板中，打开下拉列表，单击所需要的站点名称“班级”，即可打开相应站点除了通过文件面板对站点管理外，也可通过站点窗口对站点进行管理 3.2.5 管理已有站点管理已有站点图3-7 打开“班级”站点3.3 制作一个简单的网页图3-8 班级风采主页前面我们讨论了怎样用Dreamweaver创建一个站点，下面就来实际制作一个简单的网页制作一个“班级风采”网页，效果如图3-8所示下面介绍这样一个简单网页的制作过程3.3.1 制作网页标题制作网页标题一个网页通常有标题部分，来访者可以通过标题了解网站的名称及网站类型。

标题部分可以是文本，也可以是图像1. 打开网页在制作网页之前，首先应打开需要的站点及网页1）启动Dreamweaver，在Dreamweaver应用程序窗口中执行“站点”→“管理站点”菜单命令，在弹出的对话框中选中需要打开的站点名称例如：班级单击【完成】按钮，“班级”站点显示在文件面板中2）双击打开需要制作的网页文件例如，双击打开主页文件index.htm首页文件打开，此时是空白页2. 添加标题图像3. 添加水平分割线为了将标题区与正文内容分隔开，通常在标题下面插入一条水平分隔线3.3.1 制作网页标题制作网页标题【实例3.5】插入主页标题“班级风采”操作步骤：（1）在插入面板上单击“常用”工具栏中的【图像】按钮，弹出“选择图像源文件”对话框，如图3-9所示如果“常用”工具栏未打开，可按快捷键【Ctrl】+【F2】打开图3-9 选择图像源文件对话框 3.3.1 制作网页标题制作网页标题（2）在指定文件夹中找到标题图像文件，选择标题图像文件后，对话框右侧将显示该图像的预览图，单击【确定】按钮，插入结束，如图3-10所示图3-10 插入标题图像的网页 3.3.1 制作网页标题制作网页标题【实例3.6】插入水平分割线操作步骤：（1）将光标移到需要插入分隔线的地方（如标题下方）。

2）在“插入”面板上单击“HTML”工具栏中的“水平线”图标3）标题图像的下面出现一条水平分隔线，并处于选中状态，如图3-11所示在属性面板中可以设置其属性图3-11 插入水平线 3.3.1 制作网页标题制作网页标题改变分隔线的宽度与高度分隔线的宽度和高度的设置分为两种方式，一种是选择单位为“像素”（px）,可直接输入实际数值；另一种是选择单位为“%”，即设置分隔线占浏览器打开窗口的百分比插入垂直分隔线通常插入的分隔线都是水平的，当需要插入垂直分隔线时，可利用改变分隔线的高度和宽度的方法达到目的例如，将分隔线的高度设为120px，宽度设为2px，则分隔线即可变为垂直分隔线改变分隔线的对齐方式对齐方式包括“默认”、“左对齐”、“居中对齐”、“右对齐”对齐功能只有在分隔线的宽度小于浏览器窗口的宽度时才有效为分隔线添加阴影效果选中“阴影”复选框，可将原本实心的分隔线设为立体效果，即阴影效果3.3.2 设置导航栏设置导航栏导航栏的作用是与其他网页链接，从而轻松地进入下一个页面，导航既可以使用文字，也可以使用图像这里我们使用文字制作导航，并且使用表格布局导航栏实例3.7】插入表格并添加文字操作步骤：（1）在水平分隔线下单击鼠标，出现光标插入点。

2）在插入面板上单击“常用”工具栏中的【表格】按钮，弹出表格对话框，设置“行数”为7，“列数”为1，“宽度”为25,单位为“百分比”，如图3-12所示 3.3.2 设置导航栏设置导航栏图3-12表格对话框3.3.2 设置导航栏设置导航栏（3）单击【确定】按钮，表格插入此时表格处于选中状态，拖动控制点（黑点）可以调整表格的大小，如图3-13所示 （4）在属性面板中设置表格的背景颜色5）在表格的第一个单元格里单击鼠标，出现光标插入点，通过键盘输入文字“班级档案”6）选中文字“班级档案”，可以在属性面板中设置其字体、大小、对齐方式，如图3-14所示7）参照步骤（5）～（6），输入并设置其他导航栏：“组织机构”、“荣誉殿堂”、“风彩图片”、“文体天地”、“学习园地”、“支部生活” 3.3.2 设置导航栏设置导航栏图3-13 插入表格后结果 3.3.2 设置导航栏设置导航栏图3-14 单元格属性面板 浏览文件3.3.3 设置网页内容设置网页内容在本例中网页内容由文字与图像两部分组成，可以借助“层”来定位文字区域与图像区域1. 设置文字区域【实例3.8】设置文字区域并添加文字操作步骤：（1）在“插入”面板的“布局”工具栏上，单击【描绘层】按钮。

2）在页面需要放文字的地方，按住鼠标左键拖动出一个矩形区域，如绘制层的结果如图3-15所示3）此时层处于选中状态，通过拖动控制点可以调整层的大小将鼠标放在层的边缘线上，鼠标呈“十字”箭头时，拖动鼠标可以移动层的位置4）在层内单击鼠标，出现插入点后，即可输入文字2. 设置图像区域【实例3.9】设置图像区域操作步骤：（1）在“插入”面板中的“布局”工具栏上，单击【描绘层】按钮，在文字区域的下方拖出一个矩形区域2）适当调整层区域的大小和位置3）在层内单击鼠标，出现插入点4）在“插入”面板中的“常用”工具栏上，单击【图像】按钮，插入所需要的图像至此，页面的基本结构制作完成3.3.3 设置网页内容设置网页内容图3-15 绘制层的结果 3.3.4 图像和文字的链接图像和文字的链接超级链接是网页的灵魂，它的作用是建立网页之间的联系通过超级链接，浏览者能够方便自由地在网页、网站乃至整个因特网上遨游通过超级链接技术，整个因特网成为一个四通八达的整体超级链接可以是一段文本、一幅图像或者其他的网页元素在网页浏览器中用鼠标单击这些对象时，将会载入一个新的页面或者跳到页面的其他位置3.3.4 图像和文字的链接图像和文字的链接1. 文字的超级链接在本例中,导航栏中的文字需要与后面相应的二级页面进行链接。

实例3.10】文字的超级链接操作步骤：（1）首先选中设置超级链的文字，如“班级档案”2）单击属性面板中的“浏览文件”图标，弹出“选择文件”对话框，如图3-16所示双击打开“html”文件夹，单击选中与“班级档案”相链接的网页文件dangan.htm，单击【确定】按钮后，在属性面板的链接框内显示出链接的网页文件及路径也可以在“链接”框中直接输入需要链接的网址或文件路径3）建立超级链接的文字颜色呈蓝色，并且出现一条下划线4）参照步骤（1）～（3），设置其他导航栏的文字链接3.3.4 图像和文字的链接图像和文字的链接图3-16 “选择文件”对话框3.3.4 图像和文字的链接图像和文字的链接2. 图像的超级链接【实例3.11】图像的超级链接操作步骤：（1）首先选中设置超级链接的图像，本例中为文字区域下的图像2）单击属性面板中的“浏览文件”图标，弹出“选择文件”对话框3）选择与此图像相链接的网页文件，单击【确定】按钮后，在属性面板的链接框内显示出链接的网页文件及路径3.3.5 设置页面属性设置页面属性网页页面属性主要包括页面标题、网页背景图像与颜色、文本与超级链接颜色、页边距等网页标题可以标识和命名文档；网页背景图像与颜色可以设置文档的外观；文本颜色可以帮助浏览者区分普通文本和具有超级链接的文本，并且可以识别已经访问过和尚未访问过的超级链接。

1. 设置网页标题网页标题非常重要，它可以帮助浏览者在浏览网页时了解正在访问的内容，以及在历史记录和书签列表中标识页面如果页面没有标题，则网页将作为“无标题文档”在文档窗口、浏览器窗口、历史记录和书签列表中出现，如图3-17所示3.3.5 设置页面属性设置页面属性 图3-17 “无标题文档”在浏览器窗口的显示 3.3.5 设置页面属性设置页面属性在Dreamweaver8中有多种方法为网页添加标题实例3.12】为网页添加标题“计算机多媒体”操作步骤：方法一：直接在Dreamweaver8文档工具的“标题”框中输入新标题例如，输入“计算机多媒体”然后按【Enter】键确定如果工具栏没有显示，可通过“查看”菜单打开工具栏方法二：执行“查看”→“文件头内容”菜单命令，显示出文件头部分的内容，如图3-18所示单击【标题】按钮，在属性面板的标题框中输入新标题，然后按【Enter】键确定 方法三：单击文档工具栏上的【代码】按钮，然后在标签之间输入新标题，如图3-19所示 方法四：执行“修改”→“页面属性”菜单命令，或在网页空白处单击鼠标右键，选择“页面属性”选项，然后在“页面属性”对话框的“分类”中选中“标题/编码”，在“标题”框中输入新标题，如图3-20所示。

单击【确定】按钮完成3.3.5 设置页面属性设置页面属性图3-18 文件头与标题按钮3.3.5 设置页面属性设置页面属性图3-19 在HTML源代码窗口中设置标题3.3.5 设置页面属性设置页面属性图3-20 在“页面属性”对话框中设置标题3.3.5 设置页面属性设置页面属性2. 设置网页的背景图像或颜色使用“页面属性”对话框可以设置网页的背景图或颜色如果同时设置了背景图像和背景颜色，则颜色将在图像下载过程中出现如果背景图像有透明像素，则背景颜色将一直显示此外，当浏览者关闭了浏览器的图片显示功能时，仍然可以看到背景颜色注意：同时设置背景图像和背景颜色的原因是当网络速度较慢时，背景图像可能显示迟缓，背景颜色将首先出现，让浏览者明白这是有图片的页面，需要稍加等候3.3.5 设置页面属性设置页面属性【实例3.13】为网页设置背景图像和颜色操作步骤：（1）打开“页面属性”对话框，在“分类”中选中“外观”选项，单击“背景图像”文本框右侧的【浏览】按钮，弹出“选择图像源文件”对话框，在“选择图像源文件”对话框中选择一个图像文件，单击【确定】按钮；或者在“背景图像”文本框中直接输入图像文件名与路径，如图3-21所示。

（2）单击“页面属性”对话框中的【应用】按钮，背景图像将应用到网页中3）在“页面属性”对话框中单击“背景颜色”右侧的按钮，鼠标变为滴管形状，并弹出一个颜色面板，可以使用取色滴管在颜色面板中选取一种颜色也可以直接输入颜色值，如#CCFFFF此外，还可以单击颜色面板右上角的系统颜色拾取器，打开Windows“颜色”对话框，在其中选择颜色，如图3-22所示 注意：l背景图像的文件名不能使用中文名称l如果背景图像的尺寸小于文档窗口的大小，则Dreamweaver将重复排列背景图像直至填满文档窗口l系统默认的网页背景颜色是白色 3.3.5 设置页面属性设置页面属性图3-21 为网页设置背景图像3.3.5 设置页面属性设置页面属性图3-22 Windows“颜色”对话框3.3.5 设置页面属性设置页面属性3. 设置网页文本的属性l设置了背景图像和颜色之后，还需要设置网页中文本的字体、大小与颜色l在“页面属性”对话框中既可以设置普通文本的默认颜色与字体，也可以设置超级链接、已访问链接和活动链接的默认颜色与字体l网页文本的属性如图3-21所示网页链接文本的属性如图3-23所示其中：l页面字体：当前网页中普通文本的字体。

l页面字体大小：当前网页中普通文本的字号大小l文本颜色：当前网页中普通文本的颜色，系统默认为黑色l链接字体：当前网页中超级链接文本的字体系统默认与普通字体相同l链接字体大小：当前网页中超级链接文本的字体大小系统默认与普通字体大小相同l链接颜色：当前网页中没有访问过的超级链接文本的颜色，系统默认为蓝色l活动链接：当超级链接文本被鼠标单击时的颜色，系统默认为蓝色l已访问链接：当前网页中被访问过的超级链接文本的颜色，系统默认为紫色3.3.5 设置页面属性设置页面属性图3-23 设置链接文本的颜色 3.3.5 设置页面属性设置页面属性【实例3.14】为网页设置文本颜色操作步骤：（1）在如图3-21所示的“页面属性”对话框中，单击“文本颜色”右侧的按钮，弹出颜色面板使用取色滴管选取文本颜色2）在“页面属性”对话框的“分类”中，选中“链接”选项，设置链接颜色、已访问链接与活动链接的默认颜色，如图3-23所示3.3.5 设置页面属性设置页面属性4. 设置页面边距通过设置页面边距，可以使网页周围留出一些距离设置页面边距的操作是在“页面属性”对话框中实现的，方法是直接在边界框中输入边距数值，如图3-21所示。

左边距：文档中左侧边缘的空白数值右边距：文档中右侧边缘的空白数值上边距：文档中上侧边缘的空白数值下边距：文档中下侧边缘的空白数值5. 设置文档编码在图3-20所示的“页面属性”对话框的“标题/编码”对话框中，可以选择使用的汉字编码类型对于中文网页，一般选用“简体中文（GB2312）”3.3.6 保存网页保存网页随时保存文件是编辑任何文档时应该有的良好习惯在制作网页的过程中，随时有可能发生断电或机器故障，而Dreamweaver编辑器没有自动保存的功能因此，要经常地保存正在编辑的网页，以避免由于意外而导致辛勤劳动付之东流实例3.15】保存网页操作步骤：（1）执行“文件”→“保存”菜单命令，或单击标准工具栏上的【保存】按钮，或按快捷键【Ctrl】+【S】（2）如果网页文件已经建好或以前保存过，则文件继续保存；如果文件从未保存过，则弹出“另存为”对话框，如图3-24所示3）在“保存在”列表中选择一个文件路径（注意：网页文件应保存在站点文件夹内），在“文件名”文本框中输入文件名，“保存类型”选择html文件，最后单击【保存】按钮3.3.6 保存网页保存网页图3-24 “另存为”对话框3.3.7 浏览网页浏览网页一个网页制作完成后，可以在浏览器中预览，并根据预览效果再对网页进行调整。

实例3.16】在浏览器中预览“班级风采”主页操作步骤：（1）执行“文件”→“在浏览器中预览”→“IExplore”菜单命令，或按快捷键【F12】启动IE浏览器，并将当前编辑的网页显示在窗口中也可单击文档工具栏上的【在浏览器中预览】按钮2）将鼠标指向链接的文字或图像时，鼠标形状变为手形，状态栏将显示被链接文件的名称，单击即可切换到链接的页面3.3.8 设置首页及应用站点地图设置首页及应用站点地图1. 设置首页【实例3.17】设置首页操作步骤：（1）执行“站点”→“管理站点”菜单命令，弹出如图3-7所示的“管理站点”对话框2）选中站点名称“班级”，然后单击“编辑”按钮 （3）在“班级站点定义为”对话框的“分类”列表中选中“站点地图布局”，如图3-25所示4）在“主页”文本框中输入主页的文件名与路径，或按【浏览】按钮查找主页文件5）单击【确定】按钮返回“管理站点”对话框，单击【完成】按钮，首页设置完成3.3.8 设置首页及应用站点地图设置首页及应用站点地图图3-25 “班级站点定义为”对话框 3.3.8 设置首页及应用站点地图设置首页及应用站点地图2. 应用站点地图可以通过站点地图规划及设置整个网站。

双击站点地图中的某个文件，可立即进入该文件的编辑页面实例3.18】应用站点地图操作步骤：（1）打开站点窗口，默认的状态是“站点文件”状态如图3-6所示2）单击“站点地图”按钮，窗口显示站点地图，最上面的index.htm为首页，下面是链接的所有页面如图3-26所示3）在“站点地图”按钮的下拉列表中可以设置站点地图的显示方式仅地图：窗口内只显示站点地图地图和文件：窗口内只显示站点地图，右侧显示站点文件4）在窗口左下角的弹出式列表中，可以设置站点地图的显示大小这里以75%窗口显示3.3.8 设置首页及应用站点地图设置首页及应用站点地图图3-26 站点地图实训指导实训指导3 【实训项目【实训项目1】】创建一个站点，并且制作首页要求首页有标题区、分隔线、导航区、文本区和图片区，并且导航区与其他网页链接（例如：制作我的心灵家园网页，网页类似图SX3-1所示）实训指导实训指导3图SX3-1 网页显示效果实训指导实训指导3操作步骤参考：Step1：在硬盘上设立本地站点目录（1）在桌面上双击打开“我的电脑”2）在“我的电脑”窗口中双击打开用于存储站点目录的硬盘驱动器，例如E盘3）执行“文件”→“新建”→“文件夹”菜单命令（或在空白区域单击右键，执行“新建”→“文件夹”命令），在E盘中建立一个新文件夹“xljy”。

4）关闭“我的电脑”窗口Step2：：建立Dreamweaver站点（1）启动Dreamweave（2）执行“站点”→“新建站点”命令，弹出“站点定义”对话框3）选择“高级”标签，在“分类”中选择“本地信息”4）在“站点名称”文本框中输入“心灵家园”，单击“本地根文件夹”黄色文件夹按钮，选择“E:\xljy”作为本地根文件夹，其他可采用默认设置5）单击【确定】按钮，完成站点创建实训指导实训指导3Step3：：建立站点文件夹和网页文件1）在“文件”面板中选择“心灵家园”站点，在“E:\xljy”文件夹上单击鼠标右键，在弹出的快捷菜单中选择“新建文件夹”选项，建立文件夹“picture”，此文件夹用于存放图像文件2）参照Step（1），依次建立文件夹“web”（用于存放非首页的其他网页）、“music”（用于存放音乐文件）、“flash”（用于存放Flash动画）3）选中“E:\xljy”文件夹，单击鼠标右键，在弹出的快捷菜单中选择“新建文件”选项，建立首页index.htm4）选中“web”文件夹，单击鼠标右键，在弹出的快捷菜单中选择“新建文件”选项，建立网页wdjl.htm(我的简历)。

5）参照Step（4），分别建立网页yyxs.htm(音乐欣赏)、dstd.htm(读书天地)、fctp.htm(风采图片)、shjs.htm(书画鉴赏)、rsgw.htm(人生感悟)Step4：：打开首页文件在“心灵家园”站点中，双击首页文件index.htm,此时首页是空白页面，进入首页编辑状态实训指导实训指导3lStep5：：制作首页标题部分l（1）执行“插入”→“图像”菜单命令，屏幕出现“选择图像源文件”对话框l（2）在驱动器中搜寻到标题图像文件（xljy.gif），选择【确定】按钮，系统弹出提示信息框，提示大家这个图像不在站点根文件夹内，询问是否将该文件复制到根文件夹中l（3）单击“是”按钮，出现“复制文件为”对话框，“保存在”会自动切换到打开的站点文件夹“xljy”l（4）把这个图像文件放在“picture”下双击“picture”文件夹，单击“保存”确认此时出现“图像标签辅助功能属性”对话框，可在“替换文本”中输入替换文本，也可不输入任何信息，单击【确定】按钮，此时一个标题图像就插入完毕了l（5）执行“文件”→“保存”菜单命令，或按快捷键Ctrl+S保存网页实训指导实训指导3lStep6：：设置导航栏l（1）在标题图像下单击鼠标，出现光标标插入点。

l（2）在常用面板中单击“表格”按钮，出现“表格”对话框，设置行数为6，“列数”为1，“宽度”为25，单位为“百分比”，边框为1l（3）单击“确定”按钮，表格插入到网页中l（4）此时表格处于选中状态，拖动控制点（黑点）适当调整表格的大小l（5）在属性面板中设置表格的背景颜色，如#99CCFF若属性面板看不见，按快捷键Ctrl+F3或选择“窗口”→“属性”，打开属性面板l（6）在表格的第一个单元格里单击鼠标，出现光标插入点，通过键盘输入文字“我的简历”l（7）选中文字“我的简历”，然后在属性面板中设置其字体为“隶书”、大小为24，对齐方式为“居中对齐”l（8）参照（6）和（7），输入和设置其他导航栏：“音乐欣赏”、“读书天地”、“风采图片”、“书画鉴赏”、“人生感悟”l（9）执行“文件”→“保存”菜单命令，或按快捷键Ctrl+S保存网页实训指导实训指导3lStep7：：设置网页文字区域的内容l（1）在布局面板上单击“描绘层”按钮l（2）在表格右侧的文字区域按住鼠标左键拖动出一个矩形层区域l（3）此时层处于选中状态，通过控制点适当调整层的大小，并且调整层的位置，层的高度与表格高度一致，宽度约占网页总宽度的50%。

l（4）在层内单击鼠标，出现插入点在层内输入文字标题内容“我的档案”，并在属性面板中设置文字的字体为“隶书”、大小为“30”（字号大小列表没有的字号可自行输入）、对齐方式为“居中”l（5）为了把标题和正文内容分隔开，我们插入水平分隔线光标放在标题文字后，执行“插入”→“HTML”→“水平线”菜单命令，则在标题文字下插入了一条水平分隔线l（6）在水平分隔线下单击鼠标，再在层内绘制两个大小相同的子层，子层的底部接近表格底部l（7）单击层标记选择不同的子层，在两个子层内分别输入正文内容（如图SX3-1所示）l（8）执行“文件”→“保存”菜单命令，或按快捷键Ctrl+S保存网页实训指导实训指导3lStep8：：设置网页图像区域的内容l（1）在布局面板上单击“描绘层”按钮，在文字区域的右方拖出一个矩形层区域l（2）适当调整层区域的大小和位置l（3）在层内单击鼠标，出现现插入点l（4）执行“插入”→“图像”菜单命令，插入所需图像l（5）执行“文件”→“保存”菜单命令，或按快捷键Ctrl+S保存网页lStep9：：设置导航栏文字的超级链接和图像的超级链接l（1）先选中用来作链接的文字“我的简历”l（2）单击属性面板中“链接”右边的“浏览文件”图标，在出现的“选择文件”对话框中双击打开“web”文件夹，选择与“我的简历”相关的网页文件“wdjl.htm”。

l（3）参照（1）、（2），设置其他导航栏的文字链接：“音乐欣赏”链接“web/yyxs.htm”、“读书天地”链接“web/dstd.htm”、“风采图片”链接“web/fctp.htm”、“书画鉴赏”链接“web/shjs.htm”、“人生感悟”链接“web/rsgw.htm”l（4）执行“文件”→“保存”菜单命令，或按快捷键Ctrl+S保存网页实训指导实训指导3lStep10：：设置页面属性l（1）执行“修改”→“页面属性”菜单命令l（2）在弹出的“页面属性”对话框中设置网页标题为“心灵家园”、网页的背景图像为“picture/1.gif”或颜色为“#CCFFFF”、文本颜色为“#000000”、页面边距为“0”、文档编码为“简体中文（GB2312-80）”等l（3）单击“确定”按钮l（4）执行“文件”→“保存”菜单命令，或按快捷键Ctrl+S保存网页lStep11：：浏览网页l（1）执行“文件”→“在浏览器中预览”→“IExplore”菜单命令，或按快捷键F12出现IE浏览器窗口l（2）将鼠标放到设置链接的文字或图像上时，鼠标形状变成手形单击就可以切换到链接的页面l（3）根据预览效果再回到文档窗口对页面进行调整。

实训指导实训指导3【实训项目【实训项目2】】自已设计一个自已的个人主页，创建站点，并且制作首页要求首页有标题区、分隔线、导航区、文本区和图片区，导航区与其他网页链接，设置网页标题等页面属性实训项目【实训项目3】】按照本章讲授的“班级风采”网页实例制作班级网页综合练习31. 填空题填空题(1) 中文Dreamweaver8提供可视化的网页开发环境,具有 的功能2) 面板是使用频率最高的一个浮动面板，被放置在窗口的下边3) 网页页面属性主要包括 、 、文本与超级链接颜色、页边距等 可以标识和命名文档； 可以设置文档的外观；(4) 导航栏的作用是 ，从而轻松地进入下一个页面，导航既可以使用文字，也可以使用图像5) 在开始制作网页之前，一般需要先定义一个 ，然后再进行后续操作综合练习32. 简答题简答题(1) 创建本地站点的作用是什么？(2) 为站点中文件夹或文件命名时需要注意什么？(3) 网站的主页文件名一般是什么？3. 操作题操作题根据自己的兴趣选择某一主题，进行简单首页制作。

要求首先要创建一个站点，并且制作首页，首页内有标题区、分隔线、导航区、文本区和图片区。