شرح تصميم ثيم نيوك من الالف الى الياء ...

[أبو المقداد]

السلام عليكم ورحمة الله وبركاته اليوم يا شباب محظر لكم درس تركيب ثيم النيوك من الألف إلى الياء
وان شاء الله يكون الدرس واضح وسهل وبإذن الله أي واحد يتابع الدرس راح يصير مصممك نيوك بس ركزوا زين !!!

أولا :- لن أتكلم عن التصميم وطرقه لان كل واحد وطريقته بالتصميم لكن سأتكلم عن ما سنحتاجه من صور وتمدد وعن طريقة التركيب

__________________________________________________ __

الهيدر :- نحتاج صورتان ومنطقة تمدد

الفور تر :- صورتان ومنطقة تمدد

عرض المواضيع :- تمدد أعلى وصورتان أعلى تمدد أسفل وصورتان أسفل

البلوك :- تمدد فقط

__________________________________________________ _

قبل البدء حمل المجلد الذي بالمرفقات فيه كل الملفات ما عليك إلا التطبيق

بسم الله نبدأ

أولا :- افتح ملف header وتابع الشرح

http://www.traidnt.org/up/pic.php?u=2358iJPOo&i=8541

طريقة ادراج صورهـ

http://www.traidnt.org/up/pic.php?u=2358iJPOo&i=8542

http://www.traidnt.org/up/pic.php?u=2358iJPOo&i=8543

ونطبق على الاخرهـ كذلك

http://www.traidnt.org/up/pic.php?u=2358iJPOo&i=8544

طريقة إضافة نقطه تمدد

http://www.traidnt.org/up/pic.php?u=2358iJPOo&i=8545

http://www.traidnt.org/up/pic.php?u=2358iJPOo&i=8546

صورهـ بعد وضع التمدد مع توضيح بعض النقاط

http://www.traidnt.org/up/pic.php?u=2358iJPOo&i=8547

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

http://www.traidnt.org/up/pic.php?u=2358iJPOo&i=8548

http://www.traidnt.org/up/pic.php?u=2358iJPOo&i=8549

لاتنسى :-

تغيير روابط الصور



وهذا مثال للهيدر مركب على المجلة

http://www.traidnt.org/up/pic.php?u=2358iJPOo&i=8550

لاحظ أننا أزلنا التسجيل وكذلك التاريخ



ثانيا :- افتح ملف footer وتابع الشرح

http://www.traidnt.org/up/pic.php?u=2358iJPOo&i=8551


طريقة إدراج صورهـ

http://www.traidnt.org/up/pic.php?u=2358iJPOo&i=8542

http://www.traidnt.org/up/pic.php?u=2358iJPOo&i=8552

ونطبق على الاخرهـ كذلك

ملاحظة الصورة اليمنى ضعها مكان اليسرى والعكس كذلك

http://www.traidnt.org/up/pic.php?u=2358iJPOo&i=8553

طريقة إضافة نقطه تمدد

http://www.traidnt.org/up/pic.php?u=2358iJPOo&i=8545

http://www.traidnt.org/up/pic.php?u=2358iJPOo&i=8554

http://www.traidnt.org/up/pic.php?u=2358iJPOo&i=8555

http://www.traidnt.org/up/pic.php?u=2358iJPOo&i=8573

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

http://www.traidnt.org/up/pic.php?u=2358iJPOo&i=8545

http://www.traidnt.org/up/pic.php?u=2358iJPOo&i=8556



لاتنسى :-

تغيير روابط الصور

وهذا مثال للفورتر مركب على المجلة


http://www.traidnt.org/up/pic.php?u=2358iJPOo&i=8557


ثالثا :- افتح ملف story_home وتابع الشرح

http://www.traidnt.org/up/pic.php?u=2358iJPOo&i=8558


أضف نقطة التمدد وأدرج الصور وقد سبق شرحه في أول الدرس

ملاحظة الصورة اليمنى ضعها مكان اليسرى والعكس كذلك

صورهـ بعد الإضافة

http://www.traidnt.org/up/pic.php?u=2358iJPOo&i=8559

توضيح لبعض النقاط

http://www.traidnt.org/up/pic.php?u=2358iJPOo&i=8560

طريقة تغيير خلفية الجدول وحدودهـ

http://www.traidnt.org/up/pic.php?u=2358iJPOo&i=8548


http://www.traidnt.org/up/pic.php?u=2358iJPOo&i=8561

يوجد خط صغير داخلي يغير عن طريق

http://www.traidnt.org/up/pic.php?u=2358iJPOo&i=8545

http://www.traidnt.org/up/pic.php?u=2358iJPOo&i=8562

لاتنسى :-

تغيير روابط الصور

مثال للتصميم مركب على المجلة

http://www.traidnt.org/up/pic.php?u=2358iJPOo&i=8563

لاحظ أننا أزلنا صوره المقال وأيضا كاتبه وعدد قراء الموضوع

ملاحظة :- قم بنسخ محتويات story_home والصقها في محتويات story_page



رابعا :- افتح ملف blocks وتابع الشرح

http://www.traidnt.org/up/pic.php?u=2358iJPOo&i=8564

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

http://www.traidnt.org/up/pic.php?u=2358iJPOo&i=8565

طريق تغيير لون الخط الذي يحيط بالبلوك :-

http://www.traidnt.org/up/pic.php?u=2358iJPOo&i=8566

ابحث عن #398686 واستبدلها بأي لون تريد

طريقة تغيير لون الخلفية :-

http://www.traidnt.org/up/pic.php?u=2358iJPOo&i=8567

ابحث عن #E5F4F4 واستبدلها بأي لون تريد

ملاحظة :- ستجدهـ أكثر من مره

لاتنسى :-

تغيير روابط الصور

وهذا مثال للبلوك مركب على المجلة

http://www.traidnt.org/up/pic.php?u=2358iJPOo&i=8568

إن شاء الله في درس قادم اشرح طريقة وضع صورهـ أعلى وأسفل البلوك بحث يكون أجمل



الآن انتهينا من تركيب التصميم وبـــقــــي تغير لون الخلفية والخط و السكروا بار ...الخ



ارجوووووووووووووووووا التركيز زين يا شباب وعدم خلط الأمور

أولا :- قم بفتح برنامج الفوتوشوب واختر لونان متناسقان مع تصميم ومتقاربان والافضل واحد فاتح والثاني غامق شوي أنا اخترت لونان مثل :-

http://www.traidnt.org/up/pic.php?u=2358iJPOo&i=8569

ثــــــــــانـــيــا :- قم بفتح ملف theme

http://www.traidnt.org/up/pic.php?u=2358iJPOo&i=8570

وابحث عن themes/m واستبدل m باسم المجلد الذي أنشأته ووضعت فيه ملفاتك وصورك مثل abo-almegdad أو غيرهـ

ملاحظة :- ستجدهـ أكثر من مرهـ

2- ابحث عن E5F4F4 واستبدلها باللون الفــــــاتـــــــح الذي اخترته

ملاحظة :- ستجدهـ أكثر من مرهـ

3- ابحث عن 587B7C واستبدلها باللون الغــــــــــامق الذي اخترته

ملاحظة :- ستجدهـ أكثر من مرهـ

ثــــــــــالـــثــــا :- قم بفتح ملف tables

http://www.traidnt.org/up/pic.php?u=2358iJPOo&i=8571

1- ابحث عن E5F4F4 واستبدلها باللون الفاتح الذي اخترته

ملاحظة :- ستجدهـ أكثر من مرهـ

2- ابحث عن 587B7C واستبدلها باللون الغامق الذي اخترته



رابعا :- قم بفتح ملف style

http://www.traidnt.org/up/pic.php?u=2358iJPOo&i=8572

1- ابحث عن E5F4F4 واستبدلها باللون الفاتح الذي اخترته

ملاحظة :- ستجدهـ أكثر من مرهـ

2- ابحث عن 587B7C واستبدلها باللون الغامق الذي اخترته

ملاحظة :- ستجدهـ أكثر من مرهـ

للتذكير فقط رابط صور الثيم :-

اسم اللصورهـ/اسم االمجلد /themes

مثل :-
themes/m/a_07.gif

وأخيراً ارفع المجلد لمجلد الثيم بالمجلة واختر الثيم من لوحة التحكم ومبروووووووك عليك الثيم



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



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



وأي سؤال أو استفسار اسأل وان شاء الله أجيب عليك



أخوكم :- أبو المقداد

[MSHAER]

الله يعطيك العافيه وبيض الله وجهك

[أبو المقداد]

الله يعطيك العافيه وبيض الله وجهك

الله يعافيك يارب وشكرا على مرورك يالغالي


:in_love: معليش نسيت المرفقات

[UaeStar]

شكرا لك يا بطل

[ألفا]

يا والله شكرااااااااااااااااااااااا
يااااااااااا بطل

..:)

[أبو المقداد]

شكرا لك يا بطل

العفو وان شاء الله استفدت

يا والله شكرااااااااااااااااااااااا
يااااااااااا بطل

..:)

العفو وان شاء الله استفدت

[foxxxx]

جزاك الله اخوي او بالمقداد مليون خير

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

تحياتي

[أبو المقداد]

جزاك الله اخوي او بالمقداد مليون خير

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

تحياتي

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

وانا ابجرب اذا قدرت اصلح تمدد راح اشرحها باذن الله

[احلى من الال]

الف شكر لك

[ممرض محترف]

يعطيك العافية

[K.M.Y]

الله يفتحها عليك يا ابو المقداد

والله شرح وااضح جداً جداً

الله يبارك فيك حبيبي

[BenHomran]

مشكور يا أبو المقداد بارك الله فيك على المجهود الكطيب والمبارك

تم النقل للإفادة
http://www.amadh.com/vb/showthread.php?p=1026#post1026

تقبل تحياتي

أخوك : بن حمران

[Arab4web.Co]

جميل جدا أخوي وبارك الله فيك بس ابي اسأل وين المرفقات

[ALDARMAKI]

تسلم اخوي على هالشرح الجميل

بس عندي استفسار انا عندي مجلة Mkportal

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

وشكراً مره ثاني لك

[عرب سوفت]

جزاك الله ألف خير اخوي على الشرح الجميل والرائع

ويعطيك ألف عافيه اخوي

[والله قهر]

مشكوووووووووور أخوي أبو القداد

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

[أحمد الهادي]

جزاك الله كل الخير يا طيب