شرح تصميم و تركيب و تقطيع ثيم النيوك بالصور

[eltawoos.com]

السلام عليكم و رحمه الله و بركاته اهل سوالف الكرام
......................................................................
تابعوا معى الشرح عن طريق موقعى http://alhodaway.net/them او عن طريق سوالف سوفت بإذن الله .
......................................................................
شرحنا من قبل طريقة تركيب صور الثيم على الفرونت بيج و هى على الرابط التالى

اضغط هنا

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

1- تصميم البانر و تقطيعة :-

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

يتم تصميم البانر بالطريقة التى تناسب موقعك و على الشكل الذى تريد (( مثال على ذلك )) :



* طريقة تقطيع الheader بالفوتو شوب :-



* البلوك و طريقة تقطيعة على الفوتو شوب :- (( مثال على صورة البلوك )) :-



طريقة التقطيع



طريقة تقطيع صور ملفات ال story_home.html و ال story_page و هى واحدة ,, طبعا مع زوقك وفى اختلاف احدهما عن الاخر او عم شكل لهذا غير هذا . (( و اليكم صورة الأخبار )) story_home .



طريقة التقطيع



طريقة تقطيع الفوتر و هى مثل تقطيع البانر بالظبط :-



هناك ملاحظات هامة جدا يرجى مراعاتها فى التصميم :-

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

2- عند وضع الصور تأكد تماماً ان الجزء اللى سوف يكتب علية سواء من قبل الزوار او المجلة يتم وضعة بطريقة cell proprties و قد اوضحناها فى مثال سابق كام فى الصورة :-




يرجى التأكد : هل الثيم ببلوك اللى بتعدل علية , هل هو ببلوك لكل صورة او عادى فإن كان عاديا فستتبع الطريقة اللى ذكرناها فى التصميم اما ان كان ببلوك لكل صورة فستتضطر بعمل رأس لكل بلوك يعنى صورة لكل رأس بلوك و تحذف جدولها من الفرونت بيج .

مثال موضح بالصورة :-





طبعا راح تسئلونى اخيراً عن طريقة تصميم الرسائل :-

الرسائل يخصها ملف table.php و هناك ملف مرفق به كل شىء فقط يمكنكم التعديل على عناوين الصور للعناوين اللى صممتوها
و ارسلت لكم جميع ملفات psd التصميم لكم لتشاهدوها على الفوتو شوب و الكل يجرب ما راح يخسر شىء .
يمكنكم تحميلها من الرابط التالى
اضغط هنااااااااااااااااااااا

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

اضغط هناااااااااااااا الان لتحميل الثيم

قال رسول الله صلى الله عليه و سلم (( إذا مات ابن آدم , انقطع عملة إلا من ثلاث , صدقة جارية و علم ينتفع به وولد صالح يدعو له ))

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

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

[ham2002]

تسلم يمينك ياغالي على الشرح الممتاز وبارك الله فيك وجعلها في ميزان حسناتك يارب

[Hossam AL-Abdeh]

يعطيك العافية شرح مرتب و جميل

[الحضرمي]

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

[Loacker]

السلام عليكم
بارك الله فيك اخي الطاووس على هالشرح المفصل
واتمنى ان تجيب على سؤالي في هذا الموضوع
http://www.swalif.net/softs/showthread.php?t=114594
ولك جزيل الشكر

[Alhawe Graphic]

شكرا ً لك أخي الطاووس ..
ولكن لدي استفسار بخصوص صورة لكل بلوك ..
عند حذف رأس البلوك $title
كيف سيأتي رأس البلوك ..
حيث ان $title هو عنوان البلوك ( مثلا ً : المحتوى الرئيسية أو الرئيسية )

حيث حسب ما فهمت من شروحات في القسم ان صورة لكل بلوك هو من خلال تحرير البلوك نفسه من لوحة التحكم واعطاء اسم البلوك اسم الصورة مثال ( home.gif ) وبالتالي البلوك يقوم بجلب الصورة من ملف الصور في الثيم ..

تحياتي لك واتمنى توضيح هذه النقطة ..

[Alhawe Graphic]

ايضا اذا امكن المساعدة اخوي في موضوعي التالي الخاص باضافة اطار للنيوك :
http://www.swalif.net/softs/showthread.php?t=115248

واكون شاكر لك

[الاسطورة]

ممتاز الشرح بالتوفيق اخي الكريم

[CURLY]

بارك الله فيك أخى الطاووس
شرح أكثر من رائع

[abutawfig]

بارك الله فيك وكثر من امثالك

[eltawoos.com]

مشكورييين اخوانى على المشاركات و نأتى للأجابة على الاسئلة :-

1- الأخ Loacker

جزاك الله كل خير و مشكلتك لها حلان .

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

http://www.7oob.net

فلو لاحظت ستجد صور رأس البلوكات اليمين غير البلوكات اليسار لأن الاخ سيناوى عاكسها فهو يضع صورة لكل بلوك بالعكس و لكن هذة الطريقة لها اثار سلبية فإنك تستطيع ان تغير رأس البلوك فقط و لكن لا تستطيع ان تغير شكل البلوك كاملا سواء خلفيتة او حوافة او غير ذلك .

الطريقة الاخرى التى شرحها الأخ ابو منار و هى فى نظرى افضل الطرق للحصول على تغيير كامل فى شكل اى بلوك فى القوائم .

شرح الطريقة على الرابط التالى :-

http://www.swalif.net/softs/showthre...E1%C8%E1%E6%DF


اخوى Alhawe Graphic

جزاك الله خيرا على مداخلتكم و الاجابة على سؤالك الأول :-

طبعا عندما نحذف رأس البلوك هناك دالة فى ملف theme.php الموجود مع الثيم ( صورة لكل بلوك )

الدالة مكتوب بها
function themesidebox($title, $content) {
$img_name=explode(" ",$title);
$img_nametwo=$img_name[0];
if(file_exists("themes/islamy/images/blocks/$img_nametwo.jpg")) {
echo "<IMG SRC=\"themes/islamy/images/blocks/$img_nametwo.jpg\" WIDTH=\"159\" HEIGHT=\"40\"><br />";
} else {
echo "<BODY topmargin=\"0\" leftmargin=\"0\"><table border=\"0\" cellspacing=\"1\" cellpadding=\"1\" WIDTH=\"159\" HEIGHT=\"40\" background=\"themes/islamy/images/Block/Hassa.jpg\" align=\"center\"><td><CENTER><FONT class=content><br>$title</FONT></CENTER></td></tr>";
}
$tmpl_file = "themes/islamy/blocks.html";
$thefile = implode("", file($tmpl_file));
$thefile = addslashes($thefile);
$thefile = "\$r_file=\"".$thefile."\";";
eval($thefile);
print $r_file;
}

حيث ان عنوان مجلد صور رأس البلوكات هو themes/islamy/images/blocks/$img_nametwo.jpg
و طول و عرض صورة رأس البلوك هى WIDTH=\"159\" HEIGHT=\"40
و خلفية رأس البلوك هى themes/islamy/images/Block/Hassa.jpg
طبعا اذا كانت صورك بإمتداد gif فإنك تغير فى themes/islamy/images/blocks/$img_nametwo.jpg
إلى themes/islamy/images/blocks/$img_nametwo.gif
و تأكد من ان العرض و الطول متساوين مع صورك فإن لم يكن فعدل فى دالتهم .

و لو ركزت قليلا بإذن الله ستعرف المزيد و المزيد

اما بخصوص السؤال الثانى :-

والله ما جربت عمل اطار من قبل لكن اذا اردت ان تأتى الصور و البلوكات كلها فى وسط الصفحة عندما يكون ال resiolatin للشاشة مثلا 1024 * 768
فإنك تدخل على ملف header.html و تعمل توسيط للtable بتاع الهيدر بالضغط كليك يمين بالماس ثم
بالضغط على table proprties و اختيار align center

و طبعا تجعل حجم البانر مثلا 777 * 128 يعنى المهم لا تعطي الجدول عرض 100%

و ايضا ال story_home.html و ال footer.html

مش عارف وضحت ولا لا
والله المستعان

[أبو فيصل]

السلام عليكم

الاخ العزيز eltawoos.com

الله يوفقك بالدنيا والآخرة على الشرح الجميل

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

[Stylat]

شرح مرتب ومختصر ودقيق ..

الله يوفقك ..وجزاك الله خيرا

[عبد الله هُربي]

شرح أكثر من رااااااااااااائع ..

والى الاماااااااااااااام ..

وخالص المودة ,,

[Crypted]

اخي الغالي الطاوس .. سلمت يداك فيما صنعت وجزاك المولي عز و جل عنها كل الخير .. و جعلها في ميزان حسناتك