第三章站点的建立与管理

第三章

站点的建立与管理本章要点站点结构规划本地站点的建立与管理网页文件基本操作2.1站点结构规划网站开发流程：规划阶段设计阶段开发阶段发布和维护阶段整体规划进行网站的整体规划也就是组织网站的内容和设计其结构。网页制作者在明确网页制作的目的及要包括的内容之后，接下来就应该对网站进行规划，以确保文件内容条理清楚、结构合理，这样不仅可以很好地体现设计者的意图，也将使网站可维护性与可扩展性增强。一、题材的选择在选择题材时，可从下面几个方面进行考虑：

1．主题要小而精

定位要小，内容要精。

2．题材最好是自己擅长或者喜爱的内容。

3．题材不要太滥或者目标太高。定位网站的主题和名称二、网站名称的选择1．名称要正气。“主题站”比“万全站”更受人们喜爱。2．名称要易记。3．名称要有特色。名称平实可以接受，但如果能体现一定的内涵，给浏览者更多的视觉冲击和空间想象力，则为上品。在体现网站主题的同时，要有这画龙点睛之笔。定位网站的CI形象CI（CorporateIdentity）是借用广告词语，意思是通过视觉来统一企业的形象。1.设计网站的标志（logo）2.设计网站的标准色彩3.设计网站的标准字体（中文宋体9磅）4.设计网站的宣传标语网站标志Logo典型Logo案例中国现车交易网（）形象手法就是采用与logo对象直接关联而具典型特征的形象。这种手法直接、明确、一目了然，易于迅速理解和记忆。最大的特点就是将网站的产品，形象化和“车”字融合为一体，有效传递网站定位和核心产品。在用色上对比鲜明，图形格外醒目鲜艳，能给人以很强的视觉冲击效果且保持视觉平衡、线条流畅，整体美观、大方。确定网站的栏目和版块栏目实质是一个网站的大纲索引，索引应该将网站的主题明确显示出来。划分栏目需要注意的是：（1）尽可能将网站最有价值的内容列在栏目上。（2）尽可能方便访问者的浏览和查询。（3）尽可能删除与主题无关的栏目。确定网站的目录结构和链接结构一、网站的目录结构建立目录结构的一些建议：1．不要将所有文件都存放在根目录下2．按栏目内容建立子目录。3.不要使用中文名字的目录名。4.不要使用过长的目录名。5.尽量使用意义明确的目录名，尽量做到“见名知意”。6.目录的层次不要太多，建议不要超过3层。二、网站的链接结构①层状结构

层状结构类似于目录系统的树型结构，由网站文件的主页开始，依次划分为一级标题、二级标题等等，逐级细化，直至提供给浏览者具体信息。②线性结构线性结构类似于数据结构中的线性表，用于组织本身的线性顺序形式存在的信息，可以引导浏览者按部就班地浏览整个网站文件。这种结构一般都用在意义是平行的页面上。

通常情况下，网站文件的结构是层状结构和线性结构相结合的。

③Web结构

Web结构类似于Internet的组成结构，各网页之间形成网状连接，允许用户随意浏览。

2.2站点的建立与管理在Dreamweaver中，“站点”一词既表示Web站点，又表示属于Web站点的文档的本地存储位置。在开始构建Web站点之前，你需要建立站点文档的本地存储位置。在Dreamweaver8中提供了3类站点，即本地站点、远程站点和测试服务器文件夹。本地站点：本地站点是你的工作目录，也就是存放网页的本地文件夹。Dreamweaver将该文件夹作为Web站点的“本地站点”，它可以放在本地计算机上，也可以放在网络服务器上。在制作一般网页时只建立本地站点即可。远程站点：远程站点是存储用于测试、生产、协作等文件的地方，具体是哪些文件取决于开发环境。Dreamweaver在“文件”面板中将该文件夹称为“远程站点”。一般远程文件夹位于运行Web服务器的计算机上。测试服务器文件夹：测试服务器文件夹是Dreamweaver处理动态页面的文件夹。Dreamweaver使用此文件夹生成动态内容并在工作时连接到数据库。主要在对动态页面进行测试时使用。此文件夹与远程文件夹通常是同一文件夹。除非你在开发Web应用程序，否则无需考虑此文件夹。

通常，在制作站点时首先应在本地硬盘上创建一个站点文件夹，然后可将任何现有资源（图像或其它内容）放在该站点的根文件夹（站点的主文件夹）下。当你准备向页面中添加内容时，可随时使用这些资源。接下来在制作站点的过程中，将所有创建和编辑的文档都保存在该文件夹中。当准备发布站点时，将这些文件上传到Web服务器上即可。如果在本地对站点作了修改，还要将其上传到Web站点上更新自己的站点。不熟悉Dreamweaver的用户使用“站点定义向导”；有经验的Dreamweaver用户可使用“高级”设置。创建本地站点

新建站点通过[站点][新建站点]菜单命令或“文件”面板新建站点。新建文件夹

建立好站点后就可以在站点中新建文件夹，该文件夹主要用来存储这个网站中用到的网页元素，如图片、音乐等。

新建网页文件新建网页文件的方法与新建文件夹的方法相同。创建远程站点

创建远程站点的方法与创建本地站点的方法类似，只是无需在站点文件夹下再新建文件夹或网页文件。

管理本地站点

编辑本地站点选择本地站点删除站点中的文件和文件夹更改站点信息

删除本地站点如果不需要某个站点时，可以将其从站点列表中删除。2.3网页文件基本操作

1、创建、打开和保存网页文件2、设置头信息插入关键字插入刷新3、设置页面属性设置外观页面字体、大小、文本颜色、背景颜色、背景图像、设置链接链接字体、大小、链接颜色、变换图像链接、已访问链接、活动链接、下划线样式设置标题设置跟踪图像4、使用辅助工具使用标尺和网格使用历史记录面板一、编辑文本

文本是网页中运用最广泛的元素之一，一个内容详实的网页必然会使用大量的文本。在Dreamweaver8中输入文本和在Word等字处理软件中输入文本一样方便，另外，Dreamweaver8还允许从其他文档中复制文本。网页文档编辑1、插入普通文本

普通文本是指一般的汉字或英文文本，它的插入方法十分简单，将光标直接定位到编辑窗口中要输入文字的地方，然后直接输入文字即可。在Dreamweaver8中输入文本时换行需按【Shift+Enter】键，如果要分段则需按【Enter】键。2、插入特殊符号在Dreamweaver8中，可以在文档中插入多种特殊符号。3、插入不换行空格

Dreamweaver8的HTML代码只允许字符之间包含一个空格，若要在文档中添加其他空格，必须插入不换行空格。插入不换行空格的方法有如下几种：在插入栏中的“文本”选项卡中，单击【字符】按钮，在打开的菜单中单击（不换行空格）按钮。按【Ctrl+Shift+空格】键输入。将输入法切换到全角状态再按空格键。

在网页中可以使用一条或多条水平线分隔文本和对象，以使段落区分更明显。在编辑窗口中，将插入点定位到要插入水平线的位置。执行以下操作之一即可创建一条水平线：选择[插入]}[HTML]}[水平线]菜单命令。在插入栏的“HTML”选项卡中单击（水平线）按钮。二、插入水平线

Dreamweaver8中的文本格式设置与使用标准字处理程序类似。可以对文本的字体、大小、颜色和对齐方式等进行设置。要格式化文本，应先选中要格式化的文本，然后在属性面板中进行设置。三、格式化文本网页图像编辑一、网页图像的格式受网络速度的影响，用于网页的图像一般有GIF、JPEG（也称为JPG）或PNG这3种格式。目前大多数的浏览器都支持GIF和JPEG格式，但只有IE4.0及更高版本和NE4.0及更高版本支持PNG格式。

GIF格式

GIF全称为“GraphicsInterchangeFormat”，意为可交换图像格式，它是第一个支持网页的图像格式，在PC机和苹果机上都能被正确识别。它最多支持256种颜色，可以使图像变得容量相当小。GIF图像可以在网页中以透明方式显示，还可以包含动态信息，即GIF动画。GIF在网页中大量用于站点图标Logo、广告条Banner及网页背景图像，但由于GIF受颜色数目的限制，GIF不适合用作照片级的网页图像。

JPEG格式

JPEG全称为“JointPhotographicExpertsGroup”，意为联合图像专家组，它可以高效地压缩图片，丢失人眼不易察觉的部分图像，使文件容量在变小的同时基本不失真，通常用来显示颜色丰富的精美图像。PNG格式

PNG全称为“PortableNetworkGraphics”，意为便携网络图像，它是逐渐流行的网络图像格式。PNG格式既融合了GIF能透明显示的特点，又具有JPEG处理精美图像的优势，且可以包含图层等信息，常常用于制作网页效果图。二、网页图像素材的获取

网页图像素材的来源很多，可以利用图形处理软件（如Photoshop、Fireworks和FreeHand等软件）制作，也可以到网上下载或购买一些网页素材光盘，进行加工后用到自己的网页中。三、插入图像

一个漂亮的网页通常是图文并茂的，精美的图像和漂亮的按钮，不但使网页更加美观、形象和生动，而且使网页中的内容更加丰富多彩。图像既可用于网页内容，也可作为网页的背景，下面介绍在网页中插入图像的方法。在Dreamweaver8中插入图像的方法主要有直接插入和占位符插入两种。

有三种类型的链接路径：绝对路径（例如/support/dreamweaver/contents.html）文档相对路径（例如dreamweaver/contents.html）站点根目录相对路径（例如/support/dreamweaver/contents.html）用占位符插入图像制作网页时还未选定需插入的图像，但确定了图像大小的时候，可以使用占位符来代替图像的方式插入到文档中。将图像确定后双击占位符，在打开的对话框中设置后插入即可。四、设置图像属性插入图像后可根据网页页面的需要在属性面板中编辑图像的属性，如图像的大小、对齐方式等。要设置图像的属性应首先选取该图像（选取图像后，图像四周会出现控制柄），然后打开属性面板，在属性面板中进行具体的设置。图像命名

为了在使用Dreamweaver行为（如交换图像）或脚本撰写语言（如JavaScript或VBScript）时可以引用该图像，可在属性面板的“图像”文本框中为图像命名。图像大小在Dreamweaver8中插入图像后系统会自动将图像的原始大小显示在“宽”和“高”文本框（以像素为单位）中。编辑图片

在网页中选择图像之后，单击属性面板中的按钮，打开图像处理软件，对图像进行处理。如果安装了Fireworks，那么Fireworks将被默认为图像处理软件。如果没有安装，用户也可自己设置使用其他软件中处理图像。

源文件设置在属性面板的“源文件”文本框中显示了图像的保存路径，如果要重新插入一幅新图像，可以在选取图像后的属性面板中的“源文件”文本框中重新输入要插入图像的地址，或单击右侧后的按钮，在打开的“选择图像源文件”对话框中重新选择需要的图像。文本说明

在选取图像后的属性面板的“替换”下拉列表框中可以输入图像的文本说明。图像与文本的对齐

选取图像后，在属性面板的“对齐”下拉列表框中可设置处于同一行上的图像与文本的对齐方式。图像边距

选取图像在属性面板的“垂直边距”和“水平边距”文本框中可以设置图像与页面上方和左侧之间的距离，也可以设置图像与其他网页元素之间的距离。图像边框

选取图像后，在属性面板的“边框”文本框中可以设置图像边框的宽度，单位为像素，“0”表示无边框。五、图像