You are on page 1of 109

Page 1 of 109

PROJECT 6: CASCADING STYLE SHEETS

Showcolate (USA) has contacted you to build a Web site to promote their franchising business. 
They want a Web site that they can easily alter in minimum time, whenever they need to. The 
Web site should project a consistent look and style in all its pages. The Web pages should be made 
‘printer­friendly’, enabling only specific page elements relevant for print. Showcolate wants 
complete control over the layout and design of the Web site. Your task is to create and apply a 
Cascading Style Sheet (CSS) for the Web site to take control over the layout and maintain 
consistency throughout the Web pages.

CREATING CASCADING STYLE SHEETS


A Cascading Style Sheet is a collection of formatting rules for designing the layout of a Web 
page. These rules are defined to give a specific look and style to a Web page. By attaching a style 
sheet to the Web page and applying styles to the content of the page, you can control the complete 
layout of the Web page. Just as an HTML page builds the structure of the Web page, a style sheet 
controls the design of the content. In other words, a style sheet formats the entire content of the 
Web page, such as fonts, typefaces, colors, margins, header, and footer according to your 
requirements.  With a style sheet, you need not modify each element of a Web page separately. 
Simply change the style applied to a group of elements, and all elements in the group  will be 
modified accordingly. This makes your work simple and easy, and gives a consistent look and 
style to the Web page. Using style sheets ultimately makes it easy to maintain your Web site.

A style sheet offers a great deal of flexibility in applying styles. You can apply one style to a 
single element of a page or many elements at once. You can apply similar styles to multiple Web 
pages in a Web site, or use different styles for different pages. You can either create the complete 
style sheet first and then apply styles to the Web page, or create styles one after the other while 
building the Web page simultaneously.

Prior HTML knowledge is not necessary for you to create a style sheet in Dreamweaver. You are 
required to define rules in a style sheet. A rule consists of a selector (an HTML element such as 
h1, ul, p, body, etc.) and attributes (font, color, width, height, etc.) applied to the selector. You can 
create different selectors in a style sheet and apply different attributes to them. For example, if you 
want to create a style for the body of a Web page, define a rule in the style sheet which contains a 
selector (body) and the attributes you apply. Whenever you want to modify the body of the page, 
simply modify the rule you have defined. A style sheet is a collection of all such defined rules. 
Dreamweaver uses different types of selectors; you will learn how to use them as you move on.

Before creating a cascading style sheet ­ either for a single Web page or for the entire Web site ­ 
you need to have a clear idea how the Web page or site should look. This helps you figure out 
what styles are to be created in the style sheet to design the page or site according to the 
requirements. You can visualize the whole layout including fonts, colors, margins, header, and 
Page 2 of 109

footer prior to creating the style sheet.

Styles are of three types: External styles, Embedded styles, and Inline styles. How to use these 
styles is discussed in detail in the following section.

DREAMWEAVER FOUNDATIONS
EXTERNAL, EMBEDDED, AND INLINE STYLE SHEETS
Dreamweaver contains three types of styles: External styles, Embedded styles, and Inline styles. 
You can make the best use of styles only when you have a clear idea of these style types. The real 
purpose and potential of a style can be achieved substantially only when you choose the 
appropriate style type. However, all three types of styles can be applied to the same HTML page 
at the same time.
External Style: An external style sheet is a separate file with CSS rules, which can be attached to 
a number of HTML pages. As a single external style sheet can customize many Web pages at a 
time, it can be used to maintain the entire Web site easily and quickly. This advantage of using an 
external style sheet makes it preferable to most Web developers. You can attach different external 
style sheets to different HTML pages, but note that one HTML page does not take more than one 
external style sheet.
An external style sheet is saved as a .css file and is uploaded to the Web server along with the 
Web pages to which the file is attached (ensure that the .css file is saved in the same location 
where all the Web pages are stored). This facility of uploading a single .css file to manage all the 
Web pages makes the external style more preferable to the other two styles. As embedded and 
inline styles are to be applied directly in HTML pages, you need to upload all the pages to modify 
the styles. This can prove to be tedious and time­consuming.
You can use two methods to work with an external style sheet: link method and import method. 
Though link method is the default method in Dreamweaver, you can also use the import method.
When you use a link method to attach a style sheet (for example, styles.css) to an HTML page, a 
code is added above the style tags in the following way: 
<link href="Styles.css" rel="stylesheet" type="text/css" />.
If the import method is used to attach the same style sheet, a code is added within the style tags in 
the following way: 
<style type="text/css">
<!­­
@import url("Styles.css");
­­>
</style>
Page 3 of 109

You can use either method, but compared to the import method, the link method supports all 
browsers in a better way.
Embedded Style: An embedded style is a style that is embedded directly in the HTML page 
within style tags (<style>…</style>). An embedded style affects only the particular HTML page 
in which it is placed. By using an embedded style, you can control the elements throughout the 
page. The two tags <style> and </style> denote the beginning and ending of the style. Though 
most Web designers prefer to use an embedded style within header tags, it can be placed 
anywhere in a page.
For example, when you apply an embedded style to a heading and paragraph, the code will be: 
<style type="text/css">
<!­­
H1 {
 font­family: Arial;
}
P { 
color: Blue; 
}
­­>
</style>
The set of tags <!­­ and ­­ > are used to prevent a few old browsers from displaying the style rules.
Inline Styles: An inline style is used to apply directly and instantly to an individual element 
within a tag, affecting only that single element of the HTML page. By applying an inline style, 
you can define specific attributes to an element within a tag. An inline style can be applied easily 
and quickly, but it is limited only to the tag in which the element is found.
For example, if you apply a font size and color to a paragraph, the inline style looks as follows:
<P style="font­size: 10pt; color: blue"> </P>
Though you may use any of the three styles, the external style is recommended.

Create Element Selectors

As discussed earlier, a style sheet is a collection of defined rules which are made up of 
selectors and the attributes applied to them. Creating selectors in a style sheet is 
crucial. You can use different kinds of selectors in a style sheet, and element selectors 
are basic and easy­to­use selectors. An element selector selects an HTML element 
(such as p, body, h1) in an HTML page and applies certain attributes to it. For 
Page 4 of 109

example, if you create an element selector for the main heading in an HTML page 
with the color blue, the structure of the element selector looks like:

h1 {

color: blue;

In this exercise, you will create a new cascading style sheet and a few element 
selectors in it. 

1. If Dreamweaver is not open, launch it now. 

2. Choose File>New.

3. In the New Document dialog box, choose Blank Page. 

4. Choose CSS from the Page Type list and click the Create button.

01_DW_06.TIF

A new cascading style sheet is created.
Page 5 of 109

02_DW_06.TIF

5. Choose File>Save on the menu or press Command/Control­S to save the page. In 
the Save As dialog box, navigate to the CSS folder in the root of the Showcolate 
Web site and name the page as ‘master.css’.

The new cascading style sheet is saved with the name master.css. You will create all 
types of selectors in this style sheet. Ensure that while naming a style sheet, you have 
selected the Style Sheets (*.css) extension in the Save as type box just below the File 
name box.
Page 6 of 109

03_DW_06.TIF

6. Choose Window>CSS Styles or click CSS in the panels list to view the CSS panel.
Page 7 of 109

04_DW_06.TIF

You can see master.css in the CSS panel with no styles defined. The styles that you 
define will be displayed in the list. You can also open the CSS panel by using 
Shift+F11.
Page 8 of 109

05_DW_06.TIF

DREAMWEAVER FOUNDATIONS
CSS PANEL IN DEPTH
The CSS panel plays a significant role in creating and modifying styles. CSS styles are displayed 
in two modes ­ All mode and Current mode. The All mode displays external and embedded 
styles, but omits inline styles. The Current mode displays the style of the current selection, 
irrespective of the type of style – whether external, embedded or inline.
Page 9 of 109

The All mode has two panes ­ All Rules and Properties. 

­ All Rules pane: It lists all the created styles. 

­ Properties pane: It displays the properties of the selected style.

The Current mode has three panes ­ Summary for Selection pane, Rules pane, and Properties 
pane. 
­ Summary for Selection pane: It displays the properties and values applied to a selection. 

­ Rules pane: It displays either the rules attributed to the selection or the information of the 
selected property in the Summary for Selection pane. The two buttons at the top right of the 
Rules pane help you switch between these two options. 
­ Properties pane: It displays the properties of the selected rule.
When you select a rule, the properties and values of the rule are displayed in the Properties pane. 
Dreamweaver enables you to modify the properties of the rule or set new properties to the rule in 
the Properties pane itself. There are three ways in which you can view the properties and values in 
the Properties pane ­ Show category view, Show list view, and Show only set properties. You can 
choose any of the three views, but by default, you can see the Show only set properties option. 
Make your choice by clicking the appropriate button at the bottom left of the Properties pane. 
­ Show category view: It lists the properties and values of the selected rule into nine 
categories that are seen in the CSS Rule definition dialog box ­ Type, Background, Block, 
Border, Box, List, Positioning, Extensions, and Tables, Content, Quotes. In this view, you 
can add new properties in a category by clicking the + sign of the category.
­ Show list view: It lists all the CSS properties in the alphabetical order. Those properties that 
are attributed to the selected rule appear in blue.
­ Show only set properties: It displays only the list of attributed properties and an option to 
add a new property. By clicking the Add Property button at the bottom of the list, you can 
choose any of the new properties that are found in the drop­down list in an alphabetical 
order. This is a handy option because it lists only those properties that are set and enables 
you to create a new property easily. 
There are four icons at the bottom right of the Properties pane. 
­ Attach Style sheet: This icon is used to attach an external style sheet to the HTML page. 
You can browse and attach the saved style sheet to the HTML page using the import or link 
method.
­ New CSS Rule: This icon is used to create a new CSS rule. You can create different types of 
selectors, such as element selectors, class selectors, and pseudo selectors.
­ Edit Style...: This icon is used to edit an existing CSS rule. When you select a rule and click 
this icon, the CSS Rule definition dialog box is displayed. You can modify properties and 
Page 10 of 109

save changes.
­ Delete CSS Rule (or Property): This icon is used to delete an entire rule, or just a single 
property of the rule.         

7. Click the New CSS Rule icon at the bottom right of the Properties pane. 

06_DW_06.TIF

The New CSS Rule dialog box is displayed with three types of selectors: Class, Tag, 
and Advanced. 

07_DW_06.TIF
Page 11 of 109

8. In the New CSS Rule dialog box, click the Tag radio button. 

9. In the Tag field, type ‘body’ or select ‘body’ from the drop­down list.

10. In the Define in area, click ‘This document only’ radio button. 

08_DW_06.TIF

Note: If you want to create element selectors in


master.css, click This document only radio button. To
create them in a different style sheet, click the New
Style Sheet File radio button and select a style sheet
from the drop-down list.

Ensure that you select This document only radio


button throughout this exercise.

11. Click OK.

You can see a new element selector ‘body’ created in master.css. It defines the body of 
the document. Body includes contents such as images, text, colors, graphics etc. The 
properties and values of the selector are displayed within parentheses. Note that each 
property is separated by a semi colon. The ‘body’ selector is also displayed in the All 
mode in the CSS Panel. 
Page 12 of 109

09_DW_06.TIF

The CSS Rule definition for body dialog box is also displayed. In this dialog box, you 
can define the properties and values for the body selector.

10_DW_06.TIF

DREAMWEAVER FOUNDATIONS
Page 13 of 109

CSS RULE DEFINITION DIALOG BOX IN DEPTH


In Dreamweaver, the primary way of defining CSS rules is by using the CSS Rule definition 
dialog box. When you create a new selector, the CSS Rule definition dialog box for that selector is 
displayed, enabling you to set its properties and values. These properties are of eight kinds ­ 
Type, Background, Block, Box, Border, List, Positioning, and Extensions.
­ Type: To format text and set appearance of the text. Properties include font, size, style, line 
height, decoration, weight, variant, case, and color. Font sets the type of font. You can also 
edit the font list. Size sets the size of the font. If you use pixels for font size, you can prevent 
distortion of text. Style specifies the font style as normal or italic or oblique. Line height 
determines the height of the line containing text. Decoration sets a predefined text style – 
underline, overline, line­through, or blink. Weight applies boldness to the text. Variant sets 
the text with normal or small­caps. Case affects text in three ways – upper case, lower case, 
or title case (capitalizes the first letter of the each word).
­ Background: To set background color and add background images. You can set the 
background color by typing a color code or by selecting a color using the color picker. The 
background image can be set by typing the path or by clicking the Browse button and 
navigating to the image location. The repeat option determines how the image is tiled on the 
screen. No­repeat displays the image at the top left corner. If you choose repeat, the image 
tiles horizontally and vertically. Repeat­x makes the image tile horizontally and Repeat­y 
makes the image tile vertically. Attachment enables the image either to be fixed or to scroll 
with the page. Horizontal position allows the image to be set to the left, center, or right, and 
Vertical position sets the image to top, center, or bottom of the page.
­ Block: To define spacing and alignment settings. Word spacing specifies the spacing 
between words. Letter spacing sets the spacing between the letters of words or characters. 
Vertical alignment aligns the selected element vertically. Text align aligns text to left, right, 
center, or justifies it. Text indent specifies where text begins in a line. Whitespace deals with 
the extra spaces and tabs. Normal collapses all white space. Pre retains all white space. 
Nowrap wraps text only in case of a br tag. Display shows if an element is displayed. It also 
specifies how the element is displayed. If none is selected, no display will be available.  
­ Box: To specify the placement of elements, such as an image. Width and height options set 
the width and height of the selected element. Float determines to which side an element ­ 
such as text or table ­ will float around a selected element. Clear enables a layer to disappear 
on the selected side of an element – left, right, or both. Padding is the amount of space that 
separates the border and the element (say image). It completely covers the image – top, 
bottom, left, and right sides. Margin is the amount of space that separates the border of an 
element and another element. Margin also covers the content completely – top, bottom, left, 
and right sides. You can specify padding and margin values individually (left, right, top, and 
bottom) or select the check box Same for all. 
­ Border: To set the style, width, and color for the borders around the selected elements. You 
Page 14 of 109

can specify values individually (top, right, bottom, left) or select the check box Same for all. 
­ List: To specify the list settings. Type specifies the type of a list from the given options – 
disc, circle, square, decimal, lower­roman, upper­roman, lower­alpha, and upper­alpha. The 
Bullet list image can be set by typing the path or by browsing the image from the location. 
Position specifies the list position as inside or outside i.e., the list either wraps and indents or 
wraps to the left margin.
­ Positioning: To specify the position of the CSS elements. Type determines the position of 
the element as absolute, fixed, relative, and static. Absolute type enables the element stay 
stable on the page, irrespective of the positioning of the other elements. In fixed type, the 
element is positioned according to the window size. In relative type, the element position is 
based on the position of other elements on the page. In static type, the element is positioned 
as it appears in an HTML page. Width and height determine the width and height of the 
element. Visibility displays the element in three states: Inherit, visible, and hidden. If no 
visibility property is selected, the element shows the inherit property of the element’s parent. 
The visible option displays the element. The hidden option hides the element. Z­index shows 
the depth of an element. Elements with high Z­index appear above the elements with low z­
index. Overflow determines how the element should appear when the element exceeds the 
allotted space – visible, hidden, scroll, or auto. Placement specifies where the element can be 
positioned. Clip specifies the visible parts of an element.
­ Extensions: To give a page break and apply visual effects. Page break option sets a page 
break for printing before or after the element. You can select a page break option from the 
drop­down list. Cursor specifies the point type when you place the pointer over the element. 
Filter changes the appearance of the element when you select a filter effect from the drop­
down list.  

12. In the CSS Rule definition for body dialog box:

­ Click Type in the Category pane. In the Font drop­down list, click ‘Arial, 
Helvetica, sans­serif’ combination. In the Size text box, type ‘100’ and select ‘%’ 
from the adjacent drop­down list. In the Color text box, type ‘#666’ or select the 
color using the color picker.
Page 15 of 109

11_DW_06.TIF
­ Click Background in the Category pane. In the Background color text box, type 
‘#999’ or select the color using the color picker.

12_DW_06.TIF
­ In the Box pane, type ‘0’ in the top text boxes of the Padding and Margin areas. 
Select Same for all check boxes in both areas to apply the same value for right, 
bottom, and left positions.
Page 16 of 109

13_DW_06.TIF

13. Click OK.

All the properties and values attributed to the ‘body’ selector are displayed within 
parentheses.

14_DW_06.TIF

14. Click the New CSS Rule icon at the bottom right of the Properties pane. In the 
New CSS Rule dialog box, click the Tag radio button.

15. In the Tag field, type ‘h1’ or select ‘h1’ from the drop­down list. Click OK.
Page 17 of 109

15_DW_06.TIF

The CSS Rule definition for h1 dialog box is displayed. H1 defines the largest heading 
in the document.

16. In the CSS Rule definition for h1 dialog box:

­ Click Box in the Category pane. Type ‘0’ in the top text boxes of the Padding and 
Margin areas. Select Same for all check boxes in both areas to apply the same 
value for right, bottom, and left positions. Click OK.

16_DW_06.TIF

A new element selector ‘h1’ is created in master.css. The properties and values 
attributed to ‘h1’ are displayed within parentheses.
Page 18 of 109

17_DW_06.TIF

You are now creating different types of element selectors. You can modify their 
properties and values in the CSS Rule definition box.

17. Repeat steps 14, 15 and 16 to create element selectors h2, h3, and h4 with the 
same padding and margin values.

18_DW_06.TIF

H2, h3, and h4 define other headings subsequent to h1.
Page 19 of 109

18. Click the New CSS Rule icon and type or select ‘a’ in the Tag field. Click OK.

19_DW_06.TIF

The element selector ‘a’ defines an anchor which is used to create a link to another 
document or to create a bookmark inside the same document.

19. In the ‘CSS Rule definition for a’ dialog box:

­ Click Type in the Category pane. Type ‘#999’ in the color text box or select the 
color using the color picker. Select the none check box in the Decoration area.

20_DW_06.TIF

20. Click OK.

The element selector ‘a’ is created in master.css.
Page 20 of 109

21_DW_06.TIF

21. Click the New CSS Rule icon and type or select ‘li’ in the Tag field.

22_DW_06.TIF

The element selector ‘li’ defines a list in the document.

22. In the CSS Rule definition for li dialog box:

­ Click List in the Category pane. Type or select ‘none’ in the Type field. 
Page 21 of 109

23_DW_06.TIF

23. Click OK.

DREAMWEAVER FOUNDATIONS
USING THE LIST PROPERTIES
List Properties allow you to place the list­item marker. You can also change between different list­
item markers, or set an image as the list­item marker.
Internet Explorer, Firefox, and Netscape are the browsers that support the CSS List Properties.
Some of the list properties are:
­ List­style property: Used for setting all the properties for a list in one declaration. You can 
control the appearance of ordered and unordered lists in one declaration.
­ List­style­image: Replaces the list­item marker with an image. You can use an image for the 
bullet of unordered list
­ List­style­position: Places the list­item marker in the list. You can control the position of 
ordered and unordered lists
­ List­style­type: Sets the type of the list­item marker. You can control the type of bullet of 
the ordered and unordered lists.

24. Repeat steps 21 and 22 to create element selector ‘ol’.

The element selectors ‘ol’ defines an ‘ordered list’ in the document.
Page 22 of 109

25. Repeat steps 14, 15, and 16 to create element selectors ‘ul’ and ‘form’ with the 
same padding and margin values.

‘ul’ defines an unordered list in the document. Form contains text fields, check boxes 
and certain other things to enable a user to send in his data.

24_DW_06.TIF

25_DW_06.TIF

In this exercise, you have created different element selectors in master.css, each of 
which has its own function. You can create many such selectors in this way.

DREAMWEAVER FOUNDATIONS
Page 23 of 109

GROUPING SELECTORS
When two or more selectors have the same properties and values, they can be grouped just to 
avoid repetition and to save time and space. All types of selectors (element selectors, class 
selectors, and pseudo selectors) can be grouped. In the first exercise, ‘Create Element Selectors’, 
you have created four separate element selectors: h1, h2, h3, and h4 with the same properties and 
values as shown below: 
h1 { margin: 0px;
padding: 0px;
}
h2 { margin: 0px;
padding: 0px;
}
h3 { margin: 0px;
padding: 0px;
}
h4 { margin: 0px;
padding: 0px;
}   
However, instead of defining them separately, you can group them as follows:
h1, h2, h3, h4 { margin: 0px;
                padding: 0px; }
To modify the properties and values of these selectors, you do not have to modify them four 
times. When grouped, they can be modified all at once.

Create Class Selectors

A class selector is used when the same style is to be applied to many elements for 
more than one time, that is, if you apply a class selector to one or more elements, the 
same style is applied to the elements every time they appear in the Web page. Unlike 
an element selector, which is used only once for one element, a class selector is used 
to repeat the same style throughout the page. 

A class selector can also be applied to multiple Web pages by using an external style 
sheet. For example, if you want the main header to take the same style throughout the 
Web site, you do not need to change the header element in every page. You can just 
Page 24 of 109

define a class for the header, and all the Web pages will take the same header style. 
Class selectors are key to the effects brought out by cascading style sheets. 

A class selector always starts with a dot.  For example,

.heading

font­size: 70%

color: #670

In this exercise, you will create a class selector.

1. Click the New CSS Rule icon at the bottom right of the Properties pane.

26_DW_06.TIF

2. In the New CSS Rule dialog box, click the Class radio button. In the Name text 
box, type ‘clear’ and click OK.
Page 25 of 109

27_DW_06.TIF

Note: Dreamweaver adds a dot (.) before the name of a


class selector whether or not you specify it in the Name
box of the New CSS Rule dialog box.

3. In the CSS Rule definition for .clear dialog box:

­ Click Box in the Category pane. In the Box pane, select ‘none’ from the Clear 
drop­down list.

28_DW_06.TIF
­ Click Type in the Category pane. Type ‘0’ in the line height text box and select 
‘multiple’ from the adjacent drop­down list. In the Size text box, type ‘.01’ and 
select ‘ems’ from the adjacent drop­down list. 
Page 26 of 109

29_DW_06.TIF

4. Click OK.

The class selector ‘.clear’ is created in master.css. It specifies the sides of an element 
thereby not allowing other floating elements (floating elements are images or text 
elements that appear in other elements).

30_DW_06.TIF

Create ID Selectors

Id selectors are assigned to elements individually in an HTML page. Unlike a class 
selector, which can be used for more than one element any number of times, an ID 
selector is used for a single element and only for once in a Web page. An ID selector 
always starts with a pound (#) sign. For example, 
Page 27 of 109

#header {

float: left; 

width: 800px; 

background: #A84726; 

In this exercise, you will create ID selectors.

1. Click the New CSS Rule icon at the bottom right of the Properties pane.

2. In the New CSS Rule dialog box, click the Advanced radio button. In the Selector 
text box, type ‘#wrapper’ and click OK.

31_DW_06.TIF

Note: Dreamweaver does not add the pound (#) sign


before the name of an ID selector (Unlike in class
selectors, where it adds the dot (.) by default). So make
sure you type the pound (#) sign before the name of an
ID selector in the Name box of the New CSS Rule
dialog box.

3. In the CSS Rule definition for #wrapper dialog box: 

­ Click Box in the Category pane. Deselect the Same for all check box in the 
Margin area. Type ‘0’ in Top and Bottom text boxes and select ‘auto’ in the Right 
and Left text boxes. Type ‘850’ in the Width text box and select ‘pixels’ from the 
adjacent drop­down list.
Page 28 of 109

32_DW_06.TIF
­ In the Background pane, click the Browse button of the Background image text 
box. Navigate to the ‘images’ folder of the Showcolate root folder and select 
‘shadow.jpg’. Alternatively, type “../images/shadow.jpg” in the Background image 
text box.

33_DW_06.TIF
Page 29 of 109

34_DW_06.TIF
­ In the Positioning pane, select ‘relative’ from the Type drop­down list.

35_DW_06.TIF
­ Click OK.
Page 30 of 109

An ID selector ‘#wrapper’ is created in master.css. Wrapper covers all the elements in 
the document. It includes a background image which gives a shadow effect to the left 
and right sides of the document.

36_DW_06.TIF

DREAMWEAVER FOUNDATIONS
UNDERSTANDING THE CSS BOX MODEL
The term 'box model' is used in creating CSS­based layouts and design. Any HTML element can 
be considered a box.
A box model is a specification, that is, it specifies how a box is related to its attributes. If a box is 
said to be 50 pixels wide and 100 pixels long, it is inferred that the browser should draw a box 50 
pixels wide and 100 pixels long. There are more attributes that can be added like background 
color, padding, margins, borders etc.
A box is made up of four parts: Margin, Border, Padding, and Content. 
Margin: It is the outside part. It is invisible. It has no background color. Margin does not obstruct 
the elements within it. 
Border: It lies inside the margin. It specifies the visible portion of the element. 

Padding: It lies inside the border. It is the area between the content area of the box and its border.

Content: It lies inside the padding. If you define a width and height for your box using CSS, you 
Page 31 of 109

are defining the content area. Padding, border and margin must be added to the content to 
calculate the total space occupied by the box. 
Consider the example:
box {
width: 200px;
border: 10px solid #99c;
padding: 20px;
margin: 20px;
}
If you apply the above style, you get a pale blue area of 240 pixels comprising of 200 pixels of 
content and 20 pixels padding. The border is 10 pixels wide on either side. The margin is 20 
pixels on either side. This makes the total width of the box 300 pixels.

4. Repeat steps 1 and 2 to create an ID selector ‘#wrapperContainer’. In the CSS 
Rule definition for #wrapperContainer dialog box:

­ Click Box in the Category pane. Deselect the Same for all check box in the 
Margin area and type ‘25’ in the Left text box. 

­ Click OK.
Page 32 of 109

37_DW_06.TIF

An ID selector ‘#wrapperContainer’ is created in master.css. WrapperContainer 
enables the text to start after the margin.

38_DW_06.TIF

DREAMWEAVER FOUNDATIONS
FLOATING CONTENT
The Float property is used to float images. A float is basically a way of using your browser to 
position something relative to the content which follows it. Floats can be used both with images 
and text. This type of usage is referred to as text wrapping. Fundamentally, floats are used for 
placing images within the content.
Page 33 of 109

Float property provides high level of positioning control for selected elements within the normal 
page flow. Unlike positioned elements using absolute, relative, or fixed values, floats exhibit a 
close integration with the content of their parent container. A floated image allows text wrap. The 
float property conserves space by allowing adjacent elements to flow around the floated image.
In effecting floating content, the floating elements are used whose rendering boxes are shifted to 
the left or right side of the current. Content boxes that follow are rendered along the side of the 
floated element ­ right side of the elements float to the left, and the left side of the elements float 
to the right. This property specifies an element to float to the left, right, or specifies no float at 
all.
Consider the following example:
img.test { float: left }
<img src=”image.gif” mce_src=”image.gif” style=”float: left”>Type some text.
The following are the possible floating values that are used:
­ Inherit: Sets the value of this property to that of the parent

­ None: Element box will not float

­ Left: Element box floats to the left resulting the content flowing around it to the right.

­ Right: Element box floats to the right resulting the content flowing around it to the left.

5. Repeat steps 1 and 2 to create an ID selector ‘#header’. In the CSS Rule 
definition for #header dialog box: 

­ Click Background in the Category pane and type ‘#A84726’ in the Background 
color text box.
Page 34 of 109

39_DW_06.TIF
­ Click Box in the Category pane. Select ‘left’ from the Float drop­down list. Type 
‘800’ in the Width text box and select ‘pixels’ from the adjacent drop­down list.

40_DW_06.TIF
­ In the Border pane, deselect the three Same for all check boxes in the Style, 
Width, and Color areas. Select ‘solid’ from the Bottom drop­down list in the 
Page 35 of 109

Style area. Type ‘3’ in the Bottom text box in the Width area, and select ‘pixels’ 
from the adjacent drop­down list. Type ‘#3B1814’ in the Bottom text box in the 
color area. 

41_DW_06.TIF
­ Click OK.

An ID selector ‘#header’ is created in master.css. Header is located at the top of the 
document which includes links to other pages of the Showcolate Web site.
Page 36 of 109

42_DW_06.TIF

DREAMWEAVER FOUNDATIONS
SCROLLING CONTENT
The scrolling content property enables you to create a box of scrollable content in your page 
without using a frame. Essentially, it enables you to manage content if the content of an element 
overflows its area. This provides you with the same visual and usability effect that a frame offers. 
Moreover, it is search engine friendly.
Consider the following example:
<div style="overflow: auto; width: 100px; height: 60px; border: solid 1px red ;"> Type text</div>.
To create a scrolling effect for a div containing text, the <div> can be set to a certain height and 
width.
Normally, the following properties are applied in creating scrollable areas:
­ Overflow: auto: It inserts a scrollbar ­ horizontal, vertical or both if required. It is the most 
preferred property.
­ Overflow: visible: It enables the block to expand to view the content.

­ Overflow: hidden: Allows the block to only show content that fits in the block. The 
remaining content is clipped and not hidden. Scrollbars are absent.

6. Repeat steps 1 and 2 to create an ID selector ‘#logo’. In the CSS Rule definition 
for #logo dialog box:
Page 37 of 109

­ Click Box in the Category pane. Select ‘right’ from the Float drop­down list. Type 
‘228’ in the Width text box and select ‘pixels’ from the adjacent drop­down list. 
Deselect the Same for all check box in the Margin area. Type values 18, 12, 0, and 
12 in the Top, Right, Bottom, and Left text boxes respectively, and select ‘pixels’ 
from the adjacent drop­down lists.

43_DW_06.TIF
­ Click OK.

An ID selector ‘#logo’ is created in master.css. It is the company logo displayed at the 
top right of the header.
Page 38 of 109

44_DW_06.TIF

7. Repeat steps 1 and 2 to create an ID selector ‘#logoAnim’. In the CSS Rule 
definition for #logoAnim dialog box:

­ Click Box in the Category pane. Select ‘right’ from the Float drop­down list. Type 
‘225’ in the Width text box and select ‘pixels’ from the adjacent drop­down list. 
Deselect the Same for all check box in the Margin area. Type ‘12’ in the Right 
text box and select ‘pixels’ from the adjacent drop­down list.
­ Click OK.
Page 39 of 109

45_DW_06.TIF

46_DW_06.TIF

An ID selector ‘#logoAnim’ is created in master.css. It is the animation of the 
company logo at the top right of the header. 

DREAMWEAVER FOUNDATIONS
WORKING WITH SELECTORS BASED ON CONTEXT
Selectors are the names that you give to your different styles. In the style definition, you define 
how each selector should work. In the body section of your page, you refer to these selectors to 
activate the styles.
Consider the following example:
<HTML>
<HEAD>
<style type="text/css">
I. Head {color:blue; font­size:10px; font­family:verdana; text­decoration:underline}
</style>
</HEAD>
<BODY>
<b> This is normal bold</b><br>
<b class="headline"> This is headline style bold</b>
</BODY>
</HTML>
Page 40 of 109

The resultant text will appear as This is normal bold.


When a tag is surrounded by another tag such as <tr> <td> <tr>, assume that the two tags are 
nested. In this case, the outer tag <tr>, is the parent and the inner tag <td>, is the child. The child 
tag and the subsequent child tags are known as descendents. Two tags in the same parent tag are 
called siblings and the two tags next to each other are adjacent siblings.
A Descendent tag allows you to specify the style of a selector based on its position in the HTML 
code with respect to others. One such selector is the descendant selector. Descendant selectors are 
contextual selectors that specify one tag within another. For example, a descendant selector 
permits you to give content within a table a different style than the content outside a table.
Adjacent sibling selects an element that follows the other.
In addition, a universal tag is also used to select an element. This selector is used to skip one or 
more generations of tags.

8. Repeat steps 1 and 2 to create an ID selector ‘#uniNav’. In the CSS Rule 
definition for #uniNav dialog box:

­ Click Type in the Category pane. Type ‘.7’ in the Size text box, and select ‘ems’ 
from the adjacent drop­down list. Select ‘bold’ from the Weight drop­down list.

47_DW_06.TIF
­ In the Box pane, select ‘left’ from the Float drop­down list. Type ‘150’ in the 
Width text box and select ‘pixels’ from the adjacent drop­down list. Deselect the 
Page 41 of 109

Same for all check box in the Padding area. Type ‘5’ in Left text box and select 
‘pixels’ from the adjacent drop­down list. 

48_DW_06.TIF
­ Click OK.

49_DW_06.TIF

An ID selector ‘#uniNav’ is created in master.css. It specifies the links portion at the 
top left of the header.   

9. Repeat steps 1 and 2 to create an ID selector ‘#uniNav ul’. In the CSS Rule 
definition for #uniNav ul dialog box:
Page 42 of 109

­ Click Box in the Category pane. In the Box pane, deselect the Same for all check 
box in the Margin area. Type values 7, 0, 5, and 20 in the Top, Right, Bottom, and 
Left text boxes respectively, and select ‘pixels’ from the adjacent drop­down lists.

50_DW_06.TIF
­ Click OK.

51_DW_06.TIF

An ID selector ‘#uniNav ul’ is created in master.css. It is the unordered list of the links 
in the uniNav portion of the header.

10. Repeat steps 1 and 2 to create an ID selector ‘#uniNav ul li’. In the CSS Rule 
Definition for uniNav ul li dialog box, click OK.
Page 43 of 109

52_DW_06.TIF

An ID selector ‘#uniNav ul li’ is created in master.css.

11. Repeat steps 1 and 2 to create an ID selector ‘#uniNav ul a’. In the CSS Rule 
definition for #uniNav ul a dialog box:

­ Click Type in the Category pane. Type ‘#FFF’ in the Color text box.

53_DW_06.TIF
­ Click OK.
Page 44 of 109

54_DW_06.TIF

An ID selector ‘#uniNav ul a’ is created in master.css. It specifies links to the ‘uniNav 
ul li’ in the header.

12. Repeat steps 1 and 2 to create an ID selector ‘#tagWrap’. In the CSS Rule 
definition for #tagWrap dialog box:  

­ Click Box in the Category pane. In the Box pane, select ‘left’ in the Float drop­
down list. Type ‘800’ in the Width text box and select ‘pixels’ from the adjacent 
drop­down list.

55_DW_06.TIF
­ Click OK.
Page 45 of 109

56_DW_06.TIF

An ID selector ‘#tagWrap’ is created in master.css. It includes all the body part of the 
document excluding the header.

13. Repeat steps 1 and 2 to create an ID selector ‘#tagline’. In the CSS Rule 
definition for #tagline dialog box:

­ In the Box pane, select ‘left’ from the Float drop­down list. Type values 400 and 
269 in the Width and Height text boxes respectively. Select ‘pixels’ from the 
adjacent drop­down lists.

57_DW_06.TIF
­ In the Background pane, click the Browse button of the Background image text 
box. Navigate to the ‘images’ folder of the Showcolate root folder and select 
‘tagline.jpg’. Alternatively, type “../images/tagline.jpg” in the Background image 
Page 46 of 109

text box. Select ‘no­repeat’ from the Repeat drop­down list. Select ‘left’ from the 
Horizontal position drop­down list and ‘top’ from the Vertical position drop­
down list. 

58_DW_06.TIF

59_DW_06.TIF
­ Click OK.
Page 47 of 109

60_DW_06.TIF

An ID selector ‘#tagline’ is created in master.css. It covers the left side image below 
the header. 

DREAMWEAVER FOUNDATIONS
EMBEDDING BACKGROUND IMAGES USING CSS DEFINITIONS
CSS allows you to repeat the background image vertically, horizontally, or appear just for once. To 
place a background image using css, the code in the style tag under the property ‘body’ will be as 
follows:
background­image; url: image location;
background­repeat: type of repeat element
background­position: type of position
background­attachment: type of attachment
Place the url of the image where the "image location" text appears.
Background image can be repeated in different ways. Replace the "type of repeat element" with 
the following settings:
­ Repeat: Repeats the image vertically and horizontally

­ No­repeat: Will not repeat the image

­ Repeat­x: Repeats the image horizontally

­ Repeat­y: repeats the image vertically
You can position your background image using three different ways. This can be done by
­ Keywords: Use words like Top, Center, Left, Right, Bottom, etc
Page 48 of 109

­ Percentages: Use percentage values

­ Pixel Values: Use pixel values
There are two different background attachments:"fixed" and "scroll". ‘Fixed’ will make the 
background stay in place while the rest of the document scrolls over it. ‘Scroll’ will have the 
document scroll with the document, and it will repeat itself. In the above code, “background­
image; url: image location”, replace "type of attachment" with ‘fixed; or scroll’.

14. Repeat steps 1 and 2 to create an ID selector ‘#styleImg’. In the CSS Rule 
definition for #styleImg dialog box:

­ Click Box in the Category pane. In the Box pane, select ‘right’ from the Float 
drop­down list. Type ‘400’ in the Width text box, and select ‘pixels’ from the 
adjacent drop­down list.

61_DW_06.TIF
­ Click OK.
Page 49 of 109

62_DW_06.TIF

An ID selector ‘#styleImg’ is created in master.css. It covers the right side image 
below the header.

15. Repeat steps 1 and 2 to create an ID selector ‘#video’. In the CSS Rule definition 
for #video dialog box:

­ Click Positioning in the Category pane. In the Positioning pane, select ‘absolute’ 
from the Type drop­down box. Type ‘340’ in the Width text box and select ‘pixels’ 
from the adjacent drop­down list.

63_DW_06.TIF
­ In the Placement area, type values 335 and 215 in the Top and Left text boxes 
respectively. Select ‘pixels’ from the adjacent drop­down lists.
Page 50 of 109

64_DW_06.TIF
­ Click OK.

65_DW_06.TIF

An ID selector ‘#video’ is created in master.css. It covers showcolate video image in 
the images portion below the header.

16. Repeat steps 1 and 2 to create an ID selector ‘#content­group’. In the CSS Rule 
definition for #content­group dialog box:

­ Click Type in the Category pane. Type ‘.75’ in the Size text box, and select ‘ems’ 
from the adjacent drop­down list.
Page 51 of 109

66_DW_06.TIF
­ In the Background pane, type ‘#FFF’ in the Background color text box.

67_DW_06.TIF
­ In the Box pane, select ‘left’ from the Float drop­down list. Type ‘800’ in the 
Width text box and select ‘pixels’ from the adjacent drop­down list. In the 
Padding area, deselect the Same for all check box. Type ‘15’ in Bottom text box 
Page 52 of 109

and select ‘pixels’ from the adjacent drop­down list.

68_DW_06.TIF

­ In the Border pane, deselect the three Same for all check boxes in the Style, 
Width, and Color areas. Select ‘solid’ from the Top drop­down list in the Style 
area. Type ‘3’ in the Top text box in the Width area and select ‘pixels’ from the 
adjacent drop­down list. In the Color area, type ‘#3B1814’ in the Top text box. 
Page 53 of 109

69_DW_06.TIF
­ Click OK.

70_DW_06.TIF

An ID selector ‘#content­group’ is created in master.css. It includes the whole content 
area above the footer.

17. Repeat steps 1 and 2 to create an ID selector ‘#content­main’. In the CSS Rule 
definition for #content­main dialog box:
Page 54 of 109

­ Click Box in the Category pane. In the Box pane, select ‘left’ from the Float drop­
down list. Type ‘530’ in the Width text box and select ‘pixels’ from the adjacent 
drop­down list. In the Padding area, deselect the Same for allcheck box. Type 
values 15, 0, 10, and 25 in Top, Right, Bottom, and Left text boxes respectively 
and select ‘pixels’ from the adjacent drop­down lists.

71_DW_06.TIF
­ Click OK.

72_DW_06.TIF

An ID selector ‘#content­main’ is created in master.css. It includes the main content of 
Page 55 of 109

the document. When you attach the print.css to see the document in a print, only the 
main content will appear.

18. Repeat steps 1 and 2 to create an ID selector ‘#content­main p’. In the CSS Rule 
definition for #content­main p dialog box:

­ Click Type in the Category pane. In the Type pane, type ‘1.75’ in the Line height 
text box and select ‘ems’ from the adjacent drop­down list.

73_DW_06.TIF
­ In the Box pane, deselect the Same for all check box in the Margin area. Type 
‘13’ in the Top text box and select ‘pixels’ from the adjacent drop­down list.
Page 56 of 109

74_DW_06.TIF
­ Click OK.

75_DW_06.TIF

An ID selector ‘#content­main p’ is created in master.css. It specifies the paragraph 
style to the ‘content main’.

19. Repeat steps 1 and 2 to create an ID selector ‘#content­main h1,  #content­main 
h2’ by grouping two ID selectors. In the CSS Rule definition for #content­main 
h1,  #content­main h2 dialog box:

­ Click Type in the Category pane. Type ‘2.15’ in the Size text box, and select ‘ems’ 
from the adjacent drop­down list. Select ‘lighter’ from the Weight drop­down list. 
In the Color text box, type ‘#3B1814’.
Page 57 of 109

76_DW_06.TIF
­ Click OK.

77_DW_06.TIF

An ID selector #content­main h1, #content­main h2’ is created in master.css. It 
specifies the headings of the ‘content main’.

20. Repeat steps 1 and 2 to create an ID selector ‘#content­main h1’. In the CSS Rule 
definition for #content­main h1 dialog box:

­ Click Box in the Category pane. In the Margin area, deselect the Same for all 
check box. Type ‘5’ in the Bottom text box and select ‘pixels’ from the adjacent 
drop­down box.
Page 58 of 109

78_DW_06.TIF
­ Click OK.

79_DW_06.TIF

An ID selector ‘#content­main h1’ is created in master.css. It specifies the first 
heading of the content­main.

21. Repeat steps 1 and 2 to create an ID selector ‘#content­main h2’. In the CSS Rule 
definition for #content­main h2 dialog box:

­ Click Type in the Category pane. Type ‘1.5’ in the Size text box, and select ‘ems’ 
from the adjacent drop­down list. Select ‘lighter’ from the Weight drop­down list. 
In the Color text box, type ‘#A84726’.
Page 59 of 109

80_DW_06.TIF
­ Click Box in the Category pane. In the Margin area, deselect the Same for all 
check box. Type values 7, 0, ­12, and 0 in Top, Right, Bottom, and Left text boxes 
respectively and select ‘pixels’ from the adjacent drop­down lists.

81_DW_06.TIF
­ Click OK.
Page 60 of 109

82_DW_06.TIF

An ID selector ‘#content­main h2’ is created in master.css. It specifies the second 
heading of the ‘content­main’.

22. Repeat steps 1 and 2 to create an ID selector ‘#content­main h3’. In the CSS Rule 
definition for #content­main h3 dialog box:

­ Click Type in the Category pane. Type ‘1.2’ in the Size text box, and select ‘ems’ 
from the adjacent drop­down list. Select ‘lighter’ from the Weight drop­down list. 
In the Color text box, type ‘#A84726’.

83_DW_06.TIF
Page 61 of 109

­ Click OK.

84_DW_06.TIF

An ID selector ‘#content­main h3’ is created in master.css. It specifies the third 
heading of the ‘content­main’.

23. Repeat steps 1 and 2 to create an ID selector ‘#content­main a’. In the CSS Rule 
definition for #content­main a dialog box:

­ Click Type in the Category pane. In the Decoration area, select the underline 
check box. 
Page 62 of 109

85_DW_06.TIF
­ Click OK.

86_DW_06.TIF

An ID selector ‘#content­main a’ is created in master.css.  It specifies a link to another 
web page from ‘content­main’.

24. Repeat steps 1 and 2 to create an ID selector ‘#content­main .contactCont p’. In 
the CSS Rule definition for #content­main .contactCont p dialog box:

­ Click Box in the Category pane. In the Margin area, deselect the Same for all 
check box. Type values 1, 0, ­4, and 20 in Top, Right, Bottom, and Left text boxes 
Page 63 of 109

respectively and select ‘pixels’ from the adjacent drop­down lists.

87_DW_06.TIF
­ Click OK.

An ID selector ‘#content­main .contactCont p’ is created in master.css. 

88_DW_06.TIF

Note that, a class selector ‘contactCont’ is created here within the ID selector 
‘content­main’ and the paragraph properties are defined. In this way, you can create a 
class selector within an id selector.

25. Repeat steps 1 and 2 to create an ID selector ‘p#mission’. In the CSS Rule 
definition for p#mission dialog box:
Page 64 of 109

­ Click Type in the Category pane. In the Type pane, select ‘italic’ from the Style 
drop­down list. Select ‘bold’ from the Weight drop­down list. Select ‘normal’ from 
the Line height drop­down list.

89_DW_06.TIF
­ In the Box pane, deselect the Same for all check box in the Margin area. Type 
‘13’ in the Top text box and select ‘pixels’ from the adjacent drop­down list.
Page 65 of 109

90_DW_06.TIF
­ Click OK.

91_DW_06.TIF

An ID selector ‘p#mission’ is created in master.css. It specifies the paragraph style to 
the ‘mission statement’ in content­main.

26. Repeat steps 1 and 2 to create an ID selector ‘#content­side’. In the CSS Rule 
definition for #content­side dialog box:

­ Click Box in the Category pane. In the Box pane, select ‘right’ from the Float 
drop­down list. Type ‘240’ in the Width text box and select ‘pixels’ from the 
adjacent drop­down list.
Page 66 of 109

92_DW_06.TIF
­ Click OK. 

93_DW_06.TIF

An ID selector ‘#content­side’ is created in master.css. It includes the side content to 
the right side of the document besides the content­main.

27. Repeat steps 1 and 2 to create an ID selector ‘#content­sideCont’. In the CSS 
Rule definition for #content­sideCont dialog box:

­ Click Type in the Category pane. Type ‘1’ in the Size text box and select ‘ems’ 
from the adjacent drop­down list.
Page 67 of 109

94_DW_06.TIF
­ In the Background pane, select ‘paper.gif’ by clicking the Browse button or type 
“../images/paper.gif” in the Background image text box. Select ‘no­repeat’ from 
the Repeat drop­down list. Select ‘left’ from the Horizontal position drop­down 
list and ‘top’ from the Vertical position drop­down list.

95_DW_06.TIF
Page 68 of 109

96_DW_06.TIF
­ Click Box in the Category pane. In the Box pane, type values 160 and 205 in the 
Width and Height text boxes respectively. Select ‘pixels’ from the adjacent drop­
down lists. In the Padding and Margin areas, deselect the Same for all check 
boxes. In the Padding area, type values 30, 25, 5, and 20 in Top, Right, Bottom, 
and Left text boxes respectively. In the Margin area, type values 45, 0, 0, and 15 in 
Top, Right, Bottom, and Left text boxes respectively. Select ‘pixels’ from the 
adjacent drop­down lists.
Page 69 of 109

97_DW_06.TIF
­ Click OK.

98_DW_06.TIF
Page 70 of 109

An ID selector ‘#content­sideCont’ is created in master.css. It covers the side content 
portion to the right side of the document besides the content­main.

28. Repeat steps 1 and 2 to create an ID selector ‘#content­sideCont p’. In the CSS 
Rule definition for #content­sideCont p dialog box:

­ Click Type in the Category pane. Type ‘1.1’ in the Size text box and select ‘ems’ 
from the adjacent drop­down list. Type ‘#353535’ in the Color text box.

99_DW_06.TIF
­ Click Box in the Category pane. In the Padding area, deselect the Same for all 
check box. Type ‘­8’ in the Bottom text box.
Page 71 of 109

100_DW_06.TIF
­ Click OK.

101_DW_06.TIF

An ID selector ‘#content­sideCont p’ is created in master.css. It specifies the 
paragraph style to the content­sideCont.

29. Repeat steps 1 and 2 to create an ID selector ‘#content­sideCont .author p’. In 
Page 72 of 109

the CSS Rule definition for #content­sideCont .author p dialog box:

­ Click Type in the Category pane. Select ‘normal’ from the Line height drop­
down list.

102_DW_06.TIF
­ Click Box in the Category pane. In the Margin area, deselect the Same for all 
check box. Type values 1, 0, ­52, and 0 in Top, Right, Bottom, and Left text boxes 
respectively and select ‘pixels’ from the adjacent drop­down lists.
Page 73 of 109

103_DW_06.TIF
­ Click OK.

104_DW_06.TIF

An ID selector ‘#content­sideCont .author p’ is created in master.css. Note that, a class 
selector ‘author’ is created within the ID selector ‘content­sideCont’ and the 
paragraph properties are defined. It specifies a paragraph style to the name of the 
author in the content­sideCont.

30. Repeat steps 1 and 2 to create an ID selector ‘#footer’. In the CSS Rule definition 
Page 74 of 109

for #footer dialog box:

­ Click Type in the Category pane. Type ‘0.7’ in the Size text box, and select ‘ems’ 
from the adjacent drop­down list. Type ‘#FFF’ in the Color text box.

105_DW_06.TIF
­ In the Background pane, type ‘#A84726’ in the Color text box. 

106_DW_06.TIF
Page 75 of 109

­ In the Box pane, select ‘left’ from the Float drop­down list. Type ‘800’ in the 
Width text box and select ‘pixels’ from the adjacent drop­down list. In the 
Padding area, deselect the Same for all check box. Type values 8, 0, 25, and 0 in 
Top, Right, Bottom, and Left text boxes respectively and select ‘pixels’ from the 
adjacent drop­down lists.

107_DW_06.TIF
­ Click OK.
Page 76 of 109

108_DW_06.TIF

An ID selector ‘#footer’ is created in master.css. Footer is located at the bottom of the 
document which includes contact information and other links.

31. Repeat steps 1 and 2 to create an ID selector ‘#footer p’. In the CSS Rule 
definition for #footer p dialog box:

­ Click Box in the Category pane. In the Padding and Margin areas, deselect the 
Same for all check boxes. In the Padding area, type values 15, 0, 5, and 25 in Top, 
Right, Bottom, and Left text boxes respectively. In the Margin area, type values 
­10, 0, ­21, and 0 in Top, Right, Bottom, and Left text boxes respectively. Select 
‘pixels’ from the adjacent drop­down lists.
Page 77 of 109

109_DW_06.TIF

110_DW_06.TIF
Page 78 of 109

An ID selector ‘#footer p’ is created in master.css. It specifies the paragraph style to 
the footer content.

32. Repeat steps 1 and 2 to create an ID selector ‘#footer p .author’. In the CSS Rule 
definition for #footer p .author dialog box:

­ Click Box in the Category pane. In the Margin area, deselect the Same for all 
check box. Type ‘10’ in the Top text box and select ‘pixels’ from the adjacent drop­
down list.
­ Click OK.
An ID selector ‘#footer p .author’ is created in master.css. Note that a class selector 
‘author’ is created within the ID selector ‘footer p’.

111_DW_06.TIF

33. Repeat steps 1 and 2 to create an ID selector ‘#footer a’. In the CSS Rule 
definition for #footer a dialog box:

­ Click Type in the Category pane. Select the underline check box in the 
Decoration area. Type ‘#FFF’ in the Color text box.

­ Click OK.
Page 79 of 109

112_DW_06.TIF

An ID selector ‘#footer a’ is created in master.css. It specifies a link to another web 
page from ‘footer’.

34. Repeat steps 1 and 2 to create an ID selector ‘#containerBot’. In the CSS Rule 
definition for #containerBot dialog box:

­ In the Background pane, select ‘shadow­bottom.jpg’ by clicking the Browse 
button or type “../images/shadow­bottom.jpg” in the Background image text box. 
Select ‘no­repeat’ from the Repeat drop­down list. Select ‘left’ from the 
Horizontal position drop­down list and ‘bottom’ from the Vertical position drop­
down list.
­ In the Box pane, type values 850 and 30 in the Width and Height text boxes 
respectively. Select ‘pixels’ from the adjacent drop­down lists. In the Margin area, 
deselect the Same for all check box. Type 0, auto, 0, and auto in Top, Right, 
Bottom, and Left text boxes respectively.

­ Click OK.
Page 80 of 109

113_DW_06.TIF

An ID selector ‘#containerBot’ is created in master.css. ContainerBot specifies a 
shadow effect to the bottom of the document.

35. Repeat steps 1 and 2 to create an ID selector #home, #homelink a, #about, 
#aboutlink a, #products, #productslink a, #faq, #faqlink a, #franchisee, 
#franchiseelink a, #locations, #locationslink a, #contact, #contactlink a, #login, 
#loginlink a by grouping several ID selectors. In the CSS Rule definition dialog 
box:

­ In the Type pane, type ‘#E1957B’ in the Color text box.

­ Click OK.

114_DW_06.TIF
Page 81 of 109

This is for applying a color to the links when they are clicked. Here, when you are 
creating #home, #homelink a, the color of the link will be #E1957B. These links are 
created for the uniNav list in the header portion.

36. Repeat steps 1 and 2 to create an ID selector ‘#faq #content­main p’. In the CSS 
Rule definition for #faq #content­main p dialog box:

­ Type Box in the Category pane. In the Margin area, deselect the Same for all 
check box. Type ‘21’ in the Left text box and select ‘pixels’ from the adjacent 
drop­down list.
­ Click OK.

115_DW_06.TIF

An ID selector ‘#faq #content­main p’ is created in master.css. It specifies the 
paragraph style to the ‘faq content­main’.

Create Pseudo­Class Selectors

Class selectors and id selectors are based on elements within the document tree. 
Pseudo­class selectors are used where no CSS element is available. For example, a 
pseudo­class selector can represent the state of a hyperlink displaying certain states 
like ‘active’ and ‘visited’. A pseudo­class selector  simply refers to an element in a 
certain state. A pseudo­class selector always begins with a colon (:).

The four pseudo­class selectors are:
­ a: link: Refers to a hyperlink that is not visited

­ a: visited: Refers to a hyperlink that is visited

­ a: hover: Refers to a hyperlink when the mouse pointer is hovering over the 
hyperlink
­ a: active: Refers to an active hyperlink

In this exercise, you will create pseudo­class selectors.
Page 82 of 109

1. Click the New CSS Rule icon at the bottom right of the Properties pane.

2. In the New CSS Rule dialog box, click the Advanced radio button. In the Selector 
text box, type or select ‘a:visited’. Click OK.

116_DW_06.TIF

3. In the CSS Rule definition for a:visited dialog box:

­ Click Type in the Category pane. Type ‘#B5A48C’ in the Color text box.

­ Click OK.

A pseudo­class selector ‘a:visited’ is created in master.css.

117_DW_06.TIF

4. Repeat steps 1 and 2 to create a pseudo­class selector ‘a:hover’. In the CSS Rule 
definition for a:hover dialog box:

­ Click Type in the Category pane. Type ‘#E1957B’ in the Color text box.

­ Click OK.

A pseudo­class selector ‘a:hover’ is created in master.css.

5. Repeat steps 1 and 2 to create a pseudo­class selector ‘#uniNav ul a:hover’. In the 
CSS Rule definition for #uniNav ul a:hover dialog box: 
Page 83 of 109

­ Click Type in the Category pane. Type ‘#E1957B’ in the Color text box.

­ Click OK.

A pseudo­class selector ‘#uniNav ul a:hover’ is created in master.css.

6. Repeat steps 1 and 2 to create a pseudo­class selector ‘#content­main a:hover’. In 
the CSS Rule definition for #content­main a:hover dialog box: 

­ Click Type in the Category pane. Type ‘#E1957B’ in the Color text box.

­ Click OK.

A pseudo­class selector ‘#content­main a:hover’ is created in master.css.

7. Repeat steps 1 and 2 to create a pseudo­class selector ‘#footer a:hover’. In the 
CSS Rule definition for #footer a:hover dialog box: 

­ Click Type in the Category pane. Type ‘#E1957B’ in the Color text box.
­ Click OK.

A pseudo­class selector ‘#footer a:hover’ is created in master.css.

118_DW_06.TIF

USING CASCADING STYLE SHEETS FOR DIFFERENT PURPOSES


A Cascading Style Sheet is primarily used to design the layout of a Web page. It has other uses as 
well.
Page 84 of 109

A cascading style sheet allows you to create a media­specific style. You might have observed that 
when a Web page is printed, unwanted images and links also get printed along with the required 
text. A print style sheet can prevent this from happening.  Creating a style sheet for print prints 
only the specified content and disables the remaining content. Links such as ‘Printer­friendly 
version’ or ‘Print this document’ in Web sites have a print style sheet attached.  

If you want certain styles not to be displayed in the browser, you can create a separate style sheet ­ 
called a design­time style sheet ­ to hide such styles. Using a design­time style sheet, you can 
show or hide styles in a browser. 

Some browsers might not support certain styles you have used, or you want to give a choice of 
styles to the user. In such cases, you can use alternate style sheets. However, the efficacy of 
alternate style sheets varies from browser to browser.

DREAMWEAVER FOUNDATIONS
WORKING WITH DESIGN-TIME STYLE SHEETS
Applying styles to a Web page is, in fact, a matter of experimenting. While you design a Web 
page, you try a certain style and then you change it. You keep on trying styles in this way till you 
are content with the appearance of the Web page. Sometimes you may find certain styles 
displaying incorrectly in Dreamweaver and you want to try some different styles ­ only to appear 
in the design view. For these purposes, you can use a specific cascading style sheet called design­
time style sheet.
A design­time style sheet is a separate style sheet – in addition to the main cascading style sheet – 
which affects only the design view in Dreamweaver. A design­time style sheet allows you to 
display or hide styles in the Dreamweaver, but it prevents these styles to appear in the browser 
when the Web site goes live. 
To attach a design­time style sheet to an HTML page, choose Text>CSS Styles and click Design­
time. In the Design­time Style Sheets dialog box, click the ‘+’ sign to navigate and select a style 
sheet. To show the style sheet at design time, select it in the ‘Show only at design time’ box. To 
hide a style sheet at design time, select it in the ‘Hide at design time’ box. To remove a style sheet, 
click the ‘­‘ sign.

DREMWEAVER FOUNDATIONS
WORKING WITH ALTERNATE STYLE SHEETS
Usually style sheets are associated with HTML documents using the link element. So, it is 
important to use the element's attributes properly. The use of the title attribute is very important 
so that HTML categorizes style sheets according to the presence or absence of a title.
If you include the title attribute, you can see that the particular style sheet always affects the 
document.
Page 85 of 109

There are three kinds of style sheets:
­ Persistent: This has no title attribute. A document may refer to one or more persistent style 
sheets.
­ Preferred: This style sheet carries a value supplied for the ‘rel’ attribute. (‘rel’ attribute is 
used to define the relationship between the linked file and the HTML document.
­ Alternate: You can select this style sheet as an alternative to the preferred style sheet.
An alternate style sheet relationship is specified with a REL attribute value of the alternate style 
sheet.
Consider the following example:
<link href="main.css" title= "abc" rel="stylesheet" type="text/css" >
<link href="main.css" title= "abc" rel="alternate stylesheet" type="text/css">
Here rel="Alternate StyleSheet" defines an alternate style. You can choose the alternate style to 
replace the preferred style sheet.
Your document doesn't need to have a single style sheet. You can give it a default style and any 
number of alternatives. Links with the same title are automatically combined into one style sheet.
In a document that refers to alternate style sheets, you can use preferred style sheet as long as you 
do not select the alternate style sheet. Once you select the alternate style sheet, the preferred style 
sheet will no longer be used. But, you can always re­select the preferred style sheet.

Create a Print Style Sheet

Creating a print style sheet is the same as creating any other cascading style sheet. A 
print style sheet determines the layout of a Web page. When the Web page is printed, 
it prints in a user­friendly way, that is, only the specified content is printed and all the 
unwanted images and links are disabled.

In this exercise, you will create a print style sheet.

1. If Dreamweaver is not open, launch it now.

2. Choose File>New.

3. In the New Document dialog box, choose Blank Page.

4. Choose CSS from the Page Type list and click the Create button.

A new cascading style sheet is created.
Page 86 of 109

5. Choose File>Save on the menu or press Command/Control­S to save the page. In 
the Save As dialog box, navigate to the CSS folder in the root of the Showcolate 
Web site and name the page as ‘print.css’.

119_DW_06.TIF

The new cascading style sheet is saved with the name print.css.

6. Click the New CSS Rule icon at the bottom right of the Properties pane. 

7. In the New CSS Rule dialog box, click the Tag radio button. In the Tag field, type 
‘body’ or select ‘body’ from the drop­down list. Click OK.

120_DW_06.TIF
Page 87 of 109

8. In the CSS Rule definition for body dialog box:

­ Click Type in the Category pane. In the Font drop­down list, click ‘Times New 
Roman, Times, serif’. In the Size text box, type ‘13’ and select ‘points’ from the 
adjacent drop­down list. In the Color text box, type ‘black’.

­ Click Background in the Category pane. In the Background pane, type ‘white’ in 
the Background color text box.

An element selector ‘body’ is created in print.css.

121_DW_06.TIF

9. Repeat steps 6 and 7 to create an element selector ‘h1’. In the CSS Rule 
definition for h1 dialog box:

­ Click Type in the Category pane. In the Size text box, type ‘20’ and select ‘points’ 
from the adjacent drop­down list.  

An element selector ‘h1’ is created in print.css.

10. Repeat steps 6 and 7 to create an element selector ‘h2’. In the CSS Rule 
definition for h2 dialog box:

­ Click Type in the Category pane. In the Size text box, type ‘15’ and select ‘points’ 
from the adjacent drop­down list.

An element selector ‘h2’ is created in print.css.

11. Click the New CSS Rule icon at the bottom right of the Properties pane. In the 
New CSS Rule dialog box, click the Advanced radio button.

12. In the Selector text box, type #header, #tagline, #content­side, #styleImg, .clear, 
#footer and click OK.
Page 88 of 109

13. In the CSS Rule #header, #tagline, #content­side, #styleImg, .clear, #footer 
definition dialog box:

­ In the Block pane, select ‘none’ from the Display drop­down list.

­ Click OK.

An ID selector #header, #tagline, #content­side, #styleImg, .clear, #footer is created in 
print.css.

14. Repeat step 11 and 12 to create an ID selector #container. In the CSS Rule 
definition for #container dialog box:

­ Click Box in the Category pane. In the Margin area, select Same for all check 
box. Type ‘0’ in the Top text box.
­ Click OK.

An ID selector ‘#container’ is created in print.css.

15. Repeat steps 11 and 12 to create an ID selector ‘#mainContent’. In the CSS Rule 
definition for #mainContent dialog box:

­ In the Box pane, select ‘auto’ in the Width text box. In the Padding area, select 
the Same for all check box and type ‘0’ in the Top text box.

­ In the Border pane, select the Same for all check box in the Width area and type 
‘0’ in the Top text box.

­ Click OK.

An ID selector ‘#mainContent’ is created in print.css.
Page 89 of 109

122_DW_06.TIF

APPLYING THE STYLE SHEETS


If you want your Web site to take the styles you have created in a cascading style sheet, you need 
to apply those styles to the HTML pages of the Web site. You can apply styles to an HTML page 
in three ways ­ External, Embedded, and Inline­ as explained earlier. In this chapter, you will 
learn how styles are applied to an HTML page and how a Web page takes the design for which 
those styles are created. You have created styles in the cascading style sheet ‘master.css’ so far, 
and now you need to apply the styles to an HTML page.

Use a Tracing Image

There might be instances where you want to design a prototype of the layout of a Web 
site in the form of an image in a graphic program (such as Photoshop), or use a certain 
image as a layout of your Web page. ‘Tracing Image’ is a feature in Dreamweaver 
which helps you in such cases.

The Tracing Image feature allows you to use an image in your HTML page to recreate 
the image effect in the page layout. The image appears in the background in Design 
view. You can trace the image to design tables, layers, etc. You can set the opacity and 
change the position of the image. The tracing image appears only in Dreamweaver and 
does not appear in the browser. Once you design the layout of the Web page, you can 
hide the tracing image. A tracing image can be a JPEG, GIF, BMP, or PNG file.

In this exercise, you will create an HTML page and insert a tracing image in it.

1. If Dreamweaver is not open, launch it now. 
Page 90 of 109

2. Choose File>New.

3. In the New Document dialog box, choose Blank Page. 

4. Choose HTML from the Page Type list and click the Create button.

A new HTML page is created.

5. Choose File>Save on the menu or press Command/Control­S to save the page. In 
the Save As dialog box, navigate to the root of the Showcolate folder and name 
the page as ‘index.html’. 

The new HTML page is saved with the name index.html. You will apply all styles to 
this HTML page. Ensure that while naming an HTML page, you have selected the 
HTML Documents (*.htm, *.html, *.hta, *.htc, *.xhtml) extension in the Save as type 
box just below the File name box.

123_DW_06.TIF

6. Keep index.html open.

8. In index.html, choose View>Tracing Image on the menu and click Load. 
Page 91 of 109

124_DW_06.TIF

The Select Image Source dialog box is displayed.

9. In the Look in drop­down list, navigate to the image ‘showcolate.jpeg’ in Images 
folder in the root of the Showcolate folder and click OK.
Page 92 of 109

125_DW_06.TIF

The Adobe Dreamweaver CS3 dialog box is displayed.

11. Set transparency of the image to 40 by moving the Transparency slider. Click 
OK.

126_DW_06.TIF
Page 93 of 109

The tracing image ‘showcolate.jpeg’ appears in index.html. 

127_DW_06.TIF

Note: To modify the tracing image, choose


Modify>Page Properties. Click Tracing Image in the
Category pane. Make changes and click OK. You can
open the Page Properties box by right-clicking the
tracing image or clicking the Page Properties button in
the Properties Inspector.

To align the tracing image with a selection, choose


View>Tracing Image on the menu and click Align with
Selection.

To adjust the tracing image position, choose


View>Tracing Image on the menu and click Adjust
Position. You can adjust the position of the tracing
image by typing coordinate values in X and Y text boxes.
You can also use arrow keys to position the image. Text
box X is meant for moving the image to left or right. Text
box Y is for moving the image to up and down. (Ensure
that while using the arrows, the pointer is in the text
boxes).

To bring the tracing image to the original position,


choose View>Tracing Image on the menu and click
Reset Position.
Page 94 of 109

To show or hide the tracing image, choose


View>Tracing Image on the menu and click Show/Hide
alternatively.

Insert Div Tags

The div tags in an HTML page define divisions or sections. Div tags divide a Web 
page into different sections. By inserting div tags in an HTML page, you can apply 
styles to individual sections efficiently. And when you want to modify the style of a 
section, you can just modify the style in the CSS panel.

So far, you have created a style sheet (master.css) and an HTML page (index.html). 
Now, you will attach the master.css to index.html and insert div tags in it.

1. Open the index.html page. In the CSS panel, click the Attach Style Sheet icon at 
the bottom right of the properties pane.

The Attach External Style Sheet dialog box is displayed.

2. Click the Browse button to navigate to the CSS folder in the root of the 
Showcolate Web site and select the master.css file. Click OK.

3. In the ‘Add as’ area, click the Link radio button.

4. In the Media drop­down list, select ‘screen’. Click OK.

128_DW_06.TIF

Note: While attaching print.css, select ‘print’ in the


Media drop-down list.

Master.css is attached to index.html. You can see all the styles of master.css listed in 
the CSS panel.

Note: If you do not give a title to index.html and open it


in a browser, it is displayed as an untitled document.
Page 95 of 109

Choose Modify>Page Properties on the menu and


click Title/Encoding in the Category pane. In the Title
text box, type the text ‘Become a franchisee with
Showcolate’ and click OK.

DREAMWEAVER FOUNDATIONS
WORKING WITH THE <SPAN> AND <DIV> TAGS
Both span and div tags are used to apply styles in an HTML page. Both these tags are used to 
format portions of a Web page. But, they cannot be used interchangeably and there is some 
distinguishing difference between the two as they serve two different purposes.
Span tag: A span tag is used for ‘in­line’ content, primarily for a small portion. It is used within a 
piece of text such as a headline or a paragraph. A span tag does not use a line break in the text. 
Using a span tag, you can apply certain styles to text such as highlighting the text, applying color 
to the text, or setting a background image for the text. A span tag applies styles to the text even in 
the middle of a sentence.
For example, if you apply a span tag for the text “A span tag can change font in the middle of a 
sentence” in the following way, 
A span tag can <span style="font:18pt verdana">change font</span> in the middle of a sentence
the text will appear as shown below:
A span tag can  change font in the middle of a sentence
Div tag: A div tag is used for a division which generally has a group of larger portions such as 
paragraphs or images. When a div tag is used, a line­break is inserted before and after it. 
Anything that follows a div tag goes to the next line. Using div tags, you can divide a Web page 
into different divisions. You can position the elements contained within a div tag and for this 
reason, div tags are used for table­based Web designs. 
If you apply a div tag for the text “Using div tags, you can divide a Web page into different 
divisions” in the following way,
Using div tags, you can divide a Web page <div style="text­align:center"> into different divisions. 
</div>
the div tag works as shown below:
Using div tags, you can divide a Web page
into different divisions 

5. Choose Insert>Layout Objects on the menu and click Div Tag. 
Page 96 of 109

129_DW_06.TIF

The Insert Div Tag dialog box is displayed.

6. In the ID drop­down list, select the div tag ‘wrapper’. 

7. In the Insert drop­down list, select ‘At insertion point’. Click OK. 

130_DW_06.TIF

Placeholder text is displayed as ‘Content for id "wrapper" Goes Here’. Select the 
placeholder text in the inserted div and press the Delete key.

Note: As the div tags are created, you can see them
displayed in the tag editor just above the Properties
Inspector. If you select a div tag, the name is displayed
in the list.
Page 97 of 109

8. Repeat steps 5 and 6 to insert the div tag ‘wrapperContainer’. In the Insert drop­
down list, select ‘At insertion point’. Click OK. Select the placeholder text in the 
inserted div and press the Delete key.

9. Repeat steps 5 and 6 to insert the div tag ‘header’. In the Insert drop­down list, 
select ‘At insertion point’. Click OK. Select the placeholder text in the inserted 
div and press the Delete key.

10. Repeat steps 5 and 6 to insert the div tag ‘logoAnim’. In the Insert drop­down 
list, select ‘At insertion point’. Click OK. Select the placeholder text in the 
inserted div and press the Delete key.

11. Repeat steps 5 and 6 to insert the div tag ‘uniNav’. In the Insert drop­down list, 
select ‘After start of tag’. In the adjacent drop­down list, select <div 
id="header”>. Click OK. Select the placeholder text in the inserted div and press 
the Delete key.

12. Repeat steps 5 and 6 to insert the div tag ‘tagWrap’. In the Insert drop­down list, 
select ‘After tag’. In the adjacent drop­down list, select <div id="header”>. Click 
OK. Select the placeholder text in the inserted div and press the Delete key.

13. Repeat steps 5 and 6 to insert the div tag ‘tagline’. In the Insert drop­down list, 
select ‘At insertion point’. Click OK. Select the placeholder text in the inserted 
div and press the Delete key.

An image is displayed in the inserted div. 

14. Repeat steps 5 and 6 to insert the div tag ‘video’. In the Insert drop­down list, 
select ‘Before end of tag’. In the adjacent drop­down list, select <div 
id="tagline”>.  Click OK. Select the placeholder text in the inserted div and 
press the Delete key.

15. Choose Insert>Image Objects and click Rollover Image.  In the Image name text 
box, type ‘video’. Click the Browse button of the Original Image field. Navigate to 
the ‘images’ folder of the Showcolate root folder and select ‘videoUp.jpg’. Click 
the Browse button of the Rollover Image field to select the image ‘videover.gif’. In 
the Alternate text field, type ‘Download Showcolate Video’. Click the Browse button 
of the ‘When clicked, Go to URL’ text box to navigate to the flash folder in the 
Showcolate root folder and select the flash file ‘showcolate­flash.swf’. Click OK.

16. Repeat steps 5 and 6 to insert the div tag ‘styleImg’. In the Insert drop­down list, 
Page 98 of 109

select ‘After tag’. In the adjacent drop­down list, select <div id="tagline”>.  Click 
OK. Select the placeholder text in the inserted div and press the Delete key. 

17. Repeat steps 5 and 6 to insert the div tag ‘content­group’. In the Insert drop­
down list, select ‘After tag’. In the adjacent drop­down list, select <div 
id="styleImg”>. Click OK. Select the placeholder text in the inserted div and 
press the Delete key. 

18. Repeat steps 5 and 6 to insert the div tag ‘content­main’. In the Insert drop­down 
list, select ‘At insertion point’. Click OK. Select the placeholder text in the 
inserted div and press the Delete key.

19. Repeat steps 5 and 6 to insert the div tag ‘content­side’. In the Insert drop­down 
list, select ‘After tag’. In the adjacent drop­down list, select <div id="content­
main”>. Click OK. Select the placeholder text in the inserted div and press the 
Delete key.

20. Repeat steps 5 and 6 to insert the div tag ‘content­sideCont’. In the Insert drop­
down list, select ‘At insertion point’. Click OK. Select the placeholder text in the 
inserted div and press the Delete key. Open the Content.txt file in the Showcolate 
root folder and copy the text under the heading ‘content_sideCont text’ and paste 
it in the area of the div tag ‘content­sideCont’.

21. Repeat steps 5 and 6 to insert the div tag ‘footer’. In the Insert drop­down list, 
select ‘After tag’. Select <div id="content­group”> in the adjacent drop­down 
list. Click OK. Select the placeholder text in the inserted div and press the Delete 
key. Copy the footer text from the Content.txt file and paste it in the footer.

22. Choose Insert>Layout Objects on the menu and click Div Tag. In the Class text 
box, select ‘clear’. In the Insert drop­down list, select ‘After tag’. Select <div 
id="wrapper”> in the adjacent drop­down list. In the code view, type ‘&nbsp’ in 
place of ‘Content for class "clear" Goes Here’. Click OK. 

23. Repeat steps 5 and 6 to insert the div tag ‘containerBot’. In the Insert drop­down 
list, select ‘At insertion point’. Click OK. Select the placeholder text in the 
inserted div and press the Delete key. 

As you go on inserting div tags in the index.html, you can view the page in the 
browser. Press F12 for a quick­view of the page in the browser.
Page 99 of 109

131_DW_06.TIF

Create links 

Links used in a Web page help users to navigate from that Web page to other specified 
locations. When a link is clicked, a new Web page will be displayed in the browser.

In this exercise, you will create links (in index.html), which will take the users to other 
specified web pages of the Showcolate Web site. You can refer to project1 to learn 
more about creating links in a Web page.

1. Open index.html in design view.

2. Place the cursor in the uniNav div tag. Choose Insert>Tag. In the Tag chooser 
dialog box, click the Plus (+) sign beside the HTML tags folder and click ‘Lists’. 
Select ul in the adjoining display area and click Insert.
Page 100 of 109

132_DW_06.TIF

The Tag Editor – ul dialog box is displayed.

133_DW_06.TIF

3. Click OK and close the Tag Chooser dialog box.

4. Select the design view and repeat steps 2 and 3 to insert ‘li’.

5. Type and select the text ‘Home’ in the uniNav div tag area. Right­click <li> in the 
tag editor. Choose Set ID and click homelink in the list.
Page 101 of 109

134_DW_06.TIF
Page 102 of 109

135_DW_06.TIF

<li#homelink> is created in the tag editor. 

136_DW_06.TIF

6. Select the text ‘Home’ in the uniNav tag. Click and drag the Point to File button 
to index.html in the files panel.
Page 103 of 109

137_DW_06.TIF

The Home link is created. You can press F12 to check in the browser whether or not 
the link is working. When you place the cursor on the link, the color will change.

7. Type and select the text ‘About Showcolate’ in uniNav below the Home link. 
Right­click <li> in the tag editor. Choose Set ID and click aboutlink in the list. 
Select About Showcolate. Click and drag the Point to File button to about.html in 
the files panel.

‘About Showcolate’ link is created.

8. Type and select the text ‘Our Products’ in uniNav. Right­click <li> in the tag 
editor. Choose Set ID and click productslink in the list. Click and drag the Point 
to File button to products.html in the files panel.

‘Our Products’ is created.

9. Type and select the text ‘FAQ’ in uniNav. Right­click <li> in the tag editor. 
Choose Set ID and click faqlink in the list. Click and drag the Point to File button 
to faq.html in the files panel.

‘FAQ’ link is created.

10. Type and select the text ‘Become a Franchisee’ in uniNav. Right­click <li> in the 
tag editor. Choose Set ID and click franchiseelink in the list. Click and drag the 
Point to File button to franchisee.html in the files panel.

‘Become a franchisee’ link is created.

11. Type and select the text ‘Locations’ in uniNav. Right­click <li> in the tag editor. 
Choose Set ID and click locationslink in the list. Click and drag the Point to File 
button to locations.html in the files panel.

‘Locations link’ is created.
Page 104 of 109

12. Type and select the text ‘Contact’ in uniNav. Right­click <li> in the tag editor. 
Choose Set ID and click contactlink in the list. Click and drag the Point to File 
button to contact.html in the files panel.

‘Contact’ link is created.

13. Type and select the text ‘Franchisee Login’ in uniNav. Right­click <li> in the tag 
editor. Choose Set ID and click loginlink in the list. Select Franchisee Login in the 
uniNav tag. Click and drag the Point to File button to login.html in the files 
panel.

‘Franchisee Login’ link is created.

14. In the footer area, select the text ‘info@showcolate.com’. In the Link field of the 
Properties Inspector, type mailto:info@showcolate.com 

138_DW_06.TIF

15. Select Live Remote Assistance. In the Link field of the Properties Inspector, type 
http://www.gotoassist.com/ph/txwi.

Save the Page as Template

A template works as a parent document. You can create any number of documents out 
of a template. All such documents will have the same format and structure as the 
template. If you save index.html as a template, you can create similar HTML pages out 
of it with the same structure of the elements such as head and body. A template proves 
quite useful when you design a big Web site: you need not create each HTML page 
separately; moreover, all Web pages will have a consistent look and uniform 
appearance. Any page can be modified later on, if needed.

1. Open index.html in Dreamweaver.
Page 105 of 109

2. Choose File>Save as Template.

The Save As Template dialog box is displayed.

3. In the Site drop­down box, ensure that Showcolate is selected. In the Save as text 
box, type ‘template’. 

139_DW_06.TIF

You can type text in the Description text box for your reference.

4. Click Save.

The index.html is saved as a template. The template is displayed in the Templates 
folder in the Files panel with the extension .dwt (template.dwt).

140_DW_06.TIF

5. Select ‘logoAnim’ div tag. Choose Insert>Template Objects and click Editable 
Page 106 of 109

Region.

The New Editable Region dialog box is displayed.

In a template, you can define certain regions as editable, which enables you to modify 
those regions in other pages created out of that template.

6. In the Name text box, type ‘header image’. Click OK.

7. Follow steps 5 and 6 in div tags styleImg. and content main. Type ‘image’ for 
styleImg. and ‘content’ for content main. in the Name text box.

141_DW_06.TIF

You have created a template out of which you can create any number of Web pages, 
which can be individually altered, if needed.
Page 107 of 109

Complete the Home Page

The page index.html is saved as a template. In this exercise, you will complete the 
index.html page ­ which is the home page of Showcolate Web site.

1. Select and delete the text in the div tag area ‘logoAnim’. Choose Insert>Media 
and click Flash.

The Select File dialog box is displayed.

2. Navigate to the Flash folder in the Showcolate root folder and select the flash 
object ‘showcolate­logo­animado175x110’.

142_DW_06.TIF

The Object Tag Accessibility Attributes dialog box is displayed.

Note: The Object Tag Accessibility dialog box can be


used to apply attributes to the flash object.

3. Click OK.

The flash object is inserted in the header.
Page 108 of 109

4. Select the delete the text in the div tag area ‘styleImg’. Choose Insert>Image and 
navigate to the folder ‘images’ in the Showcolate root folder and select the image 
‘styHome’.

143_DW_06.TIF

The image is inserted. 

5. Select the div tag content­main. Copy the content_main text from the 
‘Content.txt’ file in the Showcolate root folder and paste it in the content­main 
area.
Page 109 of 109

144_DW_06.TIF

Press F12 to view the home page in a browser.

You might also like