بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
شرح طريقة تصميم وتركيب install استايل style لبرنامح المتقدم لخدمات المواقع بـ 28 صوره بالتفصيل الممل
لمن يواجهه صعوبه في تركيب install تصميم خاص به ولشركته لسكربت
الشرح طريقة اهداء :
لمبرمج السكربت : محمد الشرقاوي
جميع مستخدمي السكربت
ادارة واعضاء ديزاد باتنة
الجزء الاول
تصميم الاستايل style ببرنامج بالفتوشوب
قص الاستايل style ببرنامج بالفتوشوب
الصور النهائيه للتصميم وتجهيز التركيب install
الجزء الثاني
تركيب install الهيدر header والفوتر
الجزء الثاني
تركيب install البلوكات - يمين - يسار - وسط
سوف نقوم بشرح طريقة تصميم استايل style غير ممدد
معلومات عامة :
نقوم بعمل التصميم كأي تصميم استايل style منتدى
بالطريقة المعتداه وبالشكل الذي تراه مناسب
ولا فرق بينهم بما انك تصمم استايل style وتركب استايل style منتدى سوف تقوم بتركيب install وتصميم الاستايل style لسكربت المتقدم لخدمات الويب
مقاسات التصميم
العرض : 890 بكسل العرض الذي سوف تكون بالتصميم النهائي
الطول : 500 بكسل ولك الحريه على التصميم
بسم الله نبداء
تابع الصوره التاليه قبل قص التصميم وانما التصميم الذي تما اختياره لشرح طريقة التركيب install والتصميم
بالصوره السابقه ظهر لنا الشكل النهائي للتصميم وتم توزيع الخطوط للقسم واعتمام القس عليه
بالصوره التاليه
قص التصميم وتجهيزه للتركيب install
وطريقة حفظ التصميم معروفه ولكن سوف اقوم بشرح طريقةها
انا استخدم فتوشوب 8 العربي
طريقة حفظ التصميم كتالي
ملف ثم
حفظ للويب
سوف تظهر الصوره التاليه
نختار اسم الصور
نختار كما بالصوره السابفة
والصوره التاليه للتوضيع
الصوره السابقة للتوضح والشكل النهائي للتصميم
ننتقل للحزاء الثاني
نقوم بتحمل الاستايل style الذي قمت بتصميمه للسكربت والذي قام المبرمج للسكربت محمد الشرقاوي بتعديل القوالب وتصحيح الاخطاء على الرابط التالي
am4ss_styles.rar
ثم نقوم برفع الاستايل style داخل مجلد السكربت في مجلد
templates
نقوم بعمل صوره توضيحية وتحديد
الهيدر header
والفوتر
وتحديد قائمة بلوك - يمين- يسار - وسط
كما بالصوره التاليه
ثم نقوم بتغير اسمه لاي اسم او بنفس الاسم ولك حرية الاختيار
انا قمت بتغير مجلد السكربت الاسم
test
كما بالصوره التاليه
نقوم بحذف الصور الخاصة باستايل style السكربت الذي قمنا بتحميله
اضافة صور التصميم الخاصه بالتصميم
كما بالصوره التاليه
نحدث صفحة السكربت بعد استبدال الصور
وظهر لنا صفحة السكربت كما بالشكل التالي
صورة توضيحية
نقوم بفتح مجلد التصميم الذي تم اختياره سابقا ليكون مجدل التصميم الخاص فيه
سوف اقوم بذكر اسماء الملفات الخاصه بالتعديل
am4ss.css
المف الخاص بتعديل خطوط السكربت والوان الخطوط والخلفيه الخارجيه
header.tpl
الملف الخاص بتعديل الهيدر header والخلفيه الداخليه
footer.tpl
الملف الخاص بتعديل الفوتر
templates.php
الملف الخاص بتعديل البلوكات - يمين - يسار - وسط
صوره توضيحة لختيار هذه الملفات
اول نقوم بفتح ملف
header.tpl
باي محرر لديك وانا استخدم برنامج الفرنت بيج
صوره توضيحة
نحذف الصوره السابقة ونستبدلها بالصور الخاصه بالتصميم الجديد
لو كان الهيدر header صوره واحده كما عملت في هذا الدرس مفصل
ولو كان لديك اكثر من صوره
يمكنك اضافتها داخل المربع
وتوزيع الهيدر header بالشكل الذي تريده
واضافة الرابط التشاعبيه التي تريدها
صورة توضيحية
تقوم بالذاهاب الا تعليمات برمجية وشرح طريقة جميع ما هو مهم ونقوم بالتعديل عليه وما يهمنا
الشرح طريقة بالصوره التوضيحية التاليه
بعد ما نقوم بالتعديلات اللازمه سوف
ونشاهدها بالصورها التاليه التي تم تنسيقها للتصميم النهائي للهيدر
ملاحظه : من هنا يمكنك تحديد عرض التصميم
نقوم بحفظ القالب template ونحدث ونرفعه للموقع ونشاهد التصميم والتاكد من تركيب install الهيدر header بالشكل الصحيح
صوره توضيحيه
بحمد لله تم تركيب install الهيدر header بنجاح
سوف تقوم بتركيب install الفوتر
نفتح ملف
footer.tpl
الملف الخاص بتعديل الفوتر
نشاهد الصوره ونقوم بعمل التعديلات اللازمه تم شرح طريقة التعيل
مع مراعاة بان تكون صوره الهيدر header هي متمدهه مع امكانيه اضافة صوره ثابته
تم بحمد الله الانتهاء من شرح طريقة تركيب install الجزء الثاني الهيدر header والفوتر
ننتقل للجزاء الثالث
نقوم بفتح صفحة جديد بالفرنت بيج
ونحذف ما هو محدد كما بالصوره التالية
نقوم بادراج الجداول على حسب قص البلوك في الدرس مفصل الاول
تم قص التركيب install على ان يكون
عدد 5 صور افقي
وطول 3 عمودي
ملاحظه مهمه : الجداول يتم ارداجها على حسبب تصميمك
ان كان تصميم للبوك الجزء العلوي 3 صور يمنك اضافة 3 جداول افقي
وان كان اربعه صور اضافة 4 جداول وهكذا
نقوم بادراج الجداول المطلوبه كما بالصوره التاليه
الان نقوم بتوزيع الصور داخل الجداول كما هو مطلوب شكل البلوك
مع مراعاة منطقة التمدد تكون الصوره خلفيه للجدول الخاص بمنطقة التمدد
وقد تواجهك مشكله تشوه التصميم وحلها اضافة فوق منطقة جزء بعرض صغير لمنطقة التمدد التي بالاسفل
ودمج الجداول الي بنص التي لا تلزمنا
سوف نشاهدها بالصوره التاليه
صوره توضيحة لتحديد اسم البلوك ومحتوى البلوك
نقوم بفتح ملف
templates.php
باي محر تريد
وسوف اقوم بشرح طريقة كل ما بداخله وهذا الصوره - ارجو التركيز مهم فهم ما بداخله
يمكنك ضع تصميم بلوك يمين يسار موحد
وبلوك وسط بتصميم اخر
او جميعا بتصميم واحد
نقوم بحذف صور التصميم السابق وتجهيز الملف للتصميم الجديد
تم تحديد بخلفيه الون الي خلفيته لون الاحمر
لا تقم بحذفها ابدا والا لن يظهر التصميم
الي خلفيته لون اخضر
تم استبداله بهذه الجمله للتوضيع
وهذا ما يتم استبداله بالتصميم الجديد وسوف نتابع هذا في بقية الشرح طريقة
اما الي خلفيته لون الاصفر
عباره عن عنوان البولكات ولون خط البلوكات على حسب تصميمك يمكنك وضع الون الذي يناسبك
نقوم بنسخة
وهذه الصوره لتوضيع
بعد ما قمنا بعمل السابق نرجع لتصميم البلوكات بالفرنت بيج
نقوم بلصق ما قمنا بنسخه من الصوره السابقة
واضافة بدل اسم البلوك
وتحديد مسارت الصور الصحيحة وتجهز البلوكات لتركيب install
نشاهد الصوره
نتابع الصورة التاليه بعد ما قمنا بتعديل مسارت الصور
وتجهيز فصل بداية ونهاية البلوك
صورة للتوضيح
الان نقوم بفصل بداية البلوك ونهاية البلوك وتحديد الاكواد المطلوبة
كما بالصورة التالية
صورة توضيحة لتاكد من التصميم
نقوم باضافة
الاكود code لملف
templates.php
كما بالصوره التالية
نخفظ الملف ونرفعه داخل مجلد التصميم ونحدث الصفحة ونشاهد التصميم
كما بالصورة التالية
البرامج المستخدمه :
سيرفر SERVER شخصي لتركيب install السكربت
الفتوشوب لتصميم والقص
الفرنت بيج لتركيب install
الموضوع الاصلي كل جزاء على حده
الجزء الاول
الجزء الثاتي
الجزء الثالث
صور الشرح طريقة بالمرفق
اعتذر عن لكثرة الصور ولعدم ترتيب الموضوع ولكن تم وضعه لتعم الفائده
الشرح طريقة اعداد شخضي
اعداد الشرح طريقة اخوكم : ادميرال
لا تنسونا من دعائكم
اي استفسار حياكم الله
في رعاية الله
[ ط´ط±ط* ] طھطµظ…ظٹظ… ظˆطھط±ظƒظٹط¨ ط§ط³طھط§ظٹظ„ ظ„ط¨ط±ظ†ط§ظ…ط* ط§ظ„ظ…طھظ‚ط¯ظ… ظ„ط®ط¯ظ…ط§طھ ط§ظ„ظ…ظˆط§ظ‚ط¹ [ AM4SS ]
AM4SS.zip (1.11 ميقابايت, عدد مرات المشاهدة 619 مرة) [/TR]
رد مع اقتباس
