《《网页制作三剑客案例教程》-肖维明-电子教案 第4章》由会员分享，可在线阅读，更多相关《《网页制作三剑客案例教程》-肖维明-电子教案 第4章（16页珍藏版）》请在金锄头文库上搜索。
1、主 编：高志清 作 者：张 伟,中国水利水电出版社,网页制作三剑客案例教程,第4章 CSS样式和表单, 学习目标,学会使用CSS进行页面布局。了解CSS面板各功能区的使用方法，掌握新建CSS样式，套用的方法以及用表单制作反馈页面的方法。,u CSS样式表的强大威力 u 表单, 学习内容,4-1 CSS样式表的强大威力,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个单选按钮并输入相应的文字，如下图所示。,插入单选按钮,分别在表格的下两行中输入文字；并在其相应的右侧单元格中插入【文本域】，如下图所示。,插入文本域,在表格的最后一行单击【文本域】按钮插入多行文本字段，并在【属性】面板中设置文本域的【字符宽度】为“40”，行数为“9”，如左图所示。,插入多行文本字段,这样一个表单便基本制作完成了，我们发现排版的效果比较差，下面我们创建一个CSS样式，来调整一下版面。套用样式后的页面如右图所示。,单击 【按钮】按钮插入两个按钮，如左图所示。,插入按钮后的效果,套用样式后的页面效果,4-4 本章小结,本章内容讲解完毕，本章讲解了如何创建CSS、套用CSS的方法以及表单的制作。通过实例我们可以看到利用CSS可以制作很多漂亮的效果，读者可以通过多加练习，掌握更多的CSS知识。,
