05 网页布局.ppt

HTML CSS基础 网页布局 2020 1 27 回顾 表单提交数据的方式有哪几种 区别是什么 表单常用的页面控件有哪些 样式表的三种应用方式有哪些 2 2020 1 27 本章目标 能使用框架对页面进行整体布局能使用DIV层技术进行页面整体布局能使用表格进行图文内容的布局 3 2020 1 27 框架 4 广告栏顶部框架 top htm 导航栏左侧框架 left htm 详细内容页面右侧框架 main htm 框架的边框 框架集页面 FrameSet htm 2020 1 27 框架使用场合 5 页面的一个固定部分显示徽标或静态信息 在另一个固定部分显示导航部分详细内容 在此处显示详细内容 页面中此部分是变化的 2020 1 27 框架的基本结构 6 框架页面的基本语法 边框尺寸大小 将窗口分割成左中右3个部分 可选 将窗口分割成上下2个部分 可选 第一个窗口要显示的网页 2020 1 27 框架的基本结构 7 rows cols框架 2020 1 27 如何创建多个复杂的窗口 8 要实现如下图所示的窗口 该如何制作 1 分成上下两个窗口2 把下面的窗口分成左右两个窗口 top窗口 left窗口 right窗口 2020 1 27 如何创建多个复杂的窗口 创建多个复杂的窗口实现步骤如下 1 创建一个HTML页面 top html 2 创建一个HTML页面 left html 3 创建一个HTML页面 right html 4 新建多框架HTML页面 Frame Sets html 9 2020 1 27 创建多个复杂的窗口 10 设置无框架边框 不显示滚动条 禁止调整框架大小 框架名称 便于超文本链接锚标签target属性所引用 2020 1 27 设置窗口链接的显示位置 11 target目标窗口属性name 显示的窗口名 target属性指定了所链接的文件出现在名称为 窗口名 的框架窗口里 target属性指定了所链接的文件出现在名称为 rightframe 的框架窗口里 2020 1 27 设置窗口链接的显示位置 target目标窗口属性四个特殊的窗口显示在新窗口显示在本窗口显示在父窗口显示在整个浏览器窗口 12 2020 1 27 框架布局 框架布局的优缺点和应用场合 13 2020 1 27 内嵌框架 iframe元素是文档中的文档 或者好像浮动的框架 frame 14 2020 1 27 iframe示例 15 行知新闻就业广场资源下载师资介绍 2020 1 27 表格布局 表格的基本用途并不是用来管理布局 但在较为简单的页面中也可以用来分配内容区域表格布局的优缺点和应用场合 16 2020 1 27 页面布局之DIV布局 17 应用了DIV布局的淘宝网主页 2020 1 27 什么是DIV DIV元素是用来为HTML文档内区域的内容提供结构和背景的元素 DIV常与CSS相结合使用与标签的区别块级区域 每个标签代表其将自动换行行内区域 标签结束后将不会换行 18 2020 1 27 什么是DIV 19 19 Layer1 position absolute left 9px top 12px width 418px height 58px z index 1 background color FF0000 ID样式选择符 方便层引用 绝对定位 层距离浏览器左边界和上边界的距离 层的宽度和高度 层叠顺序编号 层背景色 层引用样式 Id为Layer1的层所对应的效果 2020 1 27 相对定位与绝对定位 20 relative 相对于原本位置进行偏移 position relative left 10px top 20px absolate 根据与浏览器上间距 左间距定位 position absolute left 100px top 20px 2020 1 27 DIV布局 HTML 21 21 2020 1 27 DIV布局 CSS 22 body margin 0px text align center middle width 800px margin 0px sidebar width 198px height 400px text align left background color FF6600 float left margin 0px clear both content width 600px height 400px text align left background color FF3300 float right margin 0px 2020 1 27 DIV层布局 DIV布局可以实现对页面的精细控制 在大型项目 门户网站的开发中逐渐成为主流 DIV布局对开发人员的要求较高 其优缺点和应用场合如下 23 2020 1 27 综合布局 24 24 表格 使