Home »
Home > Dreamweaver Training
Part 3.1: CSS (Cascading Style Sheets)
Dreamweaver CS4 uses a technology called Cascading Style Sheets, or CSS, to change the appearance of web pages – including changing fonts. Cascading Style Sheets are covered in our comprehensive Dreamweaver training course in Brighton, Sussex.
Most of the time, Dreamweaver will write all of the CSS (and HTML) code for you, so that you don’t need to get bogged down in programming. However its useful to understand what CSS is and what it does, just so you understand the concept.
Basically, CSS allows you to change the style of certain sections of text within your website quickly and easily without having to trawl through your whole site selecting areas of text and changing the font section by section.
For example – if every time we wanted the company name Silicon Beach Training to appear in our site in the Arial font, we could go through the site highlighting “Silicon Beach Training” everywhere it appeared and change the font to Arial. However – let’s say we then changed our minds and wanted the company name to appear in Times instead. We’d have to go through the whole site again and make all of the changes.
To make this easier – we can create a class and give it a name – say “sbt”. We can then apply that class to all of the instances of the company name Silicon Beach Training wherever it appears in the site. We can then associate any font we want to our “sbt” class, and the text linked to that class will all appear in that font.
In this way, the font instructions for all text in the “sbt” class are stored in one central place in the website – and that place is called the “style sheet”. Now, instead of changing the font manually every time, we can just update that class in the style sheet, and Dreamweaver will update (or cascade) the changes throughout the whole site.
This saves you a small amount of time when you’re editing one page, but imagine how much easier it makes things when you’ve got a site with hundreds of pages.
The steps in the next section illustrate how this works in practice.
Once you have mastered all these techniques you may want to attend our Advanced Dreamweaver training course.
Read more
Posted by Aaron Charlie in Dreamweaver Tutorial on March 16th, 2009 | 1 Comment »
Part 3.2: How to change fonts in Dreamweaver
All this is covered in our comprehensive Dreamweaver course in Brighton, Sussex.
1: Open your webpage
Double click on the “index.html” page you have been working on previously from the Files pane on the right
2: Select text
Drag your cursor over the text you want to change (exactly as you would in a word processor)
3: Choose your font
From the menu select Format>Font and choose the font you want to use.
A box called “New CSS rule” will appear – don’t panic!
4: Assign and create a class
What appears in the “New CSS rule” as standard will depend on the sort of text you’ve selected.
Don’t worry about this for now – and use the following settings:
For “Selector Type” choose “Class (can apply to any HTML element)”
The “Selector Name” field will now be blank (if it wasn’t already)
The “Selector Name” box is where you will give your new class a name – this can be anything you like, as long as it starts with a character from the alphabet and has no spaces.
For this example, type “maintext” (without the quote marks) in to the “Selector Name” box.
Finally – you need to tell Dreamweaver which style-sheet you want your new class to be added to
In the Rule Definition box select “twoColLiqLtHdr.css” from the drop-down menu – this is the default style-sheet for your site.
Click OK
Congratulations – you’ve created a class!
5: Change the font for multiple pieces text
OK – let’s say you now wanted to change the appearance of whole paragraphs of text – for instance all of the course descriptions for a range of training courses.
The first time you did this, you would select that paragraph and create a new class called “coursedescription” using the method described in step 4 above.
Now – let’s say you wanted to add a new training course to your training company website and wanted the description paragraph to appear in the same font as the others.
Select all of the text in your new paragraph and look at the Properties pane at the bottom of the screen (see picture)
There should be something displayed in the “Class” field – if there isn’t – click the “HTML” button on the left of the pane. Now from the drop down within the “Class” field, choose the new “coursedescription” class that you just made.
Your new course description paragraph will now display in the same font as the others.
6: Changing the font for a whole class
Now – to illustrate the power of using CSS to apply changes to your text – lets assume that we didn’t like the look of the course description paragraphs in our site, and wanted them all to appear in a different font.
Place your cursor anywhere within one of your course description paragraphs – don’t select the whole thing – just put the cursor within that area.
In the panel on the right, double-click on the “CSS Styles” tab (see picture)
Find the “font-family” line (which should be displaying the font-family you selected earlier) and double-click anywhere over it – a new box will appear called “CSS Rule Definition for coursedescription in twoColLiqHdr.css”
Select a new font from the “font-family” list in box and click on OK
All of the paragraphs with the “coursedescription” class assigned to them will now appear in the new font you’ve selected.
Read more
Posted by Aaron Charlie in Dreamweaver Tutorial on March 16th, 2009 | No Comments »
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.
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.
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
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.
Read more
Posted by Aaron Charlie in Dreamweaver Tutorial on March 6th, 2009 | No Comments »
Part 4.1: Changing the Background Colour or adding a Background Image
Load Dreamweaver CS4 and double-click the “index.html” file in the FILES pane. You should see the two column layout that we created in Dreamweaver Training Part 1, a site logo and graphics that we added in Dreamweaver Training Part 2, and customised font settings made in Dreamweaver Training Part 3.
Take a look at the background colours of your web page as it currently stands. There are a few set colours already in place; the header, footer and side bar have different shades of light grey, the main content has a white background, and the background behind the two columns (page background) has a dark shade of grey.
Changing the Page Background
Click anywhere on your page.
In PROPERTIES at the bottom of the Dreamweaver window, click the button that says “Page Properties”.
A dialog box entitled “Page Properties” will appear. You can either:
- Change the Background Colour: Click the square box beside the word “Background color”. A colour picker window will appear, allowing you to change the colour. Click on the colour you desire. If you decide that you really don’t want to change the colour after all, hit the ESC key on your keyboard. When you’re satisfied, click the “OK”. Your web page background should automatically have changed colour.
- Use a Background Image: make sure an image has been saved into your “images” folder. Then, in the Page Properties dialog box, click the “Browse” button.
A dialog box with the title bar reading “Select Image Source” will appear. Double-click the “images” folder in the dialog box. Select the picture you require for your background. Once your image is selected, click the “OK” button.
The background image file and folder name should now appear in the “Background image” field.
Click the down arrow for the “Repeat” field (underneath the “Background image” field). If your image is small, and you want to duplicate copies of the image to fill the entire window, click “repeat” in the drop down box. If you are happy with the size of your image, and you do not need to duplicate it, click ‘’no-repeat’’. You can also make the image tile horizontally (“repeat-x”) or vertically (“repeat-y”).
Remember, you can view your web page with the changes you selected without leaving the dialog box. If you clicked “repeat” but are not sure whether it looks good for your site, click the “Apply” button at the bottom of “Page Properties”. In the background, behind your dialog box, you should be able to see your page with the changes. If you’re not satisfied with it, just change the repeat pattern and click “Apply” again. When you’re satisfied with your choice, click the “OK” button.
(Note: if you decided you no longer require a background image, and have clicked ‘’Apply’’, clicking ‘’cancel’’ will not undo your change. To do this you will need to click the “Background image” field and use the DEL or backspace key to remove the filename and folder.)
Read more
Posted by Aaron Charlie in Dreamweaver Tutorial on March 16th, 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.
Read more
Posted by Aaron Charlie in Dreamweaver Tutorial on March 16th, 2009 | No Comments »
