网页制作PPTch4.ppt

第4章 表单、CSS样式表和命令•4.1 案例10 “校园风貌——校园留言簿1”网页•4.2 案例11 “校园风貌——校园留言簿2”网页 •4.3 案例12 定义CSS样式表 4.1 案例10 “校园风貌——校园留言簿1”网页•案例效果•“校园风貌——校园留言簿1”是一个留言网页利用Dreamweaver软件提供的表单功能，实现访问者和网站之间的交流下面通过详细的步骤来介绍制作这个网页的过程4.1 案例10 “校园风貌——校园留言簿1”网页•设计过程•1．新建“案例9.html”网页•2．插入表单•3．插入表格•4．设置表格•5．插入表格•6．设置表格•7．保存并预览 4.1 案例10 “校园风貌——校园留言簿1”网页•相关知识•1．表单域和插入表单对象•（1）表单域•在 Dreamweaver 中，执行“插入”→“表单”→“表单”命令，如图4-31所示，或者通过从下图显示的“插入”（表单）工具栏中单击“表单”按钮，即可在窗口中插入表单域•红线虚框内的区域即为表单域，所有的表单对象都要插入到该红线框内，这样服务器才能正确地处理用户所填写的信息•如果执行插入表单域的操作后，在窗口中仍看不见表单域，则可执行“查看”→“可视化助理”→“不可见元素”命令，因为表单域是不可见元素。

4.1 案例10 “校园风貌——校园留言簿1”网页•相关知识•1．表单域和插入表单对象•（2）表单对象•在Dreamweaver 中，表单输入类型称为表单对象用户可以通过“插入”→“表单”菜单命令，从如图4-31所示的级联菜单中选择所需的对象进行插入操作；也可以在如图4-32所示的“插入”栏中的“表单”选项卡中直接单击表单对象按钮来插入表单对象•“表单”按钮 单击该按钮，在文档中插入表单任何其他表单对象，如文本域、按钮等，都必须插入表单之中，这样所有浏览器才能正确处理这些数据•“文本字段”按钮 单击该按钮，在表单中插入文本域文本域可接受任何类型的字母数字项输入的文本可以显示为单行、多行或者显示为项目符号或星号（用于保护密码）4.1 案例10 “校园风貌——校园留言簿1”网页•相关知识•1．表单域和插入表单对象•（2）表单对象•“隐藏域”按钮 单击该按钮，可以在表单域中插入一个可以存储用户数据的域使用隐藏域可以存储用户输入的信息，如姓名、电子邮件地址或偏爱的查看方式等，以便该用户下次访问站点时可以再次使用这些数据•“文本区域”按钮 单击该按钮，可以在表单域中插入文本区域，在其中可以输入多行文字。

•“复选框”按钮 单击该按钮，可以在表单域中插入复选框复选框允许在一组选项中选择多项，用户可以选择任意多个适用的选项•“单选按钮”按钮 单击该按钮，可以在表单域中插入单选按钮单选按钮代表互相排斥的选择选择一组中的某个按钮，就会取消选择该组中的所有其他按钮例如，用户可以选择“是”或“否”4.1 案例10 “校园风貌——校园留言簿1”网页•相关知识•1．表单域和插入表单对象•（2）表单对象•“单选按钮组”按钮 单击该按钮，可以在表单域中插入共享同一名称的单选按钮的集合•“列表/菜单”按钮 单击该按钮，可以在表单域中插入列表/菜单列表”选项在滚动列表中显示选项值，并允许用户在列表中选择多个选项菜单”选项在弹出式菜单中显示选项值，而且只允许用户选择一个选项•“跳转菜单”按钮 单击该按钮，可以在表单域中插入可导航的列表或弹出式菜单跳转菜单允许您插入一种菜单，在这种菜单中的每个选项都链接到文档或文件请参见创建跳转菜单•“图像域”按钮 单击该按钮，可以在表单域中插入图像可以使用图像域替换“提交”按钮，以生成图形化按钮4.1 案例10 “校园风貌——校园留言簿1”网页•相关知识•1．表单域和插入表单对象•（2）表单对象•“文件域”按钮 。

单击该按钮，可以在表单域中插入空白文本域和“浏览”按钮文件域使用户可以浏览到其硬盘上的文件，并将这些文件作为表单数据上传•“按钮”按钮 单击该按钮，可以在表单域中插入文本按钮按钮在单击时执行任务，如提交或重置表单可以为按钮添加自定义名称或标签，或者使用预定义的“提交”或“重置”标签之一•“标签”按钮 单击该按钮，可以在表单域中给表单加上标签，以形式开头和结尾•“字段集”按钮 单击该按钮，可以在表单域中添加一个字段集的同时在HTML源代码中添加标签

该标签是表单元素逻辑组的容器标签，在其中可以继续插入单选按钮、复选框、图像以及文件域等对象4.1 案例10 “校园风貌——校园留言簿1”网页•2．设置文本字段的属性•文本字段有文本域和文本区域两种单击“插入”（表单）工具栏中的 “文本域”按钮或“文本区域”按钮，即可在表单域中添加文本域或文本区域，例如在文档窗口中添加3个文本字段•文本字段“属性”面板中各个参数的含义•文本域指定文本的名称，是表单识别该文本域的唯一标识该名称中不能包含空格或特殊字符，可以使用字母、数字和下划线的任意组合。

•字符宽度设置域中最多可以显示的字符个数•最多字符数设置单行文本域中最多可以输入的字符个数如果将该文本框处保留空白，用户则可输入任意数量的文本如果文本超过域的字符宽度，文本将滚动显示如果输入超过了最大字符数，表单则会发出警告指定文本字段为单行、多行还是密码域•初始值指定在首次载入表单时域中显示的值设置多行文本域的高度指定用户输入的信息较多，无法在定义的文本区域内显示时，如何显示用户输入的内容选择“关闭”或“默认”选项，可防止文本换行到下一行，当用户输入的内容超过文本区域的右边界时，文本将向左侧滚动选择“虚拟”选项，可在文本区域中设置自动换行，当用户输入的内容超过文本区域的右边界时，文本换行到下一行；当提交数据进行处理时，自动换行并不应用于数据，数据作为一个字符串提交选择“实体”选项，在文本区域可设置自动换行，当提交数据进行处理时，也对这些数据设置自动换行可以将CSS规则应用于对象4.1 案例10 “校园风貌——校园留言簿1”网页•相关知识•3．设置复选框和单选按钮的属性•（1）设置复选框的属性•复选框的“属性”面板中的各个参数的含义如下：•复选框名称给复选框命名，复选框的名称是表单识别该复选框的唯一标识。

•选定值设置复选框被选中时的取值当用户提交表单时，该值被传送给服务器端应用程序•初始状态设置首次载入表单时复选框是已选中还是未选中4.1 案例10 “校园风貌——校园留言簿1”网页•相关知识•3．设置复选框和单选按钮的属性•（2）设置单选按钮的属性•下面以图4-1所示的校园留言簿中的“性别”为例介绍单选按钮的设置方法在窗口中选择一个单选按钮，在“属性”面板的“单选按钮”和“选定值”文本框的默认值为“radiobutton”， 用户可以自行设定参数，然后在“初始状态”组合框中选中“未选中”单选按钮 •单选按钮的“属性”面板中的各个参数的含义如下：•单选按钮名称给单选按钮命名，该名称是表单识别该单选按钮的唯一标识•选定值设置该单选按钮被选中时发给服务器的值•初始状态确定在浏览器中载入表单时该单选按钮是否被选中4.1 案例10 “校园风貌——校园留言簿1”网页•相关知识•按钮是表单中非常重要的一个表单对象，如果没有按钮的话，就不会把表单中的数据传送出去按钮属性的设置如下：•按钮名称给按钮命名，按钮名称是表单识别该按钮的唯一标识提交”和“重置”是两个保留名称，“提交”通知表单将表单数据提交给处理应用程序脚本，“重置”将所有的表单域重置为初始值。

•值指定显示在按钮上的文本在Dreamweaver 8中默认的值为“提交”，用户也可以自行设置文字内容指定按钮被单击时发生的动作共有3个单选按钮提供选择：选中“提交表单”单选按钮，当鼠标单击该按钮时，则将表单数据提交给处理程序或脚本；选中“重设表单”单选按钮，当鼠标单击该按钮时，则将自动地恢复所有表单对象的初值；选中“无”单选按钮，当鼠标单击该按钮时不发生任何动作4.1 案例10 “校园风貌——校园留言簿1”网页•相关知识•5．设置列表/菜单和文件域的属性•（1）设置列表/菜单的属性•列表/菜单的属性设置如下：•列表/菜单为该菜单指定一个表单能够识别的惟一标识指定该菜单是单击时下拉的菜单，还是显示一个列有项目的可滚动列表如果用户希望表单在浏览器中显示时仅有一个选项可见，则选中“菜单”单选按钮；如果用户希望表单在浏览器中显示时列出部分或全部的选项，或者允许用户选择多个菜单项，则选中“列表”单选按钮•高度（仅“列表”类型）设置菜单中显示的项数•选定范围指定用户是否可以从列表中选择多个项•初始化时选定设置列表中默认的菜单项单击列表中的一个或多个菜单项即可4.2 案例11 “校园风貌——校园留言簿2”网页 •相关知识•5．设置列表/菜单和文件域的属性•文件域的属性设置如下：•文件域名称。

指定文件域的名称，该名称是表单识别文件域的惟一标识•字符宽度指定该域最多显示的字符数•最多字符数指定域中最多可以容纳的字符数如果用户通过单击“浏览”按钮来确定文件，文件名和路径则可超过指定的“最多字符数”的值但是如果用户直接在文本框中输入文件名和路径，那么文件域仅允许输入“最多字符数”值所指定的字符数4.2 案例11 “校园风貌——校园留言簿2”网页 •案例效果•“校园风貌——校园留言簿2”是以“校园风貌——校园留言簿1”为基础，加上Dreamweaver提供的表单的图像域和隐藏域功能制作而成下面通过详细的步骤来介绍制作这个网页的过程4.2 案例11 “校园风貌——校园留言簿2”网页 •设计过程•1．拆分单元格•2．插入隐藏域•3．插入图像域•4．修改“重置留言”按钮•5．保存并预览 4.2 案例11 “校园风貌——校园留言簿2”网页 •相关知识•1．设置图像域的属性•图像域的属性设置如下：•图像区域指定图像域的名称，该名称是表单识别图像域的惟一标识•源文件指定图像源文件的路径用于输入描述性文本，如果该图像在浏览器中载入失败就将显示这些文本设置对象的对齐属性• 按钮。

启动默认的图像编辑器并打开该图像文件进行编辑，如果用户的电脑上安装了Fireworks 8，系统就会打开Fireworks 8对图像进行编辑4.2 案例11 “校园风貌——校园留言簿2”网页 •相关知识•2．设置隐藏预的属性•单击“插入”（表单）工具栏中的“隐藏域”按钮 在窗口中添加一个隐藏域选中隐藏域，在“属性”面板的“隐藏区域”文本框中输入“hiddenfield”，在“值”文本框中可以指定其值4.3 案例12 定义CSS样式表 •案例效果•CSS（Cascading Style Sheets，层叠样式表）是一种设计网页样式的工具目前，Internet Explorer 4.0、Netscape Navigator 4.0或更高版本的浏览器都能正确地显示带有CSS样式的网页使用CSS样式不仅可以轻松地让网页中的对象产生动态的效果，同时还简化了HTML中各种繁琐的标签，使得各个标签的属性更具有一般性和通用性4.3 案例12 定义CSS样式表 •设计过程 4.3 案例12 定义CSS样式表 •相关知识•1．新建 CSS规则•在Dreamweaver 8中，“CSS样式”面板被集成到浮动面板中，处于浮动面板的最上方，且处于隐藏状态。

打开“CSS样式”面板的方法有3种：•执行“窗口”→“CSS样式”命令；•使用功能组合键“Shift+F11”；•单击“属性”面板中 的按钮4.3 案例12 定义CSS样式表 •相关知识•1．新建 CSS规则•“CSS样式”面板中各个按钮的具体含义如下：•“全部”按钮 单击该按钮，显示当前文档中定义的所有的CSS规则•“正在”按钮 单击该按钮，显示选定的CSS样式的详细属性•“显示类别视图”按钮 单击该按钮，所选样式的属性区域中的各个属性将以类别的形式显示出来•“显示列表视图”按钮 单击该按钮，所选样式的属性区域中的各个属性将以列表的形式显示出来•“只显示设置属性”按钮 仅显示那些已进行设置的属性•“附加样式表”按钮 用于在HTML文档中链接一个外部的CSS文件•“新建CSS规则”按钮 用于创建新的CSS样式•“编辑样式”按钮 用于编辑现有的CSS样式•“删除CSS规则”按钮 用于删除(“)CSS样式”面板中选中的规则4.3 案例12 定义CSS样式表 •相关知识•（2）新建 CSS规则•创建CSS样式可以分为3种,即创建自定义CSS样式（“类（可应用于任何标签）”）、重定义HTML标签（“标签（重新定义特定标签的外观）”）和使用CSS选择器（“高级（ID、伪类选择器）”）。

•创建自定义CSS样式（“类（可应用于任何标签）”）•重定义HTML标签（“标签（重新定义特定标签的外观）”）•该类型用于重新定义特定的HTML标签的默认格式设置，完成设置后不需进行任何操作就可以应用到重定义的网页中•使用CSS选择器（高级（ID、伪类选择器））4.3 案例12 定义CSS样式表 •相关知识•2．设置CSS样式表的属性•在Dreamweaver 8中CSS样式表的属性共分为8类：类型、背景、区块、方框、边框、列表、定位和扩展•（1）类型•“类型”选项主要用于定义网页中文本的字体、颜色和字体风格等用于设置该样式的字体样式用于设置文本的大小用于对字体应用特定的粗体量指定“正常”、“斜体”或者“偏斜体”作为字体样式默认的设置是“正常”用于设置文本的小型大写字母变体用于设置文本所在行的高度•大小写用于将所选内容的每个单词的首字母大写或者将文本设置为全部大写或小写用于设置文字的修饰效果，如下划线、删除线和使文本闪烁等用于设置文本的颜色4.3 案例12 定义CSS样式表•相关知识•2．设置CSS样式表的属性•（2）背景•“背景”选项主要用于对背景元素进行一些高级设置•对话框中各个参数的定义如下：•背景颜色。

用于设置元素的背景颜色•背景图像用于设置元素的背景图像用于设置是否以及如何重复背景图像用于设置背景图像是固定在其原始位置还是随内容一起滚动•水平/垂直位置用于设置背景图像相对于元素的初始位置这可以用于将背景图像与页面中心垂直或水平对齐如果“附件”属性为(“)固定”，位置则相对于“文档”窗口而不是元素4.3 案例12 定义CSS样式表•相关知识•2．设置CSS样式表的属性•（3）区块•“区块”选项主要用于控制块中内容的间距、对齐方式和文字缩进等•对话框中各个参数的定义如下：•单词间距用于设置单词之间的距离选择“正常”选项时，系统根据默认的设置来设定单词之间的距离；选择“值”选项时，可以通过在文本框中输入数值，并在右侧的下拉列表中选择单位的办法设置单词之间的距离•字母间距用于设置字母之间的距离选择“正常”选项时，系统根据默认的设置来设定字母之间的距离；选择“值”选项时，可以通过在文本框中输入数值，并在右侧的下拉列表中选择单位的办法设置单词之间的距离•垂直对齐用于设置文本或图像相对于其父级元素在垂直方向的对齐方式下拉列表中有“基线”、“下标”、“上标”、“顶部”、“文本顶对齐”、“中线对齐”、“底部”、“文本底对齐”和“值”等9种对齐方式。

4.3 案例12 定义CSS样式表•相关知识•2．设置CSS样式表的属性•（3）区块•文本对齐用于设置文本的对齐方式，有“左对齐”、“右对齐”、“居中”和“两端对齐”等4种对齐方式•文字缩进用于设置文本的缩进程度用于设置文档中处理空格的方式，下拉列表中3个选项的含义如下：•“正常”：按正常方法处理空格，即多个空格会被当作一个空格处理；•“保留”：保留原代码中所有的空格形式；•“不换行”：当文档中的文本过长时不会自动换行，若想换行则必须使用换行标记用于设置区块的显示方式4.3 案例12 定义CSS样式表•相关知识•2．设置CSS样式表的属性•（4）方框•“方框”选项主要用于控制元素在页面上的放置方式的标签和属性的设置•对话框中各个参数的定义如下：•宽/高用于设置方框的宽度和高度用于设置块元素的浮动效果下拉列表中3个选项的含义如下：•“左对齐”：将元素放到页面的左边空白处；•“右对齐”：将元素放到页面的右边空白处；•“无”：对页面元素不使用浮动样式用于清除设置的浮动效果，“左对齐”：不允许分层出现在元素的左边；“右对齐”：不允许分层出现在元素的右边；“两者”：元素的左边和右边都不能出现分层；“无”：允许分层出现在元素的侧面。

•填充用于设置元素内容与元素边框之间的距离分别在“上”、“下”、“左”、“右”下拉列表中输入数值，并在右侧的下拉列表中选择相应的单位，即可完成设置用于设置一个元素的边框与另一个元素之间的距离4.3 案例12 定义CSS样式表•相关知识•2．设置CSS样式表的属性•（5）边框•“边框”选项主要用于定义元素周围边框的设置•对话框中各个参数的定义如下：•样式用于设置边框的外观用户可以分别在“上”、“下”、“左”、“右”下拉列表中选择边框格式用于设置边框的粗细具体的设置方法与“样式”类似用于设置各个边框的颜色•（6）列表•“列表”选项主要用于为列表标签定义列表设置•对话框中各个参数的定义如下：•类型用于设置项目符号和编号的外观•项目符号图形用于为项目符号设置自定义图像可以单击按钮进行选择，也可以直接输入图像的路径用于设置列表的位置选择“外部”选项列表贴近左侧边框，选择“内部”选项列表则缩进4.3 案例12 定义CSS样式表•相关知识•2．设置CSS样式表的属性•（7）定位•“定位”选项主要用于设置与选定的CSS样式相关的内容在页面上的定位方式•对话框中各个参数的定义如下：•类型用于设置定位的类型，下拉列表中4个选项的含义如下：•“绝对”：放置层时使用绝对坐标；•“固定”：将层的位置固定；•“相对”：放置层时使用相对坐标；•“静态”：将层的位置设为不可移动。

•显示用于设置网页中元素的可见性，下拉列表中3个选项的含义如下：•“继承”：继承父级层元素的可视性属性；•“可见”：无论父层元素是否可见都显示层内容；•“隐藏”：无论父层元素是否可见都隐藏层内容•宽/高设置层的宽度和高度4.3 案例12 定义CSS样式表•相关知识•2．设置CSS样式表的属性•（7）定位•Z轴用于设置层的堆叠顺序Z轴值较高的元素显示在Z轴值较低的元素的上方用于设置层的内容层边界时的处理方式，下拉列表中4个选项的含义如下：•“可见”：层的内容超出层的边界时，层会自动向下或向右扩展其大小，以使所有的层内容都可见；•“隐藏”：层的内容超出层的边界时，层不会改变其大小，也不会出现滚动条，超出部分不可见；•“滚动”：不论层内容是否超出层的边界，层中都会出现滚动条；•“自动”：层的内容超出层的边界时，层不会改变其大小，但会显示滚动条，用户可以通过拉动滚动条浏览超出的部分通过对“上”、“下”、“左”、“右”4个下拉列表的设置控制层的位置用于设置层的可见部分如果制定了剪辑区域，则可通过脚本语言访问它并操作属性以创建像擦除这样的特殊效果4.3 案例12 定义CSS样式表•相关知识•2．设置CSS样式表的属性•（8）扩展•“扩展”选项卡包括分页、光标和滤镜3个属性。

•对话框中各个参数的定义如下：•分页设置在打印页面时，在样式所控制的对象之前或者之后强行分页设置当鼠标指针指到应用样式的对象上时改变指针图像用于对样式所控制的对象应用特殊效果（例如模糊和反转等）4.3 案例12 定义CSS样式表•相关知识•3．CSS样式表的应用•（1）为图片添加边框效果•如果网站中的图片周围有一个很细的边框，会显得十分精致这可以通过在插入图片时，在“属性”面板中将边框属性设置为“1”来实现，默认的颜色为黑色，和默认的文字颜色一样如果希望边框有更多的效果，利用“属性”面板就不能实现，这时可以借助CSS样式为图片的边框添加更多的效果•（2）定义指定范围内的标签样式•使用“高级（ID、伪类选择器等）”选项也能定义指定范围内的标签样式例如，可以定义单元格内的水平线为红色，而单元格之外的水平线的样式保持不变。