sami emad
22-02-2007, 11:06 AM
بسم الله الرحمن الرحيم
( اللهم لاعلم لنا الا ماعلمتنا ) أرجو من المشرفين تثبيت الموضوع لأهميته .
راح نبداء أن شاء الله بدروس الستايلات للمحترفين .. ونرجوا من الجميع التطبيق .. لانك ماراح تتعلم اذا ماطبقت
وايضا اي شخص يجرب عشرين مره قبل يسئل .. لان المطلوب انك انت الي تتعلم .. لاتخلي اعتمادك على الدروس فقط لازم تحاول انك تتعلم من نفسك
نبداء على بركة الله :::::: واتمنى التوفيق للجميع ::::::::
افتح برنامج الفوتوشوب بالضغط مرتين على ايقونة البرنامج ( دبل كليك )
[Only registered and activated users can see links]
اختر من قائمة ملف .. جديد .. كما تلاحظ
[Only registered and activated users can see links]
أضبط الأعدادات كما تلاحظ بالصوره .. عرض 770 وارتفاع 500 بالبكسل
[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]
1. نحدد الدائره الى بنعدل شكلها
2. نختار اداة التعبئه
3. من فوق نختار باترين بدل التعبئه
4. نضغط على الزر هذا لتختار نوع الباترين
5. نختار الباترين الي يعجبنا ونعمل تعبئه للدائره به
راح يطلع الشكل هذا لنا بعد التعبئه للدائرتين
[Only registered and activated users can see links]
الحين نبي نركب صوره للدائره الرئيسيه .. نختار من ملف . فتح
[Only registered and activated users can see links]
نختار الصوره الى نبي ونضغط على فتح
[Only registered and activated users can see links]
نجعل الصوره فوق جميع التصاميم والمهم فوق الدائره الرئيسيه ثم نتبع الصوره التاليه لدمج الصوره مع الدائره او نضغط الاختصار ctrl + g
[Only registered and activated users can see links]
راح تندمج بهذا الشكل
[Only registered and activated users can see links]
باقي تعديل الألوان للصوره .. نتبع الصوره التاليه لتعديل الألوان او نضغط الاختصار ctrl + u
[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]
بعد ماضبطنا الفوتر راح نضيف لمسات تجميليه وطبعا تقدر تخلي الفوتر نفس كذا وتكتب عليه وخلاص .. كل واحد ورغبته .. تابع
نرسم 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]
يمكن يسئل شخص يقول .. طيب ابي اضيف مربع العشر مواضيع ؟؟؟؟؟؟؟؟؟؟
اقوله اصبر وراح نضيفه ... مو الحين .. بالدروس القادمه راح يكون في درس عن هالسؤال
اهم شي تابع الدروس مثل ماهي وراح يبين لك كل شي ..
ابي تطبيق للدرس والي يطبق نفس الدرس مافي مانع يحاول يخترع شي جديد .. بس لاتبعد عن الفكره الاساسيه للدرس او الشكل العام لان في منطقة تمدد راح نشرحها بالدرس القادم مع التقطيع
ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــ
بسم الله
هذه الحلقه الثالثه لتصميم الستايل الاحترافي وهي تقطيع الستايل
راح نستمر بالدروس وراح نخلي الوقت بين كل حلقه والثانيه مده قصير .... يعني الدرس الرابع راح ينزل قريب .. نبي تطبيق على شان انزل الدرس بسرعه وماله داعي نطول لاني احس انه يسبب خمول للاعضاء
نبداء الدرس
اول شي نطلع الشبكه وهذى فايدتها انها تعطيك تقطيع سليم بنسبة 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]
وبكذا قطعنا الستايل وباقي التوزيع والتركيب والصور الجماليه .. وراح يتم ادراجها بشكل متتابع ان شاء الله
ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــ
بسم الله
درس اليوم توزيع الستايل على الفرونت بيج
المطلوب .. برنامج فرونت بيج عربي 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]
والروابط كالتالي ...
الرئيسيه $vboptions[forumhome].php?$session[sessionurl]
المكتب usercp.php?$ses sion[sessionurl]
التسجيل register.php?$s ession[sessionurl]
البحث search.php?$ses sion[sessionurl]
التعليمات faq.php?$sessio n[sessionurl]
قائمة الأعضاء memberlist.php? $session[sessionurl]
التقويم calendar.php?$s ession[sessionurl]
خروج login.php?$sess ion[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]
ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــ
بسم الله
درس اليوم تركيب االستايل وتلويته
نبداء
اول شي نفتح صفحه جديده
[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]
وعندنا ايضا الأكواد الخاصه بالألوان والي هي لون ثقيل وكوده 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,h elvetica,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]
والان نضع هذا الكود الجاهز لتلوين النفبار .. وهي اشرطة السحب لفوق وتحت وعند تمدد المنتدى
الكود :
للموضوع كمالة.. ولكن شرح التصميم قد انتهى لمن يهمه التصميم [Only registered and activated users can see links]
منقول ........
( اللهم لاعلم لنا الا ماعلمتنا ) أرجو من المشرفين تثبيت الموضوع لأهميته .
راح نبداء أن شاء الله بدروس الستايلات للمحترفين .. ونرجوا من الجميع التطبيق .. لانك ماراح تتعلم اذا ماطبقت
وايضا اي شخص يجرب عشرين مره قبل يسئل .. لان المطلوب انك انت الي تتعلم .. لاتخلي اعتمادك على الدروس فقط لازم تحاول انك تتعلم من نفسك
نبداء على بركة الله :::::: واتمنى التوفيق للجميع ::::::::
افتح برنامج الفوتوشوب بالضغط مرتين على ايقونة البرنامج ( دبل كليك )
[Only registered and activated users can see links]
اختر من قائمة ملف .. جديد .. كما تلاحظ
[Only registered and activated users can see links]
أضبط الأعدادات كما تلاحظ بالصوره .. عرض 770 وارتفاع 500 بالبكسل
[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]
1. نحدد الدائره الى بنعدل شكلها
2. نختار اداة التعبئه
3. من فوق نختار باترين بدل التعبئه
4. نضغط على الزر هذا لتختار نوع الباترين
5. نختار الباترين الي يعجبنا ونعمل تعبئه للدائره به
راح يطلع الشكل هذا لنا بعد التعبئه للدائرتين
[Only registered and activated users can see links]
الحين نبي نركب صوره للدائره الرئيسيه .. نختار من ملف . فتح
[Only registered and activated users can see links]
نختار الصوره الى نبي ونضغط على فتح
[Only registered and activated users can see links]
نجعل الصوره فوق جميع التصاميم والمهم فوق الدائره الرئيسيه ثم نتبع الصوره التاليه لدمج الصوره مع الدائره او نضغط الاختصار ctrl + g
[Only registered and activated users can see links]
راح تندمج بهذا الشكل
[Only registered and activated users can see links]
باقي تعديل الألوان للصوره .. نتبع الصوره التاليه لتعديل الألوان او نضغط الاختصار ctrl + u
[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]
بعد ماضبطنا الفوتر راح نضيف لمسات تجميليه وطبعا تقدر تخلي الفوتر نفس كذا وتكتب عليه وخلاص .. كل واحد ورغبته .. تابع
نرسم 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]
يمكن يسئل شخص يقول .. طيب ابي اضيف مربع العشر مواضيع ؟؟؟؟؟؟؟؟؟؟
اقوله اصبر وراح نضيفه ... مو الحين .. بالدروس القادمه راح يكون في درس عن هالسؤال
اهم شي تابع الدروس مثل ماهي وراح يبين لك كل شي ..
ابي تطبيق للدرس والي يطبق نفس الدرس مافي مانع يحاول يخترع شي جديد .. بس لاتبعد عن الفكره الاساسيه للدرس او الشكل العام لان في منطقة تمدد راح نشرحها بالدرس القادم مع التقطيع
ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــ
بسم الله
هذه الحلقه الثالثه لتصميم الستايل الاحترافي وهي تقطيع الستايل
راح نستمر بالدروس وراح نخلي الوقت بين كل حلقه والثانيه مده قصير .... يعني الدرس الرابع راح ينزل قريب .. نبي تطبيق على شان انزل الدرس بسرعه وماله داعي نطول لاني احس انه يسبب خمول للاعضاء
نبداء الدرس
اول شي نطلع الشبكه وهذى فايدتها انها تعطيك تقطيع سليم بنسبة 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]
وبكذا قطعنا الستايل وباقي التوزيع والتركيب والصور الجماليه .. وراح يتم ادراجها بشكل متتابع ان شاء الله
ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــ
بسم الله
درس اليوم توزيع الستايل على الفرونت بيج
المطلوب .. برنامج فرونت بيج عربي 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]
والروابط كالتالي ...
الرئيسيه $vboptions[forumhome].php?$session[sessionurl]
المكتب usercp.php?$ses sion[sessionurl]
التسجيل register.php?$s ession[sessionurl]
البحث search.php?$ses sion[sessionurl]
التعليمات faq.php?$sessio n[sessionurl]
قائمة الأعضاء memberlist.php? $session[sessionurl]
التقويم calendar.php?$s ession[sessionurl]
خروج login.php?$sess ion[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]
ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــــــــ ـــــــــ
بسم الله
درس اليوم تركيب االستايل وتلويته
نبداء
اول شي نفتح صفحه جديده
[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]
وعندنا ايضا الأكواد الخاصه بالألوان والي هي لون ثقيل وكوده 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,h elvetica,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]
والان نضع هذا الكود الجاهز لتلوين النفبار .. وهي اشرطة السحب لفوق وتحت وعند تمدد المنتدى
الكود :
للموضوع كمالة.. ولكن شرح التصميم قد انتهى لمن يهمه التصميم [Only registered and activated users can see links]
منقول ........