Web Responsive Design.

Slides:

Advertisements

Similar presentations

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 7 Key Concepts 1 Copyright © Terry Felke-Morris.

Advertisements

Web Design with Cascading Style Sheet Lan Vu. Overview Introduction to CSS Designing CSS Using Visual Studio to create CSS Using template for web design.

Chapter 8 Designing with Cascading Style Sheets. Chapter 8 Topics Building three different types of complete Web pages using CSS: Build a style sheet.

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.

Glencoe Digital Communication Tools Create a Web Page with HTML Chapter Contents Lesson 4.1Lesson 4.1 Get Started with HTML (85) Lesson 4.2Lesson 4.2 Format.

What is Web Design The term “web design” has come to encompass a number of disciplines, including: Visual (graphic) design User interface and experience.

Website Design BTT1OC/2OC. What is web design? O A web site is a digital page consisting of HTML (hypertext markup language) files, images, movies, sound,

Using Cascading Style Sheets (CSS) Dept. of Computer Science and Computer Information CSCI N-100.

Unit 2, Lesson 5 Website Development Tools AOIT Web Design Copyright © 2008–2012 National Academy Foundation. All rights reserved.

TUTORIAL 8: Enhancing a Web Site with Advanced CSS

Basics of HTML.

HTML Essentials Frames and Frame Tags. Introduction A frame used to be an effective design tool Utilized space effectively by subdividing screen One idea:

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

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.

 a style language that defines layout & appearance of HTML documents  CSS covers fonts, colours, margins, lines, height, width, background images and.

Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.

Chapter 18 Web Design April 16 th & 17 th. Content The most essential element of any Web page is the content Before you begin a Web page you want to know.

Web Technologies Website Development Trade & Industrial Education

Basic Responsive Design Techniques. Let’s take a look at this basic layout. It has a header and two columns of text, in a box that is centered on the.

Chapter 1 Understanding the Web Design Environment Principles of Web Design, 4 th Edition.

Week 1 Understanding the Web Design Environment. 1-2 HTML: Then and Now HTML is an application of the Standard Generalized Markup Language Intended to.

Week 8 – Part 3 More on Links, Layout, and Mobile Key Concepts 1.

Website Development with Dreamweaver

HTML CSS JAVASCRIPT. HTML - Stands for Hyper Text Markup Language HTML is a ‘language’ that describes web pages. This language is a collection of codes.

Project – Show me what you know! EXPLORING COMPUTER SCIENCE – LESSON 3-9.

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 7 Key Concepts 1 Copyright © Terry Felke-Morris.

Planning your site/organization on the Web Please use speaker notes for additional information!

Professor Waterman Cascading Style Sheets (CSS) is a language that works with HTML documents to define the way content is presented. The presentation.

Use CSS to Implement a Reusable Design Selecting a Dreamweaver CSS Starter Layout is the easiest way to create a page with a CSS layout You can access.

INTRODUCTION TO CSS. TOPICS TO BE DISCUSSED……….  Introduction Introduction  Features of CSS Features of CSS  Creating Style Sheet Creating Style Sheet.

TOPIC II Dynamic HTML Prepared by: Nimcan Cabd Cali.

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 7 Key Concepts 1 Copyright © Terry Felke-Morris.

CNIT 132 – Week 4 Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of.

Are You Smarter Than a 5 th Grader? 1,000,000 5th Grade HTML 5th Grade Syntax 4th Grade HTML 4th Grade Syntax 3rd Grade HTML 3rd Grade Syntax 2nd Grade.

INFO1300 LAB7 OCT.11TH RESPONSIVE DESIGN. WHAT IS RESPONSIVE WEB DESIGN A mix of flexible grids and layouts, images and an intelligent use of CSS media.

LESSON 15 – UNIT 0 ADAPTING YOUR WEB SITE FOR MOBILE DEVICES.

 An HTML, CSS, Javascript framework you can use as a basis for creating web sites  Uses CSS settings, fundamental HTML elements styled and enhanced.

Dreamweaver is an XHTML editor that allows you to: Create a site Create external Cascading Style Sheets (CSS) to store the styles used in your pages Create.

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

What is CSS? A set of style rules that tell the web browser how to present a web page or document. – In earlier versions of HTML, style characteristics,

Cascading Style Sheets (CSS). Learning Objectives To develop an understanding of how CSS can enhance the design of a webpage To create and apply CSS styling.

Working with Cascading Style Sheets

Web Development & Design Foundations with HTML5

Web Basics: HTML/CSS/JavaScript What are they?

HTML5 Level II Session V Chapter 8 - How to Use Responsive Web Design (RWD)

Chapter 7 Absolute/relative hyperlinks Frag id 3-column site

Cascading Style Sheets

ATLAS WEB JavaScript & the DOM.

Course Introduction Professional Web Designing for Beginners

Web Development & Design Foundations with HTML5

Unit 2, Lesson 5 Website Development Tools

Introduction to web design discussing which languages is used for website designing

Unit 2, Lesson 5 Website Development Tools

APTECH JANAKPURI INSTITUTE PROVIDING WEB DESIGNING COURSES Address:- J-1,2nd Floor, Opp Metro Pillar No – 559, Janakpuri East, Delhi /42.

Cascading Style Sheets - Building a stylesheet

Overview of Dreamweaver

Grids, Floats & Flex Boxes

Introduction to Cascading Style Sheets (CSS)

Session VI Chapter 8 - How to Use Responsive Web Design (RWD)

What are Cascading Stylesheets (CSS)?

Chapter 8 - How to Use Responsive Web Design (RWD)

Training & Development

Chapter 7 Absolute/relative hyperlinks Frag id 3-column site

Apply procedures to create cascading style sheets.

Computer communications

Cascading Style Sheets - Building a stylesheet

Web Development & Design Foundations with HTML5

17 RESPONSIVE WEB DESIGN.

Christopher Harrison Jeremy Foster

Presentation transcript:

Web Responsive Design

Project 3: Responsive Story Create single RESPONSIVE web page that tells a "multiple page" story by using @media queries to display and hide content based on the width of a browser window. Each individual "frame" should tell a part of the narrative. The background image should cycle through a stop motion or flipbook style animation. The content can be a creative short story, topic, or idea of your own. All graphics and imagery must be original. The theme of your Responsive Story must be academic in nature and ideally center around themes related to technology, arts & media. NO PROJECTS ABOUT BOULDER, CU, YOUR PETS, YOUR FRIENDS, SNOWBOARDING/SKIING, ETC. Site design: Responsive web design Fluid grid layout @media queries Viewport Responsive media Google fonts Validated HTML5 & CSS3 code REQUIRED External style sheet(s) Original optimized graphics and imagery

Project 3: Responsive Story - Examples http://creative.colorado.edu/~dyco5793/web/responsive-story.html http://creative.colorado.edu/~maed0844/web/responsive-story.html http://creative.colorado.edu/~grmc7844/web/responsive-story.html http://creative.colorado.edu/~emoo2919/web/responsive-story.html http://creative.colorado.edu/~keti8027/web/responsive-story.html http://creative.colorado.edu/~trmo7077/web/responsive.html

Responsive Design No traditional PPT document. Demo conducted in-class within code editor. Download demo files on class website.

Attendance Question: Week 9 Beyond layout and design, what other aspects of web development should a web developer consider when building a site with mobile users in mind? Post your question to Edmodo under “Lecture Attendance Question Week 9” Your answer should be approximately one paragraph in length.

Attendance Question: Week 7 Poor Ian is lost. Write a script to guide him back to Pekoe Coffee and help him buy a drink. Detail is essential. Don’t get him killed. Post your question to Edmodo under “Lecture Attendance Question Week 7” Your answer should be approximately one paragraph in length.