《DreamweaverCS5网页设计》课件

电子教学参考资料包DreamweaverCS5网页设计主编赵增敏3／183目录第1章DreamweaverCS5使用基础第2章文本与表格第3章图像与媒体第4章链接与框架第5章层叠样式表应用第6章CSS+DIV页面布局第7章JavaScript行为应用第8章创建Spry页面第9章Spry表单验证第10章制作ASP动态网页4／183第1章DreamweaverCS5使用基础1.1认识DreamweaverCS5工作区1.2设置Dreamweaver站点1.3创建和管理站点文件5／1831.1认识DreamweaverCS5工作区1.1.1启动DreamweaverCS5启动DreamweaverCS5：单击“开始”，指向“所有程序”，然后单击“AdobeDreamweaverCS5”。在“开始”菜单或任务栏中为这个软件添加一个快捷方式。1.1.2工作区布局概述工作区中主要包括以下元素。欢迎屏幕。应用程序栏。文档工具栏。标准工具栏。编码工具栏。样式呈现工具栏文档窗口属性检查器标签选择器面板组插入面板文件面板第1章目录6／1831.1认识DreamweaverCS5工作区1.1.3文档窗口文档窗口用于显示当前文档。在使用文档窗口时，根据设计需要可选择下列视图。设计视图代码视图拆分代码视图代码和设计视图实时视图实时代码视图相关文件工具栏在文档窗口中的不同视图之间切换如果一次打开了多个文档，则可以采用层叠方式或平铺方式放置这些文档。第1章目录7／1831.1认识DreamweaverCS5工作区1.1.4工具栏文档工具栏标准工具栏样式呈现工具栏浏览器导航工具栏编码工具栏状态栏第1章目录8／1831.1认识DreamweaverCS5工作区1.1.5检查器与面板文件面板插入面板属性检查器标签检查器CSS样式面板第1章目录9／1831.2设置Dreamweaver站点1.2.1Dreamweaver工作流程规划和设置站点组织和管理站点文件设计网页布局向页面添加内容通过手动编码创建页面针对动态内容设置Web应用程序创建动态页测试和发布第1章目录10／1831.2设置Dreamweaver站点1.2.2理解Dreamweaver站点在Dreamweaver中，术语“站点”是指属于某个Web站点的文档的本地或远程存储位置。使用Dreamweaver站点可以组织和管理所有Web文档，并将站点上传到Web服务器，跟踪和维护链接以及管理和共享文件。为了充分利用Dreamweaver的功能，就应当定义一个站点。若要定义Dreamweaver站点，只需设置一个本地文件夹。若要向Web服务器传输文件或开发Web应用程序，还必须添加远程站点和测试服务器信息。Dreamweaver站点由以下3个文件夹组成。本地根文件夹远程文件夹测试服务器文件夹第1章目录11／1831.2设置Dreamweaver站点1.2.3设置Dreamweaver站点1.选择“站点”→“新建站点”。2.选择“站点”类别，然后在“站点名称”框中键入一个名称。3.在“本地站点文件夹”框中键入本地根文件夹的名称。4.设置站点的其他选项。第1章目录12／1831.3创建和管理站点文件1.3.1创建新文档1.选择“文件”→“新建”。2.选择“空白页”类别，然后从“页面类型”列选择要创建的页面类型。3.如果希望新页面包含CSS布局，可从“布局”列中选择一个预设计的CSS布局；否则，可选择“无”。4.从“文档类型”下拉列表中选择文档类型。5.如果已在“布局”列中选择了一种CSS布局，则从“布局CSS位置”下拉列表中为布局的CSS选择一个位置。6.创建页面时，还可以将CSS样式表附加到新页面（与CSS布局无关）。7.单击“创建”按钮。第1章目录13／1831.3创建和管理站点文件1.3.1创建新文档1.选择“文件”→“新建”。2.选择“空白页”类别，然后从“页面类型”列选择要创建的页面类型。3.如果希望新页面包含CSS布局，可从“布局”列中选择一个预设计的CSS布局；否则，可选择“无”。4.从“文档类型”下拉列表中选择文档类型。5.如果已在“布局”列中选择了一种CSS布局，则从“布局CSS位置”下拉列表中为布局的CSS选择一个位置。6.创建页面时，还可以将CSS样式表附加到新页面（与CSS布局无关）。7.单击“创建”按钮。第1章目录14／1831.3创建和管理站点文件1.3.2保存文档保存文档的步骤1.选择“文件”→“保存”，或单击文档工具栏上的“保存”按钮，或按Ctrl+S。2.浏览到要用来保存文件的文件夹。3.在“文件名”框中，键入文件名。4.单击“保存”按钮。保存当前打开的所有文档。回复到文档上次保存的版本。第1章目录15／1831.3创建和管理站点文件1.3.3打开现有文档打开文档的步骤1.选择“文件”→“打开”。2.找到要打开的文件并选中该文件。3.单击“打开”按钮。打开最近打开过的文件。第1章目录16／1831.3创建和管理站点文件1.3.4管理文件和文件夹打开文件创建文件或文件夹删除文件或文件夹移动或复制文件或文件夹刷新文件面板第1章目录17／183第2章文本与表格2.1HTML语言基础2.2在页面中应用文本2.3用表格显示内容18／1832.1HTML语言基础2.1.1定义HTML元素一个HTML文档包含各种HTML标签，这些标签是一些嵌入式HTML命令，用以描述网页的结构、外观和内容等信息。在HTML语言中，所有标签都必须用一对尖括号（即小于号“”和大于号“”）括起来，这对尖括号就是HTML语言的定界符。定义HTML元素标签属性=值属性=值…要呈现的内容/标签标签属性=值属性=值…/示例fontface=华文行楷size=2color=red网页设计/fontinputtype=submitname=Submitvalue=提交/标准属性idclassstyle第2章目录19／1832.1HTML语言基础2.1.2XHTML代码规范简介所有标签必须使用相应的结束标签来进行关闭。标签及其属性名称必须使用小写字母。标签的属性值必须使用引号括起来。标签的所有属性都必须具有值。强制XHTML元素。第2章目录20／1832.1HTML语言基础2.1.3HTML网页基本结构!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN==Content-Typecontent=text/html;charset=gb2312/title网页标题/titlescript…/scriptstyle…/stylelink…/headbody属性=值属性=值…!--在这里添加网页的内容，包括文本、表格、表单、图像、声音、视频以及动画等。--/body/html第2章目录21／1832.1HTML语言基础2.1.4设置页面标题和编码页面标题：title页面标题文本/title文档编码：metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/metahttp-equiv=Content-Typecontent=text/html;charset=utf-8/设置页面的标题和编码：1.选择“修改”→“页面属性”，或者在属性检查器中单击“页面属性”。2.在“页面属性”对话框中，单击“标题/编码”类别，如图2.1所示。3.在“标题”框中，指定页面标题。也可以使用文档工具栏来指定页面标题。4.从“编码”下拉列表框中选择文档中字符所用的编码。5.单击“确定”。第2章目录22／1832.1HTML语言基础2.1.4设置页面标题和编码页面标题：title页面标题文本/title文档编码：metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/metahttp-equiv=Content-Typecontent=text/html;charset=utf-8/设置页面的标题和编码：1.选择“修改”→“页面属性”，或者在属性检查器中单击“页面属性”。2.在“页面属性”对话框中，单击“标题/编码”类别，如图2.1所示。3.在“标题”框中，指定页面标题。也可以使用文档工具栏来指定页面标题。4.从“编码”下拉列表框中选择文档中字符所用的编码。5.单击“确定”。第2章目录23／1832.1HTML语言基础2.1.5设置页面基本属性body元素的常用属性backgroundbgcolortextlinkalinkvlinkleftmargintopmargin使用“页面属性”对话框来设置HTML页面属性：1.选择“修改”→“页面属性”，或单击属性检查器中的“页面属性”按钮。2.在“页面属性”对话框中，选择“外观（HTML）”类别。3.在“背景图像”框中，输入背景图像的路径。4.在“背景”框中，设置页面的背景颜色。5.在“文本”框中，指定显示字体时使用的默认颜色。6.在“链接”框中，指定应用于链接文本的颜色。7.在“已访问链接”框中，指定应用于已访问链接的颜色。8.在“活动链接”框中，指定当鼠标指针在链接上单击时应用的颜色9.在“左边距”框中，指定页面左边距的大小。10.在“上边距”框中，指定页面上边距的大小。11.单击“确定”。第2章目录24／1832.2在页面中应用文本2.2.1添加文本若要在HTML页面中添加文本，可以直接在文档窗口中键入文本，也可以从其他应用程序中复制文本，然后切换到Dreamweaver，将插入点定位在文档窗口的设计视图中，再执行粘贴操作。使用中文输入法提供的软键盘，还可以在页面中输入一些特殊符号，例如五角星☆★、方块□■、三角形△▲、菱形◇◆、圆形○●等等。在DreamweaverCS5中，可以使用“插入”菜单或面板来插入特殊字符。第2章目录25／1832.2在页面中应用文本2.2.2设置字体、字号和颜色fontface=fontFamily[,...fontFamilyNameN]size=intergetOrRelativeSizecolor=colorTripletOrName.../fontface属性指定文本所用的字体名称，可以是一种字体或一个字体列表，字体名称之间用逗号分隔。当浏览器解析font标签时，它将优先使用列表中的第一种字体来显示文本。如果运行浏览器的计算机上安装了该字体，则使用该字体；否则将尝试列表中的下一种字体。这种情况会继续下去，直到找到匹配的字体或到达列表结束。如果未找到任何匹配的字体，则使用默认字体。size属性指定文本的字体大小（字号），其值为整数，取值范围为1~7，默认值为3。也可以用正负号来指定相对于基准字体的大小。color属性指定文本的颜色，可使用RGB格式或颜色名称来表示。第2章目录26／1832.2在页面中应用文本2.2.3设置字符样式在HTML中，通过设置字符样式可以为某些字符设置特殊格式，例如粗体、斜体、下画线、删除线、上标以及下标等。第2章目录27／1832.2在页面中应用文本2.2.4设置段落与换行段落是文本的基本单位。通过使用段落标签p可将文档划分为段落，段落间通过一个空行来分隔。p标签在文档中定义一个段落，该段落与后续内容间有一个空行。语法如下：palign=where.../p其中，align属