Web Design Lesson 4


Published on

M6 - Web Design - Lesson 4

Published in: Education, Business, Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Web Design Lesson 4

  1. 1. M6
  2. 2.  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.
  3. 3.  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.
  4. 4.  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.
  5. 5.  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.
  6. 6.  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…
  7. 7.  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.
  8. 8.  I will be grading your websites. ◦ Design ◦ Navigation ◦ Colours ◦ Links ◦ Text ◦ Pictures ◦ Menu
  9. 9.  Website Layout Home Page Text Page Image Page Photo Page Photo Photo Photo Photo