Chakira
10-30-2013, بتوقيت غرينيتش 08:39 PM
http://www.dzbatna.com/images/icons/smile.gif ][!!!][ط¯ظˆط±ط© طھطµظ…ظٹظ… ط§ظ„ط£ط³طھط§ظٹظ„ط§طھ ظپظٹ ظ…ظˆط¶ظˆط¹ ظˆط§ط*ط¯][!!!][ (http://www.dzbatna.com/t690352/)
السلام عليكم ورحمة الله وبركاته
...
اليوم حبيت انقل لكم دورة تصميم الأستايل styleات .... [ طبعآ انا اللي سويتها بس في منتدى ثاني ] ... http://www.dzbatna.com/images/smilies/cupidarrow.gif
نخليكم مع الشرح طريقة ... http://www.dzbatna.com/images/smilies/nosweat.gif
...
][!!!][1]دورة تصميم الأستايل styleات [ تصميم الهيدر header والفوتر][!!!][
اقتباس
السلام عليكم ورحمة الله وبركاته
كيف الحال ان شاء الله بالف خير http://www.wlayt91.com/vb/images/smilies/SnipeR%20(87).gif
...
اليوم درس مفصلنا هو عن [ تصميم هيدر و فوتر ] ...
...
بدون مقدمآت نبدآء ... http://www.wlayt91.com/vb/images/smilies/SnipeR%20(76).gif
....
اول شي : افتح برنامج الفوتوشوب _> اختار ملف file من الاعلى يسار _> اختار جديد new _> اضبط الإعدادات كما تلاحظ
http://www.wlayt91.com/dorh1/1.gif
...
تطلع لنا الصفحه ... ونرسم مربع بـآستخدام هذي الاداه ...
http://www.wlayt91.com/dorh1/2.gif
...
ونرسم مستطيل ... بالوان فاتحه .. طبعآ متقاربه لبعض ...
http://www.wlayt91.com/dorh1/3.gif
...
الحين نختار اداة الباث <_ والله مدري يسمونها كذا هههههأإي
شوفوا الصوره وبلآ طنازه ههه
http://www.wlayt91.com/dorh1/4.gif
اختار المحدد با الصوره اللي فوق ..
....
نروح للمستطيل ... ونحط ثلاث نقــط على اطراف التصميم بآداة الباث ... مثل ماهو موضح بالصوره اللي تحت ...
http://www.wlayt91.com/dorh1/5.gif
...
والحين نضغط على نقطه من النقط الموجوده راح يطلع لنا اطرافها ..
نرفع او ننزل اللي على الاطراف
وهذا مثال
http://www.wlayt91.com/dorh1/6.gif
الحين سو نفس الطريقه على النقط الثانيه بمايناسبك ...
والحين نضغط على الشكل الموضح ادناه < متعوب عليها .. http://www.wlayt91.com/vb/images/smilies/CAQBGDEB.png
http://www.wlayt91.com/dorh1/7.gif
...
سو مثل الصوره اللي تحت ...
http://www.wlayt91.com/dorh1/8.gif
.....
وسو نفس الصوره هذي ... طبعآ مع اختيار اول كلمه فوق في الصوره ..
http://www.wlayt91.com/dorh1/9.gif
....
الحين حنا انتهينا والحمد لله من تصميم الهيدر header .......
... الحين نكرر السالفه كلها على الهيدر header ... عشان يصير معانا كذا
http://www.wlayt91.com/dorh1/10.gif
....
وعاد انت وحركاتك ....
...
وهذا ناتج اللي عملناه ....
http://www.wlayt91.com/dorh1/11.gif
.....
....
Br3s
][!!!][2]دورة تصميم الأستايل styleات [ إطار الأقسام ][!!!][
اقتباس
السلام عليكم ورحمة الله وبركاته
اقتباس
كيف الحال ان شاء الله بألف خير ... !
المهم نخش بـ الموضوع على طول .... http://www.wlayt91.com/vb/images/smilies/SnipeR%20(87).gif
....
اليوم درس مفصلنا هو عمل إطار على الاقسام ...,
بسم الله الرحمن الرحيم ..,
...
اول شي نرسم مستطيل يكون في النص [ بين الهيدر header والفوتر ] باستخدام
http://www.wlayt91.com/dorh2/1.gif
وهذا هو المستطيل بعد ماعملناه
http://www.wlayt91.com/dorh2/2.gif
...
ونرسم مستطيل ثاني فوق المستطيل الاول
ونستخدم اداة الباث على المستطيل الثاني وهذي هي الاداه..
http://www.wlayt91.com/dorh1/4.gif
وهذي صوره بعد ما رسمنا مستطيل فوق الاول وحركناه بـ أداة الباث ..
http://www.wlayt91.com/dorh2/3.gif
.
الحين نرجع للمسطيل الاول ونعمل مثل الصوره التاليه..
http://www.wlayt91.com/dorh2/4.gif.
...
الحين اعمل الاعدادات نفسها لآحظ يا [ حلا الكون + الريان ] http://www.wlayt91.com/vb/images/smilies/SnipeR%20(87).gif
http://www.wlayt91.com/dorh2/5.gif.
تابع
http://www.wlayt91.com/dorh2/6.gif
نتــأإبع
http://www.wlayt91.com/dorh2/7.gif
ونكمممل المتابعه http://www.wlayt91.com/vb/images/smilies/SnipeR%20(65).gif
http://www.wlayt91.com/dorh2/8.gif
....
طبعاً الصور تشرح طريقة المطلوب .. http://www.wlayt91.com/vb/images/smilies/smile.gif
وهذي بعد زبطنا المستطيل الاول [ الخلفي ]
وهذي النتيجه
http://www.wlayt91.com/dorh2/9.gif
...
الحين نرسم متسطيل [ منحني الزوايا ] داخل المستطيل الثاني [ المستطيل الامامي ] ... وهذي الصوره تشرح طريقة
http://www.wlayt91.com/dorh2/10.gif
...
ونعمل عليها حركات طبعاً نسوي اول شي كذا
http://www.wlayt91.com/dorh2/11.gif
وبعدين نعمل عليها الاعدادات لآحظو في الاعدادات [ خصوصاً المحدد ]
http://www.wlayt91.com/dorh2/12.gif
...
نتــأإبع
http://www.wlayt91.com/dorh2/13.gif
ونكمممل المتابعه ... http://www.wlayt91.com/vb/images/smilies/SnipeR%20(87).gif
http://www.wlayt91.com/dorh2/14.gif
...
وهذي اخر شي ... http://www.wlayt91.com/vb/images/smilies/SnipeR%20(44).gif
http://www.wlayt91.com/dorh2/15.gif
...
وهذي نهاية اللي سويناه في الاعدادات
http://www.wlayt91.com/dorh2/16.gif
....
ملآحظــــه : مكتوبه في الصوره ... http://www.wlayt91.com/vb/images/smilies/CAQBGDEB.png
http://www.wlayt91.com/dorh2/17.gif
المستطيل اللي محدد بـ الاحمر لآ تكتبون فيه اي شي ... ولا تقربون حتى للحدود ... هذا هو اللي يعرض الاقسام ....
...
....
وهذا نهاية منظر التصميم ... http://www.wlayt91.com/vb/images/smilies/CAQBGDEB.png http://www.wlayt91.com/vb/images/smilies/SnipeR%20(87).gif
http://www.wlayt91.com/dorh2/18.gif
...
الله الله عاد بالتطبيق ... http://www.wlayt91.com/vb/images/smilies/smile.gif
لاحد يزود ولا احد يسوي حركات وزخارف <_ مايقصد [ أعفيني ] http://www.wlayt91.com/vb/images/smilies/CAQBGDEB.png
[ العذر والسموحه على هـ الدرس مفصل البسيط بس خليته في موضوع لحـاله لـ كثرة صور الشرح طريقة وعشان توصل لكم الفكره ]
Br3s
][!!!][3]دورة تصميم الأستايل styleات [ تقطيع الأستايل style ][!!!][
اقتباس
السلام عليكم ورحمة الله وبركاته
اقتباس
كيف الحال ان شاء الله بخير يا اعضا الولايـه ...
المهم ندخل با الموضوع على طول ..
...
درس مفصلنا اليوم هو تقطيع الاستايل style ..
بس قبل لا نبدا الدرس مفصل نبي نعدل على التصميم لان المفروض يكون في الدرس مفصل الاول بس نسيته
والعذر والسموحه ..
تابعوا معاي في الصور ...
http://www.wlayt91.com/dorh3/1.gif
http://www.wlayt91.com/dorh3/2.gif
طبعاً نسوي نفس مافي الشرح طريقة .. ومثل الكلام الموجود في الصور ..
وهذي النتيجة ..
http://www.wlayt91.com/dorh3/3.gif
...
الحين الحمد لله انتهينا من السالفه اللي اخطينا فيهــأإ ... http://www.wlayt91.com/vb/images/smilies/SnipeR%20(87).gif
نرجع لدرس مفصلنا اللي اليوم وهو تقطيع الاستايل style ...
ندخل با الموضوع على طول ..
...
اول شي نسخدم اداة التقطيع مثل اللي في الصوره
http://www.wlayt91.com/dorh3/4.gif
نضغط ونسحب للجهه الثانيه ...
وهذا هو المحدد بـ اللون الاحمر بعد التحديد للهيدر و الفوتر
مثل في الصوره ..
http://www.wlayt91.com/dorh3/5.gif
والحين جاء دور تقطيع إطار الاقسام
نضغط ونسحب ...
مثال في الصوره ..
http://www.wlayt91.com/dorh3/6.gif
ملآحــظـــة : أول شي نقــطع الهيــدر و الفوتــر .. وبعديــن إطار الاقســام ...
وهذي الصوره بعد تقطيع الهيدر header و الفوتر و إطار الاقسام .
http://www.wlayt91.com/dorh3/7.gif
...
الحين بعــد التقطيــع نروح للقائمة .. [ File .._> Save For Web.. ] مثــال بـ الصوره ..
http://www.wlayt91.com/dorh3/8.gif
بعد مانختار مثل الصوره اللي فوق ... تطلع لنا الصوره اللي تحت
انتبه للي محدد في الصوره .
http://www.wlayt91.com/dorh3/9.gif
...
الحين راح تطلع لنا الصوره التاليه تـــأإبـــع معـــأإي ...
http://www.wlayt91.com/dorh3/10.gif
نسوي مجلد جديد ونحط فيه الصور اللي قطعناها ...
وبــكذا نكون قطعنا الاستايل style تقطيع كــامـــل ..
..
][!!!][4]دورة تصميم الأستايل styleات [ تركيب install الهيدر header + الفوتر][!!!][
اقتباس
السلام عليكم ورحمة الله وبركاته
اقتباس
كيفكم أعضاء ولآيـ91ـة ... http://www.wlayt91.com/vb/images/smilies/SnipeR%20(69).gif
...
إلمهـــم ...
درس مفصلنا اليوم هو [ أضافة الهيدر header و الفوتر للمنتدى ] ..
...
بسم الله نبداء .
..
أول شي ندخل على لوحة تحكم المنتدى forum .!
طبعـــاً اللي تابع أول درس مفصل اللي هو / تنصيب setup السيرفر SERVER الشخصي وتركيب install منتدى عليه يدخل على الرابط هذا ..
http://localhost/vb/admincp/index.php (http://localhost/vb/admincp/index.php)
واللي يبي يطبق على موقع على الانترنت يطبق مافيه مشكله [ بس مو تقولون ان برعص جبت فيكم العاطل لو تخربونه ] http://www.wlayt91.com/vb/images/smilies/CAQBGDEB.png
...
نكممل : بعد مادخلنا على رابط لوحة تحكم الموقع نكتب الأسم والرقم السري ونضغط على [ تسجيل الدخول ] ..
http://www.wlayt91.com/dorh4/1.gif
بعدين نروح للقائمه اللي على اليمين ونختار مثل اللي في الصوره ...!
http://www.wlayt91.com/dorh4/2.gif
راح تطلع لنا صفحه على اليسار ... مايهمنا الا اول مربع مثل اللي في الصوره .!
http://www.wlayt91.com/dorh4/3.gif
الصوره مشروحه طبعآ .!
الحين راح تطلع لنا قائمه بعد ماكتبنا القالب template اللي نبيه [ نختار منها القالب template المطلوب ] ...
http://www.wlayt91.com/dorh4/4.gif
نضغــط على القالب template دبل كلك ... !
http://www.wlayt91.com/dorh4/6.gif
الصوره مشروحه ..! http://www.wlayt91.com/vb/images/smilies/SnipeR%20(3).gif
...
الحين جاء وقت الفرونت بيج ...!
نفتح البرنامج ونروح على [ تعليمات برمجية ] ... وراح نحصل الاكواد على طول نضلل الاكواد [ كامله ونحذفها ]
http://www.wlayt91.com/dorh4/5.gif
الحين بعد ماحذفنا الآكواد ننسخ القالب template بـ الكامل ونحطه مكان اللي حذفناه [ الاكواد في اللي في الفرونت بيج ] ..
http://www.wlayt91.com/dorh4/7.gif
الحين اضغط على [ تصميم من القائمه تحت ] راح يطلع لك شكل القالب template ...!
شوف معاي ..!
http://www.wlayt91.com/dorh4/8.gif
طبعآ نحدد الصوره ونحذفها ... عشان مايكون في [ التصميم ] الا هذي الاكواد ..
كود code $spacer_open $_phpinclude_output
اللحين بعد ماحذفنا الصوره نحط الماوس مكان الصوره [ سابقاً ] ونضغط على [ صورة الجبل ] اللي فوق (( محدد في الصوره )) تابع ..!
http://www.wlayt91.com/dorh4/9.gif
الحين نختار صورة [ الهيدر header ] من المجلد الصور اللي قصصناه ..!
وهذا شكله بعد ماجبنا الصوره ...
http://www.wlayt91.com/dorh4/10.gif
...
الحين نضغط على [ تعليمات برمجية ] وننسخ الاكواد [ كامله ] ونرجعها لقالب template الهيدر header [ header ] ..
http://www.wlayt91.com/dorh4/11.gif
وهذا بعد مالصقناه في قالب template الـ header ...!
http://www.wlayt91.com/dorh4/12.gif
...
الحيــن إنتهينـــأ من الـهيدر - header ... باقي لنا الفوتر - Footer ...!
نسوي مثل بداية الشرح طريقة اللي فوق بس نغير الكلمه من [ header إلـــى Footer ]
http://www.wlayt91.com/dorh4/2.gif
http://www.wlayt91.com/dorh4/13.gif
الحين نضغط على القالب template المطلوب دبل كلك ...!
http://www.wlayt91.com/dorh4/14.gif
نضلل المربع كامل ونحطه في الفرونت بيج
http://www.wlayt91.com/dorh4/15.gif
ملآحظـــه : لآ تنســى قبل لا تحط القالب template في الفرونت بيج تحذف الاكواد الموجوده في الفرونت بيج ...[ خل تعليمات برمجية خاليه من الآكواد ] ..
الحين بعد ماحطينا القالب template في [ تعليمات برمجيه ] في الفرونت بيج نحط الماوس على المكان المحدد في الصوره ...!
ونضغط على الصوره اللي فوق [ محدده ] في الصوره ...!
http://www.wlayt91.com/dorh4/16.gif
راح يفتح لنا مربع ... نختار منه صورة الفوتر .....
http://www.wlayt91.com/dorh4/17.gif
وهذا بعد ما اخترنا صورة الفوتر ...!
http://www.wlayt91.com/dorh4/18.gif
نضغط على [ تعليمات برمجية ] وننسخ الكود code [ كاملاً ]
http://www.wlayt91.com/dorh4/19.gif
ونحطه في قالب template [ Footer - الفوتر ]
http://www.wlayt91.com/dorh4/20.gif
والحين نضغط على [ حفظ ] ....
الحين روح للصفحه الرائسية راح تلقى الهيدر header والفوتر موجوده .... http://www.wlayt91.com/vb/images/smilies/smile.gif
صوره لـ الصفحة الرائسية للمنتدى ...!
http://www.wlayt91.com/dorh4/21.gif
أنتهينــــأإ بـ فضل من الله .... http://www.wlayt91.com/vb/images/smilies/smile.gif
....
أي مشكلــه تواجهـــكم لآ تبخلون علينـــأ فيهآ .... http://www.wlayt91.com/vb/images/smilies/CAQBGDEB.png
دمتـــم بـ حفظ الرحمن
][!!!][5]دورة تصميم الأستايل styleات [ تأطير الـNavbar ][!!!][
اقتباس
السلام عليكم ورحمة الله وبركاته
اقتباس
كيفكم يا أعضاء ولايـ91ـة ...! http://www.wlayt91.com/vb/images/smilies/SnipeR%20(51).gif
...
إلمهـــم ...
درس مفصلنا اليوم هو [ تأطير الـNavbar ] ..
...
بسم الله نبداء .
..
أول شي ندخل على لوحة تحكم المنتدى forum .!
طبعـــاً اللي تابع أول درس مفصل اللي هو / تنصيب setup السيرفر SERVER الشخصي وتركيب install منتدى عليه يدخل على الرابط هذا ..
http://localhost/vb/admincp/index.php (http://localhost/vb/admincp/index.php)
واللي يبي يطبق على موقع على الانترنت يطبق مافيه مشكله [ بس مو تقولون ان برعص جبت فيكم العاطل لو تخربونه ]
...
نكممل : بعد مادخلنا على رابط لوحة تحكم الموقع نكتب الأسم والرقم السري ونضغط على [ تسجيل الدخول ] ..
http://www.wlayt91.com/dorh5/1.gif
بعدين نروح للقائمه اللي على اليمين ونختار مثل اللي في الصوره ...!
http://www.wlayt91.com/dorh5/2.gif
راح تطلع لنا صفحه على اليسار ... مايهمنا الا اول مربع مثل اللي في الصوره .!
http://www.wlayt91.com/dorh5/3.gif
الصوره مشروحه طبعآ .!
الحين راح تطلع لنا قائمه بعد ماكتبنا القالب template اللي نبيه [ نختار منها القالب template المطلوب ] ...
http://www.wlayt91.com/dorh5/4.gif
نضغــط على القالب template دبل كلك ... !
...
الحين جاء وقت الفرونت بيج ...!
نفتح البرنامج ونروح على [ تعليمات برمجية ] ... وراح نحصل الاكواد على طول نضلل الاكواد [ كامله ونحذفها ]
http://www.wlayt91.com/dorh5/5.gif
الحين بعد ماحذفنا الآكواد ننسخ أكواد القالب template حق الـnavbar اللي موجود في المرفقات ..بـ الكامل ونحطه مكان اللي حذفناه [ الاكواد في اللي في الفرونت بيج ] ..
http://www.wlayt91.com/dorh5/6.gif
الحين بعد ماحطينا الاكواد في [ تعليمات برمجية ] .. نضغط على [ تصميم ] ...
راح يطلع لنا الشكل ...
http://www.wlayt91.com/dorh5/7.gif
الصوره مشرووووحه ...!
الحين نطبق على كل الخلايا ...!
..
الحين
نضغط على الخليه اللي على الجنب ... ونضغط عليها [ كلك يمين ] ونختار [ خصائص الخليه ] ...
http://www.wlayt91.com/dorh5/8.gif
الصوره مشروحه ...!
تــأإبع ...
http://www.wlayt91.com/dorh5/9.gif
طبعآ الصوره مشروحه ...!
تـــأإبع ...!
http://www.wlayt91.com/dorh5/10.gif
الصوره الحين تطلعت لنا متمدده ولا فيها اي مشكله ...! http://www.wlayt91.com/vb/images/smilies/smile.gif
الحين عآد الله لآيهينكم طبقوها على الخليه الثانيه اللي على الجنب الثاني ..! http://www.wlayt91.com/vb/images/smilies/SnipeR%20(29).gif
بعد ماخلصنا منها
نضغط على [ تعليمات برمجيه ] ... وننسخ أكواد القالب template كامل ..
http://www.wlayt91.com/dorh5/11.gif
بعد مانسخناه .... نروح لـ لوحة تحكم المنتدى forum ... ونحط الكود code اللي نسخناه من الفرونت بيج في القالب template اللي اخذناه ...
[ يعني نرجعه مكانه في المنتدى forum اللي اخذناه منه ] ...http://www.wlayt91.com/vb/images/smilies/SnipeR%20(51).gif
http://www.wlayt91.com/dorh5/12.gif
الحين نضغط على [ حفظ ] ...
بعد ماضغطنا على حفظ <_ وش تبي تقول بعد خلاص انتهت السالفه ... http://www.wlayt91.com/vb/images/smilies/CAQBGDEB.png ...
المهم ..
الحين روح لـ واجهة interface المنتدى forum راح يطلع لك كذا ....!
http://www.wlayt91.com/dorh5/13.gif
ملآحظـــه :في المرفق حاط العرض حق الناف بار [ 707 ] على عرض الصورتين اللي فوق واللي تحت وعرضهم نفسه [ 707 ] ...
يعني لآزم يكون على حجم الصورتين [ اللي فوق واللي تحت ] ... مثال الصوره ..!
http://www.wlayt91.com/dorh5/14.gif
الزبــده : كل ما اختلف عرض الصورتين [ اللي فوق واللي تحت ] يختلف حرض الناف بار ... لآزم يكونون نفس العرض...
...
أنتهيــــنأ من درٍس إليـــــوٍم ..... http://www.wlayt91.com/vb/images/smilies/SnipeR%20(72).gif
...
أي مشكلــه تواجهـــكم لآ تبخلون علينـــأ فيهآ ....
دمتـــم بـ حفظ الرحمن
][!!!][6]دورة تصميم الأستايل styleات [ تأطير الـForumhome ][!!!][
اقتباس
السلام عليكم ورحمة الله وبركاته
اقتباس
كيفكم يا أعضاء ولايـ91ـة ...! http://wlayt91.com/vb/images/smilies/SnipeR%20(51).gif
...
إلمهـــم ...
درس مفصلنا اليوم هو [ تأطير الـForumhome ] ..
...
بسم الله نبداء .
..
أول شي ندخل على لوحة تحكم المنتدى forum .!
طبعـــاً اللي تابع أول درس مفصل اللي هو / تنصيب setup السيرفر SERVER الشخصي وتركيب install منتدى عليه يدخل على الرابط هذا ..
http://localhost/vb/admincp/index.php
واللي يبي يطبق على موقع على الانترنت يطبق مافيه مشكله [ بس مو تقولون ان برعص جبت فيكم العاطل لو تخربونه ]
...
نكممل : بعد مادخلنا على رابط لوحة تحكم الموقع نكتب الأسم والرقم السري ونضغط على [ تسجيل الدخول ] ..
http://www.wlayt91.com/dorh6/1.gif
بعدين نروح للقائمه اللي على اليمين ونختار مثل اللي في الصوره ...!
http://www.wlayt91.com/dorh6/2.gif
راح تطلع لنا صفحه على اليسار ... مايهمنا الا اول مربع مثل اللي في الصوره .!
http://www.wlayt91.com/dorh6/3.gif
الصوره مشروحه طبعآ .!
الحين راح تطلع لنا قائمه بعد ماكتبنا القالب template اللي نبيه [ نختار منها القالب template المطلوب ] ...
http://www.wlayt91.com/dorh6/4.gif
نضغــط على القالب template دبل كلك ... !
http://www.wlayt91.com/dorh6/5.gif
مثل مآهو موضح بالصوره ... [ ننسخ الآكواد كآمله ]
...
الحين جاء وقت الفرونت بيج ...!
نفتح البرنامج ونروح على [ تعليمات برمجية ] ... وراح نحصل الاكواد على طول نضلل الاكواد [ كامله ونحذفها ]
http://www.wlayt91.com/dorh6/6.gif
الحين بعد ماحطيتنا الكود code حق الـForumHome في الفرونت بيج .. نضغط على تصميم
وراح يطلع لنا مثل اللي تحت ...
http://www.wlayt91.com/dorh6/7.gif
اللي محدد هذا نخليه متوسط [ يعني في النص ] .. ونخلي عرضه [ 707 PX ] ... <_ فيه ملآحظه أخر الموضوع بخصوص هذي النقطة
المهم تابع ...
نضغط على كل مستطيل من اللي محدد ... [ يعني كل مستطيل لحاله ] ...
مثل اللي با الصوره ...
http://www.wlayt91.com/dorh6/8.gif
وراح يطلع لنا هذي الخيارات ...!
http://www.wlayt91.com/dorh6/9.gif
نسوي مثل الخيارات اللي فوق لكل المجلدات اللي محدد با الاحمر ... !
وهذي النتيجه بعد التصغير ...
http://www.wlayt91.com/dorh6/10.gif
الحين جت المهم السهله للي يفتح مخه بس <_ .. http://www.wlayt91.com/vb/images/smilies/smile.gif
http://www.wlayt91.com/dorh6/11.gif
أول شي نضغط اللي على اليمين [ اليد ] .. وبعدين نضيف الجداول
الصوره مشروحـــه ... http://www.wlayt91.com/vb/images/smilies/smile.gif
بعد الأضافه نعمل التالي ... http://www.wlayt91.com/vb/images/smilies/smile.gif
http://www.wlayt91.com/dorh6/12.gif
راح يطلع لنا هذا المستطيل... !
نعمل مثل اللي با الصوره ...!
http://www.wlayt91.com/dorh6/13.gif
الحين نحدد المجلد اللي في الصوره ... !
تآبع _>
http://www.wlayt91.com/dorh6/14.gif
ونحطه مكان [ الماوس ] اللي في نص الجدول ....!
تآبع _>
http://www.wlayt91.com/dorh6/15.gif
بعد ماسوينا المطلوب 100%
نضيف الصوره التجميليه ..
][][][ مثل مآسوينا في قالب template الـNavbaR في الدرس مفصل الـسادس....!
عشان يطلع لنا مثل هذا في الفرونت بيج ...!
http://www.wlayt91.com/dorh6/16.gif
...
الحين نطبق اللي سوينا في الجدول السابق على الجدول اللي باقي ....!
...
وراح يطلع لنا مثل هذا بـ الضبط ...!
http://www.wlayt91.com/dorh6/17.gif
الحين نروح على الفورنت من اليمين تحت على [ إنقسام ] ...
وننسخ الاكواد ...
تآبع _>
http://www.wlayt91.com/dorh6/18.gif
ننسخ الآكواد كآمله ...
ونحطها في القالب template اللي اخذناه منه ... http://www.wlayt91.com/vb/images/smilies/smile.gif
http://www.wlayt91.com/dorh6/19.gif
ونضغط حفظ ...!
...
وهذي هي النتيجه للي سويناه كله ... !
http://www.wlayt91.com/dorh6/20.gif
ملآحظـــه :في المرفق حاط العرض حق الـفوروم هوم [ 707 ] على عرض الصورتين اللي فوق واللي تحت وعرضهم نفسه [ 707 ] ...
يعني لآزم يكون على حجم الصورتين [ اللي فوق واللي تحت ] ... مثال الصوره ..!
http://www.wlayt91.com/dorh5/14.gif
الزبــده : كل ما اختلف عرض الصورتين [ اللي فوق واللي تحت ] يختلف حرض الفوروم هوم ... لآزم يكونون نفس العرض...
...
أنتهيــــنأ من درٍس إليـــــوٍم ..... http://wlayt91.com/vb/images/smilies/SnipeR%20(72).gif
أي مشكلــه تواجهـــكم لآ تبخلون علينـــأ فيهآ ....
...
أنتهينآ ... http://www.dzbatna.com/images/smilies/nosweat.gif
دمتم بـ حفظ الرحمن
http://www.dzbatna.com/images/smilies/blushing.gif
ملآحظة / Br3s = كلهم ضدي <_ وٍآحد ... http://www.dzbatna.com/images/smilies/cupidarrow.gif
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
السلام عليكم ورحمة الله وبركاته
...
اليوم حبيت انقل لكم دورة تصميم الأستايل styleات .... [ طبعآ انا اللي سويتها بس في منتدى ثاني ] ... http://www.dzbatna.com/images/smilies/cupidarrow.gif
نخليكم مع الشرح طريقة ... http://www.dzbatna.com/images/smilies/nosweat.gif
...
][!!!][1]دورة تصميم الأستايل styleات [ تصميم الهيدر header والفوتر][!!!][
اقتباس
السلام عليكم ورحمة الله وبركاته
كيف الحال ان شاء الله بالف خير http://www.wlayt91.com/vb/images/smilies/SnipeR%20(87).gif
...
اليوم درس مفصلنا هو عن [ تصميم هيدر و فوتر ] ...
...
بدون مقدمآت نبدآء ... http://www.wlayt91.com/vb/images/smilies/SnipeR%20(76).gif
....
اول شي : افتح برنامج الفوتوشوب _> اختار ملف file من الاعلى يسار _> اختار جديد new _> اضبط الإعدادات كما تلاحظ
http://www.wlayt91.com/dorh1/1.gif
...
تطلع لنا الصفحه ... ونرسم مربع بـآستخدام هذي الاداه ...
http://www.wlayt91.com/dorh1/2.gif
...
ونرسم مستطيل ... بالوان فاتحه .. طبعآ متقاربه لبعض ...
http://www.wlayt91.com/dorh1/3.gif
...
الحين نختار اداة الباث <_ والله مدري يسمونها كذا هههههأإي
شوفوا الصوره وبلآ طنازه ههه
http://www.wlayt91.com/dorh1/4.gif
اختار المحدد با الصوره اللي فوق ..
....
نروح للمستطيل ... ونحط ثلاث نقــط على اطراف التصميم بآداة الباث ... مثل ماهو موضح بالصوره اللي تحت ...
http://www.wlayt91.com/dorh1/5.gif
...
والحين نضغط على نقطه من النقط الموجوده راح يطلع لنا اطرافها ..
نرفع او ننزل اللي على الاطراف
وهذا مثال
http://www.wlayt91.com/dorh1/6.gif
الحين سو نفس الطريقه على النقط الثانيه بمايناسبك ...
والحين نضغط على الشكل الموضح ادناه < متعوب عليها .. http://www.wlayt91.com/vb/images/smilies/CAQBGDEB.png
http://www.wlayt91.com/dorh1/7.gif
...
سو مثل الصوره اللي تحت ...
http://www.wlayt91.com/dorh1/8.gif
.....
وسو نفس الصوره هذي ... طبعآ مع اختيار اول كلمه فوق في الصوره ..
http://www.wlayt91.com/dorh1/9.gif
....
الحين حنا انتهينا والحمد لله من تصميم الهيدر header .......
... الحين نكرر السالفه كلها على الهيدر header ... عشان يصير معانا كذا
http://www.wlayt91.com/dorh1/10.gif
....
وعاد انت وحركاتك ....
...
وهذا ناتج اللي عملناه ....
http://www.wlayt91.com/dorh1/11.gif
.....
....
Br3s
][!!!][2]دورة تصميم الأستايل styleات [ إطار الأقسام ][!!!][
اقتباس
السلام عليكم ورحمة الله وبركاته
اقتباس
كيف الحال ان شاء الله بألف خير ... !
المهم نخش بـ الموضوع على طول .... http://www.wlayt91.com/vb/images/smilies/SnipeR%20(87).gif
....
اليوم درس مفصلنا هو عمل إطار على الاقسام ...,
بسم الله الرحمن الرحيم ..,
...
اول شي نرسم مستطيل يكون في النص [ بين الهيدر header والفوتر ] باستخدام
http://www.wlayt91.com/dorh2/1.gif
وهذا هو المستطيل بعد ماعملناه
http://www.wlayt91.com/dorh2/2.gif
...
ونرسم مستطيل ثاني فوق المستطيل الاول
ونستخدم اداة الباث على المستطيل الثاني وهذي هي الاداه..
http://www.wlayt91.com/dorh1/4.gif
وهذي صوره بعد ما رسمنا مستطيل فوق الاول وحركناه بـ أداة الباث ..
http://www.wlayt91.com/dorh2/3.gif
.
الحين نرجع للمسطيل الاول ونعمل مثل الصوره التاليه..
http://www.wlayt91.com/dorh2/4.gif.
...
الحين اعمل الاعدادات نفسها لآحظ يا [ حلا الكون + الريان ] http://www.wlayt91.com/vb/images/smilies/SnipeR%20(87).gif
http://www.wlayt91.com/dorh2/5.gif.
تابع
http://www.wlayt91.com/dorh2/6.gif
نتــأإبع
http://www.wlayt91.com/dorh2/7.gif
ونكمممل المتابعه http://www.wlayt91.com/vb/images/smilies/SnipeR%20(65).gif
http://www.wlayt91.com/dorh2/8.gif
....
طبعاً الصور تشرح طريقة المطلوب .. http://www.wlayt91.com/vb/images/smilies/smile.gif
وهذي بعد زبطنا المستطيل الاول [ الخلفي ]
وهذي النتيجه
http://www.wlayt91.com/dorh2/9.gif
...
الحين نرسم متسطيل [ منحني الزوايا ] داخل المستطيل الثاني [ المستطيل الامامي ] ... وهذي الصوره تشرح طريقة
http://www.wlayt91.com/dorh2/10.gif
...
ونعمل عليها حركات طبعاً نسوي اول شي كذا
http://www.wlayt91.com/dorh2/11.gif
وبعدين نعمل عليها الاعدادات لآحظو في الاعدادات [ خصوصاً المحدد ]
http://www.wlayt91.com/dorh2/12.gif
...
نتــأإبع
http://www.wlayt91.com/dorh2/13.gif
ونكمممل المتابعه ... http://www.wlayt91.com/vb/images/smilies/SnipeR%20(87).gif
http://www.wlayt91.com/dorh2/14.gif
...
وهذي اخر شي ... http://www.wlayt91.com/vb/images/smilies/SnipeR%20(44).gif
http://www.wlayt91.com/dorh2/15.gif
...
وهذي نهاية اللي سويناه في الاعدادات
http://www.wlayt91.com/dorh2/16.gif
....
ملآحظــــه : مكتوبه في الصوره ... http://www.wlayt91.com/vb/images/smilies/CAQBGDEB.png
http://www.wlayt91.com/dorh2/17.gif
المستطيل اللي محدد بـ الاحمر لآ تكتبون فيه اي شي ... ولا تقربون حتى للحدود ... هذا هو اللي يعرض الاقسام ....
...
....
وهذا نهاية منظر التصميم ... http://www.wlayt91.com/vb/images/smilies/CAQBGDEB.png http://www.wlayt91.com/vb/images/smilies/SnipeR%20(87).gif
http://www.wlayt91.com/dorh2/18.gif
...
الله الله عاد بالتطبيق ... http://www.wlayt91.com/vb/images/smilies/smile.gif
لاحد يزود ولا احد يسوي حركات وزخارف <_ مايقصد [ أعفيني ] http://www.wlayt91.com/vb/images/smilies/CAQBGDEB.png
[ العذر والسموحه على هـ الدرس مفصل البسيط بس خليته في موضوع لحـاله لـ كثرة صور الشرح طريقة وعشان توصل لكم الفكره ]
Br3s
][!!!][3]دورة تصميم الأستايل styleات [ تقطيع الأستايل style ][!!!][
اقتباس
السلام عليكم ورحمة الله وبركاته
اقتباس
كيف الحال ان شاء الله بخير يا اعضا الولايـه ...
المهم ندخل با الموضوع على طول ..
...
درس مفصلنا اليوم هو تقطيع الاستايل style ..
بس قبل لا نبدا الدرس مفصل نبي نعدل على التصميم لان المفروض يكون في الدرس مفصل الاول بس نسيته
والعذر والسموحه ..
تابعوا معاي في الصور ...
http://www.wlayt91.com/dorh3/1.gif
http://www.wlayt91.com/dorh3/2.gif
طبعاً نسوي نفس مافي الشرح طريقة .. ومثل الكلام الموجود في الصور ..
وهذي النتيجة ..
http://www.wlayt91.com/dorh3/3.gif
...
الحين الحمد لله انتهينا من السالفه اللي اخطينا فيهــأإ ... http://www.wlayt91.com/vb/images/smilies/SnipeR%20(87).gif
نرجع لدرس مفصلنا اللي اليوم وهو تقطيع الاستايل style ...
ندخل با الموضوع على طول ..
...
اول شي نسخدم اداة التقطيع مثل اللي في الصوره
http://www.wlayt91.com/dorh3/4.gif
نضغط ونسحب للجهه الثانيه ...
وهذا هو المحدد بـ اللون الاحمر بعد التحديد للهيدر و الفوتر
مثل في الصوره ..
http://www.wlayt91.com/dorh3/5.gif
والحين جاء دور تقطيع إطار الاقسام
نضغط ونسحب ...
مثال في الصوره ..
http://www.wlayt91.com/dorh3/6.gif
ملآحــظـــة : أول شي نقــطع الهيــدر و الفوتــر .. وبعديــن إطار الاقســام ...
وهذي الصوره بعد تقطيع الهيدر header و الفوتر و إطار الاقسام .
http://www.wlayt91.com/dorh3/7.gif
...
الحين بعــد التقطيــع نروح للقائمة .. [ File .._> Save For Web.. ] مثــال بـ الصوره ..
http://www.wlayt91.com/dorh3/8.gif
بعد مانختار مثل الصوره اللي فوق ... تطلع لنا الصوره اللي تحت
انتبه للي محدد في الصوره .
http://www.wlayt91.com/dorh3/9.gif
...
الحين راح تطلع لنا الصوره التاليه تـــأإبـــع معـــأإي ...
http://www.wlayt91.com/dorh3/10.gif
نسوي مجلد جديد ونحط فيه الصور اللي قطعناها ...
وبــكذا نكون قطعنا الاستايل style تقطيع كــامـــل ..
..
][!!!][4]دورة تصميم الأستايل styleات [ تركيب install الهيدر header + الفوتر][!!!][
اقتباس
السلام عليكم ورحمة الله وبركاته
اقتباس
كيفكم أعضاء ولآيـ91ـة ... http://www.wlayt91.com/vb/images/smilies/SnipeR%20(69).gif
...
إلمهـــم ...
درس مفصلنا اليوم هو [ أضافة الهيدر header و الفوتر للمنتدى ] ..
...
بسم الله نبداء .
..
أول شي ندخل على لوحة تحكم المنتدى forum .!
طبعـــاً اللي تابع أول درس مفصل اللي هو / تنصيب setup السيرفر SERVER الشخصي وتركيب install منتدى عليه يدخل على الرابط هذا ..
http://localhost/vb/admincp/index.php (http://localhost/vb/admincp/index.php)
واللي يبي يطبق على موقع على الانترنت يطبق مافيه مشكله [ بس مو تقولون ان برعص جبت فيكم العاطل لو تخربونه ] http://www.wlayt91.com/vb/images/smilies/CAQBGDEB.png
...
نكممل : بعد مادخلنا على رابط لوحة تحكم الموقع نكتب الأسم والرقم السري ونضغط على [ تسجيل الدخول ] ..
http://www.wlayt91.com/dorh4/1.gif
بعدين نروح للقائمه اللي على اليمين ونختار مثل اللي في الصوره ...!
http://www.wlayt91.com/dorh4/2.gif
راح تطلع لنا صفحه على اليسار ... مايهمنا الا اول مربع مثل اللي في الصوره .!
http://www.wlayt91.com/dorh4/3.gif
الصوره مشروحه طبعآ .!
الحين راح تطلع لنا قائمه بعد ماكتبنا القالب template اللي نبيه [ نختار منها القالب template المطلوب ] ...
http://www.wlayt91.com/dorh4/4.gif
نضغــط على القالب template دبل كلك ... !
http://www.wlayt91.com/dorh4/6.gif
الصوره مشروحه ..! http://www.wlayt91.com/vb/images/smilies/SnipeR%20(3).gif
...
الحين جاء وقت الفرونت بيج ...!
نفتح البرنامج ونروح على [ تعليمات برمجية ] ... وراح نحصل الاكواد على طول نضلل الاكواد [ كامله ونحذفها ]
http://www.wlayt91.com/dorh4/5.gif
الحين بعد ماحذفنا الآكواد ننسخ القالب template بـ الكامل ونحطه مكان اللي حذفناه [ الاكواد في اللي في الفرونت بيج ] ..
http://www.wlayt91.com/dorh4/7.gif
الحين اضغط على [ تصميم من القائمه تحت ] راح يطلع لك شكل القالب template ...!
شوف معاي ..!
http://www.wlayt91.com/dorh4/8.gif
طبعآ نحدد الصوره ونحذفها ... عشان مايكون في [ التصميم ] الا هذي الاكواد ..
كود code $spacer_open $_phpinclude_output
اللحين بعد ماحذفنا الصوره نحط الماوس مكان الصوره [ سابقاً ] ونضغط على [ صورة الجبل ] اللي فوق (( محدد في الصوره )) تابع ..!
http://www.wlayt91.com/dorh4/9.gif
الحين نختار صورة [ الهيدر header ] من المجلد الصور اللي قصصناه ..!
وهذا شكله بعد ماجبنا الصوره ...
http://www.wlayt91.com/dorh4/10.gif
...
الحين نضغط على [ تعليمات برمجية ] وننسخ الاكواد [ كامله ] ونرجعها لقالب template الهيدر header [ header ] ..
http://www.wlayt91.com/dorh4/11.gif
وهذا بعد مالصقناه في قالب template الـ header ...!
http://www.wlayt91.com/dorh4/12.gif
...
الحيــن إنتهينـــأ من الـهيدر - header ... باقي لنا الفوتر - Footer ...!
نسوي مثل بداية الشرح طريقة اللي فوق بس نغير الكلمه من [ header إلـــى Footer ]
http://www.wlayt91.com/dorh4/2.gif
http://www.wlayt91.com/dorh4/13.gif
الحين نضغط على القالب template المطلوب دبل كلك ...!
http://www.wlayt91.com/dorh4/14.gif
نضلل المربع كامل ونحطه في الفرونت بيج
http://www.wlayt91.com/dorh4/15.gif
ملآحظـــه : لآ تنســى قبل لا تحط القالب template في الفرونت بيج تحذف الاكواد الموجوده في الفرونت بيج ...[ خل تعليمات برمجية خاليه من الآكواد ] ..
الحين بعد ماحطينا القالب template في [ تعليمات برمجيه ] في الفرونت بيج نحط الماوس على المكان المحدد في الصوره ...!
ونضغط على الصوره اللي فوق [ محدده ] في الصوره ...!
http://www.wlayt91.com/dorh4/16.gif
راح يفتح لنا مربع ... نختار منه صورة الفوتر .....
http://www.wlayt91.com/dorh4/17.gif
وهذا بعد ما اخترنا صورة الفوتر ...!
http://www.wlayt91.com/dorh4/18.gif
نضغط على [ تعليمات برمجية ] وننسخ الكود code [ كاملاً ]
http://www.wlayt91.com/dorh4/19.gif
ونحطه في قالب template [ Footer - الفوتر ]
http://www.wlayt91.com/dorh4/20.gif
والحين نضغط على [ حفظ ] ....
الحين روح للصفحه الرائسية راح تلقى الهيدر header والفوتر موجوده .... http://www.wlayt91.com/vb/images/smilies/smile.gif
صوره لـ الصفحة الرائسية للمنتدى ...!
http://www.wlayt91.com/dorh4/21.gif
أنتهينــــأإ بـ فضل من الله .... http://www.wlayt91.com/vb/images/smilies/smile.gif
....
أي مشكلــه تواجهـــكم لآ تبخلون علينـــأ فيهآ .... http://www.wlayt91.com/vb/images/smilies/CAQBGDEB.png
دمتـــم بـ حفظ الرحمن
][!!!][5]دورة تصميم الأستايل styleات [ تأطير الـNavbar ][!!!][
اقتباس
السلام عليكم ورحمة الله وبركاته
اقتباس
كيفكم يا أعضاء ولايـ91ـة ...! http://www.wlayt91.com/vb/images/smilies/SnipeR%20(51).gif
...
إلمهـــم ...
درس مفصلنا اليوم هو [ تأطير الـNavbar ] ..
...
بسم الله نبداء .
..
أول شي ندخل على لوحة تحكم المنتدى forum .!
طبعـــاً اللي تابع أول درس مفصل اللي هو / تنصيب setup السيرفر SERVER الشخصي وتركيب install منتدى عليه يدخل على الرابط هذا ..
http://localhost/vb/admincp/index.php (http://localhost/vb/admincp/index.php)
واللي يبي يطبق على موقع على الانترنت يطبق مافيه مشكله [ بس مو تقولون ان برعص جبت فيكم العاطل لو تخربونه ]
...
نكممل : بعد مادخلنا على رابط لوحة تحكم الموقع نكتب الأسم والرقم السري ونضغط على [ تسجيل الدخول ] ..
http://www.wlayt91.com/dorh5/1.gif
بعدين نروح للقائمه اللي على اليمين ونختار مثل اللي في الصوره ...!
http://www.wlayt91.com/dorh5/2.gif
راح تطلع لنا صفحه على اليسار ... مايهمنا الا اول مربع مثل اللي في الصوره .!
http://www.wlayt91.com/dorh5/3.gif
الصوره مشروحه طبعآ .!
الحين راح تطلع لنا قائمه بعد ماكتبنا القالب template اللي نبيه [ نختار منها القالب template المطلوب ] ...
http://www.wlayt91.com/dorh5/4.gif
نضغــط على القالب template دبل كلك ... !
...
الحين جاء وقت الفرونت بيج ...!
نفتح البرنامج ونروح على [ تعليمات برمجية ] ... وراح نحصل الاكواد على طول نضلل الاكواد [ كامله ونحذفها ]
http://www.wlayt91.com/dorh5/5.gif
الحين بعد ماحذفنا الآكواد ننسخ أكواد القالب template حق الـnavbar اللي موجود في المرفقات ..بـ الكامل ونحطه مكان اللي حذفناه [ الاكواد في اللي في الفرونت بيج ] ..
http://www.wlayt91.com/dorh5/6.gif
الحين بعد ماحطينا الاكواد في [ تعليمات برمجية ] .. نضغط على [ تصميم ] ...
راح يطلع لنا الشكل ...
http://www.wlayt91.com/dorh5/7.gif
الصوره مشرووووحه ...!
الحين نطبق على كل الخلايا ...!
..
الحين
نضغط على الخليه اللي على الجنب ... ونضغط عليها [ كلك يمين ] ونختار [ خصائص الخليه ] ...
http://www.wlayt91.com/dorh5/8.gif
الصوره مشروحه ...!
تــأإبع ...
http://www.wlayt91.com/dorh5/9.gif
طبعآ الصوره مشروحه ...!
تـــأإبع ...!
http://www.wlayt91.com/dorh5/10.gif
الصوره الحين تطلعت لنا متمدده ولا فيها اي مشكله ...! http://www.wlayt91.com/vb/images/smilies/smile.gif
الحين عآد الله لآيهينكم طبقوها على الخليه الثانيه اللي على الجنب الثاني ..! http://www.wlayt91.com/vb/images/smilies/SnipeR%20(29).gif
بعد ماخلصنا منها
نضغط على [ تعليمات برمجيه ] ... وننسخ أكواد القالب template كامل ..
http://www.wlayt91.com/dorh5/11.gif
بعد مانسخناه .... نروح لـ لوحة تحكم المنتدى forum ... ونحط الكود code اللي نسخناه من الفرونت بيج في القالب template اللي اخذناه ...
[ يعني نرجعه مكانه في المنتدى forum اللي اخذناه منه ] ...http://www.wlayt91.com/vb/images/smilies/SnipeR%20(51).gif
http://www.wlayt91.com/dorh5/12.gif
الحين نضغط على [ حفظ ] ...
بعد ماضغطنا على حفظ <_ وش تبي تقول بعد خلاص انتهت السالفه ... http://www.wlayt91.com/vb/images/smilies/CAQBGDEB.png ...
المهم ..
الحين روح لـ واجهة interface المنتدى forum راح يطلع لك كذا ....!
http://www.wlayt91.com/dorh5/13.gif
ملآحظـــه :في المرفق حاط العرض حق الناف بار [ 707 ] على عرض الصورتين اللي فوق واللي تحت وعرضهم نفسه [ 707 ] ...
يعني لآزم يكون على حجم الصورتين [ اللي فوق واللي تحت ] ... مثال الصوره ..!
http://www.wlayt91.com/dorh5/14.gif
الزبــده : كل ما اختلف عرض الصورتين [ اللي فوق واللي تحت ] يختلف حرض الناف بار ... لآزم يكونون نفس العرض...
...
أنتهيــــنأ من درٍس إليـــــوٍم ..... http://www.wlayt91.com/vb/images/smilies/SnipeR%20(72).gif
...
أي مشكلــه تواجهـــكم لآ تبخلون علينـــأ فيهآ ....
دمتـــم بـ حفظ الرحمن
][!!!][6]دورة تصميم الأستايل styleات [ تأطير الـForumhome ][!!!][
اقتباس
السلام عليكم ورحمة الله وبركاته
اقتباس
كيفكم يا أعضاء ولايـ91ـة ...! http://wlayt91.com/vb/images/smilies/SnipeR%20(51).gif
...
إلمهـــم ...
درس مفصلنا اليوم هو [ تأطير الـForumhome ] ..
...
بسم الله نبداء .
..
أول شي ندخل على لوحة تحكم المنتدى forum .!
طبعـــاً اللي تابع أول درس مفصل اللي هو / تنصيب setup السيرفر SERVER الشخصي وتركيب install منتدى عليه يدخل على الرابط هذا ..
http://localhost/vb/admincp/index.php
واللي يبي يطبق على موقع على الانترنت يطبق مافيه مشكله [ بس مو تقولون ان برعص جبت فيكم العاطل لو تخربونه ]
...
نكممل : بعد مادخلنا على رابط لوحة تحكم الموقع نكتب الأسم والرقم السري ونضغط على [ تسجيل الدخول ] ..
http://www.wlayt91.com/dorh6/1.gif
بعدين نروح للقائمه اللي على اليمين ونختار مثل اللي في الصوره ...!
http://www.wlayt91.com/dorh6/2.gif
راح تطلع لنا صفحه على اليسار ... مايهمنا الا اول مربع مثل اللي في الصوره .!
http://www.wlayt91.com/dorh6/3.gif
الصوره مشروحه طبعآ .!
الحين راح تطلع لنا قائمه بعد ماكتبنا القالب template اللي نبيه [ نختار منها القالب template المطلوب ] ...
http://www.wlayt91.com/dorh6/4.gif
نضغــط على القالب template دبل كلك ... !
http://www.wlayt91.com/dorh6/5.gif
مثل مآهو موضح بالصوره ... [ ننسخ الآكواد كآمله ]
...
الحين جاء وقت الفرونت بيج ...!
نفتح البرنامج ونروح على [ تعليمات برمجية ] ... وراح نحصل الاكواد على طول نضلل الاكواد [ كامله ونحذفها ]
http://www.wlayt91.com/dorh6/6.gif
الحين بعد ماحطيتنا الكود code حق الـForumHome في الفرونت بيج .. نضغط على تصميم
وراح يطلع لنا مثل اللي تحت ...
http://www.wlayt91.com/dorh6/7.gif
اللي محدد هذا نخليه متوسط [ يعني في النص ] .. ونخلي عرضه [ 707 PX ] ... <_ فيه ملآحظه أخر الموضوع بخصوص هذي النقطة
المهم تابع ...
نضغط على كل مستطيل من اللي محدد ... [ يعني كل مستطيل لحاله ] ...
مثل اللي با الصوره ...
http://www.wlayt91.com/dorh6/8.gif
وراح يطلع لنا هذي الخيارات ...!
http://www.wlayt91.com/dorh6/9.gif
نسوي مثل الخيارات اللي فوق لكل المجلدات اللي محدد با الاحمر ... !
وهذي النتيجه بعد التصغير ...
http://www.wlayt91.com/dorh6/10.gif
الحين جت المهم السهله للي يفتح مخه بس <_ .. http://www.wlayt91.com/vb/images/smilies/smile.gif
http://www.wlayt91.com/dorh6/11.gif
أول شي نضغط اللي على اليمين [ اليد ] .. وبعدين نضيف الجداول
الصوره مشروحـــه ... http://www.wlayt91.com/vb/images/smilies/smile.gif
بعد الأضافه نعمل التالي ... http://www.wlayt91.com/vb/images/smilies/smile.gif
http://www.wlayt91.com/dorh6/12.gif
راح يطلع لنا هذا المستطيل... !
نعمل مثل اللي با الصوره ...!
http://www.wlayt91.com/dorh6/13.gif
الحين نحدد المجلد اللي في الصوره ... !
تآبع _>
http://www.wlayt91.com/dorh6/14.gif
ونحطه مكان [ الماوس ] اللي في نص الجدول ....!
تآبع _>
http://www.wlayt91.com/dorh6/15.gif
بعد ماسوينا المطلوب 100%
نضيف الصوره التجميليه ..
][][][ مثل مآسوينا في قالب template الـNavbaR في الدرس مفصل الـسادس....!
عشان يطلع لنا مثل هذا في الفرونت بيج ...!
http://www.wlayt91.com/dorh6/16.gif
...
الحين نطبق اللي سوينا في الجدول السابق على الجدول اللي باقي ....!
...
وراح يطلع لنا مثل هذا بـ الضبط ...!
http://www.wlayt91.com/dorh6/17.gif
الحين نروح على الفورنت من اليمين تحت على [ إنقسام ] ...
وننسخ الاكواد ...
تآبع _>
http://www.wlayt91.com/dorh6/18.gif
ننسخ الآكواد كآمله ...
ونحطها في القالب template اللي اخذناه منه ... http://www.wlayt91.com/vb/images/smilies/smile.gif
http://www.wlayt91.com/dorh6/19.gif
ونضغط حفظ ...!
...
وهذي هي النتيجه للي سويناه كله ... !
http://www.wlayt91.com/dorh6/20.gif
ملآحظـــه :في المرفق حاط العرض حق الـفوروم هوم [ 707 ] على عرض الصورتين اللي فوق واللي تحت وعرضهم نفسه [ 707 ] ...
يعني لآزم يكون على حجم الصورتين [ اللي فوق واللي تحت ] ... مثال الصوره ..!
http://www.wlayt91.com/dorh5/14.gif
الزبــده : كل ما اختلف عرض الصورتين [ اللي فوق واللي تحت ] يختلف حرض الفوروم هوم ... لآزم يكونون نفس العرض...
...
أنتهيــــنأ من درٍس إليـــــوٍم ..... http://wlayt91.com/vb/images/smilies/SnipeR%20(72).gif
أي مشكلــه تواجهـــكم لآ تبخلون علينـــأ فيهآ ....
...
أنتهينآ ... http://www.dzbatna.com/images/smilies/nosweat.gif
دمتم بـ حفظ الرحمن
http://www.dzbatna.com/images/smilies/blushing.gif
ملآحظة / Br3s = كلهم ضدي <_ وٍآحد ... http://www.dzbatna.com/images/smilies/cupidarrow.gif
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
