本任务利用DIV+CSS三列布局进行起点图书网主页布局实践操作，来详细讲解网页布局中所需用到的技术与方法，让我们学会网页DIV+CSS布局的方法。
【主要知识点】
①绘制出图书网主页三列布局草图。该网页结构分为上中下三部分，即页头（网站标志与旗帜广告区）、中间主体内容（左中右三列排版）、页尾（版权区）。效果如图11.4.1所示。
图11.4.1 图书网主页三列布局草图
②启动Dreamweaver CC 2019，新建Library网站，包含images和css文件夹，分别用来存放图片素材和网页中要用到的外部样式表文件。新建Index.html首页，双击Index.html文件进入首页文件编辑区域。选择CSS设计器，单击源附近的“+”号，创建新的样式文件“library.css”，并在library.css文件内建立“container”ID样式。
“container”样式代码如下：
③在“index.html”主页的<body></body>标签中输入<div></div>标签，在<div>首标签中引用ID“container”样式，网页代码如下：
效果如图11.4.2所示。
图11.4.2 图书网主页布局（一）
④在library.css文件内建立“logo”ID样式。
“logo”样式代码如下：
⑤在引用ID“container”样式的<div>标签之间输入<div></div>标签，并引用ID“logo”样式。源代码如下：(www.daowen.com)
效果如图11.4.3所示。
图11.4.3 图书网主页布局（二）
⑥新建“left”ID样式、“right”ID样式、“center”ID样式。代码如下：
⑦在源代码视图引用Logo样式的div标签下面连续插入三对<div></div>标签，并依次引用“left”“right”“center”样式。源代码如下：
图11.4.4 图书网主页布局（三）
⑨在源代码视图加入一对<div></div>标签，并引用“footer”样式，源代码如下：
效果如图11.4.5所示。
图11.4.5 图书网主页布局（四）
免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。
