Кодиране на 2-колонен уеб сайт с фиксирани размери 7
Сподели урока
Един от най-използваните начини за изграждане на структурата (layout) на уеб сайт е чрез разделяне на съдържанието в 2 колони. Тъй като посоката ни на четене е от ляво надясно, то най-често в лявата колона се намира главното съдържание на сайта, а в дясната - второстепенното. Освен това, дясната колона е значително по-малка по размер и се нарича sidebar. В нея се поставят неща като търсачка, класация с най-четени и -коментирани новини, реклами и други.
Друга отличителна черта на този тип структура (layout) e, че в началото на всяка страницата стои контейнер (наричан header), който обхваща различни елементи като лого, главно меню, login форма и др. Страницата завършва с друг контейнер (наричан footer), в който обикновено се поставя информация за сайта (например година на създаване, copyright и т.н.).
В този урок заедно ще създадем уеб страница с 2-колонен layout.
Визуално, този тип структура (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 с по-големи/малки размери, различен фон и стил. Чувствай се свободен/-на да адаптираш кода според своите нужди.
Резултата до тук е следния:
Стъпка 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 ще направи фона светло зелен.
Стъпка 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).
Стъпка 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 ще ти помогне да ги усвоиш по-добре. Затова отдели няколко минути, пробвай различните стойности и виж какво прави всяка от тях.
Финалния резултат изглежда така:
Както можеш да предположиш, сайта не е напълно завършен сайт и не може да се използва онлайн. Липсва му съдържанието. Това е по-скоро скелет (шаблон) на сайт. Твоя е отговорността да изградиш този сайт и да запълниш всеки един блок с информация, която ще го направи полезен за твоите посетители.
Надявам се, че откри много нова и полезна информация в този урок. Също така се надявам, че ще използваш наученото в някой твой сайт/проект.
Какво мислиш за урока? Успя ли да разбереш всичко? Какъв е твоя подход при създаване на сайт? Сподели мнението си в коментарите по-долу.
Поздравления, това е краят на този урок!
За награда получаваш вкусен мъфин.
Хареса ли ти урока? Сподели го със света :)
1
Много добър урок! Браво на автора. :)
2
Здравей, Джават позволих си да променя малко твоя урок: 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
Здравей. Радвам се, че намираш урока за полезен и го прилагаш в твоя сайт. Можеш да го променяш кода без ограничение. Нямам нищо против :)
В #main-content можеш да добавиш колкото искаш други елементи. В това число div, p, img, h1-h6 загпавия и т.н. Единственото условие е бъдеш сигурен, че правилно вместваш елементите един в друг. Но, ако използваш валидатор, няма къде да сгрешиш.
Комбинирай кода от двете страници и не се притеснявай да експериментираш :) Успех!
4
Здравей, Джават.
Даде ми грешка при проверка на css:
#container { margin: 0 auto; width: 960px; }На margin махнах auto оставих само 0 и всичко е ок. Проверяваш ли ни?....или просто ни държиш бдителни?
Поздрави
5
Здравей. Не знам как си я получил тази грешка :) Аз го проверих няколко пъти и се валидира без проблеми. Старая се кода да бъде винаги правилен и валиден. Ако допусна някъде грешка, то тя е по скоро от невнимание, а не че искам да ви пробвам :) Благодаря все пак за забележката :)
6
Като се замисля че цяла нощ работих, накрая бях доста уморен. Mоже и аз да съм я направил и да съм си мислил, че е при теб.
Но е добре да ни държиш бдителни. Тук е мястото да кажа при валидиране да се проверява и css не само xhtml. Имал съм такъв момент. xhtml ми е Passed и си мисля, че е всичко е ок, но в css има грешка, която откривам случайно след седмица...."бавно" да бързаме.
7
Прекрасно обяснено. Аз съм абсолютно начинаеща и самоука и този урок ми даде много отговори. Благодаря.