الدرس الثالث تصميم موقع الكتروني

[0:03]السلام عليكم ورحمه الله وبركاته الدرس الثالث تصميم الموقع الالكتروني احببت ان اعرض لكم النموذج في البدايه بعد ذلك سنقوم بتفصيل الاكواد معا الموقع كما تلاحظون سينقسم الى عده اقسام نلاحظ معا في الاعلى لدينا شريط للتصفح مثلا عندما انقر على نبذه نقلني الى اخر الصفحه

[0:38]او معرض الصور نقلني الى جزئيه الصور او التاريخ نقلني الى المحتوى الاساسي لموقعنا اذا الفكره الاساسيه يجب ان يكون لدينا شريط للتصفح في الموقع ونلاحظ ان تم تقسيم الصفحه الى عده اقسام القسم الاول شريط بالاعلى بعد ذلك قسم للمحتوى نلاحظ انه يوجد الوان مختلفه لكل قسم معرض للصور كما تلاحظون هناك بعض التنسيقات التي تم اعدادها على الصور ايضا لدينا القسم الثالث وهو نبذه نلاحظ عند النقر على هذه الايقونه سينقلني مثلا الى موقع جوجل كما يظهر في الزاويه جهه اليسار وايضا يمكن ارسال مثلا بريد الكتروني الى البريد الذي قمنا بتحديده اذا سنحتاج الى بعض المهارات التي تم دراستها في الصف الاول الثانوي نعود الان الى موقعنا الاساسي ماذا ساحتاج سنحتاج الى صفحه بـ HTML وايضا صفحه بـ تنسيق CSS ماذا سيكون ما هو الفرق الاساسي الان تعلمنا في الدرس السابق كيف نقوم بربط صفحه HTML مع لغه الانماط CSS وكان ذلك في الهيد باستخدام اللينك الان ما الفكره الاساسيه ما هو الوسم الخاص بالتقسيم نريد قائمه منيو نريد محتوى مين نريد فوتو نريد نبذه عن فانا ساقوم بتقسيم صفحتي الى اربع اقسام اساسيه كما عرضنا في صفحه الويب منذ قليل اين سيتم التقسيم سيتم التقسيم داخل البادي نلاحظ قمنا باستخدام وسم ديف ويجب ان اعطي اسم للكلاس نلاحظ ان التاريخ ومعرض الصور والنبذه التي كانت في البدايه قمنا بعرض لها كلاس يساوي منيو يجب ان اضع اسم مميز لاني ساقوم بمناداه هذا الكلاس داخل صفحه السي اس اس لاقوم بتنسيقه طبعا هي معلومه سابقه كيف نضع ارتباطات تشعبيه بحيث اننا عندما نقرت على معرض الصور نقلني الى الجالري مباشره او نبذه نقلني الى الاسفل او الهيستوري نقلني الى بدايه المحتوى هي معلومه سابقه ساقوم بعرضها بطريقه سريعه ومبسطه

[4:46]فبدايه سنبدا بـ ديف ونقوم باغلاقه بـ سلاش ديف وكما ذكرنا يجب ان يكون لكل كلاس اسم محدد نلاحظ ان الكلاس الاول قمنا باطلاق عليه اسم منيو واحتوى على الارتباطات التشعبيه التي ستنقلني الى اجزاء صفحتي هذا الكلاس الاول او التقسيم الاول التقسيم الثاني كما نلاحظ هو محتوى صفحتي فقط قمت باضافه عليه ديف وكلاس واطلقنا عليه مين

[5:25]ونلاحظ انه في نهايه هذا الكلاس الاجيال الخمسه المحتوى الاساسي لموقعي قمت باقفاله بـ سلاش ديف القسم الثالث ايضا لدينا ديف كلاس واطلقنا عليه اسم فوتو نلاحظ ونركز على الاسماء لاننا سنقوم بمناداه هذه الاسماء الكلاسات لتنسيقها ايضا تنتهي بـ سلاش ديف يمكنكم العوده ايضا الى فيديو طريقه اضافه صوره القسم الاخير او الديف الاخير راح يكون الفوتور او التذليل وسيكون مجرد نبذه بسيطه ارسال بريد الكتروني او القيام ببحث داخل موقع جوجل هذا الويب سايت فالجديد اذا فقط الجديد سنستخدم ديف ونضع كلاس كتقسيم للصفحه كما ذكرنا في صفحه الويب لدينا كم قسم اربع اقسام واحد اثنان ثلاثه والقسم الرابع في الاسفل واستخدمنا لها ديف وكلاس واطلقنا اسم على هذا الكلاس اين يتم عمليه التقسيم عمليه التقسيم يا اعزائي تتم جميعها داخل البادي او عمليه الربط يا اعزائي تتم داخل الهيد ثانيا الان صفحه السي اس اس ماذا ساضع بداخلها اولا سنستخدم بادي كما تلاحظون بادي ووضعنا علامه القوس المفتوح وقمنا باغلاقها ساضع تنسيق عام لعائله الخطوط انها تايمز نيو رومان واضع باك جراوند كلر مثلا وايت

[7:31]لامكاننا وضع اسم السلكتور او اسم المحدد واضع في التنسيقات كما تعلمنا بالدروس السابقه مثلا عائله الخطوط خلفيه الوان محدده نمط خطوط الى اخره ليست جديده لننتقل الى فكره هامه وهي ماذا نلاحظ اننا قمنا باستخدام النقطه وهي علامه اساسيه لمناداه اسم الكلاس

[8:05]اذا دوت بعد ذلك اسم المحدد منيو قمنا بتقسيمها كما تتذكرون في صفحه الاتش تي ام ال الى منيو ومين وفوتو وفوتشر اربع اقسام اساسيه اقوم بمناداتها باستخدام علامه النقطه ما هي الخاصيه المهمه استخدمت باك جراوند كلر وقممت باستخدام الار جي بي لتحديد اللون بامكانكم اختيار الوان اخرى ايضا يمكننا استخدام عناصر اضافيه لكن ساقوم بمناداتها ايضا باسمها داخل المنيو كان لدينا يو ال اين هي اليو ال قائمه غير مرتبه لنتذكرها سويا اليو ال كانت نبذه معرض صور تاريخ قمت بمناداه هذه العناصر باسمها وهو الان اوردر ليست اذا سنكتب بهذه الطريقه دوت منيو يو ال بامكاني تحديد اسم

[9:25]محدد ومناداته داخل القسم الخاص فيه واقوم باستخدام بعض العناصر الاساسيه مثلا التكست اللاين محاذاه النص ستكون توسيط البادينج توب ما المقصود بـ بادينج المقصود بـ البادينج بعض العناصر الهامه الخاصه بالحدود اريد ان يكون لدي فراغات في الجزء الاعلى في اليمين في اليسار بادينج توب بوتوم رايت ليفت واضع القيم المطلوبه لكل فراغ انا احتاجه لتبدو صفحتي اكثر جاذبيه لاحظوا معي ايضا لدينا تنسيق لل ال اي

[10:19]لليست بحد ذاته اين هو الليست اين هو الليست العناصر الثلاثه هذه كانت تعتبر ليست الان احنا قمنا بتنسيق القسم الخاص بالقوائم لكن الان سنضع تنسيقات خاصه بالليست الاساسي نبذه ومعرض صور وتاريخ ماذا سنكتب لاحظوا معي لدينا خاصيه الاوفر فلو ووضعنا خاصيه اوتو لربما كل قسم المحتوى الموجود فيه قد يكون اكبر من انه يتناسب مع المساحه قد تجاوز المساحه التي خصصتها لهذا القسم فنحن نضع خاصيه اوفر فلو وتكون تلقائيه او اوتو ماذا سيحدث ماذا سيحدث سيقوم بجعلها تلقائيه اي انها تتجاوز القسم الخاص بها وربما يضع مثلا شريط تمرير لاكتشاف بقيه المحتوى التي الذي وضعناه داخل هذا القسم هذه الخاصيه الاولى الدسبلاي هذا ما يهمنا قم بوضعها بهذا الشكل كما تلاحظون انها في شكل ازرار وموجوده في صف واحد هذا السطر المسؤول عن عرضها بهذه الطريقه اذا اعرضها بشكل ان لاين بلوك ان لاين بلوك ايضا لدينا البوردر سنتحكم في شكل الحدود لون الحدود الفراغ العلوي الفراغ السفلي مدى محاذاتها المارجن او الهوامش مقدار الهوامش المتروكه الهامش يعتبر الفراغ المحيط بالعنصر من الاتجاهات الاربعه ارتفاعها عرضها حجم الخط فيها وايضا بامكاننا اضافه بعض التنسيقات او تكست ديكوريشن ولدينا خيارات متعدده مثلا نون اندر لاين لاين ثرو والى اخره

[12:37]فاذا الفكره الاساسيه سنقوم بمناداه كل قسم وايضا تنسيق السمات والخصائص والوسوم الداخليه داخل كل قسم بهذه الطريقه وهكذا لبقيه الاقسام لكن ساتوقف عند الفوتو تنسيقات الفوتو ايضا وضعنا له لون مختلف الباك جراوند كلر ايضا قمنا بتنسيق نلاحظ ايضا قمت بمناداه اسم القسم وايضا اسم العنصر المطلوب تنسيقه هو الامج اضفنا اليها البوردر كما نلاحظ هنا لديها حدود هناك مسافه متروكه بين كل صوره وصوره بدون هذه التنسيقات ستكون الصور جنبا الى جنب لكن باضافه بعض التنسيقات الهامه او الخواص الاساسيه لتنسيقات الصور كحجمها محاذاتها ستظهر باكثر جاذبيه نلاحظ معا ماذا وضعنا وضعنا البوردر ستايل وضعنا بوردر كلر اذا لون شكل الحدود وما هو لون الحدود وايضا اضفت المارجن او الهوامش المتروكه بين كل صوره وصوره فالتنسيقات ستكون بهذه الطريقه تقريبا الفكره متشابهه فقط سنقوم بمناداه اسم القسم او ايضا اسم القسم واسم العنصر المطلوب تنسيقه بهذه الطريقه شاكره لكم حسن استماعكم القاكم على خير في امان الله