《网页设计与制作》 教学课件 主讲人：湖南铁道职业技术学院 陈承欢

Presentation on theme: "《网页设计与制作》 教学课件 主讲人：湖南铁道职业技术学院 陈承欢"— Presentation transcript:

1 《网页设计与制作》 教学课件 主讲人：湖南铁道职业技术学院 陈承欢
Hunan Railway Professional Technology College 主讲人：湖南铁道职业技术学院　陈承欢

2 教学单元3：网站的创建与管理 主要教学环节 一、课程引导 二、明确知识技能目标 三、展示网页浏览效果 四、分析操作任务
五、知识讲解与操作示范 六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题

3 （一）课程引导 　　 认识了Dreamweaver 8的工作环境之后，接下来将要迈出制作网页的第一步了。无论是网页制作的新手，还是专业的网页设计师，都要从构建站点开始，理清网站结构。

4 （二）明确知识技能目标 （1）掌握“文件”面板 （2）掌握站点的创建 （3）掌握站点的管理

5 （三）展示网页浏览效果 本章所创建的实例网站“长沙世界之窗”的站点结构 效果如图所示。

6 （四）分析操作任务 （1）创建一个命名为“长沙世界之窗”的网站，该网站保存在本地硬盘的文件夹“旅游网站”中。
（2）在站点“长沙世界之窗”中创建文件夹“00创建站点”，在文件夹“00创建站点”创建子文件夹“image”、“music”。 （3）在文件夹“00创建站点”中新建一个命名为“00.html”空白网页。

7 （五）知识讲解与操作示范 3.1 网站的创建 3.1.1 认识文件面板 文件面板主要有三个方面的功能： （1）管理本地站点；
3.1　网站的创建 3.1.1　认识文件面板 文件面板主要有三个方面的功能： （1）管理本地站点； （2）管理远程站点，包括文件上传、文件更新等； （3）可以连接网络应用服务器，预览动态网页。 3.1.2　创建本地网站 使用Dreamweaver 8创建站点的向导创建第一个本地站点 “长沙世界之窗”，具体操作步骤如下。 步骤1：在本地硬盘上建立一个用来存放站点的文件夹， 命名为“旅游网站”，该文件夹就是本地站点的根目录。

8 （五）知识讲解与操作示范 3.1 网站的创建 步骤2：选择菜单【站点】→【新建站点】命令，打开“站点定义”向导。选择“基本”选项卡。
3.1　网站的创建 步骤2：选择菜单【站点】→【新建站点】命令，打开“站点定义”向导。选择“基本”选项卡。 　　 步骤3：在“你打算为您的站点起什么名字？”标签下面的文本框中填写要创建的网站名称：“长沙世界之窗”。 　　 步骤4：单击【下一步】按钮，选择“否，我不想使用服务器技术”单选按钮。 　　 步骤5：单击【下一步】按钮，选择“编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）”单选按钮。 　　 步骤6：在窗口下方，“您将把文件存储在计算机上的什么位置”用来选择保存网站文件的文件夹。

9 （五）知识讲解与操作示范 步骤7：单击【下一步】按钮。选择“无”，等到网站建成后再与FTP连接。
　　 3.1　网站的创建 　　步骤7：单击【下一步】按钮。选择“无”，等到网站建成后再与FTP连接。 　　步骤8：单击【下一步】按钮，站点定义对话框列出了刚才设置的主要内容，如果发现有错误，可以单击“上一步”按钮退回到合适的步骤进行更正，核对无误后，单击【完成】按钮，结束站点定义对话框的设置。

10 （五）知识讲解与操作示范（2） 3.2 管理站点 1．切换站点
3.2　管理站点 　　1．切换站点 　　在文件面板左边的下拉列表框中选中某个已创建的站点，例如单击选中“我的班级网站”，就可切换到对这个站点进行操作的状态。 　　2．编辑站点 　　如果要对站点进行编辑，可以在“管理站点”对话框中，选择要编辑的站点，然后用鼠标单击“管理站点”对话框中的【编辑】按钮，重新打开“站点定义”向导，根据需要一步一步修改站点的属性即可。

11 （五）知识讲解与操作示范（2） 3.2 管理站点 3．复制站点
　3.2　管理站点 　3．复制站点 　对某一个站点进行复制操作。复制站点的功能省去了重复建立多个结构相同的站点的操作 　4．删除站点 　对某一个站点进行删除操作，网站的文件仍保存在硬盘 原来的位置上，并没有被删除。 　5．导入站点 　将选中的站点导出成一个XML文件，需要的时候还可以再次导入。 　6．导出站点 　把导出的保存站点设置的XML文件再次导入。

12 （五）知识讲解与操作示范（3） 3.3 管理网站中的文件和文件夹 1．创建文件夹和文件
　 3.3　管理网站中的文件和文件夹 　 1．创建文件夹和文件 　　在文件面板中站点根目录上单击鼠标右键，然后从弹出的快捷菜单中单击菜单项【新建文件夹】或【新建文件】，接着给新的文件夹或文件命名。 　　（1）在站点根目录中创建一个名为“00创建站点”的文件夹。 　　（2）为刚才新建的文件夹“00创建站点”创建两个子文件夹“image”和“music”。

13 （五）知识讲解与操作示范（3） 3.3 管理网站中的文件和文件夹 2．移动和复制文件
　 3.3　管理网站中的文件和文件夹 　2．移动和复制文件 从“文件”面板的本地站点文件列表中，选中要移动或复制的文件夹或文件，如果要进行移动操作，则执行【编辑】 →【剪切】命令；如果要进行复制操作，则执行【编辑】→【拷贝】命令；然后执行【编辑】→【粘贴】命令，将文件夹或文件移动或复制到相应的文件夹中。 　3．重命名文件夹或文件 　先选中需要重命名的文件夹或文件，然后单击快捷菜单中的【编辑】→【重命名】命令或者按【F2】快捷键，文件夹或文件的名称变为可编辑状态，重新输入新的名称，按Enter键确认即可。

14 （五）知识讲解与操作示范（4） 3.4 使用“资源面板”管理网站中的资源 3.4.1 使用“资源”面板 1．打开资源面板
　 3.4　使用“资源面板”管理网站中的资源 　3.4.1　使用“资源”面板 　　 1．打开资源面板 　　　使用“资源面板”之前必须先创建一个站点。然后选择菜单【窗口】→【资源】命令，将会打开“资源面板”，资源面板与文件面板在同一个面板组中。 　 　2．将资源加入收藏列表 　　　在“资源面板”的上方，有两个单选按钮：“站点”或“收藏”。如果选择“站点”表示以资源列表方式显示站点中的所有资源；如果选择“收藏”，则以“收藏”资源列表方法进行显示。

15 （五）知识讲解与操作示范（4） 3.4.2 在页面中使用资源 1．向文档中添加资源 3.4 使用“资源面板”管理网站中的资源
　　　3.4　使用“资源面板”管理网站中的资源 3.4.2　在页面中使用资源 　1．向文档中添加资源 　（1）将光标定位于想要加入资源的位置。 　（2）打开“资源面板”，选择资源的种类图标按钮。 　（3）选择“站点”或者“收藏”单选按钮，然后在列表中选择所要的资源。 　（4）从“资源面板”中拖动资源到“设计”视图中或者单击“资源面板”左下角的按钮，这样资源就被插入到文档中。 　2．改变文档中所选文字的颜色 　（1）选中文档中需要改变颜色的文字。 　（2）在“资源面板”中单击颜色选项图标。 　（3）选择颜色列表中的颜色，然后单击按钮。

16 （五）知识讲解与操作示范（4） 3.4 使用“资源面板”管理网站中的资源 3.4.3 选择和编辑资源 1．选择一个或多个资源
3.4　使用“资源面板”管理网站中的资源 3.4.3　选择和编辑资源 　　1．选择一个或多个资源 　　　可以单击选择一个资源，也可以采用下列方法选择多个资源。 　　　（1）按住【Shift】键，然后单击其他资源，选择多个连接的资源。 　　　（2）按住【Ctrl】键，然后依次单击逐个选择多个资源。 　2．编辑一个资源 　　（1）打开要编辑的资源 　　（2）对打开的资源进行编辑。 　　（3）编辑完成，进行保存或单击“确定”按钮。

17 （五）知识讲解与操作示范（5） 3.5 网页文档的基本操作
3.5　网页文档的基本操作 接着学会创建网页文档、打开网页、关闭网页，完成本章的第3项操作任务：创建空白网页“00.html”。 　　3.5.1　创建网页文档 　　　1．新建网页文档 　　　　新建网页文档的方法主要有以下几种。 　　　　方法一：启动Dreamweaver 8后，会出现一个功能选择界面，它包括“打开最近项目”、“创建新项目”、“从范例创建”、“扩展”四个可选项，在该界面单击【HTML】便可以直接创建一个HTML网页文档。 　　　　方法二：单击Dreamweaver 8主窗口的菜单【文件】→【新建】，打开“新建文档”对话框，在该对话框中，

18 （五）知识讲解与操作示范（5） 3.5 网页文档的基本操作 2．保存网页文档 保存网页文档的方法主要有：
3.5　网页文档的基本操作 　2．保存网页文档 　　　保存网页文档的方法主要有： 　　 方法一：单击“标准工具栏”中的【保存】按钮或者【全部保存】按钮。 　　方法二：单击Dreamweaver 8主窗口的菜单【文件】→【保存】或者【保存全部】。 　　　保存新建的网页文档，该网页文档的保存位置为“00创建站点”文件夹，名称为“00.html”。

19 （五）知识讲解与操作示范（5） 3.5 网页文档的基本操作 3.5.2 打开网页文档 1．打开网页文档 2．打开最近的文档
3.5　网页文档的基本操作 　　 　打开网页文档 　　　　1．打开网页文档 　　　　2．打开最近的文档 　　　3.5.3　关闭网页文档 　　　　单击Dreamweaver 8主窗口的菜单【文件】→【关闭】或者【全部关闭】即可。如果页面尚未保存，则会弹出一个对话框，确认是否保存。

20 （六）课堂实践 1．操作任务 利用本章所学习的知识，完成以下操作：
　1．操作任务 　　利用本章所学习的知识，完成以下操作： 　　　（1）创建一个命名为“课堂实践”的静态网站，该网站的所有文件存储在本机上E盘的“ClassroomPractise”文件夹中。 　　　（2）在“文件面板”的站点根目录下创建一个文件夹“00创建站点”。 　　　（3）在文件夹“00创建站点”中创建三个子文件夹“image”、“music”和“text”。 　　　（4）在文件夹“00创建站点”中创建一个命名为“00.html”的网页文档。 　　（5）将所需的图像文件和音乐文件分别复制到“image”和“music”文件夹中。

21 （六）课堂实践 　2．效果展示 所创建的“课堂实践”站点，以及该站点中的文件夹和文件。 图3-18　　课堂实践网站的站点结构

22 （六）课堂实践 3．制作要点提示 （1）文件夹“ClassroomPractise”必须在Windows操作系统的资源管理器中创建。
　3．制作要点提示 　（1）文件夹“ClassroomPractise”必须在Windows操作系统的资源管理器中创建。 　（2）其他子文件夹直接利用Dreamweaver 8的“文件”面板创建。 　（3）拷贝图像文件和音乐文件也是在Windows操作系统的资源管理器中完成。

23 (七) 课外拓展实践 　　　1．利用“站点定义”对话框中的“高级”选项卡中的“本地信息”创建一个学校网站，该网站命名为“湖铁职院学院网站”，保存在文件夹“MyCollege”中。 　　2．在所创建的站点根目录下创建一个文件夹“00创建站点”以及多个子文件夹。

24 （八）归纳总结 　　 本章重点学习了如何创建站点和管理站点，同时也分析了网页文档的基本操作和“资源”面板、“文件”面板的使用方法。这些操作都是最基本的操作，熟练掌握将会有助于以后网页的制作。