صمم موقعك بالفوتوشوب من الألف الى الياء ...!

[سمو العاطفه]

السلام عليكم

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

واتمنى ان الجميع يستفيد منه
______________________________________
سيتضمن الدرس التالي:
1- تصميم شعار
2- تصميم واجهة الموقع
3- استخدام اداة التقطيع
4- طريقة ارفاق تصميمك ببرنامج الفرونت بيج
5- شرح عن كيفية تحميل الموقع على صفحتك بالانترنت


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

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


* من قائمة File > New
العرض : 800
الطول : 600

وهاي المقاسات اكتر استخداماً

* نختار عمل لاير جديد ومن Foreground color نحدد اللون كالتالي

D9D9D9 #

كما بالشكل الموضح لديكم


http://www.alflash.com/lesson/AtoZhomePhoto/s1.jpg

http://www.alflash.com/lesson/AtoZhomePhoto/s2.jpg


* نختار عمل لاير جديد وباداة التعبئة مفتاح الاختصار G ونقوم بتلوين الخلفيه ونسمي الاير بأسم background من خلال الضغط مره واحد على اللاير ورايت كليك واختار من القائمة Layer Properties اي خصائص اللاير

* قم بتصغير عملك باستخدام اداة العدسه مره واحده حتى يسهل لك التحكم بالعمل

* نفتح عمل لاير جديد ونسمى اللاير بأسم لاير 1 ونستخدم اداة التحديد الدائرية ونرسم دائره
((توجيهات : لمن لا يعرف كيفية رسم الدائره نختار اداة التحديد وفوق عملك مباشرة نضغط مره واحده بالماوس ونبدأ بالاتجاه للجهة المعاكسه من نقطة بدء تحديدك مع استمرارية الضغط بالماوس الى ان يظهر لديك الشكل الدائري ))
لاحظ الشكل التالي:


http://www.alflash.com/lesson/AtoZhomePhoto/s3.gif



* نختار أداة الدائريه مره اخرى لنحرك بها التحديد ونحركها للأعلى ليصبح كالشكل التالي:


http://www.alflash.com/lesson/AtoZhomePhoto/s4.gif


* بالشكل التالى شرح خطوات استخدام اداة تدرج اللون والحرف + باللون الاحمر هو نقطة البداية ... اما الحرف + باللون الابيض هو نقطة الانتهاء


http://www.alflash.com/lesson/AtoZhomePhoto/s5.jpg



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

http://www.alflash.com/lesson/AtoZhomePhoto/s6.gif



(( توجيهات: لعمل لون اضافي لاداة التدرج اضغط مره واحده مكان حرف + باللون الاحمرالموجود بالشكل التوضيحي وستظهر لك نافذة لاضافة تدرج جديد ))


http://www.alflash.com/lesson/AtoZhomePhoto/s7.jpg


* نختار لاير جديد ونسمى اللاير بأسم المربع من نافذة اللايرز ومن قائمة الادوات نختار اداة تحديد المربع كالشكل التالي :


http://www.alflash.com/lesson/AtoZhomePhoto/s8.jpg


(( توجيهات: تستيطع من اداة التحديد ان تحدد مقاس الطول والعرض من قائمة Style الموجوده بخصائص اداة التحديد اختر منها Fixed size والعرض سيكون 504 والطول 17 بيكسل ))


....

[سمو العاطفه]

...



* نقوم بعمل لاير جديد ونختار اداة القلم مفتاح الاختصارB ومن الجهة اليمنى نضغط فوق العمل ونبدأ بالسحب الى الجهة اليسرى مع الضغط على مفتاح Shift حجم مقاس البرش سيكون 1
ثم ننسخ اللاير ليصبح لديك خطين متساوين قم بتحريك لاير الخط الاول الى الاعلى كما تلاحظ من الشكل

http://www.alflash.com/lesson/AtoZhomePhoto/s9.jpg


(( اضافة بعض اللمسات على الخطين: من اداة البرش الناعمه نقوم بتكبير الحجم الى 100 ونختار اداة الممحاة مفتاح الاختصار E ومن خارج لاير الخط الاول من الجهة اليسرى نضغط مرتين كرر نفس الطريقه مع الخط الثاني ))

بعد الانتهاء قم بدمج لاير الخطين مع لاير المربع

((توجيهات :لحذف جزء الزائد بالشكل ننشط لاير المربع عن طريق الضغط على اللاير نفسه من نافذة اللايرز مره واحده ثم نضغط على Ctrl+ Shift+لاير الدائري 2
ونذهب لقائمة Select> Inverse ونضغط Delete من لوحة الكيبورد ))

http://www.alflash.com/lesson/AtoZhomePhoto/s11.jpg


ويكون الناتج بنفس الطريقه

http://www.alflash.com/lesson/AtoZhomePhoto/s10.jpg


* نفتح لاير جديد ونسمي اللاير بأسم مربع 2


* من قائمة الادوات نختار اداة تحديد المربع كما موضح بالشكل التالي:
http://www.alflash.com/lesson/AtoZhomePhoto/s12.jpg



* نفتح لاير جديد وبأداة القلم حجم البرش يكون 2 نسحب خط من جهة اليمنى الى اليسرى بالضغط على Shfit يكون موازيا للاير مربع 2
بعد الانتهاء نقوم بدمج لاير المربع 2 مع المربع الموازي له
(( اضافة بعض اللمسات على المربعين: من اداة البرش الناعمه نقوم بتكبير الحجم الى 100 ونختار اداة الممحاة مفتاح الاختصار E ومن خارج لاير المربع2 من الجهة اليسرى نضغط ثلاث مرات ))

* نختار لاير جديد ونسمي اللاير بأسم مربع 3
ومن قائمة الادوات نختار اداة التحديد المربع بالشكل التالي سيكون مرفق مقاس التحديد بعد الانتهاء من التحديد نختار اداة التدرج ونسحب من الجهة اليمنى الى اليسرى انظر للشكل التوضيحي
http://www.alflash.com/lesson/AtoZhomePhoto/s13.jpg


سيكون الناتج بهذا الشكل

http://www.alflash.com/lesson/AtoZhomePhoto/s14.jpg



والان يأتي دور اضافة لمسات بسيطه للشعار ننشط لاير 1 ثم رايت كليك بالماوس على اللاير ستفتح قائمة اختر منها Blending options

اختر Outer Glow واتبع الشكل التالي:

http://www.alflash.com/lesson/AtoZhomePhoto/s15.jpg


والان نذهب لننشط لاير دائرة 2 ونضغط مره واحده مع الضغط على Ctrl لتنشيط تحديد اللاير ومن قائمة Select > Modify> Expand ستظهر نافذة نكتب رقم 2 واضغط ok ولا تحذف التحديد ونختار عمل لاير جديد ومن قائمة الادوات نختار اداة التدرج ونسحب من الجهة اليسرى الى الجهة اليمنى داخل المربع الذي قمنا بتحديده كما بالشكل التالي مع مراعاة عدم الغاء التحديد:

http://www.alflash.com/lesson/AtoZhomePhoto/s16.jpg



.....

[سمو العاطفه]

...


بعد الانتهاء مازال تحديد موجود على اللاير نذهب الى قائمة select >modify> contract ستظهر نافذة حدد رقم 2 واضغط ok ثم من لوحة الكيبورد نضغط delete ونضع الاير اسفل لاير دائرة 2

حتى يصبح كمثل الشكل التالي:
http://www.alflash.com/lesson/AtoZhomePhoto/s17.jpg


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

واضفت تأثير بسيط للكلمة تسيطع اضافة اي تأثير لاسم موقعك ليكون شكل ناتج الشعار كالتالي:
أنظــر هنا للشعار (http://www.alflash.com/lesson/AtoZhomePhoto/s18.jpg)


وبهيك نكون انتهينا من جزء بسيط من الشرح للشعار : ) اللى يحب يرتاح شوي من الدرس مافي مشكله http://www.alflash.com/vb/images/smilies/fr7an436.gif http://www.alflash.com/vb/images/smilies/fr7an436.gif http://www.alflash.com/vb/images/smilies/fr7an436.gif


* من نافذة Navigator نحدد المقاس لـ 77 عن طريق Zoom out حتى يسهل العمل ثم نغلق النافذة ونترك فقط نافذة اللاير ظاهره امامكم

http://www.alflash.com/lesson/AtoZhomePhoto/s19.jpg



* نبدأ باختيار عمل لاير جديد بأسم عمودي ثم بأداة القلم ونحدد مقاس البرش 2 بيكسل ونختار اللون الابيض قبل البدأ بالرسم
من اعلى صفحة عملك عند مكان نقطة انتهاء الشعار للتحديد اكثر بمكان نقطة البداية اضغط Ctrl+R تلاحظ ظهور مسطره حول عملك قم بالضغط مره واحد رايت كليك عليها واختر منها بيكسل ستكون نقطة البدأ من 120 ونسحب بالاداة من الاعلى الى الاسفل كالشكل التالي:

http://www.alflash.com/lesson/AtoZhomePhoto/s20.jpg


* نكرر نفس لاير الخط عمودي عند مقاس 220 كما بالشكل التالي:

http://www.alflash.com/lesson/AtoZhomePhoto/s21.jpg


* نكرر نفس اللاير العمودي لعند مقاس 770 بمكان الجهةاليمنى

* نختار عمل لاير جديد ونسمى اللاير بأسم الواجهه ومن قائمة الادوات نختار اداة المربع ونقوم برسم مربع الـ Fixed Size العرض: 725
الطول : 408

كما بالشكل التالي:
http://www.alflash.com/lesson/AtoZhomePhoto/s22.gif



*مازلنا نعمل على نفس لاير الواجهة نختار اداة التعبئة واللون يكون بنفس لون الخلفيه تمام نضغط مره واحده داخل التحديد المربع النشط

* نضغط على لاير الواجهة رايت كليك ونختار من القائمة Blending options ونختار Stroke واللون سيكون ابيض كما بالشكل التالي:

http://www.alflash.com/lesson/AtoZhomePhoto/s23.jpg



...

[سمو العاطفه]

...


http://www.alflash.com/vb/images/smilies/fr7an436.gif المسأله سهله جدا وكأنك تصمم خريطه بس الخريطه تكون من خيالك وماتكثر من تداخل اللالوان بموقعك واهم شي يكون في دقه ووضوح تام باللالوان يعني تخيلوا بعد كل هادا التصميم واضافته بموقعك تكتشف ان حواف تصميمك خشنه بس بإذن الله بنتعلم سويا كيف نقدر نمننع من ظهور العيوب بالتصميم ونصلحها بالفوتوشوب

* اختار لاير جديد ونسميه خطوط ونختار اداة المربع مفتاح الاختصار U ونختار Rounded Rectangle
كما بالشكل التوضيحي:

http://www.alflash.com/lesson/AtoZhomePhoto/s24.jpg


* ونحدد من الخصائص الاداة الـ Radius: 10

http://www.alflash.com/lesson/AtoZhomePhoto/s25.jpg


لتحديد مقاس بدأ نقطة رسم المربع نفتح المسطره من Ctrl+R
70الطول
والعرض من 550

نضغط مره واحده ونبدأ بالسحب الى اعلى لنقطة الطول 230 العرض 500

الشكل التوضيحي كالتالي :

http://www.alflash.com/lesson/AtoZhomePhoto/s26.jpg


* اذهب الى قائمة Select> modify> Contract
الـ Contract =2

والان سأقوم بشرح خطوات الصوره التاليه

اتبع حركات السهم بالجزء الايمن من المربع نقوم بتحديده ثم على نفس اللاير نضغط delete ونذهب الى اسفل المربع ونحذف ايضا الجزء السفلى ثم باداة التحريك السهم نقوم بتحريك المربع الى الاسفل كما بالشكل التالي:

http://www.alflash.com/lesson/AtoZhomePhoto/s27.gif



* نفتح عمل لاير جديد ونسمى اللاير بأسم الرسم ونختار اداة اللاسو ساشرح خطوات الرسم للمبتدئين ولكن قبل ما ابدأ انظر للشكل التالي

http://www.alflash.com/lesson/AtoZhomePhoto/s28.jpg



رقم 1 : تأكد من اختيارك للshape
رقم 2: ستظهر لك نافذة جديده بعد تحديدك بالاداة فلا تعتبرها مشكله كل ما عليك لظهور التحديد ولحذف الshape فقط اضغط رايت كليك بالماوس على لاير shape واضغط Ctrl وسيظهر التحديد وبعد ظهور التحديد نحذف اللاير الـ shape وسيختفي اللون الاسود كما نلاحظ الخطوات التاليه بالتفصيل لكيفية الرسم بأداة اللاسوووو

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

http://www.alflash.com/lesson/AtoZhomePhoto/s29.gif


سأشرح الخطوات
باداة اللاسو نحدد اول نقطه
ثم بضع خطوات لاعلى الى الجهة اليمنى نضغط مره واحده
سنلاحظ ظهور خط واحد بين النقطتين
نرجع للنقطه الاولى ونلاحظ ان شكل الاداة تغير وأصبح بجانب شكل الاداة دائره صغيره وهادا يعني للارتباط واقفال العمل من نقطة البداية والنهاية ستكون لعند نقطة البدايه http://www.alflash.com/vb/images/smilies/fr7an436.gif هههههه متل بيت جحا لفه كبيره بس لنقفل الخط وعند الضغط على نقطة البداية تلاحظ انه تغير شكل الاداة الى سهم اسود فقط فقط عند السحب فلنجرب السحب للجهة اليسرى وتلاحظ انه بدأ بعمل تدوير للتحديد استمر بالسحب الى ان تحدد تحديد دائري بيضاوي كمثل الشكل الذي اتبعته بالشرح http://www.alflash.com/vb/images/smilies/fr7an436.gif واول ماتنتهى من استخدام الاداة راح يظهر لك شكل لاير جديد shape لاننا من البدايه حددنا ان نعمل على الـ Shape كل ماعليك فعله تنشط اللاير واضغط مره واحده عليه ووبنفس الوقت اضغط Ctrl وتلاحظ انه تم تحديد الشكل احذف لاير الـ Shape مع عدم الغاء التحديد اللى رسمناه وقم بتلوين الشكل من اداة التعبئه باللون التالي:

426A7C#

واخيرررا انهينا اكبر جزء من الشرح مو فاضل غير تصميم الموقع

...

[سمو العاطفه]

...


* نفتح عمل لاير جديد ونسمى اللاير بأسم خط عمودي وباداة القلم نحدد البرش مقاس 1 واضغط Ctrl+R لتظهر المسطره ولنحدد نقطة بداية رسمك للخط

الطول 234 والعرض 205 من المسطره
اضغط مره واحده وابدأ بالسحب الى الاسفل لينتهى الخط عند شكل اللاير الرسم كالشكل التالي:

http://www.alflash.com/lesson/AtoZhomePhoto/s30.jpg


* والان قم بتكرار لاير الرسم ونسمى اللاير بأسم الرسم المعكوس وضعه فوق شـــــــكل لاير خط العمودي ومن قائمة Edit> Transform > Filp horizontal
ثم نكرر نفس الخطوات من قائمة Edit> transform>file Virtecal

كالشكل التالي:
http://www.alflash.com/lesson/AtoZhomePhoto/s31.jpg


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

كالشكل التالي :

http://www.alflash.com/lesson/AtoZhomePhoto/s32.jpg


* نقوم بعمل لاير جديد وباداة القلم مازلنا على مقاس البرش 1 نقوم ببدأ الرسم من نقطة انتهاء اخر خط الى مقاس عرض 250

* نقوم بنسخ لاير الرسم مره اخرى ونصغر الحجم النصف وباستخدام قائمة edite> transform> Rotate نجعل الشكل يدور لاسفل قليلا كهذا الشكل التالي:

http://www.alflash.com/lesson/AtoZhomePhoto/s33.jpg


* نختار عمل لاير جديد وباداة القلم باللون الابيض نحدد من نقطة انتهاء اللاير الذي قمنا بنسخه وتصغير حجم لاير نسخ الرسم ونبدأ بالسحب لأسفل موازيا للخط الذي قمنا برسمه سابقاً http://www.alflash.com/vb/images/smilies/fr7an436.gif
http://www.alflash.com/lesson/AtoZhomePhoto/s34.jpg


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


* نختار عمل لاير جديد بأسم تدرج ,,, من اداة تحديد المربع نحدد الجزء الخاص بالجهة اليسرى
http://www.alflash.com/lesson/AtoZhomePhoto/s35.jpg


وبأداة التدرج نسحب من اسفل الى اعلى

كالشكل التالي:

http://www.alflash.com/lesson/AtoZhomePhoto/s36.jpg



(( أضافة بعض اللمسات:بالشكل التالي s38 سأشرح خطواتها بالشكل التوضيحي التالي:
http://www.alflash.com/lesson/AtoZhomePhoto/s37.jpg


شرح الخطوات الشكل السابق :
قم بتكرار لاير الرسم المعكوس ثم ضع اللاير فوق المربع واضغط على الاير الرسم المعكوس مره واحده واضغط بنفس الوقت Ctrl لتحديد الشكل وقم بتنشيط لاير التدرج ثم اضغط Delete وباداة الممحاه نقوم بمسح اجزاء الزائده http://www.alflash.com/vb/images/smilies/fr7an436.gif

http://www.alflash.com/lesson/AtoZhomePhoto/s38.jpg


والان نتبع نفس خطوات لاير التدرج بعمل لاير جديد ليكون الشكل الاخير لنا كالتالي:

http://www.alflash.com/lesson/AtoZhomePhoto/s39.jpg


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

http://www.alflash.com/lesson/AtoZhomePhoto/s40.jpg



...

[سمو العاطفه]

...


* والان لنقم بعمل الايقونات نختار عمل لاير جديد بأسم قائمة ... وبأداة تحديــــد المربع بالمقاسات التاليه

http://www.alflash.com/lesson/AtoZhomePhoto/s41.jpg


* لا تلغى التحديد وبأداة التعبئة نضغط مره واحده داخل المربع الذي حددناه درجة اللون 486E80 # ثم اذهب الى قائمة Select> modify> contract
الـ contract = 1

* نقوم بتكرار لاير قائمة 7 مرات وقم بترتيب الشكل : انظر للشكل التوضيحي

http://www.alflash.com/lesson/AtoZhomePhoto/s42.jpg


بعد الانتهاء قم بدمج 7 لايرز الذي قمنا بنسخهم ليكون لديك فقط لاير بأسم قائمة واحد

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

http://www.alflash.com/lesson/AtoZhomePhoto/s43.jpg


* اختار عمل لاير جديد بأسم شريط وباداة القلم باللون الابيض ارسم خطين متوازين صغير جدا يربط بين الواجهه وبين القائمة وقم بتكرار لاير شريط 7 مرات

كالشكل التوضيحي التالي:

http://www.alflash.com/lesson/AtoZhomePhoto/s44.gif


بعد الانتهاء قم بدمج جميع لايرز الشريط في لاير واحد

* اختار عمل لاير جديد ونسميه بأسم الضوء http://www.alflash.com/vb/images/smilies/fr7an436.gif
باداة الدائريةEllipse Tool مفتاح الاختصار U
ونختار اللون الاساسي ابيض
نقوم برسم دائره صغيرة الحجم مع الضغط على Shift ونقوم بتكرار نفس الاير ولكن نرسم دائره اصغر حجما باللون 486E80 # ثم ندمجهم ونكرر اللاير 7 مرات كالشكل التالي:

http://www.alflash.com/lesson/AtoZhomePhoto/s45.gif


لا تقوم باي دمج للاير الضوء الان

(( لاضافة بعض اللمسات على القائمة : قمت بعمل لاير جديد واخترت اداة الدائرية باللون الابيض مفتاح الاختصار U وثم من قائمة Select>modify>contract
ال contract = 4))

وقمت بتنشيط تحديد لاير القائمة ومن Shift+Ctrl+I ثم اضغط delete وسيكون كالشكل التالي:

http://www.alflash.com/lesson/AtoZhomePhoto/s46.jpg


* اختر اداة النص وقم بكتابة القائمة لديك كالتالي:

http://www.alflash.com/lesson/AtoZhomePhoto/s47.jpg


انتهينا والحمدلله من تصميم الموقع اضغط هنا لمشاهدة شكل التصميم بالكاملhttp://www.alflash.com/vb/images/smilies/fr7an436.gif

...

[سمو العاطفه]

...

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


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

عشان هيك نبدأ بوضع لمسه بسيطه عند مرور الماوس على القائمة

من برنامج الفوتوشوب نفتح قائمة file> jump to> imageready


تم شرح سابقا طريقة عمل الـ Rollover اضغط هنا لمشاهدة الدرس

الدرس من هنا (http://www.saven7.com/showthread.php?s=&threadid=16262)

الطريقة التالية التى سنستخدمها للاير الضوء نفتح عمل لاير جديد بأسم ضوء 2
باداة الدائرية مفتاح الاختصار U وباللون 395967 #

سنبدأ بالتقطيع وبنفس الوقت سنرتب عمل لاير الضوء

اداة التقطيع بالايمج ريدي مفتاح الاختصار K
نقوم بتصغير العمل من اداة العدسه لحجم يناسبك والان من اداة التقطيع نبدأ من الجهة اليسرى من اعلى الى اخر الشعار ونكرر نفس الخطوه لشكل نصف الواجهه اي بدون شكل القائمة ولن يكون هناك داعي لعمل لايرز جديده لان عملك كله يسجل بنافذة الـ rollover كما بالشكل التالي:

http://www.alflash.com/lesson/AtoZhomePhoto/s48.jpg



والان نأتي لشرح كيفية عمل تقطيع للقائمة سأشرح اول رابط فقط وبالحجم الكبيـــر والبقيه سيكون بنفس الخطوات :

كما بالشرح المرفق لديكم

http://www.alflash.com/lesson/AtoZhomePhoto/s49.gif


شرح الشكل السابق:

بأداة التقطيع ... نبدأ بسحب من الجهة اليسري للمربع الى انتهاء مربع ثم نظهر امامنا نافذة اللايرز ونافذة الـ Rollover
light2= هو لاير ضوء2

والان من نافذة الـ rollover اضغط عمل جديد للrollover سيظهر امامنا over state = اي عند مرور الماوس تستيطع اضافة عمل تأثير اتبع خطوات السهم مباشرة سيذهب الى نافذة اللايرز ويظهر لاير ضوء 2 (( light2)) ونلاحظ ظهور الدائره الاكبر حجماً
والان نرجع مره اخرى اتبع شكل السهم ونختار عمل جديد سيظهر بنافذة الـ rollover الـ down state اي بعد خروج السهم من القائمة فسنقوم بالذهاب الى نافذة اللايرز ونخفي لاير الضوء 2

http://www.alflash.com/vb/images/smilies/fr7an436.gif انتهينا من الشرح

ولمشاهدة عملك بنفسك اضغط على file> preview in واختر المتصفح من القائمة

والان اذهب الى قائمة File > save optimized as

ستظهر لك نافذة احفظ امتدادك بـ HTML
واكتب اسم ملفك saven7.html


* نفتح برنامج الفرونت بيج http://www.alflash.com/vb/images/smilies/fr7an436.gif

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

* افتح برنامج الفرونت بيج ثم من file> open>saven7.html

http://www.alflash.com/lesson/AtoZhomePhoto/s50.jpg


* اذا كانت خلفية عملك باللون الابيض ببرنامج الفرونت بيج على نفس الخلفيه رايت كليك واختر خصائص الصفحه page properties

واتبع خطوات السهم واللون محدد مع الصور
http://www.alflash.com/lesson/AtoZhomePhoto/s51.gif




* والان كيفية عمل الرابط بالفرونت بيج واتفضلوا درس سبق شرحه عن كيفية عمل رابط
بعد الانتهاء * نضغط على about me ونختار hyperlink واختار من جهازك الصفحه الخاصه بموضوع about me
ثم اضغط موافق وكرر الخطوات علي بقية الازرار

والان ننشر عملنا على الانترنت من خلال برنامج FTP
FTP (http://www.saven7.com/showthread.php?s=&threadid=9304)

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

...

[سمو العاطفه]

...


* نفتح المتصفح ونكتب jeeran.com
واكتب اسم الدخول وكلمة السر الخاصه بك

ثم اضغط sign in

او دخول
* والان اتبع الشكل التالي:

نختار Homepage Manager

http://www.alflash.com/lesson/AtoZhomePhoto/s52.jpg


ثم نختار file manager

http://www.alflash.com/lesson/AtoZhomePhoto/s53.jpg


ثم نختار upload files


http://www.alflash.com/lesson/AtoZhomePhoto/s54.jpg


المرحله المهمه هيا ان تختار main folder ستظهر قائمة منها اختر Main Folder/Images
وقم بتحميل فقط فقط الصور على الفولدر images حيث يحمل نفس الاسم من جهازك

كالشكل التالي

http://www.alflash.com/lesson/AtoZhomePhoto/s55.jpg


ولارفاق الصوره من جهازك اضغط على broswe ستظهر نافذة توجه الى مكان عملك واختر ملف اسمه images وارفق الصور كلها
ثم نعود مره اخرى الى ملفات التحميل ونختار من قائمة main folder نختار منها main folder للرجوع هناك نقوم بتحميل ملفات الـ Html فقط


http://www.alflash.com/lesson/AtoZhomePhoto/s56.jpg


http://www.alflash.com/vb/images/smilies/fr7an436.gif

تفضلوا بزيارة الموقع بعد تصميمه

صمم موقعك بنفسك العمل النهائي (http://snoura.jeeran.com/face.jpg)



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

ودي وآحٌ ـترآمي لـ آلـ ج ـميع ...
سمو آلـ ع ـآطـفـه ...!
م/ن