Книга «Веб-розробка. Вичерпне керівництво»

imageПо суті ця книга персональний тренер по створенню сайтів. Ви почнете з того, що дізнаєтеся, як створювати традиційні веб-сторінки, використовуючи стандарти, на яких ґрунтується кожна сторінка у Всесвітній павутині (це HTML і CSS). Потім ви познайомитеся з сервісами від таких компаній, як Google, і вони навчать вас підраховувати кількість відвідувачів, допоможуть популяризувати сайт і навіть отримати трохи грошей. Ви коротко познайомитеся з мовою програмування JavaScript, що використовується майже на кожній інтерактивній сторінці у Всесвітній павутині.
Кажучи коротко, ця книга буде прекрасним посібником для людей, охочих самостійно створити з нуля сайт, який буде володіти всіма фішками, властивими сучасним сайтів. Це видання також стане відправною точкою для тих, хто хоче заглибитися в області веб-дизайну. Якщо ви ставитеся до якої-небудь з перерахованих вище категорій, ласкаво просимо на борт!

Структура книги
Книга розділена на п'ять частин, кожна з яких у свою чергу складається з декількох розділів.

I. Створення простих веб-сторінок. В цій частині ви отримаєте основну інформацію про HTML, мовою створення сайтів (розділи 1 і 2); потім познайомитеся з мовою CSS, який дозволяє додавати кольори, шрифти та межі (глава 3), а також зображення на сторінки (глава 4); і нарешті, ви зрозумієте, наскільки можна спростити собі життя, використовуючи HTML-редактори (глава 5).

Частина II. Від веб-сторінок до сайтів. У цій частині пояснюється, як об'єднати веб-сторінок, сайт. Ви дізнаєтеся, як зв'язати сторінки разом (глава 6), створите стиль всього сайту за кілька кроків (глава 7) і познайомитеся з прийомами верстки стильних макетів (глава 8). Нарешті, ви навчитеся розміщувати свої сторінки у Всесвітній павутині, скориставшись послугами хостингу компанії (глава 9).

Частина III. Зв'язок з аудиторією. З даної частини ви дізнаєтеся, як зробити так, щоб ваш сайт став доступним для таких пошукових систем, як Google (глава 10), і навчіться залучати відвідувачів (глава 11). Крім того, ви дізнаєтеся, що таке блоги, і познайомитеся з безкоштовними програмами для їх створення (глава 12). І нарешті, ви дізнаєтеся, як заробити гроші на своєму сайті, відображаючи рекламу або продаючи які-небудь товари (глава 13).

Частина IV. Інтерактивний та мультимедійний контент. Тепер, коли ви дізналися, як створити професійний працюючий сайт, чому б не додати в нього оригінальні елементи, наприклад яскраві кнопки і спливаючі меню? Вам не доведеться освоювати складні прийоми програмування на мові JavaScript, але ви дізнаєтеся, як знайти і використовувати безкоштовні сценарії на своєму сайті (глави 14 і 15). Ви також зможете трохи розважитися, додавши на сайт відеокліпи і МР3-програвач (глава 16).

Частина V. Програми. В кінці книги знаходяться два додатки. У першому наводяться корисні веб-посилання для амбітних веб-дизайнерів, які хочуть покращити свої навички. У другому додатку представлений короткий довідник по мові HTML. У ньому пояснюються основні елементи HTML і даються посилання на докладний опис у різних розділах цієї книги.

Уривок
Скорочення коду за допомогою елемента div
Завдяки спадкуванню стилів (див. підрозділ «Механізм спадкування» розділу «Накладення стилів» глави 3) елементи всередині контейнера div батьківського елемента div багато властивостей, наприклад розмір шрифту і ширину полів. Якщо налаштувати властивість font-size у елементі div, який містить абзаци тексту публікацій, всі вони будуть відформатовані.

Після додавання рамок до публікацій ви можете використовувати спадкування у власних цілях. Наприклад, замість того, щоб призначати розмір шрифту 16 пікселів класів p.review та p.reviewEnd, можете встановити розмір шрифту відразу для класу div.review, який, у свою чергу, замістить відповідне властивість класу p.byline.

Ви можете скоротити розмітку ще більше, додавши клас div.intro і об'єднавши два вступних абзацу на початку сторінки. Таким чином можна встановити колір тексту

/* Вступний розділ. */
div.intro {
color: #9C9C9C;
margin-bottom: 40px;
}

Тепер вам взагалі не потрібен клас p.intro. Ви можете видалити його з таблиці стилів і видалити атрибут класу з двох вступних абзаців.

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

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

Скорочення коду за допомогою контекстних селекторів
Додавши клас до кожного елементу, можна форматувати об'єкти дуже швидко. Проте в наведеному раніше прикладі до кожного абзацу після імені автора необхідно додати атрибут class=«review». На щастя, елемент div і новий тип селектора, який називається контекстним селектором, дозволяють значно заощадити час.

Контекстний селектор відповідає елементу всередині іншого елемента. Щоб зрозуміти різницю, погляньте на цей селектор типу:

b {
color: red;
}


Цей селектор форматує весь напівжирний текст червоним кольором. Але що, якщо ви хочете працювати тільки з жирним текстом, який з'являється всередині маркірованого списку? Можете зробити це, використовуючи наступний селектор контекстного типу, який знаходить елементи маркірованого списку (ul), а потім полює за напівжирними елементами всередині них. У наведеному далі прикладі напівжирний текст забарвлюється в червоний колір:

ul b {
color: red;
}

Для створення селектора контекстного типу ви ставите пробіл між двома елементами.
Контекстні селектори корисні, але продумування різних можливостей комбінування елементів може викликати легке запаморочення. Реальну вигоду від використання контекстного селектора ви побачите, коли застосувати його для форматування елемента певного типу всередині певного класу. Наприклад, уявіть, що станеться, якщо ви застосуєте наступне правило таблиці стилів:

h2.review {

змініть селектор наступного:

div.review h2 {

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

Ви можете видалити атрибут class з h2, залишивши таку просту розмітку:

<div class="review">
<h2>...</h2>

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

Наприклад, уявіть, що ви хочете створити правило для форматування абзацу за допомогою наступного контекстного селектора:

div.review p {

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

<div class="review">
<h2>...</h2>
<p class="byline">...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p class="reviewEnd">...</p>
</div>

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

Щоб вирішити цю проблему, необхідно змінити класи byline і reviewEnd. Найпростіший спосіб зробити їх більш специфічними — змінити, використовуючи контекстний селектор. Іншими словами, замість того, щоб створювати правило, застосовується до будь-якого абзацу, який використовує клас підпису автора, необхідно створити правило, яке застосовується до будь-якого абзацу, використовує клас byline і знаходиться всередині публікації:

div.review p.byline {

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

Контекстні селектори — дуже популярний спосіб визначити різні правила форматування для різних секцій сторінки. Якщо ви подивитеся на таблиці стилів, створені іншими користувачами (а ми рекомендуємо це робити, щоб познайомитися з новими методами та покращити навички роботи з CSS), то побачите багато елементів div і контекстних селекторів в роботі.

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

/* Видаляємо відступи і налаштовуємо шрифт всієї сторінки */
body { ... }
/* Вирівнюємо рядка абзацу */
p { ... }
/* Робимо все зображення обтічними та форматуємо їх */
img { ... }
/* Затемнюємо заголовок сайту */
h1 { ... }
/* Вміст сторінки без урахування заголовка */
div.main { ... }
/* Область введення */
div.intro { ... }
/* Область повної публікації */
div.review { ... }
/* Заголовок публікації */
.review h2 { ... }
/* Фрагмент публікації */
.review p { ... }
/* Ім'я автора */
.review .byline { ... }
/* Посилання в кінці фрагмента публікації */
.review .reviewEnd { ... }

Про автора
Метью Макдональд (Matthew MacDonald) — науковий і технічний автор декількох десятків книг. З допомогою таких книг, як WordPress: The Missing Manual і HTML5: The Missing Manual1, він познайомив безліч читачів з технологіями Всесвітньої павутини. Крім того, у виданнях Your Brain: The Missing Manual та Your Body: The Missing Manual він продемонстрував людям всю силу і можливості їх мозку і тіла.

Про творчій команді
Пітер Маккі (Peter McKie) (редактор). Мав задоволення працювати над попередніми версіями цієї книги. Живе в Нью-Йорку, де вивчає історію занедбаних будівель і іноді наводить в них порядок. Адреса електронної пошти: pmckie@gmail.com.

Кара Эбрахим (Kara Ebrahim) (редактор з виробництва). Живе і працює в Кембриджі. Обожнює займатися графічним дизайном і проводити час на свіжому повітрі. Адреса електронної пошти: kebrahim@oreilly.com.

Шеллі Пауерс (Shelley Powers) (технічний рецензент). Розробник сайтів і автор технічних книг, живе в Сент-Луїсі, штат Міссурі. В коло її інтересів входять мови програмування HTML5, JavaScript, а також інші веб-технології.

Джулі ван Кеурен (Julie Van Keuren) (коректор). Звільнилася з редакції однієї газети в 2006 році, щоб переїхати в Монтану і втілити в життя свою мрію — стати фрілансером. Вона і її чоловік (який пише романи) виховують двох синів — Декстера і Майкла. Адреса електронної пошти: little_media@yahoo.com.

Рон Штраусс (Ron Strauss) (упорядник оригінального покажчика). Спеціалізується на складанні предметних покажчиків у літературі, присвяченій інформаційним технологіям. У вільний від роботи час грає на альті. Живе в Північній Каліфорнії зі своєю дружиною і в той же час колегою Енні, а також з карликовим пинчером Кенгой. Адреса електронної пошти: rstrauss@mchsi.com.

» Більш докладно з книгою можна ознайомитися на сайті видавництва
» Зміст
» Отрывок

Для Хаброжителей знижка 25% по купону — Creating a Website

У нашого партнера «Нетология» є курси за напрямами: HTML, CSS, JavaScript, Node, Python, PHP та ін. По купону piter_prog знижка 5 000 крб до 20 листопада.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.