HTML5 + CSS3Занятие 4

в 20:00 (МСК)

Направление WEB-разработка

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

План занятияHTML5• Текст• Ссылки• Якоря• Изображения, форматы• Списки• Таблицы• Фреймы• Формы

CSS3• Сброс стилей• Свойства VS общие

свойства• Позиционирование• Пространство имен• Адаптивная верстка• Плохие стили• Валидация

Bootstrap 3• Назначение файлов• Примеры проектов• Интеграция (локальная vs

CDN)• Поддерживаемые

платформы• Структура сетки• Обзор справочника

Текст:Все пробелы считаются за один, исключение внутри <pre></pre>

Перенос по пробелам и дефисам, а не по слогам

Можно использовать коды символов (&nbsp; это пробел)

Ссылки:абсолютные

Относительные

Параметр 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

Принцип реализации адаптивности.

Делаем сайт

ДЗ