المدير العام
 عدد المساهمات : 263
نقاط : 1104
السٌّمعَة : 0
تاريخ التسجيل : 22/04/2012
العمر : 29
الموقع : العراق
 |  موضوع: 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
طيب اخر طلب تفيدني باالاكواد الـ بنمر عليها والـ بنستخدمها في الشرح التالي ؟
:: ملاحظات مهمة قبل البدء في العمل ::
هذه مصطلحات ورموز سنمر عليها في الشرح التالي
XHTML
[/b][/font][/color] طرق الكتابة من الكيبورد :
- < , شفت + و - وتكون لفتح الوسم .
- > , شفت + ز - تكون لاغلاق الوسم .
- "" , شفت + ط - تكون لتحديد اسم المعرف او الفئة .
- / , فقط ظ - تكتب غالبا لاغلاق الوسم
العناصر :
- div , الوسم الـ بيتم التقسيم من خلاله .
- id , معرف يتم تحديدة ويمكن يندرج تحتها عدة فئات .
- class , الفئات وهذه بالامكان تكرارها اكثر من مره في نفس الصفحة .
لعمل كومنت , ملاحظة بحيث تظهر لك لا على المتصفح تكون بهذا الشكل :
مثال لما تم شرحة :
بطريقة idرمز Code:رمز Code:
بطريقة classرمز Code:CSS
طرق الكتابة من الكيببورد :
- . , فقط ز تكون لاستدعاء فئة ما .
- # , شفت + رقم 3 - تكون لاستدعاء معرف ما .
- { , شفت + ج - لفتح مربع خياري الفئة , والمعرف .
- } , شفت + د - لفتحر مربع خياري الفئة , المعرف .
- : , شفت + ك - تكتب بعد اسم العنصر , لكتابة قيمة العنصر .
- ; , فقط ك - تكتب لاغلاق الاوامر المتعلقة باسم وقيمة العنصر .
- ' , فقط ط - تكتب للتحديد .
- ( , شفت + رقم 9 - للتحديد .
- ) , شفت + رقم 0 - للتحديد
العناصر التي بالشرح :
- background-image , استدعاء لصورة .
- background-repeat , التكرار .
- float , محاذاة العنصر .
- height , الارتفاع .
- 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; /*العرض الخاص بالصورة */
}
[/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] | |
|
