Docstoc

workbook

Document Sample
workbook Powered By Docstoc
					INTRODUCTION
     TO
               WEB DESIGN

                   o
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
            Section 1

         Introduction to
         Photoshop CS3




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




                         Floating Pallets




Page 4               DV5M 34 Web Design Fundamentals                 2010
First of all the TOOL PALETTE



NOTE:

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.




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


           Foreground
                                                    Background




           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
Indicates Layer Visibility




        Layer Thumbnails
                                                                   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
              Section 2

            Introduction to
          Dreamweaver CS3




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




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.




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




   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
      then done.




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"



                                               Title




   2. Now save your home page as index.html. File | Save* | File Name
      = index.html
                                 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.
      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




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.




                                                                Selected
                                                                table




                         Table
                       Properties




   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.



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.


                                       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

         solo album
   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.



      Movies                                 Albums

      The Wash                               Encore
      8 Mile                                 The Marshall Mathers LP
      Freestyle                              Infinite


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




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

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:3
posted:10/25/2012
language:English
pages:31