Digital Media Production Anselm Spoerri Ph D MIT

Lecture 5 - Overview Web Design – Basic Principles and Steve Krug’s Suggestions Recap

Web Design – Basic Principles Recap Alignment – Don't Mix Alignment Styles – Simplicity

Web Design – Steve Krug’s Suggestions Recap Design for Scanning, not reading – Visual

CSS: Cascade: Inheritance, Specificity and Location. Inheritance ‒ Html = Hierarchical Structure of the

CSS: Cascade: Inheritance, Specificity and Location ‒ Rules that appear later have more weight.

CSS: External & Internal Style Sheets Linking to External Style Sheet ‒ Place <link

CSS: Selectors Selector determines which elements the formatting will be applied to. Declarations define

CSS: Selectors Summary and CSS Validator Combining Selectors 1. Define Context div#intro 2. Spell

Recap – CSS: Cascade: Inheritance, Specificity and Location. Inheritance example – Html = Hierarchical

CSS – Box Model = every element is enclosed in Invisible Box • Width

CSS – Floating Elements Making Elements Float so that they float in a sea

CSS – AP Element = AP Div AP Element = Absolutely Positioned Element =

CSS – “Clean Slate” CSS: Creating “Clean Slate” html, body, h 1, h 2,

Web Design Templates Lots of HTML+CSS templates available for free. Open relevant HTML and

Three Columns – Fixed Widths Example <div class="container"> <div class="header" ></div> <div class="sidebar 1">

Three Columns – Liquid Widths Example <div class="container"> <div class="header" ></div> <div class="sidebar 1">

Knight Digital Media Center – Free Web Design Example Using Free Web Designs Assigned

Exercise 3 – Demo Steps Step-by-Step files: http: //comminfo. rutgers. edu/~aspoerri/Teaching/DMPOnline/Lectures/Lec 5/Steps/ Step 1

Step 1 – Create External CSS file Step 1 ‒ Download from http: //comminfo.

Step 2 – Add Floating Sidebar Step 2 ‒ Create Div with id=“right. Sidebar”

Step 3 – Non-floating Footer and Floating Image on Left Step 3 ‒ Specify

Step 4 – Embed You. Tube Video Step 4 ‒ Create DIV for Video

Slides: 24

Download presentation

Digital Media Production Anselm Spoerri Ph. D (MIT) SC&I @ Rutgers University aspoerri@rutgers. edu anselm. spoerri@gmail. com Digital Media Production © Anselm Spoerri

Lecture 5 - Overview Web Design – Basic Principles and Steve Krug’s Suggestions Recap CSS – Cascade: Inheritance, Specificity and Location – Constructing Complex Selectors – Box Model | Floating Element | Absolutely Positioned Element Web Page / CSS Templates – Advantages and Challenges of using Templates – Fixed or Liquid Three Columns Layout – Guided Tour of Web Page Template Exercise 3 Demo Lectures – Week 5 Content http: //comminfo. rutgers. edu/~aspoerri/Teaching/DMPOnline/Lectures. html#week 5 Digital Media Production © Anselm Spoerri

Web Design – Basic Principles Recap Alignment – Don't Mix Alignment Styles – Simplicity and Left-Aligned – Create Sufficient Left Margin – Constrain Total Width of Page Proximity – Related Things Close Together – Spatial Separation = Conceptual Separation Repetition & Consistency – Navigation, Graphics Color Coding, Typeface – Creates Ease of Use Contrast – Bigger, Bolder, Color, Spatial Distance – Guide the Eye Digital Media Production © Anselm Spoerri

Web Design – Steve Krug’s Suggestions Recap Design for Scanning, not reading – Visual Hierarchy – Visual contrast - size, bold, color – Important things = Visually prominent – Break pages up into clearly defined areas – Related things = Spatially close, Nested – Don’t mix Alignment Styles: left-aligned text – Avoid “visual noise" – Leverage Conventions – Clear what's clickable – Use underline and/or color coding Make each click a “mindless” choice Cut ½ of words, then cut ½. Digital Media Production © Anselm Spoerri

CSS: Cascade: Inheritance, Specificity and Location. Inheritance ‒ Html = Hierarchical Structure of the content Specificity ‒ The more specific the selector, the stronger the rule Location ‒ Rules that appear later Digital Media Production have more weight © Anselm Spoerri

CSS: Cascade: Inheritance, Specificity and Location. Inheritance ‒ Html = Hierarchical Structure of the content Elements are contained / appear with other elements (h 1 resides inside div). ‒ Many properties, but not all, inherited by descendants of elements h 1 is blue and has red border … blue is inherited but not red border by elements residing inside h 1 element. ‒ Inherited rules are considered the most general of all and are overruled by any other rule. Specificity ‒ The more specific the selector, the stronger the rule h 1 with class X rule will overrule h 1 rule. ‒ The id attribute is considered the most specific. Digital Media Production © Anselm Spoerri

CSS: Cascade: Inheritance, Specificity and Location ‒ Rules that appear later have more weight. Browser External CSS Inline Style ‒ You can declare a rule to be more important than others by adding !important at the end of the rule. Summary In the absence of a rule, many styles are inherited from parent element to child. With two competing rules, the more specific the rule, the more weight or importance it has – regardless of its location. With two rules of equal specificity, the one that appears later wins. Note: Some CSS properties allow you to specify the URL of another file: if it is a relative URL, then it needs to relative to the external style sheet. Digital Media Production © Anselm Spoerri

CSS: External & Internal Style Sheets Linking to External Style Sheet ‒ Place <link rel="stylesheet" href="mystyle. css" type="text/css" /> inside <head> tag. ‒ Linking to several external style sheets: the later ones take precedence over earlier ones (location principle). Creating Internal Style Sheet ‒ <style type=”text/css”> … </style> Internal style sheet overrides external style sheets if and only if style tag comes after link tag. Applying styles locally is not recommended. To view other designer’s CSS code: view source code of Web page and look at internal style sheet and load URLs for external style sheets. Digital Media Production © Anselm Spoerri

CSS: Selectors Selector determines which elements the formatting will be applied to. Declarations define the formatting. Constructing Complex Selectors that apply formatting based on: ‒ type or name of element (e. g. tag) h 1 {color: red; } ‒ context element is found h 1 em {color: red; } h 1. news {color: red; } div#gaudi p = any p element contained in div whose id is equal to gaudi ‒ class (. name) or id (#name) of an element strong. news {color: red; } div#gaudi {color: red; } ‒ pseudo-class tag: first-line tag: first-letter Specifying Groups of Elements: h 1, h 2 {color: red; } Digital Media Production © Anselm Spoerri

CSS: Selectors Summary and CSS Validator Combining Selectors 1. Define Context div#intro 2. Spell out Element’s Name div#intro p 3. Specify Class or Id of desired element div#intro p. first. P 4. Specify Pseudo-class or Pseudo-element div#intro p. first. P: first-letter example CSS Validator http: //jigsaw. w 3. org/css-validator/ Digital Media Production © Anselm Spoerri

Recap – CSS: Cascade: Inheritance, Specificity and Location. Inheritance example – Html = Hierarchical Structure – Many properties, but not all, inherited by descendants of elements Specificity example – The more specific the selector, the stronger the rule How do you create a specific CSS rule? – tag Location class (. name) id (#name) context example – Rules that appear later have more weight. Inherit from Parent The More Specific the rule, the More Weight The one that Appears Later Wins. Digital Media Production © Anselm Spoerri

CSS – Box Model = every element is enclosed in Invisible Box • Width and Height can be specified • Padding = space surrounding content inside of box (all four sides can be specified separately) • Border : can specify all four borders separately also specify border-style: type; border-width: n; border-color: color; • Margin = invisible space around border of box (-top, -bottom, -left, -right, auto) • Overflow : elements are not always contained in their boxes; can be: visible; hidden, scroll; auto (scroll appears when needed). • If width, margin, border and padding don’t equal size of containing block something’s got to give : ) Digital Media Production © Anselm Spoerri

CSS – Floating Elements Making Elements Float so that they float in a sea of text • float: left / right • clear: left / right / both / none to keep elements from floating on left / right / both sides and none lets elements float on either side. element is on left / right text flows on right / left. • clear property stops affected element from displaying until designated side is free. • Add clear property to elements whose sides you want to be clear of floating elements. <div id=“yellow”> <div id=“green”> float : left clear: left http: //comminfo. rutgers. edu/~aspoerri/Teaching/DMPOnline/Lectures/Lec 5/Steps/float_and_clear. html Digital Media Production © Anselm Spoerri

CSS – AP Element = AP Div AP Element = Absolutely Positioned Element = AP Div • Specify exact coordinates with respect to: • • Body / AP parent element (position: absolute) Browser window (position: fixed) [not all browsers support it] then set top, right, bottom and/or left: value; takes element out of “natural/normal flow” • More Layout Control & Flexibility • • Layout flexibility like in print design Change visibility of AP Elements • Nesting AP Elements • Inherit properties from parent AP Element such as visibility • AP elements can overlap specify a stacking order (z-index) to position elements in 3 D. • Vertical-align: Digital Media Production baseline/ middle / sub / super / top / bottom / text-top / text-bottom © Anselm Spoerri

CSS – “Clean Slate” CSS: Creating “Clean Slate” html, body, h 1, h 2, h 3, h 4, h 5, h 6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote { padding: 0; margin: 0; font-size: 100%; font-weight: normal; } Digital Media Production © Anselm Spoerri

Web Design Templates Lots of HTML+CSS templates available for free. Open relevant HTML and CSS files in Code Editor and customize. First work out design (page structure and CSS), then add content. Skeletal Designs Solve common problem: How to create the basic layout of site. Commonly has header / banner area, content area, sidebar, navigation structure, and footer area. Complete Designs Skeletal layout plus a pre-fab look and feel -- colors, graphics, font choices, borders, accent graphics, starter banners, list styles. Plus: if you can find one close to the look you're going for, you'll have much less work to do. Minus: can be hard to find one that feels "just right, " and it can be harder to customize some aspects of these sites than working up from a lower level. Digital Media Production © Anselm Spoerri

Three Columns – Fixed Widths Example <div class="container"> <div class="header" ></div> <div class="sidebar 1"> header s i d e b a r 1 content footer  s i d e b a r 2  </div> <div class="content">   </div> <div class="sidebar 2">   </div> <div class="footer" >  </div> Digital Media Production © Anselm Spoerri

Three Columns – Liquid Widths Example <div class="container"> <div class="header" ></div> <div class="sidebar 1"> header s i d e b a r 1 content footer  s i d e b a r 2  </div> <div class="content">   </div> <div class="sidebar 2">   </div> <div class="footer" >  </div> Digital Media Production © Anselm Spoerri

Knight Digital Media Center – Free Web Design Example Using Free Web Designs Assigned Reading Sample HTML+CSS Template link | example Layout – <div class="content"> contains Table Structure – <div id="innercontent"> floated left and inside of cell Navigation with Image Rollovers – Inside of two vertically adjacent cells that have been merged – Up and Down images need to have same width and height – Down image = “you are here” indicator – Uses Java. Script code created by Dreamweaver Map – How to Embed Google Map http: //maps. google. com/help/maps/getmaps/plot-one. html Digital Media Production © Anselm Spoerri

Exercise 3 – Demo Steps Step-by-Step files: http: //comminfo. rutgers. edu/~aspoerri/Teaching/DMPOnline/Lectures/Lec 5/Steps/ Step 1 – Create External CSS file Step 2 – Add Floating Sidebar Step 3 – Non-floating Footer and Floating Image Step 4 – Embed You. Tube Video Digital Media Production © Anselm Spoerri

Step 1 – Create External CSS file Step 1 ‒ Download from http: //comminfo. rutgers. edu/~aspoerri/Teaching/DMPOnline/Lectures/Lec 5/Steps ‒ “lec 3. html” ‒ Create External CSS file “ex 3 styles. css” Add at the top of file: @charset "utf-8"; /* CSS Document */ ‒ Copy and Paste “Clean Slate” Code and Comment it Out ‒ Place /* before “Clean Slate” code and */ after it ‒ Cut & Paste “lec 3. html” Internal CSS Code (code goes gray) into external CSS file ‒ Save ex 3 styles. css ‒ Save “lec 3. html” As “ex 3_step 1. html” (page loses formatting) ‒ Create link to external CSS file in web page ‒ <link rel="stylesheet" href="ex 3 styles. css" type="text/css" /> Digital Media Production © Anselm Spoerri

Step 2 – Add Floating Sidebar Step 2 ‒ Create Div with id=“right. Sidebar” ‒ Place this div in HTML hierarchy as child of “page. Content” div and before “content” div Specify CSS Internally and then later move to external file <style type="text/css"> </style> ‒ Create CSS code for Div with id=“right. Sidebar” float: right; width: 120 px; height: 100 px; margin-top: 20 px; margin-left: 10 px; margin-bottom: 10 px; padding: 5 px; border-width: thin; border-style: solid; border-color: #C 1 F 3 BC; border-top: 20 px solid #C 1 F 3 BC; Digital Media Production © Anselm Spoerri

Step 3 – Non-floating Footer and Floating Image on Left Step 3 ‒ Specify CSS code clear: both for “footer” div clear: both; margin-top: 10 px; ‒ Create DIV and Insert Image Create <div> after h 1 Insert image <img src="116. jpg" alt="Intro Image" width="100" height="100" /> ‒ Specify class=“float. Left” and apply to DIV with Image float: left; margin-right: 10 px; margin-bottom: 10 px; border: medium; border-style: solid; border-color: black; ‒ Add enough text in opening paragraph so that it wraps around image and sidebar Digital Media Production © Anselm Spoerri

Step 4 – Embed You. Tube Video Step 4 ‒ Create DIV for Video / Screencast Create <div> after opening paragraph ‒ Insert Table: Single Row and Two Cells ‒ Copy & Paste You. Tube Embed Code into Cell http: //www. youtube. com/watch? v=h 9 bw. Dx 1 Vrm 4 Make sure to set width = 200 and height = 150 in two places in <object> code Next Steps move Internal CSS code to External CSS file and remove comments for “clean slate” code and specify CSS rules that are needed and format page to create your visual look Digital Media Production © Anselm Spoerri