CSS Page Layouts
Objectives
Practice
Files

CSS Layouts


So far, our main content divider has been the paragraph (or p) tag. This is the default separator in DW. There exists a more versatile element in HTML called div. A div tag has full width of the page, but no other formatting. DW takes advantage of the div tag and css to style it to provide users with a few pre-defined page layouts that add some nice design to our sites. This lesson will investigate how to use these layouts to our advantage.
Setup
  1. Open your Striped Umbrella site and download/unzip/file the lesson files.

Creating a Page with a CSS Layout
When we create a page with a CSS layout, we need to consder severl things. First, what type of layout do we want. Some of the pre-defined layouts are set up in pixels. These layouts are considered to be fixed and are always the same size, regardless of the screen. Others are set up in percentages and are referred to as liquid as their size changes based on the viewing screen. Second, where do we want the css stored (in a new file or an existing). Third, is there a pre-existing style sheet for the page that we want included.
  1. Click File -> New.
  2. Choose Blank Page, HTML
  3. Select the HTML5: 2 column fixed, right sidebar, header... option in the third column
  4. In the Layout CSS choice, select Create New File.
  5. Use the link icon to select your suStyles.css file in the Attach CSS file dialog.
  6. Click Create.
  7. Choose File -> Save and save it as "cafe.html" replacing the current cafe page.
Adding Content

When the page is created, it is typically filled with dummy content and placeholder images. This portion of the lesson will teach you how to replace that information with the content designed for the page.
  1. Highlight all content in the main section between the header and the footer. Then press Delete.
  2. Set the Format to paragraph in the HTML Properties panel.
  3. Import, clean and spell check the information from cafe.doc.
  4. Go to Split view. In the code locate the code div class='sidebar1'. Highlight all code between that and the /div that marks the end of the side bar. Hit delete. This should erase the four links on the left side of the page.
  5. In the Design view, highlight the text that is left "The above links..." and in its place type "Reservations are recommened for Beach 25 (our main dining room) during the peak summer hours. Call 555-594-9458: extension 55."
  6. Highlight the text in the footer and replace with Copyright 2002-2016 The Striped Umbrella
  7. File->Save.
  8. Open the spa.html page. Copy the banner and nav bar.
  9. On the cafe page, highlight all of the information in the header and paste the banner and nav.
  10. After the sentence, "The Cabana is poolside" in the main section, hit ENTER and insert the cafe photo.
  11. Before the sentence, "Reservations are recommended..." in the sidebar, insert the cafe logo and hit enter.
  12. Save and preview in the browser.

Styling the CSS

Just like anything else in web design, we can change the preset styles associated with these pre-designed pages in well. We can change colors, fonts, borders, and float positions. We just have to know where to look.