绝对路径与相对路径(在网页制作中的应用)

相对路径

        路径是指一个文件存储的位置,分为相对路径和绝对路径,相对路径是指当前文件所在位置为参考点而建立的路径。假设有如下图所示的路径:

index.html文件的源代码如下

<body>
    <img scr="../images/dog.jpg"/>
</body>

 解析

      <img>的src属性值"../images/dog.jpg"是一个路径,这个路径是以当前文件(index.html)所在目录为参考点的。../表示参考点的上一级目录,因此"../images/dog.jpg",表示退到当前文件的上一级目录,再进入到下一级目录images中找到图片dog.jpg,这种路径称为相对路径。相对路径的优点在于无论html目录移动到什么位置,index.html文件总能找到dog.jps文件,因此图片显示正常。

绝对路径

绝对路径是以硬盘根目录或站点根目录为参考点而建立的路径。代码如下;

<body>
    <img src="file://C|/html/images/dog.jpg">
</body>

 解析

       <img>的src属性值"file://C|/html/images/dog.jpg"是一个路径,这个路径是以硬盘根目录(c:/)为参考点的,当前网页文件(index.html)将引用c:\html\images\dog.jpg文件,这种路径称为绝对路径。

      当将html目录移动到其他位置的时候,index.html文件就无法找到dog.jpg文件,因此图片显示错误。在网页制作中推荐使用相对路径。

 

  • 4
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
第1章 网页设计学前基础 1 1.1 网站和网页的基础知识 1 1.1.1 主流网站解析 1 1.1.2 网页的概念 3 1.1.3 网页的基本元素 3 1.1.4 网页类型 5 1.2 网页的设计构思 7 1.2.1 网页的布局构思 7 1.2.2 网页的设计原则 8 1.2.3 网页的配色技巧 9 1.2.4 网页大体构思 10 1.2.5 网页制作的一般流程 11 1.3 认识Dreamweaver CS4 12 1.3.1 Dreamweaver简介 12 1.3.2 Dreamweaver CS4工作界面 12 1.4 上机练习 17 1.5 习题 18 第2章 创建和管理站点 19 2.1 创建本地站点 19 2.1.1 站点的概念 19 2.1.2 规划站点 21 2.1.3 创建本地站点 22 2.1.4 管理本地站点 24 2.2 创建站点文件 26 2.2.1 创建文件夹和文件 26 2.2.2 管理文件夹和文件 26 2.3 网页文档的基本操作 27 2.3.1 创建空白网页文档 27 2.3.2 打开和保存文档 28 2.3.3 设置文档属性 29 2.4 显示和编辑页面头部信息 30 2.4.1 显示页面头部信息 30 2.4.2 插入头部信息 31 2.5 上机练习 32 2.5.1 构建本地站点 33 2.5.2 设置页面头部信息 34 2.6 习题 34 第3章 规划网页布局 35 3.1 可视化助理 35 3.1.1 使用【标尺】功能 35 3.1.2 使用【网格】功能 36 3.1.3 使用【跟踪图像】功能 37 3.2 使用表格 38 3.2.1 Dreamweaver的表格 38 3.2.2 插入表格 38 3.2.3 插入嵌套表格 40 3.3 编辑表格 41 3.3.1 选择表格 41 3.3.2 表格的编辑操作 43 3.3.3 表格的其他操作 48 3.4 使用框架布局网页 50 3.4.1 框架的概念 50 3.4.2 使用框架布局网页 52 3.4.3 保存框架 53 3.4.4 创建嵌套框架 54 3.4.5 设置框架属性 54 3.5 上机练习 55 3.6 习题 56 第4章 插入文本和图像 57 4.1 在网页插入文本 57 4.1.1 认识【文本】插入栏 57 4.1.2 插入文本 58 4.1.3 导入文本 58 4.1.4 插入特殊符号 59 4.1.5 插入水平线 59 4.1.6 插入日期 60 4.2 编辑文本 62 4.2.1 设置文本样式 62 4.2.2 设置文本段落格式 64 4.2.3 设置列表 64 4.3 在网页插入图像 67 4.3.1 网页的图像格式 67 4.3.2 插入图像 67 4.3.3 应用鼠标经过图像 70 4.4 编辑图像 72 4.4.1 设置图像属性 72 4.4.2 使用图像编辑器 76 4.5 上机练习 78 4.5.1 制作汽车网站主页 78 4.5.2 制作导航栏 81 4.6 习题 82 第5章 制作精美的网页 83 5.1 应用导航条 83 5.1.1 插入导航条 83 5.1.2 编辑导航条 84 5.2 在网页插入Flash动画 86 5.2.1 插入Flash SWF文件 86 5.2.2 设置Flash动画属性 88 5.2.3 插入FlashPaper 89 5.2.4 插入Flv视频 89 5.3 插入其他媒体文件 93 5.3.1 插入Shockwave影片 93 5.3.2 插入Java Applet 94 5.4 在网页插入声音 94 5.4.1 网页的声音格式 95 5.4.2 直接插入声音 95 5.4.3 添加背景音乐 96 5.5 应用网页特效 98 5.5.1 添加鼠标特效 98 5.5.2 插入滚动条 100 5.5.3 应用网页特效 101 5.6 上机练习 106 5.6.1 制作主页 107 5.6.2 丰富页面内容 109 5.7 习题 110 第6章 使用CSS样式美化 111 6.1 CSS样式的基础知识 111 6.1.1 CSS样式的概念 111 6.1.2 CSS样式的功能 112 6.1.3 CSS样式规则 112 6.2 使用CSS样式 113 6.2.1 认识【CSS样式】面板 114 6.2.2 新建CSS样式规则 115 6.2.3 定义CSS样式规则 116 6.2.4 应用CSS样式规则 121 6.3
1、设计的目的 做个网站以怀念个人旅游的日子。还有此刻的美丽,以及无限的未来向往。 2、设计布局 主页设计布局是在网站的左上角是网站标题名称、当前在线人数等,有背景图引入,右上角有个人头像模态下拉框,点击出现下拉列表,包含我的旅游日记、个人心、退出等链接,还有登录、注册按钮,点击登录按钮来到登录页面,网站设计初衷就是自己要登录后才能发布旅游日记,这样更能保证私密性。网站央是内容,包含三大板块,分别是最热、最新、话题三个主题驿站,每个主题下面是列出5条内容日记的标题链接,点击对应链接跳转到日记详情页面,最热代表浏览次数最多,最新就是根据发布旅游日记的时间来排序,最新发的日记内容排在最前面,话题是根据这次发布旅游日记的主题来排序的。网站尾部的左下角是网站设计目的简介,右下角分别是个人联系方式、合作方式、赞助商本人等。点击名字会弹出图片。 3、网站具体设计过程 首先选定 本网页制作工具是前端开发利器: WebStorm,创建前端项目工程,并创建相应的文件夹,存放各个css、js,还有网页用到的各种图片,以及除了主页面index.html之外的二级页面,其存放在html文件夹下,在各个二级页面与主页跳转的网页链接上采用相对路径而不是绝对路径,创建好的项目工程目录结构如下所示; 首先设计网站主页也就是核心内容index.html,所有的二级页面都可以从主页跳转过去,相应的二级页面也都有主页的链接,可以随时返回到主页面。页面总体采用 CSS+DIV 布局,最外层DIV为框架,对重复页面代码进行抽取,比如网站头部用header.html来代替,网站底部用footer.html来代替,在各个要引用的网页上直接在其头部和尾部用iframe标签引入即可(),在背景图引入时采用(background-image:url("../pic/backpic.jpeg"); background-repeat: no-repeat; background-size:100% a)background-image标签进行操作。在日记链接显示以及网站底部链接上采用ui、li标签,在屏显示的最新、最热、话题等主题下的具体旅游日记标题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

雷亚文

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值