第9章 综合实例──使用框架布局网页“柠檬网”

《第9章 综合实例──使用框架布局网页“柠檬网”》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、实例《Dreamweaver网页设计》电子版教科书第9章第9章综合实例──使用框架布局网页“柠檬网”在学习了框架的相关知识后，本例通过制作一个使用框架技术制作的播客网站来学习其在实际网页制作中的应用。该网页由上下框架组成，当单击上方框架导航栏中的链接时，将在下方框架中显示链接的网页文档，如图9-2-1所示。图9-2-1使用框架布局网页最终效果制作思路为简化制作过程，我们已将各个框架中需要用到的源文件准备好。首先创建框架页，并在各框架中设置素材中提供的网页源文件，最后设置超链接，完成网页制作。制作步骤1.制作网站首页网站首页的制作主要就是创建框架页，并为各个框架设置源文件，

2、下面我们来看具体操作。Step01在本地磁盘新建文件夹“lemon”，然后将素材中的“lemon”文件夹中的相关文件拷贝至本地“lemon”文件夹中，并在Dreamweaver中定义站点“lemon”。Step02新建一个普通文档，将插入点置于文档编辑窗口中，然后单击“布局”插入栏中的“框架”按钮，在下拉列表中选择“顶部框架”，如图9-2-2所示。图9-2-2插入顶部框架Step03选择“文件”→“保存框架页”菜单，将框架页保存为“index.html”。Step04单击上下框架分界线，在“属性”面板上“行”编辑框中输入110，设置上方框架高为110像素，如图9-2-3所

3、示。5实例《Dreamweaver网页设计》电子版教科书第9章图9-2-3设置框架大小Step05按住【Alt】键的同时在顶部框架内单击，以选择顶部框架。然后单击“属性”面板上“源文件”编辑框后的“浏览文件”按钮，如图9-2-4所示。图9-2-4选择框架后单击“浏览文件”按钮Step06打开“选择HTML文件”对话框，在“查找范围”下拉列表中选择网站根文件夹，在文件列表中选择网页文档“top.html”，然后单击“确定”按钮，如图9-2-5所示。5实例《Dreamweaver网页设计》电子版教科书第9章图9-2-5选择源文件Step07按照同样的方法，设置下方框架源文件为

4、“main.html”，此时将弹出提示框，单击“否”按钮即可，如图9-2-6所示。图9-2-6设置下方框架源文件Step08选择“文件”→“保存全部”菜单，保存所有文档，然后按【F12】键预览文档，效果如图9-2-7所示。1.设置链接本例中上方框架中的内容是不变的，而只改变下方框架中的内容。下面我们来看看如何通过设置链接来实现这种效果。5实例《Dreamweaver网页设计》电子版教科书第9章图9-2-7预览文档Step01接着在前面的文档中操作。为便于记住框架名称，在选中下方框架后，将“属性”面板上“框架名称”编辑框中的原内容删除，重新输入“main”作为框架名称，如图

5、9-2-8所示。图9-2-8设置下方框架名称Step02单击并拖动鼠标选中上方框架导航栏中的文本“搞笑”，在“属性”面板上设置链接文档为“funny.html”，并在“目标”下拉列表中选择“main”，如图9-2-9所示。Step03选择“文件”→“保存全部”菜单，保存所有文档，然后按【F12】键预览，单击导航条中的文本“搞笑”，在下方框架中打开文档“funny.html”，如前面的图9-2-1所示。5实例《Dreamweaver网页设计》电子版教科书第9章图9-2-9设置链接文档5