loulou ange
10-30-2013, بتوقيت غرينيتش 08:54 PM
http://www.dzbatna.com/images/icons/iconrote.gif 3 / طھظˆط²ظٹط¹ ط§ظ„ظ‡ظٹط¯ط± ظˆط§ظ„ظپظˆطھط± ط´ط±ط* ظ…طµظˆط± , ظپظٹط¯ظٹظˆ , ط§ظ„ط§ط³ظ‡ظ„ ط¹ظ„ظ‰ ط§ظ„ط§ط·ظ„ط§ظ‚ (http://www.dzbatna.com/t2199075/)
http://upload.dzbatna.net/upfiles/mi372123.png
,
,
,
اليوم يااخوان راح نبدأ بالدرس مفصل الثالث , وهوتوزيع الهيدر header والفوتر
1 / تصميم الاستايل style شرح طريقة مصور , فيديو , الاسهل على الاطلاق (http://www.dzbatna.com/t2192575/)
2 / تقطيع الاستايل style شرح طريقة مصور , فيديو , الاسهل على الاطلاق (http://www.dzbatna.com/t2195265/)
http://upload.dzbatna.net/upfiles/mJD72695.png
طبعا سيتم عمل الدروس شرح طريقة مصور , فيديو . لتتضح الفكرة بشكل كلي .
http://upload.dzbatna.net/upfiles/TJI98013.png
اول شي بنستخدم برنامج الاكسبريشن ويب تو ,
للتحميل : من هنا ~ (http://download.microsoft.com/download/2/2/3/223d5ede-c7ab-4c38-bf28-19b46f1c33ee/ExpressionWeb2_en.exe)
ليش يتم استخدامه ؟
للسهولة التامة في الاستخدام وانا بقصد ذلك لتسهيل الامور على المبتدئين , ولكن بامكاننا استخدام اي محرر نصوص كان .
امم طيب ايش اللغه الـ بنشتغل عليها ؟
مبدئيا بنكتفي بلغتين
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:
<div id="###"></div>
رمز Code:
<!--المعرف الخاص بـ ...-->
بطريقة class رمز Code:
<div class="###"></div>
http://upload.dzbatna.net/upfiles/mJD72695.png
CSS
طرق الكتابة من الكيببورد :
. , فقط ز تكون لاستدعاء فئة ما .
# , شفت + رقم 3 - تكون لاستدعاء معرف ما .
{ , شفت + ج - لفتح مربع خياري الفئة , والمعرف .
} , شفت + د - لفتحر مربع خياري الفئة , المعرف .
: , شفت + ك - تكتب بعد اسم العنصر , لكتابة قيمة العنصر .
; , فقط ك - تكتب لاغلاق الاوامر المتعلقة باسم وقيمة العنصر .
' , فقط ط - تكتب للتحديد .
( , شفت + رقم 9 - للتحديد .
) , شفت + رقم 0 - للتحديد
العناصر التي بالشرح طريقة :
background-image , استدعاء لصورة .
background-repeat , التكرار .
float , محاذاة العنصر .
height , الارتفاع .
width , العرض .
لعمل كومنت , ملاحظة بحيث تظهر لك لا على المتصفح تكون بهذا الشكل : /* هنا الملاحظات الخاصه بك */
مثال لما تم شرح طريقةة :
رمز PHP:
<code style="white-space:nowrap"> <code> /* تعريف المعرف + الفئة */ # name . name {
background-image:url('name.gif');
background-repeat:;
float:;
height:;
width:;
}
</code> </code>
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:
<code style="white-space:nowrap"> <code> <div id="header"></div>
</code> </code>
ملاحظه : المسمى header بامكانك استبداله باي اسم يروق لك , ولكن تم تسميته هكذا للتوضيح
رمز Code:
<div id="name tag"></div>
بامكانك استبدال اسم التاج باي اسم تريده
هذا الان بيكون بمثابه نقطة التمدد , بداخل هذا التاج بنضع ديفين فرعيين بمسمى كلاس وبيتم التسمية ايضا على حسب ماتريد .
لاحظ هنا
http://upload.dzbatna.net/upfiles/bTv93286.gif
رمز Code:
<div class="right"></div> <div class="left"></div>
لتصبح هيكلة الهيدر header بهذا الشكل :
رمز PHP:
<code style="white-space:nowrap"> <code> <div id="header">
<div class="right"></div>
<div class="left"></div>
</div>
</code> </code>
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------
الان تم عمل الصورة اليمين والصورة اليسار بداخل ديف الاي دي
والان نلقي نظره على الفوتر الخاص بنا
http://upload.dzbatna.net/upfiles/i5m93991.png
نلاحظ انه لايوجد لدينا سوى صورتين , صورة يسار , نقطة التمدد
ذكرنا ان نقطة التمدد نجعل لها ديف رئيسي بمسمى اي دي وديف فرعي بمسمى كلاس
وتكون الكلاسات بداخل الاي دي
ليكون الشكل التالي
رمز PHP:
<code style="white-space:nowrap"> <code> <div id="footer">
<div class="left"></div>
</div>
</code> </code>
وهذا شرح طريقة توضيحي يبين كامل الهيكله الخاصه بالهيدر header والفوتر
http://upload.dzbatna.net/upfiles/CUo95222.png
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------
ليكون كامل الكود code
رمز PHP:
<code style="white-space:nowrap"> <code> <div id="header">
<div class="right"></div>
<div class="left"></div>
</div>
<div id="footer">
<div class="left"></div>
</div>
</code> </code>
بامكانك عمل ملاحظات بهذا الشكل
<!-- يتم هنا كتابة الملاحظات -->
وسيكون كامل عملنا بهذا الشكل
رمز PHP:
<code style="white-space:nowrap"> <code> <!-- header -->
<div id="header">
<div class="right"></div>
<div class="left"></div>
</div>
<!-- header -->
<!-- footer -->
<div id="footer">
<div class="left"></div>
</div>
<!-- footer -->
</code> </code>
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------
انتهينا الان من هيكلة كلا الهيدر header والفوتر , نجي االان لطريقة التوزيع .
او شي لازم نعرف وين نكتب اكواد css
بتكون اكواد css بداخل وسم ستايل style ويتم عمله هكذا
رمز Code:
<style type="text/css"> هنا يتم كتاب اكواد السي اس اس </style>
صورة توضح
http://upload.dzbatna.net/upfiles/d3M95342.png
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------
الان نريد الربط بين XHTML وبين السي اس اس
بداخل وسم استايل style لدينا حالتين :
استدعاء id : يكون بوضع علامة الهاش (#) وبعد ذلك كتابة اسم الاي دي الـ تم تسميته من قبلك
استدعاء class : بوضع علامة الدوت (.) وبعد ذلك كتابة اسم الكلاس الـ تم تسميته من قبلك
وسيكون استدعائنا للاي دي المسمى بـ هيدر بهذا الشكل
رمز PHP:
<code style="white-space:nowrap"> <code> #header {
وهنا يتم وضع الاكواد المرغوب عملها للاي دي المسمى بهيدر (صورة , اتجاه , حجم , نص , رابط .. الخ )
}
</code> </code>
نحن طبعا نريد عمل صورة وتكون متمدده من اليمين الى اليسار اي بمعنى اخر سنعمل لنقطة التمدد تكرار افقي ويجب ايضا ان نبين ارتفاع الصورة بالبكسل
وسيكون الكود code بهذا الشكل :
رمز PHP:
<code style="white-space:nowrap"> <code> #header {
background-image:هنا مسار الصورة;
background-repeat: هنا امر التكرار;
height: هنا ارتفاع الصورة ;
}
</code> </code>
صورة توضح
http://upload.dzbatna.net/upfiles/9be96259.png
الان سيكون الكود code بعد ملء القيم بهذا الشكل
رمز PHP:
<code style="white-space:nowrap"> <code> #header {
background-image:url('dzbatna/images/dzbatna_header_background.gif');
background-repeat:repeat-x;
height:110px;
}
</code> </code>
ملاحظه : تستخدم نفس هذه الاكواد على نقطة التمدد الخاصه بالفوتر , مع تغيير القيم . والمسارات .
ليكون الكود code لمنطقة التمدد الخاصة بكلا الهيدر header والفوتر بهذا الشكل .
رمز PHP:
<code style="white-space:nowrap"> <code> #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;
}
</code> </code>
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------
الان نجي لطريقة عمل الصورة اليمين ونظيرتها الصورة اليسار
بنعمل المسار الصحيح للكلاس وهو # للايدي الرئيسي ال بداخله الكلاس الفرعي
بهذا الشكل
رمز PHP:
<code style="white-space:nowrap"> <code> #header .right {
{
و
#header .left {
{
</code> </code>
</b>
# : تعريف للاي دي - 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:
<code style="white-space:nowrap"> <code>
#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> </code>
وهنا كامل الاكواد مع الشرح طريقة الموضح بجانب كل كود code للتسهيل .
الكلاسات (الهيكلة)
رمز PHP:
<code style="white-space:nowrap"> <code> <!--header-->
<div id="header"> <!-- المعرف الخاص بنقطة التمدد _(هيدر) -->
<div class="right"></div> <!-- الفئة الخاصة بالمنطقة اليمنى -->
<div class="left"></div> <!-- الفئة الخاصة بالمنطقة اليسرى -->
</div>
<!--header-->
<!--footer-->
<div id="footer"> <!-- المعرف الخاص بنقطة التمدد _( فوتر) -->
<div class="left"></div> <!-- الفئة الخاصة بالمنطقة اليسرى -->
</div>
<!--footer-->
</code> </code>
التعاريف , (التوزيع)
رمز PHP:
<code style="white-space:nowrap"> <code> #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; /*العرض الخاص بالصورة */
}
</code> </code>
ملاحظة : رجائي الرجوع الى الفيديو لتثبيت 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 .................................................. ..هنا (http://www.youtube.com/watch?v=RthBcBvefnc)
فور شيرد ~ 4shared .................................................. هنا (http://www.4shared.com/zip/JpqrPgH8/coding_dzbatna.html)
زد شيــــر ~ Z share............................................. ..... ...هنا (http://www2.zshare.ma/g9znkoyj0jpz)
مــخـــزن ~ M5zn.............................................. ..............هنا (http://www.m5zn.com/d/?e956cf5626f8251)
docs.google .................................................. ...... ..........هنا (https://docs.google.com/file/d/0B34nhKM28dP9WjBzc1JsUFByOEE/edit?pli=1)
الخليج .................................................. .............................................هنا (http://www.gulfup.com/?9lnvUY)
Multiupload....................................... ........... ............ هنا (http://www.multiupload.nl/73VM3YI7U2)
http://upload.dzbatna.net/upfiles/mJD72695.png
يوجد في المرفقات
ملف يحتوي على كامل الاكواد مع الشرح طريقة .
ملف وورد يحتوي على الشرح طريقة المصور لمن يريد الاحتفاظ به على جهازه .
وفي الختام نسأل من الله العلي القدير ان نكون قد وفقنا في توصيل المعلومة على اكمل وجه , وعلى لقاء ان شاء الله في الدرس مفصل القادم ,, والـ بيتم شرح طريقة فيه طريقة توزيع التأطير .
http://upload.dzbatna.net/upfiles/Qil76159.png
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif الشرح المصور.zip (http://www.traidnt.net/vb/attachments/676092d1354467522-الشرح-المصور.zip) (870.0 كيلوبايت, عدد مرات المشاهدة 137 مرة)
http://www.traidnt.net/vb/images/attach/zip.gif coding traidnt.zip (http://www.traidnt.net/vb/attachments/676093d1354467555-coding-traidnt.zip) (709 بايت, عدد مرات المشاهدة 81 مرة)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
http://upload.dzbatna.net/upfiles/mi372123.png
,
,
,
اليوم يااخوان راح نبدأ بالدرس مفصل الثالث , وهوتوزيع الهيدر header والفوتر
1 / تصميم الاستايل style شرح طريقة مصور , فيديو , الاسهل على الاطلاق (http://www.dzbatna.com/t2192575/)
2 / تقطيع الاستايل style شرح طريقة مصور , فيديو , الاسهل على الاطلاق (http://www.dzbatna.com/t2195265/)
http://upload.dzbatna.net/upfiles/mJD72695.png
طبعا سيتم عمل الدروس شرح طريقة مصور , فيديو . لتتضح الفكرة بشكل كلي .
http://upload.dzbatna.net/upfiles/TJI98013.png
اول شي بنستخدم برنامج الاكسبريشن ويب تو ,
للتحميل : من هنا ~ (http://download.microsoft.com/download/2/2/3/223d5ede-c7ab-4c38-bf28-19b46f1c33ee/ExpressionWeb2_en.exe)
ليش يتم استخدامه ؟
للسهولة التامة في الاستخدام وانا بقصد ذلك لتسهيل الامور على المبتدئين , ولكن بامكاننا استخدام اي محرر نصوص كان .
امم طيب ايش اللغه الـ بنشتغل عليها ؟
مبدئيا بنكتفي بلغتين
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:
<div id="###"></div>
رمز Code:
<!--المعرف الخاص بـ ...-->
بطريقة class رمز Code:
<div class="###"></div>
http://upload.dzbatna.net/upfiles/mJD72695.png
CSS
طرق الكتابة من الكيببورد :
. , فقط ز تكون لاستدعاء فئة ما .
# , شفت + رقم 3 - تكون لاستدعاء معرف ما .
{ , شفت + ج - لفتح مربع خياري الفئة , والمعرف .
} , شفت + د - لفتحر مربع خياري الفئة , المعرف .
: , شفت + ك - تكتب بعد اسم العنصر , لكتابة قيمة العنصر .
; , فقط ك - تكتب لاغلاق الاوامر المتعلقة باسم وقيمة العنصر .
' , فقط ط - تكتب للتحديد .
( , شفت + رقم 9 - للتحديد .
) , شفت + رقم 0 - للتحديد
العناصر التي بالشرح طريقة :
background-image , استدعاء لصورة .
background-repeat , التكرار .
float , محاذاة العنصر .
height , الارتفاع .
width , العرض .
لعمل كومنت , ملاحظة بحيث تظهر لك لا على المتصفح تكون بهذا الشكل : /* هنا الملاحظات الخاصه بك */
مثال لما تم شرح طريقةة :
رمز PHP:
<code style="white-space:nowrap"> <code> /* تعريف المعرف + الفئة */ # name . name {
background-image:url('name.gif');
background-repeat:;
float:;
height:;
width:;
}
</code> </code>
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:
<code style="white-space:nowrap"> <code> <div id="header"></div>
</code> </code>
ملاحظه : المسمى header بامكانك استبداله باي اسم يروق لك , ولكن تم تسميته هكذا للتوضيح
رمز Code:
<div id="name tag"></div>
بامكانك استبدال اسم التاج باي اسم تريده
هذا الان بيكون بمثابه نقطة التمدد , بداخل هذا التاج بنضع ديفين فرعيين بمسمى كلاس وبيتم التسمية ايضا على حسب ماتريد .
لاحظ هنا
http://upload.dzbatna.net/upfiles/bTv93286.gif
رمز Code:
<div class="right"></div> <div class="left"></div>
لتصبح هيكلة الهيدر header بهذا الشكل :
رمز PHP:
<code style="white-space:nowrap"> <code> <div id="header">
<div class="right"></div>
<div class="left"></div>
</div>
</code> </code>
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------
الان تم عمل الصورة اليمين والصورة اليسار بداخل ديف الاي دي
والان نلقي نظره على الفوتر الخاص بنا
http://upload.dzbatna.net/upfiles/i5m93991.png
نلاحظ انه لايوجد لدينا سوى صورتين , صورة يسار , نقطة التمدد
ذكرنا ان نقطة التمدد نجعل لها ديف رئيسي بمسمى اي دي وديف فرعي بمسمى كلاس
وتكون الكلاسات بداخل الاي دي
ليكون الشكل التالي
رمز PHP:
<code style="white-space:nowrap"> <code> <div id="footer">
<div class="left"></div>
</div>
</code> </code>
وهذا شرح طريقة توضيحي يبين كامل الهيكله الخاصه بالهيدر header والفوتر
http://upload.dzbatna.net/upfiles/CUo95222.png
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------
ليكون كامل الكود code
رمز PHP:
<code style="white-space:nowrap"> <code> <div id="header">
<div class="right"></div>
<div class="left"></div>
</div>
<div id="footer">
<div class="left"></div>
</div>
</code> </code>
بامكانك عمل ملاحظات بهذا الشكل
<!-- يتم هنا كتابة الملاحظات -->
وسيكون كامل عملنا بهذا الشكل
رمز PHP:
<code style="white-space:nowrap"> <code> <!-- header -->
<div id="header">
<div class="right"></div>
<div class="left"></div>
</div>
<!-- header -->
<!-- footer -->
<div id="footer">
<div class="left"></div>
</div>
<!-- footer -->
</code> </code>
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------
انتهينا الان من هيكلة كلا الهيدر header والفوتر , نجي االان لطريقة التوزيع .
او شي لازم نعرف وين نكتب اكواد css
بتكون اكواد css بداخل وسم ستايل style ويتم عمله هكذا
رمز Code:
<style type="text/css"> هنا يتم كتاب اكواد السي اس اس </style>
صورة توضح
http://upload.dzbatna.net/upfiles/d3M95342.png
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------
الان نريد الربط بين XHTML وبين السي اس اس
بداخل وسم استايل style لدينا حالتين :
استدعاء id : يكون بوضع علامة الهاش (#) وبعد ذلك كتابة اسم الاي دي الـ تم تسميته من قبلك
استدعاء class : بوضع علامة الدوت (.) وبعد ذلك كتابة اسم الكلاس الـ تم تسميته من قبلك
وسيكون استدعائنا للاي دي المسمى بـ هيدر بهذا الشكل
رمز PHP:
<code style="white-space:nowrap"> <code> #header {
وهنا يتم وضع الاكواد المرغوب عملها للاي دي المسمى بهيدر (صورة , اتجاه , حجم , نص , رابط .. الخ )
}
</code> </code>
نحن طبعا نريد عمل صورة وتكون متمدده من اليمين الى اليسار اي بمعنى اخر سنعمل لنقطة التمدد تكرار افقي ويجب ايضا ان نبين ارتفاع الصورة بالبكسل
وسيكون الكود code بهذا الشكل :
رمز PHP:
<code style="white-space:nowrap"> <code> #header {
background-image:هنا مسار الصورة;
background-repeat: هنا امر التكرار;
height: هنا ارتفاع الصورة ;
}
</code> </code>
صورة توضح
http://upload.dzbatna.net/upfiles/9be96259.png
الان سيكون الكود code بعد ملء القيم بهذا الشكل
رمز PHP:
<code style="white-space:nowrap"> <code> #header {
background-image:url('dzbatna/images/dzbatna_header_background.gif');
background-repeat:repeat-x;
height:110px;
}
</code> </code>
ملاحظه : تستخدم نفس هذه الاكواد على نقطة التمدد الخاصه بالفوتر , مع تغيير القيم . والمسارات .
ليكون الكود code لمنطقة التمدد الخاصة بكلا الهيدر header والفوتر بهذا الشكل .
رمز PHP:
<code style="white-space:nowrap"> <code> #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;
}
</code> </code>
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------
الان نجي لطريقة عمل الصورة اليمين ونظيرتها الصورة اليسار
بنعمل المسار الصحيح للكلاس وهو # للايدي الرئيسي ال بداخله الكلاس الفرعي
بهذا الشكل
رمز PHP:
<code style="white-space:nowrap"> <code> #header .right {
{
و
#header .left {
{
</code> </code>
</b>
# : تعريف للاي دي - 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:
<code style="white-space:nowrap"> <code>
#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> </code>
وهنا كامل الاكواد مع الشرح طريقة الموضح بجانب كل كود code للتسهيل .
الكلاسات (الهيكلة)
رمز PHP:
<code style="white-space:nowrap"> <code> <!--header-->
<div id="header"> <!-- المعرف الخاص بنقطة التمدد _(هيدر) -->
<div class="right"></div> <!-- الفئة الخاصة بالمنطقة اليمنى -->
<div class="left"></div> <!-- الفئة الخاصة بالمنطقة اليسرى -->
</div>
<!--header-->
<!--footer-->
<div id="footer"> <!-- المعرف الخاص بنقطة التمدد _( فوتر) -->
<div class="left"></div> <!-- الفئة الخاصة بالمنطقة اليسرى -->
</div>
<!--footer-->
</code> </code>
التعاريف , (التوزيع)
رمز PHP:
<code style="white-space:nowrap"> <code> #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; /*العرض الخاص بالصورة */
}
</code> </code>
ملاحظة : رجائي الرجوع الى الفيديو لتثبيت 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 .................................................. ..هنا (http://www.youtube.com/watch?v=RthBcBvefnc)
فور شيرد ~ 4shared .................................................. هنا (http://www.4shared.com/zip/JpqrPgH8/coding_dzbatna.html)
زد شيــــر ~ Z share............................................. ..... ...هنا (http://www2.zshare.ma/g9znkoyj0jpz)
مــخـــزن ~ M5zn.............................................. ..............هنا (http://www.m5zn.com/d/?e956cf5626f8251)
docs.google .................................................. ...... ..........هنا (https://docs.google.com/file/d/0B34nhKM28dP9WjBzc1JsUFByOEE/edit?pli=1)
الخليج .................................................. .............................................هنا (http://www.gulfup.com/?9lnvUY)
Multiupload....................................... ........... ............ هنا (http://www.multiupload.nl/73VM3YI7U2)
http://upload.dzbatna.net/upfiles/mJD72695.png
يوجد في المرفقات
ملف يحتوي على كامل الاكواد مع الشرح طريقة .
ملف وورد يحتوي على الشرح طريقة المصور لمن يريد الاحتفاظ به على جهازه .
وفي الختام نسأل من الله العلي القدير ان نكون قد وفقنا في توصيل المعلومة على اكمل وجه , وعلى لقاء ان شاء الله في الدرس مفصل القادم ,, والـ بيتم شرح طريقة فيه طريقة توزيع التأطير .
http://upload.dzbatna.net/upfiles/Qil76159.png
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif الشرح المصور.zip (http://www.traidnt.net/vb/attachments/676092d1354467522-الشرح-المصور.zip) (870.0 كيلوبايت, عدد مرات المشاهدة 137 مرة)
http://www.traidnt.net/vb/images/attach/zip.gif coding traidnt.zip (http://www.traidnt.net/vb/attachments/676093d1354467555-coding-traidnt.zip) (709 بايت, عدد مرات المشاهدة 81 مرة)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
