Navigation grid – Wide desktop 1 Main navigation bar maximum width 890 px (= 4 content columns) 3 text columns, each 256 px wide 51 px margins in between.

Slides:

Advertisements

Similar presentations

Layout of a Desktop Publishing Document 1.03 Demonstrate desktop publishing.

Advertisements

Chapter 3 – Web Design Tables & Page Layout

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

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

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

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.

Session 4: CSS Positioning Fall 2006 LIS Web Team.

Navigation Bars Level 2 Extended Certificate Unit B12 Doing Business Online.

Unit 20 - Client Side Customisation of Web Pages

DIVISIONS FOR ALL WEB PAGES Web Page Elements.  All Web Pages should have the following 4 elements (Also called divisions).  header  navigation  content.

The Viewport body element w/ bg image body element w/ bg image wrapper.

Session 4: CSS Positioning Fall 2009 LIS Web Team.

PART II dmfd. Digital Media: Communication and DesignF2007 Comments Remember: make a homepage using CSS Next Tuesday: guest lecture on Web.

Page Layout & Mobile Web Using columns, grid systems, etc… to layout sites for desktops and mobile.

Creating A Simple Web Page. Step 1- Open Dreamweaver & Create A New Page (File New) and blank.

Principles of Web Design 6 th Edition Chapter 7 – Page Layouts.

Dreamweaver CS4 Concepts and Techniques Chapter 7 Page Layout with Frames.

Web Development & Design Foundations with XHTML

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

The Nav Bar. Nav is short for Navigation. Having a Navigation Bar makes searching for information easier on those accessing your page. Here are some common.

HTML: Tables & Frames Internet Technology1. HTML: Tables Table tags ► surround the entire table ► header row (text is boldfaced) ► surround each row ►

Responsive design - Bedrock to our site Responsive site templates included.

 Word doc for you to download › Link at the beginning of class › 10 Questions › Answers to be added inline  Post to Sakai when completed › No resubmits.

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

Mr. Justin “JET” Turner CSCI 3000 – Fall 2015 CRN Section A – TR 9:30-10:45 CRN – Section B – TR 5:30-6:45.

Icons, links and buttons We have a unique icon design principle. Our icons are based on the same irregular circle shape with a clear graphic pictogram.

 Remember that HTML is just text  Need to point to pictures  Use the img tag  alt: › screen reader › REQUIRED for this class and to validate.

Lesson 05 // Web Design, Layout & Structure 1.Web Design/Designer-Coder Relationship 2.Fixed vs Fluid Website Layouts 3.Screen Resolutions.

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

Chapter 5 Quick Links Slide 2 Performance Objectives Understanding Framesets and Frames Creating Framesets and Frames Selecting Framesets and Frames Using.

HTML: Tables & Frames Internet Technology.

Forms and tables NOTE THAT FOR THE FORMS AND IFRAMED CONTENT TO BE RESPONSIVE THE CONTENT OWNER NEEDS TO MAKE THEM RESPONSIVE ACCORDING TO INTERNET RESPONSIVE.

CSS Float Property Keyword: Flow. CSS Float: Positioning Property Purpose: Push a block-level element to the left or right, taking it out of the flow.

Introducing CSS Layout C HAPTER 11. T YPES OF W EB P AGE L AYOUTS  Fixed width  Most control over how your design looks  Can inconvenience some of.

© Paradigm Publishing Inc. ACCESS CREATING QUERIES, FORMS, AND REPORTS Section 3.

Upon entering the site a “pre-loader” will cache the contents of the site on the user’s computer. Visually, a “Zen Circle” brush stroke will animate to.

Computer Science 101 Lists and Tables. Lists Unordered lists - use a bullet Ordered lists - use a number, Roman numeral, or letter.

Web Design I Spring 2009 Kevin Cole Gallaudet University

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

Internet Technology Dr Jing LU Updated Dr Violet Snell / Dr Kalin Penev 1 Internet Technology (week 6)  Recap: Validating HTML  Page Layout.

INTRODUCTORY Tutorial 5 Using CSS for Layout and Printing.

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.

Main page banner area Navigation bar area Main area for information content Look at a simple page from the Waitrose supermarket site. It has three main.

Navigation Typography– Mega Drop Down Menu 1 Wide Desktop Login: Arial, Regular, 14 px, #f08c00 Hover: Underline Toolbar link: Arial, 11 px, #999999, underline.

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

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

Positioning, CSS Layout Ing. Jiří Štěpánek.  Positioning = defining elements placement, size and behavior within a page  Important for creating layout.

Less – Design That is More… BY SPEC INDIA. Less – Design  Adaptive Cross Platform CSS grid system  Responsive & Mobile First Projects  Uses Standards-based.

CHAPTER 15 Floating and Positioning. FLOAT VS. POSITION  Floating an element moves it to the left or right, allowing the following text to wrap around.

Log in – Header area 1 Lock icon size 14 x 18px. Mobile: Lock icon Tablet, Desktop and wide desktop: Lock icon + text ”Logg in” Log in text: –Font: Arial,

CSCI 1720 W3.CSS – Part 1 East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design.

Web Development & Design Foundations with HTML5 8th Edition

Basic Introduction to Portal Designer

Logo Designs Banner Designs.

Layout - you need to understand that a simple navigation bar:

Web Development & Design Foundations with HTML5 7th Edition

Creating Layouts Using CSS

Page plans A01 Design.

Fixed Positioning.

Responsive Framework.

Web Development & Design Foundations with H T M L 5

Redesign3 BannerFull | ban pixels wide max

More CSS Page layout Boriana Koleva Room: C54

Layout of a Desktop Publishing Document

Floating and Positioning

Layout of a Desktop Publishing Document

Multipage Sites.

Layout of a Desktop Publishing Document

Cascading Style Sheets

Presentation transcript:

Navigation grid – Wide desktop 1 Main navigation bar maximum width 890 px (= 4 content columns) 3 text columns, each 256 px wide 51 px margins in between text columns, containing a vertical dotted line Banner column, 200 px wide Fortum logo is on same level as the header links (from top).

Navigation grid - Desktop 2 Main navigation bar width 930 px (= content width) 3 text columns, each 218 px wide 32 px margins in between text columns, containing a vertical dotted line Banner column, 170 px wide Fortum logo is on same level as the header links (from top).

Navigation grid - Tablet 3 Main navigation bar width text columns, each 218 px wide 33 px margins in between text columns, containing a vertical dotted line Fortum logo is on same level as the header links (from top).

Navigation grid - Phone 4 Navigation width 100% Text column width flows with browser window width, with 15 px left and right margins 54 px column on right for sub-menu open/close