Home »
Home > dreamweaver tutorial
This chapter describes how you can change the way the text of your website is displayed. Including the font type, size, colour, weight and style. All this is covered in our comprehensive Dreamweaver course in Brighton, Sussex.
We will also introduce the concept of Cascading Style Sheets, or CSS, which can save you a lot of time when you need to change the style of different areas of text all at once.
Fundamentals of Web Fonts
The first important concept that any new web-designer needs to understand, is that you can’t use all of the fonts that you would usually use on your computer when building a website. This is because the fonts you have installed on your own PC or Mac won’t necessarily be installed on the computer of the end user.
Most web designers therefore stick to a set of fonts that are web-safe, and found on most computers.
Any text you have entered on your site in previous chapters will have used Dreamweaver’s default template, and will be displayed in one of the following fonts:
Verdana, Arial, Helvetica, sans-serif
Your user’s web browser will read the list of fonts in order, and will display the text using the first font on the list that is installed on that person’s PC or Mac. I.e. If they have Verdana it will display as Verdana, if not it will display as Arial, if not Helvetica and failing that, it will just use any sans-serif font available.
All of these fonts look very similar – and they are all sans-serif. Sans-serif fonts are the best for web-work, since they are easy to read on screen.
Serifs are the “curly bits” that appear on the end of the characters in fonts like Times New Roman, which look nice in print, but are not as easy to read on screen. Sans-serif simply means “without serifs” – which means the font is plainer, but more readable.
Compare the two text samples below as an example of this:
However, Dreamweaver will also allow you to select other series of fonts in addition to the standard “Verdana, Arial, Helvetica, sans-serif”
To experiment with this:
Select some text in Dreamweaver by highlighting it with your cursor
Now select Format>Font from the main toolbar
The following alternative series of fonts are available:
- Arial, Helvetica, sans-serif
- Verdana, Arial, Helvetica, sans-serif
- Times New Roman, Times, serif
- Courier New, Courier, monospace
All of the fonts in these series are very likely to be installed on the end-user’s computer.
Dreamweaver will allow you to add your own font lists, however its not a good idea to do so, as it is unlikely that the fonts you choose from your own computer will be present on the user’s – the site will not display the way you designed it.
Read more
Posted by Aaron Charlie in Dreamweaver Tutorial on March 6th, 2009 | 2 Comments »
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 »
Dreamweaver Courses.
If you would like to take your knowledge of dreamweaver to the next level and get ahead of the crowd then here is a list of some of the excellent courses offered by Silicon Beach Training:
Read more
Posted by Heather Buckley in Dreamweaver Tutorial on September 30th, 2009 | No Comments »
