05网页布局..pptVIP

* HTML/CSS基础 网页布局 回顾 表单提交数据的方式有哪几种？区别是什么？ 表单常用的页面控件有哪些？ 样式表的三种应用方式有哪些？ * 本章目标 能使用框架对页面进行整体布局 能使用DIV层技术进行页面整体布局 能使用表格进行图文内容的布局 * 框架 * 广告栏顶部框架(top.htm) 导航栏左侧框架(left.htm) 详细内容页面右侧框架 (main.htm) 框架的边框 框架集页面(FrameSet.htm) 框架使用场合 * 页面的一个固定部分显示徽标或静态信息 在另一个固定部分显示导航部分详细内容 在此处显示详细内容， 页面中此部分是变化的。 框架的基本结构 * frameset cols=“25%,50%,*” rows =“50%,*” border=“5” frame src=“the_first.html …… /frameset 框架页面的基本语法 边框尺寸大小 将窗口分割成左中右3个部分,可选 将窗口分割成上下2个部分,可选 第一个窗口要显示的网页 框架的基本结构 * html head titlerows_cols框架/title /head frameset rows=25%,50%,* border=5 frame name=“top src=the_first.html frame name=middle src=the_second.html frame name=“bottom src=the_third.html /frameset /html 如何创建多个复杂的窗口 * 要实现如下图所示的窗口，该如何制作？ 1.分成上下两个窗口 2.把下面的窗口分成左右两个窗口 top窗口 left 窗口 right窗口 如何创建多个复杂的窗口 创建多个复杂的窗口实现步骤如下： 1、创建一个HTML页面“top.html” 2、创建一个HTML页面“left.html” 3、创建一个HTML页面“right.html” 4、新建多框架HTML页面“Frame_Sets.html” * 创建多个复杂的窗口 * ...... frameset rows=20%,* frameborder=0 frame src=top.html name=topframe scrolling=no noresize=noresize frameset cols=20%,* frame src=left.html noresize=noresize“ scrolling=no name=leftframe frame src=right.html name=rightframe /frameset /frameset 设置无框架边框 不显示滚动条 禁止调整框架大小 框架名称，便于超文本链接锚标签target属性所引用 设置窗口链接的显示位置 * target目标窗口属性 name＝“显示的窗口名” frame src=url name=“窗口名”　　 a href=url target=“窗口名” target属性指定了所链接的文件出现在名称为“窗口名”的框架窗口里。 pa href=right.html target=rightframe img src=images/reg.jpg width=158 height=31 border=0 / /p/a pa href=buy.html target=rightframe img src=images/buy.jpg width=160 height=32 border=0 / /p/a target属性指定了所链接的文件出现在名称为“rightframe”的框架窗口里 设置窗口链接的显示位置 target目标窗口属性 四个特殊的窗口 a href=url target=“_blank” 显示在新窗口a href=url target=“_self” 显示在本窗口a href=url target=“_parent” 显示在父窗口a href=url target=“_top”显示在整个浏览器窗口 * 框架布局 框架布局的优缺点和应用场合 * 优点 缺点 应用场合 支持滚动条，方便导航，节省页面下载时间等 兼容性不好，保存时不方便，应用范围有限等 小型商业网站、论坛、后台管理、学习教程等 内嵌框架 iframe元素是文档中的文档，或者好像浮动的框架(frame)。 iframe src=“1.html” width=“200” height=“400” name=“if” /iframe