PDA المساعد الشخصي الرقمي

عرض كامل الموضوع : [ web designing ] وَرشةُ تَصَمِيمُ المَواقِع || مشروع سلسلة تعليم



Senya Phoenixia
26-02-2011, 12:54
بــسم الله الرحمّن الرحَيـــم


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


http://www.mexat.com/vb/attachment.php?attachmentid=1405889&stc=1&d=1298724455



هذا الموضوع تابع لسلسلة تعليم
لمشاهدة الموضوع الاصلي للمشروع اضغط هنــآ (http://www.mexat.com/vb/showthread.php/866505-%D9%85%D8%B4%D8%B1%D9%88%D8%B9-%D8%B3%D9%84%D8%B3%D9%84%D8%A9-%D8%AA%D8%B9%D9%84%D9%8A%D9%85-..-%D9%84%D9%86%D8%A8%D8%AF%D8%A3-%D8%A7%D9%84%D8%AE%D8%B7%D9%88%D8%A9-%D8%A7%D9%84%D8%A3%D9%88%D9%84%D9%89)



http://img151.imageshack.us/img151/7540/11106490.png


بالطبع هذه الورشة هي لتعليم طريقة تصميم مواقع الويب ، قوالب المواقع الشخصية ، و ايضاً نقوم بتعليم طرق تصميم البنرات و الشعارات و الازرار و غيرها من الاشياء التي تنتمي إلى تصميم مواقع الويب و كل مايخصها


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



ادوبي فوتوشوب ( للتحميل (http://www.mexat.com/vb/showthread.php/814691-Adobe-Photoshop-CS5-ME-crack-Download) )

ادوبي دريم ويفر أو فرونت بيج ( للتحميل (http://www.mexat.com/vb/showthread.php?883659) )

برنامج الايميج ردي ( لمستخدمي فوتوشوب 8 و اقل )

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


و سنقوم ايضاً بطرح الاخبار الجديدة و التطويرات في طرق تصميم الويب ، و ايضاً طرق تصميم صفحة ويب سريعة و خفيفة و سلسة قدر الإمكان ..


http://img151.imageshack.us/img151/7540/11106490.png


المدرسين :


N E T (http://www.mexat.com/vb/member.php?363718-N-E-T)
Z-ONE (http://www.mexat.com/vb/member.php?515957-Z-ONE)
~Hatshy (http://www.mexat.com/vb/member.php?653332-hatshy)


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


و ايضاً سيتم اعطاء نقاط تقييم لكل طالب مجتهد و هي بعدد
[ +5http://www.mexat.com/vb/attachment.php?attachmentid=1330914&stc=1&d=1293485606]


تفيدك هذه النقاط في التقييم السنوي لقسم التصميم ، و حصولك على وسام نجم التصميم

و الله ولي التوفيق ::جيد::

Senya Phoenixia
26-02-2011, 13:00
دليل الدروس

وسوم Heading (http://www.mexat.com/vb/threads/883124-web-designing-%E2%80%A2-%D9%88%D9%8E%D8%B1%D8%B4%D8%A9%D9%8F-%D8%AA%D9%8E%D8%B5%D9%8E%D9%85%D9%90%D9%8A%D9%85%D 9%8F-%D8%A7%D9%84%D9%85%D9%8E%D9%88%D8%A7%D9%82%D9%90%D 8%B9-%D9%85%D8%B4%D8%B1%D9%88%D8%B9-%D8%B3%D9%84%D8%B3%D9%84%D8%A9-%D8%AA%D8%B9%D9%84%D9%8A%D9%85-%E2%80%A2?p=26801025&viewfull=1#post26801025)
وسوم تنسيق النصوص (http://www.mexat.com/vb/threads/883124-web-designing-%E2%80%A2-%D9%88%D9%8E%D8%B1%D8%B4%D8%A9%D9%8F-%D8%AA%D9%8E%D8%B5%D9%8E%D9%85%D9%90%D9%8A%D9%85%D 9%8F-%D8%A7%D9%84%D9%85%D9%8E%D9%88%D8%A7%D9%82%D9%90%D 8%B9-%D9%85%D8%B4%D8%B1%D9%88%D8%B9-%D8%B3%D9%84%D8%B3%D9%84%D8%A9-%D8%AA%D8%B9%D9%84%D9%8A%D9%85-%E2%80%A2?p=26701338&viewfull=1#post26701338)
وسم التصريح (http://www.mexat.com/vb/threads/883124-web-designing-%E2%80%A2-%D9%88%D9%8E%D8%B1%D8%B4%D8%A9%D9%8F-%D8%AA%D9%8E%D8%B5%D9%8E%D9%85%D9%90%D9%8A%D9%85%D 9%8F-%D8%A7%D9%84%D9%85%D9%8E%D9%88%D8%A7%D9%82%D9%90%D 8%B9-%D9%85%D8%B4%D8%B1%D9%88%D8%B9-%D8%B3%D9%84%D8%B3%D9%84%D8%A9-%D8%AA%D8%B9%D9%84%D9%8A%D9%85-%E2%80%A2?p=26587297&viewfull=1#post26587297)
أنواع المعايير (http://www.mexat.com/vb/threads/883124-web-designing-%E2%80%A2-%D9%88%D9%8E%D8%B1%D8%B4%D8%A9%D9%8F-%D8%AA%D9%8E%D8%B5%D9%8E%D9%85%D9%90%D9%8A%D9%85%D 9%8F-%D8%A7%D9%84%D9%85%D9%8E%D9%88%D8%A7%D9%82%D9%90%D 8%B9-%D9%85%D8%B4%D8%B1%D9%88%D8%B9-%D8%B3%D9%84%D8%B3%D9%84%D8%A9-%D8%AA%D8%B9%D9%84%D9%8A%D9%85-%E2%80%A2?p=26588074&viewfull=1#post26588074)
وسوم Meta (http://www.mexat.com/vb/threads/883124-web-designing-%E2%80%A2-%D9%88%D9%8E%D8%B1%D8%B4%D8%A9%D9%8F-%D8%AA%D9%8E%D8%B5%D9%8E%D9%85%D9%90%D9%8A%D9%85%D 9%8F-%D8%A7%D9%84%D9%85%D9%8E%D9%88%D8%A7%D9%82%D9%90%D 8%B9-%D9%85%D8%B4%D8%B1%D9%88%D8%B9-%D8%B3%D9%84%D8%B3%D9%84%D8%A9-%D8%AA%D8%B9%D9%84%D9%8A%D9%85-%E2%80%A2?p=26617023&viewfull=1#post26617023)
وسم الإرتباط (http://www.mexat.com/vb/threads/883124-web-designing-%E2%80%A2-%D9%88%D9%8E%D8%B1%D8%B4%D8%A9%D9%8F-%D8%AA%D9%8E%D8%B5%D9%8E%D9%85%D9%90%D9%8A%D9%85%D 9%8F-%D8%A7%D9%84%D9%85%D9%8E%D9%88%D8%A7%D9%82%D9%90%D 8%B9-%D9%85%D8%B4%D8%B1%D9%88%D8%B9-%D8%B3%D9%84%D8%B3%D9%84%D8%A9-%D8%AA%D8%B9%D9%84%D9%8A%D9%85-%E2%80%A2?p=26671330&viewfull=1#post26671330)
بناء صفحات الويب (http://www.mexat.com/vb/threads/883124-web-designing-%E2%80%A2-%D9%88%D9%8E%D8%B1%D8%B4%D8%A9%D9%8F-%D8%AA%D9%8E%D8%B5%D9%8E%D9%85%D9%90%D9%8A%D9%85%D 9%8F-%D8%A7%D9%84%D9%85%D9%8E%D9%88%D8%A7%D9%82%D9%90%D 8%B9-%D9%85%D8%B4%D8%B1%D9%88%D8%B9-%D8%B3%D9%84%D8%B3%D9%84%D8%A9-%D8%AA%D8%B9%D9%84%D9%8A%D9%85-%E2%80%A2?p=26527285&viewfull=1#post26527285)
تغيير الخلفية عن طريق bgcolor (http://www.mexat.com/vb/threads/883124-web-designing-%E2%80%A2-%D9%88%D9%8E%D8%B1%D8%B4%D8%A9%D9%8F-%D8%AA%D9%8E%D8%B5%D9%8E%D9%85%D9%90%D9%8A%D9%85%D 9%8F-%D8%A7%D9%84%D9%85%D9%8E%D9%88%D8%A7%D9%82%D9%90%D 8%B9-%D9%85%D8%B4%D8%B1%D9%88%D8%B9-%D8%B3%D9%84%D8%B3%D9%84%D8%A9-%D8%AA%D8%B9%D9%84%D9%8A%D9%85-%E2%80%A2?p=26493366&viewfull=1#post26493366)

L E A Đ E R
26-02-2011, 13:06
السلام عليكم و رحمه الله و بركاته

رائع يا نيت
تصاميم الويب من افضل انواع التصاميم بالنسبة لي
لي خبرة بسيطة جدا في هذا المجال و لكن كلي شوق في تعلم برنامج الدريم ويفر و ما ابلغتني عنه سابقا و عن جودة العمل خلاله

متابع دائم بإذن الله لهذا الموضوع و في انتظار توافد عشاق هذا المجال من الأعضاء

S E N I O R
26-02-2011, 13:07
::سعادة::
اخيراً ساتعلم تصميم المواقع :سعادة2:
ساذهب للتسجيل كطالب فوراً :رامبو:

جزاك الله كل خير على مجهوداتك اخي نيت وشكراً مقدماً للاخ z-one كونه مدرس في الورشة :)
ان شاء الله اكون من الطلاب المجتهدين ::جيد::

بالتوفيق ودمتم في حفظ المولى عز وجل

بورون
26-02-2011, 13:07
السلام عليكم ورحمة الله وبركاته
بصفتي مدرساً، سأقوم بطرح بعض الأسئلة لطلابي الأعزاء حتى نحدد مستوياتهم..
لم أختر أسئلة متقدمة، وإنما اكتفيت بالأساسيات التي يجب عليك الإحاطة بها.



1 - أي نوع من الستايلات / القوالب هو الأفضل، المتمدد (Liquid)، أم الثابت (Fixed) ؟.

2 - على أي أساس يتم تصميم شعار الموقع ؟

3 - إذا كثرت الصور في الصفحة، هل يؤثر ذلك على خفة التصميم ؟ وكيف نتفاداها ؟

4 - حتى يكون التصميم احترافياً، أيجب علينا استخدام Photoshop ؟

5 - كيف تجعل تصميمك يدل على محتوى موقعك ؟

٦ - هل من الجيد الاعتماد بشكل كلي على يرنامج مثل DreamWeaver, Microsoft Expression Web ؟

S E N I O R
26-02-2011, 13:13
السلام عليكم ورحمة الله وبركاته
بصفتي مدرساً، سأقوم بطرح بعض الأسئلة لطلابي الأعزاء حتى نحدد مستوياتهم..
لم أختر أسئلة متقدمة، وإنما اكتفيت بالأساسيات التي يجب عليك الإحاطة بها.



1 - أي نوع من الستايلات / القوالب هو الأفضل، المتمدد (Liquid)، أم الثابت (Fixed) ؟.

2 - على أي أساس يتم تصميم شعار الموقع ؟

3 - إذا كثرت الصور في الصفحة، هل يؤثر ذلك على خفة التصميم ؟ وكيف نتفاداها ؟

4 - حتى يكون التصميم احترافياً، أيجب علينا استخدام Photoshop ؟

5 - كيف تجعل تصميمك يدل على محتوى موقعك ؟


:بكاء: ..مع الاسف ليس لدي اي خبرة في هذا المجال لذلك لا اعرف جواب الاسئلة الاربعة الاولى :ميت:
ولكن ان شاء الله نتعلم هذه الامور كلها من هذه الورشة :سعادة2:
اما السؤال الخامس :
يعتمد هذا على محتوى الموقع .. فمثلاً ان كان الموقع عن البرامج .. يمكن استخدام شعار احدى البرامج في التصميم او ان يكون تصميم يعبر عن البرامج بصورة عامة عن طريق اللون ,, استخدام باترن مناسبة احياناً ,, كما يمكن عمل شعار خاص بي اجعل شكله يدل على ان له علاقة بالبرمجة

عذراً على عدم الاجابة على الاسئلة الاربعة الاولى :o

L E A Đ E R
26-02-2011, 13:18
السلام عليكم ورحمة الله وبركاته
بصفتي مدرساً، سأقوم بطرح بعض الأسئلة لطلابي الأعزاء حتى نحدد مستوياتهم..
لم أختر أسئلة متقدمة، وإنما اكتفيت بالأساسيات التي يجب عليك الإحاطة بها.



1 - أي نوع من الستايلات / القوالب هو الأفضل، المتمدد (Liquid)، أم الثابت (Fixed) ؟.

2 - على أي أساس يتم تصميم شعار الموقع ؟

3 - إذا كثرت الصور في الصفحة، هل يؤثر ذلك على خفة التصميم ؟ وكيف نتفاداها ؟

4 - حتى يكون التصميم احترافياً، أيجب علينا استخدام Photoshop ؟

5 - كيف تجعل تصميمك يدل على محتوى موقعك ؟

٦ - هل من الجيد الاعتماد بشكل كلي على يرنامج مثل DreamWeaver, Microsoft Expression Web ؟



مرحبا Z-ONE

اسألة جيدة كبداية في هذا المجال
شخصيا افضل النمط الممتد
غالبا ما يكون خفيف في نظري اكثر من الثابت
و اراه اسهل في التصميم رغم ان جمال التصميم غالبا يكون في الثابت

الشعار طبعا يعتمد على نشاط الموقع و كلما كان بسيطا و معبرا عن المغزى كلما كان افضل
بعيدا عن التعقيد و التكلف في التصميم مع تناسق الشعار مع الصفحة ككل

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

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

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

لا
كما ذكرت المتخصصين في التصميم قد يستعملون الأكواد فقط

و لي عودة بإذن الله لاحقا لطرح بعض الامور الخاصة بهذا المجال

بورون
26-02-2011, 13:55
مرحبا Z-ONE

اسألة جيدة كبداية في هذا المجال
شخصيا افضل النمط الممتد
غالبا ما يكون خفيف في نظري اكثر من الثابت
و اراه اسهل في التصميم رغم ان جمال التصميم غالبا يكون في الثابت

الشعار طبعا يعتمد على نشاط الموقع و كلما كان بسيطا و معبرا عن المغزى كلما كان افضل
بعيدا عن التعقيد و التكلف في التصميم مع تناسق الشعار مع الصفحة ككل

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

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

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

لا
كما ذكرت المتخصصين في التصميم قد يستعملون الأكواد فقط

و لي عودة بإذن الله لاحقا لطرح بعض الامور الخاصة بهذا المجال


جوابك على السؤال الأول جيد، ولكن بالنسبة للأسهل، فحتماً هو الثابت وليس العكس :). والأخف فكلاهما يعتمد على المحتوى وطبيعة التصميم، ولايوجد أخف ولا أثقل في هذه الناحية.

السؤال الثاني، ماذا أقول ؟ لم تبقِ شيئاً لغيرك ، ماشاء الله تبارك الله :).

السؤال الثالث :P
سأعطيك مثالاً، وحاول استنتاج الجواب منه :)

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


السؤال الرابع: جميل، هكذا هي الأجوبة ^_^

أما السؤال الخامس، فإجابتك ممتازة.

والسادس، ان قمت بتصميم كامل ب DreamWeaver، فهو أكواد!
وكذلك المحترف يفعلها بأكواد !
إذاً ما الفرق ؟ راجع الإجابة، فقد اقتربت :)

بورون
26-02-2011, 14:07
:بكاء: ..مع الاسف ليس لدي اي خبرة في هذا المجال لذلك لا اعرف جواب الاسئلة الاربعة الاولى :ميت:
ولكن ان شاء الله نتعلم هذه الامور كلها من هذه الورشة :سعادة2:
اما السؤال الخامس :
يعتمد هذا على محتوى الموقع .. فمثلاً ان كان الموقع عن البرامج .. يمكن استخدام شعار احدى البرامج في التصميم او ان يكون تصميم يعبر عن البرامج بصورة عامة عن طريق اللون ,, استخدام باترن مناسبة احياناً ,, كما يمكن عمل شعار خاص بي اجعل شكله يدل على ان له علاقة بالبرمجة

عذراً على عدم الاجابة على الاسئلة الاربعة الاولى :o


حياك الله أخي أحمد
جميل ، :)
إجابة أكثر من ممتازة ^^

...
لاعليك عزيزي، فنحن هنا حتى نفيد ونستفيد.

شريد الفكر
26-02-2011, 14:35
مشترك :رامبو:
هل يجب علي الاجابة :موسوس:

بورون
26-02-2011, 14:51
شريدُ الفكر...

حاول الإجابة، لمَ لا:d

بورون
26-02-2011, 15:10
تغيير الخلفية عن طريق bgcolor


المستوى: مبتدئ إلى متوسط
المدة: 2:37



http://www.youtube.com/watch?v=MGrlDn-pdAU

Senya Phoenixia
26-02-2011, 17:44
درس رائع عزيزي z-one

ايضاً يمكنك استخدام العديد من البرامج لتغيير الخلفية ، لكن للحصول على كود انقى استخدم الاكواد فهي افضل

لمن لا يعلم فالفرونت بيج يقوم بإضافة اكواد لا داعي لها تزيد الصفحة عبئاً فوق عبئ

مارأيكم في عمل مساحة بسيطة لاعضاء الورشة لتجربة صفحات html الخاصة بهم ؟

ارجوا من كل مؤيد او رافض ان يبدي رأيه ^^"

بالتوفيق لكم جميعاً

T I Ʀ E Đ
26-02-2011, 18:57
مؤيد ^^
والاسئلة اجابتي لها قريبة من ليدر إلا السؤال السادس ما عرفته :confused:
بانتظاركم ^^

Senya Phoenixia
26-02-2011, 19:07
مؤيد ^^
والاسءلة اجابتي لها قريبة من ليدر إلا السؤال السادس ما عرفته :confused:
بانتظاركم ^^

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

L E A Đ E R
26-02-2011, 19:16
جوابك على السؤال الأول جيد، ولكن بالنسبة للأسهل، فحتماً هو الثابت وليس العكس :). والأخف فكلاهما يعتمد على المحتوى وطبيعة التصميم، ولايوجد أخف ولا أثقل في هذه الناحية.

غريبة
كان اول ستايل لي ثابت و شفت الويل :d
على عكس المتمدد لأني انهيته في يوم واحد
على العموم يعتمد ذلك على الشرح و التلقي




السؤال الثالث :P
سأعطيك مثالاً، وحاول استنتاج الجواب منه :)

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

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




والسادس، ان قمت بتصميم كامل ب DreamWeaver، فهو أكواد!
وكذلك المحترف يفعلها بأكواد !
إذاً ما الفرق ؟ راجع الإجابة، فقد اقتربت :)

لم ادخل في هذا المجال حتى الآن و اجباتي كانت افتراض فقط ^_^

N E T
مؤيد

T I Ʀ E Đ
لا تغش من اجابتي :p

Senya Phoenixia
26-02-2011, 19:22
T I Ʀ E Đ
لا تغش من اجابتي :p

:ضحكة:



N E T
مؤيد

بإنتظار أراء البقية :تدخين:

بورون
26-02-2011, 20:58
غريبة
كان اول ستايل لي ثابت و شفت الويل
على عكس المتمدد لأني انهيته في يوم واحد
على العموم يعتمد ذلك على الشرح و التلقي
هذا إذا بنيت على ستايل آخر :D
لو بنيت على ستايل ثابت لكنت انهيته في يوم ، ولكن ستايل vB متمدد
أما في إنشاء قالب من الصفر فالثابت أسهل، لأنك تضمن ظهوره بنفس الشكل على كل الشاشات، في النهاية لاجواب محدد هنا :D <<< سؤاله داخل عرض :D



كلما كان التصميم احترافيا كلما كان اثقل في التصفح ؟
لا ارى السبب منطقي لانه توجد تصاميم احترافية و لكنها خفيفة و العكس صحيح
هذا في حال افترضنا ان نظريتي صحيحة
لا أبداً، ليس هذا هو السبب.
دقق في السؤال، كلاهم تصميمهم على الفوتوشوب مليء بالصور ، ولكن بعد التقطيع ؟
محمد قام بالتقطيع بشكل ممتاز.
أما خالد، فقد كان تقطيعه سيئاً، لدرجة أنه يقطع الخلفية كاملة ، وليس جزءاً منها !
هذا هو السبب :D.



لم ادخل في هذا المجال حتى الآن و اجباتي كانت افتراض فقط ^_^

ستتعلم معنا بإذن الله :)...

بالنسبة لأخي N E T
فأنا مؤيد وبقوة !

Ŧђễ ḿάş
26-02-2011, 21:33
مشترك

- أي نوع من الستايلات / القوالب هو الأفضل، المتمدد (Liquid)، أم الثابت (Fixed) ؟.
امم لا اعرف:ضحكة:
2 - على أي أساس يتم تصميم شعار الموقع ؟
لكي يتعرف الزائر على فكرة الموقع:موسوس:
3 - إذا كثرت الصور في الصفحة، هل يؤثر ذلك على خفة التصميم ؟ وكيف نتفاداها ؟
نعم يؤثر ذلك على المتصفح فيجعل التصفح ابطأ,
نبعد الصور الي ما لها داعي ونحاول ان نجعل الصورة حجمها خفيف
4 - حتى يكون التصميم احترافياً، أيجب علينا استخدام Photoshop ؟
نعم فالفوتو من افضل البرامج لتصميم الصور,ولا بأس ان استخدمنا برنامج موازي له في الاداء
5 - كيف تجعل تصميمك يدل على محتوى موقعك ؟
لم افهم السؤال:غياب::واجم:
٦ - هل من الجيد الاعتماد بشكل كلي على يرنامج مثل DreamWeaver, Microsoft Expression Web ؟
لا,ان اعتمدنا عليه فقط فكيف سوف نقوم بتصميم الستايل مثلا والشعار:نوم:

بورون
27-02-2011, 11:14
- أي نوع من الستايلات / القوالب هو الأفضل، المتمدد (Liquid)، أم الثابت (Fixed) ؟.
امم لا اعرف
:)
2 - على أي أساس يتم تصميم شعار الموقع ؟
لكي يتعرف الزائر على فكرة الموقع
جميل، حاول أكثر هنا.
3 - إذا كثرت الصور في الصفحة، هل يؤثر ذلك على خفة التصميم ؟ وكيف نتفاداها ؟
نعم يؤثر ذلك على المتصفح فيجعل التصفح ابطأ,
نبعد الصور الي ما لها داعي ونحاول ان نجعل الصورة حجمها خفيف
ممتاز، إجابة مثالية.
4 - حتى يكون التصميم احترافياً، أيجب علينا استخدام Photoshop ؟
نعم فالفوتو من افضل البرامج لتصميم الصور,ولا بأس ان استخدمنا برنامج موازي له في الاداء
لم تفهم السؤال، استخدمت Photoshop للتعبير عن برامج تحرير الصور ككل :)
فيصبح السؤال: أيجب أن نصمم القالب ببرنامج Photoshop أو البرامج المشابهة حتى يكون احترافياً؟
5 - كيف تجعل تصميمك يدل على محتوى موقعك ؟
لم افهم السؤال
كيف تجعل الزائر يتعرف على محتوى موقعك (تقني، تسلية، علمي) من خلال الستايل/القالب ؟
6 - هل من الجيد الاعتماد بشكل كلي على يرنامج مثل DreamWeaver, Microsoft Expression Web ؟
لا,ان اعتمدنا عليه فقط فكيف سوف نقوم بتصميم الستايل مثلا والشعار
لم تفهم السؤال، الشعارات أمر مسلم بها !
ولكن القصد ليس هنا، ما اقصده هو أن تعتمد على تلك البرامج في توزيع الستايل وتركيبه :)


شكرا لك على مرورك :)

ČỏḒ
27-02-2011, 11:49
مُشترك بإذن الله ..

Senya Phoenixia
27-02-2011, 12:51
^^" شكراً لتعاونك

яиσ ✖
27-02-2011, 13:58
مَـاهذا نيت :نينجا: ؟
أتوّد أن تُبهِـرني أم مَـاذا :موسوس: ؟!
3 دورات في وقت واحد xDD ؟
مآقول غير [ مآششآء آلله تبـآرك آلرحمن ، الله يحفظك من العيَـن بصص ] :)
دومًـا مبدع =)
أردتُ لـ وهلة أن أشترك في هذهِ الدورة :لعق: لكن توقّفتُ عندمـا لاحظتُ بأنّنِـي لا أفقهُ شيئًـا في " تصميمِ المواقع " ، لا شيء البتّـة^^"
لذا قررتُ أن أتركَ هذهِ الدورة جـانبًـا xDD إلى أن أتمكّـن من كلِّ متطلبـاتهـا ثمّ أعودُ إليهـا :رامبو:
كمَـا أرى بأنّكم نشيطين لحدِّ النخـاع :سعادة2: الله يزيد من نشـاطكم =)
موفقين جميعًـا ، .

Senya Phoenixia
27-02-2011, 14:02
شكراً لك ^^"

روح الإبداع
27-02-2011, 14:04
مشترك أخوي
الإجابة عن الأسئلة
- أي نوع من الستايلات / القوالب هو الأفضل، المتمدد (Liquid)، أم الثابت (Fixed) ؟.

الثابت

2 - على أي أساس يتم تصميم شعار الموقع ؟

لأعطاء بصمة جيدة عن الموقع

3 - إذا كثرت الصور في الصفحة، هل يؤثر ذلك على خفة التصميم ؟ وكيف نتفاداها ؟

لا

4 - حتى يكون التصميم احترافياً، أيجب علينا استخدام Photoshop ؟

نعم لأنه يفيد بالتنسيق واقتناء الألوان

5 - كيف تجعل تصميمك يدل على محتوى موقعك ؟

إنتقاء الصور المناسبة

٦ - هل من الجيد الاعتماد بشكل كلي على يرنامج مثل DreamWeaver, Microsoft Expression Web ؟

لا يستحسن تعلم الأكواد أفضل

بورون
27-02-2011, 14:18
مشترك أخوي
الإجابة عن الأسئلة
- أي نوع من الستايلات / القوالب هو الأفضل، المتمدد (Liquid)، أم الثابت (Fixed) ؟.

الثابت
جميل. ولكن الإجابة قاصرة.

2 - على أي أساس يتم تصميم شعار الموقع ؟

لأعطاء بصمة جيدة عن الموقع
على أي أساس ، وليس لمَ يصمم.
3 - إذا كثرت الصور في الصفحة، هل يؤثر ذلك على خفة التصميم ؟ وكيف نتفاداها ؟

لا

بل تؤثر :D

4 - حتى يكون التصميم احترافياً، أيجب علينا استخدام Photoshop ؟

نعم لأنه يفيد بالتنسيق واقتناء الألوان

لا أعتقد :D

5 - كيف تجعل تصميمك يدل على محتوى موقعك ؟

إنتقاء الصور المناسبة

ليس شرطاً.

6 - هل من الجيد الاعتماد بشكل كلي على يرنامج مثل DreamWeaver, Microsoft Expression Web ؟

لا يستحسن تعلم الأكواد أفضل
جيد. لكن الإجابة قاصرة كذلك.


أود التنويه أنه بإذن الله تعالى سيتم طرح درس كل 3 أيام أو يومين.
ولكن ماذا تفضلون ؟ كتابي أم فيديو ؟

الأمير الأخير
27-02-2011, 15:04
السلام عليكم ورحمه الله وبركاته

كيف الحال الأخوه المبدعين : ان شاء الله امورهم تمام التمام

احب ان اشكركم على هذه الدوره الفريده من نوعها والقويه

وبالنسبه للأسئله التي طرحها الأخ الفاضل والعزيز: Z-ONE


1 - أي نوع من الستايلات / القوالب هو الأفضل، المتمدد (Liquid)، أم الثابت (Fixed) ؟.

الثابت


2 - على أي أساس يتم تصميم شعار الموقع ؟

يكون على أساس معرفه فكره الموقع بسهوله وايضاً يعطي للموقع مظهر جميل .



3 - إذا كثرت الصور في الصفحة، هل يؤثر ذلك على خفة التصميم ؟ وكيف نتفاداها ؟

قد يؤثر وبهذه النقطه لا اعرف ولا احب ان افتي شيء لا اعرفه منكم نتعلم ونكتسب الخبره


4 - حتى يكون التصميم احترافياً، أيجب علينا استخدام Photoshop ؟

احياناَ يكون واحياناً نستخدم برامج تصميم اخرى غير Photoshop



5 - كيف تجعل تصميمك يدل على محتوى موقعك ؟

التصميم الجيد والجميل يجعل مظهر الموقع للزوار بحاله ممتازه وجيده


٦ - هل من الجيد الاعتماد بشكل كلي على يرنامج مثل DreamWeaver, Microsoft Expression Web ؟

بصراحه لا اعرف بأذن الله اعرفها منكم

بالتوفيق لك عزيزي.

D.E.Λ.T.H
27-02-2011, 16:06
lشاآرك معكم في هذه الدورة و بقوة ^^
كنت منتظر دورة من هذا النوع
سأقوم بالاجابة على الاسئلة في اسرع وقت باذن الله
بالنسبة لهذا السؤال....

ولكن ماذا تفضلون ؟ كتابي أم فيديو ؟
أنا أفضله كتابي :)
>>دخول سريع :d<<
بالتوفيق..

Master Edward
27-02-2011, 19:08
تم التسجيل لي عودة بشوق ::سخرية::

Ŧђễ ḿάş
27-02-2011, 20:22
:صمت::صمت::صمت:
اجاباتي تقريباً كلها غلط الا واحد:محبط:


بالنسبة لــz-one

لكن ماذا تفضلون ؟ كتابي أم فيديو ؟
امممممم:لحية:
اعتقد كتابي افضل:تعجب:

sαsuкε sαмα
27-02-2011, 23:02
مشـــترك أن شاء اللهـ

بنسبه لالا أسئله بعرف بس مش كثير


1 - أي نوع من الستايلات / القوالب هو الأفضل، المتمدد (Liquid)، أم الثابت (Fixed) ؟.

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

المتمدد (Liquid)

1 المتمدد .. يظهر تمكن المصمم ويعطي شكل افضل.
2 المتمدد ..يناسب كل الشاشات وليس مقاس واحد.
3 المتمدد ..الجميع يعرف ان الاستايل الثابت مريح اكثر لكن المتمدد يحتاج لوقت اطول وجهد اكثر وبالنهاية يظهر بجمال اكثر من الصعب جدا ان تقارن منتدى استايله يتمدد على كل الشاشات بمنتدى ذو استايل ثابت ولا يتمدد الا على ششة 800.
4 المتمدد .. يدل على الاحتراف ومريح في التصفح والاستيعاب للمواضيع .

أما الثابت (Fixed)

1 الثاابتـ .. رائع لكن مشكلته من اصغر صوره تظهر شوارع فيه :d
2 الثاابتـ .. شكل وانحنائآت لكن عيبه انه يتمدد في بعض الاحيان طبعا والسبب اما صورة كبير او موضوع فيه كلام كثير يمدده
3 الثاابتـ .. يعطيك مساحه للتصميم والزخارف واخراج التصميم بشكل مميز

وفى الاخير أختار (المتمدد)
وجمال الاستايل يعتمد على المصمم اولا واخيراً


أن شاء اللهـ ماأكون طولت عليكم

2 - على أي أساس يتم تصميم شعار الموقع ؟

لكي يتعرف الزائر على فكرة الموقع وتعطى رونقا لى منتداك وتميزه بشعاره


3 - إذا كثرت الصور في الصفحة، هل يؤثر ذلك على خفة التصميم ؟ وكيف نتفاداها ؟

نعم بتأكيد يؤتر على المتصفح وبدات اللى أتصال نتهم بطىء مثلى 512 كيلوبايت :d
بأن نبعد الصور التى ليس لها قيمه ودخل فى محتوى المنتدى أو بأن يكون بسيط وجميل

4 - حتى يكون التصميم احترافياً، أيجب علينا استخدام Photoshop ؟

لا لا نعتمد ع الفوتو فقط فهناك برامج أخر جميله وتؤدى الغرض ولكن الفوتو جميل أيضا .

5 - كيف تجعل تصميمك يدل على محتوى موقعك ؟

بأن تكون هناك صور وألون تكون جميله وتحتوى مطلوب الموقع


6 - هل من الجيد الاعتماد بشكل كلي على يرنامج مثل DreamWeaver, Microsoft Expression Web ؟

لا أعرف حقا

يارب أكون وفيت

المجهووول؟؟؟
28-02-2011, 00:10
السلام عليكم ورحمة الله وبركاته
بصفتي مدرساً، سأقوم بطرح بعض الأسئلة لطلابي الأعزاء حتى نحدد مستوياتهم..
لم أختر أسئلة متقدمة، وإنما اكتفيت بالأساسيات التي يجب عليك الإحاطة بها.



1 - أي نوع من الستايلات / القوالب هو الأفضل، المتمدد (Liquid)، أم الثابت (Fixed) ؟.


المتمدد
لأنه يظهر للجميع بكامل جمالة فلا يتأثر بتكبير او تصغير الصفحة

وممتع تصميمة مع انه اصعب لكن استانس عليه ^_^

2 - على أي أساس يتم تصميم شعار الموقع ؟

يجب ان يدل على محتوى الموقع او يكون مبهم لا يدل على شئ معين ليتقبل اي محتوى


3 - إذا كثرت الصور في الصفحة، هل يؤثر ذلك على خفة التصميم ؟ وكيف نتفاداها ؟

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

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

سمعت معلومة ليست بالأكيدة وهو طريقة ظهور الصفحة وضع اولويات للظهور

عن طريق التغير في قواعد البيانات "ماي سكيل" واعتقد انه ما ميز موقع اليوتيوب وجعل الفيديوهات سريعة في التحميل في ذلك الموقع هو حسن التعامل مع قواعد البيانات


4 - حتى يكون التصميم احترافياً، أيجب علينا استخدام Photoshop ؟

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


5 - كيف تجعل تصميمك يدل على محتوى موقعك ؟

تناسق الألوان

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


٦ - هل من الجيد الاعتماد بشكل كلي على يرنامج مثل DreamWeaver, Microsoft Expression Web ؟

لم اصل لمستويات اتعامل معها بهذه البرامج ولم استخدمها فلذا ليس لدي خلفية عنها ولا استطيع الإجابة على السؤال ^_^

sαsuкε sαмα
28-02-2011, 00:54
السلام عليكم


ولكن ماذا تفضلون ؟ كتابي أم فيديو ؟

أنا أختار كتابى بس أتمنا فيديو وتكون مساحته قليله:d:d لانه سرعه النت لدى 512 كيلوبايت بس حمد الله

فلدالكا أختار كتابى

Senya Phoenixia
28-02-2011, 09:10
ماذا عن اعتماد دروس الفيديو بحجم مضغوط ؟

مثلاً حجم الفيديو الاصلي 100 ميجا ، استطيع تحويله إلى 2 ميجا

و هذا سيساعد اصحاب الاتصالات الضعيفة

مارأيكم ::جيد:: ؟

بورون
28-02-2011, 11:38
مشـــترك أن شاء اللهـ

بنسبه لالا أسئله بعرف بس مش كثير


1 - أي نوع من الستايلات / القوالب هو الأفضل، المتمدد (Liquid)، أم الثابت (Fixed) ؟.

الحقيقه أنه هناك عيوب ومميزات فى كلتا الامرين مثلا
جيمل، عيوب ومميزات لكل واحد، هو الشيء الذي انتظره !

المتمدد (Liquid)

1 المتمدد .. يظهر تمكن المصمم ويعطي شكل افضل.
ليس شرطاً، تمكن المصمم يكون في تفاديه لأغلب مشاكل التوافق.

2 المتمدد ..يناسب كل الشاشات وليس مقاس واحد.
معك في هذه النقطة.

3 المتمدد ..الجميع يعرف ان الاستايل الثابت مريح اكثر لكن المتمدد يحتاج لوقت اطول وجهد اكثر وبالنهاية يظهر بجمال اكثر من الصعب جدا ان تقارن منتدى استايله يتمدد على كل الشاشات بمنتدى ذو استايل ثابت ولا يتمدد الا على شاشة 800.
اعتقد انتهى عصر شاشة 800 :D.
فالأغلبية العظمى الآن 1024.
4 المتمدد .. يدل على الاحتراف ومريح في التصفح والاستيعاب للمواضيع .
لندع كلمة "احتراف" جانباً، فذوق كل شخص يختلف عن الآخر "^^.

أما الثابت (Fixed)

1 الثاابتـ .. رائع لكن مشكلته من اصغر صوره تظهر شوارع فيه
تُحل بأبسط الطرق، قد يكون كود من سطر واحد !

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

3 الثاابتـ .. يعطيك مساحه للتصميم والزخارف واخراج التصميم بشكل مميز
نعم، يخرج بشكل مميز. ولكن قد يكون متمدد أكثر تميزاً منه :D

وفى الاخير أختار (المتمدد)
:D

وجمال الاستايل يعتمد على المصمم اولا واخيراً
رائع. :-)

أن شاء اللهـ ماأكون طولت عليكم

2 - على أي أساس يتم تصميم شعار الموقع ؟

لكي يتعرف الزائر على فكرة الموقع وتعطى رونقا لى منتداك وتميزه بشعاره
ممم، قلت على أي أساس، ولم أقل "لمَ" :)


3 - إذا كثرت الصور في الصفحة، هل يؤثر ذلك على خفة التصميم ؟ وكيف نتفاداها ؟

نعم بتأكيد يؤتر على المتصفح وبدات اللى أتصال نتهم بطىء مثلى 512 كيلوبايت
بأن نبعد الصور التى ليس لها قيمه ودخل فى محتوى المنتدى أو بأن يكون بسيط وجميل
إجابة جميلة،

4 - حتى يكون التصميم احترافياً، أيجب علينا استخدام Photoshop ؟

لا لا نعتمد ع الفوتو فقط فهناك برامج أخر جميله وتؤدى الغرض ولكن الفوتو جميل أيضا .
ممم، لم أقل لا تستخدم برنامج غيره.
سؤالي استخدم Photoshop للتعبير عن برامج التصميم بشكل عام !
بالنسبة لجوابك، فهو جيد، ولكن يحتاج لإضافات.

5 - كيف تجعل تصميمك يدل على محتوى موقعك ؟

بأن تكون هناك صور وألوان تكون جميله وتحتوى مطلوب الموقع
جميل. اقتربت من الجواب المثالي.
قعدت فترة حتى استوعبتها <<< مو فاهم شي :D.

6 - هل من الجيد الاعتماد بشكل كلي على يرنامج مثل DreamWeaver, Microsoft Expression Web ؟

لا أعرف حقا
ستعرف معنا بإذن الله :)

يارب أكون وفيت
إجاباتك جميلة بشكل عام

بورون
28-02-2011, 11:48
المتمدد
لأنه يظهر للجميع بكامل جمالة فلا يتأثر بتكبير او تصغير الصفحة

وممتع تصميمة مع انه اصعب لكن استانس عليه ^_^
ألم تفكر في "مستر محتوى وكيف سيتضرر:D"؟


يجب ان يدل على محتوى الموقع او يكون مبهم لا يدل على شئ معين ليتقبل اي محتوى

"مبهم"، أي كما هو حال شعار Google ؟ و Facebook؟


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

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

سمعت معلومة ليست بالأكيدة وهو طريقة ظهور الصفحة وضع اولويات للظهور

عن طريق التغير في قواعد البيانات "ماي سكيل" واعتقد انه ما ميز موقع اليوتيوب وجعل الفيديوهات سريعة في التحميل في ذلك الموقع هو حسن التعامل مع قواعد البيانات

طريقتك للتفادي جميلة.
لكن، مادخل قواعد البيانات في التصميم ؟
أخي هذه برمجة، والسبب وراء خفته هو برمجته بطريقة صحيحة وليس فقط التعامل مع قواعد البيانات، قواعد البيانات وحدها لاتكفي !
"خرجت عن الموضوع قليلاً أعتذر " "^^



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

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



تناسق الألوان

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



أبتناسق الألوان تعرف مدلول الموقع أم يمايحتويه تصميمه ؟
ركز عند الإجابة حبوب :)


لم اصل لمستويات اتعامل معها بهذه البرامج ولم استخدمها فلذا ليس لدي خلفية عنها ولا استطيع الإجابة على السؤال ^_^

ستتخطى مستواها بإذن الله ^^

بورون
28-02-2011, 11:50
ماذا عن اعتماد دروس الفيديو بحجم مضغوط ؟

مثلاً حجم الفيديو الاصلي 100 ميجا ، استطيع تحويله إلى 2 ميجا

و هذا سيساعد اصحاب الاتصالات الضعيفة

مارأيكم ؟

أستكون الجودة عالية ؟
إذا كان كذلك، فموافق.

ولكني أفضل الكتابي أكثر :d

Senya Phoenixia
28-02-2011, 11:55
أستكون الجودة عالية ؟
إذا كان كذلك، فموافق.

ولكني أفضل الكتابي أكثر :d

يتم الضغط بالـwinrar و ليس ضغط الفيديو نفسه

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

الصيغة ليست hd و إنما avi

موفق

بورون
28-02-2011, 12:10
يتم الضغط بالـwinrar و ليس ضغط الفيديو نفسه

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

الصيغة ليست hd و إنما avi

موفق

هكذا إذاً، ظننتها بالكوديك "^^

S O F T
28-02-2011, 13:28
انا مــشترك اخـي الغــالي [ Net ]
وان شـاء الله احـصد تقــييم رائــع

ب، النسبـه لفكــره وضـع مسـاحه لـجربة الاعمــال
انــا مؤيد للفكــره وان شـاء الله يتم القبــول


امــا شكـل الشــرح .. فـ افضـل الكـتابــي والفيديـو ..
فالكتابـي يسـهل عليك رؤية الصـور وانت مرتاح
والفيديو يسـهل الفـهم

SAM-X
28-02-2011, 13:47
السلام عليكم و رحمة الله و بركاته
شاكريم لكم مقدما
واله بحاجة للتعلم على دري ويفر
جاري تسجيل اسمي

S H E M O
28-02-2011, 14:59
سبحان الله كنت أفكر اليوم أتعلم تصميم المواقع بس المشكلة ما عندي وقت مع المدرسة
مشتركة صامة xd
و بالتوفيق !!

sαsuкε sαмα
28-02-2011, 14:59
ماذا عن اعتماد دروس الفيديو بحجم مضغوط ؟

مثلاً حجم الفيديو الاصلي 100 ميجا ، استطيع تحويله إلى 2 ميجا

و هذا سيساعد اصحاب الاتصالات الضعيفة

مارأيكم ؟

جميل جدآ بنسبه ليا وحلو شكرا أخى

وأنا فى أنتظارك

بورون
28-02-2011, 17:11
http://i872.photobucket.com/albums/ab284/roboowsy/BANNER-1.png
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته.
من واجبنا إكرام الضيف، أليس كذلك ؟
لدينا اليوم ضيفٌ جديد، يجب علينا إكرامه.
ولكن هذه المرة إكرامٌ من نوعٍ آخر، سنتعرف عليه سويةً ونستكشف مايخفيه عنا :D.

هل عرفتموه ؟ إنها HTML!

نبذة عن HTML
لن أذكر هنا متى نشأت، ومن اخترعها؛ فكلها لا تسمن ولا تغني من جوع.
HTML هي لغة موجهة للويب، وليست لغة برمجة ولا لغة تصميم كما يظنها الكثير، بل هي لغة هيكلة (أي تشرح كيف يظهر الموقع وترتيبه وأين يقع هذا وذاك..إلخ).
html لغة سهلة، ليست بذلك التعقيد -كما يظنها البعض-.
أتعرف كيف تكتب كود HTML؟
انظر لهذا:

<tag>النص هنا </tag>

سهلة، أليس كذلك ؟
هذا لايكفي بتاتاً، دعونا نتوسع أكثر في الفقرة القادمة.


كتابة وسوم HTML
1- الوسم يبدأ بـ(<tag>) وينتهي بـ(</tag>).
2 - اسم الوصم غير حساس لحالة الأحرف.
3 - بعض الوسوم تكون مغلقة مثل وسم: <img />، وهذه الوسوم يكون وسم فتحها هو وسم إغلاقها في الوقت نفسه.

إنشاء ملف html

لإنشاء ملف html، قم بفتح محرر النصوص المفضل لديك، وليكن مثالاً Notepad++.
كم بعمل Save as أو حفظ باسم، وسمه كما يظهر في الصورة.
http://i872.photobucket.com/albums/ab284/roboowsy/Screenshot2011-02-28at65728PM.png



ماذا نكتب في ملف html؟
احم احم، نسيت ايش نكتب :D

@تنبيه: سنتعامل مع ملفات html5 لأنها الأحدث بينهم، لا اختلاف إلا في وسم التصريح.

اكتب في بداية الملف كود التصريح كما يلي:

<!doctype html>
يقول هذا الكود للمتصفح: صديقي الصدوق، تعرف علي كملف html من الإصدار الخامس.

أرأيت البساطة ؟ بكود واحد عرّفت الكثير من الأشياء.

وماذا بعده ؟
أتذكرون قاعدة فتح وإغلاق الوسوم ؟ سنبدأ في كتابة الوسوم الآن ! هييي ::سعادة::!
قم بكتابة هذا الكود بعد التصريح.

<html>


</html>

هذا الكود هو قلب html، بدونه لن يتعرف المتصفح على أن مابين هذين الوسمين هو كود html !

والآن، بين الوسم السابق، اكتب مايلي:


<head>

<title> Mexat Lessons </title>

</head>

رائع :بكاء:، أخيراً كتبنا شيئاً بين الوسم <html>

نعم، وسم <head> هو كما أسميه، اللب الداخلي لـhtml؛ لأنه يتحكم بالأشياء التي لاتظهر للزائر.
مثل: العنوان (بظهر في رأس المتصفح)، ملفات css، استدعاءات javascript، الكلمات الدلالية، وغيرها.

ولاحظ أننا كتبنا وسما في جوف وسم <head> !
نعم، جميل يا صديقي، أنت مجتهد :D، إنه وسم العنوان ، عنوان الصفحة !!!
وقد كتبنا بينه نصاً، وهو Mexat Lessons.

والآن يفترض أن يكون الكود لدينا كالتالي:

<!doctype html>
<html>
<head>
<title> Mexat Lessons</title>
</head>
</html>
وإذا قمت بفتح هذه الصفحة في المتصفح، سترى العنوان قد تغير إلى Mexat Lessons أو ماكتبته أنت.

والآن، لنتعرف على وسم <body>.
وسم <body> يحتوي على جسم الصفحة، أي مايظهر في وسط صفحة html.

اكتب التالي بعد وسم اغلاق <head>

<body>
Hey, I'm here ! I'm your first html file !
</body>

والآن، قم بفتح صفحتك في المتصفح، ماذا تلاحظ ؟
اهاا ! كما يظهر في الصورة :D، جميل، إذا لا، راجع الشرح أو اسأل.
http://i872.photobucket.com/albums/ab284/roboowsy/Screenshot2011-02-28at74823PM.png

والآن هذا هو كودنا النهائي.

<!doctype html>
<html>
<head>
<title> Mexat Lessons</title>
</head>
<body>
Hey, I'm here ! I'm your first html file!
</body>
</html>



خاتمة
أرجو أن يكون الشرح جيداً، وأنكم قد فهمتم الدرس، فالباقي يتعمد على هذا !

H A T S H Y
28-02-2011, 17:21
السلام عليكم ورحمة الله وبركاته
بصفتي مدرساً، سأقوم بطرح بعض الأسئلة لطلابي الأعزاء حتى نحدد مستوياتهم..
لم أختر أسئلة متقدمة، وإنما اكتفيت بالأساسيات التي يجب عليك الإحاطة بها.



1 - أي نوع من الستايلات / القوالب هو الأفضل، المتمدد (Liquid)، أم الثابت (Fixed) ؟.

2 - على أي أساس يتم تصميم شعار الموقع ؟

3 - إذا كثرت الصور في الصفحة، هل يؤثر ذلك على خفة التصميم ؟ وكيف نتفاداها ؟

4 - حتى يكون التصميم احترافياً، أيجب علينا استخدام Photoshop ؟

5 - كيف تجعل تصميمك يدل على محتوى موقعك ؟

٦ - هل من الجيد الاعتماد بشكل كلي على يرنامج مثل DreamWeaver, Microsoft Expression Web ؟


اشـكركم علي الدوره الرائعه ويسعدني ان تقبلوني طالبا معكم ^_^ .. كنت اتمني اكون مدرس ولكن للاسف دخولي متقطع لذلك سأكتفي بأن اكون طالب ^_^
وبصفتي طالب اسمحو لي ان اجيب الاسـئله ..

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

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

3- بالتأكيد .. ضغط الصـور باقصي شكل ممكن .. والابتعاد عن الصـور في اماكن الـ solid color او الالوان المصمطه .. والاكثار من نقاط التمدد ..

4- التصميم الاحترافي يجب ان يكون مطابقا للمعاير القياسيه ولمعاير الويب 2 .. وقد يتطلب ذلك استخدام الفوتوشوب نظرا لانك لن تحصل علي تصميم مجسـم دون الفوتوشوب .. قد يحدث هذا ولكن سيكون مضيعه للوقت .. الفوتوشوب يغنيك عن ذلك ..

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

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

اشـكركم مره اخري وانتظر الدروس القادمة ^_^

H A T S H Y
28-02-2011, 17:31
والآن هذا هو كودنا النهائي.

<!doctype html>
<html>
<head>
<title> Mexat Lessons</title>
</head>
<body>
Hey, I'm here ! I'm your first html file!
</html>




ما شاء الله تبارك الله درس مفيد وبسيط جدا .. اشكرك بشـده ..
ولكن اعزرني هناك خطأ في الكود النهائي .. اعتقد انك نسيت ان تغلق وسم <body>
اشـكرك مره اخري علي الدرس وانتظر القادم بشوق .. دمت بخير ^_^

بورون
28-02-2011, 17:36
اشـكركم علي الدوره الرائعه ويسعدني ان تقبلوني طالبا معكم ^_^ .. كنت اتمني اكون مدرس ولكن للاسف دخولي متقطع لذلك سأكتفي بأن اكون طالب ^_^
وبصفتي طالب اسمحو لي ان اجيب الاسـئله ..

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

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

3- بالتأكيد .. ضغط الصـور باقصي شكل ممكن .. والابتعاد عن الصـور في اماكن الـ solid color او الالوان المصمطه .. والاكثار من نقاط التمدد ..

4- التصميم الاحترافي يجب ان يكون مطابقا للمعاير القياسيه ولمعاير الويب 2 .. وقد يتطلب ذلك استخدام الفوتوشوب نظرا لانك لن تحصل علي تصميم مجسـم دون الفوتوشوب .. قد يحدث هذا ولكن سيكون مضيعه للوقت .. الفوتوشوب يغنيك عن ذلك ..

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

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

اشـكركم مره اخري وانتظر الدروس القادمة ^_^

ياخي وش أقول !
صكيت على اللي بعدك ماشاء الله تبارك الله ^_^.
إجاباتك مثالية، ولا أنكر أنك الوحيد الذي أجاب على السؤال الأول بمثل الذي في ذهني :d.

بالنسبة للخطأ، مع العجلة والتعب ><
شكراً على التنبيه + تم التعديل.

المجهووول؟؟؟
28-02-2011, 19:18
هل لغة الهوتميل لا تقبل الكتابة بالعربية ؟

بورون
28-02-2011, 19:37
هل لغة الهوتميل لا تقبل الكتابة بالعربية ؟
بلى، ولكن عليك تصريح الترميز كـutf-8 أولاً، يمكنك فعلها بالنوت باد.

L E A Đ E R
28-02-2011, 19:40
سؤال
ما هو وسم التصريح ؟
اراك تكرره كثيرا و لم استطع ربط افرع الدرس اعلاه :غياب:

Senya Phoenixia
28-02-2011, 20:13
سؤال
ما هو وسم التصريح ؟
اراك تكرره كثيرا و لم استطع ربط افرع الدرس اعلاه :غياب:

تصريح ان اللغة المستخدمة في المستند هي html

|Imagin|
01-03-2011, 02:23
اذا مافيه مانع احب اشارك

H A T S H Y
01-03-2011, 02:38
هل لغة الهوتميل لا تقبل الكتابة بالعربية ؟

Html تدعم اللغه العربية والعديد من لغات العالم .. فكـل لغه لديها ترميز معين .. وهناك ترميزين يدعمون اللغه العربية وهم ..

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

~ utf-8 : هو الترميز العصري والمتطور الداعم للغة العربية .. فهو قياسي وغير مرتبط بنظام التشغيل .. كما انه مدعوم ايضا من قواعد البيانات !! .. هذا النوع من الترميز هو مستقبل المواقع العربية .. فهو ينتشر بصورة كبيرة .. وقريبا جدا سيختفي ترميز الويندوز .. فهذا الترميز لم يترك له شئ ..

ويتم تعين الترميز الذي يناسبك عن طريق وسـم الـ Meta والذي سيتم شـرحة باستفاضة في دروس قادمة بأذن الله .. ويكون الكود كالتالي :

+ windows-1256


<meta http-equiv="Content-Type" content="text/html; charset=windows-1256" />


+ utf-8


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


- وتكمن المشـكلة الوحيده .. رغم ان الترميزين يدعمون العربية الا انهم يتعارضون بشـكل غير طبيعي .. في حاله عرض اي جزء خارجي مثل اخبارالخلاصه rss مثلا وتكون بترميز utf-8 في حاله عرضها داخل صفحة بترميز الويندوز .. ستظهر الكتابه غير مقروءة .. والعكس صحيح .. لذلك ادعو الجميع لاستخدام ترميز utf-8 لانه المستقبل فهو الافضـل حاليا بدون منازع .. كما اخبركم اخي الكريم Z-ONE (http://www.mexat.com/vb/member.php?515957-Z-ONE) ^_^

H A T S H Y
01-03-2011, 03:11
سؤال
ما هو وسم التصريح ؟
اراك تكرره كثيرا و لم استطع ربط افرع الدرس اعلاه :غياب:



وسـم التصـريح هـو اول وسـم يتم وضعه في صفحات الويب ويجب ان لا يسبقة شئ مهما كان والهدف منه هو ان يتعرف المتصفح بسهوله اذا كانت لغه كتابه الكود هي HTML ام XHTML .. وبأي معاير تم التكويد ويوجد حتي الان ثلاث معاير متفق عليها وهي Strict , Transitional , Frameset وسيتم بأذن الله توضيح الفرق بين الطريقتين والمعاير الثلاثه في دروس قادمة .. وللعلم هذا الوسم الوحيد الذي لا يتم اغلاقة في صفحة الويب .. وايضا يجب ان تكتب حروفة كابيتال كما هي <!DOCTYPE> ..

H A T S H Y
01-03-2011, 05:34
السـلام عليكم ..
بسـم الله الرحمن الرحيم ..

كيف حالكم جميعا ؟؟ .. دمتم بخير دائما .

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

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


- نعـرف ان هناك العديد والعديد من لغات الويب .. مثل HTML - XML - CSS - JAVA - ASP - PHP ... وهكذا ، ما الفـرق بين تلك اللغات ؟؟

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

لغات الـ Server side ( جانب الخادم ) : وهي لغات البرمجه التي تستخدم في بناء برامج الويب مثـل ( ASP - PHP ) وتكون مرتبطة بالسيرفر بشكل كـلي .. بمعني ان السيرفر وحده هو الذي يفهمها ولا يقوي علي فهمها المتصفح وتنفيذ الكود يجب ان يكون علي الخادم ..

لغات الـ Client side ( جانب العميل او المستخدم ) : هي لغات التكويد وليست البرمجة وتستخدم في بناء شـكل وبنية صفحة الويب مثل ( HTML - CSS ) وتكون مرتبطة بالمتصفح بشـكل كلي .. بمعني ان اي متصفح يفهم الكود ويستطيع تنفيذة بسهولة دون الحاجة الي الخادم ..


هذا كلام فارغ .. :d - ولم افهم الفرق حتي الان .. ماذا تقصد يا رجل ؟؟ :confused:

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


تمام بدأت افهم .. ولكن هل لكي اصبح مصمم مواقع محترف يجب ان اتقن النوعين من اللغات ؟؟ :mad:

بالطبع لا .. وكما ان لغات بناء المواقع نوعين .. من يعملون علي بناء المواقع نوعين ايضا وهم :

web designer : وهو مصمم الويب .. يجب ان يتقن لغات التكويد اتقان تام ويكون مسؤلا عن شـكل صفحات الويب بشكل مكتمل .. وهو لا يحتاج الي اي شئ حتي يبدأ بالعمل فهو يستطيع ان يبدا في بناء تصميم صفحة الويب من علي جهازة الشخصي وان يستعرض صفحتة بسهولة في اي متصفح للويب دون الحاجة الي خادم او سيرفر .. فكل ما يكتبة يستطيع المتصفح فهمة وتطبيقة بسهولة ..

web developer : هو مطور الويب .. ويجب ان يتقن لغات برمجة المواقع اتقان تام ويكون مسؤلا عن النتيجة البرمجية بشكل مكتمل .. وهو يحتاج للعمل تحت بيئه الخادم او السيرفر نظرا لان المتصفح العادي لا يستطيع فهم وتطبيق كود البرمجه .. ومن هنا ظهر الخادم المحلي ( لوكل هوست ) فهو الطريق الذي سهل علي مطوري الويب استعراض تطبيقاتهم بسهولة ..


تمام تمام .. انا فاهم تحسبني غبي !؟ :rolleyes: .. اذن مصمم الويب لا يعلم شئ عن البرمجة والمطور لا يعلم شئ عن التكويد وكلا منهم يعمل في جانبه .. صحيح ؟؟

خطأ - لقد اخبرتك ان مصمم الويب يجب ان يتقن لغات التكويد ولم انفي توجب معرفته بلغات البرمجة والعكس صحيح بالنسبة للمطور .. كما رأيت معي مطوري الويب ومصممي الويب وجهان لعمله واحده .. فهم يكملون بعضهم البعض ليخرج الينا الموقع بشـكله المتكامل .. فيجب ان يكون كلا منهم علي درايه ولو بسيطة بعمل الاخر .. فمطور الويب يحتاج الي بعض اكواد الـ HTML حتي تظهر نتائجه نظرا لان المتصفح لا يستعرض الا لغات التكويد فقط .. ومصمم الويب ايضا يحتاج ان يكون علي درايه ولو بسيطة بلغات البرمجة فهو من سيصنع القالب المسؤل عن الشكل ليتم تركيبة علي البرنامج .. وكيف سيفعل ذلك من دون ان يكون علي درايه سابقة باكواد البرمجة الاساسية ..


احس حالي غبي :o - اذن ماذا تقصد بأن المتصفح لا يعرض الا لغه التكويد فقط !؟

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


وربي انك غبي ولا تفهم شئ :p - كيف تقول ان لغه البرمجة مغلقه المصدر وانا اعرف ان لغه الـ PHP مفتوحه المصدر للجميع ؟؟

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


لثاني مره احس حالي غبي :mad: - اذن انت تقول ان الكود الذي يعمل عليه المطور محمي من السيرفر بعكس المصمم ؟؟

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


اخيرا استنتاج صحيح :cool: - اذن لا يستطيع ان يعمل المصمم او المطور بشكل مستقل .. صحيح ؟؟

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


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

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

الاحتمال الاول : ستصبح المواقع تقدم خدمات جليله ورائعه ولكن ستبعث علي الملل فهي عباره عن كلمات فقط لا الوان ولا تنسيق ولا شكل فما فائده الخدمات والزوار يطفشون من الموقع من شده الملل ..

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

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

اشـكرك علي المعلومات القيمة .. رغم انك خربت لي مخي :p
لا شـكر علي واجب ^_^

انتهي المدخل وارجو ان يكون بسيط وسـهل ولم يبعث علي الملل ..
والي اللقاء في درس قادم ان شاء الله ..

ارجو عدم النقل خارج مكسات .. فانا اقدم الشـرح فقط من اجل الاعضاء والزوار .. ولا اسمح بالنقل الا بذكر المصدر ( منتديات مكسات ) كحد ادني ..

ران 999
01-03-2011, 06:47
حمستني الفكرة روووعة يعطيكم العافية وان شاء الله

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

SAM-X
01-03-2011, 09:17
1 - أي نوع من الستايلات / القوالب هو الأفضل، المتمدد (Liquid)، أم الثابت (Fixed) ؟.

اتوقع المتمدد افضل
2 - على أي أساس يتم تصميم شعار الموقع ؟

على حسب محتوى الموقع ... الا ان كان منوع كمنتدانا الغالي يكون التصميم على حسب تفكير المصمم
3- إذا كثرت الصور في الصفحة، هل يؤثر ذلك على خفة التصميم ؟ وكيف نتفاداها ؟

تاثر على سرعة التصفح تصيير الصفحة ثقيله ,,,, بالتحديد ما ادري بس قريت انه في طريقة تظهر الصور بكسولات الين ماتتشكل بالكامل
4 - حتى يكون التصميم احترافياً، أيجب علينا استخدام Photoshop ؟

يفضل استخدام الفوتو في تصميم الاستايلات

5 - كيف تجعل تصميمك يدل على محتوى موقعك ؟

اضع امور تعبر عن المحتوى يعني ان كان منتداي يهتم بالتصميم بحط ايقونات برامج التصميم بشكل حلو و موزع
ان كان التصوير بحط كميرا و الاضائت و زي كذا

٦ - هل من الجيد الاعتماد بشكل كلي على يرنامج مثل DreamWeaver, Microsoft Expression Web ؟
للتسهيل على النفس قد نعتكد على البرامج المختصة ولكن يجب علينا تعلم الكودات

SAM-X
01-03-2011, 09:18
جاري الاطلاع على درس الhtml
يعطيك العافية على الدرس

Senya Phoenixia
01-03-2011, 09:33
لغات الـ Server side ( جانب الخادم ) : وهي لغات البرمجه التي تستخدم في بناء برامج الويب مثـل ( ASP - PHP ) وتكون مرتبطة بالسيرفر بشكل كـلي .. بمعني ان السيرفر وحده هو الذي يفهمها ولا يقوي علي فهمها المتصفح وتنفيذ الكود يجب ان يكون علي الخادم ..

و هي اللغات التي تقرأ من خلال المشغلات الحيوية الموجودة في السيرفر مثل ، php service , و IIS لقرائه ASPX

Ŧђễ ḿάş
01-03-2011, 10:36
شكرا على الدرس الممتع
وخصوصاً طريقة الدرس الممتعة

يقول هذا الكود للمتصفح: صديقي الصدوق، تعرف علي كملف html من الإصدار الخامس.

S O F T
01-03-2011, 13:08
اخــوانــي .. لو تحـطون .. الدروس .. في مواضيـع مسـتقله عن هذه افضــل
او مـوضوع مــتســقــل
كـذا والله تخربطت الدنــيا في راســي

Senya Phoenixia
01-03-2011, 13:22
سيتم ترتيب الدروس في الفهرس أخي الكريم

بورون
01-03-2011, 14:27
1 - أي نوع من الستايلات / القوالب هو الأفضل، المتمدد (Liquid)، أم الثابت (Fixed) ؟.

اتوقع المتمدد افضل
2 - على أي أساس يتم تصميم شعار الموقع ؟

على حسب محتوى الموقع ... الا ان كان منوع كمنتدانا الغالي يكون التصميم على حسب تفكير المصمم
3- إذا كثرت الصور في الصفحة، هل يؤثر ذلك على خفة التصميم ؟ وكيف نتفاداها ؟

تاثر على سرعة التصفح تصيير الصفحة ثقيله ,,,, بالتحديد ما ادري بس قريت انه في طريقة تظهر الصور بكسولات الين ماتتشكل بالكامل
4 - حتى يكون التصميم احترافياً، أيجب علينا استخدام Photoshop ؟

يفضل استخدام الفوتو في تصميم الاستايلات

5 - كيف تجعل تصميمك يدل على محتوى موقعك ؟

اضع امور تعبر عن المحتوى يعني ان كان منتداي يهتم بالتصميم بحط ايقونات برامج التصميم بشكل حلو و موزع
ان كان التصوير بحط كميرا و الاضائت و زي كذا

6 - هل من الجيد الاعتماد بشكل كلي على يرنامج مثل DreamWeaver, Microsoft Expression Web ؟
للتسهيل على النفس قد نعتكد على البرامج المختصة ولكن يجب علينا تعلم الكودات

1- مم، ولمَ لا يكون الثابت ؟ أو وبما في حالة وحالة ؟ راجع الإجابة أخي :).

2 - إجابتك جميلة.

3 - لم أسمع شيئاً عن الطريقة، عموماً هي تؤثر على سرعة التصفح.

4 - مم، يفضل ولكن ليس في كل الأحيان :).


5 - جميل.

6 - بالنسبة لي الستهيل هو بكتابة الكود من الصفر ، وليس بتعديل أخطاء نحن في غنيً عنها.

بورون
01-03-2011, 14:29
جاري الاطلاع على درس الhtml
يعطيك العافية على الدرس
الله يعافيك، إن وجد أي استفسار فلا تترد في طرحه هنا :)


شكرا على الدرس الممتع
وخصوصاً طريقة الدرس الممتعة
عفواً :)

النجم اللامع2
01-03-2011, 15:10
فكرة جميلة جدا وسأكون من الطلاب المجتهدين اتمنى ان تقبلوني معكم صديقا وطالبا



1 - أي نوع من الستايلات / القوالب هو الأفضل، المتمدد (Liquid)، أم الثابت (Fixed) ؟.

لايوجد افضل
يتم اختيار طريقة عرض الستايل حسب نوع الموقع

2 - على أي أساس يتم تصميم شعار الموقع ؟

يتم تصميم شعار الموقع على اساس توجه الموقع ونوع المعلومات التي يقدمها الموقع

3 - إذا كثرت الصور في الصفحة، هل يؤثر ذلك على خفة التصميم ؟ وكيف نتفاداها ؟

طبعا يؤثر على خفة التصميم
نتفادى هذا عن طريق تقليل الصور داخل الموقع واستخدام تقنية CSS في الالوان السادة وبإستخدام CSS3 عند الزوايا الدائرية ، التدرجات وغيرها

4 - حتى يكون التصميم احترافياً، أيجب علينا استخدام Photoshop ؟

لا
فليس ضروريا عند تصميم تصاميم احترافية استخدام محررات الصور بإستثناء (الشعار)

5 - كيف تجعل تصميمك يدل على محتوى موقعك ؟

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

٦ - هل من الجيد الاعتماد بشكل كلي على يرنامج مثل DreamWeaver, Microsoft Expression Web ؟


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


تحيتي لكم

بورون
01-03-2011, 16:16
1 - أي نوع من الستايلات / القوالب هو الأفضل، المتمدد (liquid)، أم الثابت (fixed) ؟.

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


2 - على أي أساس يتم تصميم شعار الموقع ؟

يتم تصميم شعار الموقع على اساس توجه الموقع ونوع المعلومات التي يقدمها الموقع

اختصرت كل الكلام في هذه الجملة :)
فعلاً إجابة مثالية.




3 - إذا كثرت الصور في الصفحة، هل يؤثر ذلك على خفة التصميم ؟ وكيف نتفاداها ؟

طبعا يؤثر على خفة التصميم
نتفادى هذا عن طريق تقليل الصور داخل الموقع واستخدام تقنية css في الالوان السادة وبإستخدام css3 عند الزوايا الدائرية ، التدرجات وغيرها

لم أتوقع أن يذكرها أحد "^^، إجابة رائعة صديقي :).



4 - حتى يكون التصميم احترافياً، أيجب علينا استخدام photoshop ؟

لا
فليس ضروريا عند تصميم تصاميم احترافية استخدام محررات الصور بإستثناء (الشعار)
جميل :d، "محررات الصور"، أجمل كلمة في الإجابة !، تدل على فهمك للسؤال !


5 - كيف تجعل تصميمك يدل على محتوى موقعك ؟

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



٦ - هل من الجيد الاعتماد بشكل كلي على يرنامج مثل dreamweaver, microsoft expression web ؟


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

إجابة مثالية ^^.

أشكرك أخي على هذه الإجابات الرائعة !
وأهلاً وسهلاً بك بيننا

Master Edward
01-03-2011, 21:23
بسم الله الرحمن الرحيم


حتى الان لم يتسنى لي الدخول للورشة :ميت: ظروف ..
المهم الآن سأقوم خلال هذة الساعتين بمرآجعة جميع ما فاتني

مبدئـياً سأعطيكم فكرة عن مستوى طالبك :d >> يعني انا :تعجب:

حـسناً انا لم اتطرق لأستخدام برآمج تصاميم للمواقع غير الفرونت بيج :ميت: حيث ان اعمالي اختصت بالأستايل وتصميمها ، اما خبرتي في الاكواد ليست بالمستوى الذي يذكر فهنآلك بعض المصطلحات التي لم افهمها بعد والتي اتمنى ان تتضح لي قريباً :) ..

الآن سأتفرغ لمرآجعة الصفحة الأولى من الموضوع للرد على الأستفسارات ..



السلام عليكم ورحمة الله وبركاته
بصفتي مدرساً، سأقوم بطرح بعض الأسئلة لطلابي الأعزاء حتى نحدد مستوياتهم..
لم أختر أسئلة متقدمة، وإنما اكتفيت بالأساسيات التي يجب عليك الإحاطة بها.



1 - أي نوع من الستايلات / القوالب هو الأفضل، المتمدد (liquid)، أم الثابت (fixed) ؟.

2 - على أي أساس يتم تصميم شعار الموقع ؟

3 - إذا كثرت الصور في الصفحة، هل يؤثر ذلك على خفة التصميم ؟ وكيف نتفاداها ؟

4 - حتى يكون التصميم احترافياً، أيجب علينا استخدام photoshop ؟

5 - كيف تجعل تصميمك يدل على محتوى موقعك ؟

6 - هل من الجيد الاعتماد بشكل كلي على يرنامج مثل dreamweaver, microsoft expression web ؟


اهلاً بك استاذي :) ..




اظن ان المتمدد فهو مناسب جداً للمنتديآت يعطيني حرية في التصفحة وايضاً يتناسب مع جميع مقاييس الشاشات >> طبعاً في حال كان توزيع الأكواد صحيح وبدون أخطاء ;) ، لكن من الأفضل >فالأختيار صعب< فهذا يعتمد على المصمم فعليه توزيع الأكواد والصور وتنسيق الألوان بشكل صحيح ..
شعار الموقع لآبد ان يمثل محتوى الموقع مثلاً موآقع الأنمي لها شعار مُمـيز كذلك المواقع التجارية ومواقع الصحف ...ألخ :) ..
نعم بالتأكيد تؤثر على سرعة التصفح احياناً تقعد دقيقة كاملة عشان تفتح صفحة وهذا امر مزعج ومُمـل ، بالنسبة لتفاديها فذلك يكون بأستخدام الأكواد ..
حسناً برآمج التصميم كثيرة لكن الكثير يعتمد على الفوتوشوب ، لكن برنامجنا العزيز الفوتو يعطيك مجآل افضل في التصميم وتحصل على حرية كافية في التصميم ..
جميل لاحظت في بعض الموآقع عدم توافق استايل الموقع مع ما يحتوية الموقع وهذا يشكل عيب كبير وتأثير سلبي لمن يتصفح الموقع او يقوم بزيارته ..
طبعاً البرنامجين يؤديا نفس الغرض حسناً من الصعب الاعتماد عليهما وحدهما مع العلم انه بأمكانك تصميم موقع متكامل بأستخدام الأكواد ، الأ انه لابد من عمل بعض الأضافات الخارجية كعمل شعار او هيدر وهذا يحتاج لبرنامج تصميم ..






تغيير الخلفية عن طريق bgcolor


المستوى: مبتدئ إلى متوسط
المدة: 2:37



http://www.youtube.com/watch?v=mgrldn-pdau
درس خفيف ولذيذ ، تم تطبيقة بنجاح :)
شكراً لك


درس رائع عزيزي z-one

ايضاً يمكنك استخدام العديد من البرامج لتغيير الخلفية ، لكن للحصول على كود انقى استخدم الاكواد فهي افضل

لمن لا يعلم فالفرونت بيج يقوم بإضافة اكواد لا داعي لها تزيد الصفحة عبئاً فوق عبئ

مارأيكم في عمل مساحة بسيطة لاعضاء الورشة لتجربة صفحات html الخاصة بهم ؟

ارجوا من كل مؤيد او رافض ان يبدي رأيه ^^"

بالتوفيق لكم جميعاً

الفرونت بيج فعلاً يعطيك رموز مالها ذاعي :ميت: وتعبي عليك الصفحة على الفاضي ..
جميل جداً وانا بالتأكيد مؤيد .. ::جيد::

.
.

تم بحمد الله ورعاية مراجعة الصفحة الأولى وجاري الأطلاع على البقية :رامبو: ..

آنتظروني :D

Master Edward
01-03-2011, 22:21
أود التنويه أنه بإذن الله تعالى سيتم طرح درس كل 3 أيام أو يومين.
ولكن ماذا تفضلون ؟ كتابي أم فيديو ؟




ماذا عن اعتماد دروس الفيديو بحجم مضغوط ؟

مثلاً حجم الفيديو الاصلي 100 ميجا ، استطيع تحويله إلى 2 ميجا

و هذا سيساعد اصحاب الاتصالات الضعيفة

مارأيكم ::جيد:: ؟


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




http://i872.photobucket.com/albums/ab284/roboowsy/BANNER-1.png
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته.
من واجبنا إكرام الضيف، أليس كذلك ؟
لدينا اليوم ضيفٌ جديد، يجب علينا إكرامه.
ولكن هذه المرة إكرامٌ من نوعٍ آخر، سنتعرف عليه سويةً ونستكشف مايخفيه عنا :D.

هل عرفتموه ؟ إنها HTML!

نبذة عن HTML
لن أذكر هنا متى نشأت، ومن اخترعها؛ فكلها لا تسمن ولا تغني من جوع.
HTML هي لغة موجهة للويب، وليست لغة برمجة ولا لغة تصميم كما يظنها الكثير، بل هي لغة هيكلة (أي تشرح كيف يظهر الموقع وترتيبه وأين يقع هذا وذاك..إلخ).
html لغة سهلة، ليست بذلك التعقيد -كما يظنها البعض-.
أتعرف كيف تكتب كود HTML؟
انظر لهذا:

<tag>النص هنا </tag>

سهلة، أليس كذلك ؟
هذا لايكفي بتاتاً، دعونا نتوسع أكثر في الفقرة القادمة.


كتابة وسوم HTML
1- الوسم يبدأ بـ(<tag>) وينتهي بـ(</tag>).
2 - اسم الوصم غير حساس لحالة الأحرف.
3 - بعض الوسوم تكون مغلقة مثل وسم: <img />، وهذه الوسوم يكون وسم فتحها هو وسم إغلاقها في الوقت نفسه.

إنشاء ملف html

لإنشاء ملف html، قم بفتح محرر النصوص المفضل لديك، وليكن مثالاً Notepad++.
كم بعمل Save as أو حفظ باسم، وسمه كما يظهر في الصورة.
http://i872.photobucket.com/albums/ab284/roboowsy/Screenshot2011-02-28at65728PM.png



ماذا نكتب في ملف html؟
احم احم، نسيت ايش نكتب :D

@تنبيه: سنتعامل مع ملفات html5 لأنها الأحدث بينهم، لا اختلاف إلا في وسم التصريح.

اكتب في بداية الملف كود التصريح كما يلي:

<!doctype html>
يقول هذا الكود للمتصفح: صديقي الصدوق، تعرف علي كملف html من الإصدار الخامس.

أرأيت البساطة ؟ بكود واحد عرّفت الكثير من الأشياء.

وماذا بعده ؟
أتذكرون قاعدة فتح وإغلاق الوسوم ؟ سنبدأ في كتابة الوسوم الآن ! هييي ::سعادة::!
قم بكتابة هذا الكود بعد التصريح.

<html>


</html>

هذا الكود هو قلب html، بدونه لن يتعرف المتصفح على أن مابين هذين الوسمين هو كود html !

والآن، بين الوسم السابق، اكتب مايلي:


<head>

<title> Mexat Lessons </title>

</head>

رائع :بكاء:، أخيراً كتبنا شيئاً بين الوسم <html>

نعم، وسم <head> هو كما أسميه، اللب الداخلي لـhtml؛ لأنه يتحكم بالأشياء التي لاتظهر للزائر.
مثل: العنوان (بظهر في رأس المتصفح)، ملفات css، استدعاءات javascript، الكلمات الدلالية، وغيرها.

ولاحظ أننا كتبنا وسما في جوف وسم <head> !
نعم، جميل يا صديقي، أنت مجتهد :D، إنه وسم العنوان ، عنوان الصفحة !!!
وقد كتبنا بينه نصاً، وهو Mexat Lessons.

والآن يفترض أن يكون الكود لدينا كالتالي:

<!doctype html>
<html>
<head>
<title> Mexat Lessons</title>
</head>
</html>
وإذا قمت بفتح هذه الصفحة في المتصفح، سترى العنوان قد تغير إلى Mexat Lessons أو ماكتبته أنت.

والآن، لنتعرف على وسم <body>.
وسم <body> يحتوي على جسم الصفحة، أي مايظهر في وسط صفحة html.

اكتب التالي بعد وسم اغلاق <head>

<body>
Hey, I'm here ! I'm your first html file !
</body>

والآن، قم بفتح صفحتك في المتصفح، ماذا تلاحظ ؟
اهاا ! كما يظهر في الصورة :D، جميل، إذا لا، راجع الشرح أو اسأل.
http://i872.photobucket.com/albums/ab284/roboowsy/Screenshot2011-02-28at74823PM.png

والآن هذا هو كودنا النهائي.

<!doctype html>
<html>
<head>
<title> Mexat Lessons</title>
</head>
<body>
Hey, I'm here ! I'm your first html file!
</body>
</html>



خاتمة
أرجو أن يكون الشرح جيداً، وأنكم قد فهمتم الدرس، فالباقي يتعمد على هذا !



سلمت يدآك أخي على الشرح المُميز :)
الحمد الله لدي فكرة جيدة حول ذلك ..

لكني من فترة لم اكن اعلم عن وجود عدة اصدارت لـ html ..
حسناً لأني فضولي بعض الشيء قمت بالأطلاع عن طريق برنامج الدريم ويفر عن الأصدارات السابقة ووجدت التالي :

Html 4.01 strict
Html 4.01 Transitional
XHtml 1.0 strict
XHtml 1.0 Transitional
XHtml 1.1
XHTML Moblie
وايضاً Html5

جربتها كلها وبالتأكيد Html5 هو الأفضل لا يحتوي على كثير اكواد طويلة ايضاً خفيف جداً ..
حسناً مجدداً دفعني الفضول للأطلاع على الـ Html المتوافق مع الفرونت بيج وكانت النتيجة كالتالي :ميت: ..


<html dir="rtl">

<head>

<title>New</title>
</head>

<body>

</body>

</html>
طرأ ببالي سؤال هل لأصدارات البرآمج علاقة بلغة الـ html ؟ :موسوس:
اعني كما ترى في الكود فقد قمت بأقتباسة من برنامج الفرونت بيج مع العلم ان الأصدار المتوفر عندي 2003 >> مغبر :( ..
فهل لذلك علاقة بالأصدار .؟ وماذا عن بقية البرآمج كالدريم ويفر بأصدارته القديمة ..؟

.
.

اشعر بالتعب سأحاول المعاودة مجدداً للأطلاع على الباقي
شكراً مجدداً على الدرس واسف ان كانت اسئلتي مصدر ازعآج لك

لكم من ارق تحية .. تلميذكم ادوارد ;)

H A T S H Y
02-03-2011, 00:50
طرأ ببالي سؤال هل لأصدارات البرآمج علاقة بلغة الـ html ؟ :موسوس:
اعني كما ترى في الكود فقد قمت بأقتباسة من برنامج الفرونت بيج مع العلم ان الأصدار المتوفر عندي 2003 >> مغبر :( ..
فهل لذلك علاقة بالأصدار .؟ وماذا عن بقية البرآمج كالدريم ويفر بأصدارته القديمة ..؟


رائع ما شاء الله .. تطبيقات واجابات مثاليه .. وتعليقي علي السؤال فقط ..
بالطبع اصدارات البرامج لها علاقه .. فكما تعلم اللغه متطورة وكل اصدار جديد يدعم التطويرات في اللغه ولكن لا تقلق ليست تغيرات جزرية
فهي مثل الاضافات والتعديلات البسيطة .. فكل اصدار جديد ستجد به ادوات وخصائص جديدة تساعدك وتسهل عليك علمليه التكويد ..
وعن البرامج .. انا اعتبر الفرونت بيج هو برنامج للمبتدئين .. فهو يقدم واجهه استخدام سهله وبسـيطة ولكن من عيوبة انه لا ياخذ نصيب
كافي من التطوير من جانب شـركة مايكروسوفت .. اما دريم ويفر فهو برنامج تحرير للمحترفين .. احترافي جدا والادوات فيه متقدمه ودائما متطور
ومن بعض العيوب التي واجهتني في فرونت بيج انه لا يدعم الـ css بالشكل المناسب ..
وايضا من الاخطاء الغريبة انه السبب في بعض الاخطاء التي تظهر عند اختبار القوالب .. فقد كان اصدار 2003 لا يغلق وسـم الصور وكنت اضطر للغلاق اليدوي حتي تختفي الاخطاء
وفي الحقيقة لا اعلم هل تم تطوير هذة النقطة او لا في الاصدارات الحديثه .. نظرا لاني توقفت عن استخدام الفرونت بيج منذ سنوات ..

D.E.Λ.T.H
02-03-2011, 11:41
1 - أي نوع من الستايلات / القوالب هو الأفضل، المتمدد (Liquid)، أم الثابت (Fixed) ؟.مممم.أظن ان الاستايل الثابت افضل
لكن شكل جمالي و ايضا يكون خفيف على الموقع و الاتصالات الضعيفة
و أنا لي تجربة مع الاستايلات المتمددة و هي متعبة تحتاج وقت
لكن لكل منهما عيوب و حسنات ^^

2 - على أي أساس يتم تصميم شعار الموقع ؟يتم إن تصميم شعار الموقع على المحتوى الرئيسي الذي يعنى به الموقع
أو الاساس الذي انشئ صاحب الموقع هذا الموقع لاحله ><
و يفضل ان يكون بسيط و حامل للمعنى الكامل للموقع

3 - إذا كثرت الصور في الصفحة، هل يؤثر ذلك على خفة التصميم ؟ وكيف نتفاداها ؟بالتأكيد فخفة التصميم تعتمد بشكل رئيسي على مايحتويه من صور و أحجامها
و الصور مهمة لكل التصاميم فهي الاساس لمحتوى المنتدى ^^

4 - حتى يكون التصميم احترافياً، أيجب علينا استخدام Photoshop ؟لآ يشترط ان يستخدم فقط الفوتوشوب من أجل ان يكون التصميم احترافيا
فهناك برامج قد تكون بمستوى الفوتوشوب او افضل منه ..

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

٦ - هل من الجيد الاعتماد بشكل كلي على يرنامج مثل DreamWeaver, Microsoft Expression Web ؟ليس من الجيد الاعتماد الكلي عليها
بل يجب ان يتعلم الشخص كيف يقوم بصنع اكواد بنفسه
فانها تكون افضل و اآمن من اكواد البرامج المختلفة
و أخطائها العديدة..

أتمنى اكون وفقت في الاجابة :)


تم تطبيق الدروس بنجاح ^^

بورون
02-03-2011, 15:15
ا
ظن ان المتمدد فهو مناسب جداً للمنتديآت يعطيني حرية في التصفحة وايضاً يتناسب مع جميع مقاييس الشاشات >> طبعاً في حال كان توزيع الأكواد صحيح وبدون أخطاء ، لكن من الأفضل >فالأختيار صعب< فهذا يعتمد على المصمم فعليه توزيع الأكواد والصور وتنسيق الألوان بشكل صحيح ..
ماشاء الله تبارك الله ">فالاختيار صعب<" هي الفاصل ^_^.



شعار الموقع لآبد ان يمثل محتوى الموقع مثلاً موآقع الأنمي لها شعار مُمـيز كذلك المواقع التجارية ومواقع الصحف ...ألخ ..

أجل بكل تأكيد :ضحكة:


نعم بالتأكيد تؤثر على سرعة التصفح احياناً تقعد دقيقة كاملة عشان تفتح صفحة وهذا امر مزعج ومُمـل ، بالنسبة لتفاديها فذلك يكون بأستخدام الأكواد ..
طيب، أنا سأكتب كوداً يقوم بعرض الصورة، أهكذا تفاديتها ؟! ركز في الإجابة :تدخين:


حسناً برآمج التصميم كثيرة لكن الكثير يعتمد على الفوتوشوب ، لكن برنامجنا العزيز الفوتو يعطيك مجآل افضل في التصميم وتحصل على حرية كافية في التصميم ..
أجل الكثير يعتمد عليه، بل إن أغلبهم يستخدمونه كخريطة للتصميم فقط :).
بالنسبة لي، لايعطيني كافة الحرية ><.



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

فأحياناً تدخل موقعاً مختصاً في Anime وتجده يضع صورة "كوب شاي" في الهيدر مثلاً :D.
إجابة ممتازة.




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

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

بورون
02-03-2011, 15:19
طرأ ببالي سؤال هل لأصدارات البرآمج علاقة بلغة الـ html ؟
اعني كما ترى في الكود فقد قمت بأقتباسة من برنامج الفرونت بيج مع العلم ان الأصدار المتوفر عندي 2003 >> مغبر ..
فهل لذلك علاقة بالأصدار .؟ وماذا عن بقية البرآمج كالدريم ويفر بأصدارته القديمة ..؟

بالتأكيد لها علاقة !
الكود الذي نسخته يفتقر إلى أهم أمر، وهو كود التصريح.
فهكذا، لن ستطيع المتصفح فهم صفحتك، وقد يفسرها كما يشاء وليس كما أردت أنت :).
وتجدها تختلف من متصفح إلى غيره.

بورون
02-03-2011, 15:26
مممم.أظن ان الاستايل الثابت افضل
لكن شكل جمالي و ايضا يكون خفيف على الموقع و الاتصالات الضعيفة
و أنا لي تجربة مع الاستايلات المتمددة و هي متعبة تحتاج وقت
لكن لكل منهما عيوب و حسنات ^^
فهل تشفع حسنات أحدهم لجعله الأفضل ؟



يتم إن تصميم شعار الموقع على المحتوى الرئيسي الذي يعنى به الموقع
أو الاساس الذي انشئ صاحب الموقع هذا الموقع لاحله ><
و يفضل ان يكون بسيط و حامل للمعنى الكامل للموقع
نعم، هكذا تماماً.


بالتأكيد فخفة التصميم تعتمد بشكل رئيسي على مايحتويه من صور و أحجامها
و الصور مهمة لكل التصاميم فهي الاساس لمحتوى المنتدى ^^
الصور ليست بتلك الأهمية بالنسبة لي، فأغلب ماتفعله بالصور يمكنك فعله في CSS 3.


لآ يشترط ان يستخدم فقط الفوتوشوب من أجل ان يكون التصميم احترافيا
فهناك برامج قد تكون بمستوى الفوتوشوب او افضل منه .
ومن هذه البرامج Notepad++ ؟ :D
راجع إجابتك. << مسوي مدرس :ضحكة:


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



ليس من الجيد الاعتماد الكلي عليها
بل يجب ان يتعلم الشخص كيف يقوم بصنع اكواد بنفسه
فانها تكون افضل و اآمن من اكواد البرامج المختلفة
و أخطائها العديدة..
صناعة كود ؟ :موسوس:
"كتابة كود" وليس صناعة أخي :لقافة:

عموماً إجاباتك ممتازة، موفق

D.E.Λ.T.H
02-03-2011, 15:33
كنت مندمج مع الاسئلة لدرجة اني نسيت اكتب صح :d

Mr-Code
02-03-2011, 20:02
ماشاء الله من افضل الى افضل

تقبل ودي . .

Master Edward
02-03-2011, 20:45
رائع ما شاء الله .. تطبيقات واجابات مثاليه .. وتعليقي علي السؤال فقط ..
بالطبع اصدارات البرامج لها علاقه .. فكما تعلم اللغه متطورة وكل اصدار جديد يدعم التطويرات في اللغه ولكن لا تقلق ليست تغيرات جزرية
فهي مثل الاضافات والتعديلات البسيطة .. فكل اصدار جديد ستجد به ادوات وخصائص جديدة تساعدك وتسهل عليك علمليه التكويد ..
وعن البرامج .. انا اعتبر الفرونت بيج هو برنامج للمبتدئين .. فهو يقدم واجهه استخدام سهله وبسـيطة ولكن من عيوبة انه لا ياخذ نصيب
كافي من التطوير من جانب شـركة مايكروسوفت .. اما دريم ويفر فهو برنامج تحرير للمحترفين .. احترافي جدا والادوات فيه متقدمه ودائما متطور
ومن بعض العيوب التي واجهتني في فرونت بيج انه لا يدعم الـ css بالشكل المناسب ..
وايضا من الاخطاء الغريبة انه السبب في بعض الاخطاء التي تظهر عند اختبار القوالب .. فقد كان اصدار 2003 لا يغلق وسـم الصور وكنت اضطر للغلاق اليدوي حتي تختفي الاخطاء
وفي الحقيقة لا اعلم هل تم تطوير هذة النقطة او لا في الاصدارات الحديثه .. نظرا لاني توقفت عن استخدام الفرونت بيج منذ سنوات ..


شكراً لك على الأجابة الرائع .. ::سعادة::
Css هي التي جعلتني افكر في التقدم والتعرف على برآمج اكثر فائدة ..
بصراحة اكتسبت معلومات جديدة منذ ان تعرفت على بعض البرآمج وخصيصاً بعض الأنضمام للورشة :) ..
صحيح الفرونت بيج برآمج ضيعف ولا يقارن بغير كالدريم ويفر والويب 2 ، ومع ذلك هو كان صديق وطيب وشاركنا بدآية الطريق :d ..

شكراً لك مجدداً

Master Edward
02-03-2011, 20:58
طيب، أنا سأكتب كوداً يقوم بعرض الصورة، أهكذا تفاديتها ؟! ركز في الإجابة :تدخين:



:غياب: بفكر بأجابة ثانية .. سأحاول التركيز اكثر :)





بالتأكيد لها علاقة !
الكود الذي نسخته يفتقر إلى أهم أمر، وهو كود التصريح.
فهكذا، لن ستطيع المتصفح فهم صفحتك، وقد يفسرها كما يشاء وليس كما أردت أنت :).
وتجدها تختلف من متصفح إلى غيره.



جميل .. ::مغتاظ:: في بعض الأحيان يكون همي الكبير بعد الفرآغ من العمل علي توزيع الأستايل ورابطة هو المظهر الذي سيكون عليه الأستايل في المتصفحآت ><
حتى الان لم اجرب تركيب اي استايل بأستخدام برنامج الدريم ويفر ..!
ومع ذلك انا اقوم بمرآجعة بعض الموآرد الأخرى من الدروس لعلي استفيد .. :)

Master Edward
02-03-2011, 21:27
السـلام عليكم ..
بسـم الله الرحمن الرحيم ..

كيف حالكم جميعا ؟؟ .. دمتم بخير دائما .

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

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


- نعـرف ان هناك العديد والعديد من لغات الويب .. مثل html - xml - css - java - asp - php ... وهكذا ، ما الفـرق بين تلك اللغات ؟؟

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

لغات الـ server side ( جانب الخادم ) : وهي لغات البرمجه التي تستخدم في بناء برامج الويب مثـل ( asp - php ) وتكون مرتبطة بالسيرفر بشكل كـلي .. بمعني ان السيرفر وحده هو الذي يفهمها ولا يقوي علي فهمها المتصفح وتنفيذ الكود يجب ان يكون علي الخادم ..

لغات الـ client side ( جانب العميل او المستخدم ) : هي لغات التكويد وليست البرمجة وتستخدم في بناء شـكل وبنية صفحة الويب مثل ( html - css ) وتكون مرتبطة بالمتصفح بشـكل كلي .. بمعني ان اي متصفح يفهم الكود ويستطيع تنفيذة بسهولة دون الحاجة الي الخادم ..


هذا كلام فارغ .. :d - ولم افهم الفرق حتي الان .. ماذا تقصد يا رجل ؟؟ :confused:

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


تمام بدأت افهم .. ولكن هل لكي اصبح مصمم مواقع محترف يجب ان اتقن النوعين من اللغات ؟؟ :mad:

بالطبع لا .. وكما ان لغات بناء المواقع نوعين .. من يعملون علي بناء المواقع نوعين ايضا وهم :

web designer : وهو مصمم الويب .. يجب ان يتقن لغات التكويد اتقان تام ويكون مسؤلا عن شـكل صفحات الويب بشكل مكتمل .. وهو لا يحتاج الي اي شئ حتي يبدأ بالعمل فهو يستطيع ان يبدا في بناء تصميم صفحة الويب من علي جهازة الشخصي وان يستعرض صفحتة بسهولة في اي متصفح للويب دون الحاجة الي خادم او سيرفر .. فكل ما يكتبة يستطيع المتصفح فهمة وتطبيقة بسهولة ..

web developer : هو مطور الويب .. ويجب ان يتقن لغات برمجة المواقع اتقان تام ويكون مسؤلا عن النتيجة البرمجية بشكل مكتمل .. وهو يحتاج للعمل تحت بيئه الخادم او السيرفر نظرا لان المتصفح العادي لا يستطيع فهم وتطبيق كود البرمجه .. ومن هنا ظهر الخادم المحلي ( لوكل هوست ) فهو الطريق الذي سهل علي مطوري الويب استعراض تطبيقاتهم بسهولة ..


تمام تمام .. انا فاهم تحسبني غبي !؟ :rolleyes: .. اذن مصمم الويب لا يعلم شئ عن البرمجة والمطور لا يعلم شئ عن التكويد وكلا منهم يعمل في جانبه .. صحيح ؟؟

خطأ - لقد اخبرتك ان مصمم الويب يجب ان يتقن لغات التكويد ولم انفي توجب معرفته بلغات البرمجة والعكس صحيح بالنسبة للمطور .. كما رأيت معي مطوري الويب ومصممي الويب وجهان لعمله واحده .. فهم يكملون بعضهم البعض ليخرج الينا الموقع بشـكله المتكامل .. فيجب ان يكون كلا منهم علي درايه ولو بسيطة بعمل الاخر .. فمطور الويب يحتاج الي بعض اكواد الـ html حتي تظهر نتائجه نظرا لان المتصفح لا يستعرض الا لغات التكويد فقط .. ومصمم الويب ايضا يحتاج ان يكون علي درايه ولو بسيطة بلغات البرمجة فهو من سيصنع القالب المسؤل عن الشكل ليتم تركيبة علي البرنامج .. وكيف سيفعل ذلك من دون ان يكون علي درايه سابقة باكواد البرمجة الاساسية ..


احس حالي غبي :o - اذن ماذا تقصد بأن المتصفح لا يعرض الا لغه التكويد فقط !؟

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


وربي انك غبي ولا تفهم شئ :p - كيف تقول ان لغه البرمجة مغلقه المصدر وانا اعرف ان لغه الـ php مفتوحه المصدر للجميع ؟؟

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


لثاني مره احس حالي غبي :mad: - اذن انت تقول ان الكود الذي يعمل عليه المطور محمي من السيرفر بعكس المصمم ؟؟

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


اخيرا استنتاج صحيح :cool: - اذن لا يستطيع ان يعمل المصمم او المطور بشكل مستقل .. صحيح ؟؟

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


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

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

الاحتمال الاول : ستصبح المواقع تقدم خدمات جليله ورائعه ولكن ستبعث علي الملل فهي عباره عن كلمات فقط لا الوان ولا تنسيق ولا شكل فما فائده الخدمات والزوار يطفشون من الموقع من شده الملل ..

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

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

اشـكرك علي المعلومات القيمة .. رغم انك خربت لي مخي :p
لا شـكر علي واجب ^_^

انتهي المدخل وارجو ان يكون بسيط وسـهل ولم يبعث علي الملل ..
والي اللقاء في درس قادم ان شاء الله ..

ارجو عدم النقل خارج مكسات .. فانا اقدم الشـرح فقط من اجل الاعضاء والزوار .. ولا اسمح بالنقل الا بذكر المصدر ( منتديات مكسات ) كحد ادني ..



ما شاء الله شيء منتهى الابدآع .. والله عالم تصميم الموآقع للعباقرة :d ..
للصرآحة انا وصلت لمنتصف الشرح وبعد كدة ضعت .. :) لكن سأعود للمطالعة مجدداً وبتركيز اكبر ..

.
.

بورون
03-03-2011, 08:48
ما شاء الله شيء منتهى الابدآع .. والله عالم تصميم الموآقع للعباقرة :d ..
للصرآحة انا وصلت لمنتصف الشرح وبعد كدة ضعت .. :) لكن سأعود للمطالعة مجدداً وبتركيز اكبر ..

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

X100
04-03-2011, 00:10
جميل جداً ، مُشترك معكم ..
وكبداية نجيب على الاسئلة :



1 - أي نوع من الستايلات / القوالب هو الأفضل، المتمدد (Liquid)، أم الثابت (Fixed) ؟.

2 - على أي أساس يتم تصميم شعار الموقع ؟

3 - إذا كثرت الصور في الصفحة، هل يؤثر ذلك على خفة التصميم ؟ وكيف نتفاداها ؟

4 - حتى يكون التصميم احترافياً، أيجب علينا استخدام Photoshop ؟

5 - كيف تجعل تصميمك يدل على محتوى موقعك ؟

6 - هل من الجيد الاعتماد بشكل كلي على يرنامج مثل DreamWeaver, Microsoft Expression Web ؟

1 - من ناحية " الأفضلية " فهي تتجه حتماً الى المتمدد ، لأنه بسيط وسهل التصميم ويتناسق مع كل مقاس الشاشات تقريباً،
لكن من ناحية جمال التصميم فهي على حسب شكل الستايل . بالنهاية كلا النوعين جيدة بالنسبة لي ::جيد::

2 - على حسب محتوى الموقع .

3 - طبعاً يؤثر ، نتفاداها بتقليل حجمها وتحويل الصور قليلة الألوان الى gif ، لكي لا يفقد التصميم جماله .

4 - لا اظن ذلك ، لكن أغلب الستايلات تُصمم بالفوتوشوب .
وهناك بعض الستايلات تصمم بالالستريتر اذا كانت فكتورية .
وايضاً هناك من يستخدم اكثر من برنامج ، كالفوتوشوب و الفلاش مثلآ ..لكي يصنع ستايل فلاشي !

5 - بإضافة صور او كلمات تدل وتجذب الشخص الى الموقع .

6 - لا اعلم .

وشكراً على الدورة ^_^

بورون
04-03-2011, 15:11
x100
أجوبتك جميلة، باستثناء السؤال ٤، ٥.
أما ٦ فستتعلم معنا بإذن الله.
بالنسبة للسؤال الرابع، فأنا لا أقصد الفوتوشوب بحد ذاته، بل أقصد كل البرامج الأخرى كالفيرووركس، اليستريتور، جيمب وغيرها
ما أقصده، هل التصميم الاحترافي هو الذي تستخدم فيه برامج تحرير الصور ؟

Spy Fox
04-03-2011, 21:57
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله تعالى وبركاته ومغفرته

جزاكم الله تعالى خي الجزاء وجعل هذا العمل في ميزان حسناتكم
مشترك بإذن الله تعالى
بالتوفيق إن شاء الله

H A T S H Y
05-03-2011, 17:04
http://img193.imageshack.us/img193/599/78246214.jpg
بسـم الله الرحمن الرحيم ..

اليوم سنبدأ اولي الدروس الفعليه لبناء صفحه ويب بمعاير قياسيه ..
الدرس بسيط جدا .. وهو يخـص وسم وحيد ولكنه اساسي في بناء صفحه ويب سليمه ومطابقه للمعاير ..
وطريقه سـرد الدروس ان شاء الله ستكون بترتيب مكونات صفحه الويب .. كما شـرح الاخ الكريم Z-ONE (http://www.mexat.com/vb/member.php?515957-Z-ONE) في الدرس التمهيدي ..
الان ننتقل مباشره الي الدرس ..



http://img683.imageshack.us/img683/3140/31407468.jpg

H A T S H Y
05-03-2011, 17:20
http://img291.imageshack.us/img291/303/91943717.jpg
وسم التصريح او وسم التعريف كما يلقبه البعض هو اولي مكونات صفحة الويب القياسيه .. اي انه قبل اي شئ .. ويجب ان لا يسبقه شئ مهما كان .. ويكتب الوسم هكذا تماما <!DOCTYPE> ويجب ان تكون الحروف كبيره " كابيتال " كما هي دون تغير ..
وهو الوسم الوحيد الذي لا يتم اغلاقه في صفحه الويب ..
والهدف منه انه يحدد للمتصفح ماهي نوع صفحه الويب التي سيعرضها .. وما هي معاير تلك الصفحة ..
وهنا يجب ان نطرح سؤالا مهما ..

- ماهي انواع صفحه الويب ؟؟
هنـاك نوعان من الصفحات .. الاولي HTML .. والثانيه XHTML .
والفرق بين النوعين ليس كبيرا جدا فالمعاير متقاربه الي حد كبير .. والنوع الثاني من الصفحات ينحدر بالاساس من النوع الاول .. ولقد تم اصدار هذا النوع الثاني حتي يتكامل بشكل اكبر مع صفحات الـ XML ..



http://img683.imageshack.us/img683/3140/31407468.jpg

H A T S H Y
05-03-2011, 17:58
http://img52.imageshack.us/img52/9666/42324527.jpg
رغم اختلاف اصدارات النوعان هناك معاير اساسيه بينهم .. وهي المعاير الاكثر انتشارا ..
اصدار الـ XHTML الاول واصدار الـ HTML قبل الاخير وهو اصدار 4.1 متفقين علي معاير اساسيه .. وهي :
Strict , Transitional , Frameset

النـوع الاول : DTD HTML Strict
وهي تعني المعاير الصارمه .. ينصح بها للمحترفين .. فهي لها قوانين صارمه وتتطلب وقد تجبر علي فصل الشكل عن التنسيق .. لذلك ينصح معها بالـ Css ..

النوع الثاني : DTD HTML Transitional
وهي تعني المعاير الانتقاليه .. هي معاير تقارب علي الاختفاء نهائيا .. ينصح بها في حال استخدام اسلوب النمط الداخلي .. بمعني انك لن تستخدم ملفات Css خارجيه وبشكل منفصل ..

النوع الثالث : DTD HTML Frameset
وهي تعني معاير الاطارات .. وهي ايضا معاير تقارب علي الاختفاء نهائيا .. وينصح بها في حال استخدام وسم الاطارات بكثره بحيث يظهر العديد من الصفحات داخل بعضها البعض .. وقد قل استخدامة بشده بعد ظهور ما يسمي بالـ Ajax

ملحوظه : DTD تعني Document Type Definition اي نمط تعريف المستند ..

ولن نتطرق الي الاصدار الخامس من صفحات الـ HTML لانه مازال تجريبي حتي الان ويضم العديد من الاوسمه الجديده ..


http://img683.imageshack.us/img683/3140/31407468.jpg

H A T S H Y
05-03-2011, 18:31
http://img850.imageshack.us/img850/3636/83558047.jpg
والان ننتقل للامثـله مباشره .. وستظهر لكم شـكل كود التصريح في نوعي الصفحات باصدارتهم المختلفه ..

-- اولا : صفحات من نوع HTML الاصدار 4.1 :-

1 - " strict " وسم التصريح بالمعاير الصارمه ...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">


2 - " Transitional " وسم التصريح بالمعاير النتقاليه ...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">


3 - " Frameset " وسم التصريح بالمعاير النتقاليه ...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">



-- ثانيا : صفحات من نوع XHTML الاصدار 1.0 :-

1 - " strict " وسم التصريح بالمعاير الصارمه ...


<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


2 - " Transitional " وسم التصريح بالمعاير النتقاليه ...


<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


3 - " Frameset " وسم التصريح بالمعاير النتقاليه ...


<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">


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




http://img683.imageshack.us/img683/3140/31407468.jpg

H A T S H Y
05-03-2011, 18:37
http://img46.imageshack.us/img46/2564/62984786.jpg
وفي نهايه الدرس .. افضل ان اوضح ان هذا الدرس ورغم بساطته الا انه مهم جدا ..
وهو لا يحتاج الي تطبيق .. نظرا لان تطبيقه لن يظهر اي شئ داخل الصفحه ..
وسيتم التطبيق ان شاء الله بدايه من الدرس الثالث ..
اتمني ان يكون الدرس واضحا ومفيدا للجميع ..
والي اللقاء ان شاء الله في الدرس القادم ..
دمتم جميعا بخير وصحه ..


في امـان الله .. ومع تحيـاتي الخاصه للجميع ..

بورون
05-03-2011, 19:17
ممتاز :)
هاقد اقتربنا من الدروس التطبيقية :D

سيتم شرح وسم Meta بإذن الله في الدرس القادم (يوم الاثنين أو الثلاثاء بإذن الله)

ونأسف على التأخر في طرح الدروس بسبب الانشغال قليلاً :)

Ŧђễ ḿάş
05-03-2011, 19:38
شكراً اخي~Hatshy
على الدرس :D
وبأنتضار الدروس التطبيقية^^

T E C H N O
06-03-2011, 18:10
السلام عليكم و رحمة الله ~
آسف راح ارجع للدروس القديمة لان جهازي كان متعطل و ما قدرت اشارك :d


1 - أي نوع من الستايلات / القوالب هو الأفضل، المتمدد (Liquid)، أم الثابت (Fixed) ؟.لكل منها سيلبياته و ايجابياته ~
الثابت يكون جميل جدا في حالة الشاشات الصغيرة [ 1024×768 ( 17" ) أو اصغر ] لكنه يكون سيئا اذا دخلت الموقع من شاشة كبيرة , حيث سيتظهر لك الخلفية كبيرة و قد تظهر أكبر من محتوى الموقع نفسه مما ينقص من جمال الموقع ~
المتمدد , كمان اذا كان حجم الشاشة كبير راح يظهر فراغ كبير بالتصميم ما يقدر يتجنبه إلا المصممين المحترفين , و لكن اعتقد لو انحطت صورة بالوسط مع نقطتي تمدد و صورتين عند الاطراف راح تغطي من الفراغ
http://img819.imageshack.us/img819/2007/77462074.gif
لهذا افضل المتمدد :d


2 - على أي أساس يتم تصميم شعار الموقع ؟أكيد على حسب محتوى و تخصص الموقع نفسه و كذلك إختيار الألوان ~


3 - إذا كثرت الصور في الصفحة، هل يؤثر ذلك على خفة التصميم ؟ وكيف نتفاداها ؟اكيد تؤثر , يمكن تفاديها بحفظ الصور بصيغة خفيفة مثل Gif أو انقاص الجودة قليلاً ( قليلاً بحيث لا يمكن للمشاهد ان يلاحظ الفرق ) , و كذلك يمكن استخدام تقنيات الـcss فهى اسرع في التصفح < مع اني ما اعرف عنها شيء غير فوائدها :d


4 - حتى يكون التصميم احترافياً، أيجب علينا استخدام Photoshop ؟اعتقد اجابتي بتكون نعم , الفوتوشوب صار اساسي بكل شي , في عالمنا العربي ما اعتقد في مصمم يستغني عن الفوتوشوب في اعماله , لكن يمكن حدوث هذا في الغرب :d


5 - كيف تجعل تصميمك يدل على محتوى موقعك ؟الألوان و الشكل و الشعار , ما اعتقد ممكن نصمم موقع رياضي و نحط في شعاره صورة شجرة :D


٦ - هل من الجيد الاعتماد بشكل كلي على يرنامج مثل DreamWeaver, Microsoft Expression Web ؟من ناحية التعلم , فلابد من ان يكون المصمم ملماً بكل لغات البرمجة , و لو بجزء بسيط منها 50% على الاقل :D , لكن من اذا كان يدري بلغات البرمجة فلا مشكلة في ذلك , مع العلم ان استخدام برامج متعددة في تصميم الموقع قد يخرجك بتصميم رائع مع وجود كثير من الأخطاء التى يجب اصلاحها بعد الانتهاء .



مثلاً حجم الفيديو الاصلي 100 ميجا ، استطيع تحويله إلى 2 ميجا

و هذا سيساعد اصحاب الاتصالات الضعيفة

مارأيكم ::جيد:: ؟بالله ثقفنا معك :جرح: كيف تضغطته لهالدرجة :ميت:


راح اطلع ععلى الدروس الباقية إن شاء الله ~
و اتمني تقبولني طالب بينكم :D

بورون
07-03-2011, 11:01
لكل منها سيلبياته و ايجابياته ~
الثابت يكون جميل جدا في حالة الشاشات الصغيرة [ 1024×768 ( 17" ) أو اصغر ] لكنه يكون سيئا اذا دخلت الموقع من شاشة كبيرة , حيث سيتظهر لك الخلفية كبيرة و قد تظهر أكبر من محتوى الموقع نفسه مما ينقص من جمال الموقع ~
المتمدد , كمان اذا كان حجم الشاشة كبير راح يظهر فراغ كبير بالتصميم ما يقدر يتجنبه إلا المصممين المحترفين , و لكن اعتقد لو انحطت صورة بالوسط مع نقطتي تمدد و صورتين عند الاطراف راح تغطي من الفراغ
كلامك سليم جداً .
ولكن، ألا يمكننا تصميم قالب ثابت متمدد ؟ >>> حاول فهمها :)



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


اكيد تؤثر , يمكن تفاديها بحفظ الصور بصيغة خفيفة مثل gif أو انقاص الجودة قليلاً ( قليلاً بحيث لا يمكن للمشاهد ان يلاحظ الفرق ) , و كذلك يمكن استخدام تقنيات الـcss فهى اسرع في التصفح < مع اني ما اعرف عنها شيء غير فوائدها
أخيراً اسم css :d.
إجابة جيدة.
بالنسبة لسي اس اس، سنشرحها قريباً بإذن الله.


اعتقد اجابتي بتكون نعم , الفوتوشوب صار اساسي بكل شي , في عالمنا العربي ما اعتقد في مصمم يستغني عن الفوتوشوب في اعماله , لكن يمكن حدوث هذا في الغرب
كلامك ممتاز، منجد صعب الواحد يسيب الفوتوشوب في تصميم بعض الأجزاء من الصفحة وليس كلها :)
مثلاً بالتدرجات، يمكننا عملها بـcss 3، الظلال كذلك...إلخ.



الألوان و الشكل و الشعار , ما اعتقد ممكن نصمم موقع رياضي و نحط في شعاره صورة شجرة

يمكن :d
قد تدل على الطبيعة :d <<< المخ ضارب
إجابتك سديدة، وأعتقد أن الأغلبية قد أجابت بشكل ممتاز على هذا السؤال :d.



من ناحية التعلم , فلابد من ان يكون المصمم ملماً بكل لغات البرمجة , و لو بجزء بسيط منها 50% على الاقل , لكن من اذا كان يدري بلغات البرمجة فلا مشكلة في ذلك , مع العلم ان استخدام برامج متعددة في تصميم الموقع قد يخرجك بتصميم رائع مع وجود كثير من الأخطاء التى يجب اصلاحها بعد الانتهاء .
ماشأن لغات البرمجة هنا ><
css, html ليستا لغات برمجة على الإطلاق، فـhtml، لغة هيكلة، والأخرى لغة تنسيق.
قد يخرجني ؟ بل حتماً سيخرجني بتصميم مليء بالأخطاء :).



راح اطلع ععلى الدروس الباقية إن شاء الله ~
و اتمني تقبولني طالب بينكم
بالطبع :)، مرحباً بك بيننا.

T E C H N O
07-03-2011, 11:14
كلامك سليم جداً .
ولكن، ألا يمكننا تصميم قالب ثابت متمدد ؟ >>> حاول فهمها :)

ثابت في بعض المناطق و متمدد في مناطق آخرى ؟ :موسوس:


كلامك ممتاز، منجد صعب الواحد يسيب الفوتوشوب في تصميم بعض الأجزاء من الصفحة وليس كلها :)
مثلاً بالتدرجات، يمكننا عملها بـcss 3، الظلال كذلك...إلخ.


طبعاً ما ممكن يتكون تصميم الموقع من تدرجات و ألوان فقط , لابد من تصاميم لتحسن من شكل الموقع


ماشأن لغات البرمجة هنا ><
css, html ليستا لغات برمجة على الإطلاق، فـhtml، لغة هيكلة، والأخرى لغة تنسيق.
قد يخرجني ؟ بل حتماً سيخرجني بتصميم مليء بالأخطاء :).


المهم يعني الـhtml مهما كانت :ميت:


بالطبع :)، مرحباً بك بيننا.

شكراً :)

بورون
08-03-2011, 12:18
http://i872.photobucket.com/albums/ab284/roboowsy/BANNER-1.png
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته

ماهو وسم Meta ؟

وسم Meta خاص بالمعلومات عن ملف HTML معين، فمثلاً، تضع فيه اسم الكاتب، كلمات مفتاحية (لمحركات البحث)، الترميز، وصف الموقع، آخر تعديل على الملف.


كتابة وسم Meta.
وسم meta هو وسم مغلق (يتم إغلاقه في نفس وسم الفتح)، ويكتب هكذا

<meta />

وسم meta يجب أن يحتوي على خااصية content، أما عن الخاصية وكتابتها، سنعرفها بعد قليل.
وهناك بعض الخواص الاختيارية، وهي:
http-equiv
name
بعض الخواص سنتركها إلى مابعد، نظراً لأنها متقدمة قليلاً.

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


أما إن أردت كتابة الكود، فانتظر حتى نشرح الخواص :D.

خاصية http-equiv
هنا تضع مايختص بـhttp-headers، مثل :
content-type
refresh
وغيرها.

خاصية name
لكل شيء اسم، وهنا تضع اسم خواص ميتا، مثلاً:
description
author
keywords
والكثير الكثير.

خاصية content
أهم خاصية، لايستوي meta بدونها، بل يمكنك الاكتفاء بها ولكني لا أنصح بذلك xD
تضع فيها محتوى وسم ميتا، فكيف يكون وسمٌ بلا محتوى ؟

والآن إن اشتعلت حماساً، فإليك أمثلة على وسم Meta، ولكن في الرد التالي :D

بورون
08-03-2011, 12:19
والآن سنأخذ بعض الأمثلة على وسم meta، تذكر أن النسخ واللصق لاينفعانك، وحرصاً على مصالحكم جعلت الأكواد صوراً :D.


اللغة العربية لاتظهرفي المتصفح، اللغة أصبحت مربعات !
لاتقلق، فهنا الكود الذي يحول الترميز إلى ترميز يدعم العربية
http://i872.photobucket.com/albums/ab284/roboowsy/Screenshot2011-03-08at32551PM.png

استخدمنا هنا http-equiv لتحديد نوع الملف كـhtml، ثم جعلنا الترميز utf-8 العالمي الداعم للعربية بشكل ممتاز.

أما إن أردت تحويل زوارك ؤلى موقع آخر، فهذا هو الكود.
http://i872.photobucket.com/albums/ab284/roboowsy/Screenshot2011-03-08at32636PM.png
كذلك هنا استخدمنا http-equiv، وجعلناها على refresh -أي تحديث- ، ويقوم بتحويله إلى مكسات (استبدل http://mexat.com بالموقع الذي تريده) بعد ثانيتين (2 هي عدد الثوان، ويجب عليك وضع الفاصلة المنقوطة بعدها).

واختتم بالمثال المحبوب، وهو الكلمات المفتاحية
http://i872.photobucket.com/albums/ab284/roboowsy/Screenshot2011-03-08at33029PM.png
هنا استخدمنا name ولم نستخدم http-equiv، لأن ليس لها علاقة بـhttp-headers.
أما المحتوى فهو الكلمات المفتاحية وتفصل بينها بفاصلة.

نسيت أن أذكر أن وسم meta يوضع داخل وسم head "^^

أتمنى أن يكون الدرسُ مفهوماً، والسلام عليكم ورحمة الله وبركاته.

وداعاً للنسخ واللصق :)

Master Edward
08-03-2011, 16:32
درس رائع لي عودة للمراجعة :)

H A T S H Y
08-03-2011, 17:56
رائع درس جميل ومميز .. ان شاء الله سنتابع الدرس القادم في خلال يومين ..
سنشرح فيه باقي الاوسام التي تقع تحت وسم <head>
لتبدأ ان شاء الله من الدرس الذي يلحقه التطبيقات .. ^_^

الأمير الأخير
09-03-2011, 12:31
السلام عليكم ورحمه الله وبركاته

اخباركم اعزائي : ان شاء الله تكونوا بأتم الصحه والعافيه

احب ان اقوم بشكر الأخ الفاضل: ~Hatshy على الدرس الأول ولله الحمد تم قراءته وفهمه جيداً

واحب ايضاً ان اقوم بشكر الأخ الفاضل: Z-ONE على الدرس الثاني تم قراءته وفهمه جيداً ولله الحمد

وفي انتظار الدرس الثالث وبالتوفيق لكم والله يقويكم

في امان الله :)

Grigio
11-03-2011, 11:22
1 - أي نوع من الستايلات / القوالب هو الأفضل، المتمدد (Liquid)، أم الثابت (Fixed) ؟.
ما فهمت عليك .. ولا عندي خبرة في هذه الامور ( خبرتي سطحية جداً فقط ) , علشان هل السبب ماهي أنواع الستايلات وماهي القوالب ؟
2 - على أي أساس يتم تصميم شعار الموقع ؟
يٌعتبر الشعار رمز لكل شي بحيث لو وضعت شعار في مكان ما فأعرف أنو الموقع هنا ~]
3 - إذا كثرت الصور في الصفحة، هل يؤثر ذلك على خفة التصميم ؟ وكيف نتفاداها ؟
هو يؤثر ,, بس أعتقد لو نصغر الجودة التصميم يمكن نتفادها , بس الجودة ليست قويه
4 - حتى يكون التصميم احترافياً، أيجب علينا استخدام Photoshop ؟
نعم ولاسيما في التقطيع ^ ^ ~ ]
5 - كيف تجعل تصميمك يدل على محتوى موقعك ؟
.............................. ~ ]
٦ - هل من الجيد الاعتماد بشكل كلي على يرنامج مثل DreamWeaver, Microsoft Expression Web ؟
ديم ويفر كأساسيات وشبه متوسط أما الميكروسوف ما تعرفت عليه ~.~

وشكراً على الدرس الأول والثاني وبالإنتظار الدرس الثالث + لو مفتوح باب الإنظمام كطالب فأتمنى أكون منهم ~ ]

H A T S H Y
12-03-2011, 11:21
http://img193.imageshack.us/img193/599/78246214.jpg
بسم الله الرحمن الرحيم ..
اهلا بكم جميعا مجددا ..
اليوم نضع بين ايديكم اخر الدروس الغير تطبيقيه بأذن الله .. وكما شرحنا سابقا هي ليست تطبيقة ولكنها مهمه جدا ..
لانها ستظل معكم في كل مره تحاولون بناء صفحه ويب جديده ..
واليوم سنشـرح ثـلاثه وسوم مهمه جدا .. وهي وسم الارتباط .. ووسم الستايل .. ووسم السكربت ..
والان ننتقل الي الدرس مباشره ..

http://img683.imageshack.us/img683/3140/31407468.jpg

H A T S H Y
12-03-2011, 12:29
http://img852.imageshack.us/img852/9541/53421090.jpg

http://img850.imageshack.us/img850/7062/98378073.jpg
ماذا يعني وسم الارتباط .. ؟
وسم الارتباط وكما يظهر من اسمه يعني ارتباط اضافه خارجيه بصفحه ويب معينه ..
ويكتب الوسم هكذا </ link> وكما يظهر من شكله انه بأغلاق تلقائي ...
ومن المميز في هذا الوسم انك عن طريقة تستطيع ربط صفحات خارجيه اخري بانواع مختلفه مثل الانواع التاليه ..
Css ، xml , Xhtml , Rss
وايضا الوسم له استخدامات اخري ليست متعلقه بصفحات خارجيه ..
ويتم تعريف كل نوع من الانواع المختلفه داخل الوسم عن طريق التعريف type كما يظهر في الانواع التاليه..

type="image/x-icon" - 1
وهو تعريف صوره المفضله والتي تظهر بجانب عنوان الموقع في المتصفح .. وتظهر ايضا في قائمه المفضلة وتظر في حاله حفظ صفحه من الموقع علي الجهاز .. وتظهر ايضا في قائمه ابدا اذا وضعت بها الصفحه .. ويكتب الكود هكذا تماما ..


<link rel="shortcut icon" href="http://www.yoursite.com/favicon.ico" type="image/x-icon" />
مع مراعاه تغير رابط الايقونه الي رابط الايقونه علي موقعك .. وايضا يجب مراعاه حجم الايقونه يجب ان يكون 16×16

type="text/css" - 2
وهو تعريف صفحات الـ Css الخارجيه ..
ويكتب الكود هكذا تماما ..


<link rel="stylesheet" type="text/css" href="http://www.yoursite.com/style.css"/>
وذلك مع مراعاه تغير الرابط ايضا الي رابط موقعك ..

----

وهناك ايضا انواع اخري من التعريفات ولكن هذه هي الاهم والاشهر وكثيره الاستخدام ..
وكما يظهر من الاكواد امامكم ان هناك متحكم اخر بتوجيه الارتباط وهو التعريف rel وهو يوضح وظيفه الاضافه .. وهذا التعريف له العديد من الانواع تختلف باختلاف نوع الاضافه ..





http://img683.imageshack.us/img683/3140/31407468.jpg

H A T S H Y
12-03-2011, 12:57
http://img171.imageshack.us/img171/1174/62642143.jpg


وسم ستايل يمثل الاضافه الداخليه للغه الـ Css ويكتب الوسم هكذا




<style type="text/css">
وهنا تكون الاكواد
</style>


وسيتم ان شاء الله شـرح الاكواد في دروس الـ Css...

وسم سكربت .. هو يمثل الاضافات من لغه الـ javascript سواء كانت داخليه او خارجيه ..
ويكتب هكذا .. اولا في حاله الاضافه الداخليه ..




<script type="text/javascript">
وهنا يكتب الكود
</script>


وسيتم ان شاء الله شرح الاكواد في دروس الاضافات من الـ javascript...

ثانيا في حاله الاضافه الخارجيه ..




<script type="text/javascript" src="http://www.yoursite.com/java.js"></script>


مع مراعاه تغير رابط الموقع الي رابط موقعك ..

وهنا نكون قد انتهينا من الاوسمه التي تقع تحت رأس الصفحه او وسم <head> ...



http://img683.imageshack.us/img683/3140/31407468.jpg

H A T S H Y
12-03-2011, 13:03
http://img861.imageshack.us/img861/2121/79866155.jpg
والان بعد ان انتهينا من الجزء الاول من صفحه الويب .. وهو التعريفات والاضافات بشكل كامل .. اعرض عليكم الان كيف يكون شكل الصفحه الهيكلي حتي درسنا هذا ..
http://img858.imageshack.us/img858/5153/hikal.png
وكما يظهر امامكم هذا هو شـكل الصفحه وانتم الان مستعدون لبناء هيكل سليم لصفحه ويب قياسيه .. وكل ما سندرسه في الدروس القادمه هو الجزء المتعلق بالمحتوي فقط .. نظرا لان المحتوي هو الذي يظهر في الصفحه ويحتاج الي تطبيق فعلي ..



http://img683.imageshack.us/img683/3140/31407468.jpg

H A T S H Y
12-03-2011, 13:08
http://img46.imageshack.us/img46/2564/62984786.jpg
وفي نهايه الدرس احب التنويه والتأكيد علي ان الاضافات الخارجيه علي صفحه الويب .. لن تظهر بمجرد وضع الوسم .. فيجب ان يكون الربط عن طريق ملف خارجي مكود ومعد باللغه الاخري .. لذلك لن تفيد الوسوم الاختياريه الي ان تكون لديكم معرفه جيده باللغات الاخري ..
وهكذا تنتهي الدروس الغير تطبيقيه .. والي اللقاء مع اول الدروس التطبيقيه ان شاء الله مع اخي الكريم Z-ONE وسيشرح فيه وسوم النصـوص المختلفه ..
واتمني ان يكون الدرس واضح وبسيط للجميع .. وبالتوفيق ان شاء الله ..


في امــان الله ...

D.E.Λ.T.H
12-03-2011, 14:09
تم فهم الشرح و مراجعته ^^
الرسم الهيكلي فك كل الألغاز اللي عقدتني في الدروس السابقة
تسلم هاتشي على الدروس و بانتظار الدروس التطبيقية القادمة ;) من الاخ z-one
بالتوفيق..

بورون
12-03-2011, 16:06
شكراً ل أخي Hatshy
ولكن أحب التنبيه في مخطط html.
meta هو وسم يغلق في ذاته، لذلك لاوجود لوسم الإغلاق
وبهذا، يكون الوسم <meta /> :)

X100
12-03-2011, 16:19
رااائع جداً ، متابع معكم .. واصلوا ::جيد::

H A T S H Y
12-03-2011, 16:29
شكراً ل أخي Hatshy
ولكن أحب التنبيه في مخطط html.
meta هو وسم يغلق في ذاته، لذلك لاوجود لوسم الإغلاق
وبهذا، يكون الوسم <meta /> :)



نعم بالفعل اشـكرك علي الملاحظة والتنبيه .. تم التعديل ..
وفي انتظار درسك القادم ان شاء الله .. ^_^

Master Edward
12-03-2011, 18:48
http://img193.imageshack.us/img193/599/78246214.jpg
بسـم الله الرحمن الرحيم ..

اليوم سنبدأ اولي الدروس الفعليه لبناء صفحه ويب بمعاير قياسيه ..
الدرس بسيط جدا .. وهو يخـص وسم وحيد ولكنه اساسي في بناء صفحه ويب سليمه ومطابقه للمعاير ..
وطريقه سـرد الدروس ان شاء الله ستكون بترتيب مكونات صفحه الويب .. كما شـرح الاخ الكريم Z-ONE (http://www.mexat.com/vb/member.php?515957-Z-ONE) في الدرس التمهيدي ..
الان ننتقل مباشره الي الدرس ..



http://img683.imageshack.us/img683/3140/31407468.jpg


متأخر جداً :p جى على وقت اجازتي مخصص لنفسي اسبوع اجازة للراحة من اعباء العمل
سأعود للـتعليق والان سأقوم بالمطالعة :)

.
.

شكراً على الشرح

fFanan
12-03-2011, 23:38
" السلام عليكم ورحمة الله تعالى وبركاته "

ماشاء الله ، تبارك الله ،

موضوع كبير حقيقتا ً و أشكر القائمين عليه ، و مشارك بإذن الله عزوجل ،

مع تحياتي ~

" في أمان الله و حفظـه "

Master Edward
13-03-2011, 09:10
http://img52.imageshack.us/img52/9666/42324527.jpg
رغم اختلاف اصدارات النوعان هناك معاير اساسيه بينهم .. وهي المعاير الاكثر انتشارا ..
اصدار الـ XHTML الاول واصدار الـ HTML قبل الاخير وهو اصدار 4.1 متفقين علي معاير اساسيه .. وهي :
Strict , Transitional , Frameset

النـوع الاول : DTD HTML Strict
وهي تعني المعاير الصارمه .. ينصح بها للمحترفين .. فهي لها قوانين صارمه وتتطلب وقد تجبر علي فصل الشكل عن التنسيق .. لذلك ينصح معها بالـ Css ..

النوع الثاني : DTD HTML Transitional
وهي تعني المعاير الانتقاليه .. هي معاير تقارب علي الاختفاء نهائيا .. ينصح بها في حال استخدام اسلوب النمط الداخلي .. بمعني انك لن تستخدم ملفات Css خارجيه وبشكل منفصل ..

النوع الثالث : DTD HTML Frameset
وهي تعني معاير الاطارات .. وهي ايضا معاير تقارب علي الاختفاء نهائيا .. وينصح بها في حال استخدام وسم الاطارات بكثره بحيث يظهر العديد من الصفحات داخل بعضها البعض .. وقد قل استخدامة بشده بعد ظهور ما يسمي بالـ Ajax

ملحوظه : DTD تعني Document Type Definition اي نمط تعريف المستند ..

ولن نتطرق الي الاصدار الخامس من صفحات الـ HTML لانه مازال تجريبي حتي الان ويضم العديد من الاوسمه الجديده ..


http://img683.imageshack.us/img683/3140/31407468.jpg


~Hatshy



شكراً لك على الدرس ..
تم قراءة وفهمه بدون اي معاناة او مشكلة ..
اجمل مافي الامر اني اخيراً عرفت مالفرق والغرض من معايير ( Strict , Transitional ) .. لكن بالنسبة لـ ( Frameset ) لم انتبه على وجودة في الدريم ويفر ..

وبالنسبة لـ ( HTML Strict ) عندي سؤال < :لعق:

ممكن توضح لي ماذا تقصد بفصل الشكل عن التنسيق .؟ مالشكل ومالتنسيق ؟
ايضاً في ( HTML Transitional ) مالمقصود بإسلوب النمط الداخلي ؟

حاب افهم النقطتين بشكل اوضح وايضاً ابسط > ما احب احس اني مشوش :صمت:
> من قالك تنام في نص الحصة :غياب:

وعذراً للأسئلة المزعجة :مرتبك:

.
.



والآن سنأخذ بعض الأمثلة على وسم meta، تذكر أن النسخ واللصق لاينفعانك، وحرصاً على مصالحكم جعلت الأكواد صوراً :D.


اللغة العربية لاتظهرفي المتصفح، اللغة أصبحت مربعات !
لاتقلق، فهنا الكود الذي يحول الترميز إلى ترميز يدعم العربية
http://i872.photobucket.com/albums/ab284/roboowsy/Screenshot2011-03-08at32551PM.png

استخدمنا هنا http-equiv لتحديد نوع الملف كـhtml، ثم جعلنا الترميز utf-8 العالمي الداعم للعربية بشكل ممتاز.

أما إن أردت تحويل زوارك ؤلى موقع آخر، فهذا هو الكود.
http://i872.photobucket.com/albums/ab284/roboowsy/Screenshot2011-03-08at32636PM.png
كذلك هنا استخدمنا http-equiv، وجعلناها على refresh -أي تحديث- ، ويقوم بتحويله إلى مكسات (استبدل http://mexat.com بالموقع الذي تريده) بعد ثانيتين (2 هي عدد الثوان، ويجب عليك وضع الفاصلة المنقوطة بعدها).

واختتم بالمثال المحبوب، وهو الكلمات المفتاحية
http://i872.photobucket.com/albums/ab284/roboowsy/Screenshot2011-03-08at33029PM.png
هنا استخدمنا name ولم نستخدم http-equiv، لأن ليس لها علاقة بـhttp-headers.
أما المحتوى فهو الكلمات المفتاحية وتفصل بينها بفاصلة.

نسيت أن أذكر أن وسم meta يوضع داخل وسم head "^^

أتمنى أن يكون الدرسُ مفهوماً، والسلام عليكم ورحمة الله وبركاته.

وداعاً للنسخ واللصق :)



Z-ONE



يعطيك العافية :)
شرح رائع كالعادة

:لقافة: كما لاحظت فالـ ( Meta ) مهم جداً خصيصاً فيما يخص الترميز :) اتذكر انا هناك منتدى اتصفحة بأستمرار لكن عندما اقوم بعمل تحديث في نفس الصفحة تعود كل الكلمات مربعات .. :p

لم اكن اعلم ( محركات البحث :بكاء: ) ..
الحقيقة انا ايضاً من الأشخاص تبع النسخ واللصق << فكرنا اننا نختصر الوقت :تعجب: << فالح :ميت:
فلم اكن اهتم بهذا الوسم على الأطلاق :D ما ياخذ مساحة في الصفحة فكُنت لا اعطيه اي اهمية :جرح: ..
اليوم اقدم اعتذاري الشديد له ولكل الأوسم التي لم اكن اذرك قيمتها مسبقاً :بكاء: اعذروني لجهلي ..
بأذن الله سأحاول الاهتمام اكثر فأكثر بكم فالان املك الرغبة في التعلم والأحتراف :مكر:

شكراً لك أخي على الشرح المُمـيز
جميل مع الوقت اشعر بأن عالم تصميم المواقع مليء بالمتعة :)

.
.

سأعود للأطلاع لاحقاً على بقية الدروس ::سعادة::
دمتم بخـير

H A T S H Y
13-03-2011, 09:58
~Hatshy

وبالنسبة لـ ( HTML Strict ) عندي سؤال < :لعق:

ممكن توضح لي ماذا تقصد بفصل الشكل عن التنسيق .؟ مالشكل ومالتنسيق ؟
ايضاً في ( HTML Transitional ) مالمقصود بإسلوب النمط الداخلي ؟

حاب افهم النقطتين بشكل اوضح وايضاً ابسط > ما احب احس اني مشوش :صمت:
> من قالك تنام في نص الحصة :غياب:

وعذراً للأسئلة المزعجة :مرتبك:






اهلا بـك .. لا شـكر علي واجب ..
بالنسـبه لسؤالك .. وللاجابه بشكل دقيق .. يجب توضيح شئ اولا .. وهو ان نحدد ماهي وظيفة Html بالضبط ..
الوظيفه لهذة اللغه ليس للتحكم في شكل الصفحه .. وانما للتحكم في البنية فقط .. بمعني التحكم في تنسيق العناصر داخل الصفحه ..
واللغه لا تعطيك اختيارات كثيره للشـكل فهي محدوده بشكل كبير .. لذلك قد تحتاج الي مساعده لغه اضافيه لتحسين شـكل الصفحه ..
وذلك من خلال الـ Css .. فهي لغه نشأت وصممت من اجل التحكم الدقيق في الشـكل وفي ادق التفاصيل ..
وحين نتحدث عن الـ Css لن يكفي عده سطور .. ولكن سأشرح لك سـريعا ماذا يعني النمط الداخلي وماذا يعني فصل الشكل عن التنسيق ..
اذا اردت تطبيق الـ Css لديك 3 طـرق فقط لا غير .. وجميعهم بنفس النتائج ..
الطريقة الاولي .. External style sheet .. وتعني الفصل الخارجي ..
بمعني انك تضع الاكواد متراصه في ملف خارجي وتقوم بربطه عن طريق وسم الارتباط وتعريفه عن طريق الـ Class و الـ ID ..
وهذا هو ما قصدت به فصل الشـكل عن التنسيق .. لذلك يفضل استخدام المعاير الصارمه مع هذا النوع .. وهو Strict ..

الطريقة الثانيه .. Internal style sheet .. وتعني الفصل الداخلي ..
بمعني انك تضع الاكواد متراصه تحت وسم <style> في اعلي صفحه الويب .. ويتعرف عليها المتصفح بسهوله ..
وايضا يتم تعريفه عن طريق الـ Class و الـ ID وهنا يمكن استخدام المعاير الصارمه ولكن مع تحفظات شديده الصرامه ..
لذلك يفضل البعض استخدام المعاير الانتقاليه .. Transitional ..

الطريقة الثالثه .. Inline style sheet .. وتعني التنسيق السطري ..
بمعني انك تضع الكود الخاص بكل جزء في مكانه تحت تعريف style="" داخل الوسم الذي تريده .. فانت لا تحتاج الي تعريف ولا ملفات خارجيه ولا ربط ..
وتضع الشـكل الخاص بكل جزء في مكانه بخصائصه الخاصه .. وكما يتضح من الاسم انه تنسيق سطري .. بمعني انك تعدل بنفسك علي كل سطر ليخرج بشكل يناسبك ..
وهنا يفضل المعاير الانتقاليه .. Transitional

وبالطبع كل طريقة لها ميزاتها وعيوبها واستخداماتها ..
هذا كل شـئ الي الان .. ولا استطيع التعمق اكثر .. وبأذن الله سيتم الشـرح باستفاضه عن الـ Css في دروس قادمه ..
اشـكرك علي التفـاعل وان شاء الله تكون المسأله وضحت ^_^

Master Edward
14-03-2011, 19:53
اهلا بـك .. لا شـكر علي واجب ..
بالنسـبه لسؤالك .. وللاجابه بشكل دقيق .. يجب توضيح شئ اولا .. وهو ان نحدد ماهي وظيفة html بالضبط ..
الوظيفه لهذة اللغه ليس للتحكم في شكل الصفحه .. وانما للتحكم في البنية فقط .. بمعني التحكم في تنسيق العناصر داخل الصفحه ..
واللغه لا تعطيك اختيارات كثيره للشـكل فهي محدوده بشكل كبير .. لذلك قد تحتاج الي مساعده لغه اضافيه لتحسين شـكل الصفحه ..
وذلك من خلال الـ css .. فهي لغه نشأت وصممت من اجل التحكم الدقيق في الشـكل وفي ادق التفاصيل ..
وحين نتحدث عن الـ css لن يكفي عده سطور .. ولكن سأشرح لك سـريعا ماذا يعني النمط الداخلي وماذا يعني فصل الشكل عن التنسيق ..
اذا اردت تطبيق الـ css لديك 3 طـرق فقط لا غير .. وجميعهم بنفس النتائج ..
الطريقة الاولي .. external style sheet .. وتعني الفصل الخارجي ..
بمعني انك تضع الاكواد متراصه في ملف خارجي وتقوم بربطه عن طريق وسم الارتباط وتعريفه عن طريق الـ class و الـ id ..
وهذا هو ما قصدت به فصل الشـكل عن التنسيق .. لذلك يفضل استخدام المعاير الصارمه مع هذا النوع .. وهو strict ..

الطريقة الثانيه .. internal style sheet .. وتعني الفصل الداخلي ..
بمعني انك تضع الاكواد متراصه تحت وسم <style> في اعلي صفحه الويب .. ويتعرف عليها المتصفح بسهوله ..
وايضا يتم تعريفه عن طريق الـ class و الـ id وهنا يمكن استخدام المعاير الصارمه ولكن مع تحفظات شديده الصرامه ..
لذلك يفضل البعض استخدام المعاير الانتقاليه .. transitional ..

الطريقة الثالثه .. inline style sheet .. وتعني التنسيق السطري ..
بمعني انك تضع الكود الخاص بكل جزء في مكانه تحت تعريف style="" داخل الوسم الذي تريده .. فانت لا تحتاج الي تعريف ولا ملفات خارجيه ولا ربط ..
وتضع الشـكل الخاص بكل جزء في مكانه بخصائصه الخاصه .. وكما يتضح من الاسم انه تنسيق سطري .. بمعني انك تعدل بنفسك علي كل سطر ليخرج بشكل يناسبك ..
وهنا يفضل المعاير الانتقاليه .. transitional

وبالطبع كل طريقة لها ميزاتها وعيوبها واستخداماتها ..
هذا كل شـئ الي الان .. ولا استطيع التعمق اكثر .. وبأذن الله سيتم الشـرح باستفاضه عن الـ css في دروس قادمه ..
اشـكرك علي التفـاعل وان شاء الله تكون المسأله وضحت ^_^


وااو جميل جداً :لقافة: الان اتضح لي الأمر بصورة افضل :d ..
شكراً لك وبتطلع لدروسك القادمة :) .. الان سأكمل بقية الشروح التي فاتتني :لعق: ..

.
.

Master Edward
14-03-2011, 20:25
http://img861.imageshack.us/img861/2121/79866155.jpg
والان بعد ان انتهينا من الجزء الاول من صفحه الويب .. وهو التعريفات والاضافات بشكل كامل .. اعرض عليكم الان كيف يكون شكل الصفحه الهيكلي حتي درسنا هذا ..
http://img858.imageshack.us/img858/5153/hikal.png
وكما يظهر امامكم هذا هو شـكل الصفحه وانتم الان مستعدون لبناء هيكل سليم لصفحه ويب قياسيه .. وكل ما سندرسه في الدروس القادمه هو الجزء المتعلق بالمحتوي فقط .. نظرا لان المحتوي هو الذي يظهر في الصفحه ويحتاج الي تطبيق فعلي ..



http://img683.imageshack.us/img683/3140/31407468.jpg


كالعادة شرح مبهر ورائع ..

http://img858.imageshack.us/img858/5153/hikal.png

ألان بعد كل الدروس السابقة :غياب: اصبحت صورة الصفحة اكثر وضوحاً من ذي قبل :D

الان انا قاعد اجري بعض التجارب على اوسم النصوص :صمت: يعني اخذ لنفسي شوية افكار لين يبتدي الدرس الجاي ..
شكراً لك وبترقب الدرس القادم من يد أُستاذنا Z-ONE ..:)

بورون
15-03-2011, 11:19
السلام عليكم ورحمة الله وبركاته
نظراً لضيق الوقت وزحمة الاختبارات، فقد جعلت هذا الدرس بالفيديو ><

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


http://www.youtube.com/watch?v=pX2BDwE6C4Y&feature=channel_video_title

H A T S H Y
15-03-2011, 11:27
السلام عليكم ورحمة الله وبركاته
نظراً لضيق الوقت وزحمة الاختبارات، فقد جعلت هذا الدرس بالفيديو ><

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


http://www.youtube.com/watch?v=pX2BDwE6C4Y&feature=channel_video_title





ما شاء الله ابدعت .. بانتظار باقي اجزاء الدرس .. لبدأ دروس تنسيق البنيه .. ان شاء الله .. ^_^

!!عاشق ساسكي!!
15-03-2011, 12:20
السلام عليكم


اود الاشتراك معكم

وهذي بعض المعلومات

مستوى معلوماتي: مبتدئ جدا في تصميم الويب متوسط في الفوتوشب

سبب الدخول : المعلومات العامة خاصة ان تخصصي القادم هو حاسب ان شاء الله + سأشترك في مسابقة مدرسية باسم جماعتي لأفضل موقع ( هل هناك وقت كافي..؟)

Master Edward
15-03-2011, 13:45
مش مشكلة فيديو او صور المهم الشرح ..
جـاري الاطلاع على الدرس :رامبو: سأعود لاحقاً ان كان لدي اي تعليق ..

دمتم بخـير

L E A Đ E R
15-03-2011, 13:58
ما شاء الله
يعطيكم العافية على المجهود المتواصل لتنشيط الورشة

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

Master Edward
16-03-2011, 08:03
Z-ONE



تسلم ايديك أخي الدرس والشرح الرائع ..
اوسم الدرس هذة المرة لها بداية ونهاية :لقافة: ..
بأستثناء وسم </ br> طبعاً ليس له علاقة بنتسيق النصوص :D
لكن حصلنا على معلومة جديدة على الاقل كتابتة سهله ..

طيب انا طبقت الدرس بنفس الطريقة ,,


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>New Page</title>
</head>

<body>
<b>خط العريض</b>
<br />
<br />
<i>الخط المائل</i>
<br />
<br />
<ins>خط تحت السطر</ins>
<br />
<br />
<del>خط في منتصف السطر</del>
<br />
<br />
<sup>نص اعلى السطر</sup>
<br />
<big>نص كبير</big>
<br />
<br />
<small>نص صغير</small>
</body>
</html>





ما مداني اجرب دمج خصائص التنسيق :p ، لكن فهمت الطريقة ;)
طبعاً بتكرار وسم </ br> عدة مرات نحصل على سطر جديد ::سخرية::
بأنتظار الدرس القادم .. ايضاً لي عودة مجدداً لان عندي شيء لازم اضيفة :)

شكراً مجدداً أخي Z-ONE بالرغم من ضغط الدراسة لديك لكنك لم تقصر
جُـزيت خـيراً .. ارجوا لك دوام التوفيق ::سعادة::

SAM-X
16-03-2011, 09:04
بارك الله فيكم
بس نتمنى وضع الدروس في موضوع منفصل
ليسهل المتابعة
شاكر لكم

المجهووول؟؟؟
16-03-2011, 13:45
ما شاء الله تبارك الرحمن

متابع لكم من بعيد ^_^

سأعود بعد فترة لمراجعة كل الدروس والدورات ^_^

!!عاشق ساسكي!!
23-03-2011, 03:10
السلام عليكم


اود الاشتراك معكم

وهذي بعض المعلومات

مستوى معلوماتي: مبتدئ جدا في تصميم الويب متوسط في الفوتوشب

سبب الدخول : المعلومات العامة خاصة ان تخصصي القادم هو حاسب ان شاء الله + سأشترك في مسابقة مدرسية باسم جماعتي لأفضل موقع ( هل هناك وقت كافي..؟)

.........

بورون
23-03-2011, 15:02
||عاشق ساسكي||
لايوجد أي سبب يمنع التحاقك بالدورة !

بورون
23-03-2011, 15:05
http://i872.photobucket.com/albums/ab284/roboowsy/BANNER-1.png

بسم الله الرحمن الرحيم
أكيد تعرفون سبب التأخير :d ؟

ولأني تأخرت نقصت درجتين ::سخرية::

حسناً، عدت إليكم ومعي درسٌ جديد، يتحدث عن وسوم Heading..
البقية في الفديو :)


http://www.youtube.com/watch?v=bmeYdTT4Dd4&feature=channel_video_title

D.E.Λ.T.H
23-03-2011, 16:08
تسلم على الدرس درس خفيف و جميل ^^
+
تم التطبيق ...

Master Edward
25-03-2011, 19:43
شكراً z-one على الـطرح :)

لي عودة في الغد

بالتوفيق

بورون
28-03-2011, 17:04
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
وسم p يستخدم للفقرات, ويضيف سطراُ قبله وبعده
مثال:

<p>السلام عليكم ورحمة الله وبركاته, أهلا بكم في موقعي.</p>
:p
لو جربته سيظهر كما يلي:

http://i872.photobucket.com/albums/ab284/roboowsy/u.png

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

X100
28-03-2011, 20:09
اخخخ فاتني الكثير >_> .. راح ارجع بعدين جداً :p

Senya Phoenixia
29-03-2011, 13:37
تم اضافة دليل الدروس

يمكنك زيارته عبر النقر هنا (http://www.mexat.com/vb/threads/883124-web-designing-%E2%80%A2-%D9%88%D9%8E%D8%B1%D8%B4%D8%A9%D9%8F-%D8%AA%D9%8E%D8%B5%D9%8E%D9%85%D9%90%D9%8A%D9%85%D 9%8F-%D8%A7%D9%84%D9%85%D9%8E%D9%88%D8%A7%D9%82%D9%90%D 8%B9-%D9%85%D8%B4%D8%B1%D9%88%D8%B9-%D8%B3%D9%84%D8%B3%D9%84%D8%A9-%D8%AA%D8%B9%D9%84%D9%8A%D9%85-%E2%80%A2?p=26491397&viewfull=1#post26491397)

شكراً لإهتمامكم جميعاً

بورون
10-04-2011, 08:17
http://i872.photobucket.com/albums/ab284/roboowsy/BANNER-1.png

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

أعتذر يا إخوتي عن التأخير.
لاتقلقوا، فلم يبقَ إلا شيء يسير..

سنتعامل اليوم مع الصور ، فرجاءً اترك اللعب بالكور ::سخرية::.

يمكننا إضافة الصور بكل بساطة ، فـHTML لهذه المواقف محتاطة :).

فقط اكتب img ، وضع رابط الصورة، وعليك أن تراعي بعض الخصائص المُعَدةِ للضرورة.
وبالمثال يتضح المقال.


<img src = "http://i872.photobucket.com/albums/ab284/roboowsy/BANNER-1.png" alt = "logo" width = "" height = "" />

؟؟: مذهل ، إنه وسم ذاتي الإغلاق !
أجل وبكل تأكيد !

خاصية src تحتوي على رابط الصورة !
أما alt ، فماذا تفعل لو لم تُحمل الصورة ؟
فمحتوى هذه الخاصية يظهر عندما لاتُحمل الصورة بدلاً من أن يعرض مكاناً يدل على أن لا وجود للصورة.

أما width وheight فليستا مهمتين ، فهما للعرض والطول.

انتهى الدرس.

أتودون شرح الجداول ؟ أم الدخول بعد هذا الدرس مباشرة في css ثم بعدها تصميم الواجهة :)؟

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

Senya Phoenixia
11-04-2011, 02:04
^

نفضل دروس css على تصميم الجداول :غياب:

شكراً للطرح عزيزي

D.E.Λ.T.H
11-04-2011, 08:43
تسلم على الدرس أخوي ^^
بالنسبة للجداول :confused: لو تعطينا نبذة مختصرة عنها
و تدمجها مع درس الــ Css >> طرار و يتشرط :جرح:

فارسة الإمارات
11-04-2011, 09:08
شكراً ع الدورة
وان شاء الله استفيد منكم



السلام عليكم ورحمة الله وبركاته
بصفتي مدرساً، سأقوم بطرح بعض الأسئلة لطلابي الأعزاء حتى نحدد مستوياتهم..
لم أختر أسئلة متقدمة، وإنما اكتفيت بالأساسيات التي يجب عليك الإحاطة بها.



1 - أي نوع من الستايلات / القوالب هو الأفضل، المتمدد (Liquid)، أم الثابت (Fixed) ؟.

2 - على أي أساس يتم تصميم شعار الموقع ؟

3 - إذا كثرت الصور في الصفحة، هل يؤثر ذلك على خفة التصميم ؟ وكيف نتفاداها ؟

4 - حتى يكون التصميم احترافياً، أيجب علينا استخدام Photoshop ؟

5 - كيف تجعل تصميمك يدل على محتوى موقعك ؟

٦ - هل من الجيد الاعتماد بشكل كلي على يرنامج مثل DreamWeaver, Microsoft Expression Web ؟



ممممم
بالنسبة للأسئلة
هه
أساساً انا ما عندي اي خلفية لهذا البرنامج
وما ادري شو سالفته
عسب جي سجلت في الدورة
مستواي الحالي
0\10
><"

اعتبرووني مسججلة معاكم في الورشة
والسموحة ع التأخير

بورون
16-04-2011, 14:07
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
سنبدأ بإذن الله دروس CSS من اليوم, والتي ستكون أبسط مما تتخيلون بإذن الله ::سعادة::

سيتبادر إلى ذهنك فوراً أن هذا الدرس هو درس لا فائدة منه, أليس كذلك ؟ << من يجاوب :لقافة: ؟
اقرأ الدرس ثم أجب :ميت:.

باختصار CSS هي لغة تصميم, تقوم بالتحكم في كيفية ظهور صفحة HTML.
مثل: كم سيكون عرض الصفحة ؟ مالون هذا ؟ ما خط ذاك ؟
كلها نتحكم بها بـCSS.
وتفادياً لإعادة رسم الدائرة, وددت أن أضع رابطاً لموضوع لأخي Hatshy قد شرح فيه CSS شرحاً وافياً, وكل مايبقى بعده - بإذن الله- هو شرح بعض خصائصها الضرورية, ثم ننتقل إلى شيْ أكثرَ تقدماً. << خطاب رسمي :ميت:

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

أوه عفواً, نسيت وضع الرابط ::مغتاظ::
~«{¦| نَـــافِـذه إلـــى عَـــــالمٌ الـــ css |¦}»~
(http://www.mexat.com/vb/threads/872489-%C2%AB-%C2%A6-%D9%86%D9%8E%D9%80%D9%80%D9%80%D8%A7%D9%81%D9%90%D 9%80%D8%B0%D9%87-%D8%A5%D9%84%D9%80%D9%80%D9%80%D9%89-%D8%B9%D9%8E%D9%80%D9%80%D9%80%D9%80%D9%80%D8%A7%D 9%84%D9%85%D9%8C-%D8%A7%D9%84%D9%80%D9%80%D9%80-css-%C2%A6-%C2%BB?highlight=)

H A T S H Y
16-04-2011, 16:08
السـلام عليكم ..
اعتقد الحمل كان ثقيل علي اخي العزيز احمد ..
تركته وحيدا يحمل هم الدوره .. واسف عن التغيب لظروف طارئه ..
اعتزر منك اخي احمد عن ما حدث .. ^_^
والحمد لله عدت من جديد .. خلال يومين ان شاء الله سأضع لكم الدرس الثاني في Css ..
وسنتعرف من خلاله علي اساسيات التوزيع عن طريق اللغه المزهله ..
واعتزر سأضع الدرس بشكل منفصل في قسم تطوير المواقع لانه يعتبر جزء تكميلي للدرس التمهيدي الذي ارفق رابطه اخي الكريم ..
واعتزر منكم جميعا مره اخري عن التعطيل .. دمتم جميعا بخير وصحه ..

Senya Phoenixia
22-04-2011, 11:28
^

لا مشكلة لكن ارجوا طرح رابط الدرس هنا ^^

H A T S H Y
22-04-2011, 15:29
الدرس الثـاني فـــــي Css
~«(| " Css " التعريف ، التكوين ، التطبيق .. |)»~ (http://www.mexat.com/vb/threads/902406-%C2%AB%28-Css-%D8%A7%D9%84%D8%AA%D8%B9%D8%B1%D9%8A%D9%81-%D8%8C-%D8%A7%D9%84%D8%AA%D9%83%D9%88%D9%8A%D9%86-%D8%8C-%D8%A7%D9%84%D8%AA%D8%B7%D8%A8%D9%8A%D9%82-..-%29%C2%BB)

midotaha1990
29-04-2011, 00:21
السلام عليكم ورحمة الله وبركاته
لو سمحتم عندى سؤال واتمنى الاجابه عليه سريعا بعد اذنكم
ازاى ف ال html
اخلى الباك جراوند امج ف السنتر بحيث ان بيظهر منها حسب الريزليوشن المستخدم
الجزء الناقص عندى وضعها ف السنتر
ف انتظار تفاعلكم وشكرا لكم على هذا المجهود الرائع

midotaha1990
29-04-2011, 08:57
ياريت بعد ازنكوا ازاى برده اخلى البانر مثلا بنفس الطريقه
ان مثلا يكون مساحة صوره البانر 1280بس لما يكون الريزليوشن 1024 تظهر المساحه دى بس والباقى كانه غير موجود



انا الحمد لله عملت الجزئيه الخاصه بالبانر
انتظر الرد على الجزء الخاص بال body

H A T S H Y
29-04-2011, 15:18
midotaha1990 (http://www.mexat.com/vb/members/565757-midotaha1990)

اهـلا بك اخي الكريم ..
للاسف لا يوجد كود في HTML يمكنك من تمديد الخلفيه علي حجم الصفحه ..
واذا وجد ستكون اضافه جافا سكربت وليست HTML ابدا ..
نرجو مزيدا من التوضيح عن مقايس الصورة التي ستضعها بالخلفية .. ويفضل لو تضع لنا الصورة ..
حتي نخبرك بافضل طريقة لتحصل علي نتيجة ترضيك ..
بالتوفيق ان شاء الله .. دمت بخير دائما ..

Master Edward
16-05-2011, 21:34
:صمت: فاتتني كذا حصة ، سأعود للمتابعة :p

H A T S H Y
21-05-2011, 10:44
،

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

Master Edward
21-05-2011, 17:36
،

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



انا برأيي نبدأ فعلياً ببناء الصفحات ..
فقد اصبح لدي فكرة جيدة من الدروس السابقة ..

الامر عائد لبقية الأخوة االمتابعين للورشة ^^

.
.

لي عودة للمتابعة

D.E.Λ.T.H
22-05-2011, 14:28
انا متفق مع الفكرة الثانية ^^
حيث انه سيكون اسهل للفهم مع وجود التطبيق
و حفظ المعلومة بشكل ميسّر :)

X100
23-05-2011, 07:33
اتفق مع ادوارد ، لازم يكون في خطوة تطبيقية علشان تتركز المعلومات بشكل اوضح .. :)

H A T S H Y
23-05-2011, 09:01
،

حسناً .. يبدو ان الجميع يريد التطبيق المباشر ..
لا بأس من ذلك .. سنبدأ في توزيع قالب بسيط وبدائي سويا ..
بالطريقتين .. مره بالجداول .. والاخري بالـ Css
وسنباشر العمل خلال ساعات بأذن الله ..
وبالتوفيق للجميع ..

H A T S H Y
23-05-2011, 14:33
،

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

http://img6.imageshack.us/img6/1169/mexata.jpg

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

X100
23-05-2011, 18:13
جميل ، شكراً هاتشي ..

حسب تصميم القالب .. فنستطيع تقطيع بعض الاجزاء على نوعية "التمدد" بحيث ان القالب الموجود بالوسط :
الجزء الأيمن يقطع كجزء ، الأيسر كجزء ، العلوي كجزء ، السفلي كجزء .. بالمنتصف جزء صغير للتمدد

الهيدر جزء والفوتر جزء "غير متمدد"

الخلفية والاطار صورة واحدة ..

اعذرني مستعجل فـ ان شاء الله شرحي واضح :ضحكة:

بالتوفيق وواصل ::جيد::

H A T S H Y
23-05-2011, 23:29
جميل ، شكراً هاتشي ..

حسب تصميم القالب .. فنستطيع تقطيع بعض الاجزاء على نوعية "التمدد" بحيث ان القالب الموجود بالوسط :
الجزء الأيمن يقطع كجزء ، الأيسر كجزء ، العلوي كجزء ، السفلي كجزء .. بالمنتصف جزء صغير للتمدد

الهيدر جزء والفوتر جزء "غير متمدد"

الخلفية والاطار صورة واحدة ..

اعذرني مستعجل فـ ان شاء الله شرحي واضح :ضحكة:

بالتوفيق وواصل ::جيد::


اهلا بك ..
الطريقة سـليمة نظريا .. ولكن هل هي الطريقة المثاليه للتقطيع ؟؟
وايضا هل ستظهر بنفس الشكل علي كل الحاسبات مهما كانت دقة الشاشة .. ؟؟
وماذا عن القالبين بالمنتصف كيف سيتم تقطيعهم ؟؟
اشـكرك علي المشـاركة وفي انتظار المزيد من الاراء .. ^_^

X100
24-05-2011, 07:54
اممم ، - هل هي الطريقة المثالثية للتقطيع ؟
* من ناحيتي لو استلمت قالب مثل هذا الشكل فهكذا راح يكون تقطيعي له حسب معرفتي ..

- هل ستظهر بنفس الشكل على كل الحاسبات مهما كانت دقة الشاشة ؟
* لا طبعاً ، الا في حالة كان التصميم " متمدد " ..

- صنعت نموذج بسيط للتقطيع الذي اقصده ..

http://img815.imageshack.us/img815/3268/mexatacopy.jpg


هل هو صحيح ؟

وشكراً :)

H A T S H Y
24-05-2011, 10:32
اممم ، - هل هي الطريقة المثالثية للتقطيع ؟
* من ناحيتي لو استلمت قالب مثل هذا الشكل فهكذا راح يكون تقطيعي له حسب معرفتي ..

- هل ستظهر بنفس الشكل على كل الحاسبات مهما كانت دقة الشاشة ؟
* لا طبعاً ، الا في حالة كان التصميم " متمدد " ..

- صنعت نموذج بسيط للتقطيع الذي اقصده ..

http://img815.imageshack.us/img815/3268/mexatacopy.jpg


هل هو صحيح ؟

وشكراً :)


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

X100
24-05-2011, 19:30
اها .. فهمت قصدك =)

جميل ، وننتظر البقية :)

T E C H N O
24-05-2011, 23:46
السلام عليكم ~


الصور التي سيتم تقطيعها كثيرة جدا وبمقاسات كبيرةقطعتها باصغر ما يمكن :

http://techno2t.files.wordpress.com/2011/05/22222222222222222222.gif

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


و أذا اردنا ان يكون بالاستايل نقطة تمدد فسيكون التقطيع هكذا :

http://techno2t.files.wordpress.com/2011/05/333333333333333.gif

يمكننا الاستغناء عن الصور المظللة لوجود نقطة التمدد , و بما ان الاستايل ثابت ينبغي علينا تحدد عرض نقطة تمدد الهيدر بـ411 بيكسل و نقطة تمدد الفوتر بـ431 بيكسل ( بالنسبة لهذا التقطيع ) و ايضاً يمكننا وضع نقطة تمدد في الخلفية على الاطراف او جعل المنتدى ينزلق على خلفية ثابته .

D.E.Λ.T.H
25-05-2011, 14:31
مبتدئ في عالم القص ><!

http://dc08.******.com/i/02994/dmdaxzkwc8md.png
لآ أعتقد انها طريقة صحيح لكن...
قمت بقص التصميم بكمية قليلة من الصور اما الباقي
فيمكن القبام به بواسطة التكويد في البرامج المختلفة
المربعين اللي في النصف اخذت نقطة تمدد في المنتصف و قصصت الاطراف
و يمكن وضع لون الخلفية بواسطة الـHtml أو الـCss
اما الهيدر و الفوتر اخذ نقطة تمدد منها صعب لانها يمكن تشوه الاستايل عند وضعه
و قمت بقص البرواز اللي على الجانبين
وأتمنى يكون القص و كلامي صح؟..
بالتوفيق :مرتبك:

H A T S H Y
26-05-2011, 00:52
السلام عليكم ~

قطعتها باصغر ما يمكن :

http://techno2t.files.wordpress.com/2011/05/22222222222222222222.gif

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


و أذا اردنا ان يكون بالاستايل نقطة تمدد فسيكون التقطيع هكذا :

http://techno2t.files.wordpress.com/2011/05/333333333333333.gif

يمكننا الاستغناء عن الصور المظللة لوجود نقطة التمدد , و بما ان الاستايل ثابت ينبغي علينا تحدد عرض نقطة تمدد الهيدر بـ411 بيكسل و نقطة تمدد الفوتر بـ431 بيكسل ( بالنسبة لهذا التقطيع ) و ايضاً يمكننا وضع نقطة تمدد في الخلفية على الاطراف او جعل المنتدى ينزلق على خلفية ثابته .




ما شاء الله .. حلول جيده ..
اعجبني التمدد في الهيدر .. خطوة موفقة ولكن غير مكتمله .. فطريقة التقطيع هذه قد تحدث تشوة بالقالب ..
ويجب مراعاه المقايس بشكل دقيق .. حتي تضمن ان تظهر بشكل مثالي ..
وبالنسبة لتمدد الخلفية فكره جيدة ولكن لا تؤدي الغرض المطلوب ايضا ..
شكرا علي المجهود الرائع ^_^

H A T S H Y
26-05-2011, 00:55
مبتدئ في عالم القص ><!

http://dc08.******.com/i/02994/dmdaxzkwc8md.png
لآ أعتقد انها طريقة صحيح لكن...
قمت بقص التصميم بكمية قليلة من الصور اما الباقي
فيمكن القبام به بواسطة التكويد في البرامج المختلفة
المربعين اللي في النصف اخذت نقطة تمدد في المنتصف و قصصت الاطراف
و يمكن وضع لون الخلفية بواسطة الـHtml أو الـCss
اما الهيدر و الفوتر اخذ نقطة تمدد منها صعب لانها يمكن تشوه الاستايل عند وضعه
و قمت بقص البرواز اللي على الجانبين
وأتمنى يكون القص و كلامي صح؟..
بالتوفيق :مرتبك:





اولا اشـكرك علي المجهود المميز ..
وعن التقطيع هو رائع .. ولكن الصور بهذا الشكل حجمها كبير جدا ..
ولا تناسب متصفحي الويب ذو الاتصال الضعيف ..
وايضا عن القوالب لامنتصف .. فانت حسبت ان القالب سيكون بنفس الطول ..
لم تراعي التمدد الطولي في تقطيع قوالب المحتوي ..
اشـكرك مره اخري علي المجهود .. ^_^

H A T S H Y
26-05-2011, 01:50
السـلام عليكم ورحمة الله وبركاتة
بسـم الله الرحمن الرحيم ..

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

لدينا gif
وايضا jpg
ومنذ سنوات قليلة اصبح الويب يدعم png

**وهذا لا يعني انه يتعزر عرض باقي انواع الصور علي الويب .. ولكن المقصود انها الانواع الموصي بها ..
والافضل لصناعه الويب .. والمطابقة للمعاير القياسية ..

،

حسنا ،، ماهو النوع الافضل او المناسب والذي ساستخدمة في كل اعمالي ؟؟

لا يوجد ما يسمي بالنوع الافضل .. فلكل نوع وظيفة وقد تكون مجبرا علي استخدام نوعا بعينه .. !!
ولذلك اسمحو لي اولا ان اعرفكم بالانواع لمن لا يعرفها .. وماهي المحددات التي ستجبرني علي استخدام نوع بعينة ..

اولا : الصور من نوع [ gif ] :-

يعتبر هذا النوع هو النوع الاكثر شعبية .. والاكثر استخداما في تصميم المواقع ..
لما له من مميزات عظيمة .. اهمها صغر الحجم ..
جميل اذن لانها صغيرة الحجم .. استطيع استخدامها دائما وساحصل علي ما اريد .. قالب سريع جدا ..
ولكن هذا غير صحيح .. فانت عليك ان تراعي شئ مهم .. يجب ان تحافظ علي دقة وجوده الصور .. حتي لا يقلل من جمال التصميم
ولا يسبب تشوة للقالب ..
وكيف سيحدث هذا ؟؟
الصور من هذا النوع تستخدم فقط 256 لون .. !!
فاذا كانت صورك بالوان كثيرة وتدرجات متعدده فلن تظهر الصورة بشكل جيد ولا بدقة او جودة مناسبة ابدا ..
اذن تستطيع استخدام هذا النوع من الصور في الاجزاء ذات الالوان القليلة وستحصل علي افضل نتيجة باعلي جودة وباقل حجم ..
وايضا هناك استخدام اخر وهو قهري لهذا النوع من الصور ..
وهي الصور المتحركة .. فانت اذا اردت ان تضع صورة متحركة في موقعك .. لن تكون الا هذا النوع ..
لانه النوع الوحيد الذي يدعم الانيميشن بين انواع الصور كافه ..
حسنا هل هناك استخدام اخر لها ؟؟
نعم هناك استخدام اخر وهو الاخير .. في حالة اذا اردت ان تضع صـور شفافة الخلفية ..
فاذا كنت تريد تصميم ايقونة منحنية الاطراف .. وقمت بوضعها في التصميم ستظهر الخلفية وراء الايقونة وتخرب الشكل ..
اذن عليك بحفظ الصورة بهذا الامتداد مع تعين الخلفية شفافة ..
ولكن في هذة الحالة ايضا تنطبق عليها نقطة الالوان .. فلن تفرق الخلفية في حال كانت الصورة كثيرة الالوان .. ستظهر بجودة سيئة ايضا ..

ثانيا : الصور من نوع [ jpg ] :-

اصبح مؤخرا اساسي في صناعه الويب .. وهذا نتيجة لشغف المصممين ليصلو الي دقة وجودة عالية في صفحاتهم ..
فلم يكفي النوع السابق احتياجاتهم الكاملة .. وكيف ذلك وهو لا يدعم الا 256 لون فقط ..
اما هذا النوع فهو داعم حتي 16.7 مليون لون .. !!
فانت تحفظ صورك كثيرة الالوان بهذا الامتداد وتضمن ان تظهر بجودة رائعه .. وبدقة عالية ..
فمثلا هذا النوع يصلح لوضع صورة شخص مثلا .. بملابس عديدة الالوان .. وظلال وانوار .. ودرجات كثيرة ..
ستظهر بشكل رائع .. ولا يصلح النوع السابق ابدا .. ستظهر الصورة مشوهه جدا ..
وحتي اذا قررت استخدام النوع الاول قهرا للحفاظ علي حجم الصور .. تاكد ان اهذا النوع هو الاقل حجما في الصور ذات الالوان الكثيرة ..

ثالثا : الصور من نوع [ png ] :-

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

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

صورة بالوان قليلة ------------> gif
صورة متحركة ----------------> gif
صورة شفافة بالوان قليلة -----> gif
صورة شفافة بالوان كثيرة ----> png
صورة بالوان كثيرة ------------> jpg

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


عفـوا .. ارجو عدم الرد .. !!

H A T S H Y
26-05-2011, 02:20
،

والان وبعد ان تعرفنا علي الصور التي سوف نستخدمها لنباشر عملية التقطيع ..
ولكن قبلا اريد ان اوضح نقطة بسيطة .. وللاسف كثيرين لا يعلمونها ..
الفـرق بين التصميم الثابت والمتمدد ..
لا شـئ !!
فانت حين تصمم تصميما متمدد يتوجب عليك ان تصنع نقاط تمدد حتي يتمدد القالب مع المتصفح ..
والبعض يعتقد ان القالب الثابت يعطيك الحق بان لا تضع اي نقاط تمدد .. فالحجم ثابت مهما تغير حجم المتصفح ..
فهذا الامر قمة الخطأ .. !!
نقاط التمدد نعم هي تساعد في تمديد القالب حسب عرض المتصفح .. ولكن الهدف الاساسي منها والذي قامت من اجله ..
هو تقليص عدد الصور وحجمها ليصبح القالب اسرع في التصفح وباقصي شكل ممكن ..
فاذا كان القالب الذي تعمل عليه ثابت .. هذا لا يعفيك من ان تضع نقاط التمدد في كل جزء يصلح لذلك ..
وعليك ان تستغل كل نقطة تستطيع بها تقليص او توفير عدد الصور ليصبح موقعك سـريع لدي الزائرين ..
لان هذه نقطة اساسية في الويب .. الزائر حين يشعر بثقل الموقع .. يشعر بالملل الشديد وقد لا يعاود الدخول اليه مره اخري ..
لذلك تلك هي النقطة المهمة لا تنظر الي نقاط التمدد علي انها وظيفة محدده لقوالب متمدده ..
انظر اليها وكأنها اداه لتقليل وتقليص عدد الصور ..
اما عن الفرق الحقيقي بين القالب المتمدد والقالب الثابت ..
هو عرض الجدول الاساسي ..
الجدول الاساسي في القالب المتمدد يكون 100%
اما في الثابت يكون بالبكسيل وهو كما تريد .. ولكن الافضل للقوالب الثابته ان يكون العرض 960 بكسيل ..
فهو العرض الاكثر شيوعا واستخداما والذي يظهر بشكل مناسب لمعظم الحاسبات المختلفة ودقات الشاشات المختلفة ..

..........

وبعد ان وضحنا تلك النقطة المهمة الان نبدأ بالتقطيع .. ولكن اولا اسمحو لي ان اوضح الاجزاء التي سيتم العمل عليها ..


http://img827.imageshack.us/img827/6491/36015197.jpg


والهدف هنا توضيح الاجزاء التي سنعمل عليها فقط وليس التقطيع حتي لا تفهم الصورة خطأ .. ^_^


عفوا .. ارجو عدم الرد .. !!

H A T S H Y
26-05-2011, 03:33
،

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

الجزء رقم ( 1 )

تعامل الجميع مع هذا الجزء وكأنه اطار علي جانبين التصميم ..
بالتأكيد يمكن فعل ذلك .. ولكن هذا لن يكون مناسبا .. فاذا كانت دقة الشاشة لديك اكثر من 1000 بكسيل ..
ستظهر خلفية الصفحة الاساسية بعد تلك الاطارات .. وستسبب تشوه بالتصميم .. ويجب ان تراعي دقه جميع الشاشات في تصميمك ..
اذن كيف يمكن التغلب علي تلك النقطة ؟؟
الشئ الذي يجب ان نستنبطة من تلك الاطارات .. انها ليست اطارات ولا شئ .. ليست هي الا مجرد خلفية متكرره ( باترن ) ..
الم تلاحظو ذلك معي ؟؟ انها ليست الا جزء صغير ويتكرر مرارا وتكرارا .. !!
اذن تستطيع ان تستغل ذلك الجزء في تقليص الصور .. وهو استخدام هذا الـ ( باترن ) كصورة واحده ووضعها كخلفية للصفحة كلها ..
يتكرر بنفس الشكل ايضا وستظهر بشكل مثالي علي كل الحاسبات والشاشات مهما كانت الدقة او حجم الشاشة ..

واليكم الفـرق بين الطريقتين ..

هذا هو الجزء الذي اتفق عليه معظم الاراء .. ان يكون بهذا الشكل قطعه واحده ..


http://img218.imageshack.us/img218/2047/33095391.jpg


حسنا كم مساحه هذا الجزء ؟؟
29.35KB لـ نوع JPG مع العلم ان هذا الجزء بنفس الجوده وبنوع GIF بمساحه 57.46KB
وهذا ما تحدثت عنه قبلا في اختيار نوع الصور حفاظا علي مساحه الصور ..
مع العلم ان هذا للقطعه التي علي اليمين فقط !!
والجزء الاخر علي اليسار نفس الحجم تقريبا اذا الاطارات فقط بمساحه تقترب من 60KB لـ JPG و تقترب من 115KB لـ GIF
ورغم كل ذلك لن تظهر بشكل جيد لمن هم يستخدمون دقة شاشة اعلي من 1000 بكسيل للعرض ..

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

http://img801.imageshack.us/img801/3863/10919345.jpg

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

والان بتنفيذ نفس الطريقة علي القالب .. سنحصل علي الشكل التالي ..

http://img838.imageshack.us/img838/600/58552119.jpg

ولاحظو معي ان مساحه الصورة تصل الي 5KB من نوع JPG
وحتي يتأكد الجميع من سـلامه الجزء .. اليكم 4 صور متلاصقة ..

http://img838.imageshack.us/img838/600/58552119.jpghttp://img838.imageshack.us/img838/600/58552119.jpg
http://img838.imageshack.us/img838/600/58552119.jpghttp://img838.imageshack.us/img838/600/58552119.jpg

والان انتهينا من خلفية الصفحة .. يبقي جزء مهم في القطعه رقم 1
وهي الاطار الفعلي للقالب .. الموضح في الشـكل التالي ..

http://img689.imageshack.us/img689/8602/88465701.jpg

وكما هو موضح سيتم تقطيعه تماما بهذا الحجم .. بعرض 15 بكسيل
وطول 1 بكسيل وبخلفية شفافة .. ولكن احذر عليك ان تحفظها بنوع PNG لان الـ GIF لا يدعم التدرجات علي الخلفية الشفافة ..
يظهر لون ابيض علي اطراف التدرج الشفاف .. وسوف يشوه شكل القالب .. لذلك يفضل PNG ولا تخف من الحجم لان مساحة الصورة صغيرة .. 15×1
واليكم الجزء الذي تم تقطيعة .. هكذا ..

http://img148.imageshack.us/img148/4368/87976915.png

ولاحظو معي ان مساحه الصورة اقل من ربع كيلو بايت .. !!
ونفس الشئ في الجزء الايسر من القالب .. هكذا ..

http://img268.imageshack.us/img268/1601/42871617.png

** تم تقطيع الصورة علي طول 1 بكسيل فقط لان معدل التكرار 1 بكسيل .. لا يوجد اي اختلاف من بكسل لاخر .. فاذا تكرر لن يكون هناك فرق ..
بعكس الـ ( باترن ) السابق فقد كان معدل التكرار 100 بكسيل .. !!

وهكذا نكون قد انهينا الاطار والخلفية بشـكل احترافي تام .. وباقل مساحه ممكنه .. لكل الصور حتي الان وهي اقل من 6KB

الان وبعد ان انتهينا من القطعه رقم 1 .. يبقي سؤال مهم ..
ماذا سنفعل اذا كانت الخلفية غير متكرره .. !!
سنتطرق مستقبلا في قالب اخر بأذن الله الي هذا الجزء ..

شـكرا لحسن استماعكم ..
وباذن الله نكمل باقي الاجزاء معا في ايام قليله قادمه ..
بالتوفيق للجميع ان شاء الله ودمتم جميعا بخير وصحة .. ^_^

H A T S H Y
27-05-2011, 03:44
بــــــــــــــاك
عدت اليكم من جديد لنكمل تقطيع باقي القالب سويا ..
الان وبعد ان اصبحت القطع رقم 1 جاهزة للعمل يبقي الخمس قطع الاخري ..
وبالنسبة للتقطيع الباقي هو الاسهل .. فاعتقد ان التكنيك المستخدم اصبح واضح ..
ولن نستهلك كثيرا من الوقت في باقي القطع ..

القطة رقم ( 2 )

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

http://img51.imageshack.us/img51/7648/11508731.jpg

تصل حجم الصورة الي .. 37.1KB
حسنا لماذا نرضي بتلك المساحة ونحن نستطيع ان نقلصها ..
حتي وان كان التمدد سيأتي بنفس الحجم فانت الفائز .. ستستطيع تحويل القالب الي متمدد في ثانية واحدة !!

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

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

http://img808.imageshack.us/img808/5728/59880818.jpg
بمساحه .. 3.84KB

http://img218.imageshack.us/img218/7268/m10h.png
بمساحه .. 21.1KB
مع العلم ان مساحه تلك الصورة بامتداد JPG يصل الي 22KB بنفس الجوده ..

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

http://img808.imageshack.us/img808/5728/59880818.jpghttp://img808.imageshack.us/img808/5728/59880818.jpghttp://img808.imageshack.us/img808/5728/59880818.jpghttp://img808.imageshack.us/img808/5728/59880818.jpg

والان بعد ان انهينا القطعه رقم ( 2 ) اعتقد لا حاجة لشرح القطعه رقم ( 6 ) فسوف نستخدم نفس الطريقة تماما ..
لذلك اكتفي بوضع القطع بعد التقطيع هكذا ..

http://img849.imageshack.us/img849/1739/m11mf.jpg
بمساحة .. 1.171KB

http://img508.imageshack.us/img508/9326/m12o.png
بمساحة .. 8.1KB
وبذلك يكون حجم الفوتر ككل اقل من 10KB والتي هي اقل من الفوتر كقطعه واحدة بحوالي 5KB قد يري البعض انها مساحه لا تذكر .. ولكنها بالفعل 50% من حجم الفوتر الان ..!!

واليكم اربع قطع من التمدد حتي تتأكو من سلامته ..

http://img849.imageshack.us/img849/1739/m11mf.jpghttp://img849.imageshack.us/img849/1739/m11mf.jpghttp://img849.imageshack.us/img849/1739/m11mf.jpghttp://img849.imageshack.us/img849/1739/m11mf.jpg


عفوا .. ارجو عدم الرد !!

H A T S H Y
27-05-2011, 03:56
الان ننتقل الي القطعه رقم ( 3 )
القطعه هي تمثل جسم الصفحة .. ولا يمكن ان نحتسبها جزء يصلح للتقطيع ..
لانها مكونه من لون خالص ( Solid Color ) ونحن نريد توفير الصور .. لذلك سنقوم بتحويلة الي مجرد كود فقط ..
بمعني ان هذة القطعه لا تحتاج الي اي تقطيع .. ومثلها كل الاماكن التي تحتوي علي الوان خالصه .. هي فرصه جيدة لتقليل الصور ..
فالكود يقوم بالغرض علي اكمل وجه .. ولا حاجة لاستخدام صور في هذا الجزء ..

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



عفوا .. ارجو عدم الرد ..!!

H A T S H Y
27-05-2011, 04:27
،

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

http://img194.imageshack.us/img194/7011/18973459.jpg http://img830.imageshack.us/img830/4405/85466107.jpg http://img836.imageshack.us/img836/706/36959011.jpg
http://img577.imageshack.us/img577/9531/58023686.jpg http://img339.imageshack.us/img339/1250/91977589.jpg

http://img225.imageshack.us/img225/8398/13943557.jpg http://img651.imageshack.us/img651/8554/35652248.jpg http://img191.imageshack.us/img191/6313/89089505.jpg

وكما يري الجميع مجموع القطع الثامنية اقل من 5KB وهي كل الصور التي سنحتاجها الي ذلك القالب ..
اما عن الجزء بالمنتصف سنستبدلة بكود لانه لون خالص .. ^_^

واليكم دليل علي التمدد في الجزء الاعلي والاسفل ليظهر لكم قالب مصغر ..

http://img194.imageshack.us/img194/7011/18973459.jpghttp://img830.imageshack.us/img830/4405/85466107.jpghttp://img830.imageshack.us/img830/4405/85466107.jpghttp://img830.imageshack.us/img830/4405/85466107.jpghttp://img830.imageshack.us/img830/4405/85466107.jpghttp://img830.imageshack.us/img830/4405/85466107.jpghttp://img830.imageshack.us/img830/4405/85466107.jpghttp://img830.imageshack.us/img830/4405/85466107.jpghttp://img830.imageshack.us/img830/4405/85466107.jpghttp://img830.imageshack.us/img830/4405/85466107.jpghttp://img830.imageshack.us/img830/4405/85466107.jpghttp://img830.imageshack.us/img830/4405/85466107.jpghttp://img830.imageshack.us/img830/4405/85466107.jpghttp://img830.imageshack.us/img830/4405/85466107.jpghttp://img830.imageshack.us/img830/4405/85466107.jpghttp://img830.imageshack.us/img830/4405/85466107.jpghttp://img830.imageshack.us/img830/4405/85466107.jpghttp://img830.imageshack.us/img830/4405/85466107.jpghttp://img830.imageshack.us/img830/4405/85466107.jpghttp://img836.imageshack.us/img836/706/36959011.jpg
http://img225.imageshack.us/img225/8398/13943557.jpghttp://img651.imageshack.us/img651/8554/35652248.jpghttp://img651.imageshack.us/img651/8554/35652248.jpghttp://img651.imageshack.us/img651/8554/35652248.jpghttp://img651.imageshack.us/img651/8554/35652248.jpghttp://img651.imageshack.us/img651/8554/35652248.jpghttp://img651.imageshack.us/img651/8554/35652248.jpghttp://img651.imageshack.us/img651/8554/35652248.jpghttp://img651.imageshack.us/img651/8554/35652248.jpghttp://img651.imageshack.us/img651/8554/35652248.jpghttp://img651.imageshack.us/img651/8554/35652248.jpghttp://img651.imageshack.us/img651/8554/35652248.jpghttp://img651.imageshack.us/img651/8554/35652248.jpghttp://img651.imageshack.us/img651/8554/35652248.jpghttp://img651.imageshack.us/img651/8554/35652248.jpghttp://img651.imageshack.us/img651/8554/35652248.jpghttp://img651.imageshack.us/img651/8554/35652248.jpghttp://img651.imageshack.us/img651/8554/35652248.jpghttp://img651.imageshack.us/img651/8554/35652248.jpghttp://img191.imageshack.us/img191/6313/89089505.jpg

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

ولن استطيع ان اريكم التمدد الطولي لان الصور لا تلتصق في المشاراكات بطول 1 بكسيل ..

تم بحمد الله التقطيع للقالب بالكامل ..
اتمني اكون موفق في الشرح .. ووصل للجميع ..
واي استفسار او سؤال انا حاضر ..
لنبدأ باذن الله التوزيع بالطريقة الاولي وهي الجداول ..
مع مطلع الاسبوع القادم ..
شـكرا لحسن استماعكم ..
وبالتوفيق للجميع دائما ..
دمتم بخير وصحه .. ^_^

X100
27-05-2011, 05:37
رائع ، لي عودة

بورون
29-05-2011, 14:06
شكراً لك ، لكن أعتقد أن هذا القالب مكلف قليلاً ولا يعتمد على css بشكل كلي :)
فالأفضل لو كان الفوتوشوب لمجرد التخطيط للقالب، فكل مافعلته يمكننا اختصاره بأربع أو خمس سطور css
باستثناء الخلفية :)

عموماً واصل والله معك :)

Master Edward
30-05-2011, 17:30
جميل :تعجب: وكالعادة متأخر >> يلا بسمر على الموضوع اليوم :d

لي عودة

Master Edward
30-05-2011, 19:56
،

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

http://img6.imageshack.us/img6/1169/mexata.jpg

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


شيء محمس :D حسناً هذة طريقة تقطيعي للقوالب عادةً ..

http://www.mexat.com/vb/attachment.php?attachmentid=1452977&stc=1&d=1306785193

سبق ان صممت استايل ثابت بنفس الأسلوب اما فيما يخص الخلفية الثابتة فالأمر مختلف ^^"
فتقطيعي للأطراف مختلف عن العادة .. شأشرح ذلك لاحقاً :p بالمناسبة مالذي جعلك تصميم الشكل اسفل الهيدر من النظرة الأولى جعلني ارتبك برأيي هذا لا علاقة له ببرنامج التصميم بأمكاننا تصميم بأستخدام الأكواد >> للأسف ما اعرف الطريقة الخاصة بتصميمة :ميت: ..

.
.

لي عودة لمتابعة الباقي :p وحده وحده ,,
واسف جداً للتأخر في المتابعة لكن ظروفي النفسية
لأ اصدق اني وجدت وقت لنفسي ><"

دمت بخـير

Senya Phoenixia
30-05-2011, 20:36
ماشاء الله تواصل و إقبال على الورشة ،

Master Edward (http://www.mexat.com/vb/members/148844-Master-Edward)

أستاذي الفَاضلُ إيدوارد ، سعيدٌ بوجودكَ فعلاً ..

H A T S H Y
31-05-2011, 10:17
رائع ، لي عودة


انتظرك .. ^_^

H A T S H Y
31-05-2011, 10:21
شكراً لك ، لكن أعتقد أن هذا القالب مكلف قليلاً ولا يعتمد على css بشكل كلي :)
فالأفضل لو كان الفوتوشوب لمجرد التخطيط للقالب، فكل مافعلته يمكننا اختصاره بأربع أو خمس سطور css
باستثناء الخلفية :)

عموماً واصل والله معك :)


حسنا .. في الحقيقة لم افهم قصدك ..
وما علاقة ما فعلته حتي الان بـ Css
كل تلك الخطوات ماهي الا شـرح لتقطيع القـالب فقط ..
وسيتم توزيعه مرتين بأذن الله ..
الاولي بالجداول والثانية Css
كيف يمكن ان تقوم بتقطيع القالب عن طريق الـ Css !!
في الواقع لا اعرف طريقة للتقطيع الا بالفوتوشوب ..
هل الـ Css اصبح اداه لتقطيع الصور الان !!
.. في الحقيقة لم افهم اي شـئ ..
كل ما نملك الان مجموعه من الصور القليلة والتي تمثل القالب وجاهزة للتوزيع ..
ولم اكتب ولا سطر من الكود حتي الان ..
اذن ماذا تقصد !! .. اتمني لو توضح .. ^_^
وشـكرا لك علي كل شئ .. والله مع الجميع باذن الله ..

H A T S H Y
31-05-2011, 10:33
جميل :تعجب: وكالعادة متأخر >> يلا بسمر على الموضوع اليوم :d

لي عودة


نـورت الموضوع عمو ايدو ^_^







شيء محمس :D حسناً هذة طريقة تقطيعي للقوالب عادةً ..

http://www.mexat.com/vb/attachment.php?attachmentid=1452977&stc=1&d=1306785193

سبق ان صممت استايل ثابت بنفس الأسلوب اما فيما يخص الخلفية الثابتة فالأمر مختلف ^^"
فتقطيعي للأطراف مختلف عن العادة .. شأشرح ذلك لاحقاً :p بالمناسبة مالذي جعلك تصميم الشكل اسفل الهيدر من النظرة الأولى جعلني ارتبك برأيي هذا لا علاقة له ببرنامج التصميم بأمكاننا تصميم بأستخدام الأكواد >> للأسف ما اعرف الطريقة الخاصة بتصميمة :ميت: ..

.
.

لي عودة لمتابعة الباقي :p وحده وحده ,,
واسف جداً للتأخر في المتابعة لكن ظروفي النفسية
لأ اصدق اني وجدت وقت لنفسي ><"

دمت بخـير


ما شاء الله .. طريقة التقطيع هي الافضل حتي الان ..
اعرف عن تصميماتك السابقة .. وقد شاهدت احداها ..
ما شاء الله ابداع .. واعتقد خبرتك كبيره في التوزيع بالجداول ..
هذا الشـكل اسفل الهيدر ماهو الا اختبار بسيط .. ^_^
وبالفعل هو لا يتم تقطيعه ابدا .. كما وضحت بالشـرح ..
ولا يهمك عمو ايدو معك كل الوقت .. ^_^
ان شاء الله تجد وقت لكل شئ .. ومن افضل الي افضل ..
دمت بكل خير وصحة .. ^_^

H A T S H Y
31-05-2011, 10:34
ماشاء الله تواصل و إقبال على الورشة ،

Master Edward (http://www.mexat.com/vb/members/148844-Master-Edward)

أستاذي الفَاضلُ إيدوارد ، سعيدٌ بوجودكَ فعلاً ..



نورت الموضوع اخي العزيز فهد ..^_^

D.E.Λ.T.H
31-05-2011, 12:09
باآك >> طالب كسول ::سخرية::
ضاع علي الدرس لي عودة بعد اسبوعين^^>اختبارات<
بالتوفيق:)

Master Edward
31-05-2011, 19:24
نـورت الموضوع عمو ايدو ^_^

ما شاء الله .. طريقة التقطيع هي الافضل حتي الان ..
اعرف عن تصميماتك السابقة .. وقد شاهدت احداها ..
ما شاء الله ابداع .. واعتقد خبرتك كبيره في التوزيع بالجداول ..
هذا الشـكل اسفل الهيدر ماهو الا اختبار بسيط .. ^_^
وبالفعل هو لا يتم تقطيعه ابدا .. كما وضحت بالشـرح ..
ولا يهمك عمو ايدو معك كل الوقت .. ^_^
ان شاء الله تجد وقت لكل شئ .. ومن افضل الي افضل ..
دمت بكل خير وصحة .. ^_^

منور بوجودك :D
نعم جيدة ولكن كُل اعمالي السابقة تم تركيبها على الفرونت بيج 2003
حالياً اواجهة بعض الصعوبات في آستخدام برنامج الدريم ويفر فأنا حتى الان لم اتمكن من تركيب اي استايل بأستخدامة
:تعجب: وكما ترى نشاطي في إانتاج الاستايلات متوقف حتى الان ><" ..

بالنسبة للخلفية فقد قمت بتقطيعها بهذا الشكل في احد الأستايلات السابقة :لقافة: ..

http://www.mexat.com/vb/attachment.php?attachmentid=1453417&stc=1&d=1306869032

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

background-repeat:-repeat;
ارجو ألا اكون ازعجتك لكن هل يمكن لك توضيح لي أمكانية عمل هذا الكود بشكل بسيط ومختصر :p ..
اكره انسخ او أضع كود لااعلم عمل :بكاء: حتى اذا سألني شخص لا أحرج :أوو: ..

.
.

جاري الأطلاع على الفقرة التي تليها ::سخرية::

Master Edward
31-05-2011, 19:47
ماشاء الله تواصل و إقبال على الورشة ،

Master Edward (http://www.mexat.com/vb/members/148844-Master-Edward)

أستاذي الفَاضلُ إيدوارد ، سعيدٌ بوجودكَ فعلاً ..


شكراً لك :) انا الأسعد بوجودي هُنا ;)

Master Edward
31-05-2011, 21:37
السـلام عليكم ورحمة الله وبركاتة
بسـم الله الرحمن الرحيم ..

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

لدينا gif
وايضا jpg
ومنذ سنوات قليلة اصبح الويب يدعم png

**وهذا لا يعني انه يتعزر عرض باقي انواع الصور علي الويب .. ولكن المقصود انها الانواع الموصي بها ..
والافضل لصناعه الويب .. والمطابقة للمعاير القياسية ..

،

حسنا ،، ماهو النوع الافضل او المناسب والذي ساستخدمة في كل اعمالي ؟؟

لا يوجد ما يسمي بالنوع الافضل .. فلكل نوع وظيفة وقد تكون مجبرا علي استخدام نوعا بعينه .. !!
ولذلك اسمحو لي اولا ان اعرفكم بالانواع لمن لا يعرفها .. وماهي المحددات التي ستجبرني علي استخدام نوع بعينة ..

اولا : الصور من نوع [ gif ] :-

يعتبر هذا النوع هو النوع الاكثر شعبية .. والاكثر استخداما في تصميم المواقع ..
لما له من مميزات عظيمة .. اهمها صغر الحجم ..
جميل اذن لانها صغيرة الحجم .. استطيع استخدامها دائما وساحصل علي ما اريد .. قالب سريع جدا ..
ولكن هذا غير صحيح .. فانت عليك ان تراعي شئ مهم .. يجب ان تحافظ علي دقة وجوده الصور .. حتي لا يقلل من جمال التصميم
ولا يسبب تشوة للقالب ..
وكيف سيحدث هذا ؟؟
الصور من هذا النوع تستخدم فقط 256 لون .. !!
فاذا كانت صورك بالوان كثيرة وتدرجات متعدده فلن تظهر الصورة بشكل جيد ولا بدقة او جودة مناسبة ابدا ..
اذن تستطيع استخدام هذا النوع من الصور في الاجزاء ذات الالوان القليلة وستحصل علي افضل نتيجة باعلي جودة وباقل حجم ..
وايضا هناك استخدام اخر وهو قهري لهذا النوع من الصور ..
وهي الصور المتحركة .. فانت اذا اردت ان تضع صورة متحركة في موقعك .. لن تكون الا هذا النوع ..
لانه النوع الوحيد الذي يدعم الانيميشن بين انواع الصور كافه ..
حسنا هل هناك استخدام اخر لها ؟؟
نعم هناك استخدام اخر وهو الاخير .. في حالة اذا اردت ان تضع صـور شفافة الخلفية ..
فاذا كنت تريد تصميم ايقونة منحنية الاطراف .. وقمت بوضعها في التصميم ستظهر الخلفية وراء الايقونة وتخرب الشكل ..
اذن عليك بحفظ الصورة بهذا الامتداد مع تعين الخلفية شفافة ..
ولكن في هذة الحالة ايضا تنطبق عليها نقطة الالوان .. فلن تفرق الخلفية في حال كانت الصورة كثيرة الالوان .. ستظهر بجودة سيئة ايضا ..

ثانيا : الصور من نوع [ jpg ] :-

اصبح مؤخرا اساسي في صناعه الويب .. وهذا نتيجة لشغف المصممين ليصلو الي دقة وجودة عالية في صفحاتهم ..
فلم يكفي النوع السابق احتياجاتهم الكاملة .. وكيف ذلك وهو لا يدعم الا 256 لون فقط ..
اما هذا النوع فهو داعم حتي 16.7 مليون لون .. !!
فانت تحفظ صورك كثيرة الالوان بهذا الامتداد وتضمن ان تظهر بجودة رائعه .. وبدقة عالية ..
فمثلا هذا النوع يصلح لوضع صورة شخص مثلا .. بملابس عديدة الالوان .. وظلال وانوار .. ودرجات كثيرة ..
ستظهر بشكل رائع .. ولا يصلح النوع السابق ابدا .. ستظهر الصورة مشوهه جدا ..
وحتي اذا قررت استخدام النوع الاول قهرا للحفاظ علي حجم الصور .. تاكد ان اهذا النوع هو الاقل حجما في الصور ذات الالوان الكثيرة ..

ثالثا : الصور من نوع [ png ] :-

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

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

صورة بالوان قليلة ------------> gif
صورة متحركة ----------------> gif
صورة شفافة بالوان قليلة -----> gif
صورة شفافة بالوان كثيرة ----> png
صورة بالوان كثيرة ------------> jpg

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


عفـوا .. ارجو عدم الرد .. !!


شيء رائع بالفعل
وبالنسبة لي انا اعتمد على صيغة الـ ( jpg ) لما لها من أمكانية من تعديل حجم الصورة بحيث تُحافظ على ألوانها ودقتها بأقل حجم مُمكن ، بالتأكيد تعرف هذة القائمة :D

http://www.mexat.com/vb/attachment.php?attachmentid=1453435&stc=1&d=1306876775

انا دائماً انصح الجميع اثناء الحفظ بصيغة الـ ( jpg ) مع مراعاة أن لا تقل دقة الحفظ عن 85 والأفضل 90 :) لأننا سنحصل على حجم أقل وبجودة وألوان جيدة ::جيد:: ..

( png ) صيغة مُمتازة وهي الأفضل من بين الصيغ السابقة ، لكن لأ استطيع التحكم بدقتها كما أفعل مع الـ ( jpg ) :p


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

الحيلة المُفضلة لدي :سعادة2: لتنجب مشاكل حجم صور الـ ( png ) ..

شكراً لتوضيح هذة النقطة لنا ، هذة النقطة مهمة جداً لنا كمصممين :) ..


.
.

لي عودة لأكمال الباقي :D

H A T S H Y
01-06-2011, 02:07
باآك >> طالب كسول ::سخرية::
ضاع علي الدرس لي عودة بعد اسبوعين^^>اختبارات<
بالتوفيق:)



انتظرك .. وبالتوفيق في الاختبارات بأذن الله .. دمت بكل خير وصحة .. ^_^

H A T S H Y
01-06-2011, 03:06
منور بوجودك :D
نعم جيدة ولكن كُل اعمالي السابقة تم تركيبها على الفرونت بيج 2003
حالياً اواجهة بعض الصعوبات في آستخدام برنامج الدريم ويفر فأنا حتى الان لم اتمكن من تركيب اي استايل بأستخدامة
:تعجب: وكما ترى نشاطي في إانتاج الاستايلات متوقف حتى الان ><" ..

بالنسبة للخلفية فقد قمت بتقطيعها بهذا الشكل في احد الأستايلات السابقة :لقافة: ..

http://www.mexat.com/vb/attachment.php?attachmentid=1453417&stc=1&d=1306869032

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

background-repeat:-repeat;
ارجو ألا اكون ازعجتك لكن هل يمكن لك توضيح لي أمكانية عمل هذا الكود بشكل بسيط ومختصر :p ..
اكره انسخ او أضع كود لااعلم عمل :بكاء: حتى اذا سألني شخص لا أحرج :أوو: ..

.
.

جاري الأطلاع على الفقرة التي تليها ::سخرية::



نعم بالفعل طريقة جيده .. ولكن هناك افضل منها ..
عنها ستحصل علي افضل نتيجة باقل مساحة ومتوافقة مع كل الحاسبات ودقات الشاشات المختلفة ..
فكما تري عرض القالب 960 ماذا سيحدث اذا كانت دقة شاشاتك بعرض 1200 مثـلا !!
سيظهر تشوه علي جانبي القالب يمينا ويسارا ..
لذلك عليك مراعاه تلك النقطه دائما ..
ان يظهر قالبك بافضل صورة مهما اختلفت الاعدادات والحواسب ..
وايضا ان تقلص حجم ومساحه الصور باقصي شكل ممكن ..
وهذا ما سيظهر في طريقتي في التقطيع في الفقرات التاليه .. :p
مع العلم انها طريقتي الخاصة والتي توصلت اليها بعد رحله طويلة من التوزيعات .
هي الافضل في نظري حتي الان .. وقد اكون مخطئ .. وتظهر طريقة اخري افضل ..
ولكن ماهي معاير التقطيع السـليم ؟؟
ان يتم تقطيع اقل عدد ممكن من اجزاء القالب .. باقل مساحة وحجم ممكنه .. ولا يؤثر علي شكل القالب النهائي ..
حيث يجب دائما ان يظهر القالب النهائي مثل البروفة تماما .. دون اي فرق يذكر .. ودون اي تشوهات ..

-----------------------

هذا هو كود Css وهو بهذا الشـكل غير كامل ..
كما سبق ووضحت في درس Css سابق ..
الكود يتكون من 4 اجزاء ..
الجزء الاول وهو العنصر .. ويكون اول شئ يكتب .. ولا يتكرر مرة اخري ..
وهناك نوعين من العناصر .. عناصر الاوسمة الاصلية في HTML مثل Body div table وهكذا ..
والنوع الاخر هو العنصر الاختياري الذي تصنعه انت .. ويكون اي اسم تختارة ويجب ان تسبقة بنقطه .. هكذا .. مثلا Edward.
والفرق بين النوعين .. ان الاول يتم تعريفة بشكل اتوماتيكي في الصفحة لدي لغه HTML فلا تحتاج الا ان تكتبة وسيتعرف عليه بسهولة ..
اما الاخر فعليك تعريفة داخل الكيانات في صفحتك .. عن طريق المعرفان اما class او ID ولن اشرح الفرق فقد سبق ذلك

حسنا .. بعد كتابه العنصر يجب ان تفتح قوسين بهذا الشكل تماما { } ولا يقبل اي نوع اخر من الاقواس ..
ويكتب داخل تلك الاقواس الخصائص والقيم .. وكل خاصيه لها قيمتها الخاصه والتي تناسبك ..
ويتم الفصل بين الخاصية والقيمة بنقطتين فوق بعضهم : ويتم اغلاق الخاصية والقيمة بفصلة منقوطة ;
وبالطبع تستطيع اضافه العديد من الخصائص علي عنصر وحيد .. وسنتطرق الي تكوين الكود بشكل مفصل مستقبلا باذن الله ..
والان عن الكود الذي وضعته .. هو كود تكرار الخلفية .. وهو غير مكتمل ..
وبما ان كود الخلفية هو للصفحة بشكل عام اذن غالبا سيكون العنصر هو Body فهو عنصر اصلي واساسي في كل صفحة .. والمسؤل عن الجسم ..
وعن الخاصية نفسها .. background-repeat هي المسؤلة عن تكرار صورة الخلفية .. ولها خمس قيم فقط لا غير ..
وهي ..
repeat
no-repeat
repeat-x
repeat-y
inherit
تستطيع استخدام القيمة التي تناسبك ..
ويصبح شكل الكود مع القيمة الاولي وهي القيمة الافتراضية التي سيتم اعتمادها حتي لو لم تضع الخاصية ..
قيمة التكرار الكلي ..


body {
background-repeat:repeat;
}

حسنا ماذا يعني هذا الكود ؟؟
انني امرت الصفحه ان تغير خصائص العنصر الاصلي body بحيث يكون تكرار الخلفية كلي ( رأسيا وافقيا )
وكما يظهر ان الخاصية هي background-repeat وانتهت بوضع نقطتين فوق بعضهم : والقيمة هي repeat وانتهي العنصر وقيمته بوضع الفصله المنقوطة ;

القيمة الثانية ..


body {
background-repeat:no-repeat;
}

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

القيمة الثالثة ..


body {
background-repeat:repeat-x;
}

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

القيمة الرابعه ..


body {
background-repeat:repeat-y;
}

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

القيمة الخامسة والاخيرة ..


body {
background-repeat:inherit;
}

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

اتمني تكون وضحت المساله .. واسف علي الاطاله .. حاولت اشرحها بشكل مفصل ..
اتمني تكون وصلت .. ^_^

H A T S H Y
01-06-2011, 03:25
شيء رائع بالفعل
وبالنسبة لي انا اعتمد على صيغة الـ ( jpg ) لما لها من أمكانية من تعديل حجم الصورة بحيث تُحافظ على ألوانها ودقتها بأقل حجم مُمكن ، بالتأكيد تعرف هذة القائمة :D

http://www.mexat.com/vb/attachment.php?attachmentid=1453435&stc=1&d=1306876775

انا دائماً انصح الجميع اثناء الحفظ بصيغة الـ ( jpg ) مع مراعاة أن لا تقل دقة الحفظ عن 85 والأفضل 90 :) لأننا سنحصل على حجم أقل وبجودة وألوان جيدة ::جيد:: ..

( png ) صيغة مُمتازة وهي الأفضل من بين الصيغ السابقة ، لكن لأ استطيع التحكم بدقتها كما أفعل مع الـ ( jpg ) :p



الحيلة المُفضلة لدي :سعادة2: لتنجب مشاكل حجم صور الـ ( png ) ..

شكراً لتوضيح هذة النقطة لنا ، هذة النقطة مهمة جداً لنا كمصممين :) ..


.
.

لي عودة لأكمال الباقي :D


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

بالفعل التحكم في صيغه png يكون فقط للـ png-8 وهي بالاساس جودة سيئة فمهما رفعت الجودة ستصبح سيئة ..
اما الكودة png-24 فهي الافضل ومع الاسف لا يمكن ان تتحكم بالجوده فهي ثابته .. ولكنها تقوم بالغرض اذا راعيت المساحه والالوان قبـلا ..
استخدم تلك الصيغه مع الصور صغيرة الحجم فتستطيع استخدامها مع الاطراف فقط لتحصل علي اقل حجم ممكن .. كما سبق واستخدمتها في تقطيع اطراف القالب بالاعلي ..

هناك العديد من الحيل .. وهي تقف فقط علي مخيلة المصمم ..
فعلي كل مصمم ان يستنبط طريقتة في التقطيع وحيلتة المفضلة من القالب الذي يعمل عليه ..
فالتقطيع ليس بسيط كما يري البعض .. هو جزء مهم جدا فهو مسؤل عن سرعه وجمال القالب في النهاية ..
لذلك يجب ان يكون هناك لمسة ابداعية وبصمة خاصة في تقطيع القوالب المختلفة .. فلا يوجد قالبين يتم تقطيعهم بنفس الطريقة ..
فلكل قالب ظروفة وخصائصة ..

سعدت بوجودك عمو ايدو .. ^_^

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

Senya Phoenixia
01-06-2011, 10:08
ماشاء الله مجهود كبير جداً فالورشة ^_^

واصلوا ..

بورون
02-06-2011, 16:07
حسنا .. في الحقيقة لم افهم قصدك ..
وما علاقة ما فعلته حتي الان بـ css
كل تلك الخطوات ماهي الا شـرح لتقطيع القـالب فقط ..
وسيتم توزيعه مرتين بأذن الله ..
الاولي بالجداول والثانية css
كيف يمكن ان تقوم بتقطيع القالب عن طريق الـ css !!
في الواقع لا اعرف طريقة للتقطيع الا بالفوتوشوب ..
هل الـ css اصبح اداه لتقطيع الصور الان !!
.. في الحقيقة لم افهم اي شـئ ..
كل ما نملك الان مجموعه من الصور القليلة والتي تمثل القالب وجاهزة للتوزيع ..
ولم اكتب ولا سطر من الكود حتي الان ..
اذن ماذا تقصد !! .. اتمني لو توضح .. ^_^
وشـكرا لك علي كل شئ .. والله مع الجميع باذن الله ..

قصدت أمرا آخر, وهو أن هذا القالب لايحتاج إلى فوتوشوب أبدا !
فقط تقطع الخلفية وانتهى, البقية يمكن تعوضيها بـcss
ولكن لا مشكلة
واصل...

H A T S H Y
02-06-2011, 16:14
قصدت أمرا آخر, وهو أن هذا القالب لايحتاج إلى فوتوشوب أبدا !
فقط تقطع الخلفية وانتهى, البقية يمكن تعوضيها بـcss
ولكن لا مشكلة
واصل...


غير ممكن .. ^_^

بورون
02-06-2011, 19:38
^

حسناً
واصل ولا مشكلة...

في أمان الله : - )

X100
08-06-2011, 11:32
عم الهدوء ، وحل السلام .. النهاية :ضحكة: ؟

H A T S H Y
08-06-2011, 16:08
عم الهدوء ، وحل السلام .. النهاية :ضحكة: ؟


ابدا ..
لن نحظي بهدوء حقيقي ابدا في هذه الورشة ..
الويب في تطور دائما .. وستظل الورشة دائما تجد ما تقدمة باذن الله ..
ولكن .. للاسف مع الانشغال والعمل والاختبارات .. لا وقت كافي للتحضير ..
لا بأس من الشـرح التمهيدي للجداول .. قبل الشـروع في التوزيع الكامل ..
فلم نتطرق الي بناء الجداول بعد .. ^_^

X100
08-06-2011, 17:52
هههه كنت امزح ، الله يعينكم .

نشوفكم بعد الاختبارات بإذن الله =)

Master Edward
17-06-2011, 18:36
عودة للطالب الـكسول :لعق: ..
ان شاء الله من الان سأبدء بالمتابعة بشكل مستمر :)

.
.

Master Edward
17-06-2011, 19:54
~Hatshy



نعم بالفعل طريقة جيده .. ولكن هناك افضل منها ..
عنها ستحصل علي افضل نتيجة باقل مساحة ومتوافقة مع كل الحاسبات ودقات الشاشات المختلفة ..
فكما تري عرض القالب 960 ماذا سيحدث اذا كانت دقة شاشاتك بعرض 1200 مثـلا !!
سيظهر تشوه علي جانبي القالب يمينا ويسارا ..
لذلك عليك مراعاه تلك النقطه دائما ..
ان يظهر قالبك بافضل صورة مهما اختلفت الاعدادات والحواسب ..


نعم نعم اتفق مع في ذلك :p
حسناً حتى الان لم أقم سوى بتصميم ستايل ثابت واحد حتى الان واكيد سبق لك ان اطلعت عليه :D
واليك صورة الخلفية التي صممتها له >> للأسف وقتها كُنت اعتمد على حفظ الصور بـ ( Gif )

http://www.mexat.com/vb/attachment.php?attachmentid=1463799&stc=1&d=1308336249

بالمناسبة ابعاد الشاشة لدي هي ( 1028×1280 ) :لقافة:
وعرض الخلفية كان 1303 px اتذكر حدهم قال لي ان هذا القياس هو المُستخدم في جميع الخلفيات وانا بصراحة غير مقتنع بالأمر :موسوس: ..!


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


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


.................................................. ...............




هذا هو كود Css وهو بهذا الشـكل غير كامل ..
كما سبق ووضحت في درس Css سابق ..
الكود يتكون من 4 اجزاء ..
الجزء الاول وهو العنصر .. ويكون اول شئ يكتب .. ولا يتكرر مرة اخري ..
وهناك نوعين من العناصر .. عناصر الاوسمة الاصلية في HTML مثل Body div table وهكذا ..
والنوع الاخر هو العنصر الاختياري الذي تصنعه انت .. ويكون اي اسم تختارة ويجب ان تسبقة بنقطه .. هكذا .. مثلا Edward.
والفرق بين النوعين .. ان الاول يتم تعريفة بشكل اتوماتيكي في الصفحة لدي لغه HTML فلا تحتاج الا ان تكتبة وسيتعرف عليه بسهولة ..
اما الاخر فعليك تعريفة داخل الكيانات في صفحتك .. عن طريق المعرفان اما class او ID ولن اشرح الفرق فقد سبق ذلك

حسنا .. بعد كتابه العنصر يجب ان تفتح قوسين بهذا الشكل تماما { } ولا يقبل اي نوع اخر من الاقواس ..
ويكتب داخل تلك الاقواس الخصائص والقيم .. وكل خاصيه لها قيمتها الخاصه والتي تناسبك ..
ويتم الفصل بين الخاصية والقيمة بنقطتين فوق بعضهم : ويتم اغلاق الخاصية والقيمة بفصلة منقوطة ;
وبالطبع تستطيع اضافه العديد من الخصائص علي عنصر وحيد .. وسنتطرق الي تكوين الكود بشكل مفصل مستقبلا باذن الله ..
والان عن الكود الذي وضعته .. هو كود تكرار الخلفية .. وهو غير مكتمل ..
وبما ان كود الخلفية هو للصفحة بشكل عام اذن غالبا سيكون العنصر هو Body فهو عنصر اصلي واساسي في كل صفحة .. والمسؤل عن الجسم ..
وعن الخاصية نفسها .. background-repeat هي المسؤلة عن تكرار صورة الخلفية .. ولها خمس قيم فقط لا غير ..
وهي ..
repeat
no-repeat
repeat-x
repeat-y
inherit
تستطيع استخدام القيمة التي تناسبك ..
ويصبح شكل الكود مع القيمة الاولي وهي القيمة الافتراضية التي سيتم اعتمادها حتي لو لم تضع الخاصية ..
قيمة التكرار الكلي ..


body {
background-repeat:repeat;
}

حسنا ماذا يعني هذا الكود ؟؟
انني امرت الصفحه ان تغير خصائص العنصر الاصلي body بحيث يكون تكرار الخلفية كلي ( رأسيا وافقيا )
وكما يظهر ان الخاصية هي background-repeat وانتهت بوضع نقطتين فوق بعضهم : والقيمة هي repeat وانتهي العنصر وقيمته بوضع الفصله المنقوطة ;

القيمة الثانية ..


body {
background-repeat:no-repeat;
}

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

القيمة الثالثة ..


body {
background-repeat:repeat-x;
}

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

القيمة الرابعه ..


body {
background-repeat:repeat-y;
}

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

القيمة الخامسة والاخيرة ..


body {
background-repeat:inherit;
}

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

اتمني تكون وضحت المساله .. واسف علي الاطاله .. حاولت اشرحها بشكل مفصل ..
اتمني تكون وصلت .. ^_^




وآاو معلومات وغنية جداً ..
لكن القيمة الخامسة صعب جداً ان افهمها :p
لكن سأجربها ربما اكتشف معنا ماقلته بالتطبيق :)

.
.

لي عودة

Master Edward
19-06-2011, 14:59
~Hatshy



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


اما عن الفرق الحقيقي بين القالب المتمدد والقالب الثابت ..
هو عرض الجدول الاساسي ..
الجدول الاساسي في القالب المتمدد يكون 100%
اما في الثابت يكون بالبكسيل وهو كما تريد .. ولكن الافضل للقوالب الثابته ان يكون العرض 960 بكسيل ..
فهو العرض الاكثر شيوعا واستخداما والذي يظهر بشكل مناسب لمعظم الحاسبات المختلفة ودقات الشاشات المختلفة ..
نعم اثقل خطوة على قلبي هي الجداول بالنسبة للمتدد فأنا لا أجد مشاكل معه :لعق:
لكن يبدو ان احتاج ان اتدرب أكثر على الثابت :موسوس:




وبعد ان وضحنا تلك النقطة المهمة الان نبدأ بالتقطيع .. ولكن اولا اسمحو لي ان اوضح الاجزاء التي سيتم العمل عليها ..


http://img827.imageshack.us/img827/6491/36015197.jpg


والهدف هنا توضيح الاجزاء التي سنعمل عليها فقط وليس التقطيع حتي لا تفهم الصورة خطأ .. ^_^


.
.

جاري الأطلاع على شرح كل جزء من الصور :مكر: ..
لي عودة للرد كذلك ;)

Master Edward
19-06-2011, 15:24
~Hatshy



،

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

الجزء رقم ( 1 )

تعامل الجميع مع هذا الجزء وكأنه اطار علي جانبين التصميم ..
بالتأكيد يمكن فعل ذلك .. ولكن هذا لن يكون مناسبا .. فاذا كانت دقة الشاشة لديك اكثر من 1000 بكسيل ..
ستظهر خلفية الصفحة الاساسية بعد تلك الاطارات .. وستسبب تشوه بالتصميم .. ويجب ان تراعي دقه جميع الشاشات في تصميمك ..
اذن كيف يمكن التغلب علي تلك النقطة ؟؟
الشئ الذي يجب ان نستنبطة من تلك الاطارات .. انها ليست اطارات ولا شئ .. ليست هي الا مجرد خلفية متكرره ( باترن ) ..
الم تلاحظو ذلك معي ؟؟ انها ليست الا جزء صغير ويتكرر مرارا وتكرارا .. !!
اذن تستطيع ان تستغل ذلك الجزء في تقليص الصور .. وهو استخدام هذا الـ ( باترن ) كصورة واحده ووضعها كخلفية للصفحة كلها ..
يتكرر بنفس الشكل ايضا وستظهر بشكل مثالي علي كل الحاسبات والشاشات مهما كانت الدقة او حجم الشاشة ..

واليكم الفـرق بين الطريقتين ..

هذا هو الجزء الذي اتفق عليه معظم الاراء .. ان يكون بهذا الشكل قطعه واحده ..


http://img218.imageshack.us/img218/2047/33095391.jpg


حسنا كم مساحه هذا الجزء ؟؟
29.35KB لـ نوع JPG مع العلم ان هذا الجزء بنفس الجوده وبنوع GIF بمساحه 57.46KB
وهذا ما تحدثت عنه قبلا في اختيار نوع الصور حفاظا علي مساحه الصور ..
مع العلم ان هذا للقطعه التي علي اليمين فقط !!
والجزء الاخر علي اليسار نفس الحجم تقريبا اذا الاطارات فقط بمساحه تقترب من 60KB لـ JPG و تقترب من 115KB لـ GIF
ورغم كل ذلك لن تظهر بشكل جيد لمن هم يستخدمون دقة شاشة اعلي من 1000 بكسيل للعرض ..

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

http://img801.imageshack.us/img801/3863/10919345.jpg

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

والان بتنفيذ نفس الطريقة علي القالب .. سنحصل علي الشكل التالي ..

http://img838.imageshack.us/img838/600/58552119.jpg

ولاحظو معي ان مساحه الصورة تصل الي 5KB من نوع JPG
وحتي يتأكد الجميع من سـلامه الجزء .. اليكم 4 صور متلاصقة ..

http://img838.imageshack.us/img838/600/58552119.jpghttp://img838.imageshack.us/img838/600/58552119.jpg
http://img838.imageshack.us/img838/600/58552119.jpghttp://img838.imageshack.us/img838/600/58552119.jpg

والان انتهينا من خلفية الصفحة .. يبقي جزء مهم في القطعه رقم 1
وهي الاطار الفعلي للقالب .. الموضح في الشـكل التالي ..

http://img689.imageshack.us/img689/8602/88465701.jpg

وكما هو موضح سيتم تقطيعه تماما بهذا الحجم .. بعرض 15 بكسيل
وطول 1 بكسيل وبخلفية شفافة .. ولكن احذر عليك ان تحفظها بنوع PNG لان الـ GIF لا يدعم التدرجات علي الخلفية الشفافة ..
يظهر لون ابيض علي اطراف التدرج الشفاف .. وسوف يشوه شكل القالب .. لذلك يفضل PNG ولا تخف من الحجم لان مساحة الصورة صغيرة .. 15×1
واليكم الجزء الذي تم تقطيعة .. هكذا ..

http://img148.imageshack.us/img148/4368/87976915.png

ولاحظو معي ان مساحه الصورة اقل من ربع كيلو بايت .. !!
ونفس الشئ في الجزء الايسر من القالب .. هكذا ..

http://img268.imageshack.us/img268/1601/42871617.png

** تم تقطيع الصورة علي طول 1 بكسيل فقط لان معدل التكرار 1 بكسيل .. لا يوجد اي اختلاف من بكسل لاخر .. فاذا تكرر لن يكون هناك فرق ..
بعكس الـ ( باترن ) السابق فقد كان معدل التكرار 100 بكسيل .. !!

وهكذا نكون قد انهينا الاطار والخلفية بشـكل احترافي تام .. وباقل مساحه ممكنه .. لكل الصور حتي الان وهي اقل من 6KB

الان وبعد ان انتهينا من القطعه رقم 1 .. يبقي سؤال مهم ..
ماذا سنفعل اذا كانت الخلفية غير متكرره .. !!
سنتطرق مستقبلا في قالب اخر بأذن الله الي هذا الجزء ..

شـكرا لحسن استماعكم ..
وباذن الله نكمل باقي الاجزاء معا في ايام قليله قادمه ..
بالتوفيق للجميع ان شاء الله ودمتم جميعا بخير وصحة .. ^_^






والان انتهينا من خلفية الصفحة .. يبقي جزء مهم في القطعه رقم 1
وهي الاطار الفعلي للقالب .. الموضح في الشـكل التالي ..

http://img689.imageshack.us/img689/8602/88465701.jpg

وكما هو موضح سيتم تقطيعه تماما بهذا الحجم .. بعرض 15 بكسيل
وطول 1 بكسيل وبخلفية شفافة .. ولكن احذر عليك ان تحفظها بنوع PNG لان الـ GIF لا يدعم التدرجات علي الخلفية الشفافة ..
يظهر لون ابيض علي اطراف التدرج الشفاف .. وسوف يشوه شكل القالب .. لذلك يفضل PNG ولا تخف من الحجم لان مساحة الصورة صغيرة .. 15×1
واليكم الجزء الذي تم تقطيعة .. هكذا ..


بعد هذا التقطيع ،
جـآئتني رغبة قوية فعلاً للأطلاع على كيفية توزيعها مستقبلاً

يعطيك العافية على الشرح المُمـيز والمذهل كالعادة
بالتوفيق لك ، وبترقب شرح التوزيع :D طبعاً بعد ما اطلع على بقية الشرح ..

.
.

لي عودة

Master Edward
01-07-2011, 23:50
~Hatshy


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






بــــــــــــــاك
عدت اليكم من جديد لنكمل تقطيع باقي القالب سويا ..
الان وبعد ان اصبحت القطع رقم 1 جاهزة للعمل يبقي الخمس قطع الاخري ..
وبالنسبة للتقطيع الباقي هو الاسهل .. فاعتقد ان التكنيك المستخدم اصبح واضح ..
ولن نستهلك كثيرا من الوقت في باقي القطع ..

القطة رقم ( 2 )

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

http://img51.imageshack.us/img51/7648/11508731.jpg

تصل حجم الصورة الي .. 37.1KB
حسنا لماذا نرضي بتلك المساحة ونحن نستطيع ان نقلصها ..
حتي وان كان التمدد سيأتي بنفس الحجم فانت الفائز .. ستستطيع تحويل القالب الي متمدد في ثانية واحدة !!

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

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

http://img808.imageshack.us/img808/5728/59880818.jpg
بمساحه .. 3.84KB

http://img218.imageshack.us/img218/7268/m10h.png
بمساحه .. 21.1KB
مع العلم ان مساحه تلك الصورة بامتداد JPG يصل الي 22KB بنفس الجوده ..

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

http://img808.imageshack.us/img808/5728/59880818.jpghttp://img808.imageshack.us/img808/5728/59880818.jpghttp://img808.imageshack.us/img808/5728/59880818.jpghttp://img808.imageshack.us/img808/5728/59880818.jpg

والان بعد ان انهينا القطعه رقم ( 2 ) اعتقد لا حاجة لشرح القطعه رقم ( 6 ) فسوف نستخدم نفس الطريقة تماما ..
لذلك اكتفي بوضع القطع بعد التقطيع هكذا ..

http://img849.imageshack.us/img849/1739/m11mf.jpg
بمساحة .. 1.171KB

http://img508.imageshack.us/img508/9326/m12o.png
بمساحة .. 8.1KB
وبذلك يكون حجم الفوتر ككل اقل من 10KB والتي هي اقل من الفوتر كقطعه واحدة بحوالي 5KB قد يري البعض انها مساحه لا تذكر .. ولكنها بالفعل 50% من حجم الفوتر الان ..!!

واليكم اربع قطع من التمدد حتي تتأكو من سلامته ..

http://img849.imageshack.us/img849/1739/m11mf.jpghttp://img849.imageshack.us/img849/1739/m11mf.jpghttp://img849.imageshack.us/img849/1739/m11mf.jpghttp://img849.imageshack.us/img849/1739/m11mf.jpg


عفوا .. ارجو عدم الرد !!







شرح رائع ، :eek: لم أفكر قبلاً بإستخدام هذا الأسلوب في التقطيع ::جيد::
فعلاً طريقة مفيدة ومهمة جداً للمساعدة على تقليل حجم الصور ::سعادة:: ..
ما شاء الله عليك لم تترك جزء وألا استغليته ..

سلمت على الشرح

.
.

لي عودة :) << بنشوف امتى :تعجب:

H A T S H Y
02-07-2011, 02:15
^ ^ ^

عمــو ايدو .. ما شاء الله منـور الورشة ..
ونشاط رائع جدا .. اتمني يكون الشـرح اعجبك .. ^_^
تقبل تحياتي ..

H A T S H Y
02-07-2011, 11:42
السـلام عليكم ..
بسم الله الرحمن الرحيم ..

اولا اعتزر عن الغياب اللي طال كان مفترض ان يتواصل الشرح حتي الانتهاء ..
لانه مترابط بشكل كبير .. ولكن لا بأس اتمني لو الجميع يعيد نظره سريعه علي ما سبق لنتذكر معا ..
وها قد عدنا من جديد .. مع الشرح التمهيدي للتوزيع ..
علينا اولا بتعلم بناء الجداول ..
دعونا نبدأ مباشره ..
يتكون الجدول من 3 اجزاء اساسية ..
وجدير بالذكر ان كل الوسوم التي يتكون منها الجدول هي من نوع Container
اي انها وسوم يجب اغلاقها بعد الانتهاء ولا تغلق بشكل اتوماتيكي ..
الجزء الاول وهو الكيان ويتمثل في وسم الجدول الاساسي وهو وسم Table
وهو الوسم الذي يحدد خصائص الجدول والشكل العام والاطار الخارجي له ..
واليكم بعض الخصائص التي يمكن اضافتها في هذا الوسم ..
cellspacing --- خاصيه تحدد مقدار الفواصل بين الحقول داخل الجدول .. وتكون الفراغات متناسبة بين كل الحقول رئسيا وافقيا ..
cellpadding --- خاصيه تحدد مقدار الفواصل داخل الحقول .. وتكون متناسبة رأسيا وافقيا ..
border --- خصائص الادار الخارجي للجدول ..
بالاضافه الي العديد من الخصائص الاضافية المعتاده مثل ..
width -- height -- align
الجزء الثاني وهو الوسم tr
وهو الوسم السؤل عن الصفوف ..
ومعني انك تضع هذا الوسم داخل وسم الجدول انك تريد ان تامر المتصفح بان يذهب الجدول الي سطر جديد ..
وهذا الوسم له خصائص محدودة .. ولا يسمح بخصائص الطول والعرض*
الجزء الاخير هو يتكون من وسمان .. وسم اساسي ووسم ثانوي ..
هما td و th
td يمثل امر الحقول العاديه ..
th يمثل امر الحقول الرئيسية ..
ويتمتعان بكثير من الخصائص ومنها الطول والعرض ..

ملحوظة* : خطأ شائع يقع به الكثيرين .. الوسم tr لا يسمح ابدا بخصائص width او height ..

حسنا وبعد ان تعرفنا علي الاجزاء الرئيسية ..
كيف يتم تجميعهم لبناء جدول ناجح ؟؟

ارجوو عدم الرد !!

H A T S H Y
02-07-2011, 12:28
،

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





<table width="100%" border="1" cellpadding="1" cellspacing="1">
<tr>
<td>&nbsp;</td>
</tr>
</table>




حسنا هذه سيكون الشكل وكما يظهر من الخصائص
انني امرت المتصفح ان يظهر جدول بعرض 100% متمدد حسب حجم النافذه ..
وان يكون حجم برواز الجدول 1 بكسيل والفواصل بين الحقول 1 بكسيل
والفواصل داخل الحقول 1 بكسيل ..
مع توضيح ان &nbsp; هي تعني المسافه الفارغه .. التي تمثل المسطرة الطويلة في لوحه مفاتيحك ..
وجدير بالذكر ان المتصفح لا يقرأ المسافات ابدا ولا يعترف الا بهذا الكود فقط ..

وسيكون شكل الجدول هكذا ..
http://www.mexat.com/vb/attachment.php?attachmentid=1476293&stc=1&thumb=1&d=1309609077

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

حقلين متجاورين ..






<table width="100%" border="1" cellpadding="1" cellspacing="1">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>



سيكون شكله هكذا ..

http://www.mexat.com/vb/attachment.php?attachmentid=1476294&stc=1&thumb=1&d=1309609077

ارابع حقول في صفين ..






<table width="100%" border="1" cellpadding="1" cellspacing="1">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>



وسيكون شكله هكذا ..

http://www.mexat.com/vb/attachment.php?attachmentid=1476295&stc=1&thumb=1&d=1309609077

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



ارجو عدم الرد .. !!

H A T S H Y
02-07-2011, 13:22
،

حسنا والان بعد ان اتقنا بناء الجداول ..
هناك اضافه فريده ومهمه جدا يجب ان نتقنها ايضا ..
وهي دمج الحقول ببعضها ..
ما فائده دمج الحقول ؟؟
عده فوائد .. اولا تعطيك انسيابية في شكل الجدول ..
فانت غير مقيد بمقايس ومعاير الجدول القياسية .. تستطيع ان تصنع جدول خاص بك ..
وبشكل خاص جدا ..
ماذا ستفعل اذا اردت ان تجعل حقل في منتصف الجدول بعرض الجدول نفسة ..
هناك طريقتان .. واحده قصيرة وسريعه .. والثانية بطيئة وطويلة ..
الثانيه هي ان تصنع 3 جداول .. بحيث يكون الجدول في المنتصف من حقل واحد وبعرض الجداول الاخري ..
اما الاولي وهي المميزة هي ان تدمج كل الحقول في الصف الذي يقع في منتصف الجدول مع بعضها ..
بالتأكيد كلما قللت عدد الجداول في صفحتك كلما كانت اسرع وافضل ..
الان كيف نقوم بدمج الحقول ..
الطريقة بسيطه جدا .. في حال اذا اردنا ان ندمج حقول تقع في صف واحد ..
وبفرض ان الجدول الاخير في المثال السابق هو الذي سنطبق عليه الدمج ..
مثلا نريد ان ندمج الحقلان في الصف الاول معا ..
سنحذف كود احدي الحقول بحيث يظهر وكأنه كود حقل واحد
ولكن سنضيف الي الحقل خاصية الدمج وهي colspan
وتعطي تلك الخاصية قيمة الحقول المدموجه ..
بمعني انك اذا اردت ان تدمج حقلان ستعطيها الرقم 2 واذا اردت ان تدمج ثلاث حقول ستعطيها رقم 3 وهكذا ..
واليكم الكود علي الطبيعة ..




<table width="100%" border="1" cellpadding="1" cellspacing="1">
<tr>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>



تلاحظون معي شكل الكود وشكل الحقل الاول ..
وسيكون شكل الجدول هكذا ..
http://www.mexat.com/vb/attachment.php?attachmentid=1476347&stc=1&thumb=1&d=1309612497
والان ماذا اذا اردنا ان ندمج حقول في عمود واحد ؟؟




<table width="100%" border="1" cellpadding="1" cellspacing="1">
<tr>
<td rowspan="2">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>



هل تلاحظون الاختلاف ..
وسيكون شكل الجدول الان هكذا ..
http://www.mexat.com/vb/attachment.php?attachmentid=1476348&d=1309612497
وهذه الاضافات مهمه جدا ويجب ان تكون دائما نصب عينك ..
توفيرا للوقت والجهد دائما ..

ومن الجدير بالذكر ان تنسيق الجدول بالـ HTML فقط لا يعطيك ميزات وخصائص كثيرة ..
ومنها مثلا لون البرواز الخاص بالجدول لا تستطيع تعديله من دون Css وايضا شكل البرواز فهو دائما بارز ..
وهناك بعض الاوسمة الداخليه الاضافية التي تساعد علي التنسيق البسيط وهي
thead و tbody و tfoot
و تستطيع ان تضيف احدي الاوسمة الثلاثه علما بانها لا تغلق بشكل اوتوماتيكي وتحتاج الي الاغلاق ..
وتقع قبل وسم tr مباشرة .. وتغلق بعد اغلاقه ايضا ..
وهذه الوسوم لا تعطيك الا ميزات بسيطة مثل align او valign
الاستفاده منها ستكون ان شاء الله في Css ..

هنا نكون قد تعلمنا بناء الجداول بشكل كامل ..
وسننتقل ان شاء الله في الدرس القادم الي التوزيع الفعلي للقالب السابق ..
خلال ايام قادمه ان شاء الله ..
والان اقدم لكم اول تطبيق فعلي منذ بدايه الورشة ..
اتمني ان يتفاعل الجميع لان هذا الدرس هو اساسي ومهم جدا لكل مصمم مواقع ..
كيف تكتب كود هذا الجدول ؟؟
http://www.mexat.com/vb/attachment.php?attachmentid=1476349&stc=1&thumb=1&d=1309612497
اتمني من الجميع ان يكتبون الكود يدويا دون اللجوء الي برامج خارجيه ..
هذا في مصلحتكم جميعا حتي تفهمو وتتشربو الكود جيدا ..
لا بأس من الاخطاء الجميع يخطئ ..
بالتوفيق ان شاء الله ..
وان تظر التطبيقات ..
في امـان الله .. ^_^

Master Edward
02-07-2011, 18:37
^ ^ ^

عمــو ايدو .. ما شاء الله منـور الورشة ..
ونشاط رائع جدا .. اتمني يكون الشـرح اعجبك .. ^_^
تقبل تحياتي ..


اتباع الورشة ولكن ليس بشكل مستمر :d
ما شاء الله لحقت تحط درس جديد ..

لي عودة في الليل بعد الساعة 2 اذا تسنى لي الوقت :)
شكراً لإبــداآعك

Master Edward
05-07-2011, 17:00
~Hatshy





الان ننتقل الي القطعه رقم ( 3 )
القطعه هي تمثل جسم الصفحة .. ولا يمكن ان نحتسبها جزء يصلح للتقطيع ..
لانها مكونه من لون خالص ( Solid Color ) ونحن نريد توفير الصور .. لذلك سنقوم بتحويلة الي مجرد كود فقط ..
بمعني ان هذة القطعه لا تحتاج الي اي تقطيع .. ومثلها كل الاماكن التي تحتوي علي الوان خالصه .. هي فرصه جيدة لتقليل الصور ..
فالكود يقوم بالغرض علي اكمل وجه .. ولا حاجة لاستخدام صور في هذا الجزء ..

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




عفوا .. ارجو عدم الرد ..!!








،

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

http://img194.imageshack.us/img194/7011/18973459.jpg http://img830.imageshack.us/img830/4405/85466107.jpg http://img836.imageshack.us/img836/706/36959011.jpg
http://img577.imageshack.us/img577/9531/58023686.jpg http://img339.imageshack.us/img339/1250/91977589.jpg

http://img225.imageshack.us/img225/8398/13943557.jpg http://img651.imageshack.us/img651/8554/35652248.jpg http://img191.imageshack.us/img191/6313/89089505.jpg

وكما يري الجميع مجموع القطع الثامنية اقل من 5KB وهي كل الصور التي سنحتاجها الي ذلك القالب ..
اما عن الجزء بالمنتصف سنستبدلة بكود لانه لون خالص .. ^_^

واليكم دليل علي التمدد في الجزء الاعلي والاسفل ليظهر لكم قالب مصغر ..

http://img194.imageshack.us/img194/7011/18973459.jpghttp://img830.imageshack.us/img830/4405/85466107.jpghttp://img830.imageshack.us/img830/4405/85466107.jpghttp://img830.imageshack.us/img830/4405/85466107.jpghttp://img830.imageshack.us/img830/4405/85466107.jpghttp://img830.imageshack.us/img830/4405/85466107.jpghttp://img830.imageshack.us/img830/4405/85466107.jpghttp://img830.imageshack.us/img830/4405/85466107.jpghttp://img830.imageshack.us/img830/4405/85466107.jpghttp://img830.imageshack.us/img830/4405/85466107.jpghttp://img830.imageshack.us/img830/4405/85466107.jpghttp://img830.imageshack.us/img830/4405/85466107.jpghttp://img830.imageshack.us/img830/4405/85466107.jpghttp://img830.imageshack.us/img830/4405/85466107.jpghttp://img830.imageshack.us/img830/4405/85466107.jpghttp://img830.imageshack.us/img830/4405/85466107.jpghttp://img830.imageshack.us/img830/4405/85466107.jpghttp://img830.imageshack.us/img830/4405/85466107.jpghttp://img830.imageshack.us/img830/4405/85466107.jpghttp://img836.imageshack.us/img836/706/36959011.jpg
http://img225.imageshack.us/img225/8398/13943557.jpghttp://img651.imageshack.us/img651/8554/35652248.jpghttp://img651.imageshack.us/img651/8554/35652248.jpghttp://img651.imageshack.us/img651/8554/35652248.jpghttp://img651.imageshack.us/img651/8554/35652248.jpghttp://img651.imageshack.us/img651/8554/35652248.jpghttp://img651.imageshack.us/img651/8554/35652248.jpghttp://img651.imageshack.us/img651/8554/35652248.jpghttp://img651.imageshack.us/img651/8554/35652248.jpghttp://img651.imageshack.us/img651/8554/35652248.jpghttp://img651.imageshack.us/img651/8554/35652248.jpghttp://img651.imageshack.us/img651/8554/35652248.jpghttp://img651.imageshack.us/img651/8554/35652248.jpghttp://img651.imageshack.us/img651/8554/35652248.jpghttp://img651.imageshack.us/img651/8554/35652248.jpghttp://img651.imageshack.us/img651/8554/35652248.jpghttp://img651.imageshack.us/img651/8554/35652248.jpghttp://img651.imageshack.us/img651/8554/35652248.jpghttp://img651.imageshack.us/img651/8554/35652248.jpghttp://img191.imageshack.us/img191/6313/89089505.jpg

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

ولن استطيع ان اريكم التمدد الطولي لان الصور لا تلتصق في المشاراكات بطول 1 بكسيل ..

تم بحمد الله التقطيع للقالب بالكامل ..
اتمني اكون موفق في الشرح .. ووصل للجميع ..
واي استفسار او سؤال انا حاضر ..
لنبدأ باذن الله التوزيع بالطريقة الاولي وهي الجداول ..
مع مطلع الاسبوع القادم ..
شـكرا لحسن استماعكم ..
وبالتوفيق للجميع دائما ..
دمتم بخير وصحه .. ^_^



هذة النقطة من الشرح مفهوما لدي لذا ليس لدي اي استفسارات عنها :)
وجاري الآطلاع على مرحلة التوزيع ^.^

.
.

Master Edward
05-07-2011, 17:56
~Hatshy



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

درس كـبير والحمد الله قرب راسي ينفجر من كثر الملعومات
درس الجداول كُنت انتظرة بفارغ الصبر :سعادة2: شكراً لك على الشرح
اخـيراً اننا بدينا نخش دروس تطبيقية ::سعادة::
جاري عمل الكود للشكل المطروح :غياب: ربنا يستر ..

.
.

لي عودة :)

Master Edward
05-07-2011, 21:17
عدنا بعد ان قضيت نصف بكاملها مليئة بالأخطاء :غياب: ..
بناء الجدول سهل جداً بثواني انتهيت منه ، لكن من اجل الحصول على نفس نتيجة الكود اللي طلبته منا بالواجب أخذ الكثير :غول: اخترعت اشكال كثيرة :لعق: لكن وجدت الحل بسهولة كل ما احتجته هو حساب وترتيب الأكواد بشكل صحيح ..

عندك هنا بداية انشاء الجدول :



<table width="100%" border="1" cellspacing="1" cellpadding="1" >
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<tr/>
</table>



http://www.mexat.com/vb/attachment.php?attachmentid=1478791&stc=1&d=1309891078

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



<table width="100%" border="1" cellspacing="1" cellpadding="1" >
<tr>
<td colspan="4">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="4">&nbsp;</td>
</tr>
</table>



http://www.mexat.com/vb/attachment.php?attachmentid=1478963&stc=1&d=1309900754


واخيراً النتيجة :D :



<body>
<table width="100%" border="1" cellspacing="1" cellpadding="1" >
<tr>
<td colspan="4">&nbsp;</td>
<td rowspan="2">&nbsp;</td>
</tr>
<tr>
<td rowspan="5">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="4">&nbsp;</td>
</tr>
</table>
</body>



http://www.mexat.com/vb/attachment.php?attachmentid=1478964&stc=1&d=1309900857

.
.

كم تعطيني درجة :سعادة2:
ياليت نشوف واجبات زي كدة مع كل شرح ;)

يعطيك العافية .. لنا عودة

H A T S H Y
06-07-2011, 06:54
عدنا بعد ان قضيت نصف بكاملها مليئة بالأخطاء :غياب: ..
بناء الجدول سهل جداً بثواني انتهيت منه ، لكن من اجل الحصول على نفس نتيجة الكود اللي طلبته منا بالواجب أخذ الكثير :غول: اخترعت اشكال كثيرة :لعق: لكن وجدت الحل بسهولة كل ما احتجته هو حساب وترتيب الأكواد بشكل صحيح ..

عندك هنا بداية انشاء الجدول :



<table width="100%" border="1" cellspacing="1" cellpadding="1" >
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<tr/>
</table>



http://www.mexat.com/vb/attachment.php?attachmentid=1478791&stc=1&d=1309891078

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



<table width="100%" border="1" cellspacing="1" cellpadding="1" >
<tr>
<td colspan="4">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="4">&nbsp;</td>
</tr>
</table>



http://www.mexat.com/vb/attachment.php?attachmentid=1478963&stc=1&d=1309900754


واخيراً النتيجة :D :



<body>
<table width="100%" border="1" cellspacing="1" cellpadding="1" >
<tr>
<td colspan="4">&nbsp;</td>
<td rowspan="2">&nbsp;</td>
</tr>
<tr>
<td rowspan="5">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="4">&nbsp;</td>
</tr>
</table>
</body>



http://www.mexat.com/vb/attachment.php?attachmentid=1478964&stc=1&d=1309900857

.
.

كم تعطيني درجة :سعادة2:
ياليت نشوف واجبات زي كدة مع كل شرح ;)

يعطيك العافية .. لنا عودة


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



<table width="100%" border="1" cellspacing="1" cellpadding="1" >
<tr>
<td colspan="4">&nbsp;</td>
<td rowspan="2">&nbsp;</td>
</tr>
<tr>
<td rowspan="2">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="4">&nbsp;</td>
</tr>
</table>


وسأعطيك طريقة بسيطه جدا تساعدك علي الدمج بدقه وفي لحظات ..
انظر معي الي الشـكل ..
http://www.mexat.com/vb/attachment.php?attachmentid=1478964&stc=1&d=1309900857
حسنا هذا ما نريده ..
سنعمل علي الجدول صف صف ..
كل صف يتكون من خمس حقول ..
والصف الاول يتكون من حقلين فقط ..
الحقل الاول مكون من اربع حقول جانبية مدموجه في حقل واحد
والثاني مكون من حقلين طولين مدموجين في حقل واحد ..
سيكون كود الحقل الاول colspan="4"
وكود الحقل الثاني rowspan="2"
الان ننتقل الي الصف الثاني ..
يتكون من 4 حقول فقط لان الحقل الاخير علي اليسار اصبح الان جزء من الصف الاول ..
الحقل الاول يتكون من حقلين طوليين مدموجين في حقل واحد ..
والثلاثه حقول هي حقول عاديه ..
سيكون كود الحقل الاول rowspan="2"
والثلاثه حقول لانها عاديه بدون اي اضافات ..
واخيرا الصف الاخير يتكون من حقل واحد لان الحقل الاول الان اصبح جزء من الصف السابق ..
وهذا الحقل يتكون من دمج اربع حقول ..
وسيكون الكود هو colspan="4"
هذه هي طريقة قراءه الجدول التي ستحميك من اللخبطة او الاختلاط ..

ورغم الخطئ الذي يظهر لديك الا ان النتيجة متطابقة تماما ..
ولكن هي في عرف المصممين خطأ رغم انها صحيحه عملياً
الخطأ يعتبر نظري فقط .. لذلك ليس خطير ..

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

شـكرا عمـو ايدو علي التفاعل والنشااط ..
ان شاء الله الدروس القادمه كلها تطبيقية ..
ولا تسألني عن الدرجات .. اعتقد انك بالمكان الخاطئ ..:p
يجب ان تكون احدي مدرسي الوشة .. ::جيد::
عفوا لا اعطي درجات لمدرسين .. :لقافة:
دمت بخير وصحه وان شاء الله الدرس التالي قريب جدا ..::سعادة::
تقبل تحياتي ^_^

Master Edward
06-07-2011, 12:22
وسأعطيك طريقة بسيطه جدا تساعدك علي الدمج بدقه وفي لحظات ..
انظر معي الي الشـكل ..
http://www.mexat.com/vb/attachment.php?attachmentid=1478964&stc=1&d=1309900857
حسنا هذا ما نريده ..
سنعمل علي الجدول صف صف ..
كل صف يتكون من خمس حقول ..
والصف الاول يتكون من حقلين فقط ..
الحقل الاول مكون من اربع حقول جانبية مدموجه في حقل واحد
والثاني مكون من حقلين طولين مدموجين في حقل واحد ..
سيكون كود الحقل الاول colspan="4"
وكود الحقل الثاني rowspan="2"
الان ننتقل الي الصف الثاني ..
يتكون من 4 حقول فقط لان الحقل الاخير علي اليسار اصبح الان جزء من الصف الاول ..
الحقل الاول يتكون من حقلين طوليين مدموجين في حقل واحد ..
والثلاثه حقول هي حقول عاديه ..
سيكون كود الحقل الاول rowspan="2"
والثلاثه حقول لانها عاديه بدون اي اضافات ..
واخيرا الصف الاخير يتكون من حقل واحد لان الحقل الاول الان اصبح جزء من الصف السابق ..
وهذا الحقل يتكون من دمج اربع حقول ..
وسيكون الكود هو colspan="4"
هذه هي طريقة قراءه الجدول التي ستحميك من اللخبطة او الاختلاط ..

ورغم الخطئ الذي يظهر لديك الا ان النتيجة متطابقة تماما ..
ولكن هي في عرف المصممين خطأ رغم انها صحيحه عملياً
الخطأ يعتبر نظري فقط .. لذلك ليس خطير ..

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


كان من المفترض ان ابدأ انشاء الكود بالطريقة التي ذكرتها لكني اردت ان اجرب العمل بشكل مجزء :p
حسناً سأحاول ان اجرب مجدداً انشاء الكود بالطريقة التي ذكرتها :) عدة مرات حتى اعتاد على الأمر ..


شـكرا عمـو ايدو علي التفاعل والنشااط ..
ان شاء الله الدروس القادمه كلها تطبيقية ..
ولا تسألني عن الدرجات .. اعتقد انك بالمكان الخاطئ ..:p
يجب ان تكون احدي مدرسي الوشة .. ::جيد::
عفوا لا اعطي درجات لمدرسين .. :لقافة:
دمت بخير وصحه وان شاء الله الدرس التالي قريب جدا ..::سعادة::
تقبل تحياتي ^_^

كل الشكر لك ، فأنا حالياً اعمل على تصميم ستايل منتدى ودروسك افادتني :)
بترقب درسك القادم على احر من الجمر ::سعادة::

في آمان الله

Master Edward
15-07-2011, 23:03
السلام عليكم ورحمة الله


المكان هادئ جداً :لقافة:
حـقاً اشتقت للدروس
خصيصاً الدرس القادم :سعادة: انتظرة بفارغ الصبر

المهم لدي استفسار أستاذي :)
حالياً انا اعمل على تصميم ستايل وتركيبة بإستخدام برنامج الدريم ويفر
وهذة تقريباً هي المرة الأولى لي في توزيع ستايل بهذا البرنامج :p
- لدي مجموعة من الصور كالإيقونات تمكنت من وضع الروابط عليها بإستخدام اداة
لكن لم افهم كيف يمكن لي اضافة المسمى الذي اريد ظهورة عند التأشير على الإيقوين

http://www.mexat.com/vb/attachment.php?attachmentid=1485477&stc=1&d=1310764236

ايضاً ان لم يكُن هنالك ازعاج هل يمكن توضيح لي الخيارات التالية :مرتبك:

http://www.mexat.com/vb/attachment.php?attachmentid=1485499&stc=1&d=1310770117

لا تشرح بالتفصيل الممل فأنا لا اريد ان اضيع وقتك ، فقط وضح لي الأمر بشكل بسيط :) ان امكن ..

.
.

بإنتظارك

H A T S H Y
16-07-2011, 00:02
السلام عليكم ورحمة الله


المكان هادئ جداً :لقافة:
حـقاً اشتقت للدروس
خصيصاً الدرس القادم :سعادة: انتظرة بفارغ الصبر

المهم لدي استفسار أستاذي :)
حالياً انا اعمل على تصميم ستايل وتركيبة بإستخدام برنامج الدريم ويفر
وهذة تقريباً هي المرة الأولى لي في توزيع ستايل بهذا البرنامج :p
- لدي مجموعة من الصور كالإيقونات تمكنت من وضع الروابط عليها بإستخدام اداة
لكن لم افهم كيف يمكن لي اضافة المسمى الذي اريد ظهورة عند التأشير على الإيقوين

http://www.mexat.com/vb/attachment.php?attachmentid=1485477&stc=1&d=1310764236

ايضاً ان لم يكُن هنالك ازعاج هل يمكن توضيح لي الخيارات التالية :مرتبك:

http://www.mexat.com/vb/attachment.php?attachmentid=1485499&stc=1&d=1310770117

لا تشرح بالتفصيل الممل فأنا لا اريد ان اضيع وقتك ، فقط وضح لي الأمر بشكل بسيط :) ان امكن ..

.
.

بإنتظارك


اهلا اهلا عمو ايدو ^_^
نعم صحيح هدوء قاتل ..:ميت:
اعتقد انني السبب .. ولكن الامور خارجة عن السيطرة قليلا ..
+ احاول ان تكون الدروس فيديو بدلا من الطريقة السابقة ..
واكتشفت اني فاشل جدا جدا في المنتاج والاخراج ..
فشلت محاولتي ساحاول من جديد حتي يكون الشرح واضح باقصي شكل ممكن ..

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

حسنا هذه القائمة المرفقه مع الشـرح ..

http://img851.imageshack.us/img851/6592/111ld.jpg

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

http://img263.imageshack.us/img263/6197/unled1jpg222.jpg

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



<area shape=" نوع الشكل المستخدم دائره او مربع او شبه منحرف " coords="ابعاد الشكل ومقاساته" href="الرابط" />



الان عليك ان تضيف خاصيه جديده باسم title وتكتب بها المسمي اللي تحب انه يظهر بمجرد وقوف الماوس ..
ويصبح السطر هكذا ..



<area shape=" نوع الشكل المستخدم دائره او مربع او شبه منحرف " coords="ابعاد الشكل ومقاساته" href="الرابط" title="المسمي اللي تحبه" />



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

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

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

الاشكال المسموح بها في الخرائط ..
تستطيع ان تصنع مربع .. او دائره .. او اي شكل يتكون من مجموعه من الاضلاع .. سداسي او خماسي او شبه منحرف .. هكذا ..

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

اتمني تكون وضحت كل الخواص واي استفسار اخر لا مشكلة انا متواجد ^_^

Demon-Dante
16-07-2011, 09:21
شباب اي افضل طريقو للتصميم ستايل للجيل الرابع

هذي الطريقة تمام ؟
http://www.traidnt.net/vb/traidnt1426353/

H A T S H Y
16-07-2011, 10:52
شباب اي افضل طريقو للتصميم ستايل للجيل الرابع

هذي الطريقة تمام ؟
http://www.traidnt.net/vb/traidnt1426353/

نعم الطريقة جيده وتفي بالغرض للمبتدأين ^_^
بالتوفيق دائما عزيزي ^_^

Master Edward
16-07-2011, 21:32
~Hatshy



اهلا اهلا عمو ايدو ^_^
نعم صحيح هدوء قاتل ..:ميت:
اعتقد انني السبب .. ولكن الامور خارجة عن السيطرة قليلا ..
+ احاول ان تكون الدروس فيديو بدلا من الطريقة السابقة ..
واكتشفت اني فاشل جدا جدا في المنتاج والاخراج ..
فشلت محاولتي ساحاول من جديد حتي يكون الشرح واضح باقصي شكل ممكن ..

بالنسبة لي شرحك ممتاز بالصور :)
ومع ذلك الفيديو هو أفضل أسلوب في الشرح خصيصاً للمراحل القادمة
ارجوا لك التوفيق ..


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

صديقي انا اعمل على تصميم ستايل ثابت ومجموع الصور القطع قليلة :D
فقط كنت اريد وضع علامة على شعار التصميم الخاص بي :لعق: كما اعتدت ان أفعل بالفرونت بيج :p


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


http://img263.imageshack.us/img263/6197/unled1jpg222.jpg

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




<area shape=" نوع الشكل المستخدم دائره او مربع او شبه منحرف " coords="ابعاد الشكل ومقاساته" href="الرابط" />



الان عليك ان تضيف خاصيه جديده باسم title وتكتب بها المسمي اللي تحب انه يظهر بمجرد وقوف الماوس ..
ويصبح السطر هكذا ..



<area shape=" نوع الشكل المستخدم دائره او مربع او شبه منحرف " coords="ابعاد الشكل ومقاساته" href="الرابط" title="المسمي اللي تحبه" />




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

المشكلة اني مستعجل فأنا اريد الإنتهاء من هذا العمل خلال هذا الأسبوع :p
وفي نفس الوقت هذه المرة الأولى لي التي اقوم بها بالتويع على برنامج الدريم
>> صرت اشوف البرنامج في منامي من كثر التفكـير :ضحكة: ..


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

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

الاشكال المسموح بها في الخرائط ..
تستطيع ان تصنع مربع .. او دائره .. او اي شكل يتكون من مجموعه من الاضلاع .. سداسي او خماسي او شبه منحرف .. هكذا ..

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

اتمني تكون وضحت كل الخواص واي استفسار اخر لا مشكلة انا متواجد ^_^


شكراً جزيلاً للتوضيح ، فقط امهلني لاحظت وسأعود للنقاش بأمر لم ارى ردك عليه حتى الآن

لي عــودة .. :رامبو:

Master Edward
16-07-2011, 22:57
عووودة :رامبو:


وجدت الردود :مكر:
في المرحلة السابقة لهذة المرحلة >> اعني بها مرحلة تقطيع القالب :D ..
تناقشنا عن اسلوب تقطيع الخلفية :) واكتشفت ان الطريقة التي استخدمها مختلفة عن طريقتك ..

للتذكــير انظر للردود (#173، #177 ، وهذا الأخـير لم تعطني تعليقك وقتها :لقافة: #187)

وقتها كان توزيعي كان على برنامج الفورنت بيج :)
واظنك تعلم كيف يكون حال العمل والتوزيع عليه :D


كُنت اقوم بإنشاء جدول من 3 اعمدة و3 اسطر مثال توضيحي :رامبو:



الاطار
هيدر
الاطار


الاطار

الاطار


الاطار
فوتر
الاطار






بالمناسبة كلامي وتطبقي الذي اتحدث عنه الان خاص بهذا القالب (http://fc02.deviantart.net/fs70/f/2010/334/f/3/islam_style_by_masteredward-d33xcn8.jpg) :D
للعلم القالب الذي اعمل عليه مصمم بنفس الطريقة :لقافة:
ايضاً صورة الإطار لا تتجاوز في الإرتفاع عن 1 بيكسل كما ترى فنقاط التمدد فيها سهله وبسيطة :)

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

.
.

لي عودة بعد ان ارى ردك :)
فلدي استفسار بعد :رامبو: بإنتظارك

دمت بخــير

H A T S H Y
16-07-2011, 23:31
عووودة :رامبو:


وجدت الردود :مكر:
في المرحلة السابقة لهذة المرحلة >> اعني بها مرحلة تقطيع القالب :D ..
تناقشنا عن اسلوب تقطيع الخلفية :) واكتشفت ان الطريقة التي استخدمها مختلفة عن طريقتك ..

للتذكــير انظر للردود (#173، #177 ، وهذا الأخـير لم تعطني تعليقك وقتها :لقافة: #187)

وقتها كان توزيعي كان على برنامج الفورنت بيج :)
واظنك تعلم كيف يكون حال العمل والتوزيع عليه :D


كُنت اقوم بإنشاء جدول من 3 اعمدة و3 اسطر مثال توضيحي :رامبو:



الاطار
هيدر
الاطار


الاطار

الاطار


الاطار
فوتر
الاطار










بالمناسبة كلامي وتطبقي الذي اتحدث عنه الان خاص بهذاالقالب (http://fc02.deviantart.net/fs70/f/2010/334/f/3/islam_style_by_masteredward-d33xcn8.jpg):D
للعلم القالب الذي اعمل عليه مصمم بنفس الطريقة :لقافة:
ايضاً صورة الإطار لا تتجاوز في الإرتفاع عن 1 بيكسل كما ترى فنقاط التمدد فيها سهله وبسيطة :)

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

.
.

لي عودة بعد ان ارى ردك :)
فلدي استفسار بعد :رامبو: بإنتظارك

دمت بخــير

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



هذا هو الشكل اللي تستخدمة ..




اطار

هيدر

اطار



اطار

محتوي

اطار



اطار

فوتر

اطار





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




اطار

هيدر

اطار



0

محتوي

0


0
فوتر

0




مع التحفظ علي ان الحقول اللي بها رقم 0 ستختفي مع الكود لانها ستدمج في الحقل الخاص بالاطار ..
وهذا بسبب ان الجداول في الردود حقولها غير مسموحة بالدمج ووقتي لم يسمح باخذ صورة .. او بمعني ادق اني كسلت :ميت:

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





<table>
<tr>
<td rowspan="3"></td>
<td></td>
<td rowspan="3"></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>




اعزرني الكود بدون اي خصائص لانه كتبته سريعا في الموضوع مباشره ..
وبخصوص خوفك من التعديل .. لماذا تخاف ؟؟
يجب ان تجرب دائما ..
وانصحك نصيحة بخصوص ذلك .. سوي نسخة من الملفات اللي تعمل عليها احتياطية .. وقم بالتجربة في نسخة بديلة اذا ضبطت يكون خير .. واذا لم تضبط لا مشكلة عود مره اخري الي النسخة السابقة ..
بالتوفيق ان شاء الله .. وانتظر استفسارك التالي ^_^

Master Edward
17-07-2011, 00:29
::سخرية::



انت الان تتجاوز الدرس الاول من التقطيع .. ولكن لا بأس

:p ظننت ذلك ايضاً


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

فكرتُ بذلك ايضاً ، واردت التجربة لكن الوقت اصبح متأخر ولن استطيع العمل وانا مرهق :محبط:
>> من بعد صلاة المغرب وانا شغال إلى الان :جرح: ,,
لذا قررت ان استفسر الان واخذ صورة جيدة لأعمل عليها بالغد :D إن شاء الله


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



هذا هو الشكل اللي تستخدمة ..





اطار

هيدر

اطار



0

محتوي

0


0
فوتر

0







مع التحفظ علي ان الحقول اللي بها رقم 0 ستختفي مع الكود لانها ستدمج في الحقل الخاص بالاطار ..
وهذا بسبب ان الجداول في الردود حقولها غير مسموحة بالدمج ووقتي لم يسمح باخذ صورة .. او بمعني ادق اني كسلت :ميت:

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




<table>
<tr>
<td rowspan="3"></td>
<td></td>
<td rowspan="3"></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>


[/CENTER]


بالطبع استطيع تكويدة :مكر: اسف جداً لإرهاقك معي :p
تعلم لدي استفسارين أخرين آحدهما لست مستعجل لأمـرة وأفضل ان انتظر شرحك القادم :سعادة2:
والسؤال الأخر يحتاج لكابتة بوضوح وانا الحمد الله ما اقدر اميز الخمسة من الطمسة :ضحكة: ..

لذا سأخذ اســتراحة الان واخلد للنوم ، وفي الغد سنعاود الزيارة ;)
ادعــوا لي ان انجح في هذا التوزيع ::سعادة::

لك شكري وامتناني للمساعدة التي قدمتها لي :o
بــارك الله فيك

Master Edward
17-07-2011, 17:56
السلام عليكم ورحمة الله

مـساء الخــير :)
عودة مع استفسار صغير :D >> بالمناسبة نسيت ايش كنت بسألك امس :ضحكة: ..



في القالب الذي ارفقته وكما يظهر وكما قولت انت ان الاطارات رفيعه ومعدل تكراراها 1 بكسيل فقط ..



اذن سيكون مناسب جدا ان تضاف الاطارات هذه علي جانبي الجدول ..




صورة الإطار في تصميمي صغيرة مثلاً بـ ( عرض 5 × ارتفاع 1 ) من الطبيعي ان يكون معدل التكرار ا بيكسل فقط

السؤال // .. ماذا لو كانت هذة القطعة لا تحوي غـير لون واحد فقط ؟
هل يجدي الأكتفاء بإضافة الصورة وملئ بقية الإطار بنفس اللون المستخدم في الصورة المضافة ..؟
:موسوس: .. اظنك فهمت ما اقصد :p

.
.

لي عـودة :رامبو:

H A T S H Y
17-07-2011, 18:36
السلام عليكم ورحمة الله

مـساء الخــير :)
عودة مع استفسار صغير :D >> بالمناسبة نسيت ايش كنت بسألك امس :ضحكة: ..



صورة الإطار في تصميمي صغيرة مثلاً بـ ( عرض 5 × ارتفاع 1 ) من الطبيعي ان يكون معدل التكرار ا بيكسل فقط

السؤال // .. ماذا لو كانت هذة القطعة لا تحوي غـير لون واحد فقط ؟
هل يجدي الأكتفاء بإضافة الصورة وملئ بقية الإطار بنفس اللون المستخدم في الصورة المضافة ..؟
:موسوس: .. اظنك فهمت ما اقصد :p

.
.

لي عـودة :رامبو:

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

اتمني اكون فهمت قصدك بشكل سليم ..
منـور عموو ايدو .. ::سعادة::

Master Edward
17-07-2011, 19:19
في الحقيقة لم افهم تماما ^^"
ولكن مما فهمته انك تقصد حاله الالوان الخالصة ..
اذا كان هناك جزء في تصميمك يحتوي لون واحد فقط .. لا فائده من استخدام الصور فيه ..
حتي لو كانت 1×1 ستكون حركه مكلفه رغم صغر الصورة ..
فانت تستطيع الاستغناء عنها .. بوضع كود اللون في تلك الخانه بدلا من الصور نهائيا ..
وايضا ستكون مميزة جدا لان بعض الاشخاص يحولون متصفحهم لخاصية التصفح بدون صور ..
حتي يساعدهم في سرعه تحميل الصفحات .. لذلك عليك باستغلال كل فرصه لتحويل الصور الي كود ..
اما اذا كنت تقصد التكرار .. اذا كان رأس التكرار يحتوي علي اكثر من لون .. والتكرار نفسة لون واحد ..
نعم بالطبع .. تستطيع اضافه رأس التكرار كصورة .. والباقي لون واحد ككود وهي الطريقة الصحيحه والمثلي ..

اتمني اكون فهمت قصدك بشكل سليم ..
منـور عموو ايدو .. ::سعادة::



جميل بل ورائع ، هذا ماكنت اقصدة بالضبط ;)
الحمد الله تم الآن الانتهاء من ضبط الخلفية تبقى عدة خطوات وانتهي القالب ..

واجهتني بعض المشاكل في تحديد اتجاة الخلفية وزاد عندي الحول :احول: ..
لكن راجعت بعض الأكواد التي استخدمتها في قالبي السابق وعرفت مالناقص :D
فقد كتبت الكود في البدآية بهذا الشكل :





body
{
background-color: #280A03;
background-image:url(xxx.jpg);
background-repeat:repeat-y
}


وبعد التعديل :rolleyes:



body
{
background-color: #280A03;
background-image:url(xxx.jpg);
background-repeat:repeat-y;
background-attachment:fixed;
background-position:center
}



ممكن اعرف ما الإستخدامات العامة للأمرين ( attachment وَ position ) ؟
فقد اثرا على العمل بشكل كـبير :) فلم اكن اهتم بعمل الأكواد في السابق >> اي شيء يخلص الشغل وخلاص :ضحكة:

H A T S H Y
17-07-2011, 21:24
جميل بل ورائع ، هذا ماكنت اقصدة بالضبط ;)
الحمد الله تم الآن الانتهاء من ضبط الخلفية تبقى عدة خطوات وانتهي القالب ..

واجهتني بعض المشاكل في تحديد اتجاة الخلفية وزاد عندي الحول :احول: ..
لكن راجعت بعض الأكواد التي استخدمتها في قالبي السابق وعرفت مالناقص :D
فقد كتبت الكود في البدآية بهذا الشكل :





body
{
background-color: #280A03;
background-image:url(xxx.jpg);
background-repeat:repeat-y
}


وبعد التعديل :rolleyes:



body
{
background-color: #280A03;
background-image:url(xxx.jpg);
background-repeat:repeat-y;
background-attachment:fixed;
background-position:center
}



ممكن اعرف ما الإستخدامات العامة للأمرين ( attachment وَ position ) ؟
فقد اثرا على العمل بشكل كـبير :) فلم اكن اهتم بعمل الأكواد في السابق >> اي شيء يخلص الشغل وخلاص :ضحكة:






جيد جدا ..
بالنسبة لاستفسارك ..
نبدأ بخاصيه position
وهي الخاصيه المسؤلة عن مكان صورة الخلفية ..
بمعني انك تأمره بان يبدأ بوضع الخلفية من نقطة معينه ..
ممكن ان تكون من اعلي اليمين او اعلي اليسار او اعلي المنتصف ..
او ممكن ان تكون في اسفل اليمين او اسفل اليسار او اسفل المنتصف ..
وذلك عن طريق الجمع بين اختياريين فقط من تلك الاختيارات .. وهي top bottom left right center
علي ان لا يجتمع top و bottom او left و right و center معا ابداً
وبذلك تكون القيم المتاحه هي ..
top left اعلي اليسار ..
top right اعلي اليمين ..
top center اعلي المنتصف ..
bottom left اسفل اليسار ..
bottom right اسفل اليمين ..
bottom center اسفل المنتصف ..
هذه هي القيم المتاحه .. وبالطبع تستطيع ان تعين قيمة واحده فقط ..
مثل ما فعلت انت الان ..
هناك اضافه اخري وهي انك تستطيع ان تضع صورة الخلفية في منتصف المنتصف ..
بوضع القيمة هكذا 50% 50%
وبذلك ستكون الخلفية في المنتصف الافقي والرأسي في نفس الوقت ..
وكما هو واضح تستطيع التجميع بين النسب المؤية للحصول علي مكانك المناسب ..
واخيرا هناك القيمة inherit وهي قيمة الوراثة .. لا اعرف لماذا لم تفهمها لانها بسيطة جدا ومتكررة في اكثر من خاصية ..
القيمة هذه تعني وراثه نفس القيمة من نفس العنصر للجسم الاعلي من الجسم الحالي ..
بمعني انك لو سويت خلفية للصفحه وعينت خاصيه position الي top left اعلي اليسار ..
وهناك داخل خلفية الصفحه اللي هو وسم body وسم اخر div تستطيع ان تورث هذا الوسم ..
نفس قيمة الوسم الاعلي اللي هو body عن طريق تلك القيمة ..
وهذا ينطبق علي كل الاوسمة ..
هذه القيمة تورث نفس القيمة الاصلية للعنصر الاعلي ...
اتمني تكون وضحت هذه المره ..

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

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

والخاصيه الاخيرة هي ايضا inherit وهي خاصية الوراثه ..
تورث احدي تلك الخواص الي العنصر طبقا للعنصر الاعلي منه ..

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

Master Edward
17-07-2011, 22:12
تسلم على التوضيح المرتجل :لعق: ..


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

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

والخاصيه الاخيرة هي ايضا inherit وهي خاصية الوراثه ..
تورث احدي تلك الخواص الي العنصر طبقا للعنصر الاعلي منه ..

فعلاً كُنت ألحظ ان بعض الخلفيات تبدو ثابتة :موسوس: ..
ولم اكن اعلم بأن هذة الخاصية تقوم بعمل ذلك :صمت: ..


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


كلمة شكراً لا تفي حقك يا مبدع :o
الله يجزيك الخــير ..

الان بأخذ وقت مستقطع وانتقل لبرنامج الفوتوشوب لأكمال بعض التصاميم :رامبو: مافي راحة

لي عودة :p

Demon-Dante
19-07-2011, 13:22
شباب لتقسيم الستايل
css
hيش البرنامج إلي استخدمه + ابغى شح له لو امكن

تحياتو

H A T S H Y
19-07-2011, 18:53
شباب لتقسيم الستايل
css
hيش البرنامج إلي استخدمه + ابغى شح له لو امكن

تحياتو

اهلا بك عزيزي ..
ولكن ماذا تقصد بتقسيم الستايل ؟؟
اذا كنت تقصد التوزيع فالافضل دائما برنامج دريم ويفر ..
والشرح عليه للاسف لا يمكن ان يوضع بمشاركه فهو يتطلب اولا اتقان لـ HTML و Css
وقد يتطلب ذلك شهور حتي يكتمل الشـرح ..
راح نشرح بالورشة هنا طريقة التوزيع Css مستقبلا ان شاء الله ..
بالتوفيق ان شاء الله ..
ودمت بخير وصحه دائما ^_^

Demon-Dante
19-07-2011, 19:00
اهلا بك عزيزي ..
ولكن ماذا تقصد بتقسيم الستايل ؟؟
اذا كنت تقصد التوزيع فالافضل دائما برنامج دريم ويفر ..
والشرح عليه للاسف لا يمكن ان يوضع بمشاركه فهو يتطلب اولا اتقان لـ HTML و Css
وقد يتطلب ذلك شهور حتي يكتمل الشـرح ..
راح نشرح بالورشة هنا طريقة التوزيع Css مستقبلا ان شاء الله ..
بالتوفيق ان شاء الله ..
ودمت بخير وصحه دائما ^_^


طيب راح احمي الدريم
بس يعين انتظرك لما تسوي شرح لطريقة التقسيم
css

* طيب كيف اتعلم HTML و Css
شرح بسطي ومفوم

Master Edward
24-07-2011, 18:40
السلام عليكم

عودة مجدداً :D

ظهرت لي مشكلة عند تركيب القالب
في المنتدى فبعد الإنتهاء من تركيب الهيدر والفوتر والخلفية
ظهرت لدي مساحة فارغة في اعلى الهيدر واسفل الفوتر

وهذه صورة الفوتر (http://www.mexat.com/vb/attachment.php?attachmentid=1492061&stc=1&d=1311530892)للتوضيح :)

فهل تعلم ماهو الخطأ :موسوس: اظنني اخطأت في كتابة احد الاكواد :جرح:

بإنتظارك

Master Edward
24-07-2011, 21:26
طيب راح احمي الدريم
بس يعين انتظرك لما تسوي شرح لطريقة التقسيم
css

* طيب كيف اتعلم HTML و Css
شرح بسطي ومفوم

اهلاً بك صديقي :)
كما قال لك مسبقاً اخي ~Hatshy


والشرح عليه للاسف لا يمكن ان يوضع بمشاركه فهو يتطلب اولا اتقان لـ HTML و Css
وقد يتطلب ذلك شهور حتي يكتمل الشـرح ..
راح نشرح بالورشة هنا طريقة التوزيع Css مستقبلا ان شاء الله ..
بالتوفيق ان شاء الله ..
ودمت بخير وصحه دائما ^_^

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

دورة تصميم ستايل منتديات (http://www.mexat.com/vb/threads/872977-د-م-1-1-دورة-تصميم-ستايل-منتديات-تمهيد-،-تثبيت-البرامج-المهمة)


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

لكن في الورشة هنا يقوم المعلمين بطرح الدروس من الصفر وبشكل متدرج وهذا افضل للجميع خصيصاً لمن لا يملك فكرة عن تصميم المواقع :) ..

ارى انك مستعجل :لقافة: وانا كذلك :D ولكن للأسف العجلة لن تفيدنا
ارجوا لك التوفيق :)

Master Edward
24-07-2011, 23:25
~Hatshy

صديقي اظن اني علمت ما هو الخطأ :p
سأتأكد الان واعود لإخبارك :رامبو:

Master Edward
25-07-2011, 00:36
^
^

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

في البداية ظننت اني اضفت كود <br/> فهل تعتقد ذلك .. ::سخرية::

الان سأنصرف لإني تأخرت في السهر :p
ارآك في الغد عزيزي :)

H A T S H Y
25-07-2011, 02:04
^
^

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

في البداية ظننت اني اضفت كود <br/> فهل تعتقد ذلك .. ::سخرية::

الان سأنصرف لإني تأخرت في السهر :p
ارآك في الغد عزيزي :)


اهـلا عمو ايدو ^_^
اتمني تكون بخير وبصحه ان شاء الله ..
ليست مشكلة ولا شئ .. بسيطة جدا ان شاء الله ..
اولا اذا كان القالب الاول اللي سويتة قبل التركيب يظهر بشكل مثالي وبدون تلك الفواصل ..
اذن المشكلة ليست من القالب هي من اعدادات المنتدي ..
واكاد اجزم انها بسبب الهوامش الافتراضيه التي يتم تنسيقها في وسم Body للاستايلات الافتراضية ..
لذلك كل ما عليك فعله هو الاتي .. اذهب الي خيارات جميع الستايل ..
ومنها خصائص Body
علي اليسار ستجد حقل مكتوب به الاكواد التالية ..




margin: 5px 10px 10px 10px;
padding: 0px;



عدلها بهذا الشكل ..




margin: 0px;
padding: 0px;


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

Master Edward
25-07-2011, 22:39
أخخخخخخ

ركزت كــثيراً ولا اعلم متى قمت بإزالة كود ( padding , margin ) ، المعذرة لإزعاجك بإخطائي :p ..
لكن اطمئن فالاشياء التي يتم تنبهي عليها لا انساها ابداً :مكر: ، وبإذن الله سأكون اكثر انتاه لها :D

لا بالعكس الله يجزيك الخير والله ما قصرت :o ..
يعطيك العافية والله يوفقك في اعمالك :رامبو:

H A T S H Y
24-08-2011, 10:53
،

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

T E C H N O
24-08-2011, 13:53
أهلاً أهلاً ::سعادة::
هل ستعود الورشة من جديد ؟ ::سعادة::

H A T S H Y
24-08-2011, 18:46
أهلاً أهلاً ::سعادة::
هل ستعود الورشة من جديد ؟ ::سعادة::


وهل ذهبت الورشة الي مكان اخر .. :لقافة:

D.E.Λ.T.H
25-08-2011, 13:06
وهل ذهبت الورشة الي مكان اخر .. :لقافة:


:d
لا بس لاحظنا انه الدروس وقفت
و صارت غير منظمة و تلخبط معاها دماغي :ميت:
و مافهمت شئ
+
ولكم باآك و بانتظار باقي الدروس و ان شاء نفهم حاجة :محبط:

H A T S H Y
25-08-2011, 23:21
:d
لا بس لاحظنا انه الدروس وقفت
و صارت غير منظمة و تلخبط معاها دماغي :ميت:
و مافهمت شئ
+
ولكم باآك و بانتظار باقي الدروس و ان شاء نفهم حاجة :محبط:


وايش اللي ما فهمتة .. وليش مافهمت وساكت .. :eek:
قول اللي ما فهمتة واعيدة لك مره اخري ولا يهمك .. ^_^

Master Edward
25-08-2011, 23:30
أهلاً أهلاً ::سعادة::
هل ستعود الورشة من جديد ؟ ::سعادة::





:d
لا بس لاحظنا انه الدروس وقفت
و صارت غير منظمة و تلخبط معاها دماغي :ميت:
و مافهمت شئ
+
ولكم باآك و بانتظار باقي الدروس و ان شاء نفهم حاجة :محبط:


وينكم انتم من زمان :D ..
هيتاشي قرب يزهق مني :لعق: ما احد لاصق بالورشة مثلي :p
بس الحمد الله استفدت كثير مؤخراً من الورشة ..

.
.

اتمنى اشوفكم دايماً هنا :) ..

Master Edward
25-08-2011, 23:32
،

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


يا هلا ويا مرحب ::سعادة:: واقول من وين النور جاي علينا ..
سلامتك الحين اتصل على عمال النظافة يجون ينفضو الغبره :رامبو: ..

H A T S H Y
25-08-2011, 23:50
يا هلا ويا مرحب ::سعادة:: واقول من وين النور جاي علينا ..
سلامتك الحين اتصل على عمال النظافة يجون ينفضو الغبره :رامبو: ..

ياهلا بك عمو ايدو .. الورشة دائما منورة بوجودك .. ^_^
اتصلت عليهم امس يقولون علينا بالورشة تكاليف تنظيف متاخرة .. :d

D.E.Λ.T.H
26-08-2011, 10:55
وينكم انتم من زمان :D ..
هيتاشي قرب يزهق مني :لعق: ما احد لاصق بالورشة مثلي :p
بس الحمد الله استفدت كثير مؤخراً من الورشة ..

.
.

اتمنى اشوفكم دايماً هنا :) ..

موجودين بس مختفيين :d
و الحمدالله انك استفدت ^_^




وايش اللي ما فهمتة .. وليش مافهمت وساكت .. :eek:
قول اللي ما فهمتة واعيدة لك مره اخري ولا يهمك .. ^_^

تسلم والله ماتقصر ^^

هروح اعمل مراجعة مرة ثانية ولو في شئ موب فاهمه بجي بسأل :d
بس في الفيديو حق درس وسوم الـ Heading
أتمنى ترفعه من جديد اذا مافيها تعب

Senya Phoenixia
26-08-2011, 11:09
:d

D.E.Λ.T.H
26-08-2011, 13:47
كيف تكتب كود هذا الجدول ؟؟
http://www.mexat.com/vb/attachment.php?attachmentid=1476349&stc=1&thumb=1&d=1309612497
اتمني من الجميع ان يكتبون الكود يدويا دون اللجوء الي برامج خارجيه ..

تم .. :d
أتمنى يكون صحيح


<table width="100%" border="1" cellpadding="1" cellspacing="1">

<!-----------line1--------->
<tr>
<td colspan="4">&nbsp;</td>
<td rowspan="2">&nbsp;</td>
</tr>
<!-----------line2--------->
<tr>
<td rowspan="2">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<!-----------line3--------->
<tr>
<td colspan="4">&nbsp;</td>
</tr>

</table>

H A T S H Y
26-08-2011, 21:18
موجودين بس مختفيين :D
و الحمدالله انك استفدت ^_^


تسلم والله ماتقصر ^^

هروح اعمل مراجعة مرة ثانية ولو في شئ موب فاهمه بجي بسأل :D
بس في الفيديو حق درس وسوم الـ Heading
أتمنى ترفعه من جديد اذا مافيها تعب



للاسف الدرس كان لاخي بورون (http://www.mexat.com/vb/members/515957-%D8%A8%D9%88%D8%B1%D9%88%D9%86)
وانا لا املك نسخة لاعيد رفعه .. ساحاول الاتصال به من اجلك .. ^_^







تم .. :d
أتمنى يكون صحيح


<table width="100%" border="1" cellpadding="1" cellspacing="1">

<!-----------line1--------->
<tr>
<td colspan="4">&nbsp;</td>
<td rowspan="2">&nbsp;</td>
</tr>
<!-----------line2--------->
<tr>
<td rowspan="2">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<!-----------line3--------->
<tr>
<td colspan="4">&nbsp;</td>
</tr>

</table>



نعم سـليم ما شاء الله .. هذا اهم درس في تصميم الجداول .. اتقانة يساوي مكسب كبير ..
وان شاء الله بعد رمضان تعود الورشة الي سابق عهدها بل وافضل ..
وفي هذه الفترة انتظر ملاحظاتك علي الدروس السابقة اذا تعثرت في فهم اي شئ انا متواجد .. ^_^

D.E.Λ.T.H
27-08-2011, 10:56
?

للاسف الدرس كان لاخي بورون (http://www.mexat.com/vb/members/515957-بورون)
وانا لا املك نسخة لاعيد رفعه .. ساحاول الاتصال به من اجلك .. ^_^


شكراً ^_^



نعم سـليم ما شاء الله .. هذا اهم درس في تصميم الجداول .. اتقانة يساوي مكسب كبير ..
وان شاء الله بعد رمضان تعود الورشة الي سابق عهدها بل وافضل ..
وفي هذه الفترة انتظر ملاحظاتك علي الدروس السابقة اذا تعثرت في فهم اي شئ انا متواجد .. ^_^



بانتظار عودة نشـــاط الورشة :d
بس عندي سؤال :
هل وسم الميتا الخاص بالكلمات المفتاحية مهم لعملية أرشفة الموقع?


<meta name="keywords" content="A, B, C, D />"

H A T S H Y
29-08-2011, 00:45
?


بانتظار عودة نشـــاط الورشة :d
بس عندي سؤال :
هل وسم الميتا الخاص بالكلمات المفتاحية مهم لعملية أرشفة الموقع?


<meta name="keywords" content="A, B, C, D />"

لقد كان في السابق الاهم والاكثر اهمية .. الان اصبحت محركات البحث اكثر زكاء ودهاء .. ولكنه يبقي مهم في الاخير ..
ويجب ان تكون الكلمات المفتاحيه مكتوبة بشكل دقيق ومفصل عن محتوي الصفحات .. كلما كانت اكثر دقة وتفصيل عادت بفائدة اكبر علي الموقع في الارشفة .. ^_^

D.E.Λ.T.H
16-09-2011, 06:43
بانتظار الاعضاء و الأساتذة
و عودت الورشة لسابق عهدها :نوم:

بالإنتظار...