منتدى جلاكسو
تطوير المواقع والمنتديات وادوات التصميم => ادارة وتطوير واشهار المواقع => الموضوع حرر بواسطة: عين الصقر في 02/09/2005 » 03:33:am
-
أنا ابصراحة وأنا أتصفح منتدى تطوير المواقع والمنتديات وجدت الكثير من المبتدئين فحبيت أعطيهم هاذي الدورة لكي نحسن من مهارات الجميع
الخطة الأساسية
1- تصميم الواجهة عن طريق الفوتوشوب
2- تعديل الواجهة وإضافة الروابط عن طريق الفرونت بيج
3- حجز مساحة عند موقع مجاني
4- تركيب منتدى من SMF على سيرفر الأباتشي ومن ثم رفعه للإنترنت( موجود في موضوع الأخ دونجوان )
ملحقات الدورة
1- تركيب السكربتات
وسأقوم بإذن الله بتصميم سكربتات خاصة بسيط لمساعدة الجميع
الرجاء على كل من سيتابع الدورة التحضير للدورة بأن يكون لديه البرامج التالية :
1- Frontpage2003
2- الفوتوشوب
3- ويجب أن يتوفر لديك منتدى SMF لتركيب المنتدى
-
الآن سوف نبدأ بالمرحلة الأولى وهي تصميم الواجهة
نفتح الفوتوشوب ونقوم بفتح عمل جديد
ونحدد المقاسات كالتالي
الآن نتبع المسار التالي view>>>show>>>Grid
وستظهر المربعات للرسم بالدقة المطلوبة
الآن نفتح لير جديد
نختار أداة المربع ونبدأ بالرسم كالتالي
والآن نختار أداة التدرج اللوني ونحدد أحد الخيارات التي في الأعلى كما في الصورة
-
ونختار الألوان
وأنا عن نفسي أفضل الأزرق الغامق مع الأزرق الفاتح
ليظهر لي الشكل التالي
نفتح لير جديد
نختار هذه الأداة ونحدد البيكسل في الأعلى نضع 3
وهكذا رسمت الشكل المطلوب وقمت بتلوينه أيضا ً
-
والآن سوف نقوم بتغيير بعض الأشياء في المظهر وذلك بالضغط كما في الصورة ثم
Blinding options
ثم نضغط على Drop shadow
ونضع المقاسات كما في الصورة
-
نحدد اللير الأول ونرفعه قليلا ً كما في الصورة
والآن نقوم بفتح لير جديد
ونختار أداة المربع ونقوم برسم مربع يتكون من مربعين صغار أسفل عنوان الموقع بهذا الشكل وأنا قمت بتلوينها اختصارا ً للوقت
والآن نفتح لير جديد
لنرسم المربعات اللتي سنضع بها المحتويات أو القائمة
نختار أداة المربع ثم نقوم بتحديد مستطيل مع ترك مربع على الجانب ومربع في الأعلى
وقد قمت بتلوينه بالأزرق الفاتح
-
وبعد ما عملت كوبي أروح أختار أداة النقل وأروح للمستطيل وأضغط على المستطيل وأسحبه وأحطه في الجهة الثانية مثل ما في الصورة
وستلاحظ أن الفوتوشوب قام بفتح اللير الجديد تلقائيا
والآن نفتح لير جديد
وسوف نقوم برسم المستطيل الذي سيكون عنوان للقائمة وسيتكون من مربع صغير ونصف وسيكون بهذا الشكل
الآن سنقوم بالنسخ كما قمنا بنسخ المستطيل الكبير
-
والآن نفتح لير جديد
ونقوم بالرسم فالوسط كما في الشكل ولقد قمت بتلوينها بالأزرق الفاتح كما في الشكل ونفتح بعده لير جديد
ونقوم برسم المستطيل الذي في الأعلى
والآن وصلنا للمرحلة الأخيرة وهي رسم مستطيل الحقوق والذي يوضع أسفل الواجهة
نفتح لير جديد ونحدد أداة المربع ونقوم برسم المربع وتلوينه كما في الصورة
-
والآن انتهيت من إضافة النصوص وقد أضفت بعض اللمسات البسيط على الخلفية
وهذا هو الشكل النهائي
-
طريقة تقطيع الواجهة
الآن سنكمل الدرس الأول وهو طريقة تقطيع الواجهة
الآن إحفظ الصورة بصيغة JPEG
أقوم باختيار أداة التقطيع وهي كما في الصورة
أخواني عملية التقطيع تستغرق وقت وأود شرحها فلذلك سأشرحها عن طريق الكتابة
نقوم الآن بقطع الجزء العلوي ومن ثم العنوان والقائمة الأفقية نقسمها لعدة أقسام انظروا
إلى الصورة
-
ويجب في التقطيع عدم ترك أي مساحة فارغة
تستطيع أيضا ً إضافة الروابط عن طريق الضغط بالزر الأيمن ثم اختيار
Edit slice Optinos
سيظهر لك كما في الصورة
نكمل الشرح على هذه الواجهة
-
درسنا اليوم عن تعديل الواجهة وإضافة الروابط عبر الفرونت بيج
كما ترون في الصورة التالية قمت بتقطيع الواجهة
وكما قلت في الدرس السابق عن طريقة التقطيع والحفظ بعد التقطيع سأقوم به على هذه الواجهة
والآن أقوم بفتح الفرونت بيج
وأفتح الواجهة ستظهر بالشكل التالي
-
والآن سأقوم بتظليل الواجهة ثم النقر بالزر الأيمن ثم خصائص الجدول
سيظهر كما في التالي
أقوم الآن بالذهاب إلى خيار المحاذاة ثم افتح القائمة المنسدلة واختيار الأمر توسيط والآن انقر على زر الموافقة
لتصبح الواجهة بالوسط
سوف نقوم الآن بإضافة الروابط والجمل
أقوم باختيار المربعات اللتي سأضع بمكانها الصور وأقوم بمسحها كما في الصورة
-
وأقوم بوضع مكان المربعات الألوان اللتي كانت موجودة أو أقوم بوضع الصورة كخلفية في الخلية
ومن الأفضل أن نقوم بتعيين الصورة الممسوحة كخلفية
وذلك كالتالي
أقوم بالضغط بالنقر المزدوج على الصورة واختيار الأمر عام ونسخ الرابط
ثم امسحها وأنقر على الصورة بالزر الأيمن واختيار الأمر خصائص الخلية وأضع علامة صح أمام الأمر
استخدام صورة خلفية وأقوم بلصق الرابط في المربع وأنقر على الأمر موافق
والآن أضفت بعض الجمل على الواجهة
وقمت برسم الجداول وإضافة الروابط
وأستطيع الآن إضافة خلفية عن طريق النقر بالزر الأيمن ثم خصائص الصفحة
ثم أعين لون الخلفية كما في الصورة
(https://www1.glaxu.net/up3/uploaded/pic/ta9m27.jpg)
-
والآن بعد ان انتهيت من كل شيء هذه هي الواجهة في المعاينة
-
الف شكر بس لو تعرف تجبلنا البرامج الى مكتوبة فوق
تبقا بطل بجد
-
انا لو قولت انى باحبك الحب شويه عليك رائع فعلا احييك على مجهودك فى هذا المنتدى وياريت المزيد ربنا يجازيك كل خير لانى محتاج الموضوع ده اوى ومرة تانيه الف شكر يا باشا
-
مشكووووووور اخوي ... شرحرائع ومميز لقد ازدادت خبرتي في التصميم الان....
تحياتي ...fallanet