单元3创建超级链接与导航栏技术方案.ppt

【3.3　技术提升】 【任务3-6】创建下拉菜单和自动展开菜单 【任务描述】 （1）创建纵向下拉列表菜单。 （2）创建自动展开与收缩菜单。 （3）编写JavaScript代码，实现菜单的展开与收缩功能。 纵向下拉列表菜单和自动展开与收缩菜单的浏览效果如图3-22所示。 图3-22　纵向下拉列表菜单和自动展开与收缩菜单的浏览效果 【任务实施】 1．创建纵向下拉列表菜单。 打开文件夹“3-3”中网页文档0303.html，在该网页中“ul id=droplist_ul”下面输入以下HTML代码。 li id=n0ema href=default.htm 首页/a/em/li li onmouseover=menu_drop(n1,block); onmouseout=menu_drop(n1,none);em a href=#笔记本/a/em ul id=n1 lia href=#笔记本电脑/a/li lia href=#笔记本配件/a/li lia href=#电脑包/a/li /ul /li li onmouseover=menu_drop(n2,block); onmouseout=menu_drop(n2,none);em a href=#数码影音/a/em ul id=n2 lia href=#数码影像/a/li lia href=#MP3/MP4/a/li lia href=#GPS/a/li lia href=#便携移动存储/读卡器/a/li lia href=#时尚小数码/a/li lia href=#相机/摄象机配件/a/li lia href=#录音笔/a/li /ul /li ……!-- 后面更多的代码在此被省略，详见教材配套光盘中对应的网页文档-- 单元3　创建超级链接与导航栏 操作准备 3.1 操作演练 3.2 考核评价 3.4 考核评价 技术提升 3.3 超级链接是网页中基本元素之一，利用它不仅可以进行网页间的相互链接，还可以使网页链接到相关的图像文件、多媒体文件以及下载程序等。 【教学导航】 教学目标 （1）学会创建导航栏 （2）学会创建网页的内部链接和外部链接 （3）学会创建命名锚记和到该命名锚记的链接 （4）学会在图像中设置热点区域，并创建图像热点链接 （5）学会创建电子邮件链接 （6）学会更改链接颜色、设置链接的打开方式、设置空链接 （7）学会测试链接的有效性 （8）学会创建下拉菜单，能实现菜单的自动展开与收缩功能 （9）能正确插入浮动框架iframe，并设置其属性 （10）理解绝对路径和相对路径，熟悉链接的类型 教学方法 任务驱动法、理论实践一体化、讲练结合 课时建议 8课时（包含考核评价） 【3.1　操作准备】 在本地硬盘（例如D盘）中创建一个文件夹“网页设计与制作案例”，将光盘中的“单元3”（包括所有子文件夹以及文件）拷贝到该文件夹中。 使用创建站点向导创建名称为“单元3”的本地站点。 打开文件夹“3-1”中的网页文档0303.html，在该网页的“head”与“/head”之间添加以下代码，链接外部样式文件。 link rel=stylesheet href=css/global.css type=text/css media=screen / link rel=stylesheet href=css/help.css type=text/css media=screen / 【3.2　操作演练】 【任务3-1】创建顶部横向导航栏 【任务描述】 （1）创建顶部横向导航栏。 顶部横向导航栏包括“首页”、“笔记本”、“数码影音”、“电玩产品”、“手机通讯”、 “硬件外设”和“办公设备”等7个组成部分。 （2）设置顶部导航栏各个文本形式的内部链接。 顶部横向导航栏的外观效果如图3-1所示。 图3-1　顶部横向导航栏的外观效果 【任务实施】 1．创建顶部横向导航栏 在网页文档0303.html中“div class=nav”与“/div”之间输入以下HTML代码 ul li首页/li li笔记本/li li数码影音/li li电玩产品/li l