This chapter is from the book
This chapter is from the book
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.
)
- Choose File > Open and double-click on the page named liquid.html located in the Lesson03 folder. A page using liquid layouts appears.
- 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.
- 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.
- Create a new page by selecting File > New. When the New dialog window appears, choose Web > Pages > HTML Page, then click OK.
- Choose File > Save As. When the Save As dialog window appears, type the name liquid_virtechu. Click on the Site Folder button (
) and select Root Windows) or Root folder (Mac OS), then choose Save.
- When the Set Title dialog window appears, type the title liquid layout, then press Set.
- Choose the CSS section of the Objects palette and select the Padded Box object (padded); drag and drop it on the page.
- 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.
- Position the liquid_virtechu page so that you can see the Files tab of the student.site.
- Select virtechu_logo.gif and drag and drop it to the top box in the liquid layout.
- Click to the right of the VirtechU logo, and then using the Standard Editing tool (
), select the VirtechU logo. In the Basic tab of Image Inspector, select Left from the Alignment drop-down menu.
- Click to the right of the VirtechU logo to insert the text cursor. Press the spacebar once and type Tour the campus this summer.
- Choose File > Open. When the Open dialog window appears, browse to locate the text file named student.txt in the Lesson03
folder.
NOTE
If you recently opened this file for the previous part of this lesson you will find the student.txt file located in File >
Open Recent. - 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.
- 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.
NOTE
When referencing frequently used artwork or text, you can choose to save the elements as Snippets, making it easy to retrieve
the elements frequently. Read more about Snippets in Lesson 10, “Using Stationeries, Components, Page Templates, and Snippets.” - Position the liquid_virtechu page so that you can also see the Files tab of the student.site.
- Select tour.gif and drag and drop it to the box on the right in the liquid layout.
- Choose File > Save.
- 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.
)
)
)
NOTE
If your text doesn’t look accurate in the GoLive Layout Preview window, click on the Preview in Browser button (
) on the Main toolbar.
Congratulations! You have finished the lesson.