1 / 26

Project 4: Yosemite CSS Layout

Project 4: Yosemite CSS Layout. Creating layouts with style sheets Working with a template Using CSS to control content. Tracing Images. View>Tracing Image>Load Reset to move to document edges Change view percentage if necessary. Style Basics. Inline styles. Embedded styles.

iman
Download Presentation

Project 4: Yosemite CSS Layout

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. Project 4:Yosemite CSS Layout • Creating layouts with style sheets • Working with a template • Using CSS to control content Adobe Dreamweaver CC: The Professional Portfolio

  2. Tracing Images • View>Tracing Image>Load • Reset to move to document edges • Change view percentage if necessary Adobe Dreamweaver CC: The Professional Portfolio

  3. Style Basics • Inline styles • Embedded styles • External styles Adobe Dreamweaver CC: The Professional Portfolio

  4. Style Basics (cont’d) • Apply one set of rules to multiple pages • Separate content from presentation • Edit styles to change page appearance Adobe Dreamweaver CC: The Professional Portfolio

  5. Creating a CSS File Adobe Dreamweaver CC: The Professional Portfolio

  6. Attaching a CSS File • Attach (link) to an HTML file • Use different files for different media Adobe Dreamweaver CC: The Professional Portfolio

  7. Viewing CSS Code Adobe Dreamweaver CC: The Professional Portfolio

  8. The CSS Designer panel Adobe Dreamweaver CC: The Professional Portfolio

  9. Creating CSS Rules Adobe Dreamweaver CC: The Professional Portfolio

  10. The “Undo” Warning • CSS file active in Code pane Adobe Dreamweaver CC: The Professional Portfolio

  11. The CSS Box Model • Margin • Border • Padding • Content Adobe Dreamweaver CC: The Professional Portfolio

  12. ID selectors • Apply to <div> tags • # sign in name Adobe Dreamweaver CC: The Professional Portfolio

  13. Inserting Div Tags • Structure Insert panel • Insert>Layout Objects> Div Tag Adobe Dreamweaver CC: The Professional Portfolio

  14. Inserting Div Tags (cont’d) • Click edge to show box model • HTML code is minimal, purely structural Adobe Dreamweaver CC: The Professional Portfolio

  15. Nesting Divs Adobe Dreamweaver CC: The Professional Portfolio

  16. Templates • File>Save as Template • .dwt extension • Templates folder Adobe Dreamweaver CC: The Professional Portfolio

  17. Editable Regions Adobe Dreamweaver CC: The Professional Portfolio

  18. Paths in Templates • Site Setup: Advanced Settings • Document-relative paths Adobe Dreamweaver CC: The Professional Portfolio

  19. New From Template option • Assets panel contextual menu • New From Template option in File>New dialog box Adobe Dreamweaver CC: The Professional Portfolio

  20. Apply Template to Page • Modify>Templates submenu • Inconsistent Region Names Adobe Dreamweaver CC: The Professional Portfolio

  21. Apply Template to Page (cont’d) Adobe Dreamweaver CC: The Professional Portfolio

  22. Modifying Templates • Open from Files panel • File>Save • Update linked files Adobe Dreamweaver CC: The Professional Portfolio

  23. Tag Selectors • Format all content with a specific tag • “Nested” nature Adobe Dreamweaver CC: The Professional Portfolio

  24. Tag Selectors (cont’d) Adobe Dreamweaver CC: The Professional Portfolio

  25. Compound/Descendent Selectors • Only affect elements in specific divs Adobe Dreamweaver CC: The Professional Portfolio

  26. Pseudo-Class Selectors • a:link • a:visited • a:hover • a:focus • a:active Adobe Dreamweaver CC: The Professional Portfolio

More Related