السلام عليكم ورحمـــة الله وبركاته
مسائكم ورد / وصبآحكم كآدي ..< وش هالروقآن اليووم ^_^
طبعا ياشباب درس مفصلنا اليوم وهو تابع لدرس مفصلنا السابق من دورة نايس لتصميم الواجهات الأحترافيه
ودرس مفصلنآ اليوم هو ( التقطيع + تركيب install الهيدر header والفوتر بالفرونت بيج )
وطبعآ هذا الدرس مفصل هو المهم جدا جدا ويحتآج تركيز
ونصحيه ( اقراء الدرس مفصل اكثر من مرهـ واقراء بتمعــن ) ..
ويلا ياشبااااااااب توكلنا علي الله :
الأن قبل كل شي تروح علي سطح المكتب عندك وتضغط كليك يمين وتختآر مجلد جديد يعني تنشيء مجلد جديد علي سطح المكتب تآبع الصوره :
http://www.to4w.com/drs2/1.gif
الأن نعمل مجلد جديد ونسميه مثلا ( w-p ) مثلا بس اهم شي يكون اسم الملف انجليزي ومختصر يعني
http://www.to4w.com/drs2/2.gif
الأن بعد ما سوينا المجلد الجديد .. تروح وتفتح تصميمك السابق .. اللي صممناه في الدرس مفصل الأول
لأ احد يجيني ويقول لي الدرس مفصل الأول وين ؟؟؟
http://www.n33s.com/olkaq/32.gif طيب تعالو اللي ما شاف الدرس مفصل الأول يضغط هنا ويشوفه :
الدرس مفصل الثاني : تصميم الهيدر header + الفوتر ( متمدد )
المهم الأن .. افتح الفوتوشوب وافتح تصميمك اللي صممناهـ اول واول مآيفتح عندك التصميم اضغط
ctrl + ط علشان تظهر الشبكيه تابع الصورهـ :
http://www.to4w.com/drs2/3.gif
الأن حلوو كذا طبعا فيه منكم يقولي وش فايدة الشبكة .. اقوله علشان تقطع بتوازن لأن اهم شي في التقطيع هو تكون المقاسات متساويه من جميع الأطراف ..
الأن بعد ماتظهر الشبكـه تروح علي طول وتعمل مقياس التصميم 100% علشان تقطع تمام :
http://www.to4w.com/drs2/4.gif
الأن تروح وتختآر اداة التقطيع :
http://www.to4w.com/drs2/5.gif
الأن ركزو معي تمااام وصحصحو للخطوات
بعد ماتختار اداة التقطيع تروح للشبكه وتعد مربعين وتححدهم بأداة التقطيع تآبع الصورهـ :
http://www.to4w.com/drs2/6.gif
بعد ما حددنا المربعين اللي في الطرف .. ناخذ مربع ثاني جنبه بس نخليه اكبر مثل ماهو موضح بالصوره :
http://www.to4w.com/drs2/7.gif
الأن انتبهو .. نبي نعمل التمدد .. والتمدد امر مهم ياشباب لازم يكون التمدد حجمه مربع واحد ولازم يكون خالي من الانحنائات والتعرجات والصور لازم يكون لون ساااااااااااااده او تدرج لوني ومستقيم .. يعني بالعرض مو بالطول ..
تآبعو الصوره :
http://www.to4w.com/drs2/8.gif
الأن بعد ماعملنا التمدد نروح ونعمل مربع ثاني جنب التمدد بس نترك مربعين بالطرف علشان نحددهآ بعدين :
http://www.to4w.com/drs2/9.gif
الأن حدد المربعين اللي تركتهم علشان تكون الأطراف متوازنه ومتساويه
http://www.to4w.com/drs2/10.gif
الأن حددنا الهيدر header من البدايه للنهايه ..
نروح للفوتر ونعمل فيه مثل ماعملنا بالهيدر header بالظبط تابع معي الصور :
http://www.to4w.com/drs2/11.gif
و تعمل مربعين بالناحية الثانية
http://www.to4w.com/drs2/12.gif
ولاتنسو التمدد
http://www.to4w.com/drs2/13.gif
واخر خطوهـ بالتحديد وهي :
http://www.to4w.com/drs2/14.gif
الأن بكذا اقولكم مبروووك انتهينا من تقطيع الواجهه وماشين في السليم وكل شي تمام التمام والحلو جآي بطريق الدمام ههههههههههه << ررايق تنكت انت ووجهك ههههه
المهم تعآلو نلقي نظره اخيرهـ علي التقطيع علشان لو مآحد فهم من الشرح طريقة اللي فوق يفهم من الصورهـ هآذي :
http://www.to4w.com/drs2/15.gif
الأن اذا لقيت تقطيعك نفس الصوره هآذي اعرف انه انت مآشي تمآم .. اذا فيه اختلاف اعرف انه آنت فيه شي خطآء عندك .. ارجع واقراء الشرح طريقة بهدوء وتركيز ..
طبعآ بعد ماننتهي من التقطيع نروح ونضغط علي ملف << حفظ للويب
تآبع الصوره
http://www.to4w.com/drs2/16.gif
واللي الفوتوشوب عنده انقليزي يضغط بالكيبورد
Alt + Shift + Ctrl + S << كلها مع بعض
الأن بعد ماتضغط حفظ للويب راح تظهر لك صفحه علي طول لاتسوي شي غير انك تضغط علي حفظ
تآبع الصورهـ :
http://www.to4w.com/drs2/17.gif
بعد مآ تضغط علي حفظ راح يظهر لك مربع الحفظ طبق فيه الخطوآت التآليه :
http://www.to4w.com/drs2/19.gif
http://www.to4w.com/drs2/20.gif
http://www.to4w.com/drs2/21.gif
http://www.to4w.com/drs2/22.gif
وبكذا يآشباب نكون حفظنآ التصميم مقطع في المجلد اللي عملنآه في بداية الدرس مفصل اللي عملنآه فوق سطح المكتب
الأن بعد الحفظ خلاص . نقفل الفوتوشوب ونتجه للمجلد اللي حفظنا فيه التصميم اللي هو w-p
http://www.to4w.com/drs2/24.gif
لما نفتح المجلد راح نحصل فيه مجلد بأسم الصور ..
ياشباب اللي الفوتوشوب عنده عربي راح يحصل المجلد باسم ( الصور ) واللي الفوتوشوب عنده انقليزي
راح يحصل الصور بـ مجلد اسمه ( images )
اللي يحصله بـ images لأيغير فيه شي
واللي يحصله ( الصور ) يغير اسمه ويخليه بـ اسم images
تآبعو الصور :
http://www.to4w.com/drs2/25.gif
http://www.to4w.com/drs2/26.gif
يلا كذا حلوووين .. غيرنا اسم المجلد الأن نروح ونفتح الفرونت بيج
لأحد يجيني ويقولي مآعندي فرونت بيج ترى بعدين اعصب << خخخخخخ
اللي ماعنده فرونت بيج يضغط هنا
الأن نفتح الفرونت بيج واول مانفتحه نروح ونضغط علي " تعليمات برمجيه " من اسفل البرنامج
http://www.to4w.com/drs2/27.gif
بعد مانضغط تعليمات برمجيه .. بتظهر لنا كتابه هي الأكواد
نمســـح الأكواد كلهآ لاتبقي ولا حرف شوف انا حددتها لك بالاحمر .. امسحهآ كلها
http://www.to4w.com/drs2/28.gif
الحين بعد مامسحت كل شي .. ارجع واضغط علي تصميم اللي بجنب " تعليمات برمجيه " ..
http://www.to4w.com/drs2/30.gif
الأن بعد ماتضغط عليها روح لمسآحه التصميم واضغط فيهآ علي اي مكآن كليك يمين واختآر خصائص الصفحه
http://www.to4w.com/drs2/31.gif
راح تظهر لك خصائص الصفحه طبق فيها حسب ماهو موضح عندك بالصوره :
http://www.to4w.com/drs2/32.gif
http://www.to4w.com/drs2/33.gif
بعد ماتعمل جميع القيم صفر .. اضغط علي موافق .. وبكذا تكون انتهيت خصآئص الصفحه
الأن تروح وتضغط علي ايقونة ادراج جدول << وتدرج جدول مقاس 3 × 3 يعني
ثلاثه صفوف و ثلاثه اعمده
http://www.to4w.com/drs2/34.gif
http://www.to4w.com/drs2/35.gif
كذا تمام راح يندرج عندنا جدول 3 × 3 .. الأن روح واضغط علي اي مكان في مربعات الجدول كليك يمين واختآر خصآئص الجدول
http://www.to4w.com/drs2/36.gif
وتعمل خصآئص الجدول بآلشكل التآلي :
http://www.to4w.com/drs2/37.gif
الأن تعآلوووو .. نلقي نظره علي شكل الجدول ونشوف كيف صآر شكله
http://www.to4w.com/drs2/38.gif
اصبح الجدول شفاف .. وهذا هو المطلوب ..
الأن نبي نركب صور التصميم اللي قطعنآهآ في الجدوال تعآلو نضيف الصور
اول شي اضغط علي المربع الأول بالجدول واضغط علي ايقونة ادراج صوره من ملف :
http://www.to4w.com/drs2/39.gif
اختآر الصوره المقطعه رقم 5 وخليهآ في الطرف الأيمن
http://www.to4w.com/drs2/40.gif
بعد ما نضغط ادراج تعآلو نشوف الصوره ..
http://www.to4w.com/drs2/41.gif
الأن نذهب للمربع الأول ونضغط داخله ضغطه ونعمل ادراج للصور .. وندرج الصوره رقم 1 في المربع الأيسر
http://www.to4w.com/drs2/42.gif
بعد ما ادرجنا الصور راح نلاحظ ان الجداول غير مشدوده وكل شي ملخبط *_*
تعآلو وشوفو الصوره :
http://www.to4w.com/drs2/43.gif
يلا تعآلو نركز كيف نشد الجداول علشان التصميم يكون مشدود وسليم ..
اتبع الخطوآت اللي بآلصور .. خطوهـ خطوهـ :
http://www.to4w.com/drs2/44.gif
http://www.to4w.com/drs2/45.gif
الأن تعآلو نشوف وش صآر بآلتصميم :
http://www.to4w.com/drs2/46.gif
كذا تمآم و 100% .. يآلله .. الحين نبداء ندرج صور الهيدر header المتبقيه ونضيف التمدد
وقبل لا تضيف الصور لازم تضيف التمدد .. تآبع الشرح طريقة معي :
نروح ونضغط ع المربع اللي بالوسط كليك يمين ونختآر " خصآئص الخليه " علشان نحط التمدد
http://www.to4w.com/drs2/47.gif
بعد مانضغط راح تظهر لنآ خصآئص الخليه .. لا تعمل فيها ولا شي غير انك تضغط علي استعراض فقط
http://www.to4w.com/drs2/48.gif
راح تظهر لك الصور .. اختر منهآ الصوره رقم 3 .. واللي ذكرتهآ لكم انهآ نقطة التمدد ولازم تكون مستقيمه والكلام هذا اللي قلته لكم في بدايه الشرح طريقة
http://www.to4w.com/drs2/49.gif
انظرو كيف آصبح الشكل عندنا في الفرونت بيج بعد ما اضفنا صورة التمدد
http://www.to4w.com/drs2/50.gif
الأن نبي نضيف صور الهيدر header فوق التمدد
نروح ونضغط علي ايقونة ادراج الصور .. اللي شرح طريقةتهآ لكم قبل شوي ونختآر الصوره التآليه
http://www.to4w.com/drs2/51.gif
ونضغط ادراج
ونآخذ الأن فترة راحه .. شوووي .. ونررجع نكمل .. ياويليه اللي مايرجع هههههه
يلا بررب ياعررب http://www.n33s.com/vb/images/smilies/happy0129[1].gif
https://fbcdn-sphotos-d-a.akamaihd.n...93518507_n.png
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©
