1 / 19

Web 应用项目开发

Web 应用项目开发. 齐齐哈尔市职业教育中心学校 王苏颖. Web 应用项目开发. 项目七：旅游 类网站. 岗位任务. 任务规划. 学习目标. 任务实施. 岗位模拟. 相关知识. 齐齐哈尔市职业教育中心学校. Web 应用项目开发. 岗位任务描述. 岗位任务.

joy-nolan
Download Presentation

Web 应用项目开发

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web应用项目开发 齐齐哈尔市职业教育中心学校 王苏颖

  2. Web应用项目开发 项目七：旅游类网站 岗位任务 任务规划 学习目标 任务实施 岗位模拟 相关知识 齐齐哈尔市职业教育中心学校

  3. Web应用项目开发 岗位任务描述 岗位任务 齐齐哈尔又名鹤城，有闻名中外的扎龙湿地等旅游景点，我们制作一旅游网站，让更多的人了解齐齐哈尔。根据景区文化、特点，采用多样化的表现形式和元素，创意展现景区特色；结合用户体验，优化站内栏目框架、文字、图片等，增加新浪微博在线互动平台，网站支持在线视频播放功能等。本项目重点学习DIV的布局方式及通过CSS样式设置DIV的属性。 齐齐哈尔市职业教育中心学校

  4. Web应用项目开发 学习目标 目标1：通过欣赏旅游网类站，锻炼学生案例创意的能力； 目标2：培养学生自主学习的能力，解决问题时具有团队精神和合作意识； 目标3：通过本项目的学习使学生掌握网站中使用AP DIV布局页面方法； 目标4：掌握AP DIV定位的设置方法； 目标5：掌握iframe标签的使用。 齐齐哈尔市职业教育中心学校

  5. Web应用项目开发 一、理解DHTML和AP DIV对象的概念 DHTML的全称为 Dynamic HTML，即常说的动态HTML。DHTML并不是一种语言，而仅仅是一个概念。它是通过各种技术的综合发展而得以实现的概念，这些技术包括Javascript，VBScript，DOM（Document Object Model，文件目标模块），Layers（AP DIV）和CSS等。使用DHTML可以加强网页的交互性，使网页的界面变得更丰富多彩。 在普通网页中，所有对象都是静止的、固定不动的，只有AP DIV是可以随意移动的。如果将文本、表格、图像和动画等这些无法移动的元素放入AP DIV中，那么它们也将变成可以移动的对象。通过脚本或函数可以使网页中的AP DIV出现为止、大小、颜色以及背景等的变化。 相关知识 齐齐哈尔市职业教育中心学校

  6. Web应用项目开发 二、层的创建 1、在Dreamweaver 中插入层的方法有以下两种： 将光标插入点定位到需插入层的位置，然后选择【插入】→【布局对象】→【层】命令即可。 切换到【布局】插入栏，单击【描绘层】按钮，此时光标插入点变为形状，在网页中按住鼠标左键拖动即可绘制一个层。 相关知识 齐齐哈尔市职业教育中心学校

  7. Web应用项目开发 2、层面板 【层】面板用于对层进行管理和操作，选择【窗口】→【层】命令或按【F2】键即可打开【层】面板，如图所示 相关知识 齐齐哈尔市职业教育中心学校

  8. Web应用项目开发 3、层的基本编辑 创建的层通常还需对其进行大小调整、移动等操作才能满足网页制作的要求。 1）选中层 2）拖动层 3）对齐层 4）调整层的大小 5）层的内容添加 相关知识 齐齐哈尔市职业教育中心学校

  9. Web应用项目开发 三、层的属性设置及高级操作 1、层的具体参数如下： “AP DIV编号”：设置AP DIV的名称以及在“AP DIV”面板或脚本中标识AP DIV。 “左”和“上”：设置AP DIV相对于页面或被嵌入AP DIV的左上角的位置。 “宽”和“高”：设置AP DIV的宽度和高度。 “Z轴”：确定AP DIV的叠放顺序。编号越高，AP DIV的位置越上。 相关知识 层的属性面板 齐齐哈尔市职业教育中心学校

  10. Web应用项目开发 “可见性”：确定AP DIV的初始显示状态。其中Default（默认）为不指定可见性属性；Inherit（继承）为使用被嵌入AP DIV的可见性属性；Visible（可见）为显示AP DIV的内容；Hidden（隐藏）为隐藏AP DIV的内容。 “背景图像”：设置AP DIV的背景图像。 “背景颜色”：设置AP DIV的背景颜色。 “溢出”：本选项只适用于CSSAP DIV。当AP DIV的内容超出其大小时的处理方式。其选项包括：Visible（可见）为扩展AP DIV的大小使其所有内容均可见；Hidden（隐藏）为保持AP DIV的大小，剪切其超出部分；Scroll（滚动）为不论内容是否超出AP DIV的大小均为AP DIV题添加滚动条；Auto（自动）为当内容超出AP DIV的边界时出现滚动条。 “剪辑”：定义AP DIV的可见部分。 相关知识 齐齐哈尔市职业教育中心学校

  11. Web应用项目开发 2、层的显示或隐藏 行为面板中的显示或隐藏元素来实现层的显示或隐藏操作。 相关知识 齐齐哈尔市职业教育中心学校

  12. Web应用项目开发 项目中设计的教学任务 任务规划 实训——《AP DIV的显示或隐藏》 任务一 任务二 创建 AP DIV 设置AP DIV的显示或隐藏 齐齐哈尔市职业教育中心学校

  13. Web应用项目开发 项目中设计的教学任务 任务规划 任务3——AP DIV的嵌套（制作提示效果 ） 创建嵌套效果实现AP元素的定位 齐齐哈尔市职业教育中心学校

  14. 打开之前完成的“超级女生产演唱会” 创建AP元素，添加图片素材 指定AP元素的名称 设置行为及触发事件 保存预览 Web应用项目开发 任务１—2实施流程 任务实施 齐齐哈尔市职业教育中心学校

  15. 打开之前完成的“超级女生产演唱会” 定位光标，创建父层，设置属性 创建子层，设置属性，在该层中插入图片素材 设置行为及触发事件 保存预览 Web应用项目开发 任务3实施流程 任务实施 齐齐哈尔市职业教育中心学校

  16. Web应用项目开发 请课后完成实训指导中的指定实训 岗位模拟 • 旅游类网站制作实验要求： • （1）建立站点目录mysite，并将站点指定至站点目录。 • （2）给制布局表格或APDIV。 • （3）插入图片及文字完成页面效果。 • （4）利用AP DIV属性、嵌套等属性完成定位设置。 • （5）结合行为完成AP DIV的显示或隐藏效果。 齐齐哈尔市职业教育中心学校

  17. Web应用项目开发 请课后完成实训指导中的指定实训 • 实验效果图： 岗位模拟 齐齐哈尔市职业教育中心学校

  18. Web应用项目开发 请课后完成实训指导中的指定实训 • 实验效果图： 岗位模拟 齐齐哈尔市职业教育中心学校

  19. Web应用项目开发 请课后完成实训指导中的指定实训 • 实验效果图： 岗位模拟 齐齐哈尔市职业教育中心学校

More Related