Question

我是编程的新手。我不是任何语言的专家，我具有C，C ++的基本知识。

我想创建一个功能强大，互动性强的网站。我不想使用wordpress或joomla或drupal或任何类似的内容管理系统。我爱上了计算机科学，我想学习和发展自己。

我知道，由于知识有限，我现在无法创建如此大的网站，因此我决定将其分解为不同的部分。起初，我只是要创建一个像网站这样的博客并将其放到网上，然后随着时间的推移，随着我在计算机上学习和进一步发展，我将不断更新和修改我的网站。

因此，现在，仅凭HTML5和CSS3和基本的javascript知识，我应该设计哪种类型的页面内部目录结构，以确保最佳功能并减少工作量。我很困惑，如果我首先使用绝对路径在我的计算机上脱机设计整个网站，然后将其放置在实时服务器上时，我将不得不更改100页页面（即网站的每个页面）上的链接，但是如果我使用相对路径，那么我不知道如何向后退一个以上水平，

说，如果目录是这样的

根
- index.html
- 图片
- CSS
- JS
- 游戏
  - index.html
  - GTA-V
    - index.html
    - CSS
  - CSS
  - JS
  - 图片

...

因此，如果我正在编写GTA-V的index.html，那么我知道可以通过使用“ /../”向后退一步，但是如果在GTA-V index.html文件中，则单击“ home” ”，那么如何将其链接到具有相对路径的“ root> index.html”文件？或者，如果我想使用位于“ root>图片”中的网站徽标，那么该如何将图片链接到当前页面。

我不能像在实时服务器上那样使用绝对路径，它将变得毫无用处，那么相互链接文件的方式又是多方面的呢？

也请向我建议最好的方法来维护网站的组织结构，一开始，我将必须为每个页面创建一个HTML文件并分别编辑每个页面，直到学习PHP或任何其他服务器端编程为止语言，那么之后只能为我的网站创建模板。

在没有任何php或mysql知识的情况下，对本网站使用joomla或drupal的想法有多好。现在，我打算尽可能少地使用HTML，CSS和javascript创建网站。最初它只是一个博客类型的网站，其功能将与任何其他博客类似，并且类似于“ W3C速查表”和“ caniuse”。当我将学习更多语言时，将在该网站中添加搜索算法和模板以及许多其他内容。

最后，我需要针对我在上述情况下如何开始制作该网站的建议？

Answer 1

这里有很多要解压的东西。我不是网络开发专家。但是我会分享我的工作。

首先。只有一个index.html。如果要“ Games> index.html”，则将其设置为“ Games> gameHomePage.html”->“ Games> gameHomePage.html”和“ GTA-V> index.html”->“ GTA> gtaHomPage.html”或类似的名称同类。不要多次使用index.html并将其始终放在根目录中。

第二。如果要通过相对路径导航。以下是操作方法

/*current directory*/
./

/*parent directory of your current directory*/
./../

/*two directory levels up*/
./../../

/*child directory*/
./mySubDirectory

第三。投资尽快创建网站模板。这将使您的生活轻松上千倍。

第四。有很多方法来进行网站目录组织。每个项目对文件夹的组织方式都不同（至少以我的经验）。最主要的是要使文件夹和文件的命名约定保持相同。并在整个项目中保持相同的文件夹结构。

纯净的建议。 PHP不再像以前那样流行。带有oracle数据库的Java / spring引导是最常见的后端之一。工业界可能更喜欢PHP。

纯粹的建议第2部分。学习并使用Brew，NPM或Yarn之类的程序包管理器，NPM最受欢迎，但Yarn逐渐普及。

纯净建议第3部分。您看起来像一个极简主义者。您想自己编写所有内容，以便您完全理解。太棒了。但不要害怕在安装过程中安装一些库等来帮助您。我正在研究一个包含40多个库的项目。

纯净建议部分4.了解MVC（模型视图控制器）。今天不要强调。但这是设计/创建/开发网络专家的最常见方法之一。每一项包含网站内容的工作都会向您询问。

纯净建议部分5。检查移动优先设计。这也是行业中常见的重要概念。

高度推荐的图书馆。 Bootstrap，NPM，Express，Spring Boot

我知道很多。我只是希望在跳到网络内容时能有所帮助。编码愉快！

Answer 2

我喜欢您的雄心和抱负，希望通过一次迈出一步来打造更大的东西。绝对是这样的方法，一开始不要太复杂。确保您喜欢这个过程！这里有一些准则可能会帮助您。

从简单开始
您可以在线创建初始页面，而不必担心任何设置。 CodePen是制作页面的理想平台，它会在每次更改时刷新页面。然后，当您准备好一个或两个页面并希望将它们链接在一起时，请继续在本地进行开发。

运行本地服务器
设置本地服务器并运行它。这可以像下载程序，运行它并按启动来启动服务器一样容易。我过去使用的一个程序是XAMPP。

这样做的好处是，您可以从本地文件夹而是通过服务器为站点提供服务。然后，当您准备好页面后，就可以通过将其放到网上，比如说FTP。由于您的链接在本地与服务器上的链接相同，因此可以解决路径问题。在这两种情况下，您都可以使用/games/GTA-V/index.html

您的文件夹结构看起来不错。我确实建议将所有CSS和JavaScript放在一个文件中，除非每个页面的外观都完全不同。这样，您可以轻松地重用样式和JavaScript函数。不要将html和图像放在单独的文件夹中。随着站点的增长，它将使您的项目井井有条。

使用Joomla或Drupal是个人选择。如果您热衷于PHP并且更倾向于后端开发，那么这可能是您的事。如果您想创建站点中更具视觉效果的部分，请按照已有的计划进行操作，并首先关注前端开发。

一些我开始进行Web开发时发现有用的库。

布局框架可帮助您设置页面样式，而不是从头开始构建所有内容。
Boostrap

图标库
Font Awesome

基于材料设计的布局框架
Materialize CSS

用于制作（图像）滑块的强大库。
Slick Slider

我希望这对项目有帮助，并祝你好运。

Answer 3

您说，“所以，现在，仅使用HTML5和CSS3以及基本的JavaScript知识”。那你就快到了！

我曾经和你同舟共济，但是遵循这些教程使我摆脱了这种情况：

从这些值得观看的视频开始激发动力：

A。 Web开发从哪里开始？：https://www.youtube.com/watch?v=6HYkN84PGfk&t=1s

B。如何教自己进行网络开发：https://www.youtube.com/watch?v=hEZEZQbMOlQ

这是事情变得严重的地方！ -我的个人建议

注意：按照列出的顺序依次处理所有这些教程确实很重要。

C。客户端：

1. HTML Tutorial for Beginners: https://www.youtube.com/watch?v=dD2EISBDjWM&list=PLr6-GrHUlVf_ZNmuQSXdS197Oyr1L9sPB
2. CSS Tutorial for Beginners : https://www.youtube.com/playlist?list=PLr6-GrHUlVf8JIgLcu3sHigvQjTw_aC9C 
3. JavaScript Tutorial for Beginners: https://www.youtube.com/playlist?list=PLr6-GrHUlVf96NLj3PQq-tmEB6woZjwEl
4. HTML5 Tutorial for Beginners: https://www.youtube.com/watch?v=Sa6lzOe-e70&list=PLr6-GrHUlVf8JluGhfyaOSN8bugLtDXhK
5. JQuery Tutorial for Beginners: https://www.youtube.com/playlist?list=PLr6-GrHUlVf_RNxQQkQnEwUiHELmB0fW1
6. Bootstrap Tutorial for Beginners: https://www.youtube.com/playlist?list=PLr6-GrHUlVf-gjvHuzCnVmeuaeAjRGltv
7. Web Development Tutorials BY EJ Media: https://www.youtube.com/watch?v=5enJfW3weCQ&t=0s&index=59&list=PL_R6vebH6dOa2HEzbaM8bkOc2UOCMwrbn

D。服务器端：

1. Node.js Basics: https://www.youtube.com/playlist?list=PL55RiY5tL51oGJorjEgl6NVeDbx_fO5jR
2. Building a RESTful API with Node.js: https://www.youtube.com/playlist?list=PL55RiY5tL51q4D-B63KBnygU6opNPFk_q
3. NodeJS Shopping Cart: https://www.youtube.com/playlist?list=PL55RiY5tL51rajp7Xr_zk-fCFtzdlGKUp

E。后端：

    1. Oracle
        a. SQL tutorials for beginners/ Oracle Database tutorials: https://www.youtube.com/playlist?list=PLL_LQvNX4xKwbz1aJe0RofbT9YeJH9huQ
        b. PL/SQL Tutorial for beginners By Manish Sharma RebellionRider: https://www.youtube.com/playlist?list=PLL_LQvNX4xKyiExzq9GKwORoH6nvaRnOQ
        c. https://www.youtube.com/playlist?list=PLd3UqWTnYXOn8QxZMCkOGAlsf8E3CBYLw

F。首先建立从Node.js到Oracle数据库的连接：

https://technology.amis.nl/2016/04/03/first-setup-connection-node-js-oracle-database/

        Wish you the best.

需要有关Web开发，网站目录结构的初学者建议

3 个答案:

从这些值得观看的视频开始激发动力：

这是事情变得严重的地方！ -我的个人建议