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.
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":
This is not to be submitted.
More information on CSS dropdown menus.
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.
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.
The most effective way of typing on a picture is to use CSS positioning. Download the Word File that contains the code.
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:
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.
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.
* 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.