DW网页设计教学―单元3创建超级链接与导航栏教程

单元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”之间添加以下代码，链接外部样式文件。linkrel=stylesheethref=css/global.csstype=text/cssmedia=screen/linkrel=stylesheethref=css/help.csstype=text/cssmedia=screen/【3.2操作演练】【任务3-1】创建顶部横向导航栏【任务描述】（1）创建顶部横向导航栏。顶部横向导航栏包括“首页”、“笔记本”、“数码影音”、“电玩产品”、“手机通讯”、“硬件外设”和“办公设备”等7个组成部分。（2）设置顶部导航栏各个文本形式的内部链接。顶部横向导航栏的外观效果如图3-1所示。图3-1顶部横向导航栏的外观效果【任务实施】1．创建顶部横向导航栏在网页文档0303.html中“divclass=nav”与“/div”之间输入以下HTML代码ulli首页/lili笔记本/lili数码影音/lili电玩产品/lili手机通讯/lili硬件外设/lili办公设备/li/ul2．创建文本形式的内部链接（1）使用【指向文件】按钮创建超链接（2）使用【属性】面板定义超链接（3）使用菜单命令和对话框定义超链接（4）创建空地址链接按照同样的方法为网页文档0303.html中顶部导航文字“手机通讯”、“硬件外设”、“办公设备”创建空地址链接。3．查看顶部横向导航栏的HTML代码切换到网页文档0303.html的【代码】视图，顶部横向导航栏的HTML代码如下所示。divclass=navulliahref=page/default.html首页/a/liliahref='page/goods03.html'title=笔记本电脑target=_blank笔记本/a/liliahref=page/goods02.htmltitle=数码影音产品target=_blank数码影音/a/liliahref='#'电玩产品/a/liliahref='#'手机通讯/a/liliahref='#'硬件外设/a/liliahref='#'办公设备/a/li/ul/div4．保存网页与浏览网页效果保存网页0303.html，然后按快捷键F12浏览该网页，顶部横向导航栏的浏览效果如图3-1所示。【任务3-2】创建底部横向友情链接导航栏【任务描述】（1）创建底部横向友情链接导航栏。底部横向友情链接导航栏包括“淘宝网”、“当当网”、“京东商城”、“1号店”、“好买网”、“一比二购”、“太平洋电脑网”、“金蛋商城”、“绿森数码”、“乐购网”、“一瞬数码”、“品牌家电网”、“QQ商城”、“苏宁易购”等14个超链接。（2）设置底部横向友情链接导航栏各个文本形式的外部链接。底部横向友情链接导航栏的外观效果如图3-8所示。图3-8底部横向友情链接导航栏的外观效果【任务实施】1．创建底部横向友情链接导航栏。2．创建文本形式的外部链接。3．查看底部横向友情链接导航栏的HTML代码。4．保存网页与浏览网页效果。保存网页0303.html，然后按快捷键F12，底部横向友情链接导航栏的浏览效果如图3-8所示。【任务3-3】创建左侧帮助导航栏【任务描述】（1）创建左侧帮助导航栏。左侧帮助导航栏主要包括“新手指南”、“配送方式”、“支付方式”和“售后服务”等4个组成部分，每个部分又细分为多个选项。（2）设置左侧帮助导航栏各个文本形式的超链接。左侧帮助导航栏的外观效果如图3-10所示。图3-10左侧帮助导航栏的外观效果【任务实施】1．创建左侧帮助导航栏2．创建文本形式的超链接（1）使用【指向文件】按钮创建超链接（2）使用【属性】面板定义超链接（3）使用菜单命令和对话框定义超链接使用类似方法创建其他15个超链接。3．查看左侧帮助导航栏的HTML代码4．保存网页与浏览网页效果保存网页0303.html，然后按快捷键F12，左侧帮助导航栏的浏览效果如图3-10所示。【任务3-4】创建底部帮助导航栏【任务描述】（1）创建包括底部帮助导航栏的网页0302help.html。在站点文件夹“page”中创建包括底部帮助导航栏的网页0302help.html，横向排列的底部帮助导航栏主要包括“新手指南”、“配送方式”、“支付方式”、“售后服务”和“帮助信息”等5个组成部分，每个部分纵向又细分为多个选项。（2）设置底部帮助导航栏各个文本形式的超链接。底部帮助导航栏的外观效果如图3-11所示。（3）在网页文档0302.html中，应用浮动框架iframe/iframe嵌入网页0302help.html。图3-11底部帮助导航栏的外观效果【任务实施】1．创建包括底部帮助导航栏的网页0302help.html2．创建文本形式的超链接3．保存网页与浏览网页效果保存网页0302help.html，然后按快捷键F12，底部帮助导航栏的浏览效果如图3-11所示。4．利用浮动框架在网页0302.html中嵌入网页0302help.html。打开文件夹“3-1”中网页文档0302.html，在该网页中“divclass=w”与“/div”之间输入以下HTML代码，嵌入网页0302help.html。iframesrc=page/0302help.htmlname=scrollimgwidth=100%marginwidth=0height=185marginheight=0align=middlescrolling=noframeborder=0id=pagehelpallowtransparency=trueapplication=true用户帮助/iframe【任务3-5】创建多种形式的超级链接【任务描述】在网页0302.html中创建以下多种形式的超链接：（1）创建图片形式的超链接（2）创建电子邮件链接（3）创建锚点链接（4）创建图像热点链接（5）检查链接的有效性和正确性网页0302.html的浏览效果如图3-12所示。图3-12网页0302.html的浏览效果【任务实施】1．创建图片形式的内部链接2．创建电子邮件链接3．创建锚点链接（1）插入一个命名锚记（2）创建锚点链接4．创建图像热点链接（1）选中绘制热点区域的图像（2）绘制矩形热点区域5．为“设为首页”和“收藏易购”设置链接打开网页文档0302.html，切换到“代码”视图，文字“设为首页”对应的HTML代码如下所示。aonclick=this.style.behavior='url(#default#homepage)';this.setHomePage(');href=javascript:;设为首页/a文字“收藏易购”对应的HTML代码如下所示。aonclick=window.external.AddFavorite('易购网');returnfalsehref=javascript:;收藏易购/a6．检查链接7．保存网页与浏览网页效果保存网页0302.html，然后按快捷键F12浏览其效果，如图3-12所示，单击各个链接，观察其链接效果是否正确。【3.3技术提升】【任务3-6】创建下拉菜单和自动展开菜单【任务描述】（1）创建纵向下拉列表菜单。（2）创建自动展开与收缩菜单。（3）编写JavaScript代码，实现菜单的展开与收缩功能。纵向下拉列表菜单和自动展开与收缩菜单的浏览效果如图3-22所示。图3-22纵向下拉列表菜单和自动展开与收缩菜单的浏览效果【任务实施】1．创建纵向下拉列表菜单。打开文件夹“3-3”中网页文档0303.html，在该网页中“ulid=droplist_ul”下面输入以下HTML代码。liid=n0emahref=default.htm首页/a/em/lilionmouseover=menu_drop('n1','block');onmouseout=menu_drop('n1','none');emahref='#'笔记本/a/emulid=n1liahref=#笔记本电脑/a/liliahref=#笔记本配件/a/liliahref=#电脑包/a/li/ul/lilionmouseover=menu_drop('n2','block');onmouseout=menu_drop('n2','none');emahref='#'数码影音/a/emulid=n2liahref=#数码影像/a/liliahref=#MP3/MP4/a/liliahref=#GPS/a/liliahref=#便携移动存储/读卡器/a/liliahref=#时尚小数码/a/liliahref=#相机/摄象机配件/a/liliahref=#录音笔/a/li/ul/li……!--后面更多的代码在此被省略，详见教材配套光盘中对应的网页文档--2．创建自动展开与收缩菜单。在网页文档0303.html中纵向下拉列表菜单的HTML代码之后输入以下HTML代码。divid=login-boxdivid=quick-navonmouseover=menu_drop('menu','block');onmouseout=menu_drop('menu','none');aclass=quick-ahref=#onfocus=menu_drop('menu','block');快速导航/adivid=menudivid=menu-titaid=menu-close“href=javascript:void(0);onclick=menu_drop('menu','none');title=关闭X/a/divdivid=menu-incdlid=menu-col-1dt产品/dtddahref=#手机/a|ahref=#MP3/MP4/a|ahref=#MID/a|ahref=#EBook/a/ddddahref=#最新活动/a|ahref=#新品信息/a|ahref=#产品论坛/a/dd/dldlid=menu-col-