FlashCS3基本操作(模块一)

《FlashCS3基本操作(模块一)》由会员分享，可在线阅读，更多相关《FlashCS3基本操作(模块一)（54页珍藏版）》请在金锄头文库上搜索。

1、 模块一 Dreamweaver CS3基本操作主讲老师：付建新Dreamweaver CS3网页制作任务 实训教程学习目标u熟悉并掌握Dreamweaver CS3的操作界面u熟悉设置Dreamweaver CS3界面的方法u了解包括网页制作流程在内的各种网站规划的相关知识u掌握站点的规划、创建和管理等操作u掌握打开、预览、新建、保存和设置属性等关于网页的各 种基本操作 u 任务一 认识Dreamweaver CS3u任务目标 熟悉Dreamweaver CS3的操作界面，并通过本次任务掌握设置 Dreamweaver CS3操作环境以及熟悉网页制作的流程、网页常见 部分的称谓及规范、网站风

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

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

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

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

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

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

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

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

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

11、保持网站内容的新鲜感以吸引更多的浏 览者，而且还能定期检查页面元素显示是否正常以及各种超级链接是 否正常等。学习与探究 u网页中常见的称谓及规范 通常情况下，网页的基本组成部分有Logo、Banner、导航栏、超级链 接和版权信息等，如图所示即为各组成对象。网页组成对象学习与探究Logo：网站的“商标”，一般包含网站名称、网址、网站标志、网站理 念4个部分，也可取其中一个部分进行设计。Logo的位置一般在网页 页面的左上角，这是视觉的焦点，可以给读者留下较深的印象。Logo 的尺寸通常为8831像素。Banner：一般用作宣传网页的内容，也称为广告条，其位置一般在 Logo的右侧。Banner

12、的标准大小为46860像素，其设计要点是清晰 明确，要服从整体设计的需要。Banner通常被做成动画效果，以增强 其表现力。导航栏：是浏览者浏览网页时有效的指向标志。导航栏可分为框架导 航、文本导航和图片导航等，根据导航栏放置的位置可分为横排导航 栏和竖排导航栏两种。学习与探究按钮：按钮也是一种超级链接，其大小及样式没有具体的规定，但一 般要符合所处位置的形状和色调。超级链接：超级链接是指页面对象之间的链接关系，它可以是网站内 部页面和对象的链接，也可以是与其他网站的链接，通过单击网页中 的超级链接就可以跳转到相应的页面。版权信息：版权信息一般位于网页的最底部，主要起版权申明等作用 。部分网站

13、也将计数器等内容放置在这一区域。学习与探究 u网页配色技巧使用同一种颜色：先选定一种色相（H），然后调整饱和度（S）或 亮度（B），产生新的色彩。此技巧的好处在于使着色的页面色彩统 一、有层次感。使用对比色：先选定一种色彩，然后选择它的对比色（在Photoshop 里按“Ctrl+I”键反相得到），此技巧的好处在于整个页面的色彩丰富 ，对比强烈但不花哨。使用同色系颜色：即使用同色系的色彩，如淡蓝、淡黄、淡绿或土黄 、土灰、土蓝等。在Photoshop的“拾色器”对话框右侧先确定一种颜 色，然后将鼠标指针定位到“H”文本框中，按键盘上的上、下光标键 即可选取相应的颜色了。此技巧的好处在于使页面色

14、彩丰富且颜色感 觉统一。任务二 创建与管理“公司简介”站点 u任务目标 利用Dreamweaver的“站点”菜单创建并管理“公司简介”站点。通过练习 熟悉并掌握站点的创建、复制、编辑和导出等操作。具体目标要求如下： （1）掌握站点的创建的方法。 （2）掌握站点的编辑操作。 （3）熟悉并掌握站点的复制和导出操作。任务二 创建与管理“公司简介”站点u操作思路（1）利用“站点”菜单创建站点。（2）通过创建的站点复制新的站点。（3）对新的站点重新进行编辑。（4）将编辑后的站点导出。操作一 创建站点 （1）启动Dreamweaver CS3，选择【站点】【新建站点】菜单命令 。 （2）在打开的对话框的“

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

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