الدرس مفصل الثاني من ( دورة نايس لتصميم الواجهات الاحترافيه ) التقطيع+التركيب install بالفرونت بيج

[romaissa]

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




مسائكم ورد / وصبآحكم كآدي ..< وش هالروقآن اليووم ^_^




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

ودرس مفصلنآ اليوم هو ( التقطيع + تركيب 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 + الفوتر ( متمدد ) (http://www.n33s.com/vb/showthread.php?t=367) ‏

المهم الأن .. افتح الفوتوشوب وافتح تصميمك اللي صممناهـ اول واول مآيفتح عندك التصميم اضغط
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

يلا كذا حلوووين .. غيرنا اسم المجلد الأن نروح ونفتح الفرونت بيج

لأحد يجيني ويقولي مآعندي فرونت بيج ترى بعدين اعصب << خخخخخخ

اللي ماعنده فرونت بيج يضغط هنا

الأن نفتح الفرونت بيج واول مانفتحه نروح ونضغط علي &quot; تعليمات برمجيه &quot; من اسفل البرنامج

http://www.to4w.com/drs2/27.gif

بعد مانضغط تعليمات برمجيه .. بتظهر لنا كتابه هي الأكواد

نمســـح الأكواد كلهآ لاتبقي ولا حرف شوف انا حددتها لك بالاحمر .. امسحهآ كلها

http://www.to4w.com/drs2/28.gif


الحين بعد مامسحت كل شي .. ارجع واضغط علي تصميم اللي بجنب &quot; تعليمات برمجيه &quot; ..

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 المتبقيه ونضيف التمدد

وقبل لا تضيف الصور لازم تضيف التمدد .. تآبع الشرح طريقة معي :

نروح ونضغط ع المربع اللي بالوسط كليك يمين ونختآر &quot; خصآئص الخليه &quot; علشان نحط التمدد

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.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©