Dreamweaver教学课件.ppt

1、Dreamweaver 的使用,主要内容：,一、Dreamweaver概述 二、站点的创建和管理 三、文本的使用 四、图像的使用 五、超链接 六、网页属性 七、表格的使用,主要内容：,八、页面布局 九、表单的使用 十、多媒体的使用 十一、框架的使用 十二、层的使用 十三、时间轴的使用 十四、历史和资源管理器,主要内容：,十五、模板和库 十六、层叠样式表 十七、行为的应用 十八、扩展功能 十九、动态网页开发基础知识 二十、网站设计,一、Dreamweaver概述,1、Dreamweaver简介 2、Dreamweaver的工作环境和相关操作 3、HTML语言介绍 4、关于Dreamweaver

2、帮助,1、 Dreamweaver简介,Dreamweaver 是由美国著名的软件开发商Macromedia公司推出的一个“所见即所得”的可视化网站开发工具。 用于对 Web 站点、Web 页和 Web 应用程序进行设计、编码和开发。,1、 Dreamweaver简介,它的主要特点如下： 可视化的设计界面：学习简单，操作快捷 跨浏览器支持：支持多种浏览器，并可以选择主要的浏览器 支持动态网页技术：CSS、层、行为、JavaScript 强大的网站管理功能：库、模板、标签等,1、 Dreamweaver简介,它的主要特点如下(续)： 丰富的媒体支持：Java、Flash、Shockwave、Ac

3、tiveX、Real等 超强的扩展能力：支持第三方插件 完善的协同工作能力：Flash、Fireworks、Coldfusion,2、Dreamweaver的工作环境和相关操作,界面： 菜单栏、“插入”栏、文档工具栏、文档窗口、面板组、属性检查器 面板整理： 展开或折叠一个面板组 关闭面板组 打开屏幕上不可见的面板组或面板 在展开的面板组中选择一个面板,2、Dreamweaver的工作环境和相关操作,面板整理(续)： 查看未显示的面板组的“选项”菜单 停靠和取消停靠面板和面板组 重新调整面板组大小和重命名面板组 设置“面板”首选参数,2、Dreamweaver的工作环境和相关操作,文件操作：

4、创建新文档 保存新文档 设置默认的新文档类型 打开现有文档 导入 Microsoft Word HTML 文件：导入/清理 标尺和网格：显示/隐藏 参数选择：“编辑”“首选参数”,3、HTML语言介绍,(1) 概述 (2) HTML文档 (3) HTML标签和属性简介,(1) 概述,HTML （Hypertext Markup Language，超文本标识语言） 是生成WWW的语言之一，也是组织多媒体文档的一门重要语言，它不仅用来编写 Web 网页，而且也越来越多地被用来制作光盘上的多媒体节目。,(2) HTML文档,HTML文档是一种没有格式的文本文档，也称为 ASCII 文件。因此，HTM

5、L文档可以使用任何一种文本编辑器来编写。 一个文档通常由文档头(head)、文档名称(title)、表格(table)、段落(paragraph)和列表(list)等成分构成。为了表达方便，我们把这些成分称为文档元素(element)，简称为文素，它们是文本文档的基本构件，并且使用 HTML规定的标签(tag)来标识这些文素。,(2) HTML文档,每个HTML文档都是由标签开始，而以标签结束。每个HTML文档分成两个部分组成：文档头(head)和正文(body)，并分别用 和 来作标记。 文档头标签 之间所包含的是文档的名称(title) 正文标签 之间含有用各种HTML标签作标记的段落、列

6、表、和其他文素组成的实际文档。,(2) HTML文档,一个简单的HTML文档如下所示：章乃器轶事 章乃器妙语揭贪官 章乃器是我国杰出的爱国人士。1938年3月，应当时安徽省政府主席李宗仁之邀，出任安徽省政府财政厅厅长。 针对当时众多的贪官污吏乘国难之机贪污腐化、中饱私囊等劣行，章乃器上任伊始就提出了“铲除贪污”等四项重大措施。 ,(3) HTML标签和属性简介,简介 基本标签 属性 超链接 嵌入背景声音 用图像作网页的背景 表格的标签和属性,简介,HTML标签由3部分组成：左尖括号“”。HTML标签名称中的字母不分大小写，标签通常是成对出现的某些文素还可以包含“属性(attribute)”。属

7、性是指背景颜色、字体属性(大小、颜色、正体、斜体等)、对齐方式等等，它是包含在开始标签中的附加信息。例如，表示这段文字是居中对齐的,基本标签,、和等等,基本标签(1), HTML标签：这个标签告诉浏览器在 之间的文件是用HTML编写的文档。文档头标签： 之间包含的是HTML文档名称。文档名称标签： 之间包含的是具体的HTML文档名称，字符数通常不超过64。,基本标签(2), 正文标签： 之间是正文部分，这是HTML文档最多的部分，它包含的是显示在浏览器文本窗口中的文档内容。标题(Heading)标签：HTML定义了6个等级的标题标签，其中n1，2，6。 之间包含的是第n级标题。,基本标签(3)

8、, 段落(Paragraph)标签： 之间包含的是一段文本。HTML中没有使用硬换行(carriage return)来分段落，这是与字处理软件不同的。在HTML文档中，和之间不论有多少行，不论每一行有多长或者多短，也不论其间有多少个空格，浏览器都把它作为一个段落来处理。,基本标签(4),、和 列表标签：HTML支持无编号列表和有编号列表，而且还可以在列表中套列表。 表示标签之间的列表项目是无编号列表(Unnumbered List)。 表示标签之间的列表项目是有编号列表(Ordered List)。表示标签后面的内容是具体的列表项目(List Item)。,基本标签(5), 强制换行标签(F

9、orced Line Breaks/Postal Addresses)：使用标签可强制文本换行，其好处是不在行与行之间增加空白行。水平线(Horizontal Rule)标签：生成一条用于分割文档的水平线，其长度与浏览器窗口等宽，粗细和长短都可设置。,属性,属性是指用来修改HTML标签之间的文素特性，例： 例1：理解字符属性的概念 例2：这是居中段落 ,超链接,基本语法是：. 或 . ,文件内链接,文件内链接是为阅读方便服务的，主要用于比较长的文件。在作链接之前要先建立锚点（名），给链接的目的地作个定义。 建立锚名 链接到锚名,文件内链接*命令格式,建立锚名： 锚名所对应的文本 链接到锚名 链

10、接文本,嵌入背景声音,在HTML文档中可嵌入背景音乐，当打开HTML文档时就开始播放。嵌入背景音乐的基本语法结构如下：其中，URL表示背景音乐的文件名， LOOP表示循环次数（INFINITE为无限次）。,用图像作网页的背景,在浏览器上经常可看到各种背景图像，使用图像做网页背景的语法结构如下：做背景的图像不需要很大，浏览器会利用它的平铺(tiling)功能布满整个网页。,在文档中显示图像,命令格式：例：显示一幅文件名为flower.gif的图片,在文档中显示图像,相关属性： 控制大小： 高：HEIGHT像素数 宽：WIDTH像素数 图像边框： BORDER=宽度值 例：,用图像实现链接,格式：

11、例：,在网页中加入视频,格式：说明：引导图在当视频还没有完全被载入时，会显示在视频将显示的位置。,在网页中加入视频,相关属性： START属性： 用于控制视频的播放时机，取值有fileopen和mouseover两种，分别表示当页面一打开就播放和当鼠标移到播放区域上才播放。默认值为fileopen。 也可以同时设定以上两个值，这时表示页面刚载入时播放，其后，当我们将鼠标移到显示区域时，视频也会播放。,在网页中加入视频,例： ,让文本动起来,基本格式：文本 一些相关属性： DIRECTION属性：取值有两种 LEFT：右向左 RIGHT：左向右,让文本动起来,一些相关属性： BEHAVIOR属性

12、：取值有三种 ALTERNATE：来回移动 SLIDE：移动一次后停止 SCROLL：循环单向移动,表格的标签和属性,标签 属性 注意事项,表格*标签,. 定义表格。 定义表的名称(CAPTION). 定义表的行(Table Row)，可定义对齐属性. 定义列表标题(Table Header)，常为黑体字，中央对齐 定义列表数据(Table Data)单元,表格*属性,ALIGN (LEFT, CENTER, RIGHT) 表单元的水平对齐方式 VALIGN (TOP, MIDDLE, BOTTOM) 表单元的垂直对齐方式 COLSPAN=n 表单元跨越的列数 ROWSPAN=n 表单元跨越的

13、行数,表格*注意事项, 必须要包含整个表的定义； 在表格中的第一项是表的名称(CAPTION)，它是可有可无的； 标签定义的行的数目没有限制； 在一行中，使用 或者 标签定义的数据单元数目也没有限制； 表的每一个单元的属性可单独设置，因此表格的形式可以多种多样； 数据单元中的内容可以是文字，也可以是图标，或者是两者，而且还可以设置超级链接,表格示例, 例表一 基本情况 入库资料 其它资料 编号 姓名 年龄 001 肖静 23 002 陈江 25 ,4、 Dreamweaver 帮助,“帮助”系统提供所有Dreamweaver 功能的综合信息，其本身就是一本很好的电子书。,二、站点的创建和管理,

14、Dreamweaver可以用于制作单独的网页文件，但更经常地用于整个站点的建设。因为大多数网页设计者创建的往往不是多种风格网页的集合，而是风格一致的一个网站。,1、创建本地站点,选择“站点”“管理站点”。 出现“管理站点”对话框。 注意：如果您没有定义过任何 Dreamweaver 站点，则会直接出现“站点定义”对话框，您可以跳过下一步。单击“新建”按钮。 出现“站点定义”对话框。,1、创建本地站点,执行下列操作之一： 单击“基本”选项卡以使用“站点定义向导”，它将引导您逐步完成设置过程。 单击“高级”选项卡以使用“高级”设置，它使您可以根据需要分别设置本地、远程和测试文件夹。,1、创建本地站

15、点,完成 Dreamweaver 站点设置过程： 在“站点定义向导”中，回答每一屏上出现的问题，然后单击“下一步”继续进行设置，或者单击“上一步”返回到前一屏。 对于“高级”设置，可根据需要完成“本地信息”类别、“远程信息”类别和“测试服务器”等类别。,2、网站文件的管理,我们往往根据站点内容，采用层次化目录结构分类分级保存网站文件，将相关的页面放在同一文件夹中，必要时可以使用子文件夹，这种组织类型使站点更容易维护和导航。文件创建：文件面板中右键单击新建文件（快捷键Ctrl+N） 选择文件：可单击选一或配合Ctrl键和Shift键进行多重选择。,2、网站文件的管理,打开和编辑：双击 删除：De

16、lete键 改名：两次单击 关于保存：保存、另存为、全部保存、回复至上次的保存 复制与粘贴：快捷菜单或Ctrl+拖动 移动：直接拖动 关闭：快捷键Ctrl+W,2、网站文件的管理,消除文件只读属性：右键快捷菜单 设为首页：右键快捷菜单 添加设计备注：右键快捷菜单 默认情况下，当移动、重命名或删除站点中文档时Dreamweaver会提示你执行更新，站点管理器可自动修复页面中相应的超链。（编辑首选参数常规文档选项设置“移动文件时更新链接”）,3、页面预览,菜单：文件在浏览器中预览iexplore 工具栏地球图标预览在iexplore,4、站点的编辑和管理, 文件面板 打开现有本地网站 查看本地和远

17、程网站的文件和地图 调整窗口视图 保存站点地图 重建站点缓存 站点编辑、复制、删除、导入与导出,4、站点的编辑和管理, 文件面板 “扩展/折叠”按钮展开或折叠“文件”面板，以显示一个或两个窗格。 显示方式：面板菜单查看站点文件（F8）或站点地图（Alt+F8）切换 打开现有本地网站 在文件面板的站点下拉式列表中选择站点。,4、站点的编辑和管理,查看本地和远程网站的文件和地图 文件窗可以同时显示本地和远程站点的内容。本地站点可以以文件列表、地图或者同时显示两者的方式出现。远程站点只能以文件列表方式显示。 （通过文件面板的工具栏图标切换）,4、站点的编辑和管理,调整窗口视图 默认情况下，远程站点或

18、本地站点地图显示在站点窗口左边，本站点显示在右边，但可以转换显示方式。 编辑首选参数站点总是显示 保存站点地图(先切换至地图视图模式) 面板菜单：文件保存站点地图(Bmp或Png格式),4、站点的编辑和管理,重建站点缓存 为了加快更新过程，Dreamweaver 可创建一个缓存文件，用以存储有关本地文件夹中所有链接的信息。在“站点定义”对话框中选择“缓存”选项，就会创建此缓存文件。以后在使用Dreamweaver 添加、更改或删除到本地站点上文件的链接时，此缓存文件将以不可见方式更新。,4、站点的编辑和管理,重建站点缓存 菜单：站点管理站点选择站点编辑“高级”标签选择左侧列表中“本地信息”类别

19、选中“启用缓存”复选框。 启动之后，第一次更改或删除指向本地文件夹中文件的链接时，会提示您载入缓存。如果单击“否”，则将所做更改记入缓存，但并不载入该缓存，而且Dreamweaver 也不更新链接。,4、站点的编辑和管理,重建站点缓存 在比较大型的站点上，载入此缓存可能需要一段时间，其中的大部分时间用于将本站点上文件 的时间戳与缓存中记录的时间戳进行比较，以确定缓存是否过期。如果没有在DW之外更改任何文件，则当“停止”按钮出现时，可以放心地单击该按钮。 如果要重新创建站点缓存，在文件面板中，选择面板菜单站点重建站点缓存,4、站点的编辑和管理,站点编辑、复制、删除、导入与导出 文件面板菜单站点管

20、理站点,三、文本的使用,1、文字输入 2、文字编辑 3、文字属性面板 4、使用CSS样式 5、清理当前页面,三、文本的使用,1、文字输入要注意的细节： （1）换行与分段 换行：Shift+Enter(菜单：插入HTML特殊字符换行符) 分段：Enter,三、文本的使用,1、文字输入 (2) 空白 全角空格 代码视图中输入 或插入栏文本字符不换行空格 输入多个连续空格：编辑首选参数常规选中“允许多个连续的空格” 直接按 Ctrl+Shift+空格键输入空白,三、文本的使用,1、文字输入 (3) 插入时间与日期 插入栏常用日期 菜单：插入日期 (4) 插入特殊符号 插入栏文本字符 菜单：插入HTM

21、L特殊字符 (5) 分隔线 插入栏HTML水平线 菜单：插入HTML水平线,三、文本的使用,2、文字编辑 （1）文字选取 拖动选取 双击选择英文单词或中文句子；三击选择段落； 单击起点，然后按Shift，再单击终点，选中两点之间文本。 编辑全选； 单击状态行上的标签选择器；,三、文本的使用,2、文字编辑 （2）剪切、复制与粘贴及撤消与重做 Ctrl+拖动：复制 拷贝HTML/粘贴HTML 撤消：Ctrl+Z 重做： Ctrl+Y,三、文本的使用,2、文字编辑 （3）查找与替换（Ctrl+F ） 在当前文件中替换文本 在一个文件夹中替换文本 保存和载入查询 在源代码中查找与替换 高级文本查找替换

22、 替换HTML标签 查找下一个（F3键）,三、文本的使用,3、文字属性面板 显示/关闭当前对象属性面板：CTRL+F3 段落和标题格式（文本段落格式） 文字颜色（文本颜色） 字体（文本字体） 文字大小（文本大小/改变大小） 文字样式（文本样式） 对齐方式（文本 对齐） 列表（有序列表、无序列表）及列表属性（文本列表） 段落缩进（Ctrl+Alt+ ）或凸出（ Ctrl+Alt+ ）（文本缩进/凸出） 文字超链接（属性面板中链接栏）,三、文本的使用,4、使用CSS样式 通过设置CSS样式，可以快速一致地将字体格式应用于文档中的文本。 CSS样式可由单个或多个CSS字体标签属性（如颜色、字体、大小

23、）以及其他格式属性（粗体或斜体）组成。 菜单：窗口 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格式的支持

24、情况最好，大多数浏览器都可以查看。 GIF：只支持256种颜色 JPEG：有损压缩的格式 PNG：无损压缩图像，支持一千六百万种颜色。,四、图像的使用,2、图像文件和图像占位符插入菜单：插入图像 工具栏：插入栏常用图像 在站点面板中直接将图像文件拖到页面上 从资源管理器中直接将图像文件拖到页面上菜单：插入图像对象图像占位符 工具栏：插入栏常用图像占位符,四、图像的使用,3、图像和图像占位符属性面板使用 主要属性：图像的名称、大小、源文件、链接、替代文字、边框和边距、对齐方式等。,四、图像的使用,4、图像热区 使用图像地图，可以在单个图像中创建多个热点或热区（可单击的区域），并使每一个热点链接到

25、一个不同的URL。注：图像地图指已被分为多个可链接区域（或称“热点”）的图像 （1）绘制热区 矩形 椭圆形 多边形,四、图像的使用,4、图像热区 （2）选择热区多选方法：SHIFT+单击 （3）移动热区 （4）调整热区大小,四、图像的使用,5、插入交互式图像 （1）鼠标经过图像（简单翻转图） 使用以下方法之一插入鼠标经过图像： 在“插入”栏中，选择“常用”，然后单击“鼠标经过图像”图标。 在“插入”栏中，选择“常用”，然后将“鼠标经过图像”图标拖到“文档”窗口中的所需位置。 选择“插入”“图像对象”“鼠标经过图像”。,四、图像的使用,5、插入交互式图像 （2）导航条 导航条由图像或图像组组成，

26、这些图像的显示内容随用户操作而变化。每个页面只能有一个导航条。 使用“插入导航条”命令之前，须首先为各个导航项目的显示状态创建一组图像。,四、图像的使用,5、插入交互式图像 （2）导航条 若要创建导航条，请执行以下操作： 执行下列操作之一： 选择“插入”“图像对象”“导航条”。 在“插入”栏的“常用”类别中，单击“图像”菜单并选择“插入导航条”按钮。 出现“插入导航条”对话框。设置相关项目,四、图像的使用,6、导入Fireworks HTMLFireworks可利用切片将图片文档分割成多个较小的部分并将每部分导出为单独的文件。 插入图像对象 Fireworks HTML 插入栏常用 Firew

27、orks HTML7、制作WEB相册 命令菜单创建网站相册,四、图像的使用,8、图像的优化和格式转换 （1）用Fireworks优化页面图像 右击图像在 Fireworks中优化 命令 在 Fireworks中优化图像 （2）用Photoshop和Fireworks转换图像文件格式和优化处理,五、超链接,1、关于URL 2、超链接的制作方法 3、超链接的类型 4、设置链接的目标窗口,五、超链接,1、关于URL URL（统一资源定位符）：用于描述网络资源的位置、类型和访问方法。 一般格式： 协议:/IP地址（域名）:端口号/目录/文件名 协议：指明访问该资源所采用的协议。如HTTP、FTP等。,

28、五、超链接,2、超链接的制作方法 （1）通过“指向文件”图标创建链接 注：文件名最好不用中文。如一定要使用中文文件名，则需要设置： 编辑首选参数代码改写使用%将URL中的特殊字符编码 （2）属性面板Link栏输入和文件夹图标创建链接,五、超链接,2、超链接的制作方法(续) （3）插入菜单或插入栏创建超链 插入菜单超级链接 插入栏常用超级链接 修改菜单创建链接 （4）超链接的相关操作 修改菜单创建链接或更改链接 修改菜单移除链接 修改菜单打开链接页面 修改菜单链接目标,五、超链接,3、超链接的类型 (1) HTML链接（页面链接） (2) E-mail链接 Link栏手工输入 mailto:邮件

29、地址 插入栏常用电子邮件链接 插入菜单电子邮件链接 (3) 文件链接 (4) 锚点和链接,五、超链接,3、超链接的类型 (4)锚点和链接 创建锚点 插入菜单命名锚记 插入栏常用命名锚记 锚点引用 同一文件中锚点引用，在属性面板中超链栏填写#锚点名 不同文件之间锚点引用，则填写文件名#锚点名,五、超链接,3、超链接的类型 (5)空链接 创建空链接，只需在属性面板Link栏输入符号 # 或者 javascript:; (6)脚本链接 主要用于让页面文字具有获取事件的能力，尤其是方便文字与行为和脚本程序的结合。,五、超链接,3、超链接的类型 (6)脚本链接 -续 创建脚本链接，在属性面板Link栏输

30、入 javascript:(后面跟一些 JavaScript 代码或函数调用) 例如： 打印当前页面，在属性面板Link栏输入 javascript: self.print() 关闭当前窗口，在属性面板Link栏输入 javascript: self.close(),五、超链接,3、超链接的类型(6)脚本链接 -续例如： 显示一个警告框，在属性面板Link栏输入 javascript:alert(This link leads to the index),五、超链接,4、设置链接的目标窗口 _blank:在新的浏览窗口中打开链接的文档 _parent:在显示链接的框架父框架集中打开链接的文档，

31、同时替换整个框架集。 _self：在当前框架中打开链接，同时替换所有框架。 _top：在当前浏览器窗口中打开链接的文框，同时替换所有框架。,六、网页属性,1、设置页面属性 2、使用头元素 3、页面配色方案 4、可视化助理,六、网页属性,1、设置页面属性 修改菜单页面属性标题、背景、字体和链接的颜色，页边距等。 2、使用头元素 （1）Meta 标签的常见功能： 帮助主页被各大搜索引擎登录 定义页面的使用语言 自动刷新并指向新的页面 实现网页转换时的动画效果,六、网页属性,2、使用头元素 （2）显示和修改当前页面现有的文件头信息 查看文件头内容：查看文件头栏及其属性面板 （3）设置当前页面新的文件

32、头信息 插入栏HTML文件头标签选择项目 插入菜单HTML文件头标签选择项目,文件头标签选择项目,“Meta”：将一个“Meta”标签插入到文档head部分。出现一个对话框，您可以在其中输入meta属性的信息。“关键字”：将一个meta name=“keywords”标签插入到文档的head部分。出现一个对话框，可以在其中输入文档的关键字。,文件头标签选择项目,“描述”：将一个“描述”meta标签插入到文档的head部分。出现一个对话框，可在其中输入描述文档的文本。“刷新”：将一个“刷新” meta标签插入到文档的head部分。出现一个对话框，可在其中输入刷新以前等待的秒数，以及是要重新载入当

33、前页面还是转到新的页面。,文件头标签选择项目,“基础”：将一个base标签插入到文档的head部分。出现一个对话框，可在其中输入文档连接的基础URL。“链接”：将一个link标签插入到文档的head部分。出现一个对话框，可在其中输入链接信息，请注意这不是一个超文本链接；它经常用来指定外部样式表。,六、网页属性,2、使用头元素 （4）Meta的属性 Meta的属性有两种：name和http-equiv。 Name属性主要用于描述网页，与之对应的属性值为content（网页内容），以便于搜索引擎查找、分类（目前几乎所有的搜索引擎都使用网上自动查找meta值来给网页分类）。这其中最重要的是descr

34、iption（站点在搜索引擎上的描述）和keywords（分类关键词），所以应该给每页加一个Meta值。,name 属性,1、用以说明生成工具（如Microsoft FrontPage 4.0）等； 2、向搜索引擎说明你的网页的关键词 3、告诉搜索引擎你的站点的主要内容； 4、告诉搜索引擎你的站点的制作的作者；,name 属性,5、 其中的属性说明如下： 设定为all：文件将被检索，且页面上的链接可以被查询； 设定为none：文件将不被检索，且页面上的链接不可以被查询； 设定为index：文件将被检索； 设定为follow：页面上网页等级评定，在IE的internet选项中有一项内容设置，可以

35、防止浏览一些受限制的网站，而网站的限制级别就是通过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、 用于设定网页的到期时间，一旦过期则必须到服务器

36、上重新调用。需要注意的是必须使用GMT时间格式；,http-equiv属性,4、 用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出； 5、 cookie设定，如果网页过期，存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式；,http-equiv属性,6、 网页等级评定，在IE的internet选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级别就是通过meta属性来设置的； 7、 强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用；,http-equiv属性,8、和设定进入和离开页面时

37、的特殊效果，这个功能即FrontPage中的“格式/网页过渡”，不过所加的页面不能够是一个frame页面。 Duration的值为网页动态过渡的时间，单位为秒。 Transition是过渡方式，它的值为0到23，分别对应24种过渡方式。,六、网页属性,3、页面配色方案 命令菜单设定配色方案 4、可视化助理设置在设计视图下，是否显示页面对象的边框或页面的不可见元素。 查看菜单可视化助理（选择项目） 工具栏视图选项可视化助理（选择项目） 编辑菜单首选参数不可见元素,七、表格的使用,表格(table)是页面的重要元素,是页面排版的主要手段。尽管DHTML中的层(layer)也可以实现网页元素的自由定

38、位，但是表格显然更加方便编辑与修改。熟练掌握和运用表格的各种属性，可以让您的页面看起来赏心悦目。,七、表格的使用,1、插入表格 插入菜单表格 插入栏 常用表格 或插入栏 布局表格 2、表格基本操作 （1）选择表格元素 整个表格：标签、修改表格选择表格、右键、Ctrl+A+A、边框 行、列 ：标签（行）、边框、拖拽 单元格：标签、 Ctrl+单击、 Ctrl+A、拖拽,七、表格的使用,2、表格基本操作 （2）处理表格行、列 插入行（Ctrl+M）、列（ Ctrl+Shift+A ） 修改菜单、右键、属性检查器、Tab 删除行（ Ctrl +Shift +M ）、列（ Ctrl +Shift +-

39、 ） （3）单元格分、合 单元格合并（ Ctrl +Alt +M ） 单元格拆分（ Ctrl +Alt +S ）,七、表格的使用,2、表格基本操作 （4）其它操作 行列宽度调整和高度调整 表格复制、剪切和粘贴 3、设置表格属性 4、格式化表格 命令菜单格式化表格,七、表格的使用,5、表格排序 命令菜单排序表格 6、表格与表格式数据导入和导出 导入： 文件菜单导入表格式数据 或插入栏布局表格数据 导出： 文件菜单导出表格,八、页面布局,1、布局视图下绘制表格（布局表格） 2、跟踪图像,八、页面布局,1、布局视图下绘制表格（布局表格） （1）视图切换 查看菜单表格模式 插入栏布局标准视图/布局视图

40、 编辑首选参数布局模式 （2）绘制布局表格 插入栏布局绘制布局表格（按住CTRL连续绘制多个，按住Alt取消自动吸附功能）,八、页面布局,1、布局视图下绘制表格（布局表格） （3）绘制布局单元格 插入栏布局绘制布局单元格（按住CTRL可连续绘制多个，按住Alt取消自动吸附功能） （4）嵌套布局表格 （5）移动表格或单元格 （6）设置表格和单元格属性,八、页面布局,2、跟踪图像 可以使用跟踪图像作为重新创建已经使用图形应用程序（如 Macromedia Freehand 或 Fireworks）创建的页面设计的向导。跟踪图像是放在“文档”窗口背景中的 JPEG、GIF 或 PNG 图像。可以隐藏

41、图像、设置图像的不透明度和更改图像的位置。,八、页面布局,2、跟踪图像 若要将跟踪图像放在“文档”窗口中，可执行以下操作： (1)选择“查看”“跟踪图像”“载入”。或者选择“修改”“页面属性”，然后单击“跟踪图像”文本框旁边的“浏览”按钮。 (2)在出现的对话框中，选择图像文件并单击“选择”(Windows) 或“选择”(Macintosh)。 “页面属性”对话框随即出现。 (3)拖动“图像透明度”滑块指定图像的透明度，然后单击“确定”。 (4)若要随时切换到另一跟踪图像或更改当前跟踪图像的透明度，请选择“修改”“页面属性”。,八、页面布局,2、跟踪图像 若要显示或隐藏跟踪图像，请执行以下操作

42、： 选择“查看”“跟踪图像”“显示”。 仅在 Dreamweaver 中跟踪图像是可见的。当在浏览器中查看页面时，跟踪图像永远不可见。当跟踪图像可见时，页面的实际背景图像和颜色在“文档”窗口中不可见；但是，在浏览器中查看页面时，背景图像和颜色是可见的。,八、页面布局,2、跟踪图像 若要更改跟踪图像的位置，请执行以下操作： (1)选择“查看”“跟踪图像”“调整位置”。 (2)执行下列操作之一： 若要准确地指定跟踪图像的位置，请在“X”和“Y”文本框中输入坐标值。 若要逐个像素地移动图像，请使用箭头键。 若要一次五个像素地移动图像，请按 Shift 键和箭头键。 (3)重设跟踪图像的位置： 选择“

43、查看”“跟踪图像”“重设位置”。 跟踪图像随即返回到文档窗口的左上角 (0,0)。,八、页面布局,2、跟踪图像 若要将跟踪图像与所选元素对齐，请执行以下操作： 在“文档”窗口中选择一个元素。 选择“查看”“跟踪图像”“对齐所选范围”。 跟踪图像的左上角随即与所选元素的左上角对齐。,九、表单的使用,1、关于表单 2、插入表单及设置表单属性 3、插入表单元素及属性设置 4、表单应用举例,九、表单的使用,1、关于表单 表单是用于实现网页浏览者与服务器之间信息交互的一种页面元素,被广泛用于各种信息的搜集和反馈，如调查表、订单、站点注册单、搜索引擎等。 表单有两个部分组成：一是面向客户端各种对象部分，一

44、是服务器端的处理程序部分。,九、表单的使用,1、关于表单 当访问者将信息输入Web站点表单单击提交按钮时，这些信息将被发送到服务器，服务器端脚本或应用程序对这些信息进行响应。通常，通过通用网关接口（CGI）脚本、ColdFusion页、Java Server Page（JSP）或ASP来处理信息。如果不使用服务端脚本或应用程序来处理表单数据，就无法收集这些数据。,九、表单的使用,2、插入表单及设置表单属性 插入表单 插入表单 插入栏表单 Dreamweaver插入一个表单（域）。当页面处于设计视图中时，用红色的虚轮廓线指示表单。如果没有看到此轮廓线，请检查是否选中了“查看可视化助理不可见元素”

45、。,九、表单的使用,2、插入表单及设置表单属性 设置表单属性（用属性检查器设置 ） 在“表单名称”文本框中，键入标识该表单的唯一名称。 命名表单后，就可以使用脚本语言（如 JavaScript 或 VBScript）引用或控制该表单。如果不命名表单，则 Dreamweaver 使用语法 form n 生成一个名称，并在向页面中添加每个表单时递增 n 的值。,九、表单的使用,2、插入表单及设置表单属性 在“动作”文本框中，指定处理该表单的动态页或脚本的路径。可以在“动作”文本框中键入完整路径，也可以单击文件夹图标定位到同一站点中包含该脚本或应用程序页的相应文件夹。 在“方法”弹出菜单中，选择将表

46、单数据传输到服务器的方法。有POST、GET和默认三种选择。,九、表单的使用,2、插入表单及设置表单属性 如果需要，可以使用“MIME 类型”弹出菜单指定对提交给服务器进行处理的数据使用 MIME 编码类型。 默认设置 application/x-www-form-urlencode 通常与 POST 方法协同使用。如果要创建文件上传域，请指定 multipart/form-data MIME 类型。,附：关于POST与GET方法,POST 方法将在 HTTP 请求中嵌入表单数据。 GET 方法将值附加到请求该页的 URL 中。 默认方法使用浏览器的默认设置将表单数据发送到服务器。通常，默认方

47、法为 GET 方法。 不要使用 GET 方法发送长表单。URL 的长度限制在 8192 个字符以内。如果发送的数据量太大，数据将被截断，从而导致意外的或失败的处理结果。,附：关于POST与GET方法,对于由 GET 方法传递的参数所生成的动态页，可添加书签，这是因为重新生成页面所需的全部值都包含在浏览器地址框中显示的 URL 中。与此相反，对于由 POST 方法传递的参数所生成的动态页，不可添加书签。如果您要收集机密用户名和密码、信用卡号或其它机密信息，POST 方法看起来比 GET 方法更安全。但是，由 POST 方法发送的信息是未经加密的，容易被黑客获取。若要确保安全性，请通过安全的连接与

48、安全的服务器相连。,九、表单的使用,3、插入表单元素及属性设置 表单：所有表单对象要发挥作用，就必须存在于表单域中。 文本字段：在表单中插入一个可输入一行文本的文本域。文本域接受任何类型的字母数字。该文本可以显示为单行、多行，也可以显示为一系列点或星号（密码输入） 隐藏域：可以存储用户输入的信息，如姓名、电子邮件地址或常用的查看方式，并在该用户下次访问引站点时使用这些数据。,九、表单的使用,3、插入表单元素及属性设置 复选框：允许在一组选项中选择多项。用户可以选择任意多个适用的选项。 单选按钮：代表互相排斥的选择。在某单选按钮组（多个按钮同名）中选择一个按钮，就会取消选择该组中的所有其他按钮。

49、 单选按钮组：直接插入一组多个单选按钮。,九、表单的使用,3、插入表单元素及属性设置 列表/菜单：“列表”选项在一个滚动列表中显示选项值，用户可以从该滚动列表中选择多个选项。“菜单”选项则是在一个菜单中显示选项值，用户只能从中选择单个选项。 跳转菜单：是可导航的列表或弹出式菜单，它使你可以插入一种菜单，这种菜单中的每个选项都拥有链接的属性，单击即可跳转至其他网页或文件。,九、表单的使用,3、插入表单元素及属性设置 图像域：插入一个可放置图像的区域。该图像用于生成图形化按钮，例如“提交”或“重置”按钮。 文件域：插入一个文本字段和一个“浏览”按钮。用户可以使用文件域浏览本地计算机上的某个文件并将该文件作为表单数据上传。 按钮：在单击时执行某一脚本或程序，例如，提交或重置表单。并且可以自定义按钮名称或标签。,九、表单的使用,4、表单应用举例 简单举例： 浏览器端：表单中文本提交 服务器端：响应文本 ,十、多媒体的使用,1、插入Flash动画文件 2、插入Flash文本 3、插入Flash按钮 4、插入Shockwave影片 5、插入Applet（Java程序 6、插入参数 7、插入ActiveX 8、插入插件 9、音频文件使用 10、视频文件使用,