تصميم فريم اطار للمنتدى

Spread the love

تصميم فريم اطار للمنتدى

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

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

الخطوه الاولى بتكون تصميم الإطار على الفوتوشوب طبعا كل واحد وأبداعه الشخصي وعلى سبيل المثال هذا الإطار اللي راح نشتغل عليه بعد مانكون إنتهينا من التصميم

ملاحظه حجم الاطار 800 على 600 بكسل والباك راوند شفاف قبل لا نبداء تصميم الاطار يكون احسن

الخطوه الثانيه تقطيع الإطار إلى أربع زوايا وأربع أوساط
راح نبداء بالزوايا القص بيكون (( ctrl x )) اضغط كنترول اكس عبلا الكيبورد بعد التحديد قص واللصق (( ctrl v )) كنترول في لصق

::__IHACKLOG_REMOTE_IMAGE_AUTODOWN_BLOCK__::1

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


الصوره هاي لزوايه اليسار راح نعكسها لزاويه اليمين طبعا بعد مانخزنها يسار راح نبداء نعكس

راح تنعكس معانا الصور وتصبح الزاويه اليمين

نخزن اليمين (( بيكون معانا يمين ويسار الزوايا اللي فوق ))
الخطوه التليه الزوايا الارضيه

الحين معانا الزاويه اليمين ارضيه باقي اليسار تابع الشرح

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

علشان تطلع الزوايا نفس حجم الأوساط نتبع الخطوه التاليه

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


::__IHACKLOG_REMOTE_IMAGE_AUTODOWN_BLOCK__::10

اربع اوساط للمربع
::__IHACKLOG_REMOTE_IMAGE_AUTODOWN_BLOCK__::12
::__IHACKLOG_REMOTE_IMAGE_AUTODOWN_BLOCK__::13
::__IHACKLOG_REMOTE_IMAGE_AUTODOWN_BLOCK__::14
::__IHACKLOG_REMOTE_IMAGE_AUTODOWN_BLOCK__::15

::::::::::::::::::::
::::::::::::::::::::
الخطوه التاليه تجميع الاطار على الفرونت بيج ووضع كود التمبلت اتبع الخطوات التاليه نفتح (( 9 )) جداول
::__IHACKLOG_REMOTE_IMAGE_AUTODOWN_BLOCK__::16

الخطوه التاليه رايت كلك على الجدول ونختار الخصايص مثل ماهو موضوح بالصوره

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

راح يكون معانا 9 جداول شفافه والحين نجمع الصور

(( ملاحظه هامه ))
الزوايها عن طريق ادراج صوره من ملف
::::::::
الاوساط ادراج خليه

السبب الاوساط تتمدد مع المنتدى لو ادرجناها صوره من ملف راح تطلع بحجمها الطبيعي بالمنتدى ..

1- ادراج صوره من ملف لزواااااااااااايا واول صوره مثال اعلى اليمين

وبطلع معانا الشكل هذا

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

::::::::::::::::::

الخطوه التاليه الاوساط عباره عن خلايا لاحظ الخطوات اول خليه الوسط اليمين مثل ماهو موضح بالصوره
::__IHACKLOG_REMOTE_IMAGE_AUTODOWN_BLOCK__::22

تابع
نضغط على استعراض وبحث عن صورة الوسط اليمين وبعدها تطبق موافق
::__IHACKLOG_REMOTE_IMAGE_AUTODOWN_BLOCK__::23

وبيكون معانا الشكل التالي وراح نلاحظ تكرر الوسط اليمين طنششششش وكمل باجي الاوساط
::__IHACKLOG_REMOTE_IMAGE_AUTODOWN_BLOCK__::24

بعد مانكمل باجي الاوساط راح يطلع لنا الشكل التالي
::__IHACKLOG_REMOTE_IMAGE_AUTODOWN_BLOCK__::25

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

اما في وضع المعاينه برفيووو راح يتغير الشكل لاحظ
::__IHACKLOG_REMOTE_IMAGE_AUTODOWN_BLOCK__::27

:::::::::::::::::::::

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

::__IHACKLOG_REMOTE_IMAGE_AUTODOWN_BLOCK__::28

نختار بعدها من الاسفل وضع كود html

ونفس المكان اللي راح نحصل فيه الماوس نسوي لصق لمحتويات التمبلت بدون مانغير ماكان الماوس

الخطوه التاليه معايه برفيووووووو وراح يطلع معاك تمبلت الفروم هوم كامل يعني محتويات الهدر والفاوتر والمجالس كلهم في الاطار وطبعا هذا يعتمد على رغبتك

الخطوه الأخيره نرفع الصور (( 8 )) لمجلد الــvb
وننقل الكود لتمبلت الــforumhome نفس الخطوات تقدر تطبقها مع تمبلت الـ forumdisplay فقط نرجع للفرونت بيج نسوي تراجع ونحط كود التمبلت ومايحتاي نرفع الصوره وكذلك مع تمبلت الــshowthread

 

موضوع الدرس

المصدر: منتديات ألم الإمارات

 

الكاتب geek4arab

geek4arab

مواضيع متعلقة

التعليقات مغلقة