《网页制作第2章.ppt》由会员分享，可在线阅读，更多相关《网页制作第2章.ppt（16页珍藏版）》请在三一文库上搜索。
1、第2章 Dreamweaver CS3的基本操作,Dreamweaver CS3是一款专业的网页制作软件，可以制作单独的网页文件，但制作网页的根本目的是为了构建一个完成的网站。Dreamweaver既是一个网页的创建和编辑工具，又是一个站点创建和管理的工具。因此，在创建网页之前必须规划和设计好网站。本章主要讲述了Dreamweaver CS3的一些基本操作，包括规划和创建站点以及网页文件的基本操作。,教学重点与难点,命令的使用 规划和创建站点 创建本地站点 管理站点 Dreamweaver CS3网页文件的基本操作 使用可视化向导 设置页面头部信息,2.1 规划和创建站点,规划站点的目的在于明
2、确创建站点的方向并采用的方法，同时也是确定本地站点所要实现的功能。规划时要明确网站的主题，搜集需要的信息等。规划站点主要是规划站点的结构。创建站点既可以创建一个网站，又可以创建一个本地网页文件的存储地址，规划好站点后即可开始创建站点。 站点的概念 规划站点,2.1.1 站点的概念,网站建立在互联网基础之上，以计算机、网络和通信技术为依托，通过一台或多台安装了系统程序、服务程序及相关应用程序的计算机，向访问者提供相应的服务。网站中的服务具体通过网页来实现，根据网站提供服务的不同，网站可分为政府网站、新闻网站、搜索网站、电子商务网站等。,2.1.2 规划站点,创建Web站点的第一步是规划。为了使网
3、站在完成后能够达到最佳效果，在利用Dreamweaver CS3建立任何Web站点之前，应根据需求对站点的结构进行设计与规划。,2.2 创建本地站点,在创建站点之前，一般在本地将整个网络完成，然后再将站点上传到Web服务器上。因此，在开始创建网页之前，最好的选择是用Dreamweaver建立一个本地站点。 创建本地站点 创建远程站点 管理站点,2.2.1 创建本地站点,创建本地站点，可以更好地利用站点对文件进行管理，尽可能地减少错误，例如链接和路径出错等。创建本地站点，可以使用站点定义向导快速创建。,2.2.2 创建远程站点,设置站点远程信息的目的是使Dreamweaver CS3能够向远程文
4、件夹所在的网站服务器(远程站点)上传或下载文件。在完成Dreamweaver站点的本地信息设置以后，就可以开始设置站点的远程文件夹(根据开发环境的不同，远程文件夹是存储用于进行测试、协作、生产、部署等文件的位置)。,2.2.3 管理站点,创建好站点后，根据需要创建各频道、栏目文件夹等，对于创建好的站点，也可以进行再次编辑，或删除和复制这些站点。,2.3 网页文档的基本操作,创建了本地站点后，就可以创建文档并将保存在站点文件夹中。在创建和编辑文档时，Dreamweaver CS3会自动生成文档的HTML代码和JavaScript代码，使用Dreamweaver代码编辑器可以测试和编辑这些代码。D
5、reamweaver CS3提供了多种创建文档的方法，可以创建一个新的空白HTML文档，或使用模板创建新文档。同时，还提供了功能强大的“新建文档”对话框来满足用户创建不同类型的文档的需求。 创建网页文档 打开和保存网页文档,2.3.1 创建网页文档,在Dreamweaver CS3中创建网页文档，选择“文件”“新建”命令，或按下Ctrl+N键，打开“新建文档”对话框，如图所示。选择“空白页”选项卡，在“页面类型”列表框中选择HTML选项，在“布局”列表框中选择“无”选项，单击“创建”按钮，即可创建一个空白网页文档，如图所示。,2.3.2 打开和保存网页文档,在使用Dreamweaver CS3
6、制作网页时，打开和保存文档是最常用的命令。,“打开”对话框 “另存为”对话框,2.4 使用可视化向导,Dreamweaver CS3提供了“标尺”、“网格”和“跟踪图像”3种可视化向导，用于辅助设计和估计网页在浏览器中的外观。 使用“标尺”和“网格” 使用“跟踪图像” 设置文档头部信息,2.4.1 使用“标尺”和“网格”,在设计页面时需要设置页面元素的位置或对齐页面元素，Dreamweaver CS3提供了“标尺”和“网格”功能。选择“查看”|“标尺”|“显示”命令，可以在文档中显示“标尺”，选择“查看”|“网格”|“显示网格”命令，可以在网页文档中显示网格，如图所示。重复操作，可以隐藏显示标尺和网格。,2.4.2 使用“跟踪图像”,在Dreamweaver CS3中，使用跟踪图像功能可以载入某个网页的布局(或图片)，然后借助该网页的布局来安排正在制作的网页布局。选择“查看”|“跟踪图像”|“载入”命令，打开“选择图像源文件”对话框，如图2-33所示。,2.4.3 设置文档头部信息,每一个网页都是由HTML脚本所组成的*.html文件，一个完整的HTML网页文件包含head和body两个部分，head部分包括许多不可见的信息，例如语言编码、版权声明、关键字等，使用Dreamweaver CS3，可以设置这些信息。,