طريقة صنع زر موقع ( بميزة الماوس أوفر).....خطيييييير

المقاتل النبيل

المقاتل النبيل

New Member
مقدمة هامة
إن تعليمات **********هي الأفضل للتعامل مع عرض البيانات التي تتفاعل مع حركة مؤشر الماوس في مواقع الويب
وذلك لكون ********** يمكن تحريرها ضمن أي برنامج تحرير النصوص العادية .
إن ال ImageReady يوفر الواجهة المناسبة للتعامل مع نوع واحد فقط من أنواع التعليمات المختلفة ل **********
وهذا النوع هو الصور المتغيرة
يعني الذي يلزمنا فقط
طيب بعد المقدمة الكبيرة والطويلة والمملة
نبدأ ​

نفتح ImageReady
نقوم في البداية بإنشاء الزر
بالقياس الذي يناسبك
مثلاً ليكن طول 200 في عرض 75 بيكسل

كيفية إنشاء زر جميل
بوسطة الستايلات

الآن نقوم بإنشاء الزر في الحالة الإفتراضية له
نضيف النص المناسب لمهمة الزر
ونضيف بعض اللمسات على النص كما في الصورة

الآن قم بما هو موضح في الصورة

الآن نحفظ الصورة بإمتداد الفوتوشوب
بإسم : إضغط هنا .psd
المرحلة التالية هي إنشاءحالة الزر عند مرور الماوس عليه


علينا أن نغير تغير طفيف في لون الزر
بتفتيح لونه بعض الشيء مثلاً
ويمكن تغير النص الظاهر على الزر كأن نكتب ( تفضل )
نخفي طبقة الحالة الأولى
نضغط على Ctrl + Shift + E لدمج الطبقات التي عليها شارة العين
(أي الضاهرة فقط )
حتى تصبح الحالة مرور الماوس على الزر طبقة واحدة
الآن نقم بما قمنا به في الخطوة السابقة لإضافة زر الحالة الضغط بالماوس على الزر
لاحظ الصورة
يأتي إسم الزر إفتراضي Down

الآن أصبح لدينا الزر جاهز حتى انه يمكننا تجربته لنعلم
هل العمل الذي قمنا به صحيح أو لا
من خلال الزر التالي ومنه نوقف التجربة

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


الآن يمكننا وضع الرابط للزر (إنتظر لحظة )
كما في الصورة




الآن نتهينا من صنع الزر
وإضافة الرابط إليه
ولم يبق علينا إلا حفظ الزر كصفحة ويب
كما في الصورة


الآن يمكنك فتح الملف بواسطة مستعرض النت
لكن سنلاحظ وجود مشكلة وهي أن الزر يظهر في اليسار والأعلى من الصفحة
طبعاً ليس العيب في التصميم
الآن تأتي مهمة أكواد HTML
لتحديد موقع الزر في الصفحة
لنتابع
نستخدم برنامج المفكرة لفتح الملف الذي قمنا بصنعه
نتجاهل كل الكلام الغير مفهوم
ونبحث عن السطر التالي
<!-- ImageReady Preload Script (Untitled-1.psd) -->

<Center>
<P><CENTER>&nbsp;</CENTER></P>
<P><CENTER>&nbsp;</CENTER></P>
<P><CENTER>&nbsp;</CENTER></P>
<P><CENTER>&nbsp;</CENTER></P>


ثم نحتاج إلى إدخال تعليمة الإغلاق لعملية التوسيط
<CENTER>
بجانب السطر
</map>
وقبل هذا السطر
<!-- End ImageReady Slices -->
لاحظ الصورة

تم الدرس بعون الله
والحمد الفضل والمنه منه وإليه
أرجو للجميع الفائدة
 
بارك الله فيك و جزاك الله خيرا
هل الشرح من تصميمك اذا كان نعم في مرات المقبلة ضع توقيعك عليه
تحياتي لك
+1
 
شرح رائع أخي يوسف..
تستحق+1:)..
بالتوفيق..
 
يجب تسجيل الدخول أو التسجيل كي تتمكن من الرد هنا.
عودة
أعلى