网页设计与制作项目教程项目二任务.ppt

《网页设计与制作项目教程项目二任务.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作项目教程项目二任务.ppt（40页珍藏版）》请在三一办公上搜索。

1、任务1：制作简单的图文页面,项目二 创建基本页面,1 Dreamweaver软件基本操作,2 创建、管理站点,3 创建图文页面,学习内容,任务描述,知识目标：通过系统学习使学生能做到基本掌握Dreamweaver 软件的基本用法，掌握创建与管理站点、创建简单图文页面的方法。技能目标：通过讲解辅导与作业练习，要使学生能熟练掌握Dreamweaver的操作方法，简单页面的制作方法，并能灵活应用知识技巧。素质目标：1.具有勤奋学习的态度，严谨求实、创新的工作作风；2.具有良好的心理素质和职业道德素质；3.具有高度责任心和良好的团队合作精神；4.具有一定的科学思维方式和判断分析问题的能力；5.具有较强

2、的网页设计创意思维、艺术设计素质。,任务1：制作简单的图文页面,任务描述创建站点，文件及文件夹命名及站点文件目录结构符合规范。网页设置标题图文混排，与效果图保持一致。,任务分析,该页面为一个简单图文页面，其中主要内容由文字与图片组成，以水平线分隔。,任务实施,步骤1 准备站点文件与素材步骤2 创建站点,步骤3 创建页面文件,步骤4 更改页面标题及输入文字,步骤5 插入图片,步骤6 设置图片的对齐方式，并插入其他图片,步骤7 插入水平线,步骤8 保存并在浏览器中预览效果,知识点,一Dreamweaver CS5 简介Adobe Dreamweaver CS5是一款集网页制作和管理网站于一身的所见

3、即所得网页编辑器，Dreamweaver CS5是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。,二Dreamweaver CS5 启动界面,1.菜单栏【菜单栏】包括多种菜单项，单击任意一个菜单项将弹出一个下拉菜单，在下拉菜单中选择不同的菜单项可以完成不同的操作。,2.工具栏【文档】工具栏中包含视图选择按钮，单击该按钮使可以在文档的【代码】、【拆分】和【设计】视图间快速切换。,3.属性面板在【属性】面板中，主要用于查看和更改所选择的对象的各种属性。,4.面板组面板组是一组停靠在某个标题下面的相关面板的集合，面板集中

4、了网页编辑和站点管理过程中集中的按钮。,三Dreamweaver CS5 工作界面,1.插入栏插入栏中包含【常用】、【布局】、【表单】、【数据】、【Spry】、【文本】、【收藏夹】插入栏。（1）在【常用】插入栏中，可以创建和插入最常用的对象，例如图像和表格。,（2）在【布局】插入栏中，包括标准表格和扩展表格两个选项卡。,（3）【表单】：在Dreamweaver中，表单输入类型称为表单对象，是动态网页中最重要的元素对象之一。,（4）在【数据】插入栏中，可以插入各种数据，如Spry数据对象、记录集和插入记录等。,（5）在【Spry】插入栏中，包含构建【Spry】页面等按钮，其中包括Spry数据对象

5、和构件等按钮。,（6）文本是网页中最常见、运用最广泛的元素之一，是网页内容的核心部分，在网页中添加文本与在Word等文字处理软件中添加文本一样方便。,（7）【收藏夹】插入栏中，使用鼠标右键单击，即可自定义收藏夹对象。,2.设计视图设计、代码及拆分三种设计视图。,四使用Dreamweaver CS5 创建站点1.使用【管理站点】向导搭建站点2.使用【高级】面板创建站点,五.使用Dreamweaver CS5管理站点及站点文件夹1.使用Dreamweaver CS5管理站点（1）打开站点（2）编辑站点（3）删除站点（4）复制站点,2.管理站点中的文件（1）创建文件夹（2）创建网页文件（3）移动和复

6、制文件,六在网页中创建文本1.在网页中输入文本2.设置字体格式,七插入特殊文本对象1.插入特殊字符2.插入水平线3.插入注释4.插入日期,八项目符号和编号列表1.创建项目列表2.创建编号列表,九插入页面的头部内容1.设置META2.插入关键字3.插入说明4.插入刷新5.设置基础6.设置链接7.设置标题,十插入与设置图像元素1.在网页中插入图像2.设置图像属性3.图像的对齐方式4.插入图像占位符5.设置图像占位符6.插入鼠标经过图像,分析与思考,1.为什么要创建站点？2.如何在页面中输入空格？3.在插入图像时，弹出【图像标签辅助功能属性】对话框，在其中设置的“替换文本”有何作用？4.图像对齐方式

7、有哪几种？5.插入图像占位符有什么作用？6.在【文档】工具栏中的【标题】中输入的标题，显示在何处？,任务小结,1.使用【站点】中【新建站点】或者【管理站点】的命令创建站点，在【站点设置对象】对话框中设置【站点名称】与【本地站点文件夹】。2.使用【文件】菜单或者【本地文件】面板在Dreamweaver软件中创建文件、编辑文件和保存文件。3.在页面中输入文字，使用【插入】菜单中的命令插入水平线和特殊字符。,4.在页面中使用图片，使用【插入】菜单中的【图像】命令插入图片，选择图片后，使用图像【属性】面板设置图片的格式。5.在【文件】菜单选择【在浏览器中预览】命令或者【文档】工具栏中选择【在浏览器中预览】按钮，可以在浏览器中预览完成的页面。,巩固练习,使用提供的素材，制作如图所示的页面设计要求：按要求创建站点，创建放置图片的文件夹与页面文件设置网页标题，书籍名称为标题格式，书籍介绍文字为段落格式，首行空两个字符。,Thank You!,