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

[loulou ange]

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



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

,
,
,





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





1 / تصميم الاستايل style شرح طريقة مصور , فيديو , الاسهل على الاطلاق (http://www.dzbatna.com/t2192575/)
2 / تقطيع الاستايل style شرح طريقة مصور , فيديو , الاسهل على الاطلاق (http://www.dzbatna.com/t2195265/)
3 / توزيع الهيدر header والفوتر شرح طريقة مصور , فيديو , الاسهل على الاطلاق (http://www.dzbatna.com/t2199075/)



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


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



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

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

للتحميل :


[ برنامج مجانى ] : expression web 4 بتاريخ 20 // 12 // 2014 (http://www.dzbatna.com/t2209216/)



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

من هنا ~ (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


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

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

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

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

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

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

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



بطريقة idرمز

رمز Code:
<div id=&quot;###&quot;></div>
لعمل تعليق او ملاحظة
رمز Code:
<!--المعرف الخاص بـ ...-->
بطريقة class
رمز Code:
<div class=&quot;###&quot;></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



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

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

عموما

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

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

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


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


رمز PHP:

<code style="white-space:nowrap"> <code> <div id="forumhome_top">
<div class="right"></div>
<div class="left"></div>
</div>
</code> </code>



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


رمز Code:
<!-- forum home top --> <div id=&quot;forumhome_top&quot;> <!-- نقطة التمدد الخاصة بالمنطقة العلوية فتح الوسم + --> <div class=&quot;right&quot;></div> <!-- الصورة اليمين --> <div class=&quot;left&quot;></div> <!-- الصورة اليسار --> </div> <!-- اغلاق الوسم --> <!-- forum home top -->
صورة توضح

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


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



__________________________________________________ __________________________________________________ _______________



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

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


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

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


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



رمز PHP:

<code style="white-space:nowrap"> <code> <div id="forumhome_bottom ">
<div class="right"></div>
<div class="left"></div>
</div>
</code> </code>



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


رمز Code:
<!-- forum home
رمز Code:
bottom --> <div id=&quot;forumhome_bottom&quot;> <!-- نقطة التمدد الخاصة بالمنطقة السفلية فتح الوسم + --> <div class=&quot;right&quot;></div> <!-- الصورة اليمين --> <div class=&quot;left&quot;></div> <!-- الصورة اليسار --> </div> <!-- اغلاق الوسم --> <!-- forum home bottom -->


صورة للتوضيح

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



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


__________________________________________________ __________________________________________________ _______________


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

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

وهي كالاتي


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

http://img04.arabsh.com/uploads/image/2014/12/31/0d31414f67f403.gif


__________________________________________________ __________________________________________________ _______________


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









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

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


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


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





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

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

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

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

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


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


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

رمز PHP:

<code style="white-space:nowrap"> <code> <!-- المنطقة العلوية -->
<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> <!-- إغلاق الاي دي -->
<!-- المنطقة السفلية -->
</code> </code>

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

رمز PHP:

<code style="white-space:nowrap"> <code> #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; /* ارتفاع الصورة */
}
</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









http://www.dzbatna.com/attachments/679426d1356993199-style-4.png (http://www.youtube.com/watch?v=u9Itdj982Kc)




اليوتيوب ~ youtube .................................................. ..هنا (http://www.youtube.com/watch?v=u9Itdj982Kc)
فور شيرد ~ 4shared .................................................. هنا (http://www.4shared.com/zip/G9QEmo0Y/CODING_fourm_home.html)





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


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


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



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


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/679380d1356967020-الاكواد.zip) (773 بايت, عدد مرات المشاهدة 62 مرة)


https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©