Створення сайту - каркас сторінки

1. Створення спільного блоку-контейнера

Позначаються блоки відкриває і закриває тегом

У створеній нами сторінці створимо загальний контейнер, і ідентефіціруем його як "container", код буде таким:

.

а в файл style.css додамо стилі для цього контейнера, задамо розмір ширини і висоти контейнера, фоновий колір, ну і щоб наочно був контейнер видно додамо йому рамку-бордюр

#container margin: 0 auto;
text-align: left;
width: 1037px;
height: 700px;
background-color: # F3FAFF;
border: 1px solid # 999999;
>

і дивимося що вийшло на сторінці html приклад (Відкриється в новій вкладці), а в файлі style.css запис буде виглядати ТАК

Як бачите наш блок-контейнер вийшов за заданими розмірами
ширина: width = "1037px",
висота: height = "700px"

Зазвичай розмір ширини блоку задається в конкретних цифрах, а висота в процентах-100%, і в міру заповнення сторінки вмістом, вона буде витягатися в висоту, але для наочного прикладу вказана реальна висота, якби ми поставили height = 100%, то побачили б на сторінці вгорі тільки горизонтальну смугу, це верхній і нижній бордюр, злився в одну лінію, тому що в цьому контейнері нічого не розміщено

2. Створення блоку для шапки та верхнього меню

Далі всередину блоку "container" помістимо блок для шапки сайту і ідентифікуємо його як "header" і блок для верхнього меню, ідентефіціруем його як "top_menu"

Для блоків "header" і "top_menu" в файлі style.css пропишемо стилі

#header background-image: url (images / header.jpg);
width: 1037px;
height: 197px;
>

#top_menu background-color: # E1C435;
background-image: url (images / menu.jpg);
width: 1037px;
height: 37px;
>

Тепер наша сторінка буде виглядати ТАК. а запис у файлі style cssтакой

3. Створення лівого, правого і центрального блоків

Далі створимо блоки лівої, правої і центральної частини сторінки і індефеціруем їх як:
id = "left"
id = "right"
id = "content"

У файл style css для цих блоків пропишемо стилі, лівої і правої колонці поставимо розмір ширини 230px, і значення float-обтікання, для лівої колонки left і відповідно для правій колонці right, а центральній колонці ширину задавати не потрібно, а тільки відступи від лівого і правого краю центрального блоку. Додамо до ширини лівого і правого блоку по 2 пікселя і в стилях пропишемо відступи 232px

Зараз наша сторінка сайту виглядає ТАК. а запис у файлі style.css буде такою такої

4.Создание блоку для низу сторінки

Перед блоком низу сторінки, створимо порожній блок і індефіціруем його як "clear", цей блок як би підводить риску під трьома блоками - лівої, правої і центральної колонок, а так само створимо блок і індефіціруем його як "footer"

А в файл style.css додамо стилі для цих блоків

#footer background-color: # C5AC2E;
background-image: url (images / footer.jpg);
width: 1036px;
height: 25px;
padding-top: 0px;
text-align: center;
>

Зараз наша html сторінка сайту виглядає ТАК. а запис у файлі style.css буде такою

Нам залишилося створити верхнє і ліве меню і каркас сторінки буде готовий, дивимося продовження, натисніть кнопку 4