الموضوع: (الدرس الاول) من سلسله تصميم ستايل Vb
عرض مشاركة واحدة
قديم 02-27-2008, 04:32 صباحاً   #1 (permalink)
T I T A N
عضــو
 
الصورة الرمزية T I T A N
 
تاريخ التسجيل: Jan 2008
المشاركات: 19
معدل تقييم المستوى: 8T I T A N يستاهل ترحيب
(الدرس الاول) من سلسله تصميم ستايل Vb
بسم الله نبدأ

نفتح لير جديد على الفوتو شوب بمقاس 777×400 px



نختار اداه المربع ونقوم بإنشاء مستطيل في اعلى اللير واعطائة التدرج او التأثير المطلوب






نقوم بإختيار اداه المستطيل مرة اخرى لعمل القائمه وإعطائه التأثيرات كما هو موضح بالصورة



كلك يمين على اللير ونختار كما في الصورة لعمل القائمه




ثم نختار اداة التحديد ونقوم بتحديد المسافة المطلوبه ثم دليت




النتيجة



نضيف التأثيرات على الهدر




الان نقوم بعمل مستطيل في اسفل اللير مع وضع التأثيرات والصور والفرش والكل يبدع بفنه بالنسبه لي افضل البساطه لخفة التصفح




هكذا اكتمل التصميم




*&*&*&*&*

مرحلة التقطيع


نختار الاداه



وركزوا معي بها النقطة جدا مهمه

نقوم بتقسم التصميم كما بالصورة مع الإنتباه الى نقاط التمدد



نحفظ العمل من القائمه file> save for web





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


*&*&*&*&

توزيع صور الستايل بالفرونت بيج

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



ادراج جدول 3×3



نذهب الى مساحة العمل وكلك يمين على الجدول > خصائص الجدول



ونعطي الاعدادت التالية



نضع المؤشر على الخلية اليسرى ونقوم بإدراج الهدر من القائمه: ادراج > صورة > من ملف



نفعل ذلك بالجهه اليمنى من الهدر وكذالك الفوتر

أما بالنسبه لنقطة التمدد
نذهب بمؤشر الماوس الى الخلية الوسطى من الهدر وكلك يميك > خصائص الخلية






خلصنا توزيع الصور بالجدول


بقى علينا إظافة الروابط وتعديل إمتداد الصور

كيف نظيف الروابط ؟

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



ننسخ الرابط ونلصقة في خانه العنوان CTRL + V



أما بالنسبه لإمتداد الصور

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





كود PHP:
<div align="center">
    <table border="0" width="100%" cellspacing="0" cellpadding="0">
    <tr>
        <td width="297">
        <img border="0" src="file:///C:/Documents%20and%20Settings/ALMMLKAH/Desktop/صور%20الدورة/الدرس%20الاول/images/styl_01.gif" width="297" height="161"></td>
        <td background="file:///C:/Documents%20and%20Settings/ALMMLKAH/Desktop/صور%20الدورة/الدرس%20الاول/images/styl_02.gif" width="100%">&nbsp;</td>
        <td>
        <img border="0" src="file:///C:/Documents%20and%20Settings/ALMMLKAH/Desktop/صور%20الدورة/الدرس%20الاول/images/styl_04.gif" width="382" height="161"></td>
    </tr>
    <tr>
        <td width="297">&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td width="297">
        <img border="0" src="file:///C:/Documents%20and%20Settings/ALMMLKAH/Desktop/صور%20الدورة/الدرس%20الاول/images/styl_07.gif" width="297" height="30"></td>
        <td background="file:///C:/Documents%20and%20Settings/ALMMLKAH/Desktop/صور%20الدورة/الدرس%20الاول/images/styl_08.gif" width="100%">&nbsp;</td>
        <td>
        <img border="0" src="file:///C:/Documents%20and%20Settings/ALMMLKAH/Desktop/صور%20الدورة/الدرس%20الاول/images/styl_09.gif" width="382" height="30"></td>
    </tr>
</table>
</div> 
نحذف الإمتدا ونبقي على فايل الصور والصورة ...بيصير عندنا

كود PHP:
<div align="center">
    <table border="0" width="100%" cellspacing="0" cellpadding="0">
    <tr>
        <td width="297">
        <img border="0" src="images/styl_01.gif" width="297" height="161"></td>
        <td background="images/styl_02.gif" width="100%">&nbsp;</td>
        <td>
        <img border="0" src="images/styl_04.gif" width="382" height="161"></td>
    </tr>
    <tr>
        <td colspan="3">&nbsp;</td>
    </tr>
    <tr>
        <td width="297">
        <img border="0" src="images/styl_07.gif" width="297" height="30"></td>
        <td background="images/styl_08.gif" width="100%">&nbsp;</td>
        <td>
        <img border="0" src="images/styl_09.gif" width="382" height="30"></td>
    </tr>
</table>
</div> 



انتهينا من توزيع الستايل بالفرونت

يتبع مرحله التركيب ...





من مواضيع T I T A N في المنتدى
T I T A N غير متواجد حالياً   رد مع اقتباس