Как сверстать сайт по изготовленному макету в формате jpg?

Question

[Алексей]

Есть макет сайта в готовом в виде. Каждая страница это отдельная картинка в формате jpg .
Какими способами можно закодировать функционал для макета сайта ?
Например на картинке нарисована кнопка как ей функционал передать ?

Comments

[Антон]

Сверстать, или о чем вопрос тогда?

[Алексей]

Антон, добавил макет в вопрос.

[Антон]

Алексей, Ответа сие не меняет. Что такое верстка вы знаете, понимаете, что данный макет нужно именно сверстать?

[Jun06Man]

Можно взглянуть на все страницы? Какую cms вы используете?

[Алексей]

Антон, в своей практике я не имел опыта работы с готовым шаблоном сверстанным в Photoshop. Я верстал сайты с нуля либо использовал шаблон и менял его под свои требования. В данном вопросе я хочу понять с помощью каких инструментов я могу сделать так чтобы данная картинка была рабочей страницей сайта. например как прописать иконкам ссылку когда перед мной 1 картинка макета страницы (у меня отсутствует понимание)

[Алексей]

Jun06Man, все остальные страницы похожи и ни чего нового там нет. Я ни какую CMS не использую.

[Jun06Man]

Алексей, У Вас статический сайт, имеющий страницы: Главная, Грамматика, Memory map, Газета, Учебник, Контакты. Я правильно понял? Если страница "Газета" содержит последние новости, которые нужно будет регулярно добавлять, следует выбрать CMS.

[Алексей]

Jun06Man, да. Мне просто принцип понять как осуществляется верстка сайта по макету нарисованному и всё.

[Антон]

Алексей, Поэтому, вам надо взять учебник по HTML и CSS, вникнуть в него и вопросы отпадут сами собой.

[Алексей]

Антон, я знаю HTML и CSS. Вам сложно было ответить что данная страница верстается из PSD макета или в чем сложность ? Если вы пришли умничать и тыкать носом человека то где же ваша культура ?

[Jun06Man]

Алексей, У Вас есть PSD или AI макет?

[Антон]

Алексей, То, что Вы предоставили, и как говорите сами - обычная jpg картинка, и по этой картинке Вам и надо с помощью html и css сверстать ее. Все что нужно из нее вытащить - отдельно картинки.
Картинку с городом из jpg Вам выдрать нормально не получится, поэтому, либо ищите другую, либо за шкирку берете того, кто "нарисовал" этот макет и пусть он предоставит ее отдельно.

Если Вы знаете хтмл и цсс, и видите данную картинку-макет, в чем сложность повторить эти 4 разноцветных блока и их содержимое внутри? - Мне этот момент непонятен

[Алексей]

Jun06Man, мне не предоставили данных файлов. Вот почему у меня и вопросы. Как правильно это делается.

[Алексей]

Антон, Спасибо вам. Ответили конструктивно. В свою очередь виноват тот человек который скинул мне картинки (страницы сайта) и говорит сделай сайт мне.

[Jun06Man]

Алексей, Логотип, фоновое изображение (Город), должны быть представлены в виде отдельных файлов, желательно в формате SVG.

[Антон]

Алексей, А, ну если в этом вопрос, тогда понятно.
Макеты предоставляются в PSD обычно, где всё послойно и выдираемо по-отдельности, без лишних артефактов, в противном случае, пусть идут как приложения к основному макету-картинке в архиве.

[zorca]

Правильный ответ: никак.

[alex-1917]

а где картинки-то, приложи еще раз

Answer 1

[Antonio Solo]

1) изучить основы html верстки
2) нанять профессионала

для того что бы сверстать сайт потребуются исходники картинок (в частности подложки)

Comments

[Дмитрий]

0) Заплатить дизайнеру и получить psd макет

[Антон]

Дмитрий, -1) Заплатить дизайнеру за "дизайн"

Answer 2

[Ivan Burban]

По большому счету JPG для вас макетом являться не будет, скорее макапом. Вы можете перенести из него структуру страницы, использовать цвета (код цвета можно вытащить сторонними сервисам). "Закодировать функционал для макета сайта" - очень странная формулировка, лучше наймите человека с опытом, сэкономите время и деньги.

Answer 3

[Орхан Гасанлы]

Вам однозначно стоит изучить основы html, css, js.
Для удобства верстки вы можете подключить бутстрап (возьмите 3 версию, а то во флексах еще запутаетесь).
Что касается кнопки, о которой вы упомянули, то тут все довольно просто... Кнопку можно создать разными способами. Например, можно использовать тег a или button.
Изучите материалы по ссылке ниже и другие материалы с этого сайта. Это даст вам общее понимание.
https://www.w3schools.com/tags/tag_button.asp
https://www.w3schools.com/css/css3_buttons.asp
htmlbook.ru