网页设计与制作PPT（第二版）第3章 Dreamweaver基本操作.ppt

《网页设计与制作PPT（第二版）第3章 Dreamweaver基本操作.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作PPT（第二版）第3章 Dreamweaver基本操作.ppt（72页珍藏版）》请在三一办公上搜索。

1、第3章 Dreamweaver基本操作,本章内容提要：中文Dreamweaver是比较流行的网页制作工具，本章主要介绍中文Dreamweaver8工作环境、站点的创建与管理、并制作一个简单的网页。本章主要内容如下：中文Dreamweaver8工作环境站点创建与管理制作一个简单的网页本章目标任务：在掌握站点创建与管理基础上完成最简单的网页制作。,3.1 中文Dreamweaver8工作环境,中文Dreamweaver8提供可视化的网页开发环境,具有所见即所得的功能。它的工作窗口简洁明了，功能面板及工具栏中几乎集中了所有的重要功能，属性面板放在窗口底部外，其他面板多放在窗口的右边，可随时打开与关闭

2、，并能折叠和展开，这样就克服了以往版本浮动面板位置较乱，有时会影响网页编辑的不足。中文Dreamweaver8工作环境即中文Dreamweaver8应用程序窗口，该应用程序窗口由标题栏、菜单栏、文档工具栏、文档编辑窗口、浮动面板等组成，文档编辑窗口由文档标题栏、页面编辑区、状态栏等组成，浮动面板包括插入面板、属性面板、面板组等。中文Dreamweaver8工作环境图3-1所示：,3.1 中文Dreamweaver8工作环境,图3-1 中文Dreamweaver8工作环境,3.1 中文Dreamweaver8工作环境,1.标题栏标题栏上显示当前网页的页面标题及打开的文件名。若是对一个新网页进行编

3、辑，则在对此网页命名之前自动将此文件命名为“Untitled-x”(x是按顺序产生的数字)。2.菜单栏和其他应用软件基本相同，菜单栏中的每一项都有一个下拉式菜单，Dreamweaver中大部分操作都可以通过菜单项的下拉菜单来实现。,3.1 中文Dreamweaver8工作环境,3.文档工具栏文档工具栏包含可在代码视图、设计视图之间快速切换的按钮，并包含一些与选定视图有关的常用命令。选择【查看】【工具栏】菜单命令，可以在窗口中显示或隐藏文档工具栏。“代码”按钮：在文档中显示代码视图。在代码视图中，可以直接查看和编辑HTML源代码。拆分”按钮：同时显示代码视图与设计视图。在代码视图显示在上方，设计

4、视图显示在下方。要改变视图的上下顺序，可单击“视图选项”按钮，选择“在顶部查看设计视图”选项。“设计”按钮：在文档中显示设计视图。设计视图是中文Dreamweaver8编辑过程中的默认方式，可以达到所见即所得的效果。“标题”文本框：显示或编辑当前网页的标题。“在浏览器中预览/调试”按钮：在浏览器中预览网页效果或检查错误。“文件管理”按钮：查看文件的上传、下载的状态。“刷新设计视图”按钮：刷新设计视图。“视图选项”按钮：为不同的视图设置选项。,3.1 中文Dreamweaver8工作环境,4.文档窗口文档窗口包括文档标题栏、页面编辑区、状态栏文档标题栏可显示建立或打开的多个网页文档标题，单击标题

5、标签可切换到相应网页的编辑状态。页面编辑区用于设置和编辑页面内的文本、图形和表格等。状态栏用于选择标记、设置窗口大小及调整文件的下载速度。,3.1 中文Dreamweaver8工作环境,5.面板中文Dreamweaver8提供了多种多样的、具备不同功能的面板，大量操作可通过面板方便地完成。面板包括：属性面板、插入面板、站点文件管理器、资源面板、行为面板、CSS样式面板、代码检查器、框架面板、历史记录面板、层面板、库面板、参考面板、模板面板、时间轴面板等。所有面板都可以由“窗口”菜单控制显示或隐藏。下面介绍一些常用面板。面板的具体操作方法，将在后面使用相应面板的实例中再进行介绍。,3.1 中文D

6、reamweaver8工作环境,插入面板插入面板，也可称作插入工具栏。选择【窗口】【插入】菜单命令或按快捷键【Ctrl】+【F2】可显示或隐藏插入面板。选择【查看】【工具栏】菜单命令，可以在窗口中显示或隐藏插入工具栏。插入面板是中文Dreamweaver8中最重要的面板之一，所包含的内容均为网页设计最常用的工具按钮。将鼠标放在某个工具按钮上，可显示该工具按钮的名称。插入面板集成了“插入”菜单中的选项，主要包括常用、布局、表单、文本、HTML、应用程序、FLASH元素等。有菜单和制表符两种显示方式。在菜单显示方式中（如图3-1中的插入面板），可以通过下拉按钮选择不同工具类型，如常用、布局、表单、

7、文本等，默认是常用工具类型，单击“常用”右边的下拉按钮，选择“显示为制表符”即可切换到制表符显示方式（如图3-2所示）。在制表符显示方式中直接按相应的类型标签，即可显示相应工具类型。单击制表符显示方式的插入面板右边的下拉按钮，在弹出的菜单中选择“显示为菜单”即可切换到菜单显示方式。,图3-2 插入面板的制表符显示方式,3.1 中文Dreamweaver8工作环境,属性面板属性面板是使用频率最高的一个浮动面板，被放置在窗口的下边。属性面板中的项目会随着网页中选定对象的不同而改变的。在属性面板中，详细地列出了所选对象的属性参数，用户可以通过属性面板查看或修改这些参数。选择【窗口】【属性】菜单命令或

8、按快捷键【Ctrl】+【F3】，可显示或隐藏属性面板。面板组常用面板组显示在窗口的右侧，如文件面板、资源面板、CSS样式面板、框架面板层面板、行为面板等。非常用面板组显示在窗口的下面，如结果面板、时间轴面板等。使用“窗口”菜单中的相应面板选项，可以显示或隐藏相应面板。在面板标题上单击右键，在快捷菜单中选择“关闭面板组”，也可关闭相应面板。各种面板的具体应用性操作在后面课程中再具体介绍。,3.2 站点创建与管理,在开始制作网页之前，一般需要先定义一个本地站点，然后再进行后续操作。作为一个网站，里面一定有很多图片、网页文件、音乐文件、Flash动画等，如果不进行管理分类，分散在硬盘的各个地方就无法

9、进行网页发布了。因此，站点的实质就是硬盘上的一个目录，网页的所有文件都放在该目录之中，创建站点就是在硬盘上建立一个目录，把所有的网页及相关文件都放在里面，以便进行网页的制作与管理。,3.2.1 设置站点存储位置,本地站点需要一个本地的根目录，以确定存放所有站点文件的存储位置。在硬盘上设置本地站点目录的步骤如下：（1）在桌面双击“我的电脑”图标；（2）在“我的电脑”窗口中双击打开用于存储站点的硬盘驱动器（例如为E盘）；（3）使用【文件】新建文件夹命令，在硬盘中建立一个新文件夹。建立并命名站点文件夹（4）在新文件夹上单击右键，选择“重命名”选项，在英文输入法状态下输入站点名称。如图3-3所示。,3

10、.2.1 设置站点存储位置,图3-3 建立并重命名站点文件夹,建立并命名站点文件夹,3.2.2 建立Dreamweaver站点,启动Dreamweaver，执行“站点”“管理站点”菜单命令，弹出管理站点对话框，单击【新建】按钮开始创建站点，其中一些选项说明如下：站点名称：输入站点名称，该名称可以使用户直接进入定义为本地站点的文件夹中，建立好的站点会出现在“文件”面板中。本地根文件夹：指定本地站点所使用的文件夹。自动刷新本地文件夹列表：选中此项，则将新的复制到此网站的本地文件夹中，Dreamweaver将对这个本地站点自动更新。HTTP地址：输入本网站所使用的网址，网页上传后，用户可使用此网址登

11、录到本网站。缓存：选中“启动缓存”，则当用户移动、重命名或删除站点内文件时，可以提高链接更新速度。设置完毕，单击【确定】按钮，新的站点就建立好了。,3.2.2 建立Dreamweaver站点,【实例3.1】建立一个名称为“班级”的站点。操作步骤：（1）启动“管理站点”对话框。（2）单击【新建】按钮，在下拉菜单中选择“站点”选项，弹出“站点定义为”对话框，如图3-4所示。（3）选择“高级”标签，在“分类”中选择“本地信息”。（4）在“站点名称”文本框中输入“班级”；在“本地根文本夹”文本框中输入 E:CLASS（或单击黄色浏览器按钮，选择“E:CLASS”）作为本地根文件夹。（5）单击【确定】按

12、钮，返回管理站点对话框。（6）单击【完成】按钮，完成创建。,3.2.2 建立Dreamweaver站点,图3-4 创建“班级”站点,3.2.3 建立站点子文件夹,在已建好的网站中，一般还需要建立一些子文件夹，用于归类存入网站中的图像、网页、动画、模板等文件。【实例3.2】在“班级”站点中建立站点文件夹。操作步骤：（1）在文件面板中选择“站点-班级（E:class）”文件夹，单击鼠标右键，在快捷菜单中选择“新建文件夹”选项。（2）单击untitled文件夹的名称部分，输入image，将文件夹改名为image，此文件夹用于存放图像文件；（3）参照步骤（1）和（2），依次建立文件夹“swf”(用于存

13、放Flash动画)、“html”(用于存放非首页的其他网页)、“music”（用于存放音乐文件）,如图3-5所示。,3.2.3 建立站点子文件夹,图3-5 建立站点子文件夹结果,3.2.4 建立网页新文件,主页是浏览者登录网站后显示的第一个页面,因此,主页文件是必不可少的。通常，主页文件命名为index.htm或者default.htm。其他网页文件应放在指定的子文件夹下，这样便于管理。建立网页文件的方法为：先选中要放置网页文件的文件夹，单击鼠标右键，在弹出的快捷菜单中选择“新建文件”命令。或执行“文件”“新建文件”菜单命令，在弹出的“新建文档”对话框中选择“基本页”或“HTML”，单击【创建

14、】按钮。编辑完成网页内容后，以适当的文件名称保存到相应站点文件夹下（如保存到E:classhtml下面）。在操作时要注意以下问题：（1）主页文件必须放在本地站点根目录下，例如，本例应将首页文件放在“E:class”文件夹下。（2）网页文件名、文件夹名和网站内的其他文件名最好全部使用英文小写形式，因为Dreameaver不识别中文文件名，而且有些网站服务器要区分字母大小写。,3.2.4 建立网页新文件,【实例3.3】在“班级”站点中建立网页文件操作步骤：打开站点窗口，在文件面板上单击“展开”按钮即可打开“站点”窗口。选中“站点-班级（E:class）”文件夹，单击鼠标右键，在弹出的快捷菜单中选择

15、“新建文件”命令。单击新文件名的名称部分，将untitled.htm改名为index.htm(作为网站的首页文件)；选中“html”文件夹，单击鼠标右键，在弹出的快捷菜单中选择“新建文件”命令，建立网页dangan.htm(班级档案)；参照步骤，分别建立网页xuexi.htm（学习园地）、wenti.htm（文体天地）、jigou.htm（组织机构）、zhibu.htm（支部生活）、tupian.htm（风彩图片）、rongyu.htm（荣誉殿堂）。最后结果如图3-6所示。说明：文件及文件夹的移动、复制、删除等操作，与windows的资源管理器操作类似。例如，选中文件或文件夹后，单击右键，在快

16、捷菜单中选择“编辑”选项，可以完成删除、复制、剪切、粘贴、重命名等操作。,3.2.4 建立网页新文件,图3-6 建立网站新文件结果,3.2.5 管理已有站点,对于已经建立过的站点，可通过站点管理对话框进行管理。包括编辑站点，复制站点，删除站点、打开站点等。【实例3.4】打开所建立过的“班级”站点。操作方法一：启动Dreamweaver，在文档窗口中执行“站点”“管理站点”菜单命令，选中需要打开的“班级”站点名称，单击【完成】按钮，即可打开相应站点。如图3-7所示。操作方法二：在文件面板中，打开下拉列表，单击所需要的站点名称“班级”，即可打开相应站点。除了通过文件面板对站点管理外，也可通过站点窗

17、口对站点进行管理。,3.2.5 管理已有站点,图3-7 打开“班级”站点,3.3 制作一个简单的网页,图3-8 班级风采主页前面我们讨论了怎样用Dreamweaver创建一个站点，下面就来实际制作一个简单的网页。制作一个“班级风采”网页，效果如图3-8所示。下面介绍这样一个简单网页的制作过程。,3.3.1 制作网页标题,一个网页通常有标题部分，来访者可以通过标题了解网站的名称及网站类型。标题部分可以是文本，也可以是图像。1.打开网页在制作网页之前，首先应打开需要的站点及网页。（1）启动Dreamweaver，在Dreamweaver应用程序窗口中执行“站点”“管理站点”菜单命令，在弹出的对话框

18、中选中需要打开的站点名称。例如：班级。单击【完成】按钮，“班级”站点显示在文件面板中。（2）双击打开需要制作的网页文件。例如，双击打开主页文件index.htm。首页文件打开，此时是空白页。2.添加标题图像3.添加水平分割线为了将标题区与正文内容分隔开，通常在标题下面插入一条水平分隔线。,3.3.1 制作网页标题,【实例3.5】插入主页标题“班级风采”操作步骤：（1）在插入面板上单击“常用”工具栏中的【图像】按钮，弹出“选择图像源文件”对话框，如图3-9所示。如果“常用”工具栏未打开，可按快捷键【Ctrl】+【F2】打开。图3-9 选择图像源文件对话框,3.3.1 制作网页标题,（2）在指定文

19、件夹中找到标题图像文件，选择标题图像文件后，对话框右侧将显示该图像的预览图，单击【确定】按钮，插入结束，如图3-10所示。图3-10 插入标题图像的网页,3.3.1 制作网页标题,【实例3.6】插入水平分割线操作步骤：（1）将光标移到需要插入分隔线的地方（如标题下方）。（2）在“插入”面板上单击“HTML”工具栏中的“水平线”图标。（3）标题图像的下面出现一条水平分隔线，并处于选中状态，如图3-11所示。在属性面板中可以设置其属性。图3-11 插入水平线,3.3.1 制作网页标题,改变分隔线的宽度与高度分隔线的宽度和高度的设置分为两种方式，一种是选择单位为“像素”（px）,可直接输入实际数值；

20、另一种是选择单位为“%”，即设置分隔线占浏览器打开窗口的百分比。插入垂直分隔线通常插入的分隔线都是水平的，当需要插入垂直分隔线时，可利用改变分隔线的高度和宽度的方法达到目的。例如，将分隔线的高度设为120px，宽度设为2px，则分隔线即可变为垂直分隔线。改变分隔线的对齐方式对齐方式包括“默认”、“左对齐”、“居中对齐”、“右对齐”。对齐功能只有在分隔线的宽度小于浏览器窗口的宽度时才有效。为分隔线添加阴影效果选中“阴影”复选框，可将原本实心的分隔线设为立体效果，即阴影效果。,3.3.2 设置导航栏,导航栏的作用是与其他网页链接，从而轻松地进入下一个页面，导航既可以使用文字，也可以使用图像。这里我

21、们使用文字制作导航，并且使用表格布局导航栏。【实例3.7】插入表格并添加文字操作步骤：（1）在水平分隔线下单击鼠标，出现光标插入点。（2）在插入面板上单击“常用”工具栏中的【表格】按钮，弹出表格对话框，设置“行数”为7，“列数”为1，“宽度”为25,单位为“百分比”，如图3-12所示。,3.3.2 设置导航栏,图3-12表格对话框,3.3.2 设置导航栏,（3）单击【确定】按钮，表格插入。此时表格处于选中状态，拖动控制点（黑点）可以调整表格的大小，如图3-13所示。（4）在属性面板中设置表格的背景颜色。（5）在表格的第一个单元格里单击鼠标，出现光标插入点，通过键盘输入文字“班级档案”。（6）选

22、中文字“班级档案”，可以在属性面板中设置其字体、大小、对齐方式，如图3-14所示。（7）参照步骤（5）（6），输入并设置其他导航栏：“组织机构”、“荣誉殿堂”、“风彩图片”、“文体天地”、“学习园地”、“支部生活”。,3.3.2 设置导航栏,图3-13 插入表格后结果,3.3.2 设置导航栏,图3-14 单元格属性面板,3.3.3 设置网页内容,在本例中网页内容由文字与图像两部分组成，可以借助“层”来定位文字区域与图像区域。1.设置文字区域【实例3.8】设置文字区域并添加文字操作步骤：（1）在“插入”面板的“布局”工具栏上，单击【描绘层】按钮。（2）在页面需要放文字的地方，按住鼠标左键拖动出一

23、个矩形区域，如绘制层的结果如图3-15所示。（3）此时层处于选中状态，通过拖动控制点可以调整层的大小。将鼠标放在层的边缘线上，鼠标呈“十字”箭头时，拖动鼠标可以移动层的位置。（4）在层内单击鼠标，出现插入点后，即可输入文字。2.设置图像区域【实例3.9】设置图像区域操作步骤：（1）在“插入”面板中的“布局”工具栏上，单击【描绘层】按钮，在文字区域的下方拖出一个矩形区域。（2）适当调整层区域的大小和位置。（3）在层内单击鼠标，出现插入点。（4）在“插入”面板中的“常用”工具栏上，单击【图像】按钮，插入所需要的图像。至此，页面的基本结构制作完成。,3.3.3 设置网页内容,图3-15 绘制层的结果

24、,3.3.4 图像和文字的链接,超级链接是网页的灵魂，它的作用是建立网页之间的联系。通过超级链接，浏览者能够方便自由地在网页、网站乃至整个因特网上遨游。通过超级链接技术，整个因特网成为一个四通八达的整体。超级链接可以是一段文本、一幅图像或者其他的网页元素。在网页浏览器中用鼠标单击这些对象时，将会载入一个新的页面或者跳到页面的其他位置。,3.3.4 图像和文字的链接,1.文字的超级链接在本例中,导航栏中的文字需要与后面相应的二级页面进行链接。【实例3.10】文字的超级链接操作步骤：（1）首先选中设置超级链的文字，如“班级档案”。（2）单击属性面板中的“浏览文件”图标，弹出“选择文件”对话框，如图

25、3-16所示。双击打开“html”文件夹，单击选中与“班级档案”相链接的网页文件dangan.htm，单击【确定】按钮后，在属性面板的链接框内显示出链接的网页文件及路径。也可以在“链接”框中直接输入需要链接的网址或文件路径。（3）建立超级链接的文字颜色呈蓝色，并且出现一条下划线。（4）参照步骤（1）（3），设置其他导航栏的文字链接。,3.3.4 图像和文字的链接,图3-16“选择文件”对话框,3.3.4 图像和文字的链接,2.图像的超级链接【实例3.11】图像的超级链接操作步骤：（1）首先选中设置超级链接的图像，本例中为文字区域下的图像。（2）单击属性面板中的“浏览文件”图标，弹出“选择文件”

26、对话框。（3）选择与此图像相链接的网页文件，单击【确定】按钮后，在属性面板的链接框内显示出链接的网页文件及路径。,3.3.5 设置页面属性,网页页面属性主要包括页面标题、网页背景图像与颜色、文本与超级链接颜色、页边距等。网页标题可以标识和命名文档；网页背景图像与颜色可以设置文档的外观；文本颜色可以帮助浏览者区分普通文本和具有超级链接的文本，并且可以识别已经访问过和尚未访问过的超级链接。1.设置网页标题网页标题非常重要，它可以帮助浏览者在浏览网页时了解正在访问的内容，以及在历史记录和书签列表中标识页面。如果页面没有标题，则网页将作为“无标题文档”在文档窗口、浏览器窗口、历史记录和书签列表中出现，

27、如图3-17所示。,3.3.5 设置页面属性,图3-17“无标题文档”在浏览器窗口的显示,3.3.5 设置页面属性,在Dreamweaver8中有多种方法为网页添加标题。【实例3.12】为网页添加标题“计算机多媒体”操作步骤：方法一：直接在Dreamweaver8文档工具的“标题”框中输入新标题。例如，输入“计算机多媒体”。然后按【Enter】键确定。如果工具栏没有显示，可通过“查看”菜单打开工具栏。方法二：执行“查看”“文件头内容”菜单命令，显示出文件头部分的内容，如图3-18所示。单击【标题】按钮，在属性面板的标题框中输入新标题，然后按【Enter】键确定。方法三：单击文档工具栏上的【代码

28、】按钮，然后在和标签之间输入新标题，如图3-19所示。方法四：执行“修改”“页面属性”菜单命令，或在网页空白处单击鼠标右键，选择“页面属性”选项，然后在“页面属性”对话框的“分类”中选中“标题/编码”，在“标题”框中输入新标题，如图3-20所示。单击【确定】按钮完成。,3.3.5 设置页面属性,图3-18 文件头与标题按钮,3.3.5 设置页面属性,图3-19 在HTML源代码窗口中设置标题,3.3.5 设置页面属性,图3-20 在“页面属性”对话框中设置标题,3.3.5 设置页面属性,2.设置网页的背景图像或颜色使用“页面属性”对话框可以设置网页的背景图或颜色。如果同时设置了背景图像和背景颜

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

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

31、 为网页设置背景图像,3.3.5 设置页面属性,图3-22 Windows“颜色”对话框,3.3.5 设置页面属性,3.设置网页文本的属性设置了背景图像和颜色之后，还需要设置网页中文本的字体、大小与颜色。在“页面属性”对话框中既可以设置普通文本的默认颜色与字体，也可以设置超级链接、已访问链接和活动链接的默认颜色与字体。网页文本的属性如图3-21所示。网页链接文本的属性如图3-23所示。其中：页面字体：当前网页中普通文本的字体。页面字体大小：当前网页中普通文本的字号大小。文本颜色：当前网页中普通文本的颜色，系统默认为黑色。链接字体：当前网页中超级链接文本的字体。系统默认与普通字体相同。链接字体大

32、小：当前网页中超级链接文本的字体大小。系统默认与普通字体大小相同。链接颜色：当前网页中没有访问过的超级链接文本的颜色，系统默认为蓝色。活动链接：当超级链接文本被鼠标单击时的颜色，系统默认为蓝色。已访问链接：当前网页中被访问过的超级链接文本的颜色，系统默认为紫色。,3.3.5 设置页面属性,图3-23 设置链接文本的颜色,3.3.5 设置页面属性,【实例3.14】为网页设置文本颜色操作步骤：（1）在如图3-21所示的“页面属性”对话框中，单击“文本颜色”右侧的按钮，弹出颜色面板。使用取色滴管选取文本颜色。（2）在“页面属性”对话框的“分类”中，选中“链接”选项，设置链接颜色、已访问链接与活动链接

33、的默认颜色，如图3-23所示。,3.3.5 设置页面属性,4.设置页面边距通过设置页面边距，可以使网页周围留出一些距离。设置页面边距的操作是在“页面属性”对话框中实现的，方法是直接在边界框中输入边距数值，如图3-21所示。左边距：文档中左侧边缘的空白数值。右边距：文档中右侧边缘的空白数值。上边距：文档中上侧边缘的空白数值。下边距：文档中下侧边缘的空白数值。5.设置文档编码在图3-20所示的“页面属性”对话框的“标题/编码”对话框中，可以选择使用的汉字编码类型。对于中文网页，一般选用“简体中文（GB2312）”。,3.3.6 保存网页,随时保存文件是编辑任何文档时应该有的良好习惯。在制作网页的过

34、程中，随时有可能发生断电或机器故障，而Dreamweaver编辑器没有自动保存的功能。因此，要经常地保存正在编辑的网页，以避免由于意外而导致辛勤劳动付之东流。【实例3.15】保存网页操作步骤：（1）执行“文件”“保存”菜单命令，或单击标准工具栏上的【保存】按钮，或按快捷键【Ctrl】+【S】（2）如果网页文件已经建好或以前保存过，则文件继续保存；如果文件从未保存过，则弹出“另存为”对话框，如图3-24所示。（3）在“保存在”列表中选择一个文件路径（注意：网页文件应保存在站点文件夹内），在“文件名”文本框中输入文件名，“保存类型”选择html文件，最后单击【保存】按钮。,3.3.6 保存网页,图

35、3-24“另存为”对话框,3.3.7 浏览网页,一个网页制作完成后，可以在浏览器中预览，并根据预览效果再对网页进行调整。【实例3.16】在浏览器中预览“班级风采”主页操作步骤：（1）执行“文件”“在浏览器中预览”“IExplore”菜单命令，或按快捷键【F12】启动IE浏览器，并将当前编辑的网页显示在窗口中。也可单击文档工具栏上的【在浏览器中预览】按钮。（2）将鼠标指向链接的文字或图像时，鼠标形状变为手形，状态栏将显示被链接文件的名称，单击即可切换到链接的页面。,3.3.8 设置首页及应用站点地图,1.设置首页【实例3.17】设置首页操作步骤：（1）执行“站点”“管理站点”菜单命令，弹出如图3

36、-7所示的“管理站点”对话框。（2）选中站点名称“班级”，然后单击“编辑”按钮。（3）在“班级站点定义为”对话框的“分类”列表中选中“站点地图布局”，如图3-25所示。（4）在“主页”文本框中输入主页的文件名与路径，或按【浏览】按钮查找主页文件。（5）单击【确定】按钮返回“管理站点”对话框，单击【完成】按钮，首页设置完成。,3.3.8 设置首页及应用站点地图,图3-25“班级站点定义为”对话框,3.3.8 设置首页及应用站点地图,2.应用站点地图可以通过站点地图规划及设置整个网站。双击站点地图中的某个文件，可立即进入该文件的编辑页面。【实例3.18】应用站点地图操作步骤：（1）打开站点窗口，默

37、认的状态是“站点文件”状态。如图3-6所示。（2）单击“站点地图”按钮，窗口显示站点地图，最上面的index.htm为首页，下面是链接的所有页面。如图3-26所示。（3）在“站点地图”按钮的下拉列表中可以设置站点地图的显示方式。仅地图：窗口内只显示站点地图。地图和文件：窗口内只显示站点地图，右侧显示站点文件。（4）在窗口左下角的弹出式列表中，可以设置站点地图的显示大小。这里以75%窗口显示。,3.3.8 设置首页及应用站点地图,图3-26 站点地图,实训指导3,【实训项目1】创建一个站点，并且制作首页。要求首页有标题区、分隔线、导航区、文本区和图片区，并且导航区与其他网页链接（例如：制作我的心

38、灵家园网页，网页类似图SX3-1所示）。,实训指导3,图SX3-1 网页显示效果,实训指导3,操作步骤参考：Step1：在硬盘上设立本地站点目录（1）在桌面上双击打开“我的电脑”。（2）在“我的电脑”窗口中双击打开用于存储站点目录的硬盘驱动器，例如E盘。（3）执行“文件”“新建”“文件夹”菜单命令（或在空白区域单击右键，执行“新建”“文件夹”命令），在E盘中建立一个新文件夹“xljy”。（4）关闭“我的电脑”窗口。Step2：建立Dreamweaver站点（1）启动Dreamweave（2）执行“站点”“新建站点”命令，弹出“站点定义”对话框。（3）选择“高级”标签，在“分类”中选择“本地信息

39、”。（4）在“站点名称”文本框中输入“心灵家园”，单击“本地根文件夹”黄色文件夹按钮，选择“E:xljy”作为本地根文件夹，其他可采用默认设置。（5）单击【确定】按钮，完成站点创建。,实训指导3,Step3：建立站点文件夹和网页文件。（1）在“文件”面板中选择“心灵家园”站点，在“E:xljy”文件夹上单击鼠标右键，在弹出的快捷菜单中选择“新建文件夹”选项，建立文件夹“picture”，此文件夹用于存放图像文件。（2）参照Step（1），依次建立文件夹“web”（用于存放非首页的其他网页）、“music”（用于存放音乐文件）、“flash”（用于存放Flash动画）。（3）选中“E:xljy”

40、文件夹，单击鼠标右键，在弹出的快捷菜单中选择“新建文件”选项，建立首页index.htm。（4）选中“web”文件夹，单击鼠标右键，在弹出的快捷菜单中选择“新建文件”选项，建立网页wdjl.htm(我的简历)。（5）参照Step（4），分别建立网页yyxs.htm(音乐欣赏)、dstd.htm(读书天地)、fctp.htm(风采图片)、shjs.htm(书画鉴赏)、rsgw.htm(人生感悟)。Step4：打开首页文件在“心灵家园”站点中，双击首页文件index.htm,此时首页是空白页面，进入首页编辑状态。,实训指导3,Step5：制作首页标题部分（1）执行“插入”“图像”菜单命令，屏幕出现

41、“选择图像源文件”对话框。（2）在驱动器中搜寻到标题图像文件（xljy.gif），选择【确定】按钮，系统弹出提示信息框，提示大家这个图像不在站点根文件夹内，询问是否将该文件复制到根文件夹中。（3）单击“是”按钮，出现“复制文件为”对话框，“保存在”会自动切换到打开的站点文件夹“xljy”。（4）把这个图像文件放在“picture”下。双击“picture”文件夹，单击“保存”确认。此时出现“图像标签辅助功能属性”对话框，可在“替换文本”中输入替换文本，也可不输入任何信息，单击【确定】按钮，此时一个标题图像就插入完毕了。（5）执行“文件”“保存”菜单命令，或按快捷键Ctrl+S保存网页。,实训指

42、导3,Step6：设置导航栏（1）在标题图像下单击鼠标，出现光标标插入点。（2）在常用面板中单击“表格”按钮，出现“表格”对话框，设置行数为6，“列数”为1，“宽度”为25，单位为“百分比”，边框为1。（3）单击“确定”按钮，表格插入到网页中。（4）此时表格处于选中状态，拖动控制点（黑点）适当调整表格的大小。（5）在属性面板中设置表格的背景颜色，如#99CCFF。（若属性面板看不见，按快捷键Ctrl+F3或选择“窗口”“属性”，打开属性面板。）（6）在表格的第一个单元格里单击鼠标，出现光标插入点，通过键盘输入文字“我的简历”。（7）选中文字“我的简历”，然后在属性面板中设置其字体为“隶书”、大

43、小为24，对齐方式为“居中对齐”。（8）参照（6）和（7），输入和设置其他导航栏：“音乐欣赏”、“读书天地”、“风采图片”、“书画鉴赏”、“人生感悟”。（9）执行“文件”“保存”菜单命令，或按快捷键Ctrl+S保存网页。,实训指导3,Step7：设置网页文字区域的内容（1）在布局面板上单击“描绘层”按钮。（2）在表格右侧的文字区域按住鼠标左键拖动出一个矩形层区域。（3）此时层处于选中状态，通过控制点适当调整层的大小，并且调整层的位置，层的高度与表格高度一致，宽度约占网页总宽度的50%。（4）在层内单击鼠标，出现插入点。在层内输入文字标题内容“我的档案”，并在属性面板中设置文字的字体为“隶书”、

44、大小为“30”（字号大小列表没有的字号可自行输入）、对齐方式为“居中”。（5）为了把标题和正文内容分隔开，我们插入水平分隔线。光标放在标题文字后，执行“插入”“HTML”“水平线”菜单命令，则在标题文字下插入了一条水平分隔线。（6）在水平分隔线下单击鼠标，再在层内绘制两个大小相同的子层，子层的底部接近表格底部。（7）单击层标记选择不同的子层，在两个子层内分别输入正文内容（如图SX3-1所示）。（8）执行“文件”“保存”菜单命令，或按快捷键Ctrl+S保存网页。,实训指导3,Step8：设置网页图像区域的内容（1）在布局面板上单击“描绘层”按钮，在文字区域的右方拖出一个矩形层区域。（2）适当调整

45、层区域的大小和位置。（3）在层内单击鼠标，出现现插入点。（4）执行“插入”“图像”菜单命令，插入所需图像。（5）执行“文件”“保存”菜单命令，或按快捷键Ctrl+S保存网页。Step9：设置导航栏文字的超级链接和图像的超级链接（1）先选中用来作链接的文字“我的简历”。（2）单击属性面板中“链接”右边的“浏览文件”图标，在出现的“选择文件”对话框中双击打开“web”文件夹，选择与“我的简历”相关的网页文件“wdjl.htm”。（3）参照（1）、（2），设置其他导航栏的文字链接：“音乐欣赏”链接“web/yyxs.htm”、“读书天地”链接“web/dstd.htm”、“风采图片”链接“web/f

46、ctp.htm”、“书画鉴赏”链接“web/shjs.htm”、“人生感悟”链接“web/rsgw.htm”。（4）执行“文件”“保存”菜单命令，或按快捷键Ctrl+S保存网页。,实训指导3,Step10：设置页面属性（1）执行“修改”“页面属性”菜单命令。（2）在弹出的“页面属性”对话框中设置网页标题为“心灵家园”、网页的背景图像为“picture/1.gif”或颜色为“#CCFFFF”、文本颜色为“#000000”、页面边距为“0”、文档编码为“简体中文（GB2312-80）”等。（3）单击“确定”按钮。（4）执行“文件”“保存”菜单命令，或按快捷键Ctrl+S保存网页。Step11：浏览

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