《网页设计与制作应用教程》课件-项目二 Adobe Dreamweaver CC 应用篇

第3版HTML5DreamweaverPhotoshopCSS3AnimateAdobeCC网页设计与制作应用教程第二部分AdobeDreamweaverCC应用篇网页设计与制作第3章

AdobeDreamweaverCC入门本章重点AdobeDreamweaverCC工作区组成站点的建立站点文件的基本操作三、AdobeDreamweaverCC入门网页设计与制作——AdobeDreamweaverCC入门3.1AdobeDreamweaverCC2018工作环境3.3站点文件的基本操作3.2站点的建立3.1AdobeDreamweaverCC2018工作环境安装DreamweaverCC2018后，首次启动Dreamweaver时，屏幕上将显示一个快速入门菜单，就三个问题的需求对Dreamweaver工作区进行个性化设置。会出现工作环境设置向导，根据“是否用过DreamweaverCC”提示选择“用过”或是“新手”，如图所示。网页设计与制作——AdobeDreamweaverCC入门随后分别对“主题”颜色、“工作区”、“新增功能”等工作区选项进行设置，选择后一切就绪，开始使用Dreamweaver。网页设计与制作——AdobeDreamweaverCC入门3.1AdobeDreamweaverCC2018工作环境工作界面组成Dreamweaver提供了一个将全部元素置于一个窗口中的集成布局。在工作区中，全部窗口和面板都被集成到一个更大的应用程序窗口中。新建或者打开一个网页文件，就会出现如图

所示的工作区界面。Dreamweaver

的工作区主界面主要包括标题栏、菜单栏、工具栏、编辑窗口、状态栏、“属性”面板和浮动面板组。3.2站点的建立

网页包含的元素有文本、图像、表格、表单、动画、视频等。如果这些元素不有效的组织管理，将使网页设计很不方便。建立站点的目的就是为了有效的组织管理设计网页所需要的各种元素。

在设计网页之前，必须先建立一个站点，它实际是一个文件夹，该文件夹存放网站所需要的所有文档材料和已经设计和的网页文件，然后通过超级链接方式将它们有效的组织起来。站点需要一个名称和存储位置也就是目录。网页设计与制作——AdobeDreamweaverCC入门创建站点站点有网络服务器中的站点（即远程站点）和本地站点两种创建形式。通常情况下，首先在本地站点上完成网站的建设，形成本地站点，然后用FTP上传至Internet服务器上，形成最终可以在Internet上浏览的远程站点。建立本地站点就是将本地主机磁盘（通常是硬盘）中的一个文件夹定义为站点，网页中的所有文档均放在该文件夹中，以便于管理。通常，在设计网页之前，应该首先建立本地站点。网页设计与制作——AdobeDreamweaverCC入门3.2站点的建立创建站点目录和文件

站点创建完成，之后的编辑和管理工作非常关键，其中包括继续创建站点目录和文件。网页文件可以事先都建立好，然后分别编辑这些网页。在建立好的站点中，有时需要建立一些文件夹，用来存放图像等有关内容。网页设计与制作——AdobeDreamweaverCC入门站点文件的基本操作

使用Dreamweaver创建网页的最基本的操作是能够完成对文件的建立和打开。网页文件的扩展名是.htm（或者html），文件的基本操作，包括创建、打开和基本管理等操作。

3.2站点文件的基本操作网页设计与制作——AdobeDreamweaverCC入门

本章首先介绍了AdobeDreamweaverCC2018的界面构成和基本工作环境。本章还介绍了在Dreamweaver编辑器中创建站点的操作方法，以及如何修改和查看站点信息等。这些内容是熟练使用Dreamweaver的基础，通过练习要很好的掌握网页文档的基本操作方法。本章小结网页设计与制作——AdobeDreamweaverCC入门描述改变面板的大小、位置的操作方法。简述属性检查器的作用。描述文件打开、存储的操作过程。创建站点的基本步骤是什么？简述站点视图的几种查看方式？创建一个个人主页站点。思考与练习网页设计与制作第4章插入基本网页元素本章重点页面属性设置插入与编辑页面基本元素创建超链接四、插入基本网页元素4.1页面属性设置4.3图像插入与编辑4.2文本插入与编辑4.4多媒体插入与编辑4.5超链接4.6应用列表4.1

页面属性设置4.1页面属性设置大多网站的页面会设置固定的色彩或图像作为背景，这些如字体、背景颜色和背景图像等外观属性特征可以通过设置网站的页面属性来控制。4.2.1在网页中插入文本文本是网页中的重要元素，在Dreamweaver的“设计”视图可以直接输入文本内容，类似在Word文档中输入文本。当然，也可以导入其他编辑器中已有的文本，从而快速创建文档内容。4.2.3插入滚动文本在网站页面中，插入滚动文字可以增强视觉流动性，突出显示文字内容。实际上，通过插入<marquee>标签可以实现该功能。4.2.2编辑文本1.标题级样式设置2.文本格式设置4.2文本插入与编辑说明:direction:设置滚动方向#的取值有left,right,up,down

，默认是left，即从右至左。bgcolor:设置滚动区域的背景色。

height:设置滚动区域的高度

。width:设置滚动区域的宽度

。scrollamount:设置每次移动速度，数值越大移动越快。scrolldelay:设置每一次滚动停顿时间，单位是毫秒（ms），时间越短滚动越快。loop：设置文字滚动次数，默认为无限次。align：设置滚动文字与屏幕的垂直对齐方式，取值top、middle、bottom。hspace：设置字幕左右空白区域。vspace：设置字幕上下空白区域。<h1align="center">学

校

简

介</h1><marqueewidth="1000">不忘初心牢记使命立德树人育警铸剑</marquee><hr>4.2文本插入与编辑4.3图像插入与编辑图像与文字一样，都是网页构成的基本元素。图像可以更好的表现主题，避免纯文本的单调，以丰富、美观的信息来吸引更多的访问者。Dreamweaver可以直接显示“GIF”、“JPEG”或“PNG”格式的图片。4.3.1插入图像1)打开网页“page406.html”，页面是准备插入图像的

半成品。或者新建一个空白网页。2)光标插入点指定在正文段落前面，单击Enter键

空出一行。选择主菜单【插入】/【image】命令，在弹出的对话框中选择图像文件名，单击“确定”按钮，则图像按原始尺寸大小插入到页面中。4.3.2编辑图像调整图像的大小

、高度和宽度等。4.4多媒体插入与编辑使用Dreamweaver可以在网页中快速插入各种类型的音频、视频、动画等多媒体控件。多媒体元素使得网页内容更加丰富多彩。这些元素添加到页面时，在Dreamweaver的编辑窗口是不能直接浏览的，它只是一个占位图标，在浏览器窗口才能听到或看到播放效果。主菜单【插入】/【HTML】中包括了各种类型的执行命令。添加音频添加视频添加Flash动画4.5超链接

所谓超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页,也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。可以说超链接是互联网技术能够得以飞速普及的关键。4.5.1超链接的分类外部链接内部链接锚记链接E-mail链接空链接脚本链接4.5.2创建超链接_blank（或者_new）将链接的文档载入一个新的、未命名的浏览器窗口(_blank即将在新标准中被废除)。_parent：将链接的文档载入该链接所在框架的父框架或父窗口。如果包含链接的框架不是嵌套框架，则所链接的文档载入整个浏览器窗口。_self：将链接的文档载入链接所在的同一框架或窗口。此目标是默认的，所以通常不需要指定它。_top：将链接的文档载入整个浏览器窗口，从而删除所有框架。4.6应用列表列表分为项目列表和编号列表两种，项目列表也称为无序列表，编号列表也称为有序列表。在“设计”视图中，鼠标直接拖拽选中所有正文文本（不含题目），然后在属性检查器中单击项目或编号列表符号。项目列表可以使用符号或图形来对没有顺序的文本进行排列，通常使用项目符号作为列表项的前缀，如圆点（

）、方块（

）等符号作为列表符号。编号列表是以数字编号来对一组文本进行排列，通常使用一种数字符号作为列表前缀，各项目之间存在顺序和级别之分。本章小结静态网页设计的基础工作不外乎是将文本、图像等信息添加组织到网页中。本章介绍了使用Dreamweaver在网页中插入各种类型页面元素的操作方法，主要包括文本和图像的插入、图像热点插入，以及超链接的创建方法。在介绍插入网页对象的操作同时，还介绍了编辑对象的操作。网页文本处理方法与哪些？简述网页表格处理方法？简述超级链接的作用和建立过程？设计一个介绍自己的网站？思考与练习网页设计与制作第5章表格和表单本章重点表格的创建与编辑表单的创建与编辑五、表格和表单5.1表格的应用5.3Spry组件5.2表单的应用5.1表格的应用表格的应用

表格是用于在HTML页上显示表格式数据以及对文本和图形进行布局的强有力的工具。表格由一行或多行组成；每行又由一个或多个单元格组成。在Dreamweaver中可以很方便地创建表格，并操作列、行和单元格。5.1.1表格的创建在“设计”视图中，将光标置于页面需要插入表格的位置，选择主菜单【插入】/【Table表格】命令，弹出“Table”表格对话框，如图所示。在表格对话框中，可以对表格大小、标题，及辅助功能等选项进行设置。行数：确定表格具有的行的数目。列数：确定表格具有的列的数目。表格宽度width：以像素为单位或按占浏览器窗口宽度的百分比指定表格的宽度。（图例中修改为百分比宽度，不管网页打开多大多小，表格总宽度按照网页的宽度比例显示）表格高度height：定义表格的高度，y为像素数或占窗口的百分比。边框粗细border：指定表格边框的宽度（以像素为单位）。单元格边距cellpadding：确定单元格边框和单元格内容之间的像素数。单元格间距cellspacing：确定相邻的表格单元格之间的像素数。5)表格内文字的对齐方式2)在“标题”部分选择一个标题选项3)在“辅助功能”部分指定选项4)表头看做一行、只不过使用的是<th>标签。在浏览器中显示时，<th>标签的文字按粗体显示，<td>标签的文字按正常字体显示。1)在“表格大小”部分中指定选项6)表格的色彩和图像背景7)跨行、跨列表项设计表格的设置5.1表格的应用表项数据的水平对齐用标签<td>的align属性。align的属性值分别为：center：表项数据的居中left：左对齐right：右对齐justify：左右调整表项数据的垂直对齐用标签<td>的valign属性实现。valign的属性值分别为：top：靠单元格顶bottom：靠单元格底middle：靠单元格中baseline：同行单元数据项位置一致在<table>、<th>、<tr>、<td>标签中，使用下面属性可以改变表格的背景和边框的色彩、添加背景图像，也可以为行和单元格改变色彩、添加背景图像。bgcolor：设置背景色彩。background：设置背景图像。bordercolor：设置表格边框的色彩。bordercolorlight：设置表格边框亮部的色彩。rules＝＂row，cols或none＂：设置表格内线的显示方法，none为无内线。对表格进行格式设置时，可以对整个表格、行、单元格的属性进行设置。表格格式设置的优先顺序如下：单元格、行、表格。跨行、跨列表项设计用<tr>、<td>、<th>标签中的colspan和rowspan属性，可以设置多行（合并行）多列（合并列）的表项。5.1表格的应用5.1.2编辑表格5.1表格的应用1.选择表格与单元格2.设置表格、单元格、行和列的属性3.在表格中插入/删除行或列4.在表格中插入对象5.合并/拆分单元格

6.嵌套表格可以将单元格拆分成任意数目的行或列，或者将多个单元格合并成为一个单元格嵌套表格是在另一个表格的单元格中的表格5.1.3数据的导入和导出在Dreamweaver中，可以将

Excel文档的完整内容插入到网页中，也可以将网页文件中数据表格导出。5.2表单的应用创建表单在“设计”视图中，选择主菜单【插入】/【表单】/【表单】命令，则窗口出现一个红色虚线框为表单域表单主要有下面一些主要属性：ID：为表单设置一个ID，在本网页中对该对象的唯一标识符。动作（Action）：编写服务器端表单处理程序。方法（Method）：定义表单数据处理的处理程序。分为GET、POST和默认等方式。其中，POST会将表单数据嵌入HTTP请求中。GET会将值附加到请求页面的URL中。默认值会使用浏览器的默认设置将表单数据发送到服务器。5.2表单的应用表单中可以添加的对象还有很多，主要作用如下：文本字段：可以接受任何文本、字母和数字类型。输入内容可设置显示为星，单行显示。文本区域：可以多行文本。复选框：在选项中允许选择多个项目。单选按钮：在选项中只允许选择一个项目。按钮：用于执行提交或取消任务。列表：列出一组可供用户选择的值。文件域：允许从磁盘上选择文件。5.3Spry组件

本节介绍Spry组件的建立和使用，属于DreamweaverCS5版本的知识。这部分内容在DreamweaverCC2017之后就不再使用。为了结合之前的版本的相关知识点，继续在本教材中保留这部分内容。如果直接使用DreamweaverCC2017之后的版本软件，则可以忽略本节知识，对应内容将在第7章“行为”中进一步体现。本章小结本章介绍的表格是网页设计中的重要页面元素，表格的创建和编辑方法灵活多样，单元格可以嵌套表格，使表格的表达形式更加丰富，对数据的表现形式也更多样，也可以实现页面布局效果。表单是动态页面设计中不可或缺的元素，表单对象及验证表单组件的创建与编辑是本章重点内容之一，设计者在表单设计时，通常要根据表单设计需求添加表单元素，并结合表格进行表单元素的布局。表格的实际用途有哪些？表单域中的对象元素有哪些？各有什么特点？除了表格布局表单元素的方法，思考还有什么布局方法可以应用在表单设计中。思考与练习网页设计与制作第6章

使用CSS美化和布局网页本章重点认识CSS熟悉CSS选择符和属性使用使用DIV+CSS进行网页布局掌握CSS的应用六、使用CSS美化和布局网页6.1初识CSS6.3创建CSS外部样式6.2用CSS样式美化页面6.4盒模型布局网页CSS(CascadingStyleSheets)层叠样式表，是W3C组织制定的网页样式设计标准，是一种用来表现HTML文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

在DIV+CSS技术时代，CSS显得格外重要，它可以将Web前端的HTML代码与页面布局、美化，以及添加一些特殊效果的代码分隔开来。这样可以更加灵活、高效地开发页面，精确指定网页元素位置，更轻松地修改和控制页面外观。6.1初识CSS6.1.1CSS特点1.将页面的内容与表示形式分离。2.控制页面的布局。3.网页体积更小。4.使浏览器成为更友好的界面。6.1初识CSS6.1.2CSS规则CSS格式设置规则由两部分组成：选择器和声明。选择器是标识已设置格式元素（如

P、H1、类名称或ID）的术语，而声明则用于定义样式元素。h1是选择器，介于大括号({})之间的所有内容都是声明。声明由两部分组成：属性和属性值，中间用英文冒号“:”连接。上述示例为h1标签创建了样式：链接到此样式的所有h1标签的文本都将是16像素大小和粗体字体。CSS的主要优点是统一表现形式，只要对一处CSS规则进行更新，则使用该定义样式的所有文档的格式都会自动更新为新样式。6.1.3CSS样式的类型1.类样式2.标签CSS样式3.IDCSS样式4.复合CSS样式

5.伪类CSS样式超链接伪类定义：a:link:定义超链接对象在没有访问前的样式。a:hover:定义当鼠标移至超链接对象上时的样式。a:active:定义当鼠标单击超链接对象时的样式。a:visited:定义超链接对象已经被访问过后的样式。6.1初识CSS6.1初识CSS6.1.4CSS基本用法将样式信息添加到一个HTML文档中，有4种基本方法：1.添加行内样式。在HTML标签中，把样式作为属性值直接定义在style中。2.在<style>标签中集中定义CSS，即定义内部样式表。

3.通过<link>标签导入外部CSS文件，即导入外部样式表。

4.通过@input命令导入外部CSS文件，即导入外部样式表。6.1.5创建CSS样式的方法6.1初识CSS直接编写代码创建CSS样式在属性检查器中创建CSS样式使用“CSS设计器”面板创建CSS样式6.1.6CSS属性说明1.类型字体大小样式行高修饰粗细变量大小颜色2.背景设定背景颜色背景图像重复附件水平位置垂直位置3.区块设定单词间距字母间距垂直对齐文本对齐文字缩进空格显示4.边框设定样式宽度颜色5.扩展设定分页光标过滤器6.2用CSS样式美化页面6.2.1创建类CSS样式6.2.2创建标签CSS样式6.2.3创建IDCSS样式6.2.4创建伪类CSS样式6.2.5创建复合CSS样式6.3创建CSS外部样式

把CSS样式放在独立的文件中，称之为外部样式表。外部样式表文件是一个文本文件，扩展名为“.css”，外部样式表文件需要与“.html”网页文件联合使用，通常以链接或导入的形式关联到网页文件中应用。

使用外部样式既可以保持网页外观的一致性，又可以极大简化设置过程，因而成为专业网站设计中普遍使用的一种方法。6.3创建CSS外部样式例：创建外部样式表，并在页面中应用样式。1)打开素材文档“page607.html”。2)在“CSS设计器”面板的“源”选项区中单击“+”按钮，在弹出的菜单中选择“创建新的CSS文件”3)随即弹出“创建新的CSS文件”对话框，如图。单击“文件”文本框后的“浏览”按钮。4)随即弹出“将样式表文件另存为”对话框，在此选择保存文件位置在站点根目录的“CSS”文件夹中，确

定文件名为“style2.css”，如图6-31所示。单击“保存”按钮。回到图6-30所示的对话框，默认添加为“链接”选项，再单击“确定”按钮。6.3创建CSS外部样式7)在“属性”选项区中设置<div>的属性。设置代码如下：8)回到源文件的“代码”视图，光标移至<body>标签后面，执行【插入】/【dov】命令，并将诗词部分内容剪切并粘贴到<div>标签对中，div{ width:400px; margin-top:50px; margin-left:666px; padding-top:20px; padding-left:10px; font-family:隶书; text-align:center;}9)执行【文件】/【保存全部】命令，将“page607.html”和“style2.css”文件进行保存。浏览页面的最终效果如图6-35所示。5)此时在“代码”视图窗口中看到的效果。在文件名标签下出现“源代码”标签和“style2.css”标签，自动切换到CSS文件编辑窗口，并且第一行默认显示为“@charset"utf-8";”，表示该文件代码为纯CSS样式表内容。6)在“CSS设计器”面板的“源”选项区中显示了“style2.css”，并在“选择器”选项区中添加“div”设置后“CSS设计器”面板内容6.4盒模型布局网页6.4盒模型概念所有的HTML页面元素都包含在一个矩形框内，这个矩形框就称为盒模型。盒模型描述了元素及其属性在页面布局中所占的空间大小，因此盒模型可以影响其他元素的位置和大小。一般来说，这些被占据的空间往往都比单纯的内容要大。盒模型是由margin（边界）、border（边框）、padding（填充）和content（内容）等几个部分组成。margin：边界也称为外边距，用来设置元素边框与相邻元素之间的距离。border：边框，内容边框线，包括边框的粗细、颜色和样式等。padding：填充也称为内边距，用来设置内容与边框之间的距离。content：内容，是盒模型中必不可少的一部分，可以放置文字、图像等。一个盒子的实际高度和宽度是由content+padding+border+margin组成的。通过width、height属性来控制宽度和高度，并且对任何一个盒子，都可以设置4边的border、margin和padding。本章小结

本章主要介绍了CSS样式功能，DIV+CSS样式布局已成为网页布局的主流方法，CSS样式可以作为网页外观布局的主要手段。本章需要读者掌握的主要知识点包括如下内容：CSS样式的概念和CSS样式类型的介绍，它在网页的排版和布局方面能够发挥巨大的作用。使用“CSS设计器”面板创建CSS样式的方法。编辑和设置CSS样式属性的方法。使用盒模型布局网页。常用的CSS样式的类型哪几种？CSS样式基本用法有哪些？能结合使用吗？简述DIV+CSS布局页面的特点。思考与练习网页设计与制作第7章行为和模版本章重点应用“行为”面板应用模板应用库添加内置行为的方法七、行为和模版7.1行为及其使用方法7.3jQuery特效7.2应用内置行为7.4应用模板7.5管理模板

网页设计通常不仅仅包含静态的文本和图像，还有很多交互式动态效果，这种效果可以通过Dreamweaver提供的又一强大功能来实现，即行为。模板是一种特殊类型的文档，它可以将具有相同版面布局的页面制作成一个模板，而后大量生成基于模板的网页。7.1行为及其使用方法行为是事件和由该事件触发的动作的组合。“事件”是触发动态效果的条件，是浏览器生成的消息，指示该页的访问者执行了某种操作。网页事件分为不同的种类：有的与鼠标相关，如鼠标放置在图像上、移出图像、单击图像等。“动作”是由预先编写的JavaScript代码组成的，这些代码最终产生动态效果。例如打开浏览器窗口、显示或隐藏层、播放声音等。“对象”、“事件”和“动作”三者关系为：对象在发生设定事件的情况下，产生相应动作。例如，对于交换图像这一行为，可以用三要素来解释：图像（对象）在鼠标放置其上时（事件），更换为另外一幅图片（动作）,一般的动作是：改变某一个对象（原来的对象或者新对象）的属性。7.1.1行为概述7.1行为及其使用方法7.1.2“行为”面板行为面板包含以下选项：显示设置事件：仅显示附加到当前对象的那些事件。事件被分别划归到客户端或服务器端类别中。显示所有事件：按字母顺序显示属于特定类别的所有事件。添加动作(+)：显示特定菜单，其中包含可以附加到当前选定元素的动作。当从该列表中选择一个动作时，将出现一个对话框，在此对话框中指定该动作的参数。删除(–)：从行为列表中删除所选的事件和动作。向上箭头和向下箭头按钮：在行为列表中上下移动特定事件的选定动作。对于不能在列表中上下移动的动作，箭头按钮将处于禁用状态。事件：显示一个下拉菜单，其中包含可以触发该动作的所有事件，此菜单仅在选中某个事件时可见（当单击所选事件名称旁边的箭头按钮时显示此菜单）。根据所选对象的不同，显示的事件也有所不同。显示事件：指定当前行为在哪个浏览器中起作用（这是“事件”菜单的子菜单）。在此菜单中进行的选择将确定“事件”菜单中显示哪些事件。7.1.3行为的应用方法1.添加行为2.更改行为7.2应用内置行为7.2.1交换图像7.2.2弹出信息7.2.3调用JavaScript7.2.4显示-隐藏元素7.2.5改变属性7.2.6转到URL7.2.7打开浏览器窗口7.2.8设置文本7.3jQuery特效7.3.1概念DreamweaverCC中增加了一系列jQuery特效，使用炫酷的jQuery特效用于创建动画过渡或者可视方式修改页面，可以让页面元素产生更灵活丰富的动态效果。Dreamweaver与jQuery相结合，无需编写任何代码，即可加特效。在“行为”面板的“效果”子菜单中有一系列命令，如图7-24所示。特效实现的方法基本一致，可以举一反三。下面以“Blind”和“Bounce”两个实例进行介绍。7.4应用模板7.4.1创建模板在DreamweaverCC中，有两种方法可以创建网页模板。一种是将现有的网页文件另存为模板，然后根据需要再进行修改；另一种是直接新建一个空白模板，在其中插入需要显示的文档内容。模板文件的扩展名是“.dwt”。

模板的制作方法与普通网页一样，只是在制作完成后要定义可编辑区。模板可以通过直接定义来创建，也可以将普通网页另存为模板，前者在实际应用中更为普遍。在插入可编辑区域之前，将要插入该区域的文档另存为模板。7.4.2创建可编辑区域7.4.3模板区域的类型7.4.4创建基于模板的网页在Dreamweaver中，创建新网页时，可以直接由模板创建新网页。前面已经完成了创建模板文件，并在模板中定义了可编辑区域，下面完成针对可编辑区域的页面内容的制作。7.5管理模板7.5.1在基于模板的文档中编辑内容7.5.2更新模板文件

在Dreamweaver中可以首先创建模板，然后创建基于模板的网页。这些网页中部分区域是不能编辑的，称为锁定区。有些区域则是可编辑的，称为可编辑区。

使用模板的最大好处就在于，当修改模板时，基于该模板创建的所有网页可以一次更新，这就大大提高了网页更新维护的效率。模板的高效性不仅在于创建网页时的批量处理，更体现在修改网页的时候。对模板进行修改之后，可以将模板的修改应用于所有基于该模板生成的网页中。本章小结

本章介绍了行为和模板功能及应用方法，读者可以通过应用行为创建具有动态效果的网页，应用模板功能实现统一的多页面效果。对于一些大中型网站，使用模板可以更好地维护网页，有利于减轻网站设计中的重复工作量，对于刚刚学习网页制作的设计者来说，可能会觉得本章的知识用处不是很大，但经过一些实践创作之后，会感到它们对读者是很有帮助的。添加行为时对象、事件和动作之间的关系是什么？结合实例解释。针对IE6.0提供的事件，说明onClick、onDrag、onMouseOver、onMouseOut事件的触发条件。模板布局与框架布局的区别有哪些？举例说明。使用模板技术制作学校各部门的宣传网页，要求导航栏和版权区域为锁定区域，其余区域为可编辑区域。思考与练习网页设计与制作第8章利用虚拟机建立动态Web站点本章要点虚拟机ASP技术SQL语言SQLServer数据库八、利用虚拟机建立动态Web站点8.1动态Web系统开发概述8.3服务器上安装配置IIS\SQLServer\Filezilla8.2虚拟机安装与部署8.5数据库结构设计与实现8.4客户端上安装配置DWCS5和SQLServer客户端8.6Web站点开发准备及规划8.1动态Web系统开发概述

动态网站，是指基于数据库进行架构的网站，有没有动画效果不作为参考标准。动态网站一般采用编程语言开发设计动态网页，通过数据库使网站具有更多自动的和高级的功能。

一般情况下，专业公司通过出租网站空间给网站所有者，提供动态网站运行环境，包括Web服务器以及支持Web服务器运行的服务器版本操作系统，以及数据库管理系统。网站所有者用户租用一定的空间，选择空间支持环境，获取IP、用户名、口令等授权信息后，在本地通过网络进行网站和信息维护。

动态Web系统通常由HTML文件、脚本代码和资源文件组成。HTML文件提供静态的网页内容。脚本代码可以嵌入到HTML文件中，也可以独立成为一个个文件。具有脚本代码的网页往往以该脚本的技术简称为后缀，如ASP文件、PHP文件或者JSP文件。资源文件一般是图片、视频、文档等等。一般的开发动态Web系统的过程如下：8.1动态Web系统开发概述8.1.1系统开发过程1、明确并细化建站需求和技术路线，收集相关素材2、准备Web服务器硬件3、安装服务器操作系统4、安装Web服务器应用程序5、安装和配置数据库管理系统6、安装和配置Web页面编辑工具7、安装和配置数据库管理客户端8、进行数据库设计9、根据需求进行Web页面设计10、测试Web系统11、上线运行8.1.2技术路线与设计规划1.技术路线2.设计规划1）WindowsXP（或者WIndows7）2）Windows2003Server安装盘（或者ISO安装文件）3）SQLServer2000安装盘（或者更高版本）4）SQLServer2000SP4补丁包5）VMwareWorkstation6安装软件（或者更高版本）6）DreamweaverCS5安装盘7）FTP服务器软件FileZilla_ServerWindowsserver+IIS+ASP+SQLServer。8.1动态Web系统开发概述8.2虚拟机安装与部署

虚拟机是指在一台物理计算机上通过虚拟技术，虚拟出来的独立的逻辑计算机。通过虚拟技术可以在现有的操作系统上虚拟出一个或多个新的子系统，这些子系统建立在正在运行的操作系统之上，同时，又拥有自己独立的硬件资源，它们之间通过虚拟网卡相互联结起来可以组成网络，从而通过网络相互访问。

在虚拟机软件中，实际存在的物理计算机称为宿主机器，虚拟出来的计算机称为虚拟机器。此处，将个人电脑安装的Win7系统为宿主机器，通过虚拟软件虚拟的Windows2003Server为虚拟机器。8.3服务器上安装配置IIS\SQLServer\Filezilla8.3.1安装