W3b Sk1llz Zhongshan University Day 2: Creative Commons and Stylesheets

W3b Sk1llz
現在 ! Day 2 of 2
What is the commons?
Resources that are freely
accessible to any member
of a given community.
Natural resources
(air, water, parks)
Cultural resources
(creative works, scientific works, public knowledge)
What is Copyright?
Copyright grants copyright
owner a bundle of rights.
If you want to...
Copy/Distribute Publicly Perform Publicly Display Build Upon Digitally Distribute
then you need to ASK!

CC provides free licenses for
content (creative works).
All Rights Reserved.
No Rights Reserved.
Some Rights Reserved.
46
http://cn.creativecommons.org/
By preciouskhyatt, http://flickr.com/photos/preciouskhyatt/
http://creativecommons.org/licenses/by/2.0
http://creativecommons.org/license/by/3.0
Unless otherwise noted, this work is

licensed under a CC Attribution 3.0
unported license.
?
Quick Review from Day 1
XHTML 1.0 is current standard
● xhtml 1.0 specification
●
All elements lowercase
● Use double-quotes
● All tags close
●
Removal of some arcane tags (<blink />)
●
Separation of style/css and structure/html
http://www.w3.org/TR/xhtml1/
Why use standards?
● Compliance on multiple operating systems
● Compliance on multiple web browsers
● Accessibility (disabilities)
●
Scalable media (from computer to cell phone
to PDA)
● Quality assurance
HOWTO
● Create plain-text file in favorite text editor
– notepad
●
Save file with name “index.html”
●
Open web browser
●
Drag your text file into browser window
●
Now, make edit, and refresh the browser
window to see changes.
Basic HTML Webpage
<html>
<head>
<title>Summer</title>
</head>
<h1>Summer Vacation</h1>
<p>My summer vacation was sunny, silly, and far too
short.</p>
<p>How many days till Christmas?</p>
</html>
Basic HTML Webpage
<html>
<head>
<title>Summer</title>
</head>
<h1>Summer Vacation</h1>
<p>My summer vacation was sunny, silly, and far too
short.</p>
<p>How many days till Christmas?</p>
</html>
http://rejon.org/wiki/Developing_a_Buzz:Web_Workshop
Testing: Validation
http://validator.w3.org/
Valid Basic Webpage
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Jon Phillips</title>
</head>
<body>

<p><a href="about.html">about</a> :
<a href="http://www.rejon.org/">rejon.org</a> :
<a href="projects/index.html">projects</a>
</p>

<h1>bio</h1>
<p><b>Jon Phillips</b> (www.rejon.org) is an open source developer, artist, writer, educator, lecturer, and curator with 12+ years of experience creating communities and working within computing culture. His involvements with
mixing culture and software development have been shown internationally at the Desktop Developers Conference (2005), SFMoMA (2004), University of Tokyo (2004), Korea's KAIST (2004), UCLA Hammer Museum's
Digital Storytelling Conference, UC-Berkeley's 040404 Conference (2004), USC Aim Festival IV (2003), and the ICA London (2002). He is a core Open Source developer advocate and developer on Inkscape
(http://www.inkscape.org), a scalable vector graphics editor and on the Open Clip Art Library (http://openclipart.org), and is writing/producing a book, "CVS: Concurrency, Versioning and Systems." Currently, he is visiting
faculty at the San Francisco Art Institute (www.sfai.edu) in the Design+Technology department and is an Open Source developer for the Creative Commons (www.creativecommons.org).</p>

<p><a href="mailto:jon@rejon.org">email</a></p>

</body>
</html> http://rejon.org/wiki/Developing_a_Buzz:Web_Workshop#Valid_Basic_Page
LAST
CLASS
Create your own webpage with
personal profile and with all your
class work on it (linked to it)
Your Page MUST Validate:
http://validator.w3.org/
Work in groups of 4-5 ppl. to make
a simple group page with links to
group member pages
TEACHING: Styling your Pages
Day 2: Web Design (CSS)
What are Stylesheets?
"In computing, Cascading Style Sheets (CSS) is a
stylesheet language used to describe the presentation of
a document written in a markup language. Its most
common application is to style web pages written in
HTML and XHTML, but the language can be applied to
any kind of XML document, including SVG and XUL. The
CSS specifications are maintained by the World Wide
Web Consortium (W3C)."
http://en.wikipedia.org/wiki/Cascading_Style_Sheets
What is possible?
http://www.csszengarden.com/
http://en.wikipedia.org/wiki/Cascading_Style_Sheets#External_links
Current CSS Spec is 2.1
http://www.w3.org/Style/CSS/
http://www.w3.org/TR/CSS1
http://www.w3.org/TR/CSS2/
http://www.w3.org/TR/CSS21/
Basics
A style sheet consists of a list of rules. Each rule
consists of a selector and a declaration block.
A declaration-block consists of a list of
semicolon-separated declarations in curly
braces. Each declaration itself consists of a
property, a colon (:) then a value.
In a new file, default.css:
IN CSS
body {
background-color: red;
}
Elements are styled through
selectors. Examples:
All elements
that is, using the * selector
By element name
e.g. for all p or h2 elements
Descendents
e.g. for a elements that are descendants of li
elements (e.g links inside lists) the selector is
li a
class or id attributes (from html)
e.g. .class and/or #id for elements with:
class="some_class"
id="some_id"
Adjacent elements
e.g. for all p elements preceded by h2
elements, the selector would be h2 + p
Direct child element
e.g. for all span elements inside p, but no span
elements deeper within the hierarchy, the
selector would be p > span
By attribute
e.g. for all <input type="text"> the selector
would be input[type="text"]
In addition to these, a set of pseudo-classes can be used
to define further behavior. Probably the best-known of
these is :hover, which applies a style only when the user
'points to' the visible element, usually by holding the
mouse cursor over it. It is appended to a selector as in
a:hover or #elementid:hover. Other pseudo-classes and
pseudo-elements are, for example, :first-line, :visited or
:before. A special pseudo-class is :lang(c), where the
style would be applied on an element only if it is in
language "c".
IN CSS
p{
font-family: "Garamond", serif;
}
h2 {
font-size: 110%;
color: red;
background: white;
}
.note {
color: red;
background: yellow;
font-weight: bold;
}
p#paragraph1 {
margin: 0;
}
a:hover {
text-decoration: none;
}
Examples inspired by http://en.wikipedia.org/wiki/Cascading_Style_Sheets
REMEMBER
http://webmonkey.com/webmonkey/reference/stylesheet_guide/units.html
http://www.ilovejackdaniels.com/css/box-model/
Classes are an attribute that may
be used however many times you
want. It is a blueprint for creating
many different styles.
IN HTML
<p class="note">This paragraph will be rendered

in red and bold, with a yellow
background.</p>
IN CSS
p.note {
color: red;
font-weight: bold;
background: yellow;
}
IDs are meant to be used only once
on a page, however, due to HTML
glitches, you may use just like
classes. Try to use only once per
page though.
IN HTML
<p id="note">This paragraph will be rendered in

red and bold, with a yellow background.</p>
IN CSS
p#note {
color: red;
font-weight: bold;
background: yellow;
}
HOWTO Connect CSS with HTML
Inline you would include stylesheets
inside the tags as an attribute.
IN HTML
<p style="color: red">Hello this is a red
paragraph.</p>
Why is this not correct?
Global Embedded
IN HTML
<html>
<head>
<title>Title</title>
<style type="text/css">

</style>
</head>
<body>
[DOCUMENT BODY GOES HERE]
</body>
</html>
Why is this not correct?
Linked (preferred)
IN HTML
<link rel="stylesheet" href="example.css"

type="text/css" />
Linking Example 2 (not all browsers)
IN HTML
<style type="text/css">
@import "example.css";
</style>
Inheritance
In cases where local, global, and linked style definitions
conflict, the most specific stylesheet will generally take
precedence: local overrides global, global overrides
linked. Similarly, inline style attributes override ID, ID
overrides class, and class overrides stylesheet-defined
HTML elements. (Hence the concept of cascading
stylesheets)
CSS Comments
IN CSS
body {
background: yellow;
padding: 4px;
/* border: 1px solid black; */
}
/* This is a comment and is not visible */

Reference
http://en.wikipedia.org/wiki/Cascading_Style_Sheets#Reference
http://jigsaw.w3.org/css-validator/
http://rejon.org/wiki/Developing_a_Buzz:Web_Workshop
READY FOR NEXT LEVEL?
What is the difference between
HTML tag and CSS selector formats?
HTML tag format
<a href="http://www.rejon.org/" class="myclass"
name="My Link" />
CSS selector format
a.myclass {
color: blue;
background: red;
padding: 8px;
}
CSS: Different DISPLAY Modes
INLINE

Does not break the current line.

EXAMPLES: <b />, <i />, <span />
BLOCK

Is a block that breaks a line

EXAMPLES: <p />, <h1..h* />, <div />,
<blockquote />
DIV

DIV stands for block level division.

It is generic.

DIVs are used in modern web design to create
the overall look and feel of a page.
Div Example
<div>

</div>
Div Example CSS
div {
padding: 2%;
background-color: red;
width: 20%;
}
Div Example 2 HTML
<div id="sidebar">
<p>This is my sidebar.</p>
</div>
Div Example 2 CSS
div#sidebar {
float: right;
padding: 2%;
background-color: #ccc;
width: 25%;
}
BOX MODEL
 Box model is a way of understanding how block
level elements styling works as a block.
http://www.redmelon.net/tstme/box_model/

http://www.w3.org/TR/REC-CSS2/box.html#box-dim

http://www.hicksdesign.co.uk/boxmodel/
GO THROUGH THIS!!!
http://www.w3.org/TR/REC-CSS2/box.html
Box HTML Example
<div id="box">
hello friends
</div>
Box CSS Example
div#box {
width: 100px;
border: 1px solid #900;
padding: 10px;
margin: 10px;
background: #fee;
}
<span>...</span>

This is used inline (like in paragraph)

May be used to specify style inline
Span Example
<p><span class="alert">NEW UPDATE</span>: This
is a new item.</p>
Span Example CSS
span.alert {
color: red;
text-decoration: blink;
}
LISTS: Unordered List
<ul>
<li>item one</li>
<li>item two</li>
<li>item three</li>
</ul>
Unordered Lists CSS
ul {
padding: 8px;
background: #eeeeee;
}
LISTS: Ordered List
<ol>
<li>item one</li>
<li>item two</li>
<li>item three</li>
</ol>
Ordered List CSS
ol {
padding: 2%;
background: green;
}
List Examples

http://www.w3schools.com/css/css_list.asp

NO DECORATIONS in CSS use:
− list-style-type: none;
<img />
<img src="myimage.jpg" alt="Text here in case image not loading"
name="Text for mouse when over image" class="myimage" />
CLASS EXAMPLE: We are designing a
page with one big main section, a
header, and sidebar.
Table-less Page Example
<html>
<head>
<title>hello</title>
</head>
<body>
<div id="header">
This is the header. Maybe good to put your title here and menu.
</div>
<div id="main">
This is where your main page section goes.
</div>
<div id="sidebar">
This is where possibly quick information, a menu, etc, might go.
</div>
</body>
</html>
Example CSS
html {
margin: 0;
padding: 0;
}
#header {
width: 100%;
background-color: blue;
color: white;
}
#main {
width: 80%;
float: left;
background-color: #eee;
}
#sidebar {
width: 20%;
float: left;
}
Example CSS Version 2
html {
margin: 0;
padding: 0;
}
#header {
width: 100%;
background-color: blue;
color: white;
padding: 2%;
}
#main {
width: 80%;
float: left;
background-color: #eee;
padding: 2%;
border: 1px dotted black;
}
#sidebar {
width: 20%;
float: left;
padding: 2%;
}
Designing Websites (reJon-Stylee)
Identify Goals + Site Structure
(Think Hierarchical)
How can you group content?
How can you group content?
Try to only make 5-7 categories for content
Make Proposal/Contract with Client
Be Specific as to what you are doing for them!
Develop Concept Sketches
Make Mockups in Favorite
Professional Way
Illustrator, Inkscape (http://www.inkscape.org/), Photoshop
Why use Illustration program compared to photo-editing app?
2:1 rule (about window size)
Minimum: 600 px width by 300 px height
Compression/Expansion: How will page compress and expand?
Navigation
Standard Navigation (unless really good idea to change)
Think in terms of sections/boxes (general): Header, menu, body,
sidebar, footer
Slice and Dice: Create
CSS+XHTML to match mockup
Use text editor, browser and image editor
Test
All Browsers (Internet Explorer, Mozilla, on both
Mac/PC)
Validation/Compliance
Demo Site and Get Feedback
If for client, then show to them
If everything fine, then done,
otherwise...
Revise the site and go back to "Slice
and Dice step" and continue...
jon@rejon.org
By eslitereader, http://flickr.com/photos/eslitereader/1070233293/
http://creativecommons.org/licenses/by-nc/2.0

W3b Sk1llz Zhongshan University Day 2: Creative Commons and Stylesheets

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

W3b Sk1llz Zhongshan University Day 2: Creative Commons and Stylesheets

Caricato da

Copyright:

Formati disponibili

W3b Sk1llz

Copy/Distribute Publicly Perform Publicly Display Build Upon Digitally Distribute

then you need to ASK!

Unless otherwise noted, this work is

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<p class="note">This paragraph will be rendered

<p id="note">This paragraph will be rendered in

<link rel="stylesheet" href="example.css"

/* This is a comment and is not visible */

Potrebbero piacerti anche