Moving divisions

2. Watch at home the following video from DIYWebmastery (7-1/2 min):

Image Formats: Understanding images

  • transparency

    • Class preparation

    1. Watch at home the following video by Jake Wright (12 mins):

    CSS: Learn CSS in 12 minutes

    2. Watch at home the following video from DIYWebmastery (7-1/2 min):

    Image Formats: Understanding images

    3. Learn about the RGB color format; play with the color selector at w3Schools.com

    We will also go over the basics of images and color formats.

    Class work

    Topics for today

    • General purpose editors: Notepad (Win), TextEdit (Mac), Sublime (Win/mac/linux)
    • How to specify colors: color codes, RGB, HSL, hexadecimal
    • Image depth: 8-bits, 24-bits
    • Transparency: the alpha channel, RGBA, HSLA
    • Image formats for webpages: GIF, JPG, PNG
    • Adding styles: the style tag vs. the style sheet
    • CSS (Cascade Style Sheets)

    Workfiles

    Download in class: classpak2.zip

    We start from were we left off last week, adding the style:

    style_dat

    1. webpage 3: We silhouette the containers so we can see them, for debugging purposes. Then, we get started rescaling the images:
       

       
    2. webpage 4: taking care of the body and the container.
       

       
    3. webpage 5: taking care of the header.
       

       
    4. webpage 6: taking care of the content.
       

       
    5. webpage 7: taking care of the main picture and text.
       

       
    6. webpage 8: taking care of the footer
       

       

    Resources