الدورة التدريبية لتصميم استايل احترافي ...اسهل واوضح 7 دروس في درس واحد !!!

[Mohannad]

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

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

كيف حالكم اخواني وأخواتي

نبتدي أخواني بأفتتاح الدورة التدريبية بهذا الدرس الرائع والسهل

وطبعاً كل شي واضح 100 % وبالصور

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

على هذا الرابط

http://www.kw80.com/vb/forumdisplay.php?f=61 (http://www.kw80.com/vb/forumdisplay.php?f=61)

وبسم الله نبدأ درسنا

::+:+:+:+::

الخطوة 1 : نفتح برنامج الفوتوشب وأنا أستخدم الفوتوشب السابع Adobe Photoshop 7.0 ME
http://www.kw80.com/up/uploads/71ec7dfdfe.gif (http://www.kw80.com/up/)

الخطوة 2 : نبدأ بفتح نافذة جديدة لتصميم الاستايل بقياسات :: العرض 777 :: الطول 650
http://www.kw80.com/up/uploads/332cfa6fb2.gif (http://www.kw80.com/up/)

الخطوة 3 : نختار الألوان الي تبي تصمم فيها الأستايل انا اخترت اللون الوردي
http://www.kw80.com/up/uploads/eabb72d2e5.gif (http://www.kw80.com/up/)

الخطوة 4 : نختار أداة رسم المربع لرسم العمود الجانبي
http://www.kw80.com/up/uploads/b7ae2d7376.gif (http://www.kw80.com/up/)

الخطوة 5 : نضغط ctrl + h لتظهر لنا الشبكة ومن ثم نرسم العمود على اخر مربعين من الشبكة
http://www.kw80.com/up/uploads/0713f00cfd.gif (http://www.kw80.com/up/)

الخطوة 6 : نروح لليرات ونضغط كليك يمين فوق لير العمود ونختار Blending Options
http://www.kw80.com/up/uploads/6ddf7c06f0.gif (http://www.kw80.com/up/)

الخطوة 7 : نضغط على Drop Shadow ونتأكد أنه ظهرت علامة صح على مربعه ونضع باقي الخيارات كما في الصوره
http://www.kw80.com/up/uploads/d776beb86c.gif (http://www.kw80.com/up/)

الخطوة 8 : نضغط على Inner Glow ونتأكد أنه ظهرت علامة صح على مربعه ونضع باقي الخيارات كما في الصوره
http://www.kw80.com/up/uploads/c499cb81c4.gif (http://www.kw80.com/up/)

الخطوة 9 : نضغط على Stroke ونتأكد أنه ظهرت علامة صح على مربعه ونضع باقي الخيارات كما في الصوره ونضغط موافق
http://www.kw80.com/up/uploads/1791ccb6d7.gif (http://www.kw80.com/up/)

الخطوة 10 : نبي نكرر العمود الحين علشان يصير عندنا عمودين نروح للير العمود ونضغط كليك يمين ونختار الكلمة الثالثه كما في الصوره
http://www.kw80.com/up/uploads/bd01833012.gif (http://www.kw80.com/up/)

الخطوة 11 : بعد الخطوه 10 راح يطلع لنا مربع نضغط على طول موافق مو لازم نغير شي
http://www.kw80.com/up/uploads/c213dcba1f.gif (http://www.kw80.com/up/)

الخطوة 12 : الحين بعد ماكررنا العمود نختار الأداة التاليه
http://www.kw80.com/up/uploads/ca75101a28.gif (http://www.kw80.com/up/)

الخطوة 13 : نحرك العمود المكرر إلى الجهة المقابله من التصميم والحين نشيل الشبكة بالضغط على ctrl + h ونشوف نتيجة الدرس
http://www.kw80.com/up/uploads/52c69e0393.gif (http://www.kw80.com/up/)

::+:+:+:+::

الحين خلصنا الدرس الاول وهو تصميم أعمدة استايل أحترافي :boxing:

وأحفظوا هذا العمل حتى الدرس القادم لنكمل التصميم http://www.traidnt.net/vb/images/smilies/nosweat.gif

والدرس القادم هو

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

وفي بالمرفقات ملف فيه الصور وعلى وكل صورة رقمها على رقم الخطوه مالتها وملف تصميم الاعمدة مفتوح PSD

وشكراً لكم ؛؛؛

[Mohannad]

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

كيف حالكم اخواني واخواتي

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

واليوم نكمل بالدرس الثاني

وهو شرح تصميم هيدر أحترافي للأستايل

وبسم الله نبدأ الشرح

::+:+:+:+::

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

الخطوه 1 : نختار أداة رسم المربع لنرسم الهيدر
http://www.m5zn.com/uploads/3870a9dd10.gif

الخطوة 2 : نضغط ctrl + h لنظهر الشبكة ؛؛؛ ونرسم مربعاً كما في الصوره ؛؛؛ 14 وحده بالطول
http://www.m5zn.com/uploads/d125b3f58d.gif

الخطوة 3 : ندخل على قائمة تنسيق اللير ؛؛ كليك يمين واختار كما في الصوره
http://www.m5zn.com/uploads/4db9aa336e.gif

الخطوة 4 ؛ 5 ؛ 6 : نضبط خصائص التنسيق كما بالصور التاليه
http://www.m5zn.com/uploads/e473a2d0b5.gif
http://www.m5zn.com/uploads/f9d6fed081.gif
http://www.m5zn.com/uploads/1ebbc50999.gif

الخطوة 7 ؛ 8 : نكرر لير الهيدر وذلك بالضغط على اللير كليك يمين وكما في الصوره وبعدها يظهر لك مربع لا تغير فيه شي فقط اضغط موافق
http://www.m5zn.com/uploads/8fd5b34576.gif
http://www.m5zn.com/uploads/9222943d81.gif

الخطوة 9 : ندخل إلى قائمة تنسيق اللير المكرر الثاني وذلك بالضغط على اللير كليك يمين وكما في الصوره
http://www.m5zn.com/uploads/86ce222c01.gif

الخطوة 10 : فقط نضيف إلى التنسيقات السابقه التنسيق التالي وهو تعبئة الخلفيه ومو شرط نفس الخلفيه إلى انا حاطها عادي اي تعبئه حلوه عندك وبعدها نضغط موافق
http://www.m5zn.com/uploads/52010f269f.gif

الخطوة 11 : والان نضغط على الاداة التاليه
http://www.m5zn.com/uploads/7235c39f07.gif

الخطوة 12 : نحرك لير الهيدر المكرر الثاني عشر درجات إلى الاعلى كما في الصوره فيظهر لنا شكل جميل
http://www.m5zn.com/uploads/d02ad7aa4b.gif

الخطوة 13 : نختار اداة كتابة النص ونضغط في المكان الي نبي نكتب فيه ونكتب الي نبيه
http://www.m5zn.com/uploads/09789d00f2.gif

الخطوة 14 : بعد ماكتبنا نضغط كليك يمين على لير النص ونختار كما في الصوره
http://www.m5zn.com/uploads/5184e2beb1.gif

الخطوة 15 ؛ 16 ؛ 17 ؛ 18 : ننسق اللير كما في الصور التاليه
http://www.m5zn.com/uploads/f441775621.gif
http://www.m5zn.com/uploads/401dda1eb4.gif
http://www.m5zn.com/uploads/8fec110b98.gif
http://www.m5zn.com/uploads/225c6a48c9.gif

الخطوة 19 : الان بعد تنسيق النص نكرره وذلك بالضغط على لير النص كليك يمين وكما في الصوره
http://www.m5zn.com/uploads/780d5b1909.gif

الخطوة 20 : بعد تكرار لير النص نحرك النص المكرر إلى مكان اسم الموقع وتكتب اسم موقعك وتكبر الخط طبعاً كما في الصور
http://www.m5zn.com/uploads/f06db674c4.gif


وبسسسسسسسسسسسسسس

::+:+:+:+::

والان احفظ العمل حتى نكمل في درسنا القادم وهو تصميم فوتر للأستايل

وانشالله انكم فهمتوا كل شي

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

http://www.kw80.com/vb/forumdisplay.php?f=61 (http://www.kw80.com/vb/forumdisplay.php?f=61)

وبالمرفقات ملف الصور فيه الصور للي ماتظهر لديه الصور وفيه أيضا ملف التصميم مفتوح

شكراً لكم ؛؛؛

[Mohannad]

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

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

كيف حالكم اخواني وأخواتي

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

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

واليوم انشالله الفوتر

وبسم الله نبدأ الدرس

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

ونكمل

::+:+:+:+::

الخطوة 1 : نختار اداة رسم المربع لرسم الفوتر
http://www.m5zn.com/uploads/fd6757abea.gif

الخطوة 2 : نرسم الفوتر على خمس وحده كما في الصوره من الشبكة
http://www.m5zn.com/uploads/3f12b697c5.gif

الخطوة 3 : نضغط على لير الفوتر كليك يمين و نختار Blending Options
http://www.m5zn.com/uploads/fa35ef3141.gif

الخطوة 4 ؛ 5 ؛ 6 : بعد مادخلنا على تنسيق اللير نضبط التنسيقات كما في الصور
http://www.m5zn.com/uploads/5ebd480da3.gif
http://www.m5zn.com/uploads/fafd822bd5.gif
http://www.m5zn.com/uploads/210f977ce4.gif

الخطوة 7 ؛ 8 : نكرر لير الفوتر بعد مانسقناه وسيظهر لنا مربع حوار نضغط موافق بدون تغيير اي شي
http://www.m5zn.com/uploads/4268326fc1.gif
http://www.m5zn.com/uploads/0281775e32.gif

الخطوة 9 : نضغط على لير الفوتر الي المكرر كليك يمين و نختار Blending Options
http://www.m5zn.com/uploads/aef30c6baa.gif

الخطوة 10 : طبعا اللير المكرر يكون منسق نفس اللير الاول وبس الحين نضيف تنسيق بعد على اللير المكرر كالتالي :
http://www.m5zn.com/uploads/04b3e519f6.gif

الخطوة 11 : نختار أداة التحريك
http://www.m5zn.com/uploads/fea65e9565.gif

الخطوة 12 : نحرك اللير المكرر إلى الاسفل 10 ضغطات بالكيبورد
http://www.m5zn.com/uploads/1f151645ac.gif

الخطوة 13 : نختار أداة كتابة النص ونكتب تحت بالفوتر الي نبي مثل جميع الحقوق محفوظة
http://www.m5zn.com/uploads/be0569b18a.gif

الخطوة 14 : نضغط على لير النص كليك يمين و نختار Blending Options
http://www.m5zn.com/uploads/dc871a5542.gif

الخطوة 15 ؛ 16 ؛ 17 ؛ 18 : نضبط تنسيق اللير كما في الصور التاليه
http://www.m5zn.com/uploads/2317d118b4.gif
http://www.m5zn.com/uploads/0caa3dcad5.gif
http://www.m5zn.com/uploads/201fe07bed.gif
http://www.m5zn.com/uploads/1103ceadba.gif

الخطوة 19 : وسيظهر لنا الشكل التالي وهو نتيجة التطبيق
http://www.m5zn.com/uploads/e4968a2337.gif


وبسسسسسسسسسس

::+:+:+:+::

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

وانشالله انكم فهمتوا الخطوات

وطبعاً ملف الصور وملف التطبيق psd بالمرفقات للي لا تظهر له صور الشرح

وشكراً لكم

[Mohannad]

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

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

كيف حالكم اخواني واخواتي

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

واليوم نكمل بالدرس الرابع

وهو شرح تقطيع الأستايل

وبسم الله نبدأ الشرح

::+:+:+:+::

الخطوة 1 : نختار أداة تقطيع الأستايل
http://www.m5zn.com/uploads/fc5b07dd62.gif

الخطوة 2 : نظهر الشبكة من خلال الضغط على ctrl + h أو من قائمة view >> extras
http://www.m5zn.com/uploads/ddfcb9e53c.gif

الخطوة 3 : سيظهر لنا شكل الأستايل بعد أظهار الشبكة
http://www.m5zn.com/uploads/61450f9489.gif

الخطوة 4 : نرسم بأداة التقطيع مربع في أعلى يسار الهيدر كما في الصور
http://www.m5zn.com/uploads/df57b5a0d3.gif

الخطوة 5 : نرسم مربعاً أخر مقابل ومشابه للمربع الي رسمناه ولكن في الجهة المقابله للأول
http://www.m5zn.com/uploads/6a7b53a1ad.gif

الخطوة 6 : نرسم مربعاً صغير بجانب أي مربع من هالمربعات ولكن بمكان فارغ يعني للتمدد
http://www.m5zn.com/uploads/143ab30dac.gif

الخطوة 7 : والان نرسم المكان الفاضي بمربع واحد كبير
http://www.m5zn.com/uploads/6a2165417f.gif

الخطوة 8 : والان نرسم الفوتر نفس الهيدر بالضبط بالمربعات
http://www.m5zn.com/uploads/4696d9a0d2.gif

الخطوة 9 : والحين نرسم مربع بأي مكان باليسار من العمود
http://www.m5zn.com/uploads/88ded459ba.gif

الخطوة 10 : ونرسم نفس المربع بالضبط في العمود الثاني
http://www.m5zn.com/uploads/667c31b01e.gif

الخطوة 11 : من قائمة file >> save for web
http://www.m5zn.com/uploads/c3b510f57b.gif

الخطوة 12 : يظهر لنا مربع كبير الي علينا هو اننا نضغط save
http://www.m5zn.com/uploads/a40b50b526.gif

الخطوة 13 : بعد ماضغطنا موافق يظهر لنا مربع اخر ونسويه نفس الخيارات التاليه والمكان الاول هو اسم الاستايل الي تبيه
http://www.m5zn.com/uploads/fbe55a5703.gif

الخطوة 14 : الان بعد ماحفظنا المجلد سيظهر بأسم افتراضي كالشكل التالي
http://www.m5zn.com/uploads/e041409dd1.gif

الخطوة 15 : نضغط على المجلد كليك يمين ونختار أعادة تسميه
http://www.m5zn.com/uploads/20cf3488b5.gif

الخطوة 16 : ونغير الاسم إلى اسم الاستايل الي نبيه
http://www.m5zn.com/uploads/60b679008b.gif

الخطوة 17 : ومن فوق الخيارات نضغط على الرمز التالي ونختار مصغرات لأفضل عرض
http://www.m5zn.com/uploads/cf0087ec74.gif

الخطوة 18 : الأن ندخل على التصميم في الفوتوشب وهو مقصص ونشوف الارقام الي لونها رمادي يعني مالها حاجه وهي محدده بالصوره التاليه
http://www.m5zn.com/uploads/a5994c4470.gif

الخطوة 19 : نحدد صور الاستايل الي فيها الارقام الي مانحتاجها ونمسحها لأننا مانحتاجها
http://www.m5zn.com/uploads/a4cafe6257.gif

وبسسسسسسسسسس
::+:+:+:+::


والان احفظ العمل حتى نكمل في درسنا القادم وهو تصميم فوتر للأستايل

وانشالله انكم فهمتوا كل شي

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

http://www.kw80.com/vb/forumdisplay.php?f=61 (http://www.kw80.com/vb/forumdisplay.php?f=61)

وبالمرفقات ملف الصور فيه الصور للي ماتظهر لديه الصور وفيه أيضا ملف التصميم مفتوح

شكراً لكم ؛؛؛

[Mohannad]

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

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

كيف حالكم اخواني وأخواتي

نأسف لأنقطاع الدوره كم يوم وذلك لبعض الظروف ولأن الشرح طويل شوي

وطبعاً كل شي واضح 100 % وبالصور

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

على هذا الرابط

http://www.kw80.com/vb/forumdisplay.php?f=61 (http://www.kw80.com/vb/forumdisplay.php?f=61)

وبسم الله

::+:+:+:+::

الخطوة 1 : نفتح الملف المرفق بأسم images وناخذ المجلدات الي فيه ونحطها داخل ملف الصور للأستايل الي صممناه
http://www.m5zn.com/uploads/6e84a1d7f1.gif


الخطوة 2 : الأن نبي نعدل على ألوان الايقونات أول شي نفتح الفوتوشب وبعدين نفتح مجلد buttons من الفوتوشب ونختار الايقونات بس الصغيره مو الازرار مثل موضوع جديد ونحددهم مثل بالصوره
http://www.m5zn.com/uploads/a2e11038c6.gif


الخطوة 3 : الحين راح يطلعون لنا ملفات الايقونات بالشكل هذا
http://www.m5zn.com/uploads/76ef05d635.gif


الخطوة 4 : الأن محددين أول ملف بوجهنا نضغط CTRL + B ونغير اللون حسب لون الاستايل الي صممناه انا حسب اللون الوردي هذي هي الخيارات الي سويتها
http://www.m5zn.com/uploads/7eb624cf39.gif


الخطوة 5 : نضغط اغلاق وراح يطلع لك حفظ التغيارات أكتب نعم وكل الملفات الي وراها كذلك
http://www.m5zn.com/uploads/f2f723dd4b.gif


الخطوة 6 : والحين ندخل المجلد الثاني misc وبس هذا مانحدد الملفات مع بعض بس شوف الايقونه الي لونها اسود وادخلها وغير لونها وكل صورة ادخلها وغير لونها
http://www.m5zn.com/uploads/731c16b07d.gif


الحين حنا خلصنا من الايقونات باقي علينا الأزرار مثل موضوع جديد ... إلخ

الخطوة 7 : نختار من قائمة ملف << جديد ؛؛؛؛ file << new ونسوي عمل بمقاسات العرض 70 والطول 27
http://www.m5zn.com/uploads/bcbe9356d9.gif


الخطوة 8 : نختار أداة رسم المربع ونرسم مربع داخل العمل
http://www.m5zn.com/uploads/833f17cdb4.gif


الخطوة 9 : يظهر لنا الشكل بهذه الطريقه
http://www.m5zn.com/uploads/d30a321078.gif


الخطوة 10 : نضغط كليك يمين على لير المربع الي سويناه ونختار التالي
http://www.m5zn.com/uploads/fbcd2cfce4.gif


الخطوة 11 ؛ 12 ؛ 13 : نختار تنسيق اللير كما في الصور التاليه
http://www.m5zn.com/uploads/bb650bdb76.gif
http://www.m5zn.com/uploads/d530e69bc3.gif
http://www.m5zn.com/uploads/dd8cec0a93.gif



الخطوة 14 : نحدد لير المربع بعد مانسقناه ونختار من قائمة الشفافيه كما في الصوره
http://www.m5zn.com/uploads/61b62b5b06.gif


الخطوة 15 : نختار ألان اداة التحديد
http://www.m5zn.com/uploads/4f4e057ded.gif


الخطوة 16 : نحدد الخيارات من فوق كما في الصوره بعد اختيار اداة التحديد
http://www.m5zn.com/uploads/d14a602a83.gif


الخطوة 17 : الأن نحدد أيسر شي من المربع ونضغط على زر delete أو del من الكيبورد
وأيضا نمسح أيمن شي من المربع
http://www.m5zn.com/uploads/fd09c09ece.gif


الخطوة 18 : الحين مابعد مامسحنا اليمين واليسار نمسح الي فوق والي تحت واول شي نغير الخيارات الي فوق نفس الي بالصوره
http://www.m5zn.com/uploads/316172f683.gif


الخطوة 19 : نحدد الي فوق ونمسح ونحدد أيضاً الي تحت ونمسحهم
http://www.m5zn.com/uploads/58332aae4f.gif


الخطوة 20 : نختار أداة كتابة نص من القائمة
http://www.m5zn.com/uploads/f1f7705a76.gif


الخطوة 21 : نضغط على المربع من النص من خلال اداة الكتابه ونكتب الكلمه وهي تعديل
http://www.m5zn.com/uploads/ac1bc1f8ac.gif


الخطوة 22 : الحين باقيلنا ندخل على الفوتوشب ايميج ريدي وبذالك بالضغط على الايقونه الاخيره كما في الصوره
http://www.m5zn.com/uploads/23af284f5e.gif


الخطوة 23 : الان نضغط تحت اللير الاول للحركه كليك يسار عادي ونختار كما في الصوره
http://www.m5zn.com/uploads/97d5d2bc66.gif


الخطوة 24 : والحين نختار لير جديد كما في الصوره
http://www.m5zn.com/uploads/43105bc060.gif


الخطوة 25 : نكرر لير الكتابة ونغير الكلمة في اللير المكرر إلى كلمة حذف
http://www.m5zn.com/uploads/c4907716fe.gif


الخطوة 26 : في ليرين مالات التحريك نضغط على اللير رقم 1 ليتحدد كما في الصورة
http://www.m5zn.com/uploads/be9a22a2d1.gif


الخطوة 27 : نروح لليرات ونضغط على صورة العين على لير كلمة حذف لتختفي ولتظهر فقط كلمة تعديل
http://www.m5zn.com/uploads/d2730c676c.gif


الخطوة 28 : الحين نحدد لير التحريك ونضغط على اللير رقم 2 ليتحدد كما في الصورة
http://www.m5zn.com/uploads/03e2bbe5d8.gif


الخطوة 29 : الحين نضغط على المربع للير حذف لتظهر صورة العين ونخفي صورة العين عن اللير الاول
http://www.m5zn.com/uploads/d80126ec47.gif


الخطوة 30 : نختار من قائمة ملف أو file ونختار كما في الصورة
http://www.m5zn.com/uploads/07b8a3bfbd.gif


الخطوة 31 : نحدد الان اسم الملف الي نبي نبدل في الايقونه حنا طبعاً سوينا تعديل وحذف وهي لصورة edit كما في الصوره
http://www.m5zn.com/uploads/48101c0354.gif


الخطوة 32 : سيظهر لنا مربع بعد ذلك فقط علينا نضغط كما في الصوره
http://www.m5zn.com/uploads/5694d9e0a6.gif


طبعاً الحين نسوي جميع الأيقونات بس ننتبه لازم نسوي الحين بس للأيقونات الي قياسها 70 * 27 ونبدل جميع الايقونات الي مثل قياسها فقط في مجلد buttons
يعني الايقونات الكبيره الثانيه مثل موضوع جديد قياسها 104 * 40 يعني بس نغير الأرقام الي التالي ونسوي الكلمات كما في الصور القديمه ونبدل الصور في نفس المجلد


الخطوة 33 : الأن ندخل مجلد misc نلقى أيقونتين الاحصائيات والمتصلين كل الي علينا نسوي نفس الخطوات القديمه ولكن بقياس 30 * 30 ونكمل الخطوات كما خطوات السابقه
http://www.m5zn.com/uploads/4074d8eabc.gif


الخطوة 34 : ندخل مجلد statusicon ونسوي عمل جديد للأيقونات الي فيه بقياس عرض 32 وطول 30 كما في الصورة ونكمل الخطوات السابقه
http://www.m5zn.com/uploads/d4ebe1efd7.gif


::+:+:+:+::

والحمدالله خلصنا أصعب جزء من تصميم الأستايل

وأنتظرونا في الدرس القادم بأذن الله

وانشالله انكم فهمتوا كل شي

طبعاً بالمرفقات ملفين الملف الاول Images وهو فيه مجلدات الايقونات قبل التعديل

والملف الثاني اسمه style وهو فيه كل شي جاهز المجلدات مصممه وصور الاستايل

وشكراً لكم اخواني على المتابعه

[Mohannad]

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

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

كيف حالكم اخواني وأخواتي

نأسف لأنقطاع الدورة ولكن ذلك للظروف الذي تعرض لها الموقع من مشاكل في الاستضافه

المهم انشالله اليوم نكمل دورتنا

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

على هذا الرابط

http://www.kw80.com/vb/forumdisplay.php?f=61 (http://www.kw80.com/vb/forumdisplay.php?f=61)

وقبل لا نبدأ أقولكم الي خلصوا من الدرس الخامس تصميم الأيقونات

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

والأفضل انك ترفعه على المجلد الرئيسي للمنتدى أسهل لكم ولنا vb

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

نكمل درسنا اليوم

بسم الله

::+:+:+:+::

الخطوة 1 : نفتح برامج الفرونت بيج من أبدا او من أي طريقه تعرفها
http://www.m5zn.com/uploads/77a61c046c.gif


الخطوة 2 : بعد مافتح معانا الفرونت بيج نضغط على ايقونة صفحة جديده
http://www.m5zn.com/uploads/bfbba70c1b.gif


الخطوة 3 : ستفتح معنا صفحة بيضاء نضغط على تعليمات برمجيه
http://www.m5zn.com/uploads/b6a4edacc9.gif


الخطوة 4 : الان نحدد الكلام الموجود بعد ماضغطنا تعليمات برمجيه ونمسح كل شي موجود
http://www.m5zn.com/uploads/8b63cb8273.gif


الخطوة 5 : أ - الحين بعد مامسحنا كل شي موجود بالتعليمات البرمجيه نضغط على : تصميم : لتظهر لنا صفحة بيضاء
http://www.m5zn.com/uploads/092db00c8b.gif

ب - نضغط كليك يمين بأي مكان بالصفحة البيضاء ونختار خصائص الصفحة ونغير اتجاه الصفحة ونحطه يمين - يسار
http://www.m5zn.com/uploads/2a45446694.gif


جـ - نختار خيارات متقدمه من فوق ونضع المربعات الموجوده كلها اصفار ونضغط موافق
http://www.m5zn.com/uploads/31ead16f7a.gif


الخطوة 6 : نضغط الحين على اداة ادراج جدول من فوق ونختار نفس الي موجود في الصوره
http://www.m5zn.com/uploads/6cf69505f5.gif


الخطوة 7 : الحين أضغط على اي مكان بالجدول باليمين واختار خصائص الجدول
http://www.m5zn.com/uploads/7defc240ba.gif


الخطوة 8 : تظهر لنا هذه النافذه الان حدد الخيارات كما في الصوره
http://www.m5zn.com/uploads/9f052cdf16.gif


الخطوة 9 : نضغط على اول جدول فوق ونضغط على اداة ادراج جدول ونحدده كما في الصوره وسيظهر لنا جدول مكون من اربع خانات في أعلى الجدول الاولي !!!
http://www.m5zn.com/uploads/a3f6d5d7b9.gif


الخطوة 10 : ونسوى نفس الخطوه الي طافت في الجدول نضغط على اخر جدول ونضغط اداة ادراج جدول كما في الصوره وسيظهر لنا جدول مكون من اربع خانات !!!
http://www.m5zn.com/uploads/3f7623e548.gif


الخطوة 11 : والحين نضغط في الجدول الي بالوسط ونضغط على اداة ادراج جدول كما في الصوره وسيظهر لنا جدول مكون من ثلاث خانات !!!
http://www.m5zn.com/uploads/e5f4f8b8aa.gif


الخطوة 12 : والحين ندخل على مجلد صور تصميم الاستايل ونحط صور الهيدر في الجداول الأربع الي فوق وكل صورة بمربعها وبمكانها
http://www.m5zn.com/uploads/6ea79f1bd7.gif


الخطوة 13 : الحين ياجماعة ركزوا معاااااااي
الحين تشوف الجدول الي فوق مو مضبوط محيوس والصور بينهم فراغات نبي نضبطهم
والطريقه هي انك تضغط على كل صورة كليك يمين وأختار خصائص الصوره
http://www.m5zn.com/uploads/cfcd276b8c.gif

الخطوة 14 : الحين تظهر لنا نافذه ناخذ منها المقاسات وهي الارتفاع والعرض طبعاً انا اخترت صورة الهيدر الي يمين فوق طبعاً مانغير شي بالقياسات كل واحد وقياساته بس أحفظوا القياسات للصوره هذي
http://www.m5zn.com/uploads/024cfdc7c2.gif


الخطوة 15 : الحين نضغط على نفس الصورة الي حفظنا قياساتها نضغط كليك يمين وخصائص الخليه
http://www.m5zn.com/uploads/d08080a055.gif


الخطوة 16 :أ - تظهر لنا نافذه الأن ونغير خيارات العرض نفس الصوره الي حفظنا قياساتها العرض نخليه نفس الصوره والارتفاع نفس الصوره
http://www.m5zn.com/uploads/c6a3fd1db3.gif

ب - الحين نضغط على أعلى جدول كليك يمين ونختار خيارات الجدول
http://www.m5zn.com/uploads/b6453535a3.gif

جـ - نحدد خيارات الجدول كما في الصوره التاليه
http://www.m5zn.com/uploads/f72425ee5f.gif


الخطوة 17 : الحين نطبق الخطوات 13 ؛ 14 ؛ 15 ؛ 16 على الصور الباقيه وبس نخلي نقطه التمدد الي هي أصغر صوره بالوسط ويظهر لنا كالتالي
http://www.m5zn.com/uploads/3c72acee10.gif


الخطوة 18 : الحين نجي عاد على نقطه التمدد الي هي الصوره المحدده في الصورة التاليه
http://www.m5zn.com/uploads/af7fd65d66.gif


الخطوة 19 : الحين نضغط كليك يمين على صورة التمدد ونختار خصائص الصوره
http://www.m5zn.com/uploads/e8140ec241.gif


الخطوة 20 : بعد ما اخترنا خصائص الصوره تظهر لنا نافذه نختار من فوق عام وننسخ رابط الصوره الي موجود فوق
http://www.m5zn.com/uploads/5914c2f819.gif


الخطوة 21 : نمسح صورة التمدد من الجدول الحين ونضغط كليك يمين بجدول صورة التمدد الي مسحناها ونختار خصائص الخليه
http://www.m5zn.com/uploads/f5d77050e1.gif


الخطوة 22 : الحين تظهر لنا نافذه نلصق رابط الصورة الي نسخناه داخل مربع خلفيه الخليه
http://www.m5zn.com/uploads/af3a15d3cf.gif


الخطوة 23 : ظهر لنا الان الهيدر وخلصنا منه
http://www.m5zn.com/uploads/b5cef3376f.gif


الخطوة 24 : الحين نطبق نفس خطوات الهيدر على الفوتر نضيف الصور على المربعات ونسوي القياسات ونخلي نقطه التمدد ونحطها خلفيه للخليه ليظهر معنا شكل الفوتر والهيدر كالتالي
http://www.m5zn.com/uploads/84ad35be37.gif


:: الحين خلصنا من الهيدر والفوتر بالفرونت بيج باقي الأعمده ونخلص بأذن الله ::

الخطوة 25 : الحين بس نضيف صور الاعمده اليمين بالجدول اليمين واليسار بالجدول اليسار
http://www.m5zn.com/uploads/8ed002de81.gif


الخطوة 26 : أ - نضغط على صورة العمود كليك يمين ونختار خصائص الصورة
http://www.m5zn.com/uploads/fdf160d335.gif

ب - الحين نحفظ قياسات الصوره لان بعد شوي نحتاجهم
http://www.m5zn.com/uploads/24893f1f98.gif


الخطوة 27 : أ - الحين نضغط كليك يمين على الصوره ونختار خيارات الخليه
http://www.m5zn.com/uploads/f2423e51bf.gif

ب - تظهر لنا نافذه خيارات الخليه ونحدد الارتفاع نفس ارتفاع الصوره الي حفظناه قبل شوي والارتفاع نفس
http://www.m5zn.com/uploads/d18a613771.gif

الخطوة 28 : الحين نسوي صورة العمود الثاني نفس الخطوات 26 ؛ 27 ليظهر لنا شكل الاعمده كالتالي
http://www.m5zn.com/uploads/f45f4eeb48.gif


الخطوة 29 : أ - الحين نضغط كليك يمين على الجدول الي بالوسط مال الاعمده ونختار خصائص الجدول
http://www.m5zn.com/uploads/9269070406.gif

ب - نحدد خصائص الجدول كما في الصوره التاليه
http://www.m5zn.com/uploads/b5f85178e6.gif

وهذا هو الشكل النهائي للأستايل بالفرونت بيج
http://www.m5zn.com/uploads/359e4ba0fe.gif

::+:+:+:+::

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

وأنتظروا الدرس الجاي انشالله تركيب الاستايل على المنتدى

شكراً لكم

[Mohannad]

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

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

كيف حالكم اخواني وأخواتي

انشالله اليوم سنكمل دورتنا

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

على هذا الرابط

http://www.kw80.com/vb/forumdisplay.php?f=61 (http://www.kw80.com/vb/forumdisplay.php?f=61)

وطبعاً يا أخوان نفتح العمل الي سويناه بالدرس السادس

وندخل على الفرونت بيج ونكمل

وبالنسبه لملف xml ترا مو ملف انت تسويه وبعدين ترفعه على المنتدى
ملف xml الملف هو الاستايل بعد ماتنسقه بالمنتدى وتضبطه ووتحفظه بجهازك يصير بصيغه xml :boxing:

::+:+:+:+::

بسم الله

::+:+:+:+::

الخطوة 1 :أ - نضغط الحين على العمود الايمن كليك يمين خصائص الصوره علشان نخليه يتمدد مع الاستايل
http://www.kw80.com/up/uploads/06ed29e6e6.gif (http://www.kw80.com/up/)

ب - نحفظ خصائص الصوره من ارتفاع وعرض في عقلنا كما بالصوره
http://www.kw80.com/up/uploads/8717690a72.gif (http://www.kw80.com/up/)

ج - وندخل من خصائص الصوره فوق كلمة عام نضغط عليها وننسخ رابط الصوره كما في الصوره
http://www.kw80.com/up/uploads/9e46baa2ba.gif (http://www.kw80.com/up/)


الخطوة 2 :أ - بعد ما اخذنا قياسات الصوره نمسح الصوره ونضغط الحين كليك يمين على الجدول ونختار خيارات الخليه
http://www.kw80.com/up/uploads/c42756594a.gif (http://www.kw80.com/up/)

ب - الحين نسوي خصائص الخليه كما في الصوره وننسخ الرابط مال الصوره قبل شوي داخل المربع الي تحت خلفيه الخليه !!!
http://www.kw80.com/up/uploads/eab2bf2566.gif (http://www.kw80.com/up/)


الخطوة 3 : أ - الحين نضغط كليك يمين على الخليه الي بالنص عند الاعمده ونختار خصائص الجدول
http://www.kw80.com/up/uploads/a3b83a74de.gif (http://www.kw80.com/up/)

ب - نغير خيارات خصائص الجدول كما في الصوره
http://www.kw80.com/up/uploads/34ef31a92b.gif (http://www.kw80.com/up/)


الخطوه 4 : نكرر الخطوات 1 , 2 على العمود الثاني ليظهر معانا شكل الاستايل في الفرونت بيج هكذا
http://www.kw80.com/up/uploads/4cd90d04d1.gif (http://www.kw80.com/up/)


الخطوه 5 : أ - نختار الخليه الوسطى لجدول الاعمده ونختار أداة التوسيط
http://www.kw80.com/up/uploads/1ac619fe87.gif (http://www.kw80.com/up/)


ب - الحين نضغط على كلمة تعليمات برمجيه
http://www.kw80.com/up/uploads/665cc5811c.gif (http://www.kw80.com/up/)


ج - الان نحدد الرابط الزائد مال الصور كما في الصوره يعني نمسح الرابط من قبل كلمة style ونمسح الرابط الزائد لجميع الصور
http://www.kw80.com/up/uploads/4f29040370.gif (http://www.kw80.com/up/)


د - الحين نرد نضغط على تصميم ونلقى ان الصور لا تظهر للأستايل نختار الخليه الوسطى ونضغط ونلقى ان الموشر بالوسط
http://www.kw80.com/up/uploads/877f04581f.gif (http://www.kw80.com/up/)


هـ - نرد على التعليمات البرمجيه وتذكر وانت راد تأكد ان المؤشر لازم يكون في وسط الخليه الوسطى وبعدين تروح للتعليمات البرمجيه وتلقى المؤشر قدامه كلمه <td>&nbsp; نضغط الحين زر Shift + السهم للأعلى علشان نحدد الكود الي فوق هالكلمه للهيدر وننسخ الكود ونحفظه عندنا بمفكره بأسم header
http://www.kw80.com/up/uploads/9b449980d9.gif (http://www.kw80.com/up/)


و - والحين نحدد الكود الباقي تحت كله وننسخ الكود ونحفظه عندنا بمفكره جديده بأسم footer


الخطوه 6 : أ - ندخل الحين لوحة تحكم المنتدى وندخل خيارات النمط ونختار تنزيل \ رفع الانماط كما في الصوره
http://www.kw80.com/up/uploads/0fa4adfea0.gif (http://www.kw80.com/up/)

ب - والحين نختار استعراض ونضيف ملف الاستايل الي بالمرفقات لسهوله تعديله
http://www.kw80.com/up/uploads/0359d8b422.gif (http://www.kw80.com/up/)


ج - بعد ماضغطنا على استيراد ننتظر شوي حتى يظهر لك مربع كما بالصوره وتضغط على تم
http://www.kw80.com/up/uploads/d7d8c348ea.gif (http://www.kw80.com/up/)


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

الخطوه 7 : أ - الحين طال عمرك تطلع لك صفحة فيها استايلات منتداك وتلقى اخر ستايل اسمه استايل الدووره كما سميناه
http://www.kw80.com/up/uploads/5ce57d0bff.gif (http://www.kw80.com/up/)

ب - الحين تختار من القائمة الموجوده امام استايل الدوره نختار القوالب الشائعه ونضغط اذهب
http://www.kw80.com/up/uploads/b038031067.gif (http://www.kw80.com/up/)


ج - الحيييييين ترووح وترجع للمفكرات الي قبل شوي قلت لكم احفظووهم بأسم header , footer تفتح ملف header وتنسخ الي فيه كلللله وتروح للمربع الاول بالقوالب الشائعه وتمسح الي فيه كله وبعدين تضيف كود الـ header بعد ما ضفت كود الهيدر بنفس المربع مال الهيدر تضيف سطر جديد وتضيف هالكود هذا وذلك لتنسيق المنتدى
$spacer_open

$_phpinclude_output
http://www.kw80.com/up/uploads/42e8387a51.gif (http://www.kw80.com/up/)

د - الحين يالغالي تخلي المربع بالوسط الي هو headinclude مالك شغل فيه طوفه
وروح للمربع الثالث الي هو footer وترووووح لأخر سطر بالمربع وتضيف سطر تحته وتنسخ كود الملف الي حفظناه footer داخل هالمربع ولكن بأخر سطر
http://www.kw80.com/up/uploads/aee5243681.gif (http://www.kw80.com/up/)


هـ - <<< اسهل شي بالدرس http://www.traidnt.net/vb/images/smilies/harhar1.gif تروح تحت وتضغط على كلمه حفظ
http://www.kw80.com/up/uploads/c22e1e5007.gif (http://www.kw80.com/up/)

الخطوه 8 : أ - نروح الحين ونرجع من جديد نختار من لوحة تحكم المنتدى الانماط والقوالب ونختار ادارة النمط
http://www.kw80.com/up/uploads/9723032da3.gif (http://www.kw80.com/up/)


ب - الحين نختار من امام استايل الدوره نختار متغيرات النمط ونضغط اذهب
http://www.kw80.com/up/uploads/5fb8bc0413.gif (http://www.kw80.com/up/)

ج - الحين اخواني نروح لمربع [عرض الحدود الداخلية (بيكسلس)] ونمسح الكود الي داخل مربعه ونضيف بداله كل ستايل وحسب لونه وطبعاً هذا لأختيار لون الحدود ::
الاستايل الازرق :
0" borderColorDark="#F3F3FC" borderColorLight="#003366" border="1

الاستايل الوردي :
0" borderColorDark="#FCF3FA" borderColorLight="#990044" border="1

الاستايل الاخضر :
0" borderColorDark="#F3FCF3" borderColorLight="#009900" border="1

واذا في لون عندك تقدر أيضا انت تعدل هالكود بتغير اكواد الالوان إلى الالوان الي تعجبك
وانا الاستايل الي مصممه للدوره لونه وردي لذلك اضيف كود الاستايل الوردي
http://www.kw80.com/up/uploads/aa5c5d45a3.gif (http://www.kw80.com/up/)

د - ننزل شوي تحت على [مسارات الصوره] ونلقى مربعات كثير كل مربع منهم نشيل فيه كلمه kw80 ونبدلها بأسم ستايل مثلا أنا مسمي مجلد الاستايل حقي style ابدل kw80 واخليها style
http://www.kw80.com/up/uploads/30632606b0.gif (http://www.kw80.com/up/)

هـ - الحين ننزل اخر شي ونختار حفظ
http://www.kw80.com/up/uploads/eb15906bf1.gif (http://www.kw80.com/up/)

شباااااااااااب ابشركم الاستايل خلاااااااص صار 75 % بس باقي اننا نعدل متغيارات CSS

الخطوه 9 : أ - الحين اخواني من لوحة تحكم المنتدى نختار ادارة النمط ونختار من امام استايل الدوره CSS رئيسي
http://www.kw80.com/up/uploads/3b471ec0e2.gif (http://www.kw80.com/up/)


ب - طبعاً الحين الي مصمم استايله باللون الازرق خلاص مو لازم يسوي شي بس الي غيره ويبي ينسق الالوان يدخل على اول مربع كبير اسمه الجسم وتلقى فيه لون الخلفيه تحط فيه لون خلفية استايل الي تبيه ولون الخط تحط كود اللون مالك بس انتبه انك تحط رمز # قبل الكود والحين بس نغير كوود الخلفيه الاول الاول وكود الخط وفي تحت ثلاث مربعات بجنب بعض اول مربعين نفس لون الخط بالضبط والاخير لون افتح بشوي من لون الخط العادي ونروح الحين نغير جميع المربعات الي تشابه هالمربع ونحط نفس لون الخلفيه ونفس لون الخط
http://www.kw80.com/up/uploads/1fecb996be.gif (http://www.kw80.com/up/)


ج - شوف المربع بعد ماغيرت الالوان إلى لون الاستايل الي انا مسويه وطبعاً انا غيرت جميع الوان الخطوط والخلفيات بس انتبهوا الخلفيات الي تجيك مو لون تجي كود هذي امسح الي فيها وضيف بدالها هالكود #ffffff url(style/body.jpg) repeat-x top left
مع تغير كلمه style إلى اسم مجلد منتداك
http://www.kw80.com/up/uploads/fe6746b369.gif (http://www.kw80.com/up/)


د - الحين تروح للمربع إلى اسمه اللون المتناوب الثاني وتحط لون الخلفيه له اغمج [ ادكن ] من لون الابيض بشوي على حسب لون استايلك انا لون استايلي وردي خليت الخلفيه وردي فاااااااتح جداً جداً يعني قريب جداً للوون الابيض كما في الصوره
http://www.kw80.com/up/uploads/18c1db430c.gif (http://www.kw80.com/up/)


هـ - الحين الحمدالله خلصنا من الوان الاستايل باقي الوان شريط التمرير الي على جنب والافتراضي ازرق راح اوريكم طريقه تغير لونه وهي انك تروح إلى المربع الاخير تحت واسمه [تعاريف CSS الإضافية] المربع الثاني تلقى فيه اكواد الوان تاخذ كود اللون الاول الي هو b3bad3 وتحط بداله كود لون فاتح على حسب استايلك وتروح للكود الثاني F3F5FC وتبدله بلون فااااتح جداً قريب للأبيض الحين الكودين الثالث والرابع متشابهين الي هم 434B6D وتبدلهم بلون غاااامج والكود الخامس الي هو 050F37 تبدله بلون غامج جداً قريب للأسود والحين اخر كودين الي هم E5E7F4 تبدلهم بلون فاتح شووي
http://www.kw80.com/up/uploads/8317298e8c.gif (http://www.kw80.com/up/)

و - الحين نروح تحت اخر شي ونختار حفظ والحمدالله :icon20:
http://www.kw80.com/up/uploads/ffbbc75d1d.gif (http://www.kw80.com/up/)

الخطوه 10 : هذي اخر خطووه وهي انك تحمل الملف المرفق بأسم ألوان وتدخل على المجلد الي فيه لون استايلك وتلقى فيه صوره اسمها body.jpg تاخذها وترفعها على مجلد الاستايل على موقعك


::+:+:+:+::

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

وطبعاً انشالله سيتم وضع دروس للأطار قريباً في نفس الدوره
وياليت يالغالين نشوف تطبيقاتكم

ولمشاهده مثال الاستايل على هالرابط

http://www.kw80.com/vb/index.php?styleid=23 (http://www.kw80.com/vb/index.php?styleid=23)

وأذا كان اي شي ناقص ترا والله مو قصدي خصوصاً اني مانمت عدل ودايخ
اي ملاحظات ياريت تكتبونها لنا

شكراً لكم