6.使用框架布局网页<;一>
一.带着以下问题完成第二题的练习题:
1.框架有什么作用?
2.用框架布局主页跟用表格来布局主页各有什么优势,其区别在哪?
3.怎样使用框架布局网页?
二.练习:
<;一>创建左侧固定的框架网页(必做)
要求:先新建立站点,将“练习一”文件夹复制粘贴到自己的“学号+姓名”文件夹中,然后按如下的步骤完成制作:
1.“文件”>“新建”,在“类别”下面选择“框架集”,然后在右边的“框架集”中选择“左侧固定”,最后点击“创建”。
2.执行“文件>保存全部”,留意整个框架边框所出现有阴影框,分别以文件名“index.html”、“right.html”、“
left.html”保存。
3.将左右两侧的框架的“左边距”、“上边距”都设置为0(方法:先将光标放到对应的框架中,然后在“属性”面板下面单击“页面属性”。
4.左侧框架页面的设置:
(1)将光标置于左侧的框架中,插入一个4行1列的表格,表格宽度为257像素。
(2)在刚才创建的表格的第1行中插入图像“1010_01.gif”;第2行中插入
“1010_05.gif”;第3行中插入“ny_19.gif”
5.右侧框架页面的设置:
(1)将光标置于右侧的框架中,插入一个4行1列的表格,表格宽度为550像素。
(2) 在刚才创建的表格的第1行中插入图像“banner.jpg”;第2行中插入“jianjie.jpg”;
(3)将光标置于第3行中输入文本“您现在的位置:首页>>公司简介”,然后在“属性”面板中设置“大小”为12像素,“高”为30。
(4)在这个表格的第4行中插入一个1行1列,表格宽度为550像素的表格。将这个表格“居中对齐”。然后将下面的这段文字复制到这个表格中,并将字体的大小设置为12像素。
“本厂专业从事电吹风、剃绒器等小家电的设计及制造,企业遵循“与世界潮流同行”的目标,不断创新、科学的管理、完整的检测设备、及多年的生产经验使得每款电吹风都具有一流的品质。特别是工业用电吹风,采用电机使用寿命长,适用于各种塑封、缩封、整烫、吹干等。产品以其满意的售后服务和优良的企业信誉深受国内外消费者的好评和赞誉。
本企业的产品均己通过国家强制性产品认证及CE认证,本厂产品造形新颖、款式繁多、质优价廉,满足各层次的消费需求。
我们热忱欢迎中外客商和新老朋友洽谈业务,共同发展,共创辉煌!”
html表格内外边框颜(5)将光标置于刚才复制的文本中,插入图像“12.gif”,设置图片的“对齐”为“右对齐”;“垂直边距”和“水平边距”都为5
制作完毕后,执行“文件>保存全部”
做完后思考:
1.保存框架网页时跟保存表格布局的网页时有什么不同?
2.这种左侧固定的框架网页,其右边非固定的子网页处什么情况下会出现横向的滚动条?
<;二>创建上方固定左侧嵌套的框架页面:(选做)
要求:将“练习二”文件夹复粘贴到自己的“学号+姓名”文件夹中,然后按如下的步骤完成制作:
1.“文件>新建”,在“常规”选项卡的“类别”处选择“框架集”,选中“上方固定,左侧嵌套”选项,然后单击“创建”。
2.“文件>保存全部”,分别以“index.html”、“right.html”、“left.html”、“top.html”保存这些框架。
上方框架页的设置:
3.将光标定位在上方的框架中,在“属性”面板中,点击“页面属性”,设置“左边距”、
“上边距”都为0
4. 将光标定位在上方的框架中,插入一个1行2列的表格,“高”设置为216像素,“宽”设置为778像素。并且“居中对齐”。
5.在刚才插入的表格的第1列中插入图像“01.jpg”
6. 将刚才插入的表格的第2列进行拆分单元格,将此单元格拆分为2行。
7.设置拆分后的第1行单元格的“背景”为图像“03.jpg”,将“高”设置为185像素。然后再在此插入图像“top.jpg”。
注意:这时插入的图片不能完全显示,需要适应调整框架的高度。
7.将光标置于插分后的第2行单元格,设置其“背景颜”为#EEEEEE,然后在此插入1行6列的表格,“表格的宽度”为80%,并且“右对齐”。再在这个表格的1至6列中分别输入如下的文字:
“首页”、“产品展示”、“新闻中心”、“投资者关系”、“科研人才”、“”
上方的框架页面设置后的效果如下图所示:
左侧框架页的设置:
1.将光标置于左侧框架中,改变“页面属性”,设置“左边距”、“上边距”都为0
2.插入一个6行2列的表格,“表格宽度”为165像素,然后将“填充”设置为5,调整左侧框架的宽度,使其与表格宽度适中。
3.在刚才插入的表格的第1行第1列中,插入图像“over.gif”。在第2行第2列中输入“公司简介”,字体的“大小”设置为16像素,“文本颜”设置为#FF6600,并加粗。
4.分别在第2至6行的第1列中插入“image_10.gif”图像,然后输入如下图所示的文本:
右侧框架页的设置:
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论