☰ Year plan · Communication Technology (Arabic)

تصميم صفحة الويب: الأجزاء ولغة الترميز ومشاركة قصة

Week 29 · Theme 4, Lesson 8 Web Design Principles · 3 lessons
1

أجزاء صفحة الإنترنت

ICT P5 Term 2, Theme 4: pp. 74–77
الهدفأذكر أجزاء صفحة الويب الجيدة وأقول لماذا يفيد كل جزء.
كلمات جديدة
عنوان رئيسي · العنوان الكبير في أعلى الصفحةعنوان فرعي · عنوان أصغر يبدأ قسمًا واحدًا من الصفحةتباين · فرق واضح بين الحروف والخلفية فيسهل قراءتهاالنص الأساسي · الفقرات التي تحكي القصة
الشرح

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

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

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

تدرّب
1
أي جزء من صفحة الويب يكون بأكبر الحروف؟
2
ماذا تفعل العناوين الفرعية؟
3
لماذا نختار حروفًا داكنة على خلفية فاتحة؟
4
انظر إلى الصورة. أي جزء يحمل الرسالة الرئيسية؟ قل الحرف.
أ: صورة كبيرةب: ملاحظة صغيرةج: زينة