Как да зададете фон на уебсайт

Съдържание:

Как да зададете фон на уебсайт
Как да зададете фон на уебсайт

Видео: Как да зададете фон на уебсайт

Видео: Как да зададете фон на уебсайт
Видео: Auto Layout. Растянуть всё за 50 минут 2024, Може
Anonim

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

Как да зададете фон на уебсайт
Как да зададете фон на уебсайт

Инструкции

Етап 1

Първо трябва да разберете кой от начините е зададен фон в текущата версия на сайта. За да направите това, отворете HTML кода на страницата. Можете да направите това с обикновен текстов редактор, като изтеглите файла от сървъра предварително. Или можете да използвате редактора на страниците на системата за управление на съдържанието, ако използвате такъв. Редакторът на страницата не изисква изтегляне на файла, но го модифицира директно на сървъра, използвайки браузъра като интерфейс. HTML кодът (HyperText Markup Language) на страницата, която отваряте, се състои от редове с инструкции за браузъра. Те описват видовете, външния вид и местоположението на всеки от елементите на уеб страница. Тези инструкции обикновено се наричат "етикети". Редът на самите тагове в кода на страницата също се подчинява на правилата на езика HTML - те са разделени на блокове, първият от които трябва да бъде заглавен блок, който започва с етикет и завършва. Следва да бъде последван от блока, който ви интересува повече сега - тялото на документа. То е ограничено до тагове и. В началния таг на този блок () можете да поставите информация за фона на страницата. Такава информация в етикетите се нарича "атрибути". Атрибутът на маркера на тялото, който задава цвета на фона, се обозначава като bgcolor и в кода може да изглежда така: Тук задаваме цвета на фона за страницата на сребрист. Браузърът може да разпознае някои от цветовете по имената им, но за да не се заблуди, е по-добре да посочи техните шестнадесетични кодове. Тази версия със сребърен цвят в шестнадесетичен израз ще изглежда така: И така, трябва да намерите маркера, започващ с <body в кода на страницата и да проверите дали има цвят на фона. Ако е така, заменете цветната индикация в него с новата версия и запазете промените на страницата.

Стъпка 2

Фонът в текущия дизайн на вашия сайт може да бъде зададен не по цвят, а по картинка. Съответният атрибут на маркера на тялото се нарича background и може да изглежда така в кода: Тук фонът е изображението bg.jpg

Стъпка 3

Когато описвате външния вид на страници с относително сложен дизайн, използвайте „каскадни таблици със стилове“- CSS (Cascading Style Sheets). Блокове от CSS код могат да бъдат включени директно в кода на страницата или да се съдържат във външен файл с разширение "css". Трябва да потърсите маркера за описание на стила, започващ с <style, в заглавната част на кода на страницата (между и таговете). Ако съдържа връзка към външен файл, тя ще изглежда по следния начин: @import "style.css"; Ето връзка към таблица със стилове с име style.css. Трябва да отворите посочения файл за редактиране. И ако няма връзка и след отварящия <style tag има инструкции за стил, тогава трябва да ги редактирате тук. И в двата варианта, сред описанията на стиловете, трябва да потърсите тези, свързани с тялото на документа (тялото). Този блок с описания може да изглежда така: body {

цвят на фона: сребърен;

цвят черен;

} Тук трябва да замените стойността на параметъра background-color със стойността на новия си цвят и по-добре в същите шестнадесетични стойности. Опцията за фоново изображение в инструкциите за CSS трябва да изглежда така: body {

фон: # C0C0C0 url (img / bg.jpg) repeat-y;

цвят черен;

} Тук връзката към картината е подобна на тази, обсъдена по-горе, и # C0C0C0 преди връзката означава, че пространството на страницата, което не е заето от фоновото изображение, ще има сребрист фон. "Repeat-y" показва, че фоновата картина трябва да се умножи по оста Y (вертикална).„Repeat-y“може да бъде заменен с „repeat-x“(хоризонтална репликация) или „no-repeat“(не се репликира). Ако изобщо не посочите повторение, тогава фоновото изображение ще бъде облицовано с фоново пространство на страницата във всички посоки.

Препоръчано: