1

E-Publishing Conversion Process for NMSU Extension Numbered Publicationsby Ana Henke and Frank Sholedice

Save As HTML

File > Export for Dreamweaver

Converting InDesign file to HTML using Dreamweaver• Open InDesign file and make sure all

links are connected properly (VERY IMPORTANT!).

• File > Export for Dreamweaver

• Save as HTML

(Revised September 2011)

2

Export Options: General

Export Options: Advanced

Export Options: Images

General: select document; leave bullets and numbers at its default.

Images: Copy Images (select optimized), Image conversion (select JPEG) JPEG Options (select High)

Advanced: select Empty CSS Declarations

Then click Export

3

Before you start developing the HTML file, you’ll need to convert the PDF of masthead into JPEG graphic.

Open pub PDF in Photoshop. The Import PDF box is displayed. Make sure that the first page of the document is selected.

Leave the resolution at 300 so that the file size is still large. Click OK.

Go to Image > Canvas Size. You’ll need to enlarge the size of the canvas (or page) to 8 x 10 so that you can have a small margin around the page. Click OK.

Once the canvas size is reset, crop out the masthead from the page. Then, select Layer and then Flatten Image (that is what gives you the white background instead of the gray checkered pattern).

4

Select Image, then Image Size and change the resolution to 72dpi and save the file as a JPEG.

Make sure that NONE of the buttons at the botton are checked.

Save at the highest quality JPEG setting.

Remember to size the masthead to a width of 785 pixels.

You need to SAVE the file, then reopen Image size—click all the boxes, so that you can access pixels.

Use the eraser tool to erase the superscript next to the author name.

5

Overview of new HTML format for pubsMasthead from publication should be made into graphic.

Remove the superscript regarding author titles in Photoshop.Don’t forget to add the word “Author(s):” followed by author(s) information below masthead (text should be BOLD). Also add the word “Respectively” when there is more than one author as shown here.

Apply basic subhead styles to text (start with sub 2).

Bold photo captions.

Add lead author photo and bio before the closing information to all new/revised publications.

Place ACES contact information, copyright permission and EEO statement at the end of file in this order.

Place “Printed and electronically distributed” line at the end of the HTML file in BOLD.

6

After you export a file for Dreamweaver, an image folder is automatically generated along with an HTML file. Remember ALL styles have been stripped out of this HTML file. You’ll be applying styles to this file in Dreamweaver, which will be transfered into the eBook formats.

Open the HTML file in Dreamweaver. Delete masthead shell graphic and the text what would fill it like pub title, pub number, authors names, etc. and replace with masthead graphic you developed from PDF in Photoshop. If the masthead has superscripts, go back into Photoshop and delete them.

Insert new masthead graphic by clicking Insert > Image.

After you’ve selected which image you want to insert, this Image Tag box comes up—just click OK. Since you’ve sized the graphic in Photoshop, all you need to do is insert it in the document.

7

New graphic inserted.

It is important to keep the author’s title line in its own separate cell. If you don’t, it appears much too close to the masthead on the web. The rest of the content should be one cell.

Highlight the subhead text and click the appropriate style throughout the publication (remember the styles have been stripped out).

Apply the heading styles the way you would for any publication, but you must start with HEADING 2!

TIP: If subheads are in ALL CAPS, use MS Word “change case” option to correct. Select “title” option.

If this formatting tools panel doesn’t appear, go to the pull-down menu under Modify > Selection Properties.

NOTE: Tables are more clearly/easily displayed online and in the iPad (ePub format) by using the table grid option.

To insert a table, click the Table button on the side menu options.

Then type in the number of rows and columns desired.

8

Using Photoshop to resize and insert photos into HTML file—after they were converted for Dreamweaver from InDesign.

When you export a document for Dreamweaver, the software creates an HTML file and resizes the photos/graphics. It also puts all the graphics into one folder.

Because we use high resolution photos for our publications, when Dreamweaver converts our photos into JPG files it ends up increasing the “Document size.” So, you’ll need to open the files in Photoshop to resize them.

Click Image > Image Size

When resizing a photo, you must check all of the following boxes: Scale Styles, Constrain Proportions and Resample Image. Next, type in 400 pixels in the width box for all photos. If you want to group photos together, just make them two-photos wide. Hopefully, the photo will have a high enough resolution for the 400 pixel width. If not, 350 will be fine.

When you open the document in Dream-weaver again, the resized photos will automatically be updated in the HTML file.

Note: If you are inserting a lineart im-age/illustration that contains text, the image width should be 600 pixels.

9

To insert the horizontal rule, just put the cursor where you’d like to place the rule and click the horizontal rule button on the right side panel.

After formatting your publication, you’ll need to add the head tags to the HTML code (keywords, meta description and alt tags).

Place your cursor directly after <head>. This is where you’ll be inserting the head tags.

Insert > HTML > Head Tags > Keywords

10

Copy and paste the keywords into this box and click OK.

The keywords are then inserted into the html code. The same method allows you to insert the description as well (Insert > HTML > Head Tags > Descriptions).

Make sure that “NMSU Extension” is a keyword to ALL Extension pubs! and “NMSU Experiment Station” is a keyword for AES pubs.

11

Now, you need to add the Alt tag (or photo description)

First, click the photo.

Then copy and past the Alt tag information into the Alt box located on the bottom toolbar.

After it is pasted in, the information is inserted into the HTML code.

Note: ONLY figures require alt tags! Also, if you replace a figure, you’ll need to reinsert the alt tags!!

You are DONE with the Head tags!!

After this step, give to editor to review content. After you make his corrections let supervisor know HTML file is ready for review.

12

You will need to save two HTML files. One for the web and the other for the e-publishing conversion process. The HTML file for the web includes everything you just added to the file. The file name should be the publication number (EX: B218.html).

For the HTML file for e-publishing, delete the masthead graphic because you are going to create a cover for the eBooks. The file name should be the publication number with eBook added (EX: B218eBook.html).

From now on each electronic publication folder should have four folders: (Main folder: B218; Subfolders: B218eBook, B218HTML, B218InDesign) plus the B218.PDF file.

13

I’ve set up an eBook cover template in InDesign with character styles.

After you layout the eBook cover, let editor review it for text accuracy and have supervisor review the layout. A hard copy or PDF version is fine.

Before converting the HTML file into an ePub or Mobi file, you’ll need to typeset the pub’s cover page.

Don’t forget to insert the pub name, number, author’s name(s) and title(s) before the publication content! This is necessary because the Kindle often skips the cover page when displaying an eBook.

14

After you typeset the cover, save it as a graphic like you did the masthead by rasterizing it in Photoshop.

Remember that the resolution needs to be 300 AND leave the image size AS IS. It is not necessary to enlarge the canvas to 8 X 10 like for the masthead.

CROP the image so that it appears to have a FULL BLEED!!

Then Flatten the image and save as a JPEG. This is the image file that will be added to eBook in calibre.

15

Calibre ToolsAdd

booksEdit

metadataConvertbooks View

Save to disk

Removebooks

User’s manual Preferences

Before converting the HTML file into an ePUB or MOBI format, you need to open the file in Calibre by clicking the Add books button at top left and selecting the HTML file and clicking Open.

Converting HTML file to ePUB & MOBI formats using Calibre

16

• The first thing you need to do is create the metadata for the publication. Click the Edit metadata button at the top left corner and then just start filling in the information.

• Remember to add in pub number BEFORE title!

• Copy and paste keywords that have been provided by editors for this publication.

• Once you are done with this, you’ll need to replace the generic book cover with the cover you typeset.

• Click the “Change cover image” button and select the file.

Publisher: New Mexico State University Cooperative Extension Service

17

Once you have updated the metadata and inserted the cover graphic, you are ready to convert the file.

Click the “Convert Books” button.

Click Table of Contents icon at left. Make sure the box Do not add detected chapters to the Table of Contents IS CHECKED

Click Look & Feel icon at left,In the Look & Feel menu, click the drop-down menu to the right of Text justification: and select Left align

Once these steps are completed, you need to decide if you want the book to be in EPUB or MOBI format.

18

For MOBI format

Click MOBI on the Output format button at top right corner.

Make sure the box Do not add Table of Contents to book IS CHECKED.

Also click the MOBI Output button on the left side panel.

Click OK at bottom right to convert file.

For EPUB format

Click EPUB on the Output format button at top right corner.

Click Do not split on page breaks. Important step! If this is not checked, blank pages will appear throughout your eBook on the iPad!

Also click the EPUB Output button on the left side panel.

Click OK at bottom right to convert file.

19

After it is converted into an ePUB or Mobi, it shows up on the list of e-books available in your library.

Now, you can view it via Calibre, by clicking the title you want and clicking the view button.

View of eBook.

After eBook file is done, upload the eBooks to our office eReaders to see how the files are work-ing. Have supervisor and editor double check eBooks on readers as well.

If they work properly on all eReaders, you can forward eBook files to webmaster for posting.

20

IMPORTANT: This is how your files should be organized and named once you have completed publication.

Once you are ready to send the eBook and html files to webmaster, remember all you need to send is the MOBI file and the EPUB file. You don’t need to send her the eBook cover grraphic OR the eBook HTML file. Everything is already included in the MOBI/EPUB formats!

When you are done with the HTML files, you can just email her the HTML file along with the individual graphics files. I’ve had no problem emailing the files like I’ve shown above.

REMEMBER: ONLY send the webmaster the one HTML file to be posted to the web and NOT the eBook HTML file!

CONGRATUATIONS! You’ve converted an Extension print publication into HTML and eBook versions!