dreamweaver8网页制作教程10.ppt

《dreamweaver8网页制作教程10.ppt》由会员分享，可在线阅读，更多相关《dreamweaver8网页制作教程10.ppt（37页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、l课堂讲解课堂讲解 l上机实战上机实战 第第13课课 布局模式、模板与资源列表布局模式、模板与资源列表 课堂讲解课堂讲解 l l布局模式布局模式 l l使用模板使用模板l l资源列表与库资源列表与库布局模式布局模式 l认识布局模式认识布局模式 l l切换到布局模式切换到布局模式切换到布局模式切换到布局模式 l l认识布局视图认识布局视图认识布局视图认识布局视图 l l退出布局模式退出布局模式退出布局模式退出布局模式 l创建布局表格和布局单元格创建布局表格和布局单元格 l在布局表格中添加内容在布局表格中添加内容 l调整布局表格和布局单元格调整布局表格和布局单元格 l设置布局模式首选参数设置布局模

2、式首选参数 切换到布局模式切换到布局模式 在绘制布局表格或布局单元格在绘制布局表格或布局单元格之前，必须切换到布局模式下。在之前，必须切换到布局模式下。在“布局布局”插入栏中单击插入栏中单击“布局布局”按按钮即可切换到布局模式。钮即可切换到布局模式。认识布局视图认识布局视图 切换到布局模式后，在编辑窗口的顶切换到布局模式后，在编辑窗口的顶切换到布局模式后，在编辑窗口的顶切换到布局模式后，在编辑窗口的顶部会出现标有部会出现标有部会出现标有部会出现标有“布局模式布局模式布局模式布局模式”的蓝色长条。如的蓝色长条。如的蓝色长条。如的蓝色长条。如果当前网页上存在表格，则会自动转换为布果当前网页上存在表

3、格，则会自动转换为布果当前网页上存在表格，则会自动转换为布果当前网页上存在表格，则会自动转换为布局表格，而表格中的单元格则不会转换为布局表格，而表格中的单元格则不会转换为布局表格，而表格中的单元格则不会转换为布局表格，而表格中的单元格则不会转换为布局单元格。局单元格。局单元格。局单元格。退出布局模式退出布局模式 在布局模式中制作完布局表格在布局模式中制作完布局表格后，最好退出布局模式到标准模式后，最好退出布局模式到标准模式下进行内容的添加和编辑。下进行内容的添加和编辑。l l在文档编辑区的顶部，单击在文档编辑区的顶部，单击在文档编辑区的顶部，单击在文档编辑区的顶部，单击“退出退出退出退出”超级

4、链超级链超级链超级链接。接。接。接。l l选择选择选择选择 查看查看查看查看 表格模式表格模式表格模式表格模式 标准模式标准模式标准模式标准模式 菜单命菜单命菜单命菜单命令。令。令。令。l l在在在在“布局布局布局布局”插入栏中单击插入栏中单击插入栏中单击插入栏中单击“标准标准标准标准”按钮。按钮。按钮。按钮。创建布局表格和布局单元格创建布局表格和布局单元格 在布局模式下使用布局表格和布局单在布局模式下使用布局表格和布局单元格进行页面布局时，一般先创建布局表元格进行页面布局时，一般先创建布局表格，再在布局表格中添加布局单元格，其格，再在布局表格中添加布局单元格，其绘制方法与层的绘制方法相同。绘

5、制方法与层的绘制方法相同。在布局表格中添加内容在布局表格中添加内容 在布局模式中可向布局表格中的在布局模式中可向布局表格中的布局单元格内添加文本、图像和其他网布局单元格内添加文本、图像和其他网页元素，与在标准模式中将内容添加到页元素，与在标准模式中将内容添加到表格单元格相同。在添加内容之前，必表格单元格相同。在添加内容之前，必须先绘制布局单元格，因为内容只能添须先绘制布局单元格，因为内容只能添加到布局单元格中。加到布局单元格中。调整布局表格和布局单元格调整布局表格和布局单元格 l清除布局单元格高度清除布局单元格高度 l布局单元格的大小调整及布局表格的布局单元格的大小调整及布局表格的移动移动 清

6、除布局单元格高度清除布局单元格高度 清除单元格高度之后，单元格将清除单元格高度之后，单元格将自动被压缩，当向布局单元格内插入内自动被压缩，当向布局单元格内插入内容后，单元格将自动调整大小以适应插容后，单元格将自动调整大小以适应插入的内容。入的内容。布局单元格的大小调整及布局表格的移布局单元格的大小调整及布局表格的移动动 在在在在DreamweaverDreamweaver 8 8中可以移动或调整布局单中可以移动或调整布局单中可以移动或调整布局单中可以移动或调整布局单元格的大小，但不能重叠布局单元格。对布局单元元格的大小，但不能重叠布局单元格。对布局单元元格的大小，但不能重叠布局单元格。对布局单

7、元元格的大小，但不能重叠布局单元格。对布局单元格进行移动或调整大小时，只能在布局表格的边框格进行移动或调整大小时，只能在布局表格的边框格进行移动或调整大小时，只能在布局表格的边框格进行移动或调整大小时，只能在布局表格的边框与内容的边线之间，只有嵌套在布局表格内部的才与内容的边线之间，只有嵌套在布局表格内部的才与内容的边线之间，只有嵌套在布局表格内部的才与内容的边线之间，只有嵌套在布局表格内部的才能被移动，其他的布局表格均不能移动。能被移动，其他的布局表格均不能移动。能被移动，其他的布局表格均不能移动。能被移动，其他的布局表格均不能移动。设置布局模式首选参数设置布局模式首选参数 要改变要改变布局

8、表格和布布局表格和布局单元格的显局单元格的显示颜色、自动示颜色、自动插入间隔图像插入间隔图像等属性，可通等属性，可通过设置布局模过设置布局模式参数来实现。式参数来实现。使用模板使用模板l l建立模板建立模板建立模板建立模板 l l将现有网页保存为模板将现有网页保存为模板将现有网页保存为模板将现有网页保存为模板 l l创建空白模板创建空白模板创建空白模板创建空白模板 l l模板的编辑模板的编辑模板的编辑模板的编辑 l l创建可编辑区域创建可编辑区域创建可编辑区域创建可编辑区域 l l取消对可编辑区域的标记取消对可编辑区域的标记取消对可编辑区域的标记取消对可编辑区域的标记 l l更改可编辑区域的名

9、称更改可编辑区域的名称更改可编辑区域的名称更改可编辑区域的名称 l l基于模板创建网页基于模板创建网页基于模板创建网页基于模板创建网页l l管理模板管理模板管理模板管理模板 将现有网页保存为模板将现有网页保存为模板 创建空白模板创建空白模板 创建可编辑区域创建可编辑区域 可编辑区域是指可以进行添加、修可编辑区域是指可以进行添加、修改和删除等操作的区域。改和删除等操作的区域。取消对可编辑区域的标记取消对可编辑区域的标记 l单击模板网页可编辑区域左上角要单击模板网页可编辑区域左上角要取消的可编辑区域标记。取消的可编辑区域标记。l选择选择修改修改 模板模板 删除模板标删除模板标记记菜单命令即可。菜单

10、命令即可。更改可编辑区域的名称更改可编辑区域的名称 插入可编辑区域后，可以更改插入可编辑区域后，可以更改它的名称。它的名称。基于模板创建网页基于模板创建网页l l用现有模板创建网页用现有模板创建网页 l l在在“资源资源”面板中从模板创建新网页面板中从模板创建新网页 l l将当前网页应用模板将当前网页应用模板 用现有模板创建网页用现有模板创建网页 在在“资源资源”面板中从模板创建面板中从模板创建新网页新网页 l l按按【F11】键打开键打开“资源资源”面板。面板。l l在在“资源资源”面板中单击左侧的按钮，查面板中单击左侧的按钮，查看当前站点中的模板列表框。看当前站点中的模板列表框。l l用鼠

11、标右键单击要应用的模板，在弹出用鼠标右键单击要应用的模板，在弹出的快捷菜单中选择的快捷菜单中选择“从模板新建从模板新建”命令，命令，模板即会在编辑窗口中打开。模板即会在编辑窗口中打开。将当前网页应用模板将当前网页应用模板 管理模板管理模板 l重命名模板重命名模板 l删除模板删除模板 l打开网页所附模板打开网页所附模板 l更新模板更新模板 l将网页脱离模板将网页脱离模板 重命名模板重命名模板 l l选择选择选择选择 窗口窗口窗口窗口 资源资源资源资源 菜单命令或按菜单命令或按菜单命令或按菜单命令或按【F11F11】键，打开键，打开键，打开键，打开“资源资源资源资源”面板。面板。面板。面板。l l

12、在在在在“资源资源资源资源”面板单击左侧的面板单击左侧的面板单击左侧的面板单击左侧的 按钮，打开模按钮，打开模按钮，打开模按钮，打开模板列表框。板列表框。板列表框。板列表框。l l在模板列表框中选择要重命名的模板文件，在模板列表框中选择要重命名的模板文件，在模板列表框中选择要重命名的模板文件，在模板列表框中选择要重命名的模板文件，再单击模板名称或在选择的模板名称上单击再单击模板名称或在选择的模板名称上单击再单击模板名称或在选择的模板名称上单击再单击模板名称或在选择的模板名称上单击鼠标右键，在弹出的快捷菜单中选择鼠标右键，在弹出的快捷菜单中选择鼠标右键，在弹出的快捷菜单中选择鼠标右键，在弹出的快

13、捷菜单中选择“重命重命重命重命名名名名”命令，此时模板名称处于反白显示，重命令，此时模板名称处于反白显示，重命令，此时模板名称处于反白显示，重命令，此时模板名称处于反白显示，重新输入新名称即可。新输入新名称即可。新输入新名称即可。新输入新名称即可。删除模板删除模板 打开网页所附模板打开网页所附模板 通过模板创建网页后，网通过模板创建网页后，网页与模板间就是链接关系，这页与模板间就是链接关系，这种应用了模板的网页常称为附种应用了模板的网页常称为附着模板网页。修改模板后，系着模板网页。修改模板后，系统自动更新附着模板的网页。统自动更新附着模板的网页。更新模板更新模板 l l打开要更新的模板。打开要

14、更新的模板。打开要更新的模板。打开要更新的模板。l l如果要对可编辑区域重新设置，可先取消可如果要对可编辑区域重新设置，可先取消可如果要对可编辑区域重新设置，可先取消可如果要对可编辑区域重新设置，可先取消可编辑区域标记，再选择要设置的可编辑区域，编辑区域标记，再选择要设置的可编辑区域，编辑区域标记，再选择要设置的可编辑区域，编辑区域标记，再选择要设置的可编辑区域，重新标记即可。重新标记即可。重新标记即可。重新标记即可。l l修改可编辑区域网页内容后，选择修改可编辑区域网页内容后，选择修改可编辑区域网页内容后，选择修改可编辑区域网页内容后，选择 文件文件文件文件 保存保存保存保存 菜单命令，打开

15、菜单命令，打开菜单命令，打开菜单命令，打开“更新模板文件更新模板文件更新模板文件更新模板文件”对对对对话框。话框。话框。话框。l l单击单击单击单击“更新更新更新更新”按钮更新通过该模板创建的所按钮更新通过该模板创建的所按钮更新通过该模板创建的所按钮更新通过该模板创建的所有网页。如只是保存该模板而不更新通过该有网页。如只是保存该模板而不更新通过该有网页。如只是保存该模板而不更新通过该有网页。如只是保存该模板而不更新通过该模板创建的网页，则单击模板创建的网页，则单击模板创建的网页，则单击模板创建的网页，则单击“不更新不更新不更新不更新”按钮。按钮。按钮。按钮。将网页脱离模板将网页脱离模板 如果不

16、想在网页中附着如果不想在网页中附着模板，或不希望网页与模板模板，或不希望网页与模板有联系，可以使网页与模板有联系，可以使网页与模板分开。分开。资源列表与库资源列表与库 l认识认识“资源资源”面板面板l使用站点列表使用站点列表 l使用收藏资源使用收藏资源l库库认识认识“资源资源”面板面板使用站点列表使用站点列表 使使用用站站点点列列表表可可以以进进行行删删除除、排排序序、插插入入资资源源等等操操作作，对对资源进行编辑。资源进行编辑。l使用站点列表使用站点列表 l在页面中添加资源在页面中添加资源 l改变资源顺序改变资源顺序 使用站点列表使用站点列表 l l选选选选择择择择 窗窗窗窗口口口口 资资资

17、资源源源源 菜菜菜菜单单单单命命命命令令令令或或或或按按按按【F11F11】键，打开键，打开键，打开键，打开“资源资源资源资源”面板。面板。面板。面板。l l选中选中选中选中“站点站点站点站点”单选项，打开站点列表。单选项，打开站点列表。单选项，打开站点列表。单选项，打开站点列表。l l单单单单击击击击相相相相应应应应的的的的资资资资源源源源类类类类别别别别按按按按钮钮钮钮，在在在在资资资资源源源源列列列列表表表表中中中中选选选选择择择择资资资资源源源源，这这这这时时时时在在在在预预预预览览览览窗窗窗窗口口口口中中中中将将将将显显显显示示示示所所所所选选选选择的资源。择的资源。择的资源。择的资

18、源。l l单单单单击击击击“插插插插入入入入”按按按按钮钮钮钮即即即即可可可可将将将将选选选选择择择择的的的的资资资资源源源源添添添添加加加加到网页中。到网页中。到网页中。到网页中。l l单击单击单击单击 按钮可以刷新资源列表。按钮可以刷新资源列表。按钮可以刷新资源列表。按钮可以刷新资源列表。l l单单单单击击击击 按按按按钮钮钮钮可可可可打打打打开开开开外外外外部部部部编编编编辑辑辑辑器器器器编编编编辑辑辑辑选选选选择择择择的资源。的资源。的资源。的资源。l l单击单击单击单击 按钮可将选择资源添加到收藏列表。按钮可将选择资源添加到收藏列表。按钮可将选择资源添加到收藏列表。按钮可将选择资源添

19、加到收藏列表。在页面中添加资源在页面中添加资源 在在页页面面中中添添加加资资源源，可可在在“资资源源”面面板板中中选选择择要要插插入入的的资资源源类类别别（“颜颜色色”和和“模模板板”类类别别除除外外），将将资资源源拖拖动动到到编编辑辑窗窗口口中中，或或单单击击“插插入入”按按钮钮将将资资源源插入到页面中。插入到页面中。改变资源顺序改变资源顺序 使用收藏资源使用收藏资源 在在“资资源源”面面板板中中，收收藏藏列列表表的的使使用用方方法法与与站站点点列列表表的的使使用用方方法法基基本本相相同同，但但有有许许多多资资源源只只能能在在收收藏藏列列表表中中才才能能完完成。成。库库 库库库库是是是是特特

20、特特殊殊殊殊的的的的DreamweaverDreamweaver文文文文件件件件，它它它它可可可可以以以以存存存存储储储储各各各各种种种种各各各各样样样样的的的的网网网网页页页页元元元元素素素素。如如如如在在在在网网网网站站站站中中中中页页页页面面面面的的的的标标标标题题题题和和和和版版版版权权权权信信信信息息息息等等等等是是是是固固固固定定定定不不不不变变变变的的的的，使使使使用用用用频频频频繁繁繁繁，这这这这些些些些就就就就可可可可以以以以通通通通过过过过库库库库将将将将其其其其单单单单独独独独保保保保存存存存，在在在在需需需需要要要要时时时时直直直直接插入库即可，和模板比较相似。接插入库

21、即可，和模板比较相似。接插入库即可，和模板比较相似。接插入库即可，和模板比较相似。上机实战上机实战 本课上机本课上机本课上机本课上机实战主要练习创实战主要练习创实战主要练习创实战主要练习创建模板和已创建建模板和已创建建模板和已创建建模板和已创建完成的网页应用完成的网页应用完成的网页应用完成的网页应用模板。在练习过模板。在练习过模板。在练习过模板。在练习过程中，主要用到程中，主要用到程中，主要用到程中，主要用到模板的创建、模模板的创建、模模板的创建、模模板的创建、模板对象的添加、板对象的添加、板对象的添加、板对象的添加、模板的保存和模模板的保存和模模板的保存和模模板的保存和模板的应用等知识板的应用等知识板的应用等知识板的应用等知识点。点。点。点。