CSS Nav-bar
Navigation bars serve as vital components of websites, offering users an intuitive method for navigating through the site. Through CSS, simple HTML menus can be transformed into visually appealing navigation bars.
The basics to Nav-bar structure: Navigation bars are essentially lists of links. These are constructed using <ul> and <li> list tags. These lists can be stylized to become a navigation bar, common practices include removing bullets, margins, and paddings to ensure consistency across different browsers.
Vertical Navigation Bars involves additional styling by setting dimensions for <a> elements within <li>, enabling the entire link area to be clickable, and controlling the layout.
Here is a Nav-bar example of CSS styling:
a {
color:#3D6C6D;
text-decoration: none;
}
a:link {
text-decoration: none;
}
a:visited {
color: #3D6C6D;
}
a:hover {
font-weight: 500;
}
a:hover, a:visited {
outline: 0;
}
Adding images
Adding an Image step by step
- 1) Determine the maximum display dimensions of the image.
- 2) Use an image editor like Photoshop or a free alternative to create a canvas at the desired size.
- 3) Insert the image onto the canvas and adjust its size appropriately.
- 4) Save the image in the chosen format, considering the balance between quality and file size.
- 5) Include the image in your HTML using the <img> tag or CSS, depending on the context and requirements for responsiveness.
- 6) For responsive design, use CSS to control the image's max-width and height properties, ensuring it scales properly across devices.
How to quickly modify a photo for a faster upload
- 1) Edit the image to the largest needed size, considering the viewing context and device types.
- 2) Save the image for the web, choosing a format that offers a good balance between quality and load time.
- 3) Use tools or plugins within your image editing software to further optimize the image size without sacrificing quality.
-
4) Test the image's load time on various devices and connections to ensure a good user experience.
Always store original, unedited image files separately for future editing needs.
To embed an image in your page:
- 1) Determine the correct placement in your HTML code.
- 2) Embed the image using the <img> tag, and then adjust its width and height for responsiveness.
- 3) Ensure the 'alt' attribute is descriptive and accessible, improving SEO and accessibility for users with visual impairments.
Image Pros & Cons
JPG
Pros
- Small file size
- Good with color
- Good with photos
- Quality scale/adjustments
Cons
- Poor quality (can be blotchy)
- Transparant background is white
PNG
Pros
- Transparent background
- Excelent quality
- Good with color
Cons
- Too big
Pros
- Universal use on any OS
Cons
- Never was ment to be an image
TIFF
Pros
- Excelent quality
Cons
- Giant size
- Slow to load
SVG
Pros
- Quality
Cons
- Takes alot of coding
GIF
Pros
- Animated
- Compressed based on number of colors
Cons
- Not good with photos
- Sharp Edges
Bit Maps
Pros
- Small files
Cons
- No color
- Poor quality
- Dated quality