w3b sk1llz zhongshan university day 2: creative commons and stylesheets

8/14/2019 W3b Sk1llz Zhongshan University Day 2: Creative Commons and Stylesheets

http://slidepdf.com/reader/full/w3b-sk1llz-zhongshan-university-day-2-creative-commons-and-stylesheets 1/138

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 copyrightowner a bundle of rights.

If you want to...

then you need to ASK!

Copy/Distribute Publicly Perform Publicly Display Build Upon Digitally Distribute

CC provides free licenses for

content (creative works).

No Rights Reserved.

Some Rights Reserved.

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.0un orted 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 phoneto 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 browserwindow to see changes.

B i HTML W b

Basic HTML Webpage

<html>

<head>

<title>Summer</title>

</head>

<h1>Summer Vacation</h1>

<p>My summer vacation was sunny, silly, and far tooshort.</p>

<p>How many days till Christmas?</p></html>

B i HTML W b

Basic HTML Webpage

<html>

<head>

<title>Summer</title>

</head>

<h1>Summer Vacation</h1>

<p>My summer vacation was sunny, silly, and far tooshort.</p>

<p>How many days till Christmas?</p></html>

http://rejon.org/wiki/Developing_a_Buzz:Web_Workshop

Testing: Validationhttp://validator.w3.org/

Valid Basic Webpage

Valid Basic Webpage<!DOCTYPE html

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

"DTD/xhtml1-transitional.dtd">

<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><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'sDigital 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 visitingfaculty 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

LASTCLASS

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 togroup member pages

TEACHING: Styling your Pages

Day 2: Web Design (CSS)

What are Stylesheets?

"In computing, Cascading Style Sheets (CSS) is astylesheet language used to describe the presentation of a document written in a markup language. Its most

common application is to style web pages written inHTML and XHTML, but the language can be applied toany kind of XML document, including SVG and XUL. TheCSS specifications are maintained by the World WideWeb 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_li

Current CSS Spec is 2.1http://www.w3.org/Style/CSS/

http://www.w3.org/TR/CSS1

http://www.w3.org/TR/CSS2/

http://www.w3.org/TR/CSS21/

BasicsA 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 curlybraces. Each declaration itself consists of aproperty, a colon (:) then a value.

IN CSS

body {background-color: red;

In a new file, default.css:

Elements are styled through

selectors. Examples:

All elementsthat is, using the * selector

By element namee.g. for all p or h2 elements

Descendentse.g. for a elements that are descendants of li

elements (e.g links inside lists) the selector isli a

class or id attributes (from html)e.g. .class and/or #id for elements with:

class="some_class"

id="some_id"

Adjacent elementse.g. for all p elements preceded by h2

elements, the selector would be h2 + p

Direct child elemente.g. for all span elements inside p, but no span

elements deeper within the hierarchy, theselector would be p > span

By attributee.g. for all <input type="text"> the selector

would be input[type="text"]

In addition to these, a set of pseudo-classes can be usedto 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 ina:hover or #elementid:hover. Other pseudo-classes andpseudo-elements are, for example, :first-line, :visited or :before. A special pseudo-class is :lang(c), where thestyle would be applied on an element only if it is inlanguage "c".

IN CSSp {

p {font-family: "Garamond", serif;

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

REMEMBERhttp://webmonkey.com/webmonkey/reference/stylesheet_guide/units.html

http://www.ilovejackdaniels.com/css/box-model/

Classes are an attribute that maybe used however many times youwant. It is a blueprint for creating

many different styles.IN HTML

<p class="note">This paragraph will be renderedin red and bold, with a yellowbackground.</p>

IN CSS

p.note {

color: red;

font-weight: bold;background: yellow;

IDs are meant to be used only onceon a page, however, due to HTMLglitches, you may use just like

classes. Try to use only once per page though.

IN HTML

<p id="note">This paragraph will be rendered inred 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>

</head>

<body>[DOCUMENT BODY GOES HERE]</body></html>

Why is this not correct?

Linked (preferred)

IN HTML

Linking Example 2 (not all browsers)

IN HTML

@import "example.css";</style>

InheritanceIn cases where local, global, and linked style definitionsconflict, the most specific stylesheet will generally take

precedence: local overrides global, global overrideslinked. Similarly, inline style attributes override ID, IDoverrides class, and class overrides stylesheet-definedHTML elements. (Hence the concept of cascadingstylesheets)

CSS Comments

IN CSS

body {

background: yellow;

padding: 4px;

/* border: 1px solid black; */

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

Referencehttp://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 formata.myclass {

color: blue;

background: red;

padding: 8px;}

CSS: Different DISPLAY Modes

INLINEDoes not break the current line.EXAMPLES: <b />, <i />, <span />

BLOCKIs a block that breaks a lineEXAMPLES: <p />, <h1..h* />, <div />,<blockquote />

DIVDIV stands for block level division.It is generic.DIVs are used in modern web design to createthe overall look and feel of a page.

Div Example<div>

</div>

Div Example CSSdiv {

padding: 2%;

background-color: red;

width: 20%;

Div Example 2 HTML<div id="sidebar">

<p>This is my sidebar.</p>

</div>

Div Example 2 CSSdiv#sidebar {

float: right;

padding: 2%;

background-color: #ccc;

width: 25%;

BOX MODELBox 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

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 Examplediv#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>: Thisis a new item.</p>

LISTS: Unordered List<ul>

<li>item three</li></ul>

Unordered Lists CSSul {

padding: 8px;

background: #eeeeee;

LISTS: Ordered List<ol>

<li>item three</li>

List Exampleshttp://www.w3schools.com/css/css_list.aspNO DECORATIONS in CSS use:

− list-style-type: none;

CLASS EXAMPLE: We are designing a

page with one big main section, aheader, and sidebar.

Table-less Page Example

<html>

<head>

<title>hello</title>

</head>

<body>

This is the header. Maybe good to put your title here and menu.

</div>

This is where your main page section goes.

</div>

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;

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;background-color: #ccc;

padding: 2%;

Designing Websites (reJon-Stylee)

Make Proposal/Contract with ClientBe Specific as to what you are doing for them!

Develop Concept Sketches

Make Mockups in Favorite

Professional WayIllustrator, 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 mockupUse text editor, browser and image editor

TestAll Browsers (Internet Explorer, Mozilla, on bothMac/PC)

Validation/Compliance

If everything fine, then done,

otherwise...

Revise the site and go back to "Slice

and Dice step" and continue...

w3b sk1llz zhongshan university day 2: creative commons and stylesheets

Documents

cascading stylesheets –1– · pdf filecascading...

sassy stylesheets with scss

zhongshan introduction and products list

w3b sk1llz at zhongshan university china day 1 of 2

developing stylesheets for online help

why use stylesheets? why use stylesheets? some...

behavioral stylesheets

xml and css csc1310 fall 2009. stylesheets stylesheets...

zhongshan city (2012) brochure

[ms-css21]: internet explorer cascading stylesheets (css...

accelerated stylesheets

sql injection(d3f4c3 w3b) guia completa by s4w-3xpl0it3r

präsentation von xml-dokumenten mit hilfe von...

greater zhongshan traveler's hankbook (en)

zhongshan eagle catalogue gas stove 5 burner

zhongshan yehome electric co., ltd. profile

zhongshan shengya audio electronic co.,ltd

12.09.2002 stylesheets: formatvorlagen in html1 stylesheets...

les 4 : xslt stylesheets

syntactically awesome stylesheets mit sass