使用框架布局网页

《使用框架布局网页》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、6.使用框架布局网页<一>一．带着以下问题完成第二题的练习题:1.框架有什么作用？2.用框架布局主页跟用表格来布局主页各有什么优势，其区别在哪？3.怎样使用框架布局网页?二．练习：<一>创建左侧固定的框架网页（必做）要求：先新建立站点，将“练习一”文件夹复制粘贴到自己的“学号+姓名”文件夹中，然后按如下的步骤完成制作：1.“文件”>“新建”，在“类别”下面选择“框架集”，然后在右边的“框架集”中选择“左侧固定”，最后点击“创建”。2.执行“文件>保存全部”，留意整个框架边框所出现有阴影框，分别以文件名“index.html”、“right.html”、“left.htm

2、l”保存。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.

3、jpg”;(3)将光标置于第3行中输入文本“您现在的位置:首页>>公司简介”，然后在“属性”面板中设置“大小”为12像素，“高”为30。(4)在这个表格的第4行中插入一个1行1列，表格宽度为550像素的表格。将这个表格“居中对齐”。然后将下面的这段文字复制到这个表格中，并将字体的大小设置为12像素。“本厂专业从事电吹风、剃绒器等小家电的设计及制造，企业遵循“与世界潮流同行”的目标，不断创新、科学的管理、完整的检测设备、及多年的生产经验使得每款电吹风都具有一流的品质。特别是工业用电吹风，采用电机使用寿命长，适用于各种塑封、缩封、整烫、吹干等。产品以其满意的售后服务和优良的

4、企业信誉深受国内外消费者的好评和赞誉。本企业的产品均己通过国家强制性产品认证及CE认证，本厂产品造形新颖、款式繁多、质优价廉，满足各层次的消费需求。我们热忱欢迎中外客商和新老朋友洽谈业务，共同发展，共创辉煌！”(5)将光标置于刚才复制的文本中，插入图像“12.gif”，设置图片的“对齐”为“右对齐”；“垂直边距”和“水平边距”都为5制作完毕后，执行“文件>保存全部”做完后思考：1.保存框架网页时跟保存表格布局的网页时有什么不同？2.这种左侧固定的框架网页，其右边非固定的子网页处什么情况下会出现横向的滚动条？<二>创建上方固定左侧嵌套的框架页面：（选做）要求：将“练习二”

5、文件夹复粘贴到自己的“学号+姓名”文件夹中，然后按如下的步骤完成制作：1.“文件>新建”，在“常规”选项卡的“类别”处选择“框架集”，选中“上方固定，左侧嵌套”选项,然后单击“创建”。2.“文件>保存全部”，分别以“index.html”、“right.html”、“left.html”、“top.html”保存这些框架。上方框架页的设置：3.将光标定位在上方的框架中，在“属性”面板中，点击“页面属性”，设置“左边距”、“上边距”都为04.将光标定位在上方的框架中，插入一个1行2列的表格，“高”设置为216像素，“宽”设置为778像素。并且“居中对齐”。5.在刚才插入的

6、表格的第1列中插入图像“01.jpg”6.将刚才插入的表格的第2列进行拆分单元格，将此单元格拆分为2行。7.设置拆分后的第1行单元格的“背景”为图像“03.jpg”，将“高”设置为185像素。然后再在此插入图像“top.jpg”。注意：这时插入的图片不能完全显示，需要适应调整框架的高度。7.将光标置于插分后的第2行单元格，设置其“背景颜色”为＃EEEEEE，然后在此插入1行6列的表格，“表格的宽度”为80%，并且“右对齐”。再在这个表格的1至6列中分别输入如下的文字：“首页”、“产品展示”、“新闻中心”、“投资者关系”、“科研人才”、“联系我们”上方的框架页面设置后的效

7、果如下图所示：左侧框架页的设置：1.将光标置于左侧框架中，改变“页面属性”，设置“左边距”、“上边距”都为02.插入一个6行2列的表格，“表格宽度”为165像素，然后将“填充”设置为5，调整左侧框架的宽度，使其与表格宽度适中。3.在刚才插入的表格的第1行第1列中，插入图像“over.gif”。在第2行第2列中输入“公司简介”，字体的“大小”设置为16像素，“文本颜色”设置为#FF6600，并加粗。4.分别在第2至6行的第1列中插入“image_10.gif”图像，然后输入如下图所示的文本：右侧框架页的设置：1.将光标置于右侧框架中，改变“