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

ــــــــــــــــــــــــــــــــــــــــــــــــــــــــ


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


ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ


بعد الانتهاء من تصميم الصورة و كتابة
اسماء الازرار عليها مثل " الرئيسية،البوابة،....او اي شيء تريده" ستتبع
الخطوات التالية


قبل البدء سنفرض ان الصورة التي تم
تصميمها هي هذه:
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]





نقوم باختيار اداة slice selector tool كما في الصورة
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]










نقوم بالضغط بالزر الايمن للفارة على الصورة بعد اختيار الاداة و نختار divide slice كما في الصورة


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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]





نلاحظ ان
الصورة تم تقسيمها بالعرض الى ثلاث شرائح


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


ويكون حد كل
شريحة ملاصق للشريحة المجاورة حتي لا يزداد تقسيم الصورة
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]







بنفس الاداةslice
selector tool نضغط
بالزر الايمن على شريحة الزر الاول و نختار edit slice options كما في الصورة


قم بوضع
الرابط الذي تريد ان يتوجه اليه عند الضغط على الزر في المكان الموضح بالصورة ثم
اضغط ok

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]





طبق ذلك على
كل شرائح الازرار لكي تقوم بعمل وصلات لها





بعد الانتهاء
اذهب الى file>save for web كما في الصورة


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]





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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]





قم بالضغط
على صفحة الويب بالزر الايمن للماوس واختر


open
with>notepad


سيظهر لك كود
الهتمل للصورة


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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]







قم برفع
الصور الموجودة في مجلد الصور على النت صورة صورة بالترتيب وغير رابط كل صورة في
الكود و لاحظ الترتيب و لا تضع رابط مكان آخر

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
انتهى الدرس
بهذا الدرس يمكنك وضع الوصلات التي تريدها في صورة واحدة لاعطائها شكل جمالي
مثال :هنـــــــــــــــــــــــا

ستلاحظ الصورة التي تم تصميمها و الازرار التي عليها تعمل
وشكرا لحسن المتابعة

م ن ق و ل

تحياتي :حسن محمد البحر