电子商务网页制作-项目223163.pptx

《电子商务网页制作-项目223163.pptx》由会员分享，可在线阅读，更多相关《电子商务网页制作-项目223163.pptx（34页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、DW项目二电子商务网页制作Dreamweaver CS5入门认识Dreamweaver CS5。安装和启动Dreamweaver CS5。了解Dreamweaver CS5的工作界面。会对Dreamweaver CS5的工作区进行设置。项目目标试一试结识Adobe家族新成员Adobe Dreamweaver CS5是一款所见即所得的网页制作软件，它功能强大，简单易学，即使你是初次学习，也能够很快地使用它制作出简单的网页来。试一试结识Adobe家族新成员第一步：双击桌面上的DW图标，运行Dreamweaver CS5软件。第二步：观察Dreamweaver CS5的界面组成。包括菜单栏、起始页、

2、面板组和属性面板等。试一试结识Adobe家族新成员第三步：单击起始页中“新建”栏中的“HTML”选项，新建一个HTML空白文档，在工作区设计视图窗口中输入一段文字。试一试结识Adobe家族新成员第四步：打开“文件”菜单选择“保存”命令，在弹出的“另存为”对话框中选择保存的位置，单击“保存”按钮将文档保存。试一试结识Adobe家族新成员第五步：按F12键，可以在浏览器中预览网页效果。试一试结识Adobe家族新成员第四步：打开“文件”菜单选择“保存”命令，在弹出的“另存为”对话框中选择保存的位置，单击“保存”按钮将文档保存。试一试结识Adobe家族新成员学习一个新的软件首先要对其有一个大致的总体印

3、象，了解它的界面组成和最基本的操作，通过自己动手慢慢去摸索和熟悉，然后才能进一步去深入学习软件的各种功能和操作。Adobe Dreamweaver CS5是Adobe家族的成员，是一款制作网页的专业软件，它功能强大，易于学习，初学者能够很快上手使用它制作出简单的网页来。活动小结初识Dreamweaver CS5Adobe Dreamweaver CS5是一款集网页制作和管理网站于一身的所见即所得网页编辑器，Dreamweaver CS5是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。Dreamweaver原本是由著

4、名的软件公司Macromedia开发的，Macromedia的著名产品还有矢量动画制作软件Flash、网页图像处理软件Fireworks等。2006年全球最大的图像编辑软件供应商Adobe以换股方式收购了Macromedia公司，自此开始，Dreamweaver开始属于ADOBE设计软件系列。2007年Adobe发布了Dreamweaver CS3，2008年发布Dreamweaver CS4，到了2010年，Adobe推出了全新的Dreamweaver CS5。Dreamweaver CS5的安装步骤1：将Dreamweaver CS5的安装光盘放在光驱中，此时会自动进行Dreamweave

5、r CS5的安装程序的始化，并对系统进行检查。Dreamweaver CS5的安装步骤2：如果系统满足安装所需要的条件，就会打开“Adobe Dreamweaver CS5”安装界面，首先是显示的“Adobe软件许可协议”页面。Dreamweaver CS5的安装步骤3：阅读软件许可协议，单击【接受】按钮，进入序列号页面。Dreamweaver CS5的安装步骤4：输入产品序列号，或选择“安装此产品的试用版”，单击“下一步”按钮，进入“安装选项”页面。Dreamweaver CS5的安装步骤5：选择需要安装程序的磁盘并指定安装路径，单击“安装”按钮，进入“安装进度”页面。Dreamweaver

6、 CS5的安装步骤6：安装过程会持续几分钟的时间，然后弹出如图2-10所示的页面，单击【完成】按钮，完成Dreamweaver CS5的安装工作。Dreamweaver CS5的启动Dreamweaver CS5安装完毕后，会自动在“开始”按钮的“程序”菜单中添加启动项，同时也会在桌面上创建Dreamweaver CS5快捷方式图标。单击“程序”菜单中相应的启动项或双击桌面快捷方式，都可以启动Dreamweaver CS5。DreamweaverDreamweaver CS5的启动单击“确定”后，将进入Dreamweaver CS5的起始页。可以勾选下面的“不再显示”来隐藏它。在起始页中可以打

7、开最近使用过的文档或创建新文档，还可以从起始页通过“快速入门”或“资源”来了解Dreamweaver CS5的更多信息。Dreamweaver CS5的退出用以下五种方法都可以退出Dreamweaver CS5：（1）打开“文件”菜单，选择“退出”命令。（2）单击Dreamweaver CS5窗口右上角的“关闭”按钮。（3）双击Dreamweaver CS5窗口左上角的控制按钮。（4）按快捷键+Q。（5）按组合键+F4。在退出Dreamweaver CS5时，窗口中如还有正在编辑的网页，系统会提示你是否保存本次对文件的编辑，你可以根据需要选择“是”、“否”或“取消”。如选择“是”，系统将保存本

8、次编辑并退出Dreamweaver CS5；如选择“否”，系统将不保存本次编辑，文件回到编辑前的状态，并退出Dreamweaver CS5；如选择“取消”，系统将不退出Dreamweaver CS5，继续保持编辑状态。请注意：请注意：Dreamweaver CS5的窗口组成Dreamweaver CS5的窗口界面如图2-13所示。包括：标题栏、菜单栏、插入栏、文档工具栏、文档窗口、状态栏、属性面板和面板组。Dreamweaver CS5的窗口组成1菜单栏菜单栏提供了Dreamweaver CS5的所有功能，一共包含十个菜单。2文档工具栏文档工具栏中显示的是已经打开的各个文档的图标，单位击各图标

9、可以在不同文档间进行切换。3文档窗口文档窗口是网页文档的编辑区，它用于显示当前正在编辑的网页文档。设计者可以在文档区域中进行各种编辑操作。4标签选择器标签选择器用于快速选择网页中的各种标签，在网页布局时非常有用。Dreamweaver CS5的窗口组成5属性检查器网页设计中的每个对象都有自己的属性，比如文字有字体、字号、对齐方式等属性，图像有大小、链接、替换文字等属性。属性检查器的设置项目会根据对象的不同而变化。6状态栏状态栏中显示与正在编辑的文档有关的其他信息。Dreamweaver CS5的窗口组成7面板组为了方便设计者的编辑工作，Dreamweaver CS5组合了各种具备各种功能的面板

10、供设计者选择使用，每个面板组都可以展开或折叠，可以和其他面板组停靠在一起或取消停靠，所以也称为浮动面板。（1）查看面板组打开“窗口”菜单，选择“显示面板”或“隐藏面板”，可以显示或隐藏面板组。也可以单击面板组名称，或者直接按快捷键F4快速隐藏和显示面板组。（2）关闭面板组要关闭某个面板，可以单击该面板标题栏右侧的按钮，在弹出的菜单中选择“关闭标签组”。如果要再打开被关闭的面板组，可以选择“窗口”菜单，然后选择要打开的面板名称即可。Dreamweaver CS5的窗口组成8“文件”面板“文件”面板是很常用的面板，利用它可以管理站点的文件和文件夹。通过“文件”面板还可以访问本地磁盘上的全部文件。了

11、解Dreamweaver CS5的视图管理在Dreamweaver CS5的文档窗口中可以使用三种视图方式查看当前文档。1“设计”视图模式这是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在“设计”视图中，设计者可以“所见即所得”地设计网页。了解Dreamweaver CS5的视图管理“代码”视图模式这是一个用于编写和编辑html、Javascript、服务器语言代码以及任何其他类型代码的手工编码环境。了解Dreamweaver CS5的视图管理3“拆分”视图模式这种视图模式在单个窗口中同时显示同一文档的“代码”视图和“设计”视图。自定义Dreamweaver CS5的工作区

12、一个使用顺手的工作界面能提高工作效率。在Dreamweaver CS5中，你可以根据自己的爱好和需要自定义工作区，使其适合个人的需要。1选择工作区布局在Dreamweaver CS5中，你可以选择“设计器”和“编码器”工作区布局。“设计器”是一个多文档界面的集成工作区，其中全部文档窗口和面板被集成在一个较大的应用程序窗口中，面板组停靠在窗口右侧；“编码器”也是集成的工作区，但是面板组组停靠在窗口左侧，并且文档窗口在默认情况下显示代码视图。打开“窗口”菜单，选择“工作区布局”，可以设置“设计器”和“编码器”工作区布局，也可以单击窗口右上角的工作区切换器来设置工作区布局。了解Dreamweaver

13、 CS5的视图管理在以前版本的Dreamweaver中，菜单栏下面还有一个“插入”栏，“插入”栏中包含了多个按钮，单击这些按钮可以将各种对象（如图像、表格、DIV标签等）插入到页面中。使用插入栏插入对象比使用“插入”菜单更便捷。在Dreamweaver CS5中，我们可以在工作区布局中选择“经典”布局，这样窗口界面中就会出现我们熟悉的“插入”栏了。了解Dreamweaver CS5的视图管理2保存自定义工作区布局Dreamweaver CS5可以保存自定义的工作区设置。打开“窗口”菜单，选择“工作区布局”子菜单中的“新建工作区”命令，可以建立自定义工作区设置；当你需要将工作区还原成原先设置过的

14、状态时，可以通过打开“窗口”菜单，选择“工作区布局”子菜单，或通过工作区切换器，然后选择前面保存过的布局名称来恢复成该工作区布局设置。项目总结我们需要使用专业的软件来制作网页，Dreamweaver CS5就是一款非常流行的专业的网页制作软件，无论你是菜鸟还是网页设计师，都可以使用它来制作出各种各样的网页。本项目引领大家学习Dreamweaver CS5的入门知识和操作。Dreamweaver CS5的工作界面主要由菜单栏、文档工具栏、文档窗口、属性检查器和面板组构。使用者可以通过“设计”视图、“代码”视图、和“拆分”视图三种方式来查看同一文档。Dreamweaver CS5中的面板被组织到面板组中，每个面板组都可以展开或折叠，并且可以和其他面板组放置在一起或取消放置。你可以根据自己的喜好和需要自定义定Dreamweaver CS5的工作区。推荐资源谢谢观赏！谢谢观赏！演讲完毕，谢谢观看！