Предполагам типично разпределение на колони в нашия проект. Преди да представя проекта живо и на цветно, бих искал да ви покажа конкретно как да създадете колонни разпределения. Фокусът тук ще бъде върху дву- и триспалтовите разпределения, тъй като те все още са основа за повечето уебсайтове.
Класическото уеб дизайнерско разпределение вероятно би било двуспалтовото. В лявата част на прозореца обикновено се представя навигацията, докато в дясната колона се вижда реалното съдържание. Във връзка с блоговете този подход всъщност се е променил малко. Фактически в много блогове навигацията или рекламата се показват вдясно, докато реалното съдържание се представя вляво.
Такива приложения лесно могат да бъдат създадени чрез CSS. Фактически двуспалтовите разпределения са най-простата форма на разпределение.
В следващия пример ще ви покажа двуспалтово разпределение, използващо абсолютни процентни стойности.
Ето целият пример:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
#nav {
position: absolute;
left: 0;
margin: 0;
width: 20%;
background-color:#66CCCC;
}
#main {
margin: 0;
margin-left: 20%;
width: 80%;
background-color:#6666CC;
}
</style>
</head>
<body>
<div id="header">Layout mit absoluter Positionierung</div>
<div id="nav">Navigationsbereich</div>
<div id="main">Това е съдържанието</div>
<div id="footer">Тук се намират информациите за авторското право</div>
</body>
</html>И така изглежда целият този процес в браузъра:
Можете да движите лявата колона наляво лесно. За целта променете следните насоки:
• За #nav променете стойността left: 0 на right: 0.
• За #main просто променете margin-left на margin-right.
След като промените бъдат запазени, ще видите желания резултат.
Въпреки че показаното разпределение базирано на абсолютно позициониране има проблем: Ако съдържанието на лявата колона стане по-голямо, то излиза извън областта на подножието.
Това се дължи на факта, че за абсолютно позиционираните елементи няма "запазен" пространство. Проблемът може да бъде обходен като в основната област се вмъкнат съдържанието, което е по-дълго от това в лявата колона.
Вие трябва да използвате този вид разпределение само ако сте сигурни, че основната област е наистина по-висока от лявата (или дясната) колона.
Двуспалтово разпределение с плуващо позициониране
Проблемът, който възникна в предишния пример с наслояването на основния слой, може да бъде отстранен с използването на свойството float. Променената синтакса изглежда по следния начин:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
#nav {
float: left;
margin: 0;
width: 20%;
background-color:#66CCCC;
border: 0;
}
#main {
margin: 0;
float: left;
border: 0;
background-color:#6666CC;
width: 80%;
}
#footer {
clear: both;
}
</style>
</head>
<body>
<div id="header">Layout mit absoluter Positionierung</div>
<div id="nav">Навигационен регион</div>
<div id="main">Това е съдържанието</div>
<div id="footer">Тук се намират информациите за авторското право</div>
</body>
</html>Тук и двете колони са оборудвани със свойство float. Така колоните вече са подредени една до друга.
На левия регион е зададена ширина от 20 процента. Особено внимавайте, че елементът, позициониран с float, винаги очаква ширина да бъде зададена.
Основната област на съдържание получава ширина от 80 процента. Този регион също се позиционира с float: left. Така този регион се показва до лявата колона.
За да се уверите, че подножието винаги е в долния регион на прозореца - т.е. под колоните - се използва следната синтакса:
#footer {
clear: both;
}
Бях ви насочил към възможността за дефиниране на собствен клас за този вариант.
Триспалтово разпределение с плуващо позициониране
Триспалтовото разпределение също е популярен избор в уеб дизайна. Типичното разпределение изглежда по следния начин:
• В лявата колона се намира навигацията.
• В средната колона е вмъкнатото реалното съдържание.
• Вдясно се показват допълнителна информация или реклами.
По-долу ще намерите пример, как се създава гъвкав триспалтов уеб дизайн. Синтаксисът е подобен на този на предходния двуспалтов. Разликата е, че сега има допълнителен div с присвоеното име right, който на практика представлява дясната колона с прозореца.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
#main, #right {
margin: 0;
border: 0;
padding:0;
}
#nav {
float: left;
margin: 0;
width: 20%;
background-color:#66CCCC;
border: 0;
}
#main {
margin: 0;
float: left;
border: 0;
background-color:#6666CC;
width: 60%;
}
#right {
float: right;
width: 20%;
background-color:#6699FF;
}
#footer {
clear: both;
} </style>
</head>
<body>
<div id="header">Layout с абсолютно позициониране</div>
<div id="nav">Зоната за навигация</div>
<div id="main">Това е областта със съдържание</div>
<div id="right">Това е дясната колона</div>
<div id="footer">Тук се намират авторските права.</div>
</body>
</html>
На новата зона е присвоена ширина от 20 процента. Така разделението изглежда по следния начин:
• Лявата и дясната колони заемат по 20 процента от наличната рекламна площ.
• Средната колона има ширина от 60 процента.
Чрез показания синтаксис right-областта се показва наистина отдясно.
В този точка синтаксисът е гъвкав. Вие можехте да промените основата на main-областта по следния начин:
#main {
margin: 0;
float: right;
border: 0;
background-color:#6666CC;
width: 60%;
}
Тук беше зададен float като right. Така right-областта се премества наляво.
В този урок видяхте как се дефинират основни макети въз основа на float. Този вид знание вече образува основата за изграждане на уебсайт. В следващите уроци ще се изгражда уебсайт стъпка по стъпка, започващ от основната структура.
