Download
wdv 331 dreamweaver applications n.
Skip this Video
Loading SlideShow in 5 Seconds..
WDV 331 Dreamweaver Applications PowerPoint Presentation
Download Presentation
WDV 331 Dreamweaver Applications

WDV 331 Dreamweaver Applications

94 Vues Download Presentation
Télécharger la présentation

WDV 331 Dreamweaver Applications

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. WDV 331 Dreamweaver Applications Page Layout Dreamweaver CS6 Chapter 9

  2. Page Layout • Types of web layouts • Fixed-width • Div container's use Px or em • Liquid • Div container's use % • Hybrids • Div container's use mix of two • i.e. % for overall container • pxor em for sidebar • % for main content

  3. Div tag vs. HTML new tags • Div • attributes • Class • ID • Html i. e. • <header> • <section> • <aside> • <article>

  4. Float Lab 1 • Lab float.html • Page 444 • Create one file for the as indicated by the picture.

  5. Float Lab 2 • Create 2 external style sheet. • Fixed Width centered on screen float the aside (sidebar)to the Left • Liquid Widthusing 90% of screenfloatthe aside to the Right.

  6. Box Model • CSS Styler– open at: Windows  CSS Styles • Plus sign at bottom • New CSS rule pop up • CSS Rule Definition Pop up • Click BOX

  7. DW CSS Layout • File new • Modify------ change CSS layout

  8. Absolute Positioning • AP Div • Positioning Types • CSS Rule definition pop up • Positioning • Book page 465

  9. AP DIV • Adding • AP Element Marker (gold shield) moves other items like text out of it’s way. I do not use. • Selection handle • Click AP div selection box appears • AP element outline • Visual Aid -- blue Eye • AP element Positioning Summary • hover • Background image and color • Inside the AP element add as usual

  10. AP DIV 2 • Modifying select and drag box or • Resizing • Press the Ctrl (⌘) key, and then press the arrow keys to change the AP element’s size by one pixel. • Moving • First, select the element and then do one of the following: To move an AP element one pixel at a time, press the corresponding keyboard arrow key. • Aligning • Select 2 or more AP Divs. Modify  select an option

  11. AP DIV Lab • Lab APdiv.html • Open the float lab with a fixed width. • Save as ap_div.html • Place an transparent image (RGBa) (use .png image) on the page that says something like : • BUY NOW!! • click here • Give it a fancy board. • Size approximately 100px by 200px • Link it to another page

  12. Responsive Design • DW Creative Cloud CC • http://tv.adobe.com/watch/creative-cloud-for-web/enhanced-responsive-design/ • DW CS6 • http://tv.adobe.com/watch/creative-week-how-tos/dreamweaver-cs6-for-responsive-design/