《网页设计与制作实用技术（第二版）》第2章创建站点.PPT

通过本章学习，应该掌握以下内容： 规划站点结构的方法 Dreamweaver CS5的基本操作 利用Dreamweaver CS5创建站点的方法 站点的基本操作 第2章 创建站点 2.1 规划站点结构 1．按照文件的类型进行规划 按照文件的类型规划，就是将不同类型的文件分别存放在不同的文件夹下。 2．按照网页主题进行规划 按照网页主题，对站点结构规划，可以使网站条理更清晰，便于日后更好地管理站点。 下面是建立目录结构的一些建议： （1）不要将所有文件都存放在根目录下，会造成文件管理混乱 （3）按栏目内容建立子目录 （2）在每个主栏目目录下都建立独立的images目录 （4）目录的层次不要太深 （5）不要使用过长的目录 （6）不要使用中文目录 Dreamweaver是Macromedia公司的出品的一款“所见即所得”的网页编辑工具。与FrontPage不同，Dreamweaver采用的是Mac机浮动面版的设计风格，对于初学者来说可能会感到不适应。一旦习惯了其操作方式后，就会发现Dreamweaver的直观性与高效性是FrontPage所无法比拟的。 2.2 利用Dreamweaver CS5创建站点 2.2.1 Dreamweaver CS5简介 1．Dreamweaver CS5的界面 Dreamweaver CS5的起始页 Dreamweaver CS5的操作界面 （1）菜单栏 菜单栏提供了所有的菜单命令，是提供软件最完整功能的方式。 （2）工具栏 工具栏提供了常用命令的快捷启动方式，例如可以使用工具栏中的“标题”框方便地设置网页的标题。 （3）插入面板 插入面板是Dreamweaver CS5中新添的部件，其实就是Dreamweaver 4中的对象面板，在其中包含一些用于创建不同类型对象的按钮。 （4）浮动面板 浮动面板是一种方便操作的界面方式，使用者可以随时获得特定功能。 （5）文档窗口 文档窗口是显示用户所编辑文档的地方，显示结果与文档在浏览器中显示的结果基本相同。 （6）属性面板 属性面板上显示的是被选取对象或文本的各种属性，在属性面板上还可以检查和编辑当前选定页面元素的属性。 （7）状态栏 状态栏用于显示网页的一些基本信息，如网页大小、显示比例和估计下载时间等。 2．Dreamweaver的视图 单击工具栏上的“设计”按钮，即显示设计视图；使用工具栏中的“代码”按钮，则可以很方便地切换到代码视图，以便查看当前编辑网页的HTML源代码；如果需要同时查看代码视图和设计视图，可以单击工具栏上的“拆分”按钮，此时Dreamweaver将同时在窗口中显示代码视图和设计视图。 2.2.2 定义站点 在Dreamweaver CS5的编辑窗口，选择“窗口”→“文件”菜单，即可打开站点面板，如图所示。 在站点面板中，用户可以选择菜单“站点”→“新建站点”命令创建新站点，也可以使用“站点”→“管理站点”命令对已有的站点进行管理。 1．站点面板 （1）选择“站点”→“新建站点”命令，弹出“站点设置”对话框， 也可选择“站点”→“管理站点”命令，打开“管理站点”对话框，单击“新建站点”按钮打开该对话框；还可以在站点面板中单击 按钮，在弹出的菜单中选择“站点”→“新建站点”命令打开该对话框。 （2）输入站点名称和根目录的位置 （3）单击“保存”按钮 2．创建站点 演示创建站点的方法 在站点面板中打开工具栏的“文件”下拉列表框，选择需要打开的站点，文件窗口中即会显示该站点文件夹和文件信息。 2.2.3 站点的基本操作 1．打开站点 若要复制当前站点，可以使用文档窗口或站点面板中“站点”菜单的“编辑站点”命令，打开“编辑站点”对话框。选中要复制的站点名称，单击“复制”按钮即可对当前站点进行复制操作。 执行复制站点操作后，系统会自动复制一个所选择的站点，并且会为复制的站点加上一个“复制”字样的站点名称。 2．复制站点 如果要更改当前站点设置，比如对站点进行修改站点名称、设置参数选项等编辑操作，可以利用上面的方法打开“管理站点”对话框，选中一个站点后单击“编辑”按钮，即可打开该“站点设置对象”对话框。 3．编辑站点 在Dreamweaver CS5中删除一个站点非常容易，在弹出的“管理站点”对话框中，单击“删除”按钮就可以删除