《DreamweaverCS5网页设计》课件共1.ppt

1、目录第1章 Dreamweaver CS5 使用基础第2章 文本与表格第3章 图像与媒体第4章 链接与框架第5章 层叠样式表应用第6章 CSS+DIV页面布局第7章 JavaScript行为应用第8章 创建Spry页面第9章 Spry表单验证第10章 制作ASP动态网页第1章 Dreamweaver CS5 使用基础 1.1 认识Dreamweaver CS5工作区 1.2 设置Dreamweaver站点 1.3 创建和管理站点文件 1.1 认识Dreamweaver CS5工作区1.1.1 启动Dreamweaver CS5n启动Dreamweaver CS5：单击“开始”，指向“所有程序”

2、，然后单击“Adobe Dreamweaver CS5”。n在“开始”菜单或任务栏中为这个软件添加一个快捷方式。1.1.2 工作区布局概述工作区中主要包括以下元素。n欢迎屏幕。n应用程序栏。n文档工具栏。n标准工具栏。n编码工具栏。n样式呈现工具栏n文档窗口n属性检查器n标签选择器n面板组n插入面板n文件面板第1章目录1.1 认识Dreamweaver CS5工作区1.1.3 文档窗口n文档窗口用于显示当前文档。在使用文档窗口时，根据设计需要可选择下列视图。n设计视图n代码视图n拆分代码视图n代码和设计视图n实时视图n实时代码视图n相关文件工具栏n在文档窗口中的不同视图之间切换n如果一次打开了

3、多个文档，则可以采用层叠方式或平铺方式放置这些文档。第1章目录1.1 认识Dreamweaver CS5工作区1.1.4 工具栏n文档工具栏n标准工具栏n样式呈现工具栏n浏览器导航工具栏n编码工具栏n状态栏第1章目录1.1 认识Dreamweaver CS5工作区1.1.5 检查器与面板n文件面板n插入面板n属性检查器n标签检查器nCSS样式面板第1章目录1.2 设置Dreamweaver站点1.2.1 Dreamweaver工作流程n规划和设置站点n组织和管理站点文件n设计网页布局n向页面添加内容n通过手动编码创建页面n针对动态内容设置Web应用程序n创建动态页n测试和发布第1章目录1.2

4、设置Dreamweaver站点1.2.2 理解Dreamweaver站点n在Dreamweaver中，术语“站点”是指属于某个Web站点的文档的本地或远程存储位置。使用Dreamweaver站点可以组织和管理所有Web文档，并将站点上传到Web服务器，跟踪和维护链接以及管理和共享文件。为了充分利用Dreamweaver的功能，就应当定义一个站点。n若要定义Dreamweaver站点，只需设置一个本地文件夹。若要向Web服务器传输文件或开发Web应用程序，还必须添加远程站点和测试服务器信息。nDreamweaver站点由以下3个文件夹组成。n本地根文件夹n远程文件夹n测试服务器文件夹第1章目录1

5、.2 设置Dreamweaver站点1.2.3 设置Dreamweaver站点n选择“站点”“新建站点”。n选择“站点”类别，然后在“站点名称”框中键入一个名称。n在“本地站点文件夹”框中键入本地根文件夹的名称。n设置站点的其他选项。第1章目录1.3 创建和管理站点文件1.3.1 创建新文档n选择“文件”“新建”。n选择“空白页”类别，然后从“页面类型”列选择要创建的页面类型。n如果希望新页面包含CSS布局，可从“布局”列中选择一个预设计的CSS布局；否则，可选择“无”。n从“文档类型”下拉列表中选择文档类型。n如果已在“布局”列中选择了一种CSS布局，则从“布局CSS位置”下拉列表中为布局的

6、CSS选择一个位置。n创建页面时，还可以将CSS样式表附加到新页面（与CSS布局无关）。1.单击“创建”按钮。第1章目录1.3 创建和管理站点文件1.3.1 创建新文档n选择“文件”“新建”。n选择“空白页”类别，然后从“页面类型”列选择要创建的页面类型。n如果希望新页面包含CSS布局，可从“布局”列中选择一个预设计的CSS布局；否则，可选择“无”。n从“文档类型”下拉列表中选择文档类型。n如果已在“布局”列中选择了一种CSS布局，则从“布局CSS位置”下拉列表中为布局的CSS选择一个位置。n创建页面时，还可以将CSS样式表附加到新页面（与CSS布局无关）。1.单击“创建”按钮。第1章目录1.

7、3 创建和管理站点文件1.3.2 保存文档n保存文档的步骤n选择“文件”“保存”，或单击文档工具栏上的“保存”按钮，或按Ctrl+S。n浏览到要用来保存文件的文件夹。n在“文件名”框中，键入文件名。n单击“保存”按钮。n保存当前打开的所有文档。n回复到文档上次保存的版本。第1章目录1.3 创建和管理站点文件1.3.3 打开现有文档n打开文档的步骤n选择“文件”“打开”。n找到要打开的文件并选中该文件。n单击“打开”按钮。n打开最近打开过的文件。第1章目录1.3 创建和管理站点文件1.3.4 管理文件和文件夹n打开文件n创建文件或文件夹n删除文件或文件夹n移动或复制文件或文件夹n刷新文件面板第1

8、章目录第2章 文本与表格2.1 HTML语言基础 2.2 在页面中应用文本 2.3 用表格显示内容 2.1 HTML语言基础2.1.1 定义HTML元素n一个HTML文档包含各种HTML标签，这些标签是一些嵌入式HTML命令，用以描述网页的结构、外观和内容等信息。n在HTML语言中，所有标签都必须用一对尖括号（即小于号“”）括起来，这对尖括号就是HTML语言的定界符。n定义HTML元素要呈现的内容n示例网页设计n标准属性nidnclassnstyle第2章目录2.1 HTML语言基础2.1.2 XHTML代码规范简介n所有标签必须使用相应的结束标签来进行关闭。n标签及其属性名称必须使用小写字母

9、。n标签的属性值必须使用引号括起来。n标签的所有属性都必须具有值。n强制XHTML元素。第2章目录2.1 HTML语言基础2.1.3 HTML网页基本结构网页标题第2章目录2.1 HTML语言基础2.1.4 设置页面标题和编码n页面标题：页面标题文本n文档编码：n设置页面的标题和编码：n选择“修改”“页面属性”，或者在属性检查器中单击“页面属性”。n在“页面属性”对话框中，单击“标题/编码”类别，如图2.1所示。n在“标题”框中，指定页面标题。也可以使用文档工具栏来指定页面标题。n从“编码”下拉列表框中选择文档中字符所用的编码。n单击“确定”。第2章目录2.1 HTML语言基础2.1.4 设置

10、页面标题和编码n页面标题：页面标题文本n文档编码：n设置页面的标题和编码：n选择“修改”“页面属性”，或者在属性检查器中单击“页面属性”。n在“页面属性”对话框中，单击“标题/编码”类别，如图2.1所示。n在“标题”框中，指定页面标题。也可以使用文档工具栏来指定页面标题。n从“编码”下拉列表框中选择文档中字符所用的编码。n单击“确定”。第2章目录2.1 HTML语言基础2.1.5 设置页面基本属性nbody元素的常用属性nbackground bgcolor textnlink alink vlink leftmargin topmarginn使用“页面属性”对话框来设置HTML页面属性：n选

11、择“修改”“页面属性”，或单击属性检查器中的“页面属性”按钮。n在“页面属性”对话框中，选择“外观（HTML）”类别。n在“背景图像”框中，输入背景图像的路径。n在“背景”框中，设置页面的背景颜色。n在“文本”框中，指定显示字体时使用的默认颜色。n在“链接”框中，指定应用于链接文本的颜色。n在“已访问链接”框中，指定应用于已访问链接的颜色。n在“活动链接”框中，指定当鼠标指针在链接上单击时应用的颜色n在“左边距”框中，指定页面左边距的大小。n在“上边距”框中，指定页面上边距的大小。n单击“确定”。第2章目录2.2 在页面中应用文本2.2.1 添加文本n若要在HTML页面中添加文本，可以直接在文

12、档窗口中键入文本，也可以从其他应用程序中复制文本，然后切换到Dreamweaver，将插入点定位在文档窗口的设计视图中，再执行粘贴操作。n使用中文输入法提供的软键盘，还可以在页面中输入一些特殊符号，例如五角星、方块、三角形、菱形、圆形等等。n在Dreamweaver CS5中，可以使用“插入”菜单或面板来插入特殊字符。第2章目录2.2 在页面中应用文本2.2.2 设置字体、字号和颜色.nface属性指定文本所用的字体名称，可以是一种字体或一个字体列表，字体名称之间用逗号分隔。当浏览器解析font标签时，它将优先使用列表中的第一种字体来显示文本。如果运行浏览器的计算机上安装了该字体，则使用该字体

13、；否则将尝试列表中的下一种字体。这种情况会继续下去，直到找到匹配的字体或到达列表结束。如果未找到任何匹配的字体，则使用默认字体。nsize属性指定文本的字体大小（字号），其值为整数，取值范围为17，默认值为3。也可以用正负号来指定相对于基准字体的大小。ncolor属性指定文本的颜色，可使用RGB格式或颜色名称来表示。第2章目录2.2 在页面中应用文本2.2.3 设置字符样式n在HTML中，通过设置字符样式可以为某些字符设置特殊格式，例如粗体、斜体、下画线、删除线、上标以及下标等。第2章目录2.2 在页面中应用文本2.2.4 设置段落与换行n段落是文本的基本单位。通过使用段落标签p可将文档划分为

14、段落，段落间通过一个空行来分隔。p标签在文档中定义一个段落，该段落与后续内容间有一个空行。语法如下：.n其中，align属性指定段落文本的对齐方式，有以下取值：left（左对齐，默认值）、center（居中对齐）、right（右对齐）、justify（两端对齐）。n在Dreamweaver中将一段文字设置为段落。n如果只需要换行而不想产生新的段落，则可以使用换行标签br标签强制当前行中断，使后续内容显示在下一行。语法如下：第2章目录2.2 在页面中应用文本2.2.5 设置标题格式n在HTML中，可使用h1、h2、h3、h4、h5和h6标签在文档中设置标题格式，其中h1设置的标题字号最大，h2次

15、之，h3更次之，以此类推，h6设置的标题字号最小。语法如下：. . .n其中，align属性指定标题文本的对齐方式。第2章目录2.2 在页面中应用文本2.2.6 插入水平线n在HTML中，可以使用hr标签在文档中插入一条水平线，语法如下：nalign属性设置水平线的对齐方式，其取值可为center（默认值）、left和right；color属性设置水平线的线条颜色，可用RGB格式或颜色名称表示；noshade属性指定在浏览器中呈现为一条无阴影的实线，其值为该属性名称本身；size属性指定水平线的高度；width属性指定水平线的长度，可为整数（像素）或百分比（相对于页面宽度）。n创建水平线：n将

16、插入点放在要插入水平线的位置。n选择“插入”“HTML”“水平线”。修改水平线。n在文档窗口中，选择水平线。n选择“窗口”“属性”打开属性检查器，然后根据需要对水平线的以下属性进行修改：nID 宽 高 对齐 阴影第2章目录2.2 在页面中应用文本2.2.7 div与span标签ndiv标签在页面中定义一个可显示HTML内容的区域，使用div标签可把页面分割为独立的不同部分。语法如下：.nalign属性指定文本在区域内的对齐方式。nspan标签可用于组合文档中的行内元素。语法如下：.nspan元素是一个行内元素，它只能容纳文本或者其他行内元素，在它的前后不会换行。span元素本身并没有任何格式表

17、现，只能通过设置它的id、class或style属性来对对其额外的样式。当使用其他行内元素都不合适时，可考虑使用span元素。第2章目录2.2 在页面中应用文本2.2.8 设置列表格式n项目列表用ul和li标签定义，语法如下。条目1条目2. . .n编号列表用ol和li标签定义，语法如下。条目1条目2. . .第2章目录2.3 使用表格显示内容2.3.1 创建基本表格n定义表格的基本语法 表格标题 数据项 数据项 . . . 数据项 数据项 数据项 . . . 数据项 . . .n在Dreamweaver CS5中，插入一个表格并对其基本属性进行设置。第2章目录2.3 使用表格显示内容2.3.

18、2 设置表格的属性n在HTML页面中，可以通过table标签的属性对表格的格式进行设置。n在Dreamweaver中，可以利用属性检查器对表格的常用属性进行设置。第2章目录2.3 使用表格显示内容2.3.3 表格基本操作n选择表格元素n调整表格、列和行的大小n添加/删除行和列n复制、粘贴和删除单元格2.3.4 设置单元格、行或列的属性n除了从整体上对表格的属性进行设置之外，也可以根据需要对表格中的某些行、列或单元格的属性进行设置。n表格行是通过tr标签定义的。通过设置tr标签的属性值可以对行内包含的所有单元格的格式进行设置。ntr标签的常用属性n表格行中的单元格是通过td或th标签定义的。通过

19、设置这些标签的属性值可以对选定单元格的格式进行设置。n td和th标签的常用属性n在Dreamweaver CS5中，可使用属性检查器设置单元格、行或列属性。第2章目录2.3 使用表格显示内容2.3.5 合并或拆分单元格n在HTML中，表格中的某个单元格是用td或th标签定义，通过设置这两个标签的colspan或rowspan属性，可以指定该单元格跨过的列数或行数，从而实现单元格的合并或拆分。n在Dreamweaver CS5中，可以使用属性检查器或“修改”“表格”子菜单中的命令来合并或拆分单元格。第2章目录第3章 图像与媒体 3.1 图像应用 3.2 媒体应用 3.1 图像应用3.1.1 常

20、用图像格式nGIF图像格式图像格式 ： GIF是Graphics Interchange Format的缩写，意为“图像互换格式”，其文件扩展名为.gif，这是CompuServe公司在1987年开发的图像文件格式。nJPEG图像格式图像格式：JPEG是Joint Photographic Experts Group的缩写，意为“联合图像专家组”，其文件扩展名为.jpg或.jpeg，它可包含数百万种颜色，用于摄影或连续色调图像的较好格式。nPNG图像格式图像格式：PNG是Portable Network Graphic Format的缩写，意为“可移植网络图形”，其文件扩展名为.png，这是一

21、种替代GIF格式的无专利权限制的格式，它包括对索引色、灰度、真彩色图像以及alpha通道透明度的支持。PNG是Adobe Fireworks软件固有的文件格式。第3章目录3.1 图像应用3.1.2 插入图像n在HTML中，可使用img标签在网页中插入一个图像，语法如下：nsrc指定图像文件的位置。nalt指定替代图像的文本信息，在浏览器不能显示图像时显示出来或图像加载时间过长时先显示出来。当鼠标指针悬停在图像上方时显示文本信息。nlongdesc 与alt属性类似，但它允许更长的描述性文字。nheight和width分别指定图像的宽度和高度。nborder指定图像的边框宽度，以像素为单位。nh

22、space和vspace指定图像与文本之间在水平方向和垂直方向上的间距。nalign指定图像与文本的对齐方式或绕排方式。n使用Dreamweaver在页面中插入图像。第3章目录3.1 图像应用3.1.3 设置图像的属性n在HTML中，使用img标签的属性设置图像的属性。n在Dreamweaver CS5中，使用图像属性检查器来设置图像的属性。第3章目录3.1 图像应用3.1.4 插入图像占位符n图像占位符是在准备好将最终图形添加到网页前使用的图形。n插入图像占位符：n在文档窗口中，将插入点放置在要插入占位符图形的位置。n选择“插入”“图像对象”“图像占位符”。n当出现“图像占位符”对话框时，在

23、“名称”框中输入要作为图像占位符的标签显示的文本。n在“宽度”和“高度”框中，键入设置图像大小的数值。n设置占位符的颜色。n指定替换文本，然后单击“确定”。n替换图像占位符n在文档窗口中双击图像占位符，然后在属性检查器中单击“源文件”文本框旁的文件夹图标，在“选择图像源文件”对话框中，导航到要用其替换图像占位符的图像文件，单击“确定”按钮。第3章目录3.1 图像应用3.1.5 插入鼠标经过图像n在文档窗口中，将插入点放置在要显示鼠标经过图像的位置。n选择“插入”“图像对象”“鼠标经过图像”。n在“插入鼠标经过图像”对话框中，对以下选项进行设置。n图像名称：鼠标经过图像的名称。n原始图像：页面加

24、载时要显示的图像。在文本框中输入路径，或单击“浏览”，然后选择该图像。n鼠标经过图像：鼠标指针滑过原始图像时要显示的图像。在文本框中输入路径，或单击“浏览”，然后选择该图像。n预载鼠标经过图像：将图像预先加载浏览器的缓存中，以便用户将鼠标指针滑过图像时不会发生延迟。n替换文本：这是一种（可选）文本，为使用只显示文本的浏览器的访问者描述图像。1.按下时，前往的URL：用户单击鼠标经过图像时要打开的文件。输入路径或单击“浏览”并选择该文件。第3章目录3.2 媒体应用3.2.1 创建字幕n在HTML中，可使用marquee标签在页面中插入一个字幕，以水平或垂直滚动方式显示内容。语法如下： . . .

25、nbehavior指定字幕动画的类型。nbgcolor指定字幕的背景颜色。ndirection指定字幕内容的移动方向。nheight和width指定字幕的高度和宽度。nhspace和vspace指定字幕的水平边距和垂直边距。nloop指定字幕的滚动次数。nscrollamount指定字幕内容每次移动的像素数。nscrolldealy指定字幕内容两次移动之间的时间间隔（以毫秒为单位）。第3章目录3.2 媒体应用3.2.2 插入声音n在HTML中，可使用bgsound标签在网页中插入背景音乐。bgsound标签仅适用于IE浏览器，其语法如下：nsrc指定要播放的声音文件的URL。nloop指定声音

26、播放的次数。nvolume 指定音量的高低。nbalance 设置把将声音分成左声道和右声道两部分。第3章目录3.2 媒体应用3.2.2 插入声音n用embed标签在网页中嵌入声音文件：nsrc指定要播放的媒体（如声音、视频）文件的位置nalign指定嵌入对象与相邻文本的对齐方式。nautostart指定声音文件是否自动开始播放。nloop指定是否循环播放或播放的次数。nstarttime和endtime分别指定声音开始播放和结束播放的时间。npluginspage指定用户可以从中下载插件的网站的完整URL。nheigh和width分别指定嵌入对象的高度和宽度。nvolume指定音量的高低。n

27、hidden指定是否隐藏嵌入对象。n在Dreamweaver中，可通过插入插件的方法在网页中添加声音和视频等媒体内容，此时将自动生成embed标签并对其属性进行设置。第3章目录3.2 媒体应用3.2.3 插入视频n使用embed标签不仅可以在网页中嵌入声音文件，也可以插入视频文件。为此，应将embed标签的src属性设置为视频文件的位置，并通过height和width属性设置媒体播放器插件的高度和宽度，根据需要也可以对插件的其他属性进行设置。3.2.4 插入ActiveX控件n在页面中插入ActiveX控件可使用object标签来实现。. . .nobject标签的常用属性nalign arc

28、hiveborderclassidncodebase codetype data declare hspace和vspacenname standby type usemapn为了向正在加载的对象（如IE浏览器中的ActiveX控件）传递参数，可在object元素中嵌套使用param标签：nname和value属性分别指定参数的名称和值。第3章目录3.2 媒体应用3.2.5 插入SWF文件nSWF文件（.swf）是Flash源文件（.fla）的编译版本，它已进行了优化，适合于在Web上查看，此类文件可以在浏览器中播放，也可以在Dreamweaver中进行预览。n在HTML中，可使用object

29、标签在页面中插入SWF文件，为此应将其classid属性设置为“clsid:D27CDB6E-AE6D-11cf-96B8-444553540000”。在Dreamweaver中，可使用菜单命令在页面中插入SWF文件。n在Dreamweaver中插入SWF文件并设置属性。第3章目录3.2 媒体应用3.2.6 插入FLV文件nFLV文件（.flv）是一种视频文件，它包含经过编码的音频和视频数据，可通过Flash Player进行传送。如果有QuickTime或Windows Media视频文件，则可以使用编码器（如Adobe Media Encoder CS5）将视频文件转换为FLV文件。在HT

30、ML中，可使用object标签将FLV文件插入页面，为此应将其classid属性设置为“clsid:D27CDB6E-AE6D-11cf-96B8-444553540000”。n在Dreamweaver CS5中，可以向网页中轻松添加FLV视频。在开始之前，必须有一个经过编码的FLV文件。Dreamweaver还将插入一个显示FLV文件的SWF组件；当在浏览器中查看时，此组件显示所选的FLV文件以及一组播放控件。nDreamweaver CS5提供了以下两个选项，用于将FLV视频传送给站点访问者。n累进式下载视频n流视频第3章目录3.2 媒体应用3.2.7 插入ShockwavenAdobe

31、Shockwave是Web上用于交互式多媒体的一种标准，并且是一种压缩格式，可使在Adobe Director中创建的媒体文件能够被大多数常用浏览器快速下载和播放。n在HTML语言中，可以使用object标签将Shockwave影片插入页面中，为此应将该标签的classid属性设置为“clsid:166B1BCA-3F9C-11CF-8075-444553540000”。n在Dreamweaver CS5中，可使用“插入”“媒体”“Shockwave”菜单命令将Shockwave影片轻松地插入到文档中。第3章目录3.2 媒体应用3.2.8 插入Java appletnJava applet是用

32、Java语言编写的一些小型应用程序，它们可以嵌入网页中，并能够产生特殊的效果。包含Java applet的网页被称为Java-Powered页。当站点浏览者访问这样的网页时，Applet将被下载到客户碰见计算机上执行。在Java applet中，可以绘制图形、控制文本的字体和颜色、播放声音和动画以及实现人机交互及网络交流等功能。n在HTML中，可使用applet标签在页面中定义嵌入的applet。语法格式如下：. . .napplet元素的常用属性nalign alt archive code codebasenheight和width hspace和vspace namen在Dreamwea

33、ver中，可以使用选择“插入”“媒体”“Applet”菜单命令将Java applet轻松地插入HTML文档中，然后使用属性检查器对相关参数进行设置。第3章目录第4章 链接与框架4.1 创建链接 4.2 使用框架4.1 创建链接4.1.1 链接概述n链接是指从一个网页指向一个目标文档的连接关系，这个目标文档可以是另一个网页，也可以是同一网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个Word文档或一个Flash影片文件等，甚至可以是一个程序文件。目标文档与包含链接的起点网页可以位于同一个服务器中，也可以分别位于不同服务器中。n链接的类型n链接到其他文档或文件（如图像、影片或声音文件）

34、的链接。n命名锚记链接，此类链接跳转至文档内的特定位置。n电子邮件链接，此类链接新建一个已填好收件人地址的空白电子邮件。n空链接和脚本链接，此类链接用于在对象上附加行为，或者创建执行JavaScript代码的链接。第4章目录4.1 创建链接4.1.2 链接路径的类型n每个网页都有一个唯一地址，称作统一资源定位器（URL，Uniform Resource Locator）。链接路径是指从作为链接起点的文档到作为链接目标的文档或资源之间的文件路径。n链接路径的类型n绝对路径：提供所链接目标文档的完整URL，其中包括所使用的协议（对于网页通常为或file:/）。n文档相对路径：基本思想是省略掉对于当

35、前文档和所链接的文档或资源都相同的绝对路径部分，而只提供不同的路径部分。n站点根目录相对路径：站点根目录相对路径描述从站点的根文件夹到文档的路径。如果在处理使用多个服务器的大型Web站点，或者在使用承载多个站点的服务器，则可能需要使用这些路径。第4章目录4.1 创建链接4.1.3 链接到网页或其他文件n在HTML中，可以使用a标签在网页中创建从图像、对象或文本到其他网页或文件的链接，语法格式如下： . . .nhref指定要链接的目标文档或资源的URLnname指定网页内的特定位置的名称，称为命名锚记或锚点ntarget指定一个窗口或框架的名称，目标文档将在该窗口或框架中打开ntitle指定鼠

36、标指针指向链接文本或图像时所显示的提示信息第4章目录4.1 创建链接4.1.4 链接到网页中的特定位置n若要跳转到网页中的特定位置，可以通过创建到命名锚记的链接来实现。这个过程分为两步：首先创建命名锚记以标识该位置，然后创建到该命名锚记的链接。n创建命名锚记n链接到命名锚记第4章目录4.1 创建链接4.1.5 创建电子邮件链接n当单击电子邮件链接时，将使用与用户浏览器相关联的电子邮件客户端程序（如Outlook或Foxmail）打开一个新的空白信息窗口。在电子邮件消息窗口中，“收件人”框自动更新为显示电子邮件链接中指定的地址。根据需要，也可以在其他文本框中填充相应的信息。n创建电子邮件链接ma

37、ilto:收件人地址?subject=邮件主题&cc=抄送地址&bcc=密送地址&body=正文内容第4章目录4.1 创建链接4.1.6 创建空链接和脚本链接n空链接是未指派目标文档的链接，可用于向页面上的对象或文本附加行为。例如，可以向空链接附加一个行为，以便在指针滑过该链接时会交换图像或显示绝对定位的元素（称为AP元素）。n创建空链接n脚本链接可用于执行JavaScript代码或调用JavaScript函数，它能够在不离开当前网页的情况下为访问者提供有关某项的附加信息。脚本链接还可用于在访问者单击特定项时，执行计算、验证表单和完成其他处理任务。n创建脚本链接第4章目录4.1 创建链接4.1

38、.7 自动更新链接n每当在本地站点内移动或重命名文档时，Dreamweaver都可以更新起自以及指向该文档的链接。在将整个站点（或其中完全独立的一个部分）存储在本地磁盘上时，此项功能最适用。Dreamweaver不更改远程文件夹中的文件，除非将这些本地文件放在或者存回到远程服务器上。n启用自动链接更新功能：n选择“编辑”“首选参数”。n在“首选参数”对话框中，从左侧的“分类”列表中选择“常规”。n在“常规”首选参数的“文档选项”部分，从“移动文件时更新链接”下拉列表框选择“总是”第4章目录4.1 创建链接4.1.8 创建缓存文件n为了加快链接的更新过程，可Dreamweaver中创建一个缓存文

39、件，用以存储有关本地文件夹中所有链接的信息。在添加、更改或删除本地站点上的链接时，该缓存文件以不可见的方式进行更新。n创建缓存文件：n选择“站点”“管理站点”。n在“管理站点”对话框中，选择一个站点，然后单击“编辑”。n在“站点设置”对话框中，展开“高级设置”并选择“本地信息”类别。n在“本地信息”类别中，选择“启用缓存”。第4章目录4.1 创建链接4.1.9 在站点范围内更改链接n在文件面板的本地视图中，选择一个文件。若更改的是电子邮件链接、FTP链接、空链接或脚本链接，则不需要选择文件。n选择“站点”“更改整个站点链接”。n在“更改整个站点链接”对话框中，对以下选项进行设置。n更改所有的链

40、接n变成新链接第4章目录4.2 使用框架4.2.1 理解框架与框架集n框架（frame）是浏览器窗口中的一个区域，可用来显示与浏览器窗口其余部分所显示内容无关的HTML文档。框架提供将一个浏览器窗口划分为多个区域、每个区域都可以显示不同HTML文档的方法。使用框架的最常见场景是，一个框架显示包含导航控件的文档，而另一个框架显示包含内容的文档。n框架集（frameset）是一个HTML文档，可用于定义一组框架的布局和属性，包括框架的数目、框架的大小和位置以及最初在每个框架中显示的页面的URL。框架集文件本身不包含要在浏览器中显示的HTML内容（noframes部分除外），它只是向浏览器提供应如何

41、显示一组框架以及在这些框架中应显示哪些文档的有关信息。n若要在浏览器中查看一组框架，可输入框架集文件的URL；浏览器随后打开要显示在这些框架中的相应文档。通常将一个站点的框架集文件命名为index.html，以便当访问者未指定文件名时默认显示该文件。第4章目录4.2 使用框架4.2.2 框架网页基本结构框架网页标题 . . . 此网页使用了框架，但您的浏览器不支持框架。 第4章目录4.2 使用框架4.2.3 创建框架和框架集n使用Dreamweaver CS5创建框架集时，既可以从若干预定义的框架集中选择，也可以自己设计框架集。当选择预定义的框架集时，只能在文档窗口的设计视图中插入预定义的框架

42、集，这将会设置创建布局所需的所有框架集和框架，它是迅速创建基于框架的布局的最简单方法。此外，还可以通过向文档窗口中添加“拆分器”来设计自己的框架集。n创建空的预定义框架集n创建预定义框架集并显示现有文档第4章目录4.2 使用框架4.2.4 框架基本操作n在框架中打开文档n拆分框架n调整框架大小n删除框架4.2.5 选择框架和框架集n若要更改框架或框架集的属性，首先需要选择希望更改的框架或框架集。既可以在文档窗口中选择框架或框架集，也可以通过框架面板进行选择。n在文档窗口的设计视图中选定一个框架后，其边框被虚线环绕；在选定了一个框架集后，该框架集内各框架的所有边框都被淡颜色的虚线环绕。n在框架面

43、板中选择框架或框架集。第4章目录4.2 使用框架4.2.6 保存框架和框架集文件n保存框架集文件：n在框架面板或文档窗口中，选择框架集。n若要保存框架集文件，可选择“文件”“保存框架集”。n若要将框架集文件另存为新文件，可选择“文件”“框架集另存为”。n保存框架中显示的文档：n单击该框架内部。n若要保存框架内显示的文档，可选择“文件”“保存框架”。n若要将框架内显示的文档另存为新文件，可选择“文件”“框架另存为”。n若要保存与一组框架关联的所有文件，可选择“文件”“保存所有框架”。第4章目录4.2 使用框架4.2.7 设置框架集的属性n在HTML中，frameset标签用于定义框架集的结构，通

44、过设置该标签的属性可以指定框架集的显示方式。nframeset标签的常用属性ncols：指定框架的列宽。nrows：指定框架的行高。nborder：指定边框的宽度。nbordercolor：指定边框的颜色。nframeborder：指定框架周围是否显示三维边框。nframespacing：指定各框架之间的间隔。n在Dreamweaver CS5中，可以使用属性检查器来查看和设置大多数框架集属性，包括框架集标题、边框以及框架大小。第4章目录4.2 使用框架4.2.8 设置框架的属性n一个框架集由若干个框架组成，每个框架都可以显示一个文档。在HTML中，通过设置frame标签的属性可以指定在框架内

45、显示哪个文档，也可以控制该框架的显示效果。nframe标签的常用属性nsrc：指定在该框架中显示的文档的URLnname：指定框架的名称nborder：指定边框的宽度nbordercolor：指定边框的颜色nframeborder：指定框架周围是否显示边框。nframeheight：指定框架内容与上、下边框的间距。nframewidth：指定框架内容与左、右边框的间距。nscrolling：指定是否为框架添加滚动条。nnorisize：若指定了该项，则不能调整框架的大小。n在Dreamweaver CS5中，可以使用属性检查器来查看和设置大多数框架属性，包括边框、边距以及是否在框架中显示滚动条

46、。第4章目录4.2 使用框架4.2.9 在框架文档中设置链接目标n若要在一个框架中使用链接打开另一个框架中的文档，必须设置链接的目标。创建链接时，可用a标签的target属性来指定在其中打开所链接内容的框架或窗口。为了简化设计，也可以使用base标签为所有链接设置默认的目标。例如，如果导航条位于左框架，并且希望链接的材料显示在右侧的主要内容框架中，则必须将主要内容框架的名称指定为每个导航条链接的目标。当访问者单击导航链接时，将在主框架中打开指定的文档内容。n设置链接的目标n为所有链接设置默认的目标第4章目录4.2 使用框架4.2.10 使用内联框架n在HTML中，可使用iframe标签会创建包

47、含另外一个文档的内联框架（即行内框架）。语法格式如下：.niframe元素的常用属性nalign指定如何根据周围的元素来对齐此框架。nframeborder指定是否显示框架周围的边框。nheight和width：指定框架的高度。nlongdesc：指定一个页面的URL。nmarginheight：指定框架的顶部和底部的边距。nmarginwidth：指定框架的左侧和右侧的边距。nname：指定框架的名称。nscrolling：指定是否在框架中显示滚动条。nsrc：指定在框架中显示的文档的URL。n在Dreamweaver CS5中，可以菜单命令或插入面板来插入内联框架。第4章目录第5章 层叠样

48、式表应用 5.1 创建和应用CSS 5.2 设置CSS属性5.1 创建和应用CSS5.1.1 CSS基本概念nCSS（Cascading Style Sheet）称为层叠样式表，是一组格式设置规则，可用于控制网页内容的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表示形式分离开。这样可使得从一个位置集中维护站点的外观变得更加容易，因为进行更改时不需要对每个页面上的每个属性都进行更新。n使用CSS可以非常灵活地控制页面的确切外观。使用CSS可以控制许多文本属性，包括特定字体和字号，粗体、斜体、下划线和文本阴影，文本颜色和背景颜色以及链接颜色和链接下画线等。通过使用CSS控制字体，还可以

49、确保在多个浏览器中以更一致的方式处理页面布局和外观。n使用CSS可以控制网页中块级元素的格式和定位。n术语“层叠”表示对同一个页面元素应用多种样式的能力。例如，可以创建一个CSS规则来应用颜色，创建另一个CSS规则来应用边距，然后将两者应用于页面上的同一个文本。所定义的样式向下“层叠”到页面元素，并最终实现想要的设计。nCSS的主要优点在于它提供了便利的更新功能。第5章目录5.1 创建和应用CSS5.1.2 定义CSS规则nCSS样式表由一组CSS规则组成，每个CSS规则由选择器和属性声明两个部分组成，其中选择器用于标识和选择页面元素（如p、h3、类名或id标识符等），属性声明则用于定义一个或

50、多个页面元素的样式。n在HTML文档中定义CSS规则时，应将CSS规则包含在style块中，语法格式如下：selector attribue: value; attribue: value; . . .nselector表示选择器，用于选择要对其应用CSS规则的一个或多个页面元素。花括号中的内容是CSS属性声明，该声明由一些属性-值（attribue-value）对组成，属性名称与属性值用冒号（:）分隔；若属性值包含空格，则用引号括起来；不同属性-对用分号（;）分隔。第5章目录5.1 创建和应用CSS5.1.3 CSS选择器类型n通配选择器：用星号（*）表示，可用于选择页面内的任何元素。* a