][!!!][ط¯ظˆط±ط© طھطµظ…ظٹظ… ط§ظ„ط£ط³طھط§ظٹظ„ط§طھ ظپظٹ ظ…ظˆط¶ظˆط¹ ظˆط§ط*ط¯][!!!][



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


...


اليوم حبيت انقل لكم دورة تصميم الأستايل styleات .... [ طبعآ انا اللي سويتها بس في منتدى ثاني ] ...



نخليكم مع الشرح طريقة ...





...




][!!!][1]دورة تصميم الأستايل styleات [ تصميم الهيدر header والفوتر][!!!][


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

كيف الحال ان شاء الله بالف خير

...

اليوم درس مفصلنا هو عن [ تصميم هيدر و فوتر ] ...


...


بدون مقدمآت نبدآء ...


....



اول شي : افتح برنامج الفوتوشوب _> اختار ملف file من الاعلى يسار _> اختار جديد new _> اضبط الإعدادات كما تلاحظ






...


تطلع لنا الصفحه ... ونرسم مربع بـآستخدام هذي الاداه ...



...


ونرسم مستطيل ... بالوان فاتحه .. طبعآ متقاربه لبعض ...








...



الحين نختار اداة الباث <_ والله مدري يسمونها كذا هههههأإي


شوفوا الصوره وبلآ طنازه ههه



اختار المحدد با الصوره اللي فوق ..


....


نروح للمستطيل ... ونحط ثلاث نقــط على اطراف التصميم بآداة الباث ... مثل ماهو موضح بالصوره اللي تحت ...






...


والحين نضغط على نقطه من النقط الموجوده راح يطلع لنا اطرافها ..


نرفع او ننزل اللي على الاطراف

وهذا مثال




الحين سو نفس الطريقه على النقط الثانيه بمايناسبك ...



والحين نضغط على الشكل الموضح ادناه < متعوب عليها ..





...


سو مثل الصوره اللي تحت ...





.....


وسو نفس الصوره هذي ... طبعآ مع اختيار اول كلمه فوق في الصوره ..






....



الحين حنا انتهينا والحمد لله من تصميم الهيدر header .......



... الحين نكرر السالفه كلها على الهيدر header ... عشان يصير معانا كذا





....





وعاد انت وحركاتك ....






...



وهذا ناتج اللي عملناه ....










.....






....



Br3s


][!!!][2]دورة تصميم الأستايل styleات [ إطار الأقسام ][!!!][



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

اقتباس



كيف الحال ان شاء الله بألف خير ... !


المهم نخش بـ الموضوع على طول ....



....


اليوم درس مفصلنا هو عمل إطار على الاقسام ...,


بسم الله الرحمن الرحيم ..,


...


اول شي نرسم مستطيل يكون في النص [ بين الهيدر header والفوتر ] باستخدام



وهذا هو المستطيل بعد ماعملناه






...


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


ونستخدم اداة الباث على المستطيل الثاني وهذي هي الاداه..




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




.

الحين نرجع للمسطيل الاول ونعمل مثل الصوره التاليه..

.



...


الحين اعمل الاعدادات نفسها لآحظ يا [ حلا الكون + الريان ]

.


تابع



نتــأإبع




ونكمممل المتابعه





....

طبعاً الصور تشرح طريقة المطلوب ..


وهذي بعد زبطنا المستطيل الاول [ الخلفي ]

وهذي النتيجه




...


الحين نرسم متسطيل [ منحني الزوايا ] داخل المستطيل الثاني [ المستطيل الامامي ] ... وهذي الصوره تشرح طريقة





...


ونعمل عليها حركات طبعاً نسوي اول شي كذا



وبعدين نعمل عليها الاعدادات لآحظو في الاعدادات [ خصوصاً المحدد ]




...


نتــأإبع





ونكمممل المتابعه ...





...


وهذي اخر شي ...





...


وهذي نهاية اللي سويناه في الاعدادات





....




ملآحظــــه : مكتوبه في الصوره ...





المستطيل اللي محدد بـ الاحمر لآ تكتبون فيه اي شي ... ولا تقربون حتى للحدود ... هذا هو اللي يعرض الاقسام ....


...




....




وهذا نهاية منظر التصميم ...





...




الله الله عاد بالتطبيق ...


لاحد يزود ولا احد يسوي حركات وزخارف <_ مايقصد [ أعفيني ]








[ العذر والسموحه على هـ الدرس مفصل البسيط بس خليته في موضوع لحـاله لـ كثرة صور الشرح طريقة وعشان توصل لكم الفكره ]



Br3s








][!!!][3]دورة تصميم الأستايل styleات [ تقطيع الأستايل style ][!!!][


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

اقتباس


كيف الحال ان شاء الله بخير يا اعضا الولايـه ...



المهم ندخل با الموضوع على طول ..



...

درس مفصلنا اليوم هو تقطيع الاستايل style ..

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

والعذر والسموحه ..

تابعوا معاي في الصور ...






طبعاً نسوي نفس مافي الشرح طريقة .. ومثل الكلام الموجود في الصور ..

وهذي النتيجة ..



...





الحين الحمد لله انتهينا من السالفه اللي اخطينا فيهــأإ ...


نرجع لدرس مفصلنا اللي اليوم وهو تقطيع الاستايل style ...

ندخل با الموضوع على طول ..



...


اول شي نسخدم اداة التقطيع مثل اللي في الصوره



نضغط ونسحب للجهه الثانيه ...

وهذا هو المحدد بـ اللون الاحمر بعد التحديد للهيدر و الفوتر


مثل في الصوره ..





والحين جاء دور تقطيع إطار الاقسام

نضغط ونسحب ...

مثال في الصوره ..




ملآحــظـــة : أول شي نقــطع الهيــدر و الفوتــر .. وبعديــن إطار الاقســام ...



وهذي الصوره بعد تقطيع الهيدر header و الفوتر و إطار الاقسام .





...


الحين بعــد التقطيــع نروح للقائمة .. [ File .._> Save For Web.. ] مثــال بـ الصوره ..



بعد مانختار مثل الصوره اللي فوق ... تطلع لنا الصوره اللي تحت


انتبه للي محدد في الصوره .



...


الحين راح تطلع لنا الصوره التاليه تـــأإبـــع معـــأإي ...





نسوي مجلد جديد ونحط فيه الصور اللي قطعناها ...



وبــكذا نكون قطعنا الاستايل style تقطيع كــامـــل ..




..







][!!!][4]دورة تصميم الأستايل styleات [ تركيب install الهيدر header + الفوتر][!!!][


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

اقتباس




كيفكم أعضاء ولآيـ91ـة ...


...



إلمهـــم ...


درس مفصلنا اليوم هو [ أضافة الهيدر header و الفوتر للمنتدى ] ..



...


بسم الله نبداء .

..


أول شي ندخل على لوحة تحكم المنتدى forum .!


طبعـــاً اللي تابع أول درس مفصل اللي هو / تنصيب setup السيرفر SERVER الشخصي وتركيب install منتدى عليه يدخل على الرابط هذا ..





واللي يبي يطبق على موقع على الانترنت يطبق مافيه مشكله [ بس مو تقولون ان برعص جبت فيكم العاطل لو تخربونه ]


...

نكممل : بعد مادخلنا على رابط لوحة تحكم الموقع نكتب الأسم والرقم السري ونضغط على [ تسجيل الدخول ] ..




بعدين نروح للقائمه اللي على اليمين ونختار مثل اللي في الصوره ...!



راح تطلع لنا صفحه على اليسار ... مايهمنا الا اول مربع مثل اللي في الصوره .!



الصوره مشروحه طبعآ .!

الحين راح تطلع لنا قائمه بعد ماكتبنا القالب template اللي نبيه [ نختار منها القالب template المطلوب ] ...



نضغــط على القالب template دبل كلك ... !



الصوره مشروحه ..!
...


الحين جاء وقت الفرونت بيج ...!

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




الحين بعد ماحذفنا الآكواد ننسخ القالب template بـ الكامل ونحطه مكان اللي حذفناه [ الاكواد في اللي في الفرونت بيج ] ..


الحين اضغط على [ تصميم من القائمه تحت ] راح يطلع لك شكل القالب template ...!

شوف معاي ..!


طبعآ نحدد الصوره ونحذفها ... عشان مايكون في [ التصميم ] الا هذي الاكواد ..


كود code $spacer_open $_phpinclude_output

اللحين بعد ماحذفنا الصوره نحط الماوس مكان الصوره [ سابقاً ] ونضغط على [ صورة الجبل ] اللي فوق (( محدد في الصوره )) تابع ..!




الحين نختار صورة [ الهيدر header ] من المجلد الصور اللي قصصناه ..!

وهذا شكله بعد ماجبنا الصوره ...


...


الحين نضغط على [ تعليمات برمجية ] وننسخ الاكواد [ كامله ] ونرجعها لقالب template الهيدر header [ header ] ..



وهذا بعد مالصقناه في قالب template الـ header ...!







...



الحيــن إنتهينـــأ من الـهيدر - header ... باقي لنا الفوتر - Footer ...!


نسوي مثل بداية الشرح طريقة اللي فوق بس نغير الكلمه من [ header إلـــى Footer ]




الحين نضغط على القالب template المطلوب دبل كلك ...!



نضلل المربع كامل ونحطه في الفرونت بيج



ملآحظـــه : لآ تنســى قبل لا تحط القالب template في الفرونت بيج تحذف الاكواد الموجوده في الفرونت بيج ...[ خل تعليمات برمجية خاليه من الآكواد ] ..


الحين بعد ماحطينا القالب template في [ تعليمات برمجيه ] في الفرونت بيج نحط الماوس على المكان المحدد في الصوره ...!

ونضغط على الصوره اللي فوق [ محدده ] في الصوره ...!



راح يفتح لنا مربع ... نختار منه صورة الفوتر .....




وهذا بعد ما اخترنا صورة الفوتر ...!


نضغط على [ تعليمات برمجية ] وننسخ الكود code [ كاملاً ]



ونحطه في قالب template [ Footer - الفوتر ]




والحين نضغط على [ حفظ ] ....



الحين روح للصفحه الرائسية راح تلقى الهيدر header والفوتر موجوده ....


صوره لـ الصفحة الرائسية للمنتدى ...!








أنتهينــــأإ بـ فضل من الله ....


....


أي مشكلــه تواجهـــكم لآ تبخلون علينـــأ فيهآ ....

دمتـــم بـ حفظ الرحمن





][!!!][5]دورة تصميم الأستايل styleات [ تأطير الـNavbar ][!!!][


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

اقتباس


كيفكم يا أعضاء ولايـ91ـة ...!


...

إلمهـــم ...


درس مفصلنا اليوم هو [ تأطير الـNavbar ] ..



...


بسم الله نبداء .

..


أول شي ندخل على لوحة تحكم المنتدى forum .!


طبعـــاً اللي تابع أول درس مفصل اللي هو / تنصيب setup السيرفر SERVER الشخصي وتركيب install منتدى عليه يدخل على الرابط هذا ..





واللي يبي يطبق على موقع على الانترنت يطبق مافيه مشكله [ بس مو تقولون ان برعص جبت فيكم العاطل لو تخربونه ]


...

نكممل : بعد مادخلنا على رابط لوحة تحكم الموقع نكتب الأسم والرقم السري ونضغط على [ تسجيل الدخول ] ..




بعدين نروح للقائمه اللي على اليمين ونختار مثل اللي في الصوره ...!



راح تطلع لنا صفحه على اليسار ... مايهمنا الا اول مربع مثل اللي في الصوره .!



الصوره مشروحه طبعآ .!


الحين راح تطلع لنا قائمه بعد ماكتبنا القالب template اللي نبيه [ نختار منها القالب template المطلوب ] ...



نضغــط على القالب template دبل كلك ... !

...

الحين جاء وقت الفرونت بيج ...!

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




الحين بعد ماحذفنا الآكواد ننسخ أكواد القالب template حق الـnavbar اللي موجود في المرفقات ..بـ الكامل ونحطه مكان اللي حذفناه [ الاكواد في اللي في الفرونت بيج ] ..




الحين بعد ماحطينا الاكواد في [ تعليمات برمجية ] .. نضغط على [ تصميم ] ...

راح يطلع لنا الشكل ...



الصوره مشرووووحه ...!

الحين نطبق على كل الخلايا ...!

..

الحين

نضغط على الخليه اللي على الجنب ... ونضغط عليها [ كلك يمين ] ونختار [ خصائص الخليه ] ...




الصوره مشروحه ...!

تــأإبع ...



طبعآ الصوره مشروحه ...!


تـــأإبع ...!



الصوره الحين تطلعت لنا متمدده ولا فيها اي مشكله ...!

الحين عآد الله لآيهينكم طبقوها على الخليه الثانيه اللي على الجنب الثاني ..!


بعد ماخلصنا منها

نضغط على [ تعليمات برمجيه ] ... وننسخ أكواد القالب template كامل ..



بعد مانسخناه .... نروح لـ لوحة تحكم المنتدى forum ... ونحط الكود code اللي نسخناه من الفرونت بيج في القالب template اللي اخذناه ...


[ يعني نرجعه مكانه في المنتدى forum اللي اخذناه منه ] ...




الحين نضغط على [ حفظ ] ...


بعد ماضغطنا على حفظ <_ وش تبي تقول بعد خلاص انتهت السالفه ... ...

المهم ..


الحين روح لـ واجهة interface المنتدى forum راح يطلع لك كذا ....!




ملآحظـــه :في المرفق حاط العرض حق الناف بار [ 707 ] على عرض الصورتين اللي فوق واللي تحت وعرضهم نفسه [ 707 ] ...

يعني لآزم يكون على حجم الصورتين [ اللي فوق واللي تحت ] ... مثال الصوره ..!


الزبــده : كل ما اختلف عرض الصورتين [ اللي فوق واللي تحت ] يختلف حرض الناف بار ... لآزم يكونون نفس العرض...


...

أنتهيــــنأ من درٍس إليـــــوٍم .....


...

أي مشكلــه تواجهـــكم لآ تبخلون علينـــأ فيهآ ....


دمتـــم بـ حفظ الرحمن





][!!!][6]دورة تصميم الأستايل styleات [ تأطير الـForumhome ][!!!][


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

اقتباس



كيفكم يا أعضاء ولايـ91ـة ...!


...
إلمهـــم ...


درس مفصلنا اليوم هو [ تأطير الـForumhome ] ..



...


بسم الله نبداء .

..


أول شي ندخل على لوحة تحكم المنتدى forum .!


طبعـــاً اللي تابع أول درس مفصل اللي هو / تنصيب setup السيرفر SERVER الشخصي وتركيب install منتدى عليه يدخل على الرابط هذا ..





واللي يبي يطبق على موقع على الانترنت يطبق مافيه مشكله [ بس مو تقولون ان برعص جبت فيكم العاطل لو تخربونه ]


...

نكممل : بعد مادخلنا على رابط لوحة تحكم الموقع نكتب الأسم والرقم السري ونضغط على [ تسجيل الدخول ] ..




بعدين نروح للقائمه اللي على اليمين ونختار مثل اللي في الصوره ...!





راح تطلع لنا صفحه على اليسار ... مايهمنا الا اول مربع مثل اللي في الصوره .!




الصوره مشروحه طبعآ .!


الحين راح تطلع لنا قائمه بعد ماكتبنا القالب template اللي نبيه [ نختار منها القالب template المطلوب ] ...




نضغــط على القالب template دبل كلك ... !




مثل مآهو موضح بالصوره ... [ ننسخ الآكواد كآمله ]


...

الحين جاء وقت الفرونت بيج ...!

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



الحين بعد ماحطيتنا الكود code حق الـForumHome في الفرونت بيج .. نضغط على تصميم

وراح يطلع لنا مثل اللي تحت ...




اللي محدد هذا نخليه متوسط [ يعني في النص ] .. ونخلي عرضه [ 707 PX ] ... <_ فيه ملآحظه أخر الموضوع بخصوص هذي النقطة

المهم تابع ...

نضغط على كل مستطيل من اللي محدد ... [ يعني كل مستطيل لحاله ] ...


مثل اللي با الصوره ...


وراح يطلع لنا هذي الخيارات ...!




نسوي مثل الخيارات اللي فوق لكل المجلدات اللي محدد با الاحمر ... !


وهذي النتيجه بعد التصغير ...






الحين جت المهم السهله للي يفتح مخه بس <_ ..




أول شي نضغط اللي على اليمين [ اليد ] .. وبعدين نضيف الجداول


الصوره مشروحـــه ...


بعد الأضافه نعمل التالي ...




راح يطلع لنا هذا المستطيل... !


نعمل مثل اللي با الصوره ...!




الحين نحدد المجلد اللي في الصوره ... !


تآبع _>



ونحطه مكان [ الماوس ] اللي في نص الجدول ....!

تآبع _>



بعد ماسوينا المطلوب 100%

نضيف الصوره التجميليه ..


][][][ مثل مآسوينا في قالب template الـNavbaR في الدرس مفصل الـسادس....!


عشان يطلع لنا مثل هذا في الفرونت بيج ...!



...






الحين نطبق اللي سوينا في الجدول السابق على الجدول اللي باقي ....!


...


وراح يطلع لنا مثل هذا بـ الضبط ...!




الحين نروح على الفورنت من اليمين تحت على [ إنقسام ] ...


وننسخ الاكواد ...


تآبع _>






ننسخ الآكواد كآمله ...


ونحطها في القالب template اللي اخذناه منه ...






ونضغط حفظ ...!



...



وهذي هي النتيجه للي سويناه كله ... !











ملآحظـــه :في المرفق حاط العرض حق الـفوروم هوم [ 707 ] على عرض الصورتين اللي فوق واللي تحت وعرضهم نفسه [ 707 ] ...

يعني لآزم يكون على حجم الصورتين [ اللي فوق واللي تحت ] ... مثال الصوره ..!


الزبــده : كل ما اختلف عرض الصورتين [ اللي فوق واللي تحت ] يختلف حرض الفوروم هوم ... لآزم يكونون نفس العرض...


...

أنتهيــــنأ من درٍس إليـــــوٍم .....


أي مشكلــه تواجهـــكم لآ تبخلون علينـــأ فيهآ ....





...








أنتهينآ ...

دمتم بـ حفظ الرحمن




ملآحظة / Br3s = كلهم ضدي <_ وٍآحد ...








©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©