第二章 使用网页工具制作静态网页讲解.ppt

第二章 使用网页工具制作静态网页 【本章内容】 2.1 ?Dreamweaver入门 2.2 文本编排与CSS样式 2.3 插入图像、动画与媒体元素 2.4 插入超链接 2.5 网页表格 2.6 使用表单 2.7 层的使用 2.8 框架的使用 第2.1节 Dreamweaver入门 【本节内容】 一. Dreamweaver CS4的界面 二. 建立本地站点 三. 新建HTML网页 一. Dreamweaver CS4的界面 DreamweaverCS4系统界面: 一. Dreamweaver CS4的界面 菜单栏 菜单栏是描述软件完整功能的方式，它提供软件功能的所有命令选项。 插入栏 插入栏包括多种网页对象（常用、布局、表单、文本、HTML、应用程序、Flash元素和可以自定义的收藏夹），可用于插入相应的对象。 一. Dreamweaver CS4的界面 工具栏 工具栏中包含按钮可以在文档的不同视图间快速切换：“代码”视图、“设计”视图、同时显示代码和设计视图的”拆分”视图,以及即时调试运行效果”实时视图”。工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。 状态栏 状态栏提供与您正创建的文档有关的其它信息，它的作用和含义如图所示。 一. Dreamweaver CS4的界面 属性面板 网页中的对象都有自身的属性，当选取不同的对象时,属性面板显示的内容不相同,属性面板显示了被选取对象的各种属性，可以随时进行修改。 文档窗口 文档窗口显示当前文档的内容或内容代码，也就是你编辑网页文档的地方，在这里可以通过菜单命令、工具栏按钮、插入栏按钮、属性面板以及面板级等到工具来编辑、制作网页，也可以通过按”实时视图”来检验网页的调试结果,这与浏览器中的显示效果基本相同。 一. Dreamweaver CS4的界面 选项面板 选项面板可以随时以 直观的方式获得特定功能， 它们一般组合成面板组嵌 入在界面的右边。如图： 二. 建立本地站点 在Dreamweaver下创建本地站点的具体步骤： 1、选择[站点]-[新建站点]，出现“定义站点”对话框。 2、可以使用“高级”选项页进行站点的定义。 3、设置本地信息，如下图所示。 本地信息共有8个项目需要设置：定义“站点名称”、选择网站本地文件夹、确认是否“自动刷新文件列表”、选择“默认图像文件夹”、选择链接相对地址、选择“默认图像文件夹”路径、输入“HTTP地址”、“区分大小写的链接”、确认是否“启用缓存”。 二. 建立本地站点 二. 建立本地站点 举例：定义一个站点“我的网站” ① 在“站点名称”文本框中输入 我的网站 。 ② 在“本地根文件夹”中输入“D:\web”或是单击右边的文件夹图标后进行选择此文件夹。 ③ 选择“自动刷新本地文件列表”单选框。④ 在“默认图像文件夹”文本框中输入 D:\Web\images，同样可以点击文件夹图标以进行选择。 ⑤ 保持“链接相对于”单选框的默认值不变。 ⑥ 在“HTTP地址”文本框中，你可以输入你已经申请的网站的域名(可选项)，如。 ⑦“区分大小写链接”和“缓存”两项可以保持默认值不变。 ⑧ 单击“确定”按钮完成本地站点的设置。 三.新建HTML网页 新建文档 打开Dreamweaver后，就会显示使用开始页面，在开始页面“创 建新项目”选项区中选择某个新建项目选项，如HTML，即可新 建相应类型的新文档，当然也可以使用菜单来新建网页。 保存网页 新建网页后，先把网页保存在站点目录下，保存新建的HTML文 件时，默认的文件名是Untitled-1等名称，但一般不使用默认 的文件名而是自己定义文件名，如temp，index，login等有一 定的含义的半角英文（或拼音）名称。默认的位置是在站点文 件夹下面，当然也可以把网页保存在在站点下面的其它文件夹 中，一般不保存在站点文件夹以外。 三.新建HTML网页 预览网页 最常见的浏览正在制作的网页两种方式： ①在DreamweaverCS4编辑窗口中，点击“实时视图按钮”； ②在Windows（或其它操作系统）中打开站点文件夹，找到已经保存过网页文件，双击文件就可以预览此网页； ③先保存网页，使用菜单[文件]-[在浏览器中预览]-[IExplore6.0]，或使用快捷键F12进行预览网页（推荐使用快捷键F12）。 打开与编辑网页 可以在DreamweaverCS4文件面板中看到已