Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design

  • Print
  • + Share This
  • 💬 Discuss
This chapter is from the book

Liquid layouts

GoLive lets you add a predesigned CSS layout object, based on layers, to a page, and then add text and objects to the layout just as you would in any other page. CSS layout objects are liquid layouts—they adjust to accommodate the viewer’s screen settings. You don’t need to know how to code CSS to create CSS layout objects, but you can customize them by using the CSS Object Inspector and the CSS Editor.

  1. Choose File > Open and double-click on the page named liquid.html located in the Lesson03 folder. A page using liquid layouts appears.
  2. Select the Preview tab in GoLive and drag the document window to a larger size, then smaller. Note that the liquid layout feature used to create this page allows the CSS elements to adjust to the size as needed.
  3. You can leave this page open for reference or choose File > Close.

Creating a page using liquid layouts

In this next section you will create a simple page using the liquid layout feature.

  1. Create a new page by selecting File > New. When the New dialog window appears, choose Web > Pages > HTML Page, then click OK.
  2. Choose File > Save As. When the Save As dialog window appears, type the name liquid_virtechu. Click on the Site Folder button (sitefolder.jpg) and select Root Windows) or Root folder (Mac OS), then choose Save.
  3. When the Set Title dialog window appears, type the title liquid layout, then press Set.
  4. Choose the CSS section of the Objects palette and select the Padded Box object (padded); drag and drop it on the page.
  5. Now select the Three Columns: Scaling Center object (3col) and drag that into the lower section of the Padded box object already placed on your page.
  6. Position the liquid_virtechu page so that you can see the Files tab of the student.site.
  7. Select virtechu_logo.gif and drag and drop it to the top box in the liquid layout.
  8. Click to the right of the VirtechU logo, and then using the Standard Editing tool (editing.jpg), select the VirtechU logo. In the Basic tab of Image Inspector, select Left from the Alignment drop-down menu.
  9. Click to the right of the VirtechU logo to insert the text cursor. Press the spacebar once and type Tour the campus this summer.
  10. Choose File > Open. When the Open dialog window appears, browse to locate the text file named student.txt in the Lesson03 folder.
  11. When the student.txt file opens, select the text above the dashed line and choose Edit > Copy. Return to the virtechu_liquid.html page and insert the cursor into the lower left cell and choose Edit > Paste.
  12. Return to the student.txt file and select the text beneath the dashed line. Choose Edit > Copy. Return to the virtechu_liquid.html page and insert the cursor into the lower center cell and choose Edit > Paste.
  13. Position the liquid_virtechu page so that you can also see the Files tab of the student.site.
  14. Select tour.gif and drag and drop it to the box on the right in the liquid layout.
  15. Choose File > Save.
  16. Choose the Preview tab and drag the document window larger, then smaller to see how the page you created dynamically changes to fit the available space.

Congratulations! You have finished the lesson.

  • + Share This
  • 🔖 Save To Your Account

Discussions

comments powered by Disqus