Html5 css3 занятие 4

1. HTML5 + CSS3
Занятие 4
в 20:00 (МСК)
Направление WEB-разработка

2. Всем ли хорошо слышно и виден этот текст?

3. План занятия
HTML5
• Текст
• Ссылки
• Якоря
• Изображения, форматы
• Списки
• Таблицы
• Фреймы
• Формы
CSS3
• Сброс стилей
• Свойства VS общие
свойства
• Позиционирование
• Пространство имен
• Адаптивная верстка
• Плохие стили
• Валидация
Bootstrap 3
• Назначение файлов
• Примеры проектов
• Интеграция (локальная vs
CDN)
• Поддерживаемые
платформы
• Структура сетки
• Обзор справочника

4. Текст:
Все пробелы считаются за один, исключение внутри <pre></pre>
Перенос по пробелам и дефисам, а не по слогам
Можно использовать коды символов (&nbsp; это пробел)
Ссылки:
абсолютные
Относительные
Параметр 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

9. Позиционирование:
Нормальное
Абсолютное #content { position: absolute; }
Пространство имен:
<div class=“main”>
<div class=“main-menu”>
<div class=“main-menu-title”>
<p>test</p>
</div>
</div>
</div>

10. Адаптивная верстка:
сайт хорошо выглядит на любых типах устройств
размеры задаются в %
большинство готовых тем адаптивные
http://themeforest.net/
Как делать не нужно:
Проверка сайта:
https://developers.google.com/speed/pagespeed/insights/

11. Bootstrap 3
• Позволяет экономить десятки часов на верстке!
• Поддерживает адаптивную верстку
• Поддерживает разные типы устройств
• Есть кастомизация
• Бесплатен
• Прост в использовании
Минусы:
Подходит для относительно простых видов

12. Назначение файлов
Стили
Шрифты
Скрипты

13. Сеточная основа

14. Обзор возможностей
http://bootstrap-3.ru/css.php
Принцип реализации адаптивности.

15. Делаем сайт

16. ДЗ