Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

يعنى أية ويب ديزاين

865 vues

Publié le

https://www.facebook.com/MustafaMahmoudAbdElQader

Publié dans : Design
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

يعنى أية ويب ديزاين

  1. 1. 1 ‫ديزاين‬ ‫الويب‬ ‫ماهو‬‫؟‬
  2. 2. 2 ‫الذييبي‬ ‫هللا‬ ‫عبد‬ ‫عوض‬ ‫مصمم‬‫ويب‬
  3. 3. 3 ‫وبركات‬ ‫هللا‬ ‫ورحمة‬ ‫عليكم‬ ‫السالم‬‫ه‬... ‫مرحبا‬‫أ‬‫الكريم‬ ‫خي‬ ‫المواقع‬ ‫بتصميم‬ ‫المقصود‬ ‫ماهو‬(web design)‫؟‬ ‫يمكن‬‫الموقع‬ ‫تصميم‬ ‫تقسيم‬‫إ‬‫مرحلتين‬ ‫لى‬: Frontend -:‫التصميم‬ ‫لغات‬ ‫وتحوي‬Html , Css ,JavaScript ‫باإل‬‫ضافة‬‫إ‬‫الواجهات‬ ‫تصميم‬ ‫برنامج‬ ‫لى‬(‫أ‬‫فوتوشوب‬ ‫دوبي‬). Backend-:‫البرمجة‬ ‫لغات‬ ‫وتحوي‬PHP, ASP.NET‫إ‬ ‫باإلضافة‬‫لى‬ ‫البيانات‬ ‫قواعد‬. Frontend: ‫ك‬ ‫في‬ ‫الموقع‬ ‫معالجة‬ ‫به‬ ‫يقصد‬‫ل‬‫الشكلي‬ ‫جوانبه‬‫ة‬‫الواجهات‬ ‫تصميم‬ ‫خالل‬ ‫من‬ ‫ب‬‫إحدى‬‫الجرافيك‬ ‫التصميم‬ ‫برامج‬‫ي‬‫بلغة‬ ‫برمجتها‬ ‫ثم‬ ‫من‬html, css , JavaScript , ‫إ‬ ‫إند‬ ‫فرونت‬ ‫مرحلة‬ ‫تصنيف‬ ‫ويمكن‬‫لى‬3‫هي‬ ‫مراحل‬: 1-‫الواجهات‬ ‫تصميم‬ ‫مرحلة‬: ‫تصمي‬‫المظهر‬ ‫يخص‬ ‫ما‬ ‫كل‬ ‫هو‬ ‫الواجهات‬ ‫م‬‫كالجرافيك‬ ‫للموقع‬ ‫العام‬ ‫والشكل‬ ‫و‬‫ال‬‫و‬ ‫تخطيط‬‫ال‬‫كل‬ ‫على‬ ‫تنسيق‬ ‫وعمل‬ ‫صفحة‬ ‫لكل‬ ‫تقسيم‬‫من‬ ‫الصفحة‬ ‫عناصر‬ ،‫التصميم‬ ‫في‬ ‫المستخدمة‬ ،‫وألوان‬ ‫وأيقونات‬ ‫وصور‬ ‫نصوص‬‫تصميم‬ ‫يتم‬ ‫حيث‬ ‫الرئ‬ ‫الصفحة‬ ‫من‬ ‫الموقع‬‫ي‬‫س‬‫الداخل‬ ‫والصفحات‬ ‫ية‬‫ي‬‫كامل‬ ‫للموقع‬ ‫ة‬. ‫إذن‬‫للقيا‬‫ف‬ ‫كرسومات‬ ‫الموقع‬ ‫تصميم‬ ‫بمرحلة‬ ‫م‬‫إ‬‫نحتاج‬ ‫ننا‬‫إل‬‫التصميم‬ ‫برامج‬ ‫ى‬ ‫الجرافي‬‫ك‬‫ي‬‫و‬‫أ‬‫الفوتوشوب‬ ‫برنامج‬ ‫هو‬ ‫شهرها‬. (.( Adobe Photoshop cs5 ‫الرابط‬ ‫هذا‬ ‫من‬ ‫كامل‬ ‫دورة‬ ‫خالل‬ ‫من‬ ‫الفوتوشوب‬ ‫برنامج‬ ‫تعلم‬ ‫يمكنك‬:
  4. 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. 5 ‫بعد‬‫إ‬‫ظهار‬‫أ‬‫يقون‬‫ة‬‫مثال‬ ‫نقوم‬ ‫الويب‬ ‫صفحة‬ ‫على‬ ‫بوك‬ ‫الفيس‬‫ب‬‫إ‬‫م‬ ‫عطائها‬‫وقع‬ ‫خاصي‬ ‫خالل‬ ‫من‬ ‫الصفحة‬ ‫في‬ ‫محدد‬‫ة‬‫بلغة‬ ‫المحاذاة‬css. Flout: right; ‫األ‬ ‫تظهر‬ ‫عندها‬‫يقون‬‫ة‬‫وهكذا‬ ‫الصفحة‬ ‫يمين‬ ‫في‬.. 3-‫مرحلة‬‫إ‬‫شكال‬ ‫الصفحة‬ ‫عطاء‬‫تفاعلي‬‫ا‬: ‫لغة‬ ‫خالل‬ ‫من‬ ‫وهذا‬JavaScript ‫متفاعل‬ ‫زر‬ ‫عمل‬ ‫يمكن‬ ‫منها‬‫أ‬‫األ‬ ‫من‬ ‫وغيرها‬ ‫متحركة‬ ‫صور‬ ‫ول‬‫حداث‬ ‫الت‬ ‫التفاعلية‬‫ي‬‫ت‬‫جعل‬‫المس‬‫ت‬‫خدم‬‫أ‬‫تفاعال‬ ‫كثر‬‫بالموقع‬ ‫وثقة‬. (‫لغة‬ ‫تعلم‬ ‫يمكنك‬html + css +JavaScript‫ه‬ ‫خالل‬ ‫من‬‫ذ‬‫الموقع‬ ‫ا‬ ‫جد‬ ‫المبسط‬‫ا‬: http://www.w3schools.com/ ‫مقدم‬ ‫تلك‬ ‫كانت‬‫ة‬‫المواقع‬ ‫تصميم‬ ‫عن‬ ‫بسيطة‬،‫المرحلة‬ ‫تبقت‬‫تصميم‬ ‫من‬ ‫الثانية‬ ‫المو‬‫نوضحها‬ ‫قع‬‫القادم‬ ‫المواضيع‬ ‫في‬‫ة‬‫إ‬‫ن‬‫شا‬‫هللا‬ ‫ء‬.
  6. 6. 6‫مع‬‫والتق‬ ‫الشكر‬ ‫خالص‬

×