دورة تصميم ستايل vb ( الستايلات الاحترافيه )

الدورة منقول يا اخواان


نبداء
بسم الله



"البرامج المستخدمه في الدوره "




1- برنامج الفوتوشوب :



برنامج Adobe Photoshop CS2 9.0.1



الوصف : برنآمج الفوتوشوب التآسـع الغني عن
التعريف ويعد من افضل واقوى البرامج لتحرير الصور .. الاصدار الجديد ذو
مواصفات راقية .. جدا جدا يستحق التحميل


للـتحميل ـآضغط هنآ



برنآمج Adobe Photoshop CS 8.0 Shareware



الوصف : فوتوشوب ـآلآصدار الثآمن من برنامجي
PhotoShop CS و Image Ready CS الداعم للـغه العربيـه لتحرير الصور بواجهه
عربيـه كآملـه


للتحمـيل اضغط هنآ



2- برنامج الفرونت بيج :



برنامج
الفرونت بيج هو برنامج يساعدك في بناء موقعك بطريقة صحيحة وسريعة في وقت
قريب كان على من يريد أن يبني موقعاً له على الإنترنت أن يتعلم لغة الـ
HTML وعن طريق برنامج الفرونت بيج تستطيع
أن تبني الموقع بدون أن تتعلم هذه اللغة .
ــــــــــــــــــــــــــــــــــــــــــــــــــ
ـــــــــــ






ــــــــــــــــــــــــــــــــــــــــــــــــــ
ــــــــــــــــ
الحجم:
150ميقا ملف مضغوط
ــــــــــــــــــــــــــــــــــــــــــــــــــ
ـــــــــــــــــ
هذي
الروابط وان شاء الله رااح احاول ازيد الرووابط


http://www.badongo.com/file/8649310



http://www2.sendthisfile.com/d.jsp?t...myPswk37N7Ox9n



http://www.vip707.com/up2/FRONTPAGE.rar
ــــــــــــــــــــــــــــــــــــــــــــ
السيرل نمبر


Wfdwy-xqxjf-rhryg-bg7rq-bbdhm


وهذا مثال للتخطيط
.




ويمكن ان يكون متمدد او لا حسب رغبتك لاكن في دورتنا هذه
سنشرح الستايل الاحترافي المتمدد .

1- التصميم:
التصميم هو اهم خطوه
في تصميم الستايلات والواجهات والثيمات لان سر جمال العمل يكمن في التصميم و
التصميم ينبع من خيالك انت وهناك خطوات يجب اتخاذها لتسهل عليك التصميم :
1- الالوان المستخدمه : يجب عليك اختيار الالوان
المستخدمه في التصميم مثلا انا
اخترت لستايل
الدوره اللون الاخضر وتدرجاته (الاخضر الغامق
, الاخضر , الاخضر
الفاتح , الاخضر الفاقع , الزيتي , والاصفر ) .
2- بيئة التصميم : يجب اختيار بيئه واسلوب للتصميم مثل
بيئة الفيكتور او الزجاجي او الزخرفه او بيئه قديمه او تقنيه او افراح مثل
العيد او اسلاميه ....
3- نوع
الستايل : هناك نوعين احترافي او بسيط .
=============================
اولا نفتح برنامج
الفوتوشوب وننشىء عمل جديد بالمقاسات والاعدادات التاليه :




ثم ننشىء طبقه جديده



الان
سنفعل الشبكه اذهب الى view > Show > Grid ولأخفائها اضغط Ctrl + H




الان اختار اداة التحديد المربع ( هذه الخطوه
للتوضيح فقط ) وارسم تحديد في منطقة الهيدر انظر الى الصوره
هذه المنطقه خاصه بالهيدر صمم الهيدر بحيث لايتعدى
المنطقه المحدده




وهنا لمساتي في
الهيدر :



اثناء تصميم الهيدر اخذت في الحسبتان منطقة التمدد
والصور التجميليه انظر للصوره لتوضيح تقسيم الصور :




الصور التي في
المربع الازرق هي منطقة التمدد والتي في الربع الاحمر هي الصور الثابته .


=============================


الان سأشرح طريقه
ربما تكون خارج الدوره لاكن الفائده منها تنظيم عملك



1- انشىء مجلد جديد او
محفظه جديده تابع الصوره :



2- اسم المجلد set1
اظغط عليه باليمين واختار Layer Set Properties :



تظهر لنا هذه الرساله غير لون المجلد واسمه الى
(الهيدر ) ثم OK



الان اسحب جميع الطبقات التي تخص الهيدر داخل هذا
المجلد :



انظر الى شكل الطبقات داخل المجلد :



اليوم نكتفي بهذا القدر من الدوره ونكمل باقي الدوره قريبا


الفوائد :
1- نبذه عن تصميم
الستالات والفرق بين الستايل الرباعي والاحترافي
2-
نصائح في التصميم
3- تصميم هيدر الستايل
الاحترافي
4- انشاء مجلد لتنظيم طبقات العمل


........................................

الحين نجي لتركيب خلايا التمدد للستايل ... سهله جدا (( تابع ))

في الستايل الاحترافي عندنا 4 خلايا
تمدد:

1- في الهيدر 2- في
الفوتر 3- العمود الايمن 4- العمود الايسر

الان تابع معي عشان نركب الي في الهيدر :

ضع مؤشر الماوس في الخليه الوسطى الي
في الهيدر واضغط بيمين الماوس واختار
( خصائص الخليه)


داخل
خصائص الخليه نختار تحت (استعراض ) امام خانة الخلفيه


.... شرح للخطوه السابقه :- السالفه
ومافيها اننا بنضع خلفيه للخليه والخلفيه هذي هي منطقة التمدد وطبعا
الصوره المستخدمه لازم تكون متساويه في التصميم مثل الصوره الي بنضعها عند
تكرارها تعطينا شكل واحد بدون اي تشويه. وهذي هي ( خلية او منطقة التمدد )

الان تظهر لنا رساله الاستعراض بحيث
نختار الصوره التي تكون خلية التمدد للهيدر وهي
الصوره الي عطيناها الرقم 3 اثناء تقطيع الهيدر
اذهب لمجلد الصور واختار الصوره التاليه :

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



الان
بعد تركيب خلية التمدد نسحب الخليه الوسطى لأقصى اليمين واقصى اليسار


ثم نضع
مؤشر الماوس داخل الخليه الوسطى ونضغط يمين الماوس ونختار (تقسيم الخليه)
عشان نقسمها الي 3 خلايا



نختار
من رسالة التقسيم ( تقسيم الى اعمده) ... عدد(3) اعمده



تم التقسيم الى 3
خلايا الحين صار عندنا 5
خلايا
في الهيدر
الحين ضع مؤشر الماوس
في الخليه الثانيه اليمنى



نضغط
هذه الايقونه عشان ندرج صوره ثابته



الان
نحتار الصوره الي عطيناها الرقم 2 اثناء تقطيع الهيدر


الان نضع
باقي الصور الثابته بأتباع نفس الطريقه السابقه ..طبعا شغلنا الان على
الهيدر ..

ترتيب الصور في
الهيدر ..

قلنا قبل كذا ان
الهيدر فيه 5 خلايا اليك ترتيب الصور :
(ارقام الصور حسب مارقمناها اثناء تقطيع الهيدر )

1- الخليه 1
الصوره 1
2- الخليه 2 الصوره2
3- الخليه 3 الصوره 4
4- الخليه 4 الصوره 5
5- الخليه 5 الصوره 6

,,ِ.,.,.,.,.ً.,.,.,.ِ
,, - ,,ِ.,.,.,.,.ً.,.,.,.ِ
,, - ,,ِ.,.,.,.,.ً.,.,.,.ِ
,,

الحين نعطي
الصور المحاذات شوف الصوره وطبق



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

هذه
حاله نادره وانا صارت معي يعني يمكن تحدث عند
البعض والبعض لا : بعد اعطاء كل صوره
المحاذاه المطلوبه تلاحظ ان الصور فيها تشويه كيف تحل هذه المشكله تابع
معي.

روح للصوره التي
فيها تشويه مثلا الصوره اليمنى العلويه
واضغط عليها بيمين الماوس واختار خصائص الصوره


داخل
خصائص الصوره عدل الاتي :-
الخلل
يكمن في خانة( التباعد الافقي ) : اي عدد تجده داخل هذه
الخانه امسحه وضع بداله العدد صفر ثم ok



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

طيب كذا انتهينا من الهيييييييييييييدر
يله الهمه وحوسو في الفووووووووووتر ابخليه لكم<<
نذااااااااااااااااااله

طبعا نفس طريقة
الهيدر مافيه اي اختلاف

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

الحين نركب الاعمده ... سهل جدا

ضع المؤشر في خلية العمود الايمن





اضغط يمين الماوس واختار (خصائص الخليه )
داخل خصائص الخليه اضغط على استعراض لأختيار صورة
العمود الايمن




اختار صورة العمود الايمن ... طبعا كلنا عارفين ان الاعمده صورتين
صوره للعمود الايمن وصوره للعمود الايسر



وبكذا
انتهينا من تركيب الصور ... باقي علينا بعض الخطوات المهمه قبل نقل
الستايل من القرونت بيج الى المنتدى

وان شاء الله نشرحها قريب ... تابعونا

الفوائد :


1- تهيئة صفحة الستايل في الفرونت بيج
2- انشاء جدول لتركيب
الستايل الاحترافي
3- كيفية جلب الصور الثابته
4- كيفية وضع خلفيه للخليه
وتسمى الخلايا المتمدده
5- حل مشكله في تشويه صور الستايل بعد المحاذاه




نستأنف الباقي من الدوره


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

الخطوه
الاولى : اعطاء الصور الروابط مثل: تسجيل ولوحة التحكم ..... الخ

اضغط ع الصوره مثلا اليمنى الي فيها رابط التسجيل ..

واضغط بزر الماوس الايمن تظهر لك قائمه منسدله اختار منها (اظهار شريط
التحكم بالصور )
لأظهار شريط التحكم بالصور طبعا الخطوه هذي اذا لم يكن شريط التحكم بالصور
ظاهر عندك .




هذا شكل ( شريط التحكم بالصور) فيه ادوات كثيره لاكن الي يهمنا الصف الاخير





لوضع رابط منطقه محدده في الصوره .. اتبع الاتي :

1- اختار الصوره بالنقر عليها بزر الماوس الايسر نقره واحد

2- اختار الشكل المربع من شريط الصور لتحديد الرابط




الحين ارسم مربع حول المنطقه الي بتعطيها رابط





تلقائيا راح تظهر لك هذه الرساله :

اكتب تحت في العنوان الرابط طبعا انا سأضع رابط التسجيل اذا سأضع هذا
الرابط

التسجيل :
رمز PHP:

register.php








وهذه قائمه بالروابط :

<table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="bottom" width="75"> <table width="50" border="0" cellpadding="0" cellspacing="0"> <tr> <td class="smallfont" valign="top" width="28"> </td> <td class="smallfont" style="background-image: url(&quot;style2009/misc/quotes/quote-bg.gif&quot;); background-position: center center;" valign="middle" width="100%"> اقتباس</td> <td class="smallfont" valign="top"> </td> </tr> </table> </td> <td style="background-image: url(&quot;style2009/misc/quotes/quot-lr-bg.gif&quot;);" valign="bottom" align="left"> </td> <td valign="bottom" width="100%" align="right"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="100%"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td style="background-image: url(&quot;style2009/misc/quotes/quot-top-bg.gif&quot;);" valign="middle" width="100%"> </td> <td class="smallfont" valign="top" align="left"> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td style="background-image: url(&quot;style2009/misc/quotes/quoting-left.gif&quot;);" width="10"> </td> <td valign="top" width="100%" bgcolor="#ffffff"> </td> <td style="background-image: url(&quot;style2009/misc/quotes/quoting-right.gif&quot;);" width="10"> </td> </tr> <tr> <td style="background-image: url(&quot;style2009/misc/quotes/quot-left-bg.gif&quot;);" width="10"> </td> <td class="smallfont" valign="top" width="100%" bgcolor="#ffffff"> الرئيسيه index.php ,,,,,,,,,,,,,,,,,,,,,,,,,, التسجيل register.php ,,,,,,,,,,,,,,,,,,,,,,,,,, لوحة التحكم للاعضاء usercp.php ,,,,,,,,,,,,,,,,,,,,,,,,,, المشاركات الجديده search.php?do=getdaily ,,,,,,,,,,,,,,,,,,,,,,,,,, البحث search.php ,,,,,,,,,,,,,,,,,,,,,,,,,, لوحة تحكم المدير العام admincp/index.php ,,,,,,,,,,,,,,,,,,,,,,,,,, لوحة تحكم المشرفين modcp/index.php ,,,,,,,,,,,,,,,,,,,,,,,,,, اتصل بنا sendmessage.php ,,,,,,,,,,,,,,,,,,,,,,,,,, الارشيف archive/index.php ,,,,,,,,,,,,,,,,,,,,,,,,,, الاعلى #top ,,,,,,,,,,,,,,,,,,,,,,,,,, </td> <td style="background-image: url(&quot;style2009/misc/quotes/quot-right-bg.gif&quot;);" width="10"> </td> </tr> <tr> <td valign="bottom" width="10"> </td> <td style="background-image: url(&quot;style2009/misc/quotes/quot-bot-bg.gif&quot;);" width="100%"> </td> <td valign="bottom" width="10"> </td> </tr> </table>

<table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="bottom" width="75"> <table width="50" border="0" cellpadding="0" cellspacing="0"> <tr> <td class="smallfont" valign="top" width="28"> </td> <td class="smallfont" style="background-image: url(&quot;style2009/misc/quotes/quote-bg.gif&quot;); background-position: center center;" valign="middle" width="100%"> اقتباس</td> <td class="smallfont" valign="top"> </td> </tr> </table> </td> <td style="background-image: url(&quot;style2009/misc/quotes/quot-lr-bg.gif&quot;);" valign="bottom" align="left"> </td> <td valign="bottom" width="100%" align="right"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="100%"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td style="background-image: url(&quot;style2009/misc/quotes/quot-top-bg.gif&quot;);" valign="middle" width="100%"> </td> <td class="smallfont" valign="top" align="left"> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td style="background-image: url(&quot;style2009/misc/quotes/quoting-left.gif&quot;);" width="10"> </td> <td valign="top" width="100%" bgcolor="#ffffff"> </td> <td style="background-image: url(&quot;style2009/misc/quotes/quoting-right.gif&quot;);" width="10"> </td> </tr> <tr> <td style="background-image: url(&quot;style2009/misc/quotes/quot-left-bg.gif&quot;);" width="10"> </td> <td class="smallfont" valign="top" width="100%" bgcolor="#ffffff"> </td> <td style="background-image: url(&quot;style2009/misc/quotes/quot-right-bg.gif&quot;);" width="10"> </td> </tr> <tr> <td valign="bottom" width="10"> </td> <td style="background-image: url(&quot;style2009/misc/quotes/quot-bot-bg.gif&quot;);" width="100%"> </td> <td valign="bottom" width="10"> </td> </tr> </table>

..... توقف....

راح تظهر لك مشكله وهو تشوه الستايل طبعا هذي المشكله تظهر نادرا
اصلا هي ماهي بمشكله والستايل لم يتشوه والدليل اختار الستعراض وراح تشوف
الستايل سليم
يعني هذا التشويه طبيعي


شكل التشوه :





اختار نمط استعراض :





شوف الستايل سليم :





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


الان شوف هذا شكل الستايل بعد وضع الروابط عليه


مشوووووووووووووووووووووه في نمط التصميم :





وهنا سلييييييييييييييم في نمك الاستعراض :





....::...:::...:::..:..::..:.....:..::::...:.:.:.. ....


وبكذا انتهينا من الخطوه الاولى


الخطوه
الثانيه: مهمه جدا وفيها تعديل لمسارات الصور


تابع معي اذهب الى نمط التعليمات البرمجيه او code


ركز معي :


شوف مسار الصور تجده بهذا الشكل
C/AppServ1/www/vb/k4Gr/k4G_06.gif


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





المطلوب منك هو :


تحديد المسار الملون بالازرق
C/AppServ1/www/vb/k4Gr/k4G_06.gif


واحذفه تماما عشان يسير معك المسار كذا وهذا هو المطلوب:
k4Gr/k4G_06.gif


حيث هذا (k4G_06.gif) اسم الصوره ويختلف من صوره لأخرى
وهذا (k4Gr) اسم المجلد الي وضعت فيه صور الستايل وتجده في مسار جميع الصور







وهذا شكل الستايل بعد تعديل مسارات الصور : الصور تختفي وهذا شي طبيعي جدا







الان بقي علينا نقل الستايل من الفرونت بيج للمنتدى


راح اتطرق لها في الخطوه التاليه .... تابعونا ولاتروحوا بعيد


الفوائد :


1- كيفية وضع روابط لمناطق معينه في الصور في برنامج
الفرونت بيج
2- تعديل مسارات الصور
لتظهر في الستايل عند رفعه في المنتدى

الله نبدأ الخطوه الاخيره هي نقل الستايل من الفرونت بيج للمنتدى

بعد مانتهينا من تعديل مسارات الصور ضع مؤشر الماوس في الخليه التي في
منتصف التصميم
وعطها محاذاه للوسط



الان انتقل لنمط البرمجيات التعليميه او code

شوف المؤشر فين ......

الكود الي فوق المؤشر هذا ... كود الهيدر

والكود الي تحت المؤشر هذا .. كود الفوتر



...... تعرفنا ع الاكواد

الحين روح للمنتدى حقك وادخل ع لوحة تحكم المنتدى
وختار من الااستايلات والقوالب

التحكم بالااستايلات



اختار الاستايل الافتراضي




ستدخل على صفحة القوالب القوالب الشائعه

الان ركز معي الخطوه سهله جدا .....

روح لقالب الهيدر وانسخ جميع الكود ماعدا الثلاث سطور الاخيره

او هذا الكود

كود:
$spacer_open
كود:

$_phpinclude_output

$ad_location[ad_header_end]




بعد التحديد احذف الكود بالضغط على delete




الان ارجع للفرونت بيج
وادخل ع التعليمات البرمجيه او code

وحدد كود الهيدر .. وانسخه بالضغط على Ctrl +C




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

ضع الكود فوق هذا الكود تماما ....

كود:
$spacer_open
كود:

$_phpinclude_output

$ad_location[ad_header_end]






....انتهينا
من الهيدر ....

الحين ارجع للفرونت بيج وانسخ كود الفوتر



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

انزل اسفل قالب الفوتر ستجد اخر كلمه وهي كلمة

</script>


الصق كود الفوتر تحت كلمة

</script>

شوف هذا الكود بعد لصقه




الان انزل الى اخر الصفحه واضغط حفظ




الان اذهب للمنتدى لمعاينة الستايل




مبرووووووووووووووووووووك

لاكن بقي خطوه عشان تكبر الفرحه

لاحظ وجود مسافه بين الستايل والمتصفح ... تابع نعي لحلها

اذهب للوحة التحكم وتحديدا لخيارت الستايل



ثم




ثم انزل حتى تجد هذا الاعداد

خلفية المنتدى افعل مثل ماهو موضح بالصوره



الان عاين الستايل

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