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

上传人:max****ui 文档编号:2513452 上传时间:2019-11-27 格式:PPT 页数:40 大小:2.69MB
返回 下载 相关 举报
网页设计与制作项目教程(项目二-任务).ppt_第1页
第1页 / 共40页
网页设计与制作项目教程(项目二-任务).ppt_第2页
第2页 / 共40页
网页设计与制作项目教程(项目二-任务).ppt_第3页
第3页 / 共40页
点击查看更多>>
资源描述
任务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中,表单输入类型称为表单对象,是动态网页中最重要的元素对象之一。,(4)在【数据】插入栏中,可以插入各种数据,如Spry数据对象、记录集和插入记录等。,(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. 在【文件】菜单选择【在浏览器中预览】命令或者【文档】工具栏中选择【在浏览器中预览】按钮,可以在浏览器中预览完成的页面。,巩固练习,使用提供的素材,制作如图所示的页面 设计要求: 按要求创建站点,创建放置图片的文件夹与页面文件 设置网页标题,书籍名称为标题格式,书籍介绍文字为段落格式,首行空两个字符。,Thank You !,
展开阅读全文
相关资源
正为您匹配相似的精品文档
相关搜索

最新文档


当前位置:首页 > 图纸专区 > 课件教案


copyright@ 2023-2025  zhuangpeitu.com 装配图网版权所有   联系电话:18123376007

备案号:ICP2024067431-1 川公网安备51140202000466号


本站为文档C2C交易模式,即用户上传的文档直接被用户下载,本站只是中间服务平台,本站所有文档下载所得的收益归上传人(含作者)所有。装配图网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。若文档所含内容侵犯了您的版权或隐私,请立即通知装配图网,我们立即给予删除!