【案例引入】
在目前的5G技术领域，华为可以说掌握着最尖端的技术，而其同时也是全球最大的5G设备制造商之一。华为5G设备之所以能在某些国家广受欢迎，其原因主要有二：一是华为在5G领域的技术拥有绝对统治力，其掌握的技术专利数量在5G业界排名第一，同时也成功打破了以高通为首的欧美企业对国际通信领域的垄断局面，成为名副其实的中国骄傲。二是华为凭借国内更低的人力、物力成本，在价格方面具有得天独厚的优势，由于设备采购基数大，价格优势在5G时代的竞争力尤其明显。
【案例分析】
华为公司是一家集通信设备生产和销售的科技公司，拥有专业、强大的研发队伍，在信息与通信技术方面处于全球领先的地位。它是中国手机5G的领跑者，开创了中国手机5G的发展史，也是我国第一家自主研发手机移动中央处理器的公司，它拥有独立的操作系统，被称为中国人自己的手机。公司坚持以客户需求为导向，不断创新，敢为人先，勇于进取，致力于走向现代化、国际化，争创世界一流品牌的精神激励着我们勇于探索、刻苦学习，是我们前进的动力。
【主要知识点】
12.1.1 根据需求进行主页布局规划
网页布局首先要弄清楚网页采用哪种布局方式、选取哪种版式结构、文字怎样排列定位等方案后，再制作出页面的布局规划草图。效果如图12.1.1所示。
图12.1.1 “好逸来”书城主页布局草图
12.1.2 建立Library网站
启动Dreamweaver CC 2019，新建Library网站，包含images和css文件夹，分别用来存放图片素材和网页中要用到的外部样式表文件。创建Index.html主页，双击Index.html文件进入主页文件编辑区域。效果如图12.1.2所示。
图12.1.2 建立Library网站
微课12.1 主页布局制作
12.1.3 主页的DIV+CSS布局制作
1）新建样式文件
进入CSS设计器面板，单击源旁边的小加号“+”，创建新的CSS文件“Library.css”，存放在CSS文件夹中。Index页源代码<head></head>中出现如下代码：
“<link href=css/library.css rel=stylesheet type=text/css>”
在Library.css样式文件建立所需样式，也可在Dreamweaver CC程序中进入CSS设计器界面新建样式。第一个样式“.body”是类样式，用于控制网页的整体风格，其余样式都是ID样式，用于控制页面div的布局排版样式。每个div套用一个ID样式，一个ID样式只能用一次。代码如下：(www.daowen.com)
2）网页源代码设置
①在12-2-1.html页的<body></body>标签中的首标签中引用“.body”类样式，输入<div></div>标签，在<div>首标签中引用“container”ID样式。
②在引用“container”ID样式的<div>标签之间输入6对<div></div>标签，并分别引用“header”“left”“right”“center”“frendly”“footer”样式。
③在“header”标签里面又输入两对<div>标签，分别引用“logo”“headerright”样式。
④在“headerright”标签里面又输入两对<div>标签，分别引用“Navigation”“search”样式。
网页源代码如下：
效果如图12.1.3所示。
图12.1.3 “好逸来”书城主页的布局
【课程育人】
通过对案例引入与DIV+CSS网页布局基础知识的融合学习，总结如下：
在进行网页布局时，分析问题要避免主观、片面、孤立、静止地看待问题，要从事物的联系、变化等方面全面地看问题，树立正确的人生观、价值观和世界观。
【课堂互动】
请用DIV+CSS技术制作“湖南红色基地”网站主页的网页布局。
免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。
