الأسبوع 8 · المحور الأول، الدرس ٨ «تصميم مواقع الإنترنت»: وسوم HTML الأساسية وتخطيط صفحة ويب · 3 دروس
3
أخطط لصفحة الويب على الورق
ICT P6 Term 1, Theme 1: pp. 38–41
الهدفأخطط على الورق لصفحة ويب لمنتج مساعد متخيَّل.
كلمات جديدة
التخطيط · طريقة وضع الأجزاء في الصفحةيتصفح بسرعة · أن تنظر سريعًا في الصفحة لتجد ما تحتاجالتباين · فرق واضح بين الحروف والخلفيةملاحظات · ما يقوله الآخرون عن عملك ليساعدوك على تحسينه
الشرح
التصميم الجيد للويب يخدم القارئ. استخدم عنوانًا كبيرًا يلفت الانتباه. واستخدم عناوين فرعية ليتصفح الناس الصفحة بسرعة ويجدوا ما يحتاجون. اجعل الفقرات قصيرة. اختر صورًا لها معنى، وأعطِ كلًّا منها وصفًا. وانتق حروفًا سهلة القراءة وألوانًا شديدة التباين، مثل حروف داكنة على خلفية فاتحة. الآن خطط على الورق لصفحة لمنتج متخيَّل: المصباح الناطق، وهو يقرأ صفحة كتاب بصوت عالٍ. ارسم إطارًا. اكتب عنوانًا رئيسيًّا وثلاثة عناوين فرعية: «ماذا يفعل» و«من يساعد» و«الميزة الخاصة». واكتب جملة أولى تحت كل عنوان. وأضف ثلاث صور، لكل منها وصف. واملأ جدولًا صغيرًا للتخطيط والألوان والحروف. اعرض خطتك على الفصل، واستمع إلى الملاحظات وقرر ماذا تغيّر.
جزء الصفحة
خطتي للمصباح الناطق
العنوان الرئيسي
المصباح الناطق
عنوان فرعي ١
ماذا يفعل: يقرأ صفحة بصوت عالٍ
عنوان فرعي ٢
من يساعد: التلاميذ ضعاف البصر
عنوان فرعي ٣
الميزة الخاصة: يبطئ عند الكلمات الصعبة
الصور
مصباح؛ طفل يستمع؛ كتاب
الألوان والحروف
حروف داكنة على لون كريمي؛ حروف كبيرة وبسيطة
أمثلة محلولة
جيد
صعب القراءة
عنوان كبير وعناوين فرعية وفقرات قصيرة
كتلة نصية واحدة طويلة جدًّا
في صفحة مينا عنوان وعناوين فرعية وفقرات قصيرة. يستطيع زائر مستعجل أن يجد «من يساعد» فورًا. هذا تصفح جيد.
الحروف
الخلفية
سهلة القراءة؟
صفراء
بيضاء
لا
زرقاء داكنة
بيضاء
نعم
تجرب نور حروفًا صفراء على صفحة بيضاء. يقول صديقها: «لا أستطيع رؤيتها». فتغيّرها إلى حروف داكنة. صار التباين قويًّا والصفحة سهلة القراءة.
يعرض→يستمع→يحسّن
يعرض كريم خطته فتقول زميلة: «صورتك الثالثة بلا وصف». يشكرها كريم ويضيف الوصف. ساعدته الملاحظات على التحسين.
نشاط الفصل
خطط صفحتك. ارسم إطارًا كبيرًا على الورق. اختر منتجك المتخيَّل (مثل جرس باب ناطق أو مسطرة قراءة). اكتب العنوان الرئيسي وثلاثة عناوين فرعية وجملة أولى تحت كل منها وثلاث صور بأوصافها وجدولًا صغيرًا للتخطيط والألوان والحروف. اعرضه على زميل. واسأل: ما الواضح وما الذي يجب أن أغيّره؟
تدرّب
1
لماذا نستخدم العناوين الفرعية؟
ليتصفح القراء الصفحة بسرعة ويجدوا ما يحتاجون.
2
أيهما أقوى تباينًا: حروف داكنة على صفحة فاتحة أم حروف صفراء على الأبيض؟
حروف داكنة على صفحة فاتحة.
3
في خطة ثلاث صور لكن وصف واحد فقط. ماذا يجب أن تضيف؟