- الإنطلاق في عالم تصميم وتقطيع وتركيب وبرمجة قوالب الووردبريس:
---- التركيب أو التكويد.
----- التكويد بـ Html و Css
-------------
مرحباً بكم أخواني الكرام من جديد..
في هذا الجزء الجديد والمختلف كلياً عن الأجزاء السابقه, سنقوم بتركيب (تكويد) القالب الذي قمنا بتقطيعه في الجزء السابق..
والتكويد سيكون بلغتين خاصه للبرمجة وتنسيق صفحات الأنترنت وهي مشهوره جداً..
HTML + CSS
آخر إصدار للـ HTML هو الخامس,,
وآخر إصدار للـ Css هو الثالث..
الـ Html خاص ببناء صفحة الأنترنت من نصوص ونماذج وجداول ... ألخ.
والـ Css لغه تنسيقيه خاصه لتنسيق ما بنيته بـ الـ Html .
بمعنى آخر: تحديد الطول والعرض وتركيب الصورة بماكنها المطلوب وتحديد الخط وحجمه وشكله وتغيير الخلفيه... ألخ.
وكلا اللغتان لهما دروس كثيره في الأنترنت تستطيع البحث عنها..
لذلك سأقتصر على الأشياء المهمه في الدورة..
ملاحظه هامه جداً:: المتصفح المستخدم في الدورة هو متصفح الفايرفوكس.. قد تواجه بعض المشاكل في التنسيق اذا استخدمت متصفح آخر..
[ توضيح بعض أهم العناصر التي سنستخدمها في هذا الجزء ]
نبدأ بـما يسمى بـ "وَسم":
الوسم هو الكود بذاته , مثل:
هذا يسمى وسم رابط نصي,, لأنه يحتوي على النص"Zyzoom"
والرابط تضعه بدل رمز # .
وسم الفتح هنا هو:
وَ وسم الإغلاق:
وهناك وسوم كثيره في الـ HTML وكل وسم له وظيفته المعينه, مثل الوسم السابق خاص بوضع رابط لما بداخله.
وايضاً هناك وسوم للنماذج و وسوم للجداول و وسموم للقوائم النصيه و وسوم للنصوص.
سنتعرف عليها أكثر في دورتنا هذه..
----------
سيمر علينا في هذا الجزء وسوم عامه وتسمى وسم div .
ويكون هكذا:
كما تلاحظ " div " وهو عام تضع بداخله ما تشاء من وسوم,,
و وظيفته أنه يكون كـ إطار لما بداخله كي تتحكم بسهوله بها بسهوله تامه..
وهناك أمر أحب أن أنوه عليه قبل البدء وهو:
أو
كما ترى نفس الوسم لكن الإختلاف في شيء واحد وهو:
الـ "id" و الـ "class"
تستخدمان في تحديد إسم معين للوسم.. حتى إذا اردت تنسيقه بـ Css تكتب إسم الوسم ثم التنسيقات الخاصه به.
وهناك إختلاف بسيط بين الـ "id" وَ "class" هو أن:
الوسم المبدوء بـ "id" لا يمكن تكراره في نفس الصفحه.
والوسم المبدوء بـ "class" يمكن تكراره بنفس الأسم, وتنسيق وسم واحد منها يطبق على كل الوسوم إذا كان لها نفس الأسم والخاصيه "class".
----
مع الشرح سأتطرق لشرح أكثر الوسوم إستخداماً في هذا الجزء:
أعددت 105 صور للشرح في هذا الجزء فقط!!!
الله يعينكم علي:d:
وسأضع الصور بالترتيب في مجلد آخر الموضوع بإذن الله تعالى..
نبدأ على بركة الله...
(1)
أولاً: قم بإنشاء مجلد جديد على سطح المكتب, وقم بتسميته ما تشاء.
(2)
إفتح المجلد ثم قم بإنشاء مجلدين آخرين:
قم بتسمية المجلد الأول إلى: image وهذا المجلد نضع فيه الصور التي تم تقطيعها من القالب.
وقم بتسمية المجلد الثاني إلى: js : وهو مجلد سنحتاجه, وسنشرحه في جزء خاص به.
(3)
قم بنقل صور القالب الذي تم تقطيعه إلى مجلد image.
(4)
قم بفتح محرر النصوص (تم وضعها في جزء سابق ), وسأختار الدريم ويفر,
ثم إختر HTML .
إذا كنت تستخدم notebad++ أختر من قائمة language أختر منها Html . وإذا كانت القائمه مُفهرسه أختر رمز H ثم من القائمه المنسدله HTML.
(5)
لاحظ الكود المُحاط بالمربع الأسود, الكود في الأعلى: أكتب إسم الصفحه بدل: "untitlred Ddocument".
وفي المربع الأسفل يظهر لك "وسمين" أسفل بعضهما, وسيتم بناء الموقع بينهما.
(6)
أكتب هذه الأكواد.
لاحظ الوسم "<body>" في أول السطر, وفي آخر السطر: "</body>" تم كتابة الأكواد بينها.
هنا نبدأ الآن بكاتبة أجزاء الموقع الرئيسيه, وهي: الهيدر Header - الكونتنت Content - الفوتر Footer .
لاحظ أننا وضعنا لهم نفس الوسم لكن يختلفون في الأسماء, والـ Html حساسه لحالة الأحرف..
الـ id : يعني أن هذا الوسم لا يتكرر إلا مره واحده في الصفحه فقط..
حيث سيكون لدينا هيدر واحد وكذلك كونتنت وفوتر 1.
طبعاً يفضل وضع تعليق بعد نهاية الوسم لكي تعرفه عندما تكثر الأكواد..
والتعليق هكذا:
طبعاً لا يظهر في الصفحه.
(7)
الآن قم بحفظ الصفحه لاكن لا تغلقها!
إحفظها بإسم: index.html .
[1] تكويد وتنسيق الهيدر.
====================
(8)
كما ترى بدأنا بتكويد أول جزء من أجزاء الهيدر,, كما هو ظاهر في الصورة.
داخل وسم "Header" كتبنا وسم جديد بإسم "H-top" وطبعاً "id" لانه غير متكرر.
وبداخله وسم نصي وهو:
وهذا الوسم يأخذ عرض الصفحه كامله إلا إذا حددت له عرض مُعين كما سنبينه .
وأسمينها بـ "Welcome".
أيضاً كتبنا وسم جديد داخل وسم "H-top" وهو وسم "Clock" للوقت والتاريخ,
و "span" وسم نصي حر.. أي أنه يأخذ طول الكتابه فقط, ويتمدد معها.
أكتب الأكواد السابقه..
(9)
الآن نكتب وسم جديد للشعار, ونكتبه داخل وسم "Header" بعد نهاية وسم"Clock" .
الوسم أسميناه "logo" وداخل هذا الوسم وسم رابط وهو
وداخل وسم الرابط وسم صورة
وضعنا وسم الصورة داخل وسم الرابط كي تصبح الصورة قابله للضغط,, أي انها مربوطه بموقع.
src: لتحديد الصورة.
title: إذا لم تظهر الصورة ستظهر عنوانها.
alt: عند وضع المؤشر على الصوره سيخرج العنوان.
ووضعنا هذه الوسوم داخل وسم "logo" حتى نتحكم في الصورة بشكل سهل جداً.
(10)
الآن سنكتب وسم جديد خاص لأيقونات الـ Rss و المشاركه مع المواقع الإجتماعيه.
كما في الصورة السابقه,, وسم جديد بإسم "site_share" يحتوي على 3 وسوم للصور مربطوه بوسم الرابط.
(11)
هنا كتبنا وسم الصفحات,, الوسم بإسم "pages" وداخل هذا الوسم وسوم قوائم نصيه وهي:
<ul> : هذا يعني المكان الذي سيحتوي على الـ <li>.
<li> : هذه هي القائمه وتكتب العنوان داخلها.
طبعاً داخل الـ <li> وسم رابط.. لجعل عنوان الصفحه قابل للضغط للإنتقال إليه.
(12)
هنا تكويد "خريطة الزائر", والوسم أسميناه بـ "map" وبداخله وسم نصي كما شرحته سابقاً.
(13)
هنا تكويد لنوذج البحث.. طبعاً هناك وسم خاص فيه لا يمكن مشاركته مع غيره.
لاحظ أن فورم "نموذج" البحث داخل وسم عادي وهو "search"
وبداخله وسم خاص للنماذج وهو: <form> :
name: تعني إسم النموذج.
method: وتعني ماذا تريد أن تفعل بالبيانات المدخله؟؟ ولها خيارين:
1- post = إرسال البيانات.
2-get = جلب البيانات.
وطبعاً في البحث نريد إرسال بيانات لذلك سنستخدم الـ "post" .
بداخل وسم <form> وسمين "input" وهما لإستخدام الإداوات:
الأول: input ونوعه "text" أي اداة النص - title = العنوان للاداة - value = قيمة الأداة - id = مُعرف الأداة, وتستطيع إستخدامها في التنسيق بـ css .
الثاني: وسم input ونوعه "button" أي زر , وباقي الخصائص تم شرحها أعلاه.
(14)
الآن إنتهينا من تكويد الجزء الأول وهو الهيد.
ولاحظ هذا الشكل الغير مرغوب لدى الجميع,, بدون أي تنسيق أو ترتيب !!
---------
الآن سنقوم بإستخدام اللغه الثانيه وهي الـ Css لتنسيق الهيدر حتى يصبح كما في التصميم..
نبدأ الآن:
(15)
أفتح ملف جديد بالبرنامج الذي تستخدمه.
(16)
أختر لغة: Css . بالدريم ويفر,,
أما اذا كنت تستخدم الـ notepad فأختر من قائمة
language > C > CSS
(17)
الآن قم بحفظ الصفحه: File > save As و قم بتغيير إسم الصفحه إلى: Style.css.
(18)
كل متصفح من المتصفحات الخاصه بالأنترنت مدموج معها تنسيقات إفتراضيه للغة الـ Html .
لذلك ستجد الفورم الأفتراضي بدون تنسيق في متصفح يختلف عن الفورم بدون تنسيق في المتصفح الآخر,,
لذلك حتى نقوم بتنسيقنا الخاص, لابد من إرجاع قيم التنسيق إلى الصفر مثل ما يُقال.
وهذه الطريقه تمسى: Reset Css وهو كود Css طبيعي جداً موجود بداخله وسوم Html تم تصفيرها وإرجاعها إلى الوضع العادي.
أدخل على الموقع الموضح أعلاه, ثم تابع الشرح.
(19)
قم بنسخ ما بين الخطين الأفقيين .
(20)
قم بلصقها في بداية صفحة الـ Style.css.
(21)
الآن توجه إلى صفحة الـ Html السابقه, ثم أكتب هذا الكود فوق <title>... .
هذا الكود مهم جداً وهو يقوم بربط ملف الـ Style.Css بـ Html حتى يتم تطبيق التنسيقات التي تجريها على ملف Style.css .
href = إسم ملف التنسيق Style.css .
(22)
الآن قم بفتح صفحة الـ index.html بمتصفح الويب.. ستلاحظ أن المسافات الزائده قد إختفت,, وهذا عمل كود reset css .
(23)
الآن سنقوم بتنسق جسم الصفحه وهو وسم "body" [راجع الصورة رقم 5 ].
أولاً طريقة كتابة أسم الوسم المراد تطبيق التنسق عليه:
** إذا كان الوسم بدون "di" أو "class" أو مُعرف, مثل الـ "body" تماماً:
هذا تكتب إسم الوسم مباشره بدون أي رموز قبله.
وبقية الأنواع سيتم التطرق لها عند ذكرها.
أسم العنصر هو "body" ثم نفتح التنسيق بـ "قوس معكوف" }
ونغلقه بـ {
أي هذا:
حيث أن "xxxxx" هو أسم العنصر, والقوس الأول فتح بداية التنسيق, والقوس الآخر إغلاق التنسيق.
وطريقة كتابة الخصائص هكذا:
الخاصيه:(نقطتان رأسيتان) القيمه ; (فاصله منقوطه)
الآن سأشرح الخصائص:
width = العرض.
height: الطول.
direction: إتجاه الصفحه, وتحتوي على 3 قيم:
--- inherit = أظنها الوضع الإفتراضي!! والله أعلم.
--- RTL = جهة الصفحه من اليمين إلى اليسار.
---LTR = جهة الصفحه من اليسار إلى اليمين.
backgraound = خلفية الصفحه: تستطيع وضع صورة (سنشرحها) أو خلفية لون ويكون هكذا:
علامة "#" ثم رمز اللون.
وأيضاً تستطيع وضع صورة و لون.
border-right: خط من جهة اليمين, وكتابتها هكذا:
border-right: حجم الخط (مسافه) نوع الخط (مسافه ) لون الخط;
و solid = نوع الخط متصل.
border-left: جهة الخط من اليسار,, وبقية الخصائص كما في السابق.
margin: الهوامش التي تكون خارج العنصر.
padding: الهوامش التي تكون داخل العنصر.
font-family: نوع الخط.
font-size: حجم الخط بالبكسل.
color: لون الخط.
هذه أغلب الخصائص التي سنستعملها في التنسيق, بقي القليل سأشرحها عند المرور عليها.
(24)
text-decoration: شكل النص, هل تريد خط أسفله أو فوقه أو في المنتصف.
none: لا شيء.
وباقي الخصائص تم شرحها أعلاه..
أما العناصر:
فإن "a" إشاره إلى وسم الروابط سواء نصيه أو صورة, لكن خصائص الخط لا تنفع إلا في الروابط النصيه.
a:hover = النص عند مرور الماوس فوقه, أي سيتم تنفيذ هذه الخصائص إذا تم مرور الماوس من فوقه.
(25)
أعلاه تم تنسيق جسم الصفحه.. الآن سنبدأ بتنسيق الأجزاء الرئيسية الثالث, وهي: الهيدر, الكونتنت, الفوتر.
[||||]: بداية تنسيق الهيدر:
لاحظ الصورة أعلاه: سنقوم بتنسيق الهيدر ثم تنسيق ما يحتويه الهيدر من وسوم..
لاحظ أننا أستخدمنا الرمز "id" ثم إسم الوسم,, إذاً كيف نكتبه بـ CSS:
** إذا كان الوسم يحتوي على الرمز "id" نستخدم رمز"#" للإشاره إلى أنه "id" ثم إسم الوسم, مثال:
لاحظ أننا كتبنا رمز "#" ثم إسم العنصر ثم الأقواس.
وإسم العنصر هنا هو: Header.
يجب الأنتباه إلا أن الـ HTML و الـ CSS حساسه لحالة الأحرف.
(26)
هنا إستخدمنا خاصيه جديده في الـ CSS:
position: أي الموضع ( موضع العنصر).
والقيمه: relative: وظيفتها أنها تسمح لك بتحريك العناصر التي تكون داخل هذا العنصر.
backgraound: هنا الخلفيه كما أشرت أليها سابقاً. - url = رابط الصورة (الرابط بين قوسين), no-repeat = بدون تكرار الصورة.
ولاحظ أننا أخذنا قيمة الـ width من عرض الصورة. وقيمة الـ height من طول الصورة, ولا بد أن تكون القياسات مطابقه لقياسات الصورة و بالبكسل.
(27)
الآن تم وضع الخلفيه للهيدر,,
لماذا أصبحت النصوص في الجهه اليمنى من الصفحه؟؟ لأننا إستخدمنا القيمة RTL والتي تعني Right To Left إستخدمناها في العنصر body في الخاصيه direction.[إرجع للخطوه رقم 33].
(28)
في النقطه السابقه إنتهينا من الهيدر, والأن نُنسق ما بداخل الهيدر.
هذا الجزء الذي يكون في الأعلى ويحتوي على محتويين نصيين, أحدهما كلمة ترحيبيه أو أي كلمة ترغب بها. والثانيه تقوم بعرض التاريخ والوقت.
الوسم: H-top لتنسق الشكل والخلفيه, ويحتوي على وسمين هما:
Welcome : العباره الترحيبيه.
Clock : تعرض الساعه
ولاحظ أننا كتبنا الوسم الرئيسي (H-top) ثم كتبنا الوسم الفرعي (Welcome) و (Clock), من الأفضل كتابتها هكذا,, الوسم الرئيسي أولاً ثم بجانبه الوسم الفرعي.
وهنا إستخدمنا خاصيه جديده من خصائص الـ css وهي :
float: وتعني الإزاحه, وتحتوي على 3 قيم:
inhehirt: أظنها الوضع الطبيعي.
none: بدون.
Right: إزاحه بإتجاه اليمين.
Left: إزاحه بإتجاه اليسار.
وأيضاً إستخدمنا: text-align = إتجاه النص والقيم هي:
Right: يمين.
Left: يسار.
Center: توسيط.
justify: محاذاة النصوص من الجانبين اليمن واليسار.
(29)
الآن سنقوم بتنسيق شعار الموقع..
أستخدمنا العرض والطول للصورة.
position: وتعني الموضع كما شرحناها,
وقيمه جديده وهي: absolute: وتعني أن العنصر حر وقابل للتحرك داخل الوسم التي تكون خاصية "position" فيه = "relative"
ونقوم بتحريكها في الأتجاهات الأربع:
Right: يمين.
Left: يسار.
Top: أعلى.
bottom: أسفل.
ثم نضع القيمه بعد الخاصيه بالبكسل.
هنا حركنا شعار الموقع من الأعلى 39 بكسل و إلى اليمين 50 بكسل.
(30)
هنا قمنا بتحريك الوسم الذي يحتوي على الأيقونات إلى مكانه الصحيح بإستخدام الـ Top و Left بعدما وضعنا له القيمه absolute لخاصية الـ posiition.
(31)
وهنا نقوم بتحريك الأيقونات ووضع مسافه بينها كما في التصميم.. والقياسات تم أخذها من التصميم.
ولاحظ أن وسوم الأيقونات ذاتها هي فرعيه داخل وسم رئيسي وهي site_share .
(32)
هنا تنسيق وسم الصفحات ( ليس النصوص وإنما الوسم المحتوي على النصوص ).
وضعنا له خلفيه و الـ width + height هي طول وعرض الخلفية.
(33)
الآن نقوم بتنسيق النصوص.. لو تذكر معي أننا جعلنا النصوص داخل وسوم خاصه بالقوائم النصيه [راجع الخطوه رقم 11].
هنا سأشرح لكم الوسوم المستخدمه:
pages ul:
أولاً pages : هذا الوسم الرئيسي لجزء الصفحات.
و الـ ul هذا وسم ( كتبناه هكذا لأننا لم نضع له معرف أو رمز ) الـ ul يكون بداخله (يحوي على ) الـ li.
pages ul li:
الـ pages و الـ ul شرحناها أعلاه,, و الـ li هو الذي يكون داخل الـ ul وهو يحتوي على النصوص التي تريدها كـ قوائم.
أدري أنكم مافهمتم علي:d:
أحس أني ما أعرف أشرح:f:
pages ul li a :
الـ a تعني الرابط الذي يحتوي على الـ li الذي يحتوي على ul :hh:
تقوم بتنسيق النص المضاف له رابط.
الخصائص الجديده هنا:
display: شكل النص من ناحية التجانب.
أي تريد النص أسفل بعضه أو بجانب بعضه؟.. طبعاُ في التصميم القوائم بجانب بعضها.. لذلك إستخدمنا القيمه:
inline: وتعني القوائم على خط واحد.
font-weight:bold: وتعني شكل الخط,, وهنا أخترنا الخط يكون عريض.
(34)
هنا قمنا بتنسيق جزء خريطة الزائر أو أين أنا؟ ..
والخصائص تم شرحها في الأعلى..
لكن لحظ خاصية الـ margin : تحوتي على قيميتن:
الأولى: 6px = تضيف مسافه بمقدار 6 بكسل من الأعلى والأسفل.
والثانيه: 8px = تضيف مسافه بمقدار 8 بكسل من اليمين واليسار.
وتستطيع كتابة الجهات الأربع في سطر واحد هكذا:
وتكون هكذا: فوق = 1 بكسل يمين 2 بكسل أسفل 3 بكسل يسار 4 بكسل.
وإذا كانت قيمة margin تساوي auto فهي تقوم بتوسيط العنصر تلقائياً في الصفحه.
(35)
تنسيق البحث:
الوسم الأول هو الذي يحتوي على نموذج البحث.
الوسم الثاني هو لمربع النص الخاص بالبحث: وتم تنسيق موضعه والخط وإضافة الصورة كـ خلفية وتصفير الحدود.
و الـ stext هي قيمة الـ id في الـ html [راجع الخطوة رقم 13].
الوسم الثالث: لتنسيق ( زر ) البحث.
واستخدمنا خاصيه جديده هي:
Cursor: وتعني شكل أيقونة مؤشر الماوس عند مرور الماوس على العنصر.
والقيمه: pointer = تعطي الماوس شكل إصبع يد.
(36)
بحمد الله تم تكويد الهيدر بـ Html و تنسيقه بـ Css .. وأصبح مطابقاً للتصميم بفضل الله تعالى.
وبهذه الطرق والخصائص سننهي الجزئين الباقيين وهما الـ Content و الـ Footer بإذن الله تعالى.
[2] تكويد وتنسيق الكونتنت.
(37)
كما ترى في الصورة أن الكونتنت ينقسم إلى قسمين:
على اليمين: البوست Posts هو لعرض التدوينات والأرشيف وصفحة الخطأ 404 والبحث ... ألخ.
على اليسار: السايدبار Sidebar أو القوائم الجانبيه, ويعرض قوائم تختارها في لوحة التحكم الخاصه بالووردبريس, حيث تستطيع منها عرض قائمة الإرشيف و أقسام الموقع (التصنيفات) و تستطيع وضع بنرات إعلانيه... ألخ.
(38)
الآن سنبدأ بجزء التدوينات (Posts) لكن أحب أن أنوه على ان هذا الجزء يحتوي على 3 أجزاء وهي:
جزء العنوان.
جزء نص التدوينه.
نص معلومات التدوينه.
(39)
هذا وسم جديد يحوي جميع التدوينات قمنا بكتابته في الجزء الثاني من الأجزاء الرئيسية وهو الـ "Content",,
ولاحظ أننا قمنا بتسمة الوسم بـ "Posts" ووضعنا الـ "id" لأننا لا نريده متكرر,, لماذا؟؟ لأن الذي سيتكرر هو وسم آخر بداخله أسمه "Psot" وسنضع له "class".
يعني أن وسم الـ "Posts" هو وسم يحوي جميع التدوينات.. وهذا الوسم كـ إطار يُحيط بـ الـ "Post".
(40)
الآن قمنا بكتابة وسم الـ "Post" داخل وسم "Psots" ووسم الـ "Post" يعرض تدوينه واحده..
لكننا إستخدمنا الـ "Class" كي تتكرر وتعرض التدوينات بشكل متتالي.
(41)
الآن نبدأ بالجزء الأول, وهو كتابة وسم العنوان
أسمينا الوسم "Post_h1" إشارة إلى عنوان التدوينه, ووضعنا الـ "class" لأننا نريده أن يتكرر مع كل تدوينه.
أكتب الوسم الموجود في الصورة داخل وسم الـ "Post" وليس "Posts"
أنا أستخدمت وسم النص <p>,, ومن الأفضل إستخدام الوسم الخاص بالعنواين وهو وسم
لكن في التنسيق لا تنسى أن تكتب h1 بدل p .
طبعاُ وضعنا النص كـ رابط بإستخدام وسم الرابط:
(42)
وسم جديد بإسم "entry" لعرض المقال أو محتوى التديونه من صور أو نصوص.. وهذا الوسم يكون داخل وسم "Post" و أسفل وسم العنوان "Post_h1" بعد وسم غلقه مباشره.
و وضعنا وسم نصي جديد وهو الوسم "<p>" لكي ننسق النصوص بـ CSS وأيضاً أن النصوص لا من الأفضل وضعها داخل الوسوم الخاصه بها.
(43)
هذا وسم خاص بمعلومات التدوينه مثل: الكاتب والتاريخ وعدد الزوار والطباعه ...
أسمينا الوسم بـ "Post_meta" وبداخله وسم نصي وهو "<p>" وبداخله نكتب المعلومات كتابه عادية..
والكلمات التي تريدها في رابط ضعها داخل وسم الرابط:
(44)
الآن قم بحفظ صفحة الـ Html .
إنتيهنا من تكويد الجزء الأول داخل الكونتنت وهو الجزء الخاص بالتدوينات أو المقالات..
(45)
لاحظ الصورة:
تجد العنوان في البداية ثم يتبعه نص التدوينه ثم أخيراً معلومات التدينه..
هناك شيء نسيت ذكره وهو التاق tag لكن سنتطرق إليه عند التكويد النهائي بالووردبريس.
طبعاً هكذا إنتيهنا من الجزء الأول وبقي الجزء الثاي وهو الـسايدبار أو القوائم الجانبيه "sidebatr" .
(46)
وسم السايدبار أو القوائم الجانبيه يكون أسفل الوسم "Posts" الذي أنتيهنا منه.
لاحظ: يكون أسفل وسم الـ "Posts" وليس الـ "Post" يعني بعد وسم الإغلاق لـ "Posts" وقبل إغلاق وسم "Contnent" أكتب هذا الوسم.
أسمينها بـ "Sidebar" و وضعنها له "id" لأنه لن يتكرر بل الأقسام التي بداخله ستتكرر.
(47)
الآن نبدأ بكتابة وسم القائمه, أسمينا الوسم بـ "widget" وجعلنها "class" لأنه سيتكرر بنفس الأسم.
بداخل هذا الوسم سنضع ثلاث وسوم:
وسم للعنوان: "widget_h1"
وسم لمحتوى القائمه: "widget_content"
وسم لإضافة الصورة الجماليه:"widget_bottom"
(48)
الوسم الذي داخل وسم "widget" وهو "widget_h1" هذا هو وسم العنوان..
ووضعت العنوان "التصنيفات" داخل الوسم النصي "<p>" .
بإمكانك وضع العنوان داخل الوسم الخاص بالعناوين:
(49)
الآن نكتب الوسم الخاص بمحتوى القائمه الجانبيه. أسميناه بـ "widget_content"
ووضعنا القوائم النصيه داخل وسمين هما:
(50)
هذا وسم نهاية القائمه الواحدة "widget" .
أسميناه بـ "widget_bottom" ..
لن نضع بداخلها شيء.. سنستفيد منه عند التنسيق بـ css لإضافة الصورة الجماليه التي تكون آخر القائمه, وهي المشار إليها بسهم أسود في الصورة أعلاه.
الآن سنقوم بتنسيق الوسوم السابقه..
(51)
قبل البدء بالتنسيق.. كيف نأخذ مساحة جزء الكونتنت و جزء القوائم الجانبيه؟؟
عن طريق المسطره (من أداوت الفوتوشوب )
لاحظ المستطيل الأصفر الصغير.. في يسار الصورة السابقه.. قمنا بإستخدام المسطره للقياس, ويظهر في شريط المعلومات أن العرض هو 227 بكسل, وهذا هو عرض القائمة الجانبيه المناسبه لتصميمنا..
الآن نقوم بعمليه حسابيه بسيطه وهي:
عرض التصميم كاملاً - عرض القائمة الجانبيه = عرض الكونتنت 
k:
لدينا عرض التصميم كاملاً = 1000 بكسل.
وعرض القائمه الجانبيه كما قسناها = 227 بكسل.
إذاً:
1000 بكسل -(ناقص) 227 = 773 بكسل.
وهكذا أصبح الناتج (773 بكسل) هو العرض المناسب لجزء الكونتنت أو التدوينات.
(52)
الآن نبدأ التنسيق بـ Css
ونبدأ بالجزء الذي يشمل على جزء التدوينات وجزء القوائم الجانبيه. وهو الـ"Content".
قمنا بحذف المسافات الزائده.
(53)
الآن نبدأ بتنسيق الجزء الأول داخل الـ "Contnet" وهو وسم الـ "Posts".
وضعنا علامة الـ "#" لأننا إستخدمنا الـ "id" مع الوسم في الـ HTML.
قمنا بتحديد عرض الـ "Posts" بعد إجراء العمليه الحسابيه السابقه.
والطول 100%.
ثم عملنا إزاحه للـ "Posts" بإتجاه اليمين.. لأننا نريد الـ "sidebar" القوائم الجانبيه تكون يسار.
(54)
تنسيق الجزء الثاني داخل الـ "Content" وهو "Sidebar" القوائم الجانبيه.
وضعنا له الإزاحه "float" بإتجاه اليسار.
(55)
الآن هذا هو الناتج.. تم التنسيق الجزئين ووضع أحدهما يمين والآخر في اليسار بإستخدام الخاصيه "flaot".
سننتقل إلى تنسيق الأجزاء التي يحويها الـ "Posts".
(56)
هذا تنسيق الوسم "Post" وهو للتدوينه نفسها.
وضعنا " . " قبل الوسم لأننا إستخدمنا "class" في الـ HTML.
Padding: القيمه الأولى تضيف مسافه 7 بكسل من فوق وتحت, والقيمه الثانيه لا تضيف مسافه من اليمين واليسار.
(57)
تنسيق وسم عنوان التدوينه, وليس نص العنوان.
بقية الخصائص تم شرحها في الأعلى.
(58)
تنسيق نص العنوان.. المشتمل على رابط.
(59)
تنسيق وسم محتوى التدوينه والمقال.. وليس تنسيق لـ نص التدوينه أو المقال.
"line-height" = تباعد الإسطر عن بعضهما.
(60)
هنا تنسيق نصوص التدوينه.
(61)
تنسيق وسم معلومات التدوينه.
تم أخذ الطول والعرض من الخلفيه الخاصه بها.
(62)
تنسيق نص معلومات محتوى التدوينه.
(63)
الآن أفتح صفحة index.html أو اعمل لها تحديث إذا كانت مفتوحه.
تم التنسيق كما في التصميم..
(64)
الآن قمت بتكرار التدوينه.. ولاحظ النتيجه..
ولتكرارها أعمل الآتي:
قم بتحديد أكواد الـ HTML من بداية وسم:
إلى نهاية الوسم ( أي الى وسم إغلاق الـ "Posts" ).
(65)
سنقوم بتنسيق السايدبار أو القوائم الجانبيه..
(66)
هذا التنسيق كتبناه سابقاً في الأعلى,,
..
(67)
هنا تنسيق القائمه نفسها.
حددنا عرض القائمه..
ووضعنا مسافه بمقدار 7 بكسل فوق واسفل, حتى يتم تباعد القوائم عن بعضها.
(68)
تنسيق مكان العنوان وليس العنوان. k:
وضعنا خلفيه للعنوان و الطول والعرض هي أبعاد الخلفية.. والخلفيه غير متكرره.
(69)
هنا تنسيق العنوان نفسه..
قلت في الأعلى أنه من الأفضل وضع وسم العنوان "<h1>" بدلاً من الوسم "<p>",, إذا وضعت "<h1>" ضع في التنسيق بدل "p" الموجود في الصوره أستبدلها بـ "h1".
وإذا مشيت معي لا تغير شيء دعها "p"
(70)
تنسيق محتوى القائمه الجانبيه .
أستخدمنا "reapate-y" في "backgraound" لكي تتكرر الخلفيه بشكل عمودي.
(71)
تنسيق نصوص القائمه..
يمكنك كتابة تنسيق خاص للنصوص.. لكني أفضل التنسيق الذي استعملنها مع النصوص السابقه.
(72)
تنسيق محتوى"ul" التي تحتوي على القائمه "li".
(73)
هنا تنسيق القائمه نفسها.. وليس نصوصها..
وخاصية "list-style" تضيف رمز قبل كل قائمه نصيه.. والرمز هنا هو دائره صغيره..
والقيمه الآخرى "inside" تعني أن الرمز يكون داخل القائمه وليس خارجها.
(74)
تنسيق أسفل القائمه.. وهدفنا هو وضع صوره جماليه فقط..
الطول والعرض للخلفيه.. والخلفيه غير متكرره.
(75)
هكذا أصبت القائمه الجانبيه .. كما في التصميم تماماً k:
ولاحظ أن الرمز أو النقاط التي بجانب كل قائمه فهي في الداخل وليس الخارج.. لأننا إستخدمنا قيمة "inside".
(76)
لاحظ تم تنسيق الجزء الثاني من أجزاء الموقع الرئيسيه وهو الكونتنت "Content" تم التنسيق بنجاح والحمد لله..
وهو مطابق للتصميم..
إذا اردت تكرار القائمه قم بالتحديد من بداية الوسم "widget" إلى نهايته. وقم بلصقها أسفلها تماماً..
ثم غير محتواها إلى ماتريد..
أنا استخدمت وسم نصي:
ووضعت داخلها نص.
بحمد الله تم الأنتهاء من جزئين رئيسين وهما:
الهيدر: Header .
الكونتنت - منتصف الصفحه: Content .
وبقي الآن الفوتر: Footer .
[3] تكويد وتنسيق الفوتر.
(77)
سنبني الفوتر داخل الوسم "Footer".
(78)
الآن نبدأ بالجزء الأول داخل الفوتر, وهو القوائم السفليه..
أضفنا وسم جديد داخل وسم الفوتر وهو الوسم "F_widget" إشارة إلى القوائم السفليه.
ووضعنا له "class" لأنه سيتكرر بجانب بعضهما البعض.
(79)
الآن داخل الوسم "F_widget" نكتب وسم جديد لعنوان القائمه السفليه.
ولاحظ أني إستخدمت لأول مره وسم "<h1>" للعنوان بدل إستخدام وسم "<p>" .
(80)
الآن نكتب وسم محتوى القائمه السفليه وأسميناه بـ "F_widget_content".
ووضعنا بداخله وسم "<p>" نصي واضفنا له نص.
(81)
الآن نكتب وسم جديد للصورة الجماليه في أسفل القائمه.
أسمينا الوسم بـ "F_widget_bottom".
(82)
الآن إذهب إلى أعلى الفوتر وأكتب هذا الوسم قبل بداية وسم الفوتر "Footer" وبعد نهاية وسم "Content"
نريد وظيفة هذا الوسم هو حذف تأثير خاصية الـ "Flaot" التي عملناها للـ "Posts" و "sidebar".
نريد هذا الوسم يحذف تأثيرها على منطقة الفوتر.
كيف؟؟ تابع النقطه التاليه.
(83)
الآن نكتب الخصائص للوسم "clear" .
تكتبها في ملف التنسيق.
وخاصيه جديده هي:
clear: والتي تعني تنظيف, ونضع لها القيمه "both".
فقط..
(84)
لاحظ أين أتى.. في المكان الصحيح.. لو لم نستخدم خاصية الـ "Clear" لكانت الكتابة تحت القائمة الجانبيه مباشره..
(85)
الآن إذهب إلى HTML وقم بالنسخ من بداية الوسم المحدد بالإصفر إلى نهايته المحدده بالأصفر.
وقم بلصقها مرتان ليصبح المجموع لديك ثلاث قوائم.
وأعذروني على الشرح اللي في الصورة ما انتبهت له:d::d: (كللللجه حلووووه):hh:
(86)
بعد تطبيقك للنقطه السابقه قم بحفظ الصفحه "CTRL + S" ثم أعمل تحديث للمتصفح..
وشاهد النتيجه.. لقد تكررت 3 مرات.. وفي التصميم لدينا 3 قوائم..
سنعمل الآن على تنسيقها,, لكن قبل ذلك دعنا نغير المحتوى.
(87)
طبق اللي في الصورة على القائمه الثانيه.
(88)
طبق اللي في الصورة على القائمه الثالث.
(89)
الآن نبدأ بتنسيق الفوتر.
تصفير المسافات الزائده..
(90)
تنسيق القوائم السفليه..
"width" العرض: حسب عرضها في التصميم.. قسها بأداة المسطرة.
أستخدمنا "margin" لوضع مسافة 20 بكسل من فوق وأسفل.. للفصل بين الـ "Contnet" ونهاية الفوتر.
و مسافه بمقدار 30 بكسل للتباعد بين القوائم الثلاث من جهة اليمين واليسار,, كي تصبح في منتصف الصفحه.
طبعاً علمنا لهم "float" لجهة اليمين..
(91)
تنسيق مكان عنوان القوائم السفليه,, وليس نص العنوان.
الطول والعرض حسب طول وعرض الخلفيه للعنوان...
(92)
هنا تنسيق نص العنوان.
والخصائص تم شرحها في الأعلى..
(93)
تنسيق محتوى القوائم السفليه..
"repeat-y" = تكرار الخلفية بشكل عمودي..
(94)
تنسيق نصوص القوائم التي تكون داخل وسم "<p>" .
(95)
تنسيق قائمة ul .
(96)
تنسيق القوائم النصيه li .
(97)
تنسيق الوسم الذي نريده أن يُظهر لنا صورة جماليه في نهاية القوائم السفليه.
واستخدمنا خاصية "margin" لوضع مسافه بين نهاية القوائم السفليه وبداية أسفل الفوتر بمقدار 15 بكسل.
(98)
الآن بحمد الله أنتهينا من الجزء الأول في الفوتر... تم تنسيق القوائم السفليه بشكل جميل.. ومطابق للتصميم..
(99)
الآن نكتب وسم أسفل الفوتر "E_Footer"
وبداخله وسم نصي لكتابة الحقوق "<span>" وهو للنص الحر ويتمدد مع النص.
وأيضاً كتبنا وسم داخل وسم أسفل الفوتر وهو وسم "<img>" لإضافة صورة.. ووضعنا هذا الوسم داخل وسم الرابط "<a>" ,, لجعل الصورة قابله للضغط..
(100)
هنا تنسيق وسم "E_Footer" وما بداخله من وسوم.
وضعنا عرض الفوتر هو عرض الصفحه 1000 بكسل.
وأستخدمت خاصية الـ "position:relative" لكي تسمح لي بتحريك العناصر التي داخلها بإستخدام "Right - Left - Top - Bottom" بعد وضع قيمة الـ " position" تساوي "absolute" في العناصر المراد تحريكها.
(101)
الآن بحمد الله إنتهينا من التنسيق كاملاً بفضل الله وحده..
وأصبح الفوتر هكذا.. مطابقاً للتصميم..
(102)
إضافه هامة نسيت أن اذكرها بداية التكويد :d:
أضف هذا الوسم فوق وسم الهيدر "Header" وتحت وسم "body"
(103)
الآن أغلق وسم "warp" الذي فتحناه في النقطه السابقه, أغلقه قبل (فوق) نهاية وسم:
(104)
الآن أضف هذه الخصائص باللون الأصفر أكتبها تحت الجزء الخاص بتنسيق body .
وقم بالتعديل على الكود المضلل بالأحمر: وأمسح مايلي:
طبعاُ الأكواد حذفتها ليست موجوده في الصورة أعلاه.. لكن عدل عليها لديك.
(105)
في النهااايه ,,
هذه هي النتيجه التي توصلنا لها خلال التكويد بـ Html و Css وهي مطابقه للتصميم بالكامل..
والحمد لله رب العالمين
لمن لم تظهر لديهم الصور..
الحجم: [5.59 MB]
بعد فك الضغط عن الملف: ستجد مجلدين:
الهيدر: و يحتوي على 36 صورة.
الكونتنت: ويحتوي على 69 صورة ( الصورة رقم 15 تم الإستغناء عنها )..
وهو يشمل الجزئين الأخرين (الكونتنت والفوتر).
في الجزء القادم بأذن الله تعالى.. سنحول صفحة index.html إلى صفحه ديناميكيه بإستخدام أكواد الـ ووردبريس..
قد أضع الجزء القادم يوم السبت: 23 \ 9 \ 1433 هـ..
وذلك نظراً لظروفي في الأسبوع القادم..
إلى اللقاء...
