<ul><li>What are frames? </li></ul><ul><li>How do they work? </li></ul><ul><li>What’s good? </li></ul><ul><li>What’s bad? ...
More than html <ul><li>Problems with HTML </li></ul><ul><ul><li>Repetitive entry of navigation </li></ul></ul><ul><ul><li>...
Frames <ul><li>Problem: </li></ul><ul><ul><li>You want the same navigation on every page. </li></ul></ul><ul><ul><li>You w...
Frame basics <ul><li>Columns and Rows </li></ul><frameset cols=&quot;33%,50%,17%&quot; rows=&quot;*,200&quot;> <frame src=...
Frame Targets <frameset cols=&quot;33%,50%,17%&quot; rows=&quot;*,200&quot;> ... <frame  name=&quot;area4&quot;  src=&quot...
Frame Targets <ul><li>Names and Targets </li></ul><ul><ul><li>Name a frame and use the name as a target </li></ul></ul><ul...
Frame Appearance <ul><li>Managing look </li></ul><ul><ul><li>Border </li></ul></ul><ul><ul><ul><li>3D border default </li>...
Nested Frames <ul><li>Frames can be nested  </li></ul><ul><li>This allows complex layouts </li></ul><ul><li>Also can occur...
Frames - Good and Bad <ul><li>Frames are great for some things </li></ul><ul><ul><li>Allow separate navigation area </li><...
When to use frames <ul><li>Use frame sparingly </li></ul><ul><ul><li>Do not use in pages which will be widely accessed and...
User Input <ul><li>Problem: </li></ul><ul><ul><li>Html static, only provides what you have written </li></ul></ul><ul><ul>...
User Input processing server client Get http://www.google.co.nz/search?hl=en&q=comp112&btnG=Google+Search&meta= hl=en& q=c...
User Input server client Result <html> <head> <meta HTTP-EQUIV=&quot;content-type&quot; CONTENT=&quot;text/html; charset=U...
Server-Side Processing <ul><li>Deal with more than just “get”. </li></ul><ul><li>Advantages </li></ul><ul><ul><li>Current/...
Client-Side processing <ul><li>Content is processed by the client. </li></ul><ul><li>Example: Javascript, Flash. </li></ul...
Forms <ul><li>Two part </li></ul><ul><ul><li>The visible part shown to the user </li></ul></ul><ul><ul><li>The stuff behin...
Example <ul><li><form  id=&quot;papernav&quot; method= &quot; get &quot; </li></ul><ul><ul><ul><li>action=&quot;http://www...
Types of input <ul><li>Example </li></ul>< form  action=&quot;http://localhost/&quot;  method=&quot;get&quot; > <P> First ...
Types of input <ul><li>Types </li></ul><ul><ul><li>“ radio” - Select only  ONE option </li></ul></ul><ul><ul><li>“ checkbo...
Get vs Post <ul><li>Get </li></ul><ul><ul><li>Bookmark links </li></ul></ul><ul><ul><li>Easy to see what is happening </li...
Processing <ul><li>The request needs to be processed </li></ul><ul><ul><li>Server processing </li></ul></ul><ul><ul><li>CG...
Summary <ul><li>Frames  </li></ul><ul><ul><li>Multiple pages in one window </li></ul></ul><ul><ul><li>Targets allow menu/c...
Upcoming SlideShare
Loading in...5
×

Lecture1 B Frames&Forms

568

Published on

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
568
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
24
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Lecture1 B Frames&Forms"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×