Lecture Summary 4a
Prepared by: Anthony Larrain
Announcements
- Midterm project was due Sarurday.
- Midterm project been graded.
- Make sure you submitted the link to your project.
- There will be a lab check on Thuesday, Nov. 12, 11:59pm
- Make sure all the answers for labs 5 - 9 (parts A and B ) are uploaded to your students account. You do not need to hand in the lab from class 10. That was simply a set of exercises to help you with the project.
- Submit the link to your labs at the COL website under labcheck2. Do this today during lab.
- After you submit the link make sure to click on it and verify it is working.
Project 1 Comments
- Navigation links should be one or two words.
- In line links can be multiple words, not too many.
- All navigation links need to be in the same place for all pages
- You should not have two navigation links with the same name
- Put some spacing between images and text
- Text should not span the whole width of the web page
- Revisit the concept of
float
andclear.
Float and Clear
When elements, in particular, images are floated (left or right ) elements following the image will line up next to the image. If you want an element to appear underneath the image then you have to clear
that element.
Example
Suppose a CSS class selector has been written to float images left.
Suppose we wanted to display two pictures underneath each other separated by a horizontal rule with a short description along side each picture
Here is the code.

I lived in this house from 1962 - 1972. Some people say it was haunted

I lived in this house from 1972 - 1976. Pretty cool !
Both of these houses ......
Browser Display

I lived in this house from 1962 - 1972. Some people say it was haunted

I lived in this house from 1972 - 1976. Pretty cool !
Both of these houses ......
Note: Since there is not enough text to wrap around the first image, the next element, which is a horizontal rule will line up next to the image. Also the second picture lines up next to the first picture.
Since we want the horizontal rule and subsequent elements to go underneath image we must clear the horizontal rule.
Need to write a class selector to clear the elements
Now to clear the horizontal rule we write.
Browser Display

I lived in this house from 1962 - 1972. Some people say it was haunted

I lived in this house from 1972 - 1976. Pretty cool !
Both of these houses ......
Note: you can clear any element.
Working With FrontPage 2003
- WYSIWYG, pronounced Whizzie Wig, is an acronym for What You See Is What You Get.
- FrontPage is a web site development tool developed by Microsoft.
- Allows you to create web pages in a way similar to entering text into Word.
- The FrontPage editor will generate the HTML for you.
- If you already know HTML why use FrontPage ?
- Certain tasks can be accomplished faster.
- Can be easier to create more involved layouts than using HTML / CSS
- Built in feature to help manage complete web sites
- In lab we will work with FrontPage
- FrontPage tutorial