يتناول هذا الوثيقة مفهوم تصميم المواقع الإلكترونية، موضحًا أنه يتطلب مراحل متعددة تشمل التصميم الواجهات الأمامية (frontend) الذي يستخدم لغات HTML وCSS وJavaScript، والبرمجة الخلفية (backend) باستخدام لغات مثل PHP وASP.NET. يقدم الوثيقة نصائح وأدوات لتحسين التصميم مثل Adobe Photoshop ومواقع تصميم القوالب. كما يشرح كيفية إضافة عناصر تفاعلية باستخدام JavaScript لجعل المستخدمين يتفاعلون بشكل أفضل مع الموقع.

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‫مع‬‫والتق‬ ‫الشكر‬ ‫خالص‬