Lesson 5: Working with CSS Layouts and Navigation Bars

Creating a Page Layout:

Prepare your pages:

• Click File > New > HTML page and save it to your project folder
• Click File > New > CSS Stylesheet and save it to your project folder
• Attach your stylesheet to the HTML page you created

Creating the Page Container:

• In your HTML page, make sure the document is in Live view. (Or Split/Live)
• Click into the page and place your cursor at the top (make sure you are not in the code at this point)
• Click on the Div tag from the insert bar
• Click the ‘+’ next to the div you just created to add a css class for your page container. (You can name it page-container)
• Hit Tab then hit the escape key (by doing so you’ll make sure that you don’t create the CSS class in the HTML page itself)
• Double-click into the div and delete the placeholder text (the div should remain but will be blank)
• Once you have your page container created you can nest additional HTML elements inside it.

Creating the Header:

• With the page container div selected, Click on the Header tag from the Insert bar
• Place it on the page by clicking on Nest from the Position Assist dialog box
• You can name it with a CSS class if you have multiple headers on the page

Creating the Navigation Area:

• With the header selected, click on the Navigation tag from the Insert bar
• Place it on the page by clicking on After from the Position Assist dialog box
• You can name it with a CSS class if you have multiple navigation elements on the page

Creating the Content Container:

• With the navigation selected, click on Div from the Insert bar
• Place it on the page by clicking on After from the Position Assist dialog box
• Click on the ‘+’ sign to add a CSS class (make sure to tab + esc)
• From here you can nest additional divs within the content container
• Click on div on the insert bar and select nest from the position assist dialog box
  • To add additional divs, those should be positioned ‘after’.
  • Use the DOM panel to make sure your divs are nested correctly

Creating the Footer:

• Select the content container (Either by clicking on it in Live view or using the arrow key to cycle through the HTML elements to select it)
• Click on Footer from the Insert bar
• You can name it with a CSS class if you wish

Once you have finished created your layout, make sure you switch back to design view to add content to your page.

Creating a Basic Navigation Bar:

Prepping your Navigation Bar:

• To Begin, you will enter in the items for your navigation bar.
• In Dreamweaver place your cursor inside of the navigation element placeholder
• Type in your first navigation item and hit enter
• Do this as many times as necessary until you have entered
• all your navigation items
  

Remember that hitting enter adds a paragraph break. This is important. When you have each navigation item set as a paragraph it makes it easier for Dreamweaver to translate that to an item in your unordered list.

Create your unordered list:

• Select all the navigation items you entered
• Click the unordered list button in the properties panel

Create your links:

• Select each list item and link it to the appropriate page
• Refer to Lesson 3 for more instructions on linking your files.

Styling our Navigation List:

Now that we have prepped our list we are ready to style our navigation bar with CSS. There will be 4 main parts that we will create styles for.

• The unordered list = nav ul
• The unordered list items = nav ul li
• The links inside the unordered list item = nav ul li a
• The hover state of the links inside of our unordered list items = nav ul li a:hover

Note: You can also style the nav container itself. Use the Tag Navigator and CSS Designer to create your CSS styles for the elements of your navigation bar.

Create your ‘nav ul’ styles:

• Use the tag navigator to help select the ‘nav ul’
• Click the plus sign (+) in the Selector Window in the CSS Designer Panel and ensure that ‘nav ul’ is the selector name
• Set the following properties as a base:
  • Margin: 0;
  • Padding: 0;
  • List-Style-Type: none;
  • Height: 48px;
    

Note these are the base styles to remove the default margins, padding and bullets on the list.

Create your ‘nav ul li’ styles:

• Use the tag navigator to help select the ‘nav ul li’
• Click the plus sign (+) in the Selector Window in the CSS Designer Panel and ensure that ‘nav ul li’ is the selector name
• Set the following properties as a base:
  • Float: Left;
  • Text-align: center;
  • Width: 192px; *

* We get the value 192px from taking the number of list items we have and dividing it by the width of our nav bar. In this example our math looks like: 960/5 = 192. These numbers might look different based on the number of navigation items you have and the width of your navigation list. You can use this formula as a guide to help you. Please note that this formula works best for websites/navigation bars that have a fixed width.

Create your ‘nav ul li a’ styles:

• Use the tag navigator to help select the ‘nav ul li a’
• Click the plus sign (+) in the Selector Window in the CSS Designer Panel and ensure that ‘nav ul li a’ is the selector name
• Set the following properties as a base:
  • Text-decoration: none;
  • Color: choose the text color that fits your design;
  • Background: choose the background color that fits your design
  • Display: block; **
  • Line-height: 48px; ***

** We set our display property to block so that our link (anchor) tag takes up all the available space inside our list item.

*** We set the line height to be the same height that we declared on our nav ul. By doing so this will vertically center our text inside our list item.

Create your ‘nav ul li a:hover’ styles:

• Use the tag navigator to help select the ‘nav ul li a:hover’
• Click the plus sign (+) in the Selector Window in the CSS Designer Panel and ensure that ‘nav ul li a’ is the base. Type :hover to the end so it reads as above.
• Set the following properties as a base:
  • Color: choose the text color that fits your design;
  • Background: choose the background color that fits your design

You’ve created a horizontal navigation bar using an unordered list and some CSS styles! Please note that you can change your colors, add some Google fonts, change your hover styles and modify your widths to fit your individual project. Feel free to experiment with your CSS styles.