https://www.facebook.com/MustafaMahmoudAbdElQader

1. 1
‫ديزاين‬ ‫الويب‬ ‫ماهو‬‫؟‬

2. 2
‫الذييبي‬ ‫هللا‬ ‫عبد‬ ‫عوض‬
‫مصمم‬‫ويب‬

3. 3
‫وبركات‬ ‫هللا‬ ‫ورحمة‬ ‫عليكم‬ ‫السالم‬‫ه‬...
‫مرحبا‬‫أ‬‫الكريم‬ ‫خي‬
‫المواقع‬ ‫بتصميم‬ ‫المقصود‬ ‫ماهو‬(web design)‫؟‬
‫يمكن‬‫الموقع‬ ‫تصميم‬ ‫تقسيم‬‫إ‬‫مرحلتين‬ ‫لى‬:
Frontend -:‫التصميم‬ ‫لغات‬ ‫وتحوي‬Html , Css ,JavaScript
‫باإل‬‫ضافة‬‫إ‬‫الواجهات‬ ‫تصميم‬ ‫برنامج‬ ‫لى‬(‫أ‬‫فوتوشوب‬ ‫دوبي‬).
Backend-:‫البرمجة‬ ‫لغات‬ ‫وتحوي‬PHP, ASP.NET‫إ‬ ‫باإلضافة‬‫لى‬
‫البيانات‬ ‫قواعد‬.
Frontend:
‫ك‬ ‫في‬ ‫الموقع‬ ‫معالجة‬ ‫به‬ ‫يقصد‬‫ل‬‫الشكلي‬ ‫جوانبه‬‫ة‬‫الواجهات‬ ‫تصميم‬ ‫خالل‬ ‫من‬
‫ب‬‫إحدى‬‫الجرافيك‬ ‫التصميم‬ ‫برامج‬‫ي‬‫بلغة‬ ‫برمجتها‬ ‫ثم‬ ‫من‬html, css ,
JavaScript ,
‫إ‬ ‫إند‬ ‫فرونت‬ ‫مرحلة‬ ‫تصنيف‬ ‫ويمكن‬‫لى‬3‫هي‬ ‫مراحل‬:
1-‫الواجهات‬ ‫تصميم‬ ‫مرحلة‬:
‫تصمي‬‫المظهر‬ ‫يخص‬ ‫ما‬ ‫كل‬ ‫هو‬ ‫الواجهات‬ ‫م‬‫كالجرافيك‬ ‫للموقع‬ ‫العام‬ ‫والشكل‬
‫و‬‫ال‬‫و‬ ‫تخطيط‬‫ال‬‫كل‬ ‫على‬ ‫تنسيق‬ ‫وعمل‬ ‫صفحة‬ ‫لكل‬ ‫تقسيم‬‫من‬ ‫الصفحة‬ ‫عناصر‬
،‫التصميم‬ ‫في‬ ‫المستخدمة‬ ،‫وألوان‬ ‫وأيقونات‬ ‫وصور‬ ‫نصوص‬‫تصميم‬ ‫يتم‬ ‫حيث‬
‫الرئ‬ ‫الصفحة‬ ‫من‬ ‫الموقع‬‫ي‬‫س‬‫الداخل‬ ‫والصفحات‬ ‫ية‬‫ي‬‫كامل‬ ‫للموقع‬ ‫ة‬.
‫إذن‬‫للقيا‬‫ف‬ ‫كرسومات‬ ‫الموقع‬ ‫تصميم‬ ‫بمرحلة‬ ‫م‬‫إ‬‫نحتاج‬ ‫ننا‬‫إل‬‫التصميم‬ ‫برامج‬ ‫ى‬
‫الجرافي‬‫ك‬‫ي‬‫و‬‫أ‬‫الفوتوشوب‬ ‫برنامج‬ ‫هو‬ ‫شهرها‬.
(.( Adobe Photoshop cs5
‫الرابط‬ ‫هذا‬ ‫من‬ ‫كامل‬ ‫دورة‬ ‫خالل‬ ‫من‬ ‫الفوتوشوب‬ ‫برنامج‬ ‫تعلم‬ ‫يمكنك‬:

4. 4
http://www.tahaworld.com/courses/course/17
‫على‬ ‫للحصول‬‫أ‬‫في‬ ‫استخدامها‬ ‫يمكن‬ ‫يقونات‬‫الموقع‬ ‫هذا‬ ‫زيارة‬ ‫يمكنك‬ ‫التصميم‬
‫المجاني‬:
http://www.iconfinder.com/
‫إ‬ ‫باإلضافة‬‫يحوي‬ ‫جميل‬ ‫موقع‬ ‫لى‬‫ل‬ ‫قوالب‬‫المواقع‬ ‫تصنيفات‬ ‫معظم‬‫بتصاميم‬
‫رائعة‬:
http://www.templatemonster.com/
2-‫الرسومية‬ ‫الواجهات‬ ‫تحويل‬ ‫مرحلة‬‫إ‬‫ويب‬ ‫صفحة‬ ‫لى‬:
‫الواج‬ ‫تقطيع‬ ‫عملية‬ ‫بها‬ ‫ويقصد‬ ‫الموقع‬ ‫تقطيع‬ ‫بعملية‬ ‫نقوم‬ ‫التصميم‬ ‫بعد‬‫هة‬‫إ‬‫لى‬
‫تجميع‬ ‫ثم‬ ‫من‬ ‫منفردة‬ ‫صور‬‫ه‬‫لغة‬ ‫باستخدام‬ ‫ويب‬ ‫صفحة‬ ‫شكل‬ ‫على‬ ‫ا‬HTML
+ CSS
‫مثال‬:
‫أ‬‫يقون‬‫ة‬‫تم‬ ‫بوك‬ ‫فيس‬‫أ‬‫خ‬‫ذ‬‫واج‬ ‫من‬ ‫ها‬‫هة‬‫تصميمه‬ ‫بعد‬ ‫الموقع‬‫ا‬‫شكل‬ ‫على‬
‫صورة‬.
‫إل‬‫ه‬ ‫ظهار‬‫ذ‬‫األ‬ ‫ه‬‫يقون‬‫ة‬‫ف‬ ‫الويب‬ ‫صفحة‬ ‫على‬‫إ‬‫نحتاج‬ ‫ننا‬‫إ‬‫بالصورة‬ ‫خاص‬ ‫تاق‬ ‫لى‬
‫بلغة‬html:
<imgsrc=”faceook.jpg”>
‫لغة‬html‫الصفحة‬ ‫عناصر‬ ‫عرض‬ ‫عن‬ ‫مسؤولة‬‫تنس‬ ‫دون‬‫أ‬ ،‫كامل‬ ‫يق‬‫ما‬
‫التصميم‬ ‫في‬ ‫جزء‬ ‫بكل‬ ‫التحكم‬ ‫على‬ ‫القدرة‬‫لغة‬ ‫مهمة‬ ‫فهي‬css‫مسؤولة‬ ‫فهي‬
‫وإ‬ ‫العناصر‬ ‫تنسيق‬ ‫عن‬‫عطاء‬‫للتصميم‬ ‫جماليات‬.

5. 5
‫بعد‬‫إ‬‫ظهار‬‫أ‬‫يقون‬‫ة‬‫مثال‬ ‫نقوم‬ ‫الويب‬ ‫صفحة‬ ‫على‬ ‫بوك‬ ‫الفيس‬‫ب‬‫إ‬‫م‬ ‫عطائها‬‫وقع‬
‫خاصي‬ ‫خالل‬ ‫من‬ ‫الصفحة‬ ‫في‬ ‫محدد‬‫ة‬‫بلغة‬ ‫المحاذاة‬css.
Flout: right;
‫األ‬ ‫تظهر‬ ‫عندها‬‫يقون‬‫ة‬‫وهكذا‬ ‫الصفحة‬ ‫يمين‬ ‫في‬..
3-‫مرحلة‬‫إ‬‫شكال‬ ‫الصفحة‬ ‫عطاء‬‫تفاعلي‬‫ا‬:
‫لغة‬ ‫خالل‬ ‫من‬ ‫وهذا‬JavaScript
‫متفاعل‬ ‫زر‬ ‫عمل‬ ‫يمكن‬ ‫منها‬‫أ‬‫األ‬ ‫من‬ ‫وغيرها‬ ‫متحركة‬ ‫صور‬ ‫ول‬‫حداث‬
‫الت‬ ‫التفاعلية‬‫ي‬‫ت‬‫جعل‬‫المس‬‫ت‬‫خدم‬‫أ‬‫تفاعال‬ ‫كثر‬‫بالموقع‬ ‫وثقة‬.
(‫لغة‬ ‫تعلم‬ ‫يمكنك‬html + css +JavaScript‫ه‬ ‫خالل‬ ‫من‬‫ذ‬‫الموقع‬ ‫ا‬
‫جد‬ ‫المبسط‬‫ا‬:
http://www.w3schools.com/
‫مقدم‬ ‫تلك‬ ‫كانت‬‫ة‬‫المواقع‬ ‫تصميم‬ ‫عن‬ ‫بسيطة‬،‫المرحلة‬ ‫تبقت‬‫تصميم‬ ‫من‬ ‫الثانية‬
‫المو‬‫نوضحها‬ ‫قع‬‫القادم‬ ‫المواضيع‬ ‫في‬‫ة‬‫إ‬‫ن‬‫شا‬‫هللا‬ ‫ء‬.

6. 6‫مع‬‫والتق‬ ‫الشكر‬ ‫خالص‬