A two column Web Page with a Header and Footer

Written by Colin Welch – 13.03.09

Tweet This

Part 1.1: Creating a two column Web Page with a Header and Footer

Now we have defined your website we will start to create your first web page.  We will create a 2 column page, this means the page will have two vertical columns.  Normally the left hand column will contain the site’s navigation menu and the right hand column will contain the site’s main content. All this is covered in our comprehensive Dreamweaver training course.

1: Click ‘File > New’ on the Menu Bar.  A window titled ‘New Document’ will appear.

2: This window gives you different default options for laying out your page.  Choose “2 column liquid, left sidebar, header and footer” from the ‘Layout’ column of the window by clicking it once.

3: On the right hand side of this window is an item named ‘Layout CSS’.  Select ‘Create New File’ from the drop down menu.

The appearance of your site is controlled by ‘CSS’, selecting this option causes Dreamweaver to place all the ‘CSS’ in a separate file.  This saves disk space, bandwidth and makes your website more efficient and quicker to download for users.

4: Click ‘Create’ at the bottom of the window to continue

5: A dialog box will appear entitled “Save Style Sheet File As”.  Click ‘Save’ to accept the default name and location.

6: Dreamweaver will now create a two column web page containing some dummy content.

7: Dreamweaver CS4 has a slightly different screen layout which depends on the size of your monitor.  If you have a large screen resolution, then Dreamweaver will start up in a ‘split’ mode.  This means it will show the ‘raw’ code of your web page at the top half of the window and the ‘Design’ view at the bottom half.  If you have a smaller screen resolution, then Dreamweaver will start up in ‘Design’ view only.

In order to standardise the Dreamweaver window, click “View > Design” from the menu bar.  This will change the window to ‘Design’ mode where only your web page will be viewed.  You can however return back to ‘Split’ mode by clicking “View > Code and Design”.  Please note that throughout this tutorial, including the screenshots, assume that you are in ‘Design’ mode at all times

You have now created a two column web page with a header and footer.

Add a comment Read more

Posted by Colin Welch in Dreamweaver CS4 Tutorial on March 13th, 2009 | No Comments »

Working with Text in Dreamweaver CS4

Written by Colin Welch – 06.03.09

Tweet This

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.

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 Colin Welch in Dreamweaver CS4 Tutorial on March 6th, 2009 | 2 Comments »

CSS (Cascading Style Sheets)

Written by Colin Welch – 16.03.09

Tweet This

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.

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 Colin Welch in Dreamweaver CS4 Tutorial on March 16th, 2009 | No Comments »

How to change fonts in Dreamweaver

Written by Colin Welch – 16.03.09

Tweet This

Part 3.2: How to change fonts in Dreamweaver

All this is covered in our comprehensive Dreamweaver course.

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 Colin Welch in Dreamweaver CS4 Tutorial on March 16th, 2009 | No Comments »

Different Coloured Text

Written by Colin Welch – 16.03.09

Tweet This

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.

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 Colin Welch in Dreamweaver CS4 Tutorial on March 16th, 2009 | No Comments »

Dreamweaver Key Commands.

Written by Colin Welch – 27.04.09

Tweet This

Here are some useful shortcuts and keyboard strokes that you might find helpful when training or dealing with Dream weaver.

Add a comment Read more

Posted by Colin Welch in Dreamweaver CS4 Tutorial on April 27th, 2009 | No Comments »