البرمجة: CSShttps://academy.hsoub.com/programming/css/page/3/?d=2البرمجة: CSSarبدء استخدام لغة CSShttps://academy.hsoub.com/programming/css/%D8%A8%D8%AF%D8%A1-%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-%D9%84%D8%BA%D8%A9-css-r2001/

سنعمل في هذا المقال على تنسيق ملف HTML بسيط كي نطبق عمليًا بعض ميزات اللغة. لا بد أن تمتلك دراية بأساسيات عمل الحاسوب وقد ثبت البرمجيات الأساسية لتطوير الويب قبل متابعة القراءة، كما يُفضل أن تطلع على أساسيات HTML وأيضًا أساسيات التعامل مع الملفات.

تحضير ملف HTML

سنبدأ العمل انطلاقًا من ملف HTML، لذلك انسخ الشيفرة التالية واحفظها في حاسوبك في ملف جديد باسم index.html: 

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Getting started with CSS</title>
</head>

<body>

    <h1>I am a level one heading</h1>

    <p>This is a paragraph of text. In the text is a <span>span element</span>
and also a <a href="https://example.com">link</a>.</p>

    <p>This is the second paragraph. It contains an <em>emphasized</em> element.</p>

    <ul>
        <li>Item <span>one</span></li>
        <li>Item two</li>
        <li>Item <em>three</em></li>
    </ul>

</body>

</html>

إضافة تنسيقات CSS إلى الملف

ينبغي علينا بدايةً إخبار ملف HTML بوجود بعض قواعد التنسيق التي نريد تطبيقها، وهنالك ثلاث طرق مختلفة لإنجاز الأمر لكننا سنستخدم الآن الطريقة الأكثر تداولًا وفائدةً وهي ربط ملف CSS بملف HTML عبر ترويسته أي ضمن العنصر <head>.

انشئ ملفًا في نفس المجلد الذي يضم ملف HTML واحفظه باسم styles.css، إذ يدل الامتداد css. على أنّ الملف هو ملف تنسيق CSS.

ضع الشيفرة التالية داخل العنصر <head> في ملف HTML لكي تربط به ملف التنسيق styles.css: 

<link rel="stylesheet" href="styles.css">

يخبر العنصر <link> المتصفح عن وجود ملف منفصل يضم قواعد تنسيق من خلال استخدام السمة rel ويدله على مكان وجوده من خلال السمة href.

يمكنك اختبار نجاح عملية الربط بإضافة القاعدة التالية إلى ملف التنسيق ثم تجريب الشيفرة عبر المحرر. 

h1 {
  color: red;
}

تحفظ التغييرات التي أجريتها على ملفي CSS و HTML ثم حمّل الصفحة من جديد ضمن المتصفح. سيتحوّل لون عنوان المستوى الأول في أعلى الصفحة إلى الأحمر. فإن حدث ذلك يكون عملك صحيحًا، وإن لم يحدث ذلك تحقق من كتابة التعليمات بدقة.

بإمكانك متابعة العمل على ملف styles.css على حاسوبك أو استخدام محرر الشيفرة الذي ستراه تاليًا. سيتعامل محرر الشيفرة مع تنسيقات CSS التي نكتبها في اللوحة الأولى كما لو أنها ارتبطت بملف HTML بالطريقة التي شرحناها سابقًا.

تنسيق ملف HTML

لقد أظهرنا إمكانية استهداف أي عنصر من عناصر HTML وتنسيقه عندما حوّلنا لون العنوان إلى الأحمر. ننجز الأمر باستخدام "محدد عناصر element selector" وهو محدد يستهدف عنصر HTML وفقًا لاسمه. فلكي نستهدف مثلًا عنصر الفقرة النصية، عليك استخدام المحدد p. لاحظ كيف ستحول القاعدة التالية جميع الفقرات النصية إلى اللون الأخضر: 

p {
  color: green;
}

بإمكانك أيضًا استهداف عدة عناصر في الوقت ذاته باستخدام فاصلة "," بين أسمائها. ستحوّل القاعدة التالية عنصر الفقرة النصية وجميع عناصر القائمة إلى اللون الأخضر: 

p, li {
    color: green;
}

حاول أن تطبق ما تعلمته في محرر الشيفرة التالي:

تغيير السلوك الافتراضي للعناصر

عندما نلقي نظرة على ملف HTML محكم التوصيف حتى لو كان بسيطًا كما في مثالنا، نلاحظ كيف يضيف المتصفح بعض التنسيقات الافتراضية لتسهُل قراءة الصفحة. فالعناوين كبيرة وسميكة والقوائم منسقة على شكل نقاط، ويعود السبب في ذلك إلى التنسيقات الافتراضية التي بُنيت ضمن المتصفح والتي يطبقها على جميع الصفحات. إنّ غياب هذه التنسيقات الأساسية سيجعل الصفحة في حالة فوضى كبيرة ويتوجب علينا حينها تنسيق كل شيء من الصفر. تجدر الإشارة هنا إلى أن جميع المتصفحات الحديثة ستعرض الصفحات وفق نفس التنسيق الافتراضي تقريبًا.

لكننا نفضل في بعض الأحيان اختيار تنسيقات مختلفة عن الطريقة التي يتبعها المتصفح، عندها نختار العنصر الذي نريد أن نغيّر تنسيقه ونستخدم قواعد CSS لتغيير مظهره. فإن أردت مثلًا تغيير عرض عناصر القائمة غير المرتبة <ul> كي لا تظهر على شكل نقاط، يمكنك إضافة القاعدة التالية: 

li {
  list-style-type: none;
}

يمكنك الاطلاع على تفاصيل أكثر عن الخاصية list-style-type ضمن موسوعة حسوب وستجد الكثير من الأمثلة التي تعرض جميع القيم الممكنة التي تأخذها هذه الخاصية بدلًا من إزالة قائمة النقاط فقط.

إضافة أصناف

لقد رأينا حتى اللحظة إمكانية استهداف العنصر باسمه ثم تنسيقه، وتتيح لك هذه الطريقة تنسيق جميع العناصر من النوع ذاته كي تُعرض بالمظهر ذاته. لكنك لن تفعل ذلك في أغلب الأوقات بل تحتاج إلى طريقة لتطبيق بعض القواعد على مجموعة محددة من العناصر دون غيرها. وأكثر الطرق شيوعًا لإنجاز الأمر هي إضافة صنف class إلى عنصر HTML ثم استهداف جميع العناصر التي تضم هذا الصنف.

لتجرب الأمر، أضف السمة class إلى العنصر الثاني من القائمة غير المرتبة <ul> لتصبح كالتالي: 

<ul>
  <li>Item one</li>
  <li class="special">Item two</li>
  <li>Item <em>three</em></li>
</ul>

يمكنك استهداف جميع العناصر التي تنتمي إلى الصنف special بإنشاء "محدد صنف class selector" يبدأ بنقطة يليه اسم الصنف كالتالي: 

.special {
  color: orange;
  font-weight: bold;
}

احفظ التعديلات ثم حمل الصفحة من جديد ضمن المتصفح.

يمكنك تطبيق الصنف على أية عناصر في الصفحة إن أردتها أن تبدو برتقالية وبخط سميك. حاول أن تضيف الصنف special إلى العنصر <span> داخل الفقرة النصية، ثم حمّل الصفحة من جديد وراقب ما سيحدث.

قد تجد أحيانًا قاعدة CSS تضم اسم العنصر يليها اسم الصنف كالتالي: 

li.special {
  color: orange;
  font-weight: bold;
}

تعني الصياغة السابقة أنّ القاعدة ستستهدف جميع عناصر <li> التي تمتلك الصنف special فقط. وهكذا لن تكون قادرًا على تطبيق هذا التنسيق على العنصر <span> السابق أو أية عناصر أخرى تمتلك الصنف special، وعليك حينها تحديد العناصر التي ستطبق عليها التنسيق على شكل قائمة كالتالي: 

li.special,
span.special {
  color: orange;
  font-weight: bold;
}

وكما قد تتصور، بإمكانك تطبيق بعض القواعد على عناصر مختلفة ولا حاجة لكتابة القواعد مجددًا في كل مرة تحتاجها فيها. لهذا من الأفضل أحيانًا تجاوز العنصر والإشارة إلى صنفه إلا إن أردت تطبيق قواعد خاصة على عنصر بمفرده أو أردت التأكد من أنها لن تُطبق على عناصر أخرى.

تنسيق أشياء بناءً على موقعها في الملف

قد ترغب أحيانًا بعرض بعض الأجزاء بشكل مختلف وفقًا لموقعها ضمن الصفحة، وستجد عددًا من المحددات التي تساعدك على إنجاز الأمر، لكننا سنلقي نظرة الآن على اثنين من هذه العناصر. لاحظ وجود عنصري <em> في ملف HTML أحدهما داخل فقرة نصية والآخر ضمن عنصر قائمة. ولاختيار عنصر <em> الذي يقع داخل عنصر القائمة <li> يمكنك استخدام محدد يُدعى "محددات العناصر السلسلة descendant combinator" والذي يتكوّن من اسم العنصر الأب يليه فراغ ثم العنصر الابن.

أضف القاعدة التالية إلى ملف التنسيق: 

li em {
  color: rebeccapurple;
}

سيختار هذا المحدد أي عنصر <em> داخل العنصر <li>. وهكذا من المفترض أن تجد محتوى <em> الموجود ضمن عنصر القائمة الثالث باللون البنفسجي بينما يبقى العنصر الآخر كما هو.

كما قد ترغب أحيانًا بتنسيق فقرة نصية عندما تأتي مباشرة بعد عنوان ويكون لهما نفس المستوى في شجرة HTML. لإنجاز الأمر، ضع الإشارة + (محدد العناصر الأخوة sibling combinator) بين محددي العنصرين: 

h1 + p {
  font-size: 200%;
}

يضم المثال الموجود في محرر الشيفرة التالي القاعدتين السابقتين، حاول أن تضيف قاعدة لتجعل العنصر <span> أحمر اللون إن كان داخل فقرة نصية. ستعرف إن نجحت في الأمر عندما ترى هذا العنصر أحمر اللون في الفقرة النصية ولم يتغير لون نفس العنصر داخل عنصر القائمة الأول.

ملاحظة: تمنحك CSS طرق عدة لاستهداف عناصر HTML ولا يمثل ما عرضناه سوى البداية! سنتعرف لاحقًا على تفاصيل هذه المحددات والكثير غيرها في مقالات لاحقة.

تنسيق أشياء بناءً على حالتها

سنلق نظرة الآن على طريقة تنسيق العناصر وفقًا لحالتها، ومن أوضح الأمثلة على هذه الفكرة تنسيق الروابط التشعبية. لتنسيق الروابط التشعبية نستهدف العنصر <a> الذي يأخذ حالات مختلفة كأن يكون الرابط قد نقُر أو لم يُنقر بعد أو أن يكون مؤشر الفأرة فوقه أو لا، أو تلقى تركيز الدخل عبر لوحة المفاتيح أو أنه نُقر وتجري عملية الانتقال إلى الهدف. بإمكانك أن تغير تنسيق الرابط التشعبي باستخدام CSS لتميز الحالات السابقة. لاحظ كيف تنسق الشيفرة التالية الرابط باللون الزهري إن لم يُنقر بعد وبالأخضر عند زيارة الرابط: 

a:link {
  color: pink;
}

a:visited {
  color: green;
}

كما يمكنك تغيير مظهر الرابط عند تمرير مؤشر الفأرة فوقه كان تزيل الخط الذي يظهر تحته افتراضيًا: 

a:hover {
  text-decoration: none;
}

حاول أن تجرب قواعد CSS المختلفة للتحكم بحالة الرابط في محرر الشيفرة التالي:

لقد أزلنا في الشيفرة السابقة الخط أسفل الرابط التشعبي عند تمرير مؤشر الفأرة فوقه، كما يمكن إزالته أيضًا في جميع حالات الرابط. لكن ينبغي أن تدرك أنّ الرابط لا بدّ وأن يبدو رابطًا في المواقع الحقيقية، وبالتالي إبقاء الخط تحته أمر مهم جدًا كي يدرك المستخدم وجود جزء يمكن نقره من النص، فهذا هو السلوك المتوقع للرابط. إذًا فقد تجعل بعض تنسيقات CSS صفحتك صعبة القراءة وأقل شمولية (لا يمكن لجميع الزوار الوصول إليها).

ملاحظة: سنشير أحيانًا إلى مصطلح سهولة الوصول accessibility أو الشمولية في سلسلة المقالات هذه ويقصد بها ما يجعل الصفحة مفهومة وسهلة الاستخدام لأي كان. فقد يستخدم زائري الصفحة حاسوبًا مع فأرة أو هاتف مزود بشاشة لمس أو قارئ شاشة ينطق محتوى الصفحة أو قد يحتاج إلى حجم أكبر للنص أو قد يتنقل في الموقع باستخدام لوحة مفاتيح فقط.

عادة ما يكون التنسيق الافتراضي لملف HTML مناسبًا للجميع، فلا تعقد استخدامه عندما تبدأ تطبيق تنسيقات CSS.

الجمع بين المحددات والمجمّعات

يمكنك الجمع بين عدة محددات selectors أو مجمّعات combinator معًا. إليك مثالًا: 

/*<article> الموجود ضمن  <p> داخل  <span> اختر أي عنصر */
article p span { ... }

/*<h1>الذي يأتي بعد <ul> الذي يأتي مباشرة بعد العنصر <p> اختر العنصر  */
h1 + ul + p { ... }

يمكن الجمع بين عدة أنواع أيضًا: 

body h1 + p .special {
  color: yellow;
  background-color: black;
  padding: 5px;
}

تنسق الشيفرة السابقة أي عنصر من الصنف special موجودة ضمن فقرة <p> تأتي مباشرة بعد عنصر <h1> موجود داخل عنصر <body>.

لا تقلق إن بدت القاعدة السابقة معقدة، ستعتاد على ذلك حالما تبدأ بكتابة المزيد من قواعد CSS.

خلاصة

ألقينا نظرة في هذا المقال على عدد من الطرق المستخدمة في تنسيق ملف HTMl مستخدمين CSS. سنطور معارفنا مع تقدمنا في سلسلة المقالات هذه، لكنك تمتلك الآن ما يكفي لتنسيق النصوص وتطبيق قواعد CSS بطرق مختلفة لاستهداف أية عناصر في ملف HTML. سنتابع في مقالنا التالي مع هيكلية CSS.

ترجمة -وبتصرف- للمقال Getting started with CSS.

اقرأ أيضًا

]]>2001Mon, 12 Jun 2023 13:06:00 +0000تعرف على CSShttps://academy.hsoub.com/programming/css/%D8%AA%D8%B9%D8%B1%D9%81-%D8%B9%D9%84%D9%89-css-r2000/

تتيح لك اللغة التوصيفية CSS -اختصارًا للتنسيقات الانسيابية Cascading style sheets- إضفاء مظهر رائع على صفحات الويب، فكيف تفعل ذلك خلف الستار؟ إذ يشرح لك هذا المقال ماهية اللغة من خلال أمثلة بسيطة عن صياغتها، كما يعرّف بعض المصطلحات المتعلقة بهذه اللغة.

ننصحك قبل المتابعة في قراءة هذا المقال أن:

  1. تطلع على أساسيات استخدام الحاسوب وتصفح الويب.
  2. تطلع على المقال تثبيت البرمجيات الأساسية للانطلاق في تطوير الويب وتتفهم طريقة إنشاء وإدارة الملفات كما شرحناها في مقال التعامل مع الملفات.
  3. تطلع على أساسيات HTML كما شرحناها ضمن سلسلة المقالات مدخل إلى HTML.

ستظهر العناوين بحجم أكبر من النص العادي وتنفصل الفقرات وتباعد بينها فراغات عندما توصَّف نصًا أو محتوًى عمومًا باستخدام لغة HTML، كما ستلوَّن الروابط أيضًا ويظهر خط أسفلها لتمييزها عن النص المحيط، وإنّ ما تراه في الواقع هو التنسيق الافتراضي الذي يطبقه المتصفح، وهو تنسيق بسيط يُطبّق على ملفات HTML لتسهيل قراءتها حتى إذا لم يخصص مؤلف الصفحة أية تنسيقات صراحةً.

01_browser_defaults.png

لن تنبض صفحات ويب بالحيوية إذا اكتفينا بهذه التنسيقات البسيطة، لذلك وجدت CSS لتساعد في التحكم بمظهر عناصر HTML عندما تُعرض على المتصفح، وبالتالي ستقدِّم المحتوى الذي تريد بالمظهر الذي تريد.

استخدامات CSS

أشرنا سابقًا إلى أنّ CSS هي لغة توصيف للطريقة التي تظهر بها المستندات للمستخدِم، ونقصد بالمستند عادةً أنه ملف نصي جرت هيكلته باستخدام إحدى لغات التوصيف وأكثرها شيوعًا لغة HTML، فقد تصادف لغات توصيف أخرى مثل XML أو SVG.

تُعرض هذه المستندات للمستخدِم بتحويلها إلى شكل سهل القراءة بواسطة المتصفحات مثل Firefox أو Chrome أو Edge التي صُممت خصيصًا لهذه الغاية سواء على شاشات الحواسيب أو أجهزة الإسقاط أو الأجهزة الذكية.

ملاحظة: يُدعى المتصفح أحيانًا باسم "عميل المستخدِم" ويعني ببساطة أنه برنامج يمثل المستخدِم داخل نظام التشغيل، ولهذا فالمتصفحات هي النوع الرئيسي من العملاء الذي نقصده عندما نتكلم عن CSS، وطبعًا ليس النوع الوحيد، إذ ستجد مثلًا برامج عميلة أخرى مثل تحول ملفات HTML و CSS إلى ملفات PDF لتسهيل طباعتها.

يمكنك استخدام CSS لتنسيق أبسط مظاهر النص مثل اللون وحجم خط الكتابة، كما تستخدَم لإنشاء تخطيط مثل تحويل أحد أعمدة النص إلى تخطيط مكوّن من منطقة للمحتوى الرئيسي ومنطقة جانبية تضم معلومات تتعلق بهذا المحتوى، ويمكنك أيضًا استخدام اللغة لإضافة تأثيرات مثل تحريك المحتوى (الرسوم المتحركة).

صيغة CSS

تُبنى لغة CSS على قواعد تعرّف مجموعة من التنسيقات التي يمكن تطبيقها على عنصر أو مجموعة عناصر محددة موجودة في صفحة HTML، فقد ترغب مثلًا بعرض العنوان الرئيسي للصفحة على أساس نص أحمر كبير، ولتنجز الأمر لاحظ شيفرة CSS البسيطة التالية: 

h1 {
    color: red;
    font-size: 5em;
}

تبدأ القاعدة بتسمية "مُحدِّد Selector" مهمته تحديد عنصر HTML الذي سيخضع للتنسيق، وهذا العنصر هو <h1> في مثالنا السابق، ويلي اسم المحدد قوسين معقوصين { } نضع ضمنهما مجموعة من التصريحات Declarations التي تأخذ صورة زوج (خاصية: قيمة)، إذ يعرِّف كل زوج خاصيةً لتنسيق العنصر أو العناصر المحددة ثم يسند إليها القيمة المطلوبة، وتأتي دائمًا نقطتين متعامدين بعد الخاصية تليها القيمة، وقد تأخذ الخاصية قيمًا مختلفةً وفقًا لطبيعتها، فقد تأخذ الخاصية color في مثالنا مجموعةً متنوعةً من القيم، كما تأخذ الخاصية font-size أيضًا قيمًا لها وحدات قياس مختلفة.

تضم صفحة تنسيقات CSS قواعد كثيرة تأتي واحدة تلو الأخرى مثل: 

h1 {
    color: red;
    font-size: 5em;
}

p {
    color: black;
}

ستتذكر بسرعة بعض القيم وتستخدمها بينما ستضطر إلى البحث عن أخرى. قد تساعدك العديد من المواقع على الإنترنت في إيجاد هذه القيم سريعًا مثل موسوعة حسوب أو شبكة مطورِي موزيللا.

ملاحظة: يمكنك العثور على كل خاصيات CSS في توثيق CSS العربي في موسوعة حسوب فاجعله تحت يدك لأنك سترجع له مرارًا وتكرارًا.

وحدات CSS

قُسّمت اللغة إلى عدة وحدات لتنظيم العدد الكبير من الخصائص التي يمكن استخدامها في تنسيق العناصر، فقد تجد مثلًا أنّ الخصائص المتعلقة بالخلفيات في موسوعة حسوب في وحدة مستقلة وكذلك الإطارات وهكذا.

لا تكترث كثيرًا في هذه المرحلة لفهم هيكلية CSS، لكن من السهل إيجاد المعلومات إذا اتبعت مثلًا فكرة إمكانية وجود ما تبحث عنه ضمن الأشياء المشابهة له، وبالتالي في المواصفة نفسها CSS specification، فقد تتوقع على سبيل المثال، وجود الخاصية background-color في وحدة "الخلفيات" والخاصية border-color في وحدة "الإطارات".

مواصفات CSS

تُعرَّف جميع تقانات الويب مثل جافاسكربت، HTML، CSS، وغيرها ضمن مجلدات ضخمة تدعى بالمواصفات Spesification أو "specs" اختصارًا، والتي تنشرها منظمات تحديد المعايير مثل W3C أو WHATWG أو ECMA أو Khronos.

تحدد هذه المواصفات الطريقة الدقيقة التي تُستخدَم فيها هذه التقانات، ولا تختلف CSS عن غيرها في هذا الصدد، فقد طورتها مجموعة من W3C تُدعى "مجموعة عمل CSS" تضم ممثلين عن مصنِّعي المتصفحات وغيرها من الشركات التي تهتم بهذه التقانة بالإضافة إلى خبراء حياديين لا ينتمون إلى أيّ منظمة أو شركة.

تطوّر المجموعة خصائص CSS الجديدة أو تحدد مواصفاتها، وقد يكون السبب هو رغبة متصفح محدد بامتلاك إمكانات معينة أو لحاجة المطورين والمصممين إلى توصيف لبعض الميزات أو أن تجد المجموعة نفسها ضرورةً لتحديد متطلبات معينة، كما تطوَّر اللغة باستمرار وتضاف إليها ميزات جديدة، لكن الأمر الأساسي هو عدم تغيير الأمور بطريقة تؤثر على مواقع ويب القديمة، فالمواقع التي بُنيت عام 2000 بتقنيات CSS محدودة لا بدّ أن تبقى قابلةً للاستخدام في متصفحات اليوم.

من الطبيعي بوصفك مبتدئًا أن تجد مواصفات CSS مرهقة، فهي مخصصة للمهندسين كي يستخدمونها في دعم ميزات في البرمجيات العميلة للمستخدِم وليس لتُقرأ من قبل مطورِي ويب لفهم CSS، إذ يفضِّل الكثير من المطورِين المحترفين قراءة توثيقات أكثر وضوحًا مثل توثيقات "شبكة مطوري موزيللا" أو توثيقات "موسوعة حسوب" الموجهة للقارئ العربي، لكن لا بدّ أن تعرف أنها موجودة وأن تفهم العلاقة بين خصائص CSS التي تستخدمها وبين دعم المتصفح لها والمواصفات.

معلومات عن دعم المتصفحات لميزات CSS

عندما تعتمد مجموعة CSS ميزةً جديدةً ستتمكن من استخدامها في صفحاتك حالما يدعمها متصفح، أي حالما تُكتب الشيفرة اللازمة للمتصفح لتحويل التعليمات المتعلقة بهذه الميزة إلى شيء ملموس على الشاشة، وسنطلع أكثر على ذلك في مقال "آلية عمل CSS".

لا تدعم معظم المتصفحات الميزات الجديدة في الوقت نفسه عادةً، لهذا ستجد فجوةً في استخدام هذه الميزات بين متصفح وآخر، ولهذا من المهم جدًا أن تتحقق من دعم المتصفحات لميزة قبل استخدامها.

نعرض مثلًا في الشكل التالي دعم بعض المتصفحات للخاصيتين font-family و system-ui.

02_browser_support.png

الخاتمة

كونت الآن فكرة عن ماهية لغة CSS واستخداماتها وأهم خصائصها ومواصفاتها، وأصبحت جاهزًا للانطلاق مع هذه اللغة وتعلمها، لذا انتقل الآن إلى المقال التالي أساسيات استخدام CSS. ترجمة -وبتصرُّف- للمقال What is CSS

اقرأ أيضا

]]>2000Sun, 04 Jun 2023 13:00:00 +0000كيفية إنشاء تذييل ثابت لموقعك الإلكتروني باستخدام HTML و CSShttps://academy.hsoub.com/programming/css/%D9%83%D9%8A%D9%81%D9%8A%D8%A9-%D8%A5%D9%86%D8%B4%D8%A7%D8%A1-%D8%AA%D8%B0%D9%8A%D9%8A%D9%84-%D8%AB%D8%A7%D8%A8%D8%AA-%D9%84%D9%85%D9%88%D9%82%D8%B9%D9%83-%D8%A7%D9%84%D8%A5%D9%84%D9%83%D8%AA%D8%B1%D9%88%D9%86%D9%8A-%D8%A8%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-html-%D9%88-css-r1948/

سوف تُنشئ في هذا المقال الأخير من هذه السلسلة التعليمية عن CSS تذييلًا ثابتًا في مكان مُحدد أسفل مجال الرؤية أثناء انتقال الزائر لأسفل الصفحة، أي سوف تُعيد إنشاء التذييل الموجود ضمن الموقع التوضيحي لكنك تستطيع استخدام هذه الطُرق لمشاريع مستقبلية لمواقع إلكترونية أيضًا.

001_footer.gif

المتطلبات

هذه المقالة هي المقالة الأولى من سلسلة المقالات التعليمية حول كيفية إنشاء موقع إلكتروني بواسطة CSS وتتضمن هذه السلسلة المقالات التالية:

  1. كيفية بناء موقع باستخدام CSS
  2. كيفية فهم وإنشاء قواعد CSS
  3. كيفية تنسيق الصور باستخدام CSS
  4. كيفية إنشاء أصناف ومعرفات ID وأصناف زائفة في CSS
  5. كيفية تنسيق عنصر div في HTML باستخدام CSS
  6. كيفية تعديل حجم عنصر HTML والمساحة المحيطة به باستخدام CSS
  7. كيفية ضبط CSS و HTML لمشروع موقعك الإلكتروني
  8. كيفية تصميم جسم صفحة موقع إلكتروني باستخدام CSS
  9. كيفية بناء قسم الترويسة في موقعك الإلكتروني باستخدام CSS
  10. كيفية بناء قسم "عني" ضمن موقعك الإلكتروني باستخدام CSS
  11. كيفية بناء مخطط شبكي باستخدام CSS
  12. إضافة أقسام السيرة الذاتية وصندوق اقتباس لموقعك باستخدام CSS
  13. كيفية إنشاء تذييل ثابت باستخدام HTML و CSS

لتتمكن من متابعة هذا المقال التعليمي تأكد من أنك ضبطت المجلدات والملفات الضرورية كما هو مشروح في المقال الأول من هذه السلسلة.

يستخدم هذا المقال عدة أيقونات لشبكات التواصل الاجتماعي ضمن التذييل، وفي حال أردت استخدام هذه الأيقونات تستطيع تنزيلها من الموقع التوضيحي ثم حفظها ضمن مجلد images.

اقتباس

لتنزيل هذه الصور اضغط على رابط الصورة ثم اضغط على CTRL + الزر الأيسر (أنظمة ماك) أو الزر الأيمن (أنظمة ويندوز) على الصورة واختر "حفظ الصورة باسم" ثم احفظها باسم background-image.jpeg ضمن مجلد images.

تستطيع الآن بعد حفظ الصور المتابعة في قراءة القسم التالي وتنفيذ خطواته.

إضافة صنف لتصميم التذييل

عليك أولًا تعريف الصنف footer عن طريق إضافة الشيفرة التالية لنهاية الملف styles.css ثم احفظه. 

/* Footer */

.footer {
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  height: 90px;
  background-color: #D0DAEE;
}

أضفت في الشيفرة السابقة تعليقًا لعنونة شيفرة CSS الخاصة بقسم التذييل، ثم عرفت صنفًا باسم footer وصرحت عن عدة قواعد تصميم، القاعدة الأولى تُعرف موقع التذييل position على أنه ثابت fixed مما يعني أن العنصر لن يتحرك من موقعه الذي تُحدده عند انتقال المستخدم لأسفل الصفحة. حُدد الموقع من خلال التصريحين التاليين bottom:0;‎ و left:0;‎ وهذا يعني أن موقع التذييل يبعد صفر بكسل من اليسار وصفر بكسل من الأسفل بالنسبة لمجال الرؤية.

تستطيع من خلال تغيير القيم تعديل موقع العنصر ضمن الصفحة لكن انتبه إلى أن أي قيمة غير الصفر يجب أن تتضمن اللاحقة px بعد الرقم، كما أن القاعدة حددت العرض والارتفاع ولون الخلفية للصنف footer. أصبحت الآن جاهزًا لإضافة محتوى التذييل في القسم التالي من المقال.

إضافة تذييل ذو تصميم يتبع للصنف footer

عليك إضافة الحاوية <div> لإضافة محتوى التذييل لصفحة الويب مع تعيين الصنف footer الذي أنشأته سابقًا، ثم عد إلى ملف index.html والصق الشيفرة التالية بعد آخر وسم إغلاق <div/>. 

<!--Section 7: Footer-->

<div class="footer">
</div>

احفظ الملف index.html وأعد تحميل الصفحة ضمن المتصفح، يجب أن يظهر لك الآن قسم تذييل فارغ في أسفل صفحة الويب تبقى في مكانها عند انتقالك لأسفل الصفحة.

002_blank-footer.gif

سوف تُضيف الآن محتوى لقسم التذييل الجديد.

كيفية إضافة وتصميم عناصر القائمة ضمن التذييل

سوف تُضيف في هذه الخطوة وتُصمم عناصر القائمة في الجهة اليُسرى من التذييل، حيث سوف تُستخدم عناصر القائمة هذه للربط مع صفحات أخرى من الموقع، لكن حاليًا يوجد صفحة ويب واحدة ضمن موقعك لذا تستطيع استخدام هذه الروابط لأهداف توضيحية، وفي حال أضفت في ما بعد صفحات إضافية لموقعك تستطيع إنشاء قائمة عناصر هنا وإضافة الروابط الصحيحة. عد إلى ملف styles.css وأضف الشيفرة التالية لأسفل الملف. 

.footer-text-left {
  font-size:25px;
  padding-left:40px;
  float:left;
  word-spacing:20px;
}

a.menu:hover {
  background-color:yellow;
  font-size:20px;
}

سوف نتوقف قليلًا لمراجعة كل سطر أنشأته من مجموعات القواعد السابقة.

  • تُعرف مجموعة القواعد الأولى اسم الصنف footer-text-left التي سوف تُستخدم لتصميم نص عناصر القائمة، ولاحظ هنا أنك ضبط الخاصية float للقيمة left ليطفو النص الذي يمتلك هذا الصنف ليسار الصفحة. استخدمت أيضًا الخاصية word-spacing لإضافة مسافة إضافية بين عناصر القائمة، وفي حال كانت أي من عناصر القائمة مكونة من أكثر من كلمة واحدة سوف تُضطر لإنشاء صنف لتصميم عناصر القائمة (بدلًا من تغيير قيمة تباعد الكلمات).
  • تستخدم مجموعة القواعد الثانية الصنف الزائفhover لإضافة خلفية صفراء اللون للنص عند تحريك المستخدم للمؤشر فوق النص.

أضف الآن عناصر القائمة لصفحة الويب من خلال العودة لملف index.html وإضافة الشيفرة التالية ضمن حاوية التذييل التي أنشأتها سابقًا. 

<div class="footer">
  <p class="footer-text-left">
    <a href="index.html" class="menu">home</a>
    <a href="https://css.sammy-codes.com/about.html" class="menu">about</a> 
    <a href="https://css.sammy-codes.com/credits.html" class="menu">credits</a>
  </p>
</div>

تُضيف هذه الشيفرة عُنصري قائمة (هما about و credits) مع إسناد روابط لهما وتصميم النص باستخدام الصنف footer-text-left و الصنف a.menu.

احفظ جميع الملفات وأعد تحميل الصفحة ضمن المتصفح ليظهر لك نتيجة مماثلة لما يلي.

003_footer-menu.gif

إضافة أيقونات مواقع التواصل الاجتماعي

سوف تُضيف الآن أيقونات مواقع التواصل الاجتماعي للتذييل لتستخدمها في الربط مع حساباتك على وسائل التواصل الاجتماعي، وفي حال أردت استخدام هذه الأيقونات للربط مع منصات تواصل اجتماعي أخرى تستطيع البحث عن أيقونات مجانية وتنزيلها وحفظها في مجلد images. عد إلى ملف styles.css وأضف مجموعات القواعد الثلاث في نهاية الملف. 

.footer-content-right {
  padding-right:40px;
  margin-top:20px;
  float:right;
}

.icon-style {
  height:40px;
  margin-left:20px;
  margin-top:5px;
}

.icon-style:hover {
  background-color:yellow;
  padding:5px;
}

لنتوقف قليلًا ونُراجع مجموعات القواعد.

  • تُعرف مجموعة القواعد الأولى الصنف footer-content-right وتُحدد قيم مُحددة للهوامش والحشوة والخاصية float، وسوف تستخدم مجموعة القواعد هذه لتصميم عنصر <div> سوف يحوي أيقونات وسائل التواصل الاجتماعي.
  • تُنشئ مجموعة القواعد الثانية الصنف icon-style الذي سوف يوفر قيمًا للارتفاع والهوامش لتعيين موقع أيقونات مواقع التواصل الاجتماعي.
  • تستخدم مجموعة القواعد الثالثة الصنف الزائفhover لإضافة خلفية صفراء اللون للأيقونة عند تحريك المستخدم لمؤشر الفأرة فوق النص.

احفظ الملف styles.css ثم توجه إلى الملف index.html لإضافة أيقونات مواقع التواصل الاجتماعي من خلال إضافة الشيفرة التالية بعد وسم الإغلاق الأخير لقائمة العناصر. 

<div class="footer-content-right">
  <a href="https://github.com/digitalocean"><img src="images/github.jpeg" class="icon-style" alt="Github icon"></a>
  <a href="https://www.twitter.com/DigitalOcean"><img src="images/twitter.jpeg" class="icon-style" alt="Twitter icon"></a>
  <a href="https://www.twitter.com"><img src="images/email.jpeg" class="icon-style" alt="Emailicon"></a>
</div>

تأكد أنك غيرت مسارات الملفات والروابط بالمعلومات الخاصة بك لوسائل التواصل الاجتماعي، حيث أن الشيفرة السابقة تُنشئ حاوية <div> تستخدم التصميم المُسند للصنف footer-content-right، وضمن الحاوية div أضفت ثلاث أيقونات لمواقع التواصل الاجتماعي باستخدام الوسم <img> ورُبط كل منها مع صورة باستخدام الوسم <a>.

أضفت أيضًا النص البديل الذي يشرح كل أيقونة باستخدام السمة alt، فعند إنشاء المواقع الإلكترونية يجب إضافة النص البديل إلى جميع الصور لدعم الوصول للموقع من قبل الأشخاص الذين يستخدمون برامج قراءة الشاشة. احفظ الملف index.html وأعد تحميل الصفحة ضمن المتصفح، يجب أن يظهر لديك الآن تذييل ثابت يتضمن ثلاث أيقونات لمواقع التواصل الاجتماعي على اليمين مربوطة بحساباتك. يجب أن يتغير لون الروابط عند تحريك المستخدم لمؤشر الفأرة فوقها، ولتأكيد النتائج تستطيع المقارنة مع الصورة المتحركة في بداية المقال.

الخلاصة

أنشأت الآن تذييلًا ثابتًا في موقع ثابت أسفل مجال الرؤية لا يتحرك عند انتقال المستخدم لأسفل الصفحة، وتستطيع متابعة الاطلاع على تصميم وخيارات المحتوى ضمن التذييل عن طريق تغيير القيم ضمن أصناف CSS التي أنشأتها و تستطيع أيضًا إضافة أنواع مختلفة من المحتوى ضمن ملف index.html.

ترجمة -وبتصرّف- للمقال How To Create a Static Footer With HTML and CSS (Section 7) لصاحبه Erin Glass.

اقرأ أيضًا

]]>1948Mon, 17 Apr 2023 15:04:00 +0000إضافة أقسام السيرة الذاتية وصندوق اقتباس لموقعك باستخدام CSShttps://academy.hsoub.com/programming/css/%D8%A5%D8%B6%D8%A7%D9%81%D8%A9-%D8%A3%D9%82%D8%B3%D8%A7%D9%85-%D8%A7%D9%84%D8%B3%D9%8A%D8%B1%D8%A9-%D8%A7%D9%84%D8%B0%D8%A7%D8%AA%D9%8A%D8%A9-%D9%88%D8%B5%D9%86%D8%AF%D9%88%D9%82-%D8%A7%D9%82%D8%AA%D8%A8%D8%A7%D8%B3-%D9%84%D9%85%D9%88%D9%82%D8%B9%D9%83-%D8%A8%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-css-r1947/

سوف تُنشئ في هذا المقال قسم التوظيف Employment من الموقع التوضيحي باستخدام جداول HTML وأصناف CSS، وتستطيع استبدال معلومات Sammy بمعلوماتك الخاصة في حال رغبت بتخصيص الموقع كما أن الطرق المُستخدمة هنا قابلة للتطبيق ضمن أي مشروع موقع HTML/CSS.

001_employment-table.png

لبناء هذا القسم عليك إضافة وتنسيق قسم ترويسة وإضافة وتصميم عمود واسع وإضافة وتنسيق جدول HTML داخل العمود.

المتطلبات

هذه المقالة هي المقالة الأولى من سلسلة المقالات التعليمية حول كيفية إنشاء موقع إلكتروني بواسطة CSS وتتضمن هذه السلسلة المقالات التالية:

  1. كيفية بناء موقع باستخدام CSS
  2. كيفية فهم وإنشاء قواعد CSS
  3. كيفية تنسيق الصور باستخدام CSS
  4. كيفية إنشاء أصناف ومعرفات ID وأصناف زائفة في CSS
  5. كيفية تنسيق عنصر div في HTML باستخدام CSS
  6. كيفية تعديل حجم عنصر HTML والمساحة المحيطة به باستخدام CSS
  7. كيفية ضبط CSS و HTML لمشروع موقعك الإلكتروني
  8. كيفية تصميم جسم صفحة موقع إلكتروني باستخدام CSS
  9. كيفية بناء قسم الترويسة في موقعك الإلكتروني باستخدام CSS
  10. كيفية بناء قسم "عني" ضمن موقعك الإلكتروني باستخدام CSS
  11. كيفية بناء مخطط شبكي باستخدام CSS
  12. إضافة أقسام السيرة الذاتية وصندوق اقتباس لموقعك باستخدام CSS
  13. كيفية إنشاء تذييل ثابت باستخدام HTML و CSS

لتتمكن من متابعة هذا المقال تأكد من أنك ضبطت المجلدات والملفات الضرورية كما هو مشروح في المقال الأول من هذه السلسلة.

إنشاء قسم فارغ للفصل وقسم للعنوان

أضف أولًا صنفًا يعمل على إنشاء مسافة بين المحتوى الموجود في القسم السابق "المشاريع Projects" والقسم الحالي "التوظيف Employment"، لذا أضف تعليقات CSS وقواعد CSS التالية في أسفل ملف styles.css الخاص بك. 

/* Section 4 */

/* Add space between sections */
.section-break {
  margin:50px;
  height:500px;
}

أضفت في الشيفرة السابقة تعليق CSS استخدمته لإعطاء عنوان لقواعد CSS التي سوف تُضيفها وكان العنوان Section 4 إضافةً إلى تعليق CSS آخر يشرح الهدف من الصنف section-break الذي سوف تُعينه لعنصر <div> فارغ ضمن ملف index.html ليُضيف له ارتفاع بقيمة 500 بكسل وهوامش بقيمة 50 بكسل، وبالرغم من أن عنصر <div> لن يكون ظاهرًا إلا أن ارتفاعه سوف يعمل كمنطقة فصل من خلال دفع المحتوى التالي له لأسفل الصفحة مسافة 500 بكسل. عد إلى ملف index.html وأضف الشيفرة التالية. 

<!--Section 4: Employment-->

<div class="section-break"> </div>
<h2 class="section-heading">Experience</h2>

تتضمن الشيفرة السابقة تعليق HTML لعنونة الشيفرة المُستخدمة للقسم الرابع من الموقع وتُضيف حاوية <div> تتضمن الصنف section-break الذي أنشأته، تُضيف هذه الشيفرة أيضًا قسم الخبرة Experience وتُصممه باستخدام الصنف section-heading الذي أنشأته في مقال سابق كيفية بناء مُخطط مقسم باستخدام CSS.

ملاحظة: إن كنت لم تتابع هذه السلسلة التعليمية من بدايتها تستطيع إضافة الصنف section-heading إلى ملف styles.css من خلال إضافة الشيفرة التالية لنهاية الملف. 

.section-heading {
  text-align:center;
  color:#102C4E;
  margin-top: 150px;
  margin-bottom:70px;
  font-size: 35px;
}

احفظ ملف index.html وأعد تحميله ضمن المتصفح، يجب أن يظهر لديك قسم بعنوان Experience بعد مساحة تفصل بينه وبين القسم السابق.

002_experience-heading.png

تصميم عمود عريض وجدول

سوف تُنشئ الآن أصنافًا تسمح لك بتصميم عمود أبيض عريض وجدول داخله، لذا أضف الشيفرة التالية في نهاية الملف styles.css. 

/* Wide column */
.column-1 {
  width: 90%;
  height: auto;
  padding-top:70px;
  padding-left:70px;
  padding-bottom:70px;
  margin:auto;
  margin-bottom:50px;
  margin-top: 75px;
  background-color:white;
}

/* Table formatting */
.table-style {
  width:100%;
  border-spacing: 24px;
}

صرحت في مجموعة القواعد الأولى عن عدد من قواعد التنسيق للصنف column-1، ولاحظ أن حددت العرض width بالنسبة المئوية وبالتالي سوف يُغير العمود من قياساته حسب عرض مجال الرؤية. حددت قيمة الارتفاع إلى auto مما يسمح للجدول بتعديل ارتفاعه حسب الارتفاع الذي يحتاجه المحتوى الموضوع داخله، كما أنك أنشأت قاعدة تجعل لون خلفية العنصر <div> بيضاء عند امتلاك هذا العنصر للصنف white.

تستطيع قراءة مقال كيفية تعديل حجم عنصر HTML والمساحة المحيطة به إن أردت تعلم المزيد عن تعاريف أخرى وطُرق ضبط قياسات المحتوى والحاشية والهوامش.

عرّفت في مجموعة القواعد الثانية الصنف table-style مع عدة قواعد، حيث تسمح القاعدة width:100% للجدول بإشغال كاملة عرض الحاوية الموجود ضمنها وفي هذه الحالة سوف يكون كامل عرض العمود الذي أنشأته، أما القاعدة border-spacing:24px;‎ فإنها تُشكل تباعد بقيمة 24 بكسل بين خلايا الجدول مما يسمح لمحتوى الجدول إشغال كامل عرض العمود، وفي حال لم تستخدم هذه القاعدة سوف تكون خلايا الجدول أكثر قربًا من بعضها.

إضافة العمود والجدول

سوف تُضيف الآن العمود والجدول إلى ملف HTML، ولهذا عليك أن تحفظ ملف styles.css، بعدها عليك العودة إلى ملف index.html ثم أضف الشيفرة التالية بعد السطر <h2 class="section-heading">Experience</h2>. 

<div class="column-1">
  <h2>Employment</h2>
  <table class="table-style"> 
    <tr>
      <td>Freelance designer</td>
      <td>Seven Seas</td>
      <td>2015-present</td>
   </tr>
    <tr>
      <td>Associate Sea Creature</td>
      <td>Small Pond Productions</td>
      <td>2019-2020</td>
   </tr>
   <tr>
      <td>Associate Surfer</td>
      <td>Open Watery Web</td>
      <td>2018-2019</td>
   </tr>
   <tr>
      <td>Open Web Advocate</td>
      <td>Kiddie Pool Kubernetes</td>
      <td>2017-2018</td>
   </tr>
   <tr>
      <td>Assistant Shark</td>
      <td>Small Pond Pictures</td>
      <td>2016-2017</td>
   </tr>
  </table>
 </div>
</div>

أضفت في الشيفرة السابقة حاوية <div> بتنسيق يتبع للصنف column-1 ووضعت جدول HTML ضمن هذا العمود وذو تنسيق يتبع للصنف table-style، ووضعت ضمن الجدول محتوى مرتبط بمراحل توظيف لشخص ما وهنا تستطيع وضع معلوماتك لو أردت تخصيص الموقع. يفتح الوسم <tr> سطرًا جديدًا ضمن الجدول يتبعه ثلاث مجموعات من البيانات ضمن الجدول (باستخدام الوسم <td>).

احفظ كلا الملفين وأعد تحميل الصفحة ضمن المتصفح، يجب أن تعرض صفحة الويب عمودًا واحدًا عريضًا يتضمن جدولًا بأربع أسطر وثلاث أعمدة كما هو مبين في صورة سابقة في بداية المقال.

انتبه إلى أن أول ثلاث عناصر <td> موجودة بين أول مجموعة من وسوم فتح وإغلاق <tr>، وتستطيع المتابعة في إضافة السطور باستخدام نفس سطر الجدول ونفس تنسيق البيانات وسوف يتغير ارتفاع العمود حسب المحتوى لأنك ضبط خاصية height إلى القيمة auto للعمود ذي الصنف column-1، أو تستطيع إضافة أعمدة إضافية باستخدام العنصر <td> ضمن الأصناف <tr>.

أنشأت ونسقت في هذا القسم جدولًا باستخدام CSS لعرض محتوى مرتبط بسجل التوظيف ضمن مُخطط مُقسم، وراكمت خبرةً بسيطةً عن كيفية التحكم بقياسات الجدول وإضافة أسطر وأعمدة له، أما في القسم التالي سوف تتابع التعرف على مُخططات الجداول الممكنة من خلال إنشاء جدول للمهارات Skills والتعليم Education.

كيفية إضافة قسم المهارات والتعليم لموقعك الإلكتروني باستخدام CSS

سوف تُنشئ في هذا المقال قسم التعليم Education وقسم المهارات Skills من الموقع التوضيحي باستخدام جداول HTML وأصناف CSS، وتستطيع تغيير معلومات Sammy بمعلوماتك في حال أردت تخصيص الموقعك، كما أن الطرق المُستخدمة هنا قابلة للتطبيق على أي مشاريع مواقع HTML/CSS.

001_edu-skills-section.png

عليك إنشاء صنف CSS لبناء هذا القسم وظيفة هذا الصنف تصميم صندوقي محتوى متماثلي القياسات يتسعان بجانب بعضهما ضمن صفحة الويب، ثم سوف تُضيف جدولًا بداخل كل صندوق يتضمن كل جدول المحتوى النصي الذي سوف تُضيفه.

إنشاء وتصميم جدولين متساويي القياسات

انسخ وألصق الشيفرة التالية في نهاية ملف styles.css. 

/* Fifth section */

.column-2a {
  float: left;
  width: 45%;
  padding: 40px;
  padding-left:70px;
  padding-right: 70px;
  padding-bottom:60px;
  height:450px;
  margin:30px;
  margin-right:30px;
  margin-bottom: 40px;
  background-color:white;
}

تُنشئ الشيفرة السابقة الصنف column-2a وهو مشابه للصنف column-2 الذي أنشأته في قسم "عني" في مقال كيفية بناء قسم "عني" ضمن موقعك الإلكتروني باستخدام CSS لكن خاصية الارتفاع مضبوطة على القيمة 450 بكسل، لذا في حال غيرت كمية المحتوى في هذا الصندوق سوف تحتاج لتعديل قيمة الارتفاع تبعًا لها أو سوف يظهر المحتوى خارج الصندوق أو يُجتزأ، تستطيع قراءة مقال كيفية تعديل حجم عنصر HTML والمساحة المحيطة به من هذه السلسلة إن أردت تعلم المزيد عن تعاريف أخرى وطُرق ضبط قياسات المحتوى والحاشية والهوامش.

احفظ الملف styles.css قبل المتابعة ثم عد إلى ملف index.html وألصق الشيفرة التالية بعد وسم الإغلاق <div/>. 

<!--Section 5: Education and Skills-->

<div class="column-2a">
<h2>Education</h2>
  <table class="table-style">
    <tr>
      <td>Barnacle Bootcamp</td>
      <td>2020</td>
    </tr>
    <tr>
      <td>Seaweed University</td>
      <td>2019-2020</td>
    </tr>
    <tr>
      <td>Highwater High School</td>
      <td>2018-2019</td>
    </tr>
    <tr>
      <td>Middle-Sized Pond Middle School</td>
      <td>2017-2018</td>
    </tr>
    <tr>    
      <td>Minnow Elementary School</td>
      <td>2016-2017</td>
    </tr>    
    <tr>
      <td>Phytoplankton Preschool</td>
      <td>2015-2016</td>
    </tr>
  </table>
</div>

الشيفرة السابقة مسؤولة عن إنشاء عمود باستخدام الصنف column-2a ويُضيف داخله جدولًا يتبع التنسيق table-style الذي أنشأته في الفقرة الأولى من هذا المقال حيث يتضمن هذا الجدول سجل توظيف. يبدأ الوسم <tr> سطر الجدول حيث تليه ثلاث مجموعات من بيانات الجدول ضمن وسم <td>.

احفظ الملف وأعد تحميل المتصفح لتتحقق من أن الجدول عُرض بشكل صحيح، يجب أن يبدو الجدول مثل الصورة التالية.

002_education-section.png

عليك الآن إضافة الجدول الثاني الذي يتضمن المهارات، لذا عد إلى ملف index.html والصق الشيفرة التالية بعد آخر وسم إغلاق <div/>. 

  <div class="column-2a">
     <h2>Skills</h2>
    <table class="table-style">
      <tr>
        <td>Social Media</td>
        <td>⭐⭐⭐⭐⭐</td>
      </tr>
      <tr>
        <td>Public Speaking</td>
        <td>⭐⭐⭐⭐⭐</td>
      </tr>
      <tr>
        <td>Internet Ethics Ambassador</td>
        <td>⭐⭐⭐⭐</td>
      </tr>
      <tr>
        <td>Content production</td>
        <td>⭐⭐⭐⭐⭐</td>
      </tr>
      <tr>
        <td> HTML</td>
        <td>⭐⭐⭐</td>
      </tr>
      <tr>
        <td> CSS</td>
        <td>⭐⭐⭐</td>
      </tr>
    </table>
  </div>

تعمل هذه الشيفرة تمامًا كالشيفرة السابقة حيث تُنشئ عمودًا يستخدم الصنف column-2a يتضمن جدولًا يستقي تنسيقه من الصنف table-style، ولاحظ أنك تستخدم الوجوه التعبيرية لإنشاء صورة النجمة، حيث تستطيع استخدام أي وجه تعبيري كمحتوى نصي في لغة HTML.

احفظ الملف وأعد تحميله ضمن المتصفح وتحقق من أن الجدول يظهر بشكل صحيح، يجب أن يكون لديك الآن جدولان معروضان بجانب بعضهما كما هو موضح في الصورة في بداية المقال.

كيفية بناء صندوق اقتباس مميز ضمن موقعك باستخدام CSS

سوف تُضيف في هذا المقال اقتباسًا مميزًا لموقعك الإلكتروني باستخدام CSS كما هو معروض ضمن القسم السادس من الموقع التوضيحي sammy-codes، حيث تستطيع استخدام هذا القسم لاستضافة اقتباس مُفضل لديك، أو شهادة بعملك أو رسالة لزوار موقعك. تستطيع أيضًا إضافة رابط لهذا الاقتباس لربطه مع صفحة أخرى عند الرغبة. تستطيع تطبيق الطُرق التي تستخدمها هنا لمشاريع مواقع إلكترونية HTML/CSS أخرى.

001_featured-quote.png

إنشاء قواعد تنسيق لقسم الاقتباس المميز

عليك إنشاء صنف لتنسيق الحاوية وصنف لتنسيق النص المميز لتتمكن من إنتاج نفس التنسيق الموجود ضمن الموقع التوضيحي، لذا أضف الشيفرة التالية لملف styles.css. 

/* Section 6: Featured Quote  */

.column-quote {
  width: 90%;
  height: 475px;
  padding: 40px;
  padding-left:70px;
  padding-right: 70px;
  padding-bottom:100px;
  margin:auto;
  margin-bottom:150px;
  border: 20px solid #FEDE00;
}

.quote {
  font-size:80px;
  font-weight:bold;
  line-height: 1;
  text-align: center;
}

أضفت في الشيفرة السابقة تعليق CSS التالي /* Section 6: Featured Quote */ لإعطاء عنوان لهذا القسم من شيفرة CSS، ثم عرفت الصنف column-quote الذي سوف تستخدمه لتنسيق صندوق الاقتباس وتحديد المقاسات والحشوة والهوامش والحدود التابعة للحاوية.

لاحظ أن الهوامش مضبوطة للقيمة auto وهذا يضبط الحاوية أفقيًا في وسط الصفحة، وإضافة لذلك فإن الهوامش السفلية تملك القيمة 200 بكسل لإعطاء بعض المساحة لأسفل الصفحة.

أنشأت أيضًا الصنف quote الذي سوف يُستخدم لتنسيق النص الخاص بالاقتباس المميز، وهنا ضبطت خاصية line-height للقيمة 1 مما يُقلص المسافة بين سطور النص عن الإعدادات الافتراضية وهي 1.6، تستطيع تغيير هذه القيمة لتُحدد المسافة التي تفضلها للفصل بين الأسطر، وبعد ذلك احفظ ملف styles.css.

إضافة قسم الاقتباس المميز

عد إلى ملف index.html وأضف الشيفرة التالية بعد آخر وسم الإغلاق <div/>. 

<!--Section 6: Featured Quote-->

<div class="section-break"> </div>
<div class="column-quote">
  <p class="quote">There are many fish in the sea, but only one Sammy!</p>
</div>

لنتوقف قليلًا لشرح كل سطر في الشيفرة السابقة.

  • يُعنون تعليق HTML التالي <!--Section 6: Featured Quote--> هذا القسم من الشيفرة ضمن ملف index.html ولن يُعرض من قبل المتصفح.
  • يُنشئ العنصر <div class="section-break"> </div> قسمًا فاصلًا باستخدام الصنف الذي عرفته سابقًا في الفقرة الأولى من هذا المقال، لكن في حال لم تتطلع على هذا المقال تستطيع إضافة هذا الصنف من خلال تعريف قاعدة CSS التالية .section-break {margin:50px; height:500px;}‎ ضمن ملف styles.css، يُنشئ هذا العنصر مسافة بين المحتوى في القسم السابق وقسم الاقتباس المميز.
  • يُنشئ الوسم <div class="column-quote"‎> مع وسم الإغلاق التابع له <div/> حاوية للاقتباس المميز مع قواعد التنسيق التي عرفتها ضمن الصنف column-quote في ملف styles.css.
  • يُضيف العنصر <p class="quote">There are … Sammy! </p> محتوى نصي ضمن الحاوية <div> التي بدأتها في السطر السابق ويُصممه تبعًا للقواعد التي صرحت عنها ضمن محدد الصنف quote في ملف styles.css. إن غيرت طول المحتوى النصي ربما سوف تُضطر لتعديل أحد الأصناف ضمن هذا القسم لتغيير حجم الخط أو مقاسات الحاوية للتأكد من أن النص يتسع ضمنها.

احفظ الملف index.html وأعد تحميل الصفحة ضمن المتصفح، يجب أن يظهر ضمن صفحة الويب الخاصة بك اقتباس مميز كبير الحجم ضمن حاوية شفافة تمتلك حدودًا مستمرة.

002_featured-quote.png

الخلاصة

أضفت في هذا المقال محتوى نصي باستخدام جداول ذات تنسيق، وتستطيع تجربة تغيير القياسات وإضافة أسطر وأعمدة لتخصيص الجداول لأهداف مختلفة، أما في المقال التالي سوف تُنشئ صندوق محتوى يتضمن اقتباس مميز ضمن موقعك، وأنشأت أيضًا صندوق نص مميز ضمن موقعك وعدلت على تنسيقه، أما في المقال التالي والأخير في هذه السلسلة سوف تُنشئ تذييل ثابت يلتصق في مكان مُعين أسفل مجال الرؤية أثناء انتقال الزائر لأسفل الصفحة.

ترجمة -وبتصرّف- للمقالات How To Add a Resume or Employment History Section To Your Website With CSS (Section 4) و How To Add Your Educational History and Skills To Your Website Using CSS (Section 5) و How To Create a Featured Quote Box On Your Website Using CSS (Section 6) لصاحبها Erin Glass.

اقرأ أيضًا

]]>1947Mon, 10 Apr 2023 15:04:00 +0000كيفية بناء مخطط شبكي باستخدام CSShttps://academy.hsoub.com/programming/css/%D9%83%D9%8A%D9%81%D9%8A%D8%A9-%D8%A8%D9%86%D8%A7%D8%A1-%D9%85%D8%AE%D8%B7%D8%B7-%D8%B4%D8%A8%D9%83%D9%8A-%D8%A8%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-css-r1946/

سوف تُنشئ في هذا المقال مخططًا مُقسمًا لقسم المشاريع كما هو في الموقع التوضيحي عن طريق تصميم 8 حاويات <div> باستخدام أصناف CSS، سوف تُضيف أيضًا الصنف الزائفhover لهذه العناصر لكي تُغير لونها عند تحريك المستخدم لمؤشر الفأرة فوقها. تستطيع تغيير معلومات Sammy كما تحب إن كنت ترغب في تخصيص الموقع بمعلوماتك، كما أن الطُرق المُستخدمة هنا يُمكن تطبيقها على مشاريع مواقع إلكترونية HTML/CSS أخرى.

001_hover-highlight.gif

المتطلبات

هذه المقالة هي واحدة من مقالات السلسلة التعليمية لكيفية إنشاء موقع إلكتروني بواسطة CSS وتتضمن هذه السلسلة المقالات التالية:

  1. كيفية بناء موقع باستخدام CSS
  2. كيفية فهم وإنشاء قواعد CSS
  3. كيفية تنسيق الصور باستخدام CSS
  4. كيفية إنشاء أصناف ومعرفات ID وأصناف زائفة في CSS
  5. كيفية تنسيق عنصر div في HTML باستخدام CSS
  6. كيفية تعديل حجم عنصر HTML والمساحة المحيطة به باستخدام CSS
  7. كيفية ضبط CSS و HTML لمشروع موقعك الإلكتروني
  8. كيفية تصميم جسم صفحة موقع إلكتروني باستخدام CSS
  9. كيفية بناء قسم الترويسة في موقعك الإلكتروني باستخدام CSS
  10. كيفية بناء قسم "عني" ضمن موقعك الإلكتروني باستخدام CSS
  11. كيفية بناء مخطط شبكي باستخدام CSS
  12. إضافة أقسام السيرة الذاتية وصندوق اقتباس لموقعك باستخدام CSS
  13. كيفية إنشاء تذييل ثابت باستخدام HTML و CSS

لتتمكن من متابعة هذا المقال التعليمي تأكد من أنك ضبطت المجلدات والملفات الضرورية كما هو مشروح في المقال الأول من هذه السلسلة.

إضافة وتصميم عنوان الترويسة

أضف عنوان الترويسة Projects كبداية للقسم الجديد من صفحة الويب وتأكد من عدم حذف أي محتوى أضفته من مقالات سابقة، أضف الشيفرة التالية بعد آخر وسم إغلاق <div/> ضمن الملف index.html. 

<!--Section 3: Projects-->

  <h2 >Projects</h2>

السطر الأول من هذه الشيفرة عبارة عن تعليق لتسمية هذا الجزء الذي أضفته للشيفرة لإنشاء قسم ثالث ضمن الموقع، ويُستخدم التعليق فقط لحفظ ملاحظات عن الشيفرة مفيدة عند العودة لها مُستقبلًا ولن تُعرض ضمن المتصفح لزوار الموقع (إلا في حال اطلع الزائر على الشيفرة المصدرية لصفحة الويب)، أما السطر الثاني فهو لإضافة نص العنوان "Projects" وتعيينه ضمن الوسم <h2>.

عليك الآن تنسيق عنوان الترويسة من خلال إنشاء الصنف section-heading، لذا عد إلى ملف styles.css وانسخ والصق الشيفرة التالية في أسفل الملف. 

/*  Section 3  */

.section-heading {
  text-align:center;
  color:#102C4E;
  margin-top: 150px;
  margin-bottom:70px;
  font-size: 35px;
}

تُعرف الشيفرة السابقة التصميم الخاص بالصنف section-heading.

الخطوة التالية هي إضافة الصنف section-heading لعنوان الترويسة "Projects" ضمن ملف HTML، لذا عد إلى الملف index.html وأضف الصنف كما هو مبين في الشيفرة التالية. 

<!--Section 3: Projects—>

  <h2 class="section-heading">Projects</h2>

احفظ كل من الملفات السابقة وأعد تحميل صفحة الويب ضمن المتصفح، يجب أن يظهر العنوان الآن في الوسط مع تعديل حجمه وموقعه ولونه كما هو مُبين في الصورة.

002_projects-heading.png

إضافة وتصميم صناديق المشروع المتجاورة

سوف تُضيف الآن 8 صناديق مشاريع أسفل قسم الترويسة، وللبدء بذلك عليك إنشاء صنف CSS يسمح لك بتنسيق حاويات <div> بحيث يُمكن لأربع منها أن تتسع بجانب بعضها ضمن الصفحة، عد إلى ملف styles.css وأضف الشيفرة التالية في أسفل الملف. 

/* Sizing for Project Containers  */

.column-4 {
  float: left;
  width: 21%;
  padding: 10px;
  margin:20px;
  height: 250px;
}

صرحت في الشيفرة السابقة عن الصنف column-4 وحددت القيم التي تسمح بعرض أربع أعمدة جنبًا إلى جنب ضمن الصفحة.

  • يأمر التصريح float: left;‎ العنصر أن يطفو إلى الجهة اليسرى للحاوية التي هو ضمنها (في هذه الحالة صفحة الويب) مع السماح للمحتوى المحيط به (في هذه الحالة صناديق المشاريع الأخرى) أن تتموضع على يمين هذا الصندوق.
  • يضبط التصريح width: 21%;‎ عرض العنصر إلى 21% من عرض الحاوية الموجود ضمنها وهي في هذه الحالة صفحة الويب، إن ضبط القياسات (مثل العرض) باستخدام النسبة المئوية بدلًا من البكسلات مُفيد في حال أردت تغيير حجم العنصر حسب حجم الحاوية الموجود داخلها، لكن عليك الانتباه إلى أن تغير الحجم تلقائيًا عملية معقدة قليلًا وهناك عدة طرق لإنشاء عناصر متكيفة يُمكن اعتمادها بعد الانتهاء من إعداد أساس في CSS.

تستطيع قراءة مقال كيفية تعديل حجم عنصر HTML والمساحة المحيطة به باستخدام CSS إن أردت تعلم المزيد عن تعاريف أخرى وطُرق ضبط قياسات المحتوى والحاشية والهوامش.

سوف تُنشئ الآن صنفًا لكل من الصناديق الثمانية لتتمكن من تصميم كل منها بطريقة مختلفة وإضافة صورة مميزة للصندوق الأول والأخير مماثلة للموقع التوضيحي، وللبدء بها عليك حفظ صورة أو اثنتين ضمن مجلد الصور images لاستخدامها لاحقًا كصور مميزة، تستطيع تنزيل صورة الروبوت المتجه يمينًا وصورة الروبوت المتجه يسارًا المُستخدمة في الموقع التوضيحي.

اقتباس

لتنزيل الصورة اضغط على الروابط السابقة ثم اضغط على CTRL + الزر الأيسر (أنظمة ماك) أو الزر الأيمن (أنظمة ويندوز) على الصورة واختر "حفظ الصورة باسم" ثم احفظها باسم project-left.jpeg و project-right.jpeg ضمن مجلد images.

أضف الشيفرة التالية لإنشاء صنف لكل صندوق مشروع وذلك أسفل ملف styles.css. 

/* Color and Images for Project Containers  */

.project-1 {
  background: url('../images/project-left.jpeg');
  background-size: cover;
}

.project-2 {
  background-color:white;
}

.project-3 {
  background-color:#209BFF;
}

.project-4 {
  background-color:#112d4e;
}

.project-5 {
  background-color:#F9F7F7;
}

.project-6 {
  background-color:#209BFF;
}

.project-7 {
    background-color:#ffffff00;
}

.project-8 {
  background: url('../images/project-right.jpeg');
  background-size: cover;
}

في حال استخدمت صورك الخاصة تأكد من أنك حفظتها ضمن مجلد images واستخدمت مسار الملف الصحيح كقيمة ضمن خاصية background في الصنفينproject-1 و project-8.

سوف نتوقف قليلًا هنا لمراجعة الشيفرة التي أضفناها في مجموعة قواعد الصنفين project-1 و project-8، حيث أضفت صورة للخلفية وحددت مسار الملف وصرحت أن صورة الخلفية يجب أن تكون cover لتتسع على كامل العنصر، أما في الأصناف project-2 وحتى project-7 حددت مجموعة قواعد تتضمن ألوان خلفية مختلفة باستخدام رموز ألوان HTML، وهنا جعلت لون الخلفية يمتلك شفافية للصنف project-7 كخيار تصميم لكنك تستطيع تغييره كما تريد، وتستطيع استكشاف خلفيات أخرى سواء ألوان أو صور لكل من الأصناف السابقة عن طريق التجربة وتغيير قيم الخصائص.

أضف الآن قاعدة لتغيير حجم وموضع الخط الذي سوف يُضاف إلى صناديق المشاريع وذلك باستخدام الشيفرة التالية وإضافتها في نهاية ملف styles.css. 

.project-text {
  text-align:center;
  font-size:50px;
}

احفظ ملف styles.css ثم أضف الحاويات <div> لملف HTML وصممها باستخدام أصناف CSS التي عرفتها، وهنا عليك العودة لملف index.html وإضافة الشيفرة التالية أسفل السطر <h2 class="section-heading">Projects</h2>. 

<div class="column-4 project-1">
</div>

<div class="column-4 project-2">
  <h2 class="project-text">WEB <br>DESIGN</h2>
</div>

<div class="column-4 project-3">
  <h2 class="project-text">CHAT <br>BOTS</h2>
</div>

<div class="column-4 project-4">
  <h2 class="project-text">GAME <br> DESIGN</h2>
</div>

<div class="column-4 project-5">
  <h2 class="project-text">TEXT <br> ANALYSIS</h2>
</div>

<div class="column-4 project-6">
  <h2 class="project-text">JAVA <br> SCRIPT</h2>
</div>

<div class="column-4 project-7">
  <h2 class="project-text">DATA <br> PRIVACY</h2>
</div>

<div class="column-4 project-8">
</div>

احفظ ملف index.html وأعد تحميله ضمن المتصفح، يجب أن يظهر لديك صفحة مماثلة للصورة التالية.

003_project-containers.png

يجب أن ترى الآن صفين مكونين من أربع صناديق كل منها مُصمم حسب الأصناف column-4 و project-x (حيث x هي عبارة عن رقم صنف الصندوق) التي عُينت لعناصر HTML باستخدام سمة class، أضفت أيضًا ضمن شيفرة HTML محتوى نصي (مثل "CHAT BOTS") وعينت لهذا المحتوى النصي الصنف project-text.

أضفت أيضًا عنصر فاصل السطر <br> لإنشاء سطر فاصل بين الكلمتين في كل صندوق، وهنا تستطيع تغيير النص كما تريد الآن أو لاحقًا في حال رغبت بتخصيصه لك، وتستطيع استخدام عنصر الرابط التشعبي <a> لربط هذا النص مع الصفحات الجديدة التي سوف تُنشئها ضمن الموقع، وهو ما سوف تتعلم عنه أكثر في نهاية السلسلة التعليمية.

سوف تُضيف الآن صنفًا زائفًا لجعل الصناديق تُغير لونها عند تحريك المستخدم لمؤشر الفأرة فوق هذه الصناديق.

تغيير لون المحتوى عند تفاعل المستخدم

إن عُدت للموقع التوضيحي sammy-codes وحركت مؤشر الفأرة فوق الصناديق ضمن قسم Projects سوف تُلاحظ أن لونها يتغير، وذلك مُحقق بإضافة الصنف الزائفhover لكل صنف ضمن هذه المشاريع.

كما تذكر من مقال كيفية إنشاء أصناف ومعرفات ID وأصناف زائفة في CSS السابق ضمن السلسلة فإن الأصناف الزائفة تُنشأ من خلال إلحاق : واسم الصنف الزائف باسم الصنف الذي تحاول تعديله، ولإضافة الصنف الزائف ‎:hover لأصناف المشاريع أضف مجموعة القواعد التالية في أسفل ملف styles.css. 

/* Hover classes for individual project boxes */

.project-2:hover {
  background-color:#FEDE00;
}

.project-3:hover {
   background-color: #FEDE00;
}

.project-4:hover {
   background-color: #FEDE00;
}

.project-5:hover {
   background-color: #FEDE00;
}

.project-6:hover {
   background-color: #FEDE00;
}

.project-7:hover {
   background-color: #FEDE00;
}

أنشأت باستخدام الشيفرة السابقة أصنافhover لستة من ثمان أصناف مشاريع، حيث يأمر صفhover من العنصر تغيير لونه إلى اللون ذي الرمز ‎#FEDE00 عند تحريك المستخدم مؤشر الفأرة فوق الصندوق. لاحظ أنك أضفت صف hover فقط لصناديق المشاريع التي تتضمن نصًا (وليس للصناديق التي تتضمن صور خلفية).

احفظ الملف styles.css وأعد تحميل الملف index.html ضمن المتصفح، وتحقق من أن الصنف الزائفhover يعمل عند تحريك مؤشر الفأرة فوق أحد صناديق المشاريع التي تتضمن نصًا، يجب أن يتغير لونها عند مرور مؤشر الفأرة فوقها.

004_hover-highlight.gif

الخلاصة

تستطيع الآن ترتيب محتوى HTML ضمن صناديق باستخدام أصناف CSS إلى جانب استخدام الصنف الزائفhover لتغيير مظهر هذه الصناديق عند تفاعل المستخدم معها بتحريك مؤشر الفأرة فوقها، تستطيع أيضًا المتابعة بالتجريب من خلال تغيير قواعد التصميم ضمن الأصناف أو تغيير حجم وكمية الصناديق التي تريد استخدامها لتنظيم صفحة الويب.

سوف تُضيف في المقال التالي قسم Employment للموقع الإلكتروني باستخدام جداول HTML.

ترجمة -وبتصرّف- للمقال How To Build a Tiled Layout With CSS (Section 3) لصاحبه Erin Glass.

اقرأ أيضًا

]]>1946Mon, 03 Apr 2023 15:01:00 +0000كيفية بناء قسم "عني" ضمن موقعك الإلكتروني باستخدام CSShttps://academy.hsoub.com/programming/css/%D9%83%D9%8A%D9%81%D9%8A%D8%A9-%D8%A8%D9%86%D8%A7%D8%A1-%D9%82%D8%B3%D9%85-%D8%B9%D9%86%D9%8A-%D8%B6%D9%85%D9%86-%D9%85%D9%88%D9%82%D8%B9%D9%83-%D8%A7%D9%84%D8%A5%D9%84%D9%83%D8%AA%D8%B1%D9%88%D9%86%D9%8A-%D8%A8%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-css-r1915/

سوف تُنشئ في هذا المقال القسم الثاني من الموقع التوضيحي باستخدام CSS، لديك الحرية في استبدال معلومات Sammy بالمعلومات التي ترغب، حيث تستطيع تطبيق الطُرق التي سوف تتعلمها هنا ضمن مشاريع مواقع إلكترونية HTML/CSS أخرى.

يتضمن القسم الثاني من الموقع صندوقي محتوى يوجد ضمن أحدهما نص وضمن الآخر صورة كبيرة.

كيفية بناء قسم "عني" ضمن موقعك الإلكتروني باستخدام CSS

هذه المقالة هي واحدة من مقالات السلسلة التعليمية لكيفية إنشاء موقع إلكتروني بواسطة CSS وتتضمن هذه السلسلة المقالات التالية:

  1. كيفية بناء موقع باستخدام CSS
  2. كيفية فهم وإنشاء قواعد CSS
  3. كيفية تنسيق الصور باستخدام CSS
  4. كيفية إنشاء أصناف ومعرفات ID وأصناف زائفة في CSS
  5. كيفية تنسيق عنصر div في HTML باستخدام CSS
  6. كيفية تعديل حجم عنصر HTML والمساحة المحيطة به باستخدام CSS
  7. كيفية ضبط CSS و HTML لمشروع موقعك الإلكتروني
  8. كيفية تصميم جسم صفحة موقع إلكتروني باستخدام CSS
  9. كيفية بناء قسم الترويسة في موقعك الإلكتروني باستخدام CSS
  10. كيفية بناء قسم "عني" ضمن موقعك الإلكتروني باستخدام CSS
  11. كيفية بناء مخطط شبكي باستخدام CSS
  12. إضافة أقسام السيرة الذاتية وصندوق اقتباس لموقعك باستخدام CSS
  13. كيفية إنشاء تذييل ثابت باستخدام HTML و CSS

المتطلبات

لتتمكن من متابعة هذا المقال التعليمي تأكد من أنك ضبطت المجلدات والملفات الضرورية كما هو مشروح في المقال الأول من هذه السلسلة.

سوف تحتاج لصورة لوضعها ضمن صندوق المحتوى الموجود إلى اليمين، لذا إن كنت لا تملك صورة مناسبة تستطيع استخدام هذه الصورة.

اقتباس

لتنزيل الصورة زُر الموقع ثم اضغط على CTRL + الزر الأيسر (أنظمة ماك) أو الزر الأيمن (أنظمة ويندوز) على الصورة واختر "حفظ الصورة باسم" ثم احفظها باسم large-profile.jpeg ضمن مجلد images.

تأكد أن الصورة التي اخترتها حُفظت ضمن مجلد images باسم large-profile.jpeg.

إنشاء قواعد تنسيق لصناديق محتوى النص والصورة

عليك تعريف صنف عمود ضمن ملف styles.css لإنشاء صندوقي المحتوى هذين لتصميم الصندوقين، ثم عليك إضافة النص والصورة إلى ملف HTML. عد إلى ملف styles.css وانسخ والصق القواعد التالية في أسفل الملف. 

/* Include padding and border in total box size*/
* {
  box-sizing: border-box;
}

/* Create two equal columns that float next to each other */
.column-2 {
  float: left;
  width: 45%;
  padding: 40px;
  padding-left:70px;
  padding-right: 70px;
  height: 475px;
  margin:30px;
  margin-right:30px;
  margin-bottom: 70px;
  background-color: #FEDE00;
  line-height:2;
}

سوف نتوقف هنا قليلًا لنشرح الغاية من كل سطر أضفناه.

تستخدم مجموعة القواعد الأولى المحدد * للإشارة إلى أن هذه القاعدة يجب أن تُطبق على جميع عناصر والأصناف في HTML، حيث تُصرح هذه القاعدة عن أن قيمة خاصية box-sizing هي border-box مما يُعدل من الحسابات الكلية للعرض والارتفاع لعنصر CSS ويتضمن هذا الحواشي والحدود. يُشير العرض والارتفاع عادةً لعنصر ما إلى محتوى العنصر لكن عند ضبط الخاصية box-sizing للقيمة border-box يُصبح من السهل تعديل القيمة الكلية لعرض وارتفاع عنصر وهذا مفيد عند تصميم تخطيط محتوى الصفحة.

تُعرف مجموعة القواعد الثانية صنفًا باسم column-2 مع تحديد الحجم مما يسمح بعرض عمودين بجانب بعضهما ضمن الصفحة، وسُمي هذا الصنف column-2 للتفريق بينه وبين الأعمدة التي تمتلك أحجام أخرى سوف تُنشئ لها أصنافًا خاصة بها فيما بعد في هذه السلسلة.

يوجد بعض القيم والخصائص التي لم نُغطها ضمن هذه السلسلة بعد:

  • يُعلم التصريح ;float:left العنصر أن يطفو بالاتجاه الأيسر للحاوية التي هو موجود فيها (في هذه الحالة مجال رؤية المتصفح نفسه) مع السماح للمحتوى المحيط به أن يطفوا إلى الجهة اليُمنى، كما أنك تستطيع ضبط الخاصية float للقيمة right أو left أو none لكننا في هذه السلسلة سوف نستخدم القيمة left لإعادة إنشاء الموقع الإلكتروني التوضيحي.
  • يضبط التصريح ;width: 45% عرض العنصر إلى 45% من عرض الحاوية الخاصة به وهي في هذه الحالة مجال الرؤية للنافذة نفسها، إن ضبط القياسات (مثل العرض) بالنسبة المئوية بدلًا من البكسلات مفيد عندما تريد أن يُعاد حساب حجم العنصر حسب حجم الحاوية الموجود ضمنها، لكن عليك الانتباه إلى أن تغيير الحجم ديناميكيًا عملية معقدة وهناك عدة طرق لإنشاء عناصر متكيفة يمكن استخدامها بعد الانتهاء من وضع أساس باستخدام CSS.
  • يضبط التصريح ;background-color: #FEDE00 لون خلفية العنصر إلى ترميز لون HTML التالي ‎#FEDE00.
  • يزيد ;line-height:2 من المسافة بين الخطوط.
  • إن أردت معرفة المزيد عن تصريحات أخرى عليك مراجعة مقال سابق ضمن هذه السلسلة لضبط حجم المحتوى والحواشي والهوامش.

إضافة صندوق محتوى "عني"

سوف تُضيف الآن صندوق محتوى "عني" لصفحة الويب باستخدام الصنف column-2 الذي أنشأته سابقًا، لذا احفظ ملف styles.css وعد إلى الملف index.html ثم أضف الشيفرة التالية بعد وسم الإغلاق <div/> ضمن قسم الترويسة قبل وسم الإغلاق <body/>. 

<!--Section 2: About me-->

        <div class="column-2">
            <h1>About me</h1>
            <p>Hi! I'm Sammy the Shark, Senior Selachimorpha at DigitalOcean by day, dabbler in all things dev by night. This site is a demonstration website for the tutorial series "<a href="https://www.digitalocean.com/community/tutorial_series/how-to-build-a-website-with-css">How To Build a Website With CSS</a>," which walks you through building and customizing this website from start to finish.</p>
            <p>If you're following this tutorial series, you can replace this text with your own "About Me" content.</p>    
        </div>

احفظ الملف وأعد تحميله ضمن المتصفح، يجب أن يظهر لك صندوق أصفر اللون على جهة اليسار من صفحة الويب يتضمن نصًا.

إضافة صندوق محتوى "عني"

انتبه أن صفحة الويب يجب أن تتضمن محتوى الترويسة الذي أضفته في المقال السابق من هذه السلسلة.

سوف نراجع باختصار آلية عمل شيفرة HTML.

  • السطر الأول من الشيفرة (‎<!--Section 2: About me-->‎‎) عبارة عن تعليق يُساعد على تنظيم محتوى HTML، ولن يُعرض ضمن المتصفح وهو مُضمن هنا كمرجع.
  • السطر التالي من الشيفرة (<div class="column-2" style="background-color:#FEDE00;"‎>) يُنشئ حاوية <div> يُطبق عليها تنسيق الصنف column-2 الذي عرفته ضمن ملف styles.css ويستخدم سمة style المعرفة سطريًا لإضافة لون الخلفية ‎#FEDE00 للعنصر.
  • الوسوم <h1> و <p> التالية تتضمن النص الذي تريد إدخاله ضمن صندوق النص "عني"، ولاحظ أنك أغلقت الحاوية <div> في نهاية هذا النص، وهنا تستطيع استبدال معلومات Sammy بالنص الخاص بك إن أردت تخصيص الموقع.

إضافة صندوق محتوى الصورة

سوف تُضيف الآن صندوق المحتوى الثاني الذي يتضمن صورة كبيرة، ويوجد عدة طرق تستطيع من خلالها إضافة صندوق صورة لكن في هذا المقال سوف تُضيف الصورة من خلال استخدامها كخلفية لحاوية <div> أخرى مُسند لها الصنف column-2.

عد إلى الملف styles.css وأضف الشيفرة التالية لنهاية الملف. 

/* Large profile image */
.large-profile {
  background: url('../images/large-profile.jpeg');
  background-size: cover;
  background-position: center;
}

أضفت في هذه الشيفرة تعليقًا بهدف تنظيم قواعد CSS وأنشأت وعرفت صنفًا جديدًا large-profile سوف تستخدمه لتنسيق الصندوق الذي يحمل الصورة، وهنا فإن التصريح ‎background: url(' ../images/large-profile.jpeg');‎ يُخبر المتصفح أن يستخدم الصورة الموجودة في المسار المُحدد كصورة خلفية للعنصر، أما التصريح background-size: cover;‎ فإنه يضبط الصورة لتُغطي المساحة الكاملة للحاوية، ويُوسط التصريح background-position:center;‎ الصورة ضمن الحاوية.

سوف تُضيف الآن حاوية <div> تتضمن كل من الصنف column-2 و الصنف large-profile لإعادة إنشاء الصندوق ذي الصورة الكبيرة. احفظ ملف styles.css وعد إلى ملف index.html وأضف الشيفرة التالية أسفل وسم الإغلاق <div/> للعمود الأول وفوق وسم الإغلاق <body/>. 

  <div class="column-2 large-profile">
  </div>

تُنشئ الشيفرة السابقة حاوية <div> مُنسقة حسب القواعد المُعرفة باستخدام الصنف column-2 والصنف profile-picture.

احفظ كل من الملفين وأعد تحميل الملف index.html ضمن متصفحك، يجب أن تعرض صفحة الويب الخاصة بك صندوق نص وصندوق صورة ذات تنسيق مماثل للموجود في الموقع التوضيحي، وانتبه إلى أن صفحة الويب الخاصة بك يجب أن تتضمن محتوى الترويسة الذي أنشأته في المقال السابق. تستطيع متابعة التجريب من خلال القيمة المُعرفة ضمن الصفين column-2 و profile-large للتعرف على خيارات تصميم مختلفة.

الخلاصة

أنشأت لتوك صندوقي محتوى وصممتهما للنص والصورة باستخدام CSS، أما في المقال التالي سوف تُنشئ القسم الثالث من الموقع وخلال هذه العملية سوف نُنظم المحتوى ضمن سطرين من أربع صناديق مع تطبيق صنف زائف سوف يتسبب في تغير لون الصناديق عند تحريك المؤشر فوقها.

ترجمة -وبتصرّف- للمقال How To Build the About Me Section of Your Website With CSS (Section 2) لصاحبه Erin Glass.

اقرأ أيضًا

]]>1915Wed, 29 Mar 2023 16:07:00 +0000كيفية بناء قسم الترويسة في موقعك الإلكتروني باستخدام CSShttps://academy.hsoub.com/programming/css/%D9%83%D9%8A%D9%81%D9%8A%D8%A9-%D8%A8%D9%86%D8%A7%D8%A1-%D9%82%D8%B3%D9%85-%D8%A7%D9%84%D8%AA%D8%B1%D9%88%D9%8A%D8%B3%D8%A9-%D9%81%D9%8A-%D9%85%D9%88%D9%82%D8%B9%D9%83-%D8%A7%D9%84%D8%A5%D9%84%D9%83%D8%AA%D8%B1%D9%88%D9%86%D9%8A-%D8%A8%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-css-r1914/

سوف تبني في هذا المقال قسم الترويسة للموقع الإلكتروني التوضيحي باستخدام HTML و CSS، وتستطيع تبديل المعلومات الموجودة في الموقع بمعلوماتك إن كنت ترغب في التجريب أو تخصيص الحجم، والطرق التي تستخدمها هنا تستطيع تطبيقها على أي مشاريع HTML/CSS أخرى.

كيفية بناء قسم الترويسة في موقعك الإلكتروني باستخدام CSS

هذه المقالة هي واحدة من مقالات السلسلة التعليمية لكيفية إنشاء موقع إلكتروني بواسطة CSS وتتضمن هذه السلسلة المقالات التالية:

  1. كيفية بناء موقع باستخدام CSS
  2. كيفية فهم وإنشاء قواعد CSS
  3. كيفية تنسيق الصور باستخدام CSS
  4. كيفية إنشاء أصناف ومعرفات ID وأصناف زائفة في CSS
  5. كيفية تنسيق عنصر div في HTML باستخدام CSS
  6. كيفية تعديل حجم عنصر HTML والمساحة المحيطة به باستخدام CSS
  7. كيفية ضبط CSS و HTML لمشروع موقعك الإلكتروني
  8. كيفية تصميم جسم صفحة موقع إلكتروني باستخدام CSS
  9. كيفية بناء قسم الترويسة في موقعك الإلكتروني باستخدام CSS
  10. كيفية بناء قسم "عني" ضمن موقعك الإلكتروني باستخدام CSS
  11. كيفية بناء مخطط شبكي باستخدام CSS
  12. إضافة أقسام السيرة الذاتية وصندوق اقتباس لموقعك باستخدام CSS
  13. كيفية إنشاء تذييل ثابت باستخدام HTML و CSS

المتطلبات

لتتمكن من متابعة هذا المقال التعليمي تأكد من أنك ضبطت المجلدات والملفات الضرورية كما هو مشروح في المقال الأول من هذه السلسلة.

إضافة عنوان وعنوان فرعي لترويسة صفحة الويب الخاصة بك

تتضمن ترويسة الموقع العنوان Sammy the Shark وعنوان فرعي SENIOR SELACHIMORPHA AT DIGITALOCEAN وصورة حساب شخصي صغيرة، جميع هذه العناصر موجودة ضمن حاوية <div> مُصممة باستخدام صنف مُعرف ضمن ملف CSS. سوف تُعيد بناء هذا القسم من خلال إضافة المحتوى النصي والصور وإنشاء صنف للحاوية <div> ثم تغليف المحتوى النصي والصور بحاوية <div> اُسند لها الصنف الذي أنشأته حديثًا.

تستطيع إضافة العنوان والعنوان الفرعي من خلال إضافة الشيفرة التالية بين وسمي الفتح والإغلاق <body> ضمن ملف index.html، وهنا تستطيع تبديل المعلومات الموجودة ضمن الشيفرة بالمعلومات الخاصة بك في حال أردت تخصيص الموقع لنفسك. 

<body>

<!--Header content-->
   <h1>Sammy the Shark<h1>
   <h5>SENIOR SELACHIMORPHA AT DIGITALOCEAN<h5> 
</body>

أضفت في الشيفرة السابقة العنوان Sammy the Sahrk وأسندته ضمن ترويسة <h1> كونه الترويسة الأهم ضمن صفحة الويب، وأضفت أيضًا عنوانًا فرعيًا SENIOR SELACHIMORPHA AT DIGITALOCEAN وأسندته لترويسة <h5> كونها ترويسة أقل أهمية.

لاحظ أنك أضفت أيضًا التعليق <--‎Header content--!> قبل العنوان مباشرةً، إذ يُستخدم التعليق لحفظ معلومات تشرح الغاية من الشيفرة عند العودة لها مستقبلًا ولا تُعرض من قبل المتصفح لزوار الموقع (إلا في حال اطلعوا على الشيفرة المصدرية لصفحة الويب). تُكتب التعليقات في HTML بين ‎<!--‎ و ‎-->‎ كما هو موضح في الشيفرة السابقة، لذا تأكد من إغلاق التعليق باستخدام الوسم ‎--‎‎>‎ أو سوف يُعد كامل المحتوى عبارة عن تعليق.

إضافة وتنسيق صورة ملف شخصي صغيرة ضمن ترويسة صفحة الويب

سوف تُضيف الآن صورة ملف شخصي ضمن قسم الترويسة، لذا اختر صورة تريد تضمينها على موقعك، وإن كنت لا تملك واحدةً تستطيع استخدام أي صورة بديلة (مثل الصورة الشخصية التي استخدمناها سابقًا في المقالات السابقة Sammy أو تستطيع إنشاء أفتار من خلال موقع Getavataaars.

عند اختيارك للصورة عليك حفظها ضمن المجلد images بالاسم small-profile.jpeg، ثم عليك إضافة هذه الصورة إلى صفحة الويب باستخدام الوسم <img> وسمة المصدر src لإسناد مسار الملف الخاص بالصورة إلى هذا الوسم. أضف الشيفرة التالية إلى ملف index.html بعد السطر <--Header content--!> وقبل السطر <h1>Sammy the Shark<h1>. 

  <body>

  <!--Header content-->
       <img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
       <h1>Sammy the Shark<h1>
       <h5>SENIOR SELACHIMORPHA AT DIGITALOCEAN<h5> 
   </body>
</html>

احفظ الملف وأعد تحميله ضمن المتصفح، يجب أن تعرض صفحة الويب الخاصة بك عنوانًا رئيسيًا وعنوان فرعي وصورة شخصية وصورة خلفية للموقع.

إضافة وتنسيق صورة ملف شخصي صغيرة ضمن ترويسة صفحة الويب

لاحظ أن الصورة لا تملك نفس تصميم الصورة الشخصية ضمن الموقع التوضيحي، ولتصميم نفس الشكل والحجم والحدود الخاصة بالصورة الشخصية ضمن الموقع التوضيحي عليك إضافة الشيفرة التالية لملف styles.css. 

/*Top header profile image*/
.profile-small {
   height:150px;
   border-radius: 50%;
   border: 10px solid #FEDE00;
}

لنراجع كل سطر من الأسطر السابقة التي أضفتها.

  • إن /*Top header profile image*/ عبارة عن تعليق ضمن CSS.
  • يُشير النص ‎.profile-small إلى اسم الصنف الذي عرفناه ضمن قاعدة التنسيق، سوف يُطبق هذا الصنف على صورة الملف الشخصي في الخطوة التالية.
  • يضبط التصريح ;height:150px ارتفاع الصورة لـ 150 بكسل ويعدل تلقائيًا العرض للحفاظ على نسبة أبعاد الصورة.
  • يجعل التصريح ;border-radius: 50% حدود الصورة دائرية.
  • يُضيف التصريح ;border: 10px solid #FEDE00 حدود مستمرة للصورة بعرض 10 بكسل واللون ذو ترميز ‎#FEDE00.

احفظ الملف وعد لملف index.html ثم أضف صنف profile-small لوسم <img> كالتالي. 

       <img src="images/small-profile.jpeg" class="profile-small" alt="Sammy the Shark, DigitalOcean’s mascot">

احفظ الملف وأعد تحميله ضمن المتصفح، يجب أن يُصبح ارتفاع الصورة الشخصية لديك الآن 150 بكسل وذات شكل دائري وحدود صفراء.

كيفية إضافة وتنسيق صورة ملف شخصي صغيرة ضمن ترويسة صفحة الويب

سوف تُطبق في الخطوة التالية المزيد من التصميم على العنوان والعنوان الفرعي والصورة الشخصية ككل.

تصميم وتحديد موقع محتوى الترويسة باستخدام CSS

سوف تعرف الآن صفًا ضمن CSS لتنسيق وتحديد موقع محتوى الترويسة، لذا عد إلى ملف styles.css وأنشئ الصنف header عبر إضافة قاعدة CSS التالية. 

/* Header Title */
.header {
  padding: 40px;
  text-align: center;
  background: #f9f7f7;
  margin:30px;
  font-size:20px;
}

سوف نتوقف قليلًا هنا لنتوسع في شرح كل سطر من الشيفرة التي أضفتها.

  • إن /* Header Title */ عبارة عن تعليق لن يُعرض من قبل المتصفح.
  • النص header. هو اسم محدد الصنف الذي أنشأته وعرفته ضمن قاعدة CSS.
  • التصريح ;padding: 40px يُنشئ 40 بكسل من الحشوة بين المحتوى وحدود العنصر.
  • التصريح ;text-align: center ينقل المحتوى إلى وسط العنصر، وتستطيع تعديل القيمة إلى left أو right لمحاذاة النص تبعًا لها.
  • يضبط التصريح ;background: #f9f7f7 اللون إلى ترميز لون HTML مُعين وهو نفسه المستخدم ضمن الموقع التوضيحي، ولن نتوسع في هذه السلسلة التعليمية عن رموز ألوان HTML لكنك تستطيع استخدام أسماء الألوان أيضًا (black و white و gray و silver و purple و red و fuchsia و lime و olive و green و yellow و teal و navy و blue و maroon و aqua) لتغيير قيمة اللون لهذه الخاصية.
  • يُنشئ التصريح ;margin:30px هوامش بقيمة 30 بكسل بين محيط العنصر ومحيط مجال الرؤية أو أي عناصر محيطة به.
  • يزيد التصريح ;font-size:20px من حجم كل من العنوان والعنوان الفرعي.

احفظ الملف styles.css ثم عليك استخدام الصنف header ضمن محتوى الترويسة، لذا عد إلى صفحة index.html وأحط محتوى الترويسة (الذي أضفته مسبقًا لملفك) ضمن وسم <div> يتضمن الصنف header. 

<!--Section 1: Header content-->
   <div class="header"> 
     <img src="images/small-profile.jpeg" class="profile-small" alt="Sammy the Shark, DigitalOcean’s mascot">
     <h1>Sammy the Shark<h1>
     <h5>SENIOR SELACHIMORPHA AT DIGITALOCEAN<h5> 
   </div> 
  </body>
</html>

احفظ الملف index.html ثم أعد تحميله ضمن المتصفح، يحب أن يتغير تصميم العنوان والعنوان الفرعي وصورة الملف الشخصي الموجودة ضمن الحاوية <div> حسب القواعد المُصرح عنها باستخدام الصنف header.

تصميم وتحديد موقع محتوى الترويسة باستخدام CSS

الخلاصة

انتهيت الآن من إنشاء قسم الترويسة كما هو في الموقع التوضيحي وذلك باستخدام HTML و CSS، حيث أضفت ونسقت العنوان الرئيسي والعنوان الفرعي وصورة الملف الشخصي باستخدام حاويات <div> وأصناف CSS. إن كنت مهتمًا تستطيع المتابعة في التعرف على خيارات التنسيق من خلال تعديل قواعد تنسيق CSS لمحتوى الترويسة، وعندما تُصبح جاهزًا تستطيع المتابعة وقراءة المقال التالي حيث سوف تُنشئ القسم الثاني من الموقع.

ترجمة -وبتصرّف- للمقال How To Build the Header Section of Your Website With CSS (Section 1) لصاحبه Erin Glass.

اقرأ أيضًا

]]>1914Wed, 22 Mar 2023 16:05:00 +0000كيفية تصميم جسم صفحة موقع إلكتروني باستخدام CSShttps://academy.hsoub.com/programming/css/%D9%83%D9%8A%D9%81%D9%8A%D8%A9-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AC%D8%B3%D9%85-%D8%B5%D9%81%D8%AD%D8%A9-%D9%85%D9%88%D9%82%D8%B9-%D8%A5%D9%84%D9%83%D8%AA%D8%B1%D9%88%D9%86%D9%8A-%D8%A8%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-css-r1913/

سوف ننسق في هذا المقال جسم صفحة الويب باستخدام قاعدة CSS، وسوف تستخدم هذه القاعدة لتطبيق التصميم على صورة الخلفية وضبط عائلة الخط لصفحة الويب، سوف تُنشئ أيضًا قاعدة تصميم تُغير لون الروابط التشعبية للون يتوافق مع لوحة ألوان موقعك الإلكتروني.

سوف يُستخدم هذا التمرين لإعادة إنشاء تنسيق الموقع الإلكتروني التوضيحي لكنك تستطيع تطبيق وتعديل نفس القواعد المستخدمة هنا لمشاريع مواقع HTML/CSS أخرى.

هذه المقالة هي واحدة من مقالات السلسلة التعليمية لكيفية إنشاء موقع إلكتروني بواسطة CSS وتتضمن هذه السلسلة المقالات التالية:

  1. كيفية بناء موقع باستخدام CSS
  2. كيفية فهم وإنشاء قواعد CSS
  3. كيفية تنسيق الصور باستخدام CSS
  4. كيفية إنشاء أصناف ومعرفات ID وأصناف زائفة في CSS
  5. كيفية تنسيق عنصر div في HTML باستخدام CSS
  6. كيفية تعديل حجم عنصر HTML والمساحة المحيطة به باستخدام CSS
  7. كيفية ضبط CSS و HTML لمشروع موقعك الإلكتروني
  8. كيفية تصميم جسم صفحة موقع إلكتروني باستخدام CSS
  9. كيفية بناء قسم الترويسة في موقعك الإلكتروني باستخدام CSS
  10. كيفية بناء قسم "عني" ضمن موقعك الإلكتروني باستخدام CSS
  11. كيفية بناء مخطط شبكي باستخدام CSS
  12. إضافة أقسام السيرة الذاتية وصندوق اقتباس لموقعك باستخدام CSS
  13. كيفية إنشاء تذييل ثابت باستخدام HTML و CSS

المتطلبات

عليك ضبط الملفات والمجلدات الضرورية لمتابعة هذا المقال كما هو موضح في المقال الأول من هذه السلسلة.

نقترح في هذا المقال استخدام صورة الخلفية من الموقع التوضيحي والتي تستطيع تنزيلها من css.sammy-codes، تستطيع أيضًا استخدام صورة أخرى كخلفية لكن تأكد من أنها كبيرة كفاية لتملأ الشاشة.

اقتباس

لتنزيل الصورة من الموقع التوضيحي زُر الموقع ثم اضغط على CTRL + الزر الأيسر (أنظمة ماك) أو الزر الأيمن (أنظمة ويندوز) على الصورة واختر "حفظ الصورة باسم" ثم احفظها باسم background-image.jpeg ضمن مجلد images.

تأكد عند اختيارك للصورة أنك حفظتها باسم bakcground-image.jpeg ضمن مجلد images، لتكون الآن جاهزًا للمتابعة بالخطوة التالية.

إضافة صورة خلفية لموقع إلكتروني باستخدام CSS

يجب عليك إنشاء قاعدة CSS لمحدد الوسم body للتصريح عن قاعدة تصميم لجسم صفحة الويب، لتُطبق هذه القواعد فيما بعد على جميع العناصر الموجودة بين وسوم الفتح والإغلاق لـ <html> التي أضفتها لملف index.html في المقال الأول.

أنشئ قاعدة CSS تستخدم محدد الوسم <body> لإضافة صورة الخلفية، وامسح محتويات ملف styles.css (إن كنت تتابع المقالات السابقة ضمن السلسلة) ثم أضف مجموعة القواعد التالية. 

/* General Website Style rules */
body {
  font-family: "Helvetica", Sans-Serif;
  background-image: url("../images/background-image.jpeg");
}

لاحظ مسار ملف الصورة الذي يُخبر المتصفح أين يستطيع إيجاد صورة الخلفية، وفي حال غيرت اسم الصورة أو موقعها عليك تعديل هذا المسار بما يتناسب مع التغيير الذي أجريته.

لنتوقف قليلًا ونستوعب وظيفة كل من التصريحات الموجودة ضمن مجموعة القواعد:

  • /* General Website Style rules */ عبارة عن تعليق ضمن CSS لا يُعرض من قبل المتصفح، وهي مفيدة مثل تعليقات HTML لشرح وتنظيم الشيفرة عند الرجوع لها مستقبلًا. لاحظ أن تعليقات CSS تُفتح وتُغلق باستخدام الوسوم /* و */ بدلًا من المُستخدمة في تعليقات HTML.
  • تضبط التصريحات font-family: "Helvetica", Sans-Serif‎;‎ عائلة الخط لتكون Helvetica وعائلة الخط الأساسي هي Sans-Serif لجميع النصوص ضمن صفحة الويب (تستطيع تحديد عائلات خطوط مختلفة للمحتوى النصي ضمن نفس صفحة الويب باستخدام قواعد CSS لاحقًا). تُمثل عائلة الخط الأصلية كعائلة احتياط في حال عدم توفر العائلة الأولى عندها سوف يختار المتصفح العائلة الاحتياط، وتستطيع تجريب خطوط أخرى من خلال استبدال Helvetica بأسماء خطوط أخرى مثل Times و Courier و Paltaino.
  • يُعلم التصريح background-image: url("../images/background-image.jpeg;") المتصفح بإضافة صورة خلفية لصفحة الويب باستخدام الملف الموجود ضمن المسار المُحدد، ولاحظ أنك سبقت مسار الملف بـ ‎../‎ التي تُخبر المتصفح تحديد موقع مجلد images ضمن المسار الموجود أعلى المسار الذي يتضمن الملف الذي تعمل فيه styles.css.

احفظ ملف styles.css وأعد تحميل صفحة index.html ضمن المتصفح، يجب أن يظهر لك صفحة بدون أي محتوى ما عدا صورة الخلفية.

نتائج إضافة صورة خلفية لموقع إلكتروني باستخدام CSS

إن لم تظهر لك الصورة عليك التحقق من أن مسار الملف صحيح وأنه لا يوجد أي أخطاء ضمن ملف index.html أو ملف styles.css.

تغيير لون نص الروابط التشعبية

سوف تُضيف الآن قاعدة CSS لتغيير لون نص جميع الروابط التشعبية إلى لون يتوافق بشكل أفضل مع ألوان الموقع، لذا أضف الشيفرة التالية في أسفل ملف styles.css. 

a {
  color: #112d4e; 
}

سوف تُغير هذه القاعدة لون أي نص موجود ضمن وسم <a> إلى اللون ذي الترميز ‎#112d4e، ولن يظهر هذا التصميم إلا عند إضافة عناصر <a> إلى ملف index.html (وهو ما سوف تفعله في مقال لاحق ضمن هذه السلسلة، وتستطيع تغيير اللون من خلال تغيير ترميز لون HTML ضمن قاعدة CSS.

الخلاصة

أصبح لديك الآن صفحة ويب تتضمن صورة خلفية كبيرة، وإضافة لذلك صرحت عن عائلة خط سوف تُستخدم عندما تبدأ بإضافة محتوى نصي، كما أن استخدام مجموعات قواعد مثل هذه يسمح لك بتغيير الخط وصورة الخلفية لصفحة ويب من خلال استخدام محدد الوسم <body>. أخيرًا أنشأت قاعدة تصميم تُحدد فيها لون أي نص ضمن أي رابط تشعبي تُضيفه للصفحة.

سوف تُعيد إنشاء الترويسة للموقع التوضيحي في المقال التالي.

ترجمة -وبتصرّف- للمقال How To Style the Body of a Website With CSS لصاحبه Erin Glass.

اقرأ أيضًا

]]>1913Wed, 15 Mar 2023 16:08:00 +0000كيفية ضبط CSS و HTML لمشروع موقعك الإلكترونيhttps://academy.hsoub.com/programming/css/%D9%83%D9%8A%D9%81%D9%8A%D8%A9-%D8%B6%D8%A8%D8%B7-css-%D9%88-html-%D9%84%D9%85%D8%B4%D8%B1%D9%88%D8%B9-%D9%85%D9%88%D9%82%D8%B9%D9%83-%D8%A7%D9%84%D8%A5%D9%84%D9%83%D8%AA%D8%B1%D9%88%D9%86%D9%8A-r1912/

سوف تتعلم في هذا المقال كيفية ضبط الملفات والمجلدات الضرورية لبناء موقع إلكتروني باستخدام HTML و CSS، وسوف تُعد أيضًا ملف index.html ليكون جاهزًا لتلقي محتوى HTML في المقالات القادمة.

هذه المقالة هي واحدة من مقالات السلسلة التعليمية لكيفية إنشاء موقع إلكتروني بواسطة CSS وتتضمن هذه السلسلة المقالات التالية:

  1. كيفية بناء موقع باستخدام CSS
  2. كيفية فهم وإنشاء قواعد CSS
  3. كيفية تنسيق الصور باستخدام CSS
  4. كيفية إنشاء أصناف ومعرفات ID وأصناف زائفة في CSS
  5. كيفية تنسيق عنصر div في HTML باستخدام CSS
  6. كيفية تعديل حجم عنصر HTML والمساحة المحيطة به باستخدام CSS
  7. كيفية ضبط CSS و HTML لمشروع موقعك الإلكتروني
  8. كيفية تصميم جسم صفحة موقع إلكتروني باستخدام CSS
  9. كيفية بناء قسم الترويسة في موقعك الإلكتروني باستخدام CSS
  10. كيفية بناء قسم "عني" ضمن موقعك الإلكتروني باستخدام CSS
  11. كيفية بناء مخطط شبكي باستخدام CSS
  12. إضافة أقسام السيرة الذاتية وصندوق اقتباس لموقعك باستخدام CSS
  13. كيفية إنشاء تذييل ثابت باستخدام HTML و CSS

المتطلبات

إن كنت تتابع سلسلة المقالات التعليمية هذه منذ البداية تستطيع الاستمرار في استخدام مسار المشروع css-practice وملف index.html ومجلد images ومجلد css وملف styles.css التي أنشأتها سابقًا ضمن السلسلة، لكن إن لم تتابع السلسلة من بدايتها وتحتاج تعليمات لضبط هذه المجلدات والملفات عليك الاطلاع على المقال الأول من هذه السلسلة.

اقتباس

إن قررت استخدام التسميات الخاصة بك للمجلدات والملفات تأكد من تجنب استخدام المحارف الخاصة والفراغات (مثل ! و # وغيرها) والأحرف الكبيرة حيث يُمكن أن تُسبب مشاكل لاحقًا، وانتبه إلى أنك بحاجة لتغيير مسارات الملفات في بعض الخطوات في ما تبقى من هذه السلسلة لضمان أنها تتوافق مع أسماء ملفاتك.

يجب أن تملك مجلد مشروع بالاسم css-practice تضمن المجلدات والملفات التالية الضرورية لتعلم CSS في هذه السلسلة:

  • مجلد باسم css يتضمن الملف styles.css
  • مجلد فارغ باسم images
  • ملف بالاسم index.html

سوف تُحضر ملف index.html في القسم الأول من هذا المقال ليكون جاهزًا لتلقي محتويات المقالات القادمة.

كيفية تجهيز ملف index.html لمحتوى HTML

يجب إضافة بضع سطور مهمة من HTML لملف index.html ليعمل كصفحة رئيسية لموقعك، وسوف تتضمن هذه السطور تعليمات للمتصفح ولن تُعرض ضمن الصفحة ذاتها. تأكد أن ملف index.html فارغ (في حال أضفت له محتوى من المقالات التعليمية السابقة) وأضف الشيفرة التالية. 

<!DOCTYPE html>
<html lang="en">
  <head>
   <meta charset="utf-8">
   <title>Sammy the Shark</title>
   <link rel="stylesheet" href="css/styles.css">
  </head>
  <body>
  </body>
</html>

تأكد من تغيير النص ضمن وسم title لعنوان موقعك الذي تختاره ثم احفظ ملف index.html، وقبل المتابعة لنتعرف على تفاصيل الشيفرة السابقة التي أضفناها.

  • يُعلم التصريح <DOCTYPE html!> المتصفح أي نوع من HTML يستخدمه الملف، والتصريح عن هذه القيمة مهم جدًا بسبب وجود عدة إصدارات من HTML ويحتاج المتصفح أن يعلم أي منها سوف يستخدم، وفي هذا التصريح فإن html تُعرف عن الإصدار الحالي المعياري لـ HTML وهو HTML5.
  • وسم الفتح والإغلاق <html> تُعلم المتصفح أن المحتوى الموجود بين هذين الوسمين يجب تفسيره على أنه HTML، وضمن هذا الوسم أضفت سمة اللغة lang التي تُحدد لغة صفحة الويب، وفي هذا المقال فإن اللغة مضبوطة على الإنجليزية باستخدام en، وللحصول على القائمة الكاملة لوسوم اللغة اطلع على سجل IANA لوسوم اللغة..
  • تُنشئ وسوم الفتح والإغلاق <head> قسمًا ضمن ملف HTML يتضمن عادةً معلومات عن الصفحة بدلًا من محتوى الصفحة نفسه، ولا تعرض المتصفحات المعلومات الموجودة في قسم <head>.
  • يُحدد الوسم <meta charset="utf-8"‎> أن مجموعة محارف الملف يجب أن تكون UTF-8 وهي صيغة ترميز أحادية تدعم معظم المحارف من مجموعة متنوعة من اللغات المكتوبة.
  • يُعلم الوسم <title> المتصفح باسم صفحة الويب، حيث يظهر هذا الاسم ضمن تبويب المتصفح وعند عرض الموقع ضمن نتائج بحث لكنه لا يظهر ضمن صفحة الويب نفسها، ولا تنسى استبدال عبارة "Sammy the Shark" باسمك أو عنوان من اختيارك إن أردت تخصيص الموقع.
  • يُعلم <link rel="stylesheet" href="css/styles.css"‎> المتصفح بمكان وجود ملف التنسيق CSS الذي يتضمن قواعد التنسيق، وفي حال تابعت التعليمات السابقة في هذه السلسلة يجب أن يكون ملف التنسيق موجود ضمن مسار الملف هذا.
  • سوف تتضمن وسوم الفتح والإغلاق <body> المحتوى الرئيسي لصفحة لويب، وسوف تُضيف محتوى HTML بين هذين الوسمين في ما يلي من مقالات ضمن هذه السلسلة.

انتهيت الآن من إنشاء جميع الملفات والمجلدات الضرورية لإنشاء موقع إلكتروني باستخدام HTML و CSS، وأصبح لديك ملف index.html جاهز يتضمن محتوى HTML الضروري ليعمل كصفحة رئيسية لموقعك. سوف تتعرف في القسم التالي على كيفية بناء هذا الموقع والخطوات اللازمة إنشائه.

نظرة عامة على الموقع الإلكتروني التوضيحي المبني باستخدام HTML و CSS

سوف تتعرف في هذا المقال على بنية الموقع الإلكتروني الذي سوف تبنيه وخطوات إنشائه في القادم من المقالات، يُمكن تقسيم موقعك بصريًا إلى عدة أقسام أفقية.

نظرة عامة على الموقع الإلكتروني التوضيحي المبني باستخدام HTML و CSS

يظهر في الصورة السابقة عنوان كل من الأقسام السبعة السابقة.

  • قسم الترويسة (في الأعلى).
  • قسم "عني" (الثاني من الأعلى).
  • قسم المشاريع (الثالث من الأعلى).
  • قسم التجارب (الرابع من الأعلى).
  • قسم التعليم والمهارات (الخامس من الأعلى).
  • قسم الاقتباس المميز (السادس من الأعلى).
  • قسم التذييل الذي يلتصق بأسفل الصفحة.

وستتعلم كيفية إنشاء جميع هذه الأقسام في مقالات لاحقة في هذه السلسلة

أُنشئت كل من هذه الأقسام باستخدام خصائص CSS لعناصر HTML التي تعرفت عليها في النصف الأول من السلسلة التعليمية، وسوف تعمل في ما بقي من هذه السلسلة على إعادة بناء كل من هذه الأقسام بمقال تعليمي منفصل لكل منها، وفي حال كنت بدأت للتو بتعلمك CSS فإننا ننصحك بنسخ خيارات التصميم ضمن المقالات التعليمية والتي تتضمن الحجم واللون وصور الخلفية لتبقى الأمثلة متناسقة أثناء عملك على المقالات التعليمية القادمة.

يوجد بعض الاقتراحات في نهاية هذه السلسلة التعليمية لتجريب مخططات وتصاميم مختلفة للموقع الإلكتروني، إذ توضح لك هذه الاقتراحات كيفية تخصيص محتوى موقعك والدمج بين المقالات التعليمية لإنشاء تصميم جديد وخيارات ترتيب مختلفة لموقعك.

الخلاصة

تعرفت في هذا المقال التعليمي على بنية الموقع الإلكتروني الذي سوف تنبيه مع نظرة عامة على الخطة التي سوف تتبعها لبنائه، وفي المقال التالي سوف تُنشئ قاعدة CSS لتصميم جسم صفحة الويب كاملًا وتتعلم مدى أهمية هذه القاعدة كخطوة أولى.

ترجمة -وبتصرّف- للمقالات How To Set Up Your CSS and HTML Website Project و An Overview of Our Demonstration HTML and CSS Website لصاحبها Erin Glass.

اقرأ أيضًا

]]>1912Tue, 07 Mar 2023 16:06:00 +0000كيفية تعديل حجم عنصر HTML والمساحة المحيطة به باستخدام CSShttps://academy.hsoub.com/programming/css/%D9%83%D9%8A%D9%81%D9%8A%D8%A9-%D8%AA%D8%B9%D8%AF%D9%8A%D9%84-%D8%AD%D8%AC%D9%85-%D8%B9%D9%86%D8%B5%D8%B1-html-%D9%88%D8%A7%D9%84%D9%85%D8%B3%D8%A7%D8%AD%D8%A9-%D8%A7%D9%84%D9%85%D8%AD%D9%8A%D8%B7%D8%A9-%D8%A8%D9%87-%D8%A8%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-css-r1911/

سوف تتعلم في هذا المقال عن نموذج صندوق CSS وهو نموذج مُستخدم للإشارة إلى المحتوى والحاشية والهوامش لعنصر HTML، وفهم عمل هذا الصندوق سوف يُساعدك على تعديل حجم أجزاء أي من عناصر HTML وفهم كيفية تحديد الحجم والموقع لكل عنصر. سوف يبدأ هذا المقال بشرح كل صندوق من الصناديق الموجودة ضمن نموذج صندوق CSS ثم سوف ينتقل للتمرين العملي لكيفية تعديل قيمها باستخدام قواعد تنسيق CSS.

نموذج صندوق CSS

هذه المقالة هي واحدة من مقالات السلسلة التعليمية لكيفية إنشاء موقع إلكتروني بواسطة CSS وتتضمن هذه السلسلة المقالات التالية:

  1. كيفية بناء موقع باستخدام CSS
  2. كيفية فهم وإنشاء قواعد CSS
  3. كيفية تنسيق الصور باستخدام CSS
  4. كيفية إنشاء أصناف ومعرفات ID وأصناف زائفة في CSS
  5. كيفية تنسيق عنصر div في HTML باستخدام CSS
  6. كيفية تعديل حجم عنصر HTML والمساحة المحيطة به باستخدام CSS
  7. كيفية ضبط CSS و HTML لمشروع موقعك الإلكتروني
  8. كيفية تصميم جسم صفحة موقع إلكتروني باستخدام CSS
  9. كيفية بناء قسم الترويسة في موقعك الإلكتروني باستخدام CSS
  10. كيفية بناء قسم "عني" ضمن موقعك الإلكتروني باستخدام CSS
  11. كيفية بناء مخطط شبكي باستخدام CSS
  12. إضافة أقسام السيرة الذاتية وصندوق اقتباس لموقعك باستخدام CSS
  13. كيفية إنشاء تذييل ثابت باستخدام HTML و CSS

المتطلبات

لتتمكن من متابعة هذا المقال تأكد من أنك ضبطت المجلدات والملفات الضرورية كما هو مشروح في المقال الأول من هذه السلسلة.

نموذج صندوق CSS

يُمكن فهم عنصر HTML على أنه سلسلة من أربع صناديق متراكبة:

  • صندوق المحتوى Content وهو الصندوق الداخلي حيث يتموضع النص والصور، ويُضبط حجمه افتراضيًا حسب حجم المحتوى الذي يتضمنه، وهو الصندوق الوحيد ضمن النموذج الذي تكون قيمته الافتراضية ليست صفرًا (في حال تضمن محتوى)، وعلى العكس فإن الحاشية والحدود والهوامش لعنصر تمتلك قيمة افتراضية صفرية لكثير من عناصر HTML (مثل <p> و <h1>و <img>) إلا في حال حددت غير ذلك، فعندما تضبط قيم العرض والارتفاع لعنصر فأنت تغيّر عرض وارتفاع صندوق المحتوى.
  • صندوق الحاشية Padding هو الصندوق الثاني والذي يتألف من مساحة شفافة تُحيط بصندوق المحتوى، وتكون الحاشية افتراضيًا لعديد من عناصر HTML ذات قيمة صفرية، وزيادة حجم حاشية عنصر سوف يزيد المسافة بين صندوق المحتوى وصندوق الحدود.
  • صندوق الحدود Border هو الصندوق الثالث والذي يُحيط بصندوق الحاشية، وتكون قيمة الحدود افتراضيًا لمعظم عناصر HTML صفرًا، زيادة حجم الحدود لعنصر ما سوف تزيد المسافة بين صدوق الحاشية وصندوق الهوامش، وانتبه إلى أنه يُمكن تعديل لون وسماكة ونمط الحدود.
  • صندوق الهوامش Margins هو الصندوق الرابع يتألف من مساحة شفافة خارج حدود العنصر، وتكون قيمة الهوامش افتراضيًا لبعض عناصر HTML صفرًا، على الرغم من أن بعض العناصر الأخرى تمتلك قيم هوامش مُحددة كقيم افتراضية مثل الوسوم من <h1> حتى <h2>. يُمكن أن تتراكب الهوامش لعنصرين مختلفين في بعض الأحيان وهذا مسموح ويُدعى هذا السلوك بتصادم الهوامش، وعند حصوله تكون القيمة الافتراضية للهوامش هي حجم هوامش العنصر الأكبر.

أصبحت الآن على اطلاع على مكونات نموذج صندوق CSS، وتستطيع بدء التدريب على تنسيق هذه الصناديق المختلفة للتعرف على طريقة عملها معًا لتخطيط وتصميم عنصر HTML، وسوف تبدأ بإنشاء عنصر <div> يتضمن محتوى نصي ثم سوف تُعدل قيم كل من هذه الصناديق للتعرف عمليًا على موضع كل منها ضمن العنصر.

تعديل حجم المحتوى لعنصر HTML باستخدام CSS

تأكد أولًا من ضبطك للملفات والمجلدات الضرورية كما هو مذكور في المقال الأول من هذه السلسلة.

احذف محتويات الملف styles.css (إن كان يتضمن محتوى من المقالات التعليمية السابقة) وأضف قاعدة CSS التالية. 

.yellow-div {
  background-color:yellow;
}

احفظ ملف styles.css الذي أنشأت الآن ضمنه صنفًا باستخدام محدد الصنف yellow-div، وبذلك سوف تكون الخلفية لأي عنصر <div> صفراء بشرط أن تُعين له هذا الصنف.

امسح الآن محتويات الملف index.html ما عدا السطر الأول من الشيفرة الآتية: 

 <link rel="stylesheet" href="css/styles.css">

ثم أضف الشيفرة التالية. 

<div class="yellow-div">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>

احفظ الملف وأعد تحميله ضمن المتصفح، لتحصل على نتائج مماثلة لما يلي.

تعديل حجم المحتوى لعنصر HTML باستخدام CSS

سوف تعرض صفحة الويب لديك صندوقًا أصفرًا يتضمن المحتوى النصي الذي أضفته لملف HTML، وحاليًا يمتلك الصندوق الداخلي (صندوق المحتوى) حجمًا بينما قيم الحاشية والحدود والهوامش جميعها مضبوطة على الصفر. لاحظ أن عرض وارتفاع الصندوق الأصفر مضبوطة تلقائيًا بسبب حجم المحتوى النصي ضمن الحاوية <div>، لذا عند إضافة أو إزالة المحتوى النصي سوف تلاحظ كيفية تغير حجم حاوية <div> مع تغير المحتوى.

اقتباس

تستطيع استخدام أدوات مطور ويب فايرفوكس للاطلاع على نموذج الصندوق لعنصر HTML والقيم المضبوطة لكل صندوق. اضغط بالزر الأيمن للفأرة ضمن صفحة الويب واختر "افحص" من القائمة المنسدلة، لتظهر في أسفل النفاذة أدوات المطور وهنا اضغط على أيقونة السهم في أقصى اليمين ثم انقر على العنصر الذي ترغب في تفحصه، سوف يظهر نموذج الصندوق للعنصر المُختار في الزاوية السفلية اليسرى لنافذة أدوات المطور، وربما تحتاج لتوسيع النافذة للتمكن من رؤيتها.

كيفية تعديل حجم المحتوى لعنصر HTML باستخدام CSS

تاليًا، لنحدد عرض حاوية <div> لدراسة كيفية تأثير هذا التغيير على آلية عرض العنصر ضمن المتصفح، وأضف قاعدة تحديد العرض ضمن ملف styles.css لضبط العرض على قيمة 500 بكسل. 

.yellow-div {
  background-color:yellow;
  width: 500px;
}

احفظ الملف وأعد تحميله ضمن المتصفح، سوف يكون عرض حاوية <div> الآن هي 500 بكسل بينما قيمة الارتفاع ضُبطت تلقائيًا ليتسع المحتوى النصي ضمن الحاوية.

إضافة حاوية 500 بكسل

لاحظ أنك تستطيع أيضًا تحديد قيمة الارتفاع لعنصر <div> بدلًا من تحديد قيمة العرض وعندها سوف تُعدل قيمة العرض تلقائيًا، أو تستطيع تحديد كل من العرض والارتفاع لكن انتبه أن المحتوى في هذه الحالة سوف يقع خارج حاوية <div> إن كان حجم عنصر <div> صغيرًا جدًا.

كيفية تعديل حجم الحاشية لعنصر HTML باستخدام CSS

سوف نزيد الآن حجم الحاشية لدراسة تأثيرها على طريقة عرض عنصر <div>، لذا أضف السطر المرتبط بالحاشية لقاعدة CSS الموجودة ضمن ملف styles.css وهنا سوف نحدد حجم الحاشية بـ 25 بكسل. 

.yellow-div {
  background-color:yellow;
  width: 500px;
  padding: 25px;
}

احفظ ملف styles.css وأعد تحميل الملف index.html ضمن متصفحك، لتجد أن حجم الصندوق الأصفر أصبح أكبر ليسمح بمساحة 25 بكسل بين المحتوى النصي ومحيط الصندوق.

كيفية تعديل حجم الحاشية لعنصر HTML باستخدام CSS

تستطيع تغيير حجم الحاشية من خلال تعديل قيمة حجم padding، كما أنك تستطيع تغيير حجم الحاشية لجهة معينة من العنصر باستخدام الخصائص التالية:

  • padding-left
  • padding-right
  • padding-bottom
  • padding-top

فعلى سبيل المثال جرب تغيير التصريح ;padding:25px ضمن ملف styles.css كما هو موضح في الشيفرة التالية. 

.yellow-div {
  background-color:yellow;
  width: 500px;
  padding-left: 25px;
  padding-right: 50px;
  padding-top: 100px;
  padding-bottom: 25px;
}

احفظ ملف styles.css وأعد تحميل ملف index.html ضمن متصفحك لتظهر لديك نتائج مشابهة لما يلي.

تعديل حجم الحاشيات

إن معرفة كيفية تحديد أحجام الحاشية لاتجاهات معينة من عنصر مفيد جدًا عند ترتيب المحتوى لصفحة ويب.

تعديل حجم الحدود ولونها وتصميمها لعنصر HTML باستخدام CSS

سوف نتدرب الآن على ضبط قيم الحدود لعنصر HTML، حيث تسمح لك خاصية الحدود ضبط حجم ولون وتصميم الحدود (مثل solid و dashed و dotted و inset و outset) لعنصر HTML. تستطيع ضبط هذه القيم الثلاث ضمن خاصية الحدود كما هو موضح في الشيفرة التالية. 

selector {
  border: size style color;
}

جرب إضافة التصريح المُبين في الشيفرة التالية لإضافة حدود سوداء مستمرة بعرض 5 بكسل. 

.yellow-div {
  background-color:yellow;
  width: 500px;
  padding: 25px;
  border: 5px solid black;
}

ربما تريد حذف التصريحات السابقة عن أحجام الحاشية المختلفة التي أضفناها في القسم السابق واستبدالها ب ;padding:25px لتكون قاعدة تنسيق CSS سهلة القراءة. احفظ ملف styles.css ثم أعد تحميل ملف index.html ضمن المتصفح لمعاينة التغييرات، يجب أن يمتلك الصندوق الأصفر حدودًا الآن بالقيم التي ضبطها في قاعدة CSS.

تعديل حجم الحدود ولونها وتصميمها لعنصر HTML باستخدام CSS

تستطيع تغيير القيم للتعرف على كيفية تأثيرها على ظهور العنصر ضمن المتصفح، كما فعلنا مع قيم الحاشية وهنا أيضًا تستطيع تحديد قيمة الحدود لجهة دون الأخرى باستخدام الخصائص التالية:

  • border-left
  • border-right
  • border-bottom
  • border-top

تعديل حجم الهوامش لعنصر HTML باستخدام CSS

سوف نجرب الآن تعديل حجم الهوامش لعنصر ما باستخدام CSS، وفي التمرين التالي سوف نُعطي قيمة كبيرة للهوامش ليظهر لك بسهولة طريقة عرض الهوامش في المتصفح. أضف التصريح المرتبط بالهوامش margins لقاعدة CSS التي صرحت عنها ضمن ملف styles.css واضبط قيمته لـ 100 بكسل. 

.yellow-div {
  background-color:yellow;
  width: 500px;
  padding: 25px;
  border: 5px solid black;
  margin: 100px;
}

احفظ ملف styles.css وأعد تحميل ملف index.html ضمن متصفحك لمعاينة التغييرات، يجب أن يكون الصندوق الأصفر تحرك بمقدار 100 بكسل لليمين والأسفل ليسمح بمساحة 100 بكسل من الهوامش بين حدود العنصر ومجال رؤيته.

تعديل حجم الهوامش لعنصر HTML باستخدام CSS

اقتباس

ربما لاحظت أن الصندوق الأصفر كان يملك بالأصل هوامش أصغر مثل مسافة بيضاء بين حدود الرؤية للعنصر وحوافه العلوية واليسرى، حيث أن هذه الهوامش تُضبط تلقائيًا من قبل بعض المتصفحات لإضافة مساحة بين حدود الرؤية ضمن نافذة المتصفح ومحتوى الموقع، وتستطيع إزالة هذه الهوامش عن طريق ضبط الهوامش العلوية واليسرى للصندوق للقيمة صفر.

تستطيع كما هو الحال في الحدود والحاشية تحديد قيم الهوامش لاتجاهات معينة باستخدام ما يلي:

  • margin-left
  • margin-right
  • margin-top
  • margin-bottom

وقبل الانتهاء من هذه الفكرة أضف حاوية <div> أخرى ضمن الصفحة لدراسة تأثير الهوامش على تموضع عنصر قريب، ودون حذف محتوى الملف styles.css أضف قاعدة CSS التالية. 

.blue-div {
  height:100px;
  width:100px;
  background-color: blue;
}

احفظ الملف وعد إلى ملف index.html، وبدون حذف أي شيء أضف عنصر <div> لملفك وأسند له الصنف blue-div. 

<div class="blue-div"></div>

احفظ ملف index.html وأعد تحميله ضمن المتصفح لتظهر لك نتيجة مماثلة للصورة التالية.

كيفية تعديل حجم الهوامش لعنصر HTML باستخدام CSS

يجب أن يعرض المتصفح الآن صندوقًا أزرق بعرض 100 بكسل وارتفاع 100 بكسل، ويجب أن يكون هذا الصندوق أسفل الصندوق الأصفر ب 100 بكسل بدءًا من هوامش الصندوق الأصفر. سوف تُدفع العناصر المحيطة افتراضيًا بعيدًا عن العنصر بالاعتماد على الهوامش لكن يمكن أن تتقاطع الهوامش للعناصر المتجاورة بسبب تصادم الهوامش، ويُحدد حجم الهوامش المتصادمة حسب حجم الهامش الأكبر بين العنصرين المتصادمين.

الخلاصة

تعلمت في هذا المقال عن نموذج صندوق CSS وكيفية تعديل حجم كل من محتواه والحاشية والحدود والهوامش، حيث أن فهم سلوك هذه الخواص وكيفية ضبط قيمها مفيد عند تنظيم وتصميم محتوى صفحة ويب. سوف تجد أن هذه المعلومات مفيدة عند بناء موقع إلكتروني خاص بك في ما بقي من هذه السلسلة التعليمية، وفي المقال التالي سوف تضبط ملف index.html لتعمل كصفحة رئيسية للموقع الإلكتروني.

ترجمة -وبتصرّف- للمقال How To Adjust the Content, Padding, Border, and Margins of an HTML Element With CSS لصاحبه Erin Glass.

اقرأ أيضًا

]]>1911Thu, 02 Mar 2023 16:04:00 +0000كيفية تنسيق عنصر div في HTML باستخدام CSShttps://academy.hsoub.com/programming/css/%D9%83%D9%8A%D9%81%D9%8A%D8%A9-%D8%AA%D9%86%D8%B3%D9%8A%D9%82-%D8%B9%D9%86%D8%B5%D8%B1-div-%D9%81%D9%8A-html-%D8%A8%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-css-r1905/

سوف تتعرف في هذا المقال على كيفية تنسيق عنصر تقسيم المحتوى div في HTML باستخدام CSS، حيث يُستخدم عنصر <div> لهيكلة مخطط الصفحة وتقسيمها لمكونات منفصلة لتنسيق كل منها على حدا. سوف تُنشئ في هذا المقال تنسيقًا لعناصر <div> وسوف تتعلم كيفية إضافة وتنسيق عناصر أخرى داخل الحاوية <div>. سوف تُجهزك هذه المهارات لاستخدام عناصر <div> كأدوات تخطيط فيما يلي من مقالات ضمن هذه السلسلة عندما تبدأ ببناء موقعك الإلكتروني.

يُستخدم العنصر <div> من خلال إضافة وسم فتح <div> ووسم إغلاق <div/> ضمن ملف HTML، ويمتلك عنصر <div> بعض المؤثرات البصرية عند عرضه ضمن صفحة ويب، لكن لتخصيص الحجم واللون وغيرها من الخواص لعناصر <div> تستطيع تعيين قواعد التنسيق باستخدام CSS.

هذه المقالة هي واحدة من مقالات السلسلة التعليمية لكيفية إنشاء موقع إلكتروني بواسطة CSS وتتضمن هذه السلسلة المقالات التالية:

  1. كيفية بناء موقع باستخدام CSS
  2. كيفية فهم وإنشاء قواعد CSS
  3. كيفية تنسيق الصور باستخدام CSS
  4. كيفية إنشاء أصناف ومعرفات ID وأصناف زائفة في CSS
  5. كيفية تنسيق عنصر div في HTML باستخدام CSS
  6. كيفية تعديل حجم عنصر HTML والمساحة المحيطة به باستخدام CSS
  7. كيفية ضبط CSS و HTML لمشروع موقعك الإلكتروني
  8. كيفية تصميم جسم صفحة موقع إلكتروني باستخدام CSS
  9. كيفية بناء قسم الترويسة في موقعك الإلكتروني باستخدام CSS
  10. كيفية بناء قسم "عني" ضمن موقعك الإلكتروني باستخدام CSS
  11. كيفية بناء مخطط شبكي باستخدام CSS
  12. إضافة أقسام السيرة الذاتية وصندوق اقتباس لموقعك باستخدام CSS
  13. كيفية إنشاء تذييل ثابت باستخدام HTML و CSS

المتطلبات

لمتابعة هذا المقال تأكد من تجهيزك للملفات والمجلدات الضرورية كما هو مذكور ضمن المقال الأول من هذه السلسلة.

التعرف على العنصر <div> من خلال مثال عملي

لنجرب مثالًا عمليًا لدراسة كيفية عمل العنصر <div>، لذا امسح محتويات الملف styles.css (في حال أضفت له محتوى من المقالات التعليمية السابقة)، ثم أضف قاعدة CSS التالية لمحدد الوسم <div>. 

div {
 background-color: green; 
 height: 100px;
 width: 100px;
}

احفظ الملف styles.css ثم عد لملف index.html وامسح محتوياته (ما عدا السطر الأول للشيفرة الآتية: 

 <link rel="stylesheet" href="css/styles.css">

وأضف الشيفرة التالية له. 

<div></div>

لاحظ أن عنصر <div> يمتلك وسوم فتح وإغلاق ولا يتطلب أي محتوى، احفظ الملف index.html وأعد تحميله ضمن المتصفح. يجب أن تعرض صفحة الويب مربعًا أخضر اللون بطول 100 بكسل وعرض 100 بكسل كما هو مُحدد في قاعدة CSS.

استخدام العنصر <div>

لاحظ أنك تمتلك قاعدة تنسيق لعنصر <div> وبالتالي أي عنصر <div> تُضيفه للصفحة سوف يأخذ نفس التنسيق، لكن عند إنشاء موقع لا تريد غالبًا لجميع عناصر <div> أن تمتلك نفس التنسيق بنفس الطريقة، ولهذا السبب يُنشئ المطورون عادةً أصنافًا يستطيعون استخدامها لتنسيق عناصر <div> بطرق مختلفة.

امسح قاعدة CSS التي أنشأتها للتو وأضف مجموعات قواعد CSS الثلاث التالية ضمن ملف styles.css لتتدرب على إنشاء أصناف لعناصر <div>. 

.div-1 {
  background-color: blue; 
  height: 50px;
  width: 50px;
}

.div-2 {
  background-color: red; 
  height: 100px;
  width: 100px;
}

.div-3 {
  background-color: yellow; 
  height: 200px;
  width: 200px;
}

أنشأت في الشيفرة السابقة قواعد تنسيق لثلاث أصناف مختلفة هي div-1 و div-2 و div-3، ولاحظ أنك أضفت نقطة . قبل محدد الصنف وهو أمر مطلوب عند التصريح عن قاعدة CSS للأصناف. احفظ ملف styles.css وعد إلى ملف index.html ثم امسح عنصر <div> الذي أنشأته وأضف ثلاث عناصر <div> لهذا الملف وطبق صنفًا على كل عنصر يتوافق مع محددات صنف CSS التي عرفتها ضمن ملف styles.css. 

<div class="div-1"></div>
<div class="div-2"></div>
<div class="div-3"></div>

انتبه أنك أضفت الصنف كسمة لوسم <div> من خلال إضافة سمة الصنف class واسم الصنف لكل وسم افتتاح. احفظ الملف وأعد تحميله ضمن المتصفح، يجب أن يظهر لديك شكل مشابه لما يلي.

إضافة الصنف كسمة لوسم <div>

يجب أن تعرض صفحة الويب ثلاث عناصر <div> لكل منها تنسيق مختلف من حيث اللون والحجم متوافق مع قواعد CSS المعينة له، ولاحظ أن كل عنصر <div> يبدأ بسطر خاص به كون عناصر <div> هي عناصر على مستوى الكتلة وتمتلك هذا السلوك افتراضيًا.

إضافة وتنسيق نص ضمن الحاوية <div>

تستطيع وضع نص ضمن حاوية <div> من خلال إدخال نص بين وسمي الافتتاح والإغلاق <div>، لذا جرب إضافة نص في كل عنصر <div> ضمن ملف index.html. 

<div class="div-1">Blue</div>
<div class="div-2">Red</div>
<div class="div-3">Yellow</div>

احفظ الملف وأعد تحميله ضمن المتصفح ليعرض لك المتصفح نصًا في كل حاوية <div>.

إضافة وتنسيق نص ضمن الحاوية <div>

تستطيع إضافة عناصر HTML إضافية لنصك ضمن عناصر <div>، فعلى سبيل المثال جرّب إضافة وسوم عنوان HTML (<h2> حتى <h4>) لنصك ضمن وسوم <div> في ملف index.html. 

<div class="div-1"><h2>Blue</h2></div>
<div class="div-2"><h3>Red</h3></div>
<div class="div-3"><h4>Yellow</h4></div>

احفظ الملف وأعد تحميله ضمن المتصفح، يجب أن يكون تنسيق النص داخل الحاوية <div> موافق للخصائص الافتراضية لوسوم <h1> حتى <h4>.

نتائج إضافة وتنسيق نص ضمن الحاوية <div>

لاحظ أن مواضع عناصر <div> تعدلت قليلًا، وإعادة التموضع هذه سببها خواص الهوامش الافتراضية لعناصر <h2> حتى <h4>.

تستطيع تحديد قيم خصائص النص في حاويات <div> لتعديل تنسيقها من خلال مجموعات القواعد لأصناف <div>، لذا جرّب إضافة خصائص وقيم لمجموعات القواعد ضمن ملف styles.css كما هو موضح في الشيفرة التالية. 

.div-1 {
  background-color: blue; 
  height: 50px;
  width: 50px;
  font-size: 10px; 
  color: white;
}

.div-2 {
  background-color: red; 
  height: 100px;
  width: 100px;
  font-size: 20px; 
  color: yellow; 
}

.div-3 {
  background-color: yellow; 
  height: 200px;
  width: 200px;
  font-size:30px;   
  color: blue; 
}

احفظ ملف styles.css وأعد تحميل ملف index.html ضمن المتصفح، يجب أن يكون للنص داخل حاويات <div> تنسيق حسب قواعد CSS الموجودة ضمن ملف styles.css.

نتاج إضافة وتنسيق نص ضمن الحاوية <div>

الخلاصة

تعرفت في هذا المقال كيفية تنسيق لون وحجم عنصر <div> وكيفية إضافة تنسيق لنص داخل عنصر <div>، وسوف تستخدم عنصر <div> للتحكم بتخطيط الصفحة عندما تبدأ ببناء موقعك الإلكتروني، أما في المقال التالي فسوف تتعلم عن نموذج صندوق CSS وكيفية استخدامه لتعديل حجم محتوى عنصر والحدود والهوامش والحشوة.

ترجمة -وبتصرّف- للمقال How To Style the HTML <div> element with CSS لصاحبه Erin Glass.

اقرأ أيضًا

]]>1905Mon, 27 Feb 2023 16:03:00 +0000كيفية إنشاء أصناف ومعرفات ID وأصناف زائفة في CSShttps://academy.hsoub.com/programming/css/%D9%83%D9%8A%D9%81%D9%8A%D8%A9-%D8%A5%D9%86%D8%B4%D8%A7%D8%A1-%D8%A3%D8%B5%D9%86%D8%A7%D9%81-%D9%88%D9%85%D8%B9%D8%B1%D9%81%D8%A7%D8%AA-id-%D9%88%D8%A3%D8%B5%D9%86%D8%A7%D9%81-%D8%B2%D8%A7%D8%A6%D9%81%D8%A9-%D9%81%D9%8A-css-r1904/

سوف تُنشئ في هذا المقال محدد صنف CSS والذي يسمح لك بتطبيق قواعد CSS لعناصر HTML التي تمتلك هذا الصنف فقط، إن محددات صنف CSS مفيدة عندما تريد تطبيق قواعد تصميم مختلفة على نُسخ مختلفة من نفس عنصر HTML، أيضًا سوف تتعرف على كيفية إنشاء معرفات ID وأصناف زائفة في CSS.

هذه المقالة هي واحدة من مقالات السلسلة التعليمية لكيفية إنشاء موقع إلكتروني بواسطة CSS وتتضمن هذه السلسلة المقالات التالية:

  1. كيفية بناء موقع باستخدام CSS
  2. كيفية فهم وإنشاء قواعد CSS
  3. كيفية تنسيق الصور باستخدام CSS
  4. كيفية إنشاء أصناف ومعرفات ID وأصناف زائفة في CSS
  5. كيفية تنسيق عنصر div في HTML باستخدام CSS
  6. كيفية تعديل حجم عنصر HTML والمساحة المحيطة به باستخدام CSS
  7. كيفية ضبط CSS و HTML لمشروع موقعك الإلكتروني
  8. كيفية تصميم جسم صفحة موقع إلكتروني باستخدام CSS
  9. كيفية بناء قسم الترويسة في موقعك الإلكتروني باستخدام CSS
  10. كيفية بناء قسم "عني" ضمن موقعك الإلكتروني باستخدام CSS
  11. كيفية بناء مخطط شبكي باستخدام CSS
  12. إضافة أقسام السيرة الذاتية وصندوق اقتباس لموقعك باستخدام CSS
  13. كيفية إنشاء تذييل ثابت باستخدام HTML و CSS

المتطلبات

لمتابعة هذا المقال تأكد من تجهيزك للملفات والمجلدات الضرورية كما هو مذكور ضمن المقال الأول.

كيف تعمل محددات صنف CSS

يسمح محدد صنف CSS تعيين قواعد تصميم لعناصر HTML التي أسندت لها الصنف بدلًا من جميع النسخ التابعة لعنصر HTML معين، وعلى عكس عناصر HTML (مثل <p> أو <h1> أو <img>) التي تملك أسماء مُعرفة مسبقًا فإن أسماء الأصناف تُعين من قبل المطور عند إنشاء الصنف، وتُسبق هذه الأسماء دائمًا بنقطة . مما يُساعدك على التمييز بين محددات الوسم ومحددات الصنف ضمن ملفات CSS.

تُكتب قاعدة محدد الصنف بنفس الطريقة التي تُكتب فيها قاعدة محدد الوسم مع اختلاف بسيط وهو وجود نقطة . تسبق اسم الصنف. 

.red-text {
  color: red;
}

يجب عليك تحديد الصنف ضمن وسم البداية لعنصر HTML لتتمكن من استخدام هذا الصنف عند إضافة محتوى HTML لصفحة الويب، وذلك باستخدام السمة class ضمن ملف HTML. 

<h1 class=".red-text">Content.</element>

إنشاء قاعدة CSS باستخدام محدد الصنف

لنبدأ التعلم العملي لاستخدام أصناف CSS، لذا امسح كل محتويات ملف styles.css وأضف الشيفرة التالية لتعيين قاعدة للصنف red-text. 

.red-text {
  color: red;
}

احفظ الملف بعد إضافة الشيفرة السابقة لملف styles.css.

عد الآن لملف index.html وامسح كل شيء ما عدا السطر الأول من الشيفرة الآتية: 

 <link rel="stylesheet" href="css/styles.css">

والذي يربط هذا الملف مع ملف قواعد CSS ثم أضف شيفرة HTML التالية. 

<p class="red-text">Here is the first sample of paragraph text.</p>

لاحظ هنا أن اسم الصنف غير مسبوق بنقطة . كما هو الحال عند استخدامه كمحدد لقاعدة CSS، والآن يجب أن يتضمن ملف index.html المحتوى التالي. 

<link rel="stylesheet" href="css/styles.css">
<p class="red-text"> Here is the first sample of paragraph text.</p>

أضفت باستخدام الشيفرة السابقة نصًا باستخدام الوسم <p>، وعرفت أيضًا الصنف red-text من خلال إضافة صنف class كالتالي class="red-text" ضمن وسم البداية في <p>.

احفظ ملف index.html وحمله ضمن المتصفح. يجب أن تظهر لك صفحة الويب مع نص أحمر اللون.

إنشاء قاعدة CSS باستخدام محدد الصنف

لنُضف الآن صنف CSS إضافي للتعرف أكثر على خيارات التصميم المختلفة لمحتوى نص الوسم <p> باستخدام أصناف مختلفة، أضف الشيفرة التالية لملف styles.css (مباشرةً بعد قاعدة CSS للصنف red-text). 

.yellow-background-text {
  background-color: yellow;
}

إن قاعدة CSS السابقة تُصرح أن الصنف yellow-background-text يمتلك القيمة yellow للخاصية background-color، وأي عنصر نص HTML يمتلك هذا الصنف سوف يمتلك خلفية صفراء اللون. لاحظ أن استخدام كلمة text ضمن الصنف yellow-background-*text*‎ هي بغرض تسهيل القراءة من قبل المطور فقط، ولست بحاجة لتضمين كلمة text ضمن أسماء الأصناف للأصناف التي تريد تعيينها لنص HTML.

الآن لاستخدام صنف CSS الجديد عليك العودة إلى ملف index.html وإضافة سطر الشيفرة التالي في نهايته. 

<p class="yellow-background-text"> Here is the second sample of paragraph text.</p>

أضفت في الشيفرة السابقة بعض المحتوى النصي ضمن عنصر <p> وخصصت له الصنف yellow-background-text، لذا عليك حفظ الملف وإعادة تحميله ضمن المتصفح، ليعرض لك صفحة ويب تتضمن عبارتين مختلفتين الأولى بلون أحمر والثانية بخلفية صفراء اللون.

استخدام الصنف yellow-background-text في <p>

تستطيع إضافة أكثر من صنف واحد لوسم HTML، لذا حاول إضافة كل من الصنفين السابقين ضمن عنصر نص واحد من خلال إضافة السطر التالي لملف index.html. 

<p class="red-text yellow-background-text">Here is a third sample of text.</p>

انتبه إلى أن الفاصل بين أسماء الأصناف هو فراغ فقط، ثم احفظ الملف وأعد تحميله ضمن المتصفح ليظهر لك التالي.

استخدام الصنف yellow-background-text

يجب أن يكون السطر الثالث من النص مُنسقًا حسب قيم الخاصية المضبوطة في الصنف red-text والصنف yellow-background-text ليكون لون النص أحمر والخلفية صفراء.

إضافة أصناف CSS للصور

يُمكن تطبيق أصناف CSS على عناصر HTML أخرى مثل الصور، وللتعرف على كيفية استخدام أصناف CSS مع الصور عليك مسح محتوى الملف styles.css وإضافة الشيفرة التالية. 

.black-img {
  border: 5px dotted black;
  border-radius: 10%;
}

.yellow-img {
  border: 25px solid yellow;
  border-radius: 50%;
}

.red-img {
  border: 15px double red;
}

أنشأت هنا قواعد CSS لثلاث أصناف مختلفة يمكن تطبيقها على الوسم <img>، لكن قبل متابعة الخطوات لنلخص ما صرحنا عنه في كل مجموعة قواعد.

  • تُصرح أول مجموعة قواعد CSS أن الصنف black-img يجب أن يمتلك حدود سوداء اللون black مُنقطة dotted بعرض 5 بكسل وقطر الحدود border-radius بحجم 10% مما يُعطي حدودًا منحنية للعنصر.
  • تُصرح ثاني مجموعة قواعد CSS أن الصنف yellow-img يجب أن يمتلك حدود صفراء اللون yellow مُستمرة solid بعرض 25 بكسل وقطر الحدود border-radius بحجم 50% مما يُعطي حدودًا دائرية الشكل للعنصر.
  • تُصرح ثالث مجموعة قواعد CSS أن الصنف red-img يجب أن يمتلك حدود حمراء اللون red مُكررة double بعرض 15 بكسل وهنا لم تضبط قطر الحدود لذلك سوف تتبع الحدود شكل العنصر.

احفظ الملف styles.css ثم امسح محتويات الملف index.html ما عدا السطر الأول الآتي: 

<link rel="stylesheet" href="css/styles.css">

وأضف الشيفرة التالية. 

<img src="https://css.sammy-codes.com/images/small-profile.jpeg" class="black-img">
<img src="https://css.sammy-codes.com/images/small-profile.jpeg" class="yellow-img">
<img src="https://css.sammy-codes.com/images/small-profile.jpeg" class="red-img">

يُضيف كل سطر من سطور HTML الثلاث السابقة صورة لملف HTML وتُعين صنفًا لهذه الصورة من الأصناف الثلاث التي أضفتها ضمن ملف styles.css. لاحظ أن مصدر الصورة هو من شبكة الإنترنت لكنك تستطيع استخدام صورة خاصة بك من خلال تعيين مسار الملف.

احفظ الملف index.html وأعد تحميله ضمن المتصفح ليعرض لك نتيجةً مشابهة.

إضافة أصناف CSS للصور

يجب أن تعرض صفحة الويب الخاصة بك ثلاث صور لكل منها تصميم مختلف بمواصفات خاصة حسب الصنف المُسند لها.

جرّب الآن استخدام أصناف جديدة لمتابعة التعرف على أصناف CSS مع استخدام قواعد CSS مختلفة وتطبيقها على أنواع مختلفة من وسوم HTML. انتبه أن الخواص والقيم المُحددة ضمن كتلة التصريح عن صنف سوف تعمل فقط على العناصر الموافقة لها والتي تتضمن هذا الصنف، فعلى سبيل المثال إن التصريح font-color لن يُغير لون حدود الصورة، و خاصية الارتفاع height لن تُغير من حجم الخط.

أصبحت تعلم الآن كيفية إنشاء أصناف وتعيين خصائص وقيم معينة لها مع استخدامها على محتوى الصور والنصوص، وسوف تستخدم من جديد هذه الأصناف عندما تبدأ ببناء موقع إلكتروني ضمن النصف الثاني من هذه السلسلة التعليمية.

كيفية إنشاء معرفات ID في CSS

سوف تُنشئ في هذا القسم محددات المعرف ID في CSS وتتعلم كيفية استخدامها والفائدة منها عند بناء موقع إلكتروني باستخدام CSS و HTML.

تعمل محددات المعرف ID في CSS بطريقة مشابهة لآلية عمل محددات الأصناف، حيث تسمح لك بإنشاء قواعد CSS يُمكن تطبيقها على عناصر HTML التي تمتلك سمة المعرف ID الفريدة، وكما هو الحال في الأصناف فإن أسماء المعرفات ID يختارها المطور عند إنشاء قاعدة CSS تستخدم محدد المعرف، لكن تختلف المعرفات ID عن الأصناف بأنك تستطيع استخدام المعرف ID مرة واحدة فقط ضمن ملف HTML، ولهذا سوف تُعرف معرفات IDs للعناصر التي تظهر ضمن صفحة مرة واحدة مثل الشعار أو عنوان الموقع أو القائمة، وعمومًا فإن معرفات CSS تُستخدم بقلة.

إنشاء محدد ID في CSS

عند إنشاء قاعدة CSS لمعرف ID فإن اسم المعرف ID يُسبق بإشارة #. 

#my-first-id {
  color: blue;
}

أنشأت في الشيفرة السابقة معرفًا بالاسم my-first-id وصرحت أن عنصر HTML النصي الذي يمتلك هذا المعرف سوف يكون أزرقًا. سوف نتعرف أكثر على كيفية عمل المعرفات من خلال مثال عملي.

احذف محتويات الملف styles.css وأضف قاعدة CSS المذكورة في الأعلى ضمن الملف styles.css واحفظه.

عد الآن إلى ملف index.html واحذف محتوياته، ما عدا السطر الأول من الشيفرة الآتية: 

 <link rel="stylesheet" href="css/styles.css">

ثم أضف الشيفرة التالية. 

<p id="my-first-id">This text is styled using a CSS ID.</p>

احفظ الملف وأعد تحميله ضمن المتصفح، يجب أن يظهر محتوى الصفحة لك كالتالي.

إنشاء محدد ID في CSS

أنشأت في هذا التمرين معرف ID وهو my-first-id ضمن ملف styles.css ثم طبقته على المحتوى النصي في ملف index.html باستخدام سمة المعرف. تستطيع إنشاء واستخدام المعرفات لأي نوع محتوى HTML مثل الصور وعناصر <div>.

تعرفت على طريقة إنشاء واستخدام المعرفات لتنسيق العناصر التي تظهر مرة واحدة فقط ضمن صفحة الويب، وفي القسم التالي سوف تتعلم عن أصناف CSS الزائفة وهي نوع خاص من الأصناف يُفعل من خلال حالة معينة تنشط وفقًا لسلوك المستخدم.

كيفية إنشاء أصناف زائفة في CSS

سوف تُنشئ في هذا القسم أصناف CSS الزائفة وتتعلم كيفية استخدامها والغاية منها، كما أنك سوف تتدرب على كيفية استخدام الصنف الزائف hover: الذي يسمح لك تغيير تصميم العنصر عند تحريك محدد الفأرة فوقه.

إن الأصناف الزائفة هي أصناف CSS تُفعل خلال حالات معينة، فعلى سبيل المثال إن الصنف الزائف hover: يُمكن استخدامه لتغيير مظهر عنصر صورة أو نص عند تحريك محدد الفأرة فوق هذا العنصر، ويُستخدم الصنف الزائف visited: لتغيير لون رابط بعد أن ضغط عليه المستخدم.

يُصرح عن الأصناف الزائفة في CSS بوضع : واسم الصنف الزائف بعد محدد الوسم أو الصنف أو المعرف، ليُطبق هذا الصنف تلقائيًا على أي محتوى HTML يتضمن الوسم أو الصنف أو المعرف الخاص بالمحدد، ولا حاجة لإضافة أي شيفرة إضافية لعنصر HTML ليعمل الصنف الزائف.

استخدام الصنف الزائف في CSS

لنجرب مثالًا عمليًا يُساعدك في التعرف على آلية عمل الأصناف الزائفة. احذف جميع محتويات ملف styles.css وأضف الصنف الزائف التالي للملف. 

img:hover {
 border: 10px solid red;
}

أضفت في الشيفرة السابقة صنفًا زائفًا يُدعى hover: لمحدد الوسم <img>، لذا احفظ الملف الآن وعد إلى ملف index.html واحذف محتوياته، ما عدا السطر الأول من الشيفرة الآتية: 

 <link rel="stylesheet" href="css/styles.css">

ثم أضف الشيفرة التالية لهذا الملف. 

<img src="https://css.sammy-codes.com/images/small-profile.jpeg">

احفظ ملف index.html ثم أعد تحميله ضمن المتصفح لتظهر لديك نتيجة مشابهة لما يلي.

استخدام الصنف الزائف في CSS

يجب أن تعرض صفحة صورة Sammy the shark، وعند تحريك محدد الفأرة فوق الصورة سوف تظهر حدود حمراء اللون بعرض 10 بكسل حول الصورة، وذلك لأن المتصفح يُطبق تلقائيًا الصنف الزائف hover: عند تفاعل المحدد مع عنصر img حسب القاعدة التي أضفتها ضمن ملف styles.css.

تستطيع استخدام الصنف الزائف hover: ضمن عناصر النص، ولعمل هذا عليك مسح كل شي ضمن ملف styles.css وإضافة الصنف الزائف في الشيفرة التالية. 

p:hover {
  font-size:100px;
  color:red;
}

احفظ الملف styles.css ثم عد إلى ملف index.html واحذف محتوياته، ما عدا السطر الأول من الشيفرة 

 <link rel="stylesheet" href="css/styles.css">

ثم أضف الشيفرة التالية. 

<p>Some text</p>

احفظ الملف ثم أعد تحميله ضمن المتصفح وتحقق من النتائج، يحب أن تحصل على صفحة تتضمن النص Some text يتغير لونه وحجمه عند تحريك المحدد فوقه.

نتاج استخدام الصنف الزائف في CSS

الخلاصة

تعرفت في هذا المقال على كيفية استخدام أصناف ومعرفات CSS إضافةً إلى الأصناف الزائفة والغاية منها، ورأيت آلية العمل من خلال تمارين طبقت فيها بعض الأصناف والمعرفات على عناصر الصورة والنص في HTML. سوف تستخدم هذه الأصناف لبناء التذييل للموقع الإلكتروني الذي سوف تُنشئه إن تابعت النصف الثاني من هذه السلسلة التعليمية.

سوف تتعلم في المقال التالي كيفية إنشاء وتنسيق عنصر <div> في HTML الذي يُستخدم لهيكلة مخطط صفحة ويب.

ترجمة -وبتصرّف- للمقالات How To Create Classes With CSS و How To Create IDs with CSS و How To Create Pseudo-classes With CSS لصاحبها Erin Glass.

اقرأ أيضًا

]]>1904Sun, 26 Feb 2023 16:02:00 +0000كيفية تنسيق الصور باستخدام CSShttps://academy.hsoub.com/programming/css/%D9%83%D9%8A%D9%81%D9%8A%D8%A9-%D8%AA%D9%86%D8%B3%D9%8A%D9%82-%D8%A7%D9%84%D8%B5%D9%88%D8%B1-%D8%A8%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-css-r1882/

سوف تتعلم في هذا المقال كيفية تنسيق الصور باستخدام CSS لإضافة حدود وتغيير شكل وحجم الصورة، إذ يسمح لك استخدام CSS لتنسيق الصور تحديد كيف يجب أن تظهر الصورة ضمن الموقع باستخدام بضع قواعد CSS.

هذه المقالة هي واحدة من مقالات السلسلة التعليمية لكيفية إنشاء موقع إلكتروني بواسطة CSS وتتضمن هذه السلسلة المقالات التالية:

  1. كيفية بناء موقع باستخدام CSS
  2. كيفية فهم وإنشاء قواعد CSS
  3. كيفية تنسيق الصور باستخدام CSS
  4. كيفية إنشاء أصناف ومعرفات ID وأصناف زائفة في CSS
  5. كيفية تنسيق عنصر div في HTML باستخدام CSS
  6. كيفية تعديل حجم عنصر HTML والمساحة المحيطة به باستخدام CSS
  7. كيفية ضبط CSS و HTML لمشروع موقعك الإلكتروني
  8. كيفية تصميم جسم صفحة موقع إلكتروني باستخدام CSS
  9. كيفية بناء قسم الترويسة في موقعك الإلكتروني باستخدام CSS
  10. كيفية بناء قسم "عني" ضمن موقعك الإلكتروني باستخدام CSS
  11. كيفية بناء مخطط شبكي باستخدام CSS
  12. إضافة أقسام السيرة الذاتية وصندوق اقتباس لموقعك باستخدام CSS
  13. كيفية إنشاء تذييل ثابت باستخدام HTML و CSS

المتطلبات

لتتمكن من متابعة هذا المقال تأكد من تجهيزك للمجلدات والملفات المطلوبة كما هو مشروح في مقالٍ سابق ضمن هذه السلسلة

إضافة صور لملف index.html

أولًا عليك إضافة صورة لمجلد images، إذ تستطيع استخدام أي صورة بصيغة JPEG/JPG أو PNG، وليعمل هذا التمرين بأفضل صورة عليك اختيار صورة أبعادها ضمن المجال 150-200 بكسل و 150-200 بكسل للعرض والطول.

بعد اختيارك لصورة ما احفظها ضمن المجلد images بالاسم small-profile.jpeg، ففي حال حفظتها باسم آخر عليك تعديل مسار ملف الصورة ضمن الخطوة التالية.

احذف الآن أي محتوى ضمن الملف index.html ما عدا السطر الأول من الشيفرة الآتية: 

 <link rel="stylesheet" href="css/styles.css">

وأضف الشيفرة التالية. 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">

تستخدم الشيفرة أعلاه الوسم <img> لإضافة صورة وإعلام المتصفح بموقع ملف الصورة (images/small-profile.jpeg)، لذا تأكد من أن مسار الصورة صحيح وغيره إلى المسار الصحيح في حال استخدام اسم مختلف للصورة.

اقتباس

لنسخ مسار ملف الصورة باستخدام برنامج Visual Studio Code، حرك مؤشر الفأرة فوق ملف الصورة ضمن اللوحة اليُسرى واضغط على CTRL ثم زر الفأرة الأيسر (نظام ماك) أو زر الفأرة الأيمن (نظام ويندوز) واختر Copy Path.

إضافة صور لملف index.html

أضفت أيضًا النص البديل Sammy the Sahrk باستخدام السمة alt، حيث عند تصميم موقع إلكتروني يجب إضافة النص البديل لجميع الصور لدعم إمكانية الوصول للموقع من قبل الأفراد الذين يستخدمون تطبيقات قراءة الشاشة.

احفظ ملف index.html وأعد تحميله ضمن المتصفح لتظهر لك صفحة بيضاء تعرض الصورة التي استخدمتها.

عرض صور لملف index.html

إن لم تُعرض صورتك عليك التحقق من أخطاء ضمن الشيفرة والتأكد من استخدام المسار الصحيح للصورة.

إضافة تنسيق للصور

طالما أن ملف index.html يعرض الصور التي اخترتها، سوف تُضيف قاعدة CSS لتنسيق الصورة لذا احذف محتويات الملف styles.css (إن كان يتضمن شيفرة من المقالات السابقة) وأضف القاعدة التالية في أسفل الملف. 

img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}

احفظ الملف styles.css وأعد تحميل الملف index.html ضمن المتصفح، يجب أن تظهر لك الآن الصورة مع خواص التنسيق الجديدة.

عرض صور لملف index.html بخصائص css

حددت في قاعدة CSS السابقة القيم لثلاث خواص مختلفة للعنصر <img>، وهنا سوف نتوقف للحظة لمعاينة الخواص والقيم المختلفة.

  • خاصية border تسمح لك بإضافة حدود للصورة وتخصيص حجم وتصميم ولون الحدود، ولاحظ أنك تستطيع إضافة عدة قيم لخاصية CSS هذه، إذ حدد في القاعدة حدود حمراء اللون red مستمرة solid وبعرض 2px.
  • خاصية border-radius تُعرف قطر زاوية العنصر مما يسمح لك بالحصول على حواف دائرية للعنصر، وفي هذه القاعدة حدد حجم القطر ب 8 بكسل. جرب تغيير هذه القيمة لتتعرف على كيفية تأثر حواف الصورة بها.
  • تُعرف خاصية width عرض الصورة، وفي هذه القاعدة حددت عرض الصورة ليكون 200 بكسل، ولاحظ في حال عدم تحديد قيمة ارتفاع الصورة سوف يُعدل ارتفاع الصورة ليتناسب مع نسبة عرض لارتفاع الصورة تلقائيًا. أيضًا جرب تغيير قيمة كل من الارتفاع والعرض بنفس الوقت لمعرفة ما سوف يحصل.

تعلم كيفية تطبيق التصميم على جميع الصور

انتبه أنه في حال أضفت صورًا إضافية لملف HTML سوف تمتلك هذه الصور نفس التصميم، ولدراسة كيفية عمل هذه القواعد أضف صورة ثانية لملف index.html باستخدام عنصر <img> (تستطيع نسخ ولصق عنصر <img> الأول إن كنت لا تملك صورة ثانية). 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot"> 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">

تأكد من تغيير قسم src للمسار الصحيح لملف الصورة ثم احفظ ملف index.html وأعد تحميله ضمن المتصفح، يجب أن تعرض صفحة الويب الآن صورتين بنفس التصميم ونفس قواعد CSS للوسم <img>.

نتيجة تغيير قسم src للمسار الصحيح لملف الصورة

تستطيع متابعة استكشاف الخيارات الممكنة للصور من خلال تغيير قيم قاعدة CSS التي أنشأتها ضمن ملف styles.css ثم حفظ الملف وإعادة تحميل ملف index.html والتحقق من النتائج.

الخلاصة

تعرفت في هذا المقال على كيفية تنسيق صورة باستخدام CSS من خلال تعديل حجم الحدود ولونها وظهور الصورة وارتفاعها وعرضها وحتى قطر الحدود، وسوف يكون لك عودة لتصميم الصورة عندما تبدأ ببناء موقعك الإلكتروني في النصف الثاني من هذه السلسلة التعليمية.

أصبحت الآن معتادًا على تطبيق مجموعة قواعد تصميم على جميع عناصر وسم <img> وربما تتساءل كيفية تطبيق قواعد تصميم مختلفة لوسوم فردية أو مجموعة وسوم <img>، لذا سوف تتعلم في المقال التالي كيفية إنشاء أصناف CSS التي تسمح للمطورين ترتيب عناصر HTML ضمن أصناف مختلفة تمتلك قواعد CSS مختلفة.

ترجمة -وبتصرّف- للمقال How To Style Images With CSS لصاحبه Erin Glass.

اقرأ أيضًا

]]>1882Sun, 19 Feb 2023 16:09:00 +0000كيفية فهم وإنشاء قواعد CSShttps://academy.hsoub.com/programming/css/%D9%83%D9%8A%D9%81%D9%8A%D8%A9-%D9%81%D9%87%D9%85-%D9%88%D8%A5%D9%86%D8%B4%D8%A7%D8%A1-%D9%82%D9%88%D8%A7%D8%B9%D8%AF-css-r1881/

سوف تتعلم في هذا المقال كيفية فهم وإنشاء قواعد CSS (المعروفة أيضًا بمجموعة القواعد) للتصميم والتحكم بمُخطط محتوى HTML، سوف يبدأ هذا المقال بمثال عن قاعدة CSS التي تجعل عناصر HTML ذات الوسم <h1> باللون الأزرق وذلك لتتطلع على كيفية عمل قواعد CSS في الميدان قبل شرح كل مكون من مكونات قاعدة CSS.

هذه المقالة هي واحدة من مقالات السلسلة التعليمية لكيفية إنشاء موقع إلكتروني بواسطة CSS وتتضمن هذه السلسلة المقالات التالية:

  1. كيفية بناء موقع باستخدام CSS
  2. كيفية فهم وإنشاء قواعد CSS
  3. كيفية تنسيق الصور باستخدام CSS
  4. كيفية إنشاء أصناف ومعرفات ID وأصناف زائفة في CSS
  5. كيفية تنسيق عنصر div في HTML باستخدام CSS
  6. كيفية تعديل حجم عنصر HTML والمساحة المحيطة به باستخدام CSS
  7. كيفية ضبط CSS و HTML لمشروع موقعك الإلكتروني
  8. كيفية تصميم جسم صفحة موقع إلكتروني باستخدام CSS
  9. كيفية بناء قسم الترويسة في موقعك الإلكتروني باستخدام CSS
  10. كيفية بناء قسم "عني" ضمن موقعك الإلكتروني باستخدام CSS
  11. كيفية بناء مخطط شبكي باستخدام CSS
  12. إضافة أقسام السيرة الذاتية وصندوق اقتباس لموقعك باستخدام CSS
  13. كيفية إنشاء تذييل ثابت باستخدام HTML و CSS

المتطلبات

لتتمكن من متابعة هذا المقال تأكد من أنك ضبطت المجلدات والملفات الضرورية كما هو مشروح في المقال السابق.

الاطلاع على مثال عن قاعدة CSS

تجد في الأسفل مثالًا عن قاعدة CSS، اكتب القاعدة التالية ضمن الملف styles.css. 

h1 {
  color: blue;
}

احفظ الملف styles.css، وانتبه لوجود مسافة بادئة قبل color:blue بقيمة فراغين، ويُنصح باستخدام المسافة البادئة باعتبارها عُرف عند كتابة قواعد CSS يجعلها أسهل للقراءة من قبل المطورين. تطلب الشيفرة التي أضفتها للتو من المتصفح إعطاء اللون الأزرق لأي نص موجود ضمن الوسم <h1>.

أضف الآن جزءًا من محتوى HTML موسومًا بالعنصر <h1> ضمن الملف index.html، وذلك أسفل السطر الآتي: 

 <link rel="stylesheet" href="css/styles.css">

تمامًا في أعلى الملف. 

<h1>A Sample Title</h1>

احفظ الملف وحمل ملف HTML ضمن المتصفح ثم تحقق من النتائج، حيث يجب أن تحصل على النتيجة في الصورة التالية ضمن متصفحك. إن لم تحصل على نفس النتيجة، تحقق من أنك حفظت كل من الملفين index.html و styles.css وأن الشيفرة خالية من الأخطاء.

نتائج الشيفرة السابقة

كيفية فهم عناصر قاعدة CSS

لنتفحص الآن مثال قاعدة CSS لفهم كل من مكوناتها المختلفة، إذ إن قاعدة CSS عمومًا مؤلفة من محدد وكتلة تعريف وخصائص وقيم، يوضح الشكل التالي تمثيل كل من الأجزاء السابقة ضمن القاعدة.

كيفية فهم عناصر قاعدة CSS

لنلق نظرة الآن على كل من هذه الأجزاء وعلاقتها مع مثال قاعدة CSS.

  • يُشير المحدد إلى نوع المحتوى الذي سوف يُصمم باستخدام قاعدة CSS ويوضع في بداية قاعدة CSS وخارج الأقواس، وفي مثالنا فإن المحدد هو الوسم <h1> وهو عنصر HTML. سوف نتعلم أنواع محددات أخرى ضمن السلسلة التعليمية.
  • كتلة التعريف هي الجزء المسؤول عن تعريف قاعدة التصميم للمحدد ضمن قاعدة CSS، وتوضع هذه الكتلة ضمن أقواس مجموعة، بالنسبة لمثالنا فإن كتلة التعريف هي ;color:blue.
  • تُشير الخاصية إلى خاصية محتوى HTML الذي سوف تُعدله قاعدة CSS مثل color أو font-size، وفي مثالنا فإن الخاصية هي color ولاحظ وجود فاصلة منقوطة بعد الخاصية.
  • تُشير القيمة إلى قيمة مُحددة مُسندة إلى الخاصية مثل 16px أو blue، وفي مثالنا فإن القيمة هي blue وانتبه لوجود فاصلة منقوطة في نهاية القيمة.

حال التصريح عن قاعدة لمحدد سوف يُعرض كل جزء من محتوى HTML الذي يتضمن ذلك المحدد حسب القاعدة لكن هناك استثناءات يُمكن أن تظهر عند وجود قواعد CSS متعارضة حيث تُعطى الأولوية لقاعدة على الأخرى.

كيفية التصريح عن قيم لعدة خواص في قاعدة CSS

سوف تتعلم في هذا المقال كيفية التصريح عن القيم لعدة خواص ضمن قاعدة CSS، إذ يسمح لك هذا باستخدام العديد من تعليمات التصميم مثل الحجم واللون والمحاذاة لعنصر واحد في خطوة واحدة. سوف تتعرف أيضًا على كيفية إنشاء قواعد CSS متنوعة تسمح لك بتطبيق تصاميم مختلفة لأقسام مختلفة من المحتوى ضمن ملف HTML.

إنشاء قاعدة CSS تتضمن تصريحات متعددة

لإضافة أكثر من تصريح واحدة ضمن قاعدة CSS حاول تعديل قاعدة <h1> ضمن ملف styles.css (أو أضف الشيفرة التالية كاملةً إن كنت غير متابع للسلسلة منذ البداية) ليتضمن التصريحات المُشار لها في الشيفرة التالية. 

h1 {
  color: blue;
  font-size: 100px;
  font-family: Courier;
  text-align: center;
}

احفظ الملف وأعد تحميل ملف HTML ضمن المتصفح، يجب أن يكون النص ظاهرًا في منتصف الصفحة وحجمه 100 بكسل ونوع الخط Courier.

ظهور نص الشيفرة

سوف تُضيف في القسم التالي المزيد من قواعد CSS لزيادة خيارات التصميم الممكنة لمحتوى صفحة ويب.

إنشاء قواعد CSS متعددة للتحكم بتصميم محتوى HTML

سوف تُضيف في هذا القسم بعض النصوص لملف index.html باستخدام الوسم <p>، وسوف تُعدل خواصه باستخدام مجموعة قواعد جديدة ل CSS تُطبق فقط على وسوم <p>. أضف السطر الذي يتضمن <p>Some paragraph text</p> ضمن الملف index.html أسفل السطر الموجود <h1>A sample title<h1> والذي أضفته في المقال السابق. 

<h1>A sample title</h1>
<p>Some paragraph text</p>

احفظ ملف index.html وأعد تحميله ضمن المتصفح للتحقق من طريقة عرض الملف، حيث يجب أن يُعالج متصفحك العنوان باللون الأزرق ويعرض الفقرة كما يظهر في الصورة التالية.

التحقق من طريقة عرض ملف html

لنُضف الآن قاعدة CSS لتصميم العنصر <p>، وذلك بالعودة للملف styles.css وإضافة مجموعة القواعد التالية في أسفل الملف. 

p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

احفظ الملف وأعد تحميله ضمن نافذة المتصفح للتحقق من كيفية عرض الملف، حيث يجب أن يتضمن نص <p> التصميم الذي صرحت عنه في قاعدة CSS السابقة.

003_styled-header-and-paragraph.png

الآن يوجد لديك قواعد CSS لكل من <h1> و <p> وأي نص تُحيطه بهذه الوسوم ضمن ملف HTML سوف يأخذ نفس التصميم الذي صرحت عنه في هذه العناصر ضمن ملف styles.css.

تدريب عملي إضافي

إن أردت المزيد من التدريب على قواعد CSS حاول إنشاء مجموعة قواعد CSS لنصوص موجودة ضمن عناصر HTML مختلفة مثل <h2> و <h3> و <h4> واستخدمها لتعديل النص ضمن ملف index.html، وإن كنت لا تدري كيف تبدأ بها تستطيع نسخ قواعد CSS الموجودة في المثال التالي وإضافتها لملف styles.css الذي لديك. 

h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}

احفظ الملف ثم أضف محتوى HTML التالي لملف index.html. 

<h2> This is red text with a size of 40 pixels. </h2>
<h3> This is purple text with a size of 50 pixels. </h3>
<h4> This is green text with a size 60 pixels. </h4>

احفظ الملف وأعد تحميل ملف index.html ضمن المتصفح، حيث يجب أن تظهر لك النتائج التالية.

نتائج تعديلات css على الصفحة

الخلاصة

تعرفت في هذا المقال على جميع المكونات التي تحتاجها لكتابة قاعدة CSS كاملة والتي تضمنت المحدد وكتلة التعريف والخواص والقيم، وضمن القسم التالي سوف تُضيف عدة خواص لقاعدة CSS وسوف تُنشئ قواعد CSS مُختلفة لملف HTML واحد، كما أنك تدربت على تخصيص القيم لعدة خواص باستخدام CSS، وتستطيع الآن إنشاء عدة قواعد CSS لتصميم تنسيق محتوى النص في ملف HTML، كما أن هذه المهارات سوف تتطور عندما تبدأ ببناء موقع إلكتروني لاحقًا ضمن السلسلة التعليمية، أما في المقال التالي سوف تبدأ بتعلم كيفية تنسيق الصور باستخدام CSS.

ترجمة وبتصرف للمقالات How To Understand and Create CSS Rules وHow To Declare Values For Multiple Properties In a CSS Rule.

اقرأ أيضًا

]]>1881Sun, 12 Feb 2023 16:03:00 +0000كيفية بناء موقع باستخدام CSShttps://academy.hsoub.com/programming/css/%D9%83%D9%8A%D9%81%D9%8A%D8%A9-%D8%A8%D9%86%D8%A7%D8%A1-%D9%85%D9%88%D9%82%D8%B9-%D8%A8%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-css-r1879/

سوف تتعرف من خلال هذه السلسلة التعليمية على لغة CSS وهي لغة تُستخدم للتحكم بطريقة عرض المواقع الإلكترونية إذ سوف تبني موقعًا خاصًا بك باستخدام الموقع التوضيحي كنموذج، وعلى الرغم من أن الموقع التوضيحي يتضمن معلومات عن القرش Sammy إلا أنك تستطيع استبدال هذه المعلومات بالمعلومات الخاصة بك.

تُعد لغة CSS إلى جانب HTML و جافا سكريبت واحدة من التقنيات الأساسية في عالم الويب، لذا إن كنت تملك بعض الفهم للغة HTML وتريد بناء مهارات تطوير الواجهة الأمامية فإن تعلم CSS خطوة ممتازة وضرورية.

سوف يُعرفك النصف الأول من هذه السلسلة التعليمية على CSS من خلال تمارين عملية، أما النصف الثاني سيوفر لك خطوات تُساعدك على إعادة تصميم الموقع التوضيحي.

سوف تمتلك عند الانتهاء من هذه السلسلة التعليمية ملفات جاهزةً لرفع موقع إلى استضافة، بالإضافة إلى امتلاكك المقدرة على متابعة تعديل تصميم الموقع باستخدام HTML و CSS، سوف تمتلك أيضًا الأساس لتعلم مهارات إضافية في مجال تطوير الواجهات الأمامية للويب (مثل جافا سكريبت).

هذه المقالة هي المقالة الأولى من مقالات السلسلة التعليمية لكيفية إنشاء موقع إلكتروني بواسطة CSS وتتضمن هذه السلسلة المقالات التالية:

  1. كيفية بناء موقع باستخدام CSS
  2. كيفية فهم وإنشاء قواعد CSS
  3. كيفية تنسيق الصور باستخدام CSS
  4. كيفية إنشاء أصناف ومعرفات ID وأصناف زائفة في CSS
  5. كيفية تنسيق عنصر div في HTML باستخدام CSS
  6. كيفية تعديل حجم عنصر HTML والمساحة المحيطة به باستخدام CSS
  7. كيفية ضبط CSS و HTML لمشروع موقعك الإلكتروني
  8. كيفية تصميم جسم صفحة موقع إلكتروني باستخدام CSS
  9. كيفية بناء قسم الترويسة في موقعك الإلكتروني باستخدام CSS
  10. كيفية بناء قسم "عني" ضمن موقعك الإلكتروني باستخدام CSS
  11. كيفية بناء مخطط شبكي باستخدام CSS
  12. إضافة أقسام السيرة الذاتية وصندوق اقتباس لموقعك باستخدام CSS
  13. كيفية إنشاء تذييل ثابت باستخدام HTML و CSS

المتطلبات

  • محرر شيفرة مثل Visual Studio Code أو Atom، وفي هذه السلسلة سوف نستخدم Visual Studio Code كمحرر شيفرة افتراضي لكنك تستطيع استخدام أي محرر تريده، كما أن هناك بعض التعليمات التي تحتاج للتعديل قليلًا عند استخدام محرر مختلف.
  • متصفح ويب مثل فايرفوكس أو كروم، سوف نستخدم في هذه السلسلة المتصفح فايرفوكس كمتصفح افتراضي لكنك تستطيع استخدام أي متصفح تريده، مع العلم أنه يوجد بعض التعليمات التي تحتاج القليل من التعديل عند استخدام متصفح مختلف.
  • صورتان شخصيتان لتخصيص موقعك (اختياري).
  • معرفة بلغة HTML، فإنك لا تعلم أي شيء عن هذه اللغة أو ترغب في تنشيط معلوماتك تستطيع متابعة الدروس العشرة الأولى من سلسلة كيفية بناء موقع إلكتروني باستخدام HTML قبل البدء بهذه السلسلة.

سوف تُصبح جاهزًا للبدء ببناء مشروع باستخدام CSS بالاعتماد على الدروس القادمة عند تجهيز المتطلبات السابقة.

مقدمة مختصرة إلى CSS

يتضمن هذا المقال أصل ظهور CSS وسوف يوفر لمحة شاملة عالية المستوى عن طريقة عمل CSS مع HTML، كما أنه سوف يُحضّرك لتُتابع التمارين العملية ومشروع بناء موقع في المحتويات التعليمية القادمة.

تاريخ CSS

قُدمت شيفرة CSS لأول مرة من قبل هاكون ويوم لي عام 1994 عندما كان يعمل في المنظمة الأوروبية للبحث النووي CERN - European Organization for Nuclear Research إلى جانب تيم بيرنرز لي مُبتكر شبكة الويب العالمية، وفي ذلك الوقت كان إنشاء صفحات الويب مُقتصرًا فقط على HTML (Hypertext Markup Language) التي طورها بيرنرز لي في التسعينيات، لكن الهدف الرئيسي من تطوير HTML كان لوصف دلالات مكونات وثيقة ضمن الشبكة (مثل عناوينها وفقراتها) وليس توفير تعليمات تصميمية، وعندما أصبح الاستخدام المُتنامي لشيفرة HTML لتصميم صفحات الويب غير عملي قُدمت CSS لتوفر طريقة أكثر فعالية لتصميم مظهر وهيكلية موقع إلكتروني بالاشتراك مع HTML.

كيف تعمل CSS مع HTML

تتألف المواقع المبنية باستخدام HTML و CSS من ملف HTML يتضمن محتوى مثل النص وروابط الصور ووسوم HTML، وملف CSS يتضمن قواعد التصميم التي تُطبق على محتوى HTML، فعلى سبيل المثال يُمكن لملف HTML أن يتضمن نص العنوان (موسوم بالوسم <h1>) ونص فقرة (موسوم بالوسم <p>)، وملف CSS المرتبط به يُمكن أن يتضمن قواعد توجه المتصفح لجعل جميع نصوص العناوين بحجم 20 بكسل ونص الفقرة بلون أزرق.

سوف تُطبق قواعد CSS هذه على نصوص جميع العناوين والفقرات أينما ظهرت ضمن ملف HTML دون الحاجة لإضافة تعليمات التصميم ضمن ملف HTML كل مرة. إن CSS أداة قوية لإعادة ترتيب محتوى الموقع حيث تستطيع استخدامه لإنشاء صناديق محتوى من خلال التحكم بالحجم واللون وخواص اخرى تُساعدك على تصميم الهيكلية لصفحة الويب.

سوف تستخدم CSS في المقالات التعليمية التالية للتحكم بتصميم النص والصورة وعناصر HTML الأخرى، إضافةً إلى تصميم تخطيط الصفحة، وللبدء بهذا عليك أولًا إنشاء بضع ملفات ومجلدات لتتدرب فيها على كتابة شيفرة HTML و CSS، وفي الفقرة التالية سوف نُرشدك عبر خطوات للبدء بمشروع HTML و CSS باستخدام محرر الشيفرات المجاني المتوفر Visual studio Code.

كيفية البدء بمشروع تدريبي على HTML و CSS باستخدام محرر الشيفرة

سوف تُنشئ في هذه الفقرة المجلدات والملفات الضرورية لاستخدام CSS وبناء موقع إلكتروني، وسوف تستخدم محرر الشيفرة لإنشاء مسار لمشروع موقعك الإلكتروني يتضمن مجلدًا بداخله ملف لشيفرة CSS الخاصة بنا وملفًا يتضمن شيفرة HTML ومجلدًا يتضمن الصور.

سوف نستخدم في هذه السلسلة التعليمية برنامج Visual Studio Code، وهو محرر شيفرة مجاني متوفر لأنظمة ماك وويندوز ولينكس لكن لك الحرية في استخدام أي محرر شيفرة تُفضله، وانتبه إلى وجود بعض التعليمات أو الخطوات التي تحتاج تعديلات طفيفة في حال استخدمت محررًا مُختلفًا.

كيفية إنشاء ملفات ومجلدات HTML و CSS

افتح محرر النصوص المُفضل لديك ثم افتح مجلد مشروع جديد وأسمه css-practice، سوف نستخدم هذا المجلد لحفظ جميع الملفات والمجلدات التي سوف تُنشئها خلال هذه السلسلة التعليمية. لإنشاء مجلد مشروع جديد في برنامج Visual Studio Code توجه إلى قائمة File في القائمة العلوية ثم اختر Add Folde to Workspace، سوف تظهر لك نافذة جديدة اضغط فيها على خيار مجلد جديد لإنشاء مجلد باسم css-practice.

كيفية إنشاء ملفات ومجلدات HTML و CSS

أنشئ الآن مجلدًا جديدًا ضمن المجلد css-practice وأسمه css، وضمن هذا المجلد افتح ملفًا جديدًا ضمن مسار المشروع واحفظه بالاسم styles.css (هذا هو الملف الذي سوف تستخدمه لحفظ قواعد تنسيق CSS)، وفي حال كنت تستخدم برنامج Visual Studio Code تستطيع إنشاء مجلد جديد بالنقر باستخدام زر الفأرة الأيمن (ضمن نظام ويندوز) أو الضغط على CTRL + ضغط زر الفأرة الأيسر (ضمن نظام ماك) على مجلد css-practice واختيار "New Folder" وإنشاء المجلد css، ثم اضغط بزر الفأرة الأيمن (في نظام ويندوز) أو اضغط CTRL + زر الفأرة الأيسر (نظام ماك) على المجلد الجديد css واختر "New File" وأنشئ الملف styles.css كما هو موضح في الصورة المتحركة التالية.

إنشاء ملفات ومجلدات HTML و CSS

احفظ الملف وأبقه مفتوحًا. يجب عليك أيضًا إنشاء ملف لإضافة محتوى HTML من نص وصور وعناصر HTML أخرى سوف يُعالجها المتصفح، لذا افتح ملفًا جديدًا إضافيًا ضمن المجلد css-practice واحفظه باسم index.html بنفس الطريقة التي شرحناها لملف styles.css.

ملاحظة: تأكد من حفظ ملف index.html ضمن مجلد css-practice وليس ضمن مجلد css.

عليك الآن إضافة سطر برمجي ضمن الملف index.html يطلب من المتصفح استخدام ملف styles.css كملف التصميم الخاص بنا، ولعمل هذا سوف تستخدم الوسم <link> وتربطه مع ملف styles.css من خلال إضافة الشيفرة البرمجية التالية لملف HTML. 

<link rel="stylesheet" href="css/styles.css">

تُخبر الشيفرة السابقة المتصفح أن يُفسر شيفرة HTML بالاعتماد على ملف CSS الموجود ضمن css/styles.css، لذا عليك عدم حذف هذا السطر عند إضافة أو إزالة محتوى من ملف index.html أثناء اتباع الخطوات المشروحة في هذه السلسلة. احفظ الملف index.html وأبقه مفتوحًا.

أنشئ الآن مجلدًا إضافيًا ضمن المجلد css-practice وأسمه images بنفس الطريقة المشروحة سابقًا لإنشاء المجلد css، وسوف تستخدم هذا المجلد لحفظ الصور التي سوف تستخدمها ضمن هذه السلسلة التعليمية.

يجب أن يكون لديك الآن مجلد مشروع اسمه css-practice يتضمن المجلدات والملفات الضرورية للتعرف على CSS في هذه السلسلة التعليمية:

  • مجلد اسمه css يتضمن ملفًا اسمه styles.css
  • مجلد فارغ اسمه images
  • ملف اسمه index.html

إن كنت تستخدم برنامج Visual Studio Code يجب أن تظهر لديك شجرة الملفات التالية والملفات المفتوحة.

شجرة الملفات والملفات المفتوحة في برنامج vs code

لاحظ أن أسماء الملفات تتضمن الامتدادات .html و .css والتي تُشير إلى نوع المحتوى الذي تتضمنه، وخلال التدريبات العملية سوف تُضيف محتوى لهذه الملفات.

إصلاح مشاكل وأخطاء CSS و HTML

الدقة مهمة عند العمل مع HTML و CSS حيث أن فراغًا إضافيًا أو أي خطأ إملائي في محرف ما يُمكن أن يمنع شيفرتك من العمل كما هو متوقع منها، لذا في حال لم يُعالج المتصفح شيفرة CSS و HTML كما هو متوقع عليك التأكد أن كتبت الشيفرة تمامًا كما هي مكتوبة ضمن المقال، وبالرغم من أننا نُشجعك على كتابة الشيفرة يدويًا لتتعلمها إلا أن النسخ واللصق مفيد في بعض الأوقات لضمان أن الشيفرة مُطابقة للأمثلة.

هناك عدة أسباب لظهور أخطاء CSS و HTML، إذ عليك التحقق من الوسوم وقواعد CSS من وجود فراغات إضافية أو مفقودة و وسوم مفقودة أو تتضمن أخطاء إملائية وعلامات تنصيص أو محارف مفقودة أو خاطئة، وعليك أيضًا التأكد من عدم استخدام علامات الاقتباس المائلة أو الذكية مثل “ و " المُستخدمة غالبًا من قبل معالجات النصوص. إن علامات الاقتباس المائلة مُصممة للنص المقروء من قبل الإنسان وسوف يُسبب خطأ ضمن الشيفرة كونها غير مُعرفة كعلامات اقتباس من قبل المتصفح، لذا عند كتابة علامات الاقتباس مباشرةً ضمن محرر الشيفرة تستطيع أن تضمن أنك تستخدم علامات الاقتباس الصحيحة.

تأكد من حفظ الملف في كل مرة تُجري فيها تغيير على الشيفرة قبل إعادة تحميله ضمن المتصفح للتحقق من النتائج.

ملاحظة سريعة حول ميزات دعم HTML التلقائية

إن بعض محررات الشيفرة مثل محرر Visual Studio Code الذي نستخدمه في هذه السلسلة التعليمية توفر دعمًا تلقائيًا لكتابة شيفرة HTML فمثلًا إن Visual studio Code يوفر اقتراحات ذكية وإكمال تلقائي للشيفرة، وبالرغم من كون هذه الميزة مفيدة إلا أنه عليك الانتباه من إمكانية توليد أجزاء إضافية ضمن الشيفرة سوف تُسبب ظهور أخطاء في حال لم تكن معتادًا على استخدام هذه الميزات. إن شعرت أن هذه الميزات مربكة تستطيع تعطيلها ضمن تفضيلات محرر الشيفرة.

أصبحت جاهزًا الآن للمتابعة بالسلسلة التعليمية، وفي المقال التالي سوف تبدأ بالتعرف على كيفية استخدام قواعد CSS للتحكم بالتصميم وتخطيط محتوى HTML ضمن صفة الويب.

ترجمة -وبتصرّف- للمقالات A Brief Introduction To CSS و How To Set Up Your CSS and HTML Practice Project With a Code Editor لصاحبه Erin Glass.

اقرأ أيضًا

]]>1879Sun, 05 Feb 2023 16:08:00 +0000أساسيات لغة CSShttps://academy.hsoub.com/programming/css/%D8%A3%D8%B3%D8%A7%D8%B3%D9%8A%D8%A7%D8%AA-%D9%84%D8%BA%D8%A9-css-r1688/

تُعَدّ CSS أو التنسيقات الانسيابية Cascading Style Sheets الشيفرة التي تنسِّق محتوى ويب، إذ سيقودك هذا المقال عبر الأساسيات اللازمة لتبدأ، كما سيجيب على أسئلة مثل كيف أجعل النص باللون الأحمر؟ كيف سأعرض محتوًى معينًا في منطقة معينة من مخطط الصفحة؟ كيف سأضع صورةً لخلفية الصفحة أو كيف نختار لونًا لها؟

تعرف على لغة CSS

لا تُعَدّ CSS لغة برمجة وليست لغة توصيف mark up أيضًا، وإنما هي لغة تنسيق صفحات، إذ تُستخدَم لغة التنسيق هذه لتطبيق تنسيقات مختارة على عناصر HTML، فشيفرة التنسيق التالية مثلًا تجعل لون النص في كل الفقرات النصية <p> باللون الأحمر: 

p {
  color: red;
}

لنجرِّب ذلك، لذا أنشئ ملفًا نصيًا جديدًا وضع فيه الأسطر الثلاثة السابقة، ثم احفظه بالاسم style.css في المجلد styles.

لا بد من تطبيق قواعد التنسيق السابقة على مستند HTML وإلا فلن يفيدك ملف التنسيق في شيء، فإذا فاتك شيء مما ذكرناه في المقالات السابقة، فعُد وانظر في مقالي التعامل مع الملفات وأساسيات HTML.

  1. افتح الملف index.html
  2. انسخ الشيفرة التالية: 
<link href="styles/style.css" rel="stylesheet">
  1. ضع هذه الشيفرة بين وسمَي البداية والنهاية للعنصر head أي بين <head> و</head>.
  2. احفظ التغييرات التي أجريتها على الملف index.html ثم حمّله على متصفحك وسترى ما يشبه الصورة التالية:

01_using_css_file.png

إذا ظهرت الفقرات النصية باللون الأحمر، فقد أنجزت المطلوب.

تشريح مجموعة قواعد لغة CSS

لنناقش شيفرة CSS الخاصة بالفقرات النصية ذات اللون الأحمر لكي نفهم طريقة عملها:

02_red_paragraph.png

تُدعى الهيكلية السابقة بمجموعة القواعد ruleset ويُشار إليها غالبًا "بالقواعد" فقط؛ أما الأجزاء التي تتكون منها فهي:

  • المُحدِّد Selector: وهو اسم لأحد عناصر HTML في بداية مجموعة القواعد، ويحدد العنصر أو العناصر التي ستُطبَّق عليها تلك القواعد، وهو العنصر <p> في حالتنا.
  • التصريح Declaration: يمثِّل قاعدةً واحدةً مثل ;color: red، ويحدد الخاصية التي تريد تنسيقها من خواص العنصر.
  • الخواص Properties: وهي الطرق التي تستطيع من خلالها تنسيق عناصر HTML، إذ تمثِّل color في مثالنا خاصيةً لتنسيق العنصر <p>، كما يمكنك من خلال CSS اختيار الخاصيات التي تريد أن تستهدفها قاعدة معينة.
  • قيمة الخاصية Property Value: وتكتب إلى يمين الخاصية بعد النقطتين، إذ يمكنك اختيار واحدة من عدة خيارات ممكنة لهذه الخاصية، فهناك مثلًا الكثير من الألوان وليس فقط اللون الأحمر red.

انتبه إلى التفاصيل التالية في صياغة القواعد:

  • القوسان المعقوصان ({}? توضع بعد المحدد، وينبغي أن توضع كل مجموعة من القواعد ضمن قوسين معقوصين.
  • النقطتان الرأسيتان (:? ينبغي استخدامها لفصل الخاصية عن قيمتها أو قيمها في كل تصريح.
  • الفاصلة المنقوطة (;? لفصل كل تصريح عن الذي يليه.

لتغيير عدة خواص معًا ضمن مجموعة قواعد واحدة، اكتب التصريح اللازم لكل منها وافصل بين التصاريح بفاصلة منقوطة: 

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

استهداف عدة عناصر بمجموعة قواعد واحدة

إن أردت استهداف عدة عناصر بمجموعة قواعد واحدة لكي تتجنب التكرار، فاكتب بكل بساطة أسماء عناصر HTML التي تريد تطبيق القواعد عليها بحيث تفصل بينها فواصل , كما يلي: 

p, li, h1 {
  color: red;
}

 

أنواع مختلفة من المحددات

يشرح المثال الذي أوردناه سابقًا ما يُعرف بمحدِّد العنصر element selector وهو النوع الأول من أنواع المحددات الذي يطبق قواعد تنسيق معينة على عنصر أو عناصر HTML محددة الاسم، لكن هناك أنواع أخرى سنستعرض ما شاع منها فيما يلي:

  • مُحدِّد مُعرِّف العنصر ID selector: يستهدف عنصر ذو مُعرِّف محدد، إذ يمتلك كل عنصر من عناصر صفحة HTML مُعرّفًا فريدًا، وإليك مثالًا كما يلي: 
#my-id {
  color: red;
}

يستهدِف هذا المحدِّد العنصر <a> في الشيفرة التالية: 

<p id="the-id">somthing here</p>
<a id="my-id">somthing here</a>
  • مُحدَّد الصنف class selector: يستهدف جميع العناصر التي تمتلك القيمة نفسها للسمة class، كما يمكن لعدة عناصر أن تأخذ قيمةً واحدةً للسمة class، وإليك المثال التالي: 
.my-class {
  color: red;
}

يستهدف هذا المحدد العنصرين <p> و <a>: 

<h2 class="x">some subtitle here</h2>
<p class="my-class">somthing here</p>
<a class="my-class">somthing here</a>
  • مُحدِّد السمة attribute selector: يستهدف العنصر أو العناصر التي تمتلك السمة نفسها كما في المثال التالي: 
ol[type] {
  color: red;
}

يستهدف هذا المحدد القوائم المرتبة التي تمتلك الصفة type: 

<h2 class="x">some subtitle here</h2>
<ol type="I"><li>list item 1</li><li>list item 2</li><ol>//هذه فقط
<ol><li>list item 1</li><li>list item 2</li><ol>
  • محدد الصنف المجرّد psuedo-class selector: يستهدف عناصر محددة بالاسم عندما تكون في حالة معينة، مثل مرور مؤشر الفأرة Hover فوق رابط، وإليك مثالًا: 
a:hover {
  color: red;
}

عندما يمر مؤشر الفأرة فوق أي رابط سيتحول لونه إلى الأحمر.

يمكنك الاطلاع على أنواع أخرى من المحددات في توثيق CSS العربي في موسوعة حسوب.

خطوط الكتابة والنصوص

بعد اطلاعنا على بعض مبادئ CSS سنحاول تطبيق ما تعلمناه في تحسين مظهر صفحتنا التجريبية index.html وذلك بإضافة بعض القواعد والمعلومات في الملف style.css.

أولًا، جد أولًا شيفرة الخط الذي اخترته سابقًا من خطوط جوجل وخزنته.

ثانيًا، أضف الشيفرة التالية ضمن عنصر <link> الموجود داخل العنصر <head> في الملف index.html لتبدو كما يلي: 

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

ستربِط هذه الشيفرة الملف إلى ملف تنسيق تُعرِّف عائلة خطوط الكتابة "Open Sans" مع صفحتك.

ثالثًا، احذف القاعدة الموجودة في الملف style.css، فقد استخدِمت لتجربة تنسيق العناصر.

رابعًا، أضف أسطر الشيفرة التالية، بعد تبديل font-family بما قد خزّنته سابقًا: 

html {
  font-size: 10px; /* px means "pixels": the base font size is now 10 pixels high  */
  font-family: "Open Sans", sans-serif; /* this should be the rest of the output you got from Google fonts */
}

تشير الخاصية font-family إلى اسم الخط الذي تريد استخدامه، بينما تشير الخاصية font-size إلى حجمه، وقد اخترنا محدِّد العنصر html تحديدًا، لكي نعتمد حجم الخط ذاك أساسًا في الصفحة بالكامل، إذ العنصر html هو العنصر الأب لكل العناصر في الصفحة التي تتفرع منه لذا فهي ترث منه حجم الخط ونوعه.

ملاحظة: كل ما يرد بين المجموعتين /* و */ هو تعليق في CSS، وسيتجاهلة المتصفح عندما يُصيّر الشيفرة.

خامسًا، لنضبط حجم الخط للعناصر التي تقع داخل مستند HTML وهي <h1> و <li> و <p>، ولنضبط موقع العنصر <h1> ليظهر في منتصف الصفحة، وأخيرًا سنضبط ارتفاع سطر الكتابة والتباعد بين الأسطر للعنصرين <li> و <p> من خلال الخاصيتين line-height و letter-spacing على التوالي لتسهيل قراءة المحتوى: 

h1 {
  font-size: 60px;
  text-align: center;
}

p, li {
  font-size: 16px;
  line-height: 2;
  letter-spacing: 1px;
}

اضبط قيمة الحجم بواحدة px كما تريد وسيبدو عملك الآن على نحو مشابه للصورة التالية:

03_styling_your_page.png

فكرة الصناديق في لغة CSS

قد تلاحظ في مرحلة ما عند كتابة قواعد CSS أنها تعتمد فكرة الصناديق في ضبط الأحجام والألوان ومواقع العناصر، إذ يمكنك التفكير في عناصر HTML على أساس أنها صناديق فوق بعضها.

04_boxes_over_boxes.png

يعتمد تخطيط CSS بأكمله تقريبًا على نموذج الصندوق box model، إذ يشغل كل صندوق حيزًا من مساحة الصفحة ويتمتع بخصائص مثل:

  • padding: الحشو أو الحاشية، وهو الفراغ المحيط بمحتوى العنصر، ويمثل في الشكل الذي يُعرض تاليًا الفراغ المحيط بمحتوى الفقرة النصية.
  • border: الإطار، وهو الخط الصلب الذي يحيط بمنطقة الحشو.
  • margin: الهامش، وهو الفراغ الخاص بالعنصر ويحيط بالإطار.

05_css_padding_border_margin.png

سنستخدِم أيضًا في هذا القسم:

  • width: يضبط عرض العنصر.
  • background-color: يضبط لون الخلفية حول المحتوى ومنطقة الحشو.
  • color: يضبط لون المحتوى الذي يضمه العنصر.
  • text-shadow: ويضبط تدرج الظل حول النص داخل العنصر.
  • display: يضبط نمط عرض العنصر، ويمكنك استئناف القراءة لتفهم أكثر.

لنكمل بإضافة بعض قواعد CSS ونضعها في أسفل الملف style.css، ويمكنك تغيير القيم كما تشاء ومراقبة ما يحدث.

تغيير لون الصفحة 

html {
  background-color: #00539F;
}

تضبط هذه القاعدة لون خلفية الصفحة بالكامل. غيّر قيمة اللون 00539F# بالطريقة التي تعلمناها في مقالات سابقة وراقب التغيّر الذي يحدث.

تنسيق جسم الصفحة في لغة CSS 

body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

لنناقش القواعد السابقة التي تنسق العنصر body:

  • width: 600px: تحدِّد قياس جسم الصفحة ليبقى دائمًا 600 بكسل.
  • margin: 0 auto: عندما تضع قيمتين لخاصية مثل margin أو padding، فستضبط القيمة الأولى الحدود العليا والدنيا على 0 في هذه الحالة، بينما ستضبط القيمة الثانية الحدَّين اليساري واليميني على القيمة auto، وهي قيمة خاصة تقسِّم الحيز الأفقي المتوفر بالتساوي بين اليمين واليسار، ويمكنك أيضًا استخدام ثلاث قيم أو أربع للخاصية margin.
  • background-color: #FF9500: تضبط لون خلفية العنصر، إذ نستخدِم في مشروعنا اللون البرتقالي المائل إلى الحمرة وهو اللون المتمِّم للون الأزرق الداكن الذي نستخدِمه للعنصر <html>، كما يمكنك تجريب ما تشاء.
  • padding: 0 20px 20px 20px: تضبط قيم الأطراف الأربعة للحاشية المحيطة بالعنصر، والغاية من الحاشية إضافة مساحة فارغة حول العناصر، إذ تدل القيم المبينة على عدم وجود حاشية أعلى جسم الصفحة ووجود حاشية مقدارها 20 بكسل حول بقية الأطراف، كما يمكنك أيضًا استخدام قيمة واحدة للخاصية padding أو قيمتين أو ثلاث أيضًا.
  • border: 5px solid black: يضبط قيم عرض وتنسيق ولون الإطار المحيط بالعنصر، فهو خط مستمر solid وأسود بعرض 5 بكسل في حالتنا ويحيط بكامل جسم الصفحة.

ضبط موقع عنوان الصفحة وتنسيقه 

h1 {
  margin: 0;
  padding: 20px 0;
  color: #00539F;
  text-shadow: 3px 3px 1px black;
}

قد تلاحظ فراغًا مخيفًا أعلى جسم الصفحة، وذلك لأن المتصفح سيطبق التنسيق الافتراضي للعنصر <h1>، وقد تبدو الفكرة سيئةً، لكنه أمر ضروري لتحسين القراءة في الصفحات غير المنسقة، لذا سنتجاوز التنسيق الافتراضي للمتصفح ونضبط الحاشية على القيمة 0 باستخدام التصريح ;margin: 0 لنحل المشكلة، ثم نعيد ضبط الحاشية العليا والسفلى على القيمة 20 بكسل، كما سنضبط بعد ذلك لون العنوان ليكون مماثلًا للون المتمم للخلفية -أي أزرق غامق-، وأخيرًا سنعرض بعض الظلال حول العنوان باستخدام الخاصية text-shadow والتي تأخذ أربع قيم:

  • تضبط القيمة الأولى الانزياح الأفقي للظل عن النص: كم يبعد عنه مارًا من خلاله.
  • تضبط القيمة الثانية الانزياح العمودي للظل عن النص: كم يبعد عنه نحو الأسفل.
  • تضبط القيمة الثالثة نصف قطر الضبابية blur: كلما كانت القيمة أكبر كلما بدا ظل النص ضبابيًا أكثر.
  • تضبط القيمة الرابعة الأساس اللوني للظل.

ضبط الصورة في المنتصف 

img {
  display: block;
  margin: 0 auto;
}

سنجعل الصورة في مركز الصفحة لتبدو أفضل، وقد نستخدِم حيلة الهوامش السابقة margin: 0 auto، لكن هناك بعض الاختلافات التي تتطلب إعدادات إضافية.

يُعّدُ العنصر <body> عنصرًا كتليًا block أي أنه يشغُل مساحةً من الصفحة، كما ستحترم بقية العناصر الهوامش التي يأخدها؛ أما الصور، فهي عناصر مضمنة inline ولا بد من إعطائها صفة كتلية حتى تعمل فكرة الهوامش عن طريقة الخاصية ;display: block.

ملاحظة: تفترض التعليمات السابقة أنّ عرض الصورة لا يزيد عن عرض جسم الصفحة الذي ضبطناه ليكون 600 بكسل، فإذا كانت الصورة أكبر، فستخرج عن إطار جسم الصفحة لتغطي بقية أجزائها، كما يمكن حل المشكلة بتصغير حجم الصورة باستخدام محرر صور أو تنسيقها بضبط الخاصية width للعنصر <img> على قيم أصغر.

ملاحظة: لا تقلق إذا لم تفهم تمامًا التصريح ;display: block أو الفرق بين العنصر الكتلي والمضمن، إذ سيغدو الأمر أكثر وضوحًا مع تقدمك في تعلِّم CSS.

خلاصة

إذا اتبعت كل الإرشادات التي تحدثنا عنها في المقال، فستبدو الصفحة التجريبية التي تعمل عليها على النحو التالي:

06_your_page_so_far.png

إذا لم تجد عملك صحيحًا، فيمكنك دائمًا موازنة ما فعلته مع النسخة الجاهزة على جيت-هاب.

ترجمة -وبتصرف- للمقال CSS Basics.

اقرأ أيضًا

]]>1688Sat, 17 Sep 2022 16:06:00 +0000تأثير رسوم CSS المتحركة على أداء مواقع الويبhttps://academy.hsoub.com/programming/css/%D8%AA%D8%A3%D8%AB%D9%8A%D8%B1-%D8%B1%D8%B3%D9%88%D9%85-css-%D8%A7%D9%84%D9%85%D8%AA%D8%AD%D8%B1%D9%83%D8%A9-%D8%B9%D9%84%D9%89-%D8%A3%D8%AF%D8%A7%D8%A1-%D9%85%D9%88%D8%A7%D9%82%D8%B9-%D8%A7%D9%84%D9%88%D9%8A%D8%A8-r1555/

يختلف أثر رسوم CSS المتحركة الناتجة عن التغيير التدريجي لخصائص التنسيق من خاصية إلى أخرى، وقد تؤدي عمليات التحريك المكثفة إلى جمود المتصفح وهو يحاول تحقيق معدل إطارات مناسب لعرض أكثر نعومةً، كما تساعدك الأداتين Frame rate وWaterfall في الإضاءة على عمل المتصفح أثناء تنفيذه هذه الرسوميات لتشخيص مشاكل الأداء التي تنتج عنها.

تحدِّد عدد الإطارات عندما تستخدِم رسوم CSS المتحركة، إذ تستخدِم CSS كل إطار لتعريف مظهر العنصر خلال مراحل الحركة، ويعرض المتصفح الحركة بالانتقال من إطار إلى آخر، كما تُعَدّ رسوميات CSS المتحركة أسهل تنفيذًا من رسوميات جافاسكربت، كما تقدم أداءً أفضل أيضًا، وذلك لأنها تمنح المتصفح قدرًا أكبر من التحكم بتوقيت تصيير الإطارات، وإمكانية تجاوز بعضها إذا كان ذلك ضروريًا.

يختلف تأثير التعديلات التي نُحدثها على خصائص CSS تبعًا للخاصية المستهدفة. فتحريك العناصر باستخدام خصائص تستهلك موارد أعلى، سيفضي إلى عرقلة أداء المتصفح الذي يحاول جاهدًا بلوغ معدل إطارات مرتفع.

تسلسل تصيير رسوميات CSS

يُحدِّث المتصفح صفحة ويب عندما تتغير خاصية CSS عبر عملية متسلسلة تتضمن الخطوات التالية:

01_css_rendering_waterfall.png

  1. إعادة ضبط التنسيق Recalculating Style: لا بدّ للمتصفح من إعادة ضبط التنسيق في كل مرة تتغير فيها خاصية CSS لعنصر.
  2. تخطيط الصفحة Layout: يستخدِم المتصفح التنسيق الجديد في الخطوة الثانية لضبط موقع وهندسة العنصر، وتدعى هذه المرحلة تخطيط الصفحة أو إعادة الانسياب reflow.
  3. رسم الصفحة Paint: لا بدّ للمتصفح في النهاية من إعادة رسم العناصر على الشاشة، ولم نعرض في التسلسل السابق خطوةً أخيرةً تقتضي بتقسيم الصفحة أحيانًا إلى طبقات يُعاد رسمها بصورة مستقلة، ثم تُدمج مجددًا بعملية تدعى التركيب Composition.

لا بدّ من اتساع إطار واحد للتسلسل السابق طالما أنّ الشاشة لن تُحدِّث حتى اكتمال سلسلة التنفيذ السابقة، ومن المعروف أنّ معدل 60 إطار في الثانية كافٍ لإظهار الرسوميات المتحركة بصورة سلسة وناعمة على الشاشة، ويتطلب هذا من المتصفح تنفيذ السلسلة السابقة خلال 16.7 ميلي ثانية.

تأثير الخاصية على الأداء

يؤثر تحريك بعض خاصيات CSS أكثر من غيرها على أداء صفحة الويب إليك بعض الأمثلة:

نوع الخاصية Cost مثال
ستتسبب الخصائص التي تتحكم تغيراتها بموقع وهندسة العنصر في وقوع أحداث إعادة ضبط التنسيق وتخطيط الصفحة وإعادة رسمها recalc_lay_pnt.png left max-width border-width margin-left font-size
لن تتسبب الخصائص التي لا تتحكم تغيراتها بموقع وهندسة العنصر ولا تُصيّر في طبقة مستقلة في وقوع حدث تخطيط الصفحة. recalc_pnt.png color
لا تتسبب الخصائص التي تُصيّر في طبقة مستقلة في وقوع حدث إعادة الرسم أيضًا، لأن تحديث الصفحة سيُنفَّذ في خطوة التركيب.. recalc_only.png transform opacity

يمكنك الاطلاع على تأثير كل خاصية من خاصيات CSS على ملف الأداء وفقًا للمتصفح المستخدَم عبر الموقع CSS Triggers.

مثال تطبيقي: موازنة بين أثر الخاصيتين margin وtransform

سترى خلال هذه الفقرة كيف تشير الأداة إلى الفرق بين تحريك الكائنات من خلال الخاصية margin والخاصية transform، كما لا يهدف هذا السيناريو إلى إقناعك بأنّ استخدام الخاصية فكرة سيئة دومًا، وإنما لتوضيح فائدة أدوات تحليل الأداء في الإضاءة على عمل المتصفح أثناء تصيير موقعك وكيفية استخدام هذه الإضاءات لتشخيص وتصحيح مشاكل الأداء، فإذا أردت تجريب الأمر، فانتقل إلى صفحة المثال التطبيقي، والتي تبدو بالشكل التالي:

02_css_animation_demo.png

تملك الصفحة أداتَي تحكم:

  • زر تشغيل/ توقف: لتشغيل وإيقاف تشغيل الحركة.
  • مجموعة أزرار اختيار: لاختيار أسلوب الحركة باستخدام transform أو margin.

ستجد في الصفحة مجموعةً من العناصر أضفنا لها خلفيةً بألوان متدرجة باستخدام الخاصية linear-gradient وظلال حولها بتطبيق الخاصية shadow لأنّ كلتا الخاصيتين السابقتين شديدتا التأثير على الأداء.

تحريك العناصر باستخدام margin

ابقي الخيار على Use margin وابدأ الحركة، ثم افتح الأداة Performance وأنشئ تسجيلًا جديدًا، فليس عليك في الواقع سوى تسجيل بضعة ثوان.

افتح التسجيل الأول، إذ سيعتمد ما تراه على حاسوبك وحمولة نظام التشغيل، لكنه سيبدو قريبًا من الشكل التالي:

03_css_margin-record.png

تظهر في الشكل ثلاثة مشاهد مختلفة:

  • (a): نظرة عامة للأداة Waterfall.
  • (b): معدل الإطارات.
  • (c): تفاصيل الشريط الزمني.

نظرة عامة للأداة Waterfall

04_css_margin_timeline.png

تُظهِر اللوحة مشهدًا مضغوطًا للأداة Waterfall يسيطر عليه اللون الأخضر الذي يوحي بقضاء المتصفح معظم وقته في عمليات الرسم.

معدل الإطارات

05_css_animation_framerate.png

يُظهِر الشكل السابق معدّل الإطارات الذي يشير إلى وسطي قدره 46.67 إطار في الثانية، وهو أقل من المعدل المستهدَف البالغ 60 إطار في الثانية، والأسوأ من ذلك التعرجات الشديدة والانخفاضات المتكررة التي تصل بالوسطي إلى العشرينات والعشرات، فمن غير المحتمل رؤية حركة ناعمة في هذه الحالة وخاصةً عندما تضيف إليها العمليات الناتجة عن تفاعل المستخدِم مع الصفحة.

تفاصيل الأداة Waterfall

يعرض باقي التسجيل تفاصيل الأداة Waterfall، فإذا تنقَّلت خلال التفاصيل، فستجد نمطًا متكررًا كما يلي:

06_css_animation_waterfall.png

يُظهِر الشكل السابق تسلسل عملية تصير الصفحة، إذ يُعاد ضبط تنسيق كل عناصر الصفحة في كل إطار، ثم تجري عملية تخطيط واحدة للصفحة، ومن ثم إعادة رسم الصفحة، إذ تُخفّض عملية الرسم كما تلاحظ من أداء الصفحة.

سلطنا الضوء في لقطة الشاشة السابقة على عملية رسم، إذ يخبرنا امتدادها أنها استغرقت 13.11 ميلي ثانية من أصل 16.7 ثانية وهو زمن تنفيذ عمليات الإطار بكاملها إذا أردنا أداءً سلسًا وناعمًا، وهذا هو السبب وراء انخفاض معدل الإطارات وعدم استقراره، كما من الممكن تعديل الاختبار بإزالة الظلال حول العناصر، ومن ثم ترى أثر ذلك على الأداء، وسنحاول تاليًا استخدام الخاصية transform بدلًا من margin وسنرى النتيجة.

تحريك العناصر باستخدام الخاصية transform

اختر الآن زر Use transform ضمن خيارات التشغيل في صفحة المثال التطبيقي السابقة وأنشئ تسجيلًا ثانيًا، إذ سيبدو شكل لوحة النظرة العامة للأداة Performance كما يلي:

07_css_animation_transform_record.png

نظرة عامة للأداة Waterfall

08_css_animation_transform_overview.png

لاحظ وجود علامات خضراء أقل بكثير من المشهد نفسه عند استخدام الخاصية margin والكثير من اللون الزهري، والذي يوحي بعمليات تخطيط كثيرة أو عمليات إعادة ضبط تنسيق الصفحة كثيرة.

معدل الإطارات Frame Rate

09_css_animation_transform_framerate.png

يبدو الوضع أفضل موازنةً مع الحالة السابقة، فقد حققت الصفحة معدلًا قريبًا من 60 إطار في الثانية، كما يبدو معدل الإطارات في تزايد مستمر بغض النظر عن الانخفاض الملموس في معدل الإطارات في البداية.

تفاصيل الأداة Waterfall

تدل التفاصيل على سبب التحسن في معدل الإطارات موازنةً بالحالة السابقة، إذ لا يقضي المتصفح وقتًا طويًلا في تخطيط الصفحة أو في عملية الرسم وهي الناحية الأهم في حالتنا.

10_css_animation_transform_waterfall.png

حسَّن استخدام الخاصية transform أداء الموقع بصورة واضحة، وقد أرشدتنا الأداة Performance إلى طبيعة التحسن وسببه.

ترجمة -وبتصرف للمقال Animating CSS Properties.

اقرأ أيضًا

]]>1555Fri, 13 May 2022 15:04:00 +0000عرض محتوى صفحات الويب بتجاوب على الأجهزة المتعددةhttps://academy.hsoub.com/programming/css/%D8%B9%D8%B1%D8%B6-%D9%85%D8%AD%D8%AA%D9%88%D9%89-%D8%B5%D9%81%D8%AD%D8%A7%D8%AA-%D8%A7%D9%84%D9%88%D9%8A%D8%A8-%D8%A8%D8%AA%D8%AC%D8%A7%D9%88%D8%A8-%D8%B9%D9%84%D9%89-%D8%A7%D9%84%D8%A3%D8%AC%D9%87%D8%B2%D8%A9-%D8%A7%D9%84%D9%85%D8%AA%D8%B9%D8%AF%D8%AF%D8%A9-r1517/

نعرض في هذه المقالة الإرشادات العامة الأساسية الواجب اتباعها لإظهار المحتوى، ولا سيما النصوص الطويلة نسبيًا بوضوح على مختلف أنواع ومقاسات شاشات العرض.

القراءة على الويب

يُلخص الدليل الإرشادي للكتابة الموضوع من قِبل الحكومة الأمريكية ما يريده الأشخاص من الكتابة على الويب بما يلي:

اقتباس

يسمح استخدام لغةٍ بسيطة عند كتابة محتوى الويب للمستخدمين العثور على ما يحتاجون إليه، وفهم ما وجدوه، ومن ثم استخدامه لتلبية احتياجاتهم. يجب أن تكون الكتابات عملية؛ ويُمكن الوصول إليها بسهولة؛ وقابلة للمشاركة.

تُظهر الأبحاث أن الأشخاص لا يقرؤون صفحات الويب بتمعُّن، وإنما كل ما يفعلونه هو مسحها سريعًا؛ حيث يقرأ الأشخاص حوالي 20-28% فقط من محتوى صفحة الويب وسطيًا. تكون القراءة من الشاشة أبطأ من قراءة الورق. سيهجر الأشخاص موقع الويب ويغادروه، إذا لم يكن من السهل الوصول إلى معلوماته وفهمها.

الكتابة للجوال

يُعدّ التركيز على الموضوع المطروح ووضع خلاصته أولًا من القواعد الأساسية للكتابة للجوال. يجب توضيح النقاط الرئيسية للموضوع في البداية؛ حيث تنص القاعدة العامة وعلى نحوٍ مثالي بوجوب وضع النقاط الأساسية في الفقرات الأربع الأولى وبما لا يزيد عن 70 كلمة لتُناسب الكتابة مختلف الأجهزة وإطارات العرض.

يجب التأكد من أن المحتوى موجَّهٌ لمساعدة زوار الموقع في تحقيق أهدافهم، لذا يجب البدء أولًا بتحديد الشريحة المستهدفة وتحديد توقعات المستخدمين واحتياجاتهم. يجب الكتابة باستخدام أسلوب الخطاب المباشر وعرض الإجراءات والحلول العملية؛ كما يجب نشر ما يريده الزوار والابتعاد عن الحشو والتكرار.

تُظهر أبحاث الحكومة البريطانية ما يلي أيضًا:

اقتباس

يُفضّل 80٪ من الأشخاص الجمل المكتوبة بلغةٍ واضحة لاسيما إذا كانت المسألة المطروحة مُعقدة". حيث يُفضّل غالبية القراء العرب مثلًا الجملة "المملكة الأردنية الهاشمية" على اختصارها اللاتيني غير المشهور HKJ.

كلما ارتفع تعليم الشخص وتخصصت معرفته، زاد تفضيل اللغة البسيطة.

والخلاصة هي أنه يجب استخدام لغةٍ بسيطة وكلمات أقصر وتركيبات جمل سهلة حتى مع الجمهور المتعلِّم والتقني؛ كما يجب الحفاظ على نبرةٍ خطابية ما لم يكن هناك سببٌ وجيهٌ لخلاف ذلك. تنص أحد القواعد القديمة للصحافة بأن نكتب كما لو كنا نتحدث إلى شخص ذكي يبلغ 11 عامًا.

المستخدمون القادمون

يُعدّ أسلوب الكتابة المُختزل ضروريًا للقراء على الأجهزة المحمولة خصوصًا، وهو أمرٌ بالغ الأهمية عند إنشاء محتوى الهواتف منخفضة التكلفة ذات إطارات العرض الصغيرة، والتي تتطلب مزيدًا من التمرير وقد تحتوي على شاشاتٍ ذات جودةٍ منخفضة واستجابة ضعيفة.

يمتلك معظم مستخدمي الويب، والبالغ عددهم أكثر من مليار مستخدم، أجهزةً رخيصة، ولا يرغبون في إنفاق كلفة الاتصال بالويب على التنقل في محتوًى طويل، كما أنهم قد لا يقرؤون بلغتهم الأم؛ لذلك يجب دومًا اختصار النص، أي استخدام جملٍ قصيرة وعلامات ترقيم أقل وفقرات من خمسة أسطر أو أقل وعناوين على سطر واحد فقط؛ كما يجب استخدام النصوص المتجاوبة، مثل استخدام عناوين أقصر لإطارات العرض الصغيرة، مع الحذر من الجوانب السلبية.

يؤدي اتباع أسلوب الحد الأدنى من النص إلى تسهيل توطين المحتوى وتدويله أيضًا، ويزيد من احتمالية اقتباس المحتوى في وسائل التواصل الاجتماعي.

يجب الإلتزام بقواعد الحد الأدنى:

  • الحفاظ على البساطة.
  • تقليل الحشو والجمل السردية الطويلة.
  • التوجُّه للمغزى المفيد مباشرةً.

حذف المحتوى غير الضروري

يتزايد حجم صفحات الويب يومًا بعد يوم؛ كما تتيح تقنيات التصميم المتجاوب -التي عرضناها سابقًا- تقديم محتوًى مختلف لإطارات العرض الأصغر، ولكن من الأجدر البدء بتبسيط النص والصور والمحتويات الأخرى دائمًا.

يقول جاكوب نيلسون Jakob Nielsen:

اقتباس

"يميل معظم مستخدمي الويب للتعلم أمامًا forward بمعنى إمعان البحث وصولًا للإجابات عن تساؤلاتهم عوضًا عن التراجع لحيازة كتابٍ جديد."

يجب التساؤل عن أهداف زوار الموقع دومًا وفيما إذا كان كل مكوّن في الصفحة يُساعد الزوار في الوصول لأهدافهم.

حذف عناصر الصفحة المكررة

يبلغ الحجم الوسطي لملفات HTML حوالي 70 كيلو بايت مع أكثر من تسعة طلبات لصفحة الويب الواحدة وسطيًا وفق أرشيف HTTP.

تستخدم العديد من المواقع الشهيرة عدة آلافٍ من عناصر HTML في كل صفحة، وعدة آلافٍ من سطور التعليمات البرمجية، وذلك حتى على أجهزة الجوال. قد لا يجعل الحجم الزائد لملف HTML عملية التحميل أبطأ، إلا أنه يُعطي إشاراتٍ واضحة على تضخُّم المحتوى؛ حيث يُشير إلى عناصر أكثر ونصوصًا أكبر أو الأمرين معًا.

يؤدي تخفيض تعقيد HTML إلى تخفيض حجم الصفحة والمساعدة في التخصيص المحلي والدولي وتسهيل تخطيط التصميم المتجاوب وتصحيحه. للحصول على معلوماتٍ حول كتابة HTML بكفاءة أكبر، يُمكن الرجوع إلى HTML عالي الأداء.

من التغريدات الشهيرة لكاربور سيل Gabor Cselle على تويتر:

اقتباس

"ستخسر 20% من المستخدمين مع كل خطوة إضافية ترغمهم على فعلها قبل الوصول لإفادةٍ ما من التطبيق"

ينطبق نفس الأمر على المحتوى؛ حيث يجب مساعدة المستخدمين في الوصول إلى المطلوب بأسرع ما يُمكن؛ كما لا يجب إخفاء المحتوى لمستخدمي الجوال فقط. يجب محاولة تحقيق مبدأ تكافؤ المحتوى، لأن تخمين الميزات التي لن يفقدها مستخدمو الجوال قد يكون خاطئًا مع بعض الأشخاص. يجب إنشاء إصداراتٍ مختلفة من نفس المحتوى في حال توفر الموارد لتُناسب الحجوم المختلفة لإطارات العرض، أو على الأقل لعناصر الصفحة ذات الأولوية العالية.

يجب أخذ إدارة المحتوى وتسلسل خطوات العمل بالحسبان: هل تؤدي الأنظمة القديمة إلى محتوًى قديم؟

تبسيط النص

يتزايد تصفح الويب على أجهزة الجوال مما يُلزم تغيير طريقة الكتابة للوصول إلى محتوًى أسهل يذهب مباشرًة للمغزى المقصود بعيدًا عن الحشو بلا فائدة.

حذف الصور المكررة

يُمكن أن تكون الصور جميلةً وممتعةً وغنيةً بالمعلومات، إلا أنها تستخدم موارد الصفحة وتُضيف إلى حجمها وتزيد من عدد طلبات الملفات. تؤدي رداءة الاتصال إلى زيادة زمن الاستجابة؛ مما يعني أن الزيادة في طلبات ملفات الصور ستُفاقم المشكلة عند فتح الموقع من الجوال.

يُظهر موقع أرشفة بيانات HTTP أن صفحات الويب تطلب ملفات الصور 54 مرةً وسطيًا:

034http-archive-images.png

كما تُشكّل الصور أكثر من 60% من حجم الصفحة:

035http-archive-content-type-pie-chart.png

تستهلك الصور الطاقة أيضًا، حيث يُعدّ الاتصال ثاني أكبر سببٍ لاستنفاد بطارية الجوال بعد الشاشة؛ وهذا يعني أن زيادة طلبات الصور تستلزم مزيدًا من استخدام الاتصال وبالتالي تفريغ البطارية. يتناسب استهلاك الطاقة مع إظهار الصور طردًا مع حجمها وعددها. يُمكن العودة لتقرير من قتل بطاريتي من ستانفورد.

يُحبَّذ التخلص من الصور إن أمكن ذلك. ومن الإرشادات المقترحة:

  • يجب التفكير في تصميمات تتجنب الصور تمامًا، أو تستخدمها باعتدال. يُمكن أن يكون استخدام النص لوحده رائعًا (راجع الرابط). يجب البدء أولًا بدراسة سلوك زوار الموقع؛ وماذا يُريدون منه؛ وفيما إذا كانت الصور مُساعدةً لهم أم لا.
  • شاع سابقًا حفظ العناوين والنصوص الهامة مثل صور؛ ولكن لا يتجاوب هذا الأسلوب مع تغييرات حجم إطارات العرض؛ كما أنه يزيد من حجم الصفحة ومن زمن الاستجابة. لن تصل محركات البحث ولا قارئات الشاشة ولا التقنيات المساعدة الأخرى إلى النصوص المحفوظة مثل صور. يجب استخدام النصوص "الحقيقية" ما أمكن ذلك، كما يمكن أن توفّر خطوط الويب وأنماط CSS مظهرًا جميلًا للنصوص.
  • يُحبذ استخدام أنماط CSS بدلًا من الصور للتدرجات والظلال والزوايا الدائرية ونقشات الخلفية (وهي جميعًا مدعومة من قبل كل المتصفحات الحديثة). ومع ذلك، يجب الانتباه إلى أنه وعلى الرغم من أن استخدام CSS أفضل من استخدام الصور؛ إلا أن له كلفةٌ إضافيةٌ للمعالجة والإظهار لاسيما على الجوال.
  • من النادر أن تعمل صور الخلفية جيدًا على الجوال. يُمكن استخدام استعلامات الوسائط لتجنُّب وضع صور الخلفية على إطارات العرض الصغيرة.
  • يجب تجنب وضع الصور في شاشة البداية.
  • يجب استخدام أنماط CSS للتحريك (راجع مقالة أساسيات التحريك).
  • يجب معرفة الخطوط الرسومية اللازمة واستخدام الرموز unicode والأيقونات عوضًا عن الصور، واستخدام خطوط الويب Web Fonts إذا كان ذلك ضروريًا.
  • يُفضَّل استخدام الأيقونات المتوفرة في الخطوط لأنها رسومات متجهة يُمكن تحجيمها بدون حدود، كما يُمكن تنزيل مجموعة من الأيقونات في نوع خطٍ واحد.
  • يُمكن استخدام عنصر الحاوية <canvas> لإنشاء الصور في سكريبت جافا باستخدام الخطوط والمنحنيات والنصوص وصور أخرى.
  • لا تقلّل الصور من النوع SVG أو من نوع روابط البيانات (يُمكن وضع كلا النوعين سطريًا inline في CSS) من حجم الصفحة، إلا أنها تُخفّض من زمن الاستجابة عن طريق تخفيض عدد طلبات الملف المصدر. يتوفر للصور SVG دعمٌ واسع على الجوالات وعلى متصفحات الحواسيب المكتبية؛ كما يُمكن لأدوات التحسين تخفيض حجم الرسومات SVG. وبالمثل، تُدعم بيانات الروابط جيدًا.
  • يُفضّل استخدام العنصر <video> عوضًا عن الصور المتحركة GIFs.

تصميم المحتوى ليعمل جيدا على مختلف حجوم إطارات العرض

ينصح براين فلينج في تصميم وتطوير الجوال Mobile Design and Development بما يلي:

اقتباس

"أنشئ منتجًا واحدًا، ولا تُعيد تصميم منتجٍ آخر للشاشات الصغيرة. تُنشَأ منتجاتٌ رائعة مُخصصة للجوالات إلا أنها لا تُستخدم على الإطلاق".

لا يلجأ المصممون المتميزون إلى عمليات التحسين لملاءمة الجوال، بل يفكرون على نحوٍ متجاوب في إنشاء مواقعٍ تعمل على مختلف الأجهزة. تٌعدّ هيكلية النص ومحتويات الصفحة الأخرى أمرًا أساسيًا لتحقيق النجاح على مختلف الأجهزة.

يستخدم الكثير من الأشخاص الذين يدخلون على الويب والذي يتجاوز عددهم المليار مستخدم جوالاتٍ منخفضة التكلفة مع إطارات عرض صغيرة، وبذلك يُمكن أن تكون القراءة على شاشة منخفضة الدقة مقاس 3.5 بوصة أو 4 بوصة عملًا شاقًا.

يُبين الشكل التالي صورةً لهذين المقاسين معًا:

036devices-photo.jpg

يبدو النص على الشاشة الكبيرة صغيرًا إلا أنه مقروء؛ بينما يكون على الشاشة الصغيرة غير قابلًا للقراءة رغم ظهور تخطيط الصفحة صحيحًا، كما يبدو العرض ضبابيًا عند التكبير وتفقد الألوان من بريقها فلا يعود اللون الأبيض أبيضًا مثلًا، ويصبح المحتوى غير واضح.

تصميم المحتوى للجوال

يجب وضع المحتوى على أنه أولوية مع مراحل التخطيط والتصميم الفني، أي أنه يجب التصميم مع نصوص وصور حقيقية وليس مع محتوًى وهمي.

يقول جيفري زيلدمان Jeffrey Zeldman:

اقتباس

"يسبُق المحتوى التصميم. لا يُعدّ التصميم في غياب المحتوى تصميمًا بل زخرفةً".

  • يجب وضع المحتوى الأكثر أهمية في الأعلى، حيث يميل المستخدمون إلى قراءة صفحات الويب على شكل الحرف F؛ أي يهتمون أولًا بالجزء الأعلى ثم يمسحون المنتصف.
  • يزور المستخدمون الموقع لتحقيق هدفٍ ما؛ لذلك يجب دومًا دراسة ما يحتاجون إليه لتحقيق هذا الهدف والتخلص من كل شيءٍ آخر إضافي. يجب التدقيق في الزخارف المرئية والنصية والمحتوى القديم والروابط الزائدة وما لا داعٍ له.
  • يجب توخي الحذر عند استخدام أيقونات المشاركة الاجتماعية، حيث يُمكن أن تُسبب فوضى في التخطيطات، كما يُمكن لشيفرتها أن تُبطئ تحميل الصفحة.
  • يجب تصميم التخطيطات المتجاوبة مع المحتوى وغير المخصصة لحجوم أجهزةٍ ثابتة.

اختبار المحتوى

لنتذكر أنه لتحقيق النجاح: مهما فعلنا، فلا بُدّ من الاختبار.

  • يجب التحقق من إمكانية القراءة على إطارات العرض الأصغر باستخدام أدوات المطور Chrome DevTools وأدوات المحاكاة الأخرى.
  • يجب اختبار المحتوى في ظل ظروف حيز النطاق التراسلي المنخفض والتأخير العالي؛ لذلك يجب تجربة المحتوى في مجموعةٍ متنوعة من سيناريوهات الاتصال.
  • يجب محاولة قراءة المحتوى والتفاعل معه على جوالٍ رخيص.
  • يجب الطلب من الأصدقاء والزملاء تجربة التطبيق أو الموقع.
  • يجب بناء مختبر لاختبار الجهاز. يوفّر GitHub repo الخاص بمختبر Mini Mobile Device من Google الإرشادات حول كيفية إنشاء مختبرٍ مُخصص. من المفيد استخدام OpenSTF، وهو تطبيق ويب بسيط لاختبار مواقع الويب على العديد من أجهزة Android.

يُبين الشكل التالي استخدام OpenSTF:

037stf.png

يتزايد استخدام الأجهزة المحمولة لتصفح المحتوى والحصول على المعلومات، وليس فقط أجهزةً للاتصال والألعاب والوسائط المتعددة، مما يجعل من الأهمية بمكان تصميم المحتوى ليعمل على طيفٍ واسعٍ من إطارات العرض، وإعطاء المحتوى الأولوية عند تصميم تخطيط الصفحة والواجهات والتفاعل مع المستخدم بحيث يظهر المحتوى صحيحًا على مختلف الأجهزة.

فهم كلفة البيانات

يتزايد حجم صفحات الويب على نحوٍ مُطّرد. فوفقًا لـ أرشيف HTTP يبلغ متوسط حجم الصفحة لـ أهم مليون موقع أكثر من 2 ميغا بايت.

يتجنب المستخدمون المواقع أو التطبيقات التي يعتقدون أنها بطيئة أو باهظة الثمن، لذا من الضروري فهم تكلفة تحميل الصفحة ومكونات التطبيق.

يُمكن أن يكون تخفيض حجم الصفحة مربحًا أيضًا. اكتشف كريس زاكرياس من YouTube أنه عند تخفيض حجم صفحة المشاهدة من 1.2 ميغا بايت إلى 250 كيلو بايت:

اقتباس

"أصبحت أعداد كبيرة من الأشخاص الذين لم يتمكنوا من استخدام YouTube من قبل قادرين على ذلك فجأة."

وبعبارةٍ أخرى: يُمكن أن يؤدي تخفيض حجم الصفحة إلى فتح أسواقٍ جديدة بالكامل.

حساب حجم الصفحة

يتوفر العديد من الأدوات لحساب حجم الصفحة. تعرض لوحة المطور Chrome DevTools Network الحجم الإجمالي بالبايت لجميع الموارد، ويُمكن استخدامها للتأكد من حجم كل نوع من الموارد. يُمكن أيضًا التحقق من العناصر المُستعادة من ذاكرة التخزين المؤقت cache للمتصفح.

038chrome-dev-tools.png

يوفر المتصفح Firefox والمتصفحات الأخرى أدواتٍ مماثلةً أيضًا.

يوفر WebPagetest إمكانية اختبار تحميل الصفحة للمرة الأولى والتحميلات اللاحقة لها. يُمكن أتمتة الاختبار باستخدام سكريبت (لتسجيل الدخول إلى موقعٍ ما مثلًا) أو باستخدام واجهات برمجة التطبيقات RESTful APIs الخاصة بهم.

يوضح المثال التالي المُنزّل من developers.google.com/web بأن التخزين المؤقت كان ناجحًا وأن عمليات تحميل الصفحة اللاحقة لا تتطلب مواردًا إضافية. يعرض WebPagetest الحجم وتفصيلات الطلب حسب نوع MIME أيضًا.

039webpagetest-requests-and-bytes-pie-charts.png

حساب كلفة الصفحة

ينظر كثيرٌ من المستخدمين إلى الكلفة المالية لتصفح الموقع؛ وليس إلى عدد البايتات اللازمة؛ أو إلى أداء الموقع السريع. يسمح الموقع "ما هي كلفة موقعي" What Does My Site Cost? بتقدير التكلفة المالية الفعلية لتحميل موقعٍ ما. يُبين المخطط التكراري التالي كلفة تحميل الموقع amazon.com (باستخدام طريقة الدفع المُسبق للبيانات):

040what-does-my-site-cost.png

يجب الانتباه إلى أن ذلك لا يأخذ بالحسبان قدرة الشخص على تحمُّل التكاليف موازنةً بدخله. يُمكن أيضًا الرجوع إلى الموقع blog.jana.com لمعاينة كلفة البيانات.

البلد كلفة 500MB الحد الأدنى للأجر الساعي عدد ساعات العمل لدفع كلفة 500MB
الهند $3.38 $0.20 17 ساعة
أندونيسيا $2.39 $0.43 6 ساعة
البرازيل $13.77 $1.04 13 ساعة

لا يُشكّل حجم الصفحة مشكلةً فقط للأسواق الناشئة؛ حيث يجب أيضًا ملاحظة اشتراك الكثير من الأشخاص في معظم البلدان بخطط الدفع محدودة البيانات وبأنهم يتجنبون بالطبع الصفحات الثقيلة والمُكلفة؛ كما أن خطط البيانات "غير المحدودة" للجوالات وشبكات wifi يكون لها في النهاية حدٌ معين للبيانات تتوقف بعده الخدمة أو يُحدّ منها. يُنصح بالتمتُّع بالشفافية والإعلام عن حجم البيانات التي يستهلكها الموقع.

وبالنتيجة، يؤثر حجم الصفحة على كلٍ من الأداء والتكلفة المالية.

ترجمة -وبتصرف- للمقالة Multi-Device Content للمؤلف: Sam Dutton.

اقرأ أيضًا

]]>1517Fri, 06 May 2022 15:05:00 +0000فلسفة تصميم الويب المتجاوبhttps://academy.hsoub.com/programming/css/%D9%81%D9%84%D8%B3%D9%81%D8%A9-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%A7%D9%84%D9%88%D9%8A%D8%A8-%D8%A7%D9%84%D9%85%D8%AA%D8%AC%D8%A7%D9%88%D8%A8-r1532/

اقتباس

يألف المصممون في مجال الطباعة القدرة على التحكم ويرغبون بمثلها في مجال الويب، لكنها نتيجة قيود الصفحة المطبوعة، ويجب أن نتقبل حقيقة أنه ليس للويب نفس القيود، وقد صُمِّم ليكون مرنًا، لذا علينا أولًا تقبل حسناته وسيئاته.

جون ألسوب John Allsopp

وصف المعماري الإنجليزي كريستوفر رين Christopher Wren مجال عمله ساخرًا بأنه "يسعى للخلود"، وفي هذا الهدف ما يلفت النظر، فعلى عكس الويب الذي يشعرك بأنه يركز على الأسبوع القادم فقط، تطمح هندسة العمارة دومًا نحو الخلود.

يحدد أساس البناء أثره، والذي يحدد بدوره شكل هيكل المبنى، الذي يحدد المظهر الخارجي النهائي لواجهة البناء، وتكون كل مرحلة من مراحل تصميم البناء أكثر ثباتًا وأقل قابليةً للتغيير عن سابقتها، وستشكّل القرارات الإبداعية حرفيًّا المساحةً الفيزيائيّة للمبنى، وستحدد الطريقة التي سيتحرك بها البشر ضمن المبنى لعقود، وربما لقرون، لكن العمل على الويب أمر مختلف تمامًا، فعملنا محدد بسرعة زواله، وغالبًا ما يُحسّن أو يُستبدل في غضون سنة أو سنتين، وتُعد أبعاد النوافذ غير المتناسقة ودقّة الشاشات المختلفة وتفضيلات المستخدم والخطوط المثبتة على جهاز المستخدم من الأمور غير الملموسة التي نتفاوض حولها عند نشر أعمالنا، وقد أصبحنا عبر السنين أكثر براعةً في التعامل معها، لكن هذه الأمور تتغير بسرعة، فمثلًا تخطى التصفح عبر الجوّال أجهزة سطح المكتب منذ زمن، وأصبح للعديد من منصات الألعاب المشهورة دعم عبر متصفحات الويب، وصار تصميم الويب يستهدف شريحةً أوسع من أجهزة التحكم تتجاوز الفأرة ولوحة المفاتيح، منها متحكمات الألعاب وواجهات اللمس، وأصبحنا نتعامل مع عدد أكبر من الأجهزة وطرائق الإدخال والمتصفحات أكثر من أي وقت مضى.

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

أساس مرن

سنشرح على هذا المثال وهو تصميم لمجلة افتراضية، حيث يتكون التصميم من عمودين على شبكة مرنة مع عدة صور موزعة ضمنه، من مزايا الشبكة المرنة أنها قابلة للتأقلم مع التغيرات في المستقبل، حيث أن التصاميم المرنة لا تحدد عرض النوافذ، وتتأقلم بشكل جميل مع الأجهزة بالوضع الأفقي والعمودي.

f-img-default-wide.jpg

للصور الكبيرة أحجام كبيرة، ومع أن التصميم في المثال مرن لكنه لا يتجاوب مع تغيرات الدقة أو حجم إطار العرض.

ولكن لا يوجد تصميم -سواء كان ثابتًا أو مرنًا- يتجاوب بسلاسة مع كل الحالات أكثر من الحالة الأساسية التي صمم لأجلها، فالتصميم في مثالنا يتجاوب مع تغير قياس نافذة المتصفح، لكنه يُظهر أخطاءً مع حجم النافذة الصغير، فعندما يُعرض في قياس أصغر من 800 × 600 بكسل، ستُقتطع الصورة التي خلف الشعار، بينما تُعدّل روابط التنقل قياسها بمرونة، أما الصور في الأسفل فتصبح صغيرةً وغير واضحة، ويبدو التصميم غير متجاوب ليس عند قياسات الشاشة الصغيرة فقط، بل أيضًا عند محاولة رؤية التصميم على الشاشات العريضة، حيث تكبر الصور لأحجام كبيرة جدًا، وتطغى على النص المحيط بها.

إضافة التجاوب

يطرح التصميم المعماري المتجاوب السؤال التالي: كيف يمكن للمساحة أن تتجاوب مع الأشخاص الموجودين داخلها؟

والجواب هو أن مهندسي العمارة تمكنوا من إنشاء قطع فنية مرنة يمكنها أن تكبر وتصغر وتنطوي عند مرور الأشخاص عبرها باستخدام الآلات والمواد القابلة للشد، كما ربطوا حساسات الحركة بنظام التحكم بالتكييف لتعديل حرارة الغرف والإضاءة فيها عند دخول الأشخاص إليها، كما تمكنت بعض الشركات من تطوير تقنية زجاج ذكي يمكنه تعديل شفافيته مثلًا حين يصبح المكان مزدحما ليعزل الرؤية، ويمنح مساحة حرية للأشخاص داخله.

وصف مايكل فوكس Michael Fox ومايلز كيمب Miles Kemp في كتابهما "العمارة التفاعلية Interactive Architecture" هذا التصميم المتكيف على أنه "نظام متعدد الحلقات يدخل الشخص في حوار معه، وفيه تبادل مستمر وبنّاء للمعلومات"، وهذا وصف مختلف قليلًا لكنه قوي، فبدلًا من إنشاء مساحات ثابتةً غير متغيرة بتجربة ثابتة، يقترح الكاتبان إمكانية -بل ووجوب- وجود تأثير متبادل بين البنية وقاطنيها.

يجب أن نستنتج من هذا الوصف طريقة إضافة التجاوب للويب، فبدلًا من ربط عدة تصاميم منفصلة عن بعضها البعض، يناسب كل منها جهازًا واحدًا من الأجهزة المتنوعة على الويب، يجب التعامل معها على أنها عدة أوجه لنفس التجربة. ويمكننا تصميم أفضل تجربة رؤية، مع تضمين تقنيات قياسية داخل التصميم لجعله أكثر مرونةً وتكيفًا مع الوسط المُصيّر ضمنه، باختصار يجب علينا التدرب على تصميم الويب المتجاوب.

استعلام الوسائط

أضيف نظام التعرف على عدة أنواع من الوسائط منذ إصدار CSS نسخة 2.1، فمثلًا إذا جربت سابقًا كتابة تنسيقات مخصصةً للطباعة فالنظام المألوف لديك هو: 

<link rel="stylesheet" type="text/css" href="core.css"
  media="screen" />
<link rel="stylesheet" type="text/css" href="print.css"
  media="print" />

أضيفت العديد من أنواع الوسائط المقبولة ضمن توصيف CSS لكتابة تنسيقات مناسبة لعدة أنواع من الوسائط، وصمم كل منها ليستهدف تصنيفًا معينًا من الأجهزة التي يمكنها العمل على الويب، لكن لم تتبع العديد من المتصفحات والأجهزة هذا التوصيف الجديد سابقًا، أو تضمنته مع نقص، أو تجاهلته كليًا.

أنشأت W3C استعلامات الوسائط لتكون جزءًا من توصيف CSS3، تطويرًا على ما جاء في توصيف CSS السابق المتعلق بأنواع الوسائط، ويسمح لنا استعلام الوسائط باستهداف أصناف معينة من الأجهزة، بفحص الخصائص الفيزيائية للجهاز الذي يُصيّر تصميمنا، فمثلًا اشتهرت تقنية استخدام استعلامات الوسائط من طرف العميل مؤخرًا مع الانتشار الكبير لأجهزة الهواتف المحمولة، لإرسال ورقة تنسيق خاصة بها، ولتنفيذ ذلك يمكننا وضع استعلام ضمن الوسم link في قيمة الخاصية media، كالتالي: 

<link rel="stylesheet" type="text/css"
  media="screen and (max-device-width: 480px)"
  href="shetland.css" />

يتضمن الاستعلام السابق قسمين:

  1. نوع الوسط screen.
  2. الاستعلام ضمن قوسين، متضمنًا فحصًا للخاصية max-device-width لهذا الوسط، متبوعًا بالقيمة المستهدفة 480px.

نسأل في الاستعلام السابق عن جهاز تكون دقته الأفقية max-device-width أصغر أو تساوي 480px، فإذا تحقق هذا الشرط، أي إذا كنا نشاهد التصميم على جهاز صغير -مثل جهاز الهاتف المحمول-، فسيُحمّل ملف التنسيق shetland.css، وإلا فسيتجاهل الوسم link كليًا.

يعتمد المصممون أحيانًا على دقة الوسط الذي نصمم له التطبيق، وهنا يمكن استخدام إحدى مزايا المُضيف العديدة المتوفرة، ومنها دقة الشاشة، لاستهداف الوسط المطلوب، حيث يمكن توسيع الاستعلام وإضافة عدة مزايا مستهدفة عبر فصل قيم الخصائص المتعددة بالكلمة المفتاحية and: 

<link rel="stylesheet" type="text/css"
  media="screen and (max-device-width: 480px) and (resolution: 163dpi)"
  href="shetland.css" />

ولسنا مقيدين بإضافة الاستعلام ضمن الوسم link فقط، بل يمكننا إضافته ضمن تنسيقات CSS، إما جزءًا من القاعدة media@: 

@media screen and (max-device-width: 480px) {
  .column {
    float: none;
  }
}

أو جزءًا من القاعدة import@: 

@import url("shetland.css") screen and (max-device-width: 480px);

ستكون النتيجة نفسها في كلا الحالتين، فإذا اجتاز الجهاز الاختبار ستطبق قواعد التنسيق المحددة على عناصر الصفحة ضمن الصفحة، ويمكن عدّ استعلام الوسائط تعليقًا شرطيًا، فبدلًا من أن يستهدف تصميمنا جهازًا محددًا بإصدار معين، يمكننا إصلاح المشاكل التي قد تواجه التصميم في مختلف القياسات والدقات المختلفة المغايرة للتصميم الأساسي.

تصميم متكيف ومتجاوب

لنركز الآن على الصور أساسًا للصفحة في مثالنا، حيث ستكون في التصميم الافتراضي كالتالي: 

.figure {
  float: left;
  margin: 0 3.317535545023696682% 1.5em 0;   /* 21px / 633px */
  width: 31.121642969984202211%;             /* 197px / 633px */
}li#f-mycroft,
li#f-winter {
  margin-right: 0;
}

اختصرنا التنسيقات المتعلقة بالخطوط هنا لنركز على التصميم، حيث يحدد قياس كل عنصر بتصنيف figure. بثلث العمود الحاوي له تقريبًا، مع إلغاء الحاشية اليمنى للعنصر في نهاية كل سطر، li#f-mycroft وli#f-winter، ويعمل التنسيق السابق كما نريد إلى أن يصبح قياس الشاشة أصغر أو أعرض من التصميم الأساسي، ويمكننا تطبيق تعديلات مرتبطة بدقة الشاشة باستخدام استعلامات الوسائط، ليتكيف التصميم أكثر، ويستجيب لتغير العرض.

لنضع العناصر أولًا على خط واحد عندما يصبح قياس إطار العرض أصغر من قيمة معينة، ولتكن 600 بكسل، لذا سنضيف في نهاية ورقة التنسيق style sheet كتلةً من التنسيقات ضمن قاعدة media@ كالتالي: 

@media screen and (max-width: 600px) {
  .mast,
  .intro,
  .main,
  .footer {
    float: none;
    width: auto;
  }
}

يمكنك معاينة صفحة المثال بعد التعديلات السابقة، فإذا كنت تتصفح من جهاز سطح مكتب فيمكنك تصغير حجم النافذة إلى أقل من 600 بكسل، وستلاحظ أن القاعدة السابقة ستلغي الخاصية float لعناصر التصميم الرئيسية، مما يجعل تلك العناصر تصطف فوق بعضها في كتل عموديًا، وبهذا نكون قد عدلنا التصميم ليناسب الشاشات الصغيرة، ولكن بقي لدينا الصور، فهي لا تُغير حجمها بما يناسب القياس الجديد، لذا يمكننا إضافة تنسيقات جديدة لإصلاح ذلك: 

@media screen and (max-width: 400px) {
  .figure,
  li#f-mycroft {
    margin-right: 3.317535545023696682%;    /* 21px / 633px */
    width: 48.341232227488151658%;          /* 306px / 633px */
  }  li#f-watson,
  li#f-moriarty {
    margin-right: 0;
  }
}

f-img-narrow.jpg

تُغير الصور حجمها في مثالنا بعد آخر إضافة لتتناسب مع أحجام الشاشات الصغيرة.

الأرقام المئوية الطويلة السابقة هي لإعادة حساب القياس الجديد للأعمدة ضمن الشبكة المرنة في التصميم الجديد العمودي فقط، حيث انتقلنا من ثلاث أعمدة إلى عمودين، عندما يصبح عرض الشاشة أصغر من 400 بكسل، لتظهر الصور بمظهر أفضل.

بنفس الطريقة السابقة يمكننا إصلاح التصميم للشاشات الكبيرة، ويمكننا وضع الصور على نفس السطر ضمن ستة أعمدة: 

@media screen and (min-width: 1300px) {
  .figure,
  li#f-mycroft {
    margin-right: 3.317535545023696682%;    /* 21px / 633px */
    width: 13.902053712480252764%;          /* 88px / 633px */
  }
}

أصبح مظهر الصور الآن جيدًا ضمن قياسات الشاشات كلها، حيث عدّلنا تنسيقها بحسب عرض النافذة ودقة الجهاز معًا.

f-img-widescreen.jpg

عندما حددنا قيمة عرض أكبر للخاصية min-width ضمن استعلام الوسائط السابق، تمكنا من إزاحة الصور لتكون على سطر واحد. ولا زال بإمكاننا فعل أمور أخرى بالإضافة إلى تغيير تصميم الصور، فيمكننا تحديد تصميم جديد مختلف لكل مجال دقة معين، مثلًا بجعل روابط التنقل بارزةً أكثر على الشاشات العريضة، أو نقل مكانها أعلى الشعار على الشاشات الصغيرة.

f-nav-narrow.jpg

ولا نستفيد من التصميم المتجاوب في جعل التصميم عموديًا على الشاشات الصغيرة فقط، بل لتحسين المظهر على مجال قياسات الشاشات كافةً.

لا يقتصر التصميم المتجاوب على تغييرات التصميم فحسب، إذ تسمح لنا استعلامات الوسائط بإضافة تعديلات دقيقة جدًا عند تغير مقاسات الصفحات وشكلها، فيمكننا تكبير المساحة القابلة للضغط للروابط على الشاشات الصغيرة مثلًا، تماشيًا مع قانون فيتز على شاشات اللمس، كما يمكننا إخفاء وإظهار عناصر تساعد في عملية التنقل، وتعديل حجم الخطوط والمسافة بين سطور النصوص، لتحسين تجربة القراءة لمختلف الشاشات.

في الختام

الشبكات والصور المرنة واستعلامات الوسائط هي العناصر التقنية اللازمة لتصميم الويب المتجاوب، وهي تحتاج منا لطريقة تفكير مختلفة، فبدلًا من تقسيم المحتوى المتوافر لدينا إلى عدة تصاميم متعلقة بأجهزة محددة، يمكننا استخدام استعلامات الوسائط لنحسن عملنا تدريجيًا لعدة حالات مختلفة، ونحن هنا لا نلغي طريقة فصل المحتوى إن احتجنا إليها، فمثلًا قد يكون للمستخدم الزائر من جهاز هاتف محمول هدف معين، وهذا الهدف أقل مما يريده عندما يزور الموقع من جهاز حاسوب، هنا يمكن فصل محتوى كل من الموقعين على حدة، لتقديم مزايا مختلفة لكلا النوعين من الزوار، إلا أنه يجب أن لا تكون طريقة التفكير تلك طريقتنا الافتراضية عند التفكير في التصميم، فقد أصبحنا حاليًا مضطرين للتصميم لطيف واسع من التجارب، ويقدم لنا التصميم المتجاوب حلولًا نتقدم بها إلى الأمام، ويمكننا من التصميم "لحسنات الويب وسيئاته".

ترجمة -وبتصرف- للمقال "Responsive Web Design" لصاحبه Ethan Marcotte.

اقرأ أيضًا

]]>1532Wed, 20 Apr 2022 11:14:16 +0000الصور في تصميم صفحات الويب المتجاوبhttps://academy.hsoub.com/programming/css/%D8%A7%D9%84%D8%B5%D9%88%D8%B1-%D9%81%D9%8A-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%B5%D9%81%D8%AD%D8%A7%D8%AA-%D8%A7%D9%84%D9%88%D9%8A%D8%A8-%D8%A7%D9%84%D9%85%D8%AA%D8%AC%D8%A7%D9%88%D8%A8-r1516/

يُمكن في تصميم الويب المتجاوب تغيير المحتوى إضافًة إلى تغيير التخطيط وفقًا لمواصفات الجهاز. يمكن عرض الصور عالية الدقة على نحوٍ ممتاز على الشاشات عالية الدقة (2x)؛ كما يُمكن أن تظهر صورةٌ عرضها 50% جيدًا على متصفحٍ عرضه 800px، بينما ستستهلك كثيرًا من المساحة على هاتفٍ ضيق، كما أن تحجيمها لملاءمة الشاشات الصغيرة سيتطلب نفس تكلفة حيّز النطاق التراسلي bandwidth.

الإدارة الفنية

025art-direction.png

تتطلب مسائلٌ أخرى إجراء تغييرات جذرية على الصور، مثل تغيير نسب الصورة، أو القص، أو حتى استبدال كامل الصورة، وتُدعى هذه التغييرات بالإدارة الفنية ويُمكن العودة إلى responsiveimages.org لمزيدٍ من الأمثلة.

الصور المتجاوبة

ربما لا يعلم الأشخاص أن الصور تُمثّل أكثر من 60٪ وسطيًا من البايتات اللازمة لتحميل صفحة ويب. سنعرض فيما يلي كيفية التعامل مع الصور الموجودة على الويب الحديث بحيث تبدو الصور رائعةً وتُحمّل على أي جهازٍ بسرعة. كما نشرح مجموعةً من المهارات والتقنيات لمكاملة الصور المتجاوبة ضمن تسلسل عمليات تطوير صفحات الويب؛ بحيث تتكيف هذه الصور وتُلائم حجوم إطارات العرض المختلفة وسيناريوهات الاستخدام المتعددة.

الصور في لغات الترميز markup

يُعدّ العنصر img من العناصر الأساسية القوية فهو ينزِّل المحتوى ويفك ترميزه ويعرضه، كما تدعم المتصفحات الحديثة طيفًا واسعًا من تنسيقات الصور. لا يختلف تضمين الصور في الأجهزة المختلفة عن تضمينها في حاسوبٍ مكتبي مع ضرورة إجراء بعض التعديلات الطفيفة أحيانًا لتحقيق تجربة استخدامٍ جيدة. يجب عمومًا الانتباه لما يلي:

  • استخدام الحجوم النسبية للصور لمنع امتدادها خارج حاويتها عن طريق الخطأ.
  • استخدام العنصر picture لتحديد صورٍ مختلفة تظهر واحدةٌ منها وفق مواصفات جهاز العرض (الإدارة الفنية).
  • استخدام السمة "مجموعة المصادر" srcset والسمة x في العنصر img لإرشاد المتصفح لاختيار الصورة الأنسب من بين كثافاتٍ مختلفة.
  • استخدام الصور السطرية inline في حال احتواء الصفحة على صورةٍ أو صورتين لتخفيض عدد طلبات تحميل ملف الصورة.

استخدام الحجم النسبي للصور

لا بُدّ من استخدام الوحدات النسبية عند تحديد عرض الصورة كي لا تمتد خارج إطار العرض عن طريق الخطأ؛ فعند تحديد العرض إلى width: 50% مثلًا، سيكون عرض الصورة دومًا 50% من عرض حاويتها وليس 50% من عرض إطار العرض أو من عرض الصورة نفسها.

يُمكن أيضًا أن نحتاج لاستخدام max-width: 100% وذلك لسماح أنماط CSS للمحتوى بالامتداد خارج حاويته. 

img, embed, object, video {
  max-width: 100%;
}

يجب توفير وصفٍ مفيدٍ للصورة باستخدام السمة alt في عناصر img؛ مما يُساعد قارئات الشاشة والتقنيات المساعدة الأخرى من الوصول للموقع بسهولةٍ أكبر.

تحسين عنصر الصور img باستخدام السمة srcset للأجهزة عالية الكثافة

تُحسّن السمة srcset من أداء العنصر img، حيث توفّر مجموعة ملفات صور متعددة للاختيار منها وفقًا لمواصفات الجهاز. على غرار الدالة image-set الأساسية في أنماط CSS، تسمح السمة srcset للمتصفح باختيار الصورة الأنسب وفقًا لمواصفات الجهاز، مثل استخدام صورة 2x على شاشة عرض 2x، أو ربما لاحقًا، صورة 1x على شاشة 2x عند محدودية النطاق الترددي للشبكة المستخدمة. 

<img src="photo.png" srcset="photo@2x.png 2x" ...>

تستخدم المتصفحات التي لا تدعم srcset ملف الصورة الافتراضي المُحدّد بالسمة src، لذا فمن المهم دومًا تضمين صورة 1x يُمكن عرضها على أي جهازٍ بغض النظر عن إمكاناته؛ أما في حال دعم السمة srcset، فتُحلّل قائمة الصور/الشروط المفصولة بفواصل قبل أي طلب، ومن ثم تُنزّل وتُعرض الصورة الأكثر ملاءمة.

يُمكن للشروط الموضوعة على الصور أن تحوي أي شيءٍ، مثل كثافة البكسلات والعرض والطول، إلا أن الكثافة فقط هي المدعومة حاليًا. يجب دومًا توفير صورة 2x لتحقيق التوازن بين السلوك الحالي والميزات المستقبلية لاحقًا.

الإدارة الفنية للصور المتجاوبة باستخدام العنصر picture

يُمكن تغيير الصور وفقًا لمواصفات الجهاز والمعروفة أيضًا باسم الإدارة الفنية، باستخدام العنصر picture؛ الذي يوفر إمكانية التصريح لمجموعةٍ من الصور المختلفة للاختيار منها وفقًا لمواصفات الجهاز، مثل الحجم والدقة والاتجاه وغيرها.

025art-direction.png

يتزايد دعم العنصر picture في المتصفحات، بالرغم من عدم توفره في جميعها بعد؛ ولكن يُنصح باستخدام هذا العنصر لتوافقه الكبير مع الإصدارات السابقة واحتمال استخدام المزايا التي توفّرها تقنيات الصور المتجاوبة المتوفرة في المشروع من النمط "نقص الدعم" Picturefill polyfill.

يُستخدم العنصر picture عند توفُّر الصورة بكثافاتٍ مختلفة؛ أو عندما يتطلب التصميم المتجاوب عرض صورٍ مختلفة على بعض أنواع الشاشات. وعلى غرار عنصر الفيديو video، يُمكن تضمين عدة عناصر "مصدر" source لتحديد ملفات صورٍ مختلفة اعتمادًا على استعلامات الوسائط أو تنسيق الصورة. 

<picture>
  <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
  <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
  <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>

يُمكن معاينة مثال github.io.

يستخدم المتصفح في المثال السابق الصورة head.jpg، أو الصورة head-2x.jpg (حسب دقة الجهاز) إذا كان عرضه 800px على الأقل؛ أما إذا كان عرض المتصفح بين 450px و 800px، فيستخدم head-small.jpg، أو head-small- 2x.jpg (حسب دقة الجهاز)؛ بينما تُعرض الصورة المُحدّدة في العنصر img (والواجب تضمينه دائمًا) على الشاشات ذات العرض الأصغر من 450px، أو في حال عدم دعم العنصر picture.

الصور ذات الحجم النسبي

يُمكن أن يكون صعبًا تحديد كثافة الصور في حال عدم معرفة الحجم النهائي للصورة، خصوصًا مع الصور المُنسابة والتي يُمكن أن تمتد لتتناسب مع عرض المتصفح. يُمكن عوضًا عن تقديم حجوم وكثافات ثابتة، تحديد حجم كل صورة بضبط سمة العرض إضافًة لحجم عنصر الصورة؛ مما يسمح للمتصفح حساب كثافة البكسلات تلقائيًا واختيار الصورة الأنسب للتنزيل. 

<img src="lighthouse-200.jpg" sizes="50vw"
     srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w,
             lighthouse-400.jpg 400w, lighthouse-800.jpg 800w,
             lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w,
             lighthouse-1800.jpg 1800w" alt="a lighthouse">

يُمكن معاينة المثال

يعرض المثال السابق صورةً لها نصف عرض إطار العرض sizes="50vw"‎، ويختار المتصفح الصورة المناسبة اعتمادًا على عرض المتصفح وعلى نسبة البكسلات في الجهاز وذلك بغض النظر عن حجم نافذة المتصفح. يُبين الجدول التالي بعض الأمثلة عن الصور التي سيختارها المتصفح:

عرض المتصفح نسبة البكسلات للجهاز الصورة المستخدمة الدقة الفعلية
1x 200.jpg 1 400px
2x 400.jpg 2 400px
2.5x 400.jpg 2 320px
2.67x 800.jpg 2 600px
3.125x 1000.jpg 3 640px
1.45x 800.png 1 1100px

الصور المتجاوبة والنقاط الحدية

يُمكن تغيير حجم الصورة اعتمادًا على النقاط الحدّية المُحدّدة في تخطيط الموقع. مثلًا: يُمكن تفضيل امتداد صورة على كامل عرض إطار العرض في شاشة صغيرة، مع وضعها في جزء صغير من شاشة كبيرة. 

<img src="400.png" 
     sizes="(min-width: 600px) 25vw, (min-width: 500px) 50vw, 100vw"
     srcset="100.png 100w, 200.png 200w, 400.png 400w,
             800.png 800w, 1600.png 1600w, 2000.png 2000w" alt="an example image">

يُمكن معاينة المثال

تستخدم سمة الحجوم sizes في المثال السابق عدة استعلامات وسائط لتحديد حجم الصورة. يُصبح حجم الصورة 25% من عرض إطار العرض عندما يتجاوز عرض المتصفح 600px؛ بينما يُصبح 50% من عرض إطار العرض عندما يكون عرض المتصفح بين 500px و 600px؛ أما عندما يكون عرض المتصفح أقل من 500px، فتمتد الصورة على كامل عرض المتصفح.

توسيع صور المنتجات

يحتاج مستخدمو مواقع التجارة الإلكترونية لمعاينة مشاهد مُقرّبة من المنتجات بدقة عالية بهدف تفحص تفاصيل المنتج، كما تؤكد الدراسات الإحباط الكبير لهؤلاء المستخدمين إذا لم يتمكنوا من ذلك.

يوفر موقع J. Crew مثالًا جيدًا للصور القابلة للنقر والتوسيع حيث يظهر على كل صورة شريط صغير (يختفي عند النقر) يُعلّم المستخدم بإمكانية النقر على الصورة لتكبيرها ومعاينة تفاصيلها.

027sw-make-images-expandable-good.png

تقنيات أخرى مع الصور

الصور المضغوطة

توفر تقنيات الصور المضغوطة compressive image technique صورًا مضغوطة 2x تُناسب جميع الأجهزة مهما كانت إمكاناتها؛ حيث ينخفض حجم الصور كثيرًا (حسب نوع الصورة ودرجة الضغط) مع عدم ملاحظة أي تغيير في جودة الصورة. ويُمكن معاينة مثال compressive.html

يجب توخي الحذر عند استخدام التقانات الضاغطة، حيث تتطلب ذاكرةً أكبر ومعالجةً أكثر لفك الضغط. يُعدّ تغيير حجم الصور الكبيرة لملاءمة الشاشات الصغيرة أمرًا مُكلفًا ويُمكن أن يكون مرهقًا خصوصًا للأجهزة قليلة الإمكانات ذات الذاكرة الصغيرة والمعالجة المحدودة.

استبدال الصور باستخدام JavaScript

يُمكن استخدام سكريبت جافا لفحص قدرات الجهاز ومن ثم إجراء الأنسب؛ حيث يُمكن مثًلا معرفة نسبة بكسلات الجهاز باستخدام window.devicePixelRatio؛ كما يُمكن معرفة طول الشاشة وعرضها؛ إضافًة لإمكانية فحص ميزات الاتصال الشبكي باستخدام navigator.connection أو إجراء طلبٍ مزيف. وعند الحصول على جميع هذه المعلومات، ستُحدّد الصورة المناسبة للتحميل.

يُعدّ تأخير تحميل الصورة حتى انتهاء عمليات الفحص والتحقق أحد سلبيات استخدام JavaScript؛ مما يعني أن تحميل الصور لن يبدأ إلا بعد تشغيل حدث تحميل الصفحة pageload. علاوًة على ذلك، يُمكن أن يُنزِّل المتصفح كلًا من الصور 1x و 2x مما يؤدي لزيادة حجم الصفحة.

الصور السطرية- الصور النقطية والصور المتجهة

تُنشأ الصور وتُخزّن باستخدام طريقتين مختلفتين تمامًا مما ينعكس على طريقة نشر الصور على نحوٍ متجاوب.

الصور النقطية: مثل الصور الفوتوغرافية وغيرها، والتي تُمثّل بشبكةٍ من نقاط الألوان (البكسلات). تُنتِج الكاميرات والماسحات الضوئية الصور النقطية عادًة، كما يُمكن إنتاجها باستخدام عناصر الحاويات canavas في HTML. تُستخدم التنسيقات، مثل PNG و JPEG و WebP لتخزين هذا النوع من الصور.

الصور المتجهة: تُعرّف هذه الصور باستخدام مجموعة من المنحنيات والخطوط والأشكال وألوان التعبئة والتدرجات اللونية، مثل الشعارات logo والرسومات الخطية. يُمكن إنشاء الصور المتجهة باستخدام برامجٍ متخصصة، مثل Adobe Illustrator أو Inkscape، أو استخدام لغة ترميزٍ معينة، مثل لغة الرسومات المتجهة القابلة للتحجيم Scalable Vector Graphics.

الرسومات المتجهة SVG القابلة للتحجيم

تُمكّن الرسومات SVG من تضمين رسوماتٍ متجهةٍ متجاوبة في صفحة ويب. تُعدّ إمكانية المستعرض عرض صورةٍ متجهة بأي حجم من أهم ميزات تنسيقات الملفات المتجهة موازنةً مع تنسيقات الملفات النقطية. كما تصف تنسيقات متجهات SVG هندسة الصورة (أي كيفية بنائها من الخطوط والمنحنيات والألوان وما إلى ذلك). على النقيض من ذلك، لا تحتوي التنسيقات النقطية إلا على معلوماتٍ حول نقاط الألوان، مما يتوجب على المتصفح تخمين كيفية ملء الفراغات (البكسلات الناقصة) عند عملية تحجيم الصورة.

يُظهر الشكل التالي نسختين من نفس الصورة: صورة PNG على اليسار و SVG على اليمين. تبدو الصورة SVG رائعًة بأي حجم، بينما تزداد ضبابية الصورة PNG مع ازدياد عرض الشاشة.

See the Pen Images SVG vs. PNG by Hsoub (@Hsoub) on CodePen.

يُمكن تنسيق الصور السطرية باستخدام تنسيق SVG، أو Data URI لتخفيض عدد طلبات ملف الصورة التي تفعلها الصفحة. بمعاينة المثال التالي، يظهر تعريف كلا الشعارين سطريًا باستخدام تنسيقي SVG و Data URI.

See the Pen Untitled by Hsoub (@Hsoub) on CodePen.

تتمتع رسومات SVG بدعمٍ كبير على الأجهزة المحمولة والحواسيب المكتبية، كما يُمكن أن تُخفّض أدوات التحسين optimization tools كثيرًا من حجم ملف صورة SVG. يبدو كلا الشعارين SVG التاليين متطابقين، إلا أن لأحدهما حجم 3 كيلوبايت، وللآخر حجم 2 كيلوبايت فقط.

See the Pen Images SVG by Hsoub (@Hsoub) on CodePen.

روابط البيانات

توفّر روابط البيانات Data URIs طريقةً لتضمين ملف (ملف صورة مثلًا) سطريًا inline عن طريق ضبط سمة المصدر src للعنصر img باستخدام سلسلة نصية مُرمزة "Base64" ومع التنسيق التالي: 

<img src="data:image/svg+xml;base64,[data]">

مثلًا: تكون بداية الشيفرة للشعار HTML5 السابق على النحو التالي (طول الشيفرة الكلي أكثر من 5000 محرف): 

<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiB
BZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW ...">

توفِّر مثل الأداة المتاحة jpillora.com/base64-encoder إمكانية تحويل أي ملفٍ ثنائي، مثل الصور إلى روابط بيانات؛ حيث يكفي سحب ملف الصورة وإفلاته على الأداة. وعلى غرار الرسومات SVG، تُدعم روابط البيانات جيدًا من قِبل متصفحات الأجهزة المحمولة والحواسيب المكتبية.

النمط السطري في CSS

يُمكن وضع روابط البيانات والرسومات SVG بنمطٍ سطري inline في CSS، حيث تَدعم متصفحات الأجهزة المحمولة والحواسيب المكتبية هذا النمط. يُبين الشكل التالي صورتين (تبدوان متطابقتين) موضوعتين مثل صور خلفية في CSS الأولى باستخدام روابط بيانات والثانية باستخدام SVG. 

<span class="side-by-side" id="data_uri"></span>
<span class="side-by-side" id="svg"></span>

<style>
.side-by-side {
   display: inline-block;
   margin: 0 20px 0 0;
   width: 45%;
}

span#data_uri {
   background: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2016.0.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0D%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20width%3D%22396.74px%22%20height%3D%22560px%22%20viewBox%3D%22281.63%200%20396.74%20560%22%20enable-background%3D%22new%20281.63%200%20396.74%20560%22%20xml%3Aspace%3D%22preserve%22%0D%0A%09%3E%0D%0A%3Cg%3E%0D%0A%09%3Cg%3E%0D%0A%09%09%3Cg%3E%0D%0A%09%09%09%3Cpolygon%20fill%3D%22%23E44D26%22%20points%3D%22409.737%2C242.502%20414.276%2C293.362%20479.828%2C293.362%20480%2C293.362%20480%2C242.502%20479.828%2C242.502%20%09%09%09%0D%0A%09%09%09%09%22%2F%3E%0D%0A%09%09%09%3Cpath%20fill%3D%22%23E44D26%22%20d%3D%22M281.63%2C110.053l36.106%2C404.968L479.757%2C560l162.47-45.042l36.144-404.905H281.63z%20M611.283%2C489.176%0D%0A%09%09%09%09L480%2C525.572V474.03l-0.229%2C0.063L378.031%2C445.85l-6.958-77.985h22.98h26.879l3.536%2C39.612l55.315%2C14.937l0.046-0.013v-0.004%0D%0A%09%09%09%09L480%2C422.35v-79.32h-0.172H368.853l-12.207-136.871l-1.189-13.325h124.371H480v-49.668h162.17L611.283%2C489.176z%22%2F%3E%0D%0A%09%09%09%3Cpolygon%20fill%3D%22%23F16529%22%20points%3D%22480%2C192.833%20604.247%2C192.833%20603.059%2C206.159%20600.796%2C231.338%20599.8%2C242.502%20599.64%2C242.502%20%0D%0A%09%09%09%09480%2C242.502%20480%2C293.362%20581.896%2C293.362%20595.28%2C293.362%20594.068%2C306.699%20582.396%2C437.458%20581.649%2C445.85%20480%2C474.021%20%0D%0A%09%09%09%09480%2C474.03%20480%2C525.572%20611.283%2C489.176%20642.17%2C143.166%20480%2C143.166%20%09%09%09%22%2F%3E%0D%0A%09%09%09%3Cpolygon%20fill%3D%22%23F16529%22%20points%3D%22540.988%2C343.029%20480%2C343.029%20480%2C422.35%20535.224%2C407.445%20%09%09%09%22%2F%3E%0D%0A%09%09%09%3Cpolygon%20fill%3D%22%23EBEBEB%22%20points%3D%22414.276%2C293.362%20409.737%2C242.502%20479.828%2C242.502%20479.828%2C242.38%20479.828%2C223.682%20%0D%0A%09%09%09%09479.828%2C192.833%20355.457%2C192.833%20356.646%2C206.159%20368.853%2C343.029%20479.828%2C343.029%20479.828%2C293.362%20%09%09%09%22%2F%3E%0D%0A%09%09%09%3Cpolygon%20fill%3D%22%23EBEBEB%22%20points%3D%22479.828%2C474.069%20479.828%2C422.4%20479.782%2C422.413%20424.467%2C407.477%20420.931%2C367.864%20%0D%0A%09%09%09%09394.052%2C367.864%20371.072%2C367.864%20378.031%2C445.85%20479.771%2C474.094%20480%2C474.03%20480%2C474.021%20%09%09%09%22%2F%3E%0D%0A%09%09%09%3Cpolygon%20points%3D%22343.784%2C50.229%20366.874%2C50.229%20366.874%2C75.517%20392.114%2C75.517%20392.114%2C0%20366.873%2C0%20366.873%2C24.938%20%0D%0A%09%09%09%09343.783%2C24.938%20343.783%2C0%20318.544%2C0%20318.544%2C75.517%20343.784%2C75.517%20%09%09%09%22%2F%3E%0D%0A%09%09%09%3Cpolygon%20points%3D%22425.307%2C25.042%20425.307%2C75.517%20450.549%2C75.517%20450.549%2C25.042%20472.779%2C25.042%20472.779%2C0%20403.085%2C0%20%0D%0A%09%09%09%09403.085%2C25.042%20425.306%2C25.042%20%09%09%09%22%2F%3E%0D%0A%09%09%09%3Cpolygon%20points%3D%22508.537%2C38.086%20525.914%2C64.937%20526.349%2C64.937%20543.714%2C38.086%20543.714%2C75.517%20568.851%2C75.517%20568.851%2C0%20%0D%0A%09%09%09%09542.522%2C0%20526.349%2C26.534%20510.159%2C0%20483.84%2C0%20483.84%2C75.517%20508.537%2C75.517%20%09%09%09%22%2F%3E%0D%0A%09%09%09%3Cpolygon%20points%3D%22642.156%2C50.555%20606.66%2C50.555%20606.66%2C0%20581.412%2C0%20581.412%2C75.517%20642.156%2C75.517%20%09%09%09%22%2F%3E%0D%0A%09%09%09%3Cpolygon%20fill%3D%22%23FFFFFF%22%20points%3D%22480%2C474.021%20581.649%2C445.85%20582.396%2C437.458%20594.068%2C306.699%20595.28%2C293.362%20581.896%2C293.362%20%0D%0A%09%09%09%09480%2C293.362%20479.828%2C293.362%20479.828%2C343.029%20480%2C343.029%20540.988%2C343.029%20535.224%2C407.445%20480%2C422.35%20479.828%2C422.396%20%0D%0A%09%09%09%09479.828%2C422.4%20479.828%2C474.069%20%09%09%09%22%2F%3E%0D%0A%09%09%09%3Cpolygon%20fill%3D%22%23FFFFFF%22%20points%3D%22479.828%2C242.38%20479.828%2C242.502%20480%2C242.502%20599.64%2C242.502%20599.8%2C242.502%20600.796%2C231.338%20%0D%0A%09%09%09%09603.059%2C206.159%20604.247%2C192.833%20480%2C192.833%20479.828%2C192.833%20479.828%2C223.682%20%09%09%09%22%2F%3E%0D%0A%09%09%3C%2Fg%3E%0D%0A%09%3C%2Fg%3E%0D%0A%3C%2Fg%3E%0D%0A%3C%2Fsvg%3E%0D%0A) no-repeat;
   background-size: cover;
   height: 484px;
}

span#svg {
   background: url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='50%' height='560px' viewBox='281.63 0 396.74 560' enable-background='new 281.63 0 396.74 560' xml:space='preserve'><g><g><g><polygon fill='#E44D26' points='409.7,242.5 414.3,293.4 479.8,293.4 480,293.4 480,242.5 479.8,242.5'/><path fill='#E44D26' d='M281.63 110.053l36.106 404.968L479.757 560l162.47-45.042l36.144-404.905H281.63z M611.283 489.2 L480 525.572V474.03l-0.229 0.063L378.031 445.85l-6.958-77.985h22.98h26.879l3.536 39.612l55.315 14.937l0.046-0.013v-0.004 L480 422.35v-79.32h-0.172H368.853l-12.207-136.871l-1.189-13.325h124.371H480v-49.668h162.17L611.283 489.176z'/><polygon fill='#F16529' points='480,192.8 604.2,192.8 603.1,206.2 600.8,231.3 599.8,242.5 599.6,242.5 480,242.5 480,293.4 581.9,293.4 595.3,293.4 594.1,306.7 582.4,437.5 581.6,445.9 480,474 480,474 480,525.6 611.3,489.2 642.2,143.2 480,143.2'/><polygon fill='#F16529' points='541,343 480,343 480,422.4 535.2,407.4'/><polygon fill='#EBEBEB' points='414.3,293.4 409.7,242.5 479.8,242.5 479.8,242.4 479.8,223.7 479.8,192.8 355.5,192.8 356.6,206.2 368.9,343 479.8,343 479.8,293.4'/><polygon fill='#EBEBEB' points='479.8,474.1 479.8,422.4 479.8,422.4 424.5,407.5 420.9,367.9 394.1,367.9 371.1,367.9 378,445.9 479.8,474.1 480,474 480,474'/><polygon points='343.8,50.2 366.9,50.2 366.9,75.5 392.1,75.5 392.1,0 366.9,0 366.9,24.9 343.8,24.9 343.8,0 318.5,0 318.5,75.5 343.8,75.5'/><polygon points='425.3,25 425.3,75.5 450.5,75.5 450.5,25 472.8,25 472.8,0 403.1,0 403.1,25 425.3,25'/><polygon points='508.5,38.1 525.9,64.9 526.3,64.9 543.7,38.1 543.7,75.5 568.9,75.5 568.9,0 542.5,0 526.3,26.5 510.2,0 483.8,0 483.8,75.5 508.5,75.5'/><polygon points='642.2,50.6 606.7,50.6 606.7,0 581.4,0 581.4,75.5 642.2,75.5'/><polygon fill='#FFFFFF' points='480,474 581.6,445.9 582.4,437.5 594.1,306.7 595.3,293.4 581.9,293.4 480,293.4 479.8,293.4 479.8,343 480,343 541,343 535.2,407.4 480,422.4 479.8,422.4 479.8,422.4 479.8,474.1'/><polygon fill='#FFFFFF' points='479.8,242.4 479.8,242.5 480,242.5 599.6,242.5 599.8,242.5 600.8,231.3 603.1,206.2 604.2,192.8 480,192.8 479.8,192.8 479.8,223.7'/></g></g></g></svg>) no-repeat;
   background-size: cover;
   height: 484px;
}

</style>

الناتج:

 

الإيجابيات والسلبيات

رغم طول الشيفرة للصور، لاسيما عند استخدام روابط البيانات، فإنها تؤدي للتقليل من طلبات HTTP؛ حيث يُمكن تحميل صفحةٍ تحتوي صورًا وأنماط CSS وسكريبت جافا مرةً واحدةً فقط.

من أهم سلبيات هذه الطريقة:

  • يُمكن أن يستغرق إظهار الصور مع روابط بيانات وقتًا أطول بكثير من الصور مع مصدر src خارجي على الهواتف المحمولة.
  • يُمكن أن تزيد روابط البيانات من حجم صفحة HTML كثيرًا.
  • يُمكن أن تزيد من تعقيد الشيفرة وتسلسل خطوات العمل في إنشاء الصفحة.
  • زيادة حجم روابط البيانات بحوالي 30% عن حجم الملف الثنائي، وبالتالي لن تُخفف هذه الطريقة من حجم التنزيل الكلي.
  • غير مدعومة أبدًا في IE6 و IE7، مع توفُّر دعمٍ جزئي في IE8.
  • لا تعود مسألة تخفيض عدد الطلبات ملحة عند استخدام HTTP/2.

نحتاج دومًا لاختبار ما يعمل على نحوٍ أفضل لتحقيق التجاوب الجيد. يُمكن استخدام أدوات المطور لقياس حجم الملف المُنزّل وعدد الطلبات ووقت الاستجابة الكلي. قد تكون روابط البيانات اختيارًا موفقًا للصور النقطية لصفحةٍ رئيسة تحتوي صورةً واحدةً أو اثنتين غير مستخدمتين في أماكن أخرى في الموقع؛ أما عند الحاجة لصورٍ سطرية متجهة، تكون رسومات SVG هي الخيار الأفضل.

الصور في أنماط CSS

تُعدّ خاصية الخلفية background في CSS أداةً مهمةً لإضافة صورٍ معقدة إلى العناصر؛ حيث أنها تُسهّل إضافة صورٍ متعددة وتكرارها وغير ذلك من الأمور؛ كما تزداد قوة هذه الخاصية عند دمجها مع استعلامات الوسائط، مما يتيح تحميل الصوره شرطيًا وفقًا لدقة الشاشة وحجم إطار العرض وغير ذلك من مواصفات الجهاز.

  • يجب تغيير خاصية صورة الخلفية background-image في CSS لأجهزة العرض عالية الدقة، وذلك باستخدام استعلامات الوسائط مع الدقة الأدنى min-resolution و نسبة البكسلات الأدنى webkit-min-device-pixel-ratio-.
  • يجب استخدام مجموعة المصادر srcset لتوفير صورٍ عالية الدقة إضافًة إلى الصورة 1x في الشيفرة.
  • يجب التدقيق في التأثير على الأداء عند استخدام تقنيات استبدال الصور في سكريبت جافا، وعند توفير صورٍ مضغوطةٍ عالية الدقة لأجهزةٍ ذات دقة منخفضة.

استخدام استعلامات الوسائط للتحميل الشرطي للصور أو للإدارة الفنية

يُمكن استخدام استعلامات الوسائط لتغيير تخطيط الصفحة، كما يُمكن استخدامها أيضًا لتحميل الصور شرطيًا، أو لتوفير الإدارة الفنية وفقًا لعرض إطار العرض.

يُظهر المثال التالي طلب تنزيل الملف small.png فقط ووضعه في محتوى الحاوية div على الشاشات الصغيرة؛ أما على الشاشات الأكبر، فيكون لخلفية جسم الصفحة صورة (background-image: url(body.png، وللحاوية صورةٌ أخرى (background-image: url(large.png. 

.example {
  height: 400px;
  background-image: url(small.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
}

@media (min-width: 500px) {
  body {
    background-image: url(body.png);
  }
  .example {
    background-image: url(large.png);
  }
}

يُمكن معاينة المثال السابق.

استخدام image-set لتوفير صور عالية الدقة

تُحسّن الدالة ()image-set من أداء خاصية الخلفية background عن طريق توفير مجموعةٍ متعدّدة من الصور وفقًا لمواصفات الجهاز المختلفة؛ مما يسمح للمتصفح باختيار أفضل صورة اعتمادًا على خصائص الجهاز، حيث يمكن مثلًا استخدام صورة 2x على جهاز 2x وصورة 1x على جهاز 2x عند محدودية حيز النطاق التراسلي للشبكة. 

background-image: image-set(
  url(icon1x.jpg) 1x,
  url(icon2x.jpg) 2x
);

يقيس المتصفح الصورة المناسبة إضافًة إلى تنزيلها، حيث يفترض المتصفح أن حجم الصور 2x أكبر مرتين من الصور 1x، وبالتالي يُخفَّض حجم الصورة 2x بنسبة 2، بحيث تظهر الصورة بنفس الحجم على الصفحة.

يجب توفير صورةٍ احتياطية لاستخدامها في حالة عدم توفر الدعم للدالة ()image-set، حيث ما زال دعم هذه الدالة جديدًا ومتوفرًا على كلٍ من Chrome و Safari فقط مع بادئة محرك المتصفح webkit-. ألقِ نظرةً على ما يلي على سبيل المثال: 

.sample {
  width: 128px;
  height: 128px;
  background-image: url(icon1x.png);
  background-image: -webkit-image-set(  
    url(icon1x.png) 1x,  
    url(icon2x.png) 2x  
  );  
  background-image: image-set(  
    url(icon1x.png) 1x,  
    url(icon2x.png) 2x  
  );
}

يمكن معاينة المثال السابق.

تطلب الشيفرة السابقة تحميل الصورة المناسبة على المتصفحات التي تدعم الدالة ()image-set؛ وإلا فتُستخدم الصورة 1x. وبهذا ستحصل المتصفحات التي لا تدعم الدالة على الصور 1x.

استخدام استعلامات الوسائط لتوفير صور عالية الدقة أو الإدارة الفنية

يُمكن لاستعلامات الوسائط إنشاء قواعدٍ بناءً على نسبة بكسلات الجهاز device pixel ratio، مما يُمكّن من توفير صورٍ مختلفة لشاشات 1x وشاشات 2x. 

@media (min-resolution: 2dppx),
(-webkit-min-device-pixel-ratio: 2)
{
  /* الأنماط عالية الكثافة والمصادر هنا */
}

تدعم المتصفحات Chrome و Firefox و Opera معيار الدقة الأدنى (min-resolution: 2dppx)؛ بينما يتطلب كلٌ من متصفحي Safari و Android كتابة القيمة بدون الوحدة dppx.

يجب الانتباه إلى حدوث تحميل هذه الأنماط فقط عند مطابقة الجهاز لاستعلام الوسائط، وبالتالي يجب تحديد هذه الأنماط من أجل الحالة الأساسية، وهذا يضمن عرض شيءٍ ما إذا كان المتصفح لا يدعم استعلامات الوسائط الخاصة بالدقة. 

.sample {
  width: 128px;
  height: 128px;
  background-image: url(icon1x.png);
}

@media (min-resolution: 2dppx), /* Standard syntax */ 
(-webkit-min-device-pixel-ratio: 2)  /* Safari & Android Browser */ 
{
  .sample {
    background-size: contain;
    background-image: url(icon2x.png);
  }
}

يمكن معاينة المثال السابق. ويُمكن أيضًا استخدام خاصية العرض الأدنى min-width لإظهار صورٍ بديلة اعتمادًا على حجم إطار العرض؛ حيث تتمتع هذه التقنية بميزة عدم تنزيل الصورة في حال عدم تحقق استعلام الوسائط. على سبيل المثال: تُنزّل الصورة bg.png وتوضع في الجسم body، إذا كان عرض المتصفح أكبر أو يساوي 500px فقط: 

@media (min-width: 500px) {
  body {
    background-image: url(bg.png);
  }
}

استخدام رسومات SVG للأيقونات

تُستخدم الرسومات المتجهة SVG لإضافة الأيقونات للصفحة عندما يكون ذلك مُمكنًا، أو المحارف unicode في بعض الحالات.

استبدال الأيقونات البسيطة بـالمحارف unicode

يدعم الكثير من الخطوط المحارف الرسومية unicode، والتي يُمكن استخدامها عوضًا عن الصور لا سيما وأنها على خلاف الصور تظهر جيدًا مهما كان حجمها.

تتضمن المحارف الرسومية إضافًة إلى المحارف العادية، رموز الأسهم (←) والمعاملات الرياضية (√) والأشكال الهندسية (★) وصور التحكم (▶) والعلامات الموسيقية (♬) والأحرف اليونانية (Ω) وحتى قطع الشطرنج ( ♞).

تُضمّن هذه المحارف بنفس طريقة تدوين الكائنات على النحو التالي: XXXX&#؛ حيث يُمثّل XXXX رقم محرف unicode. ألقِ نظرةً على المثال التالي: 

You're a super &#9733;

والذي يُظهِر:

You're a super ★

استبدال الأيقونات المعقدة برسومات SVG

يُمكن استخدام رسومات SVG للأيقونات الأكثر تعقيدًا؛ نظرًا لأن هذه الرسومات خفيفة وسهلة الاستخدام عمومًا، كما يُمكن تصميمها باستخدام أنماط CSS. وتتمتع بالمزايا التالية موزانةً مع الصور النقطية:

  • يُمكن تحجيم الرسومات المتجهة بلا حدود.
  • يُمكن استخدام تأثيرات CSS مثل اللون والتظليل والشفافية والتحريك مباشرةً.
  • يُمكن تضمين هذه الرسومات سطريًا inline.
  • توفر دلالة واضحة.
  • توفر إمكانية وصول أفضل مع استخدام السمات المناسبة. 
With SVG icons, you can either add icons using inline SVG, like 
this checkmark:
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
       xmlns:xlink="http://www.w3.org/1999/xlink" 
       width="32" height="32" viewBox="0 0 32 32">
    <path d="M27 4l-15 15-7-7-5 5 12 12 20-20z" fill="#000000"></path>
  </svg>
or by using an image tag, like this credit card icon:
<img src="credit.svg">.

يُمكن معاينة المثال السابق.

إرشادات استخدام الخطوط للأيقونات

يشيع استخدام الخطوط للأيقونات لسهولة استخدامها، إلا أن لها بعض العيوب موزانةً مع أيقونات رسومات SVG:

  • تُنشَأ باستخدام رسوميات مُتجهة، مما يُمكّن من تحجيمها بلا حدود؛ ولكن يُمكن أن تكون غير مصقولة، مما يُعطي أحيانًا أيقونات غير دقيقة كما هو متوقع منها أن تكون.
  • لا توفِّر دعمًا كاملًا لأنماط CSS.
  • يُمكن أن يكون تحقيق التوضع المثالي للبيكسل أمرًا صعبًا اعتمادًا على ارتفاع الخط وتباعد المحارف وغير ذلك.
  • لا توفر الدلالة semantic، مما يجعل من الصعب استخدامها مع قارئات الشاشة أو التقنيات المساعدة الأخرى.
  • يُمكن أن ينتج عن استخدام مجموعةٍ فرعيةٍ صغيرةٍ فقط منها حجم ملفٍ كبير ما لم يُحدّد نطاقها صحيحًا.

يُبين الشكل التالي مثالًا لصفحة تستخدم الخطوط FontAwesome:

031icon-fonts.png 

With Font Awesome, you can either add icons by using a unicode
entity, like this HTML5 logo (<span class="awesome"></span>)
or by adding special classes to an <i> element like the CSS3
logo (<i class="fa fa-css3"></i>).

يُمكن معاينة المثال السابق.

تتوفر المئات من خطوط الأيقونات المجانية والمدفوعة بما في ذلك Font Awesome و Pictos و Glyphicons.

يجب التأكد من التوازن بين طلبات HTTP الإضافية وحجم الملف حين الحاجة للأيقونات؛ حيث يُفضل استخدام صورةٍ، أو مجموعة صور مُضمّنة في صورةٍ واحدة image sprite في حال الحاجة لعددٍ قليل من الأيقونات.

تحسين الصور لتحقيق الأداء الأمثل

تُشكّل الصور غالبًا العدد الأكبر من البايتات المُنزّلة كما أنها تشغل قسمًا كبيرًا من المساحة المرئية على الصفحة. وبالنتيجة، يؤدي تحسين الصور إلى تخفيض عدد البايتات اللازم وبالتالي تحسين أداء الموقع؛ فكلما انخفض عدد البايتات الواجب تنزيلها، انخفض التنافس على حجز حيّز النطاق التراسلي، وزادت سرعة التحميل والعرض.

  • يجب عدم اختيار تنسيق الصورة عشوائيًا، بل يجب فهم التنسيقات المختلفة المتاحة واستخدام التنسيق الأنسب.
  • يجب تضمين أدوات تحسين الصور وضغطها في سير العمل على الموقع لتخفيض حجم الملفات.
  • يُمكن تقليل عدد طلبات http عن طريق وضع الصور المُستخدمة على نحوٍ متكرر في حاوية صور image sprites.
  • يُمكن تحسين زمن تحميل الصفحة الأولى والتخفيف من وزنها بتحميل الصور فقط عند الوصول إليها.

اختيار التنسيق الصحيح

يجب الانتباه لنوعين من الصور، وهما: الصور المتجهة و الصور النقطية. ونحتاج اختيار تنسيق الضغط المناسب بالنسبة للصور النقطية، مثل GIF و PNG و JPG.

الصور النقطية: مثل الصور الفوتوغرافية وغيرها، والتي تُمثّل بشبكةٍ من نقاط الألوان (البكسلات). تُنتج الكاميرات والماسحات الضوئية الصور النقطية عادًة، كما يُمكن إنتاجها باستخدام عناصر الحاويات canavas في HTML؛ وكلما زاد حجم الصورة، زاد حجم الملف أيضًا. عندما يتغير حجم الصورة إلى حجمٍ أكبر من حجمها الأصلي، تُصبح الصور النقطية ضبابية، لأن المتصفح يحتاج إلى تخمين كيفية ملء البكسلات الناقصة.

الصور المُتجهة: تُعرّف هذه الصور باستخدام مجموعةٍ من المنحنيات والخطوط والأشكال وألوان التعبئة والتدرجات اللونية، مثل الشعارات logo والرسومات الخطية، ويُمكن إنشاؤها باستخدام برامجٍ متخصصة، مثل Adobe Illustrator أو Inkscape؛ وتُحفَظ بتنسيقٍ متجه، مثل SVG. نظرًا لأن الصور المتجهة مبنية على عناصر أولية بسيطة، يُمكن تحجيمها دون أي خسارةٍ في الجودة، أو تغييرٍ في حجم الملف.

من المهم الانتباه لمنشأ الصورة (نقطية أو متجهة) والمحتوى (الألوان، التحريك، النص،..) عند اختيار التنسيق المناسب. لا يوجد تنسيقٌ واحدٌ يُناسب جميع أنواع الصور؛ إذ لكل تنسيق نقاط قوة وضعف.

من الإرشادات الأساسية لاختيار التنسيق المناسب:

  • استخدام JPG للصور الفوتوغرافية.
  • استخدام الرسوميات SVG للرسومات المتجهة والرسومات ذات الألوان الصلبة مثل الأيقونات والخطوط الفنية؛ وفي حال كان الرسم المتجه غير متاح، يُمكن تجربة التنسيقات WebP، أوPNG.
  • استخدام PNG عوضًا عن GIF، لأنها تتيح المزيد من الألوان وتوفر نسب ضغط أفضل.
  • استخدام عنصر الفيديو <video> للحصول على زمن تحريك أطول، والذي يوفر أيضًا نوعية صور أفضل، إضافًة لتحكُّم المستخدم في تشغيل العرض.

تخفيض حجم الملف

يُمكن تخفيض حجم ملف الصورة إلى حدٍ كبير عن طريق "المعالجة اللاحقة" للصور بعد حفظها. يتوفر العديد من الأدوات المتاحة لضغط الصور مع ضياع بعض البيانات أو بدون ضياع؛ ومنها متاحٌ على الويب؛ ومنها على هيئة برامج ذات واجهات رسومية أو سطور أوامر. من الأفضل تضمين عمليات تحسين الصور على نحوٍ مؤتمت ضمن سير العمل في بناء الموقع.

تتوفر العديد من الأدوات ذات الأداء العالي والتي تضغط الصور دون ضياعٍ لبيانات الملفات JPG و PNG، وبدون أي تأثير على جودة الصورة. يُمكن استخدام الأدوات jpegtran أو jpegoptim (متوفر على لينكس Linux فقط؛ ويجب تشغيله مع خيار إزالة الكل strip-all--) للصور JPG؛ بينما يُمكن استخدام OptiPNG أو PNGOUT للصور PNG.

استخدام تتابع الصور

تسمح تقنية التتابع CSS spriting بدمج مجموعةٍ من الصور في "صورةٍ واحدة sprite sheet". يُمكن بعد ذلك انتقاء صورةٍ منها للعرض عن طريق تحديد الصورة الخلفية لعنصر sprite sheet مع تحديد الإزاحة المناسبة لعرض الجزء المطلوب.

032sprite-sheet.png 

.sprite-sheet {
  background-image: url(sprite-sheet.png);
  width: 40px;
  height: 25px;
}

.google-logo {
  width: 125px;
  height: 45px;
  background-position: -190px -170px;
}

.gmail {
  background-position: -150px -210px; 
}

.maps {
  height: 40px;
  background-position: -120px -165px;
}

يُمكن معاينة المثال السابق.

يُخفّض التتابع من عدد التنزيلات المطلوبة للحصول على صور متعدّدة مع السماح بالتخزين المؤقت لها.

استخدام التحميل الكسول

يُمكن أن يؤدي استخدام التحميل الكسول إلى تسريعٍ كبير لتحميل الصفحات الطويلة، التي تتضمن العديد من الصور الموجودة أسفل الجزء المرئي من الصفحة، عن طريق تحميلها؛ إما عند الحاجة لعرضها؛ أو عند انتهاء تحميل المحتوى الأساسي وعرضه. يُمكن أن يؤدي استخدام التحميل الكسول إلى إنشاء تجارب تمرير لا نهائية إضافًة لتحسين الأداء.

يجب توخي الحذر عند إنشاء صفحات تمرير لا نهائية، لأن المحتوى يُحمّل عندما يُصبح مرئيًا فقط مما يجعل محركات البحث غير قادرةٍ على رؤية هذا المحتوى إطلاقًا. علاوًة على ذلك، فإن المستخدمين الذين يبحثون عن المعلومات التي يتوقعون رؤيتها في التذييل لا يرونه (أي التذييل) أبدًا نظرًا تحميل المحتوى الجديد دائمًا.

تجنب الصور نهائيا

يُمكن في بعض الحالات أن تكون الصورة الأفضل ليست صورةً على الإطلاق. يجب استخدام الإمكانات الأصلية للمتصفح لتوفير الوظائف نفسها أو وظائف مشابهة. تنشئ المستعرضات اليوم عناصرًا مرئية كانت تتطلب صورًا سابقًا؛ مما يعني أن المتصفحات لم تعد بحاجةٍ إلى تنزيل ملفات صور منفصلة، وبالتالي تتجنب حجم الصور غير الملائم. يُمكن استخدام خطوط يونيكود unicode أو خطوط الأيقونات الخاصة لعرض الأيقونات.

وضع النص في الشيفرة عوضا عن تضمينه في الصور

يجب أن يكون النص نصًا وليس مُضمّنًا في الصور كلما كان ذلك مُمكنًا؛ حيث يؤدي استخدام الصور للعناوين الرئيسية أو وضع معلومات الاتصال، مثل أرقام الهواتف أو العناوين في الصور إلى منع المستخدمين من نسخ المعلومات ولصقها؛ كما أن ذلك يجعل المعلومات غير متاحة لبرامج قراءة الشاشة وغير متجاوبة. عوضًا عن ذلك، يُمكن وضع النص في الشيفرة واستخدام خطوط الويب المتاحة لتحقيق النمط المطلوب.

استخدام أنماط CSS لاستبدال الصور

يُمكن للمتصفحات الحديثة استخدام خصائص CSS لإنشاء أنماط كانت تتطلب صورًا سابقًا. يُمكن مثلًا إنشاء التدرجات اللونية المعقدة باستخدام خاصية الخلفية background؛ ويُمكن إنشاء الظلال باستخدام صندوق الظلال box-shadow؛ كما يُمكن إضافة الزوايا المستديرة باستخدام خاصية نصف قطر الحدود border-radius.

033font.png 

<style>
  div#noImage {
    color: white;
    border-radius: 5px;
    box-shadow: 5px 5px 4px 0 rgba(9,130,154,0.2);
    background: linear-gradient(rgba(9, 130, 154, 1), rgba(9, 130, 154, 0.5));
  }
</style>

يجب الانتباه إلى أن استخدام هذه التقنيات يتطلب عدة دورات للإظهار؛ مما يُعدّ أمرًا مرهقًا على الهواتف المحمولة. سيُفقِد الإفراط في الاستخدام أي فائدةٍ مكتسبة، إضافًة إلى إعاقة الأداء.

ترجمة -وبتصرف- للمقالة Images للمؤلف: Pete LePage.

اقرأ أيضًا

]]>1516Tue, 19 Apr 2022 15:03:00 +0000