IDM 221. Web Design I. IDM 221: Web Authoring I 1

Size: px
Start display at page:

Download "IDM 221. Web Design I. IDM 221: Web Authoring I 1"

Transcription

1 IDM 221 Web Design I IDM 221: Web Authoring I 1

2 Week 7 IDM 221: Web Authoring I 2

3 Page Layout Part 1 IDM 221: Web Authoring I 3 Part 1 because part 2 is coming next term (RWD, Flexbox, Grids)

4 Posi%on An Element posi&on top bo*om le. right z-index IDM 221: Web Authoring I 4 Use these properties to position elements on a page. Let's look at these individually.

5 Posi%on sta%c rela%ve fixed absolute s%cky The position property determines how an element is positioned. IDM 221: Web Authoring I 5 Possible values are static, absolute, fixed and relative. Static is the default value, which means the element is placed in the normal flow of the page. Relative means the element is positioned relative to it's position in the normal flow, again based on the top, left, bottom and right properties. Absolute means the element is removed from the flow and positioned relative to the closest containing block that is also positioned. The position is determined by the top, left, bottom and right properties. Fixed means the element is positioned absolutely relative to the browser window. The position again is determined by the top, left, bottom and right properties. Sticky means the element is positioned based on the user's scroll position.

6 Sta$c Posi$on IDM 221: Web Authoring I 6

7 IDM 221: Web Authoring I 7 In normal flow, each block-level element sits on top of the next one. Since this is the default way in which browsers treat HTML elements, you do not need a CSS property to indicate that elements should appear in normal flow. example: position-static

8 Rela%ve Posi%on IDM 221: Web Authoring I 8

9 IDM 221: Web Authoring I 9 Relative positioning moves an element in relation to where it would have been in normal flow. For example, you can move it 10 pixels lower than it would have been in normal flow or 20% to the right.

10 <p>lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <p class="example">ut enim ad minim veniam, quis nostrud exercitation.</p> p.example { position: relative; left: 100px; top: 10px; } IDM 221: Web Authoring I 10 example: position-relative

11 Absolute Posi,on IDM 221: Web Authoring I 11

12 IDM 221: Web Authoring I 12 When the position property is given a value of absolute, the box is taken out of normal flow and no longer affects the position of other elements on the page. (They act like it is not there.) The box offset properties (top or bottom and left or right) specify where the element should appear in relation to its containing element.

13 <h1>my Awesome Web Page</h1> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> h1 { position: absolute; left: 500px; top: 0; width: 250px; } IDM 221: Web Authoring I 13 example: position-absolute and position-absolute-2

14 Fixed Posi*on IDM 221: Web Authoring I 14

15 IDM 221: Web Authoring I 15 Fixed positioning is a type of absolute positioning that requires the position property to have a value of fixed. It positions the element in relation to the browser window. Therefore, when a user scrolls down the page, it stays in the exact same place. It is a good idea to try this example in your browser to see the effect.

16 <h1>my Awesome Web Page</h1> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> h1 { position: fixed; left: 0; top: 0; width: 100%; } IDM 221: Web Authoring I 16 example: position-fixed

17 S"cky Posi"on IDM 221: Web Authoring I 17 Sticky positioning is a newer CSS property. It combines static and fixed positioning techniques, and uses the user's scroll position on the page to determine the position of the element. The basic concept is the element is positioned statically until some specific scroll condition is met, at which point the position of the element becomes fixed. Let's look at an example. example: position-sticky

18 z-index IDM 221: Web Authoring I 18

19 IDM 221: Web Authoring I 19 When you start positioning elements and messing with the natural flow of the page, there is the possibility that content will begin to overlap or fight for a specific spot on the page. The z-index property helps us deal with the issue by defining the order of our content. Think of it like layers in your graphic design software.

20 .thing1,.thing2 { height: 100px; width: 100px; position: absolute; }.thing1 { left: 0; top: 0; z-index: 10; }.thing2 { left: 20px; top: 20px; z-index: 20; } IDM 221: Web Authoring I 20 Why did I use 10 and 20 instead of 1 and 2?

21 Float IDM 221: Web Authoring I 21 By default, block elements flow from top to bottom. When you float an element, it's taken out of the flow of the document. Because of that, any elements that follow the floated element flow into the space that's left by the floated element.

22 <div class="wrapper"> <aside> <p>lorem ipsum...</p> </aside> <main> <p>lorem ipsum...</p> </main> <footer> <p>lorem ipsum...</p> </footer> </div> IDM 221: Web Authoring I 22

23 main { margin: 0; padding: 0 20px; } aside { border: 1px solid black; float: right; margin: px 20px; padding: 0 20px; width: 250px; } IDM 221: Web Authoring I 23 The basic skills for floating an element include first using the float property to define whether you want the element floated to the left or right. You also have to set a width of the floated element. In the example, the aside is 250px and floated to the right. The main element that follows flows into the space to the left of the aside.

24 footer { border-top: 1px solid lightgray; clear: both; font-size: 0.88rem; } IDM 221: Web Authoring I 24 By default, any content that follows the floated element will fill in the space to the side of the floated element. If you want to stop the flow of elements into the space behind a floated element, you can use the clear property. In this example, this property is used to stop the footer from flowing into the space next to the aside. The value of this property can be left, right or both and works whether the floated element is floated to the left or right.

25 Float Examples Basics 2 Column Fixed Width 2 Column Fluid Width Grid System IDM 221: Web Authoring I 25 Examples are available in the examples folder.

26 Exercise! h"p://digm.drexel.edu/crs/idm221/exercises/layouts IDM 221: Web Authoring I 26

27 For Next Week... IDM 221: Web Authoring I 27 Work

IDM 221. Web Design I. IDM 221: Web Authoring I 1

IDM 221. Web Design I. IDM 221: Web Authoring I 1 IDM 221 Web Design I IDM 221: Web Authoring I 1 Week 6 IDM 221: Web Authoring I 2 The Box Model IDM 221: Web Authoring I 3 When a browser displays a web page, it places each HTML block element in a box.

More information

2005 WebGUI Users Conference

2005 WebGUI Users Conference Cascading Style Sheets 2005 WebGUI Users Conference Style Sheet Types 3 Options Inline Embedded Linked Inline Use an inline style sheet to modify a single element one time in a page.

More information

Positioning in CSS: There are 5 different ways we can set our position:

Positioning in CSS: There are 5 different ways we can set our position: Positioning in CSS: So you know now how to change the color and style of the elements on your webpage but how do we get them exactly where we want them to be placed? There are 5 different ways we can set

More information

Unit 20 - Client Side Customisation of Web Pages. Week 2 Lesson 4 The Box Model

Unit 20 - Client Side Customisation of Web Pages. Week 2 Lesson 4 The Box Model Unit 20 - Client Side Customisation of Web Pages Week 2 Lesson 4 The Box Model So far Looked at what CSS is Looked at why we will use it Used CSS In-line Embedded (internal style-sheet) External

More information

Thinking inside the box

Thinking inside the box Intro to CSS Thinking inside the box Thinking inside the box Thinking inside the box Thinking inside the box Thinking inside the box Thinking inside the box Thinking inside

More information

Styles, Style Sheets, the Box Model and Liquid Layout

Styles, Style Sheets, the Box Model and Liquid Layout Styles, Style Sheets, the Box Model and Liquid Layout This session will guide you through examples of how styles and Cascading Style Sheets (CSS) may be used in your Web pages to simplify maintenance of

More information

FLOATING AND POSITIONING

FLOATING AND POSITIONING 15 FLOATING AND POSITIONING OVERVIEW Understanding normal flow Floating elements to the left and right Clearing and containing floated elements Text wrap shapes Positioning: Absolute, relative, fixed Normal

More information

Unit 20 - Client Side Customisation of Web Pages. Week 2 Lesson 4 The Box Model

Unit 20 - Client Side Customisation of Web Pages. Week 2 Lesson 4 The Box Model Unit 20 - Client Side Customisation of Web Pages Week 2 Lesson 4 The Box Model Last Time Looked at what CSS is Looked at why we will use it Used CSS In-line Embedded (internal style-sheet) External

More information

This is an H1 Header. This is an H2 Header. This is an H3 Header

This is an H1 Header. This is an H2 Header. This is an H3 Header is a key element in web design. This templates delivers you sophisticated typography and various stylings. The style guide gives you an overview about all possible HTML tag stylings provided by the template.

More information

First Diploma Unit 10 Client Side Web. Week 4 -The CSS Box model

First Diploma Unit 10 Client Side Web. Week 4 -The CSS Box model First Diploma Unit 10 Client Side Web Week 4 -The CSS Box model Last Session CSS Basics Fonts Real world site This Session CSS box model Concept of identity -id The CSS box model represents every element

More information

Using CSS for page layout

Using CSS for page layout Using CSS for page layout Advantages: Greater typographic control Style is separate from structure Potentially smaller documents Easier site maintenance Increased page layout control Increased accessibility

More information

IDM 221. Web Design I. IDM 221: Web Authoring I 1

IDM 221. Web Design I. IDM 221: Web Authoring I 1 IDM 221 Web Design I IDM 221: Web Authoring I 1 Week 1 Introduc)on IDM 221: Web Authoring I 2 Hello I am Phil Sinatra, professor in the Interac4ve Digital Media program. You can find me at: ps42@drexel.edu

More information

BOOTSTRAP GRID SYSTEM

BOOTSTRAP GRID SYSTEM BOOTSTRAP GRID SYSTEM http://www.tutorialspoint.com/bootstrap/bootstrap_grid_system.htm Copyright tutorialspoint.com In this chapter we shall discuss the Bootstrap Grid System. What is a Grid? As put by

More information

What is the box model?

What is the box model? CSS BOX MODEL What is the box model? The CSS box model describes the rectangular boxes that are created for every element in the document tree. The box model components Source: Kindly provided by Hicks

More information

Responsive Web Design (RWD)

Responsive Web Design (RWD) Responsive Web Design (RWD) Responsive Web Design: design Web pages, so that it is easy to see on a wide range of of devices phone, tablet, desktop,... Fixed vs Fluid layout Fixed: elements have fixed

More information

Chapter 3 CSS for Layout

Chapter 3 CSS for Layout Chapter 3 CSS for Layout Chapter two introduced how CSS is used to manage the style of a webpage, this chapter explores how CSS manages the layout of a webpage. Generally a webpage will consist of many

More information

COMS 359: Interactive Media

COMS 359: Interactive Media COMS 359: Interactive Media Agenda Review CSS Layout Preview Review Introducting CSS What is CSS? CSS Syntax Location of CSS The Cascade Box Model Box Structure Box Properties Review Style is cascading

More information

HTML Organizing Page Content

HTML Organizing Page Content HTML Organizing Page Content CSS for layout Examples http://www.shinybytes.com/newcss.html Generic Elements Used to create a logical grouping of content or elements on the page Can be customized to describe

More information

Page Layout. 4.1 Styling Page Sections 4.2 Introduction to Layout 4.3 Floating Elements 4.4 Sizing and Positioning

Page Layout. 4.1 Styling Page Sections 4.2 Introduction to Layout 4.3 Floating Elements 4.4 Sizing and Positioning Page Layout contents of this presentation are Copyright 2009 Marty Stepp and Jessica Miller 4.1 Styling Page Sections 4.2 Introduction to Layout 4.3 Floating Elements 4.4 Sizing and Positioning 2 1 4.1

More information

CHRIS SAUVE 2

CHRIS SAUVE 2 FLEXBOX 1 CHRIS SAUVE 2 LAYOUT STRATEGIES 3 TABLES 4 JUST DON T. 5 ABSOLUTE POSITIONING 6 INLINE BLOCK 7 FLOATS 8 THINK DIFFERENT 9 CONTENT-OUT LAYOUT 10 parent child 1 child 2 child 3 11 parent child

More information

HTML Organizing Page Content

HTML Organizing Page Content HTML Organizing Page Content HTML 5 Elements Well supported by current desktop and mobile browsers (known issues with IE 8 and earlier) May be used to divide pages into major sections

More information

Create a three column layout using CSS, divs and floating

Create a three column layout using CSS, divs and floating GRC 275 A6 Create a three column layout using CSS, divs and floating Tasks: 1. Create a 3 column style layout 2. Must be encoded using HTML5 and use the HTML5 semantic tags 3. Must se an internal CSS 4.

More information

IDM 221. Web Design I. IDM 221: Web Authoring I 1

IDM 221. Web Design I. IDM 221: Web Authoring I 1 IDM 221 Web Design I IDM 221: Web Authoring I 1 Week 2 IDM 221: Web Authoring I 2 Tools for Development Text Editor Hos.ng Version Control FTP (later) IDM 221: Web Authoring I 3 Last week we discussed

More information

Web Design and Implementation

Web Design and Implementation Study Guide 3 - HTML and CSS - Chap. 13-15 Name: Alexia Bernardo Due: Start of class - first day of week 5 Your HTML files must be zipped and handed in to the Study Guide 3 dropbox. Chapter 13 - Boxes

More information

The Importance of the CSS Box Model

The Importance of the CSS Box Model The Importance of the CSS Box Model Block Element, Border, Padding and Margin Margin is on the outside of block elements and padding is on the inside. Use margin to separate the block from things outside

More information

http://nma.kcc.hawaii.edu/gargiulo/data/johndoe/spring/art128/2014/companyname1_step3/index.html 1 2 3 4 5 company Name 6 7

More information

FRONT END DEVELOPER CAREER BLUEPRINT

FRONT END DEVELOPER CAREER BLUEPRINT FRONT END DEVELOPER CAREER BLUEPRINT HAVE A QUESTION? ASK! Read up on all the ways you can get help. CONFUSION IS GOOD :) Seriously, it s scientific fact. Read all about it! REMEMBER, YOU ARE NOT ALONE!

More information

Chapter 16: PAGE LAYOUT WITH CSS

Chapter 16: PAGE LAYOUT WITH CSS Disclaimer: All words, pictures are adopted from Learning Web Design (3 rd eds.) by Jennifer Niederst Robbins, published by O Reilly 2007. PART III: CSS FOR PRESENTATION Chapter 16: PAGE LAYOUT WITH CSS

More information

The CSS Box Model. Motivation. CSS Box Model. CSE 190 M (Web Programming), Spring 2008 University of Washington

The CSS Box Model. Motivation. CSS Box Model. CSE 190 M (Web Programming), Spring 2008 University of Washington The CSS Box Model CSE 190 M (Web Programming), Spring 2008 University of Washington Reading: Chapter 2, sections Except where otherwise noted, the contents of this presentation are Copyright 2008 Marty

More information

CSCU9B2: Web Tech Lecture 3

CSCU9B2: Web Tech Lecture 3 CSCU9B2: Web Tech Lecture 3 1 The Box Model Every HTML element (e.g. h2, p etc) lies within a virtual box: Margin area LEFT TOP This is just some text that flows onto two lines. Border RIGHT Padding area

More information

COMM 2555: Interactive Digital Communication / Spring 2018 Lab 9: Basic layout techniques with CSS

COMM 2555: Interactive Digital Communication / Spring 2018 Lab 9: Basic layout techniques with CSS COMM 2555: Interactive Digital Communication / Spring 2018 Lab 9: Basic layout techniques with CSS Goals Practice working with the CSS box model, positioning and layout Step 1. Create your infrastructure

More information

8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives (1 of 2) More on Relative Linking. Learning Objectives (2 of 2)

8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives (1 of 2) More on Relative Linking. Learning Objectives (2 of 2) Web Development & Design Foundations with HTML5 Ninth Edition Chapter 7 More on Links, Layout, and Mobile Slides in this presentation contain hyperlinks. JAWS users should be able to get a list of links

More information

Agenda. Combining Rules & Selectors Classes, IDs and DIVs

Agenda. Combining Rules & Selectors Classes, IDs and DIVs CSS Rules Agenda Combining Rules & Selectors Classes, IDs and DIVs 2 Border Styles Placing the above rule associated with h1 selector, will draw a line - 1 pixel wide - under the heading in our site (you

More information

INFS 2150 Introduction to Web Development

INFS 2150 Introduction to Web Development INFS 2150 Introduction to Web Development 3. Page Layout Design Objectives Create a reset style sheet Explore page layout designs Center a block element Create a floating element Clear a floating layout

More information

INFS 2150 Introduction to Web Development

INFS 2150 Introduction to Web Development Objectives INFS 2150 Introduction to Web Development 3. Page Layout Design Create a reset style sheet Explore page layout designs Center a block element Create a floating element Clear a floating layout

More information

When you complete this chapter, you will be able to:

When you complete this chapter, you will be able to: Page Layouts CHAPTER 7 When you complete this chapter, you will be able to: Understand the normal fl ow of elements Use the division element to create content containers Create fl oating layouts Build

More information

Business Applications Page Format

Business Applications Page Format Margins Business Applications Page Format Page margins are the blank space around the edges of the page. The printable area is the section of the page inside the margins. To Change the Page Margins Margins

More information

GDES218. Using Faux Column Technique In this project you will learn how to use background images to create a layout that uses faux column technique.

GDES218. Using Faux Column Technique In this project you will learn how to use background images to create a layout that uses faux column technique. Using Faux Column Technique In this project you will learn how to use background images to create a layout that uses faux column technique. Overview of the Project You will use Fireworks or Photoshop to

More information

CLASSES are a way to select custom elements without using a tag name

CLASSES are a way to select custom elements without using a tag name CSS (Part II) Using Classes CLASSES are a way to select custom elements without using a tag name Adding a Class Lorem ipsum dolor sit amet, consectetuer adipiscing elit. You can add

More information

AR0051 content/style. Michelle Bettman Henry Kiksen. Challenge the future

AR0051 content/style. Michelle Bettman Henry Kiksen. Challenge the future AR0051 content/style Michelle Bettman Henry Kiksen Challenge the future 1 AR0051: Digital Presentation Portfolio Today's Programme: A little on HTML/CSS Group-wise mind-map on Content and Style Discussion

More information

HTML and CSS a further introduction

HTML and CSS a further introduction HTML and CSS a further introduction By now you should be familiar with HTML and CSS and what they are, HTML dictates the structure of a page, CSS dictates how it looks. This tutorial will teach you a few

More information

Wanted! Introduction. Step 1: Styling your poster. Activity Checklist. In this project, you ll learn how to make your own poster.

Wanted! Introduction. Step 1: Styling your poster. Activity Checklist. In this project, you ll learn how to make your own poster. Wanted! Introduction In this project, you ll learn how to make your own poster. Step 1: Styling your poster Let s start by editing the CSS code for the poster. Activity Checklist Open this trinket: jumpto.cc/web-wanted.

More information

ORB Education Quality Teaching Resources

ORB Education Quality Teaching Resources These basic resources aim to keep things simple and avoid HTML and CSS completely, whilst helping familiarise students with what can be a daunting interface. The final websites will not demonstrate best

More information

Zen Garden. CSS Zen Garden

Zen Garden. CSS Zen Garden CSS Patrick Behr CSS HTML = content CSS = display It s important to keep them separated Less code in your HTML Easy maintenance Allows for different mediums Desktop Mobile Print Braille Zen Garden CSS

More information

TAG STYLE SELECTORS. div Think of this as a box that contains things, such as text or images. It can also just be a

TAG STYLE SELECTORS. div Think of this as a box that contains things, such as text or images. It can also just be a > > > > CSS Box Model Think of this as a box that contains things, such as text or images. It can also just be a box, that has a border or not. You don't have to use a, you can apply the box model to any

More information

Designing the Home Page and Creating Additional Pages

Designing the Home Page and Creating Additional Pages Designing the Home Page and Creating Additional Pages Creating a Webpage Template In Notepad++, create a basic HTML webpage with html documentation, head, title, and body starting and ending tags. From

More information

Website Design (Weekday) By Alabian Solutions Ltd , 2016

Website Design (Weekday) By Alabian Solutions Ltd ,  2016 Website Design (Weekday) By Alabian Solutions Ltd 08034265103, info@alabiansolutions.com www.alabiansolutions.com 2016 TECHNOLOGIES DATE TIME Day 1 HTML Part 1 Intro to the web The web Clients Servers

More information

brand rationale logo colour typography graphics & images GREEN BISHOP BRAND IDENTITY GUIDELINES

brand rationale logo colour typography graphics & images GREEN BISHOP BRAND IDENTITY GUIDELINES brand rationale logo colour typography graphics & images 1 BRAND RATIONALE THE STORY OF GREEN BISHOP Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

More information

CSC 337. Cascading Style Sheets. Marty Stepp, Rick Mercer

CSC 337. Cascading Style Sheets. Marty Stepp, Rick Mercer CSC 337 Cascading Style Sheets Marty Stepp, Rick Mercer Preview of a style sheet /* The good way, with a preview of cascading style sheet (css) that has class mystyle */ body { background-color: grey;.mystyle

More information

Let's take a look at what CSS looks like in Dreamweaver using the "Embedded" coding which is the styles are within the html code and not separate.

Let's take a look at what CSS looks like in Dreamweaver using the Embedded coding which is the styles are within the html code and not separate. Creating web pages using CSS and Dreamweaver CS3 Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation of a document written in a markup language. Its most common application

More information

KNOWLEDGE CENTER SERVICE. Customization Guide

KNOWLEDGE CENTER SERVICE. Customization Guide KNOWLEDGE CENTER SERVICE Customization Guide TABLE OF CONTENTS PAGE Homepage Overview 1 Homepage Customization Options 1. Header 3 2. Engagement Tools 5 3. Search Box 8 4. Search Results 13 5. Footer 20

More information

What is the Box Model?

What is the Box Model? CSS Box Model What is the Box Model? The box model is a tool we use to understand how our content will be displayed on a web page. Each HTML element appearing on our page takes up a "box" or "container"

More information

HTML for D3. Visweek d3 workshop

HTML for D3. Visweek d3 workshop HTML for D3 Visweek d3 workshop What is HTML HTML is the language in which the web pages are encoded. What is HTML? HTML can be complicated But it doesn t have to be.

More information

Designing and Developing a Website. 7 May Examination Paper. Time: 3 hours

Designing and Developing a Website. 7 May Examination Paper. Time: 3 hours Designing and Developing a Website 7 May 205 Examination Paper Answer ALL questions. Clearly cross out surplus answers. Time: 3 hours The maximum mark for this paper is 00. Any reference material brought

More information

Responsive web design (RWD) CSS3 Media queries. Mobile vs desktop web sites. Web Development 1 CS1115/CS5002

Responsive web design (RWD) CSS3 Media queries. Mobile vs desktop web sites. Web Development 1 CS1115/CS5002 1 of 13 CS1115/CS5002 Web Development 1 Dr Derek Bridge School of Computer Science & Information Technology University College Cork Mobile vs desktop web sites A few organization have two web sites, one

More information

Building Page Layouts

Building Page Layouts Building Page Layouts HTML & CSS From Scratch Slides 3.1 Topics Display Box Model Box Aesthetics Float Positioning Element Display working example at: h9ps://;nker.io/3a2bf Source: unknown. Please contact

More information

CSE 154 LECTURE 5: FLOATING AND POSITIONING

CSE 154 LECTURE 5: FLOATING AND POSITIONING CSE 154 LECTURE 5: FLOATING AND POSITIONING The CSS float property property float description side to hover on; can be left, right, or none (default) a floating element is removed from normal document

More information

Cascading Style Sheets for layout II CS7026

Cascading Style Sheets for layout II CS7026 Cascading Style Sheets for layout II CS7026 Understanding CSS float The CSS float property is also a very important property for layout. It allows you to position your Web page designs exactly as you want

More information

Schrödinger's Website

Schrödinger's Website Schrödinger's Website or: How we built websites of indeterminate design for Adobe Portfolio a talk by Jackie Balzer (@jackiebackwards) https://en.wikipedia.org/wiki/file:schrodinger_cat_in_box.jpg Web

More information

2 December NCFE Corporate Guidelines. Introduction

2 December NCFE Corporate Guidelines. Introduction Introduction Introduction How we connect with people through our brand is essential to who we are, and plays a big part in the NCFE experience. We created this document (which is simpler than it looks)

More information

HTML. UC Berkeley Graduate School of Journalism

HTML. UC Berkeley Graduate School of Journalism HTML UC Berkeley Graduate School of Journalism Webpages are made of three Webpages are made of three HTML Webpages are made of three HTML CSS Webpages are made of three HTML CSS JavaScript Webpages are

More information

Website Design (Weekend) By Alabian Solutions Ltd , 2016

Website Design (Weekend) By Alabian Solutions Ltd ,  2016 Website Design (Weekend) By Alabian Solutions Ltd 08034265103, info@alabiansolutions.com www.alabiansolutions.com 2016 TECHNOLOGIES DATE TIME Day1 Section 1 HTML Part 1 12am 5pm Intro to the web The web

More information

Produced by. Web Development. Eamonn de Leastar Department of Computing, Maths & Physics Waterford Institute of Technology

Produced by. Web Development. Eamonn de Leastar Department of Computing, Maths & Physics Waterford Institute of Technology Web Development Produced by Eamonn de Leastar (edeleastar@wit.ie) Department of Computing, Maths & Physics Waterford Institute of Technology http://www.wit.ie http://elearning.wit.ie CSS: Box Model Worked

More information

EECS1012. Net-centric Introduction to Computing. Lecture 5: Yet more CSS (Float and Positioning)

EECS1012. Net-centric Introduction to Computing. Lecture 5: Yet more CSS (Float and Positioning) EECS 1012 EECS1012 Net-centric Introduction to Computing Lecture 5: Yet more CSS (Float and Positioning) Acknowledgements Contents are adapted from web lectures for Web Programming Step by Step, by M.

More information

What do we mean by layouts?

What do we mean by layouts? What do we mean by layouts? A layout is how you position the elements of your page You can have columns Move paragraphs and sections around And you can do this all without changing the content of your

More information

More CSS. <link href="filename" type="text/css" rel="stylesheet" /> CS380

More CSS. <link href=filename type=text/css rel=stylesheet /> CS380 1 More CSS HTML id attribute 2 coding Horror! Coding Horror! our mission is to combine programming and human factors

More information

Web Site Design and Development Lecture 9. CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM

Web Site Design and Development Lecture 9. CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM Web Site Design and Development Lecture 9 CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM Floating elements on a web page By default block elements fll the page from top to bottom and inline elements fll

More information

Block & Inline Elements

Block & Inline Elements Block & Inline Elements Every tag in HTML can classified as a block or inline element. > Block elements always start on a new line (Paragraph, List items, Blockquotes, Tables) > Inline elements do not

More information

How to lay out a web page with CSS

How to lay out a web page with CSS How to lay out a web page with CSS A CSS page layout uses the Cascading Style Sheets format, rather than traditional HTML tables or frames, to organize the content on a web page. The basic building block

More information

Doing more with Views. Creating an inline menu

Doing more with Views. Creating an inline menu Doing more with Views Creating an inline menu About Me Caryl Westerberg Web Producer Stanford Web Services Views topics we ll cover Contextual Filters Relationships Global: View result counter Global:

More information

CSS for Page Layout Robert K. Moniot 1

CSS for Page Layout Robert K. Moniot 1 CSS for Page Layout 2015 Robert K. Moniot 1 OBJECTIVES In this unit, you will learn: How to use style sheets for layout Controlling text flow, margins, borders, and padding Controlling visibility of elements

More information

CSC309 Programming on the Web week 3: css, rwd

CSC309 Programming on the Web week 3: css, rwd CSC309 Programming on the Web week 3: css, rwd Amir H. Chinaei, Spring 2017 Office Hours: M 3:45-5:45 BA4222 ahchinaei@cs.toronto.edu http://www.cs.toronto.edu/~ahchinaei/ survey 1 in survey 1, you provide

More information

Typography is the art and technique of arranging type in order to make language visible.

Typography is the art and technique of arranging type in order to make language visible. TYPOGRAPHY 101 Typography is the art and technique of arranging type in order to make language visible. Good typography goes unnoticed. Readability How easy it is to read words, phrases and blocks of text

More information

Styling of Controls Framework

Styling of Controls Framework Styling of Controls Framework 2011 51Degrees.mobi Limited. All rights reserved. The copyright in and title to the document Styling of Controls Framework belongs to 51Degrees.mobi Limited. No part of it

More information

ITNP43: HTML Lecture 5

ITNP43: HTML Lecture 5 ITNP43: HTML Lecture 5 1 The Box Model Every HTML element (e.g. h2, p etc) lies within a virtual box: Margin area LEFT TOP This is just some text that flows onto two lines. Border RIGHT Padding area BOTTOM

More information

CSS. MPRI : Web Data Management. Antoine Amarilli Friday, December 7th 1/43

CSS. MPRI : Web Data Management. Antoine Amarilli Friday, December 7th 1/43 CSS MPRI 2.26.2: Web Data Management Antoine Amarilli Friday, December 7th 1/43 Overview Cascading Style Sheets W3C standard: CSS 1 1996 CSS 2 1998 CSS 2.1 2011, 487 pages CSS 3.0 Ongoing (various modules),

More information

Chapter 7 BMIS335 Web Design & Development

Chapter 7 BMIS335 Web Design & Development Chapter 7 BMIS335 Web Design & Development Site Organization Use relative links to navigate between folders within your own site o Sometimes dividing your site into folders makes maintenance and updating

More information

Week 5 jquery and the DOM

Week 5 jquery and the DOM Introduction Last week we looked at how jquery syntax is constructed to target selectors. We also looked at how to use the inbuilt effects, animate() and css(), and how to trigger them from events such

More information

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) Cascading Style Sheets (CSS) Mendel Rosenblum 1 Driving problem behind CSS What font type and size does introduction generate? Answer: Some default from the browser (HTML tells what browser how)

More information

Page Layout Using Tables

Page Layout Using Tables This section describes various options for page layout using tables. Page Layout Using Tables Introduction HTML was originally designed to layout basic office documents such as memos and business reports,

More information

CSS Box Model. Cascading Style Sheets

CSS Box Model. Cascading Style Sheets CSS Box Model Cascading Style Sheets CSS box model Background Width & height Margins & padding Borders Centering content Changing display type (block vs. inline) The Box Model Background Properties Property

More information

Introduction to Computer Science Web Development

Introduction to Computer Science Web Development Introduction to Computer Science Web Development Flavio Esposito http://cs.slu.edu/~esposito/teaching/1080/ Lecture 9 Lecture Outline Text Styling Some useful CSS properties The Box Model essential to

More information

Introduction to HTML & CSS. Instructor: Beck Johnson Week 5

Introduction to HTML & CSS. Instructor: Beck Johnson Week 5 Introduction to HTML & CSS Instructor: Beck Johnson Week 5 SESSION OVERVIEW Review float, flex, media queries CSS positioning Fun CSS tricks Introduction to JavaScript Evaluations REVIEW! CSS Floats The

More information

There are 3 places you can write CSS.

There are 3 places you can write CSS. EXTRA CSS3. #4 Where to write CSS. There are 3 places you can write CSS. The best option is to write CSS is in a separate.css file. You then link that file to your HTML file in the head of your document:

More information

Introduction to Computer Science Web Development

Introduction to Computer Science Web Development Introduction to Computer Science Web Development Flavio Esposito http://cs.slu.edu/~esposito/teaching/1080/ Lecture 12 Lecture Outline Background property and subproperties Position Elements by Floating

More information

Getting Started with Eric Meyer's CSS Sculptor 1.0

Getting Started with Eric Meyer's CSS Sculptor 1.0 Getting Started with Eric Meyer's CSS Sculptor 1.0 Eric Meyer s CSS Sculptor is a flexible, powerful tool for generating highly customized Web standards based CSS layouts. With CSS Sculptor, you can quickly

More information

Responsive Grid. Grid Variations. Built with responsive 12 column grid, layouts and components. LOGO HEADER IMAGE SECONDARY NAVIGATION FOOTER

Responsive Grid. Grid Variations. Built with responsive 12 column grid, layouts and components. LOGO HEADER IMAGE SECONDARY NAVIGATION FOOTER WEB STYLE GUIDE School of Medicine Styleguide LAYOUT Responsive Grid Built with responsive 12 column grid, layouts and components. Grid Variations One Column LOGO HEADER IMAGE SECONDARY NAVIGATION FOOTER

More information

Guidelines for doing the short exercises

Guidelines for doing the short exercises 1 Short exercises for Murach s HTML5 and CSS Guidelines for doing the short exercises Do the exercise steps in sequence. That way, you will work from the most important tasks to the least important. Feel

More information

CSS Exercises. Create a basic CSS layout Use BlueFish to open layout.html Create a layout using <div> tags Use a browser (Firefox) to view your page

CSS Exercises. Create a basic CSS layout Use BlueFish to open layout.html Create a layout using <div> tags Use a browser (Firefox) to view your page CSS Exercises Exercise 1: Create a basic CSS layout Use BlueFish to open layout.html Create a layout using tags Use a browser (Firefox) to view your page Task 1 Open layout.html in BlueFish a blank

More information

CSS worksheet. JMC 105 Drake University

CSS worksheet. JMC 105 Drake University CSS worksheet JMC 105 Drake University 1. Download the css-site.zip file from the class blog and expand the files. You ll notice that you have an images folder with three images inside and an index.html

More information

MichPA Content Guide. Table of Contents. Website Section Overview. Global Banner & Navigation. Content Area Client editable

MichPA Content Guide. Table of Contents. Website Section Overview. Global Banner & Navigation. Content Area Client editable Table of Contents Website Section Overview MichPA Content Guide Website Section Overview...1 FAQ...2 Content Area Styles...3 Client-side Right Navigation Styles...4 Font Index...5 Color Index...5 Rotating

More information

COMP519 Web Programming Lecture 8: Cascading Style Sheets: Part 4 Handouts

COMP519 Web Programming Lecture 8: Cascading Style Sheets: Part 4 Handouts COMP519 Web Programming Lecture 8: Cascading Style Sheets: Part 4 Handouts Ullrich Hustadt Department of Computer Science School of Electrical Engineering, Electronics, and Computer Science University

More information

Fundamentals of Web Technologies. Agenda: CSS Layout (Box Model) CSS Layout: Box Model. All HTML elements can be considered as a box or a container

Fundamentals of Web Technologies. Agenda: CSS Layout (Box Model) CSS Layout: Box Model. All HTML elements can be considered as a box or a container ITU 07204: Fundamentals of Web Technologies Lecture 6: CSS Layouts (Intro) Dr. Lupiana, D FCIM, Institute of Finance Management Semester 2 Agenda: CSS Layout (Box Model) 2 CSS Layout: Box Model All HTML

More information

Brand Standards Manual. Copyright March 2007

Brand Standards Manual. Copyright March 2007 Brand Standards Manual Copyright March 2007 Primary Logo Primary Logo Full Color - Positive Primary logo is to be used when ever possible. Primary background color is white. Plum PMS 5185 Metallic Grey

More information

WEB DESIGNER CAREER BLUEPRINT

WEB DESIGNER CAREER BLUEPRINT WEB DESIGNER CAREER BLUEPRINT HAVE A QUESTION? ASK! Read up on all the ways you can get help. CONFUSION IS GOOD :) Seriously, it s scientific fact. Read all about it! REMEMBER, YOU ARE NOT ALONE! Join

More information

How to lay out a web page with CSS

How to lay out a web page with CSS How to lay out a web page with CSS You can use table design features in Adobe Dreamweaver CS3 to create a simple page layout. However, a more powerful technique is to use Cascading Style Sheets (CSS).

More information

CSS3 Basics. From & CSS Visual Dictionary Learning Curve Books, LLC

CSS3 Basics. From   & CSS Visual Dictionary Learning Curve Books, LLC CSS3 Basics From www.w3schools.com & CSS Visual Dictionary Learning Curve Books, LLC CSS Box Model Margin (top, right, bottom, left) Shorthand property, equivalent to Border-width border-style border-color

More information

USER GUIDE. MADCAP FLARE 2017 r3. QR Codes

USER GUIDE. MADCAP FLARE 2017 r3. QR Codes USER GUIDE MADCAP FLARE 2017 r3 QR Codes Copyright 2018 MadCap Software. All rights reserved. Information in this document is subject to change without notice. The software described in this document is

More information

Client-Side Web Technologies. CSS Part II

Client-Side Web Technologies. CSS Part II Client-Side Web Technologies CSS Part II Topics Box model and related properties Visual formatting model and related properties The CSS Box Model Describes the rectangular boxes generated for elements

More information

Unit 20 - Client Side Customisation of Web Pages WEEK 5 LESSON 6 DESIGNING A WEB-SITE

Unit 20 - Client Side Customisation of Web Pages WEEK 5 LESSON 6 DESIGNING A WEB-SITE Unit 20 - Client Side Customisation of Web Pages WEEK 5 LESSON 6 DESIGNING A WEB-SITE Today s tasks This lesson is on the wiki: Design Exercise (for A3); corporate theme in primary design 3rd November

More information