Class 06

The Week’s Topics

Doctypes
Adding keywords and a description
Adding styles and script
Using a favicon
Text properties
CSS Box model
In-class meetings
Quiz 2


Assignment 6: Due Monday, April 2

1. Read all the “important stuff” for this week.
2. Continue work on Midterm Project.

If you haven’t already done so, choose a company/organization/service for your midterm project.

Be sure to pick a site that is in need of help. Choose a website (with at least 10 pages) that is a good example of the most common design mistakes outlined here: The 10 Most Common Mistakes Web Designers Make.  Upload the final files (Communication Brief, Site map and Home page design comp) to a Class 6 folder in your lastname_firstname folder on the class server and post to your class blog.

For next week, start working on the following:

  • Communication Brief (PDF)
  • Site map (PDF) Rethink the organization of the current site and make changes. Don’t forget to add the alpha numerical naming to your site map. See the example here: Monday May Design site map.
  • Home page design comp (Create this in Photoshop but upload it as a .jpg)

You need to complete these documents so you can design the rest of your site over Spring Break and start technical production. (April 9 –  April 15)

3. Read the following chapters from before our next class Monday, April 2.

Chapter 15: Links
Chapter 16:  Images


Quiz 2

Please click here to take Quiz 2

Doctypes

DOCTYPE is short for Document Type Definition, sometimes abbreviated DTD. These all mean the same thing.

Tip: You can find a lot more detail out about DOCTYPE at http://www.w3.org/QA/Tips/Doctype

HTML 5 Doctype

<!DOCTYPE html> (not a standard yet)

Meta Tags
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http:// www.w3.org/TR/html4/strict.dtd">
<html>
 <head> <title>Yahoo! UK & Ireland Eurosport—Sports News | Live Scores | Sport</title>

<meta name="description" content="Latest sports news and live scores from Yahoo! Eurosport UK.
Complete sport coverage with Football results, Cricket scores, F1, Golf, Rugby, Tennis and more.">

<meta name="keywords" content="eurosport, sports, sport, sports news, live scores, football, cricket,
f1, golf, rugby, tennis, uk, yahoo">

 </head>
 <body>
 ...
 </body>
 </html>
Media types

A media type allows you to specify what type of media this CSS will be applied to. The most common values are:

  • all: The CSS is to be used by all media types; this is the default behaviour if the media attribute is not provided.
  • screen: On screen only, i.e., when your browser is displaying the page on your desktop computer.
  • print: Styles only applied when the document is being printed out.
  • handheld: Some web-capable handheld device browsers use handheld media by default if it is found, however, most of the newer devices don’t, as many mobile browsers are now capable of displaying the same websites as desktop computers. Also, handheld media started to be abused by developers to provide a dumbed-down set of styles for mobile browsers with the hope of easy support for mobile devices, which is not fair to those browsing whilst on the move.
  • projection: The original intention of this option was to provide specifi c styling for HTML slide presentations, although this is very rarely used. Check out Opera’s Opera Show feature for a very good use of projection (see http://dev.opera.com/articles/view/html-css-slideshows/).
Using favicons

One last subject we’ll cover here is shortcut icons, or favicons. These are small images, generally with a file format of .ico, because Internet Explorer doesn’t support other formats (other browsers can also use .pngs and other formats for favicons).

If you place one on your web server and add the relevant <link> element to your document <head>, the icon will be displayed in the browser’s address bar to the left of the URL and in the tab that site is open in when someone accesses the page (and next to the site in the browser’s bookmark list)

You can add a favicon to your site by using a <link> element with a rel=”Shortcut Icon” attribute to reference it, as seen in the following example. The href attribute should point to the location of the favicon on your server.

 <head>
 ...
 <link rel="Shortcut Icon" href="favicon.ico"
 type="image/x-icon">
 ...
 </head>

The biggest obstacle to adding your icon is creating it in the right format, as not many graphics packages support the .ico format. One option is to use the free online tool genfavicon (http://www.genfavicon.com/). Also note that you need to call it favicon.ico, because Internet Explorer always looks for this specific filename.

The importance of good content and document structure

We have covered this before, so as a quick recap—your content absolutely needs to be concise and well structured for it to be

  • Generally usable and enjoyable for all users.
  • Accessible for users with disabilities using assistive technologies to browse the Web.
  • Easily manipulable using CSS and JavaScript.
  • Indexable by search engines and therefore easy to find on the Web.
Line lengths

One easy thing you can do to make things more legible is to make the content narrower. A general guideline is to make your text columns about 60–70 characters in length for easier reading.

Setting fonts

W3 School list of web-safe fonts: http://www.w3schools.com/cssref/css_websafe_fonts.asp

Text Sizing

An em is a scalable web measurement unit that is always equal to the current font size of the document, so for example if a default font size of 16px is currently being used for paragraphs, 16px is equal to 1em. Setting a font size of 2ems will always make the font double the default size. There is another equivalence to note here too—since 2ems doubles the font size, 2ems is equal to setting the size as 200%, while 80% will equal 0.8ems and 100% equals 1em, etc.

Other text properties

Other text properties available in CSS that you probably won’t use as often are as follows:

  • font-weight specifies how heavy/bold the text is, and can take values of 100, 200, 300, 400, 500, 600, 700, 800, or 900 (each one is progressively bolder), or it can take simpler human-readable values of lighter, normal (the default), bold, bolder. Bear in mind that not all fonts will accept all of these values, so you may need to do a little experimentation.
  • font-style specifies what variant of the font should be used, and takes values of italic, oblique, or normal (the default). This is likely to be used only if you absolutely need to style something to look italic but don’t want the associated semantic emphasis. oblique is similar to italic, the difference being that italic uses any available italic font of the font family being used, whereas oblique just takes the normal font and adds a slant to it.
  • font-variant specifies usage of a small-caps variant of the applied font, in which upper case letters are rendered normally, and lower case letters are rendered as smaller versions of their upper case equivalents. To set this on an element, use the declaration font-variant: small-caps;.
  • line-height specifies the height of each text line (just the line the text sits on; not the text itself), in whatever unit you choose. You can see this in use in the next chapter.
  • text-transform transforms the textual content of an element. Possible values are capitalize (capitalises all words), lowercase (makes all letters lowercase) and uppercase (makes all letters uppercase).
  • text-decoration specifies different types of decoration on the textual content of an element. Possible values are blink (makes the text blink on and off), underline (draws a line under the text), overline (draws a line above the text), and line-through (draws a line through the text).
The CSS box model

Since we are talking about layout here, it is time to introduce another fundamental concept that you should understand when working with HTML and CSS: the box model.

This is the model browsers use to work out how much space HTML elements take up on the page, and how much space to put between them. By default, block elements in your HTML appear one after another in the same order you placed them in the document (also known as source order), with some default margins separating them, and other default styles applied. Inline elements are placed one after the other inside block elements, kind of like placing some smaller boxes inside a larger box.

The space around a block element

Now let’s concentrate on a single block element. There are three layers that go around the element’s content, rather like the layers of an onion.

So the layers in the box model are content, padding, border, and margin. Also note the inclusion of height and width on this diagram. When you set the width and height properties of an element, you are actually just setting the width and height of the content. All the other layers add extra width and height on top of that. Study this carefully, and remember the order they are in—it will make it easier for you in future when you are solving content placement problems!

Remember this:

To calculate the overall width of a box, including all padding, borders and margins, you would use the following formula:

total box width = content area width + left padding + right padding + left border + right border + left margin + right margin

When two margins meet

When two vertical margins meet—for example, when a bottom margin is set on an element, and a top margin is set on the element directly below it—the margins collapse into one another, and the resulting margin is the same size as the larger of the two original margins.

 

CSS, CSS Selectors, CSS Box Model

View more presentations from jamiecavanaugh


Comments

  1. Jamie Cavanaugh March 26th


  2. Sebastian Nilsson March 26th

    Comment Arrow

    Hey Jamie! Was sick today so couldnt make it to class.. is there any way i can take the test next week?
    Im planning on doing one of these art gallery sites..
    http://www.cirrusgallery.com/
    http://subliminalprojects.com/
    http://www.tobeycmossgallery.com/
    http://www.galerielakaye.com/

    /Sebastian


  3. Kristina Hanson March 29th

    Comment Arrow

    Hi Jamie,

    I’ve decided to go with this website for my midterm project:

    http://www.malibulongboards.com/

    Would this be okay?
    Thanks!

    Kristina


  4. Jamie Cavanaugh March 30th

    Comment Arrow

    Hi Kristina,

    Yes that is fine.


  5. Ernie Sanchez March 31st

    Comment Arrow

    Hey Jamime, I would like to redesign

    http://art.yale.edu/

    is that alright with you?

    Ernie


  6. jamie April 1st

    Comment Arrow

    Yes, that’s fine.


  7. Mahnaz April 1st

    Comment Arrow

    Hi,

    can I redesign the below website?
    http://www.cedars-sinai.edu/index.aspx

    Mahnaz


  8. Jamie Cavanaugh April 1st

    Comment Arrow

    Hi Mahnaz,

    Please pick another site. The current Cedars-Sinai website is really well-designed.


  9. Mahnaz April 1st

    Comment Arrow

    Hi Maam,

    Having a hard time choosing a website to redesign.

    I’ve selected three educational sites. I’m not sure which one to select.

    Kindly guide me to select one from the below:

    https://www.wildwood.org/userlogin.cfm

    http://www.montessoripreschool.us/

    http://www.undertheseaindoorplayground.com/promotions.html

    Mahnaz


Add Yours

  • Author Avatar

    YOU


Comment Arrow




About Author

jamie

Instructor for Graphic Design 66