دورة تصميم استايل الدرس الثالث

[aahmadali]

الله

هذه الحلقه الثالثه لتصميم الستايل الاحترافي وهي تقطيع الستايل

راح نستمر بالدروس وراح نخلي الوقت بين كل حلقه والثانيه مده قصير .... يعني الدرس الرابع راح ينزل قريب .. نبي تطبيق على شان انزل الدرس بسرعه وماله داعي نطول لاني احس انه يسبب خمول للاعضاء

نبداء الدرس

اول شي نطلع الشبكه وهذى فايدتها انها تعطيك تقطيع سليم بنسبة 98% والنسبه هذى كافيه علينا

نتبع الصوره التاليه لأظهار الشبكه

[Only registered and activated users can see links]

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

[Only registered and activated users can see links]

الارقام 1 و 2 و 3 و 4 باللون الاحمر هي الزوايا طبعا العرض يكون نفس الشي للجميع والارتفاع يكون متساوي بين 1 و 3 .. وبين 2 و 4

الارقام 5 و 6 باللون الازرق هي منطقة التمدد ولازم يكون العرض نفس الشي

الارقام 7 و 8 باللون الاخضر الصور الاساسيه وهي الي تحمل اسم الموقع وبعض العبارات للمنتدى او اي شي على مزاجك

الارقام 9 و 10 باللون الاصفر هي منطقه التمدد للأسفل وهذى لازم يكون الارتفاع نفس الشي

والي عنده لبس في التقطيع يراجع الحلقه الثانيه لتصميم ستايل للمبتدئين على الرابط
[Only registered and activated users can see links]

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

نكمل ..

بعد التقطيع نروح نحفظ عملنا على شان يكون جاهز لتوزيعه على الفرونت بيج

نتبع الصور التاليه للحفظ

[Only registered and activated users can see links]

[Only registered and activated users can see links]

[Only registered and activated users can see links]

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

وانا بنتظاركم ....

تحياتي للجميع ... احمد علي
منقول للفائدة

[aahmadali]

بسم الله

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

المطلوب .. برنامج فرونت بيج عربي 2003

نبداء

افتح البرنامج بالضغط على ايقونتة

[Only registered and activated users can see links]

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

[Only registered and activated users can see links]

ارجع للتصميم واضغط بالزر الايمن باي مكان بالصفحه واختار خصائص الصفحه

[Only registered and activated users can see links]

غير اتجاه الصفحه الى يمين يسار

[Only registered and activated users can see links]

ادرج جدول بـ 3 صفوف و 3 أعمده

[Only registered and activated users can see links]

اضغط داخل الجدول بالزر الايمن وختار خصائص الجدول

[Only registered and activated users can see links]

أضبط الأعدادات كما تلاحظ بالصوره

[Only registered and activated users can see links]

ندرج الزوايا للستايل .. اضغط داخل الخليه التي بالزاويه اليمنى فوق وختر ادراج صوره

[Only registered and activated users can see links]

نحدد الصوره وندرجها وهي الزاويه اليمني للستايل وبنفس الطريقه ندرج باقي الزوايا فوق وتحت

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

[Only registered and activated users can see links]

الان ندرج منطقة التمدد .. نضغط داخل المربع الي بالنص الزر الايمن ونختار خصائص الخليه

[Only registered and activated users can see links]

نضغط استعراض ونحدد الخلفيه وهي التمدد ونضغط موافق

[Only registered and activated users can see links]

ينتج عندنا هذا الشكل بعد ادراج الزوايا والشد وعمل منطقة التمدد

اضغط على الصور لتشاهدها بالشكل الطبيعي

[Only registered and activated users can see links] ([Only registered and activated users can see links])

الحين نضع الاعمده وهي تعتبر منطقة تمدد لاكن للأسفل .. اضغط الزر الايمن داخل منطقة العمود الايمن

[Only registered and activated users can see links]

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

[Only registered and activated users can see links]

الان نضع الروابط للأزرار .. ونعملها بالنقطه الفعاله نحدد البنر بضغطه واحده عليه ونختار نقطه فعاله كما بالصوره

[Only registered and activated users can see links]

واذا لم تكن ظاهر عندك اختار .. عرض .. اشرطة ادوات .. صوره

[Only registered and activated users can see links]

الحين نروح للرئيسيه ونضغط ونسحب ..

[Only registered and activated users can see links]

وأول ماتتركها راح يظهر تلقائياً مربع الارتباط التشعبي .. ضع رابط الرئيسيه ثم موافق

[Only registered and activated users can see links]

والروابط كالتالي ...


الرئيسيه $vboptions[forumhome].php?$session[sessionurl]

المكتب usercp.php?$session[sessionurl]

التسجيل register.php?$session[sessionurl]

البحث search.php?$session[sessionurl]

التعليمات faq.php?$session[sessionurl]

قائمة الأعضاء memberlist.php?$session[sessionurl]

التقويم calendar.php?$session[sessionurl]

خروج login.php?$session[sessionurl]do=logout

راسلنا sendmessage.php

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

[Only registered and activated users can see links]

1 - نحدد كل الكود .. ماعدا اسم المجلد الذي به الصور مع اسم الصوره

2 - نضغط على هذا الزر وهو البحث

3 - نختار استبدال ونترك مربع استبدال بـ فاضي تماماً

4 - نضغط على استبدال الكل

وهكذا يكون الستايل شغال على اي منتدى

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

[Only registered and activated users can see links]



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

[aahmadali]

اذكرونة بالردود

[aahmadali]

بسم الله

درس اليوم تركيب االستايل وتلويته

نبداء

اول شي نفتح صفحه جديده

[Only registered and activated users can see links]

نختار المقاسات كما تشاهد

[Only registered and activated users can see links]

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

[Only registered and activated users can see links]

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

[Only registered and activated users can see links]

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

[Only registered and activated users can see links]

الحين وش صار عندنا ..؟ مجلد الصور الخاص بالستايل وموجود داخله صور الستايل وصورة القطعه التي عملنا لها تدريج وهي تفيدنا بأعطاء شكل افضل لاقسام الستايل ..

وراح ننسخ ثلاث مجلدات من مجلد الـ images الموجود داخل vb وهي مجلد buttons و misc و statusicon

وسيكون شكل المجلد كما يلي .

أضغط على الصوره لتراها بالشكل الطبيعي

[Only registered and activated users can see links] ([Only registered and activated users can see links])

وعندنا ايضا الأكواد الخاصه بالألوان والي هي لون ثقيل وكوده A35D5D .. واللون الخفيف وكوده D6BBBB

وعلى بركة الله نبداء بتلوين الستايل ...

افتح لوحة التحكم .. وسجل دخولك

[Only registered and activated users can see links]

نذهب الى الأستايلات ثم ضبط الستايلات ....... كما بالصوره

[Only registered and activated users can see links]

نختار الستايل المراد التعديل عليه .. وليكن الرئيسي . ثم نضغط على أذهب :

[Only registered and activated users can see links]

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

[Only registered and activated users can see links]

ننزل شوي ونغير كلمة images المحدده الى اسم مجلد الصور عندنا وليكن مثلاً des-ksa وهذه المجلدات هي التي تحوي الأزرار العامه للمنتدى كما تلاحظ بالصوره

[Only registered and activated users can see links]

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

بس قبل لاابداء راح اعطيك بعض الاشياء الي لازم تعرفها ... عندنا الشكل # والي هو الشبكه لازم يكون قبل كود اللون على شان يشتغل الكود وطريقة كتابته اضغط شيفت Shift مع رقم 3 وبعده ضع كود اللون .. وهذا مثال : #A35D5D

الشي الثاني لازم تعرف كيف تغير كود اللون بصوره وهي القطعه الي حفظناها قبل شوي وانا حفظتها بأسم bb وطريقة تشغيلها بدل كود اللون . نضع هذا الكود بدل كود اللون #D6BBBB url(des-ksa/bb.gif) repeat-x top left

شرح سريع لهذا الكود .... اول شي الرابط des-ksa/bb.gif كما هو واضح اسم المجلد الخاص بصور الستايل بعده اسم الصوره وهي القطعه المحفوظه عندنا ... الكود D6BBBB وهذا كود اللون الخفيف وسبب وضعه اذا كان المربع اكبر من الصوره المحفوظه يتم استكمال النقص بهذا اللون

وعندنا لون اضافي للستايل بعد وهو الأسود ورقم الكود #000000 وهذا لكي يعطي الستايل بعض التمير للاقسام والاشياء الرئيسيه

واخر شي وهو نوع الخط ونضع هذه الانواع بنفس الشكل يعني انسخ وألصق arial,verdana,helvetica,sans-serif

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

الان نبداء وطبق مثل ماتشوف


[Only registered and activated users can see links]


[Only registered and activated users can see links]


[Only registered and activated users can see links]


[Only registered and activated users can see links]


[Only registered and activated users can see links]


[Only registered and activated users can see links]


[Only registered and activated users can see links]


[Only registered and activated users can see links]


[Only registered and activated users can see links]


[Only registered and activated users can see links]


[Only registered and activated users can see links]


[Only registered and activated users can see links]


[Only registered and activated users can see links]


[Only registered and activated users can see links]


[Only registered and activated users can see links]


[Only registered and activated users can see links]


[Only registered and activated users can see links]


[Only registered and activated users can see links]


[Only registered and activated users can see links]


[Only registered and activated users can see links]


[Only registered and activated users can see links]


[Only registered and activated users can see links]


[Only registered and activated users can see links]


[Only registered and activated users can see links]


[Only registered and activated users can see links]

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

الكود :
كود:
/* ***** styling for 'big' usernames on postbit etc. ***** */.bigusername { font-size: 14pt; }/* ***** small padding on 'thead' elements ***** */td.thead, div.thead { padding: 4px; }/* ***** basic styles for multi-page nav elements */.pagenav a { text-decoration: none; }.pagenav td { padding: 2px 4px 2px 4px; }/* ***** define margin and font-size for elements inside panels ***** */.fieldset { margin-bottom: 6px; }.fieldset, .fieldset td, .fieldset p, .fieldset li { font-size: 11px; }/* ***** don't change the following ***** */form { display: inline; }label { cursor: default; }.normal { font-weight: normal; }.inlineimg { vertical-align: middle; }html{ scrollbar-base-color: #A35D5D; scrollbar-arrow-color: #000000; scrollbar-track-color: #D6BBBB;}

تابع الصوره وحذف كل الموجود والصق الكود السابق مكانه .. مع تغيير اللازم كما هو واضح

[Only registered and activated users can see links]

الان ننزل الى اخر شي ونضغط حفظ

[Only registered and activated users can see links]

باقي علينا صور الازرار والصور الخاصه بالمواضيع الجديده والقديمه والمقفله .. وهي صور بمقاس 30x30 بأمتداد gif طبعا استبدل الصور الاصليه بالجديده وبنفس الأسم والامتداد

وهي بالمجلدات buttons و misc و statusicon

نبداء بالـ statusicon

[Only registered and activated users can see links]

وهذا مثال بعد تغيير الصور

[Only registered and activated users can see links]

الان مجلد misc

[Only registered and activated users can see links]

وهذه الصور المهمه وهي صورة المتواجدين الان والاحصائيات غيرها او خلها مثل ماهي لان شكلها مقبول

الان مجلد buttons وهو مجلد الأزرار مثل موضوع جديد او رد او اقتباس وخلافه ..

[Only registered and activated users can see links]

وهذي صوره بعد تعديل الأزرار ..

[Only registered and activated users can see links]

وطبعا تقيس عليها باقي الاشياء اذا حبيت تغير مثلا الاسهم او الرموز الصغيره ... شي يرجع لذوق المصمم


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

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

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

تحياتي .. احمد علي منقول للامانة





[/RIGHT]
[/CENTER]

[aahmadali]

اريد رأيكم بالدورة وهل تريدة الدرس الاخير ام لا اقرا نهاية الموضوع وستعرف
وشكرا

[NabuLsi5]

مشكووور على دورة

[مجد المصرى]

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

[aahmadali]

شكرا لك من دخل على الموضوع

[ابوماجد]

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