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.

Add a comment Read more

Posted by Aaron Charlie in Dreamweaver Tutorial on March 6th, 2009 | 2 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.

Add a comment Read more

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