网页设计与制作实训指导书.doc
网页设计与制作实训指导书目 录第一部分 实训概述1一、实训环境1二、实训内容和时间安排1三、实训报告要求2四、实训成绩评定、考核办法2第二部分 单元实训3实训一 唐诗网页制作3一、实训目的3二、知识要点3三、素材准备4四、实训内容4五、实训步骤4六、注意事项6七、参考效果7八、拓展训练7实训二 林书豪个人网页制作8一、实训目的8二、知识要点8三、素材准备8四、实训内容9五、实训步骤9六、注意事项10七、拓展训练10实训三 桂林旅游网首页制作11一、实训目的11二、知识要点11三、素材准备11四、实训内容11五、实训步骤11六、注意事项13七、参考效果13实训四 易购网CSS的应用14一、实训目的14二、知识要点14三、素材准备14四、实训内容14五、实训步骤14六、拓展训练与思考15实训五 百度搜索结果网页制作16一、实训目的16二、知识要点16三、素材准备16四、实训内容16五、实训步骤16六、参考效果18实训六 导航菜单制作19一、实训目的19二、知识要点19三、素材准备19四、实训内容19五、实训步骤20六、拓展训练21实训七 中国音乐榜网页制作24一、实训目的24二、知识要点24三、素材准备24四、实训内容24五、实训步骤25六、注意事项27七、拓展训练28实训八 注册会员网页制作32一、实训目的32二、知识要点32三、素材准备32四、实训内容32五、实训步骤32六、拓展训练35实训九 互通ICP设备管理系统内容页制作39一、实训目的39二、知识要点39三、素材准备40四、实训内容40五、实训步骤41实训十 桂林概况网页制作44一、实训目的44二、知识要点44三、素材准备44四、实训内容44五、实训步骤44六、拓展训练48实训十一 互通ICP设备管理系统首页制作50一、实训目的50二、知识要点50三、素材准备50四、实训内容50五、实训步骤50六、注意事项55实训十二 网页特效-网页中显示当前日期56一、实训目的56二、知识要点56三、素材准备56四、实训内容56五、实训步骤56七、拓展训练58实训十三 风景相册网页59一、实训目的59二、知识要点59三、素材准备59四、实训内容59五、实训步骤59六、注意事项62七、拓展训练62实训十四 页签效果网页63一、实训目的63二、知识要点63三、素材准备63四、实训内容63五、实训步骤63实训十五 下拉菜单制作66一、实训目的66二、知识要点66三、素材准备66四、实训内容66五、实训步骤66六、注意事项68第三部分 综合实训69一、实训目的69二、知识目标69三、能力目标69四、实训内容与步骤69五、实训要求70六、拓展思考70第一部分 实训概述网页设计与制作课程是信息科学与工程学院计算机应用技术、计算机网络技术等专业开设的一门专业必修课程，是为满足行业企业进行网站建设对网页设计制作人员的需求而开设。本课程主要培养学生具有网页设计与制作的基本技能：懂网页制作的基本语言html，熟练应用CSS设置网页样式，能运用DIV+CSS进行网页布局，会在网页中嵌入JavaScript代码制作简单的网页特效，能够使用专业的网页制作工具Dreamweaver设计制作常见网页的静态网页，为后续课程动态网站开发的学习打下良好的基础。一、实训环境电脑需安装有Dreamweaver软件，最好与互联网相连，以便学生能够浏览借鉴优秀网站，搜集相关素材等。二、实训内容和时间安排序号实训内容学时备注1实训一 唐诗页面制作22实训二 林书豪个人网页制作23实训三 桂林旅游网首页制作24实训四 易购网CSS的应用15实训五 百度搜索结果网页制作26实训六 导航菜单制作27实训七 中国音乐榜网页制作18实训八 注册会员网页制作29实训九 互通ICP设备管理系统内容页制作210实训十 桂林概况网页制作411实训十一 互通ICP设备管理系统首页制作412实训十二 网页中显示当前日期113实训十三 风景相册网页114实训十四 页签效果网页215实训十五 下拉菜单页面制作216综合实训30三、实训报告要求实训报告格式参照网页设计与制作课程设计报告模板，主要包括网站名称、网站主题与栏目设计、网站首页设计、网站其他页面的设计、实训总结等内容，排版按照模板格式要求做。四、实训成绩评定、考核办法序号考核项目评分比例1网站效果（1）内容方面：主题明确，内容健康、具体，各个页面的文字、图像、动画能够清晰地表达主题。70%（2）版面结构：版面结构合理，每个页面都有返回上一级或链接到其他页面的文字或按钮。（3）视觉感受：色彩搭配协调、美观，页面设计规范，没有出现乱码、空链接和错误链接。（4）网站风格：网站具有特色，主题、文字、图像、动画有创新。2纪律考核实训期间组织纪律性强，无迟到、早退、缺课现象10%3创新情况制作的网页具有独创性，构思巧妙、有新意5%4成员协作所有的成员在规定时间内完成实训任务，无雷同或抄袭现象。5%5实训报告实训报告格式规范，重点突出，内容充实，实训收获较大10%合计100%五、参考资料1.DIV+CSS网页样式与布局，何丽编著，清华大学出版社2.网页设计与制作实用教程（第2版），陈承欢编著，人民邮电出版社3.Dreamweaver CS3网页制作案例教程，陈承欢编著，高等教育出版社4.网页设计与制作，陈旭东编著，北京大学出版社5. w3school 6.网页设计师联盟7.网页教学网8.标准之路 9.网页设计与制作精品课程网站第二部分 单元实训实训一 唐诗网页制作一、实训目的1.熟悉html文档的基本结构2.熟悉Dreamweaver的安装、启动与退出方法3.熟悉Dreamweaver的工作界面4.学会创建与管理本地站点5.熟悉对网页文档的基本操作新建、打开、保存、关闭6.熟悉html常见文本标签<p></p>、<br />、<hr />等7.掌握常见的图像格式及图像的插入方法8.掌握特殊符号的输入二、知识要点1.html文件的基本结构： <html><head><title>网页标题</title></head><body> 网页内容</body></html>2.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"></html>3. XHTML语法规范 （1）标记和属性名必须使用小写。（2）标记之间无交叉嵌套。<ul><li>正确的无序列表</li></ul>（3）标记必须要封闭。<img src="*.gif" />或<img src="*.gif"></img>（4）属性值必须用引号包括。<table width="500" border="0" >（5）属性不可缩写。<input name="rb_weather" type="radio" value="rain" checked="checked" />（6）利用ID属性取代name属性<img src=“pic01.gif" id="pic01" name="pic01" />4.标题标记<hn></hn>,n取值范围1-65分段标记<p></p>非空元素标记，在XHTML1.0中必须成对使用。语法格式：<p align="center"> 段落内容 </p>属性说明：align（对齐）属性的属性值有三个参数：left（左对齐，默认）、center （居中对齐）和right （右对齐）。6换行标记<br /> 空元素标记，能够使文档强制换行，与p标记分段不同，<br />只是在该段内进行换行。7. 区块标记<div></div>div标记是为HTML文档内大块内容提供结构的容器。在div中可以包含各种网页元素，如文字、图片、动画、表格、表单等等。语法格式：<div id=“top”>文本内容</div>。8. 水平线标记<hr />9.图片标记<img src="wangzhihuan.jpg" width="158" height="200" align="right" />8. 特殊字符输入，&开始，；结束。三、素材准备网页制作所需素材见“唐诗素材”文件夹。四、实训内容 创建一个如唐诗素材文件夹下“唐诗.jpg”所示的网页，网页文件名为tangshi.htm,要求网页的标题是“唐诗”，保存到E盘webpage文件夹中。五、实训步骤（一）使用Windows操作系统自带的记事本程序编写一个网页。1.在E盘下建立一个以webpage命名的文件夹，在webpage文件夹下建立子文件夹tangshi；将唐诗素材中的images文件夹拷贝到tangshi文件夹下。2.在E: webpagetangshi文件夹下右击鼠标，新建一个文本文档，输入以下代码：<html><head><title>唐诗</title></head><body><h2>登鹳雀楼</h2><h4>唐 王之涣</h4><p>白 日 依 山 尽，</p><p>黄 河 入 海 流。</p><p>欲 穷 千 里 目，</p><p>更 上 一 层 楼。</p></body></html>3.保存该文档为tangshi.html4.用浏览器打开预览网页效果（二）使用Dreamweaver创建与管理站点 1.创建站点：在Dreamweaver文档窗口中，依次单击“站点”菜单“新建站点”命令，打开“站点定义”对话框。将站点命名为唐诗，点击“下一步”；选择“否，我不想使用服务器技术”，点击“下一步”；把文件存储在“E:webpagetangshi”，点击“下一步”；如何连接到远程服务器，选“无”；点击完成站点创建。2. 管理本地站点选择“站点”面板“文件”菜单中对应命令，即可对选取文件进行编辑操作。例如，选择文件后，在“站点”面板中选择“文件”菜单中的“打开”命令，则Dreamweaver在文档窗口中打开该文件(当然最简单的方法是在站点中双击相应的文件图标)。在对站点中的文件或文件夹进行操作时，合理地使用右键快捷菜单能大大加快操作速度。例如，在选中的文件夹上单击鼠标右键，然后选择“新建文件夹”命令，可以在相应文件夹中新建一个文件夹。3、管理站点具体操作步骤如下：在站点菜单中单击“管理站点”，打开“管理站点”对话框，如图所示。选中站点后，点击“编辑”，即可对站点进行修改。图1-1管理站点对话框（三）继续编辑制作tangshi.html 1.在Dreamweaver下打开tangshi.html,切换到设计视图，从“唐诗文字.txt”中将注释、作者简介等文字拷贝到网页文件中。2.将“注释”、“作者简介”设为标题4，在“注释”、“作者简介”前插入水平线，按照效果图在1-8注释后按Shift+Enter换行；3.在“王之涣（688742），盛唐诗人。”后插入图片；方法“插入”菜单>“图像”命令，找到要插入的图片wangzhihuan.jpg, 设置图像居右显示。代码为：<img src="images/wangzhihuan.jpg" width="158" height="200" align="right" />4.特殊符号的输入：唐 王之涣之间的黑色圆点，输入方法：“插入”菜单>HTML>特殊字符>其他字符，切换到代码视图下，其对应的html代码为&middot;空格的html代码为&nbsp;5. <div>标记，将古诗设为水平居中，代码如下：<div id="poem" align="center"><h2>登鹳雀楼</h2><h4>唐&middot; 王之涣</h4><p>白 日 依 山 尽，</p><p>黄 河 入 海 流。</p><p>欲 穷 千 里 目，</p><p>更 上 一 层 楼。</p></div>六、注意事项1. 标记之间无交叉嵌套。2. 图片标记的路径要准确3. 按Shift+Enter换行，直接按Enter生成段落4. 设置文字、图片格式时应先选中该元素5. 属性值的引号、html标记符号为英文状态下的符号七、参考效果图1-2 唐诗网页效果图八、拓展训练在唐诗网页制作完成的基础上，同学们可以进一步进行以下拓展练习：1. 水平线颜色、粗细、宽度的设置2. 图片居左、居中、居右的设置，设置图片的大小3. 网页文字字体、大小、颜色的设置4. 网页背景色、背景图片的设置5. 版权符号、小于号、大于号等特殊字符的输入实训二 林书豪个人网页制作一、实训目的1.掌握超链接标记<a></a>2. 掌握网页中设置文本超级连接的方法；掌握设置图片超级连接的方法；锚点超链接的实现3.熟悉列表标记<ul></ul>，掌握列表的建立方法.列表标记可以将网页中相关的信息有条不紊地组织起来。作为块级元素，在DIV+CSS的网页设计中列表标记的使用非常普遍。二、知识要点1. 超链接标记<a>.</a>，语法格式：<a href=" title="百度百科">百度百科</a>2. 锚记链接，用于页面内跳转：<a name="锚记名称"> </a><a href ="#锚记名称">链接文字</a>3.邮件链接<a href= "mailto: rizhaoxinxi" >联系我们</a>4. 无序列表标记<ul></ul>语法格式 ：<ul><li type="circle">列表项1</li><li type="square">列表项2</li>               </ul>5. 有序列表标记<ol></ol>语法格式：<ol><li>列表项1</li><li>列表项2</li></ol>三、素材准备网页制作所需素材见“林书豪”文件夹。四、实训内容根据已经提供的素材制作网页linshuhao.htm, 为网页添加相应的超链接，保存到E盘下webpage文件夹中。要求：1.点击“首页”二字时，可以访问百度百科首页。百度百科网址为：2.点击图片“百度百科”时，可以访问百度百科首页。3.点击“联系我们”能启动电脑上相应的邮件程序给rizhaoxinxi写信4. 个人简介、早年经历、高中生涯、大学生涯、职业生涯制作成列表5. 点击“个人简介”，跳转到当前页面个人简介处；点击“早年经历”，跳转到早年经历内容处，其他项目类推。在每个项目后面输入“返回”，当点击返回时，能够返回到页面顶端。五、实训步骤1.启动Dreamweaver，按照实训一的方法新建站点“林书豪”，打开网页文件linshuhao.html2.选中“百度百科”图片，在属性面板中的“链接”框内输入网址，在“目标”下拉菜单中选择“_blank”,超链接即可在新开窗口中打开；选择“_self”,在当前窗口中打开网页。代码为：<a href="" target="_blank"><img src="images/logo-baike.png" width="137" height="46" /></a>3.选中“首页”二字，在属性面板中的“链接”框内输入网址；在“标题”框内输入“百度百科”，代码如下：<a href="" title="百度百科">首页</a>4. 选中“联系我们”四字，在属性面板中的“链接”框内输入mailto:rizhaoxinxi，即可制作电子邮件超链接。5.保存所做网页，按F12键预览网页，点击相应的超链接查看效果。6.无序列表的制作：选中“个人简介、早年经历 、高中生涯 、国际赛场”，单击“格式”菜单-> “列表”->“项目列表”命令，将选中的文本设置为项目列表。代码变为：<ul> <li>个人简介</li> <li>早年经历</li> <li>高中生涯</li> <li>大学生涯</li> <li>职业生涯</li> <li> 国际赛场</li> </ul>7.制作指向本页内的超级链接,即锚点链接，分两步：首先，将光标定位到第二个“个人简介”前，单击“插入”菜单->“命名锚记”，弹出“命名锚记”对话框，输入锚记名称“jianjie”。代码如下：<a name="jianjie" id="jianjie"></a><h4>个人简介</h4>然后，选中列表部分的“个人简介”四个字，在属性面板中的“链接”框内输入“#jianjie”，保存后按F12键预览，点击个人简介，即可跳转到个人简介的内容介绍处。代码如下：<ul> <li><a href="#jianjie">个人简介</a></li> <li>早年经历</li> <li>高中生涯</li> <li>大学生涯</li> <li>职业生涯</li> <li>国际赛场</li> </ul>同理，将光标定位到“首页”的前面，单击“插入”菜单->“命名锚记”，弹出“命名锚记”对话框，输入锚记名称“top0”；选中“返回”二字，在属性面板中的“链接”框内输入“#top0”，保存后按F12键预览，点击返回，即可跳回到页面顶端。六、注意事项1. 要制作超链接，首先要选中要实现超链接的文本或图片。2. 要实现在同一个页面内的跳转，前提是网页超过一屏。3. 命名锚记的时候，要注意一个页面内名称的唯一性，不能重名。七、拓展训练1.整合以前做的各种网页，创建一个主页index.html，将上述各网页链接起来。2. 完成早年经历、高中生涯、大学生涯等项目的页面内前后跳转。3.选中相应的文本，将项目列表设置成“编号列表”；尝试制作嵌套列表71实训三 桂林旅游网首页制作一、实训目的1掌握表格标记<table></table >、<th></th>、<td></td>2. 学会正确地插入表格，并合理地设置表格的属性3. 学会正确地设置表格中行和列的属性4学会正确地设置表格、单元格的背景图像和背景颜色5学会在表格中正确地输入文字、插入图像6了解网页文件头内容的设置方法二、知识要点1插入表格、设置表格的属性2设置表格、单元格的背景图像和背景颜色3在表格中输入文字、插入图像三、素材准备网页制作所需素材见“桂林旅游网首页制作-表格布局练习”文件夹四、实训内容根据已经提供的素材制作网页guilin.html,效果图如guilin.jpg所示五、实训步骤1启动Dreamweaver,创建名为“桂林旅游”的本地站点，存储路径为E:webpage文件夹；2新建一个网页文档，保存名称为guilin.html3设置网页的标题为“桂林旅游网”4观察网页效果图可以发现桂林旅游网距离网页顶端有一定距离，可以通过以下方式实现：点击属性面板上的页面属性，打开页面属性对话框，设置网页上边距为40px;5单击插入菜单->表格命令，在网页中插入一个1行1列的表格，设置表格宽度343px，高度83px，表格属性如图所示：图 表格属性对话框6.在设计视图下，选中<table>标签，设置表格居中对齐；将光标定位到表格中，在表格中插入图像logo.gif，第一个表格制作完成；7.将光标移至表格外，按回车键，形成一个空段落，在网页中插入一个1行3列的表格，设置表格的宽度为400px，将光标定位到第一个单元格中，设置第一个单元格的属性宽度190px，高度为25px，背景颜色为红色，将光标定位到第三个单元格中，进行同样的设置，属性面板如图所示 ：图 单元格属性面板8.将光标定位到相应单元格中，输入文字“官方咨讯网”、“政务网”，设置文本颜色为白色。代码如下：<font color="#ffffff">官方咨讯网</font>9. 将光标移至表格外，插入第三个表格，1行1列，表格宽420px，居中对齐，设置表格背景色为#00aaff，代码如下：<table align="center" width="420" height="25" bgcolor="#00aaff"><tr><td align="center"><font color="#ffffff" size="2">中文繁體 | English | Korean | Japanese | French | German</font></td></tr></table>10. 将光标移至表格外，按回车键，形成一个空段落，在网页中插入一个3行1列的表格，表格宽400px，居中对齐，表格行高20px，最后的代码如下所示：<table align="center" width="400" ><tr height="20"><td align="center"><font color="#555555" size="2">桂林市旅游局版权所有 桂林旅游 </font></td></tr><tr height="20"><td align="center"><font color="#555555"size="2" >Copyright 2008 All Rights Reserved .</font></td></tr><tr height="20"><td align="center"><font color="#555555"size="2" >桂ICP备05007831号</font></td></tr></table>六、注意事项1.背景颜色为六位十六进制，不要遗漏#；2.<table></table>、<font ></font>标记成对出现，不要遗漏结束标记；3.属性和属性值之间用空格分开，属性值的引号为英文状态下的引号。七、参考效果实训四 易购网CSS的应用一、实训目的1. 熟悉CSS的基本语法2. 熟悉CSS选择器的概念3. 掌握网页中引入CSS的三种常用方式二、知识要点1. 样式规则组成如下：选择器属性:值2. 三种类型选择器：R HTML标记做选择器R 类class选择器R ID选择器3. 网页中引入CSS的三种方式：R 直接把CSS代码添加到html的标记里R 把CSS代码添加到HTML的头信息<head>部分的<style></style>里R 链接样式表，在头信息<head>部分通过<link rel="stylesheet" href="*.css" type="text/css" media="screen" />语句引入CSS文件三、素材准备所需素材见易购网文件夹四、实训内容通过学习易购网帮助页面中CSS的应用，体会CSS的作用，并仿照易购网中CSS的应用在实训一中制作的网页tangshi.html中用三种方式、三种选择器类型分别定义CSS样式。五、实训步骤1.在Dreamweaver中打开易购.html,切换到代码视图，观察其CSS的引入方式；2.打开易购网/CSS文件夹下的global.css文件3.找出其中的HTML标记做选择器,分析其作用。如h1 font-size: 18px; 、h2 font-size: 16px; 、h3 font-size: 14px; 等。4.找出其中的Id选择器，如#header width:990px;margin:0 auto;5.找出应用类选择器的CSS样式，并分析其作用。六、拓展训练与思考1.在tangshi.html网页中尝试使用CSS来改变网页中字体、背景等属性。2ID选择器和类选择器有什么区别？3用CSS设置网页样式有什么优势？ 实训五 百度搜索结果网页制作一、实训目的1. 学会用CSS设置丰富的文字效果2. 掌握CSS控制文字样式的方法3. 学会CSS控制边距与段落的方法二、知识要点1.字体.f1 font-family: "宋体", Verdana, Arial, sans-serif;2.文字大小：P,.f1,h2 font-size:16px;3.文字颜色span.searchcolor:#c60a00; 4.文字粗细h2 font-weight:700; 5.文字下划线 span.quick text-decoration: underline; 三、素材准备所需素材见百度搜索文件夹四、实训内容制作类似百度搜索页面效果的网页五、实训步骤1.在Dreamweaver下新建网页，将素材中提供的文字拷贝到网页中，并保存网页2.首先建立段落的html结构，考虑到标题、正文、百度快照在不同的行，因此每个显示结果分为3段，title标题、content内容、link链接，并分别加上CSS标记。如下所示：<p class="title">中国春节网</p><p class="content">欢迎光临中国春节网,您现在的位置是中国春节网首页! "年"兽的传说 熬年的传说 万年创建历法说 中国古代历法发展春节:传统和现代 元宵灯节源于何时? 猜灯谜的来由 十二生肖的源流、排列与信仰 祭灶 扫尘 贴春联 年画 倒贴福字 除夕夜 .</p><p class="link"> 46K 2011-12-10 -百度快照</p>3.考虑到标题部分有超链接，百度快照部分有超链接，因此需要超链接标记<a>，并且关键字的样式必须区别于其他文字，因此“春节”单独用<span>标记分离，如下所示：<p class="title"><a href="#">中国<span class="search">春节</span>网</a></p><p class="content">欢迎光临中国<span class="search">春节</span>网,您现在的位置是中国<span class="search">春节</span>网首页! "年"兽的传说 熬年的传说 万年创建历法说 中国古代历法发展 <span class="search">春节</span>:传统和现代 元宵灯节源于何时? 猜灯谜的来由 十二生肖的源流、排列与信仰 祭灶 扫尘 贴春联 年画 倒贴福字 除夕夜 .</p><p class="link"> 46K 2011-12-10 - <a href="#" class="quick">百度快照</a></p>4.下面陆续加入CSS对各个段落进行样式控制pmargin:0px;font-family: "宋体", Verdana, Arial, sans-serif;p.titlepadding-bottom:0px;font-size:16px;p.contentpadding-top:3px;/* 标题与内容的距离 */font-size:14px;/* 内容的字体大小 */line-height:1.5;p.linkfont-size:13px;color:#008000;/* 网址颜色 */margin-bottom:20px; /*与下一段之间保持一定的间距*?5.在调整好段落内部的结构以及段落与段落之间的距离后，下面设置文字的颜色，主要是关键字春节与百度快照链接的颜色span.searchcolor:#c60a00;/* 关键字颜色 */a.quickcolor:#666666;/* 快照颜色 */6.这时再仔细观察，标题处关键字下划线的颜色还是蓝色，而不是真实百度页面中的红色，这主要是由于超链接标记导致，因此对标题处的关键字单独设置下划线，如下所示：p.title span.searchtext-decoration:underline;/* 标题处关键字的下划线 */7.保存网页，在浏览器中预览效果六、参考效果百度搜索页面效果图实训六 导航菜单制作一、实训目的1.熟悉超链接的四种状态2. 学会用CSS设置丰富的超链接效果二、知识要点1.超链接的四种状态：R a:link是超级链接的初始状态R a:hover是把鼠标放上去时的状况R a:active是鼠标点击时R a:visited是访问过后的情况。CSS通过上面4个伪类别，再配合各种属性风格制作出千变万化的动态超链接。2.去掉超链接默认的下划线，代码如下：a text-decoration: none; 3.鼠标移过时文字变色a:link,a:visited color:#FFFFFF;a:hovercolor:#FF0000;4.鼠标移过时背景色变化a:link,a:visited background-color:#99CC66;a:hoverbackground-color:#CCCC00; 5.超链接变为块状元素a:link,a:visited display:block;三、素材准备所需素材见“用CSS美化超链接”文件夹四、实训内容1.制作网页，超链接具有以下效果：鼠标移到超链接上时，出现下划线；鼠标离开时，下划线消失；访问前的超链接颜色为黑色，访问后颜色变为灰色。2.制作导航菜单，超链接具有以下效果：超链接无下划线，鼠标移到超链接上时，超链接字体由白色变为红色，鼠标离开时，字体恢复白色；3.制作导航菜单，超链接具有以下效果：超链接无下划线，鼠标移到超链接上时，背景色由绿色（#99CC66）变为黄绿色（#CCCC00） 五、实训步骤1. 新建网页， 在网页中输入文本：首页、国内新闻、体育新闻、国际新闻、娱乐新闻、财经新闻，将其制作成项目列表，并将列表项分别添加超链接，代码如下：<ul><li><a href="#">首页</a></li> <li><a href="#">国内新闻</a></li> <li><a href="#">体育新闻</a></li> <li><a href="#">国际新闻</a></li> <li><a href="#">娱乐新闻</a></li> <li><a href="#">财经新闻</a></li></ul>此时，效果如图所示：2.为了将导航条能够在水平方向显示，通过以下CSS属性进行控制：ullist-style-type:none;text-align:center;lifloat:left;margin-left:3px;此时效果如图所示：3. 为超链接设置以下CSS属性：body font-size:12px;font-family:"宋体"a:link,a:visited display:block;width:100px;height:30px;line-height:30px;border:1px #3333FF solid;background-color:#99CC66;text-decoration:none;color:#FFFFFF;a:hovercolor:#FF0000;background-color:#CCCC00;效果如图：4.保存网页，在浏览器中预览效果六、拓展训练 1. 在一个网页中，经常有多处超链接，不同区域的超链接往往具有不同的效果，制作一个网页，使导航条处的超链接、正文处的超链接具有不同的效果。参考代码如下：区域一 结构代码<div class="soTab"> <a href="#" >网页</
