دورة CSS – الدرس الثالث

قياسي

هذا الدرس جاء متأخرًا جدًا لظروف خارج إرادتي .. 😦 .

وسيكون باللهجة العاميَّة إن شاء الله .. كتجربة أولى لي 😀 .

.

.

أحب أكد في البداية إنو الدرس هذا والدروس الي بعده تطبيقيَّة ، يعني لازم يكون عندك معرفة بلغة التصميم HTML أو XHTML ، وخلفية لا بأس بها عن خواص الـCSS ، وانا ذكرت في الدرس الثاني بعض المواقع الي تشرح هذي الخصائص ، أحس ما في فايدة أو معنى من إنِّي أشرح خصائص مذكورة في 100 موقع !! .. غرضي أشرح كيفيَّة الإستفادة من هذي الخصائص في التصميم ، والي حاب يستزيد عن الخصائص يزور اللنكات السابقة .

أنا رفعت تصميم جاهز لي على 4shared ، أبغاكم تنزلوا هذا التصميم عشان تشوفوه وبعد كده تنشؤوا صفحات HTML و CSS جديدة ، بمشي معاكم خطوة خطوة إن شاء الله وبشرح كيف سويت هذا التصميم وإيش هي الخصائص الي استخدمتها ، وليش استخدمتها ، وكيف استخدمتها بحيث يكون التصميم خاضع للمعايير القياسيَّة ويوحَّد العرض في كل المتصفحات .

اضغط هنا لتحميل التصميم .. }

طبعًا لا أحد يطالع فيه زي ما يطالع في تصاميم الناس الكبيرة ، لأنه فنيًا …. 😦 .. !! .

أهم شي إنه يأدي الغرض التعليمي منه .. 😀 .

.

.

نبدأ على بركة الله .

المرحلة الأولى : التخطيط

هذي الخطوة مهمَّة وهي الي بتوفر لك الوقت والجهد في التصميم ، أول شي لازم تفكر فيه / مجال التصميم ، هل بتعمل تصميم لشركة رسميَّة ؟! .. لمؤسسة تعليميَّة ؟! .. لمدوَّنة شخصيَّة ؟! .. بالتفكير هذا إنت بتحدد خصائص تصميمك ، التصاميم الرسميَّة غالبًا تكون مريحة قليلة الألوان تعكس خدمات المؤسسة ، والتصاميم الشخصيَّة تكون حرَّة الألوان معتمدة بشكل كامل على ذوق صاحب المدونة .

ثاني شي ، لازم تلتزم بأفكار صاحب الموقع ، تنحي ذوقك بنسبة 90 % وتترك المجال الكامل له في اختيار الي بيشوفه مناسب ، بعض المصممين ما يهتم لهذي النقطة ، ولما يجي يوم التسليم .. تلاقي صاحب الموقع متضايق وملاحظاته كثيرة ، طبعًا في ناس مريحين يتركوا لك التصرف الكامل ، لكن في ناس يكون عندهم تصور معين عن التصميم ولازم إنت تحاول تكتشف هذا التصور وتنقله على أرض تصميمك .

كـ ” هواة ” إحنا بننشئ غالبًا تصاميم تعبر عن فكرة معينة نحملها في عقولنا ونترك المجال للناس يتأملوها معانا ! .

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

وأبغى الألوان تكون أزرق + أورانجي ، لأني أحب اللونين هذولي لما يجتمعون في التصاميم ، امممممم .. وأبغى sidebar واحد على جهة اليمين .

بخلي التصميم بعرض 760 بكسل ، لأني ما أحب التصاميم الممتدة أحسها عفشة 😛 ، وإيش كمان ؟! .. بيكون في قائمة على اليمين ، وأزرار تحت الهيدر بستخدم فيها الصور إن شاء الله .

كده أكون حددت تقريبًا أهم خصائص تصميمي ، وعلى فكرة .. أنا كنت رسمت هذا الكلام على الورق ، وفي ناس أدق مني ما شاء الله بيحددون من البداية لون السايد بار وخلفية القوائم وزي كده .. لكن أنا بترك هذي الشغلات لذوق يدي وهي تشتغل 😉 .

المرحلة الثانية : إنشاء هيكل التصميم بلغة XHTML

افتح برنامج notepad++ أو أي محرر نصوص آخر ( المفكرة من ويندوز مثلاً ) .. وابدئ في إنشاء ملف الـHTML .

اكتب هذا السطر أعلى الملف :

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;

وداخل وسم الـHTML اكتب :

xmlns=”http://www.w3.org/1999/xhtml&#8221; xml:lang=”en”

.

.

إحنا ما راح نستخدم الجداول في ضبط التصميم ، مثلما ما قلنا بنستخدم الوسم div ، كيف ؟! .. أنا بقولك ، بس لازم تركز معي تمام تمام :

أول شي بيكون عندك الغلاف الخارجي الي يجمع كلَّ أجزاء التصميم .

ثانيًا قسِّم مكونات الصفحة أفقيًا ، بيكون عندك 4 أجزاء :

1- الهيدر .

2- الأزرار .

3- السايد بار والمحتوى في مستوى أفقي واحد .

4- الفووتر .

الحين خذ كل وحدة من هذي الأجزاء الأفقية وقسمها عموديًا :

1- الهيدر ، الاعمدة بعدد الصور ، وإذا عندك صورة وحدة فهذا يعني ما في تقسميات عمودية .

2- الأزرار ما فيها تقسيمات عمودية .

3- السايد بار عمود والمحتوى عمود .

4- الفووتر نفس الهيدر ، الأعمدة بعدد الصور .

اللون الأخضر / الغلاف الخارجي .

اللون الأحمر / التقسيم الأفقي .

اللون الأزرق / التقسيم العمودي .

الآن ننشئ div الغلاف الخارجي ، داخله div لكلِّ جزء أفقي :

أتمنى تكون الصورة اتضحت لما شفتوا الكود ، بعد كده نجي للتقسيم العمودي ، نبحث عن الأجزاء الي فيها تقسيمات عمودية ونكتب جوتها div الأعمدة .

في هذا التصميم ، عندنا عمودين فقط ، في الـ div الي اسمه sub-main وهي السايدبار والمحتوى مثلما شفتوا .

هذي أسهل طريقة لقيتها للتقسيم ، وهي بتساعد كمان الناس الي متعودة تقسم بالجداول وتبغى تبدأ تقسم بـ div .

.

.

الآن نبدأ بوضع عناصر الصفحة في أقسامها .

نجي للهيدر ، الهيدر يحتوي على 3 شغلات :

1- الصورة .

2- عنوان الموقع .

3- وصف الموقع أو شعاره .

بالنسبة للصورة ، هي عبارة عن خلفية بنضبطها في ملف الcss .

العنوان في وسم h1  ، ووصف الموقع في وسم p .

هذا عن الهيدر ، الحين نبدأ بالأزرار ، راح نحتاج وسوم a بعدد الأزرار الي عندنا ، وفي ملف الـHTML احنا ما راح نحدد إلاَّ النص المكتوب على الزر ، لكن خلفيته بنحددها في ملف css لاحقًا إن شاء الله .

أكيد لاحظتوا إني استخدمت مع الأزرار class ما استخدمت id ، ليش ؟! .. لأنَّ الأزرار تتكرر أكثر من مرة ، واحنا قلنا في الدرس الأول إن الـId تستخدم مع الأجزاء الي ما تتكرر في الصفحة مثل الهيدر والفووتر ، والـclass يُستخدم في الأجزاء الي تتكرر مثل الأزرار والقوائم ، وعشان كده نفس اسم الclass حطيته في كل زر .

بعد كده نجي للسايدبار ، أهم شي في السايدبار هو : ” القائمة الجانبيَّة ” ، الأشياء الي غيرها اختياري بين نصوص وصور وغيرها .

بالنسبة للتصميم هذا ، كل الي أبغاه ” قائمة جانبيَّة ” و ” نص ” .

القائمة الجانبيَّة في وسم ul ، والنص في وسم div وبرضو لو استخدمت وسم p ما راح تفرق معايا .

عندنا الحين المحتوى ، أنا حطيت في المحتوى مقالين لكل واحد منهم عنوان واسم كاتب ، العنوان استخدمت وسم h1  ، والمقال استخدمت له وسم div ، واسم الكاتب استخدمت p .

آخر شي بقي لنا الفووتر ، هو أسهل شي ما راح نحتاج فيه غير نص حفظ حقوق التصميم داخل وسم span ، وإذا عندك موقع أضف لنكه داخل وسم a .

وبكده نكون خلصنا بناء هيكل الـHTML والحمدلله ، وباقي لنا نشتغل على تنسيقات الـCSS .

في ملف الـHTML كوَّنا الصفحة فقط ، ما حطينا الخلفيات ولا تنسيقات الخطوط ولا الطول ولا العرض ولا شي ، وبعد ما تحفظ الملف بامتداد .html ، وتفتحه بالمتصفح بتلاقيه صفحة عادية جدًا ، كل التنسيقات بنكتبها إن شاء الله في ملف الـCSS في الدروس القادمة .

.

.

أتمنى أعرف رأيكم حول الشرح باللهجة العاميَّة 🙂 ..

شخصيًا ، تعبني وشكلي بردّ للفصحى فديتها 🙂 ..

ملاحظة خاصَّة بمستخدمي الفايرفوكس :

لو واجهت مشكلة مع الترميز في الصفحة وظهرت لك حروف غريبة ، غيِّر الترميز بكتابة هذا السطر بين وسمي الـhead :

<meta charset=“windows-1256”>

وعيشوووووووا بحماااااااااااااس 😀

Advertisements

11 responses »

  1. هههه , احلى شي الحماس في نهاية الموضوع 😛

    قرأت الشرح ! , والآن وقت التطبيق .. متعييجز 😛

    لا لا ان شاء الله اطبق الدرس واعرض التطبيق لما يصير عندي وقت ..

    اللهجة العامية فهمت عليها بعض الشيء , انت اردنية ! 🙂 ؟؟

    درسك متميز ! , والتصميم تميزه اعلى واكبر ! 🙂

    اعجبتني الالوان في التصميم اكثر شي …

    موفقة ان شاء الله , وشكرا على الدرس …

  2. لا والله مش أردنية .. لهجتي لهجة دارجة في ( جدة ) ..
    أهلاً فيك بالمدونة أخي الكريم بحمااااس 🙂
    .
    .
    ( عيشوا بحماس) عبارة مسروقة من خبير التطوير الذاتي : رشاد فقيها الله يحفظه .

  3. جميل شرحك وواضح .. لكني اعتب عليكِ عدم كتابته بالفصحى لانك حرمتي من لايفهم غيرها من الشرح!
    هناك من سيسأل والبعض سيترك الامر وبذا لن يتحقق هدفك (حصول الفائدة لزاورك) 🙂

    بصفة عامة .. اعجبني جداً شرحك واستفدت كثيراً .. سأتابعك ولا تتوقفي أرجوكِ (f) ..

  4. من ؟ 🙂
    سلوى في مدونتي ؟
    والله سعدت جدًا بهذه الزيارة وبهذه الشهادة يا كريمة ..
    وعن الفصحى ، فهي عشقي ، ولكنِّي ارتئيتُ تجريب ” العاميَّة ” كـ تجربة فقط 🙂 .. وقد فكَّرتُ أمس بتغيير الدرس إلى فصحى لشدَّة ما ” لم ” يرقني الأمر .

    أهلاً بكِ دومًا ..
    وأبدًا

  5. شرح ممتاز و درس جميل. أعشق هذه اللغة كثيرة و قد تعلمتها من خلال القراءة و التجربة إنما ما يزعجني أحيانا هو عدم إتباع بعض المتصفحات للمعايير القياسية لهذه اللغة، فتظهر تصاميمنا في كل متصفح بشكل مختلف.

    في أمان الله ..

  6. عزيزتي كمبيوترية 🙂
    سُررتُ بتواجدك هنا ، وقد أعجبتني فكرة الصفحة الرئيسية لمدونتكِ لما زرتها .
    أهلاً بكـ (f)

  7. دائماً احاول اتعلم هالامور والـ css اصبح من اشد اهتماماتي رغم خبرتي الضعيفة فيه

    لكن باذن الله على يد الخبراء امثالك تكون بداية جيدة لي

    شاكر لك

اترك رد

إملأ الحقول أدناه بالمعلومات المناسبة أو إضغط على إحدى الأيقونات لتسجيل الدخول:

WordPress.com Logo

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   / تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   / تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   / تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   / تغيير )

Connecting to %s