Multimedia and the World Wide Web

Multimedia and the World Wide Web HCI 201 Lecture Notes #5A

What will we learn today? • Introducing frames • Creating a frame layout • Controlling the appearance • The magic target names • Support frame-blind browsers • Floating frames 2

Case Study 3 Colorado Experience is a school that specializes in teaching climbing techniques. Debbie Lee, the owner, is looking for ways to improve the visibility of the school. She has already created many web pages to highlight their offerings. Debbie asks us to showcase her business in an easy-to-view one-page design that allows the browser to display several HTML pages on the screen at one time. 3

Introducing frames • What’s good about frames?- To browse two web pages simultaneously.- To keep the anchor links available on the top while scrolling up and down a long page. - To reduce redundant information (header, footer, navigation links) that repeats on every page in your document collection. • What’s not so good about frames?- Browser has to load multiple files rather than one, which might cause longer delay.- Not all browsers are able to display frames.- Printing problems. 4

Frameset and frames • What’s a frameset?A special document that contains tags to tell the browser how to - divide its main display window into different frames and - what documents should be shown in these frames. A frameset does not have its own body content. • What are frames?- Frames to the frameset is like cells to the table that contains them.- Display individual document independently.- You can direct one frame’s document to load new content into another frame. 5

Planning your frames • A check list before you start coding- What information will be displayed in each of the frames?- How do you want the frames placed on the page? What is the size of each frame? - Which frame will be static (i.e. always showing the same content)?- Which frame will change in response to hyperlink-click?- What are the pages users will see first when they access the site?- Do you allow users to resize the frames? - Which frame will need scrollbar? 6

Creating a frame layout <html> <head> <title>page title</title> </head> <frameset>  </frameset> </html> *When you use <frameset>, you omit the <body> tag. 7

Creating a frame layout • Specifying frame size and orientation <frameset row=“height1, height2, ...”> frame definitions </frameset> height1 is the height of the first frame row. <frameset col=“width1, width2, ...”> frame definitions </frameset> width1 is the width of the first frame column. 8

Creating a frame layout • Specifying frame size and orientation <frameset col=“160,25%,*”> 160 means the first frame column is 160 pixels wide. 25% means the second column takes 25% of the width of the display area. * means the third (last) column covers whatever space is left. - At least one of he rows/columns should be specified with * to ensure the frames fill up the screen. - <frameset row=“*,*,*”> creates three rows of frames with equal heights. - Any educated guess of what we get from <row=“20%,3*,*”>? 9

Nesting <frameset> tags Logo frame <frameset rows="60,*"> <frame> Logo frame <frameset cols=”25%,*"> <frame>  Table of content <frame>  Document frame </frameset> </frameset> Be careful with the percentage of the nested frameset:25% means 25% of the width/height of the parent frame, not the screen. Table of Content Document frame 10

Specifying a frame source Logo frame --- never changes <frameset rows="60,*"> <frame src="Head.htm"> <frameset cols="170,*"> <frame src="Links.htm"> <frame src="TCE.htm"> </frameset> </frameset> Table of Content --- expands to show tour list Document frame --- changes as links are clicked in the “table of content” 11

Using FrontPage • Create a new page (Menu File  New). • Replace the code “<body> </body>” with “<frameset> </frameset>” in HTML view. • Switch to Normal view. • Menu Frame  Split Frame • Click on “Set initial page” to specify the source file (this button is not available for the first frame, go to “Frames Page HTML” to add a “<frame>” in that frameset) • Click on “New Page” to start writing code from scratch. • Right click on the frame to set “Form Properties”. 12

Controlling the appearance (1) • To control the display of a frame’s scrollbar<frame src=“...” scrolling=value> -Where value can be either yes (to display scrollbar) or no (to remove scrollbar). - If you do not specify this attribute, scrollbar will appear only when the content cannot fit in the frame’s boundary) - If you set no scrollbar and the content cannot fit in the frame, part of the page will be “cutoff” and remain inaccessible to readers. - Hide scrollbar when you only want to show readers limited area of your page (e.g., title bar, left navigation menu) 13

Controlling the appearance (2) • To control the frame margins<frame src=“...” marginheight=value marginwidth=value> marginheight is the amount of space (pixels) above and below the content of the page in the frame. marginwidth is the amount of space (pixels) appears to the page’s left and right. - Use small margin for frames that only display an image (e.g., 0 or 1 pixel). - Add a little margin for frames that display text content (e.g., 5~10 pixels). 14

Controlling the appearance (3) • To control the borders and spacing<frame/set src=“..” frameborder=value> frameborderexplicitly displays (value=yes) or hides (value=no) the frame borders. <frameset border=value> <frameset framespacing=value> borderor framespacing specify the thickness (number of pixels) of the borders. (framespacing only works in IE) <frame/set src=“..” bordercolor=value> bordercolor specifies the color of the borders. 15

Controlling the appearance (4) • To control the frame resizing<frame src=“..” noresize> - By default, users can resize frames by dragging a frame border. (Can “no scrolling” stop them from doing that?) - noresize freezes the size of the particular frame. - noresize takes no value. Debbie wants to freeze the logo frame and link list frame. 16

Working with frames and hyperlinks • Step 1. Name your frames <frame src=document name=frame_name> - frame_name: a single word you choose to identify the frame. By position: “top”, “bottom”, “left”, “right”, “middle”, etc. By content: “logo”, “navigationlinks”, “information”, etc. - frame_name is not the name of document source (src) 17

Working with frames and hyperlinks • Step 2. Specify link target <a href=URL target=frame_name> frame_name is the name of the frame where you want to show the document when this hyperlink is clicked. For a page that contains dozens of links all directing to the same target frame, we do not have to specify target for each individual links, instead, we use <base target=frame_name> - <base> tag stays in <head></head> - If an individual <a> tag points to a target different from the one defined in <base> tag, the <a> tag target take precedence. 18

Using magic target names • _blank To display the document into a newly opened, unnamed window. • _self Default value for <a> tags that do not specify a target window. To display the document in the same frame as where the hyperlink is. • _parent Parent window: the frameset that contains the current frame. To load the document into the parent frameset that contains the frame where the hyperlink is. • _top To load the document into the full display area (entire browser window), and replace the current frame layout. * Use it to make sure your framed page will not be displayed inside of other people’s frameset. 19

Expand and contract a menu • Tours.htm Problem 1: The expanded link list should be displayed in the left frame, not the right frame.“Link.htm” <a href=“Tours.htm” target=“_self”> Problem 2: Clicking on the links of the expanded menu should load documents to the right frame. “Tours.htm”<base target=“right”> Problem 3: Clicking the “Tours” link should visually “expand” and “contract” the menu. “Tours.htm”<a href=“Links.htm” target=“_self”> 20

Avoid series of nested frames • Staff.htm Problem: We have two nested framesets when this page is loaded into the right frame.Solution: “Link.htm” <a href=“Staff.htm” target=“_top”> New Problem: We lost our access to home page after Staff.htm is loaded. Solution 1 – Open a new window for Staff.htm:“Link.htm” <a href=“Staff.htm” target=“_blank”> OR Solution 2 – Add a link to go back to index.htm:“Photos.htm”<a href="index.htm" target="_top"> Home Page</a> 21

Supporting frame-blind browsers • Create a version of your page that does not use frames. (Save it as “NoFrame.htm”) • In the framed version of the page, insert the following code: <noframes>Sorry, your browser does not support frames, please click the link to view a <a href=“NoFrame.htm”>non-framed version</a> of this page. </noframes> - If a browser supports frames, it will ignore whatever within the <noframes> tag. - If a browser does not support frames, it ignores <frameset> and <noframes>, but will render the code within <noframes> tag. 22

Floating frames • What if we want to display information like this? 23

Floating (inline) frames • <iframe width=500 height=300 align=right src=“info.htm”></iframe> - Available in IE 4.0+ and Netscape 6.0+. - Opens a “window” on your page to display other documents. - Specify the source of the document with src. - Define the “window” size with width and height (in pixels or percentage, but commonly in pixels). - align, vspace, hspace are similar to those in <img>. - frameborder, marginheight/width, scrolling are similar to those in <frame>. 24

Usability issues about frames • Hiding borders:seamless one-page presentation or confusion to users because of the different hyperlink-behavior? • Orphan pages:work beautifully within the frames, but might be accessed by who-knows-when-where-and-how. (Tip: always provide links to homepage or context information.) • Nasty nested frames:You can carefully avoid displaying another framed web site in one of your frames, but cannot stop from being displayed by other careless frame-fan web authors. • To scroll or not to scroll:You want to hide empty space or tiled background images from readers, but they will be even more annoyed if part of the page is missing on the screen and there is no scrollbar. 25

Multimedia and the World Wide Web