dreamweaver课件第四单元

《dreamweaver课件第四单元》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、Dreamweaver网页制作第四单元制作“心情日记”网页主编：王树平副主编：杜大志、刘艳慧、范永泰第四单元制作“心情日记”网页任务描述：本单元通过“创建框架集”、“使用链接控制框架内容”和“制作媒体日记页面”三个任务完成“幽幽我心的个人网站”中“心情日记”栏目的制作，学习如何使用框架结构来布局页面及如何在网页中插入多媒体文件，任务完成后效果如图：第四单元制作“心情日记”网页第四单元制作“心情日记”网页任务二使用链接控制框架内容任务三制作媒体日记网页任务四使用代码制作框架网页任务一创建框架集第四单元制作“心情日记”网页任务一创建框架集任务：创建“心情日记”页面的框架结构。分析：依

2、据“心情日记”效果图，页面分为上部、左下、右下三个部分，每个部分可以用一个框架页来实现。上部框架页用于放置标题“心情日记”和图像；左下部框架页用于放置“个人日记”等五个导航链接，每个导航链接一个页面；右下部框架页用于显示与导航链接相对应的页面。第四单元制作“心情日记”网页自己动手1．创建“心情日记”栏目的目录结构所在路径文件/文件夹的名字说明D:mysitediarydiary.html“心情日记”框架集网页left.html左下部框架页top.html上部框架页main1.html右下部框架显示的“个人日记”网页main2.html“情感天地”网页main3.html“休闲

3、搞笑”网页main4.html“天下杂侃”网页main5.html“媒体日记”网页存放本栏目需要的图片存放多媒体文件任务一创建框架集2．创建框架集运行Dreamweaver8，选择菜单栏“文件”菜单下的“新建”选项，弹出“新建文档”对话框。任务一创建框架集在“常规”选项卡中，选择“框架集”类别中的“上方固定，左侧嵌套”。还可以通过什么方法创建框架集？3．选择框架并设置属性任务一创建框架集A.设置左下部框架属性：勾选“窗口”菜单的“框架”选项，在面板组中出现“框架”面板，如图所示。在“框架”面板的左下部框架内部单击，“文档窗口”中的左下部框架

4、会以黑色虚线包围，提示该框架被选中。任务一创建框架集在框架“属性”面板中设置“源文件”为“D:mysitediary”文件夹中的“left.html”网页，其他属性保持默认。框架“属性”面板中其他属性的功能？B.设置右下部框架属性：采用如上方法，设置“源文件”为“D:mysitediary”文件夹中的“main1.html”网页。4．选择框架集并设置属性A.选择框架集：如图下所示，如果在“框架”面板单击框架集的最外边框，将选中整个框架集；单击次外边框，将选中包含下方两个框架的框架集；单击最内边框，将选中相应框架。最外边框次外边框最内边框选中提示任务一创建框架集B.设置框架

5、集属性：单击“框架”面板中最外边框，选择整个框架集，“属性”面板将显示此框架集属性，如下图所示。“边框”选择“否”，“边框宽度”设置为0，“行值”设置为186像素，其他保持默认。框架集“属性”面板中选项的功能？单击次外边框，选中下方一行两列的框架集，“属性”面板将显示此框架集属性，如下图所示。“边框”选择“否”，边框宽度为0，“列值”设为200像素，其他保持默认值。任务一创建框架集5、保存框架和框架集选择菜单栏“文件”菜单的“保存全部”选项，Dreamweaver8会以斜线框包围整个框架集，提示将要保存框架集页面，如右图所示。同时弹出“另存为”对话框，输入框架集页面名称“diar

6、y.html”，将其保存在“D:mysitediary”文件夹中。任务一创建框架集接着出现“另存为”对话框，此时斜线框的包围区域提示要保存顶部的框架页。在“另存为”对话框中，输入文件名为“top.html”，保存在“D:mysitediary”文件夹中。思考：为什么没有提示保存左下部和右下部框架页？因为左下部和右下部框架页已经通过“属性”面板的“源文件”选项设置为从素材中拷贝过来的网页，页面内容没有修改，所以不需要保存。任务总结任务一创建框架集1．创建框架集的方法2．选择框架并设置框架的属性3．选择框架集并设置框架集的属性4．保存框架及框架集文件举一反三：创建网页“pra

7、ctice4-1.html”，使用“新建文档”对话框，创建“右侧固定，上方嵌套”结构的框架集网页，设置显示框架边框，边框宽度为3，颜色为“#0000FF”。1．启发思路：根据所学习的创建框架集方法，自己动手创建上述框架集网页。每个框架的属性设置按要求制作。2．分组完成任务。任务一创建框架集作业：1．自己试一试如何手动创建框架。2.自己练习如何拆分框架和删除框架。3．创建如下图所示的框架集网页“practice4-2.html”。任务一创建框架集４．创建如下图所示的框架集网页“pr