项目8.pptVIP

高效灵活的网页布局——框架的应用 8.1 网页展示：使用框架布局“乐途网”首页页面 本章使用框架布局制作“乐途网”首页及“商旅管理”页面。框架布局的首页效果如图所示，网页窗口被分为上下两部分，上方为首页顶部，固定显示企业Logo及导航等内容，下方为首页内容，拖动右侧滚动条可以浏览页面内容。 8.1 网页展示：使用框架布局“乐途网”首页页面 在导航中点击“商旅管理”超级链接，显示“商旅管理”页面内容，如图所示。浏览器窗口同样被分为上下两部分，通过拖动右侧的滚动条可以浏览“商旅管理”栏目主页面内容。在两个页面中，上方的导航部分内容相同，在通过导航切换页面时，该部分内容保持不变，不会被刷新。 8.2 网页制作 8.2.1 创建和保存框架页面 步骤1 启动Dreamweaver CS4，在“乐途网”站点中，执行【文件】|【新建】命令，打开【新建文档】对话框。 步骤2 在【新建文档】对话框中选择【示例中的页】，在【示例文件夹】列表框中选择【框架页】，在【示例页】列表框中选择框架结构【上方固定】。 步骤3 单击“创建”按钮，打开【框架标签辅助功能属性】对话框。在“框架”下拉列表框中选择框架，在“标题”文本框中输入标题，通常保持默认设置。 步骤4 单击“确定”按钮关闭对话框，完成框架网页的创建 8.2 网页制作 步骤5 执行【文件】|【框架集另存为】菜单命令，将框架集页面命名为“index.html”，保存在站点根目录“ch8”文件夹中。 步骤6 鼠标点击选中上侧框架页面，执行【文件】|【保存框架】菜单命令，将上侧框架页面命名为“top.html”，保存在站点根目录中。 步骤7 鼠标点击选中下侧框架页面，执行【文件】|【保存框架】菜单命令，将下侧框架页面命名为“indexmain. html”，保存在站点根目录“ch8”文件夹中。完成框架网页的保存。 8.2 网页制作 8.2.2 设置框架及框架集属性 步骤1 执行【窗口】|【框架】菜单命令，打开【框架】面板，选择框架集。 步骤2 在【属性】面板中设置边框为“无”，边框宽度为0，行高设置为190像素。 步骤3 在【框架】面板中选择“topFrame”框架，在【属性】面板中设置上侧框架的属性。 步骤4 在【框架】面板中选择“mainFrame”框架，在【属性】面板中设置下侧框架的属性。 8.2 网页制作 8.2.3 制作顶部和下侧框架页面 步骤1 在【文件】面板中双击顶部页面top.html文件，在工作区以设计视图打开文件。 步骤2 打开【页面属性】对话框，设置top.html页面的上下和左右边距。 步骤3 在top.html中插入表格，保证表格高度与“topFrame”框架的行高一致，并设置表格的对齐方式为“居中对齐”。 步骤4 在表格中插入图片、文本及导航图像，并设置好CSS样式，完成导航页面top.html的制作。 步骤5 在工作区以设计视图打开下侧框架页面indexmain.html文件，该页面的内容为已制作的“乐途网”首页去掉顶部内容之后的部分。在【页面属性】对话框中设置上下边距和左右边距都设为0。 8.2 网页制作 步骤6 在indexmain.html中插入表格，用于制作首页的主要内容，设置表格的对齐方式为“居中对齐” 。 步骤7 在表格中插入图片和文本，并设置好CSS样式，完成indexmain.html页面的制作。 步骤8 将页面全部保存，在浏览器中浏览index.html，就会看到图8-1所显示的页面效果。整个浏览器窗口被分为上下两部分，上侧框架中显示top.html页面内容，下侧框架中显示indexmain.html页面内容。 8.2 网页制作 8.2.4 制作“商旅管理”主页面 步骤1 在【文件】面板中双击ctmmain.html文件，在工作区以设计视图打开文件。设置ctmmain.html页面的上下边距和左右边距都为0。 步骤2 在ctmmain.html中用表格进行布局，设置表格的对齐方式为“居中对齐”。 步骤3 在表格中插入图片和文本，并设置好CSS样式，完成ctmmain.html页面的制作。 8.2 网页制作 8.2.5 在框架中创建超级链接 步骤1 在设计视图中打开导航页面top.html，选择导航条中的“首页”图片，在【属性】面板中设置图像链接为“indexmain.html”，目标为“mainframe” 。保存，完成链接到首页的超链接设置。 步骤2 在top.html中，鼠标单击选择“商旅管理”导航图片，在【属性】面板中设置图像链接