كيفية إضافة خلفية إلى موقع ويب: 14 خطوة (بالصور)

جدول المحتويات:

كيفية إضافة خلفية إلى موقع ويب: 14 خطوة (بالصور)
كيفية إضافة خلفية إلى موقع ويب: 14 خطوة (بالصور)

فيديو: كيفية إضافة خلفية إلى موقع ويب: 14 خطوة (بالصور)

فيديو: كيفية إضافة خلفية إلى موقع ويب: 14 خطوة (بالصور)
فيديو: طريقة ( كيفية ) اضافة ايميل ( بريد الكتروني ) في جهاز ايفون ، ايباد ( سهل ) 2024, يمكن
Anonim

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

خطوات

طريقة 1 من 2: طرق HTML

خلفية ملونة صلبة

إضافة خلفية إلى موقع ويب الخطوة 1
إضافة خلفية إلى موقع ويب الخطوة 1

الخطوة الأولى: الخلفية الملونة الصلبة هي النوع الأساسي للخلفية التي يمكنك وضعها على موقع ويب

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

إضافة خلفية إلى موقع ويب الخطوة 2
إضافة خلفية إلى موقع ويب الخطوة 2

الخطوة 2. افتح كود الويب الخاص بك (المصدر)

إضافة خلفية إلى موقع ويب الخطوة 3
إضافة خلفية إلى موقع ويب الخطوة 3

الخطوة 3. في علامة النص الأساسي ، أضف سمة تسمى bgcolor

الآن ، يجب أن تبدو علامة الجسد هكذا-

حيث COLORNAME هو اسم اللون. يمكن ملء COLORNAME بالعديد من أنواع ممثلي الألوان-

  • (اسم اللون)
  • (قيمة سداسية عشرية)
  • (قيمة RGB)
إضافة خلفية إلى موقع ويب الخطوة 4
إضافة خلفية إلى موقع ويب الخطوة 4

الخطوة 4. تجربة استخدام RGB و # يمكن أن يؤدي إلى العديد من الظلال ، ولكن يمكنك اتباع الطريقة الأولى السهلة

لكن تذكر أن كتابة لون غير شائع مثل "Ultramarine Blueish Green" سيؤدي إلى اللون الأبيض.

إضافة صورة خلفية

تعد إضافة صورة خلفية أكثر تعقيدًا قليلاً من خلفية ملونة صلبة

إضافة خلفية إلى موقع ويب الخطوة 5
إضافة خلفية إلى موقع ويب الخطوة 5

الخطوة 1. أضف خاصية الخلفية إلى علامة الجسم ، بحيث تبدو كالتالي-

حيث SRC هو مصدر الصورة يمكن أن يكون SRC في نفس المجلد ، أو مجلد / صفحة ويب أخرى.

  • (في نفس المجلد)
  • (داخل مجلد مختلف)
  • (في صفحة ويب مختلفة)
إضافة خلفية إلى موقع ويب الخطوة 6
إضافة خلفية إلى موقع ويب الخطوة 6

الخطوة 2. تذكر كتابة الامتداد.gif /-j.webp" />

الطريقة 2 من 2: أساليب CSS

إضافة خلفية إلى موقع ويب الخطوة 6
إضافة خلفية إلى موقع ويب الخطوة 6

خلفية ملونة صلبة

إضافة خلفية إلى موقع ويب الخطوة 7
إضافة خلفية إلى موقع ويب الخطوة 7

الخطوة الأولى. لإضافة خلفية ملونة صلبة في CSS ، أضف سمة نمط

يمكنك أيضًا إعطاء المعرفات والفئات واستخدام أوراق الأنماط الخارجية والداخلية.

إضافة خلفية إلى موقع ويب الخطوة 8
إضافة خلفية إلى موقع ويب الخطوة 8

الخطوة 2. يجب أن تبدو علامة جسمك هكذا-

حيث يكون COLORNAME هو اسم اللون أو القيمة السداسية أو RGB (تذكر أيضًا الخطوات الأخيرة للخلفية الملونة الصلبة في HTML ، فهي قابلة للتطبيق هنا أيضًا).

إضافة صورة

إضافة خلفية إلى موقع ويب الخطوة 9
إضافة خلفية إلى موقع ويب الخطوة 9

الخطوة 1. لإضافة صورة ، أضف سمة النمط إلى علامة النص الأساسي

يمكنك أيضًا إعطاء المعرفات والفئات واستخدام أوراق الأنماط الخارجية والداخلية.

إضافة خلفية إلى موقع ويب الخطوة 10
إضافة خلفية إلى موقع ويب الخطوة 10

الخطوة 2. يجب أن تبدو علامة جسمك الآن على هذا النحو-

إضافة خلفية إلى موقع ويب الخطوة 11
إضافة خلفية إلى موقع ويب الخطوة 11

الخطوة 3. تذكر أن SRC هو المصدر

يمكن أن يكون من نفس المجلد أو مجلد مختلف أو صفحة ويب مختلفة.

  • (في نفس المجلد)
  • (داخل مجلد مختلف)
  • (في صفحة ويب مختلفة).
إضافة خلفية إلى موقع ويب الخطوة 12
إضافة خلفية إلى موقع ويب الخطوة 12

الخطوة 4. تذكر أن تضيف الامتدادات

تكرار الخلفية المنقوشة

إضافة خلفية إلى موقع ويب الخطوة 13
إضافة خلفية إلى موقع ويب الخطوة 13

الخطوة 1. لعمل خلفية نمط متكررة ، أضف خلفية كما قيل في الخطوات أعلاه

يجب الآن تغيير علامة جسمك إلى-

حيث تكون REPEAT-SETTINGS هي الإعدادات. يمكن أن يكون هناك العديد من إعدادات التكرار ، مثل-

  • (ستتكرر الخلفية رأسيًا وأفقيًا.)
  • (ستتكرر الخلفية أفقيًا.)
  • (ستتكرر الخلفية عموديًا.)

خلفية الصورة الثابتة

إضافة خلفية إلى موقع ويب الخطوة 14
إضافة خلفية إلى موقع ويب الخطوة 14

الخطوة 1. تبدو خلفيات الصور الثابتة رائعة ولا تتغير أثناء التمرير لأسفل

للقيام بها ، ما عليك سوى إجراء بعض التعديلات البسيطة على الكود في القسم أعلاه. قم بإجراء التعديلات لجعل علامة الجسم تبدو هكذا-

حيث SRC هو مصدر صورة الخلفية ، POSITION هو موضع الصورة (يمكن أن يتراوح من المركز إلى أعلى اليمين) ؛ يعد مرفق الخلفية "المحفز" الرئيسي لهذا النوع من الخلفية. يتم استخدامه لتحديد موضع الخلفية ويوصى بعدم تغييره.

موصى به: