|
|
|
|
||||||
|
|
LinkBack | أدوات الموضوع | طرق العرض |
17 - 11 - 2005, 19:08
|
||||
|
( اللهم لاعلم لنا الا ماعلمتنا ) هذا الدرس لتصميم ستايل منتدى بطريقه تقريبا جديده تبعدك عن اخطاء منطقة التمدد التي يعاني منها الكثيرين وهي طريقه مناسبه جدا للمبتدئين  البرامج المستخدمه .... فوتوشوب الاصدار 7 انجليزي ... فرونت بيج الاصدار 2003 عربي ... :+: نبـــــــــــــــــداء :+: افتح صفحه جديده بالفوتوشوب بمقاس 780 * 500  نرسم شكل باستخدام المربع والدائره بالفوتوشوب مثل هذا الشكل  ومع بعض الأضافات الجمالية نحصل على شكل احترافي ....  الي مايعرف يصمم مثل هذا الشكل يكتفي بالشكل الأول مع بعض اللمسات.... على العموم هذا التصميم مرفق بملف مفتوح مقطع وجاهز .. الان بعد ماصممنا الشكل العام للمنتدى ... نبداء بالتقطيع .. ولازم نركز هنا لاحظ هذا الشكل الى سويناه مقسم الى اقسام راح نشرحها بالتفصيل  الأرقام 1 - 2 - 7 - 8 الي باللون الاخضر هذه صور تجميليه الأرقام 5 - 6 الي باللون الأحمر هذا الصور الأساسية الأرقام 3 - 4 - 9 - 10 الي باللون الأزرق هذه مناطق التمدد للعرض .. يمين ويسار .. الأرقام 11 - 12 الي باللون البرتقالي هذه مناطق التمدد للطول .. للأسفل .. وتسمى الأعمده اللون الأبيض ... راح يكون المنتدى بهذه المنطقه *********************** ملاحظة مهمه جـــــدا .. // لاحظ الارقام 3 و 4 متشابهه بالشكل تماما وهنا تعتمد طريقتنا الجديده على التمدد .. يعني اجعل 3 و 4 نفس التصميم بحيث لو وضعنا اي منها للتمدد راح تعطي نفس النتيجه .. ونفس الشي للرقم 9 و 10 .. اتمنى وصلت الفكره على العموم راح تتوضح الصوره عند التوزيع ... ********************************************* أهم شي عند التقطيع يتساوى العرض للمناطق الى لها نفس اللون طبعا الى فوق تتساوى الطول والعرض راح نشرح هذه النقطه اللون الاخضر 1 و 2 تتساوى بالطول والعرض .. 7 و8 تتساوى بالطول والعرض ... 1 و 2 و 7 و 8 تتساوى بالعرض اللون الازرق 3 و 4 تتساوى بالطول والعرض .. 9 و 10 تتساوى بالطول والعرض .. 3 و 4 و 9 و 10 تتساوى بالعرض اللون البرتقالي 11 و 12 تتساوى بالطول والعرض .... وأيضا تتساوى مع اللون الأخضر بالعرض ... انتبه .. اللون الاحمر 5 و 6 تتساوى بالعرض ********************************************** بعد ماعرفنا المقاسات نبداء بالتقطيع ... نختار أداة التقطيع ونحدد القسم المطلوب ونسحب من الزاويه العلويه الى الزاويه السفليه ناخذ الرقم 1 مثلا لاحظ الصوره  ولتعرف طول وعرض المربع الذي تم تقطيعه اضغط داخل المربع بالزر الايمن واختار الخيار الثاني  لاحظ الطول والعرض لهذا المربع .. وكما وضحنا سابقا لابد ان تتساوى المناطق التي ذكرناها والا لن يركب بشكل سليم  الان بعد تقطيع كامل الستايل ومساواة المناطق المحدده .. طبعا الستايل مرفق جاهز ومقطع لمن يخطيء بالتقطيع .. الان نحفظ التصميم على شكل صفحة انترنت راح تطلع الصوره المقطعه وتعطى اسماء تلقائيا .. طبعا من file > تاسع خيار save for web نبداء بتوزيع الستايل على الفرونت بيج اولا ... نفتح صفحة جديده بالفرونت بيج ... نذهب الى تعليمات برمجيه .. بالاسفل .. ونمسح الكود الذي بداخلها كاملا .. ثم نرجع الى الصفحه نضغط الزر الايمن داخل الصفحه ونختار خصائص الصفحه  نعدل اتجاه الصفحه الى يمين - يسار  الأن نرسم جدول مكون من 3 اعمده و 3 صفوف  نضغط داخل الجدول ونختار خصائص الجدول  نعدل الخيارات كما بالصوره  الان لاحظ صورة الجدول راح نحط الارقام الى قسمناها قبل شوي كل رقم بمكانه الصحيح مع طريقة اضافته على شكل صوره او على شكل خلفيه اذا قلنا على شكل ( صوره ) هذا معناه ادراج صوره من الزر المبين بالصور التاليه  ثم نختار الصوره المحدده من الجهاز واذا قلنا ( خلفيه ) معناها نضغط الزر الايمن داخل الخليه ونختار خصائص الخليه ثم نضع علامة صح امام استخدام صوره كخلفيه ونضغط على استعراض ونختار الصوره المحدده من الجهاز لاحظ الصوره *  نبداء بتوزيع الستايل على حسب الارقام التي ذكرناها في التقسيم السابق  وزع الستايل كما تلاحظ بالارقام المقسمه سابقا بالنسبه للقسم الى بالنص ... حطيت رقمين .. مثل 3 و 4 ومثل ماقلت اول .. يكون نفس التصميم لان راح ندرج فوقها الصور الاساسيه ونحطها بالنص وتصبح هذه منطقة *تمدد .. فا مايهم اي وحده تحط منها لانها نفس التصميم وهذا الى نبي نوصله لتجنب اخطاء التمدد .. تابع .. بعد توزيع الصور نشد اطراف الجدول كما تلاحظ بالصور  يطلع عندنا هذا الشكل  بالمنطقة المعلمه بأشارة صح فوق وتحت ادرج الصور الأساسيه وهي رقم 5 فوق و 6 تحت وعمل لها توسيط من هذا الزر  ينتج هذا الشكل ويعتبر النهائي تقريبا قبل نقله الى المنتدى  والان نعدل الروابط للأزرار عن طريق مستطيل النقطه الفعاله الموضح بالصوره  نضغط ونسحب على الزر الى ان نغطيه ثم نتركها يطلع مربع اضافة رابط نضع الروابط التاليه على حسب الازرار الرئيسيه $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 الان نعمل توسيط للمنتدى وذلك بوضع المؤشر بالمنطقه الموضحه بالصوره ونعمل له توسيط  والتوسيط من هذا الزر ثم نذهب الى تعليمات برمجيه .. تحت .. ونحذف الاكواد المبينه باللون الازرق او الاحمر نشرحها .. الازرق .. تم اضافة الصور الى الاستايل ومجلد الصور موجود على سطح المكتب الاحمر .. تم اضافة الصور للستايل ومجلد الصور موجود بمجلد الاباتشي  المهم احذف الى تلقاه منها راح يكون المسار على هذا الشكل */badr_اسم الصوره حيث badr مجلد صور الستايل معنا هذا هو ان ترفع مجلد الصور للستايل الى مجلد المنتدى الرئيسي غالبا مايكون vb الحين اذهب الى تعليمات برمجيه ولاحظ الصوره التاليه .. مأخوذه من درس تركي الودعاني  .. نذهب الى لوحة التحكم بالمنتدى ثم الى ستايلات وقوالب ثم الى ضبط الستايلات ونختار الستايل الرئيسي حق الشركه حق التجارب افضل .. على العموم اختر مايناسبكنجد مربع الهيدر اول شي ومربع الفوتر الثالث كما هو مقسم بالصوره السابقه الهيدر باللون الاخضر نضيفه بقسم الهيدر للمنتدى بعد مانحذف مابه ماعدا $spacer_open $_phpinclude_output طبعا نضيف الكود فوقها والفوتر باللون الاصفر نضيفه بقسم الفوتر بالاخير بعد كلمة </script> طبعا بعدها نضيف الكود الى هنا انتهى درسنا باقي تلوين الستايل وبعض الاضافات الجماليه ان شاء الله نشرحها باقرب فرصه المعذره اذا في قصور او أخطاء حمل من هذا الرابط ملف الستايل مقطع مع الملفات المفتوحه مع الدرس كاملا مع ملف اقرأني << اقرأوه  http://www.m40m.com/test/style/badr.rar دمتم بود ................... ادعولي badr badr_363  hotmail.com
التعديل الأخير كان بواسطة !! badr2005 !!; 17 - 11 - 2005 الساعة 19:15
|
|
:: مصمم استايلات ::
 
       |
وشرح متعوب عليه جزاك الرحمن كل خير يالغالي |
|
:: عضو شرف ::
|
جزاك الله كل خير على هذا الشرح وجعله الله فى ميزانك لاتبخل على الجميع من علمك اخى الكريم ، وفتح الله عليك اختك فى الله |
|
:: عضو شرف ::
|
جزاك الله خير وينقل لمكانه المناسب |
|
عضو مؤسس
 
|
وتمت إضافتة الي الفهرسة . شكراً لك يابطل |
|
:: عضو نشيط ::
|
|
|
:: عضو نشيط ::
|
مشكور على النقل وعلى اضافته للفهرس تحياتي |
|
:: عضو نشيط ::
|
بالتوفيق |
| العلامات المرجعية |
| أدوات الموضوع | |
| طرق العرض | |
|
|
العرض العادي
