أهلاً، سنتحدث اليوم عن عرض العناصر وإمكانية إظهارها على صفحة الويب الخاص بك.
والاّن عندما يحين وقت تصميم صفحتك، سوف أخبرك مرارًا وتكراراً
أن تحديد المكان الذي تريد فيه وضع العناصر هو مفتاح الحصول على صفحة فعالة حقًا.
وإحدى الأشياء التي تحتاج إلى أن تتذكرها هو أن كل عنصر ننظر إليه
يكون في الأساس صندوقًا.
وسنقوم بتغطية نموذج الصندوق في محاضرة مستقبلية.
ولكن قبل أن نتناول بعض الأمور المحددة، أود أن أتحدث عن بعض التفاصيل.
لأن كيفية العرض على عنصر العرض الخاص بك يؤثر على جميع
العناصر المتجاورة على صفحتك.
لذلك قبل أن نبدأ، أريد أن أذكرك أن كل عنصر على صفحتك يكون مربع.
فقط فكر في الأمر بهذه الطريقة.
والعرض يكمن في كيفية استطاعتك على تقرير إذ ما كانت المربعات يجب أن تكون بجانب بعضها البعض،
أم تحت بعضها البعض، و أشياء أخرى مختلفة من هذا القبيل.
لذا فعندما نتحدث عن العرض،
هناك بعض القيم المشتركة التي يستخدمها تقريبًا الجميع أو
هى مجرد قيم افتراضية، لذا فقد كنت تستخدمها حتى دون أن تعرفها..
ستكون العناصر المضمنة بجانب العناصر الأخرى،
حيث أنها تشغل مجرد عرضًا وارتفاعًا كافين دون أى زيادة عندما تضعهم في الصفحة.
لذلك فأنا أنظر إليهم على أنهم أطفالي المقربين في عناصر ال minivan.
لا بأس إن أردت وضع ثلاثة أطفال في المقعد الخلفي.
لن يتدافعوا بعضهم البعض، إنهم على ما يرام.
وسيتاّلفون سويًا.
والنوع الاّخر نت العرض هو الحظر.
وما ينتج عن الحظر هو وضع خط فاصل بين عناصرك.
لذا، سأعرض مثالي مرة أخرى
لدى طفل لا يستطيع حقًا الجلوس بجانب طفل اّخر.
ينبغي علىً أن أضعهم في صفهم الخاص.
على الرغم من أنها حقًا صغيرة و لا تشغل هذه المساحة كلها،
سيكون لها صفًا كاملاً عندما نقود السيارة.
والمثير في عناصر الحظر هو أنهم
بينما يشغلون العرض الأفقي والارتفاع الكافي فقط،
يمكنك المضي قدمًا وضبط ارتفاع وعرض هذه العناصر.
ولذا على الرغم من أنها تمثل كتلة و
وأنت قمت بشغل عرض الصفحة بالكامل، لكنك يمكنك القول
إنني فقط أريد أن تكون 40 بكسل أو نصف الصفحة أو شيء من هذا القبيل.
لذا مع وجود العناصر المضمنة، نجدها تشغل فقط مساحة كافية ولن يكون بإمكانك تغيير ذلك.
فلا يمكنك القول أنني أريد جعلها أكبر أو أصغر.
إن كانت مضمنة، فهذا هو الأمر برمته.
بتلك الكتلة يكون لديك مرونة أكثر بعض الشيء، ولكن
ولكن لديك مشكلة وهى أنك تشغل مساحة كبيرة.
لذلك، بكل تأكيد
توصلنا إلى فكرة تجعلك تستفيد من أفضل ما بكليهما.
ومن هذه الكتلة المضمنة.
إن العناصر التي تحتوي على كتلة عرض مضمنة هى نفسها تلك العناصر المضمنة
ويمكن أن تكون بجانب بعضها البعض، دون الإخلال بالطول أو العرض.
فإذا كان لديك عنصران تريد أن تضعها بجانب بعضهما البعض، ولكنك
تريد أن تمنحنها مساحة كبيرة وهما الاّن مضمنان.
حسنًا، امضِ قدمًا وقم بتغييره إلى كتلة مضمنة و
وسيمكنك بعد ذلك ضبط الطول والعرض.
وإن كان لديك م يمنع ذلك و
تريد أن يكون كلاهما بجانب الاّخر، فمرة أخرى ليست هناك مشكلة.
قم بتغييرهما إلى كتلة مضمنة، ويمكنك ضبط العرض والارتفاع.
والشيء الرابع الذي لا نلتفت إليه كثيرًا حقُا هو فكرة عدم عرض أى شيء.
وما يحدث هنا يكمن في أنه إذا كان لديك عنصر ما في صفحتك
وقمت بالنقر على خيار عدم العرض، فإن المتصفح يبدو كما لو كان يتجاهل وجوده تمامًا.
يبدو كما لو رفعه لأعلى وأخرجه من الصفحة.
إذًا، فهذه العناصر الأربعة، العنصر المضمن، والكتلة، والكتلة المضمنة، و
وخيار عدم العرض، هى الأشياء التي سنبدأ في تناولها في البداية.
لذا فما لدى هنا هو مجرد ملف بسيط
يحتوى على ثلاثة عناصر SPAN (أو عناصر الامتداد) وثلاثة عنصر DIV (عناصر االتقسيم) و ثلاثة عناصر فقرات.
إن كنت تتذكر، ذكرنا أن عناصر الامتداد ( span) تكون عناصر مضمنة، لذا
ستشغل فقط القدر الكافي من المساحة التي تحتاجها.
على العكس من عناصر التقسيم (DIV) والفقرات، والكتلة
سيشغلون مساحة أكبر.
وما فعلته هنا على الجانب هو أنني قمت بإضافة بعض التصميمات
والتي قد تكون منطقية أو لا عندما نتحدث عنها للوهلة الأولى، ولكن
قمت بإعطاء كل من عناصر الامتداد (span) ارتفاعًا و عرضًا.
فكل عناصري أساسًا، الارتفاع والعرض ولون خلفية مختلف.
لذا، إذا نظرنا إليهم الاّن.
ستلاحظ أنني جعلت كل عناصر الامتداد ( SPAN8 الخاصة بي خضراء ، وكل عناصر التقسيم (DIVS) زرقاء و
جميع فقراتي تأخذ اللون الأرجواني الوردي.
ويقوم كل واحد بعمل تصميم افتراضي بالضبط كيف يتم ذلك.
السبب في أن التقسيمات كبيرة كما تبدو وأن
الفقرات كبيرة كما تبدو، فلنضع مرة أخرى هذا في ورقة التصميم الخاصة بنا.
يمكنك أن ترى طولي وعرضي.
إذا لم أقم بتضمين كل هذا بشكل افتراضي، فإن عناصر التقسيم هذه و
وعناصر الفقرات يمكن أن تشغل عرض الشاشة بالكامل
وستكون حقًا صغيرة جدًا لأنها قد تحتاج فقط مساحة كافية لكتابة ذلك لنص.
لذلك دعونا نمضي قدمًا ونتناول ذلك.
عادةً سأمضي قدمًا في ورقة التصميم الخاصة بي حيث أريد أن
أضع عدة أشياء وأجرب عروضًا مختلفة وأشياءً مختلفة من هذا القبيل.
غير أني اّمل أن يكون الأمر أكثر وضوحًا بعض الشئ
بالنسبة لك، إن فعلت ذلك في نفس الوقت.
حيث يمكنك أن تتابع معي ما هى عناصر الفحص أو
أو أن تمضي قدمًا وتقوم بتغيير برمجة ملفك ، وحفظه، وتحديثه، ثم حفظه وتحديثه من جديد.
لذا فقمت بفحص العنصر هنا عن طريق النقر بزر الفأرة الأيمن و
ما سأفعله الاّن هو النقر بزر الفأرة الأيمن على إحدى عناصر الامتداد (SPAN) هذه.
بفحص العنصر سيظهر لي.
كما أن أى عنصر بصفحتك،
يمكنك التعامل معه، كما يمكنك التعامل إما مع العنصر المحدد الذي
تنقر عليه هناك أو يمككني القول أنني أريد التعامل مع كافة عناصر الامتداد (SPAN ELEMENTS).
لذا دعونا ننظر هنا إلى الأسفل.
والاّن لدى ارتفاع و عرض لكل عنصر من عناصر الامتداد الخاصة بي (SPAN ELEMENTS).
لكنها في واقع الأمر ليست كبيرة جدًا.
فكيف نغير ذلك؟
إذا كان هناك عنصر مضمن، ولكنك تريد أن تعطيه ارتفاع وعرض معين،
سننزل للجزء الخاص بالعرض واستمر هنا.
وسأحاول أن أتناول الكتلة المضمنة.
يا إلهي،الاّن طغت عناصر الامتداد الخاصة بي (span elements) على باقي العناصر.
فقد كانت صغيرة من قبل عندما كانت مضمنة.
عندما تكون هنا كتل مضمنة، يمكنني تشكيلها حقًا بشكل جيد.
وإذا قمت تغييرهم فقط لكتل، يمكنك أن تراهم الاّن
فوق بعضهم البعض حيث أن عناصر الكتلة لا تكون بجانب بعضها البعض.
إن الميزة الأخيرة التي سأعرضها عليكم هنا هى فكرة اللاشيء.
فعندما لا يوجد أى شيء، تبدو المسافات كما لو لم تكن موجودة حتى.
لم تحفظ أى مساحة لهم.
ليس الأمر كما لو كنت حتى تستطيع النظر إلى الصفحة التي كانوا ينظرون إليها هناك.
فالأشياء الممتعة التي تقوم بها قد يمكنك الاستفادة منها لاحقًا إذا كانت تريد
ظهور الأشياء في بعض الأوقات وأوقات أخرى لا، لكن دون الرغبة في ترك مسافة بيضاء كبيرة بينهم.
لذا فامضِ قدمًا، واستغرق ثانية
سأقوم فقط بالنقر فوق بعض الأشياء الأخرى.
فلذ على سبيل المثال يمكنني أن أمضي قدمًا وأقول، هل تعلم أريد أن أقوم
بهذا التقسيم فقط، أريد المضي قدمًا وجعلها كتلة مضمنة، ولنرى ماذا سيحدث.
حسنًا، الشيء الغريب أنني قمت بتغييرها و لم يحدث شيء بالفعل
وأتساءل إذا ما كنتم تعرفون السبب.
فعندما يكون لديك كتلة مضمنة، ستندهش وتمضِ قدمًا
وتضعني بجانب أشخاص اّخرين إن ان ذلك مناسبًا.
ولكن إن كان جيرانك محظورين، فلن يعمل.
لذا فالاّن، بدلاً من تغيير قسم واحد فقط، سأقوم بتغيير كافة الأقسام.
ويمكنك أن ترى ذلك، لأنهم حوالي 45%.
فاثنان منهما يتناسبان مع بعضهم البعض، بينما الاّخير لا يتناسب معهم.
لذا ليس هناك بالفعل طريقة جيدة للشعور بارتياح بخصوص هذا العرض
حتى تأخذ دورة البرمجة هذه و تبدأ في تغيير الأشياء.
ماذا يحدث إذا كان مضمنًا؟
ماذا يحدث إذا كانت كتلة مضمنة؟
ماذا يحدث إذا كان عنصر امتداد؟
وعليك الانتباه جيدًا إلى حقيقة أنه لا يكفي أن تعرف
الغرض من عرض العنصر الذي تعمل عليه.
كما تحتاج أيضًا لمعرفة طرق عرض العناصر المجاورة.
لذا، فلنمضِ قدمًا، ولنتحدث أكثر.
عندنا نتحدث عن العرض،
فمن الشائع جدًا أن نتحدث عن خاصتين اّخرتين أيضًا.
ونسميهم أمور عائمة وأمور واضحة.
وما تقوم به هذه العناصر الواضحة هو أنها ليس بالضرورة توضح لك المكان الذي تريد ان تكون في الصفحة
أو أين يكون العنصر بالتحديد في صفحتك، ولكن
ولكن أين تريد وضعها عمومًا.
عندما يقوم المتصفح بوضع العناصر على الصفحة افتراضيًا،
فإنه يبدأ بالزاوية اليسرى العليا.
ويبدأ فقط بوضعهم، لذا بالنظر إلى موقعك، أود فقط أن
أضع العنصر الأول، ثم العنصر التالي بجانبه وهو الكتلة، لذا من الأفضل أن أضعه في الأسفل.
واستمر فقط في إضافة العناصر الأخرى.
لذا، إذا كان المتصفح الخاص بك كبيرًا حقًا، يمكنك وضع العديد من عناصر الامتداد بجانب بعضها البعض،
وإن كان صغيرًا، فيمكنك التقليل.
حسنًا، تتيح لك خاصية الظهور إعادة ترتيب وضع الأشياء،
فهي تشير إلى الرغبة في وضع عنصر ما في أى مكان،
وإذا ذكرت الوضع اليمين فهذا يعني أنني أريدك أن تضع العناصر في أقصى اليمين بقد استطاعتك.
وإن قلت الوضع اليسار، فهذا يعني أنني أريدك أن تضع العنصر في أقصى اليسار بقدر استطاعتك.
إن العناصر الأخرى تتسق بشكل أساسي مع بعضها البعض، وعندما تستخدم خاصية طريقة وضع العنصر
فإنها لن تتداخل في بعضها، ولكنها ستبدو غير متناسقة بعض الشيء.
وعندما تضيف خاصية وضع العنصر مرة أخرى، فإن ستؤثر بهذه الطريقة على من يجاورك
لأن جارك لابد أن يعرف أين ستذهب.
ولذا فلدينا خاصة أخرى تسمى الأوضح.
لأن في بعض الأحيان عندما تقوم بالبرمجة، ينبغي أن تتأكد من أن العناصر
لا تتجمع على يسارك أو على يمينك.
تريد أن تحتفظ حقًا بكل هذه المساحة لنفسك،
ففي هذه الحالة يمكنك الاستفادة من خاصية مسح الموضع سواء كان يسارًا أم يمينًا أم كلاهما.
فخاصية مسح اليسار تعني التأكد من أنه ليس هناك عناصر ستظهر في اليسار.
وخاصية مسح اليمين تعني التأكد من أن ليس هناك عناصر ستظهر في اليمين.
وكذلك عند مسح كليهما، يمكنك الاعتقاد
أنه يعني أنه لا يجب أن يظهر أى شيء على جانبك على الإطلاق.
لذا فلنمضِ قدمًا ونلقِ نظرة على مثال اّخر حيث أنني عندما
أتعامل مع نفس عملية البرمجة، ولكنني أبدء في استخدام خاصية الوضع والمسح.
لذا سننظر تحديدًا إلى نفس الملف الذي كنا ننظر إليه للتو
عندما كنا نتعامل مع كتلة العرض، والعنصر المضمن، وخاصية اللاشىء هكذا دواليك.
ولكننا سنضيف أيضًا خاصتي كيفية وضع العناصر و خاصية المسح.
إذًا ها هو الرمز الذي ننظر إليه وها هو موقع الويب.
وأول شيء سأفعله هو هو أنني سأقوم بالتعامل مع عناصر الامتداد هناـ
وسأحاول أن أجرب خاصية وضع وصياغة العناصر.
لذا تذكر، عندما تقوم بوضع عنصر ما، فأنت في الأساس تشير إلى وضعه بعيدًا
على جانب ما قدر الإمكان، وستعمل العناصر الأخرى كما لو
لو كانت موجودة، ولكن دون أن تتداخل في بعضها.
لذا سأمضي قدمًا هنا لأسفل، لخاصية وضع العناصر.
قل وضع العناصر.
والاّن، أول شيء سأفعله هو أنني سأقوم بوضع العنصر فى اليسار،
مما يعني أنها لن تتحرك حقًا كثيرًا.
ما أريد أن أبحث عته
هو هل أن هناك الاّن مسافة صغيرة بعض الشيء بين كل عنصر من عناصر الامتداد.
عندما أقم بتغييرها قليلاُ إلى اليسار سوف تختفي هذه المسافة
وسيتحرك أيضًا عنصر التقسيم إلى الأسفل لأن عناصر الامتداد تكون موجودة بالأعلى.
والاّن عندما أقوم بتغييرها و تحريكها لليمين.
عندما أقوم بتحريكها لليمين، أريدك أن تلاحظ أنه ليس فقط
بينهم مسافة، ولكنهم نوعًا ما بجانب بعضهم البعض.
لكن إذا نظرت، ستجد أن ترتيب A ، B ، C مختلف.
حيث أن العناصر الأولى الموضوعة على الصفحة عنصر الامتداد A ولذا
فهي تحركها إلى اليمين قدر الإمكان.
وبعد ذلك عندما يتعلق الأمر بعنصر الامتداد B، نجده يتحرك إلى أقصى اليمين قدر الإمكان
كذلك عنصر الامتداد C أيضًا.
إنه شيء مثير للانتباه،
ويمكنك ملاحظة أنه إذا كانوا جهة اليسار، فإن عناصر التقسيم سوف تتداخل في بعضها.
حسنًا، فلنمضي قدمًا و نقوم بالمزيد.
وسأقوم بتغيير كافة عناصر التقسيم الخاصة الخاصة بي حتى تبدو كذلك.
فلنمضي قدمًا، حرك لليسار.
تبدو الصفحة حتى الاّن غريبة بعض الشيء حيث أن العناصر تنتشر في كل مكان بالصفحة
وربما لا تريد حقًا أن تبدو هكذا.
خاصة إذا أردنا أن تكون كافة فقراتنا بأسفل
الصفحة.
لذا سأمضي قدمًا هنا لفقراتي.
سأمضي قدمًا وسأقول، لن أقم بتحريك هذه العناصر.
بدلاً من ذلك، سأقول لقد انتهيت من تحريكها،
برجاء التوقف عن تحريك العناصر حولي.
وسأقوم بمسح كلا من الجانبين.
لذا فالفقرات الاّن كما لو كانت تصرخ قائلةً خلصني من كل هذا العبث.
أريد فقط أن أكون هنا بالأسفل.
فوضع العناصر والمسح عنها، أشياء مختلفة.
عندما نطرح حقًا هذه الأمثلة البرمجية البسيطة في المحاضرة،
لأن تكون دائمًا منطقية كما لو
لو كنت تضعها في شيء أكير.
لكن المشكلة هى أنني لا أستطيع أن أعرض لكم أمثلة على شيء أكبر من ذلك لأنكم
تغفون حوالى ثلاث أو أربع دقائق أثناء درس البرمجة.
إذًا فلنمض قدمًا و فلنفعل ما اعتادنا دائمًا أن نفعله
ونمارس قليلاً في إطار ما هو متاح حتى نفهم فكرة ما يفعلوه.
ومع مرور الوقت،
ستبدأ في فهم متى تريدهم فعليًا ان يبدأو في فعل هذا.