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.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.

Add a comment 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.

Add a comment 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.

Add a comment Read more

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

Part 4.3: Changing the Background of the Header, Footer, Side Bar and the Right Column (Main Content)

1: Put your cursor somewhere in the column or section that you want to customize. Look at your status bar.  Depending on which column or section you are in, click one of the following items:

• To change the background of the header, click the <div#header> word in the status bar.
• To customize the background of the left column, or side bar, click the <div#sidebar1> word in the status bar.
• To configure the background of the right column, or main content section, click the <div#mainContent> word in the status bar.

2: To change the background for the header, footer and side bar, open the CSS STYLES pane on the right side of Dreamweaver.
Double-click the “background” item in the CSS STYLES panel.The “CSS Rule Definition” dialog box will appear.
You should now see the “Background-color”, “Background-image” and “Background-repeat” lines. Change them as you see fit.

3: The right column cannot be done the same way because the header, footer and side bars all have an existing background already set for their blocks. The right column DIV block does not have any customized colour settings. The colours you see (the black words on white background) were inherited from its outer “<div#container>” block.   In this case, we will have to add the necessary background properties from scratch.
With the “<div#mainContent>” button on the status bar selected, expand the CSS STYLES panel on the right side of Dreamweaver.

Look for ‘Properties for “twoColLiqLtHdr #mainContent”. Move your mouse to the separator line immediately above those words and drag it upwards until you can see the “Add property” blue link below. Click on the link and a drop down box should appear. Click the drop down arrow key beside it to open the entire list box. Either Select “background-color” or “background-image” depending on what you want to do.

If you selected the background colour item, a square box will appear. Click it and set the colour from the colour picker as usual.
If you selected the background image item, a blank box will appear. There are two buttons display, click the button that looks like a folder. The “Select Image Source” dialog box will appear, allowing you to choose the image for the background. To determine whether that background image is repeated, click the “Add property” link again and select the “background-repeat” item from the drop down box. Then click the down arrow to open the list of your options and select the appropriate one.

Saving and Publishing Your Web Page

Once you’ve finished customizing the background of your web page, save everything by using “File > Save All”.  Then publish the page as shown in Part one, and check it in your browser.

Congratulations. You have now mastered some techniques commonly needed by web designers to customize the appearance of a web page!

Once you have mastered all these techniques you may want to attend our Advanced Dreamweaver training course in Brighton, Sussex.

Add a comment Read more

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

How to Make Pictures and Text into Links

This chapter takes you through the process of creating links on your website as well as making existing pictures and words into clickable links. All this is covered in our comprehensive Dreamweaver course in Brighton, Sussex.

Getting rid of the border around a linked image

Linked Images can offer a nice alternative to the same old generic and dull text most that is often used. However when you create a linked image a browser will automatically create a border around it. This can be easily rectified as follows:

Click on and select the image in question. Go to Windows > properties to get the properties palette to appear. When you have the properties palette in front of you, you can then alter the size of the border by changing the number in the border text box. This number represents the thickness of the border, so if you change it to 0 then the border will no longer be visible; similarly if you wished to make the border bigger then you would make the number in the border text box higher.

Introduction to URLs: Relative and Absolute Links

The web address of any page on your website is a type of “URL”, or “Uniform Resource Locator”.
URL’s can be either absolute or relative.  An absolute URL specifies the full address of a web page or file.  For example, “http://www.siliconbeachtraining.co.uk/index.html“

A relative link can be used to link to other pages within your own website.  Rather than using the whole URL you can just use “index.html”.  The files must be in the same site and also in the same folder otherwise this won’t work.  Browsers assume that if a relative link is used the page or file it is linking to is in the same folder in the same website.

Rollovers:

To create a rollover in Dreamweaver is not difficult. Firstly you will need to export the image and its rollover image from fireworks. When you have done this you will then need to go to the “insert” option in Dreamweaver and then click on “rollover image.” After this you will want to give the image a name, select the images you want from the folder icon in Dreamweaver before submitting a link to the image. After which you will have successfully created a rollover.

Add a comment Read more

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

Part 5.1: Making your logo into a click-able link to your homepage

Most websites have a logo at the top of the page that when clicked takes you to the home page of the site.  Although it is not compulsory, so many sites have this click-able logo that it has pretty much a convention.  To make your site as user friendly as possible we would recommend that you follow this convention. All this is covered in our comprehensive Dreamweaver training course in Brighton, Sussex.

1: Open Dreamweaver and load your ‘index.html’ page.

2: Click your logo on this page to select it, this will display the ‘Properties’ panel at the bottom of the main Dreamweaver window.

3: In the ‘Link’ field, enter the absolute URL of your site (http://www.example.com).  If you haven’t registered a domain name, it is also possible to use a relative link here (index.html).

We recommend that you use the absolute link here.

4: In the ‘Border’ field in the ‘Properties’ panel enter a value of ‘0’ (zero).  Some browsers put a blue border around images that are links.  Entering ‘0’ here removes this border.

5: Save and publish your web page.  You will notice that when you roll the cursor over the logo it now changes from an arrow to a pointing finger showing that the image is now a link.

Making other images into links

You can use the same method described above to make other images on your site into links.

At the moment ‘index.html’ is the only page in your web site.  You can create images that link to pages that don’t yet exist and make these pages later.  When you click on a link to a page that doesn’t exist your browser will display a ‘404 file not found’ error, this is normal and the error will disappear when the pages are made.

Add a comment Read more

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

Part 5.2: Making Clickable Images that When Clicked Opens Up a Larger Image

You probably will have seen photo galleries online that display small versions (thumbnails) of images that when clicked open a larger version of the image in the browser.

You will need to have two versions of the image for this to work, a small (thumbnail) version and a large version (the original image). All this is covered in our comprehensive Dreamweaver course in Brighton, Sussex.

To create the thumbnail version, use a photo or image editor to re-size the image and make it smaller and save it under a different filename.  You now have the two images you need.

1: Both the original image and thumbnail need to be in the ‘images’ folder of your website.  Copy both images to this folder as described in Dreamweaver Course Part 2

2: Place the thumbnail image on to your web page as described in Dreamweaver Course Part 2

3: Click the thumbnail image to select it and find the ‘Link’ field in the ‘Properties’ page that appears.  Click the ‘Browse for File’ button that is next to the ‘Link’ field.  A dialog box entitled ‘Select File’ will appear, browse to the ‘images’ folder and select the large version of the image.  Click ‘OK’ to continue.

Note that Dreamweaver has created this link using a relative link ‘images/your-image.jpg’.

Add a comment Read more

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