网页设计与制作项目式教程 教学课件 作者 凌云项目十一项目十一 利用DIV+CSS布局网站页面.ppt

《网页设计与制作项目式教程 教学课件 作者 凌云项目十一项目十一 利用DIV+CSS布局网站页面.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、项目十一利用DIV+CSS布局网站页面任务一DIV+CSS规划页面【知识目标】1.了解DIV对象含义2.掌握DIV+CSS常见布局任务一DIV+CSS规划页面【技能目标】1.能够利用DIV描述页面内容2.能够利用CSS样式，合理规划页面任务一DIV+CSS规划页面【项目描述】为了便于页面的维护与改版，主流的页面设计多采用内容样式分离的DIV+CSS设计页面。本次任务主要讲述如何利用DIV对象结合CSS样式描述页面内容，规划页面布局。根据网页美工师提供的图书在线网站首页平面效果图，如图11-1所示，分析效果图，完成页面内容的描述以及规划页面布

2、局。图11-1图书在线网站首页平面效果图11.1.1项目准备1.DIV简介DIV+CSS网页布局是一种实现内容和样式分离的布局技术，DIV即为可以包含网页内容的容器。DIV对象可以包含图像、文本等多种网页内容，也可以多个DIV对象嵌套使用。主流的网页设计技术要求内容和样式分离，DIV对象用于描述内容，CSS样式定义页面所需的样式，通过设置DIV对象的id或者class属性，实现将CSS样式应用于DIV对象。2.DIV+CSS常见布局单列板式单列是所有布局中最简单的布局版式，网页内容呈一栏显示，如下图所示。双列板式双列版式是网页中最常用的布局版

3、式，在单列版式的基础之上，将其中的网页内容区域拆分成左右两列，呈两栏显示，如下图所示。双列固定宽度版式双列固定宽度版式各个区域的宽度都是固定的，不论处于何种环境，其版面基本固定，只需要设置每个区域的显示方式及其宽度即可。双列自适应宽度版式相对于双列固定宽度版式，自适应宽度版式更为灵活，将宽度设置为百分比即可实现自适应。双列兼容宽度版式所谓双列兼容宽度版式是双列中有一栏宽度固定、一栏宽度自适应。三列板式三列版式是企事业、商用网站常用的版式，在单列版式的基础之上，将其中的网页内容区域拆分成三种列，呈三栏水平显示，如右图所示。三列固定宽度版式三列自

4、适应宽度版式三列兼容宽度版式二列固定一列自适应版式一列固定二列自适应版式11.1.2项目实现1.分析页面根据分析图书在线商店网站首页的效果图，将首页内容分解成顶部模块（包含标题和菜单栏）、搜索条、售书者服务、近期书籍、图片链接模块、畅销书以及页脚七大区域，结构下图所示。2.DIV描述内容首页内容分成七个区域，每个区域由一个DIV对象来包含3.页面样式设计11.1.3项目训练1．在11.1.2项目实现的基础上，完成图书在线网站首页各个区域（顶部模块、搜索条、售书者服务、近期书籍、图片链接模块、畅销书以及页脚）的内容描述2．利用DIV+CSS规划

5、基础知识篇中提及的GS创意家居网站首页要求：（1）利用DIV+CSS，规划GS创意家居网站首页布局（2）利用HTML，完成GS创意家居网站首页内容的描述任务二DIV+CSS布局页面【知识目标】1.熟悉盒模型2.掌握CSS定位方式任务二DIV+CSS布局页面【技能目标】1.能够利用CSS定位，灵活控制页面元素的位置2.能够利用CSS样式，布局页面任务二DIV+CSS布局页面【项目描述】通过对盒模型的认识，掌握CSS常用的定位方式：精确定位和浮动定位。本次任务在前一个任务完成的基础上，如右图所示，利用CSS样式完成图书在线网站首页面的设计。11.

6、2.1项目准备1.盒模型在CSS的世界里，盒模型是一个极为重要的概念。所谓盒模型，即网页中任意元素具有一个或多个矩形框，通常称这种矩形框为元素框。2.CSS定位属性静态定位当CSS规定中定义“postion:static”时，即表示使用静态定位的方式控制元素的位置，static是position属性的默认值。当浏览器在解析页面源代码时，静态定位的元素根据它们在源代码中的位置依次由上至下显示在页面中固定定位固定定位是以浏览器窗口为参照物来定义元素的位置，元素不受文档流的影响，不论浏览器窗口大小如何，也不论页面如何滚动，固定定位的元素始终固定在页

7、面的某一位置上。“position:fixed”表示元素采用固定定位，通过定义元素距离浏览器窗口上、下、左、右四条边框的距离来固定位置绝对定位绝对定位是一种精确定义元素位置的定位方式，它使元素不受文档流的影响，不占用页面文档的空间。绝对定位的元素相当于悬浮于页面上，以某个参照物来定位元素的位置。“position:absolute”表示元素采用绝对定位，通过定义元素距离参照物上、下、左、右四条边框的距离来精确定位元素的位置。相对定位所谓相对是以元素的原始位置为参照物，相对定位即元素以其原始位置为参照物发生偏移而获得新的位置。11.2.2项目实

8、现根据由大及小、从上至下、从左往右的设计顺序，在11.1.2的基础上，依次制作标题和菜单栏、搜索条、售书者服务、近期书籍、免费目录、畅销书以及页脚。11.2.3项目