5.5综合实训.pptVIP

1.特色说明 2.具体步骤 第一步：采用框架设计整体框架 由5.3节我们已经学到，框架即多窗口页面，也称为“帧”，是将一个浏览器窗口分成多个小页面，每个页面显示一定的内容。它是页面排版的重要表现方式。本实训中，需要把页面分成左右两部分，左边部分为菜单列表，右边部分为主显示页面。 打开Dreamwaver 2004，新建一个空白页面，然后运行菜单“插入—〉HTML—〉框架—〉左方”，页面就会被分割成左右两个部分，如图1所示。 然后，在单元格中输入这首诗： 云彩还在天空徘徊 青春之花却毫不犹豫地 粲然开放了 有人说 珍藏在人生册页中的青春花瓣 或许只是 一双永不能忘的双眸 一个令人心动的微笑 我想说 青春的光芒 在冉冉升起时会很明亮 青春的花朵 在经历过风霜雪雨后会熠熠生辉 青春的历程 在不断搏击后才能谱写壮丽篇章 第四步：qingchunjiyu.htm设计 Macromedia Dreamweaver MX 2004 提供了多种向文档中添加文本和设置文本格式的方法。您可以插入文本、设置字体类型、大小、颜色和对齐属性，以及使用层叠样式表 (CSS) 样式创建和应用您自己的自定义样式。 第四步：qingchunjiyu.htm设计 Dreamweaver 允许您通过以下方式在 Web 页中添加文本：直接将文本键入页中，从其他文档复制和粘贴文本，或从其他应用程序拖放文本。能够合并到 Web 页的文本内容的常见文档类型有 ASCII 文本文件、RTF 文件和 MS Office 文档。Dreamweaver 使您可以从这些文档类型中的任何一种取出文本，然后将文本并入 Web 页中。 第四步：qingchunjiyu.htm设计 Dreamweaver 中的文本格式设置与使用标准字处理程序类似。您可以为文本块设置默认格式化样式（段落、标题 1、标题 2 等）、更改所选文本的字体、大小、颜色和对齐方式，或者应用文本样式（如粗体、斜体和下划线）。在该实训中，诗歌字体属性设置如图24所示。 图24 文字格式属性设置 第四步：qingchunjiyu.htm设计 青春寄语效果图图25所示。 图25 qingchunjiyu.htm效果图 第四步：qingchunjiyu.htm设计 第五步：sheyingxinshang.htm页面设计 在摄影欣赏页面上，有两组图片，人体艺术图片和风景图片，与我爱我家页面相似，也需要表格来进行排版和定位。 首先运行“插入—〉表格” 或者点工具栏上的 ，弹出表格属性设置对话框，如图26所示。 第五步：sheyingxinshang.htm页面设计 图26 表格插入对话框 第五步：sheyingxinshang.htm页面设计 插入后的表格如图27所示。 图27 插入后的表格 设置表格的对齐方式为居中对齐，表格属性面板如图28所示。 图28 表格属性设置面板 第五步：sheyingxinshang.htm页面设计 然后，合并左上角两个单元格，用鼠标在左上角单元格中点击一下，然后按住鼠标左键，向下拖动鼠标，直到进入第二个单元格，这时候，左上角两个单元格处于选中状态，如图29所示。 图29 选中单元格示意图 第五步：sheyingxinshang.htm页面设计 * 5.5 综合实训 同名教材配套电子教案样板 本实训来教大家做一个个人网站。通过框架、表格、层对各个页面进行排版，使整个网站风格一致，条理清晰。目的是教大家如何正确合理的使用表格、框架、层等Dreamweaver MX2004的网页定位技术，根据需要，对自己的网页进行合理的排版。 图1 框架效果图 第一步：采用框架设计整体框架 插入框架后，设置框架的属性，我们需要框架的边框为2，颜色为红色，左边宽度为110像素，所以框架的属性面板如图2所示。 图2 框架属性面板 第一步：采用框架设计整体框架 设置完后的框架页面如图3所示。 图3 设置完成后的框架效果图 第一步：采用框架设计整体框架 现在我们已经按照需要设置了框架属性，其HTML代码如图4所示。 图4 框架HTML代码 第一步：采用框架设计整体框架 第一步：采用框架设计整体框架 在这个框架页面上，其实包含了三个页面：框架页面、左边子页面、右边子页面，Dreamwaver 2004给这三个文件分别命名为：UntitledFrameset-1.htm、UntitledFrame-1.htm、Untitled-1.htm。所以在保存的时候，选择“文件—〉保存全部”，Dreamwaver 2004会顺序弹出三个窗口，来分别保存上面的三个文件，如图5-——图7所示。