Designing Site IDs
This exercise uses several techniques to create a graphical site id. Any of these is an appropriate way to create a site id. The method you choose depends on what you want your site id to look like and whether you have a hover style in the image.
This exercise also shows several ways to lay out a banner, depending on the design you have for the relationship between the site id and the menu.
The text in the pages describes the process in greater detail than this readme file, which is more of an overview. Be sure to view the screenshots of completed designs, although they do not show the hover style. You need to complete the hover style according to the instructions in each page.
1: Image for site id
This layout uses an image in place of the site id text. The site id text MUST be put in as the alt text for the image.
The tagline and menu display in the same horizontal line using grid. You'll need to put in a grid container.
2: Image for site id (alt)
This is similar to the first layout, but there is no tagline and the site id is centered above the menu. No need for grid.
This design has a hover for the image using the filter property. Read all about it.
3: FIR (Fahrner Image Replacement) technique for site id
You will style this using image replacement in the anchor tag. You'll need to add some markup to the anchor tag for image replacement to work (suppress the display of the site id text in the page). Watch the video and read PDF lecture notes for more details on how Image Replacement works.
This style uses a hover that swaps the first background image for a second background image
As always, be sure your pages validate (html and css)