العاب قص شعر/العاب دبابات/العاب كرة قدم/العاب مكياج/العاب سيارات سباق/العاب سبونج بوب/العاب ماريو/العاب تلبيس/العاب اكشن نار/ adslsolutionsالعاب مغامرات/العاب ذكاء/العاب اطفال/العاب طبخ بنات/العاب باربي/العاب بن تن/العاب بوس/العاب تلوين/العاب ديكور


العودة   نادى الاتصالات والتقنية > اقسام التصميم والتطوير > منتدى تطوير وإدارة وتصميم المواقع

إضافة رد
 
أدوات الموضوع طريقة عرض الموضوع
قديم 06-05-2010, 04:59 PM   #1
ابو عمر
عضو نشيط
 
تاريخ التسجيل: Jun 2010
المشاركات: 52
افتراضي شرح طريقة توزيع الاستايل





السلام عليكم ورحمة الله وبركاته

التجديد والتغيير مطلوب كل فترة


ومع تطور طرق التصميم تطورت معه ايضا طرق التوزيع

من طريقة الاستايل الرباعي الى الاستيلات الثابتة الى css وغيرها

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

وكانت الطريقة الانسب css ولكن للاسف بسبب جهل الكثير بهذه اللغة

اصبح من الصعب عليهم توزيع الاستايل بهذه الطريقة

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

وهي ماتسمى طريقة التوزيع التي تعتمد اساسا على Spacer - clospan - rowspan كما انك لن تستخدم الفرونت بيدج الا لعمل جدول واحد وهو الجدول الخاص بلاعمدة

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

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

وبهذه الطريقة سوف تحل اغلب مشاكل الاستايل فهي تشبه التوزيع بإستخدام css الى درجة كبيرة جدا

واليكم مميزات استخدام هذه الطريقة













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

شكلي طولت عليكم

ندخل في لب الموضوع

قبل البدء في شرح الطريقة احب اوضح لكم معنى كلا من Spacer - clospan - rowspan

اولا نبدا بال Spacer

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

وهما

$spacer_open

$_phpinclude_output

مايهمنا في الامر هو الكود $spacer_open

الم يتسال احدكم ماهي وظيفة هذا الكود؟

هذا الكود الذي يفتح من خلاله المنتدى

بمجرد بدء هذا الكود سوف يبدا المتغير Background في اعدادات css في العمل

وتعتبر صفحة المنتدى بدأت

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

بإستخدام الكود $spacer_close

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

ولهذا ! تظهر مشكلة ان اخر الفوتر يكون مماثل للون الخلفية الخارجية على اعتبار ان المنتدى انتهى بدخول الفوتر

ويمكنك الان حل هذه المشكلة عن طريق فقط تغيير مكان المتغير Close في قالب الفوتر

اي انه بإختصار Spacer هي قوالب موجودة في المنتدى

بلاسماء التالية



Spacer_close

----------

ناتي الان الى شرح كلا من clospan - rowspan

لكي تستخدم الملف الذي يصدره لك الفوتوشوب يجب الا يحتوي التقطيع على كلا من clospan - rowspan مع بعضهما

اما اذا تواجد ال Clospan بمفرده او ال Rowspan بمفرده

لن يحدث مشاكل

والان ناتي الى شرح ال Clospan

بإختصار ال Clospan يحدث عند التقسيم بشكل افقي

شوف الحين انا مقطع الصور رقم 3 وتحتها صورتيين رقم 2 ورقم 1

معنى هذا ان الصورة رقم ثلاثة حدث لها Clospan اي إنقسام رئيسي الى الصورتيين



اما ال Rowspan هو الانقسام بشكل افقي

ايضا موضح لكم بالصورة (إنقسام الصورة رقم 3 الى صورتيين 1و 2)



فإذا احتوى التقطيع على كلا من Clospan - Rowspan عند فتح الملف الذي يصدره الفوتوشوب سوف تجده يحتوي على Spacer وهذا يسبب تشوه عند إستخدام هذا الملف



لذلك فكن حريص اثناء تقطيعك الا يحتوى على كلا من Clospan - Rowspan مع بعضهما

-----------


الان ناتي الى طريقة التقطيع وسوف يتم تقطيع بإستخدام الاداة Crop في الفوتوشوب

وهذه هي صورة الاداة



ثم استخدام اداة التقطيع الاعتيادية

افتح التصميم الخاص بك

ثم بإٍستخدام الاداة Crop قم بقص الهدر كما موضح لكم (إذا كان استايلك يحتوي على اعمدة عليك قص جزء بسيط من الاعمدة مع قالب الهدر)



بعدها اضغط على Enter (زر موجود في الكيبورد)

سوف تلاحظ ان الهدر اصبح في صورة لحاله اضغط على زر f لاجل تكبر الصورة وتقطع بحرية اكبر

الحين لك حرية التقطيع

قطع على شكل صورة او اثنين او ثلاثة او اربعة او حتى عشرين صورة

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

انا قطعت على الشكل التالي




قطعت الوسط صورة واحدة <<<< ناوي يضع عليها تاثيرات فلاشية .. هاع

والاطراف قطعتها على شكل اكثر من صورة لاجل يكون الاستايل سريع

واعيدها لك حرية التقطيع

الحين قبل ماتسوي حفظ باسم قم بحفظ هذه الصورة بصيغة psd باسم الهدر لاجل لو حبيت ترجع تعدل على التقطيع

انتبه لا تسوي حفظ فقط لان كذا استايلك راح يطير وسوف يتم الكتابة على الصورة الاصلية

سوي Save as

بعد ذلك Save for the web

قم بتغيير نوع الصور الى jpg لاجل تكون الصور في اعلى دقة ممكنة

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

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

اما اذا لم تجد هذه الصور فإن تقطيعك تمام

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



ملاحظين ان الجدول هذه هي بدايته

1- تجعل الاستايل متوافق مع الفايرفوكس. 2- سهولة تامة في التقطيع وسوف تتخلص من عملية التوزيع نهائيا & سوف يكون لديك حرية تقطيع الهدر & الفوتر (تستطيع تقطيعهما الى اي عدد من الصور تريده ولن تلتزم بمقاسات معينة ) 3- التحميل المتدرج للاستايل (اي انك لن تنتظر اكتمال الصفحة كلها حتى يظهر الاستايل & بل بمجرد تحميل الهدر سوف يظهر ثم يبدا بعدها بظهور الرد الاول والثاني وخلافه) 4- حل مشكلة تقطع الاستايل الثابت الذي يحتوي على اعمدة عند وجود صورة كبيرة في الموضوع 5- سرعة الاستايل بالمقارنة بالطرق الاعتيادية 6- تحل مشكلة الفلاش عند إدراجه Spacer_open رمز PHP:
كود:
 		 			 <table id="Table_01" width="776" height="218" border="0" cellpadding="0" cellspacing="0">


المطلوب تعديله الى التالي

رمز PHP:
كود:
 		 			 <table id="Table_01" width="776" height="218" border="0" cellpadding="0" cellspacing="0"dir="ltr" align="center">


المطلوب فقط هو اضافة الكود رمز PHP:
كود:
align="center"

الى نهاية الجدول لاجل يقوم بتوسيط الجدول

وحذاااااااااااااااااااااااااااري ! من استخدام اكواد
رمز PHP:
كود:
p align="x"

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

وكذلك اضافة امر الاتجاه
رمز PHP:
كود:
dir="ltr"

بعد ذلك نروح لقالب الهدر في المنتدى (لاتنسى استبدال روابط الصور)

سوف تجد الكود التالي

رمز PHP:
كود:
[LEFT] 		 			 <table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center"> 
<tr> 
    <td align="$stylevar
"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></a></td> <td align="$stylevar[right]"> &nbsp; </td> </tr> </table>

والمطلوب هو حذف الجدول الخاص بالشركة وإدراج الجدول الخاص بك مكانه

بعدها روح لمنتداك وشوف الهدر

وهذه الصورة



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

ولاجل ما اطول عليكم الشرح

نفس الطريقة مع الفوتر

ايضا قم بقصه بلاداة Crop ثم قطعه على كيفك

ولكن انتظر

لا تضع الفوتر في نهاية القالب

ابحث عن التالي

رمز PHP:
كود:
<if condition="$show['dst_correction']">

اعلاه قم بإضافة الكود الخاص بالفوتر

لا تنسى ابحث عن الكود التالي في قالب الفوتر
رمز PHP:
كود:
$spacer_close

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


ثم نروح للمنتدى ونشوف الفوتر

ماشاء الله متوافق مع اكسبلورر + فايرفوكس

الحين مايبقى لنا الا اضافة الاعمدة

وهي يتم إضافتها عن طريق القوالب Spacer_open & spacer_close

وسوف تجدوها في الرد التالي

ارجوا ان تنال الطريقة اعجابكم



من مواضيعي في المنتدي

ابو عمر غير متواجد حالياً   رد مع اقتباس
إضافة رد

أدوات الموضوع
طريقة عرض الموضوع

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة

الانتقال السريع

المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر رد
فيديو افضل شرح في تقطيع الاستايل ابو عمر منتدى تطوير وإدارة وتصميم المواقع 0 06-05-2010 04:44 PM
شرح عمل أقسام الاستايل عبد الله منتدى تطوير وإدارة وتصميم المواقع 0 06-05-2010 03:25 PM
حل لمشكله خط الاستايل الصغير عبد الله منتدى تطوير وإدارة وتصميم المواقع 0 06-05-2010 03:12 PM
شرح الخطوط المناسبة لتنسيق الاستايل عبد الله منتدى تطوير وإدارة وتصميم المواقع 0 06-05-2010 03:06 PM
طريقة شرح تلوين جميع أجزاء الاستايل الاحترافي Css عبد الله منتدى تطوير وإدارة وتصميم المواقع 0 06-05-2010 02:48 PM


الساعة الآن 10:25 AM.


dsl.adslsolutions.net