1 / 30

COS 125

COS 125. Day 25. Agenda. Student evaluations Assignment #7 Due Assignment #8 Posted Due April 27 One more to go Exam #5 is April 30 Castro Chap13, 14, 15 & 16 25 M/C questions, WebCT 50 min Examples for everything in this lecture

oro
Download Presentation

COS 125

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. COS 125 Day 25

  2. Agenda • Student evaluations • Assignment #7 Due • Assignment #8 Posted • Due April 27 • One more to go • Exam #5 is April 30 • 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= • 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 • Like tables we divide the Browser windows 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 • A collections 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 <!DOCTYPE= html Public “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR /xhtml1/DTD/xhtml1-framest.dtd”> <html xmlns=http://www.w3.org/1999/xhtml> • After </head> and instead of <body> • <frameset rows=“n,n,n…” cols=“n,n,n…”> • 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) • <frame name=“aName” src=“webpage.url”/> • </frameset> • The name attribute is very important for targeting content

  8. Combining Framesets • A frame can contain a frameset • Creates more complicated layouts

  9. Combining Framesets • Create inner frameset first • Create outer frameset • Insert inner into outer <frameset rows=“65,*”> <frame name=“banner” src=“banner.htm” /> <frameset cols=“80,*”> <frame name=“nav” src=“nav.htm” /> <frame name=“main” src=“content.htm” /> </ frameset> </frameset>

  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 <iframe src=“frame.url” name=“aname” width=“x” height=“y” >”text to appear if inline frame doesn’t load”</iframe>

  12. Example

  13. Adjusting the Frames Margins • Similar to cellpadding, margins are the space between the border and the content in a frame • <frame marginwidth=“w” marginheight=“h” … /> • 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 <frame /> 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 • <frameset bordercolor=“red” … > • <frame bordercolor=“red” … /> • 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

  18. 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 miss to remain the same size • noresize=“noresize” • <frame noresize=“noresize” … />

  20. Targeting links to particular Frames • Frames must be “named” • <a href=“someurl.htm” target=“aName”></a> • 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 • <base target=“name” />

  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 • <frame name=“aName” src=“inner.htm’ />

  22. Example

  23. Offering an Alternative to viewers • If a viewer's browser can’t (or won’t) produce frames • After </frameset> • <noframes><body> • Add regular content • </body></noframes>

  24. Embedding Content with Objects • Alternative to frames • Use fixed layout styles • Embed objects • To embed an object <object type=“text/html” data=“file.htm” width=“w” height=“h”>Add text in case object doesn’t load</object>

  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 <body></body> with <noframes></noframes> • <noframes><body> xHtml Code </body></noframes> • Insert <frameset rows=“n,n” cols=“n,n”></frameset> between </head> and <noframes>

  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

  29. Assignment #8 • Posted in WebCT • Due April 27 • Just one more after this one!!!!

More Related