المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : [درس] الدرس الثاني ][ تعلم تصميم قالب لـ postbit_legacy بالطول + العرض ][


الشبح
08-09-2009, 09:02 صباحاً
بسم الله الرحمن الرحيم

والصلاة وللسلام على اشرف الانبياء والمرسلين سيدنا محمد وعلى اله وصحبه اجمعين


اما بعد


السلام عليكم ورحمة الله وبركاته


بعد الدرس الاول


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


بعد تصميم القالب الذي اردناه ناتي الى الخطوه التاليه وهي التقطيع والتركيب بالفرنت بيج او بأي برنامج أخر

والاهم هو معرفة كيف التركيب الصحيح دون حصول أي أخطاء

ومن خلال الدرس الاول

الدرس الاول ][ تعلم تصميم قالب لـ postbit_legacy بالطول + العرض ][

يمكننا المباشره الان لــ تقطيع الاستايل

بسم الله نبدأ

نحن وصلنا لهذه الخطوه : وهي الانتهاء من عمل التصميم والفكره التي رسخت في عقولنا

http://upload.traidnt.net/upfiles/L9O25173.jpg


طبعن العمل خالص (التصميم) لم يتبقى لنا سواء تقطيعه وتركيبه


الان طريقة التقطيع بهذه الاداء

http://upload.traidnt.net/upfiles/tOV14918.jpg


ولاحظنا نقاط التمدد التي من المهم مراعاتها عند التصميم كما بالصوره القبل السابقه
لاحظ معي :
1- هي المنطقه العلويه ( لاتنسى منطقة التمدد )
2- هي المنطقه الوسطيه ( لاتنسى منطقة التمدد )
3- هي المنطقه الشفليه ( لاتنسى منطقة التمدد )
4- هي المنطقى التي على اليمين ( لاتنسى منطقة التمدد )
5- هي المنطقه التي على اليسار ( لاتنسى منطقة التمدد )

وايضاً لاحظ معي واهم نقاط سنركز عليها

المنطقه الاولى وهي ستحتوي على بيانات العضو + الصورة الرمزيه

المنطقة الثانيه والتي ستحتوي على الموضوع + اسم الموضوع ويمكننا وضع التوقيع ايضا

المنطقه الثالثه ستكون لازرار الموضوع ( التعدل او الحذف) ( الاقتباس المتعدد) والخ..

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

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

المنطقة العلويه


http://upload.traidnt.net/upfiles/A2n58210.jpg


المنطقه اليمنى + اليسرى

http://upload.traidnt.net/upfiles/bsH58336.jpg


الان بعد التحديد لاحظ جميع المناطق كيف تم تحديدها


http://upload.traidnt.net/upfiles/Goa58458.jpg


الصوره القادمه هي اخر مراحل التقطيع كما موضح فيهاا جميع المناطق الزايه + الهيدر + الفوتر + الوسط مع الاطراف + نقاط التمدد المحدده باللون الازرق


http://upload.traidnt.net/upfiles/uPf58626.jpg


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

ملف >> حفظ كصفحة ويب :

http://upload.traidnt.net/upfiles/q7n59663.jpg

وهذه الصور بعد الحفظ

http://upload.traidnt.net/upfiles/ovb59749.jpg



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

والدروس للتقطيع كثيره وكل شخص وله فكرته وطريقتة
...........................
الان جاء دور الــ front page

'' طبعن انت اللحين ذابحك البرد والدفايه على يمينك وكوب حليب (لونا) '' << يالبيه بس http://traidnt.net/vb/images/smilies/shiny01.gif

لاهنت تروح تفتح الفرنت بيج وتمسح مابداخله

مسحت الملف وخلصت <<< كويس يابابا http://traidnt.net/vb/images/smilies/nosweat.gif طيب ظغطة زر بنص الصفحه واختر خصائص الصفحه واتجاه الصفحه من اليمين الى اليسار

طبعن الان راح نضيف جداول

ولاكن قبل مانضيف جداول راح يكون لنا سؤال كم جدول راح نضيف ؟
الجواب : نرجع للصوره التاليه

http://upload.traidnt.net/upfiles/uPf58626.jpg


شف الله لايهينك كم عمود وكم صف الي احنا قطعناهم
راح تلاحظ 5 صفوف و 3 اعمده

اذن من الجداول ندرج 5 صفوف و3 اعمده :
ونرى كيف الترتيب على حسب التقطيع اللي قطعناه والصور اللي ظهرت بعد التقطيع

والترتيب بالجدول

http://upload.traidnt.net/upfiles/zUc60973.jpg


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

اول شي تركيب الزوايه الــ 6


http://upload.traidnt.net/upfiles/uXB61367.jpg


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

نكمل

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

تم تركيب جميع نقاط التمدد

نقطة مهمه
( لتفادي اخطاء التمدد مكان التمد اظف صورة التمدد على انها صوره فوق التمدد )

هذا الشكل بعد تركيب الزوايه + مناطق التمدد واضفنا فوقهم صورة التمدد لتفادي زيادة في الجداول ( صورة التمدد خلهاا صغيره افضل )

http://upload.traidnt.net/upfiles/68T62494.jpg


طبعن للتاكد من عملك اظغط من اسفل على معاينة , لكنها لن تكون دقيقه وهذا ليس به اشكال


طبعن الحمدلله وبفضل من الله عز وجل

تعلمنا حتى الان
!- وضع فكره لطريقة التصميم.
!!- البدء بالتصميم وتقطيعه .
!!!- توزيع الجداول والتصميم بالفرنت بيج.
!!!!- الخطوة التاليه تركيب القالب على الاستايل

طبعن احنا شغلنا بالعرض نروح للمنتدى ونسحب منه postbit
اما اذا كان شغلنا بالطول نسحب قالب postbit_legacy

ونروح نسحب منه اول جزء وهوى محتوى الموضوع

لاحظ وضعنا نقاط اعلى واسفل القالب لاننا سوف نحتاجهااااا
لان فوق واسفل النقاط سوف نضع فيه التصميم بعد مانضيف على المحتويات


http://upload.traidnt.net/upfiles/g6e63199.jpg


طيب حلو وضعنا النقطان وبعدين ؟؟؟؟؟


اللحين نروح لبيانات العضو وصورته الشخصيه ونحددها لاحظ اننا ظغطنا على تيبل ( جدول)

اي يعني ان هذا الجدول هو مانريده او يمكننا التحديد بالطريقه العاديه

http://upload.traidnt.net/upfiles/LFi63551.jpg


الجزء اللي اعلى من التحديد سنعود له بعد الانتهاء

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

وناتي محتوى الموضوع ونحدد بالطريقه العاديه افضل هنا

نحدده كله كما بالصورة ( حدده من القالب الاصلي)

http://upload.traidnt.net/upfiles/Dqq64148.jpg

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

لاحظ المربعين الحمر وتفسيرهم فوووق + الردس الاول

http://upload.traidnt.net/upfiles/L8w64714.jpg


المربع الثالث يمكنك وضع :

http://upload.traidnt.net/upfiles/vao65042.jpg

http://upload.traidnt.net/upfiles/uUR66524.jpg




الان لاتنسى الصور تغير امتدادهااا

ملخص ( ركبت المحتوى الاول + المحتوى الثاني + المتوى الاول+ ركبت الايقونات المخلفات والتحديد والتقيم )

طيب ندخل على تعليمات برمجيه ونحدد القالب

ونرجع للقالب اللي عملنا فيه (*) العلامه

من خدمات برمجيه

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

كيذا الحمدلله خلصنا من الشرح والتتقطيع والتركيب

انسخ القالب وركبه على استايلك وجرب عملك



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

خ ــادم الإسلام
08-09-2009, 10:29 صباحاً
لا هنت على النقل ياالشبح

الشبح
08-09-2009, 12:06 مساءً
يعطيك العافية
ابو حنين

ح ـــكـم القدر
08-09-2009, 01:58 مساءً
سلمت يالغلآ

ابو فاطمة
15-09-2009, 03:16 مساءً
عليكم السلام ورحمة الله وبركاته
تسلم ياالغالي عاشت ايدك