‫أساسيات تصميم المواقع‬

‫تقديم‬
‫د‪.‬ميادة المصري‬
‫كلية الحاسبات وتقنية المعلومات‬
 ‫نقاط الدورة‬

‫اليوم الثاني‬ ‫اليوم األول‬

‫‪ ‬التصميم باستخدام مواقع‬ ‫‪ ‬مقدمة‪:‬‬
‫جاهزة للتصميم‬ ‫التعريف بالمواقع االلكترونية‬ ‫‪‬‬

‫• موقع جوجل‬ ‫تاريخ المواقع‬ ‫‪‬‬

‫• موقع متجري‬ ‫أنواع وهيكلة المواقع‬ ‫‪‬‬

‫• موقع ويكس‬ ‫تصميم المواقع‬ ‫‪‬‬

‫‪ ‬اختيار مشروع المتدربة‬ ‫نصائح التصميم‬ ‫‪‬‬
‫كتابة أمثلة بلغة (‪)HTML‬‬ ‫‪‬‬
‫اليوم الثالث‬ ‫عرض المواقع الجاهزة‬ ‫‪‬‬
‫‪ ‬اختيار مشروع المتدربة‬
 ‫تعريف المواقع اإللكترونية‬

‫المواقع اإللكترونية هي مجموعة من الصفحات المتصلة على الشبكة‬ ‫‪‬‬

‫العالمية‪ ،‬والتي تعتبر كيانا ً واحدا ً يمتلكه عادة ً شخص واحد أو منظمة‬
‫كرس لموضوعٍ واح ٍد أو لع ّدة مواضيع وثيقة الصلة‪.‬‬ ‫واحدة‪ ،‬ويُ ّ‬
‫يتكون أى موقع على اإلنترنت من ثالث عناصر أساسية‪:‬‬ ‫‪‬‬
‫اسم الموقع و عنوانه‪.‬‬ ‫‪‬‬

‫الخادم الذى يوضع عليه ملفات الموقع‪.‬‬ ‫‪‬‬

‫ملفات الموقع نفسه التى تعرض للمستخدم‪.‬‬ ‫‪‬‬

‫تتطلب عملية تصميم أى موقع التعامل مع هذه العناصر الثالث ألنها‬ ‫‪‬‬
‫تكمل بعضها ليظهر الموقع على اإلنترنت في النهاية‬
 ‫تاريخ المواقع االلكترونية‬
‫بدأ تطوير الشبكة العالمية عام ‪ ،1989‬وذلك من قبل تيم‬ ‫‪‬‬
‫بيرنرزلي وزمالئه في سيرن‪ ،‬وهي منظمة علمية دولية‬
‫مقرها في جنيف سويسرا‪ ،‬حيث قاموا بإنشاء بروتوكول نقل‬
‫النص التشعبي‪Hyper Text Transfer Protocol :‬‬
‫النص التشعبي ‪ :‬يوحد الروابط بين الخوادم والعمالء‪ ،‬وقد‬ ‫‪‬‬
‫توفرت متصفحات الويب القائمة على النصوص ليت ّم‬
‫إصدارها في ينايرعام ‪ ،1992‬حيث اكتسبت الشبكة العالمية‬
‫قبوالً سريعا ً عند إنشاء مستعرض ويب يدعى‬
‫موسيك‪ ،Mosaic:‬والذي ت ّم تطويره في الواليات المتحدة‬
‫من قبل مارك أندريسن وآخرين في المركز الوطني‬
‫لتطبيقات الحوسبة الفائقة في جامعة إلينوي وت ّم إطالقه في‬
‫سبتمبر ‪1993‬‬
 ‫انواع المواقع االلكترونية‬
‫يوجد تنوع في عدد المواقع وللتميز بينها تم وضع اختصار لها نهاية عنوان الموقع‬ ‫‪‬‬
‫وأهمها‪:‬‬
‫مواقع تجارية (‪ :)com‬وهي مواقع صممت لغرض بيع المنتجات أو الخدمات‪،‬‬ ‫‪‬‬
‫مواقع رموز البلدان‪ :‬تحتوي مواقع الويب من البلدان األخرى على رمز البلد في نهايتها‪،‬‬ ‫‪‬‬
‫فعلى سبيل المثال بريطانيا العظمى رمزها ‪ ،uk‬وكندا ‪ca.‬‬
‫مواقع تعليمية‪ :‬ينتهي عنوان اإلنترنت الخاص بها ب ‪edu.‬‬ ‫‪‬‬
‫مواقع حكومية ( ‪ :)gov.‬لتقديم المعلومات التي تصدرها الوكاالت الحكومية والمكاتب‬ ‫‪‬‬
‫واإلدارات‪ ،‬وعادة ً تكون المعلومات التي تقدمها المواقع الحكومية موثوقةً جدا ً‬
‫ت عن الجيش‬ ‫مواقع عسكرية (‪ :)mil‬الغرض من هذا النوع من المواقع هو تقديم معلوما ٍ‬ ‫‪‬‬
‫ـمواقع المنظمات (‪ :)org.‬الغرض من هذا النوع من المواقع هو الدفاع أو الترويج لرأي‬ ‫‪‬‬
‫الفرد أو وجهة نظر المجموعة‪.‬‬
 ‫عناصر أساسية‬

‫تتطلب عملية تصميم أى موقع التعامل مع هذه العناصر الثالث‬ ‫‪‬‬

‫ألنها تكمل بعضها ليظهر الموقع على اإلنترنت‪:‬‬

‫اسم الموقع و عنوانه‪.‬‬ ‫‪‬‬

‫الخادم الذى يوضع عليه ملفات الموقع‪.‬‬ ‫‪‬‬

‫ملفات الموقع نفسه التى تعرض للمستخدم‪.‬‬ ‫‪‬‬

‫اسم الموقع‬

‫ظهور ملفات‬ ‫الخادم‬

‫الموقع‬
 ‫اسم وعنوان الموقع على االنترنت‬

‫‪ URL‬أو ما يُعرف أيضا ً بعنوان اإلنترنت أو الرابط‪ ،‬أو محدد الموارد الموحد‪ ،‬أو اليورال‪ ،‬وهو‬ ‫‪‬‬

‫عبارة عن اختصار لكلمة ‪Uniform Resource Locator‬‬

‫يع ّد جزءا ً أساسيا ً من معرف الموارد الموحد والذي يتم من خالله تحديد مواقع اإلنترنت‪.‬‬ ‫‪‬‬

‫تعريفه باختصار‪ :‬هو العنوان الذي تتم كتابته في شريط العنوان من أجل الذهاب إلى مواقع اإلنترنت‪.‬‬ ‫‪‬‬

‫محتويات ‪ URL‬متاح البرتوكول‪ .‬اسم نطاق أو موقع الصفحة‪ .‬نوع االمتداد‪.‬‬ ‫‪‬‬

‫(‪)www, html‬‬ ‫البروتوكوالت‪:‬‬ ‫‪‬‬

‫االسم الفعلي‬ ‫‪‬‬

‫االمتداد للنوع‬ ‫‪‬‬

‫‪https://www.kau.edu.sa/Home.aspx‬‬
‫االمتداد للبلد‬ ‫‪‬‬
 ‫ملفات الموقع‬

‫‪ ‬عدة صفحات يتم كتابتها‬

‫بلغة ‪HTML‬‬
‫‪ ‬تصميمها يتطلب جهدا اكثر‬
‫من مجرد كتابة الصفحات‬
‫بلغة ‪HTML‬‬
‫‪HTML‬‬ ‫‪ ‬يوجد عدة اصدارت من اللغة‬
‫لتوفير مستجدات االجهزة‬
‫كيف تظهر المواقع في وقتنا الحالي؟‬
 HTML ‫لغة‬

‫ ماهي اللغة؟‬
‫ لماذا احتاجها؟‬
‫اسم الموقع‬
‫ كيف اكتبها؟‬
‫ظهور ملفات الموقع‬ ‫الخادم‬

https://www.w3schools.com/html/html_examples.asp
https://websitesetup.org/html-tutorial-beginners/
https://websitesetup.org/html5-cheat-sheet/
 ‫لغة ‪HTML‬‬
‫‪ ،Hyper Text Markup Language‬ويشار إليها اختصارا ً ب‪،HTML‬‬ ‫‪‬‬
‫وتُعرف بلغة ترميز النص التشعبي‪ ،‬هي عبارة عن لغة ترميز خاصة تستخدم‬
‫لغايات تصميم وإنشاء صفحات الويب‪ ،‬كما يمكننا القول بإنّها عبارة عن الهيكل‬
‫الرئيسي لصفحات الويب والبنية التحتيّة لها؛ إذ تق ّدم وصفا ً مفصالً حول الكيفيّة‬
‫التي ستكون عليها آلية عرض محتويات الموقع اإللكتروني ويكون ذلك بتقسيمه‬
‫إلى عنوان وفقرات‪ ،‬ويتم ذلك كله باالعتماد على ما يُعرف بالوسوم ‪Tags.‬‬
‫الوسوم هي الجزء الرئيسي في بناء صفحة الويب‪ ،‬إذ إنّه باستخدامها تتخذ‬ ‫‪‬‬
‫الصفحة أوامر خاصة وتنفذها ليتم استخدامها في تشكيل صفحة الويب‪ ،‬وتكون‬
‫عادة كافة الوسوم محصورة بين إشارتي <‪ ،> ،‬وهي نوعين‪:‬‬
‫وسم البداية‪ :‬يتطلب ذلك من المصمم أن يضع لكل وسم أو أمر بداية ونهاية‪ ،‬ليتم تنفيذه‬ ‫‪‬‬
‫بشكل صحيح‪.‬‬
‫وسم النهاية‪ :‬يُرافق وسم النهاية عادة اإلشارة ‪ ،/‬وذلك لغايات إغالق األمر المعطى‬ ‫‪‬‬
‫موقع تطبيق لغة ‪HTML‬‬
‫طريقة اظهار الصفحة بلغة‪HTML‬‬
 ‫اسم الموقع‬
‫ملفات العرض وأجزاء الموقع‬
‫ظهور ملفات‬ ‫الخادم‬
‫الموقع‬

‫ماهو أهم‬
‫جزء في‬
‫الموقع؟‬
 ‫أمثلة أخرى مارأيك بها؟‬

http://www.jeddah.gov.sa/index.php .1
https://thedubaimall.com/ar .2
www.uncommonadv.com .3
 ‫تصميم المواقع‬

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

‫ماهي أهم النقاط التي يجب مراعاتها؟؟‬

 ‫تصميم مظهر الموقع االساسي‬
‫لنجاح أى موقع على شبكة االنترنت من المهم أن يجتمع العنصران – التصميم الجيد‬ ‫‪‬‬
‫والمحتوى الجيد‪.‬‬
‫التصميم والمحتوى‪ :‬يجب أال يتداخل التصميم خلفية التصميم مع المحتوى‪ ,‬مع مراعاة‪:‬‬ ‫‪‬‬
‫المحتوى يجب أن يكون مقروءا ً وواضحا ً‬ ‫‪‬‬

‫المحاذاة لمحتويات الصفحة‬ ‫‪‬‬

‫تقارب محتويات الصفحة (حقول نموذج التسجيل)‬ ‫‪‬‬

‫تناغم وتكرار التصميم (ايقونات مع ألوان)‬ ‫‪‬‬

‫التحقق الجانب اللغوي لمحتوى الصفحة‬ ‫‪‬‬

‫سهولة التصفح‪:‬‬ ‫‪‬‬

‫يجب أن يكون نظام التصفح سهل واليحتاج منه جهد للوصول إلى الصفحة المراد الوصول اليها‬ ‫‪‬‬

‫يجب أيضا ً أن تكون وصالت التصفح واضحة في الصفحة وفي مكان بارز‬ ‫‪‬‬

‫يجب أن يعلم المستخدم في أي صفحة هو من صفحات الموقع بتوضيح العنوان في مكان ظاهر أو‬ ‫‪‬‬
‫بتغيير لون وصلة الصفحة المتواجد عليها‬
 ‫تصميم مظهر الموقع االساسي‬
‫التصميم المتجانس‪ :‬يجب أن تكون صفحات الموقع متجانسة‪ ،‬فيتعرف عليها‬ ‫‪‬‬
‫المستخدم كصفحة من صفحات الموقع حتى لو كانت الصفحات الداخلية بها‬
‫اختالفات كبيرة عن الصفحة الرئيسية فيجب ان يجمع صفحات الموقع ككل شكل‬
‫اساسي يمكن ان يميزة المستخدم‪.‬‬
‫سهولة التحميل‪ :‬يجب ان يمتاز تصميم الموقع بسهولة التحميل‪ ،‬فعادة متصفح‬ ‫‪‬‬
‫اإلنترنت ليس له الصبر الكافي لينتظر تحميل موقع ما فترة طويلة‪ ،‬و اذا وجده يأخذ‬
‫وقت أكثر من المعتاد لينصرف عنه‪ ،‬فيجب العمل على جعل الموقع يفتح بصورة‬
‫سريعة ‪.‬‬
‫باختصار عند التصميم يجب مراعاة هدف الموقع‪ ,‬تحديد نوع البيانات المستخدمة‪,‬‬ ‫‪‬‬
‫جاذبية المظهر‪ ,‬سهولة التصفح‪ ,‬المعلومات واضحة ومحدثة‪ ,‬الصور غير مشتتة‪,‬‬
‫ماذ ايضا ؟؟؟‬
 ‫تنظيم مكونات موقع االنترنت‬

‫إذا كان الموقع المراد إنشائه صغير فيكفي إنشاء مجلد واحد لحفظ الصور التي‬ ‫‪‬‬
‫ستستخدم في بناء الموقع‪.‬‬
‫إذا كان الموقع كبير وبه العديد من الصور يجب بناء هيكلة بحيث تكون مجلدات‬ ‫‪‬‬
‫الصور مقسمة حسب طبيعة الصفحات او أي تصنيف اخر يراه مطور موقع‬
‫االنترنت‪ ،‬وذلك لسهولة إدارة الصور الموجودة في الموقع‪.‬‬
‫كذلك يجب إنشاء مجلدات مستقلة لكل نوع من الملفات التي سيتم خزنها على‬ ‫‪‬‬
‫الموقع االلكتروني (العروض‪ ,‬الفيديوهات‪ ,‬االصوات‪ ,‬الورد ‪ )...‬وكما يمكن إنشاء‬
‫مجلدات فرعية لكل من انواع الملفات السابقة لخزن الملفات الخاصة بمحتوى معين‬
‫في موقع االنترنت‪.‬‬
‫تعتمد االلية السابقة في معظم االوقات على حجم واحتياجات الموقع وكذلك‬ ‫‪‬‬
‫االسلوب الذي يتبعه المطور في تنظيم الملفات‪.‬‬
 ‫تسمية الملفات‬

‫• تسمية ملفات كالً من صفحات االنترنت والملفات التي يتم رفعها على‬
‫الموقع‬
‫• استخدام اسماء بسيطة وشائعة ولها مدلول وعالقة بموضوع الصفحة مع‬
‫االلتزام بالقواعد التالية لتسمية الصفحات‪:‬‬
‫‪ o‬تسمية الصفحات باللغة االنجليزية ألنها اللغة المعيارية في االنترنت‪.‬‬
‫‪ o‬تجنب االسماء المركبة كــ ‪PowerPoint-Presentation‬‬
‫‪ o‬تجنب استخدام خط الوسطي الصغير (‪ )-‬او الخط التحتي ( _ ) او‬
‫المسافات‬
‫‪ o‬عدم استخدام الحروف االنجليزية الكبيرة (تجنب تماما استخدام أي‬
‫حروف كبيرة في تطوير تطبيقات االنترنت)‬
‫‪ o‬كل ما كان االرتباط التشعبي واضح وسهل كل ما كانت فرص‬
‫وصول المتصفح او المستخدم اسهل‪.‬‬
 ‫التنفيذ لتصميم الموقع يتم على عدة مراحل‬
‫التصميم‪ :‬الخطوه االولى تتضمن التفرقة بين المعلومات االستاتيكية والديناميكية ‪ .‬تطبيقات الـ ‪web‬‬
‫‪ clipping‬تتكون من صفحات على جهاز المستخدم وصفحات على الـسيرفر‪ .‬عادة ما تكون الصفحات‬
‫على جهاز المستخدم فاذا اراد تغيير الصفحات فيجب ان يعيد تنزيل النسخة المحدثة من التطبيق‪.‬‬

‫عند تصميم الصفحات سواء استاتيكية او ديناميكية يجب مراعاه القيود المفروضة على االجهزة‪.‬‬

‫حجم الصفحة ال يجب ان يزيد عن ‪.63 KB‬‬ ‫‪‬‬

‫يجب اال تزيد العناصر (الصور والجداول ‪ )....‬عن ‪ 153 pixel‬عرض‪.‬‬ ‫‪‬‬

‫يجب ان تكون الصور ‪ GIF & JPEG‬ولكن ليس الصور المتحركة‪.‬‬ ‫‪‬‬

‫لسهولة القراءة ‪ ،‬ال يجب الكتابة بخط كبير وعريض‪.‬‬ ‫‪‬‬

‫التنفيذ لتصميم الموقع يتم على عدة مراحل‬
‫‪ ‬هناك فرق كبير بين تصميم موقع تجارى و تصميم تطبيق مصغر‪ .‬فى االول هناك عدد من‬
‫العناصر التى تكون خارج تحكمنا‪ ،‬على سبيل المثال يجب تصميم الموقع ليناسب عدد مختلف من‬
‫الشاشات المختلفة االحجام لكن تصميم موقع عادى ال يهم حجم الصفحة‪.‬‬
‫‪ ‬لكن لتصميم تطبيق مصغر االمر يختلف فاوال نجد ان حجم الشاشة ثابت وكذلك عدد الصفحات‬
‫اقل بكثير ‪.‬‬
‫تنفيذ الصفحات ‪HTML coding‬‬
‫‪ ‬هناك ثالث انواع من الصفحات يتم كتابتها عند تصميم التطبيقات ‪:‬‬
‫‪ - ‬صفحات الفهرس‬
‫‪ - ‬صفحات داخلية‬
‫‪ - ‬صفحات خارجية‬
‫التجميع والنشر واالختبار‪ :‬عندما يتم تنفيذ كل الصفحات االستاتيكية البد من تجميعهم لخلق التطبيق‪.‬‬
 ‫هيكلة الصفحات للتصميم‬
‫افضل طريقة لضمان الحصول على تنسيق متميز وواضح‬ ‫‪‬‬
‫للصفحة هو استخدام الجداول لتنسيق الصفحة‬
‫يجب وضع حدود الصفحة بشكل غير مرئي‬ ‫‪‬‬
‫الجدول االكثر شيوعا في تنسيق الصفحات هو جدول ‪2×2‬‬ ‫‪‬‬
‫تمرين‪ :‬طبقي الشكل التالي‬ ‫‪‬‬
‫باستخدام برنامج الورد‬ ‫‪‬‬
 ‫هيكلة الصفحات للتصميم‬

‫بحث‬ ‫بانر‬ ‫شعار‬

‫خدمات‬
‫المحتوى‬ ‫قائمة‬
‫واعالنات‬
 ‫االبعاد في جدول ‪2×2‬‬
‫• العرض الكلي للصفحة ‪ 760‬بكسل‪.‬‬
‫الشعار‬ ‫راس الصفحة‬
‫• يتفاوت عرض القائمة ما بين ‪ 100‬إلى ‪140‬‬
‫بكسل‬
‫‪140-100‬‬ ‫حتى ‪ 650‬بكسل‬
‫بكسل‬ ‫• عرض رأس الصفحة والمحتوى المتبقي بعد‬
‫خصم العرض المخصص للقائمة ويصل حتى‬
‫‪ 650‬بكسل‬
‫القائمة‬ ‫المحتوى‬ ‫• يجب محاذاة الجدول االساسي كمتوسط‬
‫ليتوافق مع عرض جميع مقاسات ووضوح‬
‫الشاشات‬
‫• مع اختالف شدة الوضوع للشاشات‬
‫‪ (640x480,800x600,1024x768),‬البد‬
‫من استخدام النسبة المئوية‪.‬‬
 ‫خريطة الموقع‬

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

‫الموقع‬
‫الصفحة الرئيسية‬
‫‪index.html‬‬

‫الخدمات االلك ترونية‬ ‫الطالب‬ ‫المنتسبين‬

‫الصفحات‬ ‫‪app.html‬‬ ‫‪students.html‬‬ ‫‪staff.html‬‬
‫الداخلية‬
‫ادارة تعلم‬ ‫فصل اتراضي‬ ‫تمرين‪ :‬حددي فكرة لموقع‬
‫‪emes.aspx‬‬ ‫‪centra.aspx‬‬
‫مع تحديد الصفحة الرئيسة‬
‫وارتباطاتها بثالث صفحات‬
‫داخلية على االقل‬
A 2 x 2 Layout
‫ماهي التقسيمة؟ مارأيك‬
‫ماهي التقسيمة؟ مارأيك‬
 ‫مواقع مساعدة للتصميم‬

:‫تصميم شعارات‬ 
https://logomaster.ai/ 

https://logojoy.com/ 

‫صور ورموز‬ 
http://free-clip-art.com/ 

‫خطوط‬ 
http://www.1001freefonts.com/fontfiles/main.htm 
 ‫نقاط الدورة‬

‫اليوم الثاني‬ ‫اليوم األول‬

‫‪ ‬التصميم باستخدام مواقع‬ ‫‪ ‬مقدمة‪:‬‬
‫جاهزة للتصميم‬ ‫التعريف بالمواقع االلكترونية‬ ‫‪‬‬

‫• موقع جوجل‬ ‫تاريخ المواقع‬ ‫‪‬‬

‫• موقع متجري‬ ‫أنواع وهيكلة المواقع‬ ‫‪‬‬

‫• موقع ويكس‬ ‫تصميم المواقع‬ ‫‪‬‬

‫‪ ‬اختيار مشروع المتدربة‬ ‫نصائح التصميم‬ ‫‪‬‬
‫كتابة أمثلة بلغة (‪)HTML‬‬ ‫‪‬‬
‫اليوم الثالث‬ ‫عرض المواقع الجاهزة‬ ‫‪‬‬
‫‪ ‬اختيار مشروع المتدربة‬
‫تصميم موقع باستخدام التطبيقات الجاهزة‬

‫أنشئ موقعك بنفسك باستخدام موقع‬

‫‪www.wix.com‬‬
‫تصميم موقع باستخدام ‪Wix‬‬

‫موقع ‪ wix‬هى منصة لتصميم‬

‫المواقع فقط عبر التوجيه وال‬
‫تحتاج اى خبرة برمجية اى كانت‬
‫انما فقط يعتمد على ذوقك فى‬
‫التصميم‪ ,‬سوف تكون امامك‬
‫قوالب جاهزة فقط كل ما عليك‬
‫اختيار القالب الذى تريده و البداء‬
‫فى التعديل عليه‬
‫افتح الموقع واضغط على (‪)Start Now‬‬
‫تصميم موقع باستخدام التطبيقات الجاهزة‬

‫أنشئ موقعك بنفسك باستخدام موقع جوجل‬

‫‪https://sites.google.com/‬‬
 ‫تصميم موقع باستخدام ‪Google sites‬‬

‫‪ ‬خدمة مواقع جوجل ‪Google sites‬هي خدمة مجانية‬

‫تقدمها جوجل لبناء مواقع الويب‬
‫تصميم موقع باستخدام ‪Google sites‬‬
‫تصميم موقع باستخدام التطبيقات الجاهزة‬

‫أنشئ موقعك بنفسك باستخدام موقع متجري‬

‫‪https://matjaree.com/‬‬
‫تصميم موقع باستخدام متجري‬

‫متجري هو موقع عربي يوفر متاجر و‬ ‫‪‬‬

‫مواقع إلكترونية مجانية مدى الحياة‬
‫وجاهزة الستخدام مع استضافة ‪.‬‬
‫يمكن للمستخدم أن يختار أي تصميم‬ ‫‪‬‬
‫جاهز من بين مئات النماذج التي تناسب‬
‫كل مجال وذوق وتمتع بدعم فني مميز‬
‫من فريق عربي محترف ومهني حائز‬
‫على عدة جوائز في دعم العمالء‪.‬‬
‫جميع مواقع متجري سهلة االستخدام‬ ‫‪‬‬
‫واالدارة وتعمل بكفاءة وجودة عالية و‬
‫آمنة جدا كما تدعم اللغة العربية وتعدد‬
‫اللغات‪.‬‬
‫تصميم موقع باستخدام متجري‬
 ‫مراجعة نقاط الدورة‬

‫اليوم الثاني‬ ‫اليوم األول‬

‫‪ ‬التصميم باستخدام مواقع‬ ‫‪ ‬مقدمة‪:‬‬
‫جاهزة للتصميم‬ ‫التعريف بالمواقع االلكترونية‬ ‫‪‬‬

‫• موقع جوجل‬ ‫تاريخ المواقع‬ ‫‪‬‬

‫• موقع متجري‬ ‫أنواع وهيكلة المواقع‬ ‫‪‬‬

‫• موقع ويكس‬ ‫تصميم المواقع‬ ‫‪‬‬

‫‪ ‬اختيار مشروع المتدربة‬ ‫نصائح التصميم‬ ‫‪‬‬
‫كتابة أمثلة بلغة (‪)HTML‬‬ ‫‪‬‬
‫اليوم الثالث‬ ‫عرض المواقع الجاهزة‬ ‫‪‬‬
‫‪ ‬اختيار مشروع المتدربة‬
‫تمنياتي بالتميز بتصاميم‬
‫موقعك قريبا‬