شرح طريقة تعديل أروع واجهة interface استضافة HOTING متكاملة جاهزة تقدر تستخدمها فى موقعك مباشرة

[salima]

http://i46.tinypic.com/hrzm02.gif


http://i40.tinypic.com/2meyfk7.jpg



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

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

http://i43.tinypic.com/2cz8vpy.png (http://www.advphp.com/tuts/tempedit/host/index.html)



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


http://i39.tinypic.com/2ppc5ly.jpg (http://www.advphp.com/tuts/tempedit/host/hostsite.zip)




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

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

http://i43.tinypic.com/2vvnuzd.jpg


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

http://i43.tinypic.com/919xjo.jpg

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

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

http://i43.tinypic.com/919xjo.jpg


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

http://i41.tinypic.com/4tuj4y.jpg

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

http://i41.tinypic.com/m7t8up.jpg


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


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

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

http://i43.tinypic.com/2wq8nsl.jpg

http://i41.tinypic.com/m7qtc8.jpg

http://i41.tinypic.com/2qb91xi.jpg

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

http://i43.tinypic.com/f565pz.jpg


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

http://i41.tinypic.com/2i1miv5.jpg


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

http://i44.tinypic.com/2wexdf4.jpg





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

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

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


http://i41.tinypic.com/1qmm47.jpg

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

http://i41.tinypic.com/2dp9is.jpg




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

نحذف..

http://i39.tinypic.com/2w3x6pg.jpg

نكتب كلمتنا

http://i44.tinypic.com/50mrd2.jpg


تمام ...

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

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

http://i41.tinypic.com/21ompsg.jpg

http://i39.tinypic.com/al24ug.jpg




وهكذا......


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

http://i44.tinypic.com/167kufl.jpg




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


أخوكم vista-design

www.advphp.com (http://www.advphp.com)











https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©