页面布局.pptVIP

华东师范大学计算中心 5.3 页面布局 1. 用表格实现页面布局 2. 用框架布局页面 3. 层的使用 4. 页面布局原则 5. 网页浏览原理及发布 2. 用框架布局页面 框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口的其余部分（其他框架）不同的HTML文档 框架集是一个HTML文件，它定义一组框架的布局和属性，包括框架的数量、框架的大小、框架的位置以及框架中初始页面的统一资源定位符（URL） 框架集网页文件本身不显示在浏览器中，框架集网页只是向浏览器说明如何显示一组框架，以及这些框架中应该显示哪些文档 为了使布局更多样，框架集可以嵌套 框架的概念 分割Web页面，每一部分是一个独立页面 漫游 链接点与目标页面 框架集合 组合了集合中所有页面信息的一个单独页面，具有与服务器通信的信息，使集合中的页面显示出来。 框架集网页示例 框架集HTML标记 FRAMESET 、FRAME 创建框架集网页 在创建框架集网页时 各框架中网页文件可能已经存在（需要在创建框架集网页完成后，对各框架分别指定其对应的网页文件） 也可以一同创建（创建时自动指定了各框架分别对应的网页文件） 菜单【文件】?【新建】，弹出【新建文档】对话框 在弹出的【新建文档】对话框中选择【常用】选项卡，【类别】为框架集，选择与设计最接近的一种框架集类型 单击【创建】按钮后，会弹出【框架标签辅助功能属性】对话框，在其中设置各框架标题。 注意其中框架名，在指定超级链接的目标时，可能会用到。 保存框架网页 在浏览器中浏览框架集网页前，需要先保存框架集文件及要在其中显示的所有网页文档 选中框架集，选择菜单【文件】?【保存框架集】或【框架集另存为】，保存框架集文件 将光标置于某一框架页面，选择菜单【文件】?【保存框架】或【框架另存为】，保存该框架文件 选择菜单【文件】?【保存全部】，将保存与该框架集关联的所有文件 修改框架布局 拖曳框架边框线 【修改】【框架页】菜单命令 拆分上、下、左、右框架 编辑框架 删除框架 将光标移至框架边框，将框架边框拖离页面或拖曳到父框架的边框上，即可删除。 如果该框架中指定的网页文件也不再需要，可通过【文件】面板将该网页文件一同删除。 编辑框架 设置框架集属性 菜单【窗口】?【框架】，调出【框架】面板 较细的边框包围的部分是框架，较粗边框包围的是框架集，在【框架】面板中点击较粗边框即可选中框架集 选中后，在【属性检查器】中可以详细设置框架集的各种属性 编辑框架 设置框架属性 使用类似选中框架集的方法选中框架；也可以在【文档窗口】中，用Alt键＋鼠标单击框架中网页，选中框架 选中框架后，使用【属性检查器】详细设置框架的各属性 框架中的链接设置 某框架中超链接所指向的网页文件，能在另一框架中显示，需要设置超链接的链接目标 选中需要创建链接的文本或对象 在【属性检查器】中输入其所指向的【链接】，【目标】弹出式菜单中选择链接目标在其中显示的方式 框架中的链接设置 目标选项的含义 _blank：总在新的浏览器中打开链接文档 _parent：在显示链接的框架的父框架集中打开链接的文档，同时替换整个框架集 _self：在当前框架中打开链接，同时替换该框架中内容 _top：在当前浏览器窗口中打开链接的文档，同时替换所有的框架 各框架名：在指定框架名的框架中打开链接的文档，同时替换原框架中内容 练习 建立如样张所示的网页，具体要求： （1）新建如样张所示的框架页面，页面标题为：网上超市，设置上框架初始高度为80像素，在浏览时可调整高度，初始页面为sh.htm，下方左框架初始页面为zuo.htm，宽度设置为160象素，看不到滚动条，下方右框架初始页面为you.htm，可能会看到滚动条，整个页面以文件名index.htm保存在网站中，图片全都按原名保存在网站的images文件夹中； （2）按样张设置上框架页面标题为Title，所有文字属性：黑体、粗斜体、大小50、藏青色、居中，设置左下框架页面标题为：分类，所有文字属性：黑体、粗体、大小24、藏青色、居中，设置右下框架页面标题为：封面，所有文字属性：楷体，粗体，大小40，红色，居中，并插入图片gift.gif和hy.gif，将hy.gif的大小设置为150*150，所有框架中的页面均设置背景图片：paper.jpg； （3）将左下框架中“办公用品”与“自己的姓名bg.htm”（15表格.ppt中要求创建）创建超级链接，并要求链接结果在右下框架中显示，将“各种食品”与“自己姓名dc.htm” （16表单.ppt中要求创建）创建超级链接，并能在新窗口中打开，将“封面”与you.htm创建超级链接，并能在右下框架中显示结果，单击“征求意见”后，能给自己的邮箱发送电子邮件；