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

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


مساء صباح الورد للجميع ,


قبل كل شئ نتذكر ( سبحان الله وبحمده سبحان الله العظيم )


,,
عنوان الدرس : شرح تصميم موقع رسمي ,
البرنامج المستخدم : الفوتوشوب + الفرونت بيج
الملحقات للدرس : يتطلب برنامج الاف تي بي


مستوى الدرس للمبتدئين : وسط ,
مستوى الدرس للمحترفين : سهل ,



الموضوع الاصلي للدرس

من هنـــــــــــــــــــــــــــــــــــــــــــــــا

,


مثال ع الدرس

www.ss2s.net/1.htm

بسم الله نبــدا ,

بإذن الله كلها كم خطوة , بشرح لكم بالتفصيل الممل ولكن بإختصار ,

يعني بشرح لكم بطريقة ذكية بإذن الله ,


,


طبعا الدرس يتقسم الى الاقسام التالية :

بالنسبه للفوتوشوب ( تصميم هيدر + اقسام ) ثم تقطيع ,

الفرونت بيج ( توزيع )

الاف تي بي ( رفع )


,,


ف البداية نفتح برنامج الفوتوشوب ونفتح ملف جديد بالمقاسات التالية :


,



حبيبي ,, حبيبتي

اوما حبيبتي ماعليه عفويه

, سامحوني بنات

,

ضاق صدري >> نصاب

هههههههههههه

....................................

اهم شي التركيز ثم التركيز ثم التركيز ,

,

ثم
التركيز ,



طيب نفتح ملف بالمقاسات هذي , >> احفظ المقاسات بالمفكره

اهم شي العرض احفظة ترى تحتاجه بالفرونت بيج ظروري

مو تقول سعود نسيت ,



انت يالغالي ويالغاليه سووا مثلي , عشان الانجاز بعدين احترفوا براحتكم




,

انا صممت شي خفيف

يعني حطيت مستطيل طويل وكتبت تحته القوائم

وفوق اسم الموقع وحطيت رابط موقعي

,

وطلع معاي كذا





,

نروح طال عمرك لسطح المكتب

ونسوي مجلد وحط اسمه مثلا >> az

انت بإمكانك وضع الاحرف اللي تبيها بس انتبه ظروري انجليزيه تكون ولاتكون طويله

يعني حرف ولا حرفين افضل لك ,


,

نرجع للفوتوشوب ونحفظ الهيدر بالمجلد هذا وخل اسمه >> h

طريقة الحفظ

من file ثم save for web
,,

طيب سعود الشمري ممكن سؤال فديتك !!

طيب اسعل , قصدي اسال !!


ليه الهيدر ماقطعته !؟.

لانه غير متمدد فديتك وانا راح اسوي درس مستقبلا للتصميم موقع رسمي لهيدر متمدد ,

,,,


نرجع لمحور حديثنا ,

الان نرجع للفوتوشوب

ونسوي قوائم ,


افتح المقاسات التالية



,





الحين ياطول العمر ركز معاي ,

لابد من التركز ولا تفهي ,




بعدين طال عممرك ارسم على نفس طول وعرض الملف اللي فتحناه الجديد ,

لاحظ كيف




,

طبعا اسود مو زين , او بالاصح غير لائق

لابد من اننا نغير خلفيته

بالعلم ان هذا الشكل اللي رسمناه يكون ايطار لنفس القائمة اللي راح نسويها ,

قصدي كذا لاحظ

شوف كيف بتصير القائمة مستقبلا ,



طبعا اللون الاحمر غامق هذا الشكل الاول اللي راح نسويه ,

اللون الاخظر الجدددا فاتح هذا الشكل الثاني ,





طريقة تغيير الخلفية من هنا



اللي صندوق الليرات مو طالع عنده فقط يضغط f7






اكيد تغير اللون عندكم ,
,

ذالحين > قلبت دوسري هههه

ونعم فيكم

ابك عاني كيف بشرح > عتيبي >> لايزعلون علينا

ونعم فيكم كلكم

,

الحين ننسخ الشكل السابق من صندوق الليرات ,

طريقة النسخ لاحظ من هنا






لاحظ الحين صار عندنا ليرين متشابهه ,




,

الحين ظروري نغير لونه

,

طريقة تغيير اللون راجع الدرس فوق حبتين ,

,,


لاحظ الحين كيف صار الملف حقنا ,





طبعا الان التلاعب يصير بالشكل الجديد اللي نسخناه

لابد اننا نصغرة حبتين عشان يطلع القائمة احترافيه ,


لاحظ كيف !!







,

استاذ سعود سلامات والله لو اننا ايش ؟!

كيف طبقتها ذي !؟


فديتك اضغط هنا عشان تحمل شرح العملية فيديو ,


___________



الان نحذف لير الخلفيه البيظاء اللير المقفل ,

ظروري نحذفة لان مانحتاجة ,




,


الحين نسوي مستقيم بسيط بنفس القائمة عشان بيكون هناك اسم القائمة مستقبلا


ادراج شكل من هنا




,


لاحظ كيف صار معاي , حاول تسوي مثلي وغير لونه الى اللون اللي تبيه





الان ندمج الليرات مع بعض

بالضغط على

shift + ctrl + e



لو تلاحظ صندوق الليرات صار لير واحد ,

,,


الان مابقى الا خطوات بسيطة

نروح بأداة التول لـ تقطيع القائمة ثلاث قطع فقط



انا سويت لكم شرح فيديو افضل لكي التقطيع والتحديد يجي تمام , وتصير عندك خلفية مرة وحدة


طبعا التقطيع بيكون ثلاث قطع تسهيلا لكم كـ مبتدئين ,

قطعه ( فوق + وسط + تحت )



اضغط هنا لتحميل الفيديو


,


الان احفظ الملف كله بصيغة gif

طريقة الحفظ

من file ثم save for web وحط اسمه رقم 1

طبعا احفظه بنفس المجلد حقنا اللي سويناه اول ,



وهو لحاله راح يتقطع ,


,,,’’,,,


الان نروح الى file ونفتح ملف خارجي

يعني من file ثم open

ثم اذهب الى المجلد الخاص فيك بالنسبه لي انا az

بعدين ادخل على مجلد images

ثم تختار القطعة العلوية ,





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

يعني مافي امل نفتح القفل ,


روح طال عمرك بإداة التحديد ,





ثم حدد على الشكل كامل




بعد ماتحدد

اضغط

ctrl و حرف الــــc يعني حرف ؤ بالعربي ,


بعدين ملف جديد

file ثم new

بدون ماتغير المقاسات , على طول

وبعد مايفتح الملف اضغط ctrl ثم حرف z



وراح القطعه تصير بالملف الجديد ,

الان احذف اللير المقفل من الليرات

وراح تبقى القطعه لحالها ,



والقطعه السابقه اللي مقفلها الجيزاني احذفها نهائيا ,


طيب ,

الحين فديتك يانظر عيني

اكتب اسم القوائم


لاحظ وش قصدي الحين



...

طبعا احفظها بمجلد az وليس داخل مجلد images

احفظها داخل مجلد az وضع اسمها رقم 1
طريقة الحفظ

من file ثم save for web


.............


ثم راجع للفوتوشوب واحذف اسعاري وضعط مثلا اعمالي

وهكذا , للي تبيه

واحفظ وضع رقم 2

ثم 3

بالتتالي ,


,,,,


الان تقريبا خلصنا جزء كبير من الفوتوشوب ,

نروح ننتقل الى برنامج الفرونت بيج ,












الان ندرج جدول للهيدر ,






بعد مايدرج الجدول ,

يمين الماوس داخل الجدول يمين الماوس ثم خصائص الجدول


وطبق التالي ,






, راح يصبح الجدول منقط ,


الان ادرج صورة الهيدر داخل الجدول








راح تصبح كذا بعد الادراج




...................


الان فديتك نفس الشي ندرج جدول ولكن هالمرة من ثلاث خلايا تحت بعض

لاحظ

اهم شي ضع الماوس اسفل الهيدر عشان الجدول يصير تحت







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






الان ندرج الصورة العليـــــا اللي حطيت اسمها اسعاري

ثم السفلىآ



طبعا ضع الماوس داخل الخليه العليـــــا ثم من ادراج الصور ادرج الصورة العليــــــــا


ثم ضع الماوس داخل الخليه السفلىآ وادرج الصورة السفلية تلاقيها داخل مجلد images الموجود داخل مجلد az تلاقي اسمها h_03


لاحظ كيف الحين

حاول تسوي لهم توسيط , تضغط على الصورة وتوسيط

ونفس الشي للي تحت ,







الان يمين الماوس على الخليه التي بالوسط

ثم اختار خصائص الخلية


ثم طبق التالي








لو تلاحظ الحين صارت القائمة تمام ,


......................



الحين طال عمرك نروح ونسوي جدول اخر ولكن هالمره يتكون من 6 خلايا ,



حاول ان يكون زر الماوس اسفل الجدول القائمة

عشان يكون تحته ,


ونفس الطريقة يمين الماوس على الجدول وطبق التالي :






الان , اذهب الى الصندوق القديم اللي سويناه حق القائمة


وحددة كله وسوي له قص





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

ثم الخليه اللي يسار ثم اللي تحتها


الخليتين التي بالوسط العليا والسفلى لاتسوي فيهم شي ,


لاحظ كيف تطبيقي





,,


الان خليك ذكي


القوائم اللي كتبتها الاسعار اعمالنا استبدلها


هي الحين كلها >> اسعاري


خل وحده اسعاري والباقي استبدلها ,


امسح الموجوده واضف صورة بدل منها

وهكذا








,,




الان ان شاء الله مابقى شي ,


نضع الماوس داخل القائمة الاولى







ثم ندرج جدول فيه ثلاث خلايا


طبعه لازم يكون داخل الجدول ,


يمين الماوس على الجدول ثم خصائص الجدول







طبعا انا حطيت العرض 160 , انت شوف اذا كبيره صغر شوي

واضا صغير كبر العرض شوي , بس اهم شي لايطلع برا حدود التصميم ,



ومن ثم طبق الشرح هذا على جميع القوائم الاربعه



انا طبقتها على ( التصميم + الاحصائيات + اعمالنا + اسعاري )



لاحظ الان كيف صار ,






الان اكتب النصوص داخل القوائم

شوف وش قصدي







طبعا بإمكانك تظليل النصوص وتنسيقها

لون وغيره من التنسيقات , مثل توسيط حرف b تغير اللون وهكذا




,,

لو ماكفتك الـ ثلاث خلايا

ضع الماوس ع الخليه الاخيره

ثم اضغط caps lock >> زر تلاقيه بالكيبورد يسار اسفل tap تقريبا


وراح تفتح خليه جديده


ولو تبي تسترجع سوي تراجع , وهكذا ,



الان انا بعد ماخلصت من جميع الخلايا لاحظ الان ,

سويت معاينه من تحت


وشوف








طبعا الاحصائيات وابحث عني مسحت الجداول اللي داخله وكتبت قريبا

بعدين اعطيكم اكواد خاصه بعداد الزوار والبحث ,

,,



نرجع الى الفوتوشوب


ونسوي قائمة كبيرة

وتسمى قائمة العرض



تفس هذي





ولكن عريضه شوي



نرجع لتصميمنا الاول هذا







ثم نضغط عليه ctrl و حرف z

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








حدد عليه كلللله








حيث يصبح هكذا








اضغط هنا لتطبيق الدرس فيديو , لانه شرح يبي له تركيز


,

دمج الليرات طبق كذا



shift و ctrl و حرف e




بعدين قطعها نفس طريقة التقطيع الاولى , بالفيديو المرفق سبق

لكن يالله عشان خاطر عنونكم بشرح لكم من جديد ,



اضغط هنــــــــــــــــــا




طبعا بعد ماتحدد بالتول

تذهب الى مجلد az

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


تحط اسم المجلد gg

طبعا هالمجلد gg يكون داخل مجلد az


وتحفظ فيه الملف


طريقة الحفظ

من file ثم save for web