الاستضافة الاسلامية

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

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

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

الشرح اهداء :

لمبرمج السكربت : محمد الشرقاوي
جميع مستخدمي السكربت
ادارة واعضاء ترايدنت


الجزء الاول
تصميم الاستايل ببرنامج بالفتوشوب

قص الاستايل ببرنامج بالفتوشوب

الصور النهائيه للتصميم وتجهيز التركيب



الجزء الثاني
تركيب الهيدر والفوتر


الجزء الثاني
تركيب البلوكات - يمين - يسار - وسط

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


معلومات عامة :

نقوم بعمل التصميم كأي تصميم استايل منتدى

بالطريقة المعتداه وبالشكل الذي تراه مناسب

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

العرض : 890 بكسل العرض الذي سوف تكون بالتصميم النهائي

الطول : 500 بكسل ولك الحريه على التصميم


بسم الله نبداء

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



بالصوره السابقه ظهر لنا الشكل النهائي للتصميم وتم توزيع الخطوط للقسم واعتمام القس عليه

بالصوره التاليه

قص التصميم وتجهيزه للتركيب


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


انا استخدم فتوشوب 8 العربي

طريقة حفظ التصميم كتالي


ملف ثم

حفظ للويب

سوف تظهر الصوره التاليه



نختار اسم الصور

نختار كما بالصوره السابفة

والصوره التاليه للتوضيع



الصوره السابقة للتوضح والشكل النهائي للتصميم
ننتقل للحزاء الثاني

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

am4ss_styles.rar

ثم نقوم برفع الاستايل داخل مجلد السكربت في مجلد

templates

نقوم بعمل صوره توضيحية وتحديد

الهيدر

والفوتر

وتحديد قائمة بلوك - يمين- يسار - وسط

كما بالصوره التاليه


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

انا قمت بتغير مجلد السكربت الاسم

test

كما بالصوره التاليه



نقوم بحذف الصور الخاصة باستايل السكربت الذي قمنا بتحميله

اضافة صور التصميم الخاصه بالتصميم

كما بالصوره التاليه



نحدث صفحة السكربت بعد استبدال الصور

وظهر لنا صفحة السكربت كما بالشكل التالي

صورة توضيحية



نقوم بفتح مجلد التصميم الذي تم اختياره سابقا ليكون مجدل التصميم الخاص فيه
سوف اقوم بذكر اسماء الملفات الخاصه بالتعديل

am4ss.css
المف الخاص بتعديل خطوط السكربت والوان الخطوط والخلفيه الخارجيه

header.tpl
الملف الخاص بتعديل الهيدر والخلفيه الداخليه

footer.tpl
الملف الخاص بتعديل الفوتر

templates.php
الملف الخاص بتعديل البلوكات - يمين - يسار - وسط

صوره توضيحة لختيار هذه الملفات



اول نقوم بفتح ملف
header.tpl
باي محرر لديك وانا استخدم برنامج الفرنت بيج

صوره توضيحة



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



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

الشرح بالصوره التوضيحية التاليه



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



نقوم بحفظ القالب ونحدث ونرفعه للموقع ونشاهد التصميم والتاكد من تركيب الهيدر بالشكل الصحيح

صوره توضيحيه




بحمد لله تم تركيب الهيدر بنجاح

سوف تقوم بتركيب الفوتر
نفتح ملف
footer.tpl
الملف الخاص بتعديل الفوتر

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




تم بحمد الله الانتهاء من شرح تركيب الجزء الثاني الهيدر والفوتر



ننتقل للجزاء الثالث
نقوم بفتح صفحة جديد بالفرنت بيج

ونحذف ما هو محدد كما بالصوره التالية



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



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

صوره توضيحة لتحديد اسم البلوك ومحتوى البلوك



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



نقوم بحذف صور التصميم السابق وتجهيز الملف للتصميم الجديد
تم تحديد بخلفيه الون الي خلفيته لون الاحمر
لا تقم بحذفها ابدا والا لن يظهر التصميم

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

اما الي خلفيته لون الاصفر
عباره عن عنوان البولكات ولون خط البلوكات على حسب تصميمك يمكنك وضع الون الذي يناسبك
نقوم بنسخة
وهذه الصوره لتوضيع



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



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



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


صورة توضيحة لتاكد من التصميم


نقوم باضافة
الاكود لملف
templates.php
كما بالصوره التالية



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




البرامج المستخدمه :

سيرفر شخصي لتركيب السكربت
الفتوشوب لتصميم والقص
الفرنت بيج لتركيب

الموضوع الاصلي كل جزاء على حده

الجزء الاول

الجزء الثاتي

الجزء الثالث


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

الشرح اعداد شخضي
اعداد الشرح اخوكم : ادميرال
لا تنسونا من دعائكم
اي استفسار حياكم الله
في رعاية الله

<!-- / message --> <!-- attachments --> الملفات المرفقة [TABLE] [TR] [TD][/TD] [TD]AM4SS.zip (1.11 ميقابايت, عدد مرات المشاهدة 146 مرة)[/TD][/TR][/TABLE]