Creating a website using Dreamweaver CS3 - John Laceyjlaceytutor.weebly.com/.../9/6/38967761/workbook.docx · Web viewIn the following exercise you will use Adobe Photoshop CS3

1 | P a g e

INTRODUCTION TO

WEB DESIGN

Table of ContentsIntroduction 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

Section 1

Introduction to Photoshop CS3


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


Floating Pallets

First of all the TOOL PALETTE

NOTE:

When you see a small arrowheadIn the bottom right corner of the toolIn this case the Rectangle tool

Click the arrowhead to view moreOptions 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.

Quick Selection: You can use the Quick Selection tool (W), new in Photoshop CS3, to quickly paint a selection using an

1 Visit the website http://www.freetimefoto.com/photoshop_cs3_toolbox for more information on the tools


http://www.freetimefoto.com/photoshop_cs3_toolbox

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

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 optionsavailable from this menu.. you can also select Other shapes, elipse, polygon, custom or linefrom this menu

Zoom tool: zoom tool lets you view your work in great detailor from a distance. Great for those tiny jobs like using the eraser on fine detail or colouring a verysmall section with the brush tool.


Foreground/Background colour:

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.

ForegroundBackground

Editing Modes:

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

Delete layer by dragging layer to bin

Create New Layer

Layer Thumbnails

Indicates Layer VisibilitySet layer Opacity

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.


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 | New2. Complete the dialog box as shown below and click OK.


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.


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.


1.


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.


Section 2

Introduction to Dreamweaver CS3


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

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


http://www.mcitgroups.wikispaces.com/

diagram to show the links within the site and also use the drawing tools to show each page layout.

Eminem Web page storyboard

Background Colour BlackText Colour White and RedText Format Heading 3, Default, Size 18, aligned centre. Hyperlinks Blue

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

Links



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

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.

2 If you have a folder created with your elements (images, text) you can create a new site by accessing HTML | Site | New site


Recent Items Create New Create from Samples

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.


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


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

11. Click on HTML in the Create New section to start building your site.


Exercise 3 Defining an Image FolderBy 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 then done.


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 = index.html


Title

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.

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.


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

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 expand document window

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

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.


Selected table

Table Properties

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.

10. Your web page should resemble the image below.Page 27 DV5M 34 Web Design Fundamentals 2010

11. Save your work by using File | Save As | Save


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.

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.

5. Your web page should now resemble the image shown below.


EMINEM

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

Movies

The Wash8 MileFreestyle

Albums

Encore The Marshall Mathers LPInfinite

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


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

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.


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.


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)
