模块3 Dreamweaver CS5高级应用实训7 美化我的网页——CSS+Div布局页面3.1 CSS样式的基本操作 3.2 应
用CSS样式 3.3 AP Div的基本操作 3.4 设置AP Div的属性 3.5 AP Div在排版中的应用 3.6
CSS定位与Div布局 实训8 动态导航栏——Spry布局控件 3.7 Spry布局控件 实训9 CC的小店——行为的使用
3.8 添加行为 实训10 制作在线调查表 3.9 动态网页设计基础 3.10 Web服务器的安装与配置 3.11 插入
表单 实训11 成绩在线查询 3.12 数据库的基本操作 思考与实训3 实训7 美化我的网页——CSS+Div布局页面实训目
的1．学会CSS样式的创建、编辑和应用。2．学会 AP Div的创建和参数设置。3．学会使用CSS+Div布局和美化网页。实训7
美化我的网页——CSS+Div布局页面index.html的“拆分”视图中的代码实训7 美化我的网页——CSS+Div布局页面
用Div写入基本结构后的“拆分”视图横幅图片 侧边
栏 页面主体 实训
7 美化我的网页——CSS+Div布局页面完善banner层后的“拆分”视图实训7 美化我的网页——CSS+Div布局页面在l
eftbar层中插入图片和文字后的“拆分”视图实训7 美化我的网页——CSS+Div布局页面添加#leftbar和#leftba
r p样式后的“拆分”视图实训7 美化我的网页——CSS+Div布局页面在content层中插入文字后的“拆分”视图实训7 美
化我的网页——CSS+Div布局页面添加#content、#content p和#content h4样式后的“拆分”视图实训7
美化我的网页——CSS+Div布局页面添加#footer样式后的“拆分”视图实训7 美化我的网页——CSS+Div布局页面Di
v+CSS布局网页效果图实训7 美化我的网页——CSS+Div布局页面在设计网页时，常需要对网页中各种对象的属性进行设置，通常网
站中许多网页内会有很多相同属性的对象，例如相同颜色、大小、字体的文字，同样粗细的图像边框等。如果对这些相同的元素逐一设置，会大大增
加工作量，而且修改起来也很烦琐。为了简化这项工作，可以使用CSS样式表，非常灵活并更好地控制页面的确切外观，可以对页面布局、背景、
字体大小、颜色、表格等属性进行统一的设置，然后再应用于页面中各个相应的对象。CSS（Cascading Style Sheet，层
叠样式表）技术是一种格式化网页的标准方式，它通过设置CSS属性使网页元素对象获得不同的效果。在定义了一个CSS样式后，可以将它应用
于网页内不同的元素，使这些元素具有相同的属性。在修改CSS样式后，所有应用了该样式的网页元素的属性也会随之修改。3.1 CSS样
式的基本操作默认情况下，Dreamweaver CS5使用CSS设置文本格式。用户使用“属性”面板或菜单命令设置文本样式时，将自动
创建CSS样式，这些样式被嵌入在当前文档的头部。对选中的文本进行字体、大小和颜色属性设置后，系统自动打开“新建CSS规则”对话框。
使用这种方式创建CSS样式，操作简单，但创建的样式只能嵌入到当前文档中，且功能有限。“CSS样式”面板是一个比属性面板功能更为强大
的编辑器，它显示为当前文档定义的所有CSS样式，而不管这些样式是嵌入在文档中还是在外部样式表中。使用“CSS 样式”面板是创建和编
辑CSS的最主要工具，使用“CSS样式”面板创建的样式，不仅可以嵌入到当前文档，还可以形成一个样式文件应用到其他页面中。3.1
CSS样式的基本操作1．打开“CSS样式”面板可以使用“CSS样式”面板查看、创建、编辑和删除CSS样式，并且可以将外部样式表附加
到文档中。3.1 CSS样式的基本操作2．使用“CSS样式”面板创建CSS样式3.1 CSS样式的基本操作3．定义CSS样式的
属性“CSS规则定义”对话框包括类型、背景、区块、方框、边框、列表、定位和扩展8个选项。3.2 应用CSS样式1．编辑CSS样式
3.2 应用CSS样式2．应用CSS样式CSS样式被定义后，可以将这些CSS样式应用于网页中的文本、图像等对象，对于“标签”和“
高级”样式，样式定义后将直接被应用到页面中相应的对象中，而“类”样式则必须选择对象并应用后才会生效。3．从选定内容删除类样式① 选
择要从中删除样式的对象或文本。 ② 在属性面板“样式”列表或“类”列表中选择“无”选项。4．删除CSS样式在“CSS样式”面板中，
选中要删除的样式，单击“删除样式”按钮 或按【Delete】键即可将样式删除。5．重命名CSS样式3.2 应用CSS样式6．链接
外部CSS样式表 3.3 AP Div的基本操作AP Div类似于Dreamweaver CS3中的层，可以把它视为一种用来插
入各种网页对象、可自由精确定位和容易控制的容器。在AP Div中可以嵌套其他的AP Div，而且可以重叠、可以控制对象的位置和内容
，从而实现网页对象的重叠和立体化等特效。1．创建AP Div2．设置AP Div的默认属性3．选择AP Div的方法4．调整AP
Div的大小5．调整AP Div的位置6．对齐AP Div3.4 设置AP Div的属性AP Div的属性面板3.5 AP D
iv在排版中的应用利用AP Div元素面板可以对AP Div的名称、可见性、嵌套关系和层叠顺序等属性进行设置。选择“窗口→AP元素
”命令，或按快捷键【F2】均可以打开“AP元素”面板。3.5 AP Div在排版中的应用1．改变AP Div的层叠顺序AP Di
v可以层叠在一起，其位置由Z值决定，Z值越大，AP Div越靠上。要改变AP Div的层叠顺序，可使用以下方法。① 选中AP Di
v，在属性面板的“Z轴”框中直接输入Z值。② 在“AP元素”面板中，使用鼠标直接拖动AP Div到指定位置。③ 在“AP元素”面板
中，单击AP Div的Z值，直接输入新的Z值。2．设置AP Div的可见性3.5 AP Div在排版中的应用3．创建嵌套AP D
iv嵌套AP Div指一个AP Div包含在另一个AP Div中，可将AP Div组织在一起，嵌套AP Div可设置为继承父AP
Div的可见性，并且和父AP Div一起移动。 3.5 AP Div在排版中的应用4．表格与AP Div的相互转换（1）AP
Div转换为表格（2）表格转换为AP Div3.6 CSS定位与Div布局网页中的各种元素都必须有自己合理的位置，从而搭建出整个
页面的结构。本节围绕CSS定位的几种原理方法，介绍使用CSS+Div对页面布局的常用方法。1．盒子模型一个盒子模型由content
（内容）boder（边框）padding（间隙）margin（间隔）等4个部分组成。2．元素的定位（1）Float定位（2）Pos
ition定位（3）Z-index空间位置3.6 CSS定位与Div布局3．CSS+Div布局的常用方法（1）使用Div对页面整
体规划（2）设计各块的位置（3）使用CSS定位在对页面采用CSS+Div布局时，通常都需要绘制页面的框架图，至少做到心中有图纸，这
样才能有的放矢，合理地控制页面中的各个元素。实训8 动态导航栏——Spry布局控件实训目的 1．学会Spry布局控件的编辑、应
用。2．学会使用Spry布局控件创建动态导航栏的方法。实训8 动态导航栏——Spry布局控件spry4.html效果图3.7
Spry布局控件Spry框架是一组用标准HTML、CSS和JavaScript编写的可重用控件。在利用Dreamweaver CS
5制作网页时，可以方便地插入这些控件（采用最简单的HTML和CSS代码），然后设置控件的样式。常用的Spry布局控件有Spry菜单
栏、Spry选项卡式面板、Spry折叠式、Spry可折叠面板。Spry布局控件都与唯一的CSS和JavaScript文件相关联。C
SS文件中包含设置构建样式所需的全部信息，而JavaScript文件则赋予控件功能。使用Dreamweaver CS5界面插入控件
时，Dreamweaver CS5会自动将这些文件链接到页面，以便控件中包含该页面的功能和样式。与给定控件相关联的CSS和Java
Script文件根据该控件命名，因此，很容易判断哪些文件对应于哪些控件（例如：与折叠控件关联的文件称为SpryAccordion.
css和SpryAccordion.js）。在已保存的页面中插入控件时，Dreamweaver CS5会在站点中创建一个SpryA
ssets目录，并将相应的CSS和JavaScript文件包含其中。3.7 Spry布局控件1．Spry菜单栏2．Spry选项卡
式面板3．Spry折叠式4．Spry可折叠面板实训9 CC的小店——行为的使用实训目的 1．学会行为的创建、编辑和应用。2．学
会使用行为创建动感效果网页的方法。实训9 CC的小店——行为的使用添加行为后的效果3.8 添加行为行为是Dreamweaver
CS5预置的JavaScript程序库。每个行为包括一个动作和一个事件，其中，事件指引发动作产生的条件，即触发动态效果的原因，例
如鼠标移到某对象上，单击某对象等。动作指事件发生后计算机系统执行的一个动作，即最终完成的动态效果，例如打开浏览器窗口、弹出信息、播
放声音等。Dreamweaver CS5采用了“行为”面板来完成行为中动作和事件的设置，从而实现动态效果。1．“行为”面板2．添加
行为3．更改或删除行为4．动作名称及其作用5．事件名称及其作用实训10 制作在线调查表实训目的 1．学会Web服务器的安装与配
置。2．学会表单的创建与属性设置。实训10 制作在线调查表3.9 动态网页设计基础1．静态网页和动态网页在网站设计中，网页根据
其生成方式不同，分为静态网页和动态网页。（1）静态网页静态网页指纯粹HTML格式的网页，是网站建设初期经常采用的一种形式。网页设计
者把内容设计成静态网页，向每位浏览者发送完全相同的页面，访问者只能被动地浏览网页内容，不涉及任何交互活动。静态网页文件的扩展名一般
是htm、html、shtml、xml等。（2）动态网页动态网页是采用动态网站技术（如ASP、JSP、PHP）生成的网页，以数据库
技术为基础，根据浏览者的输入信息提供不同的页面，与网页上的各种动画、滚动字幕等视觉上的“动态效果”没有直接关系。根据使用服务器技术
不同，动态网页文件的扩展名一般为aspx、asp、jsp、php等。3.9 动态网页设计基础2．动态网页的特征① 动态网页一般以
数据库技术为基础，可以大大降低网站维护的工作量。② 采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、在线调查、后台
管理等。③ 动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页。④ 采用动态网页的网站在
进行搜索引擎推广时需要做一定的技术处理才能适应搜索引擎的要求。3.10 Web服务器的安装与配置网站要在服务器平台下运行，离开一
定的平台，动态交互式网站就不能正常运行。要将本地计算机设置为Web服务器，必须在计算机上安装能够提供Web服务的应用程序，对于开发
ASP面来讲，安装IIS是最好的选择。IIS的英文全称是“Internet Information Server”，中文含义是因特
网信息服务。它是一种网页服务组件，其中包括Web服务器、FTP服务器和SMTP服务器等，分别提供网页浏览、文件传输和邮件发送等服务
。3.10 Web服务器的安装与配置1．安装IISIIS的作用是将客户端与服务器端进行连接，当访问者在浏览器中发出一个请求时，这
个请求通过网络发送到服务器，然后服务器再将它交给IIS处理，并根据请求的文件进行相应的处理。2．配置IISIIS安装完成后，必须对
其进行配置才能正常使用。3.11 插入表单表单是Internet用户和服务器之间进行信息交流的一种重要工具，它将用户信息收集起来
并提交给Web服务器上特定的程序进行处理。表单应用非常广泛，如制作网络调查、博客论坛、留言板、用户注册和网络购物等。1．表单的组成
一个完整的表单由两部分组成：表单对象和应用程序。其中表单对象就是HTML源代码，起描述作用；应用程序是服务器和客户端的交互，通过它
们实现对用户信息的处理，不使用处理脚本或应用程序就不能搜集表单数据。一个完整的表单对象有三个基本组成部分。① 表单标签：包含了处理
表单数据所用CGI程序的URL，以及数据提交到服务器的方法。多数情况下，通常将表单标签称为表单。 ② 表单域：包含了文本字段、密码
字段、隐藏域、文本区域、复选框、单选按钮、列表/菜单和文件域等。 ③ 表单按钮：包括提交按钮、重置按钮和普通按钮，用于将数据传送到
服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。3.11 插入表单3.11 插入表单2．
插入表单创建一个表单对象前应先插入一个表单，用于确定表单的范围，所有的表单对象都应建立在表单中。要插入表单，首先将光标先定位到要插
入表单的位置，然后使用以下操作之一。① 选择“插入→表单→表单”命令。② 单击“插入”面板“表单”类别中的表单按钮 。插入的表单在
文档窗口中以红色虚线表示。如果没有看到所创建的表单边框，选择“查看→可视化助理→不可见元素”命令将边框线显示出来。3.11 插入
表单3．表单属性设置单击表单轮廓线，或从文档窗口左下角的标签选择器中选择“”标签，选中表单标签，对应的表单
属性面板如图所示。4．插入文本字段文本字段是一种基本的表单对象，可以在文本字段中输入简单文本。文本字段可以接受文本、字母或数字等内
容，输入的内容可以显示为单行、多行或密码形式。3.11 插入表单5．插入文本区域文本区域是一种特殊的文本字段，可以输入多行文本，
也可以显示多行文本，创建方法和文本字段基本相同。① 光标定位到要插入文本区域的位置，选择“插入→表单→文本区域”命令，或单击“插入
”面板“表单”类别中的“文本区域”按钮 。② 弹出“输入标签辅助功能属性”对话框，可以用来为插入的文本区域添加标签，如果无须设置文
本区域标签，可直接单击“取消”按钮。选中文本区域，显示文本区域属性面板。3.11 插入表单6．插入复选框复选框为用户提供一组选项
，允许用户从中选择一个或多个选项。① 将光标定位到要插入复选框的位置，选择“插入→表单→复选框”命令，或单击“插入”面板“表单”类
别中的“复选框”按钮 ② 弹出“输入标签辅助功能属性”对话框，可以用来为插入的复选框添加标签，如果无须设置可直接单击“取消”按钮。
选中复选框，出现复选框“属性”面板。3.11 插入表单7．插入单选按钮单选按钮通常成组出现，由两个或多个共享同一名称的按钮组成，
用户只能从一组单选按钮中同时选择一个按钮。① 将光标定位到要插入单选按钮的位置，选择“插入→表单→单选按钮”命令，或单击“插入”面
板“表单”列表中的“单选按钮”按钮 。② 弹出“输入标签辅助功能属性”对话框，可以用来为插入的单选按钮添加标签，如果无须设置可直接
单击“取消”按钮。选中单选按钮，出现单选按钮“属性”面板。3.11 插入表单8．插入单选按钮组插入一组单选按钮时，可以使用单选按
钮组来完成，减少了为每个单选按钮设置相同名称的麻烦。插入单选按钮组，具体操作步骤如下。① 选择“插入→表单→单选按钮组”命令，或单
击“插入”面板“表单”列表中的“单选按钮组”按钮 。② 打开“单选按钮组”对话框。在“名称”文本框中输入单选按钮名称，在“标签”和
“值”对应行中分别输入单选按钮的标签文本及选定值，完成设置后，单击“确定”按钮。3.11 插入表单9．插入选择（列表/菜单）选择
（列表/菜单）以列表框的形式提供多个选项供用户选择，用户可以从中选择一个或多个选项，根据显示方式的不同可将其分为两类：列表和菜单。
① 将光标定位于要插入选择（列表/菜单）的位置，选择“插入→表单→选择（列表/菜单）”命令，或单击“插入”面板“表单”类别中的“选
择（列表/菜单）”按钮 。② 选择刚插入的“选择（列表/菜单）”，在“属性”面板中单击 按钮，弹出“列表值”对话框。③ 单击“添加
“按钮 ，表示在列表框中添加一个选项，在“项目标签”和“值”对应的行中输入标签文本及提交值，同样的操作，再添加其他选项，设置完毕后
单击“确定”按钮。3.11 插入表单10．插入文件域通过文件域，用户将本地计算机中的文件作为表单数据上传到服务器，如提交照片、上
传资料等。① 将光标定位到表单域中要插入文件域的位置，选择“插入→表单→文件域”命令，或单击“插入”面板“表单”类别中的“文件域”
按钮 。② 弹出“输入标签辅助功能属性”对话框，可以用来为插入的文件域添加标签，如果无须设置可直接单击“取消”按钮。选中文本域，打
开文件域“属性”面板。3.11 插入表单11．插入按钮使用按钮可将表单数据提交到服务器，或者重置表单，也可以执行其他已在脚本中定
义的处理任务。 ① 将光标定位于要插入按钮的位置，选择“插入→表单→按钮”命令，或单击“插入”面板“表单”类别中的“按钮”按钮 。
② 选中按钮，打开按钮“属性”面板。3.11 插入表单12．检查表单Dreamweaver CS5提供了检查表单元素内容正确性的
功能，此功能是通过JavaScript脚本来完成的。在“行为”面板中存放着一组自带的JavaScript脚本，可以帮助检查表单元素
内容的正确性。“检查表单”可以检查文本域的内容，以确保用户输入有效的数据。若包含无效数据，则自动会给予提示，并要求用户重新填写，直
到输入的数据有效时才会接收。实训11 成绩在线查询实训目的 1．学会数据库的创建与连接。2．学会数据库记录的插入与查询。实训1
1 成绩在线查询3.12 数据库的基本操作动态网页一般以数据库技术为基础，数据库是结构数据的集合，结构化指的是把数据按照一定逻
辑层次存放，使数据的管理变得容易，并使数据的一致性得到保证。利用数据库对数据进行管理，可以使用户对有关数据的查询变得更加容易和快捷
。常见的数据库包括Oracle、SQL Server、Access、MySQL等，其中Access是Office系列办公软件的重要组成部分，是一种关系型数据库管理系统，Access配置简单、移植方便、易学易用，适合小型网站。3.12 数据库的基本操作1．创建数据库（1）创建空数据库（2）创建数据表表是用来存储和管理数据的，是数据库的基本对象，是创建其他对象的基础，在表中有字段、字段值、记录和值。2．创建数据库连接创建了数据库以后，就可以实现Dreamweaver CS5与数据库的连接。动态页面最主要就是结合后台数据库自动更新网页，任何内容的添加、删除、修改、检索都是建立在连接数据库的基础上。（1）定义系统DSN数据库创建后，需要设置数据源DSN来确定数据库所在的位置及数据库相关的属性，从而在Web应用程序和数据库之间建立ODBC连接，让服务器识别数据库的位置及其属性。（2）建立系统DSN连接在定义一个系统DSN后，就可以在Dreamweaver CS5中使用该数据源创建数据库连接。3.12 数据库的基本操作3．向数据库插入记录4．查询数据库中的记录在查询记录之前，必须先创建一个记录集。记录集指通过查询从数据库中得到的数据的集合，它可以是一个完整的数据库表，也可以只包括表的部分行或列。5．验证用户登录 |
|
