صفحة ٣٠١
انظر إلى الشكل التوضيحي للرسالة الإخبارية الرقمية أمامك. الهدف هنا هو إعلام الجمهور عبر رسالة بريد إلكتروني تفتح داخل عميل البريد مثل البرامج التي يستخدمها الناس لقراءة رسائلهم. لتصميم هذه الرسالة بشكل صحيح، قسّمها إلى ثلاثة أجزاء رئيسية: أولاً رأس الصفحة أو ما يسمى Header، وثانياً محتوى الرسالة أو Newsletter Content الذي يحمل العنوان والنص والصورة، وثالثاً التذييل أو Footer الذي تجد فيه عادة الروابط. انظر كيف يُظهر الرسم كل جزء في مكانه الصحيح على قالب الرسالة الأزرق. لكي تبني هذه الهيكلية في لغة HTML، الأفضل دائماً استخدام جدول HTML ليُنظم المحتوى بدقة ويمنع تشتته.
صفحة ٣٠٢
انظر إلى بنية جدول HTML في أعلى الصفحة. الجدول يتكون من صفوف وأعمدة، وخصخصته تكمن في وسوم محددة. انظر إلى الصندوق الوردي: في لغة HTML لا توجد وسوم لإنشاء الأعمدة مباشرة، بل يتم إنشاؤها من خلال الخلايا داخل الصفوف. ابدأ بوسم table ثم افتح صفاً بوسم tr، وداخل كل صف ضع خلايا البيانات بوسم td. انظر إلى المثال التطبيقي لجدول درجات الطلبة في الرياضيات والتاريخ: الوسم Column Head يمثل رأس العمود، وصمامات الصفوف تشكل جدول البيانات المتناسق. تذكر دائماً أن tr تعني table row أي صف الجدول، وأن td تعني table data أي بيانات الخلية الواحدة.
صفحة ٣٠٣
انظر إلى نافذة الكود البرمجي في الخلفية الصفراء. لبناء جدول درجات الطلبة، نبدأ بهيكل HTML المعروف، ثم نحدد وسوم النمط style لتنسيق الجدول مثل الحدود border بمقدار 1px وحشو الح الخلايا padding بمقدار 3px وتوسيت النصوص text-align بجعلها في المنتصف. انظر كيف استخدمنا الوسم th لإضافة رؤوس الأعمدة مثل اسم الطالب ودرجة مادة الرياضيات ودرجة مادة التاريخ، وكيف استخدمنا الوسم tr لإنشاء كل صف جديد، ثم وسوم td لإدخال أسماء الطلاب والدرجات داخل الخلايا. في النافذة المصغرة بالأسفل، انظر كيف ظهر الجدول منظماً باللون الأبيض والخطوط المحددة.
صفحة ٣٠٤
انظر إلى خطوات إنشاء الرسالة الإخبارية الرقمية الأربع الموضحة أمامك. الخطوة الأولى هي تحديد محتوى الرسالة الإخبارية، وهذا يعني أن تربط المحتوى بالغرض الذي تخدمه عبر كتابة العنوان والنص وتحديد الصور والروابط. الخطوة الثانية هي ضبط هيكل الرسالة الإخبارية، ونظراً لأنها صفحة إلكترونية، فأنت بحاجة لتقسيمها إلى أقسام لسهولة التعامل معها. انظر إلى هيكل الرسالة الأخضر في الأسفل: يبدأ برأس الصفحة Header، ثم عنوان رئيسي Headline، ثم نص Text، ثم صورة Image، وأخيراً التذييل Footer. كل قسم له أسلوبه المختلف في التنسيق والتنظيم.
صفحة ٣٠٥
انظر إلى كود HTML الخاص بإنشاء ملف المحتوى الرئيسي للرسالة الإخبارية. بعد أن أنشأنا الهيكل، نبدأ بإضافة المحتوى بترتيب دقيق داخل الوسم table. انظر إلى الصندوق الأزرق الأول: استخدمنا نمط CSS مضمن background-color بلون محدد لصف الجدول الأول الذي يحتوي على شعار الاتحاد السعودي لكرة القدم. في الصف الثاني، استخدمنا الفئة class بمعرف headline1 لتنسيق العنوان الرئيسي. وفي الصف الثالث، استخدمنا الفئة class بمعرف text1 لتنسيق النص الذي يخاطب مشجعي كرة القدم. انظر كيف ترتبط وسوم HTML بملف CSS الخارجي لتحديد ألوان الخلفيات وحجم الخطوط وتوسيطها.
صفحة ٣٠٦
انظر إلى الجزء المتبقي من كود HTML في أعلى الصفحة. في الصف الذي يحمل فئة photos، قمنا بإدراج صورة الملعب باستخدام الوسم img وحددنا عرضها بنسبة 95% من عرض الخلية لتبدو متناسقة. وفي صف التذييل الذي يحمل الفئة thefooter، أدرجنا قوائم ul وli تحتوي على روابط بريد إلكتروني وروابط مواقع مثل فيفا ويويفا، بالإضافة إلى رابط إلغاء الاشتراك. في الأسفل، يوضح النص أهمية الصور في زيادة رغبة الشخص في قراءة الرسائل، وكيف يمكنك استخدام النمط المضمن وتحديد أبعاد الصورة أو جعل عرضها يشغل نسبة مئوية من عرض خلية الجدول تماماً كما فعلنا.
صفحة ٣٠٧
انظر إلى محتوى ملف CSS الخارجي المخصص لتصميم الرسالة الإخبارية في الصندوق الأصفر. نحن نستخدم هذا الملف لتنسيق عناصر الصفحة بشكل احترافي. انظر أولاً إلى وسم body، حيث نحدد نوع الخطوط مثل tahoma وsans-serif. بعد ذلك، ننتقل لتنسيق عنصر table، فنحدد لون خلفيته باللون الأبيض ونضيف مسافات الفراغ الداخلية padding من الأعلى واليمين واليسار بمقدار 25 بكسل لنعطي شكلاً منسقاً. انظر كيف نخصص الفئات الفردية مثل headline1 لتحديد محاذاة النص لليمين وحجم الخط بـ 25 بكسل وجعله عريضاً بخاصية font-weight، وكذلك الفئة text1 لتنسيق النصوص العادية بحجم 18 بكسل.
صفحة ٣٠٨
انظر إلى استكمال ملف CSS الخارجي المخصص لتنسيق الصور والجدول. في هذا الجزء، نركز على الفئة photos. انظر كيف نحدد الخاصية text-align إلى center لتوسيط الصورة داخل الخلية، مع استخدام overflow بحالة auto لضمان عدم خروج المحتوى. بعد ذلك، انظر إلى التنسيق الخاص بالصورة نفسها photos img: نحن نحدد حدود الصورة بـ border-style كخط متصل solid، وسمك الحدود بـ border-width بمقدار 2 بكسل، ولون الحدود برمز اللون المحدد، وزوايا دائرية بـ border-radius بمقدار 6 بكسل. انظر إلى الصورة النهائية للملعب في الأسفل كيف أصبحت محاطة بإطار أنيق وجميل.
صفحة ٣٠٩
انظر إلى الجزء الأخير من ملف CSS الخارجي المخصص لتنسيق التذييل أو Footer للرسالة الإخبارية. يحتوي التذييل على روابط وموقع بريد إلكتروني ورابط إلغاء الاشتراك. انظر كيف نضبط خصائص thefooter لجعل محتواه في المنتصف مع شريط التمرير عند الحاجة. بعد ذلك، نحدد لون الخطوط في الفقرات p بلون محدد، وننسق القوائم غير المرتبة ul بمسافات فراغ padding تبلغ 5 بكسل وإزالة التزيين بالنص text-decoration بنسبة none. انظر إلى الفئة الفرعية thefooter li a كيف تحدد خصائص روابط التذييل، وتأثير hover الذي يغير لون الخلفية عند تمرير مؤشر الفأرة فوقه.
صفحة ٣١٠
انظر إلى شاشة اختبار مدى استجابة الرسالة الإخبارية في أدوات المطور لمتصفح مايكروسوفت إيدج. انظر إلى زر Device Emulation الموضح في الأعلى، والذي يسمح لك بفتح جهاز المحاكاة واختبار كيف تظهر رسالتك على عدة هواتف ذكية مختلفة. عندما تحدد هاتفاً ذكياً معيناً من القائمة المنسدلة الطويلة الظاهرة أمامك، لاحظ كيف يتيح لك المتصفح رؤية الصفحة وهي تكبر أو تصغر وفقاً لعرض الشاشة المحدد للموبايل. يتيح لك هذا الاختبار التأكد من أن التصميم متجاوب ويعمل بسلاسة عندما يفتحه المستخدمون عبر هواتفهم المحمولة.
صفحة ٣١١
انظر إلى التدريب الأول في صفحة التمرينات. المطلوب هنا هو اختيار الإجابة الصحيحة لكل نقطة من النقاط الثلاث. في النقطة الأولى، فكّر في الوسم الصحيح المستخدم في لغة HTML لتعريف الجدول من بين الخيارات المتاحة مثل table. في النقطة الثانية، ابحث عن الوسم الذي يُستخدم لإنشاء صف جديد في الجدول من بين الخيارات مثل tr. في النقطة الثالثة، حدد الجملة الصحيحة للوسم th وتذكر كيف يظهر النص بداخله بشكل افتراضي. اختر الدائرة المناسبة بجانب الإجابة الصحيحة بناءً على ما درسناه سابقاً.
صفحة ٣١٢
انظر إلى التدريبات الثاني والثالث في الصفحة. في التدريب الثاني، المطلوب منك أن تنشئ جدول HTML يحتوي على خمس خلايا بعرض 100%، ثم تطبق خصائص CSS لإضافة حدود للجدول، وتتبع التعليمات بدقة لتغيير نمط الجدول كإضافة فراغ Padding بقيمة 25 بكسل، وتلوين خلفية الصف الأول، وتوسيط النص للصف الثاني، ومحاذاة النص لليسار للصف الثالث، وضبط حجم الخط وحجم العرض للخطوط في الصفين الرابع والخامس. أما في التدريب الثالث، فالمطلوب إنشاء جدول يحتوي على خطة أسبوعية لنظام غذائي صحي يضم الوجبات الخمس للجسد، مع ضبط الخطوط والأعمدة ونمط الجدول كما فعلنا سابقاً.
صفحة ٣١٣
انظر إلى التدريبات الرابع والخامس والسادس. في التدريب الرابع، عليك إجراء التغييرات المناسبة على ملف HTML الخاص بالرسالة الإخبارية لمشجعي فريق الصقور الخضر لكرة القدم، وذلك لإنشاء مساحة مناسبة لإضافة فقرتين نصيتين أعلى الصورة. في التدريب الخامس، قم بالتغيير المناسب على ملف CSS الخاص بنفس الرسالة الإخبارية لإعادة تلوين الفراغات والتذييل للجدول بلون بنفسجي متناسق. في التدريب السادس، أضف صورة جديدة إلى الرسالة الإخبارية لمشجعي الفريق، على أن تكون هذه الصورة واقعة بين النص والتذييل في بنية الرسالة، ويجب أن تشغل عرض خلية الجدول كاملاً بنسبة 100%.
صفحة ٣١٤
انظر إلى التدريبين السابع والثامن في صفحة التمارين. في التدريب السابع، استخدم محاكاة الأجهزة في متصفح مايكروسوفت إيدج واختر عدة هواتف ذكية لاكتشاف ما إذا كانت الصورة التي أضفتها للرسالة الإخبارية استجابت بالشكل المطلوب، ثم اختبر قدرة العنصر على ضبط حجمه وفقاً لحجم إطار العرض وقارن بين الصور، واكتب استنتاجك في المساحة المخصصة. في التدريب الثامن، أضف فئتين مختلفتين للعناوين الرئيسية وفئتين أخريين للنصوص في ملف CSS الخارجي، لتصميم رسالة إخبارية بنمط مختلف وأكثر كفاءة مع تغيير عائلة الخطوط أو أحجامها أو أوزانها.
صفحة ٣١٥
انظر إلى مشروع الوحدة في أعلى الصفحة. الرسائل الإخبارية تعد وسيلة قوية في المدرسة للإعلام والتذكير بالأحداث المهمة للطلبة وأولياء الأمور والمعلمين. المطلوب منك في هذا المشروع هو إنشاء رسالة إخبارية أسبوعية حول أحد الموضوعات المحددة في الخطوة الأولى، مثل الأحداث المدرسية الحالية والقادمة، أو اللقاءات مع المعلمين والزملاء، أو معلومات عن المنح الدراسية. اتبع الخطوات الخمس المرقمة أمامك بعناية: أنشئ مجلداً باسم myProject ومجلدات فرعية باسم Articles وimages كما في الخطوة الثانية، ثم افتح محرر فيجوال ستوديو كود وأنشئ بنية رسالتك في الخطوة الثالثة، واكتب المقطع البرمجي للنمط في الخطوة الرابعة، وأخيراً اختبر مدى استجابة الرسالة على الهواتف الذكية في الخطوة الخامسة.
