网页制作案例教程 第3版 作者 高林 胡强 第4章已完成.pptVIP

7．定义样式表中的定位属性 单击图4-16所示对话框左边【分类】栏内的 【定位】选项，此时对话框右边的【定位】栏如图4-23所示。 图4-23 【定位】栏 8．定义样式表中的扩展属性 单击图4-16所示对话框左边【分类】栏内的 【扩展】选项，此时对话框右边的【扩展】 栏如图4-24所示。 图4-24 【扩展】栏 小 结 表单是实现网页交互的通用方法，而CSS可 通过控制HTML标记的方式实现对网页界面 的美化和控制。本章对表单和CSS的基本知 识做了系统的讲解，并通过两个实例，说明 了表单和CSS的使用方法。 第4章 表单与CSS样式表 本章要点 了解表单的基本含义。 掌握成功创建一个表单页的方法。 熟练掌握各菜单域的属性。 了解CSS样式的定义。 了解并掌握CSS样式的各项属性。 熟练掌握CSS样式的创建方法。 熟练掌握放置CSS代码的方式。 在线教务辅导网： 教材其余课件及动画素材请查阅在线教务辅导网 QQ:349134187 或者直接输入下面地址： 4.1 表单 4.1.1 创建表单域与设置表单域的属性 1．创建、显示、删除表单域 （1）创建表单域：单击【插入】（表单）栏内的【表单】按钮，即可在网页编辑窗口内创建一个表单域 。 （2）显示表单域：在表单域创建后，若看不到表单域的矩形红线，则单击选中【查看】/【可视化助理】/【不可见元素】命令，即可将表单域的矩形红线显示出来。 （3）删除表单域：单击表单域的边线处，选中表单域，按Delete键，即可删除表单域。 4.1.2插入表单对象 1．插入表单对象的方法 将光标移到表单中要插入表单对象的位置处，然后单击【插入】（表单）面板中的相应按钮，即可在光标处插入一个相应的表单对象。 2．文本域的属性设置 文本域的【属性】面板如图4-4所示。 图4-4 文本域的【属性】面板 3．按钮的属性设置 按钮的【属性】面板如图4-6所示。 图4-6 按钮的【属性】面板 4．复选框的属性设置 复选框的【属性】面板如图4-7所示。 图4-7 复选框的【属性】面板 5．单选按钮的属性设置 单选按钮的【属性】面板如图4-8所示。 图4-8 单选按钮的【属性】面板 6．单选按钮组的属性设置 单选按钮组的【属性】面板如图4-9所示。 图4-9 【单选按钮组】对话框 7．列表/菜单的属性设置 列表/菜单的【属性】面板如图4-10所示。 图4-10 列表/菜单的【属性】面板 8．文件域的属性设置 文件域的【属性】面板如图4-11所示。 图4-11 文件域的【属性】面板 9．图像域的属性设置 图像域的【属性】面板如图4-12所示。 图4-12 图像域的【属性】面板 10．隐藏域的属性设置 隐藏域的【属性】面板如图4-13所示。 图4-13 隐藏域的【属性】面板 4.2 CSS样式表 4.2.1 创建CSS样式表 1．【CSS样式】面板 单击【窗口】/【CSS样式】命令，调出 【CSS样式】面板（也叫CSS样式表编辑器），如图4-14所示。 图4-14 【CSS样式】面板 2．创建CSS样式表 （1）调出如图4-15所示的【新建CSS样式】面板。选中【选择器类型】栏内的第1个单选项，在“名称”下拉列表框内输入一个样式表的名字，名字必须以“.”开始，如“.CSS1”。 （2）单击该对话框中的【确定】按钮，即可退出该对话框，调出【保存样式表文件为】对话框。利用该对话框，输入CSS样式表名称，单击【保存】按钮，将新建的空的CSS样式表保存。同时，会弹出【.CSS1的CSS样式定义（在CSS1.css中）】对话框，如图4-16所示。利用该对话框可以进行样式表内各个对象属性的定义。 图4-16 【.CSS1的CSS规则定义】对话框 （3）定义完后，单击【确定】按钮，即可完成样式表的定义。此时，在【CSS样式表】面板的显示窗口内，会显示出新创建的样式表的名称。 4.2.2 定义CSS样式表 1．定义样式表中的文字属性 单击选中图4-16所示的【.CSS1的CSS样式定义 （在CSS1.css中）】对话框左边【分类】栏内的 【类型】选项，利用该对话框可以设置CSS样式的 字体、大小、样式和颜色等。单击【应用】按钮， 可将设置的样式应用到页面中。 2．定义样式表中的背景属性 单击图4-16所示对话框左边【分类】栏内的 【背景】选项，此时的【.CSS1的CSS样式定 义（在CSS1.css中）】对话框的【背景】栏 如图4-18所示。 图4-18 【背景】栏 3．定义样式表中的区块属性 单击图4-16所示对话框左边【分类】栏内的 【区块】选项，此时对话框的【区块