Помогни ни да направим Uroci.net по - богат! Добави урок

Снимка - фон на сайт с CSS

fix3d   трудност:    видян: 23386


Част 1. Избиране и подготвяне на изображението.

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

Централната точка е ключа към добрия резултат.
Ясна централна точка показва от къде започва страницата и кара хората да се чувстват спокойни и ориентирани. Гледайте за картинки с много свободно пространство и малко детайли. Избягвайте претрупаните и богати на елементи картинки или картинки чиято 'фокусна' точка не е в средата. Все пак фона не е основната част на страницата и е по-скоро детайл отколкото нещо основно.
Отворете картинката си във Фотошоп. Отидете на Images > Image Size и променете (ако има нужда) DPI на 72. Преди да натиснете OK проверете че отметката "Resample Image" не е активирана. Не би трябвало да видите разлика в изображението.

След това трябва да прелеете изображението в долната му страна към един цвят. За да направите това приближете на 100% и с пипетката (Eydropper tool (I)) изберете цвят от най-долната страна на картинката. Аз използвам #40413c. Запомнете този цвят, ще ви потрябва след малко. Вземете инструмента за преливки (Gradient Tool) направете преливка от цвета #40413c към същия, но с Alpha 0%, тоест прозрачно. Направете нов слой и оцветете с преливката, така че цвета да е в долната страна и на горе да се прелива в/у картинката. Като сте готови и ви харесва как изглежда слейте слоевете. (изберете горния и натиснете Ctrl+E).

free tutorials - uroci.com



След това може да се наложи да почистите малко изображението си или да го изрежете малко. В случая аз съм избрал картинка с прекалено много небе, затова ще намалим височината като изрежем част от небето. Това става най-лесно с Crop Tool, просто избирате кое да остане и натискате ентер, или отметката за ОК в горния десен ъгъл.

free tutorials - uroci.com



Ако искате може да направите някой допълнителни корекции по изображението, например контраст, светлина, наситеност на цвета... Като сте готови запишете картинката като JPG (ако е снимка както в нашия случай) или GIF, ако е изображение с по-малко цветове. Вижте в кой от 2та формата, гледа се качество и малки размери. Нека запишем нашата снимка като ‘background.jpg’ на desctop-a.

Част 2: Използване на CSS за да се постави фона на страницата

Направете нова папка на Desktop-а си с име ‘images’. Преместете снимката, която записахме преди малко вътре в тази папка. Направете още една папка с име ‘Photo Background’ и преместете папката ‘images’ в нея.

Отворете Notepad (или любимият си текстов редактор, аз ползвам EditPlus). Запишете 2 файла - index.htm и style.css - в папката ‘Photo Background’ която направихте преди малко на Desktop-а си.

Съдържание на style.css:

body {
background: #40413c url(images/background.jpg);
background-position: top center;
background-repeat: no-repeat;
margin-top: 350px;
}

Може да замените цвета посочен във втория ред (...ound: #40413c url...) с цвета, който избрахте по-рано, когато правихте преливката.

Съдържание на index.htm :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<body>
съдържание на страницата ви
</body>
</html>

Като сте готови заредете файла index.htm в браузъра, който използвате. Това е всичко.

Ако имате въпроси, предложения или проблеми добавете коментар след урока.



Коментари (6)

Emilcho на 30.11 2006 в 22:42ч.
Аз съм ЗА дългите обяснения. Незнам какво толкова лошо намирате в тях. На някой хора пък може да им е интерено да четат повече. В този урок всичко е обяснено подробно. На мен лично урока ми хареса.
А относно
body {
background: #40413c url(images/background.jpg);
background-position: top center;
background-repeat: no-repeat;
margin-top: 350px;
}
съм против.
Знам, че никой не ме пита но пък не се сдържам.
тоя скрипт нали народа трябва да го разбере.
CrazyDidro на 10.01 2007 в 19:47ч.
Сега не ми прави много голямо впечатление колко е труден урока, защото започнах малко по малко да ги схващам.Но когато започнах да се занимавам с CSS и Dreamweaver си мечтаех за нещо написано разбираемо!!! Евала на хората, които си губят времето за да споделят знанията си с другите!!! КОлкото до изказването на ferdika - по-добре следващият път да брои до 10 преди да каже или напише нещо.Може пък тогава да се замисли какво говори!!!
napstr на 13.04 2007 в 17:39ч.
Гледайте сега, след като човека е седнал и ви е обяснил нещата разбираемо, защо трябва непременно да му търсим кусури. Не всички са родени с наръчник по CSS в ръка и за тях подобни уроци са безкрайно полезни! И моля ви спестете си излишните (и глупави) коментари. Урока си е обяснен повече от ясно, а ferdika да вземе един буквар, и така А, Б...
Hacko на 27.09 2007 в 22:14ч.
Винаги ще се намери някой който на хубавото ще каже лошо ,въпреки че му харесва.Всяко стадо има черна овца.не му обръщайте внимание
valpin на 16.03 2008 в 04:10ч.
не съм съвсем съгласен с широчината на
картинката, "1500 пиксела"
понеже резолюцията на лаптопа ми е
1680х1050(при по малки екрана се
размазва),а това дори не е максимум,
както е извесно .иначе урока е много
добре обяснен.
pafel4y на 20.09 2008 в 12:49ч.
Урокът е перфектно обяснен! :)) Дори и за мързеливите може само да копирате първия код и да го сложите в файл с име style.css а после другия код в файл с име index.html и пак се получава... :)

Регистрирайте се, за да добавите коментар


Калдейта ЕООД - © 2003-2010. Всички права запазени.
Препоръчваме: Национален Бизнес | Bomba.bg | IT Новини | Диплома.бг | TRAVEL туризъм | Реферати | AmAm.bg | Иде.ли | Курсови работи | Фото Форум | Spodeli.net | Фото-Култ | Atol.bg | Elmaz.com | MobileBulgaria.com | Казанлък.Com