كيفية إنشاء تخطيط كامل للصفحة الأمامية باستخدام CSS
نشرت: 2020-07-08يبث تصميم موقع الويب الحياة في موقع الويب. هناك العديد من مواقع الويب بأنواع مختلفة من التخطيطات. ويتكون تخطيط موقع الويب من الألوان والصور والمحتوى ومقاطع الفيديو. يمكن تصنيف هذه الأشياء كمحتوى موقع الويب. تصميم موقع الويب هو عظام وهيكل الموقع الذي يقرر مكان مادة الموقع. وهي مسؤولة عن ترتيب عناصر الموقع على صفحة ويب.
يمكن أن يعزز تخطيط موقع الويب المحدد جيدًا تجربة التصفح للمستخدم. يمكن أن يؤدي إلى تنقل سهل إلى موقع الويب ويشجع على مشاركة المستخدم.
علاوة على ذلك ، يحدد تخطيط موقع الويب الجيد ويتحكم في مدة بقاء المستخدم على الصفحة. كما أنه يؤثر على عدد الصفحات التي يزورونها وعدد مرات زيارتهم للموقع. يقسم تخطيط موقع الويب موقع الويب إلى رؤوس وقائمة ومحتوى وتذييل صفحة الويب. هناك العديد من أنواع التخطيطات المختلفة المتاحة لتصميم بنية موقع الويب. لكننا سنتبع الهيكل المحدد في الصورة ونكتب الكود وفقًا لذلك.
1. العنوان:
يحدد العنوان الجزء العلوي من صفحة الويب بشعار الشركة وقائمة التنقل. إنه شريط عبر صفحة ويب يحتفظ أيضًا بمعلومات الاتصال وغيرها من المعلومات حول موقع الويب. العنوان الجيد يجعل من السهل التنقل في موقع الويب الخاص بك جنبًا إلى جنب مع إنشاء العلامة التجارية. كما أنه يركز على إنشاء تجربة تصفح جيدة في جميع أنحاء الموقع بأكمله.
هناك نوعان من الرؤوس: ثابتة وعائمة. يظل الرأس الثابت أعلى صفحة الويب ، بينما تقرأ شيئًا ما في الجزء السفلي. يتبعك رأس عائم حول الشاشة وأنت تقوم بالتمرير لأعلى أو لأسفل الصفحة.
تحتوي الميزة المعتادة للرأس على شعار الشركة والتنقل وعنوان الصفحة. في بعض الحالات ، قد يحتوي العنوان أيضًا على شريط بحث وعربة تسوق وزر تسجيل الدخول / تسجيل الخروج وملف تعريف المستخدم وإشعارات المستخدم.
يوجد أدناه رمز لتصميم رأس بسيط:
<! DOCTYPE html>
<html lang = ”en”>
<head>
<title> CSS Website Layout </title>
<meta charset = ”utf-8 ″>
<meta name = ”viewport” content = ”width = device-width، initial-scale = 1 ″>
<ستايل>
هيئة {
الهامش: 0؛
}
/ * نمط الرأس - يؤدي هذا إلى إنشاء نمط للرأس * /
.header {
لون الخلفية: # f1f1f1 ؛
الحشو: 20 بكسل ؛
محاذاة النص: مركز ؛
}
</style>
</head>
<الجسم>
<div class = ”header”>
<h1> رأس </ h1>
</div>
</body>
</html>
2. شريط التنقل:
شريط التنقل عبارة عن مجموعة من الروابط المنظمة التي تساعد مستخدمي موقع الويب الخاص بك على الوصول إلى صفحات الموقع والتنقل من خلالها. قائمة التنقل هي عنصر من عناصر واجهة المستخدم التي تربط صفحات موقع الويب. قائمة التنقل متاحة بشكل عام على صفحات الموقع. هذا يعني أنه يتم عرض قائمة التنقل إما على جميع صفحات الويب أو على الصفحات المحددة فقط.
عادة ، يتم وضع شريط التنقل أفقيًا أسفل رأس صفحة الويب مباشرةً ، قبل أن يبدأ محتوى صفحة الويب. في تصميمات معينة ، يتم تعيين شريط التنقل عموديًا على الجانب الأيسر أو الأيمن من صفحة الويب. هنا ، يُعرف شريط التنقل بالشريط الجانبي كما يظهر على "جانب" المحتوى الرئيسي.
نظرًا لكونه أهم جزء في الموقع ، يصبح التنقل عبر الموقع أمرًا صعبًا في غياب شريط التنقل. يجب عليك النقر فوق زر الرجوع للوصول إلى صفحة معينة. ولكن لحسن الحظ ، تم توحيد التنقل في الموقع في السنوات الأخيرة. في الوقت الحاضر ، من الصعب العثور على موقع ويب بدون شريط تنقل. دعونا نلقي نظرة على كود CSS وراء تصميم شريط تنقل بسيط:
/ * حاوية شريط التنقل - هذا هو الشريط الذي يحتوي على التنقل * /
.topnav {
إخفاء الفائض؛
لون الخلفية: # 333 ؛
}
/ * روابط شريط التنقل - روابط لصفحات مختلفة من الموقع * /
.topnav a {
تعويم: اليسار؛
العرض محجوب؛
اللون: # f2f2f2 ؛
محاذاة النص: مركز ؛
الحشو: 14 بكسل 16 بكسل ؛
زخرفة النص: لا شيء ؛
}
/ * الروابط - تغيير لون الروابط عند تمرير الماوس * /
.topnav a: مرر {
لون الخلفية: #ddd ؛
لون أسود؛
}
حاوية شريط التنقل هي مربع يحتوي على التنقل في موقع الويب. تتوفر روابط التنقل في روابط شريط التنقل. تنقلك هذه الروابط ، عند النقر عليها ، إلى صفحة الويب المحددة في موقع الويب. هناك أيضًا رمز يمكنك من خلاله تغيير لون الارتباط عندما يتحرك الماوس فوق الارتباط.
3. محتوى صفحة الويب:
المحتوى هو مجموعة الأشياء التي تراها على أي صفحة ويب ، والتي تقع بين شريط التنقل وتذييل موقع الويب. غالبًا ما يعتمد تخطيط المحتوى على المستخدم الذي يستهدف الموقع أو صفحة الويب. تستخدم مستعرضات الجوال محتوى ويب مكونًا من عمود واحد. يعد تخطيط المحتوى المكون من عمودين مستهدفًا لمواقع الويب على الأجهزة اللوحية وأجهزة الكمبيوتر المحمولة. ويتم استخدام تخطيط موقع الويب المكون من 3 أعمدة بواسطة المواقع المستهدفة لأجهزة كمبيوتر سطح المكتب.
لا يقتصر محتوى صفحة الويب على المحتوى النصي فقط. يمكن أن يكون محتوى صفحة الويب أي شيء يتراوح بين مقاطع الفيديو والتسجيلات الصوتية والصور والرسومات ، بما في ذلك النص. في هذه الأيام ، يمكن أن يتضمن محتوى الويب أيضًا منشورات من منصات التواصل الاجتماعي مثل Instagram و Facebook. المدونات مؤهلة أيضًا كمحتوى صفحة الويب.
دعونا نلقي نظرة على الكود لإنشاء تخطيط محتوى صفحة الويب.
/ * يؤدي هذا إلى إنشاء ثلاثة أعمدة متساوية الحجم يتم وضعها بجانب بعضها البعض * /
.عمودي {
تعويم: اليسار؛
العرض: 33.33٪؛
}
/ * مسح العوامات بعد الأعمدة * /
.row: بعد {
المحتوى: ""؛
جدول العرض؛
واضحة على حد سواء؛
}
/ * تخطيط سريع الاستجابة - يجعل الأعمدة الثلاثة تتكدس فوق بعضها البعض بدلاً من بعضها البعض على شاشات أصغر (بعرض 600 بكسل أو أقل) * /
شاشةmedia و (أقصى عرض: 600 بكسل) {
.عمودي {
العرض: 100٪؛
}
}
إذا كنت تريد إنشاء تخطيط مكون من عمودين ، فيجب عليك تغيير العرض إلى 50٪. هذا يعني أن مساحة الشاشة تنقسم إلى نصفين. لإنشاء تخطيط من 4 أعمدة ، يجب عليك ضبط العرض على 25٪. وبالتالي ، إذا كان لديك عمود واحد فقط لإنشائه ، للأجهزة المحمولة ، يجب عليك تحديد العرض إلى 100٪.
أعمدة غير متساوية:
ليس من الضروري وجود أعمدة متساوية الحجم لمحتوى صفحة الويب الخاصة بك. يمكن أن يكون لديك أعمدة مختلفة الحجم على صفحة ويب حيث يكون المحتوى الرئيسي في العمود الأكثر ضخامة. ويمكن أن يحتوي العمود الصغير على محتوى آخر مثل الإعلانات أو الصور أو أزرار الوسائط الاجتماعية أو التنقل في الشريط الجانبي. يوجد العمود الهائل لتحديد المحتوى الرئيسي في أي صفحة ويب. بالطبع ، ليس من الضروري اتباع هذا النمط بالضبط. قام بعض هواة تصميم الويب بتغيير التخطيط ، وكانت النتائج هائلة.
يمكنك تعديل عرض العمود لأي رقم. لكن الشيء الوحيد الذي تتذكره هو أن إجمالي عرض العمود يجب أن يكون 100٪. سننظر في كود CSS لإنشاء عمود أكثر جوهرية في المنتصف مع عمودين أصغر على كل جانب من جوانب المحتوى الأوسط.
.عمودي {
تعويم: اليسار؛
}
/ * رمز العمود الأيمن والأيسر * /
.column.side {
العرض: 25٪؛
}
/ * رمز العمود الأوسط * /
.column.middle {
العرض: 50٪؛
}
/ * تخطيط سريع الاستجابة - ثلاثة أعمدة مكدسة فوق بعضها البعض بدلاً من بعضها البعض. نوع مختلف من تصميم تخطيط موقع الويب * /
شاشةmedia و (أقصى عرض: 600 بكسل) {
.column.side، .column.middle {
العرض: 100٪؛
}
}
4. تذييل موقع الويب:
التذييل هو الجزء السفلي من صفحة الويب الذي يحتوي على طباعة دقيقة ومعلومات حقوق النشر والروابط السريعة ومعلومات الاتصال. مثل رأس موقع الويب ، فإنه يستخدم التذييل لوضع المعلومات القياسية ، وهو ليس بالغ الأهمية لموقع الويب. من المعروف أن التذييلات تحافظ على تناسق الموقع لأنها تحتوي على بعض الروابط التي يمكنك العثور عليها في رأس موقع الويب. نظرًا لأن سلوك المستخدم يتطور باستمرار ، فمن الضروري خلق تناسق في وظائف موقع الويب.
لإبقاء التذييل ممتعًا ، يمكنك تضمين عبارة تحث المستخدم على اتخاذ إجراء أو نموذج اتصال أو خريطة أو صور أو أزرار وسائط اجتماعية أو أحدث منشورات المدونة. في هذه الأيام ، كان هناك اتجاه لوضع عبارة تحث المستخدم على اتخاذ إجراء بشكل استراتيجي على تذييل موقع الويب. بالإضافة إلى ذلك ، تظهر الخرائط وأحدث منشورات المدونة وأزرار الوسائط الاجتماعية في التذييل. تساعد هذه الأشياء المستخدم في الاطلاع على الأجزاء الأخرى من الموقع أيضًا.
دعونا نلقي نظرة على كود التذييل البسيط المحدد في CSS:
.تذييل {
لون الخلفية: # F1F1F1 ؛
محاذاة النص: مركز ؛
الحشو: 10 بكسل ؛
}
5. تخطيط موقع الويب سريع الاستجابة:
لقد رأينا الكود لكل عنصر من عناصر صفحة الويب ، أي رأس موقع الويب وشريط التنقل والمحتوى وتذييل موقع الويب. يوجد أدناه رمز لتخطيط موقع ويب سريع الاستجابة يتغير بين العمودين والأعمدة ذات العرض الكامل. يعتمد عرض العمود على حجم عرض الشاشة.
<! DOCTYPE html>
<html>
<head>
<ستايل>
* {
حجم الصندوق: مربع الحدود ؛
}
هيئة {
عائلة الخطوط: Arial ؛
الحشو: 10 بكسل ؛
الخلفية: # f1f1f1 ؛
}
/ * Header / Blog Title - أنت تحدد عنوان رأس الصفحة أو المدونة * /
.header {
الحشو: 30 بكسل ؛
محاذاة النص: مركز ؛
الخلفية: أبيض ؛
}
.header h1 {
حجم الخط: 50 بكسل ؛
}
/ * نمط شريط التنقل العلوي * /
.topnav {
إخفاء الفائض؛
لون الخلفية: # 333 ؛
}
/ * نمط روابط التنقل العلوية لشريط التنقل * /
.topnav a {
تعويم: اليسار؛
العرض محجوب؛
اللون: # f2f2f2 ؛
محاذاة النص: مركز ؛
الحشو: 14 بكسل 16 بكسل ؛
زخرفة النص: لا شيء ؛
}
/ * تغيير اللون عند التمرير - يتغير لون الروابط عند تحريك مؤشر الماوس على الروابط * /
.topnav a: مرر {
لون الخلفية: #ddd ؛
لون أسود؛
}
/ * يؤدي هذا إلى إنشاء عمودين غير متساويين يقعان بجوار بعضهما البعض * /
/* العمود الأيسر */
.العمود الأيسر {
تعويم: اليسار؛
العرض: 75٪؛
}
/* العمود الأيمن */
.العمود الأيمن {
تعويم: اليسار؛
العرض: 25٪؛
لون الخلفية: # f1f1f1 ؛
المساحة المتروكة: 20 بكسل ؛
}
/ * هذا يضيف صورة مزيفة * /
.fakeimg {
لون الخلفية: #aaa ؛
العرض: 100٪؛
الحشو: 20 بكسل ؛
}
/ * إضافة تأثير البطاقة للمقالات * /
.بطاقة {
لون الخلفية: أبيض؛
الحشو: 20 بكسل ؛
أعلى الهامش: 20 بكسل ؛
}
/ * مسح العوامات بعد الأعمدة * /
.row: بعد {
المحتوى: ""؛
جدول العرض؛
واضحة على حد سواء؛
}
/ * التذييل - يحدد قسم التذييل للموقع * /
.تذييل {
الحشو: 20 بكسل ؛
محاذاة النص: مركز ؛
الخلفية: #ddd؛
أعلى الهامش: 20 بكسل ؛
}
/ * تخطيط سريع الاستجابة - عندما يكون عرض الشاشة أقل من 800 بكسل ، فإن هذا يجعل العمودين يوضعان فوق بعضهما البعض * /
شاشةmedia و (أقصى عرض: 800 بكسل) {
.leftcolumn ، .rightcolumn {
العرض: 100٪؛
حشوة: 0 ؛
}
}
/ * تخطيط سريع الاستجابة - عندما يكون عرض الشاشة أقل من 400 بكسل ، اجعل روابط التنقل مكدسة فوق بعضها البعض بدلاً من بعضها البعض * /
شاشةmedia و (أقصى عرض: 400 بكسل) {
.topnav a {
تعويم: لا شيء ؛
العرض: 100٪؛
}
}
</style>
</head>
<الجسم>
<div class = ”header”>
<h1> موقع الويب الخاص بي </ h1>
<p> قم بتغيير حجم نافذة المتصفح لرؤية التأثير. </ p>
</div>
<div class = ”topnav”>
<a href="#"> Link </a>
<a href="#"> Link </a>
<a href="#"> Link </a>
<a href="#" style= الخبراء
</div>
<div class = ”row”>
<div class = ”leftcolumn”>
<div class = ”card”>
<h2> عنوان العنوان </ h2>
<h5> وصف العنوان ، 7 كانون الأول (ديسمبر) 2017 </h5>
<div class = ”fakeimg” style = ”height: 200px؛”> صورة </ div>
<p> بعض النصوص .. </ p>
<p> لا توجد مشكلة في أن تكون مسؤولة عن العمل ، ولكن ليس هناك ما هو أكثر من ذلك. Ut enim ad minim veniam، quis nostrud training ullamco. </p>
</div>
<div class = ”card”>
<h2> عنوان العنوان </ h2>
<h5> وصف العنوان ، 2 سبتمبر 2017 </h5>
<div class = ”fakeimg” style = ”height: 200px؛”> صورة </ div>
<p> بعض النصوص .. </ p>
<p> لا توجد مشكلة في أن تكون مسؤولة عن العمل ، ولكن ليس هناك ما هو أكثر من ذلك. Ut enim ad minim veniam، quis nostrud training ullamco. </p>
</div>
</div>
<div class = ”rightcolumn”>
<div class = ”card”>
<h2> نبذة عني </ h2>
<div class = ”fakeimg” style = ”height: 100px؛”> صورة </ div>
<p> بعض النصوص عني في culpa qui officia deserunt mollit anim .. </p>
</div>
<div class = ”card”>
<h3> منشور مشهور </ h3>
<div class = ”fakeimg”> <p> صورة </ p> </div>
<div class = ”fakeimg”> <p> صورة </ p> </div>
<div class = ”fakeimg”> <p> صورة </ p> </div>
</div>
<div class = ”card”>
<h3> اتبعني </ h3>
<p> بعض النصوص .. </ p>
</div>
</div>
</div>
<div class = ”footer”>
<h2> تذييل </ h2>
</div>
</body>
</html>
يجب عليك كتابة الكود أعلاه في مفكرة أو أي محرر نصوص آخر متاح ، ويجب حفظ الملف كملف HTML بامتداد ملف html. عندما تريد وضع الصور في تصميم صفحة الويب ، يجب عليك حفظ جميع الصور في نفس المجلد مثل مجلد ملف HTML. لاستخدام الصورة ، يجب عليك استخدام الموقع الكامل للصورة في ورقة الأنماط أو ملف CSS.
استنتاج:
الآن بعد أن تحدثنا عن تخطيط موقع الويب بالتفصيل ، جنبًا إلى جنب مع الكود ، يمكنك تحديد نوع المظهر الذي يجب أن يكون لموقع الويب الخاص بك. لا بد أن يؤدي التصميم الرديء إلى إحباط مستخدم موقع الويب الخاص بك ويمكنه مغادرة موقعك بسرعة. ينتج عنه معدل ارتداد مرتفع ، مما قد يؤثر على ترتيبك في صفحة نتائج محرك البحث. عند الوصول إلى هذا ، يمكنك أن تستنتج أنه يجب عليك استثمار قدر معقول من الوقت في اتخاذ قرار بشأن تصميم موقع الويب الخاص بك. بمجرد أن تقرر ذلك ، تحتاج إلى تحديد المحتوى الذي ينتمي إلى أي عمود. علاوة على ذلك ، يساعد التصميم الجيد في إنشاء رابطة عاطفية بين المستخدم والشركة.