首页 Dreamweaver教学课件

Dreamweaver教学课件

举报
开通vip

Dreamweaver教学课件 Dreamweaver 的使用 主要内容: 一、Dreamweaver概述 二、站点的创建和管理 三、文本的使用 四、图像的使用 五、超链接 六、网页属性 七、表格的使用 主要内容: 八、页面布局 九、表单的使用 十、多媒体的使用 十一、框架的使用 十二、层的使用 十三、时间轴的使用 十四、历史和资源管理器 主要内容: 十五、模板和库 十六、层叠样式表 十七、行为的应用 十八、扩展功能 十九、动态网页开发基础知识 二十、网站设计 一、Dreamweaver概述 1、Dreamweaver...

Dreamweaver教学课件
Dreamweaver 的使用 主要内容: 一、Dreamweaver概述 二、站点的创建和管理 三、文本的使用 四、图像的使用 五、超链接 六、网页属性 七、表格的使用 主要内容: 八、页面布局 九、表单的使用 十、多媒体的使用 十一、框架的使用 十二、层的使用 十三、时间轴的使用 十四、历史和资源管理器 主要内容: 十五、 模板 个人简介word模板免费下载关于员工迟到处罚通告模板康奈尔office模板下载康奈尔 笔记本 模板 下载软件方案模板免费下载 和库 十六、层叠样式表 十七、行为的应用 十八、扩展功能 十九、动态网页开发基础知识 二十、网站设计 一、Dreamweaver概述 1、Dreamweaver简介 2、Dreamweaver的工作环境和相关操作 3、HTML语言介绍 4、关于Dreamweaver 帮助 1、 Dreamweaver简介 Dreamweaver 是由美国著名的软件开发商Macromedia公司推出的一个“所见即所得”的可视化网站开发工具。 用于对 Web 站点、Web 页和 Web 应用程序进行设计、编码和开发。 1、 Dreamweaver简介 它的主要特点如下: 可视化的设计界面:学习简单,操作快捷 跨浏览器支持:支持多种浏览器,并可以选择主要的浏览器 支持动态网页技术:CSS、层、行为、JavaScript 强大的网站管理功能:库、模板、标签等 1、 Dreamweaver简介 它的主要特点如下(续): 丰富的媒体支持:Java、Flash、Shockwave、ActiveX、Real等 超强的扩展能力:支持第三方插件 完善的协同工作能力:Flash、Fireworks、Coldfusion 2、Dreamweaver的工作环境和相关操作 界面: 菜单栏、“插入”栏、文档工具栏、文档窗口、面板组、属性检查器 面板整理: 展开或折叠一个面板组 关闭面板组 打开屏幕上不可见的面板组或面板 在展开的面板组中选择一个面板 2、Dreamweaver的工作环境和相关操作 面板整理(续): 查看未显示的面板组的“选项”菜单 停靠和取消停靠面板和面板组 重新调整面板组大小和重命名面板组 设置“面板”首选参数 2、Dreamweaver的工作环境和相关操作 文件操作: 创建新文档 保存新文档 设置默认的新文档类型 打开现有文档 导入 Microsoft Word HTML 文件:导入/清理 标尺和网格:显示/隐藏 参数选择:“编辑”>“首选参数” 3、HTML语言介绍 (1) 概述 (2) HTML文档 (3) HTML标签和属性简介 (1) 概述 HTML (Hypertext Markup Language,超文本标识语言) 是生成WWW的语言之一,也是组织多媒体文档的一门重要语言,它不仅用来编写 Web 网页,而且也越来越多地被用来制作光盘上的多媒体节目。 (2) HTML文档 HTML文档是一种没有格式的文本文档,也称为 ASCII 文件。因此,HTML文档可以使用任何一种文本编辑器来编写。 一个文档通常由文档头(head)、文档名称(title)、表格(table)、段落(paragraph)和列表(list)等成分构成。为了表达方便,我们把这些成分称为文档元素(element),简称为文素,它们是文本文档的基本构件,并且使用 HTML规定的标签(tag)来标识这些文素。 (2) HTML文档 每个HTML文档都是由标签开始,而以标签结束。每个HTML文档分成两个部分组成:文档头(head)和正文(body),并分别用 … 和 … 来作标记。 文档头标签 … 之间所包含的是文档的名称(title) 正文标签 … 之间含有用各种HTML标签作标记的段落、列表、和其他文素组成的实际文档。 (2) HTML文档 一个简单的HTML文档如下所示: 章乃器轶事

章乃器妙语揭贪官

章乃器是我国杰出的爱国人士。1938年3月,应当时安徽省政府主席李宗仁之邀,出任安徽省政府财政厅厅长。

针对当时众多的贪官污吏乘国难之机贪污腐化、中饱私囊等劣行,章乃器上任伊始就提出了“铲除贪污”等四项重大措施。…

(3) HTML标签和属性简介 简介 基本标签 属性 超链接 嵌入背景声音 用图像作网页的背景 表格的标签和属性 简介 HTML标签由3部分组成:左尖括号“<”,“标签名称”和右尖括号“>”。HTML标签名称中的字母不分大小写,标签通常是成对出现的 某些文素还可以包含“属性(attribute)”。属性是指背景颜色、字体属性(大小、颜色、正体、斜体等)、对齐方式等等,它是包含在开始标签中的附加信息。例如,

表示这段文字是居中对齐的 基本标签 <BODY> <Hn> <P> <UL>、<OL>和<LI>等等 基本标签(1) <HTML> HTML标签:这个标签告诉浏览器在<HTML> …</HTML>之间的文件是用HTML编写的文档。 <HEAD> 文档头标签:<HEAD> … </HEAD>之间包含的是HTML文档名称。 <TITLE> 文档名称标签:<TITLE> … 之间包含的是具体的HTML文档名称,字符数通常不超过64。 基本标签(2) 正文标签: … 之间是正文部分,这是HTML文档最多的部分,它包含的是显示在浏览器文本窗口中的文档内容。 标题(Heading)标签:HTML定义了6个等级的标题标签,其中n=1,2,…,6。之间包含的是第n级标题。 基本标签(3)

段落(Paragraph)标签:

之间包含的是一段文本。HTML中没有使用硬换行(carriage return)来分段落,这是与字处理软件不同的。在HTML文档中,

之间不论有多少行,不论每一行有多长或者多短,也不论其间有多少个空格,浏览器都把它作为一个段落来处理。 基本标签(4)
    1. 列表标签:HTML支持无编号列表和有编号列表,而且还可以在列表中套列表。
      表示标签之间的列表项目是无编号列表(Unnumbered List)。
      表示标签之间的列表项目是有编号列表(Ordered List)。
    2. 表示标签后面的内容是具体的列表项目(List Item)。 基本标签(5)
      强制换行标签(Forced Line Breaks/Postal Addresses):使用
      标签可强制文本换行,其好处是不在行与行之间增加空白行。
      水平线(Horizontal Rule)标签:生成一条用于分割文档的水平线,其长度与浏览器窗口等宽,粗细和长短都可设置。 属性 属性是指用来修改HTML标签之间的文素特性,例: 例1:

      理解字符属性的概念

      例2:

      这是居中段落

      超链接 基本语法是: ... ... 文件内链接 文件内链接是为阅读方便服务的,主要用于比较长的文件。在作链接之前要先建立锚点(名),给链接的目的地作个定义。 建立锚名 链接到锚名 文件内链接*命令格式 建立锚名: 锚名所对应的文本 链接到锚名 < A HREF=“#锚名” >链接文本 嵌入背景声音 在HTML文档中可嵌入背景音乐,当打开HTML文档时就开始播放。嵌入背景音乐的基本语法结构如下: 其中,URL表示背景音乐的文件名, LOOP表示循环次数(INFINITE为无限次)。 用图像作网页的背景 在浏览器上经常可看到各种背景图像,使用图像做网页背景的语法结构如下: 做背景的图像不需要很大,浏览器会利用它的平铺(tiling)功能布满整个网页。 在文档中显示图像 命令格式: 例:显示一幅文件名为flower.gif的图片 在文档中显示图像 相关属性: 控制大小: 高:HEIGHT=像素数 宽:WIDTH=像素数 图像边框: BORDER=宽度值 例: 用图像实现链接 格式: 例: 在网页中加入视频 格式:   说明:  引导图在当视频还没有完全被载入时,会显示在视频将显示的位置。 在网页中加入视频 相关属性: START属性: 用于控制视频的播放时机,取值有fileopen和mouseover两种,分别表示当页面一打开就播放和当鼠标移到播放区域上才播放。默认值为fileopen。 也可以同时设定以上两个值,这时表示页面刚载入时播放,其后,当我们将鼠标移到显示区域时,视频也会播放。 在网页中加入视频 例: 让文本动起来 基本格式: 文本 一些相关属性: DIRECTION属性:取值有两种 LEFT:右向左 RIGHT:左向右 让文本动起来 一些相关属性: BEHAVIOR属性:取值有三种 ALTERNATE:来回移动 SLIDE:移动一次后停止 SCROLL:循环单向移动 表格的标签和属性 标签 属性 注意事项 表格*标签 ...
      定义表格。 … 定义表的名称(CAPTION) ... 定义表的行(Table Row),可定义对齐属性 ... 定义列表标题(Table Header),常为黑体字,中央对齐 … 定义列表数据(Table Data)单元 表格*属性 ALIGN (LEFT, CENTER, RIGHT) 表单元的水平对齐方式 VALIGN (TOP, MIDDLE, BOTTOM) 表单元的垂直对齐方式 COLSPAN=n 表单元跨越的列数 ROWSPAN=n 表单元跨越的行数 表格*注意事项 ① …
      必须要包含整个表的定义; ②在表格中的第一项是表的名称(CAPTION),它是可有可无的; ③ … 标签定义的行的数目没有限制; ④在一行中,使用 … 或者 … 标签定义的数据单元数目也没有限制; ⑤表的每一个单元的属性可单独设置,因此表格的形式可以多种多样; ⑥数据单元中的内容可以是文字,也可以是图标,或者是两者,而且还可以设置超级链接 表格示例
      例表一
      基本情况 入库资料 其它资料
      编号 姓名 年龄
      001 肖静 23
      002 陈江 25
      4、 Dreamweaver 帮助 “帮助”系统提供所有Dreamweaver 功能的综合信息,其本身就是一本很好的电子书。 二、站点的创建和管理 Dreamweaver可以用于制作单独的网页文件,但更经常地用于整个站点的建设。因为大多数网页设计者创建的往往不是多种风格网页的集合,而是风格一致的一个网站。 1、创建本地站点 选择“站点”>“管理站点”。 出现“管理站点”对话框。 注意:如果您没有定义过任何 Dreamweaver 站点,则会直接出现“站点定义”对话框,您可以跳过下一步。 单击“新建”按钮。 出现“站点定义”对话框。 1、创建本地站点 执行下列操作之一: 单击“基本”选项卡以使用“站点定义向导”,它将引导您逐步完成设置过程。 单击“高级”选项卡以使用“高级”设置,它使您可以根据需要分别设置本地、远程和测试文件夹。 1、创建本地站点 完成 Dreamweaver 站点设置过程: 在“站点定义向导”中,回答每一屏上出现的问题,然后单击“下一步”继续进行设置,或者单击“上一步”返回到前一屏。 对于“高级”设置,可根据需要完成“本地信息”类别、“远程信息”类别和“测试服务器”等类别。 2、网站文件的管理 我们往往根据站点内容,采用层次化目录结构分类分级保存网站文件,将相关的页面放在同一文件夹中,必要时可以使用子文件夹,这种组织类型使站点更容易维护和导航。 文件创建:文件面板中右键单击>新建文件(快捷键Ctrl+N) 选择文件:可单击选一或配合Ctrl键和Shift键进行多重选择。 2、网站文件的管理 打开和编辑:双击 删除:Delete键 改名:两次单击 关于保存:保存、另存为、全部保存、回复至上次的保存 复制与粘贴:快捷菜单或Ctrl+拖动 移动:直接拖动 关闭:快捷键Ctrl+W 2、网站文件的管理 消除文件只读属性:右键快捷菜单 设为首页:右键快捷菜单 添加设计备注:右键快捷菜单 默认情况下,当移动、重命名或删除站点中文档时Dreamweaver会提示你执行更新,站点管理器可自动修复页面中相应的超链。(编辑>首选参数>常规>文档选项>设置“移动文件时更新链接”) 3、页面预览 菜单:文件>在浏览器中预览>iexplore 工具栏>地球图标>预览在iexplore 4、站点的编辑和管理 ① 文件面板 ② 打开现有本地网站 ③ 查看本地和远程网站的文件和地图 ④ 调整窗口视图 ⑤ 保存站点地图 ⑥ 重建站点缓存 ⑦ 站点编辑、复制、删除、导入与导出 4、站点的编辑和管理 ① 文件面板 “扩展/折叠”按钮展开或折叠“文件”面板,以显示一个或两个窗格。 显示方式:面板菜单>查看>站点文件(F8)或站点地图(Alt+F8)切换 ② 打开现有本地网站 在文件面板的站点下拉式列表中选择站点。 4、站点的编辑和管理 ③查看本地和远程网站的文件和地图 文件窗可以同时显示本地和远程站点的内容。本地站点可以以文件列表、地图或者同时显示两者的方式出现。远程站点只能以文件列表方式显示。 (通过文件面板的工具栏图标切换) 4、站点的编辑和管理 ④调整窗口视图 默认情况下,远程站点或本地站点地图显示在站点窗口左边,本站点显示在右边,但可以转换显示方式。 编辑>首选参数>站点>总是显示 ⑤保存站点地图(先切换至地图视图模式) 面板菜单:文件>保存站点地图(Bmp或Png格式) 4、站点的编辑和管理 ⑥重建站点缓存 为了加快更新过程,Dreamweaver 可创建一个缓存文件,用以存储有关本地文件夹中所有链接的信息。在“站点定义”对话框中选择“缓存”选项,就会创建此缓存文件。以后在使用Dreamweaver 添加、更改或删除到本地站点上文件的链接时,此缓存文件将以不可见方式更新。 4、站点的编辑和管理 ⑥重建站点缓存 菜单:站点>管理站点>选择站点>编辑>“高级”标签>选择左侧列表中“本地信息”类别>选中“启用缓存”复选框。 启动之后,第一次更改或删除指向本地文件夹中文件的链接时,会提示您载入缓存。如果单击“否”,则将所做更改记入缓存,但并不载入该缓存,而且Dreamweaver 也不更新链接。 4、站点的编辑和管理 ⑥重建站点缓存 在比较大型的站点上,载入此缓存可能需要一段时间,其中的大部分时间用于将本站点上文件 的时间戳与缓存中记录的时间戳进行比较,以确定缓存是否过期。如果没有在DW之外更改任何文件,则当“停止”按钮出现时,可以放心地单击该按钮。 如果要重新创建站点缓存,在文件面板中,选择面板菜单>站点>重建站点缓存 4、站点的编辑和管理 ⑦站点编辑、复制、删除、导入与导出 文件面板菜单>站点>管理站点 三、文本的使用 1、文字输入 2、文字编辑 3、文字属性面板 4、使用CSS样式 5、清理当前页面 三、文本的使用 1、文字输入 要注意的细节: (1)换行与分段 换行:Shift+Enter(菜单:插入>HTML>特殊字符>换行符) 分段:Enter 三、文本的使用 1、文字输入 (2) 空白 全角空格 代码视图中输入  或插入栏>文本>字符>不换行空格 输入多个连续空格:编辑>首选参数>常规>选中“允许多个连续的空格” 直接按 Ctrl+Shift+空格键输入空白 三、文本的使用 1、文字输入 (3) 插入时间与日期 插入栏>常用>日期 菜单:插入>日期 (4) 插入特殊符号 插入栏>文本>字符 菜单:插入>HTML>特殊字符 (5) 分隔线 插入栏>HTML>水平线 菜单:插入>HTML>水平线 三、文本的使用 2、文字编辑 (1)文字选取 拖动选取 双击选择英文单词或中文句子;三击选择段落; 单击起点,然后按Shift,再单击终点,选中两点之间文本。 编辑>全选; 单击状态行上的标签选择器; 三、文本的使用 2、文字编辑 (2)剪切、复制与粘贴及撤消与重做 Ctrl+拖动:复制 拷贝HTML/粘贴HTML 撤消:Ctrl+Z 重做: Ctrl+Y 三、文本的使用 2、文字编辑 (3)查找与替换(Ctrl+F ) 在当前文件中替换文本 在一个文件夹中替换文本 保存和载入查询 在源代码中查找与替换 高级文本查找替换 替换HTML标签 查找下一个(F3键) 三、文本的使用 3、文字属性面板 显示/关闭当前对象属性面板:CTRL+F3 段落和标题格式(文本>段落格式) 文字颜色(文本>颜色) 字体(文本>字体) 文字大小(文本>大小/改变大小) 文字样式(文本>样式) 对齐方式(文本> 对齐) 列表(有序列表、无序列表)及列表属性(文本>列表) 段落缩进(Ctrl+Alt+ ] )或凸出( Ctrl+Alt+ [)(文本>缩进/凸出) 文字超链接(属性面板中链接栏) 三、文本的使用 4、使用CSS样式 通过设置CSS样式,可以快速一致地将字体格式应用于文档中的文本。 CSS样式可由单个或多个CSS字体标签属性(如颜色、字体、大小)以及其他格式属性(粗体或斜体)组成。 菜单:窗口> CSS样式 菜单:文本> CSS样式>…… 三、文本的使用 5、清理当前页面 (1)清理HTML/XHTML 此功能可删除空标签、合并嵌套FONT标签,以及通过其他方法改善杂乱或不可读的HTML代码。 命令>清理HTML/XHTML 文件>转换> XHTML 三、文本的使用 5、清理当前页面 (2)导入Word 文件和清理Word生成的HTML 文件>导入> Word文档 命令>清理Word生成的HTML 四、图像的使用 1、图像的格式 虽然图像标准中存在多种图形文件格式,但网页中通常使用的只有三种,即GIF、JPEG和PNG。目前, GIF和JPEG格式的支持情况最好,大多数浏览器都可以查看。 GIF:只支持256种颜色 JPEG:有损压缩的格式 PNG:无损压缩图像,支持一千六百万种颜色。 四、图像的使用 2、图像文件和图像占位符插入 菜单:插入>图像 工具栏:插入栏>常用>图像 在站点面板中直接将图像文件拖到页面上 从资源管理器中直接将图像文件拖到页面上 菜单:插入>图像对象>图像占位符 工具栏:插入栏>常用>图像占位符 四、图像的使用 3、图像和图像占位符属性面板使用 主要属性:图像的名称、大小、源文件、链接、替代文字、边框和边距、对齐方式等。 四、图像的使用 4、图像热区 使用图像地图,可以在单个图像中创建多个热点或热区(可单击的区域),并使每一个热点链接到一个不同的URL。 注:图像地图指已被分为多个可链接区域(或称“热点”)的图像 (1)绘制热区 矩形 椭圆形 多边形 四、图像的使用 4、图像热区 (2)选择热区 多选方法:SHIFT+单击 (3)移动热区 (4)调整热区大小 四、图像的使用 5、插入交互式图像 (1)鼠标经过图像(简单翻转图) 使用以下方法之一插入鼠标经过图像: 在“插入”栏中,选择“常用”,然后单击“鼠标经过图像”图标。 在“插入”栏中,选择“常用”,然后将“鼠标经过图像”图标拖到“文档”窗口中的所需位置。 选择“插入”>“图像对象”>“鼠标经过图像”。 四、图像的使用 5、插入交互式图像 (2)导航条 导航条由图像或图像组组成,这些图像的显示内容随用户操作而变化。每个页面只能有一个导航条。 使用“插入导航条”命令之前,须首先为各个导航项目的显示状态创建一组图像。 四、图像的使用 5、插入交互式图像 (2)导航条 若要创建导航条,请执行以下操作: ① 执行下列操作之一: 选择“插入”>“图像对象”>“导航条”。 在“插入”栏的“常用”类别中,单击“图像”菜单并选择“插入导航条”按钮。 ② 出现“插入导航条”对话框。设置相关项目 四、图像的使用 6、导入Fireworks HTML Fireworks可利用切片将图片文档分割成多个较小的部分并将每部分导出为单独的文件。 插入>图像对象> Fireworks HTML 插入栏>常用> Fireworks HTML 7、制作WEB相册 命令菜单>创建网站相册 四、图像的使用 8、图像的优化和格式转换 (1)用Fireworks优化页面图像 右击图像>在 Fireworks中优化 命令> 在 Fireworks中优化图像 (2)用Photoshop和Fireworks转换图像文件格式和优化处理 五、超链接 1、关于URL 2、超链接的制作方法 3、超链接的类型 4、设置链接的目标窗口 五、超链接 1、关于URL URL(统一资源定位符):用于描述网络资源的位置、类型和访问方法。 一般格式: 协议 离婚协议模板下载合伙人协议 下载渠道分销协议免费下载敬业协议下载授课协议下载 ://IP地址(域名)[:端口号]/目录/文件名 协议:指明访问该资源所采用的协议。如HTTP、FTP等。 五、超链接 2、超链接的制作方法 (1)通过“指向文件”图标创建链接 注:文件名最好不用中文。如一定要使用中文文件名,则需要设置: 编辑>首选参数>代码改写>使用%将URL中的特殊字符编码 (2)属性面板Link栏输入和文件夹图标创建链接 五、超链接 2、超链接的制作方法(续) (3)插入菜单或插入栏创建超链 插入菜单>超级链接 插入栏>常用>超级链接 修改菜单>创建链接 (4)超链接的相关操作 修改菜单>创建链接或更改链接 修改菜单>移除链接 修改菜单>打开链接页面 修改菜单>链接目标>…… 五、超链接 3、超链接的类型 (1) HTML链接(页面链接) (2) E-mail链接 Link栏手工输入 mailto:邮件地址 插入栏>常用>电子邮件链接 插入菜单>电子邮件链接 (3) 文件链接 (4) 锚点和链接 五、超链接 3、超链接的类型 (4)锚点和链接 ①创建锚点 插入菜单>命名锚记 插入栏>常用>命名锚记 ②锚点引用 同一文件中锚点引用,在属性面板中超链栏填写#锚点名 不同文件之间锚点引用,则填写文件名#锚点名 五、超链接 3、超链接的类型 (5)空链接 创建空链接,只需在属性面板Link栏输入符号 # 或者 javascript:; (6)脚本链接 主要用于让页面文字具有获取事件的能力,尤其是方便文字与行为和脚本程序的结合。 五、超链接 3、超链接的类型 (6)脚本链接 --续 创建脚本链接,在属性面板Link栏输入 javascript:(后面跟一些 JavaScript 代码或函数调用) 例如: 打印当前页面,在属性面板Link栏输入 javascript: self.print() 关闭当前窗口,在属性面板Link栏输入 javascript: self.close() 五、超链接 3、超链接的类型 (6)脚本链接 --续 例如: 显示一个警告框,在属性面板Link栏输入 javascript:alert('This link leads to the index') 五、超链接 4、设置链接的目标窗口 _blank:在新的浏览窗口中打开链接的文档 _parent:在显示链接的框架父框架集中打开链接的文档,同时替换整个框架集。 _self:在当前框架中打开链接,同时替换所有框架。 _top:在当前浏览器窗口中打开链接的文框,同时替换所有框架。 六、网页属性 1、设置页面属性 2、使用头元素 3、页面配色 方案 气瓶 现场处置方案 .pdf气瓶 现场处置方案 .doc见习基地管理方案.doc关于群访事件的化解方案建筑工地扬尘治理专项方案下载 4、可视化助理 六、网页属性 1、设置页面属性 修改菜单>页面属性 标题、背景、字体和链接的颜色,页边距等。 2、使用头元素 (1)Meta 标签的常见功能: 帮助主页被各大搜索引擎登录 定义页面的使用语言 自动刷新并指向新的页面 实现网页转换时的动画效果 六、网页属性 2、使用头元素 (2)显示和修改当前页面现有的文件头信息 查看>文件头内容:查看文件头栏及其属性面板 (3)设置当前页面新的文件头信息 插入栏>HTML>文件头标签>选择项目 插入菜单>HTML>文件头标签>选择项目 文件头标签>选择项目 “Meta”:将一个“Meta”标签插入到文档head部分。出现一个对话框,您可以在其中输入meta属性的信息。 “关键字”:将一个meta name=“keywords”标签插入到文档的head部分。出现一个对话框,可以在其中输入文档的关键字。 文件头标签>选择项目 “描述”:将一个“描述”meta标签插入到文档的head部分。出现一个对话框,可在其中输入描述文档的文本。 “刷新”:将一个“刷新” meta标签插入到文档的head部分。出现一个对话框,可在其中输入刷新以前等待的秒数,以及是要重新载入当前页面还是转到新的页面。 文件头标签>选择项目 “基础”:将一个base标签插入到文档的head部分。出现一个对话框,可在其中输入文档连接的基础URL。 “链接”:将一个link标签插入到文档的head部分。出现一个对话框,可在其中输入链接信息,请注意这不是一个超文本链接;它经常用来指定外部样式表。 六、网页属性 2、使用头元素 (4)Meta的属性 Meta的属性有两种:name和http-equiv。 Name属性主要用于描述网页,与之对应的属性值为content(网页内容),以便于搜索引擎查找、分类(目前几乎所有的搜索引擎都使用网上自动查找meta值来给网页分类)。这其中最重要的是description(站点在搜索引擎上的描述)和keywords(分类关键词),所以应该给每页加一个Meta值。 name 属性 1、用以说明生成工具(如Microsoft FrontPage 4.0)等; 2、向搜索引擎说明你的网页的关键词 3、告诉搜索引擎你的站点的主要内容; 4、告诉搜索引擎你的站点的制作的作者; name 属性 5、 其中的属性说明如下: 设定为all:文件将被检索,且页面上的链接可以被查询; 设定为none:文件将不被检索,且页面上的链接不可以被查询; 设定为index:文件将被检索; 设定为follow:页面上网页等级评定,在IE的internet选项中有一项内容设置,可以防止浏览一些受限制的网站,而网站的限制级别就是通过meta属性来设置的; http-equiv属性 1、 用以说明主页制作所使用的文字以及语言; 字符集:英文是ISO-8859-1字符集,还有BIG5、utf-8、shift-Jis、Euc、Koi8-2等字符集; ISO 语言代码 :如 en-US (English US 英文-美国)。中文的语言代码是 zh-TW (中国台湾),zh-HK (中国香港),与 zh-CN (中国大陆) http-equiv属性 2、 定时: 让网页在指定的时间n内,跳转到页面http://yourlink; 3、 用于设定网页的到期时间,一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式; http-equiv属性 4、 用于设定禁止浏览器从本地机的缓存中调阅页面内容,设定后一旦离开网页就无法从Cache中再调出; 5、 cookie设定,如果网页过期,存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式; http-equiv属性 6、 网页等级评定,在IE的internet选项中有一项内容设置,可以防止浏览一些受限制的网站,而网站的限制级别就是通过meta属性来设置的; 7、 强制页面在当前窗口中以独立页面显示,可以防止自己的网页被别人当作一个frame页调用; http-equiv属性 8、设定进入和离开页面时的特殊效果,这个功能即FrontPage中的“格式/网页过渡”,不过所加的页面不能够是一个frame页面。 Duration的值为网页动态过渡的时间,单位为秒。 Transition是过渡方式,它的值为0到23,分别对应24种过渡方式。 六、网页属性 3、页面配色方案 命令菜单>设定配色方案 4、可视化助理 设置在设计视图下,是否显示页面对象的边框或页面的不可见元素。 查看菜单>可视化助理>……(选择项目) 工具栏>视图选项>可视化助理>……(选择项目) 编辑菜单>首选参数>不可见元素 七、表格的使用 表格(table)是页面的重要元素,是页面排版的主要手段。尽管DHTML中的层(layer)也可以实现网页元素的自由定位,但是表格显然更加方便编辑与修改。熟练掌握和运用表格的各种属性,可以让您的页面看起来赏心悦目。 七、表格的使用 1、插入表格 插入菜单>表格 插入栏> 常用>表格 或插入栏> 布局>表格 2、表格基本操作 (1)选择表格元素 整个表格:标签、修改>表格>选择表格、右键、Ctrl+A+A、边框 行、列 :标签(行)、边框、拖拽 单元格:标签、 Ctrl+单击、 Ctrl+A、拖拽 七、表格的使用 2、表格基本操作 (2)处理表格行、列 插入行(Ctrl+M)、列( Ctrl+Shift+A ) 修改菜单、右键、属性检查器、Tab 删除行( Ctrl +Shift +M )、列( Ctrl +Shift +- ) (3)单元格分、合 单元格合并( Ctrl +Alt +M ) 单元格拆分( Ctrl +Alt +S ) 七、表格的使用 2、表格基本操作 (4)其它操作 行列宽度调整和高度调整 表格复制、剪切和粘贴 3、设置表格属性 4、格式化表格 命令菜单>格式化表格 七、表格的使用 5、表格排序 命令菜单>排序表格 6、表格与表格式数据导入和导出 导入: 文件菜单>导入>表格式数据 或插入栏>布局>表格数据 导出: 文件菜单>导出>表格 八、页面布局 1、布局视图下绘制表格(布局表格) 2、跟踪图像 八、页面布局 1、布局视图下绘制表格(布局表格) (1)视图切换 查看菜单>表格模式>…… 插入栏>布局>标准视图/布局视图 编辑>首选参数>布局模式 (2)绘制布局表格 插入栏>布局>绘制布局表格(按住CTRL连续绘制多个,按住Alt取消自动吸附功能) 八、页面布局 1、布局视图下绘制表格(布局表格) (3)绘制布局单元格 插入栏>布局>绘制布局单元格(按住CTRL可连续绘制多个,按住Alt取消自动吸附功能) (4)嵌套布局表格 (5)移动表格或单元格 (6)设置表格和单元格属性 八、页面布局 2、跟踪图像 可以使用跟踪图像作为重新创建已经使用图形应用程序(如 Macromedia Freehand 或 Fireworks)创建的页面设计的向导。 跟踪图像是放在“文档”窗口背景中的 JPEG、GIF 或 PNG 图像。可以隐藏图像、设置图像的不透明度和更改图像的位置。 八、页面布局 2、跟踪图像 若要将跟踪图像放在“文档”窗口中,可执行以下操作: (1)选择“查看”>“跟踪图像”>“载入”。 或者选择“修改”>“页面属性”,然后单击“跟踪图像”文本框旁边的“浏览”按钮。 (2)在出现的对话框中,选择图像文件并单击“选择”(Windows) 或“选择”(Macintosh)。 “页面属性”对话框随即出现。 (3)拖动“图像透明度”滑块指定图像的透明度,然后单击“确定”。 (4)若要随时切换到另一跟踪图像或更改当前跟踪图像的透明度,请选择“修改”>“页面属性”。 八、页面布局 2、跟踪图像 若要显示或隐藏跟踪图像,请执行以下操作: 选择“查看”>“跟踪图像”>“显示”。 仅在 Dreamweaver 中跟踪图像是可见的。当在浏览器中查看页面时,跟踪图像永远不可见。当跟踪图像可见时,页面的实际背景图像和颜色在“文档”窗口中不可见;但是,在浏览器中查看页面时,背景图像和颜色是可见的。 八、页面布局 2、跟踪图像 若要更改跟踪图像的位置,请执行以下操作: (1)选择“查看”>“跟踪图像”>“调整位置”。 (2)执行下列操作之一: 若要准确地指定跟踪图像的位置,请在“X”和“Y”文本框中输入坐标值。 若要逐个像素地移动图像,请使用箭头键。 若要一次五个像素地移动图像,请按 Shift 键和箭头键。 (3)重设跟踪图像的位置: 选择“查看”>“跟踪图像”>“重设位置”。 跟踪图像随即返回到文档窗口的左上角 (0,0)。 八、页面布局 2、跟踪图像 若要将跟踪图像与所选元素对齐,请执行以下操作: 在“文档”窗口中选择一个元素。 选择“查看”>“跟踪图像”>“对齐所选范围”。 跟踪图像的左上角随即与所选元素的左上角对齐。 九、表单的使用 1、关于表单 2、插入表单及设置表单属性 3、插入表单元素及属性设置 4、表单应用举例 九、表单的使用 1、关于表单 表单是用于实现网页浏览者与服务器之间信息交互的一种页面元素,被广泛用于各种信息的搜集和反馈,如调查表、订单、站点注册单、搜索引擎等。 表单有两个部分组成:一是面向客户端各种对象部分,一是服务器端的处理程序部分。 九、表单的使用 1、关于表单 当访问者将信息输入Web站点表单单击提交按钮时,这些信息将被发送到服务器,服务器端脚本或应用程序对这些信息进行响应。通常,通过通用网关接口(CGI)脚本、ColdFusion页、Java Server Page(JSP)或ASP来处理信息。如果不使用服务端脚本或应用程序来处理表单数据,就无法收集这些数据。 九、表单的使用 2、插入表单及设置表单属性 插入表单 插入>表单 插入栏>表单>…… Dreamweaver插入一个表单(域)。当页面处于设计视图中时,用红色的虚轮廓线指示表单。如果没有看到此轮廓线,请检查是否选中了“查看>可视化助理>不可见元素”。 九、表单的使用 2、插入表单及设置表单属性 设置表单属性(用属性检查器设置 ) 在“表单名称”文本框中,键入标识该表单的唯一名称。 命名表单后,就可以使用脚本语言(如 JavaScript 或 VBScript)引用或控制该表单。如果不命名表单,则 Dreamweaver 使用语法 form n 生成一个名称,并在向页面中添加每个表单时递增 n 的值。 九、表单的使用 2、插入表单及设置表单属性 在“动作”文本框中,指定处理该表单的动态页或脚本的路径。可以在“动作”文本框中键入完整路径,也可以单击文件夹图标定位到同一站点中包含该脚本或应用程序页的相应文件夹。 在“方法”弹出菜单中,选择将表单数据传输到服务器的方法。有POST、GET和默认三种选择。 九、表单的使用 2、插入表单及设置表单属性 如果需要,可以使用“MIME 类型”弹出菜单指定对提交给服务器进行处理的数据使用 MIME 编码类型。 默认设置 application/x-www-form-urlencode 通常与 POST 方法协同使用。如果要创建文件上传域,请指定 multipart/form-data MIME 类型。 附:关于POST与GET方法 POST 方法将在 HTTP 请求中嵌入表单数据。 GET 方法将值附加到请求该页的 URL 中。 默认方法使用浏览器的默认设置将表单数据发送到服务器。通常,默认方法为 GET 方法。 不要使用 GET 方法发送长表单。URL 的长度限制在 8192 个字符以内。如果发送的数据量太大,数据将被截断,从而导致意外的或失败的处理结果。 附:关于POST与GET方法 对于由 GET 方法传递的参数所生成的动态页,可添加书签,这是因为重新生成页面所需的全部值都包含在浏览器地址框中显示的 URL 中。与此相反,对于由 POST 方法传递的参数所生成的动态页,不可添加书签。 如果您要收集机密用户名和密码、信用卡号或其它机密信息,POST 方法看起来比 GET 方法更安全。但是,由 POST 方法发送的信息是未经加密的,容易被黑客获取。若要确保安全性,请通过安全的连接与安全的服务器相连。 九、表单的使用 3、插入表单元素及属性设置 表单:所有表单对象要发挥作用,就必须存在于表单域中。 文本字段:在表单中插入一个可输入一行文本的文本域。文本域接受任何类型的字母数字。该文本可以显示为单行、多行,也可以显示为一系列点或星号(密码输入) 隐藏域:可以存储用户输入的信息,如姓名、电子邮件地址或常用的查看方式,并在该用户下次访问引站点时使用这些数据。 九、表单的使用 3、插入表单元素及属性设置 复选框:允许在一组选项中选择多项。用户可以选择任意多个适用的选项。 单选按钮:代表互相排斥的选择。在某单选按钮组(多个按钮同名)中选择一个按钮,就会取消选择该组中的所有其他按钮。 单选按钮组:直接插入一组多个单选按钮。 九、表单的使用 3、插入表单元素及属性设置 列表/菜单:“列表”选项在一个滚动列表中显示选项值,用户可以从该滚动列表中选择多个选项。“菜单”选项则是在一个菜单中显示选项值,用户只能从中选择单个选项。 跳转菜单:是可导航的列表或弹出式菜单,它使你可以插入一种菜单,这种菜单中的每个选项都拥有链接的属性,单击即可跳转至其他网页或文件。 九、表单的使用 3、插入表单元素及属性设置 图像域:插入一个可放置图像的区域。该图像用于生成图形化按钮,例如“提交”或“重置”按钮。 文件域:插入一个文本字段和一个“浏览”按钮。用户可以使用文件域浏览本地计算机上的某个文件并将该文件作为表单数据上传。 按钮:在单击时执行某一脚本或程序,例如,提交或重置表单。并且可以自定义按钮名称或标签。 九、表单的使用 4、表单应用举例 简单举例: 浏览器端:表单中文本提交 服务器端:响应文本 <%=Request.Form("textfield") %> 十、多媒体的使用 1、插入Flash动画文件 2、插入Flash文本 3、插入Flash按钮 4、插入Shockwave影片 5、插入Applet(Java程序 6、插入参数 7、插入ActiveX 8、插入插件 9、音频文件使用 10、视频文件使用 十、多媒体的使用 1、插入Flash动画文件 插入菜单>媒体> Flash 插入栏>常用> Flash 技巧提醒:使Flash动画文件背景透明的方法: 在属性面板中增加属性Wmode,值Transparent 十、多媒体的使用 2、插入Flash文本 插入菜单>媒体> Flash文本 插入栏>常用> Flash文本 Flash 文本对象允许您创建和插入只包含文本的 Flash 影片。这使您可以使用自己选择的设计器字体和文本创建较小的矢量图形影片。 十、多媒体的使用 3、插入Flash按钮 插入菜单>媒体> Flash按钮 插入栏>常用> Flash按钮 十、多媒体的使用 4、插入Shockwave影片 插入菜单>媒体> Shockwave 插入栏>常用> Shockwave Shockwave 作为 Web 上用于交互式多媒体的 Macromedia 标准,是一种经压缩的格式,使得在 Macromedia Director 中创建的多媒体文件能够被快速下载,而且可以在大多数常用浏览器中进行播放。 十、多媒体的使用 5、插入Applet(Java程序) 可以使用 Dreamweaver 将 Java applet 插入 HTML 文档中。Java 是一种编程语言,通过它可以开发可嵌入 Web 页中的小型应用程序(applet)。 插入菜单>媒体> Applet 插入栏>常用> Applet 十、多媒体的使用 6、插入参数 插入栏>常用>参数 使用“参数”对话框可为 Shockwave 和 Flash SWF 文件、ActiveX 控件、Netscape Navigator 插件和 Java applets 定义的特定参数输入值。 使用参数控制媒体对象 十、多媒体的使用 7、插入ActiveX 可以在页面中插入 Active X 控件。ActiveX 控件(以前称作 OLE 控件)是可以充当浏览器插件的可重复使用的组件,有些像微型的应用程序。 插入菜单>媒体> ActiveX 插入栏>常用> ActiveX 十、多媒体的使用 8、插入插件 插入媒体元素: 插入菜单>媒体>插件 插入栏>常用>插件 十、多媒体的使用 9、音频文件的使用 常用的声音格式主要包括: mid/wav/aif/mp3/rm/ra/ram/rpm等。 (1)链接到音频文件 需要客户端已安装相应的播放程序。 (2)嵌入音频文件 嵌入音频将声音直接并入页面中,但只有在访问您站点的访问者具有所选声音文件的适当插件后,声音才可以播放。如果希望将声音用作背景音乐,或如果希望控制音量、播放器在页面上的外观或者声音文件的开始点和结束点,请嵌入文件。 十、多媒体的使用 9、音频文件的使用 若要嵌入音频文件,请执行以下操作: ①插入菜单>媒体>插件 或者 插入栏>常用>插件 ②在属性检查器中,单击文件夹图标以浏览音频文件,或者在“链接”文本框中键入文件的路径和名称。 ③通过在适当的文本框中输入值或者通过在“文档”窗口中调整插件占位符的大小,输入宽度和高度。 十、多媒体的使用 9、音频文件的使用 (3)使用播放声音行为 先创建基于文本和图像等对象的超链,再设其“播放声音”行为。(通过“行为”面板) (4)设置页面背景声音 代码视图下手工输入: 十、多媒体的使用 10、视频文件使用 常用的视频格式: 主要包括mpg/mpeg/avi/wmv/asf/mov/ rpm/rm等。 (1)链接到视频文件 需要客户端安装相应的播放程序。 (2)嵌入视频文件 插入菜单>媒体>插件 插入栏>常用>插件 十一、框架的使用 1、概述 2、创建/删除框架和框架集 3、选择框架和框架集 4、查看和设置框架和框架集属性 5、在框架中插入网页文件 6、保存框架和框架集的文件 7、设置框架内超链接 8、处理不能显示框架的浏览器 9、页中页技术(浮动框架) 十一、框架的使用 1、概述 框架结构是一种使多个网页通过多种类型区域的划分,显示在同一个窗口的网页结构。 一个框架结构又是由两部分网页文件组成的: 框架 框架集 十一、框架的使用 1、概述 关于框架和框架集 框架 是浏览器窗口中的一个区域,它可以显示与浏览器窗口的其余部分中所显示内容无关的 HTML 文档。 框架集 也是 HTML 文件,它定义一组框架的布局和属性,包括框架的数目、框架的大小和位置以及在每个框架中初始显示的页面的 URL。框架集文件本身不包含要在浏览器中显示的 HTML 内容,只是向浏览器提供应如何显示一组框架以及在这些框架中应显示哪些文档的有关信息。 十一、框架的使用 2、创建/删除框架和框架集 方法有二:一是使用系统预定义的框架集,二是自己动手设计框架集。 (1)使用预定义的框架集 插入菜单>HTML>框架>…… 插入栏> 布局>框架>…… “新建文档”对话框创建新的空框架集。 十一、框架的使用 2、创建/删除框架和框架集 (2)手动设计框架集 提示:在创建框架集或使用框架前,通过选择“查看”>“可视化助理”>“框架边框”,使框架边框在“文档”窗口的“设计”视图中可见。 若要创建框架集,请执行以下操作: 选择“修改”>“框架集”,然后从子菜单选择拆分项(例如“拆分左框架”或“拆分右框架”)。 Dreamweaver 将窗口拆分成几个框架。如果打开一个现有的文档,它将出现在其中一个框架中。 十一、框架的使用 2、创建/删除框架和框架集 (3)嵌套框架 在另一个框架集之内的框架集称作嵌套的框架集。一个框架集文件可以包含多个嵌套的框架集。大多数使用框架的 Web 页实际上都使用嵌套的框架 十一、框架的使用 2、创建/删除框架和框架集 (4)删除框架和框架集 将框架的边框拖离“设计”视图范围或拖到父框架的边框上。 如果要删除的框架中的文档有未保存的内容,则DW将提示保存该文档。 注:不能通过拖动边框完全删除一个框架集。要删除一个框架集,先关闭显示它的文档窗口,再删除该框架集文件。 十一、框架的使用 3、选择框架和框架集 可以直接在文档窗口中选择框架(Alt键+单击)或框架集,也可以通过框架面板进行选择。 十一、框架的使用 4、查看和设置框架和框架集属性 (1)框架集属性 “边框”确定在浏览器中查看文档时在框架周围是否应显示边框。要显示边框,则选择“是”;要使浏览器不显示边框,则选择“否”。 要允许浏览器确定如何显示边框,则选择“默认值”。 “边框宽度”指定框架集中所有边框的宽度。 十一、框架的使用 4、查看和设置框架和框架集属性 (1)框架集属性(续) “边框颜色”设置边框的颜色。使用颜色选择器选择一种颜色,或者键入颜色的十六进制值。 若要设置选定框架集的各行和各列的框架的大小,请单击“行列选择范围”区域左侧或顶部的选项卡;然后在“值”文本框中,输入高度或宽度。 十一、框架的使用 4、查看和设置框架和框架集属性 (1)框架集属性(续) 若要指定浏览器分配给每个框架的空间大小,请从“单位”菜单中选择以下选项: “像素”将选定列或行的大小设置为一个绝对值。对于应始终保持相同大小的框架(例如导航条)而言,此选项是最佳选择。 十一、框架的使用 4、查看和设置框架和框架集属性 (1)框架集属性(续) “百分比”指定选定列或行应相当于其框架集的总宽度或总高度的百分比。以“百分比”为单位的框架分配空间是在以“像素”为单位的框架之后,但在将单位设置为“相对”的框架之前。 “相对”指定在为“像素”和“百分比”框架分配空间后,为选定列或行分配其余可用空间;剩余空间在大小设置为“相对”的框架中按比例划分。 十一、框架的使用 4、查看和设置框架和框架集属性 (1)框架集属性(续) 一般浏览器在为以百分比或相对值指定大小的框架分配空间前,先为以像素为单位指定大小的框架分配空间。设置框架大小的最常用方法是将左侧框架设置为固定像素宽度,将右侧框架大小设置为相对大小,这样在分配像素宽度后,能够使右侧框架伸展以占据所有剩余空间。 十一、框架的使用 4、查看和设置框架和框架集属性 (2)框架属性 命名框架: “框架名称”是链接的 target 属性或脚本在引用该框架时所用的名称。 框架名称必须是单个单词;允许使用下划线 (_),但不允许使用连字符 (-)、句点 (.) 和空格。 框架名称必须以字母起始(而不能以数字起始)。 十一、框架的使用 4、查看和设置框架和框架集属性 (2)框架属性 框架名称区分大小写。不要使用 JavaScript 中的保留字(例如 top 或 navigator)作为框架名称。 提示:要让链接更改其它框架的内容,您必须命名目标框架。要令以后创建跨框架链接更容易一些,请在创建框架时命名每个框架。 十一、框架的使用 4、查看和设置框架和框架集属性 (2)框架属性 根据需要更改以下选项: “源文件”指定在框架中显示的源文档。单击文件夹图标可以浏览到一个文件并选择一个文件。 “滚动”指定在框架中是否显示滚动条。将此选项设置为“默认”将不设置相应属性的值,从而使各个浏览器使用其默认值。大多数浏览器默认为“自动”,这意味着只有在浏览器窗口中没有足够空间来显示当前框架的完整内容时才显示滚动条。 十一、框架的使用 4、查看和设置框架和框架集属性 (2)框架属性 “不能调整大小”令访问者无法通过拖动框架边框在浏览器中调整框架大小。 “边框”在浏览器中查看框架时显示或隐藏当前框架的边框。为框架选择“边框”选项将重写框架集的边框设置。 “边框”选项为“是”(显示边框)、“否”(隐藏边框)和“默认值”; 十一、框架的使用 4、查看和设置框架和框架集属性 (2)框架属性 “边框颜色”为所有框架的边框设置边框颜色。此颜色应用于和框架接触的所有边框,并且重写框架集的指定边框颜色。 您可以根据需要设置以下边距选项(如果看不到边距选项,则单击属性检查器右下角的扩展箭头): 十一、框架的使用 4、查看和设置框架和框架集属性 (2)框架属性 “边距宽度”以像素为单位设置左边距和右边距的宽度(框架边框和内容之间的空间)。 “边距高度”以像素为单位设置上边距和下边距的高度(框架边框和内容之间的空间)。 注意:设置框架的边距宽度和高度并不等同于在“修改”>“页面属性”对话框中设置边距。 十一、框架的使用 5、在框架中插入网页文件 直接在空白框架网页中进行编辑 文件菜单>在框架中打开 属性面板中修改源文件 十一、框架的使用 6、保存框架和框架集的文件 可以单独保存每个框架集文件和带框架的文档,也可以同时保存框架集文件和框架中所有文档。 (1)保存框架集文件 在“框架”面板或“文档”窗口中选择框架集,选择“文件>保存框架页/框架集另存为” 十一、框架的使用 6、保存框架和框架集的文件 (2)保存框架中显示的文档 在框架中单击,然后选择“文件>保存框架/框架另存为” (3)保存与框架关联的所有文件 文件>保存全部 十一、框架的使用 7、设置框架内超链接 要在一个框架中使用链接以打开另一个框架中的文档,则必须设置链接目标。链接的target属性指定在其中打开链接的内容的框架或窗口。 十一、框架的使用 8、处理不能显示框架的浏览器 Dreamweaver 允许您指定要在不支持框架的基于文本的浏览器和较旧的图形浏览器中显示的内容。此类内容存储在框架集文件中,用 noframes 标签括起来。当不支持框架的浏览器加载该框架集文件时,浏览器只显示用 noframes 标签括起来的内容。 十一、框架的使用 8、处理不能显示框架的浏览器 若要为不支持框架的浏览器提供内容,请执行以下操作: 选择“修改”>“框架集”>“编辑无框架内容”。 Dreamweaver 将清除“设计”视图中的内容,并且在“设计”视图顶部将显示“无框架内容”字样。 十一、框架的使用 8、处理不能显示框架的浏览器 要创建无框架内容,请执行以下操作之一: 在“文档”窗口中,像处理普通文档一样键入或插入内容。 选择“窗口”>“代码检查器”,将插入点置于 noframes 标签中的 body 标签之间,然后键入内容的 HTML 代码。 再次选择“修改”>“框架集”>“编辑无框架内容”以返回到框架集文档的普通视图。 十一、框架的使用 9、页中页技术(浮动框架) 代码视图下手工编写 如: 代码视图下“插入栏>框架>ifrm浮动框架” 十二、层的使用 1、概述 2、层的创建和删除 3、使用“属性面板”设置层的属性 4、层的基本操作 5、设置层的默认属性 6、层和表格之间转换 7、层和行为相结合制作动态效果 十二、层的使用 1、概述 在网页制作中,对文字和对象的位置控制是比较困难的,我们常常通过表格来定位,但往往达不到精度要求。 “层”是DW中另外一种可以进行排版的工具。它可以被定位在页面的任意位置,并且其中可以包含文本、图像等所有可直接插入至网页的对象。 层拥有很多表格所不具备的特点,比如可以重叠、便于移动、可设为隐藏等。 十二、层的使用 2、层的创建和删除 面板的显示:窗口>层(F2) 插入栏>布局>描绘层(拖动绘制,按Ctrl可连绘) 拖动“插入栏>布局>描绘层图标”到页面 插入菜单>布局对象>层 删除:Delete键 十二、层的使用 3、使用“属性面板”设置层的属性 选择一个或多个层后即可对它们进行操作或更改它们的属性。 十二、层的使用 3、使用“属性面板”设置层的属性 (1)单个层的属性设置 首先选择层(下列操作之一): 单击一个层的选择柄。 如果选择柄不可见,请在该层中的任意位置单击以显示该选择柄。 单击一个层的边框。 在一个层中按住 Ctrl-Shift 键并单击 单击层代码标记(在“设计”视图中) 使用属性检查器查看和设置层的属性 十二、层的使用 3、使用“属性面板”设置层的属性 层属性面板的设置: 层 ID 用于指定一个名称,以便在“层”面板和 JavaScript 代码中标识该层。只应使用标准的字母数字字符,而不要使用空格、连字符、斜杠或句号等特殊字符。每个层都必须有它自己的唯一 ID。 左和上(左侧和顶部)指定层的左上角相对于页面(如果嵌套,则为父层)左上角的位置。 十二、层的使用 3、使用“属性面板”设置层的属性 层属性面板的设置:(续) 宽和高指定层的宽度和高度。 位置和大小的默认单位为像素 (px)。您也可以指定以下单位:pc (pica)、pt(点)、in(英寸)、mm(毫米)、cm(厘米)或 %(父层相应值的百分比)。缩写必须紧跟在值之后,中间不留空格:例如,3mm 表示 3 毫米。 十二、层的使用 3、使用“属性面板”设置层的属性 层属性面板的设置:(续) Z 轴确定层的 z 轴(即堆叠顺序)。 在浏览器中,编号较大的层出现在编号较小的层的前面。值可以为正,也可以为负。当更改层的堆叠顺序时,使用“层”面板要比输入特定的 z 轴值更为简便(直接拖动)。 十二、层的使用 3、使用“属性面板”设置层的属性 层属性面板的设置:(续) 可见性指定该层最初是否是可见的。从以下选项中选择: “默认”不指定可见性属性。 当未指定可见性时,大多数浏览器都会默认为“继承”。 “继承”使用该层父级的可见性属性。 “可见”显示该层的内容,而不管父级的值是什么。 “隐藏”隐藏层的内容,而不管父级的值是什么。 十二、层的使用 3、使用“属性面板”设置层的属性 层属性面板的设置:(续) 背景图像指定层的背景图像。 背景颜色指定层的背景颜色。 如果将此选项留为空白,则可以指定透明的背景。 标签指定用来定义该层的 HTML 标签。 十二、层的使用 3、使用“属性面板”设置层的属性 层属性面板的设置:(续) 溢出控制当层的内容超过层的指定大小时如何在浏览器中显示层。 “可见”指示在层中显示额外的内容;实际上,该层会通过延伸来容纳额外的内容。 “隐藏”指定不在浏览器中显示额外的内容。 “滚动”指定浏览器应在层上添加滚动条,而不管是否需要滚动条。 “自动”使浏览器仅在需要时(即,当层的内容超出其边界时)才显示层的滚动条。 十二、层的使用 3、使用“属性面板”设置层的属性 层属性面板的设置:(续) 剪辑定义层的可见区域。 指定左侧、顶部、右侧和底边坐标可在层的坐标空间中定义一个矩形(从层的左上角开始计算)。层经过“剪辑”后,只有指定的矩形区域才是可见的。 源文件(仅限 layer 和 ilayer)用于在层中显示另一个 HTML 文档。 十二、层的使用 3、使用“属性面板”设置层的属性 (2)多个层的属性设置 首先选择多个层(选择层时按下 Shift 键) 标签:指定用来定义这些层的HTML标签。在下拉列表中有DIV和SPAN两个选项。 十二、层的使用 4、层的基本操作 (1)调整层的大小 调整单个层的大小(拖动手柄、CTRL+箭头) 调整多个层的大小 选择两个或更多个层后,选择“修改”>“对齐”>“设成宽度相同”或“修改”>“对齐”>“设成高度相同”。 (2)移动层的位置 鼠标、箭头或Shift+箭头 十二、层的使用 4、层的基本操作 (3)层的对齐 修改>对齐>…… (4)在层中插入对象 与在文档中操作类似 (5)层的叠加顺序 修改>排列顺序>…… 修改层的“Z轴”属性 十二、层的使用 4、层的基本操作 (6)层的复制、剪切和粘贴 与其它对象的操作类似 (7)层的嵌套 按住 Alt 键并拖动,可在现有层中嵌套一个层。 在“文档”窗口的“设计”视图中将插入点放置在一个现有层中,然后选择“插入”>“层”。 使用“层”面板将现有层嵌套在另一个层中, (选择一个层,然后通过按住 Ctrl 键并拖动,将层移动到“层”面板上的目标层。) 十二、层的使用 4、层的基本操作 (8)显示/隐藏层 选择“窗口” >“层”,打开“层”面板。 在层的眼形图标列内单击可以更改其可见性。 十二、层的使用 5、设置层的默认属性 选择“编辑”>“首选参数”>“层” 设置各对话框选项 6、层和表格之间转换 (1)将表格转换为层 “修改”>“转换”>“表格到层” 注:空单元格不会转换为层(除非它们具有背景颜色)。 (2)将层转换为表格 “修改”>“转换”>“层到表格”。 注:在转换为表格之前,请确保层没有重叠 十二、层的使用 7、层和行为相结合制作动态效果 例:动态显示-隐藏层 制作几个空链接,分别设置“显示-隐藏层”行为,控制层的显示/隐藏。 十三、时间轴的使用 1、显示时间轴面板 2、时间轴的基本操作 3、层与时间轴相结合实现动画 4、时间轴与行为相结合 十三、时间轴的使用 1、显示时间轴面板 窗口>时间轴(Alt + F9) 最早的DW MX 2004没有时间轴面板。必须升级到DW MX 2004 7.0.1 版。 时间轴面板显示层和图像的属性在一段时间内如何更改。 时间轴下拉式菜单:指定当前在时间轴面板中显示文档的哪个时间轴。 播放栏:显示当前在文档窗口中显示时间轴的哪一帧(红色竖条) 十三、时间轴的使用 1、显示时间轴面板 帧编号:指示帧的序号。 自动播放:使时间轴于当前页在浏览器中加载时自动开始播放。“自动播放”将一个行为附加到页的Body标签,它在页加载时执行“播放时间轴”操作。 循环:使当前时间轴于页在浏览器中打开时无限地循环。“循环”在动画的最后一帧之后将“转到时间轴帧”行为插入到“行为”通道中。在行为面板中双击该行为可编辑此行为的参数并更改循环的次数。 十三、时间轴的使用 2、时间轴的基本操作 修改>时间轴>选择项目 右键菜单 3、层与时间轴相结合实现动画 (1)直线动画 (2)曲线动画(CTRL添加关键帧) (3)任意路径动画 录制图层路径 直线动画制作 (1)将影像置入图层中; (2)执行菜单“窗口>时间轴”,调出时间轴面板,准备开始制作动画; (3)选取图层,将图层拖曳进入时间轴中; (4)调整右侧的关键影格,可控制播放动画时间的长短; (5)点选最右方的影格,然后移动图层的位置(此时编辑画面中会出现一条直线); (6)勾选时间轴上的”自动播放”,按下F12键预览效果(若不勾选此选项,亦可使用行为面板,利用事件来触发动画)。 曲线动画制作 先制作好一个直线移动的动画; 点选中间的(任何)影格,然后按下鼠标右键,选择”增加关键影格”,然后往上或往下拖曳图层(此时移动的路线即会呈现出曲线)。 任意路径动画制作 将影像置入图层中; 点选时间轴中的任一影格; 选择“修改>时间轴>录制层路径”(或使用右键菜单) 拖曳图层(所拖曳出来的轨迹便是移动的路径了) 十三、时间轴的使用 4、时间轴与行为相结合 我们可以在时间线的行为通道中添加各种行为,让网页更加丰富多彩。 十四、历史记录和资源管理器 1、历史记录 (1)历史记录面板 显示历史记录面板 窗口>历史记录 设置历史记录保留和显示的步骤数目 编辑菜单>首选参数>常规>历史步骤最多次数 清除历史记录 历史记录面板中右键单击>清除历史记录 十四、历史记录和资源管理器 1、历史记录 (2)历史记录使用 记录选取: 单选、用CTRL/SHIFT键辅助多选 重复应用: 单击“重放”按钮 右击>重播步骤 十四、历史记录和资源管理器 1、历史记录 (3)将历史记录存为命令 右击>另存为命令 (4)编辑命令列表 命令菜单>编辑命令列表 十四、历史记录和资源管理器 2、资源管理器 资源是建立网页和网站中的各种基本元素,如图像、Flash影片文件。 (1)资源管理器面板 窗口菜单>资源(F11键) (2)如何使用资源管理器 (3)选择和编辑资源 (4)使用收藏的“收藏”列表 (5)在其他站点中使用本站资源 十五、模板和库 1、库 库是一种特殊的Dreamweaver文件,其中包含已创建以便放在网页上的单独的“资源”或“资源”副本的集合,库里的这些资源被称为库项目。 库项目是一种用来存储在整个网站上,可以在多个页面中重复使用的对象元素。可以从文档 body 部分中的任意元素创建库项目,这些元素包括文本、表格、表单、Java applet、插件、ActiveX 元素、导航条和图像。 十五、模板和库 1、库 (1)创建、编辑、重命名和删除库项目 “资源”面板(“窗口”>“资源”)的“库”类别中,操作面板下方的按钮,或使用右键菜单。 (2)在文档或模板中加入库项目 直接从库中将库项目拖到文档或模板中。 (3)让文档中应用的库项目脱离库的控制 右击文档中库项目>从源文件中分离 选择属性面板上的“从源文件中分离” 十五、模板和库 2、模板 模板是一种特殊类型的文档,用于设计布局比较“固定”的页面。模板创作者设计页面布局,确定页面上可编辑区域和固定区域,即设计者可控制哪些页面元素由用户进行编辑,哪些不可编辑。当对一个模板进行修改以后,所有使用了这个模板的网页内容将随之同步被修改,简单地说就是一次可以更改多个页面,这也是模板最强大的功能之一。 十五、模板和库 2、模板 (1)创建模板 可以从现有文档(如 HTML、Macromedia ColdFusion 或 Microsoft Active Server Pages 文档)中创建模板,或者从新建的空白文档中创建模板。 若要创建模板,请执行以下操作: 十五、模板和库 2、模板 (1)创建模板 ① 打开要另存为模板的文档: 若要打开一个现有文档,请选择“文件”>“打开”,然后选择该文档。 若要打开一个新的空文档,请选择“文件”>“新建”。在出现的对话框中,选择“基本页”或“动态页”,选择要使用的页面类型,然后单击“创建”。 十五、模板和库 2、模板 (1)创建模板 ②文档打开时,执行下列操作之一: 选择“文件”>“另存为模板”。 在“插入”栏的“常用”类别中,单击“模板”按钮上的箭头,然后选择“创建模板”。 十五、模板和库 2、模板 (1)创建模板 ③从“站点”弹出菜单中选择一个用来保存模板的站点,并在“另存为”文本框中为模板输入一个唯一的名称。 ④单击“保存”。 Dreamweaver 将模板文件保存在站点的本地根文件夹中的 Templates 文件夹中,使用文件扩展名 .dwt。Dreamweaver 将在您保存新建模板时自动创建该文件夹。 十五、模板和库 2、模板 (1)创建模板 使用“资源”面板创建新模板 在“资源”面板(“窗口”>“资源”)中,选择面板左侧的“模板”类别。 即会显示“资源”面板的“模板”类别。 单击“资源”面板底部的“新建模板”按钮。 一个新的、无标题模板将被添加到“资源”面板的模板列表中。 在模板仍处于选定状态时,输入模板的名称,然后按 Enter 键 。 十五、模板和库 2、模板 (2)创建可编辑区域 插入可编辑区域 插入栏>常用>模板>可编辑区域 选择可编辑区域 删除可编辑区域 更改可编辑区域的名称 十五、模板和库 2、模板 (3)创建基于模板的文档 文件>新建>模板>选择模板文件>创建 资源面板>模板>选择模板>右键菜单>从模板新建 (4)删除文档中使用的模板 修改菜单>模板>从模板中分离 (5)更新模板及基于模板的网页 更新模板后在弹出对话框中选择“更新” 十五、模板和库 2、模板 (6)模板的嵌套 插入栏>常用>模板>创建嵌套模板 (7)将模板的“可编辑区”转换为“锁定区” 修改菜单>模板>删除模板标记 (8)编辑当前页面的模板 修改菜单>模板>打开附加模板 (9)设置模板的页面属性 修改菜单>页面属性 十五、模板和库 2、模板 (10)寻找“可编辑区” 修改菜单>模板>可编辑区名称 (11)模板中可创建的其他区域类型 可选区域:在基于带可选区的模板创建页面时,对于可选区的内容,可以选择显示或隐藏,以适应较复杂的页面布局。 重复区域:是可以根据需要在基于模板的页面中复制任意次数的模板区域。重复区域本身是不可编辑区域,要使重复区域中的内容可编辑,请在重复区域内插入可编辑区域。 十五、模板和库 2、模板 (11)模板中可创建的其他区域类型 可编辑可选区域:是可选区域的一种,用户可以设置显示或隐藏所选区域,并且可以编辑该区域中的内容,该可编辑的区域是由条件语句控制的。 重复表格:是重复区域的一种,使用重复表格用户可以创建包含重复行的表格格式的可编辑区域,可以定义表格属性并设置哪些表格单元格可编辑。 十六、层叠样式表CSS 1、CSS功能和分类 2、打开“CSS样式”面板 3、创建新样式 4、应用样式表 5、编辑现有样式表 6、取消应用样式 7、从文档中导出样式创建CSS样式文件 8、附加样式表(链接外部样式表文件) 十六、层叠样式表CSS 1、CSS功能和分类 层叠样式表CSS是一系列格式规则,它们控制网页内容的外观。使用CSS样式可以非常灵活地控制网页外观,从精确的布局定位到特定的字体和样式,可以让站点整体风格保持一致。 CSS样式非常灵活,因为样式并不局限于文本对象。对于文本、图像、表格、层等都可以定位样式和格式化样式。 十六、层叠样式表CSS 1、CSS功能和分类 外链样式表 内嵌样式表 内联样式表 十六、层叠样式表CSS 1、CSS功能和分类 外链样式表:使用单独的样式表文件(.CSS)。编辑建立CSS文件后,普通网页可以通过在样式表设置对话框中指定CSS文件,它的设定将会影响到整个网页。 文档标题 十六、层叠样式表CSS 1、CSS功能和分类 内嵌样式表:该类样式表是嵌在页面头部代码标记之间的,可以通过Dreamweaver中的样式表对话框设置。 十六、层叠样式表CSS 1、CSS功能和分类 内联样式表:即行间样式表,样式代码直接写在某一HTML标签后部,用styles属性说明。它的作用仅限于它修饰的标签,直接影响网页上单个对象。 设置当前单元格左边有一个象素的红色边框 十六、层叠样式表CSS 2、打开“CSS样式”面板 窗口菜单>CSS样式(Shift+F11) 使用“CSS样式”面板可以创建、查看、应用或编辑样式属性。 十六、层叠样式表CSS 3、创建新样式 执行下列操作之一, 打开“新建CSS样式”对话框 单击面板右下角位置“新建CSS样式”按钮 右键单击面板,选择“新建……” 文本>CSS样式>新建…… 在对话框中选择CSS样式类型: 类样式:可以将样式属性设置为任何文本范围或文本块。 标签:重定义特定标签,可以改变特定标签(如H1)的默认格式。 高级:CSS选择器。可以重定义具体某个标签组合的格式。 十六、层叠样式表CSS 4、应用样式表 类样式是唯一可以应用于文档中的任何文本的CSS样式类型。 (1)首先在文档中,选择要将CSS样式应用于其上的文本 插入点放在段落中,样式将应用于整个段落。 如果在单个段落中选择一个文本范围,则CSS样式只影响所选范围 使用标签选择器,可以指定要应用CSS样式的确切标签。 十六、层叠样式表CSS 4、应用样式表 (2)然后再执行下列操作之一 在CSS样式面板选择“应用样式”,然后在列表中单击要应用的样式的名称。 在文本属性面板中,设置“样式”选项,选择要应用的样式式。 在文档窗口中,右击所选文本,选择“CSS样式”,然后选择要应用的样式。 文本菜单>CSS样式 十六、层叠样式表CSS 5、编辑现有样式表 (1)修改CSS样式 双击所选样式 CSS样式面板底部的“编辑样式表”按钮 (2)删除CSS样式 (3)复制CSS样式 6、取消应用样式 选择已应用样式的文本,在属性面板或右击,选择“CSS样式>无” 十六、层叠样式表CSS 7、从文档中导出样式创建CSS样式文件 可以从文档中导出样式以创建新的CSS样式表文件。然后,可链接到其他文档以应用这些样式。 右击应用样式的文本>CSS样式>导出… 十六、层叠样式表CSS 8、附加样式表(链接外部样式表文件) 在“CSS样式”面板中,单击“附加样式表”按钮,出现“链接外部样式表”对话框,在“添加为”选项中,选择其中一个选项: 链接:创建当前文档和外部样式表之间的链接,该选项在HTML代码中创建一个标签,并引用已发布的样式表所在的URL。 导入:引用外部样式表。该选项在HTML代码中创建一个@import标签,并引用已发布的样式表所在的URL。 十七、行为的应用 1、概念 2、行为面板 3、关于事件 4、为对象附加行为 5、Dreamweaver内置行为 十七、行为的应用 1、概念 Dreamweaver行为是一种运行在浏览器中的JavaScript代码,设计者可以将其放置在网页文档中,以允许浏览者与网页本身进行交互。 行为由事件和事件触发的动作组成 十七、行为的应用 2、行为面板 (1)显示行为面板 窗口菜单>行为(Shift+F4) (2)附加行为 行为面板:“+”按钮 (3)删除行为 行为面板:“–”按钮 (4)调整行为顺序 (5)设置浏览器版本 (6)为附加的行为选择事件 十七、行为的应用 3、关于事件 行为是事件与动作的联合,事件用于指明执行某项动作的条件。常用事件包含有鼠标事件、键盘事件、窗体事件和其它事件等。 onClick:单击选定元素(如超链接、图片、按钮)将触发该事件。 onMouseOver:当鼠标首次移动指向特定对象时触发该事件。 十七、行为的应用 3、关于事件 onMouseMove:当鼠标停留在对象边界内移动时触发该事件。 onMouseOut:当鼠标离开对象边界时触发该事件。 onMouseDown:当按下鼠标按钮时触发该事件。 onLoad:当图片或页面完成载入后触发该事件。 十七、行为的应用 4、为对象附加行为 可以将行为附加给整个文档、链接、图像、表单元素或其他HTML对象。 十七、行为的应用 5、Dreamweaver内置行为 调用 JavaScript “调用 JavaScript”动作允许您使用“行为”面板指定当发生某个事件时应该执行的自定义函数或 JavaScript 代码行。(您可以自己编写 JavaScript 或使用 Web 上多个免费的 JavaScript 库中提供的代码。 例如,若要创建一个“后退”按钮,您可以键入if(history.length>0){history.back()}。如果您已将代码封装在一个函数中,则只需键入该函数的名称(例如 hogback())。 十七、行为的应用 5、Dreamweaver内置行为 改变属性 使用“改变属性”动作更改对象某个属性(例如层的背景颜色或表单的动作)的值。您可以更改的属性是由浏览器决定的; 十七、行为的应用 5、Dreamweaver内置行为 检查浏览器 使用“检查浏览器”动作可根据访问者不同类型和版本的浏览器将他们转到不同的页。例如,您可能想要将使用 Netscape Navigator 4.0 或更高版本浏览器的访问者转到一页,而将使用 Internet Explorer 4.0 或更高版本的访问者转到另一页,并让使用任何其它类型浏览器的访问者留在当前页上。 十七、行为的应用 5、Dreamweaver内置行为 检查浏览器(续) 将此行为附加到几乎与任何浏览器都兼容的页(该页不使用任何其它 JavaScript)的 body 标签上是十分有用的;这样,已关闭 JavaScript 功能的访问者在访问此页时仍可以看到内容。 另一个办法是将此行为附加到一个空链接(例如 )并让该动作根据访问者浏览器的类型和版本确定链接的目标。 十七、行为的应用 5、Dreamweaver内置行为 检查插件 使用“检查插件”动作根据访问者是否安装了指定的插件这一情况将他们转到不同的页。例如,您可能想让安装有 Shockwave 的访问者转到一页,让未安装该软件的访问者转到另一页。 控制 Shockwave 或 Flash 使用“控制 Shockwave 或 Flash”动作来播放、停止、倒带或转到 Macromedia Shockwave 或 Macromedia Flash SWF 文件中的帧。 十七、行为的应用 5、Dreamweaver内置行为 拖动层 “拖动层”动作允许访问者拖动层。使用此动作创建拼板游戏、滑块控件和其它可移动的界面元素。 转到 URL “转到 URL”动作在当前窗口或指定的框架中打开一个新页。此操作尤其适用于通过一次单击更改两个或多个框架的内容。 十七、行为的应用 5、Dreamweaver内置行为 跳转菜单 当您使用“插入”>“表单对象”>“跳转菜单”创建跳转菜单时,Dreamweaver 创建一个菜单对象并向其附加一个“跳转菜单”(或“跳转菜单转到”)行为。 十七、行为的应用 5、Dreamweaver内置行为 打开浏览器窗口 使用“打开浏览器窗口”动作在一个新的窗口中打开 URL。您可以指定新窗口的属性(包括其大小)、特性(它是否可以调整大小、是否具有菜单栏等)和名称。例如,您可以使用此行为在访问者单击缩略图时在一个单独的窗口中打开一个较大的图像;使用此行为,您可以使新窗口与该图像恰好一样大。 十七、行为的应用 5、Dreamweaver内置行为 播放声音 使用“播放声音”动作来播放声音。例如,您可能要在每次鼠标指针滑过某个链接时播放一段声音效果,或在页载入时播放音乐剪辑。 十七、行为的应用 5、Dreamweaver内置行为 弹出消息 “弹出消息”动作显示一个带有您指定的消息的 JavaScript 警告。因为 JavaScript 警告只有一个按钮(“确定”),所以使用此动作可以提供信息,而不能为用户提供选择。 十七、行为的应用 5、Dreamweaver内置行为 预先载入图像 “预先载入图像”动作将不会立即出现在页上的图像(例如那些将通过行为或 JavaScript 换入的图像)载入浏览器缓存中。这样可防止当图像应该出现时由于下载而导致延迟。 十七、行为的应用 5、Dreamweaver内置行为 设置框架文本 “设置框架文本”动作允许您动态设置框架的文本,用您指定的内容替换框架的内容和格式设置。该内容可以包含任何有效的 HTML 代码。使用此动作动态显示信息。 十七、行为的应用 5、Dreamweaver内置行为 设置层文本 “设置层文本”动作用您指定的内容替换页上现有层的内容和格式设置。该内容可以包括任何有效的 HTML 源代码。 十七、行为的应用 5、Dreamweaver内置行为 设置状态栏文本 “设置状态栏文本”动作在浏览器窗口底部左侧的状态栏中显示消息。 设置文本域文本 “设置文本域文本”动作用您指定的内容替换表单文本域的内容。 十七、行为的应用 5、Dreamweaver内置行为 显示-隐藏层 “显示-隐藏层”动作显示、隐藏或恢复一个或多个层的默认可见性。此动作用于在用户与页进行交互时显示信息。例如,当用户将鼠标指针滑过一个植物的图像时,您可以显示一个层给出其详细信息。 “显示-隐藏层”还可用于创建预先载入层,即一个最初挡住页的内容的较大的层,在所有页组件都完成载入后该层即消失。 十七、行为的应用 5、Dreamweaver内置行为 显示弹出菜单 使用“显示弹出菜单”行为来创建或编辑 Dreamweaver 弹出菜单,或者打开并修改已插入 Dreamweaver 文档的 Fireworks 弹出菜单。 通过在“显示弹出菜单”对话框中设置选项来创建水平或垂直弹出菜单。您可以使用此对话框来设置或修改弹出菜单的颜色、文本和位置。 十七、行为的应用 5、Dreamweaver内置行为 交换图像 “交换图像”动作通过更改 img 标签的 src 属性将一个图像和另一个图像进行交换。使用此动作创建按钮鼠标经过图像和其它图像效果(包括一次交换多个图像)。插入鼠标经过图像会自动将一个“交换图像”行为添加到您的页中。 注意:因为只有 src 属性受此动作的影响,所以您应该换入一个与原图像具有相同尺寸(高度和宽度)的图像。否则,换入的图像显示时会被压缩或扩展,以使其适应原图像的尺寸。 十七、行为的应用 5、Dreamweaver内置行为 恢复图像交换 “恢复交换图像”动作将最后一组交换的图像恢复为它们以前的源文件。每次您将“交换图像”动作附加到某个对象时都会自动添加该动作;如果您在附加“交换图像”时选择了“恢复”选项,则您就不再需要手动选择“恢复交换图像”动作。 十七、行为的应用 5、Dreamweaver内置行为 检查表单 “检查表单”动作检查指定文本域的内容以确保用户输入了正确的数据类型。使用 onBlur 事件将此动作分别附加到各文本域,在用户填写表单时对域进行检查;或使用 onSubmit 事件将其附加到表单,在用户单击“提交”按钮时同时对多个文本域进行检查。将此动作附加到表单防止表单提交到服务器后任何指定的文本域包含无效的数据。 十八、扩展功能 扩展( Extension,也称插件)是可添加到Macromedia应用程序中以增强应用程序功能的软件。 十八、扩展功能 1、扩展管理器 扩展管理器是一个独立的应用程序,可用于安装和管理Macromedia应用程序中的功能扩展。 命令菜单>扩展管理 开始>程序>Macromedia>Macromedia Extension Manager 十八、扩展功能 2、插件安装与删除 若要在应用程序中添加功能,首先应获取要安装的功能扩展。功能扩展的文件扩展名是 . mxp。这种打包的功能扩展文件包包含您安装和使用该功能扩展所需要的全部文件。 双击该功能扩展文件 在扩展管理器中选择“文件菜单>安装扩展” 十八、扩展功能 3、插件的获得 网上获取 http://www.windstudio.net/(有风的日子) http://www.kupage.com/extensions/(酷页) 十八、扩展功能 4、常用插件应用 (1)Flash Image插件 用来制作图片渐显渐隐效果,这个效果由鼠标动作控制。起初图片处于半透明的朦胧状态,当鼠标移动到图片上面时,图片就渐渐变得清晰;当鼠标移出图片时,图片又渐渐变得模糊,回到半透明状态。可以用这个插件来制作导航条和栏目插图。 可以到如下地址下载:http://www.windstudio.net/download/dreamweaver_exchange/flash_image.mxp。 十八、扩展功能 4、常用插件应用 (2)Floating Image插件 这个插件用来在页面中添加一个到处飘浮的图片,很吸引眼球,可以做广告、发提醒等等。 (3)IE5.5 Custom Scrollbars插件 这个插件用来自定义IE浏览器的滚动条,可以让原本单调的滚动条变得色彩缤纷、生动活泼起来。 十八、扩展功能 5、其它常见插件简介 Chromeless Window:用来创建没有边框的精致窗口 DHTML Scrollable Area:用来插入一个可以自动滚动的文本区域,适用于制作公告栏、滚动新闻等。 Disable View Source Code:用来禁止用户使用右键菜单,可以保护源代码。 十八、扩展功能 5、其它常见插件简介 Preload Images with Status Bar and Redirect:用来制作打开网页时的进度条效果,就像安装软件或者载入游戏进度时的那那种效果,免除枯燥,增添趣味。 Right Click Menu Builder:用来自定义鼠标右键菜单(IE5及以上版本支持),可以加入个人信息和栏目导航等。 十八、扩展功能 5、其它常见插件简介 CN Insert Greeting:用来在网页中插入问候语,可以根据时间自动变换。 Scrolling Status Bar:让状态栏滚动出现的自定义的文字。 十九、动态网页开发基础知识 1、ASP技术概述 2、Dreamweaver动态页设计工作流程 3、环境准备 4、设置支持ASP技术的站点 5、创建数据库连接 6、创建动态内容的数据源--记录集 7、数据库常用操作 8、用户身份认证 9、应用实例 十九、动态网页开发基础知识 1、ASP技术概述 ASP(Active Server Pages)是一种服务器脚本编写环境。 使用ASP可以和HTML页、脚本命令和ActiveX组件等共同创建交互的Web页和基于Web的功能强大的应用程序。 十九、动态网页开发基础知识 2、Dreamweaver动态页设计工作流程 Macromedia Dreamweaver提供动态数据绑定和动态元素服务器行为等技术,使用户能够在没有编程语言基础的情况下创建动态Web站点。 开发动态网页的关键步骤有: 设计页面 创建动态内容的源 向网页添加动态内容 增强动态页的功能 测试和调试页 十九、动态网页开发基础知识 3、环境准备 Microsoft IIS,Windows NT server、Windows 2000和Windows XP附带的。 Microsoft PWS,运行在Windows 98和NT Workstation下,是IIS的精简版本。 十九、动态网页开发基础知识 4、设置支持ASP技术的站点 管理站点>设置测试服务器 十九、动态网页开发基础知识 5、创建数据库连接 要将数据库与ASP应用程序一起使用,则需要在Dreamweaver 中创建数据库连接。 (1)了解ASP数据库连接 ASP应用程序必须通过开放式数据库连接(ODBC)驱动程序或对象链接和嵌入式数据库(OLEDB)提供程序连接到数据库。该驱动程序或OLEDB提供程序用作解释器,能够使WEB应用程序与数据库进行通信。 十九、动态网页开发基础知识 5、创建数据库连接 (2)数据库连接有两种方法 使用数据源名称(DSN)连接数据库; DSN是个单个词的标识符,它指向数据库并包含连接到数据库所需的全部信息。如果Windows系统安装了ODBC驱动程序,则可以使用DSN。 使用连接字符串连接到数据库。 连接字符串是手动编码的表达式,它标识数据库并列出连接到该数据库所需的信息。 十九、动态网页开发基础知识 5、创建数据库连接 (3)创建DSN连接数据库 DSN是表示一组数据库连接参数的单词标识符。这些参数包括服务器名称、指向数据库的路径或数据库名称、要使用的ODBC驱动程序、用户和密码(如果有的话)。 控制面板>管理工具> ODBC数据源>系统DSN>添加 十九、动态网页开发基础知识 5、创建数据库连接 (4)使用连接字符串连接到数据库 连接字符串包含Web应用程序在服务器上连接到数据库所需的全部信息。Dreamweaver在页的服务器端脚本中插入该字符串,以便让应用程序服务器在随后进行处理。 Driver={SQL Server};Server=XXXXX;Database=XXXXXX;UID=XXXXX;PWD=XXXXXX “Provider=Microsoft.Jet.OLEDB.4.0;DataSource=“&Server.MapPath(”xxxxxxx”) 十九、动态网页开发基础知识 5、创建数据库连接 (5)创建、编辑或删除数据库连接 ① 创建数据库连接 以创建ACCESS数据库连接字符串为例。 打开一个ASP页,再打开“数据库”面板。单击该面板上的加号(+)按钮,然后从弹出式菜单中选择“自定义连接字符串”。填写对话框,然后单击“确定”。 十九、动态网页开发基础知识 5、创建数据库连接 (5)创建、编辑或删除数据库连接 ②编辑数据库连接 双击“数据库”面板中数据库连接 ③删除数据库连接 在“数据库”面板,选中连接后单击“ – ” 十九、动态网页开发基础知识 6、创建动态内容的数据源--记录集 将数据库用作动态网页的内容源时,必须首先创建一个要在其中存储检索数据的记录集。 记录集在存储内容的数据库和生成网页的应用程序服务器之间起一种桥梁作用。 记录集由数据库查询返回的数据组成,并且临时存储在应用程序服务器的内存中,以便进行快速数据检索。 十九、动态网页开发基础知识 6、创建动态内容的数据源--记录集 记录集本身是从指定数据库中检索到的数据的集合。它可以包括完整的数据库表格,也可以包括表格的行和列的子集。这些行和列通过记录集定义的数据库查询进行检索。数据库查询是用结构化查询语言(SQL)编写的。 应用程序面板组>绑定>添加 窗口菜单>绑定>添加 十九、动态网页开发基础知识 7、数据库常用操作 添加动态文本、增加记录、删除记录、更新记录、分页显示、查询、创建记录计数器、创建导航条、创建主子页面等。 8、用户身份认证 登录用户、注销用户、限制对页的访问、检查新用户名 十九、动态网页开发基础知识 9、简单实例 数据库简单浏览: 做好连接后,在asp文件中编写: <% while (! (Recordset1.EOF) ) {%> <% for( var i=0;i<=(Recordset1.Fields.Count-1);i=i+1) {%> <% =Recordset1.Fields(i).Value %>   <%}%> <%Recordset1.MoveNext(); }%> 二十、网站设计和维护 1、网站设计的要求 (1)鲜明的主题 (2)丰富的内容 (3)特色的形式 (4)良好的视觉效果 (5)完善的导航系统 (6)优质的服务 二十、网站设计和维护 2、网站设计的过程 网站设计:名称、徽标(logo)、主题、目录结构、服务项目 素材准备:收集、整理、设计制作 网页设计:版式、布局、色彩、样式、动态效果 网页制作:CSS样式表、库、模板、导航条、栏目标题、横幅、广告 网页预览、网站检查与测试 上传、发布 二十、网站设计和维护 3、站点维护 (1)定义站点及参数设置 选择一种访问远程文件夹的访问方法 本地/网络:如果访问网络文件夹,或者在本地计算机上运行测试服务器 FTP:如果使用FTP连接到测试服务器。 RDS(远程开发服务):如果使用RDS连接到WEB服务器,远程文件夹必须位于运行ColdFusion的计算机上。 二十、网站设计和维护 3、站点维护 (1)定义站点及参数设置 SourceSafe数据库:如果使用SourceSafe数据库连接到WEB服务器。只有Windows支持SourceSafe数据库,若要在Windows中使用SourceSafe,必须安装了Microsoft Visual SourceSafe Client 第6版。 二十、网站设计和维护 3、站点维护 (1)定义站点及参数设置 WebDAV(基于WEB的分布创作和版本控制),如果使用WebDAV协议连接到Web服务器。对于这种访问方法,必须支持此协议的服务器,如Microsoft Internet Information Server (IIS) 5.0 或 Apache Web服务器。 二十、网站设计和维护 3、站点维护 (2)超链检查与修复 ① 检查页面或站点内的链接 修复大型站点上断开的链接是一个单调乏味又费力的工作。这是因为大型站点可以包含到内部文档和外部文档的上百个链接,而且这些链接可能会随时间的推移而改变。孤立的文件(指仍然存在于站点内,但是站点内没有其他文件链接到该文件)也是问题,因为它们占据磁盘空间,而且可能使处理此站点的其他小组成员迷惑不解。 二十、网站设计和维护 3、站点维护 (2)超链检查与修复 ① 检查页面或站点内的链接 “检查链接”功能可用来在打开的文件、本地站点的某一部分或者整个本地站点中搜索断开的链接和未被引用的文件。Dreamweaver只验证站内文档的链接;并不验证外部链接。 在Dreamweaver检查完指定文件中的链接后,它打开“链接检查器”面板(在结果面板组中)。此对话框显示一个列有断开的链接、外部链接(不能检查链接)和孤立文件的列表。 ① 检查页面或站点内的链接 a.检查当前文档内的链接 文件菜单>检查页>检查链接 b.检查本站点某一部分中的链接 在站点面板中,从“当前站点”弹出式菜单中选择一个站点。 在本地视图中,选择要检查的文件或文件夹。 执行下列操作之一,启动该检查: 右击选定文件,再选择“检查链接>选定的文件/文件夹” 文件菜单>检查页>检查链接 ① 检查页面或站点内的链接 c. 检查整个站点中的链接 站点菜单>检查站点范围的链接 备注:如果选择的 报告 软件系统测试报告下载sgs报告如何下载关于路面塌陷情况报告535n,sgs报告怎么下载竣工报告下载 类型为“孤立文件”,可以直接从“链接检查器”面板中删除孤立文件,方法是从该列表中选中一个文件后按Delete键。 ②修复断开的链接 当检查链接时,“链接检查器”面板显示一份报告,该报告包括断开的链接、外部链接和孤立的文件。可直接在“链接检查器”面板中修复断开的链接和图像引用,也可以从此列表中打开文件,然后在属性检查器中修复链接。 ②修复断开的链接 a. 在“链接检查器”中面板修复链接 先运行链接检查报告,在链接检查器面板中“显示”列,选择“断掉的链接”,一个文件夹图标出现在此断开的链接旁边,单击文件夹图标以浏览要链接的正确文件。 如果还有对同一文件 的其他断开的引用,会出现一个对话框提示您修复其他文件中的这些引用。你可以选择只更新当前引用,或更新所有引用此文件的文档。 ②修复断开的链接 b. 打开文件修复 先运行链接检查报告,在链接检查器面板中双击“文件”列中的某个条目,打开有问题的图像或链接,在属性检查器中修正。 链接修复后,该条目在链接检查器面板的列表中不再显示。 二十、网站设计和维护 3、站点维护 (3)下载和上传文件 ① 从远程服务器上下载文件 ② 向远程服务器上传文件 ③ 本地和远程服务器文件同步 END
本文档为【Dreamweaver教学课件】,请使用软件OFFICE或WPS软件打开。作品中的文字与图均可以修改和编辑, 图片更改请在作品中右键图片并更换,文字修改请直接点击文字进行修改,也可以新增和删除文档中的内容。
该文档来自用户分享,如有侵权行为请发邮件ishare@vip.sina.com联系网站客服,我们会及时删除。
[版权声明] 本站所有资料为用户分享产生,若发现您的权利被侵害,请联系客服邮件isharekefu@iask.cn,我们尽快处理。
本作品所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用。
网站提供的党政主题相关内容(国旗、国徽、党徽..)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。
下载需要: ¥17.0 已有0 人下载
最新资料
资料动态
专题动态
个人认证用户
豆浆
暂无简介~
格式:ppt
大小:374KB
软件:PowerPoint
页数:0
分类:初中语文
上传时间:2019-05-16
浏览量:13