网页制作教程_第6章.pptVIP

6.4 上机实训——利用框架结构制作“奥运会徽网站” 2. 实训分析 从网站主页的整体效果分析，站点内所有网页的顶部标题和左侧导航的内容完全相同，只有右侧区域来显示不同时期的奥运会徽内容。这种情况下读者可以利用框架结构，把顶部、左侧和右侧分为3个网页制作，然后，在一个框架集中分成3个框架，分别默认显示顶部、左侧和右侧3个网页。准备介绍的其他内容分别制作出主要内容(无标题、无导航)，最后通过左侧的导航链接将其他所有介绍内容分别显示在右侧框架中。 图6-17 【提示】对话框 6.4 上机实训——利用框架结构制作“奥运会徽网站” 3. 实训步骤 图6-17 【提示】对话框 (1)启动Dreamweaver软件，在【文件】面板中右击“ch6”，在弹出的右键快捷菜单中选择【新建文件夹】命令，在“ch6”文件夹中创建“huihui”文件夹。 (2) 在【文件】面板中，右击“huihui”文件夹，在弹出的右键快捷菜单中选择【新建文件】命令，创建一个网页，并改名为“03.html”(从第三届奥运会徽开始制作)。 (3) 双击“03.html”，使其进入编辑状态，并进入【设计】视图。 图6-23 插入一个表格 6.4 上机实训——利用框架结构制作“奥运会徽网站” 3. 实训步骤 图6-17 【提示】对话框 (4) 在菜单栏中选择【插入记录】→【表格】命令，插入一个“1行，2列，宽200像素，0边框，8边距和0间距”的表格，如图6-23所示。 (5) 将“AY_Media\huihui\bnay1904(03).jpg”插入左侧单元格中，如图6-24所示。 图6-24 拖拽插入图像文件 6.4 上机实训——利用框架结构制作“奥运会徽网站” 3. 实训步骤 图6-17 【提示】对话框 (6) 将“AY_Media\huihui\奥运会徽.txt”文件中有关第三届奥运会徽的内容复制到右侧单元格中，通过拖拽将表格宽度调整为“620像素”，如图6-25所示。 图6-25 调整表格宽度 6.4 上机实训——利用框架结构制作“奥运会徽网站” 3. 实训步骤 图6-17 【提示】对话框 (7) 在【文件】面板中将“ch5\aoyun.css”文件复制到“ch6\huihui”文件夹中。 (8) 在【CSS】面板中单击【附加样式表】按钮 ，将样式表“aoyun.css”链接到“03.html”网页中。 (9) 在【CSS】面板中单击【新建CSS规则】按钮 ，增加一个名称为“nr”的类样式规则，如图6-26所示。 图6-26 新建nr类样式规则 6.4 上机实训——利用框架结构制作“奥运会徽网站” 3. 实训步骤 图6-17 【提示】对话框 6.4 上机实训——利用框架结构制作“奥运会徽网站” 3. 实训步骤 图6-17 【提示】对话框 (10) 在【CSS规则定义】对话框【区块】选项卡的【文字缩进】文本框中输入“2”，并在右侧下拉列表框中选择【字体高】选项，单击【确定】按钮，关闭对话框。 (11) 选中表格右侧单元格中的文字内容，在【属性】面板【样式】下拉列表框中选择“nr”选项。 (12) 在【CSS样式】面板中单击【新建CSS样式规则】按钮 ，弹出【新建CSS规则】对话框，如图6-27所示，新建一个名称为“body”的标签样式规则。 图6-27 【新建CSS规则】对话框 6.4 上机实训——利用框架结构制作“奥运会徽网站” 3. 实训步骤 图6-17 【提示】对话框 (13) 在【CSS规则定义】对话框【背景】选项卡中单击【背景颜色】按钮 ，将整个网页背景颜色设置为“#E5EDFF”(浅蓝色)，如图6-28所示，单击【确定】按钮。 图6-28 【背景】选项卡 6.4 上机实训——利用框架结构制作“奥运会徽网站” 3. 实训步骤 图6-17 【提示】对话框 (14) 重复步骤(2)～(6)，制作出其他几届奥运会徽的介绍网页，并且每个网页均要链接样式表“aoyun.css”。再关闭所有网页，打开“03.html”网页。 (15) 将插入点定位在【设计】视图的网页编辑区，在【布局】选项卡中单击【框架】按钮 ，并在弹出的子菜单中选择【顶部框架】命令，如图6-29所示，创建一个上下结构的框架集。 图6-29 【布局】选项卡 6.4 上机实训——利用框架结构制作“奥运会徽网站” 3. 实训步骤 图6-17 【提示】对话框 (16) 将插入点放入下部框架中，在【布局】选项卡中单击【框架】按钮 ，在弹出的子菜单中选择【左侧框架】命令，将下部框架再拆分为左右结构的框架，如图6-30所示。 图6-30 拆分框架为左右结构 6.4 上机实训——利用框架结构制作“奥运会徽网站