Upload File

adobe dreamweaver cc: the professional portfolio project 4: yosemite css layout creating layouts...

  • Home
  • Documents
  • Adobe Dreamweaver CC: The Professional Portfolio Project 4: Yosemite CSS Layout Creating layouts with style sheets Working with a template Using CSS to
26
Adobe Dreamweaver CC: The Professional Portfolio Project 4: Yosemite CSS Layout Creating layouts with style sheets Working with a template Using CSS to control content

Upload: geraldine-gibson

Post on 13-Jan-2016

219 views

Category:

Documents


0 download

Report

Tags:

TRANSCRIPT

Page 1: Adobe Dreamweaver CC: The Professional Portfolio Project 4: Yosemite CSS Layout Creating layouts with style sheets Working with a template Using CSS to

Adobe Dreamweaver CC: The Professional Portfolio

Project 4:

Yosemite CSS LayoutCreating layouts with style sheetsWorking with a templateUsing CSS to control content

Page 2: Adobe Dreamweaver CC: The Professional Portfolio Project 4: Yosemite CSS Layout Creating layouts with style sheets Working with a template Using CSS to

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

Adobe Dreamweaver CC: The Professional Portfolio

Style Basics

External styles

Embedded styles

Inline styles

Page 4: Adobe Dreamweaver CC: The Professional Portfolio Project 4: Yosemite CSS Layout Creating layouts with style sheets Working with a template Using CSS to

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

Adobe Dreamweaver CC: The Professional Portfolio

Creating a CSS File

Page 6: Adobe Dreamweaver CC: The Professional Portfolio Project 4: Yosemite CSS Layout Creating layouts with style sheets Working with a template Using CSS to

Adobe Dreamweaver CC: The Professional Portfolio

Attaching a CSS File

Attach (link) to an HTML file

Use different files for different media

Page 7: Adobe Dreamweaver CC: The Professional Portfolio Project 4: Yosemite CSS Layout Creating layouts with style sheets Working with a template Using CSS to

Adobe Dreamweaver CC: The Professional Portfolio

Viewing CSS Code

Page 8: Adobe Dreamweaver CC: The Professional Portfolio Project 4: Yosemite CSS Layout Creating layouts with style sheets Working with a template Using CSS to

Adobe Dreamweaver CC: The Professional Portfolio

The CSS Designer panel

Page 9: Adobe Dreamweaver CC: The Professional Portfolio Project 4: Yosemite CSS Layout Creating layouts with style sheets Working with a template Using CSS to

Adobe Dreamweaver CC: The Professional Portfolio

Creating CSS Rules

Page 10: Adobe Dreamweaver CC: The Professional Portfolio Project 4: Yosemite CSS Layout Creating layouts with style sheets Working with a template Using CSS to

Adobe Dreamweaver CC: The Professional Portfolio

The “Undo” Warning

CSS file active in Code pane

Page 11: Adobe Dreamweaver CC: The Professional Portfolio Project 4: Yosemite CSS Layout Creating layouts with style sheets Working with a template Using CSS to

Adobe Dreamweaver CC: The Professional Portfolio

The CSS Box Model

Margin

Border

Padding

Content

Page 12: Adobe Dreamweaver CC: The Professional Portfolio Project 4: Yosemite CSS Layout Creating layouts with style sheets Working with a template Using CSS to

Adobe Dreamweaver CC: The Professional Portfolio

ID selectors

Apply to <div> tags

# sign in name

Page 13: Adobe Dreamweaver CC: The Professional Portfolio Project 4: Yosemite CSS Layout Creating layouts with style sheets Working with a template Using CSS to

Adobe Dreamweaver CC: The Professional Portfolio

Inserting Div Tags

Structure Insert panel

Insert>Layout Objects> Div Tag

Page 14: Adobe Dreamweaver CC: The Professional Portfolio Project 4: Yosemite CSS Layout Creating layouts with style sheets Working with a template Using CSS to

Adobe Dreamweaver CC: The Professional Portfolio

Inserting Div Tags (cont’d)

Click edge to show box model

HTML code is minimal, purely structural

Page 15: Adobe Dreamweaver CC: The Professional Portfolio Project 4: Yosemite CSS Layout Creating layouts with style sheets Working with a template Using CSS to

Adobe Dreamweaver CC: The Professional Portfolio

Nesting Divs

Page 16: Adobe Dreamweaver CC: The Professional Portfolio Project 4: Yosemite CSS Layout Creating layouts with style sheets Working with a template Using CSS to

Adobe Dreamweaver CC: The Professional Portfolio

Templates

File>Save as Template

.dwt extension

Templates folder

Page 17: Adobe Dreamweaver CC: The Professional Portfolio Project 4: Yosemite CSS Layout Creating layouts with style sheets Working with a template Using CSS to

Adobe Dreamweaver CC: The Professional Portfolio

Editable Regions

Page 18: Adobe Dreamweaver CC: The Professional Portfolio Project 4: Yosemite CSS Layout Creating layouts with style sheets Working with a template Using CSS to

Adobe Dreamweaver CC: The Professional Portfolio

Paths in Templates

Site Setup: Advanced Settings

Document-relative paths

Page 19: Adobe Dreamweaver CC: The Professional Portfolio Project 4: Yosemite CSS Layout Creating layouts with style sheets Working with a template Using CSS to

Adobe Dreamweaver CC: The Professional Portfolio

New From Template optionAssets panel contextual menu

New From Template option in File>New dialog box

Page 20: Adobe Dreamweaver CC: The Professional Portfolio Project 4: Yosemite CSS Layout Creating layouts with style sheets Working with a template Using CSS to

Adobe Dreamweaver CC: The Professional Portfolio

Apply Template to Page

Modify>Templates submenu

Inconsistent Region Names

Page 21: Adobe Dreamweaver CC: The Professional Portfolio Project 4: Yosemite CSS Layout Creating layouts with style sheets Working with a template Using CSS to

Adobe Dreamweaver CC: The Professional Portfolio

Apply Template to Page (cont’d)

Page 22: Adobe Dreamweaver CC: The Professional Portfolio Project 4: Yosemite CSS Layout Creating layouts with style sheets Working with a template Using CSS to

Adobe Dreamweaver CC: The Professional Portfolio

Modifying Templates

Open from Files panel

File>Save

Update linked files

Page 23: Adobe Dreamweaver CC: The Professional Portfolio Project 4: Yosemite CSS Layout Creating layouts with style sheets Working with a template Using CSS to

Adobe Dreamweaver CC: The Professional Portfolio

Tag Selectors

Format all content with a specific tag

“Nested” nature

Page 24: Adobe Dreamweaver CC: The Professional Portfolio Project 4: Yosemite CSS Layout Creating layouts with style sheets Working with a template Using CSS to

Adobe Dreamweaver CC: The Professional Portfolio

Tag Selectors (cont’d)

Page 25: Adobe Dreamweaver CC: The Professional Portfolio Project 4: Yosemite CSS Layout Creating layouts with style sheets Working with a template Using CSS to

Adobe Dreamweaver CC: The Professional Portfolio

Compound/Descendent Selectors

Only affect elements in specific divs

Page 26: Adobe Dreamweaver CC: The Professional Portfolio Project 4: Yosemite CSS Layout Creating layouts with style sheets Working with a template Using CSS to

Adobe Dreamweaver CC: The Professional Portfolio

Pseudo-Class Selectors

a:link

a:visited

a:hover

a:focus

a:active


Learning Adobe DreamWeaver CS4 - CSS Styles

The Essential Guide to Dreamweaver CS4 with CSS, Ajax, and PHP · the essential guide to dreamweaver cs4 with css, ajax, and php 238 To edit a menu item, highlight it, and fill in

Dreamweaver: Visual Design using CSS - openeye-training.com · Dreamweaver: Visual Design using CSS Introduction Cascading Style Sheets, or CSS, are analogous to “styles” that

Web Authoring Using Adobe Dreamweaver CC · 4.1 Define a new Dreamweaver site. 4.2 Create a web page and define the page layout using HTML, CSS, and structural HTML elements. 4.3

Dreamweaver: Styling and Layout Using CSS - Gateway · Welcome to the course Dreamweaver: Styling and Layout Using CSS. This booklet accompanies the course delivered by the University

Adobe Dreamweaver CS4 - Illustrated Formatting Text Using HTML and CSS Styles

Creating Web Pages with Dreamweaver CS 6 and CSS

Dreamweaver Introduction - onlineinstruct.com · Dreamweaver® Page 9 Building & Applying External CSS in Dreamweaver Now that you have a good fundamental understanding of CSS, it’s

Css dreamweaver

Dreamweaver CS4 – Day 2 Creating a Website using Div Tags, CSS

Visual CSS Editing in Dreamweaver

Creating Web Pages with Dreamweaver CS 6 and CSS Web Pages with Dreamweaver CS 6 and CSS A University of Michigan Library Instructional Technology Workshop Need help? Visit the Faculty

XP Dreamweaver 8.0 Tutorial 3 1 Adding Text and Formatting Text with CSS Styles

CSS Sculptor 3 Getting Started - WebAssist | Dreamweaver

Creating Page Layouts with CSS - … · See “Resetting the Dreamweaver workspace” in the ... when exploring and creating page layouts with CSS, ... use CSS IDs for layout. Think

Dan (Photoshop, Dreamweaver, CSS, Premiere) Toby (Fireworks, Dreamweaver, CSS, Flash) Robin (XHTML/CSS, Fireworks, Textpattern) Lewis (Photoshop,

Advanced CSS - Page Layout. Advanced CSS Compound Selectors: Is a Dreamweaver term, not a CSS term. Describes more advanced types of selectors such

Adobe Dreamweaver CS4 - Illustrated Using CSS to Lay Out Pages

Dan (Photoshop, Dreamweaver, CSS, Premiere) Toby (Fireworks, Dreamweaver, CSS, Flash)

Introduction to Dreamweaver - ECE/CISyarringt/103/labs/DWLab1/Dreamweaver... · Introduction to Dreamweaver ... Dreamweaver also supports CSS and JavaScript as well as other languages

Adobe Brackets for Educators - · PDF fileSo what? 0 I teach web design and development 0 Beginning students don’t need to know Dreamweaver 0 They need to know HTML and CSS 0 Dreamweaver

Dreamweaver cs3 och css

Creating Web Pages with Dreamweaver CS 6 and · PDF fileCreating Web Pages with Dreamweaver CS 6 and CSS A University of Michigan Library Instructional Technology Workshop Need help?

Dreamweaver CS5 all-in-one for dummies : [9 books in 1 ... · Dreamweaver®CSS ALL-IN-ONE FOR DUMHIE&' bySueJenkinsandRichardWagner WILEY WileyPublishing,Inc

CSS Introduction - Sacramento Statecsus.edu/atc/tools/dreamweaver/css-introduction.pdf · Cascading Style Sheets (CSS) enable you to precisely control the formatting of elements on

Cascading Style Sheets - csus.educsus.edu/atc/tools//dreamweaver/css-introduction.pdf · Cascading Style Sheets (CSS) enable you to precisely control the formatting of elements on

Dreamweaver CS5.5 : the missing manual · Analyzing CSS with Dreamweaver 413 EditingCSSProperties 415 AnalyzingCSSin JavaScript and Server-Side Pages 416 CheckingBrowser Compatibility

Information Architecture Organizing content. 1. Steelers fan site 2. Information Architecture 2. CSS | Dreamweaver | Forms Today’s objectives

IT 214 - Foundations of Web Design Welcome!. Welcome to Unit 6! Using CSS in Dreamweaver Readings: Read Adobe Dreamweaver CS5 Classroom in a Book (CIAB)

Styling HTML5valerianweb.com/tutor/Assets/CSS/51_StylingaSite.pdf · Using a CSS Reset • All space around elements removed • Will look the same in all browsers • Including Dreamweaver

Adobe Developer Connection Dreamweaver ArticleTo display the O'Reilly CSS reference guide included with Dreamweaver, select Help > Reference and select O'Reilly CSS Reference from

Dreamweaver 8 Cascading Style Sheets - CSS …swc2.hccs.edu/tan/DWLectureDocs/CSSLectureNotes.pdf · Dreamweaver 8 Cascading Style Sheets - CSS Recommended books for future reference

Dreamweaver -- CSS. Dreamweaver -- MX New icons are added in MX Most of the features commonly used in web design, and are same as FrontPage. New feature

Using Adobe Dreamweaver CS4 (10.0) · Using Adobe Dreamweaver CS4 (10.0) [email protected] WebDesign 5 3 Click the Links (CSS) Category and select one of the following

Information Architecture Organizing content. 1. Information Architecture 2. CSS | Dreamweaver 3. Using Morae – usability testing software Today’s objectives