إحترف تصميم أزرار وقائمة لموقعك بإستخدام الفوتوشوب مع أكواد CSS وتأثير hover

[abohmam]

بسم الله الرحمن الرحيم

الحمد لله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين

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

طال إنتظار بعض الأخوة لشرح طالما سألوا عنه وكنت قد وعدت بإنجازه ووضعت بعض تطبيقات تصميم المواقع التى سوف نشرحها فى هذا القسم إن شاء الله تعالى
ولكن وجدت نفسي يجب أن أبدا من الصفر بل ربما قبل الصفر بقليل إذا اردت أن أشرح جزء بسيط من لغة التصميم العالمي الجديدة CSS وكذلك CSS3
فقلت اضع مثالا وأحاول جاهدا شرحه عسى أن يستفيد الأخوة جميعا من هذا الشرح وستكون أول خطوة عملية لتطبيقات تصاميم المواقع .

مثال للتصميم

http://www.abc4web.net/abc4web_java/css/hover/images/abc4web_a00.png

لمشاهدة مثال للتطبيق بلغة CSS

:abc4web: (http://www.abc4web.net/abc4web_java/css/hover/)
:bar: (http://www.abc4web.net)
نبدا الشرح إن شاء الله تعالى

:slaam:

سنتعلم اليوم كيفية تصميم زرار لصفة الويب يعمل بتأثير الهوفر ( اللمس ) ليتغير شكله بإستخدام أكواد CSS الرائعة ، كما رايناها فى التطبيق السابق .
وقبل البدء فى الشرح أحب أن أذكر هنا أنه توجد أكثر من طريقة للوصول الى هذا التأثير وسوف اشرح إثنين منها فقط للتعليم والتدريب .
وأتمنى من الأخوة عدم وضع أى سؤال إلا بعد التطبيق وأكرر التطبيق على الدرس فقط ( وسوف لاأجيب على أى سؤال خارج ذلك )

1- نقوم بفتح عمل جديد بهذه القياسات ( 200 * 75 ) والخلفية بيضاء ونحدد إسم العمل abc4web_b01

http://www.abc4web.net/abc4web_java/css/hover/images/abc4web_b001.png

ثم نقوم بملئ هذه الطبقة بأى مثلا ( 0B415F# ) أتمنى أن نستخدم ألوان مختلفة فى التطبيقات عن الشرح !:abc_051:

http://www.abc4web.net/abc4web_java/css/hover/images/abc4web_b002.png

وسنحصل على هذا الشكل ماتستعجل أنا ماشي معاكم تاته خالص :abc_145:

http://www.abc4web.net/abc4web_java/css/hover/images/abc4web_b003.png

2- نقوم بإنشاء طبقة ثانية باللون الأبيض مثلا ونسميها الزرار وبإستخدام أداة Rounded Rectangle Tool نرسم شكل الزرار بحوافه الدائرية وممكن جعل الدوران Radius = 10 px ، ويكون هذا المستطيل مطابق لمساحة العمل تقريبا ، أى بدون ترك فراغات، نقف على هذه الطبقة وبيمين الماوس نختار Rasterize Layer .

http://www.abc4web.net/abc4web_java/css/hover/images/abc4web_b004.png

3- مازلنا على طبقة الزرار ، بيمين الماوس نختار من القائمة Blending Options ونضيف هذه التأثيرات :

Gradient Overlay

http://www.abc4web.net/abc4web_java/css/hover/images/abc4web_b005.png

http://www.abc4web.net/abc4web_java/css/hover/images/abc4web_b006.png

Bevel and Emboss

http://www.abc4web.net/abc4web_java/css/hover/images/abc4web_b007.png

وسوف نحصل على الشكل التالي :

http://www.abc4web.net/abc4web_java/css/hover/images/abc4web_b008.png

4- مازلنا على طبقة الزار نضغط بيمين الماوس ونختار من القائمة Duplicate Layer للحصوص على طبقة مشابهة ونختار إسما آخر لها مثلا ( تأثير اللمس )
وسوف يكون صندوق الطبقات لدينا بهذا الشكل

http://www.abc4web.net/abc4web_java/css/hover/images/abc4web_b009.png

نقف على هذه الطبقة وبيمين الماوس نختار من القائمة Blending Options

ثم نقوم بتغير واحد فقط فى Bevel and Emboss وهو إختيار البروز لأسفل

http://www.abc4web.net/abc4web_java/css/hover/images/abc4web_b010.png

لنحصل على هذا الشكل:

http://www.abc4web.net/abc4web_java/css/hover/images/abc4web_b011.png

بذلك نكون قد إنتهينا من تطبيق التأثيرات على الزرار وحصلنا على طبقتين للازرار ( زر بارز لأعلى واخر لأسفل )

===========/ مرحلة الكتابة وإضافة الأيقونات \==========

5- الآن يمكننا إضافة النص الذى نريده وربما أيقونة للشكل الجمالي ( وهذا إختيارى ) لذلك لاأرى أنها تحتاج شرح .......:abc_145:

http://www.abc4web.net/abc4web_java/css/hover/images/abc4web_b012.png

===========/ مرحلة حفظ الزرار \==========

6- نذهب إلى صندوق الطبقات ونركز سويا لأن هذه مرحلة حفظ العمل والتى قمت بإختصار تكرار الخطوات لعلمي أنكم أذكياء وسوف لاتخذلوني فى التطبيق إن شاء الله
نقوم بتحديد طبقة الزرار ( تفعيل العين التى بجوار الطبقة )

http://www.abc4web.net/abc4web_java/css/hover/images/abc4web_b013.png

ثم نقوم بحفظ الزرار الأول ونعطيه إسم abc4web_b01
الإسم مهم لأكواد CSS

7- نقوم بإظهار طبقة تأثير اللمس وإخفاء طبقة الزرار بنفس الطريقة السابقة

http://www.abc4web.net/abc4web_java/css/hover/images/abc4web_b014.png

ثم نحفظ العمل بصيغة png ونعطيه إسم abc4web_b02

وسوف نحصل على هذه الأزرار

http://www.abc4web.net/abc4web_java/css/hover/images/abc4web_b01.png
http://www.abc4web.net/abc4web_java/css/hover/images/abc4web_b02.png

طبعا نكرر حفظ الصور مع تغير الكتابة والأيقونة وكل زرار نحفظه مرتين بنفس الطريقة ( إظهار طبقة وإخفاء أخرى )

لنحصل على أربعة أزرار = 8 صور

abc4web_a02 ----- abc4web_a01
abc4web_b02 ----- abc4web_b01
abc4web_c02 ----- abc4web_c01
abc4web_d02 ----- abc4web_d01

:bar:

==========/ مرحلة إستخدام الأزرار وإضافة تأثير هوفر بإستخدام أكواد CSS \==========


والآن مع شرح إضافة التأثير على الزرار بأكواد CSS

أولا نراجع النتيجة التى حصلنا عليها وهي :

1- صورة الزرار بإسم = abc4web_b01
2- صورة التأثيـر بإسم = abc4web_b02

نقوم بإنشاء مجلد لنضع فيه الصور مثلا نسميه images ونضع فيه الصور وهذا هام جدا للحصول الى الصورة وسيكون المسار الخاص بالصور كالتالي :

صورة الزرار :
images/abc4web_b01.png

صورة التأثير :
images/abc4web_b02.png

الآن نفتح برنامج فرونت بيج أو أى محرر صفحات نستخدمه ونفتح صفحة جديدة وتلقائيا سنجد الأكواد التالية :


<head>
<title>عنوان الصفحة</title>
مكان وضع كود التأثير css
</head>

<body>
مكان ظهور الأزرار
</body>

</html>


http://www.abc4web.net/abc4web_java/css/hover/images/abc4web_b016.png

طبعا بخصوص كود إظهار الأزرار يرجع للتصميم الذى ستعمل عليه سواء داخل جدول أو يمين يسار كما ترغب ......

* هام بخصوص لغة CSS فهي تعتمد على مسميات خاصة ولااريد أن أصعب الأمر عليكم ولكن فقط نقوم بتسمية التأثير وهذا مانسميه فى هذه اللغة الـ CLASS

ففي لغة برمجة CSS تسبق هذه التسمية بـ . ( نقظة ) وفى المثال التالي قمت بتسمية الكلاس الأول وهو زر الرئيسية بـ abc4web-1

ستجد هذه التسمية مكررة ثلاث مرات ( صورة الزرار - لمس الزرار - نوع التأثير ) وهذه هي الثلاثة تأثيرات التى قمنا ببرمجتها وتفصيلها فى الصورة التالية:

http://www.abc4web.net/abc4web_java/css/hover/images/abc4web_b015.png

فإذا أردنا إضافة زرار جديد علينا أن نقوم بإضافة CLASS جديد ونختار له إسما جديدا ونحدد الصور التى نريد أن تظهر معه وهكذا .......

والكود المستخدم بلغة CSS للحصول على نفس التأثير الذى فى المثال ينقسم إلى جزئين :

الأول : برمجة التأثير ( تحديد الصور )
الثاني : إظهار التأثير فى المكان المراد

1- كود برمجة التأثير ويتم وضعه في هيدر الصفحة أى فوق الوسم </head> مباشرة :


<style type="text/css">

.abc4web-1 {
background-image: url(images/abc4web_b01.png);
background-repeat: no-repeat;
height: 75px;
width: 200px;
}

.abc4web-1 a{
background-image: url(images/abc4web_b02.png);
background-repeat: no-repeat;
height:75px;
width: 200px;
display: block;
}

.abc4web-1 a:hover{
background: none;
}

.abc4web-2 {
background-image: url(images/abc4web_a01.png);
background-repeat: no-repeat;
height: 75px;
width: 200px;
}

.abc4web-2 a{
background-image: url(images/abc4web_a02.png);
background-repeat: no-repeat;
height: 75px;
width: 200px;
display: block;
}

.abc4web-2 a:hover{
background: none;
}

.abc4web-3 {
background-image: url(images/abc4web_c01.png);
background-repeat: no-repeat;
height: 75px;
width: 200px;
}

.abc4web-3 a{
background-image: url(images/abc4web_c02.png);
background-repeat: no-repeat;
height: 75px;
width: 200px;
display: block;
}

.abc4web-3 a:hover{
background: none;
}

.abc4web-4 {
background-image: url(images/abc4web_d01.png);
background-repeat: no-repeat;
height: 75px;
width: 200px;
}

.abc4web-4 a{
background-image: url(images/abc4web_d02.png);
background-repeat: no-repeat;
height: 75px;
width: 200px;
display: block;
}

.abc4web-4 a:hover{
background: none;
}

</style>


2- كود إظهارا لتأثير ويتم وضعه فى المكان الذى تريد أن يظهر فيه الأزرار :



<div class="abc4web-1"> <a href="http://www.abc4web.net/"></a> </div>



وفى حالة إضافة أكثر من زرار نقوم بإضافة الكلاس ( class ) كما تعلمنا ثم نضيف الزرار هنا أيضا
لاحظوا هنا أنا قمت بإضافة عدد 4 كلاس أى 4 أزرار ( لاتنسى إضافتهم أيضا فى كود الـ CSS
abc4web-1
abc4web-2
abc4web-3
abc4web-4


<div class="abc4web-1"> <a href="http://www.abc4web.net/"></a> </div>
<div class="abc4web-2"> <a href="http://www.abc4web.net/"></a> </div>
<div class="abc4web-3"> <a href="http://www.abc4web.net/"></a> </div>
<div class="abc4web-4"> <a href="http://www.abc4web.net/"></a> </div>


قمت بوضع الرابط أيضا لكى يتم تحديد مكانه للتعديل إن شاء الله

من خلال مشاهدة أكواد المثال فى الصفحة النهائية سيتضح الأمر للجميع إن شاء الله تعالى

أخيرا نظرة أخرى على العمل النهائي
:ok:
:abc4web: (http://www.abc4web.net/abc4web_java/css/hover/)

والمثال فى المرفقات لمن يريد التحميل

:at:

وأسأل الله لى وللجميع التوفيق

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

أعتذر عن أى خطا أو سوء تعبير فالعمل البشرى لايخلوا دائما من التقصير
فأرجوا من الجميع المسامحة وإلتماس العذر

ولاتنسونا من دعائكم الصالح
أبوهمام
:bar:
.

[abohmam]

محجوز لعرض تطبيقات الأعضاء
وللمزيد من الإيضاح

إن شاء الله يكون هناك تصويت وإختيار لأفضل تطبيق :abc_022:

1- تطبيق ذو الجناح

http://img32.imageshack.us/img32/5431/salemcss1.png

2- تطبيق محمود عفيفي

http://img20.imageshack.us/img20/7817/hovercssmahmod.jpg

عرض التطبيق (http://docma7moud.0fees.net/vb/Abohamam/Index.htm)

3- تطبيق الراعي بعد التعديل

http://img62.imageshack.us/img62/6515/raey.png

4- تطبيق كينج نت

http://img37.imageshack.us/img37/9752/63222452.png

5- تطبيق الدمشقي

http://img716.imageshack.us/img716/4667/csshover012c008.png

جزاهم الله خيرا على هذا الإبداع

[كينج نت]

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

مشكور اخي العزيز أبوهمام

شرح واضح ومميز من شخص محترف امثالك

دائماً تتحفنا بالجديد والمفيد لنا جميعاً

جزاك الله كل خير وجعله بموازين حسناتك

:abc_152:

.

[محمود عفيفى]

ما شاء الله
جزاك الله خيرا أخى أبو همام
بإذن الله سيتم التطبيق :abc_152:

[سالي الفلسطينية]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[abohmam]

حياكم الله جميعا

أشكرك أخى كينج نت على المرور والتواصل

والشكر أيضا لأخي محمود وأختنا سالي

وفى إنتظار التطبيق من الجميع

تم رفع المثال المعروض فى المرفقات
لمن يريد الإستفادة منه


فى حفظ المولى

[ذوالجناح]

السلام عليكم ورحمة الله وبركاته
جزاك الله خيراً على هذا الدرس الماتع وجعله الله في ميزان حسناتك.
تطبيقي في المرفقات أسأل الله أن يكون مقبولاً.
ولكن لي ملاحظة وسؤال:
الملاحظة: كود برمجة التأثير الذي يوضع في الهيدر يقتصر على زرين فقط فاضطررت لتكرار كود الزر الثالث والرابع مقتدياً بمثالك في المرفقات.
أما السؤال: كيف أرتب الأزرار أفقياً وليس رأسياً كما في الشرح فقد حاولت وعجزت.

جزاك الله خيراً ووفقك

[abohmam]

جزاك الله خيرا أخى ذا الجناح

تطبيق رائع وقد تم إضافته فى المكان المخصص

وللجواب على سؤالك تم تعديل الكود ردا على السؤال السابق ليمكن إستخدامه أفقيا أو رأسيا
وكذلك تم إعادة رفع المرفقات مع التعديل

http://img690.imageshack.us/img690/6073/saalem.png

وأذكر الأخوة الذين سيطبقون أيضا لايهم الإلتزام بمقاسات الأزرار
ولكن المهم أن حجم الزرار هو نفسه الذى يكون بداخل كود css

مثلا لو قمنا بتصميم زرار 50 * 150 كي يكون مناسبا للتصميم
نقوم بتغير هذا المقاس فى كود css أيضا

[ذوالجناح]

وسؤال آخر:
ما الفرق بين هذا التطبيق بلغة css وتأثيرات dhtml في الفرونت بيج؟

[abohmam]

وسؤال آخر:
ما الفرق بين هذا التطبيق بلغة css وتأثيرات dhtml في الفرونت بيج؟

حياك الله أخى ذا الجناح

هذا السؤال خارج موضوع الشرح بارك الله فيك :abc_145:

عموما وبإختصار DHTML هي اختصار لكلمة Dynamic HTML وهي لغة الـ HTML التفاعلية،
وكما نعلم فإن هذه اللغة تظهر كل كل كود يتم وضعه ولاتستطيع التحكم فى أى شئ كما تريد
فتم إضافة أكواد خاصة أو برمجة لتظاهى بعض تأثيرات الجافا كإضافة حركة جمالية على الأزرار فقط ...

أما لغة CSS فهي برمجة جديدة ولها اساسيات أخرى تمكنك من تصميم كامل للصفحة بما فى ذلك الأزرار والتأثير عليها ...

مثلا هذه صورة لتصميم زرار لم يتم تقطيع التصميم

http://img714.imageshack.us/img714/736/buttono.jpg

أستطيع من خلال لغة CSS إستخدام هذا الزرار والوصول الى النتيجة السابقة بدون أن أقطع الصورة الى نصفين :abc_022:
فهل تستطيع لغة DHTML فعل ذلك ؟ الجواب لا ........ فكل برمجة لها خصائصها .....

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

[ذوالجناح]

اعذرني أخي على السؤال خارج الموضوع فلم أميز ذلك بسبب انعدام خبرتي في هذا المجال. فالعذر منكم، والعذر عند كرام الناس مقبول.


وللجواب على سؤالك تم تعديل الكود ردا على السؤال السابق ليمكن إستخدامه أفقيا أو رأسيا
وكذلك تم إعادة رفع المرفقات مع التعديل


نزلت المرفق والفكرة سهلة جداً: جدول مخفي يسقط كل class في خلية. أليس كذلك؟
والآن هل انتهى نصيبي في الأسئلة هنا؟ أم أفتح جبهة اخرى في قسم طلب المساعدة؟

[abohmam]

نزلت المرفق والفكرة سهلة جداً: جدول مخفي يسقط كل class في خلية. أليس كذلك؟
والآن هل انتهى نصيبي في الأسئلة هنا؟ أم أفتح جبهة اخرى في قسم طلب المساعدة؟

حياك الله أخى ذا الجناح

نعم الفكرة هكذا ولكن قمت بإستخدام حاوية أخرى بدلا من li والذى يتم إستخدامها لتنسيق قائمة راسية بلغة html أيضا
إعتمدت فى التعديل على div
وبذلك يسهل نقل الحاوية فى المكان الذى ترغب به ان شاء الله

الحاوية السابقة

<li class="abc4web-1"> <a href="http://www.abc4web.net/vb/index.php"></a> </li>

الحاوية الحالية

<div class="abc4web-1"> <a href="http://www.abc4web.net/vb/index.php"></a> </div>

إذا كانت الأسئلة بخصوص البرمجة فهنا ليس المجال ، فهنا للتصميم والتطبيق فقط
وربما الدرس القادم يكون فيه إجابة على ماتريد .....
ضع سؤالك هناك وربنا ييسر إن شاء الله

[ذوالجناح]

لا خلاص أتوقف عن الأسئلة فلابد أنك مرهق بعد طرح الموضوع ومتابعته وخاصة أن هناك درساً آخر بعده وقد يعينني الله على مفاجأتك بتطبيق آخر في غير هذا المكان.

[هشام احمد]

سوال اخي همام ازاي اقسم صفحة الويب او بمعني تاني ازي frame set
وممكن اعمل التاثيرا بتاع الزارير علي برنامج Notepad
ولا استخدم برنامج فيجوال استوديو:abc_098::abc_094::abc_101:

[abohmam]

سوال اخي همام ازاي اقسم صفحة الويب او بمعني تاني ازي frame set
وممكن اعمل التاثيرا بتاع الزارير علي برنامج Notepad
ولا استخدم برنامج فيجوال استوديو:abc_098::abc_094::abc_101:

حياك الله

مافى أسئلة خارج الدرس بارك الله فيكم
كذلك لو استخدمت محرك البحث لوجدت ماتريد

http://www.abc4web.net/vb/showthread.php?t=160

لايوجد إستخدام للفيجوال إستوديو بالموضوع ياطيب

يكفيك محرر النصوص أو برنامج فرونت بيج

[هشام احمد]

شكرا ياغالي
بس معلش محرك البحث مش بياجي في بالي:abc_098:

[محمود عفيفى]

السلام عليكم ورحمة الله وبركاته
حياكم الله جميعا
أعتذر عن تأخر التطبيق بسبب الأمتحانات وإنقطاع النت
تطبيقى بالمرفقات
وللمشاهده من هنا
http://docma7moud.0fees.net/vb/Abohamam/Index.htm

ملحوظه: الكتابه على الصور باهته بسبب مشكله فى الويندوز عندى :abc_145:

[abohmam]

ماشاء الله أخى محمود

تطبيق رائع تسلم الأيادي ياطيب :abc_022:

تمت الإضافة إلى التطبيقات المميزة أيضا

بهذا التطبيق إختصرت الدرس القادم ، لكن مع وضع ثالث تطبيق سنقوم بطرحه إن شاء الله
ثم ننتقل الى نفس التأثير ولكن بإمكانات CSS 3
وكذلك بالجافا ( Java ) لنتعرف على إمكانات كل لغة وأسلوب البرمجة بها .

[محمود عفيفى]

جزاك الله خيراً أخى أبو همام
بإنتظار دروسك القادمه بإذن الله يسر الله لك
وإن شاء الله معاك كل شيئ سهل :abc_152:

[abohmam]

جزاك الله خيراً أخى أبو همام
بإنتظار دروسك القادمه بإذن الله يسر الله لك
وإن شاء الله معاك كل شيئ سهل :abc_152:


حياك الله أخى محمود

إن شاء الله نقوم بطرح بعض التصاميم للأزرار ويكون المطلوب التطبيق بنفس الطريقة ،
ثم ننتقل إلى تأثير ثاني حتى نتأكد من أن هذا التأثير تم إحترافه وهضمه تمام :abc_022:

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

بتقطيع التصميم وإضافة تأثير على الأزرار بأكود CSS كما شرحنا ....

[الراعي]

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

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

على العموم لن أستبق الأحداث وسنرى بعون الله ما تتمخض عنه محاولة يوم غد
أشكرك أخي الفاضل أبو همام مجددا على هكذا درس.

[محمود عفيفى]

حياك الله أخى محمود

إن شاء الله نقوم بطرح بعض التصاميم للأزرار ويكون المطلوب التطبيق بنفس الطريقة ،
ثم ننتقل إلى تأثير ثاني حتى نتأكد من أن هذا التأثير تم إحترافه وهضمه تمام :abc_022:

السلام عليكم ورحمة الله وبركاته
حياك الله أخى أبو همام
اللى خلانى أعمل تصميم غيره مكنش عندى أيقونات ولقيت درس سهل قولت أطبقه واعمل التأثير عليه
بإذن الله سيتم الإلتزام بالتطبيق فى المرات القادمه :abc_145:

[الراعي]

السلام عليكم ورحمة الله وبركاته
أخي أبو همام ارجو النظر في هذا الملف فقد أتعبني كثيرا وضعت الصور عموديا فظهر التأثير
كما ترى ثم وضعتها أفقيا بداخل جدول فكانت نفس النتيجة

ارفقت لك كل الملفات فاظرها بارك الله فيك

[abohmam]

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

حياك الله اخى الراعي

ماشاء الله التطبيق جيد ( فقط يحتاج تصغير صور الأيقونات )

الخطأ فقط فى توزيع الأزرار فى صفحة html الأسهل لك أن تعتمد على جدول لكن مافى مشكلة أنت ماشي صح :abc_022:

شاهد التعديل فى المرفقات وستعرف الطريقة ولاتنساني بدعوة صالحة بظهر الغيب :abc_051:

http://img62.imageshack.us/img62/6515/raey.png

[الراعي]

تسلم اخي اخي الفاضل أبو همام واسمح لي اغلبك معي شوي
فعلا مشكلتي في توزيع الازرار على صفحة html ولا زالت الى الآن تراودني بعض الاسئلة اخي
الكريم في الصورة التي وضعت انت في ردك كانت هناك الأزرار بترتيب افقي وبترتيب عمودي
هل اضعها انا ايضا بالترتيبن لاحصل على نفس النتيجة وسؤال آخر هل نضع صور التأثير اسفل كل زر
مطابق لها معليش أخي ابو همام محتاج افهم مسالة التوزيع بدقة وبعدها ان شاء الله كل شيء يهون
طريقتك في انجاز الجداول وتوزيع الازرار كانت غاية في الجمال وصار معي تحدي أحصلها ياغالي و
من خلالك ان شاء الله جزاك ربي ووالديك الجنة ونفع بك

[abohmam]

حياك الله أخى الراعي

شرح سريع وصامت :abc_006:

http://www.mediafire.com/file/qnmmimzadwt/css-hover.swf

أرجوا مراجعة الدروس السابقة الخاصة بالفرونت بيج وبعض دروس تصميم المواقع
كي لانقف عند بعض الخطوات التى يجب ان نكون قد إنتهينا منها منذ أمد ... فالقادم أصعب !!

[كينج نت]

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

اشكرك اخي ابوهمام لهذا الشرح المميز

ونعود اليوم بالتطبيق بإذن الله والذي نأمل ان يكون بالمقام المليق للشرح

وأرجوا المعذره للتاخير بسبب بعض الانشغالات

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

اتمنى ان أكون قد طبقة بالشكل الصحيح :abc_145:

http://img37.imageshack.us/img37/9752/63222452.png

التطبيق مرفق .

مجدداً اكرر شكري لمجهودك الطيب.

:abc_139:
.

[الراعي]

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

[abohmam]

جزاكم الله خيرا إخواني على هذا الإبداع

ماشاء الله تطبيق رائع من أخى كينج نت ولم يترك القائمة أفقيا ولا رأسيا إلا وأخرجهما فى أفضل صورة

أخى الراعي تمام الحمد لله أتمنى أن تكون إستفدت من الدرس ...
وفى الدرس القادم إن شاء الله تراعي إختلاف دقة الشاشة بين مستخدم وآخر ....
لذلك يجب أن تقوم بتحديد عرض الجدول الذى سيحتوي على القائمة كى لايظهر زر فى اقصى اليمين وآخر فى أقصى الشمال
أذكر هذا لأنى أستخدم شاشة "27 :abc_145: فلك أن تتخيل أماكن الأزرار مع عرض جدول 100% !!! فقط للتنبيه.

======\/======

والآن وكما يبدو قد تغير المسار من شرح للفوتوشوب الى تصميم قوائم !!!

فما رايكم فى تغير المسار ايضا !!!

بشرح درس أو إثنين فقط للقوائم سواء HTML - Java - CSS

أو الذى عنده أى إستفسار حول هذا الدرس يطرحه الآن كى لانرجع له مرة أخرى وننتقل للجديد.

فى حفظ الرحمن

[الدمشقي]

جزاك الله خيراً أخي الفاضل أبو همام
والله ما أخرني عن التطبيق سوى ضيق الوقت والإنشغال ببعض الأمور
فأنا منذ اليوم الأول من طرح الموضوع كنت قد مررت عليه واحتفظت بنسخة عنه ، على أمل التطبيق وقت التفرغ ....
أتمنى أن أكون قد وفقت بتطبيق الخطوات المذكورة في الشرح
ملحوظة : عذراً منك فقد قمت بعكس التأثير ( البارز للأعلى جعلته للأسفل )
ماتعودت إلا أن أطبق حرفياً لما تذكره لنا من دروس ولكن على أمل الحصول على فكرة جديدة :abc_102:

زادك الله من علمه النافع
وكان في عونك على نشر العلم والمعرفة بين إخوانك

:abc_139:

[الراعي]

السلام عليكم ورحمة الله وبركاته
اخي الكريم ابوهمام اثرت في ردك الاخير مسالة لطالما بحث عن اجابة شافية لها ولكن للاسف
هناك شح في المعلومات ولم اعثر على جوابي حتى داخل اسطوانتين تعليميتين ............
المسالة تتعلق بعرض الجداول ...هل نعتمد عرضا محددا في كل التصاميم ام ان العرض يكون تبعا
لكل تصميم على حدة ......كنت اعتقد ان خصائص البرنامج الافتراضية تنوب عني في ذلك:abc_156:
فقلت جزاها الله خيرا.. حتى جئتني انت مبشرا بان الازرار بعد ان خرجت من شاشتي وهي في وئام تام
تنافرت على شاشتك وتناثرت ......(ان لم تحدد السبب بتفصيل ممل فلا شك انك انت من افسدت بينها:abc_091:)
اعرف والله اعرف اخي ابو همام ان سؤالي خارج تماما عن اطار الدرس ولكنه يشغلني
فان بدالك فيه تعطيل دعه الى حينه ان شاء الله .... لك وللاخوة اجمل تحية.

[abohmam]

حياك الله أخى أبا شام

طال الإنتظار ولكنك لحقت آخر القطار

ولكن الحمد بما أنه تمت الفائدة وكان التطبيق جيدا بحمد لله سماح هذه المرة :abc_025:
بخصوص إستبدال الصور مافى مشكلة فى هذه الطريقة أما إذا تطرقنا إلى لغة الـ css المتقدمة
فالأمر سيختلف كثيرا حيث أن التصميم لاينفصل عن بعضه ... ربنا ييسر ونوضح الفكرة قريبا.

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

تمت الإضافة إلى التطبيقات

[abohmam]

حياك الله أخى الراعي

الإجابة فى سؤالك

فالعرض يكون تبعا لكل تصميم على حدة
عند التصميم يجب أن تعرف كيف تريد تصميمك وكذلك كيف سيظهر للعرض ؟

فإذا نظرت لجميع القوالب التى يتم تصميمها للبيع فى مواقع أجنبية كملفات psd
تجد قد تم تحديد كل شئ فى التصميم حتى توزيع الكتابة ليحدد المساحات الخاصة بالكتابة والقوائم والإعلانات
حتى مكان تسجيل الدخول ومحرك البحث بنفس الطريقة التى سيظهر عليها فى الشكل النهائي ،
وهذا يتطلب منك تحديد التصور النهائي للتصميم أثناء العمل بما يشمل ماتختاره من إضافات .

بالتوفيق إن شاء الله

[الراعي]

تسلم عزيزي ابو همام على التوضيح
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[abohmam]

تسلم عزيزي ابو همام على التوضيح
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

حياك الله أخى الراعي

موفق بإذن الله ... لك مني أجمل تحية .

[راجية رضى الله]

جزاكم الله كل خير
جارى التطبيق ممكن ايقونات لانى بحثت ولم اجد
بارك الله فيكم

[راجية رضى الله]

http://img404.yfrog.com/img404/228/0b415f.gif

[abohmam]

http://img404.yfrog.com/img404/228/0b415f.gif

حياك الله أختنا الفاضلة

ماشاء الله التطبيق جميل ولكن فعلا ينقصه أيقونة التعريف

لدينا قسم خاص للايقونات

http://www.abc4web.net/vb/forumdisplay.php?f=17

وهذا الموضوع به من الأيقونات مايفيدك إن شاء الله

http://www.abc4web.net/vb/showthread.php?t=39

http://www.abc4web.net/vb/showthread.php?t=6568

بالتوفيق وفى إنتظار باقى التطبيق

[رائد ابو فيصل]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[مدبليور]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[رائد ابو فيصل]

http://img243.imageshack.us/img243/1331/42451148.png (http://img243.imageshack.us/my.php?image=42451148.png)

[تامر العالم]

thanks alot

[المبدع مول]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[ابو فاطمة]

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

جزاك الله خير ابو همام عاشت ايدك

[أبو علي المغربي]

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

درس رائع من أستاذ أروع على صفحات المنتدى الأروع


و أقول : من لم يكن محترفا فليكن مع المحترفين و كفاه ذلك شرفا

[نسيم فلسطيني]

مشكوووووووووووووووووووووو ووووووووووووووووووووووووو ووووووووووووووووووووووووو ووووووور

[Khaled J. Ahmad]

بارك الله فيك

[جروح بارده]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[المهندس العربى]

شكراااااااااااااااااااااا ااااااااااااااااااااااااا ااااااا

[وضاحو]

سلمت يداك على الموضوع الرائع والشرح الوافي وجاري التجربة

[مستر دحووم]

يسلمووووو,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,

[الكتكوت الفصيح]

اشكرك علي مجهودك الرائع:abc_022:

[حساموو]

ثانكس
الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين

[المحااارب]

راااااااااااااااااااااااا ااااااااااااااااااااااااا ائع

[رجل السيف]

سلمت يداك أخي أبا همام مجهود رائع بل وممتاز بارك الله فيك وحنطبق ياريس بعون الله:abc_051:

[بالعيد]

أخي درس رائع .. سلمت يداك .. وأن شاء الله في ميزان حساناتك

[محمود حبيب]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[أبو الوليد]

جزاك الله خيرا على الإبداع أخي أبو همام :abc_022: شرح وافي ماشاء الله

[ايمن سالم]

بارك الله فيك وزادك من العلم الكثير والكثير
وجزاك الله كل خير

[شبح ظلال]

ما شاء الله
جزاك الله خيرا أخى أبو همام

[سلام الامة]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[أميرال النوفل]

انا اشهد انك متميز :abc_139::abc_139::abc_139:

[محمد عبد]

شكرا اخى ابو همام بس حبيت اسال عن نوع الخط اللى مستخدمه ؟؟؟؟ يا ريت

[basim samir]

عاشت الايادي

[عبد حميد]

السلام عليكم ورحمة الله وبركاته
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .
:abc_152:

[النجمة الذهبية]

بارك الله بيك اخي ابو همام
واسال الله لك السداد والتوفيق :abc_152:

[ايجى كافية]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[أبو صخر]

جزاك الله خيرا على هذا الجهد المبذول

موفق بإذن الله ... لك مني أجمل تحية .

[محمداب]

موضوع اكتر من رائع في منتدى أكتر من رائع

[ايجى كافية]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[صيانة المشعل]

الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين

[ابوالمنايفة]

الف شكر ياغالى

[عاصم حمزة]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية . موفق بإذن الله ... لك مني أجمل تحية .

[خالد الرماح]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[على مبروك]

مشــــــــــــــــــــــك ــــور

[يوسف محمود يحيى]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[طير اليمن]

موضوع جميل

[فهد السري]

مشكوووووووووووووووووووووو وووووووووووووووووووووووور

[رامي مشتهى]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية . موفق بإذن الله

[طارق التلاتي]

بارك الله فيك وجوزيت خيراً

[دموع الغمام]

السلام عليكم ورحمة الله وبركاته
أخي أبو همام
ابدعت و الله شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .
انا عضوة جديدة و اريد تعلم كل ما يخص بالفوتوشوب لكنني لا املك البرنامج أصلا :abc_070::abc_070: وكلما بحثت عنه امر بسلسلة من المواقع لأجد الملف محذوف او غير موجود :abc_083::abc_083::abc_083:
كما انني اود ل يكون عربي و سريع التحميل
هل تستطيع مساعدتي ؟؟؟؟
شكرا جزيلا لك اخي
:abc_152::abc_023::abc_152:
:abc_026::abc_026:

[معتززز]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[رووتي]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[سعيد الطويل]

السلام عليكم ورحمة الله وبركاته
شـكــ وبارك الله فيك ـــرا لك
موفق بإذن الله

[حسام سليمان]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[abohmam]

جزاكم الله خيرا اخواني جميعا

اشكر لكم مروكم العطر وتواصلكم الجاد


انا عضوة جديدة و اريد تعلم كل ما يخص بالفوتوشوب لكنني لا املك البرنامج أصلا
هل تستطيع مساعدتي ؟؟؟؟


حياك الله اختنا الفاضلة

يمكنك تحميل احدث اصدار يدعم اللغة العربية من هذه المشاركة

شرح تحميل وتثبيت فوتوشوب CS6 مباشر وجميع منتجات شركة أدوبي All Adobe download (http://www.abc4web.net/vb/showthread.php?t=23703)

ولايهم الواجهة العربية لأن اغلب الشروحات بالواجهة الأجنبية

بالتوفيق ان شاء الله

[قولولها]

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

تسلم الايادي وإلى الأمام دائماً وميزان حسناتك
موفق بإذن الله ...

[عصام بولبير]

مشكور اخي العزيز أبوهمام

[abohmam]

حياكم الله اخواني جميعا

أشكر لكم مروركم العطر وتواصلكم الجاد

بالتوفيق

[المصمم]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

http://www.abc4web.net/upload/images2/jobv77ridu.gif (http://www.abc4web.net/upload/)

[صادق الموسوي]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[حيدر عبد الكريم]

مشكورررررررررر

[كفى بالموت واعظا]

السلام عليكم ورحمة الله وبركاته
رائع بارك الله فيكم استاذنا الفاضل ابو همام

[إُلقنـآصّ]

تسلم وبارك الله فيك

[أبوانتصار]

بارك الله فيك أخي العزيز

[سليمان الفحلي]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[kamaya]

thanks a lot:abc_138:

[kamaya]

thanks a lot:abc_138:

[مارب ستار]

راااااائع مشكور على الشرح
ابداع وتميز

[هبة الله امل]

السلام عليكم ورحمة الله وبركاته شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[عبد الرحيم موهبة]

السلام عليكم ورحمة الله وبركاته الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين

[زوهير]

موفق بإذن الله ... لك مني أجمل تحية .

[abohmam]

جزاكم الله خيرا إخوانى جميعا

أشكر لكم تواصلكم الجاد ومروركم العطر

بالتوفيق

[الدموكي]

موفق بإذن الله ... لك مني أجمل تحية .

[محمد عماد الدين]

بسم الله الرحمن الرحيم
موفق بإذن الله ... لك مني أجمل تحية .