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

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

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

استخدام المغلق

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

1. أولا ، إضافة صورتك إلى صفحة الويب الخاصة بك. تذكر استبعاد أي خصائص مرئية (مثل قيم العرض والارتفاع) من HTML. هذا أمر مهم ، خاصة بالنسبة لموقع الويب المتجاوب حيث يختلف حجم الصورة حسب المتصفح. تقوم بعض البرامج ، مثل Adobe Dreamweaver ، بإضافة معلومات العرض والارتفاع للصور التي تم إدراجها مع هذه الأداة ، لذا تأكد من إزالة هذه المعلومات من كود HTML! ومع ذلك ، تأكد من تضمين نص بديل مناسب . في ما يلي مثال على كيفية ظهور شفرة HTML:
2. لأغراض التصميم ، يمكنك أيضًا إضافة فئة إلى صورة. قيمة الصف هذه هي ما سنستخدمه في ملف CSS الخاص بنا. لاحظ أن القيمة التي نستخدمها هنا تعسفية ، على الرغم من أنه بالنسبة لهذا النمط المعين ، فإننا نميل إلى استخدام قيم "اليسار" أو "اليمين" ، وفقًا للطريقة التي نريد أن تتوافق بها صورتنا. نجد أن بناء الجملة البسيط يعمل بشكل جيد وسهل على الآخرين الذين قد يضطرون إلى إدارة موقع في المستقبل لفهمه ، ولكن يمكنك إعطاء هذه القيمة لأي فئة تريدها.
   2. في حد ذاته ، فإن قيمة هذه الطبقة لن تفعل أي شيء. لن يتم محاذاة الصورة آليًا إلى يسار النص. لهذا ، نحتاج الآن إلى اللجوء إلى ملف CSS الخاص بنا.

1. في ورقة الأنماط ، يمكنك الآن إضافة النمط التالي:
   1. .اليسار {
   2. تعويم: اليسار؛
   3. المساحة المتروكة: 0 20 بكسل 20 بكسل × 0 ؛
   4. }
   5. ما فعلته هنا هو استخدام خاصية "عائم" CSS ، والتي ستسحب الصورة من تدفق المستندات العادي (طريقة عرض تلك الصورة بشكل طبيعي ، مع محاذاة النص أسفلها) وستحاذيها إلى الجانب الأيسر من الحاوية الخاصة بها . النص الذي يأتي بعده في ترميز HTML مع الالتفاف حوله الآن. أضفنا أيضًا بعض قيم الحشو بحيث لا يتعارض هذا النص مع الصورة مباشرةً. بدلاً من ذلك ، سيكون هناك بعض التباعد اللطيف الذي سيكون جذابًا بشكل مرئي في تصميم الصفحة. في الاختزال CSS للحشو ، أضفنا قيم 0 إلى أعلى الجانب الأيسر من الصورة ، و 20 بكسل إلى يساره وأسفله. تذكر ، تحتاج إلى إضافة بعض الحشو على الجانب الأيمن من صورة محاذاة إلى اليسار. صورة محاذة لليمين (والتي سننظر إليها في لحظة) ستتم إضافتها إلى جانبها الأيسر.
2. إذا قمت بعرض صفحة الويب الخاصة بك في مستعرض ، يجب أن تشاهد الآن أن صورتك تتم محاذاتها إلى الجانب الأيسر من الصفحة وأن النص يلتف حولها بشكل رائع. هناك طريقة أخرى لتوضيح ذلك وهي أن الصورة "تم تعويمها إلى اليسار".

1. إذا كنت ترغب في تغيير هذه الصورة لتكون محاذاة إلى اليمين (كما هو الحال في المثال المصور الذي يصاحب هذه المقالة) ، فسيكون الأمر بسيطًا. أولاً ، يجب التأكد من أنه بالإضافة إلى النمط الذي أضفناه إلى CSS لقيمة الفصل "لليسار" ، لدينا أيضًا محاذاة إلى اليمين. انها تبدو مثل هذا:
   1. .حق {
   2. تعويم: يمين
   3. المساحة المتروكة: 0 0 20px 20px؛
   4. }
   5. يمكنك أن ترى أن هذا مطابق تقريبًا إلى أول CSS كتبناه. والفرق الوحيد هو القيمة التي نستخدمها لخاصية "عائم" وقيم الحشو التي نستخدمها (إضافة بعض إلى الجانب الأيسر من صورتنا بدلاً من اليمين).
2. أخيرًا ، يمكنك تغيير قيمة فئة الصورة من "اليسار" إلى "اليمين" في HTML:
3. انظر إلى صفحتك في المتصفح الآن ويجب أن تكون صورتك محاذية إلى اليمين مع التفاف النص بدقة حولها. نميل إلى إضافة كل من هذه الأنماط ، "اليسار" و "اليمين" إلى جميع صفحات الأنماط الخاصة بنا حتى نتمكن من استخدام هذه الأنماط المرئية عند الحاجة عندما نقوم بإنشاء صفحات ويب. هذان النمطان يصبحان مميزات رائعة قابلة لإعادة الاستخدام والتي يمكن أن ننتقل إليها عندما نحتاج إلى صور نمطية مع التفاف النص حولها.

استخدام HTML بدلاً من CSS (ولماذا لا يجب عليك القيام بذلك)

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