Разполагане сайт: как да се направи от съответния фон HTML

Много начинаещи уеб дизайнери, само за да ровя в същността на създаването на сайтове, често се чудя как да направя HTML фоново изображение. И ако някои от тях не може да се справи с този проблем, все пак това е проблем по време на стречинг цялата ширина на изображението на монитора. В същото време бих искал да видите на сайта се показват идентично във всички браузъри, така че трябва да отговарят на изискванията на различни браузъри. Можете да настроите фона по два начина: чрез използване на HTML тагове и CSS стилове. Всеки за себе си избере най-добрият вариант. Разбира се, CSS стил е много по-удобно, защото неговият код се съхранява в отделен файл и не се заеме с допълнителни тонколони в тагове основния сайт, но първо нека разгледаме един прост метод за инсталиране на изображението на фона на сайта.

Основни HTML тагове за създаване на заден план

Така че, ние се връщаме на въпроса как да се направи фоновото изображение в HTML на екрана. За да изглежда красива сайт, трябва да се разбират един доста важен детайл: достатъчно е само да се направи градиент фон или да го рисувам плътен цвят, но ако трябва да поставите фоновото изображение, то няма да се простират по цялата ширина на монитора. Изображението беше първоначално е необходимо да се вземе или да направите свой собствен дизайн с това разширение, в която ще се покаже страница на сайта. Само когато фоновото изображение е готов, плъзнете го в папка с името «Картинки». В него ние ще съхранява всички използвани изображения, анимации и други графични файлове. Тази папка трябва да се намира в главната директория с всичките си HTML файлове. Сега можете да преминете и към кода. Има няколко възможности за писане код, чрез който на заден план ще се промени картината.

1. Напиши етикет атрибут.
2. Чрез CSS стил в HTML кода.
3. Напиши CSS стилове в отделен файл.

Както и в HTML кода, за да фоновото изображение, вие решавате, но бих искал да кажа няколко думи за това как би било най-оптималния. Първият метод е чрез писане чрез атрибут етикет отдавна е остаряла. Вторият вариант се използва много рядко, защото се оказва, че много от един и същи код. Третият вариант е най-често и ефективни. Ето примери за HTML тагове:

1. Методът на първия запис, чрез етикет атрибут (тяло) в index.htm файл. Той се съхранява в тази форма: (фон тяло = "FOLDER_NAME / Nazvanie_kartinki.rasshirenie") (/ тяло). Това означава, че ако имаме една снимка със заглавие «снимка» и разширение JPG, и папката нарекохме «Картинки», а след влизането на HTML-код ще изглежда така: (тяло фон = "Images / Picture.jpg") ... (/ тяло) ,
2. Вторият метод включва записване на CSS стил, но това е написано в един и същи файл с index.htm за името. (Body стил = "фон: URL (" ../ Images / Picture.jpg ")").
3. Третият метод на запис е направен в два файла. Документът с маркер име index.htm (главата) е написана такава линия: (главата) (относителен = тип връзка "стилове" = "текст / CSS" HREF = "HTTP: // сайт / статия / 193110 /% D0% 9F % D1% 83% D1% 82% D1% 8C_% D0% BA CSS_faylu ") (/ глава). Файл с името style.css стил вече пише: тялото {фон: URL (Снимки / Picture.jpg ")}.

Както и в HTML кода, за да фоновото изображение, ние разбираме. Сега трябва да разбера как да се разтегне изображението по ширината на целия екран.

Начини да се простират на фоновото изображение на широчината на прозореца

Ние представляваме нашите екран под формата на процент. Оказва се, че цялата дължина и ширина на екрана ще бъде 100% х 100%. Ние трябва да го разтеглите на тази ширина. Добави в графичен файл запис style.css линия, която ще се разтегне изображението по цялата ширина и дължина на монитора. Както е писано в CSS стил? Толкова е просто!

тяло

{

фон: URL (Снимки / Picture.jpg ")

фон размер: 100%; / * Тази публикация е подходящ за повечето съвременни браузъри * /

}

Така че сме измислили как да се направи фоново изображение в HTML на екрана. Налице е също така метод за запис във файла index.htm. Въпреки, че този метод и остарял, но за начинаещи е необходимо да се знаят и разбират. DIV маркера (главата) (стил) {фон размер: покривка; } (/ Стил) (/ глава), този запис означава, че разпределя специално звено за фона, който ще бъде разположен по цялата ширина на прозореца. Ние разгледахме два начина, как да се направи сайт HTML фоново изображение, така че изображението се разтяга до цялата ширина на екрана във всеки един от съвременните браузъри.

Как да направите определен фон

Ако решите да използвате снимка като фон на бъдещата уеб ресурс, а след това просто трябва да се знае как да го направи фиксирани, така че да не се разтяга по дължина и не се развалят естетичния вид. Просто с помощта на HTML код, за да се регистрирате малка добавка. Трябва да се подаде style.css да добавите фраза след фон: URL адрес (Снимки / Picture.jpg "), определена; или вместо добавя след запетая отделна линия - позиция: фиксирани. По този начин, тапет ще бъде фиксиран. По време на превъртане на съдържанието на сайта, ще видите, че текст линии се движат, но на фона остава на мястото си. Така че сте научили как да направите HTML фоново изображение, по няколко начина.

Работа с таблици в HTML

Много неопитни уеб разработчици, се сблъскват с маси и блокове, често не разбират как да се направи HTML фоново изображение на маса. Подобно на всички екипи на HTML и CSS стилове, езика за уеб програмиране е сравнително проста. И решението на този проблем е да се напише един чифт реда код. Вие вече знаете, че за написването на маса редове и колони, съответно, както е посочено от таговете (ТР) и (ДС). За да направите фона на масата под формата на изображение, то е необходимо да се добавят към маркера (маса), (TR) или (ТД) проста фраза във връзка с референтния картинката: фон = URL снимки. За по-голяма яснота, ние дам няколко примера.

Таблица със снимка вместо на заден план: HTML примери

Начертайте таблица 2x3 и фоновото изображение се съхранява в папката "Образи" направи: (на фона на таблицата = "Изображения / Picture.jpg") (TR) (TD) 1 (/ TD) (TD) 2 (/ TD) (TD) 3) (/ TD) (/ TR) (TR) (TD) 4 (/ TD) (TD) 5 (/ TD) (TD) 6 (/ TD) (/ TR) (/ маса). Така че нашата маса ще бъде изтеглен на заден план на снимката.

Сега изготвя същите размери плоча на 2x3, но поставяне на картина в колоните, номерирани от 1, 4, 5 и 6. (маса) (Тг) (TD фон = "изображения / Picture.jpg") 1 (/ TD) (TD) 2 (/ TD) (TD) 3 (/ TD) (/ TR) (TR) (TD фон = "изображения / Picture.jpg") 4 (/ TD) (TD фон = "изображения / Picture.jpg") 5 ( / TD) (TD фон = "изображения / Picture.jpg") 6 (/ TD) (/ TR) (/ маса). След като гледа можем да видим, че на фона се появява само в тези клетки, в които са регистрирани, а не на цялата таблица.

сайт за съвместимост различни браузъри

Има такова нещо като различни браузъри уеб съвместимост ресурс. Това означава, че вашият сайт е еднакво добре показва в различни видове и версии на браузъри. Тя трябва да бъде HTML код и CSS стилове, за да персонализирате необходимите браузъри. Освен това, в модерната ера на смартфони, много уеб разработчици се опитват да създадат сайтове и адаптирани за мобилни устройства версия и компютър поглед.