3 / توزيع الهيدر header والفوتر شرح طريقة مصور , فيديو , الاسهل على الاطلاق

http://www.dzbatna.com/images/icons/iconrote.gif 3 / طھظˆط²ظٹط¹ ط§ظ„ظ‡ظٹط¯ط± ظˆط§ظ„ظپظˆطھط± ط´ط±ط* ظ…طµظˆط± , ظپظٹط¯ظٹظˆ , ط§ظ„ط§ط³ظ‡ظ„ ط¹ظ„ظ‰ ط§ظ„ط§ط·ظ„ط§ظ‚

---

http://upload.dzbatna.net/upfiles/mi372123.png

,
,
,

اليوم يااخوان راح نبدأ بالدرس مفصل الثالث , وهوتوزيع الهيدر header والفوتر

• 1 / تصميم الاستايل style شرح طريقة مصور , فيديو , الاسهل على الاطلاق
• 2 / تقطيع الاستايل style شرح طريقة مصور , فيديو , الاسهل على الاطلاق

http://upload.dzbatna.net/upfiles/mJD72695.png

طبعا سيتم عمل الدروس شرح طريقة مصور , فيديو . لتتضح الفكرة بشكل كلي .



http://upload.dzbatna.net/upfiles/TJI98013.png

اول شي بنستخدم برنامج الاكسبريشن ويب تو ,

للتحميل : من هنا ~



ليش يتم استخدامه ؟

للسهولة التامة في الاستخدام وانا بقصد ذلك لتسهيل الامور على المبتدئين , ولكن بامكاننا استخدام اي محرر نصوص كان .

امم طيب ايش اللغه الـ بنشتغل عليها ؟

مبدئيا بنكتفي بلغتين

• Hyper Text Markup Language اختصارها html وهي خاصه فقط بهيكلة الموقع بس طبعا احنا بنشتغل بلغة XHTML كونها منسقة اكثر .

هيكله !!

ايه هيكله , مثلا تتحكم بالجداول وضع الروابط كتابة النصوص وهكذا

• Cascading Style Sheets اختصارها css وهذه اللغة خاصه بالمظهر , تعدل الالوان وضع الصور وتنسيق الصفحة على الوجه العام

واجهة interface البرنامج ,

http://upload.dzbatna.net/upfiles/zU192676.png

طيب يا تركي انت لما شرح طريقةت بالفيديو كنت ماسح كامل البيانات توضيح لاهنت ؟

ببساطة شديده اقدر اقولك اني باتعامل مع سكربت الفبليوتن , وهو يصدر هذه الاكواد من تلقاء نفسه وبذلك مابحتاجها

متى نستخدم هذه الاكواد ؟

بنستخدمها حين عمل تصميم منفصل خاص بسكربت لا يدعم لوحة تحكم للتصميم مثل whmcs

طيب اخر طلب تفيدني باالاكواد الـ بنمر عليها والـ بنستخدمها في الشرح طريقة التالي ؟





http://upload.dzbatna.net/upfiles/mJD72695.png
:: ملاحظات مهمة قبل البدء في العمل ::

هذه مصطلحات ورموز سنمر عليها في الشرح طريقة التالي

XHTML

طرق الكتابة من الكيبورد :

< , شفت + و - وتكون لفتح الوسم .

> , شفت + ز - تكون لاغلاق الوسم .

"" , شفت + ط - تكون لتحديد اسم المعرف او الفئة .

/ , فقط ظ - تكتب غالبا لاغلاق الوسم
العناصر :
div , الوسم الـ بيتم التقسيم من خلاله .
id , معرف يتم تحديدة ويمكن يندرج تحتها عدة فئات .
class , الفئات وهذه بالامكان تكرارها اكثر من مره في نفس الصفحة .

لعمل كومنت , ملاحظة بحيث تظهر لك لا على المتصفح تكون بهذا الشكل :

مثال لما تم شرح طريقةة :



بطريقة id رمز Code:

رمز Code:

بطريقة class رمز Code:

http://upload.dzbatna.net/upfiles/mJD72695.png

CSS

طرق الكتابة من الكيببورد :

. , فقط ز تكون لاستدعاء فئة ما .

# , شفت + رقم 3 - تكون لاستدعاء معرف ما .

{ , شفت + ج - لفتح مربع خياري الفئة , والمعرف .

} , شفت + د - لفتحر مربع خياري الفئة , المعرف .

: , شفت + ك - تكتب بعد اسم العنصر , لكتابة قيمة العنصر .

; , فقط ك - تكتب لاغلاق الاوامر المتعلقة باسم وقيمة العنصر .

' , فقط ط - تكتب للتحديد .

( , شفت + رقم 9 - للتحديد .

) , شفت + رقم 0 - للتحديد


العناصر التي بالشرح طريقة :

background-image , استدعاء لصورة .
background-repeat , التكرار .
float , محاذاة العنصر .
height , الارتفاع .

width , العرض .


لعمل كومنت , ملاحظة بحيث تظهر لك لا على المتصفح تكون بهذا الشكل : /* هنا الملاحظات الخاصه بك */

مثال لما تم شرح طريقةة :

رمز PHP:

/* تعريف المعرف + الفئة */ # name . name {
background-image:url('name.gif');
background-repeat:;
float:;
height:;
width:;
}


http://upload.dzbatna.net/upfiles/mJD72695.png

اليوم يااخوان بنتعلم كيف نوزع , او نكود code الهيدر header والفوتر

اول شي بيتم عمل الهيكلة الخاصة بالهيدر header , مابنقدر نعمل هالخطوة الا بالقاء نظرة على التصميم

http://upload.dzbatna.net/upfiles/URv92979.png

نلاحظ بانه لدينا 3 صور بالهيدر header تم تقطيعهم وفق ماتم شرح طريقةة في الدرس مفصل السابق

في هذا النوع من الاستايل styleات المتمدده , بتكون نقطة التمدد بمثابة شيء رئيسي في التصميم , بذلك بيتم عمل ديف Div بمسمى id
كما هو مبين

http://upload.dzbatna.net/upfiles/hW793082.png





رمز PHP:

<div id="header">div>


ملاحظه : المسمى header بامكانك استبداله باي اسم يروق لك , ولكن تم تسميته هكذا للتوضيح
رمز Code:

بامكانك استبدال اسم التاج باي اسم تريده
هذا الان بيكون بمثابه نقطة التمدد , بداخل هذا التاج بنضع ديفين فرعيين بمسمى كلاس وبيتم التسمية ايضا على حسب ماتريد .
لاحظ هنا

http://upload.dzbatna.net/upfiles/bTv93286.gif


رمز Code:

لتصبح هيكلة الهيدر header بهذا الشكل :

رمز PHP:

<div id="header">
<div class="right">div>
<div class="left">div>
div>


-----------------------------------------------------------------------------------------------------------------------------------------------------------------------


الان تم عمل الصورة اليمين والصورة اليسار بداخل ديف الاي دي
والان نلقي نظره على الفوتر الخاص بنا

http://upload.dzbatna.net/upfiles/i5m93991.png


نلاحظ انه لايوجد لدينا سوى صورتين , صورة يسار , نقطة التمدد
ذكرنا ان نقطة التمدد نجعل لها ديف رئيسي بمسمى اي دي وديف فرعي بمسمى كلاس
وتكون الكلاسات بداخل الاي دي
ليكون الشكل التالي

رمز PHP:

<div id="footer">
<div class="left">div>
div>


وهذا شرح طريقة توضيحي يبين كامل الهيكله الخاصه بالهيدر header والفوتر

http://upload.dzbatna.net/upfiles/CUo95222.png

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------


ليكون كامل الكود code

رمز PHP:

<div id="header">
<div class="right">div>
<div class="left">div>
div>

<div id="footer">
<div class="left">div>
div>


بامكانك عمل ملاحظات بهذا الشكل




وسيكون كامل عملنا بهذا الشكل

رمز PHP:


<div id="header">
<div class="right">div>
<div class="left">div>
div>



<div id="footer">
<div class="left">div>
div>



-----------------------------------------------------------------------------------------------------------------------------------------------------------------------


انتهينا الان من هيكلة كلا الهيدر header والفوتر , نجي االان لطريقة التوزيع .
او شي لازم نعرف وين نكتب اكواد css
بتكون اكواد css بداخل وسم ستايل style ويتم عمله هكذا



رمز Code:


صورة توضح


http://upload.dzbatna.net/upfiles/d3M95342.png


-----------------------------------------------------------------------------------------------------------------------------------------------------------------------





الان نريد الربط بين XHTML وبين السي اس اس

بداخل وسم استايل style لدينا حالتين :

استدعاء id : يكون بوضع علامة الهاش (#) وبعد ذلك كتابة اسم الاي دي الـ تم تسميته من قبلك

استدعاء class : بوضع علامة الدوت (.) وبعد ذلك كتابة اسم الكلاس الـ تم تسميته من قبلك

وسيكون استدعائنا للاي دي المسمى بـ هيدر بهذا الشكل

رمز PHP:

#header {
وهنا يتم وضع الاكواد المرغوب عملها للاي دي المسمى بهيدر (صورة , اتجاه , حجم , نص , رابط .. الخ )
}


نحن طبعا نريد عمل صورة وتكون متمدده من اليمين الى اليسار اي بمعنى اخر سنعمل لنقطة التمدد تكرار افقي ويجب ايضا ان نبين ارتفاع الصورة بالبكسل


وسيكون الكود code بهذا الشكل :

رمز PHP:

#header {
background-image:هنا مسار الصورة;
background-repeat: هنا امر التكرار;
height: هنا ارتفاع الصورة ;
}


صورة توضح

http://upload.dzbatna.net/upfiles/9be96259.png


الان سيكون الكود code بعد ملء القيم بهذا الشكل

رمز PHP:

#header {
background-image:url('dzbatna/images/dzbatna_header_background.gif');
background-repeat:repeat-x;
height:110px;
}


ملاحظه : تستخدم نفس هذه الاكواد على نقطة التمدد الخاصه بالفوتر , مع تغيير القيم . والمسارات .

ليكون الكود code لمنطقة التمدد الخاصة بكلا الهيدر header والفوتر بهذا الشكل .


رمز PHP:

#header {
background-image:url('dzbatna/images/dzbatna_header_background.gif');
background-repeat:repeat-x;
height:110px;
}

#footer {
background-image:url('dzbatna/images/dzbatna_footer_background.gif');
background-repeat:repeat-x;
height:35px;
}


-----------------------------------------------------------------------------------------------------------------------------------------------------------------------


الان نجي لطريقة عمل الصورة اليمين ونظيرتها الصورة اليسار
بنعمل المسار الصحيح للكلاس وهو # للايدي الرئيسي ال بداخله الكلاس الفرعي
بهذا الشكل
رمز PHP:

#header .right {
{
و
#header .left {
{


• # : تعريف للاي دي - header : اسم الاي دي
• . : تعريف الكلاس - right & left : اسماء الكلاسات

للتوضيح اكثر
بهذه الطريقة استدعاء id

http://upload.dzbatna.net/upfiles/86Y96444.png



وبهذه الطريقة استدعاء class

http://upload.dzbatna.net/upfiles/MUO96502.png



-----------------------------------------------------------------------------------------------------------------------------------------------------------------------

الان نجي للاكواد المستخدمه في كلا الصور التاليه : يمين ويسار الهيدر header + يسار الفوتر .

http://upload.dzbatna.net/upfiles/V3A04469.png

ستكون الاكواد الان بعد ملء القيم بهذا الشكل


رمز PHP:


#header .right {
background-image:url('dzbatna/images/dzbatna_header_right.gif');
background-repeat:no-repeat;
overflow:hidden;
float:right;
width:178px;
height:110px;}

#header .left {
background-image:url('dzbatna/images/dzbatna_header_left.gif');
background-repeat:no-repeat;
float:left;
width:64px;
height:110px;
}


#footer .left {
background-image:url('dzbatna/images/dzbatna_footer_left.gif');
background-repeat:no-repeat;
float:left;
height:35px;
width:64px;
}


وهنا كامل الاكواد مع الشرح طريقة الموضح بجانب كل كود code للتسهيل .

الكلاسات (الهيكلة)


رمز PHP:


<div id="header">
<div class="right">div>
<div class="left">div>
div>



<div id="footer">
<div class="left">div>
div>



التعاريف , (التوزيع)

رمز PHP:

#header { /* مسار نقطة التمدد , هيدر */
background-image:url('dzbatna/images/dzbatna_header_background.gif'); /* , هيدر الصورة الخاصة بنقطة التمدد */
background-repeat:repeat-x; /* التكرار وهنا يكون بشكل افقي */
height:110px; /* ارتفاع الصورة بالبكسل */
}

#header .right {
background-image:url('dzbatna/images/dzbatna_header_right.gif'); /* الصورة الخاصة بالمنطقة اليمين , هيدر */
background-repeat:no-repeat; /* التكرار وهنا يكون بشكل عدم تكرار */
overflow:hidden; /* الازالة */
float:right; /* الازاحة وتكون هنا باليمين */
width:178px; /*العرض الخاص بالصورة */
height:110px;} /*الارتفاع الخاص بالصورة */


#header .left {
background-image:url('dzbatna/images/dzbatna_header_left.gif'); /* الصورة الخاصة بالمنطقة اليسار , هيدر */
background-repeat:no-repeat; /* التكرار وهنا يكون بشكل عدم تكرار */
float:left; /* الازاحة وتكون هنا باليسار */
width:64px; /*العرض الخاص بالصورة */
height:110px; /*الارتفاع الخاص بالصورة */
}


#footer { /* مسار نقطة التمدد , فوتر */
background-image:url('dzbatna/images/dzbatna_footer_background.gif'); /* , هيدر الصورة الخاصة بنقطة التمدد */
background-repeat:repeat-x; /* التكرار وهنا يكون بشكل افقي */
height:35px; /* ارتفاع الصورة بالبكسل */
}

#footer .left {
background-image:url('dzbatna/images/dzbatna_footer_left.gif'); /* الصورة الخاصة بالمنطقة اليسار , هيدر */
background-repeat:no-repeat; /* التكرار وهنا يكون بشكل عدم تكرار */
float:left; /* الازاحة وتكون هنا باليسار */
height:35px; /*الارتفاع الخاص بالصورة */
width:64px; /*العرض الخاص بالصورة */
}


ملاحظة : رجائي الرجوع الى الفيديو لتثبيت setup واتضاح بعض المعلومات

http://upload.dzbatna.net/upfiles/mJD72695.png

ثانيا : الشرح طريقة فيديو (صوت وصورة)

لاتنسى ان تغير الجودة بهذه الطريقه ليظهر بشكل اوضح
http://upload.dzbatna.net/upfiles/2LM75314.gif

,

,
,

المشاهدة والتحميل

http://upload.dzbatna.net/upfiles/gMO58738.png

http://upload.dzbatna.net/upfiles/gMO58738.pnghttp://upload.dzbatna.net/upfiles/gMO58738.png

http://upload.dzbatna.net/upfiles/gMO58738.png

http://upload.dzbatna.net/upfiles/gMO58738.pnghttp://upload.dzbatna.net/upfiles/gMO58738.png

• اليوتيوب ~ youtube .................................................. ..هنا
• فور شيرد ~ 4shared ..................................................هنا
  
• زد شيــــر ~ Z share.................................................. ...هنا
  
• مــخـــزن ~ M5zn............................................................هنا
• docs.google ........................................................ ..........هنا
• الخليج .................................................. .............................................هنا
• Multiupload.................................................. ............ هنا
  

http://upload.dzbatna.net/upfiles/mJD72695.png


يوجد في المرفقات

ملف يحتوي على كامل الاكواد مع الشرح طريقة .
ملف وورد يحتوي على الشرح طريقة المصور لمن يريد الاحتفاظ به على جهازه .

وفي الختام نسأل من الله العلي القدير ان نكون قد وفقنا في توصيل المعلومة على اكمل وجه , وعلى لقاء ان شاء الله في الدرس مفصل القادم ,, والـ بيتم شرح طريقة فيه طريقة توزيع التأطير .


http://upload.dzbatna.net/upfiles/Qil76159.png

ألعاب الأندرويد مجانا و حصريا

الملفات المرفقة [TR]
http://www.traidnt.net/vb/images/attach/zip.gif الشرح المصور.zip (870.0 كيلوبايت, عدد مرات المشاهدة 137 مرة) [/TR]
[TR]
http://www.traidnt.net/vb/images/attach/zip.gif coding traidnt.zip (709 بايت, عدد مرات المشاهدة 81 مرة) [/TR]


https://fbcdn-sphotos-d-a.akamaihd.n...93518507_n.png
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©