Unit N : F181 11
Outcome 2 & 3
Lecturer: J Mclellan
Board of Management of Motherwell College : Registered Charity Number SC021206
Table of Contents
Introduction to Photoshop ....................................................................... 4
Exercise 1 Creating a New Document ................................................ 9
Exercise 2 Adding a Gradient.............................................................. 10
Exercise 3 Adding Text ........................................................................... 10
Exercise 4 Adding Shapes & Text ........................................................ 11
Exercise 5 Saving ..................................................................................... 12
Creating a website using Dreamweaver CS3 ................................. 14
Exercise 1: Storyboards .......................................................................... 14
Exercise 2: Starting Dreamweaver CS3/Defining Site ................... 16
Exercise 3 Defining an Image Folder ................................................. 20
Exercise 4: Adding a Title ...................................................................... 21
Exercise 5: Adding Background Colour ........................................... 22
Exercise 6: Adding Tables/Images ..................................................... 23
Exercise 7: Adding Text & Testing ....................................................... 27
EMINEM .................................................................................................................. 27
Exercise 8: Editing Text ........................................................................... 29
Exercise 9: Adding Text & Hyperlinks ................................................. 30
Exercise 16: Evaluate the finished Web Site..................................... 31
Page 2 DV5M 34 Web Design Fundamentals 2010
Page 3 DV5M 34 Web Design Fundamentals 2010
Introduction to Photoshop
In the following exercise you will use Adobe Photoshop CS3 to create a
banner that will be used in your web page. The banner will include text
colour and a shape. Photoshop CS3 is a program that is used by web
designers, photographers and designers. Photoshop can be used for
various different purposes, enhancing images, creating banners or
optimising images for use on the web.
Open Adobe Photoshop CS3 by going to Start | All Programs | Adobe
Master Collection CS3 | Adobe Photoshop CS3
Page 4 DV5M 34 Web Design Fundamentals 2010
First of all the TOOL PALETTE
When you see a small arrowhead
In the bottom right corner of the tool
In this case the Rectangle tool
Click the arrowhead to view more
Options available for this tool.
All The Letters in brackets are shortcuts that allow you to flip between tools by
pressing the letters on the keyboard, below is a quick guide to some of the tools.1
Move tool: The move tool is used in order to select layers within an
image and move them around or make changes.
Marquee Tool: This tool is used for selecting exact or certain
areas within a graphic and can be used to select
square or circular areas.
Lasso Tool: Lasso does exactly what it says and grabs the selection
that you run around using the mouse. There are other
options within this tool i.e polygonal lasso (straight lines)
and the magnetic lasso which sticks to the edge of the
path you select.
Visit the website http://www.freetimefoto.com/photoshop_cs3_toolbox for more information on the tools
Page 5 DV5M 34 Web Design Fundamentals 2010
Quick Selection: You can use the Quick Selection tool (W), new in
Photoshop CS3, to quickly paint a selection using an
adjustable round brush tip. As you drag, the selection
expands outward and automatically finds and follows
defined edges in the image.
Crop Tool: The crop tool does exactly what you would expect
it to do, if you select an image using the marquee tool
and then go to IMAGE – CROP the section inside the
marquee will remain in tact and anything outside the
marquee will be deleted.
Slice/Slice Select: Use Slice Tool(K)tool to divide large image to small
connected pieces of rectangle image that is useful for
Eraser tool: The eraser tool acts just like a rubber and can be
adjusted to different sizes using the brush options.
Brush tool: The brush tool is used for directly painting onto the
blank canvas and can be resized, or different brush
shapes and styles can be selected
Gradient tool: Used to fill shapes with a gradient fill as opposed
to a normal one colour fill. You can customize your
gradient fill to appear in any direction as well as any
selection of colours.
Text tool: Create amazing looking text, fill it, bend it, emboss it
merge it, the limits are endless with the text tool, you
can also type your text in any direction, or even give it
a special gradient fill.
Shape tool: The rectangle tool is just one of the many options
available from this menu.. you can also select
Other shapes, elipse, polygon, custom or line
from this menu
Zoom tool: zoom tool lets you view your work in great detail
or from a distance. Great for those tiny jobs like
using the eraser on fine detail or colouring a very
small section with the brush tool.
Page 6 DV5M 34 Web Design Fundamentals 2010
These colours can be changed by first left clicking on either foreground or
background, which will then prompt you with a box like the one below
where you can select your new colours.
Editing modes are used in order to enhance the area you have to work in.
You can select different modes to create more space, which is essential,
especially if you are working on a small screen.
More Floating Palettes
Set layer Opacity
Indicates Layer Visibility
Delete layer by
dragging layer to bin
Create New Layer
Page 7 DV5M 34 Web Design Fundamentals 2010
The layers palette above gives you control over your work and is the
perfect solution for hiding or showing certain layers. You can also link
layers so that they all move together, change the transparency on
individual layers using the opacity option or delete and create new layers
with the 2 small icons at the bottom of the palette. The thumbnails option
lets you see a small image representing what’s in that layer.
The first few exercises are mainly to get you used to using some of the
most common tools and also working with layers. If you can keep this in
mind when progressing through the exercises they will be a bit easier as
you will use a lot of the same skills.
Page 8 DV5M 34 Web Design Fundamentals 2010
In the following exercises you will create a banner that can be used on a
web page. The banner will be optimised for this when saved.
Exercise 1 Creating a New Document
1. With Photoshop open create a new document. File | New
2. Complete the dialog box as shown below and click OK.
Page 9 DV5M 34 Web Design Fundamentals 2010
Exercise 2 Adding a Gradient
1. Change the foreground and background colours to red and black
from the tools bar.
2. Select the gradient tool from the tool bar.
3. Position your mouse pointer at the foot of the new document in the
centre and click and drag your mouse to the top of the document.
This will create a gradient background as shown below.
Exercise 3 Adding Text
1. Select the text tool from the toolbar.
2. Change the properties of the text toolbar to the same as shown below.
3. Click inside the document and enter the text as shown below.
Page 10 DV5M 34 Web Design Fundamentals 2010
Exercise 4 Adding Shapes & Text
1. Select the Ellipse tool
2. Click and drag a circle out similar to what is shown below.
3. If you require to move the shape use the move tool.
4. Select the text tool and add a + making sure it uses the same format as the
previous text. Similar to what is shown below.
5. Use the move tool and move the + into the circle that you have drawn. Your
completed banner should resemble the image below.
*If you look on your layers palette you will notice you have four layers, background,
EMINEM, Shape 1 and the +. When you wish to move any of these objects you have to
make sure the layer is selected first.
Page 11 DV5M 34 Web Design Fundamentals 2010
Exercise 5 Saving
With Photoshop there are various formats that you can save your images
to. The two main ones that we will consider are a jpeg and psd file. The
jpeg file format will allow use to optimise the image for web used and will
group the image as one. The psd file format is what Photoshop uses, this
allows you to return to the document and work on the layers you created
or add new where as the jpeg won’t allow this.
1. Select the file menu and click Save As.
2. In the file name enter banner.
3. In the file type select JPEG
4. Make sure you are in your Homedrive.
5. Select create new folder option and name the folder Web Images.
6. Open the folder if required and then save.
7. In the next dialog box you can change settings so that it will reduce
the file size, this allows for quicker download of your web page.
Make sure your settings are set to the same as shown below and
click ok. You have now completed Photoshop exercise. Close
Photoshop and don’t save if prompted.
Page 12 DV5M 34 Web Design Fundamentals 2010
Page 13 DV5M 34 Web Design Fundamentals 2010
Creating a website using Dreamweaver CS3
In the following exercises you will create a website on Eminem consisting
of one web pages. The website will have an index (home) page. You will
insert tables as containers. You will apply a background colour to the
web page, the text format will also follow a standard format, hyperlinks will
be contained within a table so navigation is easily followed.
Make sure you have the following before we start;
Images (Eminem, cd cover and the banner you created).
The images can be downloaded at www.mcitgroups.wikispaces.com and
then click on the eminem zip file, open the file and then extract all files to
your web images folder.
Exercise 1: Storyboards
There are various procedures you should follow when you build a website
these are as follow:
Analysis: Analyse what is required, what is the purpose of the
site, who it has to reach, who will use the site. Meeting with
Design: Design a solution to fit the analysis stage. Storyboards
to show layout, colours and links within the site. Meet with
client to review design before proceeding to build site.
Implement: Implement design
Test: Test the completed solution and fix any bugs. Meet with
client and demonstrate finished solution.
Documentation: Although this is the last stage it should be
documented all the way through the process.
Storyboards can be in many formats from a drawing on a scrap of paper
to professionally designed storyboards. I have created the storyboards for
this website using Microsoft Word and inserting a diagram to show the links
within the site and also use the drawing tools to show each page layout.
Page 14 DV5M 34 Web Design Fundamentals 2010
Eminem Web page storyboard
Background Colour Black
Text Colour White and Red
Text Format Heading 3, Default, Size 18, aligned centre.
Table 1 Centre of page 75% width with 2 columns and 3 rows
Created Banner Image Eminem Image
Information text Cd cover image
Movie list Album Ordered List
Table 2 Centre of page 75% width with 1 columns and 1 row
Page 15 DV5M 34 Web Design Fundamentals 2010
Exercise 2: Starting Dreamweaver CS3/Defining Site
1. Create a folder in your homedrive called eminem and copy the
images folder created earlier into this into this folder.
2. Open up Dreamweaver CS3
3. Once open you will be given the options to open a recently saved
item, create new or create from samples
Recent Items Create New Create from Samples
4. Select the Dreamweaver Site from the Create New section.2
5. The site definition dialog box will appear. Replace Unnamed site
with Eminem and click next.
If you have a folder created with your elements (images, text) you can create a new site by accessing
HTML | Site | New site
Page 16 DV5M 34 Web Design Fundamentals 2010
6. The next step is to decide if you want to use server technology, click
the No option and click next.
7. The next step is where you will work with your files, for the purpose of
these exercises select Edit directly on server using local network.
Select on the browse option and then browse to your home drive,
select the eminem folder and open it then click select.
Page 17 DV5M 34 Web Design Fundamentals 2010
8. The next step is how you connect to your remote server, the remote
server is where your files will be uploaded to. Make sure this is set as
None and click next.
9. The next step is a summary of what you have just completed. Make
sure that your root folder is set to your desktop. Click done
Page 18 DV5M 34 Web Design Fundamentals 2010
10. The setup steps just completed has now created a folder for all your
web pages and files. Any pages saved will now automatically save
to this folder and any other files that you use will automatically be
11. Click on HTML in the Create New section to start building your site.
Page 19 DV5M 34 Web Design Fundamentals 2010
Exercise 3 Defining an Image Folder
By defining an image folder in your site, this will copy all images into this
folder when you insert an image into a web page from a folder outside
the site folder.
1. Select the site menu and then open the manage sites.
2. From the dialog box select your site and click edit.
3. From the site definition dialog box click advanced and make sure
local info is selected.
4. Click the folder next to Default images folder, this will open the
defined site, open the image folder by double clicking then click
select, this will return you to the manage sites dialog box, click Ok
Page 20 DV5M 34 Web Design Fundamentals 2010
Exercise 4: Adding a Title
In this exercise you will add a title and save your home page.
1. In the title area add the title "Eminem Home Page"
2. Now save your home page as index.html. File | Save* | File Name
Use Save as this will take you to your website
folder. If you use Save As this will take you to the
default folder (My Documents)
When saving web site pages be consistent with the
naming. It is advised that all web pages are saved
with lowercase and normally with no spaces
between words, it is better to use an underscore
rather than a space.
Page 21 DV5M 34 Web Design Fundamentals 2010
Exercise 5: Adding Background Colour
In this exercise you will add the background colour for the web page.
1. Select the Modify menu and select Page Properties.
2. This will open the dialog box shown below.
3. Select the background option.
4. From the colour pallet select a black #oooooo and click ok. This
has set your web page background colour. Save your changes.
Page 22 DV5M 34 Web Design Fundamentals 2010
Exercise 6: Adding Tables/Images
In this exercise we will add a table to hold our images and text, the table if
you refer back to the story board will have two columns and three rows.
On the Insert toolbar make sure the common option is selected.
1. Select the table option, the table dialog box shown below will
open. Change the settings so they are the same as shown below.
2. You will now see in your document window the table you have just
inserted. Expand the document window so that you have a better
view, this will hide the panels.
Click here to
Page 23 DV5M 34 Web Design Fundamentals 2010
3. Make sure the table you inserted is selected. To identify if the table
is selected it will have a heavy black line around it.
4. From the tables properties change the alignment from the default
5. We will now insert the banner into the first cell in the table. Click
inside the table and open the panels back up, open the images
folder from the files panel and click and drag the banner image
into the table. Your banner should now be inserted into the table.
Page 24 DV5M 34 Web Design Fundamentals 2010
6. Select the banner image and resize the image in the properties
area to the same as shown below.
7. We will now insert the image of eminem and resize this to the same
size as the banner. Use the same procedures as before. Your page
should resemble the image below.
8. Now insert the cd cover image using the same methods as
previously and resize the image.
9. We will now insert our second table, this will be positioned directly
below the first table. Click outside the first table at the right hand
side. Insert the table using the same methods as before. Use the
table properties to align the table in the centre.
Page 25 DV5M 34 Web Design Fundamentals 2010
10. Your web page should resemble the image below.
11. Save your work by using File | Save As | Save
Page 26 DV5M 34 Web Design Fundamentals 2010
Exercise 7: Adding Text & Testing
In this exercise we will add text to the page. The text that will be added
will give some information about Eminem and will provide a list of movies
and an ordered list of albums. We will then test our page to see how it
looks in Internet Explorer
1. Click inside the cell opposite the cd cover image.
2. Change the properties for text as shown below. (Size 18, Colour
#FFFFFF and aligned center).
3. Enter the text shown below into the cell.
Marshall Bruce Mathers III (born October 17, 1972), better known by
his stage name Eminem (often styled "EMINƎM"), is an American
rapper, record producer, actor and singer. Eminem quickly gained
popularity in 1999 with his major-label debut album, The Slim Shady
LP, which won a Grammy Award for Best Rap Album. The following
album, The Marshall Mathers LP, became the fastest-selling solo
album in the United States history
4. Below the cell enter the text shown below with the text format,
Colour white and size 18pt. In the opposite cell enter the
information about the albums with the same formatting.
The Wash Encore
8 Mile The Marshall Mathers LP
Page 27 DV5M 34 Web Design Fundamentals 2010
5. Your web page should now resemble the image shown below.
6. Save the changes. File | Save As | Save.
7. Now test your page to see how it looks in Internet Explorer either
press the F12 key or click on the
Page 28 DV5M 34 Web Design Fundamentals 2010
Exercise 8: Editing Text
In this exercise we will edit the text that has been entered. We will add a
heading style, we will create a list and ordered list
1. Select the heading Eminem above the paragraph of text.
2. Use the properties and apply a Heading 3 style.
3. Apply the same style to the headings Movie and Albums.
4. Select the text about Eminen and align the text centre using the
5. We will now create an un-ordered list for the three movies. Select
the three movies and apply an un-ordered list by clicking on the
button in the properties area. If you loose the text use the
properties and set the format to size 18pt and colour white.
6. Now change the three albums to an ordered list and change the
format of the text if required.
7. Save any changes.
Page 29 DV5M 34 Web Design Fundamentals 2010
Exercise 9: Adding Text & Hyperlinks
In this exercise we will add hyperlinks that will take your visitors to other
web pages. The links will be added to text that will be key words.
1. Click in the table at the bottom of the page.
2. Enter the heading links. Format the heading to the same format as
the other headings (Heading 3, white and center)
3. Add the text Music and Eminem below the heading, this is the text
we will use to create links to a music site and the Eminem site.
4. Select the text Music.
5. In the properties area add the web site address
http:\\www.grooveshark.com in the links box.
6. Add the http:\\www.eminem.com link to the eminem text.
7. Save your web page and then test the page using the F12 key,
make sure the links are working ok.
Page 30 DV5M 34 Web Design Fundamentals 2010
Exercise 16: Evaluate the finished Web Site
Communication (Purpose, content, links, up-to-date)
Layout (White space, balance)
Consistency (Text format, image sizes, background colour)
Visual Clarity (Cluttered, easily read, does colour suit subject matter)
Navigation (Links easy to understand and use, do links work correctly, is
there to many links)
Download Speed (What could effect the speed of this site)
Page 31 DV5M 34 Web Design Fundamentals 2010