当前位置:首页 >> 互联网 >>

网页 第二章 列表、表格与框架_图文

网页设计 2017-1-16 第二章 列表、表格与框架 本章目标 ? 会使用有序列表实现数据展示 ? 会使用无序列表实现数据展示(重点) ? 会使用定义列表实现数据展示(重点) ? 会使用表格实现数据展示 ? 会使用<iframe>进行页面设计(重点) 列表的分类 ? ? ? 无序列表 有序列表 定义列表 定义列表 有序列表 无序列表 无序列表 声明无序列表 <ul> <li>桔子</li> <li>香蕉</li> <li>苹果</li> </ul> 声明列表项 有序列表 声明有序列表 <ol> <li>桔子</li> <li>香蕉</li> <li>苹果</li> </ol> 声明列表项 定义列表 声明定义列表 <dl> <dt>所属学院</dt> <dd>计算机应用</dd> <dt>所属专业</dt> <dd>计算机软件工程</dd> </dl> 声明列表项 定义列表项内容 表格 表格标签 <table> 行标签 <tr> <td>第1个单元格的内容</td> <td>第2个单元格的内容</td> …… </tr> <tr> <td>第1个单元格的内容</td> <td>第2个单元格的内容</td> …… </tr> </table> 单元格标签 表格 例子 表格标签 <table border=1> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> 运行结果: 行标签 单元格标签 表格对齐方式 align=center 表格对齐方式 – 默认对齐、居中对齐、左对齐、右对齐 单元格对齐方式 – 水平对齐方式、垂直对齐方式 属性 align 水平对齐方式 left center right top valign 垂直对齐方式 middle bottom baseline 值 左对齐 居中对齐 右对齐 顶端对齐 居中对齐 底端对齐 基线对齐 说明 表格的跨列 <table border=1> <tr> 所跨的列数 <th>姓名</th> <th colspan=2>电话</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> 表格的跨行 <table border=1> <tr> <th>姓名</th> <td>Bill Gates</td> 所跨的行数 </tr> <tr> <th rowspan=2>电话</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> 表格的跨行和跨列 …… <tr> 跨列 <td colspan=3>学生成绩</td> </tr> 跨行 <tr> <td rowspan=2>张三</td> <td>语文</td> <td>98</td> </tr> …… 框架 常用框架技术 重用网站顶部 ? ? <frameset>框架 <iframe>内联框架 左侧导航目录 单击左侧导航,改变右 侧内容,顶部和底部不 需要再次加载 重用网站底部 14/40 <frameset>框架 frameset 元素可定义一个框架集。它被用来组织多个窗口(框架)。每个框架存有独 立的文档。在其最简单的应用中,frameset 元素仅仅会规定在框架集中存在多少列或 多少行。您必须使用 cols 或 rows 属性。 表示横向分割 表示纵向分割 <frameset cols=25%,50%,* rows =50%,* border=5> <frame src=the_first.html > <frame src=the_second.html > …… </frameset> 表示引用页面的地址 参考:http://www.w3school.com.cn/tags/tag_frameset.asp 纵向分割窗口 ? 使用 “rows” 属性 <frameset rows=25%,50%,25%> <frame src=/example/html/frame_a.html> <frame src=/example/html/frame_b.html> <frame src=/example/html/frame_c.html> </frameset> 横向分割窗口 ? 使用 “cols” 属性 <frameset cols=25%,50%,25%> <frame src=/example/html/frame_a.html> <frame src=/example/html/frame_b.html> <frame src=/example/html/frame_c.html> </frameset> 混合分割窗口 <frameset rows=50%,50%> <frame src=/example/html/frame_a.html> <frameset cols=25%,75%> <frame src=/example/html/frame_b.html> <frame src=/example/html/frame_c.html> </frameset> </frameset> <iframe>内联框架 引用页面地址 框架标识名 边框 是否出现滚动条 <iframe src=path name=mainFrame frameborder=x scrolling=yes/no noresize=noresize width=x height=y></iframe> 是否允许调整框架窗口大小 框架宽度 框架高度 <ifram

相关文章:
2 列表、表格与框架_图文.ppt
2 列表表格与框架_管理学_高等教育_教育专区。HTML CSS 课件 教程 第二章列表表格与框架 回顾与作业点评提问 如果一个网页中的文字出现乱码可能是什么原 因...
网页制作2html列表、表格和框架._图文.doc
网页制作2html列表表格和框架._幼儿读物_幼儿教育_教育专区。网页制作2html...网页制作案例教程第5章 ... 暂无评价 55页 19.89 网站设计实验二 表格...
TP02 列表、表格、框架总结_图文.ppt
TP02 列表、表格、框架总结 - 第二章 列表表格与框架 回顾与作业点评 提问 如果一个网页中的文字出现乱码可能是什么原 因造成的? 在网页中打开超链接页面在...
第2章:表格、表单、框架_图文.ppt
<Insert Picture Here> ?第二章 表格、表单、框架...? ? ? 框架的概念多窗口页面 相关元素(框架集元素...主体行分组元素 tfoot:尾行分组元素 tr:行元素...
网页设计5-表格与框架._图文.ppt
网页设计5-表格与框架._职业技术培训_职业教育_教育专区。网页设计(5) 在...网页设计5-表格 与框架 168人阅读 58页 2下载券 网页设计_第4章_表格、表...
网页设计-表格、表单及框架_图文.ppt
网页设计-表格、表单及框架 - 第3章 表格、表单及框架 ?3.1 表格 ?3.2 表单 ?3.3 框架 第 1 页 3.1 表格 3.1.1 表格的基本结构 用表格显示信息条理...
第2章 表格、表单和框架_图文.ppt
第2章 表格、表单和框架 内容提要 2.1 表格 2.2 表单 2.3 框架 小结 ?...表 格还可以实现网页的布局。 ? 表单是控件的容器,客户端提交给服务器端的...
网页制作案例教程第5章 表格与嵌入式框架_图文.ppt
网页制作案例教程第5章 表格与嵌入式框架 - 网页制作案例教程(第2版) ? ? ? ? ? ? ? 第1章:网站与网页概述 第2章:HTML5入门 第3章:网页基本编辑 第4...
框架、表格、层与网页布局_图文.ppt
框架表格、层与网页布局 3.1 【案例7】“操作系统比较”网页 3.2 【案例8...? “单位”下拉列表框:用来选择“值” 文本框内数据的单位,单位有像素等。 (...
第二章 网页制作_图文.ppt
第二章 网页制作 第一讲 第二讲 第三讲 第四讲 第五讲 文档、文本及图像操作 超级链接、媒体及表格 框架及图层 表单、模板库 CSS样式行为 第一讲 文档...
网站建设与管理 第5章 在网页中使用表格和框架_图文.ppt
网站建设与管理 第 5章 在网页中使用表格和框架 5.1 在Dreamweaver中使用表格...它能用可视化的方法在 页面上绘制任意数量任意大小的复杂表格,而且能在表 格中...
HTML-4 表单与框架_图文.ppt
HTML-4 表单与框架_表格类模板_表格/模板_实用文档。表单与内嵌框架 技能展示...使用内嵌框架制作网页 2/31 本章结构网络营销 表 表单与内嵌框架 技能展示网络...
2 表格和框架_图文.ppt
第二章 表格应用和布局 框架 回顾与作业点评 超链接的基本语法?如何创建锚链接...需求说明制作贵美注册页面 1、先考虑使用几行几列的表 格 2、单元格的跨行...
第14章 使用表格和IFrame框架布局网页_图文.ppt
第14章 使用表格和IFrame框架布局网页_计算机软件及应用_IT/计算机_专业资料。...紧跟其后的下拉列表框用来设置宽度 的单位,有两个选项“%”和“像素”。③ ...
表格与框架元素_图文.ppt
表格与框架元素 - 网页设计与制作实用教程 吴丰 主编 清华大学出版社 第6章 表格与框架元素 + 6.1 插入并编辑表格 6.1.1 插入表格与选择表格 1.插入表格 ...
表格和框架_图文.ppt
表格和框架 - 网站建设与网页设计 第十章 表格和框架 说明:本章节中的具体操作步骤参见书籍的对应章节。 第十章 表格和框架 10.1 表格基本操作 http://www....
第9章 用表格和框架布局网页_图文.ppt
第9章 用表格和框架布局网页 - 第9章 用表格和框架布局网页 章 桂林电子科技大学信息科技学院信息工程系 本章知识技能要点 表格在网页中的作用 表格的创建与编辑...
dreamweaver框架和表格_图文.ppt
第三章 框架和表格布局表格与表格 Dream weaver 中的表格分为布局表格与表 格,前者主要用于页面布局,后者用于精 确控制各种属性。这两者的本质实际上是 相同的,...
表格、表单和框架_图文.ppt
工具,创建精美网页 重点:表格基础、表单制作 难点:框架应用 表格、表单和框架 ?...align设置标题的水平对齐方 式,有left、center、right三种;valign可以将标题...
第4章 表格、表单与框架_图文.ppt
第4章 表格、表单与框架 - 网页设计课件 另:有很多人反应这个下载打不开我也看