




版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
1、操作准备操作准备3.1操作演练操作演练3.2考核评价考核评价3.4考核评价考核评价技术提升技术提升3.3 超级链接是网页中基本元素之一,利用它不仅超级链接是网页中基本元素之一,利用它不仅可以进行网页间的相互链接,还可以使网页链接到可以进行网页间的相互链接,还可以使网页链接到相关的图像文件、多媒体文件以及下载程序等。相关的图像文件、多媒体文件以及下载程序等。教学目标教学目标(1 1)学会创建导航栏)学会创建导航栏(2 2)学会创建网页的内部链接和外部链接)学会创建网页的内部链接和外部链接(3 3)学会创建命名锚记和到该命名锚记的链接)学会创建命名锚记和到该命名锚记的链接(4 4)学会在图像中设置
2、热点区域,并创建图像热点链接)学会在图像中设置热点区域,并创建图像热点链接(5 5)学会创建电子邮件链接)学会创建电子邮件链接(6 6)学会更改链接颜色、设置链接的打开方式、设置空链接)学会更改链接颜色、设置链接的打开方式、设置空链接(7 7)学会测试链接的有效性)学会测试链接的有效性(8 8)学会创建下拉菜单,能实现菜单的自动展开与收缩功能)学会创建下拉菜单,能实现菜单的自动展开与收缩功能(9 9)能正确插入浮动框架)能正确插入浮动框架iframeiframe,并设置其属性,并设置其属性(1010)理解绝对路径和相对路径,熟悉链接的类型)理解绝对路径和相对路径,熟悉链接的类型教学方法教学方法
3、任务驱动法、理论实践一体化、讲练结合任务驱动法、理论实践一体化、讲练结合课时建议课时建议8 8课时(包含考核评价)课时(包含考核评价) 在本地硬盘(例如在本地硬盘(例如D盘)中创建一个文件夹盘)中创建一个文件夹“网页设计与制作案例网页设计与制作案例”,将光盘中的,将光盘中的“单元单元3”(包括所有子文件夹以及文件)拷贝到该文件夹中。(包括所有子文件夹以及文件)拷贝到该文件夹中。 使用创建站点向导创建名称为使用创建站点向导创建名称为“单元单元3”的本地的本地站点。站点。 打开文件夹打开文件夹“3-1”中的网页文档中的网页文档0303.html,在该网页的在该网页的“”与与“”之间添加以下之间添加
4、以下代码,链接外部样式文件。代码,链接外部样式文件。【任务任务3-1】创建顶部横向导航栏创建顶部横向导航栏【任务描述任务描述】 (1)创建顶部横向导航栏。)创建顶部横向导航栏。 顶部横向导航栏包括顶部横向导航栏包括“首页首页”、“笔记本笔记本”、“数数码影音码影音”、“电玩产品电玩产品”、“手机通讯手机通讯”、 “硬件外设硬件外设”和和“办公设备办公设备”等等7个组成部分。个组成部分。 (2)设置顶部导航栏各个文本形式的内部链接。)设置顶部导航栏各个文本形式的内部链接。 顶部横向导航栏的外观效果如图顶部横向导航栏的外观效果如图3-1所示。所示。图图3-13-1顶部横向导航栏的外观效果顶部横向导
5、航栏的外观效果【任务实施任务实施】l1创建顶部横向导航栏创建顶部横向导航栏 在网页文档在网页文档0303.html中中“”与与“”之间输入以下之间输入以下HTML代码代码 首页首页 笔记本笔记本 数码影音数码影音 电玩产品电玩产品 手机通讯手机通讯 硬件外设硬件外设 办公设备办公设备(1)使用)使用【指向文件指向文件】按钮创建超链接按钮创建超链接(2)使用)使用【属性属性】面板定义超链接面板定义超链接(3)使用菜单命令和对话框定义超链接)使用菜单命令和对话框定义超链接(4)创建空地址链接)创建空地址链接 按照同样的方法为网页文档按照同样的方法为网页文档0303.html中顶部导航文字中顶部导航
6、文字“手机通讯手机通讯”、“硬件外设硬件外设”、“办公设备办公设备”创建空地址创建空地址链接。链接。 切换到网页文档切换到网页文档0303.html的的【代码代码】视图,顶视图,顶部横向导航栏的部横向导航栏的HTML代码如下所示。代码如下所示。 首页首页 笔记本笔记本 数码影音数码影音电玩产品电玩产品 手机通讯手机通讯 硬件外设硬件外设 办公设备办公设备 保存网页保存网页0303.html,然后按快捷键,然后按快捷键F12浏览该浏览该网页,顶部横向导航栏的浏览效果如图网页,顶部横向导航栏的浏览效果如图3-1所示。所示。【任务任务3-2】创建底部横向友情链接导航栏创建底部横向友情链接导航栏【任务
7、描述任务描述】 (1)创建底部横向友情链接导航栏。)创建底部横向友情链接导航栏。 底部横向友情链接导航栏包括底部横向友情链接导航栏包括“淘宝网淘宝网”、“当当当当网网”、“京东商城京东商城”、“1号店号店”、“好买网好买网”、“一比一比二购二购”、“太平洋电脑网太平洋电脑网”、“金蛋商城金蛋商城”、“绿森数绿森数码码”、“乐购网乐购网”、“一瞬数码一瞬数码”、“品牌家电网品牌家电网”、“QQ商城商城”、“苏宁易购苏宁易购”等等14个超链接。个超链接。 (2)设置底部横向友情链接导航栏各个文本形式的外)设置底部横向友情链接导航栏各个文本形式的外部链接。部链接。 底部横向友情链接导航栏的外观效果如
8、图底部横向友情链接导航栏的外观效果如图3-8所所示。示。图图3-83-8底部横向友情链接导航栏的外观效果底部横向友情链接导航栏的外观效果【任务实施任务实施】 1创建底部横向友情链接导航栏。创建底部横向友情链接导航栏。 2创建文本形式的外部链接。创建文本形式的外部链接。 3查看底部横向友情链接导航栏的查看底部横向友情链接导航栏的HTML代码。代码。 4保存网页与浏览网页效果。保存网页与浏览网页效果。 保存网页保存网页0303.html,然后按快捷键,然后按快捷键F12,底部,底部横向友情链接导航栏的浏览效果如图横向友情链接导航栏的浏览效果如图3-8所示。所示。【任务任务3-3】创建左侧帮助导航栏
9、创建左侧帮助导航栏【任务描述任务描述】 (1)创建左侧帮助导航栏。)创建左侧帮助导航栏。 左侧帮助导航栏主要包括左侧帮助导航栏主要包括“新手指南新手指南”、“配送方式配送方式”、“支付方式支付方式”和和“售后服务售后服务”等等4个组成部分,每个部分又细分为多个选项。个组成部分,每个部分又细分为多个选项。 (2)设置左侧帮助导航栏各个文本形式的超链接。)设置左侧帮助导航栏各个文本形式的超链接。 左侧帮助导航栏的外观效果如图左侧帮助导航栏的外观效果如图3-10所示。所示。图图3-103-10左侧帮助导航栏的外观效果左侧帮助导航栏的外观效果【任务实施任务实施】l1创建左侧帮助导航栏创建左侧帮助导航栏
10、l2创建文本形式的超链接创建文本形式的超链接(1)使用)使用【指向文件指向文件】按钮创建超链接按钮创建超链接(2)使用)使用【属性属性】面板定义超链接面板定义超链接(3)使用菜单命令和对话框定义超链接)使用菜单命令和对话框定义超链接 使用类似方法创建其他使用类似方法创建其他15个超链接。个超链接。l3查看左侧帮助导航栏的查看左侧帮助导航栏的HTML代码代码l4保存网页与浏览网页效果保存网页与浏览网页效果 保存网页保存网页0303.html,然后按快捷键,然后按快捷键F12,左侧帮助,左侧帮助导航栏的浏览效果如图导航栏的浏览效果如图3-10所示。所示。【任务任务3-4】创建底部帮助导航栏创建底部
11、帮助导航栏【任务描述任务描述】 (1)创建包括底部帮助导航栏的网页)创建包括底部帮助导航栏的网页0302help.html 。 在站点文件夹在站点文件夹“page”中创建包括底部帮助导航栏的网中创建包括底部帮助导航栏的网页页0302help.html,横向排列的底部帮助导航栏主要包括,横向排列的底部帮助导航栏主要包括“新手指南新手指南”、“配送方式配送方式”、“支付方式支付方式”、“售后服务售后服务”和和“帮助信息帮助信息”等等5个组成部分,每个部分纵向又细分为多个组成部分,每个部分纵向又细分为多个选项。个选项。 (2)设置底部帮助导航栏各个文本形式的超链接。)设置底部帮助导航栏各个文本形式的
12、超链接。 底部帮助导航栏的外观效果如图底部帮助导航栏的外观效果如图3-11所示。所示。 (3)在网页文档)在网页文档0302.html中,应用浮动框架中,应用浮动框架 嵌入网页嵌入网页0302help.html。图图3-113-11底部帮助导航栏的外观效果底部帮助导航栏的外观效果【任务实施任务实施】 1创建包括底部帮助导航栏的网页创建包括底部帮助导航栏的网页0302help.html 2创建文本形式的超链接创建文本形式的超链接 3保存网页与浏览网页效果保存网页与浏览网页效果 保存网页保存网页0302help.html,然后按快捷键,然后按快捷键F12,底,底部帮助导航栏的浏览效果如图部帮助导航
13、栏的浏览效果如图3-11所示。所示。 4利用浮动框架在网页利用浮动框架在网页0302.html中嵌入网页中嵌入网页0302help.html 。 打开文件夹打开文件夹“3-1”中网页文档中网页文档0302.html,在该,在该 网页中网页中“”与与“”之间输入以下之间输入以下HTML代码,嵌入网页代码,嵌入网页0302help.html。用用户帮助户帮助【任务任务3-5】创建多种形式的超级链接创建多种形式的超级链接【任务描述任务描述】 在网页在网页0302.html中创建以下多种形式的超链接:中创建以下多种形式的超链接:(1)创建图片形式的超链接)创建图片形式的超链接(2)创建电子邮件链接)创
14、建电子邮件链接(3)创建锚点链接)创建锚点链接(4)创建图像热点链接)创建图像热点链接(5)检查链接的有效性和正确性)检查链接的有效性和正确性 网页网页0302.html的浏览效果如图的浏览效果如图3-12所示。所示。图图3-123-12网页网页0302.html0302.html的浏览效果的浏览效果【任务实施任务实施】l 1创建图片形式的内部链接创建图片形式的内部链接l 2创建电子邮件链接创建电子邮件链接l 3创建锚点链接创建锚点链接(1)插入一个命名锚记)插入一个命名锚记(2)创建锚点链接)创建锚点链接4创建图像热点链接创建图像热点链接(1)选中绘制热点区域的图像)选中绘制热点区域的图像(
15、2)绘制矩形热点区域)绘制矩形热点区域 打开网页文档打开网页文档0302.html,切换到,切换到“代码代码”视图,视图,文字文字“设为首页设为首页”对应的对应的HTML代码如下所示。代码如下所示。设为首页设为首页 文字文字“收藏易购收藏易购”对应的对应的HTML代码如下所示。代码如下所示。收藏易购收藏易购l6检查链接检查链接l7保存网页与浏览网页效果保存网页与浏览网页效果 保存网页保存网页0302.html,然后按快捷键,然后按快捷键F12浏览其浏览其效果,如图效果,如图3-12所示,单击各个链接,观察其链接效所示,单击各个链接,观察其链接效果是否正确。果是否正确。【任务任务3-6】创建下拉
16、菜单和自动展开菜单创建下拉菜单和自动展开菜单【任务描述任务描述】 (1)创建纵向下拉列表菜单。)创建纵向下拉列表菜单。 (2)创建自动展开与收缩菜单。)创建自动展开与收缩菜单。 (3)编写)编写JavaScript代码,实现菜单的展开与收代码,实现菜单的展开与收缩功能。缩功能。 纵向下拉列表菜单和自动展开与收缩菜单的浏纵向下拉列表菜单和自动展开与收缩菜单的浏览效果如图览效果如图3-22所示。所示。图图3-223-22纵向下拉列表菜单和自动展开与收缩菜单的浏览效果纵向下拉列表菜单和自动展开与收缩菜单的浏览效果【任务实施任务实施】 1创建纵向下拉列表菜单。创建纵向下拉列表菜单。 打开文件夹打开文件
17、夹“3-3”中网页文档中网页文档0303.html,在该网页,在该网页中中“”下面输入以下下面输入以下HTML代码。代码。首页首页 笔记本笔记本 笔记本电脑笔记本电脑 笔记本配件笔记本配件 电脑包电脑包 数码影音数码影音 数码影像数码影像 MP3/MP4 GPS 便携移动存储便携移动存储/读卡器读卡器时尚小数码时尚小数码 相机相机/摄象机配件摄象机配件 录音笔录音笔 2创建自动展开与收缩菜单。创建自动展开与收缩菜单。 在网页文档在网页文档0303.html中纵向下拉列表菜单的中纵向下拉列表菜单的HTML代码之后输入以下代码之后输入以下HTML代码。代码。 快速快速导航导航 X 产品产品 手机手
18、机 | MP3/MP4 | MID | EBook 最新活动最新活动 | 新新品信息品信息 | 产品论坛产品论坛 服务与支持服务与支持 定制服务定制服务 | 销售网点销售网点 | 售后网点售后网点 | 服务条款服务条款 问吧问吧 | 在在线投诉线投诉 | 常见问题常见问题 产品注册产品注册 | 配件真伪查询配件真伪查询 | 资源下载资源下载 品牌与娱乐品牌与娱乐 Fans 广场广场 | 明星馆明星馆 | 训练营训练营 | 欢乐谷欢乐谷 会员中心会员中心 | 酷炫抽大奖酷炫抽大奖 | O币商城币商城 3编写编写JavaScript代码,实现菜单的展开与收缩功能。代码,实现菜单的展开与收缩功能。
19、在网页文档在网页文档0303.html中的中的“”与与“”之间添加以下之间添加以下JavaScript代码,实现菜单的展开与收缩功代码,实现菜单的展开与收缩功能。能。 function menu_drop(menuId, display) document.getElementById(menuId).style.display=displayWay; 4保存网页与浏览网页效果。保存网页与浏览网页效果。 保存网页保存网页0303.html,按快捷键,按快捷键F12浏览其效浏览其效果,如图果,如图3-22所示。所示。(1)浏览纵向下拉列表菜单)浏览纵向下拉列表菜单(2)浏览自动展开与收缩菜单)浏
20、览自动展开与收缩菜单【考核任务描述考核任务描述】 教材配套光盘中已提供了考核评价项目所需教材配套光盘中已提供了考核评价项目所需 的网页文件、的网页文件、CSS样式表文件和网页素材,在网样式表文件和网页素材,在网 页页0304.html中完成以下操作。中完成以下操作。 (1)为顶部导航栏的文字)为顶部导航栏的文字“北京北京”设置超链接,设置超链接, 链接到文件夹链接到文件夹“page”的网页文件的网页文件03beijing.html。 (2)为网页左上部的)为网页左上部的“八达岭长城八达岭长城”图片设置超图片设置超 链接,链接到文件夹链接,链接到文件夹“images”中的图片中的图片0301.jpg。 (3)为底部导航栏的文字)为底部导航栏的文字“网上留言网上留言”设置电子邮件设置电子邮件 链接,链接到邮箱地址链接,链接到邮箱地址,设置主题为,设置主题为 “对网站的意见与建议对网站的意见与建议” 。 (4)为底部的友情链接文字)为底部的友情链接文字“张家界旅游网张家界旅游网”设置超链设置超链 接,链接到外部网站,其网址为接,链接到外部网站,其网址为http:/ (5)在网页顶部的文字)在网页顶部的文字“首页首页”左侧插入一个命名锚左侧插入一个命名锚 记,该锚记命名为记,该锚记命名为“b_top”,为网页底部图片,为网页底部图片03top.gif 创
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2025年文化创意产业园区品牌塑造与产业集聚的产业园区品牌战略规划
- 2025年智能交通系统在高速公路智能交通系统车联网与智能物流中的应用报告
- 2025年教育信息化基础设施建设:教育信息化产业创新趋势报告
- 信贷工作计划范文
- 江苏省苏州市2026届高三上学期期初阳光调研英语试卷(含音频)
- 《家具购买合同》模板
- 幽默安全培训讲义课件
- 巡察组联络员经验课件
- 岩石与矿物课件
- 输煤班组安全培训内容课件
- 2025年司法局招聘司法所协理员历年考试试题与答案
- 《数据库系统概论》教案
- 小学学校“十五五”(2026-2030)发展规划
- 2025一建《建设工程项目管理》考前十页纸(完整版)
- 红楼梦第34回课件
- 摩托车整车采购合同范本
- 民事起诉状(人身保险合同纠纷)样式
- 9《犟龟》公开课一等奖创新教学设计
- 2025年乡村产业发展笔试模拟题库
- 2025滨海投资(天津)有限公司校园招聘考试备考题库及答案解析
- 2024-2025学年度江西建设职业技术学院单招《职业适应性测试》题库试题【名师系列】附答案详解
评论
0/150
提交评论