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

第9章 综合实例──使用框架布局网页“柠檬网” 在学习了框架的相关知识后，本例通过制作一个使用框架技术制作的播客网站来学习其在实际网页制作中的应用。该网页由上下框架组成，当单击上方框架导航栏中的链接时，将在下方框架中显示链接的网页文档，如图9-2-1所示。 图9-2-1 使用框架布局网页最终效果 制作思路 为简化制作过程，我们已将各个框架中需要用到的源文件准备好。首先创建框架页，并在各框架中设置素材中提供的网页源文件，最后设置超链接，完成网页制作。 制作步骤 制作网站首页 网站首页的制作主要就是创建框架页，并为各个框架设置源文件，下面我们来看具体操作。 Step01 在本地磁盘新建文件夹“lemon”，然后将素材中的“lemon”文件夹中的相关文件拷贝至本地“lemon”文件夹中，并在Dreamweaver中定义站点“lemon”。 Step02 新建一个普通文档，将插入点置于文档编辑窗口中，然后单击“布局”插入栏中的“框架”按钮，在下拉列表中选择“顶部框架”，如图9-2-2所示。 图9-2-2 插入顶部框架 Step03 选择“文件”→“保存框架页”菜单，将框架页保存为“index.html”。 Step04 单击上下框架分界线，在“属性”面板上“行”编辑框中输入110，设置上方框架高为110像素，如图9-2-3所示。 图9-2-3 设置框架大小 Step05 按住【Alt】键的同时在顶部框架内单击，以选择顶部框架。然后单击“属性”面板上“源文件”编辑框后的“浏览文件”按钮，如图9-2-4所示。 图9-2-4 选择框架后单击“浏览文件”按钮 Step06 打开“选择HTML文件”对话框，在“查找范围”下拉列表中选择网站根文件夹，在文件列表中选择网页文档“top.html”，然后单击“确定”按钮，如图9-2-5所示。 图9-2-5 选择源文件 Step07 按照同样的方法，设置下方框架源文件为“main.html”，此时将弹出提示框，单击“否”按钮即可，如图9-2-6所示。 图9-2-6 设置下方框架源文件 Step08 选择“文件”→“保存全部”菜单，保存所有文档，然后按【F12】键预览文档，效果如图9-2-7所示。 设置链接 本例中上方框架中的内容是不变的，而只改变下方框架中的内容。下面我们来看看如何通过设置链接来实现这种效果。 图9-2-7 预览文档 Step01 接着在前面的文档中操作。为便于记住框架名称，在选中下方框架后，将“属性”面板上“框架名称”编辑框中的原内容删除，重新输入“main”作为框架名称，如图9-2-8所示。 图9-2-8 设置下方框架名称 Step02 单击并拖动鼠标选中上方框架导航栏中的文本“搞笑”，在“属性”面板上设置链接文档为“funny.html”，并在“目标”下拉列表中选择“main”，如图9-2-9所示。 Step03 选择“文件”→“保存全部”菜单，保存所有文档，然后按【F12】键预览，单击导航条中的文本“搞笑”，在下方框架中打开文档“funny.html”，如前面的图9-2-1所示。 图9-2-9 设置链接文档 实例 《Dreamweaver网页设计》电子版教科书 第9章 2