【案例引入】

如果一个人办了一家华为这样的企业，却把绝大部分的股份给了员工，自己只留下1%。你说员工是什么感觉？这不是假设，这就是华为创始人、总裁任正非已经实现的事。华为遍布全球的17.8万员工，两种感觉是肯定有的——认同感和归属感。华为的理想是高的，它不满足于普通的“好”，而是“0.01秒的进境都值得追求”，是以奥运金牌的标准衡量自我。要实现如此卓越的目标，最关键的是什么？是人，是由一个个有认同感和归属感的人组成的团队。让他们在组织上有归属感、工作上有荣誉感、生活上有幸福感，这就是华为的答案。始终相信一句话：被激励的人心，会凝成最好的战斗力。

【案例分析】

华为的成功离不开团队的支持，它给员工提供认同感和归属感，让员工以公司为家，让他们在组织上有归属感、工作上有荣誉感、生活上有幸福感。重视、关心团队成员，这就是华为成功的诀窍。我们在制作网页开发项目时，也要学会规划、统筹全局、重视团队能力。

【主要知识点】

微课12.2　主页导航制作

导航条是网页制作中必备的一个模块，它通过DIV+CSS排版的方法与技巧，再加上超链接功能的实现，起到网页导航的作用，能够使网站的访问者从浩瀚的互联网信息海洋中快速找到自己所需要的信息，是人们浏览网站时可以从一个页面跳到另一个页面的便利通道。它的结构可以是横向的，也可以是竖向的。导航条的设计一定要简洁、明了、直观，这样才能让用户快速找到自己想要的有效信息。

导航条是怎么制作的呢？一般是在DIV+CSS布局的基础上用无序列表和复合样式来进行制作。

12.2.1　无序列表

1）概念

无序列表就是没有特定顺序的列表项的集合。在无序列表中，每个列表项处于一种并列关系，没有先后顺序之分。

基本语法：

2）应用

无序列表可以用来排版文字，导航文字就是用它来排列的。

案例【12.2.1】“好逸来”书城主页导航文字的制作

在网页源代码中找到引用导航样式的DIV标签：<div id="Navigation"></div>，在这对DIV标签之间输入无序列表标签与列表项目内容。代码如下：

效果如图12.2.1所示。

图12.2.1　“好逸来”书城主页导航文字的排列(www.daowen.com)

12.2.2　复合样式

复合样式的表达方式是把外层标签名写在前面，然后接空格，再接内层标签名，再接属性值。这里可以看出属性值是父子二级标签所共享的。

格式如下：

父级子级{属性：属性值；属性：属性值；}

案例【12.2.2】“好逸来”书城主页导航的CSS复合样式应用

①光标定位在<ul>标签里，进入CSS设计器，单击选择器旁边的“+”号，下面会自动出现“#topright #Navigation ul”样式，如图12.2.2所示。样式文件也会自动出现“#topright#Navigation ul{}”（前面的#topright可以在样式文件里去掉。这一步也可以直接在样式文件里面输入样式代码）。

②单击选择器，在下面的属性面板设置UL标签的CSS样式，代码如下：

#Navigation ul　{

③用以上方法设置UL标签里面的Li标签的CSS样式，代码如下：

设好之后，导航条效果如图12.2.3所示。

图12.2.2　无序列表符合样式的建立

图12.2.3　“好逸来”书城主页导航条的制作

【课程育人】

通过对案例引入与网站导航条制作的融合学习，总结如下：

1.导航条的制作不仅是技术上的掌握，更要用创新的眼光去设计创作导航条的外部造型与颜色。

2.内部不断完善的创新机制是华为成功的关键，它建立了一整套的创新机制，通过机制创新来驱动技术创新，从而汲取更大的力量，我们也要培养理念创新、设计创新的创新思维。

【课堂互动】

请用DIV+CSS技术制作“湖南红色基地”网站主页的导航条。