يتألف الموقع من العديد من الملفات: المحتوى النصي، والنص المصدري، وملفات التصميم (ملفات الأنماط)، والوسائط، والكثير من الملفات الأخرى. عندما تبني موقعك، سوف تحتاج لتجميع جميع تلك الملفات بهيكليّة منطقيّة، وتتأكد من أنَّهم قادرين على الوصول لبعضهم البعض. مقالة التعامل مع الملفات تشرح كيف يمكنك إعداد هيكلة ملفات منطقيّة لموقعك، وما المشاكل التي يجب أن تكون حذر منها.

في أي مكان يجب أن أضع موقعي؟

عندما تكون قيد العمل على موقع محلياً على حاسبك، فيجب عليك وضع جميع الملفات في مجلد واحد يعكس هيكلة الملفات الموجودة على الخادم. يمكنك وضع ذلك المجلد في أي مكان تريد، ولكن يجب أن تحرص على وضعه في مكان يسهل عليك العثور عليه، في سطح المكتب مثلاً، أو في مجلد المنزل، أو في مجلد الجذر على القرص الصلب.

  1. اختر مكان لتحتفظ فيه بملفات المشروع. قم بإنشاء مجلد في ذلك المكان ولندعوه بـ web-projects على سبيل المثال (أو أي شيء مشابه). في هذا المجلد سيكون جميع ملفات مشاريعك.
  2. في نفس المجلد، أنشئ مُجلداً آخر وسمه test-site (أو شيء أكثر دلالةً).

حالة الحروف والمسافات

ستلاحظ خلال هذه المقالة أننا سنخبرك أن تسمي جميع المجلدات والملفات بأحرف صغيرة (lowercase) وبدون مسافات. وهذا بسبب أنَّ:

  1. العديد من الحواسيب، وخاصةً خوادم الويب، حسّاسة لحالة الحروف. فعلى سبيل المثال، إذا وضعت صورة في موقعك في المسار test-site/MyImage.jpg، ومن ثم في ملف آخر حاولتَ استدعاء تلك الصورة بالاسم test-site/myimage.jpg قد لا ينجح الاستدعاء.
  2. الخوادم، وخوادم الويب، ولغات البرمجة لاتتعامل مع المسافات بشكل جيد. فعلى سبيل المثال، إذا قمت باستخدام مسافات خلال كتابتك لاسم ملفك، بعض الأنظمة قد تعامل اسم الملف على أنَّه اسم لملفين. وبعض الخوادم ستستبدل المسافات في اسم ملفك ب "%20" (رمز المسافات في روابط URI)، مما سيؤدي إلى تلف جميع الروابط. من الأفضل الفصل بين الكلمات باستخدام شرطات بدلاً من شرطة السفلية: my-file.html بدلاً من my_file.html.

الجواب القصير أنَّه يجب عليك استخدام شرطة في اسماء ملفاتك. يعامل مُحرِّك البحث جوجل الشرطة على أنَّها فارزة للكلمة، ولكنه لا يعامل الشرطة السفلية بهذه الطريقة. لهذه الأسباب، من الأفضل الاعتياد على كتابة اسماء مجلداتك وملفاتك بدون مسافات وبكلمات منفصلة باستخدام شرطات، على الأقل حتى تبدأ بمعرفة ماذا تفعل (تصل لمرحلة متقدمة قليلاً بالتعلُّم). وبهذه الطريقة ستواجه مشاكل أقل لاحقاً أثناء تعلمك.

كيف يجب أن تكون هكيليّة الملفات لموقعي؟

الآن دعنا نأخذ نظرة على هيكليّة الملفات للموقع التجريبي خاصتنا. أكثر الأشياء شيوعاً التي سنقوم بها في أي موقع هي إنشاء ملف ل.ت.ن.ف (لغة ترميز النص الفائق - HTML) يسمى index ومجلدات تحوي الصور، وملفات التصميم، والملفات البرمجيّة. دعنا الآن ننشئ الأشياء التالية:

  1. الملف index.html: يحوي هذا الملف عادةً على محتويات الصفحة الرئيسية لموقعك، والتي تحتوي على النصوص والصور التي سيراها الناس عندما سيزورون الموقع. استخدم محرِّر النصوص وأنشئ ملفاً جديداً بالاسم index.html ومن ثم احفظه بداخل المجلد text-site.
  2. المجلد images: سيوضع في هذا المجلد جميع الصور التي ستستخدمها في موقعك. أنشئ مجلداً يسمى images بداخل المجلد test-site.
  3. المجلد styles: سيحتوي هذا المجلد على جميع ملفات ص.أ.ا (صفحات الأنماط الانسيابية - CSS) المُستخدمة لتنسيق محتوى الموقع.
  4. مجلد scripts: سيحتوي هذا المجلد على جميع ملفات الجافالسكربت (JavaScript) المُستخدمة لإضافة مزايا تفاعليّة لموقعك (مثال: تحميل بيانات عندما يتم الضغط على أزرار معينة). أنشئ مجلد يدعى scripts بداخل المجلد test-site.

ملاحظة: على الحواسيب بنظام ويندوز قد تواجه صعوبة برؤية اسماء الملفات، وذلك لأنَّ نظام ملفات الويندوز يحتوي على خيار إخفاء لاحقة أنواع الملفات المعروفة مُمكناً بشكل إفتراضي. يمكنك تعطيل هذا الخيار عادةً بالذهاب إلى متصفح ملفات ويندوز واختيار الخيار خيارات المجلد...، وإزالة علامة الصح عن الخيار إخفاء لاحقة أنواع الملفات المعروفة، وبعدها قم بالضغط على موافق. للمزيد من المعلومات حول إصدار الويندوز خاصتك، قم بالبحث في الإنترنت.

مسارات الملفات

لتجعل الملفات تصل لبعضها البعض عليك توفير مسار الملف لكل واحدٍ منهم (أو بمعنى آخر عنوان مكان تواجد كل ملف). لتوضيح هذا، سنضع شيفرة صغيرة في ملف index.html، وسنجعلها تُظهِر الصورة التي اخترتها في مقالة "كيف سيكون مظهر موقعك؟".

  1. انسخ الصورة التي اخترتها وقم بوضعها في المجلد images.
  2. افتح الملف index.html وقم بوضع هذه الشيفرة بداخله (كما أدناه). لا تهتم حيال ما تعنيه تلك الشيفرة حالياً (سنتكلم عنها بالتفصيل لاحقاً في السلسلة).
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>My test page</title>
      </head>
      <body>
        <img src="" alt="My test image">
      </body>
    </html> 
  3. السطر <"img src="" alt="My test image> هو التعليمة التي تُستخدَم لعرض صورة في الصفحة. علينا إخبار ل.ت.ن.ف أيّة صورة نريد. توجد هذه الصورة في المجلد images، والذي يقع في نفس المجلد الذي يوجد فيه الملف index.html. لتستطيع الصفحة أن تصل لمجلد تلك الصورة، نحن بحاجة إلى وضع المسار التالي images/your-image-filename. على سبيل المثال، إن كانت صورتنا تسمى firefox-icon.png إذاً مسار الملف سيكون images/firefox-icon.png.
  4. ضع مسار الملف داخل شيفرة ل.ت.ن.ف بين علامتي التنصيص في التعليمة src=="".
  5. قم بحفظ الملف index.html وقم بفتحه في متصفح الويب (انقر عليه مرتين). يجب أن ترى صفحة ويب جديدة تعرض صورتك.

A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world

بعض القواعد الأساسية لمسارات الملفات:

  • لتربط الملف الهدف الموجود في نفس المجلد الذي يوجد فيه ملف ل.ت.ن.ف، استخدم اسم الملف فقط، مثال my-image.jpg.
  • للإشارة إلى ملف في دليل فرعي، اكتب اسم الدليل في مقدمة المسار، وبعدها شرطة مائلة، مثال: subdirectory/my-image.jpg.
  • لربط الملف الهدف الموجود بمجلد يسبق المجلد الذي يوجد فيه ملف ل.ت.ن.ف، اكتب نقطتين. فعلى سبيل المثال، إذا كان الملف index.html داخل مجلد فرعي في المجلد test-site وكانت الصورة my-image.jpg داخل المجلد test-site، يمكنك الإشارة للصورة my-image.jpg من الملف index.html باستخدام المسار ../my-image.jpg.
  • يمكنك الدمج بين تلك القواعد كما تشاء، على سبيل المثال: ../subdirectory/another-subdirectory/my-image.jpg.

هذا كل ما تحتاج معرفته حالياً.

ملاحظة: يستخدم نظام ملفات ويندوز المائلة الخلفية، وليس الأمامية، مثال C:\windows. هذا لا يهم عند استخدام ل.ت.ن.ف (فحتى عندما تقوم بتطوير موقعك على ويندوز، فعليك استخدام المائلة الأمامية في شيفرتك).

ماذا يجب أن أفعل أيضاً؟

هذا كل شيء للوقت الراهن. هيكيّلة مجلداتك يجب أن تبدو كشيء من هذا القبيل:

A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file

في هذه الوحدة أيضاًEditEdit

Document Tags and Contributors

المساهمون في هذه الصفحة: ahmadnourallah, jwhitlock
آخر مَن حدّثها: ahmadnourallah,