project 4: yosemite css layout
DESCRIPTION
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. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Project 4: Yosemite CSS Layout](https://reader035.vdocuments.mx/reader035/viewer/2022062305/56814e55550346895dbbe9f2/html5/thumbnails/1.jpg)
Adobe Dreamweaver CC/2015 Release
Project 4:
Yosemite CSS LayoutCreating layouts with style sheetsWorking with a templateUsing CSS to control content
![Page 2: Project 4: Yosemite CSS Layout](https://reader035.vdocuments.mx/reader035/viewer/2022062305/56814e55550346895dbbe9f2/html5/thumbnails/2.jpg)
Adobe Dreamweaver CC: The Professional Portfolio
Tracing Images
View>Tracing Image>Load
Reset to move to document edges
Change view percentage if necessary
![Page 3: Project 4: Yosemite CSS Layout](https://reader035.vdocuments.mx/reader035/viewer/2022062305/56814e55550346895dbbe9f2/html5/thumbnails/3.jpg)
Adobe Dreamweaver CC: The Professional Portfolio
Style Basics
External styles
Embedded styles
Inline styles
![Page 4: Project 4: Yosemite CSS Layout](https://reader035.vdocuments.mx/reader035/viewer/2022062305/56814e55550346895dbbe9f2/html5/thumbnails/4.jpg)
Adobe Dreamweaver CC: The Professional Portfolio
Style Basics (cont’d)
Apply one set of rules to multiple pages
Separate content from presentation
Edit styles to change page appearance
![Page 5: Project 4: Yosemite CSS Layout](https://reader035.vdocuments.mx/reader035/viewer/2022062305/56814e55550346895dbbe9f2/html5/thumbnails/5.jpg)
Adobe Dreamweaver CC: The Professional Portfolio
Creating a CSS File
![Page 6: Project 4: Yosemite CSS Layout](https://reader035.vdocuments.mx/reader035/viewer/2022062305/56814e55550346895dbbe9f2/html5/thumbnails/6.jpg)
Adobe Dreamweaver CC: The Professional Portfolio
Attaching a CSS File
Attach (link) to an HTML file
Use different files for different media
![Page 7: Project 4: Yosemite CSS Layout](https://reader035.vdocuments.mx/reader035/viewer/2022062305/56814e55550346895dbbe9f2/html5/thumbnails/7.jpg)
Adobe Dreamweaver CC: The Professional Portfolio
Viewing CSS Code
![Page 8: Project 4: Yosemite CSS Layout](https://reader035.vdocuments.mx/reader035/viewer/2022062305/56814e55550346895dbbe9f2/html5/thumbnails/8.jpg)
Adobe Dreamweaver CC: The Professional Portfolio
Creating CSS Rules
![Page 9: Project 4: Yosemite CSS Layout](https://reader035.vdocuments.mx/reader035/viewer/2022062305/56814e55550346895dbbe9f2/html5/thumbnails/9.jpg)
Adobe Dreamweaver CC: The Professional Portfolio
The CSS Box Model
Margin
Border
Padding
Content
![Page 10: Project 4: Yosemite CSS Layout](https://reader035.vdocuments.mx/reader035/viewer/2022062305/56814e55550346895dbbe9f2/html5/thumbnails/10.jpg)
Adobe Dreamweaver CC: The Professional Portfolio
ID selectors
Apply to <div> tags
# sign in name
![Page 11: Project 4: Yosemite CSS Layout](https://reader035.vdocuments.mx/reader035/viewer/2022062305/56814e55550346895dbbe9f2/html5/thumbnails/11.jpg)
Adobe Dreamweaver CC: The Professional Portfolio
Inserting Div Tags
HTML Insert panel
Insert>Div
Drag from panel in Live view
![Page 12: Project 4: Yosemite CSS Layout](https://reader035.vdocuments.mx/reader035/viewer/2022062305/56814e55550346895dbbe9f2/html5/thumbnails/12.jpg)
Adobe Dreamweaver CC: The Professional Portfolio
Inserting Div Tags (cont’d)
Click edge to show box model
HTML code is minimal, purely structural
![Page 13: Project 4: Yosemite CSS Layout](https://reader035.vdocuments.mx/reader035/viewer/2022062305/56814e55550346895dbbe9f2/html5/thumbnails/13.jpg)
Editing in Live View
Drag-and-drop
Define IDs and classes
Adobe Dreamweaver CC: The Professional Portfolio
![Page 14: Project 4: Yosemite CSS Layout](https://reader035.vdocuments.mx/reader035/viewer/2022062305/56814e55550346895dbbe9f2/html5/thumbnails/14.jpg)
Using the DOM Panel
Review/organize structural hierarchy
Adobe Dreamweaver CC: The Professional Portfolio
![Page 15: Project 4: Yosemite CSS Layout](https://reader035.vdocuments.mx/reader035/viewer/2022062305/56814e55550346895dbbe9f2/html5/thumbnails/15.jpg)
Adobe Dreamweaver CC: The Professional Portfolio
Nesting Divs
![Page 16: Project 4: Yosemite CSS Layout](https://reader035.vdocuments.mx/reader035/viewer/2022062305/56814e55550346895dbbe9f2/html5/thumbnails/16.jpg)
Adobe Dreamweaver CC: The Professional Portfolio
Templates
File>Save as Template
.dwt extension
Templates folder
![Page 17: Project 4: Yosemite CSS Layout](https://reader035.vdocuments.mx/reader035/viewer/2022062305/56814e55550346895dbbe9f2/html5/thumbnails/17.jpg)
Adobe Dreamweaver CC: The Professional Portfolio
Editable Regions
![Page 18: Project 4: Yosemite CSS Layout](https://reader035.vdocuments.mx/reader035/viewer/2022062305/56814e55550346895dbbe9f2/html5/thumbnails/18.jpg)
Adobe Dreamweaver CC: The Professional Portfolio
Paths in Templates
Site Setup: Advanced Settings
Document-relative paths
![Page 19: Project 4: Yosemite CSS Layout](https://reader035.vdocuments.mx/reader035/viewer/2022062305/56814e55550346895dbbe9f2/html5/thumbnails/19.jpg)
Adobe Dreamweaver CC: The Professional Portfolio
New From Template optionAssets panel contextual menu
New From Template option in File>New dialog box
![Page 20: Project 4: Yosemite CSS Layout](https://reader035.vdocuments.mx/reader035/viewer/2022062305/56814e55550346895dbbe9f2/html5/thumbnails/20.jpg)
Adobe Dreamweaver CC: The Professional Portfolio
Apply Template to Page
Modify>Templates submenu
Inconsistent Region Names
![Page 21: Project 4: Yosemite CSS Layout](https://reader035.vdocuments.mx/reader035/viewer/2022062305/56814e55550346895dbbe9f2/html5/thumbnails/21.jpg)
Adobe Dreamweaver CC: The Professional Portfolio
Apply Template to Page (cont’d)
![Page 22: Project 4: Yosemite CSS Layout](https://reader035.vdocuments.mx/reader035/viewer/2022062305/56814e55550346895dbbe9f2/html5/thumbnails/22.jpg)
Adobe Dreamweaver CC: The Professional Portfolio
Modifying Templates
Open from Files panel
File>Save
Update linked files
![Page 23: Project 4: Yosemite CSS Layout](https://reader035.vdocuments.mx/reader035/viewer/2022062305/56814e55550346895dbbe9f2/html5/thumbnails/23.jpg)
Adobe Dreamweaver CC: The Professional Portfolio
Tag Selectors
Format all content with a specific tag
“Nested” nature
![Page 24: Project 4: Yosemite CSS Layout](https://reader035.vdocuments.mx/reader035/viewer/2022062305/56814e55550346895dbbe9f2/html5/thumbnails/24.jpg)
Adobe Dreamweaver CC: The Professional Portfolio
Tag Selectors (cont’d)
![Page 25: Project 4: Yosemite CSS Layout](https://reader035.vdocuments.mx/reader035/viewer/2022062305/56814e55550346895dbbe9f2/html5/thumbnails/25.jpg)
Adobe Dreamweaver CC: The Professional Portfolio
Compound/Descendent Selectors
Only affect elements in specific divs
![Page 26: Project 4: Yosemite CSS Layout](https://reader035.vdocuments.mx/reader035/viewer/2022062305/56814e55550346895dbbe9f2/html5/thumbnails/26.jpg)
Adobe Dreamweaver CC: The Professional Portfolio
Pseudo-Class Selectors
a:link
a:visited
a:hover
a:focus
a:active