Elizabeth Brown,  February 2005 
Page 1 of 4 
G6DPMM – Principles of Multimedia 
Lab session 1 – Writing web pages using a WYSIWYG editor 
Exercise sheet 
 
 
Dreamweaver is a website creation and management tool, as well as a document creation and 
editing tool – thus you can create whole sites using Dreamweaver, not just individual pages. 
 
In this lab session, you should create a new folder called “test”, under your public_html directory, 
and use this folder to store all your documents you create in this session.  
To do this, go into Windows Explorer, click on the H:\ drive and select the public_html folder (in 
the left-hand side of the window). Then right-click on the right-hand side of the window, then select 
New  Folder, and name it test. 
 
Now open up Dreamweaver – you should find it opens up a new document, and you are now ready 
to start. 
 
 
 
Defining a local site and creating a homepage 
 
  
1. The first thing you should do is save this first document. Click on File then Save as and 
save your file under H:\public_html\test Your file should be called index.html 
 
Saving files under your public_html folder means that anyone can see it on the web. The 
address of your website will be  
http://www.cs.nott.ac.uk/~username/test/  (where username = your CS username) and 
this page will be http://www.cs.nott.ac.uk/~username/test/index.html 
 
2. You can now create your index.html page using any of the design views in Dreamweaver. 
You can hand-code it in HTML or create it completely visually, with no viewing of HTML 
code at all. 
You can also import Word documents, and use the Dreamweaver facility to convert them to 
HTML. 
3. Read through the lab sheet (http://www.cs.nott.ac.uk/~ejb/pmm/dwintro.pdf) and 
familiarise yourself with the features of the work area. 
 
 
 
Adding content and hyperlinks to a homepage 
 
 
1. Type this text into your index.html page (note – only press Enter once after each line). 
--------------------------------------------------------------------------------------------------------------- 
Test Home Page 
 
This is a new web site I am creating. I am using it to try out different features in Dreamweaver. 
 
This is my email address. This is the web address of the University of Nottingham. 
 
The features I will be using are: 
 
Elizabeth Brown,  February 2005 
Page 2 of 4 
 
Headings 
 
Lists 
 
Horizontal lines 
 
Images 
 
Tables 
 
Hyperlinks 
--------------------------------------------------------------------------------------------------------------- 
 
2. Note that your document is now called index.html* in the title bar. The * means that the file has 
been changed but not saved. Press CTRL-S  to save your page every now and again. 
3. Before spell-checking the document, check that Dreamweaver is not using a US dictionary – 
click on Edit  Preferences, then in the Category column on the left choose General (if 
necessary) and alter the spelling dictionary so it is set to English (UK –ise). 
4. Spell-check your document by clicking on Text  Check spelling (or press Shift + F7). 
5. Note that when you press Enter, Dreamweaver inserts 
 tags around your work. If you don’t 
want the text to be in a paragraph, press Shift + Enter, or Insert  Line break. This will put in a 
line break, or 
 tag, instead. 
6. Change the page title (this appears in the title bar at the top of your web browser). Click on the 
Title text box, delete the text “Untitled Document” and insert your new title “My Home Page”. 
Press Enter to confirm. Now save your work and preview your page by pressing F12. 
 
You can also preview your work by going to the web address in your web browser. Note that by 
pressing F12, you create a temporary copy of your page, called something like 
TMPel216af92k.htm – basically, a load of meaningless characters assigned to the filename. 
Every time you press F12, you will get a different temporary page created. 
 
 
 
Formatting and enhancing web pages 
 
 
1. Click anywhere on your ‘Test Home Page’ title in the main window. Align the text in this 
paragraph by clicking on the centre button on the Properties palette. Re-save your work. Note 
that the alignment affects all the text in that paragraph. 
2. Now apply different headings to your text. Click on the ‘Test Home Page’ title again, and change 
this to be Heading 1 or 
. To do this, click on the Properties palette and then on Format 
  Heading 1. 
3. Change the appearance of the font used in your page. Click on CTRL-A to select everything on 
your page, then click on the Properties palette, and change it from ‘Default font’ to ‘Times 
New Roman’ from the font list box. 
Highlight the ‘Test Home Page’ title and change its size to 3 in the Size box. Re-save your work. 
4. To change the colour of your text, select the required text and choose a colour from the 
Properties palette (the grey box on the right of the Size box). Note that these colours are “web-
safe” i.e. supported by all browsers. 
5. Highlight all of the text from ‘Headings’ to ‘Hyperlinks’. Convert these to either an ordered 
(numbered) or unordered (bulleted) list by clicking on the appropriate icon in the Properties 
palette, or click on Text  List then selecting ordered or unordered list. 
Elizabeth Brown,  February 2005 
Page 3 of 4 
6. You can change the appearance of your list by changing its properties. Click the right mouse 
button on any item in the list you want to modify, then select List  Properties from the menu. 
You can then change the way the list looks. 
7. You can also use the ‘Links’ box in the Properties palette to add in an email link to some text, 
or make a hyperlink from some text. Select the text that says “This is my email address” and in 
the ‘Links’ box of the Properties palette, type in mailto:username@cs.nott.ac.uk (where 
username is your CS username). Next, select the text that says ‘This is the web address of the 
University of Nottingham’ and type http://www.nottingham.ac.uk into the Links box. 
8. Finally, insert a horizontal line between your first line (the title) and the rest of the text. Do this 
by placing the cursor at the end of ‘Test Home Page’ then clicking on Insert  Horizontal rule 
or by clicking on the ‘Insert horizontal rule’ icon in the Objects palette. You can change the 
length, width and alignment of the line by changing its properties in the Properties palette. 
 
NB. The Objects palette contains several different panels: 
 
- the Characters panel contains special symbols such as the copyright symbol 
(NB. These may not display correctly on all browsers) 
 
- the Common panel contains the most commonly used objects 
 
- the Forms panel is for creating forms 
 
- the Frames panel contains common frameset structures 
 
- the Head panel contains buttons for adding various HEAD elements 
 
- the Invisibles panel contains buttons for creating objects that are not visible in 
the Document window, such as comments or named anchors 
 
- the Special panel contains buttons for inserting special items such as Java 
applets, plugins and ActiveX objects 
 
 
 
Using tables 
 
 
Tables are really useful for organising text, graphics and data on your web page, and also for 
positioning and page layout. You don’t have to have cell borders showing, and so the table itself does 
not have to be visible. 
There are several different ways to insert a table into your page. The quickest way to do this is using 
the Insert table icon on the Objects palette.  
 
1. Start a new document in Dreamweaver and save it as tables.html under H:\public_html\test 
2. Change the page title from ‘Untitled Document’ to ‘My tables page’ and re-save it. Type in some 
text that says ‘Tables page’ and set it to be Heading 1, font type Arial, size 3 and in bold. 
3. Insert a new table, and set the number of rows to 3 and columns to 2. 
4. Try adding or deleting columns or rows by clicking the relevant place in the table, then clicking 
on Modify  Table and then either Insert row / Insert column, or Delete row / Delete 
column. 
 
When selecting table layout options, there are several properties you can change the values of: 
- you can select the width and height of a table in pixels or as a percentage of the 
browser window – this is not advisable however, since not all browsers support 
it, and it does restrict you somewhat 
- use the Align field to specify how the table aligns with other elements in the 
same paragraph 
Elizabeth Brown,  February 2005 
Page 4 of 4 
- in the V space and H space fields, these specify the number of pixels of white 
space to leave above, below and on both sides of the table (again, not 
supported by all browsers) 
- use the Clear row heights and clear column widths to delete all row height 
and column width values from the table 
- use the Modify  Table menu to do things like Convert table widths to 
percent to convert the current table width from pixels to a percentage of the 
browser window 
- in the CellPad field, specify the number of pixels between the cell content and 
the cell boundary 
NB. default value is set to 1 
- in the CellSpace field, specify the number of pixels between each table cell 
NB. default value is set to 2 
- in the Border field, the width of the border is specified in pixels – to have an 
invisible border, set this to 0. 
 
 
 
Working with graphics 
 
 
Dreamweaver can support both JPG and GIF images. Dreamweaver (and IE version 4.0 onwards, and 
Netscape Navigator 4.04 onwards) also support PNG images (PNG are the default file format for 
Macromedia Fireworks and are patent-free replacements for GIFs). 
 
When you insert an image into a Dreamweaver document, Dreamweaver automatically generates a 
reference to the file in the HTML code. Make sure there is a copy of this graphic in your current website 
folder, and that this reference is correct. Images should NOT be edited in Dreamweaver since they may 
be distorted and will still download the original image size. You should use something like Adobe 
Photoshop or Paint Shop Pro to edit your images. 
 
There are lots of freely available images on the Internet – try http://www.ncl.ac.uk/images/gifs4us/ if 
you want some to use in your test page. Right-click on the image, and select Save picture as then 
save it under H:\public_html/test. 
 
1. To insert an image into your page, click on Insert   Image or click on the Insert image icon in 
the Objects palette, and select the image you want to insert. Click on the Select button. 
2. You should always provide some alternative text for your images – this text will be shown in the 
mouse-over text and provides support for visually-impaired users, or those users who will turn of 
the ‘display images’ feature in their browser to download pages faster. 
Click on the Alt title box in the Properties palette – underneath the image size and thumbnail – 
and type in 1-3 words which describe the image. 
 
Go to  http://tinyurl.com/4nq8g  for more details on visually-impaired users and how to use access 
technology to help disabled users. 
 
 
 
Testing and maintaining your site 
 
 
Remember to test your web site using the sites mentioned in the main lab sheet. You will also need to 
maintain and update your website, to keep the information on there, current and up-to-date. For this 
reason, you may wish to include a statement saying “Site last updated on DATE” (where DATE is the 
date you modified it last).