1 / 12

Understanding Web Layouts in Dreamweaver CS6: Types and Techniques

Dive into the different types of web layouts in Dreamweaver CS6, including fixed-width, liquid, and hybrid designs. Learn how to use div containers effectively with pixel (px), em, or percentage (%) values. This chapter covers essential HTML tags such as <header>, <section>, <aside>, and <article>, and explains the use of class and ID attributes. Explore positioning with CSS, including absolute positioning and the box model. Practical labs guide you through creating and manipulating layouts, ensuring you have a hands-on understanding of responsive design principles.

rune
Télécharger la présentation

Understanding Web Layouts in Dreamweaver CS6: Types and Techniques

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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/

More Related