Upvote 5

Exporting to HTML

Answered Victor Conesa 11 years ago

I want to export my prototype to HTML so my UI developer can look at the HTML, CSS, JAVASCRIPT code.


When I use the File > Export to HTML feature, I get too many directories and the exported code is not formatted; it is all run together.


I am evaluating this software and if we are stuck with this type of export, then this probably will not work for us.

Best Answer
photo

To export to HTML, go to File -> Export to HTML.

If you would like an export with only the essentials, go to Preferences and uncheck 'Optimized', and then export to HTML again.

The folder generated by exporting to HTML will contain an index.html file that you can use to view the simulated version of your prototype.

8c235d45ca86df314b73ff77a2dc0a74


You can click on Resources, then screens, and then you'll see the CSS and Javascript.

Replies (2)
photo
1

Select the option File -> Preferences in your Prototyper and uncheck the option 'Optimized'. Then export your prototype to HTML again.

photo
1

To export to HTML, go to File -> Export to HTML.

If you would like an export with only the essentials, go to Preferences and uncheck 'Optimized', and then export to HTML again.

The folder generated by exporting to HTML will contain an index.html file that you can use to view the simulated version of your prototype.

8c235d45ca86df314b73ff77a2dc0a74


You can click on Resources, then screens, and then you'll see the CSS and Javascript.

photo
1

Hi Danielle,

I noticed that the filenames are all very long. Are we meant to rename the filenames ourselves so that they can be immediately be used to produce a website?


Thanks,

Max

photo
1

You could rename them if you'd like, but it's not required. However, you'll probably need a developer to assist with the files in order to get them organized and ready to be produced into a real website.

photo
1

hello danielle,i successfully exported my design as html template .i now want to use it with laravel.....i placed the js,img and css folders in the public folder as is required ....but after redirecting all the links in the index.html to the respective folders ie images,js and css files....iam getting errors that relating to ? and = signs that they are not recognised as below....

syntax error, unexpected '?' (View: D:\PROTOC\PROTOTYPES\mall\resources\views\welcome.blade.php)

the code section is here:


<!-- START COMMENT TEMPLATES -->

<script type="text/x-jquery-tmpl" id="root-template">

<![CDATA[

<div class="root {{? it.isRead === false}}unread{{?}} closed firer rounded-border">

<input type="hidden" id="parentCode" value="{{=it.code}}" />

<input type="hidden" id="canvasID" value="{{=it.canvasID}}" />

<input type="hidden" id="elementID" value="{{=it.elementID}}" />

<input type="hidden" id="canvasURL" value="{{=it.canvasURL}}" />

{{=annotation.render(it, "comment-template")}}

<div class="replies"></div>

<div class="replier">

<div class="commentsTextAreaWrapper">

<textarea class="annotation firer" placeholder="Add new comment"></textarea>

<div class="attachment-file-float">

<span></span>

<div class="attachment-file-delete firer"></div>

</div>

photo
Leave a Comment
 
Attach a file