IDM 221. Web Design I. IDM 221: Web Authoring I 1
|
|
- Myles Edwards
- 6 years ago
- Views:
Transcription
1 IDM 221 Web Design I IDM 221: Web Authoring I 1
2 Week 6 IDM 221: Web Authoring I 2
3 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. That makes it easy to control the spacing, borders, and other formatting for elements like headers, sections, footers, headings and paragraphs. Some inline elements like images are placed in a box as well. To work with boxes, you use the CSS box model.
4 IDM 221: Web Authoring I 4 This figure shows how the box model works. By default the box for a block element is as wide as the block that contains it and as tall as it needs to be based on its content. However, you can explicitly specify the size of the content area for a block element by using the height and width properties. You can also use other properties to set the borders, margins and padding for a block element. Padding is the space between the content area and a border. Margin is the space between the border and the outside of the box.
5 Calculate height top margin + top border + top padding + height + bottom padding + bottom border + bottom margin IDM 221: Web Authoring I 5 When you calculate the overall height of a box, you use this formula.
6 Calculate width left margin + left border + left padding + width + right padding + right border + right margin IDM 221: Web Authoring I 6 The formula for calculating the overall width is similar. You can use any of the units we've learned.
7 <body> <main> <h1>welcome Home!</h1> <p>welcome to our site. Here's more text... </p> </main> </body> IDM 221: Web Authoring I 7 Let's look at an of how the box model works.
8 <body> <main> <h1>welcome Home!</h1> <p>welcome to our site. Here's more text... </p> </main> </body> body { border: 3px dotted black; margin: 10px; IDM 221: Web Authoring I 8 For the body, the margin on all four sides is set to 10 pixels, and we add a 3px border around all four sides. Let's try it in the browser so we can see the styles as they are applied.
9 <body> <main> <h1>welcome Home!</h1> <p>welcome to our site. Here's more text... </p> </main> </body> main { border: 2px solid black; width: 500px; margin: 20px; /* all four sides */ padding: 10px; /* all four sides */ IDM 221: Web Authoring I 9 For the main element, the width is set to 500px, and the margins on all four sides of the box are set to 20 pixels. You can see these margins on the left, top, and bottom of the main box, but not on the right because the width of the section is set to 500px (the margin is there even if you can't see it).
10 <body> <main> <h1>welcome Home!</h1> <p>welcome to our site. Here's more text... </p> </main> </body> h1, p { border: 1px dashed black; padding: 10px; IDM 221: Web Authoring I 10 The next rule set sets properties for both the h1 and p elements.
11 h1 { /* 0 top, 0 right and left,.25em bottom */ margin: em; padding-left: 15px; p { margin: 0; /* all four sides */ padding-left: 15px; IDM 221: Web Authoring I 11 The next two rule sets set additional properties for each of these elements.
12 body { border: 3px dotted black; margin: 10px; main { border: 2px solid black; width: 500px; margin: 20px; /* all four sides */ padding: 10px; /* all four sides */ h1, p { border: 1px dashed black; padding: 10px; h1 { /*.5em top, 0 right and left,.25em bottom */ margin:.5em 0.25em; padding-left: 15px; p { margin: 0; /* all four sides */ padding-left: 15px; IDM 221: Web Authoring I 12 Let's review in the browser.
13 Size and space of elements IDM 221: Web Authoring I 13 As you can see there are several different properties that determine the size of an element and the spacing between the elements on a page. Next we will cover each of these properties in detail.
14 Height and Width Property width height min-width max-width min-height max-height Descrip,on the width of the content area the height of the content area the minimum width of the content area the maximum width of the content area the minimum height of the content area the maximum height of the content area IDM 221: Web Authoring I 14
15 Height and Width width height height: auto; width: auto; IDM 221: Web Authoring I 15 The two properties used most often are width and height. By default, these properties are set to a value of "auto". As a result, the size of the content area for the element is automatically adjusted so it's as wide as the element that contains it and as tall as the content it contains.
16 Height and Width div { width: 450px; /* absolute width */ width: 75%; /* relative width */ width: auto; /* default */ height: 125px; /* absolute height */ height: 50%; /* relative height */ height: auto; /* default */ IDM 221: Web Authoring I 16 To change that you can use the height and width properties.
17 Min and Max div { min-width: 450px; max-width: 600px; min-height: 120px; max-height: 160px; IDM 221: Web Authoring I 17 You can use the min/max properties to specify the minimum and maximum heights/widths of content areas.
18 <div class="wrapper"> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div>.wrapper { background-color: blue; color: white; IDM 221: Web Authoring I 18
19 .wrapper { background-color: blue; color: white; width: 100%; /* container fills 100% of available width */ max-width: 900px; /* but never more than 900px */ IDM 221: Web Authoring I 19
20 Viewport Units div { height: 100vh; width: 100vw; 1vw = 1% viewport width 1vh = 1% viewport height IDM 221: Web Authoring I 20
21 Margin div { margin-top:.5em; margin-right: 1em; margin-bottom: 2em; margin-left: 1em; IDM 221: Web Authoring I 21 You can use individual properties to set individual margins.
22 div { margin: 1em; /* all four sides */ margin: 0 1em; /* top and bottom 0, right and left 1em */ margin:.5em 1em 2em; /* top:.5em, right and left 1em, bottom 2em */ margin:.5em 1em 2em 1em; /* clockwise starting at top */ IDM 221: Web Authoring I 22 Instead of setting individual margins though, you can use the margin property to set the margins for all four sides of a box. When you use a shorthand property like this, you can specify one, two, three or four values. If you specify less than four values, the property still sets the margins for all four sides of the box. If you specify one value, that value is set for all four sides. If you specify two vales, the first value applies to the top and bottom, and the second value applies to the left and right. If you specify three values, the first applies to the top, the second applies to the left and the right, and the third applies to the bottom. Values are specified in a specific order: clockwise starting at the top.
23 div { margin: 0 auto; IDM 221: Web Authoring I 23 You can also specify the keyword "auto" for any margin. In most cases your use this to center a page in the browser window.
24 .wrapper { background-color: blue; color: white; width: 100%; /* container fills 100% of available width */ max-width: 900px; /* but never more than 900px */ /* 0 on the top and bottom, `auto` on the left and right */ margin: 0 auto; IDM 221: Web Authoring I 24 Let's bring back our previous.
25 Padding div { padding-top: 0; padding-right: 1em; padding-bottom:.5em; padding-left: 1em; padding: 1em; padding: 0 1em; padding: 0 1em.5em; padding: 0 1em.5em 1em; IDM 221: Web Authoring I 25 The properties for setting padding are similar to the properties for setting margins.
26 Reset * { margin: 0; padding: 0; ul { margin: em 1.25em; IDM 221: Web Authoring I 26 By default, the browser applies certain margin/padding values to certain elements. This uses the universal selector to set the margins and padding of all elements to 0. After you code the reset selector, you can get the spacing you want by applying margins and padding to specific elements, which overrides the reset selector value of 0.
27 Box Sizing left margin + left border + left padding + width + right padding + right border + right margin total width IDM 221: Web Authoring I 27 Recall our formula for calculating the width (or height) of a box.
28 Box Sizing left margin (20px) + left border (5px) + left padding (10px) + width (200px) + right padding (10px) + right border (5px) + right margin (20px) total width (270px) IDM 221: Web Authoring I 28
29 IDM 221: Web Authoring I 29 Wouldn't it be nice if we could define the width of a box and have the box actually be the width we've defined even after we've applied margins and paddings and borders?
30 Box Sizing: Border Box * { box-sizing: border-box; IDM 221: Web Authoring I 30 Apply the box-sizing property to the universal selector with a value of "border-box" and the browser will now do the math for you and maintain your width/height values even when margin/padding/borders are applied. The browser will calculate the totals and dynamically adjust the width value so that your container with a width value of 200px will actually be 200px even if there's 20px of margins, a 2 pixel border and 10 pixels of padding applied.
31 Borders border border-side border-width border-style border-color border-side-width border-side-style border-side-color IDM 221: Web Authoring I 31 Next we'll begin applying other formatting to boxes. That includes adding borders and setting background colors and images. These are the properties that can be set to apply borders to boxes.
32 Border Width div { border-width: 2px; border-width: 2px 1px; border-width: 2px 1px 2px; border-width: 2px 1px 2px 1px; IDM 221: Web Authoring I 32 Similar to margin/padding properties, the width of a border can be defined as one, two, three or four values, always starting at the top and rotating clockwise.
33 Border Style div { border-style: solid; border-style: dashed; border-style: inset; IDM 221: Web Authoring I 33 There are various styles available. Here are some s, a full list is available online (check the lecture notes for the URL).
34 Border Color div { border-color: black; border-color: black red; border-color: #fff #000 rgb(255,255,255) rgba(0,0,0,0.3); IDM 221: Web Authoring I 34 Border color can be defined using any of the color definition syntaxes, and again can be specced as one, two, three or four values.
35 Border Shorthand div { border: [width] [style] [color]; border: 2px solid black; IDM 221: Web Authoring I 35 The border property has a shorthand for specifying all of the properties in a single rule. The order of the values must be width, then style, then color.
36 Rounded Corners and Shadows div { border-radius: [radius]; /* applies to all four sides */ border-radius: [topleft] [topright] [lowerright] [lowerleft]; box-shadow: [horizontaloffset] [verticaloffset] [blurradius] [spread] [color]; IDM 221: Web Authoring I 36 CSS3 includes features for adding rounded corders and shadows to borders. This lets you add graphic effects without the need for images. These features are supported by all modern browsers; older browsers that don't support these properties will simply ignore them.
37 div { color: blue; padding: 20px; text-align: center; width: 360px; border-radius: 10px 20px 0 20px; border: 5px solid blue; box-shadow: 3px 3px 4px 4px red; /* box-shadow: 3px 3px 20px 4px rgba(0,0,0,0.6); */ IDM 221: Web Authoring I 37
38 Display IDM 221: Web Authoring I 38
39 Display block inline inline-block flex list-item more IDM 221: Web Authoring I 39 block vs inline vs inline-block
40 Display div { display: block; /* default */ display: inline; display: flex; span { display: inline; /* default */ display: block; IDM 221: Web Authoring I 40
41 display: block header section main div h1, h2, h3, h4 p, ul, ol, li IDM 221: Web Authoring I 41
42 display: inline span a img b, strong i, em IDM 221: Web Authoring I 42 Let's build some examples to see the defaults and then change the property values to non defaults.
43 Backgrounds IDM 221: Web Authoring I 43
44 Backgrounds background background color background image background repeat background-attachment background position background-size IDM 221: Web Authoring I 44 When you set a background, it's display behind the content, padding and border for the box, but it isn't displayed behind the margin. When you specify a background, you can set a background color, a background image, or both. If you set both, the browser displays the background color behind the image. As a result, you can only see the background color if the image has areas that are transparent with the image doesn't repeat.
45 Background Color div { background-color: blue; background-color: #808080; background-color: transparent; IDM 221: Web Authoring I 45 Background color is a color value with the word that specifies the color of an elements background. You can also specify the "transparent" keyword if you want the elements behind the element to be visible. This is the default.
46 Background Image div { background-image: url('images/texture.png'); IDM 221: Web Authoring I 46 Background image is a relative or absolute URL that points to an image. You can also specify the keyword "none" if you don't want to display an image. This is the default.
47 Background Repeat div { background-image: url('images/texture.png'); background-repeat: repeat; background-repeat: repeat-x; background-repeat: repeat-y; background-repeat: no-repeat; IDM 221: Web Authoring I 47 Background repeat is a keyword that specifies if and how images repeated. Possible values are "repeat", "repeat-x", "repeat-y", and "no-repeat".
48 Background A-achment div { background-image: url('images/texture.png'); background-repeat: no-repeat; background-attachment: fixed; IDM 221: Web Authoring I 48 Background attachment excepts a keyword that specifies whether an image schools with the document over means any fixed position.
49 Background Posi/on div { background-image: url('images/texture.png'); background-repeat: no-repeat; background-attachment: fixed; background-position: left top; background-position: center top; background-position: 90% 90%; /* 90% from the top and left */ IDM 221: Web Authoring I 49 Background position except one or two relative or absolute values or keywords that specify the initial horizontal and vertical positions of an image. Keywords are left, center, and right; top, center and bottom. If no position is specified, the default is to place the image in the top left corner of the element.
50 Background div { background: [color] [image] [repeat] [attachment] [position]; background: blue url('images/texture.png') repeat-x; IDM 221: Web Authoring I 50 Background property allows you to set the color, image, repeat, attachment, and position values. (Let's build an ).
51 Background Size div { background-size: auto; /* default */ background-size: 100% 100%; /* width height */ background-size: cover; background-size: contain; IDM 221: Web Authoring I 51 The background-size property specifies the size of the background images. auto is the default value. The background-image contains its width and height. cover: scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area. contain: Scale the image to the largest size such that both its width and its height can fit inside the content area.
52 Background Gradients div { background: linear-gradient(direction, color %, color %,...); /* Old browsers */ background: rgb(30,87,153); /* FF */ background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(125,185,232,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%); h#p:// IDM 221: Web Authoring I 52 CSS3 includes a feature for linear gradients. At present, all modern browsers provide at least basic support for this feature. Except for Internet explorer, browsers support this feature with properties that are prefixed by -webkit for Safari and Chrome, and -moz for Firefox and Opera. Luckily, we can use some tools to help write this code for us.
53 IDM 221: Web Authoring I 53
54 Exercise! h"p://digm.drexel.edu/crs/idm221/exercises/box_model IDM 221: Web Authoring I 54
55 Example IDM 221: Web Authoring I 55
56 IDM 221: Web Authoring I 56
57 IDM 221: Web Authoring I 57
58 IDM 221: Web Authoring I 58
59 IDM 221: Web Authoring I 59
60 IDM 221: Web Authoring I 60
61 For Next Week... IDM 221: Web Authoring I 61 WORK! No specific assignment.
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 informationIDM 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 informationHTML 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 informationbrand 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 informationUVic Senior s Program: Microsoft Word
UVic Senior s Program: Microsoft Word Created by Robert Lee for UVic Senior s Program website: https://www.uvic.ca/engineering/computerscience/community/index.php Opening Microsoft Word: Launch it from
More informationTypography 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 informationThis 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 informationHARBORTOUCH STYLE GUIDE
HARBORTOUCH STYLE GUIDE THE LOGO The Harbortouch logo was created for its simplicity and ease of use for all types of applications. It is essential that the logo is not altered in any way in order for
More informationKIDS BEDROOMS SHOP NOW -00% NEW. Item Name & Description $00 $00 -00% NEW. Item Name & Description $00 $00 NEW COLLECTIONS SHOP NOW!
Sign In / 0 0 0 HOME ACCESSORIES DINING SETS SPECIAL OFFERS 2016 COLLECTIONS! JUNE 24,2016 ELEGANT DINING SET Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
More informationBRAND Guide. EuropeActive LOGOS
BRAND Guide EuropeActive LOGOS version 10/2014- p1 EuropeActive Logo The European Health & Fitness Association (EHFA) has been rebranded to EuropeActive. With our mission to get more people, more active,
More informationBusiness 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 informationChapter 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 informationCASE EXPLORER - INSTALLATION GUIDE. Doc
CASE EXPLORER - INSTALLATION GUIDE Doc. 20161104 Table Of Contents Overview... 3 Log In... 3 Procedure... 3 Home Page... 4 Searching and Pagination... 4 Utility Tools... 5 Report Generation... 6 Additional
More informationBrand Guidelines. Brand Guidelines V1.2 May 21, 2018
Brand Guidelines Brand Guidelines V1.2 May 21, 2018 1. Table of Contents 1. Table of Contents 2. Introduction 3. Logo 3.1 Clear Space 3.2 Color 3.3 Photo Backround 3.4 Sizing 3.4 Don t 4. Color Palette
More informationStyling 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 informationHTML. 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 informationPromiseShip Style Guide
Logo Options Primary - Color Primary with Tag - Color Black Black with Tag Reverse/White Reverse/White with Tag 2 Logo Use Guidelines Use the height of the P in PromiseShip to determine the width of space
More informationCSC 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 informationhowtomarketing VISUAL IDENTITY In this section 30/04/ MY PR plus 1
howtomarketing VISUAL IDENTITY Module 1 Identify 1 In this section + WHAT IS VISUAL IDENTITY? + BRAND PROMISE AND STYLE + COLOURS + FONTS + DESIGN + VISUAL IDENTITY GUIDES/STYLE SHEETS 2 1 Visual Identity
More informationHigh Performance Auto Layout
#WWDC18 High Performance Auto Layout Ken Ferry, ios System Experience Kasia Wawer, ios Keyboards 2018 Apple Inc. All rights reserved. Redistribution or public display not permitted without written permission
More informationDESIGN GUIDELINES. Use the following slides as a guide to make sure your presentation follows the PCS Plus brand.
Use the following slides as a guide to make sure your presentation follows the PCS Plus brand. LOGO PLACEMENT On white content slides the logo should appear in full colour on the bottom left of the screen
More informationLorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna - ali qua. Ut enim ad minim veniam,
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna - ali qua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
More informationgraceland-core Documentation
graceland-core Documentation Release 0.1.0-SNAPSHOT Javier Campanini April 14, 2014 Contents 1 About 3 1.1 Contributing............................................... 3 1.2 License..................................................
More informationINTRODUCTION. As GRADED brand user, you are also responsible for preserving that image. We count on your cooperation in this process.
BRAND BOOK 1 INTRODUCTION In this guide, you will find the rules to use the GRADED logo and graphic elements correctly with the possible variations and allowed limits. The guide aims to build a harmonious
More informationManual ODIP Content Management System Version 1.0 February 2013
Manual ODIP Content Management System Version 1.0 February 2013 Chapter 1- Home page After you have logged in you will find the entry buttons to all sections of the CMS you will need to maintain the ODIP
More informationANNEX VIII.2 New dangerous substances website. Safety and health at work is everyone s concern. It s good for you. It s good for business.
ANNEX VIII.2 New dangerous substances website Safety and health at work is everyone s concern. It s good for you. It s good for business. Information architecture 2 Information architecture Multilingual
More informationIDM 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 information01 The logo design. Our logo is the touchstone of our brand and one of the most valuable assets. We must. Designed by KING DESIGN
01 The logo design Our logo is the touchstone of our brand and one of the most valuable assets. We must 1. The logo and its usage / 2. Black, white and grayscale / 3. Logo construction + clear space /
More informationSTOCKHOLM BEAMER THEME
STOCKHOLM BEAMER THEME sthlm is based on the hsrm theme 20130731-093333-r2.2B-TemplatesthlmBeamerTheme HendryOlson.com Made in Sweden OVERVIEW 1. Background 2. Structure 3. Features 4. Tutorial 2 BACKGROUND
More informationAd Spec Guidelines
Ad Spec Guidelines 03.19.18 Ad Spec Guidelines 1 General Guidelines Required Assets For best results, please provide fully editable assets. FILES Design Files - Layered PSD (Photoshop) Fonts - RTF / TTF
More informationnagement ompetition enture coaching GRAPHIC STANDARDS capital investment launch opening risk assessment entrepreneur information feasibility study
eas development ESEARCH startup groundwork capital investment risk assessment Analysis nagement enture coaching entrepreneur information ompetition GRAPHIC STANDARDS launch opening feasibility study strategy
More informationBrand Guidelines CONTENTS. About these guidelines...2. Logo usage...3. Color palette...6. Fonts...7. Additional design elements...
CONTENTS About se guidelines...2 Logo usage...3 Color palette...6 Fonts...7 Additional design elements...8 Collateral examples...10 Brand Guidelines AUGUST 2013 1 about se guidelines [yoc-to] The smallest
More informationSphinx Readability Theme Documentation
Sphinx Readability Theme Documentation Release 0.0.6 Tsuyoshi Tokuda December 27, 2015 Contents 1 What Is It? 1 2 User s Guide 3 2.1 Installation................................................ 3 2.2
More information01/ 03/ 05/ 07/ 09/ 11/ 13/ 15/ 17/ 19/ 21/ 23/ WEB DESIGN PRINT DESIGN PERSONAL DESIGN. DESIGN IS: a finely crafted method of mass communication
WEB DESIGN 01/ 03/ 05/ 07/ 09/ Delicious Boutique Product Page Design Vida Vibe Website Mock Design IIWII Homepage Design Naturewasher Landing Page Design Grown - Up Talk Application Design PRINT DESIGN
More informationUSER MANUAL. ICIM S.p.A. Certification Mark
USER MANUAL ICIM S.p.A. Certification Mark Index Informative note 4 The Certification Mark 6 Certified Management System 8 Certified Management System: Examples 19 Certified Product 27 Certified Product:
More informationCONTENT STRATEGY: What s Real, What s Relevant. Kristina Halvorson Web 2.0 Expo San Francisco
CONTENT STRATEGY: What s Real, What s Relevant Kristina Halvorson Web 2.0 Expo San Francisco 04.01.09 WHO AM I? President, Brain Traffic Speaker, conferences Author, in training WHO AM I? Advocate, importance
More informationCOMCAS 2015 Author Instructions for Full Manuscript Submission
COMCAS 2015 Author Instructions for Full Manuscript Submission This document provides guidance on the submission of your Manuscript to COMCAS 2015. You may wish to print out these instructions and read
More information15. Recursion 2. Motivation: Calculator. Naive Attempt (without Parentheses) Analyzing the Problem (15 7 3) = Input * 3 = Result 15
Motivation: Calculator Goal: we build a command line calculator 15. Recursion 2 Building a Calculator, Streams, Formal Grammars, Extended Backus Naur Form (EBNF), Parsing Expressions Example Input: 3 +
More information[ ] corporate brand guide brought to you from the minds at:
[ ] corporate brand guide 2015-2016 introduction This document describes the most essential elements of the p d adapt visual identity collage including logo usage, typographical marks and color palette.
More informationBOOTSTRAP 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#BDOG2018. Taglines, Hashtags And More. Spice Up Your Messaging. Digital Sharing. Questions? Comments?
Taglines, Hashtags And More Digital Sharing Follow and share your story using the hashtag #bdog2018 Browse nonprofits and tools to get involved on our website: bigdayofgiving.org Like us on Facebook: facebook.com/bigdayofgiving
More informationDESIGNPRINCIPPER FANG FORTÆLLINGEN
DESIGNPRINCIPPER Indhold: 3 / Bomærke 6 Skrift 8 Farve 9 Plakat overordnet På udstillingsstedet 11 Plakat Udstilling 12 Skrift 13 Folder 17 Flyer 2 / Bomærke 3 frizone 4 (minimum gengivelse) 2 cm 4 cm
More informationTitle Optional Subtitle
. Title Optional Subtitle J. Random Author Technische Universiteit Delft . Title Optional Subtitle by J. Random Author in partial fulfillment of the requirements for the degree of Master of Science in
More informationBuilding 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 informationThe Moldable Editor. Bachelor Thesis. Aliaksei Syrel from Minsk, Belarus. Philosophisch-naturwissenschaftlichen Fakultät der Universität Bern
The Moldable Editor Bachelor Thesis Aliaksei Syrel from Minsk, Belarus Philosophisch-naturwissenschaftlichen Fakultät der Universität Bern 6. February 2018 Prof. Dr. Oscar Nierstrasz Dr. Andrei Chiş, Dr.
More informationIDM 221. Web Design I. IDM 221: Web Authoring I 1
IDM 221 Web Design I IDM 221: Web Authoring I 1 Week 7 IDM 221: Web Authoring I 2 Page Layout Part 1 IDM 221: Web Authoring I 3 Part 1 because part 2 is coming next term (RWD, Flexbox, Grids) Posi%on An
More informationCondition of the Mobile User
Condition of the Mobile User Alexander Nelson August 25, 2017 University of Arkansas - Department of Computer Science and Computer Engineering Reminders Course Mechanics Course Webpage: you.uark.edu/ahnelson/cmpe-4623-mobile-programming/
More informationCase Study: Gut Check App
Case Study: Adam Keller User Experience Client: Janssen Pharmaceuticals Design & Direction Business Objective: To provide IBD and Crohn s Disease patients with a helpful tool that also collects patient-reported
More informationsimpleapi Documentation
simpleapi Documentation Release 0.0.9 Florian Schlachter July 06, 2014 Contents 1 Contents 3 1.1 User s Guide............................................... 3 1.2 Developer s Reference..........................................
More informationWeb Site Design and Development Lecture 7. CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM
Web Site Design and Development Lecture 7 CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM Box Model All block elements and some inline elements, like img, are placed inside a box This lets you set the height
More informationAd Spec Guidelines. Ad Spec Guidelines 1
Ad Spec Guidelines Ad Spec Guidelines 1 Table of Contents General Guidelines 3 Banners Display 4-5 Native Ads 6 Landing Pages: Super 7-8 Image 9 Interstitials 10 Rich Media 11-12 Tags 14 Attribution Pixels
More informationUser Guide. Version 2.3.9,
User Guide Version 2.3.9, 2018-05-30 Table of Contents Introduction...6 Features...7 Installation...9 Uninstall...9 Quick Start...10 Settings...13 Block name...14 Block code...15 Quickly disable insertion...15
More informationUser Manual. Version ,
User Manual Version 2.3.13, 2018-07-20 Table of Contents Introduction...6 Features...7 Installation...9 Uninstall...9 Quick Start...10 Settings...13 Block name...14 Block code...15 Quickly disable insertion...15
More informationFeature Extraction and Classification. COMP-599 Sept 19, 2016
Feature Extraction and Classification COMP-599 Sept 19, 2016 Good-Turing Smoothing Defined Let N be total number of observed word-tokens, w c be a word that occurs c times in the training corpus. N = i
More informationDashboard Dashboard Screens Screens
Dashboard Screens DataSynapse Grid Server Dashboard Grid Components Services Admin Diagnostics Overview Overview Director Monitor Broker Monitor 45 Available Engines 16 Connected Drivers 31 Active Sessions
More informationUsername. Password. Forgot your password? Sign in. Register as new user
Username Password Forgot your password? Sign in Register as new user Registration Email Password Mobile phone Verify your account via SMS otherwise leave blank to verify via email. Terms & Conditions Lorem
More informationTitle. Optional subtitle J. Random Author. Cover Text possibly spanning multiple lines ISBN
Title Optional subtitle J. Random Author Cover Text possibly spanning multiple lines ISBN 000-00-0000-000-0 Title Optional subtitle by J. Random Author to obtain the degree of Master of Science at the
More informationBrand Guidelines Clarity Coverdale Fury
Brand Guidelines 1 B R A N D M A N I F ESTO There s a spark when a girl realizes she has someone she can count on to support her dreams. The Ann Bancroft Foundation believes in nurturing that spark. Through
More informationTechnical Document Authoring and
2015 Aras 1 Technical Document Authoring and Management in PLM Kevin Richard 2015 Aras 2 Agenda Business Justification (Challenges/Goals) Technical Documents Features Demo Wrap up and questions 2015 Aras
More informationUser Guide. Version 2.3.0,
User Guide Version 2.3.0, 2018-01-21 Table of Contents Introduction...6 Features...7 Installation...9 Uninstall...9 Quick Start...10 Settings...12 Block name...13 Block code...14 Simple editor for mobile
More informationUnit 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 informationThe 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 informationIntroducing Natural Language
Session #WWDC18 Introducing Natural Language 713 Doug Davidson, Senior Software Engineer Vivek Kumar Rangarajan Sridhar, Software Engineering Manager 2018 Apple Inc. All rights reserved. Redistribution
More informationEnter the Elephant. Massively Parallel Computing With Hadoop. Toby DiPasquale Chief Architect Invite Media, Inc.
Enter the Elephant Massively Parallel Computing With Hadoop Toby DiPasquale Chief Architect Invite Media, Inc. Philadelphia Emerging Technologies for the Enterprise March 26, 2008 Image credit, http,//www.depaulca.org/images/blog_1125071.jpg
More informationTelly Mamayek, MCWD Director of Communications and Education
Minnehaha Creek Watershed District REQUEST FOR BOARD ACTION MEETING DATE: March 26, 2015 TITLE: Acceptance of 2014 MCWD Brand Manual Updates RESOLUTION NUMBER: 15-XXX021 PREPARED BY: Telly Mamayek, MCWD
More informationWhat 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 informationUnit 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 informationbrand guide book & resources
brand guide book & resources back to top 1 logo page 3 placement, colours and composition key visuals & graphics page 8 placement, colours and composition typography page 10 font use and rules placement,
More informationsphinx-argparse Documentation
sphinx-argparse Documentation Release 0.2.2 Alex Rudakov and Devon Ryan Mar 15, 2018 Contents 1 Installation 3 2 Basic usage 5 2.1 Other useful directives.......................................... 6 3
More informationElaine Torres/Jeremy Henderson/Edward Bangs
SCENARIO 1: IMAGE AND TEXT PERSONAL USE Lorem ipsum dolor sit am, consectur adipiscing Lorem ipsum dolor sit am, consectur adipiscing Cloud Capture Icon appears in the top right corner of any browser after
More informationDemo User Interface and Graphic Guidelines
Demo User Interface and Graphic Guidelines Typography & Colours Titillium Regular Titillium Semibold Titillium Bold The font used in Qt Demos is the company font Titillium. Fonts weights used: regular,
More informationCS7026 CSS3. CSS3 Graphics Effects
CS7026 CSS3 CSS3 Graphics Effects What You ll Learn We ll create the appearance of speech bubbles without using any images, just these pieces of pure CSS: The word-wrap property to contain overflowing
More informationIntroduction to MVC 1.0
Introduction to MVC 1.0 David Delabassee - @delabassee Software Evangelist Cloud & Microservices - Oracle Java Day Tokyo 2016 May 24, 2016 Copyright 2016, Oracle and/or its its affiliates. All All rights
More informationCSS, part 1. CS147L Lecture 2 Mike Krieger
CSS, part 1 CS147L Lecture 2 Mike Krieger Welcome back! Week 1 Recap - HTML provides content - CSS provides style - Javascript provides action HTML Recap - Set of tags that enclose images, video, text,
More informationGraphic Identity Manual Version 5.0 (Updated 08/17)
Graphic Identity Manual Version 5.0 (Updated 08/17) University at at Albany Graphic Identity Manual 2 Contents 3 Introduction 4 Name 5 Colors 7 Typefaces and Fonts 8 Wordmarks and Logos 16 Signatures 17
More information.and we ll give you 100 to say thank you
The digital bank Windows Internet Explorer http://www.anybank.co.uk/distinction Open an anybank current account today. Get our award winning Distinction Account 5 mobile banking app No monthly fees* Earn
More informationAmplience Content Authoring Cartridge for Salesforce Commerce Cloud
Amplience Content Authoring Cartridge for Salesforce Commerce Cloud Makes it easy to integrate Amplience-created content modules with Commerce Cloud page templates. The result? Seamless content and commerce
More information2005 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 informationCSS 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 informationTravelport Site Re-Architecture,-Design & -Development User Experience: Sitemap + Wireframes 2/14/ :01 AM V1.5
Travelport Site Re-Architecture,-Design & -Development User Experience: Sitemap + Wireframes /4/0 :0 AM V.5 Katie Turcotte Rob Staples Michael Johnson Natalie Weathers John Adcox : A Unified Marketing
More informationFirst 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 informationMachine-actionable Data Management Planning
Machine-actionable Data Management Planning Please select a stakeholder to launch the associated mockup! Researcher Research Support ICT Operator Management Funder DMap Sign In Welcome to DMap the Machine-actionable
More informationMore 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 informationParashar Technologies HTML Lecture Notes-4
CSS Links Links can be styled in different ways. HTML Lecture Notes-4 Styling Links Links can be styled with any CSS property (e.g. color, font-family, background, etc.). a { color: #FF0000; In addition,
More informationTAG 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 informationKNOWLEDGE 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 informationFriday, January 18, 13. : Now & in the Future
: Now & in the Future CSS3 is Modular Can we use it now? * Use it for non-critical things on the experience layer. * Check sites that maintain tables showing browser support like http://www.findmebyip.com/litmus
More informationLab 1: Introducing HTML5 and CSS3
CS220 Human- Computer Interaction Spring 2015 Lab 1: Introducing HTML5 and CSS3 In this lab we will cover some basic HTML5 and CSS, as well as ways to make your web app look and feel like a native app.
More informationGoSquared Equally Rounded Corners Equally Rounded Corners -webkit-border-radius -moz-border-radius border-radius Box Shadow Box Shadow -webkit-box-shadow x-offset, y-offset, blur, color Webkit Firefox
More informationThe 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 informationFor instructions to change the logo, please refer to: ore
Header Logo: For instructions to change the logo, please refer to: https://support.3dcart.com/knowledgebase/article/view/630/5/how-do-i-add-logos-to-my-st ore Menu Links and Phone Number: Menu LInks: From
More informationCSS Selectors. element selectors. .class selectors. #id selectors
CSS Selectors Patterns used to select elements to style. CSS selectors refer either to a class, an id, an HTML element, or some combination thereof, followed by a list of styling declarations. Selectors
More informationControl-flow Statements
Introduction to Programming Control-flow Statements Sergey Shershakov #4/22 Jan 2019 Test 3 (5 pts) https://goo.gl/forms/9yfm7kohnezgp3gk2 2 MORE ON STREAMS AND STRINGS 3 Class std::stringstream Allows
More informationSIGNAGE STANDARDS MANUAL RYERSON UNIVERSITY
SIGNGE STNDRDS MNUL RYERSON UNIVERSITY 350 VICTORI ST, TORONTO, ON M5 2K3 ISSUE FOR TENDER SEPTEMER 1, 2017 Sign Type 1.0/Interior Identification Sign Type 2.0/Interior Directory Sign Type 3.0/Interior
More informationBORDER IMAGES THE BACKGROUND IMAGE PROPERTIES. Learning Web Design, 5e
BORDER IMAGES For use with: Learning Web Design, 5e by Jennifer Robbins Copyright O Reilly Media 2018 In this article, I ll give you a quick overview of the border-image properties for filling the sides
More informationDebugging programs. Khoo Yit Phang October 24, 2012
Debugging programs Khoo Yit Phang October 24, 2012 1 Ideal week of a CS430 student Write code for assignment Compile code into program??? Profit! (Or get an A ) 2 More realistic week of a CS430 student
More informationVendio Stores RST Template Language Reference
Vendio Stores RST Template Language Reference Version 2.1, 09/07/2009 2009 by Vendio Services, Inc. 1 Contents Introduction:...4 The Vendio Stores...4 Assumptions and prerequisites...6 1. RST Basics...6
More informationC OLLABORATIVE AI WORKFLOWS
C OLLABORATIVE AI WORKFLOWS At, we transform the way people work within companies We offer the technological solutions to develop bespoke collaborative workflows providing superior access to information,
More informationRHYMES WITH HAPPIER!
RHYMES WITH HAPPIER! Title Subtitle Date Title Subtitle Date Title Subtitle Date Title Subtitle Date WHO AM I? First Last Body copy Quick Facts about Zapier HQ: San Francisco, CA 100% Remote 145 Employees
More information