طرح بندی وب سایت: نحوه ایجاد پس زمینه در HTML

بسیاری از مبتدیان که فقط به قلب وب سایت های ایجاد وب سایت ها می اندیشند اغلب تعجب می کنند که چگونه HTML را برای ایجاد پس زمینه یک تصویر می کنند. و اگر برخی از مردم می توانند این مشکل را درک کنند، هنگام کشیدن تصویر به عرض کامل مانیتور، هنوز مشکلات وجود دارد. در همان زمان، من می خواهم سایت را به همان اندازه در تمام مرورگرها نمایش دهد، بنابراین نیاز به سازگاری متقابل مرورگر باید رعایت شود. شما می توانید پس زمینه را به دو روش تنظیم کنید: با استفاده از تگ های HTML و سبک CSS. هر کس برای خود بهترین گزینه را انتخاب می کند. البته، سبک CSS خیلی راحت تر است، زیرا کد آن در یک فایل جداگانه ذخیره می شود و ستون های غیر ضروری در تگ های اصلی سایت را نمی گیرد، اما قبل از اینکه روش ساده ای را برای نصب یک تصویر در پس زمینه سایت در نظر بگیریم.

تگ های HTML عمومی برای ایجاد پس زمینه

بنابراین، اجازه دهید به سوال از نحوه ایجاد یک تصویر پسزمینه در HTML در تمام صفحه برویم. برای اینکه سایت زیبا به نظر برسد، شما باید یک جزئیات به اندازه کافی را بدانید: فقط کافی است یک پس زمینه شیب دار یا رنگ آن را با یک رنگ تک رنگ رنگی بسازید، اما اگر شما نیاز به یک عکس در پسزمینه داشته باشید، آن را روی تمام عرض مانیتور نکشید. ابتدا تصویر باید انتخاب شود یا به طور مستقل طرح با چنین پسوند ساخته شود که در آن شما یک صفحه از سایت نمایش داده می شود. فقط پس از تصویر پس زمینه آماده است، ما آن را به پوشه ای به نام "تصاویر" انتقال می دهیم. در آن ما تمام عکس ها، انیمیشن ها و سایر فایل های گرافیکی مورد استفاده قرار می گیرد. این پوشه باید با تمام فایلهای HTML شما در پوشه ریشه باشد. حالا شما می توانید به کد بروید چندین گزینه برای نوشتن کد وجود دارد که پس زمینه به یک تصویر تغییر می کند.

1. صفات برچسب را بنویسید.
2. از طریق سبک CSS در کد HTML.
3. سبک CSS را در یک فایل جداگانه بنویسید.

همانطور که در HTML، برای ایجاد پس زمینه یک تصویر، تصمیم می گیرید، اما من می خواهم چند کلمه در مورد چگونگی بهینه سازی آن بگویم. اولین روش با کمک نوشتن از طریق ویژگی برچسب، قدیمی شده است. گزینه دوم در موارد بسیار نادر استفاده می شود، فقط به این دلیل که شما مقدار زیادی از همان کد دریافت می کنید. و گزینه سوم رایج ترین و موثر است. در اینجا نمونه های HTML از برچسب ها هستند:

1. اولین راه برای نوشتن از طریق ویژگی بدن در فایل index.htm. این در این فرم نوشته شده است: (body background = "Folder_name / Picture_name.extension") (/ body). به این معنی که اگر یک عکس به نام «تصویر» و یک پسوند JPG داشته باشیم و پوشه را به عنوان «تصاویر» نامگذاری کردیم، پس کد HTML مانند این خواهد بود: (body background = "Images / Picture.jpg") ... (/ body) .
2. روش دوم نوشتن بر سبک CSS تاثیر می گذارد، اما در همان فایل به نام index.htm نوشته شده است. (Body style = "background: url ('../ تصاویر / Picture.jpg')").
3. و سومین روش ضبط در دو فایل انجام می شود. در سند named index.htm تگ زیر در head tag نوشته شده است: (head) (link rel = "stylesheet" type = "text / css" href = "http: // site / article / 193110 /٪ D0٪ 9F ٪ D1٪ 83٪ D1٪ 82٪ D1٪ 8C_٪ D0٪ BA CSS_file ") (/ head). و در فایل سبک با نام style.css از قبل نوشته ایم: body {background: url (Images / Picture.jpg ')}.

همانطور که در HTML برای ایجاد یک تصویر پس زمینه، ما جدا شدیم. حالا شما باید بدانید که چگونه تصویر را در عرض عرض کل صفحه نمایش بکشید.

روش های کشش تصویر پس زمینه به عرض پنجره

بیایید تصویر ما را به عنوان یک درصد تصور کنیم. به نظر می رسد کل عرض و طول صفحه 100٪ x 100٪ باشد. ما باید تصویر را به این عرض بچرخانیم. یک رشته ای که تصویر را به عرض کامل و طول مانیتور بچرخانید را به فایل ورودی در فایل style.css اضافه کنید. چگونه در سبک CSS نوشته شده است؟ این ساده است!

بدن

{

سابقه و هدف: URL (تصاویر / تصویر.jpg ')

سابقه و هدف: 100٪؛ / * این مطلب برای بسیاری از مرورگرهای مدرن مناسب است * /

}

بنابراین ما متوجه شدیم چگونه یک تصویر پسزمینه را در HTML در تمام صفحه ایجاد کنیم. همچنین یک راه برای نوشتن در فایل index.htm وجود دارد. اگر چه این روش منسوخ شده است، برای مبتدیان لازم است که آن را بدانیم و درک کنیم. در برچسب (سر) (سبک) div {background-size: cover؛ } (/ Style) (/ head) این رکورد به این معنی است که ما یک بلوک مخصوص برای پس زمینه انتخاب میکنیم که در کل عرض پنجره قرار میگیرد. ما به 2 راه برای ایجاد پس زمینه سایت یک تصویر HTML نگاه کردیم، به طوری که تصویر در سراسر صفحه نمایش در هر مرورگر مدرن گسترش می یابد.

چگونه یک زمینه ثابت ایجاد کنیم

اگر تصمیم به استفاده از تصویر به عنوان پس زمینه یک منبع وب آینده داشته باشید، فقط باید یاد بگیرید که چگونه آن را ثابت کنید، به طوری که طول آن دراز نکنید و ظاهر زیبایی را خراب نکنید. این کافی است به سادگی برای استفاده از کد HTML برای نوشتن این افزونه کوچک استفاده کنید. شما نیاز دارید یک عبارت در فایل style.css پس از پس زمینه اضافه کنید: url (Images / Picture.jpg ') fixed؛ یا به جای افزودن یک خط جداگانه پس از نقطه کیک - موقعیت: ثابت شده است. به این ترتیب، تصویر پس زمینه شما تبدیل خواهد شد. در حالی که محتوای پیمایش در سایت، شما خواهید دید که خطوط متن در حال حرکت هستند و پس زمینه در جای خود قرار دارد. بنابراین شما یاد گرفتید که چگونه پس زمینه را در HTML ایجاد کنید، به چندین روش.

کار با یک جدول در HTML

بسیاری از توسعه دهندگان وب کم تجربه، با جداول و بلوک مواجه می شوند، اغلب نمی فهمید که چگونه یک تصویر را در HTML ایجاد می کنند که یک پس زمینه از جدول است. مانند تمام دستورات سبک HTML و CSS، این زبان برنامه نویسی وب بسیار ساده است. و راه حل این مشکل، نوشتن یک خط دو خط است. شما باید قبلا بدانید که نوشتن ردیف ها و ستون های جدول به ترتیب به ترتیب برچسب ها (tr) و (td) است. برای ایجاد پس زمینه جدول به عنوان یک تصویر، شما نیاز به اضافه کردن یک عبارت ساده به برچسب (جدول)، (tr) و یا (td) با لینک به تصویر: پس زمینه = URL تصویر. برای وضوح، ما چند مثال را ارائه می دهیم.

جداول با یک عکس به جای پس زمینه: نمونه های HTML

بیایید قرص 2x3 را قرعه کشی کنیم و تصویر پس زمینه را در پوشه Images ذخیره کنیم: (table background = "Images / Picture.jpg") (tr) (td) 1 (/ td) (td) 2 (/ td) (td) (Td) 5 (/ td) (td) 6 (/ td) (/ tr) (/ جدول). بنابراین میز ما در پس زمینه تصویر رنگ می شود.

حالا یک جدول را با اندازه 2 × 3 قرعه کشی کنید، اما تصویر را به زیر میله های زیر شماره 1، 4، 5 و 6 رسم می کنیم. (جدول) (tr) (td background = "Images / Picture.jpg") 1 (/ td) (td) 2 (/ td) (td) 3 (/ td) (/ tr) (tr) (td background = "Images / Picture.jpg") 4 (/ td) (td background = "Images / Picture.jpg") 5 / Td) (td background = "Images / Picture.jpg") 6 (/ td) (/ tr) (/ table). پس از مشاهده، می بینیم که پس زمینه تنها در سلول هایی است که ما ثبت کرده ایم، اما در کل جدول ظاهر نمی شود.

سایت متقابل مرورگر

هنوز هم چنین چیزی به عنوان منبع متقابل مرورگر یک منبع وب وجود دارد. این بدان معنی است که صفحات سایت به همان شیوه در انواع و نسخه های مرورگر نمایش داده می شوند. در عین حال، شما باید کد HTML و سبک CSS را برای مرورگرهای مورد نیاز سفارشی کنید. علاوه بر این، در دوران مدرن توسعه گوشی های هوشمند، بسیاری از توسعه دهندگان وب سعی در ایجاد سایت هایی دارند که برای هر دو نسخه موبایل و یک دیدگاه کامپیوتری سازگار هستند.