第5章_DW简介、建立站点与编辑网页

第五章Dreamweaver简介建站与编辑网页（1）工作界面、面板介绍（2）如何建立、编辑站点1Dreamweaver简介（1）Dreamweaver的工作界面DreamweaverMX是当前Macromedia公司最新版本的网页制作软件。安装了该软件后，首次启动它系统会打开一个提示用户选择工作区的对话框，如图所示。用户可以根据需要选择一种工作区设置。本书约定将采用第一种界面设置，即DreamweaverMX用户工作区布局。在“工作区设置”对话框中，选取“DreamweaverMX工作区”单选按钮，然后单击“确定”按钮，系统启动DreamweaverMX软件，并自动打开一个空白未命名的文档窗口，这就是制作网页时的工作界面，如图所示。插入面板有两种显示方式：菜单方式与制表符方式菜单方式制表符方式在插入窗口中MX2004新增“收藏夹”，可以将我们经常使用的插入操作放在收藏夹中，点击右键-自定义收藏夹，弹出如下窗口，将左边出现的功能放置右边即可。工具栏代码视图设计视图当我们在设计视图中选择视图选项的显示文件头内容，则在界面上方会出现相应的文件头内容标签，如标题等。一般情况下，文件头内容都在插入面板-HTML中的子项里状态栏属性窗口（2）创建与管理站点1．新建本地站点在Dreamweaver中建立本地站点的方法如下。（1）在文档窗口中选择“站点”菜单中的“新建站点”命令或“站点”面板“站点”菜单中的“新建站点”命令，打开“定义站点”对话框，选择“高级”选项卡（也可按“基本”选项卡中的向导操作，但不如用“高级”选项卡方便）。（2）在“站点名称”文本框内输入站点名称，例如localsite。该站点名称只是在Dreamweaver中的一个站点标识，因此可以采用中文名称。（3）在“本地根文件夹”文本框旁边单击“浏览”按钮，在打开的“选择站点localsite的本地根文件夹”对话框中，定位到事先建立的站点文件夹，或者在打开的对话框中单击“新建文件夹”按钮创建一个新文件夹，如图2.6所示。选定文件夹后，“站点定义”对话框中相应文本框的内容自动更新。（4）在“默认图像文件夹”文本框旁边单击“浏览”按钮，用同样的方式指定站点中用于存放图像的文件夹。这样设置之后，以后网页中要用到的图像文件都应该放到该文件夹，以便统一管理。（5）其他选项保持不变，单击“确定”按钮，此时站点面板中出现新建的站点窗口。“新建文件夹”按钮2．管理本地站点文件的基本操作在Dreamweaver中，可以使用“文件”菜单来对单独的文件进行管理。例如，执行“新建”、“打开”、“保存”、“另存为”等命令。另外也可以在“站点”面板中对网站中的文件进行管理。例如，执行“新建”、“打开”、“删除”、“移动”、“复制”、“重命名”等命令。选择“站点”面板“文件”菜单中对应命令，即可对选取文件进行编辑操作。例如，选择文件后，在“站点”面板中选择“文件”菜单中的“打开”命令，则Dreamweaver在文档窗口中打开该文件（当然最简单的方法是在站点窗口中双击相应的文件图标）。在对站点中的文件或文件夹进行操作时，合理地使用右键快捷菜单能大大加快操作速度。例如，在选中的文件夹上单击鼠标右键，然后选择“新建文件夹”命令，可以在相应文件夹中新建一个文件夹。编辑站点在Dreamweaver中创建好本地站点后，如果需要，还可以对整个站点（本地根目录）进行编辑操作。例如，复制站点、删除站点等。如果需要编辑站点，可以执行以下步骤。（1）在站点面板中单击“站点名称”选框，在下拉列表中选择“编辑站点”命令，打开“编辑站点”对话框，如图2.8所示。（2）在对话框左侧列表中选择需要编辑的站点，然后单击右侧按钮，则可以进行相应的操作。单击“新建”按钮，打开“站点定义”对话框，可以新建一个站点；单击“编辑”按钮，打开“站点定义”对话框，可以编辑站点信息；单击“复制”按钮，可以复制一个被选择的站点；单击“删除”按钮，可以将站点文件夹在Dreamweaver中清除；单击“导出”按钮，可以将Dreamweaver中的站点导出，以便别的用户或者在别的计算机上使用该站点；单击“导入”按钮，打开“导入站点”对话框，浏览到要导入的站点（保存为XML文件）并将其选定可以导入一个站点（在导入文件之前，必须先从Dreamweaver中导出站点，将站点保存为XML文件）。（3）操作完成后，单击“完成”按钮。指定站点首页网站的门户就是首页，通常首页文件中总包含有若干指向其他主要网页的超链接，我们可以先为网站创建一个空白首页，然后编辑，并可以利用站点地图来查看网站中超链接的情况。设置站点首页步骤如下。（1）在站点窗口中选取需要设置首页的站点，再选择“文件”菜单中的“新建文件”命令，出现一个“Untitled.htm”（无标题）文件图标，此时在文本框内，输入“index.htm”，最后按【Enter】键。（2）在站点面板中选取“index.htm”文件图标，单击鼠标右键，选择“设成首页”命令，则该文件被指定为站点的首页。（3）在站点面板中选择“视图”菜单中的“站点地图”命令或按【Alt+F8】键，则“站点”面板中出现了网站有关超链接结构的站点地图。由于目前首页中并没有指定超链接，所以站点地图中只有一个首页文件图标。在为首页添加超链接后，就可以用站点地图查看整个网站的导航结构。当我们完成本地站点建立以后就可以进行相应的远程站点建立。点击站点面板的展开/折叠按钮将站点窗口最大化在站点窗口下，选择“站点”-”管理站点”-编辑-远程信息访问选择“FTP”，主机、登录等信息根据你所申请的空间设定。回到站点窗口，点击“连接到远端主机”按钮设置网页属性页面属性是指网页的一般属性信息，例如，网页标题、网页的背景颜色、背景图像、超链接颜色、跟踪图像等。1．设置网页标题网页标题是用来说明网页内容的文字，通常显示在浏览器窗口的标题栏中。通常每个网页都应该有一个标题，而网页标题文字最好能够恰如其分地描述网页的内容。设置网页标题的方法为：在文档窗口工具栏中的“标题”文本框内直接输入网页的标题文字，也可以在打开的“页面属性”对话框中的“标题”文本框内设置网页的标题。2．设置网页其他属性如果需要设置网页的其他属性，可以打开“页面属性”对话框进行设置，方法如下。（1）在文档窗口中选择“修改”菜单中的“页面属性”命令，或者按【Ctrl+J】快捷键，打开“页面属性”对话框，如图所示。2建站与编辑网页（2）设置对话框中的以下选项。页面标题背景图像背景颜色左边界、顶部边界、边界宽度、边界高度文档编码跟踪图像跟踪图像透明度：拖动滑杆可以设置跟踪图像在文档窗口中的透明度。（3）设置完成后单击“确定”按钮。添加页面内容在文档中插入文本的方法为：首先在需要插入文本的区域单击鼠标定位插入点，然后输入文字，如果需要开始新的一段，按【Enter】键即可；如果想折行显示一段的内容，可以按【Shift+Enter】组合键；如果输入的文字超出一行的范围，插入的文本会自动换行。也可以将已有文件中的文本复制到文档窗口中。方法为：打开要复制的纯文本文件，按【Ctrl+C】组合键将文本复制到剪贴板中，接着切换回Dreamweaver文档窗口，在需要添加文本的区域单击鼠标左键，然后选择“编辑”菜单的“粘贴”命令（或按【Ctrl+V】快捷键），则选中文本即被复制到指定区域。除了一般文本以外，如果需要在网页中插入特殊字符，例如商标符号®、版权符号©、英镑符号£等，应该首先定位光标，然后单击“插入栏”中的“字符”对象，再单击相应按钮。如果需要插入其他对象，例如图像、表格等，同样应使用“插入栏”的“常用”选项卡中的相应按钮，具体请参见本书其他部分。3制作网页的一般过程下面通过制作一个简单的网页，了解在Dreamweaver中创建网页的一般过程。（1）启动Dreamweaver，系统自动打开一个空白文档窗口，如果要制作基于显示器分辨率的网页，先将文档窗口“还原”，然后在文档窗口状态栏中单击“窗口尺寸”区域选择一个窗口尺寸。（2）在工具栏“标题”文本框中输入网页标题，可以使用有意义的中文作为标题，例如“我的网页”。如果需要设置网页的其他基本属性，可按【Ctrl+J】快捷键，打开“页面属性”对话框，进行必要设置。（3）此时网页没有被保存，文档窗口标题栏中显示了一个“无标题文档（Untitled-1）”字样，按【Ctrl+S】快捷键，打开“保存为”对话框，将网页保存在站点中。（4）在文档工作区中输入文字或通过单击“插入栏”中的按钮插入各种对象。例如，可单击“插入栏”的“常用”选项卡中的“水平线”按钮插入一条水平线。（5）在文档窗口中，如果需要对添加的内容进行修饰，首先选取它，然后在“属性检查器”中进行相应的设置。例如，图2.13显示了如何设置水平线的属性。（6）在编辑网页时，如果文档窗口标题栏文件名后有一个“星号”，则表示当前文档没有保存，此时应当按下【Ctrl+S】键，保存对网页的修改。另外如果对网页中的对象进行属性设置，用户还应当经常按下【F5】键刷新文档。如果需要在浏览器窗口中查看网页效果，则应按下【F12】键。注意：在制作网页过程中，如有疑问，可以按【F1】键获取联机帮助信息。图2.13在“属性检查器”中设置水平线属性文本修饰1文本格式概述2设置字符格式3设置段落格式4设置列表格式使用超链接把网页链起来超链接是组成网站的基本元素，是它将千千万万个网页组织成一个个网站，又是它将千千万万个网站组织成了风靡全球的，因此可以说超链接就是Web的灵魂。本节首先介绍超链接的基本概念，然后介绍如何创建和管理网页中的超链接。什么是超链接网页中的超链接就是以文字或图像作为链接对象，然后指定一个要跳转的网页地址，当浏览者单击文字或其他对象时，浏览器跳转到指定的目标网页。1．什么是URL超链接利用统一资源定位器即URL（UniversalResourceLocator）定位Web上的资源。一个URL通常包括3部分：一个协议代码，一个装有所需文件的计算机地址（或一个电子邮件地址等），以及具体的文件地址和文件名。协议表明应使用何种方法获得所需的信息，最常用的协议包括：HTTP（HyperTextTransferProtocol，超文本传输协议）、FTP（FileTransferProtocol，文件传输协议）、mailto（电子邮件协议）、news（Usenet新闻组协议）、telnet（远程登录协议）等。对于mailto协议，应在协议后放置一个冒号，然后跟E-mail地址；而对于常用的http和ftp等协议，则是在冒号后加两个斜杠，斜杠之后则是相关信息的主机地址。例如，mailto:[e-mail]、、。绝对URL绝对URL是指Internet上资源的完整地址，包括完整的协议种类、计算机域名（所谓域名是指一个能够反映出Web服务器实际位置的化名）和包含路径的文档名。其形式为：协议：//计算机域名/文档名。相对URL相对URL是指Internet上相对于当前页面（即正在访问的页面）的地址，它包含从当前页面指向目的页面位置的路径。例如，public/example.htm就是一个相对URL，它表示当前页面所在目录下public子目录中的example.htm文档。当使用相对URL时，可以使用与DOS文件目录类似的两个特殊符号：句点（.）和双重句点（..），分别表示当前目录和上一级目录（父目录）。超链接的分类根据超链接目标文件的不同，超链接可分为页面超链接、锚点超链接、电子邮件超接链等；根据超链接单击对象的不同，超链接可分为文字超链接、图像超链接、图像映射等。在Dreamweaver中设置超链接1．页面超链接页面超链接就是指向其他网页文件的超链接，浏览者单击该超链接时将跳转到对应的网页。如果超链接的目标文件位于同一站点，通常采用相对URL；如果超链接的目标文件位于其他位置（例如Internet上的其他网站