《HTML5+CSS3网页设计入门必读》——1.8 了解在Web服务器上放置文件的位置

简介:

本节书摘来自异步社区《HTML5+CSS3网页设计入门必读》一书中的第1章,第1.8节,作者: 【美】Julie Meloni更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.8 了解在Web服务器上放置文件的位置

维护Web内容的一个重要方面是确定将如何组织该内容——不仅便于用户查找,而且便于你维护服务器上的内容。把文件放在目录中有助于管理那些文件。

在Web服务器上命名和组织目录以及开发针对文件维护的规则完全取决于你自己。不过,在这个漫长的过程中,维护一个组织良好的服务器可以使其内容管理更高效。

1.8.1 基本的文件管理
在你浏览Web时,可能注意到当你在Web站点中导航时URL会改变。例如,如果查看一家公司的Web站点,并且单击通往公司的产品或服务的图形导航元素,URL可能会从

http://www.companyname.com/

变为

http://www.companyname.com/products/

http://www.companyname.com/services/

在上一节中,我使用了术语文档根目录(document root),但是没有真正解释它的有关含义。Web服务器的文档根目录实质上是完整URL中的末尾斜杠。例如,如果域是 yourdomain.com ,并且URL是 http://www.yourdomain.com/ ,那么文档根目录就是通过末尾斜杠(/)表示的目录。文档根目录是你在Web服务器上创建的目录结构的起点;Web服务器将从这个位置开始寻找Web浏览器请求的文件。

如果像前面所指示的那样把sample.html文件放在文档根目录中,将能够通过Web浏览器利用以下URL访问它:

http://www.yourdomain.com/sample.html

如果把这个URL输入到Web浏览器中,将会看到呈现的sample.html文件,如图1.8所示。


b8626c5be92581658a666a40fe700c359c152d5e

不过,如果在文档根目录内创建一个新目录,并把sample.html文件放在该目录中,则将利用下面这个URL访问该文件:

http://www.yourdomain.com/newdirectory/sample.html

如果把sample.html文件放在一连接到你的服务器时就最初看到的目录中,也就是说,你没有改变目录并把文件放在文档根目录中,那么将不能从你的Web服务器利用任何URL访问sample.html文件。该文件仍然位于你称为Web服务器的机器上,但是由于文件不在服务器软件知道从此开始寻找文件的文档根目录中,永远都没有人能够通过Web浏览器访问到它。

底线就是:在开始传输文件之前,总是要导航到Web服务器的文档根目录。

对于图形和其他多媒体文件尤其如此。Web服务器上的公共目录被称为images,正如你可能想到的,其中将存放所有的图像资源以便检索。其他流行的目录包括用于存放样式表文件的.css文件(如果使用多个样式表文件的话),以及用于存放外部JavaScript文件的.js文件。此外,如果你知道在Web站点上将具有一个区域,访问者可以从中下载许多不同类型的文件,就可能简单地把该目录命名为downloads。

无论它是一个包含你的艺术选辑的ZIP文件,还是一个带有销售数字的Excel电子数据表,在Internet上发布不仅仅是Web页面的文件通常是有用的。为了使一个不是HTML文件的文件在Web上可用,只需把该文件像一个HTML文件一样上传到Web站点,并遵循本章前面给出的关于上传文件的指导即可。在把文件上传到Web服务器之后,就可以创建一个指向它的链接(在第8章将学习这方面的知识)。换句话说,Web服务器不仅仅能提供HTML文件。

下面给出了一段示例HTML代码,在本书后面将学习关于它的更多知识。下面的代码将用于一个名为artfolio.zip的文件,它位于Web站点的downloads目录中,并且会显示链接文本“Download my art portfolio!”:

<a href="/downloads/artfolio.zip">Download my art portfolio!</a>

1.8.2 使用索引页面
在你想到索引时,可能会想起本书后面的那一节,它告诉你在哪里寻找各个关键词和主题。Web服务器目录中的索引文件可以服务于此目的——如果你像那样设计它的话。事实上,该名称最初就起源于此。

index.html文件(或者采用它通常的叫法即索引文件(index file))是你给一个页面提供的名称,当人们导航到你的Web站点中的特定目录时,你希望他们把该页面视为默认的文件。

索引文件的另一个作用是,访问你的站点上的某个目录的用户将具有一个索引页面,但是没有指定该页面仍将登录到用于站点的那个区域(或者用于站点本身)的主页上。

例如,可以输入以下URL之一,并登录到Apple的iPhone信息页面上:

http://www.apple.com/iphone/

http://www.apple.com/iphone/index.html

iphone目录中没有index.html页面,结果将依赖于Web服务器的配置。如果服务器被配置成禁止目录浏览,用户在尝试访问不带有指定的页面名称的URL时将会看到一条“Directory Listing Denied”(“目录列表被拒绝”)消息。不过,如果服务器被配置成允许目录浏览,用户将会看到那个目录中的文件列表。

你的托管提供商将已经确定了这些服务器配置选项。如果你的托管提供商允许你通过控制面板修改服务器设置,你就可以更改这些设置,使得服务器基于你自己的需要来响应请求。

索引文件不仅在子目录中使用,也在Web站点的顶级目录(或文档根目录)中使用。Web站点的第一个页面——首页(home page)或主页(main page),或者当用户第一次访问你的域时你希望他们看到的Web内容的你所喜欢的任何称呼——都应该被命名为index.html,并且放在Web服务器的文档根目录中。这确保当用户在他们的Web浏览器中输入 http://www.yourdomain.com/ 时,服务器将利用你打算让他们看到的内容来响应(而不是给他们提供“Directory Listing Denied”(目录列表被拒绝)消息或者其他某种意外的后果)。

相关文章
|
移动开发 数据挖掘 开发者
服务器发送事件(SSE)在现代Web开发中的关键作用
服务器发送事件(SSE)是HTML5标准协议,用于服务器主动向客户端推送实时数据,适合单向通信场景。相比WebSocket,SSE更简洁高效,基于HTTP协议,具备自动重连、事件驱动等特性。常见应用场景包括实时通知、新闻推送、数据分析等。通过Apipost等工具可轻松调试SSE,助力开发者构建高效实时Web应用。示例中,电商平台利用SSE实现秒杀活动通知,显著减少延迟并简化架构。掌握SSE技术,能大幅提升用户体验与开发效率。
|
前端开发
在Webpack配置文件中,如何配置loader以处理其他类型的文件,如CSS或图片
在Webpack配置文件中,通过设置`module.rules`来配置loader处理不同类型的文件。例如,使用`css-loader`和`style-loader`处理CSS文件,使用`file-loader`或`url-loader`处理图片等资源文件。配置示例:在`rules`数组中添加对应规则,指定`test`匹配文件类型,`use`指定使用的loader。
|
存储 移动开发 大数据
HTML5 Web IndexedDB 数据库详解
IndexedDB 是一种高效的浏览器存储方案,允许在本地存储大量结构化数据,支持索引和事务,适用于需要离线和大数据处理的应用。它由数据库、对象仓库等组成,通过键值对存储数据,确保数据一致性和完整性。本介绍展示了如何创建、读取、更新和删除数据,以及事务和错误处理的最佳实践。
1544 10
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
943 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
833 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
移动开发 前端开发 Java
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
476 6
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
287 5
|
XML 前端开发 JavaScript
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑;Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例,如实时数据更新、表单验证与提交、动态加载内容等。同时,针对跨域问题、数据安全与性能优化提出了建议。总结指出,PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
417 3
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
611 6