Downloaded 31 times
Lecture1 B Frames&Forms
- 1. What are frames?How do they work? What’s good? What’s bad? Frames and forms
- 2. More than htmlProblems with HTML Repetitive entry of navigation Maintaining menus Selecting options more than clicking User inputs Getting information Navigation Frames User input forms
- 3. Frames Problem: Youwant 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
- 4. Frame basics Columnsand Rows <frameset cols="33%,50%,17%" rows="*,200"> <frame src="frame1.html"> <frame src="frame2.html"> <frame src="frame3.gif"> <frame name="area4" src="frame4.html"> <frame name="area5" src="frame5.html"> <frame src="frame6.html"> </frameset> 1 2 3 4 5 6 200 33 17 *
- 5. Frame Targets <framesetcols="33%,50%,17%" rows="*,200"> ... <frame name="area4" src="frame4.html"> <frame name="area5" src="frame5.html"> </frameset> <P>Changing Area 4 to <ul> <li><A href="Great.html" target="area4" >Great</A>, or back to</li> <li><A href="frame4.html" target="area4" >Area 4</A></li> </ul> ... </P> frameset.html frame6.html
- 6. Frame Targets Namesand 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
- 7. Frame Appearance Managinglook 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”
- 8. Nested Frames Framescan be nested This allows complex layouts Also can occur because the page displayed has frames in it <frameset cols="33%,50%,17%" rows="*,200"> <frame src=''frame1.html''> <frameset cols=''*,* '' > <frame s name="area2-1" src="frame2-1.html"> <frame s name="area2-2" src="frame2-2.html"> </frameset> <frame name="area3" src="frame3.html"> <frame name="area4" src="frame4.html"> <frame name="area5" src="frame5.html"> <frame name="area6" src="frame6.html"> </frameset>
- 9. Frames - Goodand 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
- 10. When to useframes 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.
- 11. 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
- 12. User Input processingserver client Get http://www.google.co.nz/search?hl=en&q=comp112&btnG=Google+Search&meta= hl=en& q=comp112& btnG=Google+Search& meta=
- 13. User Input serverclient Result <html> <head> <meta HTTP-EQUIV="content-type" CONTENT="text/html; charset=UTF-8"> <title>comp112 - Google Search</title> <style><!--
- 14. Server-Side Processing Dealwith 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
- 15. Client-Side processing Contentis 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
- 16. Forms Two partThe 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.
- 17. Example <form id="papernav" method= " get " action="http://www.cs.otago.ac.nz/cs-bin/procind"> <p>Select a paper from the menu to go straight to that course's web page: <select name="papercode" size=1> <option>---</option> <option>COMP103</option> <option>COMP112</option> … <option>COSC470</option> <option>TELE402</option> </select> <input type="submit" value="Go"> </p> </form>
- 18. Types of inputExample < form action="http://localhost/" method="get" > <P> First name: <input type="text" name="firstname"> <BR> Last name: <input type="text" name="lastname"> <BR> email: < input type="text" name="email"> <BR> <input type="radio" name="sex" value="Male"> Male<BR> <input type="radio" name="sex" value="Female"> Female </p> <p> <legend>Browsers You have used</legend><br> <input name="check1" type="checkbox" value="Safari" > Safari <input name="check1" type="checkbox" value="Mozilla" > Mozilla <input name="check1" type="checkbox" value="IE" > IE <input name="check1" type="checkbox" value="Lynx" > Lynx<br> <input type="submit" value="Send"> <input type="reset"> </P> </form>
- 19. Types of inputTypes “ 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
- 20. Get vs PostGet 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
- 21. Processing The requestneeds 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
- 22. 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