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



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

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'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:[email protected]">email</a></p>



</body>

</html> http://rejon.org/wiki/Developing_a_Buzz:Web_Workshop#Valid_Basic_Page

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

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

http://www.csszengarden.com/

http://en.wikipedia.org/wiki/Cascading_Style_Sheets#External_links

http://en.wikipedia.org/wiki/Cascading_Style_Sheets#External_links

http://www.csszengarden.com/



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;

}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



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

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

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



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



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



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>



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://en.wikipedia.org/wiki/Cascading_Style_Sheets#Reference



http://en.wikipedia.org/wiki/Cascading_Style_Sheets#Reference








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

http://www.redmelon.net/tstme/box_model/

http://www.w3.org/TR/REC-CSS2/box.html#box-dimensions

http://www.hicksdesign.co.uk/boxmodel/

http://www.w3.org/TR/REC-CSS2/box.html

http://www.w3.org/TR/REC-CSS2/box.html

http://www.hicksdesign.co.uk/boxmodel/

http://www.w3.org/TR/REC-CSS2/box.html#box-dimensions

http://www.redmelon.net/tstme/box_model/



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 one</li>

<li>item two</li>

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



Unordered Lists CSSul {

padding: 8px;

background: #eeeeee;

}



LISTS: Ordered List<ol>

<li>item one</li>

<li>item two</li>

<li>item three</li>

</ol>





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

− list-style-type: none;

http://www.w3schools.com/css/css_list.asp

http://www.w3schools.com/css/css_list.asp



<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, aheader, 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;

}



Example CSS Version 2



p

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



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

Documents

W3b Sk1llz Zhongshan University Day 2: Creative Commons and Stylesheets