Html5 css3 занятие 2

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

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

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

Текст:
Все пробелы считаются за один, исключение внутри <pre></pre>
Перенос по пробелам и дефисам, а не по слогам
Можно использовать коды символов (  это пробел)
Ссылки:
абсолютные
Относительные
Параметр target: _blank, _self, _parent, _top
Якоря – закладки:

Изображения:
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 уровней прозрачности (альфа
канал).
для детализированных изображений
Маркированный и нумерованный списки:

Таблицы:
Фреймы, современное применение:
Использование для всплывающих окон
Вставка сторонних медиа-плееров
<iframe width="560" height="315" src="//www.youtube.com/embed/ddpQEwS9QxY" frameborder="0" allowfullscreen>
</iframe>

Формы
Запросы GET и POST
GET – предназначен для передачи информации в адресной строке, в формате
test.ru/?ключ=значение& ключ2=значение2
ограничение в 4кб
POST – предназначен для передачи больших объемов информации на сервер, не
кэшируется.

CSS
Для чего нужен сброс стилей
http://necolas.github.io/normalize.css/3.0.2/normalize.css
Свойства VS общие свойства
Например:
font (font: 12pt sans-serif; )
Font-weight
Font-size

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

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

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

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

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

Html5 css3 занятие 2

More Related Content

Viewers also liked (8)

Similar to Html5 css3 занятие 2 (11)

More from Алексей Дементьев (12)

Html5 css3 занятие 2