☰ خطة العام · تكنولوجيا المعلومات والاتصالات (بالعربية)

تصميم صفحة ويب

الأسبوع 8 · المحور الأول، الدرس ٨ «تصميم مواقع الإنترنت»: وسوم HTML الأساسية وتخطيط صفحة ويب · 3 دروس
3

أخطط لصفحة الويب على الورق

ICT P6 Term 1, Theme 1: pp. 38–41
الهدفأخطط على الورق لصفحة ويب لمنتج مساعد متخيَّل.
كلمات جديدة
التخطيط · طريقة وضع الأجزاء في الصفحةيتصفح بسرعة · أن تنظر سريعًا في الصفحة لتجد ما تحتاجالتباين · فرق واضح بين الحروف والخلفيةملاحظات · ما يقوله الآخرون عن عملك ليساعدوك على تحسينه
الشرح

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

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

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

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