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

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

وسامحوني على الشرح ان حصل فيه اى تقصير

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

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

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

الانطلاقه

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

كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-1

كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-1

كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-2

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

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

كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-3

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

كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-4

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

كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-5

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

كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-6

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

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

كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-7

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

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

كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-8

كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-8

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

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

كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-9

كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-9

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

كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-10

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

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

كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-11

كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-11

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

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

كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-12

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

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

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

كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-13

كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-13

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

كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-14

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

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

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

كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-15

كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-15

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

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

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

كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-17

كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-17

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

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

كيف تقوم بتصميم واجهة موقع وكيفية وضع الروابط بالتصميم T-mwga-18

شكرررررررررررررررررررررررا
وللعلم هذا بلفوتوشوب والايمدج ريدى

» موقع كُــنــــون للفلاشات الإسلامية الدعوية .. موقع ممتاز جدااً ..
» موقع لتحميل الكتب
» موقع لمشاهدة كرتون توم وجيرى
» موقع لتنزيل الالعاب (حصريا)
» موقع مــصــحــفــي .. رااائع جداً ..