Привіт, шановні читачі блогу сайт. В, я спробував почати розповідати про її принципах, але, на жаль, довелося сильно відволіктися на пояснення базових понять вебмастерінга.

Дуже мені не хотілося залишати без уваги ці засадничі речі, і дуже перепрошую перед тими, хто все це вже знав, а хотів почути саме розмова про і не почув.

У цій статті постараюся надолужити і виправитися. Сподіваюся, що сильно відхилятися від основної теми не доведеться. Ну ось, з вибаченнями і покаянням будемо вважати, що покінчено, і пора, нарешті, переходити безпосередньо до справи.

Створюємо макет сайту в 2 колонки на основі DIV верстки

Отже, в попередній статті ми створили на своєму хостингу (хоча для цих цілей цілком см. Огляд його можливостей) папку TEST, в яку поклали два основних файлу нашого майбутнього макета: Index.html і Style.css. Власне, вони і будуть складати наш найпростіший варіант каркаса.

Знову, напевно, доведеться трохи відволіктися від безпосередньої верстки, тому що не всім може бути зрозуміло, як створити папку TEST в кореневому каталозі, розташованого на реальному хостингу. А так же, що це таке - корінь сайту і де його шукати при доступі по ФТП. А й справді, питання не тривіальний для користувача, що вперше зіштовхнувся з хостингом.

Так ось, вам потрібно буде спочатку підключитися по протоколу FTP. Дані для підключення по FTP вам повинен був повідомити вам хостинг провайдер (читайте взагалі, а).

Після того, як ви підключіться по FTP (я користуюся для цієї мети програмою FileZilla - про неї вся правда написана, і саме на її прикладі буду все розповідати), то в правому вікні даної програми ви побачите вміст каталогу, який виділив хостер під ваші сайти , скрипти і тому подібні речі.

Але цей каталог нічого очікувати бути кореневою текою. У корені повинен лежати файл Index.php, а так само і всі інші файли і папки використовуваного вами движка.

Для цієї мети використовується окрема директорія, правда, її назва, в залежності від конкретного хостингу, може відрізнятися. Структура внутрішніх папок в основному каталозі (відкривається при підключенні до сайту по FTP) так само може відрізнятися, але суть залишається незмінною.

Наприклад, можете побачити наступну картину:

Файли движка ви повинні копіювати не в цю саму верхню директорію, доступну вам по FTP, а в так звану, кореневу папку. Як дізнатися, яка з присутніх там директорій є кореневої?

Ну, на крайній випадок можна запитати у самого власника хостингу. А що, вони зобов'язані допомагати вам в таких питаннях. Але взагалі-то, вона найчастіше буде називатися або PUBLIC_HTML, або HTDOCS.

Якщо ви таких директор не виявили, то потрібно ставити питання власника хостингу, а якщо щось подібне є в наявності, то це і є горезвісний корінь і саме в ньому ви повинні будете створити нашу багатостраждальну папку TEST, заради якої я написав, а ви, сподіваюся, прочитали ці кілька абзаців.

Як створити каталог за допомогою програми FileZilla? Так, дуже просто. Вам достатньо буде відкрити в правій частині програми коневую директорію і клацнути по порожньому місці правою кнопкою миші, а з контекстного меню вибрати пункт «Створити каталог».

Уф, створили папку TEST в коровому каталозі сайту. І на тому спасибі. В общем-то, можна було з цим і не морочитися. Як так? А ось так. Директорію TEST можна було б створити і в який-небудь внутрішньої папці сайту, але простіше все ж буде в корені.

Для локального сервера Денвер вам потрібно буде створити директорію TEST в наступному каталозі:

C: \\ server \\ home \\ localhost \\ www \\

Замість диска «С» потрібно вказати диск на вашому комп'ютері, де встановлений локальний сервер. Тоді, для перегляду створюваного нами на основі Div верстки макету в 2 колонки, потрібно набрати наступний шлях в адресному рядку браузера:

Http: // localhost / test /

Блін, якщо все так детально розповідати, то вийде невелика книга по блокової верстці, причому, більша її частина буде присвячена основам вебмастерінга, але я вже по іншому писати не можу, звик розбирати всі нюанси по поличках. Вибачайте, досить підковані вебмастера, яким все це вже далеко не в новинку.

Продовжуємо розмову про макеті. У файлі Index.html ми будемо задавати самі DIV-контейнери, на яких і буде будуватися наш каркас, а в файлі Style.css - описувати становище і зовнішній вигляд цих DIV-контейнерів. Це в двох словах, а як воно буде на ділі, ви побачите трохи згодом.

Для того, щоб спостерігати в браузері результати наших праць, ми будемо періодично звертатися з адресного рядка браузера до папки TEST, розташованої на вашому хостингу або ж на локальному сервері. У разі реального хоста, в адресному рядку браузера вам потрібно буде набрати щось на зразок цього:

Https: // сайт / test

Але тут є два «але». По-перше, замість https: // сайт / вам потрібно ввести свій Урл, а по-друге, зверніть увагу на регістр латинських букв, які складають назву вашої директорії TEST.

Якщо ви написали назву папки великими літерами, то і в адресному рядку потрібно набирати назву папки великими (я написав тут TEST в верхньому регістрі, тільки лише з метою його виділення на тлі решти тексту).

Справа в тому, що на реальному хостингу в більшості випадків сервера працюють під управлінням UNIX подібної операційної системи, в якій великі і малі літери розрізняються (На відміну, від Windows, працювати з якою ми звикли).

Починаємо верстати макет сайту в 2 колонки на дівах

Як я вже згадував, для початку ми спробуємо створити макет в дві колонки, який схематично можна представити так:

Всі елементи помістимо в один великий Div-контейнер для того, щоб можна змінювати розміри і вирівнювання всього макета через властивості цього контейнера. Усередині основного Div будуть перебувати контейнери, що відповідають за формування окремих блоків (шапки, лівої колонки, області для контенту, футера).

Ми поставимо їм розміри і налаштуємо позиціонування на сторінці з допомогою CSS. Отже, приступимо.

Почнемо з Index.html. Відкрийте його на редагування в зручному для вас редакторі (я користуюся для цієї мети найкращим з безкоштовних текстових редакторів Нотепад ++ -).

Для того, щоб звикати до правильного оформлення HTML документів, давайте відразу пропишемо стандартну частину (на цьому я як раз зупинявся в попередній статті. Там буде DOCTYPE () і всі інші верхні теги, які браузер в разі їх відсутності може додати і сам (розумні вони стали - жах):

Значення всіх рядків в цьому коді я детально пояснював в попередній статті (див. Посилання в самому початку цієї публікації), тому зараз зупинюся лише на рядку:

Цей рядок говорить браузеру, де йому шукати і як називається файл каскадних таблиць стилів (він має розширення CSS), який потрібен браузеру для коректного відображення задуманого нами оформлення шаблону майбутнього сайту. У нашому випадку він називається Style.css (), а шукати його потрібно в тій же папці, де лежить Index.html (власне, в якому і прописана ця строчка).

Чому саме в цій же папці? Тому, що якщо ви не прописуєте ніякого шляху до файлу (вказуєте тільки його назва), то браузер буде його шукати в тій же директорії, де лежить виконуваний зараз (в нашому випадку це Index.html). Тобто відсутність шляху буде рівнозначно тому, як якщо б я прописав шлях до Style.css у вигляді:

Але перший варіант запису коротше і більш універсальний, тому що там прямо не вказується шлях до папки з файлами, а значить можна буде помістити файли Index.html і Style.css в іншу директорію, звернутися до Index.html з адресного рядка і все одно буде довантажуючи Style.css. Детальніше про відносні і абсолютні посилання).

У зв'язку з цим хочу зауважити, що ви взагалі можете не морочитися з хостингом або ж з локальним сервером. просто створіть на своєму комп'ютері будь-яку папку і помістіть в неї наші Index.html і Style.css. Пропишіть в першому з них шлях до файлу Style.css у вигляді:

І все. Тепер ви зможете відкрити Index.html (подвійне клацання мишею по ньому) в браузері, призначеному за замовчуванням для відкривання файлів з розширенням HTML у вас на комп'ютері, і при цьому буде автоматично довантажуючи Style.css.

Цей спосіб зручний на етапі навчання, але все ж, все що я вам говорив про роботу на реальному хостингу або локальному сервері, вам теж надалі обов'язково стане в нагоді. А зараз робота з папки на своєму комп'ютері може бути навіть більш зручною, ніж на хостингу. Хоча, кому як.

Прописуємо потрібний набір блоків в index.html

Тепер нам потрібно буде створити чотири DIV контейнера для всіх частин нашого 2 колоночного макета (шапки, лівої колонки, області для контенту, футера) і укласти їх в один великий Div.

Всередину Div контейнерів для частин макета можна буде зробити висновок для наочності назви цих блоків. Все це ми будемо писати між відкриває і закриває Html тегами Body. Вийде приблизно такий код в Index.html:

Тобто відразу за відкриває тегом Body ми прописали відкриває тег основного Div контейнера макета: