مثل ما تلاحظون انا صممت و يجب تقطيع التصميم الى ثلاثة قطع
1- الى عنوان البلووووك
2- محتويات البلوك
3- الصورة التجميلية للبلوك

الحين نحفظ الصور و لدينا طريقتين اما قص و لصق في عمل جديد و حفظ الصورة او تقطيع التصميم مثل اللي انا سويته الى ثلاثة قطع بأداة Slice Tool و من ثم file و save for web راح يحفظ لنا سفحة html مع الصور في مجلد images .

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

حط نفس الصور و راح تطلع لك هلووون

 

ملاحظات مهمة جدا :

الصور 1 و 2 و 3 و 4 هي الصور اللتي سوف نضعها في اليمين و اليسار للتجميل

اما الصورتين 5 و 6 هي صور للتمدد و يجب ان نضعها في تمدد الجزء العلوي و الجزء السفلي .


و بعد نقطع مثل اللي في الصورة و نحفظ save for web .

الى الان تقريبا 40% او 50% من تصميم الثيم .

ها تمللتوا يله واصلوا لا تشقحون خطوات

الحين انا عندي شتغل على اللوكال سيرفر ( اباتشي)
نروح الى مجلد النيوك و تروح الى مجلد الثيم
C:\apache\htdocs\html\themes

راح نشوف مجلدات كثيرة , ما يهمونا اللي يهمنا مجلد اسمه NukeNews انسخه و الصقه و سمه الثيم باللي انت تبيه مثلا انا سميته des .

الحين افتح المجلد des اللي نسخناه , بتشوف ملفات كثيرة افتح ملف theme.php و استبدل كلمة بكلمة des لكي تتعدل مسارات الملفات .

الان باقي علينا تركيب الصور اللي صممناها .

الان افتح ملف blocks.html و تعديل عن طريق برنامج الفرونت بيج و اذهب الى التعليمات البرمجيه و احذفها جميعا
اختر أداة انشاء جدول , وانشئ جدول مكون من عمود واحد وثلاث صفوف,

الان ناتي و نركب الصور كالتالي

 

لاحظ ان الصورة 1 اعتمدناها كخلفية و ايضا الصورة 2 اعتمدناها كخلفية ليكون عليها مختويات البلوك اما الصورة 3 اعتمدناها كصورة عادية

و كتبنا على الصورة رقم 1 $title و هذه يعني عنوان البلوك
و كتبنا على الصورة 2 $content و هذه يعني محتويات البلوك
و الحين راح نغير روابط الصور الى روابط في السيرفر اذهب الى تعليمات برمجية و راح تشوف 3 روابط للصور غيرهم ات مع تغيير روابط الصور بوضع themes/des/images و اسم الصورة
طبعا راح عقب تشووف الصور يظهر فيها علامة X لا تخاف في الثيم كل شي بكون تمام
انتهينا من تصميم البلوك الحين احفظ العمل .


الحين فتح صفحة story_home.html و نعدل عليها في الفرونت بيج
و اذهب الى تعليمات برمجية و احذف كل شي
و الحين ادرج جدول 3×3
 

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

 

رقم 1 و 2 و 3 و 4 هي الصور التجميلية و نضعها عادي

اما رقم 5 و 6 هي خلفية تمدد و نكتب على رقم 5 $title
و في وسط الخلية بدينا خياران اما نعتمد خلفية صورة مثل اللون او خلفية عادية و نضع كووود اللوووون المناسب و نكتب فيها $content لإظهار محتوى الموضوع .
و في الخلية 6 نكتب $posted و $morelink لإظهار معلومات اللذي وضع الموضوع و والوقت و التاريخ و الثاني لإقرا المزيد .

الان انتتهينا من هذا اذهب الى التعلميات البرجيع لكي نستبدل روابط الصور
اذهب الى بحث و ابحث عن الصور و الخلفية اللتي يجب استبدالها
عندي انا استبدلت 9 روابط منها 4 للصور و 5 للخلفية و ضع مكان الرابط themes\des\images و اسم الصورة

ملاحظة : يجب الصور تكوون في السيرفر و على نفس المسار themes\des\images في مجلد images

الان احفظ العمل و لكن لا تغلق الصفحه , لماذا ؟

انسخ كامل التعليمات البرمجيه و الان افتح صفحه story_page.html
و امسح كل التعليمات البرمجيه و الصق التعليمات اللتي نسخناها .

بعد ما لصقت اذهب الى التعليمات البرمجية و احذف النص $morelinke
لأنه بعد ما ضغطت على اقرا المزيد لن تحتاجه مرة اخرى في اصفحه .

هكذا نكوون قد انتهينا من تصميم الثيم 90% .

بقي القليل فقط ,,, تابع معي

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

و صمم لك اي شي و هذه انا اللي سويته

 

مثل ما تلاحظون رقم 1 و رقم 3 هما خلفية للتمدد و رقم 2 صورة
نقص العمل و نحفظ الصور كما تعودنا سابقا .

الان نأتي الى صفحه footer.html و نعدلها في الفرونت بيج , اذهب الى التعليمات البرمجية و اكتب هذات الكود التالي


< t d b g col or =" # 0 0000 0 " > < / t d > < / t r >< /t able >


و الان ادج جدول بثلاثة صفوف و ادرج فيها خلفية التمدد اليسرى اللي هي رقم 1 و خلفية التمدد اليمنى اللي هي رقم 3 و الصورة رقم 2 و طق عليها توسيط و حفظ .


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

و هذه انا اللي سويته

 

و الحين روح الى ملف header.html و الى تعليمات برمجية , امسح كل شي ما عدل هذا الكود

< !- - F I N D E L TI T UL O - ->

و كل اللي تحته لا تحذفه .

و الان ادرج جدول بثلاث صفوف كما تعودنا و ادرج فيه صور التمدد 1 و 3 و الصورة 2 ادراج عادي .

الان نأتي الى تعديل الروابط , في الفرونت بيج اختار الصورة و اختار اداة Rectanglur hotspot لتحديد جزء من الصورة و وضع رابط عليه هذا ما سنفعله نحن

و اليكم الروابط :

الرئيسية : index.php
المواضيع : modules.php?name=Topics
البرامج : modules.php?name=Downloads
ملفك الشخصي : modules.php?name=Your_Account
ارسل خبرا : modules.php?name=Submit_News
افضل عشرة : modules.php?name=Top

هذه هي الروابط اللتي سوف نضعها على الصورة

و الان احفظ العمل و اذهب و شاهد مجلة النيوك اللتي صممتها انت .


و لمشاهدة الثيم اللذي عملنا عليه من هنا حفظ الهدف بإسم