project 4: yosemite css layout

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