Спецкурс "Современные практики разработки ПО", 2013-2014 уч. год, занятие 7
•Download as PPTX, PDF•
0 likes•376 views
Recommended
Recommended
More Related Content
Viewers also liked
Viewers also liked (14)
Similar to Спецкурс "Современные практики разработки ПО", 2013-2014 уч. год, занятие 7
Similar to Спецкурс "Современные практики разработки ПО", 2013-2014 уч. год, занятие 7 (20)
More from 7bits
More from 7bits (20)
Спецкурс "Современные практики разработки ПО", 2013-2014 уч. год, занятие 7
- 1. Web-приложения, часть 2: браузеры, стандарты, верстка Спецкурс. Занятие 7
- 2. Языки разметки • HTML 4.0 (1999) • XHTML 1.x (2001-2008) • XHTML 2 • HTML 5.x, XHTML 5
- 3. HTML5 Релиз рекомендации по HTML5 от W3C запланирован: • HTML 5 – 2014 г. • HTML 5.1 – 2016 г.
- 4. Особенности XHTML • XHTML – страница является правильным XML-документом • В XHTML имена тэгов и атрибутов только в нижнем регистре • В XHTML все тэги должны быть закрыты • Браузеры не обрабатывают документ, если в нём ошибка • Нет обратной совместимости с HTML
- 5. HTML, doctype HTML4: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> XHTML 1.1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml 11.dtd">
- 7. Пример страницы <!DOCTYPE html> <html> <head> <meta charset=“UTF-8”> <title>HTML 5 demo</title> </head> <body> Пример страницы </body> </html>
- 8. Тэги HTML До HTML 5: http://www.w3.org/TR/html4/index/ elements.html a abbr form H1, H2, H3, H4, H5, H6 p iframe img strong, small, i ul, li table, thead, tbody title div
- 9. Семантика До HTML 5: <div id="header"></div> <div id="nav"></div> <div id="container"> <div id="section"> <div class="article"></div> <div class="article"></div> </div> <div id="sidebar"></div> </div> <div id="footer"></div>
- 12. Новые API HTML 5 • Canvas • Offline Web Apps • Drag-and-drop • History API • Web Storage
- 13. Новые API, дополняющие HTML 5 • Geolocation • Web SQL Database • HTML File API
- 14. HTML5
- 15. CSS CSS - каскадные таблицы стилей. Используется для задания: • цветов, шрифтов элементов • теней, фона • расположение блоков, отступов, границ • анимации
- 16. DOM, обработка элементов DOM – представление структуры HTML документа в иерархическом виде.
- 17. DOM, обработка элементов Примеры CSS селекторов: • p { color: red; } • #container { width: 1200px; } • a.hidden { display: none; } • header p { color: red; } • .main .news { color: red; }
- 18. DOM, обработка элементов img { border: 1px solid black; } div.main p { width: 1000px; } header .login .title { height: 20px; }
- 19. Расположение блоков на странице Строчные элементы – это элементы документа, которые являются частью строки. Примеры: <img>, <span>, <a>, <q>, <code>
- 20. Расположение блоков на странице Свойства строчных элементов: • Внутри строчных элементов можно поместить только строчные элементы • width, height не работают • несколько строчных элементов идущих подряд помещаются на одной строке • можно выравнивать по вертикали, используя свойство vertical-align
- 21. Расположение блоков на странице Пример: <p> Выполните <span>восемь</span> повторений </p> Пример на htmlbook.ru
- 22. Расположение блоков на странице Блочные элементы – элементы, которые отображаются на странице в виде прямоугольника. Примеры: <div>, <form>, <p>, <table>, <h1>...<h6>, <ul>
- 23. Расположение блоков на странице Свойства блочных элементов: • Элемент занимает всю доступную ширину • Элемент начинается на новой строке • Блоки располагаются по вертикали друг за другом • Можно выставить width, height
- 24. Расположение блоков на странице Пример: <div> <p>Первый абзац</p> Анонимный блок <p>Второй абзац</p> </div> Пример на htmlbook.ru
- 25. Расположение блоков на странице Модификаторы отображения: • display: block; • display: inline • display: inline-block
- 26. Свойство float Пример на htmlbook.ru Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. float: left | right | none | inherit
- 27. Свойство float Пример на htmlbook.ru Задан float:left для желтого элемента:
- 28. Свойство clear Пример на htmlbook.ru clear: left | right | none | both | inherit Устанавливает, с какой стороны элемента запрещено его обтекание другими элементами.
- 29. Свойство clear Пример на htmlbook.ru Задан clear:left для второго блока:
- 30. Свойство position Пример на htmlbook.ru position: absolute| fixed | relative | static Устанавливает способ позиционирования элемента на странице относительно окна браузера или других элементов.
- 31. Свойства margin и padding
- 32. Меню с помощью <ul>, <li> <ul> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">Services</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul>
- 33. Меню с помощью <ul>, <li> ul { list-style-type: none; background-image: url(navi_bg.png); height: 80px; width: 663px; margin: auto; } li { float: left; } Ссылка на пример
- 34. Кроссбраузерная и адаптивная вёрстка Проблемы: • Много браузеров, движков • Необходимость поддерживать старые браузеры • Различные разрешения экранов устройств • Необходимость оптимизации скорости загрузки
- 35. Полезности для браузера • Developer Tools • Color picker плагины • Генераторы псевдотекста Lorem Ipsum • PixelPerfect • Ruler-плагины • Stylebot • LiveCSSEditor
- 36. Что почитать? • The W3C Markup Validation Service • Can I use? http://caniuse.com • Htmlbook.ru htpp://htmlbook.ru • http://css-tricks.com/video-screencasts/ • http://jsfiddle.net/