• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 7. Moving from Print to Web > Opening the package in GoLive

Opening the package in GoLive

Switch back to GoLive. Open the frameset site.site if it is not still open.

Had you exported the package from InDesign to a location outside the site's folder, you would now need to choose File > Import > From InDesign, and select the InDesign package file. GoLive would place a copy of the entire package folder (after asking for confirmation), in the web-data/InDesignPackages folder. But, since the package has already been sneaked into that folder through the back door, you'll need to explicitly tell GoLive that there's a new package in the folder that it should be aware of.

Right-click / Control-click the InDesignPackages folder name, in the Extras tab of the site window, then choose Update > Refresh Selection from the pop-up menu.

Click the plus sign to the left of the InDesignPackages folder name, and note the mynewsletterfinal package in the expanded view.


Although the mynewsletterfinal package has a plus sign to the left of its name, this folder's view cannot be expanded.

Double-click the mynewsletterfinal package icon to open the package window. In the InDesign Layout tab, observe a thumbnail view of the first page of the InDesign newsletter. Since this package only contains one page of the InDesign document, the First, Previous, Next and Last Page buttons on the lower right corner of the package window are disabled. Otherwise, one could flip through the pages of the exported document to find the elements to be added to the Web site. You can also resize the package window, and zoom in and out as desired.

In the Assets tab, all available elements are in the package, listed by Stories (i.e. text blocks), and Images. Those elements could be dragged from here into the Web page document window or, as described below, from the more visual InDesign Layout tab.

By clicking the HTML Preview tab, you can have GoLive try to convert the entire page from the package to an HTML page equivalent. You have some control over the conversion process via a Layout Scaling slider in the Main toolbar. Then you'd choose Export as HTML page from the palette menu, to create an entire HTML page, preserving as much of the original page layout as possible, and creating a page that is ready to be added to the Web site. But as mentioned earlier, for this lesson you will pick and choose which elements to incorporate into the design of the Web page, and therefore not use this option.

Select the InDesign Layout tab in the mynewsletterfinal package window. You will drag the elements from here. In the site window, double-click the nl_news.html page icon (inside the newsletter folder in the Files tab), to open it in its document window. It is to here that you will drag the elements.

In the InDesign Layout tab of the mynewsletterfinal package window, hold the pointer over the page.

GoLive will highlight the various elements available for dragging onto the HTML page. Also displayed will be additional information for each highlighted element, like the type and name of the asset. To highlight the Photoshop image, the pointer needs to be moved over the picture, but between the columns of the main story text; this is one situation where identifying and dragging an element from the Assets tab might be easier.

Click the Vanishing Points! headline text item to select it, and then open the Inspector palette to define the Asset Conversion Settings for this story element.

Text of a story can be inserted as Editable Text, Smart Component, or Snapshot Image.

You can use Snapshot Image to preserve text styling that normally would not be represented on Web pages using CSS text formatting. Examples are swash characters and ligatures, or the use of a specific font. Snapshot Image would represent the text appearance as an image, but the text content would get lost (i.e. the text in the image cannot be selected or copied and pasted or searched). Obviously, you only want to use this option in rare circumstances. In such cases it's a good idea to also enter the original text as Alt Text for the image on the page.

Text added as a Smart Component to the page keeps a link to the original text in the InDesign document. If the text gets edited in InDesign, and then repackaged, the Smart Component in GoLive also gets updated to reflect the changes. Furthermore, the text can be cropped to only display part of the original story on a Web page. But the text can't be edited directly in the GoLive Web page document.

Editable Text converts the text to regular text on the Web page, and this text can then be edited directly in GoLive if necessary. GoLive does not keep a link to the original text in the InDesign document, so changes made there will not automatically be reflected on the Web page.

For the Vanishing Points! headline, the Editable Text option seems to be the most practical.

Select Editable Text from the Insert As pop-up menu in the Inspector palette.

The use of Cascading Style Sheets (CSS) can help maintain consistent text formatting throughout a Web site. This also allows for quick updates to the appearance of text in all pages—be it one, ten, or hundreds of pages—referring to a common CSS. Think of CSS as the equivalent to paragraph and character styles in an InDesign document.

The Inspector palette offers the choice of using an Internal CSS, External CSS, or none. An Internal CSS applies to only the text within the current HTML page; an External CSS is stored separately (externally) and can be shared by many HTML pages. This is what will be used for this project. When the text element in the package window was selected, GoLive added an external style sheet, called styles.css, to the site. That sheet is located in the web-content/mynewsletterfinal Accessories/styles folder, visible in the Files tab of the site window.

With the headline still selected in the package window, make sure Use CSS Styles is selected in the Inspector palette. If necessary, select External CSS from the Definition pop-up menu, and choose Set Reference to Package CSS from the menu to the right of the Reference field.

With all text conversion options specified in the Inspector palette, drag the headline element from the package window onto the nl_news.html document window near the top left corner of the page.

Select the placed object on the page (the eight handles of the bounding box should be visible). (See illustration on next page.)

Grab the lower right handle, and try to resize the bounding box; it will snap to a size large enough to hold the placed headline in the selected text style.

Obviously, the way this headline is formatted is much too large for this Web page. You will now edit the external style sheet that governs the formatting of the headline, to adjust the design for the Web page.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint