国防《网页设计与制作》教学资料包 教学课件 第三章.pptVIP

目录 Dreamweaver CS4入门 3.1　 Dreamweaver CS4概述 3.2　创建并保存简单的HTML文档 3.3　创建和管理站点 3.1　Dreamweaver CS4概述 3.1.1　Dreamweaver CS4的主要功能 　　Dreamweaver CS4为Web应用程序开发人员和网页脚本设计人员提供了强大的代码编辑器，通过Dreamweaver CS4可以方便地进行ASP、JSP、PHP和ASP.NET等Web应用程序及Javascript、CSS等代码的编写。 3.1　Dreamweaver CS4概述 3.1.1　Dreamweaver CS4的主要功能 　　Dreamweaver CS4提供站点资源管理器来管理资源库。通过它可以轻松地跟踪和预览已存储在站点中的多种资源。如右图所示。可以将某种资源直接拖至当前文档，将其插入到某一网页中。 3.1　Dreamweaver CS4概述 3.1.1　Dreamweaver CS4的主要功能 　　Dreamweaver CS4可以管理和维护远程服务器，实现本地文件和远程服务器的文件同步。 　　借助Dreamweaver CS4中新增的实时视图功能，可以在类似真实的浏览器环境中设计网页， 同时仍可以直接访问代码。 3.1　Dreamweaver CS4概述 3.1.1　Dreamweaver CS4的主要功能 　　借助改进的JavaScript核心对象和基本数据类型支持，更有效地编写JavaScript脚本。 　　除了上述Dreamweaver CS4支持的典型功能外，它还提供了全新的用户界面、相关文件和代码导航器、HTML数据集、Adobe Photoshop只能对象等新增功能。 3.1　Dreamweaver CS4概述 3.1.2　Dreamweaver CS4工作界面介绍 3.1　Dreamweaver CS4概述 3.1.2　Dreamweaver CS4工作界面介绍 “应用程序开 发人员”模式 “应用程序开发人 员（高级）”模式 “经典”模式 “设计器”模式 “编码人员 （高级）”模式 “双重屏幕”模式 “编码器”模式 “设计人员 （紧凑）”模式 布局 模式 经典模式下，插入栏以工具栏的形式给出，如下图所示 。 3.1　Dreamweaver CS4概述 3.1.2　Dreamweaver CS4工作界面介绍 经典模式下， “文档工具栏”下方将停靠“标准工具栏”，其他模式下也可以通过选择菜单命令“查看”→“工具栏”→“标准”的方式，打开“标准工具栏”。如下图所示。 3.1　Dreamweaver CS4概述 3.1.2　Dreamweaver CS4工作界面介绍 3.2　创建并保存简单的HTML文档 依次单击如下的菜单命令，“文件”→“新建”，或者可以在“标准工具栏”中选择新建按钮来创建新文档，也可以使用快捷键Ctrl+N来创建新文档，弹出如下图所示的“新建文档”对话框。 3.2.1　创建网页文档 3.2　创建并保存简单的HTML文档 该对话框被分割成四个部分，从左到右分别是“文档类型”、“页面类型”、“布局”和“预览”。 “文档类型”部分列出了新建文档的类型，包括空白页、空模板、模板中的页等。 “页面类型”列表列出了同一种文档类型中可以使用的页面类型。 “布局”列表则列出了欲使用的页面的布局类型。 3.2.1　创建网页文档 3.2　创建并保存简单的HTML文档 新建空白的HTML文档，可以“页面类型”列表中选择“HTML”项目。 需要使用Dreamweaver CS4提供的HTML模板，可以在“页面类型”列表中选择“HTML模板”，然后单击“创建”按钮，即可弹出如下图的“新建HTML文档”界面。 3.2.1　创建网页文档 3.2　创建并保存简单的HTML文档 Dreamweaver CS4提供了四种文档的编辑和浏览模式： 代码模式：可直接编辑当前网页文档的HTML代码。 设计模式：提供了所见即所得的网页编辑模式。 拆分模式：提供了网页的HMTL代码和所见即所得模式下的对比编辑和浏览。 实时视图：提供了类似真实的浏览器环境中设计网页, 同时仍可以直接访问代码。 3.2.1　创建网页文档 页面属性设置用于对当前网页页面基本属性进行集中设置，可以设置的页面属性包括外观、链接、标题等属性。 单击“属性检查器”右下角的“页面属性”按钮，弹出的“页面属性”设置对话框。也可以依次单击菜单“修改”→“页面属性”，弹出“页面属性”设置对话框，如图所示。 3.2　创建并保存简单的HTML文档 3.2.2　设置页面属性 在左边的列表框中，选择相应的属性设置分类后。 在右边窗口中设置“页面字体”、“文本颜色”等属性。 设置完成后，单击“应用”