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

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

---

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

,
,
,

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

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

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

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



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

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

للتحميل :


[ برنامج مجانى ] : expression web 4 بتاريخ 20 // 12 // 2014



http://upload.dzbatna.net/upfiles/mJD72695.png
أو استخدمو نفس الموجود في الشرح طريقة اكسبرشن ويب 2

من هنا ~



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

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

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

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

• 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



اليوم يا اخوان راح نبدا في توزيع التاطير الرباعي

اول شيء بيتم عمل الهيكلة الخاصه بالمنطقة العلوية ولا تختلف اي اختلاف عن المنطقة السفلية
ولكن نزيد عليها الاعمده

عموما

اولا نقوم بالقاء نظره على التصميم ليتضح لنا الشكل العام له

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

بذلك سبق وان تعلمنا ان نقطة التمدد سنعمل لها (div) معرف باسم (id)
والصورة اليمين واليسار نعمل لهم بداخل المعرف اي دي (div) فئة باسم (class)


اذا ستكون الطريقة الصحيحة لهيكلة التاطير بهذا الشكل


رمز PHP:

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


شرح طريقة الكود code


رمز Code:

صورة توضح

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

|||||||||||||| : توضيح للاكواد .
|||||||||||||| : هذه مسميات يمكن تغيرها كيف شئت .

__________________________________________________ __________________________________________________ _______________

نفس الامر بالمنطقة السفلية

ولكن لامشكلة من القاء نظره


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

بذلك سبق وان تعلمنا ان نقطة التمدد سنعمل لها (div) معرف باسم (id)
والصورة اليمين واليسار نعمل لهم بداخل المعرف اي دي (div) فئة باسم (class)


اذا ستكون الطريقة الصحيحة لهيكلة التاطير بهذا الشكل



رمز PHP:

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


شرح طريقة الكود code


رمز Code:

صورة للتوضيح

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

|||||||||||||| : توضيح للاكواد .
|||||||||||||| : هذه مسميات يمكن تغيرها كيف شئت .

__________________________________________________ __________________________________________________ _______________


الان انتهينا من هيكلة المنطقة العلوية والمنطقة السفليه , ولا ارى فيها اي صعوبة مجرد نفس الهيكله الـ بالهيدر header الدرس مفصل الماضي , وتقارب قوي بالفوتر ..

الان نجي لطريقة هيكلة الاعمدة , طريقة سهلة جدا

وهي كالاتي


الصورة متحركه

http://img04.arabsh.com/uploads/imag...414f67f403.gif


__________________________________________________ __________________________________________________ _______________

الان انتهينا من الهيكلة الخاصة بالتاطير, منطقة علوية وسفلية + اعمدة يمين ويسار ..

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

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


المنطقة العلوية والسفلية بتكون بهذه الطريقة


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





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

الان نجي لطريقة توزيع العمود الايمن والايسر ..

ستكون بهذه الطريقة

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

بكذا انت انهيت كامل التكويد للتأطير الرباعي .


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


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

رمز PHP:


<div id="froumhome_top">
<div class="right">div>
<div class="left">div>
div>
<div class="col_right">
<div class="col_left">




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



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

رمز PHP:

#froumhome_top { /* تعريف الايدي الخاص بمنطقة التمدد للتأطير العلوي */
background-image:url('../dzbatna/images/froumhome_top_background.gif'); /* استدعاء الصورة */
background-repeat:repeat-x; /* التكرار */
height:17px; /* الارتفاع */
}


#froumhome_top .right { /* الصورة اليمنى بالمنطقة العلوية */
background-image:url('../dzbatna/images/froumhome_top_right.gif'); /* استدعاء الصورة */
background-repeat:no-repeat; /* التكرار */
float:right; /* الازاحة */
width:18px; /* عرض الصورة */
height:16px; /* ارتفاع الصورة */
}

#froumhome_top .left { /* الصورة اليسرى بالمنطقة العلوية */
background-image:url('../dzbatna/images/froumhome_top_left.gif'); /* استدعاء الصورة */
background-repeat:no-repeat; /* تكرار الصورة */
float:left; /* الازاحة */
width:18px; /* اعرض الصورة */
height:16px; /* ارتفاع الصورة */
}


.col_right { /*العمود الايمن*/
padding-right:38px; /* عرض صورة العود */
background-image:url('../dzbatna/images/froumhome_col_right.gif'); /* استدعاء الصورة */
background-repeat:repeat-y; /* التكرار */
background-position:right; /* الازاحة */
}


.col_left { /*العمود الايسر*/
padding-left:38px; /* عرض صورة العود */
background-image:url('../dzbatna/images/froumhome_col_left.gif'); /* استدعاء الصورة */
background-repeat:repeat-y; /* التكرار */
background-position:left; /* الازاحة */
}


#froumhome_bottom { /* تعريف الايدي الخاص بمنطقةالتمدد للتأطير السفلي */
background-image:url('../dzbatna/images/froumhome_bottom_background.gif'); /* استدعاء الصورة */
background-repeat:repeat-x; /* التكرار */
height:17px; /* الارتفاع */
}


#froumhome_bottom .right { /* الصورة اليمنى بالمنطقة العلوية */
background-image:url('../dzbatna/images/froumhome_bottom_right.gif'); /* استدعاء الصورة */
background-repeat:no-repeat; /* تكرار الصورة */
float:left; /* الازاحة */
width:18px; /* اعرض الصورة */
height:16px; /* ارتفاع الصورة */
}

#froumhome_bottom .left { /* الصورة اليسرى بالمنطقة العلوية */
background-image:url('../dzbatna/images/froumhome_bottom_left.gif');
background-repeat:no-repeat; /* تكرار الصورة */
float:left; /* الازاحة */
width:18px; /* اعرض الصورة */
height:16px; /* ارتفاع الصورة */
}


ملاحظة : رجائي الرجوع الى الفيديو لتثبيت 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

http://www.dzbatna.com/attachments/6...99-style-4.png

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

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


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

ملف يحتوي على كامل الاكواد مع الشرح طريقة .

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


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

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

الملفات المرفقة [TR]
http://www.traidnt.net/vb/images/attach/zip.gif الاكواد.zip (773 بايت, عدد مرات المشاهدة 62 مرة) [/TR]


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