• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Web Design Lesson 4

Web Design Lesson 4



M6 - Web Design - Lesson 4

M6 - Web Design - Lesson 4



Total Views
Views on SlideShare
Embed Views



1 Embed 1

http://www.slideshare.net 1


Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Web Design Lesson 4 Web Design Lesson 4 Presentation Transcript

    • M6
    •  We use tables to organise our pages neatly.  Images, text or animations can be placed within the cells of our tables.  We can make the borders of the tables invisible.  It is possible to set the width and height of the tables by pixels or percent of the screen.  For small tables it is fine to use pixels to size them, for larger tables it is better to use percent.
    •  The pixel size of users monitors can vary greatly.  Older computers use 800 by 600 pixels, or even 640 by 480.  A common setting is 1024 by 768 pixels.  Check the pixel setting on your computer, by right clicking on the desktop and clicking - settings.  If you set table size at 800 or 900 pixels, it will look fine on some computers but will be untidy on older machines. For this reason the percent setting can be used. About 70% to 90% width for a reasonable sized table should be fine.
    •  Create some tables in Dreamweaver and preview them.  To create a table select the Table icon, below:  Remember when you create a table, columns go down (vertical) and rows go across (horizontal).  If you are using your table for page layout, the border setting should be 0. If you want to display the borders, use 1, 2 etc.
    •  Today we will create a simple photo gallery.  The first page will display small versions of your pictures.  When you click an image it displays the full size photo in a new screen.  Also include BACK, NEXT and PHOTO PAGE links with each photo, so you can click through the photos.
    •  Select some photos to use in your gallery.  Create a table, about 5 rows by 5 columns.  Set the table width – 70% to 90%  Small photo size 160-120, large about 640-480. All the photos need to be the same size and ratio.  Add a nice background to each page.  Don’t forget page title! I am still seeing “Untitled Document” all over your websites…
    •  The most important part of this lesson is ORGANISATION.  You MUST have all the small and large photos the same size. You will need a lot of images and web pages for this task. Make sure your links all work before you upload. TEST your webpage.  Remember to use your web design folder.
    •  I will be grading your websites. ◦ Design ◦ Navigation ◦ Colours ◦ Links ◦ Text ◦ Pictures ◦ Menu
    •  Website Layout Home Page Text Page Image Page Photo Page Photo Photo Photo Photo