Learn how to add and style an image in Dreamweaver CC 2018
Table of Contents
- Introduction
- Adding the Logo Container
- Saving the Image File
- Placing the Image on the Page
- Styling the Image with CSS
- Differences in Image File Types
- Choosing Between PNG and JPEG
- Conclusion
Introduction
In this article, we will learn how to add an image into your site directory and then place that image onto your webpage. Specifically, we will focus on adding a logo image to the site header. By following these steps, you will be able to effectively incorporate a logo into your web design.
Adding the Logo Container
To begin, we need to create a container for the logo. This container will hold the logo image and ensure proper positioning on the webpage. We will use a <div> element with the class "logo" to define the logo container. By using a class, we can easily modify the container's properties later if needed. Remember to add comments to make your code easier to understand.
Saving the Image File
Next, we need to save the logo image file into our site directory. It is important to save the image locally to avoid linking issues when the webpage is published online. Choose a logo image that suits your website's design and save it in the "images" folder within your site directory.
Placing the Image on the Page
Once the image file is saved, we can proceed to place the logo image onto the webpage. Within the logo container, add an <img> tag. Specify the source attribute to locate the image file, and the alt attribute to provide alternative text for accessibility. Make sure to properly link the image file using the correct file path.
Styling the Image with CSS
At this point, the logo may appear too large or improperly sized. To address this, we can utilize CSS to style the image. By targeting the logo class in the CSS stylesheet, we can modify specific properties of the image inside the logo container. For example, we can adjust the height of the logo to match the height of the header, ensuring a visually pleasing design.
Differences in Image File Types
In web design, we encounter various image file types, each with its own characteristics. It is important to understand these differences in order to choose the most suitable file type for your logo. The two commonly used file types are PNG and JPEG, each with its own advantages and considerations.
Choosing Between PNG and JPEG
When deciding between PNG and JPEG for your logo image, there are a couple of factors to consider. PNG files support transparent backgrounds, making them ideal for logos with non-rectangular shapes or when a transparent background is desired. On the other hand, JPEG files offer higher compression and smaller file sizes, making them a good choice for logos with complex images or when optimizing webpage loading speed is a priority. Consider the specific requirements of your logo and website to make an informed decision.
Conclusion
Adding a logo image to your webpage can enhance its visual appeal and brand identity. By following the steps outlined in this article, you can successfully add a logo to your site directory and incorporate it into your web design. Remember to choose the appropriate file type based on the characteristics of your logo and consider factors such as transparency and file size. With a well-placed and styled logo, your webpage will look more professional and engaging.
Resources:
