Здрастуйте, шановні читачі блогу . У цій статті мова піде, як ви вже, напевно, здогадалися з назви, про так званої блочної верстки сайту, але такою мовою, щоб було зрозуміло будь-якій людині, навіть ніколи з цим не сталкивающемуся.
На даний момент існують два основних способи верстания — блокова верстка DIV і таблична. Трохи раніше, у статті, присвяченій створенню таблиць в HTML, я писав про деякі недоліки останнього варіанту, тому зараз не буду зупинятися на цьому питанні.
Що нам буде потрібно для створення простого макету сайту
Приймемо як даність, що використання DIV верстки в більшості випадків буде краще, ніж використання табличної. У той же час вона є трохи більш складною в освоєнні і розумінні, ніж таблична, але воно того варто.
Не пошкодуйте часу і спробуйте зануритися для початку, хоча б прочитавши цю статтю, в якій я постараюся в доступній формі розповісти про основні моменти та принципи, які використовуються при створенні макета (2 і 3 колонки) сайту на дивах (або ж по іншому контейнерах).
Звертаю вашу увагу, що в цій статті я досить сильно забігаю вперед в нашому з вами процесі вивчення основ. Справа в тому, що крім знань основ HTML (тут все для чайників) вам знадобляться хоча б базові знання CSS (каскадних таблиць стилів), які є невід’ємною і основною частиною блокової верстки. Але як раз про CSS я ще не розповідав.
Тим не менш, думаю, що нам це не завадить, а ця стаття може стати своєрідною вступної статті по урокам CSS. Тут ви на конкретних, нескладних прикладах побачите і, сподіваюся, зрозумієте логіку роботи з каскадними таблицями стилів у зв’язці з мовою розмітки.
Сьогодні ми спробуємо розібратися в нюансах створення найпростіших макетів (шаблонів) у 2 і 3 колонки. Всі властивості CSS, які при цьому будуть використовуватися, я постараюся детально роз’яснити і пояснити необхідність їх використання. А вже в наступних статтях ми розглянемо всі властивості каскадних таблиць стилів у всіх подробицях і варіаціях (вже розглянули — див. посилання вище).
Для того, щоб нам створити простий макет сайту, заснований на блоках, досить буде двох файлів, в одному з яких ми пропишемо HTML код нашої макета (нехай це буде файл index.html), а в іншому — розмістимо стильове оформлення макета (назвемо цей файл style.css). Чому ми назвали перший з файлів index, а не якось по іншому?
Браузер працює з файлами index
Вся справа в алгоритмі роботи браузерів і в тому, які дії вони виконують при переході по Урл, введеному в його адресному рядку. Як ви, напевно, знаєте, файли будь-якого інтернет проекту розташовані на сервері хостингу (фактично, сервер це звичайний комп’ютер, заточений під специфічні завдання хостингу і працює, як правило, під управлінням Linux-подібних операційних систем).
Для кожного розташованого на сервері ресурсу відводиться своя папка, яка міцно зв’язується з його доменним ім’ям (тут про перевірку доменів читайте, а тут про покупку їх у реєстратора ) за допомогою DNS серверів.
Так от, браузер буде шукати за вказаною в адресному рядку шляху саме файл під назвою index.html або index.php.
Напевно, в теорії не зовсім зрозуміло, тому поясню на прикладі. Коли ви набираєте в адресному рядку, припустимо:
https://
то браузер здійснює пошук в кореневій папці мого блогу (фізично файли блогу знаходяться на сервері хостингу, в папці public_html, яка асоційована з доменним ім’ям мого блогу ). Що ж шукає оглядач докорінно мого блогу? А він шукає файл index, і, знайшовши його, відкриває:
Підвищуємо безпеку свого сайту — забороняємо перегляд вмісту директорій ст. htaccess
А що станеться, якщо за вказаною в адресному рядку шляху браузер не знайде index? Тут все залежить від налаштувань хостингу. Якщо все правильно налаштовано, то браузер відобразить сторінку помилки 404 ( тут описано створення 404 сторінки в Joomla). Якщо ж налаштоване не правильно, то у вікні браузера ви можете побачити вміст каталогу (папки), яка вказана в Урлі.
Природно, що нічого змінити в цих директоріях ви з браузера не зможете, але зломщикові може бути досить просто знання вмісту директорій для подальшого успішного злому. Давайте перевіримо. Зайдіть за цією адресою: https:///image/.
У вас відкриється мій варіант сторінка 403 помилки. У цій папці у мене зберігаються зображення, які я використовую на сторінках блогу (наприклад, це — https:///image/goo.png).
В принципі, ви можете самі заборонити перегляд (лістинг) директорій, в яких немає файлів index. Зробити це можна декількома способами. Один з них — це додати у всі такі каталоги порожній файл index.html.
Для цього вам потрібно буде в текстовому редакторі зберегти порожню сторінку, давши їй назву index.html а потім, підключившись до вашого сайту по FTP, скопіювати його в усі директорії де це потрібно.
Тепер, якщо хтось набере в адресному рядку шлях до такої папки, то він побачить порожній білу сторінку і все. Хоча, звичайно ж, замість порожнього index.html можна створити і осмислений, наприклад, допомагає користувачеві зорієнтуватися на вашому сайті (зразок правильної сторінки помилки 404).
До речі, в папках з дистрибутивом Joomla, які за замовчуванням не повинні мати файлів index, примусово вже доданий порожній index.html. Все це зроблено для підвищення безпеки роботи. Але даний спосіб дуже трудомісткий, бо таких каталогів може бути безліч. Тому можна скористатися альтернативним способом.
Є такий файл, призначений для додаткової конфігурації сервера Apache (більшість хостингів працюють під управлінням Apache), який називається .htaccess. Так, так, саме так, з точкою перед назвою і без розширення. Специфіка лінукса, однак. Так от, він скоріш за все вже є у вас в кореневій папці вашого сайту.
Вам потрібно буде підключитися по FTP і відкрити кореневу директорію (зазвичай це або public_html, або htdocs). Знайшли .htaccess? Якщо ні, то спробуйте вибрати з верхнього меню FileZilla (тут про це FTP клієнта читайте докладніше) пункт «Сервер»-«Примусово показувати приховані папки».
Як і раніше не бачите .htaccess? Нічого страшного, ви можете самі створити новий. Для цього вам потрібно в текстовому редакторі зберегти порожню сторінку, давши їй назву .htaccess, а потім, підключившись по FTP, скопіювати цей порожній файл в корінь вашого ресурсу. Все, тепер у вас він є, вітаю. Правда, він буде порожній, але це поправимо.
Для заборони перегляду через браузер вмісту директорій, в яких немає файлів index, вам потрібно буде прописати лише одну сходинку:
Options -Indexes
Всі. Власне, цього ми і добивалися.
Створюємо простий макет сайту в 2 колонки
Повернемося до нашого макету сайту на основі блокової верстки, який у найпростішому варіанті буде складатися всього з двох файлів —index.html і style.css. Їх ви можете покласти, наприклад, в будь-яку створену спеціально для цього директорію на віддаленому хості. Припустимо, докорінно створите каталог TEST з допомогою все тієї ж Файлзилы.
Тоді при зверненні через браузер папку TEST (наприклад, так https:///test) запуститься index.html. Але браузер так само здійснить підвантаження і style.css, т. до. ми пропишемо в index.html шлях до нього. Ну, а тепер давайте розглянемо все це детальніше на конкретних прикладах.
Спочатку давайте спробуємо створити простий макет в 2 колонки на Div верстці, який буде містити верхню частину (шапку або ж header), нижню частину (підвал або ж footer), а так само ті самі дві колонки, з-за яких такий макет і називається 2 колоночным — це область для основного вмісту сторінки (content) і область лівої колонки (left), в якій зазвичай розташовуються елементи, що полегшують навігацію по сайту (меню і тому подібні речі), реклама і багато іншого.
У схематичному вигляді 2 колоночный макет на основі Div буде виглядати так:
Кожен з його елементів ми помістимо в свій контейнер DIV, привласнимо йому унікальний ID, для якого у файлі CSS додамо ряд властивостей, що описують зовнішній вигляд і положення даного контейнера на сторінці.
Крім цього всі контейнери з елементами 2 колоночного макета ми помістимо в один загальний DIV, який дозволить нам регулювати положення всього макета на сторінці (задати її ширину, вирівнювати відносно краю сторінки і т. д.)
Базові елементи структури будь-якого HTML коду
Для початку вам потрібно буде створити і зберегти в текстовому редакторі (тут описаний Нотепад++) або ж у спеціалізованому веб-редакторі (Dreamweaver) два порожніх файлу index.html і style.css.
Почнемо, природно, з написання коду у файлі index.html. Ви вже, напевно, знаєте, що в будь-якому HTML файлі присутні вихідні обов’язкові елементи, які виглядають приблизно так:
, укладена між HEAD, дозволяє підказати браузеру, в який саме кодуванні російської мови збережений цей документ. В нашому випадку (вказана кодування UTF-8, але так само досить поширеною є ще і кодування Windows-1251. Взагалі, з допомогою мета тегів в заголовку документа, крім кодування російської мови, зазвичай додають ключові слова документа (keywords), наприклад:
або його опис (description), наприклад:
і багато іншого.
Метатег тайтл
визначає заголовок сторінки (TITLE), створюваної за допомогою цього документа. Ви можете бачити вміст TITLE в самому верху вікна вашого браузера.
Вміст TITLE має дуже велике значення для пошукових систем. Це найбільш вагомий критерій у розподілі сторінок різних сайтів в пошуковій видачі. Звертайте на його вміст особливу увагу. Про те, як налаштувати правильне формування тега TITLE читайте тут
Думаю, що загальну структуру документа добре візуалізує наступний малюнок:
Ну, ось довелося дуже істотно відволікатися на пояснення важливих моментів, зустрінутих у ході розповіді про блокової верстки (DIV верстки), та так, що в цій статті місця на розповідь про створення 2 колоночного макета вже і не залишилося. Але думаю, що нічого страшного не станеться, якщо ми продовжимо в наступному.
Можете також подивитися відео по темі:
«alt=»»>
«alt=»»>
Удачі вам! До зустрічей на сторінках блогу
