الدورة الاحترافية لتصميم الاستايلات

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

ـــــ ـــــ ـالـدرسـ ـالـثـانـيـ ـــــ ـــــ

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

الان نضيف بعض الفرش وعلى الاذواق .. انا سوف اضيفها في أماكن محدد تجعلني حر , اي بمعنى مفهوم لا تعيق التمدد ... تابـع بالصـور :-

ايضاً نضيف بعض الصور وندمجها , وتوجد دروس خاصة في المنتدى , لدمج الصور وتجميلها ... وايضاً اضافة عنوان الموقع و شعار الموقع .. تـابـع بالـصور :-

الان نضيف الروابط والايقونات الدخول للاقسام الرئيسية ... تـابع بالصـور :-

بعد ان حددنا المنطقة المعنية , نعمل تدوير للتحديد كاتالي :
Select > Modify > Smooth
ومن ثم نضع القيمة 10 فينتج لنا الشكل الاتي :-

ومن ثم نضيف لير جديد وبعدها ... تابـع بالصـور :-

الان نضيف للير بعض الجماليات , والتلوين ... تابـع بالصـور :-

الموضوع الأصلى من هنا: معهد استضافات http://www.com4host.com/vb/thread5553.html#post6837




بعد ان اكملنا الناتج ,, اصبح لدينا مكان لكي نضع في كلام الاقسام كما اعمل ... كالتاليـ :-

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

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

ـــــ ـــــ ـالـدرسـ ـالـثـالـثـ ـــــ ـــــ

بأسم الله نبدأ الدرس الثـالـث ,,
:: مقـدمة ::
درسنا اليوم يتكلم عن تقطيع الهيدر الذي صممناة ..
:: الشرح ::
هنالك عدة خطوات يجب ان نهتم بها قبل كل تقطيع ولأي تصميم , واهم هذه النقاط هي ما يلي بشرح مفصل ... قد يرى البعض ان التقطيع هو عملية لتجزأ الصورة لعدة اجزاء , واهم شي هو ان يرى ان هذا التقطيع تقطيع جميلاً او على شكل خاص يراة , ولكن هنالك خطأ مهم تركناة , هو اين نقاط التمدد بالتصميم ونقصد بنقاط التمدد المكان الذي يجعل التصميم قابل للفتح والتوسع شيئ فشيئ , حتى يكون اكثر مرونة , من خلال قياسات بعض الشاشات فقد يكون قياس شاشة 800*600 ويكون التصميم مصمماً على هذا القياس , او يكون قياس الشاشة 1024*768 , وهنا تبدأ الاخطاء فتكون الاخطاء بغير عد ويذهب كل تعبنا الذي تعبناه بلا فائدة , ومن بعدها تترك طرق التصميم وتشتد بك كل الحياة وترى امور اخرى صعبة , ولكن يجب ان نبقي امر في اذهاننا هو ان الصعوبة موجودة لكن لا وجود للمستحيل ! , والان لو اردنا تقطيعاً كاملاً , نفعل ما يلي , اولاً نقسم التصميم لثلاث اقسام , وهذه هي طريقة من عدة طرق ارها انا الافضل في تقطيع التصميم , والاقسام هي قسم وسط يحمل نسبة 98% من نسبة التمدد , ويبقى 2% تقسم على القسمان الاخران وهما القسم الجانبي الايسير والقسم الجانبي الايمن وكل منهما يحمل نسبة 1% من معدل التمدد , فيكون التصميم متمدد وبدون اي اخطـأ ...
نعود للشـرح ... الان نفتح عملنا وابدأ معي ... كما مبين بالصور التالـية :-
الان نختار اداة التقطيع كمـا موضـح بالصورة التـالية :-

والان نريد شيئ يمكننا من ان نعمل التقطيع متساوي , بالضغط على الزر التالي :-
Ctrl+ حرف ط
كمـا موضح بالصورة التالـية :-

والان نبدأ بالتقطيع , انا عملت التقطيع التالي , مثل ما موضح بالصورة التالـية :-
الموضوع الأصلى من هنا: معهد استضافات http://www.com4host.com/vb/thread5553.html#post6838

الان بعد ان انهينا التقطيع , نحفظ التقطيع على شكل صورة مقطعة ...
File > Save For Web...
او اضغط المفتاح التالـي
Alt+Shift+Ctrl+S
او تابع الشرح بالصورة :-

الان تابـع الشرح بالصورة :-

ثم حدد المكان الذي نحفظ فية ونحفظ الصور ... تابع بالصورة

الان الصور انحفظت لدينا داخل مجلد اسمة " images
كمـا موضح بالـصورة :-

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

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

ـــــ ـــــ ـالـدرسـ ـالـرابــعـ ــــ ـــــ

بأسم الله نبدأ الدرس الـرابـع ,,
:: مقـدمة ::
درسنا اليوم تركيب الصور المقطعة في برنامج اكسبرشين ويب ... بديل الفرونت بيج
:: الشرح ::
اكيد الكل من يقرأ الموضوع يرى اكسبرشين ويب وليس فرونت بيج , بصراحة اقول لكم حان وقت التغيير صح السهولة بالفرونت بيج لكن العمل الصحيح والمميز على الاكسبرشين ويب ... كيف؟ انا اوضح لكم كيف ... هو ان اكواد الفرونت بيج يملئها الاخطاء وانا اوضح لكم بطريقة وبالدليل عندما تعملون التصميم بالفرونت بيج تبدأ الاخطاء وهي اخطاء التمدد واخطاء التوافق مع المتصفحات البقية , وتبدأ المشاكل فنحن قلنا في درسنا السابق اننا سوف نضع ثلاث جداول اثنان للجانبين واحدى للوسط , اضافة من قسم الجانبين الى نقاط التمدد أي الصور المتمدد فعند وضعها لا تتوافق مع المتصفحات او مع متصفح معين تتوافق ومع الاخر لا تتوافق اذاً بدأت المشاكل , والمشاكل سببها اكواد الفرونت بيج فنصيحتنا هي التغيير ! للاحدث دائما ...
واليوم سوف الخص لكم شرح مفصل وكامل عن تركيب الصور المقطعة في الاكسبرشين ويب ... تابعوا معي
اول مانفعلة هو تحميل برنامج بديل الفرونت بيج , الاكسبرشين ويب ...
الموضوع الأصلى من هنا: معهد استضافات http://www.com4host.com/vb/thread5553.html#post6839
" Microsoft Expression Web "
Microsoft Expression Web 2007
سيريل او مفتاح البرنامج
DDWJC-VFGHJ-7GFK6-9QK3D-PFTHW
Expression Web تحميل
حجم البرنامج : 195 MB
تحميل البرنامج : اضغط هنا
بعدها ننصب البرنامج ... الان بعد التنصيب , نفتح البرنامج مباشرة ...
تضهر لنا الواجهه الاتية للبرنامج ...

الان تابعوا الشـرح بالتفصيـل بالصور :-






ثم ندخل ثلاث جداول داخل الجدول الذي ادخلناة كما موضح بالصورة :-

ثم نعدل الخيارات مثل ما عملنا بالجدول السابق ... كما موضح بالصورة :-

ثم نبدأ بأدخال الصور كما موضح من ايقونة ادخال صورة :-



الان نضع الصور كما وضحت وكل واحد نضع مكانها ان كانت في اليمين او اليسار او الوسط ,, ونضغط علامات المعاينة للتوسيط ولليسار ولليمين كما وضحت ...

الان ندخل صور التمدد ... كما موضح بالصور :-



الان بعد ان عملت للصورة الجانبية اعمل ايضاً لصورة الوسط والصورة الجانبية الاخرى نفس الذي عملنا بالخطوات السابقة ...
الان نعدل روابط الصورة , بحفظ العمل في المجلد الذي تكون فية الصور .. حتى عندما ننسخ الكود لاتضهر اي مشاكل ...
الان ننسخ الكود حتى ينتهي عملنا ببرنامج الاكسبرشين ويب ...
الان يجب ان نكون منصبين سيرفر شخصي حتى نستطيع العمل بسهولة .. وايضاً مركبين نسخة للمنتدى الفي بي .. انصح دائماً بأخر الاصدارات حتى تكون جميع التعديلات الجديدة لدينا ... وبدون اي مشاكل ,, ثم نفتح صفحة المنتدى الرئيسية وبعدها نتوجه ... لصفحة الادارة , ثم الى التحكم بالاستايلات ... تابع الشرح بالصــور :-



بعد ان اضفنا استايل جديد وتوجهنا الى قوالب شائعة نذهب للهيدر ونحدف كل مافية ما عدا
كود:
$spacer_open

$_phpinclude_output

$ad_dcidcidcidcilocation[ad_header_end]
اسفل الاكواد ... ثم اسفل الكود الموضح اعلاة الذي ابقينا علية نلصق الكود الذي نسخناة من تصميمنا ببرنامج الاكسبرشين ويب ...

ثم نحفظ العمل ونأخذ مجلد الصورة ونضعة داخل مجلد في بي " vb
مجلد المنتدى ... ثم نفتح الصفحة الرئيسية ونعاين الاستايل ...

الان انتهينا من درسنا .. بتركيب الصور التي جمعناها بالاكسبرشين ويب , والان سوف نكون بأمان لا اخطاء بالاكواد ولا اي شيئ اخر ... في الدرس القادم سوف نلون الاستايل ... انتضرونا بالدرس القادم ..

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

ـــــ ـــــ ـالـدرسـ ـالـخـامـسـ ــــ ـــــ

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

بعدها ندخل لصفحة رئيسي CSS
ثم نبدأ بالتلوين ... تابعوا الشرح بالصور :-

الموضوع الأصلى من هنا: معهد استضافات http://www.com4host.com/vb/thread5553.html#post6840
هذا هو احد اقسام الرئيسي CSS
الان تبدأ مرحلة تلوين الاستايل بالكامل , انا وضعت لكم مثلما وضعت الالوان , وضفتها على شكل صفحة... اضغـط هنا
الان درسنا تقريباً انتهى فما عليك الا وضع وتنقية الالوان مثلما وضعتها انا ... وبالتوفيق للجميع , ويمكن لكل احد ان يختار الوانة الخاصة بذوقة او بما يراة ...
درسنا المقبل سوف نضع صور وايقونات الموقع , وايضاً بعض الدروس المرفقة لتلوين الايقونات وتلوين الصور وتصميمها .. حسب كل شخص ... انتضرونا بالدرس القادم ..

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

ـــــ ـــــ ـالـدرسـ ـالـسادسـ ــــ ـــــ

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

بعد ذالك نفتح اللير , ثم نكمل كما بالصورة التالية :-

الموضوع الأصلى من هنا: معهد استضافات http://www.com4host.com/vb/thread5553.html#post6841
الان نضيف لير جديد ...

ثم تابع كما بالصورة :-

ثم نختار كما موضح بالصورة ليكتمل التلوين ...

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

اي خيارات جميع الاستايلات ...
اغلب مجلد الصور والايقونات المهمة والتي يرغبها الكثيريين حسباً لانها اكثر اهمية من غيرها , في شكل الاستايل ...
هي :
buttons , statusicon , misc
هذه المجلدات التي يتم التعديل عليها ,, حتى يكون الاستايل خفيف وسريع .. وهي اهم مميزات الاستايلات ,
الان نذهب الى :-
مسار مجلد الصور/Image Paths
كما بالصورة الاتية :-

ثم نعطي حفظ للاعدادات ...
ثم ننقل المجلدات الاتية الى مجلد صور الاستايل :-
buttons , statusicon , misc
ومن ثم يعمل الاستايل مع الصور وبتميز وجمال حسب تعديلك للصور والايقونات وكل شخـص ولة ذوقة الخاص ..
بأنتهاء الدرس السادس تنتهي الدورة الاحترافية لتصميم الاستايلات , بالنسبة لي انا علي اكس ويبقى القسم الخاص بتأطير القوالب من تنظيم الاخت ليلى الدرازي , فدعائي بالتوفيق للجميع مع الاستايلات , واذكر كل شخص قد يرى الدورة ويقرها ويستفاد منها ان يدعي لوالدي طول العمر والعيش بسلامة وايضاً الى اهلي العراقيين واخواني الفلسطينيين بالسكينة والامان وان يعود كل مغترب الى وطنة , فكل ما أقولة من اخر كلام لي , أن كل هذا العلم من فضل ربي فالحمد لله والشكر لله على هذا العلم وبالتوفيق لكل من يقرأ الدورة وان يشكرني وحتى لو كان شكرة من قلبة نسبة الى وقت الضيق وعدم الرد على المواضيع ..

ملاحظة :- دورتي انتهت الان سوف تبدأ دورة الاخت ليلى الدرازي ,, بخصوص تأطير القوالب .. فأدعي لها بالتوفيق ...

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

اليوم درسنا طبعا فيديو ..

وان شاء الله تكون سهلة عليكم

لأن فيها تقطيع و تحتاج دقة و ماتنشرح بمجرد صور
الموضوع الأصلى من هنا: معهد استضافات http://www.com4host.com/vb/thread5553.html#post6842

و الدروس الباقية انشاء الله بالفيديو ...

باسم الله

الدورة الاحترافية لتصميم الاستايلات - الدرس السابع - تصميم اطار الأقسام ..

التحميل من هنا

lesson1laila.swf - File Shared from Box.net - Free Online File Storage

تحياتي .

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

نعود من جديد إلى طرح دروس الدورة بعد أن لم أجد تفاعل مرضي ولا متابعة محفزة ..
الموضوع الأصلى من هنا: معهد استضافات http://www.com4host.com/vb/thread5553.html#post6843

ولكن بعد إلحاح من بعض الأخوة تبين لي ان هناك مجموعة من المتابعين .. و الحمدلله

تم اعداد الدرس الثامن وهو توزيع الإطار في ويب اكسبرشن

حمل الدرس من هنا

اتمنى اجد تفاعل أكبر ..

في دعة الله