HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）课件 第5章 为网页添加列表和超链接_第1页
HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）课件 第5章 为网页添加列表和超链接_第2页
HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）课件 第5章 为网页添加列表和超链接_第3页
HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）课件 第5章 为网页添加列表和超链接_第4页
HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）课件 第5章 为网页添加列表和超链接_第5页
已阅读5页，还剩95页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第5章为网页添加列表和超链接《HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）》学习目标/Target了解无序列表、有序列表、定义列表，能够说出不同类型列表的特点。知识目标技能目标掌握无序列表、有序列表、定义列表的使用，能够制作常见的网页列表。掌握列表嵌套的应用，能够使用列表嵌套实现数据的分类展示。熟悉列表样式属性的作用，能够使用列表样式属性实现各种列表效果。熟悉通过背景图像定义列表项目符号的方法，能够使用背景图像实现列表项目符号。学习目标/Target掌握超链接的作用，能够实现网页跳转。掌握锚点链接的作用，能够使用锚点链接提高网页信息的检索速度。掌握链接伪类的用法，能够使用链接伪类控制超链接样式。技能目标素养目标通过制作美味食谱页面，深入了解美食文化和烹饪技巧，培养热爱生活的态度。通过制作电商团购悬浮框和电商页面，提升网页设计能力。章节概述/Summary通过对盒子模型的学习，大家已经可以初步构建网页的基本框架。然而，构建一个完整的网站不仅要求单个网页结构清晰，还需确保各页面间信息的流畅衔接与内容的有序展示。为此，列表和超链接成为不可或缺的元素。本章将对列表和超链接的相关知识进行讲解。目录/Contents010203案例5-1美味食谱页面案例5-2电商团购悬浮框案例5-3电商页面美味食谱页面案例5-1案例描述一个网站由多个页面构成，用户访问网站时，先看到的通常是首页。如果用户想从首页跳转到其他位置，就需要在首页的相应位置单击超链接。本案例将通过超链接相关知识来制作一个电商页面，其效果如图。知识引入了解无序列表，能够说出无序列表标签的特点。学习目标1.无序列表标签知识引入ul是英文“unorderedlist”的缩写，译为中文是无序列表。无序列表是一种不分排列顺序的列表，各个列表项之间没有级别之分。无序列表使用<ul>标签定义，内部可以嵌套多个<li>标签。定义无序列表的基本语法格式如下。<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li>...</ul>1.无序列表标签知识引入<ul>标签和<li>标签都拥有type属性，用于指定列表项目符号。不同type属性值对应不同的列表项目符号。表中列举了无序列表常用的type属性值及对应的列表项目符号。1.无序列表标签type属性值列表项目符号disc（默认值）●circle○square■知识引入下面通过代码演示无序列表的使用方法，如例。1.无序列表标签<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>无序列表</title></head>知识引入1.无序列表标签<body><ul><litype="circle">北京</li><li>上海</li><li>天津</li><li>重庆</li></ul></body></html>知识引入运行示例代码，效果如图。1.无序列表标签注意①在HTML5中，不建议直接使用<ul>标签的type属性。②<ul>标签中需要嵌套<li>标签，不建议在<ul>标签中直接输入文本。知识引入1.无序列表标签知识引入了解有序列表，能够说出有序列表标签的特点。学习目标2.有序列表标签知识引入ol是英文“orderedlist”的缩写，译为中文是有序列表。有序列表是一种强调排列顺序的列表，使用<ol>标签定义，内部可以嵌套多个<li>标签。例如，网页中常见的歌曲排行榜、游戏排行榜等都可以使用有序列表来定义。定义有序列表的基本语法格式如下。<ol><li>列表项1</li><li>列表项2</li><li>列表项3</li>...</ol>2.有序列表标签知识引入在有序列表中，除了type属性外，还可以为<ol>定义其他属性，有序列表相关属性值及描述如表。2.有序列表标签属性属性值描述type

1（默认）列表项目符号显示为阿拉伯数字1,2,3,…a或A列表项目符号显示为英文字母a,b,c,…或A,B,C,…i或I列表项目符号显示为罗马数字I,ii,iii,…或I,II,III,…start数字规定列表项目符号的起始值知识引入下面通过代码演示无序列表的使用方法，如例。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>有序列表</title></head>2.有序列表标签知识引入<body><ol><li>状元</li><li>榜眼</li><li>探花</li></ol>2.有序列表标签知识引入<ol><litype="1"value="1">识别问题</li><!--阿拉伯数字排序--><litype="a">分析问题</li><!--英文字母排序--><litype="I">解决问题</li><!--罗马数字排序--></ol></body></html>2.有序列表标签知识引入运行示例代码，效果如图。2.有序列表标签知识引入了解定义列表，能够说出定义列表标签的特点。学习目标3.定义列表标签知识引入dl是英文“definitionlist”的缩写，译为中文是定义列表。定义列表常用于对名词进行解释，它包含3个标签，即<dl>、<dt>、<dd>。定义有序列表的基本语法格式如下。<dl><dt>名词1</dt><dd>名词1解释1</dd><dd>名词1解释2</dd>...<dt>名词2</dt><dd>名词2解释1</dd><dd>名词2解释2</dd>...</dl>3.定义列表标签知识引入下面通过代码演示定义列表的用法，如例。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>定义列表</title></head>3.定义列表标签知识引入<body><dl><dt>人工智能</dt><dd>简称AI，是一种通过计算机程序或机器来模拟、实现人类智能的技术。</dd><dd>人工智能应用广泛，包括但不限于语言识别、图像识别、自然语言处理等。</dd></dl></body></html>3.定义列表标签知识引入运行示例代码，效果如图。3.定义列表标签知识引入在网页设计中，定义列表常用于实现图文混排效果。其中，<dt>标签用于插入图片，<dd>标签用于插入对图片进行解释和描述的文字。例如，通过定义列表实现的“艺术与设计的结合”模块，其结构如图。3.定义列表标签注意<dl>、<dt>、<dd>这3个标签之间不允许出现其他标签。知识引入3.定义列表标签知识引入掌握列表嵌套的应用，能够使用列表嵌套实现数据的分类展示。学习目标4.列表嵌套的应用知识引入在网上购物商城中浏览商品时，经常会看到商品被分为若干个类别，这些类别通常还包含若干个子类。类似地，在使用列表时，列表项中也有可能包含若干个子列表项，要想在列表项中定义子列表项就需要对列表进行嵌套。列表嵌套十分简单，只需将子列表嵌套在上一级列表的列表项中即可实现。4.列表嵌套的应用知识引入例如，在无序列表中嵌套一个有序列表，代码如下。4.列表嵌套的应用<ul><li>列表项1</li><li>列表项2</li><li><ol><li>子列表项1</li><li>子列表项2</li></ol></li></ul>知识引入下面通过代码对列表嵌套进行演示，如例。4.列表嵌套的应用<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>列表嵌套</title></head>知识引入4.列表嵌套的应用<body><h2>绿色低碳生活方式</h2><ul><li>节约能源资源<ol><!--有序列表的嵌套--><li>节约用水用电</li><li>少用一次性制品</li></ol></li>知识引入4.列表嵌套的应用<li>选择低碳出行<ul><!--无序列表的嵌套--><li>优先步行、骑行或公共交通出行</li><li>家庭用车优先选择新能源汽车或节能汽车</li></ul></li></ul></body></html>掌握无序列表、有序列表、定义列表的使用，能够运用列表相关知识制作一个美味食谱页面。学习目标项目实现项目实现电商团购悬浮框案例5-2案例描述单调的列表项往往并不能满足网页制作的需要，可以使用CSS中的背景图像，为各列表项设置更丰富的图像，使列表的样式更加美观。本案例将通过列表样式属性和背景图像制作电商团购悬浮框，其效果如图。知识引入熟悉列表样式属性的作用，能够使用列表样式属性实现各种列表效果。学习目标1.列表样式属性知识引入在定义无序列表或有序列表时，可以通过标签的属性控制列表项目符号，但该方式不符合结构与样式分离的网页设计原则，为此CSS提供了一系列的列表样式属性，用于单独控制列表项目符号。list-style-type属性list-style-image属性list-style-position属性list-style属性1.列表样式属性知识引入在CSS中，list-style-type属性用于控制列表项目符号的样式，其属性值有多种，对应的显示效果各不相同，list-style-type属性值和描述如表。01list-style-type属性属性值描述属性值描述disc实心圆（无序列表使用）none不使用列表项目符号（无序列表和有序列表使用）circle空心圆（无序列表使用）cjk-ideographic简单的表意数字，如“一、二、三”（有序列表使用）square实心方块（无序列表使用）georgian传统的格鲁吉亚编号方式（有序列表使用）1.列表样式属性知识引入01list-style-type属性属性值描述属性值描述decimal阿拉伯数字（有序列表使用）decimal-leading-zero以0开头的阿拉伯数字（有序列表使用）lower-roman小写罗马数字（有序列表使用）upper-roman大写罗马数字（有序列表使用）lower-alpha小写英文字母（有序列表使用）upper-alpha大写英文字母（有序列表使用）lower-latin小写拉丁字母（有序列表使用）upper-latin大写拉丁字母（有序列表使用）hebrew传统的希伯来编号方式（有序列表使用）armenian传统的亚美尼亚编号方式（有序列表使用）1.列表样式属性下面通过代码演示list-style-type属性的用法，如例。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>list-style-type属性</title>01list-style-type属性知识引入1.列表样式属性<style>ul{list-style-type:square;}ol{list-style-type:decimal;}</style></head>01list-style-type属性知识引入1.列表样式属性<ol><li>嫩绿</li><li>柳绿</li><li>竹青</li></ol></body></html>01list-style-type属性知识引入1.列表样式属性知识引入01list-style-type属性运行示例代码，效果如图。1.列表样式属性一些常规的列表项目符号并不能满足网页制作的需求，为此CSS提供了list-style-image属性，其取值为图像的URL。使用list-style-image属性可以为各个列表项设置列表项目图像，使列表的样式更加美观。02list-style-image属性知识引入1.列表样式属性下面通过代码演示list-style-image属性设置列表项目图像的用法，如例。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>list-style-image属性</title>02list-style-image属性知识引入1.列表样式属性<style>ul{list-style-image:url(images/apple.jpg);}</style></head>02list-style-image属性知识引入1.列表样式属性<body><h2>苹果功效</h2><ul><li>健脾养胃</li><li>生津止渴</li><li>美容养颜</li></ul></body></html>02list-style-image属性知识引入1.列表样式属性运行示例代码，效果如图。02list-style-image属性知识引入1.列表样式属性知识引入在设置列表项目符号时，有时需要控制列表项目符号的位置，即列表项目符号相对于列表文本的位置。在CSS中，list-style-position属性用于控制列表项目符号的位置，其取值有inside和outside两种。默认值，列表项目符号位于列表文本外。insideoutside列表项目符号位于列表文本内。03list-style-position属性1.列表样式属性下面通过代码演示list-style-position属性的用法，如例。<!DOCTYPEhtml><html><head><metacharset="UTF-8">

<title>list-style-position属性</title>知识引入03list-style-position属性1.列表样式属性<style>.in{list-style-position:inside;}

.out{list-style-position:outside;}li{border:1pxsolid#CCC;}</style></head>知识引入03list-style-position属性1.列表样式属性<body><h2>端午节</h2><ulclass="in"><li>端午节，又称端阳节、蒲节、重午节、天中节等。</li><li>时间为农历五月初五。</li><li>习俗包括划龙舟、吃粽子、佩香囊等。</li></ul>知识引入03list-style-position属性1.列表样式属性<ulclass="out"><li>春节</li><li>清明节</li><li>中秋节</li></ul></body></html>知识引入03list-style-position属性1.列表样式属性运行示例代码，效果如图。知识引入03list-style-position属性1.列表样式属性在CSS中，列表样式同样可以通过一个复合属性list-style来进行设置。使用list-style属性综合设置列表样式的语法格式如下。知识引入list-style:列表项目符号列表项目符号位置列表项目图像1.列表样式属性04list-style属性知识引入使用复合属性list-style时，通常按上面语法格式中的顺序对样式进行书写，各个样式之间以空格隔开，不需要的样式可以省略。下面通过代码演示list-style属性的用法，如例。04list-style属性<!DOCTYPEhtml><html><head><metacharset="UTF-8">

<title>list-style属性</title>1.列表样式属性知识引入04list-style属性<style>ul{list-style:circleinside;}.one{list-style:outsideurl(images/cake.jpg);}

</style></head>1.列表样式属性知识引入04list-style属性<body><ul><liclass="one">中秋节</li><li>我国四大传统节日之一，又叫团圆节。</li><li>庆祝方式包括赏月、吃月饼、赏花灯等。</li></ul></body></html>1.列表样式属性知识引入运行示例代码，效果如图。04list-style属性1.列表样式属性知识引入熟悉通过背景图像定义列表项目符号的方法，能够使用背景图像实现列表项目符号。学习目标2.通过背景图像定义列表项目符号知识引入由于列表样式属性对列表项目图像的控制能力不强，所以实际工作中常通过为标签设置背景图像的方式实现列表项目图像。下面通过代码来演示通过背景图像定义列表项目符号的方法，如例。2.通过背景图像定义列表项目符号<!DOCTYPEhtml><html><head><metacharset="UTF-8">

<title>通过背景图像定义列表项目符号</title>知识引入2.通过背景图像定义列表项目符号<style>dd{list-style:none;height:26px;line-height:26px;background:url(images/logo.png)no-repeatleftcenter;padding-left:25px;}</style></head>为<dd>标签设置背景图像知识引入2.通过背景图像定义列表项目符号<body><h2>熊猫</h2><dl><dt><imgsrc="images/panda.png"></dt><dd>黑眼圈重</dd><dd>黑白分明</dd><dd>圆润可爱</dd></dl></body></html>知识引入运行示例代码，效果如图。2.通过背景图像定义列表项目符号项目实现掌握列表样式属性和通过背景图像定义列表项目符号，能够通过列表样式属性和背景图像制作电商团购悬浮框。学习目标项目实现电商页面案例5-3案例描述一个网站由多个页面构成，用户访问网站时，先看到的通常是首页。如果用户想从首页跳转到其他位置，就需要在首页的相应位置单击超链接。本案例将通过超链接相关知识来制作一个电商页面，其效果如图。知识引入掌握超链接的作用，能够实现网页跳转。学习目标1.超链接知识引入1.超链接在HTML中创建超链接非常简单，只需用<a>标签嵌套需要成为链接的对象即可。创建超链接的基本语法格式如下。<ahref="链接目标"target="链接页面的打开方式">文本或图像</a>用于指定链接页面的打开方式，其常用取值有_self和_blank两种，其中_self为默认值，表示在原窗口中打开链接页面，_blank表示在新窗口中打开链接页面。hreftarget用于指定链接目标的URL。当<a>标签应用href属性时，<a>标签就具有链接的功能。知识引入下面通过代码演示创建超链接的方法，如例。1.超链接<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>创建超链接</title></head>知识引入1.超链接<body><ahref="/"target="_self">百度</a>target="_self"原窗口打开<br><ahref="/"target="_blank">中国大学MOOC</a>target="_blank"新窗口打开</body>

</html>知识引入运行示例代码，效果如图。1.超链接知识引入当单击链接文本“百度”和“中国大学MOOC”时，浏览器会分别跳转到对应页面。1.超链接注意①如果暂时没有确定链接目标，通常将<a>标签的href属性值定义为“#”，即href="#",表示该链接显示为一个空链接，此时单击链接文本，页面没有任何变化。②在网页中不仅可以为文本创建超链接，还可以为图像、音频、视频等创建超链接。知识引入1.超链接知识引入掌握锚点链接的作用，能够使用锚点链接提高网页信息的检索速度。学习目标2.锚点链接如果网页内容较多，页面过长，浏览网页时便需要不断地拖动滚动条来查看网页的内容。这样操作不方便且效率较低。为了提高检索信息的速度，HTML提供了一种特殊的链接——锚点链接。通过锚点链接，用户能够快速定位到目标内容。创建锚点链接分为两步。知识引入2.锚点链接创建锚点链接创建锚点链接对象创建锚点跳转目标知识引入2.锚点链接创建锚点链接对象，语法格式如下。<ahref="#id名称">链接文本</a>01创建锚点链接对象id名称是指CSS中id选择器的名称知识引入2.锚点链接创建锚点跳转目标，语法格式如下。<标签名id="id名称">显示内容</标签名>02创建锚点跳转目标知识引入下面通过代码演示创建锚点链接的方法，如例。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>创建锚点链接</title></head>2.锚点链接知识引入<body>中国古代四大发明<ul><li><ahref="#one">印刷术</a></li><li><ahref="#two">指南针</a></li><li><ahref="#three">火药</a></li><li><ahref="#four">造纸术</a></li></ul>2.锚点链接知识引入下面通过代码演示创建锚点链接的方法，如例。<!DOCTYPEhtml><html><head><metacharset="UTF-8">

<title>创建锚点链接</title></head>2.锚点链接知识引入<h3id="one">印刷术</h3><p>印刷术极大地提高了图书的印刷效率和质量，降低了图书的制作成本。它使得图书能够大量复制和传播，推动了文化和知识的普及。同时，印刷术也促进了文化交流和融合。</p><br><br><br><br><br><br><br><br><br><h3id="two">指南针</h3><p>指南针是人类航海活动中重要的导航工具，使得人类能够在海上进行长途航行而不迷失方向。它促进了地理大发现时代的到来，也促进了世界各地的交流和融合。</p><br><br><br><br><br><br><br><br><br>2.锚点链接知识引入<h3id="three">火药</h3><p>火药改变了战争的面貌，使战争变得更加残酷和激烈。同时，火药也促进了火器的发展，推动了军事技术的进步。</p><br><br><br><br><br><br><br><br><br><h3id="four">造纸术</h3><p>造纸术使人类获得了经济、便利的书写材料，极大地促进了文化的传播和发展。它改变了以往使用竹简、丝帛等书写材料的状况，使得图书的制作成本大大降低。</p></body></html>2.锚点链接知识引入运行示例代码，效果如图。2.锚点链接知识引入当单击“中国古代四大发明”下的链接时，页面会自动定位到相应的内容介绍部分。例如单击“印刷术”后，效果如图。2.

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论