网页设计与制作项目式教程 教学课件 作者 凌云项目十一 项目十一 利用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常见布局 单列板式 单列是所有布局中最简单的布局版式，网页内容呈一栏显示，如下图所示。 双列板式 双列版式是网页中最常用的布局版式，在单列版式的基础之上，将其中的网页内容区域拆分成左右两列，呈两栏显示 ，如下图所示。 双列固定宽度版式 双列固定宽度版式各个区域的宽度都是固定的，不论处于何种环境，其版面基本固定，只需要设置每个区域的显示方式及其宽度即可。 双列自适应宽度版式 相对于双列固定宽度版式，自适应宽度版式更为灵活，将宽度设置为百分比即可实现自适应。 双列兼容宽度版式 所谓双列兼容宽度版式是双列中有一栏宽度固定、一栏宽度自适应。 三列板式 三列版式是企事业、商用网站常用的版式，在单列版式的基础之上，将其中的网页内容区域拆分成三种列，呈三栏水平显示， 如右图所示。 三列固定宽度版式 三列自适应宽度版式 三列兼容宽度版式 二列固定一列自适应版式 一列固定二列自适应版式 11.1.2 项目实现 1.分析页面 根据分析图书在线商店网站首页的效果图，将首页内容分解成顶部模块（包含标题和菜单栏）、搜索条、售书者服务、近期书籍、图片链接模块、畅销书以及页脚七大区域，结构下图所示。 2.DIV描述内容 首页内容分成七个区域，每个区域由一个DIV对象来包含 3.页面样式设计 11.1.3 项目训练 1．在11.1.2项目实现的基础上，完成图书在线网站首页各个区域（顶部模块、搜索条、售书者服务、近期书籍、图片链接模块、畅销书以及页脚）的内容描述 2．利用DIV+CSS规划基础知识篇中提及的GS创意家居网站首页 要求：（1）利用DIV+CSS，规划GS创意家居网站首页布局 （2）利用HTML，完成GS创意家居网站首页内容的描述 任务二 DIV+CSS布局页面 【知识目标】 1.熟悉盒模型 2.掌握CSS定位方式 任务二 DIV+CSS布局页面 【技能目标】 1.能够利用CSS定位，灵活控制页面元素的位置 2.能够利用CSS样式，布局页面 任务二 DIV+CSS布局页面 【项目描述】 通过对盒模型的认识，掌握CSS常用的定位方式：精确定位和浮动定位。本次任务在前一个任务完成的基础上，如右图所示，利用CSS样式完成图书在线网站首页面的设计。 11.2.1 项目准备 1.盒模型 在CSS的世界里，盒模型是一个极为重要的概念。所谓盒模型，即网页中任意元素具有一个或多个矩形框，通常称这种矩形框为元素框 。 2.CSS定位属性 静态定位 当CSS规定中定义“postion:static”时，即表示使用静态定位的方式控制元素的位置，static是position属性的默认值。当浏览器在解析页面源代码时，静态定位的元素根据它们在源代码中的位置依次由上至下显示在页面中 固定定位 固定定位是以浏览器窗口为参照物来定义元素的位置，元素不受文档流的影响，不论浏览器窗口大小如何，也不论页面如何滚动，固定定位的元素始终固定在页面的某一位置上。“position:fixed”表示元素采用固定定位，通过定义元素距离浏览器窗口上、下、左、右四条边框的距离来固定位置 绝对定位 绝对定位是一种精确定义元素位置的定位方式，它使元素不受文档流的影响，不占用页面文档的空间。绝对定位的元素相当于悬浮于页面上，以某个参照物来定位元素的位置。“position:absolute”表示元素采用绝对定位，通过定义元素距离参照物上、下、左、右四条边框的距离来精确定位元素的位置。 相对定位