منتدى فريق جيوش هكر العراق

<!-- ssaallmm جميع الحقوق محفوظة لـ -->
<p align="center"><font face="Tahoma">أهلا وسهلا بكـ مرة أخرى يا,
$bbuserinfo[username].</font></p>
<p align="center"><font face="Tahoma">نور المنتدى بوجودك</font></p>
<p align="center"><font face="Tahoma">إن شاء الله تفيد وتستفيد  </font></p>
<p align="center"><font color="#FF0000" face="Tahoma">لاتدع الشيطان يلهيك عن
أداء الصلاة في وقتها  </font></p>
<p align="center"><font face="Tahoma">مع تحيات فريق إدارة منتديات أهل الأنبار </font></p>
<!-- ssaallmm جميع الحقوق محفوظة لـ -->

منتدى فريق جيوش هكر العراق

اي شي تريد تلكية
 
الرئيسيةاليوميةمكتبة الصورس .و .جبحـثالأعضاءالمجموعاتالتسجيلدخول

اهلا وسهلا بكم في منتدى فريق جيوش هكر العراق نرجو التسجيل في النتدى قبل اغلاق التسجيل شكرا لكم
دخول
اسم العضو:
كلمة السر:
ادخلني بشكل آلي عند زيارتي مرة اخرى: 
:: لقد نسيت كلمة السر
سحابة الكلمات الدلالية
المواضيع الأخيرة
الساعة
بحـث
 
 

نتائج البحث
 
Rechercher بحث متقدم
الساعة اليوم
عدد زوار المنتدى
تسجيل صفحاتك المفضلة في مواقع خارجية
تسجيل صفحاتك المفضلة في مواقع خارجية Digg  تسجيل صفحاتك المفضلة في مواقع خارجية Delicious  تسجيل صفحاتك المفضلة في مواقع خارجية Reddit  تسجيل صفحاتك المفضلة في مواقع خارجية Stumbleupon  تسجيل صفحاتك المفضلة في مواقع خارجية Slashdot  تسجيل صفحاتك المفضلة في مواقع خارجية Yahoo  تسجيل صفحاتك المفضلة في مواقع خارجية Google  تسجيل صفحاتك المفضلة في مواقع خارجية Blinklist  تسجيل صفحاتك المفضلة في مواقع خارجية Blogmarks  تسجيل صفحاتك المفضلة في مواقع خارجية Technorati  

قم بحفض و مشاطرة الرابط منتدى فريق جيوش هكر العراق على موقع حفض الصفحات
تويتر
احصيات المنتدى
PageRank
زوار المنتدى
Flag Counter
اعلان
حصل على برنامج Adobe Flash player

شاطر | 
 

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

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل 
كاتب الموضوعرسالة
المدير العام

avatar

الجدي عدد المساهمات : 263
نقاط : 1104
السٌّمعَة : 0
تاريخ التسجيل : 22/04/2012
العمر : 22
الموقع : العراق

مُساهمةموضوع: 3 / توزيع الهيدر والفوتر شرح مصور , فيديو , الاسهل على الاطلاق    الثلاثاء يوليو 09, 2013 1:32 pm

[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]

,
,
,

[/b]

[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]
اليوم يااخوان راح نبدأ بالدرس الثالث , وهوتوزيع الهيدر والفوتر 


[/b]
[color][font][b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]

[/b][/font][/color]

[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]
طبعا سيتم عمل الدروس شرح مصور , فيديو . لتتضح الفكرة بشكل كلي .





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

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



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

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

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

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


[/b]

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

[color][font][b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]

هيكله !!

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


[/b][/font][/color]

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

[color][font][b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]

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



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

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

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

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

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






:: ملاحظات مهمة قبل البدء في العمل ::

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

X
HTML


[/b][/font][/color]
طرق الكتابة من الكيبورد :



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

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

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

  4. , فقط ظ - تكتب غالبا لاغلاق الوسم

العناصر :


  1. div , الوسم الـ بيتم التقسيم من خلاله .
  2. id , معرف يتم تحديدة ويمكن يندرج تحتها عدة فئات .
  3. class , الفئات وهذه بالامكان تكرارها اكثر من مره في نفس الصفحة .


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

مثال لما تم شرحة : 



بطريقة id

رمز Code:

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






CSS

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

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

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

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

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

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

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

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

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

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



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


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

  5. width , العرض . 



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

مثال لما تم شرحة : 
رمز PHP:
الكود:
  /* تعريف المعرف + الفئة  */ # name . name { 
    background-image:url('name.gif'); 
    background-repeat:; 
    float:; 
    height:; 
    width:; 
}  
[color][font][b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]
 

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

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



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

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








رمز PHP:
[/b][/font][/color]
الكود:
<div id="header"></div>  
[color][font][b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]
ملاحظه : المسمى header بامكانك استبداله باي اسم يروق لك , ولكن تم تسميته هكذا للتوضيح 

رمز Code:
[/b][/font][/color]
[color][font][b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]

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





رمز Code:
[/b][/font][/color]

[color][font][b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]


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


رمز PHP:
[/b][/font][/color]
الكود:
<div id="header"> 
<div class="right"></div> 
<div class="left"></div> 
</div>  
[color][font][b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------


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




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



رمز PHP:
[/b][/font][/color]
الكود:
 <div id="footer"> 
 <div class="left"></div> 
 </div>  
[color][font][b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]

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



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


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


رمز PHP:
[/b][/font][/color]
الكود:
<div id="header">  
<div class="right"></div> 
<div class="left"></div> 
</div> 

<div id="footer">  
<div class="left"></div> 
</div>  
[color][font][b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]
بامكانك عمل ملاحظات بهذا الشكل




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


رمز PHP:
[/b][/font][/color]
الكود:
<!-- header --> 
<div id="header">  
<div class="right"></div> 
<div class="left"></div> 
</div> 
<!-- header --> 

<!-- footer -->  
<div id="footer"> 
<div class="left"></div> 
</div> 
<!-- footer -->  
[color][font][b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------


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




رمز Code:
[/b][/font][/color]
[color][font][b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]

صورة توضح 


 


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


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

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

[/b][/font][/color]

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

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


[color][font][b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]


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


رمز PHP:
[/b][/font][/color]
الكود:
#header { 
    وهنا يتم وضع الاكواد المرغوب عملها للاي دي المسمى بهيدر (صورة , اتجاه , حجم , نص , رابط .. الخ ) 
}  
[color][font][b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]
نحن طبعا نريد عمل صورة وتكون متمدده من اليمين الى اليسار اي بمعنى اخر سنعمل لنقطة التمدد تكرار افقي ويجب ايضا ان نبين ارتفاع الصورة بالبكسل


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


رمز PHP:
[/b][/font][/color]
الكود:
#header { 
background-image:هنا مسار الصورة; 
background-repeat: هنا امر التكرار; 
height: هنا ارتفاع الصورة ;     
}  
[color][font][b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]



صورة توضح




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


رمز PHP:
[/b][/font][/color]
الكود:
#header { 
background-image:url('traidnt/images/traidnt_header_background.gif'); 
background-repeat:repeat-x; 
height:110px; 
}  
[color][font][b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]


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

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


رمز PHP:
[/b][/font][/color]
الكود:
#header { 
background-image:url('traidnt/images/traidnt_header_background.gif'); 
background-repeat:repeat-x; 
height:110px; 


#footer { 
    background-image:url('traidnt/images/traidnt_footer_background.gif'); 
    background-repeat:repeat-x; 
    height:35px; 
}  
[color][font][b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]

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


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

رمز PHP:
[/b][/font][/color]
الكود:
#header .right { 

و 
#header .left { 
{  
[color][font][b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]

[/b][/font][/color]

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

[color][font][b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]
للتوضيح اكثر 
بهذه الطريقة استدعاء id 

 



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





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

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

 

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



رمز PHP:
[/b][/font][/color]
الكود:

#header .right {  


[color=#000000][/color]

background-image:url('traidnt/images/traidnt_header_right.gif'); 
background-repeat:no-repeat; 
overflow:hidden; 
float:right; 
width:178px; 
height:110px;} 

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



#footer .left {   
    background-image:url('traidnt/images/traidnt_footer_left.gif'); 
    background-repeat:no-repeat; 
    float:left; 
    height:35px; 
    width:64px; 
}  
[color][font][b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]

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


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



رمز PHP:
[/b][/font][/color]
الكود:
<!--header--> 
<div id="header">  <!-- المعرف الخاص بنقطة التمدد _(هيدر) --> 
<div class="right"></div> <!-- الفئة الخاصة بالمنطقة اليمنى --> 
<div class="left"></div> <!-- الفئة الخاصة بالمنطقة اليسرى --> 
</div> 
<!--header--> 

<!--footer--> 
<div id="footer"> <!-- المعرف الخاص بنقطة التمدد _( فوتر) --> 
<div class="left"></div> <!-- الفئة الخاصة بالمنطقة اليسرى --> 
</div>  
<!--footer-->  
[color][font][b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "]
التعاريف , (التوزيع)

رمز PHP:
[/b][/font][/color]
الكود:
#header { /* مسار نقطة التمدد , هيدر */ 
background-image:url('traidnt/images/traidnt_header_background.gif');  /* , هيدر  الصورة الخاصة بنقطة التمدد */  
background-repeat:repeat-x;  /* التكرار وهنا يكون بشكل افقي */  
height:110px;  /* ارتفاع الصورة بالبكسل */  


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


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


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


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


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




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

لاتنسى ان تغير الجودة بهذه الطريقه ليظهر بشكل اوضح


,

,
,


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















  • اليوتيوب ~ youtube .................................................. ..هنا
  • فور شيرد ~ 4shared ..................................................هنا

  • زد شيــــر ~ share.................................................. ...هنا

  • مــخـــزن ~ M5zn............................................................هنا
  • docs.google ........................................................ ..........هنا
  • الخليج .................................................. .............................................هنا
  • Multiupload.................................................. ............ هنا





[center]


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


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




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



[/center]

[b style="color: rgb(0, 0, 0); font-family: arial; font-size: 16px; font-weight: bold; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; padding-top: 6px; padding-right: 6px; padding-bottom: 6px; padding-left: 6px; "]الملفات المرفقة
[/b]
الشرح المصور.zip (870.0 كيلوبايت, عدد مرات المشاهدة 124 مرة)
coding traidnt.zip (709 بايت, عدد مرات المشاهدة 73 مرة)
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://hakraliraq.montadalhilal.com
 
3 / توزيع الهيدر والفوتر شرح مصور , فيديو , الاسهل على الاطلاق
استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتدى فريق جيوش هكر العراق :: دورات تعليم وتصميم الإستايلات-
انتقل الى: