网站规划及网页的设计.pptVIP

网站规划与网页设计 电子工业出版社同名教材 配套电子教案 2009.9 * * 7.1 Dreamweaver简介 7.2 站点管理 7.3 制作第一个网页 7.4 超链接 7.5 使用图像 7.6 使用多媒体对象 7.7 使用表格 7.8 表单 第7章 网页编辑工具Dreamweaver CS3 7.1.1 Dreamweaver CS3的启动和主工作区 1．启动Dreamweaver CS3 安装好Dreamweaver CS3后，单击“开始”→“程序”→“Macromedia”→“Macromedia Dreamweaver 8”命令。Dreamweaver 进行一系列初始化过程后，首先显示“工作区设置”对话框，如图7-1所示。由于要采用可视化方式设计网页，选中“设计者”单选钮，单击“确定”按钮。接下来显示起始页对话框，如图7-2所示。在起始页对话框中可以选择“打开最近项目”、“创建新项目”或“从范例创建”。 7.1 Dreamweaver简介 图7-1 “工作区设置”对话框 图7-2 起始页 2．Dreamweaver cs3的主工作区 Dreamweaver 的主工作区由插入工具栏、文档工具栏、文档窗口、属性面板等部分组成，如图7-3所示。 7.1 Dreamweaver简介 图7-3 Dreamweaver的主工作区 （1）插入工具栏 Dreamweaver 8的插入工具栏如图7-4（a）所示，插入工具栏中默认显示的是“常用”类的主要功能按钮。单击“常用”按钮会弹出一个下拉菜单，其中包含了插入工具栏中的其他功能菜单，如图7-4（b）所示。用户选择不同的分类，插入工具栏中包含的功能按钮也随之改变。 7.1 Dreamweaver简介 图7-4 插入工具栏及其功能分类菜单 （2）文档工具栏 文档工具栏中的按钮使用户可以在文档的不同视图间快速切换：代码视图、设计视图、和拆分视图。文档工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项，如图7-5所示。 7.1 Dreamweaver简介 图7-5 文档工具栏的常用命令和选项 7.1.2 Dreamweaver 的参数设置 1．常规参数设置 选择“编辑”→“首选参数”命令，或按〈Ctrl〉+〈U〉组合键，打开“首选参数”对话框。选择“分类”列表中的“常规”选项，对话框右侧显示出相关的属性。通常设置的属性有文档选项和一些编辑选项。 7.1 Dreamweaver简介 图7-12 常规参数设置中更改工作区 7.1.2 Dreamweaver 的参数设置 2．新建文档参数设置 新建文档参数设置用于建立默认的新文档类型和首选参数。选择“分类”列表中的“新建文档”选项，对话框右侧显示出相关的属性，如图7-13所示。 7.1 Dreamweaver简介 图7-13 新建文档参数设置 7.1.2 Dreamweaver 的参数设置 3．站点参数设置 选择“分类”列表中的“站点”选项，对话框右侧显示出相关的属性，用于为“文件”面板设置站点首选参数，如图7-14所示。 7.1 Dreamweaver简介 图7-14 站点参数设置 所谓站点，可以看做是一系列文档的组合，这些文档之间通过各种链接关联起来，可能拥有相似的属性，例如，描述相关的主体，采用相似的设计，或者实现相同的目的等，也可能只是毫无意义的链接。利用浏览器，就可以从一个文档跳转到另一个文档，实现对整个网站的浏览。 7.2.1 本地站点和远端站点 严格地说，站点也是一种文档的磁盘组织形式，它同样是由文档和文档所在的文件夹组成的。设计良好的网站通常具有科学的结构，利用不同的文件夹，将不同的网页内容分门别类地保存，这是设计网站的必要前提。结构良好的网站，不仅便于管理，也便于更新。 7.2 站点管理 7.2.2 建立本地站点 规划好站点结构后，应该先在Dreamweaver中定义站点，然后才能进行开发。 【例7-1】建立一个本地站点，定义站点名称和站点使用的本地根文件夹及默认的图像文件夹。本实例定义站点的名称为Sample，使用的本地文件夹为D:\myweb，默认的图像文件夹为D:\myweb\image，站点的设置如图7-15所示。站点结构如图7-16所示。 7.2 站点管理 图7-15 站点设置 图7-16 站点结构 7.2.3 管理本地站点 1．编辑站点 在Dreamweaver中创建好本地站点后，如