Home » Resources » Dreamweaver CS4 Tutorial » The Status Bar – Dreamweaver CS4

Part 4.2: The Dreamweaver CS4 Status Bar

The Dreamweaver status bar needs to be introduced before we can configure the background of the rest of the page. You can learn all these techniques with a qualified trainer on our introduction to Dreamweaver course

First put the text cursor somewhere in one of your paragraphs in your side bar.

Locate the status bar.  It is located near the bottom of the Dreamweaver window, just between your web page and the PROPERTIES panel.

The status bar is important if you want to customize your website’s appearance. It allows you to select entire blocks in your web page so that you can change things like colours, fonts, etc, of whole sections of your page in one go. The left side of the status bar contains the following ‘’Tags’’ – “<div#container> <div#sidebar1> <p>”. These ‘’tags’’ will differ depending on where you clicked onto the page, and how big your Dreamweaver window is.

Clicking each tag will select a different block enclosing the spot where your text cursor is in.

The “<p>” refers to a “paragraph” in the underlying code of your web page.
The “<div#sidebar1>” tag when clicked, selects the entire left column.
The “<div#container>” tag when clicked, selects both columns and the header and footer.

Each tag indicates a block of items on the screen. The “<p>” block is designed to hold a single paragraph of text.

The “<div>” tag is needed when the side bar contains words, pictures, lists of items, etc.

Other tags are also visible when you click in different sections of your page.  If you click the header (the top horizontal bar where your website name is) notice that your company name displays the “<h1>” tag. This is enclosed inside a DIV block (“<div#header>”).

Once you have mastered all these techniques you may want to attend our Advanced Dreamweaver course.

Similar resources you may like

1. A two column Web Page with a Header and Footer
2. Changing the font size
3. Adding a Background Colour or Image
4. Header, Footer, Side Bar and the Main Content
5. Spry Menu Bar Widget – Change the Colours

Tags

dreamweaver cs4, Dreamweaver Training, Free Dreamweaver Training, status bar

Share This Resource

This entry was posted by Colin Welch on Monday, March 16th, 2009 at 11:00 am and is filed under Dreamweaver CS4 Tutorial. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.