Presentation is loading. Please wait.

Presentation is loading. Please wait.

Adobe Dreamweaver CC: The Professional Portfolio Project 8: BLVD Fluid Grid Site Working with fluid grids Creating CSS3 transitions.

Published byMary Owen Modified over 8 years ago

Similar presentations

Presentation on theme: "Adobe Dreamweaver CC: The Professional Portfolio Project 8: BLVD Fluid Grid Site Working with fluid grids Creating CSS3 transitions."— Presentation transcript:

1 Adobe Dreamweaver CC: The Professional Portfolio Project 8: BLVD Fluid Grid Site Working with fluid grids Creating CSS3 transitions

2 Adobe Dreamweaver CC: The Professional Portfolio Creating a Fluid Grid Page

3 Adobe Dreamweaver CC: The Professional Portfolio Dependent Files

4 Fluid Grid Layout Divs Three selectors per div Media queries for each screen size Adobe Dreamweaver CS6: The Professional Portfolio

5 Adobe Dreamweaver CC: The Professional Portfolio Media Queries

6 Adobe Dreamweaver CC: The Professional Portfolio Fluid Grid Layout Divs Placed inside the gridContainer div tag Class or ID attribute

7 Unique layout div selectors for each Same content Adobe Dreamweaver CC: The Professional Portfolio Multiple Device Layouts

8 Adobe Dreamweaver CC: The Professional Portfolio CSS3 Transitions

9 Adobe Dreamweaver CC: The Professional Portfolio CSS Transitions (cont.)

Download ppt "Adobe Dreamweaver CC: The Professional Portfolio Project 8: BLVD Fluid Grid Site Working with fluid grids Creating CSS3 transitions."

Similar presentations

Tables Feb. 14, 2012. Tables Great way to organize and display information Laid out in columns and rows Think of an excel spreadsheet Defined with tag.

Tables Feb. 14, Tables Great way to organize and display information Laid out in columns and rows Think of an excel spreadsheet Defined with tag.
Bending Zen Intro Using Zen Themes functionality, but bending it into your own theme.

Bending Zen Intro Using Zen Themes functionality, but bending it into your own theme.
Table (TABLE) Contains TABLE ROWS (TR) Contains TABLE DATA (TD) Data can contain anything Text Lists Other tables Pictures …

Table (TABLE) Contains TABLE ROWS (TR) Contains TABLE DATA (TD) Data can contain anything Text Lists Other tables Pictures …
15 LAYOUT Controlling the position of elements Creating site layouts Designing for different sized screens.

15 LAYOUT Controlling the position of elements Creating site layouts Designing for different sized screens.
Ideas to Layout Beginning web layout using Cascading Style Sheets (CSS). Basic ideas, practices, tools and resources for designing a tableless web site.

Ideas to Layout Beginning web layout using Cascading Style Sheets (CSS). Basic ideas, practices, tools and resources for designing a tableless web site.
HTML Overview - Cascading Style Sheets (CSS). Before We Begin Make a copy of one of your HTML file you have previously created Make a copy of one of your.

HTML Overview - Cascading Style Sheets (CSS). Before We Begin Make a copy of one of your HTML file you have previously created Make a copy of one of your.
CONCEPTS FOR FLUID LAYOUT Web Page Layout. Website Layouts Most websites have organized their content in multiple columns (formatted like a magazine or.

CONCEPTS FOR FLUID LAYOUT Web Page Layout. Website Layouts Most websites have organized their content in multiple columns (formatted like a magazine or.
16 HTML Tables and Frames Section 16.1 Create a basic table using HTML Define borders Merge cells Align content in tables Section 16.2 Create a frames-based.

16 HTML Tables and Frames Section 16.1 Create a basic table using HTML Define borders Merge cells Align content in tables Section 16.2 Create a frames-based.
Chapter 3 Tables and Page Layout

Chapter 3 Tables and Page Layout
Beginning Web Site Creation: Dreamweaver CS4. XHTMLCSS  Describes the structure  Content  Collection of styles  Formatting body { background-color:

Beginning Web Site Creation: Dreamweaver CS4. XHTMLCSS  Describes the structure  Content  Collection of styles  Formatting body { background-color:
 CSS ids  Pages  Sites  HTML: class=“name”  Names may define format OR content › Either works  CAN apply multiple classes to the same tag  Multiple.

 CSS ids  Pages  Sites  HTML: class=“name”  Names may define format OR content › Either works  CAN apply multiple classes to the same tag  Multiple.
XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.

XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.
Art 128 Interface Programming 1 In-class Presentation Week 11B.

Art 128 Interface Programming 1 In-class Presentation Week 11B.
Working with Cascading Style Sheets. 2 Objectives Introducing Cascading Style Sheets Using Inline Styles Using Embedded Styles Using an External Style.

Working with Cascading Style Sheets. 2 Objectives Introducing Cascading Style Sheets Using Inline Styles Using Embedded Styles Using an External Style.
Responsive Web Design Sheri German, Instructor Montgomery College.

Responsive Web Design Sheri German, Instructor Montgomery College.
Getting Started with Adobe Dreamweaver CS6. Unit Objectives Define web design software Start Adobe Dreamweaver CS6 View the Dreamweaver workspace Work.

Getting Started with Adobe Dreamweaver CS6. Unit Objectives Define web design software Start Adobe Dreamweaver CS6 View the Dreamweaver workspace Work.
CIT 256 Mobile Web Development Dr. Beryl Hoffman.

CIT 256 Mobile Web Development Dr. Beryl Hoffman.
WDV 331 Dreamweaver Applications Designing Websites for Mobile Devices Dreamweaver CS6 Chapter 11.

WDV 331 Dreamweaver Applications Designing Websites for Mobile Devices Dreamweaver CS6 Chapter 11.
Cascading Style Sheets (CSS) Instructor: Mr. Ahmed Al Astal ITGD4104 Department Requirement for senior student University of Palestine Faculty of IT.

Cascading Style Sheets (CSS) Instructor: Mr. Ahmed Al Astal ITGD4104 Department Requirement for senior student University of Palestine Faculty of IT.
XP Tutorial 7New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks.

XP Tutorial 7New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks.

Similar presentations

Ads by Google