ما هو تخطيط div عند إنشاء موقع ، ومزاياه و

{MEM-1} ما هو "تخطيط div" عند إنشاء موقع ، ومزاياه و {/ MEM}

<footer class = "main-footer">
</html>

علامات HTML الدلالية الأساسية

من بين العلامات "القديمة" من الإصدارات القديمة من HTML ، هناك أيضًا علامات دلالية - على سبيل المثال ، العلامة <p>، التي تشير إلى فقرة. في الوقت نفسه ، تكون العلامات <i>إما <b>غير دلالية ، لأنها لا تضيف معنى إلى النص المحدد ، ولكنها تحدد مظهره ببساطة.

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

<مقالة>

  • المعنى: وحدة دلالية مستقلة وقابلة للفصل ، مثل تعليق ، تغريدة ، مقال ، عنصر واجهة مستخدم VK ، وما إلى ذلك.
  • الميزات: عنوان مرغوب فيه في الداخل.
  • الأخطاء الشائعة: الخلط بين العلامات <section>والعلامات <div>.

<القسم>

  • المعنى: القسم الدلالي من الوثيقة. غير قابل للفصل ، بخلاف <مقالة>.
  • الميزات: عنوان مرغوب فيه في الداخل.
  • الأخطاء الشائعة: الخلط بين العلامات <article>والعلامات <div>.

<جانب>

  • المعنى: الجانب ، المحتوى غير المباشر للصفحة.
  • الميزات: قد يكون لها عنوان خاص بها. قد تظهر عدة مرات على الصفحة.
  • الأخطاء الشائعة: تعامل معه على أنه <aside>علامة لـ "الشريط الجانبي" واستخدم هذه العلامة لتمييز المحتوى الرئيسي المرتبط بالعناصر المحيطة به.

<ناف>

  • المعنى: قسم التنقل به روابط إلى صفحات أخرى أو أجزاء أخرى من الصفحات.
  • الميزات: مستخدمة للتنقل الرئيسي ، وليس لجميع مجموعات الروابط. العامل الرئيسي هو التنقل أم لا - وفقًا لتقدير مصمم التخطيط. على سبيل المثال ، لا يمكن تغليف القائمة الموجودة في تذييل الموقع <nav>. تظهر عادةً قائمة مختصرة من الروابط في التذييل (على سبيل المثال ، رابط إلى الصفحة الرئيسية وحقوق النشر والشروط) - ليس هذا هو التنقل الرئيسي ، من حيث المعنى ، فهو مخصص لهذه المعلومات في <footer>حد ذاته.
  • أخطاء نموذجية: يعتقد الكثير من الناس أنه لا <nav>يمكن أن يكون هناك سوى قائمة روابط التنقل ، ولكن وفقًا للمواصفات ، يمكن أن يكون هناك تنقل بأي شكل.

<رأس>

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

<رئيسي>

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

<footer>

  • المعنى: يحتوي الجزء الأخير من القسم الدلالي أو الموقع بأكمله على معلومات حول المؤلفين وقائمة بالمراجع وحقوق النشر وما إلى ذلك. غالبًا ما يتكرر في جميع صفحات الموقع.
  • الميزات: يمكن أن يكون هناك العديد من هذه العناصر على الصفحة. <footer>لا يجب أن تكون العلامة في نهاية القسم.
  • أخطاء نموذجية: استخدم فقط كتذييل موقع.

كيفية ترميز الصفحة من حيث الدلالات

يمكن تقسيم عملية الترميز إلى عدة خطوات بدرجات متفاوتة من التفاصيل.

  1. كتل دلالية كبيرة في كل صفحة من صفحات الموقع. العلامات <header>, <main>, <footer>:.
  2. أقسام دلالية كبيرة في كتل. العلامات <nav>, <section>, <article>, <aside>:.
  3. عنوان الوثيقة بأكملها وعناوين الأقسام الدلالية. العلامات <h1>-<h6>:.
  4. عناصر صغيرة في الأقسام الدلالية. القوائم والجداول والعروض التوضيحية والفقرات والواصلات والنماذج والاقتباسات ومعلومات الاتصال والتقدم.
  5. عناصر العبارة. الصور والروابط والأزرار ومقاطع الفيديو والوقت وعناصر النص الصغيرة.

غير متأكد من العلامات التي يجب استخدامها

هناك قواعد بسيطة لاختيار العلامات الصحيحة.

  • اتضح للعثور على العلامة الدلالية الأنسب - استخدمها.
  • لحاويات التدفق - <div>.
  • لعناصر الجمل الصغيرة (كلمة أو عبارة) - <span>.

حكم لتحديد <article>, <section>و <div>:

  1. هل يمكنك تسمية القسم ونقل هذا القسم إلى موقع آخر؟ - <article>
  2. هل يمكنك تسمية قسم ولكن لا يمكنك نشره في موقع آخر؟ - <section>
  3. لا يمكنك إعطاء اسم؟ اتضح أن شيئًا مثل "الأخبار ومعرض الصور" أو "العمود الأيمن"؟ - <div>

كيف بالضبط لا تفعل

لا تستخدم العلامات الدلالية للزينة. هذا ما هو CSS.

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

يوجد العديد من الأخطاء هنا:

  1. يجب استخدام العلامة <blockquote>لإبراز الاقتباسات في النص ، وليس مجرد الاختيار العشوائي للنص. من قبيل الصدفة ، يتم تمييز هذا الحظر افتراضيًا في المتصفحات ، لكن هذا لا يعني أنك بحاجة إلى استخدامه بهذه الطريقة.
  2. تُستخدم العلامة <ul>أيضًا في "التحول" المرئي للنص. هذا غير صحيح ، لأنه يجب استخدام هذه العلامة فقط لتعيين القوائم ، وثانيًا ، <ul>يمكن دمج العلامات فقط في علامة <li>وليس أي شيء آخر.
  3. يتم استخدام العلامة <p>لتوسيع النص بصريًا. في الواقع ، يتم استخدام هذه العلامة لتمييز الفقرات.

ويمكن إجراء أي تحديد أو تحويل أو أي تحويلات نصية أخرى باستخدام CSS.

لذلك ، استخدم العلامات الدلالية على النحو المنشود.


بمزيد من التفصيل ، تم وصف تقنية إنشاء العلامات الدلالية في مهارة "إنشاء العلامات الدلالية حسب التخطيط" ودورات أكاديمية HTML. يمكنك البدء بمدربين مجانيين على أساسيات HTML و CSS أو بدورة " تصميم موقع احترافي ". ومع الرمز الترويجي SKUCHNO ، سيصبح السعر أكثر متعة.

بعد كل شيء ، نحن نعيش مرة واحدة فقط.

<title> عنوان الصفحة </ title>
<! - رأس الموقع ->
<! - تذييل الموقع ->
</footer>
<main>
</main>

منذ وقت طويل (قبل خمسة عشر عامًا) أنشأ الجميع مواقع ويب تقريبًا ولم يقلقوا بشأن ما كان موجودًا تحت الغطاء. لقد ابتكروا الجداول ، واستخدموا كل ما هو متاح (ولكن في الغالب تم العثور على <div> و <span>) ولم يهتموا حقًا بإمكانية الوصول. ثم حدث HTML5 ونذهب بعيدًا.

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

إخلاء المسؤولية: قد تسيء المقالة إلى أولئك الذين أصبحوا متعلقين بتخطيط المغنيات. لكن <div> ليست جملة ، ولا ندعو إلى التخلي عنها تمامًا. حسنًا ، يمكنك دائمًا الموافقة.

لماذا الدلالات مهم

لجعل الموقع سهل الوصول إليه. يمكن للمستخدمين المبصرين أن يفهموا بسهولة بلمحة مكان أي جزء من الصفحة - أين العنوان أو القوائم أو الصور. بالنسبة للمكفوفين أو المكفوفين جزئيًا ، كل شيء أكثر صعوبة. الأداة الرئيسية لتصفح المواقع ليست متصفحًا يعرض صفحة ، بل قارئ شاشة يقرأ النص من الصفحة بصوت عالٍ.

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

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

المثال الكلاسيكي هو جدول قطار Sapsan في نتائج بحث Google.

قام مطورو tutu.ru بتكوين الجدول بالعلامة <table>بدلاً من ذلك <div> وانتهى الأمر بمقتطفهم في نتائج بحث Google لطلب تجاري مهم.

تمت كتابة الدلالات في المعايير. يستخدم العديد من المطورين إنشاءات الكتابة بالطريقة القديمة <div id="nav">للإشارة إلى التنقل أو العناصر الهيكلية الأخرى للصفحة. في غضون ذلك ، يحتوي معيار HTML على العديد من العلامات الدلالية الموصى بها لترميز الصفحة بدلاً من <div>و <span>. تصف المواصفات لكل عنصر دلالي دوره.

حسنًا ، تخيل مدى سهولة القراءة <nav></nav>بدلاً من القراءة <div class="nav"></div>. أو هذا هو الرمز. انظر وفهم على الفور ما هو موجود ولماذا.

<!DOCTYPE html>
    </header>
      <!— Основное содержимое страницы —>
    <header class="main-header">

 

تعد الطبقات التي تم إنشاؤها باستخدام علامة DIV عناصر هيكلية مريحة للغاية ، ويتم تصميمها باستخدام أوراق الأنماط (CSS) التي تصفها. نعم ، هذا أصعب من العمل بالجداول ، لكن فوائد النتيجة التي تم الحصول عليها باستخدام هذا الأسلوب أكبر بكثير.

 

إمكانية إنشاء تصميم متكيف. الاتجاه الذي ظهر قبل بضع سنوات في شكل إنشاء مواقع جوال خاصة على نطاق فرعي تبين أنه لا يمكن الدفاع عنه وغير فعال. تم استبداله بمفهوم "التصميم التكيفي" أو التصميم المتجاوب ، والذي يتمثل جوهره في إنشاء تخطيط يتم عرضه بشكل صحيح بشكل متساوٍ على الأجهزة ذات دقة الشاشة المختلفة - من أجهزة الكمبيوتر الثابتة إلى الهواتف الذكية أو الأجهزة اللوحية.

 

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

 

عند استخدام div-block ، يكون كل شيء منطقيًا ومفهومًا بشكل أكبر ، ويتم تقليل رمز الصفحة نفسه عدة مرات - يتم وضع الجزء الرئيسي من وصف المظهر المرئي في ملف css يتم تحميله مرة واحدة ثم يتم تخزينه مؤقتًا بواسطة المتصفح. وبالتالي ، لا ينخفض ​​وقت تحميل الصفحة فحسب ، بل ينخفض ​​أيضًا الحمل على الخادم.

 

سهولة تغيير العناصر. يمكنك تغيير أي من عناصر مظهر تخطيط الموقع تقريبًا عن طريق تحرير ملف النمط ، على سبيل المثال ، لتحريك الكتلة على الجانب الأيمن ، يكفي استبدال float: left بـ float: right. باستخدام الجداول ، ستكون مثل هذه التلاعبات تستغرق وقتًا طويلاً ويصعب تنفيذها.

 

أدى اعتماد مفهوم الويب الدلالي والانتقال إلى التخطيط الدلالي إلى تغييرات كبيرة في مجال تصميم الويب ، سواء من حيث النهج أو التكنولوجيا. تم استبدال الطريقة المجدولة ، باعتبارها الأكثر استخدامًا ، بالتخطيط باستخدام الكتل (علامة div) و CSS ، أو ما يسمى تخطيط الكتلة.

 

ولكن ، مثل كل شيء في عالمنا ، فإن تخطيط DIV ليس حلاً سحريًا وحلاً لجميع المشكلات ، فهذه التقنية لها أيضًا عدد من العيوب:
صعوبات في الإتقان. إذا كان بإمكان المبتدئ في بناء الموقع البدء في العمل مع الجداول ، فسيكون من الصعب إتقان الطبقات ، وتتطلب إدارة الكتلة معرفة جيدة ليس فقط بـ HTML ، ولكن أيضًا بـ CSS. ومع ذلك ، تقدم Cascading Style Sheets العديد من الميزات التي تستحق بالتأكيد قضاء بعض الوقت في تعلمها.

 

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

 

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

 

 

قراءة الكود. سيتوافق تخطيط الموقع الذي تم إنشاؤه باستخدام تخطيط الكتلة الصحيح مع معايير صلاحية W3C ، كما أن مقدارًا أقل من التعليمات البرمجية وترميزها المنطقي يبسط الإدراك المرئي من جانب المطور. لا توجد تركيبات معقدة من أكوام العلامات ، فالشفرة مضغوطة وقابلة للقراءة. من الجيد حقًا العمل مع هذا.

 

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

 

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

 

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

 

ما هو تصميم الموقع وكيف يتم ذلك؟

كيف تصنع موقعا؟ نقدم تعليمات وأدوات خطوة بخطوة لعمل مصمم التخطيط.

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

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

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

يمكن أن تكون العناصر المعروضة على المواقع على النحو التالي:

  • الجداول.
  • العناوين.
  • الصور.
  • الرسوم البيانية.
  • نص.

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

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

إن أبسط أداة تخطيط هي لغة ترميز HTML. HTML هو المعيار العالمي لعرض العناصر لأي موقع. باستخدامه ، تتيح متصفحات الإنترنت إظهار المستخدم:

  • خط النص.
  • شكل نصي.
  • ترتيب.
  • الحجم.

علامات HTML الأكثر شيوعًا هي:

  • <h1> </h1> هو عنوان النص.
  • <h2> </h2> - الترجمة.
  • <strong> </strong> - نص عريض معروض على الموقع.
  • <body> </body> هو محتوى صفحة الويب.
  • <img> هي صورة على مورد ويب.
  • <a> </a> رابط إلى مصدر إنترنت آخر. بين هذين الحرفين يجب وضع تعريف "href". سيتضمن عنوان هذا الرابط.

أنواع التخطيط

يوجد اليوم نوعان رئيسيان من المصالحة:

  • حاجز.

يعد تخطيط الكتلة طريقة أكثر حداثة من التخطيط الجدولي ، لأنه عند إنشاء تخطيط من صفحة واحدة ، لا تحتاج إلى استخدام دعم إضافي في شكل أعمدة وصفوف إضافية. العلامة الرئيسية لتشكيل محتوى الموقع هي <div>.

يساعد على تحديد الموقع الدقيق وحجم جميع العناصر.

جنبا إلى جنب مع تخطيط الكتلة يأتي CSS. بفضل CSS ، يغير مصممو التخطيط حدود العناصر ، والأحجام ، والألوان ، والمواضع ، والخصائص المختلفة للكتل <div>.

الكتل تجعل الكود أكثر بساطة. يساهم هذا الظرف في حقيقة أن جميع المتصفحات تحظر قراءة صفحة واحدة بشكل أسرع بكثير من مواقع الويب التي تم إنشاؤها باستخدام طريقة الجدول.

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

  • مجدول.

باستخدام التخطيط الجدولي ، يتم إنشاء أبسط صفحات الويب. جوهرها: ينقسم الموقع إلى خلايا قريبة. تشبه هذه الخلايا إلى حد ما جداول البيانات الموحدة في Excel.

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

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

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

مزايا الطريقة المجدولة:

  1. سهولة إنشاء مورد ويب. حتى أكثر المبرمجين المبتدئين سوف يتعاملون مع مهمة إنشاء صفحة ويب باستخدام تخطيط جدولي.
  2. هذه الطريقة مثالية لتصميم المطاط. أي عندما يتم تمديد نافذة متصفح الويب ، يغير الجدول موقعه في الفضاء معه. العناصر الموجودة فيه تغير موضعها تلقائيًا.

مراحل التخطيط

تتكون المحاذاة من الخطوات الرئيسية التالية:

  • صف دراسي.

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

هناك طريقتان رئيسيتان للحصول على الصور: التنزيل بالشكل النهائي على مواقع الإنترنت المختلفة ، وإنشاء مصممي التخطيط بأيديهم. الطريقة الثانية تتطلب الحد الأدنى من الإبداع ، ولا يمتلكها كل متخصص.

  • تشريح الصور.

بعد المرحلة الأولى ، يتم تحديد نوع الرسم. عادةً ما يتم استخدام هذه التنسيقات الثلاثة: jpg و png و gif. يتم حفظ شرائح الصور في مجلد سيتم استخدامه لإنشاء جهاز بيجر واحد في المستقبل. إذا لزم الأمر ، يتم دمج الصور في نقوش متحركة لمزيد من الراحة.

  • إنشاء إطار موقع على شكل كتل.

للقيام بذلك ، يقوم المبرمج في مستند html بتنضيد الكتل الفارغة للمحتوى والقوائم اليمنى واليسرى والتذييل والرأس. بعد الانتهاء من هذه الخطوات ، تظهر بنية موقع الإنترنت المستقبلي في شكل هيكل عظمي.

  1. تعبئة الحاويات بالصور.
  2. توفير مورد ويب مع وظائف عبر المستعرضات.

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

  • إصلاح الأخطاء وتصحيحها.

أهم مرحلة مسؤولة. إذا انتهى بك الأمر بمنتج "عربات التي تجرها الدواب" للغاية ، يمكن أن يذهب كل العمل إلى البالوعة. أفضل مدقق للتحقق من ترميز html هو https://i2.wp.com/validator.w3.org/.

كيفية إنشاء موقع على شبكة الإنترنت: تعليمات خطوة بخطوة

خوارزمية إنشاء موقع الويب:

  1. تشكيل مجلد باسم قالب المورد المستقبلي. يتم إنشاء المجلد في دليل جذر WP (wp-content-> theme).
  2. تشكيل الملفات الأولى: screenshot.png ، styles.css ، index.php ، function.php.
  3. إنشاء ملفات إضافية. هناك حاجة لعرض النتيجة وتطويرها.
  4. إضافة البرامج النصية التالية إلى العنوان: is_front_page (مطلوب للتحقق ، عرض الصفحة الرئيسية) ، wp_nav_menu (تكوين القائمة) ، bloginfo (لعرض المعلومات بين قوسين) ، wp-head (يبدأ في إضافة أنماط js ، البرامج النصية) ، apple_filters (إلى ضبط الإعدادات).
  5. إعداد النموذج.
  6. أنماط التحميل.

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

أدوات المبرمج

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

أفضل برنامج (محرري الكود) لمصمم التخطيط:

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

 

وبالتالي ، فإن إضافة الجدول هي سهولة العرض.

 

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

 

تعويم: صحيح ؛

بادئ ذي بدء ، سأقول أن هذا المقال هو مجرد بعض التفكير في الموضوع. يحدث أنه عند طلب التنسيق ، يقول الناس إنهم بحاجة إلى تنسيق على divs ، على الرغم من أنه عندما تسأل السؤال "لماذا؟" ، لا يستطيع سوى القليل الإجابة. سيكون هذا المقال مفيدًا لأولئك المستعدين للموافقة على عبارة "سمعت رنينًا ، لكنني لا أعرف مكانه". لست متأكدًا من أن هذه المقالة ستكون ذات فائدة لأولئك الذين ليسوا على دراية بـ HTML على الإطلاق ، لأنهم ربما لديهم بالفعل سؤال "ما هي div والجدول".

في مرحلة معينة من تطوري ، بصفتي مصمم تخطيط html ، واجهت السؤال "ما هي أفضل طريقة لتنضيد مواقع الويب": هل يجب أن أستخدم تخطيط "div" أم تخطيطًا يعتمد على علامة الجدول؟ بعد قراءة قدر معين من المعلومات حول هذا الموضوع ، وكذلك بناءً على تجربتي الخاصة في تخطيط html ، يمكنني قول شيء واحد فقط: كل هذا يتوقف على المهمة التي يواجهها مصمم التخطيط. لنلقِ نظرة على ماهية TABLE وما هو DIV ، ونحاول معرفة متى وماذا نستخدم.

الطاولة

الميزة التي لا جدال فيها للتخطيط المستند إلى الجدول هي بساطته لمصمم التخطيط. بعد كل شيء ، المواقع التي عادة ما يواجهها المبتدئون يمكن تمثيلها بسهولة في شكل جدول مشابه:

العرض: 150 بكسل

رأس الموقع

 
            

العمود الأيسر

 
            
#العمود الأيمن {

إعلان الجدول ، وإعلان الصف ، وإعلان الخلية ، وعندها فقط يأتي النص نفسه. وهذا أبسط مثال. لقد صادفت مواقع يوجد فيها أيضًا جدول وآخر في كل خلية من هذا القبيل. بشكل عام ، يمكننا القول أنه يتم فرض علامة ناقص كبيرة إلى حد ما على علامة زائد لا يمكن إنكارها - وهذا هو ضخامة كود html النهائي وقابلية القراءة الضعيفة للشفرة المرتبطة بذلك. وتجدر الإشارة أيضًا إلى أنه مع الاستخدام المتكرر لعلامة الجدول ، يصبح حجم صفحة html كبيرًا جدًا في النهاية. على الرغم من تطور التكنولوجيا ، لم تعد هذه المشكلة حادة كما كانت في السابق.

#العمود الأيسر {
تعويم: اليسار؛

يبدو أبسط بكثير من إصدار الجدول. ومن ثم ، فإن ميزة كبيرة تتمثل في سهولة تحليل كود html. ومع ذلك ، إذا أدخلنا مثل هذا HTML "المجرد" في الصفحة ، فسنرى شيئًا مشابهًا لما يلي:

العمود الأيمن

العمود الأيمن

 
            

DIV

ومع ذلك ، إذا نظرت إلى كود html للصفحة ، فإن ألوان قوس قزح هذه تتلاشى قليلاً بالفعل:

الانتباه! المقال طويل وعفا عليه الزمن بشكل لا رجعة فيه! غادر هنا من باب الشفقة على العمل المنجز في وقته.

العمود الأيمن

العرض: 150 بكسل
}
عمود المركز

من التعليقات مدعوم من

# عمود مركزي {
الهامش: 0 150 بكسل ؛
}
#تذييل {
واضحة على حد سواء؛
}

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

TABLE مقابل CSS

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

TABLE أفضل من DIV للأسباب التالية:

  • من الأسرع تكوين التخطيط في البداية بسبب العرض التقديمي الجيد (على الرغم من عدم وجود فرق لمصمم تخطيط أكثر أو أقل خبرة).
  • القدرة على تحديد خلفية لكل عمود ، والتي ستمتد في الارتفاع خلف بقية الأعمدة ، وفي نفس الوقت ، سيحافظ عرض العمود على النسبة المئوية. بمعنى ، في حالتنا ، لنفترض أن الأعمدة ستكون من الألوان التالية:
رأس الموقع
العمود الأيسر عمود المركز

نص في العمود الأوسط نص في العمود الأوسط نص في العمود الأوسط نص في العمود الأوسط نص في العمود الأوسط نص في العمود الأوسط نص في العمود الأوسط

العمود الأيمن
تذييل الموقع

في الوقت نفسه ، يبلغ عرض العمود الأيسر 20٪ والعمود المركزي 60٪ والعمود الأيمن 20٪. من المستحيل كتابة هذا على divs بدون استخدام JavaScript. صدقني ، لقد حاولت. شيء آخر هو أن مثل هذا الإطار الجامد لا يحدث أبدًا. في كثير من الأحيان ، إذا كنت بحاجة إلى مثل هذا "الصرامة" في الارتفاع ، فسيتم أخذ بعض القيم الثابتة في عرض العمود ، ولكن هنا يمكنك بالفعل تفادي وإنشاء div.

  • للتخطيط على الجداول ، لا تحتاج إلى معرفة CSS. بشكل عام ، من حيث المبدأ ، يمكنك الحصول على HTML واحد. على الرغم من أنك بعد ذلك يمكن أن تتعرض لانتقادات شديدة وسخرية من المتخصصين في مجال التخطيط.

DIV أفضل من TABLE للأسباب التالية:

  • من الأسهل فهم ملف CSS الناتج ، مما يؤدي إلى "تحميل" الصفحة بشكل أسرع لأي نظام صيانة (وبالنسبة لأولئك الذين لا يستخدمون CMS ، يتم إنشاء صفحات جديدة بشكل أسرع). بالإضافة إلى ذلك ، عند إجراء أي تغييرات ، يكون من الأسهل معرفة "ما يتم لصقه في مكانه".
  • وزن صفحة أتش تي أم أل أخف. ومع ذلك ، من الجدير بالذكر. على الرغم من حقيقة أن ملف CSS ينمو في النهاية ، إلا أنك هنا تحتاج إلى الانتباه إلى الحقيقة التالية: يتم تحميل ملف CSS مرة واحدة أثناء الزيارة الكاملة للموقع للعديد من الصفحات. لذلك ، بشكل عام ، ستكون سرعة تحميل الصفحة أسرع.
  • تظهر الصفحة للمستخدم أثناء تحميلها. خلاصة القول هي أن بعض المتصفحات لا تعرض الجدول حتى يتم تحميل علامة الإغلاق الخاصة به. إذا كانت الصفحة بأكملها ملفوفة في علامة جدول ، فحينئذٍ حتى يتم تحميل نص الصفحة بالكامل ، سترى لون الخلفية فقط. أعتقد أن كل شخص كان في موقف يظهر فيه الموقع على شكل أجزاء ، كما لو كان يتجمع أثناء التحميل. هذا موقع مصنوع من divs. بشكل عام ، أعتقد شخصيًا أن هذه علامة زائد مشكوك فيها ، لكن يعتقد الكثير من الناس أن هذه ميزة إضافية لـ divs ، فليكن ذلك.

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

لذلك ، استنتاجي هو: هناك وقت - الخوض في divs ، تحتاج إلى ذلك بسرعة - يمكنك تجاوز الجداول.

 
            
تذييل الموقع

رأس الموقع

العمود الأيسر

عمود المركز

العمود الأيمن

تذييل الموقع

تذييل الموقع

}
 
            
                               رأس الموقع
 
            
 
            
 
            
 
            
 
            
 
            
 
            
 
            
 
            
 
            

Site HeaderCentral ColumnLeft Column Central Column Central أوافق ، قليلاً ليس ما كنا نتوقع رؤيته. البطاقة الرابحة لتخطيط div هي الاستخدام الصحيح لـ CSS. بإضافة الكود التالي إلى ملف css ، يمكننا الحصول على عرض مشابه لذلك الموجود في الجدول: Left column

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

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

تخطيط الموقع هو عملية تكوين صفحات الويب الخاصة به وفقًا لقالب تم إنشاؤه بواسطة المصمم. يشارك هذا النوع من النشاط في تخطيط المواقع. تتمثل المهمة الرئيسية لمصمم التخطيط في إنشاء كود HTML يسمح لك بوضع نصوص وصور وعناصر أخرى لصفحة الويب في أماكن معينة في المستند وعرضها في نافذة أي متصفح إنترنت حديث وفقًا للتخطيط الذي تم تطويره بواسطة المصمم. أثناء عمله ، يجب على مصمم التخطيط أن يضمن باستمرار عرض جزء التخطيط الذي وضعه بشكل متساوٍ في جميع المتصفحات. قبل بضع سنوات ، كان تخطيط HTML للموقع يعتمد على استخدام الجداول. بمرور الوقت ، تظهر عناصر (علامات) جديدة في لغة HTML. أحد هذه العناصر هو div. إذا كان تخطيط div على مدار السنوات الماضية هو الأفضل عند إنشاء صفحات الموقع ، فهو اليوم إلزامي. في الوقت الحالي ، بمساعدة الجداول ، لا يتم من الناحية العملية طباعة المواقع. بدلاً من مفهوم "تخطيط div" ، غالبًا ما يتم استخدام مفهوم "تخطيط الطبقة" أو "تخطيط الكتلة".

div عبارة عن علامة يمكن استخدامها لتمييز جزء واحد من كود HTML الخاص بالصفحة. هذه العلامة هي عنصر كتلة.

لعلامة div خياران رئيسيان:

  • المحاذاة ، والتي تسمح لك بمحاذاة محتواها (على طول الحافة اليسرى أو اليمنى للصفحة ، في المنتصف أو المبرر) ؛
  • العنوان الذي يضيف تلميحًا إلى محتواه.

تخطيط div: المزايا الرئيسية:

  • رمز ترميز صغير مقارنة بالتخطيط الجدولي ؛
  • القدرة على إنشاء تصميم صفحة "مطاطية" ؛
  • التحميل السريع اللاحق للصفحات في متصفح المستخدم ؛
  • تسهيل العمل باستخدام الأنماط (CSS) ، وتعيين نمط للعناصر باستخدام المعرف.

تخطيط div: السلبيات الرئيسية:

  • عدم القدرة على عرض الصفحة بشكل صحيح في بعض المتصفحات القديمة (IE6) ؛
  • تعقيد وضع الكتل على الصفحة وإدارتها.

اعتمادًا على المشروع الذي يتم إنشاؤه ، يُسمح بمجموعة من التخطيط الجدولي والكتل.

لماذا يبتعد معظم المحترفين الآن عن استخدام الجداول في التخطيط؟

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

يعد تخطيط موقع الويب خطوة مهمة في إنشائه ؛ فلا يمكن لمورد إنترنت واحد ، حتى أبسط ، الاستغناء عنه. بعد اكتمال عمل مصمم التخطيط ، يتم إرسال التصميم إلى أيدي مبرمجي الويب ، الذين يضمنون اندماجه في الاستضافة والتنفيذ في نظام CMS ، والذي سيبقى عليه طوال فترة وجوده.

يبدأ Layout رحلته من الوقت الذي تمت فيه كتابة التعليمات البرمجية بلغة HTML ، وتم تنفيذ الترميز باستخدام الجداول. بمرور الوقت ، ابتعدوا عن هذا ، وتم نقل الترميز إلى CSS. الآن هناك عدة أنواع من التخطيط. يعد كل من Flex-box ومجموعة أدوات Bootstrap وأحدث الشبكات من أحدث التقنيات ، مما يمنح المبدعين قوة كبيرة. أحد الخيارات الانتقالية في تطوير الويب هو تخطيط الكتلة. كانت تُستخدم سابقًا لإنشاء ترميز صفحة كاملة ، وتعتبر الآن قديمة ، ولكنها مع ذلك لا تزال تستخدم على نطاق واسع في حالات خاصة.

ما هو تخطيط الكتلة؟

استبدلت الجداول القديمة والناقصة. تتكون الصفحة مما يسمى الطبقات أو الكتل ، وعلامة الإغلاق <div> بمثابة لبنات بناء لهذا الغرض. هذه علامة كتلة تشغل العرض الكامل للعنصر الأصل والارتفاع لملاءمة المحتوى. في وقت لاحق ، تم تسمية هذا التصميم "الرائع". أساس اتجاه الصفحة هو ما يسمى بالفصول.

في الوقت الحالي ، يعد هذا النوع من التخطيطات قديمًا بشكل كبير ، ويجب استخدام علامة <div> نفسها للغرض المقصود منها فقط. ظهرت الكثير من العلامات الصحيحة لغويًا والتي تسهل التنقل في الشفرة. على سبيل المثال ، هناك علامة <nav> خاصة لقائمة التنقل.

هيكل الصفحة الأساسي

من أجل الوضوح ، يمكن تمثيل تخطيط الكتلة على النحو التالي:

<div class = "wrapper">

<div class = "element1"> محتوى </ div>

<div class = "element2"> محتوى </ div>

<div class = "element3"> محتوى </ div>

</div>

يمثل div مع فئة مجمعة حاوية رئيسية ، أو بمعنى آخر غلاف. العناصر التي تحتوي على فئة العنصر هي اللبنات الأساسية لهيكلنا المعقد. يرجى ملاحظة أن المسافة البادئة المختلفة من الحافة ، مقارنة بالعنصر الأصلي ، تُستخدم في الكود من أجل الوضوح ، بحيث يكون من السهل تحديد هيكل العناصر وتسلسلها الهرمي.

باستخدام الجداول

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

تخطيط الجدول مرهق للغاية

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

فصل الأدوار

حيث كان يتم إجراء كل الإنشاءات في HTML ، كان تخطيط الكتلة يجلب معه فصلًا كاملاً للأدوار. في الوقت الحالي ، HTML مخصص فقط للترميز والتنسيق المنطقي وهيكل الصفحة. يتم تقديم الأنماط بالكامل ويتم تضمينها في ملف منفصل مضمن في المستند. يتم استخدام CSS لوضع العناصر وإنشاء تصميم جذاب وسريع الاستجابة. للإشارة إلى الكتلة ، يتم استخدام الفئات ، والتي يتم إعطاؤها اسم العنصر. على سبيل المثال ، بالنسبة للكتلة header ، سنقوم بتعيين فئة header. كما أنه يجعل من السهل التنقل عبر الكود. الآن ، يتم ذلك جزئيًا عن طريق العلامات المتخصصة التي ظهرت في HTML5.

باستخدام كتل <div>

في تخطيط الكتلة ، يتم استخدام علامة <div> بنشاط. إنه مشابه للطوب أثناء تشييد المبنى. تشكيل الأساس وتصميم الموقع ، ومع ذلك ، فهو ليس الوحيد. مثل الأبواب والنوافذ والتهوية والشرفة وما إلى ذلك ، يتم استخدام عناصر HTML الأخرى للتخطيط. هذه هي الروابط والنماذج والصور والقوائم والجداول.

سمح لنا استخدام العلامة <div> بجعل الكود أكثر إحكاما ومرئية. أتاح لنا الانتقال إلى تخطيط الكتلة التخلص من الأشياء الزائدة عن الحاجة ، وهي الأنماط. جعل من الممكن إزالة التخطيط الجدولي المحمّل بالكامل ويصعب التنقل فيه.

مقارنة بين تخطيط الكتلة والجداول

يستخدم بنشاط تخطيط كتلة CSS. باستخدام الأدوات المتاحة ، يمكنك إنشاء أي تخطيط للصفحة بدقة بكسل. هذا التخطيط يسمى بكسل الكمال. إنه يعني تطابقًا تامًا بين الموقع والتخطيط. توضح الصورة أعلاه أن تخطيط الكتلة ليس بهذه البساطة أيضًا. في البداية ، كان من المستحيل الاستغناء عن الطاولات. تم استخدامها لإنشاء البناء الأساسي للصفحات ، وتم استخدام الكتل للعناصر الفردية. لذلك كان الأمر كذلك حتى تعلمنا كيفية تعيين ارتفاع الكتل.

مزايا

يتميز تخطيط الكتلة للموقع بالمزايا التالية:

  • لا توجد حدود شفافة بعرض البكسل ، كما كان الحال مع جداول التخطيط.
  • من السهل وضع الكتل بالنسبة لبعضها البعض.
  • يمكن تغيير حجم الكتل ، مما يسمح لك بإنشاء تصميم سريع الاستجابة.
  • لا تؤدي القدرة على التداخل مع بعضها البعض إلى تعطيل بناء الصفحة ، ولكنها تتيح لك إضافة تأثيرات مثيرة للاهتمام.
    تخطيط الكتلة

مزيد من التطوير

أصبح تخطيط block div قديمًا الآن وله استخدام محدود فقط ، كحالة خاصة فقط في مواقف معينة. تم استبداله من خلال تحديد المواقع والتفاف في التخطيط. كان لديهم الكثير من أوجه القصور ، لكن بشكل عام سمحوا بأكثر من تخطيط الكتلة.

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

حاليًا ، يتم استخدام Flex-box و bootstrap لبناء الصفحة. إنها تقلل الشفرة بشكل كبير وتجعل إنشاء تصميم سريع الاستجابة عالي الجودة أسرع وأسهل. أنها تجعل من الممكن نقل الكتل دون كسر الصفحة بأكملها.

مثال على التخطيط على الشبكات

في طليعة التقدم التكنولوجيا الجديدة - الشبكات. يسمح لك بإنشاء تصميم لأي تعقيد بسرعة وسهولة. والكتل ، واللف ، والموضع ، كما حدث مع الجداول في وقت واحد ، تستخدم فقط للغرض المقصود منها.

# menu {
float: left؛
#navigation {#header {
<
div id = "clear">
<h2> رأس </ h2>
height: 100px؛

 

تخطيط الكتلة أو أساسيات تشريح الهيكل العظمي للمواقع

المواقع لها هيكل عظمي خاص بها. لكن لا جدوى من سؤال الأطباء عن ميزاته. نعم ، والأطباء البيطريون ليسوا على علم بهيكل الموقع. هذا معروف فقط لمصممي التخطيط. يعتمد عليهم هيكل الهيكل العظمي للمورد المستقبلي. والطريقة الرئيسية لإنشاء عظام هيكله العظمي هي تخطيط الكتلة.

  • تخطيط الموقع هو حرفة مخصصة
    • كيف يعمل تخطيط الكتلة؟
    • عشيرتك!

هناك شيء غامض في تخطيط الموقع. ولكن هذا حتى تتعرف على هذه الحرفة بشكل أفضل. لنبدأ تفانينا:

تخطيط الموقع هو حرفة مخصصة

الخطوة التالية في تطوير الموقع بعد إنشاء تخطيطه هي التخطيط. تتمثل مهمة مصمم التخطيط في نقل الهيكل العظمي للموقع المستقبلي إلى العالم الافتراضي باستخدام كود html وجداول css. ببساطة ، قم بنقل حجم ونسب المورد إلى شكل يمكن فهمه للمتصفح.

في عملية التصميم باستخدام كود html ، يتم تقسيم "الهيكل العظمي" للموقع إلى أجزاء. وبمساعدة css (أوراق الأنماط المتتالية) ، يتم تعيين حجم "عظامها" ولونها وموقعها.

هناك عدة أنواع من التخطيط:

جدولي - كانت طريقة التخطيط الرئيسية في السابق. في التخطيط الجدولي ، تُستخدم علامة <table> وعلاماتها الفرعية لتعيين بنية الموقع. يتيح لك التخطيط باستخدام الجداول ترتيب جميع عناصر التصميم بشكل متناسب مع بعضها البعض. لكن في الوقت نفسه ، تبين أن هذا الرمز ضخم جدًا:

تصميم الموقع - حرفة للمبتدئين - 2

أيضًا ، تشمل العيوب الرئيسية للشفرة الجدولية التحميل الطويل والفهرسة الضعيفة للمحتوى بواسطة محركات البحث.

لن يتم عرض محتوى الصفحة المستندة إلى الجدول حتى يتم تحميل كافة البيانات. يسمح لك تخطيط الكتلة بعرض كل عنصر تم تحميله على حدة.

تفسر الفهرسة الضعيفة للصفحات المجدولة بوجود فجوات كبيرة بين كتل النص الموجودة في خلايا مختلفة من الجدول.

الآن نادرًا ما يتم استخدام verst الجدولي كطريقة رئيسية لإنشاء المواقع. الآن يتم استخدامه فقط لهيكلة البيانات الجدولية وترتيب الصور الرسومية.

ثانيًا. الكتلة - هي طريقة التخطيط الرئيسية حاليًا. على عكس تخطيط الكتلة الجدولية له عدد من المزايا:

  • فصل نمط العنصر عن كود html ؛
  • القدرة على تراكب طبقة على أخرى - تسهل هذه الميزة بشكل كبير تحديد موضع العناصر.
  • فهرسة أفضل بواسطة محركات البحث ؛
  • سرعة تحميل عالية للصفحة ، تتكون من عناصر مستقلة بشكل متبادل ؛
  • سهولة إنشاء التأثيرات المرئية (القوائم المنسدلة ، القوائم ، تلميحات الأدوات).

يتمثل العيب الرئيسي في تخطيط الكتلة في وجود "غموض" معين في فهم الكود الخاص به بواسطة متصفحات مختلفة. لذلك ، غالبًا ما يتعين "إنهاء" صفحات html باستخدام طرق اختراق خاصة.

مع ظهور تخطيط الكتلة ، وُلد مفهوم مثل "التوافق عبر المستعرضات". نظرًا للاختلاف في عرض نفس العنصر في المتصفحات المختلفة ، يتعين على مصممي التخطيط إدخال أجزاء كاملة من التعليمات البرمجية (الاختراقات) في html الرئيسي.

إن إجراء الاختراق متخصص للغاية ويحل مشكلة العرض غير الصحيح في متصفح واحد فقط.

العنصر الرئيسي المستخدم في تخطيط الكتلة هو علامة <div>. يُطلق على جزء الكود المفصول بواسطة هذه العلامة اسم طبقة. يتم أخذ جميع قرارات النمط من كود html إلى أوراق أنماط متتالية. يتم الوصول إليها عبر فئات معرفات أو فئات css:

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

كيف يعمل تخطيط الكتلة؟

على سبيل المثال ، لنأخذ تخطيط موقع الويب هذا الذي تم إنشاؤه في Photoshop. أولاً ، في محرر نصوص ، باستخدام div ، قمنا بتعيين بنية المورد المستقبلي وتعيين محدد معرف لكل طبقة. اتضح هذا الهيكل:

كيف يعمل تخطيط الكتلة؟  - 2

ثم نرفق ملف css بهيكل موقع html النهائي باستخدام السطر <link rel = "stylesheet" type = "text / css" href = "style.css" />. ثم نضيف إليها وصفًا لنمط كل طبقة ، وتحديد المواقع بالنسبة إلى العناصر الأخرى وأبعادها.

يمكنك معرفة المزيد حول جميع خصائص css من الوثائق الفنية للغة.

مثال كود index.html الكامل:

<html>
#وعاء {
            الخلفية: # 99CC99 ؛
            الارتفاع: 80 بكسل ؛
            <title> مثال على تخطيط الكتلة </title>
<div id = "container">
            العرض: 700 بكسل
            الخلفية: # 66CCCC ؛
            الخلفية: # FF9999 ؛
	<div id = "navigation">
	<div id = "header">
            الارتفاع: 600 بكسل ؛
            الخلفية: # f3f2f3 ؛
            الخلفية: # 0066FF ؛
            الخلفية: # 99CC99 ؛
</html>

محتويات ملف style.css:

هيئة {
#المحتوى {
            تعويم: صحيح ؛
            حجم الخط: 12 بكسل ؛
            الخلفية: # d2d0d2 ؛
            عائلة الخطوط: Trebuchet MS ، Arial ، Times New Roman ؛
	<h2> المحتوى </ h2>
}

هذه هي الطريقة التي يظهر بها مثالنا على تخطيط كتلة الموقع في نافذة المتصفح:

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

لتحرير كود صفحات الموقع ، يتم استخدام محررات html خاصة. كثير منهم قادرون على إنشاء رمز تلقائيًا للعناصر المرئية التي أنشأها المستخدم في وضع "التصميم". لكن هذا الرمز غير صالح ، وغالبًا ما يحتاج إلى تنقيح "يدوي":

بمساعدة أساسيات تخطيط الكتلة التي تمت مناقشتها هنا ، يمكنك بسهولة تصميم موقعك بنفسك. عندها سيكون المورد المستقبلي أكثر أصالة ومألوفة. بعد كل شيء ، في هيكله العظمي سوف "تغسل" كل العظام بيديك.

<h2> القائمة </ h2>
العرض: 200 بكسل ؛
العرض: 900 بكسل
الارتفاع: 20 بكسل ؛
اللون: # 000000 ؛
واضحة على حد سواء؛
<meta http-equiv = "نوع المحتوى" content = "text / html؛ charset = utf-8 ″ />
<h2> تذييل </ h2>
margin: 30px auto ؛
<div id = "menu">
#clear {
height: 400px؛
<h2> كتلة التنقل </ h2>
<div id = "content">
<link rel = "stylesheet" type = "text / css" href = "style.css" />


0 replies on “ما هو تخطيط div عند إنشاء موقع ، ومزاياه و”

Leave a Reply

Your email address will not be published. Required fields are marked *