شرح تصميم استايل vB3 من الصفر حتى الاحتراف ..

شرح تصميم استايل vB3 من الصفر حتى الاحتراف ..





:: متطلبات الدرس ::


اول شىء لازم يكون عندك استعداد تتعلم وتبذل بعض الجهد ولا تعتمد على الاخرين

ثانى شىء لازم تعمل فنجان قهوة لزوم الشغل


يلزمنا برنامج الفوتوشوف

للتحميل




:: برنامج الفرونت بيج 2003 ::

للتحميل








نبدأ الشرح على بركة الله


نروح للفوتوشوب
file - new
777 × 444
ابيض





نعمل لير جديد






نحدد مساحة للهيدر ونطليها باي لون









اضغط pattern overly





حدد الباترن اللي بدك اياه واضغط ok

هنا مجموعة باترن روعة






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




ونكرر الخطوات السابقة لكن بباترن بيختلف ونعمل شوية تأثيرات





نعمل نسخ للخط اللي فوق الهيدر ونحط واحد تحته
كما في الصورة ..





نكرر نفس الخطوات على الفوتر
:: النتيجة ::




:: تقطيع الاستايل ::


شرح التقطيع بالفيديو

للتحميل





اختار اداة التقطيع كما بالصورة





ونقطع الهيدر كالتالي






تقطيع الفوتر





:: حفظ الاستايل ::

file - save for web





save
نكتب اسم الاستايل ونساوي حفظ


بعد حفظ الاستايل بالمكان المناسب نروح نلاقي اسم المجلد images نغيره لاسم الاستايل اللي سميناه


:: اعتماد الاستايل باستخدام الفرونت بيج ::

نفتح الفرونت بيج ..







نروح ع تعليمات برمجية
نحدد كل الكود .. ونحدفه








نعمل جدول 3 × 3





نضغط بالزر الايمن ع الجدول




ونضغط خصائص الجدول





نطبق الخيارات كالتالي






نحدد اول سطر في الجدول
ونضغط بالزر اليمين خصائص الخلية



وروح ع مجلد الصور واختار صورة رقم 3 ..







ثم نروح على اخر سطر ونكرر الخطوات لكن نختار صورة رقم 9



نضغط ع السطر الاول بالزر اليمين - تقسيم الخلايا ..







ثم السطر الاخير وتقسيم الخلايا - 3


نضغط ع صورة



وفي اول خلية ع اليمين في السطر الاول نختار من مجلد الصور صورة رقم 5 واللي تليها 4 واللي تليها 3 ... لين صورة 1 ..

كما في الصورة





ونكرر الخطوات ع الفوتر ، ونختار صور 11- 10 - 9 - 8 - 7





نروح لتعليمات برمجية ، ونحدد رابط صورة من الجهاز كما هو موضح





نضغط بالزر اليمين استبدال




ونعمل استبدال للكل بفراغ




هلا نروح ونرفع داخل مجلد vb مجلد الصور اللي حفظناه بتاع الاستايل






هلا نروح للوحة التحكم
الاستايلات والقوالب - التحكم بالاستايلات - اضافة استايل جديد



نسمي الاستايل ونساوي حفظ



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




ونحدف الكلام اللي فوق spacer_open




ونرجع للفرونت بيج ونحدد كما في الصورة





ونلصقه فوق spacer_open





هلا نرجع للفرونت بيج ونحدد كما في الصورة



ووننزل تحت في القوالب الشائعة ع الفوتر وننزل ع الاخير تحت script ونلصقه




:: CSS ::





نطبق الخيارات التالية
في ال CSS راح يكون الشغل ع كيفك انت يعني كيف بدك استايلك بتساوي وعندك الخيارات وطبق عليها ..





نروح لمتغيرات الستايل




لتغيير حجم او تباعد الاستايل






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

شكرا جزيلا على هذا الشرح الرائع

تسلم هالايادي