What's the best way to export indesign webpage design to xhtml?

Question

I have one indesign file which is designed for a webpage. I tried to export from the file > export > dreamweaver with Indesign CS5. I tried to configure everything and export, but the exported result is totally awful. What Indesign export is images and text, no design was included (such as background colors, positions). Is it only me or is that the export result supposed to be ? Is it because of my indesign file ? If i want to get the exact design that I designed in indesign, what's the best way to do it because I don't want to design twice. Please kindly suggest me. Thank you.

Solution 1

Indesign is primarily for print layout and design. As a web page designer it is very poor. The only thing that may improve your output is make sure, in the XHTML Export Options, Advanced tab, and make sure Include Style Definitions, and Preserver Local Overrides are checked. Other than that, take a look at http://help.adobe.com/en_US/InDesign/6.0/WS82C401A9-E844-40d5-B9B4-540CA374B0C6a.html

For more about the export function. Think of it more as a jumping off point in you had something designed already in inDesign, not a final product. In the future, I'd use Illustrator, Fireworks, or Photoshop to do your design.

Solution 2

UNIFORM DESIGN IN ALL PLATFORMS STARTING FROM INDESIGN
(Disclaimer: No endorsement implied; Just had to do this, so I thought I'd post the workflow as an answer to the question)

0) InDesign ----> 1) Epub - IPad/Iphone etc.
|
| (Export as .eps)
|
V
2) Illustrator (3 minutes, plus tooling around in AI time; plus slicing if you do it
here) | | (2a) Export to .psd; slice/prepare in either Illustrator or Photoshop.
|
| or (If you prefer tooling around in AI to PS)
|
| (2b) Alternatively,you can skip exporting to .psd and just:
| (File>Save for Web and Devices; Make sure to go to "Edit Output Settings>Slices
| and deselect the lame tables and select css instead; Also change HTML to >XML)
|
|
| (NOTES: Keep in mind during this step and the next that there may be some layers/groups
| that you might want
| to export whole cloth. Save those files, but don't delete the layers. Just slice
| them in such a way that you can see the height and width in px. You may have to move
| it over. e.g. you have an awesome gradient. You want the original dimensions but a
| small file or maybe you want a background image. Keep those things in mind.)
|
V
3)Photoshop (3 minutes, plus tooling around in PS time; plus slicing if you do it here; )
|
| (3a) File>Save for Web and Devices; Go to "Edit Output Settings>Slices and chose
| and deselect the lame tables and select css instead; Also change HTML to >XML)
V
4) PROTO_XHTML and Image files (At this step you now have:
| a) Your image files, correctly proportioned
| **b) An XHTML file which conveniently contains the sizes in px
| of all your images in a style section
| **c) Placements of your image files in px
|
V
5) DO MATH (15 minutes - You probably want some things in percentages - image size;
absolute or relative placements etc - you will have to do math to derive those numbers
from the raw data you produced in the preceding step. Open Excel or something.
Use cut and pasting skills. Do math.)
|
|
|
|
V
6) Dreamweaver or Whatever you use (Get your PROTOXHTML file into your editor. Replace
the px with the percentages obtained in the DO MATH step.)

You now have ALL the raw materials you need to recreate original design in any kind of layout, as long as you know basic CSS.

Solution 3

I created in5 to address this exact issue of a web export that maintains layouts.

Solution 4

Did a lot of research about this myself as I heard a few people saying it could be done, but it seems to be an extremely basic export, not very useful unless it is your first step in creating a webpage of existing InDesign content, otherwise may as well start from scratch in a dedicated web design program. A good clear page describing it is here: http://www.onsitetrainingcourses.com.au/main/page_blog_saving_indesign_files_as_html.html

View more solutions