网页设计与制作项目式教程作者凌云魏慧主编周丽韫吕俊霞田英副主编项目十一项目十一利用DIV+CSS布局网站页面课件.pptVIP

项目十一利用DIV+CSS布局网站页面 任务一 DIV+CSS规划页面 【知识目标】 1.了解DIV对象含义 2.掌握DIV+CSS常见布局 任务一 DIV+CSS规划页面 【技能目标】 1.能够利用DIV描述页面内容 2.能够利用CSS样式，合理规划页面 任务一 DIV+CSS规划页面 【项目描述】 为了便于页面的维护与改版，主流的页面设计多采用内容样式分离的DIV+CSS设计页面。本次任务主要讲述如何利用DIV对象结合CSS样式描述页面内容，规划页面布局。根据网页美工师提供的图书在线网站首页平面效果图，如图11-1所示，分析效果图，完成页面内容的描述以及规划页面布局。 11.1.1 项目准备 1. DIV简介 DIV+CSS网页布局是一种实现内容和样式分离的布局技术，DIV即为可以包含网页内容的容器。DIV对象可以包含图像、文本等多种网页内容，也可以多个DIV对象嵌套使用。 主流的网页设计技术要求内容和样式分离，DIV对象用于描述内容，CSS样式定义页面所需的样式，通过设置DIV对象的id或者class属性，实现将CSS样式应用于DIV对象。 2. DIV+CSS常见布局 单列板式 单列是所有布局中最简单的布局版式，网页内容呈一栏显示，如下图所示。 双列板式 双列版式是网页中最常用的布局版式，在单列版式的基础之上，将其中的网页内容区域拆分成