1 / 42

网页设计工具 Dreamweaver 陈丽珊

网页设计工具 Dreamweaver 陈丽珊. 网页设计工具 Dreamweaver. ■ 3.1 Macromedia Dreamweaver 4 的工作环境 ■ 3.2 文档的基本操作. 3.1 Macromedia Dreamweaver 4 的工作环境. 3.1.1 启动 Dreamweaver 4 3.1.2 认识 Dreamweaver 4 的窗口结构 3.1.3 控制浮动面板. 返回首页. 3.1.1 启动 Dreamweaver 4.

dalton-nielsen
Download Presentation

网页设计工具 Dreamweaver 陈丽珊

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 网页设计工具Dreamweaver • 陈丽珊

  2. 网页设计工具Dreamweaver ■ 3.1 Macromedia Dreamweaver 4的工作环境 ■ 3.2 文档的基本操作

  3. 3.1 Macromedia Dreamweaver 4的工作环境 • 3.1.1 启动Dreamweaver 4 • 3.1.2 认识Dreamweaver 4的窗口结构 • 3.1.3 控制浮动面板 返回首页

  4. 3.1.1 启动Dreamweaver 4 • 启动Dreamweaver 4有两种常用方法： （1）打开“开始”菜单，选择“程序”，选择“Macromedia Dreamweaver 4”，再选择“Dreamweaver 4”命令即可启动Dreamweaver 4。 （2）在Windows的窗口或资源管理器中直接启动Dreamweaver 4并载入要编辑的HTML文档，首先选中要编辑的HTML文件图标，单击鼠标右键，选择“Edit with Dreamweaver”命令，即可启动Dreamweaver 4，并载入要编辑的HTML文档。启动后如图3-1所示。

  5. 图3-1 Dreamweaver 4的窗口结构 返回本节

  6. 3.1.2 认识Dreamweaver 4的窗口结构 • Dreamweaver应用程序操作环境包括： 1．工具条 2．文档窗口 3．启动栏 4．对象面板 5．属性面板 6．可停靠浮动面板 7．标题栏 8．菜单栏 9．状态行 返回本节

  7. 3.1.3 控制浮动面板 1．使用启动面板 • 单击启动面板上的“CSS Styles”（CSS样式）按钮，即会将可停靠浮动面板上的CSS Styles选项卡激活到顶端。 图3-2 启动面板和微型启动栏的对应关系

  8. 图3-3 使用启动面板

  9. 图3-4 在对象面板上选择对象类型 2．使用对象面板

  10. 3．使用属性面板 图3-5 选中文本时的属性面板 图3-6 选中图像时的属性面板

  11. 4．浮动面板的移动和重设大小 • 通过拖动浮动面板的标题栏，就可以将浮动面板在桌面上移动，浮动面板的位置并不局限于Dreamweaver的文档窗口内，实际上，它可以移动到Windows桌面上的任何位置。 • 除了启动面板和属性面板，其他大多数的浮动面板，包括对象面板和可停靠浮动面板，其大小都可以任意调整，通过拖动浮动面板的边框，就可以改变其大小。

  12. 5．停靠浮动面板 图3-7 带有多个选项卡的可停靠浮动面板 图3-8 Dreamweaver 4的窗口菜单

  13. 6．状态行 图3-9 状态行

  14. 在Dreamweaver 4文档窗口的状态行上一些功能设置（如图3-10~3-14所示）： §标记选择器 §窗口大小弹出菜单 §窗口大小弹出菜单 §文档大小和下载速度 §微型启动栏 §设置状态条属性 §标尺和网格 §设置中文环境 §查找帮助信息

  15. 图3-10 窗口大小弹出菜单

  16. 图3-11 参数选择对话框

  17. 图3-12 设置字体和编码方式

  18. 图3-13 Dreamweaver 4的“帮助”菜单

  19. 图3-14 Dreamweaver 4的帮助系统 返回本节

  20. 3.2 文档的基本操作 • 3.2.1 文档的创建和存储 • 3.2.2 理解空白文档的初始代码 • 3.2.3 添加文本和插入对象 • 3.2.4 使用历史面板 • 3.2.5 编辑网页的头部内容 返回首页

  21. 3.2.1 文档的创建和存储 1．创建空白文档 • 打开“文件”菜单，选择“新建”命令。 2．打开现有文档 • 在Windows的资源管理器打开文档的图标，选择“用Dreamweaver编辑”命令；在Dreamweaver已经启动的情况下，打开“文件”菜单，选择“打开”命令；打开“文件”菜单，选择“导入”，再选择“导入 Word HTML”命令来打开该文档。

  22. 3．基于模板创建文档 • 选择需要使用的模板，单击“选择”按钮，即可基于模板创建新文档。 4．存储文档 • 保存文档的方法与一般Windows应用程序差别不大，这里无需多言。 5．关闭文档 • 打开“文件”菜单，选择“关闭”命令。 返回本节

  23. 3.2.2 理解空白文档的初始代码 1．<html>和</html>：是HTML文档的开始和结束标记，HTML文档中所有的内容都应该在这两个标记之间，一个HTML文档总是以<html>开始，以</html>结束的。 2．<head>和</head>：位于文档的头部，用于包含当前文档的有关信息。 3．<title>和</title> ：位于HTML文档的头部，也即位于<head>和</head>标记之间。 4．<body>和</body>：用于定义HTML文档的正文部分，通常它在</head>标记之后，而在</html>标记之前。 返回本节

  24. 3.2.3 添加文本和插入对象 1．添加文本 • 可以直接在文档窗口中键入文本。 2．插入对象 • 打开“插入”菜单，选择要插入对象的菜单项命令或显示对象面板，找到要插入对象对应的按钮。单击（拖动按钮）即可在插入点所在位置插入对象。

  25. 3．插入日期 图3-15 插入日期对话框

  26. 4．插入特殊字符 表2-1 常见的字符及其参考

  27. 图3-16 对象面板上的特殊字符按钮

  28. 5．插入水平线 • 插入和编辑水平线 • 理解水平线标记<hr> 图3-17 水平线的属性面板

  29. 6．在文档窗口中选择元素 • 不可见元素 • 定制不可见元素的显示 • 显示不可见元素 • 显示头部元素

  30. 图3-18 设置不可见元素的显示方式

  31. 7．设置文档的页面属性 • 打开“修改”菜单，选择“页面属性” 图3-19 页面属性对话框 返回本节

  32. 3.2.4 使用历史面板 图3-20 历史面板 返回本节

  33. 3.2.5 编辑网页的头部内容 1．插入头部内容 图3-21 对象面板上的头部元素按钮

  34. 2．认识头部元素 • 元数据（meta data）：是HTML头部的主要组成部分，主要用于表示一个文档的页面信息，这些信息可以被计算机识别，用于某些特定的场合。 •  <meta>标记：是实现元数据的主要标记。 • <base>标记：定义了文档的基础URL地址，参见表2-2。 • <link>标记：定义了文档之间的包含。在HTML的头部可以包含任意数量的<link>标记。

  35. 表2-2 target的属性值

  36. 3．插入元数据 图3-22 插入元数据

  37. 4．插入关键字 图3-23 插入关键字

  38. 5．插入描述信息 • 单击对象面板上的“插入描述”按钮。这时会出现一个对话框，提示输入描述信息，该对话框同图3-23所示的对话框类似。

  39. 6．定义自动刷新 图3-24 定义刷新特性

  40. 7．设置基础URL地址 图3-25 插入基础URL地址

  41. 8．设置文档链接 图3-26 设置文档链接关系 返回本节

  42. Thank you very much! 本章到此结束， 谢谢您的光临！ 结束放映

More Related