1 / 100

网页制作工具 Dreamweaver

网页制作工具 Dreamweaver. 网页制作工具. “ 所见即所得 ” 网页编辑器: 优点就是直观、使用方便、容易上手，但也存在难以精确达到与浏览器完全一致的显示效果的缺点 “ 非所见即所得 ” 网页编辑器（即源代码编辑器）:所有的HTML代码都是在用户的监控下产生的，但是，工作效率太低。. 网页制作工具 FrontPage. Microsoft 公司专门开发的网页制作专业工具。目前最高版本是 FrontPage 2003 。 网页编辑功能非常强大。 强大的网页管理功能. 网页制作工具. Dreamweaver

freja
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. 网页制作工具 • “所见即所得”网页编辑器: 优点就是直观、使用方便、容易上手，但也存在难以精确达到与浏览器完全一致的显示效果的缺点 • “非所见即所得”网页编辑器（即源代码编辑器）:所有的HTML代码都是在用户的监控下产生的，但是，工作效率太低。

  3. 网页制作工具FrontPage • Microsoft公司专门开发的网页制作专业工具。目前最高版本是FrontPage 2003。 • 网页编辑功能非常强大。 • 强大的网页管理功能

  4. 网页制作工具 • Dreamweaver • Macromedia公司推出的主页编辑工具。 • 所见即所得网页编辑器，支持最新的XHTML和CSS标准。 • 最新版本是Dreamweaver 8，用于对Web站点、Web页和Web应用程序进行设计、编码和开发。 • 借助Dreamweaver还可以使用服务器语言（例如ASP、ASP.NET、ColdFusion标记语言、JSP和PHP）生成支持动态数据库的Web应用程序。

  5. 网页制作工具 Adobe Pagemill 适合初学者制作较为美观，但不是非常复杂的主页。 HomeSite 更适合进行比较复杂和精美页面的设计。如果用户希望能完全控制页面制作的进程，那么HomeSite是最佳选择。 Visual Studio.Net 支持相应程序的自动语法检查，还支持程序的调试与编译。内置有VB.Net、VC++.Net、C#等程序开发工具，集程序的调试、编译等功能于一身 EditPlus 目前非常流行的一款功能强大的文本编辑器，该软件功能强大、易于使用、兼容性强，支持几乎所有程序语言的代码色彩显示。它的缺点就是不支持程序的调试。

  6. 第8章 网页制作工具Dreamweaver 8 8.1 Dreamweaver简介 8.2 站点管理 8.3 制作第一个网页 8.4 超链接 8.5 使用图像 8.6 使用多媒体对象 8.7 使用表格

  7. 8.1 Dreamweaver简介 8.1.1 Dreamweaver 8的启动和主工作区 一系列初始化过程后，首先显示“工作区设置”对话框。接下来显示起始页对话框，可以选择“打开最近项目”、“创建新项目”或“从范例创建”。 图8-1 “工作区设置”对话框 图8-2 起始页

  8. 8.1 Dreamweaver简介 2．Dreamweaver 8的主工作区 主工作区由插入工具栏、文档工具栏、文档窗口、属性面板等部分组成 图8-3 Dreamweaver 8的主工作区

  9. 8.1 Dreamweaver简介 • （1）插入工具栏 • 默认显示的是“常用”类的主要功能按钮。 • 单击“常用”按钮会弹出一个下拉菜单，其中包含了插入工具栏中的其他功能菜单。 • 选择不同的分类，插入工具栏中包含的功能按钮也随之改变。 图8-4 插入工具栏及其功能分类菜单

  10. 插入面板 • 包含用于将各种类型的“对象”（如图像、表格和层）插入到文档中的按钮。 • 每个对象都是一段 HTML 代码，允许插入时设置不同的属性。 • “常用“项面板、布局（标准视图、布局项视图）、“文本“、“表单“、“模板“、“字符“、“媒体“、“文件头“、“脚本“、“应用程序“项面板

  11. 插入面板 • 常用 ：创建和插入最常用的对象，如图像和表格； • 布局 ：插入表格、div标签、层和框架。可从表格视图（标准、扩展表格、布局）中选择。选择“布局”模式后，可使用 布局工具：“绘制布局单元格”和“绘制布局表格”。 • 表单 ：用于创建表单和插入表单元素 • 文本 ：插入文本格式设置标签和列表格式设置标签 • HTML ：插入用于水平线、头内容、表格、框架和脚本的 HTML 标签。 • 服务器代码：适用于使用特定服务器语言（ ASP、ASP.NET、JSP 和 PHP）等的页面。 • 应用程序：插入动态元素，例如记录集、重复区域以及记录插入和更新表单。 • Flash 元素：插入 Flash 元素。 • 收藏：将“插入”栏中常用按钮分组和组织到常用位置。

  12. 8.1 Dreamweaver简介 • （2）文档工具栏 • 使用户可以在文档的不同视图间快速切换：代码视图、设计视图、和拆分视图。 • 还包含与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。 图8-5 文档工具栏的常用命令和选项

  13. 8.1.2 Dreamweaver 8的参数设置 • 选择“编辑”→“首选参数”命令,打开“首选参数”对话框。选择“分类”列表中的“常规”选项。 • 通常设置的属性有文档选项和一些编辑选项。 图8-12 常规参数设置中更改工作区

  14. 8.1 Dreamweaver简介 • 2．新建文档参数设置 • 建立默认的新文档类型和首选参数。 • 选择“分类”列表中的“新建文档”选项，对话框右侧显示出相关的属性。 图8-13 新建文档参数设置

  15. 8.1 Dreamweaver简介 3．站点参数设置 选择“分类”列表中的“站点”选项,用于为“文件”面板设置站点首选参数。 图8-14 站点参数设置

  16. 8.2 站点管理 • 站点:一系列文档的组合，这些文档之间通过各种链接关联起来，可能拥有相似的属性，也可能只是毫无意义的链接。 • 8.2.1 本地站点和远端站点 • 站点也是一种文档的磁盘组织形式，它同样是由文档和文档所在的文件夹组成的。 • 利用不同的文件夹，将不同的网页内容分门别类地保存，这是设计网站的必要前提。 • 结构良好的网站，不仅便于管理，也便于更新。

  17. 8.2 站点管理 8.2.2 建立本地站点 规划好站点结构后，先在Dreamweaver中定义站点，然后才能进行开发。 图8-15 站点设置 图8-16 站点结构

  18. 8.2 站点管理 8.2.3 管理本地站点 1．编辑站点 ① 在“文件”面板中的“站点名称”下拉列表中选择“管理站点”项，打开“管理站点”对话框。 ② 在“管理站点”的对话框左侧列表中选择需要编辑的站点，然后单击右侧按钮，则可以进行相应的操作。 图8-20 选择要编辑的站点

  19. 8.2 站点管理 8.2.3 管理本地站点 2．文件的基本操作 使用“文件”菜单对单独的文件进行管理，例如，执行“新建”、“打开”、“保存”、“另存为”等命令。 也可以在“文件”面板中，在文件或文件夹上单击鼠标右键，在弹出快捷菜单的“编辑”命令子菜单中，执行“新建”、“打开”、“删除”、“移动”、“复制”、“重命名”等命令。 3．指定站点首页 首页就是网站的门面，通常首页文件中总包含有若干指向其他主要网页的超链接，用户可以先为网站创建一个空白首页，然后进行编辑，并可以利用站点地图查看网站中超链接的情况。

  20. 8.3 制作第一个网页 8.3.1 制作网页一般过程 【例8-2】制作一个浅黄色背景的网页，在页面上添加文字和水平线，展示一个娱乐网页的宣传内容，并且在页面的右下方显示感谢信息和当前日期，效果如图8-22所示。 图8-22 实例效果 【例8-2】

  21. 8.3 制作第一个网页 8.3.2 设置页面属性 页面属性是指网页的一般属性信息，例如，网页标题、网页的背景颜色、背景图像、超链接颜色、跟踪图像等。 1．设置网页标题 网页标题是用来说明网页内容的文字，显示在浏览器窗口的标题栏中。通常，每个网页都应该有一个标题，而网页标题文字最好能够恰如其分地描述网页的内容。 2．设置网页其他属性 如果需要设置网页的其他属性，可以打开“页面属性”对话框进行设置。

  22. 页面属性

  23. 8.3 制作第一个网页 8.3.3 网页基本元素 在通常情况下，网页上一般都包含文本、日期、特殊符号及水平线等基本元素。 1．文本和特殊符号 文本的操作主要包括：输入文字、设置文字大小、设置字体、设置文本颜色、设置文本对齐方式等。 2．日期 Dreamweaver提供了一个方便的日期对象，该对象使用户可以用任何喜欢的格式插入当前日期，还可以选择在每次保存文件时自动更新该日期。 3．水平线 水平线对于组织信息很有用。在页面上，可以使用一条或多条水平线以可视方式分隔文本和对象。

  24. 设置文本格式 段落的格式、字体、字号、字的颜色、字体加粗／倾斜、对齐方式（左对齐／居中／右对齐）、文字所链接的路径或URL等。

  25. 文本属性面板 • 格式设置所选文本的段落样式。 • 样式显示当前应用于所选文本的类样式。如果没有对选定内容应用过任何样式，则弹出式菜单显示“无 CSS 样式”。如果已对选定内容应用了多个样式，则弹出式菜单是空的。 • 粗体根据在“首选参数”对话框的“常规”类别中设置的样式参数选择，将 <b>或 <strong>应用于选定的文本。 • 斜体根据在“首选参数”对话框的“常规”类别中设置的样式参数选择，将 <i>或 <em>应用于选定的文本。

  26. 编辑段落 • 段落：格式上统一的一段文本 • 输入一段文本，按<enter>键就自动构成了段落。<p> </p> • 对齐段落有三种方式：左对齐、居中和右对齐 • 选定要设置对齐方式的段落，使用Text菜单中Align菜单项的Left、Center或Right选项，或者在属性面板中，用鼠标单击右上角的对齐按钮 • 格式中的标题 • 格式中的预格式化：处理空格

  27. 文本属性面板 • 改变字体： 1.选定要改变字体的文本，选择“文本”菜单中“字体”菜单项中的相应选项； 2.从属性面板上字体列表中选择相应的选项 • 如果没有选定任何文本，则改变的字体将应用于以后输入的文字； • 如果字体列表中没有需要的字体，可以单击”编辑字体列表“选项，在随后出现的对话框中可以添加需要的字体到字体列表中。

  28. 文本的字体属性 • 改变字号：选定要改变字号的文本，从属性面板上”大小“的下拉列表中选择相应的选项。 • 如果没有选定任何文本，将会改变以后输入文字的字号； • 尽量不要使用自己安装的字体，用户机器上可能没有安装。 • 改变颜色

  29. 文本属性面板 此处为粗体显示文本 此处为大字体显示文本 此处为小字体显示文本 此处为斜体文本 此处为等宽字体文本 此处为下划线文本 此处为带删除线的文本

  30. 缩进 • 缩进段落是针对网页边距而言的，有增加缩进和减小缩进两种。 • 增加缩进是将当前的段落向文档窗口的右侧移动；减小缩进则是将当前的段落向文档窗口的左侧移动， • 选定要缩进的一个或多个段落，在“文本”菜单中选择增加缩进或减小缩进；或者使用属性面板中的增加缩进按钮 或减小缩进按钮进行段落缩进 。

  31. 文本属性编辑－项目列表 • 无序列表 <ul> </ul> • 有序列表 <ol> </ol> • 目录列表 <dl></dl> • 列表属性

  32. 8.4 超链接 8.4.1 超链接的基本概念 网页中的超链接就是以文字或图像等作为链接对象，然后指定一个要跳转的网页地址。当浏览者单击文字或其他对象时，浏览器将跳转到指定的目标网页。 1．超链接的分类 根据超链接目标文件的不同，超链接可分为页面超链接、锚点超链接、电子邮件超接链等；根据超链接单击对象的不同，超链接可分为文字超链接、图像超链接、图像映射等。 2．路径 创建超级链接时必须了解链接与被链接文本的路径。在一个网站中，路径通常有3种表示方式：绝对路径、根目录相对路径和文档目录相对路径。

  33. 8.4 超链接 8.4.2 设置超链接 【例8-3】制作一个“金庸名著赏析”网页，使用锚记链接、页面间链接和电子邮件链接等技术。当用户单击主页面栏目中某个名著的链接时，首先链接到本页面内该作品的简介位置，如果用户需要查看详细内容，单击“详细内容”链接，进入相应的页面显示详细的作品内容。使用锚点链接实现页内链接，页面之间可以通过“返回”链接返回到主页面，实例效果如图8-38所示。 【例8-3】

  34. 超链接分类 • 内部链接：在同一个站点内的不同页面之间相互联系的超链接。 • 锚点链接：可以链接到网页中某个特定位置的链接。 • 外部链接：把网页与Internet中的目标相联系的链接。

  35. 普通文本超级链接 • 文本的Properties面板上有Link和Target两项，这就与超级链接有关。 • 选中所需的文本，有四种方法可使它链接到其它页面。 • 直接在Link后填入要链接到的页面的地址。最好用相对地址，而不用绝对地址。 • 点击后面的 图标，然后选取要链接到的页面。 • 使用 图标。用快捷键F5可打开你定义的本地站点的文件列表，用鼠标点击 ，不要松开，拖动至你要链接到的页面即可。 • 用鼠标把本地站点文件列表中的文件直接拖到Properties面板上Link后即可

  36. 文本属性面板－链接 • 在链接栏输入链接网页的地址，单击链接文字可以直接跳到被链接的页面。 • _blank:空白视窗，保留原来的窗口，新开启一个窗口浏览所链接的文件内容； • _parent:上一层页框视窗，若网页使用框架，则所链接的网页回到上一层的框架所在窗口； • _self:本身视窗，默认链接显示方式，所链接的内容取代原来窗口的内容； • _top:全视窗，以全窗口的方式出现所链接的网页，取代所有窗口内容。

  37. 设置文本链接的状态 • 一个未被访问过的链接与一个被激活的链接在形式上肯定会有所区别，链接被访问过了也会发生变化，提示用户这是一个已经点击过的链接，所有这些都是链接的状态。通过设置不同的文本颜色可以使各个状态区别开来。 • 设置不同的文本颜色的具体步骤如下： • 打开包含文本链接的文档“园丁乐园”，选择主菜单中的“Modify修改）”|“Page Properties（页面属性）”命令，打开“Page Properties（页面属性）”对话框； • 单击“Links（链接）”项右边的图标，打开调色板，选取一种颜色； • 同样为“Visited Links（访问过的链接）”、“Active（活动链接）”项设置不同的颜色； • 单击“Ok”按钮，完成设置。

  38. 删除文本超链接 先用鼠标选定文本对象，将光标定位于属性面板的“Link”文本框中，用“BackSpace”键或“Delete”键，将其显示的超链接对象文件名删除，再回车，或选择“Modify”|“Remove Link”命令，都可以删除超链接而保留原文本对象。

  39. 插入E－mail及其链接 • 单击“常用”对象面板上的“电子邮件”按钮； • 设置邮件地址，单击确定按钮。

  40. 内部超链接 1．为文字添加超链接 2．为图片添加超链接

  41. 创建锚点 （1）将光标移到需要加入锚点的地方，一般是将光标放置在一行或是一段文字的开头部分； （2）单击对象面板“Invisibles”类上的“插入锚点” 按钮，将弹出“Insert Named Anchor（插入命名锚点）”对话框； （3）在对话框的“Anchor Name”文本框输入锚点的名称； （4）单击“OK”按钮。

  42. 命名锚点 ① 只能使用字母和数字，锚点命名不支持中文。虽然在插入锚点对话框中能输入中文，但在属性面板上显示的则是一堆乱码，且在为锚点添加链接的时候，也无法工作。 ② 锚点名称的第1个字符最好是英文字母，一般不要以数字做为锚点名称的开头。 ③ 锚点名称区别英文字母的大小写。 ④ 锚点名称间不能含有空格，也不能含有特殊字符。

  43. 链接锚点 • 创建锚点后，还必须链接锚点。选择想要链接到锚点的文字或图片，然后按如下方法中的任意一种进行操作。 • 在属性面板上的“Link”文本框中输入符号 # 和锚点名称。 • 选择文字或图片后，按住Shift键，然后拖动鼠标指向锚点。在属性面板上的“Link”文本框中将自动出现符号#和该锚点的名称。 • 按住属性面板上的“Point to File（指向文件）”按钮，并拖动鼠标指向锚点，属性面板上的“Link”文本框中自动出现符号 # 和该锚点的名称。

  44. 链接锚点时，应注意以下事项： ① 在#和锚点名之间不要留有空格，否则链接会失败。 ② 在不同文件夹中为锚点创建链按时，其文件名后缀必定是“．htm”，而不能写成“．html”，否则链接也会失败。 ③ 符号#必须是半角符号，而不能为全角符号。

  45. 外部超链接 • 将本站点的某个对象与Internet上的目标建立一种相互的关系。 例如选中某个对象，在属性面板的Link文本框中填上http://www.swjtu.edu.cn再回车，就可以了。

  46. 添加下载文件超链接 • 网站提供文件下载功能的方法 • 首先选择主窗口的菜单站点→站点文件命令 • 打开站点窗口，找到需要链接的目标文件; • 选择网页中需建立超链接的文字，按下Shift键拖动鼠标到站点窗口中的目标文件。

  47. 创建空链接 • 空链接是一个未指定目标的链接，Dreamweaver 的行为面板中列出了许多行为，这些行为相当于使用JavaScript编写的程序或函数，要想对文本设置行为，首先为文本建立空链接，这样行为才有效。 • 为文本建立超链接时，只要先在文档窗口选定文本，然后在属性面板中的“链接”栏中输入一个数值符“#”即可。建立空链接的目的就是为了应用行为，其他情况下不必建立空链接。

  48. 8.5 使用图像 8.5.1 插入图像 【例8-4】制作一个学校建筑的展示网页，通过学校校风图像和循环滚动图像的展示，突出学校的建筑风格和特色。循环的图像支持超链接，并且鼠标移动到图像上时，画面静止；鼠标移出图像后，图像继续滚动，效果如图8-50所示。 图8-50 实例效果 【例8-4】

  49. 制作特色的滚动效果 将光标定位到第一副画面之前，添加如下代码 <marquee behavior="scroll" scrolldelay="200" width="500" height="85" onmouseover='this.stop()' onmouseout='this.start()'> <a href="&#65283;"><img src="image/001.gif" width="144" height="85" border="0"/></a><a href="&#65283;"><img src="image/002.gif" width="149" height="85" border="0"/></a><a href="&#65283;"><img src="image/003.gif" width="153" height="85" border="0"/></a><a href="#"><img src="image/004.gif" width="132" height="85" border="0"/></a> </marquee>

  50. 8.5 使用图像 8.5.2 图像映射 【例8-5】制作一个认识世界地图的网页，当用户将鼠标移至地图的不同位置时，显示出相应的说明文字，例如，鼠标移到南美洲区域上时，便会显示“南美洲”的字样。单击地图的不同位置，打开相应的链接页面显示相应的简介，效果如图8-57所示。 图8-57 实例效果 【例8-5】

More Related