انقر هنا للعودة إلى العمود التعليمي HTML HTML. إذا كنت ترغب في تصفح البرنامج التعليمي CSS ، يرجى النقر هنا.
أعلاه: لغة الترميز - استبدال الصورة . الفصل 15 حدد نمطًا لـ <body>
واحدة من فوائد ضبط المحتوى وعرض تأثيرات بشكل منفصل هو المرونة. باستخدام CSS للتحكم في تخطيط موقع الويب (الطريقة المستخدمة في الفصل 12) ، يمكنك التحكم في عناصر التصميم في موقع الويب بأكمله ، وتغيير بعض القواعد ، وتحديث الآلاف من الصفحات بشكل كبير.
أحد الأمثلة المريحة لاستخدام CSS للتحكم في تخطيط هو تحديد نمط لـ <body> ، وإضافة فئة أو معرف إلى علامات <Body> ، يمكنك تخصيص أي علامات على الصفحة. لا توجد مشكلة في التعاريف المتكررة على الإطلاق.
في هذا الفصل ، سوف نستكشف كيفية استخدام بنية العلامة لتبديل تكوينات تخطيط مختلفة عن طريق إضافة فئة إلى علامة <Body>. تخطيطات عمود أو ثلاثة عمود.
تمامًا مثل إعادة تصميم موقع ويب للشركة السريعة باستخدام تقنية تخطيط CSS ، فإن أحد التحديات هو: على الرغم من أن جميع الصفحات تشترك في نفس التنقل ونهاية الصفحة ، إلا أن هناك حاجة إلى تخطيطين مختلفين.
التصميم الأول هو صفحة الفهرس (الصفحة الرئيسية) ، انظر الشكل 15-1. هذه صفحة بها وظيفة التنقل ، مما يسمح للمستخدمين بمواصلة اختراق بنية الدليل للموقع. قررنا استخدام تصميم ثلاثة أعمدة لهذه الصفحات.
الشكل 15-1 Fast Company Index Page Demonstration
تخطيط الصفحة الثانية هو الصفحة الداخلية الشكل 15-2. أي صفحة تبدو وكأن الوجهة تستخدم تصميم التصميم هذا. من أجل تحسين قابلية القراءة ، قررنا حذف العمود الأيسر وترك عمودين ، أي أن أحد الأعمدة الكبيرة يضع محتوى والآخر يضع الإعلانات.
الشكل 15-2 FAST Fast Company Text Text Page Demination.
السبب في أنني أوضح أن هذا لا يثبت أننا قمنا بتكسير الغموض الكبير لتخطيط معين ، ولكن لإثبات أن إضافة فئة إلى <Body> يمكن أن يعدل عرض العمود ، ووضع أو حذف العمود الثالث وفقًا لشكل الصفحة. عند إنشاء مثل هذا التأثير ، لا يتم تكرار أي قواعد على الإطلاق ، ولا يتم تقديم أوراق نمط إضافية. تتم إضافة علامات وهياكل النمط.
بعد البدء في وصف بنية العلامات التي تتقاسمها الصفحتان ، ستبدأ هذه الروايات في معنى. من أجل تحقيق تخطيط العمود ، سيتم استخدام طريقة تحديد المواقع المطلقة في الفصل 12.
يبدو أن بنية العلامة المبسطة للصفحة النصية مثل هذا:
<div id = header>
... معلومات الرأس هنا ...
</div>
<div id = content>
... المحتوى هنا ...
</div>
<div id = right>
... معلومات العمود الأيمن ...
</div>
<div id = footer>
... معلومات تذييل ...
</div>
باستخدام قواعد CSS كـ #Content و #Footer بالإضافة إلى تصحيح يمين يمين كافٍ لاستخدام طريقة تحديد المواقع المطلقة لوضعها في #Right. في هذا المثال ، 190 بكسل يكفي فقط.
#content ، #footer {
الهامش: 10px 190px 10px 10px ؛
}
بالنسبة لصفحات الفهرس ، فإن بنية الترميز هي نفسها تمامًا ، لذلك ليست هناك حاجة لنسخ قاعدة CSS المشتركة ، ولكن تتم إضافة <Div> الإضافية إلى يسار #content كعمود ثالث ( #Left).
<div id = header>
... معلومات الرأس هنا ...
</div>
<div id = content>
... المحتوى هنا ...
</div>
<div id = left> ... معلومات العمود الأيسر ... </div> <div id = right> ... معلومات العمود الأيمن ... </div><div id = footer>
... معلومات تذييل ...
</div>
بالنسبة لهذا الهيكل المكون من ثلاثة أعمدة ، لا ينبغي لنا فقط تعيين التصحيح الخارجي الأيمن لـ #-Content و #Footer لاستيعاب العمود الأيمن ، ولكن يجب علينا أيضًا تعيين التصحيح الخارجي الأيسر لاستيعاب العمود الأيسر المضافة حديثًا.
ومع ذلك ، تم تعيين التصحيح الخارجي الأيسر على 10 بكسل لمطابقة تخطيط صفحة النص المسبق الذي يحتوي على أعمدة مزدوجة فقط.
واو ، نحن عالقون ، كيف يجب أن نستمر؟ الرجاء متابعة القراءة.
الصفحة السابقة 1 2 3 الصفحة التالية اقرأ النص الكامل