冀教版八年级全一册信息技术课件 第9课 框架布局网页(共17张PPT)

(共17张PPT)
框架布局网页





























































1
框架与框架式网页













什么是框架布局网页？
一般来说，框架技术主要是通过两种类型的元素来实现的：框架集、框架。
框架是将浏览器窗口划分为不同的部分，每部分装载不同的网页，从而获得在一个浏览器窗口同时显示多个页面的特殊效果。此外，通过为超链接指定目标框架，可以为框架之间建立内容之间的联系，可以实现页面导航的功能。
























2
制作“我的作品”页面













设计“E动少年”网站“我的作品”板块内容结构，制作网页，将以前自己制作的图両、动両等电子作品展示出来。
制作“我的作品”网页，分为准备素材、版面设计、内容编排等步骤。
准备素材。收集整理以前制作的绘画、电子板报、动画、网页等电子作品，每种类型作品各选五个。
用框架布局网页。上部框架显示横幅和导航条，左框架显示作品类型，右框架显示作品名称列表。单击作品类型，右框架显示对应的作品名称列表；单击作品名称，在新窗口显示对应的作品。
任务分析
在站点根目录“myweb”下新建“zuopin”文件夹，在该文件夹下新建“huihualist.htm”、“banbaolist.htm”、“donghualist.htm”、“wangyelist.htm”四个网页和“images”文件夹并复制各作品文件到“images”文件夹内。
在“huihualist.htm”网页中插入5行1列，宽度是“100%”的表格，设置表格“水平居中”。各行分别输入绘画作品名称，设置文字左对齐，分別为每个作品名称创建超链接到对应的作品。用同样方法制作其他三个网页文件。
使用框架布局网页
























3
美化网页













将光标置于框架Tep Frame内，选择“插入——媒体——Flash”，插入大小适当的Flash文件作为网页横幅。通过设置字体和框架背景美化网页。
























4
创建导航链接













导航条是实现网站栏目之间跳转的一种方式，能方便浏览者在不同页面之间的跳转浏览。
在Photoshop中制作与网站风格相匹配的导航图片，一个栏目名称做成一张图片，整个网页的导航条由五张图片组成，在属性面板中设置导航图片的宽、高，使导航图片的大小一致，将导航图片保存到站点根目录“myweb”下的“images”文件夹中。
























5
在页面设置浮动图片













经常在一些网页上看到飘动的图片，我们使用层和时间轴也可以实现。
























6
思考与练习













用左右结构框架制作一个蝴蝶图片展，左框架显示五种蝴蝶的名称，单击蝴蝶名称，右框架显示相对应的蝴蝶图片和介绍。
























THE END