Research For Experience Design

CSS Liquid Layout

beau9 — Wed, 14 Apr 2010 23:11:47 +0000

By: Helaena Parkes

1. What is CSS and how does it work? How do you use CSS to control style and layout of multiple web pages at once? What is the correct HTML for referring to an external style sheet?

CSS stands for a cascading style sheet. CSS’ are used all across the World Wide Web to separate websites from their original content in conclusion ensuring better organization, and easier processing when creating websites. When working with CSS, it is partially similar to HTML. However, when working with CSS, you use HTML or XHTML file to arrange the content, but all of the design (fonts, colors, background, borders, text formatting, link effects, etc.) are done in a CSS file. Two file types are known within CSS, internal and external. When using HTML the correct format is simple. You must save your file as a .css extension, and saved. This should be done in a separate file and you must attach all HTML pages. You must create a ink set in between the . This makes everything easier when linking in between pages.

main.css“>

…web page content…

2. What does the style attribute do and what do declaration, property, and values refer to?

When working with CSS the style attribute refers to you being able to add style anywhere in your site that you please. The style attribute is used through an HTML document. When you add it into the html file, it is called “declaration” or declaring the style attribute. “Declaration” refers to the action of adding the style attribution into the HTML file. The “value section” of the file is where you would put the specific value of a property in which you would like to change, and the “property section” is where you place particular styles you want to change.

3. What is the CSS box model?

A CSS box model is the genetic make up of the website, as each site is made up of rectangular boxes. Each box is made generic to its own with specific codes, properties, declarations and values. Each box has a content area and optional surrounding padding, border, and margin areas. The following diagram shows how these areas relate and the terminology used to refer to pieces of margin, border, and padding:

4. How do you set an image as the background of a page?

It takes a very basic code to place an image as the background of your webpage. In the CSS file of your site you would place the code in the body area. {}. background-image: url(“IMAGE URL”);

5. What is liquid layout? How do you build a liquid layout with CSS?

Liquid layout are layouts that are based on percentages of the current browser window’s size. They flex with the size of the window, even if the current viewer changes their browser size as they’re viewing the site. they are preferred by designers, as websites with a lot of information to pull through in as little amount of space as possible, these pages usually remain steady in size.

With regards to creating a liquid layout, it is a simple and easy way of layering a web page. A liquid design displays information and images, the website adapts itself to the available space. Using liquid layouts within css is all about absolute positioning. Your boxes within the layouts will fall under this code:

Content

Navigation

Header image

to put content in the box is as follows

div.content {

position: absolute;

margin: 267px 0px 0px 0px;

width: 749px;

z-index: 1;

}

6. What is the difference between inline and block-level elements? How do you use them?

A block-display element will span the full width of the space available to it, and so will start on a new line in the flow of HTML. The flow will continue on a new line after the block-display element and are used through CSS webpages. The inline elements are usually contained within the block level elements and are mostly used to render text.

***Help from: htmlhelp.com and webdesignsfromscratch.com

Assignment Presentations

alxbal — Fri, 09 Apr 2010 14:48:26 +0000

Friday Presentations

13:10-13:20 Social Link: http://www.imagearts.ryerson.ca/ajordan/soliv3/home.html

13:30-13:40: HGX50: http://www.wix.com/TheHGX50/First-Draft

13:50-14:00 Juliet Love: http://imagearts.ryerson.ca/tpokrupanahanni/assignment3/index.html

14:10-14:30: Mindmesh: http://mindmesh2050.wordpress.com/

14:40-14:50: The Meta Lens: http://imagearts.ryerson.ca/kkapetaneas/assignments/2050/

15:00-15:10: THE WORLD IN 2050: http://imagearts.ryerson.ca/kang/2050_-_Monica_%26_Kalytta/Welcome.html

15:20-15:30: Year 2050: http://imagearts.ryerson.ca/llou/2050/

15:30-15:40: Oscar, and Kayla’s group: http://imagearts.ryerson.ca/kclark/Genu-Flek/Genu-Fleck.html

15:50: Jessica ren: http://www.imagearts.ryerson.ca/pren/2050/2050.html

Christine and Kathryn: Cuub: http: http://www.imagearts.ryerson.ca/kbarrett/lifein2050.html

Gobal Net : http://www.imagearts.ryerson.ca/vwhite/2050/product

Tuesday Presentations:

9:10-9:10: AOI

9:30-9:40: Life Chip

9:40-9:50: Generation of 2050(skipped, not ready): http://www.imagearts.ryerson.ca/npowell/mpm17/2050.html

10:00-10:10: MyAccess

10:20-10:30: npc bots

10:40-10:50: open source energy

11:00-11:10: persocom http://www.facebook.com/profile.php?id=100000930511935&ref=ts,

11:20: 11:30: Tranceform: http://www.imagearts.ryerson.ca/mpalermo/Pages/tranceform/index.html

11:40: 11:50: 3D Virtual Shopping

Final Assignment: Network cultures in 2050

Konstantino — Fri, 09 Apr 2010 03:40:26 +0000

Project Title: “The Meta Lens”

Group Members: Konstantino Kapetaneas, Winnie Kwan, Jonathan Séguin

URL: Check it out here!

Assignment 3: Network Cultures in 2050

ilyana19 — Wed, 07 Apr 2010 02:53:36 +0000

Members: Linda Lou, Lilian Chow
Link: http://imagearts.ryerson.ca/llou/2050/

Network Cultures in 2050 Assignment – The Life Chip

Connors E — Tue, 06 Apr 2010 16:39:45 +0000

Connors Eilersen

Jessica Porretta

Megan Shier

Jenny Truong

http://www.imagearts.ryerson.ca/ceilersen/year2050/index.html

Social Networking in 2050

Alex Jordan — Tue, 06 Apr 2010 03:47:32 +0000

Project title: SociaLink (see link: http://www.imagearts.ryerson.ca/ajordan/soliv3/home.html )

Group members: Alex Jordan, David Yu, Jessie Cooper, Kim Sokolowski, Nicole Glassman

Sarah, Lauren, Jenny, Sherilyn

jennyramroop — Tue, 06 Apr 2010 01:02:00 +0000

Here’s the link to our website for Assignment 3: Network cultures in 2050:

http://www.imagearts.ryerson.ca/jramroop/2050.html

2050 Project – Genu-Flek

clarkayl — Mon, 05 Apr 2010 21:04:00 +0000

Here is a link to our mock-up website for Genu-Flek

and Here is a link to our project documentation

-Kayla Clark, Jordan Taylor & Oscar Hazelaar

What is HTML? (Reposted)

Jessie — Wed, 31 Mar 2010 03:48:15 +0000

This was done by Kim Sokolowski, Jessie Cooper, Liat Shalom and Chloe Martin

Nicole Powell: MPM17 Final Project Process Work

nicole — Sun, 28 Mar 2010 19:10:25 +0000

Here is the page that I will update each week with my process work:

Week 1- Developing Idea

I wanted to do something based on the article below, the one that you told us to read during our Digital Natives classes. I’ve decided to do something based on the people of 2050, the mind-state of humans in that era, in comparison to the mind-states of the Digital Natives. My narrative will be based on what we will do, how we will act, and the way we think in 2050. I will use the information gained from the article, The Emerging Online Life of the Digital Native: What they do differently because of technology, and how they do it, and research on technology we expect to see in the future to make an informed prediction of how our mind-states will evolve. Next week, I hope to come up with an idea of what type of media I will use to portray my findings, as well as how I will use it.

http://tinyurl.com/aalvk

Week 2- Media Concept and Research

I have decided that I will portray my information by way of a manifesto. Just as this generation is called the Digital Native, I will name the generation of 2050 and will create a manifesto for their way of life and their way of thinking. This manifesto, to make things more interesting, will be created using typography animation in Adobe Flash CS4. This week, I have done my research in order to create the manifesto. Next week, I will actually write the manifesto and come up with a name for the generation of 2050. If I have time, I will also do the technical research in how to create a typography animation piece.

Research

Summary of last week’s article posting:
http://www48.zippyshare.com/v/17766809/file.html

Key points from a TEDtalk with Kevin Kelly:
http://www48.zippyshare.com/v/11689296/file.html

Example of a typography animation:
http://www.youtube.com/watch?v=pxkM3YTWu9s

Week 3- Manifesto and Technical Research

I have written out my manifesto. I might need to shorten it or make it more concise when it comes to creating the typography animation, but I’ll try and fit it all in initially. I also managed to find an amazing tutorial on kinetic typography animations. The link to the manifesto and the tutorial are below. The final process update is the finished project. That will be posted on the due date.

Manifesto:
http://www48.zippyshare.com/v/87411523/file.html

Kinetic Typography Tutorial:
http://www.crookedgremlins.com/09/01/2008/kinetic-typography-tutorial/

Process Week 4

After much hassle, I finally got the final project to work. As I did not present in class, I wanted to show you how I would have presented it by adding a voice over to the final video. It is a manifesto for the generation of 2050 that describes their mind-state and way of life. Click the link below to go to the video:

http://www.imagearts.ryerson.ca/npowell/mpm17/2050.html