تصميم استايل رباعي الاطراف

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

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

اخواني واخواتي .... تحيه طيبه وبعد

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

الان ننطلق في هذا الدرس بعمل تصميم للهيدر فقط ويجب ان نحفظ العمل في مجلد
مستقل للرجوع اليه فيما بعد في الدروس القادمه

يجب حفظ العمل على صيغتين وهي Psd للرجوع الى اي تعديل وصيغة jpg للطبيق

نقول بسم الله وننظر للدرس

قم بفتح عمل جديد


والمقاس كما في الصوره


بيكون بهذا الشكل


الان انشئ لونين على حسب اختيارك ويكون لون خفيف والثاني اثقل منه

طبعا الخفيف فوق والثقيل تحت


اصبغ الخلفيه باللون الخفيف مثل هذا الشكل


اللحين نضغط على اداة تدرج اللون


ونختار من فوق اللي محدد باللون الاحمر


اللحين نضغط على الونيين المدموجين


واللحين الصور بتشرح نفسها ولازم نركز فيها


اللحين من فوق نختار التالي للتخطيط الدقيق


مثل مانشوف كيف صار التخطيط


افتح لير جديد


اللحين ناخذ اداة التحديد الخاص ونحدد بشكل مناسب من الاطراف


شوف الشكل بالتحديد


اللحين نستعمل اداة التدرج الخاص باللون


ومازال التحديد موجود نسحب بالتدرج اللون من فوق الى تحت


اللحين نلغي التحديد اضغط Ctrl+D

ومن فوق نسوي مثل اللي في الصوره


اللحين نروح على لير اللون المتدرج ونضغط من الاسفل حرف f ومن ثم كلمة
stroke لكي نضع له تحديد خارجي


وهذي قيم التحديد وانتبه للون المحدد لابد ان يكون متوافق مع الالوان
المختاره من قبل ليكون الشكل مناسب


ثم نسوي دبل للير اللي اشتغلنا عليه


ثم نضغط Ctrl+T ليتم تحديد الشكل وسحبه الى اعلى بحيث يصبح عمود مناسب
الشكل


ادبل اللير الخاص بالعمود ليصبح لدينا عمود في الاعلى وعمود في الاسفل


اللحين العمودين نضغط على كل واحد فيهم Ctrl+G بحيث تدخل في القالب الاساسي
الام


وهذا شكل الليران المدخله في القالب الاساسي


اللحين نروح للير الام اللي محدد باللون الاحمر ونضغط على حرف F ثم DROP
SHOW لاعطائه ضل مناسب


وهذي قيم الظل


وهذا الهيدر اصبح جاهز للاضافات من صور ومن كتابه ... الخ

بسم الله الرحمن الرحيم
والان ننطلق في اسفل المنتدى لكي يتزل الشكل ونصمم
[الجزء السفلي للاستايل -تصميم الـfooter ]

جميع الخطوات التي ذكرناه في تصميم الجزء العلوي تنطبق تماماً على الجزء
السفلي ماعدا المقاس بالطول فيستحسن ان يكون اصغر بنصف طول الجزء العلوي
نتابع الصور

نقوم بفتح عمل جديد
العرض 780 والطول 100
طبعا الدرس السابق للجزء العلوي كان الطول 200

ونغطي الطبقه الاولى باللون الذي تكلمنا عنه وهو اخف درجه من اللونين الذين
اخترتهما

نفتح لير جديد

ثم نقوم بعمل تخطيط للعمل كما هو موضح بالصوره
ونضغط على الاختصار Ctrl+A

مثل ما تشاهد بالصوره

الان نستخدم التدرج اللوني

نختار اللي محدد باللون الاحمر من اعلى الفوتوشوب

نسحب من فوق لتحت

الان نزيل التحديد بالضغط على الاختصار Ctrl+D

الان نحدد اللير ذات اللون المدرج وذلك بالضغط على حرف f ومنها stroke

نختار القيم التي تناسبنا والافضل مثل الموجود مع مراعاة تغيير اللون ثم
نعتمد

الان نفس الطبقه كررها

ثم قم بتحديدها واضغطها بالسحب الى الاسفل

كرر الطبقه التي سحبتها الى الاسفل وضع مثلها في الاعلى

لاتنسى هذه الصوره التي شرحتها في الدرس السابق
الخاصه بالعمودين نضغط على كل واحد فيهم Ctrl+G بحيث تدخل في القالب
الاساسي الام

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

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

طبعاً التقطيع يتم على ثلاث اجزاء
وشئ؟؟؟
قطعه يمين وقطعه يسار وقطعه في النص
هذي اللي في النص هي صوره ولكنها تعتبر خلفيه لعملية التمدد
وراح نشرح تركيبها وتمددها باي مقاس عشان ضبط

طبعا فيه ناس عجزانه وماتبي التمدد ويخلون البنر وصله وحده
نقول ايه صح تقدر
لكن لو واحد تفصح شاشته اكبر من 800 راح يشوف البنر صغير وفي النص وشكله
بايخ

طيب حبايب قلبي نبدى الشرح لانطولها وهي قصيره

نقول بسم الله

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

ومنه نضغط على كلمة file من اعلى الفوتوشوب ونجلب العمل المراد تقطيعه اما
الهخيدر او الفوتر
ونبدى في الهيدر
جلبناه وحطيناه في سطح الفوتوشوب


نختار اداة التحديد كما هو موضح بالشكل


ونحدد الجزء الايسر
بس انتبهوا الله يرضى عليكم
لو واحد مصمم بنر وحاط في الجهه اللي في اليسار اللي حنا جالسين نحدد صوره
وشكلها طويل حبتين فحاولوا تقصونها من نهاية الصوره عشان مايخرب الشكل


خلاص حددنا
طيب نضغط على كلاً من Ctrl+x
ونقطع الصوره


على طول اضغط على كلمة file من اعلى الفوتوشوب واضغط على كلمة new
وبرنامج الفوتوشوب ماقصر.. الشي اللي قصيته بعد التحديد ومن تضغط new راح
يعطيك المقاسات بالتحديد ومايحتاج تسوي مقاسات جديده


ضغطنا ok ثم نضغط Ctrl+v راح يلتصق العمل مثل مانشوف وبعدها احفظها باي اسم
تحب ولو تنشئ مجلد جديد لها وتسميه هيدر راح اكون ممنون لك كثير عشان
ننشوفه على الهواء مباشره


اللحين نقص الجهه الثانيه (نحدد ونقص ونفتح فايل جديد ونلصق ونحفظ )


وبعد منطقة الوسط نحدد ونقص ونفتح فايل جديد ونلصق ونحفظ


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

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



وننطلق الان مع الشرح

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


ستشاهد هذه الصفحه


امسح مابها لتكون بهذا الشكل


الان نضغط على كلمة تصميم


اضغط بطرف الماوس الايمن لتظهر لك خصائص الصفحه وغير اتجاه الصفحه الى
اليمين

وننتقل لاعلى برنامج الفرونت بيج ونختار ادراج جدول ثلاث خانات فقط بالطول


نذهب الى الجدول ونضغط بطرف الماوس الايمن لتخرج لنا هذه القائمه


ونقوم بوضع هذه الاعدادات كما في الصوره بالضبط


فاصبح لدينا الجدول بهذا الشكل خانه علويه وخانه وسطيه وخانه سفليه


نضغط على الخانه رقم واحد وبطرف الاماوس الايمن لتخرج لنا قائمه ونختار
منها خصائص الخليه


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


والان بعد ضغط كلمة استعراض سوف تخرج لنا مربع وفيها مجلد صور الهيدر
والفوتر ومقطع كما تعلمناه
ونختار الصوره الوسطى اللي قلنا عنها خلفيه ونضغط فتح


اصبحت بهذا الشكل


نترك الخانه الوسطيهونتجه للخانه رقم ثلاثه (الفوتر)

ونضغط بطرف الماوس يمين ونختار خصائص الخليه... ونختار صوره الخلفيه.. وهي
الصوره الثالثه للفوتر الوسطيه وليست الجانبيه ونضغط


اللحين نتجه للجدول الاول (تذكروا معانا ثلاث جداول ورقمتها قبل شوي 1 و2
و3)


المهم رحنا للخانه العلويه او الجدول الاول ونونضغط عليه ثم نضغط بطرف
الماوس اليمين ونختار تقسيم الخلايا


راح يطلع لنا مربع صغير ونختار منه الاعمده ثلاثه


بيطلع الجدول او الخانه العلويه مقسمه بهذا الشكل


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


نختار اول خانه يمين ونحط الماوس عليها ونتجه للجه اللي في اعلى الفرونت
بيج ونختار ادراج صوره
(خلاص حنا انتهينا من شئ اسمه خلفيه واللي باقي الصور)


بمجرد الضغط على المربع الصغير حق ادراج الصوره راح يطلع لنا مربع الحوالي
التالي وشئ طبيعي طالما انك ضغطت بالماوس على اول خانه يمين فراح تختار
الصوره اللي في اليمين


اللحين نشوف بعد مانزلنا الصوره وكيف شكلها


لاهي اللي جت في مكانها الزين ولاهي جت في النص يعني خلف خلاف

نطنشها عادي ونروح للجدول الثالث اللي في اليسار ونضغط بالماوس عليه ونضغط
على ادراج صوره


ونختار الصوره اللي في اليسار للهيدر


ونشوف كيف صارت


يعني نقدر نقول تعدلت بشئ بسيط .. بس يبيلها

مالك الا شئ واحد (((((شد الاطراف))))))


اللحين خلصنا من شئ اسمه هيدر واللي باقي فوتر

نترك الجدول اللي في النص ونروح للجدول اللي تحت حق الفوتر

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


مايحتاج كم اقول اكيد 3


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


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


ادرجناها ولكن شكلها مش ولابد يعني يبيلها


نتركها وندرج الصوره اللي في اليسار


طبعاً تحط الماوس على اخر خانه بجدول اليسار وتدرج الصوره


اللحين وش تشوفون؟؟
كل شئ تمام الا مافي تنسيق


وعشان ننسق الجدول ككل
كل اللي ابيك تسويه شئ بسيط
تضغط على كل صوره يمين سواء في الهيدر او في الهيدر


ومن اعلى الفرونت بيج تعطيها محاذاه لليمين


وكذلك اي صوره يسار تضغط عليها وتعطيها محاذاه لليسار


وهذا الاستايل الرباعي (اربع صور) تم الانتهاء منه وبالتوفيق


وهذا شكل الاستايل بعد النهائي


انتهت الخطوة الرابعة

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



ننطلق في الدرس

نقوم بسم الله

مثل مانشوف هالصوره هي اللي اخر شئ وقفنا عليه في التقطيع والتقسيم
بالفرونت بيج
ماعليكم من الاضافات اللي حطيتها
مثل مايقال كحل عين والسلام
طبعا هذي الصوره لازم نقسمها قسمين
وتقسيمها بتركيز بسيط
راح يكون الجزء العلوي لاعلى المنتدى والجزء السفلي لاسفل المنتدى ولكن
باسلوب تقني


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


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


واوتماتيك بتلقى الماوس متربع في النص ويقول يالبيه


اللحين وش نسوي ؟

على طول نصفنا ... نروح تحت من اسفل الفرونت بيج ونختار تعليمات برمجيه


راح نشوف مثل مافي الصوره
(بنشوف ان حنا من يوم اعطيناه تنصيف الا ولقينا كلمة center و راح نشوف
الماوس )


طيب الان نبي نعرف وش التاليه مع هالخرابيط

الزبده في هذا السطر


<p align="center"> </td>



فمن <p align="center"> الى اعلى نقطه في الفرونت بيج هذي للهيدر

ومابعد </td> الى اخر نقطه في الفرونت بيج للفوتر


اللحين للي ماوضحت له

اللحين بتوضح له اكثر


شوفوا هالصوره وهي اللي بتعلمكم وين الدرب السنع

اللي محدد باللون الاحمر ولون اضائته اخضر فاتح للهيدر

واللي محدد بالاحمر ولون اضائته للفوتر


انتيهنا كذا

يالله نركب هالجزئين في المنتدى

نروح للمنتدى ونضغط على رابط لوحة التحكم للمشرف العام

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

حيث xxxxxxx هو اسم موقعك

انتقلنا للوحة المنتدى ... راح نشوف على اليمين

ستايلات & القوالب

نختار منها :

Style Manager


راح نشوف على اليسار الاستايلات
كما في الصوره الجايه وطبعاً انا بحط شغلي على أستايل ::vBulletin:: لانه
خاص بالتجارب
وراح يكون لكم انتم بس ونطبق عليه حتى نخرج كلنا باستايل مميز باذن الله

من قدام الاستايل اضغط على كلمة اذهب


راح تفتح معاك مثل مافي الصوره
اللي محدد باللون الاحمر وخلفيته اخضر فاتح هو الهيدر
واللي اسفل هو الفوتر ومحدد بالاحمر والخلفيه صفراء


اللحين بنقصها نصين عشان يوضح الشرح اكثر

ناخذ الهيدر = header


ونحذف كل مافيه ماعدا



$spacer_open

$_phpinclude_output




اللحين نروح للفرونت بيج ومثل ماقلت لكم ان حنا قسمناه نصفين


نروح ونحطه فوق

$spacer_open

$_phpinclude_output


بهذا الشكل


ونروح الى الفوتر

وندور على اخر كلمه فيه

يعني اخر شئ في الفوتر وش مكتوب

اكيد

</script>


نروح ننسخ اللي في الفرونت بيج وناخذ القسم السفلي اللي تحت </td>


وننسخ كل مافي الصوره السابقه ونحطها بعد كلمة </script> بهذا الشكل


انت اللحين خلصت اضافات صح !

طيب انزل اسفل شئ في نفس صفحة الهيدر والفوتر .. يعني مره تحت اخر شئ تشوفه
وضغط حفظ


وانتهى الدرس



ولنا تكمله على التالي :

تناسق اللوان المنتدى + حفر المنتدى + خطوط المنتدى

بسم الله الرحمن الرحيم
درس اليوم هو تغيير جميع الالوان بمايتوافق مع لون الهيدر والفوتر
نبدى في تلوين الجسم
ندخل على لوحة تحكم المنتدى
ومنها ننتقل الى ستايلات & القوالب
ونختارمنها : Style Manager


سوف تفتح صفحه على اليسار وفيها جميع الاستايلات ونختار الاستايل الذي نقوم
عليه بعمل المتغيرات
الان نقوم بالضغط على اذهب


وشو المطلوب منا بعد ماخلصنا الهيدر والفوتر وركبناها ؟
اللي نبي نسويه هو تلوين الخلفيه
فبعد ان ضغطنا على كلمة اذهب
نروح وندور على المتغير Body
نشوف الصوره اللي محدد باللون الاحمر هو المطلوب


وشلون نخلي لون الخلفيه مطابق للهيدر والفوتر ويكون المنتدى منسق؟؟

الحل الوحيد نعمل برنت اسكنر
(نروح للمنتدى واما نطلع للهيدر او ننزل للفوتر ونضغط من الكي بورد على
كلمة Print Screen)

ورحنا للفوتوشوب ونضغط على كلمة Fill ونفتح عمل جديد وراح يطلع لنا
مقاسات الصفحه اللي سوينا لها تصوير بـ Print Screen
طيب انفتح لنا العمل الجديد وبالمقاسات المصوره من الشاشه (وكلاً على حسب
قياس شاشته)
نلصق التصوير بالضغط على الكي بورد (Ctrl + V)

مثل مانا سويت (نشوف الصوره)


اللحين لصقنا العمل (طيب وشو اللون اللي راح نختاره؟)

طبعاً نشوف وش راح يناسب الصفحه من حيث التناسق .. فراح يكون مثل مافي
الصوره
شوف اللي محاط باللون الاحمر


طيب كيف يتم اختيار هاللون وباي اداة من الفوتوشوب ؟

نروح للادوات ونفتح على علبة الالوان

بالضغط على هذه الاداه


اللحين راح يفتح لنا مربع او علبة الالوان


في نفس اللحظه نروح للصوره ومربع الالوان مفتوح (مهمه)


نمر بالماوس على المنطقه اللي ابغى اخذ منها اللون

فراح تطلع لك اداة تساعدك بالمهمه وهي هذه الاداه


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

شوف الصوره


نروح نضلل اللون و وبطرف الماوس الايمن نضغط
راح يطلع لنا مربع حوار (ننسخه )


نسخنا اللون زين

نروح نلصقه الان في خلفية المنتدى بس مانمسح علامة المربع (#) واللي
بيمسحها الله يعينها يكتبها
بس ابي اريحكم
لصقنا اللون ... طيب وين save css ... اضغطه عليها من غير ماتشاور

مثل كذا


روح حدث صفحة المنتدى وشوف صار شئ ؟؟؟

شاهد الصوره بعد التغيير ... يعني السالفه ماهي قصيره ... يبيلها بعد


نروح اللحين للمتغير الثاني اللي هو
:: Page Background ::
وهذا للتلوين الداخلي (مثل مافهمتك في دروس الاعدادات)


طبعاً ان ثقلنا اللون فراح يتشوه الاستايل وان خففناه فراح ماله اثر وان
طابقناه مع خلفية المنتدى فراح يمشي تمام

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

انك تحط في مربع Extra CSS Attributes هذا الامر

border: 1px solid #0B198C;



مع تغيير اللون هذا 0B198C بما يناسبك

بحيث يكون بين الجزء الخاجري والداخلي حد لتفرقة اللون

بالنسبه لي فانا طابقت نفس لون الخلفيه

نشوف الصوره


نروح اللحين للمتغير الثالث اللي هو
:: <td>, <th>, <p>, <li>::
وهذا للتلوين مناطق جزئيه داخله بالجداول
ومثل ماهو موضوع بالصوره انصح بعدم استخدامه


نجي للمتغير الرابع اللي هو

::Table Border::

التحديد الكلي للمنتدي
يوجد بهذا المتغير تحديد داخلي وتحديد خارجي


لمشاهدة التحديد في المنتدى بعد التكبير


وعشانك مسوي استايل وش كبره وش عرضه

فلابد تتماشى مع التحديد اللي بديت منه

وعشان تعرف درجه التحديد

تروح تاخذ اي جزء في المنتدى

عندك يالفوتر او الهيدر وتعمل تصوير مثل ماوضحت باول الدرس

وتلصقه بالفوتوشوب

وتاخذ الدرجه مثل كذا


تاخذ درجه اللون وتحطها في المتغير

واذا حبيت وهذا راجع لك عشان التنسيق انك تمسح التحديد الخارجي ولون الخط
لان مالها داعي

فالتحديد الخارجي يسبب تفخيم ليس جيد والخط لا وجود له


والان نكبر التحديد بعد الاعتماد من الكنترول


نروح اللحين للمتغير الخامس اللي هو
:: Category Strips ::
وهذا خاص بلون الخلفيه اللي موجوده تحت مسميات الاقسام
نشوف الصوره


وهذا شكلها بالمنتدى




فعندك في المتغير هذا الكود

#5C7099 url(images/gradients/gradient_thead.gif) repeat-x top left


معناته لازم تصمم خلفيه عرضها لايهم بس اهم شئ الطول يكون مابين 28 الى 30
بيكسل

وانا افضل 30

واللحين صممت انا هذي


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

وانا رفعتها على مجلد الصور الخاص بهذا الاستايل واسم الاستايل هذا test
وسميت الصوره

body

تعالوا نشوف كيف وضعها بالكود

#5C7099 url(images/test/body.jpg) repeat-x top left


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

لازم نغيره بحيث يتوافق مع لون الاستايل

وشو لون الاستايل الرئيسي ؟

اكيد الاصفر

طيب ناخذ من درجاته

وانا اخذت هاللون EEDFA1

طيب ننسخ هاللون ونحطه في الكود ويصبح معنا بالشكل هذا

#EEDFA1 url(images/test/body.jpg) repeat-x top left



ويصبح خلفيه الاقسام بهذا الشكل


نروح اللحين للمتغير السادس اللي هو
:: Table Header::
وهذا خاص بلون الأرضية اللي موجوده تحت مسميات المنتدى + المواضيع
والمشاركات والمراقبين


وهذا شكلها بالمنتدى


مثل ماوضحت في الرد السابق

يوجد الكود في الأرضية وهذي الأرضية لابد تتناسق مع لون المنتدى

#5C7099 url(images/gradients/gradient_thead.gif) repeat-x top left


من الافضل تنسخ الكود اللي في المتغير الخامس

:: Category Strips ::

اللي هو هذا الكود

#EEDFA1 url(images/test/body.jpg) repeat-x top left


وتريح نفسك

لاحظ المنتدى الان بعد التغيير


الان المتغير السابع
وهو Table Footer القسم السفلي للمنتدى
وهو خاص بلون الارضيه الموجوده في جزء محدد اسفل المنتدى ونشاهد الصوره انه
بلون سماوي على موف


ولمشاهدة المتغير بيكون بهذا الشكل


اللحين نبي نوحد الخلفيه بدل ماهي سماويه نخليها صفراء مثل خلفيه المنتدى


نروح ناخذ درجه لون خلفيه المنتدى من المتغير Body

ونحطها في المربع الخاص بالارضيه


نشاهد التغير كيف صار


اللحين نتطرق للمتغيرين الثامن والتاسع المهمين في المنتدى وهما
First Alternating Color


Second Alternating Color


وموقعهما في المنتدى


هذا كيف ناخذ اللوانها

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

ونشوف هنا كيف اخذنا لونينن متدرجه من لون خلفيه المنتدى

هذا رقم واحد


هذا رقم اثنين


وبعد الاعتماد راح نشوف كيف تظهر معانا


للمعلوميه هذان المتعيران راح تغير اشياء كثيره في المنتدى

مثل المواضيع والردود والاقسام .. الخ

---------------------