1. Web-based Application Development Lecture 9 February 7, 2006 Anita Raja

2. Programming the Web using XHTML and JavaScript Chapter 6 Web Page Design and Layout

3. Layout with Style Normal flow Page elements are interpreted: Top to bottom Left to right Can control some placement with float property or align attribute position property of style sheets provides specific placement information

4. Layout with Style img.tower {position:absolute; top:75; left:150}

5. Layout with Style … … Ch06-Ex-01.html

6. Layout with Style Placement is relative to containing block Could place image inside a paragraph that was itself positioned at some absolute set of coordinates Caution – using position removes the image from the normal flow but not anything else! Ch06-Ex-02.html

7. Layout with Style Magazine style Set height and width for most current monitors: Height = 400-500 pixels Width = 600 pixels No scrolling required See Figures 6.1 & 6.2, p. 144-145

8. Title Image Column 1 Column 2 Column 3 600 pixels 500 pixels

9. Layout with Style Use element Define a custom block-level element for each section of the layout

10. Layout with Style div.title {…} div.image {…} div.col1 {…} div.col2 {…} div.col3 {…}

11. Layout with Style div.title {position:absolute; top:0; left:0; height:60; width:600} …

12. Layout with Style Ch06-Ex-03.html padding – number of pixels between border and text (padding n or padding x y) overflow – whether or not text outside the borders is visible hidden visible Ch06-Ex-03a.html

13. Tables Nested tables Insert … within an existing … element

14. Tables

15. Tables Plain table Ch06-Ex-04.html Nested table Ch06-Ex-05.html

16. Frames Divide window into separate sections like Each section displays the contents of a separate HTML document Frames may: Have scroll bars Be resized

17. Frames First define a layout or frameset document:

18. Frames Define structure using the frameset element rows attribute cols attribute Units are: Percentage of window size Number of pixels Relative value

19. Frames Percentage of window size: Number of pixels:

20. Frames Relative value:

21. Frames Frames can be nested

22. Frames only specifies structure, not content Content requires a tag Each tag may have seven attributes

23. Frames src – The URL of the HTML document that will appear in the frame id – Assigns a name to the frame so it can be referenced by links in other frames marginwidth and marginheight – The size in pixels of the frame’s margins

24. Frames scrolling yes – The frame will always have scroll bars no – The frame will never have scroll bars auto – The frame lets the browser decide noresize – The user cannot drag the frame edges to resize the frame frameborder=0 – hides the frame’s borders

25. Frames Include one tag for each frame: Ch06-Ex-07.html

26. Frames element in case user’s browser doesn’t support frames: This Web page …

27. Frames Refresh/Reload button: Reloads frame(s) contents but Does not reload the layout ( ) document To reload a have to use menu: File, Open, etc.

28. Frames Linking between frames: Click link in one frame See result in another frame Add target attribute to tag: Click here to … Otherwise content appears in current frame Ch06-Ex-08

29. Frames Eliminating frames Frameset hierarchy Browser tracks framesets Browser window is at the “top” First defined is “down” one level … Browser window 1 st frameset

30. Frames Can set target to _top: … Ch06-Ex-10

31. Multiple Windows Just like specifying what frame in which to display a document: … Ch06-Ex-11

32. Assignment Debugging Exercise, p. 174 Correct errors Post corrected document to your Web space as “Lagerstrom-Ch-6.html” Grade based on: Appearance Technical correctness of code