الجزء الأول وهو بعنوان " دورة توزيع أستايل بتقنية css - الهيدر

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاتة ::

- الجزء الأول وهو بعنوان " دورة توزيع أستايل بتقنية css - الهيدر "

نبدا على بركه الله بـ

"" الفقرة الأولى ""
رآآآح نتعلم بهذه الفقرة كيفية تقطيع أستايل متمدد وكيفية توزيعه بتقنية css وكيفية وضع الروابط ,,

- الخطوه الأولى :: تقطيع الأستايل بالفوتوشوب :-

| هذا شكل الاستايل الاساسي قبل تحديد الشرائح :



| هذا الشكل الأول للستايل بعد التحديد ::



- كما لاحظنا يوجد صورة وآحده --- و الصورة الثانية للتمدد " المجموع صورتين "

- طبعا انا رآح أقطعه على الشكل التالي لأن هدفي هو توضيح طريقة التوزيع لأكثر من صورة بتقنية css - يعني مافيه مشكلة لو قطعنا الأستايل بالشكل الأول .



| طبعا أنا قطعت الأستايل بشكل التالي لأني كما قلت سابقا الهدف من ذلك وهو طريقة توزيع أكثر من صورة بتقنية css



- الخطوة الثانية :: وهي طريقة حفظ الأستايل بعد عملية التقطيع وتحديد الشرائح ::

1- نذهب للملف ببرنامج الفوتوشوب .
2- نختار من القائمة المنسدله " حفظ للويب " اختصار الأمر من لوحة المفاتيح
" Alt+Shift+Ctrl+S "
- الشكل التوضيحي :



3- نكتب أسم الأستايل طبعا باللغة الإنجليزية وأنا كتبت " knoz-mobda "
- الشكل التوضيحي :



4- بعد عملية الحفظ يظهر لنا الشكل التالي بالمجلد الذي حفظنا به سواء كان على سطح المكتب او المستندات :



- نعدل اسم المجلد "images " إلى الأسم الذي كتبناهـ برقم " 3 " كما في المثال التالي :



- الخطوة الثالثة وهي مهمه لأن فائدتها بالتوزيع كبيرهـ وتسهل عليك أمور كثيرة :

1- نروح ونختار ملف الأستايل ونفتحه بـإي برنامج تحرير وأنا فتحته ببرنامج الايكسبرشن وهو نفس البرنامج الذي راح نعمل عليه الدورة - شاهد معي المثال التالي :
- هنا شكل الملف " المحدد بلون اصفر " :



- هنا شكل الملف بعد فتحه ببرنامج الايكسبرشن :



2- بعد فتح الملف نحدد التالي , مثال :



- نقوم بنسخه .

3- نفتح برنامج المفكرة , ونلصقه " ننلصق المحدد بالملف كما في المثال السابق " .
- الشكل النهائي بعد لصقه بالمفكرة ::


- الخطوة الرابعه " بداية التوزيع ببرنامج الايكسبرشن " :

1- نفتح البرنامج " Microsoft Expression Web 2 " , - نختار جديد أو يفتح لك تلقائيا لصبح عندنا الشكل التالي :



2 - نضع الكود الأول " " كما في المثال :



- اللحين نقوم بفصل الكود وهذا الامر مهم , كما في المثال :



3- نضع الكود الثاني "



" كما في المثال :



- الخطوة الخامسه : " نبدا أستخدام الأكود التي بالخطوة الرابعه "

1- نرووح للكود الثاني : مثال :









- أنا كتبت ثلاث متغيرات h1 - h2 - h3-h4 - طيب ليش ؟!
ج/ لأني قطعت الأستايل على أساس أن يكون ثلاث صور , وصوره تمدد , يعني أوضح أكثر :
- شكل الأستايل أثناء عملية التقطيع :



- أوضح أكثر ::
- رآح أبدا بصورة التمدد لأنها هي الأهم بهذه الفقرة , ليصبح شكل الكود هكذا ::
- أ : صورة التمدد وهي h1 .
- ب : صورة رقم واحد وهي h2 .
- ج : صورة رقم أثنين وهي h3 .
- د : صورة رقم ثلاثة وهي h4 .

- مثال توضيحي لـ : " أ " و " ب " و " ج " و " د " ::



- يعني لو مثلا عندنا أربع صور و صورة تمدد يصبح شكل الكود هكذا :

- دائما رآح أبدا بصورة التمدد لأنها هي الأهم ::
- أ : صورة التمدد وهي h1 .
- ب : صورة رقم واحد وهي h2 .
- ج : صورة رقم أثنين وهي h3 .
- د : صورة رقم ثلاثة وهي h4 .
- و : صورة رقم أربعه وهي h5 .

- مثال توضيحي لـــ : " أ " و " ب " و " ج " و " د " و " ذ " ::



- الخطوة السادسة : "
كيفية إدراج الصور وتحديد سواء كانت متمددة أو ثابته , مع تحديد العرض
والارتفاع للصور , وهنا سوف نقوم بكتابة هذه الأوامر ما بين ماعملناهـ
بالخطوة السابقة للكود الاول حيث قمنا بفصل الكود الأول "
- مثال توضيحي ::

نبدا بالخطوة السادسة :

1- أولا رآآح أعطيكم كوديين مهمين وهما أساسيين - ورآآح أوضح لكم الفرق بينهما ! :

* الكود الأول ونستخدمه للصورة المتمددهـ ::
.h1 {
background-image:url('knoz-mobda-t1/knoz-mobda-t_04.png');
background-repeat:repeat-x;
height:350px;
}

- لو لاحظتم معي بدأت الكود بـ نقطه ثــم h1 وكما تعلمنا بالخطوة الخامسة ماهو h1 وهي للتمدد ,,
- مثال لمكان لصق الكود الاول ::

- ملاحظه هامه "" دائما نستخدم الكود الأول ببداية الأمر فقط إذا كان الأستايل متمدد مع تتغير المتغير مثلا لو كان t1 بدلا من h1 نبداء الكود بـ نقطه ثـم t1 "" مثال توضيحي للملاحظه ::
- هنا شكل الكود إذا كان المتغير h1 وهو مانستخدمه بشرحنا الحالي ::



- وهذا مثال لو غيرنا المتغير لأي حرف آخر مثلا لو أخذنا حرف t1 بدلا من h1 مثــال ::



* الكود الثاني ونستخدمه للصورة الغير متمددهـ ::

.h2 {
background-image:url('knoz-mobda-t1/knoz-mobda-t_01.png');
background-repeat:no-repeat;
height:350px;
width:269px;
float:left;
}


- لو لاحظتم معي بدأت الكود بـ نقطه ثــم h2 وكما تعلمنا بالخطوة الخامسة ماهو h2 و h3 و h4 وهي للصور الغير متمدده ,,
- مثال توضويحي لما سبق ::



سوال - طبعا انا عندي ثلاث صور غير متممدة وأنت أعطيتنا كود وآحد للصور الغير متمددة مـا العمل او كيف الطريقة ؟!
ج/ أقول لك بسيطة نقوم بنسخ الكود الثاني وونلصقه مرتين ليصبح عندي ثلاث اكواد ,, مثال توضيحي ::



- اصبح عندي ثلاث أكواد كل كود بدائيتة هي نقطة ثم h2 صح , شوفوا أهم شيء نغيرهـ , انا عندي ثلاث متغيرات للصور الغير متمدده وهي h2 و h3 و h4 إذا : شاهد معي التغيير ببداية كل كود ::



سوال 2 - تقدر تقول لي الفرق بين بين الكود الأول لصورة المتمددة والكود الثاني للصورة الغير متمددة , بالتفصيل ؟!
ج / نعم رآآح أقول لك وبالتفصيل ::

أولا : رآآح ناخذ الكودان للمتممد والغير متممد مثال توضيحي ::



ثانيا : أعرفك على الفرق بينهما تابع معي الصورة التالية :
1- مسار الصور بالكودان :



2- كود تحديد الصورة " متمدد وغير متمدد "



3- كود تحديد " الأرتفاع للصور " ::
ملاحظة هذا الامر او الكود ثابت سواء كان للمتمدد أو غير ممتمدد ::



4- كود تحديد " العرض للصورة " ::
ملاحظة هذا الامر أو الكود فقط للصور الغير متمدده " نقوم بتحديد عرضها لأنها ثابته ولها عرض ثابت " , شاهد معي ::



5 - كود تحديد " الأتجاه يمين - يسار - وسط " ::
ملاحظه هامه هذا الامر او الكود لانستخدمه للصور المتممده , فقط للصور الغير متمددة ,, شاهد معي ::



ملحوظه هامه :: لكل صورة ثابتة اتجاه معين - وهذا يعتمد على التصميم - يعني شوف مكان الصور الثابتة وغير امر الكود :امر الكود هو : left : يسار : للي تحب ! ,,
* اوامر الكود وهي كتالي :
1- يمين : right
2- يسار : left
3- وسط : center

سوال 3- طيب ممكن توضح لنا أهمية الخطوة الثالثة والكود الذي نسخناه وألصقناه بالمفكرة وتركناه مفتوح ؟؟!

ج / ركز معي , فائدة
الكود الذي نسخناهـ سابقا ووضعناه بالمفكرة هو لتسهيل أمر وآحد عليك وهو
تحديد العرض والأرتفاع لكل " الصور " بدل ما تروح لكل صورة وتعمل معاينة ثم
خصائص وتشاهد الارتفاع ثم ترجع للكود وتكتب الارتفاع وهكذا.. وفيه بعض الناس منهم لا يعرف الارتفاع من العرض خصوصا لمستخدم ويندز عربي ,,

سوال 4 - طيب كيف اعرف العرض والارتفاع للصور بالمفكرة, انا عندي مثلا صورة واحدة تمدد وثلاث صور ثابتة صح وإلا لا ؟
ج/ صح , إذا نهتم بالآتي ::
1- نحدد اسم الصورة مثلا صورة ثابتة ناخذ على سبيل المثال knoz-mobda-01.png أذهب للكود الذي نسخناه وابحث عن اسم الصورة الذي اسمها مثلا knoz-mobda-01.png وحدد ارتفاعها وعرضها , , مثال توضيحي للي أقصد ,



طبعا كلن على حسب اسم الصور عنده ولاكن الفكرة واحده .
2- انا قلت سابقا ان الارتفاع يكون ثابت لصور
المتمددة والغير متمددة لجميع المتغيرات التي بحرف مثلا h طيب لو مثلا
غيرنا المتغير لحرف t راح يكون الارتفاع ثابت فقط للمتغير t شاهد معي متغير
h



لو استبدلنا المتغير h بـ t علما بأن الأرتفاع للمتغير h هو مثلا 100 رآآح يبقى كما هو ,,



- لاكن لو مثلا كان عندنا متغيران الأول h والثاني t مثال ::



رآآح يكون للمتغير h ارتفاع خاص به مثلا 100 , ورآآح يكون للمتغير t ارتفاع خاص به مثلا 120 وهــكذا ... ,,
-
بالاخير الشكل النهائي للتوزيع هـو ::



-------------------- إلى هنا قد وصلنا إلى نهاية التوزيع وبقي علينا الخطوة السابعة والثامنه ---------------

شكرا عاشت الايادي