第四单元 制作“心情日记”网页.ppt

第三章 Dreamweaver网页制作 第四单元 制作“心情日记”网页 　　任务描述：本单元通过“创建框架集”、“使用链接控制框架内容”和“制作媒体日记页面”三个任务完成“幽幽我心的个人网站”中“心情日记”栏目的制作，学习如何使用框架结构来布局页面及如何在网页中插入多媒体文件，任务完成后效果如图： 第四单元 制作“心情日记”网页 任务一 创建框架集 　　　任务： 创建“心情日记”页面的框架结构。 自己动手 1．创建 “心情日记”栏目的目录结构 2．创建框架集 4．选择框架集并设置属性 5、 保存框架和框架集 任务总结 知识总结： 1．添加框架页的内容 自己动手： 1．布局“媒体日记”页面 A.运行 Dreamweaver 8，打开“main5.html”页面 B.设置页面属性网页上下边距为0像素，背景色为“#EEF0FF” C.插入一个宽366像素、2行2列的表格，设置表格属性：边框为0；第一行高20像素，第二行高272像素；第一列宽17像素，第二列宽349像素。 2．插入多媒体插件 通过“插入”菜单栏的“媒体”菜单项的“插件”选项向表格的第二行里插入“D:\mysite\diary\media ”目录下的“ljsy.mpg”文件。 　　相关知识 相关知识 3．框架集“属性”面板介绍 “边框”：用于设置在浏览器中是否显示框架边框。 “行列选定范围”：用于选定要修改属性的框架。 “值”：用于设置“行列选定范围”选中框架的宽度或高度。 “单位”：用于设置“值”的单位。其中“像素”指定选定列或行的大小设置为一个绝对值，对于应始终保持相同大小的框架（如导航条）而言，此选项是最佳选项。“百分比”指定选定列或行应相当于其框架集的总宽度或总高度的百分比。“相对”指定在“像素”和“百分比”框架分配空间后为选定列或行分配其余可用空间，剩余空间在单位设置为“相对”的多个框架中按值的比例划分。 任务一 创建框架集 目录 上一页 下一页 退出 目录 上一页 下一页 第四单元 制作“心情日记”网页 第四单元 制作“心情日记”网页 任务二 使用链接控制框架内容 任务三 制作媒体日记网页 任务一 创建框架集 第四单元 制作“心情日记”网页 分析：依据“心情日记”效果图，页面分为上部、左下、右下三个部分，每个部分可以用一个框架页来实现。上部框架页用于放置标题“心情日记”和图像；左下部框架页用于放置“个人日记”等五个导航链接，每个导航链接一个页面；右下部框架页用于显示与导航链接相对应的页面。 第四单元 制作“心情日记”网页 存放多媒体文件 media 存放本栏目需要的图片 diaryimages “媒体日记”网页 main5.html “天下杂侃”网页 main4.html “休闲搞笑”网页 main3.html “情感天地”网页 main2.html 右下部框架显示的“个人日记”网页 main1.html 上部框架页 top.html 左下部框架页 left.html “心情日记”框架集网页 diary.html D:\mysite\diary 说明 文件/文件夹的名字 所在路径 任务一 创建框架集 　　运行Dreamweaver 8，选择菜单栏“文件”菜单下的“新建”选项，弹出“新建文档”对话框。 任务一 创建框架集 在“常规”选项卡中，选择“框架集”类别中的“上方固定，左侧嵌套”。 还可以通过什么方法创建框架集？ 3．选择框架并设置属性 任务一 创建框架集 A.设置左下部框架属性：勾选“窗口”菜单的“框架”选项，在面板组中出现“框架”面板，如图所示。 在“框架”面板的左下部框架内部单击，“文档窗口”中的左下部框架会以黑色虚线包围，提示该框架被选中。 任务一 创建框架集 在框架“属性”面板中设置“源文件”为“D:\mysite\diary”文件夹中的“left.html”网页，其他属性保持默认 。 框架“属性”面板中其他属性的功能？ B.设置右下部框架属性：采用如上方法，设置 “源文件”为“D:\mysite\diary”文件夹中的“main1.html”网页。 A.选择框架集：如图下所示，如果在“框架”面板单击框架集的最外边框，将选中整个框架集；单击次外边框，将选中包含下方两个框架的框架集；单击最内边框，将选中相应框架。 最外边框 次外边框 最内边框 选中提示 任务一 创建框架集 　　B.设置框架集属性： 单击“框架”面板中最外边框，选择整个框架集，“属性”面板