




kok电子竞技权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
kok电子竞技:文档简介
1、HTML与CSS前台页面设计创建超链接 第七章HTML与CSS前台页面设计HTML与CSS前台页面设计第七章 创建超链接 HTML与CSS前台页面设计本章要点 超链接的概念 连接标记 使用CSS样式设置书签格式 图片连接 图片映射http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/www.xunchi- http:/ http:/ http:/ http:/ http:/ http:/
2、 http:/ http:/ http:/ / http:/ http:/ http:/ http:/ http:/ http:/ http:/www.gz- http:/www.gz- http:/ http:/ http:/ http:/ 超链接概述7.2 超链接标记a及其属性7.3 利用CSS样式设置书签格式7.4 图片链接7.5 图片映射链接7.6 综合实例第七章 创建超链接 HTML与CSS前台页面设计7.1 超链接概述超链接是一个网站的灵魂。一个网站是由多个页面组成的,创建超链接有利于页面与页面之间的跳转,从而将整个网站中的页面有机地连接起来,
3、它是网页中至关重要的元素。一般情况是将鼠标光标移至超连接处时显示为下划线,单击鼠标即可跳转到超链接的相应页面。每一个网页都有独一无二的地址,即URL。HTML与CSS前台页面设计7.2 超链接标记a及其属性超链接标记虽然在网页设计制作中占有不可替代的地位,但是其标记只有一个,那就是标记。本章介绍的超链接应用都是基于标记基础上的。链接文字链接文字 HTML与CSS前台页面设计7.2 超链接标记a及其属性每一个文件都有自己的存放位置和路径,理解一个文件到要链接的文件之间的路径关系式创建超链接的根本。URL统一资源定位器,指的就是每一个网站都具有的独立的地址。同一个网站下的每一个网页都属于同一个地址
4、下,但是,当创建网页时,不可能也不需要为每一个链接都输入完全的地址。我们只需要确定当前文档同站点根目录之间的相对路径关系。因此,链接可以分为以下3种:绝对路径相对路径根路径 HTML与CSS前台页面设计7.2 超链接标记a及其属性1.绝对路径绝对路径为文件提供完全的路径,包括适用的协议,如http,ftp,rtsp等。一般常见的有:http:/当链接到其他网站中的文件时,必须使用绝对链接。 HTML与CSS前台页面设计7.2 超链接标记a及其属性2.相对路径相对路径是最适合网站的内部链接的。只要是属于同一网站之下的,即使不在同一个目录下,相对链接也非常适合。
5、相对链接的使用方法为:如果链接到同一目录下,则只需输入要链接文档的名称。如链接到下一级目录中的文件,只需先输入目录名,然后加“/”,再输入文件名。如链接到上一级目录中的文件,则先输入“./”,再输入目录名、文件名。HTML与CSS前台页面设计7.2 超链接标记a及其属性要从news1.html链接到news2.html,只需在设置链接的位置输入“news2.html”。要从news3.html链接到国内新闻目录中的news2.html,只需输入“国内新闻/news2.html”。要从news1.html链接到上一级目录中的news3.html,只需输入“./news3.html”。HTML与C
6、SS前台页面设计7.2 超链接标记a及其属性3.根路径根目录相对地址同样适用于创建内部链接,但大多数情况下,不建议使用此种地址形式。它在下列情况下使用: 当站点的规模非常大,放置于几个服务器上时 当一个服务器上同时放置几个站点时根目录相对地址的书写形式也很简单,首先以一个斜杠开头,代表根目录,然后书写文件夹名,最后书写文件名。 HTML与CSS前台页面设计http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ ht
7、tp:/ http:/www.xunchi- http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ / http:/ http:/ http:/ http:/ http:/ http:/ http:/www.gz- http:/www.gz- http:/ http:/ http:/ http:/ 内部链接所谓内部链接,指的是在同一个网站内部,不同的HTML页面之间的链接关系。在建立网站内部链接的时候,要考虑到使链接具有清晰的导航结构,使用户方便地找到所需内容的HTML文件。7.2.2
8、 书签链接建立书签链接分为两步,一是建立书签,二是为书签制作链接。建立书签:文字文字书签链接:文字链接文字链接7.2 超链接标记a及其属性HTML与CSS前台页面设计7.2.3 外部链接所谓外部链接,指的是跳转到当前网站外部,与其他网站中页面或其他元素之间的链接关系。这种链接在一般情况下需要书写绝对地址。制作外部链接的时候,使用URL统一资源定位符来定位万维网信息,这种方式可以简洁、准确地描述信息所在的地点。常见的URL格式如表所示。7.2 超链接标记a及其属性HTML与CSS前台页面设计1.链接外部网站文字链接文字链接2.链接FTP文字链接文字链接3.链接到news新闻组文字链接文字链接4.
9、发送e-mail发送邮件发送邮件邮件主题邮件主题抄送抄送密件抄送密件抄送 7.2 超链接标记a及其属性HTML与CSS前台页面设计7.2.4 文件(非HTML页面)链接 除了链接到HTML页面的超链接外,还可以制作提供文件下载的链接。如果希望制作下载文件的链接,只需在链接地址处输入文件所在的位置即可。当浏览器用户单击链接后,浏览器会自动判断文件的类型,以做出不同情况处理。文字链接文字链接file_url代表文件所在的路径,可以写下相对路径,也可以写下绝对路径。7.2 超链接标记a及其属性HTML与CSS前台页面设计7.3 利用CSS样式设置书签样式 超链接在默认情况下,链接被显示为带下划线,未
10、被查看过时为蓝色,访问过的为紫色。我们可以通过CSS来设置链接不同状态中的样式 。链接分为5个状态,它们的视觉外观根据当前状态而改变。这些状态如下:link链接在没有任何操作之前的标准状态visited链接被单击之后的状态hover鼠标指针悬停在连接上时的状态focus链接获得焦点时的状态active链接正在被单击时的状态在默认外观中,link为蓝色,visited为紫色,active为红色,三者都带有下划线。使用CSS可以调节不同状态下链接的字体、大小、颜色、加粗斜体、下划线等格式。 HTML与CSS前台页面设计7.4 图片连接 虽然链接主要是基于文本的,但是可以用一个链接来包装一个图像,从
11、而使其变成一个链接。图像的链接标记和文字是相同的。都是标记。区别在于,文本的链接在超链接标记之间输入文本链接文字链接文字图片的链接在之间输入的是图片的代码。另外,图片默认情况下没有边框,一旦添加链接后会有蓝色边框,想要去掉边框,可在标记中将border属性值设为0,如,或者在CSS样式表中将图片标记img的样式统一设成imgborder:0;。HTML与CSS前台页面设计7.5 图片映射链接 图像映射(image map)使你可以在一个单独图像中定义多个链接。例如,如果你有一个气象图,可以使用一个图像映射链接到各个地区的气象预报。图像映射中可单击的范围可以是基本形状(矩形或者圆形),也可以是复
12、杂的多边形。HTML与CSS前台页面设计7.6 综合实例 HTML与CSS前台页面设计第七章本章结束创建超链接 http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/www.xunchi- http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ / http:/ http:/ http:/ http:/ http:/ http:/ http:/www.gz- http:/www.gz- http:/ http:/ http:/ http:/
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
kok电子竞技:最新文档
- RORγ-IN-2-生命科学试剂-MCE
- 科技小镇建设中的商业价值挖掘与生态保护平衡
- 科技发展史上的里程碑作品
- 甲级基四氢苯酐行业中的
- 科技助力健康饮食缓解胃溃疡症状
- 私房订金合同范本
- 科技前沿精密仪器设计的新挑战与机遇
- 销售节日礼盒合同范本
- 砖厂员工安全意识提升与标准化培训
- 科技行业中的决策制定策略与案例
- 2025年春季1530安全教育记录主题
- DBJ33T 1271-2022 建筑施工高处作业吊篮安全技术规程
- 2025年3月日历表(含农历-周数-方便记事备忘)
- 消化内镜护理讲课
- 《中国人口老龄化》课件
- 静脉采血最佳护理实践相关知识考核试题
- 检验检测中心检验员聘用合同
- 腰椎后路减压手术
- 商场扶梯安全培训
- 《全科医学概论》课件-以家庭为单位的健康照顾
- 自来水厂安全施工组织设计
评论
0/150
提交评论