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


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


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


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


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



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

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

,


مثال ع الدرس

www.ss2s.net/1.htm

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

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

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


,


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

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

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

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


,,


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


,

http://www.ss2s.net/2012/4/1.gif

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

اوما حبيبتي http://www.ss2s.net/vb/images/smilies/d2/040.gif ماعليه عفويه http://www.ss2s.net/vb/images/smilies/confused.gif

, سامحوني بنات http://www.ss2s.net/vb/images/smilies/frown.gif

,

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

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

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

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

,

ثم
التركيز ,



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

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

مو تقول سعود نسيت , http://www.ss2s.net/vb/images/smilies/d2/009.gif



انت يالغالي ويالغاليه سووا مثلي , عشان الانجاز بعدين احترفوا براحتكم http://www.ss2s.net/vb/images/smilies/d2/k.gif




,

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

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

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

,

وطلع معاي كذا

http://www.ss2s.net/2012/4/2.gif



,

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

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

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

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


,

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

طريقة الحفظ

من file ثم save for web
,,

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

طيب اسعل , قصدي اسال !!http://www.ss2s.net/vb/images/smilies/d2/k.gif


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

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

,,,


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

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

ونسوي قوائم ,


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

http://www.ss2s.net/2012/4/3.gif

,


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

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

http://www.ss2s.net/2012/4/4.gif


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

لاحظ كيف

http://www.ss2s.net/2012/4/5.gif


,

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

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

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

قصدي كذا لاحظ

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

http://www.ss2s.net/2012/4/7.gif

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

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





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

http://www.ss2s.net/2012/4/6.gif

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



http://www.ss2s.net/2012/4/9.gif


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

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

ونعم فيكم http://www.ss2s.net/vb/images/smilies/d2/040.gif

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

ونعم فيكم كلكم http://www.ss2s.net/vb/images/smilies/s/004.gif

,

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

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


http://www.ss2s.net/2012/4/10.gif



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

http://www.ss2s.net/2012/4/11.gif


,

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

,

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

,,


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

http://www.ss2s.net/2012/4/12.gif



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

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


لاحظ كيف !!


http://www.ss2s.net/2012/4/13.gif




,

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

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


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


___________



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

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

http://www.ss2s.net/2012/4/14.gif


,


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


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

http://www.ss2s.net/2012/4/15.gif


,


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


http://www.ss2s.net/2012/4/16.gif


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

بالضغط على

shift + ctrl + e



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

,,


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

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

http://www.ss2s.net/2012/4/17.gif

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


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

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



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


,


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

طريقة الحفظ

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

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



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


,,,’’,,,


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

يعني من file ثم open

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

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

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


http://www.ss2s.net/2012/4/18.gif


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

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


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

http://www.ss2s.net/2012/4/20.gif



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

http://www.ss2s.net/2012/4/21.gif


بعد ماتحدد

اضغط

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


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

file ثم new

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

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



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

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

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



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


طيب ,

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

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


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

http://www.ss2s.net/2012/4/22.gif

...

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

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

من file ثم save for web


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


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

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

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

ثم 3

بالتتالي ,


,,,,


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

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

http://www.ss2s.net/2012/1/1.gif




http://www.ss2s.net/2012/1/2.gif





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


http://www.ss2s.net/2012/4/23.gif



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

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


وطبق التالي ,


http://www.ss2s.net/2012/4/24.gif



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


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



http://www.ss2s.net/2012/4/25.gif




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


http://www.ss2s.net/2012/4/26.gif

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


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

لاحظ

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


http://www.ss2s.net/2012/4/27.gif




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


http://www.ss2s.net/2012/4/28.gif



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

ثم السفلىآ



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


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


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

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

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



http://www.ss2s.net/2012/4/29.gif



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

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


ثم طبق التالي



http://www.ss2s.net/2012/4/30.gif




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


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



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



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

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


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


http://www.ss2s.net/2012/4/24.gif



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


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


http://www.ss2s.net/2012/4/31.gif


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

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


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


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


http://www.ss2s.net/2012/4/32.gif


,,


الان خليك ذكي


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


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


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


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

وهكذا



http://www.ss2s.net/2012/4/33.gif




,,




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


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




http://www.ss2s.net/2012/4/34.gif


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


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


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



http://www.ss2s.net/2012/4/35.gif



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

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



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



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



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


http://www.ss2s.net/2012/4/36.gif



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

شوف وش قصدي


http://www.ss2s.net/2012/4/37.gif




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

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




,,

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

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

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


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


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



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

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


وشوف





http://www.ss2s.net/2012/4/38.gif


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

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

,,



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


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

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



تفس هذي


http://www.ss2s.net/2012/4/7.gif


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



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



http://www.ss2s.net/2012/4/39.gif



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

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




http://www.ss2s.net/2012/4/40.gif



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



http://www.ss2s.net/2012/4/41.gif




حيث يصبح هكذا



http://www.ss2s.net/2012/4/42.gif




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


,

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



shift و ctrl و حرف e




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

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



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




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

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

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


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

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


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


طريقة الحفظ

من file ثم save for web