《创建和管理站点》word版.doc

第二章 创建和管理站点在制作网页之前首先要创建站点。建立一个本地站点就是在本地计算机上建立一个文件夹，将所有与网站相关的文件都放在该文件夹中，以便进行网页的制作与管理。本章主要介绍利用Dreamweaver 8创建站点的方法。通过本章学习，读者应该掌握以下内容：l 规划站点结构的方法l Dreamweaver 8 的基本操作l 利用Dreamweaver 8创建并管理站点2.1 规划站点结构作为一个网站，里面会有很多不同类型的文件，如果不进行分类组织，任意分散在硬盘的各个地方，网站会杂乱无章，不便于进行管理和更新，因此在建立站点之前，最好先规划以下站点结构。一般来说，整个站点是一个大的文件夹，称为站点根文件夹，在站点根文件夹下建立一个合理的文件结构来存放所有与网站相关的资料。通常，对站点的文件的规划，可以按照如下两种方法进行。1.按照文件的类型进行规划 图2-1 网站的目录结构按照文件的类型规划，就是将不同类型的文件分别存放在不同的文件夹下。例如可以将所有的网页素材、图像、插件、模板等分别入在各自的文件夹下，便于查找。2.按照网页主题进行规划按照网页主题对站点结构规划，可以使用网站条理更清晰，便于日后更好地管理站点。图2-1所示为一个公司网站的目录结构。整个网站放置在硬盘的ROOT目录下，这也是整个网站的根目录，引导页，主页的相关文件可以直接放在根目录下，这样设计起来方便一些。各网页的子目录在根目录下依次建立，且都应有自己独立的子目录，用来存放相关的文件。 网站结构和好坏，对浏览者来说并没有什么太大的感觉，但是对于站点本身的上传维护，内容的扩充和移植有着重要的影响，下面是建立目录结构的一些建议。（1）不要将所有文件都存放在根目录下，这样会造成文件管理混乱，如果将所有文件都存放在根目录下，很难搞清哪些文件需要编辑和更新，哪些无用的文件可以删除，哪些是相关联的文件，即使只上传更新一个文件，服务器也需要将所有文件再检索一遍，建立新的索引文件。很明显，文件量越大，等待的时间也将越长，所以，应尽可能减少根目录的文件存放数。（2）子目录的建立，首先按主菜单栏目建立，例如，企业站点可以按公司简介，产品介绍、价格、在线定单和反馈联系等建立相应的目录，其他的次要栏目，类似“whats new ”，友情链接等内容较多，需要经常更新的栏目，可以建立独立的子目录，而一些相关性强，不需要经常更新的栏目，可以合并成一个统一目录下，所有程序一般都存放在特定目录下。所有需要下载的内容也最好放在一个目录下，如上图中将让客户下载的文档都放在documents文件夹下。（3）为每个主栏目建立一个独立的image目录是最方便管理的，而根目录下的image目录中是用来放首页和一些次要栏目的图片。（4）目录的层次建议不要超过三层，以使维护管理方便。（5）不要使用中文目录。（6）不要使用过长的目录。2.2利用Dreamweaver 8创建站点221Dreamweaver 8 简介Dreamweaver 8是Macromedia公司出品的一款“所见即所得”的网页编辑工具。与FrontPage不同，Dreamweaver采用的是Mac机浮动面版的设计风格，对于初学者来说可能会感到不适应。一旦习惯了其操作方式后，就会发现Dreamweaver的直观性与高效性是FrontPage所无法比拟的。Dreamweaver对于DHTML（动态网页）的支持特别好，可以轻而易举地做出很多绚丽的互动网页特效。插件式的程序设计使得其功能可以无限的扩展。Dreamweaver与Flash、Fireworks并称为Macromedia的网页制作三剑客，由于是同一公司的产品因而在功能上有着一个非常紧密的结合。因此说Dreamweaver是高级网页制作的首选并不为过。Dreamweaver 较新的版本为Dreamweaver MX。Dreamweaver MX包含多种多样的新功能，例如为设计人员提供的新型模板以及多种新的编码功能。本书以Dreamweaver 8为网页制作工具，介绍网页设计和制作的方法。图2-2 Dreamweaver 8的操作界面1Dreamweaver 8的界面启动Dreamweaver 8，其操作界面便会出现在屏幕上，如图2-2所示。操作界面由以下几部分构成。（1）菜单栏菜单栏提供了所有的菜单命令，它是提供软件最完整功能的方式。（2）工具栏工具栏提供了常用命令的快捷启动方式，例如可以使用工具栏中的“标题”框方便地设置网页的标题。（3）插入面板插入面板是Dreamweaver 8中新添的部件，其实就是Dreamweaver 4中的对象面板，在其中包含一些用于创建不同类型对象的按钮。用户可以单击“插入”按钮隐藏/显示整个插入栏，通过单击相应的标识符名切换显示不同的按钮。（4）浮动面板浮动面板是一种方便操作的界面方式，使用者可以随时获得特定功能。例如，可以在“参考资料”面板中获得有关HTML、CSS以及JavaScript的帮助说明,或者用“CSS”样式面板设置CSS样式。如果需要打开某个浮动面板,可以单击面板组与之对应的快速启动按钮,或者在“窗口”菜单中选择相应的选项.如果要关闭目前不使用的面板,则单击该面板上的关闭按钮即可.如果要隐藏当前所有处于打开状态的面板,即可单击“窗口”“隐藏面板”菜单命令或直接按快健F4. 再一次选择“窗口”“显示面板”命令或按F4键,就可以显示所有的隐藏面板.在实际操作中,可以通对自由组合面板来节省工作区空间.拖动而板上的标识符,就可以把面板拖动成独立的一个面板或加入其中他面板中.面板组中的所有面板都是可以移动的。（5）文档窗口文档窗口是用来显、创建和编辑当前文档的地方。（6）属性面板属性面板上显示的是被选取对象或文不对题本的各种属性、，在属性面板上还可以检查和编辑当前选取定页面元素的属性。用户可以在设计视图中选择页面元素也可以在代码视图国、中选择面页元素。要显示或隐藏属性面板，应选择“窗口”菜单“中的元素”属性“命令”或者直接按钮Ctrl+F3。在大多数情况下，用户对属性进行的修改会立即在文档窗口中应用。但有些属性在修改完之后可能需要在属性文本编辑框之外的地方单击一下，或者按Tab键转到别的属性后才能应用。2、Dreamweaver 8的视图作为一种所见所得的网页编辑软件，Dreamweaver 8自动在用户创建网页时生成底层的HTML代码，同时提供了很好的HTML，代码编辑功能。使用工具栏中的视图切换按纽钮可以很方便切换到代码视图以便查看当前编辑网页的HTML源代码。（1）代码视图设计视图。作为一种所见的得网页编辑软件，Dreamweaver 8自动在用户创建网页时生成底层的HTML代码，同时提供了很好的HTML代码编辑功能。单击工具栏上的视图切换按钮，即显示设计视图。使用工具栏中的按钮，可以很方便地切换到代码视图 以便查看当前编辑网页的HTML源代码。如果需要同时查看代码视图和设计视图，可以单击工具栏上的显示代码和设计按钮，此时，Dreamweaver 8将同时在窗口中显示代码视图与设计视图。（2）文档窗口文档窗口是显示用户所编辑 文工团档的地方，显示结果与文档在浏览器中显示的结果基本相同。文档窗口和标题栏显示页面标题，圆括号内显示和、的是显示文件名，如果文档有尚未保存的部分，在文件名之后还会出现一个星号。控制被文档或对象的标记符出现在文档窗口底部左边标记符编辑器上。单击这些标记符可以准确地选取标记符及其控制的内容，如单击，body可以选取整个文档，单击table可以选取当前光标所在的表格。单击窗口大小 下拉菜单721*364，用户可以将文档窗口的大小设为预设值或自定义值。（3）插入面板选择“窗口”插入菜单命令，出现插入面板。在插入在面板上包含了多种不同类型的按纽，用于在文档中创建不同类型的对象，例如文本、表格、框架等。默认情况下，插入面板中显示的是“常用”工具组中的工具图标。单击插入面板对象类标签，会打开相应和插入面板，显示插入面板上所包含对象的类型。插入面板有“常用”、布局、“文本”表格、框架、表单“模板”字符“媒体”文件头、脚本“和应用程序”，共12组，每组中有不同类型的对象。使用“插入”菜单“中的命脉令也可以实现插入”菜单“中的命令也可实现插入各种对象，使用菜单还是使用插入面板，完全根据用户的习惯来决定。2.2.2 定义站点1. 站点管理器Dreamweaver 8为用户准备了专门的建站工具站点管理器。它能够方便地建立和修改更新网站，帮助用户组织本地和远程的文件夹，使用户能够在远程服务器上复制本地文件夹的结构或者本地系统复制远程文件夹结构。由于本地站点和远程站点的结构是相同的，因此，当用户将文件夹传输到远程站点之后，在本地站点中创建的链接在远程站点中仍可以使用。在Dreamweaver 8的编辑窗口，选择“窗口”“文件”菜单命令，窗口右侧展开“文件”工作组，选择“管理站点”超链接，即可打开管理站点对话框，如图2-3所示。图2-3 管理站点对话框在“管理站点”对话框中，用户也可以选择“新建”按钮，创建新站点，也可以选中已有站点，选择“编辑”按钮，编辑已有站点。2. 创建站点建立站点后可以在Dreamweaver 8 中对站点中的文件进行统一的管理和编辑，下面通过建立名为Web study的站点为例，说明如何建立站点。（1）在“管理站点”对话框中，选择“新建”按钮，并选择其下拉菜单中的“站点”命令，或选择“站点”菜单中的“新建站点”命令，打开定义站点的向导。（2）在为站点起名的文本框内输入站点的名称“Web study”，如图2-4所示，点击“下一步”按钮。图2-4建立站点向导第1步（3）在第二步中，问是否使用服务器技术，点击“否”单选按钮，如图2-5，点击“下一步”。图2-5建立站点向导第2步（4）选择“编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）”选项，在询问“您将把文件存放在计算机上的什么位置？”下选择存储所有站点文件的文件夹，如图2-6所示，单击“下一步”按钮。图2-6建立站点向导第3步（5）在“如何连接到远程服务器？”下的下拉列表中，选择“无”，如图2-7，单击“下一步”按钮。图2-7建立站点向导第4步（6）向导最后显示所建立站点的相关信息，如图2-8所示，单击“完成”按钮，完成站点的建立。图2-8建立站点向导第5步（7）向导返回到“管理站点”对话框，并显示新建立的站点的名称“Web study”，如图2-9所示，单击“完成”按钮。 图2-9新建的站点Web study 图2-10 站点名称及对应文件夹（8）此时，窗口右侧“文件”工作组面板中显示站点Web study所对应本地文件夹，此时就可以在该文件夹中创建web页面了，如图2-10。2.2.3站点的基本操作在Dreamweaver 8中创建好了本地站点后，即可对它进行相应操作。比如打开站点、编辑站点等。1打开站点如果要打开站点，可以在“窗口”菜单中选择“文件”命令，打开“文件”面板组，在该面板组中选择“文件”选下卡中的下拉列表，下拉列表中显示了所有站点，选择，要编辑的站点即可打开它，如图，2-11。 图2-11 打开站点 图2-12 复制站点2、复制站点若要复制当前站点，可以使用文档窗口或站点面板中“站点”菜单的“编辑站点”命令，打开“编辑站点”对话框，如图2-12所示。选中要复制的站点名称，单击“复制：按纽即可对当前站点名称，进行复制操作。执行复制站点操作后，系统会自动复制一个选择的站点，并且会为复制的站点加上一个“复制”字样的站点名称。3编辑站点如果要更改当前站点设置，比较对站点进行修改站点名称、设置参数选项等编辑操作，可以通对上面的方法打开“编辑站点”对话框。选中一个站点后单击“编辑”按钮，即可打开该“站点定义”对话框，选择“高级”选项卡进行站点编辑，此时的对话框与图示2-4所示的对话框相同。4删除站点在Dreamweaver 8中删除一个站点非常容易，在弹出的“编辑站点”对话框中，单击删除“按钮就可以删除选中的站点。在Dreamweaver 8中除了可以创建本地站点外，还可以创建本远程站点，即在Web服务器上创建站点，它可以被其他人通对Internet访问到。可以利用FTP软件管理远程站点，也可以直接用Dreamweaver 8对远程站点进行管理。224网页文件的基本操作1.新建网页每次进入Dreamweaver 8时,总会自动打开一个空白文档,即可新建一个网页.如果在编辑一个网页的同时,还想建另外一个网页,可以选择“文件”“查寻”菜单命令或按钮Ctrl+N.执行上述两种操作均可开如图示2-13所示的“新建文档”对话框,从该对话框中选择一种需要创建节的文档格式,然后单击“创建”按钮即可。图2-13 “新建文档”对话框如果要基于模板创建文档,则应在出现的“新建文档”对话框单击“模板”标签,该对话框变为“从模板新建”对话框,如图示2-14所示。图2-14 “从模板新建”对话框然后还可以从对话框左边的列表框中选择模板所在的站点,再从右边的模板列表中选择一个模板.用户还可以通对区域预先浏览所选取择模板的样式,看看是否符合自己的要求.选择需要使用的模板后,单击“创建”按钮,即可基于模板创建新的文档.2.文件的打开要想编辑一个网页文件,必须先打开该文件Dreamweaver MX可以打开多种格式的文件,它们的扩展名分别是htm、HT、ASP、JS、dwt、xml、lh、as、css等.打开网页文件可以分为直接打开网页文件和文件夹框架中打开网页文件两种,下面分别加以说明（1）直接打开文件选择“文件”打开菜单命令,则会弹出“打开”对话框,如图示2-15所示。用户在文件文件名框选择需要打开的文件,并单击“打开”按钮,即会打开该文件。图2-15 “打开”对话框(2)在框架中打开文件在框架网页中,选择“文件”“在框架中打开”采单命令,则会打开选择HTML为扩展名的文件。如图，2-16所示。在此方式下只能打开以HTML为扩展名的文件。图1-16 “选择HTML文件”对话框 3.保存网页文件保存网页文件的方法随保存文件的目的不同而不同。如果同时打开了多个Dreamweaver 8窗口，而保存的目的只是保存文件，则切换到要保存的文