Presentation on theme: "Multimedia and the World Wide Web HCI 201 Lecture Notes #5A."— Presentation transcript:
Multimedia and the World Wide Web HCI 201 Lecture Notes #5A
HCI 201 Notes #5A2 What will we learn today? Introducing frames Creating a frame layout Controlling the appearance The magic target names Support frame-blind browsers Floating frames
HCI 201 Notes #5A3 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.
HCI 201 Notes #5A4 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.
HCI 201 Notes #5A5 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.
HCI 201 Notes #5A6 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?
HCI 201 Notes #5A7 Creating a frame layout page title *When you use, you omit the tag.
HCI 201 Notes #5A8 Creating a frame layout Specifying frame size and orientation frame definitions height1 is the height of the first frame row. frame definitions width1 is the width of the first frame column.
HCI 201 Notes #5A9 Creating a frame layout Specifying frame size and orientation 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. - creates three rows of frames with equal heights. - Any educated guess of what we get from ?
HCI 201 Notes #5A10 Nesting tags Logo frame Table of Content Document frame Logo frame Table of content Document frame Be careful with the percentage of the nested frameset: 25% means 25% of the width/height of the parent frame, not the screen.
HCI 201 Notes #5A11 Specifying a frame source Logo frame --- never changes Table of Content --- expands to show tour list Document frame --- changes as links are clicked in the “table of content”
HCI 201 Notes #5A12 Using FrontPage Create a new page (Menu File New). Replace the code “ ” with “ ” 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 “ ” in that frameset) Click on “New Page” to start writing code from scratch. Right click on the frame to set “Form Properties”.
HCI 201 Notes #5A13 Controlling the appearance (1) To control the display of a frame’s scrollbar - 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)
HCI 201 Notes #5A14 Controlling the appearance (2) To control the frame margins 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).
HCI 201 Notes #5A15 Controlling the appearance (3) To control the borders and spacing frameborder explicitly displays (value=yes) or hides (value=no) the frame borders. border or framespacing specify the thickness (number of pixels) of the borders. ( framespacing only works in IE) bordercolor specifies the color of the borders.
HCI 201 Notes #5A16 Controlling the appearance (4) To control the frame resizing - 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.
HCI 201 Notes #5A17 Working with frames and hyperlinks Step 1. Name your frames - 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 )
HCI 201 Notes #5A18 Working with frames and hyperlinks Step 2. Specify link target 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 - tag stays in - If an individual tag points to a target different from the one defined in tag, the tag target take precedence.
HCI 201 Notes #5A19 Using magic target names _blank To display the document into a newly opened, unnamed window. _self Default value for 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.
HCI 201 Notes #5A20 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” Problem 2: Clicking on the links of the expanded menu should load documents to the right frame. “Tours.htm” Problem 3: Clicking the “Tours” link should visually “expand” and “contract” the menu. “Tours.htm”
HCI 201 Notes #5A21 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” 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” OR Solution 2 – Add a link to go back to index.htm: “Photos.htm” Home Page
HCI 201 Notes #5A22 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: Sorry, your browser does not support frames, please click the link to view a non-framed version of this page. - If a browser supports frames, it will ignore whatever within the tag. - If a browser does not support frames, it ignores and, but will render the code within tag.
HCI 201 Notes #5A23 Floating frames What if we want to display information like this?
HCI 201 Notes #5A24 Floating (inline) frames - Available in IE 4.0+ and Netscape 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. - frameborder, marginheight/width, scrolling are similar to those in.
HCI 201 Notes #5A25 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.