3. План занятия
HTML5
• Текст
• Ссылки
• Якоря
• Изображения, форматы
• Списки
• Таблицы
• Фреймы
• Формы
CSS3
• Сброс стилей
• Свойства VS общие
свойства
• Позиционирование
• Пространство имен
• Адаптивная верстка
• Плохие стили
• Валидация
Bootstrap 3
• Назначение файлов
• Примеры проектов
• Интеграция (локальная vs
CDN)
• Поддерживаемые
платформы
• Структура сетки
• Обзор справочника
4. Текст:
Все пробелы считаются за один, исключение внутри <pre></pre>
Перенос по пробелам и дефисам, а не по слогам
Можно использовать коды символов ( это пробел)
Ссылки:
абсолютные
Относительные
Параметр target: _blank, _self, _parent, _top
Якоря – закладки:
5. Изображения:
Gif - Graphics Interchange Format, 256 цветов, 1 уровень прозрачности, чересстрочная развертка 2-4-8
JPEG -Joint Photographic Experts Group, progressive jpg, 24bit (34 млн.), без прозрачности
для художественных фото без мелких деталей
PNG - Portable Network Graphics, PNG-8 нет прозрачности, PNG-24 256 уровней прозрачности (альфа
канал).
для детализированных изображений
Маркированный и нумерованный списки:
6. Таблицы:
Фреймы, современное применение:
Использование для всплывающих окон
Вставка сторонних медиа-плееров
<iframe width="560" height="315" src="//www.youtube.com/embed/ddpQEwS9QxY" frameborder="0" allowfullscreen>
</iframe>
7. Формы
Запросы GET и POST
GET – предназначен для передачи информации в адресной строке, в формате
test.ru/?ключ=значение& ключ2=значение2
ограничение в 4кб
POST – предназначен для передачи больших объемов информации на сервер, не
кэшируется.
8. CSS
Для чего нужен сброс стилей
http://necolas.github.io/normalize.css/3.0.2/normalize.css
Свойства VS общие свойства
Например:
font (font: 12pt sans-serif; )
Font-weight
Font-size
10. Адаптивная верстка:
сайт хорошо выглядит на любых типах устройств
размеры задаются в %
большинство готовых тем адаптивные
http://themeforest.net/
Как делать не нужно:
Проверка сайта:
https://developers.google.com/speed/pagespeed/insights/
11. Bootstrap 3
• Позволяет экономить десятки часов на верстке!
• Поддерживает адаптивную верстку
• Поддерживает разные типы устройств
• Есть кастомизация
• Бесплатен
• Прост в использовании
Минусы:
Подходит для относительно простых видов