المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : دورة تصميم ستايل احترافي من تصميمه الى تركيبه من عبد الله


عـبـد الـلـه
13-12-2007, 09:28 مساءً
السلام عليكم ورحمة الله وبركاته

كيف حالكم إن شاء الله بخير http://traidnt.net/vb/images/smilies/icon30.gif

احببت ان اضع هذه الدورة في المعهد ولا اريد سوى الدعاء لي http://traidnt.net/vb/images/smilies/tears.gif

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

نظره على دروس الدورة http://traidnt.net/vb/images/smilies/cupidarrow.gif

الدرس الأول تصميم ستايل وتقطيعه
الدرس الثاني تركيب الإستايل بالفرونت بيج+وضع روابط الموقع مثل الرئيسية وغيرهــآ+وتغيير روابط الصور لكي يراها المتصفحين +وتركيبه بالمنتدى +ورفع الصور الى الموقع http://traidnt.net/vb/images/smilies/nosweat.gif
الدرس الثالث (هديه مني لكم ايقونات مجانيه باللون البنفسجي للإستايل(المستخدم بالدرس)مني لكم ..وطريقة تركيبها بالإستايل وتغيير مسارهـآ
الدرس الرابع تغيير الوان المنتدى Css لكي يناسب لون الإستايل..
الدرس الرابع تصميم وتركيب بعض القوالب المهمه مثل (forumhome+forumdisplay+navbar)
الدرس الخامس استخراج ملف XML http://traidnt.net/vb/images/smilies/nosweat.gif
نبدأ على بركة الله تعالى

الدرس الأول تصميم ستايل وتقطيعه http://traidnt.net/vb/images/smilies/blushing.gif

ملاحظة (هذا القسم للمحترفين يعني مو واحد يجيني ويقول كيف حرك اداة الباث http://traidnt.net/vb/images/smilies/nosweat.gif او غيرها لان )الدرس سهل مرة http://traidnt.net/vb/images/smilies/thumbdown.gif)

اول افتح برنامج الفوتوشوب(انا استخدم الثامن) وافتح المقاس التالي
http://www.madrid-club.info/vb/droos/drs1/1.jpg

اختر لون خفيف تحت واللي فوق ثقيل http://traidnt.net/vb/images/smilies/cupidarrow.gif

http://www.madrid-club.info/vb/droos/drs1/2.jpg

استخدم هذه الأداة لعمل الشكل التالي
http://www.madrid-club.info/vb/droos/drs1/3.jpg

هذا هو الشكل المطلوب http://traidnt.net/vb/images/smilies/nosweat.gif
http://www.madrid-club.info/vb/droos/drs1/4.jpg

الأن اعمل مثل ماهو موضح

http://www.madrid-club.info/vb/droos/drs1/5.jpg

الأن اذهب الى الاوبيشن http://traidnt.net/vb/images/smilies/smoke1.gif
http://www.madrid-club.info/vb/droos/drs1/6.jpg

ادخل على الحدود وضع الحد (1) واختر لون اعمق من لون الهيدر http://traidnt.net/vb/images/smilies/icon-mos.gif
http://www.madrid-club.info/vb/droos/drs1/7.jpg

إعمل مثل هذا الشكل بأداة الباث المعروفه وضع اللون اغمق او اثقل من لون الهيدر
http://www.madrid-club.info/vb/droos/drs1/8.jpg

اذهب الى ماهو موضح
http://www.madrid-club.info/vb/droos/drs1/10.jpg

اذهب الى الحدود وضع الحد (1) واختر اللون اغمق من الشكل المطلوب

http://www.madrid-club.info/vb/droos/drs1/11.jpg

اداة تحريك عمل الباث للشكل المطلوب
http://www.madrid-club.info/vb/droos/drs1/12.jpg

انتبه جزاك الله خير في النقطه التاليه
http://www.madrid-club.info/vb/droos/drs1/13.jpg

اختر الأداة التاليه
http://www.madrid-club.info/vb/droos/drs1/14.jpg

واعمل مثل ماهو موضح
http://www.madrid-club.info/vb/droos/drs1/16.jpg

واختر هذه الأداة لعمل الدوائر كــزينـه للهيدر
http://www.madrid-club.info/vb/droos/drs1/17.jpg

انظر الى الدوائر على الجهة اليسرى والجهة اليمنى
http://www.madrid-club.info/vb/droos/drs1/18.jpg

هذه هي أداة الباث (ومن اراد ان يحترف هذه الأداة الذهاب لدرس الأخAHMOD
http://www.madrid-club.info/vb/droos/drs1/20.jpg

اعمل مثل هذا الشكل واعتقد انه سهل ولاحظ انه استخدم كزينه للهيدر واجناب للتصميم
http://www.madrid-club.info/vb/droos/drs1/21.jpg

دبل لاير للشكل واعكس اتجاهه وضعه يسار التصميم
http://www.madrid-club.info/vb/droos/drs1/22.jpg

لعكس اتجاه التصميم اذهب الى التالي

http://www.madrid-club.info/vb/droos/drs1/23.jpg

http://www.madrid-club.info/vb/droos/drs1/24.jpg

http://traidnt.net/vb/images/smilies/shiny01.gif
http://www.madrid-club.info/vb/droos/drs1/25.jpg

الان اذكر يوم سوينا شكل للهيدر فوق روح وسوي له دبل لاير واعكس اتجاهه
http://www.madrid-club.info/vb/droos/drs1/22.jpg

طريقة عكس الأتجاه ليصبح (فوتر) في الإستايل
http://www.madrid-club.info/vb/droos/drs1/27.jpg

طالع الشكل اللحين ^_^
http://www.madrid-club.info/vb/droos/drs1/28.jpg

اللحين هذا هو شكل الإستايل المطلوب عمله(جاء دورك هالحيين لإظافة الأشكال التجميليه وتغيير الألوان وإظافة الأزرار وغيره على حسب خبرتك ) http://traidnt.net/vb/images/smilies/bleh.gif
http://www.madrid-club.info/vb/droos/drs1/29.jpg

اللحين انا اظفت الوان (هذا افضل لون شفته وبحياتي ) http://traidnt.net/vb/images/smilies/blushing.gif وازرار وصور وغيرها والصورة توضح
http://www.madrid-club.info/vb/droos/drs1/30.jpg

اللحين هذا هو التقطيع والحمد لله ان اسهل شيء هو التقطيع خاصه انه من دون منحنيات

http://www.madrid-club.info/vb/droos/drs1/31.jpg

الان احفظ العمل بعد تقطيعه في مجلد مع الصور المقطعه وضروري اسم الإستايل يكون بالإنجليزي
مثال (tdreb)

الحمد لله انتهينا من تصميم الإستايل وتقطيعه وهو الدرس الأول من الدوره


لتحمــيل مجلــد الصوور من هنـا
(http://traidnt.net/vb/attachment.php?attachmentid=160711&d=1186287062)
واي استفسار انا حاظر http://traidnt.net/vb/images/smilies/icon30.gif

عـبـد الـلـه
13-12-2007, 09:31 مساءً
http://www.moeforum.net/vb1/uploaded/26076_1186057168.gif

السلام عليكم ورحمة الله وبركاته ..
الدرٍس الثاني اعتماد الإستايل بالفرونت بيج وتركيبه على المنتدى

بسم الله .توكلنا على الله

افتح برنامج الفرونت بيج
http://www.madrid-club.info/vb/droos/drs2/1.jpg



تعليمات برمجيه
http://www.madrid-club.info/vb/droos/drs2/2.jpg

احذف الكود

http://www.madrid-club.info/vb/droos/drs2/3.jpg

اتجه الى كلمه تصميم

http://www.madrid-club.info/vb/droos/drs2/4.jpg

الخصائص
http://www.madrid-club.info/vb/droos/drs2/5.jpg

^_^

http://www.madrid-club.info/vb/droos/drs2/6.jpg

ازرع الجداول الموضحه
http://www.madrid-club.info/vb/droos/drs2/7.jpg

خصائص الجدول

http://www.madrid-club.info/vb/droos/drs2/8.jpg

^_^

http://www.madrid-club.info/vb/droos/drs2/9.jpg

ادراج صورة

http://www.madrid-club.info/vb/droos/drs2/10.jpg
توضح ^_^

http://www.madrid-club.info/vb/droos/drs2/11.jpg

اللحين ادرجنا الصور نبي انتباه شوي
http://www.madrid-club.info/vb/droos/drs2/12.jpg

اضغط على الصور العلويه اليمنى
http://www.madrid-club.info/vb/droos/drs2/13.jpg

اتبع
http://www.madrid-club.info/vb/droos/drs2/14.jpg


بعد مارعت موافق..ارجع له ثاني مرة تحصل القيمه (3) ضعهــــــــــآ (0)
http://www.madrid-club.info/vb/droos/drs2/15.jpg


شوف اللحين
http://www.madrid-club.info/vb/droos/drs2/16.jpg

تم التوزيع
http://www.madrid-club.info/vb/droos/drs2/17.jpg

الصورة تشرح نفسهـآ’
http://www.madrid-club.info/vb/droos/drs2/18.jpg

الصورة تشرح نفسهـآ’
http://www.madrid-club.info/vb/droos/drs2/19.jpg

الصورة تشرح نفسهـآ’

http://www.madrid-club.info/vb/droos/drs2/20.jpg

الصورة تشرح نفسهـآ’

http://www.madrid-club.info/vb/droos/drs2/21.jpg

الصورة تشرح نفسهـآ’
http://www.madrid-club.info/vb/droos/drs2/22.jpg


الصورة تشرح نفسهـآ’

http://www.madrid-club.info/vb/droos/drs2/23.jpg


الصورة تشرح نفسهـآ’
.
http://www.madrid-club.info/vb/droos/drs2/24.jpg

^_^

http://www.madrid-club.info/vb/droos/drs2/25.jpg

^_^

http://www.madrid-club.info/vb/droos/drs2/26.jpg


^_^

http://www.madrid-club.info/vb/droos/drs2/27.jpg
^_^

http://www.madrid-club.info/vb/droos/drs2/29.jpg

شد الأطراف اللحين
http://www.madrid-club.info/vb/droos/drs2/30.jpg

انظر بعد شد الأطراف!
http://www.madrid-club.info/vb/droos/drs2/31.jpg

التقسيم للخلاياا
http://www.madrid-club.info/vb/droos/drs2/32.jpg
3 اعمده
http://www.madrid-club.info/vb/droos/drs2/33.jpg

^_^
http://www.madrid-club.info/vb/droos/drs2/34.jpg


&_&
http://www.madrid-club.info/vb/droos/drs2/35.jpg
افعل مثل مافعلنا بالهيدر
http://www.madrid-club.info/vb/droos/drs2/36.jpg

اللحين ادرج صورة على اليمين

http://www.madrid-club.info/vb/droos/drs2/37.jpg


وروح للخصائص
http://www.madrid-club.info/vb/droos/drs2/38.jpg

مثل قبل شوي يوم قلنا غير القيمه الى 0
http://www.madrid-club.info/vb/droos/drs2/39.jpg


^_^

http://www.madrid-club.info/vb/droos/drs2/40.jpg

ضع الماوس هناك وادرج صورة يسرى
http://www.madrid-club.info/vb/droos/drs2/42.jpg


هذه هي الصورة
http://www.madrid-club.info/vb/droos/drs2/43.jpg

خصائص الصورة نفس اللي قبل شوي
http://www.madrid-club.info/vb/droos/drs2/44.jpg


يسار ^_^

http://www.madrid-club.info/vb/droos/drs2/45.jpg

http://www.madrid-club.info/vb/droos/drs2/46.jpg

اللحين جاء دورك سوي نفس العمليه السابقه بالفوتر
http://www.madrid-club.info/vb/droos/drs2/47.jpg

ادرج رابط

http://www.madrid-club.info/vb/droos/drs2/48.jpg

الرئيسية
http://www.madrid-club.info/vb/droos/drs2/49.jpg


التسجيل
http://www.madrid-club.info/vb/droos/drs2/50.jpg


التحكم
http://www.madrid-club.info/vb/droos/drs2/51.jpg

الخروج
http://www.madrid-club.info/vb/droos/drs2/52.jpg


اظافة الحقوق
http://www.madrid-club.info/vb/droos/drs2/53.jpg
^_^
http://www.madrid-club.info/vb/droos/drs2/54.jpg

اللحين سوي توسيط للمنتدى
http://www.madrid-club.info/vb/droos/drs2/55.jpg

هذا بعد ماسوينا توسيط

http://www.madrid-club.info/vb/droos/drs2/56.jpg


ازالة روابط سطح المكتب
http://www.madrid-club.info/vb/droos/drs2/58.jpg





استبدــ’آل
http://www.madrid-club.info/vb/droos/drs2/59.jpg


اتركه فاضي
http://www.madrid-club.info/vb/droos/drs2/60.jpg

تمم ^_^
http://www.madrid-club.info/vb/droos/drs2/61.jpg

هذا هو الهيدر
http://www.madrid-club.info/vb/droos/drs2/62.jpg


الفوتر
http://www.madrid-club.info/vb/droos/drs2/63.jpg

اذهب الى لوحة التحكم ..التحكم بالإستايلات
http://www.madrid-club.info/vb/droos/drs2/64.jpg

من تحت اظافة ستايل جديد
http://www.madrid-club.info/vb/droos/drs2/65.jpg

انا سميته tdreb
http://www.madrid-club.info/vb/droos/drs2/66.jpg

اللحين اذهب الى القوالب الشائعه
http://www.madrid-club.info/vb/droos/drs2/67.jpg

هذا قال الهيدر ..الصق القالب اللي بالفرونت بيج فيه
http://www.madrid-club.info/vb/droos/drs2/68.jpg

هذا هو القالب اللي بالفرونت بيج
http://www.madrid-club.info/vb/droos/drs2/69.jpg


هذا هو القالب بعد اظافته
http://www.madrid-club.info/vb/droos/drs2/70.jpg


هذا اعتبره مو موجود ^_^
http://www.madrid-club.info/vb/droos/drs2/71.jpg


هذا هو قالب الفوتر..نذهب الى اخر القالب
http://www.madrid-club.info/vb/droos/drs2/72.jpg

نلصق هذا الكود بآآخر قالب الفوتر

http://www.madrid-club.info/vb/droos/drs2/73.jpg


هذا هو الكود بعد اظافته
http://www.madrid-club.info/vb/droos/drs2/74.jpg


نذهب لبرنامج الإف تي بي ftp ندخل على مجلد الفي بي vb ..
http://www.madrid-club.info/vb/droos/drs2/76.jpg

بعد مادخلنـآ لمجلد الفي بي vb نذهب من الخيار اليسار الى مكان مجلد الصور ويمين الماوس ونرفع المجلد ليصلح المسار
vb/tdreb
http://www.madrid-club.info/vb/droos/drs2/77.jpg

واللحين روح للمنتدى وشوف اللإستايل
وسأضع لكم ايقونات خاصه بالإستايل المستخدم ^_^

واي شيء انا حاظر

عـبـد الـلـه

عـبـد الـلـه
13-12-2007, 09:32 مساءً
لتحميل الأيقونات المجانيه من هنـآ (http://traidnt.net/vb/attachment.php?attachmentid=161901&d=1186596982) :3:

عـبـد الـلـه
13-12-2007, 09:34 مساءً
السلام عليكم ورحمة الله وبركاته ...

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


سويت الشرح فيديو وان شاء الله يعجبكم ..وبحجم خيآلي انت بس حمل وشوف .. ^_^
هو عبارة عن تصميم وتقطيع للقوالب .. (forumhome)-(forumdisplay)-(navbar)
كل خطوة في الدروس هذا لهآ فيديو لوحدهآ وهذا يسهل عمليه التحميل .. ^_^


اضغط على الكلام ليظهر لك الرابط ...

فيديو التصميم والتقطيع للقوالب من داخل الفوتوشوب (http://www.zshare.net/download/3919101bc0d732)

فيديو تأطير قالب (forumhome) (http://www.zshare.net/download/3919001cd2e242)

فيديو تأطير قالب (forumdisplay) (http://www.zshare.net/download/3919070fc33747)

فيديو تأطير قالب (navbar) (http://www.zshare.net/download/3918924b933ebe)


وهذه قوالب جآهزة فقط اظف الصور ...
من هنا (http://www.traidnt.org/index.php?act...tfile&id=11035)

والله ولي التوفيق... وأي استفسار بالدرس انا حآظر ..
اخوكم عـبـد الـلـه

عـبـد الـلـه
13-12-2007, 09:37 مساءً
اليوم هو أخر درس من دروس الدورة .


اللي هو تلوين Css وتنزيل الإستايل .

رابط الدرس .. ملف وورد http://traidnt.net/vb/images/smilies/icon30.gif

من هنـآ (http://www.zshare.net/download/4058849614f7ea/)

او من هنـآ (http://www.traidnt.org/index.php?action=viewfile&id=11788)

والله ولي التوفيق ...

اخوكم الصغير

عـبـد الـلـه

:9:

ولد الفجيرة
15-12-2007, 02:26 صباحاً
ماشاء الله عليك اخوي عبد الله
مبدع × مبدع = ابداع بلا حدود
الله يخليك على هذي الدوره الطيبه
وان شاء الله الافاده للكل حبيبي
دمت بود

شمس الشموس
21-12-2007, 05:43 صباحاً
السلام عليكم

اخوي يعطيك الف عافيه على المجهود الطيب
لكن الصور مابتظهر لي ياليت اخوي تضعها في ملف مضغوط
ولك جزيل الشكر

بنوتهـ
28-12-2007, 02:50 مساءً
والله دورهـ حلوهـ ورآئعهـ .. استفدت اكثير منها ..
تسلم يدينك وعساك على القوهـ عبدالله
والله يجعلها في ميزان حسناتك
وآسهل خطوه الي بالفوتوشوب على قدي وان شاء الله ابدع فيها ..:d
اما الفرونت بيج والله تشيب الراس:18:

DR JORDANIAN
29-12-2007, 03:30 مساءً
جزاك ربي ألف ألف خير

شكرا على الشرح الأروع من رائع

عمر
08-01-2009, 12:08 مساءً
بارك الله فيك

sheen404
30-11-2011, 11:42 مساءً
شكراااا لك

رووعه

AskMe
12-12-2011, 07:29 صباحاً
موفق باذن الله اخى

roro star
12-12-2011, 08:44 صباحاً
مشكوووووووووووووووووووووووووووووووووووور