نعود معكم أعضاء موقعنا الكرام, واليوم سوف نتعرف على كيفية أحد قوالب الشركة الرائعة عملاقة
تصميم القوالب ال template monster, وسوف نتناول معكم كيفية تعديل قالب template من أقوى وأخطر القوالب
الخاصة بشركات الاستضافة HOTING والتصميم والدعم الفنى والخدمات التطويرية

دعونا نشاهد مثال عملى للواجهة interface قبل البدء فى التعديل عليها





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







نبدأ على بركة الله ...............

1- افتح ملف الاندكس الخاص بالواجهة interface index.html بالبرنامج الرائع الدريم ويفر




2- اختار خيار split من اليسار حتى نرى كود code+تصميم الواجهة interface معا........
3-اضغط على الزر الايسر للواجهة interface من التصميم حتى نعرف اسم الصورة اللى راح نعدل عليها...



4-قم بتغير رابط الصورة التى سيوجهنا لها الزر ونخليها الرئيسية index.html

شاهد الرابط فى href قبل التعديل فى الكود code المظلل:




شاهد الرابط فى href بعد التعديل فى الكود code المظلل :



5-نشاهد الان نتيجة التعديل عند مرور الماوس على الزر(انظر للمتصفح فى الصورة القادمة من أسفل حتى تشوف الرابط)




6-الحين اضغط على الصورة الاولى أيضا حتى نعرف رابط الصورة الخاص بالرئيسية لنقوم بالكتابة عليها فى الفوتوشوب
شوف الصورة...


تمام عرفنا ان اسمها m5.jpg

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







نقوم باستبدال الصورة بعد اختيار نفس الصيغة jpg ونوافق على الاستبدال




الحين نشوف ناتج التعديل




وهذا الناتج بعد تعديل كافة الصور....







7- نريد التغير على الصورة التى راح تتغير بمرور الماوس..

لو راجعت الكود code السابق الخاص بالرئيسية سوف تجد فى كود code onmouseover اى عند مرور الماوس , سوف تجد ان الصورة اسمها 5_m5.jpg

نفتحها بالفوتوشوب ونعدل عليها , ولازم تكون الكلمة بنفس مقاسات كلمة الرئيسية فى الصورة السابقة وبنفس مكانها, حتى تكون مطابقة عند مرور الماوس عليها




الناتج عند مرور الماوس






8- حتى نعدل على محتوى الصفحات الفرعية , افتح اى صفحة تريد التعديل عليها بالدريم ويفر
ثم قم بحذف الجزء الذى تريده , ثم عدل عليه مثل ما يحلو لك, ويفضل ان تعدل من واجهة interface الكود code وليس من واجهة interface التصميم, حتى لا يضيف أكواد زائدة أنت لست بحاجة اليها مثل non breaking spaces المملة

نحذف..



نكتب كلمتنا




تمام ...

مثلا نريد الكتابة على الزر وليكن اقرأ المزيد..

نضغط على الزر من واجهة interface التصميم, ونعرف اسم الصورة الخاصة به ونكتب عليها ونستبدل.........








وهكذا......


ملاحظه: كثير من الصور قد تفتحها ولاتستطيع التعديل عليها لانها ليست بالصيغة rgb لذلك اى صورة
لو ما عرفت تعدل عليها سوى هالحركة لتعرف التعديل على اى صورة ........






فى الدروس القادمة , ان شاء الله راح اشرح طريقة كيفية رابط الواجهة interface باسكربت دعم فنى
+خاصية البحث عن الدومينات + اشياء كثيرة ان شاء الله ..........


أخوكم vista-design

www.advphp.com











©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©