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

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