Основы веб-технологий. День 2

Василика Климова

Основы создания веб-странички

Василика Климова
Разработчик интерфейсов
Artec 3D

Moscow Coding School

День 2

Семантическая верстка

Подход использования тегов согласно их назначению

<em>, <strong> - смысловое выделение текста
<i>, <b> - просто оформление текста

Семантическая верстка. Плюсы

CSS

Свойства CSS

color
background
font-size
text-align
...

Каскадная таблица стилей

      p {
        color: #000;
        background: #fff;
      }
    

Отличия margin от padding

Селекторы CSS

#id
.class
div
div > a - все элементы <a>, у которых родитель <div>
a:hover - наведение на элемент <a>
...

Кроссбраузерность

Одинаковые вид и поведение сайта во всех браузерах

Проверка

CSS префиксы

Типы верстки

Фиксированная верстка

Размеры блоков определены заранее.
Верстка блоков в пикселях.

Фиксированная верстка

Плюсы Минусы

Резиновая верстка

Ширина блоков зависит от размера окна браузера.
Верстка блоков в процентах.

Резиновая верстка

Плюсы Минусы

Адаптивная верстка

Сайт подстраивается под устройство пользователя.
Может отображать контент по-разному.
Используются CSS медиа-запросы.

Пример

Адаптивная верстка

Плюсы Минусы

Отзывчивая верстка

Совмещение подходов резиновой и адаптивной верстки.
Блоки зависят от размера браузера.
Используются CSS медиа-запросы.

Пример

Медиа-запросы

Если ширина окна браузера меньше 650 пикселей

@media screen and (max-width: 650px) { }

Отзывчивая верстка

Плюсы Минусы

Схематичный макет сайта

Практическая часть

Универсальные атрибуты

id
class
title
style
...

Практическая часть

Полезный класс .clear

      .clear:after {
        content: " ";
        float: none;
        clear: both;
        display: block;
      }
    

Свойство position Static

position: static;

Свойство position Relative

position: relative;

Свойство position Absolute

position: absolute;

Свойство position Fixed

position: fixed;

Собственные шрифты

Правило @font-face

Формат WOFF самый легковесный

      @font-face { 
         src: url(fonts/gentium.woff); 
         font-family: Gentium; 
         font-weight: 400; 
      }
    

Полезные ссылки

Тест по пройденному материалу

Василика Климова

likita
vasilika.klimova
lik04ka

Навигация

Список всех уроков

Fork me on Github