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

[بن مراد]

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

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

مثلا لك صفحات انشأتها ببرنامج Frontpage أو مجلة و أردت ان تكون الصفحة

الرئيسية من تصميمك أو من واجهة جاهزة

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

الفوتوشوب و إضافة اسم موقعك او تغيير الزرار ) :





و الا فيمكنكم تصميمها بنفسكم

و هاهي الواجهة التي اخترناها لدرسنا مع التعديل :

http://prog.salafsoft.googlepages.com/salafsoft150.png


نقوم بفتحها بالبرنامج الشهير لتحرير الصور : adobe photoshop

نقوم بالتعديل عليها كما نريد

ثم نذهب الى الآداة لتقطيع تصميمنا كما هو موضح في الصورة :


ملاحظة : كل قطعة تعينها تمثل رابط لصفحة أخرى في موقعك مثلا : المنتدى رابطه www.salafsoft.com/vb (http://www.salafsoft.com/vb)
http://prog.salafsoft.googlepages.com/salafsoft152.png

و نعين المناطق بالاداة التي نريد تقطيعها

مثلا الجهة العليا اين مكتوب شيكة الحاسوب السلفية

بعد تعيينها نضغط بالزر اليمن كما هو موضح في الصورة







ثم تظهر لنا بينات القطعة كما في الصورة :


و ندخل فيه الرابط الذي تؤدي اليه الجهة العليا مع عنوان الرابط

http://prog.salafsoft.googlepages.com/salafsoft153.png

نفس الشيء مع الأزرار الأخرى مثلا زر المنتدى

http://prog.salafsoft.googlepages.com/salafsoft154.png

ثم نكتب الرابط مع العنوان

http://prog.salafsoft.googlepages.com/salafsoft155.png


و نطبق على جميع القطع التي عينها

ثم نحفظ العمل كما في الصورة :
بالضغط على save for the web

http://prog.salafsoft.googlepages.com/salafsoft156.png

و نواصل كما في الصورة مع ان يكون صيغة الحفظ html and images

http://prog.salafsoft.googlepages.com/salafsoft157.png


و نحصل على ملفات الصور بهذه الطريقة :


http://prog.salafsoft.googlepages.com/salafsoft158.png


نذهب الى ملف html و نفتحه بال Front page كما في الصورة :

http://prog.salafsoft.googlepages.com/salafsoft1516.png


و نذهب الى زر Design في الأسفل :

فتظهر لنا الصورة فنضغط مثلا على المنتدى بالز الأيمن كما هو موضح



http://prog.salafsoft.googlepages.com/salafsoft159.png
ثم يظهر لنا العنوان و نضغط على ok
http://prog.salafsoft.googlepages.com/salafsoft1517.png

ثم نذهب الى Hyperlink proprety لرؤية رابط الزر

http://prog.salafsoft.googlepages.com/salafsoft1518.png


ثم ندخل رابط المنتدى :


http://prog.salafsoft.googlepages.com/salafsoft1510.png

و نتأكد من سمك الزر بالضغط على picture propretie يجب ان يكون 0
http://prog.salafsoft.googlepages.com/salafsoft1511.png

edit slice Option page propety : و نقوم بهذا التطبيق على جميع الأزرار
ثم ننقر على code في برنامج الفرونت بيج :

http://prog.salafsoft.googlepages.com/salafsoft1512.png

يظهر لنا كود التصميم فنقوم بتغيير الروابط :

مثلا رابط :

/images/ wajiha4_01
الي www.ttt.com/images/wajiha4_01 (http://www.ttt.com/images/wajiha4_01)

مع تغيير ttt الى مسار موقعك


http://prog.salafsoft.googlepages.com/salafsoft1513.png


ثم نقوم بحفظ العمل

http://prog.salafsoft.googlepages.com/salafsoft1514.png

و في الأخير نغير ملف Html الى index.html

كما في الصورة :


http://prog.salafsoft.googlepages.com/salafsoft155.png


و بعد ذلك ارفع مجلد images و index.html

عبر ftp الى موقعك

و سيكون رابط صفحتك الرئيسية

www.ttt.com/index.html (http://www.ttt.com/index.html)

وفقك الله

و أتمنى ان يكون الشرح واضح و كافي


منقول للفائدة

[خ ــادم الإسلام]

ما شاء الله
درس واضح مفهوم
بارك الله فيك
ولك منى تقييم لموضوعك

[Amr Sheko]

بارك الله فيك الى الامام احلى تقييم

[سارق عيونك]

مشكور اخوي
وجزاك الله خير :)

[JuSt SmiLe]

بارك الله فيك

[moslem]

بارك الله فيك
شكرا علي الشرح

[..|Abudi|..]

ياسلام عليك والله



تسلم لي ايدينك عالشررح الرووعه بجد تسلم لي ياغالي ^_^


طيب طيب

انا عندي مشكله واهي ان اللي يدخل على الصفحه الرئيسيه للموقع يحوله على طول على المنتدىى << كيف ارجعه ^_^


http://www.xro7x.com


8
8
8
مثآل

[الشبح]

روعة ياغالي تسلم الايادي

[alnor7]

بارك الله فيك القادم احلى ان شاء الله

[عمر]

يعطيك العافية اخوي جميل والله وما تقصر يا غالي