WEB DEVELOPMENT IMMERSIVE ADVANCED LAYOUT, FORMS, & MEDIA.

Slides:

Advertisements

Similar presentations

15 LAYOUT Controlling the position of elements Creating site layouts Designing for different sized screens.

Advertisements

TOPIC LEARNING BTEC Level 3 Unit 28 Websites L01- Understand the customer requirements L02- Create a website design that meets the audience and purpose.

Chapter 7 Page Layout Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.

Part 5 Introduction to CSS. CSS Display - Block and Inline Elements A block element is an element that takes up the full width available, and has a line.

This menu appears at the top of the page in the header tag. The typography and colour scheme is simplistic so that the site is easy to read and navigate.

Macromedia Dreamweaver 4 Advanced Level Course. Add Rollovers Rollovers or mouseovers are possibly the most popular effects used in designing Web pages.

3.2 Presentation Software End Show Creating slide shows including audio,video and digital images End Show.

 A “new-ish” web design methodology  Addresses growing number of Internet devices  Tailored experience to any device  Limits resizing, panning.

Responsive Web Design, Discoverability, and Mobile Challenge

Intro to RESPONSIVE DESIGN. Why? What?

Web Development & Design Foundations with XHTML Chapter 6 Key Concepts.

Kathy E. Responsive Design and Twitter Bootstrap.

E0262 – MIS – Multimedia Storage Techniques SMIL – Synchronized Multimedia Integration Language.

Chapter 4 Dreamweaver: Part II The Web Warrior Guide to Web Design Technologies.

Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document.

Web Design, 3 rd Edition 4 Planning a Successful Web Site: Part 2.

Drupal Training Syllabus Chaitanya Lakshmi

Cascading Style Sheets CSS. CSS Positioning Normal Flow Top -> bottom | left -> right Arranged in the order they appear in the code make room for one.

Cascading Style Sheets CSS. div … Used like a container to group content Gives context to the elements in the grouping Give it a descriptive name with.

Technologies for web publishing Ing. Václav Freylich Lecture 7.

 2000 Deitel & Associates, Inc. All rights reserved. Chapter 20 – Dynamic HTML: Path, Sequencer and Sprite ActiveX Controls Outline 20.1Introduction 20.2DirectAnimation.

CS134 Web Design & Development Dreamweaver More Features Mehmud Abliz.

 Website development process  CSS  Javascript.

Kirkwood Center for Continuing Education Introduction to PHP and MySQL By Fred McClurg, Copyright © 2015 All Rights Reserved.

CSS = Cascading Style Sheet CSS consists of rules to display, style and decorate HTML elements Why CSS ? – Separate decoration from HTML markup (Ex :,,…)

Planning Your Website What information do you want to present? –Collect your resources –Create a narrative Who are you presenting it to? –Education level.

Web sites Design: Cascading Style Sheet (CSS) (Cont’d) Dimensions and Position of Elements –Width and Height Space –Table Cell Padding –Left and Top Position.

Today’s Agenda Advanced CSS Techniques Floating Z-index Centering Sliding Doors Fluid Layouts CSS3 Advanced CSS Lab Mini Project #2.

Web Programming Language CSS – Part 2 Dr. Ken Cosh (CSS II)

Frontend - HTML5 - CSS3 - Bootstrap 3.x. SemanticsPerformanceCSS3.

CSS BEST PRACTICES.

Week 8 – Part 2 Page Layout Basics Key Concepts 1.

Project 6: Kayaking HTML5 Site

Cascading Style Sheets (CSS). A style sheet is a document which describes the presentation semantics of a document written in a mark-up language such.

WEB DEVELOPMENT IMMERSIVE BUILDING PAGE LAYOUTS. 2 Box Model Scaling Positioning Boxes Box Aesthetics HTML 5 Semantic Tags CSS Resets TOPICS GENERAL ASSEMBLYWEB.

INTRODUCTORY Tutorial 5 Using CSS for Layout and Printing.

3.2 Cascading Style Sheets. 2 Positioning Elements Normally, elements are laid out on the page in the order that they are defined in the XHTML document.

Tutorial 4 Creating Special Effects with CSS. XP Objectives Work with CSS selectors Create styles for lists Create and apply class styles Create a rollover.

learn. do. dream. Bootstrapping with Twitter Bootstrap Responsive Layouts CSS Components JavaScript Font Awesome Select2 Themes.

CSS Positioning & Layout Creating layouts and controlling elements.

Styles for webpages. Multi-column layout #navcol {position: absolute; top: 5px; left: 5px; width:260px; background-color: black; border:none; z-Index:0}

Cascading Style Sheets CSS2 - a bit more advanced.

IN THE DOCUMENT OBJECT MODEL, EACH LINE OF HTML IS AN ELEMENT (AN OBJECT), ABLE TO HAVE ATTRIBUTES, PROPERTIES AND VALUES. CSS TELLS THE BROWSER HOW TO.

- WE’LL LOOK AT THE POSITION PROPERTY AND HOW CSS RESOLVES CONFLICTS BETWEEN STYLING INSTRUCTIONS The position property; CSS specificity hierarchy.

Week 5.  Normal document flow  Affecting document flow with float and position properties using CSS  Using these properties to create layouts.

INT222 – Internet Fundamentals Week 8: Using New HTML features 1.

Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Textbook to be published by Pearson Ed in early Bootstrap.

Cascading Styles Sheets Positioning HTML elements.

CM143- WEB CM143-WEB Page Layout live sites HTML Images User Considerations Planning Navigation CSS Architecture File Management Cascading Style Sheets.

 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 18 - Dynamic HTML: Path Sequencer and Sprite ActiveX Controls Outline 18.1 Introduction 18.2.

Working with Links and Navigation

Objective % Select and utilize tools to design and develop websites.

Responsive Design and Twitter Bootstrap

Putting Things Where We Want Them

Objective % Select and utilize tools to design and develop websites.

CS3220 Web and Internet Programming Page Layout with CSS

Responsive Design in WordPress

CS3220 Web and Internet Programming Page Layout with CSS

HTML5 Level III Responsive Web Design (RWD) and Front-End Frameworks

Developing Branding Solutions for 2013

CSS BEST PRACTICES.

Fixed Positioning.

HTML5 Level III Responsive Web Design (RWD) and Front-End Frameworks

CS134 Web Design & Development

CS3220 Web and Internet Programming Page Layout with CSS

HTML5 Level III Responsive Web Design (RWD) and Front-End Frameworks

Web Page Layout Imran Rashid CTO at ManiWeber Technologies.

Web Client Side Technologies Raneem Qaddoura

Cascading Style Sheets

Presentation transcript:

WEB DEVELOPMENT IMMERSIVE ADVANCED LAYOUT, FORMS, & MEDIA

2 Grid Systems Positioning Properties User Forms Embedding Media Image Sprites & Rollovers Front End Frameworks TOPICS GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

3 POPULAR CSS GRID SYSTEMS GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE 960 Blueprint SenCSS The Semantic Grid System Twitter Bootstrap (grid included)

4 CSS GRID SYSTEMS GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

5 CSS GRID SYSTEMS GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

6 RELATIVE POSITIONING GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE.box { position:relative; top: 25px; left: 200px; }

7 RELATIVE POSITIONING GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

8 ABSOLUTE POSITIONING GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE.box { position:absolute; top: 0; right: 0; }

9 ABSOLUTE POSITIONING GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

10 FIXED POSITIONING GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE.box { position:fixed; top: 0; right: 150px; }

11 FIXED POSITIONING GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

12 Z-INDEX (LAYERING) GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE.bluebox { position:relative; top: 125px; left: 125px; z-index:3; }

13 Z-INDEX (LAYERING) GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

14 EMBEDDING VIDEO WITH A SINGLE SOURCE GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

15 EMBEDDING VIDEO USING MULTIPLE SOURCES GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

16 VIDEO ELEMENT SUPPORT GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

17 VIDEO CODEC TYPE SUPPORT GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

18 CUSTOM VIDEO PLAYER SOLUTIONS GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE Reviews & Feature Chart:

19 IMAGE SPRITES GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE YES NO

20 IMAGE SPRITES GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE Sprites can include 2 states for a single icon or they can contain multiple states for many different menu items. One advantage is quicker loading time. Load navigation images all at once. No waiting during the mouseover event.

21 SINGLE ICON, 2 STATES GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

22 MULTI ICON, MULTI STATES GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

23 CSS SPRITE ROLLOVER GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

24 FRONT END FRAMEWORKS GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE html5boilerplate.com html5boilerplate.com/mobile

25 TWITTER BOOTSTRAP 2 GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE twitter.github.com/bootstrap

26 GENERAL ASSEMBLY WEB DEVELOPMENT IMMERSIVE