300 likes | 545 Views
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
E N D
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 • http://perleybrook.umfk.maine.edu/samples/Framestyle.htm= • Website for text book • http://www.cookwood.com/html5ed/ • Lecture/Discuss Frames
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
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
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
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
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
Combining Framesets • A frame can contain a frameset • Creates more complicated layouts
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>
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>
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
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
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
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
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” … />
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” />
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’ />
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>
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>
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
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>
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
Assignment #8 • Posted in WebCT • Due April 27 • Just one more after this one!!!!