Week 13ART 239 Web Design I

Class Notes for Monday 4/29/19, Wednesday 5/1/19

Agenda

Download the Class Presentation PDF

CSS Units

We use various units to define the sizes of elements on the page and each has it's benefits.

px
Absolute value in pixels.
em
Relative to the font-size of the element (2em means 2 times the size of the current font)
rem
Relative to font-size of the root element

Lightbox

Much of the functionality we want to use has already been developed and is offered for free or at a small cost (sometimes just an attribution line) by other designers and developers on the web. That's what makes the web so great - open sharing of information. One of these tools is "Lightbox" a free image gallery javascript that lets you create "pop-up" (modal) image galleries on your site. You can find Lightbox here.

You can download the files and follow the instructions to implement a lightbox gallery onyour own site.

jQuery Modal

Another great javascript tool is the jQuery Modal script. It allows you to open a "modal" window on your oage with any content in it you like. It could be a video, an image (like the Lightbox), a grid layout, text, anything. Just like the Lightbox tool, all the instructions for its use are laid out for you, just follow the instructions and it'll work. You can find jQuery Modal here.