ترايدنت

ترايدنت (https://www.traidnt.net/vb/)
-   دروس تصميم مواقع الويب (https://www.traidnt.net/vb/f14/)
-   -   4/ توزيع التاطير الرباعي شرح مصور , فيديو , الاسهل على الاطلاق (https://www.traidnt.net/vb/traidnt2211093/)

تركي العمري 31 - 12 - 2012 18:03

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

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



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

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

للتحميل :


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



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

من هنا ~



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

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

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

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

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

هيكله !!

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

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

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

http://upload.traidnt.net/upfiles/zU192676.png

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

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

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

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

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





http://upload.traidnt.net/upfiles/mJD72695.png
:: ملاحظات مهمة قبل البدء في العمل ::

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

X
HTML

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

  1. < , شفت + و - وتكون لفتح الوسم .
  2. > , شفت + ز - تكون لاغلاق الوسم .
  3. "" , شفت + ط - تكون لتحديد اسم المعرف او الفئة .
  4. / , فقط ظ - تكتب غالبا لاغلاق الوسم
العناصر :
  1. div , الوسم الـ بيتم التقسيم من خلاله .
  2. id , معرف يتم تحديدة ويمكن يندرج تحتها عدة فئات .
  3. class , الفئات وهذه بالامكان تكرارها اكثر من مره في نفس الصفحة .

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

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



بطريقة idرمز

رمز Code:

<div id="###"></div>
لعمل تعليق او ملاحظة
رمز Code:

<!--المعرف الخاص بـ ...-->
بطريقة class
رمز Code:

<div class="###"></div>



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:; 


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



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

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

عموما

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

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

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


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


رمز PHP:

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



شرح الكود


رمز Code:


<!-- forum home top -->

<div id="forumhome_top"> <!-- نقطة التمدد الخاصة بالمنطقة العلوية  فتح الوسم + -->
<div class="right"></div> <!-- الصورة اليمين -->
<div class="left"></div> <!-- الصورة اليسار -->
</div> <!-- اغلاق الوسم -->

<!-- forum home top -->

صورة توضح

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

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


__________________________________________________ __________________________________________________ _______________

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

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



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

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


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




رمز PHP:

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



شرح الكود


رمز Code:


<!-- forum home

رمز Code:

bottom -->

<div id="forumhome_bottom"> <!-- نقطة التمدد الخاصة بالمنطقة السفلية فتح الوسم + -->
<div class="right"></div> <!-- الصورة اليمين -->
<div class="left"></div> <!-- الصورة اليسار -->
</div> <!-- اغلاق الوسم -->

<!-- forum home bottom -->




صورة للتوضيح

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


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

__________________________________________________ __________________________________________________ _______________


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

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

وهي كالاتي


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

https://www.traidnt.net/vb/images/img...2012/12/17.gif


__________________________________________________ __________________________________________________ _______________

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






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

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


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


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





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

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

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

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

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


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


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

رمز 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('../traidnt/images/froumhome_top_background.gif');  /* استدعاء الصورة */ 
    
background-repeat:repeat-x/* التكرار */
    
height:17px/* الارتفاع  */
}

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

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


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


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


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


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

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


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

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

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

لاتنسى ان تغير الجودة بهذه الطريقه ليظهر بشكل اوضح
http://upload.traidnt.net/upfiles/2LM75314.gif

,
,
,



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


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


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


  1. ملف يحتوي على كامل الاكواد مع الشرح .

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


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





alhanoof-des 01 - 01 - 2013 10:54

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

شرح وآفي وَ واضح
اشكر تعبك يَ تركي ع الشرح الممتآز :$ ’

المرجينى 01 - 01 - 2013 11:01

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




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



السلام عليكم

donat 01 - 01 - 2013 18:56

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

تركي العمري 01 - 01 - 2013 19:09

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

المشاركة التي أضيفت بواسطة : alhanoof-des (المشاركة : 19695261)
-

شرح وآفي وَ واضح
اشكر تعبك يَ تركي ع الشرح الممتآز :$ ’

منوره , ياغاليه ..

اقتباس:

المشاركة التي أضيفت بواسطة : المرجينى (المشاركة : 19695268)
وعليكم السلام ورحمة الله




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



السلام عليكم

حياك الله ياامير ..
ربي يسعدك

اقتباس:

المشاركة التي أضيفت بواسطة : donat (المشاركة : 19696471)
يسعدك ربي
محتاجه هالدرس بطبق وارجع

يارب , الجميع
موفقه خير ..

donat 01 - 01 - 2013 19:25

رد : 4/ توزيع التاطير الرباعي شرح مصور , فيديو , الاسهل على الاطلاق
 
طيب ياغالي ان امكن توزيع لايطار
بلمنتدى لاني حاولت وعجزت اعرف :(

تركي العمري 01 - 01 - 2013 20:38

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

المشاركة التي أضيفت بواسطة : donat (المشاركة : 19696539)
طيب ياغالي ان امكن توزيع لايطار
بلمنتدى لاني حاولت وعجزت اعرف :(



طبقي الدرس ياغاليه , واي خطا تواجهييه لاهنتي استفسري ..
ونحن بالخدمه
مودتي

fenix 01 - 01 - 2013 23:02

رد : 4/ توزيع التاطير الرباعي شرح مصور , فيديو , الاسهل على الاطلاق
 
الله يبارك فيك اخي تركي والله شرح بسيط ولكنه مفيد اكثر من اي شرح معقد وكلامك يجاوب على اكثر الاسئلة التي تدور بالبال

ياشمس عمري 02 - 01 - 2013 00:31

رد : 4/ توزيع التاطير الرباعي شرح مصور , فيديو , الاسهل على الاطلاق
 
ياشيخ والله عليك شرح يبرد القلب
شرح واضح و سهل مو مثل ماتعلمته
لااحد يجي يقول مافهمت
كل شئ واضح و مفهوم
ننتظر درس وضع الروابط على الحقوق
تعبت منها و تعبتك معي
ياشيخ روح عسى ربي يسهل لك و يوفقك لفعل الخير
متابعتك

محمد العانيني 02 - 01 - 2013 00:37

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

ما شاء الله ,, درس واضح ورائع

يعطيك العافية اخوي تركي

ما ننحرم من جديدك يا رب

وان شاء الله رح يتم التطبيق قريبا لجميع الدروس

تركي العمري 02 - 01 - 2013 01:52

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

المشاركة التي أضيفت بواسطة : fenix (المشاركة : 19697185)
الله يبارك فيك اخي تركي والله شرح بسيط ولكنه مفيد اكثر من اي شرح معقد وكلامك يجاوب على اكثر الاسئلة التي تدور بالبال

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

اقتباس:

المشاركة التي أضيفت بواسطة : ياشمس عمري (المشاركة : 19697431)
ياشيخ والله عليك شرح يبرد القلب
شرح واضح و سهل مو مثل ماتعلمته
لااحد يجي يقول مافهمت
كل شئ واضح و مفهوم
ننتظر درس وضع الروابط على الحقوق
تعبت منها و تعبتك معي
ياشيخ روح عسى ربي يسهل لك و يوفقك لفعل الخير
متابعتك

كلامك يحمسني جدا بارك الله فيكي
يارب والجميع .
ونسأل التوفيق من الله


اقتباس:

المشاركة التي أضيفت بواسطة : محمد العانيني (المشاركة : 19697443)
وعليكم السلام ورحمة الله وبركاته

ما شاء الله ,, درس واضح ورائع

يعطيك العافية اخوي تركي

ما ننحرم من جديدك يا رب

وان شاء الله رح يتم التطبيق قريبا لجميع الدروس


الله يسعدك ياغالي ..
منور لبى قلبك ..

Solar Attack 02 - 01 - 2013 01:57

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

الدرس الرابع كأنه طول علينا بس موب مشكلة وجودك أهم :) ،،

راح اتابعه ان شاء الله ،،

تركي العمري 02 - 01 - 2013 02:00

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

المشاركة التي أضيفت بواسطة : Solar Attack (المشاركة : 19697628)
رائع يالغلا ،،

الدرس الرابع كأنه طول علينا بس موب مشكلة وجودك أهم :) ،،

راح اتابعه ان شاء الله ،،

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

معك حق وباذن الله راح نعجل بالدرسين الاخيرين ..

حفظك الله ورعاك ..

مودتي

spirit sleep 02 - 01 - 2013 11:18

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

تركي العمري 02 - 01 - 2013 17:44

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

المشاركة التي أضيفت بواسطة : spirit sleep (المشاركة : 19698332)
مششكور يا غالي ع الشرح
سلمت يداك

ولو ياطيب ع راسي ..


اقتباس:

المشاركة التي أضيفت بواسطة : ahmedengu (المشاركة : 19698718)

https://www.traidnt.net/vb/images/img...13/01/5525.jpg


الساعة معتمدة بتوقيت جرينتش +3 . الساعة الآن : 15:13.
المعهد غير مسؤول عن أي اتفاق تجاري أو تعاوني بين الأعضاء
فعلى كل شخص تحمل مسئولية نفسه إتجاه مايقوم به من بيع وشراء وإتفاق وأعطاء معلومات موقعه
التعليقات المنشورة لا تعبر عن رأي معهد ترايدنت ولا نتحمل أي مسؤولية قانونية حيال ذلك (ويتحمل كاتبها مسؤولية النشر)

Powered by vBulletin® Version 3.8.11 .Copyright ©2000 - 2020, Jelsoft Enterprises Ltd


SEO by vBSEO ©2011, Crawlability, Inc.