Your SlideShare is downloading. ×
0
Week5 ap forms
Week5 ap forms
Week5 ap forms
Week5 ap forms
Week5 ap forms
Week5 ap forms
Week5 ap forms
Week5 ap forms
Week5 ap forms
Week5 ap forms
Week5 ap forms
Week5 ap forms
Week5 ap forms
Week5 ap forms
Week5 ap forms
Week5 ap forms
Week5 ap forms
Week5 ap forms
Week5 ap forms
Week5 ap forms
Week5 ap forms
Week5 ap forms
Week5 ap forms
Week5 ap forms
Week5 ap forms
Week5 ap forms
Week5 ap forms
Week5 ap forms
Week5 ap forms
Week5 ap forms
Week5 ap forms
Week5 ap forms
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Week5 ap forms

1,849

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
1,849
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. CSS Layout, Positioning & HTML Forms
  • 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. 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>&lt;div class=“bold”&gt; &lt;p&gt;&lt;/p&gt; &lt;div class=“nobold”&gt; &lt;p&gt;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=“nobold”&gt; &lt;p&gt;&lt;/p&gt; &lt;/div&gt; .bold p {color:red;} .bold .notbold p {color: green;} P h1 h4 h2
  • 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. 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. 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. Insert &lt;div&gt; tags <ul><li>Place the insertion point in the Document window </li></ul><ul><li>Insert panel &gt; Layout Objects &gt; insert div tag </li></ul>
  • 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. 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. 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. 2. Relative Position The box&apos;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. 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. 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. Four Positioning Types From Dreamweaver CS4: The Missing Manual
  • 15. Float http://www.brainjar.com/css/positioning/default.asp
  • 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 &lt;div&gt;….&lt;/div&gt; </li></ul><ul><li>Property Panel&gt; Align: right/left </li></ul><ul><li>or </li></ul><ul><li>CSS Rule Definition window opens up &gt; Category: box &gt; float: right/left &gt; apply &gt; OK </li></ul>
  • 17. Float Layout (1)
  • 18. Float Layout (2)
  • 19. Float in Dreamweaver
  • 20. HTML Forms
  • 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 &gt; Forms &gt; 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. Text Field (1) <ul><li>Click inside the red form frame. </li></ul><ul><li>Insert panel &gt; Form &gt; 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. 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. 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. Text Area <ul><li>It would permit multiple lines for input. </li></ul><ul><li>Insert &gt; Form&gt; Textarea . Make sure in the properties panel , type is multi-line . </li></ul>
  • 26. Checkboxes and Checkbox Groups <ul><li>may select more than one item in a group </li></ul><ul><li>Insert panel &gt; Form &gt; Checkbox Group </li></ul>
  • 27. Radio Buttons <ul><li>Only one choice from a group can be selected. </li></ul><ul><li>Insert panel &gt; Form &gt;Radio Group </li></ul>
  • 28. Pull-down Menus/Lists (1) <ul><li>Insert panel &gt; Form &gt;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. Pull-down Menus/Lists (2) Allow Multiple: If selected, multiple choices are allowed by using ctrl+click.
  • 30. File Field <ul><li>Provide a field for file upload. </li></ul><ul><li>Insert &gt; Form &gt; File Field </li></ul><ul><li>Insert &gt; Form &gt; Button </li></ul>Buttons
  • 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 &gt; in the Class window, choose the name of the class you defined. </li></ul>
  • 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 &gt; file &gt; new &gt; blank page &gt; 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>

×