Введення в HTML і CSS для дизайнерів

Введення в HTML і CSS для дизайнерів.

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

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

Що таке HTML?

Майже все, що ви бачите під час перегляду веб-сторінок, — це документ на мові гіпертекстової розмітки (HTML). гіпертекст — це текст, який посилається та посилається на інший текст на екрані, дозволяючи вам отримати доступ до вмісту простим клацанням. Мова розмітки - Це набір тегів, укладених у квадратні дужки <>. Ці HTML-теги зазвичай бувають парами:

<Початковий тег> : Також відомий як відкриває тег.
: Також називається закриває тегом і включає косу риску /

Коли ви укладаєте вміст між цими двома тегами, все це називається елементом :

це абзац

При перекладі цієї мови в Інтернет глядачі не побачать теги — вони побачать лише вміст між ними.

HTML 5, поточна версія HTML містить близько 100 тегів з атрибутами, які змінюють свою функцію або зовнішній вигляд. Вам потрібно знати всього 30-40 таких тегів, щоб почати розуміти та створювати HTML. Погляньте на них та зверніть увагу, як вони згруповані за функціями. Давайте наочно побачимо це у дії.

Нарізка зображень у фотошопі.

Введення в HTML і CSS для дизайнерів

Перед кодуванням потрібно вирішити, які розділи веб-сайту повинні включати зображення, а які можна кодувати. Давайте скористаємося інструментом Photoshop Скибочка (прихований під підменю інструменту Crop ) і виділимо такі області, як фотографія буріто і тако Джоан .

Тепер нам потрібно експортувати наші фрагменти - виберіть "Файл" > "Зберегти для Інтернету" (Alt + Shift + Ctrl + S). Коли вибрано конкретний фрагмент, можна встановити його параметри експорту у правій частині вікна (JPG, PNG тощо. буд.). Якщо двічі клацніть конкретний фрагмент, ви побачите спливаюче вікно « Параметри фрагмента » — це дозволяє давати імена конкретним файлам фрагментів.

За замовчуванням всі зображення розміщуються в: підкаталог /images/. Якщо ви хочете експортувати лише створені вами фрагменти, виберіть « Всі призначені для користувача фрагменти » у вікні «Зберегти». Введення в HTML і CSS для дизайнерів

Створення базового HTML-документа

У нас є зрізи, давайте створимо простий HTML-документ. Введення в HTML і CSS для дизайнерів

рядок 1 : Оголошує, що діалект HTML 5 є мовою документа.

рядок 2 : елемент представляє корінь HTML-документа. Це обов'язковий контейнер, що означає межі нашого документа.

3 : розділ містить невидимі елементи сторінки, такі як метаінформація, заголовок і т. Д.

рядок 4 : Це оголошення кодування документа. UTF-8 - безпечний вибір - ви можете дізнатися більше про кодування символів HTML тут .

рядок 5 : Зразок сторінки Це заголовок сторінки, який відображається у рядку заголовка браузера.

6 : закриває тег із рядка 3.

рядок 7 : Цей елемент body міститиме весь видимий вміст сторінки.

рядок 8 : закриває тег з рядка 2. Цей елемент відзначає кінець документа. Введення в HTML і CSS для дизайнерів

Є й інші можливі способи кодування того самого дизайну. Ми будемо використовувати семантичні теги HTML 5 (header, nav, article, footer) для створення базової структури документа:

Це макет, перекладений на HTML:

Кілька зауважень:

Рядки 11 і 12 : Елементи є сутністю Інтернету, оскільки вони використовуються для створення гіперпосилань . Вони пов'язані з атрибутом HREF і мають пов'язувати цільовий URL .

рядки 18-20 : це кілька тегів форматування тексту: позначає заголовок першого рівня; позначає абзац; означає розрив рядка.

Форматування за допомогою каскадних таблиць стилів (CSS).

Введення в HTML і CSS для дизайнерів

Коли ви відкриєте лише HTML-файл у веб-браузері, ви побачите, що він не відформатований як наш попередній дизайн. Це тому, що коду HTML недостатньо – нам потрібно відформатувати його за допомогою каскадних таблиць стилів (CSS) . CSS – це мова таблиць стилів, яка використовується для форматування елементів HTML.

Але чому саме нам потрібно поєднувати HTML із CCS? Нещодавно форматування досягалося шляхом додавання атрибутів до тегів HTML. Однак це призвело до коду, що не читається і не підтримується. Рішенням було відокремити вміст документа (HTML) від форматування документа (CSS).

Давайте Розбивка просте правило CSS : .

селектор : це HTML-елемент, який ви хочете стилізувати Наприклад: <стаття>

Оголошення : правило CSS може мати одне або кілька оголошень. Кожне оголошення складається з якості та значення і розділяється крапкою з комою. Ви розміщуєте оголошення у фігурні дужки {}. Введення в HTML та CSS для дизайнерів

властивість : це характеристика стилюВи хочете змінити. Наприклад: колір тла, розмір шрифту і т.д.

значення : кожна властивість має значення, що з ним. Наприклад: # ffcc11 (для кольору фону), 16px (для розміру шрифту) тощо.

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

Давайте подивимося на деякі правила CSS, необхідні для форматування нашого простого дизайну.

Властивості позиціонування CSS : існує 4 різних методи (статичний, фіксований, відносний та абсолютний), які дозволяють нам позиціонувати певні елементи у нашому дизайні. Після встановлення одного з цих методів ви можете позиціонувати елементи, використовуючи властивості top, right, bottom і left - вони працюватимуть по-різному залежно від того, який із 4 методів ви використовуєте. У цьому випадку ми хотіли б позиціонувати plate_image, використовуючи абсолютне позиціонування.

Модель CSS Box : ця модель являє собою рамку, яка охоплює всі елементи HTML, включаючи поля, межі, відступи та вміст. Поля – це невидима область навколо кордону, а відступи між кордоном та вмістом.

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