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

Lesson 5. Building a Web Site > Using Smart Objects

Using Smart Objects

Click the Extras tab, in the group of additional tabs on the right side of the site window.

Click the SmartObjects folder to select it, then choose Site > New > Add Files. Navigate to the Lesson05 folder, select the webbanner.psd file and click Open / Choose.

The file will be added to the site in the SmartObjects folder.

What's going on behind the scenes is that GoLive has created a folder called simple site in the Lesson05 folder. Within the simple site folder are folders called web-content, web- data, and web-settings. The web-content folder contains the files displayed in the Files tab of the site window. The web-data folder contains the folders shown under the Extra tab, including the SmartObjects folder that now contains a copy of the webbanner.psd file.

Double-click the index.html file icon in the Files tab to open it in its own document window.

Click the Show page properties icon at the top right of the document window.

Under the Page tab in the Inspector palette, set the Margin Width and Height to 0 and rename the page Title to Basics - Creative Solutions.

In the Objects palette, which by default is joined to the bottom of the toolbox, select the Basic set.

A. Separate tools and objects. B. Join tools and objects.

From the Basic set of the Objects palette, drag the Layout Grid object to the page. (See illustration on next page.)

This object will snap to the top left corner of the page when you release the pointer (because the page margins have been set to zero in step 5).

With the Layout Grid still selected, set its Width to 620 pixels (the width of the Web banner), and its Height to 500 pixels in the Inspector palette.

From the Smart set of the Objects palette, drag the Smart Photoshop object to the top left corner of the layout grid on the page. If necessary, use the arrow keys on the keyboard to nudge it into the very top left corner of the grid.

With the Smart Photoshop object still selected, drag from the Pick Whip button (also known as the Lasso or Fetch URL button), next to the word Source in the Inspector palette, to the file webbanner.psd in the SmartObjects folder in the site window. Release the pointer when the filename is highlighted. Click OK in the Variable Settings dialog box. Click Save in the Save for Web dialog box.

Select Root (Windows) or Root Folder (Mac OS) from the pop-up menu next to the words Site Folder, near the bottom in the Save dialog box, then click Save to save the webbanner.data folder inside the web-content folder of the site.

GoLive will place the Web banner at the top of the page. The components of the composed image (e.g. the gif images for the Normal and Over states of the buttons) will be generated from the webbanner.psd file, and saved in the webbanner.data folder. GoLive maintains a link between the original Photoshop file and the generated components. If the Photoshop file in the SmartObjects folder gets modified (or the Smart Object is resized on the page), GoLive will automatically regenerate the content of the webbanner.data folder.



Not a subscriber?

Start A Free Trial

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