Web 应用项目开发

Web 应用项目开发

齐齐哈尔市职业教育中心学校王苏颖


岗位任务

学习目标

相关知识

项目七：旅游类网站

任务规划

任务实施

岗位模拟

齐齐哈尔市职业教育中心学校


岗位任

务


岗位任务描述

　　齐齐哈尔又名鹤城，有闻名中外的扎龙湿地等旅游景点，

我们制作一旅游网站，让更多的人了解齐齐哈尔。根据景区文化、特点，采用多样化的表现形式和元素，创意展现景区特色；结合用户体验，优化站内栏目框架、文字、图片等，增加新浪微博在线互动平台，网站支持在线视频播放功能等。本项目重点学习 DIV 的布局方式及通过 CSS 样式设置 DIV 的属性。


学习目

标


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


相关知

识


一、理解 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 出现为止、大小、颜色以及背景等的变化。


相关知

识


二、层的创建1 、在 Dreamweaver 中插入层的方法有以下两种：将光标插入点定位到需插入层的位置，然后选择【插入 →】【布局对象 →】【层】命令即可。切换到【布局】插入栏，单击【描绘层】按钮，此时光标插入点变为形状，在网页中按住鼠标左键拖动即可绘制一个层。


相关知

识


2 、层面板【层】面板用于对层进行管理和操作，选择【窗口 →】【层】命令或按【 F2 】键即可打开【层】面板，如图所示


相关知

识


3 、层的基本编辑创建的层通常还需对其进行大小调整、移动等操作才能满足网页制作的要求。

1 ）选中层 2 ）拖动层 3 ）对齐层 4 ）调整层的大小5 ）层的内容添加


相关知

识


三、层的属性设置及高级操作 1 、层的具体参数如下：“AP DIV编号”：设置 AP DIV 的名称以及在“ AP DIV” 面板或脚本中标识AP DIV 。“左”和“上”：设置 AP DIV 相对于页面或被嵌入 AP DIV 的左上角的位置。“宽”和“高”：设置 AP DIV 的宽度和高度。“Z轴”：确定 AP DIV 的叠放顺序。编号越高， AP DIV 的位置越上。

层的属性面板


相关知

识


“可见性”：确定 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 的可见部分。


相关知

识


2 、层的显示或隐藏行为面板中的显示或隐藏元素来实现层的显示或隐藏操作。


任务规

划


项目中设计的教学任务

设置 AP DIV 的显示或隐藏

任务一任务二

创建 AP DIV

实训——《 AP DIV 的显示或隐藏》


任务规

划


项目中设计的教学任务

创建嵌套效果实现 AP 元素的定位

任务 3——AP DIV 的嵌套（制作提示效果）


任务实

施


任务１— 2 实施流程

打开之前完成的“超级女生产演唱会”

创建 AP元素，添加图片素材

指定 AP元素的名称

设置行为及触发事件

保存预览


任务实

施


任务 3 实施流程

打开之前完成的“超级女生产演唱会”

定位光标，创建父层，设置属性

创建子层，设置属性，在该层中插入图片素材

设置行为及触发事件

保存预览


岗位模

拟


请课后完成实训指导中的指定实训

旅游类网站制作实验要求：（ 1 ）建立站点目录mysite ，并将站点指定至站点目录。（ 2 ）给制布局表格或 APDIV 。（ 3 ）插入图片及文字完成页面效果。（ 4 ）利用 AP DIV 属性、嵌套等属性完成定位设置。（ 5 ）结合行为完成 AP DIV 的显示或隐藏效果。


岗位模

拟


请课后完成实训指导中的指定实训

实验效果图：

Web 应用项目开发

Documents

Transcript of Web 应用项目开发