تصميم صفحة إلكترونية | الوحدة الأولى | الدرس الأول
تصميم صفحة إلكترونية هو عنوان الدرس الأول من الوحدة الأولى التي تحمل اسم “تصميم المواقع الإلكترونية” في الفصل الدراسي الثاني من مقرر “سادس ابتدائي”.
سنتعرف في موضوع “تصميم صفحة إلكترونية” على كيفية التمييز بين الشبكة الإلكترونية، والموقع الإلكتروني، والصفحة الإلكترونية، كذلك سنتعرف على كيفية إنشاء موقع على شبكة الإنترنت، وغيرهم.
تصميم صفحة إلكترونية
لذا احرص على قراءة نواتج التعلُّم جيدًا، وتأكَّد من مراجعتها وتحصيل المحتوى الخاص بها بعد انتهائك من دراسة الموضوع.
نواتج التعلُّم
- التمييز بين الشبكة الإلكترونية والموقع الإلكتروني والصفحة الإلكترونية.
- إنشاء موقع على شبكة الإنترنت باستخدام أداة مواقع جوجل.
- تنسيق النصوص في الموقع الإلكتروني.
- إضافة الصور للموقع، وتنسيقها.
هيا لنبدأ!
الشبكة الإلكترونية
ما هي الشبكة الإلكترونية؟
يُشير لفظ الشبكة الإلكترونية العالمية إلى أحد المكونات الأساسية في شبكة الإنترنت، والتي تتكون من مواقع إلكترونية يُمكِن الوصول إليها من خلال المتصفح الإلكتروني.
تتكون الشبكة الإلكترونية العالمية من مجموعة مواقع إلكترونية تحتوي على صفحات ومستندات يُطلق عليها اسم الصفحات الإلكترونية.
ستتعرف في هذا الموضوع على الفرق بين الشبكة الإلكترونية، والموقع الإلكتروني، والصفحة الإلكترونية، من خلال مقارنتها بالمكتبة التي تحتوي على الكتب.
الموقع الإلكتروني
ما هو الموقع الإلكتروني؟
هو مجموعة من الصفحات الإلكترونية المترابطة، حيث يحتوي الموقع الإلكتروني على أكثر من صفحة إلكترونية، كما يتمكن المُستخدِم من الوصول إلي الموقع بكتابة عنوانه في شريط عنوان المتصفح.
تصميم صفحة إلكترونية
يُعرف هذا العنوان باسم مُحدّد موقع المعلومات (Uniform Resources Locator – URL).
على سبيل المثال، يحتوي الموقع الإلكتروني لوزارة التعليم https://www.moe.gov.sa على عدد من الصفحات الإلكترونية المختلفة.
الصفحة الإلكترونية | تصميم صفحة إلكترونية
ما هي الصفحة الإلكترونية؟
هي صفحة على الإنترنت تتضمن العديد من المكونات، مثل: النصوص، الصور، مقاطع الفيديو، وروابط صفحات إلكترونية أخرى.
توجد أنواع مختلفة للصفحات الإلكترونية، فهناك الصفحات الإخبارية، صفحات الوسائط الاجتماعية، الصفحات الإعلانية، وصفحات أخرى كثيرة.
الصفحة الرئيسة
هي أول صفحة وأكثرها أهمية في الموقع الإلكتروني، حيث يتمكن مُستخدِم الموقع من الانتقال إلى أي صفحة في الموقع الإلكتروني عن طريق الصفحة الرئيسة عبر الارتباطات التشعبية لتلك الصفحات.
معلومة
غالبًا ما يكون الارتباط التشعبي (Hyperlink) كلمة أو عبارة أو صورة، عند الضغط عليها تُعيد توجيهك إلى صفحة إلكترونية أخرى، وعادةً ما يكون الارتباط التشعبي للنص مسطَّرًا (Underlined) أو باللون الأزرق لتسهيل استخدامه.
تعرَّف على المزيد من المعلومات عن مصطلحي الموقع الإلكتروني والصفحة الإلكترونية، وبعض المصطلحات الفنية الأخرى من خلال الرابط التالي:
إنشاء موقع على شبكة الإنترنت باستخدام أداة جوجل
سنتعرف في هذا الموضوع على إنشاء موقع إلكتروني للترويج لمشروع “جبل تروجينا في مدينة نيوم”، وسيتضمن هذا الموقع معلومات مختلفة حول المشروع.
ستستخدم الصور لعرض المظاهر الجمالية للجبل والأنشطة والمغامرات المختلفة التي يُمكِن للزوار تجربتها.
لإنشاء موقع إلكتروني، تحتاج إلى معرفة لغة ترميز النص التشعبي (HyperText Markup Language – HTML)، وهي لغة تَصفُ كل ما تريد عرضه على الصفحة الإلكترونية، ولكن لحسن الحظ، كما توجد أدوات يُمكِنها مساعدتك في إنشاء الموقع الإلكتروني بدون أي معرفة لغة HTML.
ستتعلم كيفية إنشاء الموقع الإلكتروني الخاص بك باستخدام أداة مواقع جوجل (Google Sites)، وهي أداة تصميم لشبكة إلكترونية مجانية عبر الإنترنت توفرها شركة جوجل.
تصميم صفحة إلكترونية
التخطيط
“قبل البِدء بإنشاء موقع إلكتروني، عليك إنشاء مُخطَّط تصميمي لهذا الموقع على الورق”.
سيساعدك التخطيط في معرفة المكوّنات الرئيسة للموقع، وكيفية توزيعها في صفحات الموضوع.
يوضِّح الرسم البياني التالي المُخطَّط التصميمي الأولي لصفحات الموقع الإلكتروني التي ستنشئها باستخدام أداة مواقع جوجل.
تصميم صفحة إلكترونية
معلومة
حاول أن يتسم تصميمك بالبساطة قدر الإمكان عند تصميم الموقع الإلكتروني، كما يُمكِنك إضافة بعض الصفحات الإلكترونية إلى الموقع، ولكن حاول ترتيبها بشكل جيد.
إنشاء موقعك الإلكتروني
نبدأ الآن استخدام أداة مواقع جوجل (Google Sites) لإنشاء موقع إلكتروني من البداية، ولبدء استخدامها يجب أن يكون لديك حساب جوجل (Google)..
لتسجيل الدخول إلى حساب جوجل:
- افتح متصفح المواقع الإلكترونية وانتقل إلى https://www.sites.google.com.
- اكتب اسم حساب جوجل الخاص بك..
- ثم اضغط على التالي (Next).
- اكتب كلمة مرور حسابك في جوجل..
- ثم اضغط على التالي (Next).
- من نوافذ أداة مواقع جوجل (Google Sites)، اضغط على إنشاء موقع إلكتروني جديد (Click Create new Website).
- تم إنشاء قالب جديد للصفحة الإلكترونية من الموقع الإلكتروني.
تسمية موقعك الإلكتروني | تصميم صفحة إلكترونية
بمجرد إنشاء قالب لموقعك الإلكتروني، فإنك تحتاج إلى تحديد اسم المُستند لعملك، كذلك اختيار اسم لموقعك الإلكتروني..
لتسمية موقعك الإلكتروني:
- اكتب اسمًا لمستند الموقع، على سبيل المثال: مشروعي (My project).
- في مربع إدخال اسم الموقع الإلكتروني (Enter site name) اكتب “تروجينا”.
تصميم صفحة إلكترونية
معلومة
عند إنشاء موقع إلكتروني، من المهم منحه عنوانًا مناسبًا وجاذبًا، وكلما كان العنوان قصيرًا كان مميزًا.
اختيار مظهر موقعك الإلكتروني
ستبدأ الآن باختيار شكل ومظهر الخط، وإضافة الصفحات، والنصوص، والصور إلى موقعك الإلكتروني.
لاختيار مظهر موقعك الإلكتروني:
- من قائمة المظاهر الجاهزة، اضغط على زرّ المظاهر (Themes)..
- ثم اختر مظهرًا مُعيَّنًا مثل دبلوماسي (Diplomat).
- تحت المظهر، اضغط على اللون الذي تريده.
- سيُطبَّق المظهر الجديد ولون الخط.
قم بمراجعة محتوى موضوع “تصميم صفحة إلكترونية” حتى نهاية هذا القسم من خلال الرابط التالي:
التعامل مع النصوص | تصميم صفحة إلكترونية
يُمكِنك تحرير العناوين والفقرات الموجودة واستبدال النصوص بالمحتوى الخاص بك، كما يُمكِنك تنسيق النصوص لجعل المحتوى جذابًا.
تحرير عنوان الصفحة
قم بتحرير عنوان الصفحة الافتراضي ليكون عنوانًا لصفحتك.
لتحرير عنوان الصفحة:
- اضغط على النص الذي تريد تحريره.
- سيظهر شريط به أدوات لتحرير النص، استخدمه لتعديل النص الخاص بك.
- في عنوان صفحتك (Your page title) اكتب “تروجينا جبل نيوم”.
تصميم صفحة إلكترونية
إضافة النصوص
ستُضيف الآن مربع نص إلى صفحتك الإلكترونية، حيث يُمكِنك كتابة مقدمة عن جبل تروجينا.
لإضافة النصوص:
- من علامة تبويب إدراج (Insert)، اضغط على مربع نص (Text box).
- اضغط على المزيد (more)..
- ثم اضغط على خيارات محاذاة (Align)..
- ثم اختر محاذاة إلى اليمين (Align Right).
- اكتب النص الذي تريده في مربع النص.
تصميم صفحة إلكترونية
تغيير نمط الخط
قم الآن بتعديل نمط خط (Font Style) الفقرة التي أضفتها سابقًا، ويُمكِن تحقيق ذلك من خلال تحديد النص واختيار نوع الخط أو حجمه أو لونه أو عناصر أخرى.
لتغيير النمط:
- اضغط على السهم الموجود بجوار نص الفقرة.
- اختر نمط النص الذي تريده، على سبيل المثال رأس موضوع فرعي (Subheading).
معلومة
قد تظهر ألوان القسم (Section colors) في أماكن مختلفة بناءً على مكان مربع النص.
تغيير خلفية الموقع | تصميم صفحة إلكترونية
يُمكِنك تغيير الصور الظاهرة على صفحات موقعك واستبدالها بصور من اختيارك، كما يُمكِنك استخدام محرك بحث جوجل للعثور على صورة تلائم محتوى صفحتك.
لتغيير صورة الخلفية:
- مرِّر الفأرة على منطقة رأس الصفحة (Header).
- اضغط على صورة (Image).
- ثم اضغط على تحديد (Select).
- من نافذة اختيار الصور (Select images)، اضغط على بحث (Search).
- في مربع البحث (Search box) اكتب “الجبل الثلجي”.
- ثم اضغط على بحث (Search).
- اختر الصورة.
- ثم اضغط على تحديد (Select).
إضافة عناوين الفقرات
قم بإضافة المزيد من المعلومات حول جبل تروجينا عن طريق إضافة العناوين والنصوص، حيث ستضيف مربع نص، وتعيِّن محاذاة النص إلى اليمين، وتغيِّر نمط الخط إلى رأس موضوع فرعي (Subheading)..
لإضافة عناوين الفقرات:
- من علامة التبويب إدراج (Insert)، اضغط على مربع نص (Text box).
- اضغط على النقاط الثلاث.
- ثم اضغط على المحاذاة (Align).
- ثم اختر محاذاة إلى اليمين (Align Right).
- اضغط على السهم الموجود بجوار نص رأس موضوع (Heading).
- اختر النمط الذي تريده، على سبيل المثال رأس موضوع فرعي (Subheading).
- اكتب النص الذي تريده في مربع النص.
دمج مربعات النصوص
قم بإضافة مربع نص آخر، ولكن هذه المرة ستسحبه إلى مربع النص السابق، حيث سيتم دمج مربعي النص في مربع نص واحد.
لدمج مربعات النصوص:
- من علامة تبويب إدراج (Insert)، اضغط على مربع نص (Text box).
- اسحب وأفلت مربع النص داخل مربع النص السابق.
- اختر محاذاة إلى اليمين (Align Right)..
- ثم امنح النص النمط الذي تريده، على سبيل المثال اختر نص عادي (Normal text).
- اكتب النص الذي تريده في مربع النص.
إضافة الصور
وأخيرًا، ستضيف صورًا تتناسب مع النص الذي أضفته.
لإضافة الصور:
- من علامة التبويب إدراج (Insert)، اضغط على صور (Images).
- ثم اضغط على تحديد (Select).
- من نافذة اختيار الصور (Select images)، اضغط على صور بحث جوجل (Google Search images).
- في مربع البحث (Search box) اكتب “السير على الجبال المغطاة بالثلوج.”.
- ثم اضغط زر البحث (Search).
- اختر الصورة.
- ثم اضغط على إدراج (Insert).
تصميم صفحة إلكترونية
تغيير حجم الصور
اتَّبع نفس الإجراء لإضافة صورة أخرى متعلقة بـ “تسلق قمة جبال الثلج”، ثم غيِّر حجم الصورتين.
لتغيير حجم الصور:
- اسحب الصورة..
- أفلتها.
- استخدم مقابض تغيير الحجم من الزوايا لتغيير حجم الصورة.
قم بمراجعة محتوى موضوع “تصميم صفحة إلكترونية” حتى نهايته من خلال الرابط التالي:
اختبر تحصيلك لمحتوى الموضوع من خلال الرابط التالي:
الواجب الإلكتروني
إلى هنا يكون قد انتهى موضوع “تصميم صفحة إلكترونية“، لا تنسوا مراجعة نواتج التعلُّم أعلى المقال، وانتظرونا في الموضوع القادم!