by Derek Lu
Table of contents
14 January 2013
Experience working with the Adobe Digital Publishing Suite is required. This article assumes you have published public folios and have read HTML implementation of the default library.
User level: Intermediate
Other required products
Library and Store API v2
- Launch Dreamweaver CS 6 and open index.html.
- Comment out or remove line 10:
This include is for the DPS library API, which contains a bridge protocol that prevents the page from displaying. The API is used to retrieve folio data, preview images, and conduct transactions. On the desktop, when the API is removed, folio data is returned from the DPS fulfillment XML feed and transactions are not enabled.
- To view your folios on the desktop, open Config.js and locate FULFILLMENT_URL. Change the value after
"accountId="to match your accountId. If you need help finding your accountId, see the section titled "Connecting to fulfillment" in Building a custom storefront. You do not need to change the accountId if you would like to use the published folios from the provided account. Keep in mind that this accountId is for desktop testing and is not used in the viewer.
- In the document toolbar, click "Live" to view a live rendering of the template (see Figure 1). If your document toolbar is not open, select View > Toolbars > Document.
Figure 1. The live view in Dreamweaver.
- At the bottom of the live panel, select 100%, the Tablet size icon and 768x1024 from the window size menu (see Figure 2).
Figure 2. View properties at the bottom of the live panel.
Figure 3. Styles for the "Local" title.
url("banner_right.png")and browse to the image with which you would like to replace it. Alternatively, you can replace the image on the file system. Keep in mind that the dimensions for the image are 458×140 pixels unless you change it.
Figure 4. Styles for the right side of the banner.
<div#grid>from the Tag selector (see Figure 5), which will update the CSS Styles panel. To update the image, double-click
url("bg_portrait.png")and browse to the image with which you would like to replace it. Alternatively, you can replace the image on the file system. Since a different background is used for portrait and landscape orientations, you will need to switch orientations for the page and turn off or on Live view by toggling the Live button to refresh the styles.
Figure 5. Tag selector in the lower left corner of the Dreamweaver window.
Figure 6. Styles for the grid.