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

《网页制作三剑客案例教程 肖维明 第4章》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、主编：高志清作者：张伟中国水利水电出版社网页制作三剑客案例教程第4章CSS样式和表单●学习目标学会使用CSS进行页面布局。了解CSS面板各功能区的使用方法，掌握新建CSS样式，套用的方法以及用表单制作反馈页面的方法。uCSS样式表的强大威力u表单●学习内容4-1CSS样式表的强大威力4-1-1初识样式表下图所示的对话框是决定样式表种类的【新建CSS样式】对话框，其【选择器类型】选项组中选择要操作的样式表形式，【定义在】中选择应用样式表的范围。表格是由行、列以及单元格组成的，在单元格中可以放置文字和图像。下面介绍在Dreamweaver中创建表格的方法以及如何调整表格的大

2、小、位置等属性。4-1-2在哪里创建样式表4-1-3修饰文章段落在前面各章的实例中，我们是通过【属性】面板来设置文字大小，颜色等属性。其实通过CSS样式不仅能实现改变文字的大小和颜色属性，还能修改文字的行间距等其他属性，本節我们將通过实例进行具体的讲解。Dreamweaver中把简单运用样式表的相关功能都汇集到了CSS样式面板中。执行菜单栏中的【窗口】/【CSS样式】命令，便可打开【CSS样式】面板，在该面板中进行相应的操作，即可创建一个CSS样式。4-1-4用CSS设置文本与表格边框之间的距离通过插入表格的方式可以随意设置文本与表格边框之间的距离，但是这种方法比较麻烦

3、，通过创建CSS样式可以轻松地完成你想要的效果。4-1-5用CSS为表格添加边框和背景色通过插入表格的方式可以随意设置文本与表格边框之间的距离，但是这种方法比较麻烦，通过创建CSS样式可以轻松地完成你想要的效果，本节我们通过实例进行具体的讲解。4-1-6改变鼠标指针的形态通过CSS还可以在特定区域内改变鼠标指针形态。创建一个样式，名称为“.cursor”，如右图所示。【新建CSS规则】对话框单击”确定“按钮，出现定义“.cursor”样式属性的对话框之后，在【分类】栏中选择【扩展】，然后在其右侧进行设置，如右图所示。扩展选项组中的“光标”下拉列表中有沙漏、十字、手形等各

4、种形态的指针，根据不同的状况显示不同的指针，可以制作出更具特色的网页。4-1-7固定背景图像前面章节中常常通过【属性】面板设置表格的背景，用这种方法设置背景图像，在做复杂的效果时往往是不足的，通过CSS样式能够完美地制作出各种背景效果，下面我们来具体讲解用CSS样式设置背景的方法。新建一个文件，创建样式“.bg1”，在【.bg1的CSS规则定义】对话框中进行设置，如下图所示。设置完毕对表格套用“.bg1”样式。对表格套用“.bg1”样式创建样式“.bg2”，在【.bg2的CSS规则定义】对话框中进行设置。设置完毕对表格套用“.bg2”样式。对表格套用“.bg2”样式样式

5、定义对话框样式定义对话框在右侧的单元格中插入“bg_003.gif”图片。将光标置于左侧的单元格中，插入一个3行1列的表格。将光标置于第1个单元格中，插入“bg_004.gif”图片，将光标置于第3个单元格中，插入“bg_005.gif”图片。创建样式“.bg3”，对中间的单元格套用“.bg3”样式。对表格套用“.bg3”样式插入图片样式定义对话框创建名称为“.padding1”的样式。出现定义“.padding1”样式属性的对话框之后，在【分类】选项组中选择【方框】，然后在【方框】编辑框中的【上】输入框中输入数值“10px”。如右图所示。在单元格中输入文字，完成实例制

6、作。预览后的页面样式定义对话框4-1-8创建并应用外部样式样式的定义范围有两种，一种是仅对当前文档应用；另一种则是定义为外部样式，外部样式不仅可以对当前文档应用，还可以对其他页面应用。对于一个大的网站，如果许多页面都需要运用同一种样式，那么定义为外部样式则会更方便。4-2表单表单文档是很多网站必须建立的体制，他的特点就是让网络中的人们交流信息、交换产品等。在电子商务的领域中，愈来愈多的厂商投入到销售网络或在网络上提供客户服务。因此，表单文档会几乎已经成为每个网站必备的功能之一。4-2-1表单介绍【表单】项各按钮的功能作用4-2-2表单的用法在制作表单页面时，首先应该向页

7、面中插入一个表单，创建表单的方法很简单，只要单击【插入栏】/【表单】中的【插入表单】按钮，即可在当前文档中插入一个表单。单击【文本字段】按钮插入文本域，如下图所示。插入文本域单击【插入下拉列表/菜单】按钮插入下拉列表，如下图所示。插入下拉列表/菜单单击【复选框】按钮插入3个复选框并输入相应的文字，如下图所示。插入复选框单击【单选】按钮插入2个单选按钮并输入相应的文字，如下图所示。插入单选按钮分别在表格的下两行中输入文字；并在其相应的右侧单元格中插入【文本域】，如下图所示。插入文本域在表格的最后一行单击【文本域】按钮插入多行文本字段，并在【