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

مشاهدة النسخة كاملة : :+::[ الدورة الشـاملة لتعليــم تصميم وتوزيع الإستايل style ( اعادة رفع الصور ) ]::+:



walid
10-30-2013, بتوقيت غرينيتش 08:40 PM
http://www.dzbatna.com/images/icons/icon30.gif :+::[ ط§ظ„ط¯ظˆط±ط© ط§ظ„ط´ظ€ط§ظ…ظ„ط© ظ„طھط¹ظ„ظٹظ€ظ€ظ… طھطµظ…ظٹظ… ظˆطھظˆط²ظٹط¹ ط§ظ„ط¥ط³طھط§ظٹظ„ ( ط§ط¹ط§ط¯ط© ط±ظپط¹ ط§ظ„طµظˆط± ) ]::+: (http://www.dzbatna.com/t772893/)




السلام عليكم ورحمة الله
حياكم الله وبياكم وسدد على طريق الحق خطاي وخطـآكم
أمـآ بعد
بعد درس مفصلنا السابق في سلسلة الدروس الإحترافية من فـــوكـــس
وقد كان الفصل الأول.. يتعلق بالتصميم والتقطيع
وقد قمنا بحفظ البنر بصيغة gif أو jpg
وقمنا بعمل شريط المواضيع
ولكن لم نقطعه فسوف نقوم بتقطيعه الآن قبل الخوض في الدروس البرمجية
قم باختيار الأداة كما في الصورة التالية
http://www.mwadah.com/images/statusicon/wol_error.gifنقره على هذا الشريط لتكبير الصورةhttp://www.mwadah.com/imgcache/5757.imgcache
وقم بتقطيعه بالشكل التالي
http://www.mwadah.com/images/statusicon/wol_error.gifنقره على هذا الشريط لتكبير الصورةhttp://www.mwadah.com/imgcache/5758.imgcache
وقم بحفظه من القائمة
file/save for web
ستفتح هذه النافذة
وقمت بالتطرق إليها .. للتقليل من حجم الصورة ..مع مراعاة الجودة
http://www.mwadah.com/images/statusicon/wol_error.gifنقره على هذا الشريط لتكبير الصورةhttp://www.mwadah.com/imgcache/5759.imgcache
1 : هذه عدد الألوان المستخدمة يمكنك تقليل الحجم إلى 200 أو 128 بس أنتبه
للجودة
2: يمكنك زيادتها بنسبة قلية جداً كـ 3%
ويمكنك ملاحظة الحجم كما هو محدد في الصورة
بعدها سوي حفظ وتكون انحفظت
::::::::::::::::::::::::::::::::
(( القســم البرمجـــــي ))
سنبدأ من أعحلى المنتدى forum إلى أسفل بإذن الله
وهو كالآتي :
1-header
2-navbar
3-forumhome
4-foter
ثم ننتقل للصفحات الداخية
forumdisplay
:::::::::::::::::::::::::::::::::
أولاً الهيدر header ...
افتح برنامج الفرونت بيج
وافتح عمل جديد
http://www.mwadah.com/imgcache/5760.imgcache
واضغط على التعيمات البرمجية كما هو موضح بالصورة
وقم بمسح التعليمات كاملة
كما بالصورة
http://www.mwadah.com/imgcache/5761.imgcache
الآن توجه ...إلى قائمة الجداول
وقم بعمل جدول 1 في 1
http://www.mwadah.com/imgcache/5762.imgcache
الآن قم بالضغط على الجدول بالزر الأيمن
واختر خيارات الجدول .. انتبه ( وليس خيارات الخلية )
http://www.mwadah.com/imgcache/5763.imgcache
ستفتح لنا نافذة باشكل التالي
http://www.mwadah.com/imgcache/5764.imgcache
قم باستبدال .. التغيرات كما في الصورة الثانية
http://www.mwadah.com/imgcache/5765.imgcache
بعد ذلك
قم بإضافة الصورة داخل الجدول ( صورة البنر )
لاحظ...
http://www.mwadah.com/imgcache/5766.imgcache
اييه .. الحين جينا للشغل ..
بتقول كيف بنضيف أكثر من رابط على صورة وحدة
بقولك ..سوي مثل ما أسوي ...
http://www.mwadah.com/imgcache/5767.imgcache
قم باختيار الأداة الموضحة.. ثم قم برسم .. مستطيل أو مربع حسب شكل الزر..
أول ما تخلص رسم راح تطلع لك هذه النافذة تلقائياً
http://www.mwadah.com/images/statusicon/wol_error.gifنقره على هذا الشريط لتكبير الصورةhttp://www.mwadah.com/imgcache/5768.imgcache
حط فيها الكود code على حسب الزر ...
وتفضل يا حبيبي ..كل الأكواد اللي تحتاجها في الهيدر header

الرئيسيه
كود code PHP:

$vboptions[forumhome].php?$session[sessionurl]


المكتب ( لوحة تحكم العضو )
كود code PHP:

usercp.php?$session[sessionurl]


التسجيل
كود code PHP:

register.php?$session[sessionurl]


البحث
كود code PHP:

search.php?$session[sessionurl]


التعليمات ( لا أنصح به .. إلا بعد ترقيع ثغرة faq.php )
كود code PHP:

faq.php?$session[sessionurl]


قائمة الاعضاء ( لا أنصح به .. إطلاقاً )
كود code PHP:

memberlist.php?$session[sessionurl]


التقويم ( لا أنصح به .. لحين صدور النسخة التي تلي 3.5.4 )
كود code PHP:

calendar.php?$session[sessionurl]


الخروج... ( لا أنصح به علشان الأعضاء لا يطعوا ..... http://www.dzbatna.com/images/smilies/cupidarrow.gif أمزح وياكم )
كود code PHP:

login.php?$session[sessionurl]do=logout


::::::::::::::::::
وبعد انتهائك من جميع الأزرار عى حسب الهيدر header
اذهب إلى التعليمات البرمجية في الفرونت بيج
http://www.mwadah.com/images/statusicon/wol_error.gifنقره على هذا الشريط لتكبير الصورةhttp://www.mwadah.com/imgcache/5769.imgcache
لاحظ
وقم بمحس كل المجلدات .. واترك فقط اسم الصورة
مثلاًُ هذا الكود code
file:///F:/AppServ/www/vb2/style-fox...-fox84_bnr.gif (file:///F:/AppServ/www/vb2/style-fox84/fox-fox-fox84_bnr.gif)
نقوم بمسح .. المجلدات ..( المسارات )
ونذهب إلى داخل vb وننشيء ملف جديد (ملف صور الإستايل style )
مثلاً أنا سميته style-fox84
فيصبح رابط الصورة كالتالي
style-fox84/fox-fox-fox84_bnr.gif
ولا تنسى تحط الصورة داخل المجلد اللي سويته ..
وبعدها انسخ الكود code ...
وروح به إلى تمبت header
وامسح كل اللي فيه وضع الكود code اللي أنشأته أنت باستخدام الفرونت بيج
وهكذا تكون قد أنهيت تركيب install البنر .. وروابطه .. على تمبت الهيدر header
لاحظ الصورة
http://www.mwadah.com/images/statusicon/wol_error.gifنقره على هذا الشريط لتكبير الصورةhttp://www.mwadah.com/imgcache/5770.imgcache
:::::::::::::::::::
الحين نجي لشريط آخر عشر مواضيع عشــآن نخلص من الهيدر header مرةوحدة
تذكرون ..يوم حفظنا تصميم .. شريط آخر عشر مواضيع ..
أنا سميته sddd.html
وراح أفتحه بالفرونت بيج ...
شوف
http://www.mwadah.com/images/statusicon/wol_error.gifنقره على هذا الشريط لتكبير الصورةhttp://www.mwadah.com/imgcache/5771.imgcache
الحين فتحناه بالفرونت بيج ..
أبيك تصحصح ..وياي شوي .. الحين
شوف يا عزيزي
اضغط على الصفحة بعد فتحها بالزر الأيمن..



وقم بالتالي
http://www.mwadah.com/images/statusicon/wol_error.gifنقره على هذا الشريط لتكبير الصورةhttp://www.mwadah.com/imgcache/5772.imgcache
وراح تطلع لك نافذة مثل هاذي
إذاهب إلى القائمة none
وعدلها للتالي
http://www.mwadah.com/images/statusicon/wol_error.gifنقره على هذا الشريط لتكبير الصورةhttp://www.mwadah.com/imgcache/5773.imgcache
شوف شو صار ...
كل شي انقلب وخرب ؟؟
لا أطمنك .. احنا يوم اخترنا هذا الإختيار قمنا بعكس الصورة اليمنى بدل اليسرى
شوف الصورة
http://www.mwadah.com/images/statusicon/wol_error.gifنقره على هذا الشريط لتكبير الصورةhttp://www.mwadah.com/imgcache/5774.imgcache
فهمت كيف ...
حنا ويش بنسوي بنرجع الصور كل وحدة لمكانها .. نجي مثلاًُ
عند الجدول ( الصورة اللي على اليمين )
http://www.mwadah.com/images/statusicon/wol_error.gifنقره على هذا الشريط لتكبير الصورةhttp://www.mwadah.com/imgcache/5775.imgcache19
ونضع بدل الصورة اللي شكلها مقلوب .. الصورة الأصلية ..
http://www.mwadah.com/images/statusicon/wol_error.gifنقره على هذا الشريط لتكبير الصورةhttp://www.mwadah.com/imgcache/5776.imgcache
شفت كيف رجعت مثل ماكانت ...
سوي نفس الحركة على الصورة اللي في اليسار بعد ..
الحين بتقول فوكس ليش مسوي هاذي الزحمة كلها ؟؟
يا حبيبي لأنك إذا ما سويت هالزحمة بتروح المنتدى forum بعد ما تركب الأكواد.. في الهيدر header
بتلاقي الدنيا عفسة اليمين يسار واليسار يمين...
فهمت كيف ..
الحين بنروح لشي مهم مرة
نروحج للصورة اللي في النص ..
اللي مفروض يتحرك فيها النص (آخر عشر مواضيع )
وامسحها شوف الصورة
لاحول ولا قوة إلا بالله ..
صارت لنا مشكلة ثانية ..
لا تخاف حلها عندي ...
وطرقت إلى هذه المشكلة لأن الكثر يعاني منها فهذه طريقة قمت بابتكارها بعد العذاب الذي
كنت أواجهه
شوف ياقلبي .. رجع كل اللي سويته .. (يعني الصورة اللي مستحهتا رجعها )
اضغط ctrl+z
طيب حدد على الصورة وخش وبعدها اضغط بازر اليمين عيها ..
واختار خصائص الخلية
http://www.mwadah.com/images/statusicon/wol_error.gifنقره على هذا الشريط لتكبير الصورةhttp://www.mwadah.com/imgcache/5777.imgcache
بعدها ستخرج لنا نافذة كهذه
شوفها نجي عند اخلفية ونختار استعراض ونبحث عن نفس الصورة اللي محددين الخلية
حقتها
http://www.mwadah.com/images/statusicon/wol_error.gifنقره على هذا الشريط لتكبير الصورةhttp://www.mwadah.com/imgcache/5778.imgcache
وعطه أوكي
الحين نخش على التعيمات البرمجية
شوف
http://www.mwadah.com/images/statusicon/wol_error.gifنقره على هذا الشريط لتكبير الصورةhttp://www.mwadah.com/imgcache/5779.imgcache
الحين انسخ المحدد عندك في الصورة الجاية
http://www.mwadah.com/images/statusicon/wol_error.gifنقره على هذا الشريط لتكبير الصورةhttp://www.mwadah.com/imgcache/5780.imgcache
ونقوم بلصقه .. في كود code الخلفية
من بداية
images
بالشكل هذا
http://www.mwadah.com/images/statusicon/wol_error.gifنقره على هذا الشريط لتكبير الصورةhttp://www.mwadah.com/imgcache/5781.imgcache
ونقوم بحذفكود code الصورة
الحين نخش على التصميم في الفرونت بيج شوف كيف ظابت وحليو ماشاء الله
والمكان كأن مافيه صورة
أقدر أضيف عيه كود code آخر عشر مواضيع وأنا مرتاح .. وأكتب عليه
http://www.mwadah.com/images/statusicon/wol_error.gifنقره على هذا الشريط لتكبير الصورةhttp://www.mwadah.com/imgcache/5782.imgcache
ثم نذهب للتعليمات البرمجية
ونضغط على زري ctrl+f لكي نقوم بالبحث عن المسارات الغير المرغوب بها واستبدالها
باللتي نريد بكل سهولة
شوف الصورة
http://www.mwadah.com/images/statusicon/wol_error.gifنقره على هذا الشريط لتكبير الصورةhttp://www.mwadah.com/imgcache/5783.imgcache
ثمكما فعلنا مع الهيدر header اضغط بالزر اليمين .. ثم خصائص الجدول.. وعطه نفس الإعدادات اللي سويناها علشان يومتركبه في المنتدى forum .. يكون ظابط (جاي في النص )
::::::::::
ثم ننسخ الأكود code من بداية
<div align=&quot;center&quot;>
<TABLE WIDTH=780 BORDER=0 CELLPADDING=0 CELLSPACING=0>

إلى نهاية
</TABLE>
</div>
وضعها في آخر سطر في الهيدر header
وهكذا نكون قد تمكن من الإنتهاء من الهيدر header بشكل عام
::::::::::::::::::::::::::::
مذا تستفيد من ادرس مفصل ؟
1 - بهذه الطريقة تتمكن من اضافة اي شي.. في المنتدى forum ( أوسمة- إعلانات )
وبطريقة مميزة .
2 - قمت في الدرس مفصل بالتطرق إلى المشاكل التي تواجهة interface المصممين في العادة ذللك تبدوا الخطوات طويلة..
إلى أنها في منتهى السهولة ..وتستطيع القيام بها في وقت قياسي ... إذا تمكنت
من اجتياز تلك المشاكل ( الأخطاء )
وهذه الأخطاء تنتج عن .. ( نسيان المصمم لخطوات اساسية قبل البدأفي التصميم )
قبل أن تبدأ في تصميم استايل style
تأكد من أن جسمك .. قد أخذ راحة كافية من النوم ..ولايكون هنالك مايشغل بالك..
::::::::::::::::::::::::::::::::::
أما في الدرس مفصل القادم .. بإذن الله
سنتطرق إلى جداول وأقسام المنتديات الفورم هوم.. وقد قمت بجعله درس مفصلاً مستقلاً..
لكونه من أصعب الخطوات ..هو وتمبلت الناف بار ..
إلى حين ذلك الوقت .. أنا حاضر للرد على استفساراتكم ..
وخلونا نشوف تطبيقاتكم
ولو بطلب منكم ..طلب صغير ..
أدعولــي ووالدي بالتوفيق قي الدنيا والآخرة ..
محبكم : فـــــوكـــــس

وآخر دعوانا أن الحمد لله رب العالمين
وصلي اللهم وسلم على أفضل الخلق أجمعين






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



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

استعمل مربع البحث في الاسفل لمزيد من المواضيع


سريع للبحث عن مواضيع في المنتدى