Step 4: CSS Navigation Bars and Images

1. CSS Navigation Bar

Navigation bars are crucial for any website, providing a user-friendly way to navigate through the site. With CSS, you can transform simple HTML menus into stylish navigation bars.

Navigation Bar = List of Links

<ul>
    <li><a href="default.asp">Home</a></li>
    <li><a href="news.asp">News</a></li>
    <li><a href="contact.asp">Contact</a></li>
    <li><a href="about.asp">About</a></li>
</ul>
            

Styling the Navigation Bar

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li a {
    display: block;
    width: 60px;
}
            

Vertical Navigation Bar Example

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #555;
    color: white;
}
            

2. Adding Images to Web Pages

Images can be embedded in a webpage via CSS, offering advantages such as responsive design adjustments. CSS can change an image's display properties based on the screen size, ensuring optimal layout across devices.

3. Image File Types

Each image file type has its unique characteristics. Understanding these can help you choose the most suitable format for your website's needs.

• .jpg: Small file sizes ideal for photographs. May lose quality when scaled up.
• .png: Supports transparency and maintains color depth but has larger file sizes.
• .gif: Best for animations but supports limited colors. Often used for small images.
• .svg: Excellent for scalable graphics like logos. Retains quality at any size.
• .webp: Superior compression techniques with smaller file sizes compared to JPG and PNG.
• .pdf: Typically not used for images but useful for documents.
• .tiff: High-quality but impractical for the web due to large file sizes.

4. Steps for Implementing an Image

1. Determine the maximum display dimensions of the image.
2. Use an image editor to create a canvas at the desired size.
3. Insert the image onto the canvas and adjust its size.
4. Save the image in the appropriate format.
5. Include the image using the <img> tag or CSS.
6. For responsive design, use CSS to control max-width and height.

5. Steps for Getting an Image Ready for Web Use

1. Edit the image to the largest needed size, considering device types.
2. Save the image in a format that balances quality and load time.
3. Use tools to optimize the image size without sacrificing quality.
4. Test the image's load time on different devices.

Example Image Embedding:

<img src="images/_skier-700x380.jpg" style="max-width:100%; height:auto;" alt="Photograph of skier on snowy slopes" />