项目 2 创建和管理本地站点

1. 项目2 创建和管理本地站点

2. 任务1 创建和管理本地站点 任务2 在站点中创建网页 项目2 创建和管理本地站点 任务3 安装与配置本地Web服务器 ...... ......

3. 任务1 创建和管理本地站点 任务分析 在本地计算机上创建一个站点。站点文件夹为mwmw，站点名称为example。

4. 任务1 创建和管理本地站点 一．认识站点 站点就是硬盘上的一个存储区（文件夹），它存储了一个网站中包含的所有网页文件和相关资源。Dreamweaver的使用是以站点为基础的。 它组织和管理站点中文件的方法是：在设计制作网页之前，为要处理的网站建立一个本地站点。将所有的网页文件及用到的素材文件（图像、动画、音频、视频等）存放到该站点下，以便在本地对这些文件进行管理和调试。站点中的全部网页制作并调试成功后再将站点整体传送到Web服务器中，供他人浏览。

5. Dreamweaver中常用的站点有三种：本地站点、远程站点、测试站点。Dreamweaver中常用的站点有三种：本地站点、远程站点、测试站点。 任务1 创建和管理本地站点 二．常用的站点 本地站点是指存放在本地计算机硬盘上的站点，一般来说是在设计 制作网页过程中，将本地计算机当作服务器进行调试使用的站点。 远程站点是指存放在远程服务器（网络中的服务器）上的站点，是 网站制作调试成功后，上传到远程服务器上的站点。 测试站点是用于测试动态网页的站点。需要将本地计算机设置成 web服务器后，测试站点才能正常工作。

6. 任务1 创建和管理本地站点 三．创建站点 1．利用“我的电脑”在本地磁盘中（如F盘）新建一个名为“mwmw”的文件 夹，并在“mwmw”文件夹中新建若干个子文件夹，分别用于存放不同类型 的网页素材文件。 2．运行Dreamweaver CS3，单击“站点”菜单→“新建站点”，打开“站点 定义”对话框 3．在对话框中的“您打算为您的站点起什么名字?”文本框中输入站点的名称 “example”(可输入任何一个便于记忆的名称)，另一文本框使用默认值。 4．单击“下一步”，弹出“example的站点定义为”对话框，选择“否，我不想 使用服务器技术”。

7. 任务1 创建和管理本地站点 三．创建站点 5．单击“下一步”，在“您把文件存储在计算机的什么位置？”文本框处单击 其右侧的文件定位按钮，定位到刚才创建的站点文件夹“F:\mwmw”。 6．单击“下一步”，在“您如何连接到远程服务器”下面选择“无”。 7．单击“下一步”，此时站点的创建工作已告完成，对话框中显示站点的整体 信息，察看无误后，单击“完成”按钮。

8. 站点创建后，Dreamweaver CS3窗口右侧的“文件”面板中会显示新建的站点信息，如右图所示。此面板中有站点的完整信息：站点的名称、站点所在的位置、站点的树形结构。 单击站点中各文件夹前的“”或“”可展开或折叠此文件夹。 任务1 创建和管理本地站点 三．创建站点

9. 1．管理站点 在对话框中可进行站点的新建、复制、编辑、删除等操作，也可将别的站点导入到当前站点中。这些都是对站点整体操作，若要操作站点的文件夹或文件，则可通过“文件”面板来进行。 任务1 创建和管理本地站点 四．管理站点 • 在“文件”面板中，单击站点文件夹下拉框，选择“管理站点”，打开“管理站点”对话框。 • 选择“站点”菜单→“管理站点”，打开“管理站点”对话框。

10. 2．管理站点中的文件夹和文件 站点文件夹是用来存放网站所有文件的，通常根据站点规划的要求，在此文件夹中建立多个子文件夹，并为这些子文件夹规范命名，用于分类存放站点中不同板块的网页文件或不同类型的素材文件。 任务1 创建和管理本地站点 四．管理站点 站点中各文件夹存放的对象 • 通过“文件”面板来管理站点的文件夹或文件。 • 对站点中文件和文件夹的主要操作有：新建 文件或文件夹、复制文件或文件夹、重命名文件 或文件夹、删除文件或文件夹 返回

11. 任务2 在站点中创建网页 任务分析 创建好站点后就需要为站点新建相关的网页了。创建站点的首页。

12. 网页由多种不同的元素组成，一般包含文本、图像、超链接、表格、层、表单、动画、音频、视频和脚本程序等基本元素。网页由多种不同的元素组成，一般包含文本、图像、超链接、表格、层、表单、动画、音频、视频和脚本程序等基本元素。 任务2 在站点中创建网页 一．网页中的组成元素 文本：文本是网页最基本的元素，网页内容主要是靠文本来 表达的。文本字符所占的存储空间非常小，下载速度非常快。 文本可以使用各种格式属性来修饰，还可以用脚本程序来产生 各种动态效果。 图像：网页总是图文并茂的，合理的图像布局能给人以强烈的 视觉冲击效果。所以图像是网页中必不可少元素。网页中常用 的图像格式有JPG、GIF、PNG等。 超链接：网页中海量的信息是通过超链接来实现联系的。用户 单击网页中的超链接浏览器就会打开与之关联的网页或信息点。 超链接实现了网页的跳转，将独立的网页连成了无边无际的信 息的海洋，使得网页与网页、网站与网站之间相互连接成为一个 有机的整体。

13. 网页由多种不同的元素组成，一般包含文本、图像、超链接、表格、层、表单、动画、音频、视频和脚本程序等基本元素。网页由多种不同的元素组成，一般包含文本、图像、超链接、表格、层、表单、动画、音频、视频和脚本程序等基本元素。 任务2 在站点中创建网页 一．网页中的组成元素 表格：表格在网页中主要用于清晰的显示各类数据和进行页面 布局，应用十分方便。 层：层一般与CSS（层叠样式表）结合使用，进行页面布局。 其应用十分灵活，修改方便，可以页面的任意可显示区域布局层。 相对于表格的布局功能而言，更能代表网页布局技术的发展方向。 表单：主要用于收集用户输入的数据，实现网页的动态交互功能。 所以表单主要应用于动态网页中。

14. 网页由多种不同的元素组成，一般包含文本、图像、超链接、表格、层、表单、动画、音频、视频和脚本程序等基本元素。网页由多种不同的元素组成，一般包含文本、图像、超链接、表格、层、表单、动画、音频、视频和脚本程序等基本元素。 任务2 在站点中创建网页 一．网页中的组成元素 动画：动画可以让网页更生动活泼，丰富视觉效果。网页中常用 的动画文件格式有GIF和SWF。GIF动画最多只能正常显示256 种颜色的画面，而SWF是Flash动画，可以显示真彩色动画。 音频：音频对象是网页中人机交互的又一种重要元素，丰富了网 页的功能。音频文件主要有WAV、MIDI、MP3等。 视频：与音频对象一样，是网页中人机交互的又一种重要元素， 丰富了网页的功能，使得网页的多媒体功能更全面，更精彩，更 实用。视频文件的格式主要有RM、AVI、MPG、FLV等。视频 信息一般都需要客户端安装相应的插件才能正常播放。

15. 任务2 在站点中创建网页 二．创建和保存网页 1．通过“我的电脑”或“资源管理器”收集图片素材（从“项目素材\project02”文件夹中复制） 到站点文件夹mwmw中的images文件夹中。图片文件分别是top01.jpg、bg.jpg和index.jpg。 2．运行Dreamweaver CS3，在“文件”面板中右击站点文件夹名称，在快捷菜单中选择“新建文件”， 再输入文件的名称为“index.html”，回车。 3．双击index.html文件，在Dreamweaver的文档编辑区中就会打开这个空白的新网页。

16. 任务2 在站点中创建网页 二．创建和保存网页 4．设置网页背景图案。在“属性”面板中单击“页面属性”按钮，在打开的 “页面属性”对话框 中，单击“背景图像”后的“浏览”按钮，打开“选择图像源文件”对话框，选择bg.jpg文件，单击 “确定”。返回“页面属性”对话框中。输入上边距和下边距分别为10像素，左边距和右边距分别为 2像素。单击“确定”按钮。 5．设置网页标题。在文档工具栏中的“标题”框中输入网页的标题“每味美味酒店”。 6．向网页中添加图片。单击“属性”面板中的“居中”按钮，使得当前行为居中对齐。在窗口右侧的 “文件”面板中展开“images”文件夹，单击并拖动top01.jpg文件到网页中。 按Shift+回车键，再用同样的方法将图片文件index.jpg拖放到网页中来，居中对齐。

17. 任务2 在站点中创建网页 二．创建和保存网页 7．输入文本。插入图片后，按回车键，在图片下方添加一个空段落，输入文本“点击进入……”。 8．设置文本格式。选中刚输入的这串文字，在“属性”面板中设置文本“大小”为24，颜色为 “#FFFF80”。 9．保存，并浏览网页。按Ctrl+S保存网页文件，按F12浏览网页文件。

18. 任务2 在站点中创建网页 网页的预览效果 返回

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

20. Web服务器也称为HTTP服务器，又叫WWW（World Wide Web——环球信息网）服务器。主要功能是根据网页浏览器的请求提供各种网页服务——即将服务器中的网页传送给客户端，供其浏览。Windows系统提供了自带的Web服务器组件——IIS（Internet Information Server——互联网信息服务），具有强大的Internet和Intranet服务功能，如Web服务、FTP服务、SMTP服务等。 任务3 安装与配置本地Web服务器 一．什么是Web服务器 Web服务器拥有一个主目录（文夹件）和若干 虚拟目录用于发布站点。一般情况下，网站的 内容都组织存放在一个目录，这个目录就称为 主目录。默认的主目录是C:\Inetpub\wwwroot， 我们可以将其设置成其他目录，比如我们之前 建立的站点（F:\mwmw）。

21. 安装IIS之前要准备好系统安装盘，或者使用IIS安装包。 任务3 安装与配置本地Web服务器 二．在Windows操作系统中安装Web服务器 1．依次单击“开始”按钮→“设置”→“控制面板”，打开 “控制面板”窗口，选择“添加/删除程序”。在“添加或 删除程序”中选择“添加/删除Windows组件”。 2．在打开的“Windows组件向导”中选择“Internet信息服务”。

22. 任务3 安装与配置本地Web服务器 二．在Windows操作系统中安装Web服务器 3．单击“下一步”，系统进入安装过程。 4．稍候会弹出“插入磁盘”对话框。

23. 任务3 安装与配置本地Web服务器 二．在Windows操作系统中安装Web服务器 5．单击“确定”按钮，弹出“所需文件”对话框， 单击“浏览”按钮定位到安装包所在的文件夹后， 单击“确定”按钮，安装继续。 6．稍候，安装成功。单击“完成”按钮即可。

24. 现在我们来对IIS进行本机设置。 任务3 安装与配置本地Web服务器 三．设置IIS信息服务 1．仍然使用“控制面板”窗口，选择“性能与维护”， 打开“性能与维护”对话框。 2．选择“管理工具”，打开“管理工具”对话框。

25. 任务3 安装与配置本地Web服务器 三．设置IIS信息服务 3．选择“Internet信息服务”，打开“Internet信息服务”，对“网站”进行展开，在右窗格中可以看到默认站点中的网页文件。

26. 任务3 安装与配置本地Web服务器 三．设置IIS信息服务 4．右击左窗格中的“默认网站”，在快捷菜单中选择 “属性”，打开“默认网站 属性”对话框。

27. 任务3 安装与配置本地Web服务器 三．设置IIS信息服务 5．为网站设置“主目录”。选择“主目录”选项卡， 设置主目录的本地路径为我们事先创建的网站文件夹 （F:\mwmw）

28. 任务3 安装与配置本地Web服务器 三．设置IIS信息服务 6．为网站设置默认的首页文件。选择“文档”选项卡，保证 “启用默认文档”为选中状态。单击右侧的“添加”按钮，在 弹出的“添加默认文档”对话框中，输入我们网站中已经存的 文件“index.html”作为网站的默认首页文件。 7．设置默认文档的优先级。添加默认文档后，该选项卡中的 文件列表框中会显示当前已经设置的默认文件。单击左侧的 或 按钮可以设置默认文档的优先级，处于上方的文档优先 于处于下方的文档。

29. 打开IE浏览器后，在地址栏中输入“localhost”即可浏览本地网站中的首页，如图所示。打开IE浏览器后，在地址栏中输入“localhost”即可浏览本地网站中的首页，如图所示。 任务3 安装与配置本地Web服务器 三．设置IIS信息服务 8．单击“确定”按钮即设置好本地IIS服务器。 返回

30. Thank You !