WRA 210: 10/30/2013 WIREFRAMES TO HTML/CSS. TODAY’S AGENDA Review: the object Review: the CSS Box Model Review: box model, and layout Intro: HTML5 structural.

Slides:

Advertisements

Similar presentations

Table (TABLE) Contains TABLE ROWS (TR) Contains TABLE DATA (TD) Data can contain anything Text Lists Other tables Pictures …

Advertisements

Cascading Style Sheets

Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is.

Today CSS HTML A project.

Tutorial 4: Creating page layout with css

How to Create a Liquid Three-Column CSS Layout. Draw Your Layout No more than 900px wide 20px gutter on the left 10px between columns and rows Common.

Tutorial 6 Creating Fixed-Width Layouts

Creating Tables Text Tables -created by using preformatted tags. Graphical Tables - created using Table Structure with HTML.

 CSS ids  Pages  Sites  HTML: class=“name”  Names may define format OR content › Either works  CAN apply multiple classes to the same tag  Multiple.

Lecture Cascading Style Sheets (CSS) Internal Style Sheets Classes.

Art 128 Interface Programming 1 In-class Presentation Week 11B.

CSS (Cascading Style Sheets): How the web is styled Create Rules that specify how the content of an HTML Element should appear. CSS controls how your web.

TUTORIAL 8: Enhancing a Web Site with Advanced CSS

IMAGES Controlling size of images in CSS Aligning images in CSS Adding background images.

WRA /16/13 HTML VALIDATION & HTML5. TODAY’S AGENDA Overview of new objects: lists, tables Overview of metadata: meta tags, comments History of the.

Tutorial 6 Creating Tables and CSS Layouts. Objectives Session 6.1 – Create a data table to display and organize data – Modify table properties and layout.

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

Tutorial 4: Using CSS for Page Layout. 2 Objectives Session 4.1 Explore CSS layout Compare types of floating layouts Examine code for CSS layouts View.

ITP 104.  While you can do things like this:  Better to use styles instead:

Eat Your Words! Creating webpage Layout. CONTENT The Layout of a Webpage HEADER FOOTER Each of these sections represents a ‘div’ (or divider). By linking.

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.

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

IDs versus Classes Naming Your Tags for Maximum Functionality.

WRT235: Writing in Electronic Environments CSS Classes, IDs, divs.

Neal Stublen Course Road Map  Create web page layouts using CSS  Manage CSS  Test website validity  Create navigation menus using.

HTML5 Sections Old structuring elements –body, div, address, blockquote –headings: h1, h2, h3, … –ul, ol, table New structuring elements –header, footer,

>> HTML: Structure Elements. Elements in HTML are either Inline or Block. Block-level Elements – Begins on a new line – Occupy the whole width – Stacks.

Tutorial #6 – Creating Fixed Width Layouts. Tutorial #5 Review – Box Model Every html element is surround by a box Content, Padding, Border, Margin Can.

Lecture 2 - HTML and CSS Review SFDV3011 – Advanced Web Development 1.

Table (TABLE) Contains TABLE ROWS (TR) Contains TABLE DATA (TD) Data can contain anything › Text › Lists › Other tables › Pictures › …

WRA HTML & CSS – BUILDING WEBPAGES. TODAY’S AGENDA Review: external stylesheets Review: transforming a list Intro: the object Intro: the.

Interface Programming 1 Week 3. Interface Programming 1 CALENDAR.

audio video object Options: controls autoplay Need to define height and width Options: controls autoplay.

CSW131 Steven Battilana 1 CSW 131 – Chapter 6 Laying Out Pages Prepared by Prof. B. for use with Teach Yourself Visually Web Design by Ron Huddleston,

Web Design I Spring 2009 Kevin Cole Gallaudet University

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.

Kapi’olani Community College Art 128 Interface Programming 1 In-class Presentation Week 3A.

11/12/2015 Box Model Reed Crouch. 11/12/2015  HTML elements can be considered as boxes. In CSS, the term "box model" is used when referring to layout.

1 Preparation for site Create a folder in MyDocuments: beavercheese. Create a subfolder, images Classes, career, DW beginner Download.

8/13/2003 Designing Without Tables Using CSS by Reshma Kumar and Marina Naito.

HTML and Dreamweaver November 11th. Agenda Box Model Displaying and positioning elements – Padding – Margin – Float – Display – Position HTML Demo.

BEGINNER WEB DESIGN. INTRODUCTION Vocabulary Design Tools of the Trade HTML CSS.

Nesting and Floating. Nesting and Floating Elements To make our page content appear the way we want, and to make the best use of screen space, we can.

Chapter 5 pp HTML Elements & Attributes Format Content Or Examples This Text Is A Hyperlink.

 Add one element at a time  If it doesn’t do what you want, › Delete it › DON’T just keep piling on more items.

CSS Layout Cascading Style Sheets. Lesson Overview  In this lesson, we’ll cover:  Brief CSS review  Creating sections with the tag  Creating inline.

CS 120: Introduction to Web Programming Lecture 10: Extra Features and Website Design Part 1 Tarik Booker CS 120 California State University, Los Angeles.

Chapter 4 and 5. Objectives Introduce markup: elements and attributes How browsers interpret HTML documents Basic structure of HTML document What do style.

>> CSS Layouts. Recall Properties of Box – Border (style, width, color) – Padding – Margin – Display – Background – Dimension Welcome Padding Area Border.

Making the website. Get your folders sorted first Create a new folder in “N” called “My hockey website” Create folders inside called “Documents”, “images”

CSS Layouts: Grouping Elements

Webpage layout using CSS

Introduction to HTML5.

HTML cont’d Keywords and Tables

Creating a Baseline Grid

Web Development & Design Foundations with HTML5 7th Edition

Web Development & Design Foundations with HTML5 8th Edition

Styles and the Box Model

Laying out a website using CSS and HTML

Robert Kiffe Senior Customer Support Engineer

Grids, Floats & Flex Boxes

Putting it all together

Web Development & Design Foundations with H T M L 5

BUILDING A WEBSITE 7.4.3: Applying a Layout.

HTML / CSS Mai Moustafa Senior Web Designer eSpace eSpace.

Building a website: Putting it all together

Web Programming and Design

Positioning Boxes Using CSS

Presentation transcript:

WRA 210: 10/30/2013 WIREFRAMES TO HTML/CSS

TODAY’S AGENDA Review: the object Review: the CSS Box Model Review: box model, and layout Intro: HTML5 structural objects Activity: turn your structural sketches into functional HTML documents

EXAMPLE OBJECT This is My Cool Website Home About Me Resume

THE CSS BOX MODEL All objects are part of the box model (not just ) margin: space outside the border, between objects border: perimeter, boundaries padding: space inside border, between content height, width: space between padding control single sides of a box or all sides at once

REVIEW: CREATING CSS LAYOUTS Discuss the players o HTML structural objects o The CSS Box Model How do they work together to enable layout? Advantages of this method over older methods of creating layouts?

REMINDER: HTML5 Evolutionary, not revolutionary Almost all HTML4 objects supported Usable now; browser support varies Adds native support for audio, video, drawing Simplifies a lot of HTML4 markup Adds new forms of semantic markup

NEW STRUCTURAL MARKUP IN HTML5 Header Section Article Aside Footer

COMPARE: TO HTML5 OBJECTS This is My Cool Website This is My Cool Website Advantages? Semantic? Discuss.

HTML5 SEMANTIC MARKUP Structural Markup in HTML4 Structural Markup in HTML5

SKETCH YOUR WIREFRAME WITH DIVS  I brought paper  Figure out your widths, padding, margins, etc.  Try and get your wireframes to look like the following:

BUILD FROM WIREFRAMES

ACTIVITY: PORTFOLIO BEGINS TONIGHT Use your sketches to make structural markup o Use HTML5 semantic objects as much as possible o Write clean markup  use ID attribute to name objects when needed  indentations  comments Populate structure with real content Run markup through validator

IMPORTANT!!!! Be certain to save your work This is the beginning of your actual portfolio We'll build on this next week

FOR NEXT TIME Complete landing page structural markup Overview of HTML5 About CSS Floats CSS Floats and the Box Model CSS Float Tutorial Recommended: experiment with float and the box model, try to figure out how it works