网页制作三剑客案例教程肖维明第4章.pptVIP

尚辅网 / 主 编：高志清 作 者：张 伟 中国水利水电出版社 网页制作三剑客案例教程 第4章 CSS样式和表单 ● 学习目标 学会使用CSS进行页面布局。了解CSS面板各功能区的使用方法，掌握新建CSS样式，套用的方法以及用表单制作反馈页面的方法。 u CSS样式表的强大威力 u 表单 ● 学习内容 4-1 CSS样式表的强大威力 4-1-1 初识样式表 下图所示的对话框是决定样式表种类的【新建CSS样式】对话框，其【选择器类型】选项组中选择要操作的样式表形式，【定义在】中选择应用样式表的范围。 表格是由行、列以及单元格组成的，在单元格中可以放置文字和图像。下面介绍在Dreamweaver中创建表格的方法以及如何调整表格的大小、位置等属性。 4-1-2 在哪里创建样式表 4-1-3 修饰文章段落 在前面各章的实例中，我们是通过【属性】面板来设置文字大小，颜色等属性。其实通过CSS样式不仅能实现改变文字的大小和颜色属性，还能修改文字的行间距等其他属性，本節我们將通过实例进行具体的讲解。 Dreamweaver中把简单运用样式表的相关功能都汇集到了CSS 样式面板中。执行菜单栏中的【窗口】/【CSS样式】命令，便可打开【CSS样式】面板，在该面板中进行相应的操作，即可创建一个CSS样式。 4-1-4 用CSS设置文本与表格边框之间的距离 通过插入表格的方式可以随意设置文本与表格边框之间的距离，但是这种方法比较麻烦，通过创建CSS样式可以轻松地完成你想要的效果。 4-1-5 用CSS为表格添加边框和背景色 通过插入表格的方式可以随意设置文本与表格边框之间的距离，但是这种方法比较麻烦，通过创建CSS样式可以轻松地完成你想要的效果，本节我们通过实例进行具体的讲解。 4-1-6 改变鼠标指针的形态 通过CSS还可以在特定区域内改变鼠标指针形态。 创建一个样式，名称为“.cursor”， 如右图所示。 【新建CSS规则】对话框 单击”确定“按钮，出现定义“.cursor”样式属性的对话框之后，在【分类】栏中选择【扩展】，然后在其右侧进行设置，如右图所示。 扩展选项组中的“光标”下拉列表中有沙漏、十字、手形等各种形态的指针，根据不同的状况显示不同的指针，可以制作出更具特色的网页。 4-1-7固定背景图像 前面章节中常常通过【属性】面板设置表格的背景，用这种方法设置背景图像，在做复杂的效果时往往是不足的，通过CSS样式能够完美地制作出各种背景效果，下面我们来具体讲解用CSS样式设置背景的方法。 新建一个文件，创建样式“.bg1”，在【.bg1的CSS规则定义】对话框中进行设置，如下图所示。设置完毕对表格套用“.bg1”样式。 对表格套用“.bg1”样式 创建样式“.bg2”，在【.bg2的CSS规则定义】对话框中进行设置。设置完毕对表格套用“.bg2”样式。 对表格套用“.bg2”样式 样式定义对话框 样式定义对话框 在右侧的单元格中插入 “bg_003.gif”图片。将光标置于左侧的单元格中，插入一个3行1列的表格。将光标置于第1个单元格中，插入 “bg_004.gif”图片，将光标置于第3个单元格中，插入 “bg_005.gif”图片。 创建样式“.bg3”，对中间的单元格套用“.bg3”样式。 对表格套用“.bg3”样式 插入图片 样式定义对话框 创建名称为“.padding1”的样式。出现定义“.padding1”样式属性的对话框之后，在【分类】选项组中选择【方框】，然后在【方框】编辑框中的【上】输入框中输入数值“10px”。如右图所示。 在单元格中输入文字，完成实例制作。 预览后的页面 样式定义对话框 4-1-8 创建并应用外部样式 样式的定义范围有两种，一种是仅对当前文档应用；另一种则是定义为外部样式，外部样式不仅可以对当前文档应用，还可以对其他页面应用。对于一个大的网站，如果许多页面都需要运用同一种样式，那么定义为外部样式则会更方便。 4-2 表单 表单文档是很多网站必须建立的体制，他的特点就是让网络中的人们交流信息、交换产品等。在电子商务的领域中，愈来愈多的厂商投入到销售网络或在网络上提供客户服务。因此，表单文档会几乎已经成为每个网站必备的功能之一。 4-2-1 表单介绍 【表单】项 各按钮的功能作用 4-2-2 表单的用法 在制作表单页面时，首先应该向页面中插入一个表单，创建表单的方法很简单，只要单击【插入栏】/【表单】中的 【插入表单】按钮，即可在当前文档中插入一个表单。 单击 【文本字段】按钮插入文本域，如下图所示。 插入文本域 单击 【插入下拉列表/菜单】按钮插入下拉列表，如下图所示。 插入下拉列表/菜单 单击 【复选框】按钮插入3个复选框并输