Twitter Delicious Facebook Digg Stumbleupon Favorites More

15‏/06‏/2012

[شرح] طريقة تصميم وانشاء صفحة اندكس كواجهة للمنتدى او للموقع

بسم الله الرحمن الرحيم

اسعد الله أوقاتكم بكل خير


أحبتي الأعضاء .. هذا أول درس لي بصراحة .. واتمنى ان يحوز على رضاكم ..


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


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


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


بسم الله ونبدأ ..


اولا البرامج المطلوبة ..

1ـ برنامج الفوتشوب ..

2ـ برنامج الفرونت بيج ..


طريقة العمل من جزئين ..


الجزء الأول تصميم صفحة ببرنامج الفوتوشوب ..


اولا ً :ـ


نفتح برنامج الفوتشوب ..






ثم نختار عمل جديد




ثم نختار هذه الاعدادات





الطول = 500
العرض = 500
الخلفية = بيضاء
طبعا ً الخيارات هذي مو ضروري تحطها ولاكن كبداية اختار مثل كذا .. بعد ما تتعلم حط الخيارات اللي تناسبك في تصميمك ..


الحين نجي ونختار الصورة اللي راح نصمم فيها الواجهة .. وانا اخترت صورة مصممه وخالصة ..





انتهينا الآن من الجزء الأول وهو التصميم ببرنامج الفوتشوب .


ننتقل الآن للمرحلة الثانية وهي انشاء الإندكس وحفظة ليتم بالاخير رفعه للموقع ..


اولا ندخل على برنامج الفرونت بيج ..



نفتح صفحة جديدة ..



ومن ثم نختار هذا الخيار ..




راح تفتح معانا صفحة بالشكل هذا ..




نمسح جميع الاكواد

ctril + A ثم نضغط Deleet

ثم نختار من تحت بالزاوية اليمين ونضغط على كلمة تصميم ..




ونضغط بزر الماوس الأيمن ونختار خصائص الصفحة ..



راح يطلع معانا الشكل هذا ..



رقم ( 1 ) يعني تكتب اسم الموقع .. مثلا انا كاتب .. منتديات رمش الخيال ..
رقم ( 2 ) تكتب فيه الوصف ومو ضروري ترا ..

بعد ما نكتب كل اللي نبيه ..

نرووح للتنسيق

ونحط الخلفية اللي تناسب التصميم اللي سويناهـ ..



وانا اخترت الاسود ..


الحين نجي ونضع الصورة

من إدارج .. كما في الصورة ..





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




والحين نجي ونحفظ العمل كصفحة اندكس ..

من ملف ..





بعدين نحفظ العمل كصفحة اندكس ..





والحين ارفع الصفحة عن طريق برنامج الـFtp .. وأنتهينا

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


اتمنى ان اكون قد وفقت في شرحي

تمنياتي لكم بكل خير 
للتواصل عبر الايميل:
mohamed_elhabab@yahoo.com
او
الفيس بوك:
www.facebook.com/mohamedelhabab

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Blogger Templates | تعريب وتطوير : قوالب بلوجر معربة