真人线上国际
service phone

0566-88666668

<
>
联系我们

0566-88666666

中国杭州

技术案例中心 您的位置: 主页 > 技术案例中心 >

网站开发 框架

发布人: 真人线上国际 来源: 真人线上国际 发布时间: 2020-08-01 18:35

  框架 本章导读 知识目标 技能目标 掌握在网页中创建框架的方法; 掌握框架结构的网页的制作; 掌握为框架命名并导入框架源 掌握浮动框架网页的制作。 文件的方法; 掌握框架集文件的保存方法; 掌握编辑框架内容的方法; 掌握在框架中超链接的方法。 课堂案例:企业邮箱网页的制作 框架和框架集 框架和框架集介绍 框架是网页中常用的布局方式,可以在一个浏览器窗口中划分为 若干区域,并且每个区域显示不同的网页文件,是一种特殊的网 页组织形式。网站的后台、邮箱、论坛等网页,常采用框架结构 组成。使用框架可以非常方便的实现网站的导航效果,让网站的 结构更加清晰,而且各个框架之间不存在干扰问题。 一个框架页是由框架和框架集构成,框架是浏览器窗口中的一个 区域,它可以显示与浏览器窗口的其余部分中所显示内容无关的 网页文件;框架集也是一个网页文件,它将一个窗口通过行和列 的方式分割成多个框架,框架的多少根据具体有多少网页来决定, 每个框架中要显示的就是不同的网页文件。框架的HTML标签为 frame/frame,框架集的HTML标签为frameset/frameset。 创建框架 Dreamweaver提供框架工具面板,可以快捷的创建框架页。 修改框架显示大小和框架属性 修改框架显示的大小主要有三种方法: 方法一:修改框架在浏览器中显示大小,将鼠标指向框架的边框,鼠标的符号为现双箭头 时往两边拖拽框架边框,可以改变框架的显示大小。 方法二:单击【代码】视图,在代码中修改rows=“80,*”或cols=“80,*”的值,如修改 为rows=“169,*”或cols=“257,*”,可以修改框架显示的大小。 方法三:单击【框架】面板中的框架集的边框,显示框架集的属性面板,框架集的属性面板 主要为【边框】、【边框宽度】和【边框颜色】,还可以设置显示的区域大小,如果是上 下结构,则属性面板中有【行】的值设置如果为左右框架集,则有【列】值的设置,通过修 改【行】和【列】的值修改框架的显示大小。 保存框架 每一个框架都有一个默认的框架名称,可以用默认的框架名称,也可以在 保存时自定义名称。选择菜单栏的【文件】【保存全部】,显示另存为对 话框,注意当前默认的文件名,如果默认的文件名中有“frameset”表示 当前保存的文件是个框架集文件,并且出现一条约4像素粗细的虚线将框架 集的范围包含起来,文件名为“kuangjia.html”,单击【保存】按钮. 删除框架和增加框架 删除框架的方式是用鼠标把框架边框拖拽到父框架的边框上,可 删除框架。如图所示,向左拖拽中间的边框到最左方,则在当前 框架结构中删除“left.html”,注意只是在框架结构中删除了 并不是将“left.html”文件删除,文件仍保存在站点中。若想 删除的是“main.html”,则向右拖拽边框。 在框架中使用超链接 在框架式网页中制作超链接时, 一定要设置链接的目标属性, 就是超链接标签a的 “target”属性,为链接的目 标文档指定显示窗口的位置. 案例实施过程:企业邮箱网页的制作 实训目标 掌握常用的框架布局方式; 熟悉修改框架的属性; 掌握DIV+CSS的布局模式; 掌握表格的使用方式。 效果图 浮动框架 浮动框架 浮动框架是一种特殊的框架页面,在浏览器窗口中可以嵌套子窗口,在字窗口中显示页面内 容,这个可以通过iframe/iframe标签来实现,iframe标签的属性值主要有下面几项: width(宽):浮动框架显示的宽度值,单位一般采用像素(px); height(高):浮动框架显示的高度值,单位一般采用像素(px); src(源文件):打开网页时浮动框架中显示的内容,可以是网页,也可以是图片; frameborder(边框):浮动框架的边框效果,值为“0”或“1”,默认值为“1”,设置为“0”,则 为边框的显示效果; scrolling(滚动条):是否显示滚动条,值为“auto”、“yes”、“no”,默认值是“auto”,即浮 动框架中的内容超过宽度值和高度值的大小时,显示滚动条;“yes”是显示滚动条;“no”就是无论 什么情况都不显示滚动条。 name(名称):对浮动框架命名,当超链接的对象需要在浮动框架中打开,就必须将“target” 的值 设置为浮动框架的名称。 浮动框架案例:企业网站产品页制作 实训目标 掌握创建浮动框架的方式; 熟悉浮动框架的属性及属性值 的设置; 掌握浮动框架中显示的方式。 效果图 课堂练习一:玫瑰分类介绍网页 实训目标 熟练使用DIV+CSS布局模式布 局; 熟练使用浮动框架; 熟练将超链接的内容显示在浮 动框架中。 效果图 课堂练习二:网站后台管理页 实训目标 效果图 熟悉使用框架的方式组成网页; 熟悉框架页的保存方式; 熟悉框架页的超链接方式; 本章小结 框架是网页布局的一种方式,特点是可以将一个浏览器窗口划分为几 个区域,方便显示不同的网页文件,常常被使用在教程网站、视频网 站和网站的后台管理等,但是缺点在于由多个网页构成,故打开由框 架构成的网页时,实际是打开多个网页,下载的速度比打开单个网页 的速度慢。 浮动框架能在一个网页中嵌入网页或其他的网页对象,是一种常用的 网页结构,尤其在动态网站中,局部信息用浮动框架显示,可以方便 网页的编辑。

真人线上国际
版权所有©杭州 真人线上国际 通信技术股份有限公司
真人线上国际 京ICP备17049943号 网站地图