Верстка сайта. Инструменты верстальщика презентация

Инструменты верстальщика
Обработка изображений: Adobe Photoshop, Gimp, Krita.
Работа с кодом: Notepad++, Adobe DreamViewer, SublimeText, CoffeeCup HTML Editor, UltraEdit,Firebug, Winless, CSS3 Generator
Работа с JS: Front Page, NetBeans.
Проверка на кроссбраузерность и валидность: Crossbrowsertesting, IE Tester, Dr Watson, Validator.w3, Css validator, Markup validtor.

Робочі вікна засобів верстальника
Файлова структура
Граф -редактор
Браузер
Текст - редактор

Какая верстка считается качественной
Блочная – с применением
.
Адаптивная. кроссбраузерная – страница ведет себя корректно в разных браузерах и на мобильных гаджетах.
Валидная – без ошибок в коде.
Текстовая. То, что можно сверстать в виде текста, не верстается картинкой. Поисковая система любит текстовый контент(пункт SEO-оптимізації)
Код минимально короткий, все стили вынесены в отдельный файл.
Все содержимое в html и css прописано строчными буквами.
Для тега
(картинки) обязательно указаны высота и ширина изображения.
CSS используется преимущественно. То есть, если можно обойтись без JS - то динамика описывается в CSS.
То же самое для картинок. Если спецэффекты для шрифта можно наложить при помощи CSS, то используется текст, а не картинка.
JS файлы подключены в низу кода. Если вы подключаете их в , то это плохо сказывается на скорости загрузки веб-страницы.
JS файлы объединены в один (по возможности).
Навигация по сайту реализована списками (
,
), поисковая система быстрее понимает такую навигацию.
Правильная работа с заголовками. Чтобы у SEO-специалиста в будущем не было проблем, указывайте H1-H6 только в контентной части сайта. Размещайте заголовки по принципу: первым идет H1, потом по убыванию другие виды заголовков.
Продуманы стили всех заголовков, абзацев, картинок, списков в контентной части документа.
Структурированный код, который наглядно показывает все закрывающие и открывающие теги.

Адаптация по размерам єкрана
действий пользователя
внешних воздействий

Стилі надання змісту на різних пристроях
Max-width:
Max-width: 760px; /960/
Max-width: 480px;

Матеріал ілюстративний
Фотозображення
Інфографіка
Анимация

Інфографіка

Іконки Лого