تابع شرح: تصميم موقع احترافي بالفوتوشوب - وكيفية التعامل مع css +تصميم الايقونات وتركيبهم في الستايل

دعونا ننطلق فى هذا الدرس بالتكلم عن css بشىء بسيط

طبعا انا ماراح اعقد الموضوع واجعل الموضوع كله برمجة,لانى اعلم تماما

ان الcss حتى تفهمه لازم تكون فاهمه بفكرة برمجية وليس تصميم, لان هذا بيسهل مليون مره سرعة التعديل على اى قالب

اولا ما معنىcss:

الcss تعنى Cascading Style Sheets اى بالعامى العربى الشكل الجمالى للصفحة

واقصد بالشكل الجمالى(الوان-خطوط-حدود جداول-جداول وابعاد -خلفيات......الخ)

لن اتكلم كثير عن معناها والاكثار من الكلام النظرى لان اللى يهمنى انك تعرف شىء عملى


اولا: اى قالب عند تركيبه على جملة , عندما تذهب للtemplate manager وتختار اى قالب

راح تجد فوق على اليسار edit css

فلنفرض اننا راح اشتغل على قالب ja purity مثل السابق

وخلونا نروح نشوف خيارات الcss فيه

شوف....




الحين لما نفتح راح تجد هالخيارات

وما يهمنا هو template.css

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


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


وانا راح اتكلم على عدة نقط مهمة راح تخليك تفهم الcss


1-اى ملف css راح تجد بداخله انه مجزء لاجزاء, ويكون لها عنوان,وكل جزء يوجد كود الcss الخاص به

مثال: شوف الصورة:




راح تلاحظ انه فوق الخط المنقط يوجد عنوان اسمه header

ويقصد به انه هذا الجزء خاص بالتعديل على منطقه الهيدر الخاصة بالقالب





ثانيا: توجد مصطلحات مهمه فى اى ملف css راح تقابله

منها:

background=الخلفية
body=الجسم
border=حدود الجدول او البلوك
font-size=حجم الخط
font-family=نوعية الخط


نأخذ مثال:




ده كود الخلفية فى اول ملف template.css

والمنطقة الخاصة به

راح تجدها كالاتى:



ثالثا: عندما تريد تغيير لون اى منقطة, فأنها لكل لون رقم معين

ولتعرف الرقم يشير لاى لون

افتح الفوتوشوب

بعدين اضغط على علامة اللون على اليسار

وشوف..........






رابعا: اكواد الcss تقسم لاجزاء كثيرة

مثلا راح تجد ان اول القالب يبدأ بسورس الbody اى جسم القالب

[IMG][/IMG]


بعدين فيه header

بعدين فيه main navigation ويقصد به القوائم الرئيسية

بعدين footer

<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<


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



ابيكم تحملون اي استايل مجاني اوووكي ؟؟

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

مجلد images

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

ومجلد statusicon

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

وبرضوا فيه ايقونات المواضيع الداخليه مشاركات جديده / لاتوجد مشاركات جديده

ومجلد buttons

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

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

مثل

icons

وفيه الابتسامات الافتراضيه

و misc

وفيه بعض الايقونات مثل ايقونة عيد الميلاد الي تظهر في الصفحة الرئيسيه

وعلامة الاسكايبي او الماسنجر

و rating

فيه نجوم التقييم حق المواضيع

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

والي يهمنا هني

هو مجلد

images

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

و statusicon

هذا راح نشتغل عليه في هذا الدرس

و buttons


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

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

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

عشان يكون اسماء المجلدات جاهزه عندكم

اول

شي نفتح الفوتوشوب

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

نفتح عمل جديد وناخذ ايقونة اضافة الرد من المجلد الي حملناه اوكي

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

صور الايقونات بعد التصميم




هذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 1280x800 وحجمها 108 كيلو بايت .



نسوي تحديد لكل ايقونة

ثم ملف + جديد

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

بعدين احنا

نصمم الشكل الي نبييه



هذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 1280x800 وحجمها 111 كيلو بايت .



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

بس حبيت اشرح لكم شرح توضيحي فقط


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

اوكي



هذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 1280x800 وحجمها 117 كيلو بايت .



ونحفظها بصيغة جيف في نفس المجلد الي حملت الاستايل منها ركزوا هني بهالنقطه

وتحط نفس اسم الايقونة الي اخذتها طبعا الي راح يحط الاسم عربي

ماراح تطلع له الايقونة ابد

نحطها بنفس بنفس اسم الايقونة انجلش ولما تسوون حفظ راح يقولك الايقونة

موجوده هل تريد الاستبدال ؟؟

اضغطوا نعم

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

ونطبق الشرح على كل ايقونات الي نبي نغيرها

وهي هذي حددتها لكم بالاحمر



هذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 1099x448 وحجمها 60 كيلو بايت .



هذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 1172x565 وحجمها 108 كيلو بايت .



هذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 1178x493 وحجمها 121 كيلو بايت .





بكذا خلصنا من تعديل وتصميم الايقونات الهامه في مجلد buttons


باقي لنا مجلد statusicon

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

لايحتوي مشاركات جديده الي في الصفحة الرئيسيه


مثال



هذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 1160x424 وحجمها 90 كيلو بايت .



هذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 1089x549 وحجمها 113 كيلو بايت .


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

وكل واحد يصمم الشكل الي يمشي مع استايله

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


بكذا خلصنا من تصميم الايقونات الهامه

راح ناخذ المجلدات الي عدلنا عليها ونسوي لها نسخ

ونروح نفتح مجلد الاستايل حقنا ونسوي لها لصق

راح يكون عندكم في المجلد حق الاستايل

3 مجلدات اوكي


الحين بقى آخر خطوه مهمه وكثير يعانون منها وخاصه لما يصممون الاستايل ويخلصون

لازم نعدل مسارات الايقونات عشان تظهر لنا في المنتدى

اول شي حملوا المجلد كله حق الاستايل الى الموقع

الي منتداه سيرفر شخصي يحمل المجلد من جهازه مسار مجلد سي مسار www ثم vb

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

الى مسار www/ vb

وبعد مانحمل المجلد

نروح على لوحة تحكم المنتدى

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

التحكم في الاستايلات

نختار الاستايل الي نشتغل عليه

اذهب

عند مساعدة مسار مجلد الصور/Image Paths


هذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 1103x520 وحجمها 112 كيلو بايت .



الي باللون الاحمر

هذا عدلت مساره

الى

lovee/buttons

lovee <<< اسم مجلد الاستايل

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


اووكي

وبكذا خلصنا

من درس تصميم الايقونات


وانشالله انه كان واضح وسهل عليكم


واي استفسار انا حاضره


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

وبكذا نكون خلصنا من الدوره
d]من حقك أن تسئل , ومن واجبي أن اجيب عليك ]


تمنياتي لكم بالتوفيق

وشكرا d]لكم ]

و... d]لكم ] احترامي

«°•.¸.•°°•.¸.•°»d]في حفظ الرحمن ]«°•.¸.•°°•.¸.•°»

لتحميل الدرس كامل [هووون]

ولكمــஓ♥ خالصــ ஓ♥ تحياتيــஓ♥