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

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

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



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



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


برنامج Adobe Photoshop® CS2 9.0.1


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



برنآمج Adobe Photoshop CS 8.0 Shareware


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


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

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


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


http://i27.tinypic.com/2qjdavk.jpg


ـــــــــــــــــــــــــ ـــــــــــــــــــــــــ ــــــــــــــــ
الحجم: 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

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

http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/3.png

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

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

http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/1.png
ثم ننشىء طبقه جديده

http://www.k4n4.net/3/dora1/2.png

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


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/4.png
الان اختار اداة التحديد المربع ( هذه الخطوه للتوضيح فقط ) وارسم تحديد في منطقة الهيدر انظر الى الصوره
هذه المنطقه خاصه بالهيدر صمم الهيدر بحيث لايتعدى المنطقه المحدده

http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/5.png

وهنا لمساتي في الهيدر : او لمست صاحب الدرس :blushing:


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/6.png

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


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/7.png

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

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

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


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/8.png

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


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/9.png

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

http://www.k4n4.net/3/dora1/10.png

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

http://www.k4n4.net/3/dora1/11.png


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

http://www.k4n4.net/3/dora1/12.png

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


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/13.png


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

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

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


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


نختار اداة التحديد المربع وننشىء مربع في منطقة الفوتر

http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/14.png

صمم الفوتر الخاص بك ولا تتعدى المنطقه المحدده

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


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/15.png
بعد ذلك نبدأ في تصميم الاعمده


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/16.png


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

بعد الانتها من التصميم رتبت الشغل بهذا النحو ... شو الصوره والترتيب

http://www.k4n4.net/3/dora1/17.png

الفوائد ::
شكل لتصميم الستايل



الان نبدأ المرحله الثانيه من الدروه : التقطيع
اعتبرها اهم خطوه بعد التصميم حيث التقطيع يحتاج الى دقه في تقطيع الصور مع العلم ان خطوت التقطيع يجب ان تخطط لها اثناء التصميم

بسم الله نبدأ .. اربط حزام الامان

اولا نختار اداة تحديد منطفة التقطيع اسمها (Slice Tool) شوف الصوره

http://www.k4n4.net/3/dora1/18.png

الان نسحب بالاداه من الزاويه العلويه اليسرى الى الزاويه السفليه اليمنى

http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/19.png

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


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/20.png

الحين نختار الاداه الثانيه والي هي اداة التقطيع واسمها ..( Slice Select Tool)

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

بعد ماخترنا الاداه نروح في منتصف العمل ونضغط بيمين الماوس تطلع لنا قائمه نختار Divide Slice


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/22.png

تظهر لنا هذه الرساله .... شرح للرساله
الرساله هذي تقسم لك القطعه الى تقسيم طولي وتقسيم عرضي الان حنا بنقسم المربع الكبير الى 3 قطع عرضيه

http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/23.png

شوف كيف جت خطوط التقطيع


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/24.png
(..الان راح اشرح لكم كيف تحرك الخطوط وتحدد منطقة التقطيع ركزوا معي ..)

روح الى المربع الازرق الي على منطقة الهيدر واضغط عليه ضغطه وحده بزر الفأره الايسر .. ايش لاحظت تغير لونه الى بني وطلعت مربعات صغيره على حدود القطعه تقولك اسحبني ^_^



http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/25.png

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

اسحب الخط الى فوق قليلا وبكذا حددنا الهيدر ..


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/26.png

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


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/27.png

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


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

بعد ماعرفنا التقطيع العرضي نبدأ الان في التقطيع الطولي


طبع كل جزء نقطعه تقطيع طولي منفرد بمعنى نبدأ في تقطيع الهيدر طوليا
ثم الاعمده ثم الفوتر

بسم الله نبدأ ...

نروح للهيدر ونضغط عليه بزر الماوس الايمن ونختار Divide Slice


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/28.png
تظهر لنا رسالة التقطيع اختار التقطيع الطولي وقطع الهيدر الى 6 قطع

http://www.k4n4.net/3/dora1/29.png

كيف تتم آلية التقطيع :: لكل ستايل آليه في التقطيع لاكن انا عطيتك التقطيع الاحترافي
ويمكن يكون التقطيع فيه احترافيه اكبر .. مثلا انا عندما صممت الهيدر او الستايل قررت ان اقطعه
الى 6 قطع وهي تشمل الاتي شوف الصوره ...


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/30.png

الان المطلوب منك تحريك خطوط التقطيع وقطع حسب الصوره التاليه :-


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/31.png

شرح القطع :

اهم قطعتين هم القطع الخاصه بالاعمده الي هي 1 و 6 هذي القطع مقساتها لاتتغير ابدا سواء في الهيدر والاعمده او الفوتر وهي التي يقف عليها الستايل ... التوضيح قادم

اما القطع الاخرى وهي 2 و 4 و 5 هذي صور تجميليه يمكن ان تتغير مقاساتها وهي موجوده
في الهيدر والفوتر فقط ولا تؤثر في وزنية الستايل

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

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

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


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/32.png

تقطيع الاعمده طبعا في الاعمده مانحتاج الى 6 قطع طوليه نحتاج فقط 3 قطع طوليه

شوف تخطيط التقطيع


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/33.png

مفهوم اخير للتقطيع وهو كأنك ماسك سكين وتقطع تورته << تشبيه لذيذ صح ^_^

وهنا الشكل النهائي للستايل بعد التقطيع .... بقي علينا بس الحفظ


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/34.png

"تابع معي خطوات الحفظ "


اذهب الى " ملف > حفظ كصفحة ويب" او "file > save for web"
http://www.k4n4.net/3/dora1/35.png

تظهر لك صفحه كبيره وفيها الستايل ومبين التقطيع المطلوب اضغط "حفظ " او " save "

http://www.k4n4.net/3/dora1/36.png

الان انشىء مجلد في اي مكان واحفظ الستايل فيه شوف الصوره وتاكد من الاعدادت


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/37.png

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



http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/38.png


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

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


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/38-1.png

الان روح لمجلد المنتدى والي هو vb وافتحه وانشىء مجلد جديد داخله
مثلا انا انشأت مجلد واسميته k4Gr وحطيت الصور داخله ..بحيث يصبح مسار المجلد
vb / k4gr


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/39.png

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

http://www.k4n4.net/3/dora1/40.png
اول ماتفتحت الفرونت بيج روح لأسفل الصفحه الظاهره واختار code او الاكواد

http://www.k4n4.net/3/dora1/41.png

داخل صفحة الاكواد تجد كود حدده كله وبدون اي تردد احذفه بالضغط على زر delete من الكيبورد << بدون اي تردد وين يالطيب عمليه انتحاريه ^_^


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/42.png


الحين ارجع لصفحت التصميم بالضغط على design او تصميم .. وفي منتصف الصفحه اضغط زر الماوس الايمن واختار من القائمه المنسدله (خصائص الصفحه )

http://www.k4n4.net/3/dora1/43.png
من رسالة خصائص الصفحه اختار اتجاه الصفحه الى يمين - يسار ثم ok

http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/44.png

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

انشىء جدول بـ 9 خلايا من ايقونة انشاء الجدول الي فوق

http://www.k4n4.net/3/dora1/45.png

الحين روح للجدول الي انشئناه واضغط داخله زر الماوس الايمن واختار من القائمه المنسدله (خصائص الجدول )
http://www.k4n4.net/3/dora1/46.png

خصائص الجدول اختار التالي : الصوره ..


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/47.png


هيئنا الجدول لتركيب الستايل ... الان نبدأ في تركيب الصور ...

....

الان ضع مؤشر الماوس في الخليه اليمنى العلويه شوف الصوره


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/48.png

يتابع تعبت :shiny01:

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

http://www.k4n4.net/3/dora1/49.png

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

http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.http://www.k4n4.net/3/dora1/50.png

شوف نفس الطريقه استخدمتنها في تركيب الصور الثابته الاخرى

الصور الي ركبناها :
1- صورة الهيدر اليمنى في الخليه اليمنى العلويه
2- صورة الهيدر اليسرى في الخليه اليسرى العلويه
3- صورة الفوتر اليمنى في الخليه اليمنى السفليه
4- صورة الفوتر اليسرى في الخليه اليسرى السفليه

http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.http://www.k4n4.net/3/dora1/51.png

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

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

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

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

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

http://www.k4n4.net/3/dora1/52.png

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


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/53.png

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

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

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


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/54.png

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


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/55.png

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

http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/56.png

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

http://www.k4n4.net/3/dora1/57.png
تم التقسيم الى 3 خلايا الحين صار عندنا 5
خلايا في الهيدر
الحين ضع مؤشر الماوس في الخليه الثانيه اليمنى


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/58.png

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

http://www.k4n4.net/3/dora1/49.png

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


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/59.png

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

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

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

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

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

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


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/60.png

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

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

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

http://www.k4n4.net/3/dora1/61.png

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


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/62.png

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

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

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

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

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

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


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/63.jpg

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


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/64.png

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


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/65.png

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

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

الفوائد :

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




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


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

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

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

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


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/66.png

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


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/67.png

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

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

2- اختار الشكل المربع من شريط الصور لتحديد الرابط
http://www.k4n4.net/3/dora1/68.png

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

http://www.k4n4.net/3/dora1/69.png

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

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

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

register.php



http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/70.png

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

اقتباس




الروابط:




http://www.w7ye.net/vb/images/future...t-top-left.gifاقتباسhttp://www.w7ye.net/vb/images/future...-top-right.gifhttp://www.w7ye.net/vb/images/future...p-right-10.gifاقتباس





الرئيسيه

index.php
,,,,,,,,,,,,,,,,,,,,,,,,,,
التسجيل
register.php
,,,,,,,,,,,,,,,,,,,,,,,,,,
لوحة التحكم للاعضاء
usercp.php
,,,,,,,,,,,,,,,,,,,,,,,,,,
المشاركات الجديده
search.php?do=getdaily
,,,,,,,,,,,,,,,,,,,,,,,,,,
البحث
search.php
,,,,,,,,,,,,,,,,,,,,,,,,,,
لوحة تحكم المدير العام
admincp/index.php
,,,,,,,,,,,,,,,,,,,,,,,,,,
لوحة تحكم المشرفين
modcp/index.php
,,,,,,,,,,,,,,,,,,,,,,,,,,
اتصل بنا
sendmessage.php
,,,,,,,,,,,,,,,,,,,,,,,,,,
الارشيف
archive/index.php
,,,,,,,,,,,,,,,,,,,,,,,,,,
الاعلى
#top
,,,,,,,,,,,,,,,,,,,,,,,,,, http://www.w7ye.net/vb/images/future...t-bot-left.gifhttp://www.w7ye.net/vb/images/future...-bot-right.gif

اقتباس








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

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


شكل التشوه :


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/71.png



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

http://www.k4n4.net/3/dora1/73.png

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


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


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


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/74.png

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


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/75.png

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


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


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


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


ركز معي :


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


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


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/76.png

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


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


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


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



http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/77.png


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


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/78.png


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


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


الفوائد :


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

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

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

http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/79.png


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

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

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

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

http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/80.png

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

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

التحكم بالااستايلات
http://www.k4n4.net/3/dora1/81.png

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


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/82.png

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

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

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

او هذا الكود

كود:

$spacer_open

كود:




كود

$_phpinclude_output $ad_location[ad_header_end]




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


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/83.png


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

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


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/84.png

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

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

كود:

$spacer_open

كود:



كود:

$_phpinclude_output $ad_location[ad_header_end]



http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/85.png

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

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


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/86.png
ثم ارجع للمنتدى وتحديدا الى قالب الفوتر للصق الكود فيه

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

</script>


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/87.png

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

</script>

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

http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/88.png

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


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/89.png

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



http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/90.png

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

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

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

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

http://www.k4n4.net/3/dora1/81.png


ثم


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/82.png

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

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


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/91.png

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


http://www.w7ye.net/vb/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.
http://www.k4n4.net/3/dora1/92.png

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

تحياتي اخوكم وحي القلم

أٍيد فقط كلمة شكرا

وشكرا