Як зробити каркас гумового сайту

Технічні питання «Верстка, дизайн, графіка

Як зробити каркас гумового сайту

1 крок - Загальна концепція. Визначаємося з максимальними і мінімальними розміром сайту, кількістю сайдбарі.
2 крок - Готуємо робоче місце. Створюємо папку, в якій створюємо html і css документ.
3 крок - в html документі прописуємо блоки: header, topNav, leftNav, content, rightNav, footer.
4 крок - розбираємося з css.

Розповідати про пріоритети гумових сайтів, я думаю, немає сенсу. У цьому уроці ми займемося розробкою каркаса гумового сайту на DIVах за допомогою css.

Крок 1: Розробка сайту починається із загальною концепцією, тобто верстальник визначається із загальним дизайном сайту. Припустимо, нам потрібно зверстати сайт з 3 блоками навігації - верхній, лівій і правій. Максимальна ширина сайту повинна становити 1660px, а мінімальна 990px, на сьогодні це оптимальне рішення.

Виділити все Код:

Не робіть ctr + c і ctr + v, краще все прописуйте своїми пальцями (то кувалдою по пальцях дам)! Після написання, збережіть файл (ctr + s).

Крок 4: У попередньому кроці ми прописали html каркас, але це ніщо. Для того щоб подати йому все властивості гумового каркасу слід попрацювати з css, ніж ми зараз і займемося.

Відкриваємо style.css. Спочатку давайте дамо outline - лінії.

Це правило означає - дати всім div блокам. лінії: 1піксель суцільна чорна ;. Збережіть файл (ctr + s), запустіть index.html з браузером. Якщо все зробили правильно, то на сторінці повинна бути запис, яка оточена 4 лініями.

Даємо висоту і ширину блокам

Виділити все Код: #wrapper width: 96%;
height: 2300px;
margin: 0 auto;
outline: 1px solid # ff0000;
>

У цьому коді ми дали обгортці (wrapper) - ширину (width) 96% так як ми робимо гумовий дизайн, висоту (height) 2300пікселя, відцентрувати обгортку margin: 0 auto. Напевно помітили знайоме властивість outline, зараз ми окремо блоку wrapper дали лінії червоного кольору. Збережіть зміни у файлі (ctr + s), поновіть сторінку в браузері (F5). Ви повинні побачити червоні лінії. Якщо це так, рухаємося далі:

Виділити все Код: #header height: 150px;
width: 100%;
margin-bottom: 20px;
outline: 1px solid # 000000;
>

#topNav height: 48px;
width: 100%;
margin-bottom: 20px;
outline: 1px solid # 4813F4;
>

#content float: left;
margin: 0 255px;
outline: 1px solid # d5c904;
text-align: justify;
>

#leftNav margin: 0 -245px 0 -100%;
float: left;
width: 240px;
height: 500px;
outline: 1px solid # 000000
>

#rightNav margin-left: -245px;
float: right;
width: 240px;
height: 400px;
outline: 1px solid # 000000;
>

#footer height: 50px;
outline: 1px solid # 4813F4;
>

Що ми зробили:
Блок content:
Блоку content дали обтікання з лева (float: left), зовнішній відступ margin: 0 255px, це зліва і справа 255пікселя. Тексту дали властивість text-align: justify ;, щоб текст був по всьому блоку.

Блок leftNav:
margin: 0 -245px 0 -100%; - це означає: з верху 0пікселя, з права -245пікселя, з низу 0пікселя, і з ліва -100% (щоб був лівіше блоку з контентом). Ширину в вигляді 240пікселя, і висоту якою потрібно прибрати після появи навігації.

Блок rightNav:
margin-left: -245px - щоб піднятися на блок з контентом. float: right - обтікання з права. Висоту потрібно прибрати після появи записів в цьому блоці.

Тепер в самому верху документа style.css пропишіть

min-width - це мінімальна ширина сайту.
max-width - максимальна ширина сайту, тобто сайт буде розтягуватися до 1660пікселей в нашому випадку.

А ви як робить каркас гумового сайту.
_________________
Мій інвестиційний портфель

Як правильно прописати його в html і CSS.
_________________
Тут я купую трафік

andreykashops писал (а): Руслан, я ось на вордперсс роблю тему для свого сайту, скачав тему - основу яку переробляю під себе.
Мене не влаштовує меню, яке знаходиться в самому верху сайту, хочу перенести його під шапку.

Як правильно прописати його в html і CSS?

Варіант 1. В html файлі виріжте меню, і вставте куди потрібно
Варіант 2. У css файлі Селектра, який дає властивості меню, пропишіть

top: -160px; - залежить від розмірів шапки. Якщо вона дорівнює 150px, то меню буде нижче її на 10px.
Так, і шапці дайте positin: relative; - будете позиціонувати блок щодо шапки.