Lec 4 Handout
advertisement
Information Visualization Course
Web Design
Prof. Anselm Spoerri
aspoerri@rutgers.edu
© 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
pageContent
<div>
header
<div> header content </div>
navigation
<div> navigation content </div>
main content
<div> main content </div>
footer
<div> footer content </div>
</div>
Produces “linear / natural flow” of divs
© 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 {…}
‒ class="name"
.className {…}
define CSS rule
can be applied many times
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
<div id="pageContent">
header
<div id="header"> text/images/links </div>
navigation
<div id="navi"> text/images/links </div>
main content
<div id="content"> text/images/links </div>
footer
<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 properties
Specific 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 take
Property you want to change
p { text-align: left;
color: black;
font-family: Arial; }
causes
Font to be left-aligned
Font 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
Mechanics – CSS: Cascade
Cascade: Inheritance, Specificity and Location.
Inheritance
‒ Html = Hierarchical Structure of the content
Elements 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
Mechanics – CSS: Cascade
Cascade: Inheritance, Specificity and Location.
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 found
h1 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 element
strong.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 Validator
http://jigsaw.w3.org/css-validator/
© Anselm Spoerri
Recap – CSS: Cascade
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
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 tags
Select 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” folder
and 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 Inspector
to 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)
© Anselm Spoerri
