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

任务1：制作简单的图文页面,项目二 创建基本页面,1 Dreamweaver软件基本操作,2 创建、管理站点,3 创建图文页面,学习内容,任务描述,知识目标： 通过系统学习使学生能做到基本掌握Dreamweaver 软件的基本用法，掌握创建与管理站点、创建简单图文页面的方法。 技能目标： 通过讲解辅导与作业练习，要使学生能熟练掌握Dreamweaver的操作方法，简单页面的制作方法，并能灵活应用知识技巧。 素质目标： 1. 具有勤奋学习的态度，严谨求实、创新的工作作风； 2. 具有良好的心理素质和职业道德素质； 3. 具有高度责任心和良好的团队合作精神； 4. 具有一定的科学思维方式和判断分析问题的能力； 5. 具有较强的网页设计创意思维、艺术设计素质。,任务1：制作简单的图文页面,任务描述 创建站点，文件及文件夹命名及站点文件目录结构符合规范。 网页设置标题 图文混排，与效果图保持一致。,任务分析,该页面为一个简单图文页面，其中主要内容由文字与图片组成，以水平线分隔。,任务实施,步骤1 准备站点文件与素材 步骤2 创建站点,步骤3 创建页面文件,步骤4 更改页面标题及输入文字,步骤5 插入图片,步骤6 设置图片的对齐方式，并插入其他图片,步骤7 插入水平线,步骤8 保存并在浏览器中预览效果,知识点,一Dreamweaver CS5 简介 Adobe Dreamweaver CS5是一款集网页制作和管理网站于一身的所见即所得网页编辑器，Dreamweaver CS5是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。,二Dreamweaver CS5 启动界面,1. 菜单栏 【菜单栏】包括多种菜单项，单击任意一个菜单项将弹出一个下拉菜单，在下拉菜单中选择不同的菜单项可以完成不同的操作。,2. 工具栏 【文档】工具栏中包含视图选择按钮，单击该按钮使可以在文档的【代码】、【拆分】和【设计】视图间快速切换。,3. 属性面板 在【属性】面板中，主要用于查看和更改所选择的对象的各种属性。,4. 面板组 面板组是一组停靠在某个标题下面的相关面板的集合，面板集中了网页编辑和站点管理过程中集中的按钮。,三Dreamweaver CS5 工作界面,1. 插入栏 插入栏中包含【常用】、【布局】、【表单】、【数据】、【Spry】、【文本】、【收藏夹】插入栏。 （1）在【常用】插入栏中，可以创建和插入最常用的对象，例如图像和表格。,（2）在【布局】插入栏中，包括标准表格和扩展表格两个选项卡。,（3）【表单】：在Dreamweaver中，表单输入类型称为表单对象，是动态网页中最重要的元素对象之一。,（5）在【Spry】插入栏中，包含构建【Spry】页面等按钮，其中包括Spry数据对象和构件等按钮。,（6）文本是网页中最常见、运用最广泛的元素之一，是网页内容的核心部分，在网页中添加文本与在Word等文字处理软件中添加文本一样方便。,（7）【收藏夹】插入栏中，使用鼠标右键单击，即可自定义收藏夹对象。,2. 设计视图 设计、代码及拆分三种设计视图。,四使用Dreamweaver CS5 创建站点 1. 使用【管理站点】向导搭建站点 2. 使用【高级】面板创建站点,五. 使用Dreamweaver CS5管理站点及站点文件夹 1. 使用Dreamweaver CS5管理站点 （1）打开站点 （2）编辑站点 （3）删除站点 （4）复制站点,2. 管理站点中的文件 （1）创建文件夹 （2）创建网页文件 （3）移动和复制文件,六在网页中创建文本 1. 在网页中输入文本 2. 设置字体格式,七插入特殊文本对象 1. 插入特殊字符 2. 插入水平线 3. 插入注释 4. 插入日期,八项目符号和编号列表 1. 创建项目列表 2. 创建编号列表,九插入页面的头部内容 1. 设置META 2. 插入关键字 3. 插入说明 4. 插入刷新 5. 设置基础 6. 设置链接 7. 设置标题,十插入与设置图像元素 1. 在网页中插入图像 2. 设置图像属性 3. 图像的对齐方式 4. 插入图像占位符 5. 设置图像占位符 6. 插入鼠标经过图像,分析与思考,1.为什么要创建站点？ 2.如何在页面中输入空格？ 3.在插入图像时，弹出【图像标签辅助功能属性】对话框，在其中设置的“替换文本”有何作用？ 4.图像对齐方式有哪几种？ 5.插入图像占位符有什么作用？ 6.在【文档】工具栏中的【标题】中输入的标题，显示在何处？,任务小结,1. 使用【站点】中【新建站点】或者【管理站点】的命令创建站点，在【站点设置对象】对话框中设置【站点名称】与【本地站点文件夹】。 2. 使用【文件】菜单或者【本地文件】面板在Dreamweaver软件中创建文件、编辑文件和保存文件。 3. 在页面中输入文字，使用【插入】菜单中的命令插入水平线和特殊字符。,4. 在页面中使用图片，使用【插入】菜单中的【图像】命令插入图片，选择图片后，使用图像【属性】面板设置图片的格式。 5. 在【文件】菜单选择【在浏览器中预览】命令或者【文档】工具栏中选择【在浏览器中预览】按钮，可以在浏览