Adobe Dreamweaver 设计川 制作 钱海军讲师
Adobe Dreamweaver 钱海军 讲师 设计 制作
制作简单的图文混排页面 ·设置页面的头信息 ·设置整体页面属性 ·制作普通文字页面 ·在页面中放入图像，制作图文混排页面 ·制作鼠标经过图像的交互效果 ·制作导航条的交互效果 ZhuHai Radio And Television University
ZhuHai Radio And Television University 制作简单的图文混排页面 • 设置页面的头信息 • 设置整体页面属性 • 制作普通文字页面 • 在页面中放入图像，制作图文混排页面 • 制作鼠标经过图像的交互效果 • 制作导航条的交互效果
一、 设置头信息 头信息的设置属于页面总体设定的范畴，主要为网页添加必要的信息，帮助用户了解网页 的功能。头内容在浏览器中是不可见的，但却携带网页的重要信息，如关键字、描述文字等， 还可以实现一些非常重要的功能，如自动刷新等。 Properties Meta Attribute HTTP-equiv Value Content-Type Content text/html;charset=gb2312 这里携带的是网页编码的信息 ”属性“设置为”HTTP-equiv“,用于指定META语句的性质或绑定HTTP的响应元素。它与 其他属性配合使用，可指定主页所用字符集或通知浏览器自动刷新（重新加载）内容等。图中 设置项告知网页所使用的是HTML语言，应用GB2312字符集，即中文简体。这种设置使得浏览器 显示该网页时会自动寻找合适的字符集，从而解决由于语种不同而导致的网页不能正确显示的 问题。 ZhuHai Radio And Television University
ZhuHai Radio And Television University 一、设置头信息 头信息的设置属于页面总体设定的范畴，主要为网页添加必要的信息，帮助用户了解网页 的功能。头内容在浏览器中是不可见的，但却携带网页的重要信息，如关键字、描述文字等， 还可以实现一些非常重要的功能，如自动刷新等。 这里携带的是网页编码的信息： ”属性“设置为”HTTP-equiv“，用于指定META 语句的性质或绑定HTTP的响应元素。它与 其他属性配合使用，可指定主页所用字符集或通知浏览器自动刷新（重新加载）内容等。图中 设置项告知网页所使用的是HTML语言，应用GB2312字符集，即中文简体。这种设置使得浏览器 显示该网页时会自动寻找合适的字符集，从而解决由于语种不同而导致的网页不能正确显示的 问题
1.1设置标题 网页标题可以是中文、英文或符号，显示在浏览器的标题栏。当网页被加入 收藏夹时，网页标题又可以做为网页的名字出现在收藏夹中。 回co回园e中国数字艺木联程以唯.C国. 1.编辑网页的标题可以直接在设计窗口上方的标题栏内输入或更改。 2.设置标题后，在头内容窗口会显示标题的相关信息，通过“属性”面板也可以 随时修改标题内容。 3.按F12快捷键预览页面。 ZhuHai Radio And Television University
ZhuHai Radio And Television University 1.1 设置标题 网页标题可以是中文、英文或符号，显示在浏览器的标题栏。当网页被加入 收藏夹时，网页标题又可以做为网页的名字出现在收藏夹中。 1. 编辑网页的标题可以直接在设计窗口上方的标题栏内输入或更改。 2. 设置标题后，在头内容窗口会显示标题的相关信息，通过“属性”面板也可以 随时修改标题内容。 3. 按F12快捷键预览页面
1.2设置关键字 关键字用来协助网络上的搜索引擎寻找网页。 1.单击菜单栏下面的“插入”快捷工具栏的下拉式列表，选择其中的“HTML”类， 右侧将会显示该类中可以插入的对象快捷按钮，再次单击第二个按钮“文件头” 旁边的下拉箭头，弹出“关键字”设置对话框。 2.设置关键字后，在头内容窗口会显示关键字的相关图标，通过“属性”面板也 可以随时修改关键字内容。 Macromedia Dreamweaver 8-[ Ele Edit View Insert Modify Iex Insert Common Layout For Keywords Keywords: 心Meta Cancel Unt Keywords 区Description Design Base 色Link ZhuHai Radio And Tele ision University
ZhuHai Radio And Television University 关键字用来协助网络上的搜索引擎寻找网页。 1.2 设置关键字 1. 单击菜单栏下面的“插入”快捷工具栏的下拉式列表，选择其中的“HTML”类， 右侧将会显示该类中可以插入的对象快捷按钮，再次单击第二个按钮“文件头” 旁边的下拉箭头，弹出“关键字”设置对话框。 2. 设置关键字后，在头内容窗口会显示关键字的相关图标，通过“属性”面板也 可以随时修改关键字内容
1.3设置说明 许多搜索引擎装置读取说明META标签的内容。有些使用说明信息在他们的数 据库中将页面编入索引，而有些还在搜索结果页面中显示该信息。 Description OK Cancel 园Desg Help 1.单击菜单栏下面的“插入”快捷工具栏的下拉式列表，选择其中的“HTML” 类，单击第二个按钮“文件头”旁边的下拉箭头，单击插入“说明”按钮。 2.在弹出的对话框中输入当前网页的说明文字。说明文字可供搜索引擎寻找网 页，还可存储在搜索引擎的服务器中，在浏览者搜索时随时调用，还可以在检 索到网页时做为检索结果反馈给浏览者。搜索引擎说明文字内容要简明扼要。 3.设置说明后，在头内容窗口会显示说明的相关图标。 ZhuHai Radio And Television University
ZhuHai Radio And Television University 许多搜索引擎装置读取说明META标签的内容。有些使用说明信息在他们的数 据库中将页面编入索引，而有些还在搜索结果页面中显示该信息。 1.3 设置说明 1. 单击菜单栏下面的“插入”快捷工具栏的下拉式列表，选择其中的“HTML” 类，单击第二个按钮“文件头”旁边的下拉箭头，单击插入“说明”按钮。 2. 在弹出的对话框中输入当前网页的说明文字。说明文字可供搜索引擎寻找网 页，还可存储在搜索引擎的服务器中，在浏览者搜索时随时调用，还可以在检 索到网页时做为检索结果反馈给浏览者。搜索引擎说明文字内容要简明扼要。 3. 设置说明后，在头内容窗口会显示说明的相关图标
1.4设置刷新 刷新主要适用于两种情况“一种情况是网页地址发生变化。可以在原地址的网 页上适用刷新功能，规定在若干秒之后让浏览器自动跳转到新的网页；另一种情况 是网页经常更新，可以让浏览器在若干秒之后自动刷新网页。 Macromedia Drea le Edt yew Insert Modfy Refresh Delay:seconds OK Acton:Go to URL: Browse... Cancel CRefresh this document i山 1.单击菜单栏下面的“插入”快捷工具栏的下拉式列表，选择其中的“HTML” 类，单击第二个按钮“文件头”旁边的下拉箭头，单击插入“刷新”按钮。 2.在弹出的对话框中”延迟“后填入数值（秒数）。经过这个时间间隔，页面 即可刷新或跳转到”操作“后面的URL地址。 ZhuHai Radio And Television University
ZhuHai Radio And Television University 刷新主要适用于两种情况“一种情况是网页地址发生变化。可以在原地址的网 页上适用刷新功能，规定在若干秒之后让浏览器自动跳转到新的网页；另一种情况 是网页经常更新，可以让浏览器在若干秒之后自动刷新网页。 1.4 设置刷新 1. 单击菜单栏下面的“插入”快捷工具栏的下拉式列表，选择其中的“HTML” 类，单击第二个按钮“文件头”旁边的下拉箭头，单击插入“刷新”按钮。 2. 在弹出的对话框中”延迟“后填入数值（秒数）。经过这个时间间隔，页面 即可刷新或跳转到”操作“后面的”URL”地址
1.5设置其它META信息 META标记记录当前网页的相关信息，如编码、作者、版权等，也可以用来给 服务器提供信息，比如网页终止的时间、刷新的间隔等 1.单击菜单栏下面的”插入“快捷工具的下拉式列表，选择其中的”HTML“类， 单击第二个按钮”文件头“旁边的下拉箭头，单击插入”META“按钮。 2.以定义作者信息为例，在”内容“文本框中输入”Ze0“(即作者信息)。 3.设置作者信息后，在头内容窗口会显示META信息的相关图标。 Meta Attrbute:Name vaue:author OK Content:床海电大 Cancel ZhuHai Radio And Television University
ZhuHai Radio And Television University META标记记录当前网页的相关信息，如编码、作者、版权等，也可以用来给 服务器提供信息，比如网页终止的时间、刷新的间隔等。 1. 单击菜单栏下面的”插入“快捷工具的下拉式列表，选择其中的”HTML“类， 单击第二个按钮”文件头“旁边的下拉箭头，单击插入”META“按钮。 2. 以定义作者信息为例，在”内容“文本框中输入”Zero“（即作者信息）。 3. 设置作者信息后，在头内容窗口会显示META信息的相关图标。 1.5 设置其它META信息
二、设置页面属性 打开首页页面，在编辑窗口下，选择”修改“一”页面属性“，打开页面属性设置面板 在此面板中可以设置页面的总体属性，包括：外观、链接、标题、标题编码和跟踪图像。 Page Properties ategory Page font:Default Font 习BL Tegg e:习出▣ Iext:□ Background color: Brouse.☐ Bepeat:习 Leftrgn:xcs 】8 ght margh:as▣ :es▣B2 tom margin:xes▣ oK☐Cancel☐sow☐p☐ ZhuHai Radio And Television University
ZhuHai Radio And Television University 二、设置页面属性 打开首页页面，在编辑窗口下，选择”修改“－”页面属性“，打开页面属性设置面板。 在此面板中可以设置页面的总体属性，包括：外观、链接、标题、标题/编码和跟踪图像
三、制作简单的文本页面 3.1普通文本页面 3.2插入特殊字符 3.3插入水平线 3.4插入时间 文本是页面中不可缺少的内容，文本的格式可以充分体现本档所要表达的重点.可以在文档 中插入“版权”等特殊字符：水平线在排版过程中起到分隔文本的作用，在页面上，可通过 条或多条水平线以可视方式分隔文本和对象。对网页进行更新后，一般都要加上更新日期。通 过DREAMWEAVER软件可以进行日期插入操作，通过设置，每次保存网页时都能自动更新该日期。 ZhuHai Radio And Television University
ZhuHai Radio And Television University 三、制作简单的文本页面 3.1 普通文本页面 3.2 插入特殊字符 3.3 插入水平线 3.4 插入时间 文本是页面中不可缺少的内容,文本的格式可以充分体现本档所要表达的重点.可以在文档 中插入“版权”等特殊字符；水平线在排版过程中起到分隔文本的作用，在页面上，可通过一 条或多条水平线以可视方式分隔文本和对象。对网页进行更新后，一般都要加上更新日期。通 过DREAMWEAVER软件可以进行日期插入操作，通过设置，每次保存网页时都能自动更新该日期