Выполнение верстки в соответствии с техническим заданием презентация

Содержание

Содержание Цель, задачи Технические требования к верстке Выполнение верстки макета и формирование таблицы стилей Результат

Слайд 1Верстка web-страниц
1
КСР №2
Тема: Выполнение верстки в соответствии с техническим заданием


Мигачева Марина

Евгеньевна
Минск, 2014

Слайд 2Содержание
Цель, задачи
Технические требования к верстке
Выполнение верстки макета и формирование таблицы стилей


Результат


Слайд 3Цель, задачи
Цель:
Выполнить верстку по графическому макету в соответствии с ТЗ, сформированным

в КСР №1
Задачи:
сформировать html-код;
сформировать файл css;
выполнить верстку и стилевые решения через рациональные алгоритмы;
соблюдать «чистоту» и оптимальность кода

Слайд 4Технические требования
Верстка должна выполняться в соответствии со стандартом HTML5

Стили оформляются как внешние (выносятся в один или несколько отдельных файлов)
Не допускается использование тегов и других элементов, которые признаны устаревшими
Код и стили должны быть визуально структурированы и содержать необходимые комментарии

Слайд 5Технические требования
Верстка должна быть блочной
Использование таблиц допускается, но только там,

где это оправдано
Должна быть указана кодировка страницы (utf-8)
Все элементы файловой системы, относящиеся к верстаемой странице, должны быть структурированы

Слайд 6Технические требования
Верстка должна соответствовать техническим параметрам, описанным в КСР№1, и

визуальному макету
Код должен быть «чистым» и оптимизированным
При описании стилей использование селекторов должно быть рациональным
Необходимо использование ассоциативных имен для объектов

Слайд 7Технические требования
Перечисляем, какие теги html5 использовались
Перечисляем, какие свойства CSS3

были задействованы
При наличии проблем «понимания» новых тегов\свойств описываем, каким образом обходили данную проблему

Слайд 8Технические требования
Для адаптивного дизайна указываем контрольные точки
Описываем, какие медиазапросы были

использованы
К каким объектам применены стилевые изменения
Каким образом решалась проблема оптимизации отображения графических файлов

Слайд 9Технические требования
ПРИМЕР
Верстка выполнена по стандарту HTML 5
Стили вынесены в один внешний

файл
Устаревшие теги\атрибуты
не использовались
Код и стили
структурированы,
имеются необходимые комментарии

Слайд 10Технические требования
ПРИМЕР
Верстка блочная
Таблицы не используются
Кодировка utf-8
Файловая система структурирована:
site
image
index.html
style.css


Слайд 11Технические требования
ПРИМЕР
Верстка выполнена в соответствии с ТЗ, без изменений исходного графического

макета
Код чистый, оптимизированный
Используемые селекторы: классы, групповые, селекторы потомков, псевдоклассы (для ссылок), селекторы тегов
Использованы ассоциативные имена: line, wrapper, header, navigation, sidebar, content, footer, sideBlock

Слайд 12Технические требования
ПРИМЕР
Теги HTML5: сокращенные формы записи служебной части: объявление doctype, подключение

стилей, объявление кодировки
Свойства CSS3: text-shadow, box-shadow
Проблема при отображении может быть только связана с наличием теней для блоков и текста, но в общей концепции – это не существенно, поэтому для браузеров, не поддерживающих отображение тени, ничего не исправляем – будет отображаться просто текст\просто блок; Браузер IE7 и ниже вообще не предусмотрен в ТЗ

Слайд 13Технические требования
ПРИМЕР
Для адаптивного варианта предусмотрена одна контрольная точка: 768px
Медиазапрос: @media screen

and (max-width: 768px)
Графические файлы не адаптировались

Слайд 14Технические требования
ПРИМЕР
В адаптивной версии ко следующим объектам применились стилевые изменения:
- отцентровка

надписи в заголовке;
- горизонтальное меню автоматически распределяется на несколько строк, увеличивается шрифт, появляется фоновый цвет для пунктов меню, фоновый градиент для навигационной панели убирается;
- блок с изображениями смещается вниз, формируя не две колонки, а одну и центрируется на странице.

Слайд 15Результат
РЕЗУЛЬТАТ:
В итоге получаем:
html-файл;
css-файл;
пакет необходимых объектов (например, графические изображения, документы,

архивы и т.п.);
презентацию-отчет по выполнению второго этапа.


Слайд 16Результат
НА ПРОВЕРКУ высылаем архив, включающий в себя:
html-файл
css-файл
другие объекты, использованные

при верстке
презентацию-отчет по выполнению второго этапа

Данный пакет является 2-й частью зачетного (экзаменационного) проекта в рамках учебного курса

Слайд 17Спасибо за внимание


m.migacheva@gmail.com


Обратная связь

Если не удалось найти и скачать презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

Email: Нажмите что бы посмотреть 

Что такое ThePresentation.ru?

Это сайт презентаций, докладов, проектов, шаблонов в формате PowerPoint. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами с другими пользователями.


Для правообладателей

Яндекс.Метрика