第7章 CSS基础

使用插入Div标签的方法，就可以插入嵌套的Div标签，
DIV+CSS是网站标准（或称“WEB标准”）中 常用术语之一，通常为了说明与HTML网页设计语 言中的表格（table）定位方式的区别，因为 XHTML网站设计标准中，不再使用表格定位技术， 而是采用DIV+CSS的方式实现各种定位。
Div标签本身没有任何表现属性，如果要使Div
绘制嵌套的AP Div
（1）确保在“AP 元素”面板中取消选择了“防 止重叠”。
（2）在“插入”工具栏的“布局”类别中。单击 “绘制AP Div”按钮
（3）在“文档”窗口的“设计”视图中，鼠标拖 动绘制一个AP Div
（4）在选中“绘制AP Div”按钮 ，在现有AP Div的内部鼠标拖动绘制AP Div，这个AP Div就嵌 入到前面的AP Div中， apDiv2嵌入到apDiv1中
置在网页文档中的任何一个位置，都可以随意移动，而且还可以与动作
行为制作出动画效果。
1.插入AP Div
AP Div可以使用菜单中的命令插入，也可以选择 插入栏中相应的按钮，通过拖拽鼠标添加AP Div。
（1）在页面的“设计”视图，在“插入”工具栏 的“布局”类别中，单击“绘制AP Div”按钮 ，
2． 使用AP元素面板将现有AP元素嵌套在另一个 AP元素中
单击菜单“窗口”→“AP元素”，打开“AP元素” 面板
在“AP元素”面板中选择一个AP元素，然后按 住Ctrl键将此AP元素拖动到“AP元素”面板中的目 标AP元素。
目标AP元素的名称高亮显示时，松开鼠标按钮
一些 Web 设计人员更喜欢通过 AP 元素来进行设 计，而不是使用表格来创建自己的布局。 Dreamweaver 可以使用 AP 元素来创建自己的布局， 然后将它们转换为表格。例如，如果需要支持 4.0 版 之前的浏览器，可能需要将AP 元素转换为表格。不过， 建议不要将 AP 元素转换为表格，因为这样做会产生带 有大量空白单元格的表格，更不用说急剧增加的代码了。 如果需要一个使用表格的页面布局，最好使用 Dreamweaver 中可用的标准表格布局工具来创建该页 面布局。

7.12
第7章 DIV+CSS布局网页
7.2 使用DIV+CSS布局网页
7.2.1 案例制作：“经典回顾”网页
（4）制作导航部分 5）切换至设计视图，在“选择器”窗格中添加标签选择器“ul li”，将“属性”窗格切换 至布局属性，设置“Width”为75px、“Height”为24px，设置左边界为20px，设置“float” 为left，将“属性”窗格切换至文本属性，设置“line-height”为24px，设置“list-styletype”为none。 6）为每一个导航项设置空超链接，在“选择器”窗格中添加伪锚记选择器“a.nav:link”， 将“属性”窗格切换至文本属性，设置“font-family”为宋体、“font-size”为13px、 “color”为# 1E1E1、“font-weight”为“bold”、“text-decoration”为“none”。 7）在“选择器”窗格中添加伪锚记选择器“a.nav:visited”，将“属性”窗格切换至文本 属性，设置“font-family”为宋体、“font-size”为13px、“color”为#E1E1E1、“fontweight”为“bold”、“text-decoration”为“none”。
7.17
第7章 DIV+CSS布局网页
7.2 使用DIV+CSS布局网页
7.2.1 案例制作：“经典回顾”网页
（5）制作网页左侧标题部分 6）为ID为“Title”的Div创建ID选择器规则，并在“方框”中设置“Width”为499px、 “Height”为45px，在“类型”中选择“类型”项设置“font-family”为宋体、“font-size” 为16px、“color”为#000000、“line-height”为45px、“font-weight”为bold。 7）在“分类”中选择“边框”项，取消“Style”中“全部相同”复选框的对勾，设置 “Right”为“solid”。取消“Width”中的“全部相同”复选框的对勾，设置“Right”为1px， 取消“Color”中“全部相同”复选框的对勾，设置“Right”为“#3E3D3D”。 8）在“分类”中选择“区块”项，设置“Text-align”为“center”。

网页设计与开发第７章考试及答案————————————————————————————————作者: ————————————————————————————————日期:ﻩ《网页设计与开发第7章》试卷一、选择题1.下列关于表单的说法不正确的一项是（）。

Ａ.表单元素可以单独存在于网页表单之外Ｂ.表单中包含各种对象，例如文本域、列表框、复选框和单选按钮Ｃ.ｇeｔ和post方法是浏览器将表单信息提交给服务器程序的两种主要方法Ｄ.表单由两部分组成:一是描述表单的HＴＭL源代码;二是用来处理用户在表单域中输入的信息的服务器端应用程序客户端脚本答案: A２. 下列不是表单域的控件是（）。

A.单行文本框B.复选框C．下拉菜单D．图文框答案: D3. HTML语言中表单的作用是( )。

A.显示图像Ｂ.设置超链接C．收集用户反馈信息D．显示网页信息答案: Ｃ4. 有如下一行代码＜ｉｎpｕt type=＂texｔ＂name="tｘt＂＞请问它的功能是（）。

Ａ．创建一个文本框Ｂ．创建一个密码框Ｃ.创建一个文本域D．创建一个按钮答案: A5.在ＨＴMＬ中，＜ｆｏrm action＝?>,action表示（)。

Ａ.提交的方式B.表单所用的脚本语言C．提交的UＲL地址Ｄ．表单的形式答案： B6.在HTＭL中,<fｏrm meｔｈｏd=?>,ｍethod表示( ）。

Ａ．提交的方式B．表单所用的脚本语言C．提交的ＵＲＬ地址D.表单的形式答案: Ａ7. 增加表单的复选框的HＴML代码是( ）。

A.<inpｕt type=suｂmiｔ>B．<iｎｐｕt ｔｙpe= image >C．<inｐuｔｔype=text>Ｄ．<ｉｎput type=cｈeｃkbox>答案: D8.增加表单的密码域的HTML代码是( )。

A．<iｎpｕt ｔyｐe=ｓubmｉt＞B．<iｎput ｔypｅ=passwoｒｄ>C.<iｎpuｔtyｐe=ｒadｉo>D．<input tyｐe=cheｃkbox>答案: B9．创建选项菜单应使用以下标记符（ )。

数据交换。XSL当前的主要应用是将XML文档代码转变成
HTML代码，实现XML文档在IE中的显示。
XML KMR 教程
7.1 CSS简介 --7.1.1 CSS的基本知识
一个CSS样式表就是一组规则。每个规则给出此规则所适用的元素名 称，和一组适用于此元素具体属性的值。 例如：【例7-1（b）】显示图书信息表的CSS文档。
注意：添加@charset后，在CSS中 虽然可以出现中文，但仍然不能 使用中文的XML元素名称。
CSS样式表由样式规则组成, 以告诉浏览器怎样去呈现文档. CSS文档对大小写不敏感
XML KMR 教程
链接CSS和XML文档
CSS作为独立的文本文档，使用时必须和独立的DTD一样，通过指 令和相应的XML文档关联起来. 语法格式为： <?xml-stylesheet type="text/css" href="CSS样式表的URL" ?> 说明：
例 firstline.css
book {display:block; font-size:20pt;} Book:first-line {text-decoration:underline;color:green;display:block} price,pubdate{display:block; color:blue;}

<?xml-stylesheet> ：该语句为处理指令，该指令告诉解析器显示该XML 文档时使用后面属性中指定的样式表。 type属性：指定采用的样式文件的类型，对CSS样式表来说，其值为 "text/css"，对XSL样式表来说，其值为"text/xsl"。