Как правильно сверстать макет?

Question

[Serrrgio]

Постигаю азы верстки. Выбрал не сложный макет для тренировки.
Ширина макета - 1366px. Ширина основного содержимого - 980px.
Смущает только слайдер - на всю ширину макета.

Как правильно сверстать для больших экранов (1920px): растянуть макет и слайдер на весь экран, а основное содержимое до ширины контейнера в бутстрапе 1170px или оставить ширину, какая есть в макете и для широких экранов?

Answer 1

[Дмитрий Антонов]

Вообщем смотри) Представь ты работаешь на Компанию "А" и в неё приходит заказчик и решил сделать сайт. Они с менеджером идут к дизайнеру и там решаются самые страшные для тебя вещи. Вообщем они сделали макет и прислали тебе... И говорят хотим все так как в макете... И тут вопрос к тебе, ты сделаешь как в макете или все же свою ширину контейнера будешь выдумывать ? ( Лично я раз 3-5 пытался сделать так как лучше для сайта и брал ширину за основу сам...... Но тут б*я приходят жалобы, грозные письма что все не так....ширина больше или меньше нужной, выглядит все иначе...... Вообщем геморроя выше крыше.)
Так значит с шириной мы разобрались...... идем дальше....

Так у нас есть слайдер на 100% ширины.......в чем проблема берем bx-slider и ставим свой слайдер на 100%

А так для тебя самое главное решить как ты будешь верстать блоки) к примеру

1)Самый страшный возможно для тебя будет блок это с серым фоном.....с треугольником верх. Вопрос по средствам css или картинкой ? (верно с помощью css бордеров и псевдо классов)
2)Каким образом будешь позиционировать блоки ? float или position . (Тут надо задуматься о будущем, если будешь переделывать в responsive то float, если же нет то можно и позиционировать, не особо страшно.)
3)Подучить html5 и уже использовать html5 Тэги (Вообщем в чем надо разобраться в основном это где тэг article а где тэг aside.... остальные попроще).
4) Минимизация и структура (
а) Котировка UTF-8 без BOM
б) Для связи с JS не использовать стилизующие классы. а использовать id, data- атрибуты или классы с приставкой js-
в)Указать meta name="viewport".............
г)Skype плагин не должен ломать верстку
д)Единый css файл подключаемый в head и желательно минимизированный
e) Единый js файл подключаемый перед /body тоже желательно минимизированный.)
5) Изучай методологии Желательно БЭМ
6) Изучаем автоматизацию Grunt либо Gulp (Gulp лучше)
7) Верстаем с помощью Emmet (Экономим время)
Это довольно все быстро освоить......Увы мне так не кто не подсказал и не написал раньше )

Comments

[Serrrgio]

Спасибо за развернутый ответ. Я думал, что с дизайнером/заказчиком, как раз, можно обсудить вопрос ширины;)

[Дмитрий Антонов]

Нет можно с ними обсудить........Но честно мнения верстальщика редко спрашивают.....и приходится делать то что дают. Ты даже можешь не знать что скоро тебе дадут макет на верстку )

Answer 2

[Андрей Хохлов]

На мой взгляд тут больше вопрос дизайна, чем верстки.
Макет выглядит как на 100% ширины, но со слайдером действительно возникает вопрос.
Если изображение для него на самом деле 1920px по ширине - то есть оно по центру и все что не поместилось в экран обрезается...
... или допускается пропорциональное увеличение изображения -
тогда да, тянуть блок на 100% ширины экрана.

Если нет - можно ограничить по ширине как есть в макете (1366), но тогда нужно тоже подумать о его уменьшении для экранов меньшего размера.

Решение должен принимать тот, кто отвечает за визуальную составляющую проекта, желательно согласовав с заказчиком. Если делаете для тренировки вы тут за всех сразу.