Part 3.3: Changing the font size

This section describes how to make your text larger or smaller. All this is covered in our comprehensive Dreamweaver training course in Brighton, Sussex.

Different methods are described for one-off changes to small blocks of text, and changes to size that you want to make for a whole class.

One-off changes:

Select the piece of text you want to change the font size for with the cursor

In the Properties pane at the bottom of the screen, click on the CSS button (see picture)

The “Size” field will be set to 100% by default.

Change the font size to 150% and press enter

The “New CSS Rule” box will appear again, so create another new class called “largertext” and save it to your “twoColLiqLtHdr.css “ stylesheet in the Rule definition box as before.

This may seem a long winded way of changing text size now, but once you have all of the classes you need for your site set up it is a much easier and tidier way to work.

Size changes made to a whole class:

Place your cursor within a large block of text that you applied your “coursedescription” style to earlier.

Now open up the “CSS Styles” panel on the right hand side of the page again (as described above) and double-click on the font-family line to open up the CSS Rules Definition box

Change the font size to 90%

Press OK

All text in the coursedescription class will now be reduced to 90% size

Note that in addition to the font size, you can also make changes to the font weight (e.g. bold), style (italic) of your class – along with a range of other options.

Add a comment Read more

Posted by Aaron Charlie in Dreamweaver Tutorial on March 16th, 2009 | No Comments »

Part 3.4: Different Coloured Text

If you would like to change the font colour for a whole class, you can open the CSS Rule Definition box from the CSS Panel as described above. All this is covered in our comprehensive Dreamweaver course in Brighton, Sussex.

Simply place your cursor within text that has that class applied to it, double click and change the colour in the Rule Definition box.

When you hit OK, all of the text in that class will be updated to the new colour you’ve chosen.

However if you want to change the colour of a small piece of text without changing the rest of the class:

Select your chosen piece of text with the cursor.

In the Properties panel at the bottom of the page, click on the CSS button (if not already selected) and click on the colour box to the right of the size options (see picture)
dreamweaver-training-9

Now pick a colour from the palette and create a new class as before with a clear name – for instance “redcoursedescription” if you’ve changed the text to red. Again, make sure you select the twoColLiqLtHdr.css stylesheeet in the Rule Definition box.

Add a comment Read more

Posted by Aaron Charlie in Dreamweaver Tutorial on March 16th, 2009 | No Comments »

Part 3.5: Making bold or italic text

Unlike changes to font, size or colour, you can make text italic or bold without changing the whole class or creating a new one. All this is covered in our comprehensive Dreamweaver training course in Brighton, Sussex.

Highlight the text you want to change

In the properties panel at the bottom of the page, make sure that the HTML button is selected on the left and simply click on the “B” (for bold) or “I” (for italics) buttons as required. (see picture)

Alternatively, you can just use the keyboard shortcuts CTRL + I or CTRL + B just as you would when using Microsoft Word.

Note – on a Mac, use CMD in place of CTRL

Saving your work

Once you’ve finished making all of the changes you want to your font styles, sizes and colours, and have created all of the classes you need, go to File > Save All to save your work.

Make sure you select Save All and not just Save, as in addition to the index.html page, Dreamweaver has also been making changes to the “twoColLiqLtHdr.css” stylesheet

Publish the site – ensuring that you include all dependent files

Add a comment Read more

Posted by Aaron Charlie in Dreamweaver Tutorial on March 16th, 2009 | No Comments »

This chapter concentrates on how to change the default white background of your website.  This includes changing the colour of selected areas of your website, and the option of adding a background image as the backdrop to your website. All this is covered in our comprehensive Dreamweaver course in Brighton, Sussex.

Basic Things to Note About Changing Colours or Adding Background Images

Before we can begin, there are a few important things to take into consideration:

1: Colour contrast: Make sure that when you change the background colour of your website it is best to choose highly contrasting colours.  Try not to put red words on a blue background (or vice versa), grey words on a black background or yellow words on a white background as this will make it very hard to read.

2: Make Sure Background Images Do Not Interfere with Foreground Text: If you’re adding a background image, make sure the image does not make it difficult for visitors to read your page.  Background colours and images are merely the backdrop to your main content, so be careful not to distract visitors to what your website is actually about.

Add a comment Read more

Posted by Aaron Charlie in Dreamweaver Tutorial on March 6th, 2009 | No Comments »

Part 4.2: The Dreamweaver CS4 Status Bar

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

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

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

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

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

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

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

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

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

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

Add a comment Read more

Posted by Aaron Charlie in Dreamweaver Tutorial on March 16th, 2009 | No Comments »