DreamweaverCS3，FlashCS3，FireworksCS3网页制作培训教程第4课 用框架布局.pptVIP

4.2.2 典型案例——布局产品网页 案例目标 本案例将利用浮动框架制作产品网页，主要介绍浮动框架标签的添加、网页内容的更换、图像及属性的设置等操作，完成后的效果如下图所示。 4.2.2 典型案例——布局产品网页 4.2.2 典型案例——布局产品网页 操作思路： （1）更换内容、标题和图像。 （2）在代码视图中添加浮动框架标签，并删除原有的文本。 （3）添加在浮动框架中显示的文件、设置浮动框架的大小及滚动方式。 操作步骤请老师参照软件讲解 4.2.2 典型案例——布局产品网页 案例小结 本例通过使用浮动框架制作产品页，主要介绍了浮动框架的添加方法、源文件的添加方法、设置浮动框架的大小和设置滚动方式等内容。 在利用浮动框架制作网页时，源文件的宽度应尽量与框架的大小一致，高度可以为任意值，超出浮动框架区域的内容可通过滚动条来显示。 4.3 上机练习 4.3.1 建立帮助页 4.3.2 嵌入简介内容 4.3.1 建立帮助页 下面练习通过浮动框架制作帮助页，如下图所示，主要练习框架的创建、保存和内容的添加。 4.3.1 建立帮助页 操作思路： 在站点文件夹中新建“help.html”文档。 在插入栏的【布局】选项卡中，单击 按钮，在弹出的【框架】下拉菜单中选择【左侧框架】命令，建立左侧框架。此时，“help.html”文档位于右侧框架中，该框架名为“mainFrame”。 在【框架】面板中选择整个框架集和左框架，保存为“help_jg.html”和“daohang.html”文档。 选中整个框架，在【属性】面板中设置边框值为“1”，颜色为“#990000”。 4.3.1 建立帮助页 设置“daohang.html”文档背景色为“#B5CBFF”。 在左侧框架中设置帮助菜单的导航内容。 在右侧框架中输入帮助项的内容，可以在制作完一个网页后另存为框架页，再添加第2个导航条的内容，依此类推。此外，还可以直接新建各个导航条对应的内容文件。 给导航页中的帮助项添加链接，并且在“mainFrame”中显示。 4.3.2 嵌入简介内容 下面练习在“rl”站点的“index1.html”文档中嵌入该站点“web”文件夹中的“nei1.html”文档，主要练习浮动框架的使用，效果如下图所示。 4.3.2 嵌入简介内容 操作思路： 打开“第4课\素材\rl\index.html”文档，另存为“index1.html”文档。 选中“公司简介”及下方的内容所在的单元格，在代码视图中输入“iframe/iframe”，删除标签之间的文本内容，设置浮动框架宽为“402”，高为“400”，源文件为“sjk.html”，设置“name”属性参数的值为“mf”。 4.3.2 嵌入简介内容 保证宽、高与原单元格区域一致，使页面统一、美观。 设置页面中的“首页”链接到“main.html”，“数据库”链接到“sjk.html”，并设置超链接的“target”属性参数值为“mf”。 Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程 第4课 用框架布局 本课要点 具体要求 本课导读 上机练习 本课要点 使用框架 使用浮动框架 具体要求 掌握框架文档的创建方法 掌握框架与框架集属性的设置 掌握浮动框架的创建 掌握浮动框架属性的设置 本课导读 框架是一项比较特殊的布局工具，使用它可以将浏览器窗口划分为多个独立的区域，每个区域显示不同的HTML文档，常用于固定网页中的某些部分。例如，页面底部的面板区域中的信息通常是固定的，就可以使用框架进行布局。 4.1 使用框架 要使用框架，可以在单击超链接后，将链接页的内容显示在当前页面的某个框架中，这样就不需要重新开启窗口，就可以省去重复的布局了。 4.1 使用框架 4.1.1 知识讲解 4.1.2 典型案例——制作风景名胜网页 4.1.1 知识讲解 本节将学习框架的创建与编辑，框架与框架集属性的设置等内容。 4.1.1 知识讲解 1. 认识框架与框架集 2. 创建框架 3. 编辑框架 4. 设置框架属性 5. 设置框架集属性 1. 认识框架与框架集 框架是独立的HTML文档。框架集是由多个框架组合而成的，一个框架网页中包含多个框架的布局、链接和属性信息。用框架构成的网页，实际包含各个框架中的网页及一个框架集表格。 2. 创建框架 Dreamweaver已为用户提供了框架的预定格式，一般采用预定格式即可创建框架网页，创建框架网页的具体操作如下：（1）选择【文件】→【新建】命令，打开【新建文档】对话框。 （2）单击【示例中的页】选