网页设计Dreamweaver CS3 教案(华东师范大学出版社).docx

网页设计DreamweaverCS3教案(华东师范大学出版社)

第一篇：网页设计DreamweaverCS3教案(华东师范大学出版社)另存为模板。在弹出的“另存模板”对话框中，“站点”下拉列表框用来设置模板保存的站点，课选择一个选项。“现存的模板”选框显示了当前站点的所有模板。“另存为”文本框用来设置模板的命名。单击“另存模板”对话框中的“保存”按钮，就把当前网页转换为了模板，同时将模板另存到选择的站点。9单击“保存”按钮，保存模板。系统将自动在根目录下创建Template文件夹，并将创建的模板文件保存在该文件夹中。在保存模板时，如果模板中没有定义任何可编辑区域，系统将显示警告信息。我们可以先单击“确定”，以后再定义可编辑区域。3、从文件菜单新建模板选择“文件/新建”命令，打开“新建文档”对话框，然后再类别中选择“模板页”，并选取相关的模板类型，直接单击“创建”按钮即可。”（二）Dreamweaver8定义可编辑区域模板创建好后，要在模板中建立可编辑区，只有在可编辑区里，我们才可以编辑网页内容。可以将网页上任意选中的区域设置为可编辑区域，但是最好是基于HTML代码的，这样在制作的时候更加清楚。在文档窗口中，选中需要设置为可编辑区域的部分，单击常用快捷栏的“模板”按钮，在弹出菜单中选择“可编辑区域”项。10在弹出的“新建可编辑区域”对话框中给该区域命名，然后单击“确定”按钮。新添加的可编辑区域有蓝色标签，标签上是可编辑区域的名称。如果希望删除可编辑区域，可以将光标置于要删除的可编辑区域内，选择“修改/模板/删除模板标记”命令，光标所在区域的可编辑区即被删除。这样模板文件就创建好了。（三）、其他模板区域模板中除了可以插入最常用的“可编辑区域”外，还可以插入一些其他类型的区域，分别为“可选区域”、“重复区域”、“可编辑可选区域”和“重复表格”。1、可选区域可选区域是模板中的区域，用户可将其设置为在基于模板的文件中显示或隐藏。当要为在文件中显示的内容设置条件时，即可使用可选区域。2、重复区域重复区域时可以根据需要在基于模板的页面中负值任意次数的模板部分。重复区域通常用于表格，也可以为其他页面元素定义重复区域。3、可编辑可选区域是可选区域的一种，可以设置显示或隐藏所选区域，并且可以编辑该区域中的内容。（四）、Dreamweaver8使用库所谓库项目，实际上就是文档内容的任意组合，可以将文档中的任意内容存储为库项目，使它在其它地方被重复使用。1、创建库在文档窗口中选择需要保存为库项目的内容。单击资源面板“库”分类中右下角的“新建库项目”按钮。一个新的项目出现在资源面板“库”分类的列表中，预览框中显示预览的效果，还可以给该项目键入新名称。这样，一个库项目就创建好了。2、插入库将光标方在网页中需要插入库文件的位置，在资源面板“库”分类中选择需要插入的库项目，直接拖动到光标所在位置即可。3、更改库如果修改了库文件，选择“文件/保存”命令，弹出“更新库项目”对话框，询问是否更新网站中使用了该库文件的网页。单击“更新”按钮，将更新网站中使用了该库文件的网页。（五）、创建基于模板的页面1、打开素材csslianxi.html文件，选择菜单栏的文件>另存为模板命令。2、在弹出的另存为模板对话框中，在“站点”文本框选择“xmweb”，在“另存为”给模板命名为mo1，点击确定。3、弹出是否更改链接的提示，选择“是”。此时，在站点内自动生成一个名为“Templates”的文件夹，名称为mo1.dwt的模板文件被保存在该文件夹中。4、鼠标在网页表格的最下一行空白处单击一下，选中状态栏的标签，选择菜单栏的插入>模板对象>可编辑区域命令。5、弹出“可编辑区域”对话框，点击“确定”。这样我们就完成了模板的制作。6、新建06.html文件，选择菜单栏>窗口>资源命令，打开资源面板。7、点击资源面板的“模板”按钮，在资源面板我们就可以看见mo1.dwt文件，选中mo1.dwt，按住鼠标左键直接拖拽到06.html的文档窗口中。即可将该模板应用到06.html中。第11章CSS样式表教学目标：1.能在网页文档中建立选择器类型为“类”的CSS样式表2.能在网页文档中通过“class”属性使用类型为“类”样式表3.能够建立CSS样式表文件，并在该文件中定义各种样式表4.能够建立选择器类型为“伪类”的样式表5.能够在网页文档中引用CSS样式表文件教学重点：CSS中的各种属性、熟悉CSS面板的使用教学难点：CSS中的各种属性、熟悉CSS面板的使用教学课时：理论：2课时实训：4课时教学方法：讲授法、任务驱动法。教学过程:一、引入新课12将样式表与网页相关联，关联的网页将自动套用样式表中的格式。使所有网页中都可以应用相同的样式，这样既保证了站点风格的一次性，又提高了工作效率。二、讲