![Dreamweaver CC中文版网页设计与制作从新手到高手](https://wfqqreader-1252317822.image.myqcloud.com/cover/545/27110545/b_27110545.jpg)
3.7 新手训练营
练习1:使用XHTML制作嵌套列表
{L-End} downloads\3\新手训练营\嵌套列表
提示:本练习中,将使用XHTML来制作一个项目列表和编号列表嵌套在一起的嵌套列表,其中编号列表嵌套在项目列表中。
首先,创建一个空白文档,并切换到【代码】视图中。将光标放置在<body></body>标签之间,输入<ul></ul>标签,创建一个项目列表。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00243.jpg?sign=1739617984-ct9KcDeV27mnAOj0oS34nHbUjxItJ8CG-0-330c46ebf6693034e58d2c35093553d1)
然后,在<ul></ul>标签之间输入“一、学历”文本,并在文本后面输入<ol></ol>标签。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00244.jpg?sign=1739617984-hSNnBkLZhCMmx1OVoyKPFLi0J3ELq68V-0-2fae35abf6be56708b6d96cdede42054)
在<ol></ol>标签之间输入“1.博士”文本,使用同样的方法,输入其他<ol></ol>标签和文本。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00245.jpg?sign=1739617984-CubYqGNIA5zPmx9ORXWg9syRVTBQLcOC-0-dbb2c2d0d14ae33e1c9d6510a2ab4bdc)
使用上述方法,制作第2个嵌套列表。并切换到【设计】视图中,查看最终效果。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00246.jpg?sign=1739617984-nH9AdHV50dPE2o8HMPkodSW0C7NkAkXh-0-29c751d775ea0e6bff52943e51fda033)
练习2:使用XHTML制作特定表格
{L-End} downloads\3\新手训练营\特定表格
提示:本练习中,将使用XHTML代码制作一个3行×4列、宽度为200像素、边框粗细为1、单元格边距和间距为2,以及表格标题位于顶部的特定表格。
首先创建一个空白文档,并切换到【代码】视图中。将光标放置在<body></body>标签之间,输入定义表格基本属性的标签。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00247.jpg?sign=1739617984-tZaFv5HoInr46oQUGQNblmC3IJuvkOYN-0-a0c996e73a4f30050e4b6eb29983f285)
然后,输入<caption></caption>标签,并在标签之间输入表格标题“特定表格”文本。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00248.jpg?sign=1739617984-uF5qZYxdAAHSa3K0Sl5gkU89pCAEfnpl-0-9a133a1db9ec40b5987bed61b823ae8e)
最后输入<tbody></tbody>、<tr></tr>、<td></td>及<th></th>标签,来定义表格和表格列组标题。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00249.jpg?sign=1739617984-ziTk3Ac4ajTeDEiq9EojTUNvjgRHSdza-0-74d32f2dac2e0797f70920650f0b98db)
练习3:使用XHTML制作选择列表
{L-End} downloads\3\新手训练营\选择列表
提示:本练习中,将使用XHTML代码来制作一个具有下拉功能的选择列表。
首先创建一个空白文档,并切换到【代码】视图中。将光标放置在<body></body>标签之间,输入<form></form>标签,并输入用于定义表格属性的id、name和method属性。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00250.jpg?sign=1739617984-1K7aGo7yMEvnDDxH8KZlLgqnS0qpXTdp-0-2c8d9990e0033fc3f12f4f0f66bc238a)
然后,在<form></form>标签中,输入<label></label>标签,定义选择列表的名称。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00251.jpg?sign=1739617984-U7xV5YwrriN5GJBzymGkbtHPMkIBcm2c-0-b4c2644ac3824e2c6a114eab6ebeb3bd)
最后,在<label></label>标签下方,继续输入<select></select>标签,定义选择列表名称和ID,同时在<option></option>标签中输入列表选项。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00252.jpg?sign=1739617984-F6xs2thF6BQIHwOX0mUk7vpnswWP0BWe-0-cefdd74b18174a31d4a74cc01cb0ee86)
练习4:使用XHTML制作日期选择器
{L-End} downloads\3\新手训练营\日期选择器
提示:本练习中,将使用XHTML代码,来制作一个日期选择器。
首先,创建一个空白文档,并切换到【代码】视图中。将光标放置在<body></body>标签之间,输入<form></form>标签,并输入用于定义表单属性的id、name和method属性。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00253.jpg?sign=1739617984-zwow0sRMneXmDFqWcUC0ns20A5ysd669-0-b1f4700041ba71d594d070022fa8c8f2)
然后,在<form></form>标签中,输入<label></label>标签,定义日期选择器的名称。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00254.jpg?sign=1739617984-zQwu7zptFdei18OHjL8N7pxXq8GrkByI-0-e89352a74d97643845bb7f742b85d239)
在<label></label>标签下方,继续输入<input type="date" name="date" id="date">,定义日期选择器。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00255.jpg?sign=1739617984-x1B8E7vP7nGhyF1EUBVnTj4Ys0vgzVIq-0-ed97729e8d872c408152e3bebaa58721)
最后,执行【文件】|【保存】命令,保存网页文档。同时,按下F12键,在网页中预览日期选择器。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00256.jpg?sign=1739617984-cxeMZnXl6bPHwxqVPNTxsZoGowbNvSTf-0-f12d03387e6f1e026bc078ac5e7c6bc8)