《网页制作三剑客案例教程》-第4章.ppt

《《网页制作三剑客案例教程》-第4章.ppt》由会员分享，可在线阅读，更多相关《《网页制作三剑客案例教程》-第4章.ppt（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设置文本与表格边框之间的距离通过插入表格的方式可以随意设置文本与表格边框之间的距离，但是这种方法比较麻烦，通过创建CSS样式可

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

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

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

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

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

8、入文文本本域域在表格的最后一行单击【文本域】按钮插入多行文本字段，并在【属性】面板中设置文本域的【字符宽度】为“40”，行数为“9”，如左图所示。插入多行文本字段插入多行文本字段这样一个表单便基本制作完成了，我们发现排版的效果比较差，下面我们创建一个CSS样式，来调整一下版面。套用样式后的页面如右图所示。单击 【按钮】按钮插入两个按钮，如左图所示。插入按钮后的效果插入按钮后的效果套用样式后的页面效果套用样式后的页面效果4-4 本章小结本章内容讲解完毕，本章讲解了如何创建CSS、套用CSS的方法以及表单的制作。通过实例我们可以看到利用CSS可以制作很多漂亮的效果，读者可以通过多加练习，掌握更多的CSS知识。