WEB入门.五 页面设计简介
2017-02-16 09:07
381 查看
学习内容
Ø XHTML 的发展历程
Ø XHTML 和 HTML 的区别
Ø XHTML的DOCTYPE和基本标签
Ø CSS 常用属性
能力目标
Ø 熟练掌握XHTML 和 HTML 的区别
Ø 理解XHTML的DOCTYPE
Ø 掌握创建简单的XHTML页面布局
本章简介
在上一阶段我们全面地学习了客户端页面技术的实现——HTML，内容包括：HTML 基本标签、表单和框架的使用、模板的制作和应用以及常用的网页布局特效等。通过学习，我们已经可以使用所学技术完成企业级门户网站的静态页面设计。但在实际应用过程中，设计师设计的页面在不同浏览器中的浏览效果不够一致，将导致页面不能兼容的问题，例如：在页面中定义一个层，使用 width 和 height属性设计层的大小，IE浏览器在解析 width 和 height 属性时将包含边框和内边距的大小，而使用符合 W3C标准的浏览器FireFox 在解析时不包含边框和内边距的大小。为保证设计出符合 Web标准的页面，兼容多种浏览器版本包括信息家电产品，如手机、PDA 、平板电脑等，我们将在本阶段学习 XHTML 的相关知识，以及如何使用 XHTML + DIV + CSS 技术对客户端页面进行重构，从而保证浏览效果完全一致。
核心技能部分
1. 代码简单 随着科技的发展，可以接入网络的设备越来越多；智能手机、网络电视等。HTML不能适应现在越多的网络设备和应用的需要，智能手机、PDA、信息家电等都不能直接显示HTML。
2. 结构臃肿由于HTML代码不规范、臃肿，浏览器需要足够智能和庞大才能够正确显示HTML。显然手机上装一个IE8是不可能的，空间不够，运算速度也跟不上。
3. 可扩展性差可扩展标记语言允许应用程序开发者为具体的应用环境定义自定义的标记，但是在HTML环境中，开发人员被浏览器开发者和W3C组织定义的标签集所限制。
4. 数据与表现混杂网站要改变显示样式，就必须重新制作HTML。对不同的网络设备显示同样的数据都需要制作不同的HTML。
HTML 只有不断地发展才能解决这些问题，因此W3C制定了XHTML；XHTML是 HTML 向XML过渡的一个桥梁。
XHTML (Extensible HyperText Markup Language) 指可扩展超文本标签语言，是 W3C 组织在HTML 4.0 的基础上，利用XML 的规则对其进行重构，得到的 XHTML。 建立 XHTML 的目的是实现HTML 向XML的过渡。XHTML可以广泛应用于各种平台和终端，如图1.1.1 所示。
图 1.1.1 XHTML应用各种平台和终端
XHTML的产生正是为了统一这种标记使用混乱的局面，浏览器厂商将联合采用“严格的错误防御标准”，如果XML代码不兼容，浏览器将不再显示。 这可以说也是对浏览器的一个改变，目前的浏览器，为了最大限度的容错，把网页中的内容，最大限度的显示出来。而改变之后，变成只要不符合标准就不显示。就像代码编译中的警告信息一样，目前是忽略有可能导致问题的警告，而将来会把警告也作为错误来处理。
XHTML特点：
Ø 标签要配对出现；
Ø 标签名及其属性名小写；
Ø 单独标签也要使用 /> 关闭，例如<br>变成<br />；
Ø 属性值用双引号引起来，属性缩写被禁用；
Ø 使用id代替name等。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML基础</title>
<head>
<body>
</body>
</html>
DTD (例如上例中的 xhtmll-transitional.dtd)称作文档类型定义，其中包含了页面文档的规则，浏览器会根据用户声明的DTD来解析页面上的标签，并显示相应的效果。
XHTML 1.0提供 3种DTD声明可供选择：
Ø 过渡类型 (Transitional)：要求非常宽松的 DTD，兼容HTML 4.01 的版本。
DOCTYPE代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns= "http://www.w3.org/1999/xhtml">
Ø 严格类型 (Strict)：要求严格的 DTD，不能使用在新规范中已经废除的标签和属性。
DOCTYPE代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
Ø 框架类型 (Frameset)：包括过渡类型的所有内容及页面框架部分。
DOCTYPE代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1- frameset.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
过渡类型兼容以前版本定义，可以继续使用在XHTML新规范中已经废除的标签和属性；严格类型则不兼容已经废除的标签和属性。在实际开发中建议使用过渡类型的 DTD。
以下是编写XHTML时需要遵循的一些规范。主要包括：
Ø HTML元素必须正确地嵌套；
Ø XHTML元素必须被关闭；
Ø 标签名必须用小写字母；
Ø XHTML文档必须拥有根元素；
Ø 属性名称必须小写；
Ø 属性值必需加引号；
Ø 属性不能简写；
Ø 用 id属性代替name属性；
Ø XHTML DTD 定义了强制使用的 HTML元素。
<b><li>这是一条文本信息 </b></li>
XHTML：
<b><li>这是一条文本信息 </li></b>
<P>这是一个文本段落 </P>
XHTML：
<p>这是一个文本段落 </p>
<a HREF="test.html">test 页面</a>
XHTML：
<a href="test.html">test 页面</a>
<P> 这是一个文本段落
XHTML：
<p>这是一个文本段落 </p>
即使是空元素的标签也必须封闭。
HTML：
这是一个文本段落<br>
XHTML：
这是一个文本段落<br/>
<A class=mystyle>NBA快讯</A>
XHTML：
<a class="mystyle">NBA快讯</a>
<input name="userName"type="text" id="useName" readonly/>
XHTML：
<input name="userName"type="text" id="useName" readonly="readonly"/>
HTML：
<img src="test1.jpg"width="333" height="500" name="headPic"/>
XHTML：
<img src="test1.jpg"width="333" height="500" id="headPic"/>
下面是一个完整的 XHTML文件结构：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns= "http://www.w3.org/1999/xhtml">
<head>
<title>第一个XHTML页面</title>
</head>
<body>
</body>
</html>
<html>
<head>
<title> . . . . . .</title>
</head>
<body> . . . . . . </body>
</html>
1. 标题标签 <hl>到 <h6>
标题标签用于分隔正文、总结正文内容，<hl>到 <h6>标签可定义标题，<hl>定义最大的标题，<h6>定义最小的标题。
1.1
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
在浏览器中预览的效果如图 1.1.2所示。
图 1.1.2 标题标签
2. 段落标签<p>
<p>标签用于将长文本分段落显示，其中可以加入文字、列表、表格等；该标签需成对出现。
<p align="水平对齐方式">段落内容</p>
3. 水平分割线标签 <hr />
<hr />标签用于在网页上插入一条水平分隔线。
< hr/>
1.2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<h1>欢迎学习XHTML页面设计</h1>
<hr/>
<p>默认状态下，块状元素的宽度为 100%,</p>
<p>块状元素始终占据一行。</p>
</body>
</html>
在浏览器中预览的效果，如图 1.1.3所示。
图 1.1.3 段落和水平线标签
4. 项目列表 <ul>
<ul>标签用于列举没有先后顺序的项目元素，故又称无序列表。
<ul type="项目符号类型">
<li>项目元素</li>
</ul>
1.3
<ul type="square">
<li>唐僧</li>
<li>猪八戒</li>
<li>孙悟空</li>
<li>沙悟净</li>
</ul>
在浏览器中预览的效果如图 1.1.4所示。
图 1.1.4 无序列表
其中type还有 circle（圆圈）、disc（圆点）两个常用选项。
5. 项目编号 <ol>
<ol>标签用于列举有先后顺序的项目元素，故又称有序列表。
<ol type="项目符号类型" start= "编号的起始值">
<li>项目元素</li>
</ol>
1.4
<ol type="1">
<li>唐僧</li>
<li>猪八戒</li>
<li>孙悟空</li>
<li>沙悟净</li>
</ol>
在浏览器中预览的效果如图 1.1. 5 所示。
图 1.1.5 有序列表
6. 层标签 <div>
<div>标签用于在页面上定义一个内容块，其中可以存放任何内容，如文本、表格、图像等。
<div>文本内容</div>
1.5
CSS样式代码：
<style type="text/css">
#menu{
border:1pxsolid #3C3;
font-size:16px;
height:60px;
width:300px;
}
</style>
HTML 代码片段：
<body>
<div id="menu">导航栏</div>
</body>
在浏览器中预览的效果如图 1.1.6所示。
图 1.1.6 <div>标签
1. 换行标签 <br />
<br />标签用于在同一个段落中换行。
< br/>
1.6
<p>
这是第一段落中的第一行，
这是第一段落中的第二行
</p>
<p>
这是第二段落中的第一行，<br/>
这是第二段落中的第二行
</p>
在浏览器中预览的效果如图 1.1.7所示。
图 1.1.7 <p>标签
2. 超链接标签 <a>
（1） 超链接 通过使用 href属性，可以创建指向另外一个文档的链接。
<a href="链接文档的位置">链接文字</a>
（2）锚点 通过使用 name 或 id属性，创建一个文档内部的书签 (即可以创建指向文档片段的链接)。
<a name="书签名称"> 返回顶部</a>
（3）发送电子邮件 链接到某个指定的电子邮件地址，此用法可以打开邮件客户端程序，用于给指定帐户发送邮件，但是在用户机器上需要安装邮件客户端软件才可以使用此功能。
<a href="mailto:电子邮件地址"> 联系我们 </a>
1.7
<body>
<a href="http://www.163.com">网易</a>
<a href="mangage/login.jsp">后台管理</a>
<ahref="mailto:wukong.sun@163.com">联系我们</a>
</body>
在浏览器中预览的效果如图 1.1.8所示。
图 1.1.8 <a> 标签
3. 行级文本标签 <span>
<span>标签一般被用在文本行中修饰特定文本的显示属性，或者局部辅助div标签完善页面布局。
<span>行级文本内容</span>
1.8
CSS样式代码：
<style type="text/css">
p{
font-family:Arial;
font-size:12px;
line-height:18px;
}
.firstLetter{
font-size:18px;
float:left;
}
</style>
HTML代码片段：
<body>
<h1>CSS的概念</h1>
<hr/>
<p><spanclass="firstLetter">CSS</span>（Cascading Style Sheet，可译为"层叠样式表"或"级联样式表"）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。</p>
</body>
在浏览器中预览的效果如图 1.1.9所示。
图 1.1.9span标签
display : value;
display取值说明：
Ø none：设置页面元素不显示
Ø block：设置页面元素以块状方式显示
Ø inline：设置页面元素在一行显示
1.9
CSS代码：
<style type="text/css">
#first{
width:300px;
height:50px;
background:#99cccc;
display:block;
text-align:center;
line-height:50px;
border:#ccc 1px dashed;
}
#first:hover{
background:#ddd;
display:block;
border:#000 1px solid;
}
#second{
width:300px;
height:50px;
background:#99cccc;
text-align:center;
line-height:50px;
font-size:12px;
border:#ccc 1px dashed;
}
#second:hover{
background:#ddd;
border:#000 1px solid;
}
</style>
HTML代码：
<body>
<ahref="#" id="first">使用了display:block;</a>
<ahref="#" id="second">没有使用display:block;</a>
</body>
在浏览器中预览的效果如图 1. 1. 10 所示。
图 1. 1. 10display 属性
float：value;
float取值说明：
Ø left：设置元素漂浮到父级容器的左侧
Ø right：设置元素漂浮到父级容器的右侧
Ø none：设置元素不使用漂浮
1.10
CSS代码：
<style type="text/css">
#menu li{
float:left;
width:100px;
height:20px;
text-align:center;
list-style-type:none;
background-color:#3CF;
}
#menu li a{
text-decoration:none;
}
#menu li:hover{
text-decoration:underline;
background-color:#3F9;
}
</style>
HTML代码片段：
<ul id="menu">
<li><ahref="#">首页</a></li>
<li><ahref="#">博客</a></li>
<li><ahref="#">日记</a></li>
</ul>
在浏览器中预览的效果如图 1. 1. 11 所示。
图 1. 1. 11float 属性
图 1.1.12 margin 和 padding
margin：value ;
padding：value ;
margin和padding值使用计算机的相对单位或绝对单位。例如外边距的值需要设置5个像素应写为 margin：5px。其中：padding 不允许为负值，
padding: 2px; /* 定义元素四周内边距为2px */
padding: 2px 4px; /* 定义元素上下内边距为2px， 左右内边距为4px */
padding: 2px 4px 6px; /* 定义元素上内边距为2px， 左右内边距为4px ，下内边距为6px*/
padding: 2px 4px 6px 8px; /* 定义元素上内边距为2px， 右内边距为4px ，下内边距为6px，左内边距为8px*/
1.11
CSS代码：
<style type="text/css">
#banner{
margin-top:5px;
width:380px;
height:60px;
border:1pxsolid #99cccc;
padding:5px10px;
}
#content{
margin-top:5px;
width:400px;
height:100px;
border:1pxsolid #99cccc;
}
#content #menu{
background-image:url(images/bg.jpg);
padding-left:5px;
width:395px;
height:31px;
font-size:12px;
line-height:31px;
}
</style>
HTML代码片段：
<body>
<divid="banner">网页banner部分</div>
<divid="content">
<divid="menu">热卖商品</div>
</div>
</body>
在浏览器中预览的效果如图 1. 1. 13 所示。
图 1.1.13 边距应用
Ø 打开 Dreamweaver 网页开发工具；
Ø 选择“文件”→“新建” →“文档类型”，选择“XHTML 1.0 Transitional”，如图 1.1.14所示；
图 1.1.14 选择 DOCTYPE
Ø 编写代码；
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=gb2312" />
<title>XHTML基础</title>
<style type="text/css">
div{
border:1px solid green;
margin:5px auto;
width:800px;
text-align:center;
font-size:30px;
}
#menu{
height:120px;
}
#content{
height:300px;
}
#copyright{
height:60px;
}
</style>
</head>
<body>
<divid="menu">导航栏部分</div>
<divid="content">主体部分</div>
<divid="copyright">版权信息部分</div>
</body>
</html>
在浏览器中预览的效果如图 1. 1. 15 所示。
图 1. 1. 15布局
任务实训部分
Ø 了解XHTML的基本结构
Ø 在XHTML中插入CSS样式代码
Ø 在XHTML中插入基本标签
需求说明
搭建基本的XHTML文档结构，并在文档中创建一个段落，定义段落字体颜色为绿色，行高为12px，使用<br/>标签换行。
实现步骤
Ø 使用Dreamweaver创建页面，选择合适的DOCTYPE
Ø 使用XHTML规则编写HTML结构代码
关键代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
p{
font-size:20px;
color:green;
line-height:25px;
}
</style>
</head>
<body>
<p>
HTML5草案的前身名为Web Applications 1.0，於2004年被WHATWG提出，於2007年被W3C接纳，并成立了新的HTML工作团队。HTML标准自1999年12月发布的 HTML 4.01后，<br/>后继的HTML 5 和其它标准被束之高阁，为了推动web标准化运动的发展，一些公司联合起来，成立了一个叫做 Web Hypertext Application Technology Working Group （Web 超文本应用技术工作组 - WHATWG） 的组织，他们重新拣起 HTML 5。第一份正式草案已于2008年1月22日公布。HTML 5有两大特点：首先，强化了Web网页的表现性能。其次，追加了本地数据库等Web应用的功能。
</p>
</body>
</html>
Ø 行内元素span的用法
Ø 样式属性font-size用法
Ø 单位：em的作用
需求说明
创建一段文本，实现首字下沉效果，如图1.2.1所示。
图1.2.1 首字下沉效果
实现步骤
Ø 将要首字下沉的文字定义到span标签中
Ø 定义span的样式属性font-size:3em
Ø font-size:3em；表示被设置字体是行默认高度的3倍
关键代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
p{
font-family:Arial;
font-size:12px;
width:300px;
}
.firstLetter{
font-size:3em;
float:left;
color:#cc0000;
}
</style>
</head>
<body>
<p>
<spanclass="firstLetter">HTML5</span>草案的前身名为Web Applications 1.0，於2004年被WHATWG提出，於2007年被W3C接纳，并成立了新的HTML工作团队。HTML标准自1999年12月发布的 HTML 4.01后，后继的HTML 5 和其它标准被束之高阁，为了推动web标准化运动的发展，一些公司联合起来，成立了一个叫做 Web HypertextApplication Technology Working Group （Web 超文本应用技术工作组 -WHATWG） 的组织，他们重新拣起 HTML 5。
</p>
</body>
</html>
Ø 使用样式属性padding
Ø 使用background设置文本框的背景
需求说明
制作搜索页面的文本框，如图1.2.2所示。
图1.2.2 带背景的文本框
关键代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.search_input{
background-image:url(soso.jpg);/*设置背景图像路径*/
background-repeat:no-repeat;/*禁止背景平铺*/
background-position:right;
border:1pxsolid #99cccc;
width:200px;
height:23px;
line-height:23px;/*设置行高为23px*/
margin:5px;
}
</style>
</head>
<body>
<input type="text"name="keyword" class="search_input"/>
</body>
</html>
练习部分
需求说明
在“指导部分”的基础上，创建网站的搜索页面，如图1.2.3所示。
图1.2.3 搜索页面
提示：
（1） 定义一个层，边框的样式设为虚线：border: 1pxdashed green;
（2） 设置文本框的背景：background:url(images/soso.jpg)no-repeat right;
（3） 设置文本框的内边距以保证文本框中的内容不覆盖图片：padding-right:31px;
创建XHTML页面，实现垂直菜单效果，打开页面的初始状态如图1.2.4所示，当鼠标移动到某个链接上时，效果如图1.2.5所示。
图1.2.4 垂直菜单-1 图1.2.5 垂直菜单-2
关键代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
a{
display:block;
width:80px;
height:30px;
border:1px dashed #060;
margin:5px;
text-align:center;
line-height:30px;
}
a:hover{
border:0px;
margin:6px;
}
</style>
</head>
<body>
<a href="#">首页</a>
<a href="#">相册</a>
<a href="#">日志</a>
<a href="#">留言</a>
</body>
</html>
创建XHTML页面，实现水平菜单效果，打开页面的初始状态如图1.2.6所示。
图1.2.6 水平菜单-1
当鼠标移动到某个链接上时，效果如图1.2.7所示。
图1.2.7 水平菜单-2
提示：
（1） 使用 <ul><li></li></ul> 创建菜单
（2） 设置 <li>的宽度高度，float:left;左浮动
（3） 设置 <li> 内的超链接 <a> 的 text-decoration:none; 没有下划线的超链接
（4） 设置 <li> 内的超链接 <a> 的 a:hover样式：
text-decoration:underline;
background-color:#3F9;
数据表格 我相信大家在制作网页的时候一定用得很多， 最经常就是 table 这个标签了。很明显table 就是一个制作表格的标签， 但是使用 ul li 也可以做到数据表格，而且很简单的代码 可以实现，主要还是用 div 和 css 来控制 ul li 吧，可以这样说。先看看 是怎样的一个数据表格。如图效果：1.2.8所示。
图1.2.8所示。
提示：
（1）第一步：去除<UL><LI>的原始风格；list-style-type:none,加入float:left;使每个<UL><LI>向左浮动。
（2）第二步：设置每一行 margin-bottom: 1px;，使每一行底部空出的空隙。margin-left: 1px; 是每一个小格左边空出的空隙。
（3）第三步：顶部的字体大小和粗体另外设置，如果使用 #news li.biaotou ，使用的是class 不是 id。
<liclass="biaotou">第一列</li>
<liclass="biaotou">第二列</li>
<liclass="biaotou">第三列</li>
<liclass="biaotou">第四列</li>
#news li.biaotou
{
font-size: 16px;
font-weight:bold;
background: #999;
}
本章总结
（1）本章主要讲解XHTML和HTML的区别。XHTML（ExtensibleHyperText Markup Language）指可扩展文本标记语言。
（2）标签的分类：block（块状）和inline（行内）。块状：<h1> 到<h6>、<p>、<hr>、<ul>、<ol>、<div>。inline（行内）<br/>、<a>、<span>等。
（3）CSS常用属性：display：none，block，inline。和float，设置元素漂浮到父级容器的左侧，右侧。
巩固练习
一、选择题
1. 在下列标签中不属于块状标签的是（）。
A. <p>
B. <div>
C. <br>
D. <hr>
2. 以下代码编写符合XHTMLI.0标准的是（）。
A. <hr>
B. <p>这是一个段落
C. <div></div>
D. <tableborder=1></table>
3. 以下标签默认情况下能在同一行显示的是（）。
A. <h1>
B. <p></p>
C. <div></div>
D. <a>
4. 以下选项中可以打开邮件客户端程序的是（）。
A. <a href=" mailto：zhangsan@ 263.com">联系我们 </a>
B. <a href="http://www.163.com">网易门户</a>
C. < a name="top">返回顶部</a>
D. <a href="#chapter2">第二章 </a>
5. 以下代码片断符合XHTML1.0标准的是（）。
A. <input type=button/>
B. <input type="button">
C. < input type= "button" disabled />
D. < input type= "button" disabled = "disabled"/>
二、上机练习
使用XHTML和CSS编写如图 1.3.1所示的页面效果。
提示: 将 a 标签定义成块状显示设置宽度和高度，并设置浮动属性“float:left”。
图1.3.1 display属性与 float属性的用法
Ø XHTML 的发展历程
Ø XHTML 和 HTML 的区别
Ø XHTML的DOCTYPE和基本标签
Ø CSS 常用属性
能力目标
Ø 熟练掌握XHTML 和 HTML 的区别
Ø 理解XHTML的DOCTYPE
Ø 掌握创建简单的XHTML页面布局
本章简介
在上一阶段我们全面地学习了客户端页面技术的实现——HTML，内容包括：HTML 基本标签、表单和框架的使用、模板的制作和应用以及常用的网页布局特效等。通过学习，我们已经可以使用所学技术完成企业级门户网站的静态页面设计。但在实际应用过程中，设计师设计的页面在不同浏览器中的浏览效果不够一致，将导致页面不能兼容的问题，例如：在页面中定义一个层，使用 width 和 height属性设计层的大小，IE浏览器在解析 width 和 height 属性时将包含边框和内边距的大小，而使用符合 W3C标准的浏览器FireFox 在解析时不包含边框和内边距的大小。为保证设计出符合 Web标准的页面，兼容多种浏览器版本包括信息家电产品，如手机、PDA 、平板电脑等，我们将在本阶段学习 XHTML 的相关知识，以及如何使用 XHTML + DIV + CSS 技术对客户端页面进行重构，从而保证浏览效果完全一致。
核心技能部分
1.1 .XHTML简介
1.1.1 . 为什么使用 XHTML
HTML发展到目前主要存在以下几个缺点：1. 代码简单 随着科技的发展，可以接入网络的设备越来越多；智能手机、网络电视等。HTML不能适应现在越多的网络设备和应用的需要，智能手机、PDA、信息家电等都不能直接显示HTML。
2. 结构臃肿由于HTML代码不规范、臃肿，浏览器需要足够智能和庞大才能够正确显示HTML。显然手机上装一个IE8是不可能的，空间不够，运算速度也跟不上。
3. 可扩展性差可扩展标记语言允许应用程序开发者为具体的应用环境定义自定义的标记，但是在HTML环境中，开发人员被浏览器开发者和W3C组织定义的标签集所限制。
4. 数据与表现混杂网站要改变显示样式，就必须重新制作HTML。对不同的网络设备显示同样的数据都需要制作不同的HTML。
HTML 只有不断地发展才能解决这些问题，因此W3C制定了XHTML；XHTML是 HTML 向XML过渡的一个桥梁。
1.1.2 什么是 XHTML
XML是一种可扩展性标签语言，用来描述数据，其中所有的内容都要被准确地定义，才能产生格式良好的文档；而 HTML 则用来显示数据的。由于运行在用户机器上的浏览器种类繁多，在技术实现细节上难免存在差异。为了解决浏览器的兼容性，W3C 组织结合HTML 和 XML各自的长处，形成了一种新的 HTML语言规范——XHTML。XHTML (Extensible HyperText Markup Language) 指可扩展超文本标签语言，是 W3C 组织在HTML 4.0 的基础上，利用XML 的规则对其进行重构，得到的 XHTML。 建立 XHTML 的目的是实现HTML 向XML的过渡。XHTML可以广泛应用于各种平台和终端，如图1.1.1 所示。
图 1.1.1 XHTML应用各种平台和终端
1.2 XHTML特点及发展优势
XHTML产生的原因，一方面是为了迎合未来的XML大量的应用，另一方面还要兼容目前的数以万计的用HTML编写的网页以及他们的设计者，开发者相兼容；于是便出现了XHTML。在HTML编写的网页中，标记使用有些混乱。由于许多浏览器都有自己的私有标签，而私有标签的大规模应用，就导致了不同浏览器上访问同一个网页的结果不同。举个例子iframe标签，就是IE的私有标签。XHTML的产生正是为了统一这种标记使用混乱的局面，浏览器厂商将联合采用“严格的错误防御标准”，如果XML代码不兼容，浏览器将不再显示。 这可以说也是对浏览器的一个改变，目前的浏览器，为了最大限度的容错，把网页中的内容，最大限度的显示出来。而改变之后，变成只要不符合标准就不显示。就像代码编译中的警告信息一样，目前是忽略有可能导致问题的警告，而将来会把警告也作为错误来处理。
XHTML特点：
Ø 标签要配对出现；
Ø 标签名及其属性名小写；
Ø 单独标签也要使用 /> 关闭，例如<br>变成<br />；
Ø 属性值用双引号引起来，属性缩写被禁用；
Ø 使用id代替name等。
1.3 如何过渡到 XHTML
制作 XHTML页面，首先要声明符合需求的DOCTYPE，浏览器会根据页面声明的DOCTYPE 规则显示页面效果，保证在任何类型的浏览器中页面显示风格的一致性，DOCTYPE是 document type (文档类型)的简写，表明页面所采用的是XHTML版本。XHTML的基本结构如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML基础</title>
<head>
<body>
</body>
</html>
DTD (例如上例中的 xhtmll-transitional.dtd)称作文档类型定义，其中包含了页面文档的规则，浏览器会根据用户声明的DTD来解析页面上的标签，并显示相应的效果。
XHTML 1.0提供 3种DTD声明可供选择：
Ø 过渡类型 (Transitional)：要求非常宽松的 DTD，兼容HTML 4.01 的版本。
DOCTYPE代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns= "http://www.w3.org/1999/xhtml">
Ø 严格类型 (Strict)：要求严格的 DTD，不能使用在新规范中已经废除的标签和属性。
DOCTYPE代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
Ø 框架类型 (Frameset)：包括过渡类型的所有内容及页面框架部分。
DOCTYPE代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1- frameset.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
过渡类型兼容以前版本定义，可以继续使用在XHTML新规范中已经废除的标签和属性；严格类型则不兼容已经废除的标签和属性。在实际开发中建议使用过渡类型的 DTD。
1.4 XHTML与HTML区别
如何快速地将 HTML页面转换成XHTML页面？它和HTML之间究竟有什么不同之处？需要再重新学习、记忆一些新标签吗？答案是否定的。XHTML是在HTML基础上经过改进而制定的一套规范，即编写XHTML页面时，遵循 XHTML规范就可以轻松地制作出 XHTML 页面。以下是编写XHTML时需要遵循的一些规范。主要包括：
Ø HTML元素必须正确地嵌套；
Ø XHTML元素必须被关闭；
Ø 标签名必须用小写字母；
Ø XHTML文档必须拥有根元素；
Ø 属性名称必须小写；
Ø 属性值必需加引号；
Ø 属性不能简写；
Ø 用 id属性代替name属性；
Ø XHTML DTD 定义了强制使用的 HTML元素。
1.4.1 . 标签必须严格嵌套
HTML：<b><li>这是一条文本信息 </b></li>
XHTML：
<b><li>这是一条文本信息 </li></b>
1.4.2 . 标签名称必须小写
HTML：<P>这是一个文本段落 </P>
XHTML：
<p>这是一个文本段落 </p>
1.4.3 . 属性名称必须小写
HTML：<a HREF="test.html">test 页面</a>
XHTML：
<a href="test.html">test 页面</a>
1.4.4 . 标签名称必须封闭
HTML：<P> 这是一个文本段落
XHTML：
<p>这是一个文本段落 </p>
即使是空元素的标签也必须封闭。
HTML：
这是一个文本段落<br>
XHTML：
这是一个文本段落<br/>
1.4.5 . 属性值用双引号括起来
HTML：<A class=mystyle>NBA快讯</A>
XHTML：
<a class="mystyle">NBA快讯</a>
1.4.6 . 属性值必须使用完整形式
HTML :<input name="userName"type="text" id="useName" readonly/>
XHTML：
<input name="userName"type="text" id="useName" readonly="readonly"/>
1.4.7 . 用 id 属性代替 name 属性
在XHTML 中不建议使用 name属性，应该使用 id取而代之。HTML：
<img src="test1.jpg"width="333" height="500" name="headPic"/>
XHTML：
<img src="test1.jpg"width="333" height="500" id="headPic"/>
1.4.8 . 强制使用的 XHTML 元素
所有 XHTML 文档必须进行文档类型声明 (DOCTYPE declaration)，文档中必须存在 html、head、body元素，并且 title元素必须在 head元素中。下面是一个完整的 XHTML文件结构：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns= "http://www.w3.org/1999/xhtml">
<head>
<title>第一个XHTML页面</title>
</head>
<body>
</body>
</html>
1.4.9 . XHTML文档必须拥有一个根元素
所有的 XHTML 的元素必须嵌套于 <html> 根元素中，其余所有的元素可以有子元素，子元素必须是成对的且被嵌套在其父元素之中，基本结构如下：<html>
<head>
<title> . . . . . .</title>
</head>
<body> . . . . . . </body>
</html>
1.5 XHTML基本标签
从布局角度可以将标签分成两大类：block (块状)和 inline (行内)。本章列举了标题、项目列表、水平线、段落、换行、超链接层、行级容器等标签。1.5.1 . 块状标签
默认状态下，块状元素的宽度为 100%，且后面隐藏附带有换行符，所以块状元素始终占据一行。以下列举一些常用的块状标签：1. 标题标签 <hl>到 <h6>
标题标签用于分隔正文、总结正文内容，<hl>到 <h6>标签可定义标题，<hl>定义最大的标题，<h6>定义最小的标题。
1.1
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
在浏览器中预览的效果如图 1.1.2所示。
图 1.1.2 标题标签
2. 段落标签<p>
<p>标签用于将长文本分段落显示，其中可以加入文字、列表、表格等；该标签需成对出现。
<p align="水平对齐方式">段落内容</p>
3. 水平分割线标签 <hr />
<hr />标签用于在网页上插入一条水平分隔线。
< hr/>
1.2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<h1>欢迎学习XHTML页面设计</h1>
<hr/>
<p>默认状态下，块状元素的宽度为 100%,</p>
<p>块状元素始终占据一行。</p>
</body>
</html>
在浏览器中预览的效果，如图 1.1.3所示。
图 1.1.3 段落和水平线标签
4. 项目列表 <ul>
<ul>标签用于列举没有先后顺序的项目元素，故又称无序列表。
<ul type="项目符号类型">
<li>项目元素</li>
</ul>
1.3
<ul type="square">
<li>唐僧</li>
<li>猪八戒</li>
<li>孙悟空</li>
<li>沙悟净</li>
</ul>
在浏览器中预览的效果如图 1.1.4所示。
图 1.1.4 无序列表
其中type还有 circle（圆圈）、disc（圆点）两个常用选项。
5. 项目编号 <ol>
<ol>标签用于列举有先后顺序的项目元素，故又称有序列表。
<ol type="项目符号类型" start= "编号的起始值">
<li>项目元素</li>
</ol>
1.4
<ol type="1">
<li>唐僧</li>
<li>猪八戒</li>
<li>孙悟空</li>
<li>沙悟净</li>
</ol>
在浏览器中预览的效果如图 1.1. 5 所示。
图 1.1.5 有序列表
6. 层标签 <div>
<div>标签用于在页面上定义一个内容块，其中可以存放任何内容，如文本、表格、图像等。
<div>文本内容</div>
1.5
CSS样式代码：
<style type="text/css">
#menu{
border:1pxsolid #3C3;
font-size:16px;
height:60px;
width:300px;
}
</style>
HTML 代码片段：
<body>
<div id="menu">导航栏</div>
</body>
在浏览器中预览的效果如图 1.1.6所示。
图 1.1.6 <div>标签
1.5.2 . 行内标签
行内标签在默认情况下没有宽度和高度，其宽度和高度由行内标签中的内容决定，所以定义它的 width和 height属性无效，可以修改行内标签的 CSS样式属性 display为 block来更改其显示方式为块状显示。1. 换行标签 <br />
<br />标签用于在同一个段落中换行。
< br/>
1.6
<p>
这是第一段落中的第一行，
这是第一段落中的第二行
</p>
<p>
这是第二段落中的第一行，<br/>
这是第二段落中的第二行
</p>
在浏览器中预览的效果如图 1.1.7所示。
图 1.1.7 <p>标签
2. 超链接标签 <a>
（1） 超链接 通过使用 href属性，可以创建指向另外一个文档的链接。
<a href="链接文档的位置">链接文字</a>
（2）锚点 通过使用 name 或 id属性，创建一个文档内部的书签 (即可以创建指向文档片段的链接)。
<a name="书签名称"> 返回顶部</a>
（3）发送电子邮件 链接到某个指定的电子邮件地址，此用法可以打开邮件客户端程序，用于给指定帐户发送邮件，但是在用户机器上需要安装邮件客户端软件才可以使用此功能。
<a href="mailto:电子邮件地址"> 联系我们 </a>
1.7
<body>
<a href="http://www.163.com">网易</a>
<a href="mangage/login.jsp">后台管理</a>
<ahref="mailto:wukong.sun@163.com">联系我们</a>
</body>
在浏览器中预览的效果如图 1.1.8所示。
图 1.1.8 <a> 标签
3. 行级文本标签 <span>
<span>标签一般被用在文本行中修饰特定文本的显示属性，或者局部辅助div标签完善页面布局。
<span>行级文本内容</span>
1.8
CSS样式代码：
<style type="text/css">
p{
font-family:Arial;
font-size:12px;
line-height:18px;
}
.firstLetter{
font-size:18px;
float:left;
}
</style>
HTML代码片段：
<body>
<h1>CSS的概念</h1>
<hr/>
<p><spanclass="firstLetter">CSS</span>（Cascading Style Sheet，可译为"层叠样式表"或"级联样式表"）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。</p>
</body>
在浏览器中预览的效果如图 1.1.9所示。
图 1.1.9span标签
1.6 CSS常用样式属性
XHTML用来显示页面数据，CSS 则可以提供更多的网页样式，并控制页面元素的外观，使网页元素更加丰富多彩。以下是一些常见的 CSS 布局属性。1.6.1 显示属性(display)
display属性用于设定对象如何显示。display : value;
display取值说明：
Ø none：设置页面元素不显示
Ø block：设置页面元素以块状方式显示
Ø inline：设置页面元素在一行显示
1.9
CSS代码：
<style type="text/css">
#first{
width:300px;
height:50px;
background:#99cccc;
display:block;
text-align:center;
line-height:50px;
border:#ccc 1px dashed;
}
#first:hover{
background:#ddd;
display:block;
border:#000 1px solid;
}
#second{
width:300px;
height:50px;
background:#99cccc;
text-align:center;
line-height:50px;
font-size:12px;
border:#ccc 1px dashed;
}
#second:hover{
background:#ddd;
border:#000 1px solid;
}
</style>
HTML代码：
<body>
<ahref="#" id="first">使用了display:block;</a>
<ahref="#" id="second">没有使用display:block;</a>
</body>
在浏览器中预览的效果如图 1. 1. 10 所示。
图 1. 1. 10display 属性
1.6.2 漂浮属性(float)
float属性定义元素在某个方向上浮动。float：value;
float取值说明：
Ø left：设置元素漂浮到父级容器的左侧
Ø right：设置元素漂浮到父级容器的右侧
Ø none：设置元素不使用漂浮
1.10
CSS代码：
<style type="text/css">
#menu li{
float:left;
width:100px;
height:20px;
text-align:center;
list-style-type:none;
background-color:#3CF;
}
#menu li a{
text-decoration:none;
}
#menu li:hover{
text-decoration:underline;
background-color:#3F9;
}
</style>
HTML代码片段：
<ul id="menu">
<li><ahref="#">首页</a></li>
<li><ahref="#">博客</a></li>
<li><ahref="#">日记</a></li>
</ul>
在浏览器中预览的效果如图 1. 1. 11 所示。
图 1. 1. 11float 属性
1.6.3 外边距 (margin)和 内边距(padding)
margin属性用来定义块状容器四周的空白大小，padding属性用来定义块状容器内部的内容距离四周边框的空白大小 (图 1.1.12)。图 1.1.12 margin 和 padding
margin：value ;
padding：value ;
margin和padding值使用计算机的相对单位或绝对单位。例如外边距的值需要设置5个像素应写为 margin：5px。其中：padding 不允许为负值，
padding: 2px; /* 定义元素四周内边距为2px */
padding: 2px 4px; /* 定义元素上下内边距为2px， 左右内边距为4px */
padding: 2px 4px 6px; /* 定义元素上内边距为2px， 左右内边距为4px ，下内边距为6px*/
padding: 2px 4px 6px 8px; /* 定义元素上内边距为2px， 右内边距为4px ，下内边距为6px，左内边距为8px*/
1.11
CSS代码：
<style type="text/css">
#banner{
margin-top:5px;
width:380px;
height:60px;
border:1pxsolid #99cccc;
padding:5px10px;
}
#content{
margin-top:5px;
width:400px;
height:100px;
border:1pxsolid #99cccc;
}
#content #menu{
background-image:url(images/bg.jpg);
padding-left:5px;
width:395px;
height:31px;
font-size:12px;
line-height:31px;
}
</style>
HTML代码片段：
<body>
<divid="banner">网页banner部分</div>
<divid="content">
<divid="menu">热卖商品</div>
</div>
</body>
在浏览器中预览的效果如图 1. 1. 13 所示。
图 1.1.13 边距应用
1.7 建立第一个XHTML布局页面
建立一个简单的上中下三行的XHML布局，请执行以下步骤：Ø 打开 Dreamweaver 网页开发工具；
Ø 选择“文件”→“新建” →“文档类型”，选择“XHTML 1.0 Transitional”，如图 1.1.14所示；
图 1.1.14 选择 DOCTYPE
Ø 编写代码；
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=gb2312" />
<title>XHTML基础</title>
<style type="text/css">
div{
border:1px solid green;
margin:5px auto;
width:800px;
text-align:center;
font-size:30px;
}
#menu{
height:120px;
}
#content{
height:300px;
}
#copyright{
height:60px;
}
</style>
</head>
<body>
<divid="menu">导航栏部分</div>
<divid="content">主体部分</div>
<divid="copyright">版权信息部分</div>
</body>
</html>
在浏览器中预览的效果如图 1. 1. 15 所示。
图 1. 1. 15布局
任务实训部分
实训任务1：创建XHTML基本结构
训练技能点Ø 了解XHTML的基本结构
Ø 在XHTML中插入CSS样式代码
Ø 在XHTML中插入基本标签
需求说明
搭建基本的XHTML文档结构，并在文档中创建一个段落，定义段落字体颜色为绿色，行高为12px，使用<br/>标签换行。
实现步骤
Ø 使用Dreamweaver创建页面，选择合适的DOCTYPE
Ø 使用XHTML规则编写HTML结构代码
关键代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
p{
font-size:20px;
color:green;
line-height:25px;
}
</style>
</head>
<body>
<p>
HTML5草案的前身名为Web Applications 1.0，於2004年被WHATWG提出，於2007年被W3C接纳，并成立了新的HTML工作团队。HTML标准自1999年12月发布的 HTML 4.01后，<br/>后继的HTML 5 和其它标准被束之高阁，为了推动web标准化运动的发展，一些公司联合起来，成立了一个叫做 Web Hypertext Application Technology Working Group （Web 超文本应用技术工作组 - WHATWG） 的组织，他们重新拣起 HTML 5。第一份正式草案已于2008年1月22日公布。HTML 5有两大特点：首先，强化了Web网页的表现性能。其次，追加了本地数据库等Web应用的功能。
</p>
</body>
</html>
实训任务2：制作首字下沉效果
训练技能点Ø 行内元素span的用法
Ø 样式属性font-size用法
Ø 单位：em的作用
需求说明
创建一段文本，实现首字下沉效果，如图1.2.1所示。
图1.2.1 首字下沉效果
实现步骤
Ø 将要首字下沉的文字定义到span标签中
Ø 定义span的样式属性font-size:3em
Ø font-size:3em；表示被设置字体是行默认高度的3倍
关键代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
p{
font-family:Arial;
font-size:12px;
width:300px;
}
.firstLetter{
font-size:3em;
float:left;
color:#cc0000;
}
</style>
</head>
<body>
<p>
<spanclass="firstLetter">HTML5</span>草案的前身名为Web Applications 1.0，於2004年被WHATWG提出，於2007年被W3C接纳，并成立了新的HTML工作团队。HTML标准自1999年12月发布的 HTML 4.01后，后继的HTML 5 和其它标准被束之高阁，为了推动web标准化运动的发展，一些公司联合起来，成立了一个叫做 Web HypertextApplication Technology Working Group （Web 超文本应用技术工作组 -WHATWG） 的组织，他们重新拣起 HTML 5。
</p>
</body>
</html>
实训任务3：制作站点腾讯搜索页面
训练技能点Ø 使用样式属性padding
Ø 使用background设置文本框的背景
需求说明
制作搜索页面的文本框，如图1.2.2所示。
图1.2.2 带背景的文本框
关键代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.search_input{
background-image:url(soso.jpg);/*设置背景图像路径*/
background-repeat:no-repeat;/*禁止背景平铺*/
background-position:right;
border:1pxsolid #99cccc;
width:200px;
height:23px;
line-height:23px;/*设置行高为23px*/
margin:5px;
}
</style>
</head>
<body>
<input type="text"name="keyword" class="search_input"/>
</body>
</html>
练习部分
需求说明
在“指导部分”的基础上，创建网站的搜索页面，如图1.2.3所示。
图1.2.3 搜索页面
提示：
（1） 定义一个层，边框的样式设为虚线：border: 1pxdashed green;
（2） 设置文本框的背景：background:url(images/soso.jpg)no-repeat right;
（3） 设置文本框的内边距以保证文本框中的内容不覆盖图片：padding-right:31px;
实训任务4：制作垂直菜单效果
需求说明创建XHTML页面，实现垂直菜单效果，打开页面的初始状态如图1.2.4所示，当鼠标移动到某个链接上时，效果如图1.2.5所示。
图1.2.4 垂直菜单-1 图1.2.5 垂直菜单-2
关键代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
a{
display:block;
width:80px;
height:30px;
border:1px dashed #060;
margin:5px;
text-align:center;
line-height:30px;
}
a:hover{
border:0px;
margin:6px;
}
</style>
</head>
<body>
<a href="#">首页</a>
<a href="#">相册</a>
<a href="#">日志</a>
<a href="#">留言</a>
</body>
</html>
实训任务5：制作水平菜单效果
需求说明创建XHTML页面，实现水平菜单效果，打开页面的初始状态如图1.2.6所示。
图1.2.6 水平菜单-1
当鼠标移动到某个链接上时，效果如图1.2.7所示。
图1.2.7 水平菜单-2
提示：
（1） 使用 <ul><li></li></ul> 创建菜单
（2） 设置 <li>的宽度高度，float:left;左浮动
（3） 设置 <li> 内的超链接 <a> 的 text-decoration:none; 没有下划线的超链接
（4） 设置 <li> 内的超链接 <a> 的 a:hover样式：
text-decoration:underline;
background-color:#3F9;
实训任务6：制作水平菜单效果
需求说明数据表格 我相信大家在制作网页的时候一定用得很多， 最经常就是 table 这个标签了。很明显table 就是一个制作表格的标签， 但是使用 ul li 也可以做到数据表格，而且很简单的代码 可以实现，主要还是用 div 和 css 来控制 ul li 吧，可以这样说。先看看 是怎样的一个数据表格。如图效果：1.2.8所示。
图1.2.8所示。
提示：
（1）第一步：去除<UL><LI>的原始风格；list-style-type:none,加入float:left;使每个<UL><LI>向左浮动。
（2）第二步：设置每一行 margin-bottom: 1px;，使每一行底部空出的空隙。margin-left: 1px; 是每一个小格左边空出的空隙。
（3）第三步：顶部的字体大小和粗体另外设置，如果使用 #news li.biaotou ，使用的是class 不是 id。
<liclass="biaotou">第一列</li>
<liclass="biaotou">第二列</li>
<liclass="biaotou">第三列</li>
<liclass="biaotou">第四列</li>
#news li.biaotou
{
font-size: 16px;
font-weight:bold;
background: #999;
}
本章总结
（1）本章主要讲解XHTML和HTML的区别。XHTML（ExtensibleHyperText Markup Language）指可扩展文本标记语言。
（2）标签的分类：block（块状）和inline（行内）。块状：<h1> 到<h6>、<p>、<hr>、<ul>、<ol>、<div>。inline（行内）<br/>、<a>、<span>等。
（3）CSS常用属性：display：none，block，inline。和float，设置元素漂浮到父级容器的左侧，右侧。
巩固练习
一、选择题
1. 在下列标签中不属于块状标签的是（）。
A. <p>
B. <div>
C. <br>
D. <hr>
2. 以下代码编写符合XHTMLI.0标准的是（）。
A. <hr>
B. <p>这是一个段落
C. <div></div>
D. <tableborder=1></table>
3. 以下标签默认情况下能在同一行显示的是（）。
A. <h1>
B. <p></p>
C. <div></div>
D. <a>
4. 以下选项中可以打开邮件客户端程序的是（）。
A. <a href=" mailto：zhangsan@ 263.com">联系我们 </a>
B. <a href="http://www.163.com">网易门户</a>
C. < a name="top">返回顶部</a>
D. <a href="#chapter2">第二章 </a>
5. 以下代码片断符合XHTML1.0标准的是（）。
A. <input type=button/>
B. <input type="button">
C. < input type= "button" disabled />
D. < input type= "button" disabled = "disabled"/>
二、上机练习
使用XHTML和CSS编写如图 1.3.1所示的页面效果。
提示: 将 a 标签定义成块状显示设置宽度和高度，并设置浮动属性“float:left”。
图1.3.1 display属性与 float属性的用法
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- WEB入门.五 页面设计简介
- WEB入门.五 页面设计简介
- ASP.NET2.0新特性快速入门－－Visual Web Developer 2005 速成版简介
- vs2005入门 之 起始页与创建WEB站点和创建新页面[视频]
- 在页面中直接设计TreeView的节点而不使用Web.Sitemap文件在运行时出错信息
- PHP框架设计入门之三：页面模板
- 设计模式2思考——web框架中—页面功能设计的实现
- WEB 页面简介
- Joomla官方网站的新页面(By Ruisin • 8 21st, 2008 • Category: web平面设计 )
- Web----logout---- 注销页面设计
- 在页面中直接设计TreeView的节点而不使用Web.Sitemap文件在运行时出错信息
- JavaScript从入门到精通:Web页面信息交互
- 如何把INFOPATH设计成的表单脱离开INFOPATH应用到WEB页面中
- AJAX实现web页面中级联菜单的设计
- AJAX实现web页面中级联菜单的设计
- 黄金比例与Web页面设计
- web页面的设计思考
- 在页面中直接设计TreeView的节点而不使用Web.Sitemap文件在运行时出错信息
- 在页面中直接设计TreeView的节点而不使用Web.Sitemap文件在运行时出错
- 使用开源软件设计、开发和部署协作型 Web 站点 01：简介和概述