Adobe Dreamweaver CC: The Professional Portfolio
Project 4:
Yosemite CSS LayoutCreating layouts with style sheetsWorking with a templateUsing CSS to control content
Adobe Dreamweaver CC: The Professional Portfolio
Tracing Images
View>Tracing Image>Load
Reset to move to document edges
Change view percentage if necessary
Adobe Dreamweaver CC: The Professional Portfolio
Style Basics
External styles
Embedded styles
Inline styles
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
Adobe Dreamweaver CC: The Professional Portfolio
Creating a CSS File
Adobe Dreamweaver CC: The Professional Portfolio
Attaching a CSS File
Attach (link) to an HTML file
Use different files for different media
Adobe Dreamweaver CC: The Professional Portfolio
Viewing CSS Code
Adobe Dreamweaver CC: The Professional Portfolio
The CSS Designer panel
Adobe Dreamweaver CC: The Professional Portfolio
Creating CSS Rules
Adobe Dreamweaver CC: The Professional Portfolio
The “Undo” Warning
CSS file active in Code pane
Adobe Dreamweaver CC: The Professional Portfolio
The CSS Box Model
Margin
Border
Padding
Content
Adobe Dreamweaver CC: The Professional Portfolio
ID selectors
Apply to <div> tags
# sign in name
Adobe Dreamweaver CC: The Professional Portfolio
Inserting Div Tags
Structure Insert panel
Insert>Layout Objects> Div Tag
Adobe Dreamweaver CC: The Professional Portfolio
Inserting Div Tags (cont’d)
Click edge to show box model
HTML code is minimal, purely structural
Adobe Dreamweaver CC: The Professional Portfolio
Nesting Divs
Adobe Dreamweaver CC: The Professional Portfolio
Templates
File>Save as Template
.dwt extension
Templates folder
Adobe Dreamweaver CC: The Professional Portfolio
Editable Regions
Adobe Dreamweaver CC: The Professional Portfolio
Paths in Templates
Site Setup: Advanced Settings
Document-relative paths
Adobe Dreamweaver CC: The Professional Portfolio
New From Template optionAssets panel contextual menu
New From Template option in File>New dialog box
Adobe Dreamweaver CC: The Professional Portfolio
Apply Template to Page
Modify>Templates submenu
Inconsistent Region Names
Adobe Dreamweaver CC: The Professional Portfolio
Apply Template to Page (cont’d)
Adobe Dreamweaver CC: The Professional Portfolio
Modifying Templates
Open from Files panel
File>Save
Update linked files
Adobe Dreamweaver CC: The Professional Portfolio
Tag Selectors
Format all content with a specific tag
“Nested” nature
Adobe Dreamweaver CC: The Professional Portfolio
Tag Selectors (cont’d)
Adobe Dreamweaver CC: The Professional Portfolio
Compound/Descendent Selectors
Only affect elements in specific divs
Adobe Dreamweaver CC: The Professional Portfolio
Pseudo-Class Selectors
a:link
a:visited
a:hover
a:focus
a:active