Dreamweaver网页设计 站点的基本操作 添加文本 添加图像 创建超级链接 在网页中应用表格 在网页中应用框架 在网页中应用层 网页插入动态元素 行为与事件 CSS样式 为网页添加表单 模板与资源列表.
Download ReportTranscript Dreamweaver网页设计 站点的基本操作 添加文本 添加图像 创建超级链接 在网页中应用表格 在网页中应用框架 在网页中应用层 网页插入动态元素 行为与事件 CSS样式 为网页添加表单 模板与资源列表.
Dreamweaver网页设计 站点的基本操作 添加文本 添加图像 创建超级链接 在网页中应用表格 在网页中应用框架 在网页中应用层 网页插入动态元素 行为与事件 CSS样式 为网页添加表单 模板与资源列表 站点的基本操作 通过[站点][新建站点]菜单命令或“文件”面板新建站点。 新建文件夹 建立好站点后就可以在站点中新建文件夹， 该文件夹主要用来存储这个网站中用到的网页元素， 如图片、音乐等。 页面设置 当站点建立好之后，就可以进行具体的网页编辑操作了，但在编 辑网页之前，还需要对页面进行一些简单的属性设置以方便以后 的工作。 添加文本 插入普通文本 • 将插入点定位在文档编辑区中，直接输入文本即 可。 • 在Word等文本编辑软件中编辑好文本之后，将其 复制到剪贴板上，然后在Dreamweaver 8中将插 入点定位到文档编辑区中，粘贴剪贴板中的文本 即可。 插入特殊字符 在Dreamweaver 8中编辑文本时，往往会遇到一 些无法通过键盘直接输入的特殊字符，如版权符 号©、注册商标符号®等，这时可通过 Dreamweaver 8插入特殊字符的功能进行插入。 添加水平线 在文档编辑区将插入点定位到所需位置，选择[插入 ][HTML][水平线]菜单命令或单击“插入”栏中的“HTML”选项卡在 其中单击 按钮即可添加水平线。 设置字体外观 用户也可对属性面板的“字体”下拉列表框中的字体列 表重新编辑。 有序列表 有序列表又称为编号列表，是有一定排列顺序的列 表，一般前面有数字前导字符，其中前导字符可以 是阿拉伯数字、英文字母或罗马数字等。 无序列表 无序列表又称为项目列表，是一系列无顺序级别关 系的项目文本组成的列表，一般前面是用项目符号 作为前导字符。 添加图像 直接插入 • 选择[插入][图像]菜单命令。 • 单击插入栏的“常用”选项卡中的按钮。 • 按【Ctrl+Alt+I】键。 设置图像属性 在网页中插入图像后可通过属性面板对其属性进行修改等设置。 鼠标经过图像设置 鼠标经过图像是一种在浏览器中查看网页 时，鼠标光标经过该图像时，图像发生变化的 动态图像。 创建超级链接 创建文本超级链接 文本超级链接是最常见的超级链接，通过使用鼠标点 击文本即可从一个网页跳转到另一个网页。 创建锚链接 在制作网页时，为了达到跳转到网页固定位置的目的， 可以使用锚链接。通过对网页中指定位置的命名，利用超级链 接打开目标网页时可直接跳转到相应的命名位置上。 创建命名锚记 链接命名锚记 创建好锚记之后，必须创建对应的超 级链接源端点。 创建电子邮件超级链接 电子邮件在网络应用中十分广泛，在网页中建 立电子邮件超级链接可方便网页浏览者与设计者之 间的联系。 为一般图像创建超级链接 创建图像热点超级链接 要在一幅比较大的图片中添加许多超级链接时，应该将图片化整为 零，分割成较小的图片，然后分别为这些小图像上建立超级链接来达到 目的，但这时整幅图片就不能对齐，利用Dreamweaver 8的图像热点 超级链接功能就能避免这个问题。 插入导航条 导航条一般由图像或图像组组成，这些图像的显示内容随 用户的操作不同而进行相应的变化。导航条为访问者浏览不同 网页提供了一条捷径。 在网页中应用表格 插入表格 在网页制作中，对页面进行布局是非常重要的，表格就是页 面布局中常用的方式。Dreamweaver 8不仅支持在表格中 有序地排列数据，还可用表格对网页中的文本、图像及其 他元素进行定位。 设置表格属性 “表格”属性面板中显示了插入表格的所有 特性，通过修改面板中的参数可快速地编辑 表格外观。 设置单元格属性 在编辑网页时除可以设置整个表格的属性外，还可以单独设 置表格中某行、列或单元格的属性。 在网页中应用框架 框架是将一个页面划分成不同的文档区，每个文档区显示 独立的内容，其效果是在浏览网页时，网页中一部分区域（如 公司Logo、导航条）内容不改变，而其他区域内容在不断发生 改变。 框架集是HTML文件，它定义一组框架的布局和属性，包 括框架的数目、大小、位置以及在框架中初始显示页面的地址。 框架集文件本身不包含要在浏览器中显示的网页内容（对不能 显示框架的浏览器进行的处理除外，即<noframes>部分）， 框架集文件只是向浏览器提供应如何显示一组框架以及在这些 框架中应显示哪些网页的有关信息。 在编辑窗口中选择 在编辑窗口中选择框架的方法很简单，按住【Alt】键，在要选 择的框架内单击鼠标左键即可。被选取的框架边框呈虚线显示。 选择框架集时，单击框架边框即可，选取的所有框架边框呈虚线。 在“框架”面板中选择 在“框架”面板中单击框架区域中的任意位置即可 选择框架，选中的框架以粗黑框显示。 在“框架”面板中单击框架边框即可选择框架集， 如果要选择整个框架集，只需单击框架最外面的边 框即可。 保存框架 • 将插入点定位到要保存的框架中。 • 选择[文件][保存框架]菜单命令，在打开的 “另存为”对话框中像保存其他网页一样指定保 存路径和文件名，然后单击“保存”按钮即可。 保存框架集 • 选中要保存的框架集。 • 选择[文件][保存框架页]菜单命令，打开“另存为”对 话框。 • 在“保存在”下拉列表框中选择框架集的保存路径，在 “文件名”文本框中为框架集命名。 • 单击“保存”按钮即可保存框架集。 保存框架集中的所有网页 框架集的属性设置 使用框架集属性面板可以查看和设置大多数框架 集属性。 框架的属性设置 处理不能显示框架的浏览器 由于在低版本的浏览器中不能正确显示使用了框 架的网页和框架中的内容，因此在Dreamweaver 8中 允许指定在不支持框架的基于文本的浏览器和较旧的 图形浏览器中显示内容。此类内容存储在框架集文件 中，用<noframes>标签括起来。当不支持框架的浏览 器加载该框架集文件时，浏览器只显示用<noframes> 标签括起来的内容。 框架的链接 在使用了框架技术文档中的链接与一般文 档中的链接不同，增加了与框架有关的链接目 标，可以在一个框架内使用链接改变另一个框 架的内容。 在网页中应用层 • 在文档编辑区选择一个层，在出现的调整柄上按住鼠标左键不 放并拖动，当调整到适当的大小时释放鼠标即可。 • 在文档编辑区选择一个层，按住【Ctrl】键的同时再按键盘上的 方向键即可按一次1个像素的步幅来调整层大小。 • 在文档编辑区选择一个层，按住【Shift+Ctrl】键的同时再按键 盘上的方向键即可按一次10个像素的步幅来调整层大小。 • 在文档编辑区选择一个层，以像素为单位在属性面板中输入宽 度和高度的值。 设置层的属性 在“属性”面板中进行设置。 将层转换为表格 层和表格都是对网页进行精确定位的工具，用层定位比表 格定位使用起来更加方便，但层只有在Internet Explorer 4.0 或Netscape Navigator 4.0以上的版本中才能够正确显示。 表格对浏览器的版本高低没有要求，如果要使设计的网页在 更低版本的浏览器中也能被正确显示，那么可将用层设计的 网页转换为表格形式。 将表格转换为层 在网页制作中，表格的灵活性没有层的灵活 性强，为了方便调整一些元素的位置，可将表格 转化为层。由于层能定位到网页中任何位置，所 以将表格转换为层后可以方便定位网页元素的位 置。 网页插入动态元素 插入Flash影片 插入Flash影片之前，首先应在Flash制作软件中完成影片的制 作，最好将其制作好后保存在站点相应文件夹中。 插入Flash按钮 在Dreamweaver 8中可以插入自己制作的Flash按钮，也 可插入Dreamweaver 8集成的动态按钮。 插入Flash文本 Flash文本是Dreamweaver 8集成的文本动画。插入Flash 文本与插入Flash按钮的方法类似。 插入Flash Video 插入Flash Video是Dreamweaver 8新增加的功能，使用该功 能可以轻松的在网页中插入一段Flash视频，在网页中浏览该视频 时，网页不仅显示该视频信息，还将显示播放Flash视频的控件。 插入Java Applet Java Applet是美国SUN公司开发的Java程序设计语言中的一 个小应用程序，它能实现动态、安全和跨平台的网络应用。将 Java Applet嵌入到HTML语言中能实现网页中各种各样的特殊效 果和较为复杂的控制。 插入插件 如果想在浏览器中访问更多类型的媒体对象（如Shockwave 影片和MIDI音乐等），就必须借助插件，前面介绍的Shockwave 就是插件中的一员。 添加背景音乐代码 其中src指定音乐文件的位置，hidden=true 表示 不显示播放器，loop=true表示循环播放。 行为与事件 行为（Behavior）是在Dreamweaver 8中预置的JavaScript程序， 由事件（event）和对应动作（actions）组成。它能实现用户与 网页间的交互，通过某个动作来触发某项计划。如当用户在页 面中将鼠标移动并单击某一个链接后，载入了一幅图像，这就 产生了两个事件onMouseOver和onClick，同时触发了一个动作 载入图像。 浏览器都会提供一组事件，事件与动作相关联。当访问者与网页进 行交互时，浏览器生成事件，但并非所有的事件都是交互的， 如设置网页每10s自动重新载入。 根据所选对象和在“显示事件”子菜单中指定的浏览器的不同，显 示在“事件”下拉列表框中的事件将有所不同。 CSS样式 CSS（Cascading Style Sheets）样式又叫层叠样式，使 用它可以对网页中的布局元素，如表格、字体、颜色、背景、 链接效果和其他图文效果实现更加精确的控制。CSS样式不仅 可以在一个页面中使用，而且可以用于其他多个页面。 类型设置 自定义CSS样式的应用 在CSS样式中的HTML标签样式和CSS选择器样 式是自动应用的，只有自定义层叠样式需要用户手动 操作。 链接外部CSS样式 通过链接外部CSS样式可将其他网 页中的样式应用到当前网页中。 应用CSS滤镜效果 CSS滤镜是CSS的一个扩展，能把可视化的滤镜和转换效 果添加到一个标准的HTML元素上，使应用样式的对象产生模 糊、反转、发光等特殊效果。在Dreamweaver 8中，可直接在 对话框中添加滤镜的参数，而不用编写复杂的代码。 为网页添加表单 在Dreamweaver 8中，表单是用来输入数据或与网站进 行交互的工具。可以将整个网页创建成一个表单网页，也可 以在网页的部分区域中添加表单，其创建方法都相同。 设置表单属性 将插入点定位到插入的表单中，打开属性面板可 以对其属性进行设置。 模板与资源列表 使用模板 • 建立模板 – 将现有网页保存为模板 – 创建空白模板 • 模板的编辑 – 创建可编辑区域 – 取消对可编辑区域的标记 – 更改可编辑区域的名称 • 基于模板创建网页 • 管理模板 库 库是特殊的Dreamweaver文件，它可以存储各种各样的网 页元素。如在网站中页面的标题和版权信息等是固定不变的， 使用频繁，这些就可以通过库将其单独保存，在需要时直接插 入库即可，和模板比较相似。