Week5 ap forms


Published on

Published in: Education, Technology, Design
  • Be the first to comment

  • Be the first to like this

Week5 ap forms

  1. 1. CSS Layout, Positioning & HTML Forms
  2. 2. Review – CSS selectors <ul><li>tag – re-define an existing HTML element </li></ul><ul><li>id - applies to only one HTML element </li></ul>P P P P tag P P P P id
  3. 3. Review – CSS selectors <ul><li>class – same style can be a pplied to any HTML element </li></ul><ul><li>compound - used to combine two or more style rules to create a style definition that displays only when one style is contained within another. </li></ul><div class=“bold”> <p></p> <div class=“nobold”> <p></p> </div> </div> <div class=“nobold”> <p></p> </div> .bold p {color:red;} .bold .notbold p {color: green;} P h1 h4 h2
  4. 4. Fixed Layouts <ul><li>Fixed page width, regardless of the browser window’s width </li></ul><ul><li>760 pixels wide </li></ul>
  5. 5. Liquid layouts <ul><li>Best use of the available browser window </li></ul><ul><li>May move the position of an element </li></ul><ul><li>the best practice for search results pages </li></ul>
  6. 6. Elastic Layouts <ul><li>A fixed-width design with a type-size flexibility </li></ul><ul><li>Define the page’s width using em values </li></ul><ul><li>An em changes size when the browser’s font size changes </li></ul><ul><li>Becoming obsolete </li></ul>
  7. 7. Insert <div> tags <ul><li>Place the insertion point in the Document window </li></ul><ul><li>Insert panel > Layout Objects > insert div tag </li></ul>
  8. 8. Box Model Margin <ul><li>Margins – transparent and can have negative values </li></ul><ul><li>Background image and background color will includes both the padding and content areas </li></ul><ul><li>Sides start with top, right, bottom and left </li></ul><ul><li>The width and height of each box is equal to the width and height of the outer margin box </li></ul>
  9. 9. Box Types <ul><li>basic types of boxes: </li></ul><ul><ul><li>Block boxes </li></ul></ul><ul><ul><ul><li>Generated by elements such as p , div , or table </li></ul></ul></ul><ul><ul><li>Inline boxes </li></ul></ul><ul><ul><ul><li>Generated by b , I , or span tags or actual content like text and images </li></ul></ul></ul>
  10. 10. 1. Static Position <ul><li>default scheme used for positioning </li></ul><ul><li>applies to any element that does not specify position: absolute or fixed and is not floated </li></ul><ul><li>Block boxes flow vertically starting at the top left corner, next is below and share the same margin line </li></ul><ul><li>Inline box flows horizontally from left to right </li></ul><ul><li>http://www.brainjar.com/css/positioning/default.asp </li></ul><ul><li>vertical margins are collapsed in the normal flow. </li></ul><ul><li>larger of the two margins is used </li></ul>
  11. 11. 2. Relative Position The box's corresponding outer edge is moved with respect to its original position in the normal flow. http://www.brainjar.com/css/positioning/default.asp <ul><ul><li>Relative to its original position </li></ul></ul><ul><ul><li>Become another layer </li></ul></ul>
  12. 12. 3 . Absolute Position <ul><li>An absolutely positioned element is measured by its nearest element outside, which has a position of absolute , relative or fixed . If there is no such ancestor element, the initial containing block (the browser window) is used. </li></ul><ul><li>AP div can be defined anywhere in HTML code, it will show up according to the position defined in the finished design. </li></ul>
  13. 13. 4. Fixed Position <ul><li>It is a special case of absolute positioning; </li></ul><ul><li>For fixed elements, the containing block is always taken to be the viewpoint of the browser window; </li></ul><ul><li>A fixed element does not move when a web page is scrolled as all other elements do. </li></ul>
  14. 14. Four Positioning Types From Dreamweaver CS4: The Missing Manual
  15. 15. Float http://www.brainjar.com/css/positioning/default.asp
  16. 16. How to float left or right? <ul><li>For an image, click on the image </li></ul><ul><li>For a block of text, click on the <div>….</div> </li></ul><ul><li>Property Panel> Align: right/left </li></ul><ul><li>or </li></ul><ul><li>CSS Rule Definition window opens up > Category: box > float: right/left > apply > OK </li></ul>
  17. 17. Float Layout (1)
  18. 18. Float Layout (2)
  19. 19. Float in Dreamweaver
  20. 20. HTML Forms
  21. 21. Form tag <ul><li>A form starts with a form tag. It indicates the boundaries of a form. </li></ul><ul><li>Insert panel > Forms > Form </li></ul><ul><li>A red window will appear. Everything for the form has to be in this red window. </li></ul><ul><li>Select the form </li></ul><ul><li>Type a name for the form in the “Form ID” field in the Properties panel </li></ul>
  22. 22. Text Field (1) <ul><li>Click inside the red form frame. </li></ul><ul><li>Insert panel > Form > Text Field button </li></ul><ul><li>Input Tag Accessibility Attributes window opens. </li></ul><ul><li>ID associates with the field name when it goes to database. </li></ul><ul><li>Label can be placed before or after the field. </li></ul>
  23. 23. Text Field (2) <ul><li>Click on the text field frame, in the Properties panel, you may change its name, char width, max char, type, and initial value. You may associate it with a class. </li></ul><ul><li>You can specify the Initial Value in the Properties panel – starter text that automatically appears in the field. </li></ul>
  24. 24. Password Field <ul><li>The same process as the insertion of a text field . </li></ul><ul><li>After it is inserted, click the password field form frame, in the Properties panel , select type as password. </li></ul>
  25. 25. Text Area <ul><li>It would permit multiple lines for input. </li></ul><ul><li>Insert > Form> Textarea . Make sure in the properties panel , type is multi-line . </li></ul>
  26. 26. Checkboxes and Checkbox Groups <ul><li>may select more than one item in a group </li></ul><ul><li>Insert panel > Form > Checkbox Group </li></ul>
  27. 27. Radio Buttons <ul><li>Only one choice from a group can be selected. </li></ul><ul><li>Insert panel > Form >Radio Group </li></ul>
  28. 28. Pull-down Menus/Lists (1) <ul><li>Insert panel > Form >List/Menu </li></ul><ul><li>Fill in Input Tag Accessibility Attributes window and click OK. </li></ul><ul><li>Click the menu/list frame </li></ul><ul><li>In Properties panel, check the name of the menu/list and select the type </li></ul><ul><li>Click List Values and set the choices up in List Values window </li></ul>
  29. 29. Pull-down Menus/Lists (2) Allow Multiple: If selected, multiple choices are allowed by using ctrl+click.
  30. 30. File Field <ul><li>Provide a field for file upload. </li></ul><ul><li>Insert > Form > File Field </li></ul><ul><li>Insert > Form > Button </li></ul>Buttons
  31. 31. Apply CSS to Buttons <ul><li>Select the button </li></ul><ul><li>CSS panel, click +add new rule </li></ul><ul><li>Select the type. Select class if you want the rule to apply multiple time, otherwise, select id or compound. </li></ul><ul><li>Name the class or id </li></ul><ul><li>Define it in the window. </li></ul><ul><li>Properties panel > in the Class window, choose the name of the class you defined. </li></ul>
  32. 32. How to install the .php script? <ul><li>Go to http://formtoemail.com </li></ul><ul><li>Choose the free version </li></ul><ul><li>Download the .zip file </li></ul><ul><li>Open the .zip file with WinRAR (evaluation copy) </li></ul><ul><li>Double click the unzipped file and it will be open in a viewer. </li></ul><ul><li>Open Dreamweaver > file > new > blank page > php </li></ul><ul><li>Copy and paste the code in the viewer to the new php code view. </li></ul><ul><li>Find Line 102 and enter your email address. </li></ul><ul><li>Save this file with extension .php in the same directory as your .html file which contains the form you created. </li></ul><ul><li>Upload this .php into the same directory as your form .html file </li></ul>