2024年2月18日发(作者：)

第一部分：网络编辑实务之一网站建设

第一章 网站规划与网页设计

第一节 站点建设

教学目的：站点规划与站点的创建，是为网页制作前必须进行的设计，以便以后对整个网站维护与管理。是极其重要前提。

时间安排：4课时

教学重点：站点建设

教学方式：讲授+指导

教学过程：

序言

DW是美国著名的多媒体软件开发商MACROMEDIA公司推出的一套专业可视化网页开发工具。它与FLASH、FIREWORKS并称为“网页三剑客”，其中FALSH是用来制作网页动画，FIREWORKS是用来网页图像制作，而DW是用于网页开发，可以用于各类素材的集成与发布，可视性强，而且支持FLASH、SHOCKWAVE、ACTIVE等许多外部媒体的发布，再加上使用简单、方便，到目前为止，全世界范围超过60%的专业网页设计师都在使用这款软件来开发网页，编织他们的梦想。

界面如下

●菜单栏：包含10类主菜单，涵盖了几乎DW所有的功能。

●插入栏，包含很多可以插入的按钮。

●文档工具栏：提供各种文档窗口的视图（如“设计”视图和“代码”视图）

●文档窗口：显示当前创建和编辑的文档。

1

●属性面板：用于查看和设置属性

●面板组：是各种面板的组合，不需要的可以暂时关闭。

知识点：

规划站点：

DW是一个创建站点和管理站点工具，因为使用它不仅可以制作精美WEB网页，而且可以创建完整的WEB站点。为了达到最好效果，在设计网页之前，首先都必须对站点进行设计和规划。这个规划包括站点结构和导航系统的规划，网页模板和库的使用等等。

站点规划好之后，就可以根据规划绘制出一个网站结构草图，以便于有一个清晰的思路。

如何创建站点。

在正式开始制作网页之前呢，最好先定义一个新网站。这样做目的是可以利用站点窗口对站点文件进行管理。也可以尽可能减少一些错误出现。比如路径出错或者链接出错。（特别是对于我们这些初学者，更要注意条理性与结构性，一个文件放这里，另外一放那里。或者所有文件都放在同一文件夹里，这样显得很乱，而且容易出错,所以创建站点是非常必要的。

1、创建本地站点

所谓本地站点就是本地硬盘中存放远程网站所有文档的地方（文件夹）。建立网站的通常做法是：在本地硬盘建立一文件夹用来存放网站的所有文件，以后就直接在这个文件夹中创建和编辑文档，那么等待网页设计和测试好之后，再把他们拷贝到网站上提供给浏览者来浏览。

也即：在Dreamweaver中制作网站，您必须定义一个本地站点，它是您的计算机上任意位置的一个文件夹。之所以一定要定义它，是为了告诉Dreamweaver您的文件存放位置，然后Dreamweaver就会将所有的设置针对该地址设置。

具体操作为：

步骤1：在本地硬盘上建立一个用来存放站点的文件夹，这个文件夹就是本地站点的根目录。这个站点可以是空的，也可以是非空的。

步骤2：基本：

1．站点→管理站点— 新建站点→基本（基本选项是指导用户一步一步地完成站点设置，如果用户宁愿在没有指导情况下编辑站点信息，则可以随时单击高级选项卡）—站点

2

名称（为你的网站建立一个名字，这个名字仅仅起到识别的作用，不会在浏览器上显示，与网站发布后真正的名字无关，例如，这里起名叫“My Site”，而实际上我的网站的名字叫“雅心居”）→在对话框中选择是否使用服务器技术--------因为我们现在建立是一个静态站点，因为选择否，我不想使用服务器技术---下一步---默认编辑到我计算机上本地副本----点击本地根文件夹框右边的文件夹标志，在你的硬盘上查找并选择相应的文件夹（即设置站点在本地硬盘的位置，在硬盘上选择一个目录来存放站点的文件目录）（提示最好选择E或者F盘，不要放C盘）→不连接服务器---完成）.

注意：站点文件夹的名称必须是小写英文字母，不允许有空格和汉字，比如：c:mywebs

高级：图示如下

如图：

2．点击OK，本地站定义完成，Dreamweaver会自动导入站点的所有文件及信息。您可以在站点视窗中的本地站点窗口中查看。

2、定义远程站点

我们学习了如何创建本地站点，但要别人浏览到网站，还必须把本地站点内容放到远程服务器上。浏览者通过单击网站域名或IP地址，才能浏览到网站上内容，所以创建远程站点，进行网站上传可以说是建设网站的最终步骤。无论您制作的是个人主页还是公司网站，所有的文件都需要上传到网站服务器才能提供给访问者。在Dreamweaver中内置了FTP工具，因此你无须切换到其他软件就可以连接网站主机，上传更新您的站点。

FTP：（File Transfer Protocol）,文件传输协议.

要使用Dreamweaver中的FTP功能，就必须定义站点的外部信息，具体操作方法为：

3

1．管理站点——编辑站点——远程信息——在访问下拉菜单里选择 FTP 方式

2．根据上传空间服务商提供的信息来填写相关的信息。输入FTP相关信息例如： FTP主机地址（比如：）、主机目录或默认的远端文件夹(/public_html)、FTP登录用户名(申请时的用户名)、Password（FTP登录密码）

下图为定义FTP方式示例：

图：定义FTP方式的外部站点

如果您是在局域网内操作不需要FTP方式，您可以选择 本地网络 方式。或者您已经熟悉使用其他的FTP软件而不愿意使用Dreamweaver内置的FTP功能，因此您可能只是在本地机操作，但我仍然建议您选择此方式定义一个外部文件夹，从而起到备份站点文件的作用。

与FTP定义方式相类似，您只需要在 访问中选择本地/网络 方式，然后选择一个远端文件夹。

3.点击连接到远端主机。如果连接上了，左边显示远端站点的内容，右边显示本地站点的内容。新建站点到此结束。

4.打开本地站点和编辑站点属性

管理站点—编辑---进行编辑

4

第二节 站点内容编辑

一、创建站点文件

1．打开站点，在站点下建立文件。右键单击站点文件夹→新建文件→（我们给这个无标题页面起个名字，一般情况下首页的名字是“”。浏览器打开某个网站，一般是先找“”，再找“”这个顺序是服务器决定的，而且绝大多数服务器都遵循这个原则，而且一般用户是无权修改这种设定。所以在制作网站的时候，我们最好把网站的第一页命名为或.

2.把修改为(主页),双击主页文件，回到编辑区域，在标题栏里输入名字：我的主页，然后保存（ctrl+s）.

注意：①页面的名称必须是小写的英文字母。②htm是文件的后缀，也就是这网页文件的类型说明，表示这个网页是静态的htm文件，也可以用后缀html表示，以后大家一定记住将网页的后缀改为htm或html，否则上传到服务器上，浏览器就无法打开上传的网页。

3． 同1，2,分别建立不同的页面。比如：;;.,并分别回到编辑区域给标题命名与保存。

4． 在站点地图中显示文件标题

站点面板中——视图——站点地图--------显示网页标题。

二、创建站点下的文件夹

右键单击站点文件夹→新建文件夹。比如：image,flash,等。文件夹不需要保存。

提示：文件夹与文件的名称不允许出现汉字和标点符号

三、查看站点地图：

查看站点地图是在Dreamweaver 8的“文件”面板的“视图”下拉列表框中选择“地图视图”选项。

四、编辑网页文件

1．双击我的主页，进入编辑区域。打开窗口属性面板。（在网页编辑中，经常打开是属性面板与站点文件夹）

2． 修改——页面属性——选择页面背景的图片与颜色等——确定。

①在页面输入文字。比如：

我的主页 我的兴趣 我的相册 我的简历

②设置文字属性。选中文字——在下面属性面板设置其属性（颜色、大小、粗细、位置）。

5

添加各种字体

关于字体：

注意：别人的系统上未必装有与你相同的字体，所以不要将一些特殊的字体加到列表中使用，如果真需要特殊字体，必须做成图片之后再使用。（民生学院主页文字显示）

关于换行：

（1）换行

① 自动换行：在输入文字时，若某一行的长度超过了Dreamweaver窗口的显示范围，文字将自动换到下一行。

② 利用“Enter”键换行：在输入文字后按“Enter”键，文字成段，且上下段之间空一行。

③ 利用“Shift+Enter”键换行：如果想要将文字手动换行，中间又不能出现空白行，可以按“Shift+Enter”键。

3.图片的插入与应用

将插入点放到文档中要插入对象的位置上。选择对象面板上的图像按钮，这时就出现一个对话框，要求你从磁盘上选择对象文件。选择要插入的图像文件，同时在对话框里设置url的类型。此时出现一个对话框：你愿意将该文件复制到你的根文件夹里吗？点确定。保存到站点文件夹里的image文件夹里。在文档里出现插入的图片。修改属性。保存，浏览效果。

提示：GIF和JPEG是网页上常用的图象文件格式，在使用时采用以下规则：需要图片保存为透明的背景，或者希望图象在显示时交错出现，或者是颜色不多，线条清楚的图片，选择GIF格式；而全彩的连续色调，没有明显边缘的图，则应选择JPEG格式。

4.动画插入与应用 .swf

将插入点放到文档中要插入对象的位置上。选择对象面板上的FLASH按钮，这时就出现一个对话框，要求你从磁盘上选择对象文件。选择要插入的动画文件，同时在对话框里设置url的类型。此时出现一个对话框：你愿意将该文件复制到你的根文件夹里吗？点确定。（只有当flash文件在站点下的根文件夹里，才能在你所制作的网页上正常显示），然后保存在站点文件夹的flash文件夹里。（如果没有flash文件夹，可以在此时建立，要养成不同的文件放入不同文件夹的习惯）保存过后，FLASH动画就插入文档中了，在属性面板上播放，并调整动画的宽高。保存，F12浏览效果。

注意：FLASH动画必须是SWF格式，名称不能有中文显示。

5.视频的插入与应用：asf格式、wmv格式使用mediaplayer进行播放，要不就是rm格式用RealPlayer播放。

480*360 ，420*363,320*240

WAV格式视频：插入——媒体-------ActiveX————属性设置如图

FLV格式视频：插入——媒体------FLASH视频————属性设置如图

6

效果图：

6.插入水平线。

有时，但靠段落来区分文章是不够的，这时需要插入一条分隔线，使页面区分更鲜明。选择要插入的地方，然后选择对象面板里水平线按钮直接插入。可以通过属性面板来修改其的长宽，极其所在的位置。

7.插入E—Mail 选择对象面板上的插入邮件按钮，输入文本与邮件地址。

8.插入特殊符号

四、超链接：

超链接简介

超链接是WWW技术的核心，是网页中最重要、最根本的元素之一。超链接能够使多个孤立的网页之间产生一定的相互联系，从而使单独的网页形成一个有机的整体。

（1）什么是超链接

7

所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。

按照链接路径的不同，网页中超链接一般分为以下3种类型： 内部链接、锚点链接和外部链接。

如果按照使用对象的不同，网页中的链接又可以分为：文本超链接、图像超链接、E-mail链接、锚点链接、多媒体文件链接、空链接等。

（2）合理安排超链接

合理安排超链接在网页的制作中是非常重要的。采用什么结构的链接会直接影响到网页的布局。

在这里给大家一些设计链接的建议。

①避免孤立文件的存在：应该避免存在孤立的文件，这样能使将来在修改和维护链接时有清晰的思路。

②在网页中避免使用过多的超级链接：在一个网页中设置过多超链接会导致网页的观赏性不强，文件过大。如果避免不了过多的超链接，可以尝试使用下拉列表框、动态链接等一些链接方式。

③网页中的超链接不要超过4层：链接层数过多容易让人产生厌烦的感觉，在力求做到结构化的同时，应注意链接避免超过4层。

④页面较长时可以使用书签：在页面较长时，可以定义一个书签，这样能让浏览者方便地找到想要的信息。

⑤设置主页或上一层的链接：有些浏览者可能不是从网站的主页进入网站的，设置主页或上一层的链接，会让浏览者更加方便地浏览全部网页。

1.文字链接：链接硬盘上的文件：选中文字——属性面板——链接后的文件夹选择站点文件夹选择index文件（或者站点下的图片）——保存——F12（浏览）——OK.

2.图片链接 热点链接

a. 选中---属性---设置链接地址

b. 热点链接 ：建立热区，插入一新的图片——属性面板——地图：有三个热区，选择其中一个在图像上建立热区，设置热区属性；目标：_blank.链接：硬盘上图片或者其它有效地址。保存，F12浏览。

c.插入交互式图象。

插入——交互式图象-----鼠标经过图像——选择原始图像，鼠标经过的图像，输入文本解释，链接地址，确定，并保存，F12浏览。

3.网站链接：

在页面上输入[新浪][网易]等

选中[新浪]——属性面板——链接后直接输入地址：.——确认，恩回车键——CTRL+S存盘——F12浏览效果。

4.邮箱链接：

[给我联系][联系我们]

选中文字——属性面板——链接后——mailto:***************.——Ctrl+S存盘——F12浏览效果.

5.文件链接：WORD， PDF，文件下载

8

6.创建空链接

空链接是一个未指定目标的链接，Dreamweaver 的行为面板中列出了许多行为，这些行为相当于使用JavaScript编写的程序或函数，要想对文本设置行为，首先为文本建立空链接，这样行为才有效。

为文本建立超链接时，只要先在文档窗口选定文本，然后在属性面板中的“链接”栏中输入一个数值符“#”即可。建立空链接的目的就是为了应用行为，其他情况下不必建立空链接。

7.创建锚点链接

在一些内容很多的网页中，设计者常常在该网页的开始部分以网页内容的小标题作为超链接。当浏览者单击网页开始部分的小标题时，网页将跳到内容中的对应小标题上，免去浏览者翻阅网页寻找信息的麻烦。其实，这是在网页中的小标题添加了锚点，再通过对锚点的链接来实现的。

锚点，也称为书签，用来标记文档中的特定位置，使用其可以跳转到当前文档或其他文档中的标记位置。在网页中加入锚点包括两方面的工作，一是在网页中创建锚点，另一个是为锚点建立链接。

创建锚点的步骤如下：

将光标移到需要加入锚点的地方，一般是将光标放置在一行或是一段文字的开头部分；点击

在弹出的对话框中输入相应的锚点名称。单击“确定”按钮。 执行完上述操作之后，则在光标处出现一个代表锚点的图标。

锚点命名要求：

① 只能使用字母和数字，锚点命名不支持中文。虽然在插入锚点对话框中能输入中文，但在属性面板上显示的则是一堆乱码，且在为锚点添加链接的时候，也无法工作。

② 锚点名称的第1个字符最好是英文字母，一般不要以数字做为锚点名称的开头。

③ 锚点名称区别英文字母的大小写。

④ 锚点名称间不能含有空格，也不能含有特殊字符。

链接锚点

①创建锚点后，还必须链接锚点。选择想要链接到锚点的文字或图片

②在属性面板中的“链接”文本框中，输入“#”和锚点名称。或者在属性面板中拖拽“指向文件”，移动鼠标到相应的锚点位置上。

在链接锚点时，应注意以下事项：

① 在#和锚点名之间不要留有空格，否则链接会失败。 符号#必须是半角符号，而不能为全角符号

作业与练习：

1． 建立站点

2． 编辑站点下的文件

3． 如何实现图文混排？

在DW里面首先在文本中间位置直接插入相应的图片,之后,设置图片属性框的 "对齐"选项.左对齐或右对齐，自己看效果

教后小结：

注意事项：

1. 站点根文件夹不允许有汉字和标点符号，空格，只能是英文小写字母

2. 所有的站点下文件名称不允许出现中文汉字，可以是字母或者数字，否则，

9

在浏览器下页面不能正常显示。

3. 每做一步，需要保存CTRL+S，浏览效果F12

4. 练习水平线和特殊字符的插入

10