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

Presentation on theme: "项目2 创建和管理本地站点."— Presentation transcript:

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

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

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

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

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

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

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

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

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

10 任务1 创建和管理本地站点 四．管理站点 站点中各文件夹存放的对象 2．管理站点中的文件夹和文件 通过“文件”面板来管理站点的文件夹或文件。
任务1 创建和管理本地站点 四．管理站点 2．管理站点中的文件夹和文件 站点中各文件夹存放的对象 通过“文件”面板来管理站点的文件夹或文件。 对站点中文件和文件夹的主要操作有：新建 文件或文件夹、复制文件或文件夹、重命名文件 或文件夹、删除文件或文件夹 文件夹 存放文件类型 站点文件夹 存放网页文件及各子文件夹。 conn文件夹 存放连接数据库的公共代码文件。 css文件夹 存放CSS层叠样式表文件。 data文件夹 存放网页所需的数据库文件。 images文件夹 存放图片素材文件。 js文件夹 存放JavaScript脚本文件。 music文件夹 存放声音（音乐）文件。 swf文件夹 存放Flash动画文件。 站点文件夹是用来存放网站所有文件的，通常根据站点规划的要求，在此文件夹中建立多个子文件夹，并为这些子文件夹规范命名，用于分类存放站点中不同板块的网页文件或不同类型的素材文件。 返回

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

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

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

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

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

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

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

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

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

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

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

24 任务3 安装与配置本地Web服务器 三．设置IIS信息服务 现在我们来对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 任务3 安装与配置本地Web服务器 三．设置IIS信息服务 8．单击“确定”按钮即设置好本地IIS服务器。
打开IE浏览器后，在地址栏中输入“localhost”即可浏览本地网站中的首页，如图所示。 返回

30 Thank You !