1 / 30

网页设计与制作

网页设计与制作. 江西信息应用职业技术学院 电子商务与管理系. 第 8 章 使用框架和 AP DIV 布局页面. 教学目标： 使用 框架和AP DIV布局页面 。 教法：教、学、做一体. 认识框架. 框架， frames ，是在同一浏览器窗口中显示多个网页的结构。. 新建框架. [ 文件 ] 菜单 /[ 新建 ]/ 。。。 [ 布局 ] 工具栏 / 框架 / 。。。 [ 插入 ] 菜单 /[HTML]/ 框架. 保存框架. 多个文件. 框架集文件 子框架页面文件 例如：一个上下拆分的框架，包括三个文件，框架集文件，上部框架页面，下面框架页面. 框架集文件.

jill
Download Presentation

网页设计与制作

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 网页设计与制作 江西信息应用职业技术学院 电子商务与管理系

  2. 第8章 使用框架和AP DIV布局页面 • 教学目标： • 使用框架和AP DIV布局页面。 • 教法：教、学、做一体

  3. 认识框架

  4. 框架，frames，是在同一浏览器窗口中显示多个网页的结构。框架，frames，是在同一浏览器窗口中显示多个网页的结构。

  5. 新建框架

  6. [文件]菜单/[新建]/。。。 • [布局]工具栏/框架/。。。 • [插入]菜单/[HTML]/框架

  7. 保存框架

  8. 多个文件 • 框架集文件 • 子框架页面文件 • 例如：一个上下拆分的框架，包括三个文件，框架集文件，上部框架页面，下面框架页面

  9. 框架集文件 <frameset rows="180,*" framespacing="3" frameborder="yes" border="3" bordercolor="#0000FF"> <frame src="top.htm" name=" topFrame " frameborder="yes" scrolling="no" noresize="noresize" bordercolor="#0000FF" id="上部" title="topFrame" /> <frame src="boot.htm" name="mainFrame" id="mainFrame" title="mainFrame" /> </frameset>

  10. 框架集文件 <frameset rows=“180,*” 其他属性> <frame src=“top.htm” title=“topFrame” 其他属性/> <frame src="boot.htm" title="mainFrame“ 其他属性/> </frameset>

  11. 框架面板

  12. 通过框架面板，有效地选择框架集、某个框架。通过框架面板，有效地选择框架集、某个框架。

  13. 通过<FRAMESET>标记的<rows> row表示从上到下的行和<cols> col表示从左到右的列属性，浏览器窗口被分割。<rows>和<cols>的设置值可以是固定的像素值，可以是总空间的百分比值，还可以是用*以及一个数字相乘表示的分割剩余空间的比例值。 • 每个<FRAME>有一个src属性，给出了这个FRAME的内容。通常是所链网页URL。

  14. cols="80,20%,*" 分为3列，宽度分别为80像素，窗口宽度的20％，以及剩余宽度

  15. rows=“25%,75%” 分为二行，高度分别为25％和75％

  16. 三分框架 <frameset rows="80,*" cols="*" frameborder="no" border="0" framespacing="0"> <frame src=“1.htm" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" /> <frameset cols="100,*" frameborder="no" border="0" framespacing="0"> <frame src=“2.htm" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" title="leftFrame" /> <frame src=“3.htm" name="mainFrame" id="mainFrame" title="mainFrame" /> </frameset> </frameset>

  17. 拆分框架

  18. 继续拆分 • 修改框架布局

  19. 选择某个框架/[修改]/[框架集]/… • 在设计视图下拖曳操作：选中某个框架/[查看]菜单/[可视化助理]/…

  20. 设置框架集与框架属性

  21. 设置超级链接

  22. 认识AP Div

  23. 层DIV • 利用表格布局很难保证定位的精确，因为浏览器和操作平台的不同会使显示的结果发生变化。 • <div> 可定义文档中的分区；可以把网页文档分割为独立的、不同的部分。 • <div> 与CSS结合发挥重大作用。所有主流浏览器都支持 <div> • <div style="color:#00FF00"> <h3>This is a header</h3> <p>This is a paragraph.</p></div>

  24. 精确定位 • H4 { position: absolute; left: 100px; top: 43px } • Absolute，绝对。这项CSS规则让浏览器将<H4>的起始位置精确地定在距离浏览器左边100象素，距离其顶部43象素的位置。

  25. AP Div是DW的一项制作功能，可以采用鼠标拖动方法生成Div。 • AP Div可以层叠而游离文档之上。Z轴属性可以使多个层堆叠。 • 层可以显示或隐藏。

  26. [窗口]菜单/[层]（AP元素）。打开[层]面板。

  27. 制作方式 • 方法一：光标定位/[插入]/[布局对象]/[层]对象。 • 方法二：光标定位/[布局]面板/按钮/拖动制作

  28. 作业

More Related