《网页制作与设计》立体化电子课件 第4章-Dreamwear网页设计

第4章Dreamweaver操作基础行为的应用网页布局技术网页文档基本操作表单操作CSS样式表的应用总结与习题Dreamweaver网页设计Dreamweaver是Macromedia公司出品的一款集网页制作和网站管理于一体的“所见即所得”的网页制作软件。无论用户愿意享受手工编写HTML代码时的驾驭感还是偏爱在可视化编辑环境中工作，Dreamweaver都提供了有用的工具，使用户拥有更加完美的Web创作体验Dreamweaver操作基础

4.1作为网页制作软件，Dreamweaver提供了功能强大的可视化设计工具和精简而高效的代码编辑环境，使开发人员能够快捷地创建规范的Web应用程序，构建功能强大的网络服务体系Dreamweaver的主要特点及功能如下页所示Dreamweaver操作基础

4.1特点1是集网页制作和网站管理于一体的“所见即所得”的网页制作软件使用内置的图形编辑程序节省开发时间将设计和代码编辑器合二为一；设计者可书写HTML代码或以可视化的形式设计Web页提供操作方便、功能强大的用户界面特点4特点2特点3Dreamweaver操作基础

4.1特点5提供完美的CSS支持，可利用丰富的CSS样式表构建复杂、规范的站点提供完整的集成开发环境，可以开发多种站点，还可定制和扩展开发环境可与一些常见格式的外部文档或代码实现无缝结合提供了较多的行为，用户不用书写代码即可设计出功能丰富的网页特点8特点6特点7Dreamweaver操作基础

4.1特点9通过布局视图技术将表格和层两种排版工具结合起来，从而提供精确而灵活的页面排版功能强大的网站管理功能提供了跨浏览器兼容性检查功能，以检验页面中是否包含目标浏览器不支持的标记或CSS结构易学、易用，只要掌握了其基本操作方法，即使初学者也能制作出具有专业水平的网页特点12特点10特点11Dreamweaver操作基础

4.1初次启动Dreamweaver后，会弹出【工作区设置】对话框，对话框中提供了“设计器”和“编码器”两种布局风格，使用者可以根据自己的操作习惯，从中选择一种工作区布局当选择一种工作区布局后，如果想切换成另一种工作区布局，可以选择【窗口|工作区布局】，然后在弹出的子菜单中选择工作区布局Dreamweaver操作基础

4.1Dreamweaver在启动时，默认显示【起始页】对话框，用户可以在这个对话框中创建文档或打开最近使用过的文档，还可以通过产品介绍或教程了解关于Dreamweaver的更多信息。如果选中“不再显示此对话框”选项，则以后启动Dreamweaver时将不再自动显示起始页Dreamweaver操作基础

4.1当新建或打开一个Web页后，Dreamweaver显示出工作区窗口，窗口由主菜单、工具栏、文档窗口、面板组、属性面板等组成Dreamweaver的工作区窗口如下图所示Dreamweaver操作基础

4.1Dreamweaver的工作界面Dreamweaver操作基础

4.1主菜单主菜单提供Dreamweaver的所有操作，各菜单项的功能介绍如下Dreamweaver操作基础

4.1【文件】用于管理文件。包括创建和保存文件、导入与导出、预览等【编辑】用于编辑操作。包括撤销与恢复、复制与粘贴、查找与替换、参数设置与快捷键设置等【插入】用于插入页面元素。如图像、层、表格、表单、框架、特殊字符等Dreamweaver操作基础

4.1【查看】用于查看对象。如代码的查看，网格线、面板、工具栏的显示/隐藏等【修改】用于对页面元素的修改。如链接、表格、层位置、时间轴等【文本】用于对文本的操作。如文本格式设置、HTML/CSS样式、段落格式化等Dreamweaver操作基础

4.1【命令】汇集了所有的附加命令项。如录制命令等【站点】用于创建和管理站点【窗口】用于打开/关闭面板和窗口【帮助】包含Dreamweaver的联机帮助、技术支持等Dreamweaver操作基础

4.1插入工具栏插入工具栏包含用于将各种类型的对象插入到文档中的按钮，每个对象都对应一段HTML代码由于可以插入的对象很多，所以插入工具栏采取分类显示的方法，单击插入工具栏的“类别名”显示区域，显示类别列表，从中选择一个类别后，该类别所包含的工具按钮出现在工具栏中各类别所包括的按钮列举如下Dreamweaver操作基础

4.1【常用】包括链接类、图像和表格类、模板和标签类等常用的对象【布局】包括表格、div标签、层和框架等对象，还可以在此选择视图模式【表单】包括用于创建表单容器和插入表单元素的工具按钮Dreamweaver操作基础

4.1

【文本】包括定义文本格式和列表格式的各种设置按钮【HTML】包括用于插入水平线、文件头内容、表格、框架和脚本的HTML按钮【应用程序】包含插入记录集、重复区域等动态元素的按钮Dreamweaver操作基础

4.1文档窗口文档窗口显示当前编辑的Web页文档Dreamweaver提供了文档窗口的三种视图三种视图的内容列举如下Dreamweaver操作基础

4.1代码视图设计视图提供编辑HTML、JavaScript、服务器语言等代码的手工编码环境提供页面布局和编辑的可视化设计环境；在该视图中，用户可以通过拖动等操作完成网页元素的添加和编辑在一个窗口中同时显示同一文档的“代码”视图和“设计”视图。这种方式综合了“代码”视图和“设计”视图的长处拆分视图Dreamweaver操作基础

4.1在制作网页过程中，一般应该在设计视图中可视化地进行页面的布局设计和页面元素的添加在代码视图中修改Web页文档对应的HTML代码，或编写其它脚本代码Dreamweaver操作基础

4.1文档窗口还包括文档工具栏、文档编辑区、状态栏等组成部分在代码视图中，还会显示编码工具栏Dreamweaver操作基础

4.1文档工具栏文档工具栏通常显示在文档窗口的上面，包含各种按钮【代码】、【拆分】、【设计】三个按钮，用来控制文档窗口的视图方式Dreamweaver操作基础

4.1标题文本框标题文本框：用于显示和修改当前文档的标题，浏览网页时，网页的标题将显示在浏览器的标题栏中Dreamweaver操作基础

4.1按钮单击按钮会弹出菜单，从菜单中选择“检查浏览器支持”等命令，可以检测所编辑文档的跨浏览器兼容性Dreamweaver操作基础

4.1文档编辑区文档编辑区即用户用来编辑和修改文档的区域在代码视图中，可以输入Web页对应的HTML代码或脚本代码在设计视图中，可以通过拖动等操作，实现网页元素的可视化添加和修改Dreamweaver操作基础

4.1状态栏状态栏在“文档”窗口底部，提供当前文档的有关信息Dreamweaver操作基础

4.1属性面板属性面板又称属性检查器，一般出现在文档窗口的下方。属性面板用于显示所选中网页元素的属性，用户可以利用它查看和编辑属性值。选择不同的网页元素，属性面板所显示的内容也有所不同Dreamweaver操作基础

4.1面板组在Dreamweaver窗口的右侧是面板组，通常包含“CSS”、“应用程序”、“标签检查器”、“文件”等面板。在主菜单的【窗口】子菜单中包含了所有的面板名，通过勾选或取消勾选某个面板名，可以显示或移去该面板Dreamweaver操作基础

4.1除了前面已经介绍的插入工具栏和文档工具栏外，Dreamweaver还提供了样式呈现、标准和编码工具栏选择【查看】|【工具栏】，在【工具栏】子菜单中勾选或取消某个工具栏，可以在视图中显示或隐藏相应的工具栏。Dreamweaver操作基础

4.1站点站点实质上就是一个文件夹设计良好的网站通常是在站点文件夹下建立不同的子文件夹，将网页文档及其它资源分门别类地保存在相应的文件夹中以方便管理和维护Dreamweaver操作基础

4.1当使用Dreamweaver制作一个网站时，首先应该建立站点，以方便对整个网站的结构进行规划，并利用Dreamweaver的站点管理功能对整个网站资源进行管理Dreamweaver还有许多功能必须在建立站点后才能实现Dreamweaver操作基础

4.1站点类型远端站点通常将存储在Web服务器上的站点称为远端站点；建立网站的最终目的是要发布到互联网上，因此需要在Web服务器上建立远端站点本地站点在创建站点时，通常先在本地计算机上建立一个站点，完成网站开发工作，调试成功后，再上传到Web服务器上；在本地计算机上建立的站点就是本地站点Dreamweaver操作基础

4.1创建本地站点创建本地站点，包括为站点命名，指定站点存储位置(文件夹)，确定是否使用服务器技术和是否使用远程服务器等工作创建立本地站点的步骤如下所示Dreamweaver操作基础

4.1Step1Step2选择菜单【站点|新建站点】，弹出对话框。对话框包括“基本”和“高级”两个选项卡；前者为建立站点的向导，后者则用来设置站点的各个属性选择“基本”选项卡，进行站点命名操作：在“站点名称”文本框中为站点命名进行站点URL设置操作：在“HTTP地址”文本框中设定完成的站点上传到Web服务器后将使用的URL，若不知道新建站点的URL，可以暂时不填Step3Dreamweaver操作基础

4.1Step4Step5单击【下一步】按钮，在弹出的对话框中选择站点类型：创建动态网站，应选择“是，…”；创建静态网站，应选择“否，…”；通常选择“否，…”创建静态网站；然后在弹出的服务器技术列表中选择要使用的服务器技术类型单击【下一步】按钮，在弹出的对话框中设置本地站点文件夹Step6Dreamweaver操作基础

4.1Step7Step8对于对话框上方的一组单选按钮，使用系统默认选择即可；单击【下一步】按钮，在弹出的对话框中选择连接远程服务器的方式单击【下一步】按钮，在弹出的对话框中单击【完成】按钮，完成站点的创建。站点创建成功后，可以看到文件面板中出现新建站点Step9Dreamweaver操作基础

4.1在“连接方式”列表框中选择本地站点与远程服务器的连接方式时，选择“无”，暂时不与远程服务器建立连接管理站点创建站点后，在设计过程，可以对站点进行管理操作管理站点的步骤如下所示Dreamweaver操作基础

4.1Step1Step2选择菜单【站点|管理站点】，弹出【管理站点】对话框，对话框中列出了本地计算机中建立的所有可用站点名称，并提供了管理站点的操作按钮单击【新建】按钮，可以进入新建站点流程；从站点列表中选择一个站点后，单击【编辑】按钮，可以按定义站点的流程显示站点各项设置，供用户修改在【管理站点】对话框中，还可以完成站点的复制、删除、导出、导入等操作Step3Dreamweaver操作基础

4.1建立站点以后，可以通过文件面板对站点中的资源进行管理文件面板中包含“文件”、“资源”、“代码片断”三个选项卡Dreamweaver操作基础

4.1文件选项卡文件选项卡主要用来对站点的文件进行管理，可以完成对文件和文件夹的新建、打开、复制、粘贴、重命名等操作Dreamweaver操作基础

4.1代码片段选项卡Dreamweaver预定义了一些能实现特定功能的代码片段，在制作网页时，可以利用文件面板的代码片断选项卡，直接将代码片断插入到网页中在Dreamweave中可以创建并插入HTML、JavaScript、CFML、ASP、JSP等代码片断Dreamweaver操作基础

4.112345文字处理图像处理使用超级链接使用多媒体对象网页文档处理网页文档基本操作4.2网页文档的操作主要包括网页文档的创建与编辑，网页中文字、超级链接、图像、多媒体等对象的处理网页文档基本操作4.2创建空白文档在Dreamweaver中可以创建新的空白文档、创建以模板为基础的文档以及打开并编辑已经存在的文档网页文档处理4.2.1创建空白文档方法1从启动界面中的“创建新项目”组合框中选择合适的文件类型，即可直接进入文档窗口进行编辑方法3按下Ctrl+N快捷键，系统弹出新建文档对话框方法2选择【文件/新建】菜单命令，系统弹出新建文档对话框网页文档处理4.2.1打开现有文档在Dreamweaver中可以打开现有的Web页或基于文本的文档对于不是Dreamweaver创建的文档，也可以将其打开，然后在Dreamweaver的“设计”视图或“代码”视图中编辑该文档网页文档处理4.2.1打开现有文档方法1在【文档】窗口中打开选择的文档方法3在资源管理器中打开文档方法2导入Word文档网页文档处理4.2.1页面属性页面属性是指网页的一般属性信息，如：网页标题、网页背景颜色、背景图像、超链接颜色、跟踪图像等网页文档处理4.2.1设置网页属性3设置网页外观属性2.设置网页编码属性1.设置网页标题属性4.设置网页链接属性5.设置网页图像属性网页文档处理4.2.1文字处理主要包括：输入文字、设置文字大小、设置字体、设置文本颜色、设置文本对齐方式等文字处理4.2.2输入文字打开Dreamweaver8.0之后，然后在需要插入文本的位置单击鼠标左键定位插入点，然后输入文字若要开始新的一段，按<Enter>键即可，对应的HTML标签是<p>若要换行显示一段内容，可以按<Shift+Enter>组合键，对应的HTML标签是<br>如果输入的文字超出一行的范围，输入的文本将自动换行文字处理4.2.2输入连续空格在Dreamweaver中一般只能输入一个空格，若要输入连续的空格时，可以采用下列方法中的一种文字处理4.2.2输入连续空格方法方法1执行【编辑/首选参数】菜单命令，在打开的【首选参数】对话框中选定“分类”栏中的“常规”选项，并勾选右边编辑选项中“允许多个连续的空格”复选框即可方法3切换到中文输入法，设置为全角输入状态，然后在欲连续输入空格的位置按空格键方法2将光标定位到需要输入多个空格的位置，切换到代码视图，连续输入多个“ ”，或者单击插入工具栏文本分类中的“字符”对象，选择“不换行空格”下拉菜单选项即可文字处理4.2.2编辑文字内容2.设置文本颜色1.设置文字标题与段落4.设置方本对齐方式3.设置文字字体及大小文字处理4.2.2水平线水平线对于组织信息很有用在页面上，使用一条或多条水平线能够以可视方式分隔文本和对象水平线的操作包括如下文字处理4.2.2水平线操作插入水平线将光标移到要插入水平线的位置，执行【HTML/插入/水平线】菜单命令，插入一条默认宽度和粗细的水平线设置水平线颜色选中水平线，单击属性面板中的快速标签编辑器按钮，打开编辑标签窗口，键入设置水平线颜色的代码修改水平线选定插入的水平线，打开属性面板，设置水平线的高度、宽度、对齐方式以及是否有阴影等属性文字处理4.2.2Dreamweaver提供了一个方便的日期对象，该对象使用户可以以喜欢的格式插入当前日期，还可以选择在每次保存文件时都自动更新该日期文字处理4.2.2日期对象的操作

2.插入更新日期1.插入日期3.修改已插入日期文字处理4.2.2图像处理操作包括插入图像、设置图像属性、插入图像占位符、插入鼠标经过图像等内容图像处理4.2.3插入图像方法方法1将光标置于要插入图像的位置，单击【插入】工具栏的【图像】按钮或选择【插入/图像】菜单命令，打开【选择图像源文件】对话框方法3当所选图像文件不在当前站点，在打开的对话框中选择将图像文件复制到根文件夹；再打开【复制文件为】对话框，定位到站点的目标文件夹并单击【保存】按钮即可方法2在对话框中设置图像文件名、文件类型和图像源的URL；选取存放在站点中的图像文件，然后单击【确定】按钮将图片插入到指定区域图像处理4.2.3在网页中插入图像后可以对图像的各种相关属性进行设置设置图像属性的内容较多，常用的操作包括以下内容图像处理4.2.3设置图像属性1.图像名称2.图像尺寸大小3.图像的源文件4.图像的超链接5.对齐与边距6.其他属性图像处理4.2.3图像占位符如果还没有准备好添加到Web页上的图像，可以插入图像占位符先预占一个图像位置在Dreamweaver中插入图像占位符的基本操作图像处理4.2.3Step1Step2将光标置于要插入图像占位符的位置，在【插入】工具栏中选择【图像占位符】按钮或选择【插入/图像对象/图像占位符】菜单命令在打开的【图像占位符】对话框中对图像的名称、颜色、宽度、高度、替代文本等属性进行设置单击【确定】按钮，网页文档中即会出现图像占位符Step3图像处理4.2.3鼠标经过图像当访问者移动鼠标使鼠标指针经过图像时，图像变为另一幅图像；而鼠标指针离开时，图像又恢复为原始图像这种效果通常用于导航条、图像互动等图像处理4.2.3鼠标经过图像由两幅图像组成：一是首次载入时显示的图像即原始图像，二是鼠标经过后翻转的图像即鼠标经过图像在创建鼠标经过图像时应使用相同大小的两幅图像；如果这两个图像大小不同，Dreamweaver将自动调整第二个图像的大小以匹配第一个图像的大小图像处理4.2.3超级链接超级链接简称链接，是指从一个网页指向一个目标的连接关系，即在Web页面中插入的指向其它文档的引用超级链接的目标可以是另外的网页，或者是一张图片、一个文件、一个程序等超级链接可以将任何类型的资源转换为超级链接，但最常用的类型是文本链接使用超级链接4.2.4超级链接的外观多种多样，可以是导航按钮、文本、图片，无论是哪一种格式，只要用鼠标单击链接对象，即可跳转到指定的目标网页。当鼠标指向链接载体时，链接载体会发生一些变化，如鼠标指向文字载体，文字的字体、字号、颜色等会发生改变，有的带有下画线使用超级链接4.2.4根据超级链接指向目标文件的不同，超级链接可为如下图所示的三种形式使用超级链接4.2.4超级链接的类别1

2.锚点超链接1.页面超链接3.邮件超链接使用超级链接4.2.4根据超级链接单击对象的不同，超级链接可以分为如下图所示的三种形式使用超级链接4.2.4超级链接的类别22.图像超链接1.文字超链接3.图像映射使用超级链接4.2.4创建超链接必须先了解链接与被链接载体的路径在一个网站中，路径通常有3种表示方式，如下图所示使用超级链接4.2.4路径的类别2.根目录相对路径1.绝对路径3.文档目录相对路径使用超级链接4.2.4图像映射图像映射就是指在一幅图像中定义若干个区域(即热点)，每个区域中指定一个不同的超链接当单击不同区域时，可以跳转到相应的目标页面使用超级链接4.2.4创建超级链接在Dreamweaver中，可以创建多种类型的超级链接可创建到文档、图像、多媒体文件或软件的超级链接可创建到文档内任意位置的文本或图像超级链接使用超级链接4.2.4创建超级链接链接类型1创建到其它文档或文件的超级链接链接类型3创建电子邮件链接链接类型2创建到文档内的特定位置的超级链接使用超级链接4.2.4修改超级链接可以使用站点的可视化表示形式来修改链接，或者通过一次更改将所有链接更新到一个特定的文件中使用超级链接4.2.4修改超级链接修改方式1自动更新超级链接修改方式3在整个站点范围内更改超级链接修改方式2在站点地图中修改超级链接使用超级链接4.2.4Dreamweaver可以快速便捷地向Web站点添加多媒体对象，从而使制作出的网页图文并茂，声色具备使用多媒体对象4.2.5Dreamweaver目前使用的音频和视频文件格式包括：音频：主要为Wav、Midi、Mp3、Aif和Ra等音频文件格式视频：主要为RealMedia、WindowsMedia、QuickTime等视频文件Flash、Shockwave等影片Javaapplet、ActiveX等控件格式使用多媒体对象4.2.5插入媒体对象Dreamweaver文档中可插入FlashSWF文件或对象、QuickTime或Shockwave影片、Javaapplet、ActiveX控件及其它音频或视频对象在页面中插入媒体对象的操作过程如下所示使用多媒体对象4.2.5Step1Step2将插入点放在【文档】窗口中希望插入该对象的位置在【插入】工具栏的【常用】类别中单击【媒体】按钮，再选择要插入的媒体对象按钮即可或从【插入/媒体】菜单中选择适当的媒体对象，在打开的【选择文件】对话框中选择要插入的媒体文件，单击【确定】按钮即可Step3使用多媒体对象4.2.5添加视频可以通过不同方式和使用不同格式将视频添加到Web页面视频可被用户下载，也可对视频进行流式处理，以便在下载它的同时进行播放使用多媒体对象4.2.5添加音频可以向Web页添加不同类型和文件格式的声音添加声音前，往往先考虑以下因素：添加声音文件的大小、声音品质、听众类型、浏览器的差异等向页面添加音频文件的操作步骤如下所示使用多媒体对象4.2.5Step1Step2在【设计】视图中，将插入点放置在要嵌入文件的地方单击【插入】工具栏的【媒体】按钮，然后选择【插件】图标或执行【插入/媒体/插件】菜单命令在属性检查器中，单击文件夹图标浏览音频文件，并可通过【文档】窗口中调整插件占位符的大小来确定音频控件在浏览器中的大小Step3使用多媒体对象4.2.52框架在网页布局中的应用

4模板在网页生成中的应用

3层在网页布局中的应用1表格在网页布局中的应用网页布局技术4.3网页布局网页布局是指在页面上划分出不同的区域，按照网页设计的原则，将不同的内容放置到不同的位置上，并通过色彩调和出不同的网站基调，使网页内容形成一个有机的整体，充分表达网站主题的过程表格在网页布局中的应用4.3.1表格表格是用来格式化数据的工具，是网页中常用的信息展示方式，也是页面布局主要的设计工具表格创建后，可以对表格进行文字输入、图像插入、属性修改、表格嵌套等操作表格在网页布局中的应用4.3.1表格可以控制文本和图形在页面上出现的位置在设计页面时，往往要利用表格来定位页面元素通过设置表格和单元格的属性，可实现对页面元素的准确定位合理地利用表格来布局页面，有利于协调页面结构的平衡表格在网页布局中的应用4.3.1插入表格的方法：在插入面板中选择“常用”标签，点击按钮，弹出【插入表格】对话框，设置相应的参数来插入表格也可以通过选择【插入/表格】菜单命令打开【插入表格】对话框表格在网页布局中的应用4.3.1【插入表格】对话框表格在网页布局中的应用4.3.1表格元素处理2.拆分单元格1.合并单元格4.删除行或列3.插入行或列表格在网页布局中的应用4.3.1选择表格元素2.选择单元格1.选择表格对象3.选择行或列表格在网页布局中的应用4.3.1单元格表格中行与列围成的区域称为单元格在单元格中可以插入文本、图像等元素，也可以根据实际的需要对单元格进行合并和拆分对单元格进行拆分的具体的步骤如下所示表格在网页布局中的应用4.3.1Step1Step2将光标放在表格的特定行，单击【属性】面板中的【拆分单元格】按钮，会弹出【拆分单元格】对话框在对话框中将【单元格拆分】后的【行】或【列】单选按钮选中，在【行数】或【列数】文本框中输入数值单击【确定】按钮，就可以把表格的特定行拆分成指定数目的单元格Step3表格在网页布局中的应用4.3.1对行或列进行添加与删除的操作步骤如下所示表格在网页布局中的应用4.3.1Step1Step2选中表格的某一行，右击弹出快捷菜单，选择【表格/插入行】命令，此时就会在当前行上方插入一行选择【行】选项，可设置插入的行在插入点的上或下；选择【列】选项，可以设置插入的列在插入点的前或后Step3选中表格的某一行，右击弹出快捷菜单，选择【表格/插入行或列】命令，打开【插入行或列】对话框表格在网页布局中的应用4.3.1将光标置于要删除行或列的任意一个单元格中，右键选择【表格/删除行】或【表格/删除列】命令，或者按下Delete键，可将该行或列删除表格在网页布局中的应用4.3.1单元格作为表格的重要的组成部分，其属性的设置影响到表格的外观将鼠标放到某个单元格内，可以通过【属性】面板对这个单元格进行设置表格在网页布局中的应用4.3.1单元格属性设置1.水平对齐2.垂直对齐3.高度和宽度4.背景图片5.背景颜色6.边框颜色表格在网页布局中的应用4.3.1嵌套表格嵌套表格是在当前表格的某一单元格中插入的新表格表格不宜嵌套太多，最多三层；使用的嵌套越多，页面的浏览速度越慢表格在网页布局中的应用4.3.1对嵌套表格可以像对其他表格一样进行格式设置嵌套表格的宽度不能任意设置，应由其所在单元格的宽度决定在表格单元格中嵌套表格的基本做法如下所示表格在网页布局中的应用4.3.1Step1Step2单击现有表格中要插入嵌套表格的那个单元格选择【插入/表格】菜单命在【插入表格】对话框中对嵌套表格进行设置Step3表格在网页布局中的应用4.3.1格式化表格格式化表格将对表格进行一定的美化格式化表格的操作步骤如下所示表格在网页布局中的应用4.3.1Step1Step2选中表格，选择【命令/格式化表格】菜单命弹出【格式化表格】对话框；在对话框的左上角有各种样式列表，根据需要进行样式选择单击【确定】按钮即可按所选的样式格式化选定表格Step3表格在网页布局中的应用4.3.1表格数据导出可以将表格数据导出为文本文件表格数据导出的操作步骤如下所示表格在网页布局中的应用4.3.1Step1Step2将光标移至表格中的任意一个单元格，选择【文件/导出/表格】菜单命令，弹出【导出表格】对话框选择【定界符】下拉列表中的选项，设置表格导出后各单元格数据间的分隔符号，如Tab键等；选择【换行符】下拉列表中的选项，设置导出表格适用的操作系统类型，通常选Windows单击【导出】按钮，弹出【表格导出为】对话框，在文件名后的文本框中输入导出的文件名及扩展名，单击【保存】按钮，完成表格数据的导出Step3表格在网页布局中的应用4.3.1表格常用做页面布局工具，绝大多数网页都是用表格辅助布局的Dreamweaver中的表格分为表格与布局表格，表格用于精确控制各种属性，布局表格用于页面布局表格在网页布局中的应用4.3.1布局视图模式Dreamweaver的文档窗口视图默认为标准视图当使用布局表格进行页面布局时，应先将文档窗口切换到布局视图模式

表格在网页布局中的应用4.3.1标准视图切换到布局视图的方法方法1在插入工具栏中选择“布局”选项；单击布局栏中的【布局】按钮，弹出操作提示信息框，单击【确定】按钮，进入布局视图模式方法2选择【查看/表格模式/布局表格】菜单命令切换到布局视图模式表格在网页布局中的应用4.3.1绘制布局表格在布局视图模式下，单击【绘制布局表格】按钮，此时鼠标指针变为十字形状在编辑区域拖拽鼠标指针，即可绘制出一个布局表格同时布局表格左上角自动出现绿色的布局表格标签，布局表格边线周围出现控制手柄表格在网页布局中的应用4.3.1绘制布局单元格在布局视图模式下，单击【绘制布局单元格】按钮，在布局表格中拖拽鼠标指针即可绘制出一个布局单元格如果要连续绘制多个布局单元格，需按下Ctrl键不放，然后在布局表格中多次拖动鼠标进行绘制。只能在布局表格中绘制布局单元格，布局单元格不能重叠表格在网页布局中的应用4.3.1绘制布局表格界面表格在网页布局中的应用4.3.1操作布局表格与布局单元格为布局单元格添加内容将光标定位到要添加内容的布局单元格中，直接输入文本内容，或者使用对象面板插入图片、动画等对象

对布局表格或布局单元格调整大小选中布局表格或布局单元格，拖拽控制手柄改变其大小；或选取要调整的对象，在属性面板中输入宽度值和高度值，精确调整所选对象的大小移动布局表格或布局单元格单击布局表格顶部的布局表格标签或单元格的边线，将其选中；使用键盘上的方向键，或者拖动鼠标指针，即可将所选移动到指定位置

表格在网页布局中的应用4.3.1框架框架可以将浏览器窗口划分为若干个独立的区域，每个区域分别显示不同的网页文档。框架主要包括框架集和多个框架，框架集的功能是定义一组框架的布局和属性框架在网页布局中的应用4.3.2框架的组成元素框架集框架集是在一个文档内定义一组框架结构的HTML网页。框架集定义了一页显示的框架数、框架的大小、载入框架的网页源和其他可定义的属性等框架页单个框架页是指在框架定义的某一区域中显示的网页文件框架在网页布局中的应用4.3.2预定义框架集Dreamweaver可以自行设计框架集，也可以从预定义的库中选择已有的框架集后者称为Dreamweaver系统的预定义框架集预定义框架集如下图所示表格在网页布局中的应用4.3.1使用【框架】按钮插入预定义框架集框架在网页布局中的应用4.3.2选择预定义的框架集将自动设置创建布局所需的所有框架集和框架，它是迅速创建基于框架布局的最简单的方法Dreamweaver中创建预定义框架集常用的方法如下所示框架在网页布局中的应用4.3.2方法1在“插入”栏的“布局”选项卡中，单击【框架】按钮，从预定义的框架集类型列表中选择所需的选项单击【文件/新建】命令，弹出【新建文档】对话框；从类别列表中选择“框架集”，从框架集列表中选择所需的框架集类型，并单击【创建】按钮选择【插入/HTML/框架】菜单命令，从弹出的预定义框架集类型列表中选择所需的选项方法2方法3框架在网页布局中的应用4.3.2保存框架网页当编辑完框架和框架文件后，必须对框架及框架文件进行保存在Dreamweaver中保存框架及框架文件，如果仅像保存普通文件一样保存框架，只会保存鼠标所定位的框架内容，其余的框架内容将丢失，因此需要选择适当的保存方法框架在网页布局中的应用4.3.2Dreamweaver中对框架及框架文件进行保存的步骤如下所示框架在网页布局中的应用4.3.2Step1Step2选择菜单命令【文件/保存全部】，整个框架边框将出现阴影框，同时弹出【另存为】对话框，要求输入框架集的文件名单击【保存】按钮，出现第二个【另存为】对话框，将有一个框架内侧出现阴影，要求输入该框架的文件名单击【保存】按钮，依次对其他框架输入文件名，直到所有的框架全部命名并保存完毕Step3框架在网页布局中的应用4.3.2设置框架属性使用框架属性面板可以设置框架的属性在文档窗口中按住Alt键，然后用鼠标单击一个框架，即可选中该框架选中【窗口/属性】菜单命令，打开框架属性面板，如下图所示表格在网页布局中的应用4.3.1【框架属性】面板框架在网页布局中的应用4.3.2框架属性面板中各个属性选项如下所示框架在网页布局中的应用4.3.2属性面板属性1.框架名称2.源文件3.不能调整大小4.边框5.边框颜色6.边界宽度与高度框架在网页布局中的应用4.3.2设置框架集属性要显示框架集的属性面板，首先单击框架的边框，选中框架集，此时属性面板中将显示框架集的各种属性框架集属性面板中主要的属性选项如下所示框架在网页布局中的应用4.3.2属性集面板属性1.边框选项2.边框宽度选项3.边框颜色选项4.行选项5.列选项6.单位选项框架在网页布局中的应用4.3.2框架元素的选择选择框架集将鼠标指针移动到整个边框位置的同时，按住Alt键，当鼠标指针变成水平或者垂直双向箭头时，单击边框即可选中整个框架集选择单个框架选择【窗口/框架】菜单命令，打开【框架】面板，在框架面板中单击需要选择的框架，该框架的边界被虚线包围即表明被选中框架在网页布局中的应用4.3.2超链接目标框架超链接目标框架是指当单击超链接时，超链接引用的目标网页在哪个框架中显示设置超链接目标框架的步骤如下框架在网页布局中的应用4.3.2Step1Step2按下Alt键，单击某框架内部，选中该框架；在属性面板的“框架名称”文本框中输入该框架的名称，可以使用默认名称选择文本或其他对象，在属性面板的“链接”文本框中输入链接的URL，或通过该框右侧的文件夹按钮，选择要链接的URL单击属性面板的“目标”列表框，从列表中选择目标框架对象Step3框架在网页布局中的应用4.3.2属性面板的“目标”列表框中各个目标框架对象的功能含义如下图所示框架在网页布局中的应用4.3.2_blank_parent_self_top在新的浏览器窗口中打开链接的文档，同时保持当前窗口不变在显示链接框架的父框架集中打开链接的文档，同时替换整个框架集在当前框架中打开链接，同时替换该框架的内容在当前浏览器的窗口中打开该链接的文档，同时替换掉整个框架集框架在网页布局中的应用4.3.2mainFrameleftFrame在框架集的主框架中打开链接的文档，同时替换掉主框架中原来所显示的文档在框架集的左框架中打开链接的文档，同时替换掉左框架中原来显示的内容在框架集的上框架中打开链接的文档，同时替换掉上框架中原来显示的文档topFrame框架在网页布局中的应用4.3.2层层是一种HI‘ML页面元素，也是一种定位页面元素的手段层中可以包含文本、图像、动画、视频等任何能放置到HTML文档中的元素使用层，网页上的各种元素可以定位在网页的任意位置，并能以任意方式重叠层在网页布局中的应用4.3.3Dreamweaver可以方便地在页面上创建层并精确地定位层，还可以创建嵌套的层。一个网页中可以含有多个层，层的可见性可以任意控制，各个层之间可以重叠，可以定义层之间的层次关系层在网页布局中的应用4.3.3插入层在文档窗口的“设计视图”中可以直接绘制一个或多个层插入层的方法有2种，一种是通过菜单创建，一种是通过插入面板创建层在网页布局中的应用4.3.3插入层的方法使用菜单命令将插入点放置到需插入层的编辑窗口中，选择【插入/布局对象/层】菜单命令，将自动在光标处插入一个层使用插入面板在“插入栏”的“布局”选项卡中单击【绘制层】按钮，拖动鼠标即可绘制一个层；按下Ctrl键并拖动鼠标可绘制多个层

层在网页布局中的应用4.3.3嵌套层在图层中可以放置网页中的任何元素，因此在层中也可以包含其他层；这种相互包含的层间的关系称为嵌套层嵌套的层成为父层，被嵌套的层成为子层在“层”浮动面板中可以清晰查看层与层之间的嵌套关系层在网页布局中的应用4.3.3层的基本操作选择层在文档窗口中单击层边线即可选择层。按下Shift键并单击其他层，可选取多个层移动层选择层后，移光标到层的边框上，光标将变成十字箭头形状；按下鼠标左键拖拽层，即可将其移到任意位置缩放层可以缩放层的大小方法：选中层后拖拽层四周的控制手柄，即可改变层的大小层在网页布局中的应用4.3.3层的基本操作设置层属性单击选中目标层，属性面板中能够设置层的各类参数

删除层在“层”面板或编辑窗口中选择要删除的层，按Delete键或选择【编辑/清除】菜单命令，即可删除该层设置层选择【编辑/首选参数】菜单命令，打开首选参数对话框，选中“层”选项，指定新建层的默认设置

层在网页布局中的应用4.3.3层的属性面板

层在网页布局中的应用4.3.3层属性面板各属性1.层编号列表框2.宽和高数值3.Z轴数值4.可见性列表框5.背景图像6.背景颜色层在网页布局中的应用4.3.3【转换层为表格】对话框层在网页布局中的应用4.3.3层转换为表格使用【转换层为表格】对话框能够设置转换参数层转换为表格的方法如下所示层在网页布局中的应用4.3.3Step1Step2在页面中选中要转化为表格的所有的层选择【修改/转换/层到表格】菜单命令，打开【转换层为表格】对话框在【转换层为表格】对话框中设置各类设置转换参数，单击【确定】按钮即可开始转换Step3层在网页布局中的应用4.3.3层层是一种HTML页面元素，也是一种定位页面元素的手段层中可以包含文本、图像、动画、视频等任何能放置到HTML文档中的元素使用层，网页上的各种元素可以定位在网页的任意位置，并能以任意方式重叠模板在网页布局中的应用4.3.4模板模板是一种特殊类型的文档，主要用于创建多个具有一致风格的网页，是简化网站开发和维护工作的重要工具从模板创建的网页文档与该模板始终保持着链接关系，当修改模板时，所有基于该模板的文档也会被同步更新模板在网页布局中的应用4.3.4创建模板模板必须保存在站点中，创建模板前先要建立站点创建模板时系统会在站点内自动生成一个模板文件夹Template，所有的模板文件都保存在该文件夹下，并以.dwt为文件扩展名模板在网页布局中的应用4.3.4创建模版的方法方法1

在文档窗口中，使用【插入/模板对象/创建模板】菜单命令，在【另存为模板】对话框中输入新建模板的名称，单击【保存】按钮即可创建一个空白模板文件方法3

由现有文档保存为扩展名为.dwt的模板

方法2在“插入栏”的“常用”选项卡中单击【模板】按钮，从命令选项列表中选择“创建模板”选项，即可创建一个空白模板文件模板在网页布局中的应用4.3.4方法3是应用已有的页面另存为模板，这是最常用的创建模板的方法，具体的步骤如下所示模板在网页布局中的应用4.3.4Step1Step2打开一个已完成的网页；删除页面中与其他页面有变化的区域，留下相同的区域选择【文件】另存为模板】菜单命令，弹出【另存为模板】对话框；选择模板保存的站点与要生成的模板文件名单击【保存】按钮，在站点文件下会自动产生一个新的文件夹，模板保存到该文件夹下Step3模板在网页布局中的应用4.3.4可编辑区域定义打开创建的模板文件，选中作为可编辑区域的内容范围，用以下两种方法能够设置可编辑区域

模板在网页布局中的应用4.3.4设置可编辑区域的方法方法1在插入工具栏中单击【模板】按钮，选择“可编辑区域”选项，打开【新建可编辑区域】对话框；输入可编辑区域的名称，单击【确定】按钮即可

方法2选择【插入/模板对象/可编辑区域】菜单命令，打开【新建可编辑区域】对话框；用同样的方法可在文档的不同位置创建多个可编辑区域模板在网页布局中的应用4.3.4可编辑区域删除如果想不再使用或更改某个可编辑区域，可删除该可编辑区域删除的方法为：选取模板中需要取消的可编辑区域标记，然后选择【修改/模板/删除模板标记】菜单命令，即可删除选中的可编辑区域模板在网页布局中的应用4.3.4应用模板应用模板创建的网页文档与模板之间自动建立起链接关系当修改模板后，系统自动更新与模板关联的文档模板在网页布局中的应用4.3.4Step1Step2在页面中选中要转化为表格的所有的层打开资源面板，单击【模板】按钮，打开模板列表；右击要应用的模板，选择【从模板新建】快捷菜单命令，即可新建基于选定模板的网页文档，并自动在文档窗口中打开该文档打开要应用模板的文档；选择【窗口/资源】菜单命令，打开“资源”面板；单击面板左侧的【模板】按钮，打开模板列表；在列表中选中要应用的模板，单击【应用】按钮即可Step3模板在网页布局中的应用4.3.4模板分离如果不想在当前文档中附有模板格式，或不希望文档与模板保持关联，可以选择【修改/模板/从模板中分离】菜单命令，将文档与模板分离开来分离后的文档成为普通网页文档，它的任意区域都可进行编辑模板在网页布局中的应用4.3.4行为是Dreamweaver中一个非常有特色的功能，它的使用可以使用户不需要手工编写代码，就可以设计出具有相当的交互功能和动态效果的页面行为的应用4.4行为行为是指在网页中运行的一系列动作，行为将JavaScript代码放在文档中以允许访问者与Web页进行交互，通过用户的操作引起某个任务的执行。行为的实质是内置在Dreamweaver中的JavaScript函数库行为能实现用户与网页间的交互，通过某个动作来触发某项事件行为的应用4.4事件事件是由浏览器为每个页面元素定义的，通常浏览器都会提供一组事件事件总是与动作相关联。当访问者与网页进行交互时，浏览器生成事件并非所有的事件都是交互的行为的应用4.4行为基本操作1.添加行为2.修改行为3.删除行为4.选择事件5.调整顺序6.获取更多的行为行为的应用4.4常见行为常见行为可以通过在行为面板中单击加号按钮打开；主要行为包括打开浏览器窗口、交换图像、拖动层、显示弹出式菜单、弹出信息、检查表单、控制Flash、播放声音、转到URL等行为的应用4.4标准行为事件不同的浏览器支持的事件类型是不同的，浏览器版本越高支持的事件类型越多，所以设计带有行为的网页之前，要充分考虑到浏览者的浏览器版本和类型不同的浏览器都支持的通用事件称为标准行为事件行为的应用4.4根据用途，Dreamweaver包括以下常用的事件种类窗口事件鼠标事件键盘事件表单事件其他事件行为的应用4.4窗口事件窗口事件与窗口的行为相关常见的窗口事件列举如下所示行为的应用4.4事件1事件2OnAbort在浏览器中停止了加载网页文档的操作时发生的事件OnMove移动窗口或者帧时发生的事件Onload选定的对象出现在浏览器上时发生的事件事件3行为的应用4.4OnResize访问者改变窗口大小时发生的事件事件4事件5OnUnload访问者退出网页文档时发生的事件行为的应用4.4键盘事件键盘事件与鼠标的各种行为相关常见的键盘事件列举如下所示行为的应用4.4事件1事件2onKeyDown：按下键盘上某个键，触发该事件onKeyPress：按下键盘上某个键后又释放掉该键，触发该事件onKeyUp：释放被按下的键时，触发该事件事件3行为的应用4.4鼠标事件鼠标事件与鼠标的各种行为相关常见的鼠标事件列举如下所示行为的应用4.4事件1onClick：鼠标单击页面元素时触发onDblClick：鼠标双击页面元素时触发onMouseDown：按下鼠标左键触发该事件onMouseMove：鼠标指针在特定页面元素上移动时，触发该事件事件4事件2事件3行为的应用4.4事件5事件6onMouseOut：鼠标指针移出了特定页面元素的范围时，触发该事件onMouseOver：鼠标指针第一次移到特定页面元素范围内时，触发该事件onMouseUp：把按下的鼠标左键释放时触发该事件事件7行为的应用4.4表单事件表单事件与表单的各种行为相关常见的表单事件列举如下所示行为的应用4.4事件1事件2OnAfterUpdate更新表单文档的内容时发生的事件OnBeforeUpdate改变表单文档的项目时发生的事件OnChange访问者修改表单文件的初始值时发生的事件事件3行为的应用4.4事件4事件5OnReset将表单文件重设置为初始值时发生的事件OnSubnit访问者传送表单文档时发生的事件OnSelect访问者选定文件字段中的内容时发生的事件事件6行为的应用4.4其他事件其他事件是指除以上分类事件之外的那些事件常见的其他事件列举如下所示行为的应用4.4事件1OnError在加载文档的过程中，发生错误时发生的事件OnFilterChange运用于选定元素的字段发生变化时发生的事件OnfinishMarquee用功能来显示的内容结束时发生的事件OnStartMarquee开始应用功能时发生的事件事件4事件2事件3行为的应用4.4事件5onAfterPrint：打印结束时触发该事件onBeforePrint：打印开始前触发该事件onFocus：当指定元素通过用户的交互行为获得焦点时，触发该事件onBlur：当指定元素停止从用户的交互行为上获得焦点时，触发该事件事件8事件6事件7行为的应用4.4表单表单是一个容器，可以存放各种表单元素，如按钮、文本域等。表单是网站管理者和浏览者之间交流的平台。通过表单，可以把用户输入的信息提交给服务器表单的定义是和动态网页相关的，用表单实现的动态网页必须具备以下两个条件：具有表单对象的页面和表单后的脚本程序表单操作4.5表单页面在浏览网页时常常会看到用来收集信息的页面，页面中包含一些按钮、文本框和列表等，这就是表单页面表单操作4.5表单对象表单中的元素很多，统称为表单对象。这些对象分别用于实现不同的功能插入表单对象的操作步骤如下所示表单操作4.5Step1Step2把鼠标定位在文档区中要插入表单对象的位置选择【插入/表单】菜单命令，打开表单对象子菜单，选择要插入的表单对象；或者把“插入”面板切换到“表单”项并选择需要的表单对象在弹出的对话框中进行相应的设置，完成表单对象的插入Step3表单操作4.5定义表单使用【表单】面板中的相应按钮能够定义表单或使用【插入】菜单下的【表单】子菜单中的命令也能够定义表单其中所定义表单的功能如下所示表单操作4.5表单添加所有其他表单对象的基本容器添加用来输入文本的单行文本框添加用来输入文本的多行文本框添加一个用来存储用户数据的域，该区域用户不可见隐藏域文本字段文本区域表单操作4.5复选框添加用于多项选择的复选框添加用于在网页中多个项之间进行单项选择的单选按钮一次添加多个单选按钮添加以列表或菜单形式出现的选项列表/菜单单选按钮单选按钮组表单操作4.5跳转菜单添加一个用于跳转到其他文件的菜单列表添加空白文本域和浏览按钮，作用是使用户浏览本地磁盘上的文件，并上传到服务器添加一个用于替换提交按钮的图像添加文本按钮，点击触发服务器端脚本处理程序按钮文件域图像域表单操作4.5模板表单是存放其他表单对象的容器，用来限制其他表单对象的插入范围表单是存放其他表单对象的容器，其它表单对象一般应该插入到表单中制作表单网页的大致步骤如下所示表单操作4.5Step1Step2在页面中插入表单在表单中插入其他表单对象使用表格等排版工具对所有对象进行调整Step3表单操作4.5表单的插入和表单的属性设置是表单定义的两个重要步骤插入表单的步骤如下所示表单操作4.5把鼠标定位在文档区中需要插入表单的位置使用【插入/表单/表单】菜单命令或点击【表单】按钮，插入后的表单在文档中以虚线显示表单操作4.5文档插入表单后，切换到代码视图，可看到表单的源代码如下：<formid="form1"name="form1"method="post"action=""></form>表单操作4.5标签<form>和</form>之间为存放表单内容的位置只能在<form>和</form>标签之间插入所有表单对象表单操作4.5插入表单后，需要进行表单属性的设置设置表单属性时，需要选中表单或把插入点放到表单内部，打开属性面板，对属性面板的各个选项进行设定属性面板的主要选项列举如下表单操作4.5表单名称动作为表单命名以识别表单在文本框中输入或者浏览处理该表单的动态页或脚本程序，用于处理表单提交的数据设置处理该表单的动态页或脚本程序的打开方式目标表单操作4.5设置表单数据传输到服务器的方法，可用默认、POST及GET3个选项方法MIME类型通常和POST方法配合使用，用于指定对提交给服务器进行处理的数据使用MIME编辑类型表单操作4.5表单CSS(CascadingStyleSheets)，译为层叠样式表，是一系列格式设置规则，用来控制Web页面内容的显示方式，是控制一个文档中某一文本区域外观的一组格式属性使用CSS设置页面格式时，可将内容与表现形式分开CSS样式表的应用4.6CSS可以一次性对若干个文档所有的样式进行控制，同HTML样式相比，使用CSS样式表的好处在于它可以同时连接多个文档，并且当CSS样式有所更新或被修改以后，所有应用了该样式表的文档都会被自动更新CSS样式表的应用4.6使用CSS样式不仅可以轻松地网页中的对象产生动态效果，同时还简化了HTML中各种繁琐的标签，使得各个标签的属性更具有一般性和通用性CSS样式甚至超越了Web页面本身的显示功能，将样式扩展到多媒体上

CSS样式的主要功能与特点如下所示CSS样式表的应用4.6功能特点1可以方便地为网页中的任何元素设置不同的背景颜色和背景图像可以精确地控制网页中各元素的位置可以为网页中各元素设置过滤器，从而产生如阴影、模糊、透明等效果可以与脚本语言结合，从而产生各种动态效果功能特点2功能特点3功能特点4CSS样式表的应用4.6由于CSS格式是HTML代码，所以网页打开的速度非常快可以更灵活地控制网页中文字的字体、颜色、大小、间距、风格和位置可以灵活地设置一段文字的行高、缩进，并可以为其加入三维效果的边框功能特点1功能特点5功能特点7功能特点6CSS样式表的应用4.6样式表的脚本语法结构是：

HTML标记{标记属性：属性值；标志属性：属性值；标志属性：属性值；……}CSS样式表的应用4.6CSS的类型重定义标签的CSS自定义CSSCSS选择器样式CSS样式表的应用4.6自定义CSS自定义样式最大的特点就是具有可选择性，可以由用户自由决定将该样式应用于哪些元素选择样式应用范围实质是在要使用样式的一对标签之间添加一个class=”classname”语句CSS样式表的应用4.6重定义标签的CSS重定义标