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.
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":
Then we will practice relative & absolute positing by typing on an image. I'll use my own little doohickey to show the basics. For more examples and info, go to this webpage.
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
Slide Shows (ignore, from previous book)
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:
-
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.
- set size to 400x300
- Upload pictures from Chapter6/starter folder. Use photo1, 2, 3 & 4 jpg
For each pic, choose Upload, then Take Selection - click red button "Next Step"
- Customize by editing your choices
- Download and unzip.
If you feel that it's fair, you can even delete its logo from the code.
- 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.
- W3Schools has a few that are not as fancy, but the good thing is that they are highly customizable. Both contain "readable" JavaScript.
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.