搜索
《网页设计与制作》教学课件主讲人：计算机学院李继容教学单元3：网站的创建与管理主要教学环节五、知识讲解与操作示范一、课程引导二、明确知识技能目标三、展示网页浏览效果四、分析操作任务六、课堂模仿实践七、疑难解析八、归纳总结九、布置习题（一）课程引导认识了Dreamweaver8的工作环境之后，接下来将要迈出制作网页的第一步了。无论是网页制作的新手，还是专业的网页设计师，都要从构建站点开始，理清网站结构。（二）明确知识技能目标（1）掌握“文件”面板（2）掌握站点的创建（3）掌握站点的管理（三）展示网页浏览效果本章所创建的实例网站“长沙世界之窗”的站点结构效果如图所示。（四）分析操作任务（1）创建一个命名为“长沙世界之窗”的网站，该网站保存在本地硬盘的文件夹“旅游网站”中。（2）在站点“长沙世界之窗”中创建文件夹“00创建站点”，在文件夹“00创建站点”创建子文件夹“image”、“music”。（3）在文件夹“00创建站点”中新建一个命名为“00.html”空白网页。（五）知识讲解与操作示范3.1网站的创建3.1.1认识文件面板文件面板主要有三个方面的功能：（1）管理本地站点；（2）管理远程站点，包括文件上传、文件更新等；（3）可以连接网络应用服务器，预览动态网页。3.1.2创建本地网站使用Dreamweaver8创建站点的向导创建第一个本地站点“长沙世界之窗”，具体操作步骤如下。步骤1：在本地硬盘上建立一个用来存放站点的文件夹，命名为“旅游网站”，该文件夹就是本地站点的根目录。（五）知识讲解与操作示范3.1网站的创建步骤2：选择菜单【站点】→【新建站点】命令，打开“站点定义”向导。选择“基本”选项卡。步骤3：在“你打算为您的站点起什么名字？”标签下面的文本框中填写要创建的网站名称：“长沙世界之窗”。步骤4：单击【下一步】按钮，选择“否，我不想使用服务器技术”单选按钮。步骤5：单击【下一步】按钮，选择“编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）”单选按钮。步骤6：在窗口下方，“您将把文件存储在计算机上的什么位置”用来选择保存网站文件的文件夹。（五）知识讲解与操作示范3.1网站的创建步骤7：单击【下一步】按钮。选择“无”，等到网站建成后再与FTP连接。步骤8：单击【下一步】按钮，站点定义对话框列出了刚才设置的主要内容，如果发现有错误，可以单击“上一步”按钮退回到合适的步骤进行更正，核对无误后，单击【完成】按钮，结束站点定义对话框的设置。（五）知识讲解与操作示范（2）3.2管理站点1．切换站点在文件面板左边的下拉列表框中选中某个已创建的站点，例如单击选中“我的班级网站”，就可切换到对这个站点进行操作的状态。2．编辑站点如果要对站点进行编辑，可以在“管理站点”对话框中，选择要编辑的站点，然后用鼠标单击“管理站点”对话框中的【编辑】按钮，重新打开“站点定义”向导，根据需要一步一步修改站点的属性即可。（五）知识讲解与操作示范（2）3.2管理站点3．复制站点对某一个站点进行复制操作。复制站点的功能省去了重复建立多个结构相同的站点的操作4．删除站点对某一个站点进行删除操作，网站的文件仍保存在硬盘原来的位置上，并没有被删除。5．导入站点将选中的站点导出成一个XML文件，需要的时候还可以再次导入。6．导出站点把导出的保存站点设置的XML文件再次导入。（五）知识讲解与操作示范（3）3.3管理网站中的文件和文件夹1．创建文件夹和文件在文件面板中站点根目录上单击鼠标右键，然后从弹出的快捷菜单中单击菜单项【新建文件夹】或【新建文件】，接着给新的文件夹或文件命名。（1）在站点根目录中创建一个名为“00创建站点”的文件夹。（2）为刚才新建的文件夹“00创建站点”创建两个子文件夹“image”和“music”。（五）知识讲解与操作示范（3）3.3管理网站中的文件和文件夹2．移动和复制文件从“文件”面板的本地站点文件列表中，选中要移动或复制的文件夹或文件，如果要进行移动操作，则执行【编辑】→【剪切】命令；如果要进行复制操作，则执行【编辑】→【拷贝】命令；然后执行【编辑】→【粘贴】命令，将文件夹或文件移动或复制到相应的文件夹中。3．重命名文件夹或文件先选中需要重命名的文件夹或文件，然后单击快捷菜单中的【编辑】→【重命名】命令或者按【F2】快捷键，文件夹或文件的名称变为可编辑状态，重新输入新的名称，按Enter键确认即可。（五）知识讲解与操作示范（4）3.4使用“资源面板”管理网站中的资源3.4.1使用“资源”面板1．打开资源面板使用“资源面板”之前必须先创建一个站点。然后选择菜单【窗口】→【资源】命令，将会打开“资源面板”，资源面板与文件面板在同一个面板组中。2．将资源加入收藏列表在“资源面板”的上方，有两个单选按钮：“站点”或“收藏”。如果选择“站点”表示以资源列表方式显示站点中的所有资源；如果选择“收藏”，则以“收藏”资源列表方法进行显示。（五）知识讲解与操作示范（4）3.4使用“资源面板”管理网站中的资源3.4.2在页面中使用资源1．向文档中添加资源（1）将光标定位于想要加入资源的位置。（2）打开“资源面板”，选择资源的种类图标按钮。（3）选择“站点”或者“收藏”单选按钮，然后在列表中选择所要的资源。（4）从“资源面板”中拖动资源到“设计”视图中或者单击“资源面板”左下角的按钮，这样资源就被插入到文档中。2．改变文档中所选文字的颜色（1）选中文档中需要改变颜色的文字。（2）在“资源面板”中单击颜色选项图标。（3）选择颜色列表中的颜色，然后单击按钮。3.4.3选择和编辑资源1．选择一个或多个资源可以单击选择一个资源，也可以采用下列方法选择多个资源。（1）按住【Shift】键，然后单击其他资源，选择多个连接的资源。（2）按住【Ctrl】键，然后依次单击逐个选择多个资源。2．编辑一个资源（1）打开要编辑的资源（2）对打开的资源进行编辑。（3）编辑完成，进行保存或单击“确定”按钮。（五）知识讲解与操作示范（4）3.4使用“资源面板”管理网站中的资源3.5网页文档的基本操作接着学会创建网页文档、打开网页、关闭网页，完成本章的第3项操作任务：创建空白网页“00.html”。3.5.1创建网页文档1．新建网页文档新建网页文档的方法主要有以下几种。方法一：启动Dreamweaver8后，会出现一个功能选择界面，它包括“打开最近项目”、“创建新项目”、“从范例创建”、“扩展”四个可选项，在该界面单击【HTML】便可以直接创建一个HTML网页文档。方法二：单击Dreamweaver8主窗口的菜单【文件】→【新建】，打开“新建文档”对话框，在该对话框中，（五）知识讲解与操作示范（5）3.5网页文档的基本操作2．保存网页文档保存网页文档的方法主要有：方法一：单击“标准工具栏”中的【保存】按钮或者【全部保存】按钮。方法二：单击Dreamweaver8主窗口的菜单【文件】→【保存】或者【保存全部】。保存新建的网页文档，该网页文档的保存位置为“00创建站点”文件夹，名称为“00.html”。（五）知识讲解与操作示范（5）（五）知识讲解与操作示范（5）3.5网页文档的基本操作3.5.2打开网页文档1．打开网页文档2．打开最近的文档3.5.3关闭网页文档单击Dreamweaver8主窗口的菜单【文件】→【关闭】或者【全部关闭】即可。如果页面尚未保存，则会弹出一个对话框，确认是否保存。（六）课堂实践1．操作任务利用本章所学习的知识，完成以下操作：（1）创建一个命名为“课堂实践”的静态网站，该网站的所有文件存储在本机上E盘的“ClassroomPractise”文件夹中。（2）在“文件面板”的站点根目录下创建一个文件夹“00创建站点”。（3）在文件夹“00创建站点”中创建三个子文件夹“image”、“music”和“text”。（4）在文件夹“00创建站点”中创建一个命名为“00.html”的网页文档。（5）将所需的图像文件和音乐文件分别复制到“image”和“music”文件夹中。（六）课堂实践2．效果展示所创建的“课堂实践”站点，以及该站点中的文件夹和文件。图3-18课堂实践网站的站点结构3．制作要点提示（1）文件夹“ClassroomPractise”必须在Windows操作系统的资源管理器中创建。（2）其他子文件夹直接利用Dreamweaver8的“文件”面板创建。（3）拷贝图像文件和音乐文件也是在Windows操作系统的资源管理器中完成。（六）课堂实践(七)课外拓展实践1．利用“站点定义”对话框中的“高级”选项卡中的“本地信息”创建一个学校网站，该网站命名为“五邑大学网站”，保存在文件夹“MyCollege”中。2．在所创建的站点根目录下创建一个文件夹“00创建站点”以及多个子文件夹。（八）归纳总结本章重点学习了如何创建站点和管理站点，同时也分析了网页文档的基本操作和“资源”面板、“文件”面板的使用方法。这些操作都是最基本的操作，熟练掌握将会有助于以后网页的制作。