1. The Power of Tables They aren't just for sitting stuff on anymore...

2. Tables on the Web n Used quite frequently n Two basic types –Text table –Graphic table

3. Text Table n only text n standard typewriter characters n use fixed-width fonts (typewriter fonts) n NO proportional fonts

4. n use this tag for the text table n see example on resource page (Lab Help)

5. Graphic Table n Can be complicated with HTML n Let's look at the basic tags

6. Table tags first cell second cell third cell fourth cell

7. More tags This is the header Here is a top caption Here is a bottom caption

8. Modifying Appearance increase size of table border increase gap between cell text and border increase the size of the border around individual cells

9. Table Alignment LEFT or RIGHT n Also can use to align table on page n Align text within cells with align tag

10. Table and Cell Size Need the "..." or What's the difference?

11. More Properties n All table tags can take the take the bgcolor attribute... n Spanning Cells - check the table examples

12. Page Layout with Tables n Work from outer to inner, left to right n Nested tables n Gutter n Work through Gargoyle example to get the hang of this n See Gargoyle on Resource site

13. Explorer extensions n n Frames and Rules –frame: which sides of table will have borders –rule: specify the table grid (all, cols, rows, none)

14. Frames Looking at the Big Picture

15. Frames n What exactly are frames? n Attitudes about frames... n Should you use frames?

16. Planning for Frames n What information should be displayed in each frame? n How do you want the frames organized? What sizes? n Which frames will be static? n Which frames will respond to hyperlinks? n What is the main Web site layout? n What about resizing and the possibility of changing the layout?

17. Frames are just that... n Frames are HTML documents that pull other HTML documents together and present them in one place...

18. Basic Frame Layout frame definitions

19. Frame Layout n Notice there is no n Why?

20. Columns and Rows n you can use either cols or rows in each but not both <frameset cols = "column width, column width, column width"

21. Columns and Rows n You can use: –pixels –percentage –* –You can combine all three –Should always use an "*" accounts for browser display widths: 640 x 480, 800 x 600, etc.

22. Frame Source n You have to supply the source: the HTML document n Without the source, you have empty space

23. Example Columns Sample Frame Columns

24. Examples n View the examples on-line n http://homepages.wmich.edu/~rea/38 0/resources/labhelp.htm http://homepages.wmich.edu/~rea/38 0/resources/labhelp.htm

25. Nesting Frames n If you want both rows and columns or multiples of either, you must NEST your FRAMES n When you NEST frames, your FRAMESET proportions adjust accordingly

26. FRAMESET in Nested

27. Controlling Frame Appearance n Frame Scroll Bars n Size of margin between source document and frame border n Whether or not the user is allowed to change frame width and height

28. Frame Scrolling n value = yes or no n Only set to "no" if you are sure all of page will display. n Check different screen resolutions.

29. Frame Margins n Browser automatically determines the spacing, but sometimes the space between the border and the content is too large or small...

30. More on Margins n MARGINHEIGHT = space in pixels that appears above and below the content of the page in the frame n MARGINWIDTH = space in pixels that appears the page's left and right n Don't have to specify both. Can use one and the browser will assume the same for the other n inline image = 0 to 1 n text = 5 to 10

31. Frame Resizing n Use to freeze layout once you have it how you want it.

32. Combining Frames and Hyperlinks n By default, clicking a hyperlink within a frame loads the HTML document into the same frame... n You need to give each frame a name and then TARGET that frame in the HYPERLINK

33. Frame NAMING n case sensitive n single word link

34. n If you want to use the same target for all links in a page n Other target tags in the page will supercede the

35. Magic Target Names n Special tags that can be used in place of a frame_name in a HYPERTEXT link n Case sensitive

36. Magic Target Names (cont.) _blank = loads the document into a new browser window _self = loads the document into the same frame or window that contains the hyperlink tag _parent = in nested frames, loads the document into the frame that contains the frame with the hyperlink tag _top = loads the document into the full display area, replacing the current frame layout

37. n Need to use the to be viewable by browsers that cannot read frames

38. in action entire frame layout page layout

39. Frame Tips n Create framed and non-framed versions of your Website to accommodate all browsers n Do not turn off scroll unless you are sure all content can be visible given screen resolutions n Assign names to ALL of your frames n Use the tag whenever possible n Never display external pages within your frames (If you didn't design it and you don't have control over it, don't use it in your frames.)

40. Frame Extensions

41. Exercise #2 n http://homepages.wmich.edu/~rea/380/ exercises/ex2.jpg http://homepages.wmich.edu/~rea/380/ exercises/ex2.jpg