Html5 css3 занятие 4
Download as PPTX, PDF0 likes244 views
Документ описывает содержание занятия по HTML5 и CSS3 в рамках веб-разработки, сосредоточив внимание на таких аспектах, как текст, ссылки, изображения и формы. Также рассматриваются принципы адаптивной верстки и использование Bootstrap 3. В конце упоминается важность валидации стилей и проверки производительности сайта.
Html5 css3 занятие 4
- 1. HTML5 + CSS3 Занятие 4 в 20:00 (МСК) Направление WEB-разработка
- 2. Всем ли хорошо слышно и виден этот текст?
- 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
- 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 • Позволяет экономить десятки часов на верстке! • Поддерживает адаптивную верстку • Поддерживает разные типы устройств • Есть кастомизация • Бесплатен • Прост в использовании Минусы: Подходит для относительно простых видов
- 13. Сеточная основа
- 14. Обзор возможностей http://bootstrap-3.ru/css.php Принцип реализации адаптивности.
- 15. Делаем сайт
- 16. ДЗ