مراحل إنشاء وتصميم موقع الويب

1. ‫ب‬‫ي‬‫و‬‫ل‬‫ا‬‫ات‬‫ح‬‫ف‬‫ص‬‫م‬‫ي‬‫م‬‫ص‬‫ت‬
‫و‬‫اء‬‫ش‬‫ن‬‫ا‬‫ل‬‫ح‬‫ا‬‫ر‬‫م‬
‫داد‬‫ع‬‫ا‬
:
‫د‬‫ش‬‫ا‬‫ر‬‫د‬‫م‬‫ح‬‫ا‬‫ر‬‫مي‬‫س‬‫ان‬‫م‬‫ي‬‫ا‬
‫اف‬‫ر‬‫ش‬‫ا‬
:
‫د‬
/
‫ر‬‫مي‬‫س‬‫رة‬‫مي‬‫ا‬
‫د‬
/
‫ة‬‫م‬‫لا‬‫س‬‫ة‬‫ي‬‫م‬‫س‬

2. ‫ب‬‫ي‬‫و‬‫ل‬‫ا‬‫ات‬‫ح‬‫ف‬‫ص‬‫م‬‫ي‬‫م‬‫ص‬‫ت‬
‫و‬‫اء‬‫ش‬‫ن‬‫ا‬‫ل‬‫ح‬‫ا‬‫ر‬‫م‬
‫ي‬‫ل‬‫آ‬‫ب‬‫ش‬‫ا‬‫ح‬
-
‫دادي‬‫ع‬‫لإ‬‫ا‬‫ي‬‫ن‬‫ا‬‫ث‬‫ل‬‫ا‬‫ف‬‫ص‬‫ل‬‫ا‬
‫داد‬‫ع‬‫ا‬
:
‫ر‬‫مي‬‫س‬‫ان‬‫م‬‫ي‬‫ا‬

3. ‫ب‬‫ي‬‫و‬‫ل‬‫ا‬‫ات‬‫ح‬‫ف‬‫ص‬‫م‬‫ي‬‫م‬‫ص‬‫ت‬
‫و‬‫اء‬‫ش‬‫ن‬‫ا‬‫ل‬‫ح‬‫ا‬‫ر‬‫م‬
‫ي‬‫ل‬‫آ‬‫ب‬‫ش‬‫ا‬‫ح‬
-
‫دادي‬‫ع‬‫لإ‬‫ا‬‫ي‬‫ن‬‫ا‬‫ث‬‫ل‬‫ا‬‫ف‬‫ص‬‫ل‬‫ا‬
‫داد‬‫ع‬‫ا‬
:
‫ر‬‫مي‬‫س‬‫ان‬‫م‬‫ي‬‫ا‬
“ ‫”األهداف‬ *
‫العام‬ ‫الهدف‬
:
-
‫في‬ ‫تتمثل‬
..........
‫أن‬ ‫علي‬ ‫ا‬
‫ر‬‫قاد‬ ‫الطالب‬ ‫ن‬‫يكو‬ ‫أن‬ ‫يتوقع‬ ‫ع‬
‫الموضو‬ ‫هذا‬ ‫نهاية‬ ‫في‬
:
-
1
.
‫الويب‬ ‫اقع‬‫و‬‫م‬ ‫إنشاء‬‫و‬ ‫تصميم‬ ‫احل‬
‫ر‬‫م‬ ‫معرفة‬

4. ‫ب‬‫ي‬‫و‬‫ل‬‫ا‬‫ات‬‫ح‬‫ف‬‫ص‬‫م‬‫ي‬‫م‬‫ص‬‫ت‬
‫و‬‫اء‬‫ش‬‫ن‬‫ا‬‫ل‬‫ح‬‫ا‬‫ر‬‫م‬
‫ي‬‫ل‬‫آ‬‫ب‬‫ش‬‫ا‬‫ح‬
-
‫دادي‬‫ع‬‫لإ‬‫ا‬‫ي‬‫ن‬‫ا‬‫ث‬‫ل‬‫ا‬‫ف‬‫ص‬‫ل‬‫ا‬
‫داد‬‫ع‬‫ا‬
:
‫ر‬‫مي‬‫س‬‫ان‬‫م‬‫ي‬‫ا‬
“ ‫”األهداف‬ *
‫ائية‬
‫ر‬‫اإلج‬ ‫األهداف‬
‫في‬ ‫تتمثل‬
..........
4 ‫التفيذ‬ ‫مرحلة‬ ‫يوضح‬
1
‫الويب‬ ‫موقع‬ ‫لبناء‬ ‫التخطيط‬ ‫مرحلة‬ ‫يوضح‬
2 ‫للموقع‬ ‫الويب‬ ‫صفحات‬ ‫تصميم‬ ‫مرحلة‬ ‫يصمم‬
3
‫التجهيز‬‫و‬ ‫اإلعداد‬ ‫مرحلة‬ ‫يشرح‬

5. ‫ب‬‫ي‬‫و‬‫ل‬‫ا‬‫ات‬‫ح‬‫ف‬‫ص‬‫م‬‫ي‬‫م‬‫ص‬‫ت‬
‫و‬‫اء‬‫ش‬‫ن‬‫ا‬‫ل‬‫ح‬‫ا‬‫ر‬‫م‬
‫ي‬‫ل‬‫آ‬‫ب‬‫ش‬‫ا‬‫ح‬
-
‫دادي‬‫ع‬‫لإ‬‫ا‬‫ي‬‫ن‬‫ا‬‫ث‬‫ل‬‫ا‬‫ف‬‫ص‬‫ل‬‫ا‬
‫داد‬‫ع‬‫ا‬
:
‫ر‬‫مي‬‫س‬‫ان‬‫م‬‫ي‬‫ا‬
“ ‫”األهداف‬ *
‫ائية‬
‫ر‬‫اإلج‬ ‫األهداف‬
‫في‬ ‫تتمثل‬
..........
5
‫اإلنترنت‬ ‫عبر‬ ‫الموقع‬ ‫نشر‬ ‫مرحلة‬ ‫يبين‬
6 ‫الويب‬ ‫إنشاء‬‫و‬ ‫تصميم‬ ‫احل‬
‫ر‬‫م‬ ‫أهمية‬ ‫يقدر‬ ‫أن‬

6. ‫ب‬‫ي‬‫و‬‫ل‬‫ا‬‫ات‬‫ح‬‫ف‬‫ص‬‫م‬‫ي‬‫م‬‫ص‬‫ت‬
‫و‬‫اء‬‫ش‬‫ن‬‫ا‬‫ل‬‫ح‬‫ا‬‫ر‬‫م‬
‫ي‬‫ل‬‫آ‬‫ب‬‫ش‬‫ا‬‫ح‬
-
‫دادي‬‫ع‬‫لإ‬‫ا‬‫ي‬‫ن‬‫ا‬‫ث‬‫ل‬‫ا‬‫ف‬‫ص‬‫ل‬‫ا‬
‫داد‬‫ع‬‫ا‬
:
‫ر‬‫مي‬‫س‬‫ان‬‫م‬‫ي‬‫ا‬
“ ‫احل‬
‫ر‬‫”الم‬ *
‫النشر‬ ‫مرحلة‬
‫التنفيذ‬ ‫مرحلة‬
‫و‬ ‫التجهيز‬ ‫مرحلة‬
‫اإلعداد‬
‫التصميم‬ ‫مرحلة‬
‫التخطيط‬ ‫مرحلة‬

7. ‫ب‬‫ي‬‫و‬‫ل‬‫ا‬‫ات‬‫ح‬‫ف‬‫ص‬‫م‬‫ي‬‫م‬‫ص‬‫ت‬
‫و‬‫اء‬‫ش‬‫ن‬‫ا‬‫ل‬‫ح‬‫ا‬‫ر‬‫م‬
‫ي‬‫ل‬‫آ‬‫ب‬‫ش‬‫ا‬‫ح‬
-
‫دادي‬‫ع‬‫لإ‬‫ا‬‫ي‬‫ن‬‫ا‬‫ث‬‫ل‬‫ا‬‫ف‬‫ص‬‫ل‬‫ا‬
‫داد‬‫ع‬‫ا‬
:
‫ر‬‫مي‬‫س‬‫ان‬‫م‬‫ي‬‫ا‬
‫األولي‬ ‫المرحلة‬
‫الموقع‬ ‫لبناء‬ ‫التخطيط‬
(
1
)
‫بسيط‬ ‫تخطيطي‬ ‫رسم‬ ‫يتم‬ ‫الموقع‬ ‫بناء‬ ‫تخطيط‬ ‫مرحلة‬ ‫في‬
‫الموقع‬ ‫لصفحات‬ ‫ق‬‫ور‬ ‫علي‬
( .
‫صفحات‬ ‫وباقي‬ ، ‫الرئيسية‬ ‫الموقع‬ ‫صفحة‬
‫بها‬ ‫المرتبطة‬ ‫الويب‬
)
(
2
)
‫صفحات‬ ‫تتضمنها‬ ‫التي‬ ‫المعلومات‬‫و‬ ‫المعلومات‬‫و‬ ‫البيانات‬ ‫تحديد‬ ‫ويتم‬
‫الموقع‬ ‫يقدمها‬ ‫وخدمات‬ ‫كمعلومات‬ ‫الويب‬
.

8. ‫ب‬‫ي‬‫و‬‫ل‬‫ا‬‫ات‬‫ح‬‫ف‬‫ص‬‫م‬‫ي‬‫م‬‫ص‬‫ت‬
‫و‬‫اء‬‫ش‬‫ن‬‫ا‬‫ل‬‫ح‬‫ا‬‫ر‬‫م‬
‫ي‬‫ل‬‫آ‬‫ب‬‫ش‬‫ا‬‫ح‬
-
‫دادي‬‫ع‬‫لإ‬‫ا‬‫ي‬‫ن‬‫ا‬‫ث‬‫ل‬‫ا‬‫ف‬‫ص‬‫ل‬‫ا‬
‫داد‬‫ع‬‫ا‬
:
‫ر‬‫مي‬‫س‬‫ان‬‫م‬‫ي‬‫ا‬
*
‫فيها‬ ‫ويتم‬ ‫الويب‬ ‫موقع‬ ‫إنشاء‬ ‫احل‬
‫ر‬‫م‬ ‫أهم‬ ‫من‬
:
(
1
)
‫الموقع‬ ‫وصفحات‬ ‫الرئيسية‬ ‫الصفحة‬ ‫شكل‬ ‫تصميم‬
.
(
2
)
‫مثل‬ ‫الويب‬ ‫لصفحات‬ ‫المختلفة‬ ‫التنسيقات‬ ‫تحديد‬
:
-
، ‫الصور‬ ، ‫النصوص‬ ‫وضع‬ ، ‫ونوعه‬ ،‫لونه‬ ، ‫الخط‬ ‫حجم‬ ، ‫الصفحة‬ ‫ن‬‫لو‬
‫الويب‬ ‫بصفحات‬ ‫الفيديو‬ ‫ولقطات‬
(
3
)
‫الموق‬ ‫وصفحات‬ ‫الرئيسية‬ ‫الصفحة‬ ‫داخل‬ ‫التشعبية‬ ‫اإلرتباطات‬ ‫تحديد‬
‫ع‬
.
‫الثانية‬ ‫المرحلة‬
‫التصميم‬ ‫مرحلة‬

9. ‫ب‬‫ي‬‫و‬‫ل‬‫ا‬‫ات‬‫ح‬‫ف‬‫ص‬‫م‬‫ي‬‫م‬‫ص‬‫ت‬
‫و‬‫اء‬‫ش‬‫ن‬‫ا‬‫ل‬‫ح‬‫ا‬‫ر‬‫م‬
‫ي‬‫ل‬‫آ‬‫ب‬‫ش‬‫ا‬‫ح‬
-
‫دادي‬‫ع‬‫لإ‬‫ا‬‫ي‬‫ن‬‫ا‬‫ث‬‫ل‬‫ا‬‫ف‬‫ص‬‫ل‬‫ا‬
‫داد‬‫ع‬‫ا‬
:
‫ر‬‫مي‬‫س‬‫ان‬‫م‬‫ي‬‫ا‬
‫فيها‬ ‫يتم‬
:
(
1
)
‫النصية‬ ‫البيانات‬ ‫ات‬
‫ز‬‫وتجهي‬ ‫إعداد‬ ‫في‬ ‫النصوص‬ ‫منسقات‬ ‫أحد‬ ‫استخدام‬
، ‫نصي‬ ‫ملف‬ ‫داخل‬ ‫النص‬ ‫حفظ‬ ، ‫الويب‬ ‫صفحات‬ ‫في‬ ‫توضع‬ ‫سوف‬ ‫التي‬
‫المجلد‬ ‫داخل‬ ‫ووضعة‬
.
(
2
)
‫المجلد‬ ‫داخل‬ ‫وحفظها‬ ‫الصور‬ ‫ملفات‬ ‫وتجهيز‬ ‫إعداد‬
.
(
3
)
‫داخل‬ ‫وحفظها‬ ‫الفيديو‬‫و‬ ‫الصوت‬ ‫ملفات‬ ‫وتجهيز‬ ‫إعداد‬
‫المجلدات‬
.
‫الثالثة‬ ‫المرحلة‬
‫اإلعداد‬‫و‬ ‫التجهيز‬ ‫مرحلة‬

10. ‫ب‬‫ي‬‫و‬‫ل‬‫ا‬‫ات‬‫ح‬‫ف‬‫ص‬‫م‬‫ي‬‫م‬‫ص‬‫ت‬
‫و‬‫اء‬‫ش‬‫ن‬‫ا‬‫ل‬‫ح‬‫ا‬‫ر‬‫م‬
‫ي‬‫ل‬‫آ‬‫ب‬‫ش‬‫ا‬‫ح‬
-
‫دادي‬‫ع‬‫لإ‬‫ا‬‫ي‬‫ن‬‫ا‬‫ث‬‫ل‬‫ا‬‫ف‬‫ص‬‫ل‬‫ا‬
‫داد‬‫ع‬‫ا‬
:
‫ر‬‫مي‬‫س‬‫ان‬‫م‬‫ي‬‫ا‬
‫النصوص‬ ‫وتجهيز‬ ‫إعداد‬ 1
-
‫بالموقع‬ ‫ويب‬ ‫صفحة‬ ‫لكل‬ ‫المطلوب‬ ‫النصوص‬ ‫تحديد‬
.
-
‫الويب‬ ‫موقع‬ ‫لصفحات‬ ‫اللألزمة‬ ‫النصية‬ ‫البيانات‬ ‫عن‬ ‫البحث‬
‫المدرسية‬ ‫ة‬
‫اإلدار‬ ‫خالل‬ ‫من‬ ‫أو‬ ‫اإلنترنت‬ ‫خالل‬ ‫من‬
.
-
‫الحقا‬ ‫ء‬
‫الجز‬ ‫هذا‬ ‫يستكمل‬ ‫سوف‬
2
‫الفيديو‬ ‫الصور‬ ‫وتجهيز‬ ‫إعداد‬

11. ‫ب‬‫ي‬‫و‬‫ل‬‫ا‬‫ات‬‫ح‬‫ف‬‫ص‬‫م‬‫ي‬‫م‬‫ص‬‫ت‬
‫و‬‫اء‬‫ش‬‫ن‬‫ا‬‫ل‬‫ح‬‫ا‬‫ر‬‫م‬
‫ي‬‫ل‬‫آ‬‫ب‬‫ش‬‫ا‬‫ح‬
-
‫دادي‬‫ع‬‫لإ‬‫ا‬‫ي‬‫ن‬‫ا‬‫ث‬‫ل‬‫ا‬‫ف‬‫ص‬‫ل‬‫ا‬
‫داد‬‫ع‬‫ا‬
:
‫ر‬‫مي‬‫س‬‫ان‬‫م‬‫ي‬‫ا‬
‫الصور‬ ‫وتجهيز‬ ‫إعداد‬ 3
-
‫ومالعب‬ ‫ومعامل‬ ‫فصول‬ ‫من‬ ‫لمدرستك‬ ‫الصور‬ ‫من‬ ‫مجموعة‬ ‫بالتقاط‬ ‫قم‬
‫الموبايب‬ ‫أو‬ ‫الرقمية‬ ‫ا‬
‫ر‬‫الكامي‬ ‫بإستخدام‬
....
-
‫المسابقات‬ ‫وصور‬ ‫المسابقات‬‫و‬ ‫المدرسية‬ ‫األنشطة‬ ‫عن‬ ‫الصور‬ ‫تجميع‬
‫ات‬
‫ر‬‫اإلد‬ ‫أو‬ ‫التعليمية‬ ‫ة‬
‫اإلدار‬ ‫ي‬‫مستو‬ ‫علي‬ ‫أو‬ ‫المدرسة‬ ‫داخل‬
.
-
‫التخزين‬ ‫وسائط‬ ‫أحد‬ ‫علي‬ ‫مجلد‬ ‫داخل‬ ‫كملفات‬ ‫الصور‬ ‫حفظ‬
.

12. ‫ب‬‫ي‬‫و‬‫ل‬‫ا‬‫ات‬‫ح‬‫ف‬‫ص‬‫م‬‫ي‬‫م‬‫ص‬‫ت‬
‫و‬‫اء‬‫ش‬‫ن‬‫ا‬‫ل‬‫ح‬‫ا‬‫ر‬‫م‬
‫ي‬‫ل‬‫آ‬‫ب‬‫ش‬‫ا‬‫ح‬
-
‫دادي‬‫ع‬‫لإ‬‫ا‬‫ي‬‫ن‬‫ا‬‫ث‬‫ل‬‫ا‬‫ف‬‫ص‬‫ل‬‫ا‬
‫داد‬‫ع‬‫ا‬
:
‫ر‬‫مي‬‫س‬‫ان‬‫م‬‫ي‬‫ا‬
(
1
)
‫ع‬ ‫يمكن‬ ‫ويب‬ ‫صفحات‬ ‫ألي‬ ‫الورقي‬ ‫التصميم‬ ‫تحويل‬ ‫مرحلة‬ ‫هي‬
‫رضها‬
‫اإلنترنت‬ ‫متصفحات‬ ‫امج‬
‫ر‬‫ب‬ ‫خالل‬ ‫من‬
(
2
)
‫البيانات‬ ‫إضافة‬
(
‫نصوص‬
–
‫صور‬
–
‫صوت‬
–
‫فيديو‬
)...
‫في‬
‫الويب‬ ‫صفحات‬
‫اإلرتباطات‬ ‫إنشاء‬ ‫يتم‬ HTML (
3
)
‫البرمجة‬ ‫لغة‬ ‫امر‬‫و‬‫أ‬ ‫بإستخدام‬
‫الموقع‬ ‫صفحات‬ ‫بين‬ ‫التنقل‬ ‫يسهل‬ ‫حتي‬ ‫الويب‬ ‫صفحات‬ ‫بين‬ ‫التشعبية‬
.
‫ابعة‬
‫ر‬‫ال‬ ‫المرحلة‬
‫التنفيذ‬ ‫مرحلة‬

13. ‫ب‬‫ي‬‫و‬‫ل‬‫ا‬‫ات‬‫ح‬‫ف‬‫ص‬‫م‬‫ي‬‫م‬‫ص‬‫ت‬
‫و‬‫اء‬‫ش‬‫ن‬‫ا‬‫ل‬‫ح‬‫ا‬‫ر‬‫م‬
‫ي‬‫ل‬‫آ‬‫ب‬‫ش‬‫ا‬‫ح‬
-
‫دادي‬‫ع‬‫لإ‬‫ا‬‫ي‬‫ن‬‫ا‬‫ث‬‫ل‬‫ا‬‫ف‬‫ص‬‫ل‬‫ا‬
‫داد‬‫ع‬‫ا‬
:
‫ر‬‫مي‬‫س‬‫ان‬‫م‬‫ي‬‫ا‬
(
1
)
‫للموقع‬ ‫ان‬‫و‬‫عن‬ ‫حجز‬ ‫المرحلة‬ ‫هذه‬ ‫في‬ ‫يتم‬
.
(
2
)
‫للموقع‬ ‫ة‬
‫أجهز‬ ‫أحد‬ ‫علي‬ ‫للموقع‬ ‫تخزينية‬ ‫مساحة‬ ‫تخصيص‬
.
(
3
)
‫صحيح‬ ‫بشكل‬ ‫للعمل‬ ‫إعداده‬‫و‬ ‫اإلنترنت‬ ‫عبر‬ ‫الموقع‬ ‫نشر‬
.
‫الخامسة‬ ‫المرحلة‬
‫النشر‬ ‫مرحلة‬

14. ‫اء‬‫ش‬‫ن‬‫ا‬‫ل‬‫ح‬‫ا‬‫ر‬‫م‬
‫ب‬‫ي‬‫و‬‫ل‬‫ا‬‫ات‬‫ح‬‫ف‬‫ص‬‫م‬‫ي‬‫م‬‫ص‬‫ت‬
‫و‬
‫ي‬‫ل‬‫آ‬‫ب‬‫ش‬‫ا‬‫ح‬
-
‫دادي‬‫ع‬‫لإ‬‫ا‬‫ي‬‫ن‬‫ا‬‫ث‬‫ل‬‫ا‬‫ف‬‫ص‬‫ل‬‫ا‬
‫داد‬‫ع‬‫ا‬
:
‫ر‬‫مي‬‫س‬‫ان‬‫م‬‫ي‬‫ا‬
‫تلخيص‬