Презентация - Технология сетевого дизайна и ее программное обеспечение

Слайд 1

Технология сетевого дизайна и ее программное обеспечение
Лекция 6

Слайд 2

Что задает параметр padding в CSS свойстве блока? Назовите несколько принципиальных отличий селекторов CSS: ID и CLASS. Если у блока DIV не указана ширина то чему будет она равна? Создать (описать) CSS класс (имя произвольное) в котором: цвету фона текста присваивается красный цвет; внутренний отступ задается в 15 пикселей. Создать (описать) CSS стиль для блока в котором задается: ширина 500 пикселей, высота 300 пикселей, внутренний отступ слева задается в 15 пикселей, внешние отступы задаются в 22 пикселя.

Слайд 3

Слайд 4

Слайд 5

Слайд 6

Элемент Стиль между «head» и «body»

Слайд 7

Термины и определения
URL: http://validator.w3.org/
Валидация – это проверка страниц или всего сайта в целом на правильность и соблюдение всех норм веб стандартов. Все такие стандарты прописаны на  W3C, который соответственно и проводит валидацию сайта. Через данный сервис можно осуществить проверку на HTML ошибки и CSS ошибки. Если на ресурсе найдены ошибки, то есть большая вероятность, что он будет отображаться по разному в различных браузерах. Совершая вёрстку шаблона, нужно обязательно проверять код на валидность, так как корректный код позволяет оптимально работать поисковым системам и браузерам.

Слайд 8

HTML-валидатор производит несколько проверок Вашего кода. Основные из них: Валидация синтаксиса — проверка на наличие синтаксических ошибок. Проверка вложенности тэгов — тэги должны быть закрыты в обратном порядке относительно их открытия. Валидация DTD — проверка соответствия Вашего кода указанному Document Type Definition. Она включает проверку названий тэгов, атрибутов, и «встраивания» тэгов (тэги одного типа внутри тэгов другого типа) Проверка на посторонние элементы — проверка выявляет все, что есть в коде, но отсутствует в DTD. Например, пользовательские тэги и атрибуты.

Слайд 9

URL: http://validator.w3.org/

Слайд 10

Плагины Firefox для веб-разработчика
FireBug Web Developer Pixel Perfect HTML Validator
URL: http://www.fortress-design.com/web-development-firefox-plugin/

Слайд 11

Плагин FireBug
Это основной плагин веб-разработчика. Вы можете редактировать, выполнять отладку, просматривать CSS, HTML и JavaScript. Результат внесенных изменений отображается мгновенно. Плагин FireBug очень удобен для поиска фрагмента кода, отвечающего за вывод того или иного блока на странице, и, соответствующего ему CSS-стиля. Плагин имеет замечательную функцию Inspect, с помощью которой можно посмотреть какие тэги и свойства определяют положение отдельного элемента на странице. Кроме того, во вкладке Layout можно посмотреть какие поля и отступы заданы для этого элемента.

Слайд 12

Плагин Web Developer
Возможности плагина: Работать с cookies (просмотр, изменение и удаление) Работать со стилями CSS (просмотр, изменение, а также отладка таблиц стилей для принтеров, КПК и пр.) Различные хаки с формами (просмотр элементов, изменение метода передачи данных, изменение максимальной длины и пр.)
Работать с изображениями (отключать отображение, показывать размер и свойства.) Проводить анализ юзабилити Эмулировать и самостоятельно задавать различные разрешения браузеров.

Слайд 13

Плагин Pixel Perfect
Этот плагин является дополнением к FireBug. C помощью него можно легко разместить в вашем макете изображения и посмотреть на эскиз как бы в уже готовом виде. Для этого надо выбрать картинки и разместить их прямо на странице. Картинки полупрозрачные, легко перетаскиваются мышкой.

Слайд 14

Плагин HTML Validator
Плагин подробно показывает ошибки и точное место, а также объяснит, как эту ошибку исправить. Работает в фоновом режиме и встроен в страницу просмотра исходного кода. Очень экономит время.

Слайд 15

Плагины Firefox для веб-разработчика
Aardvark - с помощью плагина можно просматривать CSS-атрибуты, классы и идентификаторы, подсчечивая отдельные элементы страницы. CSSMate - редактирование файлов CSS CSS validator - проверяет корректность CSS-кода Load Time Analyzer - отображает подробные графики загрузки страницы и ее элементов. Platypus - позволяет модифицировать веб-страницы. Greasemonkey - практически полный контроль над внешним видом и поведением веб-страниц (и чужих тоже!) .

Слайд 16

Дополнения к Firefox

Слайд 17

Поддержку новых функций браузерами можно проверить на сайте caniuse.com

Слайд 18

1 * { 2 margin: 0px; 3 padding: 0px; 4 }
Универсальный селектор CSS
Некоторые элементы по умолчанию имеют какие-то отличные от нуля значения свойств margin и padding. Для того, чтобы располагать элементы при верстке, не обращая внимания на какие-то значения по умолчанию, нужно сделать поля и отступы во всех элементах на странице равными нулю.

Слайд 19

Межстрочный интервал с помощью CSS в тексте параграфов задается через свойство line-height. Его значение чаще всего указывается в процентах:
p { line-height:150%; }
Межстрочный интервал с помощью CSS

Слайд 20

Обработчики событий могут размещаться в любом месте веб-страницы. Например в коде кнопки:
Обработчики событий

Слайд 21

onMouseOver вызывается, когда пользователь наводит мышь на какой-либо элемент. Пример. onMouseOut вызывается когда пользователь убирает курсор мыши с ссылки:
Обработчики событий onMouseOver и onLoad
Мой сайт!

Обработчик onLoad вызывается в тот момент, когда веб-страница полностью загружена:

Слайд 22

Lab2
Структура папок и именование файлов при выполнении заданий
Page
Index.html
page1.html
page2.html
…
CSS
style.html
style_p.html
…
JS
script1.html
script2.html
…

Слайд 23

Внутренний отступ (отступ между контентом блока и его границей ). Разная значимость атрибутов (у id больший вес),Возможность проставления якорных ссылок (id позволяет поставить якорную ссылку) ,Запись множественных атрибутов (одному объекту можно задать сразу несколько классов и только один id). Если не указывать значение явно то оно будет равно auto. Для ширины блока - это максимально доступная ширина контента. .myClass { background: red; padding: 15px; } #myBlock { height: 300px; width: 500px; margin: 22px ; padding-left: 15px; }
Ответы экспресс-опроса