DreamweaverCS5网课件.ppt

学习目标,了解资源面板的构成。能够创建、编辑模板，并利用模板创建网页。能够建立库项目并使用库项目编辑网页。能够在网站合理使用模板提高效率。,9.1 模板的建立与应用9.2 库的建立与应用9.3 实战演练：商业网站模板的应用,本章内容,9.1 模板的建立与应用,9.1.1案例制作：使用模板制作明星网站,通过本案例的操作，你将学会：1）如何创建模板和使用模板创建网页。2）如何建立与取删除板可编辑区域。,9.1 模板的建立与应用,9.1.1案例制作：使用模板制作明星网站,操作步骤：（1）定义站点 新建文件夹“qiuxing1”，将素材文件夹“qiuxing1”中所有文件和文件夹拷贝到“qiuxing1”文件夹中。在Dreamweaver CS5中定义站点，站点名称为“球星风采”，本地站点文件夹为qiuxing1文件夹。打开要制作模板的网页meixi.html。,9.1 模板的建立与应用,9.1.1案例制作：使用模板制作明星网站,操作步骤：（2）可编辑区域的建立与取消 由模板所建立的网页上，哪个区域可以进行编辑，是需要预先设定的，使用没有可编辑区域的模板所建立的网页是不能进行编辑修改的，也就没有什么意义。建立可编辑区域需要在模板制作的时候完成。1）将光标定位在要建立可编辑区域的位置，选择“当前位置：球星档案里奥梅西”中的“里奥梅西”，如图所示。,9.1 模板的建立与应用,9.1.1案例制作：使用模板制作明星网站,操作步骤：2）单击“插入”面板“常用”选项中的模板按钮 右边的向下箭头，在弹出的菜单中选择“可编辑区域”命令，如图所示。,9.1 模板的建立与应用,9.1.1案例制作：使用模板制作明星网站,操作步骤：3）系统会提示“Dreamweaver会自动将此文档转换为模板”，单击“确定”按钮，在打开的“新建可编辑区域”对话框中，修改可编辑区域的名称为“球星姓名”，如图所示。,9.1 模板的建立与应用,9.1.1案例制作：使用模板制作明星网站,操作步骤：4）单击“确定”按钮，此处可编辑区域创建完成。用同样的办法将正文中球星姓名、照片个人档案文字、简历文字定义为可编辑区域，如图所示。,9.1 模板的建立与应用,9.1.1案例制作：使用模板制作明星网站,操作步骤：5）保存模板。单击菜单“文件”“保存”，打开“另存为模板”对话框，模板取名为“qiuyuan.dwt”，如图所示，单击“保存”按钮，将完成的模板保存下来。,9.1 模板的建立与应用,9.1.1案例制作：使用模板制作明星网站,操作步骤：（3）利用所建模板建立“托马斯穆勒”的网页1）选择“文件”“新建”命令，打开“新建文档”对话框，在左侧单击“模板中的页”选项，站点选择“球星风采”，在“站点球星风采的模板”中选择“qiuyuan”，选择“当模板改变时更新页面”复选框，在“预览”框中可以预览模板的效果，如图所示。单击“创建”按钮，即可创建基于模板的网页。,9.1 模板的建立与应用,9.1.1案例制作：使用模板制作明星网站,操作步骤：2）使用模板创建的网页四周有黄色边框，右上角有黄色标签及模板名称。网页中可编辑区域被套上蓝色边框，只有可编辑区域的内容能够编辑。如图所示。删除可编辑区域的内容。,9.1 模板的建立与应用,9.1.1案例制作：使用模板制作明星网站,操作步骤：3）在“球星姓名”、“标题：球星姓名”、“球星档案”和“简历”四处可编辑区域输入“托马斯穆勒”的相关信息。将光标定位在“照片”位置，插入图像image/star/mule1.jpg，如图所示。4）将网页保存为mule.html，按F12键预览。,9.1 模板的建立与应用,9.1.2 新知解析,1.资源面板 资源面板的调出：单击“窗口”“资源”命令或按F11键。“资源”面板的打开 在Dreamweaver CS5中，单击菜单“窗口”“资源”命令或按F11键可以打开资源面板，如图所示。查看资源的方式 资源包括存储在站点中库的各种元素，如图像或影片文件。“资源”面板提供了两种查看资源的方式：“站点”：列表显示站点的所有资源。“收藏”：列表仅显示已经明确选择的资源。在这两个列表中，资源被分成九类，显示在“资源”面板的左侧。,图像：是 GIF、JPEG 或 PNG 格式的图像文件。颜色：是站点的文档和样式表中使用的颜色，包括文本颜色、背景颜色和链接颜色。URLs：是当前站点文档中的外部链接。此类别包括下列类型的链接：FTP、gopher、HTTP、HTTPS、JavaScript、电子邮件(mailto)和本地文件(file:/)。Flash：文件是任意版本的 Macromedia Flash 格式文件。“资源”面板仅显示 SWF 文件（压缩的 Flash 文件），而不显示 FLA文件（Flash 源代码文件Shockwave 影片：是任意版本的 Macromedia Shockwave 格式文件。影片：是 QuickTime 或 MPEG 格式文件。脚本：是 JavaScript 或 VBScript 文件。模板：提供了一种方便的方法，用于在多个页面上重复使用同一页面布局，以及在修改模板的同时修改附加到该模板的所有页面上的布局。库项目：是在多个页面中使用的元素；当修改一个库项目时，所有包含该项目的页面都将被更新。,9.1 模板的建立与应用,2.模板在Dreamweaver CS5中，模板文件最显著的特征存在可编辑区域和锁定区域两部分。锁定区域是不需要编辑的区域，多个网页的相同部分，是相对固定、不可改变的；可编辑区域是需要编辑的区域，用来定义网页具体内容部分。当使用模板建立网页时，用户只能编辑可编辑区域，其它区域不能编辑，使用模板有利用网站的维护、管理，也有利于网站风格的统一。模板实际上也是一种文档，它的扩展名为“.dwt”，存放在站点文件夹下的Templates文件夹中，如果该文件夹在站点中尚不存在，则Dreamweaver CS5将在保存新建模板时自动创建。,9.1 模板的建立与应用,3.模板的创建建立模板可以有三种方法：首先建立一个普通的页面，制作完成后保存为模板；在“新建文档”对话框中选择“空模板”建立；在“资源”面板中选择“模板”界面，点击右下角的“新建模板”按钮创建。在创建模板时，除了建立可编辑区域外，还可以添加可选区、重复区和重复表格。嵌套模板。嵌套模板其实就是利用另一个模板再创建的模板，在新的模板中，可以对基础模板中定义的可编辑区域做进一步的定义。,9.1 模板的建立与应用,9.1 模板的建立与应用,4.通过更新模板来更新网页 通过模板创建网页可以方便快捷地建立格式相同的一组网页，而在网页的维护中，如果需要修改该组网页的共同部分，则可以通过更新模板来更新本组网页。,9.1 模板的建立与应用,9.1.3技巧提示 1.与模板相似网页的建立利用模板可以方便地创建和维护一组布局格式相同，但内容不同的网页，对于有的格式相近的网页，我们也可以利用现成的模板创建，然后使网页与模板相脱离，使之成为独立的网页，这样既可以利用模板快速生成网页的格式，又可以脱离模板的限制，用户可以对其进行自由的编辑。1）创建模板并利用模板生成网页。2）使模板与文件脱离。选择菜单“修改”“模板”“从模板中分离”命令，网页与模板脱离，成为独立的网页。,9.1 模板的建立与应用,2.管理模板 使用“资源”面板的“模板”类别可以管理现有模板，包括重命名模板文件和删除模板文件。1）在“资源”面板中重命名模板 通过菜单“窗口”“资源”命令，打开“资源”面板，选择面板左侧的“模板”类别，选择要要修改的模板，再次单击模板的名称或右击选择“重命名”，然后输入一个新名称，按 Enter 键使更改生效。Dreamweaver将询问是否要更新基于此模板的文档的链接。若要更新则单击“更新”。如果不想更新则单击“不更新”。2）在“资源”面板中删除模板文件 在“资源”面板中，选择面板左侧的“模板”类别，单击模板的名称选择某一模板，单击面板底部的“删除”按钮可以删除该模板。,9.1 模板的建立与应用,3.管理模板 使用“资源”面板的“模板”类别可以管理现有模板，包括重命名模板文件和删除模板文件。（1）在“资源”面板中重命名模板：1）在“资源”面板（“窗口”“资源”）中，选择面板左侧的“模板”类别2）选择要要修改的模板,再次单击模板的名称,然后输入一个新名称。3）在“资源”面板中的另一个区域中单击，或者按 Enter 键使更改生效。4）Dreamweaver 将询问是否要更新基于此模板的文档。若要更新站点中所有基于此模板的文档，请单击“更新”。如果不想更新基于此模板的任何文档，则单击“不更新”。（2）在“资源”面板中删除模板文件：1）在“资源”面板（“窗口”“资源”）中，选择面板左侧的“模板”类别。2）单击模板的名称以选择该模板。3）单击面板底部的“删除”按钮，然后确认要删除该模板。,9.1 模板的建立与应用,9.1.4 实战演练：通过更新模板来更新网页,通过本案例的操作，你将学会：如何编辑模板和更新网页。,9.1 模板的建立与应用,9.1.4 实战演练：通过更新模板来更新网页,操作步骤：1）在“案例制作”的网站的基础上继续操作。在Templates文件夹下打开模板文件qiuyuan.dwt，将光标置于“精彩射门集锦”一栏内，将“精彩射门集锦”修改为“精彩射门荟萃”。再选中banner部分中的Flash动画，将其替换为ad1.swf文件。2）选择“文件”“保存”命令，弹出“更新模板文件”对话框，如图所示。,9.1 模板的建立与应用,9.1.4 实战演练：通过更新模板来更新网页,操作步骤：3）选择需要更新的网页，单击“更新”，弹出“更新页面”对话框，如图所示，单击“完成”，即可对所选网页完成更新。,9.2 库的建立与应用,9.2.1 案例制作：利用库修改站点导航,通过本案例的操作，你将学会：如何建立库项目并进行应用,9.2 库的建立与应用,9.2.1 案例制作：利用库修改站点导航,操作步骤：（1）定义站点 新建文件夹“qiuxing1”，将素材文件夹“qiuxing1”中所有文件和文件夹拷贝到“qiuxing1”文件夹中。在Dreamweaver CS5中定义站点，站点名称为“球星风采”，本地站点文件夹为qiuxing1文件夹。（2）创建库项目1）点击菜单“窗口”“资源”命令，打开“资源”面板，单击“资源”面板左侧的“库”选项，在面板右下角点击 按钮，新建库项目，命名为“zddh”如图所示。,9.2 库的建立与应用,9.2.1 案例制作：利用库修改站点导航,操作步骤：2）点击编辑按钮，进入编辑窗口，建立一个7行1列、宽113px，其它各项均为0的表格。选中表格中各单元格，设置其高度为31px，右击表格，选择“编辑标签”，打开标签编辑器，在左侧选择“浏览器特定的”，在右侧将“背景图像”设置为“image/beijing1.gif”，如图所示。,9.2 库的建立与应用,9.2.1 案例制作：利用库修改站点导航,操作步骤：3）在表格的第26行，分别插入鼠标经过图像联赛战况、明星档案、球场趣闻、精彩视频、2006年世界杯，如图所示。4）选择“文件”“保存”，保存库项目。（3）在文档kaka.html中插入库项目打开kaka.html文件，选择导航所在的表格，如图所示，将表格删除，并将光标定位在原表格处。选择库项目的zddh，单击“资源”面板下方的 按钮，插入该库项目。,9.2 库的建立与应用,9.2.1 案例制作：利用库修改站点导航,操作步骤：3）在表格的第26行，分别插入鼠标经过图像联赛战况、明星档案、球场趣闻、精彩视频、2006年世界杯，如图所示。4）选择“文件”“保存”，保存库项目。（3）在文档kaka.html中插入库项目打开kaka.html文件，选择导航所在的表格，将表格删除，并将光标定位在原表格处。选择库项目的zddh，单击“资源”面板下方的 按钮，插入该库项目。,9.2 库的建立与应用,9.2.1 案例制作：利用库修改站点导航,操作步骤：（4）修改库项目 在“资源”面板中双击库项目“zddh”，打开该项目，删除原来的联赛战况图片，输入文字“联赛战况”，并做链接，如图9-18所示。编辑完成后，保存，此时会打开“更新库项目”对话框，如图所示。单击“更新”按钮，使用该库项目的网页kaka.html会自动更新。,9.2 库的建立与应用,9.2.2 新知解析1.创建库项目 库可以包括中的任何元素，如文本、图像、动画、表格、脚本等。在Dreamweaver中保存的只是对被链接项目的引用。原始文件仍保留在指定的位置，这样才能保证库的正确引用。创建库项目有两种方法：直接创建库项目和将网页上的元素转换为库项目。法一：选择文档的一部分，在“资源”面板中单击左侧按钮，打开库面板，单击新建库项目按钮，选择的对象被添加到库的资源列表中，然后输入新的库项目名称。或者选中某一对象后，单击菜单“修改”“库”“增加对象到库”命令，再输入新的库项目名称。法二：在库面板中单击新建库项目按钮，建立一个空白库项目，再单击编辑按钮进入库项目编辑窗口，在编辑窗口进行制作，完成后保存即可。Dreamweaver CS5会在站点中新建一个Library文件夹，并将库项目保存在该文件夹中，库项目文件的扩展名为“.lib”。,9.2 库的建立与应用,2.编辑库项目 库项目应用到网页中后在网页中是不能编辑的，如果要编辑库项目，先打开库面板，在要编辑的库项目上双击，即可将库项目的原始文件打开进行修改。修改完成后，选择菜单“文件”“保存”命令，保存库项目。如果该项目应用在其他网页里，会弹出“更新库项目”对话框，在其中选择要更新的网页，如图所示，单击“更新”按钮，自动更新。更新完成后，会出现一个“更新网页”对话框，说明更新情况。,9.2 库的建立与应用,3.使文档中的库项目可编辑 库项目添加到文档后，如希望专门针对该页编辑，则必须断开文档中的库项目实例和库之间的链接。方法如下，在当前文档中选中库项目，在“属性”面板中单击“从源文件中分离”按钮，则网页中的库项目实例可以编辑了，当库项目发生更改时不会更新该实例。,9.3 商业网站模板的应用,案例制作：商业网站模板的应用,通过本案例的操作，你将学会：如何在Photoshop中对模板进行编辑、分割、如何将分割的图像储存为网页、如何在网页中进行调整生成自己的网页,9.3 商业网站模板的应用,案例制作：商业网站模板的应用,操作步骤：1.在Photoshop中整理下载的PSD模板。（1）整理模板文件新建文件夹jyjd，将素材中的模板文件“网页模板.psd”拷贝到该文件夹中。在Photoshop CS3中打开该模板，你会发现图像的元素分布在不同的图层上。首先根据需要在Photoshop CS3中修改、更换对象元素，包括色彩的调整。此处已经根据需要完成了图像的制作，如图所示。,9.3 商业网站模板的应用,案例制作：商业网站模板的应用,操作步骤：（2）切片分割图像为了便于进行定位分割，我们可在关键部位的轮廓处拉参考线。可以单击菜单“视图”“标尺”命令，使窗口的边沿显示标尺。鼠标移到窗口的上沿或左沿的标尺上拖拽出参考线。鼠标移到参考线上可移动参考线，将参考线拖回标尺则取消参考线。在图片的四周白色与彩色交界处、左侧公告栏的两侧、顶部导航区域拉参考线。1）在Photoshop CS3中单击左侧工具箱里的切片工具，在图像的适当位置按下鼠标进行拖拽，到另一个位置松开鼠标，划过的区域形成一个切片。切片具有标号，显示蓝色标记，称为用户切片，如图所示。,9.3 商业网站模板的应用,案例制作：商业网站模板的应用,操作步骤：2）与此同时，画面上会同时自动形成另外的切片，显示灰色标记，这些为系统切片。如图所示。如果你对系统切片的区域不满意，可以用切片工具重新分割，建立用户切片，系统切片会自动调整切片的大小。,9.3 商业网站模板的应用,案例制作：商业网站模板的应用,操作步骤：3）切片可以移动和调整大小，在工具箱上单击切片工具右下端的小三角，则弹出一个组合工具，选择“切片选取工具”，该工具可以选中（单击）、移动切片（拖动），并可以能调整切片大小、位置和命名切片（双击切片可以修改），也可选中切片按删除键进行删除。根据功能区域的不同，将图像进行了切割，如图所示。,9.3 商业网站模板的应用,案例制作：商业网站模板的应用,操作步骤：（3）整理文字内容1）左侧“航班查询”栏目在网页中是以表单的形式出现，而模板中是以图片的形式出现，因此需用单颜色覆盖即可，如图所示。2）在图层面板中选中该图层，用“矩形选区”工具绘制一个矩形选区，覆盖图片上的表单文字，在工具箱中单击前景色，用“吸管”工具吸取图片上表单区域的背景颜色，单击菜单“编辑”“填充”命令填充颜色，这样该图层被填充了图片的背景颜色，内容被覆盖掉。,9.3 商业网站模板的应用,案例制作：商业网站模板的应用,操作步骤：3）导航条上的文字可在网页中输入，因此将导航的文字图层删除。4）右侧栏目里的文字，可在网页中输入。在Photoshop CS3中若文字区域带有背景图案，则必须删除文字图层，后期在Dreamweaver中编辑网页时输入文字。5）若文字区域背景单一，可将此处的文字转化为网页中的HTML文字格式。首先选中文字图层，用“文字工具”选中文字，按CTRL+C进行复制，然后单击“切片选取工具”，双击文字切片打开“切片选项”对话框，切片类型选“无图像”，在“显示在单元格中的文本”下的文本框中CTRL+V粘贴文字。同时可设置背景颜色，单击“好”完成转化。转化后的文字将不在Photoshop CS3中显示，而在网页中显示。同理，将另外两个栏目的文字进行转化。再删除文字图层。删除底部导航文字图层和右下部“更多”文字图层。,9.3 商业网站模板的应用,案例制作：商业网站模板的应用,操作步骤：（4）保存为WEB格式1）单击“文件”“存储为WEB和设备所用格式”命令，打开“存储为WEB和设备所用格式”对话框，如图所示。,9.3 商业网站模板的应用,案例制作：商业网站模板的应用,操作步骤：2）用“切片选取工具”单击顶部的人物部分的切片，在右侧“预设”下面的“GIF”选项列表中选择“JPEG”，这样将复杂的图片切片转为jpg格式，保存更多的色彩信息，默认转为gif格式。分别选择复杂的图像切片转为JPEG格式。3）单击“存储”按钮，将文件存储在文件夹jyjd，名称为index.html，保存类型为“HTML和图像(*.html)”，单击“保存”。此时文件夹中出现index网页文件和一个images文件夹。Photoshop CS3将所有的切片转化为一个HTML表格，保持图像的布局形式，每一个切片变成单元格中插入的图像。,9.3 商业网站模板的应用,案例制作：商业网站模板的应用,操作步骤：2.在Dreamweaver CS5中处理网页1）定义站点 在Dreamweaver CS5中定义站点，站点名称为“金雁酒店”，本地站点文件夹为jyjd文件夹。2）打开index.html，每一个单元格插入了切片图像。若需要在图像上输入文字，则光标移到该单元格中，将切片图像删除，再将该图像设为单元格的背景图像，然后在单元格中输入文字即可。3）再观察在Photoshop CS3中转化格式的栏目文字，统一设定字号为12px。在公告栏单元格中输入文字，并制作跑马灯效果。4）航班查询单元格中插入表单。选中布局整个网页的大表格，在“属性”面板中设“对齐”为居中对齐。5）导航文字设置为空连接，并在“页面属性”中设置链接状态为鼠标划过、显示红色、带下划线，其他状态均为白色、无下划线。,