‫الفرع الأدبي والشرعي‬

‫المواقع الإلكترونية‬

‫أ‪ .‬أيمن محمود العكلوك‬ ‫أ‪ .‬رمزي راغب النخالة‬

 ‫أهداف الدرس‬
‫بعد الانتهاء من الدرس يتوقع منك أن تكون قادراً على أن‪:‬‬
‫• توضح مفهوم المواقع الإلكترونية‪.‬‬
‫• تشرح آلية تصفح موقع على شبكة الانترنت‪.‬‬
‫• تعدد أنواع المواقع الإلكترونية‪.‬‬
‫• تعدد طرق تصميم المواقع الإلكترونية‪.‬‬
‫• تصمم موقع إلكتروني باستخدام برنامج ‪.Web Page Maker‬‬

‫‪2‬‬ ‫الفرع الأدبي والشرعي‬

 ‫مفهوم المواقع الإلكترونية‬

‫‪3‬‬ ‫الفرع الأدبي والشرعي‬

 ‫المواقع الإلكترونية‬
‫أطلق أول موقع إلكتروني في بداية تسعينيات القرن الماضي‪.‬‬
‫بعنوان‪Info.cern.ch :‬‬
‫وكان يهدف إلى‪:‬‬
‫تزويد المستخدمين بمعلومات عن شبكة الإنترنت‪.‬‬ ‫‪.1‬‬
‫آلية الوصول إلى الصفحات والمواقع المختلفة‪.‬‬ ‫‪.2‬‬
‫انطلاقة لبدء العمل على تأسيس مواقع إلكترونية‬ ‫‪.3‬‬
‫أخرى‪.‬‬

‫‪4‬‬ ‫الفرع الأدبي والشرعي‬

 ‫هيكلية شبكة الانترنت‪:‬‬
‫‪ .1‬أجهزة الخوادم (‪:)Servers‬‬
‫تقوم بتوفير الخدمات المختلفة‪ ،‬مثل‪ :‬تخزين المعلومات‬
‫والتحكم بالشبكة وصفحات الويب‪.‬‬

‫‪5‬‬ ‫الفرع الأدبي والشرعي‬

 ‫هيكلية شبكة الانترنت‪:‬‬
‫‪ .2‬أجهزة الزبائن (‪:)Clients‬‬
‫يستخدمها الأفراد للوصول إلى مواقع الشبكة للتصفح‬
‫وتحميل أو تنزيل الملفات‪.‬‬

‫‪6‬‬ ‫الفرع الأدبي والشرعي‬

 ‫هيكلية شبكة الانترنت‪:‬‬
‫‪ .3‬الشركات المزودة لخدمة الإنترنت‪.‬‬
‫‪ .4‬وسائل الاتصالات السلكية واللاسلكية وتقنياتها‪:‬‬
‫وهي التي تشكل العمود الفقري للشبكة‪.‬‬

‫‪7‬‬ ‫الفرع الأدبي والشرعي‬

 ‫مفهوم الموقع الإلكتروني‪:‬‬
‫مجموعةةة مةةن الصةةفحات الإلكترونيةةة المتصةةلة مع ةاً عب ةر‬
‫وصةةلات تشةةعبية (‪ ،)Hyperlinks‬التةةي تمكةةن المسةةتخدم‬
‫من تصفح محتوياتها‪ ،‬تم برمجتها بإحدى لغةات البرمجةة‬
‫للإنترنت‪ ،‬وتكون مخزنة على خادم ويب (‪.)Web Server‬‬
‫من لغات البرمجة المستخدمة في برمجة مواقع الانترنت‪:‬‬

‫‪8‬‬ ‫الفرع الأدبي والشرعي‬

 ‫مفهوم الموقع الإلكتروني‪:‬‬
‫مجموعةةة مةةن الصةةفحات الإلكترونيةةة المتصةةلة مع ةاً عب ةر‬
‫وصةةلات تشةةعبية (‪ ،)Hyperlinks‬التةةي تمكةةن المسةةتخدم‬
‫من تصفح محتوياتها‪ ،‬تم برمجتها بإحدى لغةات البرمجةة‬
‫للإنترنت‪ ،‬وتكون مخزنة على خادم ويب (‪.)Web Server‬‬
‫من لغات البرمجة المستخدمة في برمجة مواقع الانترنت‪:‬‬

‫‪ASP.net ،PHP ،HTML‬‬

‫يتم تصميم مواقع الانترنت باستخدام برامج متخصصة‪.‬‬
‫‪9‬‬ ‫الفرع الأدبي والشرعي‬
 ‫مفهوم الموقع الإلكتروني‪:‬‬
‫تحتوي صفحات المواقع الإلكترونية‪:‬‬
‫• ملفات نصية‪.‬‬
‫• ملفات صوتية‪.‬‬
‫• ملفات فيديو‪.‬‬
‫• صور‪.‬‬

‫لكل موقع عنوان خاص يسمى ‪ :URL‬يُحدد مكانه على‬

‫الشبكة‪.‬‬
‫‪10‬‬ ‫الفرع الأدبي والشرعي‬
 ‫عنوان الموقع الإلكتروني (اسم المجال)‪:‬‬
‫اسم حصري وفريد (غير مكرر) على مسةتوى كةل المواقةع‬
‫الإلكترونية‪.‬‬
‫يتكون من مقطعين‪:‬‬
‫المقطع الأول‪ :‬يعبر عن اسم الموقع ويتكون من حروف‬
‫وأرقام فقط‪.‬‬
‫المقطع الثاني‪ :‬يسمى الملحق‪ ،‬ويتكون من‪:‬‬
‫نشاط ( نوع ) الموقع‪.‬‬ ‫•‬
‫الدولة التابع لها‪:‬‬ ‫•‬
‫مثل ‪ PS‬تعني دولة فلسطين‪.‬‬
‫‪11‬‬ ‫الفرع الأدبي والشرعي‬
 ‫حدد مدلولات الموقع الإلكتروني التالي‪:‬‬
‫‪http://www.rawafed.edu.ps‬‬
‫اسم الموقع‬ ‫الملحق‬

‫‪ ps‬فلسطيني‬ ‫‪ Edu‬تعليمي‬

‫‪12‬‬ ‫الفرع الأدبي والشرعي‬

 ‫نشكرك على حسن متابعتك‬

‫‪13‬‬ ‫الفرع الأدبي والشرعي‬

 ‫آلية تصفح موقع على شبكة الانترنت‬

‫‪14‬‬ ‫الفرع الأدبي والشرعي‬

 ‫آلية تصفح موقع على شبكة الانترنت‪:‬‬
‫• فتح أحد برامج تصفح الإنترنت‪.‬‬

‫• كتابة عنوان الموقع الإلكتروني في المكان المخصص‬

‫(شريط العنوان) في برنامج المتصفح‪.‬‬

‫‪15‬‬ ‫الفرع الأدبي والشرعي‬

 ‫آلية تصفح موقع على شبكة الانترنت‪:‬‬
‫‪،)DNS‬‬
‫بنقل‬ ‫‪)HTTP‬‬
‫جهاز‬ ‫اتصال بين‬
‫يسمى (‬
‫يسمى (‬‫خاص‬
‫خاص‬ ‫يحدث‬
‫خادم‬ ‫رسالةاً‪،‬إلى‬
‫بروتوكول‬ ‫صحيح‬ ‫العنوان‬
‫بإرساليبدأ‬ ‫يكون‬
‫الجهاز‬
‫الاتصال‪،‬‬ ‫حدوث‬‫عندما‬
‫يقوم‬
‫عند‬ ‫‪.4‬‬
‫‪.3‬‬
‫‪.5‬‬
‫‪TCP/IP‬‬
‫ويستخدم‬
‫إلى‬ ‫الموقع‪،‬‬
‫الاتصال‬
‫الخادم‬ ‫ذلك‬ ‫يحتوي على‬
‫بروتوكول‬
‫محتوياتها من‬ ‫بوساطة‬
‫بكل‬ ‫والخادمالذي‬
‫للموقع‬ ‫الخادم‬ ‫رقم‬ ‫لتحديد‬
‫المستخدم‬
‫الرئيسة‬ ‫الصفحة‬
‫الرقم لإيصال رسالة طلب إلى الخادم‪.‬‬ ‫الزبون‪.‬‬
‫هذا‬
‫العنوان‬
‫النصي‬

‫العنوان‬
‫الرقمي‬ ‫خادم ‪DNS‬‬
‫جهاز الزبون‬
‫‪16‬‬ ‫خادم الموقع‬ ‫الفرع الأدبي والشرعي‬
 ‫آلية تصفح موقع على شبكة الانترنت‪:‬‬
‫عندما تصل هذه المعلومات إلى جهاز المستخدم‪،‬‬ ‫‪.6‬‬
‫تخزن في مجلد مؤقت على القرص الصلب‪ ،‬ثم يتم‬
‫عرضها داخل المتصفح‪.‬‬

‫يستطيع المستخدم التنقل من الصفحة الرئيسية‬ ‫‪.7‬‬

‫إلى صفحات أخرى على الموقع‪ ،‬باستخدام الوصلات‬
‫التشعبية الموزعة داخل الصفحة‪.‬‬

‫‪17‬‬ ‫الفرع الأدبي والشرعي‬

 ‫نشكرك على حسن المتابعة‬

‫‪18‬‬ ‫الفرع الأدبي والشرعي‬

 ‫أنواع المواقع الإلكترونية‬

‫‪19‬‬ ‫الفرع الأدبي والشرعي‬

 ‫أنواع المواقع الإلكترونية‪:‬‬
‫هناك تصنيفان للمواقع الإلكترونية وهما‪:‬‬
‫‪ .1‬حسب استخدام الموقع‪:‬‬
‫الشخصية ‪ -‬الاجتماعية – التجارية – الإعلامية ‪ -‬التعليمية‬
‫وغيرها‪.‬‬

‫‪ .2‬حسب تصميم الموقع وتفاعل المستخدمين معه‪:‬‬

‫• المواقع الساكنة‪.‬‬
‫• المواقع التفاعليّة‪.‬‬
‫‪20‬‬ ‫الفرع الأدبي والشرعي‬
 ‫المواقع الساكنة والتفاعلية‪:‬‬

‫‪21‬‬ ‫الفرع الأدبي والشرعي‬

 ‫المواقع الساكنة والتفاعلية‪:‬‬

‫نظام إدارة المحتوى‪:‬‬

‫مجموعةةة مةةن الةةإجراءات المتبعةةة للةةتحكم بالبيان ةات‬
‫وادارتها‪.‬‬

‫‪22‬‬ ‫الفرع الأدبي والشرعي‬

 ‫مواصفات الموقع الإلكتروني الجيد‪:‬‬

‫• جاذبيةةةةةةة عنةةةةةةوان الموقةةةةةةع للمسةةةةةةتخدم وارتباطةةةةةةه‬

‫بمحتوى الموقع‪.‬‬
‫• موضةةةةوعات الموقةةةةع حصةةةةرية ونوعيةةةةة ذات فائةةةةدة‬
‫ودقيقة وموثوقة‪.‬‬
‫• محتوى الموقع غير منقول من مواقع أخرى‪.‬‬

‫‪23‬‬ ‫الفرع الأدبي والشرعي‬

 ‫مواصفات الموقع الإلكتروني الجيد‪:‬‬

‫• مواضةةيعه مجةةزأة إلةةى عنةةاوين فرعيةةة بسةةيطة ذات‬

‫دلالة وتخصصية‪.‬‬
‫• تناسق شكل الموقع وشموليته‪.‬‬
‫• القوائم التي يتضمنها الموقع‪.‬‬

‫‪24‬‬ ‫الفرع الأدبي والشرعي‬

 ‫نشكرك على حسن المتابعة‬

‫‪25‬‬ ‫الفرع الأدبي والشرعي‬

 ‫طرق تصميم المواقع الإلكترونية‬

‫‪26‬‬ ‫الفرع الأدبي والشرعي‬

 ‫الأمور الواجب مراعاتها عند تصميم الموقعع‬
‫الإلكتروني‪:‬‬

‫• تحديد الفئة المستهدفة‪.‬‬

‫• الأخةةذ بملاحظةةات الفئةةة المسةةتهدفة فيمةةا يتعلةةق‬
‫بالتصميم‪ ،‬واحترام وجهات نظرهم المختلفة‪.‬‬
‫• لغته بسيطة ومفهومة لكل من يتابعه أو يزوره‪.‬‬

‫‪27‬‬ ‫الفرع الأدبي والشرعي‬

 ‫الأمور الواجب مراعاتها عند تصميم الموقعع‬
‫الإلكتروني‪:‬‬

‫• انسةةجام المحتةةوى للصةةفحة مةةن حي ة التنسةةيقات‬

‫والةةةألوان‪ ،‬حية ة يفضّةةةل أن تكةةةون خلفيةةةة المحتةةةوى‬
‫بيضاء اللون‪.‬‬
‫• أولويات وتصنيفات المحتوى والمعلومات‪ ،‬فمنها‬
‫ما يكون رئيسياً‪ ،‬ومنها ما يكون فرعياً‪.‬‬

‫‪28‬‬ ‫الفرع الأدبي والشرعي‬

 ‫طرق تصميم المواقع الإلكترونية الشخصية‪:‬‬

‫‪ .1‬لغات البرمجة مثل‪..... ،ASP.Net ،PHP :‬‬

‫‪ .2‬مواقع إنترنت متخصصة بتصميم المواقع الإلكترونية‬
‫مثل‪....... ،ar.site123.com ،Websity.me :‬‬
‫‪ .3‬البرمجيات‪ :‬مثل‬
‫‪Web Page Maker‬‬
‫‪FrontPage‬‬
‫‪Dreamweaver‬‬

‫‪29‬‬ ‫الفرع الأدبي والشرعي‬

 ‫الخطوات السليمة المتبعة لتصميم موقع‬
‫إلكتروني‪:‬‬

‫دراسةةةةة وتحليةةةةل والتخطةةةةيط لوويفةةةةة الموقةةةةع ومةةةةا‬ ‫•‬

‫يتضمنه‪.‬‬
‫تصةةةميم عناصةةةر الموقةةةع الرئيسةةةية‪ ،‬مةةةن صةةةةفحات‪،‬‬ ‫•‬
‫وعناوين رئيسية‪ ،‬وترابط بعضها بعضاً‪.‬‬
‫إضافة المحتوى إلى الموقع‪.‬‬ ‫•‬
‫نشةةةةةةةر الموقةةةةةةةع ودراسةةةةةةةة التغذيةةةةةةةة الراجعةةةةةةةة مةةةةةةةن‬ ‫•‬
‫مستخدمه‪ ،‬والأخذ بها‪.‬‬
‫‪30‬‬ ‫الفرع الأدبي والشرعي‬
 ‫نشكرك على حسن المتابعة‬

‫‪31‬‬ ‫الفرع الأدبي والشرعي‬

 ‫تصميم موقع إلكتروني باستخدام برنامج‬
‫)‪Web Page Maker (1‬‬
‫إنشاء موقع إلكتروني جديد‪.‬‬ ‫•‬
‫اضافة صور داخل الموقع‪.‬‬ ‫•‬
‫ادراج نص داخل الموقع‪.‬‬ ‫•‬
‫التعامل مع صفحات الموقع‪:‬‬ ‫•‬
‫(اضافة صفحة جديدة – تغيير اسم صفحة – حذف صفحة –‬
‫استنساخ محتويات صفحة)‪.‬‬
‫‪32‬‬ ‫الفرع الأدبي والشرعي‬
 ‫تصميم موقع إلكتروني باستخدام برنامج‬
‫‪Web Page Maker‬‬

‫‪33‬‬ ‫الفرع الأدبي والشرعي‬

 ‫باستخدام برنامج ‪ Web Page Maker‬صمم موقعاً‬
‫إلكترونياً معرض سيارات بالمعايير الآتية‪:‬‬
‫يتكون الموقع من صفحتين‪.‬‬
‫• الصفحة الأولى باسم (‪:)Home‬‬
‫• تحتوي على ترويسةة مناسةبة فيهةا عبةارة «‪،»MOTOR CAR‬‬
‫تتكةةةرر فةةةي جميةةةع صةةةفحات الموقةةةع بحجةةةم خةةةط ‪ 36‬وبلةةةون‬
‫أزرق‪.‬‬
‫• الصفحة الثانية باسم (‪:)CARS‬‬
‫• تحتوي على النص التالي‪ Types of car :‬في وسةط الصةفحة‪،‬‬
‫وتحتوي على صورتين لسيارات‪.‬‬
‫• احفظ الموقع على مجلد على سطح المكتب باسم ‪.Cars‬‬
‫‪34‬‬ ‫الفرع الأدبي والشرعي‬
 ‫تصميم موقع إلكتروني باستخدام برنامج‬
‫)‪Web Page Maker (2‬‬
‫• اضافة أزرار داخل الموقع‪.‬‬
‫• ربط المحتوى بملف خارجي باستخدام أداة الارتباط‬
‫التشعبي‪.‬‬
‫• ادراج لمسة جمالية لمؤشر ذيل الفأرة والصفحات‪.‬‬
‫• نشر الموقع باستخدام ‪.Publish‬‬
‫‪35‬‬ ‫الفرع الأدبي والشرعي‬
 ‫تصميم موقع إلكتروني باستخدام برنامج‬
‫‪Web Page Maker‬‬

‫‪36‬‬ ‫الفرع الأدبي والشرعي‬

 ‫باستخدام برنامج ‪ Web Page Maker‬صمم موقعاً‬
‫إلكترونياً لمدرستك بالمعايير الآتية‪:‬‬
‫يتكون الموقع من صفحتين‪.‬‬
‫الصفحة الأولى باسم (‪:)Home‬‬
‫• تحتةةةةةةوي علةةةةةةى ترويسةةةةةةةة مناسةةةةةةبة فيهةةةةةةا عبةةةةةةةارة‬
‫(‪ ،)My School‬تتكةةةةرر فةةةةي جميةةةةع صةةةةفحات الموقةةةةع‬
‫بحجم خط ‪ 26‬وبلون أحمر‪.‬‬
‫• وتحتوي على أزرار تنقل بين الصفحات‪.‬‬

‫‪37‬‬ ‫الفرع الأدبي والشرعي‬

 ‫باستخدام برنامج ‪ Web Page Maker‬صمم موقعاً‬
‫إلكترونياً معرض سيارات بالمعايير الآتية‪:‬‬

‫الصفحة الثانية باسم (‪:)School Vision‬‬

‫• تحتوي على صورة للمدرسة‪ ،‬وزر الرجوع للصفحة‬
‫الرئيسة‪ ،‬وعلى النص ‪.Tutorials‬‬
‫• اربط كلمة ‪ Tutorials‬بموقع روافد‬
‫‪www. rawafed.edu.ps‬‬
‫أضف لمسة جمالية لمؤشر الفأرة‪.‬‬
‫قم بنشر الموقع على مجلدك على سطح المكتب‬
‫باسم ‪.MySchool‬‬
‫‪38‬‬ ‫الفرع الأدبي والشرعي‬
 ‫نشكرك على حسن المتابعة‬

‫‪39‬‬ ‫الفرع الأدبي والشرعي‬