1. COS 125 Day 25

2. Agenda  Assignment #7 Due  Final capstone progress report due next class  Assignment #8 Posted Due April 25 One more to go  Exam #5 is April 28 Castro Chap13, 14, 15 & 16 25 M/C questions, WebCT 50 min  Examples for everything in this lecture http://perleybrook.umfk.maine.edu/samples/Framestyle.htm= http://perleybrook.umfk.maine.edu/samples/Framestyle.htm  Website for text book http://www.cookwood.com/html5ed/  Lecture/Discuss Frames

3. Learning objectives  Understand the advantages and disadvantages of using Frames  Create a frameset with both rows and columns  Create an inline frame  Understand how to control frames margins, scroll bars, borders and resizeability  Understand how to target links to particular frames or windows  Understand how to use a “noframes” section  Understand alternate ways to achieve an effect similar to frames

4. Frames  Frames are yet another way to Layout a Webpage Biggest difference is that every section of a frame layout contains a Webpage You can control what WebPages are displayed in each section  Uses Banners Footers Navigation section Dynamic content

5. Frames  Just like in using a table, we divide the Browser window into Rows and Columns  Problems with frames Scroll bars Not indexed by search engines since content is often in other documents W3C discourages Frames

6. Creating A Simple Frameset  The collection of Frames that comprise a webpage is known as a Frameset Think of a window with individual panes Each pane has its own content You can control  Number of panes  Size of panes  Size and color of borders  Scroll bars or not

7. Creating A simple Frameset  DOCTYPE for xHTML frameset http://www.w3.org/1999/xhtml  After and instead of  There should be a “n” for each row or column  N can be size in pixels, percentage of parent or * for variable size Then for each section (left to right, top to bottom)   The name attribute is very important for targeting content

8. Combining Framesets  A frame can contain a frameset  Creates more complicated layouts Banner.htm NAVNAVContent.htm

9. Combining Framesets  Create inner frameset first  Create outer frameset  Insert inner into outer

10. Example

11. Creating an inline Frame  You can create a frames within a standard xHTML container.  Frames will “float” like a table or Image ”text to appear if inline frame doesn’t load”

12. Example

13. Adjusting the Frames Margins  Similar to cellpadding, margins are the space between the border and the content in a frame  Marginwidth is left and right margins Marginheight is top and bottom margins h and w are in pixels

14. Showing or Hiding Scroll Bars  Default is “only when needed” Content is larger than space allocated  In tag Scrolling=“no” for no scrolling Scrolling=“auto”  If using very small frames make sure that that the frame doesn’t become just scroll bars

15. Adding Color to Borders  You can color borders for all the frames in a frameset or just one frame  It you use a border color in both the frameset and a frame in the frameset, the frame setting overrides

16. Adjusting the Borders  You can adjust the space between frames using border=“n” in the frameset opening tag  You can adjust the width of the visible border by using frameborder=“n”  You can hide the borders by using border=“0” and frameborder=“0” in frameset or frame opening tag

17. Example

19. Keeping viewer from resizing Frames  You can force a frame to maintain the same size regardless of the size of the parent or browser windows  In the frame opening tag of the frame you wish to remain at the same size noresize=“noresize” 

20. Targeting links to particular Frames  Frames must be “named”   Special targets target=“_blank”  New window target=“_self”  Same frame as link target=“_top”  Use entire window not just the frame target=“_parent”  If using nested frameset opens in parent frame otherwise it is the same as _top  Setting the default In body section 

21. Nesting Framesets  In any frame the src can be a xHTML document that has framesets  Recommended procedure Build inner framesets first (inner.htm) Build parent framesets second In frame that you wish nesting to occur 

22. Example

23. Offering an Alternative to viewers  If a viewer's browser can’t (or won’t) produce frames After Add regular content

24. Embedding Content with Objects  Alternative to frames Use fixed layout styles Embed objects  To embed an object Add text in case object doesn’t load

25. Example

26. Creating Framesets –Getting Ready  Sketch up how you want the WebPage to look Calculate rows and columns  Create the xHTML pages that will be palace in the frames Hint create a “placeholder” blank xHTML page  Create the Frameset

27. Creating Framesets  In Dreamweaver create an new Basic xHTML page  In doctype replace transitional with frameset in two places  Wrap with xHtml Code  Insert between and

28. Dreamweaver Hints  After you save the first web page … the menu and display change  Menu refers to frameset  Design view show frames Click into a frame to modify the xHTML page associated with that frame To modify the frameset click on a border in design view to get to frameset code

30. Assignment #8  Posted in WebCT  Due April 25  Just one more after this one!!!!