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

[mzmz]

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

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

__________________________________________________ __

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

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

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

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

__________________________________________________ _

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

بسم الله نبدأ

أولا :- افتح ملف 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

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



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



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



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



أخوكم :- mzmz

[nimo20002000]

الاخ العزيز
بارك الله فيك كثيرا