Web Design Lesson 4
Download as PPT, PDF0 likes203 views
The document provides instructions for creating a photo gallery website using HTML tables. It explains how to size tables using pixels or percentages to accommodate different screen sizes. It recommends setting table widths between 70-90% for reasonable sizes. The instructions then guide the reader to create a photo gallery with a table of small thumbnail images linking to full-size photos. Testing of links and organization of consistently sized images across pages is emphasized.
Web Design Lesson 4
- 1. M6
- 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. 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. 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. 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. 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. 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. I will be grading your websites. Design Navigation Colours Links Text Pictures Menu
- 9. Website Layout Home Page Text Page Image Page Photo Page Photo Photo Photo Photo