FlashCS3基本操作(模块一).ppt

1、模块一Dreamweaver CS3基本操作，发表讲师：附新，Dreamweaver CS3网页制作任务实习教程， 学习目标熟悉并掌握Dreamweaver CS3的操作界面如何设定Dreamweaver CS3界面了解包括网页制作过程在内的各种网站修订画的相关知识掌握网站的修订画、制作和管理等操作掌握开放、预览、新建、 掌握保存和设定属性等网页相关的各种基本操作，任务目标是熟悉Dreamweaver CS3的操作界面，通过这次的任务设定Dreamweaver CS3的操作环境，网页制作流程，网页常见部分的标题和规范，网页具体目标是熟悉(Dreamweaver CS3操作界面的设定方法。 (2

2、)了解和熟悉网站订阅的各方面知识。 任务识别到Dreamweaver CS3后，通过创建操作构想(1)快捷方式图标启动Dreamweaver CS3。 (识别Dreamweaver CS3操作界面并自定义收藏夹。 (3)学习网页制作的基本流程、网页上常见的称呼和规范、网站的配色技巧等。 操作Dreamweaver CS3接口进行说明的话，(1)在电脑上安装Dreamweaver CS3后，右键点击【开始】【所有程序】【Adobe Dreamweaver CS3】菜单指令，显示出来的菜单此时在桌面上显示创建的快速启动图标，双击该图标，则如图所示。 创建桌面快捷方式启动图标，双击桌面快捷方式启动图

3、标，操作Dreamweaver CS3界面的介绍，(3)启动Dreamweaver CS3，打开其操作界面。 这个接口的各个构成要素如图所示。Dreamweaver CS3操作界面、操作2自定义Dreamweaver CS3收藏夹，(1)点击插入栏的“收藏夹”选项卡，右键单击下面的空白区域，从显示的快捷菜单中选择“自定义收藏夹” (2)打开“自定义收藏夹对象”对话框，在左侧列表框中选择要添加到收藏夹的对象，然后单击“添加”按钮(参见附图)。自定义收藏夹，选择要添加的对象，操作两个自定义Dreamweaver CS3收藏夹，(3)将所需对象添加到右侧列表框，以相同的方式添加对象，然后单击“添加分

4、隔符”按钮。 (4)此时，在对话框右侧的列表框中，在所选择的对象的下方插入分隔符，区别同种对象、追加的对象、分隔符的追加、操作Dreamweaver CS3收藏夹的自定义、(5) 添加用同样的方法添加的对象和分隔符，点击“ok”按钮(6)此时出现被添加到Dreamweaver CS3的操作界面的收藏夹的对象，如图所示，在网页设计时调用对应的命令哟识别添加的对象、添加的效果、学习和探索、Dreamweaver CS3中每个组件的角色标题栏：位于Dreamweaver CS3操作界面的顶部，主要是软件名、文件名和控件界面的大小、标题栏的构成、学习和探索、菜单栏：“文件”、“编辑”、“显示”、“插入

5、记录”、“修改”、“文本”、“命令”、“站点”、“”、菜单栏的使用方法、学习和探索、插入栏：“公用”、“布局”、“表单”、“数据”、“Spry 每个类别包含多个按钮。 右侧有一个向下的黑色小箭头的按钮是一组按钮，表示包含多个相同类型的按钮。 如果点击黑色的小箭头按钮，则如图所示，按钮组内的其他按钮、插入栏的使用方法、学习和探索、文档工具栏：位于插入栏的下方，实现文档窗口的显示切换、文档标题的修改、文件管理、文档预览、视图相关的控制、验证相关的控制等功能。 文档工具栏配置、学习和探索、文档窗口：显示当前文档的具体内容。 编辑web文档的许多操作是在“文档”窗口中完成的，如图所示。文档窗口、学习和

6、探索、状态栏：位于“文档”窗口底部，显示有关当前编辑的文档的信息，并包含控制显示的功能按钮，如图所示。 状态栏配置、学习和探索、属性检查器：位于“文档”窗口下，用于查看或编辑当前选定页面元素的常规属性。 您所选取的元素会影响属性检测器的显示内容。 如图所示，是两个不同内容的属性检查器。文本属性检查器(上)和图像属性检查器(下)、学习和探索以及面板组：面板组可以通过单击“缩小/展开”按钮缩小或展开。 如果操作屏幕上没有显示所需的面板组，则可以使用“窗口”(window )菜单下的命令来显示它。如果不使用面板组，则可以单击面板组和“文档”(document )窗口之间的“隐藏/显示”(hidden

7、/display )按钮来隐藏它。 如图所示显示面板组的构成。面板组配置、学习和探索、Dreamweaver CS3操作环境设置自定义工作空间布局类型： Dreamweaver CS3针对不同行业的用户特征，准备了3种不同的工作空间布局类型。 如图所示，选择【窗口】【工作空间布局】菜单指令，从所显示的子菜单中选择不同的布局类型即可。 工作区布局命令、学习和探索、文档视图之间的切换：无论是Web设计者还是Web程序开发者，经常需要在“设计”视图和“代码”视图之间切换。 为了方便起见，Dreamweaver CS3提供了三个“文档”窗口视图，单击“文档”工具栏上的“文档模式”按钮可切换到如图所示单

8、击“分割”按钮时的效果。 拆分模式下的文档视图、学习和探索、自定义文档显示方法：文档是否最大化。 最大化显示状态允许您使用“文档”窗口顶部的选项卡在多个文档之间切换。在未最大化的显示状态下，多个文档将显示为单独的窗口，如图所示。 单击“文档”窗口右上角的按钮可在文档最大化和非最大化之间切换。未最大化状态的文档窗口、学习和探索、网页制作过程收集资料：制作网页前收集必要的文字和照片等各种资料素材。 创建学校网页需要向学校提供学校介绍、招生对象说明、校园照片等文字资料；创建个人网站需要收集个人简历、兴趣等资料。 修订网站：修订网站主要是为了在阅览者访问网页时不会“迷路”。 根据阅览者的访问顺序，可以

9、将内容设计成树目录。 一般情况下段数不要太多(尽量少于4段)。 不那样做的话会很麻烦，管理会变得不方便。 网页制作：网站通常是链接多个网页的，为了让阅览者能够方便且简单地阅览网站，在制作网页时首先制作网页框架，然后制作导航栏，学习和探索根据客户端请求、站点大小、浏览器类型等，将站点移至模拟调试服务以测试或编辑站点。 发布网站：发布网页之前，您必须在互联网上请求主页空间，以指定网站或主页在互联网上的存储位置。 分发页通常使用FTP (远程文件传输)软件(LeapFTP、CuteFTP、FlashFXP等)上载到服务器申请的网站目录。站点更新和维护：站点上传到服务器后，每隔一段时间更新站点内的页面

10、，保持站点内容的新鲜性，吸引观众，并定期检查页面元素的显示是否正常，各种超链接是否正常等网页中常见的标题和规范一般来说，网页的基本构成部分有Logo、Banner、导航栏、超链接和着作权信息等，如图所示是各构成对象。网页构成对象、学习和探索、logo :网站的“商标”一般包括网站名称、网站、网站标志、网站理念四个部分，也可以设计其中之一。 Logo的位置一般位于网页的左上角，这是一个视觉焦点，能给读者留下深刻的印象。 Logo的大小通常为8831像素。 Banner :一般用作宣传页的内容，也称为广告条，其位置一般在Logo的右侧。 Banner的标准尺寸为46860像素，其设定修正点明确，符

11、合整体设定修正的需要。 Banner通常是为了提高表现力而制作动画的。 导航栏：阅览者阅览网页时有效的指示标志。 导航栏包括框架导航、文本导航、图像导航等，根据导航栏的位置，横向导航栏和纵向导航、学习和探索、按钮：按钮也是超链接，大小和样式超链接：所谓超链接是指页面对象之间的链接关系，是指网站内的页面和对象的链接，或者是指其他网站的链接，通过点击网页内的超链接来对应的页面着作权信息：着作权一些网站也把柜台等内容放在这个区域。 中的组合图层性质变更选项。 网页的配色技巧使用相同的颜色。 选择色调(h )，然后调整饱和度(s )或亮度(b )以生成新颜色。 这个技巧的优点是统一着色页面的颜色，使之

12、有灰度感。 使用对比颜色：首先选择颜色，然后选择对比颜色(在Photoshop中按Ctrl I反转)。 这个技巧的优点是整个页面颜色丰富，对比度强但不鲜艳。 使用同色系的颜色：使用同色系的颜色，如淡蓝色、淡黄色、淡绿色或土黄、土灰、土蓝等。 在Photoshop检色器对话框的右侧决定颜色，然后将滑鼠指标置于h文字方块上，按下键盘上下的游标键来选取颜色。 这个技巧的优点是页面颜色丰富，颜色感觉统一。 任务2创建和管理公司概要站点，任务目标使用Dreamweaver的“站点”菜单创建和管理公司概要站点。 通过练习，熟悉并掌握站点创建、复制、编辑、导出等操作。 具体目标是(1)掌握网站的制作方法。

13、(2)掌握工作站的编辑操作。 (3)熟悉并掌握网站复制和导出操作。 任务2制作管理“公司概要”网站，利用操作构想(1)“网站”菜单制作网站。 (2)从制作的网站复制新网站。 (3)重新编辑新网站。 (4)导出编辑的网站。 创建站点后，(启动Dreamweaver CS3，选择【站点】【新站点】菜单命令。 (2)输入“练习”，单击“下一步”按钮，然后在打开的对话框的“我的站点名称”文本框中输入站点名称，如图所示。 然后设置站点名称并创建站点，在(3)打开的对话框的“您打算使用服务器技术吗”栏中选择“不，不想使用服务器技术”选项，然后单击“下一步”按钮选择服务器技术并创建站点后，(4)在打开的对话

14、框中选择“编辑自己计算机的本地副本，完成后上传到服务器”选项，然后选择“将文件保存在计算机上的哪个位置？ 文本框中键入D:练习，然后单击“下一步”按钮(请参见附图)。 然后在(5)打开的对话框的“如何连接到远程服务器”下拉列表框中选择“无”选项，并单击“下一步”按钮以设置编辑和保存文件的位置并创建站点。 (6)显示在打开的对话框的“摘要”栏中设定的各残奥仪表，确认无误后点击“完成”按钮完成网站的创建(参照图)。设定连接服务器方式，完成站点的创建，操作两个管理站点，(1)选择【站点】【管理站点】菜单命令，在打开的“管理站点”对话框中选择之前创建的“练习”站点，点击“复制”按钮(2)此时如图所示，

15、直接单击“编辑”按钮。复制站点、编辑站点、操作两个管理站点、(3)在打开的对话框中将站点重命名为“公司概述”，然后单击“下一步”按钮(参见图)。 (4)在打开的对话框中保持默认设置，如图所示直接点击“下一步”按钮。重命名站点，选择服务器技术，操作两个管理站点，(5)在打开的对话框中将存储位置设置为“D:公司概述”，然后单击“下一步”按钮(参见附图)。 (6)在打开的对话框中保持默认设置，如图所示直接点击“下一步”按钮。编辑站点的存储位置，设定连接服务器方式，操作两个管理站点，(7)在打开的对话框中确认设定没有错误后，点击“完成”按钮(参照附图)。 (8)转到“管理站点”对话框，选择“公司概要”

16、站点选项，点击“导出”按钮(参照图)。完成站点编辑，导出站点，操作两个管理站点，(9)在打开的“导出站点”对话框的“保存位置”下拉列表框中设置站点的保存路径，在“文件名”下拉列表框中发光点击按钮(10 )如图所示，打开保存站点的文件夹窗口，显示导出的站点文件。导出目标和名称、导出的站点文件、学习和探索、站点导入和删除站点导入：导入或导出站点是为了在多台计算机上实现相同的站点开发，站点导入方法是：【站点】【站点】 在打开的“站点管理”对话框中删除站点：打开“站点管理”对话框，选择要删除的站点选项，然后单击“删除”按钮，可以立即删除和管理浪费的站点。 任务3制作“公司介绍”页面，任务目标通过对页面的各种基本操作制作“公司介绍”页面，完成的最终效果如图所示。 制作并设定页属性后的页效果、任务3制作“公司介绍”页，使用操作构想(Dreamweaver提供的预设格式制作具有布局样式的空白页。 (2)以“公司介绍”的名称保存制作的网页。 (3)关闭保存的页面。 (4)在对话框中打开先前保存的“公司介绍”页面。 (5)在IE浏览器中预览打开的页面。 (6)恰当设定网页的外观属性，完成后保存设定。 然后操作网页的新建和保存(启动Dreamweaver CS3，选择【文件】【新建】菜单命令(参照附图)。(2)打开“新建文档”对话框