Creating a page using CSS code

STEP 3 – Create HTML

 

Creating the HTML file is the last step in this tutorial. In this file, the images that you saved in Step 1 and the CSS file you created in Step 2 are used in the HTML file.

 

Click New – File… option from the main menu.

 

The New Document dialog box appears. Retain the default selection of Blank Page, Page Type: HTML, and Layout:<none>. These selections specify that Dreamweaver will generate a blank HTML page with no layout.

 

Click the Attach CSS file: link in the lower right hand corner of the New Document dialog box to attach the CSS file you created earlier in this tutorial, style.css.

 

The Attach External Style Sheet dialog box appears. Type the location of style.css in File/URL text field. Here, we have typed D:/Tableless_Site/css/style.css.

 

Click the OK button.

 

 

The New Document dialog box becomes the active window again. Click the Create button.

This creates a basic HTML file with some default values and the link to the style sheet you associated earlier in this step.

 

 

Now, the HTML file needs to be saved as index.html. Click New – Save optionfrom the main menu.

The Save As dialog box appears. Type index in the File name: text field.

Click the Save button. The index.html file gets saved in the project folder, D:/Tableless_Site.

Edit the various parts of the index.html file so that it reflects what is shown on the site.

You should begin by re-naming the default title to Beaver Cheese Secrets.com. You do so by typing Beaver Cheese Secrets.com within <title> tags of the file.

The references to all the div styles you created in the style.css file are added within the opening and closing body tags.

Type the following code within the body tags.

The remaining div should be declared one by one within the container tag. The div tags should be added in the sequence in which you want them to appear. Therefore, the header tag should be added first, followed by menu, search, menumiddle, mainContent, and footer.

Please note all the tags described below should be enclosed within <div id="container"> tags.

To add the header div within the container div tags, type:

The above code adds the header image header.jpg, using the style specified in the header div.

You now add menu div along with all the menu items by typing:

The above code adds a menu with three menu items. The style of the above code is controlled by menu, menu ul, menu li, and menu a divs.

Add the search div by typing:

The above code adds the Search area with a text field and the Submit button. The text, Search BeaverCheeseSecrets.com: will appear as is. The style of the above code is set by search div.

Add the second-level menu by typing:

The above code adds the menumiddle area with four menu options. The style of the above code is controlled by menumiddle, menumiddle ul, menumiddle li, and menumiddle a divs.

Add the main content by typing:

The main content is added using the mainContent div and also paragraphs of text. In the above code, each paragraph of Web content is prefixed with the <p> tag and suffixed with the </p> tag. This ensures spacing between the each paragraph of text.

Add the footer using the following code:

The above code supports the styling specified using the footer div. The footer image along with width and height is set using the <img> tag.

After adding the footer div, save the file again using the File – Save menu.

 

 

 

Once, you have finished creating the index.html, it is a good programming practice to check the markup of your CSS and HTML files using the File – Validate – Markup menu. This menu checks that all the tags declarations in the CSS are syntactically correct and their corresponding references in the HTML file is also correct.

 

STEP 2 – Create CSS

You should create a CSS file and then the HTML file. In the CSS file, you create the styles that are later implemented in the associated HTML file.

Run Dreamweaver CS4.

A common practice is to save the CSS styles in a separate file called style.css and in a folder called css in the project space.

To create a CSS file, click New – File… option from the main menu.

The New Document dialog box appears. Retain the default selection of Blank Page. In the Page Type: group box, click CSS , and then click the Create button.

 

 

Dreamweaver 4 creates and opens a blank and untitled CSS file for you. Save the CSS file with the name, style.css in the css folder of the project space. To do that, click File – Save from the main menu.

In the Save As dialog box, locate the project space using the drop-down box. In this tutorial, we are using D:\Tableless_Site as the project space.

Click the Create New Folder button to create a new folder.

 

 

When the New Folder appears in the folder list, rename it as css.

Double-click css folder to make it the current folder.

Type style.css in the File name: text field and click the Save button. You have therefore, saved the CSS file, style.css in the D:\Tableless_Site\css folder.

You are now ready to populate the style.css file with appropriate styles using tags and parameters.

The body tag is the first tag that you should create in style.css. Using body tag, you can define the style of the body of the associated HTML page. In other words, the body of the HTML page which is associated with this tag would have the same style as what is defined in the body tag.

You start defining the body tag in the style.css file by typing:

This code denotes that the complete body would be covered by bg.jpg. As the body is wider than bg.jpg, the multiple copies of the image will get spread across the body until all the area is filled up. You have created a background for the Website. All the other images and text area would be later placed on top of the image. The margin:0 code ensures that there will be no white space around the bg.jpg image.

A feature of Dreamweaver CS4 that is worth mentioning here is code completion feature. As soon as you start typing a parameter, the code completion feature shows the available parameters in a list box and lets you select the one you want along with the value.

 

 

In the above image, Dreamweaver CS4's code completion feature is showing all the available parameters for the body tag.

 

 

In the above image, Dreamweaver CS4's code completion feature is showing the Select File dialog box, using which you can select the image from the image folder of the project space.

In this tutorial, we will ask you to type the code rather than using the code completion feature. You may however use this feature if you are comfortable with it.

Like the body tag, another tag which you should define is the a tag. The a tag style controls the style of all the links on the Web page. To declare the a tag, type:

The above code sets the font family and size along with the color of the links.

After creating the body and a tags, you add the div tags to CSS file.

A div tag divides the corresponding HTML page into sections. In the CSS file, you can add style parameters to each of these div tags. The process of adding the style parameters in the CSS file is same as that of the body and a tags.

The div tags that we shall use in our example are:

· mainContent – Used for adding style to the main text that appears on the Web page.

• · menu – Used for adding style to the first menu.
• 
  
• · search – Used for adding style to the search block.
• 
  
• · menumiddle – Used for adding style to the second menu.
• 
  
• · footer – Used for adding style to the footer.
• 
  
• · container – Used for adding style to the vertical middle column of the Web page. All the above components are added in the container.

You add the mainContent div in the style.css file by typing:

A div tag declaration is preceded by a hash (#) symbol. The padding parameter in the above code denotes that the area controlled by mainContent div will have no white border at the top and 20 pixel border on left and right. The text within this area would be of font-family, Verdana, Geneva, sans-serif and size, 12 pixels.

You add the menu div along with three variations in the style.css file by typing:

The menu div code denotes that it is composed of lower_bg.jpg and the image is justified to the right. The width attribute denotes that the image will horizontally occupy 100% of the menu area.

The menu ul div sets the style of the menu item list within the menu area. Both the margin and padding of the menu ul is set to 0. In other words, the outer and inner borders of the menu ul div will have top border of size 0 pixel, bottom top of size 0 pixel, right border of size 0 pixel, and left border of size 0 pixel. The menu ul is right-justified and there is no bullet style (list-style: none) associated with the list.

The menu li div sets the style of the menu items. The items are designed to float to the left and margin:auto denotes that the outer border depends on the browser. The padding-top:5px denotes that the inner border on the top is 5 pixel thick. The bottom margin is 4 pixels and the left margin is 15 pixels. The top and right margins are 0 pixels.

The menu a div sets the style of all the links within the menu area. The display:block attribute creates a block around the linked element. The width of the element is decided by the browser. The height of the element is 22 pixels. The text-decoration:none attribute defines that the linked element will not be shown supporting any style. The default text-decoration for links is underline.

The search div creates the search area with the text field and Search button. You add the search div for styling the search area in style.css file by typing:

The padding parameter in the above code denotes that the search area 20 pixel border on top. The font of the text within this area would be Verdana, Geneva, sans-serif and size, 13 pixels.

Add menumiddle div along with three variations in the style.css file by typing:

The menumiddle div code denotes the second-level menu on the Web page. The structure of menumiddle div is similar to menu div. The menumiddle div is used for defining style properties of the menu area. The menumiddle ul div defines the style for the menu list. The menumiddle li div is for styling each item within the menu list. The image of the drop-down arrow (middle1.jpg) is also assigned to each item using this div. The menumiddle a div is for assigning style to each linked element in the menu.

Add footer div in the style.css file by typing:

The footer div defines the style of the footer area. Like other divs, the footer is defined using padding and margin attributes.

The last div that you need to create is container. Type:

The container div defines the container which holds all the above divs you have defined.

Figure 4: Complete CSS File

 

Save the style.css by clicking the File – Save option from the main menu.

 

STEP 1 – Planning

The BeaverCheeseSecrets.com home page is essentially composed of seven blocks. They are:

1. 1. Header that holds a banner on top
2. 
   
3. 2. Menu bar with three text/image links aligned right
4. 
   
5. 3. Search box underneath the first navigation bar
6. 
   
7. 4.Second menu bar with four text links
8. 
   
9. 5. Main content area that holds the main content
10. 
    
11. 6. Side panels
12. 
    
13. 7.Footer containing a single footer image

Most of these blocks are composed of images. The images that are used in building these sites are:Ø

• Ø header.jpg – Used for creating the header
• 
  
• Ø footer.jpg – Used for creating the footer
• 
  
• Ø bg.jpg – Used for creating the two panels on both the sides
• 
  
• Ø lower_bg.jpg – Used for creating the first menu bar
• 
  
• Ø middle1.jpg – Used for creating the second-level menu
• 
  
• Ø middle2.jpg – Used for showing hover state of the second-level menu

 

The above images are available for download from HERE . Store the above images in the ./images folder of your project space. In this tutorial, we are using D:\Tableless_Site as the project space and storing the images in D:\Tableless_Site\images folder.