Flash CS3基本操作（模块一）电子课件中职Dreamweaver+CS3网页制作任务实训教程（电子教案）.ppt

《Flash CS3基本操作（模块一）电子课件中职Dreamweaver+CS3网页制作任务实训教程（电子教案）.ppt》由会员分享，可在线阅读，更多相关《Flash CS3基本操作（模块一）电子课件中职Dreamweaver+CS3网页制作任务实训教程（电子教案）.ppt（55页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、Flash CS3基本操作（模块一）电子课件 中职Dreamweaver+CS3网页制作任务实训教程（高教版）模块一 Dreamweaver CS3基本操作 主讲老师：*Dreamweaver CS3网页制作任务实训教程学习目标u熟悉并掌握DreamweaverCS3的操作界面u熟悉设置DreamweaverCS3界面的方法u了解包括网页制作流程在内的各种网站规划的相关知识u掌握站点的规划、创建和管理等操作u掌握打开、预览、新建、保存和设置属性等关于网页的各种基本操作u任务一 认识Dreamweaver CS3u任务目标熟悉DreamweaverCS3的操作界面，并通过本次任务掌握设置Drea

2、mweaverCS3操作环境以及熟悉网页制作的流程、网页常见部分的称谓及规范、网站风格选择以及配色搭配等一系列涉及到网站规划的知识。具体目标要求如下：（1）熟悉设置DreamweaverCS3操作界面的方法。（2）了解并熟悉网站规划各方面的知识。任务一 认识Dreamweaver CS3u操作思路（1）通过创建快捷图标启动DreamweaverCS3。（2）认识DreamweaverCS3的操作界面并自定义其收藏夹。（3）学习网页制作的基本流程、网页中常见的称谓及规范和网站配色技巧等。操作一操作一 Dreamweaver CS3界面介绍界面介绍（1）在电脑中安装好DreamweaverCS3后

3、，在【开始】【所有程序】【AdobeDreamweaverCS3】菜单命令上单击鼠标右键，在弹出的快捷菜单中选择【发送到】【桌面快捷方式】菜单命令，如图所示。（2）此时桌面上将出现创建的快捷启动图标，双击该图标，如图所示。创建桌面快捷启动图标双击桌面快捷启动图标操作一操作一 Dreamweaver CS3界面介绍界面介绍（3）此时即可启动DreamweaverCS3，并打开其操作界面，该界面的各组成部分如图所示。Dreamweaver CS3的操作界面操作二 自定义Dreamweaver CS3收藏夹（1）单击插入栏中的“收藏夹”选项卡，在下方的空白区域单击鼠标右键，在弹出的快捷菜单中选择“自

4、定义收藏夹”命令，如图所示。（2）打开“自定义收藏夹对象”对话框，在左侧的列表框中选择需添加到收藏夹中的对象，然后单击“添加”按钮，如图所示。自定义收藏夹选择添加的对象操作二 自定义Dreamweaver CS3收藏夹（3）此时所需对象即可添加到右侧的列表框中，用相同方法添加其余对象，然后单击“添加分隔符”按钮，如图所示。（4）此时对话框右侧的列表框中将在所选对象下方插入分隔符，以区分同类对象，如图 添加的对象添加分隔符操作二 自定义Dreamweaver CS3收藏夹（5）用相同方法添加其他对象和分隔符，完成后单击“确定”按钮，如图所示。（6）此时DreamweaverCS3操作界面的收藏夹

5、中将出现添加的对象，以便网页设计时调用相应的命令，如图所示。添加的对象添加后的效果学习与探究u认识DreamweaverCS3各组成部分的作用标题栏：位于DreamweaverCS3操作界面最上方，主要用于显示软件名、文件名和控制界面大小等用途，如图所示。标题栏组成学习与探究菜单栏：由“文件”、“编辑”、“查看”、“插入记录”、“修改”、“文本”、“命令”、“站点”、“窗口”和“帮助”10个菜单组成，单击相应的菜单，即可在弹出的下拉菜单中选择相应命令，如图所示即为执行“插入记录”菜单下的【图像对象】【图像占位符】菜单命令。菜单栏用法学习与探究插入栏：由“常用”、“布局”、“表单”、“数据”、“

6、Spry”、“文本”和“收藏夹”7个类别组成。各类别中包含多个按钮，其中右侧带有向下黑色小箭头的按钮是一个按钮组，表示该按钮包含多个同类型按钮，单击黑色小箭头按钮即可选择该按钮组中的其他按钮，如图所示。插入栏用法学习与探究文档工具栏：位于插入栏下方，可实现文档窗口视图切换、修改文档标题、文件管理、预览文档、视图相关控制及验证相关控制等功能，如图所示。文档工具栏组成学习与探究文档窗口：用于显示当前文档的具体内容。对网页文档的编辑操作大都在文档窗口中完成，如图所示。文档窗口学习与探究状态栏：位于文档窗口底部，用于显示当前被编辑文档的相关信息，并包含了一些用于控制显示的功能按钮，如图所示。状态栏组成

7、学习与探究属性检查器：位于文档窗口下方，用于查看或编辑当前选定页面元素的常用属性。根据所选元素的不同，属性检查器所呈现的内容也会有所不同。如图所示即为两种不同内容的属性检查器。文本属性检查器（上）和图像属性检查器（下）学习与探究面板组:每一个面板组都可以通过单击“折叠/展开”按钮来进行折叠或展开。若需要的面板组没有显示在操作界面中，可通过“窗口”菜单下的命令将其显示；不使用面板组时可单击面板组与文档窗口之间的“隐藏/显示”按钮来隐藏。如图所示即为面板组的组成情况。面板组组成学习与探究u设置DreamweaverCS3操作环境自定义工作区布局类型：DreamweaverCS3针对不同行业的用户特

8、点，准备了3种不同的工作区布局类型。通过选择【窗口】【工作区布局】菜单命令，并在弹出的子菜单中选择不同的布局类型即可，如图所示。工作区布局命令学习与探究切换文档视图：无论是网页设计者还是Web程序开发人员，都常常需要在设计视图和代码视图中进行切换。为方便这种操作，DreamweaverCS3提供了3种文档窗口视图方式，通过单击文档工具栏中的文档模式按钮即可切换到相应的视图中，如图所示为单击“拆分”按钮后的效果。拆分模式下的文档视图学习与探究自定义文档显示方式：指文档是否以最大化方式显示。在最大化显示状态，可在多个文档之间通过文档窗口顶部的选项卡进行切换；在非最大化显示状态时，多个文档以独立窗口

9、的方式呈现，如图所示。通过单击文档窗口右上角的按钮即可使文档在最大化和非最大化之间切换。非最大化状态下的文档窗口学习与探究u网页制作流程收集资料：制作网页前应先收集需用到的文字和图片等各种资料素材。如制作学校网页就需要学校提供文字材料，如学校简介、招生对象说明和校园图片等；制作个人网站则应收集个人简历和爱好等方面的材料。规划站点：规划站点主要是为了防止浏览者在访问网页时“迷路”。根据浏览者的访问顺序可以将内容设计为树型目录，一般不要级数太多（尽可能少于四级），否则会让人感觉繁琐，也不方便管理。制作网页：网站一般由多个网页链接而成，要让浏览者方便且轻松地畅游网站，在制作网页时应首先构建页面框架，

10、然后创建导航条，接着逐一填充页面内容。学习与探究测试站点：站点测试可保证后面正确发布网站，并让浏览者成功访问网页。根据客户端要求、网站大小以及浏览器种类等进行，一般将站点移到一个模拟调试服务器上对站点进行测试或编辑。发布站点：发布网页前需在Internet上申请一个主页空间，用于指定网站或主页在Internet上的存放位置。发布网页一般使用FTP（远程文件传输）软件（如LeapFTP、CuteFTP及FlashFXP等）上传到服务器中申请的网址目录下。更新与维护站点：站点上传到服务器后，每隔一段时间应对站点中的页面进行更新，这样不仅可以保持网站内容的新鲜感以吸引更多的浏览者，而且还能定期检查页

11、面元素显示是否正常以及各种超级链接是否正常等。学习与探究u网页中常见的称谓及规范通常情况下，网页的基本组成部分有Logo、Banner、导航栏、超级链接和版权信息等，如图所示即为各组成对象。网页组成对象学习与探究Logo：网站的“商标”，一般包含网站名称、网址、网站标志、网站理念4个部分，也可取其中一个部分进行设计。Logo的位置一般在网页页面的左上角，这是视觉的焦点，可以给读者留下较深的印象。Logo的尺寸通常为8831像素。Banner：一般用作宣传网页的内容，也称为广告条，其位置一般在Logo的右侧。Banner的标准大小为46860像素，其设计要点是清晰明确，要服从整体设计的需要。Ba

12、nner通常被做成动画效果，以增强其表现力。导航栏：是浏览者浏览网页时有效的指向标志。导航栏可分为框架导航、文本导航和图片导航等，根据导航栏放置的位置可分为横排导航栏和竖排导航栏两种。学习与探究按钮：按钮也是一种超级链接，其大小及样式没有具体的规定，但一般要符合所处位置的形状和色调。超级链接：超级链接是指页面对象之间的链接关系，它可以是网站内部页面和对象的链接，也可以是与其他网站的链接，通过单击网页中的超级链接就可以跳转到相应的页面。版权信息：版权信息一般位于网页的最底部，主要起版权申明等作用。部分网站也将计数器等内容放置在这一区域。学习与探究u网页配色技巧使用同一种颜色：先选定一种色相（H）

13、，然后调整饱和度（S）或亮度（B），产生新的色彩。此技巧的好处在于使着色的页面色彩统一、有层次感。使用对比色：先选定一种色彩，然后选择它的对比色（在Photoshop里按“Ctrl+I”键反相得到），此技巧的好处在于整个页面的色彩丰富，对比强烈但不花哨。使用同色系颜色：即使用同色系的色彩，如淡蓝、淡黄、淡绿或土黄、土灰、土蓝等。在Photoshop的“拾色器”对话框右侧先确定一种颜色，然后将鼠标指针定位到“H”文本框中，按键盘上的上、下光标键即可选取相应的颜色了。此技巧的好处在于使页面色彩丰富且颜色感觉统一。任务二任务二 创建与管理创建与管理“公司简介公司简介”站点站点u任务目标利用Dream

14、weaver的“站点”菜单创建并管理“公司简介”站点。通过练习熟悉并掌握站点的创建、复制、编辑和导出等操作。具体目标要求如下：（1）掌握站点的创建的方法。（2）掌握站点的编辑操作。（3）熟悉并掌握站点的复制和导出操作。任务二任务二 创建与管理创建与管理“公司简介公司简介”站点站点u操作思路（1）利用“站点”菜单创建站点。（2）通过创建的站点复制新的站点。（3）对新的站点重新进行编辑。（4）将编辑后的站点导出。操作一 创建站点（1）启动DreamweaverCS3，选择【站点】【新建站点】菜单命令。（2）在打开的对话框的“您打算为您的站点起什么名字”文本框中输入站点名称，如输入“练习”，单击“下

15、一步”按钮，如图所示。设置站点名称操作一 创建站点（3）在打开的对话框的“您是否打算使用服务器技术”栏中选中“否，我不想使用服务器技术”单选项，单击“下一步”按钮，如图所示。选择服务器技术操作一 创建站点（4）在打开的对话框中选中“编辑我的计算机上的本地副本，完成后再上传到服务器”单选项，在“您将把文件存储在计算机上的什么位置?”文本框输入“D:练习”，单击“下一步”按钮，如图所示。设置文件编辑方式与存储位置操作一 创建站点（5）在打开的对话框的“您如何连接到远程服务器”下拉列表框中选择“无”选项，单击“下一步”按钮，如图所示。（6）在打开的对话框的“总结”栏中显示已设置的各项参数，确认无误后

16、单击“完成”按钮完成站点的创建，如图所示。设置连接服务器方式完成站点的创建操作二操作二 管理站点管理站点（1）选择【站点】【管理站点】菜单命令，在打开的“管理站点”对话框中选择前面创建的“练习”站点，然后单击“复制”按钮，如图所示。（2）此时将复制出名为“练习 复制”的站点，并处于选中状态。直接单击“编辑”按钮，如图所示。复制站点编辑站点操作二操作二 管理站点管理站点（3）在打开的对话框中将站点的名称更改为“公司简介”，单击“下一步”按钮，如图所示。（4）在打开的对话框中保持默认设置，直接单击“下一步”按钮，如图所示。修改站点名称选择服务器技术操作二操作二 管理站点管理站点（5）在打开的对话框

17、中将存储位置设置为“D:公司简介”，然后单击“下一步”按钮，如图所示。（6）在打开的对话框中保持默认设置，直接单击“下一步”按钮，如图所示。编辑站点存储位置设置连接服务器方式操作二操作二 管理站点管理站点（7）在打开的对话框中确认设置无误后，单击“完成”按钮，如图所示。（8）返回“管理站点”对话框，选择“公司简介”站点选项，单击“导出”按钮，如图所示。完成站点编辑导出站点操作二操作二 管理站点管理站点（9）在打开的“导出站点”对话框的“保存在”下拉列表框中设置站点的保存路径，在“文件名”下拉列表框中输入文件保存名称，然后单击“保存”按钮，如图所示。（10）打开保存站点的文件夹窗口即可看到导出的

18、站点文件，如图所示。设置导出位置和名称导出的站点文件学习与探究u站点导入与删除站点的导入：导入或导出站点是为了实现在多台电脑中进行相同的网站开发，站点的导入方法为，选择【站点】【管理站点】菜单命令，在打开的“管理站点”对话框中单击“导入”按钮，接着在打开的对话框中选择站点文件，最后单击“打开”按钮即可。站点的删除：无用的站点可及时删除以便于管理，其方法为，打开“管理站点”对话框，选择需删除的站点选项，然后单击“删除”按钮即可。任务三 制作“公司介绍”网页u任务目标通过对网页的各种基本操作制作出“公司介绍”网页，完成后的最终效果如图所示。创建并设置页面属性后的网页效果任务三 制作“公司介绍”网页

19、u操作思路（1）利用Dreamweaver提供的预设格式创建具有布局样式的空白网页。（2）将创建的网页以“公司介绍”为名进行保存。（3）关闭保存后的网页。（4）通过对话框打开前面保存的“公司介绍”网页。（5）在IE浏览器中预览打开的网页。（6）对网页的外观属性进行适当设置，完成后保存设置。操作一 新建和保存网页（1）启动DreamweaverCS3，选择【文件】【新建】菜单命令，如图所示。（2）打开“新建文档”对话框，单击左侧的“空白页”选项卡，在右侧的“页面类型”列表框中选择“HTML”选项，然后在右侧的“布局”列表框中选择“2列弹性，左侧栏”选项，最后单击“创建”按钮，如图所示。新建网页选

20、择布局样式操作一 新建和保存网页（3）此时将根据所选布局样式创建出网页，然后选择【文件】【保存】菜单命令，如图所示。（4）打开“另存为”对话框，在“保存在”下拉列表框中选择网页存储的位置，在“文件名”下拉列表框中输入网页名称，这里输入“公司介绍.html”，然后单击“保存”按钮，如图所示。保存网页设置保存位置和名称操作一 新建和保存网页（5）此时Dreamweaver操作界面的标题栏上将显示保存后的网页名称，单击工作区中该网页选项卡右侧的“关闭”按钮关闭该网页即可，如图所示。关闭网页操作二 打开和预览网页（1）在Dreamweaver操作界面中选择【文件】【打开】菜单命令，如图所示。（2）打开

21、“打开”对话框，在“查找范围”下拉列表框中选择网页存储的位置，在下方的列表框中选择需打开的网页选项，然后单击“打开”按钮，如图所示。打开网页选择需打开的网页文件操作二 打开和预览网页（3）此时将在Dreamweaver中显示该网页内容，单击文档工具栏中的“在浏览器中预览/调试”按钮，在弹出的下拉菜单中选择“预览在IExplore”命令，如图所示。在IE浏览器中预览网页操作二 打开和预览网页（4）此时系统将自动启动IE浏览器，并在其中预览打开的网页文件效果，如图所示。预览网页的效果操作三 设置网页属性（1）打开“公司介绍”网页，选择【修改】【页面属性】菜单命令，如图所示。（2）打开“页面属性”对

22、话框，选择左侧列表框中的“外观”选项，单击“页面字体”下拉列表框右侧的“倾斜”按钮。（3）单击“文本颜色”栏中的色块，在弹出的下拉列表框中单击编号为“#003366”的色块，如图所示。设置网页属性 设置文本颜色操作三 设置网页属性（4）用相同方法将背景颜色设置为“#99CCFF”，然后单击“确定”按钮，如图所示。此时保存修改后的网页并进行预览即可得到前面显示的最终效果。设置网页背景颜色学习与探究u网页的“另存为”操作“另存为”操作也是Dreamweaver中常用的操作之一，将某一文档另存为新文档后，则当前编辑的效果都将保存到新文档中，原文档将自动关闭，这之后的所有编辑操作都将基于新文档，对原文

23、档不会产生任何影响。另存为文档的操作可通过选择【文件】【另存为】菜单命令或按“Ctrl+Shift+S”键来打开“另存为”对话框，并按照保存网页文件时的操作进行设置即可。学习与探究u打开网页的其他方式有一种特殊的网页叫框架型网页，它是由框架集文件和多个嵌入的框架页组成，这种类型的网页就可通过在框架中来打开文档。其方法为：选择【文件】【在框架中打开”菜单命令，在打开的“选择HTML文件”对话框的“查找范围”下拉列表框中选择文件的保存位置，在中间的列表框中选择某个框架文件，单击“确定”按钮即可。导入文档是指从其他格式的文档中导入数据到HTML文档中，前提是编辑窗口中已经有打开的文档，并正处于编辑状

24、态。其方法为：选择【文件】【导入】菜单命令，在弹出的子菜单中选择某个格式命令（包括XML、表格式、Word和Excel等格式），并在打开的对话框中选择需导入的文件，最后单击“打开”按钮。实训一 规化“汽车销售”网站u实训目标 主要强化网站规划的能力,在进行网页设计之前，首先应对所设计的网页进行详细规划，如素材收集与颜色选择等，只有在前期对这些步骤或规划进行了详细的分析，才能在后面的制作中设计出满意的网页效果。实训一 规化“汽车销售”网站u实训分析（1）收集素材。收集包括汽车图片、汽车参数、卖场信息及汽车评测等各方面的图片和数据等信息。（2）规划站点。根据实际情况将内容设计为树型目录，如确认导航

25、栏包含的导航按钮，然后确认每个导航按钮下包含的子选项等，使整个网页结构既清晰又规范。（3）确认颜色。首先可确定按哪种配色方式来设计网页，如同颜色、对比色或同色系等。然后应根据网站中呈现的内容来选择颜色，如销售高档汽车可考虑使用黑色、深蓝色等感觉较为高雅的颜色；销售经济型汽车则可考虑使用黄色或绿色等较为鲜艳活泼的颜色。（4）设计Logo。Logo不仅是网站的标志，也是网站内容的体现。（5）规划网页。大致规划网站中每个网页的布局、结构和包含内容等情况，以方便后期制作。实训二实训二 创建创建“房地产公司房地产公司”站点站点u实训目标通过新建、编辑和导出站点等操作创建“房地产公司”站点，然后在该站点下

26、新建并保存“公司简介”网页，最后对网页属性进行适当设置后预览网页效果。实训的最终效果如图所示。预览网页效果实训二实训二 创建创建“房地产公司房地产公司”站点站点u实训分析（1）在E盘根目录下新建“房地产”站点。（2）将“房地产”站点名称重新编辑为“房地产公司”。（3）将创建的“房地产公司”站点导入到D盘根目录。（4）新建布局样式为“2列弹性，右侧栏、标题和脚注”的网页文件，并保存在E盘根目录下的“房地产公司”文件夹中（即保存在该站点下）。（5）将新建网页文件的外观属性设置为页面字体“加粗”、大小为“小”、文本颜色和背景颜色均为“#336633”。（6）保存设置并在IE浏览器中预览效果。创建“房地产公司”站点的操作思路