模块6 列表与超链接

《HTML5+CSS3网页设计技术》授课教案授课教案学校******大学（学院）任课教师***授课题目模块六列表和超链接授课时间长度6学时所用教材HTM5+CSS3网页设计技术，黄玉春主编；中国科学技术出版社教学目标｜知识目标｜（1）掌握列表标签（无序列表、有序列表、自定义列表、列表的嵌套）。（2）掌握用CSS控制列表的样式。（3）掌握超链接标签的使用。（4）掌握用伪类控制超链接。｜能力目标｜（1）能够制作各类列表。（2）能够用CSS控制列表的样式。（3）能够熟练使用超链接标签。（4）能够使用CSS伪类控制超链接。｜素质目标｜（1）通过学习列表和超链接，体会网页设计之美，将HTML和CSS完美结合解决实际问题。（2）列表案例选择社会主义核心价值观相关内容，牢记社会主义核心价值观，树立正确的人生观。（3）实战案例选取人民网的新闻列表，能够在学习专业知识和技能的同时了解社会民生发展大事。教学重点（1）CSS控制列表的样式。（2）用伪类设置超链接样式。教学难点列表和超链接样式的设置。教学方法任务引入法、课堂讨论、理论讲解、实操训练教学用具多媒体教学设备、教材、课件、实训素材教学过程主要教学内容及步骤考勤教师使用App或者点名等方式进行签到；学生按照老师要求签到任务导入浏览器打开一个网页，开发者模式查看网页源码，找出列表代码，引出本任务教学内容。教学内容任务一掌握列表标签列表标签是HTML网页结构中十分常用的标签，按照列表结构划分，html网页的列表标签分为3种。分别是无序列表<ul>、有序列表<ol>和定义列表<dl>。一、无序列表无序列表的标签是ul（英文unorderedlist的缩写）。定义无序列表的基本语法格式如下：<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li></ul><ul></ul>中只能且必须嵌套<li></li>。li标签之间没有先后顺序，是并列存在的。li标签里可以容纳文本、数据、图片、超链接等内容。值得一提的是，列表标签<ul>和<li>自带样式type属性，用于指定列表项目符号。无序列表常用type属性值有3种。（1）disc：默认值。实心小圆点。（2）circle：空心小圆点。（3）square：实心小方块。二、有序列表有序列表的标签是ol（英文orderedlist的缩写）。有序列表是一种强调顺序的列表。定义有序列表的基本语法格式如下：<ol><li>列表项1</li><li>列表项2</li><li>列表项3</li></ol><ol></ol>中只能且必须嵌套<li></li>。<li></li>标识列表项，列表项目使用数字进行标记。li标签里也可以容纳文本、数据、图片、超链接等内容。列表标签<ol>和<li>也自带样式type属性，用于指定列表项目序号。有列表常用type属性值有3种。（1）1：默认值。项目序号显示数字1，2，3…。（2）a或A：项目序号显示为英文字母a，b，c…或A，B，C…。（3）i或I：项目序号显示为罗马数字i，ii，iii…或I，II，III…。有序列表的ol标记还有start属性，该属性用于设置起始编号的数字。默认值为1。即起始编号从1开始。三、自定义列表自定义列表的标签是dl（英文definitionlist的缩写）。自定义列表的基本语法格式如下：<dl><dt>名词1</dt><dd>名词1的描述信息1</dd><dd>名词1的描述信息2</dd>…<dt>名词2</dt><dd>名词2的描述信息1</dd><dd>名词2的描述信息2</dd>…</dl>在上面的语法中，<dl></dl>用于指定自定义列表，<dt></dt>和<dd>/dd>并列嵌套在<dl></dl>中。其中<dt></dt>标签用于指定术语名词，<dd></dd>标签用于对术语名词的解释和描述。一对<dt></dt>标签可以嵌套多对<dd></dd>标签，也就是说一个名词术语可以有多项解释和描述。任务二CSS控制列表样式定义无序列表或有序列表式时，可以通过type属性设置列表项目的符号，但该方法不符合结构与样式分离的网页设计原则，在实际开发中通常用CSS提供的列表样式属性来设置列表的样式。一、列表符号样式要影响列表的样式，最简单(同时支持最充分)的办法就是改变其标志类型。要修改用于列表项的标志类型，可以使用list-style-type属性。此属性可用于设置列表的符号或编号，通常搭配<ol><ul>标签一起使用：list-style-type:value对于type属性，可以设置多种符号类型，具体如下。（1）disc：实心圆（默认值）。（2）circle：空心圆。（3）square：实心方块。（4）decimal：阿拉伯数字。（5）lower-roman：小写罗马数字。（6）upper-roman：大写罗马数字。（7）lower-alpha：小写英文字母。（8）upper-alpha：大写英文字母。（9）none：不使用项目符号。实际网页设计中，尽量使用ul标签标识无序列表，用ol标签标识有序列表。二、图片作为列表符号如果要把列表的标志改成一个图像，可以利用list-style-image属性：ulli{list-style-image:url(*.gif)}说明：这个属性指定作为一个有序或无序列表项标识的图像。三、列表属性简写为简单起见，CSS设置了一个复合属性list-style用于控制列表的样式。可以将以上3个列表样式属性合并为一个方便的属性list-style，就像下面这样：li{list-style:url(example.gif)squareinside}list-style的值可以按任何顺序列出，而且这些值都可以忽略。只要提供了一个值，其他的就会填入其默认值。值得一提的是，在实际网页制作过程中，为了更高效地控制列表显示符号，通常将list-style的属性值定义为none，然后通过为li设置背景的方式实现不同的列表项目符号。任务三设置·超链接超链接是网页中最常用的元素，每个网页通过超链接关联在一起，构成一个完整的网站。定义超链接的对象可以是文字，可以是图像，也可以是其他任何元素。只有通过超链接定义的对象才能在单击后进行跳转。一、定义超链接在HTML中，通过标记符<a></a>来加入超链接。<a>和</a>之间的部分称作超链接源，也就是鼠标所点击的区域，一般以文字或图片作为超链接源。该标记的用法为：<ahref="url"target="winame"title="*">文字或图片</a>标签<a>表示一个链接的开始，</a>表示链接的结束。（1）href属性：用于指定所要链接的目标地址；目标地址是最重要的，一旦路径上出现差错，该资源就无法访问。暂时没有确定链接目标时，通常将href属性设为“#”（即href="#"），表示该链接暂时使用一个空链接。（2）target属性：该属性用于指定打开链接的目标窗口，其默认方式是原窗口。其取值有下面的4种方式。①_parent：在上一级窗口中打开，一般使用分帧的框架页会经常使用。②_blank：在新窗口打开。③_self：在同一个帧或窗口中打开，这项一般不用设置。④_top：在浏览器的整个窗口中打开，忽略任何框架。（3）title属性：该属性用于指定指向链接时所显示的标题文字。1．链接路径若目标地址是网站内部的其他网页，这时目标地址使用相对路径。例如，当前网页有一个“首页”的菜单项，现定义一个超链接，当用户单击时切换到首页，则该链接的定义方法为：<ahref="index.htm">首页</a>若目标地址是外部网站的网页，这时目标地址使用绝对路径。例如，在当前网页创建一个超链接，用以链接到“中央电视台”网站，则实现的代码为：<ahref="">中央电视台</a>另外，也可以用图像作为超链接的标志。假设中央电视台的logo在images目录下，上述链接也可以表示为：<ahref=""><imgsrc="images/logo.gif"></a>2．锚点链接定义锚点链接可以跳转到网页的某一个指定位置。一般事先在该位置定义一个锚点（anchor），定义锚点用<a>标记的name属性来实现，其用法为：<aname="锚点名">也可以用HTML标签的id属性来定义锚点，其用法为：<标签id="锚点名">定义好锚点后，若要链接到网页的某一锚点，则链接的方法为：<ahref="#锚点名">文本</a>3．邮件链接若要使超链接指向电子邮件发送链接，则可以用以下格式来实现：<ahref="mailto:电子邮件地址">…</a>单击该链接，就会启动默认的电子邮件发送程序。4．下载链接当超链接的url是非网页的其他文件，如果文件能够在浏览器中浏览，就直接在浏览器中打开，如*.jpg、*.gif、*.png、*.txt等格式的文件；如果该文件不能在浏览器中浏览，就会出现下载对话框，要求下载目标文件，如*.rar、*.exe等格式的文件。例如，要在当前网页中创建一个超链接，用于下载download/zy1.rar文件，则实现的代码为：<ahref="download/zy1.rar">点击下载</a>二、CSS伪类控制超链接在CSS中，通过伪类可以实现链接的不同状态显示为不同的样式。与超链接相关的伪类主要有4个，这些伪类定义了超链接的4种状态，具体如下。（1）a:link{CSS样式规则;}：未访问的链接。（2）a:visited{CSS样式规则;}：已访问的链接。（3）a:hover{CSS样式规则;}：鼠标划过链接。（4）a:active{CSS样式规则;}：已选中的链接。需要注意的是，在CSS定义中，a:hover必须被