创建和管理本地站点

 

1.  理解站点、网站、网页及网页属性的概念。

2.  掌握使用Dreamweaver CS3创建和组织管理站点的方法。

3.  了解创建Web服务器及虚拟目录的方法。。

 

 

 

 

创建和管理好本地站点是制作网页的基础,本地站点中要建立合适的文件夹来分类存放不同的网页对象。一个网站能否良好运行和方便维护与建站前网站的规划有着极为重要的关系。Dreamweaver有着强大的站点创建与管理功能,用户可以用它来完成Web站点的创建及网页文档的添加等工作。

 



※任务分析

在本地计算机上创建一个站点。站点文件夹为mwmw,站点名称为example

※相关知识

一.认识站点

一般来说,网页制作是在本地计算机上进行的,即需要在本地计算机上创建一个组织管理网页及相关内容的站点。当站点在本地计算机中调试成功后,再上传到Web服务器正式运行。此时网络中的任何一台计算机都可以使用浏览器浏览该站点中的信息了。

站点就是硬盘上的一个存储区(文件夹),它存储了一个网站中包含的所有网页文件和相关资源。Dreamweaver的使用是以站点为基础的。

它组织和管理站点中文件的方法是:在设计制作网页之前,为要处理的网站建立一个本地站点。将所有的网页文件及用到的素材文件(图像、动画、音频、视频等)存放到该站点下,以便在本地对这些文件进行管理和调试。站点中的全部网页制作并调试成功后再将站点整体传送到Web服务器中,供他人浏览。

二.常用的站点

Dreamweaver中常用的站点有三种:本地站点、远程站点、测试站点。

本地站点是指存放在本地计算机硬盘上的站点,一般来说是在设计制作网页过程中,将本地计算机当作服务器进行调试使用的站点。

远程站点是指存放在远程服务器(网络中的服务器)上的站点,是网站制作调试成功后,上传到远程服务器上的站点。

测试站点是用于测试动态网页的站点。需要将本地计算机设置成web服务器后,测试站点才能正常工作。

本书主要讲授静态网页的制作技术,不需要服务器端代码的支持。故此,只介绍本地站点的创建和使用。

※任务实施

一.创建站点

1.利用“我的电脑”在本地磁盘中(如F盘)新建一个名为“mwmw”的文件夹,并在“mwmw”文件夹中新建若干个子文件夹,分别用于存放不同类型的网页素材文件。如图2-1所示。

2.运行Dreamweaver CS3,单击“站点”菜单→“新建站点”,打开“站点定义”对话框

3.在对话框中的“您打算为您的站点起什么名字?”文本框中输入站点的名称“example”(可输入任何一个便于记忆的名称),另一文本框使用默认值。如图2-2所示。

   

◆图2-2  输入站点名称                          ◆图2-3选择服务器技术

4.单击“下一步”,弹出“example的站点定义为”对话框,选择“否,我不想使用服务器技术”,如图2-3所示。

5.单击“下一步”,在“您把文件存储在计算机的什么位置?”文本框处单击其右侧的文件定位按钮,定位到刚才创建的站点文件夹“F:\mwmw”,如图2-4所示。

6.单击“下一步”,在“您如何连接到远程服务器”下面选择“无”。如图2-5所示。

7.单击“下一步”,此时站点的创建工作已告完成,对话框中显示站点的整体信息,如图2-6所示。察看无误后,单击“完成”按钮。

站点创建后,Dreamweaver CS3窗口右侧的“文件”面板中会显示新建的站点信息,如图2-7所示。此面板中有站点的完整信息:站点的名称、站点所在的位置、站点的树形结构。

单击站点中各文件夹前的“”或“”可展开或折叠此文件夹。

随着工作的继续,今后我们还能在此面板中看到站点中的各个网页及与网页相关的图片、动画等各类素材文件。通过“文件”面板可以方便地管理站点中的对各种对象。

   

◆图2-4  选择站点存储位置                        ◆图2-5  如何连接服务器

        

         ◆图2-6  完成站点建立                         ◆图2-7  文件面板中的站点结构

二.管理站点及站点中的文件

1.通过“管理站点”对话框管理站点。

打开“管理站点”对话框,可用下例方法之一:

l         在“文件”面板中,单击站点文件夹下拉框,选择“管理站点”,打开“管理站点”对话框。如图2-8所示。

l         选择“站点”菜单→“管理站点”,打开“管理站点”对话框。

◆图2-8  管理站点对话框

在对话框中可进行站点的新建、复制、编辑、删除等操作,也可将别的站点导入到当前站点中。这些都是对站点整体操作,若要操作站点的文件夹或文件,则可通过“文件”面板来进行。

2.管理站点中的文件夹和文件。

站点文件夹是用来存放网站所有文件的,通常根据站点规划的要求,在此文件夹中建立多个子文件夹,并为这些子文件夹规范命名,用于分类存放站点中不同板块的网页文件或不同类型的素材文件。

本教材示例的站点文件夹中所建子文件夹的作用如表2-1所示。

2-1  站点中各文件夹存放的对象

文件夹

存放文件类型

站点文件夹

存放网页文件及各子文件夹。

conn文件夹

存放连接数据库的公共代码文件。

css文件夹

存放CSS层叠样式表文件。

data文件夹

存放网页所需的数据库文件。

images文件夹

存放图片素材文件。

js文件夹

存放JavaScript脚本文件。

music文件夹

存放声音(音乐)文件。

swf文件夹

存放Flash动画文件。

对站点中文件和文件夹的主要操作有:

⑴新建文件或文件夹

选择新建文件或文件夹所在的父文件夹,右击此文件夹名称,在快捷菜单中选择“新建文件”或“新建文件夹”,再输入文件或文件夹的名称,回车即可。

⑵复制文件或文件夹

右击该文件或文件夹名称,在快捷菜单中选择“编辑”→“拷贝”(Ctrl+C),再右击目标文件夹,在快捷菜单中选择“编辑”→“粘贴”(Ctrl+V),即可。

或右击该文件或文件夹名称,在快捷菜单中选择“编辑”→“复制”(Ctrl+D),即可。

⑶重命名文件或文件夹

右击该文件或文件夹名称,在快捷菜单中选择“编辑”→“重命名”,输入新的名称,回车即可。

⑷删除文件或文件夹

右击该文件或文件夹名称,在快捷菜单中选择“编辑”→“删除”(Del),确认即可。

⑸移动文件或文件夹

单击并拖动文件或文件夹到新的目标位置即可。

 



※任务分析

创建好站点后就需要为站点新建相关的网页了。创建如图2-9所示的网页作为站点的首页。

◆图2-9  图文并茂的站点首页

※相关知识

网页中的组成元素

网页由多种不同的元素组成,一般包含文本、图像、超链接、表格、层、表单、动画、音频、视频和脚 本程序等基本元素。

文本:文本是网页最基本的元素,网页内容主要是靠文本来表达的。文本字符所占的存储空间非常小,下载速度非常快。文本可以使用各种格式属性来修饰,还可以用脚本程序来产生各种动态效果。

图像:网页总是图文并茂的,合理的图像布局能给人以强烈的视觉冲击效果。所以图像是网页中必不可少元素。网页中常用的图像格式有JPGGIFPNG等。

超链接:网页中海量的信息是通过超链接来实现联系的。用户单击网页中的超链接浏览器就会打开与之关联的网页或信息点。超链接实现了网页的跳转,将独立的网页连成了无边无际的信息的海洋,使得网页与网页、网站与网站之间相互连接成为一个有机的整体。

表格:表格在网页中主要用于清晰的显示各类数据和进行页面布局,应用十分方便。

层:层一般与CSS(层叠样式表)结合使用,进行页面布局。其应用十分灵活,修改方便,可以页面的任意可显示区域布局层。相对于表格的布局功能而言,更能代表网页布局技术的发展方向。

表单:主要用于收集用户输入的数据,实现网页的动态交互功能。所以表单主要应用于动态网页中。

动画:动画可以让网页更生动活泼,丰富视觉效果。网页中常用的动画文件格式有GIFSWFGIF动画最多只能正常显示256种颜色的画面,而SWFFlash动画,可以显示真彩色动画。

音频:音频对象是网页中人机交互的又一种重要元素,丰富了网页的功能。音频文件主要有WAVMIDIMP3等。

视频:与音频对象一样,是网页中人机交互的又一种重要元素,丰富了网页的功能,使得网页的多媒体功能更全面,更精彩,更实用。视频文件的格式主要有RMAVIMPGFLV等。视频信息一般都需要客户端安装相应的插件才能正常播放。

※任务实施

一.创建和保存网页

1.通过“我的电脑”或“资源管理器”收集图片素材(从“项目素材\project02文件夹中复制)到站点文件夹mwmw中的images文件夹中。图片文件分别是top01.jpgbg.jpgindex.jpg

2.运行Dreamweaver CS3,在“文件”面板中右击站点文件夹名称,在快捷菜单中选择“新建文件”,再输入文件的名称为“index.html”,回车。

3.双击index.html文件,在Dreamweaver的文档编辑区中就会打开这个空白的新网页。

4.设置网页背景图案。在“属性”面板中单击“页面属性”按钮,在打开的如图2-10所示的“页面属性”对话框中,单击“背景图像”后的“浏览”按钮,打开“选择图像源文件”对话框,选择bg.jpg文件,如图2-11所示。

单击“确定”。返回“页面属性”对话框中。输入上边距和下边距分别为10像素,左边距和右边距分别为2像素。单击“确定”按钮。

 

  ◆图2-10  页面属性对话框                ◆图2-11  选择图像源文件

5.设置网页标题。在文档工具栏中的“标题”框中输入网页的标题“每味美味酒店”。

6.向网页中添加图片。单击“属性”面板中的“居中”按钮,使得当前行为居中对齐。在窗口右侧的“文件”面板中展开“images”文件夹,单击并拖动top01.jpg文件到网页中。

Shift+回车键,再用同样的方法将图片文件index.jpg拖放到网页中来,居中对齐。

7.输入文本。插入图片后,按回车键,在图片下方添加一个空段落,输入文本“点击进入……”。

8.设置文本格式。选中刚输入的这串文字,在“属性”面板中设置文本“大小”为24,颜色为“#FFFF80

9.保存,并浏览网页。按Ctrl+S保存网页文件,按F12浏览网页文件。

二.打开和关闭网页文件

1.打开网页文件的方法有:

l         在“文件”面板中双击该文件。

l         单击“文件”菜单→“打开”,在弹出的“打开”对话框中选择文件后,单击“打开”按钮。

2.关闭网页文件的方法有:

l         单击文档窗口右上角的“关闭”按钮

l         单击“文件”菜单→“关闭”,关闭当前文件。

l         单击“文件”菜单→“全部关闭”,关闭所有已打开的文件。



※任务分析

如果要在本地计算机上调试网页,特别是动态网页,就需要将自己的计算机设置成一台Web服务器。那么,怎样做才能配置这样的一台Web服务呢?下面以Windows XP操作系统为例来介绍配置方法。

※相关知识

什么是Web服务器

Web服务器也称为HTTP服务器,又叫WWWWorld Wide Web——环球信息网)服务器。主要功能是根据网页浏览器的请求提供各种网页服务——即将服务器中的网页传送给客户端,供其浏览。Windows系统提供了自带的Web服务器组件——IISInternet Information Server——互联网信息服务),具有强大的InternetIntranet服务功能,如Web服务、FTP服务、SMTP服务等。

Web服务器拥有一个主目录(文夹件)和若干虚拟目录用于发布站点。一般情况下,网站的内容都组织存放在一个目录,这个目录就称为主目录。默认的主目录是C:\Inetpub\wwwroot,我们可以将其设置成其他目录,比如我们之前建立的站点(F:\mwmw)。

※任务实施

一.在Windows操作系统中安装Web服务器

安装IIS之前要准备好系统安装盘,或者使用IIS安装包。具体步骤如下:

1.依次单击“开始”按钮→“设置”→“控制面板”,打开“控制面板”窗口,如图2-12。选择“添加/删除程序”。在“添加或删除程序”中选择“添加/删除Windows组件”。

2.在打开的“Windows组件向导”中选择“Internet信息服务”,如图2-13所示。

3.单击“下一步”,系统进入安装过程。如图2-14所示。

4.稍候会弹出“插入磁盘”对话框,如图2-15所示。

   

      ◆图2-12  控制面板                       ◆图2-13  Windows组件向导

 

◆图2-14  安装过程                        ◆图2-15 提示插入系统安装盘

5.单击“确定”按钮,弹出“所需文件”对话框,如图2-16所示。单击“浏览”按钮定位到安装包所在的文件夹后,单击“确定”按钮,安装继续。

6.稍候,安装成功。如图2-17所示。单击“完成”按钮即可。

 

◆图2-16 “所需文件”对话框                   ◆图2-17  完成安装

二.设置IIS信息服务

现在我们来对IIS进行本机设置。步骤如下:

1.仍然使用“控制面板”窗口,选择“性能与维护”,打开“性能与维护”对话框,如图2-18所示。

2.选择“管理工具”,打开“管理工具”对话框,如图2-19所示。

3.选择“Internet信息服务”,打开“Internet信息服务”,如图2-20所示。对“网站”进行展开,在右窗格中可以看到默认站点中的网页文件。

4.右击左窗格中的“默认网站”,在快捷菜单中选择“属性”,打开“默认网站 属性”对话框。如图2-21所示。

 

◆图2-18  “性能维护”窗口                ◆图2-19“管理工具”窗口

 

 ◆图2-20 Internet信息服务”对话框             ◆图2-21  “默认网站 属性”对话框

5.为网站设置“主目录”。选择“主目录”选项卡,设置主目录的本地路径为我们事先创建的网站文件夹(F:\mwmw),如图2-22所示。

6.为网站设置默认的首页文件。选择“文档”选项卡,保证“启用默认文档”为选中状态。单击右侧的“添加”按钮,在弹出的“添加默认文档”对话框中,输入我们网站中已经存的文件“index.html”作为网站的默认首页文件,如图2-23所示。

7.设置默认文档的优先级。添加默认文档后,该选项卡中的文件列表框中会显示当前已经设置的默认文件。单击左侧的按钮可以设置默认文档的优先级,如图2-24所示。处于上方的文档优先于处于下方的文档。

注:文档优先级是指,在网站中如果同时存在文档列表中的多个网页文件时,Web服务优先认定哪个为首页文档,并传送给客户端。

8.单击“确定”按钮即设置好本地IIS服务器。

     

◆图2-22  设置主目录                           ◆图2-23  添加默认文档

打开IE浏览器后,在地址栏中输入“localhost”即可浏览本地网站中的首页,如图2-25所示。

 

◆图2-24  设置默认文档优先级       ◆图2-25  使用localhost地址浏览本地网站

 






一.参照任务1的做法,在Dreamweaver CS3中创建自己的站点。站点文件夹为E:盘的exercise,站点中子文件夹的创建参照任务1。站点名称使用自己的姓名或其他便于记忆的名称。这个站点就是我们今后实作课的默认站点。

二.参照任务2所介绍的方法及图2-26所示的效果,在站点中新建一个网页,作为网站的首页保存为index.html。网页素材从教材的练习素材文件夹exercise02中获取。

◆图2-26  “茗香绿长”香茗专卖网站

三.参照任务3的做法,在本地计算机中安装IIS服务器组件。并能正确使用localhost作为地址在IE浏览中浏览网站首页。

 



一.填空题

1.站点就是硬盘上的一个______________________

2Dreamweaver中常用的站点有三种:______________________________

3Dreamweaver中,选择“________”菜单中的“______________”后就可以在打开对话框中根据向导逐步进行创建站点的操作。

4Web服务器拥有一个___________________和若干_______________用于发布站点。

二.选择题

1.下列方法中能打开Dreamweaver的“站点管理”对话框的是(    )。

A)通过“文件”面板中的“管理站点”。

B)选择“站点”菜单中的“管理站点”菜单项。

C)选择“插入”栏中的“管理站点”项。

D)选择“文件”菜单中的“管理站点”菜单项。

2Web服务器也称作(    )。

AIIS服务器     BWWW服务器        CHTTP服务器       DInternet服务器

3.下列关于IIS设置的说法正确的是(    )。

A)使用“IIS信息服务”对话框不仅能设置Web服务,也能设置FTP等网络服务功能。

B)使用“IIS信息服务”对话框,不能建立多个Web网站。

C)使用“IIS信息服务”对话框,能建立多个Web网站,并能同时启动这些网站。

D)使用“IIS信息服务”对话框,能建立多个Web网站,但一次只能启动一个网站。

三.简答题

1.简述在Dreamweaver中创建站点的一般步骤。

2.简述在Windows系统中安装IIS组件的一般步骤。