fr - ucsbyanju/misc/webarts04.pdf · 2020-07-19 · bc basic css tutorial for web artist css is an...
TRANSCRIPT
# HELLO~
BcBasic CSS Tutorial for Web Artist
IlCreating Web Illusions
FrFront End – About Inspirations and Feelings
Web Arts #4 – Web IllusionsBy Yanju Chen
BcBasic CSS Tutorial for Web Artist
BcBasic CSS Tutorial for Web Artist
HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like <html>), within the web page content. HTML tags most commonly come in pairs like <h1> and </h1>, although some tags, known as empty elements, are unpaired, for example <img>. In between these tags web designers can add text, tags, comments and other types of text-based content.
The purpose of a web browser is to read HTML documents and compose them into visible or audible web pages.
WHAT IS HTML?
© WOY 2012
BcBasic CSS Tutorial for Web Artist
CSS is an acronym for Cascading Style Sheets.
CSS is a style language that defines layout of HTML documents. For example, CSS covers fonts, colours, margins, lines, height, width, background images, advanced positions and many other things. Just wait and see!
HTML can be (mis-)used to add layout to websites. But CSS offers more options and is more accurate and sophisticated. CSS is supported by all browsers today.
WHAT IS CSS?
© WOY 2012
BcBasic CSS Tutorial for Web Artist
It can be:
1. Inside the HTML Document• Inline • <p style="font-size: 10px; color: #FFFFFF;"></p>
• Inside• <style type="text/css"></style>
2. Outside the HTML Document• <link rel="stylesheet" type="text/css" href="http://www.dreamdu.com/style.css" />
3. Nowhere• Use the Browser Defaults
WHERE IS CSS?
© WOY 2012
BcBasic CSS Tutorial for Web Artist
1. Selector(Elements, ID, Class, Properties…)2. Properties
1. Background2. Text3. Font4. List
3. Positioning1. Box Model2. Position3. Float
4. Advanced Features
TYPICAL CSS ELEMENTS
© WOY 2012
BcBasic CSS Tutorial for Web Artist
WHAT CAN I DO?
© WOY 2012
IlCreating Web Illusions
© WOY 2012
IlCreating Web Illusions
EXAMPLE #1FLEXIBLE LAYOUT(IMAGE ILLUSIONS)
© WOY 2012
IlCreating Web Illusions
EXAMPLE #2FLEXIBLE LAYOUT(LAYOUT ILLUSIONS)
© WOY 2012
IlCreating Web Illusions
EXAMPLE #3FLEXIBLE LAYOUT(POSITION ILLUSIONS)
© WOY 2012
IlCreating Web Illusions
EXAMPLE #4FLEXIBLE LAYOUT(SLICING ILLUSIONS)
© WOY 2012
IlCreating Web Illusions
EXAMPLE #6NATURAL INTERATION
© WOY 2012
IlCreating Web Illusions
SO…WHAT CAN I DO?
© WOY 2012
FrFront End – About Inspirations and Feelings
© WOY 2012
FrFront End – About Inspirations and Feelings
THINGS YOU CAN DO #1TRYING TO FEEL YOURSELF
© WOY 2012
FrFront End – About Inspirations and Feelings
THINGS YOU CAN DO #2SEEKING FOR INSPIRATIONS
© WOY 2012
FrFront End – About Inspirations and Feelings
THINGS YOU CAN DO #3TO BE AN ARCHITECTURE
© WOY 2012
FrFront End – About Inspirations and Feelings
THINGS YOU CAN DO #4TO WORK HARDER AND HARDER
© WOY 2012
FrFront End – About Inspirations and Feelings
SPECIAL OFFER #1FRONT END ANALYSIS
© WOY 2012
FrFront End – About Inspirations and Feelings
SPECIAL OFFER #2FUNNY SITES
© WOY 2012
FrFront End – About Inspirations and Feelings
# THE END ## GOOD LUCK #
© WOY 2012