تصميم الموقع الإلكتروني

تصميم الموقع الإلكتروني هو عنوان الدرس الثالث من الوحدة الثالثة التي تحمل اسم “البرمجة المتقدمة باستخدام لغة ترميز النص التشعبي” في الفصل الدراسي الأول من مقرر “تقنية رقمية 2”.

ستتعرف في هذا الموضوع على كيفية تصميم موقع إلكتروني بخطوات متسلسلة، وفهم الخصائص الواجب توافرها في الموقع الإلكتروني، وتصميم مخطَّط الصفحة الإلكترونية، وغيرها.

لذا قم بقراءة نواتج التعلُّم بعناية، ثم أعد قراءتها وتأكَّد من تحصيل محتواها بعد انتهائك من دراسة الموضوع.

نواتج التعلُّم

تحديد مراحل إنشاء موقع إلكتروني والخصائص التي ينبغي توافرها فيه.
تصميم رأس الصفحة، والمحتوى الرئيس، والتذييل.
تحديد خصائص CSS الأساسية لخلفية الصفحات.
تنسيق الصفحة بواسطة محدِّدات Class.
استخدام خاصية تجاوز السعة (Overflow property).
تطبيق خصائص نموذج الصندوق (Box-Model).
إضافة القيم الخاصة بالفراغات (Padding).
التحكُّم في حجم ومحاذاة الصور.
تنسيق شريط التصفح.

هيا لنبدأ!

مراحل إنشاء موقع إلكتروني

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

مراحل إنشاء موقع إلكتروني

التخطيط

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

التصميم

بعد تكوين صورة واضحة عن الموقع ومحتوياته، يتم رسم المُخطَّط العام للصفحة الرئيسة والصفحات الفرعية للموقع على الورق.

التنفيذ

بعد تصميم المُخطَّط العام، تأتي عملية تصميم الصفحات وتطوير المحتوى باستخدام أحد برامج تصميم المواقع الإلكترونية، مثل فيجوال ستوديو كود.

اختبار الموقع ونشره على شبكة الإنترنت

في هذه المرحلة تتم عملية اختبار كل صفحة بعناية والتحقُّق من عمل جميع الروابط بين الصفحات بشكل صحيح ثم نشر الموقع على شبكة الإنترنت.

الخصائص التي ينبغي توافرها في الموقع الإلكتروني

محتوى واضح.
صور ورسومات مناسبة للمحتوى.
نسق لوني مناسب.
تنسيق مناسب للعرض على الهواتف النقالة.

لمعرفة المزيد من المعلومات عن كيفية تصميم موقع إلكتروني، قم بالاطّلاع على الرابط التالي:

كيفية إنشاء موقع إلكتروني – موضوع

في هذه المرحلة ستضع تصميمًا لمُخطَّط صفحة إلكترونية، والتي ستحتوي على 3 أجزاء مختلفة، هي:

رأس الصفحة (Header) ويشمل ترويسة رسومية وشريط التنقُّل.
المحتوى الرئيس (Main content) ويشمل المحتوى المتمثل في النصوص والصور وغيرها.
التذييل (Footer) ويحتوي على روابط مفيدة.

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

تجميع النص

يتم استخدام وسم التقسيم <div> في لغة HTML لإنشاء أقسام للمحتوى في الصفحة الإلكترونية مثل (النص، الصور، الرأس، التذييل، شريط التنقُّل، إلى آخره).

تخطيط الصفحات

يتم استخدام خاصية id وخاصية class مع وسم التقسيم <div> لتعديل نمط CSS بسهولة.

يتم استخدام خاصية class مع HTML لتطبيق التنسيق نفسه على عناصر الفئة class، وبهذا فإن العناصر التي لها نفس خاصية class لها نفس الشكل والنمط.

أنشئ تخطيطًا للعناصر التي ستستخدمها لتطبيق خاصيتي div وclass عليها. ستحتوي صفحتك على 4 أقسام رئيسة:

Menu
Main
Photos
Footer

ستنظم صفحتك باستخدام وسم التقسيم <div> وخاصية class.

سيتم تقسيم الصفحة إلى الأجزاء الرئيسة أولًا وأثناء الإنشاء يمكِن أن تفصل كل قسم إلى أجزاء.

صفحة مشجي كرة القدم

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

بإمكانك مراجعة محتوى موضوع “تصميم الموقع الإلكتروني” من بداية الموضوع وحتى هذه النقطة، من خلال الرابط التالي:

استخدام CSS لإثراء موقعك

الآن وبعد أن تعلَّمت الصيغة العامة لـ CSS وقواعدها، ستستخدمها في إثراء موقعك الإلكتروني بتصميم مناسب.

في البداية ستنشئ تصميم CSS في مجلد الصفحات في محرِّر فيجوال ستوديو كود باسم: style.css

وبعد ذلك ستنشئ مرجعًا إلى صفحة الأنماط (stylesheet) الموجودة في المقطع البرمجي HTML باستخدام رابط لوسم يوضع داخل القسم <head>.

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

محدِّد Class

لتنسيق العناصر في class معيَّن تحتاج إلى استخدام النقطة (.) قبل اسم class. على سبيل المثال سيغير المقطع البرمجي التالي لون الخلفية فقط في قسم menu class.

يمكِنك أيضًا تحديد عناصر HTML التي يجب أن تتأثر بمُحدِّد class. وللقيام بذلك، ابدأ باسم العنصر، ثم اكتب النقطة (.) متبوعة باسم class.

على سبيل المثال سيغير المقطع البرمجي التالي لون النص الموجود فقط بين وسوم <p> لقسم footer class.

خاصية تجاوز السعة

خاصية تجاوز السعة (Overflow property) توضح في ملف CSS للتحكُّم فيما يحدث للمحتوى عندما يكون أكبر من أن يتناسب مع مساحة الصفحة.

تأخذ خاصية تجاوز السعة 4 قيم:

مرئية (Visible).
مخفية (hidden).
تمرير (Scroll).
تلقائية (Auto).

ستستخدم القيمة التلقائية (Auto) وتعني أن تجاوز السعة قد تم قصه، ويضاف شريط تمرير عندما يكون من الضروري رؤية باقي المحتوى.

ستضيف الآن لون خلفية مختلف إلى الأقسام المختلفة في صفحتك الإلكترونية.

ستظهر الصفحة على المتصفِّح بالشكل التالي:

نموذج الصندوق

تتعامل CSS مع كل عنصر في HTML كما لو كان له ما يشبه صندوقه الخاص؛ مما يسمح لك بالتحكُّم في الأبعاد والحدود والفراغ حول كل صندوق على حدة.

الفراغ

يمكِنك تحديد القيم الخاصة بكل جانب من الفراغ (Padding) المحيط بالصندوق:

الفراغ العلوي (padding-top).
الفراغ في الجهة اليمنى (padding-right).
الفراغ السفلي (padding-bottom).
الفراغ في الجهة اليسرى (padding-left).

لاحظ أن

يمكِن تحديد نفس القيم لخاصية الهامش (margin) أيضًا، وبنفس الطريقة المختصرة.

تعدُّ خصائص الحدود، والهوامش، والفراغات المحيطة مفيدة جدًا في تصميم الصفحة. يمكِنك استخدامها لإنشاء الفراغات المناسبة بين العناصر في صفحتك الإلكترونية وترتيبها بشكلٍ مناسب.

طبِّق ذلك على صفحتك الإلكترونية.