Уеб уроци и ресурси по HTML,
CSS, CSS3, JavaScript и други

Кодиране на 2-колонен уеб сайт с фиксирани размери 7

Сподели урока

Един от най-използваните начини за изграждане на структурата (layout) на уеб сайт е чрез разделяне на съдържанието в 2 колони. Тъй като посоката ни на четене е от ляво надясно, то най-често в лявата колона се намира главното съдържание на сайта, а в дясната - второстепенното. Освен това, дясната колона е значително по-малка по размер и се нарича sidebar. В нея се поставят неща като търсачка, класация с най-четени и -коментирани новини, реклами и други.

Друга отличителна черта на този тип структура (layout) e, че в началото на всяка страницата стои контейнер (наричан header), който обхваща различни елементи като лого, главно меню, login форма и др. Страницата завършва с друг контейнер (наричан footer), в който обикновено се поставя информация за сайта (например година на създаване, copyright и т.н.).

В този урок заедно ще създадем уеб страница с 2-колонен layout.

Визуално, този тип структура (layout) изглежда така:

Визуално представяне на 2-колонен layout

Упражнение

Целта на това упражнение е да създадем уеб страница с 2-колонен layout. Ширината на страницата ще бъде фиксирана на 960px.

В най-горната част ще бъде header-а, който ще обхваща цялата ширина на страницата. Под него ще бъде основното съдържание разделено в двете колони. Първата ще бъде широка 640px, а втората – 300px. Останалите 20px ще бъдат оставени като разстояние между двете колони. Това се прави с цел да се намали натрупването на елементи, а освен това позволява на съдържанието да “диша”. Височината на всяка колона ще се определя от съдържанието в нея. Друго изискване е, да направи така че най-долната част на страницата (footer-a) да застава винаги под най-високата от двете колони.

Звучи като наистина много работа. Да започваме!

Стъпка 1

В тази стъпка ще изградим страницата от гледна точка на html. Отвори текстовия редактор, с който обичаш да работиш, и въведи следното:

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; 
			charset=utf-8" />
		<title>YouDevelop.net - Кодиране на 2-колонен layout</title>
		<link href="style.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<div id="container">
			<div id="header">
				<h2>Header</h2>
			</div> <!-- Край на #header -->
			<div id="main-content">
				<h2>Main content</h2>
				<p>Lorem Ipsum … … Lorem Ipsum.</p>
			</div> <!-- Край на #main-content -->
			<div id="sidebar">
				<h2>Sidebar</h2>
				<p>Съдържание на sidebar</p>
				<ul>
					<li>Item 1</li>
					<li>Item 2
						<ul>
							<li>Item 2.1</li>
							<li>Item 2.2</li>
							<li>Item 2.3</li>
							<li>Item 2.4</li>
						</ul>
					</li>
					<li>Item 3</li>
					<li>Item 4</li>
				</ul>
			</div> <!-- Край на #sidebar -->
			<div id="footer">
				<h2>Footer</h2>
			</div> <!-- Край на #footer -->
		</div> <!-- Край на #container -->
	</body>
</html>

Кратко обяснение на кода по-горе:

На ред 11 отваряме <div> елемент с id="container", който служи като контейнер на цялата страницата. Цялото съдържание ще бъде поставено в този елемент. Затварящия таг на този елемент е точно преди затварящия таг на <body> – ред 39.

На ред 12 отваряме нов <div> елемент с id="header", в който ще поставим съдържанието, което искаме да бъде най-отгоре на страницата. Обикновено това е логото, главното меню, login форма и др. В момента съдържанието на header се състои единствено от едно h2 заглавие. Затварящия таг на header е на ред 14.

На ред 15 отваряме нов <div> елемент с id="main-content", в който ще бъде главното съдържание на нашата страница. В момента това е едно h2 заглавие последвано от кратък текстов параграф. Затварящия таг е на ред 18.

На ред 19 отваряме нов <div> елемент с id="sidebar", който ще ни послужи като контейнер на цялото странично съдържание. В момента това е едно h2 заглавие, кратък параграф и неподреден лист. Затварящия таг е на ред 35.

На ред 36 отваряме нов <div> елемент с id="footer", който ще ни послужи като контейнер на съдържанието намиращо се в най-долната част от страницата. В момента това е само едно h2 заглавие. Затварящия таг е на ред 36.

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

В момента страницата изглежда така:

Обикновена уеб страница без стил

Готови сме с изграждането на структурата. Можем да преминем към стилизирането. Ще започнем със задаване на общия стил на страницата.

Стъпка 2

За да отделим максимално структурата на страница от стила, ще използваме външен CSS файл. В него ще поставим необходия CSS код.

Отвори новосъздадения CSS файл и въведи следното:

* {
	margin: 0;
	padding: 0;
}
body {
	font: 14px/21px Verdana, Arial, sans-serif;
}
h2 {
	padding: 10px 15px;
}
p {
	padding:5px 15px;
}

Започваме със селектора * (ред 1). Това е уникален селектор в CSS, който селектира всеки html елемент намиращ се на страницата и прилага върху него съответния код. По подразбиране браузъра прилага определени padding и margin стойности върхи някои html елементи. Зануляването им счита за добра практика. Затова още преди да започнем с прилагането на стил е добре да занулим стойностите на padding и margin. Това ще направи страницата да изглежда до голяма степен еднакво в повечето браузъри.

На ред 5 използваме елемента body за секектор. Кода тук трябва да ти е познат. Чрез съкратеното свойство font задаваме размер на шрифта, височина на реда и действителния шрифт на текста.

Върху селекторите h2 и p (ред 8 и 11), прилагаме единствено padding, което ще добави вътрешно разстояние между текста и рамката на елементите.

След добавянето на този стил страницата ще изглежда така:

Прилагане на общ стил

Стъпка 3

В момента съдържанието на страницата е гъвкаво т.е. заема цялата ширина на прозореца. Ако промениш размера на прозореца, съдържанието също ще се промени. Това в зависимост от целта на сайта може да бъде желателно или нежелателно.

В този урок ще създадем сайт с фиксирани размери затова в тази стъпка ще ограничим ширината на страницата на 960px.

В CSS файла, веднага след настоящия код, въведи следното:

#container {
	margin: 0 auto;
	width: 960px;
}

В урока “Същност и приложение на id атрибута” научихме, че стойността на id може да бъде използвана в CSS като селектор. Точно това прилагаме тук. Чрез width ограничаваме ширината на елемента на 960px.

Декларацията margin: 0 auto; пък е един от най-често използваните методи за центиране на елемент. Чрез нея поставяме избрания елемента в средата на родителския елемент (в случая това е прозореца на браузъра), оставяйки равно разстояние от двете страни.

Резултата до тук е следния:

Ограничаване на размера и центриране на страницата

Може би се питаш защо правим размера на страницата точно 960px?

Според статистиката на W3Schools от януари 2012, около 98% от потребителите имат резолюция по-голяма или равна на 1024х768. Правейки размера 960px, ще бъдем сигурни че сайта изглежда еднакво под голям диапазон от резолюции.

Стъпка 4 – Стилизиране на header

След като вече имаме основния стил на страницата, в следващите няколко стъпки ще стилизираме отделните ѝ елементи.

Отвори CSS файла и добави следното:

#header {
	height: 120px;
	background-color: orange;
}

Свойството height (ред 2) ни позволява да зададем височина на елемента, а background-color – цвят на фона. Естествено, фона тук е единствено с цел да ни покаже размерите на елемента. В реален уеб сайт този цвят може да бъде напълно премахнат и/или заменен с друг.

Тук искам да наблегна на факта, че този стил е примерен. Предполагам, че твоя сайт може би се нуждае от header с по-големи/малки размери, различен фон и стил. Чувствай се свободен/-на да адаптираш кода според своите нужди.

Резултата до тук е следния:

Стилизиране на header

Стъпка 5 – Стилизиране на main-content

Следващата стъпка е да стилизираме <div> елемента с id="main-content". Отново в CSS файла въведи следното:

#main-content {
	float: left;
	width: 640px;
	background-color: lightgreen;
}

В урока “Обграждане на текст около снимка” разгледахме работата на свойството float. Същия принцип може да бъде приложен и тук. Ще използваме float за изграждане на layout-а на страницата и за позициониране на елементите ѝ.

Задавайки float: left; (ред 2) казваме на елементите след този <div> да го обградят отдясно т.е. съдържанието на елементите sidebar и footer ще застане от дясно на #main-content.

По подразбиране <div> е блоков елемент и заема 100% от ширината на родителския елемент (в случая това е 960px). Чрез width (ред 3) променяме ширината на 640px.

Декралацията на ред 4 ще направи фона светло зелен.

Стилизиране на main-content

Стъпка 6 – Стилизиране на sidebar

В тази стъпка ще стилизираме <div>-a с id="sidebar" и неподредения лист намиращ се в него.

В CSS файла добави следното:

#sidebar {
	float: right;
	width: 300px;
	background-color: yellow;
}
#sidebar ul {
	list-style-position: inside;
	padding-left: 20px;
}

Чрез първия селектор (ред 1) избираме целия елемент. Тук отново прилагаме float, определяме ширината и цвета за фон. Този път стойността на float е right, което ще позиционира <div>-a в дясно на #main-content.

Втория селектор (ред 6) ще избере непоредения лист, който се намира #sidebar. Стила ще промени позицията на точките преди всеки ред и ще добави 20px вътрешно разстояние от лявата им страна (ред 8).

Стилизиране на sidebar

Стъпка 7 – Стилизиране на footer

В тази финална стъпка ще стилизираме последния елемент от страницата, а именно footer. Особеното при него е, че трябва да застава винаги под най-високата колона. Това означава, че ще се намира винаги най-отдолу на страницата. За да постигнем този ефект, трябва да “изчистим” float-а, който зададохме по-рано в стила на двете колони.

В CSS файла добави следното:

#footer {
	clear: both;
	height: 50px;
	background-color: lightblue;
}

Декларацията на 2-ри ред е ключа към успеха. Накратко казано, clear: both; “изчиства” стойностите на float преди него. Това означава, че следващите елементите ще заемат нормалната си позиция и няма да се влияят от стойностите на float приложени върху някои от предишните елементи. Свойството clear може да приеме 3 стойности – right, left и both.

Стойността right “изчиства” обграждането отляво. Стойността left “изчиства” обграждането отдясно, а both “изчиства” обграждането и от двете страни.

Не се отчайвай, ако не успееш да разбереш работата на тези две свойства от първия път. Честата практиката на float и clear ще ти помогне да ги усвоиш по-добре. Затова отдели няколко минути, пробвай различните стойности и виж какво прави всяка от тях.

Финалния резултат изглежда така:

Изграждане на 2-колонен уеб сайт

Както можеш да предположиш, сайта не е напълно завършен сайт и не може да се използва онлайн. Липсва му съдържанието. Това е по-скоро скелет (шаблон) на сайт. Твоя е отговорността да изградиш този сайт и да запълниш всеки един блок с информация, която ще го направи полезен за твоите посетители.

Надявам се, че откри много нова и полезна информация в този урок. Също така се надявам, че ще използваш наученото в някой твой сайт/проект.

Какво мислиш за урока? Успя ли да разбереш всичко? Какъв е твоя подход при създаване на сайт? Сподели мнението си в коментарите по-долу.

Поздравления, това е краят на този урок!
За награда получаваш вкусен мъфин.

Награда за това, че успя да достигнеш до края на урока.

Хареса ли ти урока? Сподели го със света :)

Начало

7 страхотни коментара

  1. 1

    Емин Ердинч
    01 септември 2012 06:06

    Много добър урок! Браво на автора. :)

  2. 2

    Антон
    03 септември 2012 12:50

    Здравей, Джават позволих си да променя малко твоя урок: http://magazine.barmagazin.net/work.html

    Питането ми е може ли в <div id="main-content"> да се сложи <div class="artikul"> и <div class="opisanie"> като подредбата да стане както при http://magazine.barmagazin.net/rabotna-1.html без линк менюто от дясно, защото вече имаме такова в http://magazine.barmagazin.net/work.html ?????
    Поздрави

  3. 3

    Джават Ушев (автор)
    03 септември 2012 15:19

    Здравей. Радвам се, че намираш урока за полезен и го прилагаш в твоя сайт. Можеш да го променяш кода без ограничение. Нямам нищо против :)

    В #main-content можеш да добавиш колкото искаш други елементи. В това число div, p, img, h1-h6 загпавия и т.н. Единственото условие е бъдеш сигурен, че правилно вместваш елементите един в друг. Но, ако използваш валидатор, няма къде да сгрешиш.

    Комбинирай кода от двете страници и не се притеснявай да експериментираш :) Успех!

  4. 4

    Антон
    03 септември 2012 19:53

    Здравей, Джават.

    Даде ми грешка при проверка на css:

    #container {
    	margin: 0 auto;
    	width: 960px;
    }
    

    На margin махнах auto оставих само 0 и всичко е ок. Проверяваш ли ни?....или просто ни държиш бдителни?

    Поздрави

  5. 5

    Джават Ушев (автор)
    04 септември 2012 22:39

    Здравей. Не знам как си я получил тази грешка :) Аз го проверих няколко пъти и се валидира без проблеми. Старая се кода да бъде винаги правилен и валиден. Ако допусна някъде грешка, то тя е по скоро от невнимание, а не че искам да ви пробвам :) Благодаря все пак за забележката :)

  6. 6

    Антон
    04 септември 2012 23:40

    Като се замисля че цяла нощ работих, накрая бях доста уморен. Mоже и аз да съм я направил и да съм си мислил, че е при теб.

    Но е добре да ни държиш бдителни. Тук е мястото да кажа при валидиране да се проверява и css не само xhtml. Имал съм такъв момент. xhtml ми е Passed и си мисля, че е всичко е ок, но в css има грешка, която откривам случайно след седмица...."бавно" да бързаме.

  7. 7

    Невяна
    07 февруари 2016 14:41

    Прекрасно обяснено. Аз съм абсолютно начинаеща и самоука и този урок ми даде много отговори. Благодаря.

Твоят коментар

* - задължителни полета