[دورة تصميم وتكويد - البداية] إستايل style VB4

[walid]

http://www.dzbatna.com/images/icons/idea.gif [ط¯ظˆط±ط© طھطµظ…ظٹظ… ظˆطھظƒظˆظٹط¯ - ط§ظ„ط¨ط¯ط§ظٹط©] ط¥ط³طھط§ظٹظ„ VB4 (http://www.dzbatna.com/t2194761/)




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

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

[دورة تصميم وتكويد] إستايل style VB4

تصميم وتكويد استايل style متكامل للمنتدي الشهير vbuliten 4 ننطلق من الصفر نصمم علي الفوتوشوب ثم نقوم بالتكويد باستعمل css3 و jQuery وقليل من HTML

------------------------------------------------------------------------------------------------------
1- مستلزمات الدرس مفصل :

الدورة ليست للمبتدئين ( اعتذر ) بجب عليك ان تكون مرتاح مع ال css كشرط و القليل من jQuery و HTML طبعا او تكون لديك المبادئ الاساسية . هذا اولا ثم سنحتاج الي الاشياء الاتية

***

1- لسهولة العمل علي الحاسب ولان هناك من لا تتوفر لديه استضافة HOTING سنحتاج الي server محلي استعمل اي واحد تريد هناك wamp و xamp للويندوز و mmap للماك ويكون التنصيب setup مثل اي برنامج حاسب امر عادي ولا يحتاج الي اعدادات او لظبط . انا سأستعمل wamp يمكنكم التحميل من الموقع الرسمي WampServer, la plate-forme de développement Web sous Windows - Apache, MySQL, PHP (http://www.wampserver.com) ثم اضضغط علي التالي ( next ) الي نهاية التنصيب setup هذا كل شئ بالنسبة الي البرنامج . ثم للدخول الي صفحة البرنامج علي الرابط localhost

***

2- محرر نصوص متطور و سهل الاستعمل انا استعمل sublimetext 2 وضعت موضوع في المدونة blog حوله و اعداده من هنا تنصيب setup و اعداد محرر النصوص من هنا
تصيب و اعداد Submlitext2 و الاضافات | مدونة blog العربي (http://arabi.iblogger.org/%D8%AA%D8%B5%D9%8A%D8%A8-%D9%88-%D8%A7%D8%B9%D8%AF%D8%A7%D8%AF-submlitext2-%D9%84%D9%84%D8%B9%D9%85%D9%84-%D8%B9%D9%84%D9%8A-%D8%A8%D8%B1%D9%85%D8%AC%D8%A9-%D8%A7%D9%84%D9%85%D9%88%D8%A7%D9%82%D8%B9/)

او يمكنك استعمال اي محرر نصوص تفضل هناك الكثير Notepad ++ , Dreamwaver , ComodoEdit و الكثير الكثير . خلال هته السلسلة سنستعمل sublimetext 2 و Notepad ++

***

3- برنامج الفوتوشوب انا اعمل بالاصدار 6 لكن اي اصدار 4 او 5 يفي بالغرض ( لم استعمل 3 – 2 -1 ابدا ربما تنفع ايضا ) او ان كنت تجيد برنامج اخر لتحرير و تصميم الموتقع ينقع ايضا مثل Gimp , Fireworks , Illustrator , ……

***

4- اضافة ال firebug للمتصفح firefox ان كنت تفضل هذا المتصفح هته الاضافة سنستعملها كثيرا للتعرف علي اسماء ال ( Class و Id ) التي يستعملها ال Vbulliten 4 و كذلك للتعرف علي صفحة ال php التي تحتوي علي الكود code . سنتعلم كل هذا لحقا . كنصيحة افضل اداة التعرف علي الكود code الموجودة في Google Chrome لانها افضل من FireBug




***

5- كل المتصفحات الموجودة وذلك لمشاهدة التطابق في التكويد و عدم وجود فروقات بين المتصفحات اذن سنجتاج الي Firefox , Chrome , Safari , Opera , IE

------------------------------------------------------------------------------------------------------


ملاحظة:
لضيق الوقت لن اصمم قالب template من جديد سنقوم باستعمل قالب template مصمم من طرف purvb نعيد تصميمه من جديد علي الفوتوشوب بالعربية ثم نقوم بالبرمجة و التكويد …..

---------------------------------------------

نبدا على بركة الله الدروة ستكون عبارة عن 4 دروس مطوله و ستستغرق ان شاء الله شهراً كاملاً سأقوم بطرح درس مفصل واحد كل نهاية اسبوع ان شاء الله

***--------------------------------------------الفهرس-------------------------------------------***

البداية : اعداد الحاسب للعمل عليه تنصيب setup wamp و sublimText و Vbullitten

الدرس مفصل 1 : بداية تكويد الهيدر header

الدرس مفصل 2 : تكويد الصفحة الرئيسية

الدرس مفصل 3 : تكويد الصفحة مواضيع المنتديات

الدرس مفصل 4 : بقية الصفحات نظرة عامة

***-----------------------------------------------------------------------------------------***

ملاحظة < الإستايل style الذي نعمل عليه مرفق >

----------------------------------------------------------



النتيجة بعد التصميم

http://www.dzbatna.com/attachments/674830d1353688983t-vBulletin 4.jpg (http://www.dzbatna.com/attachments/674830d1353688983-vBulletin 4.jpg)
http://www.dzbatna.com/attachments/674829d1353688983t-vbdetails.jpg (http://www.dzbatna.com/attachments/674829d1353688983-vbdetails.jpg)

--------------------------------أنتهى----------------------------







التعديل الأخير كان بواسطة yob-Frozen; 23 - 11 - 2014 الساعة 19:50

ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)

الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif ملفات الدورة.zip (http://www.traidnt.net/vb/attachments/676642d1354889836-ملفات-الدورة.zip) (3.61 ميقابايت, عدد مرات المشاهدة 439 مرة)


https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©