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

《项目创建和管理本地站点.ppt》由会员分享，可在线阅读，更多相关《项目创建和管理本地站点.ppt（30页珍藏版）》请在三一办公上搜索。

1、项目2 创建和管理本地站点,2,.,.,任务3 安装与配置本地Web服务器,任务2 在站点中创建网页,任务1 创建和管理本地站点,项目2 创建和管理本地站点,3,任务分析 在本地计算机上创建一个站点。站点文件夹为mwmw，站点名称为example。,任务1 创建和管理本地站点,4,一认识站点,站点就是硬盘上的一个存储区（文件夹），它存储了一个网站中包含的所有网页文件和相关资源。Dreamweaver的使用是以站点为基础的。它组织和管理站点中文件的方法是：在设计制作网页之前，为要处理的网站建立一个本地站点。将所有的网页文件及用到的素材文件（图像、动画、音频、视频等）存放到该站点下，以便在本地对这

2、些文件进行管理和调试。站点中的全部网页制作并调试成功后再将站点整体传送到Web服务器中，供他人浏览。,任务1 创建和管理本地站点,5,二常用的站点,任务1 创建和管理本地站点,本地站点是指存放在本地计算机硬盘上的站点，一般来说是在设计制作网页过程中，将本地计算机当作服务器进行调试使用的站点。,远程站点是指存放在远程服务器（网络中的服务器）上的站点，是网站制作调试成功后，上传到远程服务器上的站点。,测试站点是用于测试动态网页的站点。需要将本地计算机设置成web服务器后，测试站点才能正常工作。,6,三创建站点,任务1 创建和管理本地站点,1利用“我的电脑”在本地磁盘中（如F盘）新建一个名为“mwm

3、w”的文件夹，并在“mwmw”文件夹中新建若干个子文件夹，分别用于存放不同类型的网页素材文件。,2运行Dreamweaver CS3，单击“站点”菜单“新建站点”，打开“站点定义”对话框,3在对话框中的“您打算为您的站点起什么名字?”文本框中输入站点的名称“example”(可输入任何一个便于记忆的名称)，另一文本框使用默认值。,4单击“下一步”，弹出“example的站点定义为”对话框，选择“否，我不想使用服务器技术”。,7,三创建站点,任务1 创建和管理本地站点,5单击“下一步”，在“您把文件存储在计算机的什么位置？”文本框处单击其右侧的文件定位按钮，定位到刚才创建的站点文件夹“F:mwm

4、w”。,6单击“下一步”，在“您如何连接到远程服务器”下面选择“无”。,7单击“下一步”，此时站点的创建工作已告完成，对话框中显示站点的整体信息，察看无误后，单击“完成”按钮。,8,三创建站点,任务1 创建和管理本地站点,9,四管理站点,任务1 创建和管理本地站点,在“文件”面板中，单击站点文件夹下拉框，选择“管理站点”，打开“管理站点”对话框。选择“站点”菜单“管理站点”，打开“管理站点”对话框。,10,四管理站点,任务1 创建和管理本地站点,通过“文件”面板来管理站点的文件夹或文件。对站点中文件和文件夹的主要操作有：新建文件或文件夹、复制文件或文件夹、重命名文件或文件夹、删除文件或文件夹,

5、站点中各文件夹存放的对象,返回,11,任务分析 创建好站点后就需要为站点新建相关的网页了。创建站点的首页。,任务2 在站点中创建网页,12,一网页中的组成元素,任务2 在站点中创建网页,文本：文本是网页最基本的元素，网页内容主要是靠文本来表达的。文本字符所占的存储空间非常小，下载速度非常快。文本可以使用各种格式属性来修饰，还可以用脚本程序来产生各种动态效果。,图像：网页总是图文并茂的，合理的图像布局能给人以强烈的视觉冲击效果。所以图像是网页中必不可少元素。网页中常用的图像格式有JPG、GIF、PNG等。,超链接：网页中海量的信息是通过超链接来实现联系的。用户单击网页中的超链接浏览器就会打开与之

6、关联的网页或信息点。超链接实现了网页的跳转，将独立的网页连成了无边无际的信息的海洋，使得网页与网页、网站与网站之间相互连接成为一个有机的整体。,13,一网页中的组成元素,任务2 在站点中创建网页,表格：表格在网页中主要用于清晰的显示各类数据和进行页面布局，应用十分方便。,层：层一般与CSS（层叠样式表）结合使用，进行页面布局。其应用十分灵活，修改方便，可以页面的任意可显示区域布局层。相对于表格的布局功能而言，更能代表网页布局技术的发展方向。,表单：主要用于收集用户输入的数据，实现网页的动态交互功能。所以表单主要应用于动态网页中。,14,一网页中的组成元素,任务2 在站点中创建网页,动画：动画可

7、以让网页更生动活泼，丰富视觉效果。网页中常用的动画文件格式有GIF和SWF。GIF动画最多只能正常显示256种颜色的画面，而SWF是Flash动画，可以显示真彩色动画。,音频：音频对象是网页中人机交互的又一种重要元素，丰富了网页的功能。音频文件主要有WAV、MIDI、MP3等。,视频：与音频对象一样，是网页中人机交互的又一种重要元素，丰富了网页的功能，使得网页的多媒体功能更全面，更精彩，更实用。视频文件的格式主要有RM、AVI、MPG、FLV等。视频信息一般都需要客户端安装相应的插件才能正常播放。,15,二创建和保存网页,任务2 在站点中创建网页,1通过“我的电脑”或“资源管理器”收集图片素材

8、（从“项目素材project02”文件夹中复制）到站点文件夹mwmw中的images文件夹中。图片文件分别是top01.jpg、bg.jpg和index.jpg。,2运行Dreamweaver CS3，在“文件”面板中右击站点文件夹名称，在快捷菜单中选择“新建文件”，再输入文件的名称为“index.html”，回车。,3双击index.html文件，在Dreamweaver的文档编辑区中就会打开这个空白的新网页。,16,二创建和保存网页,任务2 在站点中创建网页,4设置网页背景图案。在“属性”面板中单击“页面属性”按钮，在打开的“页面属性”对话框中，单击“背景图像”后的“浏览”按钮，打开“选择

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

10、添加一个空段落，输入文本“点击进入”。,8设置文本格式。选中刚输入的这串文字，在“属性”面板中设置文本“大小”为24，颜色为“#FFFF80”。,9保存，并浏览网页。按Ctrl+S保存网页文件，按F12浏览网页文件。,18,任务2 在站点中创建网页,网页的预览效果,返回,19,任务分析 如果要在本地计算机上调试网页，特别是动态网页，就需要将自己的计算机设置成一台Web服务器。那么，怎样做才能配置这样的一台Web服务呢？下面以Windows XP操作系统为例来介绍配置方法。,任务3 安装与配置本地Web服务器,20,一什么是Web服务器,任务3 安装与配置本地Web服务器,Web服务器拥有一个主

11、目录（文夹件）和若干虚拟目录用于发布站点。一般情况下，网站的内容都组织存放在一个目录，这个目录就称为主目录。默认的主目录是C:Inetpubwwwroot，我们可以将其设置成其他目录，比如我们之前建立的站点（F:mwmw）。,21,二在Windows操作系统中安装Web服务器,任务3 安装与配置本地Web服务器,1依次单击“开始”按钮“设置”“控制面板”，打开“控制面板”窗口，选择“添加/删除程序”。在“添加或删除程序”中选择“添加/删除Windows组件”。,2在打开的“Windows组件向导”中选择“Internet信息服务”。,22,二在Windows操作系统中安装Web服务器,任务3

12、安装与配置本地Web服务器,4稍候会弹出“插入磁盘”对话框。,3单击“下一步”，系统进入安装过程。,23,二在Windows操作系统中安装Web服务器,任务3 安装与配置本地Web服务器,6稍候，安装成功。单击“完成”按钮即可。,5单击“确定”按钮，弹出“所需文件”对话框，单击“浏览”按钮定位到安装包所在的文件夹后，单击“确定”按钮，安装继续。,24,三设置IIS信息服务,任务3 安装与配置本地Web服务器,1仍然使用“控制面板”窗口，选择“性能与维护”，打开“性能与维护”对话框。,2选择“管理工具”，打开“管理工具”对话框。,25,三设置IIS信息服务,任务3 安装与配置本地Web服务器,3

13、选择“Internet信息服务”，打开“Internet信息服务”，对“网站”进行展开，在右窗格中可以看到默认站点中的网页文件。,26,三设置IIS信息服务,任务3 安装与配置本地Web服务器,4右击左窗格中的“默认网站”，在快捷菜单中选择“属性”，打开“默认网站 属性”对话框。,27,三设置IIS信息服务,任务3 安装与配置本地Web服务器,5为网站设置“主目录”。选择“主目录”选项卡，设置主目录的本地路径为我们事先创建的网站文件夹（F:mwmw）,28,三设置IIS信息服务,任务3 安装与配置本地Web服务器,6为网站设置默认的首页文件。选择“文档”选项卡，保证“启用默认文档”为选中状态。单击右侧的“添加”按钮，在弹出的“添加默认文档”对话框中，输入我们网站中已经存的文件“index.html”作为网站的默认首页文件。,7设置默认文档的优先级。添加默认文档后，该选项卡中的文件列表框中会显示当前已经设置的默认文件。单击左侧的 或 按钮可以设置默认文档的优先级，处于上方的文档优先于处于下方的文档。,29,三设置IIS信息服务,任务3 安装与配置本地Web服务器,8单击“确定”按钮即设置好本地IIS服务器。,返回,30,Thank You!,