منتدى في ظلال المتحابين في الله عزوجل
توزيع استايل ذو أعمدة بالفرونت بيج 613623
عزيزي الزائر / عزيزتي الزائرة يرجي التكرم بتسجبل الدخول اذا كنت عضو معنا
او التسجيل ان لم تكن عضو وترغب في الانضمام الي اسرة المنتدي
سنتشرف بتسجيلك
شكرا توزيع استايل ذو أعمدة بالفرونت بيج 829894
ادارة المنتدي توزيع استايل ذو أعمدة بالفرونت بيج 103798
منتدى في ظلال المتحابين في الله عزوجل
توزيع استايل ذو أعمدة بالفرونت بيج 613623
عزيزي الزائر / عزيزتي الزائرة يرجي التكرم بتسجبل الدخول اذا كنت عضو معنا
او التسجيل ان لم تكن عضو وترغب في الانضمام الي اسرة المنتدي
سنتشرف بتسجيلك
شكرا توزيع استايل ذو أعمدة بالفرونت بيج 829894
ادارة المنتدي توزيع استايل ذو أعمدة بالفرونت بيج 103798


 
الرئيسيةأحدث الصورالتسجيلدخول
هل ترغب في إضافة دخل مادي إلى حسابك بدون أي تعب أو مشقة توجد فرصة توفر لك ذلك وتوفر لك ماتحلم به . إذا رغبت الإنضمام إلى فريق التسويق بالعمولة وتحقق دخلك المادي من الآن تواصل معنا عبر الرسائل الخاصة موضحآ طلبك للتسويق بالعمولة وأبشر بعزك .
مرحبآ بكم زوارنا وأعضائنا الكرام نحن سعداء بتواجدكم معنا وتواصلكم المستمر . ونود أن نلفت عنايتكم أنه قد تم فتح باب الإشراف في جميع الأقسام ولايمنع أن يكون في القسم أكثر من مشرف وماعليك إن كنت زائرآ إلا أن تسجل في المنتدى وتختار القسم الذي ترغب في الإشراف عليه . أماإذاكنت عضوآ ماعليك إلا أن تختار القسم الذي ترغب في الإشراف عليه . ويتم ذلك بإستخدام خدمة(إتصل بنا) وإرسال رسالة خاصة للإدارة ومن ثم يتم التعيين مباشرة . وتقبلوا تحياتي وتقديري للجميع (أخوكم / أبوعلي)
إلى الإخوة الأعزاء أود أن أنبه الجميع عند تنزيل مقطع من اليوتيوب لابد من إستخدام الطريقةالصحيحة  في التنزيل الموجودة في قسم مستشاري في الحاسب الآلي.حتى لايتم تنزيل إرتباطات مع المقطع مخلة بالدين والآدآب.ووفق الله عزوجل الجميع لمايحب ويرضى.أخوكم (أبوعلي)

 

 توزيع استايل ذو أعمدة بالفرونت بيج

اذهب الى الأسفل 
كاتب الموضوعرسالة
رفيع المقام
المدير العام
المدير العام
رفيع المقام


الجنس : ذكر
عدد المشاركات : 1204
عدد النقاط : 3564
التسجيل : 11/07/2009
الدولة الدولة : السعودية
المزاج المزاج : الحمدلله تمام
الأوسمة


توزيع استايل ذو أعمدة بالفرونت بيج M0dy.net-01304204274


توزيع استايل ذو أعمدة بالفرونت بيج 871594991










توزيع استايل ذو أعمدة بالفرونت بيج Empty
مُساهمةموضوع: توزيع استايل ذو أعمدة بالفرونت بيج   توزيع استايل ذو أعمدة بالفرونت بيج Icon_minitimeالإثنين ديسمبر 28, 2009 7:48 pm

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

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


الدرس الأول


* توزيع الإستايل في الفرونت بيج


بداية هذا هو التصميم النهائي الذي سنقوم بتوزيعه وتركيبه في المنتدى


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]


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

بعد تقطيع الإستايل ووضعه في مجلد التصميم ومثلا اسمينا المجلد بإسم " alshrqy-isla "

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


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]


1- الكود المطلوب مسحه .
2- ننتقل إلى التصميم بالضغط على الزر الموضح بالصورة .
3- بعد الإنتقال لصفحة التصميم نقوم بالضغط كلك يمين واختيار خصائص الصفحة وتعديل اتجاه الصفحة من اليمين إلى اليسار

بعد ذلك " انظر إلى الصورة التالية "


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]هذه الصورة بحجم اخر انقر هنا لعرض الصورة بالشكل الصحيح ابعاد الصورة هي 800x575 الابعاد 174KB.
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

نضغط على ادراج جداول ونختار ادراج عدد الجداول كما في الصورة أعلاه 3×3

وسيخرج لنا الناتج كما هو ظاهر لكم في الصورة أعلاه


الآن نضغط على الجدول كلك يمين ونختار خصائص الجدول " انظر إلى الصورة "

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]


سيخرج لنا المربع التالي نقوم كما هو مطلوب في الصورة

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]


سيصبح الجدول في النهاية هكذا


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]هذه الصورة بحجم اخر انقر هنا لعرض الصورة بالشكل الصحيح ابعاد الصورة هي 932x83 الابعاد 38KB.
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]


الآن نبدأ في ادراج الصور بالرطيقة التالية


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]هذه الصورة بحجم اخر انقر هنا لعرض الصورة بالشكل الصحيح ابعاد الصورة هي 800x600 الابعاد 291KB.
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]



1- هذه الأيقونة لإدراج الصور المطلوبة وكل صورة في الجدول المناسب كما يتضح لكم من الصورة
2- طبعا يخرج لنا مربع يحتوي مجلدات الجهاز , نتوجه للمجلد المطلوب ونبدأ بتنزيل الصورة وتوزيعها كما في الصورة .
3- الزوايا في التصميم تكون صور " اي لا تكن خلفيات " وسيأتي شرح الخلفيات وفوائدها ان شاءالله لمن لا يعرفون الخلفية في التصميم .


بعد توزيع الصور في الزوايا بصورة صحيحة وكما ذكرنا لكم بالصورة أعلاه , نأتي الآن لوضع الخلفيات التمددية للهيدر والفوتر والأعمدة , وطريقة توزيع الخلفيات كالتالي :-

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

ركز على الصورة ودقق في الخانات المكتوب عليها كلمة " خلية " , هذه هي الخلفيات التي تساعد الإستايل على التمدد والتقلص في وقت الحاجة وسنقوم هنا بإدراج الخلفيات كما هو موضح لكم بالطريقة التالية :-


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


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]هذه الصورة بحجم اخر انقر هنا لعرض الصورة بالشكل الصحيح ابعاد الصورة هي 750x541 الابعاد 251KB.
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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


في حال انتهاءك تكون النتيجة الصحيحة كهذه الصورة

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

شاهد خلية الهيدر والفوتر والأعمدة كيف صارت .. هذه النتيجة الصحيحة .

الآن نقوم بعمل الشد اللازم كما هو واضح لكم في الصوةر التالية

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]



لتكون النتيجة هي :

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

الآن نضع المؤشر في وسط الهيدر " كلك يمين " حتى يتم تقسيم الهيدر لتركيب الصور

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

انظر الى الخانات اللازم تركيب الصور فيها ..

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

الصور غير متراكبه .. صح [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

ركز على الصورة أعلاه وانظر الى ايقونات المحاذاة وقم بعمل محاذا لكل صورة إلى جهتها الصحيحة .

الآن وبعد ان قمنا بعمل المحاذاة اللازمة وقمنا بتثبت الصور .. نتوجه إلى التعليمات البرمجية بالفرونت بيج

شاهد الصورة

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]



سنشاهد امتداد الصور ومسار الصور إلى المجلد المحفوظ وهو التالي : -


كود PHP:

file:///C:/Documents%20and%20Settings/Free%20User/Desktop/دروس/alshrqy-isla/alshrqy_06.jpg



نقوم بمسح الكود التالي :-


كود PHP:

file:///C:/Documents%20and%20Settings/Free%20User/Desktop/دروس/



حتى لا يبقى سوى امتداد الصورة الصحيح وهو التالي :-


كود PHP:

alshrqy-isla/alshrqy_06.jpg




بعد التظليل على الإمتداد الغير مرغوب به نتوجه إلى كلمة " تحرير " ومن ثم كلمة " بحث " ليظهر لنا المربع الموضح بالصوةرأعلاه ومن ثم بقوم بعملية استبدال الرابط المنسوخ بــ المربع المجاور يكون فارغ

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

بعد اكمال المطلوب منك اعلاه توجه إلى ايوقنة التصميم لنشاهد الإستايل بالفرونت بيج سنجده أصبح هكذا

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

الآن بقي علينا أن نضع المؤشر في المستطيل بين الهيدر والفوتر .. شاهد الصورة

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

بعد ذلك نعمل توسيط ليكون المؤشر في وسط المستطيل - نقطة مهمة

نتوجه الآن الى التعليمات البرمجية لنشاهد الأكواد

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]


الكود ف يالأعلى هو الهيدر .. والكود في الأسفل هو الفوتر

الآن نتوجه للوحة تحكم المنتدى ونتوجه إلى الإستايل المطلوب تركيب التصميم عليها وندخل إلى الإستايل

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]


هذا الهيدر والفوتر .. نقوم بمسح محتوى الهيدر ولا نبقي سوى الكود التالي : -


كود PHP:

$spacer_open


$_phpinclude_output




ونقوم بنسخ الهيدر من الفرونت بيج ونلصقه فوق الكود المشار إليه اعلاه

ومن ثم نتوجه إلى قالب الفوتر وننسخ محتوى الفوتر من الفرونت بيج ونلصقه أسفل الكود التالي مباشرة


كود PHP:









بعدها اعمل حفظ .. وشاهد عملك .. النتيجة النهائية


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]


قد تعترضك مشكلة أخيره وهي عدم تماسك حدود الإستايل مع جدار المنتدى .. توجه إلى اعدادات الإستايل

خيار " خلفية المنتدى/Body "

ستجد أن الكود الموجود بالمستطيل المجاور له هذا هو :


كود PHP:

margin: 5px 10px 10px 10px;


padding: 0px;




غير الأرقام جميعها إلى صفر وبهذا تنتهي المشكلة ويصبح التصميم جاهزا وممتازا ان شاء الله

ملاحظة مهمة : في حال عدم ظهور صور الإستايل بعد التركيب عليك بالتأكد من التالي :-


1- اسم مجلد الإستايل : بالشرح اسمه alshrqy-isla
2- مكان وجود مجلد الإستايل وانه في المكان الصحيح بالنسبة لمسار الصور .
3- مسار الصور في الهيدر والفوتر فقد يكون هناك حرف زائد او ناقص فيكون سبب في عدم ظهور الصور
الرجوع الى أعلى الصفحة اذهب الى الأسفل
 
توزيع استايل ذو أعمدة بالفرونت بيج
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتدى في ظلال المتحابين في الله عزوجل :: الفئة السابعة :: التصميم والجرافكس-
انتقل الى: