【案例引入】

李彦宏，百度的创立者，1968年出生于山西省阳泉市一个普通家庭。1987年李彦宏参加高考，以山西省阳泉市第一名的成绩考取了北京大学。后来李彦宏在美国留学，并成功考取了美国布法罗纽约州立大学计算机系，在那里学到了当时全世界最先进的计算机技术。学过计算机技术之后，李彦宏来到了道琼斯公司做高级顾问，以及《华尔街日报》的网络版金融实时信息系统设计人员。这份工作对李彦宏意义深远，他在华尔街待了三年，不仅学习了系统的金融知识，而且结识了很多金融大佬，对百度后来的融资起到了很大的作用。1997年，李彦宏进入硅谷一家著名的搜索引擎公司，很快成了技术骨干，并对搜索引擎的基础技术做出了很大贡献。1999年，李彦宏毅然决定回国创立百度，取得巨大成功。2018年1月，李彦宏登上了美国时代周刊，作为中国互联网行业第一个登上时代周刊封面的人物，李彦宏的成就得到了世界的认可。

【案例分析】

李彦宏，百度的创立者，他以优秀成绩考取了北京大学，后又留学美国，学到了当时全世界最先进的计算机技术，并且进入硅谷一家著名的搜索引擎公司，成为技术骨干，对搜索引擎的基础技术做出了很大贡献，1999年回国创业，创立百度，取得巨大成功，是第一个登上《时代》周刊封面的中国互联网人物。我们作为学习IT技术类专业的学生，不但要学习李彦宏对计算机技术的热爱与执着，还要学习他的创新创业思维。

【主要知识点】

12.4.1　插入图片

在引用logo样式的<div>标签中插入案例中的logo图片。源代码如下：

效果如图12.4.1所示。

图12.4.1　logo图片

12.4.2　插入搜索条

在引用search样式的<div>标签中插入表单中的搜索条。源代码如下：

效果如图12.4.2所示。

图12.4.2　图书搜索条

12.4.3　插入banner图片

在引用banner样式的<div>标签中插入案例中的banner图片。源代码如下：

效果如图12.4.3所示。

图12.4.3　banner旗帜广告

12.4.4　新书展示模块（中下）的制作

（1）源代码制作

在引用新书展示样式的<div>标签中插入新书名称与图片。源代码如下：

（2）新书展示样式代码制作

代码如下：

效果如图12.4.4所示。

图12.4.4　新书展示区域

12.4.5　左侧模块制作

①左侧用无序列表制作网页文字。源代码如下：

②样式代码如下：

图12.4.5　左边区域

(www.daowen.com)

效果如图12.4.5所示。

12.4.6　右侧文字的制作方法

①右侧文字源代码：

②右侧文字样式代码如下：

效果如图12.4.6所示。

图12.4.6　右边区域

12.4.7　友情模块（friendly）的制作方法

①源代码如下：

②样式代码如下：

效果如图12.4.7所示。

图12.4.7　友情链接区域

12.4.8　版权（footer）模块的制作

①源代码如下：

②样式代码如下：

效果如图12.4.8所示。

图12.4.8　“footer”区域

全部制作完后，整体效果如图12.4.9所示。

图12.4.9　网页整体效果

注意：

•减少使用DIV标签；

•应该用DIV定义页面的主要框架结构，比如头部、内容、边栏和底部等结构；

•内容应该使用语义化的html标签，而不是DIV标签。

【课程育人】

1.通过对DIV+CSS网页布局基础的学习，培养学生创新思维意识。

2.通过对“好逸来”书城主页布局制作的学习，培养学生学会规划统筹全局、重视团队合作，从事物的联系、变化等方面全面看问题的能力。

3.通过对“好逸来”书城主页导航条制作的学习，培养学生严谨的工作作风，树立实事求是的科学态度。

4.通过对“好逸来”书城主页文字排版的学习，使学生意识到信息工作严谨性和客观性，养成严谨的工作作风，树立实事求是的科学态度。