Lecture1 B  Frames&Forms
Upcoming SlideShare
Loading in...5

Lecture1 B Frames&Forms






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Lecture1 B  Frames&Forms Lecture1 B Frames&Forms Presentation Transcript

    • What are frames?
    • How do they work?
    • What’s good?
    • What’s bad?
    Frames and forms
  • More than html
    • Problems with HTML
      • Repetitive entry of navigation
      • Maintaining menus
      • Selecting options more than clicking
      • User inputs
      • Getting information
    • Navigation
      • Frames
    • User input
      • forms
  • Frames
    • Problem:
      • You want the same navigation on every page.
      • You want to scroll content separately.
    • Solution:
      • Create multiple areas, one navigation and another for content.
    • Frame
      • Layout – Rows and Columns
      • Instead of <body> uses <frameset>
      • Little pages within the browser that know about each other
  • Frame basics
    • Columns and Rows
    <frameset cols=&quot;33%,50%,17%&quot; rows=&quot;*,200&quot;> <frame src=&quot;frame1.html&quot;> <frame src=&quot;frame2.html&quot;> <frame src=&quot;frame3.gif&quot;> <frame name=&quot;area4&quot; src=&quot;frame4.html&quot;> <frame name=&quot;area5&quot; src=&quot;frame5.html&quot;> <frame src=&quot;frame6.html&quot;> </frameset> 1 2 3 4 5 6 200 33 17 *
  • Frame Targets <frameset cols=&quot;33%,50%,17%&quot; rows=&quot;*,200&quot;> ... <frame name=&quot;area4&quot; src=&quot;frame4.html&quot;> <frame name=&quot;area5&quot; src=&quot;frame5.html&quot;> </frameset> <P>Changing Area 4 to <ul> <li><A href=&quot;Great.html&quot; target=&quot;area4&quot; >Great</A>, or back to</li> <li><A href=&quot;frame4.html&quot; target=&quot;area4&quot; >Area 4</A></li> </ul> ... </P> frameset.html frame6.html
  • Frame Targets
    • Names and Targets
      • Name a frame and use the name as a target
      • Content and navigation separate
    • Reserved Names
      • _blank Always open a new window
      • _self Open in current frame (default)
      • _parent Open one level up
      • _top Open in current window
  • Frame Appearance
    • Managing look
      • Border
        • 3D border default
        • Other border types
      • Resizing
        • Move the frames around
      • Scrolling
        • Scrollbar on by default
        • Remove scrollbars for control
      • Margins
        • Just like with Tables you can insert whitespace
        • marginwidth=“20”
  • Nested Frames
    • Frames can be nested
    • This allows complex layouts
    • Also can occur because the page displayed has frames in it
    <frameset cols=&quot;33%,50%,17%&quot; rows=&quot;*,200&quot;> <frame src=''frame1.html''> <frameset cols=''*,* '' > <frame s name=&quot;area2-1&quot; src=&quot;frame2-1.html&quot;> <frame s name=&quot;area2-2&quot; src=&quot;frame2-2.html&quot;> </frameset> <frame name=&quot;area3&quot; src=&quot;frame3.html&quot;> <frame name=&quot;area4&quot; src=&quot;frame4.html&quot;> <frame name=&quot;area5&quot; src=&quot;frame5.html&quot;> <frame name=&quot;area6&quot; src=&quot;frame6.html&quot;> </frameset>
  • Frames - Good and Bad
    • Frames are great for some things
      • Allow separate navigation area
      • Allow other site display – Google
      • Great for sites were people need multiple windows
    • Frames are bad
      • being deprecated.
      • Frames were popular before search engines!
      • Search engines allow entry to any part of a site
      • Back button does not work
      • Navigation broken
  • When to use frames
    • Use frame sparingly
      • Do not use in pages which will be widely accessed and are quick in/quick out.
    • Avoid frames for publicly available pages
      • Intranets OK as every comes in at the same place.
    • Frames are good for reference pages, where a static menu is important.
    • There are alternatives
      • php, asp, server-side includes, some javascript tricks) but these are all more sophisticated.
  • User Input
    • Problem:
      • Html static, only provides what you have written
      • User limited to clicking as input
    • Solution
      • Add tools for uses to do more than click
      • Get the server to do more work
      • Get the client to do more work
      • Forms
        • Get – add to the end of the URL
        • Post – send a block of additional text like the header
        • Mailto – write an email with the data you selected
  • User Input processing server client Get http://www.google.co.nz/search?hl=en&q=comp112&btnG=Google+Search&meta= hl=en& q=comp112& btnG=Google+Search& meta=
  • User Input server client Result <html> <head> <meta HTTP-EQUIV=&quot;content-type&quot; CONTENT=&quot;text/html; charset=UTF-8&quot;> <title>comp112 - Google Search</title> <style><!--
  • Server-Side Processing
    • Deal with more than just “get”.
    • Advantages
      • Current/Dynamic
      • Maintainability
      • Delivery of ordinary HTML
      • No redundant storage
    • Disadvantages
      • Increases server load
      • Security issues
      • May be impossible for clients to get identical information later
  • Client-Side processing
    • Content is processed by the client.
    • Example: Javascript, Flash.
    • Advantages
      • No extra load on the server
      • Instant responsiveness (after initial download)
    • Disadvantages
      • More data sent
      • Makes the internals of your site transparent or able to be saved locally
      • Requires browser support
  • Forms
    • Two part
      • The visible part shown to the user
      • The stuff behind the scenes, the submission and the processing by the server
    • Client side
      • Display options
      • Javascript to check valid options
    • Server side
      • Examine request
      • Generate information requested
      • Send html file to the browser.
  • Example
    • <form id=&quot;papernav&quot; method= &quot; get &quot;
        • action=&quot;http://www.cs.otago.ac.nz/cs-bin/procind&quot;>
    • <p>Select a paper from the menu to go straight
    • to that course's web page:
    • <select name=&quot;papercode&quot; size=1>
    • <option>---</option>
    • <option>COMP103</option>
    • <option>COMP112</option>
    • <option>COSC470</option>
    • <option>TELE402</option>
    • </select>
    • <input type=&quot;submit&quot; value=&quot;Go&quot;>
    • </p>
    • </form>
  • Types of input
    • Example
    < form action=&quot;http://localhost/&quot; method=&quot;get&quot; > <P> First name: <input type=&quot;text&quot; name=&quot;firstname&quot;> <BR> Last name: <input type=&quot;text&quot; name=&quot;lastname&quot;> <BR> email: < input type=&quot;text&quot; name=&quot;email&quot;> <BR> <input type=&quot;radio&quot; name=&quot;sex&quot; value=&quot;Male&quot;> Male<BR> <input type=&quot;radio&quot; name=&quot;sex&quot; value=&quot;Female&quot;> Female </p> <p> <legend>Browsers You have used</legend><br> <input name=&quot;check1&quot; type=&quot;checkbox&quot; value=&quot;Safari&quot; > Safari <input name=&quot;check1&quot; type=&quot;checkbox&quot; value=&quot;Mozilla&quot; > Mozilla <input name=&quot;check1&quot; type=&quot;checkbox&quot; value=&quot;IE&quot; > IE <input name=&quot;check1&quot; type=&quot;checkbox&quot; value=&quot;Lynx&quot; > Lynx<br> <input type=&quot;submit&quot; value=&quot;Send&quot;> <input type=&quot;reset&quot;> </P> </form>
  • Types of input
    • Types
      • “ radio” - Select only ONE option
      • “ checkbox” - As many as you like
      • “ text” - used for general text input
      • “ select” - Menus with options
      • “ input” - Select a file
      • Special buttons
        • “ submit” go to the new page
        • “ reset” remove all the data
  • Get vs Post
    • Get
      • Bookmark links
      • Easy to see what is happening
      • Simple to process and track
    • Post
      • Better for large amounts of information
      • Not displayed so a little more secure
      • Back button warnings
  • Processing
    • The request needs to be processed
      • Server processing
      • CGI Common Gateway Interface
        • Read the URL or the post information
        • Process the information
        • Send back an HTML page
    • Simple processing
      • Enter a number – is it in the right range
      • Have you entered all the data
      • Client side processing
      • Javascript
  • Summary
    • Frames
      • Multiple pages in one window
      • Targets allow menu/content split
      • Slowly being removed
    • Server side vs Client side
      • Processing
      • When and where
    • Forms
      • Elements Radio buttons, check boxes
      • Method: get, post
      • Action: which page