原创力文档- 1、本文档共9页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
查看更多
单页面网站导航
1.目的
制作单页面网站，使学生掌握锚点链接的使用方法。
2.内容
编写一个html网页文件，每个页面用一个p标签，分别设置锚点chat1,chat2,chat3,chat4,chat5，每个P标签都包含导航，点击导航链接到同一页面相应的锚点上。
3.步骤
(1) 新建一个html网页文件，在网页文件中加入5个段落，每个段落插入一个图像;
(2) 在每个段落的开头处设置锚点，分别定义为#chat1,#chat2,#chat3,#chat4,#chat5,
(3) 在每幅图像上面加入相同的导航，分别链接到5个锚点的超级链接，使单击每一菜单到能跳转到对应的段落处显示。
代码如下：
<body>
<p>
<a name="chat1"></a>
<a href="#chat1">专业介绍</a>
<a href="#chat2">莘莘学子</a>
<a href="#chat3">学生作品</a>
<a href="#chat4">学习天地</a>
<a href="#chat5">最新动态</a>
<br />
<img src="images/p1.gif" />
</p>
<p>
<a name="chat2"></a>
<a href="#chat1">专业介绍</a>
<a href="#chat2">莘莘学子</a>
<a href="#chat3">学生作品</a>
<a href="#chat4">学习天地</a>
<a href="#chat5">最新动态</a>
<br />
<img src="images/p2.gif" />
</p>
<p>
<a name="chat3"></a>
<a href="#chat1">专业介绍</a>
<a href="#chat2">莘莘学子</a>
<a href="#chat3">学生作品</a>
<a href="#chat4">学习天地</a>
<a href="#chat5">最新动态</a>
<br />
<img src="images/p3.gif" />
</p>
<p class="p4">
<a name="chat4"></a>
<a href="#chat1">专业介绍</a>
<a href="#chat2">莘莘学子</a>
<a href="#chat3">学生作品</a>
<a href="#chat4">学习天地</a>
<a href="#chat5">最新动态</a>
<br />
<img src="images/p4.gif" />
</p>
<p class="p5">
<a name="chat5"></a>
<a href="#chat1">专业介绍</a>
<a href="#chat2">莘莘学子</a>
<a href="#chat3">学生作品</a>
<a href="#chat4">学习天地</a>
<a href="#chat5">最新动态</a>
<br />
<img src="images/p5.gif" />
</p>
</body>
显示效果如图4-3所示：
图4-3 拓展练习4效果
实践项目
1、按图4-4组织网站，其中文件夹images用于存放图片，ztlx4用于存放拓展练习4网页，文件夹files用于存放其它文件，rw4用于存放任务4网页；
2、制作首页index.html，标题用“姓名，学号实践项目4”，网页内容见图4-5；
3、“任务四超级链接及路径的设置”在新窗口打开rw4.html，其它链接采用无序列表排列，分别链接到tzlx4.html相应的锚点上，所有链接的目标窗口都为"_new"。
图4-4实践项目4网站结构
图4-5实践项目4效果
习题
1．HTML的超链接是通过>标签来实现；
2．在HTML中，超链接标签的格式为<a=“链接位置”>超链接名称</a>
3．URL的格式是由，域名，路经，文件组成
4．建立超链接时路经的写法有相对路径和两种
5. 当target属性设置为时，单击超链接后将在同一窗口显示所打开的网页
6..网页制作：制作单个网页页面，将素材文档的目录设置成为超链接，单击各标题分别跳转到标题所在的文档部分，并在每部分末尾增加“返回顶部”的链接。
目录
一、课程性质
二、课程目标
三、课程内容安排、课程任务
四、认证培训
五、教学方法、教学活动与作业
六、专业素质和职业素养教育
七、课时安排
八、考核方式
九、教材及教参
一、课程性质
本课程是为本院数字媒体应用技术专业的学生所开设的一门专业技术课程，课程全面系统地学习CSS网页样式制作的技术方法。详细介绍了CSS层叠样式表的基础理论和实际运用技术，包括CSS的基本语法和概念，设置文字、图片、背景、表格
您可能关注的文档
- 特色资源 创新创业案例 以“校中厂”为载体组织学生参加创新创业实践.docx
- 特色资源 典型学习方案 《ArcGIS软件应用》典型学习方案.docx
- 特色资源 典型学习方案 《地形测量》典型学习方案.docx
- 特色资源 国际合作 强化高职教育国际合作 为“一带一路”建设提供技能人才.doc
- 特色资源中心 七、IMOLA陶瓷牵手郑曙旸 助力名师讲堂走进广州 七、IMOLA陶瓷牵手郑曙旸 助力名师讲堂走进广州.doc
- 特色资源中心 十、2016中国（大连）室内设计国际论坛——《关注未来设计英才》第二季 十、2016中国（大连）室内设计国际论坛——《关注未来设计英才》第二季.doc
- 特殊儿童心理 特殊儿童心理 《特殊儿童心理》课程典型学习方案.doc
- 特许经营实务 特许经营项目推广 特许项目推广（项目级教材）.docx
- 特种加工技术 特种加工技术 07CAD试卷A.doc
- 体育 大众健美操一级成套动作5段 大众健美操一级成套动作5段.doc
文档评论（0）