Трябва първо да направите необходимите подготовки за създаването на уебсайта. Създайте желаната структура на директориите. Тя може да изглежда например по следния начин:
счетоводител
---изображения
---css
Това е доста типична структура на директориите. На основното ниво се помещават HTML страниците. CSS файловете отиват в директорията css-, докато всички изображения се запазват в директорията images-. Добавете в директорията images- всички изображения, които сте изрязали от дизайна предварително.
Изграждане на основната структура
Създайте нов CSS файл в директорията css-. След това включете този файл в HTML файла си. (В моя пример HTML файлът ще се казва index.html). Този файл отсега нататък ще бъде ключов за следващите уроци.
Първоначално добавете познатата ви HTML структура в index.html.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Вашият счетоводител</title> <link href="css/styles.css" rel="stylesheet" type="text/css"> </head> <body> </body> </html>
Също така, обърнете внимание, че незабавно трябва да включите и файла със стиловете. И сега може да започнете.
Външният елемент е div-контейнер.
<div class="основен-контейнер"> </div>
Този контейнер може да бъде форматиран с CSS синтаксис.
.основен-контейнер {
ширина: 100%;
float: ляво;
}
Главният контейнер се задава с ширина от 100 процента и плава вляво. Предимство на определената на 100 процента ширина: Можете да вмъкнете например фоново изображение с плавен цвят. Този фон ще се простре по цялата ширина на екрана.
Създавам два допълнителни div-елемента в основния контейнер.
<div class="основен-контейнер"> <div class="контейнер"> <div class="страница"> </div> </div> </div>
Също тези елементи се форматират. Истинският област за съдържание получава ширина от 1000 пиксела. С указването на margin: 0px auto; се постига хоризонталното центриране на елемента.
.контейнер {
ширина: 1000px;
margin: 0px auto;
}
Продължете с форматирането на елемента за страницата.
.страница {
ширина: 1000px;
float: ляво;
padding: 40px 0px 0px 0px;
}
Този елемент е действителната област за съдържание на страницата. Тук се поставят всички останали елементи. Този елемент също получава фиксирана ширина от 1000 пиксела. С указването на padding се дефинират вътрешните отстояния. Горното вътрешно отстояние се задава на 40 пиксела, а другите страни на 0 пиксела.
С това вече сме реализирали (много) грубата структура на дизайна.
Сега е време да попълним тази структура със съдържание. Първоначално страницата се разделя на три реда.
• Заглавие
• Съдържание
• Долния край
За това се дефинират още три div области.
<div class="горе"> </div> <div class="съдържание"> </div> <div class="долу"> </div>
Също и тези три области се форматират с CSS.
.горе {
цвят-на-фона: #f6f7f7;
ширина: 980px;
float: ляво;
padding: 0px 10px 10px 10px;
}
.съдържание {
ширина: 980px;
float: ляво;
padding-top: 8px;
}
.долу {
текст-център: център;
ширина: 1000px;
височина: 110px;
float: ляво;
}
Сега може да продължите да стилизирате отделните области.
Започнете със заглавната част на страницата. Това отново се състои от няколко елемента:
• Лого/Заглавие
• Горен меню
• Голяма картинка
Тези три елемента се дефинират в горе.
<div class="горе"> <div class="заглавие"> <div class="заглавна-част"> <h1>Вашият счетоводител</h1> </div> <div class="горно-меню"> Горното Меню </div> <div class="заглавна-картинка"> </div> </div>
Това е основната структура на частта за заглавие на страницата. Тя се стилсизира отново с CSS.
.заглавие {
ширина: 980px;
float: ляво;
}
.заглавна-част {
ширина: 980px;
височина: 87px;
float: ляво;
}
.горно-меню {
фонова-картина: url(../images/menue.jpg);
повторение-на-картината: repeat-x;
ширина: 978px;
височина: 37px;
float: ляво;
}
.заглавна-картинка {
фонова-картина: url(../images/header.jpg);
повторение-на-картината: no-repeat;
позиция-на-картината: ляво горе;
ширина: 980px;
височина: 213px;
float: ляво;
}
Синтаксисът съдържа две "специални" неща. Първо погледнете съдържанието на класа topmenu. Тук се забелязват две изисквания за фоново изображение.
background-image: url(../images/menue.jpg); background-repeat: repeat-x;
Включено е едно-пикселово изображение menue.jpg. Това представлява познатия на вас цветови градиент в горното меню. Чрез указанието background-repeat: repeat-x; изображението се повтаря хоризонтално, докато елементът е напълно покрит.
Разделяне на областта на съдържание
Следва областта на страницата, където накрая се показва съдържанието. Това става в рамките на елемента div content. Тази област е разделена на няколко елемента. Първоначално има малка тийзър-картина и поздравителен текст.
Съответният HTML синтаксис изглежда така:
<div class="content-left"> <div class="content-image"> <div class="img"><img src="images/img.jpg" alt="" height="100" width="160"></div> <div class="slogan"> <h1 class="title">Добре дошли в нашия уебсайт</h1> <p>Следва поздравителен текст</p> </div> </div>
Тази област е също двойно разделена. Вляво се показва картината, а отдясно - поздравителният текст. Важно е класът content-image.
.content-image {
width: 739px;
float: left;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #eee;
}
Този клас обхваща картината и поздравителния текст. Вътре в content-image има отново две допълнителни области.
<div class="img"><img src="images/teaser.jpg" alt="" height="101" width="157"></div> <div class="slogan">Добре дошли</div>
Ако искате да покажете само голяма картина или друго, вместо такова разделение, можете да обедините тези две области в един елемент div. Синтаксисът на CSS за варианта с два елемента изглежда по следния начин:
.img {
float: left;
}
.slogan {
width: 560px;
float: right;
}Резултатът в браузъра трябва да изглежда по следния начин сега:
Показваме и три други елемента:
• една лява текстова кутия,
• една дясна текстова кутия,
• дясното меню.
Синтаксисът на HTML изглежда така в този случай:
<div class="teaser"> <div class="left"> Контейнер за текст отляво </div> <div class="right"> Контейнер за текст отдясно </div> </div> <div class="content-right"> Десното меню </div> </div>
И разбира се, CSS синтаксиса отново:
.teaser {
width: 737px;
height: 216px;
float: left;
border: solid 1px #eee;
}
.left {
width: 330px;
height: 180px;
float: left;
padding: 20px;
}
.right {
width: 327px;
height: 180px;
float: left;
padding: 20px;
}
.content-right {
width: 210px;
float: right;
padding-right: 20px;
margin-top: 20px;
border: 1px solid #eee;
}Това ръководство приключва с основната структура на нашия уебсайт.
Сега тази основна структура очевидно трябва да бъде попълнена със съответното съдържание. Това ще стане в следващото ръководство.
