0:05
بسم الله الرحمن الرحيم والصلاة والسلام على أشرف المرسلين سيدنا محمد النهاردة ان شاء الله هنعمل مع بعض تصميم موقع كده بنية فقط بدون تدخل ولا الالوان ولا اي حاجة عشان نعرف بس المواقع اللي احنا بنشوفها البنية بتاعتها بتكون عاملة زي
0:21
سنقوم بعمل فيديو البنية بطريقة عادية وهي استخدام الـ Div و الـ Classes لنميز الـ Div عن بعض ثم فيديو آخر بطريقة الـ Semantic Elements وهي العناصر التي تحتوي على اسم منطقي كما اتفقنا في الفيديوهات الماضية
0:36
دعنا نرى معا موقع مثل امازون او اي موقع يخطر في اخبارك ونرى اي عناصر الموجودة فيه التي تبني اي موقع في الدنيا عندك مثلا الجزء الخاص بالهيدر فوقه وهو هيدر ويوجد لوجو ويوجد بعض الانكات على اليمين عندك الجزء الخاص بالنفق اللي تحت هذا اللي يسمى عنصر الـNav في الـ Semantic Elements وبعدين عندك تحت ممكن تلاقي موقع فيه الجزء الخاص بالصور والمكالات مثلا وعلى اليمين الـ Sidebar اللي بيكون فيه مثلا الانكات والأقسام والكلام ده كله
1:05
بعد كده تحت خالص بيكون عندك الفوتر بغض النظر طبعا عن الشكل والتصميم طيب ده كلام عظيم وهنشوف مع بعض دلوقتي احنا محتاجين نعمل ايه كالعادة انت هتعمل ديف للهيدر وطبعا هتميزه بكلس اسمه هيدر عشان خاطر نقدر بالسي اس اس ندخل على الكلس ده وننسكه ونعمل فيه اللي احنا عايزينه
1:23
حسناً، في هذا المنطقة يمكن أن يكون لديك حساب H2 في اللوجو اللوجو الموجود في الموقع، أي اسم بإمكانك إضافةه وفي مجموعة لينكات ستكون على اليمين لينكات الموقع الرئيسية لينكات دائماً ستجد أن المصممين يضعوها في مجموعة لينكات غير مرتبة لأنها مجموعة لينكات كثيرة فلا يمكنك إضافة أرقام وما إلى ذلك سأكتب هنا مثلاً Home وثم هنا مثلاً About وثم هنا مثلاً Services مثلاً
1:52
واخر لينك ممكن يبقى contact us بالشكل دي هتكون الجزء او ده يكون الجزء الاساسي اللي هو الهيدر طبعا يا شباب احنا ممناش علاقة نهائيا بالشكل انا بس بوري لك بنية اللياوت او التصميم بتاعنا في المستقبل ان شاء الله لما تتعلم CSS هتخلي بقى اللوجو ده على الشمال واللينكات على اليمين وهتزبطها وتشيل منها البولتس دي والهوامش وكل حاجة
2:16
نقوم بعمل محاولة من المحتوى لتعرف ما هو المحتوى الذي سنقوم بفصله منه بعد ذلك سيكون الجزء الأسفل لديه المحتوى الذي سيكون على الشمال سيكون محتوى و سنقوم بكتابته و سنضع له محتوى يدعى محتوى الموقع وسأكتب له كلمة محتوى لأعرفه
2:34
سيكون لدينا دفتر اخر يسمى Sidebar سيكون هناك جزء على اليمين الذي نراه دائما في المواقع مثلا هنا المحتوى وعلى اليمين هناك الأقسام والصور مثلا أخر الأعضاء المنضمين وكل هذا أي موقع ستقابله في حياتك في Sidebar مثل الفيسبوك نفسه وهذا هو بنيةه الـ Content و Sidebar سنقوم بعمل HR ثاني ونرى تحت مفيد ما لدينا ويوجد جزء على فكرة تحت الهيدر ممكن نضعه ممكن لا لا يوجد مشكلة بعد الفوتر نضعه
3:03
سأضع div هنا و أضع class footer هذا هو footer الموقع لدينا جزء نافيجيشن جيد جداً يمكننا أن نأتي هنا تحت الهيدر و نضع HR ثاني و بينه و بين الـ HR اللي بعده سيكون لدينا نافيجيشن add div و بعدين سأضع هنا و سأضع class = nav أو نافيجيشن
3:26
يمكنك تقوم بعمل الـ UL و تضع الكلاس في الـ UL
3:45
و لا يوجد داعي لكثير من العناصر لانها لا يوجد غير ال UL اذا كانت ال UL معها ايضا تضعها في div لان div سيكون كنتينر للعناصر كلها لكن لو كانت ال UL غير معها فهي لحدها كفاية جدا البنية التي ترونها هي بنية الموقع العادية بغض النظر عن الشكل
4:03
ستجد في التصميم العادي اللوجو على الشمال والإنكات على اليمين والإنكات كلها ستملأ الشاشة ومن ثم يكون هذا المحتوى على الشمال والفوتر سيملأ الشاشة لأن الفيديو ليس مجرد معلومات كنظرية سأعطيكم لمحة عن ما سترونه في المستقبل إن شاء الله مثلاً يمكننا أن نقول لـ ULD أننا نريد أن نعطيها بادنج 0 سأعطيكم لمحة عن ما سيحدث في المستقبل
4:30
بعد كده هقول له مثلا انه اللي جواها اللي هي فيها علينكات عايز ان هي مثلا تكون جنب بعض كلها هقول له هنا بالشكل ده لتجربة بس الفكرة ليس الا وبعدين هنقول له لشيل بالشكل ده واللي ممكن نقول له
4:56
حبت بس أريك الفكرة إن شاء الله في المستقبل لما تجد تعلم لغة CSS هتعرف الشكل بيكون إزاي لكن إحنا هنا بنبني بنية بس فزي ما إنت شايف كده البنية بتاعتنا الهيدر وبعدين الـ Navigation الـ Linkات اللي بتاعته وبعدين الـ Content عالشمال الـ Sidebar عاليمين وبعد كده الـ Footer ممكن برضو جوة الـ Content دي نحط شوية صور إدي مثلا صورة عندنا الصور هنا موجودة في الـ Images Home وإدي الصورة بتاعتنا بالشكل ده
5:24
هذه صورة عندنا جوال content وفيه طبعاً هيكون منها كام صورة تحت بعض كتير بالشكل ده كده يا شباب عملنا البنية بتاعتنا والحمد لله بالdiv وclasses من غير تدخل الsemantic elements اللي هي أصلاً معبرة عن المحتوى وهنعملها إن شاء الله في الفيديو الجاي عشان تشوفوا بنفسكم الفرق يارب يا جماعة الدرس يكون بسيط وسهل وعجبكم وأشوفكم إن شاء الله في الدرس الجاي والسلام عليكم
