Задание при приеме на работу верстальщика

Задание при приеме на работу верстальщика

1 этап. На выполнение задания отводится 5 часов.

1.  Необходимо осуществить нарезку и верстку макета, соблюдая нормативы указанные в документах: Правила верстки. docx, Стандарты кодирования CSS. docx, Стандарты кодирования HTML. docx (имеются на рабочем столе компьютера).

2.  Результатом работы должен быть набор файлов, достаточный для отображения макета в браузерах Opera, Firefox, Chrome, IE8, IE9 в соответствии с оригиналом и функциональными особенностями, описанными ниже.

Дан макет главной страницы сайта в формате psd. Имя файла: glavnaya. psd

Рисунок 1 – Главная страница сайта

Контент-зона.

Контент-зона имеет заголовок материала, основной текст и изображение. Заголовок материала должен быть заголовком первого уровня.

Header

Кнопка «Заказать звонок» должна быть активной, но никуда не вести. Активность данной кнопки проявляется в виде видоизменения курсора при наведении с «указателя» на «ручку». Логотип на типовых страницах должен быть кликабельным и вести на главную страницу.

Footer

Логотип на типовых страницах должен быть кликабельным и вести на главную страницу. Счетчик статистики в правом углу должен быть так же активным. Активность счетчика проявляется в виде видоизменения курсора при наведении с «указателя» на «ручку».

Типовая страница

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

-  Новости

-  Аренда техники

-  О компании

-  Строительная техника

-  Экскаваторы

-  Колесные

-  Негабаритные грузы

-  Габаритные грузы

Разрешение

Ширина сайта в браузере должна составлять 1263 px.

Верстка сайта статичная.

Особенности функционирования.

Главное горизонтальное меню.

Главное горизонтальное меню состоит из пунктов расположенных в заданной последовательности:

-  Новости

-  Аренда техники

-  Услуги по строительству

-  Услуги по перевозке

-  Контакты

-  О компании

При наведении на любой из пунктов главного горизонтального меню курсором он видоизменяется, как показано на макете (рис. 1) пункт меню «Услуги по строительству».

При клике на любой из пунктов главного горизонтального меню осуществляется переход на страницу с типовым материалом. При этом активный пункт меню, (пункт на который был осуществлен клик) остается видоизмененным как показано на макете (рис. 1) пункт меню «Услуги по строительству».

Левое боковое меню.

Левое боковое меню имеет иерархическую структуру и состоит из пунктов, расположенных в заданной последовательности:

Аренда техники

Строительная техника

Краны

Башенные краны

Гусеничные краны

Колесные краны

Экскаваторы

Гусеничный экскаватор

Колесные экскаваторы

Экскаватор-погрузчик

Компрессор

Бульдозеры

Дорожно-строительная техника

Вибрационные катки

Асфальтоукладчики

Дорожные фрезы

Грейдеры

Техника для грузоперевозок

Автобетононасос

Цементовозы

Полуприцеп

Тягачи

Манипулятор

Тонары

Самосвалы

Услуги по строительству

Дорожно-строительные работы

Общестроительные работы

Земляные работы

Инженерные работы

Монтажные работы

Демонтажные работы

Услуги по перевозке

Негабаритные грузы

Габаритные грузы

2 этап. На выполнение задания отводится 2 часа.

Для выполнения данного задания вам понадобятся результаты работы 1 этапа (имеются на рабочем столе компьютера).

Необходимо сверстать меню согласно требованиям, перечисленным ниже, используя связку JavaScript +CSS.

При выполнении задания вы можете использовать Библиотеку готовых решений на http:/// ( релиз библиотеки определите сами).

Рисунок 2 – Структура меню

При наведении на любой из трех пунктов первого уровня: Аренда техники, Услуги по строительству, Услуги по перевозке, левого бокового меню курсором происходит видоизменение пункта, как показано на макете (рис. 1) пункт меню «Аренда техники».

При клике на любой из пунктов левого бокового меню первого уровня (Аренда техники, Услуги по строительству, Услуги по перевозке) осуществляется переход на страницу с типовым материалом. При этом активный пункт меню (пункт на который был осуществлен клик) остается видоизмененным как показано на макете (рис. 1) пункт меню «Аренда техники».

Подпункты первого уровня «Аренда техники»

Пункты меню второго уровня вложенности, если не содержат в себе подпунктов третьего и четвертого уровня вложенности, не имеют слева от названия никаких значков. В случае если пункт меню второго уровня вложенности содержит в себе подпункт третьего и четвертого уровня вложенности, тогда слева от названия пункта меню находится квадрат со знаком «+».

При наведении данный квадрат не видоизменяется.

При клике на пункт меню, содержащий в себе подпункты третьего и четвертого уровня вложенности, знак, находящийся слева от названия пункта меню, изменяет свой цвет на голубой и в нем пропадает знак «+» (Рис. 2).

При наведении на любой пункт меню второго, третьего и четвертого уровня вложенности, происходит изменение цвета текста пункта меню на голубой. При клике на любой пункт меню второго, третьего и четвертого уровня вложенности происходит переход на типовую страницу, при этом пункт подсвечивается голубым и остается таковым.

Пункты меню конечного уровня вложенности

Если пункт меню является конечным (не содержит в себе подпунктов) то слева от такого пункта появляется знак «└».