Thomas Hardye Science College

Web Design Workshop

• Home
• World Wide Web
• Introducing HTML
• Introducing CSS
• Dreamweaver Interface
• Top Tips
• Putting it all together!
• Design Principles
• Accessibility
• Useful Links
• Glossary

If you see this symbol in the text it is a Link to Glossary with more detailed information

Web Design & Dreamweaver Top Tips!

Web Design

• Fonts and Font sizing in websites
• Using Colour in websites
• Headings
• Don't use Click here!

Dreamweaver

• Working with more than one page in Dreamweaver
• Previewing your site in a Browser
• Paragraph & Line break in Dreamweaver
• Undo & History in Dreamweaver
• Checking for broken links in Dreamweaver
• Find & Replace in Dreamweaver
• Templates in Dreamweaver
• Using Library items in Dreamweaver
• Copy & Paste from Microsoft Word into Dreamweaver
• Cleaning up X(HTML) in Dreamweaver
• Adding a link to a document (eg.MS Word, pdf)

Web Design Top Tips

Fonts and Font sizing in websites

Stick to one font

It takes someone with dyslexia time to ‘tune in’ to a font. A site that uses a number of fonts can cause great difficulty for them. It can also look very messy try and stick to one or two different fonts.

Use standard fonts

Don't use obscure fonts remember your audience can be worldwide and use older computers or different computers from Windows such as Macs. When you define fonts with CSS declare more than one font.

For example:

          font-family: Georgia, "Times New Roman", Times, serif; 

This is insurance that if a user hasn't got a particular font on their system the font falls back to the next and if they haven't got any of them it will use its browser default which you have specified as a serif font (A small decorative line added as embellishment) as opposed to a sans-serif (without the twiddly bits!) which means it will be as close to what you as a designer specified.

          font-family: Arial, Helvetica, sans-serif;

Font sizing

It is vital to make sure that users have the final say about how large or small text should appear in their web browsers. The only way to ensure this is to assign flexible, relative sizes to all fonts in your pages.

Relative, or flexible, units to choose from:

1. Percentages (%) increase or decrease from the browser font size set
2. Em (relative to the size of the capital M)
3. Ex (relative to the size of the capital X)
4. Keywords (small, medium, larger, smaller, larger, etc.)
5. Signed units (+1, -2, etc) (HTML only)

Absolute, or fixed, units should not be used. These units include:

1. Points (pt)
2. Pixels (px)
3. Unsigned units (font size="1") (HTML only)
4. Standard measurement units (cm, mm, in)
5. Picas (pc)

Lower Case or Capitals

Don't use capitals in headings etc. It can be confusing for Screen Readers as they will spell out the word letter for letter. It is better to have proper headings or emphasise the text.

Using Colour in websites

Generally speaking, no two uncalibrated monitors display colours alike. There are several reasons for this inconsistency - variances in monitor design, graphics cards, computer configurations and even ambient room lighting.

Only use web safe colours, there are 216 cross platform web safe colours that ensure that all colurs you define display correctly. We are not sure how important this is now, since more and more computers are equipped with the ability to display millions of different colors, but the choice is left to you.

Use of colours is also very important for web accessibility the RNIB have a good section on Colour Contrast

Headings

Using Headings are important in web pages in separating blocks of text and making the site more usable and accessible.

• Headings should always be in a logical order, starting with Heading 1, Heading 2 and so on.
• Don't style ordinary text as headings as screen readers will not understand them as headings and cause confusion.

Don't use Click here!

Don't use "Click Here" as link text

When a user clicks a link it needs to be brief but meaningful link text that:

• provides some information when read out of context
• explains what the link offers
• doesn't talk about mechanics
• is not a verb phrase

Dreamweaver Top Tips

Working with pages in Dreamweaver

You can work on more than one web page at a time in Dreamweaver and the pages you have open will be shown as tabs above the Document toolbar above the Document window.

You will be able to see the pages you have been working on as they will have an asterisk by the page name. As with all documents you work on remember to save them regularly!

To save them you can save each one individually by using Save [Ctrl + S] or Save all from the File menu.

Previewing your site in Dreamweaver

When you are working in Dreamweaver it is always a good practice to regularly preview the work you are doing as it may look different in a Browser than in Dreamweaver.

As always there are more than one way to do this you can go File > Preview in Browser > IExplorer 6.0 if you only have one Browser installed. If you have more than one Browser it will list them, click on the one you want to preview your site in.

One of the quickest way is to press [F12] on your keyboard, Dreamweaver will prompt you to save the page if you haven't already. Pressing [F12] brings up the Default Browser or the only one!

Or as always another way and useful if you have more than one Browser you can click on the Globe in the Document toolbar above the Document Window. It will open up your list of Browsers and you can choose one to preview your site in. You can also edit your Browser list and add or change the defaults.

Paragraph & Line break in Dreamweaver

When you put text into Dreamweaver it should automatically create a paragraph. When you press return it creates a new paragraph and it will always have a line space between paragraphs, this is better for readability.

If you want to position a line of text just under another line use a line break <br /> in HTML. To do this in Dreamweaver press shift > return

Dreamweaver won't allow you to put more than one space in between words, or any other element on the page, so don't try and press the shift bar!

Undo & History in Dreamweaver

If you make a mistake as you are working on a page in Dreamweaver or something goes wrong! You can always use Edit > Undo and you can go back to when you first opened the particular file in that session. This can be a life saver ;-)

Or there is another facility Window > History which will open the History panel and shows you up to the last 50 (You can change this number in the General Category of Preferences. Edit > Preferences > General.) changes you have made.

You can move the slider to points on the list of actions where you wish to return to.

Again it could be useful.

Checking for broken links in Dreamweaver

There is a useful facility for checking if you have any broken links in your site

Select File > Check Page > Check Links.

The Broken Links report appears in the Link Checker panel (in the Results panel group).

OR Open the Results panel group Window > Results

The Results panel opens at the bottom of the page under the Property Inspector. You can use this for a number of options, but we will look at the Link Checker tab.

Click on the green arrow at the right of the panel to bring down a drop down box and then you can choose either to check the current document, a folder in your site or the entire site.

When you run the checker by clicking one of the options it will list any broken links and give you a report at the bottom of the panel. If you have a broken link double click on it in the results panel and it will be highlighted on the page or open the page and highlight the broken link if you are checking more than one document.

Find & Replace in Dreamweaver

This is another useful tool in Dreamweaver BUT use it with caution.

If you want to change some text or code in a page, folder or the entire site you can use this tool. But remember if you use it on unopened pages you will not be able to undo or go back with these documents.

For example you want to change the year on the bottom of this page from 2006 to 2007 go to Edit > Find & Replace and the Find & Replace dialogue box opens and you can change your options to what you want alter.

If you have chosen the entire site when you click Replace All it will warn you of what you are about to do!

If you use the Replace button on a single page it will change words one at a time, the best way use this facility until you are used to it.

Templates in Dreamweaver

Dreamweaver has a facility to produce templates that can be split into editable and non-editable regions. So if there are a number of people working on a website with different skills the templates can be useful as they allow only parts of the page to be changed. This means the design cannot get altered or accidentaly changed.

In the example below the Crumb Navigation and the Text area are editable regions so all the rest of the page will not be able to be altered. The template should be saved as a .dwt file.

We will not be going into using Dreamweaver templates as we haven't got time, but it is something you could look into in the future.

When I have been building websites for the schools in DASP I have made a basic page with the top banner, main navigation, footers and anything else that will show on every page and saved it as template.htm in a template folder. So when I want a new page I open the template.htm page and File >Save As the page you want. I have used this method on this website - view the template.

Using Library items in Dreamweaver

Designing a website can be difficult, especially when you would like to keep site features consistent. The Library facility within Dreamweaver makes this easier by allowing you to create a library of frequently used items, which can then be inserted as needed on web pages you create.

Any text or graphic can be made into a Library item. Once a Library item is created, you can place it on any web page in your site without having to retype, reinsert, or reformat it. The Library items can also be altered at any time, and all changes you make will appear throughout all the documents with the item.

I have found this useful with navigation, many times someone has asked me to add another button to the navigation bar. Really easy with a library and it updates all the links across the website so they all work correctly.

Library features are located on the Assets tab. Here you can find the tools necessary for creating, modifying, updating, and managing your Library items.

Creating a Library Item

Before Dreamweaver will allow you to insert or update a Library item, you must first identify that item as a Library item within the web page. Here are instructions on how to add an item to your site's Library. You must have your site defined before working with Library items.

1. Select any part of the web page you would like to make into a Library item
2. If the Assets panel is not displayed, from the Window menu, select Assets
   
3. On the Assets tab, from the Categories list, click select the Library button
4. From the Library pane, click New Library Item
5. While the entry is still highlighted, type a name for your new Library item
   

NOTE: You may name your Library item later by right-clicking the entry and selecting Rename.

Inserting a Library Item

Once you have added an item to your Library, you can now insert that item to your web page.

• Open the Assets panel
  
• Position the cursor where you want the Library item to appear on your web page
• From the list of Library items, select the item you want to use
• From the Library pane, click insert
• The Library item now appears on your web page.

NOTE: You can also drag & drop a Library item to your web page.

Editing a Library Item

There is more than one way of opening a Library item to edit it, here are two

1. Double click on the library file you wish to open in the Library list in the Assets panel
2. Click on the Library item in any page and click the open button in the Properties Inspector

• Make your changes to the Library item.
• When you are finished editing the item, Save or press [Ctrl+ S]

The Update Library Items dialog box appears.

Click Update (this is important!)

You will then get the Update Pages dialogue box which gives a log of pages changed.

• Click Close

Documents containing the Library item throughout your site will have been updated.

Copy & Paste from Microsoft Word into Dreamweaver

When you Copy and Paste from Word it may not display as expected in your web page although we have changed the Preferences of Copying & Pasting earlier in this course.

It all depends on how the page was typed in the first place if the spacebar was used to format the page there will be a lot of no back spaces put into the webpage. You won't see this but it will affect your web page layout.

I have found the best way to remove these spaces (Remember Dreamweaver only allows you to have one space) is to use Find & Replace.

• Click on the Code button in the left hand side of the Document Toolbar
• Open the Find & Replace dialogue box
• In the Find in drop down box make sure it says Current document
• In the Search drop down box choose Source Code
• In the Find box type &nbsp (include a semi-colon at the end)

• Leave the Replace box empty
• Click on the Replace All button
• Click on the Design button in the left hand side of the Document Toolbar

It will give a report in the Results panel at the bottom of the page on how many have been found. Then you will have to format your text without the spacebar!

I have put this tip in as it is one I come across regularly both in the websites I update and the DASP websites, as there is always a lot of Copying and pasting.

In one page I found about 4000 of the blighters!!!

Cleaning up X(HTML) in Dreamweaver

You can clean up X(HTML) in Dreamweaver Commands > Clean Up XHTML

This is useful for keeping coding tidy especially if you copy and paste from other applications. It will also fix any coding syntax problems.

Adding a link to a document other than HTML page

For example from Microsoft Word or an Adobe Acrobat (pdf) document.

When adding links to other file formats other than web pages it is always good practice to let people know what type of file they are opening up and its size. Have you ever clicked on a link and had to wait ages for a large pdf (Adobe Acrobat file) to download it can be fustrating!

To get over this always declare the type of file either with a logo or text and always put the file size next to it so people have the option to open it or not if they are on a slow connection.

For Example:

The full report is available to download as document (2.2mb)

Further information is available on our Help page about downloading or reading Adobe Acrobat documents.

OR:

Web Accessibility Audit Checklist Word document (53kb)

Remember also that people may not have Microsoft Office on their computers, usually computers are sold with Microsoft Works software bundled with them and they are not compatible. You can save simple WORD documents as .rtf files. In Word File > Save As and in the Save as Type drop down box choose Rich Text Format

If you can it pays to convert Microsoft Office files to Adobe Acrobat documents as they will open as intended by the author. Adobe Acrobat reader is available free to download and you can get free pdf converters on the web.

Always consider the file size of the document for example Microsoft PowerPoints can be huge!

I tried this one http://www.pdfonline.com/convert-pdf but if you use Google and search for pdf converter there are many others.

Next section Putting it all Together >>

Web Design Workshop - Science College/DASP 2007 Marilyn Peddle & Richard Scott