سوف تبدو أي غرفة أفضل بكثير إذا كانت مغطاة بالسجاد الفارسي باهظ الثمن. إذن ما هو أسوأ موقعك؟ ربما حان الوقت "لتغطية" أرضه بقصر مصنوع يدويًا باهظ الثمن. سنبحث بمزيد من التفصيل كيفية عمل خلفية للموقع:
اختيار الصورة
أود أن أبدأ باختيار صورة. لجعل الخلفية تبدو أكثر جمالا وجمالا على الصفحة ، ولم يكن عليك أن تهتم بالأبعاد والمحاذاة. أقترح على الفور تبحث عن نسيج سلس. ما هذا
لسوء الحظ ، لا يمكن تمديد صورة بتنسيق html إلى ملء الشاشة. يتم استخدام الصورة بالحجم الكامل. إذا كانت الصورة صغيرة ، فسوف تمهد المنطقة بأكملها ، كما في الصورة أدناه. لتمديد الصورة ، يجب عليك إنشاء مستند css إضافي ، وبدون هذا لن ينجح.
رغم ذلك ، لديك الفرصة للتجول في النظام. للقيام بذلك ، استخدم Photoshop وقم بتغيير حجم الصورة إلى عرض الشاشة (1280 × 720). على الرغم من أنه في هذه الحالة ، عند التمرير لأسفل ، ستحل الصورة محل صورة أخرى.
خيار أفضل بكثير إذا كنت لا ترغب في استخدام المغلق هو استخدام مواد غير ملحومة. لا يرون أي مفاصل. هم مثل ورق الجدران أو البلاط الحديث في التصميم. يستبدل أحدهما الآخر ولا توجد مفاصل مرئية.
إذا كنت مهتمًا بالصور المجانية وعدم وجود عواقب قانونية لاستخدامها ، فنوصيك بالبحث على الموقع Pixabay.com.
الآن دعونا نعمل مع الكود. يجب أن أقول على الفور أننا نعمل مع html الآن ، أي أننا نقوم بتغيير الصورة ليس للموقع بأكمله ، ولكن فقط لصفحة واحدة محددة تتم كتابة الشفرة من أجلها. إذا كنت مهتمًا بإجراء تغييرات على المورد بالكامل ، فأنت بحاجة إلى إنشاء تعليمات برمجية باستخدام المغلق، ولكن أكثر على ذلك في وقت لاحق.
حتى تتمكن من العمل في المفكرة ، أنا أفضل NotePad ++. هو أكثر ملاءمة للعمل به: يتم إضافة رمز بالنسبة لك ، يتم تمييز العلامات. البرنامج مجاني ، ويزن حوالي 3 ميغابايت. نوصي بشدة ، خاصة إذا كنت مبتدئًا.
حتى في العلامة هيئة تحتاج إلى إضافة سمة خلفية وتحديد رابط للصورة ، حيث سيتم التقاط الصورة من. إليك كيف يبدو في البرنامج.
يمكنك ببساطة فتح المفكرة ونسخ هذا الرمز. في علامات الاقتباس ، ضع رابطًا للصورة التي تريدها.
الصورة كخلفية للصفحة - HTML
أولاً ، ضع في اعتبارك طريقة تعيين صورة الخلفية على الموقع باستخدام السمة خلفية بطاقة هيئة:
كما في المثال أعلاه ، بالإضافة إلى الصورة ، يوصى بالإشارة إلى لون الخلفية (سيتم عرضه على الموقع عندما يتم تحميل الصفحة) ، والتي سيتم دمجها مع صورة الخلفية وإنشاء تباين مع النص الموجود على الموقع. على سبيل المثال ، إذا كنت تستخدم اللون الأبيض للنص على الموقع ، فعليك تحديد لون خلفية داكنة وتعيين صورة خلفية داكنة. في هذه الحالة ، سيكون النص سهل القراءة.
ملاحظة: يوصى بتعيين صورة الخلفية ولون الخلفية دون استخدام HTML ، ولكن باستخدام CSS. في هذه الحالة ، سيكون الرمز صالحًا وصحيحًا.
الصورة كخلفية للصفحة - CSS
في CSS ، يمكن تعيين لون الخلفية وصورة الخلفية بخاصية واحدة. خلفية:
هنا باستخدام الممتلكات خلفية التعلق تم إصلاح خلفية الصفحة واستخدام الخاصية الخلفية تكرار تم تعيين تكرار الصورة الأفقي. لكن تجدر الإشارة إلى أن صورة الخلفية يجب أن "تخيط" على الحواف جيدًا.
إذا كنت تريد تمديد صورة الخلفية بالحجم الكامل لإطار المستعرض ، فاستخدم الخاصية حجم الخلفية: 100 ٪ ،
في Nubex site builder ، بالنسبة لأي موقع ، يمكنك استخدام صورة كبيرة كخلفية وإصلاحها.
خلفية للموقع
يحدث أن تصميم الموقع القديم ممل بالفعل. وأريد شيئا جديدا ولذيذ. وسيكون التصميم الجديد مثل هذا إذا طبخته بنفسك.
لكن تغيير التصميم بالكامل للمورد بنفسك هو شيء شرير. وليس كل شخص قد شحذ أيديهم في إطار هذا العمل. لذلك ، من الأسهل تحديث القالب القديم عن طريق تغيير لون خلفية المورد أو صورة الخلفية الخاصة به.
هناك عدة طرق لتغيير الخلفية على الموقع. للقيام بذلك ، استخدم إمكانيات CSS أو html. ولكن العديد من الخصائص للعمل مع الخلفية لها نفس الاسم ومنهجية التطبيق في تقنيات الويب هذه.
أساسيات خلفية هتمل
يمكنك استخدام عدة عناصر كخلفية:
- اللون
- صورة الخلفية
- صورة الملمس.
سنتعامل مع كل منهم بمزيد من التفصيل.
من أجل تعيين لون الخلفية للموقع ، يتم استخدام خاصية لون الخلفية لنمط سمة النمط. أي ، لتعيين اللون الأساسي لصفحة ويب ، تحتاج إلى تسجيله داخل العلامة. على سبيل المثال:
لا يدعم Html سوى 16 كلمة أساسية للون. فيما يلي بعض منها: الأبيض والأحمر والأزرق والأسود والأصفر وغيرها.
لذلك ، من أجل تعيين الخلفية لموقع html ، من الأفضل استخدام التنسيق السداسي عشري أو RGB.
بالإضافة إلى اختيار اللون ، تتوفر أيضًا إعدادات أخرى. إذا تم تعيين الخاصية لون الخلفية إلى شفاف ، ستصبح خلفية الصفحة شفافة. يتم تعيين هذه القيمة لهذه الخاصية بشكل افتراضي.
الآن النظر في إمكانيات لغة النص التشعبي لتعيين خلفية للموقع. يمكن القيام بذلك باستخدام خاصية صورة الخلفية.
لنفترض أننا نعمل على تطوير موقع عن الشعر ، ونحن بحاجة إلى استخدام صورة Pegasus كركيزة. سوف يجسد الحصان المجنح حرية الفكر الإبداعي للشاعر!
- كرر- x - كرر صورة الخلفية أفقياً ،
- تكرار ذ - عموديا ،
- كرر - على كلا المحورين ،
- عدم التكرار - التكرار محظور.
من بين الخيارات المذكورة ، نحن مهتمون بهذا الأخير. قبل تغيير خلفية الموقع ، نستخدمه في الكود الخاص بنا:
- الكلمة الأساسية (أعلى ، أسفل ، مركز ، يسار ، يمين) ،
- في المئة - العد التنازلي يبدأ من الزاوية اليسرى العليا ،
- في وحدات القياس (بكسل).
نستخدم أبسط خيار توسيط:
يحدث أنك تحتاج إلى إصلاح موضع الصورة عند التمرير. لذلك ، قبل عمل صورة خلفية للموقع ، استخدم خاصية إرفاق الخلفية الخاصة. القيم التي يقبلها هي:
- التمرير،
- الثابتة.
نحن بحاجة إلى القيمة الأخيرة. الآن سيبدو رمز مثالنا كما يلي: [/ HTML]
خلفية موقع النص
في المثال الأول ، للخلفية ، استخدمنا منظر صحراوي كبير وجميل. ولكن لمثل هذا الجمال عليك أن تدفع بالكامل. يمكن أن يصل وزن الصورة المصنوعة بجودة عالية إلى عدة ميغابايت.
لا يؤثر هذا المبلغ على سرعة تحميل الصفحة للمتصفح مع اتصال إنترنت عالي السرعة. ولكن ماذا عن الإنترنت عبر الهاتف المحمول ، حيث يستغرق تنزيل بضعة "أمتار" الكثير من الوقت؟
يتم حل كل هذه المشاكل باستخدام خلفية الملمس. ويستخدم صورة صغيرة كنمط الملمس. حتى في حالة تكرارها عدة مرات ، يتم تحميل الرسم مرة واحدة فقط.
لإنشاء خلفية مظلمة للموقع ، انتقل إلى Photoshop ، وقم بإنشاء صورة على شكل شريط بطول 1200 بكسل وعرض 15 بكسل. ثم قم بتطبيق تدرج بسيط بالأبيض والأسود وقم بتوصيل الملمس الناتج إلى صفحة الموقع:
من أجل الوضوح ، أضفنا نصًا وضبطنا لونه باستخدام خاصية اللون. إليك ما حدث:
أدوات CSS
جميع الخصائص المذكورة أعلاه قابلة للتطبيق أيضًا على أوراق الأنماط المتتالية. قم بإنشاء خلفية موقع css بإعادة كتابة الكود لأحد الأمثلة السابقة:
ستكون النتيجة مماثلة.
حسنًا ، لقد درسنا هنا جميع الخيارات المتعلقة بكيفية تغيير الخلفية على الموقع. الآن يبقى فقط إنشاء رسم للسجاد المستقبلي ونشره على صفحات موردك. ولكن هذا بالفعل متروك لك.
