网页设计与制作实用技术电子教案－齐建玲 CH2.PPTVIP

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