《设计与制作项目教程项目二 任务.ppt》由会员分享，可在线阅读，更多相关《设计与制作项目教程项目二 任务.ppt（40页珍藏版）》请在金锄头文库上搜索。
1、任务任务1 1：制作简单的图文页面：制作简单的图文页面项目二项目二 创建基本页面创建基本页面Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.1 Dreamweaver软件基本操作2 创建、管理站点3 创建图文页面学习内容Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 A
2、spose Pty Ltd.任务描述任务描述vv知识目标：知识目标：知识目标：知识目标： 通过系统学习使学生能做到基本掌握Dreamweaver 软件的基本用法，掌握创建与管理站点、创建简单图文页面的方法。vv技能目标：技能目标：技能目标：技能目标： 通过讲解辅导与作业练习，要使学生能熟练掌握Dreamweaver的操作方法，简单页面的制作方法，并能灵活应用知识技巧。vv素质目标：素质目标：素质目标：素质目标：1. 具有勤奋学习的态度，严谨求实、创新的工作作风；2. 具有良好的心理素质和职业道德素质；3. 具有高度责任心和良好的团队合作精神；4. 具有一定的科学思维方式和判断分析问题的能力；5
3、. 具有较强的网页设计创意思维、艺术设计素质。Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.任务任务1 1：制作简单的图文页面：制作简单的图文页面v任务描述任务描述1.创建站点，文件及文件夹命名及站点文件目录结构符合规范。2.网页设置标题3.图文混排，与效果图保持一致。Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2
4、.0.0.Copyright 2004-2011 Aspose Pty Ltd.任务分析任务分析v该页面为一该页面为一个简单图文个简单图文页面，其中页面，其中主要内容由主要内容由文字与图片文字与图片组成，以水组成，以水平线分隔。平线分隔。页面路径文字图片水平线网页标题Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.任务实施任务实施v步骤步骤1 准备站点文件与素材准备站点文件与素材v步骤步骤2 创建站点创建站点Eval
5、uation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.v步骤步骤3 创建页面文件创建页面文件标题工作区“设计”视图Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.v步骤步骤4 更改页面标题及输入文字更改页面标题及输入文字Evaluation only.C
6、reated with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.v步骤步骤5 插入图片插入图片Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.v步骤步骤6 设置图片的对齐方式，并插入其他图片设置图片的对齐方式，并插入其他图片Evaluation only.Created with Aspo
7、se.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.v步骤步骤7 插入水平线插入水平线Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.v步骤步骤8 保存并在浏览器中预览效果保存并在浏览器中预览效果Evaluation only.Created with Aspose.Slides for .NET 3.5 C
8、lient Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.知识点知识点一一Dreamweaver CS5 简介简介Adobe Dreamweaver CS5是一款集网页制作和管理网站于一身的所见即所得网页编辑器，Dreamweaver CS5是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。 Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyrig
9、ht 2004-2011 Aspose Pty Ltd.二二Dreamweaver CS5 启动界面启动界面菜单栏工具栏【属性】面板面板组Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.1. 菜单栏菜单栏【菜单栏】包括多种菜单项，单击任意一个菜单项将弹出一个下拉菜单，在下拉菜单中选择不同的菜单项可以完成不同的操作。Evaluation only.Created with Aspose.Slides for .NET
10、3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.v2. 工具栏工具栏【文档】工具栏中包含视图选择按钮，单击该按钮使可以在文档的【代码】、【拆分】和【设计】视图间快速切换。Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.v3. 属性面板属性面板在【属性】面板中，主要用于查看和更改所选择的对象的各种属性。Evaluation only.Creat
11、ed with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.v4. 面板组面板组面板组是一组停靠在某个标题下面的相关面板的集合，面板集中了网页编辑和站点管理过程中集中的按钮。Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.v三三Dreamweaver CS5 工作界面工作界面插入栏设计选项Ev
12、aluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.v1. 插入栏插入栏插入栏中包含【常用】、【布局】、【表单】、【数据】、【Spry】、【文本】、【收藏夹】插入栏。（1）在【常用】插入栏中，可以创建和插入最常用的对象，例如图像和表格。Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-20
13、11 Aspose Pty Ltd.（2）在【布局】插入栏中，包括标准表格和扩展表格两个选项卡。Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.（3）【表单】：在Dreamweaver中，表单输入类型称为表单对象，是动态网页中最重要的元素对象之一。Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyrig
14、ht 2004-2011 Aspose Pty Ltd.（4）在【数据】插入栏中，可以插入各种数据，如Spry数据对象、记录集和插入记录等。Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.（5）在【Spry】插入栏中，包含构建【Spry】页面等按钮，其中包括Spry数据对象和构件等按钮。Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Pro
15、file 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.（6）文本是网页中最常见、运用最广泛的元素之一，是网页内容的核心部分，在网页中添加文本与在Word等文字处理软件中添加文本一样方便。Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.（7）【收藏夹】插入栏中，使用鼠标右键单击，即可自定义收藏夹对象。Evaluation only.Created with Aspose.Sli
16、des for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.v2. 设计视图设计视图设计、代码及拆分三种设计视图。Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.v四使用四使用Dreamweaver CS5 创建站点创建站点1. 使用【管理站点】向导搭建站点2. 使用【高级】面板创建站点Evaluation only.Creat
17、ed with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.v五五. 使用使用Dreamweaver CS5管理站点及站管理站点及站点文件夹点文件夹1. 使用Dreamweaver CS5管理站点（1）打开站点（2）编辑站点（3）删除站点（4）复制站点Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty L
18、td.v2. 管理站点中的文件管理站点中的文件（1）创建文件夹（2）创建网页文件（3）移动和复制文件Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.v六在网页中创建文本六在网页中创建文本1. 在网页中输入文本2. 设置字体格式Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-201
19、1 Aspose Pty Ltd.v七插入特殊文本对象七插入特殊文本对象1. 插入特殊字符2. 插入水平线3. 插入注释4. 插入日期Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.v八项目符号和编号列表八项目符号和编号列表1. 创建项目列表2. 创建编号列表Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.C
20、opyright 2004-2011 Aspose Pty Ltd.v九插入页面的头部内容九插入页面的头部内容1. 设置META2. 插入关键字3. 插入说明4. 插入刷新5. 设置基础6. 设置链接7. 设置标题Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.v十插入与设置图像元素十插入与设置图像元素1. 在网页中插入图像2. 设置图像属性3. 图像的对齐方式4. 插入图像占位符5. 设置图像占位符6. 插入鼠标经
21、过图像Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.分析与思考分析与思考v1.为什么要创建站点？为什么要创建站点？v2.如何在页面中输入空格？如何在页面中输入空格？v3.在插入图像时，弹出【图像标签辅助功能属性】对话框，在插入图像时，弹出【图像标签辅助功能属性】对话框，在其中设置的在其中设置的“替换文本替换文本”有何作用？有何作用？v4.图像对齐方式有哪几种？图像对齐方式有哪几种？v5.插入图像占位符有什么作用？插
22、入图像占位符有什么作用？v6.在【文档】工具栏中的【标题】中输入的标题，显示在在【文档】工具栏中的【标题】中输入的标题，显示在何处？何处？Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.任务小结任务小结v1. 使用【站点】中【新建站点】或者【管理站点】的命令使用【站点】中【新建站点】或者【管理站点】的命令创建站点，在【站点设置对象】对话框中设置【站点名称创建站点，在【站点设置对象】对话框中设置【站点名称】与【本地站点
23、文件夹】。】与【本地站点文件夹】。v2. 使用【文件】菜单或者【本地文件】面板在使用【文件】菜单或者【本地文件】面板在Dreamweaver软件中创建文件、编辑文件和保存文件。软件中创建文件、编辑文件和保存文件。v3. 在页面中输入文字，使用【插入】菜单中的命令插入水在页面中输入文字，使用【插入】菜单中的命令插入水平线和特殊字符。平线和特殊字符。Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.v4. 在页面中使用图片
24、，使用【插入】菜单中的【在页面中使用图片，使用【插入】菜单中的【图像】命令插入图片，选择图片后，使用图像【图像】命令插入图片，选择图片后，使用图像【属性】面板设置图片的格式。属性】面板设置图片的格式。v5. 在【文件】菜单选择【在浏览器中预览】命令在【文件】菜单选择【在浏览器中预览】命令或者【文档】工具栏中选择【在浏览器中预览】或者【文档】工具栏中选择【在浏览器中预览】按钮，可以在浏览器中预览完成的页面。按钮，可以在浏览器中预览完成的页面。Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0
25、.Copyright 2004-2011 Aspose Pty Ltd.巩固练习巩固练习v使用提供的素材，制作如图所示的页面使用提供的素材，制作如图所示的页面v设计要求：设计要求：按要求创建站点，创建放置图片的文件夹与页面文件设置网页标题，书籍名称为标题格式，书籍介绍文字为段落格式，首行空两个字符。Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.
