[ ط¯ط±ط³ ] طھط£ط·ظٹط± ط¨ظٹط§ظ†ط§طھ ط§ظ„ط¹طµظˆ ط¨ط§ظ„طµظˆط± ط¨ط§ظ„ظ€ css ظ…ظ† ط§ط®ظˆظƒظ… ط¨ظˆطµط§ظ„ط*






اليوم درس مفصلنا يا اخوان عن تأطير بيانات العضو والطريقة سهله جداً

مثال



المتطلبات :
1- فوتوشوب
2- Microsoft Expression Web او فرونت بيج لتوزيع الصور بالــ css

بسم الله نبدء الدرس مفصل :

نفتح عمل جديد ببرنامج الفوتوشوب ومهم جداً الابعاد
العرض = 212 بيكسل
الارتفاع = على حسب تصميمك وانت حر في ذلك



ناتي الى طريقة التقطيع وتنقسم الى 3 صور وهي :

1- الصورة العلوية



2- صورة تمدد الوسطى
3- الصورة السفلى


والآن في قالب template البوست بت لاجيسي postbit_legacy نبحث عن هذا الكود code

رمز PHP:
<code style="white-space:nowrap"> <code> <div id="postmenu_$post&#91;postid&#93;">
</code> </code>

ونلصق فوقه مباشرة

رمز PHP:
<code style="white-space:nowrap"> <code> <!--بداية العلوي-->
<div class="postinfo">
<div class="postinfo_top"></div>
<div class="postinfo_bg">
<!--نهاية العلوي-->
</code> </code>

ثم نبحث ايضاً عن هذا الكود code في نفس القالب template

رمز PHP:
<code style="white-space:nowrap"> <code> </td>
<if condition="$show&#91;'moderated'&#93;">
</code> </code>


ونلصق فوقه مباشرة

رمز PHP:
<code style="white-space:nowrap"> <code> </div>
<!--بداية السفلي-->
<div class="postinfo_do"></div>
</div></div>
<!--نهاية السفلي-->
</code> </code>

والان نأتي الى كود code الـ css وعليك بتعديل الارتقاع فقط + مسار الصور

رمز PHP:
<code style="white-space:nowrap"> <code> .postinfo {
padding-right: 5px;
}


.postinfo_top { /* الصورة العلوية */
background-position: right;
background-image:url('edo/images/postinfo_top.gif'); /* الصورة العلوية مسار*/
background-repeat: no-repeat;
height: 69px;
width: 212px;
}
.postinfo_bg{
background-color: transparent;
background-image:url('edo/images/postinfo_bg.gif');/* مسار صورة التمدد */
background-repeat: repeat-y;
width: 212px;
}
.postinfo_do{
background-position: bottom;
background-image:url('edo/images/postinfo_do.gif');/* الصورة السفلى*/
height: 99px;
background-repeat: no-repeat;
width: 212px;
}
</code> </code>

وبعد التعديل من لوحة التحكم نذهب الى الإستايل styleات والقوالب -> التحكم بالإستايل styleات -> رئيسي css

وفي اخر مربع

تعاريف CSS الإضافية/Additional CSS Definitions
نلصق كود code الــ css بعد تعديل مسارات الصور + الارتفاع

انتهى الدرس مفصل
ولا تنسونا بالدعاء الصالح لي ولوالدي
اخوكم المصمم بوصالح

المصدر
منتديات تصميم التعليمية




التعديل الأخير كان بواسطة بوصالح; 11 - 08 - 2014 الساعة 00:28

الملفات المرفقة [TR]
post.zip (78.2 كيلوبايت, عدد مرات المشاهدة 66 مرة) [/TR]



©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©