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

الدرس الاول:- التصميم على الفيتشوب.

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات . إضغط هنا للتسجيل]

[center]دورة تصميم الاستايلات

الدرس الاول


توكلنا على الله ونبداء


افتح الفوتشوب.

File-now

ضع المقاسات الموضحة اعلاه.


ضع اداة الصبغ

ولون خلفية التصميم

بالون الي يناسبك وانا استخدمت اللون E9ABF2#

بعد صبغ الخلفية
ضع اداة المربع


ثم ضع مربع في اعلى التصميم

ضع لون اغمق من لون الخلفية الي وضعتها وانا استخدمت اللون AC43BC#

بعد وضع المربع الان نبي نعمل له حركة جمالية
يسمى المربع هذا (هيدر)

اوك

اختار هذه الاداة

+add anchor point tool

ثم ضع هذه الاداء على المربع الاعلى (هيدر)
ضع انقاط هكذا.
على الحدود 3×3

بعدها شد النقطه الاولى على اليمين لتحت

وشد النقطه الاولى على اليسار لتحت

وارفع النقاط الي جنب اليمين واليسار لفوق
يطلع لك الشكل هكذا او قريب منه

لحد الان الهيدر منتهي بنسبة 70 %

الان باقي علينا التأثيرات على الهيدر.

اذهب للير حق الهيدر
اضغط على زر الفاره اليمين
واختر

الان نعمل التاثيرات ركزوا معايه في هذي النقطه

اول شي اعمل هذا التاثير

وعمل التاثير الثاني

وعمل التاثير الثالث

والان نعمل اخر تاثير

طيب الان الحمد لله انتهينا من التأثيرات.

شوفوا الان نتيجة التاثيرات على الهيدر

الان اضافة الصور الجمالية على الهيدر


الطيب لي اضافة أي صورة جمالية

ابحث في المواقع الصور الي تناسبك.

اما الصور الي بنستعملها في الدرس

انشاء الله بارفقها لكم

الان لفتح أي صورة

File>open>
ثم افتح الصورة الي تبيها


بعد الفتح

اذهب للير

وافتحه

بضغط على القفل مرتين

ثم
Ok

ثم


انقل الصوره الى التصميم

بسحبها بالماوس


ثم ضعها على الهيدر



في المكان المناسب لصوره

الي تبيه


بس يكون الترتيب

في الير هكذا

اول شي

الهيدر
فوقه الصوره الي تبي تضيفها


ثم ادمجها ctrl+G

ثم

اضغط على الير حق الصورة واظغط

ثم

اختر هذه الاداة

ركز معي
ضعها على جانب الصورة

ثم
Ctrl+t
ومد لليمين


وهذه النتيجه

الان نضع الصورة اللي على اليمين .

هذي الصورة اللي نبي نحطها على اليمين لازم الان نمسح اطرافها زين بهذه الاداة

بعد التقطيع تكووون كذا لا تنسون تظغطون على اللير مرتين

بعدها اسحبها الى التصميم وجعلها فوق الصورة الاولى
ثم اضغط على ctrl+g لدمج الصورة مع الشكل
ولضبط حجم الصورة اضغط على ctrl+t
النتيجة

كذا خلاص خلصنا الهيدر باقي الفوتر
نروح للير حق شكل الهيدر الموضح

بعدين ضاعف اللير

ثم اسحبه للأعلى وانتقل الى

ثم اسحبه الى اسفل التصميم ويصبح الشكل .

بعدها نضيف الصور في اسفل الفوتر وانا اخترت هذه الصورة


ثم ضعها فوق لير الفوتر
وادمجها بالضغط على ctrl+g
وعشان تضبط الفوتر اضغط على ctrl+t
وبعد كذه نطابق لون الصورة بالتصميم

وبعد كذه نطابق لون الصورة بالتصميم

ثم نسوي زي الصورة الي فوق اقصد نفس الطريقة
ضعها على جانب الصورة

ثم
Ctrl+t
ومد لليمين

وبعدها احفظ العمل على هية psd
وبعد كذا يكون الشكل النهائي بهذا الشكل
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات . إضغط هنا للتسجيل]








تم الانتهاء من الدرس


انتضر تطبيقاتكم


وانتضروا الدرس الثاني


م ن

يسعدك ربي على الدرس الواضح..

مع أني درست تصميم مواقع..وصممت لي موقع

بس كان هالخطوات جديده عليّ..

تناحة الله يكفيكم شرها..

لاهنت خالد

ومنتظرين الدرس الثاني

♣ كثيراً مانظلم أناس في حياتنا..قد يكونون هم أسباب نبض قلوبنا ♣

درس وشرح وااااضح

يعطيك العافيه خالد

ان شاء الله بجرب واشوف

مشكور ع النقل

وفي انتظار باقي الدروس

يثبت الموضوع

المسلسل التركي نور جميع الحلقات ((تابعونا تحديث مستمر))
ـــــــــــــــــــــــــــــــــــــــــــــ




يارب ان أعطيتني نجاحا فلا تأخذ مني تواضعي

وان أعطيتني تواضعًا فلا تأخذ إعتزازي بكرامتي

وان أسأت إلى الناس فامنحني شجاعة الإعتذار

وان أساء الناس إلي فامنحني شجاعة العفو

تابع





ن افتح التصميم على صيغة psd عشان نكمل بقية التصميم عشان يكون احترافي بمعنى الكلمة .



اضف دائرة في وسط التصميم بهذه الاداة .
إضغط هنا للتسجيل][/IMG]
واضف التأثيرات التالية


ثم

ثم

ثم


ويصبح بهذا الشكل ...

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات . إضغط هنا للتسجيل]

ثم اضف هذه الصورة
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات . إضغط هنا للتسجيل]
وضعها بهذا الترتيب
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات . إضغط هنا للتسجيل]
ثم ضعها على الشكل واضغط على ctrl+g
ثم اعمل

ثم سوي مضاعفة

ليصبح كذا
إضغط هنا للتسجيل][/IMG]
ثم روح للشكل الدائرة ...
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات . إضغط هنا للتسجيل]
ثم سوي مضاعفة للدائرة

ونزله اسفل الفوتر
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات . إضغط هنا للتسجيل]
واضف هذه الصورة على لير الدائرة واضغط على
Ctrl+g
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات . إضغط هنا للتسجيل]
وسوي

ثم سوي مضاعفة الصورة ..

يصبح الشكل
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات . إضغط هنا للتسجيل]
ثم ارسم مربع ..

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات . إضغط هنا للتسجيل]
ثم سوي نفس التأثيرات اللي فوق
ثم سوي زي اللي في الصورة
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات . إضغط هنا للتسجيل]
يظهر على المربع نقاط
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات . إضغط هنا للتسجيل]


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

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات . إضغط هنا للتسجيل]
ثم اسحبها بهذه الاداة الى جنب الدائرة

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات . إضغط هنا للتسجيل]

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات . إضغط هنا للتسجيل]
ثم سوي للشكل مضاعفة

ثم سويلها كذا
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات . إضغط هنا للتسجيل]
يصبح كذا
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات . إضغط هنا للتسجيل]

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



ثم كرر المربعين الي وضعناهم في الهيدر

هكذا

اوك

بعدها ضع

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات . إضغط هنا للتسجيل]
طيب بعدها نزلها الي الفوتر

تطلع هكذا
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات . إضغط هنا للتسجيل]

وبهذا نكون انتهينا من (الفوتر)


:icon30:[/b][/center]

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

بسيط ماياخذ 5دقائق

التقطيع في هذا الجزء بسيط جدا واسهل تقطيع في العالم

تابع معي الصورة التالية (التقطيع عبارة عن صورة واحدة في الهدر + صورة في الفوتر كما
ترى هنا
7
7
التقطيع في هذا الجزء بسيط جدا واسهل تقطيع في العالم

تابع معي الصورة التالية (التقطيع عبارة عن صورة واحدة في الهدر + صورة في الفوتر كما
في الصورة .
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات . إضغط هنا للتسجيل]

ثم


بعد ذلك من قائمة

File <<<< save For the web

ثم موافق


اشرايكم اسهل درس

انتضروا الدروس القادمة

تحياتي...

والان الدرس الرابع

بسم الله نبداء
ناتي الان الى كيفية التوزيع بالفرونت بيدج

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

اذهب الى التصميم ثم كليك يميين خصائص الصفحة

[color=black][font=Arial]اجعل اتجاه الصفحة من اليميين الى اليسار ثم موافق[color=black][font=Arial]

قم بإدراج جدول 2*1

كما موضح بالصورة



كليك يميين على الجدول ثم خصائص الجدول

قم بتطبيق التالي


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

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

طبق التالي

بعد ذلك اضغط على اخر خلية وقم بإدراج صورة الفوتر مثل مافعلنا في الهدر

وبكذا انتهى التوزيع والحمد لله

والان الدرس الخامس بين ايديكم

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

ارفعها على موقعك عن طريق اي برنامج ftp

ثم
اذهب الى لوحة تحكم منتداك

ثم افتح توزيعك الي على الفرونت بيج

ثم ضع الماوس هنا
[/center]


اللحين بتشوفون الجدول منقسم نصين وانا قسمته بلونين
اللون العلوي نص الخلايا واللون السفلي نص الخلايا السفليه
طيب التقسيم من وين تم ؟
تم من بعد كلمة center وهذا مربط الفرس

تعالوا نشوف وش المقصود من التقسيم باللونين
قلنا نصف علوي ماقبل كلمة <p align="center"> ونصف سفلي مابعد كلمة <p align="center">

اللي قبل يوضع في تمبلت الـ header
اللي بعد يوضع في تمبلت الـ footer

كيف يتم وضعها؟!
الطريقه السليمه والصحيحه هي:
نقوم بالتوجه الى لوحة تحكم المنتدى ومن اليمين نشوف مثل هالصوره

نضغط على كلمة Style Manager
ثم ارجع الى الاخر وضع اضافة ستايل جديد

واكتب الاسم ثم

اذهب الا تمبلت الهيدر

وانسخ الكود العلوي الهيدر

ونحطه قبل جملة
$spacer_open

$_phpinclude_output


ثم حفظ


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

وهذا الدرس السادس انشاء الله وهو الدرس الاخير في الدوره

تلوين CSS

اولا مفهوم CSS

او التعرف

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

نتعرف على الاشياء المهمه
في CSS

طبعاا

ادخل لوحة التحكم

افتح اعدادات الاستايل الي ركبناه

ضع :- اعدادات الاستايل CSS

ثم تطلع لك قائمه كبيره

نبداء بعمل خلفية للمنتدى
""ملاحضة باجمع الدرس من الدروس الموجوده بقسم[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات . إضغط هنا للتسجيل]

الان نبداء

(1)

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

×
×

تضع هذا الكود ...
#F4FCFE; background-image: url("images/back.jpg")

×
×

في Extra CSS Attributes
كما في الصوره المرفقه
طبعا مع تغير مسار الصوره على حسب المسار عندك واللون على حسب استايلك
وهي طريقه سهله عموما وتمنياتي لكم بالتوفيق
دعواتكم


اذا كنت تريد لون
ضع في مربع الخلفية كود الون الي يناسبك

(2)[/center]
بسم الله الرحمن الرحيم
كما تعودنا نمسك اعدادات المنتدى وحده وحده حتى ننتهي باذن الله منها
وصلنا اليوم الى Page Background = الجرم الداخلي للمنتدى


[center]هنا سنلاحظ التغير


(3)

السلام عليكم ورحمة الله
لوضع خلفيه للأقسام .. للفائده والتوضيح ...

نضع هذا الكود
#FBF5FF url(images/back.jpg) repeat-x top left

×
×

في ... First Alternating Color
او
في ... Second Alternating Color

×
×

او اذا حبيتوا تنسقون وتحطون لكل خيار خلفيه
طبعا مع تغير المسار على حسب المسار عندكم واللون بعد ,,
يمكن اضافة الخلفيه بنفس الكود لتصنيف السكربتات والـ Table Header
وكله طبعا يرجع للذوق وحسن التنسيق
دعواتكم
وبالتوفيق للجميع



هنا يتم التغير







تم الانتهاء من الدورة كامله

ماشاء الله

متابعه رائعه

مشكور خالد

يعطيك العافيه

المسلسل التركي نور جميع الحلقات ((تابعونا تحديث مستمر))
ـــــــــــــــــــــــــــــــــــــــــــــ




يارب ان أعطيتني نجاحا فلا تأخذ مني تواضعي

وان أعطيتني تواضعًا فلا تأخذ إعتزازي بكرامتي

وان أسأت إلى الناس فامنحني شجاعة الإعتذار

وان أساء الناس إلي فامنحني شجاعة العفو