《动态网站设计制作与维护-电子教案-史桂红 项目2》由会员分享，可在线阅读，更多相关《动态网站设计制作与维护-电子教案-史桂红 项目2（38页珍藏版）》请在金锄头文库上搜索。
1、项目二 环境的搭建及调试,知识技能目标,1、会本地静、动态站点的创建；,2、会本地静、动态站点的管理；,工作任务列表,任务一：创建本地站点（重点）,子任务1：建立本地静态站点class,子任务2：建立本地动态站点MyClass (以ASP 作为动态网页开发技术)（采用两种方法完成）,任务二：管理本地站点class,任务一 创建本地站点,子任务1：创建本地静态站点class,我们将使用Dreamweaver CS3完成网站站点的创建工作 步骤1：检查C:ClassWeb文件夹是否存在，不存在则创建该文件夹。 步骤2：启动Dreamweaver CS3。 法一： “开始”/“程序”/“Adobe
2、Dreamweaver CS3”/ “Adobe Dreamweaver CS3”； 法二：若桌面上有Dreamweaver CS3快捷方式，双击快捷方式即可完成启动工作。 步骤3：建立本地静态站点“class”。,（1）使用菜单“站点”/“新建站点”命令，在弹出的“站点定义”向导对话框。选择“基本”选项卡。如下图所示：,任务一 创建本地站点,（2）在“你打算为您的站点起什么名字？”标签下面的文本框中输入要创建的站点名称：“class”。其它选项取默认设置，单击“下一步”按钮。,任务一 创建本地站点,（3）在弹出的是否使用服务器技术对话框中，由于我们此处创建的是静态站点，所以选取“否，我不想使
3、用服务器技术”一项，单击“下一步”按钮。如下图所示：,任务一 创建本地站点,（4）在弹出的“在开发过程中，你打算如何使用你的文件？”中选取“编辑我的计算机上的本地副本，完成后再上传到服务器”，选项。 （5）在窗口下方的“您把文件存储在计算机上的什么位置？”下方的文本框中输入或选取保存站点的文件夹，此处我们选取C：ClassWeb文件夹，单击“下一步”按钮。如下图所示：,任务一 创建本地站点,（6）在弹出的设置是否与远程服务器相连的对话框中的“您如何连接到远程服务器”下的下拉列表框中选取“无”，设置为不与远程服务器相连。如下图所示。,任务一 创建本地站点,（7） 单击“下一步”按钮，便会显示在站
4、点定义向导中所选择设置的详细报告，若感觉满意，单击“完成”按钮，完成本网站的创建，如图所示，否则单击“上一步”按钮重新修改各项设置。,任务一 创建本地站点,任务一 创建本地站点,子任务2：创建本地动态站点MyClass (以ASP 作为动态网页开发技术) 该任务是创建名为MyClass的本地动态站点。创建动态站点，需安装和配置Web服务器，所以本任务的实现由下述几个步骤完成： 1、安装服务器端脚本ASP的工作环境IIS（Internet Information Server） 2、设置Web服务器 3、创建名为MyClass的动态站点 4、测试动态站点,IIS是ASP运行时的工作环境，我们要建
5、立动态站点，必须先安装与设置IIS（Internet Information Service） 步骤1：IIS的安装 Windows 2000 Server、Windows 2000 Advanced Server 以及 Windows 2000 Professional 的默认安装都带有 IIS 。但Windows XP 、Windows 2003 server等操作系统，默认情况下不会安装IIS，需要进行手工安装。以Windows XP 为例，讲解安装步骤：,IIS安装步骤： （1）选择“开始”“设置”“控制面板”，双击“控制面板”窗口中的“添加/删除程序”图标，打开“添加或删除程序”窗口
6、， 如图所示。,任务一 创建本地站点,任务一 创建本地站点,（2）单击图左边的【添加/删除Windows组件】选项，弹出 【Windows组件向导】对话框，进入选取组件对话框，如图 所示。,任务一 创建本地站点,（3）单击“详细信息”按钮，确保选中“Internet信息服务管理单元”和“万维网服务”等内容，如图所示。,任务一 创建本地站点,（4）然后根据向导单击“下一步”按钮，在安装过程中系统会提示你插入Windows XP的安装光盘，此时你将其路径指向Windows XP安装程序的I386目录下即可。 （5）组件配置完成之后，单击【完成】按钮，完成IIS的安装 。 （6）安装完IIS后，检测
7、安装是否成功的方法：在地址栏中输入http:/localhost/，若出现下面如图示的IIS的欢迎界面和帮助文件界面则安装成功。,任务一 创建本地站点,步骤2：启动IIS，设置Web服务器，将IIS的主目录设置为C:ClassWeb，设置启用默认文档为index.html,（1）启动IIS： 在控制面板的经典视图下： 打开“控制面板”-双击“管理工具” -再双击“Internet信息服务”。 在控制面板的分类视图下： 打开“控制面板”-双击“性能和维护” -双击“管理工具” -再双击“Internet信息服务”。,任务一 创建本地站点,思考：不设主目录是否可以？,（2）将IIS的主目录设置为C
8、:ClassWeb 右击“默认网站”，在弹出的快捷菜单中选“属性”命令；如图所示：,任务一 创建本地站点,在弹出的“默认网站属性”对话框中，选中其中的“主目录”选项卡，将本地路径后的文本框中变为C:ClassWeb文件夹，其它选项选默认设置，如下图所示，这样就把主目录设置成了自己的文件夹。,任务一 创建本地站点,（3）设置启用默认文档为index.html 选中“文档”选项卡，修改浏览器默认主页为index.html及调用顺序，若在文档栏中没有所要设置的文件，则单击右侧的【添加】按钮，将所需文件添加入文档栏中，并设置其调用顺序，将“index.html”设置为顶端第一个。这样设置后，在使用ht
9、tp:/localhost来访问本地主机Web站点时，将显示Web站点下index.htm的内容。 到这里，设置Web服务器完成。,任务一 创建本地站点,步骤3：在DreamweaverCS3中建立本地动态站点“MyClass” 。 创建动态站点与创建静态站点类似，有两种方法可以完成 方法一：使用【站点定义】对话框的基本选项卡完成 方法二：使用【站点定义】对话框的高级选项卡完成 方法一（使用基本选项卡）完成步骤：,（1）使用菜单“站点”/“新建站点”命令，在弹出的“站点定义”向导对话框。选择“基本”选项卡。 （2）在“你打算为您的站点起什么名字？”标签下面的文本框中输入要创建的站点名称：“My
10、Class”。其它选项取默认设置，单击“下一步”按钮。,任务一 创建本地站点,（3）在弹出的是否使用服务器技术对话框中，由于我们此处制作的是动态网页，所以选取“是，我想使用服务器技术”一项，在哪种服务器技术下的下拉列表框中选取“ASP VBScript”，单击“下一步”按钮。如下图所示：,任务一 创建本地站点,（4）在弹出的“在开发过程中，你打算如何使用你的文件？”中选取“在本地进行编辑和测试（我的测试服务器是这台计算机）”选项。 （5）在窗口下方的“您把文件存储在计算机上的什么位置？”下方的文本框中输入或选取保存站点的文件夹，此处我们选取C:ClassWeb文件夹，单击“下一步”按钮。,任务
11、一 创建本地站点,（6）在弹出的“您应该使用什么URL来浏览站点的根目录？”选项中选取默认选项，并使用 “测试URL”按钮测试其是否成功，成功后单击“下一步”按钮。如下图所示。,任务一 创建本地站点,（7）在弹出的“是否要使用远程服务器”选项中选取“否”选项。我们采取将整个站点制作完成后再上传的方法，所以这里选取“否”，如下图所示。,任务一 创建本地站点,（8）单击“下一步”按钮，便会显示在站点定义向导中所选择设置的详细报告，若感觉满意，单击“完成”按钮，完成本网站的创建；否则单击“上一步”按钮重新修改各项设置。,任务一 创建本地站点,方法二（使用高级选项卡）完成步骤 （1）使用菜单“站点”/
12、“新建站点”命令，在弹出的“站点定义”向导对话框。选择“高级”选项卡。,（2）从“分类”列表框中选择“本地信息”选项（默认选取项）。 设置“本地信息”的各参数，如图所示。,任务一 创建本地站点,站点名称： 为网站起一个名字，这个名字只在本地起识别作用，与网站发布后真实的名字无关。这里我们起“MyClass1”(为了和基本选项卡中定义的MyClass区分开来) 本地根文件夹：设置网站在本地硬盘的位置。这里输入C:ClassWeb，或者单击右侧的文件夹图标浏览到该文件夹。 自动刷新本地文件列表：指定每次将文件复制到本地站点时Dreamweaver是否自动刷新本地文件列表，选中表示每次均自动刷新。
13、默认图像文件夹：它是为Dreamweaver8在使用外部图像时，制定一个“默认图像文件夹”，这样更便于管理图像。 缓存：选中该项时可以使文件的移动、更名、查找等站点管理操作速度加快 其它选项取默认设置,任务一 创建本地站点,（3）从“分类”列表框中选择“远程信息”选项中选取“无”。 （4）从“分类”列表框中选择“测试服务器”选项，并设置其各参数，设置完毕后按“确定”按钮，如图所示。,任务一 创建本地站点,服务器模型： 从下拉列表框中选取“ASP VBscript”。 访问：设置服务器的访问类型，选取“本地/网络”。 测试服务器文件夹：是用来存放网站源代码的根目录，这里选取。 URL前缀：选取默
14、认的http:/localhost。 “确定”按钮按下后即完成动态站点的创建。,任务一 创建本地站点,步骤5：测试动态站点 在站点MyClass下新建空白文档“test.asp”,并在文件的代码视图中输入如下内容并检查网页内容。 今天的日期是,（1）新建空白文档test.asp： 右击“文件面板”中的站点MyClass，在弹出的快捷菜单中选“新建文件”命令，输入文件名“test.asp” 即可。 （2）输入内容： 双击刚才新建的test.asp文件，在左侧的文档编辑窗口中选取“代码”二字，进入“代码视图” 中； 在代码间输入上述内容，存盘。,任务一 创建本地站点,（3）检查网页内容： 法一：单
15、击文档编辑窗口的右上方的“在浏览器中预览/调试”选项，在弹出的菜单中选“预览在IExplore”命令，如下图所示。 法二：使用快捷键F12。 法三：打开IE浏览器，在地址栏中输入http:/localhost/test.asp,检查网页内容。,任务一 创建本地站点,法四：进入Internet信息服务对话框中，选中“默认网站”选项，鼠标右击“index.asp”文件，在弹出的快捷菜单中选“浏览”命令。,任务一 创建本地站点,若结果显示为“今天的日期是XXXX”（其中XXXX为系统的当前日期），则表示动态站点创建成功。,任务二 管理本地站点class,任务 将静态站点Class复制，将复制后的站点
16、重命名为class(static)，删除MyClass1站点 操作步骤： （1）执行“站点”“管理站点”命令，弹出“管理站点”对话框，如图所示。,任务二 管理本地站点class,（2）选中class站点，单击上图右侧【复制】按钮，完成站点的复制，复制后的站点名称为“class复制” 。 （3）选中“class复制”，单击右侧【编辑】按钮，在弹出的对话框“您打算为您的站点起什么名字？”下的文本框中将站点名称改为“class(static)”，如图所示。,任务二 管理本地站点class,（4）单击各个对话框中出现的【下一步】按钮，如图2- 41所示，单击【完成】按钮，完成站点的重命名。 （5）选中 站点管理对话框中的“MyClass”，单击右侧的【删除】按钮，在弹出的确认是否要删除选中的站点对话框中，按【是】按钮，完成站点地删除。,HTML文件结构 无标题文档 HTML 文件的正文写在这里. . ,HTML相关知识点（拓展知识）,Meta标记，记录有关当前页面的信息，表示显示的网页内容类型；TXT或HT
