html5 css3 занятие 2
TRANSCRIPT
![Page 1: Html5 css3 занятие 2](https://reader035.vdocuments.mx/reader035/viewer/2022062313/55d08bafbb61ebc63d8b45d9/html5/thumbnails/1.jpg)
HTML5 + CSS3Занятие 2
в 20:00 (МСК)
Направление WEB-разработка
![Page 2: Html5 css3 занятие 2](https://reader035.vdocuments.mx/reader035/viewer/2022062313/55d08bafbb61ebc63d8b45d9/html5/thumbnails/2.jpg)
Всем ли хорошо слышно и виден этот текст?
![Page 3: Html5 css3 занятие 2](https://reader035.vdocuments.mx/reader035/viewer/2022062313/55d08bafbb61ebc63d8b45d9/html5/thumbnails/3.jpg)
План занятияHTML5• Текст• Ссылки• Якоря• Изображения, форматы• Списки• Таблицы• Фреймы• Формы
CSS3• Сброс стилей• Свойства VS общие
свойства• Позиционирование• Пространство имен• Адаптивная верстка• Плохие стили• Валидация
Bootstrap 3• Назначение файлов• Примеры проектов• Интеграция (локальная vs
CDN)• Поддерживаемые
платформы• Структура сетки• Обзор справочника
![Page 4: Html5 css3 занятие 2](https://reader035.vdocuments.mx/reader035/viewer/2022062313/55d08bafbb61ebc63d8b45d9/html5/thumbnails/4.jpg)
Текст:Все пробелы считаются за один, исключение внутри <pre></pre>
Перенос по пробелам и дефисам, а не по слогам
Можно использовать коды символов ( это пробел)
Ссылки:абсолютные
Относительные
Параметр target: _blank, _self, _parent, _top
Якоря – закладки:
![Page 5: Html5 css3 занятие 2](https://reader035.vdocuments.mx/reader035/viewer/2022062313/55d08bafbb61ebc63d8b45d9/html5/thumbnails/5.jpg)
Изображения: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 уровней прозрачности (альфа канал).
для детализированных изображений
Маркированный и нумерованный списки:
![Page 6: Html5 css3 занятие 2](https://reader035.vdocuments.mx/reader035/viewer/2022062313/55d08bafbb61ebc63d8b45d9/html5/thumbnails/6.jpg)
Таблицы:
Фреймы, современное применение:Использование для всплывающих окон
Вставка сторонних медиа-плееров
<iframe width="560" height="315" src="//www.youtube.com/embed/ddpQEwS9QxY" frameborder="0" allowfullscreen> </iframe>
![Page 7: Html5 css3 занятие 2](https://reader035.vdocuments.mx/reader035/viewer/2022062313/55d08bafbb61ebc63d8b45d9/html5/thumbnails/7.jpg)
Формы
Запросы GET и POST
GET – предназначен для передачи информации в адресной строке, в форматеtest.ru/?ключ=значение& ключ2=значение2ограничение в 4кб
POST – предназначен для передачи больших объемов информации на сервер, не кэшируется.
![Page 8: Html5 css3 занятие 2](https://reader035.vdocuments.mx/reader035/viewer/2022062313/55d08bafbb61ebc63d8b45d9/html5/thumbnails/8.jpg)
CSS
Для чего нужен сброс стилейhttp://necolas.github.io/normalize.css/3.0.2/normalize.css
Свойства VS общие свойстваНапример:
font (font: 12pt sans-serif; )
Font-weight
Font-size
![Page 9: Html5 css3 занятие 2](https://reader035.vdocuments.mx/reader035/viewer/2022062313/55d08bafbb61ebc63d8b45d9/html5/thumbnails/9.jpg)
Позиционирование:Нормальное
Абсолютное #content { position: absolute; }
Пространство имен:<div class=“main”>
<div class=“main-menu”><div class=“main-menu-title”>
<p>test</p></div>
</div>
</div>
![Page 10: Html5 css3 занятие 2](https://reader035.vdocuments.mx/reader035/viewer/2022062313/55d08bafbb61ebc63d8b45d9/html5/thumbnails/10.jpg)
Адаптивная верстка:сайт хорошо выглядит на любых типах устройств
размеры задаются в %
большинство готовых тем адаптивные
http://themeforest.net/
Как делать не нужно:
Проверка сайта: https://developers.google.com/speed/pagespeed/insights/
![Page 11: Html5 css3 занятие 2](https://reader035.vdocuments.mx/reader035/viewer/2022062313/55d08bafbb61ebc63d8b45d9/html5/thumbnails/11.jpg)
Bootstrap 3
• Позволяет экономить десятки часов на верстке!• Поддерживает адаптивную верстку• Поддерживает разные типы устройств• Есть кастомизация• Бесплатен• Прост в использовании
Минусы:Подходит для относительно простых видов
![Page 12: Html5 css3 занятие 2](https://reader035.vdocuments.mx/reader035/viewer/2022062313/55d08bafbb61ebc63d8b45d9/html5/thumbnails/12.jpg)
Назначение файлов
СтилиШрифтыСкрипты
![Page 13: Html5 css3 занятие 2](https://reader035.vdocuments.mx/reader035/viewer/2022062313/55d08bafbb61ebc63d8b45d9/html5/thumbnails/13.jpg)
Сеточная основа
![Page 14: Html5 css3 занятие 2](https://reader035.vdocuments.mx/reader035/viewer/2022062313/55d08bafbb61ebc63d8b45d9/html5/thumbnails/14.jpg)
Обзор возможностей
http://bootstrap-3.ru/css.php
Принцип реализации адаптивности.
![Page 15: Html5 css3 занятие 2](https://reader035.vdocuments.mx/reader035/viewer/2022062313/55d08bafbb61ebc63d8b45d9/html5/thumbnails/15.jpg)
Делаем сайт
![Page 16: Html5 css3 занятие 2](https://reader035.vdocuments.mx/reader035/viewer/2022062313/55d08bafbb61ebc63d8b45d9/html5/thumbnails/16.jpg)
ДЗ