前端网页设计教学课件作者杜黎强编著第5次课课件幻灯片.pptVIP

教学实施 第4次课教学回顾 第4次课实训任务检查 教学导入 知识点讲解 任务实施 请大家完成本次课课中页：任务4-子任务1、子任务2各文档 第5次课教学内容及实施环节 项目准备：任务4 使用DIV+CSS标准布局网页- 子任务1 编辑修改CSS样式文件 子任务2 三列浮动中间宽度自适 应”布局 分发本次课所用文件 项目准备-任务4–子任务1-任务实施过程.doc 项目准备-任务4–子任务1-任务实施总结.doc 项目准备-任务4–子任务2-任务实施记录.doc 项目准备-任务4–子任务2-任务实施总结.doc 知识点：1、CSS布局优势 优点： 使XHTML代码更整齐; 网页浏览速度更快; 可控性更强，可以将许多网页的风格格式同时更新。 (将网页格式使用一个CSS文件控制，只需修改此CSS文 件，所有使用此CSS文件的页面都会改变) 此外部CSS样式表文件单独保存 知识点： 2、常见的布局类型 标准网页布局格式是：CSS+DIV 常见的布局类型：（提问） 一列： 两列： 三列/行： 一列固定宽度、一列自适应 两列固定宽度、两列宽度自适应、两列右列宽度自适应 三列浮动中间宽度自适应、三行二列居中高度自适应 在DW中创建及编辑CSS样式表文件 请大家快速完成下列操作： 1.使用DW设计网页创建CSS样式表文件 (内部样式表、链接外部样式表) 2.使用DW编辑CSS样式表文件方法？ 属性面板、CSS样式面板 使用DW编辑CSS样式表文件方法？ 属性面板、CSS样式面板 属性面板 CSS样式面板 常见的布局类型 (1)一列固定宽度 此类型布局是所有布局的基础，也是最简单的布局形式。宽 度属性值是固定像素。 举例：一列固定宽度 html head title1列固定宽度/title style type=“text/css” #main{ background-color:#00cc33; border:3px solid #ff3399; width:950px; height:760px; color:#FF0000; } /style /head body div id=“main1列固定宽度/div /body /html CSS样式文件 body id=main div class=text1列固定宽度/div /body 网页结构 (2)一列自适应(任意宽度高度) 举例：一列自适应 html head title1列自适应/title style type=“text/css” #Layer{ background-color:#00cc33; border:3px solid #ff3399; width:90%; height:90%; color:#FF0000; } /style /head body div id=Layer1列自适应/div /body /html 此布局是最常见的一种布局形式，能够根据浏览器窗口大小自动改变宽度或高度值，是很灵活的布局格式。将宽度值改为百分比。 CSS样式文件 body id=“Layer div class=text1列自适应/div /body 网页结构 (3)两列固定宽度 举例：两列固定宽度 html head title两列固定宽度/title style type=“text/css” #left{ background-color:#00cc33; border:1px solid #ff3399; width:300px; height:250px; float:left; } #right{ background-color:#ffcc33; border:1px solid #ff3399; width:300px; height:250px; float:left; } /style /head body div id=left左列/div div id=right右列/div /body /html 此布局需要用到两个div，将两个div的id设置为left和right，先制定宽度，再将两个div并排显示。 CSS样式文件 body div id=left左列/div div id=right右列/div /