文本与列表的美化.doc

任务一：创建导航栏网页0203.HTML任务描述任务为考核项目，请独立完成以下操作任务。利用div区块、ul项目列表和li列表项制作下图所示的导航栏。页面设计网页0203.HTML的整体布局如下图所示，类选择符名称是channel。#channel网页0203.HTML的局部布局结构如下图所示，分为左、中、右3个区块，其类选择符名称分别为left、list和right。#right#left#list实施过程1. 新建文件夹，准备图像文件夹建立文件夹“0203”，在“0203”文件夹中建立子文件夹“css”和“images”，并将所需要的图像复制到“images”子文件夹中。2. 建立样式文件，定义样式在文件夹“css”中建立样式文件main0203.css，定义所需要的样式。样式文件main0203.css的CSS代码见下表。div text-align: left;line-height: 150%;font-size: 12px;color: #555555#channel background: #ffffff;width: 920px;height: 41px;padding: 0px 0px 10px;#channel #left float: left;width: 25px;height: 41px;background-image: url(./images/0201channel_left.gif);background-repeat: no-repeat;#channel #right float: left;width: 25px;height: 41px; background-image: url(./images/0201channel_right.gif);background-repeat: no-repeat;#channel #list float: left;width: 840px;height: 41px;background-image: url(./images/0201channel_background.gif);background-repeat: repeat-x;#channel ul line-height: 41px;list-style-type: none;margin: 0px 0px 10px;#channel li float: left;text-align: center;#channel .space padding:0px 10px;margin:0px 2px;3. 新建网页文档0203.html在文件夹“0203”中创建一个名称为“0203.html”的网页文档。4. 链接外部样式表文件main0203.css切换到网页文档0203.html的“代码视图”，在标签前面输入1行链接外部样式表的代码，如下所示：5. 对网页的页面进行布局切换到代码视图，在网页文档0203.html代码区域的与之间输入下表所示的XHTML代码。 6. 在网页中出入图像和列表在网页文档0203.html代码区域的与之间插入项目列表及其列表项，然后插入图像，输入相应的文字。任务二：创建导航栏网页0204.HTML任务描述任务为考核项目，请独立完成以下操作任务。利用div区块制作下图所示的0204.html网页，对于图像属性，利用图像面板进行设置。页面设计网页0204.HTML的整体布局如下图所示，类选择符名称是currentpath。#currentpath网页0204.HTML的局部布局结构如下图所示，分为左、右2个区块，其类选择符名称分别为#currentpath_icon和#currentpath_text。#currentpath_icon#currentpath_text实施过程1 新建文件夹，准备图像文件夹建立文件夹“0204”，在“0204”文件夹中建立子文件夹“css”和“images”，并将所需要的图像复制到“images”子文件夹中。2 建立样式文件，定义样式在文件夹“css”中建立样式文件main0204.css，定义所需要的样式。样式文件main0204.css的CSS代码见下表。div text-align: left;line-height: 150%;font-size: 12px;color: #555555;#currentpath background: #ffffff;width: 920px;height: 25px;#currentpath_icon height: 14px;float: left;margin-top: 3px;margin-bottom: 3px;margin-left: 20px;#currentpath_text float: left;margin-top: 4px; margin-left: 5px;3 新建网页文档0204.html在文件夹“0204”中创建一个名称为“0204.html”的网页文档。4 链接外部样式表文件main0203.css切换到网页文档0204.html的“代码视图”，在标签前面输入1行链接外部样式表的代码，如下所示：5 对网页的页面进行布局切换到代码视图，在网页文档0204.html代码区域的与之间输入下表所示的XHTML代码。6 在网页中出入图像和列表在网页文档0204.html代码区域插