decor Selected Topics

 

Purpose:

This page will serve as a space for HTML and CSS topics that require more attention than we have time for in class.

Web Design Resources

This is a list of recommended websites and other resources that you can explore to enhance your experience in the class. This list is occasionally updated.

Link

Fixed Positioning

 

We will practice fixed positioning by creating a fixed layout for a single column webpage. Please right click, and save as, in order to download these two files in a folder called "fixed_parts":

HTML code

CSS code

This is not to be submitted.

Dropdown Menus

 

More information on CSS dropdown menus.

Special Underlines

Remember that underlines should only be used for hyperlinks. Otherwise, it might confuse users into thinking that it's a link. You might be interested, however, in some fancy underlines for special purposes.

www.digitalocean.com/community/tutorials/css-text-decoration

 

 

Typing on an Image

When we did the technique of typing on a picture in Chapter 7 website, it was done by using the image as a background.  Then simply using margins and padding to position the textbox. It’s OK to do it that way.  However, it’s not a good idea to go overboard with using images as backgrounds because they are not printed by default. 

Type on a picture

The most effective way of typing on a picture is to use CSS positioning. Download the Word File that contains the code.  

 

 

Slide Shows

Slideshows and image galleries are great ways to show multiple images. Howevever, there is an example of a gallery in Chapter 6. Then it is improved in Chapter 11
(You can open chapter6/6.9/ or chapter11/11.7/).

 

If you are interested in using any of these (or if you find your own) and want me to help customize them, I will be more than happy to do so.

Beyond the Basics:

The fancier and more interactive slideshows usually require more frontend development languages such as JavaScript. However, by doing the basic exercise from this text book, you have strong insights into how they work. Until you get a chance to learn JavaScript, you can also find free sources online. These are two that I recommend:

  1. http://www.123-slideshow.com

    This is a point-n-click online slideshow. It's not really fancy either, but it goes a few steps above the one in Chapter 11, and will further your understanding of how it works when you see the underlying code.
    Here are some quick steps to make a 4-picture slide show.
    1. set size to 400x300
    2. Upload pictures from Chapter6/starter folder. Use photo1, 2, 3 & 4 jpg
      For each pic, choose Upload, then Take Selection
    3. click red button "Next Step"
    4. Customize by editing your choices
    5. Download and unzip.

      If you feel that it's fair, you can even delete its logo from the code.

  2. https://wowslider.com/demos.html
    I purchased this a few years ago and still use it for some websites. It has a free version, which places a small credit stamp at bottom of slides.

  3. W3Schools has a few that are not as fancy, but the good thing is that they are highly customizable. Both contain "readable" JavaScript.
    1. www.w3schools.com/w3css/w3css_slideshow.asp
    2. www.w3schools.com/howto/howto_js_slideshow.asp

 

 

CSS Animation

Animation Practice

* We will start with a very brief overview on a slide presentation.

* Then come back and unzip THIS FOLDER. Save it in your assignment folder.

 

 

Back to Top