|
|
| اعلانات |  |
|
 |
 |
 |
 |
 |
|
 |
 |
|
|
| ركن تطوير المنتديات لطرح جميع ما يساعدك على تطوير منتداك - يمنع طرح المشاكل والطلبات |
 |
|
|
LinkBack | أدوات الموضوع | انواع عرض الموضوع |
07-10-2009, 06:22 PM
|
|||||||||||
|
|||||||||||
توزيع استايل بأعمدة بالفرونت بيج وتركيبه على المنتدى
السلام عليكم ورحمة الله وبركاته
أقدم لكم شرح مصور في توزيع استايل ذو أعمدة بالفرونت بيج ومن ثم الإنتقال به الى الخطوة الأخيرة وهي التركيب في المنتدى , ان شاء الله نستفيد واياكم من هذا الشرح واي استفسار أنا بالخدمة . علما أن هذا الشرح ستتبعه شروحات أخرى في توزيع الإستايل بأكمله حتى ننتهي ونخرج بإستايل جديد إن شاء الله . الدرس الأول * توزيع الإستايل في الفرونت بيج بداية هذا هو التصميم النهائي الذي سنقوم بتوزيعه وتركيبه في المنتدى  طبعا التقطيع للتصميم سيكون له شرح مستقل وهو مهم وخصوصا ان كان الإستايل بأعمدة .. فيجب أن يكون التقطيع متساوي في جميع جهات التصميم وهناك عدة طرق للتقطيع وكل شخص له طريقته .. والنتيجة واحدة . بعد تقطيع الإستايل ووضعه في مجلد التصميم ومثلا اسمينا المجلد بإسم " alshrqy-isla " نتوجه إلى الفرونت بيج وبعد فتحه نقوم الكود الظاهر لنا بالتعليمات البرمجية  1- الكود المطلوب مسحه . 2- ننتقل إلى التصميم بالضغط على الزر الموضح بالصورة . 3- بعد الإنتقال لصفحة التصميم نقوم بالضغط كلك يمين واختيار خصائص الصفحة وتعديل اتجاه الصفحة من اليمين إلى اليسار بعد ذلك " انظر إلى الصورة التالية "  نضغط على ادراج جداول ونختار ادراج عدد الجداول كما في الصورة أعلاه 3×3 وسيخرج لنا الناتج كما هو ظاهر لكم في الصورة أعلاه الآن نضغط على الجدول كلك يمين ونختار خصائص الجدول " انظر إلى الصورة "  سيخرج لنا المربع التالي نقوم كما هو مطلوب في الصورة  سيصبح الجدول في النهاية هكذا  الآن نبدأ في ادراج الصور بالرطيقة التالية  1- هذه الأيقونة لإدراج الصور المطلوبة وكل صورة في الجدول المناسب كما يتضح لكم من الصورة 2- طبعا يخرج لنا مربع يحتوي مجلدات الجهاز , نتوجه للمجلد المطلوب ونبدأ بتنزيل الصورة وتوزيعها كما في الصورة . 3- الزوايا في التصميم تكون صور " اي لا تكن خلفيات " وسيأتي شرح الخلفيات وفوائدها ان شاءالله لمن لا يعرفون الخلفية في التصميم . بعد توزيع الصور في الزوايا بصورة صحيحة وكما ذكرنا لكم بالصورة أعلاه , نأتي الآن لوضع الخلفيات التمددية للهيدر والفوتر والأعمدة , وطريقة توزيع الخلفيات كالتالي :-  ركز على الصورة ودقق في الخانات المكتوب عليها كلمة " خلية " , هذه هي الخلفيات التي تساعد الإستايل على التمدد والتقلص في وقت الحاجة وسنقوم هنا بإدراج الخلفيات كما هو موضح لكم بالطريقة التالية :- نأتي على كل خلية ونضغط كلك يمين ونختار الخلفية المطلوبة . ان كانت هيدر أو فوتر او اعمدة ونقوم بوضعها .. شاهد الصوةر التالية : -  بعد الضغط على خصائص الخلية يخرج لنا المربع الموضح أعلاه - نضغط على استعراض ونتوجه لمكان وجود الإستايل المطلوب ... شاهد مثال الخلية .. سنقوم بتركيب العمود الأيمين للإستايل .. لذلك قمنا باختيار الخلية الصحيحة .. شاهد الصورة وركز عليها جيدا حتى تعرف طريقة توزيع الخلايا . في حال انتهاءك تكون النتيجة الصحيحة كهذه الصورة  شاهد خلية الهيدر والفوتر والأعمدة كيف صارت .. هذه النتيجة الصحيحة . الآن نقوم بعمل الشد اللازم كما هو واضح لكم في الصوةر التالية  لتكون النتيجة هي :  يجب ان يكون الناتج كهذه الصورة وتراكب الأعمدة مع بعضها البعض وعلى مسار واحد غير متقطع .. يجب التركيز على الشرح وخصوصا هذه النقطة .. لأن الكثير يعاني من مشكلة تركيب الأعمدة وعدم تراكبها مع بعض فتجد الاعمدة تخرج عن بعضها وليست على استقامه واحدة .  الآن نضع المؤشر في وسط الهيدر " كلك يمين " حتى يتم تقسيم الهيدر لتركيب الصور شاهد هذه الصورة  بحكم أن عمل التصميم فيه ثلاث صور .. فلذلك يكون التقسيم على اربع خانات .. ركز على الصورة اعلاه .. ويتم تركيب ثلاث الصور .. والخانة الرابعة نتركها لنقطة التمدد .  انظر الى الخانات اللازم تركيب الصور فيها .. نقوم باستدعاء الصور عن طريق ايقونة جلب الصور التي سبق وان وضحناها في أول الشرح ونقوم بوضع كل صورة في مكانها حسب تصميمك أنت .. فمثلا تصميمنا هذا سيكون الناتج هكذا  الصور غير متراكبه .. صح  نعم هنا يجب علينا عمل محاذاة للصور حتى تثبت كل صورة في مكانها الصحيح بدون وجود اية مشكلات او تقطع بين الصور  ركز على الصورة أعلاه وانظر الى ايقونات المحاذاة وقم بعمل محاذا لكل صورة إلى جهتها الصحيحة . الآن وبعد ان قمنا بعمل المحاذاة اللازمة وقمنا بتثبت الصور .. نتوجه إلى التعليمات البرمجية بالفرونت بيج شاهد الصورة  سنشاهد امتداد الصور ومسار الصور إلى المجلد المحفوظ وهو التالي : - كود PHP:
نقوم بمسح الكود التالي :- كود PHP:
حتى لا يبقى سوى امتداد الصورة الصحيح وهو التالي :- كود PHP:
بعد التظليل على الإمتداد الغير مرغوب به نتوجه إلى كلمة " تحرير " ومن ثم كلمة " بحث " ليظهر لنا المربع الموضح بالصوةرأعلاه ومن ثم بقوم بعملية استبدال الرابط المنسوخ بــ المربع المجاور يكون فارغ يجب التركيز على هذه النقطة للمبتدئين حتى لا يعانوا من عدم ظهور صور الإستايل لديهم .. وما طرحته أعلاه هو مثال لطريقة عملي .. وقد تختلف المسارات كل شخص على حسب اسم المجلدات لديه التي يعمل بها .. بعد اكمال المطلوب منك اعلاه توجه إلى ايوقنة التصميم لنشاهد الإستايل بالفرونت بيج سنجده أصبح هكذا  الآن بقي علينا أن نضع المؤشر في المستطيل بين الهيدر والفوتر .. شاهد الصورة  بعد ذلك نعمل توسيط ليكون المؤشر في وسط المستطيل - نقطة مهمة نتوجه الآن الى التعليمات البرمجية لنشاهد الأكواد  الكود ف يالأعلى هو الهيدر .. والكود في الأسفل هو الفوتر الآن نتوجه للوحة تحكم المنتدى ونتوجه إلى الإستايل المطلوب تركيب التصميم عليها وندخل إلى الإستايل  هذا الهيدر والفوتر .. نقوم بمسح محتوى الهيدر ولا نبقي سوى الكود التالي : - كود PHP:
ونقوم بنسخ الهيدر من الفرونت بيج ونلصقه فوق الكود المشار إليه اعلاه ومن ثم نتوجه إلى قالب الفوتر وننسخ محتوى الفوتر من الفرونت بيج ونلصقه أسفل الكود التالي مباشرة كود PHP:
بعدها اعمل حفظ .. وشاهد عملك .. النتيجة النهائية  قد تعترضك مشكلة أخيره وهي عدم تماسك حدود الإستايل مع جدار المنتدى .. توجه إلى اعدادات الإستايل خيار " خلفية المنتدى/Body " ستجد أن الكود الموجود بالمستطيل المجاور له هذا هو : كود PHP:
غير الأرقام جميعها إلى صفر وبهذا تنتهي المشكلة ويصبح التصميم جاهزا وممتازا ان شاء الله ملاحظة مهمة : في حال عدم ظهور صور الإستايل بعد التركيب عليك بالتأكد من التالي :- 1- اسم مجلد الإستايل : بالشرح اسمه alshrqy-isla 2- مكان وجود مجلد الإستايل وانه في المكان الصحيح بالنسبة لمسار الصور . 3- مسار الصور في الهيدر والفوتر فقد يكون هناك حرف زائد او ناقص فيكون سبب في عدم ظهور الصور أسأل الله سبحانه أن ينفعني واياكم بهذا الشرح وان لا يحرمني الأجر .. لا تنسوني من صالح الدعاء أخوكم/ أبو ناصر الرجاء ذكر المصدر عند النقل [فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات . إضغط هنا للتسجيل] التعديل الأخير تم بواسطة alshrqy ; 07-10-2009 الساعة 07:39 PM 
|
|
| مواقع النشر (المفضلة) |
| الكلمات الدلالية (Tags) |
| توزيع،استايل،أعمدة،الفرونت بيج،تركيبه،المنتدى |
| أدوات الموضوع | |
| انواع عرض الموضوع | |
|
|
|
العرض العادي
