При помощи каких технологий реализовать дизайн сайта?

Question

[All4ip]

Добрый день!

Задача: сделать дизайн сайта, ну и собственно сам сайт, так, что бы в центре была картинка и от неё шли блоки с информацией, пример скелета:
Картинка по центру это

<img class="center" src="img.jpg" border="0"  alt=""/>

.center {
  display: block;
  margin: 0 auto;
}

Блоки я тоже представляю как можно сделать ( div и border ), а вот как связать центральную картинку и блоки с текстом при помощи, допустим, тех же линий- не представляю (хотя есть догадки что это делается на css или canvas).

P.S : У меня нет опыта создания сайтов, ставил вордпресс, систематически изучал применения html, css, js, но опыта решения конкретных задач не было.

Подтолкнете в нужное русло?

Answer 1

[Сергей]

Если вариант с картинками не для вас (возможна только одна картинка в центре), то можно сделать так: jsfiddle.net/28KcW

Comments

[All4ip]

@Dzorogh Спасибо, именно то, что нужно в первом приближении.

Answer 2

[GreatRash]

А SVG не пойдёт случаем? Например вот так.

Comments

[All4ip]

Спасибо, не знал что так можно, возможно придется делать именно так ( модно получается )

Answer 3

[Steely]

1. одной картинкой

2. мелкими картинками, линии это тоже изображения, можно их разместить с прозрачным фоном

В чем проблема собственно?

Comments

[Сергей]

@Steely надо уточнить, что если делать одной картинкой, то можно использовать . Но лучше поверх картинки с пустыми блоками разместить через position:absolute теги с текстом и ссылками.

[Сергей]

* то можно использовать <map>

Answer 4

[Назар Мокринский]

Можно на canvas, делается легко, например, я использую fabric.js, но в вашем случае он, наверное, будет избыточным.

Answer 5

[Дмитрий]

Не знаю всех условий задачи, но навскидку: линии сделать прозрачным png, а остальное - верстать или картинками, в зависимости от требуемого вида.