电子商务网页制作-项目2

dw项目二电子商务网页制作dreamweavercs5入门认识dreamweavercs5。安装和启动dreamweavercs5。了解dreamweavercs5的工作界面。会对dreamweavercs5的工作区进行设置。项目目标试一试——结识adobe家族新成员

adobedreamweavercs5是一款所见即所得的网页制作软件，它功能强大，简单易学，即使你是初次学习，也能够很快地使用它制作出简单的网页来。试一试——结识adobe家族新成员第一步：双击桌面上的dw图标，运行dreamweavercs5软件。第二步：观察dreamweavercs5的界面组成。包括菜单栏、起始页、面板组和属性面板等。试一试——结识adobe家族新成员第三步：单击起始页中“新建”栏中的“html”选项，新建一个html空白文档，在工作区设计视图窗口中输入一段文字。试一试——结识adobe家族新成员第四步：打开“文件”菜单选择“保存”命令，在弹出的“另存为”对话框中选择保存的位置，单击“保存”按钮将文档保存。试一试——结识adobe家族新成员第五步：按f12键，可以在浏览器中预览网页效果。试一试——结识adobe家族新成员第四步：打开“文件”菜单选择“保存”命令，在弹出的“另存为”对话框中选择保存的位置，单击“保存”按钮将文档保存。试一试——结识adobe家族新成员学习一个新的软件首先要对其有一个大致的总体印象，了解它的界面组成和最基本的操作，通过自己动手慢慢去摸索和熟悉，然后才能进一步去深入学习软件的各种功能和操作。adobedreamweavercs5是adobe家族的成员，是一款制作网页的专业软件，它功能强大，易于学习，初学者能够很快上手使用它制作出简单的网页来。活动小结初识dreamweavercs5

adobedreamweavercs5是一款集网页制作和管理网站于一身的所见即所得网页编辑器，dreamweavercs5是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。dreamweaver原本是由著名的软件公司macromedia开发的，macromedia的著名产品还有矢量动画制作软件flash、网页图像处理软件fireworks等。2006年全球最大的图像编辑软件供应商adobe以换股方式收购了macromedia公司，自此开始，dreamweaver开始属于adobe设计软件系列。2007年adobe发布了dreamweavercs3，2008年发布dreamweavercs4，到了2010年，adobe推出了全新的dreamweavercs5。dreamweavercs5的安装步骤1：将dreamweavercs5的安装光盘放在光驱中，此时会自动进行dreamweavercs5的安装程序的始化，并对系统进行检查。dreamweavercs5的安装步骤2：如果系统满足安装所需要的条件，就会打开“adobedreamweavercs5”安装界面，首先是显示的“adobe软件许可协议”页面。dreamweavercs5的安装步骤3：阅读软件许可协议，单击【接受】按钮，进入序列号页面。dreamweavercs5的安装步骤4：输入产品序列号，或选择“安装此产品的试用版”，单击“下一步”按钮，进入“安装选项”页面。dreamweavercs5的安装步骤5：选择需要安装程序的磁盘并指定安装路径，单击“安装”按钮，进入“安装进度”页面。dreamweavercs5的安装步骤6：安装过程会持续几分钟的时间，然后弹出如图2-10所示的页面，单击【完成】按钮，完成dreamweavercs5的安装工作。dreamweavercs5的启动dreamweavercs5安装完毕后，会自动在“开始”按钮的“程序”菜单中添加启动项，同时也会在桌面上创建dreamweavercs5快捷方式图标。单击“程序”菜单中相应的启动项或双击桌面快捷方式，都可以启动dreamweavercs5。dreamweaverdreamweavercs5的启动

单击“确定”后，将进入dreamweavercs5的起始页。可以勾选下面的“不再显示”来隐藏它。在起始页中可以打开最近使用过的文档或创建新文档，还可以从起始页通过“快速入门”或“资源”来了解dreamweavercs5的更多信息。dreamweavercs5的退出用以下五种方法都可以退出dreamweavercs5：（1）打开“文件”菜单，选择“退出”命令。（2）单击dreamweavercs5窗口右上角的“关闭”按钮。（3）双击dreamweavercs5窗口左上角的控制按钮。（4）按快捷键<ctrl>+q。（5）按组合键<alt>+f4。在退出dreamweavercs5时，窗口中如还有正在编辑的网页，系统会提示你是否保存本次对文件的编辑，你可以根据需要选择“是”、“否”或“取消”。如选择“是”，系统将保存本次编辑并退出dreamweavercs5；如选择“否”，系统将不保存本次编辑，文件回到编辑前的状态，并退出dreamweavercs5；如选择“取消”，系统将不退出dreamweavercs5，继续保持编辑状态。请注意：dreamweavercs5的窗口组成

dreamweavercs5的窗口界面如图2-13所示。包括：标题栏、菜单栏、插入栏、文档工具栏、文档窗口、状态栏、属性面板和面板组。dreamweavercs5的窗口组成1．菜单栏菜单栏提供了dreamweavercs5的所有功能，一共包含十个菜单。2．文档工具栏文档工具栏中显示的是已经打开的各个文档的图标，单位击各图标可以在不同文档间进行切换。3．文档窗口文档窗口是网页文档的编辑区，它用于显示当前正在编辑的网页文档。设计者可以在文档区域中进行各种编辑操作。4．标签选择器标签选择器用于快速选择网页中的各种标签，在网页布局时非常有用。dreamweavercs5的窗口组成5．属性检查器网页设计中的每个对象都有自己的属性，比如文字有字体、字号、对齐方式等属性，图像有大小、链接、替换文字等属性。属性检查器的设置项目会根据对象的不同而变化。6．状态栏状态栏中显示与正在编辑的文档有关的其他信息。dreamweavercs5的窗口组成7．面板组为了方便设计者的编辑工作，dreamweavercs5组合了各种具备各种功能的面板供设计者选择使用，每个面板组都可以展开或折叠，可以和其他面板组停靠在一起或取消停靠，所以也称为浮动面板。（1）查看面板组打开“窗口”菜单，选择“显示面板”或“隐藏面板”，可以显示或隐藏面板组。也可以单击面板组名称，或者直接按快捷键f4快速隐藏和显示面板组。（2）关闭面板组要关闭某个面板，可以单击该面板标题栏右侧的按钮，在弹出的菜单中选择“关闭标签组”。如果要再打开被关闭的面板组，可以选择“窗口”菜单，然后选择要打开的面板名称即可。dreamweavercs5的窗口组成8．“文件”面板“文件”面板是很常用的面板，利用它可以管理站点的文件和文件夹。通过“文件”面板还可以访问本地磁盘上的全部文件。了解dreamweavercs5的视图管理在dreamweavercs5的文档窗口中可以使用三种视图方式查看当前文档。1．“设计”视图模式

这是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在“设计”视图中，设计者可以“所见即所得”地设计网页。了解dreamweavercs5的视图管理２．“代码”视图模式这是一个用于编写和编辑html、javascript、服务器语言代码以及任何其他类型代码的手工编码环境。了解dreamweavercs5的视图管理3．“拆分”视图模式

这种视图模式在单个窗口中同时显示同一文档的“代码”视图和“设计”视图。自定义dreamweavercs5的工作区一个使用顺手的工作界面能提高工作效率。在dreamweavercs5中，你可以根据自己的爱好和需要自定义工作区，使其适合个人的需要。1．选择工作区布局在dreamweavercs5中，你可以选择“设计器”和“编码器”工作区布局。“设计器”是一个多文档界面的集成工作区，其中全部文档窗口和面板被集成在一个较大的应用程序窗口中，面板组停靠在窗口右侧；“编码器”也是集成的工作区，但是面板组组停靠在窗口左侧，并且文档窗口在默认情况下显示代码视图。打开“窗口”菜单，选择“工作区布局”，可以设置“设计器”和“编码器”工作区布局，也可以单击窗口右上角的工作区切换器来设置工作区布局。了解dreamweavercs5的视图管理在以前版本的dreamweaver中，菜单栏下面还有一个“插入”栏，“插入”栏中包含了多个按钮，单击这些按钮可以将各种对象（如图像、表格、div标签等）插入到页面中。使用插入栏插入对象比使用“插入”菜单更便捷。

在dreamweavercs5中，我们可以在工作区布局中选择“经典”布局，这样窗口界面中就会出现我们熟悉的“插入”栏了。了解dreamweavercs5的视图管理2．保存自定义工作区布局dreamweavercs5可以保存自定义的工作区设置。打开“窗口”菜单，选择“工作区布局”子菜单中的“新建工作区”命令，可以建立自定义工作区设置；当你需要将工作区还原成原先设置过的状态时，可以通过打开“窗口”菜单，选择“工作区布局”子菜单，或通过工作区切换器，然后选择前面保存过的布局名称来恢复成该工作区布局设置。项目总结

我们需要使用专业的软件来制作网页，dreamweavercs5就是一款非常流行的专业的网页制作软件，无论你是菜鸟还是网页设计师，都可以使用它来制作出各种各样的网页。本项目引领大家学