1.4添加菜单栏列表（课件）-高二《网页设计与制作》同步教学（劳动版）

制作网页内容 第一阶段 本次任务要求根据D清单网页效果图的菜单栏内容，本任务需在任务3的基础上使用HTML列表添加菜单栏的内容（不考虑格式）。完成后的网页菜单栏效果图如图1-4所示。 任务描述 任务4 添加菜单栏列表 图1-4 添加网页菜单栏列表内容后的菜单栏效果图 要完成D清单网页菜单栏列表内容的制作，需要： 学习HTML列表的结构组成、无序列表及有序列表的语法； 分析D清单页面中的列表内容，正确选择及使用列表标签完成D清单网页中的列表制作。 任务分析 图1-4-1 D清单菜单栏展开后的网页效果图 任务4 添加菜单栏列表 知识与技能准备 HTML的列表元素是一个由列表标签封闭的结构，包含的列表项由<li></li>组成。 1、列表的结构组成 列表在网页中占有比较大的比重，如信息分类、新闻列表、菜单、排行榜等，列表形式显示信息非常整齐直观，便于用户理解，列表项内部可以使用段落、换行符、图片、链接以及其他列表等。 HTML支持有序、无序和定义列表，常用列表结构有无序列表和有序列表。 知识与技能准备 无序列表就是列表结构中的列表项没有先后顺序的列表形式。无序列表适合列表项之间无级别顺序关系的情况，大部分网页应用中的列表均采用无序列表，其列表标签采用<ul></ul>，其语法形式如下： 1.1 无序列表<ul> <ul> <li>列表项一</li> <li>列表项二</li> <li>列表项三</li> </ul> 打开Visual Studio Code软件，在<body>标签中输入如下代码： 课堂练习1-4-1 无序列表的简单应用 1 2 3 4 5 <ul> <li>HTML</li> <li>CSS</li> <li>JS</li> </ul> 显示效果如下： 课堂练习1-4-1 无序列表的简单应用 图1-4-2 无序列表的简单应用 知识与技能准备 有序列表就是列表结构中的列表项有先后顺序的列表形式，有序列表适合各项目之间存在顺序关系的情况。其列表标签采用<ol></ol>，其语法形式如下： 1.2 有序列表<ol> <ol> <li>列表项一</li> <li>列表项二</li> <li>列表项三</li> </ol> 打开Visual Studio Code软件，在<body>标签中输入如下代码： 课堂练习1-4-2 有序列表的简单应用 1 2 3 4 5 <ol> <li>HTML</li> <li>CSS</li> <li>JS</li> </ol> 显示效果如下： 课堂练习1-4-1 无序列表的简单应用 图1-4-3 有序列表的简单应用 知识与技能准备 当一个列表内容里还有细分的列表，就需要我们嵌套一个列表进去。语法结构与数学中的括号嵌套类似。 2、嵌套列表 打开Visual Studio Code软件，在<body>标签中输入如下代码： 课堂练习1-4-3 列表的嵌套使用 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <ol> <li>牛奶 <ol> <li>纯牛奶</li> <li>高钙奶</li> </ol> </li> <li>茶 <ol> <li>红茶</li> <li>绿茶</li> </ol> </li> </ol> 显示效果如下： 课堂练习1-4-3 列表的嵌套使用 图1-4-4 列表的嵌套使用 打开Visual Studio Code软件，在<body>标签中输入如下代码： 课堂练习1-4-4 有序列表和无序列表的嵌套使用 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <ol> <li>网页前端技术 <ol> <li>HTML</li> <li>CSS</li> <li>JS</li> </ol> </li> <li>网页后台的学习 <ol> <li>ASP</li> <li>PHP</li> <li>CGI</li> </ol> </li> </ol> 显示效果如下： 课堂练习1-4-4 有序列表和无序列表的嵌套使用 图1-4- 4 有序列表和无序列表的嵌套使用 任务实施 1、打开任务3中的index.html文件 2、分析后采用HTML无序列表完成网页菜单栏内容的制作，在之前的<header>网页结构标签中添加列表代码。参考代码如下： 1 2 3 4 5 6 7 8 9 10 11 12 <header> <nav> <ul