السلام عليكم ورحمـــة الله وبركاته
مسائكم ورد / وصبآحكم كآدي ..< وش هالروقآن اليووم ^_^
طبعا ياشباب درس مفصلنا اليوم وهو تابع لدرس مفصلنا السابق من دورة نايس لتصميم الواجهات الأحترافيه
ودرس مفصلنآ اليوم هو ( التقطيع + تركيب install الهيدر header والفوتر بالفرونت بيج )
وطبعآ هذا الدرس مفصل هو المهم جدا جدا ويحتآج تركيز
ونصحيه ( اقراء الدرس مفصل اكثر من مرهـ واقراء بتمعــن ) ..
ويلا ياشبااااااااب توكلنا علي الله :
الأن قبل كل شي تروح علي سطح المكتب عندك وتضغط كليك يمين وتختآر مجلد جديد يعني تنشيء مجلد جديد علي سطح المكتب تآبع الصوره :
الأن نعمل مجلد جديد ونسميه مثلا ( w-p ) مثلا بس اهم شي يكون اسم الملف انجليزي ومختصر يعني
الأن بعد ما سوينا المجلد الجديد .. تروح وتفتح تصميمك السابق .. اللي صممناه في الدرس مفصل الأول
لأ احد يجيني ويقول لي الدرس مفصل الأول وين ؟؟؟
طيب تعالو اللي ما شاف الدرس مفصل الأول يضغط هنا ويشوفه :
الدرس مفصل الثاني : تصميم الهيدر header + الفوتر ( متمدد )
المهم الأن .. افتح الفوتوشوب وافتح تصميمك اللي صممناهـ اول واول مآيفتح عندك التصميم اضغط
ctrl + ط علشان تظهر الشبكيه تابع الصورهـ :
الأن حلوو كذا طبعا فيه منكم يقولي وش فايدة الشبكة .. اقوله علشان تقطع بتوازن لأن اهم شي في التقطيع هو تكون المقاسات متساويه من جميع الأطراف ..
الأن بعد ماتظهر الشبكـه تروح علي طول وتعمل مقياس التصميم 100% علشان تقطع تمام :
الأن تروح وتختآر اداة التقطيع :
الأن ركزو معي تمااام وصحصحو للخطوات
بعد ماتختار اداة التقطيع تروح للشبكه وتعد مربعين وتححدهم بأداة التقطيع تآبع الصورهـ :
بعد ما حددنا المربعين اللي في الطرف .. ناخذ مربع ثاني جنبه بس نخليه اكبر مثل ماهو موضح بالصوره :
الأن انتبهو .. نبي نعمل التمدد .. والتمدد امر مهم ياشباب لازم يكون التمدد حجمه مربع واحد ولازم يكون خالي من الانحنائات والتعرجات والصور لازم يكون لون ساااااااااااااده او تدرج لوني ومستقيم .. يعني بالعرض مو بالطول ..
تآبعو الصوره :
الأن بعد ماعملنا التمدد نروح ونعمل مربع ثاني جنب التمدد بس نترك مربعين بالطرف علشان نحددهآ بعدين :
الأن حدد المربعين اللي تركتهم علشان تكون الأطراف متوازنه ومتساويه
الأن حددنا الهيدر header من البدايه للنهايه ..
نروح للفوتر ونعمل فيه مثل ماعملنا بالهيدر header بالظبط تابع معي الصور :
و تعمل مربعين بالناحية الثانية
ولاتنسو التمدد
واخر خطوهـ بالتحديد وهي :
الأن بكذا اقولكم مبروووك انتهينا من تقطيع الواجهه وماشين في السليم وكل شي تمام التمام والحلو جآي بطريق الدمام ههههههههههه << ررايق تنكت انت ووجهك ههههه
المهم تعآلو نلقي نظره اخيرهـ علي التقطيع علشان لو مآحد فهم من الشرح طريقة اللي فوق يفهم من الصورهـ هآذي :
الأن اذا لقيت تقطيعك نفس الصوره هآذي اعرف انه انت مآشي تمآم .. اذا فيه اختلاف اعرف انه آنت فيه شي خطآء عندك .. ارجع واقراء الشرح طريقة بهدوء وتركيز ..
طبعآ بعد ماننتهي من التقطيع نروح ونضغط علي ملف << حفظ للويب
تآبع الصوره
واللي الفوتوشوب عنده انقليزي يضغط بالكيبورد
Alt + Shift + Ctrl + S << كلها مع بعض
الأن بعد ماتضغط حفظ للويب راح تظهر لك صفحه علي طول لاتسوي شي غير انك تضغط علي حفظ
تآبع الصورهـ :
بعد مآ تضغط علي حفظ راح يظهر لك مربع الحفظ طبق فيه الخطوآت التآليه :
وبكذا يآشباب نكون حفظنآ التصميم مقطع في المجلد اللي عملنآه في بداية الدرس مفصل اللي عملنآه فوق سطح المكتب
الأن بعد الحفظ خلاص . نقفل الفوتوشوب ونتجه للمجلد اللي حفظنا فيه التصميم اللي هو w-p
لما نفتح المجلد راح نحصل فيه مجلد بأسم الصور ..
ياشباب اللي الفوتوشوب عنده عربي راح يحصل المجلد باسم ( الصور ) واللي الفوتوشوب عنده انقليزي
راح يحصل الصور بـ مجلد اسمه ( images )
اللي يحصله بـ images لأيغير فيه شي
واللي يحصله ( الصور ) يغير اسمه ويخليه بـ اسم images
تآبعو الصور :
يلا كذا حلوووين .. غيرنا اسم المجلد الأن نروح ونفتح الفرونت بيج
لأحد يجيني ويقولي مآعندي فرونت بيج ترى بعدين اعصب << خخخخخخ
اللي ماعنده فرونت بيج يضغط هنا
الأن نفتح الفرونت بيج واول مانفتحه نروح ونضغط علي " تعليمات برمجيه " من اسفل البرنامج
بعد مانضغط تعليمات برمجيه .. بتظهر لنا كتابه هي الأكواد
نمســـح الأكواد كلهآ لاتبقي ولا حرف شوف انا حددتها لك بالاحمر .. امسحهآ كلها
الحين بعد مامسحت كل شي .. ارجع واضغط علي تصميم اللي بجنب " تعليمات برمجيه " ..
الأن بعد ماتضغط عليها روح لمسآحه التصميم واضغط فيهآ علي اي مكآن كليك يمين واختآر خصائص الصفحه
راح تظهر لك خصائص الصفحه طبق فيها حسب ماهو موضح عندك بالصوره :
بعد ماتعمل جميع القيم صفر .. اضغط علي موافق .. وبكذا تكون انتهيت خصآئص الصفحه
الأن تروح وتضغط علي ايقونة ادراج جدول << وتدرج جدول مقاس 3 × 3 يعني
ثلاثه صفوف و ثلاثه اعمده
كذا تمام راح يندرج عندنا جدول 3 × 3 .. الأن روح واضغط علي اي مكان في مربعات الجدول كليك يمين واختآر خصآئص الجدول
وتعمل خصآئص الجدول بآلشكل التآلي :
الأن تعآلوووو .. نلقي نظره علي شكل الجدول ونشوف كيف صآر شكله
اصبح الجدول شفاف .. وهذا هو المطلوب ..
الأن نبي نركب صور التصميم اللي قطعنآهآ في الجدوال تعآلو نضيف الصور
اول شي اضغط علي المربع الأول بالجدول واضغط علي ايقونة ادراج صوره من ملف :
اختآر الصوره المقطعه رقم 5 وخليهآ في الطرف الأيمن
بعد ما نضغط ادراج تعآلو نشوف الصوره ..
الأن نذهب للمربع الأول ونضغط داخله ضغطه ونعمل ادراج للصور .. وندرج الصوره رقم 1 في المربع الأيسر
بعد ما ادرجنا الصور راح نلاحظ ان الجداول غير مشدوده وكل شي ملخبط *_*
تعآلو وشوفو الصوره :
يلا تعآلو نركز كيف نشد الجداول علشان التصميم يكون مشدود وسليم ..
اتبع الخطوآت اللي بآلصور .. خطوهـ خطوهـ :
الأن تعآلو نشوف وش صآر بآلتصميم :
كذا تمآم و 100% .. يآلله .. الحين نبداء ندرج صور الهيدر header المتبقيه ونضيف التمدد
وقبل لا تضيف الصور لازم تضيف التمدد .. تآبع الشرح طريقة معي :
نروح ونضغط ع المربع اللي بالوسط كليك يمين ونختآر " خصآئص الخليه " علشان نحط التمدد
بعد مانضغط راح تظهر لنآ خصآئص الخليه .. لا تعمل فيها ولا شي غير انك تضغط علي استعراض فقط
راح تظهر لك الصور .. اختر منهآ الصوره رقم 3 .. واللي ذكرتهآ لكم انهآ نقطة التمدد ولازم تكون مستقيمه والكلام هذا اللي قلته لكم في بدايه الشرح طريقة
انظرو كيف آصبح الشكل عندنا في الفرونت بيج بعد ما اضفنا صورة التمدد
الأن نبي نضيف صور الهيدر header فوق التمدد
نروح ونضغط علي ايقونة ادراج الصور .. اللي شرح طريقةتهآ لكم قبل شوي ونختآر الصوره التآليه
ونضغط ادراج
ونآخذ الأن فترة راحه .. شوووي .. ونررجع نكمل .. ياويليه اللي مايرجع هههههه
يلا بررب ياعررب
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©
رد مع اقتباس
