درس]كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم

[الضامي]

هذا الدرس في غاية الاهميه

الدرس هو عباره عن امر مهم لاصحاب المواقع سواء مجانية او رسميه

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

الانطلاقه

تقوم بفتح لير جديد بمقاس 800 # 600 والخلفية بيضاء

http://www.matlaalshams.com/dros/images/t-mwga-1.gif

http://www.matlaalshams.com/dros/images/t-mwga-2.gif

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

انا قمت باختيار هذه الالوان

http://www.matlaalshams.com/dros/images/t-mwga-3.gif

ثم اذهب لايقونة تدرج الالوان Gradint tool

http://www.matlaalshams.com/dros/images/t-mwga-4.gif

قم بعمل سحب من الاعلى الى الاسفل ليخرج لك هذا الشكل

http://www.matlaalshams.com/dros/images/t-mwga-5.gif

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

http://www.matlaalshams.com/dros/images/t-mwga-6.gif

ولاتنسى ان تجعله soft light

ليكون بهذا الشكل

http://www.matlaalshams.com/dros/images/t-mwga-7.gif

اللحين انت وشطارتك في صنع البنر والايقونات

انا صنعتها بطريقة عادية جداً واستخدمت مثل ما في الصورة

http://www.matlaalshams.com/dros/images/t-mwga-8.gif

اللحين انا انتيهت من تصميم البنر وازرار التوجيهات مثل كلمة منتدى او رئيسيه

جاء اللحين دور اختيار واحد من الازرار لاعطائه رابط

http://www.matlaalshams.com/dros/images/t-mwga-9.gif

اخترت اول زر من الاعلى واستخدمت اداة التقطيع

http://www.matlaalshams.com/dros/images/t-mwga-10.gif

بعدما مررت اداة التقطيع على اول زر

قم بالضغط بالماوس الايمن لكي يخرج لك قائمه وين Edit Slice Option

http://www.matlaalshams.com/dros/images/t-mwga-11.gif

قم بالضغط عليها

فتخرج لك مربع وفيه كل الاشياء التي تريد ان تضيفها

http://www.matlaalshams.com/dros/images/t-mwga-12.gif

اما السهم الاول ضع رابط المكان الذي تريد توجيه الزوار والاعضاء له

والسهم الثاني ضع اسم هذا الرابط بالعربي لان عندما يمر الماوس على الرابط يظهر اسفل شريط الاكسبلور

الان كيف تحفظ العمل؟
اذهب من الاعلى الى file ثم save for web

http://www.matlaalshams.com/dros/images/t-mwga-13.gif

بمجرد الضغط على save for web سوف تنتقل الى هذه الصفحه

http://www.matlaalshams.com/dros/images/t-mwga-14.gif

كل ماعليك الا الضغط على save
وكما تلاحظ انني لم اضع اي روابط على جميع الزرار وانما اول زر فقط

بعد الضغط على كلمة save وهو تحديد مكان الحفظ

طبق مافي الصورة لعملية الحفظ (( مهم ))

http://www.matlaalshams.com/dros/images/t-mwga-15.gif

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

الان اتى دور الرفع للواجهه (( طريقة هذا الرفع خاص بالمواقع الرسميه )
وسوف نتطرق لكيفية الرفع للمواقع المجانيه باذن الله

الان تقوم بفتح برنامج ftp

http://www.matlaalshams.com/dros/images/t-mwga-17.gif

,وتقوم بالضغط عليه

ثم ترفع المحتويات من مجلد الصور والملف الذي قمت بعمله

http://www.matlaalshams.com/dros/images/t-mwga-18.gif


http://www.matlaalshams.com/upload/uploading/tourky_5.gif

[ألفا]

يعطيك العافية اخوي

درس مهم

ولا هنت

[MSHAER]

لاهنت يالذيب وجزاك الله خير

[كفاني عذاب]

مشكور اخوي ولا هنت

الله يعطيك الف الف عافيه يا الغلا

[ممرض محترف]

يعطيك العافية

[أمير الجزيره]

تسلم اخوي والشكر للغلا ابو غدير على الشرح ..

[DANA!!]

تسلم اخوي على هالدرس الحلو والمفيد يعطيك العافيه