Как создать HTML-образный прототип с изображения?

Question

У меня есть полное изображение (визуальный дизайн) веб-страницы (включая меню и т. Д.).

Обычно я бы использовал InvisionFree, но школа требует, чтобы я сделал прототип в HTML. У меня очень мало опыта работы с HTML.

Должен ли я начинать с нуля и строить его в формате HTML? Или, может быть, способ, которым я могу использовать невидимые боксы, которые накладывают мои кнопки (на изображении), чтобы он стал кликабельным?

Я попытался найти себя, но я не мог найти anwser, я думаю, что моя нехватка знаний напрягает меня. Я действительно ценю вашу помощь! Спасибо огромное!

Answer 1

Вы можете создать карту изображения с тегами <area> и нанести их на <img> с usemap.

<map name="mymap"> 
    <area shape="rect" coords="20,20,50,90" href="foo.html"> 
    <area shape="rect" coords="60,20,110,90" href="bar.html"> 
</map> 
<img usemap="#mymap" src="image.png"> 

Однако это полезно только для преобразования изображения в малоиспользуемый интерактивный прототип.

• Ссылки могут перемещаться по другим страницам, но вам нужно будет создать эти другие страницы в HTML или на другом изображении. (Вы можете выполнить JavaScript с помощью ссылки href="javascript:...", но неясно, что именно этот JavaScript будет сделать, так как ваша страница - просто гигантское изображение, а не документ, которым вы могли бы манипулировать.)
• Текст на страницах не будет можно выбирать, читать только текстовыми браузерами или программами чтения с экрана (например, для пользователей с ослабленным зрением) или скрещиваться с помощью поисковых систем.
• Содержимое страницы не сможет обернуть или изменить размер вообще, если пользователь изменит размер окна или попытается изменить размер текста. Изображение можно масштабировать только целиком.
• Вы не сможете динамически изменять внешний вид страницы, так как они не являются структурой документа. Это просто изображение с несколькими элементами, которые можно щелкнуть, что позволяет перейти на другие страницы.

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

Answer 2

Вы можете нарезать фактические изображения из визуального дизайна с любым графическим программным обеспечением, как Gimp (http://www.gimp.org/)

Если вы не знакомы с HTML/CSS вы можете начать с бесплатным визуальным редактором/WYSIWYG HTML, как:

KompoZer: http://kompozer.net/ или бесплатную пробную версию DreamWeaver: https://creative.adobe.com/products/download/dreamweaver

В этих редакторах вы можете составить HTML-страницы довольно похожим образом, как редактировать документы в Microsoft Word. Вы можете вставлять текст, изображения, устанавливать цвета, выравнивания. и он будет генерировать HTML-разметку для вас. Вы можете редактировать как разметку, так и через интерфейс, и вы сразу увидите результаты.