网页设计第四讲_创建多页面窗口(框架)课件.ppt

《网页设计第四讲_创建多页面窗口(框架)课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、网页设计网页设计计算机应用专业《网页制作》技术目标个人网站项目任务创建网页、应用表格布置“个人网站”内容要求。应用文字、图象创建主页。进行布局，添加站名、导航栏、网站介绍，添加修饰图片。应用css、创建链接创建个人简介子页。应用css修饰文字，设置主页到个人简介子页的链接，并用css修饰。应用框架创建个人珍藏栏目框架，设置相关页的链接。技术巩固创建“个人学习方法”和“存在的问题”两个子页，以及“关于学习”栏目的框架。设置相关页的链接，以及页面背景。技术巩固在主页上给不同的链接设置不同的css效果。完善其他未

2、完成的页面。提交作品。创建网页、应用表格布置“个人网站”内容要求。应用文字、图象创建主页。进行布局，添加站名、导航栏、网站介绍，添加修饰图片。应用css、创建链接创建个人简介子页。应用css修饰文字，设置主页到个人简介子页的链接，并用css修饰。应用框架创建个人收藏栏目及其子页，设置相关页的链接。1、框架集和框架（frameset&frame）第四讲创建多页面窗口使用框架集和框架，可以让一个窗口显示多个网页的内容，并且可以在设置链接的时候，选择使用浏览器窗口的哪个部分来显示要链接的网页。一个框架集可以包含多

3、个框架。【例】下图是grsc.html子页，分为上下两个框架，下框架的内容可以变化，当点击“我的相册”，即显示相册页面，如果点击“美图收藏”，则显示美图页面。上框架下框架上框架下框架2、创建框架集框架集，有时也叫“框架页”。创建框架集时，同样通过“文件”菜单、选择“新建”，但在“新建文档”对话框中，应该选择“框架集”，然后再选择框架集的结构，确定后即可创建一个包含多个框架的框架页。第四讲创建多页面窗口3、选择框架集和框架选择框架集的时候，代表我们选择了一个包含多个框架的网页，而选择框架则代表我们只选择这个网

4、页中的一个框架。不管选择框架集还是框架，都可以通过“框架”面板。点击“窗口”菜单，选择“框架”，就可以打开“框架”面板。第四讲创建多页面窗口在“框架”面板上点击对应的框架，就可以选中网页上相应的框架。如果点击框架面板上的最外层边框，就代表选择整个框架集。4、保存框架集保存框架集，就是把包含多个框架的整个网页保存下来。当要保存整个框架集时，先把整个框架集选中，然后在“文件”菜单中选择“保存框架页”。第四讲创建多页面窗口只有在选择了框架集之后，文件菜单中才会出现“保存框架页”的命令。5、框架的源文件一个框架页包

5、含多个框架，而一个框架又可以显示一个网页，所以，一个框架页可以显示多个网页。设置一个框架的源文件，就是设置这个框架要显示的网页。框架的源文件在框架属性面板中设置。第四讲创建多页面窗口6、设置框架集和框架的属性框架集的属性主要是“边框”和“边框宽度”，这两者决定了框架的边框是否显示。框架的属性主要是“框架名称”、“源文件”、“滚动”、“不能调整大小”。第四讲创建多页面窗口一般“边框”设置为“否”，“边框宽度”设置为“０”，这样框架页就不会显示出框架的边框。滚动：设置框架的右边或底边是否出现滚动条。不能调整大小

6、：如果选中，则用户在浏览网页时不能随意调整框架的比例。框架名称在今后链接目标选择窗口时，将会使用到。【练习】1、创建一个框架集，结构为“上方固定”，将该框架集保存为grsc.htm。2、创建一个基本页，保存为grsc_top.htm，如下图所示，在该页中添加1行3列的表格，并添加三个子栏目名：“我的相册”和“美图收藏”、“返回主页”3、在grsc.htm页中，选择上框架，将框架命名为top，并指定框架的源文件为grsc_top.htm；4、在grsc.htm页中，选择下框架，将框架命名为main，并指定框架

7、的源文件为grsc_wdxc.htm；5、选择整个框架集，再次保存框架页。7、链接目标与框架当我们创建链接的时候，可以指定链接目标窗口，比如链接目标窗口设置为“_blank”，就是新打开一个窗口来显示链接的网页，默认情况下，是在原窗口显示链接页的。当我们创建一个框架集时，相当于一个网页被分割成多个窗口，这时我们可以选择用某一个窗口来显示链接要打开的网页。第四讲创建多页面窗口注意！必须是在框架页中，才能设置链接目标为某个框架。比如直接打开grsc_top这个网页，选择“个人相册”，设置目标时是找不到框架名称的

8、（如左下图），必须打开grsc这个框架页，在里面选择“个人相册”，才能在“目标”中找到框架名称（如右下图）。第四讲创建多页面窗口【练习】1、在grsc.htm页中，选择“我的相册”，链接到grsc_wdxc.htm，设置“目标”为main；2、选择“美图收藏”，链接到grsc_mtsc.htm，设置“目标”为main；3、选择“返回主页”，链接到index.htm，设置“目标”为_parent（代表整个框架集）；