Upload
iman
View
85
Download
0
Tags:
Embed Size (px)
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 Presentation
Citation preview
Adobe Dreamweaver CC/2015 Release
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
Creating CSS Rules
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
HTML Insert panel
Insert>Div
Drag from panel in Live view
Adobe Dreamweaver CC: The Professional Portfolio
Inserting Div Tags (cont’d)
Click edge to show box model
HTML code is minimal, purely structural
Editing in Live View
Drag-and-drop
Define IDs and classes
Adobe Dreamweaver CC: The Professional Portfolio
Using the DOM Panel
Review/organize structural hierarchy
Adobe Dreamweaver CC: The Professional Portfolio
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