Верстаємо сайт самі

989

Здрастуйте, шановні читачі блогу . Сьогодні я хотів би поговорити про те, навіщо вам може знадобитися при вашій роботі з сайтом знання мови HTML (читайте про те, що це таке тут), основи роботи з таблицями каскадних стилів CSS (вступну статтю по темі ви знайдете тут), а так само розуміння хоча б основ і принципів верстания сайтів, побудови програм на мові PHP і логіки роботи з базами даних MySQL.

Верстаємо сайт самі

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

Навіщо може знадобитися при роботі над сайтом знання мов розмітки, стилів, серверного програмування)

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

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

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

Почну я, звичайно, з оформлення вебсторінок (власне, на даний момент я вже це справа закінчив і ви можете ознайомитися з результами тут і тут). Як я вже згадував в одному з попередніх постів, до недавнього часу всі ресурси складалися з сторінок у форматі HTML. Причому, там задавалося і наповнення вебсайту (тексти, зображення, таблиці) та його оформлення (колір, фон, відступи).

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

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

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

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

У якому редакторі краще правити або вносити зміни в код

Нічого складного в цьому немає, адже по суті це навіть не мова програмування, а гіпертекстова розмітка, щось схоже на синтаксис в російській мові. Що хотілося б відразу порадити, спираючись на власний досвід? Пробуйте писати теги самостійно в блокноті, типу Notepad++ (читайте мій огляд цього редактора), а не в програмах, типу Дримвьювер. Чому?

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

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

Хоча, це моя особиста думка (ІМХО), і вам вирішувати, що зручніше. Наприклад, Євген Попов, по курсам якого я вивчав все це справа, судячи з усього, прихильник Дримвьевера. Важливо в принципі одне – щоб ви правили код в тому редакторі, який здатний зберігати всі внесені зміни і що може, при бажанні, повернути все як було (назад).

У цьому випадку, як би ви не напартачили, все поправимо. І, звичайно ж, дуже зручна підсвічування синтаксису мови, на якому ви пишете або редагуєте код. Notepad++ — це безумовно мій вибір! Про його можливості я розповів у наведеній трохи вище статті.

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

У той час як теги вебсторінок в сучасній CMS не записані в якомусь одному або декількох файлах, як було раніше, а генерується (інтерпретується) з PHP. І саме вже згенерований таким чином Html код підсовується браузеру для того, щоб він у свою чергу інтерпретував його в легкотравну для нас форму інтернет-сторінки. Хитро, чи не правда?

Тому редагування тегів у будь CMS не є такою вже тривіальної завданням, навіть якщо ви повністю освоїлися з мовою розмітки. Адже теги вам доведеться правити в PHP файлах і, отже, треба знати хоча б його базові поняття і синтаксис.

Але не хвилюйтеся, для того щоб правити дизайн великих пізнань в PHP від вас не буде потрібно. Теги там лежать, як би сказати, на поверхні і не становить великої праці їх ідентифікувати і поправити при необхідності.

Які інструменти ви зможете використовувати

Проблема виникає, як правило, в іншому. Як знайти той файл з розширенням PHP, у якому формується потрібний фрагмент тегів? Ось питання питань. Так, звичайно, якщо у вас є досвід в роботі з даними движків, то ви, я думаю, соориентируетесь. Але якщо ви новачок і не знаєте який з сотень Пхп файликів за що відповідає?

Тут вам допоможе чудовий плагін FireBug для не менш чудового браузера FireFox , а так само згаданий вище Notepad++, і не безызвестный багатьом файловий менеджер для Windows — Total Comander. Ця зв’язка програм допоможе вам гори звернути і дозволить заощадити масу часу.

В найближчих постах я збираюся докладно розповісти, як використовувати ці програми для ефективного вирішення виникаючих проблем з сайтом. Так, трохи не забув про незамінну програму, що дозволяє отримати доступ по FTP – FileZilla (тут вже є стаття на цю тему). Ну і про PhpMyAdmin, що дозволяє отримати доступ до бази даних ми, звичайно ж, теж поговоримо.

Ну ось, намічені цілі, завдання поставлені, залишилося тільки їх виконувати. За сим дозвольте відкланятися.

Удачі вам! До зустрічей на сторінках блогу