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

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. 在【文件】菜单选择【在浏览器中预览】命令或者【文档】工具栏中选择【在浏览器中预览】按钮，可以在浏览器中预览完成的页面。 巩固练习 使用提供的素材，制作如图所示的页面 设计要求： 按要求创建站点，创建放置图片的文件夹与页面文件 设置网页标题，书籍名称为标题格式，书籍介绍文字为段落格式，首行空两个字符。 Company Logo 任务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）在【布局】插