Class 04

The Week’s Topics

The importance of Good HTML Semantics
HTML Best Practices
HTML 5
The Anatomy of a CSS Rule
External CSS file
CSS Shorthand
CSS Measurement Units
Color in CSS
CSS Selectors
Inheritance
The Cascade
CSS3
Moving from Photoshop to Dreamweaver: Starting Technical Production.
In-class Demonstration: Layer-Based Slicing

Assignment 4: Due Monday, March 19

1. Read & watch all the “important stuff” for this week.
2. Practice Layer-Based Slicing.

Make revisions to your design comp and/or communication brief based on our in-class critiques. (Please post to your WP blog by Friday at the latest.)

Practice saving out the images you used in your design comp by using layer-based slices. This requires that your Photoshop file is layered and neat! Be sure to read the article: Tips and Tricks for Slicing in Photoshop. Upload the optimized images and the PSD to a Class 4 folder in your lastname_firstname folder on the class server.

3.  As review, watch the One-Column CSS Layout videos – Parts 1-3.

You don’t need to build this page but I want you to be familiar with how to build a one-column CSS layout. This is very important because next week we’re going to use the approach covered in these videos to build the Eight Hour Day home page. Please let me know if you have any questions about creating a one-column CSS layout.

4.  Read all the Class 04 notes below.

Read the following chapters from our textbook before our next class Monday, March 19.
Chapter 20: Floats
Chapter 21: Positioning

Dreamweaver Review. If you need to review or practice using Dreamweaver. Please view the following videos:
1. What is Dreamweaver?
2. Defining a New Site
3. Creating New Documents
4. Adding Structure to Text
5. Placing images On The Page
6. Creating Links in Dreamweaver


Quiz 1 Answers

2. Using the four basic tags, please write out the HTML structure used in all web pages.
<html> <head> <tittle> </tittle> </head> <body> </body> </html>

3. What is the HTML tag or set of tags required to insert a heading into a web page.
<h1> </h1>  <h2></h2>  <h3></h3> <h4></h4> <h5></h5> <h6></h6>

4. Please write out the HTML code required to add an image named cat.jpg into the body of a web page.
<img src = “images/cat.jpg” >
Even better: <img src = “images/cat.jpg” width=”200″ hight=”100″ alt=”cat.jpg displayed” />

5. Please write out the HTML code required to add a link for the Los Angeles Times (latimes.com) to the following text: “Click here to link to the article in the Los Angeles Times.”
<a href = “http://www.latimes.com/”> Click here to link to the article in the Los Angeles Times</a>

6. What is the HTML tag or set of tags required to insert a paragraph of text into a web page.
<p> </p>

7. What is the HTML tag or set of tags required to create a line break in a web page.
<br>

8. Please write out the HTML code required to add an email link for jane@janedoe.com to the following text: “Email Jane Doe.”
<a href = “mailto:jane@janedoe.com”> Email Jane Doe</a>

9. What is the HTML tag or set of tags required to insert a bulleted list into a web page.
<ul> <li> </li> </ul>

10. What is the HTML tag or set of tags required to make text bold?
<strong> </strong>


Assignment 3 Critiques

MacVaugh & Company Commercial Real Estate
http://www.macvaugh.com/

Food on Foot
http://www.foodonfoot.org/

Lycee International of Los Angeles
http://lilaschool.com/index2.htm


Review: Chapter 10: HTML Intro – Chapter 11: CSS Intro

HTML Intro

Block level means a higher-level element normally informing the structure of the document. It may help to think of block level elements being those that start on a new line, breaking away from what went before. Some common block level elements include paragraphs, list items, headings and tables.

Inline elements are those that are contained within block level structural elements and surround only small parts of the document’s content, not entire paragraphs and groupings of content. An inline element will not cause a new line to appear in the document; it is the kind of element that would appear in a paragraph of text. Some common inline elements include hypertext links, emphasized words and abbreviations, and short quotations.

HTML Semantics

Semantics means the meaning of a word, phrase, sentence, etc. In HTML terms, having good semantics means that your HTML should be self-describing—the elements wrapping the content should match the function or purpose of the content itself.

If we wanted to mark up a top-level heading followed by two lower-level headings, with content in between them, we could do it like this:

<font size="5">Information about cats</font>
<font size="2">This document contains information
about cats.</font>
<font size="4">Feeding cats</font>
<font size="2">Cats eat cat food.</font>
<font size="4">Cat games</font>
<font size="2">Cats like to play with balls of wool,
and chase mice.</font>

But this is bad—<font> elements are bad, bad old practice, and you should never use them in your work. In the bad old days of the Web this sort of markup was common, and it can still be found on many sites today.

Visually this results in the desired look, but in the end it’s just a bunch of text blocks that have no meaning. In addition, you should never specify how your HTML looks inside the HTML—all styling information should go in the CSS.

This is not good at all.

Instead you should use the right elements to convey the right meaning:

<h1>Information about cats</h1>
     <p>This document contains information about cats.</p>
<h2>Feeding cats</h2>
     <p>Cats eat cat food.</p>
<h2>Cat games</h2>
     <p>Cats like to play with balls of wool, and
chase mice.</p>
So why is a lack of semantics so bad?
  • First of all, people with impaired vision use an assistive technology called a screen reader to read web pages out to them. These use semantics in many ways—for example, they use headings to navigate the different pieces of content, so the users can fi nd what they want on a page. If there are no heading elements present, it is impossible for these users to effectively navigate the content.
  • Second, search engines such as Google and Yahoo! use keywords they find on pages to index and rank content, and they give more weight to keywords in headings. If your content contains no headings, it will be less likely to come up in search results, so fewer users will find it.
HTML Best Practices
.
  • Always include quotes around attribute values.
  • Always close elements properly after they have been opened.
  • Always nest elements properly.
  • Always separate content from presentation—you should keep all content inside the HTML, but separate all styling information into CSS. This means not using presentational elements like <font>.
  • Make sure your text is always well-worded and easily readable. Read Chapter 5, “Writing for the Web,” for more information on this.
  • Make sure your content is as usable and accessible as possible: see Chapters 22-24 for more information on accessibility.
The Anatomy of a CSS Rule
selector {
property1: value;
property2: value;
property3: value;
}

Example

p {
font-size: 2em;
font-family: Arial;
color: red;
border: 2px solid blue;
}
External Style Sheet
<head>
<title>External style sheet example</title>
<link rel="style sheet" type="text/css" href="external_stylesheet.css">
</head>
<body>
<p>This is a simple paragraph of text.</p>
<p>This is another paragraph of text, slightly longer
than the last one.</p>
</body>

External style sheets are best—they allow you to remove the styling information from the HTML completely, and you can style many HTML documents using a single style sheet, allowing control over a whole site’s styles from one place!

CSS Comments
/* These are basic element selectors */
selector {
property1: value;
property2: value;
property3: value;
}
CSS Shorthand
border: 2px solid blue;

This is actually the shorthand equivalent of the following lines:

border-width: 2px;
border-style: solid;
border-color: blue;
CSS Measurement Units

Pixel (px) A pixel is one dot on a computer monitor.
width: 200px;

Em (em) An em is equal to the default font size of the page. So if that is 16px, then 1em = 16px.
font-size: 2em;

Point (pt) A point is equal to 1/72 of an inch, although this is not completely reliable across platforms.
line-height: 36pt;

Percent (%) The measurement you specify will be equal to the percentage of the space available in the containing element.
width: 50%; /* The element’s width will always be equal to 50% of its parent element’s width */

  • It is usually best to size text using ems, as then the text will resize proportionally to its surroundings when browser resize controls are used, even in older browsers such as Internet Explorer 6.
  • If you want a column of content to always remain the same size, then pixels will usually suffice.
  • If you want a column of content to resize proportionally to browser width, percentages are ideal.
Colors in CSS
RGB(a)

So, to specify a color that includes transparency, you specify a value for the red, green, and blue channels, plus a value between 0 and 1 for the alpha channel. 0 is completely transparent while 1 is completely opaque.

For example:

p { color: rgba(255,0,0,0.25); } /* This color is very transparent… */
p { color: rgba(255,0,0,0.7); } /* …this one less so… */
p { color: rgba(255,0,0,0.95); } /* …while this one is almost completely opaque */
HSL(a)

HSL(a) works in a very similar way to RGB(a), except that the way of calculating the colors is different. HSL stands for Hue Saturation Lightness—some argue that this is an even more logical color system for designers to work with, as you can choose variations on a color by simply increasing the saturation or lightness values.

For example:

#p1 { background-color: hsl(0,100%,50%); }
#p2 { background-color: hsl(0,100%,60%); }
#p3 { background-color: hsl(0,100%,70%); }
#p4 { background-color: hsl(0,100%,80%); }
Selector Types

Resolving conflicts—inheritance and the cascade

Another question that often trips people up when learning about CSS is “How is it decided what style ends up being applied when there is a conflict, and two or more conflicting styles are applied to the same element?” To understand this, you have to understand inheritance and the cascade:

  • Inheritance is the mechanism by which certain properties are passed from a parent element on to its children. It’s quite similar to inheritance in genetics: if the parents have blue eyes, their children will probably have blue eyes, too.
  • The cascade is a very important concept—it’s where CSS gets a large chunk of its name from. It’s the mechanism that controls the end result when multiple confl icting and overlapping CSS declarations apply to the same element.
CSS3 – The Future of CSS


HTML 5
HTML5 Introduction

http://www.everythingaboutweb.com/build/code-for-html5-css-layout/

Moving from Photoshop to Dreamweaver
Technical Production

Moving from Photoshop to Dreamweaver. You’ve finished the design and now are ready to build the website. What do you do next? Start Technical Production.

http://www.everythingaboutweb.com/beginner/technical-production/

Image slicing

If you feel you need to brush up on the basics of image optimization and image slicing, please refer to the Class 02 notes.

Layer-Based Slices- Tips and Tricks for Slicing in Photoshop

http://designshack.co.uk/articles/graphics/how-to-make-slicing-suck-less-tips-and-tricks-for-slicing-a-psd

In-Class Demonstration: Layer-Based Slicing

Optimizing images for the Eight Hour Day home page (PSD) using Layer Based Slices.

CSS-Based Layouts

If you need to review the basics of creating a column layout with CSS, check out the One Column CSS Layout (Parts 1-3) on the Tutorials page.

 



Comments

  1. Mahnaz March 18th

    Comment Arrow

    Hi,

    Can anyone let me know how to upload the Image slicing files on class server. Also pls let me know the password, I forgot.

    thanks


  2. jamie March 18th

    Comment Arrow

    The password and all the information on connecting to the server is located on this site on the FTP page:
    http://www.classes.jamiecavanaugh.com/grdes66/ftp/


  3. Hector Rodriguez March 19th

    Comment Arrow

    Im notifying you that i wont be able to attend yet another class.. I got a gnarly foot infection which is making it impossible for me to move around. Ive been keeping up with the assignments and reading and reviewing them. If there is something that we are reading or discussing in class that isnt on the Class01-Class04 notes please let me know, thank you! Have a great monday!


Add Yours

  • Author Avatar

    YOU


Comment Arrow




About Author

jamie

Instructor for Graphic Design 66