Information Visualization Course

© Anselm Spoerri

Web Design

Information Visualization Course

Prof. Anselm [email protected]

© Anselm Spoerri

Lecture 4 – Overview

XHTML Elements Recap – Hierarchy of Tags

– Block and Inline Elements

– div | id | class

Cascading Style Sheet = CSS– Formatting Rules

– Inline | Internal | External specification of CSS rules

– CSS Demo

– Cascade: Inheritance, Specificity and Location

– Create Selectors

Exercise 1 Step–by–Step Demo

© Anselm Spoerri

Recap & New – Web Basics: HTML Elements & Tags

HTML is made up of elements<tag>Content</tag>(read as: open tag, content, close tag)

Three major elements needed on HTML page<html> - container for all of our HTML code

<head> - put data for browser and other machines

<body> - put content to show to the user

Block-level elements take up own space vertically

(<p>, <h1>, <h2>, ...)

<div> page division

Inline-level elements placed inside other elements

(<a>, <img>, <strong>, <em>, …)

© Anselm Spoerri

Page Layout – DIVs

Two methods for creating Web Page Layout‒ Tables (last lecture)

‒ DIVs and CSS (this lecture)

Structure Your Pages URL

‒ Divide logical sections of document into div elements

Produces “linear / natural flow” of divs

pageContent

header

navigation

main content

footer

<div>

<div> header content </div>

<div> navigation content </div>

<div> main content </div>

<div> footer content </div>

</div>

© Anselm Spoerri

Page Structure – Hierarchy & Naming Elements

Body of (X)HTML document encloses Content of Web page.

Breaking up Page into Divisions (DIV)

Creating a Line Break: <br />

Hierarchical Structure of Web pages‒ Elements contained inside another element (latter = parent, former = child)

Naming Elements

‒ id="name" can be applied only once unique

#idName {…} define CSS rule

‒ class="name" can be applied many times

.className {…} define CSS rule

Useful with div (content blocks) and span (inline text) elements

© Anselm Spoerri

Page Layout – DIVs with IDs

Name div elements with unique IDs

pageContent

header

navigation

main content

footer

<div id="pageContent">

<div id="header"> text/images/links </div>

<div id="navi"> text/images/links </div>

<div id="content"> text/images/links </div>

<div id="footer"> text/images/links </div>

</div>

© Anselm Spoerri

Mechanics – Web Basics: CSS

CSS = Cascading Style Sheets

Collection of Formatting Rules

Control Appearance of web page: blocks and text

Ensure a more Consistent Treatment of Page Layout and Appearance in Browsers

Separation of Content from Presentation

– Easier to Maintain Appearance since Make Change in Single Location

– Simpler and Cleaner HTML code shorter loading times

© Anselm Spoerri

Mechanics – Web Basics: CSS (cont.)

Cascading Style Sheets (CSS)

• Control Text propertiesSpecific fonts and font sizes; bold, italics, underlining, and text shadows;

text color and background color; link color and link underlining; etc.

• Control Format & Position of Block-level Elements Set margins and borders for block-level elements; position them in a specific

location; add background color; float text around them; etc.

• Liquid layouts: expand/contract based on Browser width.

• Easy to apply Same Layout to Whole Site and only need to modify external CSS file.

• Minus: Not all browsers support CSS the same way.

DW helps to identify Compatibility Issues

© Anselm Spoerri

Mechanics – Web Basics: CSS (cont.)

CSS Style Sheet stored

a) External CSS style sheet (.css file linked to page and using a link or an @import rule in the head section of a document).

b) Internal (or embedded) CSS style sheet (included in style tag in head portion of an HTML document).

c) Inline styles (defined within specific tag instance in HTML document) Using Inline styles is not recommended.

CSS Rule = Selector and Block of Declarations

Enclosed by {...} brackets and separated by ;

Declaration = Property: Value;

© Anselm Spoerri

CSS – General Structure of CSS Rule

Basic syntax for Internal and External CSS:

selector {property1: value1; property2: value 2;}

HTML tag you want to modify

Value you want property to takeProperty you want to change

p { text-align: left; color: black; font-family: Arial; }

causes

Font to be left-alignedFont to be Arial and black

© Anselm Spoerri

CSS Rules – id and class Rules in Internal Style Sheet

<head>

<style type="text/css">

/* Comment: pageContent ID and define font to use for page and the top and left margins as well page width. This pageContent div contains all the other

divs */#pageContent {

font-family: Verdana, Geneva, sans-serif;

font-size: 12px;

margin-top: 10px;

margin-left: 50px;

width: 500px;

}

/* blue text class */

.blueText {color:#009;

}

</style>

</head>

© Anselm Spoerri

CSS Rules – id and class Rules Applied in <body>

<body>

<div id="pageContent">

<div id="content">

<h1>Heading1</h1>

<p class="blueText">Open paragraph</p>

</div>

</div>

</body>

© Anselm Spoerri

Location of CSS Style Definition

Inline style (causes only the tag to have desired properties)

<p style="font-family:Arial; color:blue">Something blue </p>

Internal stylesheet (specific to a document)

– Causes all tags in document to have property– <style> tag inside <head> tag of document

<head> <style type="text/css"> p { font-family:Arial; color:blue;} </style> </head>

External stylesheet (can control multiple documents)– Ensure consistent appearance of website

<head> <link rel="stylesheet" href="mystyle.css" type="text/css" /></head>

© Anselm Spoerri

CSS – Cascasde of How Rules are Applied

Style Rules “Cascade” from broad to narrow:

– Browser’s Default Behavior

– External Style Sheet

– Internal Style Sheet

– Inline Style

© Anselm Spoerri

CSS Demo – Step 1

Step 1

‒ Create “Blank” HTML Page in DW

‒ Save as “page1.html”

‒ Create nested div structure

pageContent,header, navi, content, footer

Inside content, create h1 and p block-level elements

‒ Assign id names to DIVs

© Anselm Spoerri

CSS Demo – Step 2

Step 2

‒ Create Internal CSS Style Sheet

<style type="text/css">

‒ Create CSS Rule for id="pageContent"

font-family: Verdana, Geneva, sans-serif;font-size: 12px;margin-top: 10px;margin-left: 50px;width: 500px;

‒ Create CSS Rule for class="blueText"

color:#009;

© Anselm Spoerri

CSS Demo – Step 3

Step 3

‒ Create CSS Rule for id="header"

font-size: 9px;border-bottom-width: thin;border-bottom-style: solid;border-bottom-color: #333;

‒ Create CSS Rule for id="navi"

font-size: 14px;background-color: #E1E3F7;padding: 5px;margin-top: 5px;

© Anselm Spoerri

CSS Demo – Step 4

Step 4

‒ Create CSS Rule for id="content"

font-size: 12px;

‒ Apply class="blueText"

<p> tag inside div with id="content"

‒ Create CSS Rule for id="footer"

font-size: 10px;border-top-width: thin;border-top-style: solid;border-top-color: #666;

© Anselm Spoerri

Mechanics – CSS: Cascade

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 have more weight

© Anselm Spoerri



Inheritance

‒Html = Hierarchical Structure of the contentElements are contained / appear with other elements (h1 resides inside div).

‒Many properties, but not all, inherited by descendants of elements

h1 is blue and has red border … blue is inherited but not red border by elements residing inside h1 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 h1 with class X rule will overrule h1 rule.

‒The id attribute is considered the most specific.

© Anselm Spoerri



Location

‒ Rules that appear later have more weight.

Browser External CSS Internal 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.

© Anselm Spoerri

Mechanics – CSS: External & Internal Style Sheets

Linking to External Style Sheet

• Dreamweaver places <link …/> code 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> which can be exported in Dreamweaver.

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.

© Anselm Spoerri

Mechanics – CSS: Selectors

Selector determines which elements the formatting will be applied to.

Declarations define the formatting.

Constructing Selectors that apply formatting based on:

‒ type or name of element (e.g. tag) h1 {color: red;}

‒ context element is foundh1 em {color: red;} h1.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 elementstrong.news {color: red;} div#gaudi {color: red;}

‒ pseudo-class tag:first-line tag:first-letter

Specifying Groups of Elements: h1, h2 {color: red;}

© Anselm Spoerri

Mechanics – CSS: Selectors (cont.)

Selecting Link Element based on their State Navigation Structure

Since a link can be in more than one state at a time, it is important to define rules in following order:

1. a:link

2. a:visited

3. a:focus

4. a:hover

5. a:active

LVFHA

© Anselm Spoerri

Mechanics – 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.firstP

4.Specify Pseudo-class or Pseudo-element

div#intro p.firstP:first-letter example

CSS Validatorhttp://jigsaw.w3.org/css-validator/

© Anselm Spoerri

Recap – CSS: Cascade


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 class (.name) id (#name) context

Location 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.

© Anselm Spoerri

Dreamweaver - Exercise 1 Step–by–Step

1 Set up Local / Remote Site

2 Create First Page | Initialize DW and Page– File > New and use HTML5 doctype

3 Create Layout using AP Elements– Rounded corners; Background transparency

4 Convert Layout to HTML5 semantic tags

5 Move Internal CSS to External CSS file

6 Create Navigation using Spry Menu Bar– Specify primary navigation categories and relative hyperlinks– Specify secondary navigation and anchor links– Customize CSS for Spry Menu Bar– Create “You are Here” Indicator for page– File > Save As to create primary pages and customize “you are here”

7 Structure Text, Create Anchor & Format Text

8 Capture, Edit & Insert Screenshots

9 Upload Files to Remote Site

© Anselm Spoerri

Dreamweaver – Set up Local / Remote Site

Local Folders– Create folder “320course” or “320” (if does not exist)

– Open “320course” folder– Create folders for short assignments and exercises (if do not exist)

Launch Dreamweaver

Creating Folders in Dreamweaver (local or remote)

– Site > Site View– Select Folder (into which you want to insert a folder)

– File > New Folder

public_html folder– Contains all files that can be viewed by Internet Browser

© Anselm Spoerri

Step 1 – Set up Local / Remote Site

Site > New Site (if don’t already have Site Def on your computer)

Select “Site” – Site > Site Name = “320course” for this demo

– Site > Local Site Folder = “320course” in “My Documents”

Select “Servers" Category in New Site Dialog– Click on + (Add new server)– Specify Server Name– Select “SFTP" in pull-down “Connect using” menu

– SFTP Host =“eden.rutgers.edu”– Login = “yourusername”– Password = “yourpassword”– Root Directory = “public_html”Test and if successful Save

Connect to Server– Select "Connect to Remote" icon

Transfer files to server– Manually

– File : drop onto file OR drop into folder that contains file you want to up/download

– Folders: drop into folder that contains folder you want to up/download

© Anselm Spoerri

Step 2a – Create First Page

1. File > New

2. Page Type = HTML

4. DocType = HTML 5

5. Layout CSS = Add to Head(will later export CSS into linked external css file)

6. Click Create

7. Save Page as “summary.html” in “ex1” folder

© Anselm Spoerri

Step 2b – Initialize DW and Page

Initialize Dreamweaver– View > select “Design”

– View > Rulers > select “Show” and “Pixels”

– View > Grid > select “Show Grid”, “Snap to Grid” and specify “Grid Settings”

– Windows > select “Insert”, “Properties” and “CSS Styles”

Filename = lowercase and no spaces

Title Page

Modify > Page Properties– Page font = sans serif type, such as Verdana, Ariel, Helvetica

– Size = 100% or 10 – 14px (usually)

– Text color = white

– Background image = screenshot of site being evaluated

– Margin fields: set all to zero (if you don’t want any margins)

© Anselm Spoerri

Step 3 – Create Page Layout using AP Elements

Window > Insert : Layout option selected

Create AP Element for Navigation‒ Select “Layout” View

‒ Drag “Draw AP Div” from Insert : Layout panel onto page

‒ Position AP Element using Properties Panel

‒ Set Vis = visible in Properties Panel

‒ Unselect AP Element (so that next AP element is not placed inside of it)

Create AP Elements for Header and Content

Assign IDs to AP Elements‒ Select AP element and in Properties Panel change CSS-P Element slot to

– “nav” for navigation AP element

– “header” for header AP element

– “section” for content AP element

Style Content AP Element using CSS Styles panel

‒ Rounded Border (part of Border properties), Padding (part of Box properties)

‒ Background transparency: use rgba(100,100,100,0.85)

© Anselm Spoerri

Step 4 – Convert Layout to HTML5 tags

Window > CSS Styles Panel open

Convert CSS for IDs to HTML5 tags‒ Select “All” in CSS Styles Panel

‒ Select “#nav” CSS rule and change name to “nav”

‒ Select “#header” CSS rule and change name to “header”

‒ Select “#section” CSS rule and change name to “section”

‒ Notice how now AP elements lose their position and are displayed in “linear flow”

Convert AP Elements to HTML5 tagsSelect div and then use Tag Bar and right-click to select “Quick Tag Editor”

‒ change <div id=“nav”> to <nav>

‒ change <div id=“header”> to <header>

‒ change <div id=“section”> to <section>

‒ Notice how now AP elements have “regained” their position and are taken out of “linear flow”

© Anselm Spoerri

Step 5 – Move Internal CSS to Exernal CSS file

Window > CSS Styles Panel open

Move Internal CSS to Exernal CSS file‒ Select “All” in CSS Styles Panel

‒ Select all CSS styles listed below <style>

‒ Right click and select “Move CSS Rules …”

‒ Select “A new style sheet …” and specify CSS file name = “mystyles”

‒ Notice linked files for DW page in top left bar

‒ Save “mystyles.css”

CSS Location Principles‒ Make sure that link to external CSS file is before <style> tag

© Anselm Spoerri

Step 6a – Create Navigation Structure using Spry Menu Bar

Insert Spry Menu Bar into nav element‒ Place Cursor inside nav element

‒ Drag “Spry Menu Bar” from Insert : Layout panel onto page

‒ Select “Horizontal”

‒ Make sure that “SpryAssets” folder is inside “ex1” folderand update links to external CSS and JavaScript files accordingly

Create Primary and Secondary Categories‒ Spry Menu Bar selected and use Properties Panel

‒ Primary: Summary | Audience | Task | Navigation | Functionality and specify relative navigation links

‒ Secondary: create short question categories and specify anchor‒ Important: pagename.html#anchorname

Example: audience.html#who

Test Page‒ Preview page in browser: secondary pull down is not fully visible

‒ Select “nav” AP element and set z-index = 100 so that fully visible

© Anselm Spoerri

Step 6b – Customize Spry Menu Bar & Create “You are here”

Customize Spry Menu Bar‒ Examine SpryMenuBarHorizontal.css

‒ Identify CSS rules that need to be customized “look & feel”

‒ Search for CSS rules with “background-color” specified and copy these rules

Create “You Are Here” Indicator‒ Create new CSS file and call it “SpryMenuBarHorizontal_custom”

and save in SpryAssets folder

‒ Insert external link to just created CSS file in <head> tag just after other CSS file for Spry Menu Bar

‒ Paste copied CSS rules and rename by adding .here after a Example: a.here

‒ Set background-color and color appropriately for different link states (and other properties as you see fit … you are the designer)

‒ Apply CSS class “here” to appropriate <a> in primary navigation

‒ File > Save All

© Anselm Spoerri

Step 6c – Create Other Pages and Customize “You Are Here”

Create Other Pages‒ File > Save As summary page and name = “audience”

‒ Specify unique title

‒ Use File > As to create other primary pages and name appropriately and specify unique title

Customize “You Are Here” Indicator‒ Apply CSS class “here” to appropriate <a> in primary navigation

‒ If there is already CSS class applied to <a> tag then add “here” and have a space between different class names

© Anselm Spoerri

Step 7 – Structure Text, Create Anchor & Format Text

Create Text– Place Cursor inside section and enter text

– Press Enter to create headline3 and paragraph for each question & answer pair

Create Named Anchor– Place cursor before headline3 text– Insert > Named Anchor and specify anchor name (use consistent spelling)

Format Text using Property Inspector– Create appropriate CSS rules so that question and related answer

spatially closer than next question– In CSS Styles Panel, select “mystyles” and add needed CSS rules

You are the Designer– You create and/or modify the needed CSS rules

to achieve the "look & feel" you want

© Anselm Spoerri

Step 8a – Capture, Edit Screenshots

Capture Screenshot– Whole Screen = Press "Prt Sc Sys Rq" in top row of keyboard– Selected Application = Press "Alt" + "Prt Sc Sys Rq" keys

Launch Fireworks

Edit Screenshot– Open new file in in Fireworks

“File > New File” (and set image area to 1000 x 1000 pixels)– “Edit > Paste" from Clipboard into Fireworks– Select “Cropping Tool” in Fireworks– Select area of interest– Double-click to make cropping final– Save “cropped area” as a separate file using “File > Export”

and in dialog select “Images Only” and save in “ex1” folder

© Anselm Spoerri

Step 8b – Insert Screenshots

Insert Screenshot– Select Location in Dreamweaver file to insert screenshot

– “Insert > Image”or click “Image Icon” in “Common” option in Insert window

– Select image file (in “ex1” folder) to insert

– Specify alternate text (shown if image can not be displayed)

Reduce Size of Image in Dreamweaver

– Select image

– Select image corner handle, while holding down SHIFT key, and drag to desired size

– Image dimensions will be displayed in bold in Property Inspectorto indicate displayed size not equal actual size

© Anselm Spoerri

Step 9 – Upload Files to Remote Site

Make Site Files visible– Window > Files (if window is not visible)

– Click “Expand/Collapse” icon

to see both Local and Remote files

Connect to Remote Server– Select "Connect to remote host " icon

Transfer Files to Remote Site– Manually “Drag & Drop” “ex1” folder to Remote Server

(remember to drop “ex1” folder into “320course” folder

and not into “ex1” folder on remote server)