1 / 13

任务四 使用代码制作“异国风情”网页

第五单元 制作 “ 家乡山水 ” 网页. 任务四 使用代码制作“异国风情”网页. 任务描述： 使用 HTML 代码编写网页，当单击导航图像中不同文字时，在网页中显示不同的内容。. 任务分析： 网页由上下两部分组成，上半部分添加用于导航的文字图像，下半部分显示文字对应的风景图像。这些风景图像分别放在不同的层中，这些层重叠在相同位置，并且大小相同。通过为上半部分导航图像上的文字添加三个矩形热点、把热点链接到一段 JavaScript 代码，该代码功能为调用 ShowDiv 函数，该函数控制层的显示与隐藏，实现各热点的行为。. 任务四 使用代码制作 “ 异国风情 ” 网页.

crete
Download Presentation

任务四 使用代码制作“异国风情”网页

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. 第五单元 制作“家乡山水”网页 任务四 使用代码制作“异国风情”网页 任务描述：使用HTML代码编写网页，当单击导航图像中不同文字时，在网页中显示不同的内容。 任务分析：网页由上下两部分组成，上半部分添加用于导航的文字图像，下半部分显示文字对应的风景图像。这些风景图像分别放在不同的层中，这些层重叠在相同位置，并且大小相同。通过为上半部分导航图像上的文字添加三个矩形热点、把热点链接到一段JavaScript代码，该代码功能为调用ShowDiv函数，该函数控制层的显示与隐藏，实现各热点的行为。

  2. 任务四 使用代码制作“异国风情”网页 自己动手： 1．准备工作。 在D盘新建一个名为“ygfq”的文件夹，将光盘中本单元素材“html”文件夹中的“htmlimages”文件夹拷贝到新建的文件夹中。在Dreamweaver 8中新建一个网页文件，命名为“ygfq.html”，保存在新建的“ygfg”文件夹中。 将“文档”窗口切换到“代码”视图，<title>标签中的内容以及<body>标签进行如下修改。

  3. 任务四 使用代码制作“异国风情”网页 <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>异国风情</title> </head> <body bgcolor="#3399FF" topmargin="35"><!--topmargin:设置页面的上边矩--> </body> <!--修改网页的标题 -->

  4. 任务四 使用代码制作“异国风情”网页 2.添加导航图片 在<body>……</body>标签之间，添加的代码如下。 <center> <p><img src="htmlimages/top.jpg" width="500" height="30" border="0" /> </center> 浏览效果如下：

  5. 任务四 使用代码制作“异国风情”网页 3.给导航图像添加热点并设置热点的属性 <center> <p><img src="htmlimages/top.jpg" width="500" height="30" border="0" usemap="#Map" /><!-- usemap属性指向热点地图--> <map name="Map" id="Map"><!--设置热点地图名称和id为“Map”--> <area shape="rect" coords="26,3,140,28" href="javascript:ShowDiv(document.all.aa)" /> <area shape="rect" coords="192,4,307,26" href="javascript:ShowDiv(document.all.bb)" /> <area shape="rect" coords="365,4,473,27" href="javascript:ShowDiv(document.all.cc)" /> </map> </p> </center> 热点标签语句格式讲解

  6. 任务四 使用代码制作“异国风情”网页 在</title>和</head>之间插入Javascript代码如下。 <script language="javascript"><!--用来说明脚本代码使用JavaScript语言--> function ShowDiv(Tdiv) <!--ShowDiv(Tdiv)函数完成显示一个层隐藏其他层的功能，该显示层由被单击的热点决定--> { document.all.aa.style.display="none";<!--先将三个层全部设置为不可见--> document.all.bb.style.display="none"; document.all.cc.style.display="none"; Tdiv.style.display="";<!--将函数传递过来要显示的层设置为可见--> } </script>

  7. 任务四 使用代码制作“异国风情”网页 4.添加图像层，完成本任务 在 </map>和</p>标签之间添加代码如下 <div id="aa" style= "position:relative; width:499px; height:241px; z-index:1;"><img src="htmlimages/ou.jpg" width="499" height="374" border="0" /></div> <div id="bb" style="position:relative; width:499px; height:241px; z-index:2; display:none"><img src="htmlimages/ao.jpg" width="499" height="374" border="0" /></div> <div id="cc" style="position:relative; width:499px; height:241px; z-index:3;display:none"><img src="htmlimages/mei.jpg" width="499" height="374" border="0" /></div> 层标签语句格式讲解

  8. 任务四 使用代码制作“异国风情”网页 任务总结： 通过完成本任务学习了使用HTML代码插入图像和层、 为给图像添加热点、为热点添加行为。

  9. 任务四 使用代码制作“异国风情”网页 举一反三： 在Dreamweaver 8的代码视图下分析“异国风情”网页。 1．启发思路： 　　在分析网页时注意以下几点： A.页面属性。 B.层样式的定义。 C.热点的定义。 D.javascript函数的使用。 2．分组完成任务。

  10. 任务四 使用代码制作“异国风情”网页 作业： 1. 创建网页“practice5-12.html”，插入本单元素材“举一反三”文件夹中的图像“practice5-10.jpg”，练习矩形热点的属性设置 2. 使用层代码编写网页“practice5-13.html”, 效果如课本图JYFS5-7所示。所需图像为本单元素材的举一反三文件夹中的“practice5-11.jpg”和“practice5-12.jpg”。

  11. 任务四 使用代码制作“异国风情”网页 3. 利用本单元素材举一反三文件夹中的“practice5-13.jpg”图像，使用代码制作页面“practice5-12.html”，给上面的人物添加圆形热点，为各个热点设置“alt”属性，设置热点的替换文本为卡通人物的名称，效果如课本图JYFS5-8所示。（七个小矮人的名字分别是万事通、害羞鬼、瞌睡虫、喷嚏精、开心果、迷糊鬼和爱生气）。提示：圆形热点属性包括：shape=“circle” cords=“centerx（圆心x轴的坐标），centery（圆心y轴的坐标），radius（圆的半径）“。

  12. 任务四 使用代码制作“异国风情”网页 知识讲解： 1．热点标签语句格式 <area shape="形状" coords="位置" href="链接" alt="替换文本" /> “area”标签用于设置热点。HTML中<area>标签没有结束标志，而且这个元素总是嵌套在<map>标签内。 “shape”属性：用于设置热点的形状。可设置为，rect：表示热点为矩形；circle：圆形；poly：多边形。 “cords”属性：用于设置热点的顶点坐标。 “href”属性：用于添加链接，链接可以是URL，也可以是javascript代码。本例链接的是一段javascript代码，javascript:ShowDiv(document.all.aa)意思是显示aa层（层在下一步骤添加），功能为调用ShowDiv函数，显示相应的层。该函数代码将在下文中添加到<head>和</head>标签中。 “Alt”属性：用于设置当鼠标放到热点上时显示的内容。

  13. 任务四 使用代码制作“异国风情”网页 2．层标签语句格式 <div id="层名称" style="position:relative; width:宽; height:高; z-index:层叠位置; display:none"> “id”属性：用于设置层的名称。 “Style”属性：用于设置层的样式，其中有如下常见属性： “position”值为absolute或relative。当为absolute时，层的位置固定；当为relative时，层位置会随着内容的实际情况进行浮动。 “display”值为block或none。block为默认状态，表示显示；none为隐藏。 “z-index”值用于设置层在Z轴上的位置，即层叠顺序。

More Related